@import"https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Nunito:wght@400;600;700;800&display=swap";:root{--yellow: #FFD93D;--orange: #FF8C32;--red: #FF6B6B;--green: #6BCB77;--blue: #4D96FF;--purple: #9B72CF;--pink: #FF9FAB;--cream: #FFF8E7;--brown: #8B5E3C;--dark-brown: #5C3D2E}*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{font-family:Nunito,sans-serif;background:var(--cream);color:#3d2c1e;line-height:1.6;overflow-x:hidden}#root{min-height:100vh}.hero{background:linear-gradient(135deg,var(--yellow) 0%,var(--orange) 50%,var(--red) 100%);padding:3rem 1.5rem 4rem;text-align:center;position:relative;overflow:hidden}.hero:before{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle,rgba(255,255,255,.15) 1px,transparent 1px);background-size:30px 30px;animation:sparkle 20s linear infinite}@keyframes sparkle{0%{transform:translate(0)}to{transform:translate(30px,30px)}}.hero-content{position:relative;z-index:1;max-width:700px;margin:0 auto}.hero-emoji{font-size:5rem;display:block;margin-bottom:1rem;animation:bounce 2s ease-in-out infinite}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-15px)}}.hero h1{font-family:Fredoka,sans-serif;font-size:3rem;font-weight:700;color:#fff;text-shadow:3px 3px 0 var(--brown);margin-bottom:.5rem;letter-spacing:-.02em}.hero p{font-size:1.25rem;color:#fffffff2;font-weight:600;max-width:500px;margin:0 auto}.nav-bar{display:flex;justify-content:center;gap:.75rem;padding:1rem 1.5rem;background:#fff;box-shadow:0 4px 20px #0000000f;position:sticky;top:0;z-index:100;flex-wrap:wrap}.nav-pill{display:inline-flex;align-items:center;gap:.4rem;padding:.5rem 1.2rem;border-radius:999px;font-family:Fredoka,sans-serif;font-weight:600;font-size:.95rem;text-decoration:none;color:#fff;transition:transform .2s,box-shadow .2s;border:none;cursor:pointer}.nav-pill:hover{transform:translateY(-2px);box-shadow:0 4px 12px #00000026}.nav-pill.ingredients{background:var(--green)}.nav-pill.tools{background:var(--blue)}.nav-pill.steps{background:var(--orange)}.nav-pill.tips{background:var(--purple)}.nav-pill.fun{background:var(--pink)}.section{max-width:900px;margin:0 auto;padding:3rem 1.5rem}.section-header{text-align:center;margin-bottom:2rem}.section-header .emoji{font-size:3rem;display:block;margin-bottom:.5rem}.section-header h2{font-family:Fredoka,sans-serif;font-size:2rem;font-weight:700;color:var(--dark-brown)}.section-header p{color:#7a6555;font-size:1.1rem;margin-top:.3rem}.ingredients-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1rem}.ingredient-card{background:#fff;border-radius:1rem;padding:1.25rem 1.5rem;display:flex;align-items:center;gap:1rem;box-shadow:0 2px 12px #0000000f;border-left:5px solid var(--green);transition:transform .2s}.ingredient-card:hover{transform:translate(4px)}.ingredient-card .icon{font-size:2rem;flex-shrink:0}.ingredient-card .info h3{font-family:Fredoka,sans-serif;font-weight:600;font-size:1.05rem;color:var(--dark-brown)}.ingredient-card .info p{font-size:.9rem;color:#8a7a6a}.tools-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem}.tool-card{background:#fff;border-radius:1rem;padding:1.5rem 1rem;text-align:center;box-shadow:0 2px 12px #0000000f;border-bottom:4px solid var(--blue);transition:transform .2s}.tool-card:hover{transform:translateY(-4px)}.tool-card .icon{font-size:2.5rem;display:block;margin-bottom:.5rem}.tool-card h3{font-family:Fredoka,sans-serif;font-weight:600;font-size:1rem;color:var(--dark-brown)}.steps-list{display:flex;flex-direction:column;gap:1.5rem}.step-card{background:#fff;border-radius:1rem;padding:1.5rem 2rem;box-shadow:0 2px 16px #0000000f;display:flex;gap:1.5rem;align-items:flex-start;transition:transform .2s;position:relative}.step-card:hover{transform:scale(1.01)}.step-number{flex-shrink:0;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;font-family:Fredoka,sans-serif;font-weight:700;font-size:1.4rem;color:#fff}.step-card:nth-child(1) .step-number{background:var(--orange)}.step-card:nth-child(2) .step-number{background:var(--red)}.step-card:nth-child(3) .step-number{background:var(--green)}.step-card:nth-child(4) .step-number{background:var(--blue)}.step-card:nth-child(5) .step-number{background:var(--purple)}.step-card:nth-child(6) .step-number{background:var(--pink)}.step-card:nth-child(7) .step-number{background:var(--orange)}.step-content h3{font-family:Fredoka,sans-serif;font-weight:600;font-size:1.15rem;color:var(--dark-brown);margin-bottom:.3rem}.step-content p{color:#6a5a4a;font-size:.95rem;line-height:1.7}.step-content .step-tip{margin-top:.75rem;background:#fff3cd;border-radius:.75rem;padding:.6rem 1rem;font-size:.88rem;color:#856404;display:flex;align-items:center;gap:.5rem}.tips-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1rem}.tip-card{background:#fff;border-radius:1rem;padding:1.5rem;box-shadow:0 2px 12px #0000000f;text-align:center;transition:transform .2s}.tip-card:hover{transform:translateY(-4px)}.tip-card .icon{font-size:2.5rem;display:block;margin-bottom:.75rem}.tip-card h3{font-family:Fredoka,sans-serif;font-weight:600;color:var(--dark-brown);margin-bottom:.4rem}.tip-card p{color:#7a6555;font-size:.92rem}.fun-facts{background:linear-gradient(135deg,var(--purple) 0%,var(--pink) 100%);border-radius:1.5rem;padding:2.5rem;color:#fff}.fun-facts h2{font-family:Fredoka,sans-serif;text-align:center;font-size:2rem;margin-bottom:1.5rem}.facts-list{list-style:none;display:flex;flex-direction:column;gap:1rem}.facts-list li{background:#ffffff26;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border-radius:1rem;padding:1rem 1.5rem;font-size:1.05rem;display:flex;align-items:center;gap:.75rem}.facts-list li .fact-icon{font-size:1.5rem;flex-shrink:0}.footer{text-align:center;padding:2rem 1.5rem;background:var(--dark-brown);color:#ffffffb3;font-size:.9rem}.footer .footer-emoji{font-size:2rem;display:block;margin-bottom:.5rem}.footer strong{color:var(--yellow)}.wave-divider{height:40px;background:var(--cream);position:relative}.wave-divider:before{content:"";position:absolute;top:-20px;left:0;right:0;height:40px;background:var(--cream);clip-path:ellipse(60% 100% at 50% 100%)}@media(max-width:600px){.hero h1{font-size:2rem}.hero-emoji{font-size:3.5rem}.section-header h2{font-size:1.6rem}.step-card{flex-direction:column;align-items:center;text-align:center;padding:1.5rem}.nav-pill{font-size:.85rem;padding:.4rem 1rem}}