:root{--bg:#050706;--panel:#070a08;--panel-2:#0a0e0b;--panel-3:#0c110d;--line:#16271c;--line-2:#101a13;--text:#b4eec9;--muted:#4a6f58;--accent:#2dff8a;--accent-dim:#2dff8a24;--on:#2dff8a;--hl-bg:#2dff8a14;--hl-bar:#2dff8a;--danger:#ff5e5e;--glow:0 0 8px #2dff8a59;--syn-comment:#3c5c47;--syn-keyword:#67ffac;--syn-string:#eaffee;--syn-number:#fff;--syn-method:#8dffc3;--syn-var:#6fd99e;--syn-punct:#3f6b51;font-family:ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,monospace;font-size:13px;line-height:1.4}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;overflow:hidden}body{background:var(--bg);color:var(--text)}body:after{content:"";pointer-events:none;z-index:1000;opacity:.35;background:repeating-linear-gradient(#0000 0 2px,#0000001f 3px);position:fixed;inset:0}.app{flex-direction:column;height:100vh;display:flex;overflow:hidden}input[type=range]{appearance:none;background:var(--line);cursor:pointer;border-radius:1px;outline:none;height:2px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:var(--accent);cursor:pointer;width:12px;height:12px;box-shadow:var(--glow);border-radius:2px;transition:background .1s,transform .1s}input[type=range]:hover::-webkit-slider-thumb{background:#7dffb6;transform:scale(1.15)}input[type=range]::-moz-range-thumb{background:var(--accent);cursor:pointer;border:none;border-radius:2px;width:12px;height:12px}.btn{height:24px;color:var(--text);cursor:pointer;font:inherit;white-space:nowrap;background:0 0;border:none;border-radius:3px;align-items:center;padding:0 10px;font-size:12px;transition:background .1s,color .1s;display:inline-flex}.btn:hover{background:var(--accent-dim);color:var(--accent)}.btn:disabled{opacity:.35;cursor:not-allowed}.btn.primary{color:var(--accent);min-width:68px;text-shadow:var(--glow);background:0 0;border:1px solid #2dff8a8c;justify-content:center;font-weight:600;box-shadow:inset 0 0 12px #2dff8a0f}.btn.primary:hover{background:var(--accent-dim);box-shadow:0 0 14px #2dff8a40}.btn.primary.playing{color:#d8ffe9;border-color:var(--accent);background:#2dff8a1f;animation:1.2s ease-in-out infinite pulse-play;box-shadow:0 0 18px #2dff8a59}.btn.primary.playing:hover{background:#2dff8a33}.btn.danger-hover:hover{color:var(--danger);background:#ff5e5e1a}@keyframes pulse-play{0%,to{box-shadow:0 0 10px #2dff8a40}50%{box-shadow:0 0 22px #2dff8a80}}.chip{height:22px;color:var(--muted);cursor:pointer;font:inherit;background:0 0;border:none;border-radius:3px;align-items:center;padding:0 8px;font-size:12px;transition:background .1s,color .1s;display:inline-flex}.chip:hover{background:var(--accent-dim);color:var(--text)}.chip.on{color:var(--accent);font-weight:600}.transport{background:var(--panel-3);border-bottom:1px solid var(--line);-webkit-user-select:none;user-select:none;flex-shrink:0;align-items:center;gap:4px;height:38px;padding:0 10px;display:flex}.brand{color:var(--accent);text-shadow:var(--glow);letter-spacing:.08em;padding:0 10px 0 2px;font-size:13px;font-weight:700}.brand:before{content:"▌";margin-right:6px;animation:1.1s step-end infinite cursor-blink}@keyframes cursor-blink{50%{opacity:0}}.bpm{border-left:1px solid var(--line);border-right:1px solid var(--line);height:100%;color:var(--muted);align-items:center;gap:8px;margin:0 4px;padding:0 12px;font-size:12px;display:flex}.bpm-key{letter-spacing:.05em}.bpm input[type=range]{width:80px}.bpm-val{text-align:right;min-width:28px;color:var(--accent);font-variant-numeric:tabular-nums;text-shadow:var(--glow);font-size:12px}.transport-actions{gap:2px;margin-left:4px;display:flex}.lang-switch{gap:2px;margin-left:auto;display:flex}.workspace{background:var(--line-2);flex:1;grid-template-columns:200px 1fr 240px;gap:1px;min-height:0;display:grid;overflow:hidden}.panel{background:var(--panel);min-height:0;overflow:auto}.panel-header{border-bottom:1px solid var(--line-2);flex-shrink:0;align-items:center;gap:8px;padding:7px 12px 5px;display:flex}.panel-header h3{text-transform:uppercase;letter-spacing:.18em;color:var(--muted);font-size:10px;font-weight:600}.panel-header h3:before{content:"// ";opacity:.6}.tracks{background:var(--panel-2);flex-direction:column;display:flex;overflow:hidden}.tracks-section{flex:1;padding:4px 0;overflow:auto}.track-list{list-style:none}.track{border-left:2px solid #0000;flex-direction:column;gap:2px;padding:3px 6px 4px 10px;transition:background 80ms,border-color 80ms;display:flex}.track-main{align-items:center;gap:2px;height:22px;display:flex}.track:hover{background:#2dff8a0a}.track.sel{border-left-color:var(--accent);background:#2dff8a17}.track.sel:hover{background:#2dff8a21}.track-name{color:var(--text);cursor:pointer;font:inherit;text-align:left;text-overflow:ellipsis;white-space:nowrap;background:0 0;border:none;flex:1;padding:0;font-size:13px;overflow:hidden}.track.sel .track-name{color:var(--accent);text-shadow:var(--glow)}.track-actions{opacity:0;gap:1px;transition:opacity .1s;display:flex}.track:hover .track-actions,.track.sel .track-actions{opacity:1}.track-vol{align-items:center;gap:5px;padding:0 0 1px;display:flex}.vol-label{color:var(--muted);letter-spacing:.06em;flex-shrink:0;width:22px;font-size:9px}.vol-slider{flex:1;min-width:0}.vol-val{color:var(--muted);text-align:right;font-variant-numeric:tabular-nums;min-width:28px;font-size:10px}.vol-reset{width:16px;height:16px;color:var(--accent);cursor:pointer;background:0 0;border:none;border-radius:2px;flex-shrink:0;justify-content:center;align-items:center;padding:0;font-size:13px;transition:opacity .1s,background .1s;display:inline-flex}.vol-reset:hover{background:var(--accent-dim)}.vol-reset.dimmed{opacity:.2;cursor:default}.mute,.solo{width:22px;height:22px;color:var(--muted);cursor:pointer;background:0 0;border:none;border-radius:3px;justify-content:center;align-items:center;font-size:10px;font-weight:700;transition:background .1s,color .1s;display:inline-flex}.mute:hover,.solo:hover{background:var(--accent-dim);color:var(--text)}.mute.on{color:var(--danger);background:#ff5e5e26}.solo.on{color:var(--accent);background:var(--accent-dim);text-shadow:var(--glow)}.remove{width:22px;height:22px;color:var(--muted);cursor:pointer;background:0 0;border:none;border-radius:3px;justify-content:center;align-items:center;font-size:13px;line-height:1;transition:background .1s,color .1s;display:inline-flex}.remove:hover{color:var(--danger);background:#ff5e5e26}.add-section{border-top:1px solid var(--line-2);padding:8px}.add-label{text-transform:uppercase;letter-spacing:.18em;color:var(--muted);padding:0 0 6px;font-size:10px;font-weight:600}.add-grid{grid-template-columns:1fr 1fr;gap:4px;display:grid}.add-btn{height:24px;color:var(--muted);border:1px solid var(--line);cursor:pointer;font:inherit;background:#2dff8a08;border-radius:3px;justify-content:center;align-items:center;font-size:11px;transition:background .1s,color .1s,border-color .1s,box-shadow .1s;display:flex}.add-btn:hover{background:var(--accent-dim);color:var(--accent);border-color:#2dff8a73;box-shadow:0 0 10px #2dff8a26}.code{background:var(--panel);flex-direction:column;display:flex;overflow:hidden}.code-head{border-bottom:1px solid var(--line-2);flex-shrink:0;align-items:center;gap:8px;padding:7px 12px 5px;display:flex}.code-head h3{text-transform:uppercase;letter-spacing:.18em;color:var(--muted);font-size:10px;font-weight:600}.code-head h3:before{content:"// ";opacity:.6}.badge{color:var(--muted);border:1px solid var(--line);border-radius:3px;padding:0 5px;font-size:10px;line-height:16px}.badge.live-badge{color:var(--accent);text-shadow:var(--glow);border-color:#2dff8a73}.code-mode-switch{border:1px solid var(--line);border-radius:4px;gap:1px;padding:1px;display:flex}.code-mode-switch .chip{height:18px;padding:0 8px;font-size:11px}.code-mode-switch .chip.on{background:var(--accent-dim);border-radius:3px}.code-pre{cursor:text;-webkit-user-select:text;user-select:text;text-shadow:0 0 7px #2dff8a38;flex:1;margin:0;padding:10px 0;font-family:inherit;font-size:13px;line-height:1.7;overflow:auto}.code-row{border-left:2px solid #0000;align-items:baseline;transition:background 80ms,border-color 80ms;display:flex}.code-row:hover{background:#2dff8a05}.code-row.hl{background:var(--hl-bg);border-left-color:var(--hl-bar)}.ln{text-align:right;width:44px;min-width:44px;color:var(--muted);opacity:.5;-webkit-user-select:none;user-select:none;pointer-events:none;font-variant-numeric:tabular-nums;flex-shrink:0;padding-right:14px;font-size:11px}.code-row.hl .ln{opacity:.85;color:var(--accent)}.code-line{white-space:pre;min-width:0;color:var(--text);flex:1;padding-right:16px;display:block}.tk-comment{color:var(--syn-comment);text-shadow:none;font-style:italic}.tk-keyword{color:var(--syn-keyword)}.tk-string{color:var(--syn-string)}.tk-number{color:var(--syn-number)}.tk-method{color:var(--syn-method)}.tk-var{color:var(--syn-var)}.tk-punct{color:var(--syn-punct);text-shadow:none}.punch-row{-webkit-user-select:none;user-select:none;pointer-events:none;align-items:center;height:14px;display:flex}.punch-cells{grid-template-columns:repeat(16,14px);align-items:center;gap:3px;display:grid}.punch-cell{background:#2dff8a12;border-radius:1px;height:7px}.punch-cell.on{background:#2dff8a8c;box-shadow:0 0 5px #2dff8a4d}.punch-cell.accent{background:#2dff8ae6;height:10px}.punch-cell.cur{background:#eafff2;box-shadow:0 0 9px #2dff8ae6}.scope-row{border-top:1px solid var(--line-2);background:var(--panel);-webkit-user-select:none;user-select:none;pointer-events:none;flex-shrink:0;align-items:center;padding:6px 0;display:flex}.scope-canvas{flex:1;min-width:0;height:54px;margin-right:16px}.code-note{color:var(--muted);border-top:1px solid var(--line-2);flex-shrink:0;padding:5px 12px 5px 58px;font-size:10px}.code-error{color:var(--danger);border-top:1px solid #ff5e5e4d;flex-shrink:0;padding:5px 12px 5px 58px;font-size:11px}.badge.edit-active{border-color:var(--accent);color:var(--accent);text-shadow:var(--glow)}.code-edit-btns{gap:4px;margin-left:auto;display:flex}.code-edit-open{opacity:.6;margin-left:auto;font-size:11px}.code-edit-open:hover{opacity:1}.code-edit-hint{color:var(--muted);white-space:nowrap;margin-left:8px;font-size:10px}.code-textarea{resize:none;color:var(--text);tab-size:2;caret-color:var(--accent);background:#030504;border:none;outline:none;flex:1;min-height:0;padding:10px 12px 10px 58px;font-family:inherit;font-size:13px;line-height:1.7}.code-textarea:focus{background:#020302}.params{background:var(--panel-2);flex-direction:column;display:flex;overflow:hidden}.params-body{flex:1;padding:10px 14px;overflow:auto}.params-track{color:var(--accent);text-shadow:var(--glow);border-bottom:1px solid var(--line-2);letter-spacing:.05em;margin-bottom:12px;padding-bottom:8px;font-size:12px;font-weight:700}.slider{grid-template-columns:1fr auto;align-items:center;gap:1px 8px;margin-bottom:12px;display:grid}.slider-label{color:var(--muted);align-items:center;gap:4px;font-size:11px;display:flex}.slider-val{color:var(--accent);font-variant-numeric:tabular-nums;white-space:nowrap;font-size:11px}.slider input[type=range]{grid-column:1/3;width:100%;margin:3px 0}.hint-mark{border:1px solid var(--line);cursor:help;width:13px;height:13px;color:var(--muted);background:#2dff8a0d;border-radius:50%;justify-content:center;align-items:center;font-size:9px;font-style:normal;display:inline-flex}.sequencer-wrap{background:var(--panel-3);border-top:1px solid var(--line);flex-shrink:0;max-height:36vh;overflow:auto}.sequencer{padding:8px 12px 10px}.sequencer h3{text-transform:uppercase;letter-spacing:.18em;color:var(--muted);margin-bottom:8px;font-size:10px;font-weight:600}.sequencer h3:before{content:"// ";opacity:.6}.seq-grid{flex-direction:column;gap:5px;display:flex}.seq-row{align-items:center;gap:10px;display:flex}.seq-name{width:54px;color:var(--muted);text-overflow:ellipsis;white-space:nowrap;flex-shrink:0;font-size:11px;overflow:hidden}.seq-steps{flex:1;grid-template-columns:repeat(16,minmax(16px,24px));gap:3px;display:grid}.seq-cell{aspect-ratio:1;cursor:pointer;background:#2dff8a0a;border:1px solid #2dff8a1a;border-radius:2px;min-height:16px;transition:background 70ms,border-color 70ms,box-shadow 70ms}.seq-cell:hover{background:#2dff8a1f;border-color:#2dff8a4d}.seq-cell.beat{border-color:#2dff8a38}.seq-cell.on{background:var(--on);border-color:var(--on);box-shadow:0 0 7px #2dff8a73}.seq-cell.on:hover{background:#7dffb6}.seq-cell.cur{box-shadow:inset 0 0 0 2px #eafff2,0 0 10px #2dff8ab3}.seq-cell.hit{background:#f2fff7;border-color:#fff;animation:.22s ease-out cell-hit;box-shadow:0 0 16px #2dff8af2,inset 0 0 0 2px #fff}@keyframes cell-hit{0%{filter:brightness(1.7);transform:scale(1.3)}to{filter:brightness();transform:scale(1)}}.seq-cell.acid.hit{color:#03150c}.seq-cell.acid{color:#0000;padding:0;font-family:inherit;font-size:8px;line-height:1;overflow:hidden}.seq-cell.acid.on{color:#03150c;font-weight:700}.picker{flex:1;width:100%;max-width:880px;margin:0 auto;padding:48px 28px;overflow:auto}.picker-title{color:var(--accent);text-shadow:var(--glow);letter-spacing:.04em;margin-bottom:6px;font-size:18px;font-weight:700}.picker-title:before{content:"$ ";opacity:.55}.picker-hint{color:var(--muted);font-size:12px}.picker-grid{grid-template-columns:repeat(auto-fill,minmax(185px,1fr));gap:10px;margin-top:20px;display:grid}.template-card{text-align:left;background:var(--panel-2);border:1px solid var(--line);cursor:pointer;color:var(--text);font:inherit;border-radius:6px;flex-direction:column;gap:5px;padding:14px;transition:border-color .1s,background .1s,box-shadow .1s;display:flex}.template-card:hover{background:#2dff8a0d;border-color:#2dff8a8c;box-shadow:0 0 16px #2dff8a1f}.template-card.ghost{color:var(--muted);border-style:dashed;justify-content:center;align-items:center;min-height:82px}.template-name{color:var(--accent);text-shadow:var(--glow);font-size:14px;font-weight:700}.template-meta{color:var(--muted);font-size:11px}.template-kinds{color:var(--syn-var);font-size:11px}.code-popover{background:var(--panel-3);z-index:200;border:1px solid #2dff8a66;border-radius:5px;min-width:220px;max-width:280px;padding:10px 12px;position:fixed;box-shadow:0 6px 24px #000000b3,0 0 18px #2dff8a1f}.popover-label{color:var(--accent);text-transform:uppercase;letter-spacing:.14em;margin-bottom:10px;font-size:10px;font-weight:600}.note-picker{flex-direction:column;gap:8px;display:flex}.note-select{background:var(--panel-2);color:var(--text);border:1px solid var(--line);font:inherit;cursor:pointer;border-radius:3px;outline:none;padding:4px 6px;font-size:12px}.note-select:focus{border-color:var(--accent)}.picker-check{color:var(--text);cursor:pointer;align-items:center;gap:6px;font-size:12px;display:flex}.picker-check input{accent-color:var(--accent);cursor:pointer}.default-note{flex-direction:column;gap:4px;margin-bottom:12px;display:flex}.notice{background:var(--panel-3);border:1px solid var(--line);z-index:100;border-radius:4px;padding:7px 18px;font-size:12px;position:fixed;bottom:28px;left:50%;transform:translate(-50%);box-shadow:0 4px 16px #0009}.notice.error{border-color:var(--danger);color:#ffd7d7}.notice.success{border-color:var(--on);color:#d6ffe9;box-shadow:0 0 14px #2dff8a33}.statusbar{border-top:1px solid var(--line);height:22px;color:var(--muted);-webkit-user-select:none;user-select:none;background:#07140c;flex-shrink:0;align-items:center;font-size:11px;display:flex;overflow:hidden}.statusbar-item{white-space:nowrap;cursor:default;align-items:center;gap:5px;height:100%;padding:0 10px;transition:background .1s;display:flex}.statusbar-item:hover{color:var(--text);background:#2dff8a0f}.statusbar-sep{flex:1}.statusbar-dot{border-radius:50%;flex-shrink:0;width:6px;height:6px;box-shadow:0 0 6px #2dff8a99}.hint{color:var(--muted);padding:14px;font-size:12px}::-webkit-scrollbar{width:7px;height:7px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:#2dff8a1f;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#2dff8a40}@media (width<=860px){.workspace{grid-template-columns:1fr}}