:root{color-scheme:light dark;--neutral-0:#fff;--neutral-50:#f5f6f1;--neutral-100:#ecefe6;--neutral-200:#dde2d6;--neutral-300:#c9cfc2;--neutral-400:#8a948a;--neutral-500:#59625a;--neutral-600:#464e47;--neutral-700:#333a34;--neutral-800:#222823;--neutral-900:#171c18;--neutral-950:#101411;--accent-50:#dff0e5;--accent-100:#c4e4d0;--accent-300:#8bd0aa;--accent-500:#2c6a4d;--accent-700:#1f4f39;--accent-900:#1c3326;--color-bg:light-dark(var(--neutral-50),var(--neutral-950));--color-surface:light-dark(var(--neutral-0),var(--neutral-900));--color-raised:light-dark(var(--neutral-0),var(--neutral-800));--color-sunken:light-dark(var(--neutral-100),#0c0f0d);--color-text:light-dark(#1b211c,#e8ede7);--color-muted:light-dark(var(--neutral-500),#9ca69d);--color-line:light-dark(var(--neutral-200),#283029);--color-line-strong:light-dark(var(--neutral-400),#68736a);--color-accent:light-dark(var(--accent-500),var(--accent-300));--color-on-accent:light-dark(#fff,#0e2418);--color-accent-soft:light-dark(var(--accent-50),var(--accent-900));--color-link:var(--color-accent);--color-focus:var(--color-accent);--color-success:var(--color-accent);--color-success-bg:var(--color-accent-soft);--color-warning:light-dark(#806400,#f2c94c);--color-warning-bg:light-dark(#fff4bf,#3d330d);--color-danger:light-dark(#c0263d,#ff8fa3);--color-danger-bg:light-dark(#fde6ea,#44202a);--color-on-danger:light-dark(#fff,#2a0a12);--finger-pinky:light-dark(#e7e2f8,#2b2645);--finger-pinky-strong:light-dark(#6a55c2,#b3a6f5);--finger-pinky-on:light-dark(#fff,#1a1430);--finger-ring:light-dark(#d9e9f8,#1b3045);--finger-ring-strong:light-dark(#2f6fae,#8cc0f2);--finger-ring-on:light-dark(#fff,#0c1f33);--finger-middle:light-dark(#f7edc4,#3a3216);--finger-middle-strong:light-dark(#8a6a00,#e8cc6a);--finger-middle-on:light-dark(#fff,#2a2100);--finger-index:light-dark(#fbe0cf,#40271b);--finger-index-strong:light-dark(#b5531f,#f4a77c);--finger-index-on:light-dark(#fff,#33170a);--finger-thumb:light-dark(var(--neutral-100),#222823);--finger-thumb-strong:var(--color-line-strong);--finger-thumb-on:var(--color-text);--font-sans:"Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--font-num:var(--font-sans);--font-mono:ui-monospace, "SF Mono", Menlo, Consolas, monospace;--text-display:700 2.5rem/1.1 var(--font-sans);--tracking-display:-.02em;--text-h1:700 1.75rem/1.2 var(--font-sans);--tracking-h1:-.015em;--text-h2:600 1.375rem/1.25 var(--font-sans);--tracking-h2:-.01em;--text-h3:600 1.0625rem/1.3 var(--font-sans);--tracking-h3:0;--text-body:400 .9375rem/1.5 var(--font-sans);--tracking-body:0;--text-lead:400 1.125rem/1.55 var(--font-sans);--text-small:400 .8125rem/1.45 var(--font-sans);--tracking-small:0;--text-label:500 .8125rem/1.3 var(--font-sans);--tracking-label:0;--text-caption:400 .75rem/1.4 var(--font-sans);--tracking-caption:.01em;--text-num:600 .9375rem/1.4 var(--font-num);--tracking-num:0;--text-stat:700 1.625rem/1.2 var(--font-num);--text-practice:500 2rem/1.6 var(--font-sans);--tracking-practice:.02em;--text-key:600 1rem/1 var(--font-sans);--weight-strong:600;--space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-5:1.5rem;--space-6:2rem;--space-7:3rem;--space-8:4rem;--space-inline:var(--space-2);--space-stack:var(--space-5);--space-inset:var(--space-5);--space-inset-sm:var(--space-3);--space-section:var(--space-7);--space-gutter:var(--space-4);--radius-sm:8px;--radius-md:12px;--radius-lg:18px;--radius-key:10px;--radius-full:999px;--border-width:1px;--border:var(--border-width) solid var(--color-line);--border-strong:var(--border-width) solid var(--color-line-strong);--shadow-1:0 1px 2px light-dark(#1b211c0d,#0000);--shadow-2:0 2px 8px light-dark(#1b211c14,#00000073);--shadow-3:0 8px 24px light-dark(#1b211c1a,#00000080);--focus-outline:2px solid var(--color-focus);--focus-offset:2px;--duration-fast:.12s;--duration-base:.2s;--duration-slow:.32s;--ease:cubic-bezier(.2, 0, 0, 1);--width-content:65rem;--width-prose:42rem;--icon-sm:1rem;--icon-md:1.25rem;--icon-stroke:1.75;--control-h:2.5rem;--control-h-sm:2rem;--control-h-lg:3rem;--touch-min:2.75rem}:root[data-theme=dark]{color-scheme:dark}:root[data-theme=light]{color-scheme:light}@media (pointer:coarse),(width<=599px){:root{--control-h:var(--touch-min);--control-h-sm:var(--touch-min)}}@media (width<=599px){:root{--text-practice:500 1.375rem/1.6 var(--font-sans);--text-display:700 2rem/1.15 var(--font-sans);--space-section:var(--space-6)}}@media (prefers-reduced-motion:reduce){:root{--duration-fast:0s;--duration-base:0s;--duration-slow:0s}}@font-face{font-family:Figtree;font-style:normal;font-weight:300 900;font-display:swap;src:url(/fonts/figtree-latin-ext.woff2)format("woff2");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:Figtree;font-style:normal;font-weight:300 900;font-display:swap;src:url(/fonts/figtree-latin.woff2)format("woff2");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}*,:before,:after{box-sizing:border-box}body{background:var(--color-bg);color:var(--color-text);font:var(--text-body);letter-spacing:var(--tracking-body);-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility;margin:0}button,input,select,textarea{font:inherit;color:inherit;letter-spacing:inherit}button{cursor:pointer}h1,h2,h3,h4,p,ul,ol,dl,dd,figure{margin:0}ul,ol{padding:0;list-style:none}svg{flex:none}:focus-visible{outline:var(--focus-outline);outline-offset:var(--focus-offset)}img{max-width:100%;display:block}[hidden]{display:none!important}.display{font:var(--text-display);letter-spacing:var(--tracking-display);text-wrap:balance}.h1{font:var(--text-h1);letter-spacing:var(--tracking-h1);text-wrap:balance}.h2{font:var(--text-h2);letter-spacing:var(--tracking-h2);text-wrap:balance}.h3{font:var(--text-h3);letter-spacing:var(--tracking-h3)}.lead{font:var(--text-lead);color:var(--color-muted);text-wrap:pretty}.small{font:var(--text-small)}.label{font:var(--text-label)}.caption{font:var(--text-caption);letter-spacing:var(--tracking-caption);color:var(--color-muted)}.num{font-family:var(--font-num);font-variant-numeric:tabular-nums;white-space:nowrap}.muted{color:var(--color-muted)}.strong{font-weight:var(--weight-strong)}.icon{width:var(--icon-sm);height:var(--icon-sm);stroke:currentColor;fill:none;stroke-width:var(--icon-stroke);stroke-linecap:round;stroke-linejoin:round}.icon--md{width:var(--icon-md);height:var(--icon-md)}.prose{max-width:var(--width-prose);gap:var(--space-3);display:grid}.prose p{text-wrap:pretty}.btn{justify-content:center;align-items:center;gap:var(--space-2);min-height:var(--control-h);padding:0 var(--space-4);border-radius:var(--radius-full);border:var(--border-strong);background:var(--color-surface);color:var(--color-text);white-space:nowrap;transition:background var(--duration-fast) var(--ease), box-shadow var(--duration-fast) var(--ease);font-weight:600;text-decoration:none;display:inline-flex;position:relative}.btn:hover{background:var(--color-sunken)}.btn:active{background:var(--color-accent-soft)}.btn--primary{background:var(--color-accent);border-color:var(--color-accent);color:var(--color-on-accent)}.btn--primary:hover,.btn--primary:active{background:var(--color-accent);box-shadow:inset 0 0 0 100vmax #0000001f}.btn--ghost{background:0 0;border-color:#0000}.btn--danger{border-color:var(--color-danger);color:var(--color-danger)}.btn--danger:hover{background:var(--color-danger-bg)}.btn--icon{width:var(--control-h);padding:0}.btn--sm{min-height:var(--control-h-sm);padding:0 var(--space-3);font:var(--text-small);font-weight:600}.btn--lg{min-height:var(--control-h-lg);padding:0 var(--space-5)}.btn:disabled,.btn[aria-disabled=true]{opacity:.5;cursor:not-allowed;box-shadow:none}.link{color:var(--color-link);text-underline-offset:.15em;text-decoration:underline 1px}.link:hover{text-decoration-thickness:2px}.badge{border-radius:var(--radius-full);height:1.5rem;font:var(--text-caption);letter-spacing:var(--tracking-caption);white-space:nowrap;background:var(--color-sunken);color:var(--color-muted);align-items:center;gap:.375rem;padding:0 .625rem;font-weight:600;display:inline-flex}.badge--success{background:var(--color-success-bg);color:var(--color-text)}.badge--danger{background:var(--color-danger-bg);color:var(--color-danger)}.card{background:var(--color-surface);border:var(--border);border-radius:var(--radius-lg);padding:var(--space-inset);gap:var(--space-4);align-content:start;display:grid}kbd{border:var(--border-strong);border-radius:var(--radius-sm);background:var(--color-sunken);min-width:1.5rem;color:var(--color-text);font:var(--text-caption);text-align:center;border-bottom-width:2px;padding:0 .375rem;font-weight:600;line-height:1.4rem;display:inline-block}.progress{appearance:none;width:100%;height:var(--space-2);border-radius:var(--radius-full);background:var(--color-sunken);color:var(--color-accent);border:0;display:block;overflow:hidden}.progress::-webkit-progress-bar{background:var(--color-sunken);border-radius:var(--radius-full)}.progress::-webkit-progress-value{border-radius:var(--radius-full);transition:width var(--duration-base) var(--ease);background:currentColor}.progress::-moz-progress-bar{border-radius:var(--radius-full);background:currentColor}.visually-hidden{clip:rect(0 0 0 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}html{scrollbar-gutter:stable}body{flex-direction:column;min-height:100dvh;display:flex}.page{width:100%;max-width:calc(var(--width-content) + 2 * var(--space-gutter));padding:var(--space-6) var(--space-gutter) var(--space-section);gap:var(--space-section);flex:1;align-content:start;margin:0 auto;display:grid}@media (width>=600px){:root{--space-gutter:var(--space-6)}}.skip{left:var(--space-2);top:var(--space-2);z-index:10;position:absolute;transform:translateY(-200%)}.skip:focus{transform:none}.topbar{background:var(--color-surface);border-bottom:var(--border)}.topbar__inner{max-width:calc(var(--width-content) + 2 * var(--space-gutter));padding:var(--space-3) var(--space-gutter);align-items:center;gap:var(--space-2) var(--space-5);flex-wrap:wrap;margin:0 auto;display:flex}.brand{align-items:center;gap:var(--space-2);font:var(--text-h3);letter-spacing:-.01em;color:var(--color-text);font-size:1.25rem;font-weight:700;text-decoration:none;display:inline-flex}.brand__mark{width:2rem;height:2rem}.brand__shadow{fill:var(--color-text)}.brand__key{fill:var(--color-accent);stroke:var(--color-text);stroke-width:1.5px}.brand__face{fill:var(--color-on-accent)}.brand__smile{stroke:var(--color-on-accent);stroke-width:1.2px;stroke-linejoin:round}.brand__wink{fill:none;stroke:var(--color-on-accent);stroke-width:2px;stroke-linecap:round}.mainnav{gap:var(--space-1);order:3;width:100%;display:flex;overflow-x:auto}.mainnav a{min-height:var(--control-h);padding:0 var(--space-3);border-radius:var(--radius-full);color:var(--color-muted);white-space:nowrap;align-items:center;font-weight:600;text-decoration:none;display:inline-flex}.mainnav a:hover{color:var(--color-text);background:var(--color-sunken)}.mainnav a[aria-current=page]{color:var(--color-text);background:var(--color-accent-soft)}.topbar__end{align-items:center;gap:var(--space-2);margin-left:auto;display:flex}@media (width>=720px){.mainnav{order:0;width:auto}}.theme-icon--light{display:none}:root[data-theme=dark] .theme-icon--light{display:block}:root[data-theme=dark] .theme-icon--dark{display:none}@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .theme-icon--light{display:block}:root:not([data-theme=light]) .theme-icon--dark{display:none}}.footer{border-top:var(--border)}.footer__inner{max-width:calc(var(--width-content) + 2 * var(--space-gutter));padding:var(--space-5) var(--space-gutter);justify-content:space-between;gap:var(--space-3) var(--space-6);flex-wrap:wrap;margin:0 auto;display:flex}.footer__nav{gap:var(--space-4);display:flex}.badge--beta{background:var(--color-accent-soft);color:var(--color-text)}.legal{gap:var(--space-6);max-width:var(--width-prose);display:grid}.legal section{gap:var(--space-3);display:grid}.legal ul{padding-left:var(--space-5);gap:var(--space-2);list-style:outside;display:grid}.legal address{font-style:normal}.actions{gap:var(--space-2);flex-wrap:wrap;align-items:center;display:flex}.section{gap:var(--space-5);display:grid}.section__head{gap:var(--space-2);max-width:var(--width-prose);display:grid}.grid-3{gap:var(--space-4);grid-template-columns:repeat(auto-fill,minmax(min(100%,18rem),1fr));display:grid}.notice{background:var(--color-accent-soft);border-radius:var(--radius-lg);padding:var(--space-inset);gap:var(--space-4);display:grid}.hero{gap:var(--space-6);align-items:center;display:grid}.hero__text{gap:var(--space-4);max-width:36rem;display:grid}@media (width>=900px){.hero{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}}.step-num{border-radius:var(--radius-full);background:var(--color-accent-soft);width:2rem;height:2rem;color:var(--color-text);place-items:center;font-weight:700;display:inline-grid}.kb{--kb-gap:clamp(2px, .6cqi, 6px);--u:calc((100cqi - 14 * var(--kb-gap)) / 15);gap:var(--kb-gap);width:100%;display:grid;container-type:inline-size}.kb__row{gap:var(--kb-gap);display:flex}.kb__row:last-child{justify-content:center}.kb__key{width:calc(var(--w) * var(--u) + (var(--w) - 1) * var(--kb-gap));height:calc(var(--u) * .92);border-radius:clamp(4px, calc(var(--u) * .2), var(--radius-key));font:var(--text-key);font-size:clamp(.5625rem, calc(var(--u) * .32), 1rem);color:var(--color-text);background:var(--finger-thumb);transition:background var(--duration-fast) var(--ease), box-shadow var(--duration-fast) var(--ease), opacity var(--duration-fast) var(--ease);flex:none;place-items:center;display:grid;position:relative}.kb__key[data-finger=pinky]{background:var(--finger-pinky)}.kb__key[data-finger=ring]{background:var(--finger-ring)}.kb__key[data-finger=middle]{background:var(--finger-middle)}.kb__key[data-finger=index]{background:var(--finger-index)}.kb__key[data-finger=thumb]{color:var(--color-muted);box-shadow:inset 0 0 0 1px var(--color-line)}.kb__key.is-dim{opacity:.45}.kb__bump{background:currentColor;border-radius:2px;width:22%;height:2px;position:absolute;bottom:18%}.kb__key.is-next{opacity:1;box-shadow:inset 0 0 0 2px color-mix(in srgb, var(--next-on) 55%, transparent);background:var(--next-strong);color:var(--next-on)}.kb__key[data-finger=pinky]{--next-strong:var(--finger-pinky-strong);--next-on:var(--finger-pinky-on)}.kb__key[data-finger=ring]{--next-strong:var(--finger-ring-strong);--next-on:var(--finger-ring-on)}.kb__key[data-finger=middle]{--next-strong:var(--finger-middle-strong);--next-on:var(--finger-middle-on)}.kb__key[data-finger=index]{--next-strong:var(--finger-index-strong);--next-on:var(--finger-index-on)}.kb__key[data-finger=thumb]{--next-strong:var(--finger-thumb-strong);--next-on:var(--color-surface)}.kb__key.is-wrong{animation:wrong var(--duration-slow) var(--ease)}@keyframes wrong{0%,60%{background:var(--color-danger);color:var(--color-on-danger)}}.kb--heat .kb__key{background:var(--color-surface);box-shadow:inset 0 0 0 1px var(--color-line)}.kb--heat .kb__key[data-heat="1"]{background:var(--color-warning-bg)}.kb--heat .kb__key[data-heat="2"]{background:var(--color-danger-bg)}.kb--heat .kb__key[data-heat="3"]{background:var(--color-danger);color:var(--color-on-danger);box-shadow:none}.legend{justify-content:center;gap:var(--space-2) var(--space-5);font:var(--text-small);flex-wrap:wrap;display:flex}.legend li{align-items:center;gap:var(--space-2);display:inline-flex}.legend__swatch{border:2px solid var(--swatch-strong);background:var(--swatch);border-radius:5px;width:1rem;height:1rem}.legend__swatch[data-finger=pinky]{--swatch:var(--finger-pinky);--swatch-strong:var(--finger-pinky-strong)}.legend__swatch[data-finger=ring]{--swatch:var(--finger-ring);--swatch-strong:var(--finger-ring-strong)}.legend__swatch[data-finger=middle]{--swatch:var(--finger-middle);--swatch-strong:var(--finger-middle-strong)}.legend__swatch[data-finger=index]{--swatch:var(--finger-index);--swatch-strong:var(--finger-index-strong)}.legend__swatch[data-finger=thumb]{--swatch:var(--finger-thumb);--swatch-strong:var(--finger-thumb-strong)}.legend__swatch[data-heat="0"]{--swatch:var(--color-surface);--swatch-strong:var(--color-line-strong)}.legend__swatch[data-heat="1"]{--swatch:var(--color-warning-bg);--swatch-strong:var(--color-warning)}.legend__swatch[data-heat="2"]{--swatch:var(--color-danger-bg);--swatch-strong:var(--color-danger)}.legend__swatch[data-heat="3"]{--swatch:var(--color-danger);--swatch-strong:var(--color-danger)}.trainer{gap:var(--space-5);display:grid}.trainer__head{justify-content:space-between;align-items:flex-end;gap:var(--space-4);flex-wrap:wrap;display:flex}.trainer__title{gap:var(--space-1);justify-items:start;display:grid}.backlink{color:var(--color-muted);text-decoration:none}.backlink:hover{color:var(--color-text);text-underline-offset:.15em;text-decoration:underline}.trainer__progress{gap:var(--space-2);width:min(100%,15rem);display:grid}.hint{gap:var(--space-2);max-width:var(--width-prose);color:var(--color-muted);display:grid}.hint__keys{align-items:center;gap:var(--space-2);color:var(--color-text);font-weight:600;display:flex}.practice{background:var(--color-surface);border:var(--border);border-radius:var(--radius-lg);padding:var(--space-5);gap:var(--space-3);display:grid}@media (width>=600px){.practice{padding:var(--space-6) var(--space-6)}}.practice__text{font:var(--text-practice);letter-spacing:var(--tracking-practice);white-space:pre-wrap;overflow-wrap:anywhere;color:var(--color-muted)}.ch{border-radius:5px}.ch.is-done{color:var(--color-text)}.ch.is-err{color:var(--color-danger);text-underline-offset:.2em;text-decoration:underline 2px}.ch.is-current{color:var(--color-text);background:var(--color-accent-soft);box-shadow:inset 0 -3px 0 var(--color-accent)}.ch.is-wrong{color:var(--color-danger);background:var(--color-danger-bg);box-shadow:inset 0 -3px 0 var(--color-danger)}.stats{gap:var(--space-3);grid-template-columns:repeat(3,minmax(0,1fr));margin:0;display:grid}.stat{background:var(--color-surface);border:var(--border);border-radius:var(--radius-md);padding:var(--space-3) var(--space-4);gap:var(--space-1);align-content:start;display:grid}.stat dt{font:var(--text-small);color:var(--color-muted)}.stat dd{font:var(--text-stat);margin:0}@media (width<=599px){.stat dd{font-size:1.25rem}}.kbcard{justify-items:center;gap:var(--space-5)}.kbcard__hint{min-height:1.5em;color:var(--color-muted);text-align:center}.result{border-color:var(--color-accent)}.touch-note{display:none}@media (pointer:coarse){.touch-note{display:block}}.stage{gap:var(--space-4);display:grid}.stage__head{align-items:baseline;gap:var(--space-3);flex-wrap:wrap;display:flex}.lessons{gap:var(--space-2);display:grid}.lesson{gap:var(--space-1) var(--space-4);padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);background:var(--color-surface);border:var(--border);color:inherit;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;text-decoration:none;display:grid}a.lesson:hover{border-color:var(--color-line-strong)}.lesson__num{border-radius:var(--radius-full);background:var(--color-sunken);font-variant-numeric:tabular-nums;place-items:center;width:2rem;height:2rem;font-weight:700;display:grid}.lesson__body{gap:var(--space-1);min-width:0;display:grid}.lesson__keys{gap:var(--space-1);flex-wrap:wrap;display:flex}.lesson__state{justify-self:end}.lesson[data-state=passed] .lesson__num{background:var(--color-accent);color:var(--color-on-accent)}.lesson[data-state=open]{border-color:var(--color-accent);box-shadow:inset 0 0 0 1px var(--color-accent)}.lesson[data-state=locked] .lesson__body{color:var(--color-muted)}@media (width<=599px){.lesson{grid-template-columns:auto minmax(0,1fr)}.lesson__state{grid-column:2;justify-self:start}}.plan{gap:var(--space-3);display:grid}.plan li{gap:var(--space-3);grid-template-columns:4.5rem minmax(0,1fr);align-items:baseline;display:grid}.tutorial{gap:var(--space-section);display:grid}.tut-step{gap:var(--space-4);display:grid}.tut-step__head{align-items:center;gap:var(--space-3);display:flex}.checklist{gap:var(--space-2);display:grid}.checklist li{padding-left:calc(.5rem + var(--space-3));position:relative}.checklist li:before{content:"";border-radius:var(--radius-full);background:var(--color-accent);width:.5rem;height:.5rem;position:absolute;top:.6em;left:0}.tut-try{gap:var(--space-3);display:grid}.history{border-collapse:collapse;width:100%;font:var(--text-small)}.history th,.history td{text-align:left;padding:var(--space-2) var(--space-3);border-bottom:var(--border);white-space:nowrap}.history th{color:var(--color-muted);font-weight:600}.history td.num,.history th.num{text-align:right}.table-wrap{overflow-x:auto}.weak{gap:var(--space-2);flex-wrap:wrap;display:flex}