@font-face{font-family:Inter Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url(/assets/inter-cyrillic-ext-wght-normal-BOeWTOD4.woff2)format("woff2-variations");unicode-range:U+460-52F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:Inter Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url(/assets/inter-cyrillic-wght-normal-DqGufNeO.woff2)format("woff2-variations");unicode-range:U+301,U+400-45F,U+490-491,U+4B0-4B1,U+2116}@font-face{font-family:Inter Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url(/assets/inter-greek-ext-wght-normal-DlzME5K_.woff2)format("woff2-variations");unicode-range:U+1F??}@font-face{font-family:Inter Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url(/assets/inter-greek-wght-normal-CkhJZR-_.woff2)format("woff2-variations");unicode-range:U+370-377,U+37A-37F,U+384-38A,U+38C,U+38E-3A1,U+3A3-3FF}@font-face{font-family:Inter Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url(/assets/inter-vietnamese-wght-normal-CBcvBZtf.woff2)format("woff2-variations");unicode-range:U+102-103,U+110-111,U+128-129,U+168-169,U+1A0-1A1,U+1AF-1B0,U+300-301,U+303-304,U+308-309,U+323,U+329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Inter Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url(/assets/inter-latin-ext-wght-normal-DO1Apj_S.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:Inter Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url(/assets/inter-latin-wght-normal-Dx4kXJAl.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:Fraunces Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url(/assets/fraunces-vietnamese-full-normal-7BpKI3vF.woff2)format("woff2-variations");unicode-range:U+102-103,U+110-111,U+128-129,U+168-169,U+1A0-1A1,U+1AF-1B0,U+300-301,U+303-304,U+308-309,U+323,U+329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Fraunces Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url(/assets/fraunces-latin-ext-full-normal-YHFkNujK.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:Fraunces Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url(/assets/fraunces-latin-full-normal-CFFu7zhK.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}:root{--bg:#f6f2ea;--surface:#fffdf8;--surface-2:#f3eee5;--ink:#1d1b30;--ink-2:#4b4862;--ink-3:#8a869b;--line:#e7e0d3;--line-strong:#d4cbbb;--accent:#4f46e5;--accent-2:#7c3aed;--accent-ink:#fff;--accent-soft:#e9e7fd;--tone:#0f9488;--tone-soft:#d5f2ee;--semi:#e8590c;--semi-soft:#fde6d7;--plus:#b5179e;--plus-soft:#f9ddf3;--tonic:#d18e00;--tonic-soft:#fcefcc;--good:#15925a;--good-soft:#d9f4e5;--bad:#d92d3a;--bad-soft:#fde1e2;--key-white:#fffefb;--key-white-edge:#ddd5c6;--key-black:#22202f;--shadow-1:0 1px 2px #1d1b300d, 0 6px 20px #1d1b300f;--shadow-2:0 2px 6px #1d1b3012, 0 18px 50px #1d1b301f;--radius:22px;--ease:cubic-bezier(.22, 1, .36, 1);--spring:cubic-bezier(.34, 1.56, .64, 1);--font-sans:"Inter Variable", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--font-serif:"Fraunces Variable", Georgia, "Times New Roman", serif;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;font-family:var(--font-sans);color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%;font-size:16px;line-height:1.55}@media (prefers-color-scheme:dark){:root{--bg:#11101d;--surface:#1a1929;--surface-2:#232236;--ink:#f4f0e8;--ink-2:#c5c1d6;--ink-3:#8d89a6;--line:#2d2b45;--line-strong:#3c3a58;--accent:#8b84ff;--accent-2:#b48cff;--accent-ink:#12111d;--accent-soft:#2a2754;--tone:#2dd4bf;--tone-soft:#133b3a;--semi:#ff8f4f;--semi-soft:#47261a;--plus:#f472d0;--plus-soft:#46193e;--tonic:#fbbf24;--tonic-soft:#43340f;--good:#4ade80;--good-soft:#143a26;--bad:#fb7185;--bad-soft:#451a24;--key-white:#f1ece2;--key-white-edge:#a9a294;--key-black:#0b0a12;--shadow-1:0 1px 2px #0000004d, 0 8px 24px #00000040;--shadow-2:0 2px 8px #00000059, 0 20px 60px #0006;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}}*,:before,:after{box-sizing:border-box}html{scroll-behavior:smooth}body{background:radial-gradient(900px 520px at 8% -8%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 70%), radial-gradient(700px 480px at 100% 0%, color-mix(in srgb, var(--tonic) 12%, transparent), transparent 70%), var(--bg);background-repeat:no-repeat;min-height:100dvh;margin:0}h1,h2,h3{font-family:var(--font-serif);letter-spacing:-.01em;font-variation-settings:"SOFT" 50, "WONK" 0;margin:0;font-weight:600;line-height:1.12}p{margin:0}a{color:inherit}button{font:inherit;color:inherit}:focus-visible{outline:3px solid color-mix(in srgb, var(--accent) 55%, transparent);outline-offset:2px}.sr-only{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.container{width:100%;max-width:1040px;margin:0 auto;padding:0 16px}@media (width>=720px){.container{padding:0 28px}}.eyebrow{letter-spacing:.12em;text-transform:uppercase;color:var(--accent);font-size:.75rem;font-weight:650}.muted{color:var(--ink-2)}.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-1);padding:18px}@media (width>=720px){.card{padding:26px}}.stack{gap:16px;display:grid}.btn{cursor:pointer;-webkit-user-select:none;user-select:none;min-height:48px;transition:transform .18s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease), color .2s var(--ease);border:0;border-radius:999px;justify-content:center;align-items:center;gap:8px;padding:0 22px;font-size:1rem;font-weight:650;text-decoration:none;display:inline-flex}.btn:active{transform:scale(.96)}.btn:disabled{opacity:.45;cursor:default;transform:none}.btn-primary{color:#fff;background:linear-gradient(135deg, var(--accent), var(--accent-2));box-shadow:0 6px 18px color-mix(in srgb, var(--accent) 35%, transparent)}@media (prefers-color-scheme:dark){.btn-primary{color:#12111d}}.btn-primary:hover:not(:disabled){box-shadow:0 10px 26px color-mix(in srgb, var(--accent) 45%, transparent)}.btn-soft{background:var(--accent-soft);color:var(--accent)}.btn-ghost{color:var(--ink-2);box-shadow:inset 0 0 0 1.5px var(--line-strong);background:0 0}.btn-ghost:hover:not(:disabled){color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink-3)}.btn-small{min-height:40px;padding:0 16px;font-size:.92rem}.btn-block{width:100%}.btn svg{flex:none;width:20px;height:20px}.seg{background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line);border-radius:999px;gap:2px;max-width:100%;padding:4px;display:inline-flex}.seg button{min-height:42px;color:var(--ink-2);white-space:nowrap;cursor:pointer;transition:background .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease);background:0 0;border:0;border-radius:999px;flex:1;padding:0 16px;font-size:.95rem;font-weight:600}.seg button[aria-pressed=true]{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-1)}.seg-small button{min-height:36px;padding:0 12px;font-size:.88rem}.pill{background:var(--surface-2);color:var(--ink-2);white-space:nowrap;border-radius:999px;align-items:center;gap:6px;padding:4px 11px;font-size:.84rem;font-weight:600;display:inline-flex}.pill-tone{background:var(--tone-soft);color:var(--tone)}.pill-semi{background:var(--semi-soft);color:var(--semi)}.pill-plus{background:var(--plus-soft);color:var(--plus)}.pill-tonic{background:var(--tonic-soft);color:var(--tonic)}.pill-accent{background:var(--accent-soft);color:var(--accent)}.switch{min-height:40px;color:var(--ink-2);cursor:pointer;background:0 0;border:0;align-items:center;gap:10px;padding:0 4px;font-size:.92rem;font-weight:550;display:inline-flex}.switch-track{background:var(--line-strong);width:42px;height:26px;transition:background .25s var(--ease);border-radius:999px;flex:none;position:relative}.switch-track:after{content:"";width:20px;height:20px;transition:transform .3s var(--spring);background:#fff;border-radius:50%;position:absolute;top:3px;left:3px;box-shadow:0 1px 3px #00000040}.switch[aria-checked=true] .switch-track{background:var(--accent)}.switch[aria-checked=true] .switch-track:after{transform:translate(16px)}@keyframes rise{0%{opacity:0;transform:translateY(14px)}}@keyframes pop{0%{opacity:0;transform:scale(.6)}60%{opacity:1;transform:scale(1.08)}}@keyframes shake{20%,60%{transform:translate(-6px)}40%,80%{transform:translate(6px)}}.rise{animation:rise .6s var(--ease) both}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-delay:0s!important}}.layout{flex-direction:column;min-height:100dvh;display:flex}.header{z-index:20;-webkit-backdrop-filter:saturate(1.6)blur(14px);background:color-mix(in srgb, var(--bg) 78%, transparent);border-bottom:1px solid color-mix(in srgb, var(--line) 70%, transparent);position:sticky;top:0}.header-inner{justify-content:space-between;align-items:center;gap:12px;height:64px;display:flex}.brand{align-items:center;gap:10px;min-height:44px;text-decoration:none;display:inline-flex}.logo{filter:drop-shadow(0 4px 10px #4f46e54d);width:36px;height:36px;transition:transform .4s var(--spring);flex:none}.brand:hover .logo{transform:rotate(-8deg)scale(1.06)}.brand-name{font-family:var(--font-serif);letter-spacing:-.02em;font-size:1.35rem;font-weight:650}.brand-dot{color:var(--tonic)}.main{flex:1;padding-bottom:48px}.footer{color:var(--ink-3);text-align:center;padding-top:24px;padding-bottom:32px;font-size:.85rem}.page{gap:16px;max-width:760px;display:grid}.page-head{padding:14px 0 4px}.page-head h1{letter-spacing:-.03em;font-variation-settings:"SOFT" 100, "WONK" 1;margin:4px 0 6px;font-size:clamp(2.2rem,9vw,3rem)}.page-head p{max-width:52ch;font-size:1.02rem}.back{min-height:40px;color:var(--ink-3);transition:color .2s var(--ease);align-items:center;gap:6px;margin-left:-4px;padding:0 4px;font-size:.9rem;font-weight:600;text-decoration:none;display:inline-flex}.back:hover{color:var(--accent)}.back svg{width:18px;height:18px}.home{gap:28px;max-width:860px;display:grid}.hero{padding-top:28px}@media (width>=720px){.hero{padding-top:56px}}.hero-title{letter-spacing:-.035em;font-variation-settings:"SOFT" 100, "WONK" 1;margin:10px 0 14px;font-size:clamp(2.6rem,12vw,4.4rem);font-weight:600;line-height:1.02;animation-delay:80ms}.hero-title em{background:linear-gradient(110deg, var(--accent) 10%, var(--accent-2) 55%, var(--tonic) 100%);color:#0000;-webkit-background-clip:text;background-clip:text;font-style:italic;font-weight:500}.hero-lead{max-width:44ch;color:var(--ink-2);font-size:1.08rem;animation-delay:.16s}.home-section{animation:rise .6s var(--ease) .2s both;gap:12px;display:grid}.section-title{font-family:var(--font-sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);font-size:.8rem;font-weight:700}.exercise-grid{gap:12px;display:grid}@media (width>=720px){.exercise-grid{grid-template-columns:1fr 1fr}}.exercise,.course{transition:transform .3s var(--ease), box-shadow .3s var(--ease);align-items:center;gap:16px;text-decoration:none;display:flex}.exercise:hover,.course:hover{box-shadow:var(--shadow-2);transform:translateY(-3px)}.exercise:active,.course:active{transform:scale(.98)}@media (width>=720px){.exercise{flex-direction:column;align-items:flex-start;padding:28px}.exercise .exercise-go{align-self:flex-end;margin-top:auto}}.exercise-icon{color:#fff;background:linear-gradient(135deg, var(--accent), var(--accent-2));width:60px;height:60px;box-shadow:0 8px 20px color-mix(in srgb, var(--accent) 30%, transparent);border-radius:18px;flex:none;place-items:center;display:grid}.exercise-icon svg{width:30px;height:30px}.is-quiz .exercise-icon{background:linear-gradient(135deg,#f0a91b,#e8590c);box-shadow:0 8px 20px #e8590c47}.course .exercise-icon{color:var(--tone);background:var(--tone-soft);box-shadow:none}.exercise-body{flex:1;gap:4px;min-width:0;display:grid}.exercise-title{font-family:var(--font-serif);color:var(--ink);font-size:1.45rem;font-weight:600;line-height:1.15}@media (width>=720px){.exercise .exercise-title{font-size:1.8rem}}.exercise-text{color:var(--ink-2);font-size:.93rem}.exercise-meta{color:var(--tonic);margin-top:4px;font-size:.86rem;font-weight:650}.exercise-go{color:#fff;background:var(--ink);width:44px;height:44px;transition:transform .35s var(--spring);border-radius:50%;flex:none;place-items:center;display:grid}.exercise-go.is-soft{color:var(--ink);background:var(--surface-2)}.exercise-go svg{width:20px;height:20px}.exercise:hover .exercise-go,.course:hover .exercise-go{transform:translate(4px)}@media (width<=420px){.exercise-go{display:none}.exercise-icon{align-self:flex-start;width:52px;height:52px}}.course{background:color-mix(in srgb, var(--surface) 70%, transparent)}.course-progress{color:var(--ink-3);align-items:center;gap:10px;margin-top:6px;font-size:.85rem;font-weight:600;display:flex}.course-bar{background:var(--line);border-radius:999px;flex:0 140px;height:6px;overflow:hidden}.course-bar span{border-radius:inherit;background:var(--tone);height:100%;display:block}.kb{-webkit-user-select:none;user-select:none;touch-action:manipulation;width:100%;position:relative;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,#0000,#000 14px calc(100% - 14px),#0000);mask-image:linear-gradient(90deg,#0000,#000 14px calc(100% - 14px),#0000)}.kb-track{transition:transform .7s var(--ease);position:absolute;inset:0 auto 0 0}.kb-arcs{position:absolute;top:0;left:0;overflow:visible}.kb-arc path{fill:none;stroke-width:2.4px;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1px;animation:kb-draw .5s var(--ease) forwards;animation-delay:calc(var(--i) * 90ms)}.kb-arc circle,.kb-arc rect,.kb-arc text{animation:pop .4s var(--spring) both;animation-delay:calc(var(--i) * 90ms + .2s);transform-box:fill-box;transform-origin:50%}@keyframes kb-draw{to{stroke-dashoffset:0}}.kb-arc text{text-anchor:middle;font-size:11px;font-weight:750}.kb-arc.is-tone path{stroke:var(--tone)}.kb-arc.is-tone circle,.kb-arc.is-tone text{fill:var(--tone)}.kb-arc.is-tone rect{fill:var(--tone-soft)}.kb-arc.is-semi path{stroke:var(--semi)}.kb-arc.is-semi circle,.kb-arc.is-semi text{fill:var(--semi)}.kb-arc.is-semi rect{fill:var(--semi-soft)}.kb-arc.is-plus path{stroke:var(--plus)}.kb-arc.is-plus circle,.kb-arc.is-plus text{fill:var(--plus)}.kb-arc.is-plus rect{fill:var(--plus-soft)}.kb-keys{position:absolute;left:0;right:0}.kb-key{transition:background .25s var(--ease), transform .12s var(--ease), box-shadow .25s var(--ease);border:0;justify-content:center;align-items:flex-end;padding:0 0 10px;display:flex;position:absolute;top:0}.kb-white{z-index:1;background:linear-gradient(180deg, var(--key-white) 70%, color-mix(in srgb, var(--key-white) 88%, var(--key-white-edge)));box-shadow:inset -1px 0 0 var(--key-white-edge), inset 0 -5px 0 color-mix(in srgb, var(--key-white-edge) 55%, transparent);border-radius:0 0 9px 9px}.kb-black{z-index:2;background:linear-gradient(180deg, color-mix(in srgb, var(--key-black) 80%, #555) 0%, var(--key-black) 18%, var(--key-black) 100%);border-radius:0 0 6px 6px;padding-bottom:8px;box-shadow:inset 0 -6px #ffffff14,0 3px 6px #00000040}.kb-key.is-playable{cursor:pointer}.kb-white.is-playable:active{box-shadow:inset -1px 0 0 var(--key-white-edge), inset 0 -2px 0 color-mix(in srgb, var(--key-white-edge) 55%, transparent);transform:translateY(2px)}.kb-black.is-playable:active{transform:translateY(2px);box-shadow:inset 0 -3px #ffffff14}.kb-name{color:#8a8497;white-space:nowrap;pointer-events:none;font-size:11px;font-weight:650;line-height:1}.kb-name.is-mark{color:#fff;background:var(--accent);animation:pop .4s var(--spring) both;border-radius:999px;padding:4px 6px;box-shadow:0 2px 6px #0000002e}.kb-white.is-scale{background:linear-gradient(#e9e6ff 0%,#d4cffd 100%)}.kb-black.is-scale{background:linear-gradient(#6d63f0 0%,#4338ca 100%)}.kb-white.is-tonic{background:linear-gradient(#fff2cf 0%,#ffd982 100%)}.kb-black.is-tonic{background:linear-gradient(#f0b429 0%,#b77900 100%)}.kb-key.is-tonic .kb-name.is-mark{background:#c58500}.kb-white.is-soft{background:linear-gradient(#f7f3ff 0%,#ebe6fb 100%)}.kb-black.is-soft{background:linear-gradient(#4f4870 0%,#2f2a4a 100%)}.kb-key.is-soft .kb-name.is-mark{background:#8f88b4}.kb-white.is-hint{background:linear-gradient(#fff 0%,#fde6d7 100%)}.kb-black.is-hint{background:linear-gradient(#ff9d66 0%,#d9480f 100%)}.kb-key.is-hint .kb-name.is-mark{background:#e8590c}.kb-white.is-active,.kb-black.is-active{background:linear-gradient(#8b84ff 0%,#4f46e5 100%);box-shadow:inset 0 0 0 2px #fff,0 0 24px #635bff8c}.kb-white.is-active .kb-name,.kb-black.is-active .kb-name{color:#fff}.kb-key.is-active .kb-name.is-mark{color:#4f46e5;background:#fff}.kb-white.is-correct{background:linear-gradient(#e3f9ec 0%,#9de0bb 100%)}.kb-black.is-correct{background:linear-gradient(#34c27a 0%,#15803d 100%)}.kb-key.is-correct .kb-name.is-mark{background:#15925a}.kb-white.is-wrong,.kb-black.is-wrong{animation:shake .4s var(--ease);background:linear-gradient(#ffb4b9 0%,#d92d3a 100%)}.kb-key.is-wrong .kb-name.is-mark{background:#b4232f}.kb-black .kb-name:not(.is-mark){color:#cfcadf}.staff{-webkit-user-select:none;user-select:none;width:100%;height:auto;margin:0 auto;display:block;overflow:visible}.staff-line,.staff-bar,.staff-ledger{stroke:var(--ink-3);stroke-width:1.1px}.staff-ledger{stroke:var(--ink-2);stroke-width:1.4px}.staff-bar--thick{stroke:var(--ink-2);stroke-width:3px}.staff-highlight{fill:color-mix(in srgb, var(--tonic) 30%, transparent);animation:1.8s ease-in-out infinite staff-glow}@keyframes staff-glow{50%{fill:color-mix(in srgb, var(--tonic) 12%, transparent)}}.staff-clef{fill:var(--ink)}.staff-signature{fill:var(--ink);animation:pop .5s var(--spring) both;animation-delay:calc(var(--i) * 70ms);transform-box:fill-box;transform-origin:50%}.staff-note{animation:staff-drop .55s var(--ease) both;animation-delay:calc(var(--i) * 55ms);transition:transform .25s var(--ease)}@keyframes staff-drop{0%{opacity:0;transform:translateY(-12px)}}.staff-head,.staff-acc{fill:var(--ink);transition:fill .2s var(--ease)}.staff-hit{fill:#0000}.staff-note.is-clickable{cursor:pointer}.staff-note.is-clickable:focus-visible{outline:none}.staff-note.is-clickable:focus-visible .staff-halo{opacity:1;fill:var(--accent-soft)}.staff-halo{fill:#0000;opacity:0;transition:opacity .2s var(--ease), fill .2s var(--ease)}.staff-note.is-clickable:hover .staff-halo{opacity:1;fill:color-mix(in srgb, var(--accent) 10%, transparent)}.staff-note.is-tonic .staff-head,.staff-note.is-tonic .staff-acc{fill:var(--tonic)}.staff-note.is-accent .staff-head,.staff-note.is-accent .staff-acc{fill:var(--accent)}.staff-note.is-muted .staff-head,.staff-note.is-muted .staff-acc{fill:var(--ink-3);opacity:.55}.staff-note.is-correct .staff-head,.staff-note.is-correct .staff-acc{fill:var(--good)}.staff-note.is-wrong .staff-head,.staff-note.is-wrong .staff-acc{fill:var(--bad)}.staff-note.is-active .staff-head,.staff-note.is-active .staff-acc{fill:var(--accent)}.staff-note.is-active .staff-halo{opacity:1;fill:color-mix(in srgb, var(--accent) 22%, transparent);animation:halo .6s var(--ease)}@keyframes halo{0%{fill:color-mix(in srgb, var(--accent) 45%, transparent)}}.staff-question rect{fill:var(--accent-soft);stroke:var(--accent);stroke-width:1.4px;stroke-dasharray:4 3}.staff-question text{fill:var(--accent);font-family:var(--font-serif);text-anchor:middle;font-size:22px;font-weight:700}.staff-label{fill:var(--ink);text-anchor:middle;animation:staff-drop .55s var(--ease) both;animation-delay:calc(var(--i) * 55ms + .12s);font-size:12px;font-weight:650}.staff-label.is-tonic{fill:var(--tonic)}.staff-label.is-active,.staff-label.is-accent{fill:var(--accent)}.staff-label.is-correct{fill:var(--good)}.staff-label.is-wrong{fill:var(--bad)}.staff-label.is-muted{fill:var(--ink-3)}.staff-sub{fill:var(--ink-3);letter-spacing:.02em;text-anchor:middle;font-size:9.5px;font-weight:600}.staff-step{animation:pop .45s var(--spring) both;animation-delay:calc(var(--i) * 70ms + .25s);transform-box:fill-box;transform-origin:50%}.staff-step text{text-anchor:middle;font-size:11px;font-weight:750}.staff-step.is-tone rect{fill:var(--tone-soft)}.staff-step.is-tone text{fill:var(--tone)}.staff-step.is-semi rect{fill:var(--semi-soft)}.staff-step.is-semi text{fill:var(--semi)}.staff-step.is-plus rect{fill:var(--plus-soft)}.staff-step.is-plus text{fill:var(--plus)}.tonic-picker{gap:14px;display:grid}.mini-piano{-webkit-user-select:none;user-select:none;width:100%;max-width:460px;height:118px;position:relative}.mini-key{cursor:pointer;transition:background .25s var(--ease), transform .12s var(--ease), box-shadow .25s var(--ease), color .25s var(--ease);border:0;flex-direction:column;justify-content:flex-end;align-items:center;font-weight:650;display:flex;position:absolute;top:0}.mini-white{z-index:1;color:#5c5870;background:linear-gradient(180deg, var(--key-white) 65%, color-mix(in srgb, var(--key-white) 85%, var(--key-white-edge)));width:calc(14.2857% - 4px);height:100%;box-shadow:inset 0 0 0 1px var(--key-white-edge), inset 0 -5px 0 color-mix(in srgb, var(--key-white-edge) 60%, transparent), 0 2px 6px #0000000f;border-radius:6px 6px 14px 14px;margin-left:2px;padding-bottom:12px;font-size:.92rem}.mini-black{z-index:2;color:#d9d5e8;background:linear-gradient(180deg, #3a3750 0%, var(--key-black) 25%);border-radius:4px 4px 10px 10px;width:9.42857%;height:64%;padding-bottom:7px;font-size:.66rem;line-height:1.25;transform:translate(-50%);box-shadow:inset 0 -5px #ffffff17,0 4px 8px #00000047}.mini-white:active{transform:translateY(2px)}.mini-black:active{transform:translate(-50%)translateY(2px)}.mini-white.is-selected{color:#6b4500;background:linear-gradient(#fff3d2 0%,#ffcf5c 100%);box-shadow:inset 0 0 0 2px #e6a700,0 8px 22px #e6a70059}.mini-black.is-selected{color:#fff;background:linear-gradient(#f5b931 0%,#b77900 100%);box-shadow:0 8px 22px #e6a70073}.spelling{flex-wrap:wrap;align-items:center;gap:8px 12px;display:flex}.spelling-label{color:var(--ink-2);font-size:.88rem}.spelling-theory{color:var(--ink-3);font-size:.8rem;font-weight:500}.kind-picker{justify-items:start;gap:10px;display:grid}.build-choose{gap:16px;display:grid}.build-choose-head{justify-content:space-between;align-items:center;gap:12px;display:flex}.build-choose-head h2{font-size:1.35rem}.build-choose .seg{justify-self:start}.board{gap:16px;display:grid}.board-head{text-align:center}.board-title{letter-spacing:-.03em;font-variation-settings:"SOFT" 100, "WONK" 1;background:linear-gradient(120deg, var(--ink) 30%, var(--accent) 100%);color:#0000;animation:rise .5s var(--ease) both;-webkit-background-clip:text;background-clip:text;font-size:clamp(2rem,9vw,3rem)}.board-head p{margin-top:4px;font-size:.95rem}.board-staff{width:100%;max-width:600px;margin:0 auto}.guide{background:var(--surface-2);min-height:132px;transition:background .3s var(--ease);border-radius:18px;padding:14px 16px}.guide.is-wrong{background:color-mix(in srgb, var(--bad-soft) 60%, var(--surface-2))}.guide.is-done{background:var(--good-soft)}.guide-body{animation:rise .35s var(--ease) both;gap:8px;display:grid}.guide-feedback{align-items:flex-start;gap:8px;font-weight:550;display:flex}.guide-feedback svg{stroke-width:3px;color:#fff;border-radius:50%;flex:none;width:22px;height:22px;margin-top:1px;padding:3px}.guide-feedback.is-good{color:color-mix(in srgb, var(--good) 65%, var(--ink))}.guide-feedback.is-good svg{background:var(--good)}.guide-feedback.is-wrong{color:color-mix(in srgb, var(--bad) 70%, var(--ink));animation:shake .4s var(--ease)}.guide-feedback.is-wrong svg{background:var(--bad)}.guide-intro{color:var(--ink-2)}.guide-step{font-size:1.08rem}.guide-step .is-tone{color:var(--tone)}.guide-step .is-semi{color:var(--semi)}.guide-step .is-plus{color:var(--plus)}.guide-tip{color:var(--ink-3);font-size:.9rem}.guide-title{font-family:var(--font-serif);color:color-mix(in srgb, var(--good) 70%, var(--ink));font-size:1.35rem;font-weight:600}.guide.is-done p:not(.guide-title){color:var(--ink-2)}.guide-actions{flex-wrap:wrap;gap:8px;margin-top:6px;display:flex}.guide-actions .btn{flex:150px}@media (prefers-color-scheme:dark){.guide-feedback svg{color:#12111d}}.board-actions{flex-wrap:wrap;justify-content:center;gap:8px;display:flex}.board-actions:empty{display:none}.model{background:color-mix(in srgb, var(--accent-soft) 55%, var(--surface));box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent);border-radius:18px;gap:8px;padding:12px 12px 14px;display:grid}.model-head{justify-content:space-between;align-items:center;gap:10px;padding-left:4px;display:flex}.model-head p{font-family:var(--font-serif);white-space:nowrap;font-size:1.15rem;font-weight:600}.model-kicker{font-family:var(--font-sans);letter-spacing:.1em;text-transform:uppercase;color:var(--accent);vertical-align:2px;margin-right:4px;font-size:.72rem;font-weight:700}.model-play{width:38px;height:38px;color:var(--accent);background:var(--surface);box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 30%, transparent);cursor:pointer;border:0;border-radius:50%;flex:none;place-items:center;display:grid}.model-play svg{width:16px;height:16px}.model-row{grid-template-columns:repeat(16,1fr);align-items:center;row-gap:6px;display:grid}.model-note{min-width:0;min-height:36px;color:var(--ink);cursor:pointer;transition:background .2s var(--ease), color .2s var(--ease);background:0 0;border:0;border-radius:10px;grid-row:1;justify-self:center;padding:0 2px;font-size:.92rem;font-weight:700}.model-note:first-child,.model-note:nth-child(8){color:var(--tonic)}.model-note.is-hint{color:var(--accent)}.model-note.is-active{color:#fff;background:var(--accent);padding:0 6px}.model-step{border-radius:999px;grid-row:2;justify-self:center;place-items:center;min-width:28px;height:24px;padding:0 6px;font-size:.85rem;font-weight:750;display:grid}.model-step.is-tone{color:var(--tone);background:var(--tone-soft)}.model-step.is-semi{color:var(--semi);background:var(--semi-soft)}.model-step.is-plus{color:var(--plus);background:var(--plus-soft)}.model-step.is-hint{box-shadow:0 0 0 2px var(--surface), 0 0 0 4px var(--accent);animation:hint-pulse 1.4s var(--ease) infinite}@keyframes hint-pulse{50%{transform:scale(1.15)}}.model-caption{color:var(--ink-2);padding:0 4px;font-size:.85rem}.model-legend{color:var(--ink-3);flex-wrap:wrap;gap:4px 14px;padding:0 4px;font-size:.82rem;display:flex}.model-legend>span{white-space:nowrap}.model-legend .pill{margin-right:3px;padding:1px 8px}.builder{gap:18px;display:grid}.builder-recipe{flex-wrap:wrap;justify-content:center;gap:6px;display:flex}.builder-chip{text-align:center;background:var(--surface-2);min-width:38px;color:var(--ink-3);box-shadow:inset 0 0 0 1.5px var(--line);transition:background .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--spring);border-radius:999px;padding:6px 10px;font-size:.95rem;font-weight:750}.builder-chip.is-next{box-shadow:inset 0 0 0 2px var(--accent);color:var(--accent);transform:translateY(-3px)}.builder-chip.is-done.is-tone{background:var(--tone-soft);color:var(--tone);box-shadow:none}.builder-chip.is-done.is-semi{background:var(--semi-soft);color:var(--semi);box-shadow:none}.builder-chip.is-done.is-plus{background:var(--plus-soft);color:var(--plus);box-shadow:none}.builder-explain{background:var(--surface-2);border-radius:18px;min-height:150px;padding:16px 18px}.builder-lines{animation:rise .45s var(--ease) both;gap:6px;display:grid}.builder-step{letter-spacing:.08em;text-transform:uppercase;color:var(--accent);font-size:.78rem;font-weight:700}.builder-fix{border-radius:12px;margin-top:4px;padding:10px 12px;font-weight:600}.builder-fix.is-ok{background:var(--tone-soft);color:color-mix(in srgb, var(--tone) 75%, var(--ink))}.builder-fix.is-up,.builder-fix.is-down{background:var(--semi-soft);color:color-mix(in srgb, var(--semi) 75%, var(--ink))}.builder-actions{flex-wrap:wrap;gap:10px;display:flex}.builder-actions .btn-primary{flex:200px}.lesson{max-width:860px}.lesson-progress{gap:10px;display:grid}.lesson-count{font-size:.88rem;font-weight:700}.lesson-dots{gap:5px;display:flex}.lesson-dot{cursor:pointer;background:0 0;border:0;flex:1;height:22px;padding:0;position:relative}.lesson-dot:after{content:"";background:var(--line);height:6px;transition:background .35s var(--ease), transform .35s var(--spring);border-radius:999px;position:absolute;top:8px;left:0;right:0}.lesson-dot.is-done:after{background:color-mix(in srgb, var(--accent) 55%, var(--line))}.lesson-dot.is-current:after{background:linear-gradient(90deg, var(--accent), var(--accent-2));transform:scaleY(1.5)}.lesson-card{animation:rise .5s var(--ease) both;gap:22px;display:grid}.lesson-text{color:var(--ink-2);gap:12px;font-size:1.04rem;display:grid}.lesson-text strong{color:var(--ink)}.lesson-text h2{color:var(--ink);font-variation-settings:"SOFT" 100, "WONK" 1;margin-bottom:2px;font-size:clamp(1.7rem,7vw,2.3rem)}.rules{gap:6px;margin:0;padding-left:22px;display:grid}.rules li::marker{color:var(--accent);font-weight:700}.lesson-widget{border-top:1px dashed var(--line-strong);padding-top:20px}.lesson-nav{z-index:5;padding:12px 0 calc(12px + env(safe-area-inset-bottom));background:linear-gradient(180deg, transparent, var(--bg) 35%);gap:10px;display:flex;position:sticky;bottom:0}.lesson-next{flex:1;min-width:0}.lesson-next-text{min-width:0;display:flex}.lesson-next-title{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}@media (width<=560px){.lesson-next-title,.lesson-nav-label{display:none}.lesson-nav .btn-ghost{padding:0 16px}}.widget{justify-items:stretch;gap:16px;display:grid}.widget>.btn,.widget>.seg{justify-self:start}.widget-caption{color:var(--ink-3);text-align:center;font-size:.9rem}.widget-result{background:var(--surface-2);color:var(--ink-2);animation:rise .4s var(--ease) both;border-radius:14px;padding:12px 14px}.widget-result strong{color:var(--ink)}.widget-chips{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.widget-chips-label{color:var(--ink-3);font-size:.85rem;font-weight:600}.chip-button{min-height:38px;color:var(--ink-2);background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line);cursor:pointer;transition:background .2s var(--ease), color .2s var(--ease), transform .15s var(--ease);border:0;border-radius:999px;padding:0 14px;font-size:.9rem;font-weight:600}.chip-button:hover{color:var(--accent)}.chip-button:active{transform:scale(.96)}.chip-button[aria-pressed=true]{color:var(--accent);background:var(--accent-soft);box-shadow:inset 0 0 0 1.5px var(--accent)}.lesson-recipe{flex-wrap:wrap;gap:6px;display:flex}.lesson-recipe-step{min-width:36px;height:30px;animation:pop .45s var(--spring) both;border-radius:999px;place-items:center;padding:0 8px;font-weight:750;display:inline-grid}.lesson-recipe.is-big{justify-content:center;margin:4px 0}.lesson-recipe.is-big .lesson-recipe-step{min-width:42px;height:40px;font-size:1.15rem}.lesson-recipe-step.is-tone{background:var(--tone-soft);color:var(--tone)}.lesson-recipe-step.is-semi{background:var(--semi-soft);color:var(--semi)}.lesson-recipe-step.is-plus{background:var(--plus-soft);color:var(--plus)}.compare{flex-wrap:wrap;gap:8px;display:flex}.compare .btn{flex:140px}.order{gap:8px;display:grid}.order-row{flex-wrap:wrap;gap:6px;display:flex}.order-item{color:var(--ink-3);background:var(--surface-2);transition:background .3s var(--ease), color .3s var(--ease);border-radius:10px;padding:6px 11px;font-size:.92rem;font-weight:650}.order-item.is-on{color:var(--accent);background:var(--accent-soft)}.recap{gap:12px;display:grid}.recap-item{background:var(--surface-2);border-radius:18px;gap:10px;padding:16px;display:grid}.recap-name{font-family:var(--font-serif);font-size:1.2rem;font-weight:600}.recap-actions{flex-wrap:wrap;gap:10px;display:flex}.recap-actions .btn{flex:220px}.setup-card{gap:22px;display:grid}.setup-list{gap:10px;margin:0;padding:0;font-weight:600;list-style:none;display:grid}.setup-list li{align-items:center;gap:10px;display:flex}.setup-list svg{stroke-width:3px;width:22px;height:22px;color:var(--accent);background:var(--accent-soft);border-radius:50%;flex:none;padding:3px}.setup-options{gap:12px;display:grid}.setup-option{flex-wrap:wrap;align-items:center;gap:8px 14px;display:flex}.setup-label{font-size:.92rem;font-weight:650}.setup-start{min-height:56px;font-size:1.05rem}.setup-stats{grid-template-columns:repeat(3,1fr);gap:10px;display:grid}.setup-stats div{background:var(--surface);border:1px solid var(--line);border-radius:18px;justify-items:center;padding:14px 8px;display:grid}.setup-stats strong{font-family:var(--font-serif);font-size:1.6rem;font-weight:600}.setup-stats span{color:var(--ink-3);font-size:.8rem}.setup-hint{color:var(--ink-3);justify-content:center;align-items:center;gap:8px;font-size:.9rem;display:flex}.setup-hint svg{flex:none;width:18px;height:18px}.setup-hint a{color:var(--accent);font-weight:600}.quiz-bar{align-items:center;gap:12px;display:flex}.quiz-quit{background:var(--surface);width:40px;height:40px;color:var(--ink-3);box-shadow:inset 0 0 0 1px var(--line);cursor:pointer;border:0;border-radius:50%;flex:none;place-items:center;display:grid}.quiz-quit svg{width:18px;height:18px}.quiz-progress{flex:1;gap:4px;display:flex}.quiz-seg{background:var(--line);height:8px;transition:background .35s var(--ease), transform .35s var(--spring);border-radius:999px;flex:1}.quiz-seg.is-current{background:color-mix(in srgb, var(--accent) 40%, var(--line));transform:scaleY(1.35)}.quiz-seg.is-good{background:var(--good)}.quiz-seg.is-bad{background:var(--bad)}.quiz-score{font-variant-numeric:tabular-nums;align-items:center;gap:8px;font-weight:750;display:inline-flex}.quiz-streak{color:var(--tonic);background:var(--tonic-soft);animation:pop .45s var(--spring) both;border-radius:999px;align-items:center;gap:3px;padding:3px 9px;font-size:.85rem;display:inline-flex}.quiz-streak svg{width:15px;height:15px}.quiz-card{animation:rise .45s var(--ease) both}.question{gap:18px;display:grid}.question-head{text-align:center}.question-head h2{letter-spacing:-.02em;font-variation-settings:"SOFT" 100, "WONK" 1;margin:6px 0;font-size:clamp(1.9rem,8vw,2.6rem)}.question-staff{width:100%;max-width:600px;margin:0 auto}.question-staff.is-narrow{max-width:300px}.listen{justify-self:center}.answers{grid-template-columns:1fr 1fr;gap:10px;display:grid}.answers.is-three{grid-template-columns:repeat(3,1fr)}.answer{min-height:58px;color:var(--ink);background:var(--surface-2);box-shadow:inset 0 0 0 1.5px var(--line), 0 3px 0 var(--line);cursor:pointer;transition:background .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease), opacity .25s var(--ease), transform .12s var(--ease);border:0;border-radius:18px;justify-content:center;align-items:center;gap:6px;padding:8px 10px;font-size:1.05rem;font-weight:700;display:flex}.answers.is-big .answer{min-height:70px;font-family:var(--font-serif);font-size:1.45rem;font-weight:600}.answer:hover:not(:disabled){box-shadow:inset 0 0 0 2px var(--accent), 0 3px 0 color-mix(in srgb, var(--accent) 45%, transparent)}.answer:active:not(:disabled){box-shadow:inset 0 0 0 2px var(--accent);transform:translateY(2px)}.answer:disabled{cursor:default}.answer svg{stroke-width:3px;width:20px;height:20px}.answer.is-correct{color:#fff;background:var(--good);box-shadow:0 6px 18px color-mix(in srgb, var(--good) 35%, transparent);animation:pop .4s var(--spring)}.answer.is-wrong{color:#fff;background:var(--bad);box-shadow:none;animation:shake .4s var(--ease)}.answer.is-dim{opacity:.4}.reveal{animation:rise .5s var(--ease) both;justify-items:stretch;gap:14px;display:grid}.reveal>.btn{justify-self:center}.explain{background:var(--surface-2);color:var(--ink-2);border-radius:16px;gap:6px;padding:14px 16px;display:grid}.explain strong{color:var(--ink)}.explain-key{color:color-mix(in srgb, var(--tone) 70%, var(--ink));background:var(--tone-soft);border-radius:12px;margin-top:4px;padding:10px 12px;font-weight:600}.explain.is-hint{background:var(--semi-soft);color:color-mix(in srgb, var(--semi) 55%, var(--ink));animation:shake .4s var(--ease);display:block}.explain.is-hint strong{color:inherit}.build-recipe{flex-wrap:wrap;justify-content:center;gap:6px;display:flex}.build-chip{text-align:center;min-width:36px;color:var(--ink-3);background:var(--surface-2);box-shadow:inset 0 0 0 1.5px var(--line);transition:all .3s var(--ease);border-radius:999px;padding:5px 9px;font-weight:750}.build-chip.is-next{color:var(--accent);box-shadow:inset 0 0 0 2px var(--accent);transform:translateY(-3px)}.build-chip.is-done.is-tone{color:var(--tone);background:var(--tone-soft);box-shadow:none}.build-chip.is-done.is-semi{color:var(--semi);background:var(--semi-soft);box-shadow:none}.build-chip.is-done.is-plus{color:var(--plus);background:var(--plus-soft);box-shadow:none}.ear-button{color:#fff;background:linear-gradient(135deg, var(--accent), var(--accent-2));width:112px;height:112px;box-shadow:0 14px 34px color-mix(in srgb, var(--accent) 40%, transparent);cursor:pointer;transition:transform .2s var(--spring);border:0;border-radius:50%;justify-self:center;place-items:center;display:grid;position:relative}.ear-button:active{transform:scale(.94)}.ear-button>svg{width:44px;height:44px;position:relative}.ear-waves span{border:2px solid var(--accent);opacity:0;border-radius:50%;position:absolute;inset:0}.ear-button.is-playing .ear-waves span{animation:wave 1.8s var(--ease) infinite}.ear-waves span:nth-child(2){animation-delay:.6s!important}.ear-waves span:nth-child(3){animation-delay:1.2s!important}@keyframes wave{0%{opacity:.7;transform:scale(1)}to{opacity:0;transform:scale(1.7)}}.quiz-feedback{z-index:5;padding:14px 16px calc(14px + env(safe-area-inset-bottom));animation:slide-up .45s var(--ease) both;border-radius:22px 22px 0 0;grid-template-columns:auto 1fr;align-items:center;gap:10px 12px;margin:0 -16px;display:grid;position:sticky;bottom:0;box-shadow:0 -10px 30px #0000001a}@media (width>=720px){.quiz-feedback{border-radius:22px;margin:0;bottom:16px}}@keyframes slide-up{0%{opacity:0;transform:translateY(100%)}}.quiz-feedback.is-good{background:var(--good-soft);color:color-mix(in srgb, var(--good) 70%, var(--ink))}.quiz-feedback.is-bad{background:var(--bad-soft);color:color-mix(in srgb, var(--bad) 70%, var(--ink))}.quiz-feedback-icon{color:#fff;width:36px;height:36px;animation:pop .45s var(--spring) both;border-radius:50%;place-items:center;display:grid}.quiz-feedback.is-good .quiz-feedback-icon{background:var(--good)}.quiz-feedback.is-bad .quiz-feedback-icon{background:var(--bad)}.quiz-feedback-icon svg{stroke-width:3px;width:20px;height:20px}.quiz-feedback strong{font-size:1.05rem}.quiz-feedback .btn{grid-column:1/-1}@media (prefers-color-scheme:dark){.quiz-feedback-icon,.answer.is-correct,.answer.is-wrong{color:#12111d}}.results-card{text-align:center;justify-items:center;gap:12px;padding-top:30px;display:grid;position:relative}.score-ring{width:170px;height:170px;transform:rotate(-90deg)}.score-track{fill:none;stroke:var(--line);stroke-width:10px}.score-value{fill:none;stroke:url(#score-gradient);stroke-width:10px;stroke-linecap:round;stroke-dasharray:var(--dash);stroke-dashoffset:var(--dash);animation:ring 1.4s var(--ease) .2s forwards}@keyframes ring{to{stroke-dashoffset:var(--offset)}}.score-text{place-items:center;height:170px;display:grid;position:absolute;top:30px}.score-text strong{font-family:var(--font-serif);font-size:3.2rem;font-weight:600;line-height:1}.score-text span{color:var(--ink-3);font-size:1.4rem}.results-card h2{font-size:1.8rem}.record{animation:pop .5s var(--spring) .6s both}.results-actions{flex-wrap:wrap;justify-content:center;gap:10px;width:100%;margin-top:8px;display:flex}.results-actions .btn{flex:200px}.results-title{margin-bottom:12px;font-size:1.3rem}.results-list{gap:6px;margin:0;padding:0;list-style:none;display:grid}.results-list li{background:var(--surface-2);border-radius:12px;align-items:center;gap:10px;padding:8px 10px;font-size:.95rem;display:flex}.results-icon{color:#fff;border-radius:50%;flex:none;place-items:center;width:24px;height:24px;display:grid}.results-icon svg{stroke-width:3px;width:14px;height:14px}.results-list .is-good .results-icon{background:var(--good)}.results-list .is-bad .results-icon{background:var(--bad)}.confetti{z-index:50;pointer-events:none;position:fixed;inset:0;overflow:hidden}.confetti span{font-weight:700;animation:linear forwards fall;position:absolute;top:-40px}@keyframes fall{to{transform:translate(var(--drift), 110vh) rotate(540deg)}}