:root{--color-bg:#08090a;--color-surface:#0f1011;--color-surface-2:#16181c;--color-fg:#f7f8f8;--color-muted:#8a8f98;--color-subtle:#62666d;--color-border:#ffffff14;--color-accent:#8fa6ff;--color-accent-fg:#08090a;--color-success:#27a644;--color-warning:#c97a0a;--color-danger:#f34e52;--color-focus:#2f6df6;--color-surface-inverse:#0b0d12;--color-fg-inverse:#fff;--color-border-inverse:#ffffff29;--color-bg-dark:#0b0d12;--color-surface-dark:#151922;--color-surface-dark-2:#1e242f;--color-fg-on-dark:#f5f7fa;--color-muted-on-dark:#f5f7faa3;--color-border-on-dark:#ffffff24;--color-border-strong:#23252a;--color-hairline:#0b0d1214;--font-sans:Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--font-mono:"Berkeley Mono", ui-monospace, "SF Mono", Menlo, monospace;--text-xs:.75rem;--text-sm:.875rem;--text-base:1rem;--text-md:1.125rem;--text-lg:1.25rem;--text-xl:1.5rem;--text-2xl:1.875rem;--text-3xl:2.25rem;--text-4xl:3rem;--text-5xl:4rem;--text-display:4.5rem;--weight-regular:400;--weight-medium:510;--weight-semibold:590;--weight-bold:700;--leading-tight:1;--leading-snug:1.25;--leading-normal:1.5;--leading-relaxed:1.7;--tracking-tight:-.02em;--tracking-normal:0em;--tracking-wide:.04em;--space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-5:1.5rem;--space-6:2rem;--space-7:3rem;--space-8:4rem;--space-9:6rem;--space-10:8rem;--radius-sm:6px;--radius-md:8px;--radius-lg:10px;--radius-xl:14px;--radius-full:9999px;--shadow-sm:#0000001a 0px 1px 3px 0px, #0000000d 0px 2px 4px -1px, #0000000d 0px 0px 0px 1px;--shadow-md:#0034dc72 0px 0px 0px 1px inset;--shadow-lg:#7971e9aa 0px 1px 20px -5px;--duration-fast:.14s;--duration-base:.18s;--duration-slow:.18s;--ease-standard:cubic-bezier(.45, .05, .55, .95);--ease-entrance:cubic-bezier(0, 0, 0, 1);--ease-exit:cubic-bezier(.3, 0, 1, 1);--container-content:720px;--container-sm:640px;--container-md:768px;--container-lg:1024px;--container-xl:1280px}@font-face{font-family:MusicClef;src:url(data:font/woff;base64,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)format("woff");font-display:block}*{box-sizing:border-box}html,body{height:100%;margin:0;overflow:hidden}#root{height:100%}body{background:var(--color-bg);color:var(--color-fg);font-family:var(--font-sans);font-size:var(--text-sm);font-weight:var(--weight-regular);line-height:var(--leading-normal)}button,input,select{font:inherit;color:inherit}.mono{font-family:var(--font-mono)}.app{flex-direction:column;height:100dvh;display:flex}.settings{border-bottom:1px solid var(--color-border);background:var(--color-surface);flex-direction:column;flex-shrink:0;height:30dvh;min-height:232px;display:flex;overflow:hidden}.tabs{align-items:center;gap:var(--space-1);padding:0 var(--space-3);border-top:1px solid var(--color-border);flex-shrink:0;display:flex}.tab{color:var(--color-muted);font-size:var(--text-xs);letter-spacing:var(--tracking-wide);text-transform:uppercase;padding:var(--space-2);cursor:pointer;background:0 0;border:none;border-bottom:2px solid #0000}.tab:hover{color:var(--color-fg)}.tab.active{color:var(--color-fg);border-bottom-color:var(--color-accent)}.tab-panel{min-height:0;padding:var(--space-2) var(--space-3);flex:1;overflow:auto}.panel-body{align-items:flex-start;gap:var(--space-5);flex-wrap:wrap;display:flex}.panel-group{gap:var(--space-2);flex-direction:column;display:flex}.stage{background:var(--color-bg);flex:1;min-width:0;min-height:0;position:relative;overflow:hidden}.stage>*{height:100%}.scrim{z-index:10;position:fixed;inset:0}.popover{top:var(--space-7);right:var(--space-3);z-index:11;width:280px;max-height:calc(100dvh - var(--space-8));background:var(--color-surface);border:1px solid var(--color-border-strong);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);position:fixed;overflow-y:auto}@media (prefers-reduced-motion:no-preference){.popover{animation:popover-in var(--duration-base) var(--ease-standard)}.tab{transition:color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard)}}@keyframes popover-in{0%{opacity:0;transform:translateY(calc(-1 * var(--space-1)))}to{opacity:1;transform:none}}.toolbar{background:var(--color-surface);flex-direction:column;flex-shrink:0;display:flex}.toolbar-row{align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);display:flex;overflow-x:auto}.toolbar-settings{border-top:1px solid var(--color-border);gap:var(--space-3)}.toolbar-section{align-items:center;gap:var(--space-3);flex-shrink:0;display:flex}.toolbar-section-label{font-size:var(--text-xs);color:var(--color-subtle);letter-spacing:var(--tracking-wide);text-transform:uppercase;flex-shrink:0}.toolbar-unit{font-size:var(--text-xs);color:var(--color-subtle)}.toolbar-end{align-items:center;gap:var(--space-1);padding-left:var(--space-2);background:var(--color-surface);flex-shrink:0;display:flex;position:sticky;right:0}.toolbar-title{color:var(--color-fg);font-size:var(--text-sm);font-weight:var(--weight-medium);padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm);background:0 0;border:1px solid #0000;min-width:10ch}.toolbar-title:hover{border-color:var(--color-border)}.toolbar-divider{background:var(--color-border);flex-shrink:0;align-self:stretch;width:1px}.toolbar-group{gap:var(--space-1);flex-shrink:0;display:flex}.toolbar-spacer{flex:1}.toolbar-field{align-items:center;gap:var(--space-1);flex-shrink:0;display:flex}.toolbar-label{font-size:var(--text-xs);color:var(--color-muted)}.toolbar-number,.toolbar-select{background:var(--color-surface-2);border:1px solid var(--color-border);color:var(--color-fg);border-radius:var(--radius-sm);padding:var(--space-1) var(--space-2);font-size:var(--text-xs)}.toolbar-number{text-align:center;width:7ch}.toolbar-number-narrow{width:4ch}.toolbar-slash{color:var(--color-muted)}.toolbar-btn{border:1px solid var(--color-border);color:var(--color-muted);font-size:var(--text-xs);padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm);cursor:pointer;white-space:nowrap;background:0 0}.toolbar-btn:hover{background:var(--color-surface-2);color:var(--color-fg)}.toolbar-btn.active{background:var(--color-accent);color:var(--color-accent-fg);border-color:var(--color-accent)}.toolbar-btn:disabled{opacity:.4;cursor:default}.toolbar-btn:disabled:hover{color:var(--color-muted);background:0 0}.toolbar-play{color:var(--color-accent);border-color:var(--color-accent);font-size:var(--text-sm);line-height:var(--leading-tight)}.toolbar-play[aria-pressed=true]{background:var(--color-accent);color:var(--color-accent-fg)}@media (prefers-reduced-motion:no-preference){.toolbar-btn,.toolbar-play,.panel-action,.assist-btn,.chord-btn,.track-toggle,.track-remove,.export-gear{transition-property:background-color,color,border-color;transition-duration:var(--duration-fast);transition-timing-function:var(--ease-standard)}}.toolbar-title:focus-visible,.toolbar-number:focus-visible,.toolbar-select:focus-visible,.toolbar-btn:focus-visible,.panel-action:focus-visible,.assist-btn:focus-visible,.chord-btn:focus-visible,.track-toggle:focus-visible,.track-remove:focus-visible,.track-name:focus-visible,.track-instrument:focus-visible,.track-volume:focus-visible,.saved-name:focus-visible,.export-gear:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}.panel{padding:var(--space-3);border-bottom:1px solid var(--color-border);gap:var(--space-2);flex-direction:column;display:flex}.panel:last-child{border-bottom:none}.panel-action{border:1px solid var(--color-border);color:var(--color-muted);font-size:var(--text-xs);padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm);cursor:pointer;background:0 0;align-self:flex-start}.panel-action:hover{color:var(--color-fg);background:var(--color-surface-2)}.track-rows{gap:var(--space-2);margin:0;padding:0;list-style:none;display:flex;overflow-x:auto}.track-row{gap:var(--space-1);padding:var(--space-2);border-radius:var(--radius-sm);border:1px solid var(--color-border);cursor:pointer;border-left:2px solid #0000;flex-direction:column;flex-shrink:0;width:240px;display:flex}.track-line{align-items:center;gap:var(--space-1);min-width:0;display:flex}.track-row:hover,.track-row.active{background:var(--color-surface-2)}.track-swatch{width:var(--space-2);height:var(--space-2);border-radius:var(--radius-full);flex-shrink:0}.track-name{border-radius:var(--radius-sm);min-width:0;padding:var(--space-1);font-size:var(--text-xs);background:0 0;border:1px solid #0000;flex:1}.track-name:hover{border-color:var(--color-border)}.track-instrument{border:1px solid var(--color-border);border-radius:var(--radius-sm);min-width:0;padding:var(--space-1);font-size:var(--text-xs);text-overflow:ellipsis;background:0 0;flex:3 1 0}.track-volume{min-width:0;accent-color:var(--color-accent);flex:2 1 0}.track-toggle{border:1px solid var(--color-border);width:2ch;color:var(--color-muted);border-radius:var(--radius-sm);padding:var(--space-1);font-size:var(--text-xs);cursor:pointer;background:0 0;flex-shrink:0}.track-toggle:hover{background:var(--color-surface-2);color:var(--color-fg)}.track-toggle.active{background:var(--color-accent);color:var(--color-accent-fg);border-color:var(--color-accent)}.track-remove{color:var(--color-subtle);cursor:pointer;font-size:var(--text-sm);padding:0 var(--space-1);background:0 0;border:none;flex-shrink:0}.track-remove:hover{color:var(--color-danger)}.track-remove:disabled{opacity:.4;cursor:default}.dock-label{font-size:var(--text-xs);color:var(--color-muted);letter-spacing:var(--tracking-wide);text-transform:uppercase}.dock-row{align-items:center;gap:var(--space-2);display:flex}.chord-row{gap:var(--space-1);flex-wrap:wrap;display:flex}.chord-btn{--tag-bg:var(--color-surface-2);--tag-border:var(--color-border);background:var(--tag-bg);border:1px solid var(--tag-border);color:var(--color-fg);font-size:var(--text-xs);padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm);cursor:pointer;white-space:nowrap}.chord-btn:hover{--tag-bg:color-mix(in srgb, var(--color-accent) 12%, transparent);--tag-border:color-mix(in srgb, var(--color-accent) 40%, transparent);color:var(--color-accent)}.metric{align-items:baseline;gap:var(--space-2);padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm);background:color-mix(in srgb, var(--color-accent) 8%, transparent);flex-shrink:0;display:inline-flex}.metric-label{font-size:var(--text-xs);color:var(--color-muted)}.metric-value{font-size:var(--text-xs);color:var(--color-accent);font-variant-numeric:tabular-nums}.metric-idle{background:0 0}.metric-idle .metric-value{color:var(--color-subtle)}.assist-checkbox{align-items:center;gap:var(--space-1);font-size:var(--text-xs);color:var(--color-muted);display:flex}.assist-checkbox input{accent-color:var(--color-accent)}.assist-btn{border:1px solid var(--color-border);color:var(--color-fg);font-size:var(--text-xs);padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm);cursor:pointer;white-space:nowrap;background:0 0}.assist-btn:hover{background:var(--color-surface-2)}.assist-btn:disabled{opacity:.4;cursor:default}.assist-btn:disabled:hover{background:0 0}.assist-number{align-items:center;gap:var(--space-1);font-size:var(--text-xs);color:var(--color-muted);display:flex}.assist-number input{background:var(--color-surface-2);border:1px solid var(--color-border);width:5ch;color:var(--color-fg);border-radius:var(--radius-sm);padding:var(--space-1)}.assist-field{gap:var(--space-1);display:flex}.export-panel{gap:var(--space-3);padding:var(--space-3);flex-direction:column;display:flex}.export-group{gap:var(--space-2);flex-direction:column;align-items:flex-start;display:flex}.export-divider{background:var(--color-border);height:1px}.export-hint{font-size:var(--text-xs);color:var(--color-subtle);margin:0}.export-link{font-size:var(--text-xs);color:var(--color-accent)}.export-error{font-size:var(--text-xs);color:var(--color-danger);margin:0}.export-gear{color:var(--color-subtle);cursor:pointer;font-size:var(--text-sm);background:0 0;border:none;align-self:flex-start}.export-gear:hover{color:var(--color-fg)}.export-token{gap:var(--space-1);display:flex}.export-token input{background:var(--color-surface-2);border:1px solid var(--color-border);min-width:0;color:var(--color-fg);border-radius:var(--radius-sm);padding:var(--space-1) var(--space-2);font-size:var(--text-xs);flex:1}.saved-list{gap:var(--space-1);flex-direction:column;max-height:10em;margin:0;padding:0;list-style:none;display:flex;overflow-y:auto}.saved-row{display:flex}.saved-name{text-align:left;color:var(--color-fg);font-size:var(--text-xs);cursor:pointer;padding:var(--space-1);border-radius:var(--radius-sm);text-overflow:ellipsis;white-space:nowrap;background:0 0;border:none;flex:1;overflow:hidden}.saved-name:hover{background:var(--color-surface-2)}.piano-roll .row{fill:#ffffff0d}.piano-roll .row-black{fill:#00000029}.piano-roll .row-out-of-scale{fill-opacity:.6}.piano-roll .grid-beat{stroke:#ffffff0d}.piano-roll .grid-bar{stroke:#ffffff1f}.piano-roll .grid-octave{stroke:#ffffff14}.piano-roll .playhead{stroke:var(--color-fg);stroke-width:1px}.piano-roll .loop-region{fill:var(--color-accent);fill-opacity:.08}.piano-roll .note.selected{stroke:var(--color-fg)}.piano-roll .note.playing{filter:brightness(1.3)}.toolbar-number,.assist-number input{appearance:textfield}.toolbar-number::-webkit-inner-spin-button{appearance:none;margin:0}.toolbar-number::-webkit-outer-spin-button{appearance:none;margin:0}.assist-number input::-webkit-inner-spin-button{appearance:none;margin:0}.assist-number input::-webkit-outer-spin-button{appearance:none;margin:0}.piano-roll{--pr-key-white:#e9e7e2;--pr-key-black:#17161b}.pr-corner,.pr-ruler{background:var(--color-surface);border-bottom:1px solid var(--color-border)}.pr-corner{border-right:1px solid var(--color-border)}.pr-ruler,.piano-roll .note{touch-action:none}.pr-grid{touch-action:pan-x pan-y}.pr-keyboard{touch-action:pan-y;border-right:1px solid var(--color-border)}.ruler-bar{stroke:var(--color-border-strong)}.ruler-label{fill:var(--color-muted);font-family:var(--font-mono);font-size:var(--text-xs)}.kb-key-white{fill:var(--pr-key-white)}.kb-key-black{fill:var(--pr-key-black)}.kb-key{stroke:var(--color-bg);stroke-width:.5px;cursor:pointer}.kb-label{fill:var(--color-subtle);font-family:var(--font-mono);font-size:var(--text-xs);pointer-events:none}.piano-roll .grid-snap{stroke:#ffffff08}.note-ghost{opacity:.3}.rubber-band{fill:var(--color-accent);fill-opacity:.1;stroke:var(--color-accent);stroke-dasharray:3 2}.staff-view{height:100%;overflow:auto}.staff-bg{fill:var(--color-bg)}.staff-view .staff-line,.staff-view .bar-line{stroke:var(--color-border-strong)}.staff-view .ledger-line{stroke:var(--color-muted)}.staff-view .head.selected{stroke:var(--color-fg);stroke-width:1.5px}.staff-view .stem,.staff-view .flag{stroke:var(--color-fg);stroke-width:1px}.staff-view .flag,.staff-view .dot,.staff-view .clef-treble,.staff-view .clef-bass,.staff-view .time-sig,.staff-view .accidental{fill:var(--color-fg)}.staff-view .accidental.thick{stroke:var(--color-fg);stroke-width:1.5px}.staff-view .playhead{stroke:var(--color-fg);stroke-width:1px}