:root{--bg:#12100e;--panel:#1b1815;--line:#332e28;--amber:#e8a33d;--amber-dim:#8a641f;--text:#f1ece2;--text-dim:#8f887c;--mono: "SF Mono", "Roboto Mono", monospace}*{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:940px;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:wrap;align-items:center;gap:18px;background:var(--panel);border:1px solid var(--line);padding:16px 18px;border-radius:6px;margin-bottom:16px}.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 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}.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:1px solid var(--line);border-radius:6px;padding:14px 16px;margin-bottom:12px;display:flex;align-items:stretch;gap:14px}.track .swatch{width:4px;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}.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{display:flex;align-items:center;gap:5px;font-size:10px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.06em}.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}.track-controls{display:flex;flex-wrap:wrap;gap:8px;flex-shrink:0}.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}.track-controls button.mute.active{background:var(--text-dim);color:var(--bg)}.track-controls button.solo.active,.track-controls button.cut.active{background:var(--amber);color:var(--bg);font-weight:700;border-color:var(--amber-dim)}.track-controls button.remove{border-color:#553;color:var(--text-dim)}.track-controls button.echo.active,.track-controls button.reverb.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 var(--line);color:var(--text-dim);font-family:var(--mono);font-size:12px;letter-spacing:.05em;text-transform:uppercase;padding:12px;border-radius:6px;cursor:pointer}.add-track-btn:hover{border-color:var(--amber-dim);color:var(--amber)}.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}.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}.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-readout{font-size:22px;color:var(--amber);min-width:70px}.pitch-note{font-size:12px;color:var(--text-dim)}.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}