@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;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}}*{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}.trainer{padding:1.25rem 1rem 1rem;border:1px solid var(--rule);border-radius:.75rem;background:var(--paper-2)}.label{display:block;font-family:var(--display);font-size:.8rem;color:var(--ink-soft)}.target{display:grid;justify-items:center;text-align:center}.target strong{font-family:var(--display);font-size:clamp(3.5rem,16vw,5rem);font-weight:800;font-stretch:82%;line-height:1}.prompt{min-height:1.6em;margin:.6rem 0 1rem;font-family:var(--display);font-size:1.2rem;font-weight:600;text-align:center}.prompt.good{color:var(--good)}.prompt.bad{color:var(--accent)}.readout{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;text-align:center}.readout b{font-family:var(--display);font-size:1.4rem;font-variant-numeric:tabular-nums;white-space:nowrap}.readout b.good{color:var(--good)}.readout b.bad{color:var(--accent)}.hold{height:.5rem;margin:.6rem 0 .75rem;border-radius:999px;background:var(--paper);border:1px solid var(--rule);overflow:hidden}.hold i{display:block;height:100%;width:calc(var(--p, 0) * 1%);background:var(--good)}.hold.done{box-shadow:0 0 0 3px color-mix(in srgb,var(--good) 35%,transparent)}canvas{display:block;width:100%;height:clamp(12rem,40vh,18rem);border-radius:.5rem;background:var(--paper)}.sound{margin-top:.75rem}.sound-head{display:flex;justify-content:space-between;align-items:baseline;gap:.5rem;margin-bottom:.25rem}.sound-head .label{display:inline}#wave{height:4rem}.level{position:relative;height:.4rem;margin-top:.35rem;border-radius:999px;background:var(--paper);border:1px solid var(--rule)}.level i{display:block;height:100%;width:calc(var(--p, 0) * 100%);border-radius:inherit;background:var(--ink-soft)}.level.loud i{background:var(--good)}.level:after{content:"";position:absolute;top:-3px;bottom:-3px;left:calc(var(--t, 0) * 100%);width:2px;background:var(--ink)}.actions{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem;margin-top:1rem}.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}.score{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem;margin:2rem 0}.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}.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)}.readout b{font-size:1.1rem}}