:root{--color-bg:#fff;--color-bg-soft:#fafafa;--color-bg-muted:#e7e7e7;--color-bg-elevated:#fff;--color-text:#15181d;--color-text-muted:#425163;--color-text-subtle:#748396;--color-border:#e3e3e3;--color-highlight:#5b8bed;--color-glow:#7d9ddf33;--color-focus-ring:#222a342e;--btn-primary-bg:#222a34;--btn-primary-fg:#fff;--btn-primary-hover:#425163;--btn-secondary-bg:#e7e7e7;--btn-secondary-fg:#15181d;--btn-secondary-border:#e3e3e3;--btn-secondary-hover:#c9ced5;--shadow-xs:0 1px 4px #15181d33;--shadow-segment:0 1px 0 #15181d14;--font-sans:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, sans-serif;--font-mono:"Fira Code", "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;--radius-sm:6px;--radius-md:8px;--radius-lg:12px;--radius-pill:999px;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}html.dark{--color-bg:#15181d;--color-bg-soft:#1a1e24;--color-bg-muted:#222a34;--color-bg-elevated:#1a1e24;--color-text:#f7fdff;--color-text-muted:#9aa8b8;--color-text-subtle:#748396;--color-border:#2a3340;--color-highlight:#7d9ddf;--color-glow:#20a7c91a;--color-focus-ring:#f7fdff52;--btn-primary-bg:#f7fdff;--btn-primary-fg:#15181d;--btn-primary-hover:#c9d8df;--btn-secondary-bg:#222a34;--btn-secondary-fg:#f7fdff;--btn-secondary-border:#2a3340;--btn-secondary-hover:#425163;--shadow-xs:0 1px 4px #00000073;--shadow-segment:0 1px 0 #0006;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}body{min-height:100vh;font-family:var(--font-sans);color:var(--color-text);background:var(--color-bg);-webkit-font-smoothing:antialiased;margin:0;font-size:16px;line-height:1.55;transition:background-color .2s,color .2s}button,select,input{font:inherit;color:inherit}button{cursor:pointer}:focus-visible{box-shadow:0 0 0 3px var(--color-focus-ring);outline:none}.header{z-index:1;background:color-mix(in srgb, var(--color-bg) 92%, transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--color-border);justify-content:space-between;align-items:center;height:56px;padding:0 16px;display:flex;position:sticky;top:0}.brand{align-items:center;gap:8px;font-size:18px;font-weight:600;display:flex}.brand-mark{width:24px;height:24px}.header-actions{align-items:center;gap:8px;display:flex}.icon-btn{color:inherit;border:1px solid var(--color-border);border-radius:var(--radius-pill);background:0 0;place-items:center;width:36px;height:36px;display:grid}.icon-btn:hover{background:var(--color-bg-muted)}.icon-btn svg{width:18px;height:18px}.segmented{border-radius:var(--radius-pill);background:var(--color-bg-muted);gap:2px;padding:3px;display:inline-flex}.segmented button{border-radius:var(--radius-pill);color:var(--color-text-muted);background:0 0;border:0;padding:4px 12px;font-size:13px;font-weight:500}.segmented button[aria-pressed=true]{background:var(--color-bg);color:var(--color-text);box-shadow:var(--shadow-segment), var(--shadow-xs)}.app{grid-template-columns:minmax(0,560px) minmax(0,1fr);align-items:start;gap:16px;max-width:1400px;margin:0 auto;padding:24px 16px 40px;display:grid}.metronome-column{flex-direction:column;gap:16px;min-width:0;display:flex}.app:not(.practice-open){grid-template-columns:minmax(0,1fr);max-width:680px}.practice-column[hidden]{display:none}#practice-toggle{min-height:36px;padding:0 12px;font-size:13px}.textbook{flex-direction:column;gap:12px;min-width:0;display:flex;position:sticky;top:72px}.textbook.file-drag .pdf-viewer{pointer-events:none}.textbook.drop-active{outline:2px dashed var(--color-highlight);outline-offset:-4px}.textbook-heading{justify-content:space-between;align-items:center;gap:12px;display:flex}.textbook-heading h2{margin:0;font-size:18px}.textbook-heading .btn{flex:none;height:36px;padding:0 12px;font-size:13px}.textbook-heading h2,.pdf-name{flex:1;min-width:0}.textbook.has-pdf{gap:8px;height:max(280px,100dvh - 96px);padding:12px}.textbook.has-pdf #textbook-title{display:none}.textbook-help{color:var(--color-text-muted);margin:0;font-size:13px}.pdf-name{text-overflow:ellipsis;white-space:nowrap;margin:0;font-size:14px;overflow:hidden}.pdf-viewer{border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-bg-muted);flex:1;width:100%;min-height:0}#pdf-tab{color:var(--color-highlight);font-size:13px}.textbook [hidden]{display:none}@media (width<=900px){.app{grid-template-columns:minmax(0,1fr);max-width:680px}.textbook{position:static}}.card{background:var(--color-bg-elevated);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:20px}.stage{background:radial-gradient(120% 70% at 50% 0%, var(--color-glow), transparent 70%), var(--color-bg-elevated);flex-direction:column;align-items:stretch;gap:20px;display:flex}.display-toggle{align-self:center}.stage-toolbar{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;display:flex}.focus-toggle{min-height:36px;margin-left:auto;padding:0 12px;font-size:13px}.signature-presets{flex-wrap:wrap;justify-content:center;gap:8px;display:flex}.signature-presets button{min-width:56px;min-height:40px;font-family:var(--font-mono);padding:6px 12px}.signature-presets button[aria-pressed=true]{border-color:var(--color-highlight);color:var(--color-highlight);background:var(--color-glow)}.focus-mode .practice-column,.focus-mode #practice-toggle,.focus-mode .metronome-column>:not(.stage),.focus-mode .recording-panel,.focus-mode .guide,.focus-mode .app-footer,.focus-mode .stage .display-toggle,.focus-mode .stage .pendulum,.focus-mode .stage .beats-hint,.focus-mode .stage .check,.focus-mode .stage #reset{display:none}.focus-mode .app{max-width:760px;padding-block:20px;display:block}.focus-mode .app .metronome-column{display:flex}.focus-mode .stage{justify-content:center;gap:28px;min-height:calc(100dvh - 96px);padding:clamp(16px,4vw,40px)}.focus-mode #bpm{min-width:0;max-width:100%;font-size:clamp(48px,16vw,140px)}.focus-mode .bpm-readout{flex:1}.focus-mode .actions{grid-template-columns:2fr 1fr}.focus-mode .actions #play{grid-column:auto}.focus-mode .actions .btn{min-height:56px}.focus-mode .remaining{margin:0}.focus-mode #tempo-presets{grid-template-columns:repeat(auto-fit,minmax(40px,1fr));gap:6px;margin-top:0;display:grid}.focus-mode #tempo-presets button{font-variant-numeric:tabular-nums;min-width:0;min-height:40px;padding:6px 4px}@media (width<=600px){.header{flex-wrap:wrap;gap:8px;height:auto;min-height:56px;padding-block:8px}.header-actions{flex-wrap:wrap;justify-content:flex-end}.focus-mode .stage{gap:22px;min-height:calc(100dvh - 120px)}}.pendulum{align-self:center;width:180px;height:207px;display:none}.view-pendulum .pendulum{display:block}.pendulum-body{fill:var(--color-bg-muted);stroke:var(--color-border);stroke-width:2px;stroke-linejoin:round}.pendulum-scale{stroke:var(--color-text-subtle);stroke-width:1.5px;opacity:.5}.pendulum-rod{stroke:var(--color-text);stroke-width:3px;stroke-linecap:round}.pendulum-weight{fill:var(--color-highlight)}.pendulum-pivot{fill:var(--color-text)}.tempo{justify-content:space-between;align-items:center;gap:12px;display:flex}.round{border-radius:var(--radius-pill);border:1px solid var(--btn-secondary-border);background:var(--btn-secondary-bg);width:52px;height:52px;color:var(--btn-secondary-fg);flex:none;font-size:26px;line-height:1;transition:background-color .12s}.round:hover{background:var(--btn-secondary-hover)}.bpm-readout{flex-direction:column;align-items:center;min-width:0;display:flex}#bpm{border-radius:var(--radius-md);text-align:center;letter-spacing:-.03em;font-variant-numeric:tabular-nums;-moz-appearance:textfield;background:0 0;border:0;width:4ch;padding:0;font-size:88px;font-weight:600;line-height:1.05}#bpm::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}#bpm::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.view-pendulum #bpm{font-size:56px}.meta{color:var(--color-text-muted);font-size:14px}#signature{font-family:var(--font-mono)}input[type=range]{width:100%;accent-color:var(--btn-primary-bg)}.beats{flex-wrap:wrap;justify-content:center;gap:8px;display:flex}.beat{border-radius:var(--radius-pill);background:var(--color-bg-muted);width:34px;height:34px;color:var(--color-text-muted);border:2px solid #0000;padding:0;font-size:12px;font-weight:600;transition:transform 60ms ease-out,background-color 60ms,color 60ms}.beat.accent{border-color:var(--color-highlight);color:var(--color-highlight)}.beat.mute{opacity:.4;border-style:dashed;border-color:var(--color-text-subtle)}.beat.active{background:var(--color-text);color:var(--color-bg);transform:scale(1.18)}.beat.accent.active{background:var(--color-highlight);color:#fff}.beat.mute.active{background:var(--color-bg-muted);color:var(--color-text-muted)}.beats-hint{text-align:center;color:var(--color-text-subtle);margin:-12px 0 0;font-size:12px}.check{color:var(--color-text-muted);cursor:pointer;justify-content:center;align-items:center;gap:8px;margin-top:-14px;font-size:13px;display:flex}.check input{width:16px;height:16px;accent-color:var(--color-highlight);cursor:pointer;margin:0}.remaining{text-align:center;font-family:var(--font-mono);font-variant-numeric:tabular-nums;color:var(--color-text-muted);margin:-12px 0 0}.actions{grid-template-columns:2fr 1fr 1fr;gap:8px;display:grid}.btn{border-radius:var(--radius-pill);white-space:nowrap;border:1px solid #0000;justify-content:center;align-items:center;font-weight:600;transition:background-color .12s,border-color .12s,color .12s;display:inline-flex}.btn--lg{height:48px;padding:0 20px;font-size:16px}.btn--primary{background:var(--btn-primary-bg);color:var(--btn-primary-fg);border-color:var(--btn-primary-bg)}.btn--primary:hover{background:var(--btn-primary-hover);border-color:var(--btn-primary-hover)}.btn--secondary{background:var(--btn-secondary-bg);color:var(--btn-secondary-fg);border-color:var(--btn-secondary-border)}.btn--secondary:hover{background:var(--btn-secondary-hover);border-color:var(--btn-secondary-hover)}.btn--ghost{color:var(--color-text);background:0 0}.btn--ghost:hover{background:var(--color-bg-muted)}.btn--primary.playing{background:var(--color-highlight);border-color:var(--color-highlight);color:#fff}.settings{grid-template-columns:1fr 1fr;gap:16px;display:grid}.settings .field{flex-direction:column;gap:6px;min-width:0;display:flex}.field-label{color:var(--color-text-muted);font-size:13px;font-weight:500}.settings .wide{grid-column:1/-1}.signature-pick{color:var(--color-text);align-items:center;gap:6px;display:flex}.signature-pick .select{flex:1}.select{position:relative}.select-button{border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-bg);width:100%;height:40px;color:var(--color-text);text-align:left;justify-content:space-between;align-items:center;gap:8px;padding:0 10px 0 12px;font-size:14px;transition:border-color .12s,background-color .12s;display:flex}.select-button:hover{background:var(--color-bg-soft);border-color:var(--color-border-strong,var(--color-border))}.select-button[aria-expanded=true]{border-color:var(--color-highlight)}.select-value{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.select-chevron{width:16px;height:16px;color:var(--color-text-subtle);flex:none}.select-button[aria-expanded=true] .select-chevron{transform:rotate(180deg)}.select-menu{z-index:5;background:var(--color-bg-elevated);border:1px solid var(--color-border);border-radius:var(--radius-md);width:100%;min-width:max-content;max-height:260px;box-shadow:var(--shadow-md,0 16px 40px #15181d24);margin:0;padding:4px;list-style:none;position:absolute;top:calc(100% + 4px);left:0;overflow-y:auto}.select-option{border-radius:var(--radius-sm);color:var(--color-text);cursor:pointer;white-space:nowrap;padding:8px 10px;font-size:14px}.select-option.active{background:var(--color-bg-muted)}.select-option[aria-selected=true]{color:var(--color-highlight);font-weight:600}select{border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-bg);min-width:0;min-height:40px;color:var(--color-text);font:inherit;cursor:pointer;padding:8px 12px}select:not(:disabled):hover{border-color:var(--color-highlight)}select:disabled{opacity:.5;cursor:default}select option{background:var(--color-bg-elevated);color:var(--color-text)}@supports (appearance:base-select){select:not([multiple]):not([size]),select:not([multiple])[size="1"]{appearance:base-select;align-items:center;gap:8px}select::picker(select){appearance:base-select;min-width:anchor-size(width);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-bg-elevated);max-width:calc(100vw - 24px);max-height:min(260px,60dvh);color:var(--color-text);box-shadow:var(--shadow-md,0 16px 40px #15181d24);font:14px/1.55 var(--font-sans);margin-block:4px;padding:4px;overflow:auto}select::picker-icon{color:var(--color-text-subtle)}select:open{border-color:var(--color-highlight)}select:open::picker-icon{rotate:180deg}select:not([multiple]):not([size]) option,select:not([multiple])[size="1"] option{border-radius:var(--radius-sm);white-space:normal;overflow-wrap:anywhere;padding:8px 10px}select option:checked{color:var(--color-highlight);font-weight:600}select option:not(:disabled):is(:hover,:focus){background:var(--color-bg-muted)}select option:disabled{color:var(--color-text-subtle);cursor:default}}.rhythm-grid{grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:8px;display:grid}.rhythm{border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-bg);height:54px;color:var(--color-text);place-items:center;padding:4px;transition:border-color .12s,background-color .12s;display:grid}.rhythm:hover{background:var(--color-bg-soft)}.rhythm[aria-checked=true]{border-color:var(--color-highlight);color:var(--color-highlight);background:color-mix(in srgb, var(--color-highlight) 10%, transparent)}.rhythm svg{width:auto;max-width:100%;height:34px}.hint{text-align:center;color:var(--color-text-subtle);margin:0;font-size:13px}kbd{font:12px var(--font-mono);border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-bg-soft);color:var(--color-text-muted);padding:1px 6px}@media (width<=420px){.settings{grid-template-columns:1fr}#bpm{font-size:72px}.actions{grid-template-columns:1fr 1fr}.actions #play{grid-column:1/-1}}.tuner{text-align:center;flex-direction:column;gap:12px;display:flex}.tuner-heading{justify-content:space-between;align-items:center;gap:12px;display:flex}.tuner-heading h2{margin:0;font-size:18px;font-weight:600}.tuner-note{margin:0;font-size:64px;font-weight:600;line-height:1.2}.tuner-note.in-tune{color:var(--color-highlight)}.tuner-reading{font:14px var(--font-mono);color:var(--color-text-muted);margin:0}.tuner-meter{border-bottom:2px solid var(--color-border);background:linear-gradient(90deg, transparent 45%, var(--color-glow) 45%, var(--color-glow) 55%, transparent 55%);height:32px;margin:8px 8px 0;position:relative}.tuner-center{border-left:2px solid var(--color-highlight);height:100%;position:absolute;left:50%}.tuner-needle{background:var(--color-text);border-radius:4px;width:4px;height:28px;position:absolute;bottom:-4px;transform:translate(-50%)}.tuner-scale{font:12px var(--font-mono);color:var(--color-text-subtle);justify-content:space-between;margin:-6px 8px 0;display:flex}.tuner-status{min-height:3em;color:var(--color-text-muted);margin:0;font-size:14px}.tuner-help{color:var(--color-text-subtle);margin:0;font-size:12px}.tuner-note.localized{font-size:clamp(28px,8vw,44px)}.guide{width:calc(100% - 32px);max-width:960px;margin:24px auto}.guide p,.guide li{color:var(--color-text-muted)}.guide{padding:24px}.guide h2{margin:24px 0 12px;font-size:22px}.guide h2:first-child{margin-top:0}.guide h3{margin:20px 0 8px;font-size:17px}.guide p{margin:0 0 12px}.guide ol{padding-left:24px}.guide li+li{margin-top:10px}.practice-column{min-width:0;position:sticky;top:72px}.practice-column [hidden]{display:none}.practice-tabs{margin-bottom:12px;display:flex}.practice-tabs button{flex:1}.practice-tabs button[aria-selected=true]{background:var(--color-bg-elevated);color:var(--color-highlight)}.practice-column .textbook{position:static}.lessons{scrollbar-gutter:stable;max-height:calc(100dvh - 136px);overflow-y:auto}.lessons h2{margin:0 0 8px;font-size:18px}.lesson-layout{grid-template-columns:44px minmax(0,1fr);align-items:start;gap:12px;display:grid}.lesson-pages{min-width:0}.lesson-days{flex-direction:column;gap:6px;display:flex;position:sticky;top:0}.lesson-days button{width:100%;min-height:40px;padding:6px}.lesson-days button[aria-pressed=true]{border-color:var(--color-highlight);color:var(--color-highlight);background:var(--color-bg-muted)}.lessons figure{margin:0 0 20px}.lessons img{background:#fff;border-radius:4px;width:100%;height:auto;display:block}.lessons figcaption{color:var(--color-text-muted);margin-top:6px;font-size:12px}@media (width<=900px){.practice-column{position:static}.lessons{max-height:none;overflow:visible}}.lesson-modes{flex-wrap:wrap;margin-bottom:14px;display:flex}.lesson-modes button{white-space:normal;flex:140px;min-height:36px}.finger-rows{gap:4px;padding:0;list-style:none;display:grid}.finger-rows li{border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-bg-soft);min-width:0;padding:4px 6px}.finger-notes{max-width:380px;font:12px var(--font-mono);text-align:center;grid-template-columns:repeat(8,minmax(0,1fr));gap:2px;margin-top:0;display:grid}.finger-notes span{padding-block:1px}.finger-staff{border-radius:var(--radius-sm);max-width:100%;margin-top:0;overflow-x:auto}.finger-staff svg{width:100%;min-width:340px;max-width:380px;height:auto;display:block}.finger-staff .staff-line{stroke-width:.8px;opacity:.65}.finger-staff .staff-ledger{stroke-width:1px}.finger-staff .staff-stem,.finger-staff .staff-bar{stroke-width:1.4px}.finger-rhythm{color:var(--color-text);margin:14px 0}.finger-rhythm svg{width:auto;height:36px}#technique-practice .scale-toolbar input{border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-bg);width:100%;min-width:0;min-height:40px;padding:8px}#technique-practice>.btn{white-space:normal;min-height:40px;padding:8px 14px}#technique-practice>a{color:var(--color-highlight)}.scale-toolbar{flex-wrap:wrap;align-items:end;gap:12px;display:flex}.scale-toolbar label{color:var(--color-text-muted);flex-direction:column;flex:1;gap:6px;font-size:13px;display:flex}.scale-toolbar select{border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-bg);min-height:40px;color:var(--color-text);font:inherit;padding:8px}.scale-toolbar .btn,.scale-navigation .btn{min-height:40px;padding:8px 14px}.scale-steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin:16px 0;display:grid}.scale-steps button{white-space:normal;min-height:40px;padding:8px}.scale-steps button[aria-pressed=true]{border-color:var(--color-highlight);color:var(--color-highlight);background:var(--color-bg-muted)}#scale-practice h3{margin:12px 0;font-size:17px}.scale-material{border-radius:var(--radius-md);background:var(--color-bg-soft);padding:12px}.scale-material p{margin:0}.scale-material p+p{margin-top:10px}.scale-notes{font-family:var(--font-mono);overflow-wrap:anywhere;font-size:clamp(14px,2vw,19px)}.scale-material table{border-collapse:collapse;width:100%;font-size:14px}.scale-material caption{text-align:left;color:var(--color-text-muted);margin-bottom:8px;font-size:12px}.scale-material th,.scale-material td{text-align:left;border-bottom:1px solid var(--color-border);padding:8px 4px}.scale-material th{font-weight:500}.scale-tasks{padding-left:22px;font-size:14px}.scale-tasks li+li{margin-top:10px}#scale-practice>.check{margin-top:16px}.scale-navigation{justify-content:space-between;gap:8px;margin:16px 0;display:flex}.scale-navigation button:disabled{opacity:.45;cursor:default}.rhythm-help-button{border:1px solid var(--color-border);background:var(--color-bg-muted);width:22px;height:22px;color:var(--color-text);font:600 13px var(--font-mono);vertical-align:middle;cursor:pointer;border-radius:50%;place-items:center;padding:0;display:inline-grid}.rhythm-help-button:hover{border-color:var(--color-highlight);color:var(--color-highlight)}.rhythm-examples{border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-bg-elevated);width:min(400px,100vw - 24px);max-height:calc(100dvh - 24px);color:var(--color-text);margin:0;padding:16px;font-size:13px;position:fixed;inset:auto;overflow-y:auto;box-shadow:0 8px 32px #0003}.rhythm-examples-header{justify-content:space-between;align-items:center;gap:12px;display:flex}.rhythm-examples-header button{flex:none}.rhythm-examples p{margin:12px 0}.rhythm-examples p:last-child{margin-bottom:0}.rhythm-examples table{table-layout:fixed;border-collapse:collapse;width:100%;font-family:var(--font-mono);margin-top:12px}.rhythm-examples caption{text-align:left;font:500 13px var(--font-sans,sans-serif);margin-bottom:4px}.rhythm-examples th,.rhythm-examples td{text-align:center;padding:4px 0}.rhythm-examples th{color:var(--color-text-muted);border-bottom:1px solid var(--color-border);font-weight:400}.rhythm-examples h4{margin:14px 0 4px;font-size:13px}.rhythm-examples .practice-example-text{white-space:pre-line;overflow-wrap:anywhere;margin:0}.scale-toolbar label{min-width:100px}.scale-toolbar select{width:100%}.scale-mode-help{margin-top:12px}.tempo-shortcuts{text-align:center;color:var(--color-text-muted);font-size:13px}#tempo-presets{flex-wrap:wrap;justify-content:center;gap:8px;margin-top:8px;display:flex}#tempo-presets [aria-pressed=true]{outline:2px solid var(--btn-primary-bg);outline-offset:2px}.backing-player{border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-bg-soft);margin:16px 0;padding:14px}.backing-player h3{margin-top:0!important}.backing-controls{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;display:grid}.backing-controls label,.backing-channel>label{min-width:0;color:var(--color-text-muted);flex-direction:column;gap:6px;font-size:13px;display:flex}.backing-controls select,.backing-controls input{box-sizing:border-box;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-bg);width:100%;min-width:0;min-height:40px;color:var(--color-text);font:inherit;padding:8px}.backing-count-in{margin:12px 0}.backing-chart{grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;margin:12px 0;padding:0;list-style:none;display:grid}.backing-chart li{border-radius:var(--radius-md);background:var(--color-bg);min-width:0;min-height:58px;font:14px var(--font-mono);overflow-wrap:anywhere;border:2px solid #0000;flex-direction:column;justify-content:center;gap:4px;padding:6px;display:flex}.backing-chart li.active{border-color:var(--color-highlight);background:var(--color-bg-muted)}.backing-bar-number{font:11px var(--font-mono);color:var(--color-text-muted)}#backing-play{white-space:normal;width:100%;min-height:44px;padding:10px}.backing-status{min-height:2.5em;color:var(--color-text-muted);margin:10px 0;font-size:13px}.backing-mixer{border:0;min-width:0;margin:0;padding:8px 0}.backing-mixer legend{color:var(--color-text-muted);font-size:13px}.sound-controls label{min-width:0;color:var(--color-text-muted);flex-direction:column;gap:5px;font-size:13px;display:flex}.sound-controls select{box-sizing:border-box;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-bg);width:100%;min-width:0;min-height:40px;color:var(--color-text);font:inherit;padding:8px}.sound-controls input[type=range]{width:100%;min-width:0}.arrangement-controls{border:1px solid var(--color-border);border-radius:var(--radius-md);min-width:0;margin:12px 0;padding:10px}.arrangement-controls legend{color:var(--color-text-muted);font-size:13px}.arrangement-controls .check{flex-direction:row;align-items:center;gap:8px;margin:8px 0;font-size:13px;display:flex}.backing-channel{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;margin:8px 0;display:grid}.backing-channel input[type=range]{width:100%;min-width:0}.backing-channel .check{font-size:12px}@media (width<=360px){.backing-controls{grid-template-columns:1fr}.backing-chart{grid-template-columns:repeat(2,minmax(0,1fr))}}.songs{scrollbar-gutter:stable;max-height:calc(100dvh - 136px);overflow-y:auto}.songs h2{margin:0 0 12px;font-size:18px}.song-toolbar{flex-wrap:wrap;gap:6px;margin:12px 0;display:flex}.song-toolbar .btn{white-space:normal;min-height:36px;padding:6px 10px}.song-fields{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:12px 0;display:grid}.songs label{min-width:0;color:var(--color-text-muted);flex-direction:column;gap:5px;font-size:13px;display:flex}.songs label.check{flex-direction:row;align-items:center;margin:12px 0}.songs input:not([type=checkbox]),.songs select,.songs textarea{box-sizing:border-box;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-bg);width:100%;min-width:0;min-height:40px;color:var(--color-text);font:inherit;padding:8px}.songs textarea{resize:vertical;min-height:68px;font-family:var(--font-mono)}.song-bars{grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;display:grid}.song-bars button{border-radius:var(--radius-md);white-space:normal;overflow-wrap:anywhere;text-align:left;flex-direction:column;align-items:start;gap:5px;min-width:0;min-height:72px;padding:7px;display:flex}.song-bars button[aria-pressed=true]{outline:2px solid var(--color-highlight);outline-offset:-2px}.song-bars button.playing{background:var(--color-glow);border-color:var(--color-highlight)}.song-bars button.invalid{border-color:#c84545}.song-bar-chords{font:13px var(--font-mono)}.song-bar-form{font:11px var(--font-mono);color:var(--color-text-muted)}#song-form-order{overflow-wrap:anywhere}.song-bar-alternate{font:11px var(--font-mono);color:var(--color-text-muted)}.song-bar-text{color:var(--color-text-muted);font-size:11px}.song-chart h3{margin:14px 0 8px}.song-errors{color:#c84545;overflow-wrap:anywhere;font-size:13px}.song-measure-editor label:nth-child(n+3){grid-column:1/-1}#song-play{width:100%;min-height:44px}@media (width<=900px){.songs{max-height:none;overflow:visible}}@media (width<=420px){.song-bars{grid-template-columns:repeat(2,minmax(0,1fr))}.song-fields{grid-template-columns:1fr}.practice-tabs button{padding-inline:6px;font-size:12px}}.training-controls{border:1px solid var(--color-border);border-radius:var(--radius-md);min-width:0;margin:12px 0;padding:10px}.training-controls legend{color:var(--color-text-muted);font-size:13px}.training-controls .song-fields{margin:4px 0 10px}.training-controls label{min-width:0;color:var(--color-text-muted);flex-direction:column;gap:5px;font-size:13px;display:flex}.training-controls input,.training-controls select{box-sizing:border-box;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-bg);width:100%;min-width:0;min-height:40px;color:var(--color-text);font:inherit;padding:8px}.backing-key-status,.song-key-status{font:13px var(--font-mono);overflow-wrap:anywhere}.offline-status{width:24px;height:32px;color:var(--color-text-muted);flex:none;justify-content:center;align-items:center;display:inline-flex}.offline-status[hidden]{display:none}.offline-status svg{width:20px;height:20px}.offline-status[data-state=failed],.offline-status[data-state=update]{color:var(--color-text)}.offline-status-text{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.playlist-panel{border:1px solid var(--color-border);border-radius:var(--radius-sm);margin:14px 0;padding:10px}.playlist-panel summary{cursor:pointer;font-weight:600}.playlist-content>label{margin:10px 0;display:block}.playlist-content>label input:not([type=checkbox]),.playlist-content select{width:100%;display:block}.playlist-content p{color:var(--color-text-muted);font-size:.85rem}#playlist-entries{padding:0;list-style:none}.playlist-entry{border:1px solid var(--color-border);border-radius:var(--radius-sm);flex-wrap:wrap;gap:5px;margin:8px 0;padding:6px;display:flex}.playlist-entry .btn{white-space:normal;overflow-wrap:anywhere;min-height:36px;padding:6px 10px}.playlist-entry [data-action=open]{text-align:left;flex:100%}.playlist-entry[aria-current]{border-color:var(--color-highlight)}.song-cell{border:1px solid var(--color-border);border-radius:var(--radius-md);overflow-wrap:anywhere;cursor:pointer;min-width:0;min-height:90px;padding:7px}.song-cell[data-selected=true]{outline:2px solid var(--color-highlight);outline-offset:-2px}.song-cell.playing{background:var(--color-glow);border-color:var(--color-highlight)}.song-cell.invalid{border-color:#c84545}.song-bars .song-bar-select{width:100%;min-height:28px;color:var(--color-text-muted);font:inherit;background:0 0;border:0;padding:0}.song-bars .song-bar-chords{flex-wrap:wrap;gap:3px;display:flex}.song-bars .chord-symbol{min-height:32px;color:var(--color-text);font:inherit;background:0 0;border:0;border-radius:3px;padding:2px;font-weight:600;display:inline-block}.song-bars .chord-symbol:hover,.song-bars .chord-symbol:focus-visible{background:var(--color-glow)}.chord-reference{box-sizing:border-box;background:var(--color-bg);max-width:min(700px,100vw - 24px);max-height:calc(100dvh - 32px);color:var(--color-text);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:20px;overflow-y:auto}.chord-reference::backdrop{background:#15181d99}.chord-reference svg{width:100%;max-height:230px;margin:12px 0;display:block}.chord-reference h2{margin:0 0 12px}.chord-reference p,.chord-reference li{line-height:1.5}.chord-reference select{max-width:100%;min-height:40px}.recording-panel{max-width:1120px;margin:20px auto;padding:18px}.recording-panel summary{cursor:pointer;font-weight:600}.recording-panel input:not([type=checkbox]),.recording-panel select{width:100%;min-height:36px;display:block}.recording-panel label{margin:10px 0;display:block}.recording-panel p{color:var(--color-text-muted);font-size:.85rem;line-height:1.5}#recording-meter{width:100%;margin:10px 0;display:block}.recording-take{border-top:1px solid var(--color-border);margin-top:14px}.recording-take audio{width:100%;display:block}.app-footer{text-align:center;margin:25px 12px;font-size:.85rem}.app-footer a{color:var(--color-text-muted)}.app.songs-workspace{grid-template-columns:minmax(0,1fr)}.songs-workspace .metronome-column{display:none}.songs-workspace .practice-column{position:static}.songs-workspace .songs:not([hidden]){grid-template-columns:minmax(220px,280px) minmax(0,1fr);gap:20px;max-height:none;display:grid;overflow:visible}.songs-workspace .songs>h2{grid-column:1/-1;margin-bottom:0}.song-library-panel,.song-document{min-width:0}.song-document>h2{margin:8px 0;font-size:26px}.song-chart-meta{color:var(--color-text-muted);font-size:.9rem}.songs:not(.song-editing) [data-editor-controls]{display:none}.song-player-dock{z-index:3;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-bg-elevated);box-shadow:var(--shadow-xs);margin:18px 0;padding:12px;position:sticky;bottom:8px}.song-player-dock .song-fields{grid-template-columns:repeat(4,minmax(0,1fr));margin:0}.song-player-dock #song-play{margin-top:8px}.song-player-panel{border:1px solid var(--color-border);border-radius:var(--radius-sm);margin:12px 0;padding:10px}.song-player-panel>summary{cursor:pointer;font-weight:600}.song-view-toolbar{margin-top:0}.ireal-import textarea{box-sizing:border-box;width:100%;display:block}#ireal-preview-list{max-height:45dvh;margin:14px 0;overflow-y:auto}#ireal-preview-list label{border-top:1px solid var(--color-border);padding:8px 0;display:block}#ireal-preview-list p{margin:4px 0;font-size:.8rem}@media (width<=760px){.songs-workspace .songs:not([hidden]){display:block}.song-library-panel{margin-bottom:22px}.song-player-dock{position:static}.song-player-dock .song-fields{grid-template-columns:repeat(2,minmax(0,1fr))}.song-view-toolbar .btn{flex:1}}.help-link{border:1px solid var(--color-border);width:30px;height:30px;color:var(--color-text);border-radius:50%;justify-content:center;align-items:center;font-weight:700;text-decoration:none;display:inline-flex}@media (width<=420px){.header{padding-inline:10px}.header-actions{gap:4px}.header-actions .icon-btn{width:28px;height:32px}.header .brand{gap:4px;font-size:15px}}.songs:not(.song-editing) .song-bar-chords{font-size:clamp(17px,1.7vw,25px);line-height:1.4}.songs:not(.song-editing) .song-cell{min-height:115px}#song-select{padding:4px}#song-select option{padding:7px 5px}