*{box-sizing:border-box;margin:0;padding:0}body{background:var(--typo-bg, #16181d);color:var(--typo-fg, #d6d9de);font-family:var(--typo-font-mono, ui-monospace, monospace);min-height:100vh}#app{max-width:900px;margin:0 auto;padding:1rem 1.5rem 4rem;position:relative}.overlay{position:fixed;inset:0;pointer-events:none;z-index:50}.topnav{display:flex;gap:1.2rem;align-items:baseline;padding:.8rem 0 2rem}.topnav a{color:var(--typo-dim);text-decoration:none;font-size:.9rem}.topnav a:hover{color:var(--typo-fg)}.topnav .brand{color:var(--typo-accent);font-weight:700;font-size:1.3rem}.topnav .spacer{flex:1}.tagline{color:var(--typo-dim);margin-bottom:2rem}.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:.8rem;margin-bottom:.8rem}.tile{background:var(--typo-card);border:1px solid var(--typo-border);border-radius:8px;padding:1rem;text-align:left;cursor:pointer;color:var(--typo-fg);font-family:inherit}.tile:hover{border-color:var(--typo-accent)}.tile h3{color:var(--typo-accent);margin-bottom:.4rem;font-size:1rem}.tile p{color:var(--typo-dim);font-size:.8rem;line-height:1.4}.practice-head{display:flex;gap:1rem;align-items:baseline;margin-bottom:.6rem}.practice-head h2{font-size:1rem;color:var(--typo-accent)}.subtitle{color:var(--typo-dim);font-size:.8rem}.live-stats{min-height:1.4rem;color:var(--typo-dim);font-size:.95rem}.coach{min-height:1.3rem;color:var(--typo-error);font-size:.85rem}.shiftwarn{min-height:1.3rem;color:var(--typo-accent);font-size:.85rem}.textwrap{position:relative;margin:.6rem 0 1.2rem;cursor:text}.textline{position:relative;font-size:1.5rem;line-height:2.4rem;max-height:9.6rem;overflow:hidden;user-select:none;white-space:pre-wrap}.textline .word{display:inline-block;white-space:pre}.textline .break{display:block}.char{border-radius:2px}.char.pending{color:var(--typo-dim)}.char.correct{color:var(--typo-fg)}.char.error{color:var(--typo-error);background:var(--typo-error-bg)}.char.autoskip{opacity:.35}.char.newline{color:var(--typo-dim);opacity:.7}.char.caret{box-shadow:inset 2px 0 0 var(--typo-caret);animation:caret-blink 1.1s steps(1) infinite}@keyframes caret-blink{50%{box-shadow:inset 2px 0 0 transparent}}.hidden-input{position:absolute;opacity:0;left:0;top:0;width:1px;height:1px;border:0}.hint{color:var(--typo-dim);font-size:.75rem;margin-top:1rem}.results-card{background:var(--typo-card);border:1px solid var(--typo-border);border-radius:10px;padding:1.4rem;margin-top:1.2rem}.pb-banner{color:var(--typo-accent);font-weight:700;margin-bottom:.8rem}.stats-row{display:flex;gap:2rem;flex-wrap:wrap;margin-bottom:.9rem}.stat-value{font-size:1.6rem;font-weight:700}.stat.big .stat-value{font-size:2.4rem;color:var(--typo-accent)}.stat.warn .stat-value{color:var(--typo-error)}.stat.ok .stat-value{color:var(--typo-ok)}.stats-row.small .stat-value{font-size:1.1rem;font-weight:400}.stat-label{color:var(--typo-dim);font-size:.75rem}.advice{color:var(--typo-dim);font-size:.85rem;margin-bottom:1rem}button.restart{background:var(--typo-accent);color:var(--typo-bg);border:0;border-radius:6px;padding:.5rem 1.2rem;font-family:inherit;font-size:.9rem;cursor:pointer}.keyboard{display:flex;flex-direction:column;gap:4px;margin:.5rem 0;user-select:none}.kbrow{display:flex;gap:4px;justify-content:center}.key{position:relative;min-width:2.5rem;height:2.5rem;border:1px solid var(--typo-border);border-radius:5px;display:flex;align-items:center;justify-content:center;font-size:.85rem;background:linear-gradient(rgba(224,80,90,calc(var(--heat, 0) * .55)),rgba(224,80,90,calc(var(--heat, 0) * .55))),var(--finger-tint, transparent);color:var(--typo-fg)}.key.mod{min-width:3.6rem;color:var(--typo-dim);font-size:.7rem}.key.spacekey{min-width:14rem}.key.home:after{content:"";position:absolute;bottom:4px;width:.7rem;height:2px;background:var(--typo-dim);border-radius:1px}.key .cap-shift{position:absolute;top:1px;right:4px;font-size:.55rem;color:var(--typo-dim)}.key .cap-altgr{position:absolute;bottom:1px;right:4px;font-size:.55rem;color:var(--typo-accent);opacity:.8}.key.next{outline:2px solid var(--typo-accent);outline-offset:-1px}.key.next-mod{outline:2px dashed var(--typo-accent);outline-offset:-1px}.key[data-finger=lp],.legend-item[data-finger=lp]{--finger-tint: rgba(231, 111, 81, .16)}.key[data-finger=lr],.legend-item[data-finger=lr]{--finger-tint: rgba(244, 162, 97, .16)}.key[data-finger=lm],.legend-item[data-finger=lm]{--finger-tint: rgba(233, 196, 106, .16)}.key[data-finger=li],.legend-item[data-finger=li]{--finger-tint: rgba(138, 177, 125, .18)}.key[data-finger=ri],.legend-item[data-finger=ri]{--finger-tint: rgba(42, 157, 143, .16)}.key[data-finger=rm],.legend-item[data-finger=rm]{--finger-tint: rgba(69, 123, 157, .18)}.key[data-finger=rr],.legend-item[data-finger=rr]{--finger-tint: rgba(131, 111, 174, .18)}.key[data-finger=rp],.legend-item[data-finger=rp]{--finger-tint: rgba(181, 101, 118, .18)}.key[data-finger=lt],.key[data-finger=rt],.legend-item[data-finger=lt],.legend-item[data-finger=rt]{--finger-tint: rgba(120, 120, 130, .16)}.finger-legend{display:flex;flex-wrap:wrap;gap:.5rem;margin:.8rem 0 1.5rem}.legend-item{background:var(--finger-tint);border:1px solid var(--typo-border);border-radius:4px;padding:.2rem .6rem;font-size:.75rem}.rules{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1rem}.rule{background:var(--typo-card);border:1px solid var(--typo-border);border-radius:8px;padding:1rem}.rule h3{color:var(--typo-accent);font-size:.9rem;margin-bottom:.4rem}.rule p{color:var(--typo-dim);font-size:.8rem;line-height:1.5}.stats-view h3,.fingers-view h2,.stats-view h2,.settings-view h2{margin:1.2rem 0 .6rem}.spark{width:100%;max-width:560px;height:80px;display:block;margin-bottom:.5rem}.spark-empty{color:var(--typo-dim);font-size:.85rem}.bigram{display:inline-block;background:var(--typo-card);border:1px solid var(--typo-border);border-radius:4px;padding:.2rem .6rem;margin:.2rem}.bigram small{color:var(--typo-error)}.setting{display:flex;align-items:center;gap:1rem;padding:.5rem 0}.setting span{min-width:20rem;color:var(--typo-dim);font-size:.9rem}.setting select{background:var(--typo-card);color:var(--typo-fg);border:1px solid var(--typo-border);border-radius:4px;padding:.3rem .6rem;font-family:inherit}.privacy-note{margin-top:2rem;color:var(--typo-dim);font-size:.8rem;max-width:40rem;line-height:1.5}@media(max-width:700px){.keyboard{display:none}.textline{font-size:1.2rem}}