/* ═══════════════════════════════════════════════════════════════
   MODULES — each block below is one physical part of the console
   ═══════════════════════════════════════════════════════════ */

.module { display: grid; gap: var(--gap-xs); justify-items: start; }

/* ── SEVEN-SEGMENT COUNTER ─────────────────────────────────────
   Real segment geometry in SVG, not a pixel font. The unlit bars are
   genuinely present, the way they are on a physical LED module.       */
.counter {
  display: flex; gap: clamp(2px, 0.4vw, 5px);
  padding: 7px 10px;
  background-color: var(--counter-bg);
  background-image:
    radial-gradient(120% 140% at 50% 0%, rgba(255, 165, 36, 0.07), transparent 60%),
    linear-gradient(180deg, #0D0903, var(--counter-bg) 40%, #100B03);
  border: 2px solid var(--brass-dark);
  border-radius: var(--r-window);
  box-shadow:
    var(--inset-3),
    0 0 0 1px rgba(255, 255, 255, 0.3),
    0 1px 0 rgba(255, 255, 255, 0.55);
}
.seg {
  display: block;
  width: clamp(16px, 1.9vw, 23px);
  height: auto;
  overflow: visible;
}
.seg__bar {
  fill: var(--led-dim);
  opacity: 0.3;
  transition: fill 90ms linear, opacity 90ms linear;
}
.seg__bar.is-lit {
  fill: var(--led);
  opacity: 1;
  filter:
    drop-shadow(0 0 2px rgba(255, 165, 36, 0.95))
    drop-shadow(0 0 6px rgba(255, 132, 0, 0.55));
}
/* a digit changing strikes on rather than cutting */
.seg.is-striking .seg__bar.is-lit { animation: led-strike 220ms steps(3, end); }
@keyframes led-strike {
  0%   { opacity: 0.2; }
  45%  { opacity: 1; }
  70%  { opacity: 0.6; }
  100% { opacity: 1; }
}

.counter--small { padding: 5px 7px; }
.counter--small .seg { width: clamp(13px, 1.5vw, 18px); }

/* ── LAMP CLUSTER ──────────────────────────────────────────────
   Each lamp is a real button: it reports state and opens the panel
   that state belongs to. Indicator and control, same object.        */
.lamps { display: flex; gap: clamp(0.3rem, 0.8vw, 0.7rem); align-items: flex-start; }
.lamp {
  display: grid; justify-items: center; gap: 3px;
  min-width: var(--tap-min); min-height: var(--tap-min);
  padding: 0.3rem 0.45rem;
  background: none; border: 0; border-radius: var(--r-sm);
  cursor: pointer;
  transition: background var(--t-quick) ease-out;
}
.lamp:hover { background: rgba(255, 255, 255, 0.55); }
.lamp:active { background: rgba(120, 105, 80, 0.14); }
/* An unlit lamp is dark glass in a chrome bezel. A lit one is a filament
   behind that glass: a white-hot core, coloured body, and light spilling
   onto the panel around it. The bloom is a separate layer so it can be
   bright without washing out the lens highlight. */
.lamp__glass {
  position: relative;
  width: clamp(22px, 2.6vw, 30px);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 26%, rgba(255, 255, 255, 0.55), transparent 44%),
    radial-gradient(circle at 50% 62%, #3A3A3A, #141414);
  box-shadow:
    0 0 0 3px #78736B,
    0 0 0 4px rgba(0, 0, 0, 0.55),
    inset 0 -2px 5px rgba(0, 0, 0, 0.8);
  transition: background var(--t-quick) linear, box-shadow 260ms var(--ease-settle);
}
/* the glow thrown onto the surrounding panel */
.lamp__glass::after {
  content: '';
  position: absolute; inset: -70%;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 260ms var(--ease-settle);
}

.lamp__name, .lamp__state {
  font-size: 0.6rem; letter-spacing: var(--track-label); text-transform: uppercase;
}
.lamp__name { color: var(--engrave); text-shadow: var(--engrave-text); }
.lamp__state { color: var(--ink-soft); font-size: 0.58rem; }

.lamp--red.is-lit .lamp__glass {
  background:
    radial-gradient(circle at 40% 34%, #FFFFFF 0%, #FFC9C4 14%, #F2564A 44%, var(--lamp-red) 68%, #6E120C 100%);
  box-shadow:
    0 0 0 3px #78736B, 0 0 0 4px rgba(0, 0, 0, 0.55),
    0 0 14px rgba(240, 86, 74, 0.95), 0 0 32px rgba(200, 53, 44, 0.6);
}
.lamp--red.is-lit .lamp__glass::after {
  opacity: 1;
  background: radial-gradient(circle, rgba(240, 86, 74, 0.4), transparent 62%);
}

.lamp--teal.is-lit .lamp__glass {
  background:
    radial-gradient(circle at 40% 34%, #FFFFFF 0%, #E6FFFD 14%, #8FE3E0 42%, var(--teal) 68%, #17494B 100%);
  box-shadow:
    0 0 0 3px #78736B, 0 0 0 4px rgba(0, 0, 0, 0.55),
    0 0 14px rgba(143, 227, 224, 1), 0 0 34px rgba(111, 178, 176, 0.7);
}
.lamp--teal.is-lit .lamp__glass::after {
  opacity: 1;
  background: radial-gradient(circle, rgba(143, 227, 224, 0.45), transparent 62%);
}

.lamp--amber.is-lit .lamp__glass {
  background:
    radial-gradient(circle at 40% 34%, #FFFFFF 0%, #FFF3CE 14%, #FFC64A 44%, var(--amber) 68%, #5E4A0C 100%);
  box-shadow:
    0 0 0 3px #78736B, 0 0 0 4px rgba(0, 0, 0, 0.55),
    0 0 14px rgba(255, 198, 74, 0.95), 0 0 34px rgba(201, 162, 39, 0.65);
}
.lamp--amber.is-lit .lamp__glass::after {
  opacity: 1;
  background: radial-gradient(circle, rgba(255, 198, 74, 0.42), transparent 62%);
}

/* ── LAMP MOTION POLICY ────────────────────────────────────────
   Movement means something specific, and only these three things:
   · strike  — the state just changed (filament warming up)
   · breathe — the state is live and ongoing right now
   · steady  — simply true
   A lamp that is merely "on" must not move.                        */
.lamp.is-warming .lamp__glass { animation: filament 460ms var(--ease-settle); }
@keyframes filament {
  0%   { filter: brightness(0.3) saturate(0.6); }
  50%  { filter: brightness(1.5) saturate(1.1); }
  100% { filter: brightness(1) saturate(1); }
}

.lamp.is-live .lamp__glass::after { animation: breathe 3.4s ease-in-out infinite; }
@keyframes breathe {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}

/* ── SMALL READOUTS ────────────────────────────────────────── */
.module--readout { justify-self: stretch; }
.readout {
  width: 100%;
  padding: 0.32rem 0.6rem;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 2vw, 1.5rem);
  line-height: 1.1;
  letter-spacing: var(--track-display);
  color: var(--phosphor);
  text-transform: uppercase;
  background: var(--crt-bg);
  border-radius: var(--r-window);
  box-shadow: var(--inset-2), 0 1px 0 rgba(255, 255, 255, 0.5);
  text-shadow: 0 0 6px rgba(143, 227, 224, 0.45);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── VU METER ──────────────────────────────────────────────── */
.vu-bezel {
  padding: 8px;
  border-radius: var(--r-md);
  background: linear-gradient(160deg, var(--bakelite-light), var(--bakelite) 55%, #191714);
  box-shadow: var(--raise-3), inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
.vu { display: block; width: clamp(150px, 17vw, 214px); height: auto; }
.vu__face { stroke: rgba(0, 0, 0, 0.35); stroke-width: 1; }
.vu__arc { fill: none; stroke-width: 3; }
.vu__arc--safe { stroke: var(--teal-dark); }
.vu__arc--hot  { stroke: var(--lamp-red); }
.vu__tick { stroke: var(--teal-dark); stroke-width: 1.4; }
.vu__tick--major { stroke-width: 2.2; }
.vu__tick--hot { stroke: var(--lamp-red); }
.vu__num {
  font-family: var(--font-ui); font-size: 9px; fill: var(--teal-dark);
}
.vu__num--hot { fill: var(--lamp-red); }
.vu__mark {
  font-family: var(--font-ui); font-weight: 700; font-size: 15px;
  letter-spacing: 0.18em; fill: var(--teal-dark);
}
.vu__needle { stroke: #1A1A1A; stroke-width: 1.6; stroke-linecap: round; }
.vu__hub { fill: #3A352C; stroke: #7A7059; stroke-width: 1.5; }
.vu.is-hot .vu__needle { stroke: #4A1010; }

/* ── REELS ─────────────────────────────────────────────────── */
.deck__reels {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(0.4rem, 1.4vw, 1.2rem);
}
.reel {
  display: block;
  width: 100%; max-width: 178px; height: auto;
  justify-self: center;
  /* tight contact shadow — the reel is sitting ON the deck, not floating */
  filter: drop-shadow(0 3px 4px rgba(46, 32, 14, 0.55));
}

/* gradient stops carry the tokens — attributes can't hold var() */
.stop-tape       { stop-color: var(--tape); }
.stop-tape-light { stop-color: var(--tape-light); }
.stop-tape-dark  { stop-color: var(--tape-dark); }
.stop-enamel       { stop-color: var(--enamel); }
.stop-enamel-shade { stop-color: var(--enamel-shade); }
.stop-enamel-deep  { stop-color: var(--enamel-deep); }

/* The interior of the reel, seen through a window with no tape behind it.
   Dark on purpose: a spent take-up reel should read as shadowed inside, so the
   thin ring of remaining leader is the only saturated thing on it. */
.reel__well { fill: #4A423A; }

/* the wound pack: grows on one hub as it shrinks on the other */
.reel__pack { transition: r 240ms linear; }
.reel__pack-edge {
  fill: none;
  stroke: rgba(255, 255, 255, 0.22); stroke-width: 1.4;
  transition: r 240ms linear;
}

.reel__spin { will-change: transform; }
/* the rim carries the mass — a thick band around the outside */
.reel__rim {
  fill: none;
  stroke: var(--enamel-shade);
}
.reel__lip {
  fill: none;
  stroke: rgba(96, 76, 44, 0.4); stroke-width: 1.4;
}
/* gradient stops for the machined parts — tokens, not literals */
.stop-teal-hi   { stop-color: #A6D6D3; }
.stop-teal      { stop-color: var(--teal); }
.stop-teal-mid  { stop-color: var(--teal-mid); }
.stop-teal-dark { stop-color: var(--teal-ink); }
.stop-alu-hi    { stop-color: var(--alu-hi); }
.stop-alu       { stop-color: var(--alu); }
.stop-alu-lo    { stop-color: var(--alu-lo); }
.stop-hole-deep { stop-color: #16403F; }
.stop-hole      { stop-color: var(--teal-ink); }
.stop-hole-lip  { stop-color: #7FBFBC; }

/* ANODISED, NOT PAINTED. The hub keeps the signature teal but wears it as
   metal: broad soft falloff, darker rim, one long low-contrast sheen along
   the top-left edge. Matte on purpose — a specular hotspot here would read
   as plastic instantly. */
.reel__hub { stroke: var(--teal-ink); stroke-width: 1.2; }
.reel__hub-sheen {
  fill: none;
  stroke: rgba(255, 255, 255, 0.42);
  stroke-width: 1.8;
  stroke-linecap: round;
}
/* drilled, not printed: dark where it undercuts, bright on the far lip */
.reel__hub-hole { stroke: rgba(255, 255, 255, 0.18); stroke-width: 0.7; }

/* the spindle sits in a machined recess */
.reel__spindle-well {
  fill: rgba(12, 32, 32, 0.55);
}
.reel__spindle {
  stroke: var(--alu-edge); stroke-width: 1;
}
.reel__clamp path {
  stroke: var(--alu-edge); stroke-width: 2.8; stroke-linecap: round;
  opacity: 0.85;
}
.reel__pin { fill: var(--alu-lo); stroke: var(--alu-edge); stroke-width: 0.6; }

/* tape head assembly between the reels */
.deck__head { display: grid; justify-items: center; gap: 6px; }
.deck__head-block {
  width: 30px; height: 40px;
  background: linear-gradient(150deg, var(--teal-light), var(--teal) 46%, var(--teal-dark));
  border-radius: 5px 5px 2px 2px;
  box-shadow: var(--raise-2), inset 0 -4px 6px rgba(0, 0, 0, 0.28), inset 0 2px 0 rgba(255, 255, 255, 0.35);
}
.deck__capstan {
  width: 13px; height: 13px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #F6F4EE, var(--steel-dark));
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}

/* ── CRT SCOPE ─────────────────────────────────────────────── */
.scope-bezel {
  padding: 9px;
  border-radius: var(--r-md);
  background: linear-gradient(160deg, var(--bakelite-light), var(--bakelite) 55%, #191714);
  box-shadow: var(--raise-3), inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
.scope {
  position: relative;
  aspect-ratio: 1000 / 232;
  overflow: hidden;
  border-radius: var(--r-xs);
  background-color: var(--crt-bg);
  background-image: radial-gradient(120% 130% at 50% 45%, #0B2422 0%, var(--crt-bg) 62%, #03100F 100%);
  box-shadow: inset 0 0 26px rgba(0, 0, 0, 0.95);
}
.scope canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.scope__scanlines {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(180deg, rgba(0, 0, 0, 0.34) 0 1px, transparent 1px 3px);
  mix-blend-mode: multiply;
  pointer-events: none;
}
.scope__glass {
  position: absolute; inset: 0;
  background:
    radial-gradient(90% 60% at 50% 0%, rgba(255, 255, 255, 0.09), transparent 65%),
    radial-gradient(140% 120% at 50% 50%, transparent 55%, rgba(0, 0, 0, 0.7) 100%);
  pointer-events: none;
}
.scope__legend {
  position: absolute;
  font-family: var(--font-display);
  font-size: clamp(0.72rem, 1.35vw, 1.05rem);
  letter-spacing: var(--track-display);
  text-transform: uppercase;
  color: var(--phosphor);
  text-shadow: 0 0 7px rgba(143, 227, 224, 0.45);
  white-space: nowrap;
  max-width: 44%;
  overflow: hidden; text-overflow: ellipsis;
}
.scope__legend--tl { top: 7px; left: 12px; }
.scope__legend--tr { top: 7px; right: 12px; display: flex; align-items: center; gap: 7px; }
.scope__legend--bl { bottom: 6px; left: 12px; }
.scope__legend--bc { bottom: 6px; left: 50%; transform: translateX(-50%); }
.scope__legend--br { bottom: 6px; right: 12px; }
.scope__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #1E3A2A; box-shadow: inset 0 0 3px #000;
}
.scope.is-live .scope__dot {
  background: var(--phosphor);
  box-shadow: 0 0 8px var(--phosphor);
  animation: pulse 1.9s ease-in-out infinite;
}
@keyframes pulse { 50% { opacity: 0.35; } }

/* ── TRANSPORT ─────────────────────────────────────────────── */
.transport {
  display: flex; flex-wrap: wrap; align-items: flex-end;
  justify-content: space-between; gap: var(--gap-lg);
}
/* Piano-key transport, painted the same teal as the reel hubs. */
/* The key bed is a milled recess in the same perforated plate as the rest of
   the board — not a separate slab laid on top of it. Same perforation, same
   pitch, just sunk into the surface. */
/* The key bed is bakelite — the same dark material as the scope and VU
   bezels, so the board reads as one instrument cluster in three housings.
   Teal actuators on near-black is the highest-contrast pairing the palette
   owns; brass stays for small fittings only. */
.transport__buttons {
  position: relative;
  display: flex; gap: clamp(0.22rem, 0.5vw, 0.4rem);
  padding: clamp(0.5rem, 1vw, 0.75rem) clamp(1rem, 1.8vw, 1.4rem);
  border-radius: var(--r-md);
  background-color: var(--bakelite);
  background-image: linear-gradient(160deg, var(--bakelite-light), var(--bakelite) 55%, #191714);
  /* a dark housing casts shadow — it does not glow. The raise tokens carry a
     white sheen meant for enamel; on bakelite that sheen reads as a halo. */
  box-shadow:
    0 4px 10px rgba(46, 32, 14, 0.35),
    0 1px 2px rgba(46, 32, 14, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.13);
}

/* brass fittings holding the bed to the board */
.transport__buttons::before,
.transport__buttons::after {
  content: '';
  position: absolute; top: 50%;
  width: 10px; height: 10px;
  margin-top: -5px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #F6EDCC, var(--brass) 46%, var(--brass-dark));
  box-shadow: inset 0 -1px 1px rgba(60, 44, 10, 0.65), 0 1px 0 rgba(255, 255, 255, 0.18);
}
.transport__buttons::before { left: 7px; }
.transport__buttons::after  { right: 7px; }

/* legends printed on dark bakelite — light ink, no engrave highlight */
.transport__buttons .key__label {
  color: #EFE9DA;               /* bakelite is dark in both themes */
  text-shadow: none;
  opacity: 0.85;
}
.key {
  display: grid; justify-items: center; gap: 4px;
  padding: 0; border: 0; background: none; cursor: pointer;
}
.key__cap {
  display: grid; place-items: center;
  width: clamp(46px, 5.2vw, 62px);
  height: clamp(40px, 4.6vw, 54px);
  background: linear-gradient(180deg, var(--teal-light) 0%, var(--teal) 58%, var(--teal-mid) 100%);
  border: 1px solid rgba(30, 70, 72, 0.45);
  border-radius: 8px 8px 3px 3px;
  box-shadow:
    var(--raise-2),
    inset 0 2px 0 rgba(255, 255, 255, 0.55),
    inset 0 -3px 5px rgba(0, 0, 0, 0.2);
  transition: transform var(--t-tap) var(--ease-mech), box-shadow var(--t-tap) var(--ease-mech),
              background var(--t-quick) var(--ease-mech);
}
.key--wide .key__cap { width: clamp(56px, 6.4vw, 76px); }
/* Icons, not font characters — a glyph that falls back to a missing-box is
   the fastest way to make a machine look cheap. */
.key__icon {
  width: clamp(15px, 1.6vw, 20px);
  height: auto;
  fill: var(--teal-deep);
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.35));
}
.key__label {
  font-size: 0.62rem; letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--engrave); text-shadow: var(--engrave-text);
}
.key:hover .key__cap {
  background: linear-gradient(180deg, #A3D6D3 0%, var(--teal-light) 58%, var(--teal) 100%);
  box-shadow: var(--raise-3), inset 0 2px 0 rgba(255, 255, 255, 0.6);
}
.key:active .key__cap,
.key.is-down .key__cap,
.key[aria-pressed='true'] .key__cap {
  transform: translateY(3px);
  background: linear-gradient(180deg, var(--teal-mid), var(--teal-dark));
  box-shadow: var(--inset-2), inset 0 2px 4px rgba(0, 0, 0, 0.3);
}
/* PLAY latches down and brightens while the tape rolls — lit from within,
   not radiating. A wide glow on a pressed key reads as blur, not light. */
.key.is-latched .key__cap {
  transform: translateY(3px);
  background: linear-gradient(180deg, #A7DBD8, var(--teal) 55%, var(--teal-mid));
  box-shadow:
    inset 0 3px 6px rgba(0, 0, 0, 0.28),
    inset 0 -1px 0 rgba(255, 255, 255, 0.4),
    0 0 6px rgba(143, 227, 224, 0.35);
}
.key.is-latched .key__icon { fill: var(--enamel); filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.9)); }
.key[disabled] { cursor: not-allowed; }
.key[disabled] .key__cap {
  background: linear-gradient(180deg, #BCC9C7, #9FB0AE);
  box-shadow: var(--inset-1);
}
.key[disabled] .key__icon { fill: rgba(30, 50, 50, 0.45); filter: none; }

/* winding keys chatter while they're held down */
.key.is-down .key__icon { animation: wind-shimmer 140ms linear infinite; }
@keyframes wind-shimmer { 50% { opacity: 0.45; } }

.transport__meters { display: flex; align-items: flex-end; gap: clamp(1rem, 3vw, 2.4rem); }

/* tape counter */
.tape-counter { display: grid; justify-items: center; gap: 5px; }

/* volume knob */
.knob-mount {
  position: relative;
  display: grid; justify-items: center; gap: 5px;
  padding-top: 6px;
}
.knob-scale {
  position: absolute; top: 0; left: 50%;
  width: clamp(76px, 8.2vw, 100px); aspect-ratio: 1;
  transform: translateX(-50%);
  pointer-events: none;
}
.knob-scale__dots {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 145deg,
    var(--teal) 0 1deg, transparent 1deg 24deg,
    var(--teal) 24deg 25deg, transparent 25deg 48deg,
    var(--teal) 48deg 49deg, transparent 49deg 72deg,
    var(--teal) 72deg 73deg, transparent 73deg 96deg,
    var(--teal) 96deg 97deg, transparent 97deg 120deg,
    var(--teal) 120deg 121deg, transparent 121deg 144deg,
    var(--teal) 144deg 145deg, transparent 145deg 168deg,
    var(--teal) 168deg 169deg, transparent 169deg 192deg,
    var(--teal) 192deg 193deg, transparent 193deg 216deg,
    var(--teal) 216deg 217deg, transparent 217deg 270deg);
  -webkit-mask: radial-gradient(circle, transparent 0 44%, #000 44% 50%, transparent 50%);
          mask: radial-gradient(circle, transparent 0 44%, #000 44% 50%, transparent 50%);
  opacity: 0.8;
}
.knob {
  position: relative;
  width: clamp(56px, 6vw, 74px); aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 120%, #5A4A22, #241D0C 70%);
  box-shadow: var(--raise-3);
  cursor: grab;
  touch-action: none;
}
.knob:active { cursor: grabbing; }
.knob__face {
  position: absolute; inset: 5px;
  border-radius: 50%;
  /* turned brass, like the knobs on the reference plate */
  background:
    conic-gradient(from 0deg,
      #F4E3A6 0deg, #A88C2E 24deg, #EEDC9C 52deg, #94781F 88deg,
      #E9D593 128deg, #A08526 168deg, #F2E1A4 210deg, #977B22 258deg,
      #EBD897 300deg, #AE9233 340deg, #F4E3A6 360deg);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.55),
    inset 0 -3px 7px rgba(0, 0, 0, 0.42),
    0 1px 2px rgba(0, 0, 0, 0.4);
  transform: rotate(-135deg);
  transition: transform 120ms var(--ease-settle);
  will-change: transform;
}
.knob__pointer {
  position: absolute; top: 8%; left: 50%;
  width: 2.5px; height: 32%;
  transform: translateX(-50%);
  background: var(--bakelite);
  border-radius: 2px;
  box-shadow: 0 0 1px rgba(255, 255, 255, 0.6);
}
.knob-mount__legend {
  display: flex; justify-content: space-between;
  width: clamp(84px, 9vw, 108px);
  font-size: 0.58rem; letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--engrave);
}

/* ── TAPE PATH / SCRUB ─────────────────────────────────────── */
.tape-path__track {
  position: relative;
  height: 46px;
  border-radius: var(--r-xs);
  background-color: #1E1A15;
  background-image: linear-gradient(180deg, #191612, #262119);
  box-shadow: var(--inset-3), 0 1px 0 rgba(255, 255, 255, 0.45);
  overflow: hidden;
}
.tape-path__track canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.tape-path__played {
  position: absolute; inset: 0 auto 0 0; width: 0;
  background: linear-gradient(90deg, rgba(143, 227, 224, 0.05), rgba(143, 227, 224, 0.16));
  pointer-events: none;
}
.tape-path__head {
  position: absolute; top: 0; bottom: 0; left: 0; width: 2px;
  background: var(--amber);
  box-shadow: 0 0 7px rgba(201, 162, 39, 0.9);
  pointer-events: none;
}
#scrub {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  margin: 0; padding: 0;
  opacity: 0;
  cursor: ew-resize;
}
#scrub:focus-visible { opacity: 0.001; }
.tape-path__track:has(#scrub:focus-visible) { outline: var(--focus-ring); outline-offset: 2px; }

/* ── CURRENT STORY PLATE (engraved metal) ──────────────────── */
.plate {
  display: grid; gap: 0.55rem;
  padding: clamp(0.75rem, 1.6vw, 1.1rem) clamp(1rem, 2.4vw, 1.6rem);
  border-radius: var(--r-sm);
  background:
    linear-gradient(118deg, #E2DED5 0%, #CFC9BC 38%, #E6E2D9 62%, #C8C2B4 100%);
  box-shadow: var(--raise-3), inset 0 1px 0 rgba(255, 255, 255, 0.8), inset 0 -1px 0 rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(90, 80, 60, 0.3);
}
.plate__eyebrow {
  font-size: 0.62rem; letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--engrave); text-shadow: var(--engrave-text);
}
.plate__title {
  font-family: var(--font-ui); font-weight: 700;
  font-size: clamp(1rem, 2.4vw, 1.5rem);
  letter-spacing: var(--track-title); text-transform: uppercase;
  color: var(--teal-ink);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.65);
}
.plate__specs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 0.45rem 1.4rem;
  padding-top: 0.35rem;
  border-top: 1px solid rgba(90, 80, 60, 0.28);
}
.plate__specs div { display: flex; gap: 0.55rem; align-items: baseline; min-width: 0; }
.plate__specs dt {
  font-size: 0.6rem; letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--engrave);
  white-space: nowrap;          /* the label never breaks; only the value may */
}
.plate__specs dd {
  font-size: 0.74rem; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--teal-ink);
}
.plate__note {
  font-size: 0.72rem; letter-spacing: 0.04em;
  color: var(--ink-soft);
}
.plate__note b { color: var(--teal-ink); }

.plate__foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--gap-lg); flex-wrap: wrap;
}
.plate__transcript {
  min-height: var(--tap-min);
  padding: 0.5rem 1rem;
  font-size: 0.66rem; letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--teal-ink);
  background: linear-gradient(180deg, var(--enamel), var(--enamel-deep));
  border: 1px solid rgba(60, 50, 30, 0.34);
  border-radius: var(--r-key);
  box-shadow: var(--raise-1);
  cursor: pointer;
}
.plate__transcript:active { transform: translateY(2px); box-shadow: var(--inset-2); }
/* an absent transcript is stated, not hidden */
.plate__transcript.is-empty { color: var(--ink-soft); border-style: dashed; }

/* ── SCRUBBING THE REELS ───────────────────────────────────────
   The reel bed is a drag surface. touch-action:none stops the browser
   claiming the gesture for a scroll before we ever see the move. */
.deck__reels {
  cursor: grab;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}
.deck__reels.is-scrubbing { cursor: grabbing; }
.deck__reels.is-scrubbing .reel { filter: drop-shadow(0 6px 14px rgba(60, 44, 24, 0.45)); }
/* the pack radius normally eases; while a hand is on it, it must not lag */
.deck__reels.is-scrubbing .reel__pack,
.deck__reels.is-scrubbing .reel__pack-edge { transition: none; }

/* A key the machine pressed itself — same travel as a finger, but it releases
   on its own. Used when a tape runs out and the deck throws STOP. */
.key.is-struck .key__cap {
  transform: translateY(3px);
  background: linear-gradient(180deg, var(--teal-mid), var(--teal-dark));
  box-shadow: var(--inset-2), inset 0 2px 4px rgba(0, 0, 0, 0.3);
}
.key.is-struck .key__icon { fill: var(--enamel); }

/* The counter gives the reading; this gives the meaning. Quiet, human, and
   never abbreviated — "forty-nine people" lands where "49" does not. */
.tally {
  max-width: 22ch;
  font-size: 0.72rem;
  line-height: 1.45;
  letter-spacing: 0.01em;
  color: var(--ink-soft);
}


/* ── ENGRAVED LEGENDS RUN CONDENSED ────────────────────────────
   This is what the width axis was for. A stamped instrument legend is
   narrow; widening it with letter-spacing alone reads as a web label
   pretending. 78% is close to a real panel legend without getting tight. */
.engraved,
.key__label,
.lamp__name,
.lamp__state,
.plate__eyebrow,
.plate__specs dt,
.knob-mount__legend,
.tally { font-stretch: 78%; }

/* session tally — quiet, session-only, no storage anywhere */
.plate__heard {
  font-size: 0.7rem;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
  min-height: 1em;
}