/* RED FEED – the turntable: plinth, platter, tonearm, controls, now-playing card + the sticky mini player.
   Performance rule: anything that moves is its own layer (will-change) and only ever gets a new transform
   or opacity, so spinning, swinging and seeking never repaint. Heavy textures are painted once. */
.deck { position: relative; height: 230vh; background: #120c09; color: var(--cream); }
.stage { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(24px, 4.5vw, 72px); align-items: center;
  padding-inline: max(16px, (100% - 1180px) / 2); overflow: hidden; isolation: isolate; }
.glow { position: absolute; z-index: -1; left: calc(max(16px, (100% - 1180px) / 2) - 280px); top: 50%; width: min(1100px, 150vw); aspect-ratio: 1; translate: 0 -50%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(215, 38, 46, .5), rgba(215, 38, 46, .14) 48%, transparent 72%); opacity: .22; will-change: opacity; }

/* plinth: smoked graphite with a soft top light, a slim control strip and the model plate */
.tt { --s: min(60svh, 36vw, 470px); --cue-h: max(44px, calc(var(--s) * .14)); position: relative; width: calc(var(--s) * 1.4); height: calc(var(--s) * 1.32);
  border-radius: calc(var(--s) * .045); user-select: none; -webkit-user-select: none;
  background: radial-gradient(130% 90% at 18% 0%, #3a3532, #221f1d 50%, #171514);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09), inset 0 -2px 0 rgba(0,0,0,.45), 0 0 0 1px #0a0908, 0 40px 80px -24px rgba(0,0,0,.8), 0 18px 30px rgba(0,0,0,.35); }
.tt::before { content: "RF-1200 · DIRECT DRIVE"; position: absolute; left: calc(var(--s) * .045); top: calc(var(--s) * .035); font: 600 max(7px, calc(var(--s) * .02))/1 "DM Mono", monospace; letter-spacing: .18em; color: rgba(239, 230, 210, .32); }
.tt::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--s) * .29); border-radius: 0 0 calc(var(--s) * .045) calc(var(--s) * .045);
  background: linear-gradient(90deg, transparent 6%, rgba(215, 38, 46, .75) 30% 70%, transparent 94%) top / 100% 1px no-repeat,
    repeating-linear-gradient(90deg, rgba(255,255,255,.018) 0 1px, transparent 1px 3px), linear-gradient(#1b1918, #121110);
  box-shadow: inset 0 2px 0 rgba(0,0,0,.6); }

/* platter: machined aluminium rim with two strobe rows (light doesn't turn with it, so the rim is static) */
.platter { --rim: max(6px, calc(var(--s) * .022)); position: absolute; left: calc(var(--s) * .1); top: calc(var(--s) * .065); width: calc(var(--s) * .92); aspect-ratio: 1; border-radius: 50%;
  touch-action: pan-y; cursor: grab; }
.platter::before { content: ""; position: absolute; inset: calc(var(--rim) * -1); border-radius: 50%;
  background: radial-gradient(closest-side, #090909 calc(100% - var(--rim) - 1px), transparent calc(100% - var(--rim))),
    conic-gradient(from 20deg, #6f6f6f, #e9e9e9 8%, #8a8a8a 18%, #5d5d5d 30%, #dadada 42%, #7a7a7a 52%, #f0f0f0 63%, #808080 75%, #5a5a5a 86%, #cacaca 94%, #6f6f6f);
  box-shadow: 0 0 0 1px #0b0b0b, 0 16px 30px rgba(0,0,0,.6); }
.platter.grab { cursor: grabbing; }
.strobe { --dot: rgba(30, 30, 30, .75); position: absolute; border-radius: 50%; pointer-events: none; will-change: transform; }
.s33 { inset: calc(var(--rim) * -1); background: repeating-conic-gradient(var(--dot) 0 1.2deg, transparent 1.2deg 3.6deg);
  -webkit-mask: radial-gradient(closest-side, transparent calc(100% - var(--rim) * .45), #000 calc(100% - var(--rim) * .45 + .5px)); mask: radial-gradient(closest-side, transparent calc(100% - var(--rim) * .45), #000 calc(100% - var(--rim) * .45 + .5px)); }
.s45 { inset: calc(var(--rim) * -.55); background: repeating-conic-gradient(var(--dot) 0 1.6deg, transparent 1.6deg 4.8deg);
  -webkit-mask: radial-gradient(closest-side, transparent calc(100% - var(--rim) * .4), #000 calc(100% - var(--rim) * .4 + .5px)); mask: radial-gradient(closest-side, transparent calc(100% - var(--rim) * .4), #000 calc(100% - var(--rim) * .4 + .5px)); }
.motor .strobe { --dot: rgba(255, 70, 50, .95); }

/* the record: painted once on a canvas (one per side), turned by transform only; the flip is a 2D squash */
.disc { position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 2px 6px rgba(0,0,0,.6); will-change: transform; }
.scr { position: absolute; inset: 0; border-radius: 50%; will-change: transform; }
.face { position: absolute; inset: 0; border-radius: 50%; }
.scr.painted .face { display: none; }
.rec { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; }
.platter .lbl { gap: calc(var(--s) * .06); } /* no-JS label: title above the spindle, side below it */
.platter .sheen { -webkit-mask: radial-gradient(closest-side, transparent 33.5%, #000 34.5%); mask: radial-gradient(closest-side, transparent 33.5%, #000 34.5%);
  background: conic-gradient(from 215deg, transparent 0 3%, rgba(255,255,255,.17) 8.5%, transparent 14% 50%, rgba(255,255,255,.11) 57.5%, transparent 63%),
    radial-gradient(closest-side, transparent 60%, rgba(255,255,255,.035) 78%, transparent 97%); }
.spindle { position: absolute; z-index: 2; left: 50%; top: 50%; width: 3.2%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, #a5a5a5 55%, #505050); box-shadow: 0 1px 3px rgba(0,0,0,.7); }

/* strobe light: a little pop-up lamp in the corner that lights the dots red while the motor runs */
.lamp { position: absolute; left: calc(var(--s) * .035); top: calc(var(--s) * .9); width: calc(var(--s) * .065); min-width: 12px; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #5a2620, #200b08 70%); box-shadow: inset 0 2px 3px rgba(0,0,0,.7), 0 0 0 2px #0b0a09, 0 0 0 3px #3a3633; }
.lamp::after { content: ""; position: absolute; inset: -60%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 70, 50, .55), transparent); opacity: 0; transition: opacity .4s; }
.motor .lamp { background: radial-gradient(circle at 40% 35%, #ffd0c8, #ff3b2f 50%, #7a0d08); }
.motor .lamp::after { opacity: 1; }
.rest { position: absolute; left: calc(var(--s) * 1.123); top: calc(var(--s) * .585); width: calc(var(--s) * .05); height: calc(var(--s) * .04); border-radius: 4px;
  background: linear-gradient(#3a3633, #1a1817); box-shadow: 0 0 0 1px #0a0908, 0 4px 8px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.12); }
.rest::after { content: ""; position: absolute; left: 25%; right: 25%; top: 22%; height: 34%; border-radius: 0 0 6px 6px; background: #0c0b0a; }

/* tonearm: an SVG drawn once; the arm and its shadow are separate layers that only rotate.
   Lifting the needle just slides the shadow further away (light comes from the top left). */
.arm { position: absolute; z-index: 3; left: calc(var(--s) * 1.18); top: calc(var(--s) * .145); width: 0; height: 0; }
.arm .base { position: absolute; left: calc(var(--s) * -.085); top: calc(var(--s) * -.085); width: calc(var(--s) * .17); aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, #121212 0 33%, #3b3b3b 34% 36%, transparent 37%),
    conic-gradient(from 30deg, #8a8a8a, #eeeeee 12%, #7d7d7d 28%, #d0d0d0 45%, #6e6e6e 62%, #e7e7e7 78%, #8a8a8a);
  box-shadow: 0 0 0 1px #0b0b0b, 0 10px 18px rgba(0,0,0,.55); }
.arm .base::after { content: ""; position: absolute; right: -6%; bottom: -2%; width: 30%; aspect-ratio: 1; border-radius: 50%; /* anti-skate dial */
  background: radial-gradient(circle at 40% 35%, #f2f2f2, #8c8c8c 70%); box-shadow: 0 0 0 1px #0b0b0b, 0 3px 6px rgba(0,0,0,.5); }
.rod, .arm-sh { position: absolute; left: 0; top: 0; width: 0; height: 0; transform: rotate(4deg); will-change: transform; }
.rod svg, .arm-sh svg { position: absolute; left: calc(var(--s) * -.14); top: calc(var(--s) * -.22); width: calc(var(--s) * .28); height: calc(var(--s) * 1.12); max-width: none; overflow: visible; }
.rod { touch-action: none; }
.rod svg { pointer-events: none; }
.rod svg :is(rect, circle, path) { pointer-events: visiblePainted; cursor: grab; }
.rod .grip { pointer-events: stroke; }
.arm.grab .rod svg * { cursor: grabbing; }
.arm-sh { translate: calc(var(--s) * .014) calc(var(--s) * .02); opacity: .7; transition: translate .45s var(--ease), opacity .45s; }
.arm-sh svg { fill: #000; pointer-events: none; }
.arm.lifted .arm-sh { translate: calc(var(--s) * .04) calc(var(--s) * .055); opacity: .38; }

/* CUE lever + pitch fader, right column */
.cue { position: absolute; left: calc(var(--s) * 1.265); top: calc(var(--s) * .24); width: max(32px, calc(var(--s) * .1)); height: var(--cue-h); padding: 0; border: 0; border-radius: 8px;
  background: #0d0b0a; box-shadow: inset 0 2px 5px rgba(0,0,0,.9), 0 1px 0 rgba(255,255,255,.07); }
.cue .lever { position: absolute; left: 50%; top: 40%; width: 36%; height: 32%; translate: -50% 0; border-radius: 4px; background: linear-gradient(90deg, #8a8a8a, #f0f0f0 50%, #9a9a9a);
  box-shadow: 0 3px 5px rgba(0,0,0,.6); transition: top .3s var(--ease); }
.cue[aria-pressed="true"] .lever { top: 12%; }
.cue span, .pitch > span, .pitch output { font: 600 clamp(7px, calc(var(--s) * .021), 10px)/1 "DM Mono", monospace; letter-spacing: .1em; color: #a89580; }
.cue span { position: absolute; left: 0; right: 0; bottom: 6px; text-align: center; }
.pitch { position: absolute; left: calc(var(--s) * 1.265); top: calc(var(--s) * .24 + var(--cue-h) + 12px); bottom: calc(var(--s) * .34); width: max(32px, calc(var(--s) * .1));
  display: flex; flex-direction: column; align-items: center; gap: 6px; }
.pitch output { font-variant-numeric: tabular-nums; color: var(--cream); }
.fader { --v: .5; position: relative; flex: 1; width: 100%; touch-action: none; cursor: ns-resize; border-radius: 4px; }
.fader::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 4px; margin-left: -2px; border-radius: 2px; background: #070606; box-shadow: inset 0 1px 2px #000, 0 1px 0 rgba(255,255,255,.07); }
.fader::after { content: ""; position: absolute; left: 8%; right: 8%; top: 8px; bottom: 8px; pointer-events: none;
  background: repeating-linear-gradient(transparent 0 calc(12.5% - 1px), rgba(239,230,210,.22) calc(12.5% - 1px) 12.5%), linear-gradient(transparent calc(50% - 1px), var(--red) calc(50% - 1px) calc(50% + 1px), transparent 0);
  -webkit-mask: linear-gradient(90deg, #000 0 26%, transparent 26% 74%, #000 74%); mask: linear-gradient(90deg, #000 0 26%, transparent 26% 74%, #000 74%); }
.fader .cap { position: absolute; z-index: 1; left: 50%; top: calc((1 - var(--v)) * (100% - 18px)); width: min(100%, 34px); height: 18px; translate: -50% 0; border-radius: 4px;
  background: linear-gradient(#3a3633, #1d1b1a); box-shadow: 0 4px 8px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.18), 0 0 0 1px #090808; }
.fader .cap::after { content: ""; position: absolute; left: 12%; right: 12%; top: 50%; height: 2px; margin-top: -1px; border-radius: 1px; background: var(--cream); }
.lock { width: 7px; height: 7px; border-radius: 50%; background: #17311c; transition: background .2s, box-shadow .2s; }
.pitch.zero .lock { background: #3dff6a; box-shadow: 0 0 8px #3dff6a; }

/* bottom control strip */
.panel { position: absolute; z-index: 1; left: calc(var(--s) * .05); right: calc(var(--s) * .05); bottom: calc(var(--s) * .04); height: calc(var(--s) * .21); display: flex; align-items: center; gap: calc(var(--s) * .04); }
.start, .rpm button { position: relative; border: 0; color: #e9e1cf; background: linear-gradient(#2c2927, #191716);
  box-shadow: 0 0 0 1px #070606, 0 3px 0 #070606, 0 7px 12px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.1);
  font: 700 clamp(8px, calc(var(--s) * .024), 12px)/1.1 "DM Mono", monospace; letter-spacing: .08em; transition: transform .08s, box-shadow .08s; }
.start { display: flex; align-items: center; gap: 10px; width: max(84px, calc(var(--s) * .3)); height: max(42px, calc(var(--s) * .12)); padding: 0 12px; border-radius: 8px; text-align: left; }
.start:active, .start[aria-pressed="true"], .rpm button:active, .rpm button[aria-pressed="true"] { transform: translateY(2px); box-shadow: 0 0 0 1px #070606, 0 1px 0 #070606, 0 3px 6px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.07); }
.rpm { display: flex; gap: 6px; }
.rpm button { width: max(40px, calc(var(--s) * .11)); height: max(34px, calc(var(--s) * .09)); border-radius: 7px; padding: 10px 0 0; }
.led { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #3b1311; box-shadow: inset 0 1px 1px rgba(0,0,0,.6); transition: background .15s, box-shadow .15s; }
.rpm .led { position: absolute; top: 6px; left: 50%; width: 6px; height: 6px; margin-left: -3px; }
[aria-pressed="true"] > .led { background: #ff3b30; box-shadow: 0 0 8px #ff3b30, inset 0 0 2px #ffd0cc; }
.lcd { flex: none; margin-left: auto; display: flex; align-items: baseline; gap: 5px; padding: 7px 10px; border-radius: 7px; contain: layout paint;
  background: #0a0606; box-shadow: inset 0 1px 4px #000, 0 1px 0 rgba(255,255,255,.06); }
.lcd b { min-width: 4ch; text-align: right; font: 600 clamp(12px, calc(var(--s) * .05), 22px)/1 "DM Mono", monospace; font-variant-numeric: tabular-nums; color: #ff4b3e; text-shadow: 0 0 10px rgba(255, 59, 48, .55); }
.lcd span { font: 600 clamp(7px, calc(var(--s) * .018), 9px)/1 "DM Mono", monospace; letter-spacing: .12em; color: #8a3a32; }
.knob-wrap { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.knob-wrap > span { font: 700 clamp(7px, calc(var(--s) * .019), 9px)/1 "DM Mono", monospace; letter-spacing: .14em; color: #a89580; }
.knob { --v: .3; position: relative; width: max(50px, calc(var(--s) * .15)); aspect-ratio: 1; border-radius: 50%; touch-action: none; cursor: ns-resize;
  background: conic-gradient(from -135deg, var(--red) 0 calc(var(--v) * 270deg), #2f2b29 0 270deg, transparent 0); }
.knob .cap { position: absolute; inset: 5px; border-radius: 50%; transform: rotate(calc(-135deg + var(--v) * 270deg));
  background: repeating-conic-gradient(#c9c9c9 0 5deg, #8f8f8f 5deg 10deg); box-shadow: 0 5px 10px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.6); }
.knob .cap::before { content: ""; position: absolute; inset: 14%; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #f6f6f6, #a8a8a8 72%); }
.knob .cap::after { content: ""; position: absolute; left: 50%; top: 9%; width: 3px; height: 28%; margin-left: -1.5px; border-radius: 2px; background: var(--red); }

/* now playing: artwork, title, spectrum, seek bar, transport */
.info .kicker { font: 500 14px/1 "DM Mono", monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--mustard); }
.info h2 { font-size: clamp(38px, 5vw, 66px); line-height: .95; margin: 10px 0 8px; }
.info .how { color: #b9a690; margin-bottom: 16px; } .info .how b { color: var(--cream); }
.np { padding: 14px 16px 10px; border-radius: 18px; background: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.025));
  box-shadow: inset 0 0 0 1px rgba(239,230,210,.09), 0 24px 40px -24px rgba(0,0,0,.7); }
.np-top { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 14px; align-items: center; }
.np-art { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; box-shadow: 0 8px 16px rgba(0,0,0,.5); }
.now { display: grid; gap: 6px; min-width: 0; }
.now-t, .now-sub { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.now-t { font: 700 19px/1.15 "DM Sans", sans-serif; color: var(--cream); }
.now-sub { font: 500 12px/1 "DM Mono", monospace; letter-spacing: .08em; text-transform: uppercase; color: #a89580; }
.crackle { padding: 7px 12px; border: 1px solid rgba(239,230,210,.22); border-radius: 999px; background: transparent; color: #b9a690; font: 500 12px/1 "DM Mono", monospace; transition: background .2s, color .2s, border-color .2s; }
.crackle[aria-pressed="true"] { background: rgba(224,165,38,.14); border-color: var(--mustard); color: var(--mustard); }
.viz { width: 100%; height: 44px; margin: 14px 0 6px; }
.seek { position: relative; height: 20px; cursor: pointer; touch-action: none; }
.seek::before, .seek-fill { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 4px; margin-top: -2px; border-radius: 2px; }
.seek::before { background: rgba(239,230,210,.14); }
.seek-fill { background: linear-gradient(90deg, var(--red), #ef5a3c); transform: scaleX(0); transform-origin: 0 50%; will-change: transform; }
.seek-dot { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; pointer-events: none; will-change: transform; }
.seek-dot::before { content: ""; position: absolute; left: -7px; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%; background: var(--cream);
  box-shadow: 0 2px 6px rgba(0,0,0,.5), 0 0 0 4px rgba(215,38,46,.35); scale: 0; transition: scale .2s var(--ease); }
.seek:hover .seek-dot::before, .seek:focus-visible .seek-dot::before, .seek.grab .seek-dot::before, .live .seek-dot::before { scale: 1; }
.np-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; font: 500 12px/1 "DM Mono", monospace; color: #a89580; font-variant-numeric: tabular-nums; }
.now-dur { text-align: right; }
.tp { display: flex; align-items: center; gap: 6px; }
.tp button { display: grid; place-content: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--cream); transition: background .2s, transform .15s; }
.tp button:hover { background: rgba(239,230,210,.1); }
.tp button:active { transform: scale(.94); }
.tp svg { width: 20px; height: 20px; fill: currentColor; }
.tp .tp-play { width: 52px; height: 52px; background: var(--red); box-shadow: 0 10px 22px -8px rgba(215,38,46,.9); }
.tp .tp-play:hover { background: #ef3b42; }
.tp-play .i-pause, .tp-play.on .i-play { display: none; } .tp-play.on .i-pause { display: block; }
/* ⏪ ⏩ are held down to wind: no long-press menu, text selection or double-tap zoom getting in the way */
.tp-prev, .tp-next, .mini-prev, .mini-next { touch-action: manipulation; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.tp button.hold { background: rgba(239,230,210,.18); }

/* tracklist */
.tl { margin-top: 14px; }
.tl .side { display: block; font: 500 12px/1 "DM Mono", monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--mustard); padding: 10px 12px 6px; }
.tl .empty { padding: 12px; color: #b9a690; }
.trk { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 10px; align-items: center; width: 100%; padding: 7px 12px; border: 0; border-radius: 10px; background: none; color: #b9a690; text-align: left;
  transition: background .25s, color .25s, box-shadow .25s; }
.trk:hover:not(:disabled) { background: rgba(239, 230, 210, .07); color: var(--cream); }
.trk:disabled { cursor: default; opacity: .5; }
.trk span { font: 500 13px/1 "DM Mono", monospace; } .trk b { font-size: clamp(16px, 1.6vw, 20px); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.trk em { display: flex; align-items: center; gap: 8px; font: 500 13px/1 "DM Mono", monospace; font-style: normal; color: #8d7866; }
.tl li.on .trk { background: linear-gradient(90deg, rgba(215,38,46,.3), rgba(215,38,46,.06)); color: var(--cream); box-shadow: inset 3px 0 0 var(--red); }
.tl li.on .trk span { color: var(--mustard); }
.deck.live .tl li.on .trk em::before { content: ""; width: 14px; height: 12px; background: linear-gradient(var(--red), var(--red)) 0 100% / 3px 40% no-repeat, linear-gradient(var(--red), var(--red)) 5px 100% / 3px 80% no-repeat, linear-gradient(var(--red), var(--red)) 10px 100% / 3px 60% no-repeat; animation: eq .9s steps(3) infinite; }
@keyframes eq { 33% { background-size: 3px 90%, 3px 30%, 3px 70%; } 66% { background-size: 3px 50%, 3px 100%, 3px 30%; } }
.credits { margin-top: 14px; color: #a89580; font-size: 14px; }
.deck .ctas { margin-top: 16px; } .deck .btn { background: var(--cream); color: var(--brown); } .deck .btn.alt { background: transparent; color: var(--cream); box-shadow: inset 0 0 0 2px var(--cream); }
@media (max-height: 860px) { .info .how, .credits { display: none; } .trk { padding-block: 5px; } .tl .side { padding-top: 6px; } }
@media (max-height: 700px) { .deck .ctas, .viz, .info .kicker { display: none; } .np { padding-block: 10px 6px; } .seek { margin-top: 8px; } }

/* sticky mini player – shows up when the music plays and the deck scrolls away */
.mini { position: fixed; z-index: 60; right: 16px; bottom: max(16px, env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 4px; max-width: calc(100vw - 32px); padding: 6px 8px 6px 6px; overflow: hidden;
  border-radius: 999px; background: rgba(18, 11, 8, .96); color: var(--cream); box-shadow: 0 14px 30px rgba(0,0,0,.4), inset 0 0 0 1px rgba(239,230,210,.08); transition: transform .45s var(--ease), opacity .3s, visibility 0s; }
.mini[hidden] { display: flex !important; transform: translateY(150%); opacity: 0; visibility: hidden; pointer-events: none; transition: transform .45s var(--ease), opacity .3s, visibility 0s .45s; }
.mini-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--red); transform: scaleX(0); transform-origin: 0 50%; transition: transform .3s linear; }
.mini-disc { flex: none; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; background: none; }
.mini-rec { position: relative; display: block; width: 100%; height: 100%; border-radius: 50%; animation: spin 1.8s linear infinite paused;
  background: radial-gradient(circle, var(--cream) 0 5%, var(--red) 5.5% 30%, transparent 31%), repeating-radial-gradient(circle, #141415 0 1px, #2a2a2c 1px 2.4px); }
.mini.on:not([hidden]) .mini-rec { animation-play-state: running; }
.mini-rec::after { content: ""; position: absolute; inset: 20%; border-radius: 50%; background: var(--art, none) center / cover; }
.mini-t { min-width: 0; max-width: 230px; padding: 0 6px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 700; font-size: 15px; }
.mini-t b { color: var(--mustard); font: 500 13px "DM Mono", monospace; }
.mini button:not(.mini-disc) { flex: none; display: grid; place-content: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--cream); }
.mini button:not(.mini-disc):hover { background: rgba(239, 230, 210, .12); }
.mini svg { width: 20px; height: 20px; fill: currentColor; }
.mini button.mini-play { background: var(--red); } .mini button.mini-play:hover { background: #ef3b42; }
.mini button.hold { background: rgba(239, 230, 210, .2); }
.mini .i-play { display: none; } .mini.paused .i-play { display: block; } .mini.paused .i-pause { display: none; }

@media (max-width: 860px) {
  .deck { height: 200vh; }
  .stage { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; align-content: center; align-items: start; gap: 12px; padding-block: 10px; }
  .glow { left: 50%; top: 28%; translate: -50% -50%; }
  .tt { --s: min(29svh, 62vw); margin-inline: auto; }
  .info h2 { font-size: 30px; margin: 0 0 8px; }
  .info .how, .credits, .deck .ctas, .tl .side, .info .kicker { display: none; }
  .np { padding: 10px 12px 6px; border-radius: 14px; }
  .np-top { grid-template-columns: 44px minmax(0, 1fr) auto; gap: 10px; } .np-art { width: 44px; height: 44px; }
  .now-t { font-size: 17px; } .viz { height: 30px; margin: 8px 0 2px; }
  .tl { margin-top: 8px; } .trk { padding: 5px 10px; } .trk b { font-size: 16px; }
  .mini-t { max-width: 40vw; }
}
@media (max-width: 860px) and (max-height: 720px) { .viz, .info h2 { display: none; } }
@media (max-width: 420px) { .mini-prev { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .arm-sh, .seek-dot::before, .mini-bar { transition: none; } }