:root{
  --pink:#ff8fb1;
  --peach:#ffb26b;
  --sun:#ffd166;
  --mint:#7ee0c0;
  --sky:#78c9ff;
  --grape:#b48cf2;
  --cream:#fffaf2;
  --ink:#3d2b56;
  --ink-soft:#6b5b82;
  --white:#ffffff;
  --shadow:0 14px 0 rgba(61,43,86,.12);
  --shadow-sm:0 8px 0 rgba(61,43,86,.10);
  --round:28px;
  --font-display:"Baloo 2","Trebuchet MS",system-ui,sans-serif;
  --font-body:"Nunito","Segoe UI",system-ui,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--cream);
  font-size:18px;
  line-height:1.6;
  overflow-x:hidden;
  -webkit-tap-highlight-color:transparent;
}

h1,h2,h3{font-family:var(--font-display);line-height:1.1;margin:0}

.wrap{width:min(1120px,92vw);margin-inline:auto}

.skip{
  position:absolute;left:-9999px;top:0;z-index:99;
  background:var(--ink);color:#fff;padding:14px 20px;border-radius:0 0 14px 0;
}
.skip:focus{left:0}

.btn{
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.15rem;
  border:none;
  border-radius:999px;
  padding:16px 30px;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  text-decoration:none;
  transition:transform .12s ease, box-shadow .12s ease, background .2s ease;
  touch-action:manipulation;
}
.btn:active{transform:translateY(5px)}
.btn-primary{background:var(--pink);color:#fff;box-shadow:0 6px 0 #e0729a}
.btn-primary:active{box-shadow:0 1px 0 #e0729a}
.btn-ghost{background:#fff;color:var(--ink);box-shadow:0 6px 0 rgba(61,43,86,.15)}
.btn-ghost:active{box-shadow:0 1px 0 rgba(61,43,86,.15)}
.btn-big{
  background:var(--sun);color:var(--ink);font-size:1.4rem;padding:22px 40px;
  box-shadow:0 8px 0 #e0b34c;
}
.btn-big:active{box-shadow:0 2px 0 #e0b34c}
.btn:focus-visible,
.abc-key:focus-visible,
.blob:focus-visible,
.shape-card:focus-visible,
.animal-card:focus-visible,
.rhyme:focus-visible{outline:4px solid var(--grape);outline-offset:4px}

.hero{
  position:relative;
  min-height:min(760px,96svh);
  display:grid;
  place-items:center;
  text-align:center;
  padding:80px 0 140px;
  background:linear-gradient(180deg,#a5dcff 0%,#c9ecff 45%,#ffe9c9 100%);
  overflow:hidden;
}
.sky{position:absolute;inset:0;pointer-events:none}

.sun{
  position:absolute;top:6%;right:8%;
  width:130px;height:130px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#fff3b0,var(--sun));
  box-shadow:0 0 0 22px rgba(255,209,102,.25),0 0 0 46px rgba(255,209,102,.14);
  animation:pulse 5s ease-in-out infinite;
}
@keyframes pulse{50%{transform:scale(1.07)}}

.cloud{
  position:absolute;background:#fff;border-radius:100px;opacity:.92;
  filter:drop-shadow(0 8px 12px rgba(80,120,160,.14));
}
.cloud::before,.cloud::after{content:"";position:absolute;background:#fff;border-radius:50%}
.c1{width:190px;height:56px;top:16%;left:-200px;animation:drift 34s linear infinite}
.c1::before{width:82px;height:82px;top:-34px;left:34px}
.c1::after{width:60px;height:60px;top:-24px;left:104px}
.c2{width:140px;height:44px;top:38%;left:-160px;animation:drift 46s linear infinite 6s;opacity:.8}
.c2::before{width:64px;height:64px;top:-26px;left:26px}
.c2::after{width:48px;height:48px;top:-18px;left:78px}
.c3{width:220px;height:62px;top:60%;left:-240px;animation:drift 58s linear infinite 14s;opacity:.65}
.c3::before{width:94px;height:94px;top:-38px;left:40px}
.c3::after{width:70px;height:70px;top:-26px;left:124px}
@keyframes drift{to{transform:translateX(calc(100vw + 260px))}}

.balloon{position:absolute;font-size:3rem;animation:float 9s ease-in-out infinite}
.b1{left:7%;top:52%}
.b2{right:12%;top:64%;animation-delay:2.4s;font-size:2.4rem}
@keyframes float{50%{transform:translateY(-32px) rotate(6deg)}}

.bird{position:absolute;left:22%;top:24%;font-size:2rem;animation:fly 22s linear infinite}
@keyframes fly{
  0%{transform:translate(0,0)}
  50%{transform:translate(46vw,-40px)}
  100%{transform:translate(92vw,10px)}
}

.hero-inner{position:relative;z-index:2;width:min(880px,92vw)}

.eyebrow{
  font-family:var(--font-display);font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;font-size:1rem;color:#4b7fa8;margin:0 0 .4rem;
}

.title{
  font-size:clamp(3rem,11vw,7rem);
  font-weight:800;
  display:flex;flex-wrap:wrap;justify-content:center;gap:0 .35em;
}
.w{display:inline-flex}
.l{
  display:inline-block;
  animation:bob 2.6s ease-in-out infinite;
  animation-delay:calc(var(--i) * .08s);
  color:var(--pink);
  text-shadow:0 5px 0 #fff,0 9px 0 rgba(61,43,86,.14);
}
.l:nth-child(3n+1){color:var(--grape);}
.l:nth-child(3n+2){color:var(--sky);}
.l:nth-child(4n){color:var(--peach);}
@keyframes bob{50%{transform:translateY(-14px) rotate(-3deg)}}

.lede{
  font-size:clamp(1.05rem,2.4vw,1.35rem);
  font-weight:600;color:#3f5d75;
  max-width:36ch;margin:1.2rem auto 2rem;
}

.hero-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.hint{margin-top:1.4rem;font-size:.95rem;color:#5b7d95;font-weight:600}

.wave{position:absolute;bottom:-1px;left:0;width:100%;line-height:0}
.wave svg{width:100%;height:110px;display:block}
.wave path{fill:var(--cream)}

.section{padding:clamp(60px,9vw,110px) 0;position:relative}
.sec-head{text-align:center;margin-bottom:clamp(32px,5vw,56px)}
.badge{
  display:inline-block;font-family:var(--font-display);font-weight:700;
  background:#fff;padding:8px 20px;border-radius:999px;font-size:1rem;
  box-shadow:var(--shadow-sm);margin-bottom:1rem;
}
.sec-head h2{font-size:clamp(2rem,5.5vw,3.4rem);font-weight:800}
.sub{color:var(--ink-soft);font-weight:600;max-width:44ch;margin:.7rem auto 0}

.sec-abc{background:var(--cream)}
.sec-colour{background:#f3f0ff}
.sec-count{background:#eafbf4}
.sec-shape{background:var(--cream)}
.sec-animal{background:#fff2e6}
.sec-rhyme{background:#eef7ff}
.sec-grown{background:var(--cream)}

.abc-stage{display:grid;gap:clamp(28px,4vw,44px);justify-items:center}

.abc-card{
  background:#fff;border-radius:var(--round);
  padding:28px 44px;text-align:center;box-shadow:var(--shadow);
  min-width:min(320px,86vw);
  border:5px solid var(--sun);
}
.abc-card.pop{animation:pop .45s cubic-bezier(.3,1.6,.5,1)}
@keyframes pop{0%{transform:scale(.86)}60%{transform:scale(1.05)}100%{transform:scale(1)}}
.abc-emoji{font-size:clamp(4rem,13vw,6rem);line-height:1}
.abc-letter{font-family:var(--font-display);font-weight:800;font-size:clamp(2rem,6vw,3rem);color:var(--pink)}
.abc-word{font-family:var(--font-display);font-weight:700;font-size:1.5rem;color:var(--ink-soft)}

.abc-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(64px,1fr));
  gap:12px;width:min(880px,94vw);
}
.abc-key{
  aspect-ratio:1;border:none;border-radius:20px;cursor:pointer;
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(1.5rem,4vw,2.1rem);color:#fff;
  display:grid;place-items:center;
  transition:transform .12s ease,box-shadow .12s ease;
  touch-action:manipulation;
}
.abc-key:hover{transform:translateY(-4px) rotate(-3deg)}
.abc-key:active{transform:translateY(4px)}
.abc-key.on{transform:translateY(-6px) scale(1.08);box-shadow:0 0 0 5px #fff,0 0 0 10px currentColor}

.colour-stage{display:grid;gap:clamp(28px,4vw,40px);justify-items:center}
.colour-canvas{
  width:min(560px,90vw);min-height:clamp(180px,30vw,250px);
  border-radius:var(--round);display:grid;place-items:center;
  background:#fff;box-shadow:var(--shadow);
  transition:background .5s ease;
  border:6px solid #fff;
}
.colour-name{
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(2rem,7vw,3.6rem);color:#fff;
  text-shadow:0 4px 0 rgba(0,0,0,.18);
  transition:color .3s ease;
}
.colour-name.dark{color:var(--ink);text-shadow:0 3px 0 rgba(255,255,255,.6)}
.colour-name.idle{color:var(--ink-soft);text-shadow:none;font-size:clamp(1.3rem,4vw,2rem)}
.colour-blobs{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;max-width:min(720px,94vw)}
.blob{
  width:clamp(64px,13vw,90px);aspect-ratio:1;border:none;border-radius:50%;
  cursor:pointer;box-shadow:0 8px 0 rgba(61,43,86,.16);
  transition:transform .14s ease;touch-action:manipulation;
}
.blob:hover{transform:scale(1.12) rotate(8deg)}
.blob:active{transform:scale(.94) translateY(4px)}

.count-stage{display:grid;gap:26px;justify-items:center}
.count-number{
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(5rem,20vw,10rem);line-height:1;color:var(--mint);
  text-shadow:0 8px 0 #fff,0 12px 0 rgba(61,43,86,.10);
}
.count-number.pop{animation:pop .4s cubic-bezier(.3,1.6,.5,1)}
.count-pond{
  display:flex;flex-wrap:wrap;gap:10px;justify-content:center;align-items:center;
  min-height:120px;width:min(660px,92vw);
  background:#fff;border-radius:var(--round);padding:22px;
  box-shadow:var(--shadow);
}
.duck{font-size:clamp(2.4rem,7vw,3.4rem);animation:drop .5s cubic-bezier(.3,1.5,.5,1)}
@keyframes drop{0%{transform:translateY(-40px) scale(.4);opacity:0}100%{transform:none;opacity:1}}
.count-empty{color:var(--ink-soft);font-weight:700;font-family:var(--font-display);font-size:1.2rem}
.count-controls{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}

.shape-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:20px;width:min(960px,94vw);margin-inline:auto;
}
.shape-card{
  background:#fff;border:none;border-radius:var(--round);
  padding:26px 14px;cursor:pointer;display:grid;gap:12px;justify-items:center;
  box-shadow:var(--shadow-sm);transition:transform .14s ease;touch-action:manipulation;
  font-family:var(--font-display);
}
.shape-card:hover{transform:translateY(-6px)}
.shape-card.wiggle{animation:wiggle .55s ease}
@keyframes wiggle{
  0%,100%{transform:rotate(0)}
  20%{transform:rotate(-9deg) scale(1.06)}
  50%{transform:rotate(9deg) scale(1.06)}
  80%{transform:rotate(-5deg)}
}
.shape-art{width:88px;height:88px;display:grid;place-items:center}
.shape-name{font-weight:800;font-size:1.25rem;color:var(--ink)}

.animal-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));
  gap:18px;width:min(980px,94vw);margin-inline:auto;
}
.animal-card{
  background:#fff;border:none;border-radius:26px;padding:22px 10px;cursor:pointer;
  display:grid;gap:8px;justify-items:center;box-shadow:var(--shadow-sm);
  transition:transform .14s ease;font-family:var(--font-display);touch-action:manipulation;
}
.animal-card:hover{transform:translateY(-6px) rotate(-2deg)}
.animal-face{font-size:clamp(2.8rem,8vw,3.6rem);line-height:1}
.animal-card.jump .animal-face{animation:jump .6s cubic-bezier(.3,1.4,.5,1)}
@keyframes jump{0%,100%{transform:none}35%{transform:translateY(-22px) scale(1.15)}}
.animal-name{font-weight:800;font-size:1.05rem}
.animal-say{font-weight:700;font-size:.95rem;color:var(--ink-soft);font-family:var(--font-body)}

.rhyme-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:20px;width:min(1000px,94vw);margin-inline:auto;
}
.rhyme{
  background:#fff;border-radius:var(--round);box-shadow:var(--shadow-sm);
  overflow:hidden;border:none;padding:0;text-align:left;cursor:pointer;
  font-family:inherit;color:inherit;width:100%;
  transition:transform .14s ease;
}
.rhyme:hover{transform:translateY(-5px)}
.rhyme-top{display:flex;align-items:center;gap:14px;padding:20px 22px}
.rhyme-ico{font-size:2.4rem;line-height:1}
.rhyme-title{font-family:var(--font-display);font-weight:800;font-size:1.3rem;flex:1}
.rhyme-chev{font-size:1.2rem;color:var(--ink-soft);transition:transform .25s ease}
.rhyme[aria-expanded="true"] .rhyme-chev{transform:rotate(180deg)}
.rhyme-body{
  display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease;
}
.rhyme[aria-expanded="true"] .rhyme-body{grid-template-rows:1fr}
.rhyme-body>span{overflow:hidden;display:block}
.rhyme-words{display:block;
  margin:0;padding:0 22px 22px;white-space:pre-line;
  font-weight:600;color:var(--ink-soft);line-height:1.9;
}

.grown-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(228px,1fr));
  gap:20px;width:min(1000px,94vw);margin-inline:auto;
}
.note{
  background:#fff;border-radius:var(--round);padding:28px 26px;
  box-shadow:var(--shadow-sm);
}
.note-ico{font-size:2.2rem;margin-bottom:.4rem}
.note h3{font-size:1.3rem;font-weight:800;margin-bottom:.4rem}
.note p{margin:0;color:var(--ink-soft);font-size:1rem;font-weight:600}

.footer{
  background:linear-gradient(180deg,#2f2247,#3d2b56);
  color:#fff;text-align:center;padding:70px 0 60px;
}
.foot-emoji{font-size:2rem;letter-spacing:.4em;margin-bottom:1rem}
.foot-big{font-family:var(--font-display);font-weight:800;font-size:clamp(1.6rem,4vw,2.2rem);margin:0}
.foot-small{color:#c8b8e0;margin:.4rem 0 0;font-weight:600}

.confetti-layer{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:60}
.confetti{
  position:absolute;width:12px;height:16px;border-radius:3px;
  animation:fall linear forwards;
}
@keyframes fall{
  0%{transform:translateY(-20px) rotate(0);opacity:1}
  100%{transform:translateY(105vh) rotate(720deg);opacity:.9}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  html{scroll-behavior:auto}
}