:root{--km-accent: #6c5ce7;--km-accent-light: #a29bfe;--km-accent-glow: rgba(108, 92, 231, .3);--km-success: #00cec9;--km-success-glow: rgba(0, 206, 201, .25);--km-error: #ff6b6b;--km-error-glow: rgba(255, 107, 107, .25);--km-warning: #feca57;--km-streak: #fd79a8;--km-bg: #0f1117;--km-bg-surface: #181a24;--km-bg-elevated: #1e2030;--km-bg-hover: #262840;--km-border: #2a2d3e;--km-border-subtle: #20223a;--km-text: #e2e4f0;--km-text-muted: #8b8ea8;--km-text-dimmed: #5a5d7a;--km-mono: "SF Mono", "Fira Code", "Cascadia Code", "JetBrains Mono", "Consolas", monospace;--km-radius: 10px;--km-radius-sm: 6px;--km-radius-lg: 16px;--km-transition: .18s ease}:root:not([data-theme=light]){--pico-background-color: var(--km-bg);--pico-color: var(--km-text);--pico-card-background-color: var(--km-bg-surface);--pico-muted-border-color: var(--km-border);--pico-primary: var(--km-accent);--pico-primary-hover: var(--km-accent-light);--pico-primary-background: var(--km-accent);--pico-primary-inverse: #fff;--pico-ins-color: var(--km-success);--pico-del-color: var(--km-error);color-scheme:dark}[data-theme=light]{--km-bg: #f5f6fa;--km-bg-surface: #ffffff;--km-bg-elevated: #f0f1f5;--km-bg-hover: #e8e9f0;--km-border: #dcdde4;--km-border-subtle: #e8e9f0;--km-text: #1a1c2e;--km-text-muted: #6b6e85;--km-text-dimmed: #9b9eb5;--km-accent-glow: rgba(108, 92, 231, .12);--km-success-glow: rgba(0, 206, 201, .12);--km-error-glow: rgba(255, 107, 107, .12);--pico-background-color: var(--km-bg);--pico-color: var(--km-text);--pico-card-background-color: var(--km-bg-surface);--pico-muted-border-color: var(--km-border)}html{scroll-behavior:smooth}body{color:var(--km-text);background:var(--km-bg);font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;-webkit-font-smoothing:antialiased}h1,h2,h3,h4,h5,h6{font-weight:700;letter-spacing:-.02em;color:var(--km-text)}code,kbd,pre,samp{font-family:var(--km-mono)}a{color:var(--km-accent-light);text-decoration:none;transition:color var(--km-transition)}a:hover{color:var(--km-accent)}header.container{position:sticky;top:0;z-index:100;background:var(--km-bg);padding-top:.6rem;padding-bottom:.6rem}.nav-pill{display:flex;align-items:center;gap:2px;background:var(--km-bg-elevated);border:1px solid var(--km-border);border-radius:100px;padding:4px;position:relative}.nav-brand{display:flex;align-items:center;gap:.4rem;padding:.4rem .85rem;font-weight:800;font-size:.95rem;letter-spacing:-.01em;color:var(--km-text)!important;text-decoration:none;border-radius:100px;white-space:nowrap}.nav-links{display:flex;align-items:center;gap:2px;position:absolute;left:50%;transform:translate(-50%)}.nav-links a{padding:.4rem .85rem;border-radius:100px;font-size:.85rem;font-weight:600;color:var(--km-text-muted);transition:all var(--km-transition);white-space:nowrap}.nav-links a:hover{color:var(--km-text)}.nav-links a.active{background:var(--km-accent);color:#fff;box-shadow:0 2px 8px var(--km-accent-glow)}.nav-pill #themeToggle{margin:.4rem .6rem .4rem auto}#themeToggle{padding:.35rem .6rem;cursor:pointer;font-size:1.1rem;border:1px solid var(--km-border);border-radius:var(--km-radius-sm);background:var(--km-bg-surface);color:var(--km-text-muted);transition:all var(--km-transition);line-height:1}#themeToggle:hover{background:var(--km-bg-hover);border-color:var(--km-accent);transform:scale(1.05)}footer.container{margin-top:3rem;padding:1.5rem 0;border-top:1px solid var(--km-border);text-align:center}footer .footer-content{color:var(--km-text-dimmed);font-size:.82rem;display:flex;align-items:center;justify-content:center;gap:.5rem}footer .footer-kbd{display:inline-flex;align-items:center;gap:.3rem}.page-section{padding-top:2rem;padding-bottom:2rem;scroll-margin-top:4rem}.page-section+.page-section{border-top:1px solid var(--km-border)}button,[role=button],input[type=submit]{border-radius:var(--km-radius)!important;font-weight:600;font-size:.9rem;letter-spacing:.01em;transition:all var(--km-transition)}[role=button]:not(.secondary):not(.outline),button:not(.secondary):not(.outline):not(#themeToggle){background:var(--km-accent);border-color:var(--km-accent);box-shadow:0 2px 12px var(--km-accent-glow)}[role=button]:not(.secondary):not(.outline):hover,button:not(.secondary):not(.outline):not(#themeToggle):hover{background:var(--km-accent-light);border-color:var(--km-accent-light);box-shadow:0 4px 20px var(--km-accent-glow);transform:translateY(-1px)}button.secondary,[role=button].secondary{border-color:var(--km-border)!important;color:var(--km-text-muted)!important;background:var(--km-bg-surface)!important}button.secondary:hover,[role=button].secondary:hover{border-color:var(--km-accent)!important;color:var(--km-accent-light)!important;background:var(--km-bg-elevated)!important}article{border-radius:var(--km-radius-lg)!important;border:1px solid var(--km-border)!important;background:var(--km-bg-surface)!important;padding:1.75rem!important}.hero{text-align:center;padding:3rem 0 2rem}.hero h1{font-size:2.8rem;font-weight:800;letter-spacing:-.04em;margin-bottom:.5rem;background:linear-gradient(135deg,var(--km-accent-light) 0%,var(--km-success) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.hero .tagline{font-size:1.15rem;color:var(--km-text-muted);max-width:930px;margin:0 auto 1.25rem;line-height:1.6}.browser-badge{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem 1.25rem;background:var(--km-bg-surface);border:1px solid var(--km-border);border-radius:100px;font-size:.88rem;color:var(--km-text-muted);margin:0 auto 2rem;max-width:max-content}.browser-badge .badge-icon{font-size:1.1rem}.hero-stats{display:flex;justify-content:center;gap:2rem;margin-bottom:2.5rem;flex-wrap:wrap}.hero-stat{display:flex;flex-direction:column;align-items:center;gap:.2rem;padding:.75rem 1.25rem;background:var(--km-bg-surface);border:1px solid var(--km-border);border-radius:var(--km-radius)}.hero-stat .stat-value{font-size:1.5rem;font-weight:800;color:var(--km-accent-light);font-family:var(--km-mono)}.hero-stat .stat-label{font-size:.75rem;color:var(--km-text-dimmed);text-transform:uppercase;letter-spacing:.08em;font-weight:600}.feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.25rem;margin-top:1rem}.feature-card{position:relative;overflow:hidden;transition:all var(--km-transition)}.feature-card:hover{border-color:var(--km-accent)!important;transform:translateY(-2px);box-shadow:0 8px 30px var(--km-accent-glow)}.feature-card .card-icon{font-size:2rem;margin-bottom:.75rem;display:block}.feature-card h3{font-size:1.15rem;margin-bottom:.5rem}.feature-card p{font-size:.9rem;color:var(--km-text-muted);line-height:1.55;margin-bottom:1.25rem}.feature-card .card-cta{display:inline-flex;align-items:center;gap:.4rem;font-weight:600;font-size:.88rem;color:var(--km-accent-light);transition:gap var(--km-transition)}.feature-card:hover .card-cta{gap:.7rem}.game-stats{display:flex;gap:.75rem;flex-wrap:wrap;margin:1.25rem 0}.stat-pill{display:flex;align-items:center;gap:.5rem;padding:.6rem 1rem;background:var(--km-bg-elevated);border:1px solid var(--km-border);border-radius:100px;font-size:.85rem;font-weight:500;color:var(--km-text-muted);transition:all var(--km-transition)}.stat-pill strong{color:var(--km-text);font-family:var(--km-mono);font-size:.95rem}.stat-pill.streak-active{border-color:var(--km-streak);background:#fd79a81a;animation:pulse-streak 1.5s ease infinite}.stat-pill.streak-active strong{color:var(--km-streak)}.stat-pill.accuracy-high strong{color:var(--km-success)}.stat-pill.accuracy-low strong{color:var(--km-error)}@keyframes pulse-streak{0%,to{box-shadow:0 0 #fd79a84d}50%{box-shadow:0 0 0 6px #fd79a800}}.target-display{min-height:100px;padding:1.5rem;background:var(--km-bg-elevated);border:2px solid var(--km-border);border-radius:var(--km-radius-lg);margin-bottom:1rem;line-height:1.9;font-family:var(--km-mono);font-size:1.1rem;position:relative;transition:border-color var(--km-transition)}.target-display.game-active{border-color:var(--km-accent);box-shadow:0 0 0 3px var(--km-accent-glow)}.target-display pre{margin:0;background:transparent;padding:0}.target-display code{font-family:var(--km-mono);font-size:1.1rem;line-height:1.9;background:transparent;padding:0;color:inherit}.target-display .placeholder-text{color:var(--km-text-dimmed);font-style:italic;font-family:inherit;font-size:1rem}.char-correct{color:var(--km-success);background:var(--km-success-glow);border-radius:2px}.char-error{color:var(--km-error);background:var(--km-error-glow);border-radius:2px;text-decoration:underline wavy var(--km-error)}.char-cursor{background:var(--km-accent);color:#fff;border-radius:2px;animation:blink-cursor 1s step-end infinite}.char-pending{color:var(--km-text-dimmed)}@keyframes blink-cursor{0%,to{opacity:1}50%{opacity:.6}}.game-input{font-family:var(--km-mono)!important;font-size:1.05rem!important;line-height:1.6;resize:none;border-radius:var(--km-radius)!important;border:2px solid var(--km-border)!important;background:var(--km-bg-elevated)!important;color:var(--km-text)!important;transition:all var(--km-transition);caret-color:var(--km-accent)}.game-input:focus{border-color:var(--km-accent)!important;box-shadow:0 0 0 3px var(--km-accent-glow)!important;outline:none}.game-input:disabled{opacity:.4;cursor:not-allowed}.game-controls{display:flex;gap:.75rem;margin-top:1rem;flex-wrap:wrap;align-items:center}.game-controls .hint{margin-left:auto;font-size:.8rem;color:var(--km-text-dimmed)}.game-controls .hint kbd{font-size:.75rem;padding:.15rem .4rem}.mode-switcher{display:inline-flex;background:var(--km-bg-elevated);border:1px solid var(--km-border);border-radius:100px;padding:4px;gap:2px;margin-bottom:1.5rem}.mode-switcher a{padding:.5rem 1.25rem;border-radius:100px;font-size:.88rem;font-weight:600;color:var(--km-text-muted);text-decoration:none;transition:all var(--km-transition);display:inline-flex;align-items:center;gap:.4rem}.mode-switcher a:hover{color:var(--km-text)}.mode-switcher a.active{background:var(--km-accent);color:#fff;box-shadow:0 2px 8px var(--km-accent-glow)}.results-screen{text-align:center;padding:2rem 0}.results-screen h3{font-size:1.5rem;margin-bottom:.5rem}.results-screen .results-emoji{font-size:3rem;display:block;margin-bottom:.5rem;animation:bounce-in .5s cubic-bezier(.68,-.55,.265,1.55)}@keyframes bounce-in{0%{transform:scale(0);opacity:0}60%{transform:scale(1.2)}to{transform:scale(1);opacity:1}}.results-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1rem;margin:1.5rem 0}.result-card{padding:1.25rem 1rem!important;text-align:center;border:1px solid var(--km-border)!important;background:var(--km-bg-surface)!important;border-radius:var(--km-radius)!important}.result-card .result-label{font-size:.72rem;color:var(--km-text-dimmed);text-transform:uppercase;letter-spacing:.08em;font-weight:600;margin-bottom:.3rem}.result-card .result-value{font-size:1.8rem;font-weight:800;font-family:var(--km-mono);color:var(--km-accent-light);margin:0}.result-card .result-value.highlight-success{color:var(--km-success)}.result-card .result-value.highlight-streak{color:var(--km-streak)}.results-screen .personal-best{display:inline-flex;align-items:center;gap:.4rem;padding:.4rem 1rem;background:var(--km-warning);color:#1a1c2e;border-radius:100px;font-size:.82rem;font-weight:700;margin-bottom:1rem;animation:bounce-in .6s cubic-bezier(.68,-.55,.265,1.55) .3s both}kbd{padding:.2rem .55rem;border:1px solid var(--km-border);border-radius:var(--km-radius-sm);background:var(--km-bg-elevated);font-family:var(--km-mono);font-size:.82em;color:var(--km-accent-light);white-space:nowrap;box-shadow:0 2px 0 var(--km-border);font-weight:500}.library-header{margin-bottom:1.5rem}.library-header h1{font-size:1.8rem;margin-bottom:.25rem}.library-header p{color:var(--km-text-muted);margin-bottom:0}.layout-switcher{display:inline-flex;background:var(--km-bg-elevated);border:1px solid var(--km-border);border-radius:100px;padding:4px;gap:2px;margin-bottom:1.25rem;flex-wrap:wrap}.layout-switcher label{padding:.45rem 1rem;border-radius:100px;font-size:.85rem;font-weight:600;color:var(--km-text-muted);cursor:pointer;transition:all var(--km-transition);display:inline-flex;align-items:center;gap:.3rem;margin:0}.layout-switcher label:hover{color:var(--km-text)}.layout-switcher input[type=radio]{display:none}.layout-switcher input[type=radio]:checked+label{background:var(--km-accent);color:#fff;box-shadow:0 2px 8px var(--km-accent-glow)}.search-wrapper{position:relative;margin-bottom:1.25rem}.search-wrapper .search-icon{position:absolute;left:1rem;top:40%;transform:translateY(-50%);color:var(--km-text-dimmed);font-size:.95rem;pointer-events:none}.search-wrapper input[type=search]{padding-left:2.5rem!important;border-radius:100px!important;border:1px solid var(--km-border)!important;background:var(--km-bg-elevated)!important;color:var(--km-text)!important;font-size:.92rem;height:2.75rem}.search-wrapper input[type=search]:focus{border-color:var(--km-accent)!important;box-shadow:0 0 0 3px var(--km-accent-glow)!important}.search-wrapper .result-count{position:absolute;right:1rem;top:40%;transform:translateY(-50%);font-size:.78rem;color:var(--km-text-dimmed);font-weight:500}.command-table{width:100%;border-collapse:separate;border-spacing:0;font-size:.9rem}.command-table thead th{font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;color:var(--km-text-dimmed);font-weight:600;padding:.75rem 1rem;border-bottom:2px solid var(--km-border);background:var(--km-bg-elevated);position:sticky;top:0}.command-table thead th:first-child{border-radius:var(--km-radius-sm) 0 0 0}.command-table thead th:last-child{border-radius:0 var(--km-radius-sm) 0 0}.command-table tbody td{padding:.7rem 1rem;border-bottom:1px solid var(--km-border-subtle);vertical-align:middle;transition:background var(--km-transition)}.command-table tbody tr:hover td{background:var(--km-bg-hover)}.command-table tbody tr:last-child td{border-bottom:none}.command-table .cmd-key{white-space:nowrap}.command-table .cmd-action{font-weight:600;color:var(--km-text)}.command-table .cmd-scenario{color:var(--km-text-muted);font-size:.85rem}.empty-state{text-align:center;padding:3rem 1rem;color:var(--km-text-dimmed)}.empty-state .empty-icon{font-size:2.5rem;display:block;margin-bottom:.5rem}.game-header h1{font-size:1.6rem;margin-bottom:.2rem}.game-header p{color:var(--km-text-muted);margin-bottom:0;font-size:.92rem}.xp-bar-wrapper{margin:1rem 0 .5rem;display:flex;align-items:center;gap:.75rem}.xp-bar{flex:1;height:6px;background:var(--km-bg-elevated);border-radius:100px;overflow:hidden;border:1px solid var(--km-border)}.xp-bar-fill{height:100%;background:linear-gradient(90deg,var(--km-accent) 0%,var(--km-success) 100%);border-radius:100px;transition:width .5s cubic-bezier(.22,1,.36,1);min-width:0}.xp-label{font-size:.75rem;color:var(--km-text-dimmed);font-weight:600;white-space:nowrap;font-family:var(--km-mono)}.level-badge{display:inline-flex;align-items:center;gap:.3rem;padding:.2rem .6rem;background:var(--km-accent-glow);border:1px solid var(--km-accent);border-radius:100px;font-size:.75rem;font-weight:700;color:var(--km-accent-light);font-family:var(--km-mono)}.streak-toast{position:fixed;top:1.5rem;left:50%;transform:translate(-50%) translateY(-20px);background:var(--km-bg-surface);border:1px solid var(--km-streak);border-radius:var(--km-radius);padding:.5rem 1.25rem;font-weight:700;font-size:.92rem;color:var(--km-streak);box-shadow:0 4px 20px #fd79a84d;z-index:1000;opacity:0;pointer-events:none;transition:all .3s cubic-bezier(.22,1,.36,1)}.streak-toast.show{opacity:1;transform:translate(-50%) translateY(0)}@keyframes flash-success{0%{border-color:var(--km-border)}20%{border-color:var(--km-success);box-shadow:0 0 20px var(--km-success-glow)}to{border-color:var(--km-border);box-shadow:none}}.flash-success{animation:flash-success .6s ease}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-4px)}40%{transform:translate(4px)}60%{transform:translate(-3px)}80%{transform:translate(2px)}}.shake{animation:shake .4s ease}.pb-display{display:flex;gap:1rem;flex-wrap:wrap;margin-top:.5rem;padding-top:.75rem;border-top:1px solid var(--km-border)}.pb-item{display:flex;align-items:center;gap:.4rem;font-size:.78rem;color:var(--km-text-dimmed)}.pb-item strong{color:var(--km-warning);font-family:var(--km-mono)}@media(max-width:992px){.hero h1{font-size:2.4rem}.hero .tagline{font-size:1.05rem}.feature-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem}.target-display{padding:1.25rem}.command-table thead th,.command-table tbody td{padding:.6rem .75rem}}@media(max-width:768px){.hero{padding:2rem 0 1.5rem}.hero h1{font-size:2rem}.hero .tagline{font-size:.98rem;max-width:90%}.browser-badge{font-size:.82rem;padding:.4rem 1rem;max-width:90%;text-align:center;flex-wrap:wrap;justify-content:center}.hero-stats{gap:.75rem}.hero-stat{padding:.5rem .75rem}.hero-stat .stat-value{font-size:1.1rem}.feature-grid{grid-template-columns:1fr}.game-stats{gap:.5rem}.stat-pill{padding:.45rem .75rem;font-size:.8rem}.target-display{padding:1rem;min-height:80px;font-size:1rem}.target-display code{font-size:.95rem;word-break:break-all}.game-input{font-size:.95rem!important}.game-controls{flex-direction:column}.game-controls button{width:100%}.game-controls .hint{margin-left:0;text-align:center}.mode-switcher,.layout-switcher{width:100%;justify-content:center}.mode-switcher a{flex:1;justify-content:center;text-align:center}.layout-switcher label{flex:1;justify-content:center;text-align:center;padding:.4rem .5rem;font-size:.8rem}.results-grid{grid-template-columns:repeat(2,1fr)}.result-card .result-value{font-size:1.4rem}.library-header h1{font-size:1.5rem}.game-header h1{font-size:1.35rem}.xp-bar-wrapper{gap:.5rem}.xp-label{font-size:.7rem}.command-table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}article{padding:1.25rem!important}header.container nav{padding:.5rem 0}.nav-links a{padding:.35rem .6rem;font-size:.82rem}.nav-brand{font-size:.95rem}footer .footer-content{flex-wrap:wrap;gap:.3rem;font-size:.78rem}}@media(max-width:480px){.hero{padding:1.5rem 0 1rem}.hero h1{font-size:1.65rem}.hero .tagline{font-size:.9rem;max-width:100%}.browser-badge{font-size:.78rem;padding:.35rem .8rem;border-radius:var(--km-radius);max-width:100%}.hero-stats{gap:.5rem}.hero-stat{padding:.4rem .6rem;flex:1;min-width:0}.hero-stat .stat-value{font-size:1rem}.hero-stat .stat-label{font-size:.65rem}.feature-card .card-icon{font-size:1.5rem;margin-bottom:.5rem}.feature-card h3{font-size:1.05rem}.feature-card p{font-size:.85rem}.game-stats{gap:.35rem}.stat-pill{padding:.35rem .55rem;font-size:.75rem;gap:.3rem}.stat-pill strong{font-size:.82rem}.target-display{padding:.75rem;min-height:60px;border-radius:var(--km-radius)}.target-display code{font-size:.85rem;line-height:1.7}.game-input{font-size:.88rem!important}.results-grid{grid-template-columns:1fr}.results-screen h3{font-size:1.2rem}.results-screen .results-emoji{font-size:2.2rem}.result-card .result-value{font-size:1.3rem}.pb-display{gap:.5rem}.pb-item{font-size:.72rem}.level-badge{font-size:.68rem;padding:.15rem .45rem}.search-wrapper input[type=search]{font-size:.85rem;height:2.5rem}article{padding:1rem!important;border-radius:var(--km-radius)!important}.game-header h1{font-size:1.2rem}.game-header p{font-size:.85rem}.library-header h1{font-size:1.3rem}.library-header p{font-size:.85rem}.mode-switcher a{padding:.4rem .75rem;font-size:.82rem}.nav-links a{padding:.3rem .45rem;font-size:.78rem}footer.container{margin-top:2rem;padding:1rem 0}.streak-toast{font-size:.82rem;padding:.4rem 1rem}}@media(max-width:360px){.hero h1{font-size:1.4rem}.nav-links a{padding:.25rem .35rem;font-size:.72rem}#themeToggle{padding:.25rem .45rem;font-size:.95rem}.mode-switcher{padding:3px}.mode-switcher a{padding:.35rem .5rem;font-size:.78rem}}