.brand-mark-tile{fill:var(--mark-tile);stroke:var(--mark-edge)}.brand-mark-keys{fill:var(--mark-keys)}.brand-mark-bar{fill:var(--accent)}.piano-mark-lit{fill:var(--accent);opacity:0}.piano-mark--moving .piano-mark-key{animation:mark-dip var(--loader-cycle) linear var(--dip-at) infinite}.piano-mark--moving .piano-mark-lit{animation:mark-light var(--loader-cycle) linear var(--dip-at) infinite}@keyframes mark-dip{0%{animation-timing-function:ease-out;transform:none}3.75%,10%{animation-timing-function:ease-out;transform:translateY(4px)}17.5%,to{transform:none}}@keyframes mark-light{0%{opacity:0;animation-timing-function:ease-out}3.75%,10%{opacity:1;animation-timing-function:ease-out}17.5%,to{opacity:0}}.mini-key-face{fill:var(--key-white);stroke:var(--key-edge)}.mini-key-lit{fill:var(--key-pressed);opacity:0}.mini-key-black{fill:var(--key-black)}.five-fingers{flex:none;width:70px;height:auto}.finger-key{animation:finger-press var(--loader-cycle) linear var(--press-a) infinite}.finger-key .mini-key-lit{animation:finger-light var(--loader-cycle) linear var(--press-a) infinite}.finger-key--twice{animation:finger-press var(--loader-cycle) linear var(--press-a) infinite, finger-press var(--loader-cycle) linear var(--press-b) infinite;animation-composition:replace,add}.finger-key--twice .mini-key-lit{animation:finger-light var(--loader-cycle) linear var(--press-a) infinite, finger-light var(--loader-cycle) linear var(--press-b) infinite;animation-composition:replace,add}@keyframes finger-press{0%{transform:none}3.12%,10.62%{transform:translateY(3px)}12.5%,to{transform:none}}@keyframes finger-light{0%{opacity:0}3.12%,10.62%{opacity:1}12.5%,to{opacity:0}}.keys-fill{flex:none;width:110px;height:auto}.fill-key .mini-key-lit{transition:opacity var(--motion-quick) linear}.fill-key--filled .mini-key-lit{opacity:1}.octave-ripple{width:200px;height:auto}.ripple-key{animation:ripple-press var(--motion-moment) var(--ease-move) backwards;animation-delay:var(--ripple-at)}.ripple-key .mini-key-lit{fill:var(--accent-soft);animation:ripple-light var(--motion-moment) var(--ease-move) backwards;animation-delay:var(--ripple-at)}@keyframes ripple-press{35%,60%{transform:translateY(3px)}}@keyframes ripple-light{35%,60%{opacity:1}}:root{--loader-page-mark:clamp(104px, 22vmin, 152px)}.loader{flex-direction:column;align-items:center;gap:12px;display:flex}.loader-status{align-items:center;gap:12px;display:flex}.loader-mark{flex:none;width:40px;height:40px}.loader-words{flex-direction:column;gap:4px;margin:0;display:flex}.loader-line{font-weight:700}.loader-slow,.loader-detail{color:var(--muted);font-size:var(--text-small)}.loader--page .loader-status{text-align:center;flex-direction:column;gap:14px}.loader--page .loader-mark{width:var(--loader-page-mark);height:var(--loader-page-mark)}.loader--page .loader-line{font-size:18px}.busy-button{position:relative}.busy-button[aria-busy=true]{cursor:progress}.busy-label{align-items:center;gap:inherit;display:inline-flex}.busy-button[data-busy=true] .busy-label{opacity:0}.busy-mark{width:26px;height:26px;margin:auto;position:absolute;inset:0}.busy-words:empty{clip-path:inset(50%);width:1px;height:1px;position:absolute;overflow:hidden}:root[data-motion=less] :is(.piano-mark-key,.piano-mark-lit,.finger-key,.finger-key .mini-key-lit,.ripple-key,.ripple-key .mini-key-lit){animation:none}:root[data-motion=less] .fill-key .mini-key-lit{transition:none}@font-face{font-family:Atkinson Hyperlegible Next;font-style:normal;font-display:swap;font-weight:400;src:url(/assets/atkinson-hyperlegible-next-latin-400-normal-FfmJh7DR.woff2)format("woff2"),url(/assets/atkinson-hyperlegible-next-latin-400-normal-DPp7N0cD.woff)format("woff")}@font-face{font-family:Atkinson Hyperlegible Next;font-style:normal;font-display:swap;font-weight:700;src:url(/assets/atkinson-hyperlegible-next-latin-700-normal-Dpiyiu63.woff2)format("woff2"),url(/assets/atkinson-hyperlegible-next-latin-700-normal-C2qZD_Q9.woff)format("woff")}@font-face{font-family:Bodoni Moda;font-style:normal;font-display:swap;font-weight:500;src:url(/assets/bodoni-moda-latin-500-normal-CtAcMono.woff2)format("woff2"),url(/assets/bodoni-moda-latin-500-normal-B12im5S-.woff)format("woff")}@font-face{font-family:IBM Plex Mono;font-style:normal;font-display:swap;font-weight:400;src:url(/assets/ibm-plex-mono-latin-400-normal-DMJ8VG8y.woff2)format("woff2"),url(/assets/ibm-plex-mono-latin-400-normal-CvHOgSBP.woff)format("woff")}@font-face{font-family:IBM Plex Mono;font-style:normal;font-display:swap;font-weight:600;src:url(/assets/ibm-plex-mono-latin-600-normal-BgSNZQsw.woff2)format("woff2"),url(/assets/ibm-plex-mono-latin-600-normal-DWFSQ4vo.woff)format("woff")}:root{--font-ui:"Atkinson Hyperlegible Next", system-ui, sans-serif;--font-display:"Bodoni Moda", Georgia, serif;--font-mono:"IBM Plex Mono", ui-monospace, monospace;--font-notation:"Bravura";--text-body:15px;--text-small:14px;--text-eyebrow:12px;--text-key:14px;--text-cue-base:28px;--text-cue-min:24px;--text-title:40px;--line-height-body:1.5;--line-height-cue:1.25;--staff-space-base:12px;--stand-scale:1;--touch-target:44px;--radius:8px;--radius-nav:6px;--radius-panel:10px;--radius-pill:999px;--panel-padding:24px;--gutter:24px;--focus-ring-width:3px;--focus-dark:#1a1a1a;--focus-light:#fff;--paper-panel:#f8f5ee}:root,.stand-scaled{--staff-space:calc(var(--staff-space-base) * var(--stand-scale));--text-cue:max(var(--text-cue-min), calc(var(--text-cue-base) * var(--stand-scale)))}:root,:root[data-theme=paper],[data-theme-preview=paper]{--paper:#faf7f0;--surface:#fff;--sunken:#f1eee6;--ink:#1a1a1a;--muted:#565c66;--line:#dcd8ce;--field-edge:#8a857a;--accent:#24497a;--accent-hover:#1b3a63;--accent-soft:#dce6f4;--accent-mid:#7e9cc7;--on-accent:#fff;--correct:#009e73;--correct-text:#00785a;--correct-soft:#d5efe6;--wrong:#d55e00;--wrong-text:#ab4400;--wrong-soft:#fbe3d3;--expected:#0072b2;--expected-text:#00639b;--expected-soft:#d6ebf6;--meter-over:#d55e00;--connected:#009e73;--staff-line-width:1;--mark-tile:#fff;--mark-edge:#1a1a1a;--mark-keys:#1a1a1a;--key-white:#fff;--key-black:#1a1c21;--key-edge:#bfc5d0;--key-label:#565c66;--key-label-strong:#1a1a1a;--key-ring-width:3px;--key-expected-ring:#0072b2;--key-expected-fill:#d6ebf6;--key-expected-mark:#00639b;--key-wrong-fill:#fbe3d3;--key-wrong-mark:#ab4400;--key-correct-ring:#00785a;--key-black-expected:#56b4e9;--key-black-correct:#009e73;--key-black-wrong:#e69f00;--key-black-mark:#fff;--key-found-fill:#00785a;--key-found-ring:#009e73;--key-found-mark:#fff;--key-white-found:#d5efe6;--key-pressed:#9fbbe2;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}:root[data-theme=dark],[data-theme-preview=dark]{--paper:#121212;--surface:#1c1c1e;--sunken:#26262a;--ink:#e8e6e3;--muted:#a3a8b0;--line:#34343a;--field-edge:#75777e;--accent:#9db8e6;--accent-hover:#c4d5f2;--accent-soft:#26324a;--accent-mid:#3e5c88;--on-accent:#121212;--correct:#56b4e9;--correct-text:#56b4e9;--correct-soft:#173040;--wrong:#e69f00;--wrong-text:#e69f00;--wrong-soft:#3a2a10;--expected:#f0e442;--expected-text:#f0e442;--expected-soft:#3a3714;--meter-over:#d55e00;--connected:#009e73;--staff-line-width:1.25;--mark-tile:#e8e6e3;--mark-edge:#e8e6e3;--mark-keys:#121212;--key-white:#dad7d1;--key-black:#08090b;--key-edge:#6b6e75;--key-label:#3a3d44;--key-label-strong:#121212;--key-ring-width:4px;--key-expected-ring:#f0e442;--key-expected-fill:#f4efb8;--key-expected-mark:#121212;--key-wrong-fill:#f2d7a6;--key-wrong-mark:#5a3600;--key-correct-ring:#00785a;--key-black-expected:#f0e442;--key-black-correct:#56b4e9;--key-black-wrong:#e69f00;--key-black-mark:#e8e6e3;--key-found-fill:#56b4e9;--key-found-ring:#56b4e9;--key-found-mark:#121212;--key-white-found:#c9e4f4;--key-pressed:#5f80b8;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}@media (width<=47.99rem){:root{--gutter:16px}}body{background:var(--paper);color:var(--ink);font-family:var(--font-ui);font-size:var(--text-body);line-height:var(--line-height-body);margin:0}a{color:var(--accent)}a:hover{color:var(--accent-hover)}.text-cue{font-size:var(--text-cue);line-height:var(--line-height-cue);font-weight:700}.text-display{font-family:var(--font-display);text-wrap:balance;font-weight:500}.text-numbers{font-family:var(--font-mono);font-variant-numeric:tabular-nums}.eyebrow{font-size:var(--text-eyebrow);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0;font-weight:700}:root{--motion-press:80ms;--motion-quick:.12s;--motion-base:.2s;--motion-enter:.24s;--motion-fill:.3s;--motion-moment:.4s;--ease-enter:cubic-bezier(0, 0, .2, 1);--ease-move:cubic-bezier(.2, 0, 0, 1);--ease-exit:cubic-bezier(.4, 0, 1, 1);--motion-rise:8px;--motion-stagger:40ms;--motion-show-enter:.38s;--motion-show-fill:.7s;--motion-show-rise:20px;--motion-show-stagger:90ms;--ease-show:cubic-bezier(.34, 1.4, .64, 1);--ease-show-fill:cubic-bezier(.34, 1.3, .64, 1);--loader-cycle:1.6s}@keyframes motion-rise{0%{opacity:0;transform:translateY(var(--motion-travel,var(--motion-rise)))}}@keyframes motion-fade{0%{opacity:0}}@keyframes motion-settle{0%{opacity:0;scale:.85}}@keyframes motion-draw{0%{stroke-dashoffset:1px}}@keyframes motion-ring-fill{0%{stroke-dashoffset:100px}}@keyframes motion-grow-y{0%{transform:scaleY(0)}}.motion-enter{animation:motion-rise var(--motion-enter) var(--ease-enter) backwards}.motion-fade-in{animation:motion-fade var(--motion-enter) var(--ease-enter) backwards}.motion-show-rise,[data-motion-screen=expressive] :is(.panel,.motion-panel):not(:is(.panel,.motion-panel) *){--motion-travel:var(--motion-show-rise);animation:motion-rise var(--motion-show-enter) var(--ease-show) backwards;animation-delay:var(--motion-delay,calc(var(--motion-show-stagger) * var(--motion-order,0)))}:is(.panel,.motion-panel):nth-child(2){--motion-order:1}:is(.panel,.motion-panel):nth-child(3){--motion-order:2}:is(.panel,.motion-panel):nth-child(4){--motion-order:3}:is(.panel,.motion-panel):nth-child(5){--motion-order:4}:is(.panel,.motion-panel):nth-child(n+6){--motion-order:5}.motion-ring{animation:motion-ring-fill var(--motion-show-fill) var(--ease-show-fill) var(--motion-fill) backwards}.motion-grow-y{transform-origin:bottom;animation:motion-grow-y var(--motion-show-fill) var(--ease-show-fill) var(--motion-fill) backwards}.motion-draw{stroke-dasharray:1;animation:motion-draw var(--motion-show-fill) var(--ease-move) var(--motion-fill) backwards}[data-motion-screen=expressive] .motion-settle{animation:motion-settle var(--motion-show-enter) var(--ease-show) backwards;animation-delay:calc(var(--motion-fill) + var(--motion-stagger) * var(--motion-order,0))}:root[data-motion=less] :is(.motion-enter,.motion-fade-in,.motion-show-rise,.motion-ring,.motion-grow-y,.motion-draw,.motion-settle,[data-motion-screen=expressive] .panel,[data-motion-screen=expressive] .motion-panel){animation:none}.timed-take[data-timed=playing],.timed-take[data-timed=playing] :is(*){transition:none!important;animation:none!important}.screen{gap:var(--gutter);flex-direction:column;display:flex}:where(.screen) h2{margin:0;font-size:26px}:where(.screen) h3{font-size:var(--text-body);margin:0}.screen-title{font-size:var(--text-title);font-weight:500;line-height:1.5}.back-link{min-height:var(--touch-target);color:var(--accent);align-self:flex-start;align-items:center;gap:6px;font-weight:700;text-decoration:none;display:inline-flex}.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-panel);padding:var(--panel-padding);flex-direction:column;gap:12px;min-width:0;display:flex}.panel p{margin:0}.muted{color:var(--muted)}.button{min-height:var(--touch-target);border-radius:var(--radius);border:1px solid var(--line);background:var(--surface);color:var(--ink);font:inherit;cursor:pointer;justify-content:center;align-self:flex-start;align-items:center;gap:8px;padding:0 18px;font-weight:700;text-decoration:none;display:inline-flex}.button:hover{color:var(--ink);background:var(--paper)}.button--primary,.button--primary:hover{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}.button--primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}.button[aria-pressed=true]{background:var(--accent-soft);box-shadow:inset 0 0 0 2px var(--accent)}.button--roomy{border-radius:10px;min-height:48px;padding-inline:20px}.button-aside{color:var(--muted);font-weight:400}.button:focus-visible,.link-button:focus-visible,.segmented button:focus-visible,.switch input:focus-visible,.file-picker:focus-within .button,.text-link:focus-visible{outline:var(--focus-ring-width) solid var(--accent);outline-offset:2px}.link-button{font:inherit;min-height:var(--touch-target);color:var(--accent);text-underline-offset:3px;cursor:pointer;background:0 0;border:none;padding:0;font-weight:700;text-decoration:underline}.link-button:hover{color:var(--accent-hover)}.text-link{min-height:var(--touch-target);align-items:center;font-weight:700;display:inline-flex}.segmented{border:1px solid var(--line);border-radius:var(--radius);display:inline-flex;overflow:hidden}.segmented button{font:inherit;min-height:var(--touch-target);background:var(--surface);color:var(--muted);cursor:pointer;border:none;padding:0 16px;font-weight:700}.segmented button+button{border-left:1px solid var(--line)}.segmented button:hover{color:var(--ink)}.segmented button:disabled{color:var(--muted);cursor:not-allowed;opacity:.6}.segmented button[aria-pressed=true]{background:var(--accent-soft);color:var(--ink)}.drill-switch button{white-space:nowrap}.segmented button:focus-visible{outline-offset:-3px}.switch{min-height:var(--touch-target);cursor:pointer;align-items:center;gap:8px;font-size:14px;font-weight:700;display:inline-flex}.switch input{width:18px;height:18px;accent-color:var(--accent);margin:0}.notice{border:1px solid var(--line);border-radius:var(--radius);background:var(--accent-soft);color:var(--ink);margin:0;padding:12px 16px}.notice--with-action{flex-wrap:wrap;align-items:center;gap:8px 16px;display:flex}.notice--with-action p{flex:280px;margin:0}.backup-message{flex-basis:100%;margin:0}.backup-message--none{display:contents}.backup-message--problem{font-weight:700}.tempo-mark{font-feature-settings:"palt"}.visually-hidden{clip-path:inset(50%);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.data-screen{max-width:48rem}.file-picker{align-self:flex-start;position:relative}.file-picker input{opacity:0;cursor:pointer;width:100%;height:100%;position:absolute;inset:0}@media (width<=47.99rem){.screen-title{font-size:32px;line-height:1.2}}.app-header{background:var(--surface);border-bottom:1px solid var(--line)}.app-header-inner,.app-main{box-sizing:border-box;max-width:1200px;margin:0 auto;padding-inline:max(16px,3vw)}.app-header-inner{flex-wrap:wrap;align-items:center;gap:8px 24px;padding-block:10px;display:flex}.app-main{padding-block:28px 48px}.brand{font-size:inherit;margin:0;line-height:1}.brand a{color:var(--ink);align-items:center;gap:10px;text-decoration:none;display:inline-flex;position:relative}.brand-mark{width:30px;height:30px}.wordmark{letter-spacing:-.02em;margin:0;font-size:24px;font-weight:700;line-height:1.5}.wordmark span{color:var(--accent)}.app-nav{flex:1;gap:2px;min-width:0;display:flex}.app-nav a{min-height:var(--touch-target);box-sizing:border-box;border-radius:var(--radius-nav);color:var(--muted);align-items:center;padding:10px 12px;font-size:15px;font-weight:700;text-decoration:none;display:inline-flex}.app-nav a:hover,.tab-bar a:hover{color:var(--ink)}.app-nav a[aria-current]{color:var(--ink);background:var(--accent-soft)}.app-nav a:focus-visible,.tab-bar a:focus-visible,.brand a:focus-visible,.account-button:focus-visible,.keyboard-badge:focus-visible{outline:var(--focus-ring-width) solid var(--accent);outline-offset:2px}.app-header-tools{align-items:center;gap:12px;margin-left:auto;display:flex}.brand a:after{content:"";width:max(100%, var(--touch-target));height:max(100%, var(--touch-target));position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%)}.tab-bar{display:none}.keyboard-badge{border:1px solid var(--line);border-radius:var(--radius-pill);color:var(--muted);font:inherit;font-size:13px;line-height:var(--line-height-body);background:0 0;align-items:center;gap:8px;margin:0;padding:8px 14px;display:inline-flex}button.keyboard-badge{color:var(--ink);cursor:pointer;font-weight:700}button.keyboard-badge:hover{background:var(--paper)}.keyboard-badge-mark{border:2px solid var(--muted);box-sizing:border-box;border-radius:50%;width:10px;height:10px}.keyboard-badge[data-state=ready] .keyboard-badge-mark{background:var(--connected);border-color:var(--connected)}.keyboard-badge[data-state=disconnected] .keyboard-badge-mark,.keyboard-badge[data-state=denied] .keyboard-badge-mark{border-color:var(--wrong);border-style:dashed}.account-button{min-width:var(--touch-target);min-height:var(--touch-target);box-sizing:border-box;border:1px solid var(--line);border-radius:var(--radius-pill);color:var(--ink);justify-content:center;align-items:center;gap:8px;padding:0 16px;font-size:15px;font-weight:700;text-decoration:none;display:inline-flex}.account-button:hover{background:var(--paper)}.account-button[aria-current]{background:var(--accent-soft);border-color:var(--accent)}.account-button-icon{fill:none;stroke:currentColor;stroke-width:2px;stroke-linecap:round;stroke-linejoin:round;width:20px;height:20px}.app:has(>.stand-scaled>.app-main>.loader){flex-direction:column;min-height:100dvh;display:flex}.app:has(>.stand-scaled>.app-main>.loader)>.stand-scaled{flex-direction:column;flex:1 0 auto;display:flex}.app-main:has(>.loader){flex-direction:column;flex:1 0 auto;justify-content:center;width:100%;display:flex}.app-main>.loader{justify-content:center;min-height:240px}@media (width<=40rem){.app-nav{display:none}.app-header-inner{column-gap:12px}.app-header-tools{gap:8px}.keyboard-badge{padding-inline:10px}.account-button{padding:0}.account-button-label{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.app:has(>.tab-bar){flex-direction:column;min-height:100dvh;display:flex}.app:has(>.tab-bar)>.stand-scaled{flex:1 0 auto}.tab-bar{z-index:2;padding-bottom:env(safe-area-inset-bottom);border-top:1px solid var(--line);background:var(--surface);display:flex;position:sticky;bottom:0}.tab-bar a{min-height:56px;color:var(--muted);flex-direction:column;flex:1;justify-content:center;align-items:center;gap:2px;font-size:12px;font-weight:700;text-decoration:none;display:flex}.tab-bar a[aria-current]{color:var(--accent)}.tab-icon{fill:none;stroke:currentColor;stroke-width:2px;stroke-linecap:round;stroke-linejoin:round;width:22px;height:22px}}