:root{--bg-deep: #0a0a1a;--bg-card: rgba(20, 20, 40, .8);--bg-card-hover: rgba(30, 30, 60, .9);--neon-lime: #00ff88;--neon-lime-glow: rgba(0, 255, 136, .3);--electric-purple: #7c3aed;--electric-purple-glow: rgba(124, 58, 237, .3);--hot-pink: #ff2d78;--hot-pink-glow: rgba(255, 45, 120, .3);--slate: #94a3b8;--white: #f8fafc;--text-dim: #64748b;--border: rgba(148, 163, 184, .15);--radius: 12px;--radius-lg: 16px;--font-mono: "JetBrains Mono", "Fira Code", monospace;--font-sans: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;--font-code: "Fira Code", "JetBrains Mono", monospace}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{font-family:var(--font-sans);background:var(--bg-deep);color:var(--white);min-height:100dvh;display:flex;justify-content:center;align-items:flex-start;padding:2rem 1rem;background-image:radial-gradient(ellipse at 20% 50%,rgba(124,58,237,.08) 0%,transparent 50%),radial-gradient(ellipse at 80% 20%,rgba(0,255,136,.05) 0%,transparent 50%)}#app{width:100%;max-width:560px}.screen{display:flex;flex-direction:column;align-items:center;gap:1.5rem;animation:fadeIn .4s ease}@keyframes fadeIn{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.logo-container{text-align:center;margin-bottom:1rem}.logo{font-family:var(--font-mono);font-size:2.2rem;font-weight:800;color:var(--neon-lime);text-shadow:0 0 20px var(--neon-lime-glow),0 0 60px rgba(0,255,136,.1);letter-spacing:.05em;-webkit-user-select:none;user-select:none}.logo-small{font-size:1.4rem}.tagline{font-family:var(--font-sans);font-size:.95rem;color:var(--slate);margin-top:.5rem;font-weight:400}.streak-badge{display:flex;align-items:center;gap:.4rem;padding:.5rem 1.2rem;background:var(--bg-card);border:1px solid var(--border);border-radius:100px;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.streak-fire{font-size:1.3rem;animation:flicker 2s ease-in-out infinite}@keyframes flicker{0%,to{transform:scale(1)}50%{transform:scale(1.15)}}.streak-count{font-family:var(--font-mono);font-size:1.4rem;font-weight:700;color:var(--white)}.streak-label{color:var(--slate);font-size:.85rem}.btn{width:100%;max-width:320px;padding:1rem 2rem;border:none;border-radius:var(--radius);font-family:var(--font-mono);font-size:1rem;font-weight:700;cursor:pointer;transition:all .2s ease;text-transform:uppercase;letter-spacing:.05em}.btn-primary{background:var(--neon-lime);color:var(--bg-deep);box-shadow:0 0 20px var(--neon-lime-glow)}.btn-primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 0 30px var(--neon-lime-glow),0 4px 20px #0000004d}.btn-primary:active:not(:disabled){transform:translateY(0)}.btn-primary:disabled{opacity:.5;cursor:not-allowed;box-shadow:none}.btn-secondary{background:var(--bg-card);color:var(--white);border:1px solid var(--border);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.btn-secondary:hover{background:var(--bg-card-hover);border-color:var(--electric-purple);box-shadow:0 0 15px var(--electric-purple-glow)}.btn-play{font-size:1.15rem;padding:1.2rem 2.5rem}.stats-mini{display:flex;gap:2rem;padding:1rem 1.5rem;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.stat-item{display:flex;flex-direction:column;align-items:center;gap:.2rem}.stat-value{font-family:var(--font-mono);font-size:1.3rem;font-weight:700;color:var(--white)}.stat-label{font-size:.75rem;color:var(--slate);text-transform:uppercase;letter-spacing:.05em}.question-header{width:100%;display:flex;justify-content:space-between;align-items:center;padding:.5rem}.progress-text{font-family:var(--font-mono);font-size:.9rem;color:var(--slate)}.lang-badge{font-family:var(--font-mono);font-size:.75rem;font-weight:600;padding:.25rem .75rem;background:var(--electric-purple);color:var(--white);border-radius:100px;text-transform:uppercase}.timer{font-family:var(--font-mono);font-size:1rem;font-weight:600;color:var(--white);min-width:60px;text-align:right}.timer-danger{color:var(--hot-pink);animation:pulse 1s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.progress-dots{display:flex;gap:.75rem;font-size:.9rem}.dot{transition:all .3s ease}.dot-current{color:var(--neon-lime);text-shadow:0 0 8px var(--neon-lime-glow)}.dot-pending{color:var(--text-dim)}.code-block{width:100%;background:#0f0f1ee6;border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);position:relative}.code-block-small{font-size:.85rem}.code-lang-tag{position:absolute;top:.5rem;right:.75rem;font-family:var(--font-mono);font-size:.65rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:.1em}.code-block pre{margin:0;padding:1.5rem;overflow-x:auto}.code-block code{font-family:var(--font-code);font-size:.95rem;line-height:1.6;background:none!important;padding:0!important}.question-prompt{font-size:1.05rem;font-weight:500;color:var(--white);text-align:center}.options-grid{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:.75rem}.btn-option{padding:1rem;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);color:var(--white);font-family:var(--font-code);font-size:1rem;cursor:pointer;transition:all .2s ease;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);animation:slideUp .3s ease backwards;text-align:center;min-height:56px;display:flex;align-items:center;justify-content:center}@keyframes slideUp{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}.btn-option:hover{background:var(--bg-card-hover);border-color:var(--electric-purple);box-shadow:0 0 20px var(--electric-purple-glow);transform:scale(1.02)}.btn-option:active{transform:scale(.98)}.btn-option code{font-family:var(--font-code);background:none;pointer-events:none}.btn-option.option-correct{background:#00ff8826;border-color:var(--neon-lime);box-shadow:0 0 20px var(--neon-lime-glow);animation:flashCorrect .4s ease}.btn-option.option-wrong{background:#ff2d7826;border-color:var(--hot-pink);box-shadow:0 0 20px var(--hot-pink-glow);animation:shake .4s ease}@keyframes flashCorrect{0%{transform:scale(1)}50%{transform:scale(1.05)}to{transform:scale(1)}}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-6px)}75%{transform:translate(6px)}}.answer-verdict{font-family:var(--font-mono);font-size:1.8rem;font-weight:800}.verdict-correct{color:var(--neon-lime);text-shadow:0 0 20px var(--neon-lime-glow)}.verdict-wrong{color:var(--hot-pink);text-shadow:0 0 20px var(--hot-pink-glow)}.answer-reveal{display:flex;align-items:center;gap:.75rem;font-size:1.1rem}.answer-label{color:var(--slate)}.answer-value{font-family:var(--font-code);font-size:1.2rem;padding:.3rem .8rem;background:var(--bg-card);border:1px solid var(--neon-lime);border-radius:6px;color:var(--neon-lime)}.explanation-card{width:100%;padding:1.25rem;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);line-height:1.65;color:var(--slate);font-size:.95rem}.result-subtitle{font-size:1rem;color:var(--slate)}.emoji-grid{font-size:2rem;letter-spacing:.3em;padding:.5rem 0}.result-stats{display:flex;flex-direction:column;align-items:center;gap:.4rem}.result-score{font-family:var(--font-mono);font-size:2.5rem;font-weight:800;color:var(--neon-lime);text-shadow:0 0 20px var(--neon-lime-glow)}.result-time{font-family:var(--font-mono);font-size:1.1rem;color:var(--slate)}.result-streak{font-size:1rem;color:var(--white)}.next-puzzle-timer{font-size:.85rem;color:var(--text-dim);font-family:var(--font-mono)}.review-screen{gap:1rem;align-items:stretch}.review-title{font-family:var(--font-mono);font-size:1.3rem;text-align:center;color:var(--white)}.review-item{padding:1rem;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);display:flex;flex-direction:column;gap:.75rem}.review-correct{border-left:3px solid var(--neon-lime)}.review-wrong{border-left:3px solid var(--hot-pink)}.review-header{display:flex;align-items:center;gap:.75rem}.review-num{font-family:var(--font-mono);font-weight:700;color:var(--white)}.review-verdict{margin-left:auto}.review-answer{font-size:.9rem;color:var(--white)}.review-answer code{font-family:var(--font-code);padding:.15rem .5rem;background:#7c3aed33;border-radius:4px;color:var(--neon-lime)}.review-explanation{font-size:.85rem;color:var(--slate);line-height:1.5}@media(max-width:480px){body{padding:1rem .75rem}.logo{font-size:1.6rem}.options-grid{grid-template-columns:1fr}.btn-option{min-height:48px}.stats-mini{gap:1.25rem;padding:.75rem 1rem}.code-block code{font-size:.85rem}.result-score{font-size:2rem}.emoji-grid{font-size:1.6rem}}