/* mofo v2 — design system. Black is the room and fire is the accent: orange is a burn, amber is heat, ink is everything
   you read; the page is either a light-washed black or a warm white. Two themes, one set of names: every rule below reads
   a token, never a colour. Mint and a yellow "amber" exist solely as status signals and never appear without a label. */
:root{
  /* fixed in both themes: the black room, the fire band, the ball, hero cards (Fable's metal and its tokens live in fable.css) */
  --room:#0b0806; --fire:#daa264; --fire-2:#43230f; --ember:#f8d49a; --jet:#0b0806; --snow:#fff7f0; --glow:#f8d49a;
  --sans:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif; --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --notch:14px; --gutter:24px; --max:1260px;
}
/* dark (default): a light-washed black, warm like a cooled coal */
/* dark (owner, 30 Sep, with the chocolate chrome: see fable.css, which repeats these and adds the metal's gradients): a
   warm near-black with cream ink; green and red are the candles' and the trades' own */
:root,:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0b0806; --panel:#140f0c; --panel-2:#1c1512; --line:#2c221c; --line-2:#40322a;
  --ink:#f7efe6; --ink-2:#cfc2b5; --muted:#918375; --dim:#5c5046;
  --brand:#daa264; --brand-ink:#fff4e2; --brand-deep:#43230f; --brand-dim:#2d1d12; --bar:#4d423a;
  --mint:#3ddc97; --amber:#ffd23f; --up:#22c55e; --down:#ef4444; --error:#ff4d4d; --mesh:#3d9bff; --arb:#b388ff;
  --mast:rgba(11,8,6,.96); --tip-bg:#140f0c; --shadow:rgba(0,0,0,.6);
}
:root[data-theme="light"]{
  color-scheme:light;
  --bg:#faf6f1; --panel:#ffffff; --panel-2:#f4ede5; --line:#eae1d6; --line-2:#d4c7b8;
  --ink:#1c1510; --ink-2:#4b3f36; --muted:#7a6d61; --dim:#b3a597;
  --brand:#c8400a; --brand-ink:#ffffff; --brand-deep:#6b1f00; --brand-dim:#fde4d4; --bar:#c9b8a8;
  --mint:#0b7a4d; --amber:#a15c00; --up:#0b7a4d; --down:#c62828; --error:#c62828; --mesh:#1a6fd6; --arb:#7c3aed;
  --mast:rgba(250,246,241,.9); --tip-bg:#ffffff; --shadow:rgba(60,30,10,.18);
}
/* old names, kept so nothing written against the red build breaks */
:root{--red:var(--brand);--red-2:var(--room);--red-3:var(--brand-deep);--black:var(--jet);--bone:var(--ink);--bone-2:var(--ink-2);--ox:var(--brand-dim)}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{background:var(--bg);color:var(--ink);-webkit-text-size-adjust:100%}
body{margin:0;font:400 15px/1.55 var(--sans);background:var(--bg);color:var(--ink);min-height:calc(100 * var(--vh));overflow-x:hidden}
/* THE PAGE SCALE (owner, 2026-09-18): on desktop the whole site renders the way it looks at 75% browser zoom. From 1100px of
   real width up, html is zoomed; phones and tablets keep 100% so text stays readable. Three things make it match real
   browser zoom: window-relative sizes go through --vw/--vh (which undo the scale), the two wide breakpoints are re-mapped
   (1100 -> 1099.98, 1480 -> 1110: where 75% zoom would trip them), and pointer maths in charts.js and the card glide in
   explore.js convert screen pixels to page pixels.
   30 Sep (owner: "I want the default zoom at 100% to be the 90% zoom", asked twice): .6075, the look of the first .75
   site at 81% browser zoom (.75 x .9 x .9). The pieces that undo the page scale (zoom 1.33333, --pz 1.3333,
   --fc-font-scale) are left as they were, so they shrink with it, as under browser zoom; the scripts read the zoom
   itself (getComputedStyle), never a number.
   2 Oct: make the previous 110% browser view the desktop default (.6075 x 1.1 = .66825). */
:root{--vw:1vw;--vh:1vh}
@media (min-width:1100px){html{zoom:.66825}:root{--vw:calc(1vw / .66825);--vh:calc(1vh / .66825)}}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
img{max-width:100%}
::selection{background:color-mix(in srgb,var(--brand) 38%,transparent);color:var(--ink)}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.mono{font-family:var(--mono)}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
.muted{color:var(--muted)} .bone2{color:var(--ink-2)}
.up{color:var(--up)} .down{color:var(--down)}

/* ---- type */
h1,h2,h3{margin:0;font-family:var(--sans);font-stretch:125%;font-weight:900;letter-spacing:-.035em;line-height:.94}
h1{font-size:clamp(44px,calc(8.2 * var(--vw)),120px)} h2{font-size:clamp(30px,calc(4.4 * var(--vw)),56px)} h3{font-size:clamp(20px,calc(2.2 * var(--vw)),28px);letter-spacing:-.02em;line-height:1.05}
.eyebrow{font:500 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--brand-text-solid);display:flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:22px;height:2px;background:currentColor}
.lede{font-size:clamp(16px,calc(1.5 * var(--vw)),19px);line-height:1.5;color:var(--ink-2);max-width:60ch}
.lede strong{color:var(--ink)}

/* ---- buttons: hard offset shadow, the press moves into it */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:13px 20px;border:2px solid var(--bg);background:var(--brand-sheen-sm);color:var(--brand-ink);font:800 14px/1 var(--sans);font-stretch:112%;letter-spacing:.01em;cursor:pointer;box-shadow:var(--brand-bevel,0 0 transparent),4px 4px 0 var(--brand-deep);transition:transform .08s,box-shadow .08s,background .15s;white-space:nowrap}
.btn:hover{transform:translate(2px,2px);box-shadow:var(--brand-bevel,0 0 transparent),2px 2px 0 var(--brand-deep);background:var(--brand-sheen-sm-hover)}
.btn:active{transform:translate(4px,4px);box-shadow:0 0 0 var(--brand-deep)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line-2);box-shadow:4px 4px 0 var(--line)}
.btn.ghost:hover{border-color:var(--ink);box-shadow:2px 2px 0 var(--line);background:transparent}
.btn.ink{background:var(--jet);color:var(--snow);border-color:var(--jet);box-shadow:4px 4px 0 rgba(0,0,0,.35)}
.btn.ink:hover{background:var(--panel-2);box-shadow:2px 2px 0 var(--brand-deep)}
.btn.bone{background:var(--snow);color:var(--jet);border-color:var(--jet);box-shadow:4px 4px 0 rgba(0,0,0,.4)}
.btn.sm{padding:9px 14px;font-size:13px;box-shadow:3px 3px 0 var(--brand-deep)}
.btn.xl{padding:22px 38px;font-size:21px;box-shadow:var(--brand-bevel,0 0 transparent),6px 6px 0 var(--brand-deep)}
.explore-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px 28px;flex-wrap:wrap;margin-bottom:28px}
/* the launch form: the connected wallet's ETH under the first buy, with a "max" that fills in the most it can spend */
.buybal{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;margin-top:6px}
.buybal b{font-weight:700;color:var(--ink)}
.buybal.short b{color:var(--brand);background:var(--brand-sheen-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.buybal button{padding:0;border:0;color:var(--brand);background:var(--brand-sheen-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font:inherit;font-weight:700;text-decoration:underline;cursor:pointer}
/* the launch form's coin #0 notice: the guardian's seat, or "reserved" for everyone else */
.zero-note{margin:0 0 20px;padding:14px 16px;border:2px solid transparent;background:linear-gradient(var(--panel),var(--panel)) padding-box,var(--brand-outline) border-box;color:var(--ink);font-size:13.5px;line-height:1.5}
.zero-note b{display:block;margin-bottom:4px;font-weight:800;color:var(--brand);background:var(--brand-sheen-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.zero-note.reserved{border-color:var(--line-2);background:var(--panel-2)}
.zero-note.reserved b{color:var(--ink);background:none;-webkit-text-fill-color:currentColor}
#fGenesis{width:100%;font:400 12.5px/1.5 var(--mono)}
/* a capped board's search: coins the index does not carry, as plain links */
.also{margin-top:18px;border-top:1px solid var(--line)}
.also-head{margin:14px 0 6px;color:var(--muted);font:400 11.5px/1.5 var(--mono)}
.also-row{display:grid;grid-template-columns:minmax(0,9em) minmax(0,1fr) auto;gap:14px;align-items:baseline;padding:9px 4px;border-bottom:1px solid var(--line);color:inherit;text-decoration:none}
.also-row:hover{background:var(--panel)}
.also-row b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.also-row span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.also-row .mono{font:400 11.5px var(--mono);color:var(--muted)}
@media (max-width:640px){.explore-head .btn.xl{width:100%;padding:18px 24px;font-size:18px}}
.btn.block{display:flex;width:100%}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}
/* launching (owner, 23 Sep): the orange launch button shows only a centred spinner from the click until the launch
   confirms; the steps run in the background. It stays full orange although the form is locked while it works. */
#launchBtn.busy,#launchBtn.busy[disabled],#launchBtn.busy:hover{position:relative;opacity:1;color:transparent;cursor:progress;background:var(--brand-sheen-sm);transform:none}
#launchBtn.busy::after{content:"";position:absolute;left:50%;top:50%;width:20px;height:20px;margin:-10px 0 0 -10px;border:3px solid rgba(0,0,0,.2);border-top-color:var(--brand-ink);border-radius:50%;animation:launchspin .75s linear infinite}
@keyframes launchspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){#launchBtn.busy::after{animation-duration:2.2s}}
/* "switch your wallet back" (app.js awaitAccount): waiting, with a small spinner, until the wallet is on the right account */
.sw-card .sw-wait{display:flex;align-items:center;gap:10px;margin:14px 0 16px;font:500 13px/1.4 var(--mono);color:var(--ink-2)}
.sw-card .sw-wait::before{content:"";width:14px;height:14px;flex:none;border:2px solid var(--line-2);border-top-color:var(--brand);border-radius:50%;animation:launchspin .8s linear infinite}
@media (prefers-reduced-motion:reduce){.sw-card .sw-wait::before{animation-duration:2.4s}}
.dc-card .dc-row{display:flex;gap:12px;justify-content:flex-end;margin-top:4px}
.dc-card .dc-addr{white-space:nowrap}
/* the coin page while the chain is read: one clear card instead of an empty page (owner, 24 Sep). The card stands in for
   the chart and the activity tabs only; the terminal's frame stays drawn around it from the first paint: the token rail,
   the header (once the feed previews it), the view tabs and the trade box (6 Oct, live launch: the shell's columns are
   .term's children now, so hiding .term's children, as before, left the page blank down to the footer until data came) */
#coinPage.loading > :not(.term){display:none !important}
#coinPage.loading .terminal-main > :not(.term-head):not(.token-primary-tabs):not(#coinLoading){display:none !important}
#coinPage.loading #coinTop:empty,#coinPage.loading #coinStats:empty,#coinPage.loading .term-head:has(#coinTop:empty){display:none}
/* the card is the first-visit loader, small (owner, 6 Oct, "Molten pour"): the ƒ poured full of molten bronze (FableLoader.mini,
   fable-loader.css .fl-mini) over "Preparing" in wide-spaced mono with breathing bronze dots; no paragraph. On desktop the
   page is zoomed out (html zoom above), so the card is drawn larger there to look the same size on screen */
.coin-loading{min-height:min(62vh,600px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;padding:48px 16px;text-align:center}
.cl-mark{position:relative;flex:none;width:84px;height:84px}
.cl-still{position:absolute;inset:0;width:100%;height:100%;filter:drop-shadow(0 4px 10px rgba(0,0,0,.5))}
.cl-title{margin:0;padding-left:.52em;font:500 12px/1 var(--mono);letter-spacing:.52em;text-transform:uppercase;white-space:nowrap;color:rgba(207,194,181,.82)}
/* the instant preview is up (header and numbers from the feed): the card shrinks to one line under them */
.coin-loading.compact{min-height:0;flex-direction:row;gap:12px;padding:26px 16px 48px}
.coin-loading.compact .cl-mark{width:30px;height:30px}
.coin-loading.compact .cl-title{font-size:11px;line-height:30px}   /* as tall as the mark, so the word sits level with it */
@media (min-width:1100px){.cl-mark{width:120px;height:120px}.coin-loading{gap:30px}.cl-title{font-size:17px}.coin-loading.compact .cl-mark{width:44px;height:44px}.coin-loading.compact .cl-title{font-size:15px;line-height:44px}}
/* inside the terminal's frame the shrunk card keeps the chart's room, so the footer is not pulled up under it and the page
   does not jump when the chart arrives (6 Oct) */
#coinPage.loading .terminal-main > .coin-loading.compact{min-height:min(62vh,600px);align-items:flex-start}
/* a launch that stopped: what happened and that it is safe to try again, right under the button */
.launch-fail{margin:12px 0 0;padding:12px 14px;border:2px solid var(--error);background:color-mix(in srgb,var(--error) 9%,transparent);color:var(--ink);font-size:13.5px;line-height:1.5}
.launch-fail b{display:block;margin-bottom:3px;color:var(--error);font-weight:800}

/* ---- tags */
.tag{display:inline-flex;align-items:center;gap:6px;padding:4px 7px;border:1px solid var(--line-2);font:500 10px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);white-space:nowrap;vertical-align:middle}
.tag.red{background:var(--brand-sheen-sm);border-color:transparent;color:var(--brand-ink);box-shadow:var(--brand-bevel);font-weight:800}
.tag.bone{background:var(--ink);border-color:var(--ink);color:var(--bg);font-weight:700}
.tag.sym{text-transform:none}   /* a ticker keeps the creator's own case ($mirror stays lowercase) */
.tag.amber{border-color:var(--amber);color:var(--amber)}
.tag.mint{border-color:var(--mint);color:var(--mint)}
.tag .pip{width:6px;height:6px;border-radius:50%;background:currentColor}
.tag.live .pip{animation:blink 1.4s infinite}
/* the coin page's "Watching Fable" chip: a white box, brown dot and letters (owner, 30 Sep) */
.tag.watch-chip{background:#fff;border-color:transparent;color:var(--brand-shade);box-shadow:none}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}

/* ---- masthead */
.mast{position:sticky;top:0;z-index:40;background:var(--mast);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.mast-in{display:flex;align-items:center;gap:22px;height:64px}
.brand{display:flex;align-items:center;gap:11px;font:900 25px/1 var(--sans);font-stretch:125%;letter-spacing:-.05em}
.brand .ball{width:62px;height:42px;margin:-4px -2px -4px -2px}
.ball.sm .gloss,.ball.sm .fleck:nth-child(n+4){display:none}.ball.sm .fleck{transform-box:fill-box;transform-origin:center;scale:1.5}.ball.sm .eye{stroke-width:1.6}.ball.sm .lids{scale:1.2}
.brand-word{position:relative}
/* THE TOP BUTTONS (owner's pick, 1 Oct, option A: "that nice shiny chocolate metalized colour with white outer glow ... bigger ...
   very apparent"): every button is the Buy press (fable.css WIDE PRESS: --brand-sheen-btn + --brand-bevel + --brand-ink-shadow)
   with white text and a soft white glow. The page you're on is brighter (two --brand-lift washes), glows harder and carries a
   white underline. LAUNCH is the hero (owner, 1 Oct: "change it to launch ... bigger than all the other ones and make it glow
   the most ... put it as the last one with a little space in between"): last, set apart, taller and heavier, the brightest metal
   and the strongest glow; " a coin" shows only on the desktop row, where there is room. Hover lifts and glows, a press sinks and
   dims, both eased over .15s; reduced motion keeps the colour change and drops the movement. Sizes here are for the desktop
   page scale (html zoom .66825 from 1100px): 42px / 18px renders about 28px / 12px. Tablet sizes below; phone in fable-theses.css.
   The nav no longer scrolls: every width is sized to fit, so the glow is never clipped. */
/* the top buttons (owner, 1 Oct): their original size, every one in the Buy button's chocolate metal with a soft white
   outer glow; the page you're on brighter, glowing more, with a white underline */
.nav{display:flex;align-items:center;gap:8px;margin-left:8px;overflow-x:auto;scrollbar-width:none;padding:8px 6px;margin-top:-8px;margin-bottom:-8px}
.nav::-webkit-scrollbar{display:none}
.nav a{position:relative;padding:9px 15px;border-radius:999px;font:700 13.5px/1 var(--sans);white-space:nowrap;color:#fff;text-shadow:var(--brand-ink-shadow);background:var(--brand-sheen-btn);border:0;box-shadow:var(--brand-bevel),0 0 9px rgba(255,255,255,.4);transition:background .15s ease,box-shadow .15s ease,transform .15s ease,filter .15s ease}
.nav a:hover{color:#fff;background:var(--brand-sheen-btn-hover);box-shadow:var(--brand-bevel),0 0 14px rgba(255,255,255,.58);transform:translateY(-1px)}
.nav a:active{transform:translateY(1px);filter:brightness(.9);box-shadow:inset 0 2px 5px rgba(30,14,5,.7),0 0 6px rgba(255,255,255,.28)}
.nav a[data-on="true"]{background:var(--brand-lift),var(--brand-lift),var(--brand-sheen-btn);box-shadow:var(--brand-bevel),0 0 0 1px rgba(255,255,255,.5),0 0 16px rgba(255,255,255,.66)}
.nav a[data-on="true"]::after{content:'';position:absolute;left:28%;right:28%;bottom:4px;height:2px;border-radius:2px;background:#fff;box-shadow:0 0 5px rgba(255,255,255,.9)}
@media (prefers-reduced-motion:reduce){.nav a,.nav a:hover,.nav a:active{transform:none;transition:background .15s ease,box-shadow .15s ease}}
.mast-actions{margin-left:auto;display:flex;align-items:center;gap:10px}
/* Launch beside the bell (owner, 1 Oct): the nav's metal at its size, glowing the most */
.mast-launch{position:relative;display:inline-flex;align-items:center;padding:9px 18px;border-radius:999px;font:800 13.5px/1 var(--sans);white-space:nowrap;color:#fff;text-shadow:var(--brand-ink-shadow);background:var(--brand-lift),var(--brand-lift),var(--brand-sheen-btn);box-shadow:var(--brand-bevel),0 0 0 1px rgba(255,255,255,.55),0 0 16px rgba(255,255,255,.7),0 0 34px rgba(255,236,204,.35);transition:background .15s ease,box-shadow .15s ease,transform .15s ease,filter .15s ease}
.mast-launch:hover{color:#fff;background:var(--brand-lift),var(--brand-lift),var(--brand-lift),var(--brand-sheen-btn);box-shadow:var(--brand-bevel),0 0 0 1px rgba(255,255,255,.75),0 0 22px rgba(255,255,255,.85),0 0 44px rgba(255,236,204,.45);transform:translateY(-1px)}
.mast-launch:active{transform:translateY(1px);filter:brightness(.92);box-shadow:inset 0 2px 5px rgba(30,14,5,.7),0 0 0 1px rgba(255,255,255,.4),0 0 10px rgba(255,255,255,.45)}
.mast-launch[data-on="true"]::after{content:'';position:absolute;left:28%;right:28%;bottom:4px;height:2px;border-radius:2px;background:#fff;box-shadow:0 0 5px rgba(255,255,255,.9)}
@media (prefers-reduced-motion:reduce){.mast-launch,.mast-launch:hover,.mast-launch:active{transform:none}}
@media (max-width:640px){.mast-launch{padding:8px 12px;font-size:12px}}
@media (min-width:641px){.nav a,.mast-launch{padding-top:11px;padding-bottom:11px}}
.wallet{padding:9px 13px;border:1px solid var(--line-2);background:transparent;font:500 12.5px/1 var(--mono);color:var(--ink);cursor:pointer}
.wallet:hover{border-color:var(--ink)}
.theme{width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line-2);background:transparent;color:var(--ink);cursor:pointer;padding:0}
.theme:hover{border-color:var(--ink)}
.theme svg{width:18px;height:18px;display:block}
.theme .sun{display:none} :root[data-theme="light"] .theme .sun{display:block} :root[data-theme="light"] .theme .moon{display:none}
.wallet[data-on="true"]{border-color:var(--mint);color:var(--mint)}
/* not connected: the header's one orange button, drawn like .btn.sm (connected, it turns into the green address chip above) */
.wallet[data-on="false"]{padding:9px 14px;border:2px solid var(--bg);background:var(--brand-sheen-sm);color:var(--brand-ink);font:800 13px/1 var(--sans);font-stretch:112%;letter-spacing:.01em;box-shadow:var(--brand-bevel,0 0 transparent),3px 3px 0 var(--brand-deep);transition:transform .08s,box-shadow .08s,background .15s}
.wallet[data-on="false"]:hover{border-color:var(--bg);transform:translate(2px,2px);box-shadow:var(--brand-bevel,0 0 transparent),2px 2px 0 var(--brand-deep);background:var(--brand-sheen-sm-hover)}
.wallet[data-on="false"]:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--brand-deep)}

/* ---- the tape: every burn, as it lands */
.tape{background:var(--brand-satin);color:var(--brand-ink);border-bottom:2px solid var(--jet);overflow:hidden;white-space:nowrap;font:700 12px/1 var(--mono);letter-spacing:.02em}
.tape-track{display:inline-flex;gap:0;padding:5px 0;animation:tape 60s linear infinite;will-change:transform}
.tape:hover .tape-track{animation-play-state:paused}
.tape-item{display:inline-flex;align-items:center;gap:8px;padding:0 22px;border-right:2px solid rgba(255,230,200,.18)}
.tape-item b{font-weight:800}
.tape-item .q{font-weight:500}
@keyframes tape{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.tape-track{animation:none}}
/* TRIAL (owner, 30 Sep: "I just want to see how it looks"): the burn tape white with brown text, like the New launches count and
   the Watching Fable box. To go back to the satin bronze tape, delete these two lines. */
.tape{background:#fff;color:var(--brand-shade)}
.tape-item{border-right-color:rgba(138,85,44,.22)}
/* the burner's picture before their name (owner, 30 Sep) */
.tape-av{width:20px;height:20px;border-radius:50%;object-fit:cover;flex:none;margin-right:-2px;box-shadow:0 0 0 1px rgba(138,85,44,.35);background:#f3e6d8}
/* the rest of the name (fable-rich.js who; owner, 30 Sep evening): the seal, the X logo as a mark, the @handle after a chosen name */
.tape-item .tape-seal{width:13px;height:13px;margin-left:-4px}
.tape-item .tape-x{color:inherit;margin-left:-5px;--fx-size:10px}
.tape-item .tape-at{font-weight:500;opacity:.78;margin-left:-3px}

/* ---- health strip: only appears when live data is stale. Calm words, no red, no zeros: a hiccup must never look like a crash */
.health{display:flex;align-items:center;gap:10px;padding:9px var(--gutter);background:var(--panel-2);border-bottom:1px solid var(--line);font-size:13px;color:var(--ink-2)}
.health .pip{width:8px;height:8px;border-radius:50%;background:var(--amber);animation:blink 1.4s infinite;flex:none}
.health b{color:var(--ink);font-weight:700;white-space:nowrap}
.keeper{font:500 11.5px/1 var(--mono);color:var(--muted)} .keeper[data-ok="true"]{color:var(--mint)} .keeper[data-ok="false"]{color:var(--amber)}

/* ---- the mofo ball: fomo's snowball in the mirror. White, rolling left, eyes that follow you. */
.ball{display:block;overflow:visible}
.ball .fleck{fill:var(--ember)}
/* the logo holds still: only the eyes move (they follow the pointer, and blink when a thesis lands) */
.ball .flames{animation:none} .ball .flame{opacity:.95} .ball .flame.core{opacity:.9}
.ball .crescent{fill:var(--fire-2);opacity:.55} .ball .gloss{fill:#fff;opacity:.7}
.ball .embers{opacity:.95} .ball .overlay{mix-blend-mode:normal}
.ball .eye{fill:#fff;stroke:rgba(120,60,20,.18);stroke-width:1}
.ball .pupil{fill:var(--jet);transition:transform .12s ease-out}
.ball .lids{transform-origin:center;transform-box:fill-box;transition:transform .09s ease-in}
.ball.blink .lids{transform:scaleY(.06)}
.ball .body{transform-origin:40% 50%;transform-box:fill-box}
.ball .flecks{animation:none}
/* on a light masthead the ball needs an edge */
:root[data-theme="light"] .mast .ball .body{filter:drop-shadow(0 2px 5px rgba(120,40,0,.25))}
@keyframes pop{0%{transform:scale(1)}35%{transform:scale(1.07)}100%{transform:scale(1)}}

/* ---- hero: the black room, lit from the fireball */
.hero{position:relative;background:var(--room);color:var(--snow);border-bottom:2px solid var(--line);overflow:hidden;isolation:isolate}
.hero::after{content:"";position:absolute;inset:0;background:radial-gradient(55% 60% at 80% 22%,color-mix(in srgb,var(--fire) 30%,transparent),transparent 62%),radial-gradient(45% 50% at 15% 95%,color-mix(in srgb,var(--fire-2) 14%,transparent),transparent 60%);z-index:-1;pointer-events:none}
.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 1px 1px,color-mix(in srgb,var(--fire) 16%,transparent) 1.1px,transparent 1.3px) 0 0/9px 9px;mask-image:linear-gradient(115deg,transparent 30%,#000 100%);-webkit-mask-image:linear-gradient(115deg,transparent 30%,#000 100%);z-index:-1}
.hero .wrap{max-width:1520px}
.hero-in{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:44px;padding-top:64px;padding-bottom:72px;align-items:center}
.hero h1{color:var(--snow);font-size:clamp(38px,calc(4.3 * var(--vw)),72px);white-space:nowrap}
.hero h1 .flip{display:block;background:var(--brand-sheen-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero h1 .hot{background:linear-gradient(90deg,var(--ember),var(--fire));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .lede{color:rgba(255,247,240,.82);margin:22px 0 30px;font-weight:500}
.hero .lede strong{color:#fff;font-weight:800}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px}
.wordmirror{display:flex;align-items:baseline;gap:0;font:900 clamp(15px,calc(1.5 * var(--vw)),19px)/1 var(--mono);letter-spacing:.3em;text-transform:uppercase;margin-bottom:26px;color:var(--snow)}
.wordmirror span:last-child{transform:scaleX(-1);opacity:.38;display:inline-block}
.wordmirror i{width:2px;height:1.3em;background:var(--snow);margin:0 12px;align-self:center}

/* the fomo side is wider than the burn side: a thesis row needs room, a receipt does not */
.mirror{--seam:58.300%;position:relative;display:grid;grid-template-columns:1.4fr 1fr;gap:0;min-height:430px}
.mirror-eyes{position:absolute;left:var(--seam);top:-62px;transform:translateX(-38.500%);z-index:3;width:min(250px,calc(52 * var(--vw)));pointer-events:none}
.mirror-eyes .ball{width:100%;height:auto}
/* a three-card window; the track steps one card every 3s, the middle card is in focus, top and bottom fade out */
.vstack{--card-h:146px;--gap:10px;height:calc(var(--card-h)*3 + var(--gap)*2);overflow:hidden;padding:0 8px;-webkit-mask-image:linear-gradient(transparent,#000 21%,#000 79%,transparent);mask-image:linear-gradient(transparent,#000 21%,#000 79%,transparent)}
.vtrack{display:flex;flex-direction:column;gap:var(--gap);transition:transform .76s cubic-bezier(.16,1,.3,1);will-change:transform}
.vtrack.snap,.vtrack.snap .tcard{transition:none}
.tcard{height:var(--card-h);flex:none;opacity:.34;transform:scale(.93);transition:opacity .76s cubic-bezier(.16,1,.3,1),transform .76s cubic-bezier(.16,1,.3,1),box-shadow .76s,background .76s;overflow:hidden}
.tcard[data-focus="true"]{opacity:1;transform:none}
.tcard.fresh{animation:slide .5s cubic-bezier(.2,.8,.2,1)}
@media (prefers-reduced-motion:reduce){.vtrack,.tcard{transition:none}}
@keyframes slide{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}

/* ---- hero stack, the fomoball way: one wide card per thesis, the middle one lit */
.mirror.one{display:block;min-height:0;padding-top:64px}
.mirror.one .mirror-eyes{left:auto;right:4%;top:-46px;transform:none;width:min(200px,calc(40 * var(--vw)))}
.hero-stack{--card-h:108px;--gap:12px;padding:0 10px}
.hcard{display:grid;grid-template-columns:64px minmax(0,1fr) auto;column-gap:20px;align-items:center;padding:0 28px 0 22px;border-radius:24px;background:rgba(255,255,255,.04);border:1.5px solid rgba(255,255,255,.09);color:var(--snow)}
.hcard[data-focus="true"]{background:#1e1916;border-color:color-mix(in srgb,var(--fire) 60%,transparent);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 0 0 1px color-mix(in srgb,var(--fire) 18%,transparent),0 28px 60px -26px color-mix(in srgb,var(--fire) 45%,transparent)}
.hcard .pfp{width:64px;height:64px;border-radius:50%;border:2px solid rgba(255,255,255,.4);background:#1c1626;object-fit:cover;display:block}
.hcard.first a.hburn{text-decoration:none;color:inherit}
.hcard.ghost{visibility:hidden}
.hcard .hquote{margin:0;font:700 22px/1.2 var(--sans);font-stretch:106%;letter-spacing:-.012em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hcard .hmeta{margin:8px 0 0;font:400 15px/1.2 var(--sans);color:rgba(246,242,255,.72);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hcard .hmeta .mono{font-size:14px} .hcard .hmeta b{color:var(--brand);background:var(--brand-sheen-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-weight:800}
/* the burn badge: fire, the amount, the coin */
.hburn{display:inline-flex;align-items:center;gap:10px;padding:10px 16px 10px 12px;border-radius:16px;border:1.5px solid color-mix(in srgb,var(--fire) 35%,transparent);background:color-mix(in srgb,var(--fire) 12%,transparent);font:600 14px/1 var(--sans);white-space:nowrap;color:var(--snow)}
.hburn .fire{font-size:24px;line-height:1;filter:drop-shadow(0 0 8px color-mix(in srgb,var(--fire) 55%,transparent))}
.hburn .amt{display:flex;flex-direction:column;gap:4px}
.hburn b{font:900 18px/1 var(--sans);font-stretch:112%;letter-spacing:-.02em;color:var(--brand);background:var(--brand-sheen-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hburn .what{font:600 11.5px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:rgba(246,242,255,.78)}
.hcard:not([data-focus="true"]) .hburn b{color:inherit}
/* phones: the badge drops under the post so the quote keeps its width */
@media (max-width:640px){.hero-stack{--card-h:118px;padding:0 2px}.hcard{grid-template-columns:44px minmax(0,1fr);grid-template-rows:auto auto;row-gap:7px;align-content:center;column-gap:10px;padding:0 12px;border-radius:18px}.hcard .pfp{width:44px;height:44px;grid-row:1/3;align-self:start;margin-top:2px}.hcard .hmain{grid-column:2}.hburn{grid-column:2;justify-self:start;gap:6px;padding:5px 9px 5px 7px;border-radius:10px}.hburn .fire{font-size:15px}.hburn .amt{flex-direction:row;align-items:baseline;gap:6px}.hburn b{font-size:13px}.hburn .what{font-size:9px;letter-spacing:.05em}.hcard .hquote{font-size:15.5px;line-height:1.18;white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;text-overflow:clip}.hcard .hmeta{font-size:12.5px;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mirror.one .mirror-eyes{top:-30px;width:130px}}

/* ---- sections */
.sec{padding:72px 0;border-bottom:1px solid var(--line)}
.sec.tight{padding:44px 0}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:28px;flex-wrap:wrap}
.sec-head .eyebrow{margin-bottom:14px}
.sec-head p{margin:12px 0 0;color:var(--ink-2);max-width:62ch}

/* ---- stat tiles (proportional figures, same sans) */
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--line);background:var(--panel)}
.kpi{padding:22px 22px 20px;border-right:1px solid var(--line);min-width:0}
.kpi:last-child{border-right:0}
.kpi .k{font:500 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.kpi .v{font:800 clamp(26px,calc(3.1 * var(--vw)),40px)/1.05 var(--sans);font-stretch:112%;letter-spacing:-.03em;margin:12px 0 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi .v.red{color:var(--brand);background:var(--brand-sheen-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.kpi .s{font-size:12.5px;color:var(--ink-2)}
/* $mofo hero: headline left, the four platform numbers right as a 2x2. The hero is always the dark room, so the
   quadrants carry their own dark-glass colours instead of the page's panel tokens (which go light in light mode). */
.mofo-hero{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:48px;align-items:center;padding-top:56px;padding-bottom:60px}
.mofo-hero h1{font-size:clamp(40px,calc(5.4 * var(--vw)),96px)}
.kpis.quad{grid-template-columns:repeat(2,minmax(0,1fr));background:rgba(14,11,10,.62);border-color:rgba(255,247,240,.14);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.kpis.quad .kpi{border-right:1px solid rgba(255,247,240,.12);border-bottom:1px solid rgba(255,247,240,.12);padding:24px 22px 22px}
.kpis.quad .kpi:nth-child(2n){border-right:0} .kpis.quad .kpi:nth-child(n+3){border-bottom:0}
.kpis.quad .k{color:rgba(255,247,240,.58)} .kpis.quad .v{color:var(--snow);font-size:clamp(24px,calc(2.4 * var(--vw)),36px)} .kpis.quad .v.red{color:var(--brand);background:var(--brand-sheen-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} .kpis.quad .s{color:rgba(255,247,240,.7)}
@media (max-width:900px){.mofo-hero{grid-template-columns:1fr;gap:32px;padding-top:44px;padding-bottom:48px}}

/* ---- cards with one cut corner */
.card{position:relative;background:var(--panel);border:1px solid var(--line);padding:20px}
.card.notch{clip-path:polygon(0 0,calc(100% - var(--notch)) 0,100% var(--notch),100% 100%,0 100%)}
.card.notch::after{content:"";position:absolute;top:0;right:0;width:calc(var(--notch)*1.42);height:1px;background:var(--line-2);transform-origin:top right;transform:rotate(-45deg) translate(0,0);top:var(--notch);right:0;display:none}
.card h3{margin-bottom:6px}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.card-title{font:700 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.card-sub{font-size:13px;color:var(--muted);margin:-6px 0 14px}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}

/* ---- armed pots board */
.pots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
/* before launch, a board says so across its full width (home.js soonNote) */
.pots .board-soon{grid-column:1/-1} .board-soon{margin:0}
.pot{display:flex;flex-direction:column;gap:14px;padding:18px;background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--brand);transition:background .15s,transform .15s}
.pot:hover{background:var(--panel-2);transform:translateY(-2px)}
.pot-top{display:flex;align-items:center;gap:11px;min-width:0}
.coin-ico{width:38px;height:38px;flex:none;border:1px solid var(--line-2);object-fit:cover;background:var(--panel-2)}
.coin-ico.lg{width:64px;height:64px}
.coin-name{min-width:0}
.coin-name b{display:block;font-weight:800;font-stretch:112%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.coin-name span{display:block;font:500 11.5px/1.2 var(--mono);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pot-amt{font:800 30px/1 var(--sans);font-stretch:112%;letter-spacing:-.03em}
.pot-amt small{font:500 12px/1 var(--mono);color:var(--muted);letter-spacing:0;margin-left:8px}
.pot-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:12.5px;color:var(--ink-2)}
.pot-foot a{color:var(--brand);background:var(--brand-sheen-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-weight:700}
.pot-foot a:hover{text-decoration:underline}

/* ---- coin rows */
.filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:16px}
.filters-label{font:500 10px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);width:42px}
.chip{padding:8px 12px;border:1px solid var(--line-2);background:transparent;font:600 12.5px/1 var(--sans);color:var(--ink-2);cursor:pointer}
.chip:hover{color:var(--ink);border-color:var(--ink-2)}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.search{margin-left:auto;min-width:210px;padding:9px 12px;border:1px solid var(--line-2);background:var(--panel);font:400 13px/1 var(--mono)}
.search::placeholder{color:var(--dim)}
.rows{border:1px solid var(--line);background:var(--panel)}
.row{display:grid;grid-template-columns:minmax(190px,2.1fr) 1fr 1fr 110px minmax(130px,1.25fr) 1fr 1fr;gap:14px;align-items:center;padding:13px 16px;border-bottom:1px solid var(--line);position:relative}
.row:last-child{border-bottom:0}
a.row:hover{background:var(--panel-2)}
a.row:hover::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--brand-outline)}
.row.head{font:500 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding:12px 16px;background:var(--bg)}
.row.head button{all:unset;cursor:pointer}
.row.head button:hover{color:var(--ink)}
.row .r{text-align:right}
.row .c1{display:flex;align-items:center;gap:11px;min-width:0}
.cell-main{font-weight:700} .cell-sub{font:400 11px/1.3 var(--mono);color:var(--muted)}
.meter{height:6px;background:var(--brand-dim);position:relative;overflow:hidden}
.meter i{position:absolute;inset:0 auto 0 0;background:var(--brand-outline)}
.meter.done{background:var(--line-2)} .meter.done i{background:var(--ink)}
.meter-cap{display:flex;justify-content:space-between;font:400 10.5px/1 var(--mono);color:var(--muted);margin-top:6px}
.spark-none{color:var(--dim);font-family:var(--mono);font-size:11px}

/* ---- the wall: explore as a grid of logo boxes (the table is one click away) */
.view{display:inline-flex;border:1px solid var(--line-2);margin-left:8px}
.view button{display:inline-flex;align-items:center;gap:7px;padding:8px 12px;border:0;background:transparent;font:600 12.5px/1 var(--sans);color:var(--ink-2);cursor:pointer}
.view button svg{width:13px;height:13px;fill:currentColor}
.view button:hover{color:var(--ink)}
.view button[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:22px 18px}
.gcard{display:block;min-width:0;color:inherit;transition:transform .18s cubic-bezier(.2,.8,.2,1)}
.gcard:hover{transform:translateY(-3px)}
/* a coin that just moved to the top: it drops into place and flashes once */
.gcard.moved{animation:arrive .5s cubic-bezier(.2,.8,.2,1)} .gcard.moved .gtile{animation:movedTile 1.1s ease-out}
.row.moved{animation:movedRow 1.1s ease-out}
@keyframes arrive{0%{opacity:0;transform:translateY(-18px) scale(.97)}100%{opacity:1;transform:none}}
@keyframes movedTile{0%{box-shadow:0 0 0 3px var(--brand),0 0 30px color-mix(in srgb,var(--brand) 80%,transparent)}100%{box-shadow:0 0 0 0 transparent,0 0 0 transparent}}
@keyframes movedRow{0%{background:color-mix(in srgb,var(--brand) 20%,transparent)}100%{background:transparent}}
@media (prefers-reduced-motion:reduce){.gcard.moved,.gcard.moved .gtile,.row.moved{animation:none}}
/* a coin that has just launched lands at the front with pump.fun's pulse (their timing and curve, measured 2026-09-18),
   in our fire instead of their green: a ring blooms out of the logo box while it pops 1.8%, plus one bright flash so the
   newcomer reads at a glance. Market caps flash for 0.6s whenever they change, as theirs do. */
@keyframes coinLandRing{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--brand) 90%,transparent),0 0 0 0 color-mix(in srgb,var(--brand) 60%,transparent),0 0 0 0 color-mix(in srgb,var(--brand) 40%,transparent)}35%{box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 75%,transparent),0 0 18px 4px color-mix(in srgb,var(--brand) 50%,transparent),0 0 36px 8px color-mix(in srgb,var(--brand) 28%,transparent)}100%{box-shadow:0 0 0 10px transparent,0 0 32px 16px transparent,0 0 56px 24px transparent}}
@keyframes coinLandPop{0%{transform:scale(.95);filter:brightness(1.75)}35%{transform:scale(1.018);filter:brightness(1.12)}100%{transform:scale(1);filter:none}}
.gcard.arrive .gtile{animation:coinLandRing .82s cubic-bezier(.22,.61,.36,1) forwards,coinLandPop .82s cubic-bezier(.22,.61,.36,1)}
@keyframes mcFlash{0%{background:color-mix(in srgb,var(--ink) 18%,transparent)}100%{background:transparent}}
.gmc b.mc-flash{animation:mcFlash .6s ease-out forwards;border-radius:3px}
/* the live site: the coin's own price move, in its direction (explore.js liveMove), the colour fading back like the rail's */
@keyframes mcFlashUp{0%{color:var(--up)}}@keyframes mcFlashDown{0%{color:var(--down)}}
.gmc b.mc-flash.mc-up{animation-name:mcFlashUp}.gmc b.mc-flash.mc-down{animation-name:mcFlashDown}
@keyframes rowLand{0%{background:color-mix(in srgb,var(--brand) 34%,transparent)}100%{background:transparent}}
.row.arrive{animation:rowLand 1.15s ease-out}
/* the coin you just launched: a glowing outline for a few seconds, on top of the landing flash */
.gcard.mine{position:relative}
.gcard.mine::after{content:"";position:absolute;inset:-7px;padding:3px;background:var(--brand-outline);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;box-shadow:0 0 26px color-mix(in srgb,var(--brand) 55%,transparent);pointer-events:none;animation:mineGlow 4s ease-out forwards;animation-delay:var(--mine-delay,0ms)}
.row.mine{box-shadow:inset 3px 0 0 var(--brand);background:color-mix(in srgb,var(--brand) 9%,transparent)}
@keyframes mineGlow{0%,70%{opacity:1}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.gcard.arrive .gtile{animation:coinLandRing .6s ease-out forwards}.gmc b.mc-flash{animation:none}}
.gtile{position:relative;aspect-ratio:1/1;overflow:hidden;background:var(--panel-2);border:1.5px solid var(--line);box-shadow:0 1px 0 rgba(255,255,255,.04) inset;transition:border-color .18s,box-shadow .18s}
.gcard:hover .gtile{border-color:var(--brand);box-shadow:0 18px 40px -20px color-mix(in srgb,var(--brand) 55%,transparent),0 0 0 3px color-mix(in srgb,var(--brand) 22%,transparent)}
.gtile>img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.gcard:hover .gtile>img{transform:scale(1.045)}
.gbadge{position:absolute;left:10px;top:10px;padding:5px 8px;border-radius:8px;background:rgba(14,11,20,.72);color:#fff;font:700 10px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;backdrop-filter:blur(6px)}
.gbadge.grad{color:#8ff5c0} .gbadge.queued{background:var(--brand-sheen-sm);color:var(--brand-ink)}
.gchg{position:absolute;right:10px;top:10px;padding:5px 7px;border-radius:8px;background:rgba(14,11,20,.72);color:#fff;font:700 11px/1 var(--mono);backdrop-filter:blur(6px)}
.gchg.up{color:#8ff5c0} .gchg.down{color:#ffb3b3}
.gbody{padding:12px 4px 0}
.gname{display:flex;align-items:baseline;gap:8px;min-width:0}
.gname b{font:800 16px/1.2 var(--sans);font-stretch:112%;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.gsym{font:500 12px/1 var(--mono);color:var(--muted);flex:none}
/* a ticker another coin also uses: the address tells them apart */
.gaddr{margin:4px 0 0;font:500 11px/1.2 var(--mono);color:var(--amber);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* WalletConnect inside the wallet picker: the QR code on white (phones scan dark on light), app links on a phone */
.wm-wc{display:flex;flex-direction:column;gap:12px;margin-top:6px}
.wm-qr{display:flex;flex-direction:column;align-items:center;gap:10px}
.wm-code{width:min(260px,100%);aspect-ratio:1;background:#fff;padding:10px;border-radius:10px}
.wm-code svg{display:block;width:100%;height:100%}
.wm-qr .wm-opt{width:100%}
.wm-copy,.wm-back{background:none;border:0;padding:4px;font:600 12px/1.3 var(--sans);color:var(--muted);text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.wm-copy:hover,.wm-back:hover{color:var(--ink)}
.wm-back{align-self:flex-start}
/* the opening-fee hold above the trade button (a new pool's first seconds) */
.opening-fee{margin:0 0 12px;padding:10px 12px;border:1px solid var(--amber);color:var(--amber);font:600 12.5px/1.45 var(--sans)}
/* upkeep jobs the bot fell behind on: a line of explanation and one button each */
.upkeep{border-left:3px solid var(--amber)}
.upkeep .uj{display:flex;gap:14px;align-items:center;justify-content:space-between;padding:12px 0;border-top:1px dashed var(--line)}
.upkeep .uj-text{display:flex;flex-direction:column;gap:4px;min-width:0}
.upkeep .uj-text b{font:700 14px/1.3 var(--sans)}
.upkeep .uj-text span{font:500 12px/1.45 var(--sans);color:var(--muted)}
.upkeep .uj .btn{flex:none}
.upkeep .card-sub{margin:10px 0 0}
@media (max-width:640px){.upkeep .uj{flex-direction:column;align-items:stretch}}
/* a coin the hide-list took off the listings: only the explanation shows until the visitor chooses to see it */
#coinPage.withheld > :not(.hidden-note){display:none!important}
.hidden-note{max-width:640px}
.twin-note{margin:10px 0 0;font:500 12px/1.45 var(--mono);color:var(--amber);overflow-wrap:anywhere}
.gmc{display:flex;align-items:baseline;gap:6px;margin-top:8px;white-space:nowrap;overflow:hidden}
.gmc b{font:900 20px/1 var(--sans);font-stretch:112%;letter-spacing:-.02em}
.gmc span{font:500 10.5px/1 var(--mono);letter-spacing:.1em;color:var(--muted)}
.gmc i{font-style:normal;margin-left:auto;font:500 11px/1 var(--mono);color:var(--brand-text-solid);overflow:hidden;text-overflow:ellipsis}
.gpairs{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px} .gpairs span{display:inline-flex;align-items:center;gap:4px;font:600 9.5px/1 var(--mono);letter-spacing:.06em;color:var(--muted);padding:3px 5px 3px 3px;border:1px solid var(--line)} .gpairs img{width:13px;height:13px;border-radius:50%;display:block} .gpairs span.more{padding:3px 6px;color:var(--ink-2);border-style:dashed} .gpairs span.main{position:relative;color:var(--brand-text-solid);border-color:transparent}.gpairs span.main::before{content:'';position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:var(--brand-outline);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.gnote{margin:6px 0 0;font:500 11px/1.3 var(--mono);letter-spacing:.02em;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gthesis{margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}   /* fomo starts here: a thesis or nothing */
.gthesis .gwho{margin-top:0}
.gwho{display:flex;align-items:center;gap:6px;margin-top:9px;font-size:12.5px;color:var(--ink-2);min-width:0}
.gwho img{width:18px;height:18px;border-radius:50%;flex:none}
.gwho .mono{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* the rest of a name (fable-rich.js who; owner, 30 Sep evening): the seal, the X logo, the @handle after a chosen name */
.gwho .g-seal{width:12px;height:12px;margin-left:-3px}.gwho .g-x{--fx-size:9.5px;margin-left:-4px}.gwho .g-at{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:400 11.5px/1 var(--mono);color:var(--muted)}
.hcard .hmeta .h-seal{width:13px;height:13px;margin:0 2px 0 4px}.hcard .hmeta .h-x{--fx-size:10px;vertical-align:-1px}.hcard .hmeta .h-at{margin-left:4px;font:400 13px var(--mono);color:rgba(246,242,255,.55)}
.gago{margin-left:auto;flex:none;color:var(--muted);font:500 11.5px/1 var(--mono)}
.gctx{margin:8px 0 0;font-size:12.5px;line-height:1.35;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@media (max-width:640px){.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 12px}.gbody{padding-top:9px}.gname b{font-size:14.5px}.gmc b{font-size:17px}.gmc i{display:none}.gctx{display:none}.view{margin-left:0}}

/* ---- coin page */
.coin-top{display:flex;gap:18px;align-items:center;padding:30px 0 22px;flex-wrap:wrap}
.coin-top h1{font-size:clamp(30px,calc(4.6 * var(--vw)),58px)}
.coin-meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:10px}
/* 'Launched by' (deploy 2b): the launcher as the people layer names them, then the explorer link */
.launched-by{display:inline-flex;align-items:center;gap:5px}.launched-by-who{display:inline-flex;align-items:center;gap:5px;padding:0;border:0;background:none;color:inherit;font:inherit;cursor:default}button.launched-by-who{cursor:pointer}button.launched-by-who:hover{text-decoration:underline;text-underline-offset:3px}
.launched-by-pic{width:16px;height:16px;border-radius:50%;object-fit:cover;flex:none}.launched-by-ex{color:inherit;text-decoration:none;opacity:.8}.launched-by-ex:hover{opacity:1}
.copy{display:inline-flex;align-items:center;gap:7px;padding:4px 8px;border:1px dashed var(--line-2);background:transparent;font:400 11.5px/1 var(--mono);color:var(--ink-2);cursor:pointer}
.copy:hover{border-color:var(--ink);color:var(--ink)}
/* the creator's links are marks, not words: no box, no label, just the platform's own icon */
.social-link{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;padding:0;border:0;color:var(--ink-2);transition:color .15s,transform .15s}
.social-link:hover{color:var(--brand);background:var(--brand-sheen-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;transform:translateY(-1px)}
.social-link svg{width:16px;height:16px;display:block}
.social-link.dex{width:30px;height:30px} .social-link.dex img{width:22px;height:22px;display:block;border-radius:5px}
.quick{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border:1px solid var(--line);background:var(--panel);margin-bottom:20px}
.quick>div{padding:14px 16px;border-right:1px solid var(--line);min-width:0}
.quick>div:last-child{border-right:0}
.quick .k{font:500 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.quick .v{font:800 21px/1.1 var(--sans);font-stretch:110%;letter-spacing:-.02em;margin-top:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.quick .v.red{color:var(--brand);background:var(--brand-sheen-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
/* the creator's own claim strip, under the coin's numbers. Only ever rendered for the coin's creator (coin.js). */
.creator-bar{margin:-6px 0 20px;padding:14px 18px;background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--amber)}
/* the creator's own door to their fees, at the end of the coin's header links: amber like everything creator-fee, and only
   ever shown to the fee recipient, the launcher, or a wallet the role was offered to */
.cf-btn{display:inline-flex;align-items:center;margin-left:6px;padding:9px 16px;border:2px solid var(--amber);background:var(--amber);color:var(--bg);
  font:900 13.5px/1 var(--sans);font-stretch:112%;letter-spacing:-.005em;cursor:pointer;box-shadow:4px 4px 0 var(--brand-deep);transition:transform .12s,box-shadow .12s}
.cf-btn:hover{transform:translate(-1px,-1px);box-shadow:6px 6px 0 var(--brand-deep)}
.cf-btn:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--brand-deep)}
/* greyed out for every wallet that isn't the fee recipient or the launcher (pressing it only explains why) */
.cf-btn.off{background:var(--panel-2);border-color:var(--line-2);color:var(--muted);box-shadow:none;cursor:not-allowed}
.cf-btn.off:hover,.cf-btn.off:active{transform:none;box-shadow:none}
/* the dialog it opens: the same centred card over a blurred page as the wallet picker, wide enough for the claim rows */
.wm-card.cf-card{width:min(680px,100%);max-height:calc(100vh - 40px);overflow-y:auto;padding:30px 26px 24px}
.cf-card .creator-bar{margin:0;padding:0;border:0;background:none}
.cf-card .creator-bar>.card-head{padding-right:38px}
.creator-bar .cb-body{display:flex;align-items:center;justify-content:space-between;gap:14px 20px;flex-wrap:wrap}
.creator-bar .cb-pending{font:600 12px/1.4 var(--sans);color:var(--amber)}
.creator-bar .cb-link{background:none;border:0;padding:0;font:600 11px/1.3 var(--sans);color:var(--muted);text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.creator-bar .cb-link:hover{color:var(--ink)}
.creator-bar .cb-link:disabled{opacity:.5;cursor:default}
.creator-bar .cb-hand{margin-top:14px;padding-top:14px;border-top:1px dashed var(--line)}
.creator-bar .cb-hand-note{margin:0 0 10px;font:500 12px/1.5 var(--sans);color:var(--muted);max-width:86ch}
.creator-bar .cb-hand-row{display:flex;gap:8px;flex-wrap:wrap;align-items:stretch}
.creator-bar .cb-hand-row input{flex:1 1 320px;min-width:0;padding:10px 12px;background:var(--bg);border:1px solid var(--line-2);color:var(--ink);font:500 13px/1.2 var(--mono)}
.creator-bar .cb-hand-row input:focus{outline:2px solid var(--brand);outline-offset:1px}
/* the controller's tools in the creator-fee dialog: change the recipient (one signature), and hand over control (advanced) */
.creator-bar .cb-control{margin-top:14px;padding-top:14px;border-top:1px dashed var(--line);display:flex;flex-direction:column;gap:14px}
.creator-bar .cb-form .hint{margin:8px 0 0}
.creator-bar .cb-adv summary{cursor:pointer;font:600 12px/1.3 var(--sans);color:var(--muted);text-decoration:underline;text-underline-offset:2px}
.creator-bar .cb-adv[open] summary{margin-bottom:10px}
.creator-bar .cb-adv .cb-hand-row{align-items:center}
.creator-bar .cb-you{margin-left:8px;font-size:9.5px;padding:2px 6px;vertical-align:middle}
.creator-bar .cb-main{display:flex;align-items:center;gap:14px;min-width:0}
.creator-bar .cb-text{display:flex;flex-direction:column;gap:4px;min-width:0}
.creator-bar .cb-text b{font:800 18px/1.15 var(--sans);font-stretch:110%;letter-spacing:-.01em}
.creator-bar .cb-sub{font:500 12px/1.4 var(--mono);color:var(--ink-2);overflow-wrap:anywhere}
.creator-bar .cb-side{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.creator-bar .cb-note{font:500 11px/1.3 var(--sans);color:var(--muted)}
@media (max-width:640px){.creator-bar .cb-main{flex-direction:column;align-items:flex-start;gap:8px}.creator-bar .cb-side{align-items:stretch;width:100%}.creator-bar .cb-side .btn{width:100%}}
/* ---- the vault's box: the public fire button with the armed pot under it. It floats at the top right of a coin page on
   every tab and comes down the page with you; the coin page keeps the room it needs clear (#coinPage below). */
.firebtn{position:fixed;right:22px;top:120px;z-index:35;width:296px;max-height:calc(var(--vh) * 100 - 140px);overflow-y:auto;scrollbar-width:thin;
  padding:14px;background:var(--panel);border:1px solid var(--line-2);box-shadow:0 26px 60px -30px rgba(0,0,0,.9);animation:fireIn .45s cubic-bezier(.2,.8,.2,1)}
.firebtn .fb{display:flex;align-items:center;gap:12px;width:100%;padding:14px 16px;border:2px solid var(--brand-deep);background:var(--brand-sheen-sm);color:var(--brand-ink);cursor:pointer;text-align:left;
  box-shadow:var(--brand-bevel,0 0 transparent),5px 5px 0 var(--brand-deep),0 22px 44px -18px color-mix(in srgb,var(--brand) 75%,transparent);transition:transform .12s,box-shadow .12s,background .15s,border-color .15s,opacity .15s}
.firebtn .fb:hover:not(:disabled){transform:translate(-2px,-2px);box-shadow:var(--brand-bevel,0 0 transparent),7px 7px 0 var(--brand-deep),0 26px 52px -18px color-mix(in srgb,var(--brand) 90%,transparent)}
.firebtn .fb:not(.mesh):hover:not(:disabled){background:var(--brand-sheen-sm-hover)}
.firebtn .fb:active:not(:disabled){transform:translate(3px,3px);box-shadow:2px 2px 0 var(--brand-deep)}
.firebtn .fb:disabled{cursor:not-allowed;background:var(--panel);border-color:var(--line-2);color:var(--ink-2);box-shadow:5px 5px 0 var(--line),0 18px 34px -22px rgba(0,0,0,.8)}
.fire-ic{font-size:26px;line-height:1;flex:none;filter:drop-shadow(0 0 10px color-mix(in srgb,var(--ember) 70%,transparent))}
.firebtn .fb:disabled .fire-ic{filter:grayscale(1) opacity(.5)}
/* a press that can't act right now keeps its colour (owner, 24 Sep); pressing it says why */
.firebtn .fb[aria-disabled="true"]{cursor:help}
.fire-label{display:block;min-width:0}
.fire-label b{display:block;font:900 19px/1.15 var(--sans);font-stretch:112%;letter-spacing:-.01em}
.firebtn .fb{justify-content:center}
.fire-label i{display:block;font:600 11.5px/1.3 var(--sans);font-style:normal;margin-top:3px}
.fire-foot{margin-top:7px;font:500 10.5px/1.35 var(--mono);color:var(--muted);letter-spacing:.02em}
.firebtn[data-state="ready"] #fireFoot,.firebtn[data-state="bounty"] #fireFoot{color:var(--brand-text-solid)}
/* the button only exists while the backup burn is open ('bounty'). (owner, 1 Oct: "only if it is then it appears in the
   box and glowing in the metallic copper colour") It wears the Buy press's metal (fable.css WIDE PRESS: --brand-sheen-btn,
   --brand-ink, --brand-ink-shadow, --brand-bevel) with a soft copper and white glow that breathes, and fades in the
   moment it opens (coin.js renderFire sets .fb-ready). Reduced motion: no fade, no breathing, the glow held still. */
#fireBtn.fb-ready{border:0;background:var(--brand-sheen-btn);color:var(--brand-ink);text-shadow:var(--brand-ink-shadow);
  box-shadow:var(--brand-bevel),0 0 0 1px rgba(255,236,204,.5),0 0 14px rgba(255,236,204,.34),0 0 30px -4px color-mix(in srgb,var(--brand) 60%,transparent);animation:fireGlow 2.6s ease-in-out infinite}
#fireBtn.fb-ready:hover:not(:disabled){background:var(--brand-sheen-btn-hover);transform:translateY(-1px);animation:none;
  box-shadow:var(--brand-bevel),0 0 0 1px rgba(255,255,255,.8),0 0 20px rgba(255,255,255,.55),0 0 40px -2px color-mix(in srgb,var(--brand) 80%,transparent)}
#fireBtn.fb-ready:active:not(:disabled){background:var(--brand-sheen-btn);transform:translateY(1px);animation:none;
  box-shadow:inset 0 2px 7px color-mix(in srgb,var(--brand-deep) 70%,transparent),0 0 0 1px rgba(255,236,204,.6),0 0 10px rgba(255,236,204,.3)}
#fireBtn.fb-ready:focus-visible{outline:2px solid var(--brand-ink);outline-offset:3px}
#fireBtn.fb-ready .fire-ic{filter:drop-shadow(0 0 8px rgba(255,236,204,.55))}
@keyframes fireGlow{0%,100%{box-shadow:var(--brand-bevel),0 0 0 1px rgba(255,236,204,.45),0 0 12px rgba(255,236,204,.26),0 0 26px -6px color-mix(in srgb,var(--brand) 50%,transparent)}
  50%{box-shadow:var(--brand-bevel),0 0 0 1px rgba(255,255,255,.85),0 0 22px rgba(255,255,255,.5),0 0 46px -2px color-mix(in srgb,var(--brand) 85%,transparent)}}
.firebtn .fire-row:has(#fireBtn.fb-ready){animation:fireRowIn .45s cubic-bezier(.2,.8,.2,1) both}
@keyframes fireRowIn{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:none}}
@keyframes firePulse{0%,100%{box-shadow:var(--brand-bevel,0 0 transparent),5px 5px 0 var(--brand-deep),0 22px 44px -18px color-mix(in srgb,var(--brand) 75%,transparent)}50%{box-shadow:var(--brand-bevel,0 0 transparent),5px 5px 0 var(--brand-deep),0 22px 54px -14px var(--brand)}}
@keyframes fireIn{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.firebtn,.firebtn .fire-row:has(#fireBtn.fb-ready),.firebtn[data-mesh="ready"] #meshBtn{animation:none}
  #fireBtn.fb-ready{animation:none;box-shadow:var(--brand-bevel),0 0 0 1px rgba(255,236,204,.6),0 0 18px rgba(255,236,204,.4),0 0 36px -4px color-mix(in srgb,var(--brand) 70%,transparent)}
  #fireBtn.fb-ready:hover:not(:disabled),#fireBtn.fb-ready:active:not(:disabled){transform:none}}
/* two engines side by side (owner, 23 Sep): buy & burn (orange) and LP mesh (green), half the width each, icon over label */
.fire-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:start}
/* the two presses side by side, each filling half the box, a line down the middle (owner, 24 Sep). Scoped to the box: the
   trade page's later .fire-row rule (flex, wrap) had been stacking them in the narrow box */
.firebtn .fire-row{display:grid;grid-template-columns:1fr 1fr;gap:0;padding:0;border:0;align-items:stretch}
.firebtn .fire-col{min-width:0;padding:0 12px 0 0}
.firebtn .fire-col + .fire-col{padding:0 0 0 12px;border-left:1px solid var(--line-2)}
.firebtn .fire-row .fb{width:100%}
.fire-col{min-width:0}
.fire-row .fb{flex-direction:column;gap:6px;padding:12px 6px 11px;text-align:center}
.fire-row .fire-ic{font-size:22px}
.fire-row .fire-label b{font-size:15px;white-space:nowrap}
.fire-row .fire-foot{font-size:10px}
.firebtn .fb.mesh{border-color:var(--mesh);background:var(--mesh);color:var(--jet);box-shadow:5px 5px 0 color-mix(in srgb,var(--mesh) 45%,#000),0 22px 44px -18px color-mix(in srgb,var(--mesh) 70%,transparent)}
.firebtn .fb.mesh:hover:not(:disabled){box-shadow:7px 7px 0 color-mix(in srgb,var(--mesh) 45%,#000),0 26px 52px -18px color-mix(in srgb,var(--mesh) 85%,transparent)}
.firebtn .fb.mesh:active:not(:disabled){box-shadow:2px 2px 0 color-mix(in srgb,var(--mesh) 45%,#000)}
.firebtn .fb.mesh .fire-ic{filter:drop-shadow(0 0 10px color-mix(in srgb,var(--mesh) 70%,transparent))}
:root[data-theme="light"] .firebtn .fb.mesh:not(:disabled){color:#fff}
.firebtn .fb.mesh:disabled{background:var(--panel);border-color:var(--line-2);color:var(--ink-2);box-shadow:5px 5px 0 var(--line),0 18px 34px -22px rgba(0,0,0,.8)}
.firebtn[data-mesh="ready"] #meshFoot{color:var(--mesh)}
/* the press captions (owner, 24 Sep): the amount big and bright in the press's colour, its share bold and white, the words
   around them small. Tabular figures, so the numbers tick without the line jumping */
.fire-foot .ff-cap{display:block;color:var(--muted)}
.fire-foot .ff-num{display:block;margin:4px 0 2px;font:800 23px/1.05 var(--sans);letter-spacing:-.01em;color:var(--brand);background:var(--brand-sheen-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-variant-numeric:tabular-nums}
#meshFoot .ff-num{color:var(--mesh)}
.fire-foot .ff-sub{display:block;color:var(--ink-2)}
.fire-foot .ff-sub b{font:800 15px/1.2 var(--sans);color:var(--ink);font-variant-numeric:tabular-nums}
/* an arbitrage's pools on the tape: ▼ where the coin was sold, ▲ where it was bought back (owner, 25 Sep) */
.lt-row .lt-dn{color:var(--down)} .lt-row .lt-up{color:var(--up)}
.lt-row .lt-pool-ic{width:13px;height:13px;border-radius:50%;object-fit:cover;vertical-align:-2px;margin:0 3px 0 2px}
.lt-row.arb .lt-what{flex-wrap:wrap;row-gap:1px;padding:2px 0}
.lt-row.arb .lt-what > span:first-child{flex:0 1 auto;min-width:0}
.lt-row.arb .lt-pools{flex:0 1 auto;min-width:0;max-width:100%;font:600 11px/1.2 var(--mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* the press's two slices, one to a line, each with its own dollars (owner, 25 Sep) */
.fire-foot .ff-line{display:block}
.fire-foot .ff-line + .ff-line{margin-top:3px}
.firebtn[data-mesh="ready"] #meshBtn{animation:meshPulse 2.4s ease-in-out infinite}
@keyframes meshPulse{0%,100%{box-shadow:5px 5px 0 color-mix(in srgb,var(--mesh) 45%,#000),0 22px 44px -18px color-mix(in srgb,var(--mesh) 60%,transparent)}50%{box-shadow:5px 5px 0 color-mix(in srgb,var(--mesh) 45%,#000),0 22px 54px -14px var(--mesh)}}
/* the list switch: burn vault | holders' DAO */
.pot-tabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-top:14px;padding:3px;border:1px solid var(--line);border-radius:999px}
.pot-tabs button{padding:7px 6px;border:0;border-radius:999px;background:transparent;color:var(--ink-2);font:600 12px/1 var(--sans);cursor:pointer}
.pot-tabs button:hover{color:var(--ink)}
.pot-tabs button[aria-selected="true"]{background:var(--panel-2);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-2)}
.pot-tabs + .firepot{margin-top:12px;padding-top:0;border-top:0}
/* Firepower (owner's pick B, 7 Oct: "one bar, whole vault"): the total and its ⓘ, ONE bronze bar split into a slice per
   coin by its dollars, then a two-column list of the coins, biggest first, each with a small bar of its share in the
   chocolate metal (owner: "the chocolate metallic shiny colour": --brand-sheen-sm with its bevel, the Buy button's metal
   for small fills). The bar's metal runs once across the whole bar: each slice is sized and moved to show its own stretch
   of it (coin.js FableFirepower.slice), and wears its coin's logo only while the slice is wide enough for it (.fpow-logo,
   FableFirepower.logoFits). One popover tells a coin's numbers (what the vault holds, what waits in its pool) on tap or hover, and the
   other coins dim while it is open. When a buy and burn spends an asset, its value counts down and its row and slice flash. */
.firepot{position:relative;margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.firepot-head{display:flex;justify-content:space-between;align-items:center;gap:8px}
.firepot .pot-total{display:flex;align-items:center;gap:8px;margin:8px 0 14px}
.firepot .pot-amt{margin:0;transition:color .3s}
.firepot .pot-amt.fpow-tap{cursor:pointer}
.firepot .pot-amt.spent{color:var(--brand);background:var(--brand-sheen-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.fpow-i{display:inline-grid;place-items:center;flex:none;width:24px;height:24px;margin:0;padding:0;border:0;border-radius:50%;background:none;color:var(--muted);cursor:pointer;box-shadow:none;transform:none}
.fpow-i[hidden]{display:none}
.fpow-i svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round}
.fpow-i:hover,.fpow-i.is-on{color:var(--brand-hi);background:color-mix(in srgb,var(--brand) 16%,transparent)}
.fpow-i:focus-visible{outline:2px solid var(--brand);outline-offset:1px}
.fpow-bar{display:flex;gap:2px;height:30px}
.fpow-seg{position:relative;display:grid;place-items:center;flex:1 1 0;min-width:3px;height:100%;background-image:var(--brand-outline);background-repeat:no-repeat;box-shadow:inset 0 1px 0 rgba(255,240,214,.35),inset 0 -6px 10px -6px rgba(67,35,15,.9);cursor:pointer;transition:filter .3s}
.fpow-seg[hidden]{display:none}
.fpow-seg-ic{display:none;width:18px;height:18px;border-radius:50%;object-fit:cover;background:var(--bg);box-shadow:0 0 0 1.5px #1c1209;pointer-events:none}
.fpow-seg.fpow-logo .fpow-seg-ic{display:block}
.fpow-seg:hover{filter:brightness(1.12)}
.fpow-seg.on{z-index:1;outline:2px solid var(--brand-ink);outline-offset:1px}
.firepot-list[data-pick] .fpow-seg:not(.on){filter:brightness(.42) saturate(.6)}
.fpow-seg.spent,.firepot-list[data-pick] .fpow-seg.spent{filter:brightness(1.35)}
.fpow-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 12px;margin-top:12px}
/* a narrow rail (a mid-size window, a phone): one column, so no ticker is cut (owner, 7 Oct: FABLE showed as "FA…") */
.firepot-list{container-type:inline-size}
@container (max-width:400px){.fpow-list{grid-template-columns:minmax(0,1fr)}}
.fpow-li{position:relative;display:flex;flex-direction:column;align-items:stretch;gap:7px;min-width:0;margin:0 -6px;padding:5px 6px 6px;border:0;border-radius:0;background:none;color:var(--ink);text-align:left;cursor:pointer;box-shadow:none;transform:none;transition:background .4s,opacity .25s}
.fpow-li:hover,.fpow-li.on{background:color-mix(in srgb,var(--brand) 9%,transparent)}
.fpow-li:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
.firepot-list[data-pick] .fpow-li:not(.on){opacity:.38}
.fpow-li-head{display:flex;align-items:center;gap:5px;min-width:0}
.fpow-li-ic{width:18px;height:18px;flex:none;margin-right:2px;border-radius:50%;object-fit:cover;background:var(--bg)}
.fpow-li-n{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:700 13.5px/1.2 var(--sans)}
.fpow-li-v{flex:none;margin-left:auto;padding-left:2px;font:600 13px/1 var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap;transition:color .3s}
.fpow-li-track{display:block;height:6px;background:var(--bg);box-shadow:inset 0 0 0 1px var(--line)}
.fpow-li-fill{display:block;height:100%;background:var(--brand-sheen-sm);box-shadow:var(--brand-bevel)}
.fpow-li.spent{background:color-mix(in srgb,var(--brand) 12%,transparent)}
.fpow-li.spent .fpow-li-v{color:var(--brand);background:var(--brand-sheen-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
/* what a burn just spent: over the right end of the row's small bar, never over the dollar value */
.bl-delta{position:absolute;right:6px;bottom:2px;padding:0 3px;background:var(--panel-2);font:600 11px/1 var(--mono);color:var(--brand-text-solid);font-style:normal;pointer-events:none;animation:deltaUp 2.4s ease-out forwards}
@keyframes deltaUp{0%{opacity:0;transform:translateY(4px)}15%{opacity:1;transform:none}75%{opacity:1}100%{opacity:0;transform:translateY(-3px)}}
.firepot-kv{margin-top:12px}
.firepot-kv .kv{font-size:12px;padding:6px 0}
.firepot .firepot-kv{margin-top:14px;border-top:1px solid var(--line)}
.firepot .firepot-kv .kv{align-items:center;padding:9px 0}
.firepot .firepot-kv .kv:last-child{padding-bottom:0}
.firepot .firepot-kv .kv b{font-size:15px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.firepot .firepot-kv .kv.fpow-why{cursor:help}
.firepot .firepot-kv .kv.fpow-why:hover span,.firepot .firepot-kv .kv.is-on span{color:var(--ink-2)}
.firepot .firepot-kv .kv.fpow-why:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
/* the popover: under the coin, slice, ⓘ or line it tells about (over a foot line), kept inside the panel by coin.js */
.fpow-pop{position:absolute;z-index:6;left:0;top:0;width:max-content;min-width:172px;max-width:300px;padding:9px 11px;border:1px solid var(--line-2);background:color-mix(in srgb,var(--brand) 5%,var(--panel-2));box-shadow:0 18px 34px -12px #000e;font:500 12.5px/1.35 var(--mono);color:var(--ink-2);pointer-events:none}
.fpow-pop[hidden]{display:none}
.fpow-pop::before{content:"";position:absolute;top:-5.5px;left:calc(var(--fpow-arrow,24px) - 5px);width:9px;height:9px;background:inherit;border:1px solid var(--line-2);border-right:0;border-bottom:0;transform:rotate(45deg)}
.fpow-pop.up::before{top:auto;bottom:-5.5px;transform:rotate(225deg)}
.fpow-pop-h{display:flex;align-items:center;gap:7px;padding-bottom:7px;margin-bottom:4px;border-bottom:1px solid var(--line-2);font:700 13.5px/1.2 var(--sans);color:var(--ink)}
.fpow-pop-h img{width:18px;height:18px;flex:none;border-radius:50%;object-fit:cover;background:var(--bg)}
.fpow-pop-h span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fpow-pop-h b{margin-left:auto;padding-left:12px;font:600 13px/1 var(--mono);white-space:nowrap}
.fpow-pop-r{display:flex;justify-content:space-between;gap:18px;padding:3px 0}
.fpow-pop-r span{color:var(--muted)} .fpow-pop-r b{color:var(--ink);font-weight:600;white-space:nowrap}
.fpow-pop-t{margin:0;font:500 12.5px/1.45 var(--sans);color:var(--ink-2)}
/* the last buy and burn, one line at the top of the console (owner, 29 Sep; it replaced the button that sat greyed most
   of the day and the 15-second receipt): the console's hairline and mono type, the amount in bronze, the name cut short
   before the line ever wraps. It opens its receipt right under it, inside the same hairline box (the pot moves down).
   A new burn washes it green then orange once, the chart's candle-hop colours, in about 600 ms. */
.fire-last{container:burnline / inline-size;border:1px solid var(--line);background:color-mix(in srgb,var(--brand) 4%,transparent)}
.fire-last + .fire-row{margin-top:12px}
.fire-line{position:relative;display:flex;align-items:center;gap:6px;width:100%;min-height:32px;margin:0;padding:6px 10px;border:0;background:transparent;color:var(--ink-2);font:500 12.5px/1.2 var(--mono);text-align:left;white-space:nowrap;overflow:hidden;cursor:pointer;transition:background .15s}
/* the row is the line's look; its button (#fireLine) holds the burn and its age and stretches over the whole row (::before),
   so a click anywhere on it, the chevron included, opens the receipt. The burner's picture and name sit above that
   (.fl-who-a, owner 1 Oct): a link to their X account, or their fables, never the receipt */
.fire-line .fl-open{display:flex;align-items:center;gap:6px;flex:none;min-width:0;margin:0;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:left;white-space:nowrap;overflow:hidden;cursor:inherit}
.fire-line .fl-open::before{content:"";position:absolute;inset:0}
.fire-line .fl-open:focus-visible{outline:none}
.fire-line:has(.fl-open:not(:disabled)):hover{background:color-mix(in srgb,var(--brand) 8%,transparent)}
.fire-line:has(.fl-open:focus-visible){outline:2px solid var(--brand);outline-offset:-2px}
.fire-line:has(.fl-open:disabled){cursor:default;color:var(--muted)}
/* the burn and its age keep their width (a compact amount is short; WebKit cut it a fraction early inside the button and
   drew "852K FAB…"); the burner's name is what gives way when the rail is narrow */
.fire-line .fl-open .fl-amt{flex:none}
.fire-line .fl-ic{flex:none;font-size:13px;line-height:1;filter:drop-shadow(0 0 6px color-mix(in srgb,var(--ember) 55%,transparent))}
.fire-line .fl-amt{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;color:var(--brand);background:var(--brand-sheen-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-weight:700;font-variant-numeric:tabular-nums}
.fire-line .fl-verb,.fire-line .fl-age{flex:none;color:var(--muted);font-variant-numeric:tabular-nums}
.fire-line .fl-sep{flex:none;color:var(--dim)}
/* a narrow rail (under ~360px of line: the rails and a phone, now that the burner's picture sits in the line too) keeps
   the amount and the name readable by dropping the word "burned" from view (screen readers still hear it; the flame says
   it): "🔥 842K FABLE · 12m · (picture) @gideon ›" */
@container burnline (max-width:360px){.fire-line .fl-verb{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}}
.fire-line .fl-who{flex:0 100 auto;min-width:calc(20px + 4ch);overflow:hidden;text-overflow:ellipsis;color:var(--ink)}
/* the burner's name by the site's one rule (fable-rich.js who; owner, 30 Sep evening): the name, the seal, the X logo (a mark: the
   line is a button) and the @handle after a chosen name; the name is what gives way when the rail is narrow */
.fire-line .fl-who{display:inline-flex;align-items:center;gap:4px}
.fire-line .fl-who-n{min-width:3ch;overflow:hidden;text-overflow:ellipsis}
.fire-line .fl-who-a{position:relative;z-index:1;display:inline-flex;align-items:center;gap:4px;min-width:0;max-width:100%;margin:0;padding:0;border:0;background:none;color:inherit;font:inherit;text-decoration:none;white-space:nowrap;overflow:hidden}
.fire-line span.fl-who-a{position:static}
.fire-line :is(a,button).fl-who-a{cursor:pointer}
.fire-line :is(a,button).fl-who-a:hover .fl-who-n{text-decoration:underline;text-underline-offset:3px}
.fire-line :is(a,button).fl-who-a:focus-visible{outline:2px solid var(--brand);outline-offset:-2px;border-radius:2px}
.fire-line .fl-pic{width:16px;height:16px;flex:none;border-radius:50%;object-fit:cover;background:var(--panel)}
.fire-line .fl-seal{width:12px;height:12px}
.fire-line .fl-x{--fx-size:9.5px}
.fire-line .fl-at{flex:none;color:var(--muted);font-weight:400}
.fire-line .fl-empty{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
.fire-line .fl-chev{flex:none;margin-left:auto;padding-left:4px;color:var(--brand-text-solid);font-size:15px;line-height:1;transition:transform .18s}
.fire-line:has(.fl-open[aria-expanded="true"]) .fl-chev{transform:rotate(90deg)}
.fire-line::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0}
.fire-line.fresh::after{animation:fireLineWash .62s ease-out}
@keyframes fireLineWash{0%{opacity:1;background:color-mix(in srgb,var(--up) 24%,transparent)}30%{opacity:1;background:color-mix(in srgb,#fb923c 26%,transparent)}100%{opacity:0;background:color-mix(in srgb,#fb923c 26%,transparent)}}
.fire-card{padding:10px 12px 12px;border-top:1px solid var(--line);font:400 12.5px/1.45 var(--sans);color:var(--ink-2)}
.fire-card .lb-head{display:flex;justify-content:space-between;align-items:center;gap:8px}
.fire-card .lb-age{font:500 11px/1 var(--mono);color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.fire-card .lb-amt{margin:9px 0 3px;font:800 23px/1.05 var(--sans);font-stretch:112%;letter-spacing:-.01em;color:var(--brand);background:var(--brand-sheen-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.fire-card .lb-usd{font:500 12px/1.4 var(--mono);color:var(--ink-2)}
.fire-card .lb-who{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin-top:10px;padding-top:9px;border-top:1px dashed var(--line)}
.fire-card .lb-person{display:inline-flex;align-items:center;gap:7px;max-width:100%;min-width:0;padding:0;border:0;background:none;color:var(--ink);font:700 13px/1.2 var(--sans);text-align:left;cursor:pointer}
.fire-card .lb-person:hover .lb-name{text-decoration:underline;text-underline-offset:3px}
.fire-card .lb-pic{width:22px;height:22px;flex:none;border-radius:50%;object-fit:cover;background:var(--panel)}
.fire-card .lb-dot{width:10px;height:10px;flex:none;border-radius:50%;background:var(--line-2)}
.fire-card .lb-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fire-card .lb-seal{width:13px;height:13px;flex:none;margin-left:-3px}
.fire-card .lb-seal-b{fill:var(--brand)}
.fire-card .lb-seal-t{fill:none;stroke:var(--brand-mark);stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round}
.fire-card .lb-pw{display:inline-flex;align-items:center;gap:6px;min-width:0;max-width:100%}.fire-card .lb-pw>.lb-person{flex:0 1 auto}.fire-card .lb-x{--fx-size:10px}
.fire-card .lb-handle{cursor:pointer;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:500 11.5px/1.2 var(--mono);color:var(--muted)}
.fire-card .lb-kind{font:700 13px/1.2 var(--sans);color:var(--ink)}
.fire-card .lb-why{font-size:12px;color:var(--muted)}
.fire-card .lb-text{display:-webkit-box;-webkit-line-clamp:4;line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;margin:8px 0 0;overflow-wrap:anywhere;color:var(--ink-2)}
.fire-card .lb-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:10px}
.fire-card .lb-more{padding:0;border:0;color:var(--brand);background:var(--brand-sheen-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font:600 12px/1.2 var(--sans);cursor:pointer}
.fire-card .lb-tx{margin-left:auto;font:500 11.5px/1.2 var(--mono);color:var(--brand-text-solid);white-space:nowrap}
.fire-card .lb-more:hover,.fire-card .lb-tx:hover{text-decoration:underline;text-underline-offset:3px}
.fire-card .lb-sim{margin-left:auto;font:500 10px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.fire-card :is(.lb-person,.lb-more,.lb-tx):focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.fire-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media (prefers-reduced-motion:reduce){.bl-delta,.fire-line.fresh::after{animation:none}.fire-line .fl-chev,.fpow-seg,.fpow-li{transition:none}}
/* phones (owner's option c, 24 Sep): the pot lists stay folded under the two presses until a pot tab is tapped (tapping
   the open one folds it again). The box itself lives in the Live Tape page's rail now (25 Sep), never floating. */
@media (max-width:759.98px){.firebtn:not(.open) .firepot{display:none}
  .firebtn .pot-tabs [role=tab]::after{content:' ▾';font-size:.8em;opacity:.7}
  .firebtn.open .pot-tabs [role=tab][aria-selected="true"]::after{content:' ▴'}}
.fomo-post .card-sub{margin:0 0 14px}
.fomo-post-actions{display:flex;gap:8px;flex-wrap:wrap}

/* the three sections of a coin page: chart · vote · fomo analytics. White boxes with an orange glow; the one you hover grows */
.ptabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:8px 0 26px}
.ptab{display:flex;align-items:center;justify-content:center;gap:12px;padding:20px 18px;border:2px solid #fff;background:#fff;font:900 clamp(17px,calc(1.7 * var(--vw)),22px)/1 var(--sans);font-stretch:118%;letter-spacing:-.015em;color:var(--jet);cursor:pointer;white-space:nowrap;transform-origin:center;box-shadow:0 0 0 1px color-mix(in srgb,var(--fire) 35%,transparent),0 0 18px color-mix(in srgb,var(--fire) 45%,transparent),0 0 40px color-mix(in srgb,var(--fire) 25%,transparent);transition:transform .18s cubic-bezier(.2,.8,.2,1),box-shadow .18s,border-color .18s}
.ptab i{font:700 12px/1 var(--mono);letter-spacing:.14em;font-style:normal;color:var(--fire-2)}
.fomo-mark{width:26px;height:26px;flex:none;display:block;margin-right:-4px}
.ptab:hover{transform:scale(1.05);box-shadow:0 0 0 1px color-mix(in srgb,var(--fire) 60%,transparent),0 0 26px color-mix(in srgb,var(--fire) 70%,transparent),0 0 60px color-mix(in srgb,var(--fire) 40%,transparent);z-index:1}
.ptab[aria-selected="true"]{border-color:var(--fire);box-shadow:0 0 0 2px color-mix(in srgb,var(--fire) 55%,transparent),0 0 28px color-mix(in srgb,var(--fire) 85%,transparent),0 0 70px color-mix(in srgb,var(--fire) 50%,transparent)}
@media (prefers-reduced-motion:reduce){.ptab,.ptab:hover{transform:none}}
@media (max-width:640px){.ptabs{gap:10px}.ptab{padding:14px 8px;gap:7px;font-size:14px;white-space:normal;text-align:center;line-height:1.1;min-width:0}.ptab i{display:none}}
.fomo-kpis{margin-bottom:0}
.coin-grid{display:grid;grid-template-columns:minmax(0,1fr) 384px;gap:20px;align-items:start}
.stack{display:flex;flex-direction:column;gap:20px;min-width:0}
.tabs{display:flex;gap:2px;flex-wrap:wrap}
.tab{padding:8px 12px;border:1px solid transparent;background:transparent;font:700 12px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);cursor:pointer}
.tab:hover{color:var(--ink)}
.tab[aria-selected="true"]{color:var(--bg);background:var(--ink)}
.ranges{display:flex;gap:2px;margin-left:auto}
.ranges .tab{padding:7px 9px}
.legend{display:flex;gap:16px;flex-wrap:wrap;font-size:12px;color:var(--ink-2);margin:2px 0 8px}
.legend span{display:inline-flex;align-items:center;gap:7px}
.key{display:inline-block;width:16px;height:2px;background:var(--ink)} .key.red{background:var(--brand-outline)} .key.dot{width:9px;height:9px;border-radius:50%;background:var(--brand-outline)} .key.dim{background:var(--bar);height:8px;width:6px}
details.table-twin{margin-top:10px;font-size:12.5px}
details.table-twin summary{cursor:pointer;color:var(--muted);font:500 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase}
details.table-twin table{width:100%;border-collapse:collapse;margin-top:10px;font-family:var(--mono);font-size:11.5px}
details.table-twin th,details.table-twin td{padding:6px 8px;border-bottom:1px solid var(--line);text-align:right}
details.table-twin th:first-child,details.table-twin td:first-child{text-align:left}
details.table-twin th{color:var(--muted);font-weight:500}

/* trade panel */
.seg{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line-2)}
.seg button{padding:11px;border:0;background:transparent;font:800 13px/1 var(--sans);cursor:pointer;color:var(--ink-2)}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
.field{display:flex;align-items:center;gap:10px;border:1px solid var(--line-2);background:var(--bg);padding:0 12px;margin-top:12px}
.field input{flex:1;min-width:0;border:0;background:transparent;padding:14px 0;font:700 22px/1 var(--sans);outline:none}
.field span{font:500 12px/1 var(--mono);color:var(--muted)}
.field:focus-within{border-color:var(--ink)}
.quickamts{display:flex;gap:6px;margin-top:8px}
.quickamts button{flex:1;padding:7px 0;border:1px solid var(--line);background:transparent;font:500 11.5px/1 var(--mono);color:var(--ink-2);cursor:pointer}
.quickamts button:hover{border-color:var(--ink-2);color:var(--ink)}
.kv{display:flex;justify-content:space-between;gap:12px;font-size:13px;padding:7px 0;border-bottom:1px dashed var(--line)}
.kv:last-child{border-bottom:0}
.kv span{color:var(--muted)} .kv b{font-family:var(--mono);font-weight:500;text-align:right}
.kv b.red{color:var(--brand);background:var(--brand-sheen-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.pickbar.bad{border-color:var(--brand)}
/* today's round clock on the vote tab: one countdown for every coin, to 23:59:59 UTC */
/* the chart card's footer: where each trade's fee goes, and four lifetime numbers as tiles */
.chart-fees{margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}
.chart-fees-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:14px}
.chart-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px 18px;margin-top:16px}
.chart-stats .kv{flex-direction:column;justify-content:flex-start;gap:5px;padding:0;border:0}
.chart-stats .kv span{font:500 10.5px/1.25 var(--mono);letter-spacing:.04em;text-transform:uppercase}
.chart-stats .kv b{text-align:left;font-size:14px}
@media (max-width:640px){.chart-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Focused buy/sell console. Trade semantics and safeguards stay in the existing controllers. */
.trade-console{
  --trade-accent:#22d68a;--trade-accent-ink:#062b1d;
  border:1px solid var(--line-2);border-radius:22px;padding:24px;background:var(--panel);
}
.trade-console:has(#sideSell[aria-pressed="true"]){--trade-accent:#f2777d;--trade-accent-ink:#371115}
.trade-console .trade-sides{gap:8px;border:0;padding:0;background:transparent}
.trade-console .trade-sides button{min-height:50px;border-radius:11px;font:700 17px/1.2 var(--sans);text-transform:none;color:var(--muted);transition:background .15s,color .15s}
.trade-console .trade-sides button:hover:not(:disabled){color:var(--ink);background:var(--panel-2)}
.trade-console .trade-sides button[aria-pressed="true"]{background:var(--trade-accent);color:var(--trade-accent-ink)}
.trade-console .trade-sides button[aria-pressed="true"]:hover:not(:disabled){background:color-mix(in srgb,var(--trade-accent) 90%,white);color:var(--trade-accent-ink)}
.trade-entry{min-height:200px;display:flex;flex-direction:column;justify-content:center;padding:24px 0 16px;text-align:center}
.trade-amount-label{color:var(--muted);font:500 12px/1.4 var(--sans)}
.trade-console .trade-amount{gap:12px;margin:8px 0 0;padding:0 8px;border:1px solid transparent;border-radius:12px;background:transparent;min-width:0}
.trade-console .trade-amount:focus-within{border-color:var(--line-2);background:color-mix(in srgb,var(--bg) 38%,transparent)}
.trade-console .trade-amount input{width:0;min-width:0;padding:10px 0;font:500 58px/1.15 var(--sans);letter-spacing:-.04em;text-align:center;color:var(--ink);font-variant-numeric:tabular-nums}
.trade-console .trade-amount input::placeholder{color:var(--dim);opacity:1}
.trade-console .trade-amount span{flex:0 1 auto;max-width:34%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted);font:600 15px/1.3 var(--sans)}
.trade-console .trade-balance{justify-content:center;font:400 12px/1.6 var(--sans);color:var(--muted);margin:12px 0 0;overflow-wrap:anywhere}
.trade-console .trade-balance b{font-weight:500;color:var(--ink-2)}
.trade-console .trade-balance.short,.trade-console .trade-balance.short b{color:var(--down)}
.trade-protection{margin:0 0 15px;font:500 12px/1.5 var(--sans);color:var(--muted)}
.trade-console:has(#externalTradeLink:not([hidden])) .trade-protection,.trade-console:has(#externalTradeLink:not([hidden])) .slip-row{display:none}
.trade-protection summary{display:flex;align-items:center;justify-content:flex-end;gap:6px;width:fit-content;margin-left:auto;padding:4px 0;cursor:pointer;list-style:none}
.trade-protection summary::-webkit-details-marker{display:none}
.trade-protection summary:hover{color:var(--ink)}
.trade-protection[open] summary svg{transform:rotate(180deg)}
.trade-protection p{padding:10px 12px;margin:8px 0 0;border-radius:10px;background:var(--bg);font-weight:400;color:var(--ink-2)}
/* slippage the trader chooses (owner, 23 Sep): presets and a custom box, remembered in this browser */
.slip-pick{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end;margin:8px 0 0}
.slip-pick button{min-width:52px;min-height:32px;padding:6px 10px;border-radius:999px;border:1px solid var(--line);background:transparent;font:600 12px/1 var(--sans);color:var(--ink-2);cursor:pointer}
.slip-pick button:hover{border-color:var(--ink-2);color:var(--ink)}
.slip-pick button[aria-pressed="true"],.slip-pick button[aria-pressed="true"]:hover{background:var(--brand-sheen-sm);color:var(--brand-ink);box-shadow:var(--brand-bevel);border-color:transparent;font-weight:700}.slip-pick button[aria-pressed="true"]:hover{background:var(--brand-sheen-sm-hover)}
.slip-custom{display:inline-flex;align-items:center;gap:4px;min-height:32px;padding:0 10px;border-radius:999px;border:1px solid var(--line);color:var(--ink-2)}
.slip-custom:focus-within{border-color:var(--brand)}
.slip-custom.on{border-color:transparent;background:linear-gradient(var(--panel),var(--panel)) padding-box,var(--brand-outline) border-box}
.slip-custom input{width:56px;border:0;background:transparent;font:600 12px/1 var(--sans);color:var(--ink);text-align:right;outline:none}
.trade-protection p.warn{color:var(--ink);border:1px solid var(--error)}
.trade-console .trade-action{min-height:56px;padding:15px 14px;border:0;border-radius:12px;background:var(--trade-accent);color:var(--trade-accent-ink);box-shadow:none;transform:none;font:750 17px/1.35 var(--sans);letter-spacing:0;text-transform:none;white-space:normal;overflow-wrap:anywhere}
.trade-console .trade-action:hover:not(:disabled){background:color-mix(in srgb,var(--trade-accent) 90%,white);box-shadow:none;transform:none}
.trade-console .trade-action:active:not(:disabled){background:color-mix(in srgb,var(--trade-accent) 86%,black);transform:none}
.trade-console .trade-action:disabled{cursor:not-allowed;background:color-mix(in srgb,var(--trade-accent) 14%,var(--panel));color:var(--muted);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--trade-accent) 20%,var(--line));opacity:1}
.trade-console .trade-presets{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:16px}
.trade-console .trade-presets button{min-width:0;min-height:36px;padding:8px 3px;border-radius:999px;border:1px solid color-mix(in srgb,var(--trade-accent) 32%,var(--line));background:color-mix(in srgb,var(--trade-accent) 9%,var(--panel));color:var(--trade-accent);font:600 12px/1.35 var(--sans);overflow-wrap:anywhere;transition:background .15s,border-color .15s}
.trade-console .trade-presets button:hover:not(:disabled){border-color:var(--trade-accent);background:color-mix(in srgb,var(--trade-accent) 17%,var(--panel))}
.trade-console .trade-presets button:disabled{opacity:.4;cursor:not-allowed}
.trade-console .trade-presets:has(> :nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}
.trade-console .trade-presets:has(> :nth-child(5):last-child){grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.trade-console .trade-presets:empty{display:none}
.trade-console .trade-message{font-size:12px;line-height:1.6;margin:14px 0 0;overflow-wrap:anywhere}
.trade-console .trade-message:empty{display:none}
.trade-console .opening-fee{margin:0 0 14px;border-radius:10px;font-size:12px}
.trade-breakdown{margin-top:22px;padding-top:20px;border-top:1px solid var(--line)}
.trade-breakdown .card-head{gap:12px;flex-wrap:wrap;margin-bottom:8px}
.trade-details-note{color:var(--muted);font:400 11px/1.4 var(--sans)}
.trade-breakdown .kv{align-items:baseline;gap:16px;padding:10px 0;font-size:12px;line-height:1.5}
.trade-breakdown .kv span{flex:1;min-width:0}
.trade-breakdown .kv b{max-width:58%;font-size:11.5px;overflow-wrap:anywhere}
.trade-breakdown .btn{margin-top:12px;white-space:normal;line-height:1.5;width:100%;box-shadow:none;border-radius:8px}
:root[data-theme="light"] .trade-console{--trade-accent:#13845a;--trade-accent-ink:#fff}
:root[data-theme="light"] .trade-console:has(#sideSell[aria-pressed="true"]){--trade-accent:#c74851;--trade-accent-ink:#fff}
@media (max-width:480px){.trade-console{padding:18px;border-radius:18px}.trade-entry{min-height:178px}.trade-console .trade-amount input{font-size:48px}.trade-console .trade-presets{gap:6px}.trade-console .trade-action{font-size:16px}.trade-breakdown .kv{gap:10px}}

/* thesis log */
.log{display:flex;flex-direction:column}
.th{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:12px;padding:13px 0;border-bottom:1px solid var(--line);align-items:start}
.th:last-child{border-bottom:0}
.th img{width:34px;height:34px;border-radius:50%;border:0;display:block}
.th .who{font:700 12px/1 var(--mono);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.th p{margin:6px 0 0;font-size:13.5px;color:var(--ink-2)}
.th .res{text-align:right;font:500 11.5px/1.35 var(--mono);color:var(--muted);white-space:nowrap}
.th .res b{display:block;color:var(--ink);font-size:13px}
.th.new{animation:slide .45s cubic-bezier(.2,.8,.2,1)}
/* the log's two views, and the top-burners leaderboard: rank, face, how many theses, a bar for their share of the lead */
.seg.logtabs{max-width:280px;margin:2px 0 6px}
.seg.logtabs button{padding:9px 10px;font-size:12.5px}
.th.burner{grid-template-columns:22px 34px minmax(0,1fr) auto;align-items:center}
.th .rank{font:800 13px/1 var(--mono);color:var(--muted);text-align:center}
.th .rank.podium{color:var(--brand);background:var(--brand-sheen-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.th.burner p{margin-top:4px;font:500 11.5px/1.3 var(--mono);color:var(--muted)}
.burnbar{height:4px;margin-top:7px;background:var(--line);border-radius:2px;overflow:hidden;max-width:260px}
.burnbar i{display:block;height:100%;background:var(--brand-outline);border-radius:2px}

/* vote panel */
.round-head{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border:1px solid var(--line);margin-bottom:16px}
.round-head>div{padding:12px 14px;border-right:1px solid var(--line)} .round-head>div:last-child{border-right:0}
.round-head .k{font:500 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.round-head .v{font:800 19px/1.15 var(--sans);font-stretch:110%;margin-top:7px}
.vote-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center}
.propose{position:relative;margin:0 0 18px}
.pickrow{display:flex;gap:8px}
.pickbar{flex:1;min-width:0;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 14px;border:1px solid var(--line-2);background:var(--bg);color:var(--ink);font:600 13px/1 var(--sans);cursor:pointer;text-align:left}
.pickbar:hover{border-color:var(--brand)}
.pickbar-label{display:inline-flex;align-items:center;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pickbar-caret{color:var(--muted);flex:none}
.pickpanel{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:20;max-height:320px;overflow-y:auto;background:var(--panel);border:1px solid var(--line-2);box-shadow:0 22px 44px -18px var(--shadow);padding:6px}
.pickgroup{font:700 9.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--dim);padding:10px 8px 6px}
.pickopt{display:flex;align-items:center;gap:10px;width:100%;padding:8px;border:0;background:transparent;color:var(--ink);cursor:pointer;text-align:left}
.pickopt:hover,.pickopt:focus-visible{background:var(--panel-2)}
.pickopt img{width:22px;height:22px;border-radius:50%;flex:none}
.pickopt b{font:700 13px/1 var(--mono);letter-spacing:.03em}
.pickopt span{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.locked{padding:18px;border:1px dashed var(--line-2);color:var(--ink-2);font-size:13.5px}

/* bar list + split bar */
.barlist{display:flex;flex-direction:column;gap:12px}
.bl-head{display:flex;justify-content:space-between;gap:10px;align-items:baseline;font-size:13.5px}
.bl-name{font-weight:700;display:inline-flex;gap:8px;align-items:center}
.pair-ic{width:16px;height:16px;border-radius:50%;display:inline-block;vertical-align:-3px;margin-right:6px;flex:none}
.poolseg b .pair-ic{width:14px;height:14px;vertical-align:-2px;margin-right:5px}
.bl-val{font-family:var(--mono);font-weight:500;font-size:12.5px}
.bl-track{height:8px;background:var(--bg);border:1px solid var(--line);margin-top:6px}
.bl-fill{height:100%;background:var(--ink)} .bl-fill.red{background:var(--brand-outline)}
.bl-sub{font:400 11px/1.3 var(--mono);color:var(--muted);margin-top:5px}
.split-bar{display:flex;gap:2px;height:22px}
.split-seg{min-width:3px;flex-basis:0}
.split-seg.red,.split-key.red{background:var(--brand-outline)} .split-seg.bone,.split-key.bone{background:var(--ink)} .split-seg.dim,.split-key.dim{background:var(--bar)} .split-seg.amber,.split-key.amber{background:var(--amber)}
.split-legend{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px 16px;margin-top:14px;font-size:13px}
.split-item{display:flex;gap:9px;align-items:flex-start}
.split-key{width:10px;height:10px;margin-top:5px;flex:none}
.split-item strong{font-family:var(--mono);font-weight:700}
.split-label{color:var(--ink-2)} .split-note{font-size:11.5px;color:var(--muted);margin-top:2px}
.split-what{margin:12px 0 0;font-size:12.5px;line-height:1.45;color:var(--ink-2)}   /* a 0% coin's line under its fee bar (coin.js renderSplit) */

/* pools table */
.ptable{width:100%;border-collapse:collapse;font-size:13px}
.ptable th{font:500 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);text-align:right;padding:9px 8px;border-bottom:1px solid var(--line)}
.ptable td{white-space:nowrap;padding:11px 8px;border-bottom:1px solid var(--line);text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums}
.ptable th:first-child,.ptable td:first-child{text-align:left;font-family:var(--sans);font-weight:700}
.ptable tr:last-child td{border-bottom:0}

/* ---- charts */
.chart{position:relative;outline:none;min-height:60px}
.chart svg{display:block;overflow:visible}
.chart:focus-visible{outline:1px solid var(--line-2);outline-offset:4px}
.chart-empty{padding:60px 16px;text-align:center;color:var(--muted);font-size:13.5px;border:1px dashed var(--line)}
.c-grid{stroke:var(--line);stroke-width:1} .c-axis{stroke:var(--line-2);stroke-width:1}
.c-tick{fill:var(--muted);font:400 10.5px var(--mono)} .c-title{fill:var(--muted);font:500 9.5px var(--mono);letter-spacing:.14em;text-transform:uppercase}
.c-note{fill:var(--ink-2);font:500 10.5px var(--mono)}
.c-line{fill:none;stroke:var(--ink);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.c-line-red{stroke:var(--brand)} .c-line-dim{stroke:var(--dim)} .c-line-thin{stroke-width:1.5;stroke:var(--ink-2)}
.c-area{fill:var(--ink);opacity:.07} .c-area-red{fill:var(--brand);opacity:.16}
.c-bar{fill:var(--bar)}
.c-burn{fill:var(--brand);stroke:var(--panel);stroke-width:2}
.c-end{fill:var(--ink);stroke:var(--panel);stroke-width:2}
.c-halo{fill:var(--ink);opacity:.16;transform-box:fill-box;transform-origin:center;animation:halo 2.2s ease-out infinite}
.c-halo-red{fill:var(--brand);opacity:.22}
/* past the graduation latch: the marker goes green and the crossing flashes once */
.c-halo-grad{fill:var(--mint);opacity:.28} .c-burn-grad{fill:var(--mint);stroke:var(--panel)}
.c-mark.c-mark-done{stroke:var(--mint);opacity:.9}
.c-flash{fill:none;stroke:var(--mint);stroke-width:3;transform-box:fill-box;transform-origin:center;animation:gradFlash .85s cubic-bezier(.2,.8,.2,1) forwards}
.c-mark.c-mark-flash{stroke:var(--mint);stroke-width:3;animation:gradLine .85s ease-out forwards}
@keyframes gradFlash{0%{transform:scale(.6);opacity:1;stroke-width:4}100%{transform:scale(6);opacity:0;stroke-width:1}}
@keyframes gradLine{0%{opacity:1}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.c-flash,.c-mark-flash{animation:none;opacity:0}}
@keyframes halo{0%{transform:scale(.5);opacity:.35}100%{transform:scale(1.7);opacity:0}}
@media (prefers-reduced-motion:reduce){.c-halo{animation:none}}
.c-cross{stroke:var(--ink-2);stroke-width:1;opacity:.6} .c-mark{stroke:var(--ink-2);stroke-width:1}
.c-dot{fill:var(--ink);stroke:var(--panel);stroke-width:2} .c-dot-red{fill:var(--brand)}
.c-spark-end{fill:var(--brand)}
.m-orbit{fill:none;stroke:var(--line);stroke-width:1} .m-link{stroke:var(--dim);stroke-linecap:round} .m-link-main{stroke:var(--ink-2)}
.m-dot{fill:var(--panel-2);stroke:var(--ink);stroke-width:1.5;transition:fill .15s} .m-node{cursor:default;outline:none} .m-node:hover .m-dot,.m-node:focus .m-dot{fill:var(--brand-dim)}
.m-sym{fill:var(--ink);font:700 9.5px var(--mono)} .m-core{fill:var(--fire)} .m-core-sym{fill:var(--brand-mark);font:800 12px var(--mono)} .m-pulse{fill:var(--brand)}
/* a logo fills its node, so the ring is drawn over the art and the ticker reads underneath in very small type */
.m-ring{fill:none;stroke:var(--ink);stroke-width:1.5} .m-ring-core{stroke-width:2}
.m-node:hover .m-ring,.m-node:focus .m-ring{stroke:var(--brand)}
.m-tick{fill:var(--ink-2);font:700 8px var(--mono);letter-spacing:.06em} .m-tick-core{fill:var(--ink);font-size:10px}
/* a ticker sits under its node, where the node's own link arrives: a halo in the card colour keeps the line out of the letters */
.m-tick{paint-order:stroke;stroke:var(--panel);stroke-width:3.5px;stroke-linejoin:round}
/* today's round in the coin page's narrow right column: the picker and its button stack, the three numbers shrink to fit,
   and a vote row may wrap its tags rather than squeeze */
.round-card .card-head{flex-wrap:wrap;row-gap:8px}
.round-card .pickrow{flex-direction:column} .round-card .pickrow .btn{width:100%}
.round-card .round-head>div{padding:10px 11px;min-width:0} .round-card .round-head .v{font-size:15.5px;line-height:1.2}
.round-card .bl-head{flex-wrap:wrap;row-gap:6px}
.vote-status{margin:10px 0 0;font:500 12px/1.45 var(--sans);color:var(--muted)}   /* what this wallet can do right now: connect, buy, activate, or its votes */
.chart-tip{position:absolute;z-index:5;pointer-events:none;background:var(--tip-bg);border:1px solid var(--line-2);padding:10px 12px;min-width:170px;max-width:260px;box-shadow:4px 4px 0 var(--shadow);font-size:12.5px}
.tip-time{font:400 10.5px/1 var(--mono);color:var(--muted);margin-bottom:8px;letter-spacing:.04em}
.tip-row{display:flex;align-items:baseline;gap:8px;padding:2px 0} .tip-row strong{font-family:var(--mono);font-weight:700;color:var(--ink)} .tip-label{color:var(--muted);font-size:11.5px}
.tip-key{display:inline-block;width:12px;height:2px;background:var(--ink);align-self:center;flex:none} .tip-key.red{background:var(--brand-outline)} .tip-key.dim{background:var(--bar);height:7px;width:5px}
.tip-burn{margin-top:8px;padding-top:8px;border-top:1px solid var(--line-2)} .tip-burn .tip-row:first-child strong{color:var(--brand);background:var(--brand-sheen-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* ---- launch */
.launch-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:24px;align-items:start}
.form{display:flex;flex-direction:column;gap:18px}
.f label{display:block;font:500 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.f input[type=text],.f textarea{width:100%;padding:13px 12px;border:1px solid var(--line-2);background:var(--bg);font-size:15px}
.f textarea{min-height:92px;resize:vertical}
.f input:focus,.f textarea:focus{outline:none;border-color:var(--ink)}
.f .hint{font-size:12.5px;color:var(--muted);margin-top:7px}
.f2{display:grid;grid-template-columns:1.4fr 1fr;gap:14px}
.taxmenu{display:grid;grid-template-columns:repeat(11,1fr);border:1px solid var(--line-2)}
.taxmenu button{padding:12px 0;border:0;border-right:1px solid var(--line);background:transparent;font:700 13px/1 var(--mono);cursor:pointer;color:var(--ink-2)}
.taxmenu button:last-child{border-right:0}
.taxmenu button:hover{background:var(--panel-2);color:var(--ink)}
.taxmenu button[aria-pressed="true"]{background:var(--brand-sheen-sm);color:var(--brand-ink);box-shadow:var(--brand-bevel,0 0 transparent)}
/* the logo drop: a square box and the rules beside it */
.logo-drop{display:grid;grid-template-columns:148px minmax(0,1fr);gap:18px;align-items:start}
/* the box is a <label> inside .f, so it has to out-rank the field-label rule above */
.f label.logo-box{display:flex;align-items:center;justify-content:center;aspect-ratio:1/1;margin:0;border:1.5px dashed var(--line-2);border-radius:20px;background:var(--bg);text-align:center;font:600 12.5px/1.45 var(--sans);letter-spacing:0;text-transform:none;color:var(--muted);cursor:pointer;overflow:hidden;position:relative;transition:border-color .15s,color .15s}
.f label.logo-box:hover,.f label.logo-box.over{border-color:var(--brand);color:var(--ink)}
.logo-box img{width:100%;height:100%;object-fit:cover;display:block}
.logo-empty{padding:0 12px}
.logo-rules b{display:block;font:700 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.logo-rules ul{margin:8px 0 8px;padding-left:16px;font-size:12.5px;line-height:1.5;color:var(--ink-2)}
.logo-rules .hint{margin-top:0} .logo-rules .hint.bad{color:var(--down);font-weight:600}
/* a warning that doesn't block (a full withdrawal erases the vote): amber, 4.8:1 on the light theme */
.hint.warn{color:var(--amber);font-weight:600}
/* a pair-swapper change the Safe proposed: holders see it for the 48 h before it can take over */
.swap-note{color:var(--amber);font-weight:600}
.socials{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.social{display:flex;align-items:center;gap:8px;border:1px solid var(--line-2);background:var(--bg);padding:0 12px}
.social span{flex:none;width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;color:var(--muted)}
.social span svg{width:17px;height:17px;display:block}
.social span.tg{color:#2aabee} .social span.dc{color:#5865f2}
/* each social link says where it stands: green once it is a valid link, red with the reason right under it when not */
.social-cell{display:flex;flex-direction:column;gap:6px;min-width:0}
.social{transition:border-color .15s,box-shadow .15s}
.social[data-state="ok"]{border-color:var(--mint);box-shadow:inset 0 0 0 1px var(--mint)}
.social[data-state="bad"]{border-color:var(--error);box-shadow:inset 0 0 0 1px var(--error)}
.social[data-state="checking"]{border-color:var(--amber);box-shadow:inset 0 0 0 1px var(--amber)}
.social-err{margin:0;font:700 13.5px/1.35 var(--sans);color:var(--error)}
.social-err.checking{color:var(--muted);font-weight:600}
.social:focus-within span{color:var(--ink)} .social:focus-within span.tg{color:#2aabee} .social:focus-within span.dc{color:#5865f2}
.social input{flex:1;min-width:0;border:0;background:transparent;padding:12px 0;font-size:14px;outline:none}
.social:focus-within{border-color:var(--ink)}
.gsocials{display:flex;gap:6px;margin-top:8px}
.gsocials a{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border:1px solid var(--line-2);font-size:12px;color:var(--ink-2)}
.gsocials a svg{width:14px;height:14px;display:block}
.gsocials a:hover{border-color:var(--brand-text-solid);color:var(--brand-text-solid)}
@media (max-width:640px){.socials{grid-template-columns:1fr}}
.launch-tile{max-width:200px}
.gtile.empty{display:flex;align-items:center;justify-content:center;border-style:dashed;background:var(--bg)} .gempty{font:600 12.5px/1 var(--sans);color:var(--dim)}
.coin-ico.empty{display:inline-block;border-style:dashed;background:var(--bg)}
.coin-name .blank{color:var(--dim);font-weight:500}
.taxmenu.five{grid-template-columns:repeat(5,1fr)}
.taxmenu.six{grid-template-columns:repeat(6,1fr)}   /* fee model 2: 0% then the five tiers */
.feebox{border:1px solid var(--line);background:var(--bg);padding:16px 18px 6px}
.feebox-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px} .feebox-head label{margin:0}
.feerow{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:18px;align-items:center;padding:14px 0;border-top:1px solid var(--line)}
#poolbox .feerow{grid-template-columns:200px minmax(0,1fr);align-items:start}
@media (max-width:900px){#poolbox .feerow{grid-template-columns:1fr}}
.feerow-text b{display:block;font:800 15px/1.2 var(--sans);font-stretch:112%}
.feerow-text .req{display:table;margin:7px 0 2px;white-space:nowrap;font:700 9.5px/1 var(--mono);font-style:normal;letter-spacing:.1em;text-transform:uppercase;color:var(--brand-ink);border:1px solid transparent;background:var(--brand-sheen-sm);box-shadow:var(--brand-bevel);padding:3px 6px}   /* its own line under the heading, never split */
.rulechk{display:block;margin-top:6px;font:700 11.5px/1 var(--mono);letter-spacing:.02em;color:var(--brand-text-solid)}
.rulechk[data-ok="true"]{color:var(--mint)}
/* one quiet pulse on the fee card when a creator changes a number, so they look at what it did */
#paysCard.pulse{animation:paysRing .75s cubic-bezier(.2,.8,.2,1)}
#paysBig.pulse{display:inline-block;animation:paysPop .45s cubic-bezier(.2,.8,.2,1)}
@keyframes paysRing{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--brand) 55%,transparent),0 0 0 0 color-mix(in srgb,var(--brand) 35%,transparent)}60%{box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 45%,transparent),0 0 26px 6px color-mix(in srgb,var(--brand) 28%,transparent)}100%{box-shadow:0 0 0 0 transparent,0 0 0 0 transparent}}
@keyframes paysPop{0%{transform:scale(1)}40%{transform:scale(1.06)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){#paysCard.pulse,#paysBig.pulse{animation:none}}
.btn.waiting{background:var(--panel-2);border-color:var(--line-2);color:var(--muted);box-shadow:4px 4px 0 var(--line);cursor:not-allowed}
.btn.waiting:hover{transform:none;background:var(--panel-2);box-shadow:4px 4px 0 var(--line)} .feerow-text span{display:block;font-size:12.5px;line-height:1.4;color:var(--muted);margin-top:4px}
.feerow .seg,.feerow .taxmenu{margin:0} .feefixed{text-align:center;font:800 18px/1 var(--sans);color:var(--ink-2);padding:12px;border:1px solid var(--line-2)}
.feebox .hint{margin:10px 0 8px}
.platline{border-top:1px solid var(--line);padding-top:12px;margin-top:0} .platline strong{color:var(--ink)}
.menu{display:flex;flex-direction:column;gap:8px;min-width:0}
.menu-group{display:flex;flex-wrap:wrap;gap:5px;align-items:center}
.menu-label{font:600 9.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim);width:52px;flex:none}
.menu .chip{display:inline-flex;align-items:center;gap:6px;padding:5px 9px 5px 5px;font:700 11px/1 var(--mono);letter-spacing:.04em;text-transform:none} .menu .chip img{width:16px;height:16px;border-radius:50%;display:block} .menu .chip.more{padding:6px 9px}
.menu .chip.taken{opacity:.3;cursor:not-allowed} .menu .chip.more{border-style:dashed;color:var(--brand-text-solid)}
.poolsplit{display:flex;gap:3px;margin:14px 0 8px;min-height:54px}
.poolseg{flex:1 1 0;min-width:0;padding:8px 10px;background:var(--panel-2);border:1px solid var(--line);overflow:hidden}
.poolseg.main{background:var(--brand-sheen-sm);color:var(--brand-ink);border-color:transparent;box-shadow:var(--brand-bevel)} .poolseg.main span{opacity:1}
.poolseg b{display:block;font:800 12px/1.2 var(--sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .poolseg span{display:block;font:500 10px/1.3 var(--mono);opacity:.8;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:640px){.poolsplit{flex-direction:column}.poolseg{flex-basis:auto!important}}
@media (max-width:640px){.feerow{grid-template-columns:1fr;gap:10px}}
@media (max-width:640px){.logo-drop{grid-template-columns:120px minmax(0,1fr);gap:12px}}
.pays{display:flex;align-items:baseline;gap:12px;margin:16px 0 14px}
.pays b{font:900 44px/1 var(--sans);font-stretch:118%;letter-spacing:-.04em}
.sticky{position:sticky;top:84px}

/* ---- how it works */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border:1px solid var(--line)}
.step{padding:24px 20px;border-right:1px solid var(--line);background:var(--panel)}
.step:last-child{border-right:0}
.step .n{font:900 46px/1 var(--sans);font-stretch:125%;color:var(--brand);background:var(--brand-sheen-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;letter-spacing:-.04em}
.step h3{margin:14px 0 8px} .step p{margin:0;color:var(--ink-2);font-size:14px}
.prose{max-width:74ch} .prose p{color:var(--ink-2)} .prose p strong{color:var(--ink)}
.tbl{width:100%;border-collapse:collapse;font-size:13.5px;border:1px solid var(--line)}
.tbl th{font:500 10px/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);text-align:left;padding:12px;border-bottom:1px solid var(--line);background:var(--bg)}
.tbl td{padding:12px;border-bottom:1px solid var(--line);vertical-align:top;color:var(--ink-2)}
.tbl td:first-child{color:var(--ink);font-weight:700;font-family:var(--mono);font-size:12.5px;white-space:nowrap}
.tbl td.never{color:var(--ink)} .tbl tr:last-child td{border-bottom:0}
.tbl .r{text-align:right;font-family:var(--mono)}
.scroll-x{overflow-x:auto}
.redband{background:var(--brand-satin);color:var(--brand-ink);border-top:2px solid var(--jet);border-bottom:2px solid var(--jet)}
.redband h2{color:var(--brand-ink)} .redband p{color:var(--brand-ink);font-weight:500;max-width:60ch}
.redband-in{display:flex;align-items:center;justify-content:space-between;gap:30px;padding-top:54px;padding-bottom:54px;flex-wrap:wrap}

/* ---- footer + toasts */
.foot{padding:46px 0 34px;color:var(--ink-2);font-size:13.5px}
.foot-in{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:30px}
.foot h5{margin:0 0 12px;font:500 10.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.foot a{display:block;padding:4px 0} .foot a:hover{color:var(--ink)}
.foot a.ext{display:flex;align-items:center;gap:9px} .foot a.ext img,.foot a.ext svg{width:18px;height:18px;flex:none;border-radius:4px}
/* the $MOFO contract address in the header: logo, ticker, short address, copy mark */
.ca-chip{display:inline-flex;align-items:center;gap:7px;padding:6px 10px 6px 6px;border:1px dashed var(--line-2);background:transparent;color:var(--ink);font:500 12px/1 var(--mono);cursor:pointer;white-space:nowrap}
.ca-chip:hover{border-color:var(--brand-text-solid);color:var(--brand-text-solid)}
.ca-chip img{width:20px;height:20px;border-radius:4px;display:block} .ca-lbl{font-weight:700;color:var(--ink)} .ca-addr{color:var(--ink-2)} .ca-copy{color:var(--muted)}
@media (max-width:640px){.ca-lbl,.ca-addr,.ca-copy{display:none} .ca-chip::after{content:'CA';font-weight:700}}
.foot-base{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-top:34px;padding-top:18px;border-top:1px solid var(--line);font:400 11.5px/1.4 var(--mono);color:var(--muted)}
.toasts{position:fixed;right:18px;bottom:18px;z-index:80;display:flex;flex-direction:column;gap:8px;max-width:min(360px,calc(calc(100 * var(--vw)) - 36px))}
.toast{background:var(--ink);color:var(--bg);border:2px solid var(--ink);box-shadow:4px 4px 0 var(--brand);padding:12px 14px;font-size:13.5px;font-weight:600;animation:slide .3s ease-out}
.toast b{display:block;font-weight:900;font-stretch:112%}
.toast.stay{position:relative;padding-right:34px}
.toast-act{display:block;margin-top:10px;background:var(--brand-sheen-sm);color:var(--brand-ink);box-shadow:var(--brand-bevel);border:2px solid var(--bg);padding:6px 11px;font:inherit;font-weight:900;cursor:pointer}
.toast-act:hover{filter:brightness(1.08)}
.toast-x{position:absolute;top:4px;right:6px;width:26px;height:26px;background:none;border:0;color:var(--bg);font-size:19px;line-height:1;cursor:pointer;opacity:.65}
.toast-x:hover{opacity:1}
.notice{padding:10px 14px;border:1px dashed var(--line-2);color:var(--muted);font:400 11.5px/1.5 var(--mono)}

/* ---- responsive */
@media (max-width:1099.98px){.coin-grid{grid-template-columns:1fr}.launch-grid{grid-template-columns:1fr}.sticky{position:static}.pots{grid-template-columns:repeat(2,minmax(0,1fr))}.steps{grid-template-columns:repeat(2,minmax(0,1fr))}.step:nth-child(2){border-right:0}.step:nth-child(-n+2){border-bottom:1px solid var(--line)}}
@media (max-width:900px){.hero-in{grid-template-columns:1fr;padding-top:44px;padding-bottom:56px}.mirror{margin-top:54px}.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.kpi:nth-child(2){border-right:0}.kpi:nth-child(-n+2){border-bottom:1px solid var(--line)}.quick{grid-template-columns:repeat(2,minmax(0,1fr))}.quick>div{border-bottom:1px solid var(--line)}.grid2,.grid3{grid-template-columns:1fr}.foot-in{grid-template-columns:1fr 1fr}
  .row{grid-template-columns:minmax(0,1.6fr) 1fr 1fr}.row>*:nth-child(n+4){display:none}.row.head>*:nth-child(n+4){display:none}}
@media (max-width:640px){:root{--gutter:16px}.nav{display:none}.pots{grid-template-columns:1fr}.steps{grid-template-columns:1fr}.step{border-right:0;border-bottom:1px solid var(--line)}.sec{padding:52px 0}.taxmenu.five{grid-template-columns:repeat(5,1fr)}.round-head{grid-template-columns:1fr}.round-head>div{border-right:0;border-bottom:1px solid var(--line)}.search{margin-left:0;width:100%}.f2{grid-template-columns:1fr}.mast-actions .btn{display:none}}

/* trade page: the vault's fire log and the creator's claim rows */
.fire-row{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--line,rgba(255,255,255,.08));flex-wrap:wrap}
.fire-row:last-child{border-bottom:0}
.fire-amt{text-align:right;font-size:14px;white-space:nowrap}
.fire-text{margin-top:4px;max-width:46ch}
.fire-amt strong{color:var(--brand);background:var(--brand-sheen-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-family:var(--mono,ui-monospace,monospace)}
.claim-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:8px 0;border-bottom:1px solid var(--line,rgba(255,255,255,.08))}
.claim-row:last-child{border-bottom:0}

/* ---- the wallet picker: a centred dialog over the blurred page, one row per installed wallet (its own name and icon) */
.wm-open{overflow:hidden}
.wmodal{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:20px;background:rgba(10,8,7,.52);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);animation:wmIn .18s ease-out}
.wm-card{position:relative;width:min(420px,100%);background:var(--panel);border:1px solid var(--line-2);padding:26px 24px 22px;box-shadow:0 30px 80px -20px rgba(0,0,0,.8),0 0 0 1px color-mix(in srgb,var(--brand) 20%,transparent),0 0 44px color-mix(in srgb,var(--brand) 14%,transparent);animation:wmPop .22s cubic-bezier(.2,.8,.2,1)}
.wm-card h3{margin:0 0 6px;font:900 24px/1.1 var(--sans);font-stretch:112%;letter-spacing:-.02em}
.wm-sub{margin:0 0 18px;color:var(--ink-2);font-size:14px}
.wm-x{position:absolute;top:8px;right:10px;width:34px;height:34px;border:0;background:transparent;color:var(--muted);font-size:24px;line-height:1;cursor:pointer}
.wm-x:hover{color:var(--ink)}
.wm-list{display:flex;flex-direction:column;gap:10px}
.wm-opt{display:flex;align-items:center;gap:12px;width:100%;padding:12px 14px;border:1px solid var(--line-2);background:var(--bg);color:var(--ink);font:700 15px/1.1 var(--sans);text-align:left;text-decoration:none;cursor:pointer;transition:border-color .15s,transform .15s,box-shadow .15s}
.wm-opt:hover:not(:disabled),.wm-opt:focus-visible{border-color:var(--brand);transform:translateY(-1px);box-shadow:0 0 18px color-mix(in srgb,var(--brand) 25%,transparent);outline:none}
.wm-opt:disabled{cursor:wait;opacity:.55} .wm-opt.busy{opacity:1;border-color:var(--brand)}
.wm-opt img,.wm-opt .wm-ic{width:32px;height:32px;border-radius:8px;flex:none}
.wm-opt .wm-ic{display:grid;place-items:center;background:var(--line);color:var(--ink-2);font-size:16px}
.wm-opt .wm-tag{margin-left:auto;font:500 10px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.wm-opt.busy .wm-tag{color:var(--brand-text-solid)}
.wm-opt.demo{border-style:dashed}
.wm-err{margin:12px 0 0;color:var(--brand);background:var(--brand-sheen-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-size:13px}
.wm-foot{margin:16px 0 0;font-size:12px;line-height:1.5;color:var(--muted)}
@keyframes wmIn{from{opacity:0}to{opacity:1}} @keyframes wmPop{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.wmodal,.wm-card{animation:none}}

/* The fixed base fee and its recipient share one row, stacking on mobile. */
.fee-creator-row{align-items:start;row-gap:10px}
.fee-recipient{min-width:0}
/* the 0% choice gates the recipient (launch.js renderRecipient): the field and its button off, the line saying why kept bright */
.fee-recipient.gated label .req{display:none}
.fee-recipient.gated .recipient-row{opacity:.45}
.fee-recipient.gated .recipient-row input{cursor:not-allowed;text-decoration:line-through}   /* an address typed before 0% was chosen: kept for a later tier, visibly unused */
.fee-creator-row>.recipient-help{grid-column:1/-1;margin:0 0 2px}
.fee-recipient #recipientCheck{overflow-wrap:anywhere}
.fee-recipient #recipientCheck:empty{display:none}
.recipient-row{display:flex;gap:10px;align-items:stretch;flex-wrap:wrap}
.recipient-row input{flex:1 1 300px;min-width:0;font-family:var(--mono)}
.recipient-row .btn{flex:0 0 auto}
.creator-bar .cb-recipient{display:block;overflow-wrap:anywhere;font:500 12px/1.5 var(--mono);margin:8px 0}
.creator-bar .cb-explainer{margin:12px 0 0;padding-top:10px;border-top:1px solid var(--line);font:500 12px/1.5 var(--sans);color:var(--muted)}
@media(max-width:640px){.recipient-row input,.recipient-row .btn{width:100%;flex-basis:100%}}


/* Voting: public totals at the right; the wallet's controls live beneath the mesh. */
.last-vote-details .kv{font-size:11px;flex-wrap:wrap;gap:4px 8px;overflow-wrap:anywhere}
.last-vote-stale{font:400 11px/1.5 var(--sans);color:var(--amber);margin:6px 0 0}
.vote-pool-name{overflow-wrap:anywhere;min-width:0}
.vote-personal>.card-head{flex-wrap:wrap;gap:10px}
.vote-personal .pickrow{flex-wrap:wrap}
.vote-personal .pickrow .pickbar{flex:1 1 180px}
.vote-personal .pickrow .btn{flex:0 0 auto}
.vote-personal-choices{border-top:1px solid var(--line);margin-top:16px}
.vote-personal-choice{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--line);font-size:13px}
.vote-personal-choice>span{overflow-wrap:anywhere;min-width:0}
.vote-personal-choice .chip{flex-shrink:0}
@media(max-width:480px){.vote-personal .pickrow .pickbar{flex-basis:100%}.vote-personal .pickrow .btn{flex:1}}

/* A launchpad's primary action should be unmistakable at first glance. */
.hero .launchpad-actions{display:flex;flex-direction:column;align-items:stretch;gap:16px;margin:30px 0 0}
.hero-launch{display:flex;align-items:center;gap:18px;width:100%;padding:22px 24px;border:2px solid var(--brand-edge,var(--ember));background:var(--brand-sheen-sm);color:var(--brand-ink);box-shadow:var(--brand-bevel,0 0 transparent),5px 5px 0 var(--fire-2),0 10px 46px -12px color-mix(in srgb,var(--fire) 52%,transparent);transition:transform .15s,box-shadow .15s,border-color .15s;isolation:isolate}
.hero-launch:hover{transform:translateY(-2px);border-color:var(--snow);background:var(--brand-sheen-sm-hover);box-shadow:var(--brand-bevel,0 0 transparent),5px 7px 0 var(--fire-2),0 12px 54px -10px color-mix(in srgb,var(--fire) 70%,transparent)}
.hero-launch:active{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--fire-2)}
.hero-launch:focus-visible{outline:3px solid var(--snow);outline-offset:7px}
.hero-launch-mark{display:flex;align-items:center;justify-content:center;flex:none;width:74px;height:74px;border-radius:18px;background:#211b17;border:1px solid color-mix(in srgb,var(--fire-2) 30%,transparent);box-shadow:inset 0 0 18px color-mix(in srgb,var(--fire) 16%,transparent);overflow:hidden}
.hero-launch-mark img{display:block;width:100%;height:100%;object-fit:cover}
.hero-launch-copy{display:flex;flex-direction:column;gap:6px;min-width:0;flex:1}
.hero-launch-kicker{font:700 10px/1.3 var(--mono);text-transform:uppercase;letter-spacing:.14em;color:var(--brand-ink)}
.hero-launch-copy strong{font:900 32px/1.05 var(--sans);letter-spacing:-.035em;font-stretch:112%}
.hero-launch-sub{font:550 12px/1.5 var(--sans);color:var(--brand-ink)}
.hero-launch-arrow{flex:none;transition:transform .15s}
.hero-launch:hover .hero-launch-arrow{transform:translateX(4px)}
.hero-explore{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;color:rgba(255,247,240,.84);font:650 14px/1.5 var(--sans);padding:4px 0;border-bottom:1px solid rgba(255,247,240,.3)}
.hero-explore:hover{color:var(--snow);border-color:var(--snow)}
@media(max-width:480px){.hero .launchpad-actions{margin-top:24px}.hero-launch{gap:12px;padding:18px 14px}.hero-launch-mark{width:50px;height:50px;border-radius:12px}.hero-launch-copy strong{font-size:25px}.hero-launch-kicker{font-size:9px;letter-spacing:.08em}.hero-launch-sub{font-size:11px}.hero-launch-arrow{width:22px;height:22px}}
@media(prefers-reduced-motion:reduce){.hero-launch,.hero-launch-arrow{transition:none}.hero-launch:hover,.hero-launch:active,.hero-launch:hover .hero-launch-arrow{transform:none}}



/* Original deployer trades. DB/DS remain legible without relying on colour alone. */
.dev-trade-legend{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:8px 0 10px;font-size:12px;color:var(--ink-2)}
.dev-trade-legend>span{display:inline-flex;align-items:center;gap:6px}
.dev-trade-key{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;font:800 10px/1 var(--sans);color:#101714}
.dev-trade-buy{background:#27d98a}.dev-trade-sell{background:#ff727e}
.dev-trade-note{font-size:11px;color:var(--ink-3)}
.c-dev{cursor:pointer;outline:none}.c-dev circle{stroke:var(--panel);stroke-width:2px;fill:#27d98a}.c-dev-sell circle{fill:#ff727e}
.c-dev text{fill:#101714;font:800 10px/1 sans-serif;pointer-events:none}.c-dev:focus circle,.c-dev:hover circle{stroke:var(--ink);stroke-width:2.5px}
.tip-dev{border-top:1px solid var(--line);margin-top:8px;padding-top:8px}.tip-dev strong{display:block}.tip-dev-buy{color:var(--mint)}.tip-dev-sell{color:#ff727e}
.dev-trade-history td,.dev-trade-history th{white-space:nowrap}.dev-trade-history td:last-child{font-family:var(--mono)}
/* the holders' DAO pot's list wears the LP mesh green */
.bl-fill.mint{background:var(--mint)}


/* a copy of the launchpad's own coin, marked in coin rows (home, explore table): overnight fork test, 24 Sep */
.coin-name .copy-flag { display: block; color: var(--red); font-weight: 700; font-size: .85em; }

/* a chosen pool whose price is swinging (owner, 24 Sep): a red outline and a soft red glow plus an icon, never colour
   alone, on its chip and its tile, and the note under the tiles. Red is --error, not the brand orange (the main pool's
   tile is brand-coloured). The chip of an unchosen swinging market looks normal: it is selectable. */
.chip.swing{border-color:var(--error);outline:2px solid var(--error);outline-offset:1px;box-shadow:0 0 0 4px color-mix(in srgb,var(--error) 20%,transparent),0 0 16px color-mix(in srgb,var(--error) 55%,transparent)}
.poolseg.swing{outline:2px solid var(--error);outline-offset:1px;box-shadow:0 0 0 4px color-mix(in srgb,var(--error) 20%,transparent),0 0 18px color-mix(in srgb,var(--error) 50%,transparent);position:relative;z-index:1}
.swing-ic{color:var(--error);font-weight:900;margin-right:5px}
.chip[aria-pressed="true"].swing .swing-ic,.poolseg.main.swing .swing-ic{color:var(--error);text-shadow:0 0 1px var(--bg)}
.swing-note{margin:14px 0 4px;padding:14px 16px;border:2px solid var(--error);background:color-mix(in srgb,var(--error) 9%,var(--panel));box-shadow:0 0 18px color-mix(in srgb,var(--error) 25%,transparent)}
.swing-note .swing-item + .swing-item{margin-top:14px;padding-top:14px;border-top:1px solid color-mix(in srgb,var(--error) 35%,transparent)}
.swing-note b{display:block;font:800 15px/1.35 var(--sans);color:var(--ink)}
.swing-note p{margin:6px 0 0;color:var(--ink-2);font-size:14px;line-height:1.5}
.swing-note.ok{border-color:var(--mint);background:color-mix(in srgb,var(--mint) 10%,var(--panel));box-shadow:none}
.swing-note.ok .swing-ic{color:var(--mint)}

/* ============================================================ the Live Tape coin page (owner, 25 Sep)
   The coin's header across the top; under it one grid: the live tape (left), the tabs and their panel (middle), the rail
   (right: trading, the two presses, the vault's pots, the top thesis burners). The tape and the rail stay in view while
   the middle scrolls. Below 1100px the tape folds into a tab of its own; below 760px everything stacks, presses first.
   Sizes are written for the desktop page scale (html zoom .75), like everything else here. */
.term-page{max-width:none;padding:0 clamp(16px,calc(1.8 * var(--vw)),40px)}
.term{display:grid;grid-template-columns:minmax(280px,340px) minmax(0,1fr) minmax(330px,400px);grid-template-rows:auto auto 1fr;border:1px solid var(--line);background:var(--panel);margin:18px 0 12px;align-items:start}
/* the coin's header over the tape and the middle; the rail runs from the very top, so trading sits level with the coin's
   name (owner, 25 Sep: "move the buy button up") */
.term > .term-head{grid-column:1 / span 2;grid-row:1;padding:20px 24px 18px;border-bottom:1px solid var(--line)}
.term-head .coin-top{flex-wrap:nowrap;padding:0;gap:16px}
.term-head .coin-top > div{flex:1 1 auto}
.term-head .coin-top h1{font-size:clamp(28px,calc(2.8 * var(--vw)),46px)}
.term-head .coin-meta{margin-top:8px}
.term > .ltape{grid-column:1;grid-row:2 / span 2}
.term > .tabbar{grid-column:2;grid-row:2}
.term > .tpanel{grid-column:2;grid-row:3}
.term > .term-rail{grid-column:3;grid-row:1 / span 3}
.tpanel{min-width:0;display:flex;flex-direction:column;gap:18px;padding:0 24px 26px}
.tpanel > .card{margin:0}
.mid-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.contracts-card > summary{margin:0;cursor:pointer;list-style:none}
.contracts-card > summary::-webkit-details-marker{display:none}
.contracts-card > summary::after{content:'▾';color:var(--muted);margin-left:auto}
.contracts-card[open] > summary{margin-bottom:14px}
.contracts-card[open] > summary::after{content:'▴'}

/* the tabs: a flat bar, the open one underlined in fire (the coin's numbers moved into the header: terminal-shell.css
   .coin-stats, owner 29 Sep) */
.term > .tabbar{display:flex;flex-direction:row-reverse;justify-content:flex-end;align-items:stretch;flex-wrap:wrap;gap:0 12px;margin:0 0 20px;padding:0 24px;border-bottom:1px solid var(--line);container:tabbar / inline-size}
.tabbar > .ptabs{display:flex;gap:2px;flex:none;max-width:100%;margin:0;padding:0;overflow-x:auto;scrollbar-width:none}
.term .ptab{flex:none;gap:10px;padding:22px 16px 18px;border:0;border-bottom:3px solid transparent;background:transparent;box-shadow:none;transform:none;color:var(--muted);font:800 20px/1 var(--mono);letter-spacing:0}
.term .ptab:hover{transform:none;box-shadow:none;color:var(--ink)}
.term .ptab[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--brand);border-image:var(--brand-outline) 1;box-shadow:none;background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--brand) 12%,transparent))}
.term .ptab i{font-size:12px;color:var(--brand-text-solid)}
.term .ptab .fomo-mark{width:24px;height:24px;margin:0}
.term .ptab-tape{display:none}

/* ---- the live tape */
.ltape{position:sticky;top:88px;height:calc(100 * var(--vh) - 104px);min-height:620px;display:flex;flex-direction:column;min-width:0;border-right:1px solid var(--line);background:var(--bg);overflow:hidden}
.lt-head{display:flex;align-items:center;gap:12px;padding:0 20px;min-height:66px;border-bottom:1px solid var(--line)}
.lt-dot{width:11px;height:11px;flex:none;border-radius:50%;background:var(--mint);box-shadow:0 0 0 5px color-mix(in srgb,var(--mint) 18%,transparent);animation:ltPulse 2.2s ease-in-out infinite}
@keyframes ltPulse{50%{box-shadow:0 0 0 8px color-mix(in srgb,var(--mint) 6%,transparent)}}
.lt-title{margin:0;font:800 17px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase}
.lt-filter{margin-left:auto;display:flex;border:1px solid var(--line-2)}
.lt-filter button{padding:9px 13px;border:0;background:transparent;color:var(--muted);font:700 13px/1 var(--mono);cursor:pointer}
.lt-filter button:hover{color:var(--ink)}
.lt-filter button[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
.lt-hero{display:block;flex:none;padding:18px 20px 20px 15px;border-left:5px solid var(--brand);border-bottom:1px solid var(--line);background:linear-gradient(90deg,color-mix(in srgb,var(--brand) 22%,transparent),transparent 92%);color:inherit;text-decoration:none}
.lt-hero:hover{background-color:var(--panel)}
.lh-cap{display:block;font:700 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--brand-text-solid)}
.lh-who{display:flex;align-items:baseline;gap:10px;margin-top:10px;min-width:0}
.lh-who b{font:900 25px/1.1 var(--sans);font-stretch:108%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lh-who span{font:500 15px/1.3 var(--sans);color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.lh-amt{display:block;margin-top:8px;font:900 54px/1 var(--sans);font-stretch:106%;letter-spacing:-.02em;color:var(--brand);background:var(--brand-sheen-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-variant-numeric:tabular-nums}
.lh-sub{display:block;margin-top:8px;font:500 13px/1.3 var(--mono);color:var(--ink-2)}
.lt-hero.fresh{animation:ltHero 1.2s ease-out}
@keyframes ltHero{0%{background-color:color-mix(in srgb,var(--brand) 45%,transparent)}100%{background-color:transparent}}
.lt-rows{list-style:none;margin:0;padding:0;flex:1 1 auto;min-height:0;overflow-y:auto;scrollbar-width:thin}
.lt-row{display:grid;grid-template-columns:54px 72px minmax(0,1fr) auto;align-items:center;gap:12px;min-height:54px;padding:5px 20px;border-bottom:1px solid var(--line);font:500 15px/1.2 var(--mono);color:inherit;text-decoration:none;
  background:linear-gradient(90deg,var(--lt-tint,transparent) var(--lt-size,0%),transparent var(--lt-size,0%))}
.lt-row:hover{background-color:var(--panel)}
.lt-t{color:var(--muted);font-size:13px;white-space:nowrap}
.lt-chip{padding:5px 0;text-align:center;font:800 13px/1 var(--mono);letter-spacing:.04em;white-space:nowrap}
.lt-what{display:flex;flex-direction:column;gap:4px;min-width:0}
.lt-what b,.lt-what > span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lt-what b{font:700 15px/1.2 var(--mono)}
.lt-what i{font:500 13.5px/1.25 var(--sans);font-style:normal;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lt-v{text-align:right;font-weight:700;white-space:nowrap}
.lt-row.buy{--lt-tint:color-mix(in srgb,var(--up) 13%,transparent)}
.lt-row.buy .lt-chip{background:color-mix(in srgb,var(--up) 20%,transparent);color:var(--up)}
.lt-row.sell{--lt-tint:color-mix(in srgb,var(--down) 15%,transparent)}
.lt-row.sell .lt-chip{background:color-mix(in srgb,var(--down) 22%,transparent);color:var(--down)}
.lt-row.mesh{--lt-tint:color-mix(in srgb,var(--mesh) 10%,transparent)}
.lt-row.mesh .lt-chip{background:color-mix(in srgb,var(--mesh) 22%,transparent);color:var(--mesh)}
/* an arbitrage between the coin's pools: neutral, never a buy or a sale */
.lt-row.arb{min-height:46px;color:var(--ink-2)}
.lt-row.arb .lt-chip{background:var(--panel-2);color:var(--muted);font-size:12px}
.lt-row.burn{min-height:72px;padding-left:15px;border-left:5px solid var(--brand);background:color-mix(in srgb,var(--brand) 10%,var(--bg))}
.lt-row.burn .lt-chip{background:var(--brand-sheen-sm);color:var(--brand-ink)}
.lt-row.burn .lt-v{font:900 24px/1 var(--sans);font-stretch:106%;color:var(--brand);background:var(--brand-sheen-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.lt-row.fresh{animation:ltIn .8s ease-out}
@keyframes ltIn{0%{opacity:0;transform:translateY(-8px);background-color:color-mix(in srgb,var(--ember) 30%,transparent)}40%{opacity:1;transform:none}}
.lt-empty{padding:26px 20px;color:var(--muted);font:500 14px/1.5 var(--sans)}
.lt-foot{flex:none;padding:14px 20px 16px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:8px;font:500 13px/1.2 var(--mono)}
.lt-foot:empty{display:none}
.lf-top{display:flex;justify-content:space-between;gap:12px}
.lf-top span:first-child{letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.lf-bar{display:flex;gap:2px;height:9px}
.lf-bar i{display:block;min-width:2px}
.lf-bar .b{background:var(--up)} .lf-bar .s{background:var(--down)}
.lf-sub{display:flex;justify-content:space-between;color:var(--ink-2);font-size:12px}
@media (prefers-reduced-motion:reduce){.lt-dot,.lt-row.fresh,.lt-hero.fresh{animation:none}}

/* ---- the rail: trading, the two presses, the vault's pots, the top thesis burners */
.term-rail{position:sticky;top:88px;max-height:calc(100 * var(--vh) - 104px);overflow-y:auto;scrollbar-width:thin;min-width:0;display:flex;flex-direction:column;gap:0;border-left:1px solid var(--line)}
.term-rail > .trade-console{border:0;border-radius:0;padding:20px 22px;background:transparent}
.term-rail .trade-entry{min-height:0;padding:16px 0 12px}
.term-rail .trade-console .trade-amount input{font-size:48px}
.term-rail .trade-breakdown{margin-top:14px}
.term-rail .trade-breakdown > summary{cursor:pointer;list-style:none;margin:0}
.term-rail .trade-breakdown > summary::-webkit-details-marker{display:none}
.term-rail .trade-breakdown[open] > summary{margin-bottom:8px}
.term-rail .trade-breakdown #previewSum{font:600 13px/1.3 var(--mono);color:var(--ink)}
/* the presses and the pots lead the rail, in a box of their own that glows (owner, 25 Sep: "just as visible, if not more") */
.term-rail > .firebtn{position:static;width:auto;max-height:none;overflow:visible;z-index:auto;margin:14px 14px 6px;padding:16px;border:1px solid transparent;background:linear-gradient(var(--panel-2),var(--panel-2)) padding-box,var(--brand-outline) border-box;box-shadow:0 0 0 1px color-mix(in srgb,var(--brand) 10%,transparent),0 26px 60px -32px color-mix(in srgb,var(--brand) 60%,transparent);animation:none}
.term-rail > .trade-console{border-top:1px solid var(--line)}
.term-rail .firepot-kv .kv{font-size:13px}
.rail-burners{padding:18px 22px 22px;border-top:1px solid var(--line)}
.rb-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:12px}
.rb-list{display:grid;grid-template-columns:20px minmax(0,1fr) auto;gap:9px 12px;align-items:center;font:500 14px/1.2 var(--mono)}
.rb-list .rb-n{color:var(--muted)}
.rb-list .rb-who{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rb-list .rb-cell{display:flex;align-items:center;gap:6px;min-width:0}.rb-list .rb-cell>.rb-who{min-width:0}.rb-list .rb-x{--fx-size:10px}
/* each burner's picture before their name (owner, 30 Sep); a click opens their profile, as the name does */
.rb-list .trader-avatar-link{flex:none;width:24px;height:24px;padding:0;border:0;background:none;cursor:pointer}.rb-list .trader-avatar-link img{width:24px;height:24px;border-radius:50%;object-fit:cover;display:block}
.th .who .log-x{--fx-size:10px;margin-left:-3px}
/* the rest of a writer's name (owner, 30 Sep evening): the seal, and the @handle after a chosen name, muted */
.log-seal{width:12px;height:12px;flex:none;margin-left:-3px}.trader-profile-link.log-at{color:var(--muted);font-weight:400;flex:none}
.rb-list .rb-v{color:var(--brand);background:var(--brand-sheen-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-weight:800;text-align:right}

/* ---- chart tab: what burned each hour, and the pools by locked depth */
.burn-hours svg{display:block;width:100%;height:auto}
.burn-hours .bh-bar{fill:var(--brand)} .burn-hours .bh-now{fill:var(--brand);opacity:.5}
.burn-hours .bh-base{stroke:var(--line-2);stroke-width:1;shape-rendering:crispEdges}
.burn-hours text{fill:var(--muted);font:500 11px var(--mono)}
.depth-list{display:grid;grid-template-columns:minmax(0,150px) minmax(0,1fr) auto auto;gap:10px 12px;align-items:center;font:500 13.5px/1.2 var(--mono)}
.depth-list .dl-name{display:flex;align-items:center;gap:8px;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.depth-list .dl-name img{width:18px;height:18px;border-radius:50%;flex:none}
.depth-list .dl-track{height:8px;background:var(--panel-2)}
.depth-list .dl-fill{height:100%;background:var(--ink-2)} .depth-list .dl-fill.main{background:var(--ink)}
.depth-list .dl-v{text-align:right} .depth-list .dl-vol{text-align:right;color:var(--muted)}

/* ---- vote tab: the mesh drawn big (the round, Tonight's split and your vote: vote-pot.css, owner 7 Oct 2026 design A) */
.mesh-big{max-width:640px;margin:0 auto}

/* ---- fomo analytics: the post button, and each thesis with what it said */
.fomo-post{display:flex;align-items:center;gap:14px 18px;flex-wrap:wrap;padding:16px 18px;border:1px solid transparent;background:linear-gradient(var(--panel),var(--panel)) padding-box,var(--brand-outline) border-box}
.fomo-post .fomo-go{gap:10px;padding:14px 20px;font-size:16px}
.fomo-post .fomo-go .fomo-mark{width:24px;height:24px;margin:0}
.fomo-post .fp-line{flex:1 1 240px;font:500 14px/1.4 var(--sans);color:var(--ink-2)}
.term .th p.said{margin:6px 0 0;font:700 18px/1.3 var(--sans);color:var(--ink);overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.term .th .burnbar{max-width:none}
.more-link{display:inline-block;margin-top:12px;font:500 12px/1 var(--mono);color:var(--muted);text-decoration:none}
.more-link:hover{color:var(--ink)}

/* ---- narrower windows: the tape becomes a tab of its own */
@media (max-width:1099.98px){
  .term{grid-template-columns:minmax(0,1fr) minmax(300px,380px)}
  .term > .term-head{grid-column:1;padding:16px 16px 14px}
  .term > .ltape{display:none;grid-column:1;grid-row:3;position:static;height:auto;min-height:0;max-height:none;border-right:0}
  .term[data-tab="tape"] > .ltape{display:flex}
  .term[data-tab="tape"] .lt-rows{max-height:none;overflow:visible}
  .term > .tabbar,.term > .tpanel{grid-column:1}
  .term > .term-rail{grid-column:2}
  .term .ptab-tape{display:inline-flex}
  .term > .tabbar{padding:0 12px}
  .term .ptab{padding:18px 12px 15px;font-size:16px;gap:7px}
  .term .ptab .fomo-mark{width:20px;height:20px}
  .mid-pair{grid-template-columns:1fr}
}
/* phones: one column. The header, the coin's numbers, trading right under them (owner, 25 Sep: the buy box up on phones
   too), the presses, then the tabs and their panel */
@media (max-width:759.98px){
  .term-page{padding:0 12px}
  .term{grid-template-columns:minmax(0,1fr);grid-template-rows:none;border-left:0;border-right:0;margin-top:12px}
  .term > .term-head{padding:14px 10px 12px}
  .term-head .coin-top{align-items:flex-start;gap:12px}
  .term-head .coin-ico.lg{width:48px;height:48px}
  .term > .term-rail,.term > .tabbar{display:contents}
  .term > *,.term-rail > *,.tabbar > *{grid-column:1 !important;grid-row:auto !important}
  .term-rail > .trade-console{order:1;border-bottom:1px solid var(--line)}
  .term-rail > .firebtn{order:2;margin:12px 0}
  .tabbar > .ptabs{order:3;padding:0 8px;margin-bottom:14px;border-bottom:1px solid var(--line)}
  .term > .tpanel,.term > .ltape{order:4}
  .term-rail > .rail-burners{order:5}
  .tpanel{padding:0 10px 20px}
  .term .ptab{padding:16px 12px 13px;font-size:15px}
  .term .ptab i{display:none}
  .lt-row{grid-template-columns:44px 60px minmax(0,1fr) auto;padding:5px 12px;font-size:13.5px}
  .lh-amt{font-size:40px}
}

:root[data-theme="light"] .lh-cap{color:var(--brand-deep)}
:root[data-theme="light"] .lt-dot{background:var(--mint)}

/* the notice for a wallet action whose outcome isn't known yet: the last thing in the toast stack, so toasts land above
   it, never behind it (owner, 25 Sep) */
.toasts .tx-recovery{order:99;margin:0;padding:16px 18px;border:2px solid transparent;box-shadow:4px 4px 0 var(--brand-deep);background:linear-gradient(var(--panel),var(--panel)) padding-box,var(--brand-outline) border-box}
.tx-recovery p{margin:0 0 12px;font:500 14px/1.45 var(--sans);color:var(--ink)}
.tx-recovery a{display:inline-block;margin:0 0 12px;font:500 13px/1 var(--mono);color:var(--brand);background:var(--brand-sheen-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.tx-recovery-actions{display:flex;gap:8px;flex-wrap:wrap}

/* the vote tab's mesh box (owner, 29 Sep, design A "Mesh banner on top"): its layout lives in vote-pot.css */
.mesh-card .mesh-big{max-width:none}

/* the mesh, "Flow" (owner, 25 Sep): the dark room in both themes; light runs along each spoke into the coin, the coin's
   and the pools' glows beat */
.mesh-flow{position:relative;overflow:hidden}
.mesh-flow svg{display:block;overflow:hidden}
/* the mesh's sparks: each line carries its own dash pattern (charts.js) and moves one whole pattern per beat */
.mf-run{stroke-linecap:round;animation:mfRun 1.4s linear infinite}
@keyframes mfRun{to{stroke-dashoffset:var(--mf-to,-40px)}}
.mf-beat{transform-box:fill-box;transform-origin:center;animation:mfBeat 2.6s ease-in-out infinite}
@keyframes mfBeat{0%,100%{transform:scale(1);opacity:.5}50%{transform:scale(1.18);opacity:.18}}
.mf-vol{fill:color-mix(in srgb,var(--fire) 45%,var(--ember));font-family:var(--mono);font-weight:700}
.mf-name{fill:#f7efe6;font-family:var(--mono);font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.mf-depth{fill:color-mix(in srgb,var(--fire) 45%,var(--ember));font-family:var(--mono)}
.mf-cap{fill:#9a8f83;font-family:var(--mono);letter-spacing:.08em;text-transform:uppercase}
/* the mesh's total liquidity locked (top left of the drawing): the metal, as the logo */
.mf-total{fill:url(#fable-bronze) #ebb97a;font-family:var(--mono);font-weight:800;letter-spacing:.02em}
/* the constellation's names sit over spokes: a dark edge keeps them legible */
.mesh-flow .mf-name,.mesh-flow .mf-depth,.mesh-flow .mf-cap{paint-order:stroke;stroke:#0b0807;stroke-width:3.5px;stroke-linejoin:round}
.mesh-flow .m-node{cursor:default;outline:none}
.mesh-flow .m-node:hover .mf-ring,.mesh-flow .m-node:focus .mf-ring{stroke:#fff}
@media (prefers-reduced-motion:reduce){.mf-run,.mf-beat{animation:none}}

/* the buy console (owner, 25 Sep: "more black themed with orange outlining for the buy buttons"): black, the chosen side
   and the action outlined in the fire's orange (a sale's in red), the presets plain */
.term-rail .trade-console,:root[data-theme="light"] .term-rail .trade-console{--trade-accent:var(--brand);--trade-accent-ink:var(--brand)}
.term-rail .trade-console:has(#sideSell[aria-pressed="true"]),:root[data-theme="light"] .term-rail .trade-console:has(#sideSell[aria-pressed="true"]){--trade-accent:var(--down);--trade-accent-ink:var(--down)}
.term-rail .trade-console .trade-sides{border:1px solid var(--line-2);padding:3px;gap:3px}
.term-rail .trade-console .trade-sides button{min-height:42px;border-radius:0;color:var(--muted);background:transparent}
.term-rail .trade-console .trade-sides button[aria-pressed="true"],.term-rail .trade-console .trade-sides button[aria-pressed="true"]:hover:not(:disabled){background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px var(--trade-accent)}
/* the chosen Buy side keeps its outline, drawn in the Buy press's own metal (a sale's stays red) */
.term-rail .trade-console:not(:has(#sideSell[aria-pressed="true"])) .trade-sides button[aria-pressed="true"]{position:relative;box-shadow:none}
.term-rail .trade-console:not(:has(#sideSell[aria-pressed="true"])) .trade-sides button[aria-pressed="true"]::after{content:'';position:absolute;inset:0;padding:2px;background:var(--brand-outline);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.term-rail .trade-console .trade-action{border-radius:0;background:transparent;color:var(--trade-accent);box-shadow:inset 0 0 0 2px var(--trade-accent);font-weight:800}
.term-rail .trade-console .trade-action:hover:not(:disabled){background:var(--trade-accent);color:var(--bg)}
.term-rail .trade-console .trade-action:active:not(:disabled){background:color-mix(in srgb,var(--trade-accent) 80%,black);color:var(--bg)}
.term-rail .trade-console .trade-action:disabled{background:transparent;color:var(--muted);box-shadow:inset 0 0 0 1px var(--line-2)}
/* the buy press itself is polished metal (owner, 29 Sep: "a beautiful shiny bronze colour like the logo"; 30 Sep: the
   chocolate chrome, its streaks at the two ends so the cream label sits on the dark band); a sale keeps its red outline */
.term-rail .trade-console:not(:has(#sideSell[aria-pressed="true"])) .trade-action:not(:disabled){background:var(--brand-sheen-btn);color:var(--brand-ink);text-shadow:var(--brand-ink-shadow);box-shadow:var(--brand-bevel,0 0 transparent)}
.term-rail .trade-console:not(:has(#sideSell[aria-pressed="true"])) .trade-action:hover:not(:disabled){background:var(--brand-sheen-btn-hover);color:var(--brand-ink)}
.term-rail .trade-console:not(:has(#sideSell[aria-pressed="true"])) .trade-action:active:not(:disabled){background:var(--brand-sheen-btn);color:var(--brand-ink);box-shadow:inset 0 2px 7px color-mix(in srgb,var(--brand-deep) 70%,transparent)}
.term-rail .trade-console .trade-presets button{border-radius:0;border:1px solid var(--line-2);background:transparent;color:var(--ink-2)}
.term-rail .trade-console .trade-presets button:hover:not(:disabled){border-color:var(--trade-accent);background:transparent;color:var(--ink)}
/* the price as candles: green up, red down, a dashed line and a tag at the last price */
.c-candle{stroke-width:1}
.c-candle.up{fill:var(--up);stroke:var(--up)} .c-candle.down{fill:var(--down);stroke:var(--down)}
.c-candle.wick{fill:none;stroke-width:1.2}
.c-last{stroke:var(--muted);stroke-width:1;stroke-dasharray:3 4}
.c-last-tag{fill:var(--ink)} .c-last-text{fill:var(--bg);font:700 10.5px var(--mono)}
.key.candle{width:10px;height:12px;background:linear-gradient(90deg,var(--up) 50%,var(--down) 50%);border-radius:1px}
/* the tape at its narrower width (owner, 25 Sep: "the sides should take up less space"): one line for its title, its
   latest burn and each row */
.lt-head{padding:0 16px;gap:10px;min-height:60px}
.lt-title{font-size:15px;letter-spacing:.12em;white-space:nowrap}
.lt-filter button{padding:7px 9px;font-size:12px}
.lt-hero{padding:16px 16px 18px 12px}
.lh-who b{font-size:22px}
.lh-amt{font-size:42px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lt-row{grid-template-columns:44px 66px minmax(0,1fr) auto;gap:10px;padding:5px 16px;font-size:14px}
.lt-row.burn{padding-left:11px}
.lt-chip{font-size:12px}
.lt-what b{font-size:14px} .lt-what i{font-size:12.5px}
.lt-row.burn .lt-v{font-size:21px}
.lt-foot{padding:12px 16px 14px}

/* the holders' DAO pot and its LP mesh press in their own blue (owner, 25 Sep) */
.bl-fill.mesh{background:var(--mesh)}
.tag.mesh{border-color:var(--mesh);color:var(--mesh)}
:root[data-theme="light"] .firebtn .fb.mesh:not(:disabled){color:#fff}

/* ---- 25 Sep, the owner's second pass */
/* titles are titles: bright, never greyed ("TODAY'S STANDINGS is not even noticeable") */
.term .card-title{color:var(--ink);font:800 13px/1.2 var(--mono);letter-spacing:.14em}
/* the tape, small: a picture for each row (🔥 a burn, a thesis writer's fomo photo, 💧 the pot, ▲ a buy, ▼ a sale, ⇄ an
   arbitrage) says what it is, so the rows can be one short line */
.lt-head{min-height:52px;padding:0 14px}
.lt-hero{padding:12px 14px 14px 11px;border-left-width:3px}
.lh-cap{font-size:11px}
.lh-who{display:flex;align-items:center;gap:10px;margin-top:9px;min-width:0}
.lh-who b{font:900 18px/1.15 var(--sans);font-stretch:106%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:none;max-width:60%}
.lh-who .lh-q{font:500 13px/1.3 var(--sans);color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.lh-amt{margin-top:8px;font-size:34px}
.lh-sub{margin-top:6px;font-size:12px}
.lt-row{grid-template-columns:34px 24px minmax(0,1fr) auto;gap:9px;min-height:34px;padding:3px 14px;font:500 13px/1.2 var(--mono)}
.lt-row.burn{min-height:36px;padding-left:11px;border-left-width:3px}
.lt-t{font-size:11.5px}
.lt-ico{width:22px;height:22px;flex:none;border-radius:50%;display:grid;place-items:center;overflow:hidden;font:700 11px/1 var(--sans)}
.lt-ico img{width:100%;height:100%;object-fit:cover;display:block}
.lt-ico.big{width:30px;height:30px;font-size:15px}
.lt-ico.burn{background:color-mix(in srgb,var(--brand) 24%,transparent);font-size:12px}
.lt-ico.big.burn{font-size:16px}
.lt-ico.pfp{background:none;box-shadow:0 0 0 2px var(--brand)}
.lt-ico.mesh{background:color-mix(in srgb,var(--mesh) 26%,transparent);font-size:12px}
.lt-ico.buy{background:color-mix(in srgb,var(--up) 20%,transparent);color:var(--up);font-size:9px}
.lt-ico.sell{background:color-mix(in srgb,var(--down) 22%,transparent);color:var(--down);font-size:9px}
/* an arbitrage: purple (owner, 25 Sep: "make the arb colour purple instead of grey") */
.lt-ico.arb{background:color-mix(in srgb,var(--arb) 22%,transparent);color:var(--arb)}
.lt-what{display:flex;align-items:baseline;gap:6px;min-width:0;overflow:hidden;white-space:nowrap}
.lt-what b{font:700 13px/1.2 var(--mono);flex:none;max-width:62%;overflow:hidden;text-overflow:ellipsis}
.lt-what i{font:500 12px/1.2 var(--sans);font-style:normal;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;min-width:0}
.lt-what > span{overflow:hidden;text-overflow:ellipsis}
.lt-v{font-size:13px}
.lt-row.burn .lt-v{font:900 16px/1 var(--sans);font-stretch:106%}
.lt-row.mesh{--lt-tint:transparent}
.lt-foot{gap:6px;padding:10px 14px 12px;font-size:11.5px}
.lf-top{align-items:baseline;white-space:nowrap} .lf-top span:last-child{overflow:hidden;text-overflow:ellipsis}
.lf-sub{font-size:11px}
/* the buy console, compact, first in the rail (owner: "I didn't even notice there was a buy button here anymore") */
.term-rail > .trade-console{border-top:0;padding:16px 16px 14px}
.term-rail .trade-entry{padding:10px 0 6px}
.term-rail .trade-amount-label{display:none}
.term-rail .trade-console .trade-amount input{font-size:40px;padding:4px 0}
.term-rail .trade-console .trade-sides button{min-height:38px}
.term-rail .trade-console .trade-action{min-height:48px;padding:12px 14px;font-size:16px}
.term-rail .trade-console .trade-presets{margin-top:10px}
.term-rail .trade-console .trade-presets button{min-height:30px;padding:5px 3px}
.term-rail .trade-protection{margin:0 0 10px}
.term-rail .trade-breakdown{margin-top:10px}
.term-rail > .firebtn{margin-top:4px}
@media (max-width:759.98px){.term-rail > .trade-console{order:1;padding:14px 10px 12px}}
.lt-what b:only-child{max-width:none}

/* the contracts, one to a row: name and what it can never do, the address and the explorer on the right */
.contracts-list{display:flex;flex-direction:column}
.ct-row{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:13px 0;border-bottom:1px solid var(--line)}
.ct-row:last-child{border-bottom:0}
.ct-left{min-width:0;display:flex;flex-direction:column;gap:4px}
.ct-left b{font:800 15px/1.2 var(--sans);font-stretch:104%}
.ct-what{margin:0;font:500 13px/1.45 var(--sans);color:var(--ink-2)}
.ct-right{flex:none;display:flex;align-items:center;gap:12px}
.ct-ex{font:500 12px/1 var(--mono);color:var(--muted);text-decoration:none}
.ct-ex:hover{color:var(--brand);background:var(--brand-sheen-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
/* opening a folded box never selects its text */
.contracts-card > summary{user-select:none;-webkit-user-select:none}
@media (max-width:759.98px){.ct-row{flex-direction:column;align-items:flex-start;gap:8px}}

/* the chart's keys and marks, sleek (owner, 25 Sep): small drawn icons in the legend, the same marks on the chart */
.legend{gap:18px;font:500 12.5px/1 var(--sans);color:var(--ink-2)}
.legend .lg{width:15px;height:15px;flex:none;overflow:visible}
.lg-up{fill:var(--up);stroke:var(--up);stroke-width:1.2} .lg-down{fill:var(--down);stroke:var(--down);stroke-width:1.2}
.lg-burn{fill:var(--brand)} .lg-burn-ring{fill:var(--brand);opacity:.25}
.lg-line{fill:none;stroke:var(--brand);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.lg-bar{fill:var(--bar)}
.c-burn-dot{fill:var(--brand);stroke:var(--bg);stroke-width:1.2} .c-burn-ring{fill:var(--brand);opacity:.22}
.dev-trade-legend{gap:18px;margin:4px 0 10px;font:500 12.5px/1 var(--sans)}
.dev-trade-legend .dev-key{flex:none;overflow:visible}
.dev-trade-note{font:500 11.5px/1 var(--sans);color:var(--muted)}
.c-dev{cursor:pointer;outline:none}
.c-dev .c-dev-box,.dev-key .c-dev-box{fill:color-mix(in srgb,var(--up) 18%,var(--bg));stroke:var(--up);stroke-width:1.4}
.c-dev .c-dev-arrow,.dev-key .c-dev-arrow{fill:var(--up)}
.c-dev-sell .c-dev-box{fill:color-mix(in srgb,var(--down) 18%,var(--bg));stroke:var(--down)}
.c-dev-sell .c-dev-arrow{fill:var(--down)}
.c-dev:hover .c-dev-box,.c-dev:focus .c-dev-box{stroke:var(--ink);stroke-width:1.8}
.c-dev-stem{stroke:var(--up);stroke-width:1;stroke-dasharray:2 3;opacity:.7} .c-dev-stem-sell{stroke:var(--down)}
.c-dev-n{fill:var(--ink-2);font:700 10px var(--mono)}
.c-dev circle,.c-dev text:not(.c-dev-n){display:none}

/* slippage: one small box, 1% to start, typed (0.1% to 10%) */
.slip-row{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap;margin:0 0 10px}
.slip-label{font:500 12px/1 var(--sans);color:var(--ink-2)}
.slip-box{display:inline-flex;align-items:center;gap:3px;height:30px;padding:0 8px;border:1px solid var(--line-2);background:var(--bg)}
.slip-box:focus-within{border-color:var(--brand)}
.slip-box input{width:3.4em;border:0;padding:0;background:transparent;color:var(--ink);font:700 13px/1 var(--mono);text-align:right;outline:none}
.slip-box span{font:600 12px/1 var(--mono);color:var(--muted)}
.slip-note{flex-basis:100%;margin:4px 0 0;font:500 12px/1.4 var(--sans);color:var(--down);text-align:right}

/* the mesh's $MOFO ball: its flames are drawn under the spokes (charts.js), so the overlay shows the ball and eyes only */
/* the brand's case (brand.json "case"): mofo writes these all lowercase; Bruno writes its words in sentence case, as
   they are written (owner, 26 Sep: "since bruno now has a capital B ... we should use more capital letters") */
:root[data-case="lower"] :is(h1,h2,h3,.btn,.brand,.nav a,.wallet[data-on="false"],.chip,.view button,.ptab,.seg button){text-transform:lowercase}
/* the sign-out prompt names the signed-in person (owner, 6 Oct): their picture beside "Sign out @handle?" */
.dc-card h3.dc-who{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.dc-card .dc-av{width:40px;height:40px;border-radius:50%;object-fit:cover;flex:none;box-shadow:0 0 0 2px var(--brand)}