@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400..900;1,9..144,400..900&family=Space+Grotesk:wght@400;500;700&display=swap');

:root{
  --pond:#0c1d17;
  --pond2:#10271e;
  --kelp:#1d3b2a;
  --moss:#7fd08a;
  --lime:#d8f56a;
  --cream:#f3ecd9;
  --cream-dim:#cfc7ab;
  --coral:#ff9ec6;
  --spore:#ffb35c;
  --ink:#0a140f;
  --card:#12291fE6;
  --ring:#2c5240;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; color:var(--cream);
  font-family:"Space Grotesk",system-ui,sans-serif;
  background:radial-gradient(120% 90% at 50% -10%, #17382a 0%, var(--pond) 55%, #070f0b 100%);
  min-height:100vh; overflow-x:hidden;
}
/* floating goo */
.goo{position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none; filter:blur(2px)}
.blob{position:absolute; border-radius:46% 54% 58% 42%/52% 44% 56% 48%; opacity:.5; animation:drift 16s ease-in-out infinite alternate}
.b1{width:44vmax;height:44vmax;left:-12vmax;top:-14vmax;background:radial-gradient(circle at 35% 35%,#2c6b4c,#123324 70%)}
.b2{width:30vmax;height:30vmax;right:-10vmax;top:8vh;background:radial-gradient(circle at 60% 40%,#3f5a2e,#16281a 70%);animation-delay:-4s}
.b3{width:36vmax;height:36vmax;left:8vw;bottom:-16vmax;background:radial-gradient(circle at 50% 50%,#274b57,#0e2120 70%);animation-delay:-8s}
.b4{width:14vmax;height:14vmax;right:12vw;bottom:6vh;background:radial-gradient(circle at 50% 50%,#ff9ec655,#ff9ec600 70%);animation-delay:-2s}
.b5{width:10vmax;height:10vmax;left:20vw;top:30vh;background:radial-gradient(circle at 50% 50%,#d8f56a44,#d8f56a00 70%);animation-delay:-11s}
@keyframes drift{from{transform:translate(0,0) scale(1) rotate(0)}to{transform:translate(4vmax,3vmax) scale(1.12) rotate(14deg)}}

#app{position:relative;z-index:1;max-width:620px;margin:0 auto;padding:28px 16px 64px}
.mast{text-align:center;margin:6px 0 18px}
.eyebrow{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--lime);margin:0 0 8px}
.eyebrow #genPill{background:#d8f56a22;border:1px solid #d8f56a55;border-radius:99px;padding:1px 10px}
h1{font-family:Fraunces,serif;font-weight:800;font-size:clamp(40px,9vw,64px);line-height:.95;margin:0;letter-spacing:-.02em}
h1 em{font-style:italic;color:var(--coral)}
.sub{color:var(--cream-dim);max-width:42ch;margin:10px auto 0;font-size:15px}
h2{font-family:Fraunces,serif;font-size:22px;margin:0 0 10px}
h2 small{font-family:"Space Grotesk";font-size:12px;color:var(--cream-dim);font-weight:400}

.card{
  background:var(--card); border:1px solid var(--ring);
  border-radius:28px 34px 26px 36px/34px 26px 36px 28px;
  padding:16px; margin:14px 0;
  box-shadow:0 18px 50px #0009, inset 0 1px 0 #ffffff14;
  backdrop-filter:blur(8px);
}
.pond-head{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:12px;flex-wrap:wrap}
.seedline{display:flex;align-items:center;gap:8px;font-size:13px}
.seedlabel{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--moss)}
#seedView{color:var(--lime);font-size:14px;word-break:break-all}
.pond-stats{display:flex;gap:8px;font-size:12px;color:var(--cream-dim)}
.pond-stats span{border:1px solid var(--ring);border-radius:99px;padding:2px 10px;background:#0004}

/* step eggs */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.egg{
  appearance:none;border:1px solid var(--ring);cursor:pointer;color:var(--cream);
  aspect-ratio:1/1.06;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  background:radial-gradient(circle at 35% 30%, #234d38, #101f17 75%);
  border-radius:52% 48% 55% 45%/48% 55% 45% 52%;
  transition:transform .12s ease, box-shadow .15s ease, background .2s;
  position:relative; font-family:inherit; min-height:72px;
}
.egg:nth-child(odd){border-radius:45% 55% 48% 52%/55% 45% 58% 42%}
.egg .n{font-size:10px;color:var(--cream-dim);letter-spacing:.1em}
.egg .g{font-size:22px;line-height:1;filter:saturate(1.2)}
.egg:active{transform:scale(.93)}
.egg.v1{background:radial-gradient(circle at 35% 30%, #3f7a54, #14291d 78%);box-shadow:0 0 0 1px #7fd08a55, 0 0 18px #7fd08a33}
.egg.v2{background:radial-gradient(circle at 35% 30%, #d8f56a, #5c6b1e 80%);box-shadow:0 0 0 1px #d8f56acc, 0 0 22px #d8f56a66;color:#101503}
.egg.v2 .n{color:#3c4a12}
.egg.v3{background:radial-gradient(circle at 35% 30%, #ffc0da, #7a2c50 80%);box-shadow:0 0 0 1px #ff9ec6cc, 0 0 22px #ff9ec688}
.egg.now{outline:2px solid var(--cream); outline-offset:2px; transform:scale(1.06)}
.egg.now::after{content:"";position:absolute;inset:-7px;border-radius:inherit;border:2px solid #ffffff66;animation:ripple .45s ease-out}
@keyframes ripple{from{transform:scale(.85);opacity:1}to{transform:scale(1.15);opacity:0}}
.egg.hit{animation:pulse .18s ease}
@keyframes pulse{40%{transform:scale(1.14)}}
.egg .beat{position:absolute;top:6px;right:10px;font-size:9px;color:var(--spore)}
.legend{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;color:var(--cream-dim);font-size:12px;margin:12px 0 2px}
.dot{display:inline-block;width:11px;height:11px;border-radius:60% 40% 55% 45%;margin-right:5px;vertical-align:-1px;border:1px solid var(--ring)}
.d-off{background:#101f17}.d-closed{background:var(--moss)}.d-accent{background:var(--lime)}.d-open{background:var(--coral)}

/* transport */
.transport{display:flex;gap:14px;align-items:center}
.play{
  flex:0 0 auto;width:108px;height:108px;cursor:pointer;color:var(--ink);
  font-family:Fraunces,serif;font-weight:800;font-size:19px;
  background:radial-gradient(circle at 35% 30%, #f4ffbe, var(--lime) 55%, #9dc22e);
  border:none;border-radius:48% 52% 55% 45%/52% 46% 54% 48%;
  box-shadow:0 10px 30px #d8f56a44, inset 0 2px 6px #fff9;
  transition:transform .12s;
}
.play:active{transform:scale(.94) rotate(-3deg)}
.play.on{background:radial-gradient(circle at 35% 30%, #ffd2e6, var(--coral) 60%, #c14e86)}
.play-icon{display:block;font-size:26px;line-height:1}
.sliders{flex:1;display:flex;flex-direction:column;gap:10px;min-width:0}
.ctl{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--cream-dim);display:flex;flex-direction:column;gap:6px}
.ctl b{color:var(--lime)}
.ctl.row{flex-direction:row;justify-content:space-between;align-items:center}
input[type=range]{width:100%;accent-color:var(--lime);height:28px}
.toggle{border:1px solid var(--ring);background:#0005;color:var(--cream);border-radius:99px;padding:6px 18px;cursor:pointer;font:inherit;font-size:13px}
.toggle.on{background:var(--lime);color:var(--ink);border-color:var(--lime);font-weight:700}

.actions{display:flex;gap:10px;margin:14px 0;flex-wrap:wrap}
.btn{
  flex:1;min-width:150px;cursor:pointer;font-family:inherit;font-weight:700;font-size:15px;
  color:var(--cream);background:#1b3a2c;border:1px solid var(--ring);
  border-radius:18px 22px 18px 24px/22px 18px 24px 18px;padding:13px 12px;
  transition:transform .12s, box-shadow .15s;
}
.btn:hover{box-shadow:0 6px 22px #0008}.btn:active{transform:scale(.96)}
.btn.Goo{background:linear-gradient(135deg,#3f7a54,#274b57);border-color:#7fd08a66}
.btn.small{flex:0 0 auto;min-width:0;font-size:13px;padding:10px 14px}

.clutch{margin:6px 0 14px}
.kids{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.kid{cursor:pointer;background:var(--card);border:1px solid var(--ring);color:var(--cream);
  border-radius:20px 24px 18px 26px;padding:10px;font-family:inherit;transition:transform .12s}
.kid:active{transform:scale(.95)}
.kid .mini{display:grid;grid-template-columns:repeat(4,1fr);gap:3px;margin-bottom:6px}
.kid .mini i{aspect-ratio:1;border-radius:50%;background:#0c1a13;border:1px solid var(--ring)}
.kid .mini i.f1{background:var(--moss)}.kid .mini i.f2{background:var(--lime)}.kid .mini i.f3{background:var(--coral)}
.kid b{font-size:12px;color:var(--lime)}

.share-row{display:flex;gap:8px}
#seedInput{flex:1;min-width:0;background:#0a1712;border:1px solid var(--ring);color:var(--lime);
  border-radius:14px;padding:10px 12px;font-family:ui-monospace,monospace;font-size:13px}
.note{font-size:13px;color:var(--moss);margin:8px 0 0;min-height:1.2em}
.foot{text-align:center;color:var(--cream-dim);font-size:13px;max-width:46ch;margin:18px auto 0}
.foot b{color:var(--lime)}

@media (max-width:430px){
  .transport{flex-direction:column}
  .play{width:100%;height:76px;border-radius:24px}
  .sliders{width:100%}
  .kids{grid-template-columns:1fr 1fr 1fr;gap:8px}
  .actions .btn{min-width:calc(50% - 5px);flex:1}
}
@media (prefers-reduced-motion:reduce){.blob{animation:none}.egg.now::after{display:none}}