:root{color:#eef2ff;font-synthesis:none;--cyan:#4ee6ff;--magenta:#ff4fd8;--panel:#12151fd1;--border:#ffffff17;--muted:#9198ad;background:#07080d;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}body{background:radial-gradient(circle at 18% 10%,#4ee6ff14,#0000 32%),radial-gradient(circle at 82% 14%,#ff4fd814,#0000 30%),#07080d;min-width:320px;min-height:100vh;margin:0}button,input,select{font:inherit}button{color:inherit}.app-shell{width:min(1600px,100%);margin:0 auto;padding:18px}.topbar{border-bottom:1px solid var(--border);grid-template-columns:1fr auto 1fr;align-items:center;gap:18px;min-height:72px;margin-bottom:18px;display:grid}.brand{align-items:center;gap:11px;display:flex}.logo-mark{width:40px;height:40px;color:var(--cyan);border:1px solid #4ee6ff8c;border-radius:12px;place-items:center;font-weight:900;display:grid;box-shadow:inset 0 0 24px #4ee6ff14}.brand strong{letter-spacing:.14em;display:block}.brand small{color:var(--muted);margin-top:2px;display:block}.mode-switch{border:1px solid var(--border);background:#0c0e15;border-radius:12px;padding:4px;display:flex}.mode-switch button,.mode-switch span{color:var(--muted);letter-spacing:.08em;background:0 0;border:0;border-radius:9px;padding:8px 14px;font-size:12px;font-weight:800}.mode-switch .active{color:#fff;background:#1a1e29}.mode-switch button:disabled{cursor:not-allowed;opacity:.55}.audio-status{color:var(--muted);letter-spacing:.08em;justify-self:end;align-items:center;gap:7px;font-size:11px;font-weight:800;display:flex}.audio-status span{background:#555d70;border-radius:50%;width:8px;height:8px}.audio-status.on span{background:#66efac;box-shadow:0 0 14px #66efaccc}.workspace{grid-template-columns:minmax(0,1fr) 190px minmax(0,1fr);align-items:stretch;gap:14px;display:grid}.deck,.mixer,.panel{border:1px solid var(--border);background:linear-gradient(#161925f5,#0c0e16f5);border-radius:20px;box-shadow:0 16px 40px #0000002e}.deck{min-width:0;padding:18px;position:relative;overflow:hidden}.deck:before{content:"";opacity:.8;height:2px;position:absolute;top:0;left:0;right:0}.deck-cyan:before{background:linear-gradient(90deg, transparent, var(--cyan), transparent)}.deck-magenta:before{background:linear-gradient(90deg, transparent, var(--magenta), transparent)}.deck-header{justify-content:space-between;align-items:flex-start;gap:12px;display:flex}.eyebrow{color:#747c92;letter-spacing:.14em;font-size:10px;font-weight:900}h2,h3,p{margin-top:0}h2{white-space:nowrap;text-overflow:ellipsis;max-width:46vw;margin:5px 0 4px;font-size:22px;overflow:hidden}.deck p{color:var(--muted);min-height:34px;margin:0;font-size:12px}.load-track{cursor:pointer;border:1px solid var(--border);letter-spacing:.08em;background:#0d1018;border-radius:10px;flex:none;padding:9px 11px;font-size:11px;font-weight:900}.load-track:hover{border-color:#475069}.load-track input{display:none}.track-meta{grid-template-columns:repeat(3,1fr);gap:8px;margin:16px 0 10px;display:grid}.track-meta span{background:#0b0d14;border:1px solid #ffffff0f;border-radius:10px;padding:8px 10px}.track-meta b{color:#747c92;letter-spacing:.1em;font-size:9px;display:block}.track-meta strong{margin-top:3px;font-size:17px;display:block}.waveform{background:#090b11;border:1px solid #ffffff0d;border-radius:12px;height:106px;position:relative;overflow:hidden}.waveform-bars{opacity:.38;align-items:center;gap:2px;padding:0 8px;display:flex;position:absolute;inset:10px 0}.waveform-bars span{background:currentColor;border-radius:2px;flex:1;min-width:1px}.waveform-message{color:var(--muted);place-items:center;font-size:11px;display:grid;position:absolute;inset:0}.waveform-cyan{color:var(--cyan)}.waveform-magenta{color:var(--magenta)}.waveform-played{opacity:.07;pointer-events:none;background:currentColor;position:absolute;inset:0 auto 0 0}.playhead{opacity:.86;background:#fff;width:2px;position:absolute;top:0;bottom:0;box-shadow:0 0 10px}.transport{justify-content:center;align-items:center;gap:10px;padding:13px 0 8px;display:flex}.transport button,.sync-button{border:1px solid var(--border);background:#111521;border-radius:10px;min-width:62px;height:42px;font-size:11px;font-weight:900}.transport .play{border-radius:50%;width:52px;min-width:52px;height:52px;font-size:17px}.deck-cyan .play{color:var(--cyan);border-color:#4ee6ff4d}.deck-magenta .play{color:var(--magenta);border-color:#ff4fd84d}button:disabled{opacity:.36;cursor:not-allowed}button:not(:disabled){cursor:pointer}.time-row{color:var(--muted);font-variant-numeric:tabular-nums;grid-template-columns:38px 1fr 38px;align-items:center;gap:8px;font-size:10px;display:grid}input[type=range]{accent-color:#d9e3ff;width:100%}.deck-controls{grid-template-columns:1fr 72px;align-items:center;gap:16px;margin-top:16px;display:grid}.eq-bank{grid-template-columns:repeat(3,1fr);gap:8px;display:grid}.knob-control{color:var(--muted);flex-direction:column;align-items:center;gap:5px;font-size:9px;display:flex}.knob-control input{width:72px}.knob-control strong{color:#cbd2e3;font-size:10px}.knob-control small{font-variant-numeric:tabular-nums}.knob{--angle:0deg;background:radial-gradient(circle at 40% 34%,#323848,#151824 58%,#0a0c12 60%);border:1px solid #3c4251;border-radius:50%;width:42px;height:42px;display:block;position:relative;box-shadow:inset 0 0 8px #000,0 3px 10px #0000004d}.knob-marker{transform-origin:50% 16px;width:2px;height:12px;transform:translateX(-50%) rotate(var(--angle));background:#eaf1ff;border-radius:3px;position:absolute;top:5px;left:50%}.volume-control{height:100%;color:var(--muted);flex-direction:column;align-items:center;gap:4px;font-size:9px;font-weight:800;display:flex}.volume-control input{width:70px;margin:34px 0;transform:rotate(-90deg)}.mixer{text-align:center;flex-direction:column;align-items:center;padding:18px 13px;display:flex}.mixer-meter{border:1px solid var(--border);background:#090b11;border-radius:9px;flex-direction:column-reverse;gap:3px;width:38px;height:144px;margin:18px auto 24px;padding:7px;display:flex}.mixer-meter span{opacity:.8;background:linear-gradient(90deg,#43e4a3,#8ff36b);border-radius:2px;flex:1}.mixer-meter span:nth-last-child(-n+2){background:#ffd35a}.crossfader{width:100%}.crossfader div{color:var(--muted);justify-content:space-between;align-items:center;margin-bottom:4px;font-size:10px;display:flex}.crossfader b:first-child{color:var(--cyan)}.crossfader b:last-child{color:var(--magenta)}.sync-button{width:88px;margin-top:22px}.mixer p{color:var(--muted);margin:auto 0 0;font-size:10px;line-height:1.45}.lower-grid{grid-template-columns:.8fr 1.2fr;gap:14px;margin-top:14px;display:grid}.panel{padding:18px}.coach{grid-template-columns:58px 1fr auto;align-items:center;gap:14px;display:grid}.coach-orb{color:#fff;background:linear-gradient(135deg,#6439ff,#e34fc8);border-radius:50%;place-items:center;width:54px;height:54px;font-weight:900;display:grid;box-shadow:0 0 28px #8548ff33}.coach h3,.beat-lab h3{margin:4px 0;font-size:18px}.coach p,.module-note{color:var(--muted);margin:0;font-size:12px;line-height:1.5}.coach button{border:1px solid var(--border);background:#111521;border-radius:11px;padding:10px 12px;font-size:10px;font-weight:900}.panel-title{justify-content:space-between;align-items:center;gap:12px;display:flex}.panel-title select{color:#dce3f4;border:1px solid var(--border);background:#0d1018;border-radius:9px;padding:7px 9px;font-size:11px}.sequencer{gap:7px;margin:15px 0 12px;display:grid}.sequence-row{grid-template-columns:60px 1fr;align-items:center;gap:9px;display:grid}.sequence-row strong{color:#929bb0;font-size:9px}.steps{grid-template-columns:repeat(16,1fr);gap:4px;display:grid}.steps button{aspect-ratio:1;background:#111520;border:1px solid #303645;border-radius:4px;min-width:0;padding:0}.steps button:nth-child(4n+1){border-left-color:#646d82}.steps button.active{background:linear-gradient(135deg,#6439ff,#e34fc8);border-color:#0000;box-shadow:0 0 8px #b940de38}footer{color:#697086;justify-content:space-between;gap:14px;padding:16px 4px 0;font-size:10px;display:flex}@media (width<=980px){.topbar{grid-template-columns:1fr auto}.mode-switch{order:3;grid-column:1/-1;justify-self:stretch}.mode-switch button{flex:1}.workspace{grid-template-columns:1fr}.mixer{min-height:180px}.mixer-meter{display:none}.mixer p{margin-top:18px}.lower-grid{grid-template-columns:1fr}h2{max-width:70vw}}@media (width<=620px){.app-shell{padding:10px}.topbar{min-height:62px}.audio-status{display:none}.deck,.panel,.mixer{border-radius:15px;padding:14px}.deck-header{align-items:center}.deck p{display:none}.track-meta{margin-top:11px}.waveform{height:86px}.deck-controls{grid-template-columns:1fr}.volume-control{grid-template-columns:40px 1fr 34px;width:100%;height:auto;display:grid}.volume-control input{width:100%;margin:0;transform:none}.coach{grid-template-columns:48px 1fr}.coach-orb{width:46px;height:46px}.coach button{grid-column:1/-1}.sequence-row{grid-template-columns:46px 1fr}.steps{gap:2px}footer{flex-direction:column}}