:root{--red:#e23b2e;--txt:#b9bdc4;--groove:#26282d}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%}body{background:radial-gradient(140% 90% at 50% -10%,#2a2622,#181512 38%,#0b0a09 78%,#050505);font-family:Saira Condensed,Barlow Semi Condensed,system-ui,sans-serif;color:var(--txt);overflow:hidden;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.room{position:fixed;top:0;right:0;bottom:0;left:0;z-index:0}.room:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;pointer-events:none;background:radial-gradient(60% 50% at 50% 34%,#ffe4b429,#0000 70%)}.room:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:3;pointer-events:none;background:radial-gradient(120% 120% at 50% 40%,#0000 45%,#000000b8)}.table{position:absolute;top:0;right:0;bottom:0;left:0;background:repeating-linear-gradient(91deg,#0003,#0000,#ffffff03,#0000002e 9px),linear-gradient(180deg,#3a2a1c,#251a11 60%,#160f0a);box-shadow:inset 0 0 240px #000000d9}.topbar{position:fixed;top:0;left:50%;transform:translate(-50%);z-index:20;display:flex;align-items:center;gap:14px;padding:6px 18px;border-radius:0 0 12px 12px;background:#00000080;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);pointer-events:none;animation:topfade 1s ease 9s forwards;max-width:96vw}@keyframes topfade{to{opacity:0;visibility:hidden}}.brand{font-weight:700;letter-spacing:.32em;font-size:15px;color:#e8e3da;white-space:nowrap;text-shadow:0 1px 0 #000,0 0 18px rgba(255,170,90,.25)}.brand span{color:var(--red)}.hint{font-family:Barlow Semi Condensed;font-size:12px;letter-spacing:.05em;color:#9a948a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hint b{color:#d6d0c4;font-weight:600}.stage{position:fixed;top:0;right:0;bottom:0;left:0;z-index:5}.rig{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;grid-template-columns:1fr clamp(300px,22vw,360px) 1fr;gap:0;align-items:stretch}.deck{position:relative;min-width:0}.chassis{position:relative;height:100%;padding:14px;background:linear-gradient(180deg,#1c1e22,#0c0d10 70%,#060607);box-shadow:0 2px #ffffff0d inset,0 0 120px #0000008c inset;border-left:1px solid #000;border-right:1px solid #000}.deck-a .chassis{border-left:none}.deck-b .chassis{border-right:none}.chassis:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;background:linear-gradient(115deg,#ffffff0a,#fff0 32%,#ffffff05 55%,#fff0 72%)}.deck-tag{position:absolute;top:14px;left:18px;font-size:13px;font-weight:700;letter-spacing:.18em;color:#7e8590}.deck-b .deck-tag{left:auto;right:18px}.brandmark{position:absolute;bottom:14px;font-size:12px;letter-spacing:.16em;color:#5a5f68;font-style:italic;font-weight:700}.deck-a .brandmark{right:18px}.deck-b .brandmark{left:18px}.well{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(95%,94vh);aspect-ratio:1/1;border-radius:50%;background:#050506;box-shadow:0 0 0 3px #141517,0 18px 60px #000000b3,0 0 90px #00000080}.platter{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%;will-change:transform;cursor:grab;touch-action:none;background:repeating-radial-gradient(circle at 50% 50%,#ffffff05 0,#ffffff05 1px,#0000 1px,#0000 2.4px),radial-gradient(circle at 50% 50%,#18181c 0,#18181c 13%,#0c0c0f 16%,#08080a 46%,#101013,#07070a 50%,#0b0b0e 78%,#060608)}.platter:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%;pointer-events:none;box-shadow:0 0 0 1px #ffffff12 inset,0 0 10px #0009 inset}.platter.grabbing{cursor:grabbing}.sheen{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%;pointer-events:none;mix-blend-mode:screen;opacity:.7;background:conic-gradient(from 200deg at 50% 50%,#fff0,#ffffff1c 34deg,#fff0 92deg,#fff0 232deg,#ffffff12 270deg,#fff0 326deg)}.label{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:30%;aspect-ratio:1/1;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-direction:column;overflow:hidden;background:radial-gradient(circle at 50% 40%,color-mix(in srgb,var(--accent) 35%,#fff),var(--accent) 55%,color-mix(in srgb,var(--accent) 60%,#000) 100%);box-shadow:0 1px 3px #00000080,0 0 0 2px #00000059}.lbl-brand{font-style:italic;font-weight:700;font-size:clamp(13px,2vw,26px);letter-spacing:.02em;color:#1a1a1a;text-shadow:0 1px 0 rgba(255,255,255,.35)}.lbl-track{font-family:Barlow Semi Condensed;font-size:clamp(8px,1vw,13px);letter-spacing:.04em;color:#1a1a1a;opacity:.8;max-width:90%;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:3px}.spindle{position:absolute;left:50%;top:50%;width:9px;height:9px;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle at 40% 35%,#e8e8ea,#5a5c60);box-shadow:0 1px 2px #000000b3;z-index:4}.speed{position:absolute;display:flex;flex-direction:column;gap:6px}.deck-a .speed{left:18px;top:18px}.deck-b .speed{right:18px;top:18px}.pill{font-size:10px;letter-spacing:.06em;color:#6b7079;background:#0a0b0d;border:1px solid #000;border-radius:5px;padding:3px 7px;cursor:pointer;box-shadow:0 1px #ffffff0a inset}.pill.act{color:#0b0c0e;background:linear-gradient(180deg,#d7dadd,#999ca0);font-weight:700}.pitch{position:absolute;bottom:18px;width:38px;height:118px;border-radius:7px;background:linear-gradient(180deg,#0c0d10,#1a1c20);box-shadow:0 2px 5px #00000080 inset,0 1px #ffffff0d;border:1px solid #000;display:flex;justify-content:center}.deck-a .pitch{right:16px}.deck-b .pitch{left:16px}.pitch-lbl{position:absolute;top:-15px;font-size:10px;letter-spacing:.12em;color:#71767f;width:100%;text-align:center}.pitch-val{position:absolute;bottom:-16px;font-family:Barlow Semi Condensed;font-size:10px;color:#8a8f98;width:100%;text-align:center}.pitch-fader{position:relative;width:100%;height:100%;display:flex;justify-content:center;padding:8px 0}.pitch-fader .slot{position:relative;width:5px;height:100%;border-radius:4px;background:linear-gradient(90deg,#000,#2a2c30,#000);box-shadow:0 0 3px #000 inset}.pitch-fader .cap{position:absolute;left:50%;width:30px;height:18px;border-radius:4px;transform:translate(-50%,-50%);background:linear-gradient(180deg,#e9ebed,#888b8f 52%,#404247);box-shadow:0 2px 4px #0009,0 1px #ffffff80 inset;cursor:grab;touch-action:none}.pitch-fader .cap:after{content:"";position:absolute;left:4px;right:4px;top:50%;height:2px;background:var(--red);transform:translateY(-50%);box-shadow:0 0 4px var(--red)}.startbtn{position:absolute;bottom:22px;width:60px;height:60px;border-radius:50%;background:radial-gradient(circle at 42% 35%,#3b3d42,#0c0d10 75%);box-shadow:0 4px 9px #0009,0 0 0 3px #050505,0 -2px 4px #ffffff0f inset;display:flex;align-items:center;justify-content:center;cursor:pointer;border:none;color:#9aa0a8;font-family:Saira Condensed;font-size:9px;font-weight:700;letter-spacing:.08em;line-height:1.05;text-align:center}.deck-a .startbtn{left:18px}.deck-b .startbtn{right:18px}.startbtn:active{transform:translateY(1px)}.startbtn.on{color:#ff8a5a;box-shadow:0 4px 9px #0009,0 0 0 3px #050505,0 0 16px #ff5a2880,0 -2px 4px #ffffff0f inset}.deck-b .startbtn.on{color:#5ac8ff;box-shadow:0 4px 9px #0009,0 0 0 3px #050505,0 0 16px #2896ff80,0 -2px 4px #ffffff0f inset}.loadzone{position:absolute;bottom:22px;left:50%;transform:translate(-50%);text-align:center;z-index:6}.loadbtn{display:inline-block;font-size:11px;letter-spacing:.1em;color:#aeb3bb;background:#101114;border:1px dashed #3a3d43;border-radius:6px;padding:6px 10px;cursor:pointer;transition:.15s}.loadbtn:hover{border-color:var(--red);color:#e7e9ec}.deck.drop .chassis{outline:2px dashed var(--red);outline-offset:-6px}.mixer{position:relative;padding:14px 12px 16px;display:flex;flex-direction:column;background:linear-gradient(180deg,#191b1f,#0a0b0d 72%,#060607);box-shadow:0 2px #ffffff0f inset,0 -18px 26px #00000080 inset;border-left:1px solid #000;border-right:1px solid #000;z-index:2}.mx-title{text-align:center;font-size:12px;font-weight:700;letter-spacing:.26em;color:#7e8590;margin-bottom:10px}.mx-title b{color:var(--red)}.channels{display:grid;grid-template-columns:1fr 1fr;gap:10px;flex:1 1 auto;min-height:0}.ch{display:flex;flex-direction:column;align-items:center;gap:clamp(5px,1.2vh,9px);background:#0a0b0d;border-radius:10px;padding:11px 6px 10px;box-shadow:0 1px #ffffff0a inset,0 -8px 14px #0006 inset;border:1px solid #000}.ch h4{font-size:12px;letter-spacing:.14em;font-weight:700}.knob-wrap{display:flex;flex-direction:column;align-items:center;gap:2px}.knob{position:relative;width:34px;height:34px;border-radius:50%;cursor:ns-resize;touch-action:none;background:radial-gradient(circle at 50% 34%,#62656b,#26282c 62%,#101113);box-shadow:0 3px 6px #0009,0 0 0 3px #060708,0 -2px 3px #ffffff1a inset,0 2px 4px #00000080 inset}.knob.big{width:42px;height:42px}.knob:before{content:"";position:absolute;top:5px;right:5px;bottom:5px;left:5px;border-radius:50%;background:repeating-conic-gradient(#2c2e32 0,#2c2e32 6deg,#1a1b1e 6deg,#1a1b1e 12deg);opacity:.6}.knob:after{content:"";position:absolute;top:9px;right:9px;bottom:9px;left:9px;border-radius:50%;background:radial-gradient(circle at 50% 38%,#54575c,#1d1e21);box-shadow:0 1px 2px #0009 inset}.knob .ind{position:absolute;left:50%;top:4px;width:3px;height:10px;border-radius:2px;background:#eef0f2;transform-origin:50% 13px;z-index:3;box-shadow:0 0 5px #ffffff80}.knob.big .ind{top:5px;height:13px;transform-origin:50% 16px}.klabel{font-size:9px;letter-spacing:.1em;color:#787d86}.ch-bottom{display:flex;gap:8px;align-items:stretch;margin-top:2px;flex:1 1 auto;min-height:96px}.vu{width:8px;border-radius:3px;background:#050506;box-shadow:0 0 3px #000 inset;overflow:hidden;position:relative;display:flex;flex-direction:column-reverse}.vu i{display:block;width:100%;height:0%;background:linear-gradient(0deg,#36d06a,#d8d23a 62%,#e23b2e 90%)}.fader{position:relative;width:34px;background:linear-gradient(180deg,#0b0c0e,#141518);border-radius:6px;border:1px solid #000;box-shadow:0 1px #ffffff0a inset}.fader .slot{position:absolute;left:50%;top:8px;bottom:8px;width:5px;transform:translate(-50%);border-radius:4px;background:linear-gradient(90deg,#000,#2a2c30,#000);box-shadow:0 0 3px #000 inset}.fader .cap{position:absolute;left:50%;width:28px;height:20px;border-radius:4px;transform:translate(-50%,-50%);cursor:grab;touch-action:none;background:linear-gradient(180deg,#eceef0,#8b8e92 52%,#3d3f43);box-shadow:0 3px 5px #0009,0 1px #fff9 inset}.fader .cap:after{content:"";position:absolute;left:4px;right:4px;top:50%;height:2px;transform:translateY(-50%);background:#1b1c1f;box-shadow:0 2px #1b1c1f,0 -2px #1b1c1f}.cue{font-size:10px;font-weight:700;letter-spacing:.08em;color:#0b0c0e;background:linear-gradient(180deg,#d7dadd,#9a9da1);border:none;border-radius:5px;padding:5px 0;width:100%;cursor:pointer;box-shadow:0 2px 3px #0006}.cue.on{background:linear-gradient(180deg,#ff7a45,#c2391b);color:#fff}.xf{margin-top:12px;padding:11px 12px 8px;background:#0a0b0d;border-radius:10px;border:1px solid #000;box-shadow:0 1px #ffffff0a inset}.xf .lab{display:flex;justify-content:space-between;font-size:10px;letter-spacing:.1em;color:#787d86;margin-bottom:6px}.xf .lab .a{color:var(--accent-a,#ff6a3d)}.xf .lab .b{color:var(--accent-b,#37b6ff)}.xf .track{position:relative;height:30px;border-radius:7px;background:linear-gradient(180deg,#040405,#121316);box-shadow:0 2px 5px #0009 inset}.xf .track .slot{position:absolute;top:50%;left:10px;right:10px;height:5px;transform:translateY(-50%);border-radius:4px;background:linear-gradient(0deg,#000,#2a2c30,#000);box-shadow:0 0 3px #000 inset}.xf .cap{position:absolute;top:50%;width:24px;height:34px;border-radius:5px;transform:translate(-50%,-50%);cursor:grab;touch-action:none;background:linear-gradient(180deg,#eceef0,#8b8e92 52%,#3d3f43);box-shadow:0 3px 6px #0009,0 1px #fff9 inset}.xf .cap:after{content:"";position:absolute;top:5px;bottom:5px;left:50%;width:2px;transform:translate(-50%);background:#1b1c1f;box-shadow:2px 0 #1b1c1f,-2px 0 #1b1c1f}.master{display:flex;align-items:center;justify-content:center;gap:9px;margin-top:11px}@media (max-aspect-ratio:5/6),(max-width:680px){body{overflow:auto}.stage{position:relative;inset:auto;min-height:100dvh}.rig{position:relative;inset:auto;display:flex;flex-direction:column;min-height:100dvh}.deck{flex:0 0 auto}.chassis{height:auto;min-height:min(82vw,440px);padding:12px}.well{position:relative;left:auto;top:auto;transform:none;margin:8px auto;width:min(82vw,440px)}.deck-a .chassis,.deck-b .chassis{border:none;border-top:1px solid #000;border-bottom:1px solid #000}.mixer{order:0}.topbar{font-size:11px}.hint{display:none}}