:root{--or:#ff8a1f;--or2:#ffb347;--bg:#0b0b0b;--metal:#1d1d1f;--ink:#cfcfcf;--dim:#7c7c7c;--grn:#5cff6a}
*{box-sizing:border-box}
html,body{margin:0;background:radial-gradient(ellipse at 50% 0%,#2a2622 0%,#121110 40%,#070707 100%);color:var(--ink);font:12px/1.2 "Helvetica Neue",Arial,sans-serif;min-height:100vh;user-select:none}
body:before{content:"";position:fixed;inset:0;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.06'/%3E%3C/svg%3E");z-index:0}
.hidden{display:none!important}
.wall{position:relative;height:96px;display:flex;justify-content:center;align-items:flex-end;padding-bottom:6px}
.sign{position:absolute;left:50%;top:6px;transform:translateX(-50%);background:linear-gradient(#1a1714,#0f0d0b);padding:6px 26px 4px;border-radius:3px;box-shadow:0 8px 30px #000,inset 0 0 0 1px #2b2520;font:900 34px/0.9 Impact,"Arial Black",sans-serif;letter-spacing:2px;text-align:center;color:#c98a4b;text-shadow:0 0 18px rgba(255,150,60,.35)}
.topbar{position:absolute;inset:auto 18px 8px 18px;display:flex;gap:10px;align-items:center}
.brand{margin-right:auto;font-weight:700;letter-spacing:3px;color:#888}.brand .dot{color:var(--or);margin:0 4px;text-shadow:0 0 8px var(--or)}
#rig{position:relative;z-index:1;padding:0 14px 20px;max-width:1700px;margin:0 auto}
.row{display:grid;grid-template-columns:1fr minmax(430px,520px) 1fr;gap:10px;align-items:stretch;margin-bottom:12px}
.spacer{}
/* buttons */
.hwbtn{appearance:none;border:0;background:linear-gradient(#5a5a5a,#3a3a3a);color:#e8e8e8;font:700 10px/1.1 Arial,sans-serif;letter-spacing:.5px;padding:7px 9px;border-radius:3px;cursor:pointer;box-shadow:0 2px 0 #111,0 3px 6px #000,inset 0 1px 0 rgba(255,255,255,.25);text-align:center;display:inline-block}
.hwbtn:active,.hwbtn.flash{transform:translateY(1px);box-shadow:0 1px 0 #111,inset 0 1px 0 rgba(255,255,255,.2);background:linear-gradient(#777,#4a4a4a)}
.hwbtn.on{background:linear-gradient(#ffad55,#ff7a10);color:#1a0d00;box-shadow:0 0 12px rgba(255,138,31,.6),0 2px 0 #111}
/* deck */
.deck{position:relative}
.plinth{position:relative;height:100%;min-height:600px;background:linear-gradient(160deg,#2a2a2c 0%,#1a1a1b 45%,#141415 100%);border-radius:8px;box-shadow:0 20px 40px #000,inset 0 1px 0 rgba(255,255,255,.08),inset 0 0 0 1px #000;padding:14px 16px;overflow:hidden}
.plinth:after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(255,255,255,.012) 0 1px,transparent 1px 3px);pointer-events:none}
.logo{font:italic 700 17px Georgia,"Times New Roman",serif;color:#b9b9b9;letter-spacing:.5px}.logo small{display:block;font:500 9px Arial;letter-spacing:2px;color:#777;font-style:normal}
.deckinfo{position:absolute;top:14px;left:150px;right:120px;background:#060606;border-radius:3px;padding:5px 8px;box-shadow:inset 0 1px 4px #000,0 1px 0 rgba(255,255,255,.06)}
.tname{color:var(--or2);font:600 12px Menlo,Consolas,monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.trow{display:flex;gap:10px;align-items:center;margin-top:3px;font:11px Menlo,monospace;color:#aaa}
.tbpm b{color:var(--or);font-size:15px;text-shadow:0 0 6px rgba(255,138,31,.5)}
.beat{width:16px;height:16px;border-radius:50%;background:#2a1a0a;display:inline-flex;align-items:center;justify-content:center;font:700 9px Arial;color:#000;box-shadow:inset 0 1px 2px #000}
.beat.on{background:var(--or);box-shadow:0 0 10px var(--or)}.beat.down{background:#ff3b1f;box-shadow:0 0 14px #ff3b1f}
.mtag{margin-left:auto;font:700 9px Arial;letter-spacing:1px;color:#333;border:1px solid #333;padding:1px 4px;border-radius:2px}
.is-master .mtag{color:var(--or);border-color:var(--or);box-shadow:0 0 6px rgba(255,138,31,.4)}
.wave{display:block;width:100%;height:56px;margin:44px 0 10px;background:#050505;border-radius:3px;cursor:crosshair;box-shadow:inset 0 1px 4px #000}
.platter-wrap{position:relative;width:min(70%,400px);aspect-ratio:1;margin:0 0 0 2%}
.platter{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,#5b5b5b,#8a8a8a,#4a4a4a,#9a9a9a,#555,#8a8a8a,#5b5b5b);box-shadow:0 10px 30px #000,inset 0 0 0 2px #222;cursor:grab}
.dots{position:absolute;inset:3px;border-radius:50%;background:repeating-conic-gradient(from var(--rot,0deg),#cfcfcf 0 1.2deg,#2a2a2a 1.2deg 3deg);-webkit-mask:radial-gradient(circle,transparent 66%,#000 66.5%,#000 69%,transparent 69.5%,transparent 71%,#000 71.5%,#000 74%,transparent 74.5%);mask:radial-gradient(circle,transparent 66%,#000 66.5%,#000 69%,transparent 69.5%,transparent 71%,#000 71.5%,#000 74%,transparent 74.5%)}
.playing .dots{filter:drop-shadow(0 0 2px rgba(255,140,40,.6))}
.mat{position:absolute;inset:7%;border-radius:50%;background:#0d0d0d;box-shadow:inset 0 0 0 1px #000}
.vinyl{position:absolute;inset:2%;border-radius:50%;background:radial-gradient(circle,#111 0 30%,transparent 30.5%),repeating-radial-gradient(circle,#0c0c0c 0 1px,#191919 1.5px 2.5px,#0e0e0e 3px);box-shadow:0 0 0 2px #050505,inset 0 0 20px #000}
.sheen{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 20deg,transparent 0 30deg,rgba(255,255,255,.07) 45deg,transparent 60deg 200deg,rgba(255,255,255,.05) 215deg,transparent 230deg)}
.label{position:absolute;inset:33%;border-radius:50%;background:radial-gradient(circle at 40% 35%,#d6a76f,#b78248 70%,#9c6a34);display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:inset 0 0 0 3px rgba(0,0,0,.2);color:#3a2410}
.label .lt{font:900 clamp(8px,1vw,14px) Impact,Arial Black;letter-spacing:1px;max-width:80%;text-align:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.label .lb{font:600 8px Arial;letter-spacing:1px;margin-top:2px;transform:translateY(16px)}
.label i{position:absolute;width:6%;height:6%;border-radius:50%;background:linear-gradient(#eee,#777);box-shadow:0 1px 2px #000}
.tonearm{position:absolute;top:130px;right:calc(30% - 90px);width:96px;height:320px;pointer-events:none;filter:drop-shadow(4px 10px 6px rgba(0,0,0,.8))}
.arm{transform-origin:80px 40px;transition:transform .5s ease}
.armrest{position:absolute;top:240px;right:calc(30% - 80px);width:10px;height:28px;background:#111;border-radius:3px;box-shadow:inset 0 0 0 1px #333}
.strobe-light{position:absolute;left:18px;bottom:150px;width:22px;height:22px;border-radius:50%;background:radial-gradient(#444,#111);box-shadow:inset 0 0 0 2px #2b2b2b}
.playing .strobe-light{background:radial-gradient(#ffd9a8,#ff7a10 60%,#401c00);box-shadow:0 0 14px var(--or)}
.controls{position:absolute;left:16px;right:20px;bottom:16px;display:flex;gap:10px;align-items:flex-end}
.startstop{width:58px;height:46px;font-size:9px;background:linear-gradient(#cfcfcf,#9b9b9b);color:#111}
.startstop.on{background:linear-gradient(#ffad55,#ff7a10)}
.btncol{display:flex;flex-direction:column;gap:6px}
.btncol .hwbtn{min-width:56px}
.bendrow{display:flex;gap:4px}.bendrow .hwbtn{min-width:26px;padding:7px 0}
.sync{color:var(--or2)}
.pitchbox{margin-left:auto;display:flex;flex-direction:column;align-items:center;gap:4px;position:absolute;right:0;bottom:0}
.pread{font:10px Menlo,monospace;color:#888;background:#050505;padding:3px 6px;border-radius:2px}.pread b{color:var(--grn);text-shadow:0 0 5px rgba(92,255,106,.6)}
.preset{padding:3px 8px}
input.pitch{writing-mode:vertical-lr;direction:ltr;width:34px;height:230px;appearance:none;-webkit-appearance:slider-vertical;background:transparent}
input[type=range]{accent-color:#bbb;cursor:pointer}
input.pitch,input.upfader,#xfader{-webkit-appearance:none;appearance:none}
input.pitch,input.upfader{background:transparent}input.pitch::-webkit-slider-runnable-track,input.upfader::-webkit-slider-runnable-track{width:100%;background:linear-gradient(90deg,transparent calc(50% - 3px),#000 calc(50% - 3px),#050505 calc(50% + 3px),transparent calc(50% + 3px)),repeating-linear-gradient(0deg,#444 0 1px,transparent 1px 12px);background-size:100% 100%,30% 100%;background-repeat:no-repeat;background-position:center,left}
input.pitch::-webkit-slider-thumb,input.upfader::-webkit-slider-thumb{-webkit-appearance:none;width:30px;height:16px;margin-left:0;border-radius:2px;background:linear-gradient(#ddd 0 45%,#222 45% 55%,#999 55%);box-shadow:0 3px 6px #000}
input.pitch::-moz-range-track,input.upfader::-moz-range-track{width:6px;background:#050505;box-shadow:0 0 0 1px #333}
input.pitch::-moz-range-thumb,input.upfader::-moz-range-thumb{width:30px;height:14px;border-radius:2px;background:linear-gradient(#ddd 0 45%,#222 45% 55%,#999 55%);border:0}
.warn{position:absolute;left:50%;top:48%;transform:translate(-50%,-50%) scale(.9);background:rgba(20,6,0,.92);border:1px solid var(--or);color:var(--or2);padding:8px 12px;border-radius:4px;font-weight:700;opacity:0;transition:.2s;pointer-events:none;z-index:5;text-align:center}
.warn.show{opacity:1;transform:translate(-50%,-50%) scale(1)}
.dropzone{position:absolute;inset:0;display:none;align-items:center;justify-content:center;background:rgba(255,138,31,.12);border:2px dashed var(--or);border-radius:8px;font:700 18px Arial;color:var(--or);z-index:6}
.plinth.over .dropzone{display:flex}
/* mixer */
.mixer{background:linear-gradient(#202022,#161617);border-radius:6px;box-shadow:0 20px 40px #000,inset 0 1px 0 rgba(255,255,255,.08),inset 0 0 0 1px #000;padding:10px 10px 12px;display:flex;flex-direction:column}
.mx-title{text-align:center;font:700 10px Arial;letter-spacing:2px;color:#bbb;margin-bottom:8px}
.mx-body{display:grid;grid-template-columns:repeat(4,1fr) 1.15fr;gap:0;flex:1}
.ch,.mstr{display:flex;flex-direction:column;align-items:center;gap:2px;padding:0 4px;border-right:1px solid #0a0a0a;box-shadow:1px 0 0 rgba(255,255,255,.04)}
.ch.dim{opacity:.45}
.chlbl{font:700 10px Arial;color:#ddd;letter-spacing:1px;margin-bottom:4px}.chlbl small{color:var(--or)}
.kl{font:600 7.5px Arial;color:var(--dim);letter-spacing:1px;margin-bottom:3px}
.knob{position:relative;width:34px;height:34px;border-radius:50%;cursor:ns-resize;background:radial-gradient(circle,#111 58%,transparent 60%),repeating-conic-gradient(from -135deg,#666 0 1.5deg,transparent 1.5deg 27deg);-webkit-mask:radial-gradient(circle,#000 70%,transparent 71%) ;touch-action:none}
.knob .cap{position:absolute;inset:5px;border-radius:50%;background:radial-gradient(circle at 40% 30%,#5a5a5a,#1d1d1d 60%,#0d0d0d);box-shadow:0 3px 5px #000,inset 0 1px 0 rgba(255,255,255,.2)}
.knob .ind{position:absolute;left:50%;top:2px;width:2px;height:9px;margin-left:-1px;background:#eee;border-radius:1px}
.knob.ring{background:conic-gradient(from -135deg,transparent 0deg,transparent calc(var(--a,0)*1deg + 135deg),transparent 0),radial-gradient(circle,#111 58%,transparent 60%);box-shadow:0 0 0 2px #2a1300,0 0 10px rgba(255,138,31,.55);border:2px solid var(--or)}
.knob.big{width:44px;height:44px}
.knob.big .cap{background:radial-gradient(circle at 40% 30%,#f2f2f2,#9a9a9a 55%,#555)}.knob.big .ind{background:#222}
.assign{display:flex;margin:4px 0}.assign button{border:0;background:#2a2a2a;color:#888;font:700 8px Arial;width:17px;height:16px;cursor:pointer;box-shadow:inset 0 0 0 1px #000}
.assign button.on{background:#ffc93a;color:#000;box-shadow:0 0 6px rgba(255,201,58,.6)}
.faderzone{display:flex;gap:6px;align-items:stretch;flex:1;min-height:170px;margin-top:4px}
.vu{position:relative;width:6px;background:repeating-linear-gradient(0deg,#0a0a0a 0 3px,#000 3px 4px);border-radius:1px;overflow:hidden;box-shadow:0 0 0 1px #000}
.vu i{position:absolute;left:0;right:0;bottom:0;height:0;background:linear-gradient(0deg,#2bd94a 0%,#2bd94a 60%,#ffd23a 75%,#ff8a1f 88%,#ff2a1a 100%);background-size:100% 170px;background-position:bottom;-webkit-mask:repeating-linear-gradient(0deg,#000 0 3px,transparent 3px 4px)}
.vu.clip{box-shadow:0 0 6px red}
input.upfader{writing-mode:vertical-lr;direction:rtl;width:30px;flex:1;min-height:150px}
.mstr .mvu{display:flex;gap:4px;height:150px;margin:10px 0}.mstr .vu{width:8px}
.masterbpm{display:flex;flex-direction:column;align-items:center;background:#050505;padding:5px 8px;border-radius:3px;font:10px Menlo,monospace;color:#777}
.masterbpm b{color:var(--or);font-size:18px;text-shadow:0 0 8px rgba(255,138,31,.5)}
.xf{position:relative;display:flex;align-items:center;justify-content:center;gap:8px;margin-top:10px;padding-top:6px;border-top:1px solid #0a0a0a;font:700 10px Arial;color:#888}
#xfader{width:62%;height:28px;background:transparent}
#xfader::-webkit-slider-runnable-track{height:6px;background:#050505;border-radius:3px;box-shadow:0 0 0 1px #333}
#xfader::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:30px;margin-top:-12px;border-radius:2px;background:linear-gradient(90deg,#999,#ddd 45%,#222 45% 55%,#ddd 55%,#999);box-shadow:0 3px 6px #000}
#xfader::-moz-range-track{height:6px;background:#050505}#xfader::-moz-range-thumb{width:16px;height:28px;border:0;border-radius:2px;background:linear-gradient(90deg,#999,#ddd 45%,#222 45% 55%,#ddd 55%,#999)}
.xfl{position:absolute;bottom:-12px;font:600 7.5px Arial;letter-spacing:1px;color:#555}
#help{position:fixed;inset:0;background:rgba(0,0,0,.7);display:flex;align-items:center;justify-content:center;z-index:50}
.helpbox{background:#18181a;border:1px solid #333;border-radius:6px;padding:18px 24px;max-width:520px;box-shadow:0 20px 50px #000}
.helpbox h3{margin:0 0 10px;color:var(--or)}.helpbox td,.helpbox th{padding:3px 10px;text-align:left}.helpbox th{color:var(--or2)}.helpbox p{color:#999}
#rowCD .plinth{min-height:600px}
@media (max-width:1150px){.row{grid-template-columns:1fr 1fr}.mixer{grid-column:1/-1;order:3}}
/* ---------- room view ---------- */
.room{position:fixed;inset:0;overflow:hidden;z-index:20;background:#000;transition:opacity .45s ease .55s,visibility 0s linear 1s}
.stage{position:absolute;left:50%;top:50%;width:max(100vw,150vh);aspect-ratio:3/2;transform:translate(-50%,-50%) scale(1);transform-origin:50% 50%;transition:transform 1s cubic-bezier(.6,.05,.25,1),filter 1s}
.stage img{position:absolute;inset:0;width:100%;height:100%;display:block;user-select:none}
.zooming .stage{filter:brightness(1.1)}
body:not(.in-room) .room{opacity:0;visibility:hidden;pointer-events:none}
body.in-room .room{transition:opacity .35s ease}
#detail{transition:opacity .5s ease .6s}
body.in-room #detail{opacity:0;pointer-events:none;transition:opacity .25s;height:100vh;overflow:hidden}
.hot{position:absolute;border:0;background:transparent;cursor:zoom-in;border-radius:10px;transition:box-shadow .25s,background .25s}
.hot span{position:absolute;left:50%;bottom:-26px;transform:translateX(-50%);font:700 11px Arial;letter-spacing:2px;color:#ffcf99;background:rgba(10,6,2,.75);padding:4px 9px;border-radius:3px;opacity:0;transition:.25s;white-space:nowrap;border:1px solid rgba(255,150,60,.5)}
.hot:hover,.hot:focus-visible{background:rgba(255,160,70,.07);box-shadow:0 0 0 2px rgba(255,160,70,.55),0 0 30px rgba(255,140,40,.35);outline:0}
.hot:hover span,.hot:focus-visible span{opacity:1}
.neon{position:absolute;left:68%;top:9%;width:15%;height:22%;border-radius:50%;background:radial-gradient(ellipse,rgba(255,150,50,.45),rgba(255,120,30,.12) 50%,transparent 70%);mix-blend-mode:screen;pointer-events:none;animation:flicker 7s infinite}
@keyframes flicker{0%,100%{opacity:.8}8%{opacity:.95}9%{opacity:.35}10%{opacity:.9}11%{opacity:.5}12%,40%{opacity:.85}55%{opacity:1}57%{opacity:.6}58%,80%{opacity:.9}}
.rplat{position:absolute;width:17%;aspect-ratio:1;transform:translate(-50%,-50%) scaleY(.36);pointer-events:none;opacity:0;transition:opacity .6s}
.rplat i{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,transparent 0 40deg,rgba(255,255,255,.18) 55deg,transparent 70deg 220deg,rgba(255,255,255,.12) 235deg,transparent 250deg);box-shadow:0 0 0 2px rgba(255,90,40,.55),0 0 22px 4px rgba(255,90,40,.35);animation:spin 1.8s linear infinite;mix-blend-mode:screen}
.rplat.on{opacity:1}
@keyframes spin{to{transform:rotate(360deg)}}
.mixglow{position:absolute;left:40%;top:47%;width:22%;height:16%;border-radius:8px;background:radial-gradient(ellipse,rgba(255,140,40,.25),transparent 70%);mix-blend-mode:screen;opacity:0;pointer-events:none;transition:opacity .4s}
.mixglow.on{animation:pulse .5s ease-out}
@keyframes pulse{0%{opacity:.9}100%{opacity:0}}
.roomhint{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);font:600 12px Arial;letter-spacing:1px;color:#e8c49a;background:rgba(0,0,0,.55);padding:7px 14px;border-radius:20px;transition:opacity .3s}
.zooming .roomhint,.zooming .hot{opacity:0}
.backbtn{position:fixed;left:16px;top:12px;z-index:30;opacity:0;pointer-events:none;transition:opacity .4s .8s}
body:not(.in-room) .backbtn{opacity:1;pointer-events:auto}
.backbtn small{opacity:.6;margin-left:4px}
.focus-pulse{animation:fp 1.6s ease-out}
@keyframes fp{0%{box-shadow:0 0 0 3px var(--or),0 0 40px rgba(255,138,31,.7)}100%{box-shadow:0 20px 40px #000}}
.topbar .brand{margin-left:200px}
#toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);max-width:min(600px,92vw);background:#2a0d05;border:1px solid #ff5a2a;color:#ffd2b8;padding:12px 16px;border-radius:6px;font:600 13px Arial;box-shadow:0 10px 30px #000;opacity:0;pointer-events:none;transition:.25s;z-index:100}
#toast.show{opacity:1;transform:translate(-50%,0)}
#audioBanner{position:fixed;left:50%;top:12px;transform:translateX(-50%);z-index:101;display:none;background:linear-gradient(#ffad55,#ff7a10);color:#1a0d00;border:0;border-radius:20px;padding:12px 18px;font:700 14px Arial;cursor:pointer;box-shadow:0 0 20px rgba(255,138,31,.6)}
#audioBanner.show{display:block}
.knob,.platter,.hot,input[type=range]{touch-action:none}
button,label{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
/* portrait / phone: show the whole room photo */
@media (max-aspect-ratio:4/3){.stage{width:100vw}.room{background:radial-gradient(ellipse at 50% 50%,#2a1a0e,#050403)}}
@media (max-width:760px){
  body{font-size:13px}
  .wall{height:auto;flex-direction:column;align-items:center;padding:52px 10px 8px}
  .sign{position:static;transform:none;font-size:24px}
  .topbar{position:static;margin-top:8px;justify-content:center;flex-wrap:wrap}.topbar .brand{display:none}
  .backbtn{top:8px;left:8px;padding:10px 12px}
  #rig{padding:0 6px 30px}
  .row{display:flex;flex-direction:column;gap:10px}
  .spacer{display:none}
  .mixer{order:0}
  .plinth{min-height:0;padding:10px;display:flex;flex-direction:column}
  #rowCD .plinth{min-height:0}
  .deckinfo{position:static;margin:6px 0 0}
  .wave{margin:8px 0;height:50px}
  .platter-wrap{width:62%;margin:4px 0 8px 4%}
  .tonearm{top:auto;bottom:auto;margin-top:0;right:22%;width:22%;height:auto;aspect-ratio:96/320;transform:translateY(-6%)}
  .tonearm{position:absolute;top:150px}
  .armrest,.strobe-light{display:none}
  .controls{position:relative;left:auto;right:auto;bottom:auto;flex-wrap:wrap;gap:8px;padding-right:56px}
  .hwbtn{padding:11px 10px;font-size:11px}
  .btncol .hwbtn{min-width:64px}.bendrow .hwbtn{min-width:30px}
  .startstop{width:64px;height:56px}
  .pitchbox{position:absolute;right:0;bottom:0}
  input.pitch{height:150px}
  .mx-body{grid-template-columns:repeat(4,1fr) 1.1fr}
  .knob{width:38px;height:38px}
  .faderzone{min-height:140px}input.upfader{min-height:130px}
  .mstr .mvu{height:110px}
  #xfader{width:75%;height:40px}
  .roomhint{font-size:11px;bottom:12px;width:max-content;max-width:90vw;text-align:center}
}
.mini,.edge,#tabbar{display:none}
/* ---------- portrait phone: horizontal panning console ---------- */
@media (max-width:760px) and (orientation:portrait){
  html,body{height:100%;overflow:hidden;overscroll-behavior:none}
  #detail{height:100dvh;display:flex;flex-direction:column}
  .wall{flex:0 0 auto;height:48px;padding:0 8px;flex-direction:row;justify-content:flex-end;align-items:center}
  .sign{position:absolute;left:50%;top:6px;transform:translateX(-50%);font-size:15px;padding:3px 10px 2px;line-height:.95}
  .topbar{margin:0;gap:6px}.topbar .hwbtn{padding:8px 8px;font-size:9px}#helpBtn{display:none}
  .backbtn{top:6px;left:6px;padding:9px 10px;font-size:10px}.backbtn small{display:none}
  #rig{flex:1 1 auto;display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:0;max-width:none;margin:0;gap:0;min-height:0}
  #rig::-webkit-scrollbar{display:none}
  .row{display:contents}
  .spacer{display:none}
  .deck,.mixer{flex:0 0 100vw;width:100vw;height:100%;scroll-snap-align:center;scroll-snap-stop:always;padding:6px 8px 8px;margin:0}
  .mixer{order:0;border-radius:0;box-shadow:none;background:linear-gradient(#202022,#151516);padding:8px 6px 10px}
  .plinth{height:100%;min-height:0!important;display:flex;flex-direction:column;padding:10px 10px 8px}
  .logo{font-size:15px}
  .deckinfo{position:static;margin:4px 0 0}
  .tname{font-size:13px}.tbpm b{font-size:18px}.beat{width:20px;height:20px}
  .wave{height:46px;margin:6px 0;flex:0 0 auto}
  .platter-wrap{width:min(70vw,34dvh);margin:2px auto 4px 2vw;flex:0 0 auto}
  .tonearm{position:absolute;top:calc(160px);right:12vw;width:min(20vw,10dvh);height:auto}
  .controls{position:relative;flex:1 1 auto;display:grid;grid-template-columns:repeat(3,auto) 1fr;grid-template-rows:auto auto;align-content:end;gap:8px;padding:0;min-height:0}
  .controls .startstop{grid-row:1/3;width:72px;height:auto;min-height:100px;font-size:12px}
  .btncol{display:contents}
  .controls .hwbtn{min-width:0;padding:14px 8px;font-size:12px}
  .bendrow .hwbtn{padding:14px 12px}
  .pitchbox{position:absolute;right:4px;bottom:120px;top:auto}
  input.pitch{height:min(26dvh,220px);width:48px}
  input.pitch::-webkit-slider-thumb{width:46px;height:24px}
  .controls{padding-right:0}
  .mini{display:flex;align-items:center;gap:6px;margin-top:8px;padding:6px;background:#0c0c0c;border-radius:4px;box-shadow:inset 0 1px 3px #000}
  .mini .mlbl{font:700 9px Arial;color:#888;letter-spacing:1px;white-space:nowrap}
  .mini .hwbtn{padding:10px 8px;font-size:11px}
  .mini .m-xf{flex:1;min-width:60px;height:34px}
  .mx-title{font-size:9px;margin-bottom:4px}
  .mx-body{grid-template-columns:repeat(4,1fr) 1fr;flex:1 1 auto;min-height:0}
  .ch,.mstr{gap:1px;padding:0 2px}
  .knob{width:min(15vw,44px);height:min(15vw,44px)}.knob.big{width:52px;height:52px}
  .kl{font-size:8px;margin-bottom:2px}
  .assign button{width:20px;height:24px;font-size:9px}
  .faderzone{flex:1 1 auto;min-height:0}input.upfader{min-height:0;height:100%;width:40px}
  input.upfader::-webkit-slider-thumb{width:38px;height:24px}
  .mstr .mvu{flex:1 1 auto;height:auto;min-height:80px}
  #xfader{width:78%;height:48px}#xfader::-webkit-slider-thumb{width:26px;height:42px;margin-top:-18px}
  .xf{margin-top:6px}
  .edge{display:flex;position:fixed;top:50%;z-index:15;width:28px;height:64px;align-items:center;justify-content:center;border:0;background:rgba(0,0,0,.55);color:var(--or);font:700 28px Arial;transition:opacity .2s}
  .edge.prev{left:0;border-radius:0 8px 8px 0}.edge.next{right:0;border-radius:8px 0 0 8px}
  .edge.off{opacity:0;pointer-events:none}
  body.in-room .edge,body.in-room #tabbar{display:none}
  #tabbar{display:flex;flex:0 0 auto;justify-content:center;align-items:center;gap:4px;height:calc(46px + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);background:#0b0b0b;border-top:1px solid #222}
  #tabbar button{border:0;background:transparent;color:#777;font:700 13px Arial;letter-spacing:1px;padding:10px 12px;border-radius:16px}
  #tabbar button.on{color:#1a0d00;background:linear-gradient(#ffad55,#ff7a10);box-shadow:0 0 10px rgba(255,138,31,.5)}
  #tabbar i{color:#444;font-style:normal}
  .focus-pulse{animation:none}
}
/* ================= realism layer ================= */
:root{--noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  --brush:repeating-linear-gradient(90deg,rgba(255,255,255,.025) 0 1px,rgba(0,0,0,.05) 1px 2px,rgba(255,255,255,.012) 2px 4px)}
.plinth{background:var(--noise),var(--brush),radial-gradient(ellipse at 30% -10%,rgba(255,255,255,.10),transparent 55%),linear-gradient(165deg,#2d2d30 0%,#1c1c1e 45%,#121213 100%);background-blend-mode:overlay,normal,normal,normal;
  box-shadow:0 30px 50px -10px rgba(0,0,0,.9),0 8px 14px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.14),inset 0 -2px 0 rgba(0,0,0,.6),inset 1px 0 0 rgba(255,255,255,.05),inset -1px 0 0 rgba(0,0,0,.5);border:1px solid #070707}
.plinth:after{display:none}
.logo{background:linear-gradient(#e6e6e6,#9a9a9a);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 1px 0 rgba(0,0,0,.4)}
.logo small{-webkit-text-fill-color:#8a8a8a}
/* platter: machined aluminium rim + 4 rows of strobe dots */
.platter{background:radial-gradient(circle,transparent 63%,rgba(0,0,0,.6) 63.5%,transparent 65%),conic-gradient(from 210deg,#6b6b6b,#d9d9d9 8%,#7a7a7a 18%,#4d4d4d 30%,#bfbfbf 45%,#6a6a6a 55%,#e8e8e8 68%,#5e5e5e 80%,#a8a8a8 92%,#6b6b6b);
  box-shadow:0 18px 30px rgba(0,0,0,.85),0 4px 8px rgba(0,0,0,.7),inset 0 0 0 1px rgba(255,255,255,.25),inset 0 0 0 3px #2a2a2a}
.dots{inset:0;will-change:transform;background:repeating-conic-gradient(#f0f0f0 0 1.1deg,#2e2e2e 1.1deg 2.6deg);
  -webkit-mask:radial-gradient(circle closest-side,transparent 89.6%,#000 90%,#000 91.8%,transparent 92.2%,transparent 92.6%,#000 93%,#000 94.6%,transparent 95%,transparent 95.4%,#000 95.8%,#000 97.2%,transparent 97.6%,transparent 98%,#000 98.3%,#000 99.5%,transparent 99.8%);
  mask:radial-gradient(circle closest-side,transparent 89.6%,#000 90%,#000 91.8%,transparent 92.2%,transparent 92.6%,#000 93%,#000 94.6%,transparent 95%,transparent 95.4%,#000 95.8%,#000 97.2%,transparent 97.6%,transparent 98%,#000 98.3%,#000 99.5%,transparent 99.8%)}
.strobe-glow{position:absolute;inset:0;border-radius:50%;pointer-events:none;background:radial-gradient(circle at 8% 88%,rgba(255,120,30,.75),rgba(255,100,20,.25) 18%,transparent 32%);mix-blend-mode:screen;opacity:.15;transition:opacity .4s}
.playing .strobe-glow{opacity:1}
.playing .dots{filter:none}
.mat{inset:10.5%;background:var(--noise),radial-gradient(circle,#161616,#0a0a0a);background-blend-mode:overlay;box-shadow:inset 0 0 0 1px #000,0 0 0 2px rgba(255,255,255,.06)}
.vinyl{inset:1.5%;will-change:transform;background:
  radial-gradient(circle,transparent 0 31%,#0a0a0a 31% 33.5%,transparent 33.5% 34.5%,rgba(255,255,255,.05) 34.5% 35%,transparent 35% 60%,rgba(255,255,255,.04) 60% 60.6%,transparent 60.6% 78%,rgba(255,255,255,.04) 78% 78.5%,transparent 78.5% 97%,#050505 97%),
  repeating-radial-gradient(circle,#0b0b0b 0 .7px,#1c1c1c 1px 1.6px,#101010 2px);
  box-shadow:0 0 0 1px #000,inset 0 0 0 3px #090909,0 6px 12px rgba(0,0,0,.6)}
.sheen{position:absolute;inset:3.5%;border-radius:50%;pointer-events:none;
  background:conic-gradient(from 0deg,transparent 0 20deg,rgba(255,255,255,.13) 38deg,rgba(255,255,255,.02) 55deg,transparent 70deg 190deg,rgba(255,255,255,.10) 214deg,rgba(255,255,255,.02) 232deg,transparent 245deg),radial-gradient(circle at 35% 25%,rgba(255,255,255,.06),transparent 45%);
  -webkit-mask:radial-gradient(circle,transparent 34%,#000 36%);mask:radial-gradient(circle,transparent 34%,#000 36%)}
.label{background:radial-gradient(circle,transparent 0 9%,rgba(0,0,0,.18) 9.5% 10%,transparent 10.5%),radial-gradient(circle at 40% 32%,#e2b37a,#c08b4f 60%,#9d6b35);box-shadow:inset 0 0 0 2px rgba(60,30,0,.35),inset 0 0 12px rgba(80,40,0,.35)}
.label i{background:radial-gradient(circle at 35% 30%,#fff,#9a9a9a 50%,#444);width:5%;height:5%}
/* strobe lamp: chrome turret with orange lens */
.strobe-light{width:26px;height:26px;background:radial-gradient(circle at 40% 35%,#777,#222 60%,#111);box-shadow:0 3px 6px #000,inset 0 1px 0 rgba(255,255,255,.3)}
.strobe-light:after{content:"";position:absolute;inset:7px;border-radius:50%;background:radial-gradient(#5a2a08,#1e0c02)}
.playing .strobe-light:after{background:radial-gradient(#fff3d8,#ff9a2a 45%,#c84a00);box-shadow:0 0 12px 3px rgba(255,140,30,.9)}
.playing .strobe-light{background:radial-gradient(circle at 40% 35%,#888,#222 60%,#111);box-shadow:0 3px 6px #000,0 0 22px rgba(255,140,30,.5)}
.tonearm{filter:drop-shadow(6px 12px 6px rgba(0,0,0,.75))}
.armrest{background:linear-gradient(90deg,#333,#777 50%,#222);box-shadow:0 3px 4px #000}
/* pitch fader: recessed slot, printed scale, zero LED */
.ptrack{position:relative;display:flex;padding:6px 4px;background:linear-gradient(90deg,#0d0d0d,#1b1b1b 40%,#0e0e0e);border-radius:4px;box-shadow:inset 0 2px 5px #000,0 1px 0 rgba(255,255,255,.08)}
.ptrack span{position:absolute;left:3px;font:700 7px Arial;color:#aaa;transform:translateY(-50%)}
.ptrack span:nth-child(1){top:8%}.ptrack span:nth-child(2){top:29%}.ptrack span:nth-child(3){top:50%}.ptrack span:nth-child(4){top:71%}.ptrack span:nth-child(5){top:92%}
.ptrack span.z{color:#eee}
.zled{position:absolute;right:3px;top:50%;width:5px;height:5px;margin-top:-2.5px;border-radius:50%;background:#1a3a1a}
.zled.on{background:#6dff6d;box-shadow:0 0 6px #6dff6d}
.ptrack input.pitch{margin-left:12px}
input.pitch::-webkit-slider-runnable-track{background:linear-gradient(90deg,transparent calc(50% - 2px),#000 calc(50% - 2px) calc(50% + 2px),transparent calc(50% + 2px)),repeating-linear-gradient(0deg,#555 0 1px,transparent 1px 8%);background-size:100% 100%,25% 100%;background-repeat:no-repeat;background-position:center,left}
input.pitch::-webkit-slider-thumb,input.upfader::-webkit-slider-thumb{background:linear-gradient(180deg,#f2f2f2 0%,#bdbdbd 30%,#e9e9e9 44%,#111 46% 54%,#d0d0d0 56%,#9a9a9a 75%,#6a6a6a 100%);border:1px solid #222;box-shadow:0 6px 8px rgba(0,0,0,.8),0 2px 2px #000,inset 0 1px 0 #fff}
/* buttons: bevelled with depth */
.hwbtn{background:linear-gradient(#606063,#3c3c3e 60%,#333335);border:1px solid #111;box-shadow:0 3px 0 #0a0a0a,0 5px 8px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.28),inset 0 -1px 0 rgba(0,0,0,.4);text-shadow:0 -1px 0 rgba(0,0,0,.6)}
.startstop{background:linear-gradient(#e8e8e8,#b5b5b5 55%,#9e9e9e);color:#111;text-shadow:0 1px 0 rgba(255,255,255,.6)}
/* mixer faceplate */
.mixer{background:var(--noise),var(--brush),linear-gradient(#232326,#18181a 50%,#141415);background-blend-mode:overlay,normal,normal;box-shadow:0 30px 50px -10px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.12),inset 0 -2px 0 rgba(0,0,0,.6);border:1px solid #070707}
.mx-title,.chlbl,.kl{text-shadow:0 0 1px rgba(255,255,255,.15)}
.kl{color:#9a9a9a;font-weight:700}
/* rubberised knob caps with knurl + indicator line */
.knob{background:radial-gradient(circle,#000 60%,transparent 62%),repeating-conic-gradient(from -135deg,#8a8a8a 0 1.4deg,transparent 1.4deg 27deg);-webkit-mask:none}
.knob .cap{inset:4px;background:radial-gradient(circle at 50% 50%,transparent 58%,rgba(0,0,0,.35) 60%,transparent 62%),repeating-conic-gradient(#1a1a1a 0 6deg,#262626 6deg 12deg),radial-gradient(circle at 38% 30%,#4a4a4a,#151515 70%);
  background-blend-mode:normal,normal,normal;box-shadow:0 4px 6px rgba(0,0,0,.85),0 1px 1px #000,inset 0 1px 1px rgba(255,255,255,.18)}
.knob .cap:before{content:"";position:absolute;inset:22%;border-radius:50%;background:radial-gradient(circle at 40% 30%,#3c3c3c,#141414);box-shadow:inset 0 1px 1px rgba(255,255,255,.15),0 1px 2px #000}
.knob .ind{top:1px;width:2px;height:42%;background:#f4f4f4;box-shadow:0 0 2px rgba(255,255,255,.6);z-index:1}
.knob.big .cap{background:repeating-conic-gradient(#cfcfcf 0 5deg,#a5a5a5 5deg 10deg),radial-gradient(circle,#ddd,#888)}
.knob.big .cap:before{background:radial-gradient(circle at 40% 30%,#fafafa,#b0b0b0 60%,#777)}.knob.big .ind{background:#111;box-shadow:none}
.knob.ring{border:2px solid var(--or);box-shadow:0 0 0 1px #2a1300,0 0 12px rgba(255,138,31,.65),inset 0 0 6px rgba(255,138,31,.4)}
/* LED meters with glow */
.vu{background:repeating-linear-gradient(0deg,#141414 0 3px,#050505 3px 4px)}
.vu i{filter:drop-shadow(0 0 3px rgba(80,255,100,.55))}
.assign button.on{box-shadow:0 0 8px rgba(255,201,58,.8),inset 0 1px 0 rgba(255,255,255,.5)}
#xfader::-webkit-slider-thumb{background:linear-gradient(90deg,#6a6a6a,#e8e8e8 30%,#bdbdbd 44%,#111 46% 54%,#d0d0d0 56%,#f2f2f2 70%,#6a6a6a);border:1px solid #222;box-shadow:0 6px 8px rgba(0,0,0,.8)}
/* portrait fixes */
@media (max-width:760px) and (orientation:portrait){
  .mixer{display:flex;flex-direction:column;min-height:0}
  .mx-body{min-height:0;overflow:hidden}
  .ch,.mstr{min-height:0}
  .faderzone{min-height:0;overflow:hidden}
  input.upfader{height:auto;flex:1;min-height:0}
  .ptrack input.pitch{margin-left:12px}
  .pitchbox{bottom:118px}
  .tonearm{top:150px;right:9vw;width:min(24vw,12dvh)}
  .strobe-light{display:block;left:12px;bottom:auto;top:calc(150px + min(70vw,34dvh) - 20px)}
}
/* ---------- Beat FX unit ---------- */
.fxunit{display:grid;grid-template-columns:auto auto 1fr auto auto auto;grid-template-areas:"lcd lcd lcd lcd lcd lcd" "ch type type par lev on";gap:6px 10px;align-items:center;margin-top:8px;padding:8px 10px;border-radius:5px;
  background:var(--noise),linear-gradient(#1b1b1d,#121213);background-blend-mode:overlay,normal;box-shadow:inset 0 1px 3px #000,inset 0 0 0 1px #0a0a0a,0 1px 0 rgba(255,255,255,.06)}
.fxlcd{grid-area:lcd;display:flex;justify-content:space-between;background:linear-gradient(#081208,#0d1a0d);border-radius:3px;padding:4px 8px;font:700 11px Menlo,monospace;color:#7dffa0;text-shadow:0 0 6px rgba(80,255,120,.6);box-shadow:inset 0 1px 4px #000}
.fxlcd span{color:#b8ffc8}
.fxgrp{display:flex;flex-direction:column;align-items:flex-start;gap:3px}
.fxgrp:nth-of-type(2){grid-area:ch}.fxgrp:nth-of-type(3){grid-area:type}
.seg{display:flex;border-radius:3px;overflow:hidden;box-shadow:0 2px 3px #000}
.seg button{border:0;border-right:1px solid #000;background:linear-gradient(#4a4a4c,#2c2c2e);color:#bbb;font:700 9px Arial;padding:6px 7px;cursor:pointer;min-width:22px;box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}
.seg button.on{background:linear-gradient(#ffc066,#ff8a1f);color:#1a0d00;box-shadow:0 0 8px rgba(255,138,31,.6),inset 0 1px 0 rgba(255,255,255,.5)}
.seg.beats{margin-top:3px}.seg.dim{opacity:.35}
.fxk{display:flex;flex-direction:column;align-items:center;gap:2px}
.fxk:nth-of-type(4){grid-area:par}.fxk:nth-of-type(5){grid-area:lev}
.fxon{grid-area:on;width:50px;height:50px;border-radius:6px;border:1px solid #111;cursor:pointer;font:800 11px/1.1 Arial;color:#552a00;background:radial-gradient(circle at 50% 40%,#5a3510,#2a1806);box-shadow:0 3px 0 #0a0a0a,0 5px 8px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.15)}
.fxon.on{color:#1a0800;background:radial-gradient(circle at 50% 40%,#ffe0b0,#ff8a1f 55%,#c85a00);box-shadow:0 0 18px rgba(255,138,31,.85),0 3px 0 #0a0a0a,inset 0 1px 0 rgba(255,255,255,.6);animation:fxpulse 1.2s ease-in-out infinite}
@keyframes fxpulse{50%{box-shadow:0 0 8px rgba(255,138,31,.5),0 3px 0 #0a0a0a,inset 0 1px 0 rgba(255,255,255,.6)}}
@media (max-width:760px) and (orientation:portrait){
  .fxunit{flex:0 0 auto;gap:4px 6px;padding:6px;margin-top:6px;grid-template-columns:auto 1fr auto auto auto;grid-template-areas:"lcd lcd lcd lcd lcd" "ch type par lev on"}
  .seg button{padding:8px 5px;font-size:9px;min-width:20px}
  .fxk .knob{width:38px;height:38px}
  .fxon{width:46px;height:46px}
  .fxlcd{font-size:10px;padding:3px 6px}
}
/* ---------- performance strip: hot cues, loops, key lock ---------- */
.perf{display:flex;gap:8px;align-items:stretch;margin:-2px 0 8px}
.pads{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;flex:1.1}
.loops{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:1fr;gap:3px;flex:1.4}
.perf button{border:1px solid #000;border-radius:4px;cursor:pointer;font:800 10px Arial;color:#9a9a9a;background:linear-gradient(#3a3a3c,#232325);box-shadow:0 2px 0 #0a0a0a,inset 0 1px 0 rgba(255,255,255,.15);padding:5px 0;touch-action:manipulation}
.pads .hc{min-height:34px;font-size:13px;background:radial-gradient(circle at 50% 35%,#3a3a3a,#1a1a1a);box-shadow:0 2px 0 #050505,inset 0 0 0 1px rgba(255,255,255,.06),inset 0 -3px 6px rgba(0,0,0,.6)}
.pads .hc.set:nth-child(1){background:radial-gradient(circle at 50% 35%,#ff8080,#d02020);color:#fff;box-shadow:0 0 12px rgba(255,60,60,.6),0 2px 0 #050505}
.pads .hc.set:nth-child(2){background:radial-gradient(circle at 50% 35%,#ffd080,#e08a00);color:#1a0d00;box-shadow:0 0 12px rgba(255,170,30,.6),0 2px 0 #050505}
.pads .hc.set:nth-child(3){background:radial-gradient(circle at 50% 35%,#90e0ff,#1a90d0);color:#001018;box-shadow:0 0 12px rgba(60,180,255,.6),0 2px 0 #050505}
.pads .hc.set:nth-child(4){background:radial-gradient(circle at 50% 35%,#d0a0ff,#7a30d0);color:#fff;box-shadow:0 0 12px rgba(160,90,255,.6),0 2px 0 #050505}
.loops button{font-size:9px;padding:3px 0}
.loops button.on{background:linear-gradient(#9dffb0,#2bd94a);color:#002a0a;box-shadow:0 0 8px rgba(80,255,120,.6)}
.klock{width:46px;font-size:8.5px!important;line-height:1.1}
.klock.on{background:linear-gradient(#ffc066,#ff8a1f)!important;color:#1a0d00!important;box-shadow:0 0 10px rgba(255,138,31,.6)!important}
.keyb{font:700 11px Menlo,monospace;color:#bbb;border:1px solid #444;border-radius:3px;padding:1px 5px;min-width:30px;text-align:center}
.keyb.compat{color:#7dffa0;border-color:#3fbf60;box-shadow:0 0 6px rgba(80,255,120,.5)}
.keyb.clash{color:#ff9a7a;border-color:#7a3a2a}
.scratching .platter{cursor:grabbing}
.wave{margin-bottom:6px}
.tonearm{top:180px}.armrest{top:290px}
.plinth{min-height:660px}
#rowCD .plinth{min-height:660px}
@media (max-width:760px) and (orientation:portrait){
  .perf{margin:0 0 6px;gap:6px}
  .pads .hc{min-height:40px}
  .loops button{padding:5px 0;font-size:10px}
  .klock{width:48px}
  .platter-wrap{width:min(62vw,28dvh)}
  .tonearm{top:222px;width:min(20vw,10dvh)}
  .strobe-light{top:calc(222px + min(62vw,28dvh) - 20px)}
  .pitchbox{bottom:112px}input.pitch{height:min(22dvh,190px)}
  .controls .hwbtn{padding:11px 6px}
  .controls .startstop{min-height:84px}
  .mini{margin-top:6px}
}
/* ---------- cue / rec ---------- */
.cuebtn{margin:2px 0 3px;border:1px solid #000;border-radius:3px;background:linear-gradient(#3a3a3c,#232325);color:#999;font:800 8.5px Arial;padding:4px 8px;cursor:pointer;box-shadow:0 2px 0 #0a0a0a,inset 0 1px 0 rgba(255,255,255,.15)}
.cuebtn.on{background:linear-gradient(#ffd27a,#ffae1f);color:#2a1500;box-shadow:0 0 10px rgba(255,180,40,.7),0 2px 0 #0a0a0a}
.hpsec{display:flex;flex-direction:column;align-items:center;gap:2px;margin-top:4px}
.hpbtns{display:flex;gap:3px}
.mbtn{border:1px solid #000;border-radius:3px;background:linear-gradient(#3a3a3c,#232325);color:#aaa;font:800 7.5px Arial;padding:4px 4px;cursor:pointer;box-shadow:0 2px 0 #0a0a0a,inset 0 1px 0 rgba(255,255,255,.15)}
.mbtn.on{background:linear-gradient(#ffd27a,#ffae1f);color:#2a1500;box-shadow:0 0 8px rgba(255,180,40,.6)}
.recsec{display:flex;align-items:center;gap:4px;margin:6px 0 2px}
.recbtn{display:flex;align-items:center;gap:4px;border:1px solid #000;border-radius:3px;background:linear-gradient(#3a3a3c,#232325);color:#ccc;font:800 9px Arial;padding:5px 6px;cursor:pointer;box-shadow:0 2px 0 #0a0a0a,inset 0 1px 0 rgba(255,255,255,.15)}
.recbtn i{width:8px;height:8px;border-radius:50%;background:#5a1010}
.recbtn.on{color:#fff}.recbtn.on i{background:#ff2a2a;box-shadow:0 0 8px #ff2a2a;animation:recblink 1s steps(2) infinite}
@keyframes recblink{50%{opacity:.25}}
#recT{font:700 10px Menlo,monospace;color:#ff6a5a}
.mstr .mvu{height:110px}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.7);display:flex;align-items:center;justify-content:center;z-index:60}
.mbox{background:#18181a;border:1px solid #333;border-radius:8px;padding:18px 22px;max-width:min(480px,92vw);box-shadow:0 20px 50px #000;color:#ccc}
.mbox h3{margin:0 0 8px;color:var(--or)}.mbox p{color:#999}.mbox select,.mbox audio{width:100%;margin:6px 0}
.mbox select{background:#0c0c0c;color:#ddd;border:1px solid #333;padding:8px;border-radius:4px}
.mrow{display:flex;gap:8px;justify-content:flex-end;margin-top:10px}.mrow a{text-decoration:none}
@media (max-width:760px) and (orientation:portrait){
  .cuebtn{padding:6px 8px;font-size:9px}
  .mstr .mvu{min-height:50px}
  .hpsec .knob{width:36px;height:36px}
  .mbtn{padding:6px 3px;font-size:8px}
  .recbtn{padding:7px 6px}
  .masterbpm b{font-size:15px}
}
/* ---------- crate ---------- */
#crate{position:fixed;inset:0;z-index:55;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center}
#crate.dragging{background:transparent;pointer-events:none}#crate.dragging .cbox{opacity:.35}
.cbox{width:min(980px,94vw);height:min(640px,88vh);display:flex;flex-direction:column;border-radius:8px;overflow:hidden;
  background:var(--noise),linear-gradient(#2a1d12,#1a120b);background-blend-mode:overlay,normal;border:1px solid #4a3220;box-shadow:0 30px 60px #000,inset 0 1px 0 rgba(255,220,180,.12)}
.chead{display:flex;gap:8px;align-items:center;padding:12px 14px;background:linear-gradient(#3a2817,#2a1c10);border-bottom:1px solid #120c06}
.chead h3{margin:0 8px 0 0;font:900 20px Impact,Arial Black;letter-spacing:2px;color:#e0a868}
#crateQ{flex:1;min-width:80px;background:#0e0a06;border:1px solid #4a3220;color:#eee;padding:8px 10px;border-radius:4px;font:13px Arial}
.cinfo{padding:6px 14px;font:11px Arial;color:#a48a6a}
.cscroll{flex:1;overflow:auto;-webkit-overflow-scrolling:touch}
#crate table{width:100%;border-collapse:collapse;font:13px Arial;color:#e6d6c2}
#crate th{position:sticky;top:0;background:#1f150c;color:#c8955a;font:800 10px Arial;letter-spacing:1px;text-align:left;padding:8px;cursor:pointer;border-bottom:1px solid #3a2817}
#crate th.sorted{color:#ffb060}
#crate td{padding:8px;border-bottom:1px solid rgba(255,255,255,.05)}
#crate tr{cursor:grab}#crate tbody tr:hover{background:rgba(255,160,70,.07)}
#crate tr.compat td:first-child{box-shadow:inset 3px 0 0 #3fdf70}#crate tr.compat .ck{color:#7dffa0;border-color:#3fbf60}
.cn{max-width:360px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700}
.ck{font:700 11px Menlo,monospace;border:1px solid #6a4a2a;border-radius:3px;padding:1px 5px}
#crate td small{color:#8a7458}
.cl button,.cx{border:1px solid #000;border-radius:3px;background:linear-gradient(#5a4028,#3a2817);color:#ffd0a0;font:800 11px Arial;padding:6px 9px;margin-right:3px;cursor:pointer}
.cl button:hover{background:linear-gradient(#ffad55,#ff7a10);color:#1a0d00}.cx{background:transparent;border-color:transparent;color:#8a6a4a}
.nb{color:#ffb020;font-style:normal}
.cempty{padding:30px;text-align:center;color:#a48a6a}
.crates span{bottom:auto;top:-28px}
/* ---------- room easter eggs ---------- */
.egg{position:absolute;border:0;background:transparent;cursor:pointer;border-radius:6px;transition:box-shadow .25s,background .25s;z-index:2}
.egg span{position:absolute;left:50%;top:100%;transform:translateX(-50%);font:700 9px Arial;letter-spacing:1.5px;color:#ffcf99;background:rgba(10,6,2,.75);padding:2px 6px;border-radius:3px;opacity:0;transition:.25s;white-space:nowrap}
.egg:hover,.egg:focus-visible{box-shadow:0 0 0 1px rgba(255,200,140,.4),0 0 18px rgba(255,170,90,.25);outline:0}.egg:hover span{opacity:1}
.zooming .egg{opacity:0}
.rain{position:absolute;left:91.6%;top:0;width:8.4%;height:44%;pointer-events:none;mix-blend-mode:screen}
.room.raining .stage:after{content:"";position:absolute;left:91.6%;top:0;width:8.4%;height:44%;background:linear-gradient(rgba(80,110,170,.25),rgba(40,60,110,.15));pointer-events:none}
.dimmer{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 60%,rgba(0,0,0,.35),rgba(0,0,0,.75));opacity:0;transition:opacity .8s;pointer-events:none}
.room.dim .dimmer{opacity:1}
.lampglow{position:absolute;left:76%;top:24%;width:14%;height:30%;border-radius:50%;background:radial-gradient(ellipse,rgba(255,190,110,.35),transparent 65%);mix-blend-mode:screen;pointer-events:none;transition:opacity .8s}
.room.dim .lampglow{opacity:0}
.neonmask{position:absolute;left:71%;top:11%;width:9%;height:17%;border-radius:30%;background:radial-gradient(ellipse,rgba(25,22,18,.97) 30%,rgba(25,22,18,.85) 55%,transparent 75%);opacity:0;transition:opacity .25s;pointer-events:none}
.room.neon-off .neonmask{opacity:1}.room.neon-off .neon{opacity:0!important;animation:none}
.cone{position:absolute;left:91.4%;top:40.2%;width:4.4%;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(255,170,90,.45),rgba(255,120,40,.12) 55%,transparent 70%);mix-blend-mode:screen;opacity:0;pointer-events:none;transition:opacity .3s}
.room.spk .cone{opacity:.4}
#roomTip{position:absolute;transform:translateX(-50%);max-width:min(320px,70%);background:rgba(20,12,4,.92);border:1px solid #c8955a;color:#ffe2bf;padding:8px 12px;border-radius:6px;font:600 12px/1.35 Arial;box-shadow:0 10px 30px #000;z-index:5;pointer-events:none}
@media (max-width:760px) and (orientation:portrait){
  .cbox{width:100vw;height:100dvh;border-radius:0}
  .chead{flex-wrap:wrap;padding:10px}
  #crateQ{order:5;flex-basis:100%}
  #crate th:nth-child(5),#crate td:nth-child(5){display:none}
  #crate td{padding:10px 6px}.cn{max-width:120px}
  .cl button{padding:10px 11px}
  #roomTip{font-size:10px;max-width:60%}
}
#toast.info{background:#1a1408;border-color:#c8955a;color:#ffe2bf}