:root{color-scheme:dark;--bg:#09090c;--panel:#17171e;--line:#33333f;--text:#f5f4f9;--muted:#a5a4b1;--blue:#39caff;--pink:#ff2a32;--green:#34dfa1}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 50% 35%,#17141f 0,#09090c 65%);color:var(--text);font:14px system-ui,-apple-system,sans-serif}button,input,select,textarea{font:inherit}button,a,input,select,textarea{outline-offset:4px}button{border:1px solid #454550;border-radius:20px;color:#f3f3fb;background:linear-gradient(#292932,#202028);padding:9px 13px;cursor:pointer}button:hover{border-color:var(--blue);box-shadow:0 0 12px #39caff25}button:disabled{opacity:.4;cursor:not-allowed}button.active,button[aria-pressed=true]{border-color:var(--blue);background:#114758;box-shadow:0 0 16px #39caff40}.primary{background:#278eef;border-color:#278eef;font-weight:700}.danger{color:#ff859d;border-color:#92354c;background:#351b26}.small{font-size:11px;padding:6px 10px}.hidden,[hidden]{display:none!important}header{height:76px;border-bottom:1px solid #303038;background:#111116;display:flex;align-items:center;padding:0 27px;gap:20px}.brand{font-size:24px;letter-spacing:-1px;font-weight:900;text-decoration:none;color:white}.brand span{color:var(--pink)}header>small{font-size:9px;letter-spacing:3px;color:#aaa;border-left:1px solid #444;padding-left:15px;white-space:nowrap}.top-controls{margin-left:auto;display:flex;align-items:center;gap:8px}.pill{border:1px solid #3b3b46;border-radius:30px;padding:6px 10px;font-size:10px;white-space:nowrap}.live{color:#ff647c!important;background:#421727!important;box-shadow:0 0 18px #ff285e55;border-color:#9c2942}.station-switch{color:#8a8a96;border:1px solid #3b3b46;border-radius:20px;padding:6px 9px;font-size:9px;white-space:nowrap;display:flex;align-items:center;gap:3px;user-select:none;pointer-events:none}.station-switch.on{color:#6fdfb4;border-color:#28674f;background:#14261e;box-shadow:0 0 16px #34dfa155}#recording-light{font-size:10px;letter-spacing:1px;color:#61535b;background:#1f171a;border:1px solid #49303a;border-radius:5px;padding:7px;white-space:nowrap}#recording-light.recording{color:#ffcad3;background:#9e1733;border-color:#ff4c6e;box-shadow:0 0 20px #ff174c88;animation:rec-pulse 1s infinite}#local-rec.recording{border-color:#ff4668;color:#ff8da4}#recording-time{font:12px monospace;min-width:42px}@keyframes rec-pulse{50%{opacity:.45}}main{max-width:1800px;padding:16px 27px 28px;margin:auto}.intro{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.eyebrow{font-size:10px;font-weight:800;letter-spacing:2px;color:var(--blue)}h1{font-size:27px;line-height:1.1;margin:4px 0;font-weight:950;letter-spacing:-1px}h2{font-size:15px;margin:6px 0 12px}p{margin:6px 0 10px;color:var(--muted);font-size:12px}.intro-links{text-align:right;font-size:10px;color:#aaa;display:flex;align-items:center;gap:12px;max-width:650px;flex-wrap:wrap;justify-content:end}.intro-links button{padding:5px 9px;font-size:10px}a{color:#7bd8ff}.notice{padding:9px 14px;border:1px solid #344552;border-radius:8px;margin:9px 0 13px;font-size:12px;color:#bcd4e1;background:#101b22}.notice.error,.warning{color:#ffb2bd}.studio-layout{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:17px}.workspace{min-width:0}.panel{background:linear-gradient(125deg,#1c1c24,#111115);border:1px solid var(--line);border-radius:16px;padding:17px;box-shadow:inset 0 1px 0 #ffffff08}.between,.row{display:flex;align-items:center;justify-content:space-between;gap:8px}.row{justify-content:flex-start}.wrap{flex-wrap:wrap}.mic-panel{display:grid;grid-template-columns:40% 1fr;gap:22px;margin-bottom:16px}.mic-panel>div:first-child{border-right:1px solid #35353e;padding-right:22px}.monitor-label{font-size:9px;color:#aaa;float:right;letter-spacing:0}.monitor-label input{width:auto}.mic-panel select{flex:1;min-width:0}.mic-panel .row{margin:9px 0}.mic-fader{display:flex;align-items:center;gap:6px;white-space:nowrap;font-size:10px;color:#b5b5c0;width:50%}.mic-fader input{min-width:45px;flex:1}.mic-fader output{font-size:9px;color:var(--blue)}input,select,textarea{background:#0b0b0f;border:1px solid #3a3a44;border-radius:8px;padding:10px;color:#eee;min-width:0}input[type=range]{padding:0;accent-color:var(--blue);height:17px;cursor:pointer;width:100%;border:0}input[type=checkbox]{width:auto;accent-color:var(--blue)}.led,.deck-meter{height:9px;flex:1;background:repeating-linear-gradient(90deg,#0b3025 0 5px,#090e0d 5px 8px);position:relative;border-radius:2px;overflow:hidden}.led:after,.deck-meter:after{content:"";position:absolute;inset:0;right:auto;width:var(--level,0%);background:repeating-linear-gradient(90deg,transparent 0 5px,#111 5px 8px),linear-gradient(90deg,#15875c,#30e79b 65%,#f4bf36 85%,#f45270)}.master-display small{font-size:9px;color:#8e8d9c;letter-spacing:1px}.wave{display:block;width:100%;height:54px;background:#090c12;border-radius:6px}.decks{display:grid;grid-template-columns:minmax(0,1fr) 230px minmax(0,1fr);gap:16px}.deck{--accent:var(--blue);border-top-color:var(--accent);padding:17px}.deck.pink{--accent:var(--pink)}.deck .eyebrow,.deck .source-tag{color:var(--accent)}.deck h2{margin-bottom:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.deck .local-load{font-size:10px;padding:7px 10px;color:var(--accent);border-color:var(--accent);background:#0b1a22}.source-tag{font-size:9px;padding:5px;border:1px solid #444;border-radius:15px}.tiny{font-size:10px;color:#a6a5b0;line-height:1.5}.deck .tiny{font-size:9px}#time-A,#time-B{font:10px monospace;color:#bbb}.turntable{display:flex;align-items:center;justify-content:space-between;gap:10px;height:196px}.eq{display:flex;flex-direction:column;gap:7px;width:49px;align-items:center}.knob{font-size:8px;color:#a8a7b1;display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center}.knob input[type=range]{appearance:none;width:34px;height:34px;border-radius:50%;background:radial-gradient(circle at 40% 30%,#555760,#14151e 55%,#05070a 64%,var(--accent,var(--blue)) 69%,#171c27 77%);border:1px solid var(--accent,var(--blue));box-shadow:0 0 10px #39caff20;transform:rotate(-90deg)}.knob input::-webkit-slider-thumb{appearance:none;width:4px;height:13px;background:#d9f6ff;border-radius:2px;box-shadow:0 0 6px var(--accent,var(--blue))}.knob output{font-size:7px}.platter{position:relative;aspect-ratio:1;width:178px;max-width:calc(100% - 100px);border:2px dotted #668da4;border-radius:50%;background:repeating-radial-gradient(circle,#101116 0 2px,#33353d 3px,#16171c 4px);box-shadow:0 0 22px #000,inset 0 0 30px #000;flex-shrink:1}.platter b{position:absolute;left:35%;top:35%;width:30%;height:30%;border-radius:50%;display:grid;place-items:center;font-size:25px;background:radial-gradient(circle at 30% 25%,var(--accent),#142231 85%);border:1px solid #a4d9ed;box-shadow:0 0 16px #39caff33;transform:rotate(25deg)}.platter span{position:absolute;top:5px;left:0;right:0;text-align:center;font-size:8px;color:var(--accent)}.platter i{width:36%;height:3px;position:absolute;right:-6%;top:25%;background:#b1b1be;transform:rotate(-63deg);box-shadow:0 0 4px #000}.platter.spinning b{animation:spin 1.8s linear infinite}.platter.spinning{animation:groove 1.8s linear infinite}.platter.drag-over{border:3px solid var(--accent);box-shadow:0 0 22px var(--accent)}@keyframes spin{to{transform:rotate(385deg)}}@keyframes groove{50%{box-shadow:0 0 15px #39caff44,inset 0 0 30px #000}}.volume{display:flex;flex-direction:column;align-items:center;gap:5px;font-size:8px;width:35px}.volume input[type=range]{writing-mode:vertical-lr;direction:rtl;height:104px;width:22px;accent-color:var(--accent)}.deck-meter{margin:0 0 14px;height:5px}.cue-pads{display:flex;gap:4px}.cue-pads button{border-color:var(--accent);border-radius:5px;padding:9px 10px;font-size:10px;color:var(--accent)}.deck .row>button{padding:8px;font-size:11px}.fx{border-top:1px solid #393943;padding-top:10px;margin-top:10px;display:grid;grid-template-columns:1fr auto;gap:8px}.fx .eyebrow{grid-column:1/-1;font-size:8px}.fx-buttons{display:flex;gap:4px;flex-wrap:wrap}.fx-buttons button{font-size:8px;padding:5px;border-radius:4px}.fx .knob{font-size:6px}.fx .knob input{width:30px;height:30px}.center-mixer{padding:22px 18px;display:flex;flex-direction:column;align-items:stretch}.center-logo{width:160px;max-width:100%;height:155px;object-fit:contain;margin:0 auto 25px;filter:drop-shadow(0 0 16px #9e34ff66)}.cross-label{display:flex;justify-content:space-between;font-size:9px;color:#bbb;margin-bottom:8px}#crossfader{accent-color:#c18beb;background:linear-gradient(90deg,var(--blue),var(--pink));border-radius:9px}#master-meter{flex:none;margin:21px 0;height:8px}.center-mixer>label{font-size:10px;color:#bbb}#master-value{float:right}#master-music{margin:15px 0}.center-mixer>.tiny{text-align:center}.station-status{margin-top:auto;font-size:11px;color:#f6c771;text-align:center;border:1px solid #5a5131;background:#292416;border-radius:10px;padding:12px 5px}.station-status small{font-size:9px}.sampler{margin:16px 0;display:grid;grid-template-columns:165px 1fr 90px;align-items:center;gap:14px}.sampler b{font-size:12px}.sampler button,.sampler select{font-size:9px;padding:6px 9px}.sampler select{width:155px;margin-top:5px}.sample-pads{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.sample-pads button{border-radius:6px;border-color:#7e2a32;color:#ff8a90;background:#31181a;height:33px}.sample-pads button:nth-child(4n+1){border-color:#238bb3;color:#70d7ff;background:#173340}.sample-pads button:nth-child(4n+2){border-color:#68599e;color:#c8adef;background:#28223a}.sample-pads button:nth-child(4n){border-color:#2a8369;color:#6ee8b6;background:#18372d}.sample-pads button.fired{background:#3699c9;color:#fff}.pull h2{margin:0}.pull small{font-size:10px;color:#aaa}.pull>.between{border-bottom:1px solid #363640;padding-bottom:9px}.pull .row input{width:220px;font-size:11px}.runtime-track{display:grid;grid-template-columns:minmax(100px,1fr) auto;align-items:center;gap:10px;padding:13px 0;border-bottom:1px solid #30303a;cursor:grab}.runtime-track h3{font-size:12px;margin:0 0 4px}.runtime-track small{color:#aaa}.runtime-track button{font-size:9px;padding:6px 9px}aside{display:flex;flex-direction:column;gap:14px}aside .panel{padding:17px;min-height:145px}aside h2{font-size:14px;margin:3px 0 8px}.listener-number{font-size:36px;color:var(--blue);text-shadow:0 0 15px #39caff33}#listener-names{margin:12px 0}aside .pill{font-size:8px}#shout-form input,#shout-form textarea{width:100%;font-size:11px;margin:4px 0;padding:8px}#shout-form textarea{height:50px;resize:vertical}#shout-form button{font-size:10px;padding:6px 10px}.shout-note{font-size:11px;border-top:1px solid #393940;margin-top:10px;padding-top:10px}.shout-note button{font-size:9px;padding:5px 9px;margin-right:6px}.shout-note.read{opacity:.5}#timeout-real{width:100%;font-size:11px;margin:6px 0 10px}.runtime-caller,.request{padding:10px 0;border-bottom:1px solid #35353f;font-size:11px}.runtime-caller h3,.request h3{font-size:12px}.runtime-caller button,.request button{padding:6px 10px;font-size:10px}.runtime-caller label{display:block}.timer{float:right;color:var(--blue);font:15px monospace}.request .mini-stat{font-size:9px;color:#a9b4ac}.tape pre{font:10px monospace;white-space:pre-wrap;color:#a7a8b7}.tape button{font-size:9px;padding:6px 9px}details{font-size:11px;margin-top:10px}.tape-link{display:flex;flex-direction:column;gap:6px;margin-top:14px;font-size:10px}.tape-link a{font-size:11px}.login{max-width:440px;margin:50px auto}.login form label{display:block;margin:18px 0}.login form input{display:block;width:100%;margin-top:8px}dialog{width:760px;max-width:94vw;max-height:90vh;background:#16161f;color:#eee;border:1px solid #4a4960;border-radius:20px;padding:26px;box-shadow:0 0 100px #000}dialog::backdrop{background:#040409cc;backdrop-filter:blur(8px)}dialog h1{font-size:28px}dialog label{display:block;font-size:11px;color:#bdbdc9;margin:12px 0}dialog label>input:not([type=checkbox]),dialog label>select,dialog .key-label input{display:block;width:100%;margin-top:6px}dialog label input[type=checkbox]{width:auto}dialog p{font-size:12px;line-height:1.6}fieldset{border:1px solid #3c3c4d;border-radius:12px;margin:20px 0;padding:15px}legend{font-size:16px;font-weight:700;color:var(--blue)}.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}.key-label{grid-column:1/-1}#broadcast-result{font-size:11px;color:#ffc978}#settings-saved{font-size:11px;color:var(--green);margin-left:10px}.badge{font-size:8px;color:#ffdc85}#stop-pull{font-size:10px;padding:6px 10px}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;scroll-behavior:auto!important}#recording-light.recording{opacity:1}}@media(max-width:1350px){header{padding:12px;height:auto;flex-wrap:wrap;gap:10px}.top-controls{flex-wrap:wrap}.decks{grid-template-columns:minmax(0,1fr) 175px minmax(0,1fr)}.studio-layout{grid-template-columns:minmax(0,1fr) 260px}.deck{padding:13px}.platter{width:145px}.turntable{height:180px}.cue-pads button{padding:7px}.sampler{grid-template-columns:130px 1fr 65px}.sampler select{width:125px}.center-logo{height:140px}.mic-panel{grid-template-columns:44% 1fr}.fx .row{gap:4px}}@media(max-width:1050px){.studio-layout{grid-template-columns:1fr}aside{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.decks{grid-template-columns:minmax(0,1fr) 180px minmax(0,1fr)}.platter{width:175px}.intro{flex-wrap:wrap}.intro-links{margin-top:10px;justify-content:start}.top-controls{margin:0}.mic-panel{grid-template-columns:1fr 1fr}}@media(max-width:650px){main{padding:12px}.decks{grid-template-columns:1fr 1fr;gap:10px}.center-mixer{grid-column:1/-1;grid-row:2;display:grid;grid-template-columns:1fr 1fr;gap:12px}.center-logo{grid-row:1/5;width:115px;height:140px;margin:0}.center-mixer .station-status{grid-column:1/-1}.center-mixer>.tiny{display:none}.center-mixer #master-meter{margin:0}.turntable{height:160px;gap:4px}.platter{max-width:calc(100% - 60px);width:135px}.platter span{font-size:5px}.eq{width:27px}.knob input[type=range]{width:27px;height:27px}.eq output{display:none}.volume{width:22px}.volume input[type=range]{height:85px}.deck{padding:10px}.deck .between{flex-wrap:wrap}.deck h2{font-size:13px}.fx{display:flex;flex-wrap:wrap}.fx .eyebrow{width:100%}.fx .row{margin:auto}.deck .tiny{font-size:7px}.deck .local-load{font-size:8px}.cue-pads button{padding:7px 9px}.mic-panel{grid-template-columns:1fr}.mic-panel>div:first-child{border:0;padding:0}.sampler{grid-template-columns:1fr 60px}.sampler>div:first-child{grid-column:1/-1}.sampler select{width:150px}.sample-pads{grid-template-columns:repeat(2,1fr)}.pull>.between{align-items:start;flex-direction:column}.pull .row{width:100%}.pull .row input{width:100%}.runtime-track{grid-template-columns:1fr}.runtime-track .row{flex-wrap:wrap}aside{grid-template-columns:1fr}.settings-grid{grid-template-columns:1fr}.intro h1{font-size:23px}.intro-links{font-size:8px}.brand{font-size:21px}header>small{font-size:8px}.top-controls{gap:6px}.top-controls button{padding:8px;font-size:10px}.station-switch{font-size:8px}.pill{font-size:9px}}
/* Keep the complete working surface in the approved desktop viewport. */
@media(min-width:1051px){.panel{padding:14px}.deck{padding:14px}.wave{height:45px}.turntable{height:176px}.eq output{display:none}.eq{gap:5px}.sampler{padding:14px}.sampler>div:first-child p{display:none}.sampler>div:first-child b{display:block;margin-bottom:7px}.sample-pads button{height:30px}.deck .tiny{margin:5px 0 8px}.center-logo{height:145px;margin-bottom:20px}.center-mixer{padding:20px 18px}}
.deck,.center-mixer{min-width:0}input[type=range]{margin-left:0;margin-right:0}
@media(max-width:650px){.decks,.center-mixer{grid-template-columns:repeat(2,minmax(0,1fr))}.deck .fx-buttons{min-width:0}.fx .row{flex-wrap:wrap}.platter{min-width:0}.volume{flex-shrink:0}.center-mixer>label{min-width:0}.deck .turntable{gap:3px}.deck .local-load{white-space:normal}.deck .wave{width:100%}.source-tag{max-width:100%}}

/* The hand, not a CSS animation, controls the vinyl marker. */
.platter{touch-action:none;user-select:none;cursor:grab}.platter *{pointer-events:none}.platter b,.platter.spinning b{animation:none;transform:rotate(var(--vinyl-angle,0deg))}.platter b:after{content:"";position:absolute;top:3px;width:3px;height:11px;background:white;border-radius:2px}.platter.scratching{cursor:grabbing;border-color:var(--accent);box-shadow:0 0 25px var(--accent)}.scratch-hint{color:var(--accent);font-size:10px;text-align:center;margin:0 0 10px}.scratch-hint span{color:var(--muted);font-size:9px}[data-cut]{touch-action:none;user-select:none}[data-cut][aria-pressed=true]{background:#77233f;color:#fff;border-color:#ff6197}.deck .between>.row{flex-wrap:wrap;gap:4px}.deck [data-cut]{font-size:10px;padding:7px}{font-size:10px;padding:6px 10px}

/* Rotary knobs (knobs.js): the range input stays for keyboard/screen readers but is invisible;
   the dial turns with pointer angle and its tick follows --knob-angle. Faders are unchanged. */
.knob.rotary{position:relative;--knob-size:34px}
.fx .knob.rotary{--knob-size:30px}
.knob.rotary input[type=range]{position:absolute;top:0;left:50%;width:var(--knob-size);height:var(--knob-size);margin:0;transform:translateX(-50%);opacity:0;pointer-events:none}
.knob-dial{position:relative;display:block;width:var(--knob-size);height:var(--knob-size);border-radius:50%;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none}
.knob-dial.turning{cursor:grabbing}
.knob-cap{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 40% 30%,#555760,#14151e 55%,#05070a 64%,var(--accent,var(--blue)) 69%,#171c27 77%);border:1px solid var(--accent,var(--blue));box-shadow:0 0 10px #39caff20;transform:rotate(var(--knob-angle,0deg))}
.knob-tick{position:absolute;left:calc(50% - 2px);top:2px;width:4px;height:38%;background:#d9f6ff;border-radius:2px;box-shadow:0 0 6px var(--accent,var(--blue))}
.knob.rotary input:focus-visible+span,.knob.rotary:focus-within .knob-cap{outline:2px solid var(--accent,var(--blue));outline-offset:2px}
/* Beatmatch cue: ring glow driven by --beat (0..1) from beat-sync.js; stronger on the bar downbeat. */
.knob-beat{position:absolute;inset:-4px;border-radius:50%;pointer-events:none;border:2px solid var(--accent,var(--blue));opacity:calc(var(--beat,0)*.9);box-shadow:0 0 calc(4px + var(--beat,0)*12px) var(--accent,var(--blue));transform:scale(calc(1 + var(--beat,0)*.08))}
.knob.downbeat .knob-beat{border-color:#fff}
@media(max-width:650px){.knob.rotary{--knob-size:27px}.fx .knob.rotary{--knob-size:27px}}

/* Tempo fader + BM sit beside each deck's existing VOL fader. */
.deck-faders{display:flex;align-items:flex-end;gap:8px;flex-shrink:0}
.tempo-col{display:flex;flex-direction:column;align-items:center;gap:4px}
.tempo-col .bm-btn{min-width:32px;padding:6px 7px;font-size:10px;font-weight:800;letter-spacing:.4px;border-radius:6px}
.volume.tempo output{font-size:7px;color:var(--accent);white-space:nowrap}
.volume.tempo{display:grid;grid-template-columns:9px 22px;grid-template-areas:"name name" "scale input" "out out";justify-items:center;column-gap:2px;row-gap:5px;width:auto}
.volume.tempo .tempo-name{grid-area:name}
.volume.tempo input[type=range]{grid-area:input}
.volume.tempo output{grid-area:out}
.volume.tempo input[type=range]{height:90px}
.tempo-scale{grid-area:scale;height:90px;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-end;padding:1px 0;width:9px;pointer-events:none}
.tempo-scale>*{height:8px;display:flex;align-items:center;justify-content:flex-end;font-style:normal}
.tempo-scale b{font-size:9px;line-height:8px;font-weight:800;color:var(--accent)}
.tempo-scale b.minus{color:#c8c7d3}
.tempo-scale i::before{content:"";display:block;width:4px;height:1px;background:#6a6a78}
.tempo-scale i.zero::before{width:8px;height:2px;background:var(--accent);box-shadow:0 0 4px var(--accent)}
.bpm-readout{display:flex;flex-direction:column;align-items:center;min-width:40px;padding:2px 4px;border:1px solid var(--accent);border-radius:6px;background:#0b0b10;font:700 11px/1 ui-monospace,Menlo,monospace;color:var(--accent);font-variant-numeric:tabular-nums;white-space:nowrap}
.bpm-readout small{font:600 6px/1 system-ui,sans-serif;letter-spacing:1px;color:#a6a5b0}
.bpm-readout.empty{border-color:#3a3a44;color:#6f6e7b}
.turntable .platter{max-width:calc(100% - 150px)}
.turntable{height:202px}
@media(min-width:1051px){.turntable{height:188px}}
@media(max-width:650px){
  .deck-faders{gap:4px}
  .tempo-col .bm-btn{min-width:24px;padding:4px 5px;font-size:8px}
  .turntable .platter{max-width:calc(100% - 110px)}
  .turntable{height:178px}
  .bpm-readout{min-width:32px;font-size:9px;padding:2px 3px}
  .volume.tempo{grid-template-columns:7px 20px}
  .tempo-scale{width:7px}
  .tempo-scale b{font-size:8px}
}
.studio-drop{padding:14px 0;border-top:1px solid #38303f;overflow-wrap:anywhere}.studio-drop.reported{border-left:3px solid #ffab42;padding-left:10px}.studio-drop img{display:block;max-width:100%;max-height:200px}.studio-drop button{margin:6px 5px 0 0}.rights-reminder{display:block;color:#ffd597;font-size:10px;margin:6px 0 12px}#put-me-on-list{max-height:280px;overflow:auto;overscroll-behavior:contain}

/* Host-only controls stay hidden behind the sign-in box until a host is signed in (studio.js toggles body.host-signed-in). */
body:not(.host-signed-in) .top-controls,body:not(.host-signed-in) #archive-tab,body:not(.host-signed-in) #logout,body:not(.host-signed-in) #mode{display:none!important}

.put-me-on-block{margin-top:14px;padding-top:12px;border-top:1px solid rgba(255,255,255,.08)}
.put-me-on-block h3{margin:0 0 6px;font-size:14px}
#put-me-on-text-list,#put-me-on-audio-list,#put-me-on-list{display:flex;flex-direction:column;gap:10px;max-height:260px;overflow:auto}
.drop-sender{display:block;color:#39caff;font-size:13px;margin:2px 0}

/* 12-pad sampler: always 3 rows x 4, locked station pads 1-8 */
.sample-pads{grid-template-columns:repeat(4,minmax(0,1fr))!important}
.sample-pads button{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.sample-pads button .lock{font-size:8px;margin-right:3px;opacity:.75}
.sample-pads button.empty{border-style:dashed;opacity:.6;background:#141419!important;color:#8b8a96!important;border-color:#44444f!important}

/* Premium turntable (visual only; IDs, handlers, and --vinyl-angle spin are unchanged). Do not restyle the sampler/soundboard. */
/* ---- Premium turntable (visual only; IDs, handlers, and --vinyl-angle spin are unchanged) ---- */
.turntable{
  position:relative;
  border-radius:16px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.08),transparent 16%,transparent 78%,rgba(0,0,0,.38)),
    repeating-linear-gradient(90deg,#1d1e24 0 1px,#16171c 1px 3px,#22232a 3px 4px);
  border:1px solid #2c2e36;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 -2px 10px rgba(0,0,0,.45),
    0 10px 22px rgba(0,0,0,.42);
}
.platter{
  overflow:visible;
  border:0;
  background:transparent;
  box-shadow:
    0 0 0 3px #1a1b20,
    0 0 0 6px #4a4c55,
    0 0 0 7px #2a2c32,
    0 10px 18px rgba(0,0,0,.55),
    inset 0 0 0 1px #111;
  /* Vinyl disc + grooves rotate with the same --vinyl-angle the engine already sets. */
}
.platter::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  pointer-events:none;
  z-index:0;
  transform:rotate(var(--vinyl-angle,0deg));
  background:
    radial-gradient(circle at 50% 50%,#09090c 0 3.1%,#5a5d66 3.1% 3.6%,#1a1a1e 3.6% 28.6%,transparent 28.8%),
    radial-gradient(circle at 50% 50%,transparent 0 29%,#1a1a20 29% 33.4%,transparent 33.6%),
    repeating-radial-gradient(circle at 50% 50%,#0b0b0e 0 1px,#1a1a20 1.2px,#0e0e12 2px,#26262e 2.6px,#111116 3.4px),
    #0c0c10;
  box-shadow:
    inset 0 0 0 1px #2c2c34,
    inset 0 0 0 5px #0a0a0d,
    inset 0 0 28px #000,
    inset 0 0 0 6px #3a3b44;
}
.platter::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  pointer-events:none;
  z-index:3;
  background:
    conic-gradient(from 200deg,
      transparent 0 28deg,
      rgba(255,255,255,.16) 62deg,
      rgba(255,255,255,.03) 95deg,
      transparent 130deg 210deg,
      rgba(255,255,255,.06) 240deg,
      transparent 280deg);
  mix-blend-mode:screen;
  opacity:.9;
  -webkit-mask-image:radial-gradient(circle at 50% 50%,transparent 33%,#000 34%);
  mask-image:radial-gradient(circle at 50% 50%,transparent 33%,#000 34%);
}
.platter span{
  z-index:4;
  top:8px;
  font-size:7px;
  font-weight:700;
  letter-spacing:.4px;
  text-transform:uppercase;
  color:#e8e8ee;
  text-shadow:0 1px 2px #000c;
}
.platter b{
  z-index:4;
  left:31%;
  top:31%;
  width:38%;
  height:38%;
  font-size:18px;
  font-weight:900;
  letter-spacing:.5px;
  color:#fff;
  line-height:1;
  text-shadow:0 1px 2px #000,0 0 4px #000c,0 0 1px #000;
  border:1.5px solid color-mix(in srgb,var(--accent) 70%,#fff);
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20100%20100%22%3E%20%3Cdefs%3E%20%3Cpath%20id%3D%22t%22%20d%3D%22M16%2054%20A%2034%2034%200%200%201%2084%2054%22/%3E%20%3Cpath%20id%3D%22b%22%20d%3D%22M84%2054%20A%2034%2034%200%200%201%2016%2054%22/%3E%20%3C/defs%3E%20%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2248%22%20fill%3D%22none%22%20stroke%3D%22rgba%28255%2C255%2C255%2C0.28%29%22%20stroke-width%3D%220.8%22/%3E%20%3Ctext%20fill%3D%22%23fff%22%20font-family%3D%22system-ui%2C-apple-system%2Csans-serif%22%20font-size%3D%228.5%22%20font-weight%3D%22800%22%20letter-spacing%3D%221.8%22%3E%20%3CtextPath%20href%3D%22%23t%22%20startOffset%3D%2250%25%22%20text-anchor%3D%22middle%22%3EDA%20VILLE%3C/textPath%3E%20%3C/text%3E%20%3Ctext%20fill%3D%22%23ff2a32%22%20font-family%3D%22system-ui%2C-apple-system%2Csans-serif%22%20font-size%3D%228.5%22%20font-weight%3D%22800%22%20letter-spacing%3D%222.6%22%3E%20%3CtextPath%20href%3D%22%23b%22%20startOffset%3D%2250%25%22%20text-anchor%3D%22middle%22%3ERADIO%3C/textPath%3E%20%3C/text%3E%20%3C/svg%3E"),
    radial-gradient(circle at 30% 22%,color-mix(in srgb,var(--accent) 55%,#fff),var(--accent) 42%,#14080a 88%);
  background-size:cover,auto;
  background-position:center,center;
  background-repeat:no-repeat,no-repeat;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    inset 0 -2px 6px #0006,
    0 0 10px color-mix(in srgb,var(--accent) 45%,transparent);
  transform:rotate(var(--vinyl-angle,0deg));
}
.deck.cyan .platter b{
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20100%20100%22%3E%20%3Cdefs%3E%20%3Cpath%20id%3D%22t%22%20d%3D%22M16%2054%20A%2034%2034%200%200%201%2084%2054%22/%3E%20%3Cpath%20id%3D%22b%22%20d%3D%22M84%2054%20A%2034%2034%200%200%201%2016%2054%22/%3E%20%3C/defs%3E%20%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2248%22%20fill%3D%22none%22%20stroke%3D%22rgba%28255%2C255%2C255%2C0.28%29%22%20stroke-width%3D%220.8%22/%3E%20%3Ctext%20fill%3D%22%23fff%22%20font-family%3D%22system-ui%2C-apple-system%2Csans-serif%22%20font-size%3D%228.5%22%20font-weight%3D%22800%22%20letter-spacing%3D%221.8%22%3E%20%3CtextPath%20href%3D%22%23t%22%20startOffset%3D%2250%25%22%20text-anchor%3D%22middle%22%3EDA%20VILLE%3C/textPath%3E%20%3C/text%3E%20%3Ctext%20fill%3D%22%23ff2a32%22%20font-family%3D%22system-ui%2C-apple-system%2Csans-serif%22%20font-size%3D%228.5%22%20font-weight%3D%22800%22%20letter-spacing%3D%222.6%22%3E%20%3CtextPath%20href%3D%22%23b%22%20startOffset%3D%2250%25%22%20text-anchor%3D%22middle%22%3ERADIO%3C/textPath%3E%20%3C/text%3E%20%3C/svg%3E"),
    radial-gradient(circle at 30% 22%,#7ed6f5 0 18%,var(--accent) 48%,#071018 88%);
}
/* Hide the old CSS tick; the index mark lives on .vinyl-tick so RADIO can be an SVG wordmark. */
.platter b::before,
.platter b::after{content:none;width:0;height:0;background:none;transform:none}
.platter b .vinyl-tick{
  position:absolute;
  top:2px;
  left:50%;
  width:2px;
  height:7px;
  margin-left:-1px;
  background:#fff;
  border-radius:1px;
  box-shadow:0 0 3px #000a;
  pointer-events:none;
}

/* Tonearm: pivot on the rim, headshell over the grooves. Lifts when stopped, drops when .spinning. */
.platter i{
  z-index:5;
  width:62%;
  height:5px;
  right:-8%;
  top:14%;
  border-radius:2px 3px 3px 2px;
  background:linear-gradient(180deg,#f3f4f8 0%,#b4b8c2 42%,#5c616a 52%,#d5d7de 100%);
  box-shadow:0 2px 4px #000a,inset 0 1px 0 #fff8,inset 0 -1px 0 #0004;
  transform-origin:calc(100% - 7px) 50%;
  transform:rotate(-40deg) translateY(-9px);
  transition:transform .38s cubic-bezier(.22,.8,.25,1);
}
.platter.spinning i{
  transform:rotate(-62deg) translateY(1px);
}
.platter.scratching i{
  transform:rotate(-46deg) translateY(-6px);
}
/* Pivot base + cue-lift collar */
.platter i::before{
  content:"";
  position:absolute;
  right:-9px;
  top:50%;
  width:22px;
  height:22px;
  margin-top:-11px;
  border-radius:50%;
  background:
    radial-gradient(circle at 35% 30%,#f2f3f7,#9a9ea8 42%,#3e424a 68%,#d0d2d8 100%);
  box-shadow:
    0 0 0 3px #1c1d22,
    0 0 0 5px #5a5e66,
    0 3px 6px #0009,
    inset 0 1px 0 #fff8;
}
/* Headshell + stylus */
.platter i::after{
  content:"";
  position:absolute;
  left:-10px;
  top:50%;
  width:16px;
  height:9px;
  margin-top:-4px;
  border-radius:1px 2px 2px 1px;
  background:linear-gradient(180deg,#e8eaef,#7a7e88 55%,#c6c8ce);
  box-shadow:
    0 2px 3px #0008,
    inset 0 1px 0 #fff6,
    7px 6px 0 -3px #c5c6cb,
    8px 10px 0 -4px #d8d8de;
}

.platter.spinning{
  animation:none;
  box-shadow:
    0 0 0 3px #1a1b20,
    0 0 0 6px #4a4c55,
    0 0 0 7px #2a2c32,
    0 0 18px color-mix(in srgb,var(--accent) 40%,transparent),
    0 10px 18px rgba(0,0,0,.55);
}
.platter.drag-over,
.platter.scratching{
  box-shadow:
    0 0 0 3px var(--accent),
    0 0 0 6px #4a4c55,
    0 0 22px var(--accent),
    0 10px 18px rgba(0,0,0,.55);
}

/* Start/stop + pitch fader, red accent, no pink. */
[data-deck-play]{
  min-width:78px;
  font-size:10px;
  font-weight:800;
  letter-spacing:.4px;
  text-transform:uppercase;
  border-radius:8px;
  color:#fff;
  border:1px solid #6a1a1e;
  background:linear-gradient(180deg,#ff5a60 0%,#d01820 52%,#8e0f15 100%);
  box-shadow:inset 0 1px 0 #ffb0b255,0 3px 8px #0006;
}
[data-deck-play]:hover{
  border-color:#ff2a32;
  box-shadow:inset 0 1px 0 #ffb0b255,0 0 14px #ff2a3255,0 3px 8px #0006;
}
.volume.tempo{
  padding:3px 3px 2px;
  border-radius:8px;
  background:linear-gradient(180deg,#22232a,#141518);
  border:1px solid #33343c;
  box-shadow:inset 0 1px 0 #ffffff12,0 2px 6px #0005;
}
.volume.tempo .tempo-name{
  font-weight:800;
  letter-spacing:1px;
  color:#d0d0d8;
}
.volume input[type=range]{
  background:linear-gradient(90deg,#0a0a0d,#1a1b20 50%,#0a0a0d);
  border-radius:3px;
  box-shadow:inset 0 0 6px #000c,0 0 0 1px #2a2b32;
}
.deck .volume.tempo input[type=range]{accent-color:#ff2a32 !important}
.deck.cyan .volume:not(.tempo) input[type=range]{accent-color:var(--accent)}
.tempo-scale b.plus{color:#ff2a32}

@media (prefers-reduced-motion:reduce){
  .platter i{transition:none}
}

/* Download Console — header + sign-in. File is hosted on davilleradio.com. */
a.download-console{display:inline-flex;align-items:center;border:1px solid #6a1a1e;border-radius:20px;padding:7px 12px;font-size:11px;font-weight:800;letter-spacing:.3px;color:#fff;text-decoration:none;background:linear-gradient(180deg,#ff5a60 0%,#d01820 52%,#8e0f15 100%);white-space:nowrap;box-shadow:inset 0 1px 0 #ffb0b255}
a.download-console:hover{border-color:#ff2a32;box-shadow:inset 0 1px 0 #ffb0b255,0 0 12px #ff2a3255}
header a.download-console{margin-left:8px;flex-shrink:0}
.login-download{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin-top:18px}
.login-download .download-hint{margin:0;color:#aaa}
@media(max-width:650px){header a.download-console{font-size:10px;padding:6px 9px}}