.ts{--ts-line-height:2.125rem;--ts-viewport-lines:4;border:1px solid var(--border);background-color:var(--surface);background-image:linear-gradient(160deg, color-mix(in srgb, var(--accent) 7%, transparent) 0%, transparent 45%, color-mix(in srgb, var(--accent-2) 6%, transparent) 100%);border-radius:1.25rem;padding:clamp(.875rem,2.5vw,1.5rem);display:block;box-shadow:0 24px 60px -32px #4c1d9580}.ts-exit{display:none}.ts-controls{flex-wrap:wrap;align-items:flex-end;gap:1rem 1.5rem;display:flex}.ts-actions{flex-wrap:wrap;gap:.5rem;margin-left:auto;display:flex}.ts-fieldset{border:0;flex-direction:column;gap:.375rem;min-width:0;margin:0;padding:0;display:flex}.ts-legend{letter-spacing:.06em;text-transform:uppercase;color:var(--ink-subtle);padding:0;font-size:.6875rem;font-weight:600}.ts-pill-group{flex-wrap:wrap;gap:.375rem;display:flex}.ts-pill{border:1px solid var(--border);background-color:var(--canvas);color:var(--ink-muted);cursor:pointer;user-select:none;border-radius:.5rem;justify-content:center;align-items:center;padding:.3125rem .6875rem;font-size:.8125rem;font-weight:500;line-height:1.25rem;transition:background-color .15s,border-color .15s,color .15s;display:inline-flex;position:relative}.ts-pill:hover{background-color:var(--surface-2);color:var(--ink)}.ts-pill:has(:checked){background-color:var(--accent);border-color:var(--accent);color:var(--accent-contrast);box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--accent-contrast) 28%, transparent), 0 4px 12px -6px color-mix(in srgb, var(--accent) 70%, transparent);font-weight:600}.ts-pill:has(:checked):hover{background-color:var(--accent-hover);border-color:var(--accent-hover);color:var(--accent-contrast)}.ts-pill:has(:focus-visible){outline:2px solid var(--accent);outline-offset:2px}.ts-pill:has(:checked):has(:focus-visible){outline-color:var(--ink)}.ts-meta{border:1px solid var(--border);background-color:var(--border);background-image:linear-gradient(90deg, color-mix(in srgb, var(--accent) 45%, transparent), color-mix(in srgb, var(--accent-2) 40%, transparent));border-radius:.625rem;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;margin-top:1.5rem;display:grid;overflow:hidden}.ts-stat{background-color:var(--surface);flex-direction:column;gap:.125rem;min-width:0;padding:.5rem .875rem;display:flex}.ts-stat-label{letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;color:var(--ink-muted);font-size:.6875rem;font-weight:600}.ts-stat:first-child .ts-stat-label{color:var(--accent-3)}.ts-stat:nth-child(2) .ts-stat-label{color:var(--accent)}.ts-stat:nth-child(3) .ts-stat-label{color:var(--correct)}.ts-stat:nth-child(4) .ts-stat-label{color:var(--incorrect)}.ts-stat-value{font-family:var(--font-mono);font-variant-numeric:tabular-nums;color:var(--ink);font-size:1.375rem;font-weight:600;line-height:1.3}.ts-area{border-radius:var(--radius-card);border:1px solid var(--border);background-color:var(--surface);margin-top:.75rem;transition:border-color .15s,box-shadow .15s;position:relative;overflow:hidden}.ts-area:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-wash)}.ts-area[data-state=ready] .ts-track{filter:blur(5px);transition:filter .2s}.ts-area[data-state=running] .ts-track{filter:blur();transition:filter .2s}.ts-area[data-state=completed] .ts-track{filter:blur()}.ts-overlay{z-index:4;background:radial-gradient(120% 140% at 50% 0%, color-mix(in srgb, var(--accent) 20%, transparent) 0%, transparent 62%), color-mix(in srgb, var(--surface) 78%, transparent);backdrop-filter:blur(3px)saturate(1.1);place-items:center;padding:1rem;transition:opacity .2s,visibility .2s;display:grid;position:absolute;inset:0}.ts-area[data-state=running] .ts-overlay,.ts-area[data-state=completed] .ts-overlay{opacity:0;visibility:hidden;pointer-events:none}.ts-overlay-content{text-align:center;flex-direction:column;align-items:center;gap:.75rem;display:flex}.ts-overlay-message{color:var(--ink);margin:0;font-size:.9375rem}.ts .ts-start-btn{background-color:var(--accent);background-image:var(--gradient-cta);color:#fff;border-color:#0000;border-radius:999px;padding:.75rem 1.75rem;font-size:1.0625rem;font-weight:600;transition:transform .15s,box-shadow .15s,filter .15s;box-shadow:0 14px 32px -10px #7c3aeda6}.ts .ts-start-btn:hover:not(:disabled){filter:brightness(1.06);transform:translateY(-1px);box-shadow:0 18px 38px -12px #7c3aedb3}.ts .ts-start-btn:active:not(:disabled){transform:translateY(0)}.ts .ts-start-btn:focus-visible{outline:3px solid var(--ink);outline-offset:4px}@media (prefers-reduced-motion:reduce){.ts-area[data-state=ready] .ts-track,.ts-area[data-state=running] .ts-track{filter:none;transition:none}.ts-overlay{background-color:var(--surface);backdrop-filter:none;background-image:none;transition:none}.ts .ts-start-btn{transition:none}.ts .ts-start-btn:hover:not(:disabled){transform:none}.ts-meter>span{transition:none}}.ts-meter{background-color:var(--surface-3);height:3px;overflow:hidden}.ts-meter>span{transform-origin:0;background-image:linear-gradient(90deg, var(--accent) 0%, var(--accent-2) 60%, var(--accent-4) 100%);width:100%;height:100%;transition:transform .9s linear;display:block;transform:scaleX(1)}.ts-viewport{height:calc(var(--ts-line-height) * var(--ts-viewport-lines) + 2rem);padding:1rem 1.25rem;position:relative;overflow:hidden;-webkit-mask-image:linear-gradient(#000 calc(100% - 1.5rem),#0000);mask-image:linear-gradient(#000 calc(100% - 1.5rem),#0000)}.ts-track{max-width:var(--ts-measure);font-family:var(--font-mono);will-change:transform;margin-inline:auto;position:relative}.ts-block{font-size:1.25rem;line-height:var(--ts-line-height);white-space:pre-wrap;overflow-wrap:break-word;color:var(--ink-muted)}.ts-char{color:var(--ink-muted);transition:color 80ms linear}.ts-char.is-correct{color:var(--ink)}.ts-char.is-incorrect{background-color:color-mix(in srgb, var(--incorrect) 12%, transparent);color:var(--incorrect);text-decoration:underline wavy color-mix(in srgb, var(--incorrect) 60%, transparent);text-underline-offset:4px;border-radius:2px;text-decoration-thickness:1px}.ts-char.is-current{background-color:var(--accent-wash);box-shadow:inset 0 -2px 0 0 var(--accent);color:var(--ink);border-radius:3px}.ts-input{resize:none;color:#0000;caret-color:#0000;width:100%;height:100%;font-family:var(--font-mono);font-size:1.25rem;line-height:var(--ts-line-height);background-color:#0000;border:0;margin:0;padding:0;position:absolute;inset:0;overflow:hidden}.ts-input::selection{background-color:#0000}.ts-hint{color:var(--ink-subtle);margin-top:.625rem;font-size:.8125rem}.ts-hint kbd{font-family:var(--font-mono);border:1px solid var(--border-strong);background-color:var(--surface-2);color:var(--ink-muted);border-radius:.25rem;padding:.0625rem .25rem;font-size:.75rem}.ts-results{border-radius:var(--radius-card);border:1px solid var(--border);background-color:var(--surface);background-image:linear-gradient(160deg, color-mix(in srgb, var(--accent) 6%, transparent) 0%, transparent 55%);margin-top:1.25rem;padding:1.5rem}.ts-results-head{text-align:center}.ts-results-eyebrow{letter-spacing:.08em;text-transform:uppercase;color:var(--ink-subtle);font-size:.6875rem;font-weight:600}.ts-results-wpm{font-family:var(--font-mono);font-variant-numeric:tabular-nums;color:#0000;background-image:var(--gradient-brand);-webkit-background-clip:text;background-clip:text;margin-top:.25rem;font-size:3.5rem;font-weight:700;line-height:1}.ts-results-unit{color:var(--ink-muted);margin-top:.25rem;font-size:.8125rem}.ts-results-badge{border:1px solid color-mix(in srgb, var(--correct) 40%, transparent);background-color:color-mix(in srgb, var(--correct) 12%, transparent);color:var(--correct);border-radius:999px;align-items:center;gap:.375rem;margin-top:.75rem;padding:.1875rem .625rem;font-size:.75rem;font-weight:600;display:inline-flex}.ts-results-grid{border-top:1px solid var(--border);grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));gap:.75rem 1.5rem;margin-top:1.5rem;padding-top:1.25rem;display:grid}.ts-results-grid dt{letter-spacing:.06em;text-transform:uppercase;color:var(--ink-subtle);font-size:.6875rem;font-weight:600}.ts-results-grid dd{font-family:var(--font-mono);font-variant-numeric:tabular-nums;color:var(--ink);margin-top:.125rem;font-size:.9375rem}.ts-results-actions{flex-wrap:wrap;justify-content:center;gap:.5rem;margin-top:1.5rem;display:flex}.ts-results-more{text-align:center;margin-top:1rem;font-size:.875rem}.ts-results-link{color:var(--accent);text-underline-offset:2px;text-decoration:underline;transition:color .15s}.ts-results-link:hover{color:var(--ink)}html.ts-fallback{overflow:hidden}.ts:is(:fullscreen,[data-focus=true]){overscroll-behavior:contain;background-color:var(--canvas);background-image:var(--canvas-gradient);width:100%;height:100%;box-shadow:none;border:0;border-radius:0;flex-direction:column;justify-content:safe center;gap:clamp(.75rem,2vw,1.25rem);padding:clamp(3.5rem,6vw,5rem) clamp(1rem,4vw,4rem) clamp(1.25rem,4vw,3rem);display:flex;position:relative;overflow-y:auto}.ts[data-fullscreen=true]{z-index:90;position:fixed;inset:0}.ts:is(:fullscreen,[data-focus=true]) .ts-controls,.ts:is(:fullscreen,[data-focus=true]) .ts-hint{display:none}.ts:is(:fullscreen,[data-focus=true]) .ts-meta,.ts:is(:fullscreen,[data-focus=true]) .ts-area{margin-inline:auto;width:min(72rem,100%);margin-top:0}.ts:is(:fullscreen,[data-focus=true]) .ts-results{margin-inline:auto;width:min(48rem,100%);margin-top:0}.ts:is(:fullscreen,[data-focus=true]) .ts-viewport{--ts-viewport-lines:5;height:calc(var(--ts-line-height) * var(--ts-viewport-lines) + 2rem)}.ts:is(:fullscreen,[data-focus=true]) .ts-block,.ts:is(:fullscreen,[data-focus=true]) .ts-input{font-size:clamp(1.375rem,1.6vw,1.75rem)}.ts:is(:fullscreen,[data-focus=true]) .ts-exit{z-index:6;border:1px solid var(--border-strong);background-color:var(--surface);color:var(--ink-muted);cursor:pointer;border-radius:999px;align-items:center;gap:.375rem;padding:.4375rem .875rem;font-size:.8125rem;font-weight:600;transition:color .15s,border-color .15s,transform .15s;display:inline-flex;position:absolute;top:clamp(1rem,2.5vw,1.75rem);right:clamp(1rem,2.5vw,1.75rem);box-shadow:0 10px 24px -14px #00000073}.ts:is(:fullscreen,[data-focus=true]) .ts-exit:hover{border-color:var(--accent);color:var(--ink);transform:translateY(-1px)}.ts-exit svg{width:.875rem;height:.875rem}@media (width<=48rem){.ts:is(:fullscreen,[data-focus=true]){gap:.75rem;padding:3.25rem 1rem 1rem}.ts:is(:fullscreen,[data-focus=true]) .ts-viewport{--ts-viewport-lines:4}.ts:is(:fullscreen,[data-focus=true]) .ts-exit{top:.75rem;right:.75rem}}@media (width<=30rem){.ts{--ts-line-height:1.9375rem}.ts:has(.ts-area[data-state=ready]) .ts-meta{display:none}.ts-meta{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:1.25rem}.ts-area[data-state=ready]{min-height:10rem}.ts-overlay{padding:.5rem}.ts-overlay-content{gap:.5rem}.ts-overlay-message{font-size:.875rem;line-height:1.4}.ts-stat-value{font-size:1.25rem}.ts-actions{margin-left:0}.ts-viewport{--ts-viewport-lines:3;height:calc(var(--ts-line-height) * var(--ts-viewport-lines) + 1.5rem);padding:.75rem 1rem}.ts-block,.ts-input{font-size:1.0625rem}.ts-results-wpm{font-size:3rem}}
