:root {
  /* Colors from the frog art: banner orange, logo lime, pond green. */
  --bg: #10210f; --card: #182e16; --field: #10210f; --border: #2f4f2a;
  --text: #f3f7ec; --muted: #a9bf9c; --orange: #ff8a00; --lime: #d6f5a3; --on-accent: #1a1204;
  --ok: #8be04e; --err: #ff6b5a;
}
* { box-sizing: border-box; }
body {
  margin: 0; min-height: 100vh;
  /* The frog banner at the top, faded into the pond-green page so text stays readable. */
  background: linear-gradient(rgba(16, 33, 15, .15), rgba(16, 33, 15, .75) 300px, var(--bg) 480px),
    url(img/banner.jpg) top center / max(100%, 1500px) auto repeat-x, var(--bg);
  color: var(--text); font: 15px/1.45 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}
.pixel { font-family: "Press Start 2P", ui-monospace, monospace; letter-spacing: .5px; }
img { image-rendering: pixelated; }
header { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 20px; }
.brand { color: inherit; text-decoration: none; display: flex; gap: 10px; align-items: center; font-weight: 800; font-size: 17px; background: rgba(16, 33, 15, .85); padding: 6px 12px 6px 6px; border-radius: 999px; }
.logo { width: 30px; height: 30px; border-radius: 50%; }
.hero-logo { width: 104px; height: 104px; flex: none; border-radius: 20px; border: 4px solid var(--orange); box-shadow: 6px 6px 0 #000; background: var(--lime); }
.tagline { display: inline-block; margin: 0; padding: 6px 14px; border-radius: 999px; background: rgba(16, 33, 15, .85); font-weight: 700; }
.card.small { padding: 16px 20px; }
.claim-card { border-color: var(--orange); }
.card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
h1, h2 { margin: 0; font-size: 18px; }
h2 { margin-bottom: 8px; font-size: 15px; color: var(--lime); }
.card-head h2 { margin: 0; }
h2.pixel { font-size: 16px; color: var(--text); }
.badge { padding: 4px 10px; border-radius: 6px; background: var(--lime); color: #142a0c; font-size: 12px; font-weight: 800; letter-spacing: .4px; box-shadow: 2px 2px 0 #000; }
.row { display: flex; justify-content: space-between; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; }
.sym { background: var(--field); border: 1px solid var(--border); border-radius: 999px; padding: 6px 12px; color: var(--text); font-weight: 700; font-size: 15px; }
.details { margin: 14px 2px; display: grid; gap: 6px; font-size: 13px; }
.details div { display: flex; justify-content: space-between; gap: 12px; }
.details div[hidden] { display: none; }
.details dt { color: var(--muted); }
.details dd { margin: 0; text-align: right; overflow-wrap: anywhere; }
code { font-size: 12px; }
.btn { border: 0; border-radius: 12px; padding: 14px; font-size: 16px; font-weight: 700; cursor: pointer; }
.btn.primary { width: 100%; background: var(--orange); color: var(--on-accent); box-shadow: 4px 4px 0 #000; }
.btn.primary:hover:not(:disabled) { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 #000; }
.btn.primary:active:not(:disabled) { transform: translate(2px, 2px); box-shadow: 2px 2px 0 #000; }
.btn.primary:disabled { background: #2a3b25; color: var(--muted); box-shadow: none; cursor: not-allowed; }
.btn.ghost { background: rgba(16, 33, 15, .85); color: var(--lime); border: 1px solid var(--border); padding: 8px 14px; font-size: 14px; }
.btn.ghost:hover { border-color: var(--lime); }
.wallet { position: relative; }
.menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 10; min-width: 170px; background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 6px; display: grid; gap: 2px; }
.menu[hidden] { display: none; }
.menu button { background: none; border: 0; color: var(--text); text-align: left; padding: 9px 10px; border-radius: 8px; font-size: 14px; cursor: pointer; }
.menu button:hover { background: var(--field); }
#disconnectBtn { color: var(--err); }
#connectBtn { display: flex; align-items: center; gap: 8px; }
#connectBtn img { width: 18px; height: 18px; border-radius: 4px; }
.modal, .celebrate { position: fixed; inset: 0; z-index: 20; background: rgba(0, 0, 0, .65); display: flex; align-items: center; justify-content: center; padding: 16px; }
.modal[hidden], .celebrate[hidden] { display: none; }
.modal-card, .celebrate-card { width: 100%; max-width: 380px; background: var(--card); border: 2px solid var(--border); border-radius: 16px; padding: 20px; }
.x { background: none; border: 0; color: var(--muted); font-size: 18px; cursor: pointer; }
.wallet-list { display: grid; gap: 8px; }
.wallet-opt { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; background: var(--field); border: 1px solid var(--border); border-radius: 12px; color: var(--text); font-size: 15px; font-weight: 600; cursor: pointer; text-align: left; }
.wallet-opt:hover { border-color: var(--orange); }
.wallet-opt img { width: 32px; height: 32px; border-radius: 8px; image-rendering: auto; }
.wallet-opt small { margin-left: auto; color: var(--ok); font-weight: 400; }
.hint { color: var(--muted); font-size: 13px; margin: 12px 0 0; }
.hint a, .faq a { color: var(--lime); }
.status { min-height: 1.2em; margin: 10px 0 0; font-size: 13px; text-align: center; color: var(--muted); overflow-wrap: anywhere; }
.status.ok { color: var(--ok); } .status.err { color: var(--err); }
.warn { color: #f5c542; } .bad { color: var(--err); } .good { color: var(--ok); }
.claim-amount { display: flex; justify-content: center; align-items: center; gap: 10px; margin: 8px 0 4px; }
.claim-amount b { font-family: "Press Start 2P", ui-monospace, monospace; font-size: 30px; color: var(--orange); text-shadow: 3px 3px 0 #000; }
.hint.center { text-align: center; margin: 6px 0 16px; }
.hint.top { margin: 0 0 12px; }
.progress { height: 14px; background: var(--field); border: 2px solid #000; border-radius: 4px; overflow: hidden; margin-bottom: 6px; }
.progress div { height: 100%; width: 0; background: repeating-linear-gradient(90deg, var(--lime) 0 10px, #b6e57a 10px 20px); transition: width .4s; }
.input { display: grid; gap: 4px; color: var(--muted); font-size: 13px; margin-bottom: 10px; }
.input input { background: var(--field); color: var(--text); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; font-size: 14px; }
.input input:focus { outline: none; border-color: var(--orange); }
.addr { font-family: ui-monospace, Consolas, monospace; font-size: 12px; color: var(--lime); text-decoration: none; word-break: break-all; }
a.addr[href]:hover { text-decoration: underline; }
.links a { color: var(--lime); text-decoration: none; }
.links a:hover { text-decoration: underline; }
#verifiedNote { margin-bottom: 12px; }
.copy-row { display: flex; align-items: center; gap: 8px; background: var(--field); border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; margin-bottom: 12px; }
.copy-row code { flex: 1; min-width: 0; word-break: break-all; font-size: 13px; }
.notes { color: var(--muted); font-size: 13px; margin: 0 0 14px; padding-left: 18px; }
.notes li { margin: 4px 0; }
#checkBtn { width: 100%; }
.pass-actions { display: flex; gap: 8px; margin-top: 12px; }
.pass-actions[hidden] { display: none; }
.pass-actions .btn { flex: 1; }
.celebrate-card { text-align: center; display: grid; gap: 10px; }
.celebrate-card img { width: 110px; height: 110px; margin: 0 auto; border-radius: 20px; border: 3px solid var(--orange); }
.celebrate-card h2 { font-size: 20px; color: var(--orange); margin: 6px 0 0; }
.celebrate-card p { color: var(--muted); margin: 0 0 6px; }
.bounce { animation: bounce .8s ease-in-out infinite alternate; }
@keyframes bounce { from { transform: translateY(0); } to { transform: translateY(-14px); } }
@media (prefers-reduced-motion: reduce) { .bounce { animation: none; } }
/* Layout: wide page with columns (story | claim, then rows of boxes), stacks on phones. */
main { width: 100%; max-width: 1120px; margin: 0 auto; padding: 24px 20px 64px; display: grid; gap: 28px; }
.card { background: var(--card); border: 2px solid var(--border); border-radius: 16px; padding: 20px; box-shadow: 5px 5px 0 rgba(0, 0, 0, .45); min-width: 0; }
.hero-row { display: grid; grid-template-columns: 1.15fr 1fr; gap: 28px; align-items: start; padding-top: 70px; }
.intro { background: rgba(16, 33, 15, .88); border: 2px solid var(--border); border-radius: 16px; padding: 24px; }
.intro-head { display: flex; gap: 18px; align-items: center; margin-bottom: 16px; }
.intro h1 { margin: 0 0 10px; font-size: 38px; color: var(--orange); text-shadow: 4px 4px 0 #000; }
.tagline { margin: 0; font-weight: 700; font-size: 16px; }
.legend { margin: 0 0 18px; color: var(--muted); font-size: 15px; }
.legend b { color: var(--text); }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 14px; }
.stat { background: var(--field); border: 2px solid #000; border-radius: 10px; padding: 12px 8px; text-align: center; display: grid; gap: 6px; }
.stat b { font-size: 13px; color: var(--lime); }
.stat span { font-size: 12px; color: var(--muted); }
.intro .hint { margin: 0; }
.wallets-note { margin: 14px 0 0 !important; font-size: 12px; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.step { position: relative; background: var(--lime); color: #142a0c; border: 2px solid #000; border-radius: 14px; padding: 18px 18px 16px 70px; box-shadow: 5px 5px 0 #000; }
.step .num { position: absolute; left: 16px; top: 16px; width: 40px; height: 40px; display: grid; place-items: center; background: var(--orange); color: #000; border: 2px solid #000; border-radius: 8px; font-size: 14px; }
.step h3 { margin: 0 0 4px; font-size: 16px; }
.step p { margin: 0; font-size: 13px; }
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: start; }
.details.stacked div { display: grid; gap: 2px; }
.details.stacked dd { text-align: left; }
.faq h2 { font-size: 16px; color: var(--text); margin-bottom: 14px; }
.faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
.faq details { background: var(--card); border: 2px solid var(--border); border-radius: 12px; padding: 12px 16px; }
.faq details[open] { border-color: var(--orange); }
.faq summary { cursor: pointer; font-weight: 700; }
.links { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 18px; font-size: 14px; }
.foot-logo { width: 28px; height: 28px; border-radius: 6px; }
@media (max-width: 900px) {
  .hero-row { grid-template-columns: 1fr; padding-top: 30px; }
  .claim-card { order: -1; } /* phones: claim first, story below */
  .grid { grid-template-columns: 1fr 1fr; }
  .steps { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  main { padding: 16px 16px 48px; gap: 20px; }
  header { padding: 12px 16px; }
  .brand span { display: none; }
  .intro { padding: 18px; }
  .intro-head { gap: 14px; }
  .hero-logo { width: 72px; height: 72px; }
  .intro h1 { font-size: 26px; }
  .stats { grid-template-columns: 1fr 1fr; }
  .grid, .faq-grid { grid-template-columns: 1fr; }
  .claim-amount b { font-size: 24px; }
}
/* Big pixel countdown in the claim box. */
.countdown { background: #000; border: 2px solid var(--orange); border-radius: 12px; padding: 12px; margin-bottom: 14px; text-align: center; }
.cd-title { margin: 0 0 8px; color: var(--lime); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; }
.cd-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.cd-seg { background: var(--field); border: 2px solid var(--border); border-radius: 8px; padding: 10px 4px 8px; display: grid; gap: 6px; }
.cd-seg b { font-size: 24px; color: var(--orange); text-shadow: 3px 3px 0 #000; }
.cd-seg span { font-size: 11px; color: var(--muted); text-transform: uppercase; }
.countdown.urgent { border-color: var(--err); animation: pulse 1s ease-in-out infinite alternate; }
.countdown.urgent .cd-seg b { color: var(--err); }
.countdown.urgent .cd-title::after { content: " · last day!"; color: var(--err); }
.countdown.ended .cd-seg b { color: var(--muted); }
@keyframes pulse { from { box-shadow: 0 0 0 rgba(255, 107, 90, 0); } to { box-shadow: 0 0 18px rgba(255, 107, 90, .6); } }
@media (prefers-reduced-motion: reduce) { .countdown.urgent { animation: none; } }
@media (max-width: 600px) { .cd-seg b { font-size: 18px; } }
/* Eras: tag + fee above the progress bar, warning line, and one box per era. */
.era-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.era-tag { background: var(--orange); color: #000; border: 2px solid #000; border-radius: 6px; padding: 5px 8px; font-size: 11px; }
.details dd.up { color: var(--orange); font-weight: 700; }
.era-fee { font-size: 13px; font-weight: 700; color: var(--lime); }
.next-era { margin: 8px 0 0; padding: 8px 10px; border-radius: 8px; background: rgba(255, 138, 0, .12); border: 1px dashed var(--orange); color: var(--text); font-size: 12px; text-align: center; }
.next-era:empty { display: none; }
.eras h2 { font-size: 16px; color: var(--text); margin-bottom: 8px; }
.era-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.era-box { position: relative; background: var(--card); border: 2px solid var(--border); border-radius: 14px; padding: 16px 14px 12px; display: grid; gap: 8px; text-align: center; box-shadow: 5px 5px 0 rgba(0, 0, 0, .45); }
.era-box b { font-size: 15px; }
.era-price { font-size: 18px; font-weight: 800; color: var(--lime); }
.era-count { font-size: 12px; color: var(--muted); }
.era-box .progress { margin: 0; }
.era-state { justify-self: center; font-size: 10px; font-weight: 800; letter-spacing: 1px; padding: 3px 8px; border-radius: 999px; background: var(--field); color: var(--muted); }
.era-box.now { border-color: var(--orange); box-shadow: 5px 5px 0 #000, 0 0 22px rgba(255, 138, 0, .35); }
.era-box.now .era-state { background: var(--orange); color: #000; }
.era-box.done { opacity: .6; }
.era-box.done .era-state { background: var(--ok); color: #000; }
@media (max-width: 900px) { .era-grid { grid-template-columns: 1fr 1fr; } }
.brand:hover { outline: 2px solid var(--orange); }
@media (min-width: 901px) { .era-grid { grid-template-columns: repeat(5, 1fr); } }
/* OG community: stats of the Ordinals collection, top days and timeline. */
.og { background: linear-gradient(135deg, rgba(255, 138, 0, .16), rgba(214, 245, 163, .06)); border: 2px solid var(--orange); border-radius: 18px; padding: 22px; box-shadow: 6px 6px 0 #000; }
.og-head { display: flex; gap: 16px; align-items: center; margin-bottom: 16px; }
.og-badge { flex: none; width: 64px; height: 64px; display: grid; place-items: center; background: var(--orange); color: #000; border: 3px solid #000; border-radius: 12px; font-size: 18px; box-shadow: 4px 4px 0 #000; transform: rotate(-4deg); }
.og h2.pixel { font-size: 17px; color: var(--text); margin: 0 0 8px; line-height: 1.4; }
.og-head .hint { margin: 0; }
.og-stats { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 12px; margin-bottom: 16px; }
.og-stat { background: #000; border: 2px solid var(--border); border-radius: 12px; padding: 14px 12px; display: grid; gap: 6px; align-content: center; text-align: center; }
.og-stat span { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }
.og-stat b { font-size: 13px; color: var(--lime); white-space: nowrap; }
.og-stat small { font-size: 12px; color: var(--muted); }
.og-stat.big { border-color: var(--orange); }
.og-stat.big b { font-size: 22px; color: var(--orange); text-shadow: 3px 3px 0 #000; }
.og-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.bars { display: grid; gap: 10px; }
.bar { display: grid; grid-template-columns: 96px 1fr 64px; gap: 10px; align-items: center; font-size: 13px; }
.bar-label { color: var(--muted); }
.bar b { text-align: right; color: var(--lime); }
.bar-track { height: 14px; background: var(--field); border: 2px solid #000; border-radius: 4px; overflow: hidden; }
.bar-track div { height: 100%; background: repeating-linear-gradient(90deg, var(--orange) 0 8px, #ffa733 8px 16px); }
.timeline { list-style: none; margin: 0; padding: 0 0 0 18px; border-left: 3px dashed var(--border); display: grid; gap: 12px; }
.timeline li { position: relative; font-size: 13px; color: var(--muted); }
.timeline li::before { content: ""; position: absolute; left: -26px; top: 3px; width: 11px; height: 11px; background: var(--lime); border: 2px solid #000; }
.timeline li b { display: block; color: var(--text); margin-bottom: 2px; }
.timeline li.now::before { background: var(--orange); }
.timeline li.now b { color: var(--orange); }
.og-src { margin: 14px 0 0; font-size: 12px; }
@media (max-width: 900px) {
  .og-stats { grid-template-columns: 1fr 1fr; }
  .og-stat.big { grid-column: 1 / -1; }
  .og-row { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .og { padding: 16px; }
  .og-badge { width: 48px; height: 48px; font-size: 14px; }
  .og h2.pixel { font-size: 14px; }
}
/* First screen: sticky header with quick links, compact countdown, mini era bar, claim tabs. */
header { position: sticky; top: 0; z-index: 15; background: rgba(16, 33, 15, .9); backdrop-filter: blur(6px); border-bottom: 2px solid #000; }
.quick { display: flex; gap: 4px; }
.quick a { color: var(--text); text-decoration: none; font-weight: 700; font-size: 14px; padding: 7px 12px; border-radius: 8px; }
.quick a:hover { background: var(--card); color: var(--orange); }
html { scroll-behavior: smooth; scroll-padding-top: 76px; }
.hero-row { padding-top: 24px; }
.countdown { padding: 8px 10px; margin-bottom: 10px; }
.cd-title { margin-bottom: 6px; }
.cd-seg { padding: 6px 4px 5px; gap: 3px; }
.cd-seg b { font-size: 20px; }
.era-strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin-bottom: 10px; text-decoration: none; }
.era-strip .seg { position: relative; overflow: hidden; display: grid; gap: 1px; text-align: center; padding: 5px 2px; border: 2px solid #000; border-radius: 6px; background: var(--field); color: var(--muted); }
.era-strip .seg i { position: absolute; inset: 0 auto 0 0; background: rgba(214, 245, 163, .18); }
.era-strip .seg b, .era-strip .seg small { position: relative; }
.era-strip .seg b { font-size: 12px; }
.era-strip .seg small { font-size: 10px; }
.era-strip .seg.now { background: var(--orange); color: #000; }
.era-strip .seg.now i { background: rgba(0, 0, 0, .18); }
.era-strip .seg.done { opacity: .55; text-decoration: line-through; }
.tabs2 { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; background: #000; border-radius: 10px; margin-bottom: 12px; }
.tabs2 button { border: 0; border-radius: 7px; padding: 8px 6px; background: transparent; color: var(--muted); font-weight: 700; font-size: 13px; cursor: pointer; }
.tabs2 button.active { background: var(--lime); color: #142a0c; }
#paneWallet[hidden], #paneSend[hidden] { display: none; }
.claim-amount { margin: 2px 0; }
.grid { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px) { .quick { display: none; } }
/* ---- Frog extras ---- */
/* Sound toggle in the header. */
.sound { background: transparent; border: 1px solid var(--border); border-radius: 10px; padding: 6px 9px; font-size: 16px; cursor: pointer; margin-left: auto; margin-right: 8px; }
.sound:hover { border-color: var(--lime); }
/* Hopping frog on the era bar (lily pads behind it). */
.progress.pond { position: relative; overflow: visible; margin-top: 26px; background: repeating-radial-gradient(circle at 8px 50%, #2f6b2a 0 4px, transparent 5px 16px), var(--field); background-size: 16px 100%; }
.progress.pond #claimBar { border-radius: 2px; }
.hop-frog { position: absolute; bottom: 8px; width: 30px; height: 30px; margin-left: -15px; border-radius: 6px; border: 2px solid #000; transition: left .6s; animation: idle 1.6s ease-in-out infinite; }
.hop-frog.jump { animation: hop .6s ease-out; }
@keyframes idle { 0%, 80%, 100% { transform: translateY(0); } 90% { transform: translateY(-5px); } }
@keyframes hop { 0% { transform: translateY(0) scale(1, 1); } 30% { transform: translateY(-26px) scale(.9, 1.1); } 70% { transform: translateY(-8px); } 100% { transform: translateY(0) scale(1.1, .9); } }
/* Rank. */
.details dd.rank { color: var(--orange); font-weight: 800; }
.rank-hint { margin: 0 0 12px; padding: 7px 10px; border-radius: 8px; background: rgba(214, 245, 163, .1); border: 1px dashed var(--lime); font-size: 12px; text-align: center; }
.rank-hint[hidden] { display: none; }
.ranks { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 14px; }
.ranks-title { width: 100%; font-size: 13px; color: var(--muted); }
.rank-chip { background: var(--card); border: 2px solid var(--border); border-radius: 999px; padding: 6px 12px; font-size: 13px; font-weight: 700; }
.rank-chip small { color: var(--muted); font-weight: 400; margin-left: 4px; }
.rank-chip.king { border-color: var(--orange); color: var(--orange); }
/* Frog parade: the banner frogs slide across. */
.parade { height: 96px; border-block: 3px solid #000; background: url(img/banner.jpg) 0 -12px / auto 384px repeat-x var(--orange); animation: parade 40s linear infinite; image-rendering: pixelated; border-radius: 10px; }
.parade.reverse { background-position-y: -205px; animation-direction: reverse; }
@keyframes parade { from { background-position-x: 0; } to { background-position-x: -1152px; } }
/* Frog rain after a claim. */
.frog-drop { position: fixed; top: -60px; z-index: 60; width: 44px; height: 44px; pointer-events: none; background: url(img/banner.jpg) 0 0 / 528px 176px no-repeat; image-rendering: pixelated; animation: rain 3s ease-in forwards; }
@keyframes rain { to { transform: translateY(calc(100vh + 120px)) rotate(540deg); } }
/* Secret frog jump + toast. */
.hero-logo { cursor: pointer; }
.hero-logo.mega { animation: mega 1.2s ease-in-out; }
@keyframes mega { 0% { transform: none; } 30% { transform: translateY(-80px) rotate(-20deg) scale(1.3); } 60% { transform: translateY(-40px) rotate(360deg) scale(1.2); } 100% { transform: none; } }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 70; max-width: calc(100% - 32px); background: var(--lime); color: #142a0c; border: 3px solid #000; border-radius: 12px; padding: 12px 16px; font-weight: 800; box-shadow: 5px 5px 0 #000; }
.toast[hidden] { display: none; }
/* Share card. */
.modal-card.wide { max-width: 640px; }
.frog-card { display: block; width: 100%; height: auto; border-radius: 10px; border: 2px solid #000; }
.celebrate-card .btn.ghost { width: 100%; }
@media (prefers-reduced-motion: reduce) { .parade, .hop-frog, .hop-frog.jump, .hero-logo.mega { animation: none; } }
@media (max-width: 600px) { .parade { height: 72px; background-size: auto 288px; background-position-y: -9px; } .parade.reverse { background-position-y: -154px; } }
/* Claims countdown (no end date). */
.cd-claims { display: flex; justify-content: center; align-items: baseline; gap: 10px; padding: 4px 0 2px; }
.cd-claims[hidden], .cd-row[hidden] { display: none; }
.cd-claims b { font-size: 30px; color: var(--orange); text-shadow: 3px 3px 0 #000; }
.cd-claims span { font-size: 12px; color: var(--muted); text-transform: uppercase; font-weight: 800; letter-spacing: 1px; }
.countdown.urgent .cd-claims b { color: var(--err); }
.countdown.by-claims.urgent .cd-title::after { content: " · almost full!"; }
@media (max-width: 600px) { .cd-claims b { font-size: 24px; } }

/* ---- Phone fixes: one column for the tool boxes, never wider than the screen. ---- */
html, body { overflow-x: hidden; }
main > * { min-width: 0; }
.input input { min-width: 0; width: 100%; }
@media (max-width: 600px) { .grid { grid-template-columns: 1fr; } }

/* ---- Animated OG section ---- */
.og { position: relative; overflow: hidden; padding-top: 104px; }
/* Ticker band across the top. */
.og-ticker { position: absolute; left: 0; right: 0; top: 0; height: 30px; overflow: hidden; background: var(--orange); border-bottom: 3px solid #000; }
.og-ticker-track { display: flex; width: max-content; animation: ticker 28s linear infinite; }
.og-ticker-track span { white-space: nowrap; font-size: 11px; line-height: 30px; color: #000; }
@keyframes ticker { to { transform: translateX(-50%); } }
/* Hopping frog with a RIBBIT bubble, riding just below the ticker. */
.og-frog { position: absolute; top: 44px; left: 0; z-index: 2; width: 48px; height: 48px; animation: frog-walk 16s linear infinite; }
.og-frog img { width: 48px; height: 48px; border-radius: 9px; border: 2px solid #000; animation: frog-hop .7s ease-in-out infinite; display: block; }
.og-frog .ribbit { position: absolute; bottom: 30px; left: 54px; transform: scale(0); transform-origin: bottom left; background: #fff; color: #000;
  border: 3px solid #000; border-radius: 8px; padding: 6px 9px; font-size: 13px; white-space: nowrap; box-shadow: 3px 3px 0 #000; animation: ribbit 3.5s ease-in-out infinite; }
.og-frog .ribbit::after { content: ""; position: absolute; left: -12px; bottom: 4px; border: 6px solid transparent; border-right-color: #000; }
@keyframes frog-walk { 0%, 100% { left: 0; } 50% { left: calc(100% - 150px); } }
@keyframes frog-hop { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes ribbit { 0%, 45% { transform: scale(0); } 52% { transform: scale(1.2) rotate(-4deg); } 56%, 88% { transform: scale(1) rotate(0); } 94%, 100% { transform: scale(0); } }
/* Glowing, moving border on the big volume tile. */
.og-stat.big { position: relative; isolation: isolate; border-color: transparent; }
.og-stat.big::before { content: ""; position: absolute; inset: -3px; z-index: -2; border-radius: 14px;
  background: conic-gradient(from var(--spin, 0deg), var(--orange), var(--lime), #fff6c9, var(--orange)); animation: spin 3s linear infinite; }
.og-stat.big::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 11px; background: #000; }
@property --spin { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes spin { to { --spin: 360deg; } }
.og-stat.big b { animation: pulse-text 2s ease-in-out infinite; }
@keyframes pulse-text { 50% { text-shadow: 3px 3px 0 #000, 0 0 18px rgba(255, 138, 0, .8); } }
/* Bars start empty and grow once the section is on screen (only when JS animation is on). */
.og-anim .bar-track div { transform: scaleX(0); transform-origin: left; transition: transform 1.2s cubic-bezier(.2, .8, .2, 1); }
.og-anim.og-in .bar-track div { transform: scaleX(1); }
.og-anim.og-in .bar:nth-child(2) .bar-track div { transition-delay: .1s; }
.og-anim.og-in .bar:nth-child(3) .bar-track div { transition-delay: .2s; }
.og-anim.og-in .bar:nth-child(4) .bar-track div { transition-delay: .3s; }
.og-anim.og-in .bar:nth-child(5) .bar-track div { transition-delay: .4s; }
/* OG badge wiggles. */
.og-badge { animation: wiggle 2.4s ease-in-out infinite; }
@keyframes wiggle { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg) scale(1.06); } }
@media (prefers-reduced-motion: reduce) {
  .og-ticker-track, .og-frog, .og-frog img, .og-frog .ribbit, .og-stat.big::before, .og-stat.big b, .og-badge { animation: none; }
  .og-frog .ribbit { transform: none; }
}
/* Phone: OG numbers must fit two per row. */
.og-stats > * { min-width: 0; }
@media (max-width: 600px) {
  .og-stat { padding: 12px 6px; }
  .og-stat b { font-size: 11px; }
  .og-stat.big b { font-size: 20px; }
  .og-stat span { font-size: 10px; }
}

/* ---- Official site marks ---- */
.official { display: inline-block; margin-bottom: 8px; padding: 3px 9px; border-radius: 999px; background: rgba(214, 245, 163, .12);
  border: 1px solid var(--lime); color: var(--lime); font-size: 12px; font-weight: 800; }
.site-foot { display: grid; gap: 18px; padding: 24px; border-top: 3px solid #000; background: rgba(0, 0, 0, .25); border-radius: 16px; }
.foot-brand { display: flex; gap: 12px; align-items: center; }
.foot-brand .foot-logo { width: 44px; height: 44px; border-radius: 10px; border: 2px solid var(--orange); }
.foot-brand b { display: block; font-size: 16px; }
.foot-brand span { color: var(--muted); font-size: 13px; }
.foot-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.foot-cols h3 { margin: 0 0 8px; font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: var(--orange); }
.foot-cols a { display: block; margin: 4px 0; color: var(--lime); text-decoration: none; font-size: 14px; }
.foot-cols a:hover { text-decoration: underline; }
.foot-note { margin: 0; font-size: 12px; color: var(--muted); }
@media (max-width: 600px) { .foot-cols { grid-template-columns: 1fr 1fr; } }

/* ---- Forest scene in the OG box (replaces the small hopping frog) ---- */
.og { padding-top: 182px; }
.forest { position: absolute; left: 0; right: 0; top: 30px; height: 136px; overflow: hidden; border-bottom: 3px solid #000;
  background: linear-gradient(#0d2a2a, #143b26 60%, #1d4a22); image-rendering: pixelated; }
.forest-back, .forest-front { position: absolute; left: 0; right: 0; bottom: 20px; height: 110px; background-repeat: repeat-x; }
.forest-back { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22240%22%20height%3D%22110%22%20shape-rendering%3D%22crispEdges%22%3E%3Crect%20x%3D%2226%22%20y%3D%2298%22%20width%3D%228%22%20height%3D%2212%22%20fill%3D%22%232a1b0e%22%2F%3E%3Crect%20x%3D%2226%22%20y%3D%2242%22%20width%3D%228%22%20height%3D%224%22%20fill%3D%22%23183a1c%22%2F%3E%3Crect%20x%3D%2218%22%20y%3D%2246%22%20width%3D%2224%22%20height%3D%224%22%20fill%3D%22%23183a1c%22%2F%3E%3Crect%20x%3D%2214%22%20y%3D%2250%22%20width%3D%2232%22%20height%3D%224%22%20fill%3D%22%23183a1c%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%2254%22%20width%3D%2248%22%20height%3D%224%22%20fill%3D%22%23183a1c%22%2F%3E%3Crect%20x%3D%2218%22%20y%3D%2258%22%20width%3D%2224%22%20height%3D%224%22%20fill%3D%22%23183a1c%22%2F%3E%3Crect%20x%3D%2210%22%20y%3D%2262%22%20width%3D%2240%22%20height%3D%224%22%20fill%3D%22%23183a1c%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%2266%22%20width%3D%2248%22%20height%3D%224%22%20fill%3D%22%23183a1c%22%2F%3E%3Crect%20x%3D%22-2%22%20y%3D%2270%22%20width%3D%2264%22%20height%3D%224%22%20fill%3D%22%23183a1c%22%2F%3E%3Crect%20x%3D%2210%22%20y%3D%2274%22%20width%3D%2240%22%20height%3D%224%22%20fill%3D%22%23183a1c%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%2278%22%20width%3D%2256%22%20height%3D%224%22%20fill%3D%22%23183a1c%22%2F%3E%3Crect%20x%3D%22-6%22%20y%3D%2282%22%20width%3D%2272%22%20height%3D%224%22%20fill%3D%22%23183a1c%22%2F%3E%3Crect%20x%3D%22-10%22%20y%3D%2286%22%20width%3D%2280%22%20height%3D%224%22%20fill%3D%22%23183a1c%22%2F%3E%3Crect%20x%3D%22-2%22%20y%3D%2290%22%20width%3D%2264%22%20height%3D%224%22%20fill%3D%22%23183a1c%22%2F%3E%3Crect%20x%3D%22-6%22%20y%3D%2294%22%20width%3D%2272%22%20height%3D%224%22%20fill%3D%22%23183a1c%22%2F%3E%3Crect%20x%3D%2291%22%20y%3D%2298%22%20width%3D%228%22%20height%3D%2212%22%20fill%3D%22%232a1b0e%22%2F%3E%3Crect%20x%3D%2291%22%20y%3D%2218%22%20width%3D%228%22%20height%3D%224%22%20fill%3D%22%231b4220%22%2F%3E%3Crect%20x%3D%2283%22%20y%3D%2222%22%20width%3D%2224%22%20height%3D%224%22%20fill%3D%22%231b4220%22%2F%3E%3Crect%20x%3D%2279%22%20y%3D%2226%22%20width%3D%2232%22%20height%3D%224%22%20fill%3D%22%231b4220%22%2F%3E%3Crect%20x%3D%2271%22%20y%3D%2230%22%20width%3D%2248%22%20height%3D%224%22%20fill%3D%22%231b4220%22%2F%3E%3Crect%20x%3D%2283%22%20y%3D%2234%22%20width%3D%2224%22%20height%3D%224%22%20fill%3D%22%231b4220%22%2F%3E%3Crect%20x%3D%2275%22%20y%3D%2238%22%20width%3D%2240%22%20height%3D%224%22%20fill%3D%22%231b4220%22%2F%3E%3Crect%20x%3D%2271%22%20y%3D%2242%22%20width%3D%2248%22%20height%3D%224%22%20fill%3D%22%231b4220%22%2F%3E%3Crect%20x%3D%2263%22%20y%3D%2246%22%20width%3D%2264%22%20height%3D%224%22%20fill%3D%22%231b4220%22%2F%3E%3Crect%20x%3D%2275%22%20y%3D%2250%22%20width%3D%2240%22%20height%3D%224%22%20fill%3D%22%231b4220%22%2F%3E%3Crect%20x%3D%2267%22%20y%3D%2254%22%20width%3D%2256%22%20height%3D%224%22%20fill%3D%22%231b4220%22%2F%3E%3Crect%20x%3D%2259%22%20y%3D%2258%22%20width%3D%2272%22%20height%3D%224%22%20fill%3D%22%231b4220%22%2F%3E%3Crect%20x%3D%2255%22%20y%3D%2262%22%20width%3D%2280%22%20height%3D%224%22%20fill%3D%22%231b4220%22%2F%3E%3Crect%20x%3D%2263%22%20y%3D%2266%22%20width%3D%2264%22%20height%3D%224%22%20fill%3D%22%231b4220%22%2F%3E%3Crect%20x%3D%2259%22%20y%3D%2270%22%20width%3D%2272%22%20height%3D%224%22%20fill%3D%22%231b4220%22%2F%3E%3Crect%20x%3D%2251%22%20y%3D%2274%22%20width%3D%2288%22%20height%3D%224%22%20fill%3D%22%231b4220%22%2F%3E%3Crect%20x%3D%2247%22%20y%3D%2278%22%20width%3D%2296%22%20height%3D%224%22%20fill%3D%22%231b4220%22%2F%3E%3Crect%20x%3D%2255%22%20y%3D%2282%22%20width%3D%2280%22%20height%3D%224%22%20fill%3D%22%231b4220%22%2F%3E%3Crect%20x%3D%2251%22%20y%3D%2286%22%20width%3D%2288%22%20height%3D%224%22%20fill%3D%22%231b4220%22%2F%3E%3Crect%20x%3D%2243%22%20y%3D%2290%22%20width%3D%22104%22%20height%3D%224%22%20fill%3D%22%231b4220%22%2F%3E%3Crect%20x%3D%2239%22%20y%3D%2294%22%20width%3D%22112%22%20height%3D%224%22%20fill%3D%22%231b4220%22%2F%3E%3Crect%20x%3D%22146%22%20y%3D%2298%22%20width%3D%228%22%20height%3D%2212%22%20fill%3D%22%232a1b0e%22%2F%3E%3Crect%20x%3D%22146%22%20y%3D%2250%22%20width%3D%228%22%20height%3D%224%22%20fill%3D%22%23183a1c%22%2F%3E%3Crect%20x%3D%22138%22%20y%3D%2254%22%20width%3D%2224%22%20height%3D%224%22%20fill%3D%22%23183a1c%22%2F%3E%3Crect%20x%3D%22134%22%20y%3D%2258%22%20width%3D%2232%22%20height%3D%224%22%20fill%3D%22%23183a1c%22%2F%3E%3Crect%20x%3D%22126%22%20y%3D%2262%22%20width%3D%2248%22%20height%3D%224%22%20fill%3D%22%23183a1c%22%2F%3E%3Crect%20x%3D%22138%22%20y%3D%2266%22%20width%3D%2224%22%20height%3D%224%22%20fill%3D%22%23183a1c%22%2F%3E%3Crect%20x%3D%22130%22%20y%3D%2270%22%20width%3D%2240%22%20height%3D%224%22%20fill%3D%22%23183a1c%22%2F%3E%3Crect%20x%3D%22126%22%20y%3D%2274%22%20width%3D%2248%22%20height%3D%224%22%20fill%3D%22%23183a1c%22%2F%3E%3Crect%20x%3D%22118%22%20y%3D%2278%22%20width%3D%2264%22%20height%3D%224%22%20fill%3D%22%23183a1c%22%2F%3E%3Crect%20x%3D%22130%22%20y%3D%2282%22%20width%3D%2240%22%20height%3D%224%22%20fill%3D%22%23183a1c%22%2F%3E%3Crect%20x%3D%22122%22%20y%3D%2286%22%20width%3D%2256%22%20height%3D%224%22%20fill%3D%22%23183a1c%22%2F%3E%3Crect%20x%3D%22114%22%20y%3D%2290%22%20width%3D%2272%22%20height%3D%224%22%20fill%3D%22%23183a1c%22%2F%3E%3Crect%20x%3D%22110%22%20y%3D%2294%22%20width%3D%2280%22%20height%3D%224%22%20fill%3D%22%23183a1c%22%2F%3E%3Crect%20x%3D%22201%22%20y%3D%2298%22%20width%3D%228%22%20height%3D%2212%22%20fill%3D%22%232a1b0e%22%2F%3E%3Crect%20x%3D%22201%22%20y%3D%2226%22%20width%3D%228%22%20height%3D%224%22%20fill%3D%22%231b4220%22%2F%3E%3Crect%20x%3D%22193%22%20y%3D%2230%22%20width%3D%2224%22%20height%3D%224%22%20fill%3D%22%231b4220%22%2F%3E%3Crect%20x%3D%22189%22%20y%3D%2234%22%20width%3D%2232%22%20height%3D%224%22%20fill%3D%22%231b4220%22%2F%3E%3Crect%20x%3D%22181%22%20y%3D%2238%22%20width%3D%2248%22%20height%3D%224%22%20fill%3D%22%231b4220%22%2F%3E%3Crect%20x%3D%22193%22%20y%3D%2242%22%20width%3D%2224%22%20height%3D%224%22%20fill%3D%22%231b4220%22%2F%3E%3Crect%20x%3D%22185%22%20y%3D%2246%22%20width%3D%2240%22%20height%3D%224%22%20fill%3D%22%231b4220%22%2F%3E%3Crect%20x%3D%22181%22%20y%3D%2250%22%20width%3D%2248%22%20height%3D%224%22%20fill%3D%22%231b4220%22%2F%3E%3Crect%20x%3D%22173%22%20y%3D%2254%22%20width%3D%2264%22%20height%3D%224%22%20fill%3D%22%231b4220%22%2F%3E%3Crect%20x%3D%22185%22%20y%3D%2258%22%20width%3D%2240%22%20height%3D%224%22%20fill%3D%22%231b4220%22%2F%3E%3Crect%20x%3D%22177%22%20y%3D%2262%22%20width%3D%2256%22%20height%3D%224%22%20fill%3D%22%231b4220%22%2F%3E%3Crect%20x%3D%22169%22%20y%3D%2266%22%20width%3D%2272%22%20height%3D%224%22%20fill%3D%22%231b4220%22%2F%3E%3Crect%20x%3D%22165%22%20y%3D%2270%22%20width%3D%2280%22%20height%3D%224%22%20fill%3D%22%231b4220%22%2F%3E%3Crect%20x%3D%22173%22%20y%3D%2274%22%20width%3D%2264%22%20height%3D%224%22%20fill%3D%22%231b4220%22%2F%3E%3Crect%20x%3D%22169%22%20y%3D%2278%22%20width%3D%2272%22%20height%3D%224%22%20fill%3D%22%231b4220%22%2F%3E%3Crect%20x%3D%22161%22%20y%3D%2282%22%20width%3D%2288%22%20height%3D%224%22%20fill%3D%22%231b4220%22%2F%3E%3Crect%20x%3D%22157%22%20y%3D%2286%22%20width%3D%2296%22%20height%3D%224%22%20fill%3D%22%231b4220%22%2F%3E%3Crect%20x%3D%22165%22%20y%3D%2290%22%20width%3D%2280%22%20height%3D%224%22%20fill%3D%22%231b4220%22%2F%3E%3Crect%20x%3D%22161%22%20y%3D%2294%22%20width%3D%2288%22%20height%3D%224%22%20fill%3D%22%231b4220%22%2F%3E%3C%2Fsvg%3E"); opacity: .9; animation: drift 60s linear infinite; }
.forest-front { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22360%22%20height%3D%22110%22%20shape-rendering%3D%22crispEdges%22%3E%3Crect%20x%3D%2246%22%20y%3D%2298%22%20width%3D%228%22%20height%3D%2212%22%20fill%3D%22%234a2d16%22%2F%3E%3Crect%20x%3D%2246%22%20y%3D%2210%22%20width%3D%228%22%20height%3D%224%22%20fill%3D%22%232f6b2a%22%2F%3E%3Crect%20x%3D%2238%22%20y%3D%2214%22%20width%3D%2224%22%20height%3D%224%22%20fill%3D%22%232f6b2a%22%2F%3E%3Crect%20x%3D%2234%22%20y%3D%2218%22%20width%3D%2232%22%20height%3D%224%22%20fill%3D%22%232f6b2a%22%2F%3E%3Crect%20x%3D%2226%22%20y%3D%2222%22%20width%3D%2248%22%20height%3D%224%22%20fill%3D%22%232f6b2a%22%2F%3E%3Crect%20x%3D%2238%22%20y%3D%2226%22%20width%3D%2224%22%20height%3D%224%22%20fill%3D%22%232f6b2a%22%2F%3E%3Crect%20x%3D%2230%22%20y%3D%2230%22%20width%3D%2240%22%20height%3D%224%22%20fill%3D%22%232f6b2a%22%2F%3E%3Crect%20x%3D%2226%22%20y%3D%2234%22%20width%3D%2248%22%20height%3D%224%22%20fill%3D%22%232f6b2a%22%2F%3E%3Crect%20x%3D%2218%22%20y%3D%2238%22%20width%3D%2264%22%20height%3D%224%22%20fill%3D%22%232f6b2a%22%2F%3E%3Crect%20x%3D%2230%22%20y%3D%2242%22%20width%3D%2240%22%20height%3D%224%22%20fill%3D%22%232f6b2a%22%2F%3E%3Crect%20x%3D%2222%22%20y%3D%2246%22%20width%3D%2256%22%20height%3D%224%22%20fill%3D%22%232f6b2a%22%2F%3E%3Crect%20x%3D%2214%22%20y%3D%2250%22%20width%3D%2272%22%20height%3D%224%22%20fill%3D%22%232f6b2a%22%2F%3E%3Crect%20x%3D%2210%22%20y%3D%2254%22%20width%3D%2280%22%20height%3D%224%22%20fill%3D%22%232f6b2a%22%2F%3E%3Crect%20x%3D%2218%22%20y%3D%2258%22%20width%3D%2264%22%20height%3D%224%22%20fill%3D%22%232f6b2a%22%2F%3E%3Crect%20x%3D%2214%22%20y%3D%2262%22%20width%3D%2272%22%20height%3D%224%22%20fill%3D%22%232f6b2a%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%2266%22%20width%3D%2288%22%20height%3D%224%22%20fill%3D%22%232f6b2a%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%2270%22%20width%3D%2296%22%20height%3D%224%22%20fill%3D%22%232f6b2a%22%2F%3E%3Crect%20x%3D%2210%22%20y%3D%2274%22%20width%3D%2280%22%20height%3D%224%22%20fill%3D%22%232f6b2a%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%2278%22%20width%3D%2288%22%20height%3D%224%22%20fill%3D%22%232f6b2a%22%2F%3E%3Crect%20x%3D%22-2%22%20y%3D%2282%22%20width%3D%22104%22%20height%3D%224%22%20fill%3D%22%232f6b2a%22%2F%3E%3Crect%20x%3D%22-6%22%20y%3D%2286%22%20width%3D%22112%22%20height%3D%224%22%20fill%3D%22%232f6b2a%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%2290%22%20width%3D%2296%22%20height%3D%224%22%20fill%3D%22%232f6b2a%22%2F%3E%3Crect%20x%3D%22-6%22%20y%3D%2294%22%20width%3D%22112%22%20height%3D%224%22%20fill%3D%22%232f6b2a%22%2F%3E%3Crect%20x%3D%22186%22%20y%3D%2298%22%20width%3D%228%22%20height%3D%2212%22%20fill%3D%22%234a2d16%22%2F%3E%3Crect%20x%3D%22186%22%20y%3D%2234%22%20width%3D%228%22%20height%3D%224%22%20fill%3D%22%23357a2f%22%2F%3E%3Crect%20x%3D%22178%22%20y%3D%2238%22%20width%3D%2224%22%20height%3D%224%22%20fill%3D%22%23357a2f%22%2F%3E%3Crect%20x%3D%22174%22%20y%3D%2242%22%20width%3D%2232%22%20height%3D%224%22%20fill%3D%22%23357a2f%22%2F%3E%3Crect%20x%3D%22166%22%20y%3D%2246%22%20width%3D%2248%22%20height%3D%224%22%20fill%3D%22%23357a2f%22%2F%3E%3Crect%20x%3D%22178%22%20y%3D%2250%22%20width%3D%2224%22%20height%3D%224%22%20fill%3D%22%23357a2f%22%2F%3E%3Crect%20x%3D%22170%22%20y%3D%2254%22%20width%3D%2240%22%20height%3D%224%22%20fill%3D%22%23357a2f%22%2F%3E%3Crect%20x%3D%22166%22%20y%3D%2258%22%20width%3D%2248%22%20height%3D%224%22%20fill%3D%22%23357a2f%22%2F%3E%3Crect%20x%3D%22158%22%20y%3D%2262%22%20width%3D%2264%22%20height%3D%224%22%20fill%3D%22%23357a2f%22%2F%3E%3Crect%20x%3D%22170%22%20y%3D%2266%22%20width%3D%2240%22%20height%3D%224%22%20fill%3D%22%23357a2f%22%2F%3E%3Crect%20x%3D%22162%22%20y%3D%2270%22%20width%3D%2256%22%20height%3D%224%22%20fill%3D%22%23357a2f%22%2F%3E%3Crect%20x%3D%22154%22%20y%3D%2274%22%20width%3D%2272%22%20height%3D%224%22%20fill%3D%22%23357a2f%22%2F%3E%3Crect%20x%3D%22150%22%20y%3D%2278%22%20width%3D%2280%22%20height%3D%224%22%20fill%3D%22%23357a2f%22%2F%3E%3Crect%20x%3D%22158%22%20y%3D%2282%22%20width%3D%2264%22%20height%3D%224%22%20fill%3D%22%23357a2f%22%2F%3E%3Crect%20x%3D%22154%22%20y%3D%2286%22%20width%3D%2272%22%20height%3D%224%22%20fill%3D%22%23357a2f%22%2F%3E%3Crect%20x%3D%22146%22%20y%3D%2290%22%20width%3D%2288%22%20height%3D%224%22%20fill%3D%22%23357a2f%22%2F%3E%3Crect%20x%3D%22142%22%20y%3D%2294%22%20width%3D%2296%22%20height%3D%224%22%20fill%3D%22%23357a2f%22%2F%3E%3Crect%20x%3D%22296%22%20y%3D%2298%22%20width%3D%228%22%20height%3D%2212%22%20fill%3D%22%234a2d16%22%2F%3E%3Crect%20x%3D%22296%22%20y%3D%226%22%20width%3D%228%22%20height%3D%224%22%20fill%3D%22%232f6b2a%22%2F%3E%3Crect%20x%3D%22288%22%20y%3D%2210%22%20width%3D%2224%22%20height%3D%224%22%20fill%3D%22%232f6b2a%22%2F%3E%3Crect%20x%3D%22284%22%20y%3D%2214%22%20width%3D%2232%22%20height%3D%224%22%20fill%3D%22%232f6b2a%22%2F%3E%3Crect%20x%3D%22276%22%20y%3D%2218%22%20width%3D%2248%22%20height%3D%224%22%20fill%3D%22%232f6b2a%22%2F%3E%3Crect%20x%3D%22288%22%20y%3D%2222%22%20width%3D%2224%22%20height%3D%224%22%20fill%3D%22%232f6b2a%22%2F%3E%3Crect%20x%3D%22280%22%20y%3D%2226%22%20width%3D%2240%22%20height%3D%224%22%20fill%3D%22%232f6b2a%22%2F%3E%3Crect%20x%3D%22276%22%20y%3D%2230%22%20width%3D%2248%22%20height%3D%224%22%20fill%3D%22%232f6b2a%22%2F%3E%3Crect%20x%3D%22268%22%20y%3D%2234%22%20width%3D%2264%22%20height%3D%224%22%20fill%3D%22%232f6b2a%22%2F%3E%3Crect%20x%3D%22280%22%20y%3D%2238%22%20width%3D%2240%22%20height%3D%224%22%20fill%3D%22%232f6b2a%22%2F%3E%3Crect%20x%3D%22272%22%20y%3D%2242%22%20width%3D%2256%22%20height%3D%224%22%20fill%3D%22%232f6b2a%22%2F%3E%3Crect%20x%3D%22264%22%20y%3D%2246%22%20width%3D%2272%22%20height%3D%224%22%20fill%3D%22%232f6b2a%22%2F%3E%3Crect%20x%3D%22260%22%20y%3D%2250%22%20width%3D%2280%22%20height%3D%224%22%20fill%3D%22%232f6b2a%22%2F%3E%3Crect%20x%3D%22268%22%20y%3D%2254%22%20width%3D%2264%22%20height%3D%224%22%20fill%3D%22%232f6b2a%22%2F%3E%3Crect%20x%3D%22264%22%20y%3D%2258%22%20width%3D%2272%22%20height%3D%224%22%20fill%3D%22%232f6b2a%22%2F%3E%3Crect%20x%3D%22256%22%20y%3D%2262%22%20width%3D%2288%22%20height%3D%224%22%20fill%3D%22%232f6b2a%22%2F%3E%3Crect%20x%3D%22252%22%20y%3D%2266%22%20width%3D%2296%22%20height%3D%224%22%20fill%3D%22%232f6b2a%22%2F%3E%3Crect%20x%3D%22260%22%20y%3D%2270%22%20width%3D%2280%22%20height%3D%224%22%20fill%3D%22%232f6b2a%22%2F%3E%3Crect%20x%3D%22256%22%20y%3D%2274%22%20width%3D%2288%22%20height%3D%224%22%20fill%3D%22%232f6b2a%22%2F%3E%3Crect%20x%3D%22248%22%20y%3D%2278%22%20width%3D%22104%22%20height%3D%224%22%20fill%3D%22%232f6b2a%22%2F%3E%3Crect%20x%3D%22244%22%20y%3D%2282%22%20width%3D%22112%22%20height%3D%224%22%20fill%3D%22%232f6b2a%22%2F%3E%3Crect%20x%3D%22252%22%20y%3D%2286%22%20width%3D%2296%22%20height%3D%224%22%20fill%3D%22%232f6b2a%22%2F%3E%3Crect%20x%3D%22244%22%20y%3D%2290%22%20width%3D%22112%22%20height%3D%224%22%20fill%3D%22%232f6b2a%22%2F%3E%3Crect%20x%3D%22240%22%20y%3D%2294%22%20width%3D%22120%22%20height%3D%224%22%20fill%3D%22%232f6b2a%22%2F%3E%3C%2Fsvg%3E"); animation: drift-front 30s linear infinite; }
@keyframes drift { to { background-position-x: -240px; } }
@keyframes drift-front { to { background-position-x: -360px; } }
.forest-ground { position: absolute; left: 0; right: 0; bottom: 0; height: 24px; background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2232%22%20height%3D%2224%22%20shape-rendering%3D%22crispEdges%22%3E%3Crect%20width%3D%2232%22%20height%3D%2224%22%20fill%3D%22%233f7a2c%22%2F%3E%3Crect%20y%3D%220%22%20width%3D%2232%22%20height%3D%224%22%20fill%3D%22%235c9e3a%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%22-4%22%20width%3D%224%22%20height%3D%228%22%20fill%3D%22%235c9e3a%22%2F%3E%3Crect%20x%3D%2218%22%20y%3D%22-4%22%20width%3D%224%22%20height%3D%228%22%20fill%3D%22%236db345%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%2212%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%23356a25%22%2F%3E%3Crect%20x%3D%2220%22%20y%3D%2216%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%23356a25%22%2F%3E%3C%2Fsvg%3E"); background-repeat: repeat-x; }
/* Pond with lily pads. */



@keyframes bob { 50% { transform: translateY(2px); } }
/* Fireflies. */
.fly { position: absolute; width: 4px; height: 4px; background: #f8f36b; box-shadow: 0 0 8px 2px rgba(248, 243, 107, .8); animation: blink 2.2s ease-in-out infinite; }
@keyframes blink { 0%, 100% { opacity: .1; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-6px); } }
/* The frog: moves across (forest-frog), turns around (face), jumps (img). The bubble is outside .face so the text never mirrors. */
.forest-frog { position: absolute; bottom: 14px; left: 2%; z-index: 2; width: 64px; height: 64px; animation: frog-x 24s linear infinite; }
.forest-frog .face { width: 64px; height: 64px; animation: frog-turn 24s steps(1) infinite; }
.forest-frog img { width: 64px; height: 64px; display: block; transform-origin: bottom center; animation: frog-jump .9s cubic-bezier(.3, 0, .7, 1) infinite;
  filter: drop-shadow(3px 3px 0 rgba(0, 0, 0, .55)); }
@keyframes frog-x { 0% { left: 2%; } 50% { left: calc(98% - 64px); } 100% { left: 2%; } }
@keyframes frog-turn { 0% { transform: scaleX(1); } 50% { transform: scaleX(-1); } }
@keyframes frog-jump {
  0% { transform: translateY(0) scale(1.12, .88); }
  15% { transform: translateY(-6px) scale(.92, 1.08); }
  50% { transform: translateY(-44px) scale(1, 1); }
  85% { transform: translateY(-6px) scale(.95, 1.05); }
  100% { transform: translateY(0) scale(1.12, .88); }
}
.forest-frog .ribbit { position: absolute; bottom: 74px; left: 40px; z-index: 3; transform: scale(0); transform-origin: bottom left; background: #fff; color: #000;
  border: 3px solid #000; border-radius: 8px; padding: 7px 10px; font-size: 14px; white-space: nowrap; box-shadow: 3px 3px 0 #000; animation: ribbit 3s ease-in-out infinite; }
.forest-frog .ribbit::after { content: ""; position: absolute; left: 6px; bottom: -12px; border: 6px solid transparent; border-top-color: #000; }
@media (max-width: 600px) {
  .forest { height: 120px; }
  .og { padding-top: 166px; }
  .forest-frog, .forest-frog .face, .forest-frog img { width: 52px; height: 52px; }
  .forest-frog .ribbit { bottom: 60px; font-size: 12px; }

}
@media (prefers-reduced-motion: reduce) {
  .forest-back, .forest-front, .fly, .forest-pond i, .forest-frog, .forest-frog .face, .forest-frog img, .forest-frog .ribbit { animation: none; }
  .forest-frog .ribbit { transform: none; }
}

/* ---- Forest v2: smaller band, smaller trees and frog, moon, flowers, bubble always inside ---- */
.og { padding-top: 150px; }
.forest { height: 104px; background: linear-gradient(#0b2233, #12352a 55%, #1d4a22); }
.forest-back, .forest-front { bottom: 16px; height: 80px; }
.forest-back { background-size: 175px 80px; animation: drift-sm 60s linear infinite; }
.forest-front { background-size: 262px 80px; animation: drift-front-sm 32s linear infinite; }
@keyframes drift-sm { to { background-position-x: -175px; } }
@keyframes drift-front-sm { to { background-position-x: -262px; } }
.forest-ground { height: 18px; background-size: 24px 18px; }
.forest-moon { position: absolute; right: 7%; top: 10px; width: 22px; height: 22px; background: #fff6c9; border-radius: 3px;
  box-shadow: 0 0 18px 4px rgba(255, 246, 201, .35), inset -6px -4px 0 #e7dca6; clip-path: polygon(25% 0, 75% 0, 100% 25%, 100% 75%, 75% 100%, 25% 100%, 0 75%, 0 25%); }
.forest-pond { position: absolute; right: 22%; bottom: 3px; z-index: 1; width: 84px; height: 10px; background: #2b6f8f; border: 2px solid #1b4a5e; border-radius: 3px; }
.forest-pond i { position: absolute; top: 1px; width: 10px; height: 5px; background: #6db345; border-radius: 2px; animation: bob 2.4s ease-in-out infinite; }
.forest-pond i:nth-child(1) { left: 10px; } .forest-pond i:nth-child(2) { left: 37px; animation-delay: .8s; } .forest-pond i:nth-child(3) { left: 64px; animation-delay: 1.6s; }
.forest-deco i { position: absolute; bottom: 14px; z-index: 1; width: 6px; height: 6px; }
.forest-deco .flower { background: #ff6fae; box-shadow: 0 6px 0 -2px #3f7a2c; }
.forest-deco .flower.y { background: #ffd23f; }
.forest-deco .shroom { width: 8px; height: 5px; background: #e2483d; border-radius: 4px 4px 0 0; box-shadow: 2px 5px 0 -1px #f3ead2; }
.fly { width: 3px; height: 3px; }
/* Frog: smaller, lower jump, turns around early enough that the bubble never leaves the box. */
.forest-frog { bottom: 10px; width: 44px; height: 44px; animation: frog-x2 26s linear infinite; }
.forest-frog .face, .forest-frog img { width: 44px; height: 44px; }
.forest-frog .face { animation: frog-turn 26s steps(1) infinite; }
.forest-frog img { animation: frog-jump2 .85s cubic-bezier(.3, 0, .7, 1) infinite; }
@keyframes frog-x2 { 0% { left: 2%; } 50% { left: calc(98% - 140px); } 100% { left: 2%; } }
@keyframes frog-jump2 {
  0% { transform: translateY(0) scale(1.1, .9); }
  15% { transform: translateY(-4px) scale(.94, 1.06); }
  50% { transform: translateY(-26px) scale(1, 1); }
  85% { transform: translateY(-4px) scale(.96, 1.04); }
  100% { transform: translateY(0) scale(1.1, .9); }
}
.forest-frog .ribbit { bottom: 50px; left: 30px; padding: 4px 7px; font-size: 10px; border-width: 2px; box-shadow: 2px 2px 0 #000; }
.forest-frog .ribbit::after { left: 5px; bottom: -10px; border-width: 5px; }
@media (max-width: 600px) {
  .og { padding-top: 140px; }
  .forest { height: 94px; }
  .forest-frog, .forest-frog .face, .forest-frog img { width: 38px; height: 38px; }
  .forest-frog .ribbit { bottom: 44px; left: 24px; font-size: 9px; }
  .forest-pond { width: 64px; right: 14%; }
}
/* ---- Forest v3: compact band ---- */
.og { padding-top: 124px; }
.forest { height: 80px; }
.forest-back, .forest-front { bottom: 14px; height: 60px; }
.forest-back { background-size: 131px 60px; animation-name: drift-xs; }
.forest-front { background-size: 196px 60px; animation-name: drift-front-xs; }
@keyframes drift-xs { to { background-position-x: -131px; } }
@keyframes drift-front-xs { to { background-position-x: -196px; } }
.forest-ground { height: 14px; background-size: 20px 14px; }
.forest-moon { width: 16px; height: 16px; top: 8px; }
.forest-pond { width: 64px; height: 8px; bottom: 2px; }
.forest-pond i { width: 8px; height: 4px; }
.forest-pond i:nth-child(2) { left: 28px; } .forest-pond i:nth-child(3) { left: 48px; }
.forest-deco i { bottom: 11px; transform: scale(.8); }
.forest-frog { bottom: 8px; }
.forest-frog, .forest-frog .face, .forest-frog img { width: 34px; height: 34px; }
.forest-frog .ribbit { bottom: 38px; left: 24px; font-size: 9px; padding: 3px 6px; }
@keyframes frog-jump2 {
  0% { transform: translateY(0) scale(1.1, .9); }
  15% { transform: translateY(-3px) scale(.94, 1.06); }
  50% { transform: translateY(-18px) scale(1, 1); }
  85% { transform: translateY(-3px) scale(.96, 1.04); }
  100% { transform: translateY(0) scale(1.1, .9); }
}
@media (max-width: 600px) {
  .og { padding-top: 118px; }
  .forest { height: 74px; }
  .forest-frog, .forest-frog .face, .forest-frog img { width: 30px; height: 30px; }
  .forest-frog .ribbit { bottom: 34px; left: 20px; font-size: 8px; }
}

/* ================= Home page ================= */
.btn.primary.head-cta { width: auto; flex: none; padding: 9px 14px; font-size: 14px; margin-left: auto; text-decoration: none; box-shadow: 3px 3px 0 #000; }
.home { gap: 40px; }
.home-hero { text-align: center; padding: 40px 16px 28px; display: grid; justify-items: center; gap: 10px; }
.home-logo { width: 150px; height: auto; filter: drop-shadow(6px 6px 0 rgba(0, 0, 0, .6)); animation: frog-hop 2.4s ease-in-out infinite; }
.home-hero h1 { margin: 4px 0 0; font-size: clamp(26px, 6vw, 52px); color: var(--orange); text-shadow: 5px 5px 0 #000; }
.home-tag { margin: 0; font-size: 18px; font-weight: 800; background: rgba(16, 33, 15, .85); padding: 6px 14px; border-radius: 999px; }
.home-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 8px; }
.home-cta .btn { width: auto; text-decoration: none; padding: 12px 20px; }
.home-stats { width: 100%; max-width: 640px; margin-top: 10px; }
.home h2.pixel { font-size: 18px; color: var(--text); margin: 0 0 14px; line-height: 1.5; }
.home-story { display: grid; grid-template-columns: 1.1fr 1fr; gap: 24px; align-items: center; background: var(--card); border: 2px solid var(--border); border-radius: 18px; padding: 24px; box-shadow: 6px 6px 0 rgba(0, 0, 0, .45); }
.story-text p { margin: 0 0 12px; font-size: 16px; color: var(--muted); }
.story-text b { color: var(--text); }
.story-art img { width: 100%; border-radius: 12px; border: 3px solid #000; box-shadow: 5px 5px 0 #000; }
.ord-grid, .fam-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.fam-grid { grid-template-columns: repeat(4, 1fr); }
.ord-card, .fam-card { background: var(--card); border: 2px solid var(--border); border-radius: 14px; padding: 18px; box-shadow: 5px 5px 0 rgba(0, 0, 0, .45); }
.ord-card h3, .fam-card h3 { margin: 8px 0 6px; font-size: 16px; }
.ord-card p, .fam-card p { margin: 0; color: var(--muted); font-size: 14px; }
.ord-ico { display: inline-grid; place-items: center; width: 40px; height: 40px; background: var(--orange); color: #000; border: 2px solid #000; border-radius: 8px; font-weight: 900; font-size: 20px; }
.fam-tag { font-size: 11px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: var(--lime); }
.fam-card a { display: inline-block; margin-top: 10px; color: var(--orange); font-weight: 800; text-decoration: none; }
.fam-card.hot { border-color: var(--orange); box-shadow: 5px 5px 0 #000, 0 0 22px rgba(255, 138, 0, .3); }
.home-join { display: flex; gap: 20px; align-items: center; background: var(--lime); color: #142a0c; border: 3px solid #000; border-radius: 18px; padding: 22px; box-shadow: 6px 6px 0 #000; }
.home-join img { width: 110px; height: auto; flex: none; }
.home-join h2.pixel { color: #142a0c; }
.home-join p { margin: 0 0 8px; }
.home-join a { color: #142a0c; font-weight: 800; }
.home-join .home-cta { justify-content: flex-start; }
.home-join .btn.ghost { background: #142a0c; color: var(--lime); }
.meet { display: inline-block; margin-top: 10px; color: var(--orange); font-weight: 800; text-decoration: none; }
@media (max-width: 900px) {
  .home-story { grid-template-columns: 1fr; }
  .fam-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .ord-grid, .fam-grid { grid-template-columns: 1fr; }
  .home-join { flex-direction: column; text-align: center; }
  .home-join .home-cta { justify-content: center; }
  .home-logo { width: 110px; }
  .btn.primary.head-cta { padding: 8px 10px; font-size: 12px; }
}

/* ================= Pond scene (replaces the forest) ================= */
.og { padding-top: 136px; }
.pondscape { position: absolute; left: 0; right: 0; top: 30px; height: 92px; overflow: hidden; border-bottom: 3px solid #000;
  background: linear-gradient(#0b2233, #12364a 45%, #1e5b6e 46%, #123e4d); image-rendering: pixelated; }
.ps-moon { position: absolute; right: 9%; top: 7px; width: 16px; height: 16px; background: #fff6c9; box-shadow: 0 0 16px 4px rgba(255, 246, 201, .35), inset -5px -3px 0 #e7dca6;
  clip-path: polygon(25% 0, 75% 0, 100% 25%, 100% 75%, 75% 100%, 25% 100%, 0 75%, 0 25%); }
.ps-water { position: absolute; left: 0; right: 0; top: 46%; bottom: 0; }
.ps-water .wave { position: absolute; left: 0; right: 0; top: 6px; height: 2px; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .28) 0 14px, transparent 14px 44px); animation: wave 7s linear infinite; }
.ps-water .wave.w2 { top: 22px; opacity: .55; animation-duration: 11s; animation-direction: reverse; }
@keyframes wave { to { background-position-x: 44px; } }
.ps-reeds { position: absolute; left: 0; bottom: 0; width: 90px; height: 92px; z-index: 2; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2290%22%20height%3D%2292%22%20shape-rendering%3D%22crispEdges%22%3E%3Crect%20x%3D%228%22%20y%3D%2230%22%20width%3D%223%22%20height%3D%2262%22%20fill%3D%22%233f7a2c%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%2230%22%20width%3D%227%22%20height%3D%2214%22%20rx%3D%223%22%20fill%3D%22%237a4a22%22%2F%3E%3Crect%20x%3D%229%22%20y%3D%2225%22%20width%3D%221%22%20height%3D%225%22%20fill%3D%22%233f7a2c%22%2F%3E%3Crect%20x%3D%2220%22%20y%3D%2214%22%20width%3D%223%22%20height%3D%2278%22%20fill%3D%22%233f7a2c%22%2F%3E%3Crect%20x%3D%2218%22%20y%3D%2214%22%20width%3D%227%22%20height%3D%2214%22%20rx%3D%223%22%20fill%3D%22%237a4a22%22%2F%3E%3Crect%20x%3D%2221%22%20y%3D%229%22%20width%3D%221%22%20height%3D%225%22%20fill%3D%22%233f7a2c%22%2F%3E%3Crect%20x%3D%2231%22%20y%3D%2240%22%20width%3D%223%22%20height%3D%2252%22%20fill%3D%22%233f7a2c%22%2F%3E%3Crect%20x%3D%2229%22%20y%3D%2240%22%20width%3D%227%22%20height%3D%2214%22%20rx%3D%223%22%20fill%3D%22%237a4a22%22%2F%3E%3Crect%20x%3D%2232%22%20y%3D%2235%22%20width%3D%221%22%20height%3D%225%22%20fill%3D%22%233f7a2c%22%2F%3E%3Crect%20x%3D%2244%22%20y%3D%2222%22%20width%3D%223%22%20height%3D%2270%22%20fill%3D%22%233f7a2c%22%2F%3E%3Crect%20x%3D%2242%22%20y%3D%2222%22%20width%3D%227%22%20height%3D%2214%22%20rx%3D%223%22%20fill%3D%22%237a4a22%22%2F%3E%3Crect%20x%3D%2245%22%20y%3D%2217%22%20width%3D%221%22%20height%3D%225%22%20fill%3D%22%233f7a2c%22%2F%3E%3Crect%20x%3D%2258%22%20y%3D%2234%22%20width%3D%223%22%20height%3D%2258%22%20fill%3D%22%233f7a2c%22%2F%3E%3Crect%20x%3D%2256%22%20y%3D%2234%22%20width%3D%227%22%20height%3D%2214%22%20rx%3D%223%22%20fill%3D%22%237a4a22%22%2F%3E%3Crect%20x%3D%2259%22%20y%3D%2229%22%20width%3D%221%22%20height%3D%225%22%20fill%3D%22%233f7a2c%22%2F%3E%3Crect%20x%3D%2270%22%20y%3D%2218%22%20width%3D%223%22%20height%3D%2274%22%20fill%3D%22%233f7a2c%22%2F%3E%3Crect%20x%3D%2268%22%20y%3D%2218%22%20width%3D%227%22%20height%3D%2214%22%20rx%3D%223%22%20fill%3D%22%237a4a22%22%2F%3E%3Crect%20x%3D%2271%22%20y%3D%2213%22%20width%3D%221%22%20height%3D%225%22%20fill%3D%22%233f7a2c%22%2F%3E%3Crect%20x%3D%2282%22%20y%3D%2244%22%20width%3D%223%22%20height%3D%2248%22%20fill%3D%22%233f7a2c%22%2F%3E%3Crect%20x%3D%2280%22%20y%3D%2244%22%20width%3D%227%22%20height%3D%2214%22%20rx%3D%223%22%20fill%3D%22%237a4a22%22%2F%3E%3Crect%20x%3D%2283%22%20y%3D%2239%22%20width%3D%221%22%20height%3D%225%22%20fill%3D%22%233f7a2c%22%2F%3E%3Crect%20x%3D%2213%22%20y%3D%2250%22%20width%3D%222%22%20height%3D%2242%22%20fill%3D%22%235c9e3a%22%2F%3E%3Crect%20x%3D%2251%22%20y%3D%2258%22%20width%3D%222%22%20height%3D%2234%22%20fill%3D%22%235c9e3a%22%2F%3E%3Crect%20x%3D%2276%22%20y%3D%2254%22%20width%3D%222%22%20height%3D%2238%22%20fill%3D%22%235c9e3a%22%2F%3E%3C%2Fsvg%3E") no-repeat; }
.ps-reeds.right { left: auto; right: 0; transform: scaleX(-1); }
.lily { position: absolute; bottom: 8px; z-index: 1; width: 48px; height: 12px; border-radius: 50%; border: 2px solid #2c6322;
  background: conic-gradient(from 75deg, #1e5b6e 0 26deg, #5aa83f 26deg); animation: bob 2.6s ease-in-out infinite; }
.lily.bloom::after { content: ""; position: absolute; right: 6px; top: -6px; width: 8px; height: 8px; background: #ff7fb8; box-shadow: 0 0 0 2px #ffd1e6 inset; clip-path: polygon(50% 0, 65% 35%, 100% 50%, 65% 65%, 50% 100%, 35% 65%, 0 50%, 35% 35%); }
.bub { position: absolute; bottom: 4px; width: 4px; height: 4px; border: 1px solid rgba(255, 255, 255, .6); border-radius: 50%; animation: rise 3.2s ease-in infinite; }
@keyframes rise { 0% { transform: translateY(0); opacity: 0; } 20% { opacity: .9; } 100% { transform: translateY(-34px); opacity: 0; } }
.dragonfly { position: absolute; top: 14px; left: -20px; z-index: 3; width: 14px; height: 3px; background: #4fd1c5; animation: fly 13s linear infinite; }
.dragonfly i { position: absolute; left: 3px; top: -4px; width: 8px; height: 4px; background: rgba(220, 255, 255, .7); animation: flap .15s steps(2) infinite; }
@keyframes flap { 50% { transform: scaleY(-1) translateY(-6px); } }
@keyframes fly { 0% { left: -20px; transform: translateY(0); } 25% { transform: translateY(10px); } 50% { transform: translateY(-2px); } 75% { transform: translateY(12px); } 100% { left: calc(100% + 20px); transform: translateY(0); } }
.ps-frog { position: absolute; bottom: 14px; left: 6%; z-index: 4; width: 34px; height: 34px; animation: frog-pads 16s linear infinite; }
@keyframes frog-pads {
  0% { left: 6%; bottom: 14px; }
  6.25% { left: 6%; bottom: 14px; }
  9.375% { left: 15.5%; bottom: 40px; }
  12.5% { left: 25%; bottom: 14px; }
  18.75% { left: 25%; bottom: 14px; }
  21.875% { left: 34.5%; bottom: 40px; }
  25% { left: 44%; bottom: 14px; }
  31.25% { left: 44%; bottom: 14px; }
  34.375% { left: 53.5%; bottom: 40px; }
  37.5% { left: 63%; bottom: 14px; }
  43.75% { left: 63%; bottom: 14px; }
  46.875% { left: 72.5%; bottom: 40px; }
  50% { left: 82%; bottom: 14px; }
  56.25% { left: 82%; bottom: 14px; }
  59.375% { left: 72.5%; bottom: 40px; }
  62.5% { left: 63%; bottom: 14px; }
  68.75% { left: 63%; bottom: 14px; }
  71.875% { left: 53.5%; bottom: 40px; }
  75% { left: 44%; bottom: 14px; }
  81.25% { left: 44%; bottom: 14px; }
  84.375% { left: 34.5%; bottom: 40px; }
  87.5% { left: 25%; bottom: 14px; }
  93.75% { left: 25%; bottom: 14px; }
  96.875% { left: 15.5%; bottom: 40px; }
  100% { left: 6%; bottom: 14px; }
}
.ps-frog .face { width: 34px; height: 34px; animation: frog-turn 16s steps(1) infinite; }
.ps-frog img { width: 34px; height: 34px; display: block; transform-origin: bottom center; filter: drop-shadow(2px 2px 0 rgba(0, 0, 0, .55)); animation: frog-legs 2s ease-in-out infinite; }
@keyframes frog-legs { 0%, 40% { transform: scale(1); } 48% { transform: scale(1.12, .86); } 58% { transform: scale(.9, 1.12); } 92% { transform: scale(1); } 100% { transform: scale(1.12, .88); } }
.ps-frog .splash { position: absolute; left: 50%; bottom: -6px; width: 44px; height: 10px; margin-left: -22px; border: 2px solid rgba(255, 255, 255, .7); border-radius: 50%; opacity: 0; animation: splash 2s ease-out infinite; }
@keyframes splash { 0% { transform: scale(.3); opacity: .9; } 35% { transform: scale(1.4); opacity: 0; } 100% { opacity: 0; } }
.ps-frog .ribbit { position: absolute; bottom: 38px; left: 22px; z-index: 5; transform: scale(0); transform-origin: bottom left; background: #fff; color: #000;
  border: 2px solid #000; border-radius: 6px; padding: 3px 6px; font-size: 9px; white-space: nowrap; box-shadow: 2px 2px 0 #000; animation: ribbit-pad 4s ease-in-out infinite; }
.ps-frog .ribbit::after { content: ""; position: absolute; left: 4px; bottom: -9px; border: 4px solid transparent; border-top-color: #000; }
@keyframes ribbit-pad { 0% { transform: scale(0); } 5% { transform: scale(1.2) rotate(-4deg); } 9%, 20% { transform: scale(1) rotate(0); } 24%, 100% { transform: scale(0); } }
@media (max-width: 600px) {
  .og { padding-top: 128px; }
  .pondscape { height: 86px; }
  .ps-reeds { width: 60px; background-size: 60px 86px; }
  .lily { width: 36px; }
  .ps-frog, .ps-frog .face, .ps-frog img { width: 30px; height: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  .wave, .lily, .bub, .dragonfly, .dragonfly i, .ps-frog, .ps-frog .face, .ps-frog img, .ps-frog .splash, .ps-frog .ribbit, .home-logo { animation: none; }
  .ps-frog .ribbit { transform: none; }
}