html,body,#root{height:100%;margin:0}body{background:#14161a}:root{--bg:#14161a;--bg-2:#1c1f25;--bg-3:#262a32;--fg:#e6e8ec;--fg-dim:#8b929c;--accent:#6cd3a3;--accent-2:#4ab98a;--warn:#e07b5a;--rec:#e0524a;--loop:#d6b54c;--border:#2e333c}*{box-sizing:border-box}html,body,#root{background:var(--bg);height:100%;color:var(--fg);margin:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif}.app{flex-direction:column;height:100vh;display:flex;overflow:hidden}.topbar{background:var(--bg-2);border-bottom:1px solid var(--border);flex-wrap:wrap;align-items:center;gap:.9rem;padding:.6rem 1rem;display:flex}.brand{letter-spacing:.5px;font-size:1.1rem;font-weight:700}.brand span{color:var(--accent)}.transport{align-items:center;gap:.5rem;display:flex}.topbar button,.transport button,.project button{background:var(--bg-3);border:1px solid var(--border);color:var(--fg);cursor:pointer;border-radius:4px;padding:.35rem .75rem;font-size:.85rem;font-weight:500}.topbar button:hover,.transport button:hover,.project button:hover{background:#303540}.topbar button:disabled{opacity:.5;cursor:not-allowed}.transport button.active{background:var(--accent);color:#0a1410;border-color:var(--accent-2)}.loop-toggle{color:var(--fg-dim);align-items:center;gap:.35rem;font-size:.85rem;display:flex}.time{color:var(--fg-dim);margin-left:.4rem;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.85rem}.grid-controls{color:var(--fg-dim);align-items:center;gap:.6rem;font-size:.8rem;display:flex}.grid-controls label{align-items:center;gap:.35rem;display:flex}.grid-controls input[type=number]{background:var(--bg-3);width:60px;color:var(--fg);border:1px solid var(--border);border-radius:3px;padding:.3rem .4rem;font-family:ui-monospace,monospace;font-size:.85rem}.grid-controls select{background:var(--bg-3);color:var(--fg);border:1px solid var(--border);border-radius:3px;padding:.3rem .4rem;font-size:.85rem}.export{color:var(--accent)!important}.export:disabled{color:var(--fg-dim)!important}.project{align-items:center;gap:.4rem;display:flex}.project-name{background:var(--bg-3);border:1px solid var(--border);color:var(--fg);border-radius:4px;width:140px;padding:.35rem .6rem;font-size:.85rem}.project-picker{background:var(--bg-3);border:1px solid var(--border);color:var(--fg);border-radius:4px;max-width:220px;padding:.35rem .5rem;font-size:.85rem}.project button.danger{color:var(--warn);border-color:#563028}.project button.danger:hover{background:var(--warn);color:#1a0a06}.add-track{margin-left:auto;color:var(--fg-dim)!important;border:1px dashed var(--border)!important;background:0 0!important}.add-track:hover{color:var(--fg)!important;border-color:var(--accent)!important}.banner{background:var(--bg-3);border-bottom:1px solid var(--border);color:var(--fg-dim);align-items:center;gap:.5rem;padding:.5rem 1rem;font-size:.85rem;display:flex}.banner.err{color:#ffb6ad;background:#3a1f1c;border-color:#563028}.banner button{color:inherit;cursor:pointer;background:0 0;border:none;margin-left:auto;font-size:1rem}.timeline{background:var(--bg-2);border-bottom:1px solid var(--border);cursor:col-resize;touch-action:none;-webkit-user-select:none;user-select:none;height:28px;margin-left:280px;position:relative}.timeline:hover{background:#20242c}.ruler{position:absolute;inset:0}.tick{background:var(--border);width:1px;position:absolute;top:0;bottom:0}.tick span{color:var(--fg-dim);font-family:ui-monospace,monospace;font-size:.7rem;position:absolute;top:2px;left:4px}.grid-line{pointer-events:none;background:#6cd3a31f;width:1px;position:absolute;top:0;bottom:0}.playhead{background:var(--accent);pointer-events:none;width:2px;box-shadow:0 0 6px var(--accent);position:absolute;top:0;bottom:0}.tracks{flex:1;padding:0;overflow-y:auto}.track{border-bottom:1px solid var(--border);background:var(--bg);align-items:stretch;min-height:100px;display:flex}.track.muted{opacity:.55}.track.solo .track-controls{border-left:3px solid var(--accent)}.track-controls{background:var(--bg-2);border-right:1px solid var(--border);flex-direction:column;flex-shrink:0;gap:.4rem;width:280px;padding:.6rem .8rem;display:flex}.track-name{color:var(--fg);background:0 0;border:1px solid #0000;border-radius:3px;padding:.2rem .3rem;font-size:.95rem;font-weight:600}.track-name:hover,.track-name:focus{border-color:var(--border);background:var(--bg-3);outline:none}.knobs{flex-direction:column;gap:.25rem;display:flex}.knobs label{color:var(--fg-dim);flex-direction:column;font-family:ui-monospace,monospace;font-size:.7rem;display:flex}.knobs input[type=range]{width:100%;accent-color:var(--accent)}.buttons{gap:.25rem;margin-top:auto;display:flex}.buttons button{background:var(--bg-3);border:1px solid var(--border);width:26px;height:24px;color:var(--fg-dim);cursor:pointer;border-radius:3px;padding:0;font-size:.75rem;font-weight:700}.buttons button.on{background:var(--accent);color:#0a1410;border-color:var(--accent-2)}.buttons button.rec{color:var(--rec)}.buttons button.rec.on{background:var(--rec);color:#fff;border-color:var(--rec);animation:1s ease-in-out infinite pulse}.buttons button.loopbtn{color:var(--loop)}.buttons button.loopbtn.on{background:var(--loop);color:#1a1408;border-color:var(--loop)}.buttons button.loopbtn:disabled{opacity:.4}@keyframes pulse{0%,to{box-shadow:0 0 #e0524ab3}50%{box-shadow:0 0 0 6px #e0524a00}}.buttons button.x{color:var(--warn);margin-left:auto}.buttons button.x:hover{background:var(--warn);color:#1a0a06}.track-lane{background:repeating-linear-gradient(90deg, transparent 0 49px, #ffffff08 49px 50px), var(--bg);flex:1;min-height:100px;position:relative;overflow:hidden}.track-lane.drag{background:var(--bg-3);outline:2px dashed var(--accent);outline-offset:-4px}.track-lane.recording{background:#e0524a14}.clip{background:linear-gradient(180deg, var(--accent) 0%, var(--accent-2) 100%);color:#0a1410;cursor:grab;touch-action:none;border-radius:4px;min-width:24px;position:absolute;top:8px;bottom:8px;overflow:hidden;box-shadow:inset 0 0 0 1px #0003,0 1px 3px #0006}.clip:active{cursor:grabbing}.clip.loop{background:linear-gradient(180deg, var(--loop) 0%, #b89738 100%)}.clip-label{white-space:nowrap;text-overflow:ellipsis;text-shadow:0 1px #ffffff4d;z-index:1;pointer-events:none;font-size:.74rem;font-weight:600;position:absolute;top:4px;left:6px;right:14px;overflow:hidden}.waveform{pointer-events:none;width:100%;height:100%;display:block;position:absolute;inset:0}.resize-handle{cursor:ew-resize;touch-action:none;background:#0000002e;width:10px;position:absolute;top:0;bottom:0;right:0}.resize-handle:hover{background:#00000059}.rec-indicator{color:var(--rec);padding:.5rem .8rem;font-size:.95rem;font-weight:700;animation:1s ease-in-out infinite pulse}.picker{border:1px dashed var(--border);color:var(--fg-dim);cursor:pointer;border-radius:4px;justify-content:center;align-items:center;font-size:.85rem;transition:border-color .15s;display:flex;position:absolute;inset:.5rem}.picker:hover{border-color:var(--accent);color:var(--fg)}.picker input{display:none}.hint{background:var(--bg-2);border-top:1px solid var(--border);color:var(--fg-dim);text-align:center;padding:.5rem 1rem;font-size:.8rem}