@import "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@300;400;500;700&display=swap";
:root{--bg:#f5f4ff;--bg-2:#ededfb;--bg-3:#e4e2f9;--surface:#fff;--surface-2:#f0effe;--border:#d4d0f5;--accent:#5b4fd4;--accent-2:#7c6fe0;--accent-glow:#5b4fd425;--text:#18172b;--text-dim:#5a5880;--text-muted:#b0aed6;--correct:#16a34a;--incorrect:#dc2626;--cursor-color:#5b4fd4;--gold:#b45309;--combo-1:#2563eb;--combo-2:#16a34a;--combo-3:#d97706;--combo-4:#dc2626;--glow-sm:0 0 8px #5b4fd418;--glow-md:0 0 20px #5b4fd428;--glow-lg:0 0 40px #5b4fd438;--radius-sm:6px;--radius-md:12px;--radius-lg:20px;--radius-xl:28px;--font-sans:"Inter", system-ui, sans-serif;--font-mono:"JetBrains Mono", "Fira Code", monospace;--transition-fast:80ms ease;--transition-base:.16s ease;--transition-slow:.3s cubic-bezier(.4, 0, .2, 1)}[data-theme=default]{--bg:#0d0d14;--bg-2:#13131f;--bg-3:#1a1a2e;--surface:#1e1e30;--surface-2:#252540;--border:#2a2a45;--accent:#7c6fe0;--accent-2:#9f8fff;--accent-glow:#7c6fe040;--text:#e2e0f5;--text-dim:#6b6a8a;--text-muted:#3d3c5e;--correct:#4ade80;--incorrect:#f87171;--cursor-color:#7c6fe0;--gold:#fbbf24;--combo-1:#60a5fa;--combo-2:#34d399;--combo-3:#fbbf24;--combo-4:#f87171;--glow-sm:0 0 8px var(--accent-glow);--glow-md:0 0 20px var(--accent-glow);--glow-lg:0 0 40px var(--accent-glow)}[data-theme=arctic]{--bg:#0a1628;--bg-2:#0d1e38;--bg-3:#112448;--surface:#162d52;--surface-2:#1c3762;--border:#234070;--accent:#38bdf8;--accent-2:#7dd3fc;--accent-glow:#38bdf840;--text:#e0f2fe;--text-dim:#5b8db8;--text-muted:#2d5a8a;--correct:#34d399;--incorrect:#fb7185;--cursor-color:#38bdf8;--combo-1:#38bdf8;--combo-2:#34d399;--combo-3:#a78bfa;--combo-4:#f43f5e}[data-theme=ember]{--bg:#150a00;--bg-2:#1e1000;--bg-3:#2a1500;--surface:#331a00;--surface-2:#3d2000;--border:#5c3200;--accent:#f97316;--accent-2:#fb923c;--accent-glow:#f9731640;--text:#fff7ed;--text-dim:#9a6840;--text-muted:#5c3a18;--correct:#86efac;--incorrect:#fca5a5;--cursor-color:#f97316;--combo-1:#fbbf24;--combo-2:#f97316;--combo-3:#ef4444;--combo-4:#dc2626}[data-theme=void]{--bg:#000;--bg-2:#050505;--bg-3:#0a0a0a;--surface:#111;--surface-2:#1a1a1a;--border:#222;--accent:#a855f7;--accent-2:#c084fc;--accent-glow:#a855f740;--text:#f5f5f5;--text-dim:#555;--text-muted:#2a2a2a;--correct:#a3e635;--incorrect:#ff6b6b;--cursor-color:#a855f7;--combo-1:#818cf8;--combo-2:#a855f7;--combo-3:#d946ef;--combo-4:#ec4899}[data-theme=aurora]{--bg:#041a1f;--bg-2:#062228;--bg-3:#092c35;--surface:#0d3540;--surface-2:#113d4a;--border:#1a5060;--accent:#2dd4bf;--accent-2:#5eead4;--accent-glow:#2dd4bf40;--text:#e0fdfa;--text-dim:#4d9e96;--text-muted:#1f5c58;--correct:#86efac;--incorrect:#f87171;--cursor-color:#2dd4bf;--combo-1:#2dd4bf;--combo-2:#34d399;--combo-3:#a78bfa;--combo-4:#fb923c}[data-theme=matrix]{--bg:#000500;--bg-2:#000a00;--bg-3:#001000;--surface:#001500;--surface-2:#002000;--border:#030;--accent:#00ff41;--accent-2:#008f11;--accent-glow:#00ff4130;--text:#00ff41;--text-dim:#008f11;--text-muted:#030;--correct:#fff;--incorrect:red;--cursor-color:#00ff41;--combo-1:#00ff41;--combo-2:#008f11;--combo-3:#030;--combo-4:#fff}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;font-size:16px}body{font-family:var(--font-sans);background-color:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;min-height:100vh;transition:background-color var(--transition-slow), color var(--transition-slow);overflow-x:hidden}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:var(--bg-2)}::-webkit-scrollbar-thumb{background:var(--border);border-radius:99px}::-webkit-scrollbar-thumb:hover{background:var(--accent)}::selection{background:var(--accent-glow);color:var(--accent-2)}h1,h2,h3,h4{letter-spacing:-.02em;font-weight:700;line-height:1.2}p{line-height:1.6}:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:var(--radius-sm)}button{cursor:pointer;font-family:inherit;font-size:inherit;color:inherit;transition:all var(--transition-base);background:0 0;border:none}@keyframes blink{0%,to{opacity:1}50%{opacity:0}}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-6px)}40%{transform:translate(6px)}60%{transform:translate(-4px)}80%{transform:translate(4px)}}@keyframes particlePop{0%{opacity:1;transform:translate(0)scale(1)}to{transform:translate(var(--dx,0px), var(--dy,-30px)) scale(0);opacity:0}}@keyframes auraFlash{0%{opacity:0}30%{opacity:1}to{opacity:0}}@keyframes comboPopIn{0%{opacity:0;transform:scale(.5)}60%{transform:scale(1.15)}to{opacity:1;transform:scale(1)}}@keyframes resultSlideUp{0%{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}@keyframes spinnerSpin{to{transform:rotate(360deg)}}@keyframes pulseGlow{0%,to{box-shadow:var(--glow-sm)}50%{box-shadow:var(--glow-lg)}}@keyframes fadeInDown{0%{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes survivalPulse{0%,to{color:var(--incorrect)}50%{color:var(--text)}}.font-mono{font-family:var(--font-mono)}.text-accent{color:var(--accent)}.text-dim{color:var(--text-dim)}.text-muted{color:var(--text-muted)}.text-correct{color:var(--correct)}.text-incorrect{color:var(--incorrect)}.text-gold{color:var(--gold)}.surface{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md)}.surface-glow{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:var(--glow-sm)}.btn-primary{background:var(--accent);color:#fff;border-radius:var(--radius-md);letter-spacing:.02em;transition:all var(--transition-base);padding:10px 24px;font-weight:600}.btn-primary:hover{background:var(--accent-2);box-shadow:var(--glow-md);transform:translateY(-1px)}.btn-primary:active{transform:translateY(0)}.btn-ghost{color:var(--text-dim);border-radius:var(--radius-sm);background:0 0;padding:8px 16px;font-weight:500}.btn-ghost:hover{background:var(--surface-2);color:var(--text)}.btn-icon{border-radius:var(--radius-sm);background:var(--surface);width:36px;height:36px;color:var(--text-dim);border:1px solid var(--border);justify-content:center;align-items:center;display:flex}.btn-icon:hover{color:var(--accent);border-color:var(--accent);box-shadow:var(--glow-sm)}.shake{animation:.32s cubic-bezier(.36,.07,.19,.97) both shake}