:root{--bg:#1c1f26;--panel:#242832;--sub:#6f7889;--text:#d8dee9;--main:#4fd1c5;--err:#ef6f6c;--on:#1c1f26;box-sizing:border-box}
:root[data-theme=paper]{--bg:#eef0f2;--panel:#e1e5e9;--sub:#8a94a0;--text:#2b3440;--main:#3a6ea5;--err:#c4443f;--on:#fff}
:root[data-theme=forest]{--bg:#17221d;--panel:#1f2e27;--sub:#6e8a7c;--text:#d6e6dc;--main:#9ad17f;--err:#e07a5f;--on:#17221d}
*,*::before,*::after{box-sizing:inherit}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.5 ui-monospace,"SF Mono",Menlo,Consolas,"Roboto Mono","DejaVu Sans Mono",monospace;transition:background .2s,color .2s}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--main);outline-offset:3px;border-radius:4px}
.page{max-width:62rem;min-height:100%;margin:0 auto;padding:1.5rem 1.5rem 1.2rem;display:flex;flex-direction:column;gap:2rem}
header{display:flex;align-items:baseline;gap:1rem}
.logo{font-size:1.6rem;font-weight:700;color:var(--main);letter-spacing:-.02em}
.tag{color:var(--sub);font-size:.85rem}
#config{display:flex;justify-content:center;align-items:center;gap:1rem;background:var(--panel);border-radius:10px;padding:.5rem 1rem;align-self:center;flex-wrap:wrap}
.group{display:flex;gap:.2rem}
#config button{background:none;border:0;padding:.25rem .7rem;border-radius:6px;color:var(--sub);font-size:.95rem}
#config button:hover{color:var(--text)}
#config button[aria-pressed=true]{color:var(--main)}
.sep{width:2px;height:1.2rem;background:var(--bg);border-radius:2px}
.hint2{color:var(--sub);font-size:.8rem}
main{flex:1;display:flex;flex-direction:column;justify-content:center;min-height:16rem}
#test{position:relative}
#live{color:var(--main);font-size:1.6rem;height:2.2rem;opacity:0;transition:opacity .15s}
#live.on{opacity:1}
#words{position:relative;height:calc(2.6rem * 3);overflow:hidden;font-size:1.6rem;line-height:2.6rem;outline:none;user-select:none;color:var(--sub)}
#words.blur #track{filter:blur(4px);opacity:.6}
#track{position:relative;margin-top:0;transition:margin-top .12s ease-out;display:flex;flex-wrap:wrap;align-content:flex-start}
.word{height:2.6rem;margin-right:.9rem;white-space:pre}
.word.bad{text-decoration:underline;text-decoration-color:var(--err);text-underline-offset:.3em;text-decoration-thickness:2px}
.l.ok{color:var(--text)}
.l.no{color:var(--err)}
.l.extra{color:var(--err);opacity:.7}
#caret{position:absolute;left:0;top:.35rem;width:2px;height:1.9rem;background:var(--main);border-radius:2px;transition:left .08s,top .08s;animation:blink 1s steps(1) infinite}
#caret.run{animation:none}
@keyframes blink{50%{opacity:0}}
#restart{display:block;margin:2rem auto 0;background:none;border:0;color:var(--sub);font-size:1.4rem;padding:.4rem .9rem;border-radius:8px}
#restart:hover{color:var(--text)}
#result{display:flex;flex-direction:column;align-items:center;gap:1.6rem}
#result[hidden]{display:none}
.big{display:flex;gap:3rem;flex-wrap:wrap;justify-content:center}
.big small{display:block;color:var(--sub);font-size:1.1rem}
.big b{font-size:4.2rem;line-height:1;color:var(--main);font-weight:700}
dl{display:flex;gap:2.2rem;margin:0;flex-wrap:wrap;justify-content:center}
dl div{text-align:center}
dt{color:var(--sub);font-size:.85rem}
dd{margin:0;font-size:1.5rem}
#next{background:var(--panel);border:0;border-radius:8px;padding:.6rem 1.4rem;color:var(--text)}
#next:hover{background:var(--main);color:var(--on)}
footer{display:flex;flex-direction:column;align-items:center;gap:.9rem;color:var(--sub);font-size:.8rem}
footer p{margin:0}
kbd{background:var(--panel);color:var(--text);padding:.05rem .4rem;border-radius:4px;font:inherit}
#themes{display:flex;gap:.6rem}
#themes button{width:1.1rem;height:1.1rem;border-radius:50%;border:2px solid var(--sub);padding:0}
#themes button[data-theme=night]{background:#1c1f26}
#themes button[data-theme=paper]{background:#eef0f2}
#themes button[data-theme=forest]{background:#17221d}
#themes button[aria-pressed=true]{border-color:var(--main)}
@media (max-width:600px){#words{font-size:1.25rem}.big b{font-size:3rem}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}#caret{animation:none}}