*{margin:0;padding:0;box-sizing:border-box}:root{--rose-50: #fff1f2;--rose-100: #ffe4e6;--rose-200: #fecdd3;--rose-300: #fda4af;--rose-400: #fb7185;--rose-500: #f43f5e;--pink-50: #fdf2f8;--pink-100: #fce7f3;--pink-200: #fbcfe8;--pink-300: #f9a8d4;--pink-400: #f472b6;--pink-500: #ec4899;--lavender-50: #faf5ff;--lavender-100: #f3e8ff;--lavender-200: #e9d5ff;--lavender-300: #d8b4fe;--lavender-400: #c084fc;--lavender-500: #a855f7;--peach-50: #fff7ed;--peach-100: #ffedd5;--peach-200: #fed7aa;--peach-300: #fdba74;--peach-400: #fb923c;--mint-50: #f0fdf4;--mint-100: #dcfce7;--mint-200: #bbf7d0;--mint-300: #86efac;--mint-400: #4ade80;--mint-500: #22c55e;--gold-100: #fef3c7;--gold-200: #fde68a;--gold-300: #fcd34d;--gold-400: #fbbf24;--cream-50: #fffbf5;--cream-100: #fef7f0;--cream-200: #fdf2e9;--text-primary: #4a3728;--text-secondary: #78716c;--text-muted: #a8a29e;--glass-bg: rgba(255, 255, 255, .7);--glass-border: rgba(255, 255, 255, .4);--glass-shadow: 0 8px 32px rgba(244, 114, 182, .15);--shadow-sm: 0 2px 8px rgba(244, 114, 182, .08);--shadow-md: 0 4px 16px rgba(244, 114, 182, .12);--shadow-lg: 0 8px 32px rgba(244, 114, 182, .16);--shadow-glow: 0 0 40px rgba(244, 114, 182, .2);--cta-shadow-primary: 0 4px 15px rgba(236, 72, 153, .4), 0 8px 30px rgba(168, 85, 247, .25), inset 0 1px 0 rgba(255, 255, 255, .3);--cta-shadow-primary-hover: 0 8px 25px rgba(236, 72, 153, .5), 0 15px 40px rgba(168, 85, 247, .3), inset 0 1px 0 rgba(255, 255, 255, .4);--cta-shadow-reward: 0 4px 15px rgba(251, 191, 36, .45), 0 8px 25px rgba(244, 114, 182, .25), inset 0 1px 0 rgba(255, 255, 255, .4);--rose-deep: #be185d;--lavender-rich: #7c3aed;--success-earned: #059669;--success-celebration: #10b981;--ease-bounce: cubic-bezier(.4, 0, .2, 1);--ease-smooth: cubic-bezier(.25, .1, .25, 1);--ease-spring: cubic-bezier(.22, 1, .36, 1);--cta-blue: #1e40af;--cta-blue-hover: #1e3a8a;--cta-blue-light: #3b82f6;--cta-purple: #6b21a8;--cta-purple-hover: #581c87;--cta-purple-light: #a855f7;--cta-amber: #b45309;--cta-amber-hover: #92400e;--cta-amber-light: #f59e0b;--gold-accent: #d4a574;--gold-accent-light: #e8c9a0;--gold-accent-dark: #b8956a;--gold-border: 3px solid var(--gold-accent);--cloud-bg: rgba(255, 248, 240, .85);--cloud-bg-solid: #fff8f0;--glass-bubble: rgba(255, 255, 255, .6);--glass-bubble-border: rgba(255, 255, 255, .4);--shadow-warm: 0 8px 32px rgba(212, 165, 116, .15);--shadow-warm-lg: 0 12px 48px rgba(212, 165, 116, .2);--shadow-blue-cta: 0 4px 16px rgba(30, 64, 175, .3);--shadow-blue-cta-hover: 0 8px 24px rgba(30, 64, 175, .4);--shadow-purple-cta: 0 4px 16px rgba(107, 33, 168, .3);--shadow-purple-cta-hover: 0 8px 24px rgba(107, 33, 168, .4);--shadow-amber-cta: 0 4px 16px rgba(180, 83, 9, .3)}body{font-family:Quicksand,-apple-system,BlinkMacSystemFont,sans-serif;background:linear-gradient(135deg,var(--pink-50) 0%,var(--rose-100) 25%,var(--lavender-50) 50%,var(--peach-50) 75%,var(--pink-100) 100%);background:var(--theme-bg-page);background-attachment:fixed;min-height:100vh;color:var(--text-primary);line-height:1.6;transition:background .5s ease;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom);padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}#root{min-height:100vh;display:flex;flex-direction:column}html{scroll-behavior:smooth}button:focus-visible,a:focus-visible,[role=button]:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--theme-primary, var(--pink-400));outline-offset:3px;box-shadow:0 0 0 6px var(--theme-primary-glow, rgba(244, 114, 182, .2)),0 4px 16px var(--theme-primary-glow, rgba(244, 114, 182, .3))}.dark-bg button:focus-visible,.dark-bg a:focus-visible{outline:3px solid white;outline-offset:3px;box-shadow:0 0 0 6px #ffffff4d}::selection{background:var(--pink-200);color:var(--text-primary)}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes sparkle{0%,to{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.2)}}@keyframes pulse-glow{0%,to{box-shadow:0 0 20px #f472b64d}50%{box-shadow:0 0 40px #f472b680}}@keyframes slide-up{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes page-enter-from-right{0%{opacity:0;transform:translate(32px) scale(.98)}to{opacity:1;transform:none}}@keyframes page-enter-from-left{0%{opacity:0;transform:translate(-32px) scale(.98)}to{opacity:1;transform:none}}@keyframes page-enter-center{0%{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}.page-transition-forward{animation:page-enter-from-right .45s cubic-bezier(.22,1,.36,1) forwards}.page-transition-back{animation:page-enter-from-left .45s cubic-bezier(.22,1,.36,1) forwards}.page-transition-center{animation:page-enter-center .45s cubic-bezier(.22,1,.36,1) forwards}@keyframes page-enter-section{0%{opacity:0}to{opacity:1}}.page-transition-section{animation:page-enter-section .15s ease forwards}.animate-in{animation:slide-up .5s ease-out}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}button:hover,.card:hover,.cta-primary:hover,.cta-reward:hover{transform:none!important}}.cta-primary{background:linear-gradient(135deg,#ec4899,#a855f7,#ec4899);background-size:200% 200%;box-shadow:var(--cta-shadow-primary);border:1px solid rgba(255,255,255,.2);position:relative;overflow:hidden;transition:all .3s var(--ease-bounce)}.cta-primary:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.25),transparent);animation:shimmer 3s infinite}.cta-primary:hover{transform:translateY(-3px) scale(1.02);box-shadow:var(--cta-shadow-primary-hover)}.cta-primary:active{transform:translateY(-1px) scale(1.01);box-shadow:0 2px 10px #ec489966,0 4px 20px #a855f740}.cta-reward{background:linear-gradient(135deg,#fbbf24,#f472b6,#fbbf24);background-size:200% 200%;box-shadow:var(--cta-shadow-reward);animation:goldPulse 4s ease-in-out infinite;position:relative;overflow:hidden;transition:all .3s var(--ease-bounce)}.cta-reward:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);animation:shimmer 2.5s infinite}.cta-reward:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 8px 20px #fbbf248c,0 15px 35px #f472b64d}@keyframes shimmer{0%{left:-100%}50%{left:100%}to{left:100%}}@keyframes goldPulse{0%,to{box-shadow:0 4px 15px #fbbf2473,0 8px 25px #f472b640}50%{box-shadow:0 6px 20px #fbbf248c,0 12px 35px #f472b659}}.cloud-container{background:var(--cloud-bg);border-radius:2rem;padding:2rem;box-shadow:var(--shadow-warm);border:1px solid rgba(255,255,255,.5);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.glass-bubble{background:var(--glass-bubble);border:1px solid var(--glass-bubble-border);border-radius:9999px;padding:.75rem 1.5rem;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:var(--shadow-md)}.btn-illustrated-primary{background:linear-gradient(135deg,var(--cta-blue) 0%,var(--cta-blue-light) 100%);color:#fff;border:var(--gold-border);border-radius:1.5rem;padding:1.25rem 2rem;font-weight:700;font-size:1.125rem;font-family:inherit;cursor:pointer;text-shadow:0 1px 2px rgba(0,0,0,.15);box-shadow:var(--shadow-blue-cta),inset 0 1px #fff3;transition:all .3s var(--ease-bounce);position:relative;overflow:hidden}.btn-illustrated-primary:hover{transform:translateY(-3px) scale(1.02);box-shadow:var(--shadow-blue-cta-hover),inset 0 1px #ffffff4d}.btn-illustrated-primary:active{transform:translateY(-1px) scale(1.01)}.btn-illustrated-secondary{background:linear-gradient(135deg,var(--cta-purple) 0%,var(--cta-purple-light) 100%);color:#fff;border:var(--gold-border);border-radius:1.5rem;padding:1.25rem 2rem;font-weight:700;font-size:1.125rem;font-family:inherit;cursor:pointer;text-shadow:0 1px 2px rgba(0,0,0,.15);box-shadow:var(--shadow-purple-cta),inset 0 1px #fff3;transition:all .3s var(--ease-bounce);position:relative;overflow:hidden}.btn-illustrated-secondary:hover{transform:translateY(-3px) scale(1.02);box-shadow:var(--shadow-purple-cta-hover),inset 0 1px #ffffff4d}.btn-illustrated-secondary:active{transform:translateY(-1px) scale(1.01)}.btn-illustrated-reward{background:linear-gradient(135deg,var(--cta-amber) 0%,var(--cta-amber-light) 100%);color:#fff;border:3px solid var(--gold-accent-light);border-radius:1.5rem;padding:1.25rem 2rem;font-weight:700;font-size:1.125rem;font-family:inherit;cursor:pointer;text-shadow:0 1px 2px rgba(0,0,0,.15);box-shadow:var(--shadow-amber-cta),inset 0 1px #ffffff4d;transition:all .3s var(--ease-bounce);position:relative;overflow:hidden}.btn-illustrated-reward:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 8px 24px #b4530966,inset 0 1px #fff6}.btn-illustrated-locked{background:#ffffff80;color:#9ca3af;border:3px solid rgba(156,163,175,.3);border-radius:1.5rem;padding:1.25rem 2rem;font-weight:700;font-size:1.125rem;font-family:inherit;cursor:not-allowed;box-shadow:var(--shadow-sm);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.btn-illustrated-content{display:flex;align-items:center;gap:1rem}.btn-illustrated-icon{width:3rem;height:3rem;border-radius:1rem;display:flex;align-items:center;justify-content:center;background:#fff3;font-size:1.5rem;flex-shrink:0}.btn-illustrated-text h2,.btn-illustrated-text h3{margin:0;font-size:1.25rem;font-weight:700;letter-spacing:-.01em}.btn-illustrated-text p{margin:0;font-size:.875rem;opacity:.9;font-weight:500}.floating-decor{position:absolute;pointer-events:none;opacity:.6;font-size:1.5rem;animation:decor-float 4s ease-in-out infinite}@keyframes decor-float{0%,to{transform:translateY(0) rotate(0)}50%{transform:translateY(-10px) rotate(3deg)}}.floating-decor:nth-child(1){animation-delay:0s}.floating-decor:nth-child(2){animation-delay:.5s}.floating-decor:nth-child(3){animation-delay:1s}.floating-decor:nth-child(4){animation-delay:1.5s}.floating-decor:nth-child(5){animation-delay:2s}.stat-card-illustrated{background:var(--cloud-bg);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:1.5rem;padding:1.25rem 1rem;text-align:center;box-shadow:var(--shadow-warm);border:2px solid rgba(212,165,116,.2);transition:transform .3s ease,box-shadow .3s ease}.stat-card-illustrated:hover{transform:translateY(-4px);box-shadow:var(--shadow-warm-lg);border-color:var(--gold-accent)}.stat-card-illustrated .stat-icon{font-size:2rem;margin-bottom:.5rem;display:block}.stat-card-illustrated .stat-value{font-size:1.75rem;font-weight:700;display:block;color:var(--cta-blue)}.stat-card-illustrated .stat-label{font-size:.8rem;color:var(--text-secondary);font-weight:500;display:block}@keyframes sparkle-burst{0%{opacity:1;transform:scale(0) rotate(0)}50%{opacity:1;transform:scale(1.2) rotate(180deg)}to{opacity:0;transform:scale(.8) rotate(360deg)}}.sparkle{position:absolute;pointer-events:none;animation:sparkle-burst .6s ease-out forwards}@keyframes confetti-fall{0%{opacity:1;transform:translateY(0) rotate(0)}to{opacity:0;transform:translateY(100px) rotate(720deg)}}.confetti{position:absolute;pointer-events:none;animation:confetti-fall 1.2s ease-out forwards}@keyframes button-press{0%{transform:scale(1)}50%{transform:scale(.96)}to{transform:scale(1)}}.btn-interactive:active{animation:button-press .15s ease-out}@keyframes progress-complete{0%{box-shadow:0 0 #fbbf24b3}70%{box-shadow:0 0 0 15px #fbbf2400}to{box-shadow:0 0 #fbbf2400}}.progress-complete{animation:progress-complete .8s ease-out}@keyframes streak-bounce{0%,to{transform:scale(1)}30%{transform:scale(1.3) rotate(-10deg)}60%{transform:scale(1.1) rotate(5deg)}}.streak-fire{display:inline-block;animation:streak-bounce .4s ease-out}@keyframes gentle-float{0%,to{transform:translateY(0) rotate(0)}25%{transform:translateY(-2px) rotate(.5deg)}75%{transform:translateY(-2px) rotate(-.5deg)}}.card-float:hover{animation:gentle-float 2s ease-in-out infinite}@keyframes success-glow{0%,to{box-shadow:0 0 20px #4ade8066}50%{box-shadow:0 0 40px #4ade8099,0 0 60px #4ade804d}}.success-glow{animation:success-glow 1s ease-in-out 2}@keyframes float-note{0%{opacity:0;transform:translateY(20px) rotate(-15deg)}20%{opacity:1}to{opacity:0;transform:translateY(-100px) rotate(15deg)}}.music-note{position:absolute;font-size:1.5rem;animation:float-note 2s ease-out forwards;pointer-events:none}@keyframes star-trail{0%{opacity:0;transform:translate(-10px) scale(.5)}20%{opacity:1;transform:translate(0) scale(1)}to{opacity:0;transform:translate(30px) scale(.3)}}.star-trail{position:absolute;pointer-events:none;animation:star-trail .8s ease-out forwards}@keyframes heartbeat{0%,to{transform:scale(1)}14%{transform:scale(1.1)}28%{transform:scale(1)}42%{transform:scale(1.1)}70%{transform:scale(1)}}.heartbeat{animation:heartbeat 1.5s ease-in-out infinite}.gradient-text{background:linear-gradient(135deg,#ec4899,#a855f7);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.on-gradient-text{color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.15)}.skip-link{position:absolute;top:-40px;left:0;background:var(--pink-500);color:#fff;padding:8px 16px;z-index:1000;border-radius:0 0 8px;text-decoration:none;font-weight:600;transition:top .2s ease}.skip-link:focus{top:0}@keyframes taktir-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}.taktir-pulse{animation:taktir-pulse .5s ease-out}@keyframes taktir-increment{0%{transform:scale(1)}50%{transform:scale(1.2);color:#f59e0b}to{transform:scale(1)}}.taktir-increment{animation:taktir-increment .4s ease-out}@keyframes stage-unlock{0%{transform:scale(.5);opacity:0}50%{transform:scale(1.2);opacity:1}to{transform:scale(1);opacity:1}}.stage-unlock{animation:stage-unlock .6s var(--ease-spring)}@keyframes note-float{0%{transform:translateY(0) scale(1);opacity:1}to{transform:translateY(-60px) scale(.5);opacity:0}}.note-float{animation:note-float 1.5s ease-out forwards}@keyframes streak-glow{0%,to{filter:drop-shadow(0 0 2px rgba(251,191,36,.5))}50%{filter:drop-shadow(0 0 8px rgba(251,191,36,.8))}}.streak-glow{animation:streak-glow 1s ease-in-out infinite}@keyframes luck-reveal{0%{transform:rotateY(0)}50%{transform:rotateY(180deg)}to{transform:rotateY(360deg)}}.luck-reveal{animation:luck-reveal .8s ease-in-out}@keyframes game-unlock{0%{transform:scale(.8) rotate(-5deg);opacity:0}50%{transform:scale(1.1) rotate(3deg)}to{transform:scale(1) rotate(0);opacity:1}}.game-unlock{animation:game-unlock .5s var(--ease-spring)}@keyframes celebration-confetti-burst{0%{transform:scale(0) translateY(0);opacity:1}50%{opacity:1}to{transform:scale(1) translateY(100px);opacity:0}}@keyframes celebration-score-bounce{0%{opacity:0;transform:translate(-50%,-50%) scale(.5)}50%{transform:translate(-50%,-50%) scale(1.1)}70%{transform:translate(-50%,-50%) scale(.95)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}@keyframes taktir-pop-in{0%{opacity:0;transform:scale(.6) translateY(20px)}50%{transform:scale(1.05) translateY(-5px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes taktir-note-bounce{0%,to{transform:scale(1) rotate(0)}25%{transform:scale(1.2) rotate(-10deg)}50%{transform:scale(1.1) rotate(5deg)}75%{transform:scale(1.15) rotate(-5deg)}}@keyframes taktir-rhythm-bar{0%{transform:scaleY(.8)}to{transform:scaleY(1.2)}}@keyframes lock-glow{0%{filter:grayscale(100%) brightness(.7)}to{filter:grayscale(0%) brightness(1.2) drop-shadow(0 0 20px rgba(251,191,36,.8))}}@keyframes lock-break{0%{transform:translate(-50%,-50%) scale(1) rotate(0)}to{transform:translate(calc(-50% + var(--break-x, 0px)),calc(-50% + var(--break-y, 0px))) scale(.5) rotate(var(--break-rotation, 0deg));opacity:0}}@keyframes golden-shimmer{0%{opacity:0;transform:translate(-50%,-50%) scale(0)}50%{opacity:1;transform:translate(-50%,-50%) scale(1)}to{opacity:0;transform:translate(-50%,-50%) scale(.5) translateY(-20px)}}@keyframes star-ray-burst{0%{height:0;opacity:0}50%{height:60px;opacity:1}to{height:80px;opacity:0}}@keyframes icon-bounce{0%,to{transform:translateY(0) rotate(0)}25%{transform:translateY(-5px) rotate(-3deg)}50%{transform:translateY(-8px) rotate(0)}75%{transform:translateY(-5px) rotate(3deg)}}@keyframes moon-glow{0%,to{filter:drop-shadow(0 0 20px rgba(251,191,36,.4))}50%{filter:drop-shadow(0 0 30px rgba(251,191,36,.6))}}@keyframes gentle-float-up{0%,to{transform:translateY(0)}50%{transform:translateY(-5px)}}@keyframes stat-card-appear{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes page-slide-in-right{0%{opacity:0;transform:translate(30px)}to{opacity:1;transform:translate(0)}}@keyframes page-slide-in-left{0%{opacity:0;transform:translate(-30px)}to{opacity:1;transform:translate(0)}}@keyframes page-fade-morph{0%{opacity:0;transform:scale(.98)}to{opacity:1;transform:scale(1)}}@keyframes sparkle-transition{0%{opacity:0;transform:scale(0)}50%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.5) translateY(-20px)}}.animate-celebration{animation:celebration-score-bounce .6s cubic-bezier(.34,1.56,.64,1)}.animate-taktir-pop{animation:taktir-pop-in .5s cubic-bezier(.34,1.56,.64,1)}.animate-moon-glow{animation:moon-glow 3s ease-in-out infinite,gentle-float-up 4s ease-in-out infinite}.animate-icon-bounce{animation:icon-bounce .6s ease infinite}.animate-page-enter{animation:page-slide-in-right .3s cubic-bezier(.34,1.56,.64,1)}@keyframes chat-slide-up{0%{opacity:0;transform:translateY(12px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.chat-slide-up{animation:chat-slide-up .4s ease-out forwards}@keyframes star-pop{0%{transform:scale(1)}40%{transform:scale(1.55);filter:brightness(1.3) drop-shadow(0 0 10px rgba(251,191,36,.9))}70%{transform:scale(.88)}to{transform:scale(1)}}.star-pop{animation:star-pop .5s cubic-bezier(.34,1.56,.64,1);display:inline-block}@keyframes treasure-bounce{0%{transform:scale(1) rotate(0)}25%{transform:scale(1.2) rotate(-8deg)}50%{transform:scale(1.25) rotate(0)}75%{transform:scale(1.2) rotate(8deg)}to{transform:scale(1) rotate(0)}}.treasure-bounce{animation:treasure-bounce .65s cubic-bezier(.34,1.56,.64,1);display:inline-block}@media (max-width: 480px){.cloud-container{padding:1.25rem;border-radius:1.25rem}.btn-illustrated-primary,.btn-illustrated-secondary,.btn-illustrated-reward,.btn-illustrated-locked{padding:1rem 1.5rem;font-size:1rem}.btn-illustrated-icon{width:2.5rem;height:2.5rem;font-size:1.25rem}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}