:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;--bg:var(--lightningcss-light,#eceef1)var(--lightningcss-dark,#0e0e10);--surface:var(--lightningcss-light,#fff)var(--lightningcss-dark,#15151a);--surface-2:var(--lightningcss-light,#f4f5f7)var(--lightningcss-dark,#1a1a1f);--surface-3:var(--lightningcss-light,#fff)var(--lightningcss-dark,#1e1e25);--hover:var(--lightningcss-light,#e6e8ec)var(--lightningcss-dark,#25252b);--border:var(--lightningcss-light,#d6d8de)var(--lightningcss-dark,#2a2a30);--border-subtle:var(--lightningcss-light,#e4e6ea)var(--lightningcss-dark,#1a1a24);--border-strong:var(--lightningcss-light,#b8bcc6)var(--lightningcss-dark,#3a3a45);--text:var(--lightningcss-light,#1a1a1f)var(--lightningcss-dark,#e6e6e6);--text-2:var(--lightningcss-light,#3a3a45)var(--lightningcss-dark,#ccc);--text-dim:var(--lightningcss-light,#6a6a72)var(--lightningcss-dark,#888);--text-faint:var(--lightningcss-light,#9a9aa2)var(--lightningcss-dark,#666);--text-label:var(--lightningcss-light,#8a8a92)var(--lightningcss-dark,#6a6a72);--playhead:var(--lightningcss-light,#1e1e2d99)var(--lightningcss-dark,#ffffffb3);--playhead-glow:var(--lightningcss-light,#1e1e2d4d)var(--lightningcss-dark,#ffffff80);background:var(--bg);color:var(--text);--c-piano:#3b82f6;--c-bass:#f59e0b;--c-pad:#14b8a6;--c-pluck:#ec4899;--c-kick:#ef4444;--c-snare:#f97316;--c-hat-closed:#06b6d4;--c-hat-open:#22d3ee;--c-clap:#eab308;--dur-fast:80ms;--dur-mid:.18s;--dur-slow:.35s;--ease-out:cubic-bezier(.2, 0, 0, 1);--ease-spring:cubic-bezier(.34, 1.56, .64, 1);font:15px/1.5 system-ui,-apple-system,sans-serif}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial}}:root[data-theme=light]{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}:root[data-theme=dark]{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}body{place-items:center;min-height:100vh;margin:0;padding:2rem 1rem 4.5rem;display:grid}#app{text-align:center;z-index:1;width:100%;max-width:760px;position:relative}#ambient{z-index:0;pointer-events:none;opacity:0;animation:amb-breath calc(var(--amb-beat-dur,.5s) * 2) ease-in-out infinite alternate;position:fixed;inset:0;overflow:hidden}@keyframes amb-breath{0%{opacity:.02}to{opacity:.06}}#ambient:before,#ambient:after{content:"";background:hsl(var(--amb-hue,200) 65% 52%);width:420px;height:420px;filter:blur(calc(90px + var(--amb-bloom,0px)));opacity:calc(.45 + var(--amb-energy,0) * .4);transform:scale(calc(1 + var(--amb-energy,0) * .4));border-radius:50%;transition:opacity .18s,transform .18s;position:absolute;top:28%}#ambient:before{left:-180px}#ambient:after{right:-180px}.eq-viz{background:var(--surface-2);border-top:1px solid var(--border-subtle);opacity:.85;border-radius:4px;width:72px;height:22px;display:block}header{z-index:50;background:var(--bg);border-bottom:1px solid var(--border-subtle);flex-wrap:wrap;justify-content:flex-start;align-items:center;gap:.75rem;margin-bottom:1rem;padding-block:.5rem;display:flex;position:sticky;top:0}h1{letter-spacing:.02em;flex:none;margin:0;font-size:1.4rem;font-weight:600}.header-transport,.track-actions{align-items:center;gap:.4rem;display:inline-flex}.track-actions[hidden]{display:none}.header-right{align-items:center;gap:.6rem;margin-left:auto;display:inline-flex}#track-delete{background:var(--surface-2);width:2rem;height:2rem;color:var(--text-dim);border:1px solid var(--border);cursor:pointer;border-radius:6px;justify-content:center;align-items:center;padding:0;transition:color .12s,border-color .12s,background .12s;display:inline-flex}#track-delete:hover{color:#e06060;background:var(--hover);border-color:#e06060}#track-delete[hidden]{display:none}#track-delete svg{display:block}#theme-toggle{font:inherit;background:var(--surface-2);color:var(--text-dim);border:1px solid var(--border);cursor:pointer;border-radius:6px;justify-content:center;align-items:center;width:1.9rem;height:1.9rem;padding:0;font-size:.95rem;display:inline-flex}#theme-toggle:hover{color:var(--text);background:var(--hover)}.key-controls{align-items:center;gap:.4rem;display:flex}.key-field,.loop-length-field{background:var(--surface-2);border:1px solid var(--border);border-radius:6px;align-items:center;gap:.35rem;padding:.2rem .5rem;display:inline-flex}.loop-length-field select,.key-field select{font:inherit;color:var(--text);cursor:pointer;background:0 0;border:0;padding:.1rem .2rem;font-size:.85rem}.key-field select:focus{outline:1px solid var(--border-strong);outline-offset:1px;border-radius:3px}.save-pill{color:#4d8;border-radius:50%;justify-content:center;align-items:center;width:1.2rem;height:1.2rem;font-size:.6rem;transition:color .2s;display:inline-flex}.save-pill[data-state=saving]{color:var(--c-bass);animation:save-pulse var(--dur-slow,.35s) ease-in-out infinite}.save-pill[data-state=saved]{animation:save-check var(--dur-mid,.18s) var(--ease-spring)}@keyframes save-pulse{0%,to{opacity:1}50%{opacity:.45}}@keyframes save-check{0%{transform:scale(1.18)}to{transform:scale(1)}}.selection-pill{--pill-color:#555;background:var(--surface);border:1px solid var(--border);height:1.7rem;color:var(--text-2);white-space:nowrap;transition:border-color var(--dur-mid,.18s) var(--ease-out), background var(--dur-mid,.18s) var(--ease-out), box-shadow var(--dur-mid,.18s) var(--ease-spring);border-radius:999px;align-items:center;gap:.4rem;padding:0 .55rem;font-size:.72rem;display:inline-flex}.selection-pill[data-state=selected]{box-shadow:0 0 0 3px color-mix(in srgb, var(--pill-color) 18%, transparent)}.selection-pill[data-state=empty]{color:var(--text-faint);border-style:dashed}.selection-pill[data-state=selected]{background:color-mix(in srgb, var(--pill-color) 12%, var(--surface));border-color:color-mix(in srgb, var(--pill-color) 55%, var(--border));color:var(--text)}.selection-pill__prefix{letter-spacing:.08em;text-transform:uppercase;color:var(--text-faint);font-size:.6rem}.selection-pill[data-state=selected] .selection-pill__prefix{color:var(--text-dim)}.selection-pill__dot{background:var(--pill-color);border-radius:50%;flex-shrink:0;width:.55rem;height:.55rem}.selection-pill[data-state=empty] .selection-pill__dot{background:0 0;border:1px dashed #555}.selection-pill__label{font-weight:500}.selection-pill__clear{font:inherit;color:inherit;cursor:pointer;opacity:.6;background:0 0;border:none;margin-left:.1rem;padding:0 .15rem;font-size:.95rem;line-height:1;transition:opacity .15s}.selection-pill__clear:hover{opacity:1}#help-btn{font:inherit;background:var(--surface-2);color:var(--text-dim);border:1px solid var(--border);cursor:pointer;border-radius:6px;justify-content:center;align-items:center;width:1.9rem;height:1.9rem;padding:0;display:inline-flex}#help-btn:hover{color:var(--text);background:var(--hover)}.meta{color:var(--text-dim);flex-wrap:wrap;justify-content:center;align-items:center;gap:.5rem;margin:.5rem 0 1rem;font-size:.85rem;display:flex}.meta strong{color:var(--text);min-width:1em;font-weight:600;display:inline-block}.sep{opacity:.4}.hint{color:var(--text-dim);margin:0 0 1rem;font-size:.85rem;transition:opacity .3s}.hint.hidden{opacity:0;pointer-events:none}kbd{background:var(--surface-2);border:1px solid var(--border);color:var(--text-2);border-bottom-width:2px;border-radius:4px;margin:0 1px;padding:2px 6px;font:.8em/1 ui-monospace,monospace;display:inline-block}button.ghost{color:var(--text-dim);cursor:pointer;font:inherit;background:0 0;border:0;padding:0}button.ghost:hover{color:var(--text)}.transport-btn{font:inherit;background:var(--surface-2);color:var(--text-2);border:1px solid var(--border);cursor:pointer;border-radius:6px;min-width:2.4rem;padding:.4rem .8rem;transition:background .1s,border-color .1s,color .1s}.transport-btn:hover{background:var(--hover)}.transport-btn:disabled{opacity:.35;cursor:default}.transport-btn:disabled:hover{background:var(--surface-2)}.transport-btn.playing{background:var(--c-piano);border-color:var(--c-piano);color:#fff}.transport-btn.rec{color:#c44}.transport-btn.rec.recording{color:#fff;background:#c44;border-color:#c44;animation:1s ease-in-out infinite pulse}@keyframes pulse{50%{opacity:.6}}.rec-indicator{color:#fff;letter-spacing:.1em;background:#c44;border-radius:999px;align-items:center;gap:.35rem;padding:.25rem .55rem;font-family:ui-monospace,monospace;font-size:.72rem;font-weight:700;animation:1s ease-in-out infinite pulse;display:inline-flex}.rec-indicator[hidden]{display:none}.rec-indicator__dot{background:#fff;border-radius:50%;width:.5rem;height:.5rem}.bpm-wrap{background:var(--surface-2);border:1px solid var(--border);border-radius:6px;align-items:center;gap:.5rem;padding:.2rem .6rem;display:flex}.bpm-wrap .small,.small{color:var(--text-dim);white-space:nowrap;font-size:.8rem}.bpm-wrap strong{color:var(--text)}input[type=range]{width:100px;accent-color:var(--c-piano)}.project-block{margin-bottom:1rem}#project-controls{flex-wrap:wrap;align-items:center;gap:.6rem;display:flex}#pattern-area{flex-direction:column;gap:.5rem;margin-bottom:1rem;display:flex}.section-head{justify-content:space-between;align-items:center;gap:.5rem;display:flex}.section-label{color:var(--text-label);text-transform:uppercase;letter-spacing:.12em;-webkit-user-select:none;user-select:none;text-align:left;margin:0;font-family:ui-monospace,monospace;font-size:.68rem;font-weight:500}.pattern-clear-all{font:inherit;text-transform:uppercase;letter-spacing:.08em;color:var(--text-dim);border:1px solid var(--border);cursor:pointer;background:0 0;border-radius:5px;padding:.2rem .55rem;font-family:ui-monospace,monospace;font-size:.66rem;transition:color .12s,border-color .12s,background .12s}.pattern-clear-all:hover{color:#e06060;border-color:#e06060}#lane-stack{--rail-width:224px;background:var(--bg);border:1px solid var(--border-subtle);border-radius:6px;position:relative;overflow:hidden}.lane-stack__rows{background:var(--bg);flex-direction:column;gap:1px;display:flex}.lane-stack__footer{border-top:1px solid var(--border-subtle);background:var(--surface);z-index:1;justify-content:flex-start;padding:.45rem .6rem;display:flex;position:relative}.lane-stack__playhead{top:0;bottom:0;left:var(--rail-width,224px);background:var(--playhead);width:2px;box-shadow:0 0 8px var(--playhead-glow);pointer-events:none;will-change:transform;z-index:30;position:absolute}.lane-group{text-transform:uppercase;letter-spacing:.14em;color:var(--text-label);background:var(--surface);padding:.3rem .6rem .25rem;font-family:ui-monospace,monospace;font-size:.6rem;font-weight:600}.lane{grid-template-columns:var(--rail-width,224px) 1fr;background:var(--surface);min-height:30px;display:grid}.lane__rail{border-left:4px solid var(--lane-color,var(--border));background:var(--surface-2);cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;gap:.35rem;padding:0 .45rem;transition:background .1s;display:flex}.lane__rail:hover{background:var(--hover)}.lane[data-current=true] .lane__rail{background:color-mix(in srgb, var(--lane-color,var(--border)) 14%, var(--surface-2))}.lane[data-isolated=true] .lane__rail{box-shadow:inset 0 0 0 1px #d6b440}.lane__name{min-width:0;color:var(--lane-color,var(--text-2));letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;text-overflow:ellipsis;text-align:left;flex:1;font-family:ui-monospace,monospace;font-size:.72rem;overflow:hidden}.lane__keyhint{background:var(--bg);color:var(--text-faint);border-radius:3px;flex-shrink:0;padding:1px 4px;font-family:ui-monospace,monospace;font-size:.58rem}.lane__steps{grid-template-columns:repeat(var(--num-beats,16), 1fr);background:var(--surface);gap:2px;min-width:0;padding:2px 3px;display:grid;position:relative}.cell{font:inherit;appearance:none;border:1px solid var(--border);background:var(--surface-2);cursor:pointer;color:#0000;letter-spacing:-.02em;-webkit-user-select:none;user-select:none;border-radius:3px;justify-content:center;align-items:center;height:26px;min-height:26px;padding:0;font-family:ui-monospace,monospace;font-size:.6rem;transition:background 80ms,border-color 80ms,box-shadow 80ms;display:flex;overflow:hidden}.cell:hover:not(:disabled){background:var(--hover);border-color:var(--border-strong)}.cell--beat-start{background:var(--hover);border-color:var(--border)}.cell--drum.cell--on{background:var(--cell-color,#888);border-color:var(--cell-color,#888);box-shadow:0 0 8px color-mix(in srgb, var(--cell-color,#888) 50%, transparent)}.cell--pitched.cell--on{background:color-mix(in srgb, var(--cell-color,var(--c-piano)) 70%, var(--surface));border-color:var(--cell-color,var(--c-piano));color:#fff;box-shadow:0 0 6px color-mix(in srgb, var(--cell-color,var(--c-piano)) 40%, transparent);font-weight:600}.cell--cont{background:color-mix(in srgb, var(--cell-color,var(--c-piano)) 45%, var(--surface));border-color:var(--cell-color,var(--c-piano));color:#fff6;border-left-width:0;border-top-left-radius:0;border-bottom-left-radius:0;font-size:.5rem}.cell--echo{cursor:not-allowed;pointer-events:none;opacity:.55;background-image:repeating-linear-gradient(45deg,#0000 0 4px,#8c8cb41f 4px 8px)}.cell--echo.cell--on{opacity:.5}@keyframes cell-trigger{0%{box-shadow:0 0 0 0 color-mix(in srgb, var(--cell-color,var(--lane-color,#888)) 0%, transparent);transform:scale(1)}35%{box-shadow:0 0 8px 2px color-mix(in srgb, var(--cell-color,var(--lane-color,#888)) 55%, transparent);transform:scale(1.08)}to{box-shadow:0 0 0 0 color-mix(in srgb, var(--cell-color,var(--lane-color,#888)) 0%, transparent);transform:scale(1)}}.cell.playing{outline:1px solid var(--playhead);outline-offset:-1px;animation:cell-trigger 85ms var(--ease-out) forwards}.lane-edit-zone{pointer-events:none;border:1px dashed color-mix(in srgb, var(--lane-color,#d6b440) 75%, transparent);box-shadow:0 0 0 1px color-mix(in srgb, var(--lane-color,#d6b440) 16%, transparent);z-index:3;border-radius:3px;position:absolute;top:0;bottom:0}.lane__steps--roll{padding:0;display:block}.lane-roll{background:var(--surface);cursor:crosshair;height:192px;position:relative;overflow:hidden}.lane-roll__bg{pointer-events:none;background-image:linear-gradient(to bottom, var(--border-subtle) 1px, transparent 1px), linear-gradient(to right, var(--border) 1px, transparent 1px), linear-gradient(to right, var(--border-strong) 1px, transparent 1px);background-size:100% 4px, calc(100% / var(--num-beats,16)) 100%, calc(100% / 4) 100%;background-position:0 0,-1px 0,-1px 0;position:absolute;inset:0}.lane-roll__bg:after{content:"";background-image:repeating-linear-gradient(to bottom, var(--border-subtle) 0, var(--border-subtle) 3px, transparent 3px, transparent calc(4px * 12));opacity:.6;background-position:0 -3px;position:absolute;inset:0}.lane-roll__notes{position:absolute;inset:0}.roll-note{background:var(--note-color,var(--c-piano));cursor:pointer;pointer-events:auto;border-radius:2px;transition:filter .1s;position:absolute}.roll-note:hover{filter:brightness(1.3)}.roll-note[data-echo=true]{opacity:.5;border:1px dashed var(--note-color,#888);background:0 0}.add-track-wrap{position:relative}.add-track-btn{font:inherit;color:var(--text-dim);border:1px dashed var(--border);cursor:pointer;background:0 0;border-radius:6px;padding:.35rem .7rem;font-size:.75rem;line-height:1;transition:color .12s,border-color .12s,background .12s}.add-track-btn:hover{color:var(--text-2);border-color:var(--border-strong);background:var(--surface-2)}.add-track-menu{background:var(--surface-3);border:1px solid var(--border);z-index:100;border-radius:6px;min-width:140px;padding:.25rem;display:none;position:absolute;bottom:calc(100% + 4px);left:0;box-shadow:0 4px 16px #00000080}.add-track-menu.open{flex-direction:column;gap:2px;display:flex}.add-track-menu button{font:inherit;color:var(--text-2);text-align:left;cursor:pointer;background:0 0;border:0;border-radius:4px;padding:.35rem .6rem;font-size:.8rem;transition:background 80ms}.add-track-menu button:hover{background:var(--hover);color:var(--text)}.scaffold-group.applies .scaffold-group-label{border-left-color:var(--group-color,#888);opacity:1}.scaffold-group.applies .scaffold-buttons{opacity:1}.scaffold-group.inactive{opacity:.45}.scaffold-group.inactive .scaffold-btn{pointer-events:auto}#scaffolds{background:var(--surface);border:1px solid var(--border);text-align:left;border-radius:6px;margin-bottom:1rem;padding:.5rem .85rem .85rem}#scaffolds>summary{text-transform:uppercase;letter-spacing:.12em;color:var(--text-label);cursor:pointer;-webkit-user-select:none;user-select:none;padding:.25rem 0;font-family:ui-monospace,monospace;font-size:.68rem;font-weight:500;list-style:none}#scaffolds>summary::-webkit-details-marker{display:none}#scaffolds>summary:before{content:"▸";color:var(--text-faint);margin-right:.4rem;transition:transform .15s;display:inline-block}#scaffolds[open]>summary:before{transform:rotate(90deg)}#scaffolds-grid{flex-direction:column;gap:.5rem;margin-top:.5rem;display:flex}.scaffold-group{grid-template-columns:90px 1fr;align-items:start;gap:.6rem;display:grid}.scaffold-group-label{color:var(--group-color,#888);text-transform:uppercase;letter-spacing:.05em;text-align:right;-webkit-user-select:none;user-select:none;border-left:3px solid var(--group-color,transparent);padding-top:.35rem;padding-left:.5rem;font-size:.75rem}.scaffold-group[data-group=kick]{--group-color:var(--c-kick)}.scaffold-group[data-group=snare]{--group-color:var(--c-snare)}.scaffold-group[data-group=hatClosed]{--group-color:var(--c-hat-closed)}.scaffold-group[data-group=hatOpen]{--group-color:var(--c-hat-open)}.scaffold-group[data-group=clap]{--group-color:var(--c-clap)}.scaffold-group[data-group=bass]{--group-color:var(--c-bass)}.scaffold-group[data-group=pad]{--group-color:var(--c-pad)}.scaffold-buttons{flex-wrap:wrap;gap:.35rem;display:flex}.scaffold-btn{font:inherit;background:var(--surface-2);color:var(--text-2);border:1px solid var(--border);cursor:pointer;border-radius:5px;padding:.3rem .6rem;font-size:.8rem;transition:background .1s,border-color .1s,color .1s}.scaffold-btn:hover{background:var(--hover);border-color:var(--border-strong);color:var(--text)}.scaffold-btn.active{background:color-mix(in srgb, var(--group-color,var(--c-piano)) 18%, transparent);border-color:var(--group-color,var(--c-piano));color:var(--text)}#sound{background:var(--surface);border:1px solid var(--border);text-align:left;border-radius:6px;margin-bottom:1rem;padding:.5rem .85rem .85rem}#sound>summary{text-transform:uppercase;letter-spacing:.12em;color:var(--text-label);cursor:pointer;-webkit-user-select:none;user-select:none;padding:.25rem 0;font-family:ui-monospace,monospace;font-size:.68rem;font-weight:500;list-style:none}#sound>summary::-webkit-details-marker{display:none}#sound>summary:before{content:"▸";color:var(--text-faint);margin-right:.4rem;transition:transform .15s;display:inline-block}#sound[open]>summary:before{transform:rotate(90deg)}#sound-label{color:var(--text);text-transform:none;letter-spacing:0}#sound-body{--accent:var(--c-piano);flex-direction:column;gap:.7rem;max-width:480px;margin-top:.6rem;display:flex}.sound-empty{color:var(--text-faint);margin:.3rem 0;font-size:.8rem}.sound-block{grid-template-columns:5.5rem 1fr;align-items:center;gap:.3rem .6rem;display:grid}.sound-block__title{text-transform:uppercase;letter-spacing:.06em;color:var(--text-dim);grid-column:1;align-self:start;padding-top:.2rem;font-family:ui-monospace,monospace;font-size:.68rem}.sound-block>:not(.sound-block__title){grid-column:2}.seg{background:var(--bg);border:1px solid var(--border);border-radius:6px;gap:2px;width:fit-content;padding:2px;display:inline-flex}.seg__btn{font:inherit;color:var(--text-dim);cursor:pointer;background:0 0;border:0;border-radius:4px;padding:.2rem .6rem;font-family:ui-monospace,monospace;font-size:.72rem;transition:background .1s,color .1s}.seg__btn:hover{color:var(--text-2)}.seg__btn[data-active=true]{background:color-mix(in srgb, var(--accent) 28%, var(--surface-2));color:#fff}.sound-toolbar{grid-column:1/-1;justify-content:flex-end;display:flex}.sound-reset{font:inherit;color:var(--text-dim);border:1px solid var(--border);cursor:pointer;background:0 0;border-radius:5px;padding:.2rem .55rem;font-family:ui-monospace,monospace;font-size:.7rem;transition:color .12s,border-color .12s,background .12s}.sound-reset:hover{color:var(--text);border-color:var(--accent);background:color-mix(in srgb, var(--accent) 14%, var(--surface-2))}.wave-chips{grid-template-columns:repeat(4,1fr);gap:6px;display:grid}.wave-chip{background:var(--bg);border:1px solid var(--border);cursor:pointer;border-radius:6px;flex-direction:column;align-items:center;gap:3px;padding:6px 4px 4px;transition:border-color .1s,background .1s;display:flex}.wave-chip:hover{border-color:var(--border-strong)}.wave-chip[data-active=true]{border-color:var(--accent);background:color-mix(in srgb, var(--accent) 16%, var(--bg))}.wave-chip__scope{width:100%;height:22px;display:block}.wave-chip__path{stroke:var(--text-faint);stroke-width:1.6px;stroke-linejoin:round;stroke-linecap:round}.wave-chip[data-active=true] .wave-chip__path{stroke:var(--accent);filter:drop-shadow(0 0 3px color-mix(in srgb, var(--accent) 70%, transparent))}.wave-chip__label{color:var(--text-dim);text-transform:uppercase;letter-spacing:.04em;font-family:ui-monospace,monospace;font-size:.6rem}.wave-chip[data-active=true] .wave-chip__label{color:var(--text-2)}.filter-graph,.adsr-graph{background:var(--bg);border:1px solid var(--border);touch-action:none;cursor:crosshair;border-radius:6px;width:100%;height:auto;display:block}.filter-graph{aspect-ratio:300/96}.adsr-graph{aspect-ratio:300/96;margin-top:2px}.filter-graph__line,.adsr-graph__line{stroke:var(--accent);stroke-width:2px;stroke-linejoin:round;stroke-linecap:round}.filter-graph__area,.adsr-graph__area{fill:color-mix(in srgb, var(--accent) 16%, transparent);stroke:none}.filter-graph__handle,.adsr-graph__handle{fill:var(--accent);stroke:var(--bg);stroke-width:2px;cursor:grab}.filter-graph__handle{cursor:move}.filter-graph__handle:hover,.adsr-graph__handle:hover{filter:drop-shadow(0 0 4px color-mix(in srgb, var(--accent) 80%, transparent))}.sound-readout{color:var(--text-2);font-variant-numeric:tabular-nums;margin-top:3px;font-family:ui-monospace,monospace;font-size:.68rem}.sound-hint{color:var(--text-dim);text-transform:uppercase;letter-spacing:.06em;margin:0;font-family:ui-monospace,monospace;font-size:.7rem}.sound-cards{grid-template-columns:repeat(auto-fill,minmax(66px,1fr));gap:6px;display:grid}.sound-card{font:inherit;background:var(--surface-2);border:1px solid var(--border);cursor:pointer;border-radius:8px;flex-direction:column;align-items:center;gap:3px;padding:.5rem .25rem;transition:border-color .1s,background .1s,transform 50ms;display:flex}.sound-card:hover{border-color:var(--border-strong);background:var(--hover)}.sound-card:active{transform:translateY(1px)}.sound-card[data-active=true]{border-color:var(--accent);background:color-mix(in srgb, var(--accent) 16%, var(--surface-2))}.sound-card__emoji{font-size:1.35rem;line-height:1}.sound-card__label{text-transform:uppercase;letter-spacing:.04em;color:var(--text-2);font-family:ui-monospace,monospace;font-size:.62rem}.vibes-block{margin-bottom:1rem}.vibes-grid{flex-wrap:wrap;gap:8px;display:flex}.vibe-card{font:inherit;background:var(--surface-2);border:1px solid var(--border);cursor:pointer;border-radius:999px;align-items:center;gap:.45rem;padding:.5rem .9rem;transition:border-color .1s,background .1s,transform 50ms;display:flex}.vibe-card:hover{border-color:var(--border-strong);background:var(--hover)}.vibe-card:active{transform:translateY(1px)}.vibe-card__emoji{font-size:1.15rem;line-height:1}.vibe-card__label{color:var(--text);font-family:ui-monospace,monospace;font-size:.8rem;font-weight:600}.macro{grid-template-columns:3.4rem 1.1rem 1fr 1.1rem;align-items:center;gap:.5rem;display:grid}.macro__label{text-transform:uppercase;letter-spacing:.05em;color:var(--text-dim);font-family:ui-monospace,monospace;font-size:.72rem}.macro__emoji{text-align:center;font-size:.95rem}.macro__range{width:100%;accent-color:var(--accent)}.play-sound{border-top:1px solid var(--border-subtle);flex-direction:column;gap:.4rem;max-width:480px;margin:.7rem auto 0;padding-top:.6rem;display:flex}.play-sound:empty{display:none}.play-sound__reset{align-self:flex-end;margin-top:.1rem}.jam-dock{z-index:60;background:var(--surface);border-top:1px solid var(--border);position:fixed;bottom:0;left:0;right:0;box-shadow:0 -6px 24px #00000047;container-type:inline-size}.jam-dock[hidden]{display:none}.jam-dock__handle-row{align-items:stretch;gap:0;display:flex}.jam-dock__handle-row .jam-dock__handle{flex:1 1 0;min-width:0}.jam-dock__handle{font:inherit;cursor:pointer;width:100%;color:var(--text-label);text-transform:uppercase;letter-spacing:.12em;-webkit-user-select:none;user-select:none;background:0 0;border:0;align-items:center;gap:.5rem;padding:.75rem .85rem .5rem;font-family:ui-monospace,monospace;font-size:.68rem;transition:background .12s;display:flex;position:relative}.jam-dock__handle:hover{background:var(--hover)}.jam-dock__grip{background:var(--border-strong,var(--border));border-radius:2px;width:40px;height:4px;position:absolute;top:5px;left:50%;transform:translate(-50%)}.jam-dock__chevron{color:var(--text-faint);transition:transform .15s}.jam-dock__title,#live-play-label{color:var(--text)}.jam-dock__meta{text-transform:none;letter-spacing:0;color:var(--text-dim);white-space:nowrap;margin-left:auto;font-size:.72rem}.jam-dock__meta strong{color:var(--text)}.jam-dock__body{grid-template-columns:1fr;grid-template-areas:"assist""stage""rail";gap:0;max-width:760px;margin:0 auto;padding:0 .85rem .85rem;display:none}.jam-dock[data-open=true] .jam-dock__body{display:grid}.jam-dock[data-open=true] .jam-dock__chevron{transform:rotate(180deg)}.jam-dock:not([data-assist=true]) .jam-assist{display:none}.jam-dock__assist-toggle{font:inherit;border:1px solid var(--border);color:var(--text-dim);cursor:pointer;-webkit-user-select:none;user-select:none;background:0 0;border-radius:5px;flex-shrink:0;padding:.15rem .45rem;font-family:ui-monospace,monospace;font-size:.65rem;transition:background .1s,border-color .1s,color .1s}.jam-dock__assist-toggle:hover{background:var(--hover);color:var(--text);border-color:var(--text-faint)}.jam-dock__assist-toggle[aria-pressed=true]{background:color-mix(in srgb, var(--accent,#7c6cfc) 18%, transparent);border-color:var(--accent,#7c6cfc);color:var(--text)}.tinker-drawer{border-top:1px solid var(--border);margin-top:1rem;padding-top:.5rem}.tinker-drawer__summary{font:inherit;text-transform:uppercase;letter-spacing:.08em;color:var(--text-label);cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;gap:.5em;padding:.35rem 0;font-family:ui-monospace,monospace;font-size:.72rem;list-style:none;display:flex}.tinker-drawer__summary::-webkit-details-marker{display:none}.tinker-drawer__summary:before{content:"▸";color:var(--text-faint);transition:transform .15s}.tinker-drawer[open] .tinker-drawer__summary:before{content:"▾"}.tinker-drawer__summary span{color:var(--text);text-transform:none;letter-spacing:0}.tinker-drawer__body{padding-top:.75rem}.jam-assist{grid-area:assist}.jam-stage{grid-area:stage}.jam-rail{grid-area:rail}@container (width>=720px){.jam-dock__body{grid-template-columns:1fr 280px;grid-template-areas:"assist rail""stage rail";align-items:start;gap:0 1.25rem;max-width:1040px}.jam-rail{position:relative}.tinker-drawer[open] .tinker-drawer__body{background:var(--surface);border:1px solid var(--border);z-index:10;border-radius:6px;min-width:480px;padding:.75rem;position:absolute;top:0;right:0;box-shadow:0 4px 20px -4px #00000059}}.jam-dock .key:not(.sharp){height:120px}.jam-dock .key.sharp{height:74px}.jam-dock .bass-key{height:96px}.jam-dock .strip-cell{height:64px}.jam-dock #pad-grid{max-width:380px}.jam-dock .pad .note{font-size:1.2rem}.jam-dock .surface-hint{margin-top:.5rem}#performance .surface{display:none}#app[data-surface=piano] .surface[data-surface=piano],#app[data-surface=bass] .surface[data-surface=bass],#app[data-surface=pad] .surface[data-surface=pad],#app[data-surface=pluck] .surface[data-surface=pluck],#app[data-surface=drums] .surface[data-surface=drums]{display:block}@keyframes sustain-breathe{0%,to{box-shadow:0 4px 14px -9px var(--sustain-glow,transparent)}50%{box-shadow:0 9px 26px -6px var(--sustain-glow,transparent)}}#app[data-sustain=on] #performance .surface{animation:2.4s ease-in-out infinite sustain-breathe}#app[data-sustain=on] .surface[data-surface=piano]{--sustain-glow:color-mix(in srgb, var(--c-piano) 60%, transparent)}#app[data-sustain=on] .surface[data-surface=bass]{--sustain-glow:color-mix(in srgb, var(--c-bass) 60%, transparent)}#app[data-sustain=on] .surface[data-surface=pad]{--sustain-glow:color-mix(in srgb, var(--c-pad) 60%, transparent)}#app[data-sustain=on] .surface[data-surface=pluck]{--sustain-glow:color-mix(in srgb, var(--c-pluck) 60%, transparent)}.surface-hint{color:var(--text-faint);margin:.75rem 0 0;font-size:.75rem}.jam-dock[data-kind=drum] .jam-assist,.jam-dock[data-kind=drum] #jam-options,.jam-dock[data-kind=drum] #chord-strip,.jam-dock[data-kind=drum] .chord-hint,.jam-dock[data-kind=drum] #phrase-strip,.jam-dock[data-kind=drum] .tinker-drawer,.jam-dock[data-kind=drum] .jam-dock__assist-toggle{display:none}.drum-pads{grid-template-columns:repeat(auto-fit,minmax(94px,1fr));gap:8px;max-width:600px;margin:0 auto;display:grid}.drum-pad{font:inherit;color:#cfcfd6;cursor:pointer;-webkit-user-select:none;user-select:none;background:linear-gradient(#1f1f26 0%,#15151a 100%);border:1px solid #2a2a30;border-radius:10px;flex-direction:column;justify-content:center;align-items:center;gap:.35rem;min-height:108px;padding:.8rem .4rem;transition:background 80ms,transform 50ms,box-shadow 80ms,border-color 80ms;display:flex;position:relative}.drum-pad:hover{background:linear-gradient(#25252e 0%,#1a1a22 100%);border-color:#3a3a45}.drum-pad[data-current=true]{border-color:color-mix(in srgb, var(--accent) 55%, #2a2a30)}.drum-pad.active{background:linear-gradient(180deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 40%, #111) 100%);border-color:var(--accent);color:#fff;box-shadow:0 0 18px color-mix(in srgb, var(--accent) 55%, transparent);transform:translateY(1px)}.drum-glyph{width:42px;height:42px;color:var(--accent);fill:none;stroke:currentColor;stroke-width:2px;stroke-linecap:round;stroke-linejoin:round}.drum-glyph .fill{fill:currentColor;stroke:none}.drum-pad.active .drum-glyph{color:#fff}.drum-pad__name{font-family:ui-monospace,monospace;font-size:.9rem;font-weight:600}.drum-pad__key{color:#cfcfd6;background:#00000073;border-radius:3px;padding:0 4px;font-family:ui-monospace,monospace;font-size:.58rem;position:absolute;top:5px;right:6px}.drum-pad.active .drum-pad__key{color:#fff}.chord-strip{grid-template-columns:repeat(7,1fr);gap:6px;max-width:640px;margin:0 auto .85rem;display:grid}.chord-strip:empty{display:none}.chord-pad{font:inherit;color:#ccc;cursor:pointer;-webkit-user-select:none;user-select:none;background:linear-gradient(#1f1f26 0%,#15151a 100%);border:1px solid #2a2a30;border-radius:8px;flex-direction:column;justify-content:center;align-items:center;gap:.15rem;min-height:58px;padding:.5rem .25rem;transition:background 80ms,transform 50ms,box-shadow 80ms,border-color 80ms;display:flex;position:relative}.chord-pad:hover{background:linear-gradient(#25252e 0%,#1a1a22 100%);border-color:#3a3a45}.chord-pad[data-tonic=true]{border-color:color-mix(in srgb, var(--accent) 55%, #2a2a30)}.chord-pad.active{background:linear-gradient(180deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 45%, #111) 100%);border-color:var(--accent);color:#fff;box-shadow:0 0 16px color-mix(in srgb, var(--accent) 50%, transparent);transform:translateY(1px)}.chord-pad__roman{color:#8a8a93;letter-spacing:.04em;font-family:ui-monospace,monospace;font-size:.72rem}.chord-pad.active .chord-pad__roman{color:#ffffffd9}.chord-pad__name{font-family:ui-monospace,monospace;font-size:1.15rem;font-weight:600}.chord-wrap{max-width:640px;margin:0 auto;position:relative}.chord-hint{background:var(--surface);border:1px solid var(--border);white-space:nowrap;pointer-events:none;opacity:0;z-index:10;border-radius:6px;padding:.3rem .65rem;font-size:.75rem;transition:opacity .15s;position:absolute;bottom:calc(100% + 6px);left:50%;transform:translate(-50%)}.chord-wrap:hover .chord-hint,.chord-wrap:focus-within .chord-hint{opacity:1}.chord-pad__key,.phrase-pad__key{color:#fff;opacity:0;pointer-events:none;background:#00000080;border-radius:3px;padding:0 4px;font-family:ui-monospace,monospace;font-size:.58rem;transition:opacity .12s;position:absolute;top:3px;right:4px}#app[data-peek=alt] .chord-pad__key,#app[data-peek=alt] .phrase-pad__key{opacity:1}.phrase-strip{flex-wrap:wrap;align-items:center;gap:6px;max-width:640px;margin:.6rem auto 0;display:flex}.phrase-strip:empty{display:none}.phrase-strip__label{text-transform:uppercase;letter-spacing:.1em;color:#8a8a93;font-family:ui-monospace,monospace;font-size:.62rem}.phrase-pad{font:inherit;isolation:isolate;color:#cfcfd6;cursor:pointer;background:linear-gradient(#1f1f26 0%,#15151a 100%);border:1px solid #2a2a30;border-radius:6px;align-items:center;gap:.4rem;padding:.3rem .55rem .3rem .7rem;font-family:ui-monospace,monospace;font-size:.78rem;transition:background 80ms,border-color 80ms,color 80ms;display:inline-flex;position:relative;overflow:hidden}.phrase-pad:hover{color:#fff;border-color:#3a3a45}.phrase-pad:before{content:"";z-index:-1;transform-origin:0;background:color-mix(in srgb, var(--accent) 26%, transparent);pointer-events:none;position:absolute;inset:0;transform:scaleX(0)}.phrase-pad.queued:before{animation:phrase-runner var(--fire-in,.5s) linear forwards}@keyframes phrase-runner{0%{transform:scaleX(0)}to{transform:scaleX(1)}}.phrase-pad.queued{border-color:var(--accent);color:#fff;background:linear-gradient(180deg, color-mix(in srgb, var(--accent) 30%, #15151a) 0%, #15151a 100%);animation:.5s ease-in-out infinite phrase-pulse}.phrase-pad.firing{border-color:var(--accent);color:#fff;background:var(--accent)}@keyframes phrase-pulse{0%,to{opacity:1}50%{opacity:.45}}.jam-options{flex-wrap:wrap;align-items:center;gap:6px;max-width:640px;margin:0 auto .55rem;display:flex}.jam-options:empty{display:none}.jam-opt__label{text-transform:uppercase;letter-spacing:.1em;color:#8a8a93;font-family:ui-monospace,monospace;font-size:.62rem}.jam-opt,.jam-arp__btn{font:inherit;color:#b8b8c0;cursor:pointer;background:#15151a;border:1px solid #2a2a30;border-radius:6px;padding:.2rem .5rem;font-family:ui-monospace,monospace;font-size:.72rem;transition:background 80ms,border-color 80ms,color 80ms}.jam-opt:hover,.jam-arp__btn:hover{color:#e8e8ee;border-color:#3a3a45}.jam-opt[data-active=true]{background:color-mix(in srgb, var(--accent) 22%, #15151a);border-color:var(--accent);color:#fff}.jam-arp{align-items:center;gap:4px;margin-left:4px;display:inline-flex}.jam-arp__btn{min-width:1.6rem;padding:.2rem .45rem}.jam-arp__btn[data-active=true]{background:color-mix(in srgb, var(--accent) 30%, #15151a);border-color:var(--accent);color:#fff}#keyboard{-webkit-user-select:none;user-select:none;max-width:560px;margin:0 auto;position:relative}.row{justify-content:center;display:flex}.row.white{gap:4px}.row.black{pointer-events:none;z-index:1;justify-content:center;gap:4px;display:flex;position:absolute;top:0;left:0;right:0}.row.black .spacer{width:64px}.key{font:inherit;cursor:pointer;pointer-events:auto;border-radius:0 0 6px 6px;justify-content:center;align-items:flex-end;padding-bottom:10px;transition:background .22s,box-shadow .22s,transform 60ms;display:flex}.key span{opacity:.6;font-family:ui-monospace,monospace;font-size:.75rem}.key:not(.sharp){color:#222;background:#f4f4f4;border:1px solid #444;width:64px;height:180px}.key:not(.sharp):hover{background:#e9e9e9}.key:not(.sharp).active{box-shadow:0 0 18px color-mix(in srgb, var(--c-piano) 55%, transparent);background:#aad4ff;transition:background 40ms,box-shadow 40ms,transform 40ms;transform:translateY(1px)}.key.sharp{color:#aaa;background:#1a1a1a;border:1px solid #000;width:40px;height:110px;margin:0 12px}.key.sharp:hover{background:#2a2a2a}.key.sharp.active{color:#fff;box-shadow:0 0 14px color-mix(in srgb, var(--c-piano) 50%, transparent);background:#3a6da8;transition:background 40ms,box-shadow 40ms,transform 40ms;transform:translateY(1px)}#bass-keys{flex-wrap:wrap;justify-content:center;gap:6px;display:flex}.bass-key{font:inherit;width:70px;height:130px;color:var(--c-bass);cursor:pointer;pointer-events:auto;background:linear-gradient(#2a1d12 0%,#15100a 100%);border:1px solid #4a3520;border-bottom-width:3px;border-radius:6px;flex-direction:column;justify-content:space-between;align-items:center;padding:.6rem 0;transition:background 80ms,transform 60ms,box-shadow .24s;display:flex}.bass-key:hover{background:linear-gradient(#3a2a1a 0%,#221710 100%);border-color:#6a4a2a}.bass-key.active{background:linear-gradient(180deg, var(--c-bass) 0%, #8a5618 100%);color:#fff;border-color:var(--c-bass);transition:background 40ms,transform 40ms,box-shadow 40ms;transform:translateY(2px);box-shadow:0 0 16px #d68a2d99}.bass-key .note{font-family:ui-monospace,monospace;font-size:1.6rem;font-weight:600}.bass-key .bind{opacity:.7;background:#0006;border-radius:3px;padding:1px 5px;font-size:.7rem}.bass-key.active .bind{color:#fff;opacity:1;background:#0000004d}#pad-strip{grid-template-columns:repeat(8,1fr);gap:4px;max-width:640px;margin:0 auto;display:grid}.strip-cell{font:inherit;height:90px;color:var(--c-pad);cursor:pointer;pointer-events:auto;background:linear-gradient(#14201d 0%,#0a1411 100%);border:1px solid #1f3a35;border-radius:4px;flex-direction:column;justify-content:center;align-items:center;gap:.4rem;transition:background .12s,box-shadow .26s,border-color .1s,transform 60ms;display:flex}.strip-cell:hover{background:linear-gradient(#1c2e2a 0%,#0e1c19 100%);border-color:#2a504a}.strip-cell.active{background:linear-gradient(180deg, var(--c-pad) 0%, #186b58 100%);border-color:var(--c-pad);color:#fff;transition:background 40ms,box-shadow 40ms,border-color 40ms,transform 40ms;transform:translateY(1px);box-shadow:0 0 18px #2db8968c}.strip-cell .note{font-family:ui-monospace,monospace;font-size:1.3rem;font-weight:600}.strip-cell .bind{opacity:.7;background:#0006;border-radius:3px;padding:1px 5px;font-size:.65rem}.strip-cell.active .bind{color:#fff;opacity:1;background:#0000004d}#pad-grid{grid-template-columns:repeat(4,1fr);gap:8px;max-width:480px;margin:0 auto;display:grid}.pad{font:inherit;aspect-ratio:1;color:#ccc;cursor:pointer;pointer-events:auto;background:linear-gradient(#1f1f26 0%,#15151a 100%);border:1px solid #2a2a30;border-radius:8px;flex-direction:column;justify-content:center;align-items:center;gap:.25rem;transition:background 80ms,transform 60ms,box-shadow .24s;display:flex;position:relative}.pad:hover{background:linear-gradient(#25252e 0%,#1a1a22 100%);border-color:#3a3a45}.pad.active{background:linear-gradient(180deg, var(--c-pluck) 0%, #8c2e64 100%);border-color:var(--c-pluck);color:#fff;transition:background 40ms,transform 40ms,box-shadow 40ms;transform:translateY(1px);box-shadow:0 0 16px #c44d8c80}.pad .note{font-family:ui-monospace,monospace;font-size:1.5rem;font-weight:600}.pad .bind{color:#888;background:#0e0e10;border-radius:3px;padding:1px 5px;font-size:.7rem}.pad.active .bind{color:#fff;background:#0000004d}dialog#help{background:var(--surface-3);color:var(--text);border:1px solid var(--border);border-radius:12px;width:calc(100% - 2rem);max-width:480px;padding:1.5rem 2rem;box-shadow:0 20px 60px #0009}dialog#help::backdrop{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:#0009}dialog#help h2{margin:0 0 1rem;font-size:1.1rem}dialog#help h3{text-transform:uppercase;letter-spacing:.08em;color:var(--text-dim);margin:0 0 .5rem;font-size:.75rem;font-weight:600}dialog#help section{margin-bottom:1.25rem}dialog#help dl{text-align:left;grid-template-columns:auto 1fr;align-items:center;gap:.4rem 1rem;margin:0;display:grid}dialog#help dt{white-space:nowrap}dialog#help dd{color:var(--text-2);margin:0;font-size:.9rem}.close-hint{color:var(--text-faint);text-align:center;margin:0;font-size:.8rem}dialog.confirm{background:var(--surface-3);color:var(--text);border:1px solid var(--border);border-radius:12px;width:calc(100% - 2rem);max-width:380px;padding:1.5rem 1.75rem;box-shadow:0 20px 60px #0009}dialog.confirm::backdrop{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:#0009}dialog.confirm h2{margin:0 0 .5rem;font-size:1.05rem}dialog.confirm p{color:var(--text-2);margin:0 0 1.25rem;font-size:.9rem}.confirm__actions{justify-content:flex-end;gap:.5rem;display:flex}.confirm__actions button{font:inherit;cursor:pointer;border:1px solid var(--border);border-radius:6px;padding:.45rem .9rem}.confirm__actions .ghost{background:var(--surface-2);color:var(--text-2);padding:.45rem .9rem}.confirm__actions .ghost:hover{background:var(--hover);color:var(--text)}.confirm__actions .danger{color:#fff;background:#c44;border-color:#c44}.confirm__actions .danger:hover{background:#d55;border-color:#d55}@media (width>=1100px){body{place-items:start center}#app{text-align:left;grid-template-columns:minmax(0,1fr) 340px;grid-template-areas:"header header""hint hint""project scaffolds""pattern scaffolds";align-items:start;gap:1rem 1.5rem;max-width:1280px;display:grid}#app>header{grid-area:header;margin-bottom:0}#app>#start-hint{grid-area:hint;margin:0}#app>.project-block{grid-area:project;margin-bottom:0}#app>#pattern-area{grid-area:pattern}#app>#scaffolds{grid-area:scaffolds;max-height:calc(100vh - 2rem);margin:0;position:sticky;top:1rem;overflow-y:auto}#app>header h1{text-align:left}}.tt-toggle{font:inherit;border:1px solid var(--border);width:1.1rem;height:1.1rem;color:var(--text-faint);cursor:pointer;-webkit-user-select:none;user-select:none;background:0 0;border-radius:3px;justify-content:center;align-items:center;padding:0;font-family:ui-monospace,monospace;font-size:.6rem;font-weight:700;line-height:1;transition:background .12s,color .12s,border-color .12s;display:inline-flex}.tt-toggle:hover{color:var(--text-2);border-color:var(--border-strong)}.tt-mute[data-on=true]{color:#fff;background:#c04040;border-color:#d05050}.tt-isolate[data-on=true]{color:#1a1a1f;background:#d6b440;border-color:#e6c450}.tt-divisor{width:auto;min-width:1.6rem;padding:0 .25rem}.tt-divisor[data-on=true]{color:#fff;background:#3a4a8a;border-color:#5a6aac}.lane__vol{appearance:none;cursor:pointer;background:0 0;flex-shrink:0;width:46px;height:14px;margin:0;padding:0}.lane__vol::-webkit-slider-runnable-track{background:var(--border-strong);border-radius:2px;height:3px}.lane__vol::-moz-range-track{background:var(--border-strong);border-radius:2px;height:3px}.lane__vol::-webkit-slider-thumb{appearance:none;background:var(--lane-color,var(--text-2));border:none;border-radius:50%;width:9px;height:9px;margin-top:-3px}.lane__vol::-moz-range-thumb{background:var(--lane-color,var(--text-2));border:none;border-radius:50%;width:9px;height:9px}.lane__vol[data-toned=true]::-webkit-slider-thumb{background:var(--text-faint)}.lane__vol[data-toned=true]::-moz-range-thumb{background:var(--text-faint)}.lane__vol:hover::-webkit-slider-runnable-track{background:var(--lane-color,var(--border-strong))}.lane__vol:hover::-moz-range-track{background:var(--lane-color,var(--border-strong))}#cheatsheet{border-top:1px solid var(--border-subtle);text-align:left;margin-top:2rem;padding-top:1rem}.cheatsheet__list{color:var(--text-2);flex-direction:column;gap:.4rem;margin:0;font-size:.78rem;line-height:1.45;display:flex}.cheat-row{grid-template-columns:minmax(120px,max-content) 1fr;align-items:baseline;column-gap:1rem;display:grid}.cheat-desc{color:var(--text-2)}.keys{flex-wrap:wrap;align-items:center;gap:3px;display:inline-flex}#help-link{font-size:.72rem}.cheatsheet__list strong{color:var(--text);font-weight:600}.cheatsheet__list em{color:#d6b440;font-style:normal}.cheatsheet__list kbd,#help-body kbd{background:var(--surface-2);border:1px solid var(--border);color:var(--text-2);border-radius:3px;padding:.05rem .3rem;font-family:ui-monospace,monospace;font-size:.72rem}.lane[data-muted=true] .lane__name{opacity:.45;text-decoration:line-through}.lane[data-muted=true] .lane__steps{opacity:.4}#rec-btn{position:relative}#rec-btn.recording:before{content:"";background:conic-gradient(var(--loop-ring,#fff) calc(var(--loop-progress,0) * 360deg), transparent 0);-webkit-mask-composite:xor;pointer-events:none;border-radius:8px;padding:2px;position:absolute;inset:-2px;-webkit-mask-image:linear-gradient(#000 0 0),linear-gradient(#000 0 0);mask-image:linear-gradient(#000 0 0),linear-gradient(#000 0 0);-webkit-mask-position:0 0,0 0;mask-position:0 0,0 0;-webkit-mask-size:auto,auto;mask-size:auto,auto;-webkit-mask-repeat:repeat,repeat;mask-repeat:repeat,repeat;-webkit-mask-clip:content-box,border-box;mask-clip:content-box,border-box;-webkit-mask-origin:content-box,border-box;mask-origin:content-box,border-box;-webkit-mask-composite:xor;mask-composite:exclude;-webkit-mask-source-type:auto,auto;mask-mode:match-source,match-source}.lane-stack__overlay{pointer-events:none;z-index:10;position:absolute;inset:0;overflow:hidden}.capture-spark{width:18px;height:18px;animation:capture-bloom .6s var(--ease-out) forwards;border-radius:50%;margin:-9px 0 0 -9px;position:absolute}@keyframes capture-bloom{0%{opacity:.9;transform:scale(.4)}to{opacity:0;transform:scale(2.6)}}@keyframes heartbeat{0%{transform:scale(1)}20%{transform:scale(1.03)}50%{transform:scale(1)}to{transform:scale(1)}}#play-btn[data-playing="1"]{animation:heartbeat calc(var(--beat-dur,500) * 1ms) ease-in-out infinite}html.theme-animating *{transition:background-color .25s,color .25s,border-color .25s!important}@keyframes dock-lift{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.jam-dock[data-open=true] .jam-dock__body{animation:dock-lift var(--dur-slow) var(--ease-out)}@keyframes lane-pulse{0%,to{box-shadow:none}50%{box-shadow:inset 0 0 0 2px var(--lane-color)}}.lane.lane-selected{animation:lane-pulse var(--dur-slow) var(--ease-spring)}.sound-card,.vibe-card,.drum-pad{transition:transform var(--dur-fast) var(--ease-spring)}.sound-card:hover,.vibe-card:hover,.drum-pad:hover{transform:translateY(-1px)scale(1.02)}.sound-card:active,.vibe-card:active,.drum-pad:active{transform:scale(.97)}@keyframes lane-slide-in{0%{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}.vibe-cascade .lane{animation:lane-slide-in var(--dur-slow) var(--ease-spring) both;animation-delay:calc(var(--row-index,0) * 60ms)}@media (prefers-reduced-motion:reduce){.cell.playing{animation:none!important}#lane-stack:before{animation:none!important;display:none!important}#play-btn[data-playing="1"]{animation:none!important}#app[data-sustain=on] #performance .surface{box-shadow:0 5px 16px -8px var(--sustain-glow,transparent)!important;animation:none!important}.phrase-pad.queued:before{animation:none!important}#rec-btn.recording:before{background:0 0!important}.capture-spark{display:none!important}html.theme-animating *{transition:none!important}.save-pill[data-state=saving],.save-pill[data-state=saved],.jam-dock[data-open=true] .jam-dock__body,.lane.lane-selected,.vibe-cascade .lane{animation:none!important}#ambient{opacity:0!important;animation:none!important}#ambient:before,#ambient:after,.eq-viz{display:none!important}*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}