/* Existing Typix palette, Nunito and Lumi illustration; focused practice layout. */
#speed-keyboard{margin-top:18px}.finger-instruction{font-size:15px;line-height:1.5;text-align:center;min-height:44px;margin:0 0 12px;color:#52675d}.hint-board{max-width:880px;margin:auto;user-select:none}.hint-key-row{display:flex;justify-content:center;gap:6px;margin:6px 0}.hint-key{position:relative;display:flex;align-items:center;justify-content:center;flex:0 1 56px;min-width:0;height:43px;border:1px solid #ccdcd3;border-bottom-width:3px;border-radius:9px;background:#fff;color:#52675d;font-size:18px}.hint-key.home-key{background:#f8e5cd;color:#273a32}.home-key:after{content:'';position:absolute;bottom:5px;width:12px;height:3px;background:currentColor;border-radius:2px}.hint-key.hint-shift{flex-basis:110px;font-size:12px}.hint-key.hint-space{flex-basis:380px;font-size:14px}.hint-key.is-expected{background:#d8f1df;color:#174c37;border-color:#28735c;outline:2px solid #28735c;outline-offset:2px;font-weight:900}html[data-color-mode=dark] .hint-key{background:#203936;border-color:#466058;color:#cfdfd4}html[data-color-mode=dark] .hint-key.home-key{background:#614d34;color:#fff1da}html[data-color-mode=dark] .hint-key.is-expected{background:#36614b;border-color:#9cddb3;outline-color:#9cddb3;color:#fff}html[data-color-mode=dark] .finger-instruction{color:#b5cfc1}@media(max-width:650px){.hint-key-row{gap:3px;margin:5px 0}.hint-key{height:32px;font-size:13px;border-radius:5px}.hint-key.hint-shift{font-size:10px}.finger-instruction{font-size:13px}.home-key:after{width:8px;height:2px;bottom:3px}}
body{background:#f3f7f3}main{max-width:1120px;padding-top:22px}.speed-intro{margin:20px 0 24px;gap:20px;border-radius:28px;overflow:hidden;background:#e0eee4;grid-template-columns:1.25fr 1fr}.speed-intro>div{padding:24px 32px}.speed-intro h1{font-size:38px;line-height:1.12;margin:10px 0 14px}.speed-intro .lead{font-size:18px;line-height:1.5;margin:0;max-width:440px}.speed-intro .intro-note{font-size:14px;margin:14px 0 0;font-weight:800}.speed-intro img{height:260px;align-self:stretch;min-height:100%;border-radius:0;object-position:center}.eyebrow{margin:0;font-size:12px;letter-spacing:1.2px}.speed-panel{border:1px solid #cfdfd7;box-shadow:0 8px 24px #183d3410;padding:28px;margin:24px 0}.test-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}.test-heading h2{margin:5px 0 0;font-size:26px}.device-note{font-size:13px;color:#586e65;max-width:150px;text-align:right}.level-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.level-grid button{display:flex;flex-direction:column;align-items:flex-start;text-align:left;position:relative;border:2px solid #d9e4dd;background:#f7faf8;border-radius:18px;padding:16px;gap:5px;min-width:0;color:#243d37;box-shadow:0 3px 0 #d9e4dd}.level-grid button strong{font-size:20px;line-height:1.3}.level-grid button>span{font-size:13px}.level-grid .level-number{background:#e6eee9;color:#426658;padding:3px 9px;border-radius:8px;font-weight:900;margin-bottom:5px}.level-grid .level-sample{margin-top:6px;font-family:Nunito,sans-serif;font-size:15px;font-weight:700;color:#547467}.level-grid button[aria-pressed=true]{background:#e6f5e9;border-color:#28735c;box-shadow:0 3px 0 #28735c}.level-grid button[aria-pressed=true] .level-number{background:#28735c;color:white}.level-grid button:hover:not(:disabled){border-color:#28735c}.level-grid button:disabled{cursor:default}.level-description{font-size:14px;color:#52675d;margin:16px 0 22px}.typing-stage{background:#f5f8f5;padding:24px;border-radius:20px}.typing-instruction{font-size:15px;margin:8px 0}.speed-toolbar{margin:16px 0;gap:18px}.speed-toolbar strong{font-size:32px;color:#1e5949}.speed-toolbar>span{font-size:15px}.speed-toolbar button{background:#216b54;color:white;border-color:#216b54;box-shadow:0 3px 0 #154c3b}.speed-toolbar button:hover{background:#185840}#time-progress{display:block;width:100%;height:6px;border:0;border-radius:9px;overflow:hidden;accent-color:#28735c;margin-bottom:18px}#time-progress::-webkit-progress-bar{background:#dce7de}#time-progress::-webkit-progress-value{background:#28735c}#speed-input{background:white;border:2px solid #ccded1;min-height:155px;padding:20px}#speed-input:focus{border-color:#28735c}#speed-text{font-size:28px;line-height:1.8;letter-spacing:.3px}#speed-text .current{background:#216b54;padding:2px 0}#speed-text .past{color:#4e795e}#speed-input[data-state=stopped]{border-style:dashed}#speed-feedback{margin:14px 0 6px;font-size:15px}.quiet{margin:0;font-size:12px}.test-help{padding:18px 24px;background:#e8efe9;border-radius:18px;margin:24px 0}.test-help>summary{font-weight:800;cursor:pointer;min-height:30px}.test-help section{padding-top:12px}#result-level{color:#52675d}.score-grid div{background:#e6f5e9}.score-grid strong{color:#216b54}
html[data-color-mode=dark] body{background:#122329}html[data-color-mode=dark] .speed-intro{background:#203c39}html[data-color-mode=dark] .typing-stage,html[data-color-mode=dark] .test-help{background:#18302f}html[data-color-mode=dark] .level-grid button{background:#213734;border-color:#466058;color:#eff9f1;box-shadow:0 3px 0 #466058}html[data-color-mode=dark] .level-grid button[aria-pressed=true]{background:#2b5044;border-color:#9cddb3;box-shadow:0 3px 0 #9cddb3}html[data-color-mode=dark] .level-grid .level-sample,html[data-color-mode=dark] .level-description,html[data-color-mode=dark] #result-level,html[data-color-mode=dark] .device-note{color:#b5cfc1}html[data-color-mode=dark] .speed-toolbar strong{color:#9cddb3}html[data-color-mode=dark] #speed-text .past{color:#8dbba1}html[data-color-mode=dark] .speed-panel{background:#1b302f;border-color:#466058}html[data-color-mode=dark] #speed-input{background:#102322}
@media(max-width:650px){main{padding-top:16px}.speed-intro{grid-template-columns:1fr 125px;gap:0;border-radius:20px}.speed-intro>div{padding:20px}.speed-intro h1{font-size:28px}.speed-intro .lead{font-size:15px}.speed-intro img{height:100%;grid-row:auto;object-position:55%}.speed-intro .eyebrow{font-size:10px}.speed-intro .intro-note{font-size:12px}.speed-panel{padding:18px}.test-heading{align-items:start}.test-heading h2{font-size:24px}.device-note{font-size:11px;max-width:100px}.level-grid{grid-template-columns:1fr;gap:10px}.level-grid button{padding:12px 14px 12px 60px;gap:2px}.level-grid .level-number{position:absolute;left:12px;top:14px;margin:0}.level-grid button strong{font-size:18px}.level-grid .level-sample{margin-top:3px;font-size:14px}.typing-stage{padding:16px;margin:0 -6px}.speed-toolbar{gap:10px}#speed-text{font-size:24px}#speed-input{padding:14px}.test-help{padding:16px}.score-grid div{flex-wrap:wrap}}
@media(max-width:360px){.speed-intro{grid-template-columns:1fr}.speed-intro img{display:none}.speed-intro h1 br{display:none}.speed-panel{padding:14px}.typing-stage{padding:12px}.device-note{display:none}}

@media(max-width:650px){.speed-intro{grid-template-columns:1fr}.speed-intro img{grid-row:1;height:160px;min-height:0;object-position:50% 45%;display:block}.speed-intro h1 br{display:none}.speed-intro>div{padding:18px 20px}.speed-intro h1{font-size:28px}}

.finger-summary{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px 14px;padding:14px 18px;margin:0 0 12px;background:#dff0e4;border:1px solid #9fc9ad;border-radius:14px;color:#214b36}.finger-target{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 12px;background:white;border:1px solid #9fc9ad;border-bottom-width:4px;border-radius:9px;font-size:23px;font-weight:900}.finger-summary strong{font-size:18px}.finger-shift-note{flex-basis:100%;text-align:center;font-size:14px}html[data-color-mode=dark] .finger-summary{background:#294b3b;border-color:#658a73;color:#e6f5e9}html[data-color-mode=dark] .finger-target{background:#152e24;border-color:#9cddb3}@media(max-width:650px){.finger-summary{padding:12px;gap:10px}.finger-summary strong{font-size:16px;flex:1;min-width:120px}.finger-shift-note{font-size:12px}}

#speed-keyboard .finger-summary,#speed-keyboard .finger-instruction{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.speed-hand-picture{--soft:#e3eae4;--muted:#6d8679;--surface:#fff;--ink:#234632;max-width:470px;margin:0 auto 14px}.speed-hand-picture svg{display:block;width:100%;height:auto}.speed-hand-picture .hand-caption{font-size:14px;fill:var(--muted);text-anchor:middle;font-family:Nunito,sans-serif}.speed-hand-picture .hand-thumb{fill:var(--soft);stroke:var(--muted)}.speed-hand-picture .hand-active{fill:#8cdca4;stroke:#22643a;stroke-width:3px}.speed-hand-picture .hand-shift{fill:#f5d08c;stroke:#866020;stroke-width:3px}.speed-hand-picture text{font-family:Nunito,sans-serif}.speed-hand-picture g>text{font-weight:800}html[data-color-mode=dark] .speed-hand-picture{--soft:#29433a;--muted:#9db5a8;--surface:#20362d;--ink:#e7f5eb}html[data-color-mode=dark] .speed-hand-picture .hand-active{fill:#83d9a0;stroke:#daf7df}html[data-color-mode=dark] .speed-hand-picture .hand-shift{fill:#ebc676;stroke:#ffebc4}.speed-hand-picture .hand-active+text,.speed-hand-picture .hand-shift+text{fill:#173d29}