:root {
  color-scheme: dark;
  --bg: #000;
  --text: #e8ebf2;
  --text-dim: #8f97ab;
  --good: #4ade80;
  --warn: #fbbf24;
  --bad: #f87171;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

html, body {
  height: var(--app-height, 100vh);
  margin: 0;
  background: var(--bg);
}

body {
  color: var(--text);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-tap-highlight-color: transparent;
}

.app {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  height: var(--app-height, 100vh);
  overflow: hidden;
  overscroll-behavior: none;
  background: var(--bg);
}

body:not(.app) {
  height: auto;
  min-height: 100%;
  overflow-y: auto;
}

@supports (height: 100dvh) {
  body:not(.app) { min-height: 100dvh; }
}

.stage {
  position: absolute;
  top: env(safe-area-inset-top, 0px);
  right: env(safe-area-inset-right, 0px);
  bottom: 0;
  left: env(safe-area-inset-left, 0px);
  background: var(--bg);
}

#video,
#surface {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--bg);
  display: block;
}

[hidden] { display: none !important; }


#video[hidden],
#surface[hidden] { display: none; }

.input-layer {
  position: absolute;
  inset: 0;
  touch-action: none;
  cursor: crosshair;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 18px;
  background: var(--bg);
  z-index: 2;
}

.overlay[hidden] { display: none; }

.boot {
  max-width: min(90vw, 900px);
  max-height: 70vh;
  object-fit: contain;
  border-radius: 6px;

  opacity: 0;
  transition: opacity 400ms ease;
}

.boot[hidden] { display: none; }
.boot.visible { opacity: 1; }

.overlay-note {
  margin: 0;
  color: var(--text-dim);
  font: 13px/1.5 var(--mono);
  letter-spacing: 0.04em;
}

.connect {
  appearance: none;
  border: 1px solid #2a3040;
  border-radius: 999px;
  background: #11141b;
  color: var(--text);
  font: 500 15px/1 system-ui, sans-serif;
  padding: 13px 30px;
  cursor: pointer;
}

.connect:hover { border-color: #3d4557; background: #171b24; }
.connect[hidden] { display: none; }

.hud {
  position: absolute;
  top: 12px;
  left: 12px;
  margin-bottom: env(safe-area-inset-bottom, 0px);
  z-index: 3;
  min-width: 260px;
  padding: 12px 14px;
  border: 1px solid #1e2430;
  border-radius: 10px;
  background: rgba(6, 8, 12, 0.86);
  backdrop-filter: blur(6px);
  font: 12px/1.7 var(--mono);
}

.hud[hidden] { display: none; }

.hud-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

.hud-row span { color: var(--text-dim); }
.hud-row b { font-weight: 500; }

.hud-log,
.hud-keys {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid #1e2430;
  color: var(--text-dim);
  overflow-wrap: anywhere;
}

.hud-keys { color: #5d6577; }

[data-state="live"] { color: var(--good); }
[data-state="connecting"] { color: var(--warn); }
[data-state="failed"] { color: var(--bad); }

.audio-gate {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-content: center;

  background: rgba(0, 0, 0, 0.62);
  border: 0;
  padding: 0;
  color: #fff;
  font: inherit;
  font-size: clamp(16px, 2.4vw, 26px);
  letter-spacing: 0.01em;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.audio-gate[hidden] { display: none; }

.audio-gate span {
  padding: 14px 22px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.35);
}

.audio-gate:hover span,
.audio-gate:focus-visible span { background: rgba(0, 0, 0, 0.55); }

.auth { min-height: 100dvh; display: grid; place-items: center; padding: 24px; }
.auth-card { width: min(360px, 100%); display: flex; flex-direction: column; gap: 10px;
  background: #14161a; border: 1px solid #23262c; border-radius: 14px; padding: 28px; }
.auth-card h1 { margin: 0 0 4px; font-size: 20px; font-weight: 600; }
.auth-note { margin: 0 0 12px; color: #8b919b; font-size: 13px; }
.auth-card label { font-size: 12px; color: #8b919b; }
.auth-card input { background: #0d0f12; border: 1px solid #2a2e35; border-radius: 8px;
  color: #e7e9ee; padding: 11px 12px; font-size: 15px; }
.auth-card input:focus { outline: 2px solid #3d6be5; outline-offset: -1px; }
.auth-card button { margin-top: 10px; background: #3d6be5; border: 0; border-radius: 8px;
  color: #fff; padding: 12px; font-size: 15px; font-weight: 600; cursor: pointer; }
.auth-card button:disabled { opacity: .6; cursor: default; }
.auth-error { margin: 8px 0 0; color: #ff8a8a; font-size: 13px; }

.gate { position: fixed; inset: 0; display: grid; place-items: center;
  background: #0a0b0d; z-index: 40; }
.gate-card h1 { margin-bottom: 22px; }
.gate-card { text-align: center; padding: 32px; }
.gate-card h1 { margin: 0 0 6px; font-size: 22px; font-weight: 600; }
.gate-note { margin: 0 0 22px; color: #8b919b; font-size: 14px; }
.gate-go { background: #3d6be5; border: 0; border-radius: 10px; color: #fff;
  padding: 14px 40px; font-size: 16px; font-weight: 600; cursor: pointer; }

.corner {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 10px);
  right: calc(env(safe-area-inset-right, 0px) + 10px);
  z-index: 50; display: flex; gap: 8px;
}
.corner-btn { width: 38px; height: 38px; border-radius: 10px; cursor: pointer;
  background: rgba(20, 22, 26, .82); border: 1px solid #2a2e35; color: #e7e9ee;
  font-size: 17px; line-height: 1; }

.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(330px, 88vw);
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: #101216; border-left: 1px solid #23262c; z-index: 60;
  overflow-y: auto; padding: 16px 18px 28px;
  transform: translateX(100%); opacity: 0;
  transition: transform 220ms cubic-bezier(.22, .78, .3, 1), opacity 160ms ease-out; }
.drawer.open { transform: translateX(0); opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .drawer { transition: none; }
}
.drawer-head { display: flex; align-items: center; justify-content: space-between; }
.drawer-head h2 { margin: 0; font-size: 16px; font-weight: 600; }
.drawer-close { background: none; border: 0; color: #8b919b; font-size: 16px; cursor: pointer; }
.drawer-section { margin-top: 22px; border-top: 1px solid #1c1f24; padding-top: 16px; }
.drawer-section h3 { margin: 0 0 12px; font-size: 12px; text-transform: uppercase;
  letter-spacing: .06em; color: #8b919b; font-weight: 600; }
.drawer-row { display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin: 10px 0; font-size: 14px; }
.drawer-row output, .drawer-row b { color: #8b919b; font-weight: 500; }
.drawer input[type=range] { width: 100%; }
.drawer-btn, .drawer-link { display: block; width: 100%; margin-top: 8px; padding: 10px;
  background: #191c21; border: 1px solid #2a2e35; border-radius: 8px; color: #e7e9ee;
  font-size: 14px; text-align: center; text-decoration: none; cursor: pointer; }
.drawer form { display: flex; flex-direction: column; gap: 8px; }
.drawer form input { background: #0d0f12; border: 1px solid #2a2e35; border-radius: 8px;
  color: #e7e9ee; padding: 10px; font-size: 14px; }
.drawer-msg { color: #8b919b; font-size: 13px; margin: 10px 0 0; }

.console {
  --ink: #0d1116;
  --line: #1d242c;
  --muted: #79838f;
  --text: #e3e8ee;
  --live: #5fd08a;
  --wake: #e5ac4a;
  --free: #333d47;
  --stop: #e8736a;
  --edge: #4fb0ec;
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  min-height: 100dvh;
  background: var(--ink);
  color: var(--text);
  font-size: 13.5px;
}

.rail {
  padding: 24px 0 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  position: sticky;
  top: 0;
  align-self: start;
  max-height: 100dvh;
}

.rail-machine b { display: block; font-size: 14px; font-weight: 600; }
.rail-machine span {
  display: block;
  margin-top: 2px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
}

.rail nav { display: flex; flex-direction: column; gap: 2px; padding-right: 22px; }

.rail nav a {
  color: var(--muted);
  font-size: 13.5px;
  text-decoration: none;
  padding: 7px 0;
}

.rail nav a:hover { color: var(--text); }
.rail nav a[aria-current="page"] { color: var(--text); }

.rail-foot { margin-top: auto; padding-right: 22px; display: grid; gap: 10px; justify-items: start; }
.rail-foot a, .rail-foot button {
  color: var(--muted);
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: 12.5px;
  text-decoration: none;
  cursor: pointer;
}
.rail-foot a:hover, .rail-foot button:hover { color: var(--text); }

.sheet { padding: 26px 40px 80px; max-width: 900px; }

.sheet h2 { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -0.02em; }
.sheet > section > p { margin: 6px 0 0; color: var(--muted); font-size: 12.5px; }

.slots {
  margin-top: 28px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
  gap: 1px;
  background: var(--line);
  border-block: 1px solid var(--line);
}

.slot-link { display: block; text-decoration: none; color: inherit; background: var(--ink); }
.slot-link:hover .slot b { color: var(--edge); }
.slot { background: var(--ink); padding: 14px 2px 16px; display: grid; gap: 4px; align-content: start; }
.slot b { font-size: 13.5px; font-weight: 600; display: flex; align-items: center; gap: 7px; }
.slot b::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--free);
  flex: none;
}
.slot.live b::before { background: var(--live); }
.slot.wake b::before { background: var(--wake); }
.slot.fail b::before { background: var(--stop); }
.slot.empty b { color: var(--free); font-weight: 450; }
.slot span { font-family: var(--mono); font-size: 11px; color: var(--muted); }

.reveal { animation: slot-in 240ms cubic-bezier(.2, .7, .3, 1) backwards; }
@keyframes slot-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .reveal { animation: none; } }

.meters {
  margin: 34px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 30px 44px;
}

.dial { margin: 0; display: grid; justify-items: center; }
.dial-ring { display: grid; place-items: center; }
.dial-ring svg { grid-area: 1 / 1; width: 84px; height: 84px; transform: rotate(-90deg); }
.dial-ring circle { fill: none; stroke-width: 5; }
.dial-ring .track { stroke: #1a222a; }
.dial-ring .fill {
  stroke: var(--edge);
  stroke-linecap: round;
  transition: stroke-dashoffset 420ms cubic-bezier(.3, .7, .3, 1), stroke 300ms linear;
}
.dial-ring .fill.warm { stroke: var(--wake); }
.dial-ring .fill.hot { stroke: var(--stop); }
.dial-value { grid-area: 1 / 1; font-family: var(--mono); font-size: 14px; }
.dial figcaption { margin-top: 9px; font-size: 12px; color: var(--muted); text-align: center; }
.dial figcaption span { display: none; }

@media (prefers-reduced-motion: reduce) { .dial-ring .fill { transition: none; } }

.facts { margin: 34px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 34px; }
.facts div {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 0;
  border-bottom: 1px solid #161d24;
}
.facts dt { color: var(--muted); font-size: 12.5px; }
.facts dd { margin: 0; font-family: var(--mono); font-size: 12px; }

.grid { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 26px; }
.grid th {
  text-align: left;
  font-weight: 450;
  font-size: 12px;
  color: var(--muted);
  padding: 0 18px 10px 0;
  border-bottom: 1px solid var(--line);
}
.grid td { padding: 12px 18px 12px 0; border-bottom: 1px solid #161d24; }
.grid tr:last-child td { border-bottom: 0; }
.grid .num, .grid .mono { font-family: var(--mono); font-size: 12px; }
.grid .dim { color: var(--muted); }
.grid td:last-child, .grid th:last-child { text-align: right; padding-right: 0; }
.grid a { color: var(--edge); text-decoration: none; }
.grid a:hover { text-decoration: underline; }

.tag { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); }
.tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--free); }
.tag.live { color: var(--text); }
.tag.live::before { background: var(--live); }
.tag.wake::before { background: var(--wake); }
.tag.fail::before { background: var(--stop); }

.act {
  background: none;
  border: 1px solid #2a333d;
  border-radius: 5px;
  color: #cdd5de;
  padding: 6px 12px;
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
}
.act:hover { border-color: #3e4954; color: var(--text); }
.act.danger:hover { border-color: #5a3230; color: #f0a49d; }
.act:disabled { opacity: .45; cursor: default; }

.section { margin-top: 40px; }
.section h3 { margin: 0 0 4px; font-size: 13px; font-weight: 600; color: var(--muted); }

.newform { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.newform input, .device-line input {
  background: none;
  border: 1px solid #2a333d;
  border-radius: 5px;
  color: var(--text);
  padding: 7px 11px;
  font: inherit;
  font-size: 12.5px;
}
.newform label { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--muted); }
.newform button {
  background: none;
  border: 1px solid var(--edge);
  border-radius: 5px;
  color: var(--edge);
  padding: 7px 16px;
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
}

.secret {
  margin: 18px 0 0;
  padding: 11px 0 0;
  border-top: 1px solid var(--line);
  color: #b7e6c4;
  font-family: var(--mono);
  font-size: 12px;
  word-break: break-all;
}

.log {
  margin: 14px 0 0;
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.9;
  color: #96a1ad;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 300px;
  overflow-y: auto;
}

.empty { color: var(--muted); font-size: 12.5px; margin: 26px 0 0; }

.device-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.device-head h2 { margin: 0; }
.device-head span { font-family: var(--mono); font-size: 11.5px; color: var(--muted); }
.device-back { display: inline-block; margin-bottom: 18px; color: var(--muted); text-decoration: none; font-size: 12.5px; }
.device-back:hover { color: var(--text); }

.device-body { margin-top: 30px; display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 40px; align-items: start; }
.device-group { margin-bottom: 30px; }
.device-group h3 { margin: 0 0 12px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.device-buttons { display: flex; flex-wrap: wrap; gap: 6px; }
.device-line { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.device-line input { flex: 1; min-width: 200px; font-family: var(--mono); }

.device-screen {
  display: block;
  width: 100%;
  max-width: 300px;
  border: 1px solid var(--line);
  background: #000;
  touch-action: none;
  cursor: crosshair;
  -webkit-user-select: none;
  user-select: none;
}

.device-screen-note { margin: 8px 0 0; font-family: var(--mono); font-size: 11px; color: var(--muted); }

.device-out {
  margin: 16px 0 0;
  padding: 12px 0 0;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.8;
  color: #a4afba;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 260px;
  overflow-y: auto;
}

@media (max-width: 860px) {
  .device-body { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px) {
  .console { grid-template-columns: minmax(0, 1fr); font-size: 14px; }

  .rail {
    position: sticky;
    top: 0;
    z-index: 5;
    max-height: none;
    background: var(--ink);
    border-bottom: 1px solid var(--line);
    padding: 14px 0 0;
    gap: 12px;
  }

  .rail-machine { display: flex; align-items: baseline; gap: 10px; padding: 0 16px; }
  .rail-machine span { margin: 0; }

  .rail nav {
    flex-direction: row;
    gap: 20px;
    padding: 0 16px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .rail nav::-webkit-scrollbar { display: none; }
  .rail nav a { padding: 4px 0 10px; white-space: nowrap; }
  .rail nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--edge); }

  .rail-foot {
    position: absolute;
    top: 12px;
    right: 16px;
    margin: 0;
    padding: 0;
    grid-auto-flow: column;
    gap: 16px;
  }

  .sheet { padding: 20px 16px 64px; }
  .sheet h2 { font-size: 19px; }

  .slots { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 22px; }
  .slot { padding: 12px 12px 14px; }
  .slot-link { padding: 0; }

  .meters { gap: 22px; justify-content: space-between; }
  .dial-ring svg { width: 74px; height: 74px; }

  .facts { grid-template-columns: minmax(0, 1fr); }

  .grid { margin-top: 20px; }
  .grid thead { display: none; }
  .grid tbody, .grid tr, .grid td { display: block; width: 100%; }
  .grid tr {
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
  }
  .grid td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 3px 0;
    border: 0;
    text-align: left;
  }
  .grid td[data-label]::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: 12px;
  }
  .grid td:last-child { padding-top: 12px; justify-content: flex-start; gap: 8px; }
  .grid td:empty { display: none; }

  .act, .newform button { padding: 9px 14px; }
  .newform input, .device-line input, .newform button { font-size: 16px; }
  .newform { gap: 10px; }
  .newform input { flex: 1; min-width: 140px; }

  .device-buttons { gap: 8px; }
  .device-body { gap: 26px; }
  .device-screen { max-width: 100%; }
}
}