@import "https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&display=swap";
:root{--primary:#4ecdc4;--primary-light:#7eddd3;--primary-dark:#2ab7ad;--secondary:#ffb347;--secondary-light:#ffc875;--secondary-dark:#ff9a00;--accent:#ff6b9d;--accent-light:#ff8db5;--success:#51cf66;--success-light:#b2f2bb;--error:#ff6b6b;--error-light:#ffc9c9;--warning:#fcc419;--bg-primary:#f0f4ff;--bg-secondary:#e8ecff;--bg-card:#fff;--text-primary:#2d3436;--text-secondary:#636e72;--text-light:#b2bec3;--gradient-hero:linear-gradient(135deg,#667eea 0%,#764ba2 100%);--gradient-fun:linear-gradient(135deg,#f093fb 0%,#f5576c 100%);--gradient-ocean:linear-gradient(135deg,#4ecdc4 0%,#44b5ad 100%);--gradient-sunset:linear-gradient(135deg,#ffb347 0%,#ff6b9d 100%);--gradient-forest:linear-gradient(135deg,#51cf66 0%,#4ecdc4 100%);--gradient-candy:linear-gradient(135deg,#a18cd1 0%,#fbc2eb 100%);--space-xs:4px;--space-sm:8px;--space-md:16px;--space-lg:24px;--space-xl:32px;--space-2xl:48px;--space-3xl:64px;--radius-sm:8px;--radius-md:16px;--radius-lg:24px;--radius-xl:32px;--radius-full:9999px;--shadow-sm:0 2px 8px #0000000f;--shadow-md:0 4px 16px #00000014;--shadow-lg:0 8px 32px #0000001f;--shadow-glow:0 0 20px #4ecdc44d;--shadow-success:0 4px 16px #51cf664d;--shadow-error:0 4px 16px #ff6b6b4d;--font-family:"Nunito",-apple-system,sans-serif;--font-size-sm:14px;--font-size-md:18px;--font-size-lg:24px;--font-size-xl:36px;--font-size-2xl:48px;--font-size-3xl:64px;--transition-fast:.15s ease;--transition-normal:.25s ease;--transition-slow:.4s cubic-bezier(.4,0,.2,1);--transition-bounce:.5s cubic-bezier(.34,1.56,.64,1)}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:16px}body{font-family:var(--font-family);background:var(--bg-primary);color:var(--text-primary);min-height:100vh;overflow-x:hidden}body:before{content:"";z-index:-1;background:radial-gradient(circle at 20% 20%,#4ecdc414 0%,#0000 50%),radial-gradient(circle at 80% 80%,#ff6b9d0f 0%,#0000 50%),radial-gradient(circle,#ffb3470d 0%,#0000 50%);width:100%;height:100%;animation:20s ease-in-out infinite bgFloat;position:fixed;top:0;left:0}@keyframes bgFloat{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.container{max-width:1200px;padding:0 var(--space-lg);margin:0 auto}.btn{justify-content:center;align-items:center;gap:var(--space-sm);padding:var(--space-md)var(--space-xl);border-radius:var(--radius-lg);font-family:var(--font-family);font-size:var(--font-size-md);cursor:pointer;transition:all var(--transition-normal);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;border:none;min-width:56px;min-height:56px;font-weight:700;display:inline-flex}.btn:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}.btn:active{transform:translateY(0)scale(.97)}.btn-primary{background:var(--gradient-ocean);color:#fff}.btn-secondary{background:var(--gradient-sunset);color:#fff}.btn-icon{border-radius:var(--radius-full);width:64px;height:64px;font-size:var(--font-size-xl);padding:0}.card{background:var(--bg-card);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);transition:all var(--transition-normal);overflow:hidden}.card:hover{box-shadow:var(--shadow-md);transform:translateY(-4px)}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInScale{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@keyframes slideInLeft{0%{opacity:0;transform:translate(-30px)}to{opacity:1;transform:translate(0)}}@keyframes slideInRight{0%{opacity:0;transform:translate(30px)}to{opacity:1;transform:translate(0)}}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes wiggle{0%,to{transform:rotate(0)}25%{transform:rotate(-5deg)}75%{transform:rotate(5deg)}}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}@keyframes pop{0%{transform:scale(0)}50%{transform:scale(1.2)}to{transform:scale(1)}}@keyframes slideUp{0%{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}@keyframes shimmer{0%{background-position:-200%}to{background-position:200%}}@keyframes confettiDrop{0%{opacity:1;transform:translateY(-100vh)rotate(0)}to{opacity:0;transform:translateY(100vh)rotate(720deg)}}@keyframes starBurst{0%{opacity:1;transform:scale(0)rotate(0)}to{opacity:0;transform:scale(2)rotate(180deg)}}@keyframes correctPulse{0%{box-shadow:0 0 #51cf6666}70%{box-shadow:0 0 0 20px #51cf6600}to{box-shadow:0 0 #51cf6600}}@keyframes wrongShake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-4px)}20%,40%,60%,80%{transform:translate(4px)}}.xp-bar{background:var(--bg-secondary);border-radius:var(--radius-full);height:12px;position:relative;overflow:hidden}.xp-bar-fill{background:var(--gradient-ocean);border-radius:var(--radius-full);height:100%;transition:width .6s cubic-bezier(.4,0,.2,1);position:relative}.xp-bar-fill:after{content:"";background:linear-gradient(90deg,#0000,#ffffff4d,#0000) 0 0/200% 100%;animation:2s infinite shimmer;position:absolute;inset:0}.progress-dots{gap:var(--space-sm);justify-content:center;display:flex}.progress-dot{border-radius:var(--radius-full);background:var(--bg-secondary);width:12px;height:12px;transition:all var(--transition-normal)}.progress-dot.active{background:var(--primary);transform:scale(1.3)}.progress-dot.completed{background:var(--success)}@media (max-width:768px){:root{--font-size-xl:28px;--font-size-2xl:36px;--font-size-3xl:48px;--space-lg:16px;--space-xl:24px}.btn{min-height:48px}}@media (min-width:769px) and (max-width:1024px){:root{--font-size-xl:32px;--font-size-2xl:42px}}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--text-light);border-radius:var(--radius-full)}:focus-visible{outline:3px solid var(--primary);outline-offset:2px}::selection{background:var(--primary-light);color:#fff}