@font-face{font-family:Atkinson Hyperlegible Next Variable;font-style:normal;font-display:swap;font-weight:200 800;src:url(./atkinson-hyperlegible-next-latin-ext-wght-normal-C6vrW8VD.woff2)format("woff2-variations");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Atkinson Hyperlegible Next Variable;font-style:normal;font-display:swap;font-weight:200 800;src:url(./atkinson-hyperlegible-next-latin-wght-normal-BcXVPD7q.woff2)format("woff2-variations");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Bravura;src:url(./Bravura-CEAu5fi8.woff2)format("woff2");font-display:block}:root{--paper:#eef2f5;--sheet:#fbfcfd;--ink:#1d2340;--ink-soft:#545b7a;--line:#c9d1dc;--felt:#7a1f2b;--ivory:#fbfaf6;--ebony:#23232b;--right:#2e7d5b;--right-wash:#dcefe5;--amber:#b86e0b;--amber-wash:#f8ead2;--select:#3f57b8;--select-wash:#dfe5fa;--radius-s:8px;--radius-l:18px;--font:"Atkinson Hyperlegible Next Variable", system-ui, sans-serif;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}@media (prefers-color-scheme:dark){:root{--paper:#141729;--sheet:#1c2036;--ink:#e8eaf4;--ink-soft:#a4a9c3;--line:#3a4060;--felt:#8e2634;--ivory:#ecebe4;--ebony:#0d0d12;--right:#5fc394;--right-wash:#1f3a31;--amber:#f0a73d;--amber-wash:#3e3020;--select:#8ea2f2;--select-wash:#2a3260;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}}*{box-sizing:border-box}html{touch-action:manipulation;-webkit-text-size-adjust:100%}body{background:var(--paper);color:var(--ink);font-family:var(--font);-webkit-tap-highlight-color:transparent;margin:0;font-size:19px;line-height:1.5}h1,h2,h3{letter-spacing:-.01em;margin:0 0 .5em;font-weight:700;line-height:1.15}h1{font-size:2.1rem}h2{font-size:1.45rem}h3{font-size:1.15rem}p{max-width:62ch;margin:0 0 .8em}a{color:inherit}button,.button{font:inherit;border-radius:var(--radius-s);border:2px solid var(--ink);background:var(--sheet);min-width:48px;min-height:48px;color:var(--ink);cursor:pointer;-webkit-user-select:none;user-select:none;justify-content:center;align-items:center;gap:.5em;padding:.55em 1.2em;font-weight:600;text-decoration:none;display:inline-flex}button.primary,.button.primary{background:var(--ink);color:var(--sheet)}button:disabled{opacity:.45;cursor:default}button:focus-visible,.button:focus-visible,a:focus-visible{outline:3px solid var(--select);outline-offset:2px}button.quiet{color:var(--ink-soft);background:0 0;border-color:#0000}@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}.keyboard{overscroll-behavior-x:contain;width:100%;overflow-x:auto}.keyboard-felt{background:var(--felt);height:10px;min-width:var(--kb-min,0);border-radius:4px 4px 0 0}.keyboard svg{width:100%;min-width:var(--kb-min,0);touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;max-height:40vh;display:block}.key{cursor:pointer}.key text{font-family:var(--font);pointer-events:none;font-size:26px;font-weight:600}.key-white rect{fill:var(--ivory);stroke:var(--line);stroke-width:2px}.key-white text{fill:#4a4f66}.key-black rect{fill:var(--ebony)}.key-black text{fill:#e9e9ef;font-size:20px}.key[data-mark=selected] rect{fill:var(--select)}.key-white[data-mark=selected] rect{fill:#c7d1f5}.key[data-mark=given] rect{fill:#9aa6cf}.key-white[data-mark=given] rect{fill:#d9def0}.key[data-mark=correct] rect{fill:#3f9e74}.key-white[data-mark=correct] rect{fill:#bfe3cf}.key[data-mark=wrong] rect{fill:#c9801a}.key-white[data-mark=wrong] rect{fill:#f4d39d}.key[data-mark=hint] rect{stroke:var(--right);stroke-width:6px}.key:active rect{filter:brightness(.93)}.staff{touch-action:none;-webkit-user-select:none;user-select:none;width:100%;max-height:34vh;display:block}.staff .glyph{fill:var(--ink);font-family:Bravura}.staff-line{stroke:var(--ink);stroke-width:1.6px}.staff-hidden{fill:var(--select);font-size:44px;font-weight:700}.staff-correct .glyph{fill:var(--right)}.staff-wrong .glyph{fill:var(--amber)}.staff-ghost .glyph{fill:var(--select);opacity:.8}.staff-ghost .staff-line{stroke:var(--select)}.staff-hit{fill:#0000;cursor:pointer}.circle{touch-action:manipulation;width:100%;max-width:420px;max-height:50vh;margin:0 auto;display:block}.circle-major{fill:var(--sheet);stroke:var(--line);stroke-width:1.5px}.circle-minor{fill:var(--paper);stroke:var(--line);stroke-width:1.5px}.circle-hi .circle-major,.circle-hi .circle-minor{fill:var(--select-wash);stroke:var(--select)}.circle-tap{cursor:pointer}.circle-label{fill:var(--ink);font-family:var(--font);pointer-events:none;font-size:24px;font-weight:700}.circle-label.small{font-size:16px}.circle-label.minor{fill:var(--ink-soft);font-size:17px;font-weight:500}.circle-label.q{fill:var(--select);font-size:30px}.fretboard{width:100%;max-height:28vh;display:block}.fb-wood{fill:#5a3a2a}.fb-inlay{fill:#e9dfcf;opacity:.7}.fb-fret{stroke:#c9c2b5;stroke-width:3px}.fb-nut{stroke:#efe8da;stroke-width:8px}.fb-string{stroke:#d9d4cb}.fb-muted{fill:var(--ink-soft);font-size:24px;font-family:var(--font)}.fb-fretno{fill:var(--ink-soft);font-size:16px;font-family:var(--font)}.fb-mark circle{fill:var(--select);stroke:var(--sheet);stroke-width:2px}.fb-root circle{fill:var(--felt)}.fb-mark text{fill:#fff;font-family:var(--font);font-size:13px;font-weight:700}.exercise{flex-direction:column;gap:14px;display:flex}.exercise-head{flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:12px;display:flex}.exercise-prompt{margin:0;font-size:1.6rem}.exercise-visual{flex-direction:column;align-items:stretch;gap:10px;display:flex}.exercise-visual .staff{background:var(--sheet);border-radius:var(--radius-l);padding:4px 0}.choice-step{color:var(--ink-soft);margin:0 0 6px;font-weight:600}.choice-options{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;display:grid}.choice-options button{min-height:60px;font-size:1.1rem}.exercise-actions{justify-content:flex-end;display:flex}.feedback{border-radius:var(--radius-l);border-left:6px solid;justify-content:space-between;align-items:center;gap:16px;padding:14px 18px;display:flex}.is-right .feedback{background:var(--right-wash);border-color:var(--right)}.is-wrong .feedback{background:var(--amber-wash);border-color:var(--amber)}.feedback-title{font-size:1.25rem;display:block}.feedback-explain,.feedback-answer{margin:4px 0 0}.page{max-width:1100px;padding:max(20px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) 48px max(20px, env(safe-area-inset-left));margin:0 auto}.topbar{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;margin-bottom:18px;display:flex}.brand{letter-spacing:-.02em;margin:0;font-size:1.7rem}.brand:before{content:"";vertical-align:-4px;background:var(--felt);border-radius:3px;width:14px;height:30px;margin-right:10px;display:inline-block}.topnav{flex-wrap:wrap;gap:4px;display:flex}.topnav a{border-radius:var(--radius-s);min-height:44px;color:var(--ink-soft);align-items:center;padding:0 14px;font-weight:600;text-decoration:none;display:inline-flex}.topnav a:active{background:var(--sheet)}.back{min-height:44px;color:var(--ink-soft);align-items:center;margin-bottom:6px;font-weight:600;text-decoration:none;display:inline-flex}.kicker{color:var(--ink-soft);margin:0 0 4px;font-weight:600}.muted{color:var(--ink-soft)}.banner{background:var(--select-wash);border-radius:var(--radius-s);max-width:none;padding:12px 16px}.banner-amber{background:var(--amber-wash)}.button.big{min-height:64px;padding:0 28px;font-size:1.2rem}.today{background:var(--sheet);border-radius:var(--radius-l);border-top:8px solid var(--felt);grid-template-columns:1.6fr 1fr;align-items:end;gap:24px;margin-bottom:32px;padding:28px;display:grid}.today h2{font-size:1.7rem}@media (width<=700px){.today{grid-template-columns:1fr}}.week-label{margin-bottom:8px;font-weight:600}.week-dots{gap:8px;margin:0;padding:0;list-style:none;display:flex}.week-dots li{color:var(--ink-soft);flex-direction:column;align-items:center;gap:4px;font-size:.8rem;display:flex}.week-dots .dot{border:2px solid var(--line);border-radius:50%;width:22px;height:22px}.week-dots .done .dot{background:var(--right);border-color:var(--right)}.path{flex-direction:column;gap:2px;margin:0;padding:0;list-style:none;display:flex}.path-row{border-radius:var(--radius-s);min-height:72px;color:inherit;grid-template-columns:52px 1fr auto auto;align-items:center;gap:14px;padding:10px 14px;text-decoration:none;display:grid}a.path-row:active{background:var(--sheet)}.path-no{border:2px solid var(--ink);border-radius:50%;place-items:center;width:40px;height:40px;font-weight:700;display:grid}.started .path-no{background:var(--ink);color:var(--sheet)}.soon{opacity:.55}.soon .path-no{border-style:dashed}.path-text{flex-direction:column;display:flex}.path-title{font-size:1.1rem;font-weight:700}.path-summary{color:var(--ink-soft);font-size:.95rem}.path-bar{background:var(--line);border-radius:4px;width:120px;height:8px;overflow:hidden}.path-bar span{background:var(--right);height:100%;display:block}@media (width<=600px){.path-bar{width:60px}.path-row{grid-template-columns:44px 1fr auto}.path-row .tag{display:none}}.tag{background:var(--select-wash);color:var(--select);white-space:nowrap;border-radius:999px;padding:3px 10px;font-size:.85rem;font-weight:600}.tag-soon{color:var(--ink-soft);border:1px dashed var(--line);background:0 0}.tag-done{background:var(--right-wash);color:var(--right)}.lessons{flex-direction:column;gap:6px;margin:20px 0 28px;padding:0;list-style:none;display:flex}.lesson-row{background:var(--sheet);border-radius:var(--radius-s);min-height:60px;color:inherit;align-items:center;gap:14px;padding:8px 14px;text-decoration:none;display:flex}.lesson-no{color:var(--ink-soft);width:24px;font-weight:700}.lesson-title{flex:1;font-weight:600}.next .lesson-row{outline:2px solid var(--select)}.lesson-page{background:var(--sheet);border-radius:var(--radius-l);flex-direction:column;gap:14px;min-height:300px;margin:12px 0 18px;padding:24px 28px;display:flex}.lesson-page p{font-size:1.1rem}.lesson-nav{justify-content:space-between;align-items:center;gap:12px;display:flex}.lesson-dots{gap:8px;margin:0;padding:0;list-style:none;display:flex}.lesson-dots li{background:var(--line);border-radius:50%;width:10px;height:10px}.lesson-dots .seen{background:var(--ink-soft)}.lesson-dots .current{background:var(--ink);transform:scale(1.3)}.note-box{border-left:4px solid var(--select);background:var(--select-wash);border-radius:0 var(--radius-s) var(--radius-s) 0;padding:6px 14px}.try-out{color:var(--ink-soft);margin-bottom:0;font-weight:600}.live-answer{min-height:2.2rem;margin:0;font-size:1.6rem;font-weight:700}table.facts{border-collapse:collapse;font-size:1.05rem}table.facts th,table.facts td{text-align:left;border-bottom:1px solid var(--line);padding:6px 14px 6px 0}.practice-top{align-items:center;gap:14px;margin-bottom:12px;display:flex}.practice-progress{background:var(--line);border-radius:5px;flex:1;height:10px;overflow:hidden}.practice-progress span{background:var(--ink);height:100%;transition:width .25s;display:block}.practice-count{color:var(--ink-soft);white-space:nowrap;font-weight:600}.done-panel{background:var(--sheet);border-radius:var(--radius-l);border-top:8px solid var(--right);padding:32px}.done-actions{flex-wrap:wrap;gap:12px;margin-top:16px;display:flex}.settings-group{background:var(--sheet);border-radius:var(--radius-l);margin:0 0 16px;padding:18px 22px}.settings-group h2{font-size:1.2rem}.stepper{flex-wrap:wrap;align-items:center;gap:10px;margin:8px 0;display:flex}.stepper-label{flex:1;min-width:200px}.stepper-value{text-align:center;min-width:3ch;font-size:1.2rem;font-weight:700}.toggle,.range,.radios label{align-items:center;gap:12px;min-height:48px;display:flex}.toggle input,.radios input{width:26px;height:26px;accent-color:var(--ink)}.range input{max-width:360px;accent-color:var(--ink);flex:1}.radios{flex-direction:column;display:flex}.row{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.confirm{border:2px solid var(--amber);border-radius:var(--radius-s);margin-top:12px;padding:12px 16px}.visually-hidden{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.tabs{flex-wrap:wrap;gap:8px;margin-bottom:16px;display:flex}.tool-panel{flex-direction:column;gap:12px;display:flex}.cheat{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;display:grid}.cheat section{background:var(--sheet);border-radius:var(--radius-l);padding:16px 20px}.circle-explorer{grid-template-columns:minmax(260px,1fr) 1fr;align-items:center;gap:16px;display:grid}@media (width<=760px){.circle-explorer{grid-template-columns:1fr}}.bars{align-items:flex-end;gap:6px;height:180px;margin:0 0 24px;padding:0;list-style:none;display:flex}.bars li{flex-direction:column;flex:1;justify-content:flex-end;align-items:center;gap:4px;height:100%;display:flex}.bars .bar{background:var(--ink);border-radius:4px 4px 0 0;width:100%;max-width:34px;min-height:2px}.bar-count,.bar-label{color:var(--ink-soft);font-size:.8rem}.stats-table td:not(:first-child),.stats-table th:not(:first-child){text-align:right}.grip h3{margin:8px 0 4px}.staff-show{flex-direction:column;align-items:flex-start;gap:6px;display:flex}.staff-show .staff{background:var(--paper);border-radius:var(--radius-s);max-height:22vh}.install{background:var(--sheet);border:2px solid var(--select);border-radius:var(--radius-l);margin-bottom:20px;padding:18px 22px}.install h2{font-size:1.3rem}.update-prompt{left:50%;bottom:max(16px, env(safe-area-inset-bottom));background:var(--sheet);border-radius:var(--radius-l);z-index:10;align-items:center;gap:10px;padding:10px 14px;display:flex;position:fixed;transform:translate(-50%);box-shadow:0 6px 24px #1418322e}