@font-face { font-family: "Stencil"; src: url(/fonts/bigshoulders-stencil.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "LCD"; src: url(/fonts/sharetech.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Plex"; src: url(/fonts/plexmono-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Plex"; src: url(/fonts/plexmono-600.woff2) format("woff2"); font-weight: 600; font-display: swap; }

:root {
  --bg: #050705;
  --panel-hi: #1d231b;
  --panel-lo: #111510;
  --slot: #080a08;
  --line: #2b3427;
  --line-hi: #44523e;
  --ink: #d9dfcb;
  --ink-dim: #8c977f;
  --ink-faint: #56604d;
  --phos: #9dff7f;
  --phos-mid: #57c24a;
  --phos-dim: #1f4a1d;
  --amber: #ffb627;
  --amber-dim: #6b4a0d;
  --red: #ff3b2f;
  --red-dim: #5a1410;
  --glow: 0 0 6px rgba(157, 255, 127, .55), 0 0 18px rgba(87, 194, 74, .25);
  --gap: clamp(5px, .55vw, 9px);
  --ease: cubic-bezier(.2, .7, .2, 1);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background:
    radial-gradient(ellipse 80% 60% at 30% 40%, rgba(60, 110, 50, .10), transparent 70%),
    radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, .75)),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .012) 0 1px, transparent 1px 3px),
    var(--bg);
  color: var(--ink);
  font-family: "Plex", ui-monospace, monospace;
  font-size: 14px;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  user-select: none;
}
body::after { /* CRT scanlines + faint flicker over everything */
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(180deg, rgba(0, 0, 0, .16) 0 1px, transparent 1px 3px);
  mix-blend-mode: multiply;
  z-index: 50;
  animation: flicker 7s steps(1) infinite;
}
@keyframes flicker { 0%, 96%, 100% { opacity: .9 } 97% { opacity: .65 } 98% { opacity: 1 } }

button { font: inherit; color: inherit; }
.dim { color: var(--ink-faint); }
.lbl { font: 600 10px/1 "Plex", monospace; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-faint); }

/* ---------- classification + masthead ---------- */
.classification {
  flex: none;
  background: repeating-linear-gradient(-45deg, #0d2a0d 0 12px, #0a200a 12px 24px);
  border-bottom: 1px solid #1f5a1f;
  text-align: center;
  font: 600 10.5px/1 "Plex", monospace;
  letter-spacing: .32em;
  color: #6cff5a;
  padding: 4px 0;
  text-shadow: 0 0 6px rgba(108, 255, 90, .6);
}

.masthead {
  flex: none;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 18px;
  padding: 8px clamp(10px, 1.2vw, 18px) 6px;
}
.brand { display: flex; align-items: center; gap: 12px; }
.insignia { width: 50px; height: 50px; color: var(--phos); filter: drop-shadow(0 0 6px rgba(157, 255, 127, .5)); }
.brand h1 {
  margin: 0;
  font: 800 34px/0.9 "Stencil", sans-serif;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--phos);
  text-shadow: var(--glow);
}
.brand p .dim { display: block; margin-top: 5px; color: var(--ink-faint); }
.brand p { margin: 4px 0 0; font: 600 10.5px/1 "Plex", monospace; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-dim); }

.readouts { display: flex; justify-content: center; gap: 10px; flex-wrap: nowrap; min-width: 0; }
.readout, .op {
  display: flex; flex-direction: column; gap: 4px;
  padding: 6px 10px 5px;
  background: linear-gradient(#020502, #061006);
  border: 1px solid #1c2c1a;
  border-radius: 3px;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, .9), 0 1px 0 rgba(255, 255, 255, .04);
  min-width: 96px;
}
.lcd-text, .op input {
  font: 20px/1 "LCD", monospace;
  color: var(--phos);
  text-shadow: var(--glow);
  letter-spacing: .06em;
}
.op input {
  background: none; border: 0; padding: 0; width: 15ch; text-transform: uppercase; outline: none;
  caret-color: var(--amber);
}
.op input:focus-visible { box-shadow: 0 1px 0 var(--amber); }
.vu-bars { display: flex; flex-direction: column; gap: 4px; padding-top: 2px; }
.vu-bars i {
  display: block; height: 7px; width: 120px;
  background: repeating-linear-gradient(90deg, var(--phos-dim) 0 5px, transparent 5px 7px);
  position: relative; overflow: hidden;
}
.vu-bars i::after {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, transparent 0 5px, #050705 5px 7px),
              linear-gradient(90deg, var(--phos) 0 62%, var(--amber) 62% 84%, var(--red) 84%);
  clip-path: inset(0 calc(100% - var(--v, 0%)) 0 0);
  filter: drop-shadow(0 0 3px rgba(157, 255, 127, .6));
}

.head-controls { display: flex; align-items: center; gap: 8px; }
.mini-knob-wrap { display: flex; flex-direction: column; align-items: center; gap: 3px; margin-right: 4px; }

.hw-btn {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid #3a4535;
  border-radius: 4px;
  background: linear-gradient(#2a3226, #181d16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 2px 0 #050605, 0 3px 6px rgba(0, 0, 0, .6);
  font: 600 10.5px/1 "Plex", monospace; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink);
  cursor: pointer;
  transition: transform .08s, box-shadow .08s, filter .15s;
}
.hw-btn:hover { filter: brightness(1.18); }
.hw-btn:active { transform: translateY(2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 0 0 #050605; }
.hw-btn-led { width: 7px; height: 7px; border-radius: 50%; background: #233b20; box-shadow: inset 0 0 2px #000; }
.hw-btn.on .hw-btn-led { background: var(--phos); box-shadow: 0 0 6px var(--phos); }
.hw-btn.busy .hw-btn-led { background: var(--amber); box-shadow: 0 0 6px var(--amber); animation: blink 1s steps(1) infinite; }
.hw-btn.big { min-height: 52px; padding: 0 26px; font-size: 13px; }

/* ---------- status strip ---------- */
.status-strip {
  flex: none;
  display: flex; align-items: center; gap: 10px;
  margin: 0 clamp(10px, 1.2vw, 18px);
  padding: 6px 12px;
  background: linear-gradient(#020502, #071107);
  border: 1px solid #1c2c1a;
  border-radius: 3px;
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, .9);
  font: 17px/1 "LCD", monospace; letter-spacing: .06em;
  color: var(--phos); text-shadow: var(--glow);
  white-space: nowrap; overflow: hidden;
}
.ss-led { width: 9px; height: 9px; border-radius: 50%; background: var(--amber-dim); flex: none; }
.live .ss-led { background: var(--red); box-shadow: 0 0 8px var(--red); animation: blink 1.2s steps(1) infinite; }
.ss-sep { color: var(--phos-dim); text-shadow: none; }
.ss-tier { color: var(--amber); text-shadow: 0 0 6px rgba(255, 182, 39, .5); }
.ss-track { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ss-time { margin-left: auto; color: var(--phos-mid); }
@keyframes blink { 50% { opacity: .25 } }

/* ---------- the board: an inventory grid ---------- */
.board {
  flex: 1 1 auto;
  min-height: 0;
  margin: var(--gap) clamp(10px, 1.2vw, 18px) 0;
  padding: var(--gap);
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: repeat(4, minmax(0, 1fr)) 14px minmax(0, .72fr) 14px minmax(0, .62fr);
  grid-template-areas:
    "inv inv inv inv vio vio vio pur pur pur ptt ptt"
    "inv inv inv inv vio vio vio pur pur pur ptt ptt"
    "inv inv inv inv unn unn unn hom hom hom sql phn"
    "inv inv inv inv unn unn unn hom hom hom rbd rbd"
    "stl stl stl stl stl stl stl stl stl stl stl stl"
    "s1  s1  s2  s2  s3  s3  s4  s4  s5  s6  s7  s7 "
    "evl evl evl evl evl evl evl evl evl evl evl evl"
    "e1  e2  e3  e4  e5  e6  e7  e8  elv fad cut cut";
  background:
    linear-gradient(var(--line) 1px, transparent 1px) 0 0 / 100% calc((100% - 0px) / 24),
    #070907;
  background:
    repeating-linear-gradient(90deg, rgba(68, 82, 62, .18) 0 1px, transparent 1px calc(100% / 12)),
    repeating-linear-gradient(0deg, rgba(68, 82, 62, .12) 0 1px, transparent 1px 28px),
    #060806;
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: inset 0 0 40px rgba(0, 0, 0, .9), 0 0 0 1px #000;
}

.rail-label {
  align-self: end;
  font: 600 10px/1 "Plex", monospace; letter-spacing: .3em; text-transform: uppercase;
  color: var(--ink-faint);
  display: flex; align-items: center; gap: 10px;
}
.rail-label::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--line-hi), transparent); }

.slot {
  position: relative;
  min-width: 0; min-height: 0;
  border-radius: 5px;
  border: 1px solid var(--line);
  background:
    linear-gradient(160deg, rgba(255, 255, 255, .035), transparent 40%),
    linear-gradient(var(--panel-hi), var(--panel-lo));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), inset 0 -2px 0 rgba(0, 0, 0, .5), 0 2px 8px rgba(0, 0, 0, .7);
}
/* corner screws on the big items */
.scene::before, .ptt::before {
  content: "";
  position: absolute; inset: 6px;
  pointer-events: none;
  background:
    radial-gradient(circle at 4px 4px, #4a5544 0 2px, #0b0d0a 2.6px, transparent 3.2px) top left / 9px 9px no-repeat,
    radial-gradient(circle at 4px 4px, #4a5544 0 2px, #0b0d0a 2.6px, transparent 3.2px) top right / 9px 9px no-repeat,
    radial-gradient(circle at 4px 4px, #4a5544 0 2px, #0b0d0a 2.6px, transparent 3.2px) bottom left / 9px 9px no-repeat,
    radial-gradient(circle at 4px 4px, #4a5544 0 2px, #0b0d0a 2.6px, transparent 3.2px) bottom right / 9px 9px no-repeat;
}

/* ---------- scene channels ---------- */
.scene {
  container-type: size;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  padding: clamp(8px, 3.6cqh, 16px) clamp(10px, 4cqw, 18px) clamp(8px, 3cqh, 12px);
  cursor: pointer;
  transition: border-color .25s, box-shadow .25s;
  overflow: hidden;
}
.scene:hover { border-color: var(--line-hi); }
.scene:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.slot-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.plate { /* embossed label-maker tape */
  flex: none;
  font: 12px/1 "LCD", monospace; letter-spacing: .14em;
  color: #e9eee0;
  background: linear-gradient(#141614, #0a0b0a);
  padding: 4px 6px 3px;
  border-radius: 2px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .08), inset 0 0 0 1px #000;
  transform: rotate(-1deg);
}
.scene h2 {
  margin: 0;
  font: 800 clamp(20px, 9cqh, 46px)/0.95 "Stencil", sans-serif;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: color .25s, text-shadow .25s;
}
[data-channel="investigation"] h2 { font-size: clamp(24px, 7.4cqh, 56px); }
.live-led {
  margin-left: auto; flex: none;
  width: 10px; height: 10px; border-radius: 50%;
  background: #2b1310; box-shadow: inset 0 0 3px #000;
}
.sub {
  margin: 4px 0 0;
  font-size: clamp(11px, 3.6cqh, 13px);
  line-height: 1.3;
  color: var(--ink-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.scene-body {
  min-height: 0;
  display: flex; align-items: center; justify-content: center;
  gap: clamp(10px, 5cqw, 28px);
  padding: 4px 0;
}
.scope {
  display: none;
}
[data-channel="investigation"] { grid-template-rows: auto auto minmax(0, .9fr) minmax(0, 1.6fr) auto; }
[data-channel="investigation"] .scope {
  display: block;
  width: 100%; height: 100%;
  margin-top: 10px;
  border-radius: 4px;
  background:
    linear-gradient(rgba(87, 194, 74, .10) 1px, transparent 1px) 0 0 / 100% 25%,
    linear-gradient(90deg, rgba(87, 194, 74, .10) 1px, transparent 1px) 0 0 / 10% 100%,
    radial-gradient(ellipse at center, #062006, #010501 75%);
  border: 1px solid #1c2c1a;
  box-shadow: inset 0 0 22px rgba(0, 0, 0, .95);
}

/* tier legend: a rotary switch's legend plate */
.tiers {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: clamp(1px, 1cqh, 6px);
  min-width: 0;
}
.tiers li {
  display: flex; align-items: baseline; gap: 8px;
  font: 600 clamp(10px, 3.7cqh, 15px)/1.15 "Plex", monospace;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-faint);
  cursor: pointer;
  white-space: nowrap;
  padding: 2px 6px 2px 4px;
  border-radius: 2px;
  transition: color .2s, background .2s;
}
.tiers li b { font: 800 1.1em/1 "Stencil", sans-serif; width: 2.2ch; text-align: right; color: inherit; }
.tiers li:hover { color: var(--ink-dim); }
.tiers li.on { color: var(--amber); text-shadow: 0 0 8px rgba(255, 182, 39, .45); background: rgba(255, 182, 39, .07); }
.tiers li.on::before { content: "▸"; margin-left: -2px; }
[data-channel="investigation"] .tiers li { font-size: clamp(12px, 3cqh, 18px); }

/* LCD now-playing */
.lcd {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 9px;
  background: linear-gradient(#010401, #051005);
  border: 1px solid #1c2c1a;
  border-radius: 3px;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, .9);
  font: clamp(13px, 4.4cqh, 17px)/1 "LCD", monospace;
  letter-spacing: .05em;
  color: var(--phos-dim);
  white-space: nowrap; overflow: hidden;
}
.lcd-track { overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1; text-transform: uppercase; }
.lcd-time { flex: none; }
.lcd-play { flex: none; opacity: .35; }

.key-hint {
  position: absolute; right: 10px; bottom: calc(100% - 100cqh + 8px);
  display: none;
}

/* live channel */
.scene.live { border-color: var(--phos-mid); box-shadow: 0 0 0 1px rgba(157, 255, 127, .25), 0 0 26px rgba(87, 194, 74, .22), inset 0 0 30px rgba(87, 194, 74, .07); }
.scene.live h2 { color: var(--phos); text-shadow: var(--glow); }
.scene.live .live-led { background: var(--red); box-shadow: 0 0 10px var(--red); animation: blink 1.2s steps(1) infinite; }
.scene.live .lcd { color: var(--phos); text-shadow: var(--glow); }
.scene.live .lcd-play { opacity: 1; animation: blink 1.2s steps(1) infinite; }
.scene.live::after { /* HUD corner brackets */
  content: "";
  position: absolute; inset: 3px;
  pointer-events: none;
  --c: var(--phos);
  background:
    linear-gradient(var(--c), var(--c)) top left / 18px 2px no-repeat,
    linear-gradient(var(--c), var(--c)) top left / 2px 18px no-repeat,
    linear-gradient(var(--c), var(--c)) top right / 18px 2px no-repeat,
    linear-gradient(var(--c), var(--c)) top right / 2px 18px no-repeat,
    linear-gradient(var(--c), var(--c)) bottom left / 18px 2px no-repeat,
    linear-gradient(var(--c), var(--c)) bottom left / 2px 18px no-repeat,
    linear-gradient(var(--c), var(--c)) bottom right / 18px 2px no-repeat,
    linear-gradient(var(--c), var(--c)) bottom right / 2px 18px no-repeat;
  filter: drop-shadow(0 0 4px var(--c));
}
.scene.cueing .live-led { background: var(--amber); box-shadow: 0 0 8px var(--amber); animation: blink .4s steps(1) infinite; }

/* ---------- knobs ---------- */
.knob {
  position: relative;
  flex: none;
  width: clamp(84px, min(64cqh, 44cqw), 300px);
  aspect-ratio: 1;
  touch-action: none;
  cursor: grab;
  border-radius: 50%;
}
[data-channel="investigation"] .knob { width: clamp(120px, min(50cqh, 50cqw), 380px); }
.knob.has-num .knob-cap { inset: 28%; }
.knob:active { cursor: grabbing; }
.knob:focus-visible { outline: 2px solid var(--amber); outline-offset: 4px; }
.knob svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.knob .ring-track { fill: none; stroke: #0a0c09; stroke-width: 7; stroke-linecap: round; }
.knob .ring-val { fill: none; stroke: var(--amber); stroke-width: 4; stroke-linecap: round; filter: drop-shadow(0 0 4px rgba(255, 182, 39, .8)); transition: stroke .3s; }
.scene:not(.live) .knob .ring-val { stroke: #a87818; filter: none; }
.knob .tick { stroke: var(--ink-faint); stroke-width: 1.4; }
.knob .tick.major { stroke: var(--ink-dim); stroke-width: 2.4; }
.knob .numeral { font: 800 11px "Stencil", sans-serif; fill: var(--ink-faint); text-anchor: middle; dominant-baseline: central; letter-spacing: .04em; }
.knob .numeral.on { fill: var(--amber); }
.knob-cap {
  position: absolute; inset: 21%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, #2a3027 0 48%, transparent 49%),
    repeating-conic-gradient(#3b4437 0 4deg, #151913 4deg 8deg);
  box-shadow: 0 6px 14px rgba(0, 0, 0, .85), 0 0 0 2px #090b08, inset 0 2px 1px rgba(255, 255, 255, .12);
  transform: rotate(var(--rot, 0deg));
}
.knob-cap::before { /* machined face */
  content: ""; position: absolute; inset: 14%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #4b5546, #1b2019 70%);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .18), inset 0 -3px 6px rgba(0, 0, 0, .6);
}
.knob-cap::after { /* pointer */
  content: ""; position: absolute; left: 50%; top: 7%;
  width: 4px; height: 30%; margin-left: -2px;
  border-radius: 2px;
  background: var(--amber);
  box-shadow: 0 0 6px rgba(255, 182, 39, .9);
}
.knob-mini { width: 46px; cursor: ns-resize; }
.knob-mini .knob-cap { inset: 12%; }
.knob-mini .ring-track { stroke-width: 10; }
.knob-mini .ring-val { stroke-width: 7; }

/* ---------- pads (smaller inventory items) ---------- */
.pad {
  container-type: size;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end;
  gap: 3px;
  padding: 8px 10px;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  transition: transform .06s, border-color .2s, box-shadow .2s, filter .15s;
}
.pad:hover { border-color: var(--line-hi); filter: brightness(1.12); }
.pad:active, .pad.firing { transform: translateY(2px); }
.pad:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.pad-title {
  font: 800 clamp(15px, 24cqh, 26px)/1 "Stencil", sans-serif;
  letter-spacing: .06em; text-transform: uppercase;
  white-space: nowrap;
}
.pad-sub { font-size: clamp(9px, 13cqh, 11.5px); color: var(--ink-dim); letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.pad-key { position: absolute; top: 7px; right: 8px; font-size: 11px; padding: 0 5px; color: var(--ink-faint); background: rgba(0,0,0,.35); }
.sting.firing .pad-key { color: var(--amber); border-color: var(--amber); }
.pad-glyph { position: absolute; top: 6px; right: 10px; font-size: clamp(16px, 30cqh, 30px); color: var(--ink-faint); line-height: 1; }
.pad-led {
  position: absolute; top: 8px; right: 8px;
  width: 9px; height: 9px; border-radius: 50%;
  background: #1c2a1a; box-shadow: inset 0 0 3px #000;
}
.toggle[aria-pressed="true"] { border-color: var(--phos-mid); box-shadow: 0 0 14px rgba(87, 194, 74, .25), inset 0 0 18px rgba(87, 194, 74, .1); }
.toggle[aria-pressed="true"] .pad-led { background: var(--phos); box-shadow: 0 0 8px var(--phos); }
.toggle[aria-pressed="true"] .pad-title { color: var(--phos); text-shadow: var(--glow); }

.sting { background: linear-gradient(160deg, rgba(255, 255, 255, .03), transparent 40%), linear-gradient(#211d16, #14110d); border-color: #3a3123; }
.sting .pad-title { color: #f1d9a6; }
.sting.firing { border-color: var(--amber); box-shadow: 0 0 22px rgba(255, 182, 39, .45), inset 0 0 22px rgba(255, 182, 39, .18); }
.sting.firing .pad-title { color: var(--amber); text-shadow: 0 0 10px rgba(255, 182, 39, .7); }
.sting::after { /* progress sweep while a sting plays */
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
  background: var(--amber); box-shadow: 0 0 6px var(--amber);
  transform-origin: left; transform: scaleX(0);
}
.sting.firing::after { animation: sweep var(--dur, 2s) linear forwards; }
@keyframes sweep { from { transform: scaleX(1) } to { transform: scaleX(0) } }

.env .pad-title { font-size: clamp(14px, 26cqh, 22px); }
.env-level { container-type: size; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 0 6px; }
.env-level .knob-mini { width: clamp(28px, 78cqh, 46px); }

/* transmit */
.ptt {
  align-items: center; justify-content: center; text-align: center;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(255, 255, 255, .05), transparent 60%),
    linear-gradient(#232a20, #12160f);
}
.ptt .plate { position: absolute; top: 10px; left: 10px; }
.ptt-grille {
  width: min(58cqw, 54cqh); aspect-ratio: 1;
  border-radius: 50%;
  margin-bottom: 6px;
  background:
    radial-gradient(circle, #0a0c09 0 1.6px, transparent 2px) 0 0 / 7px 7px,
    radial-gradient(circle at 40% 35%, #3a4436, #161a14 70%);
  box-shadow: inset 0 3px 10px rgba(0, 0, 0, .9), 0 0 0 3px #0b0d0a, 0 0 0 4px #333c2f;
  transition: box-shadow .15s;
}
.ptt .pad-title { font-size: clamp(18px, 12cqh, 30px); }
.ptt.tx { border-color: var(--red); box-shadow: 0 0 30px rgba(255, 59, 47, .4); }
.ptt.tx .ptt-grille { box-shadow: inset 0 3px 10px rgba(0, 0, 0, .9), 0 0 0 3px #0b0d0a, 0 0 0 4px var(--red), 0 0 22px rgba(255, 59, 47, .7); }
.ptt.tx .pad-title { color: var(--red); text-shadow: 0 0 10px rgba(255, 59, 47, .8); }
.ptt.tx .pad-sub { color: #ffb3ad; }

/* kill switches */
.fade .pad-title { color: var(--ink); }
.cut {
  border: 0;
  background:
    linear-gradient(#3a0f0b, #200806) padding-box,
    repeating-linear-gradient(-45deg, #f2c200 0 9px, #111 9px 18px) border-box;
  border: 5px solid transparent;
}
.cut .pad-title { color: #ff6a5f; font-size: clamp(20px, 32cqh, 34px); text-shadow: 0 0 10px rgba(255, 59, 47, .5); }
.cut .pad-sub { color: #e7a39d; }
.cut-cover { /* guard cover that flips up on hover */
  position: absolute; inset: 0;
  background: linear-gradient(160deg, rgba(255, 120, 110, .2), rgba(120, 20, 15, .25));
  border-bottom: 2px solid rgba(255, 150, 140, .25);
  transform-origin: top; transition: transform .25s var(--ease);
  pointer-events: none;
}
.cut:hover .cut-cover, .cut:focus-visible .cut-cover { transform: perspective(300px) rotateX(70deg); }

/* ---------- footer teletype ---------- */
.teletype {
  flex: none;
  display: flex; align-items: center; gap: 16px;
  padding: 6px clamp(10px, 1.2vw, 18px) 8px;
  font-size: 10.5px;
}
.tt-line {
  flex: 1; min-width: 0;
  font: 13px/1 "LCD", monospace; letter-spacing: .08em;
  color: var(--phos-mid);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tt-line span::after { content: "█"; margin-left: 4px; animation: blink 1s steps(1) infinite; }
.fineprint { margin: 0; color: var(--ink-faint); letter-spacing: .04em; white-space: nowrap; }

/* ---------- boot + manual ---------- */
.boot {
  position: fixed; inset: 0; z-index: 40;
  display: grid; place-items: center;
  background: radial-gradient(ellipse at center, rgba(4, 18, 4, .94), rgba(0, 0, 0, .98));
  backdrop-filter: blur(3px);
  transition: opacity .5s var(--ease), visibility .5s;
}
.boot.gone { opacity: 0; visibility: hidden; }
.boot-inner { width: min(600px, 90vw); text-align: center; }
.boot-log {
  text-align: left;
  font: 14px/1.5 "LCD", monospace; color: var(--phos-mid);
  min-height: 9em; margin: 0 0 18px;
  text-shadow: var(--glow);
  white-space: pre-wrap;
}
.boot h2 { font: 800 44px/1 "Stencil", sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--phos); text-shadow: var(--glow); margin: 0 0 10px; }
.boot p { color: var(--ink-dim); font-size: 15px; line-height: 1.5; margin: 0 auto 22px; max-width: 46ch; }
.boot .boot-fine { font-size: 11px; color: var(--ink-faint); letter-spacing: .12em; text-transform: uppercase; margin-top: 18px; }

.manual {
  width: min(980px, 94vw); max-height: 90vh;
  padding: 0;
  background: linear-gradient(#171c15, #0d100c);
  color: var(--ink);
  border: 1px solid var(--line-hi);
  border-radius: 6px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .8), 0 0 0 1px #000;
  user-select: text;
}
.manual::backdrop { background: rgba(0, 0, 0, .7); backdrop-filter: blur(2px); }
.manual-inner { padding: 22px 26px; overflow: auto; max-height: 90vh; }
.manual h2 { font: 800 30px/1 "Stencil", sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--phos); text-shadow: var(--glow); margin: 0 0 14px; }
.manual h3 { font: 600 11px/1 "Plex", monospace; letter-spacing: .24em; text-transform: uppercase; color: var(--amber); margin: 16px 0 8px; }
.manual p, .manual li { font-size: 13.5px; line-height: 1.6; color: #c3cab6; margin: 0 0 8px; }
.manual a { color: var(--phos); }
.manual-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.keys { list-style: none; padding: 0; margin: 0; }
kbd { font: 12px "LCD", monospace; padding: 1px 5px; border: 1px solid var(--line-hi); border-bottom-width: 2px; border-radius: 3px; background: #0b0e0a; color: var(--ink); }
.tracklist { columns: 3; font-size: 12px; color: var(--ink-dim); margin: 10px 0 16px; padding-left: 22px; }
.tracklist li { font-size: 12px; margin: 0; }

/* ---------- smaller screens: keep it usable, scrolling is the safety valve ---------- */
@media (max-height: 760px) and (min-width: 901px) {
  .classification { padding: 2px 0; font-size: 9.5px; }
  .masthead { padding-top: 4px; padding-bottom: 4px; }
  .insignia { width: 40px; height: 40px; }
  .brand h1 { font-size: 28px; }
  .readout, .op { padding: 4px 8px 3px; }
  .lcd-text, .op input { font-size: 17px; }
  .status-strip { font-size: 15px; padding: 4px 10px; }
  .board { grid-template-rows: repeat(4, minmax(0, 1fr)) 12px minmax(0, .7fr) 12px minmax(0, .6fr); }
}
@media (max-width: 1360px) and (min-width: 901px) {
  .readouts .vu { display: none; }
}
@media (max-width: 1180px) and (min-width: 901px) {
  .readouts .readout:nth-child(3), .readouts .vu { display: none; }
  .fineprint { display: none; }
}
@media (max-width: 900px) {
  body { overflow: auto; }
  .masthead { grid-template-columns: 1fr; gap: 10px; }
  .readouts { justify-content: flex-start; flex-wrap: wrap; }
  .classification { font-size: 8.5px; letter-spacing: .14em; white-space: nowrap; overflow: hidden; }
  .readouts .vu { display: none; }
  .head-controls { flex-wrap: wrap; }
  .board {
    flex: none;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: none;
    grid-auto-rows: 74px;
    grid-template-areas:
      "inv inv inv inv" "inv inv inv inv" "inv inv inv inv" "inv inv inv inv"
      "vio vio vio vio" "vio vio vio vio" "vio vio vio vio"
      "pur pur pur pur" "pur pur pur pur" "pur pur pur pur"
      "unn unn unn unn" "unn unn unn unn" "unn unn unn unn"
      "hom hom hom hom" "hom hom hom hom" "hom hom hom hom"
      "ptt ptt sql phn" "ptt ptt rbd rbd"
      "stl stl stl stl"
      "s1  s1  s2  s2 " "s3  s3  s4  s4 " "s5  s6  s7  s7 "
      "evl evl evl evl"
      "e1  e2  e3  e4 " "e5  e6  e7  e8 " "elv fad cut cut";
  }
  .rail-label { align-self: center; }
  .teletype { flex-direction: column; align-items: flex-start; }
  .fineprint { white-space: normal; }
  .manual-cols { grid-template-columns: 1fr; }
  .tracklist { columns: 1; }
  .ss-tier, .ss-sep { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}