/* SIDE A rigs: The Pressing Room + Strata 2X. Standalone; depends on no other stylesheet.
   Fixed 1100px hardware drawn at true pixel scale, zoomed down by container width, then
   switched to a horizontal snap-pan below 858px so every control stays reachable. */

/* ───────────── shared frame ───────────── */
.instrument--pressing,
.instrument--strata {
  --f-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --f-sans: "DM Sans", "Helvetica Neue", Arial, sans-serif;
  --f-serif: "Fraunces", Georgia, "Times New Roman", serif;
  --focus: #ffd27a;
  container-type: inline-size;
  position: relative;
  width: 100%;
  max-width: 1100px;
  margin-inline: auto;
  font-family: var(--f-sans);
  color: #ece7de;
  -webkit-font-smoothing: antialiased;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.instrument--pressing *,
.instrument--strata * { box-sizing: border-box; }
.instrument--pressing *::before,
.instrument--pressing *::after,
.instrument--strata *::before,
.instrument--strata *::after { box-sizing: border-box; }

.rig-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.rig-scroller { position: relative; }
.rig-body { position: relative; width: 1100px; margin-inline: auto; }
.rig-pan-hint { display: none; }

@container (max-width: 1099.98px) { .rig-body { zoom: .92; } }
@container (max-width: 1011px) { .rig-body { zoom: .84; } }
@container (max-width: 923px) { .rig-body { zoom: .78; } }

/* ───────────── controls: real inputs under sculpted art ───────────── */
:where(.instrument--pressing, .instrument--strata) button {
  appearance: none;
  -webkit-appearance: none;
  position: absolute;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  touch-action: manipulation;
}
.instrument--pressing .control,
.instrument--strata .control {
  position: absolute;
  display: block;
  margin: 0;
  cursor: grab;
}
.instrument--pressing .control:active,
.instrument--strata .control:active { cursor: grabbing; }
.instrument--pressing .control > input,
.instrument--strata .control > input {
  appearance: none;
  -webkit-appearance: none;
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  opacity: 0;
  background: transparent;
  cursor: inherit;
  touch-action: none;
}
/* the invisible thumb spans 2 × --pad, so native pointer mapping matches the drawn cap travel */
.instrument--pressing .control > input::-webkit-slider-thumb,
.instrument--strata .control > input::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: calc(2 * var(--pad, 8px));
  height: calc(2 * var(--pad, 8px));
  border: 0;
  background: transparent;
}
.instrument--pressing .control > input::-moz-range-thumb,
.instrument--strata .control > input::-moz-range-thumb {
  width: calc(2 * var(--pad, 8px));
  height: calc(2 * var(--pad, 8px));
  border: 0;
  background: transparent;
}
.instrument--pressing .control > input[data-orient="vertical"],
.instrument--strata .control > input[data-orient="vertical"] { writing-mode: vertical-lr; direction: rtl; }
.instrument--strata .st-tempo > input[data-orient="vertical"] { direction: ltr; }
/* a right-to-left fader (the right DD-1's pitch) draws its cap from the mirrored end */
.instrument--pressing .control:has(> input[dir="rtl"]) { --vv: calc(1 - var(--v)); }

.instrument--pressing .legend,
.instrument--strata .legend { pointer-events: none; white-space: nowrap; }

/* teaching tag: the friendly label and live value, shown on hover and keyboard focus */
.instrument--pressing .tip,
.instrument--strata .tip {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  z-index: 40;
  padding: 5px 8px 6px;
  border-radius: 6px;
  background: rgba(16, 14, 12, .95);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(255, 255, 255, .08);
  color: #f6f1e7;
  font: 500 11px/1.25 var(--f-sans);
  letter-spacing: .01em;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 4px);
  transition: opacity .14s ease, transform .14s ease;
}
.instrument--pressing .tip output,
.instrument--strata .tip output { margin-left: 4px; color: var(--focus); font: 600 11px/1 var(--f-mono); }
.instrument--pressing .control:is(:hover, :focus-within) .tip,
.instrument--strata .control:is(:hover, :focus-within) .tip { opacity: 1; transform: translate(-50%, 0); }

.instrument--pressing :focus-visible,
.instrument--strata :focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.instrument--pressing .control:has(> input:focus-visible),
.instrument--strata .control:has(> input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 10px; }

/* knobs: static shading, rotating knurl and pointer */
.knob-art { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.knob-ticks {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--ks, 36px) + 14px);
  height: calc(var(--ks, 36px) + 14px);
  translate: -50% -50%;
  border-radius: 50%;
  background: repeating-conic-gradient(from -135deg, var(--tick, rgba(255, 255, 255, .55)) 0 1.6deg, transparent 1.6deg var(--tick-step, 27deg));
  -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 4px), #000 calc(100% - 3.5px)), conic-gradient(from -137deg, #000 0 274deg, transparent 0);
  -webkit-mask-composite: source-in;
  mask: radial-gradient(closest-side, transparent calc(100% - 4px), #000 calc(100% - 3.5px)), conic-gradient(from -137deg, #000 0 274deg, transparent 0);
  mask-composite: intersect;
}
.knob-body {
  position: relative;
  width: var(--ks, 36px);
  height: var(--ks, 36px);
  border-radius: 50%;
}
.knob-body::before,
.knob-body::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  rotate: calc(-135deg + var(--v, .5) * 270deg);
}
.knob-cap { position: absolute; inset: 20%; border-radius: 50%; }

/* faders share a skeleton; each rig places slot, scale and cap */
.fader-art { position: absolute; inset: 0; pointer-events: none; }
.fader-slot, .fader-cap, .fader-scale, .fader-scale i { position: absolute; }
.fader-scale i { font-style: normal; }

/* one LED ladder per deck: post-fader, pre-crossfader */
.deck-meter { display: flex; flex-direction: column-reverse; gap: 2px; }
.deck-meter i {
  --seg: #46e08a;
  flex: 1;
  border-radius: 1.5px;
  background: var(--seg);
  box-shadow: 0 0 6px color-mix(in srgb, var(--seg) 70%, transparent);
  opacity: clamp(.12, calc((var(--m) * var(--n) - var(--i)) * 1.8), 1);
}
.deck-meter i:nth-last-child(-n + 5) { --seg: #ffc23d; }
.deck-meter i:nth-last-child(-n + 2) { --seg: #ff4636; }

/* ═════════════ THE PRESSING ROOM ═════════════
   One tungsten lamp, upper left. Every highlight leans that way; shadows fall down-right. */
.pr-plinth {
  --lamp: #ffd7a1;
  height: 624px;
  border-radius: 14px;
  background:
    radial-gradient(120% 90% at 16% 0%, rgba(255, 200, 130, .16), transparent 55%),
    radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .055) .6px, transparent 1.1px) 0 0 / 3px 3px,
    radial-gradient(circle at 2px 2px, rgba(0, 0, 0, .45) .7px, transparent 1.2px) 0 0 / 4px 4px,
    linear-gradient(165deg, #27231f, #141210 55%, #0b0a09);
  box-shadow: 18px 34px 60px -12px rgba(0, 0, 0, .7), 4px 10px 18px rgba(0, 0, 0, .55);
}
.pr-case-edge {
  position: absolute;
  inset: 0;
  border-radius: 14px;
  pointer-events: none;
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, .85), inset 0 0 0 2px #e4e0d8, inset 0 0 0 4px #a8a49c,
    inset 0 0 0 6px #7d7a73, inset 0 0 0 7px #4d4a45, inset 0 0 0 8px rgba(0, 0, 0, .8),
    inset 0 10px 14px -6px rgba(0, 0, 0, .6);
}
.pr-corner {
  position: absolute;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #fff 0 6%, #d9d6cf 18%, #7b7871 52%, #2c2a27 78%, #8f8b84 100%);
  box-shadow: 3px 6px 9px rgba(0, 0, 0, .6);
  pointer-events: none;
}
.pr-corner--0 { left: -9px; top: -9px; }
.pr-corner--1 { right: -9px; top: -9px; }
.pr-corner--2 { right: -9px; bottom: -9px; }
.pr-corner--3 { left: -9px; bottom: -9px; }

.pr-deck { position: absolute; top: 20px; width: 400px; height: 540px; }
.pr-deck--left { left: 20px; }
.pr-deck--right { left: 680px; }
.pr-chassis {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  filter: drop-shadow(7px 14px 14px rgba(0, 0, 0, .6)) drop-shadow(1px 3px 2px rgba(0, 0, 0, .7));
}
.pr-foot {
  position: absolute;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background:
    repeating-conic-gradient(rgba(255, 255, 255, .06) 0 4deg, transparent 4deg 12deg),
    radial-gradient(circle at 40% 35%, #3a3835, #121110 70%);
  box-shadow: 4px 8px 10px rgba(0, 0, 0, .6);
}
.pr-foot--0 { left: -11px; top: 14px; }
.pr-foot--1 { right: -11px; top: 14px; }
.pr-foot--2 { right: -11px; bottom: 14px; }
.pr-foot--3 { left: -11px; bottom: 14px; }

.pr-brand {
  position: absolute;
  top: 144px;
  width: 104px;
  color: #2b2925;
  font: italic 800 12px/1 var(--f-sans);
  letter-spacing: .18em;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .7), 0 -1px 0 rgba(0, 0, 0, .18);
  pointer-events: none;
}
.pr-brand b { color: #a82f1c; letter-spacing: .06em; }
.pr-brand small {
  display: block;
  margin-top: 4px;
  font: 600 5.6px/1 var(--f-mono);
  font-style: normal;
  letter-spacing: .14em;
  color: #4b4842;
}
.pr-deck--left .pr-brand { left: 290px; text-align: right; }
.pr-deck--right .pr-brand { left: 10px; }

/* platter: diecast rim with strobe rows, rubber mat, a pressed record, and a fixed glare */
.pr-platter {
  position: absolute;
  left: 30px;
  top: 180px;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  cursor: grab;
  touch-action: none;
  background:
    radial-gradient(circle, transparent 0 154px, #1a1918 154px, #5d5b57 156px, #8f8c86 159px, #6e6b66 163px, #a9a6a0 167px, #3b3a37 169.5px, transparent 170px),
    #0d0d0e;
  box-shadow: 6px 12px 22px rgba(0, 0, 0, .65), 0 0 0 1px rgba(0, 0, 0, .7);
}
.pr-platter:active { cursor: grabbing; }
.pr-platter:focus-visible { outline: 3px solid var(--focus); outline-offset: 5px; }
.pr-strobe { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.pr-strobe-row {
  fill: none;
  stroke: #fbf6ea;
  stroke-width: 1.9;
  opacity: .82;
  transform-box: view-box;
  transform-origin: 50% 50%;
}
.pr-spin { position: absolute; inset: 15px; border-radius: 50%; rotate: var(--spin); }
.pr-mat {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    repeating-radial-gradient(circle, #171717 0 1.5px, #0b0b0b 1.5px 4px),
    #0e0e0e;
  box-shadow: inset 0 0 0 1px #000, inset 0 0 10px rgba(0, 0, 0, .9);
}
.pr-vinyl {
  position: absolute;
  inset: 7px;
  border-radius: 50%;
  background:
    radial-gradient(circle, transparent 0 52px, #121214 52px 63px, transparent 63px 75px, #1d1d20 75px 76.5px, transparent 76.5px 99px, #1d1d20 99px 100.5px, transparent 100.5px 121px, #1d1d20 121px 122.5px, transparent 122.5px 144.5px, #222226 144.5px 147.2px, #050505 147.2px),
    repeating-radial-gradient(circle, #0b0b0c 0 .9px, #19191b .9px 1.5px, #0e0e0f 1.5px 2.3px);
  box-shadow: 0 0 0 1px #000, 0 3px 8px rgba(0, 0, 0, .75);
}
/* run-out matrix etching: the only asymmetric mark on the black, so spin is always readable */
.pr-vinyl::before {
  content: "SA-0001-A  ·  PRESSED AT HOLLOWAY  ✶";
  position: absolute;
  left: 50%;
  top: calc(50% - 61px);
  translate: -50% 0;
  color: rgba(235, 228, 214, .32);
  font: 500 4.6px/1 var(--f-mono);
  letter-spacing: .08em;
  white-space: nowrap;
}
.pr-vinyl .record-label {
  position: absolute;
  left: calc(50% - 52px);
  top: calc(50% - 52px);
  width: 104px;
  height: 104px;
  border-radius: 50%;
  background: var(--record-art, none) center / cover no-repeat, var(--record-color, #b8432a);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .55), inset 0 0 0 1.5px rgba(255, 255, 255, .08);
}
.pr-vinyl .record-label::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle, transparent 0 7px, rgba(0, 0, 0, .28) 7px 8px, transparent 8.5px);
}
.pr-glare {
  position: absolute;
  inset: 22px;
  border-radius: 50%;
  pointer-events: none;
  mix-blend-mode: screen;
  background: conic-gradient(from 0deg, transparent 0 112deg, rgba(255, 222, 180, .1) 128deg, rgba(255, 236, 205, .22) 135deg, rgba(255, 222, 180, .1) 142deg, transparent 160deg 292deg, rgba(255, 222, 180, .14) 308deg, rgba(255, 240, 214, .3) 315deg, rgba(255, 222, 180, .14) 322deg, transparent 340deg);
  -webkit-mask: radial-gradient(circle, transparent 0 55px, #000 57px);
  mask: radial-gradient(circle, transparent 0 55px, #000 57px);
}
.pr-spindle {
  position: absolute;
  left: calc(50% - 6px);
  top: calc(50% - 6px);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, #b9b6b0 40%, #4f4d49 85%);
  box-shadow: 2px 3px 4px rgba(0, 0, 0, .7);
  pointer-events: none;
}

/* tonearm layer: mirrored for the right unit, which carries no text */
.pr-mirror { position: absolute; inset: 0; pointer-events: none; }
.pr-deck--right .pr-mirror { scale: 1 1; }
.pr-armbase { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pr-strobe-glow { mix-blend-mode: screen; }
.pr-lamp-lens { filter: drop-shadow(0 0 4px #ff7a22); }
.pr-arm {
  position: absolute;
  left: 2px;
  top: 66px;
  width: 320px;
  height: 60px;
  transform-origin: 64px 30px;
  /* geometry: pivot (66,96), 240px effective length, outer groove r146 at 31.7°, run-out r64 at 52.7° */
  rotate: calc(31.7deg + var(--pos) * 21deg);
  transition: rotate .12s linear;
}
.pr-arm-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  /* offsets pre-rotated against the arm so the shadow always falls down-right of the lamp */
  filter: drop-shadow(9px 4px 3px rgba(0, 0, 0, .5));
  transition: filter .22s ease, translate .22s ease;
}
.pr-deck--right .pr-arm-art { filter: drop-shadow(2px 10px 3px rgba(0, 0, 0, .5)); }
.pr-arm:has(.pr-needle:is([data-held]:not([data-held="false"]), [aria-pressed="true"])) .pr-arm-art {
  translate: -1px -5px;
  filter: drop-shadow(20px 10px 7px rgba(0, 0, 0, .32));
}
.pr-deck--right .pr-arm:has(.pr-needle:is([data-held]:not([data-held="false"]), [aria-pressed="true"])) .pr-arm-art {
  filter: drop-shadow(6px 22px 7px rgba(0, 0, 0, .32));
}
.pr-needle {
  left: 276px;
  top: 6px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  pointer-events: auto;
  cursor: grab;
  touch-action: none;
  transition: box-shadow .15s ease;
}
.pr-needle:hover { box-shadow: 0 0 0 1.5px rgba(255, 215, 161, .55), 0 0 18px rgba(255, 196, 120, .25); }
.pr-needle:active { cursor: grabbing; }
.pr-needle .legend {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

/* pitch fader, battle-rotated: horizontal along the back edge, "+" toward the mixer */
.pr-pitch { top: 12px; width: 206px; height: 70px; --pad: 22px; --capw: 22px; }
.pr-deck--left .pr-pitch { left: 184px; }
.pr-deck--right .pr-pitch { left: 184px; }
.pr-pitch .fader-slot {
  left: var(--pad);
  right: var(--pad);
  top: 22px;
  height: 7px;
  border-radius: 4px;
  background: linear-gradient(#050505, #1d1d1d);
  box-shadow: inset 0 1px 2px #000, 0 1px 0 rgba(255, 255, 255, .7);
}
.pr-pitch .fader-scale { left: var(--pad); right: var(--pad); top: 36px; height: 12px; }
.pr-pitch .fader-scale i {
  left: calc(var(--at) * 100%);
  translate: -50% 0;
  color: #34312c;
  font: 600 7.5px/1 var(--f-mono);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .55);
}
.pr-pitch .fader-scale i::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -6px;
  width: 1px;
  height: 4px;
  background: #3e3b36;
}
.pr-detent {
  position: absolute;
  left: calc(50% - 3px);
  top: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #7dff8c;
  box-shadow: 0 0 6px #4dff6a;
  opacity: clamp(.12, calc(1 - max(var(--v) - .5, .5 - var(--v)) * 400), 1);
}
.pr-pitch .fader-cap {
  left: calc(var(--pad) + var(--vv, var(--v)) * (100% - 2 * var(--pad)) - var(--capw) / 2);
  top: 7px;
  width: var(--capw);
  height: 38px;
  border-radius: 4px;
  background: linear-gradient(90deg, #3d3b38, #151413 30%, #0c0c0b 70%, #2c2a28);
  box-shadow: 4px 6px 7px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.pr-pitch .fader-cap i {
  position: absolute;
  left: calc(50% - 1px);
  top: 4px;
  bottom: 4px;
  width: 2px;
  border-radius: 1px;
  background: #f3efe6;
}
.pr-pitch .legend {
  position: absolute;
  left: var(--pad);
  bottom: 6px;
  color: #34312c;
  font: 700 7px/1 var(--f-sans);
  letter-spacing: .2em;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .55);
}
.pr-deck--right .pr-pitch .legend { left: var(--pad); right: auto; }

/* START·STOP: the broad flat key at the near corner, with a pilot lamp */
.pr-start {
  top: 476px;
  width: 64px;
  height: 48px;
  border-radius: 7px;
  background: linear-gradient(160deg, #f1eee8, #a7a49d);
  box-shadow: 5px 8px 10px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(0, 0, 0, .35);
}
.pr-deck--left .pr-start { left: 326px; }
.pr-deck--right .pr-start { left: 326px; }
.pr-start-cap {
  position: absolute;
  inset: 4px;
  border-radius: 5px;
  background: linear-gradient(170deg, #4b4946, #1c1b1a 55%, #121110);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 -2px 3px rgba(0, 0, 0, .6);
  transition: translate .06s ease;
}
.pr-start:active .pr-start-cap { translate: 0 1.5px; box-shadow: inset 0 2px 4px rgba(0, 0, 0, .8); }
.pr-start .legend {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #e9e4da;
  font: 700 7px/1 var(--f-sans);
  letter-spacing: .16em;
}
.pr-start::after {
  content: "";
  position: absolute;
  right: 8px;
  top: 8px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #5a1d14;
}
.pr-start:is([data-on]:not([data-on="false"]), [aria-pressed="true"])::after { background: #ff5a3c; box-shadow: 0 0 6px #ff4a28; }

/* Holloway Two: anodized black face, aluminium-capped knobs, legends shared down the centre */
.pr-mixer { position: absolute; left: 440px; top: 20px; width: 220px; height: 540px; }
.pr-mixer-plate { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(6px 12px 12px rgba(0, 0, 0, .6)); }
.pr-mx-brand {
  position: absolute;
  left: 16px;
  top: 20px;
  color: #efe9dd;
  font: 800 11px/1 var(--f-sans);
  letter-spacing: .2em;
  pointer-events: none;
}
.pr-mx-brand b { color: #e2b56c; }
.pr-mx-brand small { display: block; margin-top: 6px; color: #8f897e; font: 500 5.8px/1 var(--f-mono); letter-spacing: .2em; }
.pr-strip { position: absolute; top: 0; width: 110px; height: 100%; pointer-events: none; }
.pr-strip > * { pointer-events: auto; }
.pr-strip--0 { left: 0; --cx: 50px; }
.pr-strip--1 { left: 110px; --cx: 60px; }
.pr-k { width: 46px; height: 46px; --ks: 36px; --tick: rgba(232, 225, 212, .5); }
.pr-strip .pr-k { left: calc(var(--cx) - 23px); }
.pr-k--high { top: 73px; }
.pr-k--mid { top: 125px; }
.pr-k--low { top: 177px; }
.pr-k--filter { top: 235px; }
.pr-k--master { left: 155px; top: 11px; --ks: 34px; }
.pr-k .legend {
  position: absolute;
  color: #ddd6c9;
  font: 700 7px/1 var(--f-sans);
  letter-spacing: .18em;
}
.pr-strip--0 .pr-k .legend { left: 83px; top: 20px; translate: -50% 0; }
.pr-strip--1 .pr-k .legend { width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.pr-k--master .legend { left: 50%; top: 47px; translate: -50% 0; }
.knob-art--holloway .knob-body,
.knob-art--filter .knob-body {
  background: radial-gradient(circle at 36% 28%, #4b4946, #1b1a19 55%, #0a0a09);
  box-shadow: 4px 7px 8px rgba(0, 0, 0, .6), 0 0 0 1px #000, inset 0 1px 1px rgba(255, 255, 255, .16);
}
.knob-art--holloway .knob-body::before,
.knob-art--filter .knob-body::before {
  background: repeating-conic-gradient(rgba(255, 255, 255, .09) 0 3deg, transparent 3deg 9deg);
  -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 4px), #000 calc(100% - 3.5px));
  mask: radial-gradient(closest-side, transparent calc(100% - 4px), #000 calc(100% - 3.5px));
}
.knob-art--holloway .knob-cap,
.knob-art--filter .knob-cap {
  inset: 17%;
  background:
    radial-gradient(circle, rgba(255, 255, 255, .0) 0 30%, rgba(0, 0, 0, .14) 31% 32%, transparent 33%),
    conic-gradient(from 200deg, #77746e, #f6f3ec 45deg, #9c9992 100deg, #5f5c57 170deg, #d8d5ce 250deg, #77746e 360deg);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .6);
}
.knob-art--holloway .knob-body::after,
.knob-art--filter .knob-body::after {
  inset: 2px calc(50% - 1px) 60% calc(50% - 1px);
  border-radius: 1px;
  background: #fffaf0;
  box-shadow: 0 0 0 .6px rgba(0, 0, 0, .75);
  transform-origin: 50% calc(var(--ks) / 2 - 2px);
}
.knob-art--filter::before,
.knob-art--filter::after {
  position: absolute;
  bottom: -3px;
  color: #a39c90;
  font: 600 5.6px/1 var(--f-mono);
  letter-spacing: .08em;
}
.knob-art--filter::before { content: "LP"; left: 1px; color: #8fb6ff; }
.knob-art--filter::after { content: "HP"; right: 1px; color: #ffbf73; }

.pr-chfader { top: 300px; left: calc(var(--cx) - 22px); width: 44px; height: 150px; --pad: 17px; }
.pr-chfader .fader-slot {
  left: calc(50% - 2.5px);
  top: var(--pad);
  bottom: var(--pad);
  width: 5px;
  border-radius: 3px;
  background: #020202;
  box-shadow: inset 0 1px 2px #000, 1px 1px 0 rgba(255, 255, 255, .12);
}
.pr-chfader .fader-scale { top: var(--pad); bottom: var(--pad); width: 12px; }
.pr-strip--0 .pr-chfader .fader-scale { left: -2px; text-align: left; }
.pr-strip--1 .pr-chfader .fader-scale { right: -2px; text-align: right; }
.pr-chfader .fader-scale i {
  left: 0;
  right: 0;
  bottom: calc(var(--at) * 100%);
  translate: 0 50%;
  color: #9d968a;
  font: 500 6px/1 var(--f-mono);
}
.pr-chfader .fader-cap {
  left: calc(50% - 16px);
  bottom: calc(var(--pad) + var(--v) * (100% - 2 * var(--pad)) - 11px);
  width: 32px;
  height: 22px;
  border-radius: 3px;
  background:
    repeating-linear-gradient(180deg, transparent 0 3px, rgba(0, 0, 0, .25) 3px 4px),
    linear-gradient(180deg, #f8f7f3, #a5a39e 45%, #e6e4df 55%, #6f6d69);
  box-shadow: 5px 8px 8px rgba(0, 0, 0, .55), 0 0 0 1px rgba(0, 0, 0, .6);
}
.pr-chfader .fader-cap i { position: absolute; left: 3px; right: 3px; top: calc(50% - 1px); height: 2px; background: #131210; }
.pr-chfader .legend {
  position: absolute;
  left: 50%;
  bottom: -11px;
  translate: -50% 0;
  color: #e9e2d4;
  font: 700 7px/1 var(--f-sans);
  letter-spacing: .2em;
}
.pr-ladders { position: absolute; left: 94px; top: 306px; width: 32px; height: 136px; pointer-events: none; }
.pr-meter { position: absolute; top: 0; bottom: 0; width: 8px; padding: 1px; border-radius: 2px; background: #050505; box-shadow: 0 0 0 1px rgba(255, 255, 255, .06); }
.pr-meter:first-child { left: 0; }
.pr-meter:nth-child(2) { right: 0; }

.pr-xfader { left: 26px; top: 472px; width: 168px; height: 56px; --pad: 22px; --capw: 20px; }
.pr-xfader .fader-slot {
  left: var(--pad);
  right: var(--pad);
  top: 19px;
  height: 6px;
  border-radius: 3px;
  background: #020202;
  box-shadow: inset 0 1px 2px #000, 0 1px 0 rgba(255, 255, 255, .12);
}
.pr-xfader .fader-scale { left: var(--pad); right: var(--pad); top: 31px; }
.pr-xfader .fader-scale i { left: calc(var(--at) * 100%); translate: -50% 0; color: #b9b2a5; font: 600 7px/1 var(--f-mono); }
.pr-xfader .fader-cap {
  left: calc(var(--pad) + var(--v) * (100% - 2 * var(--pad)) - var(--capw) / 2);
  top: 3px;
  width: var(--capw);
  height: 38px;
  border-radius: 4px;
  background: repeating-linear-gradient(90deg, #191817 0 3px, #2b2927 3px 4px);
  box-shadow: 5px 8px 8px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .2);
}
.pr-xfader .fader-cap i { position: absolute; left: calc(50% - 1px); top: 3px; bottom: 3px; width: 2px; background: #fbf6ea; }
.pr-xfader .legend {
  position: absolute;
  left: 50%;
  bottom: 0;
  translate: -50% 0;
  color: #e9e2d4;
  font: 700 6.5px/1 var(--f-sans);
  letter-spacing: .2em;
}

/* front ledge of the case: sleeve slots, masking-tape titles, the training-wheels index card */
.pr-ledge { position: absolute; left: 0; right: 0; top: 560px; height: 64px; }
.pr-ledge-side { position: absolute; top: 0; width: 440px; height: 100%; }
.pr-ledge-side--0 { left: 0; }
.pr-ledge-side--1 { right: 0; }
.pr-load {
  top: 8px;
  width: 126px;
  height: 48px;
  border-radius: 9px;
  background: linear-gradient(180deg, rgba(0, 0, 0, .5), rgba(0, 0, 0, .2));
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, .8), 0 1px 0 rgba(255, 255, 255, .06);
  transition: background .2s ease;
}
.pr-ledge-side--0 .pr-load { left: 28px; }
.pr-ledge-side--1 .pr-load { left: 286px; }
.pr-load:hover { background: linear-gradient(180deg, rgba(255, 196, 120, .12), rgba(0, 0, 0, .2)); }
.pr-load[data-loading]:not([data-loading="false"]) { animation: pr-pulse 1s ease-in-out infinite; }
.pr-sleeve { position: absolute; top: 1px; width: 46px; height: 46px; pointer-events: none; }
.pr-ledge-side--0 .pr-sleeve { left: 4px; rotate: -4deg; }
.pr-ledge-side--1 .pr-sleeve { right: 4px; rotate: 4deg; }
.pr-sleeve-disc {
  position: absolute;
  top: 3px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: radial-gradient(circle, #c9452c 0 7px, #0c0c0d 7.5px 8.5px, transparent 9px), repeating-radial-gradient(circle, #0b0b0c 0 1px, #1c1c1e 1px 2px);
  box-shadow: 2px 3px 5px rgba(0, 0, 0, .6);
}
.pr-ledge-side--0 .pr-sleeve-disc { left: 20px; }
.pr-ledge-side--1 .pr-sleeve-disc { right: 20px; }
.pr-sleeve-art {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 2px;
  background: var(--record-art, none) center / cover no-repeat, var(--record-color, #c4ae86);
  box-shadow: 3px 4px 6px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(255, 255, 255, .12), inset 0 0 8px rgba(0, 0, 0, .25);
}
.pr-load .legend {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  color: #eadcc0;
  font: 700 9px/1 var(--f-sans);
  letter-spacing: .2em;
}
.pr-ledge-side--0 .pr-load .legend { left: 72px; }
.pr-ledge-side--1 .pr-load .legend { right: 72px; }
.pr-tape {
  position: absolute;
  top: 14px;
  width: 250px;
  height: 34px;
  background:
    repeating-linear-gradient(97deg, rgba(120, 96, 50, .05) 0 2px, transparent 2px 5px),
    linear-gradient(180deg, #efe4c9, #ddd0b0);
  clip-path: polygon(0 6%, 2% 0, 4% 9%, 6% 1%, 94% 0, 96% 8%, 98% 0, 100% 7%, 100% 94%, 98% 100%, 96% 91%, 94% 100%, 6% 100%, 4% 92%, 2% 100%, 0 93%);
  filter: drop-shadow(2px 3px 2px rgba(0, 0, 0, .5));
  opacity: .95;
}
.pr-tape b {
  position: absolute;
  left: 12px;
  top: 6px;
  width: 22px;
  height: 22px;
  border: 2px solid #26211b;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #26211b;
  font: 800 12px/1 var(--f-sans);
}
.pr-tape-text {
  position: absolute;
  top: 21px;
  width: 196px;
  overflow: hidden;
  color: #231e18;
  font: italic 600 15px/1.2 var(--f-serif);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pr-ledge-side--0 .pr-tape { left: 170px; rotate: -1.3deg; }
.pr-ledge-side--0 .pr-tape-text { left: 214px; rotate: -1.3deg; }
.pr-ledge-side--1 .pr-tape { left: 20px; rotate: 1.1deg; }
.pr-ledge-side--1 .pr-tape-text { left: 64px; rotate: 1.1deg; }

.pr-card {
  position: absolute;
  left: 455px;
  top: 3px;
  width: 190px;
  height: 66px;
  rotate: -1.6deg;
  border-radius: 2px;
  background:
    linear-gradient(90deg, transparent 21px, rgba(214, 70, 64, .55) 21px 22px, transparent 22px),
    repeating-linear-gradient(180deg, transparent 0 17px, rgba(86, 136, 205, .32) 17px 18px),
    linear-gradient(180deg, #fffaf0, #f2ead9);
  box-shadow: 4px 8px 12px rgba(0, 0, 0, .5), 0 0 0 .5px rgba(0, 0, 0, .3);
  color: #3a404d;
}
.pr-card-pin {
  position: absolute;
  left: calc(50% - 22px);
  top: -7px;
  width: 44px;
  height: 14px;
  rotate: 5deg;
  background: rgba(238, 228, 200, .78);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
}
.pr-card-head { position: absolute; left: 28px; top: 4px; font: italic 500 11px/1 var(--f-serif); color: #555c6b; }
.pr-card-grid { position: absolute; left: 28px; top: 19px; width: 150px; display: grid; gap: 3px; }
.pr-card-row { display: grid; grid-template-columns: 14px 1fr; align-items: center; height: 14px; }
.pr-card-row b { font: 700 10px/1 var(--f-sans); }
.pr-card-row:first-child { --pen: #2659c4; }
.pr-card-row:last-child { --pen: #c9412a; }
.pr-card-track { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); height: 12px; border: 1px solid rgba(60, 66, 80, .55); }
.pr-card-track i { border-right: 1px solid rgba(60, 66, 80, .35); color: rgba(60, 66, 80, .5); font: 500 5.5px/1 var(--f-mono); padding: 1px 0 0 2px; }
.pr-card-track i:last-of-type { border-right: 0; }
.pr-card-track em {
  position: absolute;
  left: calc(var(--bar) * 100% - 4.5px);
  top: 1px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--pen);
  box-shadow: 0 0 0 1.5px rgba(255, 250, 240, .9);
}
.pr-card-phase { position: absolute; right: 9px; bottom: 5px; font: 600 9px/1 var(--f-mono); color: #3a404d; }
.pr-card-stamp {
  position: absolute;
  right: 8px;
  top: 4px;
  padding: 2px 5px 1px;
  border: 1.5px solid #c8321f;
  border-radius: 3px;
  rotate: -9deg;
  color: #c8321f;
  font: 800 8.5px/1 var(--f-sans);
  letter-spacing: .18em;
  mix-blend-mode: multiply;
  opacity: var(--lock, 0);
}
@keyframes pr-pulse { 50% { background: linear-gradient(180deg, rgba(255, 196, 120, .22), rgba(0, 0, 0, .2)); } }

/* ═════════════ STRATA 2X ═════════════
   Matte charcoal slab under booth haze; cool light from above, LEDs bleed into the plate. */
.st-body {
  --silk: #e9edf5;
  --silk-dim: #8d94a3;
  height: 620px;
  border-radius: 26px;
  background: linear-gradient(180deg, #202228, #121317 60%, #0c0d10);
  box-shadow: 0 46px 80px -24px rgba(0, 0, 0, .85), 0 14px 26px rgba(0, 0, 0, .55), 0 0 0 1px #000, inset 0 1px 0 rgba(255, 255, 255, .1);
  font-family: var(--f-mono);
}
.st-cheek {
  position: absolute;
  top: 10px;
  bottom: 10px;
  width: 14px;
  border-radius: 8px;
  background: repeating-linear-gradient(180deg, #17181c 0 3px, #0a0a0c 3px 6px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04);
  pointer-events: none;
}
.st-cheek--l { left: 3px; }
.st-cheek--r { right: 3px; }
.st-plate {
  position: absolute;
  inset: 8px 16px;
  border-radius: 18px;
  background:
    radial-gradient(70% 40% at 50% -6%, rgba(150, 175, 255, .12), transparent 70%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .016) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, #2b2e34, #202227 55%, #1a1b20);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .13), inset 0 -1px 0 rgba(0, 0, 0, .6), 0 0 0 1px rgba(0, 0, 0, .7);
  pointer-events: none;
}
.st-logo {
  position: absolute;
  left: 50%;
  bottom: 0;
  translate: -50% 0;
  padding: 1px 10px 2px;
  border-radius: 6px 6px 0 0;
  background: #0b0c0f;
  color: var(--silk-dim);
  font: 600 8px/1.2 var(--f-sans);
  letter-spacing: .5em;
  pointer-events: none;
}
.st-logo b { margin-left: .3em; color: var(--silk); }
.st-silk { position: absolute; color: var(--silk); font: 600 7.5px/1 var(--f-sans); letter-spacing: .2em; pointer-events: none; }
.st-silk small { margin-left: 6px; color: var(--silk-dim); font-size: 6.5px; letter-spacing: .12em; }

.st-deck { position: absolute; top: 0; width: 332px; height: 620px; }
.st-deck--left { left: 14px; --deck: #3cc8ff; }
.st-deck--right { left: 754px; --deck: #ff8c3c; }
.st-rail { position: absolute; top: 0; bottom: 0; width: 72px; }
.st-inner { position: absolute; top: 0; bottom: 0; width: 232px; }
.st-deck--left .st-rail { left: 12px; }
.st-deck--left .st-inner { left: 92px; }
.st-deck--right .st-rail { right: 12px; }
.st-deck--right .st-inner { left: 8px; }

.st-badge {
  position: absolute;
  left: 0;
  top: 20px;
  width: 72px;
  display: grid;
  justify-items: center;
  gap: 2px;
  color: var(--silk-dim);
  font: 600 6.5px/1 var(--f-sans);
  letter-spacing: .4em;
  pointer-events: none;
}
.st-badge b { color: var(--deck); font: 700 24px/1 var(--f-sans); letter-spacing: 0; text-shadow: 0 0 12px color-mix(in srgb, var(--deck) 60%, transparent); }

/* rubber keys */
.st-btn {
  border-radius: 7px;
  background: linear-gradient(180deg, #2c2e34, #1c1d21);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), inset 0 -2px 0 rgba(0, 0, 0, .45), 0 2px 0 #08080a, 0 4px 8px rgba(0, 0, 0, .45);
  transition: box-shadow .12s ease, background .12s ease, translate .05s ease;
}
.st-btn:active { translate: 0 1px; box-shadow: inset 0 1px 3px rgba(0, 0, 0, .6), 0 1px 0 #08080a; }
.st-btn .legend { position: absolute; inset: 0; display: grid; place-items: center; color: var(--silk); font: 700 8px/1 var(--f-sans); letter-spacing: .16em; }
.st-btn--sync { left: 0; top: 64px; width: 72px; height: 44px; --lit: var(--deck); }
.st-btn:is([data-on]:not([data-on="false"]), [aria-pressed="true"], [data-active]:not([data-active="false"])) {
  background: linear-gradient(180deg, color-mix(in srgb, var(--lit, #fff) 42%, #23252a), color-mix(in srgb, var(--lit, #fff) 22%, #18191d));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lit, #fff) 80%, transparent), 0 0 18px color-mix(in srgb, var(--lit, #fff) 45%, transparent), 0 2px 0 #08080a;
}
.st-btn:is([data-on]:not([data-on="false"]), [aria-pressed="true"], [data-active]:not([data-active="false"])) .legend { color: #fff; text-shadow: 0 0 8px var(--lit, #fff); }

/* tempo: long, ridged cap, centre detent lamp, legend running up the outside */
.st-tempo { left: 0; top: 122px; width: 72px; height: 318px; --pad: 24px; }
.st-tempo .fader-slot {
  left: calc(50% - 3px);
  top: var(--pad);
  bottom: var(--pad);
  width: 6px;
  border-radius: 3px;
  background: #030304;
  box-shadow: inset 0 1px 3px #000, 0 0 0 1px rgba(255, 255, 255, .05);
}
.st-tempo .fader-scale { top: var(--pad); bottom: var(--pad); width: 22px; }
.st-deck--left .st-tempo .fader-scale { right: 0; text-align: right; }
.st-deck--right .st-tempo .fader-scale { left: 0; }
.st-tempo .fader-scale i { left: 0; right: 0; top: calc(var(--at) * 100%); translate: 0 -50%; color: var(--silk-dim); font: 500 6.5px/1 var(--f-mono); }
.st-detent {
  position: absolute;
  left: calc(50% - 13px);
  top: calc(50% - 1px);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #6dff9a;
  box-shadow: 0 0 6px #3dff7a;
  opacity: clamp(.12, calc(1 - max(var(--v) - .5, .5 - var(--v)) * 400), 1);
}
.st-deck--right .st-detent { left: calc(50% + 9px); }
.st-tempo .fader-cap {
  left: calc(50% - 22px);
  top: calc(var(--pad) + var(--v) * (100% - 2 * var(--pad)) - 13px);
  width: 44px;
  height: 26px;
  border-radius: 4px;
  background: repeating-linear-gradient(180deg, #2a2c31 0 2px, #141518 2px 4px);
  box-shadow: 0 8px 10px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .18), 0 0 0 1px #000;
}
.st-tempo .fader-cap i { position: absolute; left: 4px; right: 4px; top: calc(50% - 1px); height: 2px; background: #f4f6fb; box-shadow: 0 0 4px rgba(255, 255, 255, .6); }
.st-tempo .legend {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  writing-mode: vertical-rl;
  rotate: 180deg;
  color: var(--silk);
  font: 600 7px/1 var(--f-sans);
  letter-spacing: .3em;
}
.st-deck--left .st-tempo .legend { left: 2px; }
.st-deck--right .st-tempo .legend { right: 2px; }

/* CUE above PLAY, ringed in their classic colours */
.st-round {
  left: 5px;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, #34363c, #18191d 70%);
  box-shadow: 0 0 0 3px #0b0b0d, 0 0 0 5px var(--ring-off), 0 6px 12px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .12);
  transition: box-shadow .12s ease;
}
.st-round:active { translate: 0 1px; }
.st-round .legend { position: absolute; inset: 0; display: grid; place-items: center; color: var(--silk); font: 700 10px/1 var(--f-sans); letter-spacing: .14em; }
.st-round--cue { top: 452px; --ring: #ffa13a; --ring-off: #4a3016; }
.st-round--play { top: 528px; --ring: #4dff8d; --ring-off: #173d24; }
.st-round:is([data-on]:not([data-on="false"]), [aria-pressed="true"], [data-held]:not([data-held="false"])) {
  box-shadow: 0 0 0 3px #0b0b0d, 0 0 0 5px var(--ring), 0 0 22px color-mix(in srgb, var(--ring) 55%, transparent), 0 6px 12px rgba(0, 0, 0, .55);
}
.st-round:is([data-on]:not([data-on="false"]), [aria-pressed="true"]) .legend { color: var(--ring); }

/* knobs: soft-touch rubber, white pointer, a bright ring for the bass */
.st-k { width: 46px; height: 46px; --ks: 32px; --tick: rgba(233, 237, 245, .5); }
.st-k .knob-art { inset: 0 0 auto 0; height: 34px; }
.st-k .legend {
  position: absolute;
  left: 50%;
  bottom: 0;
  translate: -50% 0;
  color: var(--silk);
  font: 600 6.8px/1 var(--f-sans);
  letter-spacing: .16em;
}
.knob-art--strata .knob-body {
  background: radial-gradient(circle at 50% 30%, #3a3c42, #1b1c20 62%, #0f1013);
  box-shadow: 0 6px 8px rgba(0, 0, 0, .55), 0 0 0 1px #050506, inset 0 1px 0 rgba(255, 255, 255, .12);
}
.knob-art--strata .knob-body::before {
  background: repeating-conic-gradient(rgba(255, 255, 255, .05) 0 2deg, transparent 2deg 12deg);
}
.knob-art--strata .knob-cap {
  inset: 22%;
  background: radial-gradient(circle at 45% 35%, #2e3036, #16171a);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 0 0 1px rgba(0, 0, 0, .6);
}
.knob-art--strata .knob-body::after {
  inset: 1px calc(50% - 1px) 56% calc(50% - 1px);
  border-radius: 1px;
  background: #f5f7fb;
  box-shadow: 0 0 3px rgba(255, 255, 255, .5);
  transform-origin: 50% calc(var(--ks) / 2 - 1px);
}
.st-k--low { --tick: rgba(255, 196, 92, .75); }
.st-k--filter { --tick: rgba(160, 190, 255, .7); }
.st-k--master { --ks: 36px; width: 48px; height: 50px; }
.st-k--master .knob-art { height: 40px; }
.knob-art--step { --tick-step: 90deg; }
.knob-art--step em {
  position: absolute;
  left: 50%;
  top: 50%;
  color: var(--silk-dim);
  font: 600 6px/1 var(--f-mono);
  font-style: normal;
  transform: translate(-50%, -50%) rotate(calc(-135deg + var(--at) * 270deg)) translateY(-27px) rotate(calc(135deg - var(--at) * 270deg));
}

.st-fx { position: absolute; left: 0; top: 10px; width: 232px; height: 74px; }
.st-fx-title { left: 0; top: 0; }
.st-fx .st-k { top: 20px; }
.st-fx .st-k:nth-of-type(1) { left: 22px; }
.st-fx .st-k:nth-of-type(2) { left: 93px; }
.st-fx .st-k:nth-of-type(3) { left: 164px; }
.st-fx::after {
  content: "";
  position: absolute;
  left: 58px;
  right: 0;
  top: 3px;
  height: 1px;
  background: linear-gradient(90deg, rgba(233, 237, 245, .35), transparent);
}

/* needle search: a capacitive strip; its lit bar follows real playback, not the last touch */
.st-seek { left: 0; top: 86px; width: 232px; height: 44px; --pad: 12px; }
.st-strip-art {
  position: absolute;
  left: 0;
  right: 0;
  top: 10px;
  height: 22px;
  border-radius: 11px;
  background: linear-gradient(180deg, #08090b, #15161a);
  box-shadow: inset 0 1px 3px #000, 0 0 0 1px rgba(255, 255, 255, .07), 0 1px 0 rgba(255, 255, 255, .06);
  overflow: hidden;
  pointer-events: none;
}
.st-strip-ticks {
  position: absolute;
  inset: 0 12px;
  background: repeating-linear-gradient(90deg, rgba(233, 237, 245, .16) 0 1px, transparent 1px calc(100% / 16));
  -webkit-mask: linear-gradient(180deg, transparent 30%, #000 30% 70%, transparent 70%);
  mask: linear-gradient(180deg, transparent 30%, #000 30% 70%, transparent 70%);
}
.st-strip-pos {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: calc(12px + var(--pos) * (100% - 24px) - 2px);
  width: 4px;
  border-radius: 2px;
  background: var(--deck);
  box-shadow: 0 0 10px var(--deck), 0 0 2px #fff;
}
.st-strip-art::before {
  content: "";
  position: absolute;
  left: 12px;
  top: calc(50% - 1px);
  height: 2px;
  width: calc(var(--pos) * (100% - 24px));
  background: color-mix(in srgb, var(--deck) 45%, transparent);
}
.st-seek .legend {
  position: absolute;
  right: 14px;
  top: 16px;
  color: rgba(233, 237, 245, .4);
  font: 600 6px/1 var(--f-sans);
  letter-spacing: .3em;
}

/* jog: LED position ring, knurled rim, brushed plate, OLED centre with the record art */
.st-jog { position: absolute; left: 0; top: 134px; width: 232px; height: 232px; }
.st-jog-led {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    repeating-conic-gradient(rgba(10, 11, 14, .9) 0 1.2deg, transparent 1.2deg 6deg),
    conic-gradient(var(--deck) 0 calc(var(--pos) * 360deg), rgba(255, 255, 255, .07) 0);
  -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 6px), #000 calc(100% - 5.5px), #000 calc(100% - 1px), transparent);
  mask: radial-gradient(closest-side, transparent calc(100% - 6px), #000 calc(100% - 5.5px), #000 calc(100% - 1px), transparent);
  filter: drop-shadow(0 0 5px var(--deck));
  pointer-events: none;
}
.st-jog-wheel {
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  cursor: grab;
  touch-action: none;
  background: #0b0c0e;
  box-shadow: 0 14px 26px rgba(0, 0, 0, .75), 0 0 0 1px #000, 0 0 30px color-mix(in srgb, var(--deck) 14%, transparent);
}
.st-jog-wheel:active { cursor: grabbing; }
.st-jog-wheel:focus-visible { outline: 3px solid var(--focus); outline-offset: 12px; }
.st-jog-knurl {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  rotate: var(--spin);
  background: repeating-conic-gradient(#43464e 0 1.4deg, #121317 1.4deg 3deg);
  -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 13px), #000 calc(100% - 12.5px));
  mask: radial-gradient(closest-side, transparent calc(100% - 13px), #000 calc(100% - 12.5px));
}
.st-jog-wheel::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(200, 215, 255, .22), transparent 40%, rgba(0, 0, 0, .45));
  -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 13px), #000 calc(100% - 12.5px));
  mask: radial-gradient(closest-side, transparent calc(100% - 13px), #000 calc(100% - 12.5px));
  pointer-events: none;
}
.st-jog-plate {
  position: absolute;
  inset: 14px;
  border-radius: 50%;
  background:
    conic-gradient(from 20deg, rgba(255, 255, 255, .0), rgba(220, 230, 255, .16) 40deg, rgba(255, 255, 255, 0) 90deg, rgba(0, 0, 0, .2) 180deg, rgba(220, 230, 255, .12) 220deg, rgba(255, 255, 255, 0) 270deg),
    repeating-radial-gradient(circle, #3a3d44 0 .8px, #2b2e34 .8px 1.8px);
  box-shadow: inset 0 2px 2px rgba(255, 255, 255, .12), inset 0 -3px 6px rgba(0, 0, 0, .55), 0 0 0 1px #000;
}
.st-jog-mark { position: absolute; inset: 14px; border-radius: 50%; rotate: var(--spin); pointer-events: none; }
.st-jog-mark::before {
  content: "";
  position: absolute;
  left: calc(50% - 2px);
  top: 6px;
  width: 4px;
  height: 18px;
  border-radius: 2px;
  background: #e9edf5;
  box-shadow: 0 0 6px rgba(255, 255, 255, .4);
}
.st-jog-display {
  position: absolute;
  left: 62px;
  top: 62px;
  width: 108px;
  height: 108px;
  border-radius: 50%;
  overflow: hidden;
  background: #030304;
  box-shadow: 0 0 0 3px #0b0c0f, 0 0 0 4px rgba(255, 255, 255, .08), inset 0 0 0 1px #000;
  pointer-events: none;
}
.st-jog-art {
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  rotate: var(--spin);
  background: var(--record-art, none) center / cover no-repeat, var(--record-color, #263040);
}
.st-jog-orbit {
  position: absolute;
  inset: 1px;
  border-radius: 50%;
  rotate: var(--spin);
  background: conic-gradient(var(--deck) 0 14deg, transparent 14deg);
  -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
  mask: radial-gradient(closest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
}
.st-jog-time {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 5px 0 12px;
  background: linear-gradient(180deg, transparent, rgba(3, 3, 4, .82) 30%);
  color: #f2f5fb;
  font: 600 12px/1 var(--f-mono);
  text-align: center;
  letter-spacing: .02em;
}

/* pads: rubber with backlight that bleeds onto the plate when lit */
.st-pads { position: absolute; left: 0; top: 376px; width: 232px; height: 200px; }
.st-loopbar { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; height: 40px; }
.st-loopbar .st-btn { position: relative; height: 40px; }
.st-btn--loop { --lit: #a8ff5a; }
.st-btn--exit .legend { color: var(--silk-dim); }
.st-pad-title { position: relative; display: block; margin: 10px 0 6px; }
.st-pad-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
@property --st-glow { syntax: "<number>"; inherits: true; initial-value: 0; }
.st-pad {
  position: relative;
  height: 50px;
  border-radius: 7px;
  --c: #8890a0;
  --st-glow: .25;
  background:
    radial-gradient(120% 90% at 50% 120%, color-mix(in srgb, var(--c) calc(var(--st-glow) * 55%), transparent), transparent 70%),
    linear-gradient(180deg, #2a2c31, #1b1c20);
  box-shadow:
    inset 0 0 0 1.5px color-mix(in srgb, var(--c) calc(18% + var(--st-glow) * 64%), transparent),
    inset 0 1px 0 rgba(255, 255, 255, .08), inset 0 -3px 0 rgba(0, 0, 0, .45),
    0 2px 0 #08080a, 0 4px 8px rgba(0, 0, 0, .5),
    0 0 calc(var(--st-glow) * 22px) color-mix(in srgb, var(--c) 55%, transparent);
  transition: --st-glow .12s ease, translate .05s ease;
}
.st-pad::after {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 4px;
  background: radial-gradient(circle at 50% 30%, rgba(255, 255, 255, .05), transparent 70%);
  pointer-events: none;
}
.st-pad:active { translate: 0 1.5px; --st-glow: 1.25; }
.st-pad .legend {
  position: absolute;
  left: 7px;
  top: 6px;
  color: color-mix(in srgb, var(--c) calc(45% + var(--st-glow) * 44%), #6f7480);
  font: 700 10px/1 var(--f-mono);
}
.st-pad--c0 { --c: #ff4d6d; }
.st-pad--c1 { --c: #ffb020; }
.st-pad--c2 { --c: #2fe0a8; }
.st-pad--c3 { --c: #4f9bff; }
.st-pad--loop { --c: #a8ff5a; }
.st-pad--loop .legend::after { content: " BT"; font-size: 6.5px; letter-spacing: .1em; }
.st-pad--sample { --c: #b874ff; height: 40px; }
.st-pad:is([data-assigned]:not([data-assigned="false"]), [data-active]:not([data-active="false"]), [data-on]:not([data-on="false"]), [aria-pressed="true"]) { --st-glow: 1; }
.st-pad:is([data-assigned]:not([data-assigned="false"])) .legend { color: #fff; }
.st-pad[data-loading]:not([data-loading="false"]) { animation: st-breathe 1.1s ease-in-out infinite; }
@keyframes st-breathe { 50% { --st-glow: .6; } }

/* mixer bay: one recessed panel with the shared screen on top */
.st-mixer { position: absolute; left: 352px; top: 0; width: 396px; height: 620px; }
.st-mixer::before {
  content: "";
  position: absolute;
  inset: 8px 0;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(0, 0, 0, .18), rgba(0, 0, 0, .05));
  box-shadow: inset 1px 0 0 rgba(0, 0, 0, .55), inset -1px 0 0 rgba(0, 0, 0, .55), -1px 0 0 rgba(255, 255, 255, .05), 1px 0 0 rgba(255, 255, 255, .05);
  pointer-events: none;
}
.st-screen {
  position: absolute;
  left: 10px;
  top: 14px;
  width: 376px;
  height: 118px;
  padding: 6px;
  border-radius: 11px;
  background: linear-gradient(180deg, #0d0e11, #050506);
  box-shadow: 0 0 0 1px #000, inset 0 1px 0 rgba(255, 255, 255, .08), 0 0 34px rgba(80, 130, 255, .12);
}
.st-glass {
  position: relative;
  height: 100%;
  overflow: hidden;
  border-radius: 6px;
  background: radial-gradient(120% 140% at 50% 50%, #0b111c, #04060a);
  box-shadow: inset 0 0 0 1px rgba(120, 160, 255, .08);
}
.st-info {
  position: absolute;
  left: 6px;
  right: 6px;
  height: 14px;
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  color: #dfe6f3;
  font: 500 9.5px/1 var(--f-mono);
}
.st-info--0 { top: 3px; --deck: #3cc8ff; }
.st-info--1 { bottom: 3px; --deck: #ff8c3c; }
.st-info b { display: grid; place-items: center; height: 12px; border-radius: 2px; background: var(--deck); color: #05070b; font: 700 8.5px/1 var(--f-sans); }
.st-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-val { display: inline-flex; align-items: baseline; gap: 4px; color: #fff; font-weight: 600; }
.st-val small { color: #7f889a; font-size: 6.5px; letter-spacing: .14em; }
.st-val--rate > span { min-width: 42px; text-align: right; }
.st-wave { position: absolute; left: 0; width: 100%; height: 30px; display: block; }
.st-wave--0 { top: 18px; }
.st-wave--1 { top: 60px; }
.st-phase { position: absolute; left: 0; right: 0; top: 49px; height: 10px; }
.st-phase-grid {
  position: absolute;
  left: 6px;
  top: 1px;
  width: 200px;
  height: 8px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid rgba(110, 255, 160, calc(.14 + var(--lock, 0) * .6));
  box-shadow: 0 0 calc(var(--lock, 0) * 10px) rgba(80, 255, 150, .35);
}
.st-phase-grid i { border-right: 1px solid rgba(233, 237, 245, .1); color: transparent; font-size: 0; }
.st-phase-dot {
  position: absolute;
  left: calc(6px + var(--bar) * 200px - 3px);
  top: 2px;
  width: 6px;
  height: 3px;
  border-radius: 1px;
  background: #3cc8ff;
  box-shadow: 0 0 5px #3cc8ff;
}
.st-phase-dot--b { top: 5px; background: #ff8c3c; box-shadow: 0 0 5px #ff8c3c; }
.st-phase-text { position: absolute; right: 6px; top: 1px; display: inline-flex; gap: 5px; align-items: baseline; color: #e8fff0; font: 600 8px/1 var(--f-mono); }
.st-phase-text small { color: #7f889a; font-size: 6px; letter-spacing: .16em; }
.st-playhead {
  position: absolute;
  left: calc(50% - .75px);
  top: 16px;
  bottom: 16px;
  width: 1.5px;
  background: #fff;
  box-shadow: 0 0 6px rgba(255, 255, 255, .8);
  pointer-events: none;
}
.st-glare { position: absolute; inset: 0; background: linear-gradient(118deg, rgba(255, 255, 255, .07), transparent 38%); pointer-events: none; }

.st-browse { position: absolute; left: 10px; top: 136px; width: 376px; height: 50px; }
.st-btn--load { top: 3px; width: 112px; height: 44px; }
.st-btn--load:first-child { left: 0; --lit: #3cc8ff; }
.st-btn--load:last-child { right: 0; --lit: #ff8c3c; }
.st-btn--load[data-loading]:not([data-loading="false"]) { animation: st-blink .7s steps(2) infinite; }
@keyframes st-blink { 50% { box-shadow: inset 0 0 0 1px var(--lit), 0 0 14px var(--lit); } }
.st-encoder {
  left: 164px;
  top: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: repeating-conic-gradient(#3b3e45 0 3deg, #17181c 3deg 6deg);
  box-shadow: 0 6px 10px rgba(0, 0, 0, .6), 0 0 0 1px #000;
}
.st-encoder-cap {
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  background: radial-gradient(circle at 45% 32%, #3a3d44, #17181c 70%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 0 0 1px #000;
  transition: inset .06s ease;
}
.st-encoder:active .st-encoder-cap { inset: 7px; }
.st-encoder .legend { position: absolute; left: 50%; top: 52px; translate: -50% 0; color: var(--silk); font: 600 6.5px/1 var(--f-sans); letter-spacing: .24em; }

/* channel strips, read top to bottom in signal order: trim, EQ high→low, filter, preview, fader */
.st-strip { position: absolute; top: 192px; width: 88px; height: 420px; pointer-events: none; }
.st-strip > * { pointer-events: auto; }
.st-strip--0 { left: 10px; --deck: #3cc8ff; }
.st-strip--1 { left: 298px; --deck: #ff8c3c; }
.st-strip .st-k { left: 21px; }
.st-strip .st-k:nth-of-type(1) { top: 0; }
.st-strip .st-k:nth-of-type(2) { top: 44px; }
.st-strip .st-k:nth-of-type(3) { top: 88px; }
.st-strip .st-k:nth-of-type(4) { top: 132px; }
.st-strip .st-k:nth-of-type(5) { top: 176px; }
.st-strip::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 2px;
  width: 3px;
  height: 214px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--deck), transparent);
  opacity: .5;
}
.st-btn--preview { left: 6px; top: 222px; width: 76px; height: 40px; --lit: #ffd24a; }
.st-chfader { left: 22px; top: 268px; width: 44px; height: 150px; --pad: 18px; }
.st-chfader .fader-slot {
  left: calc(50% - 2.5px);
  top: var(--pad);
  bottom: var(--pad);
  width: 5px;
  border-radius: 3px;
  background: #030304;
  box-shadow: inset 0 1px 2px #000, 0 0 0 1px rgba(255, 255, 255, .05);
}
.st-chfader .fader-scale { top: var(--pad); bottom: var(--pad); width: 14px; }
.st-strip--0 .st-chfader .fader-scale { left: -6px; text-align: right; }
.st-strip--1 .st-chfader .fader-scale { right: -6px; }
.st-chfader .fader-scale i { left: 0; right: 0; bottom: calc(var(--at) * 100%); translate: 0 50%; color: var(--silk-dim); font: 500 6px/1 var(--f-mono); }
.st-chfader .fader-cap {
  left: calc(50% - 19px);
  bottom: calc(var(--pad) + var(--v) * (100% - 2 * var(--pad)) - 10px);
  width: 38px;
  height: 20px;
  border-radius: 4px;
  background: repeating-linear-gradient(180deg, #2c2e33 0 2px, #16171a 2px 4px);
  box-shadow: 0 8px 10px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .16), 0 0 0 1px #000;
}
.st-chfader .fader-cap i { position: absolute; left: 4px; right: 4px; top: calc(50% - 1px); height: 2px; background: var(--deck); box-shadow: 0 0 5px var(--deck); }
.st-chfader .legend { position: absolute; left: 50%; bottom: 0; translate: -50% 0; color: var(--silk); font: 600 6.5px/1 var(--f-sans); letter-spacing: .2em; }

.st-center { position: absolute; left: 104px; top: 192px; width: 188px; height: 420px; pointer-events: none; }
.st-center > * { pointer-events: auto; }
.st-master { position: absolute; left: 0; top: 0; width: 188px; height: 52px; }
.st-master .st-k:nth-of-type(1) { left: 22px; top: 0; }
.st-master .st-k:nth-of-type(2) { left: 118px; top: 2px; }
.st-rec { position: absolute; left: 6px; top: 58px; width: 176px; height: 40px; }
.st-btn--rec { left: 0; top: 0; width: 78px; height: 40px; --lit: #ff3b3b; }
.st-btn--rec .legend { padding-left: 12px; }
.st-rec-dot {
  position: absolute;
  left: 14px;
  top: calc(50% - 4px);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #5a1616;
}
.st-btn--rec:is([data-on]:not([data-on="false"]), [aria-pressed="true"]) .st-rec-dot { background: #ff3b3b; box-shadow: 0 0 8px #ff3b3b; animation: st-rec 1s steps(2) infinite; }
@keyframes st-rec { 50% { opacity: .35; } }
.st-rec-time {
  position: absolute;
  right: 0;
  top: 4px;
  width: 90px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 5px;
  background: #040507;
  box-shadow: inset 0 1px 3px #000, 0 0 0 1px rgba(255, 255, 255, .06);
  color: #9aa3b5;
  font: 600 13px/1 var(--f-mono);
}
.st-rec:has(.st-btn--rec:is([data-on]:not([data-on="false"]), [aria-pressed="true"])) .st-rec-time { color: #ff6a5a; text-shadow: 0 0 8px rgba(255, 70, 50, .6); }
.st-sampler { position: absolute; left: 4px; top: 104px; width: 180px; height: 98px; }
.st-sampler .st-silk { left: 0; top: 0; }
.st-sampler-grid { position: absolute; left: 0; right: 0; top: 13px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.st-meters { position: absolute; left: 0; top: 210px; width: 188px; height: 140px; pointer-events: none; }
.st-meter { position: absolute; top: 0; bottom: 0; width: 10px; padding: 1px; border-radius: 2px; background: #040506; box-shadow: 0 0 0 1px rgba(255, 255, 255, .06); }
.st-meter:first-child { left: 62px; }
.st-meter:last-child { left: 116px; }
.st-meter-scale {
  position: absolute;
  left: 74px;
  top: 0;
  bottom: 0;
  width: 40px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  color: var(--silk-dim);
  font: 500 6px/1 var(--f-mono);
}
.st-meter-scale i { font-style: normal; }
.st-meter-scale i:first-child { color: #ff6a5a; }
.st-meters::before,
.st-meters::after {
  position: absolute;
  bottom: -9px;
  color: var(--silk);
  font: 600 6px/1 var(--f-sans);
  letter-spacing: .2em;
}
.st-meters::before { content: "A"; left: 64px; }
.st-meters::after { content: "B"; left: 118px; }
.st-xfader { left: 4px; top: 360px; width: 180px; height: 54px; --pad: 24px; }
.st-xfader .fader-slot {
  left: var(--pad);
  right: var(--pad);
  top: 18px;
  height: 6px;
  border-radius: 3px;
  background: #030304;
  box-shadow: inset 0 1px 2px #000, 0 0 0 1px rgba(255, 255, 255, .05);
}
.st-xfader .fader-scale { left: var(--pad); right: var(--pad); top: 32px; }
.st-xfader .fader-scale i { left: calc(var(--at) * 100%); translate: -50% 0; color: var(--silk-dim); font: 600 7px/1 var(--f-mono); }
.st-xfader .fader-cap {
  left: calc(var(--pad) + var(--v) * (100% - 2 * var(--pad)) - 11px);
  top: 2px;
  width: 22px;
  height: 38px;
  border-radius: 4px;
  background: repeating-linear-gradient(90deg, #2c2e33 0 2px, #16171a 2px 4px);
  box-shadow: 0 8px 10px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .16), 0 0 0 1px #000;
}
.st-xfader .fader-cap i { position: absolute; left: calc(50% - 1px); top: 4px; bottom: 4px; width: 2px; background: #f4f6fb; }
.st-xfader .legend { position: absolute; left: 50%; bottom: 0; translate: -50% 0; color: var(--silk); font: 600 6.5px/1 var(--f-sans); letter-spacing: .3em; }

/* ───────────── narrow: the camera pans along the hardware, snapping to each unit ───────────── */
@container (max-width: 857px) {
  .rig-scroller {
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 12px;
    padding: 46px 12px 14px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .3) transparent;
  }
  .rig-body { zoom: 1; margin-inline: 0; }
  .pr-deck, .pr-mixer, .st-deck, .st-mixer { scroll-snap-align: center; }
  .rig-pan-hint {
    display: block;
    margin: 2px 0 0;
    color: rgba(255, 244, 228, .72);
    font: 600 10px/1 var(--f-mono);
    letter-spacing: .24em;
    text-align: center;
    text-transform: uppercase;
    animation: rig-hint 2.4s ease-in-out infinite;
  }
}
@container (max-width: 470px) { .rig-body { zoom: .86; } }
@keyframes rig-hint { 50% { translate: 6px 0; opacity: .5; } }

/* ───────────── rooms from rig-scenes.js: two music-reactive elements each ───────────── */
.rig-scene { position: absolute; inset: 0; display: block; width: 100%; height: 100%; pointer-events: none; }
.rig-scene--pressing { background: #0d0907; }
/* 1: the shelf amp's VU needles, one per deck */
.rig-scene--pressing .r-vu {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  rotate: calc(-46deg + min(var(--m, 0), 1) * 92deg);
  transition: rotate .09s linear;
}
/* 2: dust in the lamp beam catches more light when the room is loud */
.rig-scene--pressing .r-dust { opacity: calc(.35 + (var(--d0-meter, 0) + var(--d1-meter, 0)) * .4); }
.rig-scene--strata { background: #05050a; }
/* 1: moving-head beams through the haze */
.rig-scene--strata .r-beam { mix-blend-mode: screen; opacity: calc(.3 + max(var(--d0-meter, 0), var(--d1-meter, 0)) * .7); }
/* 2: the LED wall behind the floor */
.rig-scene--strata .r-led { opacity: calc(.3 + (var(--d0-meter, 0) + var(--d1-meter, 0)) * .38); }

@media (prefers-reduced-motion: reduce) {
  .rig-scene .r-vu { rotate: 0deg; transition: none; }
  .rig-scene :is(.r-dust, .r-beam, .r-led) { opacity: .6; }
  .pr-arm, .pr-arm-art, .st-pad, .tip { transition: none; }
  .rig-pan-hint, .pr-load, .st-pad, .st-btn, .st-rec-dot { animation: none !important; }
}

/* Review pass: keep the phase teaching card legible without covering the mixer. */
.pr-card{left:427px;top:12px;transform:scale(1.3);transform-origin:50% 0;z-index:3}
.pr-card-stamp{transform:scale(calc(.82 + var(--lock,0)*.18));transition:opacity .18s,transform .18s}
.st-pad[data-hit=true]{--st-glow:1.25}