@import"https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&family=Fredoka+One&display=swap";:root{--crayon-red: #FF4D6A;--crayon-orange: #FF8C42;--crayon-yellow: #FFD93D;--crayon-green: #6BCB77;--crayon-blue: #4D96FF;--crayon-purple: #9B59B6;--crayon-pink: #FF6B9D;--crayon-teal: #00C9A7;--bg-cream: #FFF8F0;--bg-paper: #FFFDF7;--text-dark: #2D2D2D;--text-soft: #6B6B6B;--shadow-soft: 0 4px 20px rgba(0,0,0,.08);--shadow-medium: 0 8px 32px rgba(0,0,0,.12);--shadow-glow: 0 0 20px rgba(255,77,106,.3);--radius-small: 12px;--radius-medium: 20px;--radius-large: 28px;--radius-xl: 40px;--font-main: "Nunito", sans-serif;--font-display: "Fredoka One", cursive;--transition-bounce: cubic-bezier(.34, 1.56, .64, 1);--transition-smooth: cubic-bezier(.4, 0, .2, 1)}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{width:100%;height:100%;overflow:hidden;font-family:var(--font-main);background:var(--bg-cream);color:var(--text-dark);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;touch-action:manipulation;-webkit-user-select:none;user-select:none}#root{display:flex;flex-direction:column;position:relative}body:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:9999;opacity:.03;background-image:url("data:image/svg+xml,%3Csvg width='100' height='100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100' height='100' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E")}@keyframes float{0%,to{transform:translateY(0) rotate(var(--float-rotate, 0deg))}50%{transform:translateY(-15px) rotate(calc(var(--float-rotate, 0deg) + 5deg))}}@keyframes wiggle{0%,to{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}@keyframes pulse-glow{0%,to{box-shadow:0 0 20px #ff4d6a4d}50%{box-shadow:0 0 40px #ff4d6a99}}@keyframes sparkle{0%,to{opacity:0;transform:scale(0) rotate(0)}50%{opacity:1;transform:scale(1) rotate(180deg)}}@keyframes rainbow-shift{0%{filter:hue-rotate(0deg)}to{filter:hue-rotate(360deg)}}@keyframes bounce-in{0%{transform:scale(0);opacity:0}50%{transform:scale(1.15)}to{transform:scale(1);opacity:1}}@keyframes slide-up{0%{transform:translateY(40px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes confetti-fall{0%{transform:translateY(-100vh) rotate(0);opacity:1}to{transform:translateY(100vh) rotate(720deg);opacity:0}}@keyframes crayon-draw{0%{stroke-dashoffset:1000}to{stroke-dashoffset:0}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes scale-in{0%{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-5px)}75%{transform:translate(5px)}}@keyframes gradient-move{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}.rainbow-text{background:linear-gradient(90deg,var(--crayon-red),var(--crayon-orange),var(--crayon-yellow),var(--crayon-green),var(--crayon-blue),var(--crayon-purple),var(--crayon-pink));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;background-size:200% auto;animation:gradient-move 3s ease infinite}.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 28px;border:none;border-radius:var(--radius-large);font-family:var(--font-main);font-weight:700;font-size:1rem;cursor:pointer;transition:all .3s var(--transition-bounce);position:relative;overflow:hidden}.btn:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(180deg,rgba(255,255,255,.3) 0%,transparent 50%);pointer-events:none}.btn:hover{transform:translateY(-3px) scale(1.03)}.btn:active{transform:translateY(0) scale(.97)}.btn-primary{background:linear-gradient(135deg,var(--crayon-red),var(--crayon-pink));color:#fff;box-shadow:0 6px 20px #ff4d6a66}.btn-secondary{background:linear-gradient(135deg,var(--crayon-blue),var(--crayon-teal));color:#fff;box-shadow:0 6px 20px #4d96ff66}.btn-fun{background:linear-gradient(135deg,var(--crayon-yellow),var(--crayon-orange));color:var(--text-dark);box-shadow:0 6px 20px #ffd93d66}.btn-purple{background:linear-gradient(135deg,var(--crayon-purple),var(--crayon-pink));color:#fff;box-shadow:0 6px 20px #9b59b666}.btn-green{background:linear-gradient(135deg,var(--crayon-green),var(--crayon-teal));color:#fff;box-shadow:0 6px 20px #6bcb7766}.btn-lg{padding:18px 36px;font-size:1.15rem;border-radius:var(--radius-xl)}.btn-icon{width:48px;height:48px;padding:0;border-radius:50%;font-size:1.3rem}.card{background:#fff;border-radius:var(--radius-medium);box-shadow:var(--shadow-soft);overflow:hidden;transition:all .3s var(--transition-smooth)}.card:hover{box-shadow:var(--shadow-medium);transform:translateY(-4px)}.page-container{width:100%;height:100%;display:flex;flex-direction:column;overflow:hidden;position:relative}.page-header{display:flex;align-items:center;padding:12px 16px;gap:12px;background:#fff;box-shadow:0 2px 12px #0000000f;z-index:10;flex-shrink:0}.page-header h2{font-family:var(--font-display);font-size:1.2rem;flex:1}.back-btn{width:40px;height:40px;border-radius:50%;border:none;background:var(--bg-cream);font-size:1.2rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s}.back-btn:active{transform:scale(.9)}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#00000026;border-radius:3px}.shell{width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:24px}.shell .card{max-width:480px;padding:40px 32px;text-align:center;animation:bounce-in .6s var(--transition-bounce) forwards}.shell .card h1{font-family:var(--font-display);font-size:1.6rem;margin:16px 0 8px}.shell .card p{color:var(--text-soft);font-size:.95rem;line-height:1.5}.tag{display:inline-block;padding:4px 14px;border-radius:999px;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;background:linear-gradient(135deg,var(--crayon-blue),var(--crayon-teal));color:#fff}.screen-enter{animation:slide-up .4s var(--transition-bounce) forwards}.screen-exit{animation:fade-in .3s reverse forwards}
