/* GhostFi Vapour: additions to the kit (ghostfi.css stays byte-identical). Kit tokens only. */

/* headings never leave a widow */
.v h1,.v h2,.v h3{text-wrap:balance}

/* visually hidden, still read */
.v .vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* native dialogs carry the kit overlays: reset the UA box, the kit .ov stays the visible backdrop */
dialog.v.ovl{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;color:inherit}
dialog.v.ovl::backdrop{background:transparent}
dialog.v.ovl:not([open]){display:none}
.v.ovl.menu .mwrap{width:100%}
.v.ovl.menu .mbody{gap:20px;padding-top:8px}

/* inside the Telegram Mini App the "open the bot" links point at the app itself.
   html.tg-app, not html.in-telegram: the SDK sets the latter in every browser (core.js) */
html.tg-app .v .tg-out{display:none}

/* skip link (main's), kit button, visible on focus only */
.v .skip{position:absolute;left:16px;top:-80px;z-index:20}
.v .skip:focus{top:12px}

/* converter: the address fields are textareas that grow and wrap, never an ellipsis (house rule) */
.v .fld.addr{height:auto;min-height:54px;padding-block:12px}
.v .fld textarea.in{flex:1;display:block;min-width:0;width:100%;margin:0;padding:0;background:transparent;border:0;outline:0;resize:none;overflow:hidden;
  font:400 14px/1.45 var(--fm);color:var(--fg);overflow-wrap:anywhere;word-break:break-all;field-sizing:content;min-height:1.45em}
.v .fld textarea.in::placeholder{color:var(--mu)}
.v .fld textarea.in[readonly]{color:var(--tx)}
.v .row .note.soft{color:var(--yel)}
.v .rtag{margin-left:8px;color:var(--yel)}
.v .fld .amt.calc[aria-busy=true]{opacity:.55}
.v .quote b{white-space:normal;overflow-wrap:anywhere;text-overflow:clip}
/* quote above the phone layout: Rate and Minimum side by side, Fee on a full-width row (the fee string grows
   with relay and in-fees, no column split holds it). Phones keep the kit's 3 stacked rows (Iris QA P1 #2) */
@media (min-width:561px){
  .v .quote{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"rate min" "fee fee"}
  .v .quote>div:nth-child(1){grid-area:rate}
  .v .quote>div:nth-child(2){grid-area:fee}
  .v .quote>div:nth-child(3){grid-area:min}
}
.v .cv .qmsg:empty{display:none}
.v .swapb[aria-disabled=true]{opacity:.45;cursor:not-allowed}
.v .swapb[aria-disabled=true]:hover{transform:none;background:#1A1B2A}
.v .pick[aria-disabled=true]{cursor:not-allowed}
.v .btn:disabled{opacity:.7;cursor:progress}
.v .alertbox code{display:block;margin-top:6px;font-size:12px;color:var(--tx);overflow-wrap:anywhere}
.v .demo-tag{justify-self:center;font:500 11px var(--fm);letter-spacing:.1em;text-transform:uppercase;color:var(--yel)}

/* AA on meaningful hints (Iris QA P1 #9): the kit's #4F5478 placeholder is 2.6:1 on a field and carries the format
   hint, so placeholders use --mu (5.2:1); the chain line in the pills and picker rows mixes --mu toward --tx (>= 4.9:1
   on --p2, nested panel included). Kit file untouched. The chat widget sits outside .v and uses the literal above */
.v input::placeholder,.v .fld .amt::placeholder,.v .srch input::placeholder{color:var(--mu)}
.v .fld.addr code:empty::before{color:var(--mu)}
.v .pick .net,.v .plist div>span{color:color-mix(in srgb,var(--mu) 60%,var(--tx))}

/* picker: keyboard / pointer active row (mint = focus in the kit), rows taken by the other side */
.v .plist a{cursor:pointer}
.v .plist a.active{background:var(--p2)}
/* the mint ring marks the keyboard row only: after an arrow / page / home-end key (convert.js sets data-input="kbd").
   Opened or moved with a pointer, the selected row shows the kit's fill only (Iris P2-11) */
#picker[data-input="kbd"] .plist a.active{box-shadow:inset 0 0 0 1px rgba(122,240,224,.45)}
.v .plist a[aria-disabled=true]{opacity:.45;cursor:not-allowed}
/* the kit --mu on the highlighted row background is 4.23:1 (axe): lift the chain line to --tx there */
.v .plist a.active div>span,.v .plist a.on div>span,.v .plist a:hover div>span,
.v .plist a.active .min,.v .plist a:hover .min{color:var(--tx)}   /* "receive only" on a highlighted row was 4.23:1 */
.v .srch .pclear{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;color:var(--mu)}
.v .srch .pclear:hover{color:var(--fg);background:var(--p2)}
.v .srch:focus-within{border-color:rgba(122,240,224,.55)}
.v .pempty{display:grid;gap:6px;justify-items:start;padding:12px 6px;color:var(--fg)}
.v .sheet .pnote:empty{display:none}

/* Telegram Mini App: no segment (the visitor is in Telegram already), the web form only */
html.tg-app .v .seg,html.tg-app .v #tgCard{display:none}

/* home: the chain strip keeps its height until the live list answers (no layout shift), referrals "Coming soon" */
.v .hc .chains{min-height:64px}
/* the live list wraps 9 chips to 141 px on phones and 100 px on mid widths: reserve it, so the form below does not
   jump when convert.js fills the strip (Swift P1-1, home CLS 0.058 -> 0.001). Above 900 px the form has its own column */
@media (max-width:560px){.v .hc .chains{min-height:141px}}
@media (min-width:561px) and (max-width:900px){.v .hc .chains{min-height:100px}}
.v .hc .chains[data-pending]{visibility:hidden}
.v .panel .ph{display:flex;align-items:center;gap:10px;flex-wrap:wrap}

/* toasts: the kit .v.tst root carries no page background; the detail line wraps (full address, house rule) */
.v.tst{min-height:0;background:transparent;overflow:visible;pointer-events:none}
.v .toast span{white-space:normal;overflow-wrap:anywhere;word-break:break-all}

/* order page while loading (no tx table and no not-found block yet): the grid fills the viewport so the footer stays
   below the fold until the order lands. Steps and note start hidden in order.html, order.js shows them. Scoped to the
   loading state so a short final view (not found) gets no tall gap. Swift P1-2, order CLS 0.815 -> 0.003 */
.v .ord{align-content:start}
.v .ord:has(#oTx[hidden]):has(#oNf[hidden]){min-height:100svh}
/* order page: ids, hashes and addresses wrap in full, never an ellipsis */
.v .okick{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;overflow-wrap:anywhere;word-break:break-all}
.v .idcopy{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;color:var(--mu);border:1px solid var(--ln)}
.v .idcopy:hover{color:var(--fg);background:var(--p2)}
.v .idcopy:focus-visible{outline:0;box-shadow:var(--ring)}
.v .tx em,.v .out span,.v .oh p{overflow-wrap:anywhere}
.v .tx .hash{word-break:break-all}
.v .tx em a{max-width:100%}
.v .tx .rcode{display:block;width:100%;font-size:11.5px;color:var(--mu)}
.v .ostatus{color:var(--tx);font-size:14px;padding:0}
.v .dep .qr{cursor:default}
.v code.addr .g,.v .tx .hash .g{display:inline;margin:0}
.v code.addr .g:nth-child(even),.v .tx .hash .g:nth-child(even){opacity:.62}
/* tx values: one inline flow per cell, hashes grouped like addresses, the last group + icon + amount never split,
   links in mint (the kit's .tx span label colour must not reach the value), Iris QA P1 #6 */
.v .tx em .txv{display:block;min-width:0;max-width:100%;color:var(--tx)}
.v .tx em .txv span{color:inherit}
.v .tx em .txv a{display:inline;color:var(--mint)}
.v .tx em .txv a .ic{display:inline-block;vertical-align:-1px}
.v .tx .hash .tail{white-space:nowrap}
.v .tx .hash .tail .g{margin-right:0}
.v .tx .sfx{white-space:nowrap}
.v .alertbox b{color:var(--fg)}

/* referrals: "Coming soon" sits in the h1 block (truth rules), code field, messages, full wallet */
.v .ph1 .h1row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
/* points: the kit "Coming soon" pill beside the kicker (Keeper final, p.badge), same pill as referrals */
.v .ph1 .kickrow{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.v .codebox .fld .in{flex:1;min-width:0;background:transparent;border:0;outline:0;padding:0;font:400 15px var(--fm);color:var(--fg)}
.v .codebox .fld .in::placeholder{color:var(--mu)}
.v .codebox .fld code{white-space:normal;overflow-wrap:anywhere;text-overflow:clip}
.v .codebox code.addr{font-size:13px}
.v .codebox .btn:disabled,.v .sec .btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}
.v .rmsg{font-size:13.5px;color:var(--tx);overflow-wrap:anywhere}
.v .rmsg:empty{display:none}
.v .rmsg.err{color:var(--red)}
.v .rmsg.ok{color:var(--mint)}
.v .rmsg a{color:var(--mint);text-decoration:underline;text-underline-offset:3px}
/* tile values are spans inside b: the kit's .tile span (label style) must not reach them (Iris QA P1 #3) */
.v .tile b>span{font:inherit;color:inherit;letter-spacing:inherit}

/* support chat widget (support-chat.js). It lives outside .v, so kit token values are written as literals:
   --bg #0B0C14, sheet #13141F, swap #1A1B2A, --ln rgba(255,255,255,.11), --fg #F3F4FF, --tx #BDC2E6, --mu #7E84AD,
   --lav #B9A7FF, --mint #7AF0E0, --r 22px, --fb Inter. Motion: transform/opacity only, 160 ms, gated by hover/pointer. */
#gfsw-launcher{position:fixed;right:max(18px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom));
  width:56px;height:56px;border-radius:50%;background:linear-gradient(180deg,#CBBDFF,#B9A7FF 55%,#A796FF);border:1px solid #C4B7FF;cursor:pointer;
  display:grid;place-items:center;box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 8px 24px rgba(185,167,255,.28);z-index:40;padding:0;
  transition:transform 160ms cubic-bezier(.23,1,.32,1),opacity 160ms cubic-bezier(.23,1,.32,1),visibility 0s linear 0s}
#gfsw-launcher svg{width:24px;height:24px;display:block}
#gfsw-launcher:focus-visible{outline:0;box-shadow:0 0 0 3px rgba(122,240,224,.35),0 8px 24px rgba(185,167,255,.28)}
#gfsw-launcher:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){ #gfsw-launcher:hover{transform:scale(1.05)} }
html.gfsw-yield #gfsw-launcher{transform:translateY(calc(100% + 24px));opacity:0;visibility:hidden;pointer-events:none;
  transition:transform 160ms cubic-bezier(.23,1,.32,1),opacity 160ms cubic-bezier(.23,1,.32,1),visibility 0s linear 160ms}
html.picker-open #gfsw-launcher,html.ov-open #gfsw-launcher{visibility:hidden}
#gfsw-panel{position:fixed;right:max(18px,env(safe-area-inset-right));bottom:max(84px,calc(env(safe-area-inset-bottom) + 84px));width:350px;height:470px;
  background:#13141F;border:1px solid rgba(255,255,255,.18);border-radius:22px;font:400 14px/1.5 'Inter',sans-serif;color:#F3F4FF;
  display:none;flex-direction:column;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.6);z-index:41}
#gfsw-panel.gfsw-open{display:flex}
#gfsw-head{display:flex;align-items:center;justify-content:space-between;padding:13px 15px;border-bottom:1px solid rgba(255,255,255,.11);background:#1A1B2A;flex:none}
#gfsw-head span{font:700 15px 'Sora',sans-serif;color:#F3F4FF}
#gfsw-close{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.11);color:#F3F4FF;cursor:pointer;padding:0}
#gfsw-close:focus-visible,#gfsw-go:focus-visible,#gfsw-in:focus-visible{outline:0;box-shadow:0 0 0 3px rgba(122,240,224,.35)}
#gfsw-msgs{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:9px}
.gfsw-row{display:flex}
.gfsw-row.gfsw-user{justify-content:flex-end}
.gfsw-bub{max-width:82%;padding:9px 12px;border-radius:14px;font-size:13.5px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}
.gfsw-user .gfsw-bub{background:rgba(185,167,255,.16);border:1px solid rgba(185,167,255,.4);color:#F3F4FF;border-bottom-right-radius:4px}
.gfsw-bot .gfsw-bub{background:#1A1B2A;border:1px solid rgba(255,255,255,.11);color:#BDC2E6;border-bottom-left-radius:4px}
.gfsw-typing span{display:inline-block;width:5px;height:5px;margin:0 1px;border-radius:50%;background:#7E84AD;animation:gfsw-blink 1.1s infinite ease-in-out}
.gfsw-typing span:nth-child(2){animation-delay:.15s}
.gfsw-typing span:nth-child(3){animation-delay:.3s}
@keyframes gfsw-blink{0%,80%,100%{opacity:.25}40%{opacity:1}}
.gfsw-contact-lab{font-size:12px;color:#7E84AD;margin-bottom:5px}
.gfsw-contact-row{display:flex;gap:6px}
.gfsw-contact-row input,#gfsw-in{flex:1;min-width:0;background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.11);border-radius:12px;color:#F3F4FF;font:400 13.5px 'Inter',sans-serif;padding:10px 12px;outline:none}
.gfsw-contact-row input:focus,#gfsw-in:focus{border-color:rgba(122,240,224,.55)}
#gfsw-in::placeholder,.gfsw-contact-row input::placeholder{color:#7E84AD}
.gfsw-contact-row button,#gfsw-go{background:linear-gradient(180deg,#CBBDFF,#B9A7FF 55%,#A796FF);border:1px solid #C4B7FF;border-radius:999px;color:#0B0C14;font:600 13px 'Inter',sans-serif;padding:0 14px;cursor:pointer;flex:none}
.gfsw-contact-row button:disabled,#gfsw-go:disabled{opacity:.5;cursor:not-allowed}
#gfsw-foot{display:flex;gap:8px;padding:11px;border-top:1px solid rgba(255,255,255,.11);flex:none}
@media (max-width:480px){ #gfsw-panel{left:10px;right:10px;bottom:10px;top:10px;width:auto;height:auto} }
@media (prefers-reduced-motion:reduce){ #gfsw-launcher,html.gfsw-yield #gfsw-launcher{transition:none} .gfsw-typing span{animation:none;opacity:.6} }
/* the launcher never sits on the last footer links: 18 + 56 + 16 px of air below them on phones */
@media (max-width:760px){ .v .foot{padding-bottom:calc(40px + 50px)} }

/* footer links on phones: a 3-column grid, so "X" never wraps alone onto its own line (Iris QA P2 #13) */
@media (max-width:560px){ .v .fl{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:12px 20px} }

/* notes and subs never end on a lone word ("sign.", "an investment."), Iris QA P2 #14 */
.v .note,.v .sub,.v #oNote{text-wrap:pretty}
.v .signin p{text-wrap:balance}   /* short centred lines: even lengths read better than a long line + a short one */

/* points: the action row sits centred inside the centred card on phones (Iris QA P2 #16) */
.v .signin .sb{justify-content:center}

/* phones: a smaller support launcher covers less of the right column (Iris QA P2 #18). The yield behaviour is unchanged */
@media (max-width:560px){ #gfsw-launcher{width:48px;height:48px} #gfsw-launcher svg{width:22px;height:22px} }

/* AA on the ambient glow (Aegis P1-1, WCAG 1.4.3). The blobs drift under the order column and the hero, and their
   unblurred core composites to #475468 under glass, where --mu (#7E84AD) drops to 2.1:1 and even --tx to 4.39:1.
   --tx-glow is --tx lifted 20% toward --fg (#C8CCEB): 4.86:1 on that core, 10:1 on the card. Used where text crosses the
   glow (timeline lines and waiting titles, hero chips). Elsewhere on the order page every muted line (tx labels, refund
   code, hashes, deposit label, amount sub, note) reads in --tx (>= 5:1 on the brightest sampled pixel). Home: chain
   label in --tx, quote labels halfway to --tx (6.4:1, Aegis floor #9AA0C8 on #22222B). Kit file untouched */
.v{--tx-glow:color-mix(in srgb,var(--tx) 80%,var(--fg))}
.v #order{--mu:var(--tx)}
.v #order .st li span,.v #order .st li em,.v #order .st li[data-s="wait"] b{color:var(--tx-glow)}
.v #order .st li[data-s="run"] em{color:var(--mint)}
.v .hc .chip{color:var(--tx-glow)}
.v #chainsLbl{color:var(--tx)}
.v .rate[data-loading]{color:var(--tx)}   /* "No rate" / loading pill: --mu was 4.09:1 on the glass */
.v .quote span{color:color-mix(in srgb,var(--mu) 50%,var(--tx))}

/* focus (Aegis P1-2 + P2-6, WCAG 2.4.7 / 1.4.11). One visible indicator for every keyboard stop: a 2 px mint outline,
   2 px off the element (mint is the kit's focus colour; 11:1 on --bg). The kit's soft --ring halo stays as a second cue.
   The kit's ghost button drops its box-shadow, which removed its only focus cue: the halo comes back on focus.
   Fields keep the kit's focus-within border (inputs and textareas are left out on purpose, no double ring) */
.v :is(a,button,summary,[tabindex]:not([tabindex="-1"])):focus-visible{outline:2px solid var(--mint);outline-offset:2px}
.v .btn.ghost:focus-visible{box-shadow:var(--ring)}
#gfsw-launcher:focus-visible,#gfsw-close:focus-visible,#gfsw-go:focus-visible,.gfsw-contact-row button:focus-visible{outline:2px solid #7AF0E0;outline-offset:2px}

/* heading outline (Lens P1-1, P2-2; Aegis P2-2): panel titles are h2 in the outline but keep the kit's h3 look;
   the Telegram card title is not a heading (it sits in a tab panel right under the h1), same look as the kit's .tgc h3 */
.v h2.ph2{font-size:17px;line-height:inherit;letter-spacing:-.01em}
.v .tgc .tgh{font:700 19px var(--fd);line-height:inherit;letter-spacing:-.01em;color:var(--fg);max-width:none;text-wrap:balance}

/* target sizes (Aegis P2-3, WCAG 2.5.8). Hit areas grow into the space around them, the layout does not move:
   FAQ questions take the card's padding (full card width, 43 px tall), footer links take 6 px above and below (33 px;
   on phones the 12 px row gap is exactly shared, targets touch but never overlap) */
.v details.q>summary{margin:-10px -18px;padding:10px 18px;border-radius:14px}
.v details.q>summary:focus-visible{outline-offset:-2px}
.v .fl a{display:inline-block;padding-block:6px;margin-block:-6px}
/* the one-letter "X" link (Aegis N-1): 8 px each side makes it 25.5 px wide (7 px gave 23.5), the matching negative
   margin keeps every link where it was */
.v .fl a[href^="https://x.com/"]{padding-inline:8px;margin-inline:-8px}

/* order .out block: when there is no amount yet ("Set when it converts") the big value is a sentence, set at a reading
   size instead of the 30 px amount size (Iris P2-17) */
.v .out b.na{font:600 20px/1.25 var(--fd);color:var(--tx);letter-spacing:-.01em}
/* "0.004 ETH arrived" on Sent back / Sending it back: the word after the amount at the 15 px line size (Iris R2-2) */
.v .out b .wd{font:500 15px var(--fb);letter-spacing:0;color:var(--tx)}
/* terms + privacy */
.v .ph1 .upd{color:var(--mu);font-size:13px}
.v .legal{display:grid;gap:36px;max-width:72ch}
.v .legal .lg{gap:12px}
.v .legal h2{font-size:clamp(20px,2.2vw,24px);text-wrap:balance}
.v .legal p,.v .legal li{color:var(--tx);font-size:16px;line-height:1.65}
.v .legal ul{display:grid;gap:8px;margin:0;padding-left:20px;list-style:disc}
.v .legal li::marker{color:var(--mu)}
.v .legal a{color:var(--fg,inherit);text-decoration:underline;text-underline-offset:3px}
.v .legal .also{color:var(--mu)}
/* any-direction strip under the route */
.v .dirs{display:grid;gap:14px;margin-top:-8px}
.v .dirs .dr{display:grid;gap:8px}
.v .dirs .dc{display:flex;flex-wrap:wrap;gap:8px}
.v .dirs .chip b{color:var(--mu);font-weight:400}
.v .chip em{font-style:normal;color:var(--mu)}
.v .chip.soon{border-style:dashed}

/* $GHOST page (/ghost). Kit tokens only. The flywheel is the one authored motion on the page: a mint point travels the
   ring (transform on an HTML layer) and each step's numeral glows as it passes (opacity on a pseudo-element).
   Composite-only, 24 s per turn, off under prefers-reduced-motion. Above 900 px: ring in the middle column, steps around
   it (subgrid). 900 px and under: the ring goes, the steps stack as a numbered line with a "back to step 1" return */
.v .ph1 .pillst.ok{border-color:rgba(122,240,224,.45);color:var(--mint)}
.v .gh .ph1 .sb{margin-top:10px}
.v .fw{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,360px) minmax(0,1fr);grid-template-rows:auto auto auto auto;column-gap:36px;row-gap:6px}
.v .fw-ring{grid-column:2;grid-row:2/4;position:relative;width:100%;aspect-ratio:1;align-self:center}
.v .fw-ring svg{display:block;width:100%;height:auto}
.v .fw-orb{position:absolute;inset:0;animation:fworbit 24s linear infinite}
.v .fw-orb i{position:absolute;left:50%;top:11.11%;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 4px rgba(122,240,224,.15),0 0 14px rgba(122,240,224,.8)}
@keyframes fworbit{to{transform:rotate(1turn)}}
.v .fw-list{grid-column:1/-1;grid-row:1/-1;display:grid;grid-template-columns:subgrid;grid-template-rows:subgrid}
.v .fw-list li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:start;max-width:34ch}
.v .fw-list h3{font-size:17px;margin-bottom:4px}
.v .fw-list p{font-size:14.5px;color:var(--tx)}
.v .fw-n{position:relative;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;border:1px solid var(--ln2);background:rgba(0,0,0,.3);font:500 12px/1 var(--fm);color:var(--fg)}
.v .fw-n::after{content:'';position:absolute;inset:-5px;border-radius:50%;border:1.5px solid var(--mint);box-shadow:0 0 12px rgba(122,240,224,.55);opacity:0;animation:fwpulse 24s linear infinite}
@keyframes fwpulse{0%{opacity:0}2%{opacity:1}14%{opacity:0}100%{opacity:0}}
.v .fw-s5 .fw-n{color:var(--mint);border-color:rgba(122,240,224,.45)}
.v .fw-s2 .fw-n::after{animation-delay:-20s}
.v .fw-s3 .fw-n::after{animation-delay:-16s}
.v .fw-s4 .fw-n::after{animation-delay:-12s}
.v .fw-s5 .fw-n::after{animation-delay:-8s}
.v .fw-s6 .fw-n::after{animation-delay:-4s}
.v .fw-s1{grid-column:2;grid-row:1;justify-self:center;text-align:left}
.v .fw-s4{grid-column:2;grid-row:4;justify-self:center}
.v .fw-s2{grid-column:3;grid-row:2;align-self:end;padding-bottom:18px}
.v .fw-s3{grid-column:3;grid-row:3;align-self:start;padding-top:18px}
.v .fw-s6{grid-column:1;grid-row:2;align-self:end;justify-self:end;padding-bottom:18px}
.v .fw-s5{grid-column:1;grid-row:3;align-self:start;justify-self:end;padding-top:18px}
.v .fw-back{display:none}
@media (max-width:900px){
  .v .fw{display:block;max-width:560px}
  .v .fw-ring{display:none}
  .v .fw-list{display:grid;gap:0;grid-template-columns:none;grid-template-rows:none}
  .v .fw-list li{position:relative;max-width:none;padding:0 0 22px;grid-column:auto;grid-row:auto;justify-self:stretch;align-self:auto}
  .v .fw-list li::before{content:'';position:absolute;left:13.5px;top:34px;bottom:4px;width:1px;background:repeating-linear-gradient(180deg,rgba(185,167,255,.55) 0 3px,transparent 3px 8px)}
  .v .fw-back{display:flex;align-items:center;gap:10px;padding-left:4px;font:500 12px var(--fm);color:var(--mint);letter-spacing:.04em}
}
@media (prefers-reduced-motion:reduce){ .v .fw-orb{display:none} .v .fw-n::after{animation:none} }

/* live numbers: a ledger that reads in the order of the loop. Over 1000 px five cells in a row, a chevron on each join;
   under, label left and value right. Values keep one line height in every state (Checking, Starts at launch, a number) */
.v .ledger-wrap{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:-8px}
.v .lstat{font-size:14px;color:var(--tx)}
.v .ledger{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-radius:var(--r);background:var(--pn);border:1px solid var(--ln);margin:0}
.v .ledger .lr{position:relative;display:grid;align-content:start;gap:6px;padding:20px 22px}
.v .ledger .lr+.lr{border-left:1px solid var(--ln)}
.v .ledger .lr+.lr::before{content:'';position:absolute;left:-5px;top:50%;width:8px;height:8px;margin-top:-4px;border-top:1.5px solid var(--ln2);border-right:1.5px solid var(--ln2);background:transparent;transform:rotate(45deg)}
.v .ledger dt{font-size:13px;color:var(--tx);font-weight:500}
.v .ledger dd{margin:0}
.v .ledger .val{font:700 24px/32px var(--fd);color:var(--fg);letter-spacing:-.02em;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.v .ledger .val.na{font:500 15px/32px var(--fb);letter-spacing:0;color:var(--tx)}
.v .ledger .lsub{font-size:12.5px;color:var(--mu)}
.v .ledger[aria-busy=true] .val{color:var(--mu)}
@media (max-width:1000px){
  .v .ledger{grid-template-columns:minmax(0,1fr);padding:4px 20px}
  .v .ledger .lr{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"l v" "s v";gap:2px 16px;align-items:center;padding:14px 0}
  .v .ledger .lr+.lr{border-left:0;border-top:1px solid var(--ln)}
  .v .ledger .lr+.lr::before{display:none}
  .v .ledger dt{grid-area:l}
  .v .ledger .val{grid-area:v;text-align:right;font-size:20px}
  .v .ledger .lsub{grid-area:s}
}

/* burn log */
.v .blog-wrap{border-radius:var(--r);background:var(--pn);border:1px solid var(--ln);padding:4px 20px}
.v .blog{width:100%;border-collapse:collapse;font-size:14px}
.v .blog th{font:500 11px/1.3 var(--fm);letter-spacing:.1em;text-transform:uppercase;color:var(--tx);text-align:left;padding:14px 12px 12px 0}
.v .blog td{padding:14px 12px 14px 0;border-top:1px solid var(--ln);color:var(--fg);font-variant-numeric:tabular-nums;vertical-align:middle}
.v .blog th:last-child,.v .blog td:last-child{padding-right:0}
.v .blog .bempty td{color:var(--tx);padding:22px 0}
.v .txl{display:inline-flex;align-items:center;gap:6px;font:400 13px var(--fm);color:var(--mint);padding-block:6px;margin-block:-6px}
.v .txl:hover span{text-decoration:underline;text-underline-offset:3px}
.v .txl.full span{overflow-wrap:anywhere;word-break:break-all}
@media (max-width:760px){
  .v .blog thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .v .blog tr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px 16px;padding:14px 0;border-top:1px solid var(--ln)}
  .v .blog tbody tr:first-child{border-top:0}
  .v .blog td{display:grid;gap:2px;padding:0;border:0}
  .v .blog td::before{content:attr(data-l);font:500 10.5px/1.3 var(--fm);letter-spacing:.08em;text-transform:uppercase;color:var(--tx)}
  .v .blog .bempty{display:block}
  .v .blog .bempty td{display:block;padding:8px 0}
  .v .blog .bempty td::before{content:none}
}

/* rules, facts, contract, disclaimer */
.v .gh-two{align-items:start;gap:48px}
.v .gl{display:grid;gap:14px;padding-left:20px;list-style:disc}
.v .gl li{color:var(--tx);font-size:15.5px;line-height:1.6}
.v .gl li::marker{color:var(--mu)}
.v .gl b{color:var(--fg);font-weight:600}
.v .wline{display:block;margin-top:6px;font-size:13.5px}
.v .facts{display:grid;margin:0;border-radius:var(--r);background:var(--pn);border:1px solid var(--ln);padding:2px 20px}
.v .facts>div{display:grid;grid-template-columns:150px minmax(0,1fr);gap:16px;padding:13px 0;border-top:1px solid var(--ln)}
.v .facts>div:first-child{border-top:0}
.v .facts dt{color:var(--tx);font-size:14px}
.v .facts dd{margin:0;color:var(--fg);font-size:14.5px}
.v .facts dd p{color:var(--fg)}
.v .facts .mint{display:grid;gap:12px}
.v .facts .mint code.addr{font-size:13.5px}
.v .facts .btn.sm .ic{flex:none}
@media (max-width:560px){ .v .facts>div{grid-template-columns:minmax(0,1fr);gap:4px} }
.v .alertbox p{color:var(--fg)}
.v .disc{gap:12px;max-width:72ch;padding:24px;border-radius:var(--r);border:1px solid rgba(255,211,122,.3);background:rgba(255,211,122,.05)}
.v .disc h2{font-size:clamp(20px,2.2vw,24px)}
.v .disc p{color:var(--tx);font-size:16px;line-height:1.65}
.v .fw-list p{text-wrap:pretty}
/* header with five nav links ($GHOST added): the row needs ~850 px, so the kit's burger takes over up to 900 px instead
   of 760 (the nav wrapped to two lines at 761-840). Same rule the kit applies at 760, extended */
@media (max-width:900px){ .v .hdr nav,.v .hdr .hr .btn:not(.icn){display:none} .v .burger{display:grid} }
/* real coin and chain logos (Mad Mac 20 Oct) */
.v .bd.lg{background:var(--logo) center/cover no-repeat,var(--c);box-shadow:none}
.v .cd{width:14px;height:14px;box-shadow:none}
.v .legal a.btn{text-decoration:none}