:root{--bg:#0b0f1a;--panel:#121828;--panel-edge:#1e2740;--text:#7d8bab;--cyan:#22d3ee;--amber:#f5a623;--coral:#ff5c72;--violet:#b28dff;--lime:#8ce99a;--pink:#ff8fab;--teal:#2dd4bf;--gold:#e6c229;--lead-color:var(--amber)}html,body{background:var(--bg);-webkit-user-select:none;user-select:none;width:100%;height:100%;margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;overflow:hidden}.dashboard{box-sizing:border-box;grid-template:"left center right"1fr"bottom bottom bottom"230px/260px 1fr 260px;gap:10px;width:100vw;height:100vh;padding:10px;display:grid}#drum-section{background:var(--panel);border:1px solid var(--panel-edge);box-sizing:border-box;border-radius:10px;flex-direction:column;grid-area:left;gap:8px;min-height:0;padding:8px;display:flex}#drum-mode-toggle{gap:6px;display:flex}.drum-mode-btn{color:var(--text);letter-spacing:.04em;text-transform:uppercase;cursor:pointer;background:#182036;border:1px solid #26314f;border-radius:6px;flex:1;padding:6px 0;font-size:11px;transition:background .1s,border-color .1s,color .1s}.drum-mode-btn.active{background:var(--lead-color);border-color:var(--lead-color);color:#0b0f1a}#drum-pads{flex:1;grid-template-rows:repeat(8,1fr);grid-template-columns:repeat(4,1fr);gap:5px;min-height:0;display:grid}#drum-kit-pads{flex:1;grid-template-rows:repeat(4,1fr);grid-template-columns:repeat(2,1fr);gap:8px;min-height:0;display:none}#drum-section.mode-kit #drum-pads{display:none}#drum-section.mode-kit #drum-kit-pads{display:grid}.kit-pad{cursor:pointer;touch-action:none;background:#182036;border:1px solid #26314f;border-radius:8px;transition:background 80ms,border-color 80ms,transform 80ms;position:relative}.kit-pad:hover{border-color:#4a5578}.kit-pad.hit{filter:brightness(1.6);transform:scale(.97)}.kit-pad.hit[data-row="0"]{background:var(--cyan);border-color:var(--cyan)}.kit-pad.hit[data-row="1"]{background:var(--amber);border-color:var(--amber)}.kit-pad.hit[data-row="2"]{background:var(--coral);border-color:var(--coral)}.kit-pad.hit[data-row="3"]{background:var(--violet);border-color:var(--violet)}.kit-pad.hit[data-row="4"]{background:var(--lime);border-color:var(--lime)}.kit-pad.hit[data-row="5"]{background:var(--pink);border-color:var(--pink)}.kit-pad.hit[data-row="6"]{background:var(--teal);border-color:var(--teal)}.kit-pad.hit[data-row="7"]{background:var(--gold);border-color:var(--gold)}.kit-pad .row-label{letter-spacing:.04em;color:#4a5578;pointer-events:none;font-size:11px;position:absolute;bottom:8px;left:10px}.loop-pedal,#drum-loop-controls{gap:6px;display:flex}.loop-btn{color:var(--text);letter-spacing:.03em;cursor:pointer;background:#182036;border:1px solid #26314f;border-radius:6px;padding:6px 10px;font-size:11px;transition:background .1s,border-color .1s,color .1s}.loop-btn:hover{border-color:#4a5578}.loop-btn.recording{background:var(--coral);border-color:var(--coral);color:#0b0f1a;animation:1s ease-in-out infinite rec-pulse}@keyframes rec-pulse{0%,to{opacity:1}50%{opacity:.55}}.pad{cursor:pointer;touch-action:none;background:#182036;border:1px solid #26314f;border-radius:6px;transition:background 80ms,border-color 80ms,transform 80ms;position:relative}.pad:hover{border-color:#4a5578}.pad.on[data-row="0"]{background:var(--cyan);border-color:var(--cyan)}.pad.on[data-row="1"]{background:var(--amber);border-color:var(--amber)}.pad.on[data-row="2"]{background:var(--coral);border-color:var(--coral)}.pad.on[data-row="3"]{background:var(--violet);border-color:var(--violet)}.pad.on[data-row="4"]{background:var(--lime);border-color:var(--lime)}.pad.on[data-row="5"]{background:var(--pink);border-color:var(--pink)}.pad.on[data-row="6"]{background:var(--teal);border-color:var(--teal)}.pad.on[data-row="7"]{background:var(--gold);border-color:var(--gold)}.pad.hit{filter:brightness(1.6);transform:scale(.92)}.pad.playhead-col{border-color:#dce4ff}.pad .row-label{letter-spacing:.03em;color:#4a5578;pointer-events:none;font-size:9px;position:absolute;bottom:3px;left:5px}.pad .key-label{color:#4a5578;pointer-events:none;font-size:9px;position:absolute;top:3px;right:5px}#center-stage{outline-offset:-2px;border-radius:14px;outline:2px solid #0000;grid-area:center;transition:outline-color .1s;position:relative;overflow:hidden}#center-stage.drop-armed{outline-color:#4a5578}#center-stage.drop-hover{outline-color:var(--lead-color)}#constellation-canvas{background:radial-gradient(circle at 50% 50%, #141c34, var(--panel));border:1px solid var(--panel-edge);width:100%;height:100%;box-shadow:0 0 40px -10px var(--lead-color);touch-action:none;cursor:crosshair;box-sizing:border-box;transition:box-shadow .3s;display:block;position:absolute;inset:0}.dashboard:not(.started) #constellation-canvas{animation:2.6s ease-in-out infinite invite-pulse}@keyframes invite-pulse{0%,to{box-shadow:0 0 30px -8px var(--lead-color)}50%{box-shadow:0 0 60px 4px var(--lead-color)}}#piano-overlay{pointer-events:none;background:linear-gradient(#0000,#0b0f1a8c 25%,#0b0f1aeb);flex-direction:column;align-items:center;gap:8px;padding:10px 16px 16px;display:flex;position:absolute;bottom:0;left:0;right:0}#piano-overlay>*{pointer-events:auto}#piano-toolbar{justify-content:space-between;align-items:center;gap:16px;width:100%;max-width:640px;display:flex}#octave-control{width:220px}#octave-control span{width:auto;margin-right:8px}#piano-keys{flex-direction:column;gap:4px;width:100%;max-width:640px;display:flex}.piano-key-row{gap:4px;display:flex}.piano-key{color:#4a5578;letter-spacing:.03em;cursor:pointer;touch-action:none;-webkit-user-select:none;user-select:none;background:#182036;border:1px solid #26314f;border-radius:6px;flex:1;justify-content:center;align-items:flex-end;height:52px;padding-bottom:6px;font-size:11px;font-weight:600;transition:background 60ms,border-color 60ms,transform 60ms,box-shadow 60ms;display:flex}.piano-key.black-key{color:#5a6485;z-index:1;background:#05070d;border-color:#000;flex:.65;height:30px;box-shadow:0 3px 6px #00000080}.piano-key.black-key:hover{border-color:#333d5c}.piano-key.root{border-color:#4a5578}.piano-key.active{background:var(--lead-color);border-color:var(--lead-color);color:#0b0f1a;box-shadow:0 0 16px var(--lead-color);transform:translateY(2px)}#controls{background:var(--panel);border:1px solid var(--panel-edge);box-sizing:border-box;border-radius:10px;flex-direction:column;grid-area:right;gap:16px;padding:16px;display:flex}#track-deck{background:var(--panel);border:1px solid var(--panel-edge);box-sizing:border-box;border-radius:10px;flex-direction:column;grid-area:bottom;gap:8px;min-height:0;padding:10px 16px;display:flex}#track-deck-transport{flex:none;align-items:center;gap:24px;display:flex}#track-deck-transport .control.horizontal{max-width:220px}#voice-status,#global-record-status{color:var(--coral);letter-spacing:.03em;font-size:11px}.loop-btn.active{background:var(--lime);border-color:var(--lime);color:#0b0f1a}#loop-shelf{flex:none;gap:8px;padding:4px 2px;display:flex;overflow:auto hidden}.loop-card{--card-color:var(--cyan);border:1px solid var(--card-color);cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;background:#182036;border-radius:8px;flex-direction:column;flex:none;justify-content:space-between;gap:4px;width:108px;padding:8px 10px;display:flex}.loop-card:active{cursor:grabbing}.loop-card-top{align-items:center;gap:6px;min-width:0;display:flex}.loop-card-name{color:#dce4ff;white-space:nowrap;text-overflow:ellipsis;flex:1;min-width:0;font-size:12px;font-weight:600;display:block;overflow:hidden}.loop-card-playbtn{border:1px solid var(--card-color);width:20px;height:20px;color:var(--card-color);cursor:pointer;touch-action:manipulation;background:#0b0f1a;border-radius:50%;flex:none;justify-content:center;align-items:center;padding:0;font-size:9px;display:flex}.loop-card-playbtn.active{background:var(--card-color);color:#0b0f1a}.loop-card-delbtn{color:#8a93b8;cursor:pointer;touch-action:manipulation;background:#0b0f1a;border:1px solid #4a5578;border-radius:4px;flex:none;justify-content:center;align-items:center;width:18px;height:18px;padding:0;font-size:9px;display:flex}.loop-card-delbtn:hover{color:#ff6b6b;border-color:#ff6b6b}.loop-card-len{letter-spacing:.03em;color:var(--card-color);font-size:10px;display:block}.loop-card-cropbtn{color:#8a93b8;cursor:pointer;touch-action:manipulation;background:#0b0f1a;border:1px solid #4a5578;border-radius:4px;flex:none;justify-content:center;align-items:center;width:18px;height:18px;padding:0;font-size:10px;display:flex}.loop-card-cropbtn:hover:not(:disabled){border-color:var(--amber);color:var(--amber)}.loop-card-cropbtn:disabled{opacity:.4;cursor:default}.crop-backdrop{z-index:2000;background:#060910bf;justify-content:center;align-items:center;padding:16px;display:flex;position:fixed;inset:0}.crop-panel{background:var(--panel);border:1px solid var(--panel-edge);border-radius:10px;flex-direction:column;gap:12px;width:min(560px,100%);padding:16px;display:flex;box-shadow:0 12px 40px #00000080}.crop-panel-header{justify-content:space-between;align-items:center;gap:8px;display:flex}.crop-panel-title{color:#dce4ff;white-space:nowrap;text-overflow:ellipsis;font-size:14px;font-weight:600;overflow:hidden}.crop-close-btn{color:#8a93b8;cursor:pointer;background:#0b0f1a;border:1px solid #4a5578;border-radius:4px;flex:none;justify-content:center;align-items:center;width:22px;height:22px;padding:0;display:flex}.crop-close-btn:hover{color:#ff6b6b;border-color:#ff6b6b}.crop-waveform-wrap{border:1px solid var(--panel-edge);touch-action:none;background:#0b0f1a;border-radius:6px;height:120px;position:relative;overflow:hidden}.crop-waveform{width:100%;height:100%;display:block}.crop-selection{border-left:1px solid var(--amber);border-right:1px solid var(--amber);pointer-events:none;background:#f5a62338;position:absolute;top:0;bottom:0}.crop-handle{background:var(--amber);opacity:.9;cursor:ew-resize;touch-action:none;width:10px;margin-left:-5px;position:absolute;top:0;bottom:0}.crop-time-row{letter-spacing:.03em;color:var(--text);justify-content:space-between;align-items:center;font-size:11px;display:flex}.crop-time-duration{color:var(--amber);font-weight:600}.crop-actions{justify-content:flex-end;gap:8px;display:flex}.drag-ghost{z-index:1000;opacity:.9;pointer-events:none;position:fixed;top:0;left:0;transform:translate(-50%,-50%);box-shadow:0 8px 24px #00000080}#track-list-wrap{flex:1;gap:8px;min-height:0;display:flex}#track-list{flex-direction:column;flex:1;gap:6px;min-height:0;display:flex;overflow-y:auto}.track-lane{--lane-color:transparent;border:1px solid #26314f;border-left:4px solid var(--lane-color);background:#182036;border-radius:6px;flex:none;align-items:center;gap:10px;min-height:30px;padding:6px 10px;transition:border-color .1s,background .1s;display:flex}.track-lane.drop-armed{border-color:#4a5578}.track-lane.drop-hover{border-color:var(--lead-color);background:#202a45}.track-lane.muted{opacity:.5}.track-name{color:#dce4ff;white-space:nowrap;text-overflow:ellipsis;flex:none;width:92px;font-size:12px;overflow:hidden}.track-progress{background:#0b0f1a;border-radius:3px;flex:1;height:5px;overflow:hidden}.track-progress-fill{background:var(--lane-color);width:0%;height:100%}.track-lane.has-clip .track-progress-fill{background:var(--lane-color,var(--lead-color))}.track-mute-btn,.track-clear-btn{width:22px;height:22px;color:var(--text);cursor:pointer;background:#0b0f1a;border:1px solid #26314f;border-radius:5px;flex:none;justify-content:center;align-items:center;padding:0;font-size:11px;display:flex}.track-mute-btn.active{background:var(--coral);border-color:var(--coral);color:#0b0f1a}#add-track-btn,#reset-tracks-btn{flex:none;align-self:stretch}#reset-tracks-btn:hover{border-color:var(--coral);color:var(--coral)}.control{color:var(--text);letter-spacing:.04em;text-transform:uppercase;flex-direction:column;gap:6px;font-size:12px;display:flex}.control.horizontal{flex-direction:row;flex:1;align-items:center;gap:12px}.control.horizontal span{flex:none;width:48px}select{color:#dce4ff;cursor:pointer;background:#182036;border:1px solid #26314f;border-radius:6px;padding:8px;font-size:13px}input[type=range]{appearance:none;background:#26314f;border-radius:2px;outline:none;flex:1;width:100%;height:4px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:var(--cyan);width:16px;height:16px;box-shadow:0 0 8px var(--cyan);cursor:pointer;border-radius:50%}input[type=range]::-moz-range-thumb{background:var(--cyan);width:16px;height:16px;box-shadow:0 0 8px var(--cyan);cursor:pointer;border:none;border-radius:50%}@media (width<=900px){html,body{height:auto;overflow:hidden auto}.dashboard{flex-direction:column;width:100%;height:auto;min-height:100vh;display:flex}#center-stage{flex:none;order:-1;width:100%;height:420px}#drum-section{flex:none;width:100%;height:440px}#controls,#track-deck{flex:none;width:100%}#track-deck-transport{flex-wrap:wrap;row-gap:8px}#track-deck-transport .control.horizontal{flex:160px;max-width:none}#track-list-wrap{height:240px}#piano-toolbar{flex-wrap:wrap;row-gap:8px}#octave-control{flex:140px;width:auto}}