.ribbit-site {
  --paper: #0b0711;
  --ink: #fff9ee;
  --white: #fff9ee;
  --muted: #d0c1e1;
  --line: #51416a;
  --lime: #dafa24;
  --purple: #680bd1;
  --black: #100a16;
  --lavender: #201431;
  --impact: "Anton", "Space Grotesk", sans-serif;
}
.ribbit-site :focus-visible { outline-color: var(--lime); }
.ribbit-site .mast { border-color: #8739e8; }
.ribbit-site .nav-token, .ribbit-site .btn { border-radius: 2rem; color: var(--black); border-color: transparent; }
.ribbit-site .nav-token:hover, .ribbit-site .btn:hover { background: var(--white); color: var(--black); }
.dark-hero { overflow: clip; padding: clamp(1rem, 3vw, 3rem) 0 2.4rem; position: relative; isolation: isolate; }
.dark-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(circle at 72% 39%, #5e14b8 0, #290d45 28%, transparent 58%);
  opacity: .68;
}
.night-stage { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: center; position: relative; min-height: clamp(31rem, 42vw, 41rem); gap: 1.25rem; }
.night-copy { position: relative; z-index: 3; padding-block: 1rem; }
.night-copy h1 { font: 400 clamp(5.1rem, 13.1vw, 13rem)/.97 var(--impact); letter-spacing: -.035em; text-transform: uppercase; }
.night-copy h1 span { display: table; margin: -.08em 0 0 .2em; padding: .15em .32em .19em; transform: rotate(-5deg); color: var(--black); background: var(--lime); font-size: .28em; letter-spacing: .015em; white-space: nowrap; clip-path: polygon(2% 0, 100% 4%, 97% 50%, 100% 95%, 0 100%, 3% 48%); }
.night-copy p { margin: 1.55rem 0 1.15rem; max-width: 28ch; font-size: clamp(1.15rem, 2vw, 1.7rem); font-weight: 700; line-height: 1.25; }
.night-copy .btn { gap: .7rem; padding-inline: 1.25rem; }
.collage { position: relative; min-height: 100%; display: grid; place-items: center; isolation: isolate; }
.collage::before {
  content: ""; position: absolute; z-index: -1; inset: 1% 4%;
  background: radial-gradient(circle, #ad53ff 1px, transparent 1.6px) 0 0 / 8px 8px;
  mask: radial-gradient(ellipse at 52% 53%, black 27%, transparent 72%);
}
.pose { position: absolute; width: 37%; height: 38%; display: grid; place-items: center; border: clamp(4px, .6vw, 10px) solid var(--white); background: var(--purple); }
.pose img { width: 100%; height: 100%; min-height: 0; object-fit: contain; }
.pose-one { top: 12%; left: 0; transform: rotate(-11deg); background: var(--lime); }
.pose-two { top: 9%; right: 13%; transform: rotate(12deg); }
.pose-three { bottom: 16%; left: 1%; transform: rotate(-10deg); }
.pose-four { bottom: 16%; right: 10%; transform: rotate(12deg); background: var(--lime); }
.night-frog { z-index: 1; width: 84%; max-height: 36rem; object-fit: contain; filter: drop-shadow(3px 0 0 var(--white)) drop-shadow(-3px 0 0 var(--white)) drop-shadow(0 4px 0 var(--white)); }
.night-coin { position: absolute; z-index: 2; top: 3%; right: 0; width: clamp(4rem, 13vw, 12rem); height: auto; transform: rotate(13deg); }
.night-note { position: absolute; right: 0; bottom: 13%; padding: .65rem .8rem; transform: rotate(8deg); background: var(--lime); color: var(--black); font: 400 clamp(.7rem, 1.3vw, 1.35rem)/1.06 var(--impact); text-transform: uppercase; }
.ribbit-site .launch { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .65rem 1.2rem; padding: .7rem 1.4rem; border: 2px solid var(--lime); border-radius: 1rem; background: var(--black); }
.ribbit-site .launch h2 { font: 400 clamp(1.1rem, 2vw, 1.6rem)/1.15 var(--impact); text-transform: uppercase; }
.ribbit-site .token-rows { margin: 0; }
.ribbit-site .token-rows div { justify-content: start; border: 0; }
.ribbit-site .token-rows dd { color: var(--lime); }
.ribbit-site .launch .btn:disabled { background: #30263c; color: #eee3f8; border: 1px solid #574766; }
.ribbit-site .token-status { grid-column: 2 / -1; margin: 0; }
.ribbit-site .story { position: relative; background: var(--purple); padding-block: clamp(2.5rem, 5vw, 5rem); }
.ribbit-site .story::before { content: ""; position: absolute; inset: -10px 0 auto; height: 14px; background: var(--white); clip-path: polygon(0 45%, 9% 0, 19% 59%, 31% 10%, 45% 55%, 57% 5%, 66% 60%, 78% 4%, 89% 52%, 100% 0, 100% 70%, 90% 100%, 78% 65%, 65% 100%, 55% 70%, 44% 100%, 31% 60%, 19% 100%, 8% 68%, 0 100%); }
.ribbit-site .story h2, .ribbit-site .return h2 { font-family: var(--impact); font-weight: 400; text-transform: uppercase; }
.ribbit-site .story blockquote { color: var(--black); }
.ribbit-site .return { background: var(--lavender); }
.ribbit-site .mast-footer { color: var(--black); }
.ribbit-site .mast-footer :focus-visible { outline-color: var(--black); }
@media (prefers-reduced-motion: no-preference) {
  .night-frog { animation: sticker-in .7s cubic-bezier(.16,1,.3,1) both; }
  @keyframes sticker-in { from { transform: translateY(1.5rem) rotate(-4deg) scale(.9); } to { transform: none; } }
}
@media (max-width: 800px) {
  .ribbit-site .nav-links a[href="#pond"] { display: none; }
  .night-stage { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .night-copy h1 { font-size: clamp(5.25rem, 17vw, 9rem); }
  .night-copy p { font-size: 1.1rem; margin-block: 1rem; }
  .collage { min-height: clamp(16rem, 76vw, 32rem); }
  .night-frog { max-height: clamp(15rem, 72vw, 31rem); }
  .night-coin { top: auto; bottom: 32%; }
  .night-note { bottom: 7%; }
  .ribbit-site .launch { grid-template-columns: minmax(0, 1fr); gap: .45rem; padding: .8rem; }
  .ribbit-site .token-status { grid-column: 1; }
}

.ribbit-site { --page: 100rem; --gutter: clamp(1rem, 3.1vw, 3rem); }
@media (min-width: 801px) {
  .dark-hero { padding-top: clamp(1rem, 2.2vw, 2.25rem); padding-bottom: 1.9rem; }
  .night-stage { min-height: clamp(30rem, 42vw, 40rem); }
  .night-copy h1 { font-size: clamp(5.1rem, 14.2vw, 14rem); }
  .night-copy { transform: translateY(-1rem); }
}

/* Measured against the 1586 × 992 reference. */
.ribbit-site { --reference-black: #050507; --reference-cream: #faf5e8; --reference-lime: #dbfa23; }
.ribbit-site .mast { background: var(--reference-black); }
.ribbit-site .launch .actions .btn {
  gap: .65em;
  background: var(--reference-cream);
  color: #0d0b0b;
  border: 0;
  font-weight: 700;
}
.ribbit-site .launch .actions .btn:hover:not(:disabled) { background: var(--reference-lime); }
.ribbit-site .launch .actions .btn:disabled { opacity: 1; cursor: default; }
.ribbit-site .launch .actions .btn::before {
  content: "";
  display: block;
  width: 1.35em;
  height: 1.35em;
  flex: none;
  background: currentColor;
  mask: var(--token-icon) center / contain no-repeat;
}
#chart-link { --token-icon: url("./dex-screener-logo.png"); }
.ribbit-site .launch .actions #chart-link::before { mask-mode: luminance; }
#social-link { --token-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.9 2H22l-6.8 7.8L23.2 22h-6.3L12 14.5 5.4 22H2.2l8.2-9.3L2.7 2h6.5l4.4 6.7L18.9 2ZM17.8 20h1.7L8.2 4H6.3l11.5 16Z'/%3E%3C/svg%3E"); }
#copy-contract { --token-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='7' y='6' width='14' height='16' rx='2'/%3E%3Cpath d='M3 17V4a2 2 0 0 1 2-2h11'/%3E%3C/svg%3E"); }
.origin-banner { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem 2rem; margin-bottom: 2.5rem; }
.origin-banner .btn { gap: .7em; }
.ribbit-site .origin-banner h2 { font-style: italic; }
@media (min-width: 1000px) {
  .ribbit-site { --page: 100rem; --gutter: 0px; }
  .ribbit-site .mast-inner { width: min(100%, var(--page)); min-height: 0; aspect-ratio: 1586 / 81; padding-inline: 4.85% 3.8%; }
  .ribbit-site .brand { flex-basis: 11%; }
  .ribbit-site .brand img { width: 100%; }
  .ribbit-site .nav-links { gap: clamp(1.4rem, 3vw, 3rem); font-size: clamp(.8rem, 1.13vw, 1.125rem); }
  .ribbit-site .nav-token { display: grid; place-items: center; min-height: clamp(2rem, 3vw, 2.95rem); min-width: clamp(4.5rem, 6.8vw, 6.7rem); padding: 0 .6em; }
  .ribbit-site .dark-hero { padding: 0; background: var(--reference-black); }
  .ribbit-site .dark-hero::before { display: none; }
  .dark-hero > .container { container-type: inline-size; padding-bottom: 2.48%; }
  .night-stage { display: block; min-height: 0; aspect-ratio: 1586 / 650; }
  .night-copy { position: absolute; inset: 0; transform: none; padding: 0; pointer-events: none; }
  .night-copy h1 { position: absolute; top: 6%; left: 4.7%; font-size: 16.2cqw; line-height: 1; }
  .night-copy p { position: absolute; top: 67.6%; left: 4.9%; margin: 0; font-size: 1.73cqw; line-height: 1.22; max-width: 27ch; }
  .night-copy .btn { pointer-events: auto; }
  .night-stage .collage { position: absolute; inset: 9% 17.5% 6% 36%; }
  .night-stage .night-frog { width: 91%; max-height: 34cqw; }
  .night-stage .night-coin { top: 4.9%; right: 4.2%; width: 13.1%; transform: none; }
  .night-stage .night-note { right: 4.5%; bottom: 17%; font-size: 1.75cqw; }
  .ribbit-site .night-copy .btn {
    position: absolute;
    left: 4.82%; top: 80.77%; width: 20.56%; height: 8.77%;
    min-height: 0; padding: 0 .35em; gap: .64em;
    background: var(--reference-lime); font-size: 1.39cqw; line-height: 1;
    box-shadow: 0 0 0 2px var(--reference-black);
  }
  .ribbit-site .night-copy .btn:hover { background: var(--reference-cream); }
  .ribbit-site .launch {
    width: 94.45%; min-height: 5.17cqw; margin-inline: auto;
    grid-template-columns: 25% minmax(0, 1fr) 44%;
    column-gap: 0; padding: .6cqw 2cqw .6cqw 2.65cqw;
    border: max(2px, .17cqw) solid var(--reference-lime); border-radius: 1.5cqw;
    background: var(--reference-black); position: relative;
  }
  .ribbit-site .launch h2 { border-right: 1px solid var(--reference-lime); padding-block: .43cqw; font-size: 1.83cqw; white-space: nowrap; }
  .ribbit-site .launch .token-rows { padding-inline: 2.9cqw .6cqw; min-width: 0; }
  .ribbit-site .launch .token-rows div { gap: .55cqw; padding: 0; font-size: 1.37cqw; }
  .ribbit-site .launch dt { white-space: nowrap; }
  .ribbit-site .launch .actions { display: grid; grid-template-columns: 1.23fr 1fr 1.76fr; gap: 1.35cqw; }
  .ribbit-site .launch .actions .btn { min-height: 3.35cqw; padding: 0 .25em; font-size: 1.36cqw; white-space: nowrap; }
  .ribbit-site .launch .token-status {
    position: absolute; width: 1px; height: 1px; margin: -1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .ribbit-site .story { padding: 2.4vw min(4.9vw, 5rem) 4.5vw; }
  .ribbit-site .story::before { height: 17px; inset-block-start: -11px; }
  .origin-banner { display: grid; grid-template-columns: 44% minmax(0, 1fr) auto; gap: 2.5vw; min-height: 6.4vw; margin-bottom: 2.6rem; }
  .ribbit-site .origin-banner h2 { font-size: clamp(2.5rem, 4.25vw, 4.5rem); white-space: nowrap; }
  .origin-banner p { border-left: 1px solid var(--white); padding: .75em 0 .75em 1.7em; font-weight: 700; font-size: clamp(.95rem, 1.35vw, 1.35rem); line-height: 1.3; }
  .origin-banner .btn { min-height: 3.4vw; padding-inline: 1.35vw; font-size: clamp(.75rem, 1.15vw, 1.15rem); white-space: nowrap; }
  .ribbit-site .section:not(.story), .ribbit-site .mast-footer { padding-inline: min(4.9vw, 5rem); }
}

@media (min-width: 1000px) {
  .origin-banner { grid-template-columns: 41% minmax(0, 1fr) auto; }
  .ribbit-site .origin-banner h2 { font-size: 4.55cqw; }
  .ribbit-site .launch:has(#copy-contract:enabled) .token-status:not(:empty) {
    width: auto; height: auto; margin: 0; clip-path: none; white-space: normal;
    inset: auto 1rem calc(100% + .25rem) auto;
    padding: .25em .65em;
    background: var(--reference-black);
    border-radius: .35rem;
  }
}

/* Separate artwork, type and motion layers. */
.night-copy h1 {
  color: #fff;
  transform: skewX(-9deg);
  transform-origin: left bottom;
}
.night-copy h1 span {
  font: 400 .27em/1.05 "Permanent Marker", cursive;
  transform: skewX(9deg) rotate(-5deg);
  padding: .17em .4em .21em;
  margin: -.02em 0 0 .26em;
  clip-path: polygon(4% 6%, 25% 1%, 48% 5%, 74% 0, 99% 4%, 97% 19%, 100% 25%, 98% 39%, 100% 49%, 97% 59%, 100% 78%, 98% 93%, 78% 97%, 52% 94%, 25% 100%, 2% 96%, 3% 78%, 0 67%, 2% 51%, 0 39%, 3% 26%, 0 16%);
}
.night-crown { width: 2.75rem; color: var(--lime); margin-left: .85rem; transform: rotate(-11deg); }
.night-grid { display: none; }
.art-note { display: none; }
.night-note, .art-note {
  text-align: center;
  clip-path: polygon(7% 4%, 78% 0, 94% 5%, 97% 24%, 94% 30%, 100% 48%, 97% 57%, 100% 76%, 94% 95%, 9% 100%, 2% 91%, 4% 68%, 0 55%, 4% 40%, 0 31%);
}
.ribbit-site .origin-banner h2 {
  position: relative;
  font-style: normal;
  letter-spacing: -.015em;
  line-height: 1.04;
  transform: skewX(-9deg);
  transform-origin: left center;
  color: #fff;
}
.origin-banner h2 svg {
  width: .72em;
  height: .9em;
  margin-right: .15em;
  display: inline-block;
  vertical-align: .02em;
  color: var(--lime);
}
.ribbit-site .story { background-color: #6206c4; }
@media (min-width: 1000px) {
  .night-crown { position: absolute; left: 6.8%; top: 2.4%; margin: 0; width: 4.85cqw; }
  .night-grid {
    display: block;
    position: absolute;
    pointer-events: none;
    inset: auto 4% 0 24%;
    height: 34%;
    background: repeating-linear-gradient(90deg, #b000ff 0 2px, transparent 2px 8%), repeating-linear-gradient(0deg, #a500ff 0 2px, transparent 2px 18%);
    transform: perspective(310px) rotateX(58deg);
    transform-origin: bottom;
    mask-image: linear-gradient(0deg, #000 30%, transparent);
    opacity: .8;
  }
  .night-stage .collage::before {
    inset: -12% -20% -3% -12%;
    background: radial-gradient(circle, #a700ff 1.4px, transparent 1.8px) 0 0 / 5px 5px;
    mask-image: radial-gradient(ellipse at 49% 40%, #000 26%, transparent 69%);
  }
  .night-stage .collage::after {
    content: "";
    position: absolute;
    inset: -11% -16% 9% -10%;
    z-index: -2;
    background: repeating-conic-gradient(from -28deg at 49% 68%, #790cff 0deg 10deg, transparent 11deg 27deg);
    mask-image: radial-gradient(ellipse, #000 18%, transparent 68%);
  }
  .night-stage .pose { width: 35%; height: 42%; }
  .night-stage .pose-one { left: 6%; top: 13%; }
  .night-stage .pose-two { right: 3%; top: 12%; }
  .night-stage .pose-three { left: 1%; bottom: 16%; }
  .night-stage .pose-four { right: 0; bottom: 16%; }
  .art-note {
    display: block; position: absolute; left: 30.6%; bottom: 16%; z-index: 2;
    padding: .55em .65em; background: var(--lime); color: var(--black);
    font: 400 1.24cqw/1.02 var(--impact); text-transform: uppercase;
    transform: rotate(-13deg);
  }
  .night-stage .night-note { transform: rotate(-12deg); }
}
@media (prefers-reduced-motion: no-preference) {
  .night-crown, .pose, .night-coin, .night-note, .art-note {
    animation: collage-layer-in .78s cubic-bezier(.16,1,.3,1) both;
  }
  .pose-two, .pose-four { animation-delay: .09s; }
  .night-coin, .night-note { animation-delay: .16s; }
  @keyframes collage-layer-in {
    from { translate: 0 1.2rem; opacity: 0; }
    to { translate: 0; opacity: 1; }
  }
}

@media (min-width: 1000px) {
  .ribbit-site .origin-banner h2 {
    padding-inline-start: .23em;
    font-size: clamp(2.7rem, 4.55vw, 4.55rem);
    transform: skewX(-9deg) scale(1.16, 1.12);
  }
  .origin-banner h2 svg { position: absolute; left: -.65em; top: -.15em; margin: 0; }
  .ribbit-site .night-copy .btn::after {
    content: "";
    position: absolute;
    inset: calc(100% + .62cqw) auto auto 19%;
    width: 45%; height: .35cqw;
    background: var(--reference-lime); border-radius: 80% 60% 0 25%;
    transform: rotate(-4deg);
  }
}

/* Origin feature and artwork spread */
.origin-feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .94fr);
  gap: clamp(1.25rem, 4vw, 4rem);
  align-items: center;
  border-top: 1px solid #d5a2ff;
  padding-top: clamp(1.5rem, 4vw, 3.5rem);
}
.origin-article { max-width: 39rem; }
.origin-date { font-weight: 700; font-size: .875rem; color: var(--white); }
.origin-date span { margin-inline: .35em; color: var(--lime); }
.origin-article h3 {
  margin: .55rem 0 1rem;
  font: 400 clamp(3.4rem, 7vw, 7rem)/.96 var(--impact);
  text-transform: uppercase;
  letter-spacing: -.025em;
  transform: skewX(-7deg);
  transform-origin: left bottom;
}
.origin-article > p:not(.origin-date) { max-width: 52ch; font-size: clamp(1rem, 1.4vw, 1.25rem); }
.origin-article blockquote {
  margin: 1.4rem 0 0;
  padding: .9rem 1.2rem;
  background: var(--lime);
  color: var(--black);
  border-radius: .3rem;
}
.origin-article blockquote p { font: 400 clamp(1.3rem, 2.65vw, 2.35rem)/1.16 var(--impact); }
.origin-article cite { display: block; margin-top: .35rem; font-style: normal; font-size: .875rem; }
.origin-film {
  width: min(100%, 33rem);
  justify-self: center;
  background: var(--reference-black);
  border: 2px solid var(--white);
  border-radius: .85rem;
  overflow: clip;
}
.film-label { display: flex; justify-content: space-between; gap: .5rem; padding: .7rem .9rem; font-weight: 700; }
.film-label span:last-child { color: var(--lime); font-variant-numeric: tabular-nums; }
.origin-film video { width: 100%; aspect-ratio: 1; object-fit: contain; display: block; background: var(--reference-black); }
.origin-film video:focus-visible { outline-offset: -4px; }
.origin-film figcaption { padding: .65rem .9rem .8rem; color: var(--muted); font-size: .85rem; }
@media (max-width: 800px) {
  .ribbit-site .story { padding-inline: 0; }
  .origin-feature { grid-template-columns: minmax(0, 1fr); }
}

.tokenomics {
  position: relative;
  isolation: isolate;
  overflow: clip;
  border-block: 1px solid #8739e8;
  background: var(--reference-black);
}
.tokenomics::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(circle, #9e38ff 1.2px, transparent 1.8px) 0 0 / 6px 6px;
  mask-image: radial-gradient(ellipse at 23% 59%, #000 10%, transparent 57%);
}
.tokenomics-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 5vw, 5rem);
  align-items: center;
}
.tokenomics-intro h2 {
  font: 400 clamp(3.2rem, 7.8vw, 7.3rem)/1 var(--impact);
  text-transform: uppercase;
  transform: skewX(-9deg);
  transform-origin: left bottom;
  text-wrap: initial;
}
.tokenomics-intro p {
  position: relative;
  margin-top: .9rem;
  max-width: 39ch;
  color: var(--white);
  font-weight: 600;
}
.tokenomics-art {
  position: relative;
  display: grid;
  place-items: center;
  isolation: isolate;
  width: min(100%, 29rem);
  min-height: clamp(14rem, 25vw, 23rem);
  margin: 1rem auto 0;
}
.tokenomics-art::before, .tokenomics-art::after {
  content: "";
  position: absolute;
  z-index: -1;
  border: clamp(4px, .5vw, 8px) solid var(--white);
}
.tokenomics-art::before {
  inset: 14% 15% 12% 12%;
  background: var(--purple);
  transform: rotate(-11deg);
}
.tokenomics-art::after {
  inset: 17% 11% 11% 21%;
  background: var(--lime);
  transform: rotate(10deg);
}
.tokenomics-frog {
  width: min(55%, 15.5rem);
  filter: drop-shadow(2px 0 var(--white)) drop-shadow(-2px 0 var(--white)) drop-shadow(0 2px var(--white));
}
.tokenomics-coin { position: absolute; top: 8%; right: 6%; width: 22%; transform: rotate(12deg); }
.tokenomics-sticker {
  position: absolute;
  bottom: 10%;
  left: 6%;
  z-index: 1;
  padding: .35em .6em;
  background: var(--lime);
  color: var(--black);
  font: 400 clamp(1.15rem, 2.6vw, 2rem)/1 "Permanent Marker", cursive;
  transform: rotate(-12deg);
}
.tokenomics-ledger {
  margin: 0;
  padding: .35rem clamp(.8rem, 2vw, 1.75rem);
  background: var(--black);
  border: 2px solid var(--lime);
  border-radius: clamp(.9rem, 1.5vw, 1.5rem);
}
.tokenomics-ledger div {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: .75rem;
  padding-block: clamp(.75rem, 1.4vw, 1.2rem);
}
.tokenomics-ledger div + div { border-top: 1px solid var(--line); }
.tokenomics-ledger dt { color: var(--muted); }
.tokenomics-ledger dd { margin: 0; font-weight: 700; }
.tokenomics-ledger div:first-child dd { color: var(--lime); font: 400 1.35rem/1 var(--impact); }
.tokenomics-ledger .btn { gap: .55em; background: var(--reference-cream); white-space: nowrap; }
.tokenomics-ledger .btn:hover { background: var(--lime); }
@media (max-width: 800px) {
  .tokenomics-grid { grid-template-columns: minmax(0, 1fr); }
}

.pond-close {
  position: relative;
  isolation: isolate;
  overflow: clip;
  border-top: 1px solid #8739e8;
  background: var(--purple);
}
.pond-close::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(circle, #170626 1.25px, transparent 1.8px) 0 0 / 6px 6px;
  mask-image: linear-gradient(105deg, transparent 36%, #000 95%);
}
.pond-close-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  align-items: center;
  gap: clamp(1rem, 4vw, 4rem);
}
.pond-close h2 {
  font: 400 clamp(3.6rem, 9vw, 8rem)/.95 var(--impact);
  text-transform: uppercase;
  transform: skewX(-9deg);
  transform-origin: left bottom;
  text-wrap: initial;
}
.pond-close p { margin-block: .9rem 1.2rem; font-weight: 700; }
.pond-close .btn { gap: .6em; }
.pond-close-art {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  min-height: clamp(15rem, 24vw, 23rem);
}
.pond-close-art::before {
  content: "";
  position: absolute;
  inset: 12% 15%;
  z-index: -1;
  background: var(--lime);
  border: 5px solid var(--white);
  transform: rotate(8deg);
}
.pond-close-art img {
  width: min(74%, 18rem);
  filter: drop-shadow(2px 0 var(--white)) drop-shadow(-2px 0 var(--white)) drop-shadow(0 2px var(--white));
}
@media (max-width: 800px) {
  .pond-close-inner { grid-template-columns: minmax(0, 1fr); }
  .pond-close-art { min-height: 15rem; width: min(100%, 23rem); justify-self: center; }
  .pond-close-art img { width: min(64%, 12rem); }
}

/* Ribbit.exe plays behind the story on wide screens. */
.ribbit-site .exe-scene {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background: var(--reference-black);
  border-block: 1px solid #8739e8;
}
.exe-inner { position: relative; }
.exe-copy {
  position: relative;
  z-index: 2;
  padding: clamp(2.75rem, 7vw, 6.25rem) 0;
  width: min(45%, 40rem);
}
.exe-file {
  font: 700 .95rem/1.3 ui-monospace, monospace;
  color: var(--lime);
  letter-spacing: .02em;
  margin-bottom: 1rem;
}
.exe-copy h2 {
  font: 400 clamp(3.6rem, 8vw, 7.5rem)/.93 var(--impact);
  letter-spacing: -.025em;
  text-transform: uppercase;
  text-wrap: initial;
  transform: skewX(-9deg);
  transform-origin: left bottom;
}
.exe-copy .exe-story {
  margin-top: 1.15rem;
  max-width: 35ch;
  font-size: clamp(1.05rem, 1.45vw, 1.45rem);
  font-weight: 600;
}
.exe-actions { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: 1.2rem; }
.exe-actions .btn { gap: .55em; }
.ribbit-site .exe-play, .ribbit-site .exe-sound {
  color: var(--white);
  border: 1px solid var(--line);
  background: var(--reference-black);
}
.ribbit-site .exe-play:hover, .ribbit-site .exe-sound:hover { color: var(--reference-black); background: var(--white); }
.exe-play[hidden], .exe-sound[hidden] { display: none; }
.exe-copy .exe-note { margin-top: 1.15rem; max-width: 49ch; color: var(--muted); font-size: .82rem; }
.exe-screen {
  position: absolute;
  inset: 0 0 0 37%;
  z-index: 1;
  overflow: clip;
  background: #080b04;
}
.exe-screen video { width: 100%; height: 100%; object-fit: contain; object-position: right center; display: block; }
.exe-screen::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg, var(--reference-black), #050507eb 9%, #05050750 27%, transparent 49%);
}
.exe-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, transparent 0 3px, #05050738 3px 4px);
}
@media (prefers-reduced-motion: no-preference) {
  .is-playing .exe-screen::after { animation: exe-scan .9s cubic-bezier(.16,1,.3,1) both; }
  @keyframes exe-scan {
    from { clip-path: inset(0 0 100% 0); opacity: 0; }
    to { clip-path: inset(0); opacity: 1; }
  }
}
@media (max-width: 800px) {
  .exe-copy { width: 100%; padding-bottom: 1.6rem; }
  .exe-screen { position: relative; inset: auto; aspect-ratio: 1; margin-inline: calc(-1 * var(--gutter)); }
  .exe-screen::before { background: linear-gradient(var(--reference-black), transparent 16%); }
}
@media (min-width: 1000px) {
  .exe-copy { padding-left: min(4.9vw, 5rem); }
}

/* Cream paper edges follow the shallow zigzag of the approved reference. */
.ribbit-site :is(.story, .exe-scene, .tokenomics, .pond-close, .mast-footer) {
  position: relative;
  overflow-x: clip;
  overflow-y: visible;
  border-block: 0;
  --seam-fill: var(--reference-black);
}
.ribbit-site .story { --seam-fill: #6206c4; }
.ribbit-site .pond-close { --seam-fill: var(--purple); }
.ribbit-site .mast-footer { --seam-fill: var(--lime); }
.ribbit-site .story::before { content: none; }
.section-seam {
  position: absolute;
  inset: -18px 0 auto;
  height: 28px;
  z-index: 3;
  pointer-events: none;
  overflow: hidden;
  --seam-edge: polygon(0 8px, 9% 0, 19% 9px, 31% 1px, 45% 9px, 57% 1px, 66% 9px, 78% 0, 89% 9px, 100% 0, 100% 100%, 0 100%);
}
.section-seam::before, .section-seam::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--white);
  clip-path: var(--seam-edge);
}
.section-seam::after { top: 8px; background: var(--seam-fill); }
@media (max-width: 600px) {
  .section-seam { --seam-edge: polygon(0 6px, 19% 0, 40% 7px, 63% 1px, 82% 7px, 100% 0, 100% 100%, 0 100%); }
}

/* Generated pond artwork, cropped to three independent decorative strips. */
.story > .section-seam, .exe-scene > .section-seam, .pond-close > .section-seam {
  height: clamp(64px, 10vw, 150px);
  top: calc(clamp(64px, 10vw, 150px) * -.65);
  background-image: url('./pond-separator-art.png');
  background-size: 100% 683%;
  background-repeat: no-repeat;
  background-position: center 21%;
}
.story > .section-seam::before, .story > .section-seam::after,
.exe-scene > .section-seam::before, .exe-scene > .section-seam::after,
.pond-close > .section-seam::before, .pond-close > .section-seam::after { content: none; }
.exe-scene > .section-seam { background-position: center 52%; }
.pond-close > .section-seam { background-size: 100% 512%; background-position: center 89%; }
.ribbit-site .story { padding-top: clamp(3.5rem, 6vw, 6rem); }
@media (max-width: 600px) {
 .story > .section-seam, .exe-scene > .section-seam, .pond-close > .section-seam { background-size: 760px 683%; }
 .pond-close > .section-seam { background-size: 760px 512%; }
}
/* Reserve room for the illustrated edges, clear of controls and captions. */
.ribbit-site .dark-hero > .container { padding-bottom: clamp(5rem, 9vw, 8rem); }
.ribbit-site .story { padding-bottom: clamp(6rem, 11vw, 10rem); }
/* Keep the illustrated horizons shallow, with clear space around each chapter. */
.story > .section-seam, .exe-scene > .section-seam, .pond-close > .section-seam {
  height: clamp(60px, 8vw, 112px);
  top: calc(clamp(60px, 8vw, 112px) * -.65);
}
.ribbit-site .dark-hero > .container { padding-bottom: clamp(4.5rem, 7vw, 6.5rem); }
.ribbit-site .story { padding-bottom: clamp(5.5rem, 9vw, 8rem); }
.film-actions { display: flex; flex-wrap: wrap; gap: .6rem; padding: .8rem .9rem .2rem; }
.film-actions .btn { min-height: 44px; font-size: .85rem; padding-inline: 1rem; }
.audio-unlock { position: fixed; right: 1rem; bottom: 1rem; z-index: 20; min-height: 48px; border: 2px solid #100a16 !important; box-shadow: 0 4px 18px #0008; }
.audio-unlock[hidden] { display: none; }
/* Motion accents preserve the original illustration transforms. */
.reading-progress { position: fixed; top: 0; left: 0; width: 100%; height: 3px; background: var(--lime); transform-origin: left; z-index: 30; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
 .ribbit-site .btn, .ribbit-site .nav-token { transition: background-color .18s, color .18s, translate .2s cubic-bezier(.16,1,.3,1); }
 .ribbit-site .btn:hover:not(:disabled), .ribbit-site .nav-token:hover { translate: 0 -2px; }
 .ribbit-site .btn:active:not(:disabled) { translate: 0 0; }
}
@media (prefers-reduced-motion: reduce) {
 html { scroll-behavior: auto !important; }
 .reading-progress { display: none; }
}

/* A curated meme feature, followed by three downloadable reactions. */
.ribbit-site .meme-culture { position:relative; background:#100a16; padding-block:clamp(4rem,7vw,7rem) clamp(6rem,9vw,9rem); --seam-fill:#100a16; }
.meme-intro { display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(2rem,6vw,6rem); align-items:center; }
.meme-intro h2 { font:400 clamp(3rem,6.8vw,6.5rem)/1 var(--impact); text-transform:uppercase; transform:skewX(-9deg); transform-origin:left; }
.meme-intro-copy p { max-width:36ch; margin:1.3rem 0; font-size:clamp(1rem,1.4vw,1.25rem); color:var(--muted); }
.meme-intro .btn { gap:.7rem; }
.meme-community { margin:0; padding:8px; background:var(--white); color:var(--black); transform:rotate(3deg); width:min(100%,28rem); justify-self:center; }
.meme-community img { width:100%; height:auto; display:block; }
.meme-community figcaption { font-weight:700; text-align:center; padding:.7rem .3rem .3rem; }
.meme-picks { margin-top:clamp(3rem,6vw,6rem); scroll-margin-top:2rem; }
.meme-picks-heading { display:flex; align-items:baseline; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:1.5rem; }
.meme-picks h3 { font:400 clamp(2rem,3vw,3rem)/1.1 var(--impact); text-transform:uppercase; }
.meme-picks-heading p { color:var(--muted); }
.meme-gallery { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(1rem,2vw,2rem); }
.meme-print { margin:0; min-width:0; }
.meme-image { display:grid; background:#050507; border:2px solid var(--white); aspect-ratio:4/5; overflow:hidden; }
.meme-image img { width:100%; height:100%; object-fit:contain; min-height:0; }
.meme-print figcaption { display:flex; justify-content:space-between; align-items:center; gap:.75rem; padding-top:.6rem; flex-wrap:wrap; }
.meme-print h4 { font-size:1rem; }
.meme-print figcaption a { color:var(--lime); font-size:.9rem; font-weight:700; min-height:44px; display:inline-flex; align-items:center; gap:.5rem; text-underline-offset:4px; }
@media (prefers-reduced-motion:no-preference) { .meme-image img { transition:scale .35s cubic-bezier(.16,1,.3,1); } .meme-image:hover img { scale:1.025; } }
@media(max-width:800px) { .meme-intro { grid-template-columns:1fr; } .meme-community { width:min(88%,25rem); margin-block:1rem; } .meme-gallery { grid-template-columns:1fr; gap:2rem; max-width:30rem; margin-inline:auto; } .meme-image { aspect-ratio:auto; } .meme-image img { height:auto; } }

/* Choose a reaction and preview the exact image before downloading. */
.meme-picker { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:clamp(1.5rem,4vw,4rem); align-items:start; }
.meme-selected { min-width:0; }
.meme-selected-image { background:#050507; border:2px solid var(--white); height:clamp(20rem,36vw,34rem); display:grid; place-items:center; padding:.75rem; }
.meme-selected-image img { max-width:100%; width:auto; height:100%; object-fit:contain; min-height:0; }
.meme-selected-actions { display:flex; gap:.75rem 1rem; align-items:center; flex-wrap:wrap; padding-top:1rem; }
.meme-selected-actions p { flex-basis:100%; font-weight:700; }
.meme-selected-actions .btn { min-height:48px; }
.meme-fullsize { color:var(--white); text-underline-offset:4px; min-height:44px; display:inline-flex; align-items:center; }
.meme-picker .meme-gallery { grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.5rem 1rem; width:100%; margin:0; }
.meme-picker .meme-image { aspect-ratio:1; padding:0; width:100%; cursor:pointer; border:2px solid var(--line); position:relative; }
.meme-choice[aria-pressed="true"] { border:3px solid var(--lime); }
.meme-choice[aria-pressed="true"]::after { content:'Selected'; position:absolute; right:0; bottom:0; background:var(--lime); color:var(--black); padding:.35rem .6rem; font:700 .8rem/1.2 "DM Sans",sans-serif; }
.meme-picker .meme-print figcaption a[hidden] { display:none; }
.meme-picker .meme-image img { width:100%; height:100%; object-fit:contain; }
@media(max-width:800px) { .meme-picker { grid-template-columns:1fr; } .meme-picker .meme-gallery { grid-template-columns:repeat(3,minmax(0,1fr)); gap:.65rem; } .meme-picker .meme-print h4 { font-size:.8rem; } .meme-selected-image { height:22rem; } .meme-choice[aria-pressed="true"]::after { font-size:.65rem; padding:.25rem; } }

/* The reaction desk uses the same cream frames and lime accents as the hero. */
.meme-picks { padding-top:clamp(2rem,4vw,3.5rem); border-top:1px solid var(--line); }
.meme-picks-heading { align-items:center; margin-bottom:2rem; }
.meme-picks h3 { font-size:clamp(2.6rem,4.6vw,4.5rem); transform:skewX(-7deg); transform-origin:left; }
.meme-picker { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(2rem,4vw,4rem); }
.meme-selected-image { height:clamp(24rem,37vw,34rem); border:8px solid var(--white); background:#050507; padding:0; }
.meme-selected-actions { padding-top:0; gap:.8rem 1.3rem; }
.meme-selected-actions p { background:var(--white); color:var(--black); margin:0 0 .35rem; padding:.8rem 1rem 1rem; font:400 clamp(1.3rem,2vw,1.8rem)/1.1 var(--impact); text-transform:uppercase; }
.meme-selected-actions .btn { padding-inline:1.4rem; }
.meme-picker .meme-gallery { grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.5rem 1rem; }
.meme-picker .meme-image { border:3px solid var(--white); background:#050507; aspect-ratio:1; border-radius:0; }
.meme-picker .meme-choice[aria-pressed="true"] { border-color:var(--lime); outline:2px solid var(--lime); outline-offset:4px; }
.meme-picker .meme-print figcaption { padding-top:.8rem; }
.meme-picker .meme-print h4 { font-size:.95rem; font-weight:600; }
.meme-choice[aria-pressed="true"]::after { padding:.3rem .45rem; font-size:.7rem; }
.meme-picker .meme-choice:focus-visible { outline:3px solid var(--lime); outline-offset:5px; }
@media(hover:hover) and (prefers-reduced-motion:no-preference) { .meme-picker .meme-choice { transition:translate .2s ease-out,border-color .2s; } .meme-picker .meme-choice:hover { translate:0 -4px; border-color:var(--lime); } }
@media(max-width:800px) { .meme-picker { grid-template-columns:1fr; gap:2rem; } .meme-selected-image { height:clamp(22rem,80vw,32rem); } .meme-picks-heading { gap:.8rem; } .meme-picker .meme-gallery { gap:1.25rem .75rem; } .meme-picker .meme-print h4 { font-size:.8rem; } }

/* A compact forum archive within RIBBIT's cream-and-purple print world. */
.meme-picker { background:var(--white); color:#182044; border-top:6px solid var(--purple); padding:clamp(1rem,2.5vw,2rem); grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:2rem; }
.meme-picker .meme-gallery { display:block; }
.archive-group { border-top:1px solid #b6b2bf; }
.archive-group:last-child { border-bottom:1px solid #b6b2bf; }
.archive-group summary { cursor:pointer; padding:1rem .35rem; font-weight:700; font-size:1rem; }
.archive-group summary::marker { color:#680bd1; }
.archive-count { float:right; font-size:.8rem; font-weight:600; color:#51416a; }
.archive-group summary:hover { color:#680bd1; }
.meme-picker .meme-print { border-top:1px solid #ded9df; }
.meme-picker .meme-print figcaption { display:none; }
.meme-picker .meme-choice { display:flex; align-items:center; text-align:left; gap:1rem; padding:.6rem; aspect-ratio:auto; min-height:84px; border:0; color:#182044; background:transparent; font:700 1rem/1.3 "DM Sans",sans-serif; }
.meme-picker .meme-choice img { width:64px; height:64px; object-fit:contain; flex:none; background:#100a16; }
.meme-picker .meme-choice[aria-pressed="true"] { outline:none; border:0; background:#e7f7aa; }
.meme-picker .meme-choice[aria-pressed="true"]::after { content:none; }
.meme-picker .meme-choice:hover { translate:none; background:#eee4fa; }
.meme-picker .meme-choice:focus-visible { outline:3px solid #680bd1; outline-offset:-3px; }
.archive-row-copy { display:grid; gap:.3rem; }
.archive-row-copy small { font-size:.75rem; font-weight:400; color:#51416a; }
.meme-picker .meme-selected-image { border:1px solid #b6b2bf; height:clamp(20rem,32vw,29rem); padding:.5rem; }
.meme-picker .meme-selected-actions p { background:transparent; padding:.9rem 0 .3rem; font:700 1.1rem/1.3 "DM Sans",sans-serif; text-transform:none; }
.meme-picker .meme-fullsize { color:#680bd1; font-size:.9rem; }
.meme-picker .meme-selected-actions .btn { border:1px solid #182044; font-size:.9rem; }
.meme-picker :focus-visible { outline-color:#680bd1; }
@media(max-width:800px) { .meme-picker { grid-template-columns:1fr; gap:1.5rem; } .meme-picker .meme-gallery { display:block; } .meme-picker .meme-selected-image { height:22rem; } }

/* Keep the complete collection browseable beside its preview. */
.meme-picker .meme-gallery { max-height:34rem; overflow-y:auto; overscroll-behavior:contain; scrollbar-color:#680bd1 #ede5f4; padding-right:.5rem; }
@media(max-width:800px) { .meme-picker .meme-gallery { max-height:25rem; } }