:root{--s-0: #060709;--s-1: #0b0d11;--s-2: #12151a;--s-3: #1a1e25;--s-4: #242932;--s-5: #2f3540;--line: #2b313b;--line-soft: #1d222a;--text: #e8ecf2;--text-dim: #9aa4b2;--text-faint: #5f6875;--amber: #ff9d16;--amber-dim: #7a4a08;--blue: #1f8fff;--blue-dim: #0d3f70;--green: #22d07a;--red: #ff3b47;--white-hot: #ffffff;--accent: var(--blue);--radius: 3px;--radius-lg: 6px;--mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;--sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;--shadow-panel: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 -1px 0 rgba(0, 0, 0, .6) inset, 0 4px 18px rgba(0, 0, 0, .5)}*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--s-0);color:var(--text);font-family:var(--sans);font-size:13px;-webkit-font-smoothing:antialiased;overscroll-behavior:none}body{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}input,button{font-family:inherit}#boot{position:fixed;inset:0;display:grid;place-items:center;background:radial-gradient(1200px 600px at 50% 0%,#10141c 0%,var(--s-0) 70%);z-index:100}.boot-inner{text-align:center;max-width:460px;padding:0 24px}.boot-inner h1{font-size:34px;font-weight:800;letter-spacing:.16em;margin:0 0 10px;background:linear-gradient(180deg,#fff,#7f8b9c);-webkit-background-clip:text;background-clip:text;color:transparent}.boot-inner .tag{color:var(--text-dim);font-size:13px;margin:0 0 30px;line-height:1.6}.room-label{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.18em;color:var(--text-faint);text-align:left;margin-bottom:16px}#room{display:block;width:100%;margin-top:7px;padding:12px 14px;background:var(--s-2);border:1px solid var(--line);border-radius:var(--radius);color:var(--text);font-family:var(--mono);font-size:15px;letter-spacing:.1em;outline:none}#room:focus{border-color:var(--accent)}#enter{width:100%;padding:13px;background:var(--accent);color:#041a2e;border:none;border-radius:var(--radius);font-weight:700;font-size:12px;letter-spacing:.16em;cursor:pointer;transition:filter .12s}#enter:hover{filter:brightness(1.12)}#enter:active{filter:brightness(.92)}.boot-inner .note{color:var(--text-faint);font-size:11px;line-height:1.6;margin-top:18px}#app{display:grid;grid-template-rows:auto 1fr auto;height:100%}.topbar{display:flex;align-items:center;gap:18px;padding:0 16px;height:44px;background:linear-gradient(180deg,var(--s-2),var(--s-1));border-bottom:1px solid var(--line)}.brand{font-weight:800;letter-spacing:.18em;font-size:12px;color:var(--text)}.topbar .spacer{flex:1}.sync{display:flex;gap:2px;align-items:stretch;font-family:var(--mono);font-size:10px}.sync .cell{display:flex;flex-direction:column;justify-content:center;gap:2px;padding:4px 10px;background:var(--s-2);border:1px solid var(--line-soft);min-width:62px}.sync .cell:first-child{border-radius:var(--radius) 0 0 var(--radius)}.sync .cell:last-child{border-radius:0 var(--radius) var(--radius) 0}.sync .k{color:var(--text-faint);letter-spacing:.12em;font-size:9px}.sync .v{color:var(--text);font-size:12px;font-variant-numeric:tabular-nums}.sync .v.good{color:var(--green)}.sync .v.warn{color:var(--amber)}.sync .v.bad{color:var(--red)}.locked{display:flex;align-items:center;gap:7px;padding:5px 12px;border-radius:var(--radius);background:var(--s-2);border:1px solid var(--line-soft);font-family:var(--mono);font-size:10px;letter-spacing:.14em}.talkbtn{appearance:none;padding:6px 16px;border-radius:var(--radius);background:var(--s-3);border:1px solid var(--line);color:var(--text-dim);font-family:var(--mono);font-size:10px;letter-spacing:.14em;cursor:pointer;user-select:none;-webkit-user-select:none;touch-action:none;transition:background 80ms,color 80ms,border-color 80ms}.talkbtn:hover{color:var(--text);border-color:var(--s-5)}.talkbtn.on{background:var(--amber);border-color:var(--amber);color:#201200;font-weight:700}.peertalk{padding:5px 12px;border-radius:var(--radius);background:var(--s-2);border:1px solid var(--green);color:var(--green);font-family:var(--mono);font-size:10px;letter-spacing:.14em;animation:pulse 2s infinite}.dot{width:7px;height:7px;border-radius:50%;background:var(--text-faint);box-shadow:0 0 #22d07a99}.dot.on{background:var(--green);animation:pulse 2s infinite}.dot.bad{background:var(--red)}@keyframes pulse{0%{box-shadow:0 0 #22d07a80}70%{box-shadow:0 0 0 7px #22d07a00}to{box-shadow:0 0 #22d07a00}}.booth{display:flex;align-items:flex-start;justify-content:center;gap:10px;padding:8px;min-height:0;overflow:hidden;background:radial-gradient(1400px 700px at 50% -10%,#14181f,#07080a 68%)}.unit{position:relative;line-height:0;border-radius:5px;box-shadow:0 1px #ffffff0d,0 18px 40px #000000bf,0 3px 10px #0009}.unit canvas{display:block;border-radius:5px;touch-action:none;cursor:grab}.unit canvas:active{cursor:grabbing}.unit.drop:after{content:"";position:absolute;inset:0;border-radius:5px;border:2px solid var(--blue);box-shadow:inset 0 0 40px #1f8fff40;pointer-events:none}.floor{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;padding:10px;min-height:0;overflow:hidden}.deck-col{display:grid;gap:10px;min-height:0}.deck{display:grid;grid-template-rows:auto auto 1fr auto;background:linear-gradient(180deg,var(--s-2) 0%,var(--s-1) 100%);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-panel);overflow:hidden;min-height:0}.deck-head{display:flex;align-items:center;gap:10px;padding:7px 11px;border-bottom:1px solid var(--line-soft);background:var(--s-3)}.deck-no{font-family:var(--mono);font-weight:700;font-size:11px;letter-spacing:.1em;color:#04121f;background:var(--blue);padding:3px 8px;border-radius:2px}.deck.is-master .deck-no{background:var(--amber);color:#241000}.deck-title{flex:1;font-size:12px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.deck-title.empty{color:var(--text-faint);font-weight:400;font-style:italic}.deck-bpm{font-family:var(--mono);font-size:15px;font-weight:700;color:var(--amber);font-variant-numeric:tabular-nums}.deck-bpm small{font-size:9px;color:var(--text-faint);margin-left:3px}.wave-overview{height:34px;background:var(--s-0);position:relative;cursor:pointer}.wave-overview canvas{width:100%;height:100%;display:block}.wave-main{position:relative;background:var(--s-0);min-height:90px}.wave-main canvas{width:100%;height:100%;display:block}.playhead{position:absolute;top:0;bottom:0;left:50%;width:2px;background:var(--red);box-shadow:0 0 10px #ff3b47d9;pointer-events:none}.time-readout{position:absolute;left:9px;top:7px;font-family:var(--mono);font-size:11px;color:var(--text);text-shadow:0 1px 3px #000;font-variant-numeric:tabular-nums}.time-readout .rem{color:var(--text-faint);margin-left:9px}.deck-controls{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:9px 11px;border-top:1px solid var(--line-soft);background:var(--s-2)}.transport{display:flex;gap:6px}.btn{min-width:46px;padding:8px 11px;background:linear-gradient(180deg,var(--s-4),var(--s-3));border:1px solid var(--line);border-radius:var(--radius);color:var(--text-dim);font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.1em;cursor:pointer;transition:background .1s,color .1s,box-shadow .1s}.btn:hover{background:linear-gradient(180deg,var(--s-5),var(--s-4));color:var(--text)}.btn:active{transform:translateY(1px)}.btn.cue{color:var(--amber)}.btn.cue.lit{background:var(--amber);color:#1c0f00;box-shadow:0 0 14px #ff9d1680}.btn.play.lit{background:var(--green);color:#00220f;box-shadow:0 0 14px #22d07a73}.btn.on{background:var(--blue);color:#04121f;border-color:var(--blue)}.hotcues{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}.hc{height:26px;border-radius:2px;border:1px solid var(--line);background:var(--s-3);color:var(--text-faint);font-family:var(--mono);font-size:10px;font-weight:700;cursor:pointer}.hc.set{background:var(--blue);color:#04121f;border-color:var(--blue)}.pitch{display:flex;flex-direction:column;align-items:center;gap:5px}.pitch input[type=range]{-webkit-appearance:none;appearance:none;writing-mode:vertical-lr;direction:rtl;width:22px;height:96px;background:transparent;cursor:ns-resize}.pitch input[type=range]::-webkit-slider-runnable-track{width:4px;background:linear-gradient(90deg,var(--s-0),var(--s-4));border:1px solid var(--line);border-radius:2px}.pitch input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:13px;margin-left:-10px;border-radius:2px;background:linear-gradient(180deg,#e9edf3,#9aa3b1);border:1px solid #6c7583;box-shadow:0 2px 5px #0009}.pitch .val{font-family:var(--mono);font-size:10px;color:var(--text-dim);font-variant-numeric:tabular-nums}.mixer{width:452px;display:grid;grid-template-rows:auto 1fr auto;background:linear-gradient(180deg,var(--s-3) 0%,var(--s-1) 100%);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-panel);overflow:hidden}.mixer-head{display:flex;align-items:center;gap:10px;padding:8px 12px;background:var(--s-4);border-bottom:1px solid var(--line)}.mixer-name{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.12em}.mixer-head select{background:var(--s-2);border:1px solid var(--line);color:var(--text);font-family:var(--mono);font-size:10px;padding:4px 7px;border-radius:2px;outline:none}.strips{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:1px;background:var(--line-soft);overflow:hidden}.strip{display:grid;grid-template-rows:auto repeat(4,auto) auto 1fr auto;gap:7px;padding:9px 5px;background:var(--s-2);justify-items:center}.strip-no{font-family:var(--mono);font-size:9px;color:var(--text-faint);letter-spacing:.1em}.knob{position:relative;width:40px;height:40px;cursor:ns-resize}.knob canvas{width:100%;height:100%;display:block}.knob .lbl{position:absolute;bottom:-11px;left:0;right:0;text-align:center;font-family:var(--mono);font-size:8px;letter-spacing:.08em;color:var(--text-faint)}.knob-wrap{margin-bottom:12px}.chan-fader{-webkit-appearance:none;appearance:none;writing-mode:vertical-lr;direction:rtl;width:30px;height:130px;background:transparent;cursor:ns-resize}.chan-fader::-webkit-slider-runnable-track{width:6px;background:linear-gradient(90deg,#000,var(--s-4));border:1px solid var(--line);border-radius:3px}.chan-fader::-webkit-slider-thumb{-webkit-appearance:none;width:30px;height:17px;margin-left:-12px;border-radius:2px;background:linear-gradient(180deg,#f0f3f8,#b6bdc9 45%,#7d8695);border:1px solid #5b6472;box-shadow:0 2px 6px #000000b3}.meter{width:7px;height:130px;background:var(--s-0);border:1px solid var(--line);border-radius:2px;overflow:hidden;position:relative}.meter .fill{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(0deg,var(--green) 0%,var(--green) 62%,var(--amber) 82%,var(--red) 100%);transition:height 45ms linear}.cue-btn{width:100%;padding:6px 0;background:var(--s-3);border:1px solid var(--line);border-radius:2px;color:var(--text-faint);font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.1em;cursor:pointer}.cue-btn.on{background:var(--amber);color:#1c0f00;border-color:var(--amber);box-shadow:0 0 12px #ff9d1673}.xfader-row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:12px 14px;background:var(--s-3);border-top:1px solid var(--line)}.xfader{-webkit-appearance:none;appearance:none;width:100%;height:30px;background:transparent;cursor:ew-resize}.xfader::-webkit-slider-runnable-track{height:7px;background:linear-gradient(180deg,#000,var(--s-4));border:1px solid var(--line);border-radius:3px}.xfader::-webkit-slider-thumb{-webkit-appearance:none;width:19px;height:30px;margin-top:-12px;border-radius:2px;background:linear-gradient(90deg,#f0f3f8,#b6bdc9 45%,#7d8695);border:1px solid #5b6472;box-shadow:0 2px 7px #000000b3}.xf-label{font-family:var(--mono);font-size:9px;color:var(--text-faint);letter-spacing:.1em}.footer{display:flex;align-items:center;gap:14px;padding:0 14px;height:40px;background:var(--s-1);border-top:1px solid var(--line);font-family:var(--mono);font-size:10px;color:var(--text-faint)}.footer .spacer{flex:1}.file-btn{padding:6px 13px;background:var(--s-3);border:1px solid var(--line);border-radius:var(--radius);color:var(--text-dim);font-family:var(--mono);font-size:10px;letter-spacing:.1em;cursor:pointer}.file-btn:hover{background:var(--s-4);color:var(--text)}.hint{color:var(--text-faint)}.hint kbd{background:var(--s-3);border:1px solid var(--line);border-bottom-width:2px;border-radius:3px;padding:1px 5px;font-family:var(--mono);font-size:9px;color:var(--text-dim)}