/* REX Chain design system — rex.fun ink + neon green */
:root{
--bg:#0b100c;--bg2:#111913;--panel:#161e18;
--surface:rgba(255,255,255,.04);--surface2:rgba(255,255,255,.07);--surface3:rgba(255,255,255,.11);
--line:rgba(255,255,255,.09);--line2:rgba(255,255,255,.17);
--text:#ffffff;--muted:rgba(255,255,255,.62);--dim:rgba(255,255,255,.38);
--rex:#22c55e;--lime:#9dff8f;--deep:#15803d;--mint:#cfe9d6;
--ember:#22c55e;--gold:#9dff8f;--ember2:#4ecb6a;
--up:#22c55e;--down:#ff5470;--sol:#9945ff;--usdc:#2775ca;--gp:#ffc24d;
--grad:linear-gradient(120deg,#15803d 0%,#22c55e 55%,#9dff8f 100%);
--r:18px;--rs:12px;--rx:8px;
--fd:'Clash Display','Space Grotesk',system-ui,sans-serif;--fb:'Inter',system-ui,sans-serif;--fm:'JetBrains Mono',ui-monospace,monospace;
--shadow:0 20px 60px rgba(0,0,0,.6),0 2px 8px rgba(0,0,0,.4);
--glow:0 0 0 1px rgba(34,197,94,.35),0 0 32px rgba(34,197,94,.22);
--nav-h:64px;--tape-h:34px;
}
*{box-sizing:border-box}html{scroll-behavior:smooth}
html,body{margin:0;background:var(--bg);color:var(--text);font-family:var(--fb);font-size:14px;line-height:1.45;-webkit-font-smoothing:antialiased;min-height:100%}
body{overflow-x:hidden}
a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
input,select,textarea{font:inherit;color:inherit}
::selection{background:rgba(255,120,40,.35)}
.mono{font-family:var(--fm);font-variant-numeric:tabular-nums}
.num{font-family:var(--fm);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.up{color:var(--up)}.down{color:var(--down)}.muted{color:var(--muted)}.dim{color:var(--dim)}.gold{color:var(--gold)}.ember{color:var(--ember)}
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
h1,h2,h3,h4{font-family:var(--fd);letter-spacing:-.02em;margin:0;font-weight:700}
h1{font-size:clamp(34px,5vw,58px);line-height:1.02}h2{font-size:22px}h3{font-size:16px}
p{margin:0}
/* background */
#bg{position:fixed;inset:0;z-index:-1;background:
radial-gradient(1100px 620px at 50% -12%,rgba(34,197,94,.16),transparent 62%),
radial-gradient(760px 520px at 88% 18%,rgba(157,255,143,.05),transparent 60%),
radial-gradient(700px 500px at 4% 44%,rgba(21,128,61,.10),transparent 60%),var(--bg)}
#bg::before{content:"";position:absolute;inset:0;opacity:.5;background-image:
repeating-radial-gradient(circle at 18% 22%,transparent 0 58px,rgba(34,197,94,.055) 58px 59px),
repeating-radial-gradient(circle at 82% 68%,transparent 0 74px,rgba(34,197,94,.04) 74px 75px);
mask-image:radial-gradient(120% 100% at 50% 0,#000 35%,transparent 78%)}
#bg::after{content:"";position:absolute;inset:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.045'/%3E%3C/svg%3E");mix-blend-mode:overlay;pointer-events:none}
#embers{position:absolute;inset:0;width:100%;height:100%;opacity:.9}
/* nav */
#nav{position:sticky;top:0;z-index:50;height:var(--nav-h);display:flex;align-items:center;gap:14px;padding:0 22px;white-space:nowrap;overflow:hidden;background:rgba(7,8,11,.72);backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--fd);font-weight:700;letter-spacing:.14em;font-size:17px}
/* ───── images may never be distorted ─────────────────────────────────────────
Two separate ways an gets squashed, and both are off by default here so a new one cannot
reintroduce either:
1. A width AND a height with no object-fit. The default is `fill`, which STRETCHES the picture
to the box instead of fitting it. Every sized image on this site has both dimensions.
2. Living in a flex row. An is a flex item, so it is allowed to shrink below its own
width while its height stays put — which squeezes it horizontally on narrow screens.
`contain` is the baseline because it never crops and never stretches. The places that genuinely
want `cover` — a coin's artwork filling a square tile — say so below; cover crops, it does not
distort, so both are safe. Only the default is not. */
img{object-fit:contain;flex-shrink:0;max-width:100%}
/* flex:none and object-fit together are what stop the mark being squeezed: inside a flex row an
with a width is still allowed to shrink, so on a narrow screen the height held at 30px
while the width collapsed and the logo came out squashed. Elio saw this on his phone. */
.brand .mark{width:30px;height:30px;flex:0 0 30px;object-fit:contain;filter:drop-shadow(0 0 10px rgba(34,197,94,.5))}
.swapwrap{max-width:560px;margin:0 auto}
.swapcard{position:relative}
.swapleg{background:var(--surface2);border:1px solid var(--line);border-radius:14px;padding:12px 14px}
.swapleg + .swapleg{margin-top:8px}
.swapleg .l{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.swapleg .row{align-items:center;gap:10px;margin-top:6px}
.swapleg input{flex:1 1 auto;background:none;border:0;font-size:26px;font-weight:700;color:var(--text);min-width:0;padding:0}
.swapleg input:focus{outline:none}
.swapleg input[readonly]{color:var(--muted)}
.tokpick{display:flex;align-items:center;gap:7px;flex:none;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:6px 11px;font-weight:700;font-size:14px;color:var(--text);transition:.15s}
.tokpick:hover{border-color:var(--up)}
.tokpick img,.toklist img{width:20px;height:20px;border-radius:50%;object-fit:cover;flex:none}
.tokpick .dot,.toklist .dot{width:20px;height:20px;border-radius:50%;background:var(--surface2);display:inline-block;flex:none}
.swapflip{position:absolute;left:50%;transform:translateX(-50%);margin-top:-15px;z-index:2;width:30px;height:30px;border-radius:10px;background:var(--surface);border:1px solid var(--line);color:var(--muted);font-size:14px;line-height:1}
.swapflip:hover{color:var(--up);border-color:var(--up)}
.swapinfo{display:grid;gap:5px;margin-top:12px;font-size:12.5px}
.swapinfo span{display:flex;justify-content:space-between;gap:12px}
.swapinfo b{font-weight:600;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:62%}
.toklist{max-height:46vh;overflow:auto;margin-top:8px;display:grid;gap:2px}
.toklist button{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border-radius:10px;text-align:left;transition:.12s}
.toklist button:hover{background:var(--surface2)}
.toklist button span{display:flex;flex-direction:column;flex:1 1 auto;min-width:0}
.toklist button small{color:var(--muted);font-size:11.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.camini{gap:6px;align-items:center}
.camini code{font-size:11.5px;color:var(--muted);background:var(--surface2);border:1px solid var(--line);border-radius:7px;padding:3px 8px}
.ca{display:flex;align-items:center;gap:7px;flex-wrap:wrap;justify-content:center;padding:5px 14px;font-size:11.5px;color:var(--muted);
border-bottom:1px solid var(--line);background:rgba(255,255,255,.015)}
.ca b{color:var(--ember);font-weight:600}
.ca .addr{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;color:var(--text);background:var(--surface2);
border:1px solid var(--line);border-radius:7px;padding:3px 8px;max-width:min(60vw,430px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ca .shortca{display:none}
@media(max-width:640px){.ca{gap:6px;padding:5px 10px}.ca .addr{max-width:none}.ca .full{display:none}.ca .shortca{display:inline}}
.ca button{border:1px solid var(--line);background:var(--surface);border-radius:7px;padding:3px 9px;font-size:11px;font-weight:600;color:var(--text);transition:.15s}
.ca button:hover{border-color:var(--up);color:var(--up)}
.ca button.done{border-color:var(--up);color:var(--up)}
.ca a.buy{border-radius:7px;padding:3px 10px;font-size:11px;font-weight:700;background:var(--up);color:#06240f}
.langsw{display:flex;gap:1px;background:var(--surface2);border:1px solid var(--line);border-radius:9px;padding:2px;flex:none}
.langsw button{padding:4px 8px;border-radius:7px;font-size:11px;font-weight:700;letter-spacing:.04em;color:var(--muted);transition:.15s}
.langsw button:hover{color:var(--text)}
.langsw button.on{background:var(--surface);color:var(--ember)}
@media(max-width:900px){.langsw{display:none}}
.links{display:flex;gap:4px;margin-left:8px}
.links a{padding:8px 12px;border-radius:10px;color:var(--muted);font-weight:500;transition:.15s;white-space:nowrap}
.links a:hover{color:var(--text);background:var(--surface)}.links a.active{color:var(--text);background:var(--surface2)}
.search{flex:1 1 200px;min-width:140px;max-width:420px;margin-left:auto;display:flex;align-items:center;gap:8px;padding:0 12px;height:38px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--muted);transition:.15s}
.search:focus-within{border-color:var(--line2);background:var(--surface2);color:var(--text)}
.search input{flex:1;background:none;border:0;outline:0;min-width:0}.search kbd{font-family:var(--fm);font-size:11px;padding:1px 6px;border:1px solid var(--line2);border-radius:6px;color:var(--dim)}
.right{display:flex;align-items:center;gap:10px}
.epoch-chip{display:flex;align-items:center;gap:8px;padding:0 12px;height:36px;border-radius:12px;border:1px solid rgba(255,194,77,.25);background:rgba(255,194,77,.06);font-size:12px;color:var(--muted);white-space:nowrap}
.epoch-chip b{font-family:var(--fm);color:var(--gold);font-weight:600}
.epoch-chip .dot{width:7px;height:7px;border-radius:50%;background:var(--gold);box-shadow:0 0 10px var(--gold);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:38px;padding:0 18px;border-radius:999px;border:1px solid var(--line2);background:var(--surface2);font-weight:600;transition:.15s;white-space:nowrap;position:relative;overflow:hidden}
.btn:hover{background:var(--surface3);border-color:rgba(255,255,255,.22);transform:translateY(-1px)}
.btn:active{transform:translateY(0)}.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.btn.cta{background:var(--grad);border-color:transparent;color:#04170b;box-shadow:0 6px 24px rgba(34,197,94,.32)}
.btn.cta::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%);transform:translateX(-120%);transition:.6s}
.btn.cta:hover::after{transform:translateX(120%)}
.btn.ghost{background:transparent}.btn.sm{height:30px;padding:0 13px;font-size:12px;border-radius:999px}.btn.xs{height:26px;padding:0 11px;font-size:11.5px;border-radius:999px}.btn.lg{height:50px;padding:0 28px;font-size:15px;border-radius:999px}
.btn.wallet.on{border-color:rgba(61,255,160,.35);background:rgba(61,255,160,.07)}
.btn.buy{background:linear-gradient(120deg,#15803d,#22c55e);color:#04170b;border-color:transparent;box-shadow:0 8px 28px rgba(61,255,160,.25)}
.btn.sell{background:linear-gradient(120deg,#e0334f,#ff5470);color:#1a0509;border-color:transparent;box-shadow:0 8px 28px rgba(255,77,109,.25)}
/* tape */
#simbar{padding:7px 18px;font-size:12.5px;line-height:1.45;text-align:center;color:#ffd9a3;
background:linear-gradient(180deg,rgba(245,158,11,.16),rgba(245,158,11,.08));border-bottom:1px solid rgba(245,158,11,.3)}
#simbar b{color:#ffc04d}
#simbar a{color:inherit;text-decoration:underline;text-underline-offset:2px}
#simbar[hidden]{display:none}
@media(max-width:700px){#simbar{padding:6px 12px;font-size:11.5px}}
#tape{height:var(--tape-h);border-bottom:1px solid var(--line);background:rgba(11,13,18,.6);overflow:hidden;position:relative}
#tape::before,#tape::after{content:"";position:absolute;top:0;bottom:0;width:80px;z-index:2;pointer-events:none}
#tape::before{left:0;background:linear-gradient(90deg,var(--bg),transparent)}#tape::after{right:0;background:linear-gradient(-90deg,var(--bg),transparent)}
.tape-track{display:flex;gap:28px;align-items:center;height:100%;padding-left:20px;white-space:nowrap;will-change:transform;animation:tape 60s linear infinite}
#tape:hover .tape-track{animation-play-state:paused}
@keyframes tape{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.tk{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:var(--muted)}
.tk img{width:16px;height:16px;border-radius:5px;object-fit:cover}.tk b{color:var(--text);font-weight:600}.tk .num{font-size:12px}
/* layout */
/* ⛔ THE CONTENT COLUMN WAS 1380px WHILE THE HEADER, TAPE AND FEATURED BAR SPAN THE VIEWPORT.
On a wide screen that left a dead rail down both sides of every page and made the site look like
it was rendering in a window inside the window. The cap rises with the viewport instead of being
a fixed number, and stays a cap: on a very wide monitor a full-bleed line of body text is its own
readability problem, so it tops out rather than running edge to edge. */
#app{max-width:min(1760px, calc(100vw - 48px));margin:0 auto;padding:22px 22px 60px;min-height:calc(100vh - var(--nav-h) - var(--tape-h))}
.fade{animation:fade .35s ease both}@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);backdrop-filter:blur(8px)}
.panel.pad{padding:18px}
.row{display:flex;align-items:center;gap:10px}.between{justify-content:space-between}.wrap{flex-wrap:wrap}.grow{flex:1;min-width:0}
.stack{display:flex;flex-direction:column;gap:10px;min-width:0}.stack>*{min-width:0}
.chip{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 9px;border-radius:999px;font-size:11.5px;font-weight:600;border:1px solid var(--line2);background:var(--surface2);color:var(--muted);white-space:nowrap}
.chip.sm{height:18px;padding:0 7px;font-size:10px;letter-spacing:.04em;text-transform:uppercase;vertical-align:middle;margin-left:6px}
.chip.fair{border-color:rgba(255,194,77,.4);background:rgba(255,194,77,.1);color:var(--gold)}
.chip.conv{border-color:rgba(61,255,160,.35);background:rgba(61,255,160,.08);color:var(--up)}
.chip.grad{border-color:rgba(153,69,255,.45);background:rgba(153,69,255,.12);color:#c9a3ff}
.chip.live{border-color:rgba(255,106,26,.45);background:rgba(255,106,26,.1);color:var(--ember2)}
.chip.dev{border-color:rgba(255,255,255,.2);background:rgba(255,255,255,.08);color:var(--text)}
.chip .qd{width:8px;height:8px;border-radius:50%}
.quote-SOL{color:#c9a3ff}.quote-USDC{color:#7fb6ff}.quote-GP{color:var(--gold)}
/* hero */
.hero{position:relative;display:grid;grid-template-columns:1.25fr 1fr;gap:28px;align-items:center;padding:34px 34px 30px;overflow:hidden;background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.015));border:1px solid var(--line);border-radius:26px}
.hero::before{content:"";position:absolute;inset:-1px;border-radius:27px;padding:1px;background:linear-gradient(120deg,rgba(255,106,26,.5),rgba(255,194,77,.15) 40%,transparent 70%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.hero .eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--fm);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--rex);font-weight:500;margin-bottom:16px}
.hero .eyebrow i{width:18px;height:1px;background:var(--rex);display:inline-block}
.hero p.lead{font-size:16px;color:var(--muted);max-width:560px;margin:16px 0 22px;line-height:1.55}
.hero .actions{display:flex;gap:10px;flex-wrap:wrap}
.usps{display:grid;gap:12px}
.usp{padding:16px 18px;border-radius:16px;background:var(--surface);border:1px solid var(--line);position:relative;overflow:hidden;transition:.2s}
.usp:hover{border-color:var(--line2);transform:translateY(-2px)}
.usp .t{font-family:var(--fd);font-weight:700;font-size:15px;display:flex;align-items:center;gap:8px;margin-bottom:6px}
.usp .t .n{width:22px;height:22px;border-radius:7px;display:inline-grid;place-items:center;font-size:12px;background:var(--grad);color:#1a0d03}
.usp p{color:var(--muted);font-size:13px;line-height:1.5}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:18px 0}
.stat{padding:16px 18px;border-radius:16px;background:var(--surface);border:1px solid var(--line);position:relative;overflow:hidden}
.stat::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--grad);opacity:.5}
.stat .l{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);font-weight:600}
.stat .v{font-family:var(--fd);font-size:26px;font-weight:700;margin-top:4px;letter-spacing:-.02em}
.stat .s{font-size:12px;color:var(--muted);margin-top:2px}
/* section headers */
.sec{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:28px 0 12px}
.eyelabel{font-family:var(--fm);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);font-weight:500}
.sec h2{display:flex;align-items:center;gap:10px}.sec h2 .live-dot{width:8px;height:8px;border-radius:50%;background:var(--up);box-shadow:0 0 12px var(--up);animation:pulse 1.6s infinite}
.tabs{display:flex;gap:4px;padding:4px;border-radius:12px;background:var(--surface);border:1px solid var(--line)}
.tabs button{height:30px;padding:0 12px;border-radius:9px;color:var(--muted);font-weight:600;font-size:12.5px;transition:.15s}
.tabs button:hover{color:var(--text)}.tabs button.on{background:var(--surface3);color:var(--text)}
.chips{display:flex;gap:6px;flex-wrap:wrap}.chips .chip{cursor:pointer}.chips .chip.on{border-color:var(--line2);background:var(--surface3);color:var(--text)}
/* rails + grid */
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(300px,1fr);gap:12px;overflow-x:auto;padding-bottom:6px;scroll-snap-type:x mandatory;scrollbar-width:thin}
.rail>*{scroll-snap-align:start}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.card{display:block;padding:14px;border-radius:var(--r);background:var(--surface);border:1px solid var(--line);position:relative;overflow:hidden;transition:border-color .18s,background .18s,transform .18s,box-shadow .18s}.card.in{animation:fade .3s both}
.card.has-spark .top{padding-right:80px}.card .nm{flex-wrap:wrap;gap:2px 7px;line-height:1.2}.card .nm .nmt{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere;min-width:0}.card .nm .sym{flex:none}
.card:hover{border-color:rgba(255,160,80,.35);background:var(--surface2);transform:translateY(-2px);box-shadow:0 12px 40px rgba(0,0,0,.35)}
.card.flash{animation:flash .9s}
@keyframes flash{0%{box-shadow:inset 0 0 0 1px var(--gold),0 0 30px rgba(255,194,77,.35)}100%{box-shadow:none}}
.card .top{display:flex;gap:12px;align-items:flex-start}
.card img.av,.av{width:56px;height:56px;border-radius:14px;object-fit:cover;background:var(--surface2);flex:none}
.av.lg{width:84px;height:84px;border-radius:20px}.av.sm{width:28px;height:28px;border-radius:8px}.av.xs{width:20px;height:20px;border-radius:6px}
.card .nm{font-family:var(--fd);font-weight:700;font-size:15px;display:flex;align-items:center;gap:7px;min-width:0}
.card .nm .sym{color:var(--muted);font-weight:600;font-size:13px}
.card .by{font-size:12px;color:var(--dim);margin-top:2px}
.card .meta{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.card .kpi{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-top:12px}
.kpi .l{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);font-weight:600}
.kpi .v{font-family:var(--fm);font-size:13px;font-weight:600;margin-top:1px}
.spark{position:absolute;right:12px;top:14px;width:68px;height:30px;opacity:.9}
/* ⛔ THE SECOND CAUSE OF THE SQUEEZED CARD, independent of the inline-flex one below. `.spark` is
absolute, so `.card.has-spark .top` reserves 80px of padding-right to keep text from running
under it. That is a fixed cost against a card that keeps shrinking: the text column is
card − 28 (card padding) − 80 (spark) − 56 (avatar) − 12 (gap), so it hits ~42px once the card is
near 220px — a phone in split screen, which is what Julz was using. A 68px sparkline on a 220px
card tells nobody anything; the coin's name does. Below this width the spark goes and the whole
row comes back. */
@media (max-width:380px){
.card .spark{display:none}
.card.has-spark .top{padding-right:0}
}
.prog{height:6px;border-radius:999px;background:rgba(255,255,255,.07);overflow:hidden;position:relative;margin-top:12px}
.prog>i{display:block;height:100%;border-radius:999px;background:var(--grad);position:relative;transition:width .6s cubic-bezier(.2,.8,.2,1)}
.prog>i::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);animation:shimmer 2.2s infinite;transform:translateX(-100%)}
@keyframes shimmer{to{transform:translateX(100%)}}
.prog.grad>i{background:linear-gradient(120deg,#9945ff,#c9a3ff)}
.prog-l{display:flex;justify-content:space-between;font-size:11px;color:var(--dim);margin-top:6px}
.fo-line{margin-top:10px;padding:8px 10px;border-radius:10px;background:rgba(255,194,77,.07);border:1px solid rgba(255,194,77,.22);font-size:12px;color:var(--muted)}.fo-line b{color:var(--gold)}
/* countdown ring */
.ring{position:relative;width:64px;height:64px;flex:none}
.ring svg{transform:rotate(-90deg)}.ring .bg{stroke:rgba(255,255,255,.08)}.ring .fg{stroke:var(--gold);stroke-linecap:round;transition:stroke-dashoffset 1s linear;filter:drop-shadow(0 0 6px rgba(255,194,77,.6))}
.ring .t{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--fm);font-size:14px;font-weight:600;color:var(--gold)}
.ring.lg{width:120px;height:120px}.ring.lg .t{font-size:24px}
/* king */
.king{display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;padding:18px 20px;border-radius:22px;background:linear-gradient(120deg,rgba(255,194,77,.12),rgba(255,106,26,.06) 60%,transparent);border:1px solid rgba(255,194,77,.3);position:relative;overflow:hidden}
.king::before{content:"";position:absolute;right:-8px;top:-16px;width:110px;height:110px;opacity:.06;transform:rotate(12deg);background:var(--ic-crown) center/contain no-repeat}
.king .crown{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);font-weight:700}
.king h3{font-size:22px;margin-top:2px}
.king .kp{display:flex;gap:22px;margin-top:10px}.king .kp .l{font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--dim)}.king .kp .v{font-family:var(--fm);font-weight:600;font-size:15px}
/* token page */
.tp{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:16px}
.thead{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.thead h1{font-size:30px}.thead .sym{color:var(--muted);font-weight:600;font-size:18px;margin-left:8px}
.thead .price{margin-left:auto;text-align:right}.thead .price .big{font-family:var(--fd);font-size:30px;font-weight:700;letter-spacing:-.02em}
.thead .price .sub{font-family:var(--fm);font-size:12.5px;color:var(--muted)}
.kpis{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-top:14px}
.kpis .k{padding:10px 12px;border-radius:12px;background:var(--surface);border:1px solid var(--line)}
.kpis .l{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);font-weight:600}.kpis .v{font-family:var(--fm);font-weight:600;font-size:14px;margin-top:2px}
.chart-wrap{position:relative;height:440px;border-radius:var(--r);overflow:hidden;background:rgba(0,0,0,.25);border:1px solid var(--line)}
.chart-wrap .tools{position:absolute;top:10px;left:10px;z-index:3;display:flex;gap:6px}
.chart-wrap .tools .tabs{background:rgba(10,12,16,.8)}
#chart{position:absolute;inset:0}
.chart-wrap .wm{position:absolute;right:14px;bottom:36px;font-family:var(--fd);font-weight:700;letter-spacing:.14em;color:rgba(255,255,255,.08);font-size:22px;pointer-events:none;z-index:2}
/* trade panel */
.side{position:sticky;top:calc(var(--nav-h) + var(--tape-h) + 14px);align-self:start;max-height:calc(100vh - var(--nav-h) - var(--tape-h) - 28px);overflow:auto;scrollbar-width:none}.side::-webkit-scrollbar{display:none}
.trade .switch{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;border-radius:14px;background:rgba(0,0,0,.3);border:1px solid var(--line)}
.trade .switch button{height:38px;border-radius:11px;font-weight:700;color:var(--muted);transition:.15s}
.trade .switch button.buy.on{background:rgba(61,255,160,.16);color:var(--up);box-shadow:inset 0 0 0 1px rgba(61,255,160,.35)}
.trade .switch button.sell.on{background:rgba(255,77,109,.16);color:var(--down);box-shadow:inset 0 0 0 1px rgba(255,77,109,.35)}
.amt{margin-top:12px;border:1px solid var(--line2);border-radius:14px;background:rgba(0,0,0,.28);padding:10px 12px;transition:.15s}
.amt:focus-within{border-color:rgba(255,194,77,.5);box-shadow:0 0 0 3px rgba(255,194,77,.1)}
.amt .l{display:flex;justify-content:space-between;font-size:11.5px;color:var(--dim)}.amt .l b{color:var(--muted);font-weight:500;cursor:pointer}
.amt .in{display:flex;align-items:center;gap:8px;margin-top:4px}
.amt input{flex:1;background:none;border:0;outline:0;font-family:var(--fm);font-size:22px;font-weight:600;min-width:0;width:100%}
.amt .asset{display:flex;align-items:center;gap:6px;padding:5px 9px;border-radius:9px;background:var(--surface2);font-weight:700;font-size:12.5px;white-space:nowrap}
.quick{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:8px}
.quick button{height:30px;border-radius:9px;background:var(--surface);border:1px solid var(--line);font-family:var(--fm);font-size:12px;color:var(--muted);transition:.15s}
.quick button:hover{background:var(--surface3);color:var(--text)}
.qout{margin-top:12px;padding:12px;border-radius:14px;background:var(--surface);border:1px solid var(--line);font-size:12.5px}
.qout .r{display:flex;justify-content:space-between;padding:3px 0;color:var(--muted)}.qout .r b{color:var(--text);font-family:var(--fm);font-weight:500}
.qout .r.big b{font-size:18px;font-weight:700;font-family:var(--fd)}
.slip{display:flex;align-items:center;gap:6px;margin-top:10px;font-size:12px;color:var(--dim)}
.slip button{height:24px;padding:0 8px;border-radius:7px;border:1px solid var(--line);background:var(--surface);font-family:var(--fm);font-size:11px;color:var(--muted)}.slip button.on{color:var(--text);border-color:var(--line2);background:var(--surface3)}
.slip input{width:52px;height:24px;border-radius:7px;border:1px solid var(--line);background:var(--surface);text-align:center;font-family:var(--fm);font-size:11px;outline:0}
.trade .go{width:100%;margin-top:12px;height:50px;font-size:15px;border-radius:999px}
.note{font-size:11.5px;color:var(--dim);margin-top:8px;line-height:1.45}
/* The reason a buy cannot happen, said in the panel rather than discovered at signature. */
.needq{display:flex;gap:9px;align-items:flex-start;margin:10px 0 2px;padding:10px 12px;border-radius:12px;
background:color-mix(in srgb,var(--ember) 9%,transparent);border:1px solid color-mix(in srgb,var(--ember) 28%,transparent);
font-size:12.5px;line-height:1.5;color:var(--text)}
.needq svg,.needq .ic{flex:0 0 auto;margin-top:1px;opacity:.9}
.needq b{color:var(--ember)}
/* side panels */
.side{display:flex;flex-direction:column;gap:12px}
.fo{border-color:rgba(255,194,77,.35);background:linear-gradient(180deg,rgba(255,194,77,.09),rgba(255,194,77,.02))}
.fo .h{display:flex;align-items:center;gap:12px}.fo .h .t{font-family:var(--fd);font-weight:700;font-size:16px}
.fo .h .s{font-size:12px;color:var(--muted)}
.fo .g{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.fo .g .b{padding:10px;border-radius:12px;background:rgba(0,0,0,.25);border:1px solid var(--line)}.fo .g .l{font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--dim)}.fo .g .v{font-family:var(--fm);font-weight:600;font-size:15px;margin-top:2px}
.cv{border-color:rgba(61,255,160,.25);background:linear-gradient(180deg,rgba(61,255,160,.07),rgba(61,255,160,.015))}
.ladder{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;margin-top:12px}
.ladder .st{padding:8px 6px;border-radius:10px;background:rgba(0,0,0,.25);border:1px solid var(--line);text-align:center;transition:.2s}
.ladder .st .m{font-family:var(--fm);font-weight:700;font-size:14px}.ladder .st .n{font-size:10px;color:var(--dim);margin-top:2px;text-transform:uppercase;letter-spacing:.06em}.ladder .st .h{font-size:10px;color:var(--dim)}
.ladder .st.on{border-color:rgba(61,255,160,.55);background:rgba(61,255,160,.12);box-shadow:0 0 18px rgba(61,255,160,.15)}.ladder .st.on .m{color:var(--up)}
.ladder .st.past{opacity:.7}.ladder .st.past .m{color:var(--up)}
.tier{display:inline-flex;align-items:center;gap:5px;font-family:var(--fm);font-size:11.5px;font-weight:600;padding:2px 7px;border-radius:7px;background:rgba(61,255,160,.1);color:var(--up);border:1px solid rgba(61,255,160,.25)}
.tier.m1{background:var(--surface2);color:var(--muted);border-color:var(--line)}
.tier.m3{background:rgba(255,194,77,.12);color:var(--gold);border-color:rgba(255,194,77,.4)}
/* tables */
.tbl{width:100%;border-collapse:collapse;font-size:12.5px}
.tbl th{text-align:left;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);font-weight:600;padding:8px 10px;border-bottom:1px solid var(--line)}
.tbl td{padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:middle;white-space:nowrap}
.tbl tr:last-child td{border-bottom:0}.tbl tr.new td{animation:rowin .8s}
@keyframes rowin{from{background:rgba(255,194,77,.16)}to{background:transparent}}
.tbl .r{text-align:right}.tbl td.r{font-family:var(--fm)}
.tbl a.w{color:var(--text);font-weight:500}.tbl a.w:hover{color:var(--gold)}
/* ⛔ THE TAB STRIP IS THE ONLY REASON A COIN PAGE SCROLLS SIDEWAYS ON A PHONE.
Six tabs come to 485px. The panel is 257px. The strip was `nowrap` with `overflow-x: visible`, so
Payouts and Info simply hung outside the panel and dragged the whole document to 553px — Julz
circled them in red ("screen moves and look these words are out there") and Elio sent the same
screenshot again the next morning. The trades table below them was never at fault: it already
scrolls inside #tabBody.
A strip that is wider than its box should SCROLL, not overflow and not clip — clipping would make
Payouts and Info unreachable rather than merely ugly. `flex:none` keeps each tab its natural width
instead of squashing six labels into 257px, and the scrollbar is hidden because a 2px-tall bar
under a tab row is noise on a phone.
The 1px of padding is load-bearing: `overflow-x:auto` makes the Y axis a scroll box too, which
would otherwise clip the active tab's underline where it sits on the strip's own border. */
.side-tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:8px;
overflow-x:auto;overflow-y:hidden;padding-bottom:1px;scrollbar-width:none;-ms-overflow-style:none;
/* The classic scroll shadow: `local` layers move with the content and `scroll` layers do not, so
a shadow shows on an edge only while there is something past it. No JS, and it cannot go stale. */
background:
linear-gradient(to right, var(--panel), transparent) left center/22px 100% no-repeat local,
linear-gradient(to left, var(--panel), transparent) right center/22px 100% no-repeat local,
radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.45), transparent) left center/11px 100% no-repeat scroll,
radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.45), transparent) right center/11px 100% no-repeat scroll}
.side-tabs::-webkit-scrollbar{display:none}
.side-tabs button{padding:10px 14px;color:var(--muted);font-weight:600;border-bottom:2px solid transparent;margin-bottom:-1px;flex:none;white-space:nowrap}
.side-tabs button.on{color:var(--text);border-color:var(--gold)}
.chat{display:flex;flex-direction:column;max-height:420px}
.chat .msgs{flex:1;overflow:auto;display:flex;flex-direction:column;gap:6px;padding:6px 2px}
.chat .m{font-size:13px;line-height:1.4}.chat .m b{color:var(--gold);font-weight:600;margin-right:6px}.chat .m .t{color:var(--dim);font-size:11px;margin-left:6px}
.chat form{display:flex;gap:8px;margin-top:8px}.chat input{flex:1;height:38px;border-radius:11px;border:1px solid var(--line2);background:rgba(0,0,0,.3);padding:0 12px;outline:0}
/* forms */
.form{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:20px;align-items:start}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.field label{font-size:12px;font-weight:600;color:var(--muted);display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
/* A long hint wraps under its label on a phone instead of butting straight up against it. */
.field label .dim{text-align:right;flex:1 1 auto;min-width:0}
@media (max-width:560px){ .field label{flex-direction:column;gap:2px} .field label .dim{text-align:left} }
.field input,.field textarea,.field select{height:42px;border-radius:12px;border:1px solid var(--line2);background:rgba(0,0,0,.28);padding:0 12px;outline:0;transition:.15s;width:100%}
.field textarea{height:96px;padding:10px 12px;resize:vertical}
.field input:focus,.field textarea:focus{border-color:rgba(255,194,77,.5);box-shadow:0 0 0 3px rgba(255,194,77,.1)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:6px}
/* ⛔ `height:40px` WAS A CEILING, NOT A SIZE, and anything taller than it spilled over the chip
below. That is how the rule picker ended up with "Rising max per wallet" written through
"Blocklist" on a phone — but it is not only that picker: any chip whose label or sub-label wraps
to two lines has been overflowing silently, including three of the coin chips on /liquidity. A
grid row stretches every cell to the tallest in it, so letting the content set the height makes a
taller row rather than a ragged one. */
.opts button{min-height:40px;padding:5px 8px;border-radius:11px;border:1px solid var(--line);background:var(--surface);font-weight:600;font-size:12.5px;color:var(--muted);transition:.15s;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px}
.opts button small{font-size:10px;line-height:1.35;color:var(--dim);font-weight:500;text-align:center}
.opts button.on{border-color:rgba(255,194,77,.55);background:rgba(255,194,77,.1);color:var(--text)}
.drop{height:150px;border:1px dashed var(--line2);border-radius:16px;display:grid;place-items:center;text-align:center;color:var(--muted);cursor:pointer;transition:.15s;position:relative;overflow:hidden}
.drop:hover,.drop.over{border-color:var(--gold);background:rgba(255,194,77,.05)}
.drop img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* ⛔ The invisible file input must cover the WHOLE drop zone. `inset:0` alone does not do it: the
input sits inside a `.field`, and `.field input{height:42px}` sets an explicit height that beats
the stretch. The result was a 305x150 box reading "click to upload" whose top 42px were live and
whose middle — where a thumb naturally lands — did nothing. The image is REQUIRED to launch, so
this quietly blocked launching from a phone. */
.drop input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;padding:0;border:0}
.preview{position:sticky;top:calc(var(--nav-h) + var(--tape-h) + 14px)}
.hint{font-size:12px;color:var(--dim);line-height:1.5}
/* profile */
.bal{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.bal .b{padding:14px;border-radius:14px;background:var(--surface);border:1px solid var(--line)}.bal .l{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);font-weight:600}.bal .v{font-family:var(--fm);font-size:18px;font-weight:600;margin-top:2px}
/* learn */
.learn{max-width:900px;margin:0 auto}
.learn .block{padding:26px;border-radius:22px;background:var(--surface);border:1px solid var(--line);margin-top:16px}
.learn h2{font-size:26px}.learn p{color:var(--muted);line-height:1.6;margin-top:10px;font-size:15px}
.learn ul{color:var(--muted);line-height:1.7;margin:10px 0 0 18px;padding:0}
.cmp{width:100%;border-collapse:collapse;margin-top:14px;font-size:13.5px}.cmp th,.cmp td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left}.cmp th{color:var(--dim);font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.cmp td.y{color:var(--up);font-weight:600}.cmp td.n{color:var(--down)}
.diagram{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:center;margin-top:18px}
.diagram .box{padding:14px;border-radius:14px;background:rgba(0,0,0,.3);border:1px solid var(--line);font-size:13px}
.diagram .box b{display:block;font-family:var(--fd);margin-bottom:6px}.diagram .arrow{font-size:26px;color:var(--gold)}
.wmenu{position:fixed;z-index:80;min-width:220px;padding:6px;border-radius:14px;background:rgba(16,18,24,.98);border:1px solid var(--line2);box-shadow:var(--shadow);animation:fade .15s}
.wmenu .wm-head{padding:8px 10px 10px;border-bottom:1px solid var(--line);margin-bottom:4px;display:flex;flex-direction:column;gap:2px}.wmenu .wm-head b{font-family:var(--fd)}.wmenu .wm-head .mono{font-size:11px}
.wmenu button{display:block;width:100%;text-align:left;padding:9px 10px;border-radius:9px;font-weight:500;color:var(--text)}.wmenu button:hover{background:var(--surface3)}.wmenu button.danger{color:var(--down)}
/* toasts + modal */
#toasts{position:fixed;right:18px;bottom:18px;z-index:100;display:flex;flex-direction:column;gap:8px}
.toast{padding:12px 14px;border-radius:14px;background:rgba(16,18,24,.95);border:1px solid var(--line2);box-shadow:var(--shadow);min-width:260px;max-width:360px;font-size:13px;animation:fade .25s;display:flex;gap:10px;align-items:center}
.toast.ok{border-color:rgba(61,255,160,.45)}.toast.err{border-color:rgba(255,77,109,.5)}.toast.gold{border-color:rgba(255,194,77,.5)}
.toast img{width:28px;height:28px;border-radius:8px;object-fit:cover}
#modal{position:fixed;inset:0;z-index:90;background:rgba(0,0,0,.6);backdrop-filter:blur(6px);display:grid;place-items:center;padding:20px}
#modal[hidden]{display:none}
.mbox{width:min(520px,100%);padding:22px;border-radius:22px;background:#0f1117;border:1px solid var(--line2);box-shadow:var(--shadow);animation:fade .25s}
.empty{padding:36px;text-align:center;color:var(--dim);border:1px dashed var(--line);border-radius:var(--r)}
.skeleton{height:120px;border-radius:var(--r);background:linear-gradient(90deg,var(--surface),var(--surface2),var(--surface));background-size:200% 100%;animation:sk 1.2s infinite}
@keyframes sk{to{background-position:-200% 0}}
.tick-up{animation:tu .7s}.tick-down{animation:td .7s}
@keyframes tu{0%{color:var(--up);text-shadow:0 0 12px rgba(61,255,160,.7)}100%{}}
@keyframes td{0%{color:var(--down);text-shadow:0 0 12px rgba(255,77,109,.7)}100%{}}
.payout-pop{position:fixed;left:50%;top:84px;transform:translateX(-50%);z-index:95;padding:12px 18px;border-radius:16px;background:rgba(16,18,24,.96);border:1px solid rgba(255,194,77,.5);box-shadow:0 0 40px rgba(255,194,77,.25);display:flex;align-items:center;gap:12px;animation:fade .3s}
.payout-pop b{color:var(--gold);font-family:var(--fd)}
.dev-note{padding:8px 12px;border-radius:10px;background:rgba(255,194,77,.08);border:1px solid rgba(255,194,77,.25);font-size:12px;color:var(--muted)}
.right{flex:none}
@media (max-width:1320px){.epoch-chip span:not(.dot){display:none}.epoch-chip{padding:0 10px}.links a{padding:8px 9px}}
@media (max-width:1100px){.tp,.form{grid-template-columns:minmax(0,1fr)}.stack>*,.side>*{min-width:0}.side,.preview{position:static;max-height:none}.kpis{grid-template-columns:repeat(3,1fr)}.hero{grid-template-columns:minmax(0,1fr)}.hero>*{min-width:0}.stats{grid-template-columns:repeat(2,1fr)}.links{display:none}.search{max-width:none}.epoch-chip{display:none}}
/* Five stats and 22px gaps do not fit a phone in one row. Wrapping onto two is the honest answer:
a min-width gives each cell a floor so flex cannot shave them, and the row breaks instead. */
@media (max-width:640px){
.king .kp{flex-wrap:wrap;gap:12px 18px}
.king .kp>*{min-width:86px;flex:0 1 auto}
}
@media (max-width:640px){#nav{padding:0 14px;gap:10px}#app{padding:14px 16px 40px}.hero{padding:22px 18px}.stats{grid-template-columns:1fr 1fr}#nav .btn.cta{display:none}.king{grid-template-columns:1fr}.rail{grid-auto-columns:minmax(260px,1fr)}.chart-wrap{height:320px}.kpis{grid-template-columns:repeat(2,1fr)}.thead .price{margin-left:0;text-align:left;width:100%}.search kbd{display:none}.brand .word{display:none}.btn.wallet{padding:0 10px;max-width:120px;overflow:hidden}.btn.wallet .mono,.btn.wallet .mono+span{display:none}#nav .right{gap:6px}}
/* footer */
#foot{max-width:min(1760px, calc(100vw - 48px));margin:0 auto;padding:22px 22px 34px;display:flex;align-items:center;justify-content:space-between;gap:16px;border-top:1px solid var(--line);color:var(--dim);font-size:12.5px;flex-wrap:wrap}
#foot .fw{display:flex;align-items:center;gap:12px}#foot .word{font-family:var(--fd);font-weight:700;letter-spacing:.14em;color:var(--muted)}#foot .tag{color:var(--dim)}
#foot .fl{display:flex;gap:16px;align-items:center;flex-wrap:wrap}#foot .fl a:hover{color:var(--text)}
/* a11y + motion */
:focus-visible{outline:2px solid rgba(255,194,77,.7);outline-offset:2px;border-radius:8px}
.search input:focus-visible,.amt input:focus-visible,.field input:focus-visible,.field textarea:focus-visible,.chat input:focus-visible{outline:none}
@media (prefers-reduced-motion:reduce){.tape-track{animation:none}.prog>i::after,.epoch-chip .dot,.sec h2 .live-dot{animation:none}.card.in,.fade,.toast,.mbox,.payout-pop,.wmenu{animation:none}}
#tabBody,.panel:has(>.tbl),.learn .block{overflow-x:auto}
.tabs{max-width:100%;overflow-x:auto;scrollbar-width:none}.tabs::-webkit-scrollbar{display:none}.tabs button{flex:none}
.card .av,.thead .av{box-shadow:0 0 0 1px rgba(255,255,255,.06),0 6px 18px rgba(0,0,0,.35)}
.king .av{box-shadow:0 0 0 1px rgba(255,194,77,.35),0 0 28px rgba(255,194,77,.18)}
.btn.go:hover{filter:brightness(1.06)}.btn.buy:hover{box-shadow:0 10px 34px rgba(61,255,160,.35)}.btn.sell:hover{box-shadow:0 10px 34px rgba(255,77,109,.35)}
.thead h1{max-width:60vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:640px){.thead h1{max-width:100%;white-space:normal}.sec{flex-wrap:wrap}.tp{gap:12px}.chart-wrap .tools{flex-wrap:wrap;max-width:calc(100% - 20px)}.chart-wrap .tools .tabs button{padding:0 9px;font-size:11.5px;height:26px}.chart-wrap{height:360px}.payout-pop{width:calc(100% - 24px);top:76px;font-size:12.5px}}
/* mobile tab bar + token trade bar */
#mnav{display:none}
#mtrade{display:none}
#tape::before{z-index:3}
#livedot{position:absolute;left:10px;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;background:var(--up);box-shadow:0 0 10px var(--up);z-index:4;transition:.3s}
#tape.offline #livedot{background:var(--dim);box-shadow:none}
.tape-track{padding-left:28px}
.stackav{display:flex}.stackav img{margin-left:-6px;border:2px solid #10121a;border-radius:7px}.stackav img:first-child{margin-left:0}
@media (max-width:1100px){
/* ⛔ `position:fixed` AND `backdrop-filter` ON THE SAME ELEMENT DRIFTS ON iOS SAFARI.
The filter moves the element onto a compositing path where WebKit stops re-pinning it to the
viewport during momentum scrolling, so the bar slides up into the middle of the page — Elio
screenshotted it floating above the footer. It is correct in every desktop engine and in
Chrome's device emulation, which is why it shipped; only real iOS shows it.
The bar stays fixed and the blur moves to a child layer, which is the combination WebKit
handles. `translateZ(0)` promotes the bar itself so the two layers cannot disagree. */
#mnav{position:fixed;left:0;right:0;bottom:0;z-index:60;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);padding:6px 8px calc(6px + env(safe-area-inset-bottom));border-top:1px solid var(--line);transform:translateZ(0);will-change:transform;isolation:isolate}
#mnav::before{content:"";position:absolute;inset:0;background:rgba(9,10,14,.92);backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%)}
#mnav>*{position:relative}
#mnav a{display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 0;border-radius:12px;color:var(--dim);font-size:10px;font-weight:600;letter-spacing:.01em;white-space:nowrap}
#mnav a svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
#mnav a.active{color:var(--text)}#mnav a.mk{margin-top:-8px}#mnav a.mk svg{width:34px;height:34px;padding:6px;border-radius:11px;background:var(--grad);stroke:#140a02;box-shadow:0 6px 18px rgba(255,120,40,.35)}
#app{padding-bottom:96px}#foot{padding-bottom:110px}
body.token-page #mnav{display:none}
body.token-page #mtrade{position:fixed;left:0;right:0;bottom:0;z-index:60;display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:rgba(9,10,14,.92);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-top:1px solid var(--line)}
body.token-page #mtrade .btn{height:46px;font-size:15px}body.token-page #mtrade .btn.cta{grid-column:1/-1}
#toasts{bottom:96px}
}
/* REX hero mascot + hold gate */
.hero{grid-template-columns:1.15fr .85fr}
.heromask{position:relative;justify-self:center;width:100%;max-width:420px;aspect-ratio:1;background:url('/brand/rex-hero.jpg') center/cover;-webkit-mask-image:radial-gradient(closest-side,#000 52%,transparent 78%);mask-image:radial-gradient(closest-side,#000 52%,transparent 78%);filter:saturate(1.05);animation:float 7s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(-6px)}50%{transform:translateY(6px)}}
.hero .usps{gap:10px}
.gate{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:999px;border:1px solid rgba(34,197,94,.3);background:rgba(34,197,94,.07);font-size:12.5px;color:var(--muted)}
.gate b{color:var(--rex);font-family:var(--fm)}
.gate.blocked{border-color:rgba(255,84,112,.35);background:rgba(255,84,112,.07)}.gate.blocked b{color:var(--down)}
.tier.m3{background:rgba(157,255,143,.12);color:var(--lime);border-color:rgba(157,255,143,.4)}
.chip.conv{border-color:rgba(34,197,94,.35);background:rgba(34,197,94,.09);color:var(--rex)}
.chip.fair{border-color:rgba(157,255,143,.35);background:rgba(157,255,143,.08);color:var(--lime)}
.epoch-chip{border-color:rgba(34,197,94,.25);background:rgba(34,197,94,.06)}.epoch-chip b{color:var(--rex)}.epoch-chip .dot{background:var(--rex);box-shadow:0 0 10px var(--rex)}
.king{background:linear-gradient(120deg,rgba(34,197,94,.13),rgba(21,128,61,.06) 60%,transparent);border-color:rgba(34,197,94,.3)}
.king::before{background-image:var(--ic-rex)}
.king .crown{color:var(--rex)}
.fo{border-color:rgba(157,255,143,.3);background:linear-gradient(180deg,rgba(157,255,143,.07),rgba(157,255,143,.02))}
.cv{border-color:rgba(34,197,94,.26);background:linear-gradient(180deg,rgba(34,197,94,.07),rgba(34,197,94,.015))}
.ring .fg{stroke:var(--rex);filter:drop-shadow(0 0 6px rgba(34,197,94,.6))}.ring .t{color:var(--rex)}
.fo-line{background:rgba(157,255,143,.06);border-color:rgba(157,255,143,.2)}.fo-line b{color:var(--lime)}
.stat::after{background:var(--grad)}
.ladder .st.on{border-color:rgba(34,197,94,.55);background:rgba(34,197,94,.12);box-shadow:0 0 18px rgba(34,197,94,.15)}.ladder .st.on .m{color:var(--rex)}
.ladder .st.past .m{color:var(--rex)}
#mnav a.mk svg{stroke:#04170b}
.gold{color:var(--lime)}.ember{color:var(--rex)}
@media (max-width:1100px){.hero{grid-template-columns:minmax(0,1fr)}.hero>*{min-width:0}.heromask{max-width:300px;order:-1}}
/* rewards */
.bkts{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.bkt{padding:18px;border-radius:var(--r);background:var(--surface);border:1px solid var(--line);position:relative;overflow:hidden}
.bkt::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--grad);opacity:.55}
.bkt .pct{font-family:var(--fd);font-size:34px;font-weight:700;color:var(--rex);letter-spacing:-.02em}
.bkt .bl{font-weight:600;margin-top:4px}
.bkt .bt{font-family:var(--fm);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin-top:4px}
@media (max-width:640px){.bkts{grid-template-columns:1fr 1fr}.bkt .pct{font-size:26px}}
.claimbox{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;padding:12px 14px;border-radius:14px;background:rgba(157,255,143,.08);border:1px solid rgba(157,255,143,.28)}
/* test-network banner */
#chainbar{position:fixed;left:0;right:0;bottom:0;z-index:70;display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;
padding:9px 16px calc(9px + env(safe-area-inset-bottom));background:rgba(255,196,107,.1);border-top:1px solid rgba(255,196,107,.35);
backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);font-size:12.5px;color:var(--muted)}
#chainbar .cb-tag{font-family:var(--fm);font-size:10.5px;letter-spacing:.14em;padding:3px 8px;border-radius:999px;background:rgba(255,196,107,.16);color:#ffc46b;border:1px solid rgba(255,196,107,.4)}
#chainbar button{height:28px;padding:0 12px;border-radius:999px;border:1px solid rgba(157,255,143,.35);background:rgba(157,255,143,.12);color:var(--lime);font-weight:600;font-size:12px;cursor:pointer}
#chainbar button:hover{background:rgba(157,255,143,.2)}#chainbar button:disabled{opacity:.5}
#chainbar a{color:var(--muted);text-decoration:underline}
body:has(#chainbar) #foot{padding-bottom:70px}
@media (max-width:1100px){#chainbar{bottom:73px}body:has(#chainbar) #mnav{bottom:0}}
/* ---- fee module: the live sum, shown on the front screen and on Advanced ---- */
.opts.tight{grid-template-columns:repeat(auto-fit,minmax(58px,1fr))}
.opts.tight button{min-height:34px;font-size:12px}
.opts button.blocked{opacity:.3;cursor:not-allowed}
.tabs.big{width:100%;margin-bottom:10px}
.tabs.big button{flex:1;height:36px;font-size:13px}
.feesum{margin-top:14px;padding:12px;border-radius:13px;border:1px solid var(--line);background:var(--surface);transition:.2s}
.feesum.over{border-color:rgba(255,84,112,.5);background:rgba(255,84,112,.07)}
.feesum .l{font-size:12px;color:var(--muted);font-weight:600}
.feesum .v{font-family:var(--fm);font-size:19px;font-weight:700;color:var(--gold)}
.feesum.over .v{color:var(--down)}
.feesum .v .dim{font-size:12px;font-weight:500}
.fsbar{display:flex;gap:2px;height:9px;margin:9px 0 8px;border-radius:5px;overflow:hidden;background:rgba(0,0,0,.35)}
.fsg{display:inline-block;border-radius:3px}
.fsg.h{background:var(--up)}.fsg.c{background:var(--gp)}.fsg.v{background:var(--usdc)}.fsg.b{background:var(--down)}.fsg.k{background:#a78bfa}
.fsg.rest{background:rgba(255,255,255,.06)}
.fslegend{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:11.5px;color:var(--muted)}
.fslegend span{display:flex;align-items:center;gap:5px}
.fslegend .fsg{width:8px;height:8px;border-radius:2px;flex:0 0 auto}
.fslegend small{color:var(--dim);font-size:10.5px}
.fserr{margin-top:8px;font-size:11.5px;color:var(--down);font-weight:600}
.btn.bad{opacity:.5;cursor:not-allowed}
.vaultaddr{margin-top:12px;padding:9px 11px;border-radius:11px;background:rgba(39,117,202,.08);border:1px solid rgba(39,117,202,.25);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.vaultaddr code{font-size:11px;color:var(--text);word-break:break-all;flex:1 1 200px}
.note.gold{color:var(--gold)}
/* ---- Against the field ---- */
.vs{width:100%;border-collapse:collapse;font-size:12.5px;margin-top:10px}
.vs th,.vs td{padding:9px 10px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.vs th{font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--dim);font-weight:600}
.vs th.rex,.vs td.rex{background:rgba(34,197,94,.07)}
.vs th.rex{color:var(--ember)}
.vs td:first-child{color:var(--muted);font-weight:600;white-space:nowrap}
.vs td.rex{color:var(--text);font-weight:500}
/* ---- social / growth layer ---- */
.sharebox{margin-top:12px;padding:12px;border-radius:13px;border:1px solid rgba(34,197,94,.28);background:rgba(34,197,94,.06)}
.sharebox b{font-size:13.5px}
.reflink{display:flex;align-items:center;gap:8px;margin-top:9px;padding:8px 10px;border-radius:10px;background:rgba(0,0,0,.3);border:1px solid var(--line)}
.reflink code{flex:1 1 auto;min-width:0;font-size:11.5px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.posts{margin-top:10px;display:flex;flex-direction:column;gap:8px}
.post{padding:9px 11px;border-radius:11px;background:var(--surface);border:1px solid var(--line);font-size:13px;line-height:1.5}
.post .dim{font-size:11px}
@media (max-width:560px){ .reflink code{font-size:10.5px} }
.repbox{margin-top:12px;padding:12px;border-radius:13px;border:1px solid var(--line);background:var(--surface)}
.replist{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:9px;font-size:11.5px;color:var(--dim)}
.replist span{display:flex;flex-direction:column;gap:1px}
.replist b{font-family:var(--fm);font-size:13px;color:var(--text);font-weight:600}
.marks{display:flex;flex-wrap:wrap;gap:5px;margin-top:5px}
.mark{font-size:10.5px;padding:3px 8px;border-radius:999px;background:rgba(34,197,94,.1);border:1px solid rgba(34,197,94,.3);color:var(--ember)}
.verbs{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px;margin:18px 0 20px}
.verbs a{padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:var(--surface);display:flex;flex-direction:column;gap:2px;transition:.15s}
.verbs a:hover{border-color:rgba(34,197,94,.45);background:rgba(34,197,94,.06)}
.verbs b{font-size:14px;color:var(--text)}
.verbs span{font-size:11px;color:var(--dim)}
@media (max-width:560px){ .verbs{grid-template-columns:repeat(2,1fr)} }
.needroom{padding:10px 12px;border-radius:11px;background:rgba(255,194,77,.07);border:1px solid rgba(255,194,77,.26);font-size:12.5px;color:var(--muted);line-height:1.5}
.needroom .btn{margin-top:8px}
/* The REX NFT picker on the welcome screen. Square, because NFT art is square and a circle would
crop the corners off work somebody paid for. */
.nftpick{width:60px;height:60px;padding:0;border:2px solid var(--line);border-radius:12px;overflow:hidden;background:#0f1117;cursor:pointer;flex-shrink:0}
.nftpick img{width:100%;height:100%;object-fit:cover;display:block}
.nftpick.on{border-color:var(--gold);box-shadow:0 0 0 3px rgba(255,196,77,.18)}
.nftpick:hover{border-color:var(--gold)}
/* ---------- Points board
Rank, who, held, points — in that order, because the question people arrive with is "where am I"
and the one they stay for is "who is ahead of me". */
.prow{display:grid;grid-template-columns:48px 1fr auto auto;gap:12px;align-items:center;padding:12px 16px;border-bottom:1px solid var(--line)}
.prow:last-child{border-bottom:0}
.pr-rank{font-weight:700;color:var(--muted);font-size:15px;text-align:center}
.pr-who{display:flex;gap:10px;align-items:center;min-width:0}
.pr-who .av{width:34px;height:34px;border-radius:50%;object-fit:cover;flex-shrink:0}
.pr-who .av-ph{display:grid;place-items:center;background:#1c1f2a;font-size:16px}
.pr-badges{display:flex;gap:5px;flex-wrap:wrap;margin-top:3px}
.pb{font-size:10px;padding:2px 7px;border-radius:999px;border:1px solid var(--line2);color:var(--muted);white-space:nowrap}
.pb.dia{border-color:var(--gold);color:var(--gold)}
.pb.og{border-color:#7c5cff;color:#a98bff}
.pr-held,.pr-pts{text-align:right;font-variant-numeric:tabular-nums;font-weight:600}
.pr-pts{color:var(--gold);min-width:74px}
.pr-held{color:var(--muted);min-width:56px;font-weight:500}
.pr-held small,.pr-pts small{display:block;font-size:10px;font-weight:400;color:var(--muted);opacity:.75}
.pme-grid{display:flex;gap:28px;flex-wrap:wrap;align-items:flex-start}
.pme-grid .l{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.pme-grid .v{font-size:26px;font-weight:700;margin-top:2px}
.pme-grid .chase{margin-left:auto;text-align:right}
.pbreak{display:flex;flex-wrap:wrap;gap:10px 22px}
.pbreak span{display:flex;flex-direction:column;gap:2px;font-size:12px;color:var(--muted)}
.pbreak b{font-size:16px;color:var(--text);font-variant-numeric:tabular-nums}
.pbreak.earn b{color:var(--gold)}
.pbreak small{font-size:11px;opacity:.8;max-width:30ch}
.soon{opacity:.72}
@media(max-width:520px){
.prow{grid-template-columns:34px 1fr auto;gap:8px;padding:10px 12px}
.pr-held{display:none} /* the rank, who, and the score — a phone has room for three columns */
.pme-grid{gap:18px}
.pme-grid .chase{margin-left:0}
}
/* ---------- featured coin bar
Reads as one line of facts, not an advert. The disclaimer is part of the bar rather than a
tooltip, because the numbers beside it are real money and the book around them is not.
⛔ THE COIN ARTWORK IS THE POINT OF THE BAR AND IT WAS 20px. REXMARS is a 900px render — an alien
on a gold-ringed Mars disc — and at 20 square it read as a green smudge, which is what a logo
shown at two percent of its size looks like. It now fills the bar's height. Nothing about the
source changed; it was never a resolution problem. */
#featbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:7px 16px;
background:linear-gradient(90deg,rgba(34,197,94,.10),transparent 60%);
border-bottom:1px solid var(--line);font-size:12.5px}
.fb-tag{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--gold);
border:1px solid var(--gold);border-radius:999px;padding:2px 8px;flex-shrink:0}
/* ⛔ THE ROW SCROLLS RATHER THAN WRAPS, AT EVERY WIDTH. It used to wrap, which was fine for the two
pinned coins it was built for; carrying every launch, wrapping turns a one-line strip into a
block that pushes the whole page down and grows with each new coin. One rail, scrolled sideways,
stays one line however many coins exist. Snap points stop it resting mid-coin. */
.fb-row{display:flex;align-items:stretch;gap:8px;flex-wrap:nowrap;min-width:0;flex:1;
overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity;overscroll-behavior-x:contain;
-webkit-overflow-scrolling:touch}
.fb-row::-webkit-scrollbar{display:none}
.fb-row>.fb-item{scroll-snap-align:start;flex:none}
/* "There is more this way" — only drawn when it is true, toggled from JS because CSS cannot ask
whether an element overflows. */
#featbar{position:relative}
#featbar.scrolls::after{content:"";position:absolute;right:0;top:0;bottom:0;width:56px;pointer-events:none;
background:linear-gradient(90deg,transparent,var(--bg));opacity:.95;transition:opacity .2s}
#featbar.scrolls.at-end::after{opacity:0}
/* Our own launches read as ours; the pinned mainnet coins keep their own treatment. */
.fb-item.own .fb-sym{color:var(--text)}
.fb-item.own:hover{background:rgba(255,255,255,.06)}
.fb-item{display:flex;align-items:center;gap:10px;padding:4px 12px 4px 6px;border-radius:999px;
border:1px solid transparent;background:transparent;color:inherit;font:inherit;cursor:pointer;
text-align:left;transition:background .15s,border-color .15s}
.fb-item:hover{background:rgba(255,255,255,.05);border-color:var(--line2)}
.fb-item.rex{background:rgba(34,197,94,.08);border-color:rgba(34,197,94,.28)}
.fb-item.rex:hover{background:rgba(34,197,94,.14)}
/* Big enough to actually read the artwork, with the ring the coins draw for themselves. */
.fb-img{width:34px;height:34px;border-radius:50%;object-fit:cover;flex-shrink:0;
box-shadow:0 0 0 1px rgba(255,255,255,.10),0 2px 8px rgba(0,0,0,.45);background:#0b0d12}
.fb-txt{display:flex;flex-direction:column;gap:1px;min-width:0}
.fb-top,.fb-bot{display:flex;align-items:baseline;gap:7px;white-space:nowrap}
.fb-sym{color:var(--text)}
.fb-pair,.fb-note{color:var(--muted)}
.fb-mc,.fb-vol{color:var(--text);font-variant-numeric:tabular-nums;font-size:11.5px}
.fb-bot{opacity:.82}
.fb-mc small,.fb-vol small{color:var(--muted);font-size:10px;margin-left:4px}
.fb-ch{font-size:11.5px} .fb-ch.up{color:var(--ember)} .fb-ch.down{color:#ff4d6d}
.fb-note{font-size:11px;opacity:.8;margin-left:auto}
@media(max-width:620px){
/* The ROW owns the scrolling now, so the bar itself must not also scroll — two nested scrollers
fight each other and the outer one steals the gesture. */
#featbar{gap:8px;padding:6px 10px;font-size:12px;flex-wrap:nowrap;overflow:hidden}
.fb-tag{display:none} /* the bar's own position already says what it is */
.fb-row{flex-wrap:nowrap}
.fb-img{width:30px;height:30px}
.fb-vol,.fb-note{display:none} /* symbol, cap and move survive; the rest is desktop detail */
}
/* The featured sheet: somebody else's chart and a Jupiter route, in one box. */
.fbmodal{width:min(760px,100%);padding:0;overflow:hidden}
.fbhead{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line)}
.fbhead h3{font-size:19px;margin:0}
.fbhead p{font-size:12px;margin:3px 0 0}
.fbhead .btn{margin-left:auto;flex-shrink:0}
.fbh-img{width:52px;height:52px;border-radius:50%;object-fit:cover;flex-shrink:0;
box-shadow:0 0 0 1px rgba(255,255,255,.12),0 3px 14px rgba(0,0,0,.5)}
.fbchart{height:340px;background:#0b0d12;border-bottom:1px solid var(--line)}
.fbchart iframe{width:100%;height:100%;border:0;display:block}
.fbswap{padding:16px 18px 18px}
.fbswap .row{display:flex;align-items:center;gap:10px}
.fbswap .row.between{justify-content:space-between}
.fbswap .l{font-size:12.5px;color:var(--muted)}
.fbswap input{flex:1;min-width:0;background:rgba(255,255,255,.03);border:1px solid var(--line2);
border-radius:12px;padding:12px 14px;color:var(--text);font:600 19px/1 'JetBrains Mono',ui-monospace,monospace}
.fbunit{font-size:13px;color:var(--muted);flex-shrink:0}
.fbquick{display:flex;gap:6px;margin-top:8px}
.fbquick button{flex:1;padding:6px 0;border-radius:9px;border:1px solid var(--line2);
background:transparent;color:var(--muted);font-size:12px;cursor:pointer}
.fbquick button:hover{color:var(--text);border-color:var(--gold)}
.fbmeta{display:flex;gap:12px;flex-wrap:wrap;margin-top:5px;font-size:11.5px}
@media(max-width:620px){
.fbchart{height:260px}
.fbh-img{width:42px;height:42px}
.fbhead,.fbswap{padding-left:14px;padding-right:14px}
}
/* A pasted wallet is a public record, so say so rather than making people infer it. */
.pubnote{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:12.5px;color:var(--muted);
padding:8px 14px;margin-bottom:14px;border:1px solid var(--line);border-radius:10px;background:rgba(255,255,255,.02)}
.field.lookup input{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px}
/* The burn pot fills toward the threshold that triggers the next buy. */
.prog.burnbar i{background:linear-gradient(90deg,#ff7a18,#ffb347)}
/* Burn history — one row per burn, each with the transaction that proves it. */
.burnlist{margin-top:16px;border-top:1px solid var(--line);max-height:280px;overflow-y:auto}
.brow{display:grid;grid-template-columns:22px 1fr auto auto;gap:10px;align-items:center;
padding:9px 2px;border-bottom:1px solid var(--line);font-size:13px}
.brow:last-child{border-bottom:0}
.bamt{color:var(--text)} .bwhen{color:var(--muted);font-size:12px} .btx{color:var(--gold);font-size:12px}
.btx.dim{color:var(--muted)}
/* The pot is live, so the bar is too — a slow ember travelling the fill, not a loop demanding
attention. Stopped outright for anyone who asked for less motion. */
.prog.burnbar i{background:linear-gradient(90deg,#ff7a18,#ffb347,#ff7a18);background-size:220% 100%;
animation:ember 3.2s ease-in-out infinite}
@keyframes ember{0%,100%{background-position:0% 0}50%{background-position:100% 0}}
@media(prefers-reduced-motion:reduce){.prog.burnbar i{animation:none}}
@media(max-width:520px){.brow{grid-template-columns:20px 1fr auto;gap:8px}.bwhen{display:none}}
/* The burn, on the front page. One line of facts that reads as momentum, not an advert — the
numbers are real and large, so they do the work without a gradient shouting over them. */
/* The pot bar on the front-page burn strip. Full width on its own row beneath the figures, so it
reads as the strip's progress rather than as another statistic competing with them. */
.bs-pot{flex-basis:100%;margin-top:2px}
.bs-pot .prog{margin-top:6px}
.bs-pot .prog-l{margin-top:4px;font-size:10.5px}
/* ---- Buyback and burn, on the front page. Elio, 5 Oct: "I like it bigger and more easy to read
and big flames 🔥", with a layout to match — eyebrow, headline, the last burn, two large figures,
a wide pot bar, and fire across the bottom.
⛔ It replaced a 96px STRIP, and the strip is why the fire never worked. Julz reported the burn
section as having no flames while nine embers were genuinely animating: at that height they were
a few pixels of warmth behind a line of text. Height is the feature here, not decoration — the
panel is sized so the fire has somewhere to burn. */
.burnhero{position:relative;display:block;overflow:hidden;text-decoration:none;
margin-top:14px;padding:22px 24px 34px;min-height:340px;border-radius:20px;
border:1px solid rgba(255,122,24,.32);
background:radial-gradient(120% 150% at 100% 0%,rgba(255,122,24,.16),transparent 58%),var(--panel);
transition:border-color .18s,transform .18s,box-shadow .18s}
.burnhero:hover{border-color:rgba(255,122,24,.6);transform:translateY(-2px);
box-shadow:0 16px 48px rgba(255,90,20,.14)}
.burnhero .bh-body{position:relative;z-index:2;display:block;max-width:min(100%,660px)}
.bh-tag{display:flex;align-items:center;gap:7px;font-size:11.5px;font-weight:600;
text-transform:uppercase;letter-spacing:.14em;color:#ffb347}
.bh-h{display:block;margin-top:10px;font-family:var(--fd);font-weight:700;
/* Scales with the viewport so it stays a headline on a phone instead of three cramped lines. */
font-size:clamp(24px,5.2vw,38px);line-height:1.08;color:var(--text);letter-spacing:-.01em}
.bh-last{display:block;margin-top:12px;font-size:13px;color:var(--muted)}
.bh-last::before{content:"";display:block;width:34px;height:3px;border-radius:2px;margin-bottom:10px;
background:linear-gradient(90deg,#ff7a18,#ffc45a)}
/* auto-fit, so three figures sit in a row on a wide card and stack cleanly on a narrow one without
ever being squeezed into an unreadable column. */
.bh-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px 22px;margin-top:18px}
.bh-stat{display:block;min-width:0}
.bh-n{display:block;font-size:clamp(22px,4vw,30px);font-weight:700;color:var(--text);
font-variant-numeric:tabular-nums;line-height:1.1;letter-spacing:-.01em}
.bh-l{display:block;margin-top:4px;font-size:11px;font-weight:600;text-transform:uppercase;
letter-spacing:.1em;color:var(--dim);line-height:1.35}
.bh-pot{display:block;margin-top:20px}
/* ⛔ display:block — .prog sets a height but never a display, and on /rewards it happens to be a