.keypad{display:flex;flex-direction:column;gap:6px;width:100%;max-width:400px}.keypad-row{display:flex;gap:6px;justify-content:center}.keypad-btn{flex:1;min-width:48px;min-height:56px;max-width:72px;border:none;border-radius:var(--radius);background:var(--bg-elevated);color:var(--text-primary);font-family:var(--font-mono);font-size:22px;font-weight:700;cursor:pointer;transition:transform var(--transition-fast),background var(--transition-fast);-webkit-tap-highlight-color:transparent;touch-action:manipulation}.keypad-btn:active:not(.keypad-btn--disabled){transform:scale(.93);background:var(--accent)}.keypad-btn--disabled{opacity:.35;cursor:default}:root{--bg: #0a0a0f;--bg-surface: #13131f;--bg-elevated: #1c1c2e;--text-primary: #eeeef0;--text-secondary: #6e6e82;--text-dim: #3e3e52;--accent: #5b8cff;--accent-glow: rgba(91, 140, 255, .25);--success: #22c55e;--success-glow: rgba(34, 197, 94, .3);--danger: #ef4444;--danger-glow: rgba(239, 68, 68, .3);--warning: #eab308;--font-mono: "JetBrains Mono", "Fira Code", "SF Mono", ui-monospace, monospace;--font-display: "Outfit", -apple-system, BlinkMacSystemFont, sans-serif;--radius: 12px;--transition-fast: 80ms ease;--transition-normal: .18s ease}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html,body,#app{height:100%;height:100dvh}body{font-family:var(--font-display);background-color:var(--bg);background-image:var(--bg-image, none);background-repeat:repeat;background-size:auto;color:var(--text-primary);overflow:hidden;touch-action:manipulation;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;-webkit-font-smoothing:antialiased}.screen{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100dvh;padding:24px;position:relative;background:#0a0a0fbf}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes scale-in{0%{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}@keyframes pop{0%{transform:scale(1)}50%{transform:scale(1.15)}to{transform:scale(1)}}@keyframes slide-up{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}.fade-in{animation:fade-in .2s ease forwards}.scale-in{animation:scale-in .25s cubic-bezier(.34,1.56,.64,1) forwards}.answer-display{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;max-width:320px}.answer-slot{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;color:var(--text-dim);transition:transform var(--transition-fast),color var(--transition-fast)}.answer-slot--filled{color:var(--text-primary)}.answer-slot--pop{animation:pop .2s cubic-bezier(.34,1.56,.64,1)}.play-btn:active:not(:disabled){transform:scale(.96)}