:root {
  --bg: #fff; --panel: #fff; --ink: #0f0f14; --soft: #62626e; --faint: #9c9ca8; --line: #ececf1; --hover: #f6f6fa;
  --grad: linear-gradient(100deg, #7f8cf0 0%, #9456ea 28%, #e4478f 62%, #ef8a3c 100%); --accent: #9456ea;
  --out: cubic-bezier(.22, 1, .36, 1); --spring: cubic-bezier(.32, .72, 0, 1);
  --sans: Geist, system-ui, -apple-system, sans-serif; --mono: "Geist Mono", ui-monospace, monospace;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { font-size: 62.5%; overflow-x: clip; background: var(--bg); scroll-padding-top: 9rem; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 1.5rem/1.5 var(--sans); -webkit-font-smoothing: antialiased; min-height: 100svh; display: flex; flex-direction: column; overflow-x: clip; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-weight: 600; letter-spacing: -.025em; }
button, input, textarea { font: inherit; color: inherit; }

.nav { position: sticky; z-index: 10; top: 1.2rem; display: flex; align-items: center; gap: 1.2rem; width: min(112rem, calc(100% - 2.4rem)); height: 6rem; margin: 1.2rem auto 0; padding: 0 1rem 0 2rem; border-radius: 99rem; background: rgba(255, 255, 255, .42); -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6), inset 0 1px 0 rgba(255, 255, 255, .85), 0 10px 34px -14px rgba(60, 40, 120, .28); }
.brand { display: flex; align-items: center; gap: .9rem; font-weight: 600; font-size: 1.7rem; letter-spacing: -.02em; }
.mark { width: 2.8rem; height: 1.8rem; }
.nav-mid { display: flex; gap: .4rem; margin-right: auto; margin-left: 1.6rem; }
.nav-mid a { padding: .6rem 1.2rem; border-radius: 99rem; color: var(--ink); font-weight: 500; transition: background-color .2s; }
.nav-mid a:hover, .nav-mid a[aria-current] { background: rgba(255, 255, 255, .55); }
.icon { display: grid; place-items: center; width: 3.8rem; height: 3.8rem; border-radius: 50%; color: var(--ink); transition: background-color .2s; }
.icon:hover { background: rgba(255, 255, 255, .55); }

/* buttons: the label rolls, the fill grows from the cursor, the press has a spring */
.btn { --x: 50%; --y: 50%; position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; height: 4.8rem; padding: 0 2.4rem; border: 0; border-radius: 99rem; background: var(--ink); color: #fff; font-weight: 500; font-size: 1.5rem; cursor: pointer; white-space: nowrap; transition: transform .5s var(--spring), box-shadow .4s var(--out), color .3s; will-change: transform; }
.btn::before { content: ""; position: absolute; z-index: -1; left: var(--x); top: var(--y); width: 1.2rem; height: 1.2rem; margin: -.6rem; border-radius: 50%; background: radial-gradient(circle, #ef8a3c 0%, #e4478f 40%, #9456ea 75%, #7f8cf0 100%); transform: scale(0); transition: transform .65s var(--out); }
.btn:hover:not(:disabled)::before { transform: scale(46); }
.btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 12px 26px -14px rgba(148, 86, 234, .75); }
.btn:active:not(:disabled) { transform: scale(.955); transition-duration: .12s; }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.btn:disabled { background: var(--line); color: var(--faint); cursor: not-allowed; }
.btn-t { position: relative; display: inline-block; overflow: hidden; line-height: 1.3; }
.btn-t > span { display: block; transition: transform .5s var(--spring); }
.btn-t::after { content: attr(data-t); position: absolute; left: 0; right: 0; top: 100%; text-align: center; transition: transform .5s var(--spring); }
.btn:hover:not(:disabled) .btn-t > span, .btn:hover:not(:disabled) .btn-t::after { transform: translateY(-100%); }
.btn.ghost { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.btn.ghost:hover:not(:disabled) { color: #fff; box-shadow: 0 12px 26px -14px rgba(20, 18, 15, .5); }
.btn.glass { background: #fff; color: var(--ink); }
.btn.glass:hover:not(:disabled) { color: #fff; }
.btn.glass.clear { background: rgba(255, 255, 255, .2); color: #fff; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5); }
.btn.small { height: 4rem; padding: 0 1.6rem; font-size: 1.4rem; }
.btn.wide { width: 100%; }
.btn.line { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.btn.line:hover:not(:disabled) { color: #fff; }
.row { display: flex; gap: .8rem; flex-wrap: wrap; }

.hero { position: relative; min-height: 100svh; margin-top: -8rem; display: grid; place-items: center; overflow: hidden; text-align: center; padding: 12rem 2.4rem 9rem; background: #fff; }
/* drawn once on a canvas, so it looks right with nothing animating */
.field { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-text { position: relative; display: grid; justify-items: center; }
.hero h1 { color: #fff; font-size: clamp(3.8rem, 6.6vw, 8.4rem); line-height: 1.02; letter-spacing: -.035em; }
.hero p { margin: 2rem 0 3rem; font-size: 1.9rem; line-height: 1.35; max-width: 56rem; color: #fff; }

/* a mouse outline with its wheel rolling down */
.wheel { position: absolute; left: 50%; bottom: 2.4rem; width: 2.4rem; height: 3.8rem; margin-left: -1.2rem; border-radius: 1.2rem; box-shadow: inset 0 0 0 1.5px var(--faint); transition: box-shadow .3s var(--out), transform .5s var(--spring); }
.wheel:hover { box-shadow: inset 0 0 0 1.5px var(--ink); transform: translateY(2px); }
.wheel span { position: absolute; left: 50%; top: .8rem; width: .3rem; height: .8rem; margin-left: -.15rem; border-radius: .2rem; background: var(--soft); animation: wheel 1.9s var(--out) infinite; }
@keyframes wheel { 0% { transform: translateY(0); opacity: 0; } 25% { opacity: 1; } 70% { transform: translateY(1.2rem); opacity: 1; } 100% { transform: translateY(1.5rem); opacity: 0; } }

.ico { width: 3.2rem; height: 3.2rem; border-radius: 50%; background: var(--hover); flex: none; object-fit: cover; display: grid; place-items: center; font-size: 1.1rem; font-weight: 600; color: var(--soft); }

.band { padding: 11.2rem 2.4rem 0; max-width: 118rem; width: 100%; margin: 0 auto; }
.band-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1.6rem; margin-bottom: 2rem; }
.band-head p, .more { color: var(--soft); font-size: 1.4rem; }
.more:hover { color: var(--ink); }
.band h2 { font-size: 3.2rem; line-height: 1.1; }

.tabs { display: flex; gap: .2rem; flex-wrap: wrap; margin-bottom: 1.6rem; }
.tabs button { height: 3.4rem; padding: 0 1.4rem; border-radius: 99rem; border: 0; background: none; color: var(--soft); cursor: pointer; font-weight: 500; font-size: 1.4rem; }
.tabs button { transition: color .2s, background-color .2s; }
.tabs button:hover { color: var(--ink); }
.tabs button[aria-pressed="true"] { background: var(--ink); color: #fff; }

.table { border-top: 1px solid var(--line); }
.thead, .trow { display: grid; gap: 1.6rem; align-items: center; padding: 0 .4rem; }
[data-page] .table .thead, [data-page] .table .trow { grid-template-columns: 2.2fr 1.3fr 1fr 1fr; }
.table[aria-label="board"] .thead, .table[aria-label="board"] .trow { grid-template-columns: 2.2fr 1.3fr 1fr 1fr 7.6rem; }
.thead { height: 4.4rem; color: var(--faint); font-size: 1.3rem; border-bottom: 1px solid var(--line); }
.thead span:nth-child(n+3), .trow > :nth-child(n+3) { text-align: right; }
.trow { min-height: 6.2rem; border-bottom: 1px solid var(--line); }
a.trow { transition: padding .35s var(--spring), background-color .2s; }
a.trow:hover { padding-left: 1.2rem; padding-right: 1.2rem; background: var(--hover); }
.cell-main { display: flex; align-items: center; gap: 1.2rem; min-width: 0; }
.cell-main div { min-width: 0; }
.cell-main b { display: block; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cell-main small { display: block; color: var(--faint); font-size: 1.3rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trow .num { font-family: var(--mono); font-size: 1.4rem; }
.trow .sub { color: var(--soft); }
.go { color: var(--soft); font-size: 1.4rem; font-weight: 500; }
a.trow:hover .go { color: var(--ink); }
.empty { padding: 2.4rem 2rem; color: var(--soft); }
.empty a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }

.facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4rem; padding-bottom: 2rem; }
.facts h3 { font-size: 1.7rem; margin-bottom: .6rem; letter-spacing: -.01em; }
.facts p { color: var(--soft); }

.page { flex: 1; padding: 5.6rem 2.4rem 0; max-width: 118rem; width: 100%; margin: 0 auto; }
.h-page { font-size: 3.6rem; line-height: 1.1; margin-bottom: 2.8rem; }
.h-card { font-size: 1.8rem; letter-spacing: -.015em; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; align-items: start; }
.card { padding: 2.4rem; border-radius: 2rem; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); display: grid; gap: 1.4rem; min-width: 0; }
.card label { display: grid; gap: .5rem; font-size: 1.4rem; font-weight: 500; }
.card input, .card textarea { width: 100%; padding: 1rem 1.2rem; border-radius: 1rem; border: 1px solid var(--line); background: var(--bg); resize: vertical; font-size: 1.5rem; font-weight: 400; }
.card input:focus, .card textarea:focus { outline: none; border-color: var(--ink); }
.card input::placeholder, .card textarea::placeholder { color: var(--faint); }
.drop { place-items: center; width: 11rem; height: 11rem; border-radius: 1.4rem; border: 1px dashed var(--faint); cursor: pointer; overflow: hidden; color: var(--soft); text-align: center; }
.drop:hover { background: var(--hover); }
.drop img { width: 100%; height: 100%; object-fit: cover; display: block; }
.picker { display: grid; gap: .2rem; max-height: 32rem; overflow-y: auto; }
.opt { display: flex; align-items: center; gap: 1.1rem; width: 100%; padding: .8rem 1rem; border: 0; border-radius: 1rem; background: none; cursor: pointer; text-align: left; }
.opt:hover { background: var(--hover); }
.opt[aria-pressed="true"] { background: var(--ink); color: #fff; }
.opt[aria-pressed="true"] small, .opt[aria-pressed="true"] .val { color: #c9c4ba; }
.opt .grow { flex: 1; min-width: 0; }
.opt b { font-weight: 500; }
.opt small { display: block; color: var(--faint); font-size: 1.3rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.opt .val { font-family: var(--mono); font-size: 1.3rem; color: var(--soft); }
.sum, .note { color: var(--soft); font-size: 1.4rem; min-height: 2.1rem; }

.coin-head { display: flex; gap: 1.6rem; align-items: center; margin-bottom: 2.8rem; min-width: 0; }
.coin-head img, .coin-head .ico { width: 6.4rem; height: 6.4rem; border-radius: 1.4rem; font-size: 1.8rem; }
.coin-head h1 { font-size: clamp(2.6rem, 4vw, 3.6rem); line-height: 1.1; overflow-wrap: anywhere; }
.coin-head p { color: var(--soft); margin-top: .2rem; }
.stats { gap: 0; padding: .8rem 2.4rem; }
.stats > div { display: flex; justify-content: space-between; gap: 1.6rem; padding: 1.3rem 0; color: var(--soft); border-bottom: 1px solid var(--line); }
.stats > div:last-child { border-bottom: 0; }
.stats b { color: var(--ink); font-weight: 400; font-family: var(--mono); font-size: 1.4rem; text-align: right; overflow-wrap: anywhere; min-width: 0; }
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: .2rem; padding: .3rem; border-radius: 1.1rem; background: var(--hover); }
.seg.three { grid-template-columns: 1fr 1fr 1fr; }
.seg button { height: 3.8rem; border: 0; border-radius: .9rem; background: none; color: var(--soft); cursor: pointer; font-weight: 500; }
.seg button[aria-pressed="true"] { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.links { justify-content: flex-start !important; gap: 2rem !important; font-size: 1.4rem; font-weight: 500; }
.links a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line); }

.foot { margin-top: 11.2rem; padding: 2.8rem max(2.4rem, calc((100vw - 118rem) / 2 + 2.4rem)); border-top: 1px solid var(--line); display: flex; align-items: center; gap: 2.4rem; color: var(--soft); font-size: 1.3rem; }
.foot p { flex: 1; }
.foot-brand { display: flex; align-items: center; gap: .7rem; font-weight: 600; color: var(--ink); }
.foot a:hover { color: var(--ink); }
.toast { position: fixed; z-index: 30; left: 50%; bottom: 2.4rem; transform: translate(-50%, 1.6rem); max-width: min(52rem, calc(100vw - 3.2rem)); padding: 1.1rem 1.6rem; border-radius: 1.2rem; background: var(--ink); color: #fff; opacity: 0; pointer-events: none; transition: .2s; }
.toast.on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.toast a { text-decoration: underline; }
.sheet { position: fixed; z-index: 20; inset: 0; display: grid; place-items: center; padding: 1.6rem; background: rgba(20, 18, 15, .45); }
.sheet-card { width: min(38rem, 100%); padding: 2rem; border-radius: 1.6rem; background: var(--panel); display: grid; gap: .8rem; }
.sheet-card h3 { font-size: 1.8rem; display: flex; justify-content: space-between; align-items: center; margin-bottom: .6rem; }
.x-btn { border: 0; background: none; cursor: pointer; font-size: 2.2rem; line-height: 1; color: var(--soft); }
.wallet { display: flex; align-items: center; gap: 1rem; width: 100%; height: 5.2rem; padding: 0 1.2rem; border: 1px solid var(--line); border-radius: 1.2rem; background: none; cursor: pointer; font-weight: 500; }
.wallet:hover { background: var(--hover); }
.wallet img, .wf { width: 2.8rem; height: 2.8rem; border-radius: .7rem; display: grid; place-items: center; background: var(--hover); }

/* lenis owns the wheel; sections ease in once */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: clip; }
.will-rise { opacity: 0; transform: translateY(2.4rem); transition: opacity .9s var(--out), transform 1.1s var(--out); }
.will-rise.has-risen { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .will-rise { opacity: 1; transform: none; transition: none; }
  .wheel span { animation: none; opacity: 1; }
  .btn, .btn::before, .btn-t > span, .btn-t::after { transition: none; }
}
@media (hover: none) { .btn:hover:not(:disabled)::before { transform: scale(0); } .btn:hover:not(:disabled) { color: inherit; transform: none; box-shadow: none; } }

@media (max-width: 900px) {
  .facts { grid-template-columns: 1fr; gap: 2rem; }
  .split { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .nav { padding: 0 .7rem 0 1.4rem; gap: .4rem; height: 5.4rem; }
  .icon { display: none; }
  .brand span { display: none; }
  .nav-mid { margin-left: 0; }
  .nav-mid a { padding: .6rem .8rem; }
  .hero { padding: 11rem 1.6rem 8rem; }
  .hero p { font-size: 1.7rem; max-width: 28rem; }
  .band, .page { padding-left: 1.6rem; padding-right: 1.6rem; }
  .band { padding-top: 5.6rem; }
  .table .thead span:nth-child(2), .table .trow > :nth-child(2) { display: none; }
  [data-page] .table .thead, [data-page] .table .trow { grid-template-columns: 1fr auto auto; padding: 0 1.4rem; gap: 1.2rem; }
  .table[aria-label="board"] .thead, .table[aria-label="board"] .trow { grid-template-columns: 1fr auto auto; }
  .table .thead span:last-child:empty, .go { display: none; }
  .foot { flex-direction: column; align-items: flex-start; gap: 1rem; }
}