.debug-panel{padding:12px 16px 16px}.debug-header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;display:flex}.debug-header h2{margin:0;font-size:1rem}.debug-actions{gap:6px;display:flex}.debug-groups{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px;margin:12px 0;display:grid}.debug-group{border:1px solid var(--line);border-radius:6px;min-width:0;margin:0;padding:8px 12px 10px}.debug-group legend{color:var(--ink-soft);text-transform:uppercase;letter-spacing:.04em;padding:0 4px;font-size:.8rem;font-weight:600}.debug-slider{grid-template-columns:minmax(110px,1fr) minmax(80px,1.2fr) 3.2em;align-items:center;gap:8px;padding:2px 0;font-size:.85rem;display:grid}.debug-slider input{width:100%;accent-color:var(--accent)}.debug-slider output{text-align:right;font-variant-numeric:tabular-nums}.debug-changed .debug-label,.debug-changed output{color:var(--accent);font-weight:600}.debug-empty{color:var(--ink-soft);font-size:.9rem}.debug-table-wrap{overflow-x:auto}.debug-table{border-collapse:collapse;font-variant-numeric:tabular-nums;white-space:nowrap;font-size:.8rem}.debug-table th,.debug-table td{text-align:right;border-bottom:1px solid var(--line);padding:3px 8px}.debug-table th{background:var(--panel);color:var(--ink-soft);font-weight:600;position:sticky;top:0}.debug-table td:nth-child(-n+4),.debug-table th:nth-child(-n+4){text-align:left}.debug-key{font-family:ui-monospace,monospace}.debug-sum{background:var(--accent-soft);font-weight:600}.debug-table tfoot td{border-bottom:none;font-weight:600}.chord-input{z-index:5;pointer-events:none;flex-direction:column;align-items:center;gap:4px;display:flex;position:absolute;transform:translate(-50%)}.chord-input__field{pointer-events:auto;text-align:center;width:7.5em;color:var(--ink);background:var(--panel,#fff);border:1.5px solid var(--accent);box-shadow:var(--shadow);border-radius:6px;outline:none;padding:3px 8px;font-size:15px;font-weight:600}.chord-input__field:focus{box-shadow:0 0 0 3px var(--accent-soft), var(--shadow)}.chord-input__field.is-invalid{border-color:var(--error);color:var(--error)}.chord-input__field.is-invalid:focus{box-shadow:0 0 0 3px var(--error-soft), var(--shadow)}.chord-input__hint,.chord-input__error{text-align:center;background:var(--panel,#fff);width:max-content;max-width:220px;box-shadow:var(--shadow);border-radius:6px;padding:3px 8px;font-size:12px;line-height:1.35}.chord-input__hint{color:var(--ink-soft)}.chord-input__error{color:var(--error);background:var(--error-soft);border:1px solid var(--error)}.staff-editor{border-radius:var(--radius);outline:none;width:max-content;position:relative}.staff-editor:focus-visible{box-shadow:inset 0 0 0 2px var(--accent-soft)}.staff-svg{-webkit-user-select:none;user-select:none;touch-action:manipulation;display:block}.staff-svg.is-placing{cursor:crosshair}.staff-svg.is-pointing{cursor:pointer}.staff-col--hover{fill:var(--ink);opacity:.045}.staff-col--selected{fill:var(--accent-soft)}.staff-col--error{fill:var(--error-soft)}.staff-scroll-target{fill:none;pointer-events:none}.staff-line{stroke:var(--staff-line);stroke-width:1px;shape-rendering:crispedges}.ledger-line{stroke:var(--staff-line);stroke-width:1.3px;shape-rendering:crispedges}.clef__stroke{fill:none;stroke:var(--ink);stroke-width:2.3px;stroke-linecap:round;stroke-linejoin:round}.clef__dot,.notehead{fill:var(--ink)}.accidental__thin,.accidental__bowl{fill:none;stroke:var(--ink);stroke-width:1.2px;stroke-linecap:round}.accidental__bowl{stroke-width:1.6px}.accidental__thick{fill:none;stroke:var(--ink);stroke-width:2.6px}.accidental__fill{fill:var(--ink)}.staff-note.is-selected .notehead,.staff-note.is-selected .accidental__fill{fill:var(--selected)}.staff-note.is-selected :is(.accidental__thin,.accidental__bowl,.accidental__thick){stroke:var(--selected)}.staff-note.is-warning .notehead,.staff-note.is-warning .accidental__fill{fill:var(--warning)}.staff-note.is-warning :is(.accidental__thin,.accidental__bowl,.accidental__thick){stroke:var(--warning)}.staff-note.is-error .notehead,.staff-note.is-error .accidental__fill,.staff-note.is-error .invalid-pitch{fill:var(--error)}.staff-note.is-error :is(.accidental__thin,.accidental__bowl,.accidental__thick){stroke:var(--error)}.staff-note.is-selected:is(.is-warning,.is-error) .notehead{stroke:var(--selected);stroke-width:1.5px}.invalid-pitch{fill:var(--warning);font-size:18px;font-weight:700}.ghost-note{opacity:.45}.ghost-note .notehead,.ghost-note .accidental__fill{fill:var(--accent)}.ghost-note :is(.accidental__thin,.accidental__bowl,.accidental__thick,.ledger-line){stroke:var(--accent)}.ghost-label{fill:var(--accent);letter-spacing:.02em;font-size:10px;font-weight:600}.insert-caret{stroke:var(--accent);stroke-width:1.5px;stroke-dasharray:3 3;opacity:.7;pointer-events:none}.chord-symbol{fill:var(--ink);cursor:pointer;font-size:15px;font-weight:600}.chord-symbol:hover{fill:var(--accent)}.chord-symbol--add{fill:var(--ink-soft);opacity:.7;font-size:12px;font-weight:500}.chord-symbol--add:hover{opacity:1}.chord-symbol--long{font-size:13px}.chord-symbol--xlong{letter-spacing:-.02em;font-size:11px}.chord-diagram{display:block}.chord-diagram .cd-fret{stroke:var(--line);stroke-width:1px}.chord-diagram .cd-string{stroke:var(--ink-soft);stroke-width:1px}.chord-diagram .cd-nut{stroke:var(--ink);stroke-linecap:round}.chord-diagram .cd-position{fill:var(--ink-soft);font-variant-numeric:tabular-nums;font-weight:600}.chord-diagram .cd-barre,.chord-diagram .cd-dot{fill:var(--ink)}.chord-diagram .cd-dot--melody{fill:var(--melody);stroke:var(--panel);stroke-width:1px}.chord-diagram .cd-open{fill:none;stroke:var(--ink-soft);stroke-width:1.1px}.chord-diagram .cd-open--melody{fill:var(--melody);fill-opacity:.18;stroke:var(--melody);stroke-width:1.6px}.chord-diagram .cd-muted{stroke:var(--ink-soft);stroke-width:1.1px;stroke-linecap:round}.chord-diagram .cd-name{fill:var(--ink-soft)}.chord-diagram .cd-name--melody{fill:var(--melody);font-weight:700}.alt-popover{--arrow-x:50%;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);width:max-content;box-shadow:var(--shadow);z-index:5;outline:none;margin-top:10px;padding:10px 12px 12px;position:relative}.alt-popover:focus-visible{border-color:var(--accent)}.alt-popover:before{content:"";top:-6px;left:calc(var(--arrow-x) - 5px);background:var(--panel);border-top:1px solid var(--line);border-left:1px solid var(--line);width:10px;height:10px;position:absolute;transform:rotate(45deg)}.alt-popover__header{justify-content:space-between;align-items:center;gap:16px;margin-bottom:6px;display:flex}.alt-popover__title{color:var(--ink);align-items:center;gap:8px;margin:0;font-size:13px;font-weight:600;display:flex}.alt-popover__badge{color:var(--accent);background:var(--accent-soft);border-radius:999px;padding:1px 8px;font-size:11px;font-weight:600}.alt-popover__close{color:var(--ink-soft);cursor:pointer;background:0 0;border:none;border-radius:6px;width:26px;height:26px;font-size:18px;line-height:1}.alt-popover__close:hover{background:var(--accent-soft);color:var(--ink)}.alt-popover__warnings{color:var(--warning);background:var(--warning-soft);border-radius:6px;margin:0 0 8px;padding:6px 10px;font-size:12px;list-style:none}.alt-popover__options{flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none;display:flex}.alt-option{color:var(--ink);cursor:pointer;background:0 0;border:1px solid #0000;border-radius:6px;flex-direction:column;align-items:center;gap:2px;min-width:100px;padding:6px 4px;display:flex}.alt-option:hover{background:var(--accent-soft)}.alt-option:focus-visible{outline:2px solid var(--accent);outline-offset:1px}.alt-option--current{border-color:var(--accent);background:color-mix(in srgb, var(--accent-soft) 55%, transparent)}.alt-option__key{color:var(--ink-soft);font-variant-numeric:tabular-nums;letter-spacing:.04em;font-size:11px}.alt-option__cost{font-variant-numeric:tabular-nums;font-size:13px;font-weight:600}.alt-option__cost--current{color:var(--accent);text-transform:uppercase;letter-spacing:.05em;font-size:12px;font-weight:600}.alt-option__cost--better{color:#1d7a46}.alt-option__note{color:var(--ink-soft);font-size:11px}.alt-popover__footer{border-top:1px solid var(--line);align-items:center;gap:10px;margin-top:10px;padding-top:8px;display:flex}.alt-popover__unpin{border:1px solid var(--line);background:var(--panel);color:var(--ink);cursor:pointer;border-radius:6px;padding:3px 12px;font-size:13px}.alt-popover__unpin:hover{border-color:var(--accent);color:var(--accent)}.alt-popover__hint{color:var(--ink-soft);font-size:12px}.arrangement-view{--av-hover-bg:color-mix(in srgb, var(--accent-soft) 60%, var(--panel));--av-open-bg:var(--accent-soft);border-top:1px solid var(--line);padding-bottom:4px;position:relative}.av-stale-note{width:max-content;color:var(--warning);background:var(--warning-soft);border:1px solid color-mix(in srgb, var(--warning) 35%, transparent);border-radius:999px;margin:8px 0 0 12px;padding:3px 10px;font-size:12px;position:sticky;left:12px}.arrangement-view.is-stale .av-body{opacity:.45;filter:grayscale(.4)}.av-svg{font-variant-numeric:tabular-nums;-webkit-user-select:none;user-select:none;display:block;overflow:visible}.av-col{outline:none}.av-col.is-active{cursor:pointer}.av-col-bg{fill:#0000;stroke:#0000;stroke-width:1.25px}.av-col.is-hover .av-col-bg{fill:var(--av-hover-bg)}.av-col.is-open .av-col-bg{fill:var(--av-open-bg);stroke:var(--accent)}.av-col:focus-visible .av-col-bg{stroke:var(--accent);stroke-dasharray:3 2}.av-content{pointer-events:none}.av-chord-label{fill:var(--ink);font-size:12px;font-weight:650}.av-chord-label.is-fallback{fill:var(--ink-soft);font-weight:500;text-decoration:line-through}.av-string-name{fill:var(--ink-soft);font-size:12px;font-weight:600}.av-tab-line{stroke:var(--line);stroke-width:1px}.av-tab-bar{stroke:var(--ink-soft);stroke-width:1.25px}.av-tab-lines{pointer-events:none}.av-knockout{fill:var(--panel)}.av-col-content.is-hover .av-knockout{fill:var(--av-hover-bg)}.av-col-content.is-open .av-knockout{fill:var(--av-open-bg)}.av-fret{fill:var(--ink);font-size:13px;font-weight:450}.av-fret.is-melody{fill:var(--melody);font-weight:750}.av-nct-mark{stroke:var(--melody);stroke-width:1.2px;stroke-dasharray:1.5 1.8;stroke-linecap:round}.av-warning path{fill:var(--warning-soft);stroke:var(--warning);stroke-width:1.3px}.av-warning line{stroke:var(--warning);stroke-width:1.5px;stroke-linecap:round}.av-warning circle{fill:var(--warning)}.av-pin{outline:none}.av-pin-hit{fill:#0000;stroke:#0000}.av-pin rect,.av-pin path{fill:var(--accent)}.av-pin line{stroke:var(--accent);stroke-width:1.4px;stroke-linecap:round}.av-pin.is-active{cursor:pointer}.av-pin.is-active:hover .av-pin-hit{fill:var(--accent-soft)}.av-pin.is-active:focus-visible .av-pin-hit{stroke:var(--accent)}.av-popover-slot{padding-bottom:8px;position:relative}.toolbar{flex-wrap:wrap;align-items:center;gap:10px 16px;padding:10px 12px;display:flex}.toolbar-group{gap:2px;display:inline-flex}.toolbar-files{gap:4px}.toolbar-field{color:var(--ink-soft);align-items:center;gap:6px;font-size:.85rem;display:inline-flex}.toolbar-field select{border:1px solid var(--line);background:var(--panel);color:var(--ink);border-radius:6px;padding:4px 6px}.title-input{min-width:160px;max-width:320px;color:var(--ink);background:0 0;border:1px solid #0000;border-radius:6px;flex:200px;padding:5px 8px;font-size:1.05rem;font-weight:600}.title-input:hover{border-color:var(--line)}.title-input:focus{border-color:var(--accent);background:var(--panel);outline:none}.seg,.icon-btn,.text-btn{border:1px solid var(--line);background:var(--panel);min-width:34px;height:32px;color:var(--ink);cursor:pointer;border-radius:6px;padding:0 10px}.seg{border-radius:0;font-size:1.05rem}.seg:first-child{border-radius:6px 0 0 6px}.seg:last-child{border-radius:0 6px 6px 0}.seg+.seg{margin-left:-3px}.seg-on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent);position:relative}.icon-btn{padding:0 8px;font-size:1.1rem}.seg:hover,.icon-btn:hover:not(:disabled),.text-btn:hover{border-color:var(--ink-soft)}.icon-btn:disabled{opacity:.4;cursor:default}.generate-btn{background:var(--accent);color:#fff;cursor:pointer;border:none;border-radius:6px;height:36px;margin-left:auto;padding:0 16px;font-weight:600}.generate-btn:hover:not(:disabled){filter:brightness(1.08)}.generate-btn:disabled{opacity:.5;cursor:default}.generate-stale{box-shadow:0 0 0 3px var(--warning-soft)}@media (width<=640px){.generate-btn{width:100%;margin-left:0}}:root{--bg:#f7f6f2;--panel:#fff;--ink:#1d1f24;--ink-soft:#5c6170;--line:#c9ccd3;--staff-line:#3b3f48;--accent:#2459d6;--accent-soft:#e3ebfc;--selected:#2459d6;--warning:#c27400;--warning-soft:#fff3df;--error:#c62828;--error-soft:#fdecec;--melody:#d1453b;--radius:8px;--shadow:0 6px 24px #14182824;color:var(--ink);background:var(--bg);--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;font-family:system-ui,-apple-system,Segoe UI,sans-serif}*{box-sizing:border-box}body{background:var(--bg);margin:0}button,select,input{font:inherit}.app{flex-direction:column;gap:12px;max-width:1280px;margin:0 auto;padding:16px;display:flex}.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius)}.score-scroll{padding-bottom:8px;overflow:auto visible}.score-content{position:relative}.app-header{flex-wrap:wrap;align-items:baseline;gap:4px 16px;display:flex}.app-header h1{letter-spacing:-.01em;margin:0;font-size:1.35rem}.app-note{color:var(--warning);font-size:.85rem}.score{padding:8px 0 0}.score-hint{color:var(--ink-soft);padding:0 16px 4px;font-size:.85rem}.banner{border-radius:var(--radius);justify-content:space-between;align-items:flex-start;gap:12px;padding:10px 14px;font-size:.9rem;display:flex}.banner ul{margin:6px 0 0;padding-left:20px}.banner-error{background:var(--error-soft);border:1px solid color-mix(in srgb, var(--error) 35%, transparent);color:var(--ink)}.banner-close{color:var(--ink-soft);cursor:pointer;background:0 0;border:none;text-decoration:underline}.link-btn{color:var(--error);cursor:pointer;background:0 0;border:none;padding:0;font-weight:600;text-decoration:underline}.help{color:var(--ink-soft);flex-wrap:wrap;gap:6px 18px;font-size:.8rem;display:flex}.help-debug{color:var(--ink-soft);margin-left:auto}kbd{border:1px solid var(--line);background:var(--panel);text-align:center;border-bottom-width:2px;border-radius:4px;min-width:1.6em;padding:0 4px;font:.75rem ui-monospace,monospace;display:inline-block}