:root {
  --ink: #06130f;
  --deep: #071b1b;
  --swamp: #123f37;
  --lime: #b8ed69;
  --mint: #70d99a;
  --cream: #f5efd7;
  --gold: #ffc857;
  --danger: #ff6f61;
  --poison: #a969d6;
  --mx: 0;
  --my: 0;
  --eye-x: 0px;
  --eye-y: 0px;
}

* { box-sizing: border-box; }

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  color: var(--cream);
  background:
    radial-gradient(circle at 77% 22%, rgba(112, 217, 154, .11), transparent 26%),
    linear-gradient(150deg, #06130f 0%, #071d1a 47%, #092925 100%);
  font-family: "Trebuchet MS", "Arial Rounded MT Bold", Arial, sans-serif;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(3, 13, 10, .9) 0%, rgba(3, 13, 10, .62) 38%, transparent 72%),
    radial-gradient(ellipse at center, transparent 36%, rgba(0, 8, 6, .48) 100%);
  mix-blend-mode: multiply;
}

#swamp-canvas, .world, .tongue-layer {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
}

#swamp-canvas { z-index: 1; pointer-events: none; }
.world { z-index: 0; overflow: hidden; pointer-events: none; }

.world::before {
  content: "";
  position: absolute;
  inset: -10%;
  background:
    radial-gradient(circle at 78% 27%, rgba(169, 105, 214, .13), transparent 18%),
    radial-gradient(circle at 73% 23%, rgba(184, 237, 105, .09), transparent 30%),
    linear-gradient(#071713 0 54%, #0a2823 72%, #071c19 100%);
  transform: translate(calc(var(--mx) * -8px), calc(var(--my) * -5px));
  transition: transform .35s ease-out;
}

.moon {
  position: absolute;
  width: clamp(190px, 22vw, 390px);
  aspect-ratio: 1;
  right: 8vw;
  top: -4vw;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 38%, #eef6cf 0 8%, #b9d99a 42%, #659878 72%, rgba(52, 111, 89, .2) 73%);
  box-shadow: 0 0 70px rgba(154, 225, 172, .2), 0 0 160px rgba(112, 217, 154, .12);
  opacity: .62;
  transform: translate(calc(var(--mx) * 9px), calc(var(--my) * 5px));
  animation: moon-breathe 8s ease-in-out infinite;
}

.moon::before, .moon::after, .moon span {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: rgba(39, 91, 70, .2);
  filter: blur(2px);
}
.moon::before { width: 21%; height: 13%; left: 23%; top: 49%; transform: rotate(18deg); }
.moon::after { width: 14%; height: 17%; right: 23%; top: 26%; }
.moon span { width: 10%; height: 8%; left: 48%; top: 68%; }

.aurora {
  position: absolute;
  width: 65vw;
  height: 25vh;
  right: -5vw;
  top: 8vh;
  border-radius: 50%;
  filter: blur(45px);
  opacity: .15;
  transform-origin: center;
}
.aurora-one { background: var(--mint); animation: aurora 11s ease-in-out infinite alternate; }
.aurora-two { background: var(--poison); animation: aurora 15s ease-in-out -5s infinite alternate-reverse; opacity: .08; }

.tree-line {
  position: absolute;
  left: -8%;
  width: 116%;
  bottom: 19vh;
  height: 56vh;
  opacity: .86;
  background-repeat: repeat-x;
  transform-origin: bottom;
}

.trees-far {
  bottom: 25vh;
  opacity: .27;
  filter: blur(1.5px);
  background-image:
    linear-gradient(83deg, transparent 46%, #0c3029 47% 53%, transparent 54%),
    radial-gradient(ellipse at 50% 55%, #0d382f 0 27%, transparent 29%);
  background-size: 150px 100%, 190px 52%;
  transform: translateX(calc(var(--mx) * -5px));
}

.trees-near {
  background-image:
    linear-gradient(87deg, transparent 42%, #061a16 43% 51%, transparent 52%),
    radial-gradient(ellipse at 48% 58%, #08231d 0 25%, transparent 27%),
    radial-gradient(ellipse at 10% 67%, #071f1b 0 19%, transparent 21%);
  background-size: 230px 100%, 270px 60%, 310px 48%;
  transform: translateX(calc(var(--mx) * -11px));
}

.fog {
  position: absolute;
  left: -25%;
  width: 150%;
  height: 18vh;
  border-radius: 50%;
  filter: blur(30px);
  background: linear-gradient(90deg, transparent, rgba(124, 191, 159, .13), rgba(196, 224, 183, .08), transparent);
  mix-blend-mode: screen;
}
.fog-one { bottom: 19vh; animation: fog-drift 19s linear infinite alternate; }
.fog-two { bottom: 7vh; opacity: .6; animation: fog-drift 27s linear -9s infinite alternate-reverse; }

.water {
  position: absolute;
  left: -5%;
  right: -5%;
  bottom: -8%;
  height: 38%;
  transform: perspective(500px) rotateX(53deg) translateY(15%);
  transform-origin: bottom;
  background:
    repeating-radial-gradient(ellipse at 75% 20%, transparent 0 24px, rgba(111, 204, 161, .1) 25px 27px, transparent 28px 55px),
    repeating-linear-gradient(173deg, transparent 0 14px, rgba(126, 220, 171, .06) 15px, transparent 18px 33px),
    linear-gradient(rgba(12, 64, 54, .44), #061b18);
  animation: water-shift 9s linear infinite;
}

.ripple {
  position: absolute;
  width: 150px;
  height: 65px;
  border: 3px solid rgba(184, 237, 105, .22);
  border-radius: 50%;
  animation: ripple 4.5s ease-out infinite;
}
.ripple-one { left: 14%; top: 34%; }
.ripple-two { right: 12%; top: 20%; animation-delay: -2s; }
.ripple-three { left: 53%; top: 54%; animation-delay: -3.2s; }

.page-shell {
  position: relative;
  z-index: 4;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  min-height: 100svh;
  padding: clamp(16px, 2.2vw, 36px) clamp(18px, 4.2vw, 78px) clamp(13px, 1.8vw, 28px);
  display: grid;
  grid-template-rows: auto 1fr auto;
  overflow: hidden;
  isolation: isolate;
}

.topbar, .footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  letter-spacing: .18em;
  font-weight: 900;
  font-size: clamp(9px, .72vw, 12px);
  color: rgba(245, 239, 215, .68);
  text-transform: uppercase;
}

.serious, .top-meta, .footer > span, .footer > b { text-shadow: 0 2px 12px rgba(0, 0, 0, .8); }
.status-dot { display: inline-block; width: 7px; height: 7px; margin-right: 10px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 14px var(--lime); animation: beacon 2s ease-in-out infinite; }
.top-meta { display: flex; gap: 10px; color: rgba(184, 237, 105, .7); }
.top-meta b { color: rgba(245, 239, 215, .25); }
.release-notes-trigger {
  min-height: 26px;
  margin: -7px 0;
  padding: 4px 10px;
  border: 1px solid rgba(184, 237, 105, .34);
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--lime);
  background: rgba(7, 35, 29, .72);
  box-shadow: inset 0 1px rgba(255, 255, 255, .05), 0 6px 20px rgba(0, 0, 0, .16);
  font: inherit;
  font-size: .92em;
  letter-spacing: .13em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .18s ease, background .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.release-notes-trigger strong { color: var(--gold); font-size: .84em; letter-spacing: .08em; }
.release-notes-trigger:hover,
.release-notes-trigger:focus-visible {
  outline: none;
  color: var(--cream);
  border-color: rgba(184, 237, 105, .75);
  background: rgba(20, 67, 54, .88);
  box-shadow: 0 0 20px rgba(184, 237, 105, .12), inset 0 1px rgba(255, 255, 255, .09);
  transform: translateY(-1px);
}

.hero {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 56fr) minmax(330px, 44fr);
  align-items: center;
  position: relative;
}

.pitch {
  position: relative;
  z-index: 7;
  width: min(100%, 780px);
  align-self: center;
}

.logo-crop {
  width: min(100%, 680px);
  aspect-ratio: 3.45 / 1;
  overflow: hidden;
  margin: -2.8% 0 -1.3% -1.5%;
  filter: drop-shadow(0 10px 28px rgba(0, 0, 0, .55)) drop-shadow(0 0 20px rgba(184, 237, 105, .12));
}
.logo-crop img { display: block; width: 103%; height: auto; transform: translateY(-24.5%); }

.loop-strip {
  display: flex;
  align-items: center;
  gap: clamp(7px, .8vw, 14px);
  color: var(--gold);
  font-size: clamp(9px, .72vw, 12px);
  font-weight: 1000;
  letter-spacing: .24em;
  margin: 0 0 clamp(7px, 1.2vh, 13px) 3px;
}
.loop-strip i { width: 5px; height: 5px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--mint); opacity: .65; }

h1 {
  margin: 0;
  color: var(--cream);
  font-family: Impact, "Arial Black", "Trebuchet MS", sans-serif;
  font-size: clamp(48px, 6.35vw, 110px);
  font-weight: 900;
  letter-spacing: -.045em;
  line-height: .78;
  text-transform: uppercase;
  text-wrap: balance;
  text-shadow: 0 9px 0 rgba(1, 11, 8, .22), 0 20px 55px rgba(0, 0, 0, .55);
}
h1 em { color: var(--lime); font-style: normal; -webkit-text-stroke: 1px rgba(255, 255, 255, .04); }

.lede {
  max-width: 650px;
  margin: clamp(16px, 2.2vh, 26px) 0 clamp(17px, 2.5vh, 29px) 3px;
  color: rgba(245, 239, 215, .8);
  font-size: clamp(14px, 1.15vw, 19px);
  font-weight: 600;
  line-height: 1.48;
  text-wrap: balance;
}
.lede strong { color: var(--gold); }

.cta-block { width: min(100%, 590px); }
.download {
  position: relative;
  height: clamp(66px, 8.2vh, 84px);
  width: 100%;
  padding: 0 clamp(18px, 2.2vw, 32px);
  border: 2px solid #d8ff96;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  overflow: visible;
  color: #07130b;
  text-decoration: none;
  background: linear-gradient(135deg, #d2f880 0%, #a8df5e 47%, #75b947 100%);
  box-shadow: 0 9px 0 #426d29, 0 17px 35px rgba(0, 0, 0, .4), inset 0 2px 0 rgba(255, 255, 255, .55);
  transform-origin: center bottom;
  animation: cta-breathe 3.3s ease-in-out infinite;
  transition: transform .2s cubic-bezier(.2, 1.6, .4, 1), box-shadow .2s ease, filter .2s ease;
  cursor: pointer;
}
.download::before {
  content: "";
  position: absolute;
  inset: -12px;
  border: 2px solid rgba(184, 237, 105, .2);
  border-radius: 29px;
  opacity: 0;
  transform: scale(.88);
  transition: .3s ease;
}
.button-shine { position: absolute; inset: 2px; overflow: hidden; border-radius: 17px; pointer-events: none; }
.button-shine::after { content: ""; position: absolute; width: 35%; height: 220%; top: -60%; left: -55%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent); transform: rotate(18deg); animation: shine 4.2s 1.3s ease-in-out infinite; }
.button-copy { display: grid; gap: 2px; position: relative; z-index: 1; }
.button-copy small { font-size: clamp(8px, .65vw, 10px); letter-spacing: .22em; font-weight: 900; opacity: .7; }
.button-copy strong { font-family: Impact, "Arial Black", sans-serif; font-size: clamp(23px, 2vw, 34px); letter-spacing: .035em; font-weight: 900; }
.download-icon { position: relative; width: 44px; height: 44px; flex: 0 0 44px; border: 2px solid rgba(6, 19, 15, .26); border-radius: 50%; }
.download-icon::before { content: ""; position: absolute; width: 4px; height: 18px; left: 18px; top: 8px; border-radius: 3px; background: var(--ink); }
.download-icon::after { content: ""; position: absolute; width: 12px; height: 12px; left: 13px; top: 15px; border-right: 4px solid var(--ink); border-bottom: 4px solid var(--ink); transform: rotate(45deg); }
.download-icon i { position: absolute; width: 22px; height: 3px; left: 9px; bottom: 7px; border-radius: 3px; background: var(--ink); }
.download-count { position:absolute;z-index:4;right:17px;top:-13px;min-height:25px;padding:4px 9px;border:1px solid rgba(255,200,87,.68);border-radius:999px;display:flex;align-items:center;gap:5px;color:var(--gold);background:rgba(5,27,22,.94);box-shadow:0 7px 18px rgba(0,0,0,.35),inset 0 1px rgba(255,255,255,.06);opacity:0;transform:translateY(5px) scale(.94);transition:opacity .25s ease,transform .25s cubic-bezier(.2,1.5,.4,1);pointer-events:none;white-space:nowrap}
.download-count.is-ready{opacity:1;transform:none}.download-count b{font-family:Impact,"Arial Black",sans-serif;font-size:14px;line-height:1;color:var(--lime);letter-spacing:.04em}.download-count small{font-size:7px;font-weight:1000;letter-spacing:.12em}
.download:hover, .download:focus-visible { outline: none; transform: translateY(-5px) scale(1.025, .98); filter: saturate(1.17) brightness(1.08); box-shadow: 0 14px 0 #426d29, 0 25px 50px rgba(0,0,0,.48), 0 0 38px rgba(184,237,105,.3); }
.download:hover::before, .download:focus-visible::before { opacity: 1; transform: scale(1.02); animation: button-ring 1.25s ease-out infinite; }
.download:active { transform: translateY(7px) scale(.98, .93); box-shadow: 0 2px 0 #426d29, 0 8px 20px rgba(0,0,0,.45); }

.button-fly { position: absolute; width: 8px; height: 5px; border-radius: 50%; background: var(--gold); opacity: 0; box-shadow: 0 0 10px var(--gold); pointer-events: none; }
.button-fly::before, .button-fly::after { content: ""; position: absolute; width: 6px; height: 4px; top: -3px; border-radius: 50%; background: rgba(245,239,215,.72); }
.button-fly::before { left: -4px; transform: rotate(25deg); }.button-fly::after { right: -4px; transform: rotate(-25deg); }
.download:hover .button-fly, .download:focus-visible .button-fly { opacity: 1; }
.download:hover .fly-a { animation: fly-pop-a 1.4s ease-out infinite; }
.download:hover .fly-b { animation: fly-pop-b 1.7s .15s ease-out infinite; }
.download:hover .fly-c { animation: fly-pop-c 1.55s .35s ease-out infinite; }

.download-meta { display: flex; align-items: center; justify-content: center; gap: 11px; margin-top: 15px; color: rgba(245,239,215,.57); font-size: clamp(8px, .63vw, 10px); font-weight: 900; letter-spacing: .16em; }
.download-meta i { width: 3px; height: 3px; border-radius: 50%; background: var(--mint); }
.download-privacy{margin:7px 0 0;text-align:center;color:rgba(245,239,215,.28);font-size:clamp(6px,.48vw,8px);font-weight:900;letter-spacing:.1em}.download-privacy i{display:inline-block;width:5px;height:5px;margin-right:6px;border-radius:50%;background:var(--gold);box-shadow:0 0 8px rgba(255,200,87,.45)}

.proof {
  display: flex;
  align-items: stretch;
  gap: clamp(16px, 2vw, 30px);
  margin: clamp(18px, 3vh, 34px) 0 0 3px;
}
.proof > div { display: flex; align-items: center; gap: 9px; position: relative; }
.proof > div + div::before { content: ""; position: absolute; left: calc(clamp(16px, 2vw, 30px) / -2); height: 28px; width: 1px; background: rgba(112,217,154,.25); }
.proof strong { color: var(--lime); font-family: Impact, "Arial Black", sans-serif; font-size: clamp(25px, 2.1vw, 36px); line-height: 1; text-shadow: 0 0 20px rgba(184,237,105,.22); }
.proof span { color: rgba(245,239,215,.55); font-size: clamp(7px, .58vw, 10px); line-height: 1.25; letter-spacing: .1em; font-weight: 900; }

.creature-stage { position: relative; height: 100%; min-height: 360px; z-index: 3; transform: translate(calc(var(--mx) * 4px), calc(var(--my) * 3px)); transition: transform .25s ease-out; }

.frog-wrap {
  --frog-size: min(36vw, 59vh);
  position: absolute;
  width: var(--frog-size);
  height: calc(var(--frog-size) * .92);
  right: max(-1vw, calc((100vw - 1600px) * .02));
  bottom: 3%;
  transform-origin: 50% 92%;
  animation: frog-float 5s ease-in-out infinite, frog-breathe 2.8s ease-in-out infinite;
  filter: drop-shadow(0 28px 30px rgba(0,0,0,.5));
}
.frog-shadow { position: absolute; width: 78%; height: 12%; left: 12%; bottom: 1%; border-radius: 50%; background: rgba(0, 5, 3, .58); filter: blur(13px); animation: shadow-breathe 2.8s ease-in-out infinite; }
.frog-body { position: absolute; width: 70%; height: 58%; left: 15%; bottom: 9%; border: 3px solid rgba(3,23,10,.75); border-radius: 47% 47% 40% 40% / 42% 42% 58% 58%; background: radial-gradient(circle at 31% 22%, #80c757 0 8%, transparent 9%), linear-gradient(145deg, #62ad45 0%, #397e3a 55%, #1d5135 100%); box-shadow: inset -20px -30px 0 rgba(9,45,28,.22), inset 14px 10px 0 rgba(213,255,145,.08); }
.frog-belly { position: absolute; width: 60%; height: 67%; left: 20%; bottom: 4%; border-radius: 46% 46% 51% 51%; background: radial-gradient(ellipse at 50% 18%, rgba(235,238,159,.75), #a7bd72 62%, #78935d 100%); opacity: .82; box-shadow: inset 0 -20px 30px rgba(31,76,42,.2); }
.spot { position: absolute; border-radius: 50%; background: #214f31; opacity: .62; }.spot-one{width:8%;aspect-ratio:1;left:10%;top:29%}.spot-two{width:5%;aspect-ratio:1;right:12%;top:20%}.spot-three{width:10%;height:6%;right:7%;top:48%;transform:rotate(-28deg)}
.frog-head { position: absolute; width: 74%; height: 46%; left: 13%; top: 7%; border: 3px solid rgba(3,23,10,.8); border-radius: 47% 47% 43% 43% / 55% 55% 42% 42%; background: linear-gradient(145deg, #78c54d 0%, #4c9940 53%, #28643a 100%); box-shadow: inset -17px -14px 0 rgba(8,51,30,.2), inset 11px 9px 0 rgba(220,255,150,.08); }
.eye { position: absolute; width: 31%; aspect-ratio: 1; top: -26%; border: 3px solid #173821; border-radius: 50%; background: radial-gradient(circle at 38% 33%, #fffdea 0 15%, #e6dc90 48%, #a5a461 100%); box-shadow: 0 5px 0 rgba(24,67,35,.6), inset 0 -5px 8px rgba(57,66,26,.17); overflow: hidden; }
.eye-left{left:7%}.eye-right{right:7%}
.pupil { position: absolute; width: 38%; height: 52%; left: calc(31% + var(--eye-x)); top: calc(24% + var(--eye-y)); border-radius: 50%; background: #06100b; box-shadow: 0 0 0 4px #d99c35, 0 0 13px rgba(255,200,79,.45); transition: transform .1s linear; }
.pupil::after { content:"";position:absolute;width:24%;aspect-ratio:1;left:16%;top:10%;border-radius:50%;background:white; }
.eye b { position:absolute; inset:-10% -5% 100%; border-radius:50%; background:#4b963e; transition:inset .12s ease; z-index:3; }
.frog-wrap.blink .eye b { inset:-8% -5% 4%; }
.brow { position:absolute; width:31%; height:12%; top:-19%; border-top:6px solid #194c2b; border-radius:50%; z-index:4; }.brow-left{left:6%;transform:rotate(7deg)}.brow-right{right:6%;transform:rotate(-7deg)}
.nostril { position:absolute;width:3.2%;height:5%;top:49%;border-radius:50%;background:#184f2d;box-shadow:inset 0 2px 2px rgba(0,0,0,.5)}.nostril-left{left:43%}.nostril-right{right:43%}
.frog-mouth { position:absolute;width:61%;height:23%;left:19.5%;bottom:5%;border-bottom:5px solid #113b27;border-radius:0 0 50% 50%; }
.frog-mouth::after { content:"";position:absolute;width:7px;height:7px;left:50%;bottom:-6px;border-radius:50%;background:#ea7187;opacity:.8; }
.frog-mouth i { position:absolute;width:28%;height:5px;left:36%;bottom:-5px;border-radius:50%;background:#ea7187;transform:scaleX(.55);transition:transform .15s ease; }
.frog-wrap.hungry .frog-mouth i { transform:scaleX(1.8) translateY(2px); }
.frog-leg { position:absolute;width:38%;height:25%;bottom:4%;border:3px solid rgba(3,23,10,.75);background:#347b3b;border-radius:65% 35% 60% 35%;z-index:-1}.leg-left{left:-2%;transform:rotate(16deg)}.leg-right{right:-2%;transform:scaleX(-1) rotate(16deg)}
.frog-leg i { position:absolute;width:58%;height:24%;left:-9%;bottom:-11%;border-radius:60% 20% 70% 25%;background:#559f43; }
.frog-hand {position:absolute;width:12%;height:20%;bottom:14%;border-radius:60%;background:#4b9841;border:3px solid rgba(3,23,10,.55);z-index:2}.hand-left{left:12%;transform:rotate(18deg)}.hand-right{right:12%;transform:rotate(-18deg)}

.award-seal { position:absolute; z-index:6; right:0; top:7%; width:clamp(125px,10vw,170px); aspect-ratio:1; border:2px solid rgba(255,200,87,.65); outline:1px dashed rgba(255,200,87,.45); outline-offset:6px; border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; text-align:center; color:var(--gold); background:rgba(7,28,23,.72); box-shadow:0 0 35px rgba(255,200,87,.1),inset 0 0 25px rgba(255,200,87,.06); transform:rotate(7deg); animation: seal-float 5s ease-in-out infinite; backdrop-filter:blur(6px); }
.award-seal span{font-size:clamp(6px,.5vw,8px);font-weight:900;letter-spacing:.15em}.award-seal strong{font-family:Impact,"Arial Black",sans-serif;font-size:clamp(16px,1.3vw,22px);letter-spacing:.04em}.award-seal small{position:absolute;top:107%;width:150%;font-size:6px;letter-spacing:.12em;color:rgba(245,239,215,.45)}
.king-shadow {position:absolute;right:-7%;top:6%;width:42%;height:52%;opacity:.16;filter:blur(2px);}.king-shadow::before{content:"";position:absolute;inset:19% 0 0;border-radius:48% 48% 20% 20%;background:#020907}.king-shadow i{position:absolute;top:10%;width:31%;aspect-ratio:1;border-radius:50%;background:#020907}.king-shadow i:first-child{left:7%}.king-shadow i:last-child{right:7%}.king-shadow i::after{content:"";position:absolute;width:17%;aspect-ratio:1;left:42%;top:39%;border-radius:50%;background:var(--danger);box-shadow:0 0 13px var(--danger)}
.lily {position:absolute;bottom:2%;width:20%;height:8%;border-radius:50%;background:#285b40;box-shadow:inset 0 -10px 15px rgba(0,0,0,.24),0 8px 20px rgba(0,0,0,.35);opacity:.85}.lily::after{content:"";position:absolute;width:27%;height:100%;right:5%;background:#071a17;clip-path:polygon(45% 50%,100% 0,100% 100%)}.lily-left{left:-5%;transform:rotate(-5deg)}.lily-right{right:-4%;bottom:10%;transform:rotate(9deg) scale(.72)}
.king-whisper {position:absolute;right:8%;bottom:0;margin:0;color:rgba(245,239,215,.33);font-size:clamp(7px,.56vw,9px);font-weight:900;letter-spacing:.23em;animation:whisper 6s ease-in-out infinite}

.tongue-layer { z-index: 8; pointer-events:none; overflow:visible; }
#tongue-path { fill:none; stroke:#ef7991; stroke-width:12; stroke-linecap:round; filter:url(#tongue-glow); opacity:0; }
.tongue-layer.snap #tongue-path { animation:tongue-snap .58s cubic-bezier(.18,.84,.25,1); }

.footer { align-self:end; min-height:22px; color:rgba(245,239,215,.35); }
.footer { justify-content:flex-start; gap:13px; }
.footer i{width:3px;height:3px;border-radius:50%;background:rgba(112,217,154,.45)}
.footer b{margin-left:auto;color:rgba(184,237,105,.35);}

.release-notes-dialog {
  width: min(900px, calc(100vw - 28px));
  height: min(800px, calc(100dvh - 28px));
  max-width: none;
  max-height: none;
  margin: auto;
  padding: 0;
  border: 1px solid rgba(184, 237, 105, .42);
  border-radius: 27px;
  overflow: hidden;
  color: var(--cream);
  background: #071b17;
  box-shadow: 0 35px 100px rgba(0, 0, 0, .78), 0 0 0 7px rgba(7, 27, 23, .5), 0 0 70px rgba(112, 217, 154, .12);
}
.release-notes-dialog[open] { display: block; animation: notes-pop .34s cubic-bezier(.16, .9, .24, 1); }
.release-notes-dialog::backdrop {
  background: rgba(0, 8, 6, .76);
  backdrop-filter: blur(12px) saturate(.72);
  animation: notes-backdrop .25s ease-out;
}
.notes-shell {
  position: relative;
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  isolation: isolate;
  background:
    radial-gradient(circle at 92% 4%, rgba(184, 237, 105, .13), transparent 25%),
    radial-gradient(circle at 3% 94%, rgba(169, 105, 214, .1), transparent 28%),
    linear-gradient(145deg, rgba(12, 51, 42, .98), rgba(5, 24, 20, .99) 55%);
}
.notes-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .19;
  background-image:
    radial-gradient(circle at 15% 20%, var(--gold) 0 1px, transparent 2px),
    radial-gradient(circle at 70% 62%, var(--lime) 0 1px, transparent 2px);
  background-size: 113px 97px, 137px 121px;
}
.notes-header {
  min-width: 0;
  padding: 26px 76px 22px 30px;
  border-bottom: 1px solid rgba(112, 217, 154, .2);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  background: linear-gradient(90deg, rgba(3, 18, 14, .58), transparent);
}
.notes-header p { margin: 0 0 5px; color: var(--gold); font-size: 9px; font-weight: 1000; letter-spacing: .25em; }
.notes-header h2 { margin: 0; color: var(--lime); font-family: Impact, "Arial Black", sans-serif; font-size: clamp(38px, 5vw, 65px); line-height: .92; letter-spacing: .025em; }
.notes-header span { display: block; margin-top: 9px; color: rgba(245, 239, 215, .62); font-size: 12px; font-weight: 700; }
.notes-header form { position: absolute; top: 22px; right: 24px; margin: 0; }
.notes-close {
  width: 46px;
  height: 46px;
  padding: 0 0 5px;
  border: 1px solid rgba(245, 239, 215, .18);
  border-radius: 50%;
  color: var(--cream);
  background: rgba(4, 21, 17, .76);
  font: 300 31px/1 Arial, sans-serif;
  cursor: pointer;
  transition: transform .18s ease, color .18s ease, border-color .18s ease, background .18s ease;
}
.notes-close:hover,
.notes-close:focus-visible { outline: none; color: var(--ink); border-color: var(--lime); background: var(--lime); transform: rotate(8deg) scale(1.05); }
.notes-scroll {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-color: rgba(184, 237, 105, .5) rgba(5, 25, 20, .5);
  scrollbar-width: thin;
  padding: 20px 24px 26px;
}
.notes-scroll::-webkit-scrollbar { width: 9px; }
.notes-scroll::-webkit-scrollbar-track { background: rgba(5, 25, 20, .5); border-radius: 99px; }
.notes-scroll::-webkit-scrollbar-thumb { background: rgba(184, 237, 105, .42); border-radius: 99px; border: 2px solid #09231d; }
.release-card {
  border: 1px solid rgba(112, 217, 154, .17);
  border-radius: 18px;
  overflow: hidden;
  background: rgba(4, 24, 19, .68);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .15);
}
.release-card + .release-card { margin-top: 12px; }
.release-card.latest { border-color: rgba(184, 237, 105, .42); background: rgba(10, 39, 31, .79); box-shadow: 0 0 26px rgba(184, 237, 105, .06); }
.release-card summary {
  position: relative;
  min-height: 81px;
  padding: 16px 62px 15px 18px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 16px;
  align-items: center;
  list-style: none;
  cursor: pointer;
  user-select: none;
  transition: background .18s ease;
}
.release-card summary::-webkit-details-marker { display: none; }
.release-card summary:hover,
.release-card summary:focus-visible { outline: none; background: rgba(112, 217, 154, .07); }
.release-version { grid-column: 1; color: rgba(184, 237, 105, .69); font-size: 9px; font-weight: 1000; letter-spacing: .18em; }
.release-version b { margin-right: 8px; padding: 3px 6px; border-radius: 5px; color: var(--ink); background: var(--lime); font-size: 8px; }
.release-name { grid-column: 1; color: var(--cream); font-family: Impact, "Arial Black", sans-serif; font-size: clamp(20px, 2.6vw, 32px); letter-spacing: .035em; line-height: 1; }
.release-card time { grid-column: 2; grid-row: 1 / span 2; color: rgba(245, 239, 215, .34); font-size: 8px; font-weight: 900; letter-spacing: .13em; text-align: right; }
.release-card summary i {
  position: absolute;
  right: 19px;
  top: calc(50% - 12px);
  width: 24px;
  height: 24px;
  border: 1px solid rgba(184, 237, 105, .27);
  border-radius: 50%;
  transition: transform .24s ease, background .2s ease;
}
.release-card summary i::before,
.release-card summary i::after { content: ""; position: absolute; left: 6px; top: 11px; width: 10px; height: 2px; border-radius: 2px; background: var(--lime); }
.release-card summary i::after { transform: rotate(90deg); }
.release-card[open] summary i { transform: rotate(45deg); background: rgba(184, 237, 105, .09); }
.release-body {
  padding: 2px 18px 20px;
  border-top: 1px solid rgba(112, 217, 154, .12);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 25px;
  animation: notes-reveal .22s ease-out;
}
.release-body section { min-width: 0; padding-top: 17px; }
.release-body h3 { margin: 0 0 9px; color: var(--gold); font-size: 10px; font-weight: 1000; letter-spacing: .16em; }
.release-body ul { margin: 0; padding: 0; list-style: none; }
.release-body li { position: relative; margin-top: 8px; padding-left: 14px; color: rgba(245, 239, 215, .68); font-size: 12px; font-weight: 600; line-height: 1.45; }
.release-body li::before { content: ""; position: absolute; left: 0; top: .55em; width: 5px; height: 5px; border-radius: 50% 50% 50% 0; background: var(--mint); transform: rotate(-45deg); }
.launch-callout { grid-column: 1 / -1; margin: 17px 0 0; padding: 14px 16px; border-left: 3px solid var(--lime); color: rgba(245, 239, 215, .82); background: rgba(184, 237, 105, .06); font-size: 13px; font-weight: 800; line-height: 1.5; }
.controls-grid { margin: 0; display: grid; gap: 5px; }
.controls-grid div { min-width: 0; padding: 7px 9px; border: 1px solid rgba(112, 217, 154, .11); border-radius: 8px; display: flex; align-items: center; justify-content: space-between; gap: 12px; background: rgba(112, 217, 154, .035); }
.controls-grid dt { color: rgba(184, 237, 105, .7); font-size: 8px; font-weight: 1000; letter-spacing: .1em; }
.controls-grid dd { margin: 0; color: rgba(245, 239, 215, .66); font-size: 10px; font-weight: 700; text-align: right; }
.notes-footer {
  min-height: 62px;
  padding: 11px 24px;
  border-top: 1px solid rgba(112, 217, 154, .18);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: rgba(3, 18, 14, .72);
}
.notes-footer span { color: rgba(245, 239, 215, .38); font-size: 8px; font-weight: 1000; letter-spacing: .16em; }
.notes-footer form { margin: 0; }
.notes-footer button {
  min-height: 40px;
  padding: 0 17px;
  border: 1px solid rgba(184, 237, 105, .5);
  border-radius: 11px;
  color: var(--ink);
  background: var(--lime);
  font: 900 10px/1 "Trebuchet MS", sans-serif;
  letter-spacing: .12em;
  cursor: pointer;
  transition: transform .18s ease, filter .18s ease;
}
.notes-footer button:hover,
.notes-footer button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; filter: brightness(1.08); transform: translateY(-1px); }

.sound-pill { position:fixed;z-index:12;right:20px;bottom:18px;padding:9px 13px;border:1px solid rgba(112,217,154,.25);border-radius:99px;background:rgba(4,20,16,.82);color:rgba(245,239,215,.6);font-size:8px;font-weight:900;letter-spacing:.13em;opacity:0;transform:translateY(10px);pointer-events:none;transition:.3s ease;backdrop-filter:blur(8px)}
.sound-pill.show{opacity:1;transform:none}.sound-pill span{display:inline-block;width:6px;height:6px;margin-right:7px;border-radius:50%;background:var(--lime);box-shadow:0 0 9px var(--lime)}

.reveal { opacity:0; transform:translateY(22px); animation:reveal .75s cubic-bezier(.2,.8,.2,1) forwards; }
.logo-reveal { transform:translateY(-10px) scale(.92); animation-name:logo-land; animation-duration:1s; }
.delay-one{animation-delay:.16s}.delay-two{animation-delay:.25s}.delay-three{animation-delay:.36s}.delay-four{animation-delay:.48s}.delay-five{animation-delay:.62s}

@keyframes reveal{to{opacity:1;transform:none}}
@keyframes logo-land{0%{opacity:0;transform:translateY(-35px) scale(.82,1.12)}65%{opacity:1;transform:translateY(4px) scale(1.04,.94)}100%{opacity:1;transform:none}}
@keyframes moon-breathe{50%{filter:brightness(1.12);box-shadow:0 0 95px rgba(154,225,172,.28),0 0 190px rgba(112,217,154,.15)}}
@keyframes aurora{from{transform:translate(-8%,0) rotate(-8deg) scale(.9)}to{transform:translate(9%,15%) rotate(5deg) scale(1.1)}}
@keyframes fog-drift{from{transform:translateX(-7%) scaleY(.7)}to{transform:translateX(9%) scaleY(1.1)}}
@keyframes water-shift{to{background-position:140px 0,80px 0,0 0}}
@keyframes ripple{0%{transform:scale(.2);opacity:0}15%{opacity:1}100%{transform:scale(2.6);opacity:0}}
@keyframes beacon{50%{opacity:.4;transform:scale(.7)}}
@keyframes cta-breathe{50%{filter:brightness(1.04);box-shadow:0 9px 0 #426d29,0 17px 35px rgba(0,0,0,.4),0 0 24px rgba(184,237,105,.14),inset 0 2px 0 rgba(255,255,255,.55)}}
@keyframes shine{0%,54%{left:-55%}76%,100%{left:135%}}
@keyframes button-ring{to{opacity:0;transform:scale(1.12)}}
@keyframes fly-pop-a{0%{left:72%;top:40%;transform:scale(0)}35%{opacity:1}100%{left:94%;top:-45%;transform:scale(1.1) rotate(110deg);opacity:0}}
@keyframes fly-pop-b{0%{left:55%;top:55%;transform:scale(0)}35%{opacity:1}100%{left:67%;top:-75%;transform:scale(.8) rotate(-90deg);opacity:0}}
@keyframes fly-pop-c{0%{left:88%;top:50%;transform:scale(0)}35%{opacity:1}100%{left:111%;top:8%;transform:scale(.9) rotate(90deg);opacity:0}}
@keyframes frog-float{0%,100%{translate:0 0}50%{translate:0 -9px}}
@keyframes frog-breathe{0%,100%{scale:1 1}50%{scale:1.018 .988}}
@keyframes shadow-breathe{50%{transform:scaleX(.91);opacity:.76}}
@keyframes seal-float{0%,100%{translate:0 0;rotate:7deg}50%{translate:0 -9px;rotate:3deg}}
@keyframes whisper{0%,100%{opacity:.25}50%{opacity:.64;text-shadow:0 0 15px rgba(255,111,97,.2)}}
@keyframes tongue-snap{0%{opacity:0;stroke-dasharray:0 2000;stroke-width:5}38%{opacity:1;stroke-dasharray:2000 0;stroke-width:13}68%{opacity:1;stroke-dasharray:2000 0;stroke-width:9}100%{opacity:0;stroke-dasharray:0 2000;stroke-dashoffset:-2000;stroke-width:3}}
@keyframes notes-pop{from{opacity:0;transform:translateY(24px) scale(.96)}to{opacity:1;transform:none}}
@keyframes notes-backdrop{from{opacity:0}to{opacity:1}}
@keyframes notes-reveal{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}

@media (max-width: 1000px) {
  .page-shell { padding-inline: clamp(18px, 3vw, 34px); }
  .hero { grid-template-columns: minmax(0, 60fr) minmax(280px, 40fr); }
  .frog-wrap { --frog-size: min(43vw, 55vh); right:-6vw; }
  .award-seal { right:1%; }
  .proof { gap:15px; }.proof > div + div::before{display:none}
}

@media (max-width: 760px) {
  body::before { background:linear-gradient(180deg,rgba(3,13,10,.72),rgba(3,13,10,.55) 55%,rgba(3,13,10,.8)),radial-gradient(ellipse at center,transparent 35%,rgba(0,8,6,.5)); }
  .page-shell { padding: max(12px, env(safe-area-inset-top)) 16px max(10px, env(safe-area-inset-bottom)); }
  .topbar { font-size:8px; }.platform-label,.platform-dot{display:none}
  .top-meta { gap:7px; }.release-notes-trigger{padding-inline:8px;gap:5px}.release-notes-trigger span{font-size:0}.release-notes-trigger span::after{content:"NOTES";font-size:8px}
  .hero { display:block; }
  .pitch { width:100%; height:100%; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; padding-bottom:3vh; }
  .logo-crop { width:min(94vw,560px); margin:-5vh auto -1.5vh; }
  .loop-strip { justify-content:center; margin-left:0; }
  h1 { font-size:clamp(48px,15vw,78px); line-height:.82; }
  .lede { max-width:540px; margin:16px auto 19px; padding:0 4vw; font-size:clamp(13px,3.6vw,17px); }
  .cta-block { width:min(92vw,520px); }
  .download { text-align:left; border-radius:17px; height:68px; }
  .download-meta { font-size:7px; gap:7px; }
  .download-count{right:11px;top:-11px;min-height:22px;padding:3px 7px}.download-count b{font-size:12px}.download-count small{font-size:6px}.download-privacy{margin-top:6px;font-size:6px;letter-spacing:.055em}
  .proof { margin-top:20px; gap:18px; justify-content:center; }
  .proof span { font-size:7px; }.proof strong{font-size:25px}
  .creature-stage { position:absolute; inset:0; min-height:0; z-index:-1; opacity:.45; }
  .frog-wrap { --frog-size:min(78vw,52vh);right:-23vw;bottom:-3vh; }
  .award-seal { display:none }
  .king-shadow,.king-whisper,.lily{display:none}
  .footer { justify-content:center; font-size:7px; gap:7px; }.footer span:nth-of-type(2),.footer i:nth-of-type(2){display:none}.footer b{display:none}
  .moon { right:-19vw;top:1vh;width:65vw; }
  .trees-near{opacity:.62}
  .sound-pill{right:12px;bottom:10px}
  .release-notes-dialog { width:calc(100vw - 18px);height:calc(100dvh - 18px);border-radius:20px; }
  .notes-header{padding:22px 62px 17px 18px}.notes-header h2{font-size:39px}.notes-header span{max-width:240px;font-size:10px;line-height:1.35}.notes-header form{top:16px;right:15px}.notes-close{width:44px;height:44px}
  .notes-scroll{padding:12px 10px 17px}.release-card summary{min-height:74px;padding:14px 49px 13px 14px}.release-card time{grid-column:1;grid-row:auto;text-align:left;margin-top:2px}.release-card summary i{right:13px}
  .release-body{grid-template-columns:1fr;padding:1px 14px 17px;gap:0}.release-body section{padding-top:15px}.release-body li{font-size:11px}.release-name{font-size:22px}
  .notes-footer{min-height:58px;padding:9px 12px}.notes-footer span{max-width:130px;font-size:7px;line-height:1.35}.notes-footer button{padding-inline:12px;font-size:9px}
}

@media (max-height: 720px) and (min-width: 761px) {
  .page-shell { padding-top:14px;padding-bottom:10px; }
  .logo-crop { width:min(92%,560px); }
  h1{font-size:clamp(46px,5.8vw,78px)}
  .lede{margin-block:12px 15px;line-height:1.35}
  .download{height:62px}.proof{margin-top:17px}
  .frog-wrap{--frog-size:min(35vw,56vh)}
  .award-seal{width:115px;top:3%}
}

@media (max-height: 620px) {
  .proof { display:none; }
  .lede { margin-block:10px 13px; }
  .loop-strip { margin-bottom:6px; }
  .footer span:nth-of-type(2), .footer i:nth-of-type(2) { display:none; }
}

@media (max-height: 500px) and (orientation: landscape) {
  .page-shell{padding:9px 22px 7px}.topbar{font-size:7px}
  .hero{display:grid;grid-template-columns:60% 40%}.pitch{align-items:flex-start;text-align:left;padding:0;justify-content:center}
  .logo-crop{width:340px;margin:-25px 0 -15px -6px}.loop-strip{justify-content:flex-start;margin-bottom:3px}
  h1{font-size:46px;line-height:.78}.lede,.proof{display:none}.cta-block{width:430px;max-width:72vw}.download{height:57px;border-radius:15px}.button-copy strong{font-size:23px}.download-meta{margin-top:10px;justify-content:flex-start}
  .creature-stage{position:relative;inset:auto;opacity:.75;z-index:1}.frog-wrap{--frog-size:min(38vw,76vh);right:-7vw;bottom:-5vh}.award-seal{display:none}
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; transition-duration:.001ms !important; }
  .reveal { opacity:1; transform:none; }
  .tongue-layer { display:none; }
}