/* OUTLAST. Strict palette: near-black, soft white, greys, one blue. Motion is slow and eased; nothing blinks or flashes.
   Time is the theme: rulers, clock faces and rings stand where another site would put plain bars and badges. */
:root {
  --bg: #06070a; --ink: #e8ecf1; --dim: #a3aab4; --faint: #7d8590; --line: rgba(255, 255, 255, .09); --line2: rgba(255, 255, 255, .17);
  --maxw: 1760px; --panel: rgba(255, 255, 255, .02); --solid: #0a0c10; --blue: #3b8cff; --blue2: #8fbdff; --ease: cubic-bezier(.2, .7, .2, 1); --barh: 60px;
  --grid: repeating-linear-gradient(0deg, rgba(255, 255, 255, .022) 0 1px, transparent 1px 56px), repeating-linear-gradient(90deg, rgba(255, 255, 255, .022) 0 1px, transparent 1px 56px);
}
* { box-sizing: border-box; margin: 0; }
[hidden] { display: none !important; }
html { background: var(--bg); color: var(--ink); font: 15px/1.5 Geist, system-ui, sans-serif; font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; }
html.lock { overflow: hidden; }
body { min-height: 100vh; }
/* a still, faint grid behind everything */
body::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: var(--grid); }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } }
@keyframes breathe { 50% { opacity: .45; } }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }
a { color: inherit; text-decoration: none; }
h2 { font-size: 12px; font-weight: 500; letter-spacing: .15em; text-transform: uppercase; color: var(--dim); }
:focus-visible { outline: 2px solid var(--blue2); outline-offset: 3px; }
canvas { display: block; }

/* ---------- top bar ---------- */
.bar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 34px; height: var(--barh); padding: 0 max(28px, calc((100vw - var(--maxw)) / 2 + 28px)); background: var(--bg); border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 650; letter-spacing: .08em; }
.brand b { font-weight: inherit; } .brand span { color: var(--faint); font-weight: 500; }
/* the mark: an O that gains weight clockwise and turns from ink to blue as it does (brand/mark.svg) */
.mark { display: block; width: 22px; height: 22px; flex: none; }
/* the name gains weight letter by letter, like the mark; app.js sets each letter's weight */
.wm i { font-style: normal; }
.tabs { position: relative; display: flex; align-self: stretch; }
.tabs a { display: flex; align-items: center; white-space: nowrap; padding: 0 16px; font-size: 14px; font-weight: 550; color: var(--dim); transition: color .25s; }
.tabs a:hover, .tabs a.on { color: var(--ink); }
#tab-ink { position: absolute; left: 0; bottom: -1px; height: 2px; width: 0; background: var(--ink); transition: transform .5s var(--ease), width .5s var(--ease); }
.barend { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.feedtag { display: flex; align-items: center; gap: 8px; font-size: 11px; letter-spacing: .13em; text-transform: uppercase; color: var(--dim); white-space: nowrap; }
.feedtag::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--blue); animation: breathe 3s ease-in-out infinite; }
.feedtag.off::before { background: var(--dim); }
.toplink { display: flex; align-items: center; height: 36px; padding: 0 14px; border: 1px solid var(--line2); font-size: 13.5px; font-weight: 600; white-space: nowrap; transition: background .25s, color .25s; }
.toplink:hover { background: var(--ink); color: #000; } .toplink.buy { background: var(--blue); border-color: var(--blue); } .toplink.buy:hover { background: var(--blue2); color: #000; }
/* what does not apply before the launch, or without a connection, is not shown */
body:not([data-feed="live"]) :is(.tabs a[data-r="holders"], .widget .stats) { display: none; }
body:not([data-feed="live"]) #v-position .lead p { display: none; }

main { max-width: var(--maxw); margin: 0 auto; padding: 0 28px 20px; }
.view { padding-top: 10px; }
.panel { position: relative; background: var(--panel); border: 1px solid var(--line); padding: 18px 20px 20px; }
.panel::before, .panel::after { content: ""; position: absolute; width: 10px; height: 10px; border: solid rgba(255, 255, 255, .5); pointer-events: none; }
.panel::before { left: -1px; top: -1px; border-width: 1px 0 0 1px; }
.panel::after { right: -1px; bottom: -1px; border-width: 0 1px 1px 0; }
.head { display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; min-height: 30px; margin-bottom: 14px; flex-wrap: wrap; }
.sechead { display: flex; align-items: baseline; justify-content: space-between; gap: 10px 28px; flex-wrap: wrap; padding: 34px 0 8px; }
.sechead h2 { font-size: 13px; } .sechead p { color: var(--dim); font-size: 14.5px; }
.legend { display: flex; gap: 22px; list-style: none; padding: 0; font-size: 12.5px; color: var(--faint); margin-left: auto; }
.legend b { color: var(--ink); font-weight: 500; margin-left: 4px; }
.stats { display: flex; align-items: center; gap: 30px; }
.stats dt { font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--faint); white-space: nowrap; }
.stats dd { font-size: 16px; font-weight: 600; white-space: nowrap; }
/* a ring that fills as the three minutes to the next payout run out */
.ring { --p: 0; display: block; flex: none; width: 30px; height: 30px; border-radius: 50%; background: conic-gradient(var(--blue) calc(var(--p) * 1turn), rgba(255, 255, 255, .15) 0); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3.4px)); mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3.4px)); }

/* buttons */
.cta { display: inline-block; height: 58px; line-height: 58px; text-align: center; white-space: nowrap; padding: 0 30px; background: var(--blue); color: #fff; font-size: 17px; font-weight: 650; transition: background .25s, transform .15s; }
.cta:hover { background: #5a9fff; } .cta:active { transform: scale(.985); }
.more { display: inline-flex; align-items: center; height: 58px; padding: 0 24px; border: 1px solid var(--line2); font-size: 16px; font-weight: 600; white-space: nowrap; transition: background .25s, color .25s; }
.more:hover { background: var(--ink); color: #000; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.seg { display: flex; border: 1px solid var(--line); }
.seg button { height: 34px; padding: 0 16px; color: var(--dim); font-size: 13px; font-weight: 550; border-left: 1px solid var(--line); transition: background .2s, color .2s; }
.seg button:first-child { border-left: 0; } .seg button:hover { color: var(--ink); } .seg button.on { background: var(--ink); color: #000; }
/* what a coin of another pair is paid with or sold for: SOL (swapped in the same transaction) or the pair asset */
.paywith { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.paywith > span { font-size: 12px; letter-spacing: .13em; text-transform: uppercase; color: var(--dim); }
.paywith .seg button { height: 32px; padding: 0 12px; display: inline-flex; align-items: center; gap: 7px; }
.paywith .pp-mini { width: 16px; height: 16px; }

/* ---------- Token: headline and trailer ---------- */
.hero { display: grid; grid-template-columns: minmax(0, 9fr) minmax(0, 10fr); gap: 20px 44px; align-items: stretch; padding: 18px 0 20px; }
.herotext { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.hero h1 { font-size: clamp(30px, 3vw, 58px); line-height: 1.05; font-weight: 600; letter-spacing: -.026em; text-wrap: balance; }
.lede { margin-top: 16px; max-width: 34em; font-size: 18px; color: var(--dim); }
.hero .actions { margin-top: 24px; }
.shout { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 24px; margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--line); }
.shout b { display: block; font-size: clamp(28px, 2.3vw, 44px); line-height: 1; font-weight: 650; letter-spacing: -.03em; color: var(--blue2); }
.shout span { display: block; margin-top: 8px; color: var(--dim); font-size: 13.5px; line-height: 1.4; }
.trailer { padding: 0; min-height: 340px; overflow: hidden; background: var(--solid); }
.trailer canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.tctl { position: absolute; left: 20px; right: 20px; bottom: 12px; display: flex; align-items: center; gap: 12px; }
/* one segment per scene, as long as the scene; the blue part is what has played */
.tsegs { flex: 1; display: flex; gap: 6px; min-width: 0; }
.tsegs button { position: relative; flex: var(--len, 1) 1 0; height: 28px; }
.tsegs button::before, .tsegs button::after { content: ''; position: absolute; left: 0; top: 13px; height: 2px; }
.tsegs button::before { right: 0; background: rgba(255, 255, 255, .17); transition: background .2s; }
.tsegs button::after { width: calc(var(--p, 0) * 100%); background: var(--blue); }
.tsegs button:hover::before { background: rgba(255, 255, 255, .42); }
.tbtn { height: 32px; padding: 0 13px; border: 1px solid var(--line2); font-size: 12.5px; font-weight: 600; background: rgba(6, 7, 10, .7); white-space: nowrap; transition: background .2s, color .2s; }
.tbtn:hover { background: var(--ink); color: #000; }
.tctl .tbtn { opacity: 0; transition: opacity .3s, background .2s, color .2s; } .trailer:hover .tbtn, .trailer:focus-within .tbtn, .trailer.full .tbtn { opacity: 1; }
@media (hover: none) { .tctl .tbtn { opacity: 1; } }
.trailer.full { position: fixed; inset: 0; z-index: 60; border: 0; background: var(--bg); }
.trailer.full::before, .trailer.full::after { display: none; }
.trailer.full .tctl { left: 5vw; right: 5vw; bottom: 26px; }

/* ---------- Token: the holder chart as a widget ---------- */
.widget { padding: 14px 18px 12px; background: var(--solid); }
.dockhead { display: flex; align-items: center; justify-content: space-between; gap: 10px 30px; margin-bottom: 8px; }
.docktitle { min-width: 0; }
.docktitle p, .read { margin-top: 3px; font-size: 14px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .3s; }
.docktitle p.wallet, .read.wallet { color: var(--ink); }
.stats .next { display: flex; align-items: center; gap: 10px; }
.dockchart { position: relative; height: clamp(320px, calc(100vh - var(--above, 560px)), 660px); }
.dockchart canvas, .chartwrap canvas, .fig canvas, .mapwrap canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: pan-y; }
/* ---------- Token: the formula. Four lines; the sliders put numbers into them ---------- */
.mech { padding: 34px 0 14px; scroll-margin-top: calc(var(--barh) + 4px); }
.mechhead h2 { font-size: 13px; color: var(--blue2); }
.mechhead h3 { margin-top: 8px; max-width: 32ch; font-size: clamp(24px, 2.1vw, 40px); line-height: 1.12; font-weight: 600; letter-spacing: -.022em; text-wrap: balance; }
.mechgrid { display: grid; grid-template-columns: 400px minmax(0, 1fr); gap: 24px 48px; align-items: start; margin-top: 22px; }
.mechgrid.one { grid-template-columns: minmax(0, 1fr); }
/* the token's contract address under the headline: a placeholder before the launch */
.caline { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 22px; padding: 10px 14px; border: 1px solid var(--line2); background: rgba(255, 255, 255, .02); font-size: 14px; max-width: 100%; }
.caline > span { color: var(--faint); font-weight: 650; letter-spacing: .12em; font-size: 12px; } .caline b { font-weight: 600; color: var(--dim); } .caline.live b { color: var(--ink); } .caline b.full { word-break: break-all; user-select: all; }
.cacopy, .caexp { color: var(--blue2); font-size: 14px; font-weight: 650; } .cacopy:hover, .caexp:hover { color: var(--ink); }
.knobs { padding: 22px 24px 20px; }
.knote { margin-top: 14px; font-size: 13.5px; line-height: 1.45; color: var(--blue2); }
.lines { list-style: none; padding: 0; }
.lines li { display: grid; grid-template-columns: 46px minmax(0, 1fr); padding: 14px 0 16px; border-top: 1px solid var(--line); }
.lines li:first-child { border-top: 0; padding-top: 0; }
.lines em { font-style: normal; font-size: 26px; line-height: 1.05; font-weight: 650; color: var(--blue2); }
.lines h4 { font-size: 18px; font-weight: 600; }
.lines .formula { margin-top: 10px; padding: 12px 16px; font-size: 17px; }
/* the numbers the sliders put in sit on a lighter chip; the result is blue */
.formula b[id] { padding: 1px 8px; background: rgba(255, 255, 255, .09); color: var(--ink); font-weight: 650; white-space: nowrap; }
.formula strong { color: var(--blue2); font-weight: 650; font-size: 1.22em; white-space: nowrap; }
.formula .cap { margin-left: auto; color: var(--dim); font-size: .82em; font-weight: 500; } .formula .cap b[id] { background: none; padding: 0 0 0 4px; }
.mechend { display: grid; gap: 20px; margin-top: 18px; }
.take { font-size: 19px; color: var(--dim); } .take b { color: var(--ink); font-weight: 600; } .take strong { color: var(--blue2); font-weight: 650; font-size: 1.25em; }
.mechend .shout { margin: 0; padding-top: 18px; }

/* ---------- How it works: one rule at a time under a ruler ---------- */
.howhead { display: flex; align-items: flex-end; gap: 16px 36px; padding: 14px 0 4px; flex-wrap: wrap; }
.howhead h1 { font-size: clamp(26px, 2.2vw, 40px); line-height: 1.15; font-weight: 600; letter-spacing: -.022em; white-space: nowrap; }
.rail { position: relative; flex: 1 1 560px; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); padding-bottom: 12px; min-width: 0; }
.rail::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 8px; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .24) 0 1px, transparent 1px 12px); border-bottom: 1px solid var(--line2); }
#rail-ink { position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--blue); transition: width .7s var(--ease); }
.rail button { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-width: 0; padding: 4px 10px 8px 12px; border-left: 1px solid var(--line2); color: var(--dim); text-align: left; transition: color .25s, background .25s; }
.rail button b { font-size: 11.5px; font-weight: 600; letter-spacing: .16em; color: var(--faint); transition: color .25s; }
.rail button span { max-width: 100%; font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rail button:hover { color: var(--ink); background: rgba(255, 255, 255, .04); }
.rail button.on { color: var(--ink); } .rail button.on b, .rail button.done b { color: var(--blue2); }
.railnav { display: flex; gap: 10px; }
.railnav .more, .railnav .cta { height: 48px; font-size: 15px; padding: 0 20px; } .railnav .cta { line-height: 48px; min-width: 200px; }
.railnav button:disabled { opacity: .35; pointer-events: none; }
.rule { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 30px 56px; align-items: center; padding: 22px 0 8px; }
.rule em { display: block; font-style: normal; font-size: 13px; font-weight: 600; letter-spacing: .2em; color: var(--blue2); margin-bottom: 14px; }
.rule h3 { font-size: clamp(26px, 2.3vw, 42px); line-height: 1.1; font-weight: 600; letter-spacing: -.022em; }
.rule p { margin-top: 16px; max-width: 36em; font-size: 17px; line-height: 1.55; color: var(--dim); }
.rule .eg { padding-left: 14px; border-left: 2px solid var(--blue); font-size: 15.5px; } .rule .eg b { color: var(--ink); font-weight: 600; }
.formula { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; margin-top: 20px; padding: 16px 20px; border: 1px solid var(--line2); background: rgba(255, 255, 255, .025); font-size: 19px; font-weight: 550; }
.formula i { font-style: normal; color: var(--blue2); font-weight: 500; } .formula u { text-decoration: none; font-style: italic; color: var(--blue2); }
.formula span:first-child { color: var(--blue2); }
.frac { display: inline-flex; flex-direction: column; align-items: center; font-size: .84em; line-height: 1.3; } .frac b { font-weight: 550; padding: 2px 8px; } .frac b:first-child { border-bottom: 1px solid var(--dim); }
.fig { height: clamp(340px, calc(100vh - 270px), 700px); padding: 0; }

/* ---------- Holders ---------- */
.lead { display: flex; align-items: baseline; gap: 12px 28px; flex-wrap: wrap; padding: 22px 0 18px; }
.lead h1 { font-size: clamp(30px, 2.8vw, 50px); line-height: 1.05; font-weight: 600; letter-spacing: -.024em; }
.lead p { color: var(--dim); font-size: 16px; }
.hchart { padding-bottom: 12px; background: var(--solid); } .hchart .head { margin-bottom: 4px; flex-wrap: nowrap; } .hchart h2 { white-space: nowrap; } .read { margin: 0; min-width: 0; }
.chartwrap { position: relative; height: clamp(260px, 30vh, 440px); } .chartwrap.low { height: clamp(210px, 27vh, 340px); }
.data { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 20px; margin-top: 20px; }
.thead, .row { display: grid; grid-template-columns: 36px minmax(216px, 1.6fr) .8fr .9fr .8fr minmax(130px, 1.3fr) .8fr; align-items: center; gap: 12px; padding: 0 10px; }
.thead { height: 30px; font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--faint); border-bottom: 1px solid var(--line); }
.thead span:nth-child(n+3), .row > span:nth-child(n+3) { text-align: right; }
.rows { position: relative; height: calc(12 * 44px); overflow: hidden; }
.row { position: absolute; left: 0; right: 0; top: 0; height: 44px; border-bottom: 1px solid rgba(255, 255, 255, .05); font-size: 15px; cursor: pointer; transition: transform 1s var(--ease), opacity .6s, background .4s; }
.row.enter { opacity: 0; }
.row > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .row > span:first-child { color: var(--faint); }
.row .w { font-weight: 550; display: flex; align-items: center; gap: 8px; }
.row .w em { font-style: normal; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); border: 1px solid var(--line2); padding: 1px 5px; }
.row .m { font-weight: 650; }
.row .f, .row .h { display: flex; align-items: center; justify-content: flex-end; gap: 10px; } .row b { font-weight: inherit; }
/* a small clock face in each row: the part of the token's life this wallet has held */
.row .h i { --p: 0; flex: none; width: 14px; height: 14px; border-radius: 50%; background: conic-gradient(rgba(255, 255, 255, .82) calc(var(--p) * 1turn), rgba(255, 255, 255, .15) 0); }
.row .f i { flex: 1; max-width: 160px; height: 4px; background: rgba(255, 255, 255, .08); position: relative; }
.row .f i::after { content: ""; position: absolute; inset: 0; width: var(--w, 0%); background: rgba(255, 255, 255, .75); transition: width 1s var(--ease); }
.row:hover { background: rgba(255, 255, 255, .05); } .row.pin { background: rgba(255, 255, 255, .06); box-shadow: inset 2px 0 0 var(--ink); }
.row.you { background: rgba(59, 140, 255, .1); box-shadow: inset 2px 0 0 var(--blue); } .row.you .w, .row.you .m { color: var(--blue2); } .row.you .f i::after { background: var(--blue); }
.side { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.list { list-style: none; padding: 0; }
.list li { display: grid; gap: 10px; align-items: baseline; height: 32px; font-size: 13.5px; border-bottom: 1px solid rgba(255, 255, 255, .05); animation: rise .7s var(--ease) both; white-space: nowrap; overflow: hidden; }
.tape { --trow: 32; position: relative; height: calc(var(--trow) * 10px); overflow: hidden; }
.tape li { position: absolute; left: 0; right: 0; top: 0; height: calc(var(--trow) * 1px); grid-template-columns: 56px 34px auto minmax(0, 1fr) auto; animation: none; transition: transform .8s var(--ease), opacity .8s; }
.rate { font-size: 13px; color: var(--dim); } .rate.withring { display: flex; align-items: center; gap: 8px; } .rate .ring { width: 18px; height: 18px; -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.4px)); mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.4px)); }
.pays li { grid-template-columns: 92px auto 1fr auto; }
.list time { color: var(--faint); } .list .s { font-weight: 600; font-size: 12.5px; } .list .sell .s { color: var(--dim); }
.list .a { color: var(--dim); overflow: hidden; text-overflow: ellipsis; } .list b { color: var(--ink); font-weight: 550; }
.list .x, .list span { color: var(--dim); }

/* ---------- Your position ---------- */
.lookup label { display: block; font-size: 12px; letter-spacing: .15em; text-transform: uppercase; color: var(--dim); margin-bottom: 10px; }
.addr { display: flex; border: 1px solid var(--line2); background: rgba(255, 255, 255, .02); transition: border-color .25s; } .addr:focus-within { border-color: var(--blue2); }
.addr input { flex: 1; min-width: 0; height: 58px; padding: 0 18px; background: none; border: 0; outline: 0; font-size: 17px; }
.addr input::placeholder { color: var(--faint); }
.addr .clear { width: 48px; font-size: 22px; color: var(--faint); transition: color .2s; } .addr .clear:hover { color: var(--ink); }
.samples { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; margin-top: 12px; font-size: 13.5px; color: var(--dim); }
.samples button { height: 32px; padding: 0 12px; border: 1px solid var(--line2); font-size: 13px; font-weight: 550; transition: background .2s, color .2s; } .samples button:hover { background: var(--ink); color: #000; }
.note { margin-top: 12px; font-size: 14px; color: var(--dim); }
.panel.prelaunch { padding: 34px 38px; } .prelaunch p { max-width: 40em; font-size: 19px; color: var(--ink); margin-bottom: 24px; }
.pregrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; margin-bottom: 20px; } .pregrid .entry { justify-content: center; padding: 28px 30px; } .pregrid .readout { padding: 28px 30px; }
.posgrid { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 20px; margin-top: 20px; }
.giant { display: flex; align-items: baseline; gap: 14px; padding: 4px 0 14px; }
.giant span { font-size: clamp(56px, 5vw, 96px); line-height: 1; font-weight: 650; letter-spacing: -.04em; color: var(--blue2); }
.giant small { font-size: 12px; letter-spacing: .15em; text-transform: uppercase; color: var(--dim); }
.pos dl { columns: 2; column-gap: 44px; }
.pos dl div, .sellbox dl div, .readout dl div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 8px 0; border-bottom: 1px dashed var(--line); break-inside: avoid; }
dl dt { color: var(--dim); font-size: 14px; } .pos dd, .sellbox dd, .readout dd { font-size: 16.5px; font-weight: 600; white-space: nowrap; }
.sellbox dl { margin-top: 14px; }
#ps-state { text-transform: none; letter-spacing: .03em; font-size: 15px; color: var(--ink); }
.wide { margin-top: 20px; }
.seatgrid { display: grid; grid-template-columns: 390px 330px minmax(0, 1fr); gap: 20px; margin-bottom: 20px; }
.entry { display: flex; flex-direction: column; }
.amount { display: grid; grid-template-columns: 56px 1fr 56px; border: 1px solid var(--line2); }
.amount button { height: 62px; font-size: 26px; color: var(--dim); transition: background .2s, color .2s; } .amount button:hover { background: rgba(255, 255, 255, .06); color: var(--ink); }
.amount label { display: flex; align-items: baseline; justify-content: center; gap: 8px; border: solid var(--line2); border-width: 0 1px; padding-top: 10px; }
.amount input { width: 4.2ch; background: none; border: 0; outline: 0; font-size: 32px; font-weight: 600; text-align: right; }
.amount label span { color: var(--dim); font-size: 15px; letter-spacing: .08em; }
.presets { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 8px; }
.presets button { height: 38px; border: 1px solid var(--line); color: var(--dim); font-weight: 550; transition: border-color .2s, color .2s; }
.presets button:hover { border-color: var(--line2); color: var(--ink); } .presets button.on { border-color: var(--ink); color: var(--ink); }
.gets { margin: 12px 0 20px; font-size: 14px; color: var(--dim); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.gets b { color: var(--ink); font-weight: 550; } .gets i { width: 14px; height: 1px; background: var(--faint); margin: 0 4px; }
.hold { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 12px; letter-spacing: .13em; text-transform: uppercase; color: var(--dim); }
.hold b { font-size: 20px; letter-spacing: 0; text-transform: none; color: var(--ink); font-weight: 600; white-space: nowrap; }
.hold.second { margin-top: 18px; }
input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 34px; background: none; margin-top: 2px; cursor: pointer; }
input[type=range]::-webkit-slider-runnable-track { height: 2px; background: linear-gradient(90deg, var(--blue) var(--p, 50%), rgba(255, 255, 255, .18) var(--p, 50%)); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 26px; margin-top: -12px; background: var(--blue); border: 0; }
input[type=range]::-moz-range-track { height: 2px; background: rgba(255, 255, 255, .18); }
input[type=range]::-moz-range-thumb { width: 14px; height: 26px; background: var(--blue); border: 0; border-radius: 0; }
/* a rate the creator cannot change (fixed on SOL and USDC) looks locked */
input[type=range]:disabled { cursor: not-allowed; }
input[type=range]:disabled::-webkit-slider-runnable-track { background: linear-gradient(90deg, rgba(255, 255, 255, .32) var(--p, 50%), rgba(255, 255, 255, .12) var(--p, 50%)); }
input[type=range]:disabled::-webkit-slider-thumb { background: #5b6170; }
input[type=range]:disabled::-moz-range-thumb { background: #5b6170; }
.ticks { display: flex; justify-content: space-between; font-size: 11px; color: var(--faint); margin-top: -2px; }
.entry .cta { margin-top: 20px; }
.readout { display: flex; flex-direction: column; } .readout .giant { margin: auto 0; flex-direction: column; align-items: flex-start; gap: 8px; }
.mapp { display: flex; flex-direction: column; } .mapwrap { position: relative; flex: 1; min-height: 380px; } #map { cursor: crosshair; touch-action: none; }

/* ---------- Launchpad: soon, beta ---------- */
.tabs a sup { margin-left: 7px; padding: 1px 5px; border: 1px solid rgba(143, 189, 255, .5); color: var(--blue2); font-size: 9.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; line-height: 1.4; vertical-align: baseline; }
.soonhead { padding: 22px 0 20px; }
.tags { display: flex; gap: 8px; margin-bottom: 14px; }
.tag { padding: 3px 9px; border: 1px solid var(--line2); font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); } .tag.blue { border-color: var(--blue); background: var(--blue); color: #fff; }
.soonhead h1 { font-size: clamp(30px, 2.8vw, 50px); line-height: 1.05; font-weight: 600; letter-spacing: -.024em; }
.soonhead p { margin-top: 14px; max-width: 46em; font-size: 18px; color: var(--dim); }
.two { display: grid; grid-template-columns: 1.4fr 1fr; gap: 12px; }
.two label, .field > span { display: block; font-size: 12px; letter-spacing: .13em; text-transform: uppercase; color: var(--dim); }
.two input { display: block; width: 100%; height: 48px; margin-top: 8px; padding: 0 14px; background: rgba(255, 255, 255, .02); border: 1px solid var(--line2); outline: 0; font-size: 17px; font-weight: 600; letter-spacing: 0; text-transform: none; transition: border-color .25s; } .two input:focus { border-color: var(--blue2); }
.field { margin-top: 18px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.chips button { height: 38px; padding: 0 14px; border: 1px solid var(--line); color: var(--dim); font-size: 14px; font-weight: 550; transition: border-color .2s, color .2s, background .2s; }
.chips button:hover { border-color: var(--line2); color: var(--ink); } .chips button.on { border-color: var(--ink); background: var(--ink); color: #000; }
.cta:disabled { background: rgba(59, 140, 255, .22); color: var(--blue2); cursor: default; }
.tcard { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px 18px; align-items: center; padding: 22px 24px; background: var(--solid); }
.tile { display: grid; place-items: center; width: 72px; height: 72px; background: linear-gradient(160deg, rgba(143, 189, 255, .95), rgba(59, 140, 255, .55)); color: #06070a; font-size: 34px; font-weight: 700; }
.tname b { display: block; font-size: 24px; font-weight: 600; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tname span { color: var(--dim); font-size: 15px; }
.tcard dl { grid-column: 1 / -1; }
.tcard dl div { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 9px 0; border-top: 1px dashed var(--line); } .tcard dd { font-size: 15.5px; font-weight: 600; text-align: right; }
.steps3 { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 40px; }
.steps3 li { padding-top: 16px; border-top: 1px solid var(--line2); } .steps3 em { font-style: normal; font-size: 26px; font-weight: 650; color: var(--blue2); } .steps3 h3 { margin-top: 6px; font-size: 21px; font-weight: 600; } .steps3 p { margin-top: 8px; color: var(--dim); font-size: 15.5px; line-height: 1.5; }
.board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-bottom: 20px; }
.bcard { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 14px; align-items: center; padding: 18px 20px; }
.bcard > i { grid-column: 1 / -1; margin-bottom: 8px; font-style: normal; font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.bcard .tile { grid-row: 2 / 4; width: 52px; height: 52px; font-size: 24px; background: linear-gradient(160deg, rgba(255, 255, 255, .8), rgba(255, 255, 255, .3)); } .bcard b { font-size: 17px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bcard span { color: var(--dim); font-size: 14px; }
.curve { grid-column: 1 / -1; position: relative; height: 4px; margin-top: 16px; background: rgba(255, 255, 255, .1); } .curve::after { content: ''; position: absolute; inset: 0; width: calc(var(--p) * 100%); background: var(--blue); }
.bcard small { grid-column: 1 / -1; margin-top: 8px; color: var(--dim); font-size: 12.5px; }

/* ---------- Launchpad, test form: the account, the live board ---------- */
.soonhead { display: grid; grid-template-columns: minmax(0, 1fr) 460px; gap: 20px 44px; align-items: start; }
.soontext .actions { margin-top: 22px; }
#create { scroll-margin-top: calc(var(--barh) + 4px); }
/* next to the form the figure takes whatever height the form leaves, so there is no empty corner */
.acct { padding: 16px 20px 18px; background: var(--solid); } .acct .head { margin-bottom: 8px; }
.bals { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 16px; }
.bals li { display: flex; flex-direction: column; } .bals b { font-size: 19px; font-weight: 650; letter-spacing: -.01em; } .bals span { font-size: 11px; letter-spacing: .13em; text-transform: uppercase; color: var(--faint); }
.acctnote { margin-top: 12px; font-size: 13px; color: var(--dim); }
.mine { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .mine:empty { display: none; }
.mine a { display: flex; flex-direction: column; padding: 7px 12px; border: 1px solid rgba(59, 140, 255, .55); background: rgba(59, 140, 255, .08); transition: background .2s; } .mine a:hover { background: rgba(59, 140, 255, .2); }
.mine a b { font-size: 14px; font-weight: 650; } .mine a span { font-size: 12px; color: var(--blue2); }
.live .chips button { padding: 0 12px; }
.field em { font-style: normal; text-transform: none; letter-spacing: 0; color: var(--faint); }
.about { display: block; margin-top: 18px; font-size: 12px; letter-spacing: .13em; text-transform: uppercase; color: var(--dim); }
.about input { display: block; width: 100%; height: 44px; margin-top: 8px; padding: 0 14px; background: rgba(255, 255, 255, .02); border: 1px solid var(--line2); outline: 0; font-size: 15px; letter-spacing: 0; text-transform: none; transition: border-color .25s; } .about input:focus { border-color: var(--blue2); }
.err { min-height: 0; margin-top: 10px; font-size: 14px; color: #ffb4a8; } .err:empty { display: none; }
.sechead .seg { margin-left: auto; }
.bcard.live { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto auto auto; align-content: start; transition: border-color .25s, background .25s, opacity .6s, transform .6s var(--ease); }
.bcard.live.enter { opacity: 0; transform: translateY(10px); }
.bcard.live:hover { border-color: var(--line2); background: rgba(255, 255, 255, .04); }
.bcard.live > i { display: flex; justify-content: space-between; gap: 10px; }
.bcard.live > i .mine { display: inline; color: var(--blue2); }
.bcard.live .tile { grid-row: 2 / 4; }
.bcard.live > b { grid-column: 2; } .bcard.live .pr { grid-column: 2; grid-row: 3; }
.bcard .cap { grid-column: 3; grid-row: 2 / 4; text-align: right; } .bcard .cap strong { display: block; font-size: 17px; font-weight: 650; white-space: nowrap; } .bcard .cap em { display: block; font-style: normal; font-size: 12.5px; color: var(--blue2); white-space: nowrap; } .bcard .cap em.down { color: var(--dim); } .bcard .cap .q { display: block; font-size: 12.5px; color: var(--dim); white-space: nowrap; }
.spark { grid-column: 1 / -1; width: 100%; height: 34px; margin-top: 12px; color: var(--blue2); opacity: .8; }
.curve.full::after { background: repeating-linear-gradient(90deg, var(--blue) 0 6px, var(--blue2) 6px 8px); }
/* a tile with the token's picture */
.tile.pic { padding: 0; overflow: hidden; background: #0d1016; } .tile img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ---------- the pair picker: crypto, stocks, memecoins ---------- */
.pp { position: relative; margin-top: 8px; }
.pp-btn { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; padding: 8px 14px 8px 8px; border: 1px solid var(--line2); background: rgba(255, 255, 255, .02); text-align: left; transition: border-color .2s, background .2s; }
.pp-btn:hover, .pp.open .pp-btn { border-color: var(--blue2); background: rgba(255, 255, 255, .04); }
.pp.locked .pp-btn { cursor: default; border-color: var(--line); } .pp.locked .pp-caret { display: none; }
.pp-txt { min-width: 0; } .pp-txt b { display: block; font-size: 17px; font-weight: 650; } .pp-txt small { display: block; font-size: 12.5px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-caret { width: 10px; height: 10px; border: solid var(--dim); border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-2px, -2px); transition: transform .2s; } .pp.open .pp-caret { transform: rotate(-135deg) translate(-2px, -2px); }
.pp-logo, .pp-mini { position: relative; display: inline-grid; place-items: center; flex: none; overflow: hidden; border-radius: 50%; background: linear-gradient(160deg, rgba(143, 189, 255, .9), rgba(59, 140, 255, .5)); color: #06070a; font-weight: 700; }
.pp-logo { width: 34px; height: 34px; font-size: 15px; } .pp-mini { width: 18px; height: 18px; font-size: 9px; vertical-align: -4px; margin-right: 6px; }
.pp-logo img, .pp-mini img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #0d1016; }
.pp-quick { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.pp-quick button { display: inline-flex; align-items: center; height: 32px; padding: 0 10px 0 7px; border: 1px solid var(--line); color: var(--dim); font-size: 13px; font-weight: 600; transition: border-color .2s, color .2s; }
.pp-quick button:hover { border-color: var(--line2); color: var(--ink); } .pp-quick button.on { border-color: var(--ink); color: var(--ink); }
.pp.locked .pp-quick { display: none; }
.pp-pop { position: absolute; z-index: 20; left: 0; right: 0; top: 58px; min-width: 340px; padding: 10px; background: #0c0e13; border: 1px solid var(--line2); box-shadow: 0 18px 50px rgba(0, 0, 0, .55); }
.pp-search { width: 100%; height: 42px; padding: 0 12px; background: rgba(255, 255, 255, .03); border: 1px solid var(--line2); outline: 0; font-size: 15px; } .pp-search:focus { border-color: var(--blue2); }
.pp-tabs { display: flex; gap: 4px; margin: 8px 0; overflow-x: auto; scrollbar-width: none; } .pp-tabs::-webkit-scrollbar { display: none; }
.pp-tabs button { flex: none; display: inline-flex; align-items: baseline; gap: 6px; height: 30px; padding: 0 10px; color: var(--dim); font-size: 13px; font-weight: 600; border: 1px solid transparent; transition: color .2s, border-color .2s; }
.pp-tabs button em { font-style: normal; font-size: 11.5px; color: var(--faint); } .pp-tabs button:hover { color: var(--ink); } .pp-tabs button.on { color: var(--ink); border-color: var(--line2); }
.pp-list { position: relative; list-style: none; padding: 0; max-height: 360px; overflow-y: auto; scrollbar-width: thin; }
.pp-list li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 7px 8px; cursor: pointer; }
.pp-list li.act { background: rgba(255, 255, 255, .06); } .pp-list li.cur .pp-row b { color: var(--blue2); }
.pp-row { min-width: 0; } .pp-row b { display: block; font-size: 15px; font-weight: 650; } .pp-row small { display: block; font-size: 12.5px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-list em { font-style: normal; font-size: 12px; color: var(--faint); white-space: nowrap; }
.pp-none { padding: 14px 8px; font-size: 14px; color: var(--dim); }
.field > span em { font-style: normal; text-transform: none; letter-spacing: 0; color: var(--faint); margin-left: 6px; }
/* the board: search and pair type */
.boardctl { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 0 0 14px; }
.bsearch { flex: 1 1 320px; } .bsearch input { width: 100%; height: 42px; padding: 0 14px; background: rgba(255, 255, 255, .02); border: 1px solid var(--line2); outline: 0; font-size: 15px; } .bsearch input:focus { border-color: var(--blue2); }
.bnone { padding: 18px 0 28px; color: var(--dim); font-size: 15px; }
.bals span .pp-mini { margin-right: 4px; }

/* ---------- Launchpad: the form, in three steps ---------- */
.creategrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr) 460px; gap: 20px; align-items: start; }
.cpart { padding: 20px 24px 24px; }
.ccol { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.csteps { padding: 20px 24px 22px; background: var(--solid); } .csteps ol { list-style: none; padding: 0; counter-reset: s; }
.csteps li { counter-increment: s; position: relative; padding: 0 0 14px 34px; font-size: 14.5px; line-height: 1.5; color: var(--dim); } .csteps li:last-child { padding-bottom: 0; }
.csteps li::before { content: counter(s); position: absolute; left: 0; top: 0; width: 22px; height: 22px; display: grid; place-items: center; border: 1px solid var(--blue2); color: var(--blue2); font-size: 12px; font-weight: 650; }
.csteps li b { color: var(--ink); font-weight: 600; }
.cstep { display: flex; align-items: baseline; gap: 12px; margin-bottom: 18px; font-size: 19px; font-weight: 600; letter-spacing: -.01em; } .cstep em { font-style: normal; font-size: 13px; font-weight: 650; letter-spacing: .14em; color: var(--blue2); }
.avatar { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: center; padding: 14px; margin-bottom: 18px; border: 1px dashed var(--line2); transition: border-color .2s, background .2s; }
.avatar.over { border-color: var(--blue2); background: rgba(59, 140, 255, .08); }
.tile.big { width: 104px; height: 104px; font-size: 46px; cursor: pointer; border: 0; color: #06070a; transition: transform .2s var(--ease); } .tile.big:hover { transform: scale(1.03); }
.avtext b { display: block; font-size: 15px; font-weight: 600; } .avtext span { display: block; margin-top: 4px; font-size: 13px; color: var(--dim); line-height: 1.4; }
.avbtns { display: flex; gap: 8px; margin-top: 10px; }
.about em, .linksf em, .flabel em { font-style: normal; text-transform: none; letter-spacing: 0; color: var(--faint); margin-left: 6px; }
.linksf { margin-top: 18px; } .linksf > span, .flabel { display: block; font-size: 12px; letter-spacing: .13em; text-transform: uppercase; color: var(--dim); margin-bottom: 8px; }
.lnk { display: grid; grid-template-columns: 92px minmax(0, 1fr); align-items: center; border: 1px solid var(--line2); border-top-width: 0; background: rgba(255, 255, 255, .02); transition: border-color .25s; } .lnk:first-of-type { border-top-width: 1px; }
.lnk i { font-style: normal; padding-left: 14px; font-size: 13px; font-weight: 600; color: var(--dim); } .lnk input { height: 42px; padding: 0 12px; background: none; border: 0; border-left: 1px solid var(--line); outline: 0; font-size: 14.5px; } .lnk:focus-within { border-color: var(--blue2); }
.field.first { margin-top: 0; }
/* where the fee goes: one bar of the whole fee, and a row per receiver */
.feebar { display: flex; height: 30px; margin-top: 10px; gap: 2px; overflow: hidden; }
.feebar i { min-width: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; white-space: nowrap; font-style: normal; font-size: 12px; font-weight: 650; transition: flex-grow .5s var(--ease); }
.feebar .h { background: var(--blue); color: #fff; } .feebar .c { background: var(--ink); color: #06070a; } .feebar .o { background: #8a93a0; color: #06070a; } .feebar .p { background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .16) 0 4px, rgba(255, 255, 255, .06) 4px 8px); color: var(--dim); }
.recips { margin-top: 8px; }
.rcp { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 46px; border-bottom: 1px dashed var(--line); }
.rcp b { font-size: 15px; font-weight: 550; } .rcp strong { font-size: 17px; font-weight: 650; } .rcp strong.bad { color: #ffb4a8; } .rcp.pool b, .rcp.pool strong { color: var(--dim); font-weight: 500; }
.dot { width: 12px; height: 12px; } .dot.h { background: var(--blue); } .dot.c { background: var(--ink); } .dot.o { background: #8a93a0; } .dot.p { background: rgba(255, 255, 255, .16); }
.pct { display: flex; align-items: center; height: 36px; border: 1px solid var(--line2); background: rgba(255, 255, 255, .02); transition: border-color .25s; } .pct:focus-within { border-color: var(--blue2); }
.pct input { width: 3ch; padding: 0 2px 0 10px; background: none; border: 0; outline: 0; font-size: 16px; font-weight: 650; text-align: right; } .pct span { padding: 0 10px 0 2px; color: var(--dim); }
.rcp.other { grid-template-columns: 12px minmax(0, 1fr) auto 28px; }
.waddr { min-width: 0; height: 36px; padding: 0 10px; background: rgba(255, 255, 255, .02); border: 1px solid var(--line2); outline: 0; font-size: 13.5px; } .waddr:focus { border-color: var(--blue2); } .rcp.bad .waddr { border-color: #ff8f80; }
.rcp .x { width: 28px; height: 36px; font-size: 20px; color: var(--faint); transition: color .2s; } .rcp .x:hover { color: var(--ink); }
.addw { margin-top: 10px; height: 36px; padding: 0 14px; border: 1px dashed var(--line2); color: var(--dim); font-size: 13.5px; font-weight: 600; transition: color .2s, border-color .2s; } .addw:hover { color: var(--ink); border-color: var(--ink); }
.hint { margin-top: 10px; font-size: 13px; line-height: 1.45; color: var(--dim); }
.hintbtn { padding: 0; color: var(--blue2); font-size: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; } .hintbtn:hover { color: var(--ink); } .hint.bad, .quote.bad { color: #ffb4a8; }
/* the right column: the preview and the launch stay in sight while the form is filled in */
.cside { position: sticky; top: calc(var(--barh) + 16px); display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.tcard .cabout { grid-column: 1 / -1; margin-top: -4px; color: var(--dim); font-size: 14.5px; }
.cper { grid-column: 1 / -1; font-size: 13.5px; color: var(--blue2); line-height: 1.45; }
.cgo { padding: 20px 24px 22px; } .cgo .cta { width: 100%; margin-top: 16px; padding: 0 12px; font-size: 16px; }
.cnote { margin-top: 10px; font-size: 13px; color: var(--dim); line-height: 1.45; }
.cgo > .live { margin-top: 18px; }
/* a coin of this wallet already launched whose fee sharing is not signed yet */
.unfin { margin-top: 14px; display: grid; gap: 10px; }
.unfin div { padding: 14px 16px; border: 1px solid var(--blue2); background: rgba(59, 140, 255, .07); }
.unfin p { font-size: 14px; line-height: 1.45; color: var(--dim); } .unfin p b { color: var(--ink); }
.unfin button { width: 100%; height: 44px; margin-top: 10px; background: var(--blue); color: #fff; font-size: 15px; font-weight: 650; } .unfin button:disabled { opacity: .5; cursor: default; }
.cside .formula.small { margin: 0; font-size: 15px; } .cside .formula .cap { margin-left: auto; font-size: 13px; } .cside .formula .cap b { background: none; padding: 0 0 0 4px; color: var(--blue2); }

/* ---------- a launchpad token ---------- */
.tphead { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px 30px; padding: 16px 0 18px; }
.back { grid-column: 1 / -1; justify-self: start; font-size: 13.5px; font-weight: 600; color: var(--dim); transition: color .2s; } .back:hover { color: var(--ink); }
.tpid { grid-column: 1 / 3; display: flex; align-items: center; gap: 18px; min-width: 0; }
.tpid .tile { flex: none; width: 64px; height: 64px; font-size: 30px; }
.tptitle { min-width: 0; } .tpname { display: flex; align-items: center; gap: 12px; } .tpname h1 { font-size: clamp(26px, 2.3vw, 42px); line-height: 1.1; font-weight: 600; letter-spacing: -.022em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tptitle p { margin-top: 4px; color: var(--dim); font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tpstats { grid-column: 3; grid-row: 2; align-items: flex-start; } .tpstats dd.down { color: var(--dim); } #tp-chg { color: var(--blue2); }
.tpgone { padding: 30px 0; font-size: 17px; color: var(--dim); } .tpgone a { color: var(--blue2); }
#v-tok.gone :is(.tpstats, .tpid .tile, #tp-tag) { display: none; }
.tpgrid { display: grid; grid-template-columns: minmax(0, 1fr) 430px; gap: 20px; align-items: start; }
.tpmain, .tpside { display: flex; flex-direction: column; gap: 20px; min-width: 0; } .tpgrid .panel { min-width: 0; }
.pchart { background: var(--solid); padding-bottom: 12px; } .pchart .head { margin-bottom: 6px; }
.pricewrap { position: relative; height: clamp(300px, calc(100vh - 470px), 520px); }
.trade { padding: 18px 20px 18px; }
.side2 { display: grid; grid-template-columns: 1fr 1fr; margin-bottom: 16px; } .side2 button { height: 44px; font-size: 15px; }
.amt { display: flex; align-items: baseline; gap: 10px; padding: 0 16px; border: 1px solid var(--line2); background: rgba(255, 255, 255, .02); transition: border-color .25s; } .amt:focus-within { border-color: var(--blue2); }
.amt span { font-size: 12px; letter-spacing: .13em; text-transform: uppercase; color: var(--dim); white-space: nowrap; }
.amt input { flex: 1; min-width: 0; height: 62px; background: none; border: 0; outline: 0; font-size: 30px; font-weight: 650; text-align: right; }
.amt em { font-style: normal; font-size: 15px; color: var(--dim); }
.presets.three { grid-template-columns: repeat(3, 1fr); }
.quote { margin-top: 14px; min-height: 42px; font-size: 14px; line-height: 1.45; color: var(--dim); }
.trade .cta { width: 100%; margin-top: 14px; } .trade .cta.sell { background: var(--ink); color: #000; } .trade .cta.sell:hover { background: #fff; } .trade .cta.sell:disabled { background: rgba(255, 255, 255, .1); color: var(--dim); }
.tbal { display: flex; justify-content: space-between; gap: 12px; margin-top: 10px; font-size: 13.5px; color: var(--dim); } .tbal .err { margin: 0; }
.done { margin-top: 8px; font-size: 14px; color: var(--blue2); } .done:empty { display: none; }
.tpos dl div, .trules dl div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 8px 0; border-bottom: 1px dashed var(--line); }
.tpos dd, .trules dd { font-size: 15.5px; font-weight: 600; text-align: right; }
.nopos { font-size: 15px; color: var(--dim); }
.giant.small { padding: 0 0 8px; } .giant.small span { font-size: clamp(44px, 3.4vw, 64px); }
.bigcurve { position: relative; height: 10px; background: rgba(255, 255, 255, .08); } .bigcurve i { position: absolute; inset: 0; width: calc(var(--p, 0) * 100%); background: var(--blue); transition: width 1s var(--ease); } .bigcurve i.full { background: repeating-linear-gradient(90deg, var(--blue) 0 10px, var(--blue2) 10px 12px); }
.tcurvebox .note { font-size: 13.5px; line-height: 1.45; }
.formula.small { margin-top: 14px; padding: 10px 14px; font-size: 15px; }
.tplinks { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; } .tplinks:empty { display: none; }
.tplinks a { height: 30px; display: inline-flex; align-items: center; padding: 0 12px; border: 1px solid var(--line2); font-size: 13px; font-weight: 600; transition: background .2s, color .2s; } .tplinks a:hover { background: var(--ink); color: #000; }
/* the contract address: one press copies it */
.tplinks .ca { height: 30px; display: inline-flex; align-items: center; gap: 8px; padding: 0 10px; border: 1px solid var(--line2); background: rgba(255, 255, 255, .03); font-size: 13px; transition: border-color .2s, background .2s; }
.tplinks .ca span { color: var(--faint); font-weight: 600; letter-spacing: .06em; font-size: 11.5px; } .tplinks .ca b { font-weight: 600; } .tplinks .ca em { font-style: normal; color: var(--blue2); font-weight: 600; }
.tplinks .ca:hover { border-color: var(--blue2); }
.tplinks .ca.full { height: auto; min-height: 30px; padding: 5px 10px; max-width: 100%; flex-wrap: wrap; text-align: left; } .tplinks .ca.full b { word-break: break-all; user-select: all; } .tplinks .ca.copied { border-color: var(--blue2); background: rgba(59, 140, 255, .1); }
/* market cap in dollars with the pair asset under it */
.tpstats .cap2 small { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 500; color: var(--dim); }
.pchart .head { gap: 10px; } #tp-cur { margin-left: auto; }
/* after a trade on the chain: one line and a short link to the transaction */
.trade .done { color: var(--ink); line-height: 1.5; } .trade .done a { color: var(--blue2); font-weight: 600; white-space: nowrap; } .trade .done a:hover { color: var(--ink); }
.splitl { margin-top: 14px; } .splitl .feebar { margin-top: 0; height: 22px; } .splitl ul { list-style: none; padding: 0; margin-top: 6px; }
.splitl li { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto auto; gap: 10px; align-items: center; min-height: 32px; font-size: 14px; border-bottom: 1px dashed var(--line); }
.splitl li span { font-weight: 650; } .splitl li em { font-style: normal; color: var(--dim); font-size: 13px; min-width: 9ch; text-align: right; }
.tpdata { margin-top: 20px; }
.list li.you { background: rgba(59, 140, 255, .1); } .list li.you .a { color: var(--blue2); }
/* on a token page the amounts carry the pair name, so the tape drops the address (yours stays) and payouts the transaction count */
.tpdata .tape li:not(.you) .a { display: none; } .tpdata .pays li span:last-child { display: none; } .tpdata .pays li { grid-template-columns: 92px auto 1fr; }
#tp-chg.down { color: var(--dim); }

/* ---------- moving between sections: a cover that opens the way a hand sweeps a clock face ---------- */
#wipe { --a: -30deg; --hand: 0; position: fixed; inset: var(--barh) 0 0 0; z-index: 25; overflow: hidden; pointer-events: none; }
#wipe .cover { position: absolute; inset: 0; background: var(--grid) 0 calc(-1 * var(--barh)), var(--bg); -webkit-mask: conic-gradient(from 0deg at 50% 50%, transparent 0 var(--a), #000 calc(var(--a) + 30deg)); mask: conic-gradient(from 0deg at 50% 50%, transparent 0 var(--a), #000 calc(var(--a) + 30deg)); }
#wipe .hand { position: absolute; left: 50%; bottom: 50%; width: 1px; height: 150vmax; transform-origin: 50% 100%; transform: rotate(calc(var(--a) + 14deg)); background: linear-gradient(to top, rgba(143, 189, 255, .55), rgba(143, 189, 255, 0) 70%); opacity: var(--hand); }

footer { max-width: var(--maxw); margin: 0 auto; padding: 18px 28px 34px; color: var(--faint); font-size: 13px; }

/* ---------- very wide screens: a wider column and larger type ---------- */
@media (min-width: 2200px) {
  :root { --maxw: 2100px; --barh: 66px; }
  .brand { font-size: 17px; } .mark { width: 26px; height: 26px; } .tabs a { font-size: 15.5px; padding: 0 20px; } .toplink { height: 40px; font-size: 14.5px; }
  h2 { font-size: 13px; } .stats dd { font-size: 19px; } .stats dt { font-size: 11.5px; } .docktitle p, .read { font-size: 16px; } .ring { width: 36px; height: 36px; }
  .hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 26px 0 24px; gap: 24px 56px; } .hero h1 { font-size: 66px; } .lede { font-size: 21px; } .shout b { font-size: 54px; } .shout span { font-size: 15.5px; }
  .cta { height: 68px; line-height: 68px; font-size: 20px; padding: 0 40px; } .more { height: 68px; font-size: 18px; padding: 0 28px; }
  .trailer { min-height: 420px; } .tbtn { height: 36px; font-size: 14px; }
  .widget { padding: 18px 24px 14px; } .dockchart { --above: 668px; height: clamp(360px, calc(100vh - var(--above)), 760px); }
  .mech { padding-top: 64px; } .mechhead h2 { font-size: 15px; } .mechhead h3 { font-size: 46px; } .mechgrid { grid-template-columns: 470px minmax(0, 1fr); gap: 28px 64px; }
  .lines h4 { font-size: 21px; } .lines .formula { font-size: 20px; padding: 15px 20px; } .lines em { font-size: 31px; } .lines li { grid-template-columns: 56px minmax(0, 1fr); padding: 22px 0 24px; } .take { font-size: 22px; }
  .howhead h1 { font-size: 46px; } .rail button span { font-size: 17px; } .rail button b { font-size: 12.5px; } .railnav .more, .railnav .cta { height: 56px; font-size: 17px; } .railnav .cta { line-height: 56px; min-width: 240px; }
  .rule { gap: 30px 72px; } .rule h3 { font-size: 50px; } .rule p { font-size: 20px; } .rule .eg { font-size: 18px; } .formula { font-size: 23px; padding: 20px 24px; } .rule em { font-size: 15px; }
  .fig { height: clamp(420px, calc(100vh - 310px), 860px); }
  .data { grid-template-columns: minmax(0, 1fr) 500px; } .row { font-size: 16.5px; } .list li { font-size: 15px; height: 36px; } .tape { --trow: 36; }
  .lead h1 { font-size: 62px; } .lead p { font-size: 18.5px; } .sechead p { font-size: 16.5px; }
  .soonhead h1 { font-size: 62px; } .soonhead p { font-size: 21px; } .creategrid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr) 540px; } .cstep { font-size: 22px; } .rcp b { font-size: 16.5px; } .soonhead { grid-template-columns: minmax(0, 1fr) 540px; } .tpgrid { grid-template-columns: minmax(0, 1fr) 500px; } .tpname h1 { font-size: 50px; } .bals b { font-size: 22px; } .bcard .cap strong { font-size: 19px; } .tpos dd, .trules dd { font-size: 17.5px; } .tname b { font-size: 28px; } .tcard dd { font-size: 17.5px; } .steps3 h3 { font-size: 25px; } .steps3 p { font-size: 18px; } .bcard b { font-size: 19px; }
  .posgrid { grid-template-columns: minmax(0, 1fr) 500px; } .seatgrid { grid-template-columns: 440px 380px minmax(0, 1fr); } dl dt { font-size: 16px; } .pos dd, .sellbox dd, .readout dd { font-size: 18.5px; }
  .addr input { height: 68px; font-size: 19px; } .mapwrap { min-height: 460px; }
}
@media (max-width: 1500px) { .creategrid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .cside { grid-column: 1 / -1; position: static; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } .cside .formula.small { grid-column: 1 / -1; } }
@media (max-width: 1280px) { .soonhead { grid-template-columns: minmax(0, 1fr) 400px; } .tpgrid { grid-template-columns: minmax(0, 1fr) 380px; } .tphead { grid-template-columns: 1fr; } .tpid, .tpstats { grid-column: 1; } .tpstats { grid-row: auto; flex-wrap: wrap; } .seatgrid { grid-template-columns: 360px minmax(0, 1fr); } .mapp { grid-column: 1 / -1; } .stats { gap: 22px; } .widget .stats div:nth-child(3) { display: none; } .mechgrid { grid-template-columns: 340px minmax(0, 1fr); gap: 24px 32px; } .board { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1100px) {
  .thead, .row { grid-template-columns: 30px minmax(150px, 1.4fr) .8fr .9fr .8fr minmax(100px, 1.2fr) .8fr; gap: 8px; }
  .bar { gap: 18px; } .feedtag, .brand span { display: none; } .tabs { flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; } .tabs::-webkit-scrollbar { display: none; } .tabs a { padding: 0 10px; }
  .hero, .rule, .data, .posgrid, .pregrid, .mechgrid, .steps3, .soonhead, .tpgrid, .creategrid, .cside { grid-template-columns: 1fr; }
  .creategrid, .cside { grid-template-columns: minmax(0, 1fr); }
  .ccol { display: contents; } .csteps { order: 5; }   /* the form keeps its steps in order; "when you press Launch" goes to its end */
  /* one column: buying comes right under the price, before the holder chart */
  .tpmain, .tpside { display: contents; } .pchart { order: 1; } .trade { order: 2; } .tpos { order: 3; } .tpmain .hchart { order: 4; } .tcurvebox { order: 5; } .trules { order: 6; } .steps3 { gap: 22px; } .pos dl { columns: 1; }
  .dockchart { height: clamp(300px, 46vh, 460px); } .fig { height: clamp(320px, 48vh, 460px); } .railnav { margin-left: auto; }
}
@media (max-width: 760px) {
  .bar { gap: 12px; padding: 0 14px; } .tabs { flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; } .tabs::-webkit-scrollbar { display: none; } .board { grid-template-columns: 1fr; gap: 12px; } .soonhead p { font-size: 16px; } .brand > b, .brand span, .feedtag { display: none; } .tabs a { padding: 0 8px; font-size: 13px; } .toplink:not(.buy) { display: none; } .toplink.buy { padding: 0 10px; }
  main { padding: 0 14px 20px; } .hero { padding: 20px 0 16px; } .shout { gap: 0 14px; } .shout span { font-size: 12.5px; } .trailer { min-height: 430px; } .tctl { left: 12px; right: 12px; } #t-full { display: none; }
  .widget { padding: 10px 12px 8px; } .dockhead { flex-wrap: wrap; gap: 6px; } .docktitle { flex: 1 0 100%; order: 2; } .docktitle h2 { display: none; } .docktitle p { white-space: normal; font-size: 12.5px; margin: 0; }
  .widget .stats div:nth-child(2) { display: none; } .stats { gap: 18px; } .dockchart { height: 300px; }
  .mech { padding-top: 34px; } .lines li { grid-template-columns: 30px minmax(0, 1fr); } .lines em { font-size: 20px; } .lines h4 { font-size: 16px; } .lines .formula { font-size: 14.5px; padding: 10px 12px; gap: 5px 8px; } .formula .cap { margin-left: 0; flex-basis: 100%; } .take { font-size: 16px; }
  .howhead { gap: 12px; } .rail { flex-basis: 100%; } .rail button { padding: 4px 4px 8px 8px; } .rail button span { display: none; } .railnav { width: 100%; } .railnav .more, .railnav .cta { flex: 1; min-width: 0; padding: 0 10px; justify-content: center; }
  .legend { display: none; } .formula { font-size: 16px; padding: 12px 14px; } .fig { height: 320px; } .rule { padding: 16px 0 8px; gap: 20px; }
  .hchart .head { flex-wrap: wrap; } .read { white-space: normal; font-size: 12.5px; }
  .thead, .row { grid-template-columns: 30px 1fr 1fr 1fr; } .thead span:nth-child(3), .thead span:nth-child(4), .thead span:nth-child(7), .row > span:nth-child(3), .row > span:nth-child(4), .row > span:nth-child(7) { display: none; }
  .row .f i { display: none; } .seatgrid { grid-template-columns: 1fr; } .cta, .more { height: 54px; } .cta { line-height: 54px; }
  .tape li { grid-template-columns: 50px 32px minmax(0, 1fr) auto; } .tape .a { display: none; }
  .tpid { align-items: flex-start; } .tpid .tile { width: 52px; height: 52px; font-size: 24px; } .tpname { flex-wrap: wrap; gap: 6px 10px; } .tpname h1 { font-size: 26px; flex-basis: 100%; } .tptitle p { white-space: normal; font-size: 14px; } .tpstats { gap: 14px 22px; } .pricewrap { height: 320px; } .amt input { font-size: 24px; height: 54px; }
  .pp-pop { min-width: 0; padding: 8px; } .pp-tabs button { padding: 0 8px; } .pp-list { max-height: 320px; } .pp-list li { gap: 10px; padding: 7px 4px; }
  .boardctl .seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; } .boardctl .seg button { flex: none; padding: 0 12px; }
  .pays li { grid-template-columns: 80px auto 1fr; } .pays li span:last-child { display: none; } .addr input { font-size: 14px; padding: 0 12px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }