/* OXIDE. One ASCII scene behind the whole site (stage.js); the page is only thin mono text on top of it.
   No panels, no cards, no boxes: lines, words and the scene. */
@font-face { font-family: "Geist Mono"; src: url("../fonts/geist-mono-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("../fonts/geist-mono-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Geist Sans"; src: url("../fonts/geist-sans-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
  --bg: #0a0d0f; --ink: #e6e9ea; --ink-2: #9aa3a7; --ink-3: #5f696d; --line: rgba(230,233,234,.1); --line-2: rgba(230,233,234,.22);
  --burn: #d4561c; --vault: #4a78e6; --liquidity: #4fc1b2; --volume: #d6a23c; --mm: #86a64a;
  --mono: "Geist Mono", ui-monospace, monospace; --sans: "Geist Sans", "Geist Mono", sans-serif;
  --gutter: 28px;
}
@media (max-width: 760px) { :root { --gutter: 16px; } }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--mono); font-size: 13px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
input, textarea, select { font: inherit; color: inherit; }
img { display: block; max-width: 100%; }
::selection { background: var(--ink); color: var(--bg); }
:focus-visible { outline: 1px solid var(--ink); outline-offset: 3px; }
[hidden] { display: none !important; }
.mode-burn { --mode: var(--burn); } .mode-vault { --mode: var(--vault); } .mode-liquidity { --mode: var(--liquidity); } .mode-volume { --mode: var(--volume); } .mode-mm { --mode: var(--mm); }
svg.glyph { overflow: visible; }
.dim { color: var(--ink-3); } .muted { color: var(--ink-2); }

/* the stage */
#oxide-stage { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 0; display: block; opacity: 0; transition: opacity .9s ease; }
#oxide-stage.ready { opacity: 1; }
body > *:not(#oxide-stage):not(.hint):not(.top):not(.bar):not(.toast):not(.wsheet) { position: relative; z-index: 1; }
.no-gl-word { display: none; }
body.no-gl .no-gl-word { display: block; font-family: var(--sans); font-weight: 600; font-size: 16vw; letter-spacing: -.04em; text-align: center; padding-top: 18vh; }

/* header: the same thin line as the first screen */
.top { position: fixed !important; top: 0; left: 0; right: 0; z-index: 20 !important; display: flex; align-items: center; gap: 24px; padding: 20px var(--gutter); background: linear-gradient(rgba(10,13,15,.85), rgba(10,13,15,0)); }
.brand { font-weight: 600; letter-spacing: .32em; font-size: 13px; display: flex; align-items: center; gap: 12px; }
.brand img { width: 26px; height: 26px; display: block; border-radius: 50%; }
.nav { display: flex; gap: 24px; margin: 0 auto; color: var(--ink-2); font-size: 13px; }
.nav a:hover, .nav a.on { color: var(--ink); }
.nav a.on::before { content: "> "; color: var(--ink-3); }
.right { display: flex; align-items: center; gap: 18px; font-size: 13px; color: var(--ink-2); }
.right a:hover, .right button:hover { color: var(--ink); }
.right svg { width: 13px; height: 13px; fill: currentColor; vertical-align: -2px; }
.connect { border: 1px solid var(--line-2); padding: 7px 12px; color: var(--ink); }
.connect:hover { border-color: var(--ink); }
.burger { display: none; font-size: 18px; }
@media (max-width: 1000px) {
  .nav { display: none; } .burger { display: block; } .right .cab { display: none; }
  .nav.open { display: flex; flex-direction: column; gap: 14px; position: absolute; top: 60px; left: 0; right: 0; padding: 18px var(--gutter); background: rgba(10,13,15,.96); margin: 0; }
}
@media (max-width: 560px) { .connect { padding: 6px 9px; font-size: 12px; } .right { gap: 12px; } }

/* the live line at the bottom: no bar, just a line of text */
.bar { position: fixed !important; z-index: 20 !important; left: 0; right: 0; bottom: 0; display: flex; gap: 14px; align-items: center; padding: 10px var(--gutter); font-size: 11px; color: var(--ink-3); white-space: nowrap; pointer-events: none; background: linear-gradient(rgba(10,13,15,0), rgba(10,13,15,.8)); }
.bar b { color: var(--ink-2); font-weight: 600; }
.bar .ev { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.bar .ev b { color: var(--mode, var(--ink)); }
.live { display: inline-flex; align-items: center; gap: 7px; }
.live i { width: 6px; height: 6px; background: var(--liquidity); display: inline-block; animation: blink 1.6s steps(2) infinite; }
@keyframes blink { 50% { opacity: .25; } }
@media (max-width: 640px) { .bar .hide-s { display: none; } }

/* buttons, exactly as on the first screen */
.btn { display: inline-flex; align-items: center; gap: 10px; border: 1px solid var(--ink); padding: 11px 16px; font-size: 13px; background: transparent; color: var(--ink); transition: background .2s, color .2s; }
.btn:hover { background: var(--ink); color: var(--bg); }
.btn.primary { background: var(--ink); color: var(--bg); }
.btn.primary:hover { background: transparent; color: var(--ink); }
.btn.small { padding: 7px 11px; font-size: 12px; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.cta-row { display: flex; gap: 10px; flex-wrap: wrap; }
.link { border-bottom: 1px solid var(--ink-3); } .link:hover { border-color: var(--ink); }
.chip { display: inline-flex; align-items: center; gap: 7px; padding: 4px 0; font-size: 12px; color: var(--ink-3); border-bottom: 1px solid transparent; margin-right: 14px; }
.chip i { width: 6px; height: 6px; background: var(--mode, var(--ink)); display: inline-block; }
.chip:hover { color: var(--ink); }
.chip.on { color: var(--ink); border-bottom-color: var(--ink); }
.tagbox { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--ink-2); white-space: nowrap; }
.tagbox i { width: 6px; height: 6px; background: var(--mode, var(--ink-3)); display: inline-block; }
.kind { font-size: 10px; letter-spacing: .08em; color: var(--ink-2); }
.kind::before { content: "["; color: var(--ink-3); } .kind::after { content: "]"; color: var(--ink-3); }
.kind.AI { color: var(--ink); }

/* scenes: each section is a screen; its text sits at the bottom, like the first screen */
.scene { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; padding: 110px var(--gutter) 88px; }
/* a soft dark halo behind text that sits on the scene (not a box) */
.say, .cols2, .cols2b, .legend5, .intro > *, .body { text-shadow: 0 0 14px #0a0d0f, 0 0 4px #0a0d0f; }
.scene.top-text { justify-content: flex-start; padding-top: 120px; }
.veil { background: linear-gradient(to top, rgba(10,13,15,.92) 0, rgba(10,13,15,.75) 40%, rgba(10,13,15,0)); margin: 0 calc(var(--gutter) * -1) -88px; padding: 90px var(--gutter) 88px; }
.row { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; }
.say { max-width: 520px; }
.say p { margin: 0 0 6px; font-size: 15px; line-height: 1.55; }
.say p.sub { color: var(--ink-2); font-size: 13px; margin-bottom: 18px; }
.lbl { font-size: 12px; color: var(--mode, var(--ink-3)); margin-bottom: 12px; }
.lbl b { color: var(--ink-3); font-weight: 400; margin-right: 10px; }
.hint { position: fixed; z-index: 2; top: 70px; left: 50%; transform: translateX(-50%); font-size: 11px; color: var(--ink-3); letter-spacing: .06em; pointer-events: none; white-space: nowrap; transition: opacity .4s; }
.scrolled .hint { opacity: 0; }
.stats { display: flex; gap: 26px; flex-wrap: wrap; margin-top: 18px; font-size: 12px; color: var(--ink-3); }
.stats b { color: var(--ink); font-weight: 600; margin-left: 6px; }
@media (max-width: 760px) { .row { flex-direction: column; align-items: stretch; gap: 24px; } .hint { display: none; } }

/* the five agents legend */
.legend5 { display: grid; grid-template-columns: repeat(5, auto); gap: 4px 22px; font-size: 12px; color: var(--ink-2); }
.legend5 a { display: flex; flex-direction: column; gap: 6px; padding: 4px 0; }
.legend5 b { color: var(--ink); font-weight: 600; display: flex; align-items: center; gap: 8px; }
.legend5 b i { width: 8px; height: 8px; display: inline-block; background: var(--mode); box-shadow: 0 0 12px var(--mode); }
.legend5 span { max-width: 150px; line-height: 1.45; transition: color .2s; }
.legend5 a:hover span { color: var(--ink); }
@media (max-width: 1100px) { .legend5 { grid-template-columns: repeat(3, auto); } }
@media (max-width: 760px) { .legend5 { grid-template-columns: repeat(2, 1fr); } .legend5 span { display: none; } }

/* an agent screen */
.acard .facts { display: grid; grid-template-columns: 120px 1fr; gap: 6px 18px; font-size: 13px; margin: 18px 0; max-width: 560px; }
.acard .facts dt { color: var(--ink-3); }
.acard .facts dd { margin: 0; color: var(--ink); }
.acard .facts dd.never { color: var(--ink-2); }
.acard .count { font-size: 12px; color: var(--ink-3); text-align: right; }
.acard .count big { display: block; font-family: var(--sans); font-size: 56px; letter-spacing: -.04em; color: var(--mode); line-height: 1; }
.acard .glyphface svg { width: 64px; height: 64px; }
@media (max-width: 760px) { .acard .facts { grid-template-columns: 1fr; } .acard .facts dt { margin-top: 8px; } }

/* flow line (80/20, steps) */
.flow { display: flex; flex-wrap: wrap; gap: 8px 14px; font-size: 12px; color: var(--ink-3); margin-top: 18px; }
.flow b { color: var(--ink); font-weight: 600; }
.flow span::after { content: " ->"; color: var(--ink-3); }
.flow span:last-child::after { content: ""; }
.split { font-size: 12px; color: var(--ink-2); margin-top: 18px; white-space: nowrap; overflow: hidden; }
.split .a { color: var(--ink); } .split .i { color: var(--ink-3); }

/* live: floor and mind log, two columns of text over a dimmed scene */
.cols2 { display: grid; grid-template-columns: 1fr 1.3fr; gap: 56px; align-items: start; }
@media (max-width: 960px) { .cols2 { grid-template-columns: 1fr; gap: 40px; } }
.colhead { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; color: var(--ink-3); border-bottom: 1px solid var(--line); padding-bottom: 10px; margin-bottom: 4px; }
.colhead b { color: var(--ink); font-weight: 600; }
#floor-cols { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; padding: 14px 0; border-bottom: 1px solid var(--line); }
#floor-cols .col { text-align: center; font-size: 11px; color: var(--mode); }
#floor-cols .col svg { width: 34px; height: 34px; margin: 0 auto 6px; display: block; }
#floor-cols .col b { display: block; color: var(--ink); font-size: 15px; font-weight: 600; }
#floor-tiles { display: flex; flex-direction: column; }
.tile { display: grid; grid-template-columns: 18px 1fr auto; gap: 12px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 12px; }
.tile .ico { width: 18px; height: 18px; display: grid; place-items: center; overflow: hidden; }
.tile .ico img { width: 100%; height: 100%; object-fit: cover; }
.tile .ico svg { width: 18px; height: 18px; }
.tile b { font-weight: 600; } .tile small { color: var(--mode); font-size: 11px; }
.tile:hover b { color: var(--mode); }
.empty-tiles, .emptyline { padding: 16px 0; color: var(--ink-3); font-size: 12px; }
.emptyline a { color: var(--ink); border-bottom: 1px solid var(--ink-3); }
.floorfoot { display: flex; justify-content: space-between; gap: 10px; font-size: 11px; color: var(--ink-3); padding-top: 10px; }
.term .cmd { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.term .cmd input { flex: 1; background: transparent; border: 0; outline: 0; color: var(--ink); font-size: 13px; }
.term .cmd .pr { color: var(--liquidity); }
.term .hint2 { padding: 8px 0; font-size: 11px; color: var(--ink-3); }
.term .chips { display: flex; flex-wrap: wrap; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.term .list { max-height: 54vh; overflow: auto; scrollbar-width: thin; scrollbar-color: #232b2e transparent; }
.ev { display: grid; grid-template-columns: 62px 20px 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.ev .t { font-size: 11px; color: var(--ink-3); line-height: 1.4; }
.ev .ico { width: 20px; height: 20px; display: grid; place-items: center; overflow: hidden; }
.ev .ico img { width: 100%; height: 100%; object-fit: cover; }
.ev .ico svg { width: 20px; height: 20px; }
.ev .h { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 12px; }
.ev .h b { font-weight: 600; }
.ev .h .ag { color: var(--ink-3); font-size: 11px; }
.ev .h .ti { color: var(--mode); font-size: 11px; font-weight: 600; }
.ev .x { font-size: 13px; margin-top: 3px; }
.ev .k { margin-top: 5px; display: flex; gap: 10px; align-items: center; }
.ev a.tx { font-size: 11px; color: var(--ink-3); border-bottom: 1px solid var(--ink-3); }
.ev a.tx:hover { color: var(--ink); }
.legendk { display: grid; grid-template-columns: 90px 1fr; gap: 8px 16px; font-size: 12px; color: var(--ink-2); margin-top: 26px; }

/* lines: coins, leaderboards, burns. A list of text, never a card */
.lines { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.ccard { display: grid; grid-template-columns: 36px minmax(0, 1.4fr) minmax(0, 1fr) 120px 120px; gap: 16px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 12px; }
.ccard .t { display: contents; }
.ccard .t img, .ccard .t .ph0 { width: 36px; height: 36px; object-fit: cover; background: #111; }
.ccard .t > div b { display: block; font-size: 13px; font-weight: 600; }
.ccard .t > div small { color: var(--mode); font-size: 11px; }
.ccard .ds { color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ccard .kv { display: contents; color: var(--ink-3); font-size: 11px; }
.ccard .kv span b { display: block; color: var(--ink); font-size: 12px; font-weight: 600; }
.ccard .f { grid-column: 2 / -1; display: flex; justify-content: space-between; color: var(--ink-3); font-size: 11px; margin-top: -6px; }
.ccard:hover .t > div b { color: var(--mode); }
@media (max-width: 760px) { .ccard { grid-template-columns: 36px 1fr 1fr; } .ccard .ds { display: none; } .ccard .f { grid-column: 1 / -1; margin-top: 0; } }
.table { width: 100%; border-collapse: collapse; font-size: 12px; }
.table th { text-align: left; font-weight: 400; color: var(--ink-3); padding: 0 12px 10px 0; border-bottom: 1px solid var(--line); }
.table td { padding: 12px 12px 12px 0; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table td.r, .table th.r { text-align: right; padding-right: 0; }
.table .ag { display: flex; gap: 12px; align-items: center; }
.table .ag .ico { width: 22px; height: 22px; display: grid; place-items: center; }
.table .ag .ico svg { width: 22px; height: 22px; }
.table .ag b { color: var(--mode); display: block; font-weight: 600; }
.table .ag small { color: var(--ink-3); }
.table tr:hover td { color: var(--ink); }
.tablewrap { overflow-x: auto; }
@media (max-width: 760px) { .table .hs { display: none; } }

/* reading pages: the scene dims, the text runs down the left */
.page { padding: 0 var(--gutter); }
.intro { min-height: 78vh; display: flex; flex-direction: column; justify-content: flex-end; padding: 120px 0 40px; }
.intro h1 { font-family: var(--mono); font-size: 15px; font-weight: 600; margin: 0 0 6px; letter-spacing: 0; }
.intro p { margin: 0; color: var(--ink-2); max-width: 560px; }
.body { padding: 30px 0 140px; max-width: 1180px; }
.body.narrow { max-width: 760px; }
.toolbar { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; align-items: center; margin-bottom: 18px; }
.in { background: transparent; border: 0; border-bottom: 1px solid var(--line-2); padding: 9px 0; outline: 0; width: 100%; font-size: 13px; color: var(--ink); border-radius: 0; }
.in:focus { border-bottom-color: var(--ink); }
.in::placeholder { color: var(--ink-3); }
textarea.in { min-height: 70px; resize: vertical; }
select.in { appearance: none; background: transparent; cursor: pointer; }
select.in option { background: #0c1012; }
.toolbar .in { width: 240px; }
.toolbar select.in { width: 140px; }
@media (max-width: 640px) { .toolbar .in, .toolbar select.in { width: 100%; } }
.seg { display: flex; flex-wrap: wrap; }
.facts2 { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 6px 48px; font-size: 12px; color: var(--ink-3); margin: 6px 0 30px; }
.facts2 b { display: block; color: var(--ink); font-size: 15px; font-weight: 600; }
@media (max-width: 640px) { .facts2 { grid-template-columns: 1fr 1fr; gap: 14px 24px; } }
.cols2b { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; }
@media (max-width: 860px) { .cols2b { grid-template-columns: 1fr; gap: 36px; } }
.cols2b h4, .body h4 { font-size: 13px; font-weight: 600; margin: 0 0 12px; }
.cols2b p { color: var(--ink-2); margin: 0 0 12px; }
.plus { list-style: none; padding: 0; margin: 0; }
.plus li { display: grid; grid-template-columns: 16px 1fr; gap: 8px; margin-bottom: 9px; color: var(--ink-2); }
.plus li::before { content: "+"; color: var(--liquidity); }
.plus.off li::before { content: "~"; color: var(--volume); }
.burnrow { display: flex; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 12px; }
.ca { font-size: 13px; }
.ca .v { font-weight: 600; word-break: break-all; font-size: 15px; margin: 6px 0; }
.ca .acts { display: flex; gap: 18px; color: var(--ink-2); font-size: 12px; }
.ca .acts a:hover, .ca .acts button:hover { color: var(--ink); }

/* footer: one quiet screen-end */
footer { padding: 60px var(--gutter) 70px; background: linear-gradient(rgba(10,13,15,0), rgba(10,13,15,.9) 40%); }
.fline { display: flex; justify-content: space-between; gap: 30px; flex-wrap: wrap; align-items: flex-end; font-size: 12px; color: var(--ink-3); }
.fline nav { display: flex; gap: 20px; flex-wrap: wrap; }
.fline a:hover { color: var(--ink); }
.fline .cap { display: flex; gap: 10px; align-items: center; }
.fline .cap b { color: var(--ink-2); font-weight: 600; }
.bigascii { margin: 44px 0 0; font-size: clamp(8px, 2.4vw, 26px); line-height: 1.02; color: #1f2629; overflow: hidden; user-select: none; }

/* launch: the form is lines, the scene spells your ticker */
.launch .intro { min-height: 64vh; }
.lgrid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 56px; align-items: start; }
@media (max-width: 960px) { .lgrid { grid-template-columns: 1fr; gap: 30px; } }
.stepper { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--ink-3); margin-top: 22px; }
.stepper span::before { content: "[ ] "; }
.stepper span.on { color: var(--ink); }
.stepper span.on::before { content: "[x] "; color: var(--liquidity); }
.stepper i { display: none; }
.box { padding: 26px 0; border-top: 1px solid var(--line); }
.box .bh { display: flex; justify-content: space-between; font-size: 12px; color: var(--ink-3); margin-bottom: 14px; }
.box h3 { font-size: 15px; font-weight: 600; margin: 0 0 4px; }
.box > p { color: var(--ink-2); font-size: 12px; margin: 0 0 18px; max-width: 580px; }
.field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 18px; }
.field label { font-size: 12px; color: var(--ink-2); display: flex; justify-content: space-between; gap: 10px; }
.field label span { color: var(--ink-3); }
.note { color: var(--ink-3); font-size: 12px; margin: 4px 0 0; }
.drop { display: flex; gap: 16px; align-items: center; padding: 6px 0; }
.drop .pv { width: 56px; height: 56px; border: 1px dashed var(--line-2); display: grid; place-items: center; overflow: hidden; color: var(--ink-3); }
.drop .pv img { width: 100%; height: 100%; object-fit: cover; }
.r3 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.r2 { display: grid; grid-template-columns: 1fr 160px; gap: 24px; }
@media (max-width: 640px) { .r3, .r2 { grid-template-columns: 1fr; gap: 0; } }
.pick { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.pc { padding: 14px 0; border-bottom: 1px solid var(--line); cursor: pointer; position: relative; }
.pc .hd { display: flex; gap: 14px; align-items: center; }
.pc .hd svg { width: 28px; height: 28px; flex: none; }
.pc .hd small { display: none; }
.pc .hd b { font-size: 14px; font-weight: 600; margin-right: 10px; }
.pc .hd > div { display: flex; align-items: baseline; flex-wrap: wrap; }
.pc .hd .dim { font-size: 12px !important; }
.pc .k { position: absolute; top: 18px; right: 0; display: flex; gap: 8px; align-items: center; font-size: 11px; color: var(--ink-3); }
.pc .k i { width: 9px; height: 9px; border: 1px solid var(--ink-3); display: inline-block; }
.pc.on .k i { background: var(--mode); border-color: var(--mode); }
.pc.on .hd b { color: var(--mode); }
.pc dl { display: none; margin: 10px 0 0 42px; font-size: 12px; grid-template-columns: 100px 1fr; gap: 4px 14px; }
.pc.on dl { display: grid; }
.pc dt { color: var(--ink-3); } .pc dd { margin: 0; }
.pc .opts { margin: 12px 0 0 42px; }
.pc .opts .up { font-size: 11px; color: var(--ink-3); margin-bottom: 4px; }
.side { position: sticky; top: 90px; }
.sum .ph { display: flex; justify-content: space-between; font-size: 12px; color: var(--ink-3); padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.sum .ph b { color: var(--ink); font-weight: 600; }
.sum .av { display: flex; gap: 12px; align-items: center; padding: 14px 0; }
.sum .av .pv { width: 36px; height: 36px; overflow: hidden; display: grid; place-items: center; }
.sum .av .pv img { width: 100%; height: 100%; object-fit: cover; }
.sum .av .pv svg { width: 28px; height: 28px; }
.sum .av b { font-weight: 600; }
.sum .stage { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.sum .stage > div { display: flex; align-items: center; gap: 12px; }
.sum .stage svg { width: 30px; height: 30px; }
.sum .stage small { font-size: 12px; color: var(--mode); }
#stage-sub { font-size: 12px; color: var(--ink-3); margin: 0 0 6px !important; text-align: left !important; }
.sum .rows div { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; padding: 6px 0; border-bottom: 1px solid var(--line); color: var(--ink-3); }
.sum .rows b { color: var(--ink); font-weight: 600; }
.sum .go { padding-top: 18px; }
.sum .go .btn { width: 100%; justify-content: center; }

/* coin page */
.page-head .eyebrow { font-size: 12px; color: var(--mode, var(--ink-3)); }
.page-head h1.display { font-family: var(--mono); font-size: 15px; font-weight: 600; margin: 10px 0 0; }
.page-head .lead { color: var(--ink-2); max-width: 560px; }
.page-head .lightrow { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.page-head .lightrow img { width: 48px !important; height: 48px !important; border: 0 !important; }
.page-head .btn.small { border-color: var(--line-2); }
.minis { display: grid; grid-template-columns: repeat(4, auto) !important; justify-content: start; gap: 6px 48px; font-size: 12px; color: var(--ink-3); margin: 26px 0 !important; max-width: none !important; }
.minis b { display: block; color: var(--ink); font-size: 15px; font-weight: 600; }
@media (max-width: 640px) { .minis { grid-template-columns: 1fr 1fr !important; gap: 14px 24px; } }
.ml-grid { display: grid; grid-template-columns: 1fr 1.4fr !important; gap: 56px; align-items: start; }
@media (max-width: 960px) { .ml-grid { grid-template-columns: 1fr !important; } }
.panel { background: transparent; border: 0; padding: 0 !important; }
.panel .up { font-size: 12px; color: var(--ink-3); }
.ph { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; color: var(--ink-3); padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.ph b { color: var(--ink); font-weight: 600; }
#root .acard { margin-top: 28px !important; }
#root .acard .t { display: flex; justify-content: space-between; gap: 12px; }
#root .acard .t svg { width: 44px; height: 44px; }
#root .acard .lbl { font-size: 12px; color: var(--mode); margin: 0; }
#root .acard h3 { font-size: 15px; margin: 4px 0 2px; }
#root .acard .tg { color: var(--ink-2); font-size: 12px; }
#root .acard dl { display: grid; grid-template-columns: 120px 1fr; gap: 6px 16px; font-size: 12px; margin: 16px 0; }
#root .acard dt { color: var(--ink-3); } #root .acard dd { margin: 0; }
#root .acard .st { display: flex; gap: 36px; font-size: 12px; color: var(--ink-3); }
#root .acard .st b { display: block; color: var(--ink); }

/* docs */
.dgrid { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 56px; align-items: start; }
@media (max-width: 860px) { .dgrid { grid-template-columns: 1fr; } .toc { display: none; } }
.toc { position: sticky; top: 100px; font-size: 12px; }
.toc a { display: block; padding: 4px 0; color: var(--ink-3); }
.toc a:hover, .toc a.on { color: var(--ink); }
.toc a.on::before { content: "> "; }
.doc h2 { font-size: 15px; font-weight: 600; margin: 48px 0 10px; }
.doc .sm { font-size: 12px; color: var(--ink-3); margin-top: 70px; }
.doc .sm::before { content: "// "; }
.doc .sm:first-child { margin-top: 0; }
.doc h3 { font-size: 13px; font-weight: 600; margin: 24px 0 4px; }
.doc p, .doc li { color: var(--ink-2); max-width: 680px; }
.doc b { color: var(--ink); font-weight: 600; }
.doc table { border-collapse: collapse; width: 100%; max-width: 680px; margin: 10px 0; font-size: 12px; }
.doc td, .doc th { border-bottom: 1px solid var(--line); padding: 8px 10px 8px 0; text-align: left; vertical-align: top; }
.doc th { color: var(--ink-3); font-weight: 400; }
.doc code { color: var(--ink); word-break: break-all; }
.doc a { color: var(--ink); border-bottom: 1px solid var(--ink-3); }

/* misc */
.toast { position: fixed !important; left: 50%; bottom: 46px; transform: translateX(-50%); z-index: 50 !important; background: #0d1113; border: 1px solid var(--line-2); padding: 10px 16px; font-size: 13px; max-width: min(560px, 92vw); }
.toast.bad { border-color: var(--burn); }
.wsheet { position: fixed !important; inset: 0; z-index: 60 !important; background: rgba(0,0,0,.75); display: grid; place-items: center; padding: 16px; }
.wbox { width: min(380px, 100%); background: #0c1012; border: 1px solid var(--line-2); padding: 16px; }
.wbox .ph button { font-size: 18px; line-height: 1; }
.wopt { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 0; border-bottom: 1px solid var(--line); text-align: left; font-size: 13px; }
.wopt:hover { color: var(--liquidity); }
.wopt img, .wopt .wph { width: 26px; height: 26px; background: #151b1e; }
.wopt small { margin-left: auto; color: var(--ink-3); font-size: 11px; }
.err { color: var(--burn); }
.lightrow { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.lost { min-height: 100vh; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; padding-bottom: 90px; text-align: center; }
.lost p { color: var(--ink-2); margin: 0 0 18px; }
.btn, .btn * { text-shadow: none !important; }