:root{--bg:#0a0a0f;--surface:#111118;--border:#1e1e2e;--text:#6b7280;--text-bright:#e2e8f0;--accent:#7c3aed;--accent-glow:#7c3aed66;--key-bg:#16161f;--key-active:#7c3aed;--key-active-glow:#7c3aed99;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;font:16px/150% system-ui,sans-serif}*,:before,:after{box-sizing:border-box}body{margin:0}#root{flex-direction:column;align-items:center;min-height:100svh;display:flex}.app{flex-direction:column;align-items:center;gap:32px;width:100%;max-width:820px;padding:40px 24px 60px;display:flex}header{text-align:center}header h1{letter-spacing:.3em;color:var(--text-bright);text-transform:lowercase;margin:0;font-size:72px;font-weight:200}.tagline{letter-spacing:.15em;color:var(--text);text-transform:lowercase;margin-top:6px;font-size:13px}.controls{gap:24px;display:flex}.controls label{flex-direction:column;gap:6px;display:flex}.controls span{letter-spacing:.12em;text-transform:uppercase;color:var(--text);font-size:11px}.controls select{background:var(--surface);border:1px solid var(--border);color:var(--text-bright);cursor:pointer;appearance:none;border-radius:6px;outline:none;min-width:120px;padding:8px 12px;font-size:14px;transition:border-color .2s}.controls select:focus{border-color:var(--accent)}.start-btn{border:1px solid var(--accent);color:var(--text-bright);letter-spacing:.2em;text-transform:lowercase;cursor:pointer;background:0 0;border-radius:4px;margin-top:40px;padding:16px 48px;font-size:14px;transition:background .2s,box-shadow .2s}.start-btn:hover{background:var(--accent-glow);box-shadow:0 0 24px var(--accent-glow)}.typed-display{letter-spacing:.15em;color:var(--text-bright);text-transform:lowercase;min-height:36px;font-size:22px;font-weight:200}.placeholder{color:var(--text);font-size:14px}.keyboard{flex-direction:column;align-items:center;gap:8px;width:100%;display:flex}.key-row{gap:6px;display:flex}.key{background:var(--key-bg);border:1px solid var(--border);-webkit-user-select:none;user-select:none;border-radius:6px;flex-direction:column;justify-content:center;align-items:center;gap:3px;width:60px;height:60px;transition:background 80ms,box-shadow 80ms,border-color 80ms;display:flex}.key.active{background:var(--key-active);border-color:var(--key-active);box-shadow:0 0 16px var(--key-active-glow)}.key-letter{color:var(--text-bright);font-size:13px;font-weight:500;line-height:1}.key-note{color:var(--text);letter-spacing:.05em;font-size:9px}.key.active .key-note{color:#ffffffb3}@media (width<=640px){header h1{font-size:48px}.key{width:34px;height:44px}.key-letter{font-size:11px}.key-note{display:none}}