@font-face{font-family:Bricolage Grotesque Variable;font-style:normal;font-display:swap;font-weight:200 800;font-stretch:75% 100%;src:url(./bricolage-grotesque-vietnamese-standard-normal-Br4FGdAc.woff2) format("woff2-variations");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Bricolage Grotesque Variable;font-style:normal;font-display:swap;font-weight:200 800;font-stretch:75% 100%;src:url(./bricolage-grotesque-latin-ext-standard-normal-qp-RdZgh.woff2) format("woff2-variations");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,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:Bricolage Grotesque Variable;font-style:normal;font-display:swap;font-weight:200 800;font-stretch:75% 100%;src:url(./bricolage-grotesque-latin-standard-normal-C5Lc8Qmc.woff2) format("woff2-variations");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}:root{--paper: #e9eef0;--paper-2: #dde5e9;--ink: #14304a;--ink-soft: #4a6276;--rule: #b9c7cf;--accent: #b3263e;--display: "Bricolage Grotesque Variable", system-ui, sans-serif;--good: #2f7d4f;--key-white: #fbfcfc;--key-black: #14304a;--key-edge: #b9c7cf;--key-white-out: #eef2f4;--key-black-out: #7d909f;color-scheme:light dark}@media(prefers-color-scheme:dark){:root{--paper: #0f2233;--paper-2: #16304a;--ink: #dce6ea;--ink-soft: #94aab8;--rule: #2b465d;--accent: #f0798d;--good: #5cc48a;--key-white: #dce6ea;--key-black: #050f18;--key-edge: #2b465d;--key-white-out: #8fa1ad;--key-black-out: #3a5266}}*{box-sizing:border-box}body{margin:0;min-height:100dvh;background:var(--paper);color:var(--ink);font-family:system-ui,sans-serif;line-height:1.5}main{width:min(100%,44rem);margin:0 auto;padding:1.5rem 1rem 3rem}.back{color:var(--ink-soft);font-family:var(--display);font-size:.875rem;text-decoration-color:var(--accent);text-underline-offset:.18em}h1{margin:.5rem 0 .75rem;font-family:var(--display);font-size:clamp(2.25rem,7vw,3rem);font-weight:800;font-stretch:82%;letter-spacing:-.04em;line-height:1}h2{margin:0;font-family:var(--display);font-size:1.25rem;font-weight:600}.lede{color:var(--ink-soft);margin:0 0 1.5rem;max-width:38rem}.muted{color:var(--ink-soft)}.small{font-size:.875rem}a{color:inherit;text-decoration-color:var(--accent);text-underline-offset:.18em}button,select{font:inherit;color:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}section{margin:0 0 2rem}.level-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:.25rem .75rem}.meter{display:grid;grid-template-columns:repeat(20,1fr);gap:3px;margin:.6rem 0 .4rem}.meter i{height:.7rem;border-radius:2px;background:var(--paper-2);border:1px solid var(--rule)}.meter i.hit{background:var(--good);border-color:var(--good)}.meter i.miss{background:var(--accent);border-color:var(--accent)}.level p{margin:0}.trainer{padding:1.25rem 1rem 1rem;border:1px solid var(--rule);border-radius:.75rem;background:var(--paper-2)}.prompt{min-height:3em;margin:0 0 .75rem;font-family:var(--display);font-size:1.25rem;font-weight:600;text-align:center}.prompt.good{color:var(--good)}.prompt.bad{color:var(--accent)}.actions{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem;margin-bottom:1.25rem}.actions [hidden]{display:none}.primary{min-width:8rem;padding:.6rem 1.4rem;border:0;border-radius:999px;background:var(--ink);color:var(--paper);font-family:var(--display);font-weight:600}.quiet{padding:.6rem 1.1rem;border:1px solid var(--rule);border-radius:999px;background:transparent;font-family:var(--display);font-weight:600}.keys{display:grid;grid-template-columns:repeat(14,1fr);grid-template-rows:3.6rem 3.6rem;width:min(100%,30rem);margin:0 auto}.key{display:flex;align-items:flex-end;justify-content:center;padding:0 0 .45rem;border:1px solid var(--key-edge);font-family:var(--display);font-weight:700;font-size:1rem;touch-action:manipulation;transition:background .12s,opacity .12s}.key.white{grid-row:1 / span 2;margin:0 1px;border-radius:0 0 .5rem .5rem;background:var(--key-white);color:#14304a}.key.black{grid-row:1;z-index:1;margin:0 .35rem;border-radius:0 0 .4rem .4rem;background:var(--key-black);color:#e9eef0;font-size:.85rem}.key:hover:not(:disabled){filter:brightness(.94)}.key.white.out{background:var(--key-white-out);color:#9aabb7}.key.black.out{background:var(--key-black-out);color:#c6d2da}.key.right{background:var(--good);color:#fff;border-color:var(--good)}.key.wrong{background:var(--accent);color:#fff;border-color:var(--accent)}.key.new{box-shadow:0 0 0 3px var(--good) inset}.score{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem;margin:0 0 2rem}.score div{padding:.5rem 0;border-top:1px solid var(--rule)}.score dt{font-family:var(--display);font-size:.8rem;color:var(--ink-soft)}.score dd{margin:0;font-family:var(--display);font-size:1.6rem;font-weight:700;font-variant-numeric:tabular-nums}.notes{display:grid;grid-template-columns:repeat(12,1fr);gap:3px;margin:.6rem 0 0;padding:0;list-style:none}.notes li{display:grid;justify-items:center;padding:.35rem 0 .3rem;border-radius:.3rem;background:color-mix(in srgb,var(--good) calc(var(--p) * 1%),var(--paper-2));font-family:var(--display);font-variant-numeric:tabular-nums}.notes li.empty{background:var(--paper-2);color:var(--ink-soft)}.notes b{font-size:.95rem}.notes span{font-size:.7rem}.settings{display:flex;flex-wrap:wrap;align-items:end;gap:.9rem 1rem}.settings h2{flex-basis:100%}.field{display:grid;gap:.25rem;flex:1 1 12rem;min-width:0}.field span{font-family:var(--display);font-size:.875rem;color:var(--ink-soft)}select{width:100%;padding:.55rem .7rem;border:1px solid var(--rule);border-radius:.5rem;background:var(--paper)}.check{display:flex;align-items:center;gap:.5rem;flex-basis:100%}.help{color:var(--ink-soft);font-size:.875rem}kbd{padding:0 .3em;border:1px solid var(--rule);border-radius:.25rem;font-family:inherit;font-size:.85em}@media(max-width:30rem){.score{grid-template-columns:repeat(2,1fr)}.notes{grid-template-columns:repeat(6,1fr)}.key{font-size:.85rem}.key.black{margin:0 .15rem;font-size:.7rem}}