@font-face{font-family:OpenDyslexic;font-style:normal;font-display:swap;font-weight:400;src:url(./opendyslexic-latin-400-normal-nUhe5EwG.woff2)format("woff2"),url(./opendyslexic-latin-400-normal-Cv3YY6GF.woff)format("woff")}@font-face{font-family:OpenDyslexic;font-style:normal;font-display:swap;font-weight:700;src:url(./opendyslexic-latin-700-normal-Bnmt45Ln.woff2)format("woff2"),url(./opendyslexic-latin-700-normal-wYUJcbXi.woff)format("woff")}:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;--bg:#fafaf7;--fg:#1d1d1f;--surface:#fff;--line:#333;--accent:#4a4ac4;--key-white:#fffefa;--key-white-shade:#e6e2d6;--key-black:#1a1a1d;--key-black-hi:#4a4a52;--key-edge:#8a8576;--key-label:#5a5546;--key-shadow:#0006;--wood:#b98655;--wood-dark:#8f6238;--wood-grain:#6b43212e;--string:#eee;--string-wound:#c9b27a;--fret-wire:#d8d8d0;--nut:#f1ead6;--inlay:#f4eedb;--fb-label:#5a4a38;--highlight:#ffd166;--active:#ef476f;--ok:#2a9d4b;--on-accent:#fff;--subtle:#6a6a72;--muted:#595961;--on-highlight:#1d1d1f;--on-active:#1d1d1f;--danger:#b3123a;--ok-text:#1b7a37;--focus:#0b2e7a;--capo:#2b2b33;--on-capo:#fafaf7;--radius:10px;--gap:1rem;--space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-5:1.5rem;--space-6:2rem;--text-sm:.875rem;--text-md:1rem;--text-lg:1.25rem;--text-xl:1.625rem;--radius-sm:6px;--radius-control:8px;--radius-pill:999px;--shadow-1:0 1px 2px #0000001a;--shadow-2:0 4px 14px #0002;--btn-bg-hover:color-mix(in srgb, var(--accent) 12%, var(--surface));--btn-bg-active:color-mix(in srgb, var(--accent) 22%, var(--surface));--primary-hover:color-mix(in srgb, var(--accent) 86%, var(--fg));--primary-active:color-mix(in srgb, var(--accent) 72%, var(--fg));--hairline:color-mix(in srgb, var(--fg) 14%, transparent);--tint:color-mix(in srgb, var(--fg) 6%, var(--surface));font-family:OpenDyslexic,system-ui,-apple-system,Segoe UI,sans-serif;font-size:93.75%;line-height:1.6}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial}}:root[data-font=system]{font-family:system-ui,-apple-system,Segoe UI,sans-serif;font-size:100%;line-height:1.5}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#16161a;--fg:#eee;--surface:#23232a;--line:#000;--accent:#a5a5ff;--on-accent:#16161a;--key-white:#f4f1e8;--key-white-shade:#cfcabb;--key-black:#0c0c0e;--key-black-hi:#3c3c44;--key-edge:#000;--key-label:#5a5546;--wood:#6b4a2f;--wood-dark:#4a321f;--wood-grain:#0004;--string:#ddd;--string-wound:#b59d62;--fret-wire:#b9b9b0;--nut:#d9d2bd;--inlay:#cfc7ae;--fb-label:#c7b8a3;--muted:#b4b4c0;--subtle:#a8a8b3;--shadow-1:0 1px 2px #0006;--shadow-2:0 4px 14px #0008;--danger:#ff8aa5;--ok-text:#5fd486;--focus:#8ab4ff;--capo:#d6d6e0;--on-capo:#23232a}}:root[data-theme=dark]{--bg:#16161a;--fg:#eee;--surface:#23232a;--line:#000;--accent:#a5a5ff;--on-accent:#16161a;--key-white:#f4f1e8;--key-white-shade:#cfcabb;--key-black:#0c0c0e;--key-black-hi:#3c3c44;--key-edge:#000;--key-label:#5a5546;--wood:#6b4a2f;--wood-dark:#4a321f;--wood-grain:#0004;--string:#ddd;--string-wound:#b59d62;--fret-wire:#b9b9b0;--nut:#d9d2bd;--inlay:#cfc7ae;--fb-label:#c7b8a3;--muted:#b4b4c0;--subtle:#a8a8b3;--shadow-1:0 1px 2px #0006;--shadow-2:0 4px 14px #0008;--danger:#ff8aa5;--ok-text:#5fd486;--focus:#8ab4ff;--capo:#d6d6e0;--on-capo:#23232a}:root[data-theme=light]{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}:root[data-theme=dark]{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}.tuner{max-width:600px;margin:auto}.notice{border:1px solid var(--hairline);border-left:4px solid var(--subtle);border-radius:var(--radius);background:var(--tint);margin:.5rem 0;padding:.5rem .75rem}.notice.error{border-color:var(--danger);border-left-style:double;border-left-width:6px}.notice.error strong{color:var(--danger)}.tuner-strings{justify-content:center;gap:.5rem;padding:0;list-style:none;display:flex}.tuner-strings li{border:1px solid var(--subtle);border-radius:6px;padding:.25rem .6rem}.tuner-strings li[aria-current]{background:var(--accent);color:var(--on-accent)}.tuner-readout{text-align:center;margin:1rem 0}.tuner-note{font-size:3rem;font-weight:700}.tuner-readout[data-in-tune=true]{color:var(--ok-text)}.tuner-bar{border:1px solid var(--subtle);border-radius:6px;height:2rem;position:relative}.tuner-center{background:var(--subtle);width:2px;position:absolute;top:0;bottom:0;left:50%}.tuner-needle{background:var(--active);width:4px;margin-left:-2px;position:absolute;top:0;bottom:0}.tuner-bar[data-in-tune=true] .tuner-needle{background:var(--ok)}body{background:var(--bg);color:var(--fg);min-height:100vh;margin:0}header{z-index:10;background:var(--surface);border-bottom:1px solid var(--hairline);flex-wrap:wrap;align-items:center;gap:.5rem 1.25rem;padding:.75rem 1rem;display:flex;position:sticky;top:0}h1,h2,h3{text-wrap:balance;line-height:1.25}h1{font-size:var(--text-xl);margin:0}h2{font-size:var(--text-lg);margin:var(--space-5) 0 var(--space-3)}h3{font-size:var(--text-md);margin:var(--space-4) 0 var(--space-2);font-weight:700}p,li{line-height:1.6}small{font-size:var(--text-sm)}main p,main :is(ul,ol):not([class])>li{max-width:70ch}main p,main :is(ul,ol):not([class]){margin:0 0 var(--space-4)}main :is(ul,ol):not([class])>li+li{margin-top:var(--space-1)}main h2+p,main h3+p{margin-top:0}.topbar{align-items:center;gap:.75rem;min-width:0;display:flex}.status-btn{display:none}.menu-btn{align-items:center;gap:.5rem;display:inline-flex}.menu-icon{background:currentColor;width:1rem;height:2px;box-shadow:0 -5px,0 5px}.current-view{white-space:nowrap;text-overflow:ellipsis;font-weight:700;overflow:hidden}.nav-backdrop{z-index:20;background:color-mix(in srgb, var(--bg) 55%, transparent);position:fixed;inset:0}.nav-sheet{z-index:21;box-sizing:border-box;background:var(--surface);width:min(62rem,100vw - 2rem);max-height:calc(100vh - 5.25rem);color:var(--fg);border:1px solid var(--hairline);border-radius:var(--radius);padding:0 1.25rem 1.25rem;position:fixed;top:4.25rem;left:1rem;overflow-y:auto}.nav-sheet-head{z-index:1;background:var(--surface);border-bottom:1px solid var(--hairline);gap:.5rem;margin:0 -1.25rem 1rem;padding:1rem 1.25rem;display:flex;position:sticky;top:0}.nav-sheet-head input{min-width:0;font:inherit;color:inherit;background:var(--tint);border:1px solid var(--hairline);border-radius:var(--radius);box-sizing:border-box;flex:1;min-height:48px;padding:.4rem .9rem;font-size:1.05rem}.nav-sheet nav{columns:13rem;column-gap:1.5rem}.nav-sheet section{break-inside:avoid;margin-bottom:1.25rem}.nav-sheet h2{text-transform:uppercase;letter-spacing:.08em;color:var(--accent);border-bottom:1px solid var(--hairline);margin:0 0 .35rem;padding:0 .75rem .35rem;font-size:.8rem;font-weight:700}.nav-sheet ul{gap:2px;margin:0;padding:0;list-style:none;display:grid}nav a{color:inherit;box-sizing:border-box;border-radius:8px;align-items:center;min-height:44px;padding:.4rem .75rem;line-height:1.3;text-decoration:none;display:flex}nav a:hover{background:color-mix(in srgb, var(--accent) 14%, var(--surface))}nav a[aria-current]{background:var(--accent);color:var(--on-accent);font-weight:700}nav a[aria-current]:before{content:"▸";margin-right:.4rem}.nav-hint{font-weight:400;font-size:var(--text-sm);color:var(--muted);display:none}@media (width>=701px){.nav-hint{display:block}}nav a[aria-current] .nav-hint{color:var(--on-accent)}nav a:hover .nav-hint{color:var(--fg)}nav a[aria-current]:focus-visible{outline-color:var(--fg);box-shadow:0 0 0 2px var(--bg)}.status{flex-wrap:wrap;align-items:center;gap:.5rem .75rem;margin-left:auto;font-size:.9rem;display:flex}@media (orientation:landscape) and (height<=500px){.status .st-row .metronome-panel{box-sizing:border-box;max-width:calc(100vw - 1rem);max-height:calc(100vh - 1rem);position:fixed;top:.5rem;left:auto;right:.5rem;overflow-y:auto}}.status{gap:.5rem 1rem}.st-row{align-items:center;gap:.5rem;display:flex}.st-label{font-size:var(--text-sm);color:var(--accent);font-weight:700}.st-row>button,.st-row .metronome>button{min-width:7rem;min-height:2.25rem}.st-value{font-size:var(--text-sm)}.st-readout{font-variant-numeric:tabular-nums;min-width:5.5rem;font-size:var(--text-sm);display:inline-block}@media (width<=700px){header{display:contents}.topbar{z-index:10;box-sizing:border-box;background:var(--surface);border-bottom:1px solid var(--hairline);height:56px;padding:0 1rem;position:sticky;top:0}.topbar h1{white-space:nowrap;text-overflow:ellipsis;flex-shrink:0;font-size:.9rem;overflow:hidden}.topbar button{flex-shrink:0}.topbar{overflow:hidden}.topbar .current-view{min-width:0;margin-left:auto}.topbar{gap:.5rem}.status-btn{display:inline-block}.status{z-index:10;box-sizing:border-box;background:var(--surface);border-bottom:1px solid var(--hairline);max-height:calc(100vh - 56px);margin-left:0;padding:.5rem 1rem;display:none;position:fixed;top:56px;left:0;right:0;overflow-y:auto}.status[data-open=true]{display:flex}.status{flex-flow:column;align-items:stretch;gap:.25rem}.st-row{border-bottom:1px solid var(--hairline);min-height:48px}.st-row:last-child{border-bottom:0}.st-label{flex:0 0 6.5rem}.st-row>button,.st-row .metronome>button{min-height:44px}.st-row:has(.metronome-panel){flex-wrap:wrap}.st-row .metronome{display:contents}.st-row .metronome-panel{flex:1 0 100%;width:auto;max-width:none;margin:.5rem 0;position:static}.status-btn{text-overflow:ellipsis;white-space:nowrap;max-width:13rem;overflow:hidden}.nav-backdrop{display:none}.nav-sheet{border:0;border-radius:0;width:100vw;height:100dvh;max-height:none;padding:0 1rem 1.5rem;top:0;left:0}.nav-sheet-head{padding:calc(.75rem + env(safe-area-inset-top,0px)) 1rem .75rem;margin:0 -1rem 1rem}.nav-sheet nav{columns:1}nav a{min-height:48px;font-size:1.05rem}}main{box-sizing:border-box;background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius);max-width:1100px;margin:1.25rem auto 2rem;padding:1.25rem}@media (width<=1140px){main{margin:.75rem}}@media (width<=700px){main{margin:.5rem;padding:1rem .75rem}}.controls{flex-wrap:wrap;align-items:center;gap:.75rem 1rem;margin-bottom:1rem;display:flex}button,select,input{font:inherit;color:inherit}button,select{background:var(--tint);border:1px solid var(--hairline);border-radius:var(--radius-control);min-height:2.25rem;padding:.35rem .8rem}button{cursor:pointer}button:hover:not(:disabled){border-color:var(--accent);background:var(--btn-bg-hover)}button:active:not(:disabled){background:var(--btn-bg-active)}button:disabled,button[aria-disabled=true]{cursor:not-allowed;color:var(--muted);border:1px dashed var(--muted);background:0 0;font-weight:400}.btn-primary,.ui-primary{background:var(--accent);color:var(--on-accent);border-color:var(--accent);font-weight:700}button.btn-primary:hover:not(:disabled),button.ui-primary:hover:not(:disabled){background:var(--primary-hover);border-color:var(--primary-hover)}button.btn-primary:active:not(:disabled),button.ui-primary:active:not(:disabled){background:var(--primary-active);border-color:var(--primary-active)}.btn-ghost{background:0 0;border-color:#0000}button.btn-ghost:hover:not(:disabled){background:var(--btn-bg-hover);border-color:#0000}button.btn-ghost:active:not(:disabled){background:var(--btn-bg-active)}button.btn-danger:hover:not(:disabled){background:var(--btn-bg-hover);border-color:var(--danger)}input[type=range],progress{accent-color:var(--accent)}:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:var(--radius-sm)}.btn-primary:focus-visible,.ui-primary:focus-visible{box-shadow:0 0 0 2px var(--bg)}@media (pointer:coarse),(width<=700px){button,select,input,.button,summary{min-height:44px}button,.button{min-width:44px}.instrument-scroll{-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}.keyboard-scroll .instrument{min-width:calc(var(--cols,15) * 44px)}.fretboard-scroll .instrument{min-width:calc(var(--cols,13) * 82px)}}.instrument [role=button],.instrument [data-midi]{touch-action:pan-x pan-y pinch-zoom}.keyboard-scroll .instrument,.fretboard-scroll .instrument{-webkit-tap-highlight-color:transparent}.instrument-scroll{max-width:100%;padding-bottom:.25rem;overflow-x:auto}.instrument{width:100%;height:auto;display:block}.keyboard-scroll .instrument{max-width:760px;margin:auto}@media (pointer:fine) and (width>=701px){.fretboard-scroll .instrument{min-width:640px}}.instrument{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}.instrument text{-webkit-user-select:none;user-select:none}.key{stroke:var(--key-edge);stroke-width:.6px;cursor:pointer}.key-white:hover:not(.is-held){filter:brightness(.97)}.key-gloss{fill:var(--key-black-hi);opacity:.55}.key-ring{fill:none;stroke:var(--active);stroke-width:1.6px}.key.is-held{transform:translateY(1px)}.key-black{stroke:var(--key-black);filter:drop-shadow(0 2px 1.5px var(--key-shadow))}.key-white.is-root{stroke:var(--accent);stroke-width:1.4px}.key.is-held,.key[data-pressed]{fill:var(--active)!important}.key-label{fill:var(--key-label);font-size:6.5px;font-weight:600}.key-note{fill:var(--key-label);font-size:7px;font-weight:700}.key-note.on-black{fill:var(--key-white)}.key-marker circle{fill:var(--highlight);stroke:var(--line);stroke-width:.8px}.key-marker.is-guide rect{fill:var(--ok);stroke:var(--surface)}.key-marker rect{fill:var(--accent);stroke:var(--surface);stroke-width:.8px}.key-marker.is-held circle{fill:var(--on-active);stroke:var(--surface)}.fb-wood{fill:var(--wood);stroke:var(--wood-dark);stroke-width:1.5px}.fb-inlay{fill:var(--inlay);opacity:.85}.fb-grain{stroke:var(--wood-grain);stroke-width:.8px}.fb-fret{stroke:var(--fret-wire);stroke-width:2.6px;stroke-linecap:round;filter:drop-shadow(1px 0 .6px var(--key-shadow))}.fb-nut{fill:var(--nut);stroke:var(--wood-dark);stroke-width:.8px}.fb-nut-edge{stroke:var(--key-shadow);stroke-width:1.2px}.fb-ring{fill:none;stroke:var(--active);stroke-width:2px}.fb-open{fill:none;stroke:var(--capo);stroke-width:1.4px;stroke-dasharray:2.4 1.6}.fb-muted path{fill:none;stroke:var(--capo);stroke-width:2.4px;stroke-linecap:round}.fb-number{fill:var(--fb-label);font-size:10px}.fb-string{stroke:var(--string);pointer-events:none;filter:drop-shadow(0 1px .6px var(--key-shadow))}.fb-string.wound{stroke:var(--string-wound);stroke-dasharray:1.6 .7}.fb-note circle,.fb-note rect{stroke:var(--line);stroke-width:1px}.fb-note.is-scale circle{fill:var(--highlight)}.fb-note.is-guide rect{fill:var(--ok)}.fb-note.is-guide text{fill:var(--on-accent)}.fb-target{fill:none;stroke:var(--focus);stroke-width:3px;pointer-events:none}.key-target{fill:none;stroke:var(--focus);stroke-width:2.4px}.fb-note.is-root rect{fill:var(--accent)}.fb-note.is-held circle,.fb-note.is-held rect{fill:var(--active);stroke-width:2.5px}.fb-next{fill:none;stroke:var(--focus);stroke-width:3px;stroke-dasharray:4 2;pointer-events:none}.fb-band rect{stroke:var(--line);stroke-width:1px}.fb-band-0 rect{fill:var(--accent)}.fb-band-1 rect{fill:var(--highlight)}.fb-band text{pointer-events:none;font-size:10px;font-weight:700}.fb-band-0 text{fill:var(--on-accent)}.fb-band-1 text{fill:var(--on-highlight)}.fb-number.is-capo{fill:var(--fg);font-weight:800}.fb-barre{fill:var(--capo);opacity:.35;stroke:var(--capo);stroke-width:1.5px}.fb-capo-dim{fill:var(--wood-dark);opacity:.35}.fb-capo-bar{fill:var(--capo);stroke:var(--line);stroke-width:1px}.fb-capo-grip{stroke:var(--on-capo);stroke-width:2px;stroke-linecap:round;opacity:.7}.diagram-capo rect{fill:var(--capo);stroke:var(--line);stroke-width:1px}.diagram-capo text{fill:var(--on-capo);font-size:10px;font-weight:700}.capo-option[aria-pressed=true]{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}.capo-lesson .blues-chart{grid-template-columns:repeat(auto-fit,minmax(7rem,1fr))}.capo-lesson .blues-chart li{min-width:0}.capo-lesson .blues-chart button{white-space:normal;overflow-wrap:anywhere;width:100%}.capo-lesson .controls select{max-width:100%}.pent-box[aria-pressed=true]{background:var(--accent);color:var(--on-accent);font-weight:700}.fb-note text{fill:var(--on-highlight);pointer-events:none;font-size:10px;font-weight:700}.fb-note.is-root text{fill:var(--on-accent)}.fb-note.is-held text{fill:var(--on-active)}.lessons ul{gap:.5rem;padding:0;list-style:none;display:grid}.lessons li{align-items:center;gap:.5rem;display:flex}.lesson-tick{text-align:center;width:1.25rem;color:var(--ok-text);font-weight:700;display:inline-block}.lesson-count{font-size:var(--text-sm);color:var(--muted)}.lesson{max-width:800px;margin:auto}.lesson-step{min-height:6rem;margin:var(--space-4) 0}.lessons li:not([data-done]) .lesson-tick{color:var(--muted)}.card{border:1px solid var(--hairline);border-radius:var(--radius);padding:var(--space-4);background:var(--surface);box-shadow:var(--shadow-1)}.button{border:1px solid;border-radius:.25rem;padding:.25rem .6rem;text-decoration:none;display:inline-block}.instrument [role=button]{outline:none}.instrument [role=button]:focus-visible{stroke:var(--focus);stroke-width:3px;paint-order:stroke}.instrument .fb-cell:focus-visible{fill:none;stroke:var(--focus);stroke-width:3px;paint-order:normal;outline:3px solid var(--line);outline-offset:1px}.metronome{position:relative}.metronome-panel{z-index:10;background:var(--surface);color:var(--fg);border:1px solid var(--line);border-radius:var(--radius);box-sizing:border-box;flex-direction:column;gap:.5rem;width:18rem;min-width:14rem;max-width:calc(100vw - 1rem);padding:.75rem;display:flex;position:absolute;top:100%;right:0}.metronome-head{align-items:center;gap:.6rem;display:flex}.metronome-beats{flex-wrap:nowrap;flex:1;justify-content:center;gap:.3rem;min-width:0;display:flex}.metronome-close{margin-left:auto}.metronome-field{flex-direction:column;gap:.25rem;display:flex}.metronome-field label{font-size:var(--text-sm);font-weight:700}.metronome-tempo{align-items:center;gap:.6rem;display:flex}.metronome-tempo input[type=number]{flex:none;width:4.5rem}.metronome-tempo input[type=range]{flex:1;min-width:0}.metronome-dot{aspect-ratio:1;border:2px solid var(--fg);border-radius:50%;flex:0 1.1rem;width:1.1rem;min-width:.6rem}.metronome-dot[data-accent=true]{border-color:var(--accent)}.metronome-dot[data-medium=true]{border-color:var(--accent);border-style:dashed}.metronome-hint{font-size:var(--text-sm);color:var(--muted);margin:0}.metronome-dot[aria-current]{background:var(--highlight)}.metronome-dot[data-accent=true][aria-current]{background:var(--active)}.circle{flex-wrap:wrap;align-items:flex-start;gap:1.5rem;display:flex}.circle-key{cursor:pointer;outline:none}.circle-key circle{fill:var(--surface);stroke:var(--line);stroke-width:1px}.circle-key .circle-minor-bg{stroke:var(--subtle)}.circle-key text{text-anchor:middle;dominant-baseline:central;fill:var(--fg);pointer-events:none}.circle-major{font-size:15px;font-weight:600}.circle-minor{font-size:11px}.circle-major.circle-pair{font-size:10px}.circle-minor.circle-pair{font-size:8px}.circle-key.is-related circle{fill:var(--highlight)}.circle-key.is-related text{fill:var(--on-highlight)}.circle-key.is-selected circle{fill:var(--accent)}.circle-key.is-selected text{fill:var(--on-accent)}.circle-key:focus-visible circle{stroke:var(--focus);stroke-width:3px}.circle-center{text-anchor:middle;fill:var(--fg);font-size:22px;font-weight:700}.circle-sig{text-anchor:middle;fill:var(--fg);font-size:9px}.circle-chords{flex-wrap:wrap;gap:.75rem;padding:0;list-style:none;display:flex}.blues-chart{grid-template-columns:repeat(4,1fr);gap:.5rem;max-width:32rem;padding:0;list-style:none;display:grid}.blues-chart li{border:1px solid var(--line);text-align:center;border-radius:6px;padding:.5rem}.blues-chart li.is-current{background:var(--highlight);color:var(--on-highlight)}.blues-chart li.is-current button{color:inherit;border-color:var(--on-highlight);background:0 0}.strum-diagram{text-align:center;grid-template-columns:repeat(8,1fr);gap:.25rem;padding:0;list-style:none;display:grid}.strum-diagram li{border:1px solid var(--line);border-radius:6px;padding:.5rem 0}.strum-diagram li.is-current{background:var(--highlight);color:var(--on-highlight)}.beat-diagram{grid-template-columns:repeat(var(--cols,4), 1fr);text-align:center;gap:.25rem;padding:0;list-style:none;display:grid}.beat-diagram li{border:1px solid var(--line);border-radius:6px;flex-direction:column;padding:.5rem .25rem;display:flex}.beat-diagram li.is-current,.run-notes li.is-current{background:var(--highlight);color:var(--on-highlight)}.clave-grid{text-align:center;grid-template-columns:repeat(8,1fr);gap:.25rem;max-width:36rem;margin:0 0 .75rem;padding:0;list-style:none;display:grid}.clave-grid li{border:1px solid var(--line);border-radius:6px;flex-direction:column;padding:.3rem 0;display:flex}.clave-grid li[data-hit=true]{border-width:2px;font-weight:700}.clave-grid li:nth-child(8n+1){border-left-width:3px}.clave-grid li.is-current{background:var(--highlight);color:var(--on-highlight)}.clave-mark{font-size:1.3rem;line-height:1.3}.clave-label{margin:.5rem 0 .25rem;font-weight:600}.funk-grid{text-align:center;grid-template-columns:repeat(4,1fr);gap:.25rem;max-width:24rem;margin:0 0 .75rem;padding:0;list-style:none;display:grid}.funk-grid li{border:1px solid var(--line);border-radius:6px;flex-direction:column;padding:.3rem 0;display:flex}.funk-grid li[data-mark=M]{border-style:dashed}.funk-grid li[data-accent=true]{border-width:3px;font-weight:700}.funk-grid li.is-current{background:var(--highlight);color:var(--on-highlight)}.funk-mark{font-size:1.3rem;line-height:1.3}.run-notes{flex-wrap:wrap;gap:.5rem;padding:0;list-style:none;display:flex}.run-notes li{border:1px solid var(--line);border-radius:6px;padding:.4rem .75rem}.strum-arrow{font-size:1.8rem;line-height:1.2;display:block}.tab{border-collapse:collapse;margin:1rem 0;font-family:monospace}.tab th,.tab td{text-align:center;padding:.15rem .6rem}.tab td{border-top:1px solid var(--line)}.tab td.is-current{background:var(--highlight);color:var(--on-highlight)}:root{--staff-line:#3a3a40;--staff-note:#1d1d1f}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--staff-line:#b8b8c0;--staff-note:#f2f2f2}}:root[data-theme=dark]{--staff-line:#b8b8c0;--staff-note:#f2f2f2}:root[data-theme=light]{--staff-line:#3a3a40;--staff-note:#1d1d1f}.staff-wrap{max-width:100%;margin:var(--gap) 0;background:var(--surface);border:1px solid var(--subtle);border-radius:var(--radius);padding:.25rem .5rem;overflow-x:auto}.staff{width:100%;height:auto;margin:auto;display:block}.staff-line{stroke:var(--staff-line);stroke-width:1.3px}.staff-clef{fill:none;stroke:var(--staff-note);stroke-width:2.4px;stroke-linecap:round;stroke-linejoin:round}.staff-clef-fill{fill:var(--staff-note)}.staff-acc{fill:var(--staff-note);font-family:Noto Music,Segoe UI Symbol,Apple Symbols,serif}.staff-note{fill:var(--staff-note)}.staff-note.on{fill:var(--highlight);stroke:var(--staff-note);stroke-width:1.5px}.staff-ring{fill:none;stroke:var(--active);stroke-width:2.5px}.rhythm-diagram{grid-template-columns:repeat(var(--cols,8), 1fr)}.rhythm-diagram li[data-bar-start=true]{border-left-width:3px}.rhythm-diagram li[data-result=miss]{border-color:var(--danger)}.note-values-wrap{max-width:100%;overflow-x:auto}.note-values{border-collapse:collapse;margin:var(--gap) 0;background:var(--surface)}.note-values caption{text-align:left;padding-bottom:.5rem}.note-values th,.note-values td{border-bottom:1px solid var(--subtle);text-align:left;padding:.25rem .5rem}.note-values td:nth-child(2),.note-values td:nth-child(3){text-align:center}.note-glyph{display:block}.glyph-ink{stroke:var(--staff-note)}.glyph-fill{fill:var(--staff-note)}.glyph-hole{fill:var(--surface);stroke:none}.count-row{grid-template-columns:repeat(var(--n,8), minmax(0, 1fr));text-align:center;gap:.25rem;max-width:40rem;padding:0;list-style:none;display:grid}.count-row li{border:1px solid var(--line);border-radius:6px;padding:.5rem 0;font-size:1.1rem}.count-row li[data-beat=true]{border-width:2px;font-weight:800}.count-row li.is-current{background:var(--highlight);color:var(--on-highlight)}.rhythm-diagram li[data-onset=false]{opacity:.6}.rhythm-diagram li[data-result=hit]{border-color:var(--ok-text)}.rhythm-diagram li[data-result=miss]{border-style:dashed}.rhythm-hit{color:var(--ok-text)}.rhythm-miss{color:var(--danger)}.settings{gap:var(--space-3);max-width:520px;display:grid}.settings>*{min-width:0;max-width:100%;margin-block:0}.settings h3{margin-top:var(--space-3);padding-bottom:var(--space-1);border-bottom:1px solid var(--hairline)}.settings-field{gap:var(--space-1);justify-items:start;display:grid}.settings-field label{font-weight:600}.settings-field select,.settings-field input[type=number]{max-width:100%}.settings-row{align-items:center;gap:var(--space-3);max-width:100%;display:flex}.settings-row output{font-variant-numeric:tabular-nums;min-width:3.5ch}.settings-help{font-size:var(--text-sm);color:var(--muted);margin:0}.settings-actions{gap:var(--space-2);flex-wrap:wrap;align-items:center;display:flex}.settings-file{background:var(--tint);border:1px solid var(--hairline);cursor:pointer;border-radius:8px;padding:.4rem .8rem;display:inline-block;position:relative}.settings-file:hover{border-color:var(--accent);background:var(--btn-bg-hover)}.settings-file input{opacity:0;cursor:pointer;width:100%;height:100%;position:absolute;inset:0}.settings-file:focus-within{outline:3px solid var(--focus);outline-offset:2px}.settings-status{min-height:0;margin:0;font-weight:600}.settings-danger{gap:var(--space-1);margin-top:var(--space-4);padding-top:var(--space-4);border-top:1px solid var(--hairline);justify-items:start;display:grid}.settings-reset,.btn-danger{color:var(--danger);border-color:var(--danger);background:0 0}.key-finger{fill:var(--accent);paint-order:stroke;stroke:var(--bg);stroke-width:2px;font-size:12px;font-weight:800}.scale-practice[data-wrong]{outline:3px solid var(--danger)}.circle-key.is-correct circle{fill:var(--ok)}.circle-key.is-correct text{fill:var(--on-active)}.circle-key.is-wrong circle{fill:var(--active)}.circle-key.is-wrong text{fill:var(--on-active)}.ukstrum-grid{text-align:center;grid-template-columns:repeat(8,1fr);gap:.25rem;max-width:32rem;margin:0 0 .5rem;padding:0;list-style:none;display:grid}.ukstrum-grid li{border:1px solid var(--line);border-radius:6px;flex-direction:column;min-width:0;padding:.3rem 0;display:flex}.ukstrum-grid li[data-stroke=D],.ukstrum-grid li[data-stroke=U]{border-width:3px;font-weight:700}.ukstrum-grid li.is-current{background:var(--highlight);color:var(--on-highlight)}.ukstrum-grid small{font-size:var(--text-sm)}.ukstrum-chords{flex-wrap:wrap;gap:.5rem;margin:0 0 .5rem;padding:0;list-style:none;display:flex}.ukstrum-chords li{border:1px solid var(--line);border-radius:6px;padding:.2rem .6rem}.ukstrum-chords li.is-current{background:var(--highlight);color:var(--on-highlight)}.reggae-grid{text-align:center;grid-template-columns:repeat(8,1fr);gap:.25rem;max-width:32rem;margin:0 0 .5rem;padding:0;list-style:none;display:grid}.reggae-grid li{border:1px solid var(--line);border-radius:6px;flex-direction:column;min-width:0;padding:.3rem 0;display:flex}.reggae-grid li[data-mark=S]{border-width:3px;font-weight:700}.reggae-grid li[data-drop=true]{border-style:double;border-width:3px;font-weight:700}.reggae-grid li.is-current{background:var(--highlight);color:var(--on-highlight)}.reggae-grid small{font-size:var(--text-sm);overflow-wrap:anywhere;text-align:center}.reggae-shapes{flex-wrap:wrap;gap:1rem;display:flex}.diatonic-cards{grid-template-columns:repeat(auto-fit,minmax(5.5rem,1fr));gap:.5rem;padding:0;list-style:none;display:grid}.diatonic-cards li{border:2px solid var(--line);border-radius:var(--radius);background:var(--surface)}.diatonic-cards li.fn-subdominant{border-style:dashed}.diatonic-cards li.fn-dominant{border-style:double;border-width:4px}.diatonic-cards li.is-current{background:var(--highlight);color:var(--on-highlight)}.diatonic-cards button{width:100%;color:inherit;background:0 0;border:0;flex-direction:column;align-items:center;gap:.1rem;padding:.5rem .25rem;display:flex}.diatonic-cards strong{font-size:1.25rem}.diatonic-legend{font-size:var(--text-sm);color:var(--muted);flex-wrap:wrap;gap:.25rem 1rem;display:flex}.diatonic-steps{flex-wrap:wrap;gap:.5rem;padding:0;list-style:none;display:flex}.diatonic-steps li{border:1px solid var(--line);border-radius:6px;padding:.35rem .6rem}.diatonic-steps li.is-current{background:var(--highlight);color:var(--on-highlight)}.diatonic-steps li.is-done{border-color:var(--ok-text);color:var(--ok-text)}.diatonic-answers{flex-wrap:wrap;gap:.5rem;display:flex}.compas-grid{text-align:center;grid-template-columns:repeat(12,1fr);gap:.25rem;max-width:40rem;margin:0 0 .5rem;padding:0;list-style:none;display:grid}.compas-grid li{border:1px solid var(--line);border-radius:6px;flex-direction:column;min-width:0;padding:.3rem 0;display:flex}.compas-grid li[data-accent=true]{border-width:3px;font-weight:700}.compas-grid li.is-current{background:var(--highlight);color:var(--on-highlight)}.compas-grid small{font-size:var(--text-sm)}@media (width<=480px){.compas-grid{grid-template-columns:repeat(6,1fr)}}.sev-types,.sev-diatonic{flex-wrap:wrap;gap:.5rem;padding:0;list-style:none;display:flex}.sev-types li,.sev-diatonic li{flex:5.5rem}.sev-types button,.sev-diatonic button{flex-direction:column;align-items:center;width:100%;padding:.5rem;display:flex}.sev-types strong{font-size:1.25rem}.sev-types button[aria-pressed=true]{background:var(--highlight);color:var(--on-highlight);border-width:2px}.sev-stack{flex-direction:column-reverse;gap:0;max-width:20rem;padding:0;list-style:none;display:flex}.sev-note{border:2px solid var(--line);border-radius:var(--radius);background:var(--surface);margin-top:1.4rem;padding:.4rem .75rem;position:relative}.sev-note:last-child{margin-top:0}.sev-note strong{font-size:1.2rem}.sev-third{font-size:.85rem;font-weight:600;position:absolute;top:-1.45rem;left:.75rem}.sev-third:before{content:"↑"}.fp-scroll{max-width:100%;overflow-x:auto}.fp-grid td,.fp-grid th{min-width:2.2rem;padding:.2rem .3rem}.fp-grid td[data-hit=true]{font-weight:700}.fp-grid td[data-hit=true][data-role=root],.fp-grid td[data-hit=true][data-role=fifth]{outline:3px solid var(--fg);outline-offset:-3px;border-radius:6px}.fp-grid td[data-hit=true][data-role=fifth]{outline-style:dashed}.fp-grid th.is-current{background:var(--highlight);color:var(--on-highlight)}.fp-grid small{font-size:var(--text-sm);font-weight:400;display:block}.fp-beats{text-align:center;grid-template-columns:repeat(4,1fr);gap:.25rem;max-width:32rem;margin:.5rem 0;padding:0;list-style:none;display:grid}.fp-beats li{border:1px solid var(--line);border-radius:6px;flex-direction:column;min-width:0;padding:.25rem 0;display:flex}.fp-beats li[data-result=hit]{color:var(--ok-text);border-width:3px}.fp-beats li[data-result=miss]{color:var(--danger);border-style:dashed;border-width:3px}.fp-beats li.is-current{background:var(--highlight);color:var(--on-highlight)}.inv-picker,.inv-seq{flex-wrap:wrap;gap:.5rem;margin:.5rem 0;padding:0;list-style:none;display:flex}.inv-picker li,.inv-seq li{flex:3.5rem}.inv-picker button,.inv-seq button{flex-direction:column;align-items:center;gap:.1rem;width:100%;display:flex}.inv-picker strong,.inv-seq strong{font-size:1.25rem}.inv-picker button[aria-pressed=true],.inv-seq li.is-current button{background:var(--highlight);color:var(--on-highlight)}.gblues-beats{text-align:center;grid-template-columns:repeat(4,1fr);gap:.5rem;max-width:32rem;margin:0 0 .75rem;padding:0;list-style:none;display:grid}.gblues-beats li{border:1px solid var(--line);border-radius:6px;flex-direction:column;gap:.2rem;min-width:0;padding:.4rem .25rem;display:flex}.gblues-beats li.is-current{background:var(--highlight);color:var(--on-highlight)}.gblues-beats span{border:1px solid var(--line);border-radius:4px;padding:.1rem 0;font-size:.8rem}.gblues-beats li:not([data-feel]) span:first-of-type{font-weight:700}.gblues-beats span.is-hit{background:var(--on-highlight);color:var(--highlight)}.gblues-bars li{overflow-wrap:anywhere;min-width:0}.gblues-bars li[data-result=miss]{border-style:dashed}.lh-events{flex-wrap:wrap;gap:.5rem;margin:.5rem 0;padding:0;list-style:none;display:flex}.lh-events li{text-align:center;border:1px solid var(--subtle);background:var(--surface);border-radius:6px;flex:3rem;padding:.35rem .25rem;font-weight:700}.lh-events li.is-current{background:var(--highlight);color:var(--on-highlight);border-color:var(--accent)}.lh-tempo{flex-wrap:wrap;align-items:center;gap:.5rem;max-width:100%;display:inline-flex}.lh-tempo input{max-width:100%}.home{max-width:800px;margin:auto}.home-card{background:var(--surface);margin-bottom:1rem}.home-card h3,.home-track h4{margin:0 0 .25rem}.home-note{font-size:var(--text-sm);color:var(--muted)}.home-cta{background:var(--accent);color:var(--on-accent);border-color:var(--accent);box-sizing:border-box;min-height:44px;padding:.5rem 1rem;font-weight:700;line-height:1.7}.home-path{grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:.75rem;margin:0 0 1rem;padding:0;list-style:none;display:grid}.home-track{background:var(--surface);flex-direction:column;gap:.25rem;min-width:0;display:flex}.home-track p{margin:0}.home-track progress{width:100%}.home-track a{min-height:44px;color:var(--accent);overflow-wrap:anywhere;align-items:center;display:inline-flex}.home-card a:not(.button){min-height:44px;color:var(--accent);align-items:center;display:inline-flex}.home h2{margin-top:0}.home code{overflow-wrap:anywhere}h1 a{color:inherit;align-items:center;min-height:44px;text-decoration:none;display:inline-flex}.jam-now{border:1px solid var(--hairline);border-radius:var(--radius);background:var(--tint);flex-wrap:wrap;align-items:center;gap:1rem 2rem;margin:0 0 1rem;padding:1rem;display:flex}.jam-chord{min-width:2.5ch;margin:0;font-size:clamp(3rem,14vw,5.5rem);font-weight:800;line-height:1}.jam-next{margin:0;font-size:1.3rem}.jam-next strong{font-size:1.6rem}.jam-beats{gap:.4rem;margin:0;padding:0;list-style:none;display:flex}.jam-beats li{border:2px solid var(--fg);border-radius:50%;place-items:center;width:1.6rem;height:1.6rem;font-size:.8rem;font-weight:700;display:grid}.jam-beats li[aria-current=true]{background:var(--accent);color:var(--on-accent);border-color:var(--accent);transform:scale(1.2)}.jam-loop{flex-wrap:wrap;gap:.4rem;margin:.5rem 0 0;padding:0;list-style:none;display:flex}.jam-loop li{border:1px solid var(--hairline);border-radius:999px;padding:.15rem .6rem}.jam-loop li[aria-current=true]{background:var(--accent);color:var(--on-accent);border-color:var(--accent);font-weight:700}.jam-legend{font-size:var(--text-sm);color:var(--muted);flex-wrap:wrap;gap:.5rem 1.25rem;margin:.75rem 0 0;display:flex}.jam-controls button.primary{background:var(--accent);color:var(--on-accent);border-color:var(--accent);min-width:6rem;font-weight:700}.sr-only{clip-path:inset(50%);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.skip-link{z-index:100;box-sizing:border-box;background:var(--bg);min-height:44px;color:var(--fg);border:2px solid var(--focus);border-radius:6px;padding:.75rem 1rem;position:absolute;top:-4rem;left:.5rem}.skip-link:focus{top:.5rem}main:focus{outline:none}.swing-notation{gap:var(--space-4);flex-wrap:wrap;display:flex}.swing-notation figure{flex:14rem;max-width:20rem;margin:0}.swing-notation svg{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius);width:100%;max-width:16rem;height:auto;display:block}.swing-notation figcaption{font-size:var(--text-sm);margin:var(--space-2) 0}.swing-count,.swing-three{fill:var(--fg);font-family:inherit;font-size:13px;font-weight:700}.swing-three{font-style:italic}.swing-bar{min-height:2.25rem;margin:var(--space-2) 0;gap:2px;display:flex}.swing-bar span{justify-content:center;align-items:center;gap:var(--space-1);min-width:0;padding:var(--space-1);border:2px solid var(--line);border-radius:var(--radius-sm);background:var(--surface);font-size:var(--text-sm);flex-basis:0;display:flex}.swing-bar span:first-child{border-style:solid}.swing-bar span:last-child{border-style:dashed}.swing-bar span.is-current{background:var(--highlight);color:var(--on-highlight)}.swing-counts{gap:var(--space-1);margin:0 0 var(--space-3);text-align:center;grid-template-columns:repeat(8,1fr);max-width:32rem;padding:0;list-style:none;display:grid}.swing-counts li{border:1px solid var(--line);border-radius:var(--radius-sm);padding:var(--space-1) 0;flex-direction:column;justify-content:center;min-width:0;min-height:3rem;display:flex}.swing-counts li[data-offbeat=true]{border-style:dashed;border-width:2px}.swing-counts li[data-offbeat=false]{font-weight:700}.swing-counts li.is-current{background:var(--highlight);color:var(--on-highlight)}.swing-feel{gap:var(--space-3);border:1px solid var(--hairline);border-radius:var(--radius-control);padding:var(--space-1) var(--space-3);display:flex}.swing-groove input[type=range]{vertical-align:middle;max-width:40vw}.swing-feel label{align-items:center;gap:var(--space-2);white-space:nowrap;display:inline-flex}.jam-feedback{align-items:center;gap:var(--space-2) var(--space-4);margin:var(--space-3) 0;flex-wrap:wrap;display:flex}.jam-badge{padding:var(--space-1) var(--space-3);border-radius:var(--radius-pill);border:2px solid var(--line);background:var(--surface);min-height:2rem;margin:0}.jam-badge[data-class=chord]{border-color:var(--ok)}.jam-badge[data-class=scale]{border-color:var(--highlight)}.jam-badge[data-class=avoid]{border-color:var(--active);border-style:dashed}.jam-badge[data-class=outside]{border-color:var(--fg);border-style:dotted}button:not(:disabled):active{outline:2px solid var(--focus)}.key:active,.key[data-pressed]{opacity:.85}.fb-cell:active{opacity:.6}.play-status{border-radius:6px;padding:.1rem .4rem;display:inline-block}.play-status[data-state=correct]{outline:2px solid var(--ok-text)}.play-status[data-state=wrong]{outline:2px dashed var(--danger)}.jam-ctl{flex-direction:column;gap:.75rem;margin-bottom:1rem;display:flex}.jam-group{border:1px solid var(--hairline);border-radius:var(--radius);flex-wrap:wrap;align-items:center;gap:.6rem 1rem;min-width:0;margin:0;padding:.5rem .85rem .75rem;display:flex}.jam-group legend{padding:0 .4rem;font-weight:700}.jam-group label{flex-wrap:wrap;align-items:center;gap:.4rem;max-width:100%;display:inline-flex}.jam-group select{text-overflow:ellipsis;min-width:0;max-width:100%}.jam-help{color:var(--muted);flex-basis:100%;margin:0;font-size:.9rem}.jam-ctl button.jam-start{background:var(--accent);color:var(--on-accent);border-color:var(--accent);align-self:flex-start;min-width:10rem;min-height:3rem;font-size:1.1rem;font-weight:700}@media (width<=700px){.jam-ctl button.jam-start{align-self:stretch}}.practice{gap:var(--space-4);max-width:60rem;display:grid}.practice h2,.practice h3,.practice h4{margin:0}.practice .card>h3,.practice .card>h4{margin-bottom:var(--space-2)}.practice .card>p{margin:0 0 var(--space-3)}.practice .pr-help{font-size:var(--text-sm);color:var(--muted)}.practice .pr-input{align-items:center;gap:var(--space-2) var(--space-4);font-size:var(--text-sm);flex-wrap:wrap;margin:0;display:flex}.practice .pr-primary{border-color:var(--accent);border-width:2px}.practice .pr-cta{background:var(--accent);color:var(--on-accent);border-color:var(--accent);padding:var(--space-2) var(--space-4);font-weight:700}.practice .pr-grid{gap:var(--space-3);grid-template-columns:repeat(auto-fill,minmax(14rem,1fr));margin:0;padding:0;list-style:none;display:grid}.practice .pr-grid .card{flex-direction:column;align-items:flex-start;display:flex}.practice .pr-grid .card>.button{margin-top:auto}.practice .pr-weak{gap:var(--space-2);margin:0;padding:0;list-style:none;display:grid}.practice .pr-weak li{align-items:center;gap:var(--space-2) var(--space-3);flex-wrap:wrap;display:flex}.plan .plan-head{gap:var(--space-1);margin-bottom:var(--space-3);display:grid}.plan .plan-head h2{margin:0}.plan .plan-label{font-size:var(--text-sm);color:var(--muted);margin:0}.plan .plan-head progress{width:100%;max-width:24rem;accent-color:var(--accent)}.more{border:1px solid var(--hairline);background:var(--surface);border-radius:8px;margin:.75rem 0}.more>summary{cursor:pointer;border-radius:8px;padding:.5rem .85rem;font-weight:600}.more>summary:hover{background:var(--btn-bg-hover)}.more>summary:focus-visible{outline:3px solid var(--focus);outline-offset:2px}.more[open]>summary{border-bottom:1px solid var(--hairline);border-radius:8px 8px 0 0}.more-body{padding:.25rem .85rem .75rem}.more-body h3{margin:.75rem 0 .25rem;font-size:1rem}.more-body p{margin:.25rem 0}.lesson-legend{font-size:var(--text-sm);flex-wrap:wrap;gap:.25rem .5rem;margin:.5rem 0;padding:0;list-style:none;display:flex}.lesson-legend li{border:1px solid var(--hairline);background:var(--surface);border-radius:999px;padding:.15rem .55rem}@media (width<=480px){.topbar h1{position:relative}.topbar{gap:.35rem;padding:0 .5rem}.brand-more{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;margin:-1px;padding:0;position:absolute;top:0;left:0;overflow:hidden}}.metronome-beats:has(.metronome-dot:nth-child(5)){flex-wrap:wrap}@media (width<=480px){.st-on{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;margin:-1px;position:absolute;overflow:hidden}.st-summary{position:relative}.topbar .current-view{min-width:3.5rem}}header{padding-top:max(.75rem, env(safe-area-inset-top));padding-left:max(1rem, env(safe-area-inset-left));padding-right:max(1rem, env(safe-area-inset-right))}main{padding-left:max(1rem, env(safe-area-inset-left));padding-right:max(1rem, env(safe-area-inset-right));padding-bottom:max(1rem, env(safe-area-inset-bottom))}body{padding-bottom:env(safe-area-inset-bottom)}@media (pointer:coarse),(width<=700px){select,input:not([type=range],[type=checkbox],[type=radio],[type=file]),textarea{font-size:16px}}.fp-bass-short{display:none}@media (width<=700px){.fp-scroll{overflow-x:visible}.fp-grid{table-layout:fixed;width:100%;margin:.5rem 0}.fp-grid td,.fp-grid th{min-width:0;padding:.15rem 0;font-size:.75rem;overflow:hidden}.fp-grid th[scope=col]:first-child{width:3.2rem;font-size:var(--text-sm)}.fp-grid th[scope=row]{width:2.4rem}.fp-grid small{font-size:var(--text-sm)}.fp-grid td[data-hit=true][data-role=root],.fp-grid td[data-hit=true][data-role=fifth]{outline-offset:-2px;border-radius:3px;outline-width:2px}.fp-bass-long{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.fp-bass-short{display:inline}}@media (orientation:landscape) and (height<=500px){header{padding-top:env(safe-area-inset-top);gap:0;padding-bottom:0}header>nav{scrollbar-width:none;flex-wrap:nowrap;order:1;width:100%;padding:0;overflow-x:auto}header>h1{white-space:nowrap;order:2;font-size:1rem}header>.status{white-space:nowrap;scrollbar-width:none;flex-wrap:nowrap;flex:1;order:3;gap:0 .75rem;width:auto;min-width:0;margin-left:.75rem;overflow-x:auto}header>.status>*{flex-shrink:0}}@media (width<=700px){.controls>label{min-width:0;max-width:100%}label>input,label>select{box-sizing:border-box;min-width:0;max-width:100%}}.ui-progress{align-items:center;gap:.75rem;margin:.25rem 0 1rem;display:flex}.ui-progress-text{white-space:nowrap;font-size:.9rem}.ui-progress-track{background:var(--surface);border:1px solid var(--subtle);border-radius:999px;flex:1;min-width:3rem;height:.6rem;overflow:hidden}.ui-progress-fill{background:var(--accent);border-radius:999px;height:100%}.ui-feedback{border-radius:var(--radius);border:2px solid var(--subtle);background:var(--surface);align-items:center;gap:.5rem;margin:.5rem 0;padding:.5rem .75rem;font-size:1.1rem;font-weight:600;display:flex}.ui-feedback:before{content:"…";border:2px solid;border-radius:50%;flex:none;justify-content:center;align-items:center;width:1.5rem;height:1.5rem;font-weight:700;display:inline-flex}.ui-feedback[data-state=correct]{color:var(--ok-text);border-color:var(--ok-text)}.ui-feedback[data-state=correct]:before{content:"✓"}.ui-feedback[data-state=try-again]{color:var(--danger);border-style:dashed;border-color:var(--danger)}.ui-feedback[data-state=try-again]:before{content:"↻";border-radius:4px}.ui-empty{text-align:center;border:2px dashed var(--subtle);border-radius:var(--radius);padding:1.5rem 1rem}.ui-loading{align-items:center;gap:.5rem;display:flex}.ui-stepnav{justify-content:space-between;gap:1rem;margin-top:1rem;display:flex}.ui-stepnav button{min-width:6rem}@media (width<=700px){.ui-stepnav{z-index:5;background:var(--surface);border-top:1px solid var(--hairline);padding:.5rem .75rem max(.5rem, env(safe-area-inset-bottom));border-radius:0 0 var(--radius) var(--radius);margin-inline:-.75rem;position:sticky;bottom:0}.ui-stepnav button{flex:1}}.lesson-step-title:focus,.lesson-step:focus{outline:none}.lesson-step-title:focus-visible{outline:3px solid var(--focus)}.lessons-continue{border:2px solid var(--accent);border-radius:var(--radius);flex-wrap:wrap;align-items:center;gap:.75rem;margin-bottom:1rem;padding:.75rem 1rem;display:flex}.lessons li{flex-wrap:wrap}.lessons li .ui-progress{flex:0 9rem;margin:0}.lesson-badge{background:var(--accent);color:var(--on-accent);border-radius:999px;padding:.1rem .5rem;font-size:.85rem;font-weight:700}