:root{--font-mono:"JetBrains Mono", "Fira Code", "Cascadia Code", monospace;--font-sans:system-ui, -apple-system, sans-serif;--font-size-base:1rem;--font-size-lg:1.25rem;--font-size-xl:1.5rem;--font-size-2xl:2rem;--font-size-sm:.875rem;--font-size-xs:.75rem;--max-width:860px;--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--transition-fast:80ms ease;--transition-base:.15s ease}[data-theme=dark]{--color-bg:#1a1b26;--color-surface:#24283b;--color-surface-alt:#2f3549;--color-border:#3b4261;--color-text-primary:#c0caf5;--color-text-secondary:#565f89;--color-text-muted:#3b4261;--color-char-pending:#565f89;--color-char-correct:#9ece6a;--color-char-incorrect:#f7768e;--color-char-current:#c0caf5;--color-char-current-bg:#2f3549;--color-accent:#7aa2f7;--color-accent-hover:#89b4fa;--color-accent-muted:#2f3549;--color-timer-active:#7aa2f7;--color-timer-warning:#e0af68;--color-timer-danger:#f7768e}[data-theme=light]{--color-bg:#f8f8f2;--color-surface:#fff;--color-surface-alt:#f0f0f0;--color-border:#d0d0d0;--color-text-primary:#383a42;--color-text-secondary:#9a9ba0;--color-text-muted:#c8c8c8;--color-char-pending:#9a9ba0;--color-char-correct:#50a14f;--color-char-incorrect:#e45649;--color-char-current:#383a42;--color-char-current-bg:#e8e8e8;--color-accent:#4078f2;--color-accent-hover:#2c5bb8;--color-accent-muted:#e8efff;--color-timer-active:#4078f2;--color-timer-warning:#c18401;--color-timer-danger:#e45649}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{-webkit-text-size-adjust:100%;font-size:16px}body{font-family:var(--font-sans);background-color:var(--color-bg);color:var(--color-text-primary);min-height:100dvh;transition:background-color var(--transition-base), color var(--transition-base);line-height:1.6}button{cursor:pointer;background:0 0;border:none;font-family:inherit}input{font-family:inherit}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.shell{min-height:100dvh;max-width:var(--max-width);flex-direction:column;margin:0 auto;padding:0 1.5rem;display:flex}.shell__header{border-bottom:1px solid var(--color-border);justify-content:space-between;align-items:center;padding:1.25rem 0;display:flex}.shell__logo{font-family:var(--font-mono);font-size:var(--font-size-xl);color:var(--color-accent);letter-spacing:-.05em;font-weight:700}.shell__controls{flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:1rem;display:flex}.shell__controls-group{align-items:center;gap:.6rem;display:flex}.shell__controls-group--profile{flex-wrap:wrap;justify-content:flex-end;position:relative}.shell__profile-actions{align-items:center;gap:.4rem;display:flex}.shell__controls-group--language,.shell__controls-group--theme{padding-left:1.8rem}.shell__language-label{font-size:var(--font-size-xs);color:var(--color-text-secondary)}.shell__language-select{font-family:var(--font-mono);font-size:var(--font-size-sm);color:var(--color-text-primary);background-color:var(--color-surface-alt);border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:.3rem .45rem}.shell__language-select:focus-visible{outline:2px solid var(--color-accent);outline-offset:1px}.shell__add-btn,.shell__icon-btn{font-family:var(--font-mono);font-size:var(--font-size-xs);color:var(--color-text-secondary);border:1px solid var(--color-border);border-radius:var(--radius-sm);transition:color var(--transition-fast), border-color var(--transition-fast), background-color var(--transition-fast), transform var(--transition-fast);padding:.25rem .4rem}.shell__icon-btn{background-color:var(--color-surface-alt);place-items:center;width:2rem;height:2rem;padding:0;font-size:.95rem;display:grid}.shell__add-btn:hover,.shell__icon-btn:hover{color:var(--color-accent);border-color:var(--color-accent);background-color:var(--color-accent-muted);transform:translateY(-1px)}.shell__add-btn:disabled,.shell__icon-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}.shell__add-btn--primary{color:var(--color-bg);background-color:var(--color-accent);border-color:var(--color-accent)}.shell__add-btn--primary:hover{color:var(--color-bg);background-color:var(--color-accent-hover);border-color:var(--color-accent-hover)}.shell__profile-modal-overlay{z-index:120;background-color:color-mix(in srgb, var(--color-bg) 78%, transparent);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);justify-content:center;align-items:center;padding:1rem;display:flex;position:fixed;inset:0}.shell__profile-modal{background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);flex-direction:column;gap:1rem;width:min(100%,360px);padding:1.2rem;display:flex;box-shadow:0 18px 50px #00000038}.shell__profile-modal-header{justify-content:space-between;align-items:center;display:flex}.shell__profile-modal-title{font-size:var(--font-size-base);color:var(--color-accent);margin:0}.shell__profile-modal-actions{justify-content:flex-end;gap:.5rem;display:flex}.shell__profile-input{width:100%;min-width:11rem;font-family:var(--font-mono);font-size:var(--font-size-sm);color:var(--color-text-primary);background-color:var(--color-surface-alt);border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:.55rem .7rem}.shell__profile-input:focus-visible{outline:2px solid var(--color-accent);outline-offset:1px}.shell__theme-btn{font-size:var(--font-size-lg);color:var(--color-text-secondary);border-radius:var(--radius-sm);transition:color var(--transition-fast), background-color var(--transition-fast);padding:.25rem .5rem}.shell__theme-btn:hover{color:var(--color-text-primary);background-color:var(--color-surface-alt)}.shell__main{flex-direction:column;flex:1;gap:2rem;padding:2.5rem 0;display:flex}.shell__footer{border-top:1px solid var(--color-border);font-size:var(--font-size-xs);color:var(--color-text-secondary);text-align:center;padding:1rem 0}.text-display{font-family:var(--font-mono);font-size:var(--font-size-lg);color:var(--color-char-pending);background-color:var(--color-surface);border-radius:var(--radius-md);border:1px solid var(--color-border);-webkit-user-select:none;user-select:none;cursor:text;padding:1.5rem;line-height:1.9;position:relative}.text-display__word,.text-display__space{display:inline}.text-display__char{transition:color var(--transition-fast)}.text-display__char--pending{color:var(--color-char-pending)}.text-display__char--correct{color:var(--color-char-correct)}.text-display__char--incorrect{color:var(--color-char-incorrect);text-decoration:underline;-webkit-text-decoration-color:var(--color-char-incorrect);text-decoration-color:var(--color-char-incorrect)}.text-display__char--current{color:var(--color-char-current);background-color:var(--color-char-current-bg);border-radius:2px}.text-display__word--active{border-bottom:2px solid var(--color-accent)}.text-display__word--error{border-bottom:2px solid var(--color-char-incorrect)}.typing-input{width:100%;font-family:var(--font-mono);font-size:var(--font-size-base);color:var(--color-text-primary);background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);transition:border-color var(--transition-fast), box-shadow var(--transition-fast);outline:none;padding:.75rem 1rem}.typing-input:focus{border-color:var(--color-accent);box-shadow:0 0 0 3px color-mix(in srgb, var(--color-accent) 20%, transparent)}.typing-input::placeholder{color:var(--color-text-secondary)}.typing-input:disabled{opacity:.4;cursor:not-allowed}.timer{flex-wrap:wrap;align-items:center;gap:1.25rem;display:flex}.timer__value{font-family:var(--font-mono);font-size:var(--font-size-2xl);color:var(--color-timer-active);min-width:3ch;transition:color var(--transition-base);font-weight:700}.timer__value--warning{color:var(--color-timer-warning)}.timer__value--danger{color:var(--color-timer-danger)}.timer__options{gap:.5rem;display:flex}.timer__option{font-family:var(--font-mono);font-size:var(--font-size-sm);color:var(--color-text-secondary);border-radius:var(--radius-sm);transition:color var(--transition-fast), border-color var(--transition-fast), background-color var(--transition-fast);border:1px solid #0000;padding:.25rem .6rem}.timer__option:hover{color:var(--color-text-primary);background-color:var(--color-surface-alt)}.timer__option--active{color:var(--color-accent);border-color:var(--color-accent)}.stats{align-items:flex-end;gap:2rem;display:flex}.stats__item{flex-direction:column;align-items:flex-start;display:flex}.stats__item--small .stats__value{font-size:var(--font-size-lg);color:var(--color-text-secondary)}.stats__value{font-family:var(--font-mono);font-size:var(--font-size-2xl);color:var(--color-accent);font-weight:700;line-height:1.1}.stats__label{font-size:var(--font-size-xs);color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:.08em;margin-top:.2rem}.history{background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:1rem}.history__header{justify-content:space-between;align-items:flex-start;gap:1rem;margin-bottom:.7rem;display:flex}.history__header h3{font-size:var(--font-size-sm);letter-spacing:.03em;color:var(--color-text-secondary);text-transform:uppercase}.history__mode-summary{font-size:var(--font-size-xs);color:var(--color-text-secondary);margin-top:.2rem}.history__header-actions{flex-wrap:wrap;justify-content:flex-end;gap:.4rem;display:flex}.history__clear{color:var(--color-text-secondary);font-size:var(--font-size-xs);border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:.2rem .5rem}.history__clear:hover{color:var(--color-text-primary);border-color:var(--color-accent)}.history__empty{color:var(--color-text-secondary);font-size:var(--font-size-sm)}.history__grid{grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:.75rem;display:grid}.history__item{background-color:var(--color-surface-alt);border-radius:var(--radius-sm);padding:.6rem}.history__value{font-family:var(--font-mono);font-weight:700;font-size:var(--font-size-lg);color:var(--color-accent);line-height:1.1;display:block}.history__label{font-size:var(--font-size-xs);color:var(--color-text-secondary);text-transform:uppercase}.history__modal-overlay{z-index:110;background-color:color-mix(in srgb, var(--color-bg) 80%, transparent);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);justify-content:center;align-items:center;padding:1rem;display:flex;position:fixed;inset:0}.history__modal{background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);width:min(100%,920px);max-height:90dvh;padding:1rem;overflow:auto}.history__modal-header{justify-content:space-between;align-items:flex-start;gap:1rem;margin-bottom:.75rem;display:flex}.history__modal-title{color:var(--color-accent);font-size:var(--font-size-base);margin:0}.history__modal-hint{color:var(--color-text-secondary);font-size:var(--font-size-xs);margin-top:.2rem}.history__table-wrap{overflow-x:auto}.history__table{border-collapse:collapse;width:100%}.history__table th,.history__table td{border:1px solid var(--color-border);text-align:center;padding:.3rem}.history__table th{font-size:var(--font-size-xs);color:var(--color-text-secondary);background-color:var(--color-surface-alt)}.history__mode-cell{border-radius:var(--radius-sm);width:100%;min-width:90px;transition:background-color var(--transition-fast), border-color var(--transition-fast);background-color:#0000;flex-direction:column;align-items:center;gap:.2rem;padding:.45rem .35rem;display:flex}.history__mode-cell:hover{background-color:var(--color-accent-muted)}.history__mode-cell--active{background-color:var(--color-accent-muted);outline:1px solid var(--color-accent)}.history__mode-value{font-family:var(--font-mono);color:var(--color-accent);font-weight:700}.history__mode-meta{color:var(--color-text-secondary);font-size:.68rem}.modal-overlay{background-color:color-mix(in srgb, var(--color-bg) 80%, transparent);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:100;justify-content:center;align-items:center;animation:.2s fade-in;display:flex;position:fixed;inset:0}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.modal{background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);flex-direction:column;gap:1.5rem;min-width:320px;padding:2.5rem;animation:.2s slide-up;display:flex}@keyframes slide-up{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.modal__title{font-size:var(--font-size-xl);color:var(--color-accent);font-weight:700}.modal__best{font-size:var(--font-size-sm);color:var(--color-text-secondary)}.modal__restart-btn{font-family:var(--font-mono);font-size:var(--font-size-base);color:var(--color-bg);background-color:var(--color-accent);border-radius:var(--radius-md);transition:background-color var(--transition-fast);align-self:flex-start;padding:.65rem 1.5rem;font-weight:600}.modal__restart-btn:hover{background-color:var(--color-accent-hover)}.modal__hint{font-size:var(--font-size-xs);color:var(--color-text-secondary)}kbd{font-family:var(--font-mono);font-size:var(--font-size-xs);background-color:var(--color-surface-alt);border:1px solid var(--color-border);border-radius:3px;padding:1px 5px}.test-page{flex-direction:column;gap:1.5rem;display:flex}.test-page__top-bar{justify-content:space-between;align-items:center;gap:1rem;display:flex}.test-page__hint{font-size:var(--font-size-sm);color:var(--color-text-secondary);text-align:center;min-height:1.4em}.test-page__actions{justify-content:center;display:flex}.test-page__restart-btn{font-family:var(--font-mono);font-size:var(--font-size-sm);color:var(--color-text-primary);border:1px solid var(--color-border);border-radius:var(--radius-sm);transition:border-color var(--transition-fast), color var(--transition-fast), background-color var(--transition-fast);padding:.4rem .8rem}.test-page__restart-btn:hover{border-color:var(--color-accent);color:var(--color-accent);background-color:var(--color-accent-muted)}