:root{--bg: #0e0e14;--bg-2: #15151f;--bg-3: #1d1d2b;--panel: #16161f;--line: #2a2a3a;--text: #e8e8f0;--muted: #8a8aa0;--accent: #5dd0ff;--accent-2: #ff5d8f;--good: #5dffa0;--warn: #ffd166;--radius: 8px;--gutter: 132px}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--text);overflow:hidden;-webkit-font-smoothing:antialiased}button{font-family:inherit;color:var(--text);background:var(--bg-3);border:1px solid var(--line);border-radius:6px;padding:6px 10px;cursor:pointer;font-size:12px;transition:background .12s,border-color .12s}button:hover{background:#26263a}button:disabled{opacity:.4;cursor:default}button.primary{background:var(--accent);color:#06121a;border-color:var(--accent);font-weight:600}button.primary:hover{background:#7adcff}button.active{background:var(--accent-2);border-color:var(--accent-2);color:#1a0610}input,select{font-family:inherit;background:var(--bg-2);color:var(--text);border:1px solid var(--line);border-radius:6px;padding:5px 7px;font-size:12px}input[type=range]{padding:0;accent-color:var(--accent)}label{font-size:11px;color:var(--muted)}.row{display:flex;align-items:center;gap:8px}.col{display:flex;flex-direction:column;gap:6px}.spacer{flex:1}.muted{color:var(--muted)}.pill{font-size:10px;padding:2px 6px;border-radius:999px;background:var(--bg-3);color:var(--muted)}.app{display:flex;flex-direction:column;height:100%}.topbar{display:flex;align-items:center;gap:12px;padding:8px 12px;background:var(--panel);border-bottom:1px solid var(--line);flex-wrap:wrap}.logo{font-weight:800;letter-spacing:.5px;font-size:16px}.logo span{color:var(--accent)}.brand-sub{font-size:10px;color:var(--muted);margin-left:-6px}.workspace{flex:1;display:grid;grid-template-columns:230px 1fr 270px;min-height:0}.panel-left,.panel-right{background:var(--panel);overflow-y:auto;min-height:0}.panel-left{border-right:1px solid var(--line)}.panel-right{border-left:1px solid var(--line)}.center{display:flex;flex-direction:column;min-width:0;min-height:0}.panel-header{padding:9px 12px;font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--muted);border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--panel);display:flex;align-items:center;gap:8px}.transport{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.tbtn{width:38px;height:34px;display:grid;place-items:center;font-size:14px}.tbtn.play{background:var(--good);color:#042;border-color:var(--good)}.tbtn.play.on{background:var(--warn);border-color:var(--warn)}.field{display:flex;flex-direction:column;gap:2px}.field input[type=number]{width:64px}.field .val{font-variant-numeric:tabular-nums}.cat-tabs{display:flex;flex-wrap:wrap;gap:4px;padding:8px}.cat-tabs button{padding:4px 8px;font-size:11px}.sample-list{padding:4px 8px 16px}.sample-item{display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:6px;cursor:grab;border:1px solid transparent}.sample-item:hover{background:var(--bg-3);border-color:var(--line)}.sample-item .dot{width:8px;height:8px;border-radius:50%;flex:none}.sample-item .nm{font-size:12px;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sample-item .meta{font-size:10px;color:var(--muted)}.sample-item .mini{display:none;gap:4px}.sample-item:hover .mini{display:flex}.icon-btn{width:22px;height:22px;padding:0;display:grid;place-items:center;font-size:11px}.track-card{padding:10px 12px;border-bottom:1px solid var(--line)}.track-card.sel{background:#1b1b2b;box-shadow:inset 3px 0 0 var(--accent)}.track-top{display:flex;align-items:center;gap:8px}.track-color{width:10px;height:10px;border-radius:3px;flex:none}.track-name{font-size:13px;font-weight:600;flex:1;background:transparent;border:none;padding:2px}.track-name:focus{background:var(--bg-2);border-radius:4px}.ms{display:flex;gap:4px}.ms button{width:24px;height:22px;padding:0;font-size:10px;font-weight:700}.ms .m.on{background:var(--warn);color:#221;border-color:var(--warn)}.ms .s.on{background:var(--accent);color:#012;border-color:var(--accent)}.knob-row{display:flex;gap:12px;margin-top:8px}.knob-row .field{flex:1}.master-card{padding:12px;border-bottom:1px solid var(--line);background:var(--bg-2)}.synth-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px;padding:10px 12px}.synth-grid .field .val{font-size:10px;color:var(--accent)}.section-label{grid-column:1 / -1;font-size:10px;text-transform:uppercase;letter-spacing:1px;color:var(--muted);margin-top:4px}.timeline-wrap{flex:1;position:relative;overflow:auto;background:var(--bg);min-height:0}.timeline-toolbar{display:flex;align-items:center;gap:8px;padding:6px 10px;border-bottom:1px solid var(--line);background:var(--bg-2)}.timeline-canvas{display:block}.hint{font-size:11px;color:var(--muted)}.dock{border-top:1px solid var(--line);background:var(--panel);display:flex;flex-direction:column}.dock-header{display:flex;align-items:center;gap:10px;padding:6px 10px;border-bottom:1px solid var(--line)}.pianoroll-wrap{height:240px;overflow:auto;position:relative}.pianoroll-canvas{display:block}.seq-toolbar{display:flex;align-items:center;gap:5px;padding:6px 10px;border-bottom:1px solid var(--line);background:var(--bg-2);flex-wrap:wrap}.seq-toolbar button{padding:4px 7px;font-size:11px}.seq-toolbar label{font-size:10px;text-transform:uppercase;letter-spacing:.5px}.seq-sep{width:1px;height:18px;background:var(--line);margin:0 4px}.seq-grid-wrap{max-height:260px;overflow:auto;padding:6px}.seq-grid{-webkit-user-select:none;user-select:none}.seq-row{display:flex;align-items:center}.seq-label{display:flex;flex-direction:column;justify-content:center;padding:0 8px;cursor:pointer;border-right:1px solid var(--line);height:100%}.seq-label:hover{background:var(--bg-3)}.seq-label-nm{font-size:11px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.seq-label-note{font-size:9px;color:var(--muted)}.seq-cell{border-right:1px solid #15151d;border-bottom:1px solid #15151d;display:grid;place-items:center;cursor:pointer;padding:3px}.seq-cell.g0{background:#12121b}.seq-cell.g1{background:#0f0f17}.seq-cell.beat{border-left:1px solid #2a2a3a}.seq-cell:hover{background:#1c1c2a}.seq-hit{width:100%;height:100%;border-radius:3px}.seq-ratchet{display:flex;gap:1px;width:100%;height:100%}.seq-ratchet i{flex:1;border-radius:2px}.seq-playhead{position:absolute;top:0;left:0;width:2px;background:var(--accent-2);pointer-events:none;opacity:0;transition:opacity .1s}.clip-bar{display:flex;align-items:center;gap:6px;padding:6px 10px;flex-wrap:wrap;background:var(--bg-3);border-bottom:1px solid var(--line);min-height:38px}.clip-bar.empty{color:var(--muted);font-size:12px}.clip-bar label{font-size:10px;text-transform:uppercase;letter-spacing:.5px}.clip-bar button{padding:4px 8px;font-size:11px}.clip-bar .num{width:58px}.clip-bar .clip-name{width:130px;font-weight:600}button.danger{background:#3a1620;border-color:#5a2030;color:#ff8fab}button.danger:hover{background:#4d1c2a}.ctx-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:70}.ctx-menu{position:fixed;z-index:71;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:4px;min-width:170px;box-shadow:0 10px 34px #0000008c;display:flex;flex-direction:column}.ctx-menu button{text-align:left;background:transparent;border:none;padding:7px 10px;border-radius:5px;font-size:12px}.ctx-menu button:hover{background:var(--bg-3)}.ctx-menu button.danger{color:#ff8fab;background:transparent}.ctx-menu button.danger:hover{background:#3a1620}.ctx-sep{height:1px;background:var(--line);margin:4px 2px}.mic-status{text-align:center;font-size:16px;font-weight:600;padding:14px;border-radius:8px;background:var(--bg-2);border:1px solid var(--line)}.mic-status.rec{color:var(--accent-2);animation:micpulse 1s infinite}.mic-status.err{color:var(--warn);font-size:13px}@keyframes micpulse{0%,to{opacity:1}50%{opacity:.55}}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#0009;display:grid;place-items:center;z-index:50}.modal{background:var(--panel);border:1px solid var(--line);border-radius:12px;width:560px;max-width:92vw;max-height:88vh;overflow:auto}.modal h3{margin:0;padding:14px 16px;border-bottom:1px solid var(--line);font-size:14px}.modal-body{padding:16px;display:flex;flex-direction:column;gap:12px}.modal-foot{padding:12px 16px;border-top:1px solid var(--line);display:flex;gap:8px;justify-content:flex-end}.project-row{display:flex;align-items:center;gap:8px;padding:8px;border:1px solid var(--line);border-radius:6px}.project-row .nm{flex:1}.toast{position:fixed;bottom:18px;left:50%;transform:translate(-50%);background:var(--bg-3);border:1px solid var(--accent);color:var(--text);padding:10px 16px;border-radius:8px;z-index:60;font-size:13px;box-shadow:0 8px 30px #00000080}.help-btn{width:20px;height:20px;padding:0;border-radius:50%;display:inline-grid;place-items:center;font-size:11px;font-weight:700;background:var(--bg-3);border-color:var(--line);color:var(--accent);flex:none}.help-btn:hover{background:var(--accent);color:#06121a;border-color:var(--accent)}.modal h3{display:flex;align-items:center;gap:8px}.help-back{margin-left:auto;font-size:11px;padding:3px 8px}.tut-index{display:flex;flex-direction:column;gap:8px}.tut-index-item{display:flex;gap:12px;align-items:flex-start;text-align:left;padding:10px 12px}.tut-ico{font-size:18px;flex:none}.tut-title{font-size:13px;font-weight:600}.tut-sub{font-size:11px;margin-top:2px;line-height:1.4}.tut-progress{display:flex;align-items:center;gap:6px}.tut-dot{width:9px;height:9px;border-radius:50%;background:var(--bg-3);border:1px solid var(--line);cursor:pointer}.tut-dot.on{background:var(--accent);border-color:var(--accent)}.tut-dot.done{background:var(--accent-2);border-color:var(--accent-2)}.tut-count{margin-left:auto;font-size:11px}.tut-step{background:var(--bg-2);border:1px solid var(--line);border-radius:8px;padding:14px;min-height:84px}.tut-step-h{font-size:14px;font-weight:700;color:var(--accent);margin-bottom:6px}.tut-step-b{font-size:13px;line-height:1.55}.tut-extra{display:grid;grid-template-columns:1fr 1fr;gap:12px}.tut-extra-h{font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--muted);margin-bottom:4px}.tut-extra ul{margin:0;padding-left:16px;font-size:12px;line-height:1.5}kbd{background:var(--bg-3);border:1px solid var(--line);border-bottom-width:2px;border-radius:4px;padding:1px 5px;font-size:11px;font-family:inherit}.splash{position:fixed;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;background:var(--bg);z-index:100}.splash .card{text-align:center}.splash h1{font-size:40px;margin:0 0 6px}.splash h1 span{color:var(--accent)}