:root{font-family:system-ui,Segoe UI,Roboto,PingFang SC,sans-serif;line-height:1.45;color:#1a1a1a;background:#f0f2f5;color-scheme:light}@media(prefers-color-scheme:dark){:root{color:#e8e8e8;background:#12141a;color-scheme:dark}}*{box-sizing:border-box}body{margin:0}#app{min-height:100dvh;display:flex;flex-direction:column;max-width:1400px;margin:0 auto;padding:12px 16px 20px}.app-header{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin-bottom:12px}.app-header h1{font-size:1.1rem;font-weight:600;margin:0;flex:1 1 auto;min-width:200px}.file-label{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;background:#2f6fed;color:#fff;border-radius:8px;cursor:pointer;font-size:.9rem}.file-label input{position:absolute;width:0;height:0;opacity:0}.status{font-size:.85rem;opacity:.85}.viewer-shell{position:relative;flex:1;display:flex;flex-direction:column;border-radius:12px;border:1px solid rgba(0,0,0,.12);overflow:hidden;min-height:480px;background:#fff}@media(prefers-color-scheme:dark){.viewer-shell{background:#1a1c24;border-color:#ffffff1f}}.toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:10px 12px;background:#2c4a7c;color:#fff}.toolbar button,.toolbar select{font:inherit;color:inherit}.toolbar button{min-width:40px;min-height:36px;padding:0 10px;border:none;border-radius:6px;background:#ffffff26;cursor:pointer}.toolbar button:disabled{opacity:.45;cursor:not-allowed}.toolbar button:not(:disabled):hover{background:#ffffff47}.song-meta{flex:1 1 200px;font-size:.88rem}.song-meta .title{font-weight:600}.position{font-variant-numeric:tabular-nums;font-size:.88rem;min-width:8.5em}.zoom-label,.layout-label{display:inline-flex;align-items:center;gap:6px;font-size:.85rem}.toolbar select{background:#0003;border:none;border-radius:6px;padding:6px 10px;cursor:pointer}.sf-progress{font-size:.8rem;opacity:.9;min-width:3.5em}.viewer-body{display:flex;flex:1;min-height:0}.track-panel{flex:0 0 auto;width:min(220px,36vw);border-right:1px solid rgba(0,0,0,.1);background:#f7f8fa;display:flex;flex-direction:column;max-height:70dvh}@media(prefers-color-scheme:dark){.track-panel{background:#22252f;border-right-color:#ffffff1a}}.track-panel-header{padding:10px 12px;font-size:.78rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;opacity:.7;border-bottom:1px solid rgba(0,0,0,.08)}.track-list{display:flex;flex-direction:column;gap:4px;padding:8px;overflow-y:auto}.track-row{display:block;width:100%;text-align:left;padding:8px 10px;border:none;border-radius:8px;background:transparent;color:inherit;cursor:pointer;font-size:.88rem}.track-row:hover{background:#0000000f}.track-row.active{background:#2f6fed2e;font-weight:600}.viewport{flex:1;overflow:auto;position:relative;padding:12px 16px 24px}.overlay{position:absolute;inset:0;display:none;align-items:flex-start;justify-content:center;padding-top:32px;background:#00000059;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);z-index:5}.overlay.visible{display:flex}.overlay-box{background:#fff;color:#222;padding:16px 20px;border-radius:10px;box-shadow:0 8px 32px #0003}.at-main{width:100%;min-height:160px}.at-note-select-frame{position:absolute;pointer-events:none;box-sizing:border-box;z-index:50;border:2px solid #1a6cff;border-radius:4px;background:#1a6cff1a;box-shadow:0 0 0 1px #fff6 inset,0 2px 8px #1a6cff40;display:none}.at-note-select-frame.is-visible{display:block}@media(prefers-color-scheme:dark){.at-note-select-frame{border-color:#6ca8ff;background:#6ca8ff24;box-shadow:0 0 0 1px #00000059 inset,0 2px 10px #00000059}}.at-cursor-bar{background:#fff20047}.at-cursor-beat{background:#405affbf;width:3px}.at-highlight *{fill:#1a6cff;stroke:#1a6cff}.editor-panel{margin-bottom:12px;border-radius:12px;border:1px solid rgba(0,0,0,.12);background:#fff;overflow:hidden}@media(prefers-color-scheme:dark){.editor-panel{background:#1a1c24;border-color:#ffffff1f}}.editor-summary{cursor:pointer;padding:12px 14px;font-weight:600;font-size:.92rem;list-style:none}.editor-summary::-webkit-details-marker{display:none}.editor-summary:before{content:"▸ ";opacity:.5}.editor-panel[open] .editor-summary:before{content:"▾ "}.editor-inner{padding:0 14px 14px;border-top:1px solid rgba(0,0,0,.08)}.editor-hint{margin:12px 0;font-size:.82rem;opacity:.88;line-height:1.5}.editor-actions{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}.editor-actions button{font:inherit;font-size:.86rem;padding:7px 12px;border-radius:8px;border:1px solid rgba(0,0,0,.15);background:#0000000a;color:inherit;cursor:pointer}@media(prefers-color-scheme:dark){.editor-actions button{border-color:#ffffff26;background:#ffffff0f}}.editor-actions button:hover{background:#2f6fed1f}.editor-actions .btn-apply{background:#2f6fed;color:#fff;border-color:transparent}.editor-actions .btn-apply:hover{background:#255dcb}.alphatex-editor{display:block;width:100%;min-height:220px;max-height:45dvh;resize:vertical;font-family:ui-monospace,Cascadia Code,Menlo,monospace;font-size:13px;line-height:1.4;padding:10px 12px;border-radius:8px;border:1px solid rgba(0,0,0,.18);background:#00000005;color:inherit;tab-size:2}@media(prefers-color-scheme:dark){.alphatex-editor{border-color:#ffffff2e;background:#00000040}}.ve-panel .ve-selection{margin:0 0 10px;font-size:.88rem;font-weight:500;color:var(--text-h, #111)}@media(prefers-color-scheme:dark){.ve-panel .ve-selection{color:#e8e8e8}}.ve-tools{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;margin-bottom:12px}.ve-field{display:inline-flex;align-items:center;gap:8px;font-size:.86rem}.ve-field select,.ve-field input{font:inherit;min-width:5.5rem;padding:6px 8px;border-radius:6px;border:1px solid rgba(0,0,0,.18);background:#00000008;color:inherit}@media(prefers-color-scheme:dark){.ve-field select,.ve-field input{border-color:#fff3;background:#0000004d}}.ve-step{min-width:36px;min-height:36px;font-size:1.1rem;font:inherit;border-radius:8px;border:1px solid rgba(0,0,0,.15);background:#0000000d;color:inherit;cursor:pointer}.ve-step:disabled{opacity:.4;cursor:not-allowed}.ve-fret-pad-wrap{display:flex;flex-direction:column;gap:6px}.ve-fret-pad-label{font-size:.78rem;opacity:.75}.ve-fret-pad{display:flex;flex-wrap:wrap;gap:6px}.ve-fret-btn{min-width:2.25rem;min-height:2.25rem;font:inherit;font-size:.85rem;border-radius:6px;border:1px solid rgba(0,0,0,.12);background:#2f6fed14;color:inherit;cursor:pointer}.ve-fret-btn:hover{background:#2f6fed33}@media(prefers-color-scheme:dark){.ve-fret-btn{border-color:#ffffff26;background:#2f6fed33}}.theory-panel .theory-intro{margin-top:8px}.theory-grid{display:grid;gap:16px}@media(min-width:720px){.theory-grid{grid-template-columns:1fr 1fr;align-items:start}}.theory-section{border-radius:10px;padding:12px 14px;background:#00000008;border:1px solid rgba(0,0,0,.06)}@media(prefers-color-scheme:dark){.theory-section{background:#ffffff0a;border-color:#ffffff14}}.theory-h{margin:0 0 10px;font-size:.88rem;font-weight:600}.theory-row{display:flex;flex-wrap:wrap;gap:10px 16px;margin-bottom:10px;align-items:flex-end}.theory-label{display:inline-flex;flex-direction:column;gap:6px;font-size:.82rem;min-width:min(100%,200px)}.theory-tuplet .tuplet-inputs{margin-top:4px}.theory-control{font:inherit;font-size:.86rem;padding:6px 8px;border-radius:6px;border:1px solid rgba(0,0,0,.18);background:#00000008;color:inherit;max-width:100%}.theory-control.theory-num{width:3.25rem;min-width:3rem}@media(prefers-color-scheme:dark){.theory-control{border-color:#fff3;background:#0000004d}}.tuplet-inputs{display:inline-flex;align-items:center;gap:6px}.theory-section .btn-apply{margin-top:6px;font:inherit;font-size:.86rem;padding:8px 14px;border-radius:8px;border:none;background:#2f6fed;color:#fff;cursor:pointer}.theory-section .btn-apply:disabled{opacity:.45;cursor:not-allowed}.theory-section .btn-apply:not(:disabled):hover{background:#255dcb}