@import"https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=JetBrains+Mono:wght@400;500;600&display=swap";*,*:before,*:after{box-sizing:border-box}body,html,#root{width:100dvw;min-height:100dvh;margin:0;padding:0;overflow-x:hidden;font-family:DM Sans,system-ui,sans-serif;font-size:16px;-webkit-font-smoothing:antialiased}:root{--bg-deep: #06060a;--bg-elevated: #0e0e14;--bg-card: rgba(18, 18, 26, .72);--border-subtle: rgba(255, 255, 255, .06);--border-glow: rgba(34, 211, 238, .35);--text: #e8e8ef;--text-muted: #8b8b9a;--accent: #22d3ee;--accent-dim: rgba(34, 211, 238, .12);--correct-bg: rgba(52, 211, 153, .18);--correct-text: #6ee7b7;--incorrect-bg: rgba(251, 113, 133, .2);--incorrect-text: #fda4af;--next-bg: rgba(255, 255, 255, .06);--radius-lg: 20px;--radius-md: 12px;--shadow-card: 0 0 0 1px var(--border-subtle), 0 24px 80px rgba(0, 0, 0, .55), 0 0 120px rgba(34, 211, 238, .06)}.app-shell{min-height:100dvh;width:100%;display:flex;flex-direction:column;align-items:center;padding:clamp(1rem,4vw,2.5rem);background:var(--bg-deep);background-image:radial-gradient(ellipse 120% 80% at 50% -20%,rgba(34,211,238,.15),transparent 50%),radial-gradient(ellipse 80% 50% at 100% 50%,rgba(99,102,241,.08),transparent 45%),radial-gradient(ellipse 60% 40% at 0% 80%,rgba(236,72,153,.06),transparent 40%);color:var(--text)}.app-header{width:min(960px,100%);display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:clamp(1.25rem,3vw,2rem)}.brand{display:flex;flex-direction:column;gap:.15rem}.brand-title{margin:0;font-size:clamp(1.25rem,3vw,1.65rem);font-weight:700;letter-spacing:-.03em;background:linear-gradient(135deg,#fff 0%,var(--accent) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}.brand-tagline{margin:0;font-size:.8125rem;color:var(--text-muted);font-weight:500}.header-actions{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:flex-end}.btn{font-family:inherit;font-size:.875rem;font-weight:600;letter-spacing:.02em;border:none;border-radius:var(--radius-md);cursor:pointer;transition:transform .15s ease,box-shadow .2s ease,background .2s ease,color .2s ease,opacity .2s ease}.btn:active:not(:disabled){transform:scale(.98)}.btn:disabled{opacity:.45;cursor:not-allowed}.btn-ghost{padding:.55rem 1rem;background:#ffffff0d;color:var(--text);border:1px solid var(--border-subtle)}.btn-ghost:hover:not(:disabled){background:#ffffff17;border-color:#ffffff1f}.btn-primary{padding:.65rem 1.35rem;background:linear-gradient(135deg,#06b6d4,#22d3ee,#67e8f9);color:#042f2e;box-shadow:0 0 24px #22d3ee59}.btn-primary:hover:not(:disabled){box-shadow:0 0 32px #22d3ee80}.app-main{width:min(960px,100%);flex:1;display:flex;align-items:center;justify-content:center}.race-card{width:100%;padding:clamp(1.25rem,3vw,2rem);border-radius:var(--radius-lg);background:var(--bg-card);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--border-subtle);box-shadow:var(--shadow-card);display:flex;flex-direction:column;gap:1.25rem}.stats-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem 1rem}.stat{display:flex;flex-direction:column;gap:.2rem}.stat-label{font-size:.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:.12em;color:var(--text-muted)}.stat-value{font-family:JetBrains Mono,ui-monospace,monospace;font-size:1.5rem;font-weight:600;font-variant-numeric:tabular-nums;color:var(--accent)}.stat-value--muted{color:var(--text-muted)}.stat-value--success{color:var(--correct-text)}.paragraph-wrap{min-height:8.5rem;padding:1rem 1.1rem;border-radius:var(--radius-md);background:var(--bg-elevated);border:1px solid var(--border-subtle);line-height:1.75}.paragraph-text{margin:0;font-family:JetBrains Mono,ui-monospace,monospace;font-size:clamp(1rem,2.4vw,1.2rem);font-weight:400;letter-spacing:.01em;color:var(--text-muted);word-break:break-word}.char{display:inline;border-radius:2px;transition:background .12s ease,color .12s ease,box-shadow .12s ease}.char.correct{background:var(--correct-bg);color:var(--correct-text)}.char.incorrect{background:var(--incorrect-bg);color:var(--incorrect-text);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}.char.next{background:var(--next-bg);color:var(--text);box-shadow:inset 0 -2px 0 var(--accent)}.input-wrap{position:relative}.user-input{width:100%;height:3.25rem;padding:0 1rem;font-family:JetBrains Mono,ui-monospace,monospace;font-size:1rem;font-weight:500;color:var(--text);background:#00000059;border:1px solid var(--border-subtle);border-radius:var(--radius-md);outline:none;transition:border-color .2s ease,box-shadow .2s ease}.user-input:focus{border-color:var(--border-glow);box-shadow:0 0 0 3px var(--accent-dim)}.user-input::placeholder{color:var(--text-muted)}.user-input:read-only{cursor:not-allowed;opacity:.55}.user-input:not(:read-only):focus{opacity:1}.actions-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.75rem;min-height:3rem}.hint{margin:0;text-align:center;font-size:.8125rem;color:var(--text-muted)}.hint kbd{font-family:JetBrains Mono,ui-monospace,monospace;font-size:.75em;padding:.15em .45em;border-radius:4px;background:#ffffff14;border:1px solid var(--border-subtle)}@media (max-width: 520px){.app-header{flex-direction:column;align-items:flex-start}.header-actions{width:100%}.header-actions .btn{flex:1;justify-content:center}}