/* ============================================================================
   Frogi's pond, its steps and its flying frog, on this site.

   GENERATED from ~/Landing/frogi/style.css and then scoped under `.fg`. It is
   a copy, and copies drift: re-extract when the landing changes rather than
   hand-patching here.

   Frogi's `.reveal` rules are deliberately NOT carried across. They hold their
   element at opacity 0 until frogi's own observer adds a class, and porting
   the styles without the machinery would ship an invisible section.
   ========================================================================= */

/* Frogi's tokens, scoped so they cannot reach this site's own components. */
.fg {
  --paper: #fbfaf6;
  --ink: #14231a;
  --green: #2cb454;
  --red: #ff4a45;
  --card: #ffffff;
  --fill: #f3f3ef;
  --hairline: #e9e9e4;
  --border: #c9cbc4;
  --muted: #5f6359;
  --muted-soft: #6e7269;
  /* THIS SITE'S TYPE, NOT FROGI'S. The landing is set in Nunito and the port
     used to load it; on this site the app pages are this site's pages, so the
     drawings keep Frogi's colour and shape while the words keep Inter. Frogi's
     CSS reads every face through `--font` and `--mono`, so redefining the two
     tokens is the whole change. */
  --font: var(--font-sans);
  --mono: var(--font-mono);
  --shadow-card: 0 6px 16px rgba(20, 35, 26, 0.06);
  --ease-pop: cubic-bezier(0.2, 1.5, 0.4, 1);
  --ease-swim: cubic-bezier(0.22, 0.86, 0.3, 1);
  font-family: var(--font);
  color: var(--ink);
}


@keyframes poseBob {
  0%, 100% { transform: translate(calc(-50% + var(--x)), var(--y)); }
  50% { transform: translate(calc(-50% + var(--x)), calc(var(--y) - 2.5%)); }
}


@keyframes armWave {
  0%, 100% { transform: rotate(-16deg); }
  50% { transform: rotate(14deg); }
}


@keyframes legKick {
  0%, 100% { transform: rotate(9deg); }
  50% { transform: rotate(-13deg); }
}


@keyframes armSwing {
  0%, 100% { transform: rotate(7deg); }
  50% { transform: rotate(-9deg); }
}


@keyframes swipe {
  0%, 100% { transform: rotate(-6deg); }
  55% { transform: rotate(5deg); }
}


@keyframes drag {
  0%, 100% { transform: rotate(0deg); }
  30%, 55% { transform: rotate(-9deg); }
}


@keyframes plume {
  0% { opacity: 0.25; transform: translateY(40px) scale(0.94); }
  40% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-90px) scale(1.08); }
}


@keyframes jesterL {
  0%, 100% { transform: rotate(-17deg); }
  50% { transform: rotate(15deg); }
}


@keyframes jesterR {
  0%, 100% { transform: rotate(17deg); }
  50% { transform: rotate(-15deg); }
}


@keyframes thrustL {
  0%, 100% { transform: rotate(0deg); }
  35% { transform: rotate(-10deg); }
}


@keyframes thrustR {
  0%, 100% { transform: rotate(0deg); }
  35% { transform: rotate(10deg); }
}




@keyframes poseDance {
  0% { transform: translate(calc(-50% + var(--x)), var(--y)) rotate(0deg); }
  25% { transform: translate(calc(-50% + var(--x) - 2.5%), calc(var(--y) - 4%)) rotate(-5deg); }
  50% { transform: translate(calc(-50% + var(--x)), var(--y)) rotate(0deg); }
  75% { transform: translate(calc(-50% + var(--x) + 2.5%), calc(var(--y) - 4%)) rotate(5deg); }
  100% { transform: translate(calc(-50% + var(--x)), var(--y)) rotate(0deg); }
}



@keyframes poseScroll {
  0%, 100% { transform: translate(calc(-50% + var(--x)), var(--y)) rotate(0deg); }
  30% { transform: translate(calc(-50% + var(--x)), calc(var(--y) - 1.2%)) rotate(-1.5deg); }
  65% { transform: translate(calc(-50% + var(--x)), calc(var(--y) - 0.4%)) rotate(1deg); }
}



@keyframes poseSmoke {
  0%, 100% { transform: translate(calc(-50% + var(--x)), var(--y)) rotate(0deg); }
  40% { transform: translate(calc(-50% + var(--x) - 1.5%), calc(var(--y) - 1.5%)) rotate(-2.5deg); }
  70% { transform: translate(calc(-50% + var(--x) - 0.5%), var(--y)) rotate(-1deg); }
}



@keyframes poseJester {
  0%, 100% { transform: translate(calc(-50% + var(--x)), var(--y)) rotate(0deg) scale(1); }
  30% { transform: translate(calc(-50% + var(--x)), calc(var(--y) - 3%)) rotate(-7deg) scale(1.04); }
  70% { transform: translate(calc(-50% + var(--x)), calc(var(--y) - 1%)) rotate(7deg) scale(1.02); }
}



@keyframes poseFinger {
  0% { transform: translate(calc(-50% + var(--x)), calc(var(--y) + 6%)) scale(0.94); }
  18% { transform: translate(calc(-50% + var(--x)), calc(var(--y) - 3%)) scale(1.05); }
  40%, 100% { transform: translate(calc(-50% + var(--x)), var(--y)) scale(1); }
}


@keyframes coachRing {
  0% {
    opacity: 0;
    transform: scale(1.06);
  }
  18% {
    opacity: 1;
    transform: scale(1);
  }
  70% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.02);
  }
}

@keyframes poseBob {
  0%, 100% { transform: translate(calc(-50% + var(--x)), var(--y)); }
  50% { transform: translate(calc(-50% + var(--x)), calc(var(--y) - 2.5%)); }
}


@keyframes armWave {
  0%, 100% { transform: rotate(-16deg); }
  50% { transform: rotate(14deg); }
}


@keyframes legKick {
  0%, 100% { transform: rotate(9deg); }
  50% { transform: rotate(-13deg); }
}


@keyframes armSwing {
  0%, 100% { transform: rotate(7deg); }
  50% { transform: rotate(-9deg); }
}


@keyframes swipe {
  0%, 100% { transform: rotate(-6deg); }
  55% { transform: rotate(5deg); }
}


@keyframes drag {
  0%, 100% { transform: rotate(0deg); }
  30%, 55% { transform: rotate(-9deg); }
}


@keyframes plume {
  0% { opacity: 0.25; transform: translateY(40px) scale(0.94); }
  40% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-90px) scale(1.08); }
}


@keyframes jesterL {
  0%, 100% { transform: rotate(-17deg); }
  50% { transform: rotate(15deg); }
}


@keyframes jesterR {
  0%, 100% { transform: rotate(17deg); }
  50% { transform: rotate(-15deg); }
}


@keyframes thrustL {
  0%, 100% { transform: rotate(0deg); }
  35% { transform: rotate(-10deg); }
}


@keyframes thrustR {
  0%, 100% { transform: rotate(0deg); }
  35% { transform: rotate(10deg); }
}




@keyframes poseDance {
  0% { transform: translate(calc(-50% + var(--x)), var(--y)) rotate(0deg); }
  25% { transform: translate(calc(-50% + var(--x) - 2.5%), calc(var(--y) - 4%)) rotate(-5deg); }
  50% { transform: translate(calc(-50% + var(--x)), var(--y)) rotate(0deg); }
  75% { transform: translate(calc(-50% + var(--x) + 2.5%), calc(var(--y) - 4%)) rotate(5deg); }
  100% { transform: translate(calc(-50% + var(--x)), var(--y)) rotate(0deg); }
}



@keyframes poseScroll {
  0%, 100% { transform: translate(calc(-50% + var(--x)), var(--y)) rotate(0deg); }
  30% { transform: translate(calc(-50% + var(--x)), calc(var(--y) - 1.2%)) rotate(-1.5deg); }
  65% { transform: translate(calc(-50% + var(--x)), calc(var(--y) - 0.4%)) rotate(1deg); }
}



@keyframes poseSmoke {
  0%, 100% { transform: translate(calc(-50% + var(--x)), var(--y)) rotate(0deg); }
  40% { transform: translate(calc(-50% + var(--x) - 1.5%), calc(var(--y) - 1.5%)) rotate(-2.5deg); }
  70% { transform: translate(calc(-50% + var(--x) - 0.5%), var(--y)) rotate(-1deg); }
}



@keyframes poseJester {
  0%, 100% { transform: translate(calc(-50% + var(--x)), var(--y)) rotate(0deg) scale(1); }
  30% { transform: translate(calc(-50% + var(--x)), calc(var(--y) - 3%)) rotate(-7deg) scale(1.04); }
  70% { transform: translate(calc(-50% + var(--x)), calc(var(--y) - 1%)) rotate(7deg) scale(1.02); }
}



@keyframes poseFinger {
  0% { transform: translate(calc(-50% + var(--x)), calc(var(--y) + 6%)) scale(0.94); }
  18% { transform: translate(calc(-50% + var(--x)), calc(var(--y) - 3%)) scale(1.05); }
  40%, 100% { transform: translate(calc(-50% + var(--x)), var(--y)) scale(1); }
}


@keyframes coachRing {
  0% {
    opacity: 0;
    transform: scale(1.06);
  }
  18% {
    opacity: 1;
    transform: scale(1);
  }
  70% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.02);
  }
}

@keyframes poseBob {
  0%, 100% { transform: translate(calc(-50% + var(--x)), var(--y)); }
  50% { transform: translate(calc(-50% + var(--x)), calc(var(--y) - 2.5%)); }
}


@keyframes armWave {
  0%, 100% { transform: rotate(-16deg); }
  50% { transform: rotate(14deg); }
}


@keyframes legKick {
  0%, 100% { transform: rotate(9deg); }
  50% { transform: rotate(-13deg); }
}


@keyframes armSwing {
  0%, 100% { transform: rotate(7deg); }
  50% { transform: rotate(-9deg); }
}


@keyframes swipe {
  0%, 100% { transform: rotate(-6deg); }
  55% { transform: rotate(5deg); }
}


@keyframes drag {
  0%, 100% { transform: rotate(0deg); }
  30%, 55% { transform: rotate(-9deg); }
}


@keyframes plume {
  0% { opacity: 0.25; transform: translateY(40px) scale(0.94); }
  40% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-90px) scale(1.08); }
}


@keyframes jesterL {
  0%, 100% { transform: rotate(-17deg); }
  50% { transform: rotate(15deg); }
}


@keyframes jesterR {
  0%, 100% { transform: rotate(17deg); }
  50% { transform: rotate(-15deg); }
}


@keyframes thrustL {
  0%, 100% { transform: rotate(0deg); }
  35% { transform: rotate(-10deg); }
}


@keyframes thrustR {
  0%, 100% { transform: rotate(0deg); }
  35% { transform: rotate(10deg); }
}




@keyframes poseDance {
  0% { transform: translate(calc(-50% + var(--x)), var(--y)) rotate(0deg); }
  25% { transform: translate(calc(-50% + var(--x) - 2.5%), calc(var(--y) - 4%)) rotate(-5deg); }
  50% { transform: translate(calc(-50% + var(--x)), var(--y)) rotate(0deg); }
  75% { transform: translate(calc(-50% + var(--x) + 2.5%), calc(var(--y) - 4%)) rotate(5deg); }
  100% { transform: translate(calc(-50% + var(--x)), var(--y)) rotate(0deg); }
}



@keyframes poseScroll {
  0%, 100% { transform: translate(calc(-50% + var(--x)), var(--y)) rotate(0deg); }
  30% { transform: translate(calc(-50% + var(--x)), calc(var(--y) - 1.2%)) rotate(-1.5deg); }
  65% { transform: translate(calc(-50% + var(--x)), calc(var(--y) - 0.4%)) rotate(1deg); }
}



@keyframes poseSmoke {
  0%, 100% { transform: translate(calc(-50% + var(--x)), var(--y)) rotate(0deg); }
  40% { transform: translate(calc(-50% + var(--x) - 1.5%), calc(var(--y) - 1.5%)) rotate(-2.5deg); }
  70% { transform: translate(calc(-50% + var(--x) - 0.5%), var(--y)) rotate(-1deg); }
}



@keyframes poseJester {
  0%, 100% { transform: translate(calc(-50% + var(--x)), var(--y)) rotate(0deg) scale(1); }
  30% { transform: translate(calc(-50% + var(--x)), calc(var(--y) - 3%)) rotate(-7deg) scale(1.04); }
  70% { transform: translate(calc(-50% + var(--x)), calc(var(--y) - 1%)) rotate(7deg) scale(1.02); }
}



@keyframes poseFinger {
  0% { transform: translate(calc(-50% + var(--x)), calc(var(--y) + 6%)) scale(0.94); }
  18% { transform: translate(calc(-50% + var(--x)), calc(var(--y) - 3%)) scale(1.05); }
  40%, 100% { transform: translate(calc(-50% + var(--x)), var(--y)) scale(1); }
}


@keyframes coachRing {
  0% {
    opacity: 0;
    transform: scale(1.06);
  }
  18% {
    opacity: 1;
    transform: scale(1);
  }
  70% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.02);
  }
}
.fg .band {
  padding: 112px 0 10px;
  text-align: left;
}
.fg .band-copy {
  margin-top: 14px;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.45;
  color: var(--muted);
  max-width: 34ch;
}
.fg .band-copy.center {
  margin-inline: auto;
  text-align: center;
}
.fg .band-poster {
  text-align: center;
  padding-top: 118px;
}
.fg .aff-band[data-annot="lasso"] .annot-text {
  margin-top: 16px;
}


@keyframes rise {
  to {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .fg .rise, .fg .reveal {
    opacity: 1;
    transform: none;
    animation: none;
    transition: none;
  }
  .fg .frog *, .fg .frog {
    transition-property: opacity;
  }
}
.fg .pond-device {
  position: relative;
  width: 100%;
  aspect-ratio: 402 / 752;
  margin: 26px auto 0;
  border-radius: 52px;
  overflow: hidden;
  background: var(--paper);
  box-shadow: var(--shadow-card), 0 0 0 1px rgba(20, 35, 26, 0.05);
}
.fg .frame402 {
  position: absolute;
  top: 0;
  left: 0;
  width: 402px;
  height: 752px;
  transform-origin: top left;
  transform: scale(var(--fs, 0.776)); 
}
.fg .pchrome {
  position: absolute;
  inset: 0;
  transition: opacity 0.26s var(--ease-swim);
}
.fg .pond-device.is-editor .pchrome {
  opacity: 0;
  pointer-events: none;
}
.fg .pond-head {
  position: absolute;
  left: 0;
  right: 0;
  top: 60px;
  text-align: center;
  font-weight: 900;
  font-size: 20px;
  letter-spacing: -0.4px;
  color: var(--ink);
}
.fg .pond-rows {
  position: absolute;
  left: 26px;
  right: 26px;
  top: 116px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.fg .rrow {
  position: relative;
  height: 74px;
  border-radius: 20px;
  overflow: hidden;
  background: var(--green);
}
.fg .rrow.caught {
  background: var(--red);
}
.fg .rrow.paused {
  background: #e4e4de;
}
.fg .rrow-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: rgba(20, 35, 26, 0.1);
}
.fg .rrow-body {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  padding: 0 82px 0 20px;
}
.fg .rrow-top {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.fg .rrow-name {
  font-weight: 900;
  font-size: 20px;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.fg .rrow-every {
  font-weight: 800;
  font-size: 13px;
  color: rgba(20, 35, 26, 0.6);
}
.fg .rrow-detail {
  font-weight: 700;
  font-size: 13px;
  color: rgba(20, 35, 26, 0.62);
}
.fg .rrow.paused .rrow-every, .fg .rrow.paused .rrow-detail {
  color: var(--muted-soft);
}
.fg .rrow-tog {
  position: absolute;
  right: 18px;
  top: 50%;
  margin-top: -15px;
  width: 52px;
  height: 30px;
  border-radius: 15px;
  background: #14231a;
}
.fg .rrow.paused .rrow-tog {
  background: #c9cbc4;
}
.fg .rrow-tog::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 25px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
}
.fg .rrow.paused .rrow-tog::after {
  left: 3px;
}
.fg .pc-hint {
  position: absolute;
  left: 0;
  right: 0;
  top: 478px;
  text-align: center;
  font: 700 13px/1 var(--mono);
  letter-spacing: 1.6px;
  color: var(--muted-soft);
}
.fg .echrome {
  position: absolute;
  inset: 0;
  z-index: 3; 
  opacity: 0;
  pointer-events: none;
  
  transition: opacity 0.24s cubic-bezier(0.23, 1, 0.32, 1);
}
.fg .pond-device.is-editor .echrome {
  opacity: 1;
  pointer-events: auto;
  transition-duration: 0.4s;
  transition-delay: 0.2s; 
}
.fg .ec-sentence {
  position: absolute;
  left: 26px;
  right: 26px;
  top: 78px;
  text-align: center;
  font-weight: 900;
  font-size: 16px;
  letter-spacing: -0.3px;
  color: var(--ink);
}
.fg .ec-wheel {
  position: absolute;
  top: 101px;
  width: 262px;
  height: 262px;
  border-radius: 50%;
  overflow: hidden;
}
.fg .wh-h {
  left: -97px;
}
.fg .wh-m {
  left: 237px;
}
.fg .ec-scroll {
  position: absolute;
  inset: 0;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
  padding: 99px 0; 
  -webkit-overflow-scrolling: touch;
}
.fg .ec-scroll::-webkit-scrollbar {
  display: none;
}
.fg .ec-digit {
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  scroll-snap-align: center;
  font-weight: 900;
  font-size: 58px;
  letter-spacing: -2px;
  line-height: 1;
  color: #d9d9d3;
  font-variant-numeric: tabular-nums;
  transition: color 0.12s ease;
}
.fg .ec-digit.active {
  color: #14231a;
}
.fg .ec-unit {
  position: absolute;
  top: 210px;
  font-weight: 900;
  font-size: 22px;
  color: #6e7269;
  z-index: 1;
  pointer-events: none;
}
.fg .u-h {
  left: 116px;
}
.fg .u-m {
  left: 300px;
}
.fg .ec-mouth {
  position: absolute;
  left: 36px;
  top: 468px;
  width: 330px;
  height: 92px;
  border-bottom: 18px solid #14231a;
  border-radius: 0 0 230px 230px;
}
.fg .ec-tongue {
  position: absolute;
  left: 50%;
  margin-left: -13px;
  top: 546px;
  width: 26px;
  height: 58px;
  border-radius: 0 0 13px 13px;
  background: #ff4a45;
}
.fg .ec-pill {
  position: absolute;
  left: 56px;
  top: 588px;
  width: 290px;
  height: 64px;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 8px 20px rgba(20, 35, 26, 0.18);
  border: 0;
  cursor: pointer;
  font-family: var(--font);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-weight: 900;
  font-size: 20px;
  color: #6e7269; 
  transition: transform 0.09s ease;
}
.fg .ec-pill.chosen {
  color: var(--ink);
}
.fg .ec-pill:active {
  transform: scale(0.97);
}
.fg .ec-chevron {
  width: 9px;
  height: 9px;
  border-right: 2.5px solid #6e7269;
  border-bottom: 2.5px solid #6e7269;
  transform: rotate(-45deg);
}
.fg .ec-save {
  position: absolute;
  left: 56px;
  top: 664px;
  width: 290px;
  height: 62px;
  border-radius: 31px;
  border: 0;
  cursor: pointer;
  font-family: var(--font);
  font-weight: 900;
  font-size: 18px;
  background: #14231a;
  color: #fff;
  z-index: 4;
  
  opacity: 0;
  transform: translateY(10px) scale(0.96);
  pointer-events: none;
  transition: opacity 0.26s ease, transform 0.34s var(--ease-pop),
    background-color 0.15s ease;
}
.fg .ec-save.ready {
  opacity: 1;
  transform: none;
  pointer-events: auto;
  
  transition: transform 0.09s cubic-bezier(0.23, 1, 0.32, 1),
    background-color 0.15s linear;
}
.fg .ec-save.ready:active {
  transform: scale(0.975);
  background: #0c150f;
}
@media (prefers-reduced-motion: reduce) {
  .fg .ec-save {
    transition: opacity 0.15s ease;
    transform: none;
  }
}
.fg .picker {
  position: absolute;
  inset: 0;
  z-index: 6;
  background: var(--paper);
  padding: 60px 26px 0;
  opacity: 0;
  transform: translateY(26px);
  pointer-events: none;
  transition: opacity 0.26s var(--ease-swim),
    transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
}
.fg .picker.open {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.fg .pk-title {
  text-align: center;
  font-weight: 900;
  font-size: 30px;
  letter-spacing: -1.2px;
  color: var(--ink);
}
.fg .pk-sub {
  margin: 8px auto 0;
  max-width: 300px;
  text-align: center;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.35;
  color: var(--muted);
}
.fg .pk-list {
  margin-top: 26px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.fg .pk-row {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 76px;
  padding: 0 18px;
  border-radius: 24px;
  background: #f3f3ef;
  border: 0;
  cursor: pointer;
  font-family: var(--font);
  width: 100%;
  text-align: left;
}
.fg .pk-row {
  transition: background-color 0.18s linear, transform 0.09s
    cubic-bezier(0.23, 1, 0.32, 1);
}
.fg .pk-row:active {
  transform: scale(0.985);
}
.fg .pk-row.sel {
  background: var(--green);
}
.fg .pk-tile {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  flex: none;
  background: repeating-linear-gradient(135deg, #e4e4de 0 6px, #edede7 6px 12px);
}
.fg .pk-row.sel .pk-tile {
  background: repeating-linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.62) 0 6px,
    rgba(255, 255, 255, 0.34) 6px 12px
  );
}
.fg .pk-name {
  flex: 1 1 auto;
  font-weight: 900;
  font-size: 20px;
  color: var(--ink);
}
.fg .pk-dot {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid #c9cbc4;
  flex: none;
}
.fg .pk-row.sel .pk-dot {
  border-color: #14231a;
  background: #14231a;
}
.fg .pk-frog {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 230px;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
}
.fg .pk-frog svg {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: auto;
}
.fg .leap-frog {
  position: absolute;
  left: 0;
  top: 0;
  width: 402px;
  height: 874px;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  z-index: 2;
  transform-origin: 201px 0px;
  transform: translateY(538px) scale(0.345); 
}
.fg .pond-device.is-editor .leap-frog {
  animation: leapUp 0.56s cubic-bezier(0.32, 0, 0.3, 1.02) both;
  cursor: default;
  pointer-events: none;
}
.fg .pond-device.sinking .leap-frog {
  animation: leapDown 0.56s cubic-bezier(0.3, 0, 0.32, 1) both;
  
  pointer-events: none;
}


@keyframes leapUp {
  0% {
    transform: translateY(538px) scale(0.345);
  }
  16% {
    transform: translateY(568px) scale(0.325);
  }
  100% {
    transform: translateY(0) scale(1);
  }
}


@keyframes leapDown {
  0% {
    transform: translateY(0) scale(1);
  }
  12% {
    transform: translateY(-14px) scale(1.02);
  }
  100% {
    transform: translateY(538px) scale(0.345);
  }
}
.fg .pond-frog {
  display: block;
  width: 402px;
  height: 874px;
  overflow: visible;
  
  filter: drop-shadow(0 22px 28px rgba(20, 35, 26, 0.24))
    drop-shadow(0 6px 10px rgba(20, 35, 26, 0.12));
  transition: filter 0.3s var(--ease-swim);
}
.fg .pond-breathe {
  transform-origin: 201px 874px;
  transform-box: view-box;
}
.fg .pond-device.breathing .pond-breathe {
  animation: frogBreathe 3.4s ease-in-out infinite;
}
.fg .pond-device.is-editor .pond-frog, .fg .pond-device.sinking .pond-frog {
  filter: none;
}
.fg .pond-device.is-editor .pond-breathe, .fg .pond-device.sinking .pond-breathe {
  animation: none;
}


@keyframes frogBreathe {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.03);
  }
}
.fg .pc-hint {
  animation: hintPulse 3.4s ease-in-out infinite;
}


@keyframes hintPulse {
  0%,
  100% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
}
.fg .frog-pupil, .fg .pond-plus {
  transition: opacity 0.2s ease;
}
.fg .pond-device.is-editor .frog-pupil, .fg .pond-device.is-editor .pond-plus {
  opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
  .fg .frog-pupil, .fg .pond-plus {
    transition: none;
  }
  .fg .pchrome, .fg .echrome {
    transition-property: opacity;
    transition-duration: 0.2s;
  }
  .fg .picker {
    transform: none;
    transition-property: opacity;
  }
  .fg .pond-device.is-editor .leap-frog, .fg .pond-device.sinking .leap-frog {
    animation: none;
  }
  .fg .pond-device.is-editor .leap-frog {
    transform: translateY(0) scale(1);
  }
  .fg .pond-frog {
    animation: none;
    transform: none;
  }
  .fg .pc-hint {
    animation: none;
    opacity: 1;
  }
}
.fg .step-label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 44px;
  font-weight: 900;
  font-size: 33px;
  line-height: 1.04;
  letter-spacing: -1.3px;
  color: var(--ink);
}
.fg .step-label:first-of-type {
  margin-top: 8px;
}
.fg .step-n {
  display: block;
  flex: none;
  width: 40px;
  height: 40px;
  color: var(--ink);
}
.fg .step-n svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.fg .step-label + .band-copy {
  margin-top: 12px;
}
.fg .missions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 13px;
  margin-top: 26px;
}
.fg .mtile {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 25%;
  background: var(--ink);
  overflow: hidden;
  transform: rotate(var(--r, 0deg));
}
.fg .mtile-name {
  position: absolute;
  left: 11%;
  top: 9%;
  z-index: 1;
  font-weight: 900;
  font-size: 15px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #fff;
}
.fg .mtile-art {
  position: absolute;
  right: -5%;
  bottom: -6%;
  width: 68%;
  height: auto;
}
@media (max-width: 470px) {
  .fg .missions {
    grid-template-columns: 1fr 1fr;
    gap: 11px;
  }
  .fg .mtile-name {
    font-size: 16px;
  }
}
.fg .rrow-enter {
  animation: rrowIn 0.4s 0.32s cubic-bezier(0.23, 1, 0.32, 1) both;
}


@keyframes rrowIn {
  0% {
    opacity: 0;
    transform: translateY(14px) scale(0.97);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .fg .rrow-enter {
    animation: none;
  }
}
.fg .pk-frog, .fg .leap-frog {
  transition: transform 0.09s cubic-bezier(0.23, 1, 0.32, 1);
}
.fg .pk-frog:active {
  transform: scale(0.97);
}
.fg .pond-device:not(.is-editor):not(.sinking) .leap-frog:active {
  transform: translateY(566px) scale(0.332);
}
@media (prefers-reduced-motion: reduce) {
  .fg .rrow-enter, .fg .pond-device.breathing .pond-breathe {
    animation: none;
  }
  .fg .waitlist, .fg .pk-row, .fg .pk-frog, .fg .leap-frog {
    transition: none;
  }
  @supports (interpolate-size: allow-keywords) {
    .faq-item::details-content {
      transition: none;
    }
  }
}
.fg .annot {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--muted-soft);
  pointer-events: none;
}
.fg .annot-line {
  flex: none;
  width: 21px;
  height: auto;
  overflow: visible;
}
.fg .annot-text {
  font-family: "Caveat", var(--font);
  font-weight: 600;
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: 0.01em;
  color: var(--muted);
  text-align: left;
  white-space: nowrap;
}
.fg .annot-draw {
  stroke-dasharray: var(--len, 260);
  stroke-dashoffset: var(--len, 260);
}
.fg .annot.in .annot-draw {
  animation: annotDraw 0.75s 0.15s var(--ease-swim) forwards;
}
.fg .annot-ln {
  display: block;
  clip-path: inset(-14% 100% -14% 0);
}
.fg .annot.in .annot-ln {
  animation: annotWrite 0.44s 0.42s cubic-bezier(0.42, 0, 0.36, 1) forwards;
}
.fg .annot.in .annot-ln:nth-child(2) {
  animation-delay: 0.82s;
}


@keyframes annotWrite {
  to {
    clip-path: inset(-14% 0 -14% 0);
  }
}


@keyframes annotDraw {
  to {
    stroke-dashoffset: 0;
  }
}
@media (max-width: 780px) {
  .fg .annot {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .fg .annot-draw {
    stroke-dasharray: none;
    stroke-dashoffset: 0;
    animation: none;
  }
  .fg .annot-ln {
    clip-path: none;
    animation: none;
  }
}



@keyframes bgHop {
  0%,
  72%,
  100% {
    transform: translateY(0) scaleY(1);
  }
  76% {
    transform: translateY(2px) scaleY(0.92);
  }
  84% {
    transform: translateY(-18px) scaleY(1.06);
  }
  92% {
    transform: translateY(0) scaleY(0.97);
  }
}


@keyframes bgDrift {
  0%,
  100% {
    transform: translate(0, 0);
  }
  30% {
    transform: translate(16px, -12px);
  }
  55% {
    transform: translate(4px, 9px);
  }
  80% {
    transform: translate(-13px, -5px);
  }
}
.fg .step-t {
  min-width: 0;
}
.fg .uline {
  position: relative;
  display: inline-block;
}
.fg .uline-mark {
  position: absolute;
  left: -5%;
  bottom: -0.2em;
  width: 110%;
  height: 0.32em;
  color: var(--green);
  overflow: visible;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .fg .uline-mark .annot-draw {
    stroke-dasharray: none;
    stroke-dashoffset: 0;
    animation: none;
  }
}


@keyframes costPost {
  0% {
    opacity: 0;
    transform: translateY(7px);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
.fg .pond-stage {
  position: relative;
  margin-top: 26px;
}
.fg .pond-stage .pond-device {
  margin-top: 0;
}
.fg .annot-drag .annot-text {
  text-align: right;
}
.fg .annot-scroll {
  left: calc(100% + 16px);
  top: 12%;
  transform: rotate(1.5deg);
  opacity: 0;
  transition: opacity 0.3s 0.35s var(--ease-swim);
}
.fg .pond-device.is-editor ~ .annot-scroll {
  opacity: 1;
}
.fg .annot-scrollmark {
  width: 24px;
}
@media (min-width: 781px) {
  .fg .pond-stage {
    max-width: 310px;
    margin-right: auto;
  }
}
.fg .pond-device.is-editor ~ .annot-scroll .annot-draw {
  animation: annotDraw 0.55s 0.35s var(--ease-swim) forwards;
}
.fg .pond-device.is-editor ~ .annot-scroll .annot-draw:nth-child(2), .fg .pond-device.is-editor ~ .annot-scroll .annot-draw:nth-child(3) {
  animation-delay: 0.6s;
}
.fg .pond-device.is-editor ~ .annot-scroll .annot-ln {
  animation: annotWrite 0.45s 0.7s cubic-bezier(0.42, 0, 0.36, 1) forwards;
}
.fg .pond-device.is-editor ~ .annot-scroll .annot-ln:nth-child(2) {
  animation-delay: 1.05s;
}
@media (prefers-reduced-motion: reduce) {
  .fg .pond-device.is-editor ~ .annot-scroll .annot-draw {
    stroke-dashoffset: 0;
    animation: none;
  }
  .fg .pond-device.is-editor ~ .annot-scroll .annot-ln {
    clip-path: none;
    animation: none;
  }
}
.fg .rrow-tog {
  border: 0;
  padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.2s linear, transform 0.09s
    cubic-bezier(0.23, 1, 0.32, 1);
}
.fg .rrow-tog::after {
  transition: left 0.24s cubic-bezier(0.23, 1, 0.32, 1);
}
.fg .rrow-tog:active {
  transform: scale(0.94);
}
.fg .rrow-tog:focus-visible {
  outline: 3px solid var(--green-tint);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .fg .rrow-tog, .fg .rrow-tog::after {
    transition: none;
  }
}
.fg .flypath {
  position: relative;
  
  height: 186px;
  margin-bottom: 4px;
  overflow: hidden;
  pointer-events: none;
  
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 24%,
    #000 76%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 24%,
    #000 76%,
    transparent 100%
  );
}
.fg .flyer {
  position: absolute;
  top: 50%;
  left: 0;
  margin-top: -66px;
  transform: translateX(-220px); 
}
.fg .flyfrog {
  display: block;
  width: 150px;
  height: auto;
  transform-origin: 50% 60%;
}
.fg .flypath.aloft .flyer {
  animation: flyAcross 15s linear infinite;
}
.fg .flypath.aloft .flyfrog {
  animation: flyArc 15s cubic-bezier(0.42, 0, 0.58, 1) infinite;
}



@keyframes flyAcross {
  0% {
    transform: translateX(-220px);
  }
  45%,
  100% {
    transform: translateX(700px);
  }
}



@keyframes flyArc {
  0% {
    transform: translateY(14px) rotate(-7deg);
  }
  12% {
    transform: translateY(0) rotate(-2deg);
  }
  23% {
    transform: translateY(-10px) rotate(2deg);
  }
  34% {
    transform: translateY(0) rotate(6deg);
  }
  45%,
  100% {
    transform: translateY(14px) rotate(9deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .fg .flypath.aloft .flyer, .fg .flypath.aloft .flyfrog {
    animation: none;
  }
  .fg .flyer {
    left: 50%;
    margin-left: -75px;
    transform: none;
  }
}
.fg .mtile-pic {
  width: auto;
  height: auto;
  max-width: 76%;
  max-height: 82%;
  right: -3%;
  bottom: -5%;
  opacity: 1;
}

/* --------------------------------------------------- fitting this site's phone

   The pond arrives as a free-standing device: its own rounded corners, its own
   shadow, its own top margin. Inside a phone mockup that is a phone drawn
   inside a phone, so all of it comes off and the pond becomes the screen.

   `.phone-screen` is `display: grid; place-items: center`, which sizes its
   items to their content. The pond's width comes from its parent and its
   children are absolutely positioned, so it measured 0 wide, `--fs` computed
   as 0/402, and the whole device scaled to nothing. It has to be told to fill.

   The proportions happen to be right: the design frame is 402x752 and the
   screen here is 255 wide, so `--fs` lands at 0.634 and the frame comes out
   477 tall against 556 of screen. */
.phone-screen > .fg-pond { width: 100%; height: 100%; }
/* `height: 100%` needs a parent with a definite height at every step, and
   `.pond-stage` had none: the device resolved to 255x0, and since it carries
   `overflow: hidden`, every child was clipped away while still reporting a
   normal bounding box, because they are absolutely positioned and escape the
   zero-height box for measurement. An empty phone that measured fine. */
.fg-pond .pond-stage { margin-top: 0; height: 100%; }
.fg-pond .pond-device {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  margin: 0;
  border-radius: 0;
  box-shadow: none;
}

/* The flyer brings its own 186px lane and its own edge mask from the landing,
   so the wrapper only has to not get in the way. */
.fg-flypath { position: relative; }

/* ------------------------------------------------- this site's type and pace

   Everything below overrides the generated rules above, deliberately and in
   one place, so a re-extract does not quietly undo it.

   TYPE. The landing shouts: 33px at weight 900 for a step title, 18px at 700
   for its copy. That is right on a page whose whole job is one app, and wrong
   on a portfolio page where the section beside it runs a 14px heading. These
   now sit on this site's scale: `.step-t` takes the `.section-head h2` size
   and weight, `.band-copy` takes `.prose`, and the mission labels take the
   `.section-note` size. The drawn numerals shrink to match their line. */
.fg .step-label {
  gap: 8px;
  margin-top: 26px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: var(--tracking, -0.01em);
}
.fg .step-n { width: 19px; height: 19px; }
.fg .band-copy {
  margin-top: 7px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: var(--tracking, -0.01em);
  max-width: 60ch;
}
.fg .band-copy b { font-weight: 600; }
.fg .mtile-name { font-size: 12px; font-weight: 600; letter-spacing: -0.12px; }
/* the hand-drawn underline is scaled to the word, and at 14px its stroke is
   thicker than the letters it sits under */
.fg .uline-mark { stroke-width: 5; }

/* PACE. He crossed in the first 45% of a 15s loop and then sat off stage for
   the remaining 8s, which on a page this short reads as a frog that flew past
   once and never came back. Both keyframe sets are rewritten to span the whole
   cycle, the arc's stops remapped by the same 0.45 so the bank still matches
   the crossing.

   The ends are as tight as they can be while keeping the instant reset off
   stage: he is 92px wide, so -100 clears the left edge and 430 clears a lane
   of at most 392. That leaves him visible about 90% of the cycle. The first
   pass used -200 and 500 and he spent a third of every loop in the wings,
   which is the same "flew past once" problem in a smaller form. */
@keyframes fgFlyAcross {
  from { transform: translateX(-100px); }
  to { transform: translateX(430px); }
}
@keyframes fgFlyArc {
  0%   { transform: translateY(11px) rotate(-7deg); }
  27%  { transform: translateY(0) rotate(-2deg); }
  51%  { transform: translateY(-8px) rotate(2deg); }
  76%  { transform: translateY(0) rotate(6deg); }
  100% { transform: translateY(11px) rotate(9deg); }
}
.fg .flypath.aloft .flyer { animation: fgFlyAcross 8s linear infinite; }
.fg .flypath.aloft .flyfrog { animation: fgFlyArc 8s cubic-bezier(0.42, 0, 0.58, 1) infinite; }

/* SIZE. A 186px lane for a frog who occupies 110 of it is mostly air, and the
   air reads as a gap under the hero rather than as a lane. */
/* The lane is sized to the frog rather than picked, because "enough for him"
   is arithmetic. He hangs from `top: 50%` plus his own margin, and the arc
   carries him from -8 to +11 around that. For nothing to clip:

       laneH/2 + mt - 8      >= 0        his highest point
       laneH/2 + mt + 11 + h <= laneH    his lowest

   At h=78 those meet at laneH 98 with mt -40: top 1, bottom 98. The previous
   values (h 87, lane 104) failed the second one by 6px and he was quietly
   losing his feet at the bottom of every arc. */
.fg .flypath { height: 98px; margin-bottom: 0; }
.fg .flyfrog { width: 78px; }
.fg .flyer { margin-top: -40px; }
/* 4px of air under the hero rather than 18: the lane is his, not a gap. */
.fg-flypath { margin-top: -32px; }

/* --------------------------------------------------------- a smaller frog

   At rest he was `translateY(538px) scale(0.345)`, which put the top of his
   eyes at y568 of a 752 frame: he filled the bottom quarter of the screen.
   Inside a phone mockup on a portfolio page that is more frog than the point
   needs.

   0.28 with translateY(603) keeps his bottom exactly where it was. The maths,
   because it is not obvious from the numbers: transform-origin is `201px 0px`,
   so a point y lands at `translateY + y * scale`. His body is drawn to y1001,
   which at the old values reached 883. Holding that, 603 + 1001 x 0.28 = 883.
   His eye tops move from 568 to 627, so he loses 59px of height and gains
   nothing anywhere else.

   The leap keyframes have to move with him. They start and end on the resting
   transform as a literal, so changing the rule alone would make him jump the
   moment he is tapped. Both are redefined here rather than edited above, so a
   re-extract cannot half-undo this. */
.fg .leap-frog { transform: translateY(603px) scale(0.28); }
@keyframes leapUp {
  0%   { transform: translateY(603px) scale(0.28); }
  16%  { transform: translateY(627px) scale(0.264); }
  100% { transform: translateY(0) scale(1); }
}
@keyframes leapDown {
  0%   { transform: translateY(0) scale(1); }
  12%  { transform: translateY(-14px) scale(1.02); }
  100% { transform: translateY(603px) scale(0.28); }
}

/* The steps block that stands on its own between two sections takes this
   site's section rhythm. `main > .fg-steps` picks only that one: the step-one
   block lives inside the phone section and must not push it open. */
main > .fg-steps { margin-bottom: 40px; }