:root{--font-sans: "Inter", system-ui, -apple-system, sans-serif;--font-mono: "JetBrains Mono", monospace;--text-xs: .8125rem;--text-sm: .9375rem;--text-base: 1.0625rem;--text-lg: 1.25rem;--text-xl: 1.5rem;--text-2xl: 2rem;--text-3xl: 2.5rem;--weight-normal: 400;--weight-medium: 500;--weight-semibold: 600;--space-1: .25rem;--space-2: .5rem;--space-3: .75rem;--space-4: 1rem;--space-5: 1.25rem;--space-6: 1.5rem;--space-8: 2rem;--space-10: 2.5rem;--space-12: 3rem;--radius-xs: 4px;--radius-sm: 6px;--radius-md: 10px;--radius-lg: 14px;--radius-xl: 20px;--radius-full: 9999px;--ease-out: cubic-bezier(.16, 1, .3, 1);--ease-in-out: cubic-bezier(.65, 0, .35, 1);--duration-fast: .12s;--duration-normal: .2s;--duration-slow: .35s;--focus-ring: 0 0 0 2px var(--color-bg-primary), 0 0 0 4px var(--color-accent)}[data-theme=dark]{--color-bg-primary: hsl(220, 20%, 8%);--color-bg-secondary: hsl(220, 18%, 12%);--color-bg-tertiary: hsl(220, 16%, 16%);--color-bg-subtle: hsl(220, 14%, 20%);--color-text-primary: hsl(220, 20%, 93%);--color-text-secondary: hsl(220, 12%, 62%);--color-text-muted: hsl(220, 10%, 42%);--color-accent: hsl(215, 80%, 58%);--color-accent-hover: hsl(215, 80%, 65%);--color-accent-muted: hsl(215, 40%, 22%);--color-error: hsl(0, 72%, 62%);--color-success: hsl(142, 60%, 55%);--color-warning: hsl(38, 90%, 55%);--shadow-sm: 0 1px 2px hsl(220, 20%, 4% / .4);--shadow-md: 0 4px 12px hsl(220, 20%, 4% / .35), 0 1px 3px hsl(220, 20%, 4% / .25);--shadow-lg: 0 12px 40px hsl(220, 20%, 3% / .5), 0 4px 12px hsl(220, 20%, 4% / .3);--color-overlay: hsl(220, 20%, 4% / .7)}[data-theme=light]{--color-bg-primary: hsl(220, 20%, 98%);--color-bg-secondary: hsl(220, 16%, 93%);--color-bg-tertiary: hsl(220, 14%, 88%);--color-bg-subtle: hsl(220, 12%, 83%);--color-text-primary: hsl(220, 20%, 12%);--color-text-secondary: hsl(220, 10%, 42%);--color-text-muted: hsl(220, 8%, 58%);--color-accent: hsl(215, 85%, 48%);--color-accent-hover: hsl(215, 85%, 42%);--color-accent-muted: hsl(215, 40%, 88%);--color-error: hsl(0, 72%, 50%);--color-success: hsl(142, 60%, 38%);--color-warning: hsl(38, 80%, 45%);--shadow-sm: 0 1px 2px hsl(220, 16%, 70% / .3);--shadow-md: 0 4px 12px hsl(220, 16%, 70% / .2), 0 1px 3px hsl(220, 16%, 70% / .15);--shadow-lg: 0 12px 40px hsl(220, 16%, 60% / .25), 0 4px 12px hsl(220, 16%, 70% / .15);--color-overlay: hsl(220, 16%, 20% / .4)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;width:100%;overflow-x:hidden;background-color:var(--color-bg-primary);color:var(--color-text-primary);font-family:var(--font-sans);font-size:var(--text-base);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;transition:background-color var(--duration-normal) var(--ease-out),color var(--duration-normal) var(--ease-out)}button{cursor:pointer;border:none;background:none;font-family:inherit;color:inherit}input,textarea{font-family:inherit;border:none;outline:none}h1,h2,h3,h4{font-weight:var(--weight-semibold);line-height:1.2}:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:var(--radius-sm)}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}.app-container{max-width:1200px;margin:0 auto;padding:0 var(--space-4);min-height:100vh;display:flex;flex-direction:column}.app-header{padding:var(--space-6) 0;display:flex;justify-content:space-between;align-items:center}.app-logo{font-family:var(--font-sans);font-size:var(--text-lg);font-weight:var(--weight-semibold);color:var(--color-text-primary);letter-spacing:-.02em}.app-nav{display:flex;gap:var(--space-3);align-items:center}.app-main{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center}.app-footer{padding:var(--space-6) 0;text-align:center;color:var(--color-text-muted);font-size:var(--text-xs)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);font-family:var(--font-sans);font-size:var(--text-sm);font-weight:var(--weight-medium);border-radius:var(--radius-md);transition:background-color var(--duration-fast) var(--ease-out),color var(--duration-fast) var(--ease-out),box-shadow var(--duration-fast) var(--ease-out);cursor:pointer;border:none;white-space:nowrap}.btn-primary{background-color:var(--color-accent);color:var(--color-bg-primary)}.btn-primary:hover{background-color:var(--color-accent-hover)}.btn-secondary{background-color:transparent;color:var(--color-text-secondary);border:1px solid var(--color-bg-tertiary)}.btn-secondary:hover{border-color:var(--color-accent);color:var(--color-accent)}.btn-ghost{background-color:transparent;color:var(--color-text-secondary);padding:var(--space-2)}.btn-ghost:hover{color:var(--color-text-primary);background-color:var(--color-bg-secondary)}.card{background-color:var(--color-bg-secondary);border-radius:var(--radius-md);padding:var(--space-6);margin-bottom:var(--space-4)}.card-title{font-size:var(--text-base);font-weight:var(--weight-semibold);color:var(--color-text-primary);margin-bottom:var(--space-4)}.toggle{width:40px;height:20px;border-radius:var(--radius-full);position:relative;transition:background-color var(--duration-fast) var(--ease-out);background-color:var(--color-bg-subtle);border:none;cursor:pointer}.toggle[data-enabled=true]{background-color:var(--color-accent)}.toggle-knob{width:16px;height:16px;background:#fff;border-radius:50%;position:absolute;top:2px;left:2px;transition:left var(--duration-fast) var(--ease-out)}.toggle[data-enabled=true] .toggle-knob{left:22px}.pill-group{display:flex;gap:var(--space-1);flex-wrap:wrap}.pill{padding:var(--space-1) var(--space-2);font-size:var(--text-xs);border-radius:var(--radius-sm);background-color:var(--color-bg-subtle);color:var(--color-text-secondary);cursor:pointer;border:none;transition:background-color var(--duration-fast) var(--ease-out),color var(--duration-fast) var(--ease-out)}.pill:hover{background-color:var(--color-bg-tertiary)}.pill[data-selected=true]{background-color:var(--color-accent);color:#fff}.mode-switcher{display:flex;gap:var(--space-2);padding:var(--space-1);background-color:var(--color-bg-secondary);border-radius:var(--radius-lg);margin-bottom:var(--space-6)}.mode-switcher__btn{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);background-color:transparent;color:var(--color-text-secondary);border:none;border-radius:var(--radius-md);cursor:pointer;font-size:var(--text-sm);font-family:var(--font-sans);font-weight:var(--weight-normal);transition:background-color var(--duration-fast) var(--ease-out),color var(--duration-fast) var(--ease-out);white-space:nowrap}.mode-switcher__btn:hover{color:var(--color-text-primary);background-color:var(--color-bg-tertiary)}.mode-switcher__btn[data-active=true]{background-color:var(--color-accent);color:#fff;font-weight:var(--weight-semibold)}.theme-toggle{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:var(--radius-md);color:var(--color-text-secondary);background:none;border:none;cursor:pointer;transition:color var(--duration-fast) var(--ease-out),background-color var(--duration-fast) var(--ease-out)}.theme-toggle:hover{color:var(--color-text-primary);background-color:var(--color-bg-secondary)}.dropdown{position:relative}.dropdown__panel{position:absolute;top:100%;right:0;margin-top:var(--space-2);background-color:var(--color-bg-secondary);border-radius:var(--radius-md);padding:var(--space-4);display:flex;flex-direction:column;gap:var(--space-3);min-width:220px;z-index:10;box-shadow:var(--shadow-lg);animation:dropdown-enter var(--duration-normal) var(--ease-out)}.setting-row{display:flex;justify-content:space-between;align-items:center}.setting-label{color:var(--color-text-primary);font-size:var(--text-sm)}.setting-divider{border-top:1px solid var(--color-bg-tertiary);margin:var(--space-2) 0}.setting-divider__label{font-size:var(--text-xs);color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.05em;padding-top:var(--space-2)}.stats-hud{margin-bottom:var(--space-8);display:flex;gap:var(--space-8);color:var(--color-accent);font-size:var(--text-base);opacity:.8;justify-content:center}.stats-hud--zen{opacity:.4}.typing-area{font-family:var(--font-mono);font-size:var(--text-2xl);line-height:1.6;max-width:900px;margin:0 auto;word-break:break-word;outline:none;cursor:text}.typing-area__hidden-input{opacity:0;position:absolute;top:0;left:0;height:100%;width:100%;z-index:-1;pointer-events:none}.typing-area__text{color:var(--color-text-muted);position:relative}.typing-area__hint{margin-top:var(--space-8);text-align:center;font-size:var(--text-sm);color:var(--color-text-muted);font-family:var(--font-sans)}.typing-area__hint--zen{opacity:.5}.typing-area__hint-key{color:var(--color-accent)}.char{position:relative}.text-correct{color:var(--color-text-primary)}.text-error{color:var(--color-error);text-decoration:underline wavy var(--color-error);text-underline-offset:4px}.text-pending{color:var(--color-text-muted)}.active-char{color:var(--color-accent);border-left:2px solid var(--color-accent);animation:caret-blink 1s infinite}.results{display:flex;flex-direction:column;align-items:center;gap:var(--space-8)}.results__wpm{font-size:var(--text-3xl);font-weight:var(--weight-semibold);color:var(--color-accent);text-align:center}.results__accuracy{color:var(--color-text-secondary);font-size:var(--text-xl)}.modal-overlay{position:fixed;inset:0;background-color:var(--color-overlay);display:flex;align-items:center;justify-content:center;z-index:1000;padding:var(--space-4);animation:overlay-enter var(--duration-slow) var(--ease-out)}.modal{background-color:var(--color-bg-primary);border-radius:var(--radius-lg);max-width:900px;width:100%;max-height:90vh;overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--shadow-lg);animation:modal-enter var(--duration-slow) var(--ease-out)}.modal__header{display:flex;justify-content:space-between;align-items:center;padding:var(--space-6);border-bottom:1px solid var(--color-bg-tertiary)}.modal__title{font-size:var(--text-xl);font-weight:var(--weight-semibold);color:var(--color-text-primary);font-family:var(--font-sans)}.modal__close{background:none;border:none;color:var(--color-text-secondary);font-size:var(--text-xl);cursor:pointer;padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm);transition:color var(--duration-fast) var(--ease-out)}.modal__close:hover{color:var(--color-text-primary)}.modal__content{flex:1;overflow:auto;padding:var(--space-6)}.tabs{display:flex;gap:4px;padding:0 var(--space-6);border-bottom:1px solid var(--color-bg-tertiary);background-color:var(--color-bg-secondary)}.tab{padding:var(--space-4) var(--space-6);background:none;border:none;color:var(--color-text-secondary);font-size:var(--text-sm);font-weight:var(--weight-normal);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;transition:color var(--duration-fast) var(--ease-out),border-color var(--duration-fast) var(--ease-out)}.tab:hover{color:var(--color-text-primary)}.tab[data-active=true]{color:var(--color-accent);font-weight:var(--weight-semibold);border-bottom-color:var(--color-accent)}.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:var(--space-4)}.stat-box{text-align:center;padding:var(--space-4);background-color:var(--color-bg-tertiary);border-radius:var(--radius-md)}.stat-value{font-size:var(--text-xl);font-weight:var(--weight-semibold);color:var(--color-accent);font-family:var(--font-mono)}.stat-label{font-size:var(--text-xs);color:var(--color-text-secondary);margin-top:var(--space-1)}.data-list{list-style:none;padding:0;margin:0}.data-list__item{padding:var(--space-2) 0;border-bottom:1px solid var(--color-bg-tertiary);display:flex;justify-content:space-between;align-items:center;font-size:var(--text-sm)}.data-list__code{font-family:var(--font-mono);background-color:var(--color-bg-tertiary);padding:2px var(--space-2);border-radius:var(--radius-xs);color:var(--color-accent)}.suggestion{padding:var(--space-4);background-color:var(--color-bg-tertiary);border-radius:var(--radius-md);margin-bottom:var(--space-2);font-size:var(--text-sm);color:var(--color-text-primary);border-left:3px solid var(--color-accent)}.empty-state{text-align:center;padding:var(--space-12);color:var(--color-text-muted)}.empty-state__title{font-size:var(--text-lg);margin-bottom:var(--space-2)}.trend-section{display:flex;gap:var(--space-8);flex-wrap:wrap}.trend-label{font-size:var(--text-xs);color:var(--color-text-secondary);margin-bottom:var(--space-2)}.heatmap{display:flex;flex-direction:column;align-items:center;gap:4px;padding:var(--space-4);background-color:var(--color-bg-secondary);border-radius:var(--radius-lg);position:relative}.heatmap__row{display:flex;gap:4px}.heatmap__key{display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);font-family:var(--font-mono);font-weight:var(--weight-medium);color:#fff;text-shadow:0 1px 2px hsl(0 0% 0% / .3);cursor:pointer;transition:transform var(--duration-fast) var(--ease-out),box-shadow var(--duration-fast) var(--ease-out);-webkit-user-select:none;user-select:none}.heatmap__key:hover{transform:scale(1.1);box-shadow:var(--shadow-md)}.heatmap__tooltip{position:absolute;top:-40px;left:50%;transform:translate(-50%);background-color:var(--color-bg-primary);color:var(--color-text-primary);padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);font-size:var(--text-xs);font-family:var(--font-mono);white-space:nowrap;box-shadow:var(--shadow-md);z-index:10;pointer-events:none}.heatmap__legend{display:flex;align-items:center;gap:var(--space-4);margin-top:var(--space-4);font-size:var(--text-xs);color:var(--color-text-secondary)}.heatmap__legend-item{display:flex;align-items:center;gap:6px}.heatmap__legend-swatch{width:16px;height:16px;border-radius:var(--radius-xs)}.heatmap-toggle{display:flex;gap:4px;margin-bottom:var(--space-4)}.text-secondary{color:var(--color-text-secondary)}.text-muted{color:var(--color-text-muted)}.text-error-color{color:var(--color-error)}.text-success-color{color:var(--color-success)}.text-warning-color{color:var(--color-warning)}.text-accent{color:var(--color-accent)}@keyframes caret-blink{0%,to{border-color:var(--color-accent)}50%{border-color:transparent}}@keyframes dropdown-enter{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}@keyframes overlay-enter{0%{opacity:0}to{opacity:1}}@keyframes modal-enter{0%{opacity:0;transform:scale(.97) translateY(8px)}to{opacity:1;transform:scale(1) translateY(0)}}