.hero{flex-direction:column;gap:8px;padding:8px 4px 0;display:flex}.hero__line{color:var(--muted);max-width:60ch;font-size:18px;font-weight:600}.stats{grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:16px;display:grid}.two-up{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;display:grid}.zones{flex-wrap:wrap;gap:8px;display:flex}.home__links{justify-content:space-between}.kb{-webkit-overflow-scrolling:touch;scrollbar-width:none;touch-action:pan-x;background:var(--key-black);border-radius:14px;width:100%;padding:6px 4px 0;overflow:auto hidden}.kb::-webkit-scrollbar{display:none}.kb__inner{height:100%;min-height:120px;display:flex;position:relative}.kb__white{background:var(--key-white);border:1px solid #b9bcc4;border-top:0;border-radius:0 0 6px 6px;flex:1 1 0;justify-content:center;align-items:flex-end;min-width:0;height:100%;padding-bottom:8px;transition:background 80ms;display:flex;position:relative}.kb__white[data-middle-c]{background:linear-gradient(to top, var(--accent-soft) 0 22%, var(--key-white) 22%)}.kb__label{color:#555b66;pointer-events:none;font-size:12px;font-weight:800}.kb__black{background:var(--key-black);z-index:1;border-radius:0 0 5px 5px;height:60%;transition:background 80ms;position:absolute;top:0;box-shadow:inset 0 -6px #ffffff1f}.kb__white[data-hl=pressed]{background:#e4e7ec}.kb__black[data-hl=pressed]{background:#4a505c}.kb__white[data-hl=correct],.kb__black[data-hl=correct]{background:var(--correct)}.kb__white[data-hl=wrong],.kb__black[data-hl=wrong]{background:var(--wrong)}.kb[data-disabled]{opacity:.6;pointer-events:none}.staff{width:100%;height:100%;color:var(--ink,#1f2430);display:block;overflow:visible}.staff__line{stroke:var(--staff-line,currentColor);opacity:.85}.staff__ink{fill:currentColor}.staff__ledger{stroke:currentColor}.staff__head{fill:var(--note,currentColor);transition:fill .16s}.staff__stem{stroke:var(--note,currentColor);transition:stroke .16s}.staff__label{fill:var(--accent,#d9480f);font-family:inherit;font-weight:800}.staff__ghost{stroke:var(--wrong,#d03a3a);fill:var(--wrong,#d03a3a);opacity:.85}.staff__caret{fill:var(--accent,#d9480f)}.staff__note{transform-box:fill-box}.staff__note[data-state=correct],.staff__note[data-state=solved]{--note:var(--correct,#1f9d55)}.staff__note[data-state=correct]{animation:.32s cubic-bezier(.2,1.4,.4,1) staff-pop}.staff__note[data-state=wrong]{--note:var(--wrong,#d03a3a);animation:.36s staff-shake}@keyframes staff-pop{0%{transform:scale(1)}40%{transform:scale(1.25)}to{transform:scale(1)}}@keyframes staff-shake{0%,to{transform:translate(0)}25%{transform:translate(-.35px)}75%{transform:translate(.35px)}}@media (prefers-reduced-motion:reduce){.staff__note{animation:none!important}}.practice{flex-direction:column;height:100dvh;display:flex;overflow:hidden}.practice__top{padding-top:max(8px, env(safe-area-inset-top));align-items:center;gap:12px;padding-bottom:4px;display:flex}.practice__progress{flex:1;justify-content:center;align-items:baseline;gap:10px;font-size:16px;display:flex}.practice__streak{text-align:right;min-width:48px;color:var(--accent);font-weight:900}.practice__staff{flex:1 1 0;justify-content:center;align-items:center;min-height:0;padding:0 clamp(8px,3vw,40px);display:flex}.practice__staff .staff{max-height:100%}.practice__feedback{text-align:center;justify-content:center;align-items:center;min-height:52px;padding:0 16px;display:flex}.practice__line{color:var(--muted);font-size:clamp(17px,2.4vw,22px);font-weight:800}.practice__line--correct,.practice__line--solved{color:var(--correct)}.practice__line--wrong{color:var(--wrong)}.practice__line--revealed{color:var(--accent);font-size:clamp(22px,3vw,30px)}.practice__toast{color:var(--accent);font-size:clamp(16px,2.2vw,20px);font-weight:800;animation:.24s toast-in}@keyframes toast-in{0%{opacity:0;transform:translateY(6px)}}.practice__input{padding-bottom:max(12px, env(safe-area-inset-bottom));flex-direction:column;gap:10px;display:flex}.practice--tap .kb{height:clamp(110px,24dvh,220px)}.practice__buttons{justify-content:center;gap:10px;display:flex}.practice__buttons .btn{flex:1 1 0;max-width:320px}.listen{border-radius:var(--radius-sm);background:var(--surface);box-shadow:var(--shadow);align-items:center;gap:12px;padding:10px 14px;display:flex}.listen__dot{background:var(--muted);border-radius:50%;flex-shrink:0;width:12px;height:12px}.listen--listening .listen__dot{background:var(--correct);box-shadow:0 0 0 4px var(--correct-soft)}.listen--error .listen__dot,.listen--unavailable .listen__dot{background:var(--wrong)}.listen__text{flex-direction:column;flex:1;min-width:0;display:flex}.listen__text small{color:var(--muted)}.listen__meter{background:var(--surface-2);border-radius:99px;flex-shrink:0;width:110px;height:8px;overflow:hidden}.listen__meter-fill{background:var(--accent);height:100%;transition:width 80ms linear}.practice-intro{justify-content:center;max-width:640px}.practice-compare{color:var(--accent);font-size:18px;font-weight:800}@media (orientation:landscape) and (max-height:500px){.practice__feedback{min-height:36px}.practice--tap .kb{height:clamp(90px,30dvh,150px)}.practice__buttons .btn{min-height:48px}}.practice__body{flex-direction:column;flex:auto;min-height:0;display:flex}.practice__side{flex-direction:column;flex:none;gap:8px;display:flex}.practice__staff{min-height:120px}@media (orientation:landscape) and (max-height:500px){.practice:not(.practice--tap) .practice__body{padding:0 max(8px, env(safe-area-inset-left)) 0 0;flex-direction:row;align-items:stretch;gap:12px}.practice:not(.practice--tap) .practice__staff{flex:1.4 1 0;padding:4px 8px 8px 12px}.practice:not(.practice--tap) .practice__side{padding-right:max(12px, env(safe-area-inset-right));flex:1 1 0;justify-content:center}.practice:not(.practice--tap) .practice__feedback{text-align:left;justify-content:flex-start;min-height:0;padding:0}.practice:not(.practice--tap) .practice__buttons{flex-direction:column}.practice:not(.practice--tap) .practice__buttons .btn{max-width:none}}:root{--viz-series:#2a78d6;--viz-ramp-1:#cde2fb;--viz-ramp-2:#86b6ef;--viz-ramp-3:#3987e5;--viz-ramp-4:#1c5cab;--viz-ramp-5:#0d366b;--viz-grid:#e1e0d9;--viz-axis:#c3c2b7;--viz-muted:#898781;--viz-critical:#d03b3b}html[data-theme=midnight],html[data-theme=system][data-dark=true]{--viz-series:#3987e5;--viz-ramp-1:#184f95;--viz-ramp-2:#256abf;--viz-ramp-3:#3987e5;--viz-ramp-4:#6da7ec;--viz-ramp-5:#b7d3f6;--viz-grid:#2c2c2a;--viz-axis:#383835;--viz-muted:#898781;--viz-critical:#e66767}.notemap{width:100%;position:relative}.notemap svg{width:100%;height:auto;color:var(--ink);display:block}.notemap__hit{fill:#0000;cursor:pointer}.notemap__head{pointer-events:none;transition:fill .12s}.notemap__head--empty{fill:none;stroke:var(--viz-muted);stroke-width:.1px}.notemap__ledger{stroke:currentColor;opacity:.6}.notemap__miss{fill:var(--viz-critical)}.notemap__selected{fill:none;stroke:var(--ink);stroke-width:.12px}.notemap__legend{color:var(--muted);flex-wrap:wrap;align-items:center;gap:6px 14px;margin-top:8px;font-size:13px;display:flex}.notemap__legend i{vertical-align:-2px;border-radius:50%;width:14px;height:14px;margin-right:5px;display:inline-block}.notemap__detail{border-radius:var(--radius-sm);background:var(--surface-2);flex-wrap:wrap;align-items:baseline;gap:6px 18px;margin-top:10px;padding:12px 14px;display:flex}.notemap__detail strong{font-size:20px}.trend{width:100%;position:relative}.trend svg{width:100%;height:auto;font-family:inherit;display:block;overflow:visible}.trend__grid{stroke:var(--viz-grid);stroke-width:1px}.trend__axis{stroke:var(--viz-axis);stroke-width:1px}.trend__line{fill:none;stroke:var(--viz-series);stroke-width:2px;stroke-linejoin:round;stroke-linecap:round}.trend__dot{fill:var(--viz-series);stroke:var(--surface);stroke-width:2px}.trend__tick{fill:var(--viz-muted);font-variant-numeric:tabular-nums;font-size:11px}.trend__label{fill:var(--ink);font-size:12px;font-weight:800}.trend__cross{stroke:var(--viz-axis);stroke-width:1px}.trend__tip{background:var(--ink);color:var(--bg);pointer-events:none;white-space:nowrap;border-radius:8px;padding:4px 8px;font-size:12px;font-weight:700;position:absolute;transform:translate(-50%,-100%)}.trend__hit{fill:#0000;cursor:crosshair}.bars{grid-template-columns:minmax(96px,1fr) 3fr auto;align-items:center;gap:8px 12px;font-size:15px;display:grid}.bars__label{font-weight:700}.bars__track{height:20px;position:relative}.bars__fill{background:var(--viz-series);border-radius:0 4px 4px 0;min-width:2px;height:100%;position:absolute;top:0;left:0}.bars__value{font-variant-numeric:tabular-nums;text-align:right;font-weight:800}.bars__note{color:var(--muted);grid-column:1/-1;margin-top:-4px;font-size:13px}.tiles{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px;display:grid}.stat__delta{color:var(--muted);font-size:13px;font-weight:700}.stat__delta.is-good{color:var(--correct)}.stat__delta.is-bad{color:var(--wrong)}.insights{flex-direction:column;gap:6px;margin:8px 0 0;padding-left:20px;font-size:16px;display:flex}.insights:empty{display:none}table.data{border-collapse:collapse;font-variant-numeric:tabular-nums;width:100%;font-size:15px}table.data th,table.data td{text-align:left;border-bottom:1px solid var(--line);padding:8px 6px}table.data th{text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-size:12px}.practice__progress .pill{padding:2px 10px;font-size:12px}.themes{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;display:grid}.theme-chip{text-align:left;border-radius:var(--radius-sm);border:2px solid var(--line);background:var(--surface);align-items:center;gap:12px;padding:10px 12px;font-weight:800;display:flex}.theme-chip small{color:var(--muted);font-weight:600;display:block}.theme-chip.is-on{border-color:var(--accent)}.theme-chip__swatch{background:linear-gradient(135deg,#fff7ed 50%,#e8590c 50%);border:2px solid #0000001a;border-radius:50%;flex-shrink:0;width:28px;height:28px}.theme-chip--ocean .theme-chip__swatch{background:linear-gradient(135deg,#ecfeff 50%,#0e7490 50%)}.theme-chip--grape .theme-chip__swatch{background:linear-gradient(135deg,#f5f3ff 50%,#7c3aed 50%)}.theme-chip--midnight .theme-chip__swatch{background:linear-gradient(135deg,#1a2029 50%,#f59e0b 50%)}.theme-chip--system .theme-chip__swatch{background:linear-gradient(135deg,#fff7ed 50%,#1a2029 50%)}.splash{flex:1;place-items:center;min-height:100dvh;display:grid}.splash__note{color:var(--accent);font-size:64px;animation:.9s ease-in-out infinite alternate splash-bob}@keyframes splash-bob{0%{transform:translateY(-6px)}to{transform:translateY(6px)}}.topbar{padding-top:max(10px, env(safe-area-inset-top));align-items:center;gap:12px;width:min(100%,980px);margin:0 auto;padding-bottom:6px;display:flex}.topbar__brand{letter-spacing:-.02em;color:var(--ink);margin-right:auto;font-size:18px;font-weight:900;text-decoration:none}.topbar__nav{gap:2px;display:flex}.topbar__link{min-height:40px;color:var(--muted);border-radius:999px;align-items:center;padding:0 12px;font-size:15px;font-weight:800;text-decoration:none;display:inline-flex}.topbar__link.is-active{background:var(--accent-soft);color:var(--ink)}.sync{color:var(--muted);align-items:center;gap:6px;font-size:14px;font-weight:800;display:inline-flex}.sync__dot{background:var(--correct);border-radius:50%;width:8px;height:8px}.sync--syncing .sync__dot{background:var(--accent);animation:.5s ease-in-out infinite alternate splash-bob}.sync--offline .sync__dot,.sync--error .sync__dot{background:var(--muted)}.topbar__brand{white-space:nowrap}@media (max-width:520px){.topbar{gap:6px}.topbar__brand{font-size:16px}.topbar__link{padding:0 8px;font-size:14px}.sync{text-overflow:ellipsis;white-space:nowrap;max-width:90px;font-size:13px;overflow:hidden}}:root{--bg:#fff7ed;--surface:#fff;--surface-2:#fff1e0;--ink:#1f2430;--muted:#6b7280;--line:#ead9c4;--accent:#e8590c;--accent-ink:#fff;--accent-soft:#ffedd5;--correct:#1f9d55;--correct-soft:#dcfce7;--wrong:#d03a3a;--wrong-soft:#fee2e2;--staff-line:#3a3f4b;--key-white:#fffdf9;--key-black:#2b2f3a;--shadow:0 10px 30px #1f243014;--radius:20px;--radius-sm:12px;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}html[data-theme=ocean]{--bg:#ecfeff;--surface:#fff;--surface-2:#e0fbff;--line:#bfeef4;--accent:#0e7490;--accent-soft:#cffafe;--staff-line:#1f3a44}html[data-theme=grape]{--bg:#f5f3ff;--surface:#fff;--surface-2:#ede9fe;--line:#ddd6fe;--accent:#7c3aed;--accent-soft:#ede9fe;--staff-line:#2e2548}html[data-theme=midnight],html[data-theme=system][data-dark=true]{--bg:#0f1419;--surface:#1a2029;--surface-2:#222a35;--ink:#e8ecf1;--muted:#9aa4b2;--line:#2c3542;--accent:#f59e0b;--accent-ink:#1a1200;--accent-soft:#3a2f14;--correct:#34d399;--correct-soft:#113b2c;--wrong:#f87171;--wrong-soft:#4a1d1d;--staff-line:#c9d1dc;--key-white:#e9edf2;--key-black:#11151c;--shadow:0 10px 30px #00000059;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*,:before,:after{box-sizing:border-box}html{-webkit-text-size-adjust:100%;height:100%}body{min-height:100%;color:var(--ink);background:var(--bg);-webkit-tap-highlight-color:transparent;-webkit-font-smoothing:antialiased;overscroll-behavior-y:none;margin:0;font-family:ui-rounded,SF Pro Rounded,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;line-height:1.35}#root{flex-direction:column;min-height:100dvh;display:flex}button,input,select{font:inherit;color:inherit}button{touch-action:manipulation;-webkit-user-select:none;user-select:none;cursor:pointer;background:0 0;border:0;padding:0}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid var(--accent);outline-offset:3px}a{color:var(--accent)}h1,h2,h3,p{margin:0}h1{letter-spacing:-.03em;font-size:clamp(28px,5vw,40px);font-weight:900;line-height:1.05}h2{letter-spacing:-.02em;font-size:clamp(20px,3vw,26px);font-weight:850}h3{text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-size:16px;font-weight:800}.muted{color:var(--muted)}.safe{padding-left:max(16px, env(safe-area-inset-left));padding-right:max(16px, env(safe-area-inset-right))}.btn{border-radius:var(--radius-sm);background:var(--surface);border:2px solid var(--line);min-height:52px;color:var(--ink);justify-content:center;align-items:center;gap:8px;padding:12px 20px;font-size:17px;font-weight:800;transition:transform 80ms,background .12s,border-color .12s;display:inline-flex}.btn:active{transform:scale(.97)}.btn[disabled]{opacity:.5;cursor:default}.btn-primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}.btn-ghost{background:0 0;border-color:#0000}.btn-soft{background:var(--accent-soft);color:var(--ink);border-color:#0000}.btn-lg{border-radius:var(--radius);min-height:64px;padding:14px 24px;font-size:20px}.btn-sm{min-height:40px;padding:6px 14px;font-size:15px}.btn.is-on{border-color:var(--accent);background:var(--accent-soft)}.card{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px}.stack{flex-direction:column;gap:12px;display:flex}.row{flex-wrap:wrap;align-items:center;gap:12px;display:flex}.grow{flex:auto}.page{width:min(100%,980px);padding:16px;padding-bottom:max(24px, env(safe-area-inset-bottom));flex-direction:column;flex:1;gap:16px;margin:0 auto;display:flex}.pill{background:var(--accent-soft);letter-spacing:.04em;text-transform:uppercase;border-radius:999px;align-items:center;gap:6px;padding:4px 12px;font-size:13px;font-weight:800;display:inline-flex}.stat{flex-direction:column;gap:2px;display:flex}.stat__value{letter-spacing:-.03em;font-size:30px;font-weight:900;line-height:1}.stat__label{color:var(--muted);font-size:13px;font-weight:700}.seg{background:var(--surface-2);border-radius:14px;gap:4px;padding:4px;display:inline-flex}.seg button{color:var(--muted);border-radius:10px;min-height:44px;padding:10px 16px;font-size:15px;font-weight:800}.seg button[aria-pressed=true]{background:var(--surface);color:var(--ink);box-shadow:0 1px 6px #00000014}.field{flex-direction:column;gap:6px;display:flex}.field label{font-size:14px;font-weight:800}.input{border-radius:var(--radius-sm);border:2px solid var(--line);background:var(--surface);min-height:50px;padding:10px 14px;font-size:17px}.switch{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;gap:12px;min-height:52px;padding:8px 0;display:flex}.switch:last-child{border-bottom:0}.switch input{width:28px;height:28px;accent-color:var(--accent)}.switch__text{flex-direction:column;display:flex}.switch__text small{color:var(--muted)}.error{color:var(--wrong);font-weight:700}@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}