/* ══════════════════════════════════════════════════════════
   LIQUA v3 · BLACK · SILVER · BLUE · YELLOW — the shared look layer
   Linked LAST. It repaints, never rearranges: colour, background,
   border, radius, shadow, weight, size, tracking, leading, inner
   spacing, transitions — never display, grid, flex, position, order.
   A product page: sections alternating black and silver, grey prose,
   one blue that means "act", yellow once. Hairlines, not borders, no
   holo or glitter. Every surface reads a CONTEXT token that §2
   re-points on silver, which is why the whole skin fits in one pass.
   ══════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ── 1 · THE PALETTE · four colours, and the greys between */
:root{
--k-black:#000; --k-ink:#0b0b0f; --k-graphite:#1d1d1f;
--k-silver:#f5f5f7; --k-silver-2:#e8e8ed;
--k-grey:#86868b;/* tertiary, dark ground only */
--k-grey-d:#a1a1a6;/* prose on black 8.2:1 */
--k-grey-l:#6e6e73;/* prose on silver 4.7:1 */
--k-line:#d2d2d7; --k-line-d:rgba(255,255,255,.16); --k-line-d2:rgba(255,255,255,.26);
--k-blue:#0071e3;/* the action */
--k-blue-hi:#2997ff;/* lifted, on black 7.0:1 */
--k-blue-lo:#0066cc;/* sunk, on silver 5.1:1 */
--k-yellow:#ffd60a; --k-yellow-d:#f5b700;
--k-yellow-ink:#6b4b00;/* yellow TEXT on light 7.5:1 */
--k-red:#ff6b60; --k-red-d:#b3261e;
--k-r:18px; --k-r-sm:12px; --k-ease:cubic-bezier(.4,0,.2,1);
--k-shadow:0 1px 2px rgba(0,0,0,.04),0 8px 24px -12px rgba(0,0,0,.18);
--v3-display:'Outfit','Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
--v3-sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
--v3-mono:'JetBrains Mono',ui-monospace,'SF Mono',Consolas,Menlo,monospace;
--font-display:var(--v3-display);--font-body:var(--v3-sans);--font-mono:var(--v3-mono);
--display:var(--v3-display);--sans:var(--v3-sans);--mono:var(--v3-mono);
--f-body:var(--v3-sans);--f-display:var(--v3-display);--f-mono:var(--v3-mono);
--f-hud:var(--v3-mono);--f-ditto:var(--v3-mono);--f-hand:var(--v3-display);
--lm-sans:var(--v3-sans);--lm-mono:var(--v3-mono);--dv-sans:var(--v3-sans);--dv-mono:var(--v3-mono);
/* CONTEXT tokens · §2 re-points these on silver */
--k-surf:var(--k-ink);/* a card */
--k-surf-2:rgba(255,255,255,.05);/* a chip, a nested well */
--k-hover:rgba(255,255,255,.04);/* a row under the cursor */
--k-elev:none;--k-elev-h:none;/* soft shadow: light panels only */
--k-fig:var(--k-yellow);/* yellow AS TEXT */
--k-live:rgba(0,113,227,.14);--k-warn:rgba(255,214,10,.10);--k-bad:rgba(255,107,96,.10);
/* every shared token, resolved onto the palette */
--bg:var(--k-black);--bg2:var(--k-ink);--bg-2:var(--k-ink);--grid:#141417;
--panel:var(--k-surf);--panel2:var(--k-graphite);--panel-2:var(--k-graphite);
--border:var(--k-line-d);--border2:var(--k-line-d2);--border-2:var(--k-line-d2);--border3:var(--k-line-d2);
--text:#fff;--txt:#fff;--chalk:#fff;--chalk-dim:var(--k-grey-d);
--muted:var(--k-grey-d);--dim:var(--k-grey-d);--dimc:var(--k-grey);
/* violet, magenta, mint, cyan, indigo → the blue */
--ice:var(--k-blue-hi);--cyan:var(--k-blue-hi);--violet:var(--k-blue-hi);--mag:var(--k-blue-hi);
--magenta:var(--k-blue-hi);--green:var(--k-blue-hi);--cold:var(--k-blue-hi);--blue:var(--k-blue-hi);
--amber:var(--k-fig);--gold:var(--k-fig);--red:var(--k-red);--hot:var(--k-red);
--ink:var(--k-graphite);--ink-2:#3a3a3c;--hairline:var(--k-line);
/* L8 arcade tokens · the chalkboard becomes the canvas */
--board:var(--k-black);--board-2:var(--k-ink);--board-3:var(--k-ink);--board-edge:var(--k-black);
--chalk-yellow:var(--k-fig);--chalk-blue:var(--ice);
--paper:#fff;--paper-2:var(--k-silver);--card:#fff;--ditto:var(--k-silver);--ditto-ink:var(--k-graphite);
--rule:var(--k-line);--margin-red:var(--k-line);
--oak:var(--k-silver);--oak-2:var(--k-graphite);--oak-3:var(--k-grey);
--pencil:var(--k-yellow);--eraser:var(--red);
--crayon-red:var(--red);--crayon-blue:var(--ice);--crayon-green:var(--ice);
--crayon-orange:var(--k-fig);--crayon-purple:var(--ice);--crayon-teal:var(--ice);
--portal:var(--ice);--portal-2:var(--k-silver);--rm-cyan:var(--ice);--rm-yellow:var(--k-fig);
--ok:var(--ice);--warn:var(--k-fig);--bad:var(--red);--info:var(--ice);--special:var(--ice);
--ink-w:1px;--r:var(--k-r);--r-sm:var(--k-r-sm);
--pop:0 0 0 0 transparent;--pop-sm:0 0 0 0 transparent;--pop-lg:0 0 0 0 transparent;
--dust:0 0 0 0 transparent;--dust-sm:0 0 0 0 transparent;--tape:transparent;
--g-ink:transparent;--g-face:var(--k-surf);--g-track:rgba(255,255,255,.10);
--g-tick:rgba(255,255,255,.55);--g-label:var(--text);--g-live:var(--ice);
--g-rim:var(--border);--g-display:var(--v3-display);--g-mono:var(--v3-mono);
/* the anime layer derives from these: no holo */
--holo:linear-gradient(90deg,var(--k-blue),var(--k-blue));
--holo-soft:linear-gradient(90deg,var(--k-live),var(--k-live));
--glow-ice:none;--glow-violet:none;--glow-mag:none;
accent-color:var(--k-blue);caret-color:var(--k-blue);color-scheme:dark;
}
:root:has(link[href*="liqua-theme"]){--amber:var(--ice);--gold:var(--ice);--blue:var(--ice);}

/* ── 2 · SECTIONS ALTERNATE ── 
   A section is one idea with air around it. Odd takes the canvas,
   even takes the silver panel, and every context token flips with it. */
section:nth-of-type(odd),.k-dark{background:var(--k-black)!important;color:var(--muted);}
section:nth-of-type(even),.k-light{
--k-surf:#fff;--k-surf-2:var(--k-silver-2);--k-hover:var(--k-silver);
--k-elev:var(--k-shadow);--k-elev-h:0 2px 6px rgba(0,0,0,.06),0 14px 34px -14px rgba(0,0,0,.22);
--k-fig:var(--k-yellow-ink);--k-live:#e9f2fd;--k-warn:#fff9d6;--k-bad:#fdeceb;
--bg:var(--k-silver);--bg2:var(--k-silver-2);--bg-2:var(--k-silver-2);--grid:var(--k-line);
--panel:#fff;--panel2:var(--k-silver);--panel-2:var(--k-silver);
--border:var(--k-line);--border2:var(--k-line);--border-2:var(--k-line);--border3:var(--k-line);
--text:var(--k-graphite);--txt:var(--k-graphite);--chalk:var(--k-graphite);--chalk-dim:var(--k-grey-l);
--muted:var(--k-grey-l);--dim:var(--k-grey-l);--dimc:var(--k-grey-l);
--ice:var(--k-blue-lo);--cyan:var(--k-blue-lo);--violet:var(--k-blue-lo);--mag:var(--k-blue-lo);
--magenta:var(--k-blue-lo);--green:var(--k-blue-lo);--cold:var(--k-blue-lo);--blue:var(--k-blue-lo);
--red:var(--k-red-d);--hot:var(--k-red-d);--g-track:rgba(0,0,0,.08);--g-tick:rgba(29,29,31,.55);
background:var(--k-silver)!important;color:var(--muted);
}
/* the colour change IS the seam: old rule lines go quiet */
section{border-color:transparent!important;}
/* inline colours follow the section they sit in */
:is(section:nth-of-type(even),.k-light) :is([style*="var(--text)"],[style*="var(--chalk)"]){color:var(--k-graphite)!important;}
:is(section:nth-of-type(even),.k-light) :is([style*="var(--muted)"],[style*="var(--dim)"]){color:var(--k-grey-l)!important;}
.band,.live,header.hero,footer{background-color:var(--k-black)!important;}
.band{background-image:none!important;border-bottom-color:transparent!important;}

/* ── 3 · THE ROOM · and the end of the old decoration */
html{background:var(--k-black)!important;}
body{
background:var(--k-black)!important;background-image:none!important;color:var(--k-grey-d)!important;
-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;
}
::selection{background:var(--k-blue);color:#fff;}
.lq-aurora,.lq-scan,.cine-aurora,.cine-amb,.cine-veil,.cine-grain{display:none!important;}
body::after{content:none!important;}
body::before{border:0!important;border-image:none!important;background:none!important;}
.panel::before,.gcard::before,.lq-sparkle::after,.lq-sheen::before,.lq-diva__halo{
content:none!important;display:none!important;background:none!important;}
.lq-diva,.lq-echo,.heroart svg{filter:none!important;}

/* ── 4 · TYPE · three families, tight headlines, grey prose */
body,p,li,td,th,dd,dt,label,input,select,textarea,button,summary,blockquote,figcaption,
.muted,.s,.rd,.note,.tiny,.gsub{font-family:var(--v3-sans)!important;}
h1,h2,h3,h4,h5,h6,.sec,.brand,.eyebrow,.cta,.btn,.st,.bname,.title,.shead,
.rail .rn,.lq-duo h3{font-family:var(--v3-display)!important;}
code,pre,kbd,samp,.mono,.m,.k,.v,.stat .k,.stat .v,.tag,.chip,.pill,.badge,.sid,.ph,
.num,.n,.hash,.addr,.amt,.hud,.g-val{font-family:var(--v3-mono)!important;}
h1,h2,h3,h4,h5,h6,.sec,.bname,.title,.shead{
color:var(--text)!important;text-shadow:none;font-weight:600!important;line-height:1.1;}
h1,.big{font-size:clamp(38px,5.2vw,64px)!important;letter-spacing:-.022em!important;}
h2,.sec{letter-spacing:-.02em!important;}
h3,h4{letter-spacing:-.012em!important;line-height:1.26;}
h1,h2,h3,.sec,.st{text-wrap:balance;}
p,li,.sub,.lede,.lead,.det{text-wrap:pretty;}
p,li{line-height:1.62;}
.lede,.sub,.lead{color:var(--muted)!important;line-height:1.55;max-width:62ch;}
b,strong{color:inherit;font-weight:600;}
.eyebrow{color:var(--muted)!important;text-shadow:none;font-weight:600!important;
letter-spacing:.12em!important;font-size:11.5px!important;}
/* two-tone headline replaces the holo: solid, then grey */
.grad,.lq-holo,.v3-holo{background:none!important;background-image:none!important;
-webkit-text-fill-color:currentColor!important;color:var(--muted)!important;
filter:none!important;animation:none!important;text-shadow:none;}
h2.lq-holo,h2.sec.lq-holo{color:var(--text)!important;}
.mono,code,pre,kbd,.v,.stat .v,td.m,.num,.hash,time,[class*="count"]{
font-variant-numeric:tabular-nums lining-nums;font-feature-settings:"tnum","zero";}
hr,.lq-seam{height:1px!important;border:0!important;opacity:1!important;
background:var(--border)!important;animation:none!important;}

/* ── 5 · LINKS · blue, and only blue */
a{color:var(--ice);}
a:not(.btn,.cta,.tag,.chip,.pill,.badge){
text-underline-offset:.18em;text-decoration-thickness:from-font;
text-decoration-color:color-mix(in srgb,currentColor 38%,transparent);
transition:color .18s var(--k-ease),text-decoration-color .18s var(--k-ease);}
a:not(.btn,.cta,.tag,.chip,.pill):hover{text-decoration-color:currentColor;}
.eco a,.nlinks a,.nmenu a,footer .links a,.dnav a{text-decoration:none!important;}

/* ── 6 · NAV · translucent, blurred, one hairline under it */
nav:not(.dnav,.dv-rail),header.top,.hdr,.brandbar,.dtop,.hud{
background:rgba(0,0,0,.72)!important;
-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
border:0!important;border-bottom:1px solid var(--k-line-d)!important;box-shadow:none!important;}
nav:not(.dnav,.dv-rail) .brand{color:#fff!important;font-weight:600!important;letter-spacing:.14em!important;}
nav:not(.dnav,.dv-rail) a:not(.cta,.btn){color:var(--k-grey-d)!important;
font-size:12px!important;font-weight:400!important;letter-spacing:0!important;transition:color .18s var(--k-ease);}
nav:not(.dnav,.dv-rail) a:not(.cta,.btn):hover,
nav:not(.dnav,.dv-rail) a.active,nav:not(.dnav,.dv-rail) a.on,
nav:not(.dnav,.dv-rail) a[aria-current]{color:var(--k-blue-hi)!important;background:none!important;}
/* liqua-type.css inks every nav link for the old tan paper bar, and its .v stat rule catches the CTA .v class at 26px: out-specify both */
nav .nlinks a.cta,nav .nmenu a.cta,nav .nlinks a.cta:hover,nav .nmenu a.cta:hover{
color:#fff!important;font-size:12.5px!important;}
.nmenu{background:rgba(0,0,0,.94)!important;border-bottom:1px solid var(--k-line-d)!important;}
.nmenu a:hover{background:rgba(255,255,255,.06)!important;color:#fff!important;}
.mob-menu span{background:#fff!important;}

/* ── 7 · THE TESTNET STRIP · the one yellow above the fold */
.dnbanner{background:var(--k-ink)!important;background-image:none!important;border:0!important;
border-bottom:1px solid var(--k-line-d)!important;color:var(--k-yellow)!important;
box-shadow:none!important;font-size:12px!important;}
.dnbanner b b,.dnbanner a{color:var(--k-yellow)!important;font-weight:600!important;}
.dnbanner .d{background:var(--k-yellow)!important;box-shadow:none!important;}
.v3-testnet{color:var(--k-fig)!important;text-shadow:none;}
.dnbanner .v3-testnet{color:var(--k-yellow)!important;}

/* ── 8 · HERO · a statement, a grey lede, one blue action */
header.hero{background-image:none!important;border-bottom:0!important;}
.hero .lede{font-size:17.5px!important;}
.tagchip{background:var(--k-surf-2)!important;border:1px solid var(--border)!important;
color:var(--muted)!important;border-radius:999px!important;box-shadow:none!important;
font-weight:500!important;letter-spacing:.06em!important;}
.tagchip .dot{background:var(--ice)!important;box-shadow:none!important;}

/* ── 9 · LIVE STAT STRIP · huge tabular numbers, grey labels */
.live{border-top:1px solid var(--k-line-d)!important;border-bottom:1px solid var(--k-line-d)!important;}
.live .wrap{background:var(--k-line-d)!important;box-shadow:none!important;}
.stat{background:var(--k-black)!important;background-image:none!important;border:0!important;
border-radius:0!important;box-shadow:none!important;padding:20px 18px!important;}
.stat .k{color:var(--k-grey)!important;font-size:10px!important;letter-spacing:.1em!important;text-shadow:none;}
.stat .v,.stat .v.ice,.stat .v.cy,.stat .v.vi,.stat .v.gr{color:#fff!important;font-size:26px!important;
font-weight:500!important;letter-spacing:-.01em!important;margin-top:8px!important;text-shadow:none;}
.stat .v.am{color:var(--k-yellow)!important;}

/* ── 10 · CARDS AND PANELS · a hairline, a generous radius */
.panel,.gcard,.card,.box,.section,.sec,.feat,.way,.rstep,.eco a,.lq-card,.fairbox,
.dv-card,.ep,.callout,.metric,.rail,.note,.kv,details,.lq-tier{
background:var(--k-surf)!important;background-image:none!important;
border:1px solid var(--border)!important;border-radius:var(--k-r)!important;
box-shadow:var(--k-elev)!important;text-shadow:none;
transition:border-color .22s var(--k-ease),box-shadow .22s var(--k-ease),transform .22s var(--k-ease);}
h2.sec,h3.sec{background:none!important;border:0!important;border-radius:0!important;padding:0!important;}
.feat:hover,.way:hover,.eco a:hover,.lq-card:hover,.rstep:hover,details:hover,.card:not(.soon):hover{
border-color:var(--k-blue)!important;box-shadow:var(--k-elev-h)!important;transform:translateY(-4px);}
.lq-card:hover::before{opacity:0!important;}
.feat p,.way p,.rstep p,.lq-card p,.eco a span,.fairbox p,.dv-card p,.rail .rd,
.lq-duo__role,.lq-duo__line,.lq-honest,.slegend{color:var(--muted)!important;}
.feat h3,.way h3,.lq-card h3,.fairbox h3,.eco a b,.rail .rn,.kv .row .v,.slegend b,td{color:var(--text)!important;}
.feat .ix,.rail .ri{background:var(--k-live)!important;color:var(--ice)!important;
border:1px solid var(--border)!important;border-radius:var(--k-r-sm)!important;box-shadow:none!important;}
.fairbox code{background:var(--bg2)!important;color:var(--ice)!important;}
.console{background:var(--k-ink)!important;color:var(--k-silver)!important;
border:1px solid var(--k-line-d)!important;border-radius:var(--k-r-sm)!important;box-shadow:none!important;}
/* notes are quiet callouts, never stickers */
.note{border-radius:var(--k-r-sm)!important;font-weight:400!important;}
.note .hd{letter-spacing:.08em!important;font-size:10.5px!important;}
.note.bad{background:var(--k-bad)!important;color:var(--red)!important;}
.note.warn{background:var(--k-warn)!important;color:var(--k-fig)!important;}
.note.info{background:var(--k-live)!important;color:var(--ice)!important;}
.note.mut{background:var(--k-surf-2)!important;color:var(--muted)!important;}

/* ── 11 · KEY/VALUE TABLES AND DATA */
.kv{overflow:hidden;}
.kv .row,.row,.field{border-color:var(--border)!important;box-shadow:none!important;}
.kv .row{border-bottom:1px solid var(--border)!important;}
.kv .row:hover,tr:hover td{background:var(--k-hover)!important;}
.kv .row .k{color:var(--muted)!important;}
.kv .row .v{font-weight:500!important;}
table{background:var(--k-surf)!important;border:1px solid var(--border)!important;
border-radius:var(--k-r-sm)!important;border-collapse:separate;border-spacing:0;
overflow:hidden;box-shadow:none!important;}
th{background:transparent!important;color:var(--muted)!important;font-size:10.5px!important;
font-weight:500!important;letter-spacing:.1em!important;text-transform:uppercase;
border-bottom:1px solid var(--border)!important;text-shadow:none;}
td{border-bottom:1px solid var(--border)!important;}

/* ── 12 · DETAILS AND FAQ ROWS */
details summary{color:var(--text)!important;font-weight:600!important;box-shadow:none!important;}
details summary::after{color:var(--ice)!important;text-shadow:none;font-weight:400!important;}
details[open]{border-color:var(--border)!important;}
details[open] summary{box-shadow:none!important;border-bottom:1px solid var(--border)!important;}
details p{color:var(--muted)!important;}

/* ── 13 · CHIPS · live is blue, coming is yellow, broken red */
.tag,.chip,.badge,.pill,.tagchip,.lq-chip{border-radius:999px!important;box-shadow:none!important;
text-shadow:none;border:1px solid var(--border)!important;background-image:none!important;
font-weight:500!important;letter-spacing:.06em!important;}
.chip,.badge,.pill,.lq-chip,.t-mut{background:var(--k-surf-2)!important;color:var(--muted)!important;}
.tag{border:0!important;background:none!important;color:var(--ice)!important;padding-left:0!important;}
.lq-chip--live,.t-ok,.t-cy,.v3-live{color:var(--ice)!important;}
.lq-chip--live,.t-cy{background:var(--k-live)!important;
border-color:color-mix(in srgb,var(--ice) 34%,transparent)!important;}
.lq-chip--live::before{background:currentColor!important;box-shadow:none!important;}
.lq-chip--spec,.t-warn,.v3-coming{color:var(--k-fig)!important;}
.lq-chip--spec,.t-warn{background:var(--k-warn)!important;
border-color:color-mix(in srgb,var(--k-fig) 40%,transparent)!important;}
.v3-broken{color:var(--red)!important;}

/* ── 14 · BUTTONS · a blue pill, or a bare blue chevron link */
.btn,.cta,button,input[type=button],input[type=submit]{border-radius:999px!important;
border:1px solid var(--border)!important;box-shadow:none!important;text-shadow:none;
background-image:none!important;font-weight:500!important;letter-spacing:0!important;
transition:background-color .18s var(--k-ease),border-color .18s var(--k-ease),color .18s var(--k-ease),opacity .18s var(--k-ease);}
.btn.p,.btn.primary,.cta,.cta.v,button.primary,input[type=submit]{
background:var(--k-blue)!important;color:#fff!important;border-color:var(--k-blue)!important;}
.btn.p:hover,.btn.primary:hover,.cta:hover,button.primary:hover{background:#0077ed!important;
color:#fff!important;box-shadow:none!important;filter:none!important;transform:none;}
.btn:not(.p,.primary),button:not(.primary,.mob-menu,[class*="box"]){
background:transparent!important;color:var(--text)!important;border-color:var(--border)!important;}
.btn:not(.p,.primary):hover{border-color:var(--ice)!important;color:var(--ice)!important;}
.btn:active,.cta:active,button:active{transform:none!important;opacity:.82;}
.way a,.feat a.tag,.rstep a{color:var(--ice)!important;font-weight:500!important;}

/* ── 15 · INPUTS */
input:not([type=checkbox],[type=radio],[type=range]),select,textarea{
background:var(--bg2)!important;color:var(--text)!important;border:1px solid var(--border)!important;
border-radius:var(--k-r-sm)!important;box-shadow:none!important;
transition:border-color .18s var(--k-ease),box-shadow .18s var(--k-ease);}
:is(section:nth-of-type(even),.k-light) :is(input,select,textarea){background:#fff!important;}
input::placeholder,textarea::placeholder{color:var(--dimc)!important;opacity:1;}
input:focus,select:focus,textarea:focus{border-color:var(--k-blue)!important;outline:none;
box-shadow:0 0 0 3px rgba(0,113,227,.28)!important;}
.field label{color:var(--muted)!important;font-size:10.5px!important;letter-spacing:.08em!important;}
::marker{color:var(--k-grey);}

/* ── 16 · THE TIER CALCULATOR, BARS, RARITY, GAUGES */
.lq-tier{border-radius:var(--k-r-sm)!important;}
.lq-tier:hover{border-color:var(--k-blue)!important;transform:none!important;}
.lq-tier[data-active="true"]{border-color:var(--k-blue)!important;background:var(--k-live)!important;}
.lq-tier__mult{color:var(--k-fig)!important;text-shadow:none;font-weight:600!important;}
.lq-calc,.lq-calc__slider{background:none!important;}
.lq-calc__slider input{accent-color:var(--k-blue);}
.sbar,.bar{background:var(--g-track)!important;border:1px solid var(--border)!important;
border-radius:999px!important;box-shadow:none!important;overflow:hidden;}
.sbar i,.bar i{box-shadow:none!important;border-radius:0!important;background:var(--k-blue)!important;}
.sbar .studio,.slegend .dot.studio{background:var(--k-grey)!important;}
.sbar .sale{background:var(--k-yellow-d)!important;}
.slegend .dot.mined{background:var(--k-blue)!important;}
[data-rarity]{--r:var(--dimc);}
[data-rarity="tempered"],[data-rarity="lucid"],[data-rarity="resonant"]{--r:var(--ice);}
[data-rarity="singular"]{--r:var(--k-fig);}
.lq-card[data-rarity="singular"]{border-color:var(--k-yellow-d)!important;background:var(--k-surf)!important;}
.rstep .ph{text-shadow:none;font-weight:600!important;}
.rstep .ph.done{color:var(--muted)!important;}
.rstep .ph.now{color:var(--ice)!important;}
.rstep .ph.next{color:var(--dimc)!important;}

/* ── 17 · CODE */
pre,code:not(pre code){background:var(--bg2)!important;color:var(--text)!important;
border:1px solid var(--border)!important;border-radius:var(--k-r-sm)!important;box-shadow:none!important;}
pre code{background:none!important;border:0!important;color:inherit!important;}

/* ── 18 · THE DOCS SHELL, DIVA'S RAIL, THE EXCHANGE ── 
   No <section> here, so these surfaces stay on the black canvas. */
nav.dnav,nav.dv-rail,.dnav{background:var(--k-ink)!important;background-image:none!important;
border-color:var(--k-line-d)!important;box-shadow:none!important;}
.dnav .brand{background:var(--k-ink)!important;border-bottom:1px solid var(--k-line-d)!important;}
.dnav .bt b{color:#fff!important;}
.dnav .bt span,.dnav .grp>b,.dnav .gh{color:var(--k-grey)!important;}
.dnav .logo{background:var(--k-blue-hi)!important;box-shadow:none!important;}
.dnav a:not(.active){color:var(--k-grey-d)!important;}
.dnav a:not(.active):hover{color:#fff!important;background:rgba(255,255,255,.06)!important;}
.dnav a.active{color:var(--k-blue-hi)!important;background:rgba(0,113,227,.14)!important;}
.doc,.doc p,.doc li,.doc td{color:var(--k-grey-d)!important;}
.doc h1,.doc h2,.doc h3,.doc h4{color:#fff!important;}
.doc-foot,.doc-nav{color:var(--k-grey)!important;border-color:var(--k-line-d)!important;}
.dv-card,.dv-rail a{border-color:var(--k-line-d)!important;}

/* ── 19 · FOOTER */
footer{border-top:1px solid var(--k-line-d)!important;}
footer,footer .mono,footer .disc,.site-foot{color:var(--k-grey)!important;}
footer .links a{color:var(--k-grey-d)!important;font-weight:400!important;}
footer .links a:hover{color:var(--k-blue-hi)!important;}
footer .social a{border-color:var(--k-line-d)!important;}

/* ── 20 · FOCUS · SCROLLBARS · ANCHORS */
:focus-visible,a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
outline:2px solid var(--k-blue)!important;outline-offset:3px;box-shadow:none!important;border-radius:8px;}
@supports (-moz-appearance:none){*{scrollbar-color:rgba(255,255,255,.22) transparent;scrollbar-width:thin;}}
*::-webkit-scrollbar{width:10px;height:10px;}
*::-webkit-scrollbar-track{background:transparent!important;box-shadow:none!important;}
*::-webkit-scrollbar-thumb{background:rgba(255,255,255,.22)!important;border:2px solid transparent!important;
background-clip:padding-box!important;border-radius:99px;box-shadow:none!important;}
*::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.34)!important;background-clip:padding-box!important;}
:target,[id]{scroll-margin-top:84px;}
:target{animation:none;}

/* ── 21 · INSIDE L8 OS · a page opened as a window is an app */
.l8-embedded nav:not(.dnav,.dv-rail),.l8-embedded .dnbanner,.l8-embedded footer,
.l8-embedded .lq-totop,.l8-embedded .site-foot,.l8-embedded .l8-open{display:none!important;}
.l8-embedded body{padding-top:0!important;background-attachment:scroll!important;}
.l8-embedded section:first-of-type,.l8-embedded header.hero{padding-top:22px!important;}
.l8-embedded nav.dnav,.l8-embedded nav.dv-rail{display:'';}
/* the pill that opens a page inside the desktop */
.l8-open{position:fixed;right:14px;bottom:14px;z-index:9999;display:inline-flex;align-items:center;
gap:8px;padding:11px 18px;border-radius:999px;font:500 12.5px/1 var(--v3-display);color:#fff;
text-decoration:none;background:var(--k-blue);border:1px solid var(--k-blue);
box-shadow:0 8px 24px -10px rgba(0,113,227,.6);transition:background-color .18s var(--k-ease);}
.l8-open:hover{background:#0077ed;}
.l8-open:active{opacity:.85;}
@media (max-width:760px){.l8-open{right:10px;bottom:10px;padding:10px 14px;font-size:12px;}}
@media print{.l8-open{display:none!important;}}

/* ── 22 · UTILITIES · paint only, safe on any element */
.v3-num{font-variant-numeric:tabular-nums;}
.v3-twinkle,.v3-twinkle:hover,.v3-twinkle:focus-visible{transform:none!important;background-image:none!important;
box-shadow:none!important;text-shadow:none;animation:none!important;filter:none!important;}
/* reveal: a short fade and a 4px rise */
html.js .lq-reveal{transform:translateY(4px);transition:opacity .4s var(--k-ease),transform .4s var(--k-ease);}


/* ── 24 · MORE CONTRAST WHEN THE READER ASKS FOR IT */
@media (prefers-contrast:more){
:root{--muted:#e8e8ed;--dim:#e8e8ed;--dimc:#d2d2d7;--k-grey:#d2d2d7;
--border:rgba(255,255,255,.42);--border2:rgba(255,255,255,.58);}
section:nth-of-type(even),.k-light{--muted:#3a3a3c;--dim:#3a3a3c;--dimc:#3a3a3c;--border:#86868b;--border2:#86868b;}
body{color:#e8e8ed!important;}
a{text-decoration:underline;}
.feat,.way,.rstep,.eco a,details,.lq-card,.panel,.card{border-width:2px!important;}
}
/* Windows high contrast: let the system palette through */
@media (forced-colors:active){
.btn,.cta,.feat,.way,.rstep,.lq-card,details,.panel,.card,table{box-shadow:none!important;
border:1px solid ButtonBorder!important;background:Canvas!important;color:CanvasText!important;}
.grad,.lq-holo,.v3-holo{-webkit-text-fill-color:CanvasText!important;color:CanvasText!important;background:none!important;}
section:nth-of-type(odd),section:nth-of-type(even){background:Canvas!important;color:CanvasText!important;}
}
/* printed pages become clean paper */
@media print{
html,body,section:nth-of-type(odd),section:nth-of-type(even){background:#fff!important;color:#111!important;}
body{background-image:none!important;}
nav,.dnbanner,.mob-menu,.nmenu,.lq-aurora,.lq-scan,.social{display:none!important;}
.feat,.way,.rstep,.kv,details,.lq-card,.panel,.card,table{box-shadow:none!important;
border:1px solid #bbb!important;background:#fff!important;color:#111!important;}
h1,h2,h3,.sec{color:#111!important;text-shadow:none;}
a{color:#111!important;text-decoration:underline;}
}

/* ── 25 · MOTION · short, eased, small · off when asked */
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important;}
.feat:hover,.way:hover,.eco a:hover,.lq-card:hover,.btn:hover,.cta:hover{transform:none!important;}
html.js .lq-reveal{opacity:1!important;transform:none!important;}
}

/* ── 26 · MOBILE FIRST · the phone is the main screen */
@media (max-width:900px){
/* thumbs, not cursors: 44px minimum */
a.btn,.cta,button,summary,.tab,.pill,nav a,.nmenu a,input[type=button],input[type=submit]{min-height:44px;}
a.btn,.cta,button:not(.mob-menu,[class*="box"]){display:inline-flex;align-items:center;justify-content:center;}
nav a,.nmenu a{display:flex;align-items:center;}
*{-webkit-tap-highlight-color:rgba(0,113,227,.18);}
/* never a sideways scroll on a phone */
html,body{max-width:100%;overflow-x:hidden;}
img,svg,canvas,video,pre,table{max-width:100%;}
.scroll,.tbl,table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;}
table{width:max-content;min-width:100%;}
body{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right);}
}
@media (max-width:760px){
/* one column where a two-up grid would squeeze */
.cards,.ways,.eco,.tk,.live .wrap,.lq-duo,.grid-2,.lq-steps,.lq-shardgrid,.lq-calc,.road,.faq{
grid-template-columns:minmax(0,1fr)!important;}
.cards>*,.ways>*,.eco>*,.lq-steps>*,.lq-shardgrid>*,.lq-duo>*,.road>*{min-width:0!important;max-width:100%!important;}
.lq-card,.feat,.way,.rstep{overflow-wrap:anywhere;}
.kv .row,.row,.field{flex-wrap:wrap!important;}
.kv .row .v,.row .v,.field .v{text-align:left!important;max-width:100%!important;overflow-wrap:anywhere;}
.live .wrap{grid-template-columns:1fr 1fr!important;}
body{font-size:15.5px;line-height:1.6;}
h1,.big{font-size:clamp(32px,8.6vw,44px)!important;line-height:1.06;}
h2,.sec{font-size:clamp(24px,6.4vw,32px)!important;}
h3{font-size:17px!important;}
.lede,.sub,.lead{font-size:16px!important;}
section{padding:56px 0!important;}
.wrap{padding-left:20px!important;padding-right:20px!important;}
.feat,.way,.rstep,.lq-card,.fairbox,.panel,.card{padding:20px!important;border-radius:16px!important;}
.btns{gap:10px!important;}
.btns .btn,.btns .cta{flex:1 1 100%;}
nav .wrap{min-height:52px!important;height:auto!important;}
:target,[id]{scroll-margin-top:66px;}
.stat{padding:14px 16px!important;}
.stat .v{font-size:20px!important;}
}
@media (max-width:420px){
.live .wrap{grid-template-columns:1fr!important;}
body{font-size:15px;}
.feat,.way,.rstep,.lq-card{padding:16px!important;}
.tagchip{white-space:normal;}
}


/* ══════════════════════════════════════════════════════════
   BACKGROUND, ICONS, FLAIR
   Paint and motion only. Nothing here changes a box's size or
   position: backgrounds, one pseudo-layer that is pinned behind
   its own section, opacity and 8px transforms. Remove this block
   and the layout is identical.
   ══════════════════════════════════════════════════════════ */

/* ── B1 · the room has depth now ──────────────────────────────
   A black section gets a fine engineering grid and one soft blue
   bloom. A silver section gets the same grid, inked, and a cool
   sheen down its left shoulder. Both are drawn at a few percent,
   so they read as material rather than decoration. */
section,header.hero,.band,.live{ position:relative; isolation:isolate; }
section::before,header.hero::before,.band::before{
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px),
    radial-gradient(60% 55% at 78% -10%,rgba(0,113,227,.16),transparent 70%);
  background-size:72px 72px,72px 72px,auto;
  mask-image:linear-gradient(180deg,#000,rgba(0,0,0,.72) 40%,transparent);
  -webkit-mask-image:linear-gradient(180deg,#000,rgba(0,0,0,.72) 40%,transparent);
}
:is(section:nth-of-type(even),.k-light)::before{
  background-image:
    linear-gradient(rgba(29,29,31,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(29,29,31,.045) 1px,transparent 1px),
    radial-gradient(52% 48% at 12% 0%,rgba(0,113,227,.09),transparent 68%);
}
/* a hairline where two ideas meet, brightest in the middle */
section + section::after{
  content:''; position:absolute; top:0; left:0; right:0; height:1px; z-index:1; pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);
}
:is(section:nth-of-type(even),.k-light) + section::after,
section + :is(section:nth-of-type(even),.k-light)::after{
  background:linear-gradient(90deg,transparent,rgba(29,29,31,.16),transparent);
}

/* the hero carries the one big light in the building, and it leans
   toward the pointer — 3% of the width, so you feel it, not see it */
header.hero{ --k-mx:74%; --k-my:12%; }
header.hero::before{
  background-image:
    radial-gradient(42% 52% at var(--k-mx) var(--k-my),rgba(0,113,227,.30),transparent 68%),
    radial-gradient(38% 46% at calc(100% - var(--k-mx)) 88%,rgba(255,214,10,.10),transparent 70%),
    linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
  background-size:auto,auto,72px 72px,72px 72px;
  transition:background-position .6s var(--k-ease);
  mask-image:radial-gradient(120% 100% at 50% 0%,#000 40%,transparent 92%);
  -webkit-mask-image:radial-gradient(120% 100% at 50% 0%,#000 40%,transparent 92%);
}
/* the stat strip sits on its own thin film so the numbers lift off the page */
.live{ background:linear-gradient(180deg,rgba(255,255,255,.035),transparent)!important; }

/* ── B2 · icons ───────────────────────────────────────────────
   One line weight, one grid, currentColor. The badge is a silver
   tile on light ground and a glass tile on black, and the icon
   inside it is the blue. */
.k-i{ width:1.15em; height:1.15em; display:block; stroke-width:1.6; overflow:visible; }
.ix,.k-ico{
  color:var(--k-blue-hi);
  background:var(--k-surf-2);
  border:1px solid var(--border)!important;
  border-radius:12px!important;
  display:flex; align-items:center; justify-content:center;
  transition:color .2s var(--k-ease),background .2s var(--k-ease),border-color .2s var(--k-ease);
}
:is(section:nth-of-type(even),.k-light) .ix,
:is(section:nth-of-type(even),.k-light) .k-ico{ color:var(--k-blue-lo); background:var(--k-silver); }
.k-has-icon .k-i{ width:20px; height:20px; }
.feat:hover .ix,.way:hover .ix{ color:#fff; background:var(--k-blue); border-color:var(--k-blue)!important; }
:is(section:nth-of-type(even),.k-light) :is(.feat,.way):hover .ix{ color:#fff; background:var(--k-blue); }
/* a step number keeps its digit but gains the tile.
   The lifted blue is the on-black link colour; on a silver section (or a white
   card inside one) it measured 2.52:1, so the light ground gets the deep blue. */
.lq-step__n,.way .n{ color:var(--k-blue-hi); }
:is(section:nth-of-type(even),.k-light) :is(.lq-step__n,.way .n){ color:var(--k-blue-lo); }

/* ── B3 · flair · arrival, lift, and the chevron that leads ──── */
.k-rise{ opacity:0; transform:translateY(8px); transition:opacity .5s var(--k-ease) var(--k-delay,0ms),transform .5s var(--k-ease) var(--k-delay,0ms);
  /* The backstop of last resort. Hiding content and then relying on script to
     un-hide it is a failure path that ends in a blank page: measured, with the
     intersection observer silent, eight blocks on the probe page were still at
     computed opacity 0 after 96 seconds and a scroll to the bottom. This delay
     is spent on the document timeline, which only advances while the tab is
     actually drawing frames, so a page read 10 seconds after it becomes
     visible reveals itself whatever the script did or did not do. */
  animation:kRiseFailsafe 1ms linear 10s forwards; }
/* A deck card always has an opacity of its own from the deck rules below, so
   it is never the one left invisible — and it is excluded here because a
   filled animation outranks a normal declaration and would erase the deck's
   own de-emphasis ten seconds into every visit. */
[data-deck].deck-on > .deck-i.k-rise{ animation:none; }
@keyframes kRiseFailsafe{ to{ opacity:1; transform:none; } }
.k-rise.k-in{ opacity:1; transform:none; }
.feat,.way,.rstep,.lq-card,.eco a{ transition:transform .3s var(--k-ease),box-shadow .3s var(--k-ease),border-color .3s var(--k-ease); }
.feat:hover,.way:hover,.eco a:hover,.lq-card:hover{ transform:translateY(-3px); }
/* links that end in a chevron nudge it on hover, the way a product page does */
a:hover > .k-chev,a:hover::after{ }
.btn:not(.p):not(.primary):hover,.cta:hover{ filter:none; }
.btn,.cta,.k-pill{ transition:transform .15s var(--k-ease),background .2s var(--k-ease),box-shadow .2s var(--k-ease); }
.btn:active,.cta:active{ transform:scale(.985); }
/* the live dot actually breathes */
.tagchip .dot,.dnbanner .d{ animation:kPulse 2.6s var(--k-ease) infinite; }
@keyframes kPulse{ 0%,100%{ opacity:1; transform:scale(1) } 50%{ opacity:.55; transform:scale(.86) } }
/* numbers hold their width while they count */
.stat .v,.k-count{ font-variant-numeric:tabular-nums lining-nums; }

@media (prefers-reduced-motion:reduce){
  .k-rise{ opacity:1!important; transform:none!important; transition:none!important; animation:none!important; }
  .tagchip .dot,.dnbanner .d{ animation:none!important; }
  header.hero::before{ transition:none!important; }
  .feat:hover,.way:hover,.eco a:hover,.lq-card:hover,.btn:active,.cta:active{ transform:none!important; }
}
@media (max-width:760px){
  section::before,header.hero::before,.band::before{ background-size:48px 48px,48px 48px,auto; }
  section + section::after{ opacity:.6; }
}
@media print{
  section::before,header.hero::before,.band::before,section + section::after{ display:none!important; }
  /* paper has no scroll, so anything waiting to be revealed would print blank */
  .k-rise,html.js .lq-reveal,[data-deck].deck-on > .deck-i{ opacity:1!important; transform:none!important; animation:none!important; }
}


/* ══════════════════════════════════════════════════════════
   TEXTURE, TYPE SCALE, SPACING
   Three finishing passes. Texture gives every surface a grain
   so black stops looking like a void and silver stops looking
   like paper. The type scale puts every heading on one ramp.
   The spacing rhythm puts every gap on one ruler. Still paint
   and inner spacing only.
   ══════════════════════════════════════════════════════════ */

:root{
  --k-noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  /* type · one ramp, 1.25 between steps, tracking tightening as it grows */
  --t-xs:12px; --t-sm:13.5px; --t-base:16px; --t-md:19px;
  --t-lg:24px; --t-xl:32px; --t-2xl:clamp(30px,4.2vw,44px); --t-3xl:clamp(38px,6.4vw,68px);
  --lh-tight:1.08; --lh-head:1.16; --lh-body:1.62;
  /* spacing · one ruler, 4px base */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px; --s-10:128px;
}

/* ── T1 · grain ───────────────────────────────────────────────
   The noise sits over the section's own background at 3.5% on
   black and 5% on silver, pinned behind the content. It is one
   tile, so it costs nothing after the first paint. */
section::after,header.hero::after,.band::after,.live::after,footer::after{
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:var(--k-noise); background-size:140px 140px;
  opacity:.035; mix-blend-mode:overlay;
}
:is(section:nth-of-type(even),.k-light)::after{ opacity:.05; mix-blend-mode:multiply; }
/* the seam hairline is drawn by section + section::after, so keep it above grain */
section + section::after{ z-index:1; opacity:1; mix-blend-mode:normal; background-image:none; }

/* silver panels get a brushed sheen, the way an aluminium back does */
:is(section:nth-of-type(even),.k-light) .feat,
:is(section:nth-of-type(even),.k-light) .way,
:is(section:nth-of-type(even),.k-light) .lq-card,
:is(section:nth-of-type(even),.k-light) .kv{
  background-image:
    linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,0) 42%),
    repeating-linear-gradient(115deg,rgba(29,29,31,.018) 0 2px,transparent 2px 5px);
}
/* dark panels get a glass top edge instead */
.feat,.way,.rstep,.lq-card,.kv,.panel,.card{
  background-image:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,0) 38%);
}

/* ── T2 · buttons you can feel ────────────────────────────────
   Blue key: a lit top edge, a shaded bottom, a grain pass, and a
   sheen that sweeps once on hover. It presses 1px. */
.btn,.cta,.k-pill,.l8-open{
  position:relative; overflow:hidden;
  background-image:
    linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,0) 46%),
    var(--k-noise);
  background-size:auto,140px 140px;
  background-blend-mode:normal,overlay;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.34),
    inset 0 -1px 0 rgba(0,0,0,.18),
    0 1px 2px rgba(0,0,0,.18),
    0 8px 20px -12px rgba(0,113,227,.55);
  letter-spacing:.005em;
}
.btn::after,.cta::after,.l8-open::after{
  content:''; position:absolute; top:0; bottom:0; left:-40%; width:36%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent);
  transform:translateX(0); opacity:0; pointer-events:none;
}
.btn:hover::after,.cta:hover::after,.l8-open:hover::after{ animation:kSheen .7s var(--k-ease) 1; }
@keyframes kSheen{ 0%{ opacity:0; transform:translateX(0) } 20%{ opacity:1 } 100%{ opacity:0; transform:translateX(380%) } }
.btn:active,.cta:active,.l8-open:active{ box-shadow:inset 0 2px 4px rgba(0,0,0,.22); transform:translateY(1px); }
/* the quiet button keeps the same physics in silver */
.btn:not(.p):not(.primary){
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),inset 0 -1px 0 rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.08);
}

/* ── T3 · one type ramp ───────────────────────────────────────
   Display face for headings, body face for prose, mono for data.
   Sizes come off the ramp, never from a page's own stylesheet. */
h1,.big{ font:700 var(--t-3xl)/var(--lh-tight) var(--v3-display)!important; letter-spacing:-.022em!important; }
h2,.sec{ font:700 var(--t-2xl)/var(--lh-head) var(--v3-display)!important; letter-spacing:-.018em!important; }
h3{ font:600 var(--t-lg)/1.24 var(--v3-display)!important; letter-spacing:-.012em!important; }
h4{ font:600 var(--t-md)/1.3 var(--v3-display)!important; letter-spacing:-.008em!important; }
h5,h6{ font:600 var(--t-base)/1.35 var(--v3-display)!important; letter-spacing:-.004em!important; }
body,p,li,dd,dt,td,th,label,input,select,textarea,button,summary,blockquote,figcaption{
  font-family:var(--v3-sans)!important;
}
body{ font-size:var(--t-base); line-height:var(--lh-body); letter-spacing:-.003em; }
p,li{ font-size:var(--t-base); line-height:var(--lh-body); }
.lede,.sub,.lead{ font-size:var(--t-md)!important; line-height:1.55!important; }
small,.small,.note,.det,.blurb,figcaption{ font-size:var(--t-sm)!important; line-height:1.5!important; }
.eyebrow,.k-eyebrow{ font:600 var(--t-xs)/1 var(--v3-mono)!important; letter-spacing:.14em!important; text-transform:uppercase; }
code,pre,kbd,samp,.mono,.m,.v,.k,.stat .v,.stat .k,.sid,.ph,.hash,.num{ font-family:var(--v3-mono)!important; }
code,kbd,samp{ font-size:.92em!important; }
pre{ font-size:var(--t-sm)!important; line-height:1.6!important; }
.stat .v{ font:600 var(--t-xl)/1.05 var(--v3-mono)!important; letter-spacing:-.02em!important; }
.stat .k{ font:500 var(--t-xs)/1 var(--v3-mono)!important; letter-spacing:.1em!important; text-transform:uppercase; }
.tag,.chip,.pill,.badge,.lq-chip{ font:600 var(--t-xs)/1 var(--v3-mono)!important; letter-spacing:.06em!important; }
.btn,.cta,.l8-open{ font:600 var(--t-sm)/1 var(--v3-display)!important; letter-spacing:0!important; }
nav a,.nlinks a,.nmenu a{ font:500 var(--t-sm)/1 var(--v3-sans)!important; letter-spacing:-.002em!important; }

/* ── T4 · one ruler for space ─────────────────────────────────
   Sections breathe the same amount everywhere, cards carry the
   same inset, and the gap under a heading is always the same. */
section{ padding:var(--s-9) 0!important; }
section > .wrap > .eyebrow{ margin-bottom:var(--s-3)!important; }
h1,h2,.sec{ margin-bottom:var(--s-4)!important; }
h3{ margin-bottom:var(--s-2)!important; }
p + p{ margin-top:var(--s-3); }
.sub,.lede,.lead{ margin-bottom:var(--s-6)!important; }
.cards,.ways,.eco,.road,.faq,.tk{ margin-top:var(--s-7)!important; }
.feat,.way,.lq-card,.rstep,.fairbox,.callout{ padding:var(--s-5)!important; }
.kv .row,.row{ padding:var(--s-3) var(--s-5)!important; }
.stat{ padding:var(--s-5)!important; }
details summary{ padding:var(--s-4) 0!important; }
details p{ padding-bottom:var(--s-4)!important; }
.btn,.cta{ padding:var(--s-3) var(--s-5)!important; border-radius:999px!important; }
.btns{ margin-top:var(--s-5); }
footer{ padding:var(--s-8) 0!important; }
@media (max-width:760px){
  :root{ --s-9:var(--s-7); --s-8:var(--s-6); }
  section{ padding:var(--s-7) 0!important; }
  .feat,.way,.lq-card,.rstep{ padding:var(--s-4)!important; }
  h1,.big{ line-height:1.1!important; }
}
@media (prefers-reduced-motion:reduce){
  .btn:hover::after,.cta:hover::after,.l8-open:hover::after{ animation:none!important; }
}
@media print{
  section::after,header.hero::after,.band::after,.live::after,footer::after{ display:none!important; }
}


/* ══════════════════════════════════════════════════════════
   YELLOW CHECKER + BEVELLED KEYS
   A checkerboard in yellow lies under every section, strongest
   at the top and gone by the bottom: 70% down to 0. Buttons get
   a yellow bevel, lit on the top-left edge and shaded on the
   bottom-right, so they read as a physical key on the glass.
   ══════════════════════════════════════════════════════════ */

:root{
  --k-check:56px;                      /* one square */
  --k-check-a:rgba(255,214,10,.16);    /* yellow, on black */
  --k-check-b:rgba(255,214,10,.07);    /* the off square  */
}

/* the board itself · two offset squares make the check, and the
   mask takes it from 70% at the top to nothing at the bottom */
section::before,header.hero::before,.band::before,.live::before,footer::before{
  background-image:
    linear-gradient(45deg,var(--k-check-a) 25%,transparent 25% 75%,var(--k-check-a) 75%),
    linear-gradient(45deg,var(--k-check-b) 25%,transparent 25% 75%,var(--k-check-b) 75%),
    linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px),
    radial-gradient(60% 55% at 78% -10%,rgba(0,113,227,.16),transparent 70%);
  background-size:
    var(--k-check) var(--k-check),
    var(--k-check) var(--k-check),
    72px 72px, 72px 72px, auto;
  background-position:
    0 0,
    calc(var(--k-check) / 2) calc(var(--k-check) / 2),
    0 0, 0 0, 0 0;
  opacity:.7;                                   /* the top of the fade */
  mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.45) 45%,transparent 100%);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.45) 45%,transparent 100%);
}
/* on silver the same board, inked instead of lit */
:is(section:nth-of-type(even),.k-light)::before{
  --k-check-a:rgba(245,183,0,.13);
  --k-check-b:rgba(29,29,31,.035);
  background-image:
    linear-gradient(45deg,var(--k-check-a) 25%,transparent 25% 75%,var(--k-check-a) 75%),
    linear-gradient(45deg,var(--k-check-b) 25%,transparent 25% 75%,var(--k-check-b) 75%),
    linear-gradient(rgba(29,29,31,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(29,29,31,.045) 1px,transparent 1px),
    radial-gradient(52% 48% at 12% 0%,rgba(0,113,227,.09),transparent 68%);
}
/* the hero keeps its big light, with the board under it */
header.hero::before{
  background-image:
    radial-gradient(42% 52% at var(--k-mx) var(--k-my),rgba(0,113,227,.30),transparent 68%),
    linear-gradient(45deg,var(--k-check-a) 25%,transparent 25% 75%,var(--k-check-a) 75%),
    linear-gradient(45deg,var(--k-check-b) 25%,transparent 25% 75%,var(--k-check-b) 75%),
    linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
  background-size:auto,var(--k-check) var(--k-check),var(--k-check) var(--k-check),72px 72px,72px 72px;
  background-position:0 0,0 0,calc(var(--k-check) / 2) calc(var(--k-check) / 2),0 0,0 0;
}

/* ── the bevelled key ─────────────────────────────────────────
   Yellow rim, lit top-left, shaded bottom-right, and the face
   keeps its blue. Pressing it flips the bevel. */
.btn,.cta,.l8-open,.k-pill{
  border:2px solid var(--k-yellow)!important;
  border-top-color:#ffe98a!important;
  border-left-color:#ffe066!important;
  border-right-color:#d9a900!important;
  border-bottom-color:#b98c00!important;
  border-radius:14px!important;
  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,.42),
    inset -1px -1px 0 rgba(0,0,0,.30),
    inset 0 0 0 1px rgba(255,214,10,.28),
    0 2px 0 #7d5f00,
    0 8px 18px -10px rgba(0,0,0,.6)!important;
}
.btn:hover,.cta:hover,.l8-open:hover{
  border-top-color:#fff3b8!important; border-left-color:#ffe98a!important;
  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,.55),
    inset -1px -1px 0 rgba(0,0,0,.28),
    inset 0 0 0 1px rgba(255,214,10,.42),
    0 2px 0 #7d5f00,
    0 12px 26px -12px rgba(255,214,10,.45)!important;
}
.btn:active,.cta:active,.l8-open:active{
  border-top-color:#b98c00!important; border-left-color:#d9a900!important;
  border-right-color:#ffe066!important; border-bottom-color:#ffe98a!important;
  box-shadow:inset 0 2px 5px rgba(0,0,0,.35),inset 0 0 0 1px rgba(255,214,10,.3),0 0 0 #7d5f00!important;
  transform:translateY(2px);
}
/* a quiet button keeps the rim, loses the lift */
.btn:not(.p):not(.primary){ box-shadow:inset 1px 1px 0 rgba(255,255,255,.7),inset -1px -1px 0 rgba(0,0,0,.10),0 2px 0 #c9a200!important; }
.btn:focus-visible,.cta:focus-visible,.l8-open:focus-visible{ outline:2px solid var(--k-blue)!important; outline-offset:3px; }

@media (max-width:760px){ :root{ --k-check:40px; } }
@media (prefers-reduced-motion:reduce){ .btn:active,.cta:active,.l8-open:active{ transform:none!important; } }
@media print{ section::before,header.hero::before,.band::before,.live::before,footer::before{ display:none!important; } }


/* ── BEVEL · specificity ──────────────────────────────────────
   The primary key carries its own .btn.p rule, which outranks a
   bare .btn. Match that weight so the yellow rim lands on every
   key, primary and quiet, link or button element. */
a.btn,button.btn,.btn.p,.btn.primary,.btn.ghost,.btn.tiny,
a.cta,.cta.v,.nmenu .cta,nav .cta,
a.l8-open,.k-pill,
button.se-b,button.btn-primary,input[type=submit],input[type=button]{
  border:2px solid var(--k-yellow)!important;
  border-top-color:#ffe98a!important;
  border-left-color:#ffe066!important;
  border-right-color:#d9a900!important;
  border-bottom-color:#b98c00!important;
  border-radius:14px!important;
  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,.42),
    inset -1px -1px 0 rgba(0,0,0,.30),
    inset 0 0 0 1px rgba(255,214,10,.28),
    0 2px 0 #7d5f00,
    0 8px 18px -10px rgba(0,0,0,.6)!important;
}
a.btn:hover,button.btn:hover,.btn.p:hover,.btn.primary:hover,a.cta:hover,.cta.v:hover,a.l8-open:hover{
  border-top-color:#fff3b8!important; border-left-color:#ffe98a!important;
  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,.55),
    inset -1px -1px 0 rgba(0,0,0,.28),
    inset 0 0 0 1px rgba(255,214,10,.42),
    0 2px 0 #7d5f00,
    0 12px 26px -12px rgba(255,214,10,.45)!important;
}
a.btn:active,button.btn:active,.btn.p:active,.btn.primary:active,a.cta:active,.cta.v:active,a.l8-open:active{
  border-top-color:#b98c00!important; border-left-color:#d9a900!important;
  border-right-color:#ffe066!important; border-bottom-color:#ffe98a!important;
  box-shadow:inset 0 2px 5px rgba(0,0,0,.35),inset 0 0 0 1px rgba(255,214,10,.3)!important;
}
/* the face stays blue on the primary, silver on the quiet one */
a.btn.p,button.btn.p,.btn.primary,a.cta,.cta.v,a.l8-open{
  background-color:var(--k-blue)!important; color:#fff!important;
}
a.btn:not(.p):not(.primary),button.btn:not(.p):not(.primary){
  background-color:var(--k-silver)!important; color:var(--k-graphite)!important;
}


/* ══════════════════════════════════════════════════════════
   CLARITY PASS
   Cleaner colour, calmer surface, more contrast where the eye
   actually reads. The decoration steps back a notch so the text
   can step forward: grain and checker come down, prose comes up,
   and every measured pair clears AA with room to spare.
   ══════════════════════════════════════════════════════════ */

:root{
  /* prose gets brighter on black, darker on silver */
  --k-grey-d:#c9c9ce;      /* body on black   → 11.6:1 */
  --k-grey-l:#4b4b50;      /* body on silver  →  8.6:1 */
  --k-grey:#8e8e93;        /* tertiary only, never body text */
  --k-blue-hi:#4aa8ff;     /* link on black   →  8.0:1 */
  --k-blue-lo:#005bbb;     /* link on silver  →  7.0:1 */
  --k-yellow-ink:#5a3f00;  /* yellow text on silver → 9.4:1 */
  /* the board and the grain, quieter */
  --k-check-a:rgba(255,214,10,.11);
  --k-check-b:rgba(255,214,10,.05);
  --k-line-d:rgba(255,255,255,.14);
  --k-line-d2:rgba(255,255,255,.22);
}
:is(section:nth-of-type(even),.k-light){
  --k-check-a:rgba(245,183,0,.085);
  --k-check-b:rgba(29,29,31,.028);
}
section::after,header.hero::after,.band::after,.live::after,footer::after{ opacity:.022; }
:is(section:nth-of-type(even),.k-light)::after{ opacity:.032; }
/* the checker fades sooner, so the lower half of a section is clean */
section::before,header.hero::before,.band::before,.live::before,footer::before{
  mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.35) 34%,transparent 72%);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.35) 34%,transparent 72%);
}

/* ── text that reads ──────────────────────────────────────────
   Slightly larger, slightly looser, and capped at a line length
   the eye can track without losing its place. */
body{ font-size:17px; line-height:1.65; color:var(--k-grey-d)!important; }
p,li,dd{ font-size:17px; line-height:1.68; }
p,.sub,.lede,.lead,.det,.blurb,li{ max-width:68ch; }
.feat p,.way p,.lq-card p,.rstep p,td,th,.kv .row{ max-width:none; }
h1,.big{ color:#fff!important; }
h2,.sec,h3,h4{ color:#fff!important; }
:is(section:nth-of-type(even),.k-light) :is(h1,h2,h3,h4,.sec,.big){ color:var(--k-graphite)!important; }
:is(section:nth-of-type(even),.k-light) :is(p,li,.sub,.lede,.lead,.det,.blurb,dd){ color:var(--k-grey-l)!important; }
strong,b{ color:#fff; }
:is(section:nth-of-type(even),.k-light) :is(strong,b){ color:var(--k-graphite); }
a:not(.btn):not(.cta):not(.l8-open){ color:var(--k-blue-hi); }
:is(section:nth-of-type(even),.k-light) a:not(.btn):not(.cta):not(.l8-open){ color:var(--k-blue-lo); }
/* .do is the filled blue verb in a two-verb row — a button wearing an <a>, so the
   link colour above painted blue text on the blue pill: measured 1.86:1 on black,
   1.39:1 on silver. Stated as !important rather than by adding another :not() to
   the rule above, because raising that rule's specificity makes it outrank
   docs/liqua-docs.css `.dtoc a:not(...)` and turns the whole docs table of
   contents into 2.3:1 blue-on-silver. White on #0071e3 measures 4.7:1. */
a.do,a.do:hover,a.do:visited{ color:#fff!important; }
/* labels and small print stay legible instead of fading out */
.eyebrow{ color:var(--k-blue-hi)!important; }
:is(section:nth-of-type(even),.k-light) .eyebrow{ color:var(--k-blue-lo)!important; }
small,.small,.note,.det,figcaption,.stat .k{ color:var(--k-grey-d)!important; }
:is(section:nth-of-type(even),.k-light) :is(small,.small,.note,.det,figcaption,.stat .k){ color:var(--k-grey-l)!important; }
.dim,.dimc,.muted{ color:var(--k-grey-d)!important; }

/* ── cleaner colour on the furniture ──────────────────────────
   One surface tone per ground, one hairline, no competing tints. */
.feat,.way,.rstep,.lq-card,.fairbox,.callout,.kv,.eco a,details{
  background-color:rgba(255,255,255,.035)!important;
  border:1px solid var(--k-line-d)!important;
}
:is(section:nth-of-type(even),.k-light) :is(.feat,.way,.rstep,.lq-card,.fairbox,.callout,.kv,.eco a,details){
  background-color:#fff!important; border-color:var(--k-line)!important;
}
.feat:hover,.way:hover,.eco a:hover,.lq-card:hover,details:hover{ border-color:var(--k-blue)!important; }
/* chips: one blue for live, one amber for coming, nothing else */
.lq-chip--live,.chip.live,.v3-live{ background:rgba(0,113,227,.16)!important; color:#8ec8ff!important; border:1px solid rgba(0,113,227,.45)!important; }
.lq-chip--spec,.chip.spec,.v3-coming{ background:rgba(255,214,10,.14)!important; color:#ffd964!important; border:1px solid rgba(255,214,10,.42)!important; }
:is(section:nth-of-type(even),.k-light) :is(.lq-chip--live,.chip.live,.v3-live){ background:#e7f1fd!important; color:#0a4a91!important; border-color:#b9d8f8!important; }
:is(section:nth-of-type(even),.k-light) :is(.lq-chip--spec,.chip.spec,.v3-coming){ background:#fff6cc!important; color:var(--k-yellow-ink)!important; border-color:#ecd68a!important; }

/* ── spacing, cleaned ─────────────────────────────────────────
   88 between ideas, 24 inside a card, 16 between siblings, and
   the same rhythm on a phone at two thirds the size. */
section{ padding:88px 0!important; }
.cards,.ways,.eco,.road,.faq{ gap:var(--s-4)!important; margin-top:var(--s-6)!important; }
.feat,.way,.lq-card,.rstep{ padding:var(--s-5)!important; }
.feat h3,.way h3{ margin-bottom:var(--s-2)!important; }
.feat p,.way p{ margin:0!important; }
.wrap{ padding-left:var(--s-5)!important; padding-right:var(--s-5)!important; }
.btns{ gap:var(--s-3)!important; }
@media (max-width:760px){
  body,p,li,dd{ font-size:16.5px; }
  section{ padding:var(--s-7) 0 var(--s-7)!important; }
  .wrap{ padding-left:var(--s-4)!important; padding-right:var(--s-4)!important; }
}


/* ── SEAM COLLAPSE ────────────────────────────────────────────
   The old skin put a decorative rule between sections. On the
   alternating grounds that reads as a band of black between two
   panels, so the rule keeps its hairline but gives up its space. */
hr.lq-seam,hr.seam{ margin:0!important; height:1px!important; border:0!important;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent)!important; }
:is(section:nth-of-type(even),.k-light) + hr.lq-seam{
  background:linear-gradient(90deg,transparent,rgba(29,29,31,.14),transparent)!important; }


/* ── STAT STRIP FIT ───────────────────────────────────────────
   Five fixed columns fit a wide desktop and nothing else. Let the
   row wrap instead, and let a tile shrink below its content width
   so a long number cannot push the strip past the screen. */
.live .wrap{ grid-template-columns:repeat(auto-fit,minmax(148px,1fr))!important; }
.live .wrap > *{ min-width:0!important; }
.stat .v{ overflow-wrap:anywhere; }
@media (max-width:520px){ .live .wrap{ grid-template-columns:repeat(2,minmax(0,1fr))!important; } }
@media (max-width:380px){ .live .wrap{ grid-template-columns:minmax(0,1fr)!important; } }


/* the dated caption under the measured strip — same gutter as .wrap, but it is
   a line of prose, not another panel in the grid */
.live-note{max-width:1120px;margin:0 auto;padding:10px 24px 16px;
  font-size:12.5px;line-height:1.55;color:var(--k-grey-d);letter-spacing:.01em;}
.live-note a{color:var(--k-blue-hi);text-decoration:none;border-bottom:1px solid rgba(41,151,255,.35);}
.live-note a:hover{border-bottom-color:var(--k-blue-hi);}
@media (max-width:640px){.live-note{padding:10px 16px 14px;font-size:12px;}}

/* a measured value must never be broken across lines mid-word — "undecided"
   rendering as "undecide / d" reads as a rendering fault, not a fact */
.live .v{overflow-wrap:normal!important;word-break:keep-all!important;hyphens:none!important;}

/* Recently shipped · dated entries on the homepage. Three columns that stack,
   each one a date, a claim and the command behind it. */
.ships{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:18px;margin-top:6px}
.ship{background:var(--panel,#0b0b0f);border:1px solid var(--k-line-d);border-radius:14px;
  padding:18px 18px 16px;min-width:0}
.ship .d{font-family:var(--mono,ui-monospace,monospace);font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--k-blue-hi);margin-bottom:8px}
.ship h3{font-size:15.5px;line-height:1.28;letter-spacing:-.006em;margin:0 0 7px}
.ship p{font-size:13.5px;line-height:1.55;color:var(--k-grey-d);margin:0 0 11px}
.ship code{display:block;font-family:var(--mono,ui-monospace,monospace);font-size:11px;
  color:var(--k-silver-2);background:var(--k-graphite);border:1px solid var(--k-line-d);
  border-radius:8px;padding:7px 9px;overflow-x:auto;white-space:nowrap}

/* ══ DECK · flip through the cards without hiding any of them ═══════════
   A carousel shows one card and hides the rest. This lifts one and leaves
   the others exactly where they are, so a reader can still take the whole
   row in. Used on the proof band, the mining loop, the verify commands,
   the four ways in, the rarity bands and the Mind NFT cards. */
[data-deck].deck-on{perspective:1400px}
[data-deck].deck-on > .deck-i{
  transition:transform .55s cubic-bezier(.22,.7,.26,1), opacity .45s ease,
             border-color .45s ease, box-shadow .55s ease, filter .45s ease;
  transform-origin:50% 60%;
  will-change:transform, opacity;
}
/* The card that is not lifted is still a card you are meant to read, so the
   de-emphasis is capped by contrast, not by taste. Element opacity fades the
   text AND the card together onto the section ground, so it costs contrast
   twice. Measured on the worst pair on the page — a link on a white card in a
   silver section — .48 gave 2.30:1 and body prose 2.40:1, both far under AA.
   At .86 the same pairs measure 5.27:1 and 5.93:1, and on black 5.71:1 and
   8.96:1. The lift is carried by the yellow edge, the scale and the shadow,
   which cost no contrast at all. */
[data-deck].deck-on > .deck-i:not(.is-on){
  opacity:.86; filter:saturate(.72);
  transform:rotateY(7deg) scale(.972);
}
[data-deck].deck-on > .deck-i.is-on{
  opacity:1; filter:none;
  transform:rotateY(0deg) translateZ(30px) scale(1.025);
  border-color:var(--k-yellow-d,#f5b700)!important;
  box-shadow:0 18px 44px rgba(0,0,0,.55), 0 0 0 1px rgba(255,214,10,.28);
}
/* the lifted card in the measured strip gets the yellow edge, not a whole box */
.live [data-deck].deck-on > .deck-i.is-on,
[data-deck].deck-on > .stat.is-on{box-shadow:inset 3px 0 0 var(--k-yellow,#ffd60a), 0 14px 34px rgba(0,0,0,.5)}
[data-deck].deck-on > .deck-i{cursor:default}
[data-deck].deck-on > .deck-i:hover{cursor:pointer}

@media (prefers-reduced-motion: reduce){
  /* no cycle, no movement — every card at full strength, which is the
     honest still version of the same information */
  [data-deck].deck-on > .deck-i,
  [data-deck].deck-on > .deck-i:not(.is-on),
  [data-deck].deck-on > .deck-i.is-on{
    transition:none!important; transform:none!important; opacity:1!important;
    filter:none!important; box-shadow:none!important;
  }
}

/* ══ HERO · the loop as three steps ════════════════════════════════════
   One sentence carrying mining, saving and the roadmap at once gave a
   reader all three and none of them in order. */
.lede-steps{list-style:none;margin:18px 0 14px;padding:0;display:grid;gap:11px;max-width:58ch}
.lede-steps li{display:grid;grid-template-columns:auto 1fr;gap:13px;align-items:start}
.lede-steps .s{display:grid;place-items:center;width:25px;height:25px;border-radius:50%;
  font:700 12px/1 var(--f-mono,ui-monospace,monospace);
  color:var(--k-black,#000);background:var(--k-yellow,#ffd60a);flex:none}
.lede-steps p{margin:0;font-size:15.5px;line-height:1.5;color:var(--k-grey-d,#a1a1a6)}
.lede-steps b{color:var(--k-silver,#f5f5f7);font-weight:600}
/* .lede-next removed with the hero's "Coming next" line — the hero is the three steps only */
@media(max-width:560px){.lede-steps p{font-size:14.5px}}