*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:150px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);font:400 16px/1.55 var(--body);overflow-x:hidden;min-width:0}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input{font:inherit;color:inherit}
h1,h2,h3,p,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
.mono{font-family:var(--mono);font-feature-settings:"tnum"}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;z-index:100;background:var(--ink);color:var(--paper);padding:10px 16px;border-radius:var(--r-pill)}
.skip:focus{left:8px}
:focus-visible{outline:3px solid var(--ember);outline-offset:3px;border-radius:8px}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}

/* ---- scroll progress ---- */
.progress{position:fixed;inset:0 0 auto 0;height:4px;z-index:120;pointer-events:none}
.progress i{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--ember),var(--ember-deep));transform:scaleX(0);transform-origin:0 50%}

/* ---- top stack: contract bar + header ---- */
.topstack{position:sticky;top:0;z-index:60;background:color-mix(in srgb,var(--ground) 86%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.ca{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;width:100%;min-height:var(--touch);padding:8px var(--gutter);background:var(--ink);color:var(--paper);border:0;text-align:center;cursor:pointer;transition:background var(--t-med) var(--ease)}
.ca:hover{background:var(--ink-2)}
.ca-label{font:800 12px/1 var(--heavy);letter-spacing:.14em;text-transform:uppercase;color:var(--peach-2)}
.ca-addr{font:600 clamp(13px,3.7vw,26px)/1.25 var(--mono);overflow-wrap:anywhere;word-break:break-all;max-width:100%}
.ca-copy{font:800 12px/1 var(--heavy);padding:8px 14px;border-radius:var(--r-pill);background:var(--ember);color:var(--ink);transition:transform var(--t-med) var(--spring),background var(--t-med) var(--ease)}
.ca:active .ca-copy{transform:scale(.94)}
.ca.is-copied .ca-copy{background:var(--color-mint)}
.ca--inert{cursor:default;pointer-events:none}
.ca--inert:hover{background:var(--ink)}
.ca-pending{font:600 clamp(14px,3.8vw,24px)/1.25 var(--mono);color:var(--cream)}
.head{height:var(--header-h)}
.head-in{height:100%;display:flex;align-items:center;gap:20px}
.brand{display:flex;align-items:center;gap:10px;min-height:var(--touch);min-width:var(--touch)}
.brand-mark{width:40px;height:40px;object-fit:contain;transition:transform var(--t-slow) var(--spring)}
.brand:hover .brand-mark{transform:rotate(-14deg) scale(1.06)}
.brand-word{font:900 22px/1 var(--heavy);letter-spacing:-.01em}
.nav{display:flex;gap:4px;margin-left:12px}
.nav a{display:inline-flex;align-items:center;min-height:var(--touch);padding:0 14px;border-radius:var(--r-pill);font-weight:700;font-size:15px;color:var(--ink-2);transition:background var(--t-med) var(--ease),color var(--t-med) var(--ease)}
.nav a:hover{background:var(--ember-wash);color:var(--ink)}
.head-end{margin-left:auto;display:flex;align-items:center;gap:12px}
.pill{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--touch);min-width:var(--touch);padding:0 14px;border-radius:var(--r-pill);background:var(--surface);box-shadow:var(--clay-sm);font:700 13px/1 var(--body)}
.dot{width:9px;height:9px;border-radius:50%;background:var(--clay);position:relative}
.pill.is-live .dot{background:var(--color-mint)}
.pill.is-live .dot::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid var(--color-mint);animation:ping 1.8s var(--ease) infinite}
.pill.is-warn .dot{background:var(--ember-deep)}
@keyframes ping{0%{transform:scale(.4);opacity:.9}100%{transform:scale(1.5);opacity:0}}
.socials{display:flex;gap:8px}
.soc{display:grid;place-items:center;width:var(--touch);height:var(--touch);border-radius:50%;background:var(--ink);color:var(--paper);box-shadow:var(--clay-sm);transition:transform var(--t-med) var(--spring),background var(--t-med) var(--ease)}
.soc svg{width:20px;height:20px;fill:currentColor}
a.soc:hover{transform:translateY(-3px) rotate(-6deg);background:var(--ember);color:var(--ink)}
.soc--inert{background:var(--surface-2);color:var(--ink-3);cursor:default;box-shadow:var(--clay-well)}

/* ---- ticker ---- */
.ticker{overflow:hidden;border-bottom:1px solid var(--line);background:var(--surface-2);height:var(--touch);display:flex;align-items:center}
.ticker-track{display:flex;gap:36px;white-space:nowrap;width:max-content;animation:marquee 46s linear infinite;padding-left:24px}
.ticker:hover .ticker-track{animation-play-state:paused}
.tick{display:inline-flex;align-items:center;gap:8px;font:600 13px/1 var(--mono)}
.tick b{font:900 13px/1 var(--heavy)}
.tick .up{color:var(--ink)}
.tick .up::before{content:"\25B2 ";color:var(--ember-deep)}
.tick .dn::before{content:"\25BC ";color:var(--clay)}
.tick--sk{width:110px;height:12px;border-radius:6px}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ---- hero ---- */
.hero{position:relative;overflow:hidden;padding:72px 0 56px}
.mesh{position:absolute;inset:0;pointer-events:none}
.blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.85;will-change:transform}
.b1{width:520px;height:520px;left:-140px;top:-160px;background:var(--lilac);animation:drift 14s ease-in-out infinite alternate}
.b2{width:640px;height:640px;right:-180px;top:20px;background:var(--peach-2);animation:drift 18s ease-in-out infinite alternate-reverse}
.b3{width:420px;height:420px;left:34%;bottom:-220px;background:var(--peach);animation:drift 16s ease-in-out infinite alternate}
@keyframes drift{0%{translate:0 0;scale:1}100%{translate:40px 30px;scale:1.12}}
.hero-in{position:relative;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:32px;align-items:center}
.kicker{font:800 13px/1 var(--heavy);letter-spacing:.16em;text-transform:uppercase;color:var(--ember-deep);margin-bottom:18px}
h1{font:900 clamp(36px,5.6vw,68px)/1.02 var(--heavy);letter-spacing:-.02em;text-wrap:balance}
.lede{margin-top:22px;max-width:560px;font-size:18px;color:var(--ink-2)}
.cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:var(--touch);padding:0 26px;border-radius:var(--r-pill);font:800 15px/1 var(--heavy);border:0;cursor:pointer;transition:transform var(--t-med) var(--spring),box-shadow var(--t-med) var(--ease)}
.btn:hover{transform:translateY(-3px)}
.btn:active{transform:translateY(1px) scale(.98)}
.btn--primary{background:var(--ember);color:var(--ink);box-shadow:var(--clay-btn)}
.btn--ghost{background:var(--surface);box-shadow:var(--clay-sm)}
.btn--inert{background:var(--surface-2);color:var(--ink-3);box-shadow:var(--clay-well);cursor:default;pointer-events:none}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.chip{display:inline-flex;gap:8px;align-items:center;min-height:36px;padding:0 14px;border-radius:var(--r-pill);background:var(--surface);box-shadow:var(--clay-well);font-size:13px;color:var(--ink-2)}
.chip b{color:var(--ink)}
.hero-art{position:relative;aspect-ratio:1;max-width:460px;width:100%;justify-self:center}
.hero-logo{position:absolute;inset:6%;width:88%;height:88%;object-fit:contain;filter:drop-shadow(18px 22px 30px var(--shade));animation:bob 7s ease-in-out infinite}
@keyframes bob{50%{translate:0 -14px}}
.orb{position:absolute;border-radius:50%;box-shadow:var(--clay-md)}
.o1{width:64px;height:64px;left:2%;top:10%;background:radial-gradient(circle at 32% 28%,var(--paper),var(--cream))}
.o2{width:36px;height:36px;right:4%;top:2%;background:radial-gradient(circle at 32% 28%,var(--ember-hi),var(--ember-deep))}
.o3{width:48px;height:48px;right:10%;bottom:6%;background:radial-gradient(circle at 32% 28%,var(--paper),var(--cream))}

/* ---- sections ---- */
.sect{padding:56px var(--gutter) 24px}
.sect-head{margin-bottom:28px;max-width:720px}
.eyebrow{font:800 12px/1 var(--heavy);letter-spacing:.16em;text-transform:uppercase;color:var(--ember-deep);margin-bottom:12px}
h2{font:900 clamp(28px,3.6vw,42px)/1.08 var(--heavy);letter-spacing:-.015em;text-wrap:balance}
.sect-sub{margin-top:12px;color:var(--ink-2)}
.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;padding-top:8px;padding-bottom:8px}
.tile{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:6px;padding:22px;border-radius:var(--r-card);background:var(--surface);box-shadow:var(--clay-md)}
.tile-k{font:700 13px/1.2 var(--body);color:var(--ink-3)}
.tile-v{font:900 clamp(24px,2.6vw,34px)/1.1 var(--heavy);letter-spacing:-.01em;overflow-wrap:anywhere}
.tile-v--pend{font-size:22px;color:var(--ink-3)}
.tile-s{font-size:13px;color:var(--ink-3)}
.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.cards--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.cards--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.card{position:relative;overflow:hidden;padding:24px;border-radius:var(--r-card);background:var(--surface);box-shadow:var(--clay-md);transition:transform var(--t-med) var(--spring)}
.card:hover{transform:translateY(-4px)}
.card-k{font:800 12px/1 var(--heavy);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-bottom:12px}
.card-t{font:900 20px/1.2 var(--heavy);overflow-wrap:anywhere}
.card-v{margin-top:8px;font:600 15px/1.3 var(--mono);color:var(--ink-2)}
.card-p{margin-top:10px;color:var(--ink-2);font-size:15px}
.step{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--ink);color:var(--paper);font:800 14px/1 var(--mono);margin-bottom:16px}
.records{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:20px}
.record{position:relative;overflow:hidden;display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:var(--touch);padding:14px 20px;border-radius:var(--r-pill);background:var(--surface-2);box-shadow:var(--clay-well)}
.record-k{font:800 13px/1 var(--heavy)}
.record-v{font:600 13px/1.2 var(--mono);color:var(--ink-3);overflow-wrap:anywhere;text-align:right}
.road{display:grid;gap:16px}
.stop{position:relative;overflow:hidden;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:20px;align-items:center;padding:22px 26px;border-radius:var(--r-card);background:var(--surface);box-shadow:var(--clay-md)}
.stop-n{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--ember);color:var(--ink);font:900 18px/1 var(--heavy);box-shadow:var(--clay-btn)}
.tag{display:inline-flex;align-items:center;min-height:32px;padding:0 14px;border-radius:var(--r-pill);background:var(--surface-2);box-shadow:var(--clay-well);font:700 12px/1 var(--mono);color:var(--ink-3)}
.closer-in{position:relative;overflow:hidden;text-align:center;padding:56px 24px;border-radius:var(--r-panel);background:var(--peach);box-shadow:var(--clay-lg)}
.closer-in .cta{justify-content:center}
.foot{margin-top:56px;padding:36px 0 48px;border-top:1px solid var(--line)}
.foot-in{display:grid;gap:10px;justify-items:start}
.foot-note{font-size:13px;color:var(--ink-3)}

/* ---- spotlight ---- */
.spot::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity var(--t-med) var(--ease);background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),var(--ember-wash),transparent 70%)}
.spot:hover::before{opacity:1}

/* ---- board ---- */
.panel{border-radius:var(--r-panel);background:var(--surface);box-shadow:var(--clay-lg);padding:18px;overflow:hidden}
.bar{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center;margin-bottom:14px}
.tabs{display:flex;gap:6px;padding:5px;border-radius:var(--r-pill);background:var(--surface-2);box-shadow:var(--clay-well);overflow-x:auto;max-width:100%}
.tab{min-height:var(--touch);padding:0 18px;border:0;border-radius:12px;background:transparent;font:800 14px/1 var(--heavy);color:var(--ink-3);cursor:pointer;transition:background var(--t-med) var(--ease),color var(--t-med) var(--ease),transform var(--t-med) var(--spring)}
.tab:hover{color:var(--ink)}
.tab.is-on{background:var(--ink);color:var(--paper);transform:scale(1.03)}
.search input{min-height:var(--touch);width:280px;max-width:100%;padding:0 18px;border:0;border-radius:var(--r-pill);background:var(--surface-2);box-shadow:var(--clay-well);outline-offset:2px}
.search input::placeholder{color:var(--ink-3)}
.grid-head,.row{display:grid;grid-template-columns:44px minmax(0,1.7fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);align-items:center;column-gap:12px}
.grid-head{padding:8px 14px;font:800 12px/1 var(--heavy);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.r{text-align:right}
.row{position:relative;overflow:hidden;min-height:64px;padding:8px 14px;border-radius:var(--r-pill);border-left:2px solid transparent;transition:background var(--t-med) var(--ease)}
.row+.row{margin-top:4px}
.row:hover{background:var(--surface-2)}
.row-rank{font:600 13px/1 var(--mono);color:var(--ink-3)}
.row-tok{display:flex;align-items:center;gap:12px;min-width:0}
.logo{flex:none;width:40px;height:40px;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:var(--cream);box-shadow:var(--clay-sm);font:900 16px/1 var(--heavy);color:var(--ink)}
.logo img{width:100%;height:100%;object-fit:cover}
.logo--own{background:var(--paper)}
.logo--own img{object-fit:contain;padding:3px}
.row-name{min-width:0;display:grid}
.row-name b{font:800 15px/1.2 var(--heavy);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row-name small{font:600 12px/1.3 var(--mono);color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cell{font:600 14px/1.2 var(--mono);text-align:right;font-feature-settings:"tnum"}
.chg{display:inline-block;padding:6px 10px;border-radius:10px}
.chg.up{background:var(--up-wash)}
.chg.dn{background:var(--down-wash)}
.flash-up{animation:flashUp .9s var(--ease)}
.flash-dn{animation:flashDn .9s var(--ease)}
@keyframes flashUp{0%{background:var(--up-wash)}100%{background:transparent}}
@keyframes flashDn{0%{background:var(--down-wash)}100%{background:transparent}}
.row-sub{display:none}
.row--own{border-left:2px solid var(--color-mint);animation:ownPulse 2s ease-in-out infinite}
@keyframes ownPulse{0%,100%{background:var(--own-rest)}50%{background:var(--own-peak)}}
.row--own .row-name b::after{content:"";}
.row--sk{pointer-events:none}
.sk{display:block;border-radius:8px;background:linear-gradient(100deg,var(--surface-2) 30%,var(--paper) 50%,var(--surface-2) 70%);background-size:300% 100%;animation:shimmer 1.4s linear infinite}
.sk--c{width:40px;height:40px;border-radius:50%}
.sk--l{height:14px;width:70%}
.sk--r{height:14px;width:62%;justify-self:end}
@keyframes shimmer{0%{background-position:100% 0}100%{background-position:0 0}}
.tick--sk{background:linear-gradient(100deg,var(--surface-2) 30%,var(--paper) 50%,var(--surface-2) 70%);background-size:300% 100%;animation:shimmer 1.4s linear infinite}
.in{animation:fadeIn var(--t-slow) var(--ease) both;animation-delay:calc(var(--i,0) * 55ms)}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.board-foot{margin-top:12px;padding:12px 16px;border-radius:var(--r-pill);background:var(--down-wash);font-size:14px}
.empty{padding:28px;text-align:center;color:var(--ink-3)}

/* ---- reveal (JS drives transform/opacity with a damped spring) ---- */
.js [data-reveal]{opacity:0}

/* ---- responsive ---- */
@media (max-width:1100px){
  .cards,.cards--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .nav{display:none}
}
@media (max-width:860px){
  html{scroll-padding-top:120px}
  .hero{padding:40px 0 32px}
  .hero-in{grid-template-columns:minmax(0,1fr)}
  .hero-art{max-width:300px;order:-1}
  .cards--3,.records{grid-template-columns:minmax(0,1fr)}
  .head{height:60px}
  .pill{padding:0 10px}
  .stop{grid-template-columns:auto minmax(0,1fr);}
  .stop .tag{grid-column:2;justify-self:start}
}
@media (max-width:600px){
  :root{--gutter:16px}
  .cards,.cards--4,.tiles{grid-template-columns:minmax(0,1fr)}
  .tiles{gap:14px}
  .grid-head,.row{grid-template-columns:24px minmax(0,1.25fr) minmax(0,1.1fr) minmax(0,.95fr);column-gap:6px}
  .hide-s{display:none}
  .row-sub{display:block;font:600 11px/1.3 var(--mono);color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .row .hide-s{display:none}
  .search,.search input{width:100%}
  .brand-word{font-size:19px}
  .head-in{gap:10px}
  .head-end{gap:8px}
  #status-text{display:none}
  .socials{gap:6px}
  .panel{padding:12px}
}
@media (max-width:420px){
  .brand-word{display:none}
}
@media (pointer:coarse){.spot::before{display:none}}

/* ---- reduced motion: instant everything ---- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  .js [data-reveal]{opacity:1}
  .ticker{overflow-x:auto}
  .ticker-track{animation:none}
  .row--own{animation:none}
  .pill.is-live .dot::after{animation:none;display:none}
  .sk,.tick--sk{animation:none}
  .hero-logo,.blob{animation:none}
}
