:root{--surface:#101218;--panel:#181b23;--viewer:#0e1117;--control:#222733;--line:#303746;--text:#cbd1dc;--text-strong:#f5f7fb;--text-muted:#8993a5;--accent:#72d6b0;color:var(--text);background:var(--surface);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font:15px/1.45 Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}body{margin:0;overflow:hidden}#root{height:100dvh;overflow:hidden}html{overflow:hidden}.app-shell{background:var(--surface);height:100dvh;color:var(--text);grid-template-rows:58px minmax(0,1fr) clamp(118px,17dvh,156px);display:grid;position:relative;overflow:hidden}.topbar{border-bottom:1px solid var(--line);background:var(--panel);justify-content:space-between;align-items:center;gap:12px;min-width:0;padding:9px 14px;display:flex}.brand-block h1{color:var(--text-strong);margin:0;font-size:22px;line-height:1}.file-actions,.segmented,.range-row{align-items:center;gap:8px;display:flex}.file-actions{flex-wrap:wrap;justify-content:flex-end;min-width:0}.viewer-panel{background:linear-gradient(180deg, #4e759124, transparent 52%), var(--viewer);min-height:0;position:relative;overflow:hidden}.viewer-layer{position:absolute;inset:0}.viewer-layer.inactive{visibility:hidden;pointer-events:none}.viewer-layer.active{visibility:visible}.progress-track{z-index:3;background:#ffffff12;height:3px;position:absolute;top:0;left:0;right:0}.progress-track div{background:linear-gradient(90deg, var(--accent), #ffd166);transform-origin:0;will-change:transform;width:100%;height:100%;transform:scaleX(0)}.playback-metadata{z-index:5;pointer-events:none;flex-wrap:wrap;gap:6px;max-width:min(780px,100% - 24px);display:flex;position:absolute;top:12px;left:12px}.playback-metadata[hidden]{display:none}.playback-metadata span{color:#e6edf5e0;font-variant-numeric:tabular-nums;background:#0c1016b3;border:1px solid #ffffff1f;border-radius:999px;padding:3px 8px;font-size:12px;line-height:1.2}.playback-metadata span:first-child{text-align:center;min-width:44px}.empty-state{height:100%;color:var(--text-muted);place-items:center;padding:24px;display:grid}.note-river{width:100%;height:100%;position:relative;overflow:hidden}.note-river canvas,.note-river svg{width:100%;height:100%;display:block;overflow:hidden}.note-river canvas{will-change:transform;position:absolute;left:0}.strike-line-canvas{z-index:1;pointer-events:none;background:#ffffff9e;height:2px;position:absolute;bottom:0;left:0;right:0}.river-motion-layer{will-change:transform}.river-note{vector-effect:non-scaling-stroke;stroke:#060910;stroke-linejoin:round;stroke-width:1.45px}.river-note.right.white-note{fill:#f7a56e}.river-note.right.black-note{fill:#b85a3a}.river-note.left.white-note{fill:#52c7e8}.river-note.left.black-note{fill:#1f8093}.river-note.unknown.white-note{fill:#d4a23c}.river-note.unknown.black-note{fill:#8d6d25}.strike-line{vector-effect:non-scaling-stroke;stroke:#ffffff9e;stroke-width:2px}.measure-line{vector-effect:non-scaling-stroke;stroke:#ffffff38;stroke-width:1px}.measure-label-layer{z-index:2;pointer-events:none;contain:layout paint style;position:absolute;inset:0}.measure-label{box-sizing:border-box;color:#d8e1ebe6;font-variant-numeric:tabular-nums;text-align:center;background:#0a0d12bd;border:1px solid #ffffff1f;border-radius:999px;justify-content:center;align-items:center;min-width:26px;height:20px;padding:0 6px;font-size:12px;font-weight:600;line-height:1;display:inline-flex;position:absolute;top:0;left:8px}.note-attack,.note-release{vector-effect:non-scaling-stroke;stroke:#05070c;stroke-linecap:round;stroke-width:4.6px}.note-release{opacity:.78;stroke-width:3.2px}.glissando-line{vector-effect:non-scaling-stroke;fill:none;stroke:#f7faffc7;stroke-dasharray:4 3;stroke-linecap:round;stroke-width:2.6px}.glissando-line.right{stroke:#ffd0ad}.glissando-line.left{stroke:#a8f7ef}.glissando-line.unknown{stroke:#ffe39a}.current-readout{z-index:2;pointer-events:none;flex-wrap:wrap;justify-content:center;gap:6px;display:flex;position:absolute;top:12px;left:14px;right:14px}.current-readout span{min-width:36px;color:var(--text-strong);text-align:center;background:#0e1117c2;border:1px solid #ffffff29;border-radius:999px;padding:3px 7px}button,.icon-button{border:1px solid var(--line);background:var(--control);min-height:34px;color:var(--text-strong);font:inherit;border-radius:6px;justify-content:center;align-items:center;gap:7px;padding:0 11px;text-decoration:none;display:inline-flex}button:not(:disabled),.icon-button{cursor:pointer}button:disabled{color:var(--text-muted);cursor:not-allowed;opacity:.52}button:focus-visible,.icon-button:focus-within,select:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.file-picker input{clip:rect(0 0 0 0);width:1px;height:1px;position:absolute;overflow:hidden}.round-button{border-radius:999px;width:38px;padding:0}.segmented{border:1px solid var(--line);background:#11151c;border-radius:8px;padding:3px}.segmented.compact{flex-wrap:nowrap}.segmented.wrapped{flex-wrap:wrap}.segmented button{background:0 0;border-color:#0000;min-height:30px;padding:0 9px}.segmented .selected{color:#a8f0d0;background:#26313b}.slider-control,.toggle-control,.select-control{color:var(--text-muted);align-items:center;gap:8px;font-size:13px;display:inline-flex}.slider-control.stacked{flex-direction:column;align-items:stretch}.slider-control input{width:100%;accent-color:var(--accent)}.toggle-control input{accent-color:var(--accent)}.select-control select{border:1px solid var(--line);background:var(--control);min-width:76px;min-height:30px;color:var(--text-strong);border-radius:6px}.side-backdrop{z-index:8;background:#00000038;border:0;border-radius:0;min-height:0;padding:0;position:fixed;inset:0}.side-panel{z-index:9;border-left:1px solid var(--line);background:#171b23;flex-direction:column;gap:14px;width:min(360px,92vw);height:100dvh;padding:14px;transition:transform .16s;display:flex;position:fixed;top:0;right:0;transform:translate(104%);box-shadow:-18px 0 40px #0000004d}.side-panel.open{transform:translate(0)}.side-panel-header{color:var(--text-strong);justify-content:space-between;align-items:center;gap:12px;font-weight:600;display:flex}.panel-stack{gap:12px;display:grid;overflow:auto}.panel-card,.panel-warning{border:1px solid var(--line);background:#11151c;border-radius:8px;gap:8px;padding:12px;display:grid}.panel-card span,.panel-warning span{color:var(--text-muted)}.panel-warning{border-color:#7d4f40}.toast-error,.toast-info{z-index:10;border:1px solid var(--line);color:var(--text-strong);background:#11151c;border-radius:999px;padding:7px 12px;position:fixed;top:70px;left:50%;transform:translate(-50%);box-shadow:0 10px 30px #0000003d}.toast-error{color:#ffb199;border-color:#d97757}.sidebar-edge{z-index:7;color:#ffffff57;pointer-events:none;position:fixed;top:50%;right:6px}.score-view{color:#1b1d22;background:#f6f3ec;height:100%;position:relative;overflow:hidden}.score-scroll{position:absolute;inset:0;overflow:hidden}.score-track{will-change:transform;width:100%;min-width:100%;min-height:100%;position:absolute;top:0;left:0}.score-canvas{box-sizing:content-box;width:max-content;min-width:100%;min-height:100%;padding:68px 58vw 42vh 42vw}.score-glissando-overlay{z-index:2;pointer-events:none;min-width:100%;min-height:100%;position:absolute;top:0;left:0;overflow:visible}.score-glissando-line{fill:none;stroke:#252b33;stroke-dasharray:6 4;stroke-linecap:round;stroke-width:2.4px}.score-playback-line{z-index:3;pointer-events:none;border-left:3px solid #e05842;width:0;position:absolute;top:0;bottom:0;left:42%;box-shadow:0 0 16px #e0584261}.score-error{z-index:4;color:#9f3d24;background:#ffffffe6;border:1px solid #c75f43;border-radius:999px;width:max-content;padding:4px 11px;font-size:12px;position:absolute;top:10px;left:50%;transform:translate(-50%);box-shadow:0 8px 24px #0000001f}.keyboard-shell{border-top:1px solid var(--line);background:linear-gradient(#242833,#15181f);min-height:0;padding:10px 0 12px}.piano-keyboard{width:100%;height:100%;min-height:92px;position:relative}.white-keys{grid-template-columns:repeat(52,minmax(0,1fr));gap:0;height:100%;display:grid}.white-key{color:#596271;background:linear-gradient(#fffef9,#dfe5ea);border:1px solid #cfd4d9;border-bottom-width:4px;border-radius:0 0 5px 5px;min-width:0;padding:0;position:relative}.white-key.active-right,.black-key.active-right{background:linear-gradient(#ffe2c8,#f38e72);border-color:#ffad7c;box-shadow:0 0 20px #f38e726b}.white-key.active-left,.black-key.active-left{background:linear-gradient(#c9fff0,#49b9c7);border-color:#72d6b0;box-shadow:0 0 20px #72d6b06b}.white-key.active-unknown,.black-key.active-unknown{background:linear-gradient(#ffe8a8,#d49a38);border-color:#ffd166;box-shadow:0 0 20px #ffd1665c}.white-key span{text-align:center;font-size:10px;position:absolute;bottom:6px;left:0;right:0;overflow:hidden}.black-keys{pointer-events:none;height:62%;position:absolute;top:0;left:0;right:0}.black-key{pointer-events:auto;background:linear-gradient(#343946,#090a0f);border:1px solid #090a0e;border-radius:0 0 4px 4px;height:100%;padding:0;position:absolute;transform:translate(-50%);box-shadow:0 5px 10px #0000005c}.drop-overlay{z-index:12;color:var(--text-strong);pointer-events:none;background:#101218d1;border:2px dashed #72d6b0;border-radius:12px;place-items:center;font-size:clamp(22px,4vw,42px);display:grid;position:fixed;inset:10px}@media (width<=900px){.app-shell{grid-template-rows:auto minmax(0,1fr) 126px}.topbar{flex-direction:column;align-items:flex-start}.file-actions{justify-content:flex-start}.icon-button,.segmented button{padding-inline:8px}.keyboard-shell{padding-inline:0}}