@import"https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Patrick+Hand&display=swap";:root{--pink: #ff6b9d;--yellow: #ffd93d;--mint: #6bcb77;--sky: #4d96ff;--purple: #9b59b6;--orange: #ff8c42;--cream: #fff8e7;--brown: #8b5e3c;--dark: #3d2c2c}*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{font-family:Fredoka,sans-serif;background:var(--cream);color:var(--dark);overflow-x:hidden}body:before{content:"";position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0;background-image:radial-gradient(circle 4px at 10% 20%,var(--pink) 100%,transparent),radial-gradient(circle 3px at 25% 45%,var(--sky) 100%,transparent),radial-gradient(circle 4px at 40% 15%,var(--mint) 100%,transparent),radial-gradient(circle 3px at 55% 65%,var(--yellow) 100%,transparent),radial-gradient(circle 4px at 70% 30%,var(--purple) 100%,transparent),radial-gradient(circle 3px at 85% 55%,var(--orange) 100%,transparent),radial-gradient(circle 4px at 15% 75%,var(--sky) 100%,transparent),radial-gradient(circle 3px at 60% 85%,var(--pink) 100%,transparent),radial-gradient(circle 4px at 90% 10%,var(--mint) 100%,transparent),radial-gradient(circle 3px at 35% 90%,var(--yellow) 100%,transparent);opacity:.4}#root{position:relative;z-index:1}.hero{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:2rem;position:relative;background:linear-gradient(180deg,#ffe0f0,#fff8e7)}.hero-cone{font-size:8rem;animation:wobble 2s ease-in-out infinite;filter:drop-shadow(0 8px 16px rgba(0,0,0,.1));margin-bottom:1rem}@keyframes wobble{0%,to{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}.hero h1{font-family:Fredoka,sans-serif;font-size:clamp(2.5rem,6vw,4.5rem);font-weight:700;background:linear-gradient(135deg,var(--pink),var(--purple),var(--sky));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:.5rem;line-height:1.2}.hero .subtitle{font-family:Patrick Hand,cursive;font-size:clamp(1.2rem,3vw,1.8rem);color:var(--brown);margin-bottom:2rem}.scroll-hint{display:flex;flex-direction:column;align-items:center;gap:.5rem;font-size:1rem;color:var(--brown);opacity:.7;animation:bounce 2s ease-in-out infinite}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(10px)}}.scroll-arrow{font-size:2rem}section{padding:4rem 2rem;max-width:900px;margin:0 auto}.section-title{font-family:Fredoka,sans-serif;font-size:clamp(2rem,4vw,3rem);font-weight:700;text-align:center;margin-bottom:.5rem}.section-subtitle{font-family:Patrick Hand,cursive;font-size:1.3rem;text-align:center;color:var(--brown);margin-bottom:3rem;opacity:.8}.steps-section{background:linear-gradient(180deg,#fff8e7,#e8f5e9,#fff8e7)}.steps{display:flex;flex-direction:column;gap:2.5rem}.step-card{display:flex;align-items:flex-start;gap:1.5rem;background:#fff;border-radius:1.5rem;padding:2rem;box-shadow:0 8px 30px #00000014;border:3px solid transparent;transition:transform .3s,box-shadow .3s;position:relative;overflow:hidden}.step-card:hover{transform:translateY(-4px);box-shadow:0 12px 40px #0000001f}.step-card:nth-child(1){border-color:var(--pink)}.step-card:nth-child(2){border-color:var(--sky)}.step-card:nth-child(3){border-color:var(--mint)}.step-card:nth-child(4){border-color:var(--yellow)}.step-card:nth-child(5){border-color:var(--purple)}.step-number{width:60px;height:60px;min-width:60px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.8rem;font-weight:700;color:#fff}.step-card:nth-child(1) .step-number{background:var(--pink)}.step-card:nth-child(2) .step-number{background:var(--sky)}.step-card:nth-child(3) .step-number{background:var(--mint)}.step-card:nth-child(4) .step-number{background:var(--yellow);color:var(--dark)}.step-card:nth-child(5) .step-number{background:var(--purple)}.step-emoji{font-size:3rem;margin-bottom:.5rem}.step-content h3{font-family:Fredoka,sans-serif;font-size:1.4rem;font-weight:600;margin-bottom:.3rem}.step-content p{font-family:Patrick Hand,cursive;font-size:1.2rem;color:#555;line-height:1.6}.flavors-section{background:linear-gradient(180deg,#fff8e7,#fce4ec,#fff8e7)}.flavors-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1.5rem}.flavor-card{background:#fff;border-radius:1.5rem;padding:1.5rem 1rem;text-align:center;box-shadow:0 6px 20px #0000000f;transition:transform .3s;cursor:default}.flavor-card:hover{transform:scale(1.08) rotate(-2deg)}.flavor-scoop{font-size:4rem;display:block;margin-bottom:.5rem}.flavor-name{font-family:Fredoka,sans-serif;font-weight:600;font-size:1.1rem;color:var(--dark)}.tips-section{background:linear-gradient(180deg,#fff8e7,#e3f2fd,#fff8e7)}.tips-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.5rem}.tip-card{background:#fff;border-radius:1.5rem;padding:2rem;text-align:center;box-shadow:0 6px 20px #0000000f;transition:transform .3s}.tip-card:hover{transform:translateY(-4px)}.tip-icon{font-size:3rem;margin-bottom:.75rem}.tip-card h3{font-family:Fredoka,sans-serif;font-size:1.2rem;font-weight:600;margin-bottom:.3rem}.tip-card p{font-family:Patrick Hand,cursive;font-size:1.1rem;color:#555;line-height:1.5}.tools-section{background:linear-gradient(180deg,#fff8e7,#fff3e0,#fff8e7)}.tools-list{display:flex;flex-wrap:wrap;justify-content:center;gap:2rem}.tool-item{display:flex;flex-direction:column;align-items:center;gap:.5rem;background:#fff;border-radius:1.5rem;padding:2rem 2.5rem;box-shadow:0 6px 20px #0000000f;transition:transform .3s}.tool-item:hover{transform:rotate(-5deg) scale(1.05)}.tool-emoji{font-size:4rem}.tool-name{font-family:Fredoka,sans-serif;font-weight:600;font-size:1.1rem}.footer{text-align:center;padding:3rem 2rem;background:linear-gradient(180deg,#fff8e7,#ffe0f0)}.footer-cone{font-size:4rem;display:block;margin-bottom:1rem;animation:wobble 3s ease-in-out infinite}.footer p{font-family:Patrick Hand,cursive;font-size:1.4rem;color:var(--brown)}.footer .credit{font-family:Fredoka,sans-serif;font-size:.9rem;margin-top:.5rem;opacity:.6}@media(max-width:600px){.step-card{flex-direction:column;align-items:center;text-align:center}.flavors-grid{grid-template-columns:repeat(2,1fr)}}