/* Typing Speed Test — word stream + hidden input. Container-relative only (rule 35). */
.tst-box { position: relative; width: 100%; min-height: 168px; max-height: 220px; padding: 1.15rem 1.25rem; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); cursor: text; overflow: hidden; display: flex; align-items: flex-start; }
.tst-box:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(244, 81, 30, 0.12); }
.tst-words { display: flex; flex-wrap: wrap; gap: 0.4rem 0.55rem; font-family: var(--font-mono); font-size: clamp(1.05rem, 2.5cqw, 1.3rem); line-height: 1.75; color: var(--text-muted); user-select: none; width: 100%; }
.tst-word { display: inline-flex; padding: 0 2px; border-radius: 4px; border-bottom: 2px solid transparent; }
.tst-word.is-current { background: color-mix(in srgb, var(--brand) 11%, transparent); border-bottom-color: var(--brand); }
.tst-word.is-bad { border-bottom-color: #dc2626; }
.tst-ch.is-ok { color: var(--text-primary); }
.tst-ch.is-err { color: #dc2626; background: rgba(220, 38, 38, 0.14); border-radius: 2px; }
[data-theme="dark"] .tst-ch.is-err { color: #f87171; }
.tst-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; border: none; background: transparent; font-size: 16px; cursor: text; }