:root{--bg:#12100e;--panel:#1b1815;--line:#332e28;--amber:#e8a33d;--amber-dim:#8a641f;--orange:#e8822d;--orange-dim:#8a4f1f;--text:#f1ece2;--text-dim:#8f887c;--mono: "SF Mono", "Roboto Mono", monospace;--track-border-w:1px;--track-pad-x:16px;--track-swatch-w:4px;--track-gap:14px;--rec-pulse-sec:2s}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:var(--mono);padding:24px;min-height:100vh}.wrap{max-width:1020px;margin:0 auto}h1{font-size:15px;letter-spacing:.14em;text-transform:uppercase;color:var(--amber);font-weight:600;margin:0 0 4px}.sub{color:var(--text-dim);font-size:12px;margin-bottom:24px}.transport{display:flex;flex-wrap:nowrap;align-items:center;gap:12px;background:var(--panel);border:1px solid var(--line);padding:12px 18px;border-radius:6px;margin-bottom:16px;overflow-x:auto}.transport button{background:none;border:1px solid var(--amber-dim);color:var(--amber);font-family:var(--mono);font-size:12px;letter-spacing:.05em;padding:8px 14px;border-radius:4px;cursor:pointer;text-transform:uppercase}.transport-label{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--amber);font-weight:700;margin-right:2px}.transport button:hover{background:#e8a33d1a}.transport button.active{background:var(--amber);color:var(--bg);font-weight:700}.bpm{display:flex;align-items:center;gap:8px;margin-left:auto}.bpm input{width:60px;background:var(--bg);border:1px solid var(--line);color:var(--text);font-family:var(--mono);font-size:13px;padding:6px;border-radius:4px;text-align:center}.bpm select{background:var(--bg);border:1px solid var(--line);color:var(--text);font-family:var(--mono);font-size:13px;padding:6px;border-radius:4px;cursor:pointer}.bpm label{font-size:11px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.08em}.beat-lights{display:flex;gap:5px}.beat-lights span{width:9px;height:9px;border-radius:50%;background:var(--line);display:inline-block}.beat-lights span.on{background:var(--amber)}.countin-display{font-size:22px;font-weight:700;color:var(--amber);min-width:64px;text-align:center}.sticky-header{position:sticky;top:0;z-index:30;background:var(--bg);padding-bottom:2px}.timeline-ruler-wrap{position:relative;height:26px;margin-bottom:8px;margin-left:calc(var(--track-border-w) + var(--track-pad-x) + var(--track-swatch-w) + var(--track-gap));margin-right:calc(var(--track-border-w) + var(--track-pad-x))}.timeline-ruler{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:26px;display:block;background:var(--panel);border:1px solid var(--line);border-radius:4px;cursor:pointer;touch-action:none}#tracksContainer{margin-bottom:12px}.track{background:var(--panel);border:var(--track-border-w) solid var(--line);border-radius:6px;padding:14px var(--track-pad-x);margin-bottom:12px;display:flex;align-items:stretch;gap:var(--track-gap)}.track .swatch{width:var(--track-swatch-w);align-self:stretch;border-radius:2px}.track-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:10px}.track.dragging{opacity:.45}.track-label-row{display:flex;align-items:center;justify-content:space-between;cursor:pointer}.track.controls-collapsed .track-controls{display:none}.track-label-left{display:flex;align-items:center;gap:6px;min-width:0}.drag-handle{color:var(--text-dim);font-size:14px;line-height:1;cursor:grab;-webkit-user-select:none;user-select:none;touch-action:none;padding:2px}.drag-handle:active{cursor:grabbing}.track-name-input{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-dim);background:none;border:1px solid transparent;font-family:var(--mono);padding:2px 4px;border-radius:3px;width:150px;max-width:40vw}.track-name-input:hover{border-color:var(--line)}.track-name-input:focus{outline:none;border-color:var(--amber-dim);background:var(--bg);color:var(--text);cursor:text}.track-label-controls{display:flex;align-items:center;gap:24px}.offset-field,.gain-field,.waveform-field{display:flex;align-items:center;gap:5px;font-size:10px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.06em}.waveform-select{background:var(--bg);border:1px solid var(--line);color:var(--text);font-family:var(--mono);font-size:11px;padding:4px 6px;border-radius:3px;cursor:pointer}.offset-input{width:56px;background:var(--bg);border:1px solid var(--line);color:var(--text);font-family:var(--mono);font-size:11px;padding:3px 5px;border-radius:3px;text-align:center}.gain-slider-wrap{position:relative;display:inline-flex;align-items:center;width:128px}.gain-slider{width:128px;accent-color:var(--amber);cursor:pointer;margin:0;display:block}.gain-tooltip{position:absolute;bottom:100%;margin-left:-14px;margin-bottom:5px;background:var(--panel);border:1px solid var(--amber-dim);color:var(--amber);font-size:10px;font-weight:700;padding:2px 6px;border-radius:3px;white-space:nowrap;opacity:0;transform:translateY(2px);transition:opacity .1s,transform .1s;pointer-events:none}.gain-tooltip.visible{opacity:1;transform:translateY(0)}.wave-stack{position:relative;width:100%;height:44px}canvas.wave{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:44px;display:block;background:var(--bg);border-radius:3px;cursor:ew-resize;touch-action:none}canvas.playhead{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:44px;pointer-events:none}.midi-note-stack{position:relative;width:100%;height:44px}canvas.midi-notes{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:44px;display:block;background:var(--bg);border-radius:3px;cursor:ew-resize;touch-action:none}.track.midi-track .swatch{background:repeating-linear-gradient(135deg,var(--line),var(--line) 3px,transparent 3px,transparent 6px)}.track-controls{display:flex;flex-direction:column;gap:8px;flex-shrink:0}.control-row{display:flex;flex-wrap:wrap;gap:8px}.track-controls button{background:none;border:1px solid var(--line);color:var(--text);font-family:var(--mono);font-size:11px;padding:7px 11px;border-radius:4px;cursor:pointer;text-transform:uppercase}.track-controls button.rec{border-color:#a33;color:#e77}.track-controls button.rec.recording{background:#a33;color:#fff;animation:pulse 1s infinite}body.rec-guide-active .track-controls button.rec:not(.recording){animation:rec-guide-pulse var(--rec-pulse-sec) ease-in-out infinite}@keyframes rec-guide-pulse{50%{opacity:.4}}.track-controls button.mute{border-color:#a33;color:#e77}.track-controls button.mute.active{background:#a33;color:#fff}.track-controls button.solo{border-color:#3a3;color:#7e7}.track-controls button.solo.active{background:#3a3;color:#fff;font-weight:700}.track-controls button.cut.active{background:var(--amber);color:var(--bg);font-weight:700;border-color:var(--amber-dim)}.track-controls button.bake{border-color:var(--orange-dim);color:var(--orange)}.track-controls button.bake:hover{background:#e8822d1f}.track-controls button.track-copy{border-color:var(--amber-dim);color:var(--amber);margin-left:auto}.track-controls button.track-copy.pending{background:var(--amber);color:var(--bg);font-weight:700}.track-controls button.remove{border-color:#553;color:var(--text-dim)}.track-controls button.echo.active,.track-controls button.reverb.active,.track-controls button.telephone.active,.track-controls button.denoise.active{background:var(--amber);color:var(--bg);font-weight:700;border-color:var(--amber-dim)}.pitch-group{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:4px;padding:0 4px}.pitch-group button{background:none;border:none;color:var(--text);cursor:pointer;font-family:var(--mono);font-size:13px;padding:7px 4px}.pitch-display{font-size:10px;color:var(--text-dim);min-width:34px;text-align:center}@keyframes pulse{50%{opacity:.5}}.track-actions-row{display:flex;gap:10px;margin-bottom:16px}.add-track-btn{flex:1;background:none;border:1px dashed #3a3;color:#7e7;font-family:var(--mono);font-size:12px;letter-spacing:.05em;text-transform:uppercase;padding:12px;border-radius:6px;cursor:pointer}.add-track-btn:hover{background:#33aa331f;border-color:#3a3}.export-row{display:flex;gap:10px;margin-bottom:16px}.export-btn{flex:1;background:none;border:1px solid var(--amber-dim);color:var(--amber);font-family:var(--mono);font-size:12px;letter-spacing:.05em;text-transform:uppercase;padding:12px;border-radius:6px;cursor:pointer}.export-btn:hover{background:#e8a33d1a}.export-btn:disabled{opacity:.4;cursor:not-allowed}.export-btn.danger{border-color:#a33;color:#e77}.export-btn.danger:hover{background:#aa33331f}.input-panel{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:12px 16px;margin-bottom:16px;display:flex;align-items:center;gap:10px}.input-panel label{font-size:11px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.08em}.input-panel select{flex:1;max-width:320px;background:var(--bg);border:1px solid var(--line);color:var(--text);font-family:var(--mono);font-size:13px;padding:6px 8px;border-radius:4px}.count-in-group{display:flex;flex-direction:column;align-items:center;gap:6px;margin-left:auto}.count-in-group input[type=number]{width:50px;background:var(--bg);border:1px solid var(--line);color:var(--text);font-family:var(--mono);font-size:13px;padding:6px;border-radius:4px;text-align:center}.tap-tempo-group{display:flex;align-items:center;gap:16px}.bpm-sync-group{display:flex;flex-direction:column;align-items:center;gap:6px}.bpm-sync-group input[type=checkbox]{width:15px;height:15px;margin:0;accent-color:var(--amber);cursor:pointer}.pitch-panel{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:14px 16px;margin-top:4px;display:flex;align-items:center;gap:16px}.pitch-readouts{display:flex;gap:12px}.pitch-readout-group{display:flex;flex-direction:column;align-items:center;gap:4px}.pitch-readout-label{font-size:10px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.08em}.pitch-readout{font-size:22px;font-weight:700;color:var(--bg);background:var(--amber);width:130px;height:40px;line-height:40px;text-align:center;border-radius:5px;padding:0 10px;white-space:nowrap}.pitch-note{font-size:12px;color:var(--text-dim)}.pitch-toggle-btn{background:none;border:1px solid var(--amber-dim);color:var(--amber);font-family:var(--mono);font-size:12px;letter-spacing:.05em;padding:8px 14px;border-radius:4px;cursor:pointer;text-transform:uppercase;flex-shrink:0}.pitch-toggle-btn:hover{background:#e8a33d1a}.pitch-toggle-btn.active{background:var(--amber);color:var(--bg);font-weight:700}.status{margin-top:14px;font-size:11px;color:var(--text-dim);line-height:1.6}.footer{margin-top:24px;font-size:10px;color:var(--line);text-align:right}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0009;display:flex;align-items:center;justify-content:center;z-index:100}.modal-box{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:22px;max-width:360px;width:90%;box-shadow:0 12px 40px #00000080}.modal-message{margin:0 0 20px;font-size:13px;color:var(--text);line-height:1.5}.modal-buttons{display:flex;gap:10px;justify-content:flex-end}.modal-btn{background:none;border:1px solid var(--line);color:var(--text);font-family:var(--mono);font-size:12px;letter-spacing:.05em;text-transform:uppercase;padding:8px 16px;border-radius:4px;cursor:pointer}.modal-btn:hover{background:#ffffff14}.modal-btn-yes{border-color:var(--amber-dim);color:var(--amber)}.modal-btn-yes:hover{background:#e8a33d1a}.modal-btn-cancel{border-color:#553;color:var(--text-dim)}.modal-accuracy-row{display:flex;align-items:center;gap:10px;margin:0 0 20px}.modal-accuracy-slider{flex:1;accent-color:var(--amber);cursor:pointer;margin:0}.modal-accuracy-readout{font-size:11px;color:var(--amber);min-width:70px;text-align:right;white-space:nowrap}