*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;background:var(--bg);color:var(--text);font-family:Segoe UI,system-ui,-apple-system,sans-serif;font-size:13px;overflow:hidden}#app{display:flex;flex-direction:column;height:100vh}#transport{display:flex;align-items:center;gap:var(--sp-4);padding:var(--sp-3) var(--sp-6);background:var(--surface-1);border-bottom:1px solid var(--line);flex-shrink:0;min-height:52px}.shell-group{display:flex;align-items:center;gap:var(--sp-3);flex-shrink:0}.shell-divider{align-self:stretch;width:1px;margin:var(--sp-2) 0;background:var(--line);flex-shrink:0}.transport-spacer{flex:1 1 0;min-width:0}.icon{display:block;flex-shrink:0}.shell-project{display:flex;align-items:center;gap:var(--sp-5);flex-shrink:0}.transport-title{font-size:var(--fs-4);font-weight:800;letter-spacing:2px;color:var(--accent)}.project-meta{display:flex;flex-direction:column;gap:1px;min-width:0}.project-name-input{background:transparent;border:none;border-bottom:1px solid transparent;color:var(--text-1);font:600 var(--fs-3) var(--font-ui);width:120px;padding:1px 2px;outline:none;transition:border-color var(--motion-fast)}.project-name-input:hover,.project-name-input:focus{border-bottom-color:var(--accent)}.save-status{font-size:var(--fs-1);color:var(--text-3);padding:0 2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:120px}.save-status[data-state=dirty]{color:var(--warn)}.save-status[data-state=busy]{color:var(--text-2)}.transport-buttons{gap:var(--sp-2)}#transport-play{width:44px}#transport-play:not([aria-pressed=true]){background:var(--accent);border-color:var(--accent);color:var(--on-accent)}#transport-play[aria-pressed=true]{background:var(--warn);border-color:var(--warn);color:var(--on-warn)}#transport-record{color:var(--danger)}#transport-record[aria-pressed=true]{background:var(--danger);border-color:var(--danger);color:var(--on-danger);animation:rec-pulse 1s ease-in-out infinite}@keyframes rec-pulse{50%{opacity:.55}}#btn-metronome[aria-pressed=true]{background:var(--ok);border-color:var(--ok);color:var(--on-ok)}.bpm-field{display:flex;align-items:center;gap:var(--sp-2)}.bpm-field .shell-label{font-size:var(--fs-1);font-weight:700;color:var(--text-3);letter-spacing:.06em}#bpm-input{width:58px;height:var(--h-lg);font-size:var(--fs-4);font-weight:700;text-align:center}#btn-tap-tempo{letter-spacing:.08em}#btn-tap-tempo.tapped{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}#timesig-select{width:60px}.scrubbable{cursor:ns-resize}.scrubbable:focus{cursor:text}.scrubbable.scrubbing{background:var(--bg2)}.scrubbable::-webkit-inner-spin-button,.scrubbable::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.scrubbable[type=number]{-moz-appearance:textfield;appearance:textfield}.master-visualizer{height:28px;width:80px;border-radius:var(--r-ctl);background:var(--surface-well);border:1px solid var(--line);flex-shrink:0}.master-level{display:flex;flex-direction:column;gap:var(--sp-2);width:88px}.master-level .slider{height:12px}.peak-meter{width:100%;height:6px;background:var(--surface-well);border-radius:var(--r-pill);overflow:hidden;cursor:pointer}.peak-meter-fill{height:100%;width:0%;background:var(--ok);border-radius:var(--r-pill);transition:width .05s linear,background .1s}.peak-meter-fill.hot{background:var(--warn)}.peak-meter-fill.clip{background:var(--danger)}.position-group{gap:var(--sp-3);flex-shrink:1;min-width:0}.position-readout{font:700 var(--fs-5) var(--font-mono);font-variant-numeric:tabular-nums;color:var(--text-1);background:var(--surface-well);border:1px solid var(--line);border-radius:var(--r-ctl);height:var(--h-lg);min-width:96px;padding:0 var(--sp-4);text-align:center;cursor:pointer;white-space:nowrap;flex-shrink:0}.position-readout:hover{border-color:var(--surface-4)}.mode-indicator{font-size:9px;font-weight:700;letter-spacing:1px;padding:3px 6px;border-radius:var(--r-ctl);background:var(--surface-3);color:var(--text-2);border:1px solid var(--line);white-space:nowrap;max-width:120px;overflow:hidden;text-overflow:ellipsis}.mode-indicator.playlist-mode{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}.shell-actions{gap:var(--sp-2)}#btn-project{gap:var(--sp-2);padding:0 var(--sp-4)}#btn-project .btn-caret{opacity:.7}@media(max-width:1100px){#transport{gap:var(--sp-4);padding:var(--sp-3) var(--sp-5)}.shell-label,.master-visualizer,.transport-title{display:none}#transport{gap:var(--sp-3)}.project-name-input,.save-status{width:110px;max-width:110px}.master-level{width:72px}.mode-indicator{max-width:90px}}@media(max-width:900px){#transport{flex-wrap:wrap;row-gap:var(--sp-3)}}#tabs{display:flex;gap:var(--sp-1);padding:var(--sp-2) var(--sp-6);background:var(--surface-1);border-bottom:1px solid var(--line);flex-shrink:0}.tab-btn{display:inline-flex;align-items:center;gap:var(--sp-3);height:var(--h-md);padding:0 var(--sp-5);background:none;border:1px solid transparent;border-radius:var(--r-ctl);color:var(--text-2);cursor:pointer;font:600 var(--fs-3) var(--font-ui);transition:color var(--motion-fast),background var(--motion-fast)}.tab-btn:hover{color:var(--text-1);background:var(--surface-2)}.tab-btn.active{color:var(--text-1);background:var(--surface-3);border-color:var(--line)}.tab-dot{width:8px;height:8px;border-radius:50%;background:var(--tab-dot, var(--text-3));opacity:.6}.tab-btn.active .tab-dot{opacity:1}.tab-btn kbd{font:600 10px var(--font-mono);padding:1px 4px;background:var(--surface-well);border:1px solid var(--line);border-radius:3px;color:var(--text-3)}.panel-help-row{display:flex;justify-content:flex-end;padding-top:var(--sp-2)}.track-delete-btn{background:none;border:none;color:var(--text3);cursor:pointer;font-size:16px;padding:0 4px;opacity:0;transition:opacity .15s,color .15s;float:right}.playlist-track-label:hover .track-delete-btn{opacity:1}.track-delete-btn:hover{color:var(--accent-drum)}.track-rename-input{width:80px;background:var(--bg);border:1px solid var(--accent);border-radius:3px;color:var(--text);font-size:12px;padding:2px 4px;outline:none}#content-area{flex:1;min-height:0;display:flex;overflow:hidden}#panels{flex:1;overflow:hidden;position:relative}.panel{position:absolute;inset:0;overflow:hidden;padding:8px 12px;display:flex;flex-direction:column}.panel.hidden{display:none}.control-group{display:flex;flex-direction:column;gap:2px}.control-group label{font-size:9px;text-transform:uppercase;letter-spacing:.6px;color:var(--text2)}.control-group select,.control-group input[type=range]{height:24px}select{background:var(--bg3);border:1px solid var(--border);border-radius:4px;color:var(--text);padding:0 4px;cursor:pointer;font-size:11px}select:focus{outline:1px solid var(--accent)}input[type=range]{-webkit-appearance:none;appearance:none;background:var(--bg4);border-radius:3px;height:4px;cursor:pointer}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;background:var(--accent);border-radius:50%;transition:box-shadow .1s}input[type=range]::-webkit-slider-thumb:hover{box-shadow:0 0 6px color-mix(in srgb,var(--accent) 50%,transparent)}input[type=range]::-moz-range-thumb{width:12px;height:12px;background:var(--accent);border-radius:50%;border:none}.section-label{font-size:9px;text-transform:uppercase;letter-spacing:.6px;color:var(--text3);display:block;margin-bottom:2px}.btn-small{width:22px;height:22px;background:var(--bg3);border:1px solid var(--border);border-radius:4px;color:var(--text);cursor:pointer;font-size:12px;display:flex;align-items:center;justify-content:center;transition:background .1s}.btn-small:hover{background:var(--accent);border-color:var(--accent)}.btn-small.btn-danger:hover{background:var(--accent-drum);border-color:var(--accent-drum)}.btn-record{padding:4px 10px;background:var(--bg3);border:1px solid var(--accent-drum);border-radius:4px;color:var(--accent-drum);cursor:pointer;font-size:11px;font-weight:600;transition:background .1s,color .1s}.btn-record:hover{background:color-mix(in srgb,var(--danger) 20%,transparent)}.btn-record.active{background:var(--track-drums);color:var(--on-danger);animation:pulse-record 1s ease-in-out infinite}@keyframes pulse-record{0%,to{opacity:1}50%{opacity:.7}}.pattern-row{display:flex;gap:3px;align-items:center}html{transition:background .3s}body,#transport,#tabs,.panel,.mixer-strip,.fx-group,.sampler-viz,.sampler-controls,.playlist-scroll,.btn-mode,.drum-step,.roll-cell,select,input[type=range]{transition:background .25s,border-color .25s,color .25s}.btn-primary{padding:6px 14px;background:var(--accent);border:1px solid var(--tint-3);border-radius:5px;color:var(--on-accent);cursor:pointer;font-size:12px;font-weight:600;transition:background .15s,box-shadow .15s,opacity .15s}.btn-primary:hover:not(:disabled){filter:brightness(1.1);box-shadow:var(--shadow-sm)}.btn-primary:disabled{opacity:.4;cursor:not-allowed}.loop-toggle.active{background:var(--track-audio);border-color:var(--track-audio);color:var(--on-accent)}.btn-small.loop-toggle{width:auto;padding:0 6px;white-space:nowrap}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}canvas[role=slider]:focus-visible{outline:none}canvas[role=slider]{touch-action:none}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}