:root {
  --paper: #F5EFDF;
  --paper-2: #ECE4CC;
  --card: #FFFBF0;
  --ink: #28331F;
  --ink-2: #5A6450;
  --moss: #5E7D3C;
  --moss-d: #3F5726;
  --leaf: #A8CF78;
  --shell: #D4974F;
  --clay: #A9652F;
  --line: #DCD2B6;
  --slime: linear-gradient(90deg, #BDEFD2, #CFE3FF, #E7D3FF, #BDEFD2);
  --display: 'Fraunces', Georgia, serif;
  --body: 'Nunito', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --slow: .7s cubic-bezier(.3, .1, .2, 1);
  color-scheme: light;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 17px/1.6 var(--body); overflow-x: clip; padding-bottom: 40px;
}
h1, h2, h3 { font-family: var(--display); font-variation-settings: 'SOFT' 100, 'WONK' 1; margin: 0; line-height: 1.05; }
h2 { font-size: clamp(30px, 4.2vw, 50px); font-weight: 700; letter-spacing: -.02em; max-width: 18ch; }
h3 { font-size: 22px; font-weight: 700; }
p { margin: 0 0 1em; }
a { color: inherit; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.muted { color: var(--ink-2); }
.fine { font-size: 14px; color: var(--ink-2); margin-top: 14px; }
.kicker { font: 700 13px/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--moss); margin-bottom: 14px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.demo-pill { letter-spacing: .04em; text-transform: none; font-weight: 700; font-size: 12px; background: #F3D9B0; color: #7A4B1E; padding: 4px 10px; border-radius: 99px; }
.card { background: var(--card); border: 1.5px solid var(--line); border-radius: 22px; box-shadow: 0 1px 0 #fff inset, 0 10px 30px -18px rgba(40, 51, 31, .35); }

/* buttons: even hover is slow here */
.btn { white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 99px; padding: 13px 24px; font: 800 16px/1 var(--body); text-decoration: none; border: 2px solid var(--ink); cursor: pointer; transition: transform var(--slow), background var(--slow), box-shadow var(--slow); }
.btn-sm { padding: 10px 18px; font-size: 14px; }
.btn-primary { background: var(--moss); color: #FFFBF0; border-color: var(--moss-d); box-shadow: 0 4px 0 var(--moss-d); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--moss-d); }
.btn-ghost { background: transparent; color: var(--ink); }
.btn-ghost:hover { background: var(--paper-2); }
.btn[disabled], .btn.pending { opacity: .55; cursor: default; transform: none; }
.btn:focus-visible, input:focus-visible, .chip:focus-visible, .linkish:focus-visible { outline: 3px solid var(--shell); outline-offset: 3px; }

/* nav */
.nav { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 24px; padding: 10px 24px; background: rgba(245, 239, 223, .86); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: 8px; font: 800 22px/1 var(--display); font-variation-settings: 'SOFT' 100; text-decoration: none; }
.brand-snail { width: 44px; display: inline-block; }
.brand-snail svg { width: 100%; height: auto; display: block; }
.nav-links { display: flex; gap: 22px; margin-left: auto; }
.nav-links a { text-decoration: none; font-weight: 700; color: var(--ink-2); transition: color var(--slow); }
.nav-links a:hover { color: var(--ink); }

/* hero */
.hero { display: grid; grid-template-columns: 1fr 1.05fr; align-items: center; gap: 24px; max-width: 1220px; margin: 0 auto; padding: 18px 24px 24px; min-height: min(calc(100svh - 110px), 760px); }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; color: var(--ink-2); font-size: 15px; margin-bottom: 8px; }
.pulse-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--moss); animation: breathe 6s ease-in-out infinite; }
.hero h1 { font-size: clamp(76px, 11.5vw, 156px); font-weight: 900; letter-spacing: -.045em; line-height: .9; margin-bottom: 18px; }
.hero h1 .mo { color: var(--moss); font-style: italic; font-weight: 800; }
.lede { font-size: clamp(19px, 1.9vw, 24px); line-height: 1.4; max-width: 30ch; }
.lede em { font-family: var(--display); font-style: italic; color: var(--clay); }
.cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.hero-art { position: relative; aspect-ratio: 1.12; max-height: 540px; width: 100%; }
.sun { position: absolute; width: 46%; aspect-ratio: 1; right: 6%; top: 2%; border-radius: 50%; background: radial-gradient(circle at 40% 40%, #FFE6AE, #F7CB7C 60%, rgba(247, 203, 124, 0) 71%); animation: breathe 14s ease-in-out infinite; }
.hills { position: absolute; left: -4%; right: -4%; bottom: 0; width: 108%; height: 46%; }
.slime-ground { position: absolute; left: 0; width: 40%; bottom: 16%; height: 8px; border-radius: 8px; background: var(--slime); background-size: 300% 100%; opacity: .9; animation: shimmer 12s linear infinite; filter: blur(.3px); }
.hero-snail { position: absolute; left: 14%; width: 82%; bottom: 10%; }
.hero-snail svg { width: 100%; height: auto; display: block; overflow: visible; }
.hero-snail .pupil, .crawler-snail .pupil { animation: side-eye 11s ease-in-out infinite; }
.steam { animation: steam 5s ease-in-out infinite; }
.steam.s2 { animation-delay: -2.5s; }
.bubble { position: absolute; left: 50%; top: 4%; background: #FFFBF0; border: 2px solid var(--ink); border-radius: 20px; padding: 10px 18px; font: italic 600 19px/1.3 var(--display); max-width: 260px; box-shadow: 0 4px 0 var(--ink); transition: opacity 1.4s; }
.bubble::after { content: ''; position: absolute; left: 34px; bottom: -13px; width: 20px; height: 20px; background: #FFFBF0; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(45deg) skew(10deg, 10deg); }
.bubble.fade { opacity: 0; }

/* ticker: the slowest marquee on the internet */
.ticker { background: var(--ink); color: #F5EFDF; overflow: hidden; white-space: nowrap; padding: 14px 0; font: italic 600 20px/1 var(--display); }
.ticker-track { display: inline-flex; gap: 40px; padding-right: 40px; animation: tick 160s linear infinite; }
.ticker-track span::after { content: '🐌'; margin-left: 40px; font-style: normal; }

.section { padding: 104px 0; }
.rules { background: var(--paper); }
.mark { background: linear-gradient(transparent 58%, rgba(189, 239, 210, .9) 58%, rgba(231, 211, 255, .9)); padding: 0 2px; border-radius: 3px; }

/* the letter */
.note-wrap { display: grid; grid-template-columns: 1fr 1.25fr; gap: 56px; align-items: center; }
.note-snail { width: 78%; max-width: 340px; margin-top: 30px; }
.note-snail svg { width: 100%; height: auto; display: block; }
.note { position: relative; background: #FFFDF4; padding: 44px 48px 38px 72px; border-radius: 6px; transform: rotate(-1.2deg);
  box-shadow: 0 1px 0 #fff inset, 0 22px 40px -24px rgba(40, 51, 31, .45), 0 2px 6px rgba(40, 51, 31, .08);
  background-image: linear-gradient(90deg, transparent 52px, rgba(212, 151, 79, .45) 52px 54px, transparent 54px),
    repeating-linear-gradient(transparent 0 33px, rgba(94, 125, 60, .14) 33px 34px);
  background-position: 0 0, 0 38px; font: 400 19px/34px var(--display); color: var(--ink); }
.note::before { content: ''; position: absolute; top: -14px; left: 50%; width: 120px; height: 30px; transform: translateX(-50%) rotate(2deg); background: rgba(232, 214, 160, .75); border-radius: 3px; }
.note p { margin: 0 0 34px; }
.note .note-hi { font: 700 30px/34px 'Caveat', cursive; color: var(--clay); }
.note-sign { margin: 0 !important; font-style: italic; }
.note-sign span { display: block; font: 700 46px/1 'Caveat', cursive; color: var(--moss); margin-top: 6px; transform: rotate(-3deg); transform-origin: left; }

/* ranks on a tape measure */
.tape-wrap { margin-top: 56px; overflow-x: auto; padding: 0 4px; }
.tape { position: relative; min-width: 760px; height: 250px; margin: 0 90px; }
.tape-band { position: absolute; left: -24px; right: -24px; top: 106px; height: 38px; border-radius: 6px; background:
  repeating-linear-gradient(90deg, rgba(40, 51, 31, .55) 0 1.5px, transparent 1.5px 10px) 0 0 / 100% 10px no-repeat,
  repeating-linear-gradient(90deg, rgba(40, 51, 31, .7) 0 2px, transparent 2px 50px) 0 0 / 100% 18px no-repeat,
  #F2D27A; box-shadow: inset 0 -3px 0 rgba(169, 101, 47, .25); }
.tape-mark { position: absolute; width: 190px; transform: translateX(-50%); text-align: center; }
.tape-mark::after { content: ''; position: absolute; left: 50%; width: 3px; height: 28px; background: var(--clay); border-radius: 2px; }
.tape-mark.above { bottom: 158px; }
.tape-mark.above::after { top: 100%; margin-top: 6px; }
.tape-mark.below { top: 158px; }
.tape-mark.below::after { bottom: 100%; margin-bottom: 6px; }
.tape-mark b { display: block; font: 700 20px/1.1 var(--display); }
.tape-mark .t-age { display: block; font: 600 12px var(--mono); color: var(--clay); margin: 3px 0; }
.tape-mark .t-d { display: block; font-size: 14px; line-height: 1.35; color: var(--ink-2); }
.tape-you { position: absolute; top: 96px; height: 58px; width: 4px; background: var(--moss); border-radius: 3px; transform: translateX(-50%); transition: left 1.2s ease-out; }
.tape-you span { position: absolute; top: -22px; left: 50%; transform: translateX(-50%); font: 800 12px var(--body); background: var(--moss); color: #FFFBF0; padding: 2px 8px; border-radius: 99px; }

/* race prose */
.race-copy { font-size: 20px; line-height: 1.6; max-width: 62ch; margin: 26px 0 30px; }
.race-sentence { font: 400 clamp(20px, 2.2vw, 26px)/1.5 var(--display); max-width: 46ch; margin: 34px 0 0; }
.race-sentence b { font-weight: 800; color: var(--moss-d); }

/* trail */
.trail { background: var(--paper-2); }
.trail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 36px; align-items: start; }
.trail-copy b { color: var(--moss-d); }
.min-note { font-size: 15px; color: var(--ink-2); }
.min-note:empty { display: none; }
.lookup { padding: 26px; }
.lookup label { font-weight: 800; display: block; margin-bottom: 10px; }
.lookup-row { display: flex; gap: 10px; }
input { font: 500 15px var(--mono); padding: 12px 16px; border-radius: 14px; border: 2px solid var(--line); background: #fff; color: var(--ink); width: 100%; min-width: 0; transition: border-color var(--slow); }
input:focus { border-color: var(--moss); outline: none; }
.linkish { background: none; border: 0; padding: 0; margin-top: 10px; font: 700 14px var(--body); color: var(--moss); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.result { margin-top: 22px; min-height: 240px; }
.result-empty { text-align: center; color: var(--ink-2); padding: 10px 10px 0; }
.result-empty div { width: 180px; margin: 0 auto 8px; }
.result-empty svg { width: 100%; height: auto; }
.res-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.res-addr { font: 500 13px var(--mono); color: var(--ink-2); }
.res-len { font: 900 56px/1 var(--display); letter-spacing: -.03em; margin: 8px 0 2px; }
.res-rank { font: italic 700 22px var(--display); color: var(--moss); }
.res-desc { color: var(--ink-2); font-size: 15px; }
.trail-svg { width: 100%; height: auto; margin: 10px 0 6px; overflow: visible; }
.res-race { background: var(--paper); border-radius: 14px; padding: 12px 14px; font-size: 15px; }
.res-race b { color: var(--moss-d); }

.board { margin-top: 64px; }
.board h3 { margin-bottom: 16px; }
.board-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; counter-reset: b; }
.board-list li { display: grid; grid-template-columns: 34px minmax(110px, 160px) 1fr 90px; gap: 14px; align-items: center; padding: 10px 14px; background: var(--card); border-radius: 12px; border: 1px solid var(--line); font-size: 15px; }
.board-list li.muted { display: block; }
.board-list .pos { font: italic 800 20px var(--display); color: var(--shell); }
.board-list code { font: 500 13px var(--mono); }
.board-list .bar-slot { display: block; }
.board-list .bar { display: block; height: 8px; width: 0; border-radius: 8px; background: var(--slime); background-size: 300% 100%; animation: shimmer 14s linear infinite; transition: width 1.8s cubic-bezier(.3,.1,.2,1) calc(var(--i) * 120ms); }
.board.in .bar { width: var(--w); }
.board-list .len { font: 600 14px var(--mono); text-align: right; }
.board-list li.me { border-color: var(--moss); box-shadow: 0 0 0 2px var(--leaf); }

/* race */
.race { background: var(--paper); }
.track-card { padding: 22px 22px 18px; }
.track-head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font: 700 18px var(--display); margin-bottom: 14px; }
.countdown { font: 600 14px var(--mono); color: var(--clay); align-self: center; }
.track { position: relative; height: 230px; border-radius: 16px; overflow: hidden; background:
  repeating-linear-gradient(180deg, transparent 0 74px, rgba(40, 51, 31, .12) 74px 76px),
  linear-gradient(180deg, #DDE9BE, #CBDDA2); }
.finish { position: absolute; right: 0; top: 0; bottom: 0; width: 18px; background: repeating-conic-gradient(var(--ink) 0 25%, #FFFBF0 0 50%) 0 0 / 18px 18px; }
.racer { position: absolute; transform: translate(-100%, -50%); transition: left 3.6s cubic-bezier(.35,.05,.2,1); }
.racer svg { animation: bob 2.8s ease-in-out infinite var(--bob, 0s); transform-origin: 50% 100%; }
.racer.pack svg { animation-duration: 3.4s; }
.racer svg { width: 100%; height: auto; display: block; }
.racer .tag { position: absolute; left: 50%; bottom: 100%; transform: translateX(-50%); white-space: nowrap; font: 800 12px var(--body); background: var(--ink); color: #FFFBF0; padding: 3px 8px; border-radius: 99px; }
.racer.pack .tag { background: var(--moss); font-size: 13px; }
.racer.me .tag { background: var(--clay); }
.racer-trail { position: absolute; left: 0; transition: width 3.6s cubic-bezier(.35,.05,.2,1); height: 6px; border-radius: 6px; transform: translateY(-50%); background: var(--slime); background-size: 300% 100%; animation: shimmer 12s linear infinite; opacity: .85; }
.days { display: grid; grid-template-columns: repeat(7, 1fr); margin-top: 8px; font: 600 12px var(--mono); color: var(--ink-2); }
.days span { border-left: 1px solid var(--line); padding-left: 6px; }
.days span.today { color: var(--moss-d); font-weight: 800; }
.track-note { margin: 14px 0 0; font-size: 15px; color: var(--ink-2); }

/* memes */
.memes { background: var(--paper-2); }
.studio { display: grid; grid-template-columns: minmax(0, 520px) 1fr; gap: 34px; margin-top: 36px; align-items: start; }
.canvas-wrap { padding: 12px; }
.canvas-wrap canvas { width: 100%; height: auto; display: block; border-radius: 14px; }
.controls { display: grid; gap: 18px; }
.ctl { display: grid; gap: 8px; }
.ctl-l { font-weight: 800; font-size: 15px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 6px; border: 2px solid var(--line); background: var(--card); border-radius: 14px; padding: 4px 12px 4px 4px; font: 700 14px var(--body); color: var(--ink); cursor: pointer; transition: border-color var(--slow), background var(--slow); }
.chip .ico { width: 54px; }
.chip .ico svg { width: 100%; height: auto; display: block; }
.chip .sw { width: 26px; height: 26px; border-radius: 9px; border: 1.5px solid rgba(0, 0, 0, .15); }
.chip[aria-pressed="true"] { border-color: var(--moss); background: #EAF3D8; }
.studio-actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* token */
.token-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.ca-card { padding: 24px; margin-top: 28px; }
.ca-l { font-weight: 800; font-size: 14px; color: var(--ink-2); }
.ca-row { display: flex; gap: 10px; align-items: center; margin: 8px 0 18px; }
.ca-row code { flex: 1; min-width: 0; font: 500 14px var(--mono); background: var(--paper); padding: 12px 14px; border-radius: 12px; overflow-wrap: anywhere; }
.ca-links { display: flex; flex-wrap: wrap; gap: 10px; }
.faq details { border-bottom: 1.5px solid var(--line); padding: 16px 0; }
.faq summary { cursor: pointer; font: 700 20px var(--display); list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::after { content: '+'; color: var(--moss); transition: transform var(--slow); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary::-webkit-details-marker { display: none; }
.faq p { margin: 10px 0 0; color: var(--ink-2); }

.footer { background: var(--ink); color: #DCD8C6; padding: 40px 0 70px; }
.foot { display: flex; gap: 32px; align-items: center; flex-wrap: wrap; }
.foot .brand { color: #F5EFDF; }
.foot p { flex: 1; min-width: 260px; margin: 0; font-size: 14px; }

/* the real-speed crawler: 1 mm per second, persists between visits */
.crawler { position: fixed; left: 0; right: 0; bottom: 0; height: 34px; z-index: 30; pointer-events: none; }
.crawler-trail { position: absolute; left: 0; bottom: 5px; height: 4px; width: 0; border-radius: 4px; background: var(--slime); background-size: 300% 100%; animation: shimmer 16s linear infinite; opacity: .9; }
.crawler-snail { position: absolute; bottom: 2px; left: 0; width: 50px; pointer-events: auto; cursor: help; }
.crawler-snail svg { width: 100%; height: auto; display: block; }

.toast { position: fixed; left: 50%; bottom: 52px; transform: translate(-50%, 20px); background: var(--ink); color: #FFFBF0; padding: 12px 20px; border-radius: 14px; font-weight: 700; font-size: 15px; opacity: 0; pointer-events: none; transition: opacity .8s, transform .8s; z-index: 60; max-width: calc(100vw - 32px); text-align: center; }
.toast.on { opacity: 1; transform: translate(-50%, 0); }

@keyframes breathe { 50% { transform: scale(1.06); } }
@keyframes sway { 50% { transform: rotate(-1.6deg); } }
@keyframes side-eye { 0%, 35%, 100% { transform: translate(0, 0); } 45%, 80% { transform: translate(7px, -2px); } }
@keyframes steam { 0% { opacity: 0; transform: translateY(6px); } 40% { opacity: 1; } 100% { opacity: 0; transform: translateY(-10px); } }
@keyframes shimmer { to { background-position: 300% 0; } }
@keyframes tick { to { transform: translateX(-50%); } }



/* the Slow Lane hook */
.lane { background: var(--ink); color: #EDE6D0; }
.lane .kicker { color: var(--leaf); }
.lane h2 { color: #FFFBF0; max-width: 20ch; }
.lane-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 48px; margin-top: 36px; align-items: center; }
.lane-copy p { font-size: 18px; line-height: 1.65; }
.lane-copy b { color: #FFFBF0; }
.lane .mark { color: #FFFBF0; background-image: linear-gradient(transparent 58%, rgba(168, 207, 120, .5) 58%); }
.lane-now { background: rgba(255, 251, 240, .07); border: 1px solid rgba(255, 251, 240, .14); border-radius: 14px; padding: 12px 16px; font-size: 16px !important; }
.lane-now:empty { display: none; }
.fee-card { margin: 0; padding: 22px 22px 18px; color: var(--ink); }
.fee-card figcaption { font: 700 18px var(--display); margin-bottom: 6px; }
.fee-card svg { width: 100%; height: auto; display: block; overflow: visible; }
.fc-axis { stroke: var(--ink-2); stroke-width: 1.5; }
.fc-grid { stroke: var(--line); stroke-width: 1; stroke-dasharray: 4 5; }
.fc-tick { font: 600 12px var(--mono); fill: var(--ink-2); }
.fc-note { font: italic 600 13px var(--display); fill: var(--moss); }
.fc-line { fill: none; stroke: var(--clay); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.fc-you { transition: transform 1.4s cubic-bezier(.2, .7, .2, 1); }
.fc-you circle { fill: var(--moss); stroke: #FFFBF0; stroke-width: 3; animation: glow-dot 2.4s ease-in-out infinite; }
.fc-you text { font: 800 13px var(--body); fill: var(--moss-d); }
.fee-you { margin: 10px 0 0; font-size: 15px; color: var(--ink-2); }
.res-fee { margin: 12px 0 0; font-size: 15px; }
.res-fee b { color: var(--clay); }
.res-fee a { color: var(--moss); font-weight: 700; }
/* the curve draws itself when it scrolls in */
.fee-card.reveal .fc-line { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.4s cubic-bezier(.3, .1, .2, 1) .5s; }
.fee-card.reveal.in .fc-line { stroke-dashoffset: 0; }
.fee-card.reveal .fc-area { opacity: 0; transition: opacity 1.4s ease 2s; }
.fee-card.reveal.in .fc-area { opacity: 1; }
@keyframes glow-dot { 50% { r: 12; } }
@media (max-width: 960px) { .lane-grid { grid-template-columns: 1fr; } }

.launch-link { font-size: 15px; color: var(--ink-2); margin: 16px 0 0; padding: 12px 14px; border-radius: 12px; background: var(--paper); }
.launch-link a { color: var(--moss-d); }
.launch-link.bad { background: #F6D6CC; color: #7A2E1A; }

/* trade in the Slow Lane */
.swap-card { margin-top: 36px; padding: 24px; max-width: 560px; color: var(--ink); }
.swap-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; font: 700 20px var(--display); }
.swap-tabs { display: inline-flex; background: var(--paper); border-radius: 99px; padding: 4px; }
.swap-tabs button { border: 0; background: none; font: 800 14px var(--body); color: var(--ink-2); padding: 7px 16px; border-radius: 99px; cursor: pointer; transition: background var(--slow), color var(--slow); }
.swap-tabs button[aria-pressed="true"] { background: var(--moss); color: #FFFBF0; }
.swap-in { display: flex; align-items: center; gap: 10px; background: #fff; border: 2px solid var(--line); border-radius: 16px; padding: 4px 16px 4px 4px; }
.swap-in:focus-within { border-color: var(--moss); }
.swap-in input { border: 0; font: 600 22px var(--mono); padding: 12px; }
.swap-in input:focus { outline: none; }
.swap-in span { font-weight: 800; color: var(--ink-2); white-space: nowrap; }
.swap-quote { min-height: 48px; margin: 14px 0; font-size: 15px; color: var(--ink-2); }
.swap-quote b { color: var(--ink); }
#swapGo { width: 100%; }

/* the Shell Vault */
.vault { background: var(--paper); }
.vault-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; margin-top: 36px; align-items: start; }
.vault-copy p { font-size: 18px; line-height: 1.65; }
.vault-copy a, .lane-copy a { color: inherit; font-weight: 700; }
.vault-stats { font: 400 clamp(19px, 1.9vw, 23px)/1.5 var(--display) !important; margin-top: 26px; }
.vault-stats b { font-weight: 800; color: var(--moss-d); }
.shell-card { padding: 26px; }
.sc-empty { text-align: center; color: var(--ink-2); }
.sc-empty div { width: 170px; margin: 0 auto 6px; }
.sc-empty svg { width: 100%; height: auto; }
.sc-who { font: 500 13px var(--mono); color: var(--ink-2); margin-bottom: 10px; }
.sc-line { font: 400 20px/1.45 var(--display); margin-bottom: 14px; }
.sc-line b { font-weight: 800; }
.sc-eth { color: var(--clay); }
.sc-act { display: grid; gap: 16px; margin-top: 22px; padding-top: 20px; border-top: 1.5px dashed var(--line); }
.sc-act label { display: grid; gap: 8px; font-weight: 800; font-size: 15px; }
.sc-act label .muted { font-weight: 600; }
.sc-row { display: flex; gap: 10px; align-items: center; }
.sc-row .linkish { margin: 0; }
#vClaim { justify-self: start; }
@media (max-width: 960px) { .vault-grid { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .sc-row { flex-wrap: wrap; } }

/* ---------------- motion: slow on purpose ---------------- */
/* hero entrance */
.hero h1 .ch { display: inline-block; animation: rise 1.3s cubic-bezier(.2, .7, .2, 1) backwards calc(.25s + var(--i) * .13s); }
.hero-copy > :not(h1) { animation: fade-up 1.4s cubic-bezier(.2, .7, .2, 1) backwards; }
.hero-copy > .eyebrow { animation-delay: .1s; }
.hero-copy > .lede { animation-delay: 1.2s; }
.hero-copy > .cta { animation-delay: 1.6s; }
.hero-copy > .fine { animation-delay: 2s; }
/* the hero snail is rigid: one solid body gliding in at a constant pace, nothing bends or sways */
.hero-snail { animation: crawl-in 3.4s linear backwards .3s; }
.slime-ground { animation: shimmer 12s linear infinite, grow 3.4s linear backwards .3s; }
.hero .hero-snail svg .stalks, .hero .hero-snail svg .eyes { animation: none; }
.bubble { transform-origin: 20% 120%; animation: pop 1s cubic-bezier(.3, 1.5, .5, 1) backwards 3.6s; }
.sun { animation: breathe 14s ease-in-out infinite, sunrise 3s ease-out backwards; }
.hills path:last-child { animation: fade-up 1.6s ease-out backwards .1s; }

/* every snail's eye stalks sway a little */
svg .stalks, svg .eyes { transform-box: view-box; transform-origin: 338px 118px; animation: antenna 7s ease-in-out infinite; }

/* pollen drifting through the hero */
.pollen { position: absolute; bottom: 14%; width: var(--s); height: var(--s); border-radius: 50%; pointer-events: none; opacity: 0;
  background: radial-gradient(circle, #FFF8D6, #F2CF73 70%); box-shadow: 0 0 8px rgba(242, 207, 115, .7); animation: drift var(--d) linear infinite var(--delay); }

/* scroll reveals */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 1.3s ease, transform 1.5s cubic-bezier(.2, .7, .2, 1); }
.reveal.in { opacity: 1; transform: none; }
.section h2.reveal { transition-delay: .15s; }
.note.reveal { transform: translateY(60px) rotate(-6deg); transition-delay: .2s; }
.note.reveal.in { transform: rotate(-1.2deg); }
.note-snail.reveal { transform: translateX(-60px); transition-duration: 1.3s, 3s; }
.note-snail.reveal.in { transform: none; }

/* highlights brush on, then the signature writes itself */
.reveal .mark { background-size: 0% 100%; background-repeat: no-repeat; transition: background-size 1.2s ease calc(1s + var(--m, 0) * .45s); }
.reveal.in .mark { background-size: 100% 100%; }
.note-sign span { clip-path: inset(-12px 100% -12px -12px); transition: clip-path 2s ease-in-out 2.8s; }
.note.in .note-sign span { clip-path: inset(-12px -12px -12px -12px); }

/* the tape measure pulls out, then the ranks drop onto it */
.tape-band { transform: scaleX(0); transform-origin: left; transition: transform 2.2s cubic-bezier(.3, .1, .2, 1) .3s; }
.tape-wrap.in .tape-band { transform: none; }
.tape-mark { opacity: 0; translate: 0 -14px; transition: opacity .9s ease calc(1s + var(--i) * .35s), translate 1.1s cubic-bezier(.3, 1.4, .5, 1) calc(1s + var(--i) * .35s); }
.tape-mark.below { translate: 0 14px; }
.tape-wrap.in .tape-mark { opacity: 1; translate: 0 0; }
.tape-you { animation: glow 2.6s ease-in-out infinite; }

/* a fresh lookup draws its trail */
.result.fresh .trail-path { stroke-dasharray: 1; animation: draw 2.4s cubic-bezier(.3, .1, .2, 1) backwards .2s; }
.result.fresh .trail-svg > svg { animation: fade-in .8s ease backwards 2.3s; }
.result.fresh .res-rank { animation: fade-up 1s ease backwards .6s; }
.result.fresh .res-desc { animation: fade-up 1s ease backwards 1.6s; }
.result.fresh .res-race { animation: fade-up 1s ease backwards 2.2s; }

/* small touches */
.chip:hover .ico svg { animation: bob 1.6s ease-in-out infinite; }
.faq details[open] p { animation: fade-up .8s ease backwards; }

@keyframes rise { from { opacity: 0; transform: translateY(.45em) rotate(4deg); } }
@keyframes fade-up { from { opacity: 0; transform: translateY(18px); } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes crawl-in { from { opacity: 0; transform: translateX(-40%); } 30% { opacity: 1; } }
@keyframes grow { from { width: 0; } }
@keyframes pop { from { opacity: 0; transform: scale(.5); } }
@keyframes sunrise { from { opacity: 0; translate: 0 60px; } }
@keyframes antenna { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-4deg); } 62% { transform: rotate(3deg); } }
@keyframes drift { 0% { opacity: 0; transform: translate(0, 0); } 12% { opacity: .9; } 50% { transform: translate(22px, -170px); } 88% { opacity: .5; } 100% { opacity: 0; transform: translate(-12px, -340px); } }
@keyframes bob { 50% { transform: translateY(-3px) rotate(-1.5deg); } }
@keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes glow { 50% { box-shadow: 0 0 0 6px rgba(168, 207, 120, .45); } }

/* ---------------- more motion ---------------- */
/* hero parallax: --mx/--my follow the cursor, --sy is scroll */
.hero-art { translate: 0 calc(var(--sy, 0) * .16px); }
.sun { translate: calc(var(--mx, 0) * -26px) calc(var(--my, 0) * -16px); }
.hills { translate: calc(var(--mx, 0) * 10px) 0; }
.hero-snail { translate: calc(var(--mx, 0) * -12px) calc(var(--my, 0) * -5px); }
.bubble { translate: calc(var(--mx, 0) * -20px) calc(var(--my, 0) * -10px); }
.cloud { position: absolute; left: -30%; width: 130px; height: 38px; border-radius: 40px; background: rgba(255, 253, 244, .85); scale: var(--sc);
  animation: cloud var(--d) linear infinite var(--delay); translate: calc(var(--mx, 0) * -34px) 0; filter: blur(.4px); }
.cloud::before, .cloud::after { content: ''; position: absolute; background: inherit; border-radius: 50%; }
.cloud::before { width: 56px; height: 56px; left: 22px; top: -26px; }
.cloud::after { width: 42px; height: 42px; left: 64px; top: -16px; }
.grass { position: absolute; left: -2%; right: -2%; bottom: -2px; height: 40px; pointer-events: none; translate: calc(var(--mx, 0) * 16px) 0; }
.grass i { position: absolute; bottom: 0; width: 4px; border-radius: 4px 4px 0 0; background: linear-gradient(#9CC56C, #5E7D3C); transform-origin: 50% 100%;
  rotate: var(--tilt); animation: blade 4.5s ease-in-out infinite var(--delay); }

/* eyes follow the cursor */
.eyes-track .hero-snail .pupil, .eyes-track .note-snail .pupil { animation: none; transition: transform .7s cubic-bezier(.2, .7, .2, 1); }

/* poked: he tucks into his shell */
.hero-snail svg > :not(.shell):not(defs):not(ellipse:first-of-type) { transform-box: view-box; transform-origin: 200px 190px; transition: transform .9s cubic-bezier(.5, 0, .2, 1), opacity .7s; }
.hero-snail.hide svg > :not(.shell):not(defs):not(ellipse:first-of-type) { transform: scale(.25); opacity: 0; animation: none; }
.hero .hero-snail:not(.hide) svg > .stalks, .hero .hero-snail:not(.hide) svg > .eyes { transform-origin: 338px 118px; }

/* scroll progress: a slime trail with Slowmo at the tip */
.scroll-trail { position: fixed; right: 14px; top: 92px; bottom: 64px; width: 6px; border-radius: 6px; background: rgba(40, 51, 31, .08); z-index: 35; pointer-events: none; }
.st-fill { width: 100%; height: calc(var(--k, 0) * 100%); border-radius: 6px; background: linear-gradient(#BDEFD2, #CFE3FF, #E7D3FF); background-size: 100% 300%; animation: shimmer-v 10s linear infinite; }
.st-snail { position: absolute; left: 50%; top: calc(var(--k, 0) * 100%); width: 44px; transform: translate(-50%, -40%) rotate(90deg); transition: top .3s ease-out; }
.st-snail svg { width: 100%; height: auto; display: block; }

.nav { transition: padding .8s ease, box-shadow .8s ease; }
.nav.scrolled { padding-top: 6px; padding-bottom: 6px; box-shadow: 0 8px 24px -18px rgba(40, 51, 31, .5); }
.nav.scrolled .brand-snail { animation: bob 2.4s ease-in-out infinite; }

/* falling leaves */
.leaves { position: fixed; inset: 0; pointer-events: none; z-index: 20; overflow: hidden; }
.leaf { position: absolute; top: -50px; width: var(--s); opacity: .8; animation: fall var(--d) linear infinite var(--delay); }
.leaf svg { width: 100%; height: auto; display: block; }

/* headings rise word by word */
.section h2.reveal.words { opacity: 1; transform: none; }
.words .w { display: inline-block; overflow: hidden; padding-bottom: .14em; margin-bottom: -.14em; vertical-align: top; }
.words .w > span { display: inline-block; transform: translateY(115%) rotate(7deg); transform-origin: 0 100%; transition: transform 1.2s cubic-bezier(.2, .7, .2, 1) calc(.1s + var(--i) * .09s); }
.words.in .w > span { transform: none; }

/* slime splash on click */
.splash { position: fixed; z-index: 70; pointer-events: none; width: 0; height: 0; }
.splash::before { content: ''; position: absolute; left: -24px; top: -24px; width: 48px; height: 48px; border-radius: 50%; border: 3px solid #BDEFD2; animation: ring 1.1s ease-out forwards; }
.splash i { position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; border-radius: 50%; background: linear-gradient(#BDEFD2, #E7D3FF); animation: droplet 1.2s cubic-bezier(.2, .7, .2, 1) forwards; }

/* slowly turning shell spirals in the background */
.trail, .memes { position: relative; overflow: hidden; }
.trail > .wrap, .memes > .wrap { position: relative; z-index: 1; }
.bg-spiral { position: absolute; right: -160px; top: 40px; width: 560px; color: rgba(94, 125, 60, .09); animation: spin 160s linear infinite; pointer-events: none; }
.bg-spiral.alt { right: auto; left: -200px; top: auto; bottom: -120px; animation-direction: reverse; color: rgba(169, 101, 47, .08); }
.bg-spiral svg { width: 100%; height: auto; display: block; }

/* race extras: the checkered flag ripples, the pack kicks up sparkles */
.finish { animation: flag 3s linear infinite; }
.racer.pack::before, .racer.pack::after { content: ''; position: absolute; left: 4%; bottom: 10%; width: 7px; height: 7px; border-radius: 50%; background: #E7D3FF; animation: sparkle 2.4s ease-out infinite; }
.racer.pack::after { left: 18%; background: #BDEFD2; animation-delay: -1.2s; }

/* meme preview floats, and squishes on change */
.canvas-wrap { animation: float 7s ease-in-out infinite; }
.squish { animation: squish .8s cubic-bezier(.3, 1.6, .5, 1); }

@keyframes cloud { to { left: 110%; } }
@keyframes blade { 50% { rotate: calc(var(--tilt) + 9deg); } }
@keyframes wobble { 25% { transform: rotate(-6deg); } 75% { transform: rotate(6deg); } }
@keyframes shimmer-v { to { background-position: 0 300%; } }
@keyframes fall {
  0% { transform: translate(0, 0) rotate(0); }
  25% { transform: translate(var(--sw), 28vh) rotate(80deg); }
  50% { transform: translate(calc(var(--sw) * -1), 56vh) rotate(170deg); }
  75% { transform: translate(var(--sw), 84vh) rotate(260deg); }
  100% { transform: translate(0, 112vh) rotate(360deg); }
}
@keyframes ring { from { transform: scale(.2); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }
@keyframes droplet { 0% { transform: rotate(var(--a)) translateX(0) scale(1); opacity: 1; } 100% { transform: rotate(var(--a)) translateX(38px) scale(.3); opacity: 0; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes flag { to { background-position: 0 36px; } }
@keyframes sparkle { 0% { transform: translate(0, 0) scale(1); opacity: .9; } 100% { transform: translate(-26px, -30px) scale(.2); opacity: 0; } }
@keyframes float { 50% { translate: 0 -8px; } }
@keyframes squish { 0% { transform: scale(.93, 1.05); } 100% { transform: none; } }
@media (max-width: 760px) {
  .scroll-trail { right: 6px; width: 4px; }
  .st-snail { width: 32px; }
  .bg-spiral { width: 380px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0s !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .01s !important; transition-delay: 0s !important; }
  .pollen { display: none; }
}
@media (max-width: 960px) {

  .trail-grid, .studio, .token-grid, .note-wrap { grid-template-columns: 1fr; }
  .note-wrap { gap: 28px; }
  .note-snail { display: none; }
}
@media (max-width: 760px) {
  .nav-links { display: none; }
  .nav .btn { margin-left: auto; }
  .hero { grid-template-columns: 1fr; min-height: 0; padding-top: 28px; }
  .hero-art { max-width: 520px; justify-self: center; }
  .section { padding: 72px 0; }
  .wrap { padding: 0 16px; }
  .board-list li { grid-template-columns: 28px 1fr 80px; }
  .board-list .bar-slot { display: none; }
}
@media (max-width: 520px) {

  .bubble { left: 30%; font-size: 16px; }
  .lookup-row { flex-direction: column; }
  .note { padding: 34px 22px 28px 46px; font-size: 17px; background-position: 0 0, 0 27px; background-image: linear-gradient(90deg, transparent 30px, rgba(212, 151, 79, .45) 30px 32px, transparent 32px), repeating-linear-gradient(transparent 0 33px, rgba(94, 125, 60, .14) 33px 34px); }
  .race-copy { font-size: 18px; }
}