.typing-top{flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:10px 24px;display:flex}.typing-field{flex:280px;max-width:380px}.typing-best{color:var(--muted);font-variant-numeric:tabular-nums;font-size:15px}.typing-panel{flex-direction:column;gap:10px;display:flex}.typing-panel>.readouts{order:1}.typing-progress{background:var(--line-2);border-radius:2px;height:4px;overflow:hidden}.typing-progress>div{background:var(--accent);transform-origin:0;height:100%;transition:transform .2s linear;transform:scaleX(0)}[dir=rtl] .typing-progress>div{transform-origin:100%}.typing-box{cursor:text;outline:none;order:-1;padding:6px 6px 8px;position:relative}.typing-text{--lh:32px;height:calc(var(--lh) * 3);font-size:20px;line-height:var(--lh);color:var(--faint);transition:opacity .15s;overflow:hidden}.typing-flow{transition:transform .15s;position:relative}.typing-word{white-space:nowrap}.typing-long{white-space:normal}.typing-ok{color:var(--ink)}.typing-bad{color:var(--accent-text)}.typing-bad,.typing-miss{text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:4px;text-decoration-thickness:2px}.typing-pend{color:var(--ink);text-decoration:underline dotted;text-decoration-color:var(--faint);text-underline-offset:4px}.typing-cur{position:relative}.typing-cur:before{content:"";inset-inline-start:-1px;background:var(--accent);border-radius:1px;width:2px;height:1.15em;margin-top:-.6em;position:absolute;top:50%}.typing-box:not(.is-focused) .typing-cur:before{opacity:0}.typing-box:not(.is-focused):not(.is-done) .typing-text{opacity:.35}.typing-hint{text-align:center;pointer-events:none;justify-content:center;align-items:center;padding:12px;font-size:17px;font-weight:600;display:flex;position:absolute;inset:0}.typing-touch{display:none}@media (pointer:coarse){.typing-touch{display:inline}.typing-mouse{display:none}}.typing-input{z-index:1;resize:none;opacity:0;color:#0000;caret-color:#0000;cursor:text;background:0 0;border:0;outline:none;width:100%;height:100%;margin:0;padding:0;font-size:16px;position:absolute;inset:0;overflow:hidden}.typing-box.is-done{cursor:default}.typing-box.is-done .typing-input{pointer-events:none}.typing-result{align-content:center;gap:10px;min-height:96px;display:grid}.typing-score{align-items:baseline;gap:10px;display:flex}.typing-score-value{font-variant-numeric:tabular-nums;letter-spacing:-.04em;font-size:64px;font-weight:200;font-stretch:125%;line-height:.9}.typing-score-unit{font-size:18px;font-weight:700}.typing-spark{direction:ltr;height:72px;position:relative}.typing-spark svg{width:100%;height:100%;overflow:visible}.typing-spark polyline{fill:none;stroke:var(--ink);stroke-width:2.5px;stroke-linejoin:round;stroke-linecap:round}.typing-dot{background:var(--accent);border-radius:50%;width:10px;height:10px;margin:-5px 0 0 -5px;position:absolute;left:100%}@media (width>=1024px){.typing-panel{gap:14px}.typing-panel>.readouts{order:0}.typing-box{order:0;padding:18px 18px 22px}.typing-text{--lh:46px;max-width:1000px;font-size:28px}.typing-bad,.typing-miss,.typing-pend{text-underline-offset:6px}.typing-result{grid-template-columns:auto minmax(0,1fr);align-items:end;gap:32px;min-height:138px}.typing-score-value{font-size:96px}.typing-score-unit{font-size:22px}.typing-spark{height:110px}.typing>.keys{justify-self:end;width:420px}}@media (prefers-reduced-motion:no-preference){.typing-box.is-focused .typing-cur:before{animation:1.06s linear infinite typing-blink}}@keyframes typing-blink{0%,48%{opacity:1}52%,to{opacity:0}}