:root{--bg-primary:#0f172a;--bg-card:#1e293b;--bg-card-hover:#334155;--text-primary:#f8fafc;--text-secondary:#94a3b8;--text-muted:#64748b;--border-color:#334155;--border-subtle:#334155b3;--accent-amber:#fbbf24;--accent-amber-glow:#fbbf2440;--accent-sky:#38bdf8;--accent-emerald:#34d399;--accent-rose:#f43f5e;--accent-violet:#a78bfa}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html,body{background-color:var(--bg-primary);width:100%;min-height:100vh;color:var(--text-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;line-height:1.5}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--bg-primary)}::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}.app-viewport{background:radial-gradient(circle at 50% 10%,#1e293b99 0%,#0f172a 70%);flex-direction:column;justify-content:center;align-items:center;min-height:100vh;padding:2rem 1rem;display:flex}.main-container{flex-direction:column;gap:1.5rem;width:100%;max-width:1000px;margin:0 auto;display:flex}.prompt-banner{color:var(--text-muted);justify-content:center;align-items:center;gap:.5rem;font-size:.875rem;display:flex}.prompt-icon{width:1rem;height:1rem;color:var(--accent-amber)}.button-center-wrapper{justify-content:center;align-items:center;display:flex}.btn-restart{background-color:var(--bg-card);color:var(--text-secondary);border:1px solid var(--border-color);cursor:pointer;border-radius:.5rem;align-items:center;gap:.5rem;padding:.625rem 1.25rem;font-size:.875rem;font-weight:500;transition:all .2s;display:inline-flex}.btn-restart:hover{background-color:var(--bg-card-hover);color:var(--text-primary);border-color:var(--text-muted)}.btn-restart .icon{width:1rem;height:1rem;transition:transform .3s}.btn-restart:hover .icon{transform:rotate(-180deg)}.btn-primary{background-color:var(--accent-amber);color:#0f172a;cursor:pointer;border:none;border-radius:.5rem;align-items:center;gap:.5rem;padding:.75rem 1.5rem;font-size:.95rem;font-weight:700;transition:all .2s;display:inline-flex;box-shadow:0 4px 14px #fbbf244d}.btn-primary:hover{background-color:#f59e0b;transform:translateY(-1px);box-shadow:0 6px 20px #fbbf2466}.btn-primary .icon{width:1.1rem;height:1.1rem;transition:transform .3s}.btn-primary:hover .icon{transform:rotate(-180deg)}.results-card{flex-direction:column;gap:1.5rem;animation:.4s ease-out fadeIn;display:flex}.results-header{text-align:center;flex-direction:column;align-items:center;gap:.75rem;display:flex}.trophy-badge{background:linear-gradient(135deg, var(--accent-amber), #ea580c);border-radius:1rem;justify-content:center;align-items:center;width:4rem;height:4rem;display:flex;box-shadow:0 10px 25px #fbbf2440}.trophy-badge .icon{color:#0f172a;width:2rem;height:2rem}.results-title{letter-spacing:-.025em;color:var(--text-primary);font-size:1.75rem;font-weight:800}.results-grid{grid-template-columns:repeat(2,1fr);gap:1rem;display:grid}@media (min-width:640px){.results-grid{grid-template-columns:repeat(4,1fr)}}.result-stat-box{background-color:var(--bg-card);border:1px solid var(--border-color);text-align:center;border-radius:.75rem;flex-direction:column;align-items:center;gap:.5rem;padding:1.25rem 1rem;display:flex}.result-stat-box .icon{width:1.25rem;height:1.25rem}.result-stat-box .stat-val{font-variant-numeric:tabular-nums;font-size:2.25rem;font-weight:800;line-height:1}.result-stat-box .stat-lbl{text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);font-size:.7rem;font-weight:600}.val-amber{color:var(--accent-amber)}.val-sky{color:var(--accent-sky)}.val-emerald{color:var(--accent-emerald)}.val-violet{color:var(--accent-violet)}.val-rose{color:var(--accent-rose)}.results-details{color:var(--text-muted);justify-content:center;align-items:center;gap:2rem;font-size:.875rem;display:flex}.results-details .highlight-correct{color:var(--accent-emerald);font-weight:600}.results-details .highlight-incorrect{color:var(--accent-rose);font-weight:600}.results-details .highlight-neutral{color:var(--text-secondary);font-weight:600}.app-footer{text-align:center;color:var(--text-muted);margin-top:1rem;font-size:.8rem}.kbd-badge{background-color:var(--bg-card);border:1px solid var(--border-color);color:var(--text-secondary);border-radius:.25rem;padding:.1rem .35rem;font-family:monospace;font-size:.75rem;display:inline-block}.placeholder-page{background-color:var(--bg-primary);min-height:100vh;color:var(--text-primary);text-align:center;flex-direction:column;justify-content:center;align-items:center;padding:2rem;display:flex}.placeholder-badge{border-radius:1rem;justify-content:center;align-items:center;width:4rem;height:4rem;margin-bottom:1rem;display:flex;box-shadow:0 8px 20px #0000004d}.placeholder-badge .icon{color:#0f172a;width:2rem;height:2rem}.badge-emerald{background:linear-gradient(135deg, var(--accent-emerald), #0d9488)}.badge-sky{background:linear-gradient(135deg, var(--accent-sky), #2563eb)}.badge-violet{background:linear-gradient(135deg, var(--accent-violet), #7c3aed)}.badge-amber{background:linear-gradient(135deg, var(--accent-amber), #ea580c)}.placeholder-title{margin-bottom:.5rem;font-size:2rem;font-weight:700}.placeholder-subtitle{color:var(--text-muted)}@keyframes fadeIn{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.header-bar{justify-content:space-between;align-items:center;width:100%;display:flex}.brand-section{align-items:center;gap:.75rem;display:flex}.brand-logo-wrapper{background:linear-gradient(135deg, var(--accent-amber), #f97316);border-radius:.75rem;justify-content:center;align-items:center;width:2.5rem;height:2.5rem;display:flex;box-shadow:0 4px 12px #fbbf2433}.brand-logo-icon{color:#0f172a;width:1.25rem;height:1.25rem}.brand-info{flex-direction:column;display:flex}.brand-title{letter-spacing:-.02em;color:var(--text-primary);font-size:1.25rem;font-weight:700;line-height:1.2}.brand-subtitle{color:var(--text-muted);font-size:.75rem}.time-selector{background-color:var(--bg-card);border:1px solid var(--border-color);border-radius:.5rem;align-items:center;gap:.25rem;padding:.25rem;display:flex}.time-btn{color:var(--text-muted);cursor:pointer;background:0 0;border:none;border-radius:.375rem;padding:.35rem .75rem;font-size:.75rem;font-weight:600;transition:all .15s ease-in-out}.time-btn:hover{color:var(--text-primary);background-color:var(--bg-card-hover)}.time-btn.active{color:var(--accent-amber);background-color:#fbbf2426;box-shadow:0 1px 3px #0003}.stats-container{background-color:var(--bg-card);border:1px solid var(--border-color);border-radius:.75rem;justify-content:space-between;align-items:center;gap:1rem;padding:1rem 1.5rem;display:flex;box-shadow:0 4px 12px #0003}.stat-item{flex-direction:column;align-items:center;gap:.25rem;min-width:4rem;display:flex}.stat-value{font-variant-numeric:tabular-nums;letter-spacing:-.02em;font-size:2rem;font-weight:800;line-height:1}.stat-label{text-transform:uppercase;letter-spacing:.1em;color:var(--text-muted);font-size:.65rem;font-weight:700}.stat-divider{background-color:var(--border-color);width:1px;height:2.25rem}.stat-time{color:var(--text-primary)}.stat-time-urgent{color:var(--accent-rose);animation:1s infinite alternate pulseUrgent}.stat-wpm{color:var(--accent-amber)}.stat-net-wpm{color:var(--accent-sky)}.stat-accuracy-high{color:var(--accent-emerald)}.stat-accuracy-medium{color:var(--accent-amber)}.stat-accuracy-low{color:var(--accent-rose)}.keys-display{align-items:baseline;gap:.2rem;display:flex}.keys-correct{color:var(--accent-emerald)}.keys-separator{color:var(--text-muted);font-size:1.25rem}.keys-incorrect{color:var(--accent-rose)}@keyframes pulseUrgent{0%{opacity:1}to{opacity:.5}}@media (max-width:640px){.stats-container{gap:.5rem;padding:.75rem 1rem}.stat-value{font-size:1.5rem}.stat-item{min-width:3rem}}.typing-box{background-color:var(--bg-card);border:1px solid var(--border-color);letter-spacing:.05em;-webkit-user-select:none;user-select:none;border-radius:.75rem;width:100%;max-height:160px;padding:1.5rem 1.75rem;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1.5rem;line-height:2rem;position:relative;overflow:hidden;box-shadow:inset 0 2px 4px #0003}.words-stream{flex-wrap:wrap;transition:filter .2s;display:flex}.word-wrapper{display:inline-flex}.char-span{transition:color 80ms;display:inline-block;position:relative}.char-pending{color:var(--text-muted)}.char-correct{color:var(--accent-emerald)}.char-incorrect{color:var(--accent-rose);text-decoration:underline;-webkit-text-decoration-color:var(--accent-rose);text-decoration-color:var(--accent-rose);background-color:#f43f5e26;border-radius:2px;text-decoration-thickness:2px}.char-current{color:var(--text-primary)}.cursor-bar{background-color:var(--accent-amber);width:2.5px;height:70%;box-shadow:0 0 8px var(--accent-amber-glow);border-radius:2px;animation:.9s infinite blinkCursor;position:absolute;top:15%;left:-2px}@keyframes blinkCursor{0%,to{opacity:1}50%{opacity:0}}.pause-overlay{-webkit-backdrop-filter:blur(6px);z-index:10;background-color:#0f172abf;border-radius:.75rem;justify-content:center;align-items:center;animation:.2s ease-out fadeIn;display:flex;position:absolute;inset:0}.pause-message{background-color:var(--bg-card);border:1px solid var(--border-color);color:var(--text-primary);letter-spacing:normal;border-radius:.625rem;align-items:center;gap:.75rem;padding:.875rem 1.75rem;font-family:system-ui,-apple-system,sans-serif;font-size:.95rem;font-weight:600;display:flex;box-shadow:0 12px 30px #00000080}.pause-message-icon{width:1.15rem;height:1.15rem;color:var(--accent-amber);flex-shrink:0}.typing-fade-bottom{pointer-events:none;background:linear-gradient(#0000 0%,#1e293be6 100%);height:2.5rem;position:absolute;bottom:0;left:0;right:0}@media (max-width:640px){.typing-box{max-height:140px;padding:1rem 1.25rem;font-size:1.2rem;line-height:1.75rem}.pause-message{gap:.5rem;padding:.625rem 1rem;font-size:.8rem}}.virtual-keyboard-container{background-color:var(--bg-card);border:1px solid var(--border-color);-webkit-user-select:none;user-select:none;border-radius:.75rem;flex-direction:column;align-items:center;gap:.375rem;width:100%;padding:1rem;display:flex;box-shadow:0 4px 12px #0003}.keyboard-row{flex-direction:row;justify-content:center;gap:.375rem;width:100%;display:flex}.row-top{padding-left:0}.row-middle{padding-left:1.25rem}.row-bottom{padding-left:2.5rem}.key{border:1px solid var(--border-color);width:2.75rem;height:2.75rem;color:var(--text-muted);text-transform:uppercase;background-color:#1e293b;border-radius:.5rem;justify-content:center;align-items:center;font-size:.875rem;font-weight:600;transition:all .1s;display:flex}.key-space{letter-spacing:.05em;width:18rem;height:2.75rem;color:var(--text-muted);font-size:.75rem}.key-next{color:var(--text-primary);background-color:#334155;border-color:#64748b}.key-active{transform:scale(.95);box-shadow:0 0 12px #fbbf244d;border-color:var(--accent-amber)!important;color:var(--accent-amber)!important;background-color:#fbbf2433!important}.finger-pinky-l,.finger-pinky-r{background-color:#f43f5e1f;border-color:#f43f5e4d}.finger-ring-l,.finger-ring-r{background-color:#fbbf241f;border-color:#fbbf244d}.finger-middle-l,.finger-middle-r{background-color:#34d3991f;border-color:#34d3994d}.finger-index-l,.finger-index-r{background-color:#38bdf81f;border-color:#38bdf84d}@media (max-width:640px){.key{width:2rem;height:2.25rem;font-size:.75rem}.key-space{width:12rem;height:2.25rem}.row-middle{padding-left:.75rem}.row-bottom{padding-left:1.5rem}}.controls-container{justify-content:center;align-items:center;gap:1rem;width:100%;margin-top:.25rem;display:flex}.btn-control{background-color:var(--bg-card);color:var(--text-secondary);border:1px solid var(--border-color);cursor:pointer;-webkit-user-select:none;user-select:none;border-radius:.5rem;justify-content:center;align-items:center;gap:.5rem;padding:.625rem 1.25rem;font-size:.875rem;font-weight:600;transition:all .2s;display:inline-flex}.btn-control .icon{flex-shrink:0;width:1rem;height:1rem}.btn-control:hover:not(:disabled){background-color:var(--bg-card-hover);color:var(--text-primary);border-color:var(--text-muted)}.btn-control:disabled{opacity:.45;cursor:not-allowed;pointer-events:none}.btn-pause{color:var(--accent-amber);border-color:#fbbf244d}.btn-pause:hover:not(:disabled){border-color:var(--accent-amber);background-color:#fbbf241f}.btn-resume{color:var(--accent-sky);border-color:#38bdf84d}.btn-resume:hover:not(:disabled){border-color:var(--accent-sky);background-color:#38bdf81f}.btn-submit{background-color:var(--accent-emerald);color:#064e3b;border:1px solid #34d39999;font-weight:700;box-shadow:0 4px 12px #34d39940}.btn-submit:hover:not(:disabled){color:#022c22;background-color:#2ebd85;transform:translateY(-1px);box-shadow:0 6px 16px #34d39959}.btn-submit:active:not(:disabled){transform:translateY(0)}.btn-restart .icon{transition:transform .3s}.btn-restart:hover:not(:disabled) .icon{transform:rotate(-180deg)}@media (max-width:640px){.controls-container{flex-wrap:wrap;gap:.5rem}.btn-control{padding:.5rem .875rem;font-size:.8rem}}