.typing-tool{min-width:0;overflow:visible}.typing-controls{align-items:end;gap:var(--wf-space-4);padding:var(--wf-space-5);border-block-end:1px solid var(--wf-border-subtle);flex-wrap:wrap;display:flex}.control-group{gap:var(--wf-space-2);display:grid}.typing-toggles{gap:var(--wf-space-4);flex-wrap:wrap;display:flex}.live-metrics{border-block-end:1px solid var(--wf-border-subtle);grid-template-columns:repeat(3,minmax(0,1fr));display:grid}.live-metrics>div{justify-items:center;gap:var(--wf-space-1);min-width:0;padding:var(--wf-space-4);display:grid}.live-metrics>div+div{border-inline-start:1px solid var(--wf-border-subtle)}.live-metrics span,.result-metric span{color:var(--wf-text-muted);letter-spacing:.035em;font-size:.78rem;font-weight:700}.result-metric span{color:var(--wf-text-secondary)}.live-metrics strong{font-variant-numeric:tabular-nums;font-size:clamp(1.15rem,1rem + .6vw,1.55rem)}.typing-stage{padding:clamp(var(--wf-space-5), 4vw, var(--wf-space-10));position:relative}.typing-instructions{color:var(--wf-text-muted);margin-block-end:var(--wf-space-5);font-size:.9rem}.typing-surface{--wf-typing-font-size:clamp(1.5rem, 1.24rem + 1.1vw, 2.2rem);height:clamp(12rem, calc(4.95em + var(--wf-space-10) + 3px), 13.75rem);padding-block:var(--wf-space-5);padding-inline:clamp(var(--wf-space-4), 3vw, var(--wf-space-6));border:1px solid var(--wf-border-control);border-radius:var(--wf-radius-card);background:var(--wf-surface-sunken);cursor:text;font-size:var(--wf-typing-font-size);isolation:isolate;display:block;position:relative;overflow:hidden}.typing-surface:focus-within{outline:3px solid var(--wf-focus-ring);outline-offset:3px}.typing-viewport__clip{height:100%;display:block;overflow:hidden}.typing-passage{z-index:1;min-width:0;font-family:var(--wf-font-typing);overflow-wrap:anywhere;white-space:pre-wrap;font-size:1em;font-weight:450;line-height:1.65;display:block;position:relative}.typing-char{color:var(--wf-typing-untyped);position:relative}.typing-char--correct{color:var(--wf-typing-correct)}.typing-char--current{color:var(--wf-typing-current);text-decoration:underline var(--wf-caret) .11em;text-underline-offset:.18em}.typing-char--current:before{border-radius:var(--wf-radius-pill);background:var(--wf-caret);content:"";width:2px;animation:1.05s step-end infinite caret-blink;position:absolute;inset-block:.18em;inset-inline-start:-1px}.typing-char--incorrect,.typing-char--extra{background:var(--wf-danger-surface);color:var(--wf-typing-error);text-underline-offset:.16em;border-radius:.14em;text-decoration:underline .1em wavy}.typing-char--extra{outline:1px dashed var(--wf-danger)}.typing-viewport--code{--wf-typing-font-size:clamp(1rem, .92rem + .34vw, 1.2rem);--wf-typing-untyped:var(--wf-text-secondary);height:clamp(14rem,31vh,19rem)}.typing-viewport--code .typing-passage{font-variant-ligatures:none;overflow-wrap:anywhere;tab-size:2;white-space:pre-wrap;line-height:1.55}.typing-code-whitespace{position:relative}.typing-code-whitespace[data-show-whitespace=true]:after{color:var(--wf-text-muted);font-size:.7em;line-height:inherit;pointer-events:none;position:absolute;inset-inline-start:50%;transform:translate(-50%)}.typing-code-whitespace--space[data-show-whitespace=true]:after{content:"·"}.typing-code-whitespace--newline[data-show-whitespace=true]:after{content:"↵";inset-inline-start:.15em;transform:none}@keyframes caret-blink{50%{opacity:0}}.typing-capture{z-index:2;resize:none;color:#0000;caret-color:#0000;cursor:text;opacity:0;-webkit-text-fill-color:transparent;background:0 0;border:0;width:100%;height:100%;min-height:0;margin:0;padding:0;font-size:16px;position:absolute;inset:0;overflow:hidden}.typing-capture:focus-visible{outline:0}.passage-attribution{color:var(--wf-text-muted);margin-block-start:var(--wf-space-3);font-size:.85rem}.typing-stage__footer{align-items:center;gap:var(--wf-space-2);color:var(--wf-text-muted);flex-wrap:wrap;margin-block-start:var(--wf-space-4);font-size:.85rem;display:flex}.status-dot{border:2px solid var(--wf-border-strong);border-radius:var(--wf-radius-pill);width:.65rem;height:.65rem}.status-dot--running{border-color:var(--wf-brand);background:var(--wf-brand)}.shortcut-hint{margin-inline-start:auto}kbd{border:1px solid var(--wf-border-control);border-radius:var(--wf-radius-xs);background:var(--wf-surface);color:var(--wf-text-secondary);box-shadow:0 1px 0 var(--wf-border-subtle);font-family:var(--wf-font-typing);padding:.1rem .38rem;font-size:.8em}.results-view{gap:var(--wf-space-8);padding:clamp(var(--wf-space-5), 4vw, var(--wf-space-10));display:grid}.result-heading{justify-content:space-between;align-items:center;gap:var(--wf-space-4);flex-wrap:wrap;display:flex}.personal-best-badge{align-items:center;gap:var(--wf-space-2);padding:var(--wf-space-2) var(--wf-space-3);border:1px solid var(--wf-brand);border-radius:var(--wf-radius-pill);background:var(--wf-surface-brand);color:var(--wf-text-primary);font-weight:750;display:inline-flex}.result-metrics{gap:var(--wf-space-3);grid-template-columns:repeat(auto-fit,minmax(7.5rem,1fr));display:grid}.result-metric{gap:var(--wf-space-1);padding:var(--wf-space-4);border:1px solid var(--wf-border-subtle);border-radius:var(--wf-radius-control);background:var(--wf-surface-sunken);display:grid}.result-metric strong{font-variant-numeric:tabular-nums;font-size:clamp(1.35rem,1.1rem + .8vw,1.9rem)}.result-metric--primary{border-color:var(--wf-brand);background:var(--wf-surface-brand)}.result-metric--primary strong{color:var(--wf-brand)}.metric-help summary{cursor:pointer;min-height:44px;color:var(--wf-text-primary);font-weight:700}.metric-help p{max-width:70ch;color:var(--wf-text-secondary)}.typing-tool--compact .typing-controls .control-group:nth-of-type(2),.typing-tool--compact .typing-toggles{display:none}@media (width<=42rem){.typing-controls{align-items:stretch}.typing-controls>*{flex:100%}.typing-toggles{justify-content:space-between}.typing-stage{padding:var(--wf-space-4)}.typing-surface{--wf-typing-font-size:clamp(1.5rem, 6.5vw, 1.85rem);height:calc(6.6em + var(--wf-space-8) + 3px);padding:var(--wf-space-4)}.typing-viewport--code{--wf-typing-font-size:1rem;height:clamp(13.75rem,34vh,17rem)}.shortcut-hint{width:100%;margin-inline-start:0}}@media (prefers-reduced-motion:reduce){.typing-char--current:before{animation:none}}@media (forced-colors:active){.typing-surface{border-color:canvastext}.typing-surface:focus-within{outline-color:highlight}.typing-code-whitespace[data-show-whitespace=true]:after{color:canvastext}}