:root{--text:#6b6375;--text-h:#08060d;--bg:#fff;--border:#e5e4e7;--code-bg:#f4f3ec;--accent:#7c3aed;--accent-bg:#7c3aed1f;--accent-border:#7c3aed73;--sans:system-ui, "Segoe UI", Roboto, sans-serif;--mono:ui-monospace, Consolas, monospace;font:16px/145% var(--sans);letter-spacing:.02em;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;color:var(--text);background:var(--bg);text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial;--text:#9ca3af;--text-h:#f3f4f6;--bg:#12121a;--border:#2e303a;--code-bg:#1a1a24;--accent:#a78bfa;--accent-bg:#a78bfa26;--accent-border:#a78bfa73}}#root{box-sizing:border-box;width:100%;max-width:100%;min-height:100svh;margin:0}body{margin:0}h1,h2{font-family:var(--sans);color:var(--text-h);font-weight:600}code{font-family:var(--mono);background:var(--code-bg);border-radius:4px;padding:.1em .35em;font-size:.9em}.app{text-align:left;max-width:1320px;margin:0 auto;padding:1rem 1.25rem 2rem}.app-header h1{letter-spacing:-.02em;margin:0 0 .5rem;font-size:1.75rem}.app-header-bar{flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:.75rem 1rem;display:flex}.app-header-main{flex:1;min-width:min(100%,16rem)}.app-sub{opacity:.85;max-width:52ch;margin:0;font-size:.95rem}.btn-icon{border:1px solid var(--border);background:var(--code-bg);color:var(--text-h);cursor:pointer;border-radius:8px;flex-shrink:0;justify-content:center;align-items:center;padding:.45rem;line-height:0;display:inline-flex}.btn-icon:hover{filter:brightness(1.08)}.app-header-actions{flex-wrap:wrap;flex-shrink:0;align-items:center;gap:.35rem;display:flex}.playlist-file-input-hidden{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.playlist-anchor,.playlist-toggle{position:relative}.playlist-toggle--open{outline:2px solid var(--accent,#6366f1);outline-offset:1px}.playlist-toggle-badge{text-align:center;background:var(--accent-bg,#6366f1d9);min-width:1rem;height:1rem;color:var(--text-h);border:1px solid var(--border);border-radius:999px;padding:0 .2rem;font-size:.65rem;font-weight:700;line-height:1rem;position:absolute;top:-2px;right:-2px}.playlist-popover{z-index:80;border:1px solid var(--border);background:var(--bg,#121212);border-radius:10px;flex-direction:column;width:min(30rem,100vw - 2rem);max-height:min(82vh,34rem);padding:.75rem .9rem;display:flex;position:absolute;top:calc(100% + 6px);right:0;box-shadow:0 12px 36px #00000073}.playlist-popover-head{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.5rem;margin-bottom:.45rem;display:flex}.playlist-popover-actions{flex-wrap:wrap;align-items:center;gap:.35rem;display:flex}.playlist-add-btn{background:var(--accent-bg,#6366f138);border-color:var(--accent-border,#6366f180);border-radius:8px}.playlist-add-btn:hover{filter:brightness(1.12)}.playlist-add-desc{color:var(--text-h);opacity:.92;margin:0 0 .65rem;font-size:.82rem;line-height:1.45}.playlist-plus-mark{font-weight:700}.playlist-popover .playlist-list{flex:1;min-height:0}.playlist-popover-empty{margin:.25rem 0 .5rem;font-size:.88rem}.start-playlist-hero{border:1px solid var(--border);background:var(--code-bg);border-radius:12px;max-width:40rem;margin:1rem 0 1.25rem;padding:1.25rem 1.35rem;box-shadow:0 4px 20px #00000014}.start-playlist-title{letter-spacing:-.02em;margin:0 0 .5rem;font-size:1.35rem;font-weight:600}.start-playlist-body{opacity:.9;max-width:52ch;margin:0;font-size:.95rem;line-height:1.5}.panel-now-playing{align-items:center}.now-playing-line{color:var(--text-h);word-break:break-word;margin:0;font-size:.95rem;line-height:1.45}.now-playing-prefix{opacity:.88;font-weight:600}.now-playing-name{font-weight:500}.now-playing-time{font-variant-numeric:tabular-nums;opacity:.78;font-size:.92em}.settings-modal-backdrop{z-index:1000;background:#0000008c;justify-content:center;align-items:flex-start;padding:1.25rem;display:flex;position:fixed;inset:0;overflow:auto}.settings-modal-panel{border:1px solid var(--border);background:var(--bg,#121212);border-radius:12px;outline:none;flex-direction:column;width:min(100%,42rem);max-height:min(90vh,900px);margin:auto;display:flex;box-shadow:0 12px 40px #00000073}.settings-modal-head{border-bottom:1px solid var(--border);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.5rem 1rem;padding:.85rem 1rem;display:flex}.settings-modal-title{margin:0;font-size:1.2rem;font-weight:600}.settings-modal-close{flex-shrink:0}.settings-modal-body{padding:1rem;overflow:auto}.settings-modal-section{margin-top:0}.settings-modal-body .settings-modal-section+.settings-modal-section,.settings-modal-body .settings-modal-section+.midi-mapping-panel{margin-top:1rem}.settings-modal-hint{max-width:52ch;margin:0;font-size:.9rem}.midi-storage-key{font-size:.85em}.audio-gate{border:1px dashed var(--border);text-align:center;border-radius:8px;margin:1rem 0;padding:1rem}.load-bar{margin:.5rem 0;font-size:.9rem}.panel-midi-files{flex-direction:column;align-items:flex-start}.playlist-toolbar{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.5rem;margin-bottom:.5rem;display:flex}.playlist-title{color:var(--text-h);font-size:.8rem;font-weight:600}.playlist-step{gap:.35rem;display:flex}.playlist-list{flex-direction:column;gap:.35rem;max-height:min(22rem,50vh);margin:0;padding:0;list-style:none;display:flex;overflow:auto}.playlist-item{border-radius:6px;align-items:center;gap:.5rem;padding:.25rem .35rem;display:flex}.playlist-item--current{background:#6366f11f;outline:1px solid #6366f159}.playlist-select{text-align:left;min-width:0;font:inherit;color:var(--text-h);cursor:pointer;text-overflow:ellipsis;white-space:nowrap;background:0 0;border:none;border-radius:4px;flex:1;padding:.25rem .35rem;font-size:.88rem;overflow:hidden}.playlist-select:hover{background:#ffffff0f}.playlist-remove{flex-shrink:0;justify-content:center;align-items:center;padding:.35rem .45rem;font-size:0;line-height:0;display:inline-flex}.playlist-hint{max-width:42ch;margin:.5rem 0 0;font-size:.75rem}.panel{flex-wrap:wrap;align-items:flex-end;gap:.75rem 1.25rem;margin:1rem 0;display:flex}.panel.grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));align-items:end;display:grid}.midi-touch-sensitivity{grid-column:1/-1;max-width:32rem}.midi-touch-sensitivity-row{align-items:center;gap:.75rem;margin-top:.25rem;display:flex}.midi-touch-sensitivity-row input[type=range]{min-width:8rem;max-width:18rem;accent-color:var(--accent);flex:1}.midi-touch-value{font-variant-numeric:tabular-nums;min-width:3.25rem;color:var(--text-h);font-size:.9rem}.midi-touch-hint{margin-top:.2rem;font-size:.78rem;display:block}.panel label{flex-direction:column;gap:.25rem;font-size:.85rem;display:flex}.panel label.check{flex-direction:row;align-items:center;gap:.5rem}.panel input,.panel select{border:1px solid var(--border);background:var(--code-bg);color:var(--text-h);font:inherit;border-radius:6px;padding:.35rem .5rem}.file-label input[type=file]{margin-top:.25rem}.muted{opacity:.75;font-size:.9rem}.transport{align-items:center;gap:.5rem .75rem}.transport-icon-btn{justify-content:center;align-items:center;min-width:2.65rem;padding:.4rem .55rem;line-height:0;display:inline-flex}.transport-icon-btn:disabled{opacity:.42;cursor:not-allowed}.transport-midi-status{margin-left:auto;font-size:.85rem}.loop-panel{align-items:center}.btn{border:1px solid var(--border);background:var(--code-bg);color:var(--text-h);font:inherit;cursor:pointer;border-radius:8px;padding:.45rem .9rem}.btn.primary{background:var(--accent-bg);border-color:var(--accent-border);color:var(--text-h)}.btn:hover{filter:brightness(1.08)}.btn.small{padding:.25rem .55rem;font-size:.8rem}.hint{opacity:.8;margin:.35rem 0 0;font-size:.8rem}.kbd-map{max-width:60ch}.practice-bars{flex-wrap:wrap;align-items:flex-end;gap:.5rem 1rem;margin:.5rem 0;display:flex}.practice-bar-tracks-label{letter-spacing:.04em;text-transform:uppercase;opacity:.75;font-size:.75rem;font-weight:600}.track-dropdown{flex-direction:column;gap:.25rem;min-width:14rem;max-width:min(100%,26rem);display:flex;position:relative}.track-dropdown--empty .track-dropdown-empty{border:1px solid var(--border);background:var(--code-bg);opacity:.75;border-radius:8px;min-height:2.35rem;padding:.4rem .65rem;font-size:.82rem;line-height:1.35;display:block}.track-dropdown-summary-row{text-overflow:ellipsis;white-space:nowrap;display:block;overflow:hidden}.track-dropdown-summary-selected{opacity:.95;font-weight:600}.track-dropdown-summary-sep{opacity:.45}.track-dropdown-summary-focus{color:var(--accent,#a5b4fc);font-weight:500}.track-dropdown-trigger{border:1px solid var(--border);background:var(--code-bg);width:100%;min-height:2.5rem;color:var(--text-h);font:inherit;cursor:pointer;text-align:left;border-radius:8px;justify-content:space-between;align-items:center;gap:.45rem;padding:.45rem .65rem;font-size:.82rem;font-weight:500;line-height:1.25;transition:background .12s,border-color .12s;display:flex}.track-dropdown-trigger:hover{background:#ffffff0a}.track-dropdown-trigger:focus{outline:2px solid var(--accent,#6366f1);outline-offset:1px}.track-dropdown-trigger-text{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;overflow:hidden}.track-dropdown-chevron{opacity:.65;flex-shrink:0;font-size:.55rem;line-height:1;transition:transform .15s}.track-dropdown--open .track-dropdown-chevron{transform:rotate(180deg)}.track-dropdown-panel{z-index:50;border:1px solid var(--border);background:var(--code-bg);border-radius:8px;max-height:min(40vh,240px);padding:.3rem 0;position:absolute;top:calc(100% + 4px);left:0;right:0;overflow-y:auto;box-shadow:0 8px 24px #00000059}.track-dropdown-row{cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;gap:.5rem;padding:.4rem .65rem;font-size:.82rem;line-height:1.35;display:flex}.track-dropdown-row:hover{background:#ffffff0f}.track-dropdown-row input{cursor:pointer;flex-shrink:0}.track-dropdown-row-label{flex-direction:column;flex:1;align-items:flex-start;gap:.1rem;min-width:0;display:flex}.track-dropdown-row-name{font-weight:500}.track-dropdown-row-meta{opacity:.7;align-items:center;gap:.35rem;font-size:.72rem;display:inline-flex}.track-dropdown-row-badge{letter-spacing:.06em;background:var(--accent-bg,#6366f159);color:var(--text-h);border-radius:4px;padding:.1rem .35rem;font-size:.65rem;font-weight:700}.track-dropdown-row--selected{background:#6366f11a}.track-dropdown-row--midi-focus{box-shadow:inset 3px 0 0 var(--accent,#818cf8)}.track-dropdown-row--midi-focus.track-dropdown-row--selected{background:#6366f129}.seg-bar{border:1px solid var(--border);background:var(--code-bg);border-radius:10px;display:inline-flex;overflow:hidden}.seg-btn{color:var(--text-h);opacity:.55;font:inherit;cursor:pointer;white-space:nowrap;background:0 0;border:none;align-items:center;gap:.35rem;padding:.4rem .7rem;font-size:.82rem;font-weight:500;transition:background .12s,opacity .12s;display:inline-flex}.seg-btn+.seg-btn{border-left:1px solid var(--border)}.seg-btn:hover{opacity:.8;background:#ffffff0a}.seg-btn--on{opacity:1;background:var(--accent-bg,#6366f12e);color:var(--text-h)}.seg-btn--on:hover{opacity:1;filter:brightness(1.06)}.seg-label{pointer-events:none}.sheet-section h2{margin:1rem 0 .5rem;font-size:1.1rem}.sheet-section{margin-top:.5rem}.timeline-hint{max-width:62ch}.music-timeline{width:100%}.synthesia-stack{border:1px solid #00000024;border-radius:12px;flex-direction:column;display:flex;overflow:hidden;box-shadow:0 6px 28px #0000001f}.sheet-canvas-wrap{width:100%;line-height:0;position:relative}.sheet-canvas{vertical-align:top;cursor:crosshair;border-bottom:1px solid #0000001f;width:100%;height:auto;display:block}.sheet-loop-overlay{pointer-events:none;z-index:2;position:absolute;inset:0}.sheet-loop-dim{pointer-events:none;background:#0f0f1961;position:absolute;top:0;bottom:0}.sheet-loop-dim--left{left:0}.sheet-loop-dim--right{right:0}.sheet-loop-band{pointer-events:none;box-sizing:border-box;background:#3b82f61f;border-left:2px solid #2563ebd9;border-right:2px solid #2563ebd9;position:absolute;top:0;bottom:0}.sheet-loop-handle{cursor:ew-resize;pointer-events:auto;touch-action:none;background:linear-gradient(90deg,#2563eb26 0%,#2563eb8c 45% 55%,#2563eb26 100%);border:1px solid #1d4ed8f2;border-radius:3px;width:14px;margin-left:-7px;position:absolute;top:0;bottom:0;box-shadow:inset 0 0 0 1px #fff3}.sheet-loop-handle:focus-visible{outline:2px solid var(--accent);outline-offset:1px}.sheet-loop-done{z-index:3;pointer-events:auto;font:inherit;border:1px solid var(--border);background:var(--bg);color:var(--text-h);cursor:pointer;border-radius:6px;padding:.2rem .55rem;font-size:.8rem;position:absolute;top:6px;right:8px;box-shadow:0 1px 4px #0000001f}.sheet-loop-done:hover{background:var(--code-bg)}.waterfall-wrap{line-height:0;position:relative}.waterfall-canvas{vertical-align:top;cursor:pointer;width:100%;height:auto;display:block}.akb{background:linear-gradient(#22222c 0%,#12121a 100%);border-top:3px solid #0a0a0f;padding:0 0 6px}.akb-keys{width:100%;height:102px;position:relative}.akb-key{box-sizing:border-box;border-radius:0 0 4px 4px;min-width:0;position:relative}.akb-w{background:linear-gradient(#f2f2f6 0%,#d4d4de 100%);border:1px solid #00000029;box-shadow:inset 0 1px #fffffff2;height:100%!important}.akb-b{background:linear-gradient(#3d3d4a 0%,#101014 100%);border:1px solid #000000bf;box-shadow:0 3px 8px #0000008c,inset 0 1px #ffffff14}.akb-exp{box-shadow:0 -8px 22px #e8893a6b,inset 0 0 12px #f5a84a59;background:linear-gradient(#fdebd8 0%,#e89550 100%)!important;border-color:#c45f12!important}.akb-user{box-shadow:0 -8px 22px #a855f780,inset 0 0 14px #c084fc66;background:linear-gradient(#ede5fb 0%,#a855f7 100%)!important;border-color:#7c3aed!important}.akb-b.akb-user{background:linear-gradient(#7c3aed 0%,#4c1d95 100%)!important;border-color:#6d28d9!important}.akb-hit{background:linear-gradient(#d1fae5 0%,#34d399 100%)!important;border-color:#059669!important;box-shadow:0 -10px 26px #34d3998c,inset 0 0 14px #a7f3d073!important}.akb-b.akb-hit{background:linear-gradient(#059669 0%,#064e3b 100%)!important;border-color:#047857!important}.akb-fg{color:#1a1a1a;text-shadow:0 0 3px #fff;pointer-events:none;font-size:.65rem;font-weight:700;position:absolute;bottom:3px;left:50%;transform:translate(-50%)}.akb-b .akb-fg{color:#eee;text-shadow:0 0 3px #000}.vk-disclaimer{opacity:.65;margin:.4rem .5rem 0;padding:0 .25rem;font-size:.72rem}.midi-mapping-panel{margin-top:0}.midi-mapping-title{margin:0 0 .35rem;font-size:1.05rem}.midi-mapping-intro{max-width:65ch;margin:0 0 .75rem;font-size:.85rem}.midi-mapping-bindings{flex-direction:column;gap:.5rem;display:flex}.midi-mapping-row{grid-template-columns:minmax(10rem,1fr) 1fr auto;align-items:center;gap:.5rem .75rem;display:grid}.midi-mapping-label{font-size:.88rem}.midi-mapping-value{word-break:break-all;font-size:.78rem}.midi-mapping-actions{flex-wrap:wrap;gap:.5rem;margin:.75rem 0 .5rem;display:flex}.midi-mapping-log{background:var(--code-bg);border:1px solid var(--border);white-space:pre-wrap;border-radius:8px;max-height:12rem;margin:0;padding:.6rem .75rem;font-size:.72rem;line-height:1.35;overflow:auto}