@import"https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap";*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}:root{--bg-primary: #0a0e17;--bg-secondary: #111827;--bg-card: #1a2233;--bg-hover: #243044;--text-primary: #e2e8f0;--text-secondary: #64748b;--text-dim: #b5bbc3;--accent: #38bdf8;--accent-glow: rgba(56, 189, 248, .15);--correct: #4ade80;--incorrect: #f87171;--complete: #a78bfa;--cursor: #f59e0b;--border: #1e293b;--radius: 12px;--radius-sm: 8px}html{font-size:16px}body{font-family:JetBrains Mono,monospace;background:var(--bg-primary);color:var(--text-primary);min-height:100vh;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#root{min-height:100vh;display:flex;flex-direction:column}.app{display:flex;flex-direction:column;min-height:100vh;max-width:960px;margin:0 auto;padding:0 24px}.header{display:flex;align-items:center;gap:16px;padding:32px 0 24px}.logo{font-size:1.5rem;font-weight:700;color:var(--text-primary);letter-spacing:-.02em}.logo-bracket{color:var(--accent)}.tagline{font-size:.75rem;color:var(--text-secondary);letter-spacing:.05em;text-transform:uppercase}.main{display:flex;flex-direction:column;gap:20px;flex:1}.stats-bar{display:flex;gap:12px}.stat{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;padding:16px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);transition:all .3s ease}.stat:hover{border-color:var(--accent);box-shadow:0 0 20px var(--accent-glow)}.stat-value{font-size:1.75rem;font-weight:700;color:var(--accent);line-height:1}.stat:nth-child(2) .stat-value{color:var(--correct)}.stat:nth-child(4) .stat-value{color:var(--complete)}.stat-label{font-size:.65rem;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.1em}.progress-bar{height:3px;background:var(--border);border-radius:2px;overflow:hidden}.progress-fill{height:100%;background:linear-gradient(90deg,var(--accent),var(--correct));border-radius:2px;transition:width .2s ease}.typing-area{position:relative;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:32px;outline:none;cursor:text;transition:all .3s ease;min-height:200px}.typing-area:focus,.typing-area.focused{border-color:var(--accent);box-shadow:0 0 30px var(--accent-glow),inset 0 0 30px #38bdf808}.typing-area.focused{cursor:none}.typing-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:.875rem;color:var(--text-secondary);letter-spacing:.05em;pointer-events:none;z-index:1;animation:pulse 2s ease-in-out infinite}@keyframes pulse{0%,to{opacity:.5}50%{opacity:1}}.typing-text{font-family:JetBrains Mono,monospace;font-size:1.25rem;line-height:2;white-space:pre-wrap;word-break:break-word;margin:0}.char{color:var(--text-dim);position:relative;transition:color .1s ease}.char.correct{color:var(--correct)}.char.incorrect{color:var(--incorrect);text-decoration:underline wavy;text-underline-offset:4px}.char.complete{color:var(--complete);opacity:.7}.char.cursor{color:var(--text-primary)}.char.cursor:before{content:"";position:absolute;left:-1px;top:2px;bottom:2px;width:2px;background:var(--cursor);border-radius:1px;animation:blink 1s step-end infinite;box-shadow:0 0 6px var(--cursor)}@keyframes blink{0%,50%{opacity:1}51%,to{opacity:0}}.controls{display:flex;gap:16px;align-items:center;flex-wrap:wrap}.control-group{display:flex;align-items:center;gap:12px}.control-label{font-size:.75rem;color:var(--text-secondary);white-space:nowrap}.slider{-webkit-appearance:none;appearance:none;height:4px;background:var(--border);border-radius:2px;outline:none;width:120px}.slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:var(--accent);cursor:pointer;box-shadow:0 0 8px var(--accent-glow);transition:transform .15s ease}.slider::-webkit-slider-thumb:hover{transform:scale(1.2)}.toggles{gap:16px}.toggle{display:flex;align-items:center;gap:8px;font-size:.75rem;color:var(--text-secondary);cursor:pointer;-webkit-user-select:none;user-select:none}.toggle input{display:none}.toggle-slider{position:relative;width:36px;height:20px;background:var(--border);border-radius:10px;transition:background .3s ease;flex-shrink:0}.toggle-slider:after{content:"";position:absolute;top:3px;left:3px;width:14px;height:14px;background:var(--text-secondary);border-radius:50%;transition:all .3s ease}.toggle input:checked+.toggle-slider{background:var(--accent)}.toggle input:checked+.toggle-slider:after{left:19px;background:#fff}.actions{margin-left:auto}.btn{font-family:JetBrains Mono,monospace;font-size:.75rem;padding:8px 16px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-card);color:var(--text-secondary);cursor:pointer;transition:all .2s ease;display:inline-flex;align-items:center;gap:6px}.btn:hover{border-color:var(--accent);color:var(--text-primary);box-shadow:0 0 12px var(--accent-glow)}.btn-primary{background:var(--accent);border-color:var(--accent);color:var(--bg-primary);font-weight:600}.btn-primary:hover{background:#7dd3fc;border-color:#7dd3fc;color:var(--bg-primary)}kbd{display:inline-block;font-family:JetBrains Mono,monospace;font-size:.625rem;padding:2px 5px;background:var(--bg-primary);border:1px solid var(--border);border-radius:4px;color:var(--text-secondary);line-height:1}.hints{display:flex;gap:24px;justify-content:center;font-size:.7rem;color:var(--text-secondary);opacity:.6}.hints span{display:flex;align-items:center;gap:4px}.footer{padding:24px 0;text-align:center}.footer a{font-size:.75rem;color:var(--text-secondary);text-decoration:none;transition:color .2s ease}.footer a:hover{color:var(--accent)}@media(max-width:640px){.app{padding:0 16px}.stats-bar{gap:8px}.stat{padding:12px 8px}.stat-value{font-size:1.25rem}.typing-area{padding:20px}.typing-text{font-size:1rem}.controls{flex-direction:column;align-items:flex-start}.actions{margin-left:0}.hints{flex-direction:column;align-items:center;gap:8px}}