:root,:root[data-theme=pastel]{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--bg-page:#edf6f5;--bg-panel:#fff;--bg-panel-subtle:#f4faf9;--bg-control:#f2f9f8;--border-color:#cde4e0;--border-strong:#9fc7c0;--text-main:#1f3533;--text-sub:#466663;--text-muted:#6c8f8b;--btn-primary-bg:linear-gradient(135deg, #14b8a6, #0d9488);--btn-primary-hover:linear-gradient(135deg, #0d9488, #0f766e);--btn-primary-text:#fff;--btn-primary-shadow:#0d948847;--btn-secondary-bg:#e8f4f2;--btn-secondary-hover:#d5ebe7;--btn-secondary-border:#b5ddd7;--btn-secondary-text:#1f3533;--toggle-active-bg:#ccfbf1;--toggle-active-border:#14b8a6;--toggle-active-text:#0f766e;--accent-color:#0d9488;--range-track:#cde4e0;--track-playable:#0d9488;--track-playable-border:#5eead4;--track-warn:#d97706;--track-warn-border:#fde68a;--track-empty:#8da8a5;--option-bg:#fff;--option-empty-bg:#eff7f6;--status-error:#e11d48;--status-warn:#d97706;--banner-bg:linear-gradient(90deg, #ccfbf1f2, #f0fdfaf2);--banner-border:#2dd4bf;--banner-text:#115e59;--canvas-bg:#f7fcfb;--grid-vline:#e2f1ef;--grid-hline:#cbe6e2;--grid-barline:#94c5be;--hitline-color:#ec4899;--lane-active-bg:#14b8a61c;--note-left-top:#38bdf8;--note-left-bottom:#0284c7;--note-left-stroke:#0369a1;--note-center-top:#34d399;--note-center-bottom:#059669;--note-center-stroke:#047857;--note-right-top:#f472b6;--note-right-bottom:#db2777;--note-right-stroke:#be185d;--note-fill:#6366f1;--note-stroke:#4338ca;--note-text:#fff;--note-active-fill:#f59e0b;--note-active-stroke:#b45309;--note-active-glow:#f59e0b8c;--bridge-bg:linear-gradient(180deg, #caa472, #a67c46);--bridge-bar:linear-gradient(180deg, #f1f5f9, #94a3b8);--footer-bg:linear-gradient(180deg, #dff0ed, #eef7f6);--tine-border:#b0d4ce;--tine-bg-odd:linear-gradient(180deg, #fff 0%, #f0f9f8 65%, #dceee9 100%);--tine-bg-even:linear-gradient(180deg, #f7fcfb 0%, #e6f4f1 65%, #cfe6e2 100%);--tine-bg-marked:linear-gradient(180deg, #eef2ff 0%, #e0e7ff 65%, #c7d2fe 100%);--tine-bg-center:linear-gradient(180deg, #fef3c7 0%, #fde68a 65%, #fcd34d 100%);--tine-hover:linear-gradient(180deg, #fce7f3, #fbcfe8);--tine-active-bg:linear-gradient(180deg, #f472b6, #db2777);--tine-active-glow:#ec489973;--tine-text:#1f3533;--tine-active-text:#fff;--tine-subtext:#5e827e;--tine-active-subtext:#fce7f3;--tine-dot:#db2777;--tine-active-dot:#fff;--staff-line:#648c88;--staff-ledger:#426662;--staff-clef:#486865;--staff-playhead:#ec4899cc;--staff-accidental:#db2777;--tip-bg:linear-gradient(145deg, #1f3533, #132422);--tip-border:#486865;--tip-text:#f0fdfa;font-family:Inter,Segoe UI,Hiragino Kaku Gothic ProN,Yu Gothic UI,system-ui,sans-serif;line-height:1.45}:root[data-theme=light]{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--bg-page:#f1f5f9;--bg-panel:#fff;--bg-panel-subtle:#f8fafc;--bg-control:#f1f5f9;--border-color:#d8e0eb;--border-strong:#b4c2d4;--text-main:#0f172a;--text-sub:#475569;--text-muted:#64748b;--btn-primary-bg:linear-gradient(135deg, #3b82f6, #2563eb);--btn-primary-hover:linear-gradient(135deg, #2563eb, #1d4ed8);--btn-primary-text:#fff;--btn-primary-shadow:#2563eb47;--btn-secondary-bg:#eef2f8;--btn-secondary-hover:#e2e8f0;--btn-secondary-border:#cbd5e1;--btn-secondary-text:#1e293b;--toggle-active-bg:#dbeafe;--toggle-active-border:#3b82f6;--toggle-active-text:#1d4ed8;--accent-color:#2563eb;--range-track:#cbd5e1;--track-playable:#0f8a5f;--track-playable-border:#6ee7b7;--track-warn:#b45309;--track-warn-border:#fcd34d;--track-empty:#94a3b8;--option-bg:#fff;--option-empty-bg:#f1f5f9;--status-error:#dc2626;--status-warn:#b45309;--banner-bg:linear-gradient(90deg, #dbeafef2, #eff6fff2);--banner-border:#60a5fa;--banner-text:#1e40af;--canvas-bg:#f8fafc;--grid-vline:#e2e8f0;--grid-hline:#cbd5e1;--grid-barline:#94a3b8;--hitline-color:#2563eb;--lane-active-bg:#2563eb17;--note-left-top:#60a5fa;--note-left-bottom:#2563eb;--note-left-stroke:#1d4ed8;--note-center-top:#34d399;--note-center-bottom:#059669;--note-center-stroke:#047857;--note-right-top:#a78bfa;--note-right-bottom:#7c3aed;--note-right-stroke:#5b21b6;--note-fill:#3b82f6;--note-stroke:#1d4ed8;--note-text:#fff;--note-active-fill:#f59e0b;--note-active-stroke:#b45309;--note-active-glow:#f59e0b8c;--bridge-bg:linear-gradient(180deg, #b88b58, #8c6236);--bridge-bar:linear-gradient(180deg, #f8fafc, #94a3b8);--footer-bg:linear-gradient(180deg, #e2e8f0, #f1f5f9);--tine-border:#cbd5e1;--tine-bg-odd:linear-gradient(180deg, #fff 0%, #f1f5f9 65%, #e2e8f0 100%);--tine-bg-even:linear-gradient(180deg, #f8fafc 0%, #e8eef5 65%, #d5dfeb 100%);--tine-bg-marked:linear-gradient(180deg, #eff6ff 0%, #dbeafe 65%, #bfdbfe 100%);--tine-bg-center:linear-gradient(180deg, #fef3c7 0%, #fde68a 65%, #fcd34d 100%);--tine-hover:linear-gradient(180deg, #e0ecff, #c7dcff);--tine-active-bg:linear-gradient(180deg, #3b82f6, #1d4ed8);--tine-active-glow:#2563eb73;--tine-text:#1e293b;--tine-active-text:#fff;--tine-subtext:#64748b;--tine-active-subtext:#e0f2fe;--tine-dot:#2563eb;--tine-active-dot:#fff;--staff-line:#64748b;--staff-ledger:#475569;--staff-clef:#475569;--staff-playhead:#ef4444cc;--staff-accidental:#d97706;--tip-bg:linear-gradient(145deg, #1e293b, #0f172a);--tip-border:#475569;--tip-text:#f8fafc}:root[data-theme=dark]{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg-page:#0f1218;--bg-panel:#181c26;--bg-panel-subtle:#141821;--bg-control:#232836;--border-color:#323a4e;--border-strong:#46516d;--text-main:#e8ecf4;--text-sub:#9aa4b8;--text-muted:#707b91;--btn-primary-bg:linear-gradient(135deg, #4f73c3, #3b5998);--btn-primary-hover:linear-gradient(135deg, #5d82d6, #4668b0);--btn-primary-text:#fff;--btn-primary-shadow:#3b599866;--btn-secondary-bg:#262c3c;--btn-secondary-hover:#323a4e;--btn-secondary-border:#424d66;--btn-secondary-text:#e8ecf4;--toggle-active-bg:#4f73c340;--toggle-active-border:#6b93e8;--toggle-active-text:#9ec0ff;--accent-color:#6b93e8;--range-track:#323a4e;--track-playable:#6ee7b7;--track-playable-border:#2f6f58;--track-warn:#fbbf24;--track-warn-border:#785c22;--track-empty:#768094;--option-bg:#1e2430;--option-empty-bg:#181c26;--status-error:#f88;--status-warn:#fc6;--banner-bg:linear-gradient(90deg, #2b4570f2, #1e2d4af2);--banner-border:#5a8cd8;--banner-text:#d8eeff;--canvas-bg:#171b24;--grid-vline:#252b3b;--grid-hline:#2b3244;--grid-barline:#45506b;--hitline-color:#60a5fa;--lane-active-bg:#60a5fa1a;--note-left-top:#38bdf8;--note-left-bottom:#0369a1;--note-left-stroke:#7dd3fc;--note-center-top:#34d399;--note-center-bottom:#047857;--note-center-stroke:#6ee7b7;--note-right-top:#f472b6;--note-right-bottom:#9d174d;--note-right-stroke:#f9a8d4;--note-fill:#28334d;--note-stroke:#6a7aa0;--note-text:#f8fafc;--note-active-fill:#f59e0b;--note-active-stroke:#fde68a;--note-active-glow:#f59e0bbf;--bridge-bg:linear-gradient(180deg, #6e4e2e, #4a331c);--bridge-bar:linear-gradient(180deg, #94a3b8, #475569);--footer-bg:linear-gradient(180deg, #1b202c, #13161f);--tine-border:#333b4f;--tine-bg-odd:linear-gradient(180deg, #32394c 0%, #262c3b 65%, #1c202c 100%);--tine-bg-even:linear-gradient(180deg, #2a3040 0%, #202532 65%, #171b25 100%);--tine-bg-marked:linear-gradient(180deg, #344162 0%, #28334e 65%, #1e263b 100%);--tine-bg-center:linear-gradient(180deg, #5c4824 0%, #46361a 65%, #332712 100%);--tine-hover:linear-gradient(180deg, #424d66, #2d3548);--tine-active-bg:linear-gradient(180deg, #3b82f6, #1d4ed8);--tine-active-glow:#60a5fa99;--tine-text:#e8ecff;--tine-active-text:#fff;--tine-subtext:#8b93a7;--tine-active-subtext:#dbeafe;--tine-dot:#93c5fd;--tine-active-dot:#fff;--staff-line:#8b95ab;--staff-ledger:#b0bad0;--staff-clef:#9aa3b8;--staff-playhead:#60a5facc;--staff-accidental:#ffcf70;--tip-bg:linear-gradient(145deg, #353d52, #2a3042);--tip-border:#5a6788;--tip-text:#eef1ff}body{background:var(--bg-page);color:var(--text-main);margin:0;transition:background-color .15s,color .15s}.app{max-width:1100px;color:var(--text-main);background:var(--bg-page);box-sizing:border-box;min-height:100vh;margin:0 auto;padding:.9rem 1.25rem 2rem;transition:background-color .15s,color .15s}.app-drag-over{outline:3px dashed var(--accent-color);outline-offset:-8px}.header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.75rem 1rem;margin-bottom:.75rem;display:flex}.brand-group{align-items:center;gap:.6rem;display:flex}.brand-icon{font-size:1.65rem;line-height:1}.header h1{letter-spacing:-.02em;margin:0;font-size:1.35rem;font-weight:800;line-height:1.15}.brand-sub{color:var(--text-sub);font-size:.74rem;font-weight:500;display:block}.header-right{align-items:center;gap:.75rem;display:flex}.segmented-tabs{background:var(--bg-panel);border:1px solid var(--border-color);border-radius:999px;gap:2px;padding:3px;display:inline-flex;box-shadow:0 1px 2px #0000000a}.seg-tab{color:var(--text-sub);cursor:pointer;background:0 0;border:none;border-radius:999px;padding:.3rem .85rem;font-size:.8rem;font-weight:600;transition:background .12s,color .12s,box-shadow .12s}.seg-tab:hover:not(.seg-tab-active){background:var(--bg-control);color:var(--text-main)}.seg-tab-active{background:var(--btn-primary-bg);color:var(--btn-primary-text);box-shadow:0 2px 6px var(--btn-primary-shadow)}.theme-switcher{color:var(--text-sub);background:var(--bg-panel);border:1px solid var(--border-color);border-radius:999px;align-items:center;gap:.4rem;padding:.22rem .4rem .22rem .75rem;font-size:.82rem;font-weight:600;display:flex}.theme-switcher select{background:var(--bg-control);color:var(--text-main);border:1px solid var(--border-color);cursor:pointer;border-radius:999px;padding:.2rem .55rem;font-size:.8rem;font-weight:600}.toolbar-card{background:var(--bg-panel);border:1px solid var(--border-color);border-radius:12px;flex-direction:column;gap:.6rem;margin:.65rem 0;padding:.75rem .9rem;display:flex;box-shadow:0 2px 8px #0000000a}.toolbar-row{flex-wrap:wrap;align-items:center;gap:.6rem .85rem;display:flex}.toolbar-primary{border-bottom:1px solid var(--border-color);justify-content:space-between;padding-bottom:.55rem}.toolbar-advanced{border-top:1px dashed var(--border-color);padding-top:.5rem}.file-group{align-items:center;gap:.5rem;display:flex}.file-name-chip{text-overflow:ellipsis;white-space:nowrap;max-width:200px;color:var(--text-sub);background:var(--bg-control);border:1px solid var(--border-color);border-radius:999px;padding:.2rem .65rem;font-size:.78rem;font-weight:600;overflow:hidden}.transport-buttons{flex-wrap:wrap;align-items:center;gap:.5rem;margin-left:auto;display:flex}.volume-control{background:var(--bg-panel-subtle);border:1px solid var(--border-color);border-radius:999px;align-items:center;gap:.35rem;margin-right:.25rem;padding:.2rem .65rem .2rem .35rem;display:inline-flex}.btn-icon{color:var(--text-main);cursor:pointer;box-shadow:none;background:0 0;border:none;border-radius:999px;padding:.15rem .35rem;font-size:.95rem;line-height:1}.btn-icon:hover:not(:disabled){background:var(--bg-control)}.volume-range{width:84px}.btn-play{box-shadow:0 2px 8px var(--btn-primary-shadow);padding:.45rem 1.15rem;font-weight:700}.btn-open{box-shadow:0 2px 8px var(--btn-primary-shadow);font-weight:700}.control-group{background:var(--bg-panel-subtle);border:1px solid var(--border-color);border-radius:10px;flex-wrap:wrap;align-items:center;gap:.45rem .6rem;padding:.32rem .65rem;display:inline-flex}.assist-group{margin-left:auto}.group-divider{background:var(--border-color);width:1px;height:18px}.toolbar-label{color:var(--text-main);align-items:center;gap:.35rem;font-size:.82rem;font-weight:600;display:inline-flex}.toolbar-card input[type=number]{background:var(--bg-panel);width:3.8rem;color:var(--text-main);border:1px solid var(--border-color);border-radius:6px;padding:.22rem .4rem;font-size:.82rem;font-weight:600}.toolbar-card select{background:var(--bg-panel);color:var(--text-main);border:1px solid var(--border-color);cursor:pointer;border-radius:6px;padding:.22rem .45rem;font-size:.82rem;font-weight:500}.toolbar-card select.track-status-playable{color:var(--track-playable);border-color:var(--track-playable-border);font-weight:700}.toolbar-card select.track-status-out-of-range{color:var(--track-warn);border-color:var(--track-warn-border);font-weight:700}.toolbar-card select.track-status-empty{color:var(--track-empty)}.toolbar-card select option.track-option-playable{color:var(--track-playable);background:var(--option-bg);font-weight:600}.toolbar-card select option.track-option-out-of-range{color:var(--track-warn);background:var(--option-bg)}.toolbar-card select option.track-option-empty{color:var(--track-empty);background:var(--option-empty-bg)}.styled-range{accent-color:var(--accent-color);cursor:pointer}.rate-badge{font-variant-numeric:tabular-nums;color:var(--text-sub);text-align:right;min-width:2.6rem;font-size:.78rem;font-weight:700}.speed-presets{gap:.25rem;display:inline-flex}.chip-btn{background:var(--bg-panel);color:var(--text-sub);border:1px solid var(--border-color);cursor:pointer;border-radius:999px;padding:.16rem .5rem;font-size:.73rem;font-weight:600}.chip-btn:hover:not(:disabled){background:var(--btn-secondary-hover);color:var(--text-main)}.chip-btn-active{background:var(--toggle-active-bg);border-color:var(--toggle-active-border);color:var(--toggle-active-text)}.pill-toggle{background:var(--bg-panel);color:var(--text-sub);border:1px solid var(--border-color);cursor:pointer;border-radius:999px;padding:.28rem .7rem;font-size:.79rem;font-weight:600;transition:all .12s}.pill-toggle:hover:not(:disabled){background:var(--btn-secondary-hover);color:var(--text-main)}.pill-toggle-active{font-weight:700;background:var(--toggle-active-bg)!important;border-color:var(--toggle-active-border)!important;color:var(--toggle-active-text)!important}button{background:var(--btn-primary-bg);color:var(--btn-primary-text);cursor:pointer;border:none;border-radius:8px;padding:.4rem .9rem;font-size:.84rem;font-weight:600;transition:filter .12s,transform 60ms}button:hover:not(:disabled){filter:brightness(1.04)}button:active:not(:disabled){transform:translateY(1px)}button:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}.btn-secondary{background:var(--btn-secondary-bg);color:var(--btn-secondary-text);border:1px solid var(--btn-secondary-border);box-shadow:none}.btn-secondary:hover:not(:disabled){background:var(--btn-secondary-hover)}.btn-small{border-radius:7px;padding:.26rem .65rem;font-size:.78rem}.seek-container{background:var(--bg-panel);border:1px solid var(--border-color);border-radius:12px;flex-wrap:wrap;align-items:center;gap:.65rem 1rem;margin:0 0 .65rem;padding:.55rem .85rem;display:flex;box-shadow:0 1px 4px #00000008}.seek-bar{flex:1;align-items:center;gap:.65rem;min-width:240px;display:flex}.seek-range{flex:1;min-width:120px}.seek-time{font-variant-numeric:tabular-nums;color:var(--text-sub);min-width:2.8rem;font-size:.8rem;font-weight:600}.loop-controls{flex-wrap:wrap;align-items:center;gap:.45rem;font-size:.8rem;display:flex}.loop-controls label.loop-delay-label{color:var(--text-sub);align-items:center;gap:.28rem;font-weight:600;display:inline-flex}.loop-delay-input{background:var(--bg-control);width:3.3rem;color:var(--text-main);border:1px solid var(--border-color);border-radius:6px;padding:.2rem .35rem;font-size:.8rem;font-weight:600}.status-strip{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.5rem 1rem;margin:.25rem 0 .5rem;display:flex}.status-badges{flex-wrap:wrap;align-items:center;gap:.4rem;display:flex}.status-chip{color:var(--text-sub);background:var(--bg-panel);border:1px solid var(--border-color);border-radius:999px;align-items:center;gap:.25rem;padding:.2rem .65rem;font-size:.76rem;display:inline-flex}.thumb-legend{color:var(--text-sub);background:var(--bg-panel);border:1px solid var(--border-color);border-radius:999px;align-items:center;gap:.7rem;padding:.2rem .75rem;font-size:.75rem;font-weight:600;display:inline-flex}.legend-item{align-items:center;gap:.3rem;display:inline-flex}.legend-dot{border-radius:50%;width:9px;height:9px;display:inline-block}.legend-dot-left{background:var(--note-left-top);border:1px solid var(--note-left-stroke)}.legend-dot-center{background:var(--note-center-top);border:1px solid var(--note-center-stroke)}.legend-dot-right{background:var(--note-right-top);border:1px solid var(--note-right-stroke)}.error{color:var(--status-error);background:#e11d4814;border:1px solid #e11d484d;border-radius:8px;margin:.5rem 0;padding:.45rem .75rem;font-size:.85rem;font-weight:600}.warn{color:var(--status-warn);background:#f59e0b1a;border:1px solid #f59e0b59;border-radius:8px;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.6rem;margin:.45rem 0;padding:.4rem .75rem;font-size:.84rem;font-weight:600;display:flex}.main-view{position:relative}.playback-overlay-badge{z-index:20;pointer-events:none;background:var(--banner-bg);border:1px solid var(--banner-border);color:var(--banner-text);font-variant-numeric:tabular-nums;white-space:nowrap;border-radius:999px;padding:.38rem 1rem;font-size:.88rem;position:absolute;top:14px;left:50%;transform:translate(-50%);box-shadow:0 4px 14px #00000026}.empty-guide-overlay{z-index:15;pointer-events:none;width:min(440px,88vw);position:absolute;top:36px;left:50%;transform:translate(-50%)}.empty-guide-card{pointer-events:auto;text-align:center;background:var(--bg-panel);border:1px solid var(--border-strong);border-radius:16px;padding:1.35rem 1.5rem;box-shadow:0 12px 32px #0000001f}.empty-guide-icon{margin-bottom:.4rem;font-size:2rem;line-height:1}.empty-guide-card h2{color:var(--text-main);margin:0 0 .45rem;font-size:1.02rem}.empty-guide-card p{color:var(--text-sub);margin:0 0 1rem;font-size:.82rem;line-height:1.55}.empty-guide-card code{background:var(--bg-control);border:1px solid var(--border-color);border-radius:4px;padding:.05rem .3rem;font-size:.78rem}.dev-playback-debug{color:var(--text-sub);background:var(--bg-panel);border:1px solid var(--border-color);border-radius:8px;flex-wrap:wrap;align-items:center;gap:.5rem 1rem;margin:0 0 .6rem;padding:.4rem .65rem;font-family:ui-monospace,monospace;font-size:.72rem;display:flex}.dev-playback-debug>span:first-child{color:var(--track-playable);font-weight:700}.hint-tip{position:relative}.floating-hint-tip{white-space:normal;text-align:left;width:max-content;max-width:min(320px,88vw);color:var(--tip-text);background:var(--tip-bg);border:1px solid var(--tip-border);pointer-events:none;z-index:99999;border-radius:10px;padding:.45rem .8rem;font-size:.74rem;font-weight:500;line-height:1.45;animation:.12s ease-out hint-fade-in;position:fixed;transform:translate(-50%);box-shadow:0 8px 24px #00000047}@keyframes hint-fade-in{0%{opacity:0;transform:translate(-50%)translateY(-4px)}to{opacity:1;transform:translate(-50%)translateY(0)}}.falling-wrap{flex-direction:column;align-items:center;margin:.5rem 0;display:flex}.falling-svg{background:var(--canvas-bg);border:1px solid var(--border-strong);border-bottom:none;border-radius:12px 12px 0 0;display:block;box-shadow:0 4px 16px #0000000d}.falling-lane-center-guide{fill:#f59e0b0d}.falling-lane-marked-guide{fill:#6366f10a}.falling-lane-active-bg{fill:var(--lane-active-bg)}.falling-vline{stroke:var(--grid-vline);stroke-width:1px}.falling-hline{stroke:var(--grid-hline);stroke-width:1px;stroke-dasharray:4 4}.falling-barline{stroke:var(--grid-barline);stroke-width:1.5px}.falling-bar-label{fill:var(--text-muted);-webkit-user-select:none;user-select:none;font-family:ui-monospace,monospace;font-size:10px}.falling-hitline{stroke:var(--hitline-color);stroke-width:3px}.falling-hit-dot{fill:var(--bg-panel);stroke:var(--hitline-color);stroke-width:2px;transition:r 80ms,fill 80ms}.falling-hit-dot-active{fill:#fde047;stroke:var(--note-active-stroke);filter:drop-shadow(0 0 6px var(--note-active-glow))}.falling-note{fill:url(#note-grad-center);stroke:var(--note-center-stroke);stroke-width:1.2px;transition:filter 60ms}.falling-note-left{fill:url(#note-grad-left);stroke:var(--note-left-stroke)}.falling-note-center{fill:url(#note-grad-center);stroke:var(--note-center-stroke)}.falling-note-right{fill:url(#note-grad-right);stroke:var(--note-right-stroke)}.falling-note-active{fill:url(#note-grad-active);stroke:var(--note-active-stroke);stroke-width:2px;filter:drop-shadow(0 0 8px var(--note-active-glow))}.falling-note-shine{fill:#ffffff47;pointer-events:none}.falling-note-text{fill:var(--note-text);pointer-events:none;text-shadow:0 1px 2px #00000040;font-size:11.5px;font-weight:800}.kalimba-bridge{background:var(--bridge-bg);border-left:1px solid var(--border-strong);border-right:1px solid var(--border-strong);box-sizing:border-box;align-items:flex-end;height:12px;display:flex}.kalimba-bridge-bar{background:var(--bridge-bar);width:100%;height:4px;box-shadow:0 1px 3px #00000040}.falling-footer{background:var(--footer-bg);border:1px solid var(--border-strong);box-sizing:border-box;border-top:none;border-radius:0 0 12px 12px;flex-direction:row;justify-content:center;align-items:flex-start;height:112px;padding:0 4px 8px;display:flex;box-shadow:0 6px 18px #0000000f}.falling-lane-slot{box-sizing:border-box;justify-content:center;align-items:flex-start;height:100%;padding:0 2px;display:flex}.falling-lane-foot{border:1px solid var(--tine-border);box-sizing:border-box;background:var(--tine-bg-odd);width:100%;color:var(--tine-text);cursor:pointer;border-top:none;border-radius:0 0 999px 999px;flex-direction:column;justify-content:space-between;align-items:center;padding:4px 0 8px;transition:transform 70ms,box-shadow 80ms,background 80ms;display:flex;box-shadow:0 3px 6px #0000001f,inset 0 -2px 4px #0000000f}.falling-lane-slot:nth-child(2n) .falling-lane-foot{background:var(--tine-bg-even)}.falling-lane-foot-marked,.falling-lane-slot:nth-child(2n) .falling-lane-foot-marked{background:var(--tine-bg-marked)}.falling-lane-foot-center,.falling-lane-slot:nth-child(2n) .falling-lane-foot-center{background:var(--tine-bg-center);border-color:#f59e0b}.falling-lane-foot:hover{transform:translateY(2px);background:var(--tine-hover)!important}.falling-lane-foot:active{transform:translateY(4px)}.falling-lane-foot-active,.falling-lane-slot:nth-child(2n) .falling-lane-foot-active{box-shadow:0 0 14px var(--tine-active-glow), 0 2px 6px #0003;border-color:#0000;transform:translateY(3px);background:var(--tine-active-bg)!important}.tine-rivet{background:#94a3b88c;border-radius:50%;flex-shrink:0;width:5px;height:5px;box-shadow:inset 0 1px 1px #0000004d}.tine-label-stack{flex-direction:column;justify-content:flex-end;align-items:center;display:flex}.falling-dots{color:var(--tine-dot);letter-spacing:-1px;font-size:7px;line-height:.72}.falling-lane-foot-active .falling-dots{color:var(--tine-active-dot)}.falling-jp{color:var(--tine-text);font-size:11.5px;font-weight:800;line-height:1.1}.falling-lane-foot-active .falling-jp{color:var(--tine-active-text)}.falling-lab{color:var(--tine-subtext);margin-top:1px;font-size:8.5px;font-weight:600}.falling-lane-foot-active .falling-lab{color:var(--tine-active-subtext)}.staff-panel{flex-direction:column;align-items:center;margin:.5rem 0;display:flex}.staff-kalimba-header{background:var(--footer-bg);border:1px solid var(--border-strong);box-sizing:border-box;border-bottom:none;border-radius:12px 12px 0 0;width:100%;max-width:960px;padding:0 12px 10px}.staff-bridge-bar{background:var(--bridge-bg);border-bottom:2px solid #94a3b8;border-radius:11px 11px 0 0;height:6px;margin:0 -12px 2px}.pitch-row{flex-wrap:nowrap;justify-content:center;align-items:flex-start;gap:4px;min-height:84px;display:flex}.pitch-btn{border:1px solid var(--tine-border);background:var(--tine-bg-odd);min-width:28px;max-width:44px;color:var(--tine-text);cursor:pointer;border-top:none;border-radius:0 0 999px 999px;flex-direction:column;flex:1;justify-content:flex-end;align-items:center;padding:4px 2px 7px;font-size:.72rem;transition:transform 70ms,background 80ms,box-shadow 80ms;display:flex;box-shadow:0 2px 5px #0000001a}.pitch-btn:nth-child(2n){background:var(--tine-bg-even)}.pitch-btn-marked,.pitch-btn-marked:nth-child(2n){background:var(--tine-bg-marked)}.pitch-btn-center,.pitch-btn-center:nth-child(2n){background:var(--tine-bg-center);border-color:#f59e0b}.pitch-btn:hover{background:var(--tine-hover);transform:translateY(2px)}.pitch-btn:active{transform:translateY(4px)}.pitch-btn-active,.pitch-btn-active:nth-child(2n){box-shadow:0 0 12px var(--tine-active-glow);background:var(--tine-active-bg);border-color:#0000;transform:translateY(3px)}.pitch-jp{color:var(--tine-dot);font-size:.78rem;font-weight:800;line-height:1.1}.pitch-btn-active .pitch-jp{color:var(--tine-active-text)}.pitch-lab{color:var(--tine-subtext);margin-top:2px;font-size:.65rem;font-weight:600}.pitch-btn-active .pitch-lab{color:var(--tine-active-subtext)}.staff-viewport{background:var(--canvas-bg);border:1px solid var(--border-strong);box-sizing:border-box;border-radius:0 0 12px 12px;justify-content:center;width:100%;max-width:960px;display:flex;overflow:auto hidden;box-shadow:0 6px 18px #0000000f}.staff-svg{width:100%;max-width:960px;height:260px;display:block}.staff-line{stroke:var(--staff-line)}.staff-ledger-line{stroke:var(--staff-ledger)}.staff-beatline{stroke:var(--grid-hline);stroke-width:1px;stroke-dasharray:3 3}.staff-barline{stroke:var(--grid-barline);stroke-width:1.4px}.staff-bar-number{fill:var(--text-muted);font-family:ui-monospace,monospace;font-size:10px}.staff-playhead{fill:var(--staff-playhead)}.staff-note{fill:url(#staff-grad-center);stroke:var(--note-center-stroke);transition:filter 50ms}.staff-note-left{fill:url(#staff-grad-left);stroke:var(--note-left-stroke)}.staff-note-center{fill:url(#staff-grad-center);stroke:var(--note-center-stroke)}.staff-note-right{fill:url(#staff-grad-right);stroke:var(--note-right-stroke)}.staff-note-active{fill:url(#staff-grad-active);stroke:var(--note-active-stroke);filter:drop-shadow(0 0 6px var(--note-active-glow))}.staff-note-label{fill:var(--note-text);pointer-events:none;text-shadow:0 1px 2px #00000040;font-size:9.5px;font-weight:800}.staff-accidental{fill:var(--staff-accidental);font-size:13px;font-weight:700}.staff-clef{fill:var(--staff-clef);-webkit-user-select:none;user-select:none;font-size:56px}