:root{--bg:#121212;--panel:#1a1a1a;--key:#2c2c2c;--key-border:#3a3a3a;--key-pressed:#ff8a3d;--text:#e6e6e6;--text-dim:#9a9a9a;--accent:#ff8a3d;--mono:"SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace}body.light{--bg:#f5f5f5;--panel:#fff;--key:#eaeaea;--key-border:#d4d4d4;--key-pressed:#ff8a3d;--text:#1a1a1a;--text-dim:#6b6b6b;--accent:#d9600a}*{box-sizing:border-box}body{background:var(--bg);color:var(--text);margin:0;padding:24px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.page-header{max-width:1200px;margin:0 auto 24px}.page-header-row{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 12px;margin-bottom:4px;display:flex}.page-header h1{font-size:28px;font-family:var(--mono);margin:0}.header-links{gap:8px;display:flex}.header-link{font:12px var(--mono);color:var(--text-dim);border:1px solid var(--key-border);border-radius:6px;padding:4px 10px;text-decoration:none;transition:color .12s,border-color .12s}.header-link:hover{color:var(--text);border-color:var(--accent)}.subtitle{color:var(--text-dim);margin:0}.layout{grid-template-columns:5fr 2fr;align-items:center;gap:24px;max-width:1200px;margin:0 auto;display:grid}@media (width<=1024px){.layout{grid-template-columns:1fr}}.keyboard-column{flex-direction:column;align-items:center;gap:16px;min-width:0;display:flex}.demo-hint{color:var(--text-dim);margin:0;font-size:13px}.mobile-note{color:var(--text-dim);background:var(--panel);border:1px solid var(--key-border);border-radius:6px;margin:0;padding:8px 12px;font-size:12px;display:none}.keyboard{background:var(--panel);border-radius:12px;flex-direction:column;gap:5px;max-width:100%;padding:16px;display:inline-flex;overflow-x:auto;box-shadow:0 10px 30px #0006}.kb-row{gap:5px;display:flex}.key{background:var(--key);min-width:40px;height:42px;color:var(--text-dim);font:12px/1 var(--mono);border:1px solid var(--key-border);-webkit-user-select:none;user-select:none;border-radius:6px;justify-content:center;align-items:center;padding:0 8px;transition:background 80ms,color 80ms,box-shadow 80ms;display:flex}.key[data-width="1.5"]{min-width:60px}.key[data-width="2"]{min-width:80px}.key[data-width=space]{flex:1}.key.pressed{background:var(--key-pressed);color:#1a1a1a;border-color:var(--key-pressed);font-weight:700;box-shadow:0 0 16px #ff8a3d99}.key--capslock{flex-direction:column;gap:3px}.caps-lock-dot{background:var(--key-border);border-radius:50%;width:5px;height:5px;transition:background .12s}.caps-lock-dot.active{background:var(--key-pressed);box-shadow:0 0 6px #ff8a3db3}.combo-readout{align-items:center;gap:10px;display:flex}.combo-label{color:var(--text-dim);font-size:13px}#combo-text{font:18px/1 var(--mono);background:var(--panel);color:var(--accent);text-align:center;border-radius:6px;min-width:120px;padding:8px 14px}.sidebar{background:var(--panel);border-radius:12px;flex-direction:column;gap:20px;min-width:0;padding:20px;display:flex}.control{flex-direction:column;gap:8px;display:flex}.control-label{text-transform:uppercase;letter-spacing:.04em;color:var(--text-dim);font-size:12px}.control-label-row{justify-content:space-between;align-items:center;display:flex}.hint{color:var(--text-dim);font-size:11px}.control-desc{color:var(--text-dim);margin:0;font-size:11px;line-height:1.5}.control-desc code{font:11px var(--mono);color:var(--text)}.segmented{border:1px solid var(--key-border);border-radius:6px;width:fit-content;display:inline-flex;overflow:hidden}.segmented button{color:var(--text-dim);font:12px var(--mono);cursor:pointer;background:0 0;border:none;padding:6px 14px}.segmented button.active{background:var(--accent);color:#1a1a1a;font-weight:700}.checkbox-row{cursor:pointer;align-items:center;gap:8px;font-size:13px;display:flex}#test-input{background:var(--key);border:1px solid var(--key-border);color:var(--text);border-radius:6px;padding:8px 10px;font-size:13px}.shortcuts-list{flex-direction:column;gap:4px;margin:0;padding:0;list-style:none;transition:opacity .15s;display:flex}#shortcuts-list.paused{opacity:.35}#shortcuts-hint.paused{color:var(--accent)}.shortcuts-list li{border-radius:6px;justify-content:space-between;gap:12px;padding:6px 8px;font-size:13px;transition:background .15s;display:flex}.shortcuts-list li.flash{background:#ff8a3d40}.shortcuts-list kbd{font:12px var(--mono);color:var(--accent)}.shortcut-combos kbd{margin:0 2px}.shortcuts-list span{color:var(--text-dim)}kbd{font-family:var(--mono)}.fireworks-canvas{pointer-events:none;z-index:5;position:fixed;inset:0}.overlay{z-index:10;background:#000000b3;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.overlay[hidden]{display:none}.overlay-panel{background:var(--panel);border-radius:12px;width:min(420px,90vw);max-height:80vh;padding:24px;overflow-y:auto}.overlay-header{justify-content:space-between;align-items:center;margin-bottom:16px;display:flex}.overlay-header h2{margin:0;font-size:16px}#overlay-close{color:var(--text-dim);cursor:pointer;background:0 0;border:none;font-size:20px;line-height:1}.overlay-hint{color:var(--text-dim);margin:16px 0 0;font-size:12px}.overlay-hint code{font-family:var(--mono);color:var(--accent)}.features{background:var(--panel);border-radius:12px;max-width:1200px;margin:24px auto 0;padding:20px 24px}.features h2{text-transform:uppercase;letter-spacing:.04em;color:var(--text-dim);margin:0 0 14px;font-size:12px}.features-list{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px 24px;margin:0;padding:0;list-style:none;display:grid}.features-list li{color:var(--text);align-items:baseline;gap:10px;font-size:13px;display:flex}.features-list code{font:12px var(--mono);color:var(--accent)}.feature-icon{flex:none}.game-section{background:var(--panel);border-radius:12px;max-width:1200px;margin:24px auto 0;padding:20px 24px}.game-section-header{justify-content:space-between;align-items:center;margin-bottom:8px;display:flex}.game-section-header h2{text-transform:uppercase;letter-spacing:.04em;color:var(--text-dim);margin:0;font-size:12px}.game-hint{color:var(--text-dim);margin:0 0 16px;font-size:13px}.game-hint kbd,.game-hint code{font:12px var(--mono);color:var(--accent)}.game-arena{background:var(--bg);border:1px solid var(--key-border);border-radius:8px;height:200px;position:relative;overflow:hidden}.game-character-position{will-change:transform;width:32px;height:32px;position:absolute;bottom:16px;left:0}.game-character-facing{width:100%;height:100%;transition:transform 80ms}.game-character{border-radius:8px;justify-content:center;align-items:center;width:100%;height:100%;font-size:26px;line-height:1;transition:box-shadow .12s;display:flex}@keyframes character-jump{0%{transform:translateY(0)}45%{transform:translateY(-56px)}to{transform:translateY(0)}}.game-character.jumping{animation:.48s ease-out character-jump}.game-character.ducking{transform-origin:bottom;transform:scaleY(.55)}.game-character.dashing{box-shadow:0 0 0 4px #ff8a3d59}.game-toasts{pointer-events:none;gap:8px;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.game-toast{font:18px var(--mono);color:var(--text);white-space:nowrap;opacity:1;background:#0000008c;border-radius:6px;padding:4px 12px;font-weight:700;transition:transform .5s,opacity .5s}.game-toast.fading{opacity:0;transform:translateY(-32px)}.code-sample{background:var(--panel);border-radius:12px;max-width:1200px;margin:24px auto 0;padding:20px 24px}.code-sample-header{justify-content:space-between;align-items:center;margin-bottom:12px;display:flex}.code-sample-header h2{text-transform:uppercase;letter-spacing:.04em;color:var(--text-dim);margin:0;font-size:12px}.copy-button{border:1px solid var(--key-border);color:var(--text-dim);font:12px var(--mono);cursor:pointer;background:0 0;border-radius:6px;padding:6px 12px;transition:color .12s,border-color .12s}.copy-button:hover{color:var(--text);border-color:var(--accent)}.code-sample .segmented{margin-bottom:12px}.code-sample-controls{flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:12px;display:flex}.code-sample-controls .segmented{margin-bottom:0}.code-window{background:#1e1e1e;border:1px solid #333;border-radius:8px;overflow:hidden}.code-window-titlebar{background:#2d2d2d;border-bottom:1px solid #3a3a3a;align-items:center;gap:6px;padding:8px 12px;display:flex}.dot{border-radius:50%;width:10px;height:10px}.dot-red{background:#ff5f56}.dot-yellow{background:#ffbd2e}.dot-green{background:#27c93f}.code-window-filename{font:11px var(--mono);color:#8a8a8a;margin-left:6px}.code-window-body{margin:0;padding:14px 18px;overflow-x:auto}.code-window-body code{font:13px/1.6 var(--mono);color:#d4d4d4;white-space:pre;display:block}.code-window-body--terminal code:before{content:"$ ";color:#6a9955;-webkit-user-select:none;user-select:none}.code-window-body--numbered code{counter-reset:line}.code-window-body--numbered .code-line{padding-left:2.75em;display:block;position:relative}.code-window-body--numbered .code-line:before{counter-increment:line;content:counter(line);text-align:right;color:#5a5a5a;-webkit-user-select:none;user-select:none;width:2.25em;position:absolute;left:0}.tok-keyword,.tok-bool{color:#569cd6}.tok-type{color:#4ec9b0}.tok-var{color:#9cdcfe}.tok-func{color:#dcdcaa}.tok-string{color:#ce9178}.tok-comment{color:#6a9955;font-style:italic}.faq{background:var(--panel);border-radius:12px;max-width:1200px;margin:24px auto 0;padding:20px 24px}.faq h2{text-transform:uppercase;letter-spacing:.04em;color:var(--text-dim);margin:0 0 14px;font-size:12px}.faq details{border-top:1px solid var(--key-border);padding:12px 0}.faq details:first-of-type{border-top:none;padding-top:0}.faq summary{cursor:pointer;color:var(--text);font-size:14px;font-weight:600;list-style:none}.faq summary::-webkit-details-marker{display:none}.faq summary:before{content:"+";width:1em;color:var(--accent);display:inline-block}.faq details[open] summary:before{content:"−"}.faq details p{color:var(--text-dim);margin:10px 0 0 1em;font-size:13px;line-height:1.5}.faq code{font:12px var(--mono);color:var(--accent)}@media (width<=1024px){body{padding:16px}.mobile-note{display:block}.code-sample,.features,.faq{padding:16px}.hint,.control-desc{font-size:13px}.features-list li{font-size:15px}.shortcuts-list li,.code-window-body code{font-size:14px}.header-link,.copy-button,.segmented button{font-size:13px}}@media (width<=480px){.page-header h1{font-size:22px}.keyboard{border-radius:8px;gap:4px;padding:10px}.kb-row{gap:4px}.key{border-radius:4px;min-width:26px;height:32px;padding:0 4px;font-size:10px}.key[data-width="1.5"]{min-width:40px}.key[data-width="2"]{min-width:52px}#combo-text{min-width:0;font-size:15px}}