/* SIDE A play instruments: TEETER + SPLICE/9, and their two rooms.
   Standalone. Live values arrive as CSS variables written by the parent:
   --d0/1-pos, -beat, -meter, --xf, --lock, and --v on every .control. The parent turns
   each [data-spin] record with its own rotate, so --d0/1-rot only gives previews their resting pose. */

/* ═══════════════════════════ TEETER ═══════════════════════════ */
.instrument--teeter {
  --tt-a: #e0583b;
  --tt-b: #2f8c86;
  --tt-ink: #2b2219;
  --tt-cream: #f6ead2;
  --tt-tilt: calc((var(--xf, .5) - .5) * 14deg);
  container-type: inline-size;
  position: relative;
  width: 100%;
  max-width: 1100px;
  margin-inline: auto;
  color: var(--tt-ink);
  font-family: "DM Sans", ui-rounded, system-ui, sans-serif;
  -webkit-tap-highlight-color: transparent;
}
.instrument--teeter *, .instrument--teeter *::before, .instrument--teeter *::after { box-sizing: border-box; }
.instrument--teeter svg { display: block; overflow: visible; }
.instrument--teeter .tt-sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.tt-pan { position: relative; }
.tt-body { position: relative; width: 1060px; height: 624px; margin-inline: auto; }
.tt-snap { position: absolute; top: 0; width: 1px; height: 1px; pointer-events: none; }
.tt-snap--a { left: 0; scroll-snap-align: start; }
.tt-snap--mid { left: 530px; scroll-snap-align: center; }
.tt-snap--b { right: 0; scroll-snap-align: end; }
.tt-hint { display: none; }

.tt-seat--a, .tt-tower--a { --seat: var(--tt-a); --seat-deep: #a8361f; --meter: var(--d0-meter, 0); --rot: var(--d0-rot, 0deg); }
.tt-seat--b, .tt-tower--b { --seat: var(--tt-b); --seat-deep: #1b5d59; --meter: var(--d1-meter, 0); --rot: var(--d1-rot, 0deg); }

/* Sun comes from the window, upper left: highlights sit top-left, shadows fall right. */
.tt-floor-shadow {
  position: absolute; left: 70px; right: 20px; bottom: 2px; height: 46px;
  background: radial-gradient(50% 50% at 50% 50%, rgba(70, 38, 12, .42), rgba(70, 38, 12, .16) 55%, transparent 72%);
  filter: blur(2px);
}
.tt-fulcrum { position: absolute; left: 420px; top: 300px; width: 220px; height: 300px; z-index: 1;
  filter: drop-shadow(14px 6px 10px rgba(60, 25, 5, .3)); }
.tt-burn { font: 600 10.5px "Fraunces", Georgia, serif; letter-spacing: .2em; fill: #5b3414; opacity: .78; }

/* The beam: one rigid body that tips around the brass axle with the crossfader. */
.tt-beam-wrap {
  position: absolute; left: 80px; top: 303px; width: 900px; height: 34px; z-index: 3;
  transform-origin: 450px 17px;
  rotate: var(--tt-tilt);
  transition: rotate 90ms linear;
}
.tt-beam { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(6px 9px 7px rgba(60, 28, 6, .38)); }

.tt-plate {
  position: absolute; top: 5px; width: 172px; height: 24px; z-index: 1;
  display: flex; align-items: center; gap: 6px; padding: 0 6px;
  border-radius: 4px;
  background: linear-gradient(#fdf6e7, #ead9b8);
  box-shadow: inset 0 0 0 1px rgba(90, 50, 20, .35), inset 0 1px 0 #fff, 1px 2px 3px rgba(60, 30, 10, .35);
  font-size: 11px; line-height: 1;
}
.tt-plate--a { left: 206px; color: #8b2e19; }
.tt-plate--b { left: 522px; color: #164f4b; }
.tt-plate__title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; letter-spacing: .01em; }
.tt-plate__time { font: 500 10px/1 "IBM Plex Mono", ui-monospace, monospace; color: var(--tt-ink); opacity: .72; font-variant-numeric: tabular-nums; }
.tt-tack { flex: none; width: 6px; height: 6px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff3c8, #b08431 60%, #6b4a14); box-shadow: 0 .5px 0 rgba(0, 0, 0, .4); }

/* Metronome: two bobs, one per record. Each kicks to the left on its own downbeat, so
   records in step swing as one. Arc size follows the balance (full arc at BOTH). */
.tt-metronome { position: absolute; left: 385px; bottom: 100%; width: 130px; height: 214px; }
.tt-metro-body { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(7px 6px 6px rgba(50, 22, 5, .35)); }
.tt-bell-glow { fill: #ffd98a; opacity: calc(var(--lock, 0) * .95); filter: blur(4px); transition: opacity .25s; }
.tt-arm {
  position: absolute; left: 63px; bottom: 28px; width: 4px; height: 152px;
  transform-origin: 50% 100%;
  border-radius: 2px;
  background: linear-gradient(90deg, #fff3c8, #c09339 45%, #6b4a14);
}
.tt-arm--a { rotate: calc(cos(var(--d0-beat, 0) * 360deg) * -24deg * clamp(.18, (1 - var(--xf, .5)) * 2, 1)); }
.tt-arm--b { rotate: calc(cos(var(--d1-beat, 0) * 360deg) * -24deg * clamp(.18, var(--xf, .5) * 2, 1)); opacity: .96; }
.tt-arm i {
  position: absolute; left: 50%; width: 26px; height: 19px; translate: -50% 0;
  clip-path: polygon(16% 0, 84% 0, 100% 100%, 0 100%);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .45);
}
.tt-arm--a i { top: 34px; background: linear-gradient(90deg, #ff9c80, var(--tt-a) 45%, #8b2e19); }
.tt-arm--b i { top: 66px; background: linear-gradient(90deg, #8fd6cf, var(--tt-b) 45%, #164f4b); }
.tt-pivot { position: absolute; left: 58px; bottom: 21px; width: 14px; height: 14px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff4cf, #c99a45 50%, #5c4012); box-shadow: 0 1px 2px rgba(0, 0, 0, .5); }
.tt-metro-plaque { position: absolute; left: 30px; bottom: 0; width: 70px; height: 18px; }
.tt-plaque-text { font: italic 600 11px "Fraunces", Georgia, serif; fill: #4a320c; letter-spacing: .02em; }

/* Seats ride the beam ends: a saddle with two brass rollers cradles each record. */
.tt-seat { position: absolute; bottom: 100%; width: 256px; height: 258px; }
.tt-seat--a { left: -8px; }
.tt-seat--b { left: 652px; }
.tt-saddle { position: absolute; left: 43px; bottom: 0; width: 170px; height: 46px; filter: drop-shadow(4px 4px 3px rgba(50, 25, 5, .3)); }

/* A chunky toy record: painted rubber rim, real grooves, the shared sleeve art on its label.
   The sheen stays still while the vinyl turns underneath, the way a lit record reads. */
.tt-disc {
  position: absolute; left: 10px; top: 0; width: 236px; height: 236px;
  border-radius: 50%;
  cursor: grab; touch-action: none; outline: none;
  translate: 0 calc(var(--meter) * -3px);
  background:
    radial-gradient(circle closest-side, transparent 0 93%, rgba(255, 255, 255, .3) 95%, transparent 97%),
    linear-gradient(140deg, color-mix(in srgb, var(--seat) 70%, #fff) 0%, var(--seat) 38%, var(--seat-deep) 100%);
  box-shadow:
    0 0 0 1.5px rgba(40, 18, 6, .55),
    10px 14px 18px rgba(50, 24, 5, .36),
    inset -4px -6px 9px rgba(0, 0, 0, .3),
    inset 3px 4px 6px rgba(255, 255, 255, .35);
}
.tt-disc[data-held="true"], .tt-disc:active { cursor: grabbing; }
.tt-disc:focus-visible { box-shadow: 0 0 0 1.5px rgba(40, 18, 6, .55), 0 0 0 5px #fffaf0, 0 0 0 8px var(--seat-deep), 10px 14px 18px rgba(50, 24, 5, .36); }
.tt-vinyl {
  position: absolute; inset: 11px; border-radius: 50%;
  rotate: var(--rot);
  background:
    repeating-radial-gradient(circle, #141416 0 1.1px, #222226 1.5px 2.3px, #18181a 2.7px 3.3px),
    #151517;
  box-shadow: inset 0 0 0 2px #090909, inset 0 0 0 5px #1f1f22, inset 0 0 0 6px #0c0c0d;
}
.tt-grooves {
  position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle closest-side,
    transparent 0 61%, rgba(255, 255, 255, .07) 61.5% 62.3%, transparent 62.8% 74%,
    rgba(255, 255, 255, .06) 74.5% 75.2%, transparent 75.7% 87%,
    rgba(255, 255, 255, .05) 87.5% 88.2%, transparent 88.7%);
}
.tt-label {
  position: absolute; left: 50%; top: 50%; width: 116px; height: 116px; translate: -50% -50%;
  border-radius: 50%;
  background-color: var(--record-color, var(--seat));
  background-image: var(--record-art, none);
  background-size: cover; background-position: center;
  box-shadow: 0 0 0 3px #0b0b0c, 0 0 0 4px rgba(255, 255, 255, .08), inset 0 0 0 1px rgba(255, 255, 255, .22), inset 0 0 14px rgba(0, 0, 0, .22);
}
.tt-sticker {
  position: absolute; left: 50%; top: 9px; translate: -50% 0;
  padding: 3px 6px 2px; border-radius: 3px;
  font: 800 11px/1 "Fraunces", Georgia, serif;
  background: var(--tt-cream); color: var(--seat-deep);
  box-shadow: 0 1px 1px rgba(0, 0, 0, .5);
}
.tt-sheen {
  position: absolute; inset: 11px; border-radius: 50%; pointer-events: none;
  background:
    conic-gradient(from 0deg, transparent 0 118deg, rgba(255, 238, 205, .13) 135deg, transparent 152deg 296deg, rgba(255, 238, 205, .22) 315deg, transparent 334deg),
    radial-gradient(circle at 32% 26%, rgba(255, 244, 220, .12), transparent 46%);
  mix-blend-mode: screen;
}

/* Hub: a clear acrylic dome over the label, so the artwork shows through the play button. */
.tt-hub {
  position: absolute; left: 96px; top: 86px; width: 64px; height: 64px; padding: 0;
  display: grid; place-items: center;
  border: 0; border-radius: 50%; cursor: pointer;
  color: #fffaf0;
  translate: 0 calc(var(--meter) * -3px);
  background: radial-gradient(circle at 34% 28%, rgba(255, 255, 255, .8) 0 6%, rgba(255, 255, 255, .22) 17%, rgba(255, 255, 255, .05) 45%, rgba(25, 12, 4, .2) 74%, rgba(25, 12, 4, .42) 100%);
  box-shadow: 0 0 0 2px rgba(255, 248, 232, .6), 0 0 0 4px rgba(40, 20, 8, .45), 3px 5px 8px rgba(0, 0, 0, .4), inset 0 -5px 9px rgba(0, 0, 0, .3);
  transition: scale .08s ease-out, box-shadow .15s;
}
.tt-hub .ico { grid-area: 1 / 1; width: 26px; height: 26px; fill: currentColor; filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .7)); }
.tt-hub .ico-pause { opacity: 0; }
.tt-hub:active { scale: .94; }
.tt-hub:is([aria-pressed="true"], [data-on="true"]) {
  box-shadow: 0 0 0 2px #fffaf0, 0 0 0 5px var(--seat), 0 0 18px 4px color-mix(in srgb, var(--seat) 55%, transparent), 3px 5px 8px rgba(0, 0, 0, .4), inset 0 -5px 9px rgba(0, 0, 0, .3);
}
.tt-hub:is([aria-pressed="true"], [data-on="true"]) .ico-play { opacity: 0; }
.tt-hub:is([aria-pressed="true"], [data-on="true"]) .ico-pause { opacity: 1; }
.tt-hub[data-loading="true"] { animation: tt-pulse 0.9s ease-in-out infinite; }
.tt-hub:focus-visible { outline: 3px solid #fffaf0; outline-offset: 5px; }
@keyframes tt-pulse { 50% { box-shadow: 0 0 0 2px #fffaf0, 0 0 0 8px color-mix(in srgb, var(--seat) 40%, transparent), 3px 5px 8px rgba(0, 0, 0, .4); } }

/* Block towers stand still under each end, so the controls never move while you mix. */
.tt-tower { position: absolute; top: 368px; width: 216px; height: 232px; z-index: 2; }
.tt-tower--a { left: 92px; --sq: clamp(0, (.115 - var(--xf, .5)) / .115, 1); }
.tt-tower--b { left: 752px; --sq: clamp(0, (var(--xf, .5) - .885) / .115, 1); }
.tt-bumper {
  position: absolute; left: 58px; top: 0; width: 100px; height: 24px;
  transform-origin: 50% 100%;
  scale: calc(1 + var(--sq) * .1) calc(1 - var(--sq) * .34);
  border-radius: 13px 13px 7px 7px;
  background:
    radial-gradient(circle at 30% 25%, rgba(255, 246, 214, .5), transparent 45%),
    radial-gradient(rgba(120, 70, 10, .22) .8px, transparent 1.2px) 0 0 / 4px 4px,
    linear-gradient(#e9b54b, #c48a24);
  box-shadow: inset 0 -3px 4px rgba(90, 50, 5, .35), 2px 3px 4px rgba(50, 25, 5, .3);
  transition: scale 90ms linear;
}
.tt-bumper i { position: absolute; inset: 5px 12px auto; height: 2px; border-radius: 2px; background: rgba(255, 248, 220, .55); }
.tt-block {
  position: absolute; left: 50%; translate: -50% 0;
  border-radius: 9px;
  box-shadow: inset 0 0 0 1px rgba(60, 25, 10, .38), inset 0 -7px 10px rgba(40, 15, 0, .16), 12px 10px 16px -6px rgba(50, 25, 5, .45);
}
.tt-block::before { /* the sunlit top face */
  content: ""; position: absolute; inset: 0 0 auto; height: 10px; border-radius: 9px 9px 2px 2px;
  background: linear-gradient(rgba(255, 252, 240, .55), rgba(255, 252, 240, .18));
  border-bottom: 1px solid rgba(60, 25, 10, .22);
}
.tt-block--top {
  top: 24px; width: 178px; height: 86px;
  background:
    linear-gradient(100deg, rgba(255, 250, 235, .22), transparent 42%, rgba(40, 15, 5, .2)),
    var(--seat);
}
.tt-block--base {
  top: 112px; width: 216px; height: 120px;
  background:
    repeating-linear-gradient(91deg, rgba(120, 70, 30, .09) 0 2px, transparent 2px 11px),
    linear-gradient(100deg, rgba(255, 250, 235, .25), transparent 45%, rgba(60, 25, 5, .18)),
    linear-gradient(#e9c58e, #cf9c5c);
}

/* HOP peg and LOAD slot: turned-maple keys that sink into the painted block. */
.tt-peg, .tt-slot {
  position: absolute; top: 17px; width: 70px; height: 60px; z-index: 1;
  display: grid; justify-items: center; align-content: center; gap: 3px;
  padding: 0; border: 0; border-radius: 13px; cursor: pointer;
  font: 800 10px/1 "DM Sans", ui-rounded, sans-serif; letter-spacing: .16em; text-transform: uppercase;
  color: var(--tt-ink);
  background:
    radial-gradient(circle at 28% 20%, rgba(255, 252, 240, .95) 0 14%, transparent 52%),
    linear-gradient(#f8ecd4, #e0c597);
  box-shadow: 0 5px 0 #a98250, 0 7px 9px rgba(40, 20, 5, .38), inset 0 0 0 1px rgba(90, 50, 20, .3), inset 0 -2px 0 rgba(120, 80, 30, .2);
  transition: translate .07s ease-out, box-shadow .07s ease-out;
}
.tt-peg { left: 14px; }
.tt-slot { right: 14px; }
.tt-peg .ico, .tt-slot .ico { width: 30px; height: 22px; color: var(--seat-deep); }
.tt-peg:active, .tt-slot:active, .tt-peg[data-active="true"] {
  translate: 0 4px;
  box-shadow: 0 1px 0 #a98250, 0 2px 3px rgba(40, 20, 5, .35), inset 0 0 0 1px rgba(90, 50, 20, .3);
}
.tt-slot::before { /* the mouth of the sleeve slot */
  content: ""; position: absolute; left: 12px; right: 12px; top: 6px; height: 3px; border-radius: 2px;
  background: rgba(60, 30, 10, .45); box-shadow: 0 1px 0 rgba(255, 255, 255, .6);
}
.tt-slot[data-loading="true"] .ico { animation: tt-drop .8s ease-in-out infinite; }
@keyframes tt-drop { 50% { translate: 0 3px; opacity: .6; } }
.tt-peg:focus-visible, .tt-slot:focus-visible { outline: 3px solid #fffaf0; outline-offset: 3px; }

/* Sun–Moon dial: painted backplate, turned walnut knob, carved pointer. */
.tt-dial { position: absolute; top: 14px; width: 88px; height: 102px; display: block; }
.tt-tower--a .tt-dial { left: 62px; }
.tt-tower--b .tt-dial { left: 66px; }
.tt-dial .knob-art { position: absolute; left: 0; top: 0; width: 88px; height: 88px; }
.tt-dial__face { width: 100%; height: 100%; filter: drop-shadow(2px 3px 2px rgba(60, 30, 10, .35)); }
.tt-dial__knob {
  position: absolute; left: 50%; top: 50%; width: 50px; height: 50px; margin: -25px 0 0 -25px;
  border-radius: 50%;
  rotate: calc((var(--v, .5) - .5) * 270deg);
  background: radial-gradient(circle at 36% 30%, #c9915e 0 6%, #8a5a35 30%, #5d3a20 70%, #3d2412 100%);
  box-shadow: 0 0 0 2px #2e1a0c, 4px 6px 7px rgba(40, 20, 5, .5), inset 0 -3px 5px rgba(0, 0, 0, .35), inset 0 2px 2px rgba(255, 220, 180, .25);
}
.tt-dial__knob::before { /* lathe rings */
  content: ""; position: absolute; inset: 8px; border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(255, 220, 180, .18), inset 0 0 0 5px rgba(0, 0, 0, .1), inset 0 0 0 6px rgba(255, 220, 180, .12);
}
.tt-dial__knob i { position: absolute; left: 50%; top: 3px; width: 6px; height: 17px; margin-left: -3px; border-radius: 3px;
  background: var(--tt-cream); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .2), 0 0 0 1px rgba(0, 0, 0, .25); }
.tt-dial input {
  position: absolute; left: 0; top: 0; width: 88px; height: 88px; margin: 0; padding: 0;
  opacity: 0; cursor: grab; touch-action: none;
}
.tt-dial:has(input:focus-visible) .knob-art { outline: 3px solid #fffaf0; outline-offset: 2px; border-radius: 50%; }
.tt-engrave {
  position: absolute; left: -10px; right: -10px; top: 91px; text-align: center;
  font: 700 8.5px/1 "DM Sans", sans-serif; letter-spacing: .24em; text-transform: uppercase;
  color: rgba(70, 35, 10, .72); text-shadow: 0 1px 0 rgba(255, 240, 210, .65);
}

/* Bead meter: real post-volume level of this record. */
.tt-meter {
  position: absolute; top: 20px; width: 16px; height: 86px; border-radius: 8px; overflow: hidden;
  background: linear-gradient(90deg, #3b2313, #5a3a22 50%, #3b2313);
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, .55), 0 1px 0 rgba(255, 240, 210, .5);
}
.tt-tower--a .tt-meter { left: 172px; }
.tt-tower--b .tt-meter { left: 28px; }
.tt-meter .deck-meter__fill {
  position: absolute; inset: 3px;
  background: radial-gradient(circle at 40% 35%, #fff6e0 0 14%, var(--seat) 46%, var(--seat-deep) 80%) 0 100% / 10px 10px repeat-y;
  clip-path: inset(calc((1 - var(--meter)) * 100%) 0 0 0 round 5px);
}
.tt-letter {
  position: absolute; top: 22px;
  font: italic 800 56px/1 "Fraunces", Georgia, serif;
  color: var(--seat);
  text-shadow: 1px 1px 0 rgba(255, 240, 210, .55), -1px -1px 0 rgba(60, 20, 5, .4);
}
.tt-tower--a .tt-letter { left: 18px; }
.tt-tower--b .tt-letter { right: 20px; }

/* Balance slate: the crossfader. The peg rides a chalked rail; the beam above obeys it. */
.tt-balance {
  position: absolute; left: 360px; top: 508px; width: 340px; height: 92px; z-index: 4; display: block;
  rotate: -1.2deg;
  filter: drop-shadow(9px 9px 8px rgba(50, 25, 5, .35));
}
.tt-slate { position: absolute; inset: 0; width: 100%; height: 100%; }
.tt-chalk { stroke: #f3efe2; stroke-opacity: .82; stroke-width: 2.2; }
.tt-chalk-text { font: italic 600 15px "Fraunces", Georgia, serif; fill: #f3efe2; letter-spacing: .03em; }
.tt-chalk-text text { transition: opacity .2s; }
.tt-chalk-text text:nth-child(1) { opacity: calc(.42 + .58 * clamp(0, (.5 - var(--xf, .5)) * 3, 1)); }
.tt-chalk-text text:nth-child(2) { opacity: calc(1 - .58 * clamp(0, max(var(--xf, .5) - .5, .5 - var(--xf, .5)) * 3, 1)); }
.tt-chalk-text text:nth-child(3) { opacity: calc(.42 + .58 * clamp(0, (var(--xf, .5) - .5) * 3, 1)); }
.tt-balance::after {
  content: attr(data-label); position: absolute; left: 0; right: 0; bottom: 1px; text-align: center;
  font: 600 8px/1 "Fraunces", Georgia, serif; letter-spacing: .32em; text-transform: uppercase; color: rgba(80, 40, 12, .78);
}
.tt-balance input {
  position: absolute; left: 18px; top: 29px; width: 304px; height: 60px; margin: 0; padding: 0;
  -webkit-appearance: none; appearance: none; background: transparent; cursor: pointer; touch-action: none;
}
.tt-balance input::-webkit-slider-runnable-track { height: 60px; background: transparent; }
.tt-balance input::-moz-range-track { height: 60px; background: transparent; }
.tt-balance input::-webkit-slider-thumb {
  -webkit-appearance: none; width: 26px; height: 42px; margin-top: 9px; border: 0; border-radius: 13px 13px 7px 7px;
  background: radial-gradient(circle at 34% 18%, #fffaf0 0 10%, transparent 40%), linear-gradient(90deg, #f3d39d, #d9a462 55%, #a26a31);
  box-shadow: inset 0 9px 0 -6px rgba(255, 255, 255, .6), inset 0 -4px 0 #8a5526, 3px 4px 5px rgba(0, 0, 0, .45);
}
.tt-balance input::-moz-range-thumb {
  width: 26px; height: 42px; border: 0; border-radius: 13px 13px 7px 7px;
  background: radial-gradient(circle at 34% 18%, #fffaf0 0 10%, transparent 40%), linear-gradient(90deg, #f3d39d, #d9a462 55%, #a26a31);
  box-shadow: inset 0 -4px 0 #8a5526, 3px 4px 5px rgba(0, 0, 0, .45);
}
.tt-balance input:focus-visible { outline: 3px solid #fffaf0; outline-offset: 2px; border-radius: 10px; }

/* Narrower stages: the sculpture scales as one object (targets stay ≥ 44px at .74),
   then below 790px it becomes a three-stop pan: seat A · balance · seat B. */
@container (max-width: 1059px) { .tt-body { zoom: .86; } }
@container (max-width: 911px) { .tt-body { zoom: .74; } }
@container (max-width: 789px) {
  .tt-pan {
    overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scrollbar-width: none;
    touch-action: pan-x pan-y;
  }
  .tt-pan::-webkit-scrollbar { display: none; }
  .tt-hint {
    display: flex; justify-content: center; align-items: center; gap: 10px; margin: 0 auto 6px; width: max-content;
    padding: 6px 12px; border-radius: 99px;
    font: 700 10px/1 "DM Sans", sans-serif; letter-spacing: .14em; text-transform: uppercase;
    color: var(--tt-ink); background: rgba(255, 246, 226, .82); box-shadow: 0 2px 6px rgba(60, 30, 10, .2);
  }
  .tt-hint span { animation: tt-nudge 1.6s ease-in-out infinite; }
  .tt-hint span:last-child { animation-direction: reverse; }
}
@keyframes tt-nudge { 50% { translate: -3px 0; } }

@media (prefers-reduced-motion: reduce) {
  .tt-beam-wrap, .tt-bumper { transition: none; }
  .tt-hint span, .tt-hub, .tt-slot .ico { animation: none !important; }
}

/* ═══════════════════════════ SPLICE/9 ═══════════════════════════ */
/* A low bolted rail. Cyan neon keys from the upper left, warm stall light rims the right. */
.instrument--splice {
  --sp-a: #ffb347;
  --sp-b: #3fe3d2;
  --sp-hot: #ff3d7f;
  --sp-ink: #d6dde5;
  --sp-dim: #8590a0;
  container-type: inline-size;
  position: relative;
  width: 100%;
  max-width: 1100px;
  margin-inline: auto;
  color: var(--sp-ink);
  font-family: "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;
  -webkit-tap-highlight-color: transparent;
}
.instrument--splice *, .instrument--splice *::before, .instrument--splice *::after { box-sizing: border-box; }
.instrument--splice p { margin: 0; }
.instrument--splice svg { display: block; }
.sp-lane--a, .sp-bus--a { --lane: var(--sp-a); --lane-c: var(--sp-a); --meter: var(--d0-meter, 0); --beat: var(--d0-beat, 0); --pos: var(--d0-pos, 0); }
.sp-lane--b, .sp-bus--b { --lane: var(--sp-b); --lane-c: var(--sp-b); --meter: var(--d1-meter, 0); --beat: var(--d1-beat, 0); --pos: var(--d1-pos, 0); }
.sp-mod--join, .sp-mod--out { --lane-c: #eef3f8; }
.sp-hint { display: none; }
.sp-pan { position: relative; }

.sp-body {
  position: relative;
  width: 1100px; margin-inline: auto;
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr) 150px 128px 84px 176px;
  grid-template-rows: 34px 12px 266px 12px 266px 12px 24px;
  column-gap: 8px;
  padding: 10px 26px 12px;
  border-radius: 20px 20px 14px 14px;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .016) 0 1px, transparent 1px 3px),
    radial-gradient(120% 60% at 0% 0%, rgba(80, 220, 255, .1), transparent 55%),
    radial-gradient(80% 60% at 100% 10%, rgba(255, 150, 70, .08), transparent 60%),
    linear-gradient(180deg, #2c323b 0, #1a1d23 5%, #131519 60%, #0c0d10 100%);
  box-shadow:
    inset 0 1px 0 rgba(150, 240, 255, .38),
    inset -1px 0 0 rgba(255, 170, 90, .25),
    inset 0 -3px 0 rgba(0, 0, 0, .65),
    0 0 0 1px #040506,
    0 40px 50px -24px rgba(0, 0, 0, .85),
    0 14px 18px -8px rgba(0, 0, 0, .7);
}
.sp-body::after { /* wet-counter reflection of the rail's underside light */
  content: ""; position: absolute; left: 6%; right: 6%; bottom: -10px; height: 10px; border-radius: 50%;
  background: radial-gradient(50% 100% at 50% 0, rgba(63, 227, 210, .2), transparent 70%);
  filter: blur(3px); pointer-events: none;
}
.sp-cap { position: absolute; top: 44px; bottom: 36px; width: 14px; border-radius: 7px; pointer-events: none;
  background: repeating-linear-gradient(0deg, #0b0c0f 0 2px, #2b3038 2px 4px);
  box-shadow: inset 0 0 0 1px #050607, 0 0 0 1px rgba(255, 255, 255, .05); }
.sp-cap--l { left: 6px; }
.sp-cap--r { right: 6px; }

.sp-head { grid-column: 1 / -1; grid-row: 1; display: flex; align-items: center; gap: 14px; padding: 0 4px 6px; }
.sp-brand { font: 500 11px/1 "IBM Plex Mono", monospace; letter-spacing: .34em; color: var(--sp-dim); }
.sp-brand b { color: #eef3f8; font-weight: 700; letter-spacing: .18em; text-shadow: 0 0 10px rgba(63, 227, 210, .35); margin-right: 4px; }
.sp-vents { flex: 1; height: 10px; border-radius: 3px;
  background: repeating-linear-gradient(90deg, #050607 0 14px, transparent 14px 18px);
  -webkit-mask: linear-gradient(90deg, transparent, #000 8% 92%, transparent); mask: linear-gradient(90deg, transparent, #000 8% 92%, transparent);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .05); opacity: .9; }
.sp-serial { font-size: 8.5px; letter-spacing: .18em; color: #5d6773; }

.sp-bus { position: relative; align-self: center; height: 6px; border-radius: 3px; background: #050607;
  box-shadow: inset 0 1px 2px #000, 0 1px 0 rgba(255, 255, 255, .06); }
.sp-bus--a { grid-column: 1 / 4; grid-row: 2; margin-right: -8px; }
.sp-bus--b { grid-column: 1 / 4; grid-row: 6; margin-right: -8px; }
/* Packets advance one dash per beat; brightness follows the lane's real meter. */
.sp-bus::before {
  content: ""; position: absolute; inset: 1px 0; border-radius: 2px;
  background: repeating-linear-gradient(90deg, var(--lane) 0 10px, transparent 10px 40px);
  background-position-x: calc(mod(var(--beat), 1) * 40px);
  opacity: calc(.22 + var(--meter) * .78);
  box-shadow: 0 0 8px color-mix(in srgb, var(--lane) 45%, transparent);
}
.sp-tag {
  position: absolute; left: -2px; top: 50%; translate: 0 -50%; z-index: 1;
  padding: 2px 7px 2px; border-radius: 3px;
  font: 700 7.5px/1.2 "IBM Plex Mono", monospace; letter-spacing: .16em; color: #0a0b0d;
  background: linear-gradient(180deg, color-mix(in srgb, var(--lane) 65%, #fff), var(--lane) 40%, color-mix(in srgb, var(--lane) 70%, #000));
  box-shadow: 0 1px 2px rgba(0, 0, 0, .6);
}
.sp-seam { grid-column: 1 / 4; grid-row: 4; align-self: center; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(0, 0, 0, .8) 4% 96%, transparent); box-shadow: 0 1px 0 rgba(255, 255, 255, .05); }
.sp-foot {
  grid-column: 1 / -1; grid-row: 7; align-self: end;
  font-size: 9px; letter-spacing: .06em; color: #a5b1be; text-align: center; white-space: nowrap;
}
.sp-foot small { font-size: 7px; color: var(--sp-a); opacity: .7; letter-spacing: .12em; }

.sp-mod {
  --plate: #21252c;
  position: relative; min-width: 0;
  padding: 19px 8px 8px;
  border-radius: 6px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .05), transparent 28%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .014) 0 1px, transparent 1px 3px),
    var(--plate);
  box-shadow:
    inset 0 1px 0 rgba(170, 235, 255, .17),
    inset 0 -1px 0 rgba(0, 0, 0, .6),
    inset 0 0 0 1px rgba(0, 0, 0, .55),
    0 2px 0 #060708,
    0 4px 8px rgba(0, 0, 0, .55);
}
.sp-mod.sp-lane--a { grid-row: 3; }
.sp-mod.sp-lane--b { grid-row: 5; }
.sp-mod--src { grid-column: 1; --plate: #18191d; }
.sp-mod--core { grid-column: 2; --plate: #1c2027; }
.sp-mod--strip { grid-column: 3; --plate: #272b33; }
.sp-mod--send { grid-column: 5; --plate: #241b22; }
.sp-mod--join { grid-column: 4; grid-row: 2 / 7; --plate: #1a1d22; }
.sp-mod--out { grid-column: 6; grid-row: 2 / 7; --plate: #1d1a20; }
.sp-mod--src { background-image: radial-gradient(rgba(255, 255, 255, .05) .7px, transparent 1px), linear-gradient(180deg, rgba(255, 255, 255, .04), transparent 30%); background-size: 4px 4px, auto; }
.sp-mod--strip { background-image: linear-gradient(180deg, rgba(255, 255, 255, .07), transparent 22%), repeating-linear-gradient(0deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 2px); }

.sp-mod__head {
  position: absolute; left: 14px; top: 5px;
  display: flex; align-items: center; gap: 5px;
  font: 600 8.5px/1 "IBM Plex Mono", monospace; letter-spacing: .22em; color: #9aa5b2;
  text-shadow: 0 1px 0 #000;
}
.sp-mod__head b { padding: 1px 3px; border-radius: 2px; font-weight: 700; font-size: 7.5px; letter-spacing: .06em; color: #0c0d10; background: #8d97a3; }
.sp-mod__head em { font-style: normal; font-weight: 700; color: var(--lane); text-shadow: 0 0 6px color-mix(in srgb, var(--lane) 50%, transparent); }
.sp-bolt {
  position: absolute; width: 7px; height: 7px; pointer-events: none;
  clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%);
  background: radial-gradient(circle, #08090b 0 26%, transparent 31%), linear-gradient(135deg, #b4bdc7, #59616b 55%, #2a2e34);
}
.sp-bolt:nth-of-type(1) { top: 4px; right: 4px; }
.sp-bolt:nth-of-type(2) { bottom: 4px; right: 4px; }
.sp-bolt:nth-of-type(3) { bottom: 4px; left: 4px; }
.sp-bolt:nth-of-type(4) { top: 4px; left: 4px; }
.sp-sublegend { font-size: 7.5px; letter-spacing: .24em; color: #6f7a87; text-align: center; }

/* 01 SRC: the shard slot wears the shared sleeve art; manual BPM; four cue memories. */
.sp-mod--src { display: flex; flex-direction: column; gap: 6px; }
.sp-shard {
  display: flex; align-items: center; gap: 7px; height: 58px; padding: 6px; width: 100%;
  border: 0; border-radius: 5px; cursor: pointer; text-align: left; color: var(--sp-ink);
  background: linear-gradient(180deg, #0b0c0e, #15171b);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, .8), inset 0 0 0 1px #000, 0 1px 0 rgba(255, 255, 255, .07);
}
.sp-shard__art {
  flex: none; width: 42px; height: 46px;
  clip-path: polygon(0 0, 78% 0, 100% 16%, 100% 100%, 0 100%);
  background-color: var(--record-color, var(--lane));
  background-image: var(--record-art, none);
  background-size: cover; background-position: center;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25);
}
.sp-shard__txt { display: grid; gap: 4px; font-weight: 700; font-size: 10px; letter-spacing: .16em; }
.sp-shard__txt small { font-size: 7px; font-weight: 500; letter-spacing: .14em; color: var(--lane); text-transform: uppercase; }
.sp-shard:hover .sp-shard__art, .sp-shard:focus-visible .sp-shard__art { translate: 0 -2px; }
.sp-shard[data-loading="true"] .sp-shard__art { animation: sp-blink .5s steps(2) infinite; }
.sp-shard:focus-visible { outline: 2px solid var(--lane); outline-offset: 2px; }
.sp-num { display: grid; gap: 3px; }
.sp-num .sp-legend small { color: var(--lane); font-size: 6.5px; letter-spacing: .1em; }
.sp-num input {
  width: 100%; height: 32px; padding: 0 8px; border: 0; border-radius: 4px;
  font: 600 15px/1 "IBM Plex Mono", monospace; color: var(--lane); text-align: right; font-variant-numeric: tabular-nums;
  background: #04070a; box-shadow: inset 0 0 0 1px #000, inset 0 2px 5px rgba(0, 0, 0, .9), 0 1px 0 rgba(255, 255, 255, .06);
  text-shadow: 0 0 6px color-mix(in srgb, var(--lane) 55%, transparent);
  -moz-appearance: textfield; appearance: textfield;
}
.sp-num input::-webkit-inner-spin-button, .sp-num input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.sp-num input:focus-visible { outline: 2px solid var(--lane); outline-offset: 1px; }
.sp-cues { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }

/* 02 CORE: zoomed wave, seek strip, scratch ribbon, transport, loops. */
.sp-mod--core { display: flex; flex-direction: column; gap: 6px; }
.sp-core__head { position: absolute; left: 96px; right: 16px; top: 4px; display: flex; gap: 8px; align-items: baseline; font-size: 10px; line-height: 12px; }
.sp-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #eef3f8; letter-spacing: .04em; }
.sp-time { color: var(--lane); font-variant-numeric: tabular-nums; }
.sp-wave { position: relative; height: 50px; border-radius: 4px; overflow: hidden; background: #04070a;
  box-shadow: inset 0 0 0 1px #000, 0 1px 0 rgba(255, 255, 255, .07); }
.sp-wave canvas { display: block; width: 100%; height: 100%; }
.sp-scan { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(165deg, rgba(255, 255, 255, .08), transparent 38%), repeating-linear-gradient(0deg, rgba(0, 0, 0, .22) 0 1px, transparent 1px 3px);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .7); }
.sp-crack { position: absolute; right: 0; top: 0; width: 120px; height: 50px; pointer-events: none; }

/* 03 STRIP: trim and EQ (high → mid → low) down the left, filter · audition · level on the right. */
.sp-mod--strip { display: grid; grid-template-columns: 52px 1fr; gap: 4px; }
.sp-strip__eq { display: flex; flex-direction: column; justify-content: space-between; align-items: center; }
.sp-strip__ch { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.sp-level { flex: 1; display: flex; align-items: stretch; gap: 6px; min-height: 0; }
.sp-meter { position: relative; width: 8px; border-radius: 2px; overflow: hidden; background: #050607; margin-block: 6px 16px;
  box-shadow: inset 0 0 0 1px #000, 0 1px 0 rgba(255, 255, 255, .06); }
.sp-meter .deck-meter__fill { position: absolute; inset: 1px;
  background: linear-gradient(0deg, var(--lane) 0 70%, #fff3a8 85%, var(--sp-hot) 96%) 0 0 / 100% 100%;
  -webkit-mask: repeating-linear-gradient(0deg, #000 0 3px, transparent 3px 4px); mask: repeating-linear-gradient(0deg, #000 0 3px, transparent 3px 4px);
  clip-path: inset(calc((1 - var(--meter)) * 100%) 0 0 0); }

/* 04 SEND: oxblood anodised; delay, reverb, echo spacing. */
.sp-mod--send { display: flex; flex-direction: column; justify-content: space-around; align-items: center; padding-top: 22px; }

@keyframes sp-blink { 50% { opacity: .25; } }

/* Knobs: knurled skirt, spun cap, lit indicator and a value arc. The arc grows from the
   minimum on level knobs and from centre on bipolar ones. Only the input takes pointers. */
.sp-knob {
  --k: 40px;
  --a: calc((var(--v, .5) - .5) * 270deg);
  position: relative; display: grid; justify-items: center; align-content: start; gap: 4px;
  width: max(44px, var(--k));
}
.sp-knob--m { --k: 48px; }
.sp-knob--l { --k: 60px; }
.sp-knob .knob-art { position: relative; width: var(--k); height: var(--k); margin-top: 3px; }
.sp-knob__arc {
  position: absolute; inset: -5px; border-radius: 50%;
  background: conic-gradient(from 225deg, var(--lane-c) 0 calc(var(--v, 0) * 270deg), rgba(255, 255, 255, .08) 0 270deg, transparent 0);
  -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));
  filter: drop-shadow(0 0 2px color-mix(in srgb, var(--lane-c) 70%, transparent));
}
.sp-knob--bi .sp-knob__arc {
  background:
    conic-gradient(from min(0deg, var(--a)), var(--lane-c) 0 max(var(--a), calc(var(--a) * -1)), transparent 0),
    conic-gradient(from 225deg, rgba(255, 255, 255, .08) 0 270deg, transparent 0);
}
.sp-knob__skirt, .sp-knob__cap { position: absolute; border-radius: 50%; rotate: var(--a); }
.sp-knob__skirt { inset: 0; background: repeating-conic-gradient(#3b414a 0 5deg, #191c21 5deg 10deg);
  box-shadow: 0 0 0 1px #040506, 0 3px 4px rgba(0, 0, 0, .75); }
.sp-knob__cap { inset: 5px;
  background: radial-gradient(circle at 50% 50%, #3a414b 0 30%, #2a2f37 31% 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), inset 0 -2px 3px rgba(0, 0, 0, .55), 0 0 0 1px rgba(0, 0, 0, .6); }
.sp-knob__cap i { position: absolute; left: 50%; top: 2px; width: 2px; height: 40%; margin-left: -1px; border-radius: 1px;
  background: var(--lane-c); box-shadow: 0 0 5px var(--lane-c); }
.sp-knob .knob-art::after { /* fixed anisotropic glint from the cyan key light */
  content: ""; position: absolute; inset: 5px; border-radius: 50%; pointer-events: none;
  background: conic-gradient(from -45deg, rgba(180, 245, 255, .22), transparent 14% 36%, rgba(255, 190, 120, .1) 50%, transparent 64% 86%, rgba(180, 245, 255, .22));
}
.sp-knob input {
  position: absolute; left: 50%; top: calc(3px + var(--k) / 2);
  width: max(44px, var(--k)); height: max(44px, var(--k)); translate: -50% -50%;
  margin: 0; padding: 0; opacity: 0; cursor: ns-resize; touch-action: none; z-index: 2;
}
.sp-knob:has(input:focus-visible) .knob-art { outline: 2px solid var(--lane-c); outline-offset: 7px; border-radius: 50%; }
.sp-legend { font: 600 8px/1 "IBM Plex Mono", monospace; letter-spacing: .14em; color: #a9b3bf; text-transform: uppercase; white-space: nowrap; text-shadow: 0 1px 0 #000; }
.sp-knob output, .sp-fader output {
  position: absolute; left: 50%; top: -12px; translate: -50% 0; z-index: 3; pointer-events: none;
  padding: 2px 4px; border-radius: 2px; font-size: 8px; line-height: 1; color: var(--lane-c); background: #04070a;
  box-shadow: 0 0 0 1px #000; opacity: 0; transition: opacity .12s; white-space: nowrap;
}
.sp-knob:is(:hover, :focus-within) output, .sp-fader:is(:hover, :focus-within) output { opacity: 1; }
.sp-mark { position: absolute; left: 50%; top: 50%; font: 600 7px/1 "IBM Plex Mono", monospace; color: #8b96a3;
  translate: -50% -50%; transform: rotate(var(--m)) translateY(-29px) rotate(calc(var(--m) * -1)); }

/* Keys and pads. LEDs light from parent state only. */
.sp-btn {
  --led: var(--lane-c, #eef3f8);
  position: relative; min-width: 44px; height: 44px; padding: 0 6px;
  display: inline-grid; place-items: center;
  border: 0; border-radius: 5px; cursor: pointer;
  font: 700 9.5px/1 "IBM Plex Mono", monospace; letter-spacing: .1em; color: #c4ccd6;
  background: linear-gradient(180deg, #363c45, #24282f 55%, #1b1e24);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), inset 0 -2px 0 rgba(0, 0, 0, .45), 0 0 0 1px #07080a, 0 2px 0 #040506, 0 3px 5px rgba(0, 0, 0, .5);
  transition: translate .05s, box-shadow .1s, color .1s, background .1s;
}
.sp-btn::before { content: ""; position: absolute; left: 9px; right: 9px; top: 5px; height: 2px; border-radius: 1px;
  background: color-mix(in srgb, var(--led) 16%, #000); }
.sp-btn:active, .sp-btn:is([data-held="true"], [data-held="1"]) { translate: 0 1px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 0 0 1px #07080a, 0 1px 0 #040506; }
.sp-btn:is([aria-pressed="true"], [data-on="true"], [data-on="1"], [data-active="true"], [data-active="1"], [data-held="true"], [data-held="1"]) {
  color: var(--led); text-shadow: 0 0 6px color-mix(in srgb, var(--led) 70%, transparent);
}
.sp-btn:is([aria-pressed="true"], [data-on="true"], [data-on="1"], [data-active="true"], [data-active="1"], [data-held="true"], [data-held="1"])::before {
  background: var(--led); box-shadow: 0 0 6px var(--led), 0 0 12px color-mix(in srgb, var(--led) 50%, transparent);
}
.sp-btn[data-loading="true"]::before { animation: sp-blink .4s steps(2) infinite; background: var(--led); }
.sp-btn:focus-visible { outline: 2px solid var(--led); outline-offset: 2px; }
.sp-btn .ico { width: 16px; height: 16px; fill: currentColor; grid-area: 1 / 1; }
.sp-btn span { display: inline-grid; place-items: center; }
.sp-btn span > * { grid-area: 1 / 1; }
.sp-btn .ico-pause { opacity: 0; }
.sp-btn:is([aria-pressed="true"], [data-on="true"]) .ico-play { opacity: 0; }
.sp-btn:is([aria-pressed="true"], [data-on="true"]) .ico-pause { opacity: 1; }

.sp-pad { border-radius: 6px; padding: 0;
  background: radial-gradient(circle at 50% 120%, color-mix(in srgb, var(--led) 10%, transparent), transparent 70%), linear-gradient(180deg, #2b3038, #1c2026); }
.sp-pad::before { left: 50%; right: auto; width: 4px; height: 4px; margin-left: -2px; top: 5px; border-radius: 50%; }
.sp-pad b { font-weight: 700; font-size: 11px; }
.sp-pad:is([data-assigned="true"], [data-assigned="1"]) { color: var(--led);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--led) 55%, transparent), inset 0 0 14px color-mix(in srgb, var(--led) 22%, transparent), 0 0 0 1px #07080a, 0 2px 0 #040506; }
.sp-pad:is([aria-pressed="true"], [data-on="true"], [data-on="1"], [data-active="true"], [data-active="1"], [data-held="true"], [data-held="1"]) {
  color: #0b0c0e; text-shadow: none;
  background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--led) 60%, #fff), var(--led) 70%);
  box-shadow: 0 0 0 1px #07080a, 0 0 14px color-mix(in srgb, var(--led) 60%, transparent);
}
.sp-key--cut, .sp-key--rec { --led: var(--sp-hot); }
.sp-key--sync { --led: #eef3f8; }
.sp-pad--shot { --led: #b28cff; height: 40px; }
.sp-pad--exit { font-size: 8.5px; letter-spacing: .06em; }

/* Seek strip: a groove filled to the real position; its 44px hit area overlaps the wave glass. */
.sp-seek { position: relative; height: 22px; display: block; }
.sp-seek__track { position: absolute; left: 0; right: 0; top: 8px; height: 6px; border-radius: 3px; background: #050607;
  box-shadow: inset 0 1px 2px #000, 0 1px 0 rgba(255, 255, 255, .06); overflow: hidden; }
.sp-seek__track i { position: absolute; inset: 0; transform-origin: 0 50%; scale: var(--pos) 1;
  background: linear-gradient(90deg, color-mix(in srgb, var(--lane) 30%, transparent), var(--lane)); }
.sp-seek input {
  position: absolute; left: -6px; right: -6px; top: -16px; width: calc(100% + 12px); height: 44px; margin: 0;
  -webkit-appearance: none; appearance: none; background: transparent; cursor: pointer; z-index: 1;
}
.sp-seek input::-webkit-slider-runnable-track { height: 44px; background: transparent; }
.sp-seek input::-moz-range-track { height: 44px; background: transparent; }
.sp-seek input::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 20px; margin-top: 18px; border: 0; border-radius: 2px;
  background: linear-gradient(90deg, #8b949e, #e9eef3 50%, #8b949e); box-shadow: 0 0 0 1px #000, 0 0 8px var(--lane); }
.sp-seek input::-moz-range-thumb { width: 12px; height: 20px; border: 0; border-radius: 2px; translate: 0 8px;
  background: linear-gradient(90deg, #8b949e, #e9eef3 50%, #8b949e); box-shadow: 0 0 0 1px #000, 0 0 8px var(--lane); }
.sp-seek input:focus-visible { outline: 2px solid var(--lane); outline-offset: -8px; }
.sp-seek output { display: none; }

/* Ribbon: a capacitive tape strip. Its grid moves one cell per beat past the fixed head. */
.sp-ribbon {
  position: relative; height: 44px; border-radius: 6px; overflow: hidden; cursor: ew-resize; touch-action: none; outline: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, .06), transparent 40%, rgba(0, 0, 0, .35)), #0a0d11;
  box-shadow: inset 0 0 0 1px #000, inset 0 2px 6px rgba(0, 0, 0, .8), 0 1px 0 rgba(255, 255, 255, .07);
}
.sp-ribbon__grid { position: absolute; inset: 6px 0;
  background:
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--lane) 55%, transparent) 0 1.5px, transparent 1.5px 48px),
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--lane) 18%, transparent) 0 1px, transparent 1px 12px);
  background-position-x: calc(var(--beat) * -48px);
  -webkit-mask: linear-gradient(90deg, transparent, #000 18% 82%, transparent); mask: linear-gradient(90deg, transparent, #000 18% 82%, transparent);
  opacity: .8; }
.sp-ribbon::after { content: ""; position: absolute; left: 50%; top: 4px; bottom: 4px; width: 2px; margin-left: -1px; border-radius: 1px;
  background: var(--lane); box-shadow: 0 0 8px var(--lane); }
.sp-ribbon__legend { position: absolute; inset: auto 0 3px; text-align: center; font-size: 7px; letter-spacing: .26em; color: #6c7783; pointer-events: none; }
.sp-ribbon:is([data-held="true"], [data-held="1"], :active) { box-shadow: inset 0 0 0 1px var(--lane), inset 0 0 18px color-mix(in srgb, var(--lane) 30%, transparent); }
.sp-ribbon:focus-visible { box-shadow: inset 0 0 0 2px var(--lane), 0 0 0 1px #000; }

.sp-transport { display: flex; align-items: center; gap: 5px; }
.sp-transport .sp-knob { margin-top: -3px; }
.sp-transport .sp-knob .sp-legend { font-size: 6.5px; letter-spacing: .06em; }
.sp-transport .sp-knob .knob-art { width: 30px; height: 30px; }
.sp-transport .sp-knob { --k: 30px; }
.sp-oled {
  flex: 1; min-width: 0; height: 44px; padding: 5px 8px; border-radius: 4px;
  display: grid; grid-template-columns: auto auto 1fr; grid-template-rows: auto 1fr; column-gap: 4px; align-items: baseline;
  background: radial-gradient(120% 90% at 30% 0, rgba(255, 255, 255, .05), transparent 60%), #03060a;
  box-shadow: inset 0 0 0 1px #000, inset 0 2px 5px rgba(0, 0, 0, .9), 0 1px 0 rgba(255, 255, 255, .07);
  color: var(--lane); text-shadow: 0 0 6px color-mix(in srgb, var(--lane) 55%, transparent);
  font-variant-numeric: tabular-nums;
}
.sp-oled b { font-size: 17px; line-height: 1; font-weight: 600; }
.sp-oled small { font-size: 7px; letter-spacing: .14em; opacity: .7; }
.sp-oled > span[data-readout="rate"] { justify-self: end; font-size: 9px; }
.sp-phase { grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; font-size: 7.5px; letter-spacing: .1em; }
.sp-phase i { flex: 1; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .06); position: relative; overflow: hidden; }
.sp-phase i::after { content: ""; position: absolute; inset: 0; transform-origin: 0 50%; scale: mod(var(--beat), 1) 1; background: var(--lane); }
.sp-phase em { font-style: normal; min-width: 4ch; text-align: right; }
.sp-loops { display: flex; align-items: center; gap: 4px; }
.sp-loops .sp-sublegend { writing-mode: vertical-rl; rotate: 180deg; margin-right: 2px; }
.sp-loops .sp-pad { flex: 1; min-width: 0; padding: 0; }

/* Faders: native ranges with machined caps. */
.sp-fader { position: relative; display: block; }
.sp-fader input { -webkit-appearance: none; appearance: none; margin: 0; padding: 0; background: transparent; cursor: pointer; touch-action: none; }
.sp-fader input::-webkit-slider-runnable-track { height: 44px; background: transparent; }
.sp-fader input::-moz-range-track { height: 44px; background: transparent; }
.sp-fader input::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 38px; margin-top: 3px; border: 0; border-radius: 3px; }
.sp-fader input::-moz-range-thumb { width: 20px; height: 38px; border: 0; border-radius: 3px; box-shadow: inset 0 0 0 1px #000, 4px 0 6px rgba(0, 0, 0, .7); }
.sp-fader input:focus-visible { outline: 2px solid var(--lane-c); outline-offset: 2px; border-radius: 4px; }
.sp-fader__slot { position: absolute; border-radius: 2px; background: #030405; box-shadow: inset 0 1px 2px #000, 0 1px 0 rgba(255, 255, 255, .08); }
.sp-fader .sp-legend { position: absolute; }

.sp-fader--v { width: 44px; flex: none; }
.sp-fader--v .sp-fader__slot { left: 50%; width: 4px; margin-left: -2px; top: 6px; bottom: 18px; }
.sp-fader--v input { position: absolute; left: 50%; top: calc(50% - 6px); width: var(--len, 100px); height: 44px;
  translate: -50% -50%; rotate: -90deg; }
.sp-fader--v .sp-legend { left: 0; right: 0; bottom: 2px; text-align: center; }
.sp-level { --len: 102px; }
.sp-fader input::-webkit-slider-thumb {
  background: linear-gradient(90deg, transparent 0 9px, var(--lane-c) 9px 11px, transparent 11px), linear-gradient(90deg, #4a525d, #c9d1da 22%, #6b7480 50%, #c9d1da 78%, #4a525d);
  box-shadow: inset 0 0 0 1px #000, 4px 0 6px rgba(0, 0, 0, .7), 0 0 6px color-mix(in srgb, var(--lane-c) 40%, transparent);
}
.sp-fader input::-moz-range-thumb {
  background: linear-gradient(90deg, transparent 0 9px, var(--lane-c) 9px 11px, transparent 11px), linear-gradient(90deg, #4a525d, #c9d1da 22%, #6b7480 50%, #c9d1da 78%, #4a525d);
}

.sp-key { min-width: 44px; }
.sp-transport .sp-key { flex: none; width: 46px; }
.sp-key--pfl { width: 58px; height: 40px; font-size: 9px; }

/* 05 JOIN: lane A's trace drops from above, lane B's rises from below, both into the crossfader. */
.sp-mod--join { padding: 0; }
.sp-merge { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.sp-merge path { fill: none; vector-effect: non-scaling-stroke; }
.sp-merge__bed { stroke: #050607; stroke-width: 6; stroke-linecap: round; }
.sp-merge__a, .sp-merge__b { stroke-width: 2; stroke-dasharray: 10 30; stroke-linecap: round; }
.sp-merge__a { stroke: var(--sp-a); stroke-dashoffset: calc(mod(var(--d0-beat, 0), 1) * -40px); opacity: calc(.25 + var(--d0-meter, 0) * .75); }
.sp-merge__b { stroke: var(--sp-b); stroke-dashoffset: calc(mod(var(--d1-beat, 0), 1) * -40px); opacity: calc(.25 + var(--d1-meter, 0) * .75); }
.sp-mod--join .sp-mod__head { top: 22px; }
.sp-mod--join .sp-key--cut { position: absolute; left: 50%; translate: -50% 0; width: 100px; height: 54px; font-size: 10px; letter-spacing: .14em; }
.sp-mod--join .sp-key--cut:active { translate: -50% 1px; }
.sp-mod--join .sp-key--cut.sp-lane--a { top: 118px; }
.sp-mod--join .sp-key--cut.sp-lane--b { top: 396px; }
.sp-key--cut::after { content: ""; position: absolute; inset: auto 10px 6px; height: 2px; border-radius: 1px; background: var(--lane); opacity: .6; }
.sp-lock {
  position: absolute; left: 0; right: 0; top: 214px; display: flex; justify-content: center; align-items: center; gap: 6px;
  font-size: 7.5px; letter-spacing: .24em; color: #7c8794;
}
.sp-lock i { width: 7px; height: 7px; border-radius: 50%; background: #0e2a1d;
  box-shadow: inset 0 0 0 1px #000, 0 0 calc(var(--lock, 0) * 10px) rgba(110, 255, 170, calc(var(--lock, 0) * .9));
  background: color-mix(in srgb, #6effaa calc(var(--lock, 0) * 100%), #0e2a1d); }
.sp-fader--x { position: absolute; left: 6px; right: 6px; top: 236px; height: 92px;
  border-radius: 6px; background: linear-gradient(180deg, #121418, #191c21); box-shadow: inset 0 0 0 1px #000, 0 1px 0 rgba(255, 255, 255, .06); }
.sp-fader--x .sp-fader__slot { left: 12px; right: 12px; top: 46px; height: 4px; }
.sp-fader--x .sp-fader__slot b { position: absolute; top: -26px; font-size: 10px; font-weight: 700; }
.sp-fader--x .sp-fader__slot b:first-child { left: -4px; color: var(--sp-a); }
.sp-fader--x .sp-fader__slot b:last-child { right: -4px; color: var(--sp-b); }
.sp-fader--x input { position: absolute; left: 4px; right: 4px; top: 26px; width: calc(100% - 8px); height: 44px; }
.sp-fader--x .sp-legend { left: 0; right: 0; bottom: 6px; text-align: center; }
.sp-fader--x::before { /* centre detent tick */
  content: ""; position: absolute; left: 50%; top: 34px; width: 1px; height: 28px; background: rgba(255, 255, 255, .18); }
.sp-fader--x output { top: 4px; }

/* 06 OUT: master, burn, audition blend, browse, eight one-shots. */
.sp-mod--out { display: flex; flex-direction: column; align-items: stretch; justify-content: space-between; gap: 8px; padding: 26px 10px 12px; }
.sp-mod--out::before { /* the trunk arriving from JOIN */
  content: ""; position: absolute; left: -9px; top: 50%; width: 12px; height: 4px; margin-top: -2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--sp-a), var(--sp-b)); box-shadow: 0 0 8px rgba(255, 255, 255, .25);
  opacity: calc(.3 + max(var(--d0-meter, 0), var(--d1-meter, 0)) * .7); }
.sp-mod--out .sp-knob--l { align-self: center; }
.sp-burn { display: flex; align-items: center; gap: 8px; }
.sp-key--rec { flex: none; width: 76px; }
.sp-key--rec span { display: inline-flex; gap: 6px; align-items: center; }
.sp-key--rec i { width: 8px; height: 8px; border-radius: 50%; background: #4a1024; box-shadow: inset 0 0 0 1px #000; }
.sp-key--rec:is([aria-pressed="true"], [data-on="true"]) i { background: var(--sp-hot); box-shadow: 0 0 8px var(--sp-hot); animation: sp-blink 1s steps(2) infinite; }
.sp-rectime { flex: 1; height: 30px; display: grid; place-items: center; border-radius: 3px; font-size: 12px; color: var(--sp-hot);
  background: #04070a; box-shadow: inset 0 0 0 1px #000, inset 0 2px 4px rgba(0, 0, 0, .9); font-variant-numeric: tabular-nums;
  text-shadow: 0 0 6px rgba(255, 61, 127, .5); }
.sp-audition { position: relative; display: flex; align-items: center; justify-content: space-between; padding: 6px 6px 4px; border-radius: 5px;
  background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .025) 0 6px, transparent 6px 12px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
.sp-audition .sp-knob { --lane-c: #9ad7ff; }
.sp-shrink { padding: 4px 6px; border-radius: 3px; font-size: 7px; font-weight: 700; letter-spacing: .14em; line-height: 1.3; color: #111;
  background: linear-gradient(180deg, #e8eef3, #b3bcc5 45%, #8c96a1); box-shadow: 0 1px 2px rgba(0, 0, 0, .6); max-width: 64px; text-align: center; }
.sp-key--browse { width: 100%; height: 40px; }
.sp-shotbank { display: grid; gap: 5px; }
.sp-shots { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }

/* Mouse users on a slightly narrow stage get the whole rail at 90%. Touch and small
   stages follow the signal: the rail pans left to right and snaps module by module. */
@container (max-width: 1099px) {
  .sp-pan {
    overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: 18px; scrollbar-width: none;
    touch-action: pan-x pan-y; padding-bottom: 16px;
  }
  .sp-pan::-webkit-scrollbar { display: none; }
  .sp-mod, .sp-head { scroll-snap-align: start; }
  .sp-hint {
    display: block; width: max-content; margin: 0 auto 6px; padding: 5px 10px; border-radius: 3px;
    font: 600 9px/1 "IBM Plex Mono", monospace; letter-spacing: .2em; color: #0a0b0d;
    background: linear-gradient(90deg, var(--sp-a), var(--sp-b));
    box-shadow: 0 0 12px rgba(63, 227, 210, .3);
  }
}
@media (pointer: fine) {
  @container (min-width: 990px) and (max-width: 1099px) {
    .sp-body { zoom: .9; }
    .sp-pan { overflow: visible; scroll-snap-type: none; padding-bottom: 0; }
    .sp-hint { display: none; }
  }
}

@media (prefers-reduced-motion: reduce) {
  .sp-bus::before, .sp-ribbon__grid { background-position-x: 0; }
  .sp-merge__a, .sp-merge__b { stroke-dashoffset: 0; }
  .sp-btn, .sp-key--rec i, .sp-shard__art { animation: none !important; transition: none; }
}

/* ═══════════════════════════ ROOMS ═══════════════════════════ */
.scene--teeter, .scene--splice { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.scene--teeter .sct-cone { transform-box: fill-box; }

/* Saturday Floor. Reactive: dust in the sunbeam, and the toy speaker's cone. */
.scene--teeter .sct-beam { mix-blend-mode: screen; }
.scene--teeter .sct-sunpatch { animation: sct-drift 48s ease-in-out infinite alternate; transform-origin: center; }
.scene--teeter .sct-motes { opacity: calc(.22 + max(var(--d0-meter, 0), var(--d1-meter, 0)) * .65); animation: sct-float 14s ease-in-out infinite alternate; }
.scene--teeter .sct-cone { transform-origin: center; scale: calc(1 + max(var(--d0-meter, 0), var(--d1-meter, 0)) * .09); }
.scene--teeter .sct-block-glyph { font-family: "Fraunces", Georgia, serif; font-weight: 800; fill: #fff7e6; }
.scene--teeter .sct-poster { font: 800 26px "Fraunces", Georgia, serif; letter-spacing: .14em; fill: #2b2219; }
.scene--teeter .sct-poster--small { font: italic 500 14px "Fraunces", Georgia, serif; letter-spacing: .08em; fill: #f6ead2; }
@keyframes sct-drift { from { translate: -18px 0; } to { translate: 26px -4px; } }
@keyframes sct-float { from { translate: 0 0; } to { translate: 10px -16px; } }

/* Under the Line. Reactive: the NOODLES neon and its puddle reflection. The train runs
   a 31 s loop (about 16 bars at 124 BPM); it isn't locked to the music. */
.scene--splice .scs-neon, .scene--splice .scs-puddle { opacity: calc(.55 + max(var(--d0-meter, 0), var(--d1-meter, 0)) * .45); }
.scene--splice .scs-neon-text { font: 800 50px "DM Sans", system-ui, sans-serif; letter-spacing: .14em; fill: #ff3d7f; }
.scene--splice .scs-neon-core { fill: #ff7aa6; stroke: #ffe3ee; stroke-width: 1.2; }
.scene--splice .scs-neon-reflect { opacity: .5; }
.scene--splice .scs-sign-v { font: 700 26px "IBM Plex Mono", monospace; fill: #3fe3d2; }
.scene--splice .scs-sign-v--hot { fill: #ff3d7f; }
.scene--splice .scs-sign-small { font: 700 18px "IBM Plex Mono", monospace; fill: #ffb347; letter-spacing: .1em; }
.scene--splice .scs-train { translate: 1700px 0; animation: scs-train 31s linear infinite; }
.scene--splice .scs-blink { animation: sp-blink 2.4s steps(2) infinite; }
.scene--splice .scs-rain-far { animation: scs-rain-far .55s linear infinite; }
.scene--splice .scs-rain-near { animation: scs-rain-near .42s linear infinite; }
.scene--splice .scs-steam { animation: scs-steam 5s ease-in-out infinite; }
.scene--splice .scs-steam--1 { animation-delay: -1.7s; }
.scene--splice .scs-steam--2 { animation-delay: -3.3s; }
@keyframes scs-train { 0%, 66% { translate: 1700px 0; } 100% { translate: -1900px 0; } }
@keyframes scs-rain-far { from { translate: 0 0; } to { translate: 0 240px; } }
@keyframes scs-rain-near { from { translate: 0 0; } to { translate: 0 400px; } }
@keyframes scs-steam { 0% { translate: 0 10px; opacity: 0; } 30% { opacity: .2; } 100% { translate: 6px -40px; opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .scene--teeter *, .scene--splice * { animation: none !important; }
  .scene--splice .scs-train { translate: -1900px 0; }
}

.sp-mod:focus-within .sp-mod__head{color:var(--lane,#b8ebef)}
.sp-mod:focus-within{outline:1px solid color-mix(in srgb,var(--lane,#b8ebef) 45%,transparent);outline-offset:2px}