@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}.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)}.hero{align-items:center;gap:28px;padding-top:36px;padding-bottom:32px;display:grid}@media (width>=900px){.hero{grid-template-columns:1fr 1.05fr;gap:48px;padding-top:72px;padding-bottom:64px}}.hero-text>*{animation-delay:calc(var(--d,0) * 1ms)}.hero-title{letter-spacing:-.035em;font-variation-settings:"SOFT" 100, "WONK" 1;margin:10px 0 16px;font-size:clamp(2.7rem,12vw,4.8rem);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:34ch;color:var(--ink-2);font-size:1.1rem;animation-delay:.16s}.hero-actions{margin-top:24px;animation-delay:.24s}.hero-visual{animation-delay:.3s;position:relative}.hero-visual:before{content:"";background:linear-gradient(135deg, var(--accent), var(--tonic));filter:blur(46px);opacity:.22;z-index:-1;border-radius:40px;position:absolute;inset:8% 4% -6%}.hero-staff{transition:transform .5s var(--ease);gap:14px;padding:22px 16px 16px;display:grid;transform:rotate(-1.2deg)}.hero-staff:hover{transform:rotate(0)translateY(-2px)}.hero-staff-foot{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;padding:0 4px;font-size:.9rem;display:flex}.section-title{margin-bottom:18px;font-size:1.7rem}.exercise-grid{gap:14px;display:grid}@media (width>=760px){.exercise-grid{grid-template-columns:repeat(3,1fr)}.exercise-live{grid-column:1/-1}}.exercise{gap:16px;text-decoration:none;display:grid;position:relative}.exercise h3{margin:4px 0 6px;font-size:1.5rem}.exercise-live{transition:transform .35s var(--ease), box-shadow .35s var(--ease);overflow:hidden}.exercise-live:hover{box-shadow:var(--shadow-2);transform:translateY(-3px)}@media (width>=760px){.exercise-live{grid-template-columns:220px 1fr auto;align-items:center;gap:28px}.exercise-live h3{font-size:2rem}}.exercise-art{background:linear-gradient(160deg, var(--accent-soft), var(--tonic-soft));border-radius:18px;gap:4px;height:120px;padding:34px 14px 0;display:flex;position:relative;overflow:hidden}.art-key{background:var(--key-white);box-shadow:inset 0 -4px 0 var(--key-white-edge);border-radius:0 0 8px 8px;flex:1}.art-key.is-on{background:linear-gradient(#e9e6ff,#c9c3fb)}.art-arc{border:2.5px solid var(--tone);border-bottom:0;border-radius:40px 40px 0 0;width:calc(40% - 11.2px);height:40px;position:absolute;top:8px;left:calc(30% + .8px)}.exercise-body .muted{font-size:.95rem}.exercise-tags{flex-wrap:wrap;gap:6px;margin-top:14px;display:flex}.exercise-progress{color:var(--ink-2);margin-top:12px;font-size:.9rem}.exercise-go{color:#fff;background:linear-gradient(135deg, var(--accent), var(--accent-2));width:56px;height:56px;box-shadow:0 8px 22px color-mix(in srgb, var(--accent) 40%, transparent);transition:transform .35s var(--spring);border-radius:50%;place-items:center;display:none}.exercise-go svg{width:24px;height:24px}.exercise-live:hover .exercise-go{transform:translate(4px)}@media (width>=760px){.exercise-go{display:grid}}.exercise-soon{background:color-mix(in srgb, var(--surface) 55%, transparent);box-shadow:none;border-style:dashed}.exercise-soon h3{color:var(--ink-2);font-size:1.25rem}.exercise-soon .eyebrow{color:var(--ink-3)}.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}.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}.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}.explorer{gap:18px;display:grid}.explorer-controls{gap:26px;display:grid}@media (width>=860px){.explorer-controls{grid-template-columns:1.25fr 1fr;gap:40px}}.control-title{font-family:var(--font-sans);letter-spacing:0;font-size:1rem;font-weight:700}.control-hint{color:var(--ink-3);margin:2px 0 14px;font-size:.9rem}.explorer-title{text-align:center;animation:rise .6s var(--ease) both;padding:18px 4px 4px}.scale-name{letter-spacing:-.03em;font-variation-settings:"SOFT" 100, "WONK" 1;background:linear-gradient(120deg, var(--ink) 30%, var(--accent) 100%);color:#0000;-webkit-background-clip:text;background-clip:text;margin:4px 0 14px;font-size:clamp(2.5rem,11vw,4.4rem);font-weight:600}.scale-meta{flex-wrap:wrap;justify-content:center;gap:8px;display:flex}.pill-button{cursor:pointer;min-height:34px;transition:transform .2s var(--ease);border:0}.pill-button:hover{transform:translateY(-1px)}.theory-note{background:var(--semi-soft);max-width:520px;color:color-mix(in srgb, var(--semi) 60%, var(--ink));border-radius:16px;justify-items:center;gap:12px;margin:16px auto 0;padding:14px 16px;font-size:.92rem;display:grid}.explorer-card{gap:18px;display:grid}.card-head{flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:12px 16px;display:flex}.card-head h2{font-size:1.45rem}.card-head p{margin-top:4px;font-size:.92rem}.card-actions{flex-wrap:wrap;gap:8px;display:flex}@media (width<=520px){.card-actions{width:100%}.card-actions .btn{flex:1;padding:0 14px}}.staff-wrap{width:100%;max-width:640px;margin:0 auto}.toggles{flex-wrap:wrap;gap:4px 22px;display:flex}.info{background:var(--surface-2);color:var(--ink-2);border-radius:14px;padding:12px 14px;font-size:.92rem}.legend{flex-wrap:wrap;gap:8px;display:flex}.degrees{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin:0;padding:0;list-style:none;display:grid}.degrees li{background:var(--surface-2);transition:background .2s var(--ease);border-radius:14px;grid-template-rows:auto auto;grid-template-columns:34px 1fr;align-items:center;column-gap:8px;padding:10px 12px;display:grid}.degrees li.is-active{background:var(--accent-soft)}.degree-roman{font-family:var(--font-serif);color:var(--accent);text-align:center;grid-row:span 2;font-size:1.3rem;font-weight:600}.degree-note{font-weight:700}.degree-name{color:var(--ink-3);font-size:.82rem}.recipe{flex-wrap:wrap;justify-content:center;align-items:center;row-gap:12px;display:flex}.recipe-item{animation:rise .5s var(--ease) both;align-items:center;display:flex}.recipe-note{font-family:var(--font-serif);border-radius:12px;padding:8px 10px;font-size:1.15rem;font-weight:600}.recipe-note.is-tonic{background:var(--tonic-soft);color:color-mix(in srgb, var(--tonic) 70%, var(--ink))}.recipe-step{border-radius:999px;place-items:center;min-width:34px;height:26px;margin:0 2px;padding:0 6px;font-size:.85rem;font-weight:750;display:inline-grid;position:relative}.recipe-step.is-tone{background:var(--tone-soft);color:var(--tone)}.recipe-step.is-semi{background:var(--semi-soft);color:var(--semi)}.recipe-step.is-plus{background:var(--plus-soft);color:var(--plus)}.lesson{gap:16px;max-width:860px;margin:0 auto;display:grid}.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}.practice{gap:16px;max-width:760px;margin:0 auto;display:grid}.setup-card{gap:22px;display:grid}.setup-card h2{margin-bottom:6px;font-size:1.8rem}.setup-types{gap:10px;display:grid}@media (width>=640px){.setup-types{grid-template-columns:1fr 1fr}}.type-card{text-align:left;background:var(--surface-2);box-shadow:inset 0 0 0 1.5px var(--line);cursor:pointer;transition:background .25s var(--ease), box-shadow .25s var(--ease), transform .15s var(--ease);border:0;border-radius:18px;align-items:flex-start;gap:12px;padding:14px;display:flex}.type-card:active:not(:disabled){transform:scale(.98)}.type-card.is-on{background:var(--accent-soft);box-shadow:inset 0 0 0 2px var(--accent)}.type-card:disabled{cursor:default;opacity:.55}.type-check{color:#fff;background:var(--surface);width:26px;height:26px;box-shadow:inset 0 0 0 1.5px var(--line-strong);transition:background .2s var(--ease);border-radius:8px;flex:none;place-items:center;margin-top:1px;display:grid}.type-card.is-on .type-check{background:var(--accent);box-shadow:none}.type-check svg{stroke-width:3px;width:16px;height:16px;animation:pop .35s var(--spring) both}.type-text{gap:2px;display:grid}.type-text strong{font-size:1rem}.type-text span{color:var(--ink-3);font-size:.86rem}.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)}}.scales-head{padding:18px 0}.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}.scales-head h1{letter-spacing:-.03em;font-variation-settings:"SOFT" 100, "WONK" 1;margin:6px 0;font-size:clamp(2.2rem,9vw,3.2rem)}.scales-head p{max-width:52ch}.tabs{z-index:10;-webkit-backdrop-filter:saturate(1.6)blur(14px);background:color-mix(in srgb, var(--bg) 82%, transparent);margin-bottom:18px;padding:8px 0;position:sticky;top:64px}.tabs-inner{gap:6px;display:flex}.tab{min-height:50px;color:var(--ink-2);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);transition:background .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease), transform .2s var(--ease);border-radius:16px;flex:1;justify-content:center;align-items:center;gap:8px;padding:0 10px;font-size:.95rem;font-weight:650;text-decoration:none;display:flex}.tab svg{flex:none;width:20px;height:20px}.tab:active{transform:scale(.97)}.tab.active{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){.tab.active{color:#12111d}}@media (width<=420px){.tab{flex-direction:column;gap:2px;min-height:58px;font-size:.8rem}}.scales-body{animation:rise .5s var(--ease) both}