/* No colour literals here. Every colour comes from tokens.css. */
@font-face{font-family:"Chakra Petch";font-weight:600;font-style:normal;font-display:swap;src:url(/assets/fonts/ChakraPetch-600.woff2) format("woff2")}
@font-face{font-family:"Chakra Petch";font-weight:700;font-style:normal;font-display:swap;src:url(/assets/fonts/ChakraPetch-700.woff2) format("woff2")}
@font-face{font-family:"Inter";font-weight:400 600;font-style:normal;font-display:swap;src:url(/assets/fonts/Inter-400-600.woff2) format("woff2")}

:root{
  /* motion + spacing measured off the reference stylesheet */
  --ease-response:cubic-bezier(.16,1,.3,1);
  --ease-arrival:cubic-bezier(.05,.9,.12,1);
  --d-hover:.14s; --d-open:.42s; --d-ink:.7s; --d-arrival:1.4s;
  --stagger:70ms;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:72px;
  --edge:clamp(16px,2.2vw,32px);

  --ink:var(--color-cream);
  --ink-80:color-mix(in srgb,var(--color-cream) 80%,transparent);
  --ink-62:color-mix(in srgb,var(--color-cream) 62%,transparent);
  --ink-40:color-mix(in srgb,var(--color-cream) 40%,transparent);
  --rule:color-mix(in srgb,var(--color-cream) 16%,transparent);
  --rule-strong:color-mix(in srgb,var(--color-cream) 30%,transparent);
  --mint-soft:color-mix(in srgb,var(--color-mint) 14%,transparent);
  --mint-glow:color-mix(in srgb,var(--color-mint) 30%,transparent);
  --f-display:"Chakra Petch","Segoe UI",system-ui,sans-serif;
  --f-body:"Inter","Segoe UI",system-ui,sans-serif;
  --f-mono:ui-monospace,"Cascadia Mono","SF Mono",Consolas,monospace;
  --maxw:1280px;
}
*{box-sizing:border-box}
html{background:var(--color-ground-deep);color:var(--ink);scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;background:var(--color-ground-deep);font:400 15px/1.55 var(--f-body);overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer}
h1,h2,h3,p,dl,dd,ol{margin:0;padding:0}
ol{list-style:none}
:focus-visible{outline:2px solid var(--color-mint);outline-offset:2px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:var(--s4);top:-80px;z-index:100;background:var(--color-cream);color:var(--color-ground);padding:var(--s3) var(--s4);text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.skip:focus{top:var(--s3)}

/* progress */
.progress{position:fixed;inset:0 0 auto 0;height:2px;z-index:60;pointer-events:none}
.progress i{display:block;height:100%;background:var(--color-mint);transform-origin:0 50%;transform:scaleX(0);box-shadow:0 0 12px var(--mint-glow)}

/* header */
.top{position:sticky;top:0;z-index:50;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--s4) var(--s5);padding:var(--s3) var(--edge);background:color-mix(in srgb,var(--color-ground-deep) 92%,transparent);border-bottom:1px solid var(--rule);backdrop-filter:blur(10px)}
.brand{display:inline-flex;align-items:center;gap:var(--s3);min-height:44px;text-decoration:none}
.brand img{width:32px;height:32px}
.brand-word{font:700 22px/1 var(--f-display);letter-spacing:.02em}
.social{display:flex;gap:var(--s1);justify-self:end}
.soc{width:44px;height:44px;display:inline-grid;place-items:center;border:1px solid var(--rule);color:var(--ink);text-decoration:none;background:transparent;transition:border-color var(--d-hover) var(--ease-response),background-color var(--d-hover) var(--ease-response),color var(--d-hover) var(--ease-response),transform var(--d-hover) var(--ease-response)}
.soc svg{width:20px;height:20px;fill:currentColor}
a.soc:hover{border-color:var(--color-mint);background:var(--mint-soft);color:var(--color-mint);transform:translateY(-1px)}
.soc[data-inert]{color:var(--ink-40);border-style:dashed;cursor:not-allowed}

.ca{display:grid;gap:2px;min-width:0;justify-self:center;width:100%;max-width:880px;padding:var(--s2) var(--s4);border:1px solid var(--rule);background:color-mix(in srgb,var(--color-surface) 70%,transparent)}
.ca-label{font-size:12px;color:var(--ink-62);letter-spacing:.02em}
.ca-body{min-width:0;display:flex;align-items:center;gap:var(--s3);min-height:28px}
.ca-pending{font:600 clamp(16px,1.9vw,24px)/1.2 var(--f-display);color:var(--ink-40);letter-spacing:.02em}
.ca-copy{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:var(--s3);min-height:44px;width:100%;cursor:pointer;min-width:0;margin:-8px 0}
.ca-copy:focus-visible{outline:2px solid var(--color-mint);outline-offset:2px}
.ca-addr{font:500 clamp(15px,1.9vw,26px)/1.25 var(--f-mono);overflow-wrap:anywhere;word-break:break-all;min-width:0;flex:1}
.ca-fb{flex:none;font:600 12px/1 var(--f-display);letter-spacing:.06em;text-transform:uppercase;padding:6px 10px;border:1px solid var(--rule-strong);color:var(--color-mint);min-width:64px;text-align:center;transition:background-color var(--d-hover) var(--ease-response),color var(--d-hover) var(--ease-response)}
.ca-copy:hover .ca-fb{background:var(--mint-soft)}
.ca[data-copied] .ca-fb{background:var(--color-mint);color:var(--color-ground)}

@media (max-width:859px){
  .top{grid-template-columns:minmax(0,1fr) auto;gap:var(--s2) var(--s3);padding-top:var(--s2);padding-bottom:var(--s3)}
  .brand{grid-column:1;grid-row:1}
  .social{grid-column:2;grid-row:1}
  .ca{grid-column:1 / -1;grid-row:2;max-width:none;padding:var(--s2) var(--s3)}
}

/* shared */
main{position:relative;z-index:1}
h1,h2,h3{font-family:var(--f-display);font-weight:700;letter-spacing:-.01em}
.eyebrow{font:600 13px/1 var(--f-display);letter-spacing:.14em;color:var(--color-mint)}
.sub{color:var(--ink-80);max-width:560px;margin-top:var(--s3)}
.num{text-align:right;font-variant-numeric:tabular-nums}

.pill{display:inline-flex;align-items:center;gap:var(--s2);min-height:32px;padding:0 var(--s4) 0 var(--s3);border:1px solid var(--rule-strong);border-radius:999px;font:600 12px/1 var(--f-display);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-80);width:fit-content}
.dot{width:8px;height:8px;border-radius:50%;background:var(--ink-40)}
.pill[data-state=live]{color:var(--color-mint);border-color:var(--color-mint)}
.pill[data-state=live] .dot{background:var(--color-mint);animation:livePulse 2.4s ease-in-out infinite}
.pill[data-state=retry] .dot{background:var(--color-sage);animation:livePulse 1.4s ease-in-out infinite}
.pill[data-state=down]{color:var(--ink-62);border-style:dashed}
.pill[data-state=idle] .dot{animation:livePulse 2.4s ease-in-out infinite}
@keyframes livePulse{0%,100%{box-shadow:0 0 0 0 var(--mint-glow);opacity:1}50%{box-shadow:0 0 0 7px transparent;opacity:.55}}

/* spotlight */
[data-spot]{position:relative;isolation:isolate}
[data-spot]::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),var(--mint-soft),transparent 70%);transition:opacity var(--d-hover) var(--ease-response)}
[data-spot]:hover::before{opacity:1}

/* hero */
.hero{position:relative;overflow:hidden;min-height:min(86vh,860px);display:flex;align-items:flex-end;padding:var(--s8) var(--edge) var(--s7);border-bottom:1px solid var(--rule)}
.hero>*{position:relative}
.mesh{position:absolute;inset:-10%;z-index:0;transform:translate3d(var(--px,0px),var(--py,0px),0)}
.mesh i{position:absolute;width:56vw;height:56vw;max-width:820px;max-height:820px;border-radius:50%;filter:blur(90px);opacity:.55;animation:ember 23s ease-in-out infinite}
.mesh i:nth-child(1){left:-8%;top:-10%;background:radial-gradient(circle,var(--color-surface),transparent 68%)}
.mesh i:nth-child(2){right:-6%;top:6%;background:radial-gradient(circle,var(--mint-soft),transparent 66%);animation-delay:-8s;animation-duration:29s}
.mesh i:nth-child(3){left:30%;bottom:-24%;background:radial-gradient(circle,var(--color-ground),transparent 66%);animation-delay:-15s}
@keyframes ember{0%,100%{transform:translate3d(0,0,0) scale(1)}33%{transform:translate3d(6%,4%,0) scale(1.08)}66%{transform:translate3d(-4%,7%,0) scale(.94)}}
.contours{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;will-change:transform;transform:translate3d(var(--px,0px),var(--py,0px),0)}
.contours path{fill:none;stroke:var(--color-contour);stroke-width:1.2;stroke-dasharray:3 6;vector-effect:non-scaling-stroke}
.hero-hex{position:absolute;right:calc(var(--edge) * 2);top:50%;width:min(36vw,480px);height:auto;opacity:.92;z-index:0;transform:translate3d(var(--px,0px),calc(-50% + var(--py,0px)),0);will-change:transform;filter:drop-shadow(0 30px 60px var(--color-ground-deep))}
.hero-in{z-index:2;width:100%;max-width:var(--maxw);margin:0 auto;display:grid;gap:var(--s5);justify-items:start}
.hero h1{font-size:clamp(48px,5.4vw,92px);line-height:.98;letter-spacing:-.02em;text-transform:uppercase;max-width:12em}
.lede{max-width:560px;font-size:clamp(16px,1.35vw,19px);color:var(--ink-80)}
.figures{display:grid;grid-template-columns:repeat(4,auto);justify-content:start;gap:var(--s2) var(--s7);font-size:13px;margin-top:var(--s2)}
.fig{padding:var(--s3) var(--s4) var(--s3) 0;border-top:1px solid var(--rule);min-width:0}
.fig dt{font-size:12px;color:var(--ink-62);letter-spacing:.02em}
.fig dd{font:700 26px/1.2 var(--f-display);margin-top:var(--s1);overflow-wrap:anywhere}
.fig dd[data-dim]{color:var(--ink-40)}
.stamp{display:inline-flex;align-items:center;min-height:44px;padding:0 var(--s5);background:var(--color-cream);color:var(--color-ground);font:700 14px/1 var(--f-display);letter-spacing:.06em;text-transform:uppercase;text-decoration:none;transition:background-color var(--d-hover) var(--ease-response),transform var(--d-hover) var(--ease-response),box-shadow var(--d-hover) var(--ease-response)}
.stamp:hover{background:var(--color-mint);transform:translateY(-2px);box-shadow:0 10px 30px var(--mint-glow)}
@media (max-width:859px){
  .hero{align-items:flex-start;padding-top:var(--s7);min-height:0}
  .hero-hex{width:62vw;right:-14vw;top:30px;transform:translate3d(var(--px,0px),var(--py,0px),0);opacity:.28}
  .figures{grid-template-columns:1fr 1fr;gap:var(--s2) var(--s4);width:100%}
  .fig dd{font-size:22px}
}

/* ticker */
.ticker{overflow:hidden;border-bottom:1px solid var(--rule);background:var(--color-ground);min-height:52px;display:flex;align-items:center}
.ticker-track{display:flex;width:max-content;animation:tape var(--tape-d,60s) linear infinite}
.ticker:hover .ticker-track{animation-play-state:paused}
@keyframes tape{to{transform:translateX(-50%)}}
.tk{display:inline-flex;align-items:center;gap:var(--s2);padding:0 var(--s5);height:52px;white-space:nowrap;font-size:13px;border-right:1px solid var(--rule)}
.tk b{font:700 13px/1 var(--f-display);letter-spacing:.04em}
.tk .up{color:var(--color-mint)}
.tk .down{color:var(--ink-62)}
.tk-skel{width:150px;height:14px;margin:0 var(--s5)}

/* panels */
.panel{scroll-margin-top:calc(var(--s8) + var(--s6));max-width:var(--maxw);margin:0 auto;padding:var(--s8) var(--edge) var(--s5)}
.panel-head{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s5);margin-bottom:var(--s6);flex-wrap:wrap}
.panel-head h2{font-size:clamp(34px,5vw,56px);line-height:1;margin-top:var(--s3);text-transform:uppercase}

/* board */
.board{border-top:1px solid var(--rule-strong)}
.brow{display:grid;grid-template-columns:36px minmax(190px,1.7fr) minmax(0,1.1fr) minmax(0,.9fr) minmax(0,1.1fr) minmax(0,1.1fr) 44px;align-items:center;gap:0 var(--s4);padding:var(--s3) var(--s2);border-bottom:1px solid var(--rule);color:inherit;text-decoration:none;position:relative}
.brow-head{font-size:12px;color:var(--ink-62);padding-top:var(--s3);padding-bottom:var(--s2);letter-spacing:.04em}
.brow>*{min-width:0}
.rank{color:var(--ink-62);font:600 13px/1 var(--f-display)}
.who{display:flex;align-items:center;gap:var(--s3);min-width:0;min-height:44px;text-decoration:none;color:inherit}
a.who:hover b{color:var(--color-mint)}
.who-t{min-width:0;display:grid}
.who-t b{font:700 16px/1.2 var(--f-display);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.who-t small{font-size:12px;color:var(--ink-62);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.logo,.tile{width:36px;height:36px;border-radius:50%;flex:none;object-fit:cover;background:var(--color-surface)}
.tile{display:inline-grid;place-items:center;font:700 13px/1 var(--f-display);color:var(--color-cream);border:1px solid var(--rule-strong);text-transform:uppercase}
.logo-brand{object-fit:contain;padding:5px;border:1px solid var(--rule-strong)}
.cell{font-size:14px;white-space:nowrap}
.cell::before{display:none}
.up{color:var(--color-mint)}
.down{color:var(--ink-62)}
.flash-up{animation:flashUp .9s var(--ease-response)}
.flash-down{animation:flashDown .9s var(--ease-response)}
@keyframes flashUp{from{background:var(--mint-glow)}to{background:transparent}}
@keyframes flashDown{from{background:var(--rule-strong)}to{background:transparent}}
.cp{all:unset;box-sizing:border-box;width:44px;height:44px;display:grid;place-items:center;cursor:pointer;border:1px solid transparent;color:var(--ink-62);transition:border-color var(--d-hover) var(--ease-response),color var(--d-hover) var(--ease-response),background-color var(--d-hover) var(--ease-response)}
.cp:hover{border-color:var(--color-mint);color:var(--color-mint);background:var(--mint-soft)}
.cp:focus-visible{outline:2px solid var(--color-mint);outline-offset:2px}
.cp svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.cp[data-ok]{color:var(--color-ground);background:var(--color-mint);border-color:var(--color-mint)}
.cp-none{width:44px;height:44px;display:grid;place-items:center;color:var(--ink-40)}
a.brow:hover{background:color-mix(in srgb,var(--color-cream) 3%,transparent)}
.brow[data-spot]::before{background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%),var(--mint-soft),transparent 70%)}

.brow-own{border-left:2px solid var(--color-mint);animation:ownPulse 2s ease-in-out infinite}
@keyframes ownPulse{0%,100%{background:color-mix(in srgb,var(--color-mint) 3%,transparent)}50%{background:color-mix(in srgb,var(--color-mint) 11%,transparent)}}
.brow-own.is-placeholder{cursor:default}
.brow-own.brow-in{animation:rowIn var(--d-open) var(--ease-response) both,ownPulse 2s ease-in-out infinite;animation-delay:calc(var(--i,0) * var(--stagger)),0s}

/* skeleton + stagger */
.skel{display:block;height:14px;background:linear-gradient(90deg,var(--rule),var(--rule-strong),var(--rule));background-size:220% 100%;animation:shimmer 1.6s ease-in-out infinite}
.brow-skel .logo-s{width:36px;height:36px;border-radius:50%}
@keyframes shimmer{from{background-position:120% 0}to{background-position:-120% 0}}
.brow-in{animation:rowIn var(--d-open) var(--ease-response) both;animation-delay:calc(var(--i,0) * var(--stagger))}
@keyframes rowIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.board-note{min-height:44px;margin-top:var(--s3);font-size:13px;color:var(--ink-62);display:flex;align-items:center}
.board-note[data-err]{color:var(--ink)}

@media (max-width:859px){
  .brow-head{display:none}
  .brow{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) 44px;grid-template-areas:"who who chg cp" "prc vol liq cp";gap:var(--s3) var(--s3);padding:var(--s4) var(--s1)}
  .brow>.rank{display:none}
  .brow>.who{grid-area:who}
  .brow>.c-prc{grid-area:prc}.brow>.c-chg{grid-area:chg;text-align:right}.brow>.c-vol{grid-area:vol}.brow>.c-liq{grid-area:liq}
  .brow>.c-cp{grid-area:cp;align-self:start;grid-row:1 / span 2}
  .cell{text-align:left;display:grid;gap:2px;font-size:13px}
  .cell.c-chg{text-align:right;font-size:14px}
  .cell::before{display:block;content:attr(data-l);font-size:11px;color:var(--ink-62)}
  .cell.c-chg::before{display:none}
  .brow>.num{text-align:left}
  .brow>.c-chg.num{text-align:right}
}

/* facts + tabs */
.tablist{display:flex;gap:var(--s1);border-bottom:1px solid var(--rule-strong);overflow-x:auto}
.tablist button{all:unset;box-sizing:border-box;min-height:44px;padding:0 var(--s5);display:inline-flex;align-items:center;cursor:pointer;font:700 14px/1 var(--f-display);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-62);border-bottom:2px solid transparent;margin-bottom:-1px;transition:color var(--d-hover) var(--ease-response),border-color var(--d-hover) var(--ease-response),background-color var(--d-hover) var(--ease-response)}
.tablist button:hover{color:var(--ink);background:color-mix(in srgb,var(--color-cream) 4%,transparent)}
.tablist button[aria-selected=true]{color:var(--color-mint);border-bottom-color:var(--color-mint)}
.tablist button:focus-visible{outline:2px solid var(--color-mint);outline-offset:-2px}
.pane{padding:var(--s5) var(--s2);display:grid;gap:0}
.pane[hidden]{display:none}
.pane:not([hidden]){animation:rowIn var(--d-open) var(--ease-response) both}
.fact{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);gap:var(--s2) var(--s5);align-items:center;padding:var(--s4) 0;border-bottom:1px solid var(--rule);min-height:56px}
.fact dt{color:var(--ink-62);font-size:13px}
.fact dd{min-width:0;overflow-wrap:anywhere;font-size:15px}
.fact dd.mono{font-family:var(--f-mono);font-size:14px}
.chip{display:inline-flex;align-items:center;min-height:32px;padding:0 var(--s3);border:1px dashed var(--rule-strong);color:var(--ink-40);font:600 12px/1 var(--f-display);letter-spacing:.08em;text-transform:uppercase}
a.chip{border-style:solid;color:var(--color-mint);text-decoration:none;min-height:44px;padding:0 var(--s4)}
a.chip:hover{background:var(--mint-soft)}
dl.facts{margin:0}
@media (max-width:859px){.fact{grid-template-columns:1fr}}

/* steps */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border-top:1px solid var(--rule-strong)}
.step{padding:var(--s5) var(--s5) var(--s6) 0;border-right:1px solid var(--rule);padding-left:var(--s5);display:grid;gap:var(--s3);align-content:start}
.step:first-child{padding-left:0}
.step:last-child{border-right:0}
.step-n{font:600 13px/1 var(--f-display);letter-spacing:.14em;color:var(--color-mint)}
.step h3{font-size:26px;text-transform:uppercase;line-height:1}
.step p{color:var(--ink-80);font-size:14px}
@media (max-width:859px){
  .steps{grid-template-columns:1fr 1fr}
  .step{padding-left:var(--s4);border-bottom:1px solid var(--rule)}
  .step:nth-child(odd){padding-left:0}
  .step:nth-child(2n){border-right:0}
}
@media (max-width:519px){
  .steps{grid-template-columns:1fr}
  .step{padding-left:0;border-right:0}
}

/* footer */
.foot{margin-top:var(--s8);border-top:1px solid var(--rule);background:var(--color-ground)}
.foot-in{max-width:var(--maxw);margin:0 auto;padding:var(--s5) var(--edge);display:flex;justify-content:space-between;align-items:center;gap:var(--s4);flex-wrap:wrap;font-size:13px;color:var(--ink-62)}
.foot-brand{display:inline-flex;align-items:center;gap:var(--s2);font:700 15px/1 var(--f-display);color:var(--ink)}

/* reveal: only hidden once script has armed it */
.js [data-reveal]:not(.is-in){opacity:0}
.js [data-reveal-group]>[data-reveal]:not(.is-in){opacity:0}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js [data-reveal]:not(.is-in){opacity:1}
  .ticker{overflow-x:hidden}
  .ticker-track{transform:none}
  .progress i{transition:none}
  .brow-own{animation:none}
}