/*! @techconcert/orquestra-visual-foundation 1.0.0-rc.3 */
/*
 * Orquestra Visual Foundation tokens.
 * Light is ivory/copper/brass/verdigris; dark preserves the original
 * petrol/cyan Orquestra command language.
 */
:root,
html[data-theme="light"] {
  color-scheme: light;
  --tc-font-sans: Inter, ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", sans-serif;
  --tc-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --tc-canvas: #efe9dc;
  --tc-canvas-deep: #e3d5be;
  --tc-surface: #fffdf8;
  --tc-surface-raised: #fffaf0;
  --tc-surface-muted: #f4ecdc;
  --tc-ink: #252827;
  --tc-ink-soft: #55544e;
  --tc-muted: #6b675e;
  --tc-line: #d6c8b2;
  --tc-line-strong: #aa8c63;
  --tc-rail: #25292a;
  --tc-rail-deep: #151b1d;
  --tc-rail-ink: #f5ebda;
  --tc-rail-muted: #b7ab9a;
  --tc-copper: #985a35;
  --tc-copper-bright: #bd7e45;
  --tc-brass: #a87b32;
  --tc-verdigris: #527a71;
  --tc-cyan: #217e8d;
  --tc-violet: #6553a6;
  --tc-magenta: #9d4f78;
  --tc-green: #2d8061;
  --tc-success-ink: #15523d;
  --tc-amber: #a76516;
  --tc-danger: #b23c3d;
  --tc-focus: #075f82;
  --tc-frame: rgb(145 89 51 / 55%);
  --tc-frame-soft: rgb(168 123 50 / 20%);
  --tc-shadow: 0 20px 54px rgb(71 48 27 / 16%);
  --tc-card-shadow: 0 9px 22px rgb(70 51 30 / 9%);
  --tc-radius-sm: 6px;
  --tc-radius: 8px;
  --tc-radius-lg: 13px;
  --tc-rail-compact: 68px;
  --tc-rail-expanded: 272px;
  --tc-orquestra-energy: var(--tc-copper-bright);
  --tc-frame-filter: sepia(0.78) saturate(1.16) contrast(1.08);
}

html[data-theme="dark"] {
  color-scheme: dark;
  --tc-canvas: #071015;
  --tc-canvas-deep: #0c1b22;
  --tc-surface: #0e1a20;
  --tc-surface-raised: #12232b;
  --tc-surface-muted: #172a31;
  --tc-ink: #e7f1ef;
  --tc-ink-soft: #b9c8c7;
  --tc-muted: #809695;
  --tc-line: #28434a;
  --tc-line-strong: #41636b;
  --tc-rail: #071015;
  --tc-rail-deep: #03080b;
  --tc-rail-ink: #e7f1ef;
  --tc-rail-muted: #94abaa;
  --tc-copper: #b57445;
  --tc-copper-bright: #d49a5f;
  --tc-brass: #d1a94d;
  --tc-verdigris: #5b9b91;
  --tc-cyan: #20c9d2;
  --tc-violet: #9274f7;
  --tc-magenta: #ef72b6;
  --tc-green: #43c996;
  --tc-success-ink: #a8f0d2;
  --tc-amber: #f2ab43;
  --tc-danger: #ff6572;
  --tc-focus: #75e0eb;
  --tc-frame: rgb(187 127 75 / 44%);
  --tc-frame-soft: rgb(32 201 210 / 12%);
  --tc-shadow: 0 22px 60px rgb(0 0 0 / 42%);
  --tc-card-shadow: 0 10px 26px rgb(0 0 0 / 25%);
  --tc-orquestra-energy: var(--tc-cyan);
  --tc-frame-filter: brightness(1.08) saturate(1.06);
}


.tc-scope,
.tc-scope *,
.tc-scope *::before,
.tc-scope *::after {
  box-sizing: border-box;
}

.tc-scope {
  color: var(--tc-ink);
  background: var(--tc-canvas);
  font-family: var(--tc-font-sans);
  font-size: 14px;
}

.tc-scope :is(button, input, select, textarea) {
  color: inherit;
  font: inherit;
}

.tc-scope :is(button, [href], input, select, textarea):focus-visible {
  outline: 3px solid var(--tc-focus);
  outline-offset: 3px;
}

.tc-panel,
.tc-card,
.tc-dialog,
.tc-drawer {
  min-width: 0;
  border: 1px solid var(--tc-line);
  border-radius: var(--tc-radius-lg);
  color: var(--tc-ink);
  background: linear-gradient(
    145deg,
    var(--tc-surface),
    var(--tc-surface-raised)
  );
  box-shadow: var(--tc-card-shadow);
}

.tc-panel {
  padding: 18px;
}

.tc-card {
  position: relative;
  padding: 18px;
  overflow: hidden;
}

.tc-button,
.tc-icon-button {
  min-height: 36px;
  border: 1px solid var(--tc-line-strong);
  border-radius: var(--tc-radius);
  color: var(--tc-ink);
  background: var(--tc-surface);
  font-size: 12px;
  font-weight: 750;
}

.tc-button {
  padding: 0 13px;
}

.tc-icon-button {
  width: 36px;
  display: grid;
  place-items: center;
  padding: 0;
}

.tc-button:is(:hover, :focus-visible),
.tc-icon-button:is(:hover, :focus-visible) {
  background: var(--tc-surface-muted);
}

.tc-button-primary {
  border-color: color-mix(in srgb, var(--tc-copper) 70%, #000);
  color: #fff8ed;
  background: linear-gradient(110deg, var(--tc-copper), var(--tc-brass));
  box-shadow: 0 7px 18px color-mix(in srgb, var(--tc-copper) 25%, transparent);
}

.tc-button-danger {
  border-color: var(--tc-danger);
  color: #fff;
  background: var(--tc-danger);
}

.tc-field {
  display: grid;
  gap: 6px;
  min-width: 0;
  color: var(--tc-ink-soft);
  font-size: 12px;
  font-weight: 700;
}

.tc-field :is(input, select, textarea),
.tc-theme-control select {
  min-width: 0;
  min-height: 40px;
  border: 1px solid var(--tc-line);
  border-radius: var(--tc-radius);
  padding: 8px 10px;
  color: var(--tc-ink);
  background: var(--tc-surface);
}

.tc-tabs {
  display: flex;
  min-width: 0;
  overflow-x: auto;
  border-bottom: 1px solid var(--tc-line);
}

.tc-tab {
  position: relative;
  flex: 0 0 auto;
  min-height: 40px;
  border: 0;
  padding: 0 12px;
  color: var(--tc-muted);
  background: transparent;
}

.tc-tab[aria-selected="true"] {
  color: var(--tc-ink);
  font-weight: 800;
}

.tc-tab[aria-selected="true"]::after {
  position: absolute;
  right: 10px;
  bottom: 0;
  left: 10px;
  height: 2px;
  background: linear-gradient(90deg, var(--tc-copper), var(--tc-verdigris));
  content: "";
}

.tc-table-wrap {
  width: 100%;
  overflow: auto;
  border: 1px solid var(--tc-line);
  border-radius: var(--tc-radius-lg);
}

.tc-table {
  width: 100%;
  min-width: 680px;
  border-collapse: collapse;
  background: var(--tc-surface);
}

.tc-table :is(th, td) {
  padding: 11px 13px;
  border-bottom: 1px solid var(--tc-line);
  text-align: left;
}

.tc-table th {
  color: var(--tc-muted);
  background: var(--tc-surface-muted);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.tc-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  border: 1px solid var(--tc-line);
  border-radius: 999px;
  padding: 2px 8px;
  color: var(--tc-muted);
  background: var(--tc-surface);
  font-size: 10px;
  font-weight: 800;
}

.tc-badge-success {
  color: var(--tc-success-ink);
  border-color: color-mix(in srgb, var(--tc-green) 55%, var(--tc-line));
}

.tc-theme-control {
  display: grid;
  gap: 5px;
  min-width: 132px;
  color: var(--tc-muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.tc-overlay {
  position: fixed;
  z-index: 1000;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 16px;
  overflow: auto;
  background: rgb(4 9 12 / 72%);
}

.tc-dialog {
  width: min(680px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  overflow: hidden;
}

.tc-dialog-header,
.tc-dialog-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
}

.tc-dialog-header {
  border-bottom: 1px solid var(--tc-line);
}

.tc-dialog-header h2 {
  margin: 0;
  font-size: 20px;
}

.tc-dialog-body {
  min-height: 0;
  padding: 18px;
  overflow: auto;
}

.tc-dialog-footer {
  border-top: 1px solid var(--tc-line);
}

.tc-drawer {
  position: fixed;
  z-index: 1001;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(620px, 100vw);
  overflow: auto;
  border-radius: 0;
}


.tc-shell {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: var(--tc-rail-compact) minmax(0, 1fr);
  gap: 12px;
  height: 100dvh;
  min-height: 0;
  padding: 16px;
  overflow: hidden;
  color: var(--tc-ink);
  background:
    radial-gradient(
      circle at 78% -8%,
      color-mix(in srgb, var(--tc-cyan) 12%, transparent),
      transparent 28%
    ),
    radial-gradient(
      circle at 8% 94%,
      color-mix(in srgb, var(--tc-copper) 14%, transparent),
      transparent 33%
    ),
    linear-gradient(145deg, var(--tc-canvas), var(--tc-canvas-deep));
  transition: grid-template-columns 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.tc-shell[data-rail="expanded"] {
  grid-template-columns: var(--tc-rail-expanded) minmax(0, 1fr);
}

.tc-shell::before {
  position: absolute;
  z-index: -2;
  inset: 6px;
  opacity: 0.42;
  pointer-events: none;
  background:
    url("./assets/orquestra-mechanical-frame.png") center / 100% 100% no-repeat,
    linear-gradient(
      90deg,
      var(--tc-frame),
      transparent 13%,
      transparent 87%,
      var(--tc-frame)
    );
  filter: sepia(0.55) saturate(0.8);
  mix-blend-mode: multiply;
  content: "";
}

.tc-shell::after {
  position: absolute;
  z-index: -3;
  inset: 0;
  opacity: 0.1;
  pointer-events: none;
  background: url("./assets/orquestra-cyber-city.png") center / cover;
  mix-blend-mode: soft-light;
  content: "";
}

html[data-theme="dark"] .tc-shell::before {
  opacity: 0.3;
  filter: none;
  mix-blend-mode: screen;
}

html[data-theme="dark"] .tc-shell::after {
  opacity: 0.16;
}

.tc-rail,
.tc-stage {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--tc-frame);
  border-radius: var(--tc-radius-lg);
}

.tc-rail {
  z-index: 3;
  color: var(--tc-rail-ink);
  background: linear-gradient(
    165deg,
    color-mix(in srgb, var(--tc-rail) 94%, var(--tc-copper)),
    var(--tc-rail-deep)
  );
  box-shadow: inset 0 1px rgb(255 255 255 / 8%), 0 16px 40px rgb(25 17 11 / 25%);
}

.tc-rail .tc-button:not(.tc-button-primary):not(.tc-button-danger) {
  border-color: color-mix(
    in srgb,
    var(--tc-rail-muted) 56%,
    transparent
  );
  color: var(--tc-rail-ink);
  background: var(--tc-rail-deep);
}

.tc-rail .tc-button:not(.tc-button-primary):not(.tc-button-danger):is(
    :hover,
    :focus-visible
  ) {
  background: color-mix(in srgb, var(--tc-rail) 78%, var(--tc-copper));
}

.tc-stage {
  z-index: 1;
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--tc-surface) 94%, transparent),
    color-mix(in srgb, var(--tc-surface-muted) 92%, transparent)
  );
  box-shadow: var(--tc-shadow);
}

.tc-stage::after {
  position: absolute;
  z-index: 0;
  inset: 8px;
  border: 1px solid var(--tc-frame-soft);
  opacity: 0.7;
  pointer-events: none;
  clip-path: polygon(
    0 12px,
    12px 0,
    calc(100% - 12px) 0,
    100% 12px,
    100% 100%,
    0 100%
  );
  content: "";
}

.tc-stage > * {
  position: relative;
  z-index: 1;
}

.tc-frame {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: block;
  border: 18px solid transparent;
  border-image-source: url("./assets/orquestra-internal-frame.png");
  border-image-slice: 110;
  border-image-width: 18px;
  border-image-repeat: stretch;
  opacity: 0.63;
  pointer-events: none;
  filter: var(--tc-frame-filter)
    drop-shadow(0 3px 5px rgb(25 17 11 / 26%));
}

.tc-frame-hero {
  border-width: 22px;
  border-image-width: 22px;
  opacity: 0.76;
}

.tc-frame-rail {
  border-width: 16px;
  border-image-width: 16px;
  opacity: 0.66;
}

.tc-frame-compact {
  border-width: 12px;
  border-image-width: 12px;
  opacity: 0.5;
}

.tc-frame::before,
.tc-frame::after {
  position: absolute;
  z-index: 4;
  display: block;
  opacity: 0.35;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    transparent,
    var(--tc-orquestra-energy),
    #fff2ca,
    transparent
  );
  box-shadow: 0 0 10px
    color-mix(in srgb, var(--tc-orquestra-energy) 44%, transparent);
  content: "";
}

.tc-frame::before {
  top: 9%;
  left: 11%;
  width: 23%;
  height: 2px;
  animation: tc-frame-current-x 4.8s ease-out both;
}

.tc-frame::after {
  top: 17%;
  right: 9%;
  width: 2px;
  height: 18%;
  background: linear-gradient(
    180deg,
    transparent,
    var(--tc-orquestra-energy),
    #fff2ca,
    transparent
  );
  animation: tc-frame-current-y 4.8s ease-out both;
}

:is(.tc-card, .tc-stage, .tc-rail):is(:hover, :focus-within) > .tc-frame {
  opacity: 0.82;
}

@keyframes tc-frame-current-x {
  from {
    transform: translateX(-85%);
  }
  to {
    transform: translateX(340%);
  }
}

@keyframes tc-frame-current-y {
  from {
    transform: translateY(-70%);
  }
  to {
    transform: translateY(420%);
  }
}

@media (max-width: 900px) {
  .tc-shell {
    --tc-rail-compact: 58px;
    --tc-rail-expanded: 232px;
    padding: 10px;
    gap: 10px;
  }
}

@media (max-width: 768px) {
  .tc-shell,
  .tc-shell[data-rail] {
    display: block;
    height: auto;
    min-height: 100dvh;
    padding: 8px 8px 82px;
    overflow: visible;
    transition: none;
  }

  .tc-rail {
    position: fixed;
    z-index: 30;
    right: 10px;
    bottom: max(8px, env(safe-area-inset-bottom));
    left: 10px;
    width: auto;
    min-height: 58px;
    max-height: 70dvh;
  }

  .tc-stage {
    min-height: calc(100dvh - 96px);
    overflow: visible;
  }
}

@media (max-width: 640px) {
  .tc-shell::before,
  .tc-shell::after,
  .tc-frame {
    display: none;
  }
}


.tc-machine-dialog {
  --tc-machine-size: min(720px, calc(100vw - 20px), calc(100dvh - 20px));
  --tc-machine-safe: clamp(48px, 8.8vmin, 74px);
  position: relative;
  isolation: isolate;
  width: var(--tc-machine-size);
  height: var(--tc-machine-size);
  max-height: none;
  padding: var(--tc-machine-safe);
  overflow: hidden;
  border: 0;
  border-radius: 24px;
  background: var(--tc-surface-raised);
  background-clip: content-box;
  box-shadow: none;
  animation: tc-machine-arrive 680ms cubic-bezier(0.16, 0.82, 0.22, 1) both;
}

.tc-machine-dialog > :not(.tc-machine-chamber) {
  position: relative;
  z-index: 3;
  color: var(--tc-ink);
  background: var(--tc-surface-raised);
  animation: tc-machine-content 650ms 230ms cubic-bezier(0.16, 0.82, 0.22, 1)
    both;
}

.tc-machine-chamber {
  position: absolute;
  z-index: 2;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.tc-machine-aura {
  position: absolute;
  z-index: 0;
  inset: 4.5%;
  border-radius: 12%;
  opacity: 0.72;
  box-shadow:
    0 0 46px 11px
      color-mix(in srgb, var(--tc-orquestra-energy) 26%, transparent),
    inset 0 0 42px
      color-mix(in srgb, var(--tc-orquestra-energy) 18%, transparent);
  animation: tc-machine-aura 980ms 80ms ease-out both;
}

.tc-machine-aperture {
  position: absolute;
  z-index: 1;
  inset: var(--tc-machine-safe);
  overflow: hidden;
  clip-path: polygon(2% 0, 98% 0, 100% 2%, 100% 98%, 98% 100%, 2% 100%, 0 98%, 0 2%);
}

.tc-machine-door {
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  width: 50.5%;
  overflow: hidden;
  opacity: 0;
  background:
    linear-gradient(100deg, rgb(7 11 13 / 98%), rgb(28 35 37 / 90%) 52%, rgb(7 10 12 / 99%)),
    url("./assets/orquestra-cyber-city.png") center / cover;
  box-shadow:
    inset 0 0 0 1px rgb(130 157 160 / 24%),
    inset 0 0 50px rgb(0 0 0 / 88%);
}

.tc-machine-door::before {
  position: absolute;
  inset: 0;
  opacity: 0.44;
  background:
    repeating-linear-gradient(0deg, transparent 0 20px, rgb(87 121 124 / 20%) 21px, transparent 22px),
    repeating-linear-gradient(116deg, transparent 0 42px, rgb(255 255 255 / 5%) 43px 44px, transparent 45px 74px);
  content: "";
}

.tc-machine-door::after {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 13px;
  background: linear-gradient(90deg, #050809, #354247, #0a0e10);
  box-shadow: 0 0 18px
    color-mix(in srgb, var(--tc-orquestra-energy) 58%, transparent);
  content: "";
}

.tc-machine-door-left {
  left: 0;
  clip-path: polygon(0 0, 100% 0, 94% 42%, 100% 50%, 94% 58%, 100% 100%, 0 100%);
  animation: tc-machine-door-left 900ms 100ms cubic-bezier(0.16, 0.9, 0.2, 1)
    both;
}

.tc-machine-door-left::after {
  right: 0;
}

.tc-machine-door-right {
  right: 0;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 6% 58%, 0 50%, 6% 42%);
  animation: tc-machine-door-right 900ms 100ms cubic-bezier(0.16, 0.9, 0.2, 1)
    both;
}

.tc-machine-door-right::after {
  left: 0;
}

.tc-machine-core {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  width: 82px;
  height: 82px;
  border: 2px solid var(--tc-orquestra-energy);
  border-radius: 50%;
  opacity: 0;
  background: radial-gradient(
    circle,
    #fff8d7 0 5%,
    var(--tc-orquestra-energy) 7% 13%,
    rgb(6 14 17 / 88%) 14% 43%,
    color-mix(in srgb, var(--tc-orquestra-energy) 66%, transparent) 44% 46%,
    transparent 47%
  );
  box-shadow:
    0 0 22px var(--tc-orquestra-energy),
    inset 0 0 20px var(--tc-orquestra-energy);
  animation: tc-machine-core 920ms 100ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.tc-machine-core::before,
.tc-machine-core::after {
  position: absolute;
  inset: -15px;
  border: 1px solid
    color-mix(in srgb, var(--tc-orquestra-energy) 70%, transparent);
  border-radius: 50%;
  content: "";
}

.tc-machine-core::after {
  inset: -32px;
  opacity: 0.46;
}

.tc-machine-scan {
  position: absolute;
  z-index: 2;
  right: 4%;
  left: 4%;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--tc-orquestra-energy),
    #fff8d7,
    var(--tc-orquestra-energy),
    transparent
  );
  box-shadow: 0 0 18px 3px
    color-mix(in srgb, var(--tc-orquestra-energy) 55%, transparent);
  animation: tc-machine-scan 1.2s 510ms ease-in-out both;
}

.tc-machine-frame-art {
  position: absolute;
  z-index: 3;
  inset: 0;
  background: url("./assets/orquestra-internal-frame.png") center / contain
    no-repeat;
  filter: var(--tc-frame-filter) drop-shadow(0 13px 22px rgb(18 12 7 / 48%));
  transform-origin: center;
  animation:
    tc-machine-frame-lock 780ms cubic-bezier(0.16, 0.82, 0.22, 1) both,
    tc-machine-frame-breathe 5.6s 1.2s ease-in-out infinite;
}

.tc-machine-current {
  position: absolute;
  z-index: 5;
  opacity: 0;
  background: linear-gradient(
    90deg,
    transparent,
    var(--tc-orquestra-energy),
    #fff9dc,
    transparent
  );
  box-shadow: 0 0 11px
    color-mix(in srgb, var(--tc-orquestra-energy) 72%, transparent);
}

.tc-machine-current-top {
  top: 4.25%;
  left: 16%;
  width: 18%;
  height: 2px;
  animation: tc-machine-current-x 4.8s 1.25s ease-in-out infinite;
}

.tc-machine-current-bottom {
  right: 18%;
  bottom: 4.35%;
  width: 16%;
  height: 2px;
  animation: tc-machine-current-x 5.1s 1.8s ease-in-out infinite reverse;
}

.tc-machine-current-right,
.tc-machine-current-left {
  width: 2px;
  height: 16%;
  background: linear-gradient(
    180deg,
    transparent,
    var(--tc-orquestra-energy),
    #fff9dc,
    transparent
  );
  animation: tc-machine-current-y 5.2s 2.15s ease-in-out infinite;
}

.tc-machine-current-right {
  top: 18%;
  right: 4.05%;
}

.tc-machine-current-left {
  bottom: 17%;
  left: 4.05%;
  animation-direction: reverse;
}

@keyframes tc-machine-arrive {
  from {
    opacity: 0;
    transform: scale(0.88);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes tc-machine-content {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes tc-machine-aura {
  from {
    opacity: 0;
    transform: scale(0.7);
  }
  to {
    opacity: 0.5;
    transform: scale(1);
  }
}

@keyframes tc-machine-door-left {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(-110%);
  }
}

@keyframes tc-machine-door-right {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(110%);
  }
}

@keyframes tc-machine-core {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.2) rotate(-45deg);
  }
  28% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  to {
    opacity: 0;
    transform: translate(-50%, -50%) scale(2.4) rotate(70deg);
  }
}

@keyframes tc-machine-scan {
  from {
    top: 8%;
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  to {
    top: 92%;
    opacity: 0;
  }
}

@keyframes tc-machine-frame-lock {
  from {
    opacity: 0;
    clip-path: inset(48% 48% round 24px);
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    clip-path: inset(0 round 24px);
    transform: scale(1);
  }
}

@keyframes tc-machine-frame-breathe {
  50% {
    opacity: 1;
    transform: scale(1.004);
  }
}

@keyframes tc-machine-current-x {
  0%,
  14%,
  100% {
    opacity: 0;
    transform: translateX(-85%);
  }
  24% {
    opacity: 0.9;
  }
  70% {
    opacity: 0;
    transform: translateX(360%);
  }
}

@keyframes tc-machine-current-y {
  0%,
  20%,
  100% {
    opacity: 0;
    transform: translateY(-80%);
  }
  31% {
    opacity: 0.9;
  }
  78% {
    opacity: 0;
    transform: translateY(410%);
  }
}

@media (max-width: 640px), (max-height: 560px) {
  .tc-overlay {
    align-items: stretch;
    padding: 0;
  }

  .tc-machine-dialog {
    width: 100%;
    height: 100dvh;
    max-height: none;
    padding: 0;
    border-radius: 0;
    background-clip: border-box;
    animation: none;
  }

  .tc-machine-chamber {
    display: none;
  }
}


@media (prefers-reduced-motion: reduce) {
  .tc-scope *,
  .tc-scope *::before,
  .tc-scope *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .tc-shell {
    transition: none;
  }

  .tc-machine-door,
  .tc-machine-core,
  .tc-machine-scan,
  .tc-machine-current {
    display: none;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .tc-shell,
  .tc-stage,
  .tc-panel,
  .tc-card,
  .tc-dialog,
  .tc-drawer {
    background: var(--tc-surface) !important;
    background-image: none !important;
    backdrop-filter: none !important;
  }

  .tc-rail {
    background: var(--tc-rail) !important;
  }

  .tc-shell::before,
  .tc-shell::after,
  .tc-stage::after,
  .tc-frame,
  .tc-machine-aura,
  .tc-machine-scan {
    display: none !important;
  }
}

@media (forced-colors: active) {
  .tc-shell::before,
  .tc-shell::after,
  .tc-stage::after,
  .tc-frame,
  .tc-machine-chamber {
    display: none !important;
  }

  .tc-rail,
  .tc-stage,
  .tc-panel,
  .tc-card,
  .tc-dialog,
  .tc-drawer,
  .tc-table-wrap {
    border: 1px solid CanvasText !important;
    color: CanvasText !important;
    background: Canvas !important;
    box-shadow: none !important;
  }

  .tc-button-primary {
    color: HighlightText !important;
    background: Highlight !important;
  }

  .tc-scope :is(button, [href], input, select, textarea):focus-visible {
    outline: 2px solid Highlight !important;
  }
}

@media print {
  .tc-rail,
  .tc-frame,
  .tc-machine-chamber {
    display: none !important;
  }

  .tc-shell,
  .tc-stage,
  .tc-panel,
  .tc-card {
    display: block;
    height: auto;
    overflow: visible;
    color: #000;
    background: #fff;
    box-shadow: none;
  }
}