/* Heirs: black glass, lit by the OGs' own colours. One material (liquid glass) for every surface; BNB gold only for the
   action and for what burns. Funnel Display for headlines and big numbers, Geist for the interface.
   Real refraction is added by lib.js where the browser supports it; this file is the frosted version everyone gets. */
:root {
  --ink: #f5f5f7; --ink-2: rgba(235, 235, 245, .66); --ink-3: rgba(235, 235, 245, .5);
  --hair: rgba(255, 255, 255, .08);
  --gold: #f0b90b; --gold-2: #fcd535; --gold-ink: #1a1200;
  --up: #30d158; --down: #ff453a;
  --well: rgba(0, 0, 0, .34);
  --r-xl: 32px; --r-l: 24px; --r-m: 16px; --r-s: 12px;
  --display: "Funnel Display", "Geist", system-ui, sans-serif;
  --sans: "Geist", system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, monospace;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --spring: cubic-bezier(.34, 1.5, .64, 1);
  --wrap: min(1200px, calc(100% - 48px));
}
* { box-sizing: border-box; margin: 0; }
[hidden] { display: none !important; }
html { background: #000; color-scheme: dark; }
body { position: relative; min-height: 100vh; overflow-x: clip; color: var(--ink); font: 15px/1.5 var(--sans); -webkit-font-smoothing: antialiased; visibility: visible; animation: none; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
img { display: block; }
::selection { background: rgba(240, 185, 11, .35); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 3px; }
strong, dd, .num, time { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--mono); font-size: .92em; }
h1, h2, h3 { font-family: var(--display); font-weight: 600; letter-spacing: -.03em; line-height: 1.05; }
.sub { color: var(--ink-2); }
.muted { color: var(--ink-3); }
.up { color: var(--up); } .down { color: var(--down); }

/* ---- the material ---------------------------------------------------------------------------------------------- */
/* Glass: a thin tinted fill, a frosted backdrop, and a rim of light that is brightest where light would hit first. */
:where(.top, .tabbar, .walletmenu, .panel, .plate, .tabs, .sides, .steps, .filters button, .btn.line, .totals a, .log li,
  .stats4 > div, .doc, .docnav, .pick button, .copy, .hostchip, .links a, .presets button, .toast, .lane, .status, .ep) {
  --fill: linear-gradient(180deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .03));
  position: relative;
  background: var(--fill);
  -webkit-backdrop-filter: blur(var(--blur, 22px)) saturate(var(--sat, 1.45));
  backdrop-filter: blur(var(--blur, 22px)) saturate(var(--sat, 1.45));
}
:where(.top, .tabbar, .walletmenu, .panel, .plate, .tabs, .sides, .steps, .filters button, .btn.line, .totals a, .log li,
  .stats4 > div, .doc, .docnav, .pick button, .copy, .hostchip, .links a, .presets button, .toast, .lane, .status, .ep)::before {
  content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(165deg, rgba(255, 255, 255, var(--rim, .3)), rgba(255, 255, 255, .07) 26%, rgba(255, 255, 255, .025) 62%, rgba(255, 255, 255, calc(var(--rim, .3) * .55)));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}

/* the page is lit by its coins: their pictures, blurred far past recognition, behind the glass */
.ambient { position: absolute; inset: 0 0 auto; z-index: -1; height: 1100px; overflow: hidden; pointer-events: none;
  -webkit-mask: linear-gradient(#000 35%, transparent); mask: linear-gradient(#000 35%, transparent); }
.ambient > div { position: absolute; inset: -12% -8% 0; filter: blur(110px) saturate(1.5); opacity: var(--glow, .5); animation: amb-in 1.2s var(--ease) both; }
.ambient img { position: absolute; aspect-ratio: 1; border-radius: 50%; object-fit: cover; }
@keyframes amb-in { from { opacity: 0; } }

/* ---- type marks ------------------------------------------------------------------------------------------------ */
.crown { display: inline-block; width: 1em; height: 1em; color: var(--gold); flex: none; }
.crown svg { width: 100%; height: 100%; display: block; }
.mark { display: inline-flex; align-items: center; gap: 9px; font: 600 21px/1 var(--display); letter-spacing: -.03em; }
.mark .crown { font-size: 22px; filter: drop-shadow(0 0 14px rgba(240, 185, 11, .45)); }

/* ---- buttons --------------------------------------------------------------------------------------------------- */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 20px; border: 0; border-radius: 999px;
  font-weight: 600; font-size: 14.5px; letter-spacing: -.01em; white-space: nowrap; transition: transform .25s var(--spring), box-shadow .25s, filter .2s; }
.btn:active { transform: scale(.97); }
.btn.gold, .btn.buy, .btn.sell { --c1: #ffdc5e; --c2: var(--gold); --c3: #d9a200; --glowc: rgba(240, 185, 11, .5); color: var(--gold-ink);
  background: linear-gradient(180deg, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0) 52%), linear-gradient(180deg, var(--c1), var(--c2) 52%, var(--c3));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .65), inset 0 -1px 1px rgba(0, 0, 0, .2), 0 10px 32px -10px var(--glowc), 0 0 0 .5px rgba(0, 0, 0, .4); }
.btn.gold:hover, .btn.buy:hover, .btn.sell:hover { filter: brightness(1.06); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .65), inset 0 -1px 1px rgba(0, 0, 0, .2), 0 14px 40px -10px var(--glowc), 0 0 0 .5px rgba(0, 0, 0, .4); }
.btn.buy { --c1: #6ff08e; --c2: var(--up); --c3: #1fae44; --glowc: rgba(48, 209, 88, .45); color: #022b0e; }
.btn.sell { --c1: #ff8a80; --c2: var(--down); --c3: #d42a20; --glowc: rgba(255, 69, 58, .45); color: #330400; }
.btn.line { --rim: .34; color: var(--ink); box-shadow: 0 8px 24px -14px rgba(0, 0, 0, .8); }
.btn.line:hover { --fill: linear-gradient(180deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .06)); }
.btn.block { width: 100%; height: 54px; font-size: 16px; }
.btn.sm { height: 36px; padding: 0 14px; font-size: 13.5px; }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; filter: saturate(.6); }

/* ---- panels ---------------------------------------------------------------------------------------------------- */
.panel { padding: 24px; border-radius: var(--r-l); box-shadow: 0 30px 70px -40px rgba(0, 0, 0, .9); }
.panel.gilt { --rim: .42; --fill: linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .035)); border-radius: var(--r-xl); }
.panel h2 { font-size: 21px; }
.eyebrow { font-size: 13px; font-weight: 600; color: var(--ink-2); }

/* ---- shell: a floating glass bar, and a glass tab bar on phones ---------------------------------------------------- */
.main { min-height: 100vh; }
.top { position: sticky; top: 14px; z-index: 20; display: flex; align-items: center; gap: 8px; width: var(--wrap); height: 62px; margin: 14px auto 0; padding: 0 9px 0 20px; border-radius: 31px;
  --fill: linear-gradient(180deg, rgba(34, 34, 38, .66), rgba(14, 14, 16, .6)); --blur: 20px; --sat: 2; --rim: .26;
  box-shadow: 0 20px 50px -20px rgba(0, 0, 0, .95), 0 0 0 .5px rgba(0, 0, 0, .7); }
.top .navlinks { display: flex; gap: 2px; margin-left: 22px; position: relative; padding: 4px; }
.top .navlinks a { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; border-radius: 18px; color: var(--ink-2); font-size: 14px; font-weight: 500; transition: color .2s; }
.top .navlinks a:hover, .top .navlinks a[aria-current="page"] { color: var(--ink); }
.top .navlinks a svg { display: none; width: 18px; height: 18px; }
.top .navlinks a.xlink svg { display: block; width: 16px; height: 16px; }
.top .navlinks a.xlink span { display: none; }
svg.ico { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.top .navlinks .thumb { border-radius: 18px; background: rgba(255, 255, 255, .1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12); }
.search { position: relative; width: 250px; margin-left: auto; }
.search svg { position: absolute; left: 14px; top: 50%; z-index: 1; width: 16px; height: 16px; translate: 0 -50%; fill: none; stroke: var(--ink-3); stroke-width: 1.8; stroke-linecap: round; pointer-events: none; }
.search input { width: 100%; height: 42px; padding: 0 16px 0 40px; border: 0; border-radius: 21px; background: var(--well); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07), inset 0 1px 2px rgba(0, 0, 0, .4); font-size: 14px; outline: none; transition: box-shadow .2s, width .35s var(--ease); }
.search input:focus { box-shadow: inset 0 0 0 1px rgba(252, 213, 53, .55), 0 0 0 4px rgba(240, 185, 11, .12); }
.search input::placeholder { color: var(--ink-3); }
.search input::-webkit-search-cancel-button { filter: grayscale(1) brightness(1.6); }
.walletbtn { gap: 10px; }
.walletbtn .dim { color: var(--ink-3); font-weight: 500; }
.walletmenu { position: absolute; right: 0; top: calc(100% + 10px); display: grid; min-width: 210px; padding: 6px; border-radius: 22px;
  --fill: linear-gradient(180deg, rgba(40, 40, 44, .72), rgba(22, 22, 24, .72)); --blur: 26px; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .9);
  transform-origin: top right; animation: pop .3s var(--spring); }
@keyframes pop { from { opacity: 0; scale: .92; } }
.walletmenu button { height: 42px; padding: 0 14px; border: 0; border-radius: 16px; background: none; text-align: left; font-weight: 500; }
.walletmenu button:hover { background: rgba(255, 255, 255, .08); }
.tabbar { display: none; }
.page { width: var(--wrap); margin: 0 auto; padding: 40px 0 96px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }

/* sliding glass thumb inside segmented controls; it stretches as it travels, like a drop */
.thumb { position: absolute; left: 0; top: 0; z-index: 0; opacity: 0; pointer-events: none; transition: transform .5s var(--spring), width .5s var(--spring), opacity .2s; }
.thumb.squish { animation: squish .5s var(--ease); }
@keyframes squish { 35% { scale: 1.1 .84; } }

/* ---- notes + toast --------------------------------------------------------------------------------------------- */
.note { display: flex; gap: 10px; padding: 12px 16px; border-radius: 16px; background: rgba(255, 255, 255, .06); font-size: 14px; line-height: 1.45; }
.note.err { background: rgba(255, 69, 58, .12); color: #ffb4ae; }
.note.ok { background: rgba(48, 209, 88, .12); color: #a6f0b8; }
.note.info { background: rgba(240, 185, 11, .1); color: #fbe39a; }
.toast { position: fixed; left: 50%; bottom: 28px; z-index: 50; translate: -50% 0; max-width: min(92vw, 460px); border-radius: 20px; box-shadow: 0 24px 50px -10px rgba(0, 0, 0, .8); animation: pop .3s var(--spring); }

/* ---- small parts ----------------------------------------------------------------------------------------------- */
.meter { position: relative; display: block; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.meter i { position: absolute; inset: 0 auto 0 0; border-radius: 2px; background: linear-gradient(90deg, rgba(240, 185, 11, .55), var(--gold-2)); box-shadow: 0 0 10px rgba(252, 213, 53, .6); }
.meter.full i { background: linear-gradient(90deg, var(--gold), #fff3c4); }
.hostchip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px 0 3px; border-radius: 14px; font-size: 12.5px; font-weight: 600; --fill: rgba(20, 20, 22, .45); --blur: 14px; }
.hostchip img { width: 22px; height: 22px; border-radius: 50%; }
.copy { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 13px; border: 0; border-radius: 16px; font: 500 12.5px var(--mono); white-space: nowrap; }
.copy span { color: var(--ink-3); font-family: var(--sans); font-size: 13px; }
.copy:hover span { color: var(--gold-2); }

/* ---- hero: the crown of seven OGs --------------------------------------------------------------------------------- */
.hero { position: relative; display: grid; justify-items: center; text-align: center; padding: 34px 0 8px; }
.crown-row { --u: 1px; display: flex; align-items: flex-start; justify-content: center; gap: calc(var(--u) * 22); height: calc(var(--u) * 132); }
.crown-row .coin { --s: calc(var(--u) * (104 - var(--d) * 13)); position: relative; flex: none; width: var(--s); height: var(--s); margin-top: calc(var(--u) * var(--d) * var(--d) * 7); border-radius: 50%;
  box-shadow: 0 22px 34px -14px rgba(0, 0, 0, .95), 0 0 0 1px rgba(255, 255, 255, .08); transition: transform .5s var(--spring);
  animation: coin-in 1s var(--spring) both; animation-delay: calc(var(--d) * 90ms + 80ms); }
.crown-row .coin img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.crown-row .coin .dome { position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(58% 38% at 36% 17%, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 72%), radial-gradient(80% 50% at 50% 108%, rgba(255, 255, 255, .2), transparent 70%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .26), inset 0 -10px 18px -6px rgba(0, 0, 0, .55), inset 0 8px 14px -8px rgba(255, 255, 255, .5); }
.crown-row .coin::after { content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(70px circle at var(--mx, 50%) var(--my, 30%), rgba(255, 255, 255, .45), transparent 70%); mix-blend-mode: overlay; }
.crown-row .coin:hover, .crown-row .coin:focus-visible { transform: translateY(-8px) scale(1.07); }
.crown-row .coin:hover::after { opacity: 1; }
@keyframes coin-in { from { opacity: 0; translate: 0 34px; scale: .7; } }
.crown-cap { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 4px 18px; min-height: 22px; margin-top: 18px; font-size: 13.5px; color: var(--ink-2); animation: rise .8s var(--ease) .5s both; }
.crown-cap b { color: var(--ink); font-weight: 600; }
.crown-cap .burn { color: var(--gold-2); }
.hero h1 { max-width: 11ch; margin-top: 30px; font-size: clamp(46px, 7vw, 100px); line-height: .94; letter-spacing: -.05em; font-weight: 600;
  background: linear-gradient(180deg, #fff 45%, rgba(255, 255, 255, .78)); -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: rise 1s var(--ease) .25s both; }
.hero .lede { max-width: 54ch; margin-top: 24px; font-size: 17px; line-height: 1.55; color: var(--ink-2); animation: rise 1s var(--ease) .38s both; }
.hero .acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 32px; animation: rise 1s var(--ease) .5s both; }
.hero .acts .btn { height: 50px; padding: 0 24px; font-size: 15px; }
@keyframes rise { from { opacity: 0; translate: 0 14px; filter: blur(6px); } }

/* page heads for the inner pages (a smaller hero, left-aligned) */
.page-head h1 { font-size: clamp(36px, 4.6vw, 56px); letter-spacing: -.045em; }
.page-head .sub { max-width: 62ch; margin-top: 14px; font-size: 16px; }
.hero.left { justify-items: start; text-align: left; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 24px; padding: 8px 0 0; }
.hero.left h1 { margin-top: 0; max-width: none; font-size: clamp(44px, 6vw, 80px); }
.hero.left p { max-width: 60ch; margin-top: 14px; color: var(--ink-2); }
.hero.left .acts { margin: 0; justify-content: flex-end; }
.ogmark { width: 88px; height: 88px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(255, 255, 255, .14), 0 24px 40px -16px rgba(0, 0, 0, .9); margin-bottom: 22px; }

/* the 1% split, drawn to scale */
.split { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 4px; margin-top: 18px; }
.split div { display: grid; gap: 4px; align-content: start; min-width: 0; }
.split div::before { content: ""; height: 8px; margin-bottom: 10px; border-radius: 4px; background: rgba(255, 255, 255, .55); }
.split div:first-child::before { background: linear-gradient(90deg, var(--gold), var(--gold-2)); box-shadow: 0 0 18px rgba(240, 185, 11, .5); }
.split div:last-child::before { background: rgba(255, 255, 255, .22); }
.split b { font: 600 30px/1 var(--display); letter-spacing: -.03em; }
.split div:first-child b { color: var(--gold-2); }
.split span { font-size: 13px; color: var(--ink-2); }
.lane { width: 100%; padding: 28px 30px 30px; border-radius: var(--r-xl); text-align: left; box-shadow: 0 30px 70px -40px rgba(0, 0, 0, .9); }
.lane h2 { font-size: 22px; }
.lane > p { margin-top: 6px; color: var(--ink-2); font-size: 14px; }

/* ---- board: heirs ---------------------------------------------------------------------------------------------- */
.row-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.row-head h2 { font-size: 34px; letter-spacing: -.04em; }
.row-head a.muted:hover { color: var(--ink); }
.tabs, .sides, .steps { display: inline-flex; gap: 2px; padding: 4px; border-radius: 999px; --fill: rgba(255, 255, 255, .05); --blur: 16px; --rim: .2; }
.tabs button, .sides button, .steps button { position: relative; z-index: 1; height: 36px; padding: 0 16px; white-space: nowrap; border: 0; border-radius: 999px; background: none; color: var(--ink-2); font-size: 13.5px; font-weight: 600; transition: color .25s; }
.tabs button[aria-selected="true"], .steps button[aria-pressed="true"] { color: var(--ink); }
.tabs .thumb, .steps .thumb, .sides .thumb { border-radius: 999px; background: linear-gradient(180deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .1)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 4px 14px -4px rgba(0, 0, 0, .6); }
.filters { display: flex; flex-wrap: wrap; gap: 8px; }
.filters button { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 15px 0 5px; border: 0; border-radius: 19px; font-size: 13.5px; font-weight: 600; color: var(--ink-2); --rim: .22; transition: color .2s; }
.filters button.all { padding: 0 18px; }
.filters button img { width: 28px; height: 28px; border-radius: 50%; }
.filters button:hover { color: var(--ink); }
.filters button[aria-pressed="true"] { --fill: #f5f5f7; --rim: 0; color: #000; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(214px, 1fr)); gap: 18px; }
.card { position: relative; display: block; aspect-ratio: 4 / 5; border-radius: var(--r-l); overflow: hidden; isolation: isolate; background: #121214;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .07), 0 30px 50px -30px rgba(0, 0, 0, .95); transition: transform .5s var(--spring); }
.card:hover { transform: translateY(-4px); }
.card > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.card > img.noimg { object-fit: contain; padding: 30% 30% 50%; background: radial-gradient(60% 50% at 50% 35%, rgba(240, 185, 11, .16), transparent 70%); filter: drop-shadow(0 0 18px rgba(240, 185, 11, .35)); }
.card::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity .35s;
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 40%), rgba(255, 255, 255, .22), transparent 65%); mix-blend-mode: overlay; }
.card:hover::after { opacity: 1; }
.card .hostchip { position: absolute; top: 10px; left: 10px; z-index: 2; }
.card .plate { position: absolute; left: 8px; right: 8px; bottom: 8px; z-index: 2; display: grid; gap: 7px; padding: 12px 14px 14px; border-radius: calc(var(--r-l) - 8px);
  --fill: linear-gradient(180deg, rgba(18, 18, 20, .5), rgba(6, 6, 8, .74)); --blur: 16px; --sat: 1.5; --rim: .34; }
.card .name { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.card .name b { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 600; }
.card .name span { flex: 0 100 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-3); font-size: 12px; font-weight: 500; }
.card .name time { flex: none; margin-left: auto; color: var(--ink-3); font-size: 12px; }
.card .cap { display: flex; align-items: baseline; gap: 8px; }
.card .cap strong { font: 600 21px/1.1 var(--display); letter-spacing: -.03em; }
.card .cap small { font-size: 12.5px; font-weight: 600; text-shadow: 0 1px 6px rgba(0, 0, 0, .7); }
.card .cap small.up { color: #4ee07a; } .card .cap small.down { color: #ff6b62; }
.empty { padding: 72px 20px; border-radius: var(--r-l); text-align: center; color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--hair); }
.empty a { color: var(--gold-2); text-decoration: underline; text-underline-offset: 4px; }

/* ---- coin page ------------------------------------------------------------------------------------------------- */
.coinpage { grid-template-columns: minmax(0, 1fr) 372px; gap: 24px; align-items: start; }
.coin-main { display: grid; gap: 20px; min-width: 0; }
.coin-head { display: flex; align-items: center; gap: 20px; padding: 8px 0 6px; }
.coin-head > img { width: 92px; height: 92px; border-radius: 26px; object-fit: cover; box-shadow: 0 0 0 1px rgba(255, 255, 255, .14), 0 24px 40px -16px rgba(0, 0, 0, .9); }
.coin-head h1 { font-size: 44px; letter-spacing: -.045em; }
.coin-head h1 span { margin-left: 8px; font: 500 16px var(--sans); letter-spacing: 0; color: var(--ink-3); }
.coin-head p { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 10px; color: var(--ink-2); font-size: 14px; }
.price { display: flex; align-items: baseline; gap: 12px; }
.price strong { font: 600 40px/1 var(--display); letter-spacing: -.04em; }
.price span { font-size: 14px; font-weight: 600; }
.chartbox { position: relative; height: 380px; margin-top: 14px; }
.chart-empty { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; color: var(--ink-3); }
.steps { margin-top: 12px; }
.steps button { height: 30px; padding: 0 13px; font-size: 12.5px; }
.duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
.grad-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 16px; }
.grad-top h2 { font-size: 21px; }
.grad-top span { font: 600 21px var(--display); color: var(--gold-2); }
.prose { margin-top: 12px; color: var(--ink-2); font-size: 14.5px; white-space: pre-line; }
.burnlink { margin-top: 16px; font-size: 14px; color: var(--ink-2); }
.burnlink a { color: var(--gold-2); text-decoration: underline; text-underline-offset: 4px; }
.links { display: flex; flex-wrap: wrap; gap: 8px; }
.links a { display: inline-flex; align-items: center; height: 36px; padding: 0 16px; border-radius: 18px; font-size: 13.5px; font-weight: 600; color: var(--ink-2); --rim: .24; }
.links a:hover { color: var(--ink); }
.ticketbox { position: sticky; top: 96px; display: grid; gap: 16px; padding: 20px; }
.ticketbox > * { min-width: 0; }
.ticketbox h2 { font-size: 24px; }
.ticketbox::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .4s;
  background: radial-gradient(300px circle at var(--mx, 50%) var(--my, 0), rgba(255, 255, 255, .07), transparent 70%); }
.ticketbox:hover::after { opacity: 1; }
.sides { display: grid; grid-template-columns: 1fr 1fr; }
.sides button { height: 42px; font-size: 15px; }
.sides button[aria-pressed="true"] { color: #031a09; }
.sides[data-on="sell"] button[aria-pressed="true"] { color: #2a0300; }
.sides[data-on="buy"] .thumb { background: linear-gradient(180deg, #6ff08e, var(--up)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 6px 20px -6px rgba(48, 209, 88, .6); }
.sides[data-on="sell"] .thumb { background: linear-gradient(180deg, #ff8a80, var(--down)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 6px 20px -6px rgba(255, 69, 58, .6); }
.amount { display: flex; align-items: center; height: 72px; padding: 0 20px; border-radius: 22px; background: var(--well); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07), inset 0 2px 6px rgba(0, 0, 0, .45); transition: box-shadow .2s; }
.amount:focus-within { box-shadow: inset 0 0 0 1px rgba(252, 213, 53, .6), 0 0 0 4px rgba(240, 185, 11, .12); }
.amount input { flex: 1; width: 0; min-width: 0; border: 0; background: none; font: 600 32px var(--display); letter-spacing: -.03em; outline: none; font-variant-numeric: tabular-nums; }
.amount input::placeholder { color: rgba(235, 235, 245, .25); }
.amount span { font-size: 14px; font-weight: 600; color: var(--ink-3); }
.presets { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.presets button { height: 36px; border: 0; border-radius: 18px; font-size: 13px; font-weight: 600; color: var(--ink-2); --rim: .2; }
.presets button:hover { color: var(--ink); }
.est { display: grid; gap: 8px; font-size: 14px; }
.est div { display: flex; justify-content: space-between; gap: 16px; }
.est dt { color: var(--ink-3); }
.est dd { text-align: right; }
.passline { font-size: 12.5px; color: var(--ink-3); line-height: 1.5; }

/* ---- forms ----------------------------------------------------------------------------------------------------- */
.formpage { width: min(800px, calc(100% - 48px)); }
.form { display: grid; gap: 22px; padding: 30px; }
.form label { display: grid; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
.form input, .form textarea { width: 100%; padding: 14px 16px; border: 0; border-radius: 16px; background: var(--well); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07), inset 0 2px 6px rgba(0, 0, 0, .4);
  font-size: 15px; font-weight: 500; color: var(--ink); transition: box-shadow .2s; }
.form input::placeholder, .form textarea::placeholder { color: rgba(235, 235, 245, .3); }
.form input:focus, .form textarea:focus { outline: none; box-shadow: inset 0 0 0 1px rgba(252, 213, 53, .6), 0 0 0 4px rgba(240, 185, 11, .12); }
.form textarea { resize: vertical; }
.form .amount input { padding: 0; box-shadow: none; background: none; font-size: 26px; }
.form .amount { height: 60px; }
.form .opt { font-weight: 500; color: var(--ink-3); }
.pick { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.pick button { flex: 0 0 calc(25% - 7.5px); display: grid; justify-items: center; gap: 4px; padding: 18px 10px 16px; border: 0; border-radius: 22px; --rim: .22; transition: transform .4s var(--spring); }
.pick button:hover { transform: translateY(-2px); }
.pick button img { width: 52px; height: 52px; margin-bottom: 6px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 10px 20px -8px rgba(0, 0, 0, .8); }
.pick button b { font-size: 14.5px; }
.pick button small { color: var(--ink-3); font-size: 12.5px; }
.pick button[aria-pressed="true"] { --fill: linear-gradient(180deg, rgba(240, 185, 11, .2), rgba(240, 185, 11, .06)); --rim: .9; }
.pick button[aria-pressed="true"]::before { background: linear-gradient(165deg, var(--gold-2), rgba(240, 185, 11, .35) 40%, rgba(240, 185, 11, .6)); }
.who { display: grid; grid-template-columns: 156px minmax(0, 1fr); gap: 18px; }
.drop { display: grid; place-items: center; aspect-ratio: 1; border-radius: 26px; background: var(--well); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); outline: 1.5px dashed rgba(255, 255, 255, .16); outline-offset: -10px;
  cursor: pointer; overflow: hidden; text-align: center; color: var(--ink-2); font-size: 13.5px; transition: outline-color .2s; }
.drop:hover { outline-color: rgba(252, 213, 53, .5); }
.drop small { display: block; margin-top: 4px; padding: 0 14px; font-size: 11.5px; color: var(--ink-3); }
.drop img { width: 100%; height: 100%; object-fit: cover; }
.fields { display: grid; gap: 16px; align-content: start; }
.three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }

/* ---- text pages ------------------------------------------------------------------------------------------------ */
.textpage { width: min(1000px, calc(100% - 48px)); }
.totals { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.totals a { display: grid; grid-template-columns: 40px 1fr; gap: 2px 12px; align-items: center; padding: 16px; border-radius: 22px; --rim: .24; transition: transform .4s var(--spring); }
.totals a:hover { transform: translateY(-2px); }
.totals img { grid-row: span 2; width: 40px; height: 40px; border-radius: 50%; }
.totals span { font-size: 12.5px; color: var(--ink-3); }
.totals b { font: 600 22px/1.1 var(--display); letter-spacing: -.03em; color: var(--gold-2); }
.totals b.zero { color: var(--ink-3); }
.log { list-style: none; padding: 0; display: grid; gap: 8px; }
.log li { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto auto; gap: 16px; align-items: center; padding: 14px 18px; border-radius: 22px; --rim: .2; }
.log img { width: 40px; height: 40px; border-radius: 50%; }
.log .what { display: grid; min-width: 0; }
.log .what b { font-size: 15px; }
.log .what span { font-size: 13px; color: var(--ink-3); }
.log time { font-size: 13px; color: var(--ink-3); }
.log a.more { display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border-radius: 16px; background: rgba(255, 255, 255, .08); font-size: 13px; font-weight: 600; }
.log a.more:hover { background: rgba(255, 255, 255, .14); }
.log li.empty { display: block; box-shadow: none; }
.stats4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.stats4 > div { padding: 18px 20px; border-radius: 22px; --rim: .22; }
.stats4 dt { font-size: 13px; color: var(--ink-3); }
.stats4 dd { margin-top: 6px; font: 600 26px/1.1 var(--display); letter-spacing: -.03em; }
.status { display: inline-flex; align-items: center; gap: 10px; height: 50px; padding: 0 22px; border-radius: 999px; font-size: 15px; font-weight: 600; color: var(--gold-2); --rim: .3; }
.pulse { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--gold-2); box-shadow: 0 0 12px var(--gold); }
.pulse::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--gold-2); animation: pulse 2.2s var(--ease) infinite; }
@keyframes pulse { to { scale: 3.2; opacity: 0; } }

/* ---- docs ------------------------------------------------------------------------------------------------------ */
.docs { grid-template-columns: 210px minmax(0, 1fr); gap: 28px; }
.docnav { position: sticky; top: 96px; align-self: start; display: grid; gap: 2px; padding: 8px; border-radius: 24px; --rim: .2; }
.docnav a { padding: 9px 14px; border-radius: 16px; font-size: 14px; color: var(--ink-2); transition: color .2s, background .2s; }
.docnav a:hover { background: rgba(255, 255, 255, .07); color: var(--ink); }
.doc { max-width: 780px; min-width: 0; padding: 40px 44px 46px; border-radius: var(--r-xl); --rim: .26; }
.doc h1 { font-size: 48px; letter-spacing: -.045em; }
.doc section { padding-top: 36px; scroll-margin-top: 100px; }
.doc h2 { margin-bottom: 12px; font-size: 26px; letter-spacing: -.035em; }
.doc p, .doc li { font-size: 16px; line-height: 1.7; color: rgba(235, 235, 245, .78); max-width: 66ch; }
.doc p + p, .doc p + ol, .doc ol + p, .doc table + p, .doc p + table { margin-top: 14px; }
.doc ol { padding-left: 22px; display: grid; gap: 6px; }
.doc a { color: var(--gold-2); text-decoration: underline; text-decoration-color: rgba(252, 213, 53, .4); text-underline-offset: 4px; }
.doc code { padding: 2px 7px; border-radius: 7px; background: rgba(255, 255, 255, .08); font: 13px var(--mono); color: #fde68a; overflow-wrap: anywhere; }
.doc .eg { padding: 14px 18px; border-radius: 16px; background: rgba(240, 185, 11, .08); box-shadow: inset 0 0 0 1px rgba(240, 185, 11, .16); color: var(--ink-2); font-size: 14.5px; }
.dtable { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.dtable th { padding: 10px 12px; border-bottom: 1px solid var(--hair); text-align: left; font-size: 12.5px; font-weight: 600; color: var(--ink-3); }
.dtable td { padding: 12px; border-bottom: 1px solid var(--hair); vertical-align: top; color: rgba(235, 235, 245, .8); }
.dtable tr:last-child td { border-bottom: 0; }
.dtable code { white-space: nowrap; }
.ep { margin-top: 14px; padding: 16px 18px; border-radius: 20px; --rim: .18; }
.ep .row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ep pre { max-height: 340px; overflow: auto; margin-top: 12px; padding: 14px 16px; border-radius: 14px; background: rgba(0, 0, 0, .5); color: #e8e8ed; font: 12px/1.55 var(--mono); white-space: pre; }

/* ---- waiting page ---------------------------------------------------------------------------------------------- */
body.soon { display: grid; grid-template-rows: auto 1fr; }
.soon .top { position: relative; top: 0; }
.soon .top nav { display: flex; gap: 4px; margin-left: auto; }
.soon .top nav a:not(.btn) { display: inline-flex; align-items: center; height: 40px; padding: 0 14px; border-radius: 20px; color: var(--ink-2); font-size: 14px; font-weight: 500; }
.soon .top nav a:not(.btn):hover { color: var(--ink); }
.soon-main { width: var(--wrap); margin: 0 auto; padding: 40px 0 72px; display: grid; justify-items: center; gap: 64px; }
.soon-main .lane { max-width: 860px; animation: rise 1s var(--ease) .65s both; }
.soon-foot { color: var(--ink-3); font-size: 13px; text-align: center; }

@media (max-width: 1100px) {
  .coinpage { grid-template-columns: minmax(0, 1fr); }
  .ticketbox { position: static; }
  .top .navlinks a span { display: none; }
  .top .navlinks a svg { display: block; }
  .top .navlinks a { padding: 0 11px; }
  .search { width: 170px; }
}
@media (max-width: 900px) {
  :root { --wrap: calc(100% - 32px); }
  .top { top: 10px; height: 56px; margin-top: 10px; padding: 0 7px 0 16px; gap: 6px; }
  .top .navlinks, .top > .btn.gold { display: none; }
  .search { width: 42px; }
  .search input { cursor: pointer; padding: 0 0 0 42px; color: transparent; }
  .search input::placeholder { color: transparent; }
  .search:focus-within { position: absolute; inset: 7px; z-index: 3; width: auto; }
  .search:focus-within input { padding: 0 16px 0 40px; color: var(--ink); cursor: text; }
  .search:focus-within input::placeholder { color: var(--ink-3); }
  .walletbtn { height: 42px; padding: 0 16px; }
  .walletbtn .dim { display: none; }
  .main { padding-bottom: 96px; }
  .page { padding: 24px 0 40px; gap: 30px; }
  .hero { padding-top: 20px; }
  .crown-row { --u: .5px; gap: 7px; }
  .hero .lede { font-size: 16px; }
  .hero.left { grid-template-columns: 1fr; }
  .hero.left .acts { justify-content: flex-start; }
  .row-head h2 { font-size: 28px; }
  .tabs { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .tabs button { padding: 0 12px; }
  .filters { flex-wrap: nowrap; overflow-x: auto; margin-inline: -16px; padding: 2px 16px; scrollbar-width: none; }
  .filters button { flex: none; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .card { border-radius: 20px; }
  .card .plate { left: 6px; right: 6px; bottom: 6px; padding: 10px 11px 11px; border-radius: 14px; }
  .card .name time { display: none; }
  .card .cap strong { font-size: 17px; }
  .card .hostchip { top: 8px; left: 8px; height: 26px; font-size: 11.5px; }
  .card .hostchip img { width: 20px; height: 20px; }
  .coin-head > img { width: 72px; height: 72px; border-radius: 20px; }
  .coin-head h1 { font-size: 32px; }
  .price strong { font-size: 32px; }
  .chartbox { height: 300px; }
  .duo { grid-template-columns: minmax(0, 1fr); }
  .panel { padding: 20px; }
  .form { padding: 20px; }
  .who { grid-template-columns: 1fr; }
  .drop { max-width: 180px; }
  .three { grid-template-columns: 1fr; }
  .pick button { flex-basis: calc(50% - 5px); }
  .split b { font-size: 24px; }
  .lane { padding: 22px 20px 24px; }
  .stats4 { grid-template-columns: 1fr 1fr; }
  .stats4 dd { font-size: 22px; }
  .log li { grid-template-columns: 36px minmax(0, 1fr) auto; gap: 12px; padding: 12px 14px; }
  .log img { width: 36px; height: 36px; }
  .log time { display: none; }
  .docs { grid-template-columns: minmax(0, 1fr); }
  .docnav { display: none; }
  .dtable { display: block; overflow-x: auto; }
  .doc { padding: 26px 20px 30px; border-radius: 26px; }
  .doc h1 { font-size: 36px; }
  .soon .top nav a:not(.btn) { display: none; }
  .soon-main { padding-top: 24px; gap: 44px; }
  .tabbar { position: fixed; left: 50%; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 20; translate: -50% 0; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    width: calc(100% - 24px); max-width: 440px; height: 64px; padding: 5px; border-radius: 32px;
    --fill: linear-gradient(180deg, rgba(36, 36, 40, .6), rgba(16, 16, 18, .58)); --blur: 20px; --sat: 2; --rim: .26; box-shadow: 0 20px 50px -14px rgba(0, 0, 0, .95), 0 0 0 .5px rgba(0, 0, 0, .7); }
  .tabbar a { position: relative; z-index: 1; display: grid; place-items: center; align-content: center; gap: 3px; border-radius: 27px; font-size: 10.5px; font-weight: 600; color: var(--ink-2); }
  .tabbar a svg { width: 21px; height: 21px; }
  .tabbar a[aria-current="page"] { color: var(--gold-2); }
  .tabbar .thumb { border-radius: 27px; background: rgba(255, 255, 255, .1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14); }
}
@media (max-width: 380px) {
  .grid { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media (prefers-reduced-transparency: reduce) {
  :where(.top, .tabbar, .walletmenu, .panel, .plate) { --fill: rgba(22, 22, 24, .96); }
}