@import"https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&display=swap";:root{--pink: #FF6B9D;--purple: #C084FC;--blue: #60A5FA;--cyan: #22D3EE;--green: #4ADE80;--yellow: #FACC15;--orange: #FB923C;--red: #F87171}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{min-height:100vh;font-family:Nunito,sans-serif;overflow-x:hidden}body{background:linear-gradient(135deg,#fce4ec,#e8eaf6,#e0f7fa,#fff9c4,#f3e5f5);background-size:400% 400%;animation:gradientShift 15s ease infinite}@keyframes gradientShift{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}.bg-bubbles{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;overflow:hidden;z-index:0}.bubble{position:absolute;border-radius:50%;opacity:.15;animation:float linear infinite}@keyframes float{0%{transform:translateY(100vh) rotate(0) scale(1);opacity:0}10%{opacity:.15}90%{opacity:.15}to{transform:translateY(-10vh) rotate(720deg) scale(.5);opacity:0}}.app{position:relative;z-index:1;min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:1.5rem 1.5rem 3rem}.header{text-align:center;margin-bottom:2rem;animation:bounceIn .8s cubic-bezier(.68,-.55,.265,1.55)}.header h1{font-size:2.5rem;font-weight:900;background:linear-gradient(135deg,var(--pink),var(--purple),var(--blue));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-shadow:none;letter-spacing:-.02em}.header .subtitle{font-size:1.1rem;color:#9ca3af;font-weight:600;margin-top:.25rem}.back-btn{position:fixed;top:1rem;left:1rem;z-index:100;background:#fff;border:3px solid var(--purple);border-radius:50%;width:52px;height:52px;font-size:1.5rem;cursor:pointer;display:grid;place-items:center;box-shadow:0 4px 15px #c084fc4d;transition:all .2s ease}.back-btn:hover{transform:scale(1.1);box-shadow:0 6px 20px #c084fc80}.stars-display{position:fixed;top:1rem;right:1rem;z-index:100;background:#fff;border:3px solid var(--yellow);border-radius:2rem;padding:.5rem 1rem;font-size:1.3rem;font-weight:800;color:#92400e;box-shadow:0 4px 15px #facc154d;display:flex;align-items:center;gap:.4rem;animation:popIn .5s cubic-bezier(.68,-.55,.265,1.55)}.categories{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1.2rem;max-width:700px;width:100%;padding:0 .5rem}.category-card{background:#fff;border:4px solid transparent;border-radius:1.5rem;padding:1.5rem 1rem;text-align:center;cursor:pointer;transition:all .3s cubic-bezier(.68,-.55,.265,1.55);box-shadow:0 4px 20px #00000014;position:relative;overflow:hidden}.category-card:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;opacity:.06;transition:opacity .3s}.category-card:hover{transform:translateY(-8px) scale(1.03);box-shadow:0 12px 35px #00000026}.category-card:active{transform:translateY(-4px) scale(.98)}.category-card .emoji{font-size:3.5rem;display:block;margin-bottom:.5rem;animation:wiggle 2s ease-in-out infinite}.category-card .label{font-size:1.1rem;font-weight:800;color:#374151}.category-card:nth-child(1){border-color:var(--pink)}.category-card:nth-child(1):before{background:var(--pink)}.category-card:nth-child(2){border-color:var(--blue)}.category-card:nth-child(2):before{background:var(--blue)}.category-card:nth-child(3){border-color:var(--yellow)}.category-card:nth-child(3):before{background:var(--yellow)}.category-card:nth-child(4){border-color:var(--green)}.category-card:nth-child(4):before{background:var(--green)}.category-card:nth-child(5){border-color:var(--purple)}.category-card:nth-child(5):before{background:var(--purple)}.category-card:nth-child(6){border-color:var(--orange)}.category-card:nth-child(6):before{background:var(--orange)}@keyframes wiggle{0%,to{transform:rotate(0)}25%{transform:rotate(-5deg)}75%{transform:rotate(5deg)}}.learning-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:1.2rem;max-width:700px;width:100%;padding:0 .5rem}.learn-card{background:#fff;border-radius:1.5rem;padding:1.2rem .8rem;text-align:center;cursor:pointer;transition:all .3s cubic-bezier(.68,-.55,.265,1.55);box-shadow:0 4px 20px #00000014;border:3px solid #e5e7eb;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}.learn-card:hover{transform:translateY(-6px) scale(1.05);box-shadow:0 10px 30px #00000026}.learn-card:active{transform:scale(.95)}.learn-card .card-emoji{font-size:3rem;display:block;margin-bottom:.4rem;transition:transform .3s ease}.learn-card.tapped .card-emoji{animation:popEmoji .6s cubic-bezier(.68,-.55,.265,1.55)}.learn-card .card-label{font-size:1.15rem;font-weight:800;color:#374151;letter-spacing:.02em}.learn-card .card-extra{font-size:.85rem;color:#9ca3af;font-weight:600;margin-top:.15rem}.color-swatch{width:60px;height:60px;border-radius:50%;margin:0 auto .5rem;border:4px solid rgba(0,0,0,.1);box-shadow:inset 0 4px 8px #0000001a}.quiz-container{max-width:500px;width:100%;text-align:center;padding:0 .5rem}.quiz-question{background:#fff;border-radius:2rem;padding:2rem;margin-bottom:1.5rem;box-shadow:0 8px 30px #0000001a;border:4px solid var(--purple)}.quiz-question .quiz-prompt{font-size:1.2rem;font-weight:700;color:#6b7280;margin-bottom:.75rem}.quiz-question .quiz-emoji{font-size:5rem;display:block;margin:.5rem 0;animation:bounce 1s ease infinite}.quiz-question .quiz-text{font-size:2rem;font-weight:900;color:#374151}.quiz-options{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.quiz-option{background:#fff;border:4px solid #e5e7eb;border-radius:1.5rem;padding:1.2rem;font-size:1.5rem;font-weight:800;cursor:pointer;transition:all .2s ease;font-family:Nunito,sans-serif;color:#374151;box-shadow:0 4px 15px #0000000f}.quiz-option:hover{transform:scale(1.05);border-color:var(--purple)}.quiz-option.correct{border-color:var(--green);background:#dcfce7;animation:correctPulse .5s ease}.quiz-option.wrong{border-color:var(--red);background:#fee2e2;animation:shake .5s ease}.quiz-option .opt-emoji{font-size:2.5rem;display:block;margin-bottom:.3rem}.progress-bar{width:100%;max-width:500px;height:12px;background:#e5e7eb;border-radius:1rem;margin-bottom:1.5rem;overflow:hidden;box-shadow:inset 0 2px 4px #0000001a}.progress-fill{height:100%;border-radius:1rem;background:linear-gradient(90deg,var(--pink),var(--purple),var(--blue));transition:width .5s cubic-bezier(.68,-.55,.265,1.55)}.mode-tabs{display:flex;gap:.5rem;margin-bottom:1.5rem;background:#fff;border-radius:2rem;padding:.4rem;box-shadow:0 4px 15px #00000014}.mode-tab{border:none;background:transparent;padding:.6rem 1.2rem;border-radius:2rem;font-size:1rem;font-weight:700;cursor:pointer;transition:all .3s ease;font-family:Nunito,sans-serif;color:#9ca3af}.mode-tab.active{background:linear-gradient(135deg,var(--purple),var(--blue));color:#fff;box-shadow:0 4px 12px #c084fc66}.celebration{position:fixed;top:0;right:0;bottom:0;left:0;z-index:200;display:grid;place-items:center;background:#0000004d;animation:fadeIn .3s ease}.celebration-content{background:#fff;border-radius:2rem;padding:3rem;text-align:center;box-shadow:0 20px 60px #0003;animation:popIn .5s cubic-bezier(.68,-.55,.265,1.55);max-width:90vw}.celebration-content .big-emoji{font-size:5rem;display:block;margin-bottom:1rem;animation:bounce .6s ease infinite alternate}.celebration-content h2{font-size:2rem;font-weight:900;color:#374151;margin-bottom:.5rem}.celebration-content p{color:#6b7280;font-weight:600;font-size:1.1rem;margin-bottom:1.5rem}.celebration-content button{background:linear-gradient(135deg,var(--purple),var(--blue));color:#fff;border:none;border-radius:2rem;padding:.8rem 2rem;font-size:1.2rem;font-weight:800;cursor:pointer;font-family:Nunito,sans-serif;box-shadow:0 4px 15px #c084fc66;transition:transform .2s}.celebration-content button:hover{transform:scale(1.05)}.confetti{position:fixed;z-index:250;pointer-events:none;animation:confettiFall linear forwards}@keyframes confettiFall{0%{transform:translateY(-10vh) rotate(0);opacity:1}to{transform:translateY(110vh) rotate(720deg);opacity:0}}@keyframes bounceIn{0%{transform:scale(.3);opacity:0}50%{transform:scale(1.05)}70%{transform:scale(.95)}to{transform:scale(1);opacity:1}}@keyframes popIn{0%{transform:scale(0);opacity:0}80%{transform:scale(1.1)}to{transform:scale(1);opacity:1}}@keyframes popEmoji{0%{transform:scale(1)}30%{transform:scale(1.5) rotate(-10deg)}60%{transform:scale(.9) rotate(5deg)}to{transform:scale(1) rotate(0)}}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes correctPulse{0%{transform:scale(1)}50%{transform:scale(1.08)}to{transform:scale(1)}}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-8px)}40%{transform:translate(8px)}60%{transform:translate(-4px)}80%{transform:translate(4px)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.category-title{font-size:1.8rem;font-weight:900;text-align:center;margin-bottom:1.5rem;color:#374151}.category-title .title-emoji{font-size:2rem;margin-right:.5rem}@media(max-width:480px){.header h1{font-size:1.8rem}.categories,.learning-grid{grid-template-columns:repeat(2,1fr);gap:.8rem}.quiz-options{grid-template-columns:1fr 1fr}.category-card .emoji{font-size:2.5rem}.learn-card .card-emoji{font-size:2.2rem}}