:root{color-scheme:light;--bg: radial-gradient(circle at 20% 20%, #2f3354, #151628 50%), #0d0f1a;--panel: rgba(255, 255, 255, .06);--panel-strong: rgba(255, 255, 255, .12);--accent: #7ae0ff;--accent-strong: #5bc0f8;--text: #e5e7f0;--muted: #a7afc7;--warn: #ffc861;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:var(--bg);color:var(--text)}*,*:before,*:after{box-sizing:border-box}body{margin:0;min-height:100vh;background:var(--bg)}#root{min-height:100vh}.app{display:flex;flex-direction:column;gap:24px;max-width:1100px;margin:0 auto;padding:32px 20px 48px}.hero{display:flex;align-items:center;justify-content:space-between;gap:16px}.brand{display:flex;align-items:baseline;gap:10px}.brand h1{margin:0;font-family:Righteous,Inter,system-ui,sans-serif;letter-spacing:.4px;font-size:clamp(28px,5vw,40px)}.brand .tagline{margin:0;color:var(--muted);font-size:15px}.pill{padding:8px 12px;border-radius:999px;background:var(--panel);border:1px solid var(--panel-strong);color:var(--text);font-size:14px;display:inline-flex;align-items:center;gap:8px}.controls{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}.control{background:var(--panel);border:1px solid var(--panel-strong);border-radius:12px;padding:14px 16px;display:flex;flex-direction:column;gap:8px}.control label{font-size:13px;color:var(--muted)}.select{background:#ffffff0d;border:1px solid var(--panel-strong);color:var(--text);padding:10px 12px;border-radius:10px;font-weight:600}.keyboard{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:14px}.key{position:relative;padding:16px;border-radius:14px;background:linear-gradient(145deg,rgba(255,255,255,.08),var(--panel));border:1px solid var(--panel-strong);cursor:pointer;transition:transform .12s ease,border-color .12s ease,box-shadow .12s ease;text-align:left}.key:hover{transform:translateY(-2px);border-color:var(--accent);box-shadow:0 12px 40px #00000040}.key:active{transform:translateY(0)}.key-label{font-size:14px;font-weight:700;letter-spacing:.2px}.key-desc{margin-top:6px;color:var(--muted);font-size:13px}.key-shortcut{position:absolute;top:10px;right:10px;font-size:11px;color:var(--accent);background:#5ac0f814;padding:4px 6px;border-radius:8px;border:1px solid rgba(90,192,248,.25)}.status{display:flex;gap:12px;flex-wrap:wrap}.status .pill{background:#ffffff0d;border-color:var(--panel-strong)}.warning{color:var(--warn)}.footer{color:var(--muted);font-size:13px}@media (max-width: 640px){.hero{flex-direction:column;align-items:flex-start}}