*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--color-bg:#0d1b2a;--color-surface:#1a2d42;--color-surface2:#233347;--color-accent:#6c63ff;--color-accent2:#a78bfa;--color-text:#e8eaf0;--color-text-muted:#8892a4;--color-success:#4caf8a;--color-error:#e05c5c;--color-border:#2a3f5a;font-family:Inter,system-ui,-apple-system,sans-serif}[data-theme=light]{--color-bg:#f0f4f8;--color-surface:#fff;--color-surface2:#e8eef5;--color-accent:#5a52e0;--color-accent2:#7c6fe8;--color-text:#1a2d42;--color-text-muted:#5a6b7e;--color-success:#2e8b5a;--color-error:#c0392b;--color-border:#c8d6e5}html,body,#root{background:var(--color-bg);height:100%;color:var(--color-text);-webkit-tap-highlight-color:transparent}@keyframes fadeInFace{0%{opacity:0;filter:blur(4px);transform:scale(.88)}to{opacity:1;filter:blur();transform:scale(1)}}@keyframes pulseFix{0%,to{opacity:.35;transform:scale(.92)}50%{opacity:1;transform:scale(1.08)}}@keyframes floatIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes gradientShift{0%{background-position:0%}50%{background-position:100%}to{background-position:0%}}@keyframes orbFloat{0%,to{transform:translateY(0)translate(0)}33%{transform:translateY(-18px)translate(8px)}66%{transform:translateY(10px)translate(-6px)}}@keyframes feedbackPop{0%{opacity:0;transform:translate(-50%)scale(.6)}60%{transform:translate(-50%)scale(1.1)}to{opacity:1;transform:translate(-50%)scale(1)}}@keyframes shrinkBar{0%{width:100%}to{width:0%}}@keyframes countdownZoom{0%{opacity:0;transform:scale(1.8)}30%{opacity:1;transform:scale(1)}80%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.6)}}@keyframes keyPulse{0%{box-shadow:0 0 #6c63ff99}70%{box-shadow:0 0 0 12px #6c63ff00}to{box-shadow:0 0 #6c63ff00}}@keyframes feedbackSlide{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes tapRipple{0%{box-shadow:0 0 #6c63ff80}to{box-shadow:0 0 0 20px #6c63ff00}}.face-appear{animation:.22s cubic-bezier(.16,1,.3,1) forwards fadeInFace}.fix-pulse{animation:1.4s ease-in-out infinite pulseFix}.float-in{animation:.45s ease-out both floatIn}.float-in-d1{animation:.45s ease-out 80ms both floatIn}.float-in-d2{animation:.45s ease-out .16s both floatIn}.feedback-pop{animation:.2s cubic-bezier(.34,1.56,.64,1) forwards feedbackPop}.response-timer-bar{background:linear-gradient(90deg, var(--color-accent), var(--color-accent2));border-radius:3px;height:100%;animation:2s linear forwards shrinkBar}.countdown-num{animation:.9s ease-out both countdownZoom}.key-active-pulse{animation:1.2s ease-out infinite keyPulse}.feedback-slide{animation:.2s ease-out both feedbackSlide}.tap-pressed{animation:.3s ease-out forwards tapRipple}.btn-primary{background:linear-gradient(135deg, var(--color-accent), var(--color-accent2));color:#fff;cursor:pointer;letter-spacing:.01em;-webkit-tap-highlight-color:transparent;background-size:200% 200%;border:none;border-radius:12px;padding:15px 44px;font-size:17px;font-weight:600;transition:transform .15s,box-shadow .15s,filter .15s;box-shadow:0 4px 24px #6c63ff59}.btn-primary:hover{filter:brightness(1.1);transform:translateY(-2px);box-shadow:0 8px 32px #6c63ff80}.btn-primary:active{filter:brightness(.95);transform:translateY(0)}.btn-secondary{color:var(--color-text);cursor:pointer;-webkit-tap-highlight-color:transparent;background:0 0;border:2px solid #2a3f5a;border-radius:14px;flex-direction:column;align-items:center;gap:12px;padding:28px 20px;font-size:17px;font-weight:600;transition:border-color .15s,background .15s,transform .15s,box-shadow .15s;display:flex}.btn-secondary:hover{border-color:var(--color-accent);background:#6c63ff14;transform:translateY(-3px);box-shadow:0 6px 24px #6c63ff33}@media (width<=480px){.btn-primary{padding:13px 28px;font-size:15px}.btn-secondary{padding:20px 14px;font-size:15px}}