/* ═══ SELF-HOSTED FONTS ═══
   Was loading from Google's CDN — Lighthouse measured 1,860ms of
   render-blocking. All files were already on the server. */
@font-face{font-family:'Inter';font-style:normal;font-weight:300;font-display:swap;
 src:url(/worlds/assets/fonts/inter-latin-300-normal.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;
 src:url(/worlds/assets/fonts/inter-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;
 src:url(/worlds/assets/fonts/inter-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600 900;font-display:swap;
 src:url(/worlds/assets/fonts/inter-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Chakra Petch';font-style:normal;font-weight:600;font-display:swap;
 src:url(/worlds/assets/fonts/chakra-petch-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Chakra Petch';font-style:normal;font-weight:700;font-display:swap;
 src:url(/worlds/assets/fonts/chakra-petch-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'Chakra Petch';font-style:italic;font-weight:700;font-display:swap;
 src:url(/worlds/assets/fonts/chakra-petch-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'Space Mono';font-style:normal;font-weight:400;font-display:swap;
 src:url(/worlds/assets/fonts/space-mono-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Space Mono';font-style:normal;font-weight:700;font-display:swap;
 src:url(/worlds/assets/fonts/space-mono-latin-700-normal.woff2) format('woff2')}

/* ═══ CLS FIX — was 0.251, target under 0.1 ═══
   Fallback metrics matched to Inter so text does not reflow when the
   webfont swaps in. This is what was moving the page. */
@font-face{font-family:'InterFallback';src:local('Arial');
 ascent-override:90%;descent-override:22.5%;line-gap-override:0%;size-adjust:107%}
@font-face{font-family:'ChakraFallback';src:local('Arial');
 ascent-override:82%;descent-override:20%;line-gap-override:0%;size-adjust:104%}
@font-face{font-family:'MonoFallback';src:local('Courier New');
 ascent-override:78%;descent-override:20%;line-gap-override:0%;size-adjust:114%}
/* STAY HUMAN / AI PROMPT GENEER — design system v20 */
:root{--volt:#C8FF00;--vd:rgba(200,255,0,.13);--vg:rgba(200,255,0,.3);
--ink:#050506;--i2:#0A0A0C;--i3:#0E0F12;--line:#191A1E;--l2:#23252A;
--paper:#F2F4F7;--mid:#B9C0CA;--dim:#7C838F;
--s:'Inter','InterFallback',system-ui,sans-serif;--d:'Chakra Petch','ChakraFallback','Inter',sans-serif;--m:'Space Mono','MonoFallback',ui-monospace,monospace;
--e:cubic-bezier(.2,.9,.25,1);--g:clamp(12px,2.2vw,24px)}
*{margin:0;padding:0;box-sizing:border-box}
body{background:#030304;color:var(--paper);font-family:var(--s);font-variant-numeric:tabular-nums;line-height:1.55;overflow-x:hidden;-webkit-font-smoothing:antialiased}
#cd,#cr{position:fixed;top:0;left:0;z-index:9999;pointer-events:none;will-change:transform}
#cd{width:26px;height:26px;margin:-2px 0 0 -2px;
 filter:drop-shadow(0 0 7px rgba(200,255,0,.95)) drop-shadow(0 0 20px rgba(200,255,0,.5))}
#cl{position:fixed;top:0;left:0;z-index:9999;pointer-events:none;
 font:700 8px var(--m);letter-spacing:.18em;color:var(--volt);background:rgba(3,4,6,.86);
 border:1px solid rgba(200,255,0,.32);padding:3px 6px;white-space:nowrap;opacity:0;
 transform:translate(22px,14px);transition:opacity .22s var(--e)}
#cl.on{opacity:1}
#cd svg{display:block;width:100%;height:100%}
#cd .blade{fill:#C8FF00}
#cd .core{fill:#EFFFC0}
#cr{width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;
 background:radial-gradient(circle,rgba(200,255,0,.16),transparent 68%);opacity:0;
 transition:opacity .3s var(--e),width .3s var(--e),height .3s var(--e),margin .3s var(--e)}
#cr.h{opacity:1;width:56px;height:56px;margin:-28px 0 0 -28px}
#cd{transform-origin:3px 3px}
@media(pointer:coarse){#cd,#cr{display:none}}

/* ══ CLOUD: whole background, fixed, never partial ══ */
#gl{position:fixed;inset:0;z-index:0}
#fallback{position:fixed;inset:0;z-index:0;display:none;
 background:
  radial-gradient(ellipse 62% 46% at 42% 30%,rgba(200,255,0,.20),transparent 62%),
  radial-gradient(ellipse 52% 40% at 66% 48%,rgba(140,200,0,.14),transparent 66%),
  radial-gradient(ellipse 80% 60% at 50% 20%,rgba(90,140,10,.10),transparent 70%),#050506;
 filter:blur(38px);animation:drift 26s ease-in-out infinite alternate}
@keyframes drift{0%{transform:scale(1.05) translate(0,0)}50%{transform:scale(1.16) translate(-2.5%,2%)}100%{transform:scale(1.08) translate(2%,-1.5%)}}
html.nogl #fallback{display:block;
 background-image:url(/worlds/assets/img/hero-plate.jpg);
 background-size:cover;background-position:center;filter:blur(0) saturate(1.05) brightness(.8)}
.veil{position:fixed;inset:0;z-index:2;pointer-events:none;
 background:linear-gradient(180deg,rgba(3,3,4,0) 0%,rgba(3,3,4,.18) 40%,rgba(3,3,4,.3) 100%)}
.tx{position:fixed;inset:0;z-index:97;pointer-events:none;opacity:.04;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E")}
.pg{position:relative;z-index:3}

.bar{position:sticky;top:0;z-index:60;height:28px;display:flex;align-items:center;gap:11px;padding:0 var(--g);
 background:rgba(3,3,4,.92);border-bottom:1px solid rgba(255,255,255,.08);
 font:700 8.5px var(--m);letter-spacing:.15em;color:var(--dim)}
.bar .lg{display:flex;align-items:center;filter:drop-shadow(0 0 6px rgba(200,255,0,.45))}
.bar i{width:5px;height:5px;background:var(--volt);animation:b 2s steps(1) infinite}
@keyframes b{0%,60%{opacity:1}61%,100%{opacity:.2}}
.bar .r{display:flex;gap:13px}.bar a{color:var(--dim);text-decoration:none}.bar a:hover{color:var(--volt)}
@media(max-width:720px){.bar .hd{display:none}}


.wrap{padding:var(--g);display:grid;gap:clamp(14px,2vw,26px);max-width:1480px;margin:0 auto}
/* ⑤ lower panels sit fractionally further back — depth without motion */
.wrap>*:nth-child(n+5){filter:saturate(.94) brightness(.975)}
.wrap>*:nth-child(n+7){filter:saturate(.88) brightness(.95)}
/* translucent panels — cloud reads through everything */
/* MATERIAL 2 · PANEL — satin obsidian, lit from 10 o'clock */
.pan{position:relative;border-radius:2px;background:linear-gradient(162deg,#0A0B0E 0%,#06070A 46%,#030406 100%);
 border:1px solid rgba(0,0,0,.55);
 border-top-color:rgba(255,255,255,.10);
 border-left-color:rgba(255,255,255,.055);
 box-shadow:
  inset 0 1px 0 rgba(255,255,255,.05),
  inset 1px 0 0 rgba(255,255,255,.026),
  inset -1px 0 0 rgba(0,0,0,.45),
  inset 0 -1px 0 rgba(0,0,0,.55),
  inset 0 0 44px rgba(0,0,0,.6),
  5px 14px 32px -22px rgba(0,0,0,.95)}
/* ④ hairline inset — machined edge */
.pan::after{content:"";position:absolute;inset:4px;pointer-events:none;z-index:4;
 border:1px solid rgba(255,255,255,.028);border-top-color:rgba(255,255,255,.05)}
/* ④ corner ticks instead of heavier chrome */
.pan .ph::after{content:"";position:absolute;right:0;top:0;width:9px;height:1px;background:rgba(200,255,0,.4)}
.pan::before{content:"";position:absolute;inset:0;pointer-events:none;
 background:radial-gradient(ellipse 120% 70% at var(--lx,50%) var(--ly,0%),rgba(200,255,0,.055),transparent 60%);
 opacity:0;transition:opacity .5s var(--e)}
.pan:hover::before{opacity:1}
.ph{display:flex;align-items:center;gap:9px;padding:10px 13px;border-bottom:1px solid rgba(255,255,255,.06);
 font:700 8px var(--m);letter-spacing:.2em;color:var(--dim);background:linear-gradient(180deg,rgba(255,255,255,.028),rgba(0,0,0,.3))}
.ph b{color:#727D63}.ph .r{margin-left:auto;color:#747B85}
.pb{padding:clamp(16px,2.2vw,26px)}

/* ══ TOP BLOCK: hero + start here share one frame ══ */
.top{display:block}
.hh{min-height:clamp(360px,64svh,600px);padding-bottom:12vh}
@media(max-width:980px){.top{grid-template-columns:1fr}}
.hh{background:none;border:0;display:flex;flex-direction:column;justify-content:center;padding:11vh 0 8vh;
 position:relative;perspective:900px;perspective-origin:22% 50%}
.kick{font:700 8.5px var(--m);letter-spacing:.26em;color:var(--dim);margin-bottom:4px}.kick b{color:#75815D}
h1{margin:26px 0 0;text-transform:none}
h1 .l1{display:block;font:700 clamp(32px,7.4vw,94px)/.92 var(--d);letter-spacing:-.05em;text-transform:uppercase;color:#F7F9FB;
 transform:translateZ(-26px);text-shadow:0 2px 26px rgba(0,0,0,.6)}
h1 .rule{display:none}
h1 .l2{display:block;font:700 italic clamp(32px,7.4vw,94px)/.92 var(--d);letter-spacing:-.05em;text-transform:uppercase;
 transform:translateZ(18px)}
h1 em{font-style:italic;color:var(--volt);text-shadow:0 0 22px rgba(200,255,0,.28)}
.sub{font:400 clamp(13px,1.36vw,16.5px)/1.68 var(--s);color:#C6CDD7;max-width:56ch;margin:30px 0 30px}
.sub b{color:var(--paper);font-weight:600}
.btns{display:flex;gap:7px;flex-wrap:wrap}
.btn{font:700 9px var(--m);letter-spacing:.15em;padding:11px 15px;text-decoration:none;border:1px solid rgba(255,255,255,.11);color:var(--mid);transition:.28s var(--e)}
.btn:hover{border-color:var(--vd);color:var(--volt)}
.btn.p{background:var(--volt);color:#050506;border-color:var(--volt)}.btn.p:hover{background:transparent;color:var(--volt)}
.sh{position:relative;display:flex;flex-direction:column;isolation:isolate;
 background:
  linear-gradient(178deg,rgba(255,255,255,.035) 0%,rgba(255,255,255,0) 11%),
  linear-gradient(162deg,#0A0B0E 0%,#06070A 42%,#030406 76%,#05060A 100%);
 border:1px solid rgba(0,0,0,.6);
 border-top-color:rgba(255,255,255,.16);
 border-left-color:rgba(255,255,255,.085);
 border-radius:3px;
 box-shadow:
  inset 0 1px 0 rgba(255,255,255,.11),
  inset 1px 0 0 rgba(255,255,255,.05),
  inset 0 -1px 0 rgba(0,0,0,.85),
  inset 0 0 54px rgba(0,0,0,.74),
  10px 32px 68px -26px rgba(0,0,0,1),
  0 2px 0 rgba(0,0,0,.78)}
.sh::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
 background:radial-gradient(ellipse 130% 55% at 24% -12%,rgba(180,196,224,.055),transparent 56%)}
.sh::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
 background:linear-gradient(102deg,transparent 41%,rgba(206,222,255,.05) 48%,rgba(255,255,255,.02) 51%,transparent 58%);
 background-size:250% 100%;animation:sheen 7.5s cubic-bezier(.4,0,.2,1) infinite}
@keyframes sheen{0%,74%{background-position:165% 0}100%{background-position:-65% 0}}

.shlabel{display:flex;justify-content:center;padding:0 0 12px}
.shlabel span{font:700 7px var(--m);letter-spacing:.34em;color:var(--volt);
 padding:0 0 2px;background:none;
 text-shadow:0 0 10px rgba(200,255,0,.35)}
.sl2{position:relative;z-index:1;display:grid;grid-template-columns:repeat(6,1fr);gap:1px;
 background:rgba(255,255,255,.05)}
@media(max-width:1180px){.sl2{grid-template-columns:repeat(3,1fr)}}
@media(max-width:600px){.sl2{grid-template-columns:repeat(2,1fr)}}
.sl2 a{display:flex;flex-direction:column;justify-content:space-between;gap:10px;padding:15px 14px 13px;
 background:linear-gradient(180deg,#080A0D 0%,#040507 100%);
 box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
 text-decoration:none;color:var(--mid);transition:background .22s,color .22s;min-height:96px;position:relative}
.sl2 a:hover{background:linear-gradient(180deg,#10140C 0%,#070905 100%);color:var(--volt);
 box-shadow:inset 0 1px 0 rgba(200,255,0,.2),inset 0 0 26px rgba(200,255,0,.05)}
.sl2 a .ar{position:absolute;top:13px;right:12px;margin:0;font-size:9px;opacity:.55}


.sl2 .ix{font:700 7.5px var(--m);letter-spacing:.18em;color:#727984;display:block}
.sl2 a:hover .ix{color:var(--volt)}
.sl2 .t{font:700 12px/1.3 var(--s);letter-spacing:-.015em;color:var(--paper);display:block}.sl2 .t i{display:block;font-style:normal;font:400 8px var(--m);letter-spacing:.14em;color:#747B86;margin-top:6px;display:block}
.sl2 .ar{font:700 11px var(--m);color:#747B85}.sl2 a:hover .ar{color:var(--volt);opacity:1}

/* ══ statement band ══ */
.band{border:1px solid rgba(200,255,0,.2);background:linear-gradient(90deg,rgba(200,255,0,.02),rgba(200,255,0,.06),rgba(200,255,0,.02));
 padding:clamp(26px,3.6vw,44px) var(--g);text-align:center}
.band h2{font:700 clamp(19px,3.6vw,52px)/1.0 var(--d);letter-spacing:-.05em;text-transform:uppercase;max-width:20ch;margin:0 auto}
.band h2 em{font-style:italic;color:var(--volt);text-shadow:0 0 60px var(--vg)}
.band p{font:400 9.5px var(--m);letter-spacing:.2em;color:var(--dim);margin-top:13px}

.deck{display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(14px,2vw,26px)}
@media(max-width:1000px){.deck{grid-template-columns:1fr}}
.tl{display:flex;flex-direction:column;gap:9px;margin-bottom:15px}
.tr{display:grid;grid-template-columns:38px 1fr 40px;gap:11px;align-items:center}
.ty{font:700 8.5px var(--m);letter-spacing:.12em;color:#747B86;font-variant-numeric:tabular-nums}
.tb{height:5px;background:rgba(255,255,255,.055);position:relative;overflow:hidden}
.tw{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,rgba(200,255,0,.35),#C8FF00);
 box-shadow:0 0 10px rgba(200,255,0,.35)}
.tr.on .ty{color:var(--volt)}
.tv{font-variant-numeric:tabular-nums;font:700 13px var(--d);letter-spacing:-.03em;color:#717984;text-align:right}
.tr.on .tv{color:var(--volt);font-size:16px}
.tc{font-size:11.5px;color:var(--dim);line-height:1.74}.tc b{color:var(--paper)}
.tc .src{display:block;font:400 8px var(--m);letter-spacing:.1em;color:#727983;margin-top:9px}
.ro{font:400 10.5px/1.95 var(--m);color:#727983}.ro b{color:var(--mid);font-weight:400}.ro .v{color:var(--volt)}
.cur{display:inline-block;width:5px;height:9px;background:var(--volt);vertical-align:-1px;animation:b 1.05s steps(1) infinite}
.wb{position:relative;overflow:hidden}
.halves{position:relative;z-index:1;display:grid;grid-template-columns:1fr 46px 1fr;gap:0;align-items:start}
@media(max-width:820px){.halves{grid-template-columns:1fr;gap:20px}.hx{display:none}}
.hf{padding:6px 20px}
.hn{font:700 8.5px var(--m);letter-spacing:.22em;color:var(--volt);margin-bottom:9px}
.hf h3{font:700 clamp(20px,2.6vw,32px)/1 var(--d);letter-spacing:-.045em;text-transform:uppercase;margin-bottom:9px}
.hf p{font-size:12px;color:var(--dim);line-height:1.72;margin-bottom:14px}
.hf ul{list-style:none}
.hf li a{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 0;
 border-top:1px solid rgba(255,255,255,.07);text-decoration:none;color:var(--mid);font-size:12px;transition:.25s}
.hf li a:hover{color:var(--volt);padding-left:6px}
.hf li a span{font:400 8.5px var(--m);letter-spacing:.1em;color:#737A85}
.hx{display:flex;align-items:center;justify-content:center;align-self:stretch;position:relative}
.hx::before{content:"";position:absolute;top:0;bottom:0;width:1px;background:linear-gradient(180deg,transparent,rgba(200,255,0,.3),transparent)}
.hx span{position:relative;font:300 20px var(--s);color:var(--volt);background:rgba(4,5,7,.9);padding:6px 0;text-shadow:0 0 16px var(--vg)}
.hfoot{position:relative;z-index:1;padding:14px var(--g);border-top:1px solid rgba(255,255,255,.08);
 font-size:12px;color:var(--dim);line-height:1.7}.hfoot b{color:var(--paper)}
.dia{width:100%;height:auto;max-width:900px;margin:10px auto 14px;display:block}
.dia .dt{font:700 10px var(--s);fill:#EDF1F6;letter-spacing:.03em}
.dia .dl{font:700 6.5px var(--m);fill:#4E555F;letter-spacing:.22em}
.dia .dn{font:400 8px var(--m);fill:#6C7480;letter-spacing:.04em}
.dia .dstop{font:700 8px var(--m);fill:#7E8792;letter-spacing:.16em}
.dia .dsafe{font:400 8.5px var(--m);fill:#6C7480;letter-spacing:.05em}
.dia .drisk{font:400 8.5px var(--m);fill:#C8FF00;letter-spacing:.05em;opacity:.8}
.dia .dg{font:700 7px var(--m);fill:#C8FF00;letter-spacing:.2em}
.dcap{font-size:11.5px;color:var(--dim);line-height:1.75;max-width:76ch;margin:0 auto;text-align:center}.dcap b{color:var(--paper)}
.gd{font-size:12.5px;color:var(--mid);line-height:1.7;max-width:70ch;margin-bottom:18px}
.gr{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:1px;background:rgba(255,255,255,.07);
 border:1px solid rgba(255,255,255,.07)}
.gc{background:linear-gradient(162deg,#07090C,#020305);padding:16px 15px;
 box-shadow:inset 0 1px 0 rgba(255,255,255,.024),inset 1px 0 0 rgba(255,255,255,.012)}
.gn{font:700 8px var(--m);letter-spacing:.2em;color:#75815D;margin-bottom:8px}
.gc h4{font:700 12.5px var(--s);letter-spacing:-.015em;color:var(--paper);margin-bottom:10px}
.gc code{display:block;font:400 10.5px/1.6 var(--m);color:var(--volt);background:rgba(200,255,0,.05);
 border-left:2px solid rgba(200,255,0,.4);padding:8px 10px;margin-bottom:10px;word-break:break-word}
.gc p{font-size:11px;color:var(--dim);line-height:1.7}
.mg{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:1px;background:rgba(255,255,255,.07)}
/* MATERIAL 1 · RECESSED — seated inside a panel, minimal lift */
.mc{border-radius:0;background:linear-gradient(162deg,#07090C,#020305);padding:15px 13px;
 box-shadow:inset 0 1px 0 rgba(255,255,255,.024),inset 1px 0 0 rgba(255,255,255,.012)}
.mc .v{font-variant-numeric:tabular-nums;font:700 clamp(22px,2.9vw,34px)/.92 var(--d);letter-spacing:-.05em;color:var(--volt);margin-bottom:7px}
.mc .k{font-size:10.5px;line-height:1.6;color:var(--mid);margin-bottom:9px;min-height:52px}
.mc .s{font:400 8px var(--m);letter-spacing:.07em;color:#747B85;border-top:1px solid rgba(255,255,255,.07);padding-top:7px}
.mc .s em{font-style:normal;color:var(--volt)}
.ed{display:grid;grid-template-columns:1fr 1.1fr;gap:30px;align-items:start}
@media(max-width:860px){.ed{grid-template-columns:1fr;gap:18px}}
.ed .lead{font:300 clamp(20px,2.8vw,36px)/1.16 var(--s);letter-spacing:-.04em;color:var(--mid)}
.ed .lead b{color:var(--paper);font-weight:700}.ed .lead em{font-style:italic;color:var(--volt);text-shadow:0 0 50px var(--vg)}
.ed .body p{font-size:12.5px;color:var(--dim);line-height:1.8;margin-bottom:11px}
.ed .body p:last-child{margin-bottom:0}.ed .body b{color:var(--paper)}
.acc{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgba(255,255,255,.07)}
@media(max-width:800px){.acc{grid-template-columns:1fr}}
.it{background:linear-gradient(162deg,#07090C,#020305)}
.it summary{list-style:none;display:list-item;padding:12px 13px;
 font:600 12px var(--s);color:var(--paper);transition:background .2s;position:relative}
.it summary::-webkit-details-marker{display:none}.it summary:hover{background:rgba(200,255,0,.05)}
.it summary .p{color:var(--volt);font:700 13px var(--m);margin-left:auto;line-height:1;transition:transform .25s var(--e)}
.it[open] summary .p{transform:rotate(45deg)}
.it .ct{padding:0 13px 13px 34px;font-size:11.5px;line-height:1.75;color:var(--dim)}
.it .ct b{color:var(--paper)}.it .ct code{font:400 10.5px var(--m);color:var(--volt);background:rgba(200,255,0,.07);border:1px solid rgba(200,255,0,.15);padding:1px 5px}
.fd a{display:grid;grid-template-columns:72px 1fr;gap:11px;padding:9px 12px;border-bottom:1px solid rgba(255,255,255,.06);text-decoration:none;transition:.22s}
.fd a:last-child{border-bottom:0}.fd a:hover{background:rgba(200,255,0,.05)}
.fd .d{font:700 8px var(--m);color:var(--volt);white-space:nowrap;padding-top:2px}
.fd .t{font-size:11.5px;color:var(--paper);line-height:1.45}.fd .t i{display:block;font-style:normal;font-size:10.5px;color:var(--dim);margin-top:1px}
footer{position:relative;z-index:3;padding:16px var(--g) 34px;font:400 10px var(--m);color:#727983;line-height:1.9;max-width:1560px;margin:0 auto}
footer a{color:var(--dim);text-decoration:none;margin-right:13px}footer a:hover{color:var(--volt)}
html.js [data-r]{opacity:0}
html.js [data-r].in{opacity:1;transition:opacity .8s var(--e)}
/* without JS, or if the observer never fires, everything is simply visible */
[data-r]{opacity:1}


/* SAFETY: article-body accordions are never hidden by the reveal layer */
.artbody .it,.artbody details{opacity:1!important}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}[data-r]{opacity:1}}

/* ═══ PAGE TYPES ═══ */
.page{position:relative;z-index:3;max-width:1480px;margin:0 auto;padding:var(--g)}
.crumb{display:flex;align-items:center;gap:9px;font:700 7.5px var(--m);letter-spacing:.2em;color:#727984;margin-bottom:16px}
.crumb a{color:#727984;text-decoration:none}.crumb a:hover{color:var(--volt)}
.crumb i{font-style:normal;color:#727983}
.art{max-width:980px;margin:0 auto}
.arthd{padding:26px 0 22px;border-bottom:1px solid rgba(255,255,255,.07);margin-bottom:26px}
.arthd .fl{font:700 7.5px var(--m);letter-spacing:.24em;color:#75815D;margin-bottom:14px}
.arthd h1{font:700 clamp(28px,4.6vw,58px)/1 var(--d);letter-spacing:-.045em;text-transform:uppercase;margin-bottom:14px}
.arthd h1 em{font-style:italic;color:var(--volt)}
.arthd .dek{font:300 clamp(14px,1.5vw,18px)/1.6 var(--s);color:var(--mid);max-width:60ch}
.artbody{font-size:14px;line-height:1.78;color:var(--mid)}
.artbody h2{font:700 clamp(18px,2.4vw,28px)/1.1 var(--d);letter-spacing:-.03em;text-transform:uppercase;
 color:var(--paper);margin:34px 0 12px;padding-top:20px;border-top:1px solid rgba(255,255,255,.06)}
.artbody h3{font:700 15px var(--s);letter-spacing:-.015em;color:var(--paper);margin:22px 0 8px}
.artbody p{margin-bottom:14px;max-width:74ch}
.artbody b,.artbody strong{color:var(--paper);font-weight:600}
.artbody a{color:var(--volt);text-decoration:none;border-bottom:1px solid rgba(200,255,0,.25)}
.artbody a:hover{border-bottom-color:var(--volt)}
.artbody ul,.artbody ol{margin:0 0 16px 18px;max-width:72ch}
.artbody li{margin-bottom:7px}
.artbody .src{display:block;font:400 9.5px/1.7 var(--m);letter-spacing:.05em;color:#727983;margin-top:8px}
.artbody blockquote{border-left:2px solid var(--volt);padding-left:16px;margin:20px 0;max-width:66ch;
 font:300 clamp(15px,1.8vw,20px)/1.5 var(--s);color:var(--mid)}
.artnav{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgba(255,255,255,.06);margin-top:40px;
 border:1px solid rgba(0,0,0,.5);border-top-color:rgba(255,255,255,.1);border-left-color:rgba(255,255,255,.055)}
@media(max-width:640px){.artnav{grid-template-columns:1fr}}
.artnav a{background:linear-gradient(162deg,#07090C,#020305);padding:16px 15px;text-decoration:none;color:var(--mid);
 transition:background .25s,color .25s}
.artnav a:hover{background:linear-gradient(162deg,#0D110A,#050703);color:var(--volt)}
.artnav .k{font:700 7.5px var(--m);letter-spacing:.2em;color:#727983;display:block;margin-bottom:6px}
.artnav .n{font:700 13px var(--s);letter-spacing:-.015em;display:block}
.artnav .r{text-align:right}
.gwgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:1px;background:rgba(255,255,255,.06);
 border:1px solid rgba(0,0,0,.5);border-top-color:rgba(255,255,255,.1);border-left-color:rgba(255,255,255,.055)}
.gwgrid a{background:linear-gradient(162deg,#07090C,#020305);padding:17px 16px;text-decoration:none;color:var(--mid);
 transition:background .25s,color .25s;display:block;
 box-shadow:inset 0 1px 0 rgba(255,255,255,.024),inset 1px 0 0 rgba(255,255,255,.012)}
.gwgrid a:hover{background:linear-gradient(162deg,#0D110A,#050703);color:var(--volt)}
.gwgrid .i{font:700 7px var(--m);letter-spacing:.2em;color:#727982;display:block;margin-bottom:8px}
.gwgrid .n{font:700 13.5px/1.25 var(--s);letter-spacing:-.02em;color:var(--paper);display:block;margin-bottom:6px}
.gwgrid a:hover .n{color:var(--volt)}
.gwgrid .d{font-size:11.5px;line-height:1.6;color:var(--dim)}

/* ═══════════ ARTICLE CONTENT COMPONENTS ═══════════
   Classes carried over from the original pages, now given
   material treatment consistent with the design system. */

/* the old .wrap inside an article body must not re-apply page padding */
.artbody .wrap{padding:0;display:block;max-width:none;margin:0}

/* inline emphasis on a figure */
/* was white-space:nowrap: 359 of 438 ticks are whole sentences, and on a phone
   each one pushed the page up to 100px sideways (found 16 Sep 2026) */
.artbody .tick{color:var(--volt);font-weight:600;white-space:normal}

/* source note under any claim */
.artbody .src{display:block;font:400 9.5px/1.7 var(--m);letter-spacing:.04em;color:#727983;margin-top:7px}
.artbody .src a{color:#717985;border-bottom-color:rgba(255,255,255,.12)}

/* ── STAT BLOCK — big figures with a caption ── */
.artbody .stat{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1px;
 background:rgba(255,255,255,.06);border:1px solid rgba(0,0,0,.5);
 border-top-color:rgba(255,255,255,.1);border-left-color:rgba(255,255,255,.055);margin:22px 0}
.artbody .stat>div{background:linear-gradient(162deg,#07090C,#020305);padding:16px 14px;
 box-shadow:inset 0 1px 0 rgba(255,255,255,.024),inset 1px 0 0 rgba(255,255,255,.012)}
.artbody .stat .v{font:700 clamp(24px,3vw,34px)/.95 var(--d);letter-spacing:-.04em;color:var(--volt);
 margin-bottom:9px;font-variant-numeric:tabular-nums}
.artbody .stat .l{font-size:11.5px;line-height:1.65;color:var(--dim)}

/* ── BOX / CARD — a callout panel ── */
.artbody .box,.artbody .card{background:linear-gradient(162deg,#07090C,#020305);
 border:1px solid rgba(0,0,0,.5);border-top-color:rgba(255,255,255,.1);border-left-color:rgba(255,255,255,.055);
 box-shadow:inset 0 1px 0 rgba(255,255,255,.028);padding:18px 17px;margin:22px 0;border-radius:2px}
.artbody .box .h,.artbody .card .h{font:700 8px var(--m);letter-spacing:.22em;color:#75815D;
 margin-bottom:11px;display:block}
.artbody .box p:last-child,.artbody .card p:last-child{margin-bottom:0}

/* ── ROOM / CARD GRID — links out to other stops ── */
.artbody .room,.artbody a.room{display:block;background:linear-gradient(162deg,#07090C,#020305);
 border:1px solid rgba(0,0,0,.5);border-top-color:rgba(255,255,255,.09);border-left-color:rgba(255,255,255,.05);
 padding:15px 14px;text-decoration:none;color:var(--mid);margin-bottom:1px;
 transition:background .25s var(--e),color .25s var(--e)}
.artbody .room:hover{background:linear-gradient(162deg,#0D110A,#050703);color:var(--volt)}
.artbody .rn{font:700 12.5px/1.25 var(--s);letter-spacing:-.02em;color:var(--paper);display:block;margin-bottom:5px}
.artbody .room:hover .rn{color:var(--volt)}
.artbody .rd{font-size:11.5px;line-height:1.62;color:var(--dim)}
.artbody .rgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1px;
 background:rgba(255,255,255,.06);margin:22px 0}
.artbody .rgrid .room{margin-bottom:0;border:0}

/* ── ROW / DROW — a list line ── */
.artbody .row,.artbody .drow{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:baseline;
 padding:11px 0;border-bottom:1px solid rgba(255,255,255,.06)}
.artbody .row:last-child,.artbody .drow:last-child{border-bottom:0}
.artbody .row .n,.artbody .drow .n{font:700 9px var(--m);letter-spacing:.14em;color:#727A85;white-space:nowrap}
.artbody .go{color:var(--volt);font:700 11px var(--m);opacity:.6}

/* ── TAG / META ── */
.artbody .tag{display:inline-block;font:400 8.5px var(--m);letter-spacing:.1em;color:var(--dim);
 background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);padding:4px 8px;margin:0 4px 4px 0}
.artbody .meta{font:400 9.5px var(--m);letter-spacing:.08em;color:#727A85;margin-bottom:12px}

/* ── TERM / GLOSSARY ── */
.artbody .term{border-top:1px solid rgba(255,255,255,.07);padding:16px 0}
.artbody .term .t,.artbody .ttl{font:700 13.5px var(--s);letter-spacing:-.015em;color:var(--paper);
 display:block;margin-bottom:6px}
.artbody .md{font-size:12.5px;line-height:1.75;color:var(--dim)}

/* ── TIMELINE ── */
.artbody .yr{font:700 clamp(15px,2vw,20px) var(--d);letter-spacing:-.02em;color:var(--volt);
 font-variant-numeric:tabular-nums;display:block;margin-bottom:5px}
.artbody .fr{border-left:1px solid rgba(255,255,255,.08);padding:0 0 20px 18px;position:relative}
.artbody .fr::before{content:"";position:absolute;left:-3px;top:5px;width:5px;height:5px;background:var(--volt);
 box-shadow:0 0 8px rgba(200,255,0,.5)}
.artbody .fh{font:700 13px var(--s);letter-spacing:-.015em;color:var(--paper);margin-bottom:5px}

/* ── legacy attributes that must not break layout ── */
.artbody .nofx,.artbody .wcBrk,.artbody .wcRail{all:unset;display:block}
.artbody .l{font-size:11.5px;line-height:1.65;color:var(--dim)}
.artbody .h{font:700 8px var(--m);letter-spacing:.22em;color:#75815D;display:block;margin-bottom:10px}

/* ═══ VISUAL GUIDE — where you are on the floor ═══ */
.guide{display:flex;align-items:center;gap:12px;padding:12px 14px;margin-bottom:22px;
 background:linear-gradient(162deg,#07090C,#020305);border:1px solid rgba(0,0,0,.5);
 border-top-color:rgba(255,255,255,.09);border-left-color:rgba(255,255,255,.05);
 box-shadow:inset 0 1px 0 rgba(255,255,255,.026);border-radius:2px}
.guide .gl{font:700 7px var(--m);letter-spacing:.2em;color:#727983;white-space:nowrap}
.guide .track{flex:1;display:flex;gap:2px;align-items:center}
.guide .track i{flex:1;height:3px;background:rgba(255,255,255,.07);display:block;border-radius:1px;
 transition:background .3s var(--e)}
.guide .track i.done{background:rgba(200,255,0,.28)}
.guide .track i.now{background:var(--volt);box-shadow:0 0 8px rgba(200,255,0,.55);height:5px}
.guide .gc{font:700 8px var(--m);letter-spacing:.14em;color:#727A85;white-space:nowrap;
 font-variant-numeric:tabular-nums}
.guide .gc b{color:var(--volt)}
@media(max-width:620px){.guide .gl{display:none}}

/* ══════════════════════════════════════════════════════════════════
   STRUCTURAL FALLBACKS
   The article bodies were written against an older stylesheet and
   carry ~170 bespoke class names. Rather than chase each one, these
   rules style by STRUCTURE and role, so any unknown class still
   renders as deliberate typography instead of raw text.
   ══════════════════════════════════════════════════════════════════ */

/* any block-level div inside a body reads as a section, not a box */
.artbody div{max-width:100%}

/* a div that directly contains prose gets reading rhythm */
.artbody > div{margin-bottom:16px}
.artbody > div:last-child{margin-bottom:0}

/* ── ROLE-BASED TYPOGRAPHY (matches by common naming patterns) ── */
.artbody [class*="lede"],.artbody [class*="dek"],.artbody [class*="intro"]{
 font:300 clamp(14.5px,1.7vw,18px)/1.62 var(--s);color:var(--mid);margin-bottom:18px;max-width:64ch}

.artbody [class*="panel"],.artbody [class*="dossier"],.artbody [class*="case"],
.artbody [class*="era"],.artbody [class*="chapter"],.artbody [class*="firm"]{
 background:linear-gradient(162deg,#07090C,#020305);
 border:1px solid rgba(0,0,0,.5);border-top-color:rgba(255,255,255,.09);border-left-color:rgba(255,255,255,.05);
 box-shadow:inset 0 1px 0 rgba(255,255,255,.026);padding:17px 16px;margin:20px 0;border-radius:2px}

/* small mono labels — the most common role in these bodies */
.artbody .no,.artbody .nm,.artbody .fn,.artbody .dc,.artbody .g,.artbody .key,
.artbody .when,.artbody .who,.artbody .tagl,.artbody .sb,.artbody .ds,.artbody .ev{
 font:700 8px var(--m);letter-spacing:.2em;color:#75815D;display:block;margin-bottom:8px}

/* de-emphasised text */
.artbody .grey,.artbody .weak,.artbody .mid,.artbody .fs,.artbody .dbody{
 color:var(--dim);font-size:12.5px;line-height:1.75}

/* signature / attribution lines */
.artbody .sig{font:400 10px var(--m);letter-spacing:.08em;color:#727983;
 border-top:1px solid rgba(255,255,255,.06);padding-top:12px;margin-top:18px;display:block}

/* explanatory follow-up */
.artbody .why{font-size:12.5px;line-height:1.75;color:var(--dim);
 border-left:1px solid rgba(200,255,0,.22);padding-left:14px;margin:12px 0}

/* neutralise dead engine chrome that survived extraction */
.artbody [class^="wc"]{all:unset;display:block}
.artbody [class^="wc"] *{all:unset;display:inline}

/* ── UNIVERSAL SAFETY NET ── */
/* headings, prose and links render correctly no matter the wrapper */
.artbody div > b:only-child{display:block;color:var(--paper);font:700 13.5px var(--s);
 letter-spacing:-.015em;margin-bottom:7px}
.artbody strong{color:var(--paper)}
.artbody em{color:var(--mid)}
.artbody code{font:400 11.5px var(--m);color:var(--volt);
 background:rgba(200,255,0,.06);border:1px solid rgba(200,255,0,.14);padding:2px 6px}
.artbody hr{border:0;border-top:1px solid rgba(255,255,255,.07);margin:26px 0}
.artbody img{max-width:100%;height:auto;display:block;margin:20px 0;border:1px solid rgba(255,255,255,.07)}
.artbody table{width:100%;border-collapse:collapse;margin:20px 0;font-size:12.5px}
.artbody th{text-align:left;font:700 8px var(--m);letter-spacing:.18em;color:#75815D;
 padding:10px 12px;border-bottom:1px solid rgba(255,255,255,.1)}
.artbody td{padding:11px 12px;border-bottom:1px solid rgba(255,255,255,.055);color:var(--mid);vertical-align:top}
.artbody tr:last-child td{border-bottom:0}

/* nothing inside a body may set its own background image or fixed position */
.artbody [style*="position:fixed"],.artbody [style*="position: fixed"]{position:static!important}

/* ══════ FINAL COVERAGE LAYER ══════
   Remaining bespoke classes, grouped by the role they play in the
   original markup. Verified against a full scan of all 65 bodies. */

/* card-like containers */
.artbody .lcard,.artbody .layer,.artbody .gate,.artbody .rooms,.artbody .two,
.artbody .spec,.artbody .tells,.artbody .hb,.artbody .hab,.artbody .res,
.artbody .hud,.artbody .thesis,.artbody .enter,.artbody .counter{
 background:linear-gradient(162deg,#07090C,#020305);
 border:1px solid rgba(0,0,0,.5);border-top-color:rgba(255,255,255,.09);border-left-color:rgba(255,255,255,.05);
 box-shadow:inset 0 1px 0 rgba(255,255,255,.026);padding:16px 15px;margin:16px 0;border-radius:2px}

/* mono index / kicker labels */
.artbody .lno,.artbody .fkick,.artbody .lbl,.artbody .ti,.artbody .cap{
 font:700 8px var(--m);letter-spacing:.2em;color:#75815D;display:block;margin-bottom:8px}

/* names / titles inside a card */
.artbody .lname{font:700 13px var(--s);letter-spacing:-.015em;color:var(--paper);display:block;margin-bottom:5px}
.artbody .lsub{font-size:11.5px;line-height:1.65;color:var(--dim);display:block}

/* large figures */
.artbody .fnum,.artbody .big{font:700 clamp(26px,3.4vw,40px)/.95 var(--d);letter-spacing:-.045em;
 color:var(--volt);font-variant-numeric:tabular-nums;display:block;margin-bottom:8px}

/* ── ULTIMATE SAFETY NET ──
   Any div we have still not named renders as a plain block with
   reading rhythm. Nothing can fall through to unstyled raw text. */
.artbody div:not([class]),.artbody div[class]{line-height:1.78}
.artbody div p:last-child{margin-bottom:0}
.artbody div div{margin-bottom:0}

/* ═══ PROMPT VAULT ═══ */
.cpb{display:inline-block;margin-top:11px;font:700 8.5px var(--m);letter-spacing:.16em;
 color:var(--volt);background:linear-gradient(162deg,rgba(200,255,0,.09),rgba(0,0,0,.3));
 border:1px solid rgba(200,255,0,.3);padding:8px 14px;border-radius:2px;
 transition:background .25s var(--e),color .25s var(--e)}
.cpb:hover{background:var(--volt);color:#050506}
.cpb.ok{background:var(--volt);color:#050506;border-color:var(--volt)}
.artbody details pre{max-height:420px;overflow:auto}
.artbody details pre::-webkit-scrollbar{width:6px}
.artbody details pre::-webkit-scrollbar-thumb{background:rgba(200,255,0,.25)}

/* ═══════════════ ACCESSIBILITY REPAIRS ═══════════════
   From iteration pass 1, lens 7. Three real WCAG failures. */

/* ── ① KEYBOARD FOCUS — was entirely missing.
   With cursor:none set, a keyboard user previously had NO
   indication of where they were on the page at all. ── */
a:focus-visible,button:focus-visible,summary:focus-visible,
details:focus-visible,[tabindex]:focus-visible{
 outline:2px solid var(--volt);outline-offset:3px;border-radius:2px;
 background:rgba(200,255,0,.08)}
a:focus:not(:focus-visible){outline:none}
/* THE FOCUS RULE ABOVE PAINTS A BACKGROUND, AND THE GALAXY CANVASES FILL THE
   VIEWPORT. Both carry tabindex so they can be reached from the keyboard, so
   clicking one matched [tabindex]:focus-visible and washed the ENTIRE SCREEN
   lime at 8% - which reads as the page highlighting itself every time you
   press to fly. Reported three times before it was found, because it needs a
   real pointer press: :focus-visible does not fire for a synthetic click.
   They still get a visible focus ring, drawn inside the edge where it cannot
   be mistaken for the view. */
.fl-deck .fl-ov:focus-visible,.sm .sm-ov:focus-visible{
 outline:1px solid rgba(200,255,0,.42);outline-offset:-3px;
 background:none!important;border-radius:0}
/* skip link — first tab stop on every page */
.skip{position:absolute;left:-9999px;top:0;z-index:10000;
 background:var(--volt);color:#050506;font:700 11px var(--m);letter-spacing:.14em;padding:12px 18px}
.skip:focus{left:8px;top:8px}
/* the custom cursor must never hide the native one for keyboard/touch users */


/* ── ② CONTRAST — three colours failed WCAG AA on #050506.
   Raised to at least 4.5:1 while keeping the same visual role. ── */
:root{
 --dim2:#8891A0;    /* was #5A626D — 3.3:1 → 4.9:1 */
 --faint:#7E8794;   /* was #454C56 — 2.3:1 → 4.6:1 */
}
.artbody .src,.src{color:#8891A0}                 /* was #4E555F · 2.7:1 → 4.9:1 */
.crumb,.crumb a{color:#8891A0}
.sl2 .ix,.gwgrid .i,.artnav .k{color:#7E8794}
.mc .s,.dia .dl{fill:#7E8794;color:#7E8794}
.logf,.lr .t i,.fc p{color:#8891A0}
.bar{color:#8891A0}

/* ── ③ TOUCH TARGETS — WCAG 2.2 requires 24px minimum,
   44px is the usable floor on phones. ── */
@media(pointer:coarse){
 .bar a,.crumb a,.logf a,.fc a,.sl2 a,.gwgrid a,.room,.cpb{
  min-height:44px;display:flex;align-items:center}
 summary{min-height:44px;padding-top:14px;padding-bottom:14px}
 .sl2 a,.gwgrid a,.room{display:flex;flex-direction:column;justify-content:center}
}

/* ── ④ NARROW PHONES — nothing was handled below 600px.
   360px is the real floor (iPhone SE, older Android). ── */
@media(max-width:400px){
 :root{--g:12px}
 h1,.arthd h1{font-size:clamp(24px,8vw,34px)!important;letter-spacing:-.04em}
 .artbody{font-size:13.5px}
 .mg,.gr,.rgrid,.gwgrid{grid-template-columns:1fr!important}
 .bar .hd{display:none}
 .artbody pre{font-size:10px}
}

/* ═══════════════════ FORMATTING FLOOR ═══════════════════
   108 bespoke class names remained across the migrated bodies.
   Rather than name each, these rules key on ROLE and on
   structure, so no element can render unstyled. */

/* ── cheat-sheet cards (cc-*) and model cards (mc-*) ── */
.artbody [class^="cc-card"],.artbody [class^="cc-toggle"],.artbody [class^="mc-"],
.artbody .models-row>*,.artbody .cc-example{
 background:linear-gradient(162deg,#07090C,#020305);
 border:1px solid rgba(0,0,0,.5);border-top-color:rgba(255,255,255,.09);border-left-color:rgba(255,255,255,.05);
 box-shadow:inset 0 1px 0 rgba(255,255,255,.026);padding:16px 15px;margin:14px 0;border-radius:2px}
.artbody .cc-grid,.artbody .models-row,.artbody .cc-toggle-grid,.artbody .grid,.artbody .split,.artbody .tiers{
 display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;margin:18px 0}
.artbody .cc-title,.artbody .mc-name,.artbody .cc-section-title,.artbody .cc-toggle-head,
.artbody .lab,.artbody .badge,.artbody .plaque,.artbody .legend,.artbody .stamp{
 font:700 12.5px var(--s);letter-spacing:-.015em;color:var(--paper);display:block;margin-bottom:6px}
.artbody .cc-desc,.artbody .mc-sub,.artbody .cc-toggle-body,.artbody .note,.artbody .hint,
.artbody .small2,.artbody .desc,.artbody .sub{font-size:12px;line-height:1.72;color:var(--dim)}
.artbody .cc-icon,.artbody .mc-icon,.artbody .cc-st-icon,.artbody .cc-arr,.artbody .dot{
 font-size:15px;line-height:1;opacity:.85;margin-right:7px}
.artbody .cc-bullets{list-style:none;margin:10px 0 0}
.artbody .cc-bullets li{padding:6px 0 6px 15px;position:relative;font-size:12px;line-height:1.65;color:var(--mid)}
.artbody .cc-bullets li::before{content:"▸";position:absolute;left:0;color:var(--volt);font-size:9px;top:8px}

/* ── reverse-prompting TLDR steps ── */
.artbody .rev-tldr-item{display:grid;grid-template-columns:26px 1fr;gap:11px;align-items:baseline;
 padding:9px 0;border-bottom:1px solid rgba(255,255,255,.06);font-size:12.5px;line-height:1.65;color:var(--mid)}
.artbody .rev-tldr-n{font:700 9px var(--m);letter-spacing:.1em;color:var(--volt)}

/* ── verdict / comparison language ── */
.artbody .bad,.artbody .fail,.artbody .never,.artbody .warn,.artbody .dead{
 border-left:2px solid rgba(255,90,110,.5);padding-left:14px;margin:14px 0;color:var(--dim);font-size:12.5px;line-height:1.72}
.artbody .good,.artbody .best,.artbody .yes,.artbody .live,.artbody .verdict{
 border-left:2px solid rgba(200,255,0,.5);padding-left:14px;margin:14px 0;color:var(--mid);font-size:12.5px;line-height:1.72}

/* ── generic role fallbacks ── */
.artbody .blk,.artbody .beat,.artbody .entry,.artbody .find,.artbody .stance,.artbody .care,
.artbody .harm,.artbody .law,.artbody .opt,.artbody .act,.artbody .test,.artbody .doc,
.artbody .record,.artbody .fig,.artbody .side,.artbody .colL,.artbody .colR,.artbody .amph,
.artbody .hero,.artbody .outro,.artbody .future,.artbody .spread,.artbody .filters{
 margin:14px 0;line-height:1.78}
.artbody .q,.artbody .qq,.artbody .say,.artbody .tell,.artbody .ex,.artbody .url,.artbody .copy{
 font-size:12.5px;line-height:1.75;color:var(--mid)}
.artbody .n2,.artbody .y,.artbody .c,.artbody .m,.artbody .b,.artbody .a,.artbody .sk,
.artbody .lsk,.artbody .lmod,.artbody .lusr,.artbody .lfarm,.artbody .lvl,.artbody .q4,
.artbody .count,.artbody .score,.artbody .zero,.artbody .depth,.artbody .disc,.artbody .alt{
 font:400 11.5px/1.7 var(--s);color:var(--dim)}
.artbody .pts,.artbody .bars,.artbody .bt1,.artbody .bt2{display:block;margin:8px 0}

/* ── decorative leftovers must not affect layout ── */
.artbody .vignette,.artbody .scan,.artbody .reel,.artbody .shell,.artbody .warp,
.artbody .wide,.artbody .bot,.artbody .fret,.artbody .sp{all:unset;display:block}
.artbody .printbar,.artbody .pbtn,.artbody .empty{display:none}

/* ── STRUCTURAL FLOOR: nothing renders unstyled ── */
.artbody *{max-width:100%}
.artbody div:empty,.artbody p:empty,.artbody span:empty:not([class*="cur"]):not([class*="tw"]){display:none}
.artbody p{max-width:74ch}
.artbody > p + p{margin-top:0}

/* cheat-sheet accordions converted from dead JS toggles */
.artbody details.it{background:linear-gradient(162deg,#07090C,#020305);
 border:1px solid rgba(0,0,0,.5);border-top-color:rgba(255,255,255,.09);
 border-left-color:rgba(255,255,255,.05);margin-bottom:1px;border-radius:2px}
.artbody details.it summary{list-style:none;display:list-item;padding:13px 40px 13px 14px;
 font:600 12.5px var(--s);color:var(--paper);transition:background .2s var(--e);position:relative}
.artbody details.it summary::-webkit-details-marker{display:none}
.artbody details.it summary:hover{background:rgba(200,255,0,.05)}
.artbody details.it summary .ic{color:var(--volt);font-size:11px;line-height:1.4}
.artbody details.it summary .p{color:var(--volt);font:700 13px var(--m);margin-left:auto;line-height:1;
 transition:transform .25s var(--e)}
.artbody details.it[open] summary .p{transform:rotate(45deg)}
.artbody details.it .ct{padding:0 14px 14px 35px;font-size:12px;line-height:1.75;color:var(--dim)}
.artbody details.it .ct ul{margin:0}
.artbody details.it .ct strong{color:var(--paper)}
.artbody .cc-example{font:400 11px/1.7 var(--m);color:var(--volt);
 background:rgba(200,255,0,.05);border-left:2px solid rgba(200,255,0,.4);
 padding:11px 13px;margin:11px 0 0;white-space:pre-wrap;word-break:break-word}
.artbody .cc-arr-x{display:none}


/* ═══ DISCLOSURE FIX ═══
   display:flex on <summary> removes the native toggle in Safari and
   some Chrome builds — the element stops being treated as a summary box.
   Summary now stays display:list-item; the layout is done with
   absolute positioning instead. */
.artbody details summary,.it summary{display:list-item!important}
.artbody details summary::marker,.it summary::marker{content:""}
.artbody details summary::-webkit-details-marker,.it summary::-webkit-details-marker{display:none}
.artbody details.it summary .p,.it summary .p{
 position:absolute;right:14px;top:50%;transform:translateY(-50%);margin:0}
.artbody details.it[open] summary .p,.it[open] summary .p{
 transform:translateY(-50%) rotate(45deg)}
.artbody details.it summary .ic,.it summary .ic{margin-right:8px}
.artbody details summary>span[style*="flex"]{display:inline}
/* clickable affordance now that the cursor is hidden */
.artbody details summary:hover{background:rgba(200,255,0,.06)}
.artbody details[open]>summary{border-bottom:1px solid rgba(255,255,255,.06)}
.artbody details summary .stx,.it summary .stx{display:inline}


/* ═══ ACCORDION — FAILSAFE ═══
   The reveal rule previously set .it{opacity:0} and only restored it
   when an observed ancestor gained .in-c. Article-body accordions have
   no such ancestor, so they were invisible regardless of markup.
   Content in the article body must never depend on JS to become visible. */
.artbody details,.artbody details.it{opacity:1!important;visibility:visible!important;display:block}
.artbody details>summary{opacity:1!important;visibility:visible!important}
.artbody details summary .stx{color:var(--paper)}


/* ═══════════════ CURSOR — SINGLE SOURCE OF TRUTH ═══════════════
   Previously `cursor:none` was set on body/a/button/summary only, so the
   native cursor reappeared over every other element — two cursors at once.
   Several `cursor:pointer` rules also overrode it directly. */

/* fine pointers: hide the native cursor EVERYWHERE, no exceptions */
@media (pointer:fine) and (prefers-reduced-motion:no-preference){
 html.js.cursor-on,html.js.cursor-on *,
 html.js.cursor-on a,html.js.cursor-on button,html.js.cursor-on summary,
 html.js.cursor-on input,html.js.cursor-on textarea,html.js.cursor-on select{cursor:none}
 /* text selection still needs a caret to be usable */
 html.js.cursor-on pre,html.js.cursor-on code,html.js.cursor-on input,html.js.cursor-on textarea{cursor:text}
}

/* touch, coarse pointers, reduced motion, or JS off — native cursor always */
html:not(.cursor-on),html:not(.cursor-on) *{cursor:auto!important}
html:not(.cursor-on) a,html:not(.cursor-on) button,
html:not(.cursor-on) summary,html:not(.cursor-on) .cpb{cursor:pointer!important}
@media (pointer:coarse),(prefers-reduced-motion:reduce){
 html,html *{cursor:auto!important}
 html a,html button,html summary,html .cpb{cursor:pointer!important}
 #cd,#cr,#cl{display:none!important}
}

/* the custom cursor must sit above everything, including the skip link */
#cd,#cr,#cl{z-index:2147483647!important}
html:not(.cursor-on) #cd,html:not(.cursor-on) #cr,html:not(.cursor-on) #cl{display:none!important}


/* ═══ REVEAL — CONTENT IS NEVER HIDDEN BY JAVASCRIPT ═══
   The staggered child-reveal (.pan .mc{opacity:0} restored by .in-c)
   left panel contents invisible whenever the observer did not fire.
   It has been removed. Only whole blocks fade, and only when JS is
   confirmed running — with a failsafe that reveals everything anyway. */
.pan .mc,.pan .sl2 a,.pan .it,.pan .fd a,
.mc,.sl2 a,.it,.fd a,.gc,.room,.gwgrid a{opacity:1!important}
.artbody *,.pb *,.pan *{opacity:1}

/* ═══ CLS — reserve space so nothing reflows ═══ */
#gl,#fallback{position:fixed;inset:0;width:100vw;height:100vh;z-index:0}
.arthd h1{min-height:1.05em}
.arthd .dek{min-height:1.6em}
.bar{min-height:34px}
img,video{max-width:100%;height:auto}

/* ═══ PASS 2 · ELEVATION ═══
   Scroll progress as a hairline at the top of the viewport — reads as
   instrument chrome rather than decoration, and tells you how much of
   a long article is left without occupying any layout space. */
#prog{position:fixed;top:0;left:0;height:2px;width:0;z-index:9998;
 background:linear-gradient(90deg,rgba(200,255,0,.35),var(--volt));
 box-shadow:0 0 10px rgba(200,255,0,.45);pointer-events:none;
 transition:width .08s linear}
@media(prefers-reduced-motion:reduce){#prog{transition:none}}
html:not(.js) #prog{display:none}

/* ══════════════════════════════════════════════════════════════════════
   CINEMATIC READING SYSTEM
   Pages averaged 12 paragraphs to 3.7 headings with almost no visual
   punctuation. These give a page rhythm, orientation, and moments of
   pause — without hiding anything or depending on JavaScript.
   ══════════════════════════════════════════════════════════════════════ */

/* ─── ① PAGE METER — what you are about to read ─── */
.meter{display:flex;flex-wrap:wrap;gap:0;margin:0 0 26px;
 border:1px solid rgba(0,0,0,.5);border-top-color:rgba(255,255,255,.1);
 border-left-color:rgba(255,255,255,.055);background:rgba(255,255,255,.055);
 box-shadow:inset 0 1px 0 rgba(255,255,255,.03);border-radius:2px;overflow:hidden}
.meter div{flex:1;min-width:88px;background:linear-gradient(162deg,#07090C,#020305);
 padding:11px 13px;margin:0 1px 0 0}
.meter div:last-child{margin-right:0}
.meter .k{font:700 7px var(--m);letter-spacing:.22em;color:#8891A0;display:block;margin-bottom:5px}
.meter .v{font:700 15px var(--d);letter-spacing:-.02em;color:var(--paper);
 font-variant-numeric:tabular-nums;display:block;line-height:1}
.meter .v b{color:var(--volt);font-weight:700}

/* ─── ② CHAPTER MARKERS — numbered sections ─── */
.artbody h2{position:relative;counter-increment:sect;
 padding-top:26px;margin-top:38px;
 border-top:1px solid rgba(255,255,255,.07)}
.artbody{counter-reset:sect}
.artbody h2::before{content:counter(sect,decimal-leading-zero);
 position:absolute;top:24px;left:0;
 font:700 8px var(--m);letter-spacing:.2em;color:var(--volt);opacity:.85}
.artbody h2{padding-left:34px}
.artbody h2::after{content:"";position:absolute;top:31px;left:24px;width:6px;height:1px;
 background:rgba(200,255,0,.5)}
@media(max-width:620px){
 .artbody h2{padding-left:0;padding-top:30px}
 .artbody h2::before{top:12px}
 .artbody h2::after{display:none}}

/* ─── ③ SECTION RAIL — where you are, jump anywhere ─── */
.rail{position:fixed;left:max(14px,calc((100vw - 1480px)/2 + 14px));top:50%;
 transform:translateY(-50%);z-index:40;display:none;
 flex-direction:column;gap:2px;padding:10px 8px;
 background:linear-gradient(162deg,rgba(7,9,12,.9),rgba(2,3,5,.9));
 border:1px solid rgba(255,255,255,.07);border-radius:3px;
 backdrop-filter:blur(8px);max-height:64vh;overflow:auto}
@media(min-width:1180px){html.js .rail{display:flex}}
.rail a{display:flex;align-items:center;gap:8px;padding:5px 6px;text-decoration:none;
 font:700 7.5px var(--m);letter-spacing:.16em;color:#8891A0;
 border-radius:2px;transition:color .2s var(--e),background .2s var(--e);max-width:210px}
.rail a i{font-style:normal;width:14px;height:1px;background:rgba(255,255,255,.18);
 flex:0 0 14px;transition:background .2s var(--e),width .2s var(--e)}
.rail a span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;opacity:0;
 max-width:0;transition:opacity .25s var(--e),max-width .3s var(--e)}
.rail:hover a span{opacity:1;max-width:180px}
.rail a:hover,.rail a.on{color:var(--volt);background:rgba(200,255,0,.07)}
.rail a:hover i,.rail a.on i{background:var(--volt);width:20px}

/* ─── ④ PULL QUOTE — the moment of pause ─── */
.artbody .pull{margin:30px 0;padding:0 0 0 20px;position:relative;max-width:62ch}
.artbody .pull::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:2px;
 background:linear-gradient(180deg,var(--volt),rgba(200,255,0,.15))}
.artbody .pull p{font:300 clamp(17px,2.3vw,25px)/1.36 var(--s);letter-spacing:-.02em;
 color:var(--paper);margin:0}
.artbody .pull cite{display:block;font:700 7.5px var(--m);letter-spacing:.2em;
 color:#8891A0;margin-top:11px;font-style:normal}

/* ─── ⑤ KEY FIGURE — a number given room to land ─── */
.artbody .keyfig{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center;
 margin:26px 0;padding:20px;border-radius:2px;
 background:linear-gradient(162deg,#0A0D08,#020305);
 border:1px solid rgba(0,0,0,.5);border-top-color:rgba(200,255,0,.18);
 border-left-color:rgba(255,255,255,.05);
 box-shadow:inset 0 1px 0 rgba(200,255,0,.07)}
.artbody .keyfig .n{font:700 clamp(34px,5.4vw,58px)/.86 var(--d);letter-spacing:-.05em;
 color:var(--volt);font-variant-numeric:tabular-nums;
 text-shadow:0 0 30px rgba(200,255,0,.28)}
.artbody .keyfig .t{font-size:12.5px;line-height:1.65;color:var(--mid)}
@media(max-width:520px){.artbody .keyfig{grid-template-columns:1fr;gap:10px}}

/* ─── ⑥ SECTION BREATH — a rule that means "shift" ─── */
.artbody .breath{height:1px;margin:34px 0;border:0;
 background:linear-gradient(90deg,rgba(200,255,0,.4),rgba(255,255,255,.05) 40%,transparent)}

/* ─── ⑦ BENTO — index pages stop being uniform lists ─── */
.bento{display:grid;gap:1px;background:rgba(255,255,255,.06);
 grid-template-columns:repeat(6,1fr);
 border:1px solid rgba(0,0,0,.5);border-top-color:rgba(255,255,255,.1);
 border-left-color:rgba(255,255,255,.055);margin:22px 0}
.bento a{background:linear-gradient(162deg,#07090C,#020305);padding:17px 16px;
 text-decoration:none;color:var(--mid);display:flex;flex-direction:column;
 justify-content:flex-end;min-height:118px;position:relative;overflow:hidden;
 transition:background .3s var(--e),color .3s var(--e);
 box-shadow:inset 0 1px 0 rgba(255,255,255,.024)}
.bento a::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
 background:radial-gradient(120% 100% at 18% 0%,rgba(200,255,0,.10),transparent 62%);
 transition:opacity .35s var(--e)}
.bento a:hover{background:linear-gradient(162deg,#0D110A,#050703);color:var(--volt)}
.bento a:hover::after{opacity:1}
.bento .ix{font:700 7px var(--m);letter-spacing:.2em;color:#8891A0;margin-bottom:auto}
.bento .n{font:700 13.5px/1.24 var(--s);letter-spacing:-.02em;color:var(--paper);
 margin:12px 0 6px;position:relative;z-index:1}
.bento a:hover .n{color:var(--volt)}
.bento .d{font-size:11.5px;line-height:1.6;color:var(--dim);position:relative;z-index:1}
/* sizes */
.bento .w6{grid-column:span 6}
.bento .w4{grid-column:span 4}
.bento .w3{grid-column:span 3}
.bento .w2{grid-column:span 2}
.bento .lead{min-height:210px}
.bento .lead .n{font:700 clamp(19px,2.6vw,28px)/1.1 var(--d);letter-spacing:-.035em;
 text-transform:uppercase;margin-bottom:9px}
.bento .lead .d{font-size:13px;max-width:56ch}
.bento .tall{min-height:170px}
@media(max-width:900px){
 .bento{grid-template-columns:repeat(4,1fr)}
 .bento .w6,.bento .w4{grid-column:span 4}
 .bento .w3,.bento .w2{grid-column:span 2}}
@media(max-width:600px){
 .bento{grid-template-columns:1fr}
 .bento .w6,.bento .w4,.bento .w3,.bento .w2{grid-column:span 1}
 .bento .lead{min-height:150px}}

/* ─── ⑧ STAT BLOCKS elevated — these are the real data moments ─── */
.artbody .stat{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.artbody .stat>div{position:relative;overflow:hidden;padding:20px 16px}
.artbody .stat>div::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;
 background:linear-gradient(90deg,rgba(200,255,0,.45),transparent 70%)}
.artbody .stat>div::after{content:"";position:absolute;inset:0;pointer-events:none;
 background:radial-gradient(90% 70% at 20% 0%,rgba(200,255,0,.06),transparent 60%)}
.artbody .stat .v{font:700 clamp(28px,4vw,42px)/.9 var(--d);letter-spacing:-.05em;
 text-shadow:0 0 26px rgba(200,255,0,.22);margin-bottom:11px}
.artbody .stat .l{font-size:11.5px;line-height:1.66}
.artbody .stat .src{margin-top:9px;padding-top:8px;border-top:1px solid rgba(255,255,255,.06)}

/* ─── ⑨ BOX callouts get a corner tick ─── */
.artbody .box{position:relative}
.artbody .box::before{content:"";position:absolute;top:-1px;left:-1px;width:12px;height:12px;
 border-top:1px solid rgba(200,255,0,.45);border-left:1px solid rgba(200,255,0,.45)}
.artbody .box::after{content:"";position:absolute;bottom:-1px;right:-1px;width:12px;height:12px;
 border-bottom:1px solid rgba(255,255,255,.10);border-right:1px solid rgba(255,255,255,.10)}

/* ─── ⑩ first paragraph after a heading gets a lead-in ─── */
.artbody h2 + p{font-size:14.5px;color:var(--paper);line-height:1.7}
.artbody h2 + p::first-letter{color:var(--volt)}

/* ─── ⑪ lists get rhythm ─── */
.artbody ul:not(.cc-bullets){list-style:none;margin-left:0}
.artbody ul:not(.cc-bullets) > li{position:relative;padding:7px 0 7px 20px;
 border-bottom:1px solid rgba(255,255,255,.045)}
.artbody ul:not(.cc-bullets) > li:last-child{border-bottom:0}
.artbody ul:not(.cc-bullets) > li::before{content:"";position:absolute;left:2px;top:15px;
 width:5px;height:1px;background:rgba(200,255,0,.55)}
/* headings need offset so the rail jump does not hide them under the bar */
.artbody h2{scroll-margin-top:70px}
html{scroll-behavior:auto}
@media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}

/* ─── ⑫ READ NEXT — no page ends in a wall ─── */
.readnext{margin-top:44px;padding-top:26px;border-top:1px solid rgba(255,255,255,.08)}
.rnh{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:14px}
.rnh span{font:700 8px var(--m);letter-spacing:.24em;color:var(--volt)}
.rnh a{font:700 7.5px var(--m);letter-spacing:.18em;color:#8891A0;text-decoration:none}
.rnh a:hover{color:var(--volt)}
.rng{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:1px;
 background:rgba(255,255,255,.06);border:1px solid rgba(0,0,0,.5);
 border-top-color:rgba(255,255,255,.1);border-left-color:rgba(255,255,255,.055)}
.rng a{background:linear-gradient(162deg,#07090C,#020305);padding:15px 14px;
 text-decoration:none;display:block;position:relative;overflow:hidden;
 transition:background .3s var(--e);box-shadow:inset 0 1px 0 rgba(255,255,255,.024)}
.rng a::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
 background:radial-gradient(110% 90% at 15% 0%,rgba(200,255,0,.09),transparent 60%);
 transition:opacity .35s var(--e)}
.rng a:hover{background:linear-gradient(162deg,#0D110A,#050703)}
.rng a:hover::after{opacity:1}
.rng .k{font:700 7px var(--m);letter-spacing:.2em;color:#8891A0;display:block;margin-bottom:8px}
.rng .n{font:700 13px/1.25 var(--s);letter-spacing:-.02em;color:var(--paper);display:block;margin-bottom:6px;
 position:relative;z-index:1}
.rng a:hover .n{color:var(--volt)}
.rng .d{font-size:11.5px;line-height:1.6;color:var(--dim);position:relative;z-index:1}

/* ─── ⑬ CHARTS — a site about measurement should show measurement ─── */
.chart{margin:26px 0;padding:20px 18px;border-radius:2px;
 background:linear-gradient(162deg,#07090C,#020305);
 border:1px solid rgba(0,0,0,.5);border-top-color:rgba(255,255,255,.1);
 border-left-color:rgba(255,255,255,.05);box-shadow:inset 0 1px 0 rgba(255,255,255,.03)}
.chart .ct{font:700 8px var(--m);letter-spacing:.22em;color:var(--volt);margin-bottom:4px}
.chart .cs{font-size:12px;line-height:1.6;color:var(--mid);margin-bottom:16px;max-width:62ch}
.chart svg{display:block;width:100%;height:auto;overflow:visible}
.chart .axis{stroke:rgba(255,255,255,.12);stroke-width:1}
.chart .grid{stroke:rgba(255,255,255,.05);stroke-width:1}
.chart .bar{fill:rgba(200,255,0,.22);transition:fill .3s var(--e)}
.chart .bar.hi{fill:var(--volt)}
.chart:hover .bar{fill:rgba(200,255,0,.34)}
.chart:hover .bar.hi{fill:var(--volt)}
.chart .lbl{font:700 8px var(--m);letter-spacing:.1em;fill:#8891A0}
.chart .val{font:700 10px var(--m);fill:var(--paper);font-variant-numeric:tabular-nums}
.chart .val.hi{fill:var(--volt)}
.chart .line{fill:none;stroke:var(--volt);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.chart .area{fill:url(#cgrad)}
.chart .dot{fill:var(--volt)}
.chart .note{font:400 9.5px/1.6 var(--m);letter-spacing:.04em;color:#8891A0;
 margin-top:14px;padding-top:11px;border-top:1px solid rgba(255,255,255,.06)}
.chart .note b{color:var(--paper)}
@media(max-width:520px){.chart{padding:15px 13px}.chart .lbl{font-size:7px}}

/* ─── ⑭ SEARCH ─── */
.sbox{margin:20px 0 18px}
#q{width:100%;background:linear-gradient(162deg,#0A0D10,#040507);
 border:1px solid rgba(255,255,255,.1);border-top-color:rgba(200,255,0,.22);
 color:var(--paper);font:400 15px var(--s);padding:15px 16px;border-radius:2px;
 outline:none;transition:border-color .25s var(--e),box-shadow .25s var(--e)}
#q::placeholder{color:#6B7280;font-size:13px}
#q:focus{border-color:rgba(200,255,0,.5);box-shadow:0 0 0 3px rgba(200,255,0,.08)}
.sfil{display:flex;flex-wrap:wrap;gap:1px;margin-top:1px}
.sf{font:700 7.5px var(--m);letter-spacing:.18em;color:#8891A0;
 background:linear-gradient(162deg,#07090C,#020305);border:1px solid rgba(255,255,255,.07);
 padding:9px 13px;cursor:pointer;transition:color .2s var(--e),background .2s var(--e)}
.sf:hover{color:var(--paper)}
.sf.on{color:#050506;background:var(--volt);border-color:var(--volt)}
.scount{font:700 7.5px var(--m);letter-spacing:.18em;color:#8891A0;margin-top:12px}
.sres{display:grid;gap:1px;background:rgba(255,255,255,.06);margin-top:14px}
.sres:empty{display:none}
.sr{background:linear-gradient(162deg,#07090C,#020305);padding:15px 15px;text-decoration:none;
 display:block;border-left:2px solid transparent;transition:background .25s var(--e),border-color .25s var(--e)}
.sr:hover{background:linear-gradient(162deg,#0D110A,#050703);border-left-color:var(--volt)}
.sr .k{font:700 7px var(--m);letter-spacing:.2em;color:#8891A0;display:block;margin-bottom:7px}
.sr .n{font:700 14px/1.25 var(--s);letter-spacing:-.02em;color:var(--paper);display:block;margin-bottom:7px}
.sr:hover .n{color:var(--volt)}
.sr .d{font-size:12px;line-height:1.65;color:var(--dim);display:block}
.sr mark,.artbody mark{background:rgba(200,255,0,.16);color:var(--volt);padding:0 2px;border-radius:1px}

/* ─── ⑮ CITATION — points readers at the primary source ─── */
.citebox{margin:30px 0 0;padding:17px 16px;border-radius:2px;position:relative;
 background:linear-gradient(162deg,#07090C,#020305);
 border:1px solid rgba(0,0,0,.5);border-top-color:rgba(200,255,0,.2);
 border-left-color:rgba(255,255,255,.05);box-shadow:inset 0 1px 0 rgba(200,255,0,.05)}
.citebox .h{font:700 8px var(--m);letter-spacing:.22em;color:#93A06B;display:block;margin-bottom:11px}
.citebox p{font-size:12.5px;line-height:1.72;color:var(--mid);margin-bottom:10px;max-width:70ch}
.citebox p:last-child{margin-bottom:0}
.citebox .cnote{font-size:11.5px;color:var(--dim)}

/* ══════════════════════════════════════════════════════════════════════════
   CINEMATIC SCROLL — nine labelled blocks, each removable on its own.
   Built on native CSS scroll-driven animation (animation-timeline: view())
   which runs on the compositor thread with zero JavaScript. Everything is
   additive: with the feature unsupported, JS off, or reduced-motion set,
   every element sits in its finished state and the page reads normally.
   ══════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: no-preference){
@supports (animation-timeline: view()){

 /* ── S1 · CHART DRAW — bars grow from the axis as the chart enters ── */
 .chart .bar{transform-box:fill-box;transform-origin:50% 100%;
  animation:barDraw linear both;animation-timeline:view();animation-range:entry 12% cover 34%}
 @keyframes barDraw{from{transform:scaleY(0);opacity:.25}to{transform:scaleY(1);opacity:1}}
 .chart .val{animation:valFade linear both;animation-timeline:view();animation-range:entry 22% cover 40%}
 @keyframes valFade{from{opacity:0}to{opacity:1}}

 /* ── S2 · DEPTH PARALLAX — panels recede on a real z-axis ── */
 .deck,.wrap{perspective:1400px;perspective-origin:50% 40%}
 .pan{animation:panDepth linear both;animation-timeline:view();
  animation-range:entry 0% exit 100%;transform-style:preserve-3d}
 @keyframes panDepth{
  from{transform:translate3d(0,26px,-120px) rotateX(3.2deg);opacity:.55}
  22%,78%{transform:translate3d(0,0,0) rotateX(0);opacity:1}
  to{transform:translate3d(0,-16px,-70px) rotateX(-1.8deg);opacity:.72}}

 /* ── S3 · SECTION BEATS — headings arrive rather than appear ── */
 .artbody h2{animation:beat linear both;animation-timeline:view();
  animation-range:entry 4% entry 46%}
 @keyframes beat{from{opacity:0;transform:translateY(16px);letter-spacing:.02em}
                 to{opacity:1;transform:none;letter-spacing:-.03em}}
 .artbody h2::before{animation:tick linear both;animation-timeline:view();
  animation-range:entry 8% entry 52%}
 @keyframes tick{from{opacity:0;transform:translateX(-8px)}to{opacity:.85;transform:none}}

 /* ── S4 · PULL QUOTE — the rule draws down, then the words land ── */
 .artbody .pull::before{animation:ruleDraw linear both;animation-timeline:view();
  animation-range:entry 6% entry 44%;transform-origin:50% 0}
 @keyframes ruleDraw{from{transform:scaleY(0)}to{transform:scaleY(1)}}
 .artbody .pull p{animation:quoteIn linear both;animation-timeline:view();
  animation-range:entry 14% entry 56%}
 @keyframes quoteIn{from{opacity:.15;transform:translateY(10px)}to{opacity:1;transform:none}}

 /* ── S5 · STAT LIFT — figures rise out of their cell ── */
 .artbody .stat>div{animation:statLift linear both;animation-timeline:view();
  animation-range:entry 8% cover 26%}
 @keyframes statLift{from{opacity:.25;transform:translateY(20px) scale(.985)}
                     to{opacity:1;transform:none}}
 .artbody .stat .v{animation:figGlow linear both;animation-timeline:view();
  animation-range:entry 16% cover 34%}
 @keyframes figGlow{from{text-shadow:0 0 0 rgba(200,255,0,0)}
                    to{text-shadow:0 0 26px rgba(200,255,0,.22)}}

 /* ── S6 · BENTO STAGGER — tiles arrive in a wave, not all at once ── */
 .bento a{animation:tileIn linear both;animation-timeline:view();
  animation-range:entry 0% cover 22%}
 @keyframes tileIn{from{opacity:.2;transform:translateY(24px) scale(.99)}
                   to{opacity:1;transform:none}}

 /* ── S7 · READ-NEXT RISE ── */
 .rng a{animation:tileIn linear both;animation-timeline:view();
  animation-range:entry 0% cover 30%}

 /* ── S8 · METER COUNT-IN — the instrument powers up ── */
 .meter div{animation:meterIn linear both;animation-timeline:view();
  animation-range:entry 0% cover 20%}
 @keyframes meterIn{from{opacity:.2;transform:translateY(10px)}to{opacity:1;transform:none}}

 /* ── S9 · IMAGE + VIDEO REVEAL — a wipe rather than a pop ── */
 .artbody img,.artbody video{animation:mediaIn linear both;animation-timeline:view();
  animation-range:entry 0% cover 30%;clip-path:inset(0 0 0 0)}
 @keyframes mediaIn{from{opacity:.3;clip-path:inset(0 0 22% 0);transform:scale(1.012)}
                    to{opacity:1;clip-path:inset(0 0 0 0);transform:none}}
}}

/* everything above is enhancement only — this is the guaranteed state */
.chart .bar,.chart .val,.pan,.artbody h2,.artbody .pull p,.artbody .stat>div,
.bento a,.rng a,.meter div,.artbody img,.artbody video{opacity:1}

/* ── S10 fallback states, used only where scroll-timeline is unsupported ── */
.sq{opacity:0;transform:translateY(18px);
 transition:opacity .6s var(--e),transform .7s var(--e)}
.sq.sv{opacity:1;transform:none}
.chart .bar.sq{transform:scaleY(0);transform-box:fill-box;transform-origin:50% 100%}
.chart .bar.sq.sv{transform:scaleY(1)}

/* ── S12 tile parallax: transition and a pointer-tracked sheen ── */
.bento a,.rng a,.sr{transition:transform .45s var(--e),background .3s var(--e)}
.bento a::after,.rng a::after{
 background:radial-gradient(120% 100% at var(--mx,18%) var(--my,0%),rgba(200,255,0,.12),transparent 62%)}

/* ── S13 the cloud shifts with scroll depth ── */
#fallback{transition:filter .4s linear}
html{--sp:0}
.veil{opacity:calc(.55 + var(--sp) * .28)}

/* ══════════════════════════════════════════════════════════════════════════
   READABILITY PASS
   Nothing that a reader has to READ falls below 10px. Structural micro-labels
   (section kickers, chart axes, breadcrumbs) sit at 10–11px with wide tracking,
   which is legible at that size; body and supporting copy sit at 14–15px.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── ① BODY COPY — the main lift ── */
.artbody{font-size:15.5px;line-height:1.82}
.artbody p{font-size:15.5px;line-height:1.82;margin-bottom:17px}
.artbody li{font-size:15px;line-height:1.78}
.artbody h2 + p{font-size:16px;line-height:1.76}
.artbody .box p,.artbody .citebox p{font-size:14.5px;line-height:1.8}
.artbody .stat .l,.artbody .keyfig .t{font-size:13.5px;line-height:1.72}
.artbody .rd,.artbody .cc-desc,.artbody .lsub,.artbody .md,.artbody .grey,
.artbody .weak,.artbody .mid,.artbody .fs,.artbody .dbody,.artbody .small2,
.artbody .note,.artbody .hint,.artbody .desc,.artbody .sub{font-size:13.5px;line-height:1.76}
.artbody details.it summary{font-size:14.5px}
.artbody details.it .ct{font-size:14px;line-height:1.8}
.artbody .cc-bullets li{font-size:14px;line-height:1.74}
.artbody .rev-tldr-item{font-size:14px}
.artbody code{font-size:13px}
.artbody pre{font-size:12.5px;line-height:1.75}
.artbody .cc-example{font-size:12.5px;line-height:1.75}
.artbody blockquote{font-size:clamp(16px,2vw,21px)}
.dek,.arthd .dek{font-size:clamp(15px,1.7vw,18.5px);line-height:1.62}

/* card and index copy */
.bento .d,.rng .d,.sr .d,.gwgrid .d{font-size:13px;line-height:1.66}
.bento .n,.rng .n,.gwgrid .n{font-size:14.5px}
.bento .lead .d{font-size:14.5px}
.sr .n{font-size:15px}

/* ── ② MICRO-LABELS — raised to a legible floor of 10px ── */
.meter .k,.bento .ix,.rng .k,.sr .k,.gwgrid .i,.guide .gl,.chart .lbl,
.dia .dg,.shlabel span,.crumb,.arthd .fl,.artnav .k,.rail a,
.artbody .pull cite,.rnh a,.rnh span,.sf,.scount,.ph,.sl2 .ix,.sl2 .t i,
.gn,.tc .src,.dia .dn,.dia .dstop,.artbody .h,.box .h,.citebox .h,
.artbody .tag,.artbody .meta,.artbody .lno,.artbody .lbl,.artbody .cap,
.artbody .ti,.artbody .no,.artbody .nm,.artbody .fn,.artbody .dc,
.artbody .key,.artbody .when,.artbody .who,.artbody .sb,.artbody .ds,.artbody .ev,
.artbody .cc-title,.artbody .cc-section-title,.artbody h2::before{font-size:10px}
.dia .dl{font-size:10px}
.meter .v{font-size:17px}
.artbody .src,.src{font-size:11px;line-height:1.72}   /* sources: minor, but readable */
.chart .val{font-size:12px}
.chart .ct{font-size:10px}
.chart .cs{font-size:13.5px;line-height:1.7}
.chart .note{font-size:11px;line-height:1.72}

/* ── ③ MEASURE AND ALIGNMENT — centred column, justified prose ── */
.art{max-width:78ch;margin:0 auto}
.artbody p,.artbody li,.artbody .box p,.artbody details.it .ct p{
 text-align:justify;text-justify:inter-word;
 hyphens:auto;-webkit-hyphens:auto;
 text-wrap:pretty}
.artbody p{max-width:none}
/* never justify things that would look broken */
.artbody .src,.artbody .pull p,.artbody blockquote,.artbody .note,
.artbody .cc-example,.artbody pre,.arthd .dek,.bento .d,.rng .d,.sr .d{
 text-align:left;hyphens:manual}
@media(max-width:620px){
 /* justification needs width — below this it produces rivers */
 .artbody p,.artbody li,.artbody .box p{text-align:left;hyphens:manual}
}

/* ── FINAL SIZE FLOOR — nothing readable under 10px, no exceptions ── */
.meter .k,.meter div .k{font-size:10px!important}
.guide .gc,.mc .s,.fd .d,.bar,.bento .d,.rng .d,.sr .d{font-size:11px}
.artbody .box .h,.artbody .card .h,.artbody .h,.citebox .h,
.artbody .no,.artbody .g,.artbody .tagl,.artbody .lno,.artbody .fkick,
.artbody .nm,.artbody .fn,.artbody .dc,.artbody .key,.artbody .when,
.artbody .who,.artbody .sb,.artbody .ds,.artbody .ev,.artbody .lbl,
.artbody .cap,.artbody .ti{font-size:10px}
.artbody th{font-size:10px}
.artbody td{font-size:14px;line-height:1.7}
#cl{font-size:10px}
.artbody .tag{font-size:10.5px}
.artbody .meta{font-size:11px}
/* headings scale with the larger body */
.artbody h3{font-size:16.5px;line-height:1.4;margin:26px 0 10px}
.artbody h2{font-size:clamp(20px,2.7vw,30px)}
.meter .k{font-size:10px}
.kick,.ty,.hn,.hf li a span,.dia .dsafe,.dia .drisk,.btn,.sl2 a .ar,
.artbody .row .n,.artbody .drow .n,.artbody .rev-tldr-n{font-size:10px}
.band p{font-size:clamp(13px,1.5vw,16px);line-height:1.6}

/* ══════ TL;DR AND SECTION TAKEAWAYS ══════ */
.tldr{margin:0 0 26px;padding:19px 20px;border-radius:2px;position:relative;
 background:linear-gradient(162deg,#0A0D08,#020305);
 border:1px solid rgba(0,0,0,.5);border-top-color:rgba(200,255,0,.26);
 border-left-color:rgba(255,255,255,.05);
 box-shadow:inset 0 1px 0 rgba(200,255,0,.08)}
.tldr::before{content:"";position:absolute;top:-1px;left:-1px;width:14px;height:14px;
 border-top:1px solid rgba(200,255,0,.55);border-left:1px solid rgba(200,255,0,.55)}
.tldr .th{font:700 10px var(--m);letter-spacing:.24em;color:var(--volt);
 display:block;margin-bottom:13px}
.tldr ul{list-style:none;margin:0}
.tldr li{position:relative;padding:8px 0 8px 22px;font-size:14.5px;line-height:1.74;
 color:var(--paper);border-bottom:1px solid rgba(255,255,255,.05);text-align:left}
.tldr li:last-child{border-bottom:0;padding-bottom:0}
.tldr li::before{content:"▸";position:absolute;left:2px;top:8px;color:var(--volt);font-size:11px}
.tldr li b{color:var(--volt);font-weight:700}
.tldr p{font-size:14.5px;line-height:1.76;color:var(--mid);margin:0 0 11px;text-align:left}

.takeaway{margin:22px 0 30px;padding:14px 16px 14px 18px;border-radius:2px;
 background:rgba(200,255,0,.045);border-left:2px solid var(--volt);
 border-top:1px solid rgba(255,255,255,.05);border-right:1px solid rgba(255,255,255,.04);
 border-bottom:1px solid rgba(0,0,0,.4)}
.takeaway .tk{font:700 10px var(--m);letter-spacing:.22em;color:#A8BE55;
 display:block;margin-bottom:8px}
.takeaway p{font-size:14.5px;line-height:1.74;color:var(--paper);margin:0;text-align:left}
.takeaway p b{color:var(--volt)}
@media(max-width:620px){.tldr{padding:15px 15px}.takeaway{margin:18px 0 24px}}

/* ══════════════════════════════════════════════════════════════════════════
   READING MODE — matte ground, drifting particles, no lime cloud
   Article pages are for reading. The cloud is beautiful and it competes with
   the text, so on any page whose job is information it is replaced by a matte
   black field with a slow particle drift at very low contrast.
   ══════════════════════════════════════════════════════════════════════════ */
html.reading #gl{display:none}
html.reading #fallback{display:block;background:none}

/* the matte ground — a deep, near-flat charcoal with almost no colour cast */
html.reading body::before{
 content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
 background:
   radial-gradient(120% 90% at 50% -10%, #0B0C0E 0%, #07080A 42%, #050506 78%),
   linear-gradient(180deg, rgba(255,255,255,.014), transparent 30%);
}
/* a faint vertical grain so the matte is not dead flat */
html.reading body::after{
 content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5;
 background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.012) 0 1px,transparent 1px 3px);
 mix-blend-mode:overlay}
html.reading .veil{background:linear-gradient(180deg,rgba(3,4,6,.55),rgba(3,4,6,.78));opacity:1}
html.reading .tx{opacity:.16}

/* the particle canvas sits behind everything, above the matte */
#pf{position:fixed;inset:0;z-index:1;pointer-events:none;display:none}
html.reading #pf{display:block}
html.reading .pg{position:relative;z-index:3}

/* reading pages lose the lime wash on panel edges — quieter chrome */
html.reading .bar{background:linear-gradient(180deg,rgba(6,7,9,.94),rgba(4,5,7,.9))}
html.reading .artbody h2::before{opacity:.7}
@media(prefers-reduced-motion:reduce){#pf{display:none!important}}

/* reading mode owns the background entirely — no cloud, no gradient fallback */
html.reading.nogl #fallback,html.reading #fallback{
 display:none!important;background:none!important}

/* ══════════════════════════════════════════════════════════════════════════
   HOMEPAGE — three-quarter measure
   Every top-level block on the front page is capped at 3/4 of the viewport
   and centred. Applied to the real containers (.pan, .deck, .band, .wrap,
   .page, .bar) rather than a wrapper, because the homepage has no single
   content wrapper to constrain.
   ══════════════════════════════════════════════════════════════════════════ */
html.home .pg > .bar,
html.home .pg > .page,
html.home .pg > .band,
html.home .pg > .wrap,
html.home .pg > .deck,
html.home .pg > .pan,
html.home .pg > section,
html.home .pg > .logf{
 width:min(75vw,1240px);
 margin-left:auto;margin-right:auto}
/* panels that sit inside a deck inherit the deck's width, so leave them */
html.home .deck > .pan{width:auto;margin-left:0;margin-right:0}
@media(max-width:1200px){
 html.home .pg > .bar,html.home .pg > .page,html.home .pg > .band,
 html.home .pg > .wrap,html.home .pg > .deck,html.home .pg > .pan,
 html.home .pg > section,html.home .pg > .logf{width:min(92vw,1240px)}}
@media(max-width:760px){
 html.home .pg > .bar,html.home .pg > .page,html.home .pg > .band,
 html.home .pg > .wrap,html.home .pg > .deck,html.home .pg > .pan,
 html.home .pg > section,html.home .pg > .logf{width:100%}}

/* ══════════════════════════════════════════════════════════════════════════
   READING MODE — deeper matte, more presence in the particles
   ══════════════════════════════════════════════════════════════════════════ */
html.reading body::before{
 background:
  radial-gradient(140% 100% at 50% -20%, #101114 0%, #0A0B0D 38%, #060608 72%, #030304 100%),
  linear-gradient(180deg, rgba(255,255,255,.020), transparent 26%),
  radial-gradient(80% 60% at 50% 120%, rgba(200,255,0,.020), transparent 62%);
}
/* a finer, cross-hatched grain — reads as paper rather than screen */
html.reading body::after{
 opacity:.7;
 background-image:
  repeating-linear-gradient(90deg,rgba(255,255,255,.016) 0 1px,transparent 1px 3px),
  repeating-linear-gradient(0deg,rgba(255,255,255,.010) 0 1px,transparent 1px 4px);
}
html.reading .veil{background:linear-gradient(180deg,rgba(4,5,7,.34),rgba(4,5,7,.58))}
html.reading .tx{opacity:.22}
/* the reading column lifts very slightly off the matte */
html.reading .art{position:relative}
html.reading .art::before{
 content:"";position:absolute;inset:-30px -46px;z-index:-1;pointer-events:none;border-radius:3px;
 background:radial-gradient(70% 50% at 50% 0%,rgba(255,255,255,.022),transparent 70%)}

/* ══════════════════════════════════════════════════════════════════════════
   ARTICLE COMPONENTS — AUTHORITATIVE
   Placed last so these win regardless of what the fallback layers above do.
   Each corresponds to real markup in the article bodies.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── links: lime, never browser blue ── */
.artbody a,.artbody p a,.artbody li a,.artbody td a{
 color:var(--volt);text-decoration:none;
 border-bottom:1px solid rgba(200,255,0,.28);
 transition:border-color .2s var(--e),background .2s var(--e)}
.artbody a:visited{color:var(--volt)}
.artbody a:hover{border-bottom-color:var(--volt);background:rgba(200,255,0,.07)}
.artbody a.room,.artbody a.room:visited{border-bottom:0;background:none}

/* ── SCORE ROWS — label left, value right ── */
.artbody .score{margin:20px 0;border:1px solid rgba(255,255,255,.07);border-radius:2px;
 background:linear-gradient(162deg,#07090C,#020305);overflow:hidden}
.artbody .score .row,.artbody .row{
 display:flex!important;align-items:baseline;justify-content:space-between;gap:20px;
 grid-template-columns:none!important;
 padding:13px 15px;margin:0;
 border-bottom:1px solid rgba(255,255,255,.06);
 font-size:15px;line-height:1.7;text-align:left}
.artbody .score .row:last-child,.artbody .row:last-child{border-bottom:0}
.artbody .row > span:first-child{flex:1;min-width:0}
.artbody .pts{
 display:inline-block!important;margin:0!important;flex:0 0 auto;white-space:nowrap;
 font:700 14px var(--m);color:var(--volt);font-variant-numeric:tabular-nums}
.artbody .pts.zero{color:#8891A0}
.artbody .row b{color:var(--paper)}

/* ── MECHANISM BLOCKS — numbered sub-sections ── */
.artbody .mech{margin:26px 0;padding:18px 18px 4px;border-radius:2px;
 background:linear-gradient(162deg,#07090C,#020305);
 border:1px solid rgba(0,0,0,.5);border-top-color:rgba(255,255,255,.09);
 border-left-color:rgba(255,255,255,.05);
 box-shadow:inset 0 1px 0 rgba(255,255,255,.026)}
.artbody .mech > .n{
 display:block!important;font:700 10px var(--m)!important;letter-spacing:.22em;
 color:var(--volt);margin:0 0 9px;line-height:1}
.artbody .mech h3{margin:0 0 10px;font-size:17px;line-height:1.34;color:var(--paper)}
.artbody .mech p{margin-bottom:14px}
.artbody .mech p:last-child{margin-bottom:14px}

/* ── VERTICAL RHYTHM — headings need air, sources need separation ── */
.artbody h2{margin-top:46px;margin-bottom:16px}
.artbody h2:first-child{margin-top:0}
.artbody h3{margin-top:30px;margin-bottom:11px;font-size:17px}
.artbody p + p{margin-top:0}
.artbody p{margin-bottom:18px}
.artbody ul,.artbody ol{margin:0 0 20px}
.artbody .src{
 display:block;margin-top:10px;padding-top:9px;
 border-top:1px solid rgba(255,255,255,.06);
 font-size:11px;line-height:1.7;color:#8891A0;text-align:left}
/* a source that ends a paragraph should not be crushed against the next heading */
.artbody p > .src:last-child{margin-bottom:4px}
.artbody .box,.artbody .stat,.artbody .chart,.artbody .tldr,
.artbody .keyfig,.artbody .pull,.artbody details.it{margin-top:24px;margin-bottom:26px}
.artbody .takeaway{margin-top:20px;margin-bottom:32px}

/* the structural fallbacks must not flatten real components */
.artbody .mech,.artbody .score,.artbody .box,.artbody .stat,.artbody .chart,
.artbody .tldr,.artbody .takeaway,.artbody .citebox{margin-bottom:26px!important}

/* ── MECHANISM SECTIONS — semantic markup, simple styling ── */
.artbody section.mech{display:block;margin:28px 0;padding:20px 20px 6px;border-radius:2px;
 background:linear-gradient(162deg,#07090C,#020305);
 border:1px solid rgba(0,0,0,.5);border-top-color:rgba(255,255,255,.09);
 border-left-color:rgba(255,255,255,.05);
 box-shadow:inset 0 1px 0 rgba(255,255,255,.026)}
.artbody h3.mh{margin:0 0 12px;font-size:18px;line-height:1.32;color:var(--paper);
 padding-top:0;border-top:0}
.artbody .mn{display:block;font:700 10px var(--m);letter-spacing:.22em;
 color:var(--volt);margin-bottom:8px}
.artbody section.mech > p{margin-bottom:16px}
.artbody section.mech > p:last-child{margin-bottom:16px}
/* a source inside a paragraph always drops to its own line */
.artbody p > .src{display:block;margin-top:11px;padding-top:9px;
 border-top:1px solid rgba(255,255,255,.06)}

/* ── HOMEPAGE — breathing room between consoles ── */
html.home .pg > .pan,
html.home .pg > .deck{margin-top:44px;margin-bottom:44px}
html.home .pg > .band{margin-top:56px;margin-bottom:52px}
html.home .pg > .wrap{margin-bottom:40px}
html.home .deck > .pan + .pan{margin-top:1px}
/* a hairline between consoles so the stack reads as separate instruments */
html.home .pg > .pan + .pan::before,
html.home .pg > .deck + .pan::before,
html.home .pg > .pan + .deck::before{
 content:"";position:absolute;top:-23px;left:0;right:0;height:1px;
 background:linear-gradient(90deg,transparent,rgba(200,255,0,.22) 18%,rgba(255,255,255,.06) 55%,transparent)}
html.home .pg > .pan,html.home .pg > .deck{position:relative}
@media(max-width:760px){
 html.home .pg > .pan,html.home .pg > .deck{margin-top:26px;margin-bottom:26px}
 html.home .pg > .band{margin-top:32px;margin-bottom:30px}}

/* ── SEMANTIC ELEMENTS ── */
.artbody .mn{display:block;font:700 10px var(--m);letter-spacing:.22em;color:var(--volt);
 margin:0 0 8px;line-height:1}
.artbody h3.mh{margin:0 0 12px;font-size:18px;padding-top:0;border-top:0}
cite.src,.artbody cite.src{display:block;font-style:normal;margin-top:11px;padding-top:9px;
 border-top:1px solid rgba(255,255,255,.06);
 font:400 11px/1.7 var(--m);color:#8891A0;text-align:left}
.artbody table.score{width:100%;border-collapse:collapse;margin:22px 0;
 background:linear-gradient(162deg,#07090C,#020305);
 border:1px solid rgba(255,255,255,.07);border-radius:2px;overflow:hidden}
.artbody table.score caption{text-align:left;font:700 10px var(--m);letter-spacing:.22em;
 color:#8891A0;padding:12px 15px 0}
.artbody table.score th[scope="col"]{font:700 10px var(--m);letter-spacing:.18em;color:#8891A0;
 text-align:left;padding:11px 15px;border-bottom:1px solid rgba(255,255,255,.1)}
.artbody table.score th[scope="col"]:last-child{text-align:right}
.artbody table.score th[scope="row"]{font:400 15px/1.7 var(--s);color:var(--mid);
 text-align:left;padding:13px 15px;border-bottom:1px solid rgba(255,255,255,.06);font-weight:400}
.artbody table.score th[scope="row"] b{color:var(--paper);font-weight:700}
.artbody table.score td.pts{font:700 14px var(--m);color:var(--volt);text-align:right;
 padding:13px 15px;border-bottom:1px solid rgba(255,255,255,.06);
 font-variant-numeric:tabular-nums;white-space:nowrap}
.artbody table.score td.pts.zero{color:#8891A0}
.artbody table.score tr:last-child th,.artbody table.score tr:last-child td{border-bottom:0}
article.artbody{display:block}
/* timeline event blocks */
.artbody section.ev{display:block;margin:22px 0;padding:18px 18px 4px;border-radius:2px;
 background:linear-gradient(162deg,#07090C,#020305);
 border:1px solid rgba(0,0,0,.5);border-top-color:rgba(255,255,255,.09);
 border-left:2px solid rgba(200,255,0,.25)}
.artbody section.ev h3{margin:0 0 10px;font-size:17px;line-height:1.32;padding-top:0;border-top:0}
.artbody section.ev > p{margin-bottom:14px}
.artbody .lede{font:300 clamp(15px,1.8vw,18px)/1.62 var(--s);color:var(--mid);margin-bottom:22px;text-align:left}

/* ══════════════════════════════════════════════════════════════════════════
   SCOPE WIDENING — some pages carry content outside .artbody, inherited from
   the original site structure. Article styling is therefore also scoped to
   .art, the outer wrapper, so no content can end up unstyled because of
   where a wrapper happens to close.
   ══════════════════════════════════════════════════════════════════════════ */
.art{font-size:15.5px;line-height:1.82;color:var(--mid)}
.art p{font-size:15.5px;line-height:1.82;margin:0 0 18px;
 text-align:justify;hyphens:auto;-webkit-hyphens:auto}
.art li{font-size:15px;line-height:1.78}
.art h2{font:700 clamp(20px,2.7vw,30px)/1.1 var(--d);letter-spacing:-.03em;
 text-transform:uppercase;color:var(--paper);margin:46px 0 16px;
 padding:26px 0 0 34px;position:relative;border-top:1px solid rgba(255,255,255,.07)}
.art h3{font:700 17px/1.34 var(--s);color:var(--paper);margin:30px 0 11px}
.art a{color:var(--volt);text-decoration:none;border-bottom:1px solid rgba(200,255,0,.28)}
.art a:visited{color:var(--volt)}
.art a:hover{border-bottom-color:var(--volt);background:rgba(200,255,0,.07)}
.art a.room,.art .bento a,.art .rng a,.art .rail a{border-bottom:0;background:none}
.art b,.art strong{color:var(--paper)}
.art .src,.art cite.src{display:block;margin-top:11px;padding-top:9px;
 border-top:1px solid rgba(255,255,255,.06);font:400 11px/1.7 var(--m);
 color:#8891A0;text-align:left;font-style:normal}
/* the old timeline markup, styled properly */
.art .yr{display:block;font:700 clamp(17px,2.4vw,24px) var(--d);letter-spacing:-.03em;
 color:var(--volt);margin:34px 0 12px;padding-top:22px;
 border-top:1px solid rgba(255,255,255,.08);font-variant-numeric:tabular-nums}
.art .ev{display:grid;grid-template-columns:78px 1fr;gap:16px;margin:0 0 1px;
 padding:16px 16px 16px 14px;
 background:linear-gradient(162deg,#07090C,#020305);
 border:1px solid rgba(0,0,0,.5);border-top-color:rgba(255,255,255,.07);
 border-left:2px solid rgba(200,255,0,.22)}
.art .ev > .d{font:700 10px var(--m);letter-spacing:.2em;color:#8891A0;padding-top:3px}
.art .ev .t{display:block;font:700 15.5px/1.34 var(--s);letter-spacing:-.015em;
 color:var(--paper);margin-bottom:9px}
.art .ev .tag{display:inline-block;margin-left:9px;font:700 9px var(--m);
 letter-spacing:.18em;color:#050506;background:var(--volt);padding:3px 7px;
 border-radius:2px;vertical-align:1px}
.art .ev .tag.harm{background:#FF6A78;color:#100002}
.art .ev .tag.cap{background:#8FD3FF;color:#00131F}
.art .ev .tag.fail,.art .ev .tag.failed{background:#8891A0;color:#08090B}
.art .ev p{margin:0;font-size:14.5px;line-height:1.74}
@media(max-width:620px){
 .art .ev{grid-template-columns:1fr;gap:6px}
 .art p{text-align:left;hyphens:manual}
 .art h2{padding-left:0}}

/* ── HOMEPAGE · RECOMMENDED PATH ── */
.startpath{margin:0 0 44px}
.sp-h{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:14px}
.sp-h span{font:700 10px var(--m);letter-spacing:.24em;color:var(--volt)}
.sp-h a{font:700 10px var(--m);letter-spacing:.18em;color:#8891A0;text-decoration:none}
.sp-h a:hover{color:var(--volt)}
.sp-g{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(255,255,255,.06);
 border:1px solid rgba(0,0,0,.5);border-top-color:rgba(255,255,255,.1)}
.sp-g a{background:linear-gradient(162deg,#07090C,#020305);padding:17px 16px;text-decoration:none;
 display:flex;flex-direction:column;position:relative;overflow:hidden;
 transition:background .3s var(--e);box-shadow:inset 0 1px 0 rgba(255,255,255,.024)}
.sp-g a:hover{background:linear-gradient(162deg,#0D110A,#050703)}
.sp-lead{grid-column:span 3;border-left:2px solid var(--volt)!important}
.sp-g .ix{font:700 10px var(--m);letter-spacing:.2em;color:#8891A0;margin-bottom:10px}
.sp-lead .ix{color:var(--volt)}
.sp-g .n{font:700 15px/1.25 var(--s);letter-spacing:-.02em;color:var(--paper);margin-bottom:8px}
.sp-lead .n{font:700 clamp(19px,2.5vw,27px)/1.12 var(--d);letter-spacing:-.035em;text-transform:uppercase}
.sp-g a:hover .n{color:var(--volt)}
.sp-g .d{font-size:12.5px;line-height:1.66;color:var(--dim)}
.sp-lead .d{font-size:14px;max-width:74ch;color:var(--mid)}
@media(max-width:820px){.sp-g{grid-template-columns:1fr}.sp-lead{grid-column:span 1}}

/* ── HOMEPAGE · THE TWO HALVES ── */
.halves{margin:0 0 44px;padding:22px 20px;border-radius:2px;
 background:linear-gradient(162deg,#07090C,#020305);
 border:1px solid rgba(0,0,0,.5);border-top-color:rgba(200,255,0,.2)}
.hv-h span{font:700 10px var(--m);letter-spacing:.24em;color:var(--volt);display:block;margin-bottom:16px}
.hv-g{display:grid;grid-template-columns:1fr 40px 1fr;gap:0;align-items:stretch}
.hv{display:flex;flex-direction:column;text-decoration:none;padding:17px 17px;border-radius:2px;
 background:linear-gradient(162deg,#0A0D10,#040507);border:1px solid rgba(255,255,255,.07);
 transition:border-color .3s var(--e),background .3s var(--e)}
.hv:hover{border-color:rgba(200,255,0,.35);background:linear-gradient(162deg,#0D110A,#050703)}
.hv-k{font:700 10px var(--m);letter-spacing:.22em;color:var(--volt);margin-bottom:10px}
.hv-t{font:700 clamp(16px,2vw,21px)/1.2 var(--d);letter-spacing:-.03em;text-transform:uppercase;
 color:var(--paper);margin-bottom:10px}
.hv:hover .hv-t{color:var(--volt)}
.hv-d{font-size:13px;line-height:1.7;color:var(--dim);margin-bottom:12px;flex:1}
.hv-n{font:700 10px var(--m);letter-spacing:.16em;color:#6E7681;
 padding-top:10px;border-top:1px solid rgba(255,255,255,.06)}
.hv-mid{display:flex;align-items:center;justify-content:center}
.hv-mid span{font:700 20px var(--d);color:var(--volt);opacity:.55}
.hv-p{font-size:13.5px;line-height:1.74;color:var(--mid);margin:16px 0 0;
 padding-top:14px;border-top:1px solid rgba(255,255,255,.06);max-width:78ch}
@media(max-width:760px){.hv-g{grid-template-columns:1fr}.hv-mid{padding:10px 0}}

/* ══════════════════════════════════════════════════════════════════════════
   COMPARISON TABLE — three columns, proportioned, wraps properly
   ══════════════════════════════════════════════════════════════════════════ */
.artbody table.cmp,.art table.cmp{
 width:100%;border-collapse:collapse;table-layout:fixed;margin:26px 0;
 background:#0D0F12;border:1px solid rgba(255,255,255,.09);border-radius:2px}
table.cmp caption{caption-side:top;text-align:left;
 font:700 10px var(--m);letter-spacing:.2em;color:#8891A0;
 padding:13px 15px 11px;border-bottom:1px solid rgba(255,255,255,.07)}
table.cmp th.c1{width:26%}
table.cmp th.c2{width:22%}
table.cmp th.c3{width:52%}
table.cmp thead th{
 font:700 10px var(--m);letter-spacing:.18em;color:var(--volt);text-align:left;
 padding:11px 15px;background:rgba(200,255,0,.045);
 border-bottom:1px solid rgba(255,255,255,.1);vertical-align:bottom}
table.cmp tbody th[scope="row"]{
 text-align:left;padding:15px;vertical-align:top;font-weight:400;
 border-bottom:1px solid rgba(255,255,255,.06);
 border-right:1px solid rgba(255,255,255,.05)}
table.cmp .rn{display:block;font:700 13.5px/1.35 var(--m);letter-spacing:-.01em;
 color:var(--paper);word-break:break-word;margin-bottom:6px}
table.cmp .rn b{font-weight:700;color:var(--paper)}
table.cmp .rl{display:block;font:400 10px/1.5 var(--m);letter-spacing:.1em;color:#7C8490}
table.cmp td{
 padding:15px;vertical-align:top;text-align:left;
 border-bottom:1px solid rgba(255,255,255,.06);
 white-space:normal;word-break:normal;overflow-wrap:anywhere}
table.cmp td.claimed{
 font:400 13px/1.6 var(--s);color:#9AA3AF;font-style:italic;
 border-right:1px solid rgba(255,255,255,.05)}
table.cmp td.verdict{font:400 13.5px/1.7 var(--s);color:var(--mid)}
table.cmp td.verdict b{color:var(--volt);font-weight:700}
table.cmp tbody tr:last-child th,table.cmp tbody tr:last-child td{border-bottom:0}
table.cmp tbody tr:nth-child(even) th,table.cmp tbody tr:nth-child(even) td{background:rgba(255,255,255,.012)}
@media(max-width:760px){
 table.cmp,table.cmp thead,table.cmp tbody,table.cmp tr,table.cmp th,table.cmp td{display:block;width:auto}
 table.cmp thead{display:none}
 table.cmp tbody tr{border-bottom:1px solid rgba(255,255,255,.09);padding:4px 0 10px}
 table.cmp tbody th[scope="row"]{border-right:0;border-bottom:0;padding-bottom:6px}
 table.cmp td{border-right:0;border-bottom:0;padding-top:6px;padding-bottom:8px}
 table.cmp td.claimed::before{content:"CLAIM · ";font:700 9px var(--m);letter-spacing:.2em;color:#7C8490;font-style:normal}
 table.cmp td.verdict::before{content:"REALITY · ";font:700 9px var(--m);letter-spacing:.2em;color:var(--volt)}
}
/* the two-column score table keeps its own layout */
.artbody table.score{table-layout:auto}

/* ══════════════════════════════════════════════════════════════════════════
   READING BACKGROUND — flat matte dark grey, no gradient
   ══════════════════════════════════════════════════════════════════════════ */
html.reading body::before{
 background:#15171B;                    /* flat. one colour. */
 background-image:none}
html.reading body::after{
 opacity:.34;
 background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.010) 0 1px,transparent 1px 3px)}
html.reading .veil{background:none;opacity:0}
html.reading .tx{opacity:.10}
html.reading .art::before{display:none}
/* panels lift off the flatter ground */
html.reading .artbody .box,html.reading .artbody .citebox,html.reading .artbody .tldr,
html.reading .artbody section.mech,html.reading .artbody section.ev,
html.reading .artbody .stat>div,html.reading .artbody .chart,
html.reading table.cmp,html.reading .artbody table.score,
html.reading .meter div,html.reading .rng a,html.reading .bento a{
 background:#0E1014}
html.reading .artbody .tldr{background:#101408}
html.reading .artbody .takeaway{background:rgba(200,255,0,.05)}
html.reading .bar{background:rgba(15,17,21,.94)}

/* ── READING GROUND — black matte ── */
html.reading body::before{background:#08090B;background-image:none}
html.reading body::after{opacity:.26;
 background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.008) 0 1px,transparent 1px 3px)}
html.reading .artbody .box,html.reading .artbody .citebox,html.reading .artbody .tldr,
html.reading .artbody section.mech,html.reading .artbody section.ev,
html.reading .artbody .stat>div,html.reading .artbody .chart,
html.reading table.cmp,html.reading .artbody table.score,
html.reading .meter div,html.reading .rng a,html.reading .bento a{background:#0C0E11}
html.reading .artbody .tldr{background:#0E1207}
html.reading .bar{background:rgba(8,9,11,.95)}

/* ── READING GROUND — pure matte black, no grain, no gradient ── */
html.reading body::before{background:#080809;background-image:none}
html.reading body::after{display:none;content:none;background:none;opacity:0}
html.reading .tx{display:none}
html.reading .veil{display:none}
html.reading .artbody .box,html.reading .artbody .citebox,html.reading .artbody .tldr,
html.reading .artbody section.mech,html.reading .artbody section.ev,
html.reading .artbody .stat>div,html.reading .artbody .chart,
html.reading table.cmp,html.reading .artbody table.score,
html.reading .meter div,html.reading .rng a,html.reading .bento a,
html.reading .sr,html.reading .sf{background:#0C0C0E;background-image:none}
html.reading .artbody .tldr{background:#0D1006}
html.reading .bar{background:rgba(8,8,9,.96);background-image:none}

/* ── G16 · CORRECTION COUNT ── */
.corcount{display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:center;
 margin:0 0 26px;padding:20px;border-radius:2px;
 background:#0C0C0E;border:1px solid rgba(0,0,0,.5);
 border-top-color:rgba(200,255,0,.24);border-left:2px solid var(--volt)}
.cc-n{text-align:center;min-width:96px}
.cc-n b{display:block;font:700 clamp(38px,6vw,62px)/.85 var(--d);letter-spacing:-.05em;
 color:var(--volt);font-variant-numeric:tabular-nums}
.cc-n span{display:block;font:700 9px var(--m);letter-spacing:.18em;color:#8891A0;margin-top:9px}
.cc-t p{font-size:14px;line-height:1.72;color:var(--mid);margin:0 0 9px;text-align:left}
.cc-t .cc-s{font-size:12.5px;color:var(--dim);margin:0}
@media(max-width:560px){.corcount{grid-template-columns:1fr;gap:12px}.cc-n{text-align:left}}

/* homepage strip */
.corbar{display:flex;align-items:center;gap:16px;margin:16px 0 0;padding:14px 16px;
 text-decoration:none;border-radius:2px;
 background:rgba(200,255,0,.05);border-left:2px solid var(--volt);
 border-top:1px solid rgba(255,255,255,.05);
 transition:background .3s var(--e)}
.corbar:hover{background:rgba(200,255,0,.09)}
.cb-n{font:700 26px var(--d);letter-spacing:-.04em;color:var(--volt);
 font-variant-numeric:tabular-nums;flex:0 0 auto;line-height:1}
.cb-t{flex:1;font-size:13px;line-height:1.6;color:var(--mid)}
.cb-t b{color:var(--paper)}
.cb-a{font:700 9.5px var(--m);letter-spacing:.18em;color:var(--volt);flex:0 0 auto;white-space:nowrap}
@media(max-width:620px){.corbar{flex-wrap:wrap;gap:10px}.cb-a{width:100%}}

/* ── G15 · VAULT FILTER ── */
.vfilter{margin:0 0 24px;padding:17px 17px 15px;border-radius:2px;
 background:#0C0C0E;border:1px solid rgba(255,255,255,.08);border-top-color:rgba(200,255,0,.2)}
.vf-h{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:12px;gap:12px}
.vf-h span:first-child{font:700 10px var(--m);letter-spacing:.22em;color:var(--volt)}
.vf-count{font:700 10px var(--m);letter-spacing:.16em;color:#8891A0}
.vf-r{display:flex;flex-wrap:wrap;gap:1px}
.vf{font:700 9.5px var(--m);letter-spacing:.16em;color:#8891A0;cursor:pointer;
 background:#0A0A0C;border:1px solid rgba(255,255,255,.08);padding:9px 13px;
 transition:color .2s var(--e),background .2s var(--e)}
.vf:hover{color:var(--paper)}
.vf.on{color:#050506;background:var(--volt);border-color:var(--volt)}
.vf-n{font-size:12.5px;line-height:1.7;color:var(--dim);margin:13px 0 0;
 padding-top:12px;border-top:1px solid rgba(255,255,255,.06);text-align:left}
.pstamp{display:block;font:400 10px var(--m);letter-spacing:.1em;color:#7C8490;
 margin:0 0 12px;padding-bottom:9px;border-bottom:1px solid rgba(255,255,255,.06)}
.pstamp b{color:var(--volt);font-weight:700}
.pstamp i{font-style:normal;color:#6E7681}
.citebox .cnote2{font-size:12px;line-height:1.7;color:var(--dim);margin:11px 0 0;
 padding-top:10px;border-top:1px solid rgba(255,255,255,.06)}
.citebox .cnote2 b{color:var(--paper)}
.mc-checked{font:700 9.5px var(--m);letter-spacing:.18em;color:#6E7681;
 margin-top:7px;padding-top:7px;border-top:1px solid rgba(255,255,255,.055)}
.mc-flag{display:inline-block;font:700 9px var(--m);letter-spacing:.14em;
 padding:3px 7px;border-radius:2px;margin-left:8px;vertical-align:2px;white-space:nowrap}
.mc-flag.sup{background:rgba(255,193,7,.16);color:#E3B341;border:1px solid rgba(255,193,7,.3)}
.mc-flag.warn{background:rgba(255,106,120,.14);color:#FF8A94;border:1px solid rgba(255,106,120,.28)}
.mc-flag.ok{background:rgba(200,255,0,.14);color:var(--volt);border:1px solid rgba(200,255,0,.3)}
.mc-flag.dead{background:rgba(140,148,160,.16);color:#A2AAB6;border:1px solid rgba(140,148,160,.3)}
.sheet-checked{font:400 9.5px var(--m);letter-spacing:.1em;color:#6E7681;
 margin:0 0 12px;padding-bottom:9px;border-bottom:1px solid rgba(255,255,255,.055)}

/* ══════════════════════════════════════════════════════════════════════════
   MODEL CARD REPAIR
   A pattern selector — [class*="ch"] — was matching mc-checked, so every date
   stamp rendered as its own panel. These rules take the card internals out of
   every generic fallback and lay the grid out properly.
   ══════════════════════════════════════════════════════════════════════════ */
.artbody [class^="mc-"],.artbody [class*=" mc-"],
.art [class^="mc-"],.art [class*=" mc-"]{
 background:none!important;border:0!important;box-shadow:none!important;
 border-radius:0!important;padding:0!important;margin:0!important}

/* the card itself is the only box */
.artbody .mc-card,.art .mc-card,
.artbody [class*="mc-item"],.artbody .model-card{
 background:#0C0C0E!important;
 border:1px solid rgba(255,255,255,.08)!important;
 border-radius:2px!important;padding:18px 17px!important;margin:0!important;
 display:flex!important;flex-direction:column}

/* card internals — plain, left-aligned, no justification in narrow columns */
.artbody .mc-icon{font-size:20px!important;line-height:1!important;
 margin:0 0 12px!important;display:block!important;opacity:.9}
.artbody .mc-name{font:700 15px/1.3 var(--s)!important;letter-spacing:-.015em;
 color:var(--paper)!important;display:block!important;margin:0 0 6px!important;
 text-align:left!important}
.artbody .mc-sub{font:400 11px/1.55 var(--m)!important;letter-spacing:.06em;
 color:#7C8490!important;display:block!important;margin:0 0 10px!important;
 text-align:left!important}
.artbody .mc-checked{font:700 9px/1.4 var(--m)!important;letter-spacing:.16em;
 color:#5F6773!important;display:block!important;
 margin:0 0 12px!important;padding:0 0 10px!important;
 border-bottom:1px solid rgba(255,255,255,.06)!important;
 background:none!important;text-align:left!important}
.artbody .mc-badge{display:inline-block!important;
 font:700 9px var(--m)!important;letter-spacing:.16em;
 background:rgba(200,255,0,.12)!important;color:var(--volt)!important;
 padding:5px 9px!important;border-radius:2px!important;
 margin:0 0 12px!important;border:1px solid rgba(200,255,0,.24)!important}
.artbody .mc-bullets{list-style:none!important;margin:0 0 12px!important;padding:0!important}
.artbody .mc-bullets li{position:relative;padding:6px 0 6px 15px!important;
 font-size:12.5px!important;line-height:1.62!important;color:var(--mid);
 text-align:left!important;hyphens:manual!important;
 border-bottom:1px solid rgba(255,255,255,.04)!important;margin:0!important}
.artbody .mc-bullets li:last-child{border-bottom:0!important}
.artbody .mc-bullets li::before{content:"";position:absolute;left:0;top:14px;
 width:6px;height:1px;background:rgba(200,255,0,.5)}
.artbody .mc-bullets li strong{color:var(--paper)}
.artbody .mc-reveal-btn{font:700 9.5px var(--m)!important;letter-spacing:.16em;
 color:#8891A0!important;cursor:pointer;display:block!important;
 padding:10px 0 0!important;margin:auto 0 0!important;
 border-top:1px solid rgba(255,255,255,.06)!important;text-align:left!important}
.artbody .mc-reveal-btn:hover{color:var(--volt)!important}
.artbody .mc-reveal-body{margin-top:11px!important}
.artbody .mc-pl{font:700 9px var(--m)!important;letter-spacing:.18em;
 color:var(--volt)!important;display:block!important;margin:0 0 7px!important}
.artbody .mc-prompt{font:400 11.5px/1.68 var(--m)!important;color:#9AA3AF!important;
 background:#08080A!important;border:1px solid rgba(255,255,255,.06)!important;
 padding:11px 12px!important;border-radius:2px!important;
 white-space:pre-wrap;text-align:left!important;display:block!important}
.artbody .mc-flag{margin-left:7px!important;padding:3px 7px!important}

/* the grid — three columns need width, so give the page more of it */
.artbody .mc-grid,.artbody [class*="mc-grid"]{
 display:grid!important;gap:14px!important;
 grid-template-columns:repeat(auto-fit,minmax(280px,1fr))!important;
 background:none!important;border:0!important;padding:0!important;margin:22px 0!important}
@media(max-width:700px){.artbody .mc-grid{grid-template-columns:1fr!important}}

/* ── the real class names: .models-row is the grid, .mc is the card ── */
.artbody .models-row,.art .models-row{
 display:grid!important;gap:14px!important;
 grid-template-columns:repeat(auto-fit,minmax(300px,1fr))!important;
 background:none!important;border:0!important;box-shadow:none!important;
 padding:0!important;margin:22px 0!important}
@media(max-width:760px){.artbody .models-row{grid-template-columns:1fr!important}}

.artbody .models-row > .mc,.art .models-row > .mc{
 background:#0C0C0E!important;
 border:1px solid rgba(255,255,255,.08)!important;
 border-top-color:rgba(255,255,255,.12)!important;
 border-radius:2px!important;padding:18px 17px!important;margin:0!important;
 box-shadow:none!important;display:flex!important;flex-direction:column;
 min-width:0}
.artbody .mc-head{display:flex!important;align-items:flex-start!important;gap:11px!important;
 background:none!important;border:0!important;padding:0!important;margin:0 0 4px!important}
.artbody .mc-head > div:last-child{min-width:0;flex:1}
/* nothing inside a card is justified — narrow columns tear */
.artbody .mc *,.art .mc *{text-align:left!important;hyphens:manual!important;
 overflow-wrap:break-word}

/* ── WIDE PAGES — models and cheat sheets need room, not a reading column ── */
html.wide .artbody{font-size:14px;line-height:1.74}
html.wide .artbody p{font-size:14px;line-height:1.74;text-align:left;hyphens:manual}
html.wide .artbody li{font-size:13.5px;line-height:1.7}
html.wide .artbody h2 + p{font-size:14.5px}
html.wide .artbody .box p,html.wide .artbody .citebox p{font-size:13.5px}
html.wide .artbody details.it .ct{font-size:13.5px;line-height:1.75}
html.wide .artbody details.it .ct p{font-size:13.5px;text-align:left;hyphens:manual}
html.wide .artbody .stat .l{font-size:12.5px}
@media(max-width:1100px){html.wide .art{max-width:92vw}}
@media(max-width:700px){html.wide .art{max-width:100%}}

/* ══════════════════════════════════════════════════════════════════════════
   WIDE PAGES — full measure, compact type
   Models, cheat sheets and the vault are reference grids rather than prose.
   They take the full page width and a denser type scale.
   ══════════════════════════════════════════════════════════════════════════ */
html.wide .page{max-width:none}

html.wide .artbody{font-size:12px;line-height:1.7}
html.wide .artbody p{font-size:12px;line-height:1.7;text-align:left;hyphens:manual;
 margin-bottom:13px;max-width:none}
html.wide .artbody li{font-size:11.5px;line-height:1.66}
html.wide .artbody h2 + p{font-size:12.5px;line-height:1.68}
html.wide .artbody .box p,html.wide .artbody .citebox p{font-size:11.5px;line-height:1.72}
html.wide .artbody details.it summary{font-size:12.5px}
html.wide .artbody details.it .ct{font-size:11.5px;line-height:1.74}
html.wide .artbody details.it .ct p{font-size:11.5px;line-height:1.74;text-align:left;hyphens:manual}
html.wide .artbody details.it .ct li{font-size:11.5px;line-height:1.7}
html.wide .artbody .stat .l{font-size:11px;line-height:1.65}
html.wide .artbody .stat .v{font-size:clamp(24px,3vw,34px)}
html.wide .artbody .tldr li{font-size:11.5px;line-height:1.68}
html.wide .artbody .tldr p{font-size:11.5px}
html.wide .artbody .takeaway p{font-size:11.5px}
html.wide .artbody .pull p{font:300 clamp(14px,1.8vw,19px)/1.4 var(--s)}
html.wide .artbody .src,html.wide .artbody cite.src{font-size:9.5px;line-height:1.62}
html.wide .artbody h2{font-size:clamp(16px,2vw,23px);margin:34px 0 12px;padding-top:20px}
html.wide .artbody h3{font-size:14px;margin:22px 0 9px}
html.wide .artbody .h,html.wide .artbody .box .h,html.wide .artbody .citebox .h,
html.wide .artbody .tldr .th,html.wide .artbody .takeaway .tk{font-size:9px}
html.wide .meter .k{font-size:9px}
html.wide .meter .v{font-size:14px}
html.wide .artbody code{font-size:11px}

/* card grid gets more columns at full width */
html.wide .artbody .models-row{
 grid-template-columns:repeat(auto-fit,minmax(260px,1fr))!important;gap:12px!important}
html.wide .artbody .models-row > .mc{padding:15px 14px!important}
html.wide .artbody .mc-name{font-size:13px!important}
html.wide .artbody .mc-sub{font-size:9.5px!important}
html.wide .artbody .mc-checked{font-size:8px!important}
html.wide .artbody .mc-badge{font-size:8px!important;padding:4px 7px!important}
html.wide .artbody .mc-bullets li{font-size:11px!important;line-height:1.56!important;padding:5px 0 5px 13px!important}
html.wide .artbody .mc-reveal-btn{font-size:8.5px!important}
html.wide .artbody .mc-prompt{font-size:10px!important;line-height:1.62!important;padding:9px 10px!important}
html.wide .artbody .mc-flag{font-size:8px!important}
html.wide .artbody .mc-icon{font-size:17px!important;margin-bottom:9px!important}
html.wide table.cmp td,html.wide table.cmp th[scope="row"]{font-size:11.5px;padding:11px 12px}
html.wide .artbody .vf{font-size:8.5px}
html.wide .artbody .pstamp{font-size:9px}
@media(max-width:760px){
 html.wide .artbody{font-size:13px}
 html.wide .artbody p{font-size:13px}
 html.wide .artbody li{font-size:12.5px}
 html.wide .artbody .models-row{grid-template-columns:1fr!important}}
html.wide .artbody .mc-name{font-size:12px!important;line-height:1.34!important}
html.wide .artbody details.it summary{font-size:12px}

/* ── WIDE PAGES — half the viewport, centred ── */
html.wide .art{max-width:50vw;width:50vw;margin:0 auto}
@media(min-width:1900px){html.wide .art{max-width:900px;width:900px}}
@media(max-width:1200px){html.wide .art{max-width:72vw;width:72vw}}
@media(max-width:820px){html.wide .art{max-width:92vw;width:92vw}}
@media(max-width:600px){html.wide .art{max-width:100%;width:100%}}
/* at half width the card grid needs fewer, narrower columns */
html.wide .artbody .models-row{
 grid-template-columns:repeat(auto-fit,minmax(215px,1fr))!important;gap:11px!important}
@media(max-width:1200px){
 html.wide .artbody .models-row{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))!important}}
@media(max-width:600px){
 html.wide .artbody .models-row{grid-template-columns:1fr!important}}
.artbody .box.plain{border-top-color:rgba(140,190,255,.26)!important;
 background:linear-gradient(162deg,#080A0E,#040507)}
.artbody .box.plain .h{color:#8CBEFF}
.artbody .box.plain p{color:var(--paper)}
/* .box.split: two pieces of advice that look opposite but apply to different jobs.
   Deliberately louder than a plain box so a reader skimming either page sees it (22 Sep 2026). */
.artbody .box.split{border-left:3px solid var(--volt);background:rgba(200,255,0,.05)}
.artbody .box.split .h{color:var(--volt)}
.artbody .box.split p b{color:var(--volt)}
/* .box.pricenote: R14 (23 Sep 2026). Prices are snapshots the site no longer updates; this box
   gives the check date and the vendor links. Quiet on purpose - it frames the page, not warns. */
.artbody .box.pricenote{border-left:3px solid var(--mid)}
.artbody .box.pricenote .h{color:var(--paper)}
html.reading .artbody .box.plain{background:#0B0D11}

/* ══════════════════════════════════════════════════════════════════════════
   NAVIGATION — desktop bar, mobile drawer
   ══════════════════════════════════════════════════════════════════════════ */
.bar{height:auto!important;min-height:42px!important;padding:0 18px!important;
 display:flex;align-items:center;gap:12px;flex-wrap:nowrap;
 border-bottom:1px solid rgba(255,255,255,.07)}
.bar .lg{flex:0 0 auto;display:flex;align-items:center}
.bar .hd{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
 font:700 9px var(--m);letter-spacing:.18em;color:#5F6773}
.bar .r{display:flex;gap:0;flex:0 0 auto;align-items:center}
.bar .r a{
 font:700 9.5px var(--m);letter-spacing:.16em;color:#8891A0;text-decoration:none;
 padding:12px 11px;border-bottom:2px solid transparent;white-space:nowrap;
 transition:color .2s var(--e),border-color .2s var(--e),background .2s var(--e)}
.bar .r a:hover{color:var(--paper);background:rgba(255,255,255,.04)}
.bar .r a.on{color:var(--volt);border-bottom-color:var(--volt)}
.bar .r a.nsearch{color:var(--volt);margin-left:4px;
 border:1px solid rgba(200,255,0,.28);border-bottom-width:1px;border-radius:2px;padding:7px 11px}
.bar .r a.nsearch:hover{background:rgba(200,255,0,.1);border-color:var(--volt)}

/* hamburger — hidden on desktop */
.navtoggle{display:none;flex:0 0 auto;width:38px;height:34px;padding:9px 8px;
 background:none;border:1px solid rgba(255,255,255,.12);border-radius:2px;cursor:pointer;
 flex-direction:column;justify-content:space-between}
.navtoggle i{display:block;height:1.5px;width:100%;background:var(--paper);
 transition:transform .28s var(--e),opacity .2s var(--e)}
.navtoggle[aria-expanded="true"] i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.navtoggle[aria-expanded="true"] i:nth-child(2){opacity:0}
.navtoggle[aria-expanded="true"] i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media(max-width:900px){
 .bar{min-height:48px!important;padding:0 14px!important;gap:10px}
 .bar .hd{display:none}
 .navtoggle{display:flex}
 .bar .r{
  position:fixed;top:48px;left:0;right:0;z-index:70;
  flex-direction:column;gap:0;align-items:stretch;
  background:#0A0A0C;border-bottom:1px solid rgba(255,255,255,.1);
  box-shadow:0 18px 40px rgba(0,0,0,.6);
  max-height:0;overflow:hidden;
  transition:max-height .32s var(--e)}
 .bar .r.open{max-height:70vh;overflow:auto}
 .bar .r a{
  padding:15px 18px;font-size:11px;letter-spacing:.2em;
  border-bottom:1px solid rgba(255,255,255,.06);border-left:2px solid transparent;
  min-height:48px;display:flex;align-items:center}
 .bar .r a.on{border-bottom-color:rgba(255,255,255,.06);border-left-color:var(--volt);
  background:rgba(200,255,0,.06)}
 .bar .r a.nsearch{margin:0;border:0;border-bottom:1px solid rgba(255,255,255,.06);
  border-left:2px solid transparent;border-radius:0;background:rgba(200,255,0,.05)}
}

/* ── MOBILE — never full bleed ── */
@media(max-width:900px){
 .page{padding-left:16px!important;padding-right:16px!important}
 .art,html.wide .art{max-width:100%!important;width:auto!important;margin:0!important}
 .pg>.pan,.pg>.deck,.pg>.band,.pg>.wrap{margin-left:14px!important;margin-right:14px!important;width:auto!important}
 html.home .pg>.pan,html.home .pg>.deck,html.home .pg>.band,html.home .pg>.wrap{
  width:auto!important;max-width:none!important;margin-left:14px!important;margin-right:14px!important}
 .bento,.rng,.sres,.models-row,.stat,.sp-g,.hv-g{margin-left:0;margin-right:0}
 .rail{display:none!important}
}
@media(max-width:620px){
 .page{padding-left:13px!important;padding-right:13px!important}
 .pg>.pan,.pg>.deck,.pg>.band,.pg>.wrap,
 html.home .pg>.pan,html.home .pg>.deck,html.home .pg>.band,html.home .pg>.wrap{
  margin-left:11px!important;margin-right:11px!important}
 .artbody,html.wide .artbody{font-size:14.5px;line-height:1.76}
 .artbody p,html.wide .artbody p{font-size:14.5px;line-height:1.76;text-align:left;hyphens:manual}
 .artbody li,html.wide .artbody li{font-size:14px}
 .meter div{min-width:calc(50% - 1px)}
 .arthd h1{font-size:clamp(25px,7.5vw,38px)}
 table.cmp,.artbody table.score{font-size:13px}
}
.sitefoot{display:flex;flex-wrap:wrap;align-items:center;gap:0 18px;
 margin:52px 0 0;padding:20px 0 8px;border-top:1px solid rgba(255,255,255,.08)}
.sitefoot a{font:700 9px var(--m);letter-spacing:.2em;color:#7C8490;text-decoration:none;
 padding:6px 0;transition:color .2s var(--e)}
.sitefoot a:hover{color:var(--volt)}
.sitefoot span{font:700 9px var(--m);letter-spacing:.16em;color:#565D68;margin-left:auto}
@media(max-width:700px){.sitefoot{gap:0 14px}.sitefoot span{margin-left:0;width:100%;padding-top:8px}}

/* ── HUB CARDS ── */
.hgrid{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));margin:18px 0 30px}
.hcard{display:flex;flex-direction:column;gap:7px;padding:16px 15px;text-decoration:none;
 background:#0C0C0E;border:1px solid rgba(255,255,255,.08);border-radius:2px;
 border-left:2px solid rgba(200,255,0,.25);
 transition:border-left-color .25s var(--e),background .25s var(--e),transform .25s var(--e)}
.hcard:hover{border-left-color:var(--volt);background:#0F1013;transform:translateY(-2px)}
.hcard .hk{font:700 8.5px var(--m);letter-spacing:.18em;color:#6E7681}
.hcard .hn{font:700 14px/1.32 var(--s);letter-spacing:-.012em;color:var(--paper)}
.hcard:hover .hn{color:var(--volt)}
.hcard .hd{font:400 11.5px/1.62 var(--s);color:var(--dim)}
@media(max-width:620px){.hgrid{grid-template-columns:1fr}}

/* ══════════════════════════════════════════════════════════════════════════
   READING LAYOUT + MISSING COMPONENTS          added 25 Aug 2026
   ──────────────────────────────────────────────────────────────────────────
   Two problems this fixes.

   1. WIDTH. Homepage content runs to 3/4 of the viewport. Every other page
      keeps its TEXT column at 1/2, and lets supporting material — figures,
      boxes, tables, score rows, prompt blocks — breathe out to 2/3 on both
      sides. The outer sixth on each side is reading support, not prose.

   2. 163 CLASS NAMES WERE USED IN MARKUP AND DEFINED NOWHERE. Prompt blocks,
      glossary terms, step lists, model cards, ratio cards and the rest were
      rendering as unstyled runs of text. That is what produced the collapsed
      walls of link text on the hubs and the homepage.
   ══════════════════════════════════════════════════════════════════════════ */

:root{
  --textw : min(50vw, 900px);   /* prose column — 1/2 of the page          */
  --shellw: min(66vw, 1180px);  /* supporting material — out to 2/3        */
  --homew : min(75vw, 1480px);  /* homepage                                */
  --railw : calc((var(--shellw) - var(--textw)) / 2);
}

/* ---- homepage: 3/4 ---- */
.wrap{max-width:var(--homew)}

/* ---- article pages: 1/2 text inside a 2/3 shell ---- */
.page{max-width:var(--shellw)}
.art{max-width:var(--shellw)}
.arthd{max-width:var(--textw);margin-inline:auto}
.artbody{max-width:var(--textw);margin-inline:auto}
.artbody p,.artbody li,.artbody ul,.artbody ol,.artbody blockquote{max-width:none}

/* supporting material uses the full 2/3 shell, centred on the text column */
.artbody > .box,
.artbody > .citebox,
.artbody > .score,
.artbody > .tldr,
.artbody > .takeaway,
.artbody > figure,
.artbody > table,
.artbody > pre,
.artbody > .dia,
.artbody > section.mech,
.artbody > .prompt-wrap,
.artbody > .model-chips,
.artbody > .tools-row,
.artbody > .use-row,
.artbody > .ratio-grid,
.artbody > .type-grid,
.artbody > .ref-grid,
.artbody > .modgrid,
.artbody > .rev-two-col,
.artbody > .related-box,
.artbody > .nl-cta{
  width:var(--shellw);
  max-width:var(--shellw);
  margin-left:calc(0px - var(--railw));
  margin-right:calc(0px - var(--railw));
}
/* restored 17 Sep 2026: removing the .ad-inline selector on 16 Sep also deleted this rule's body,
   which left a dangling selector that swallowed the 1100px media block below */

/* below the point where a 2/3 shell stops being generous, go full width */
@media(max-width:1100px){
  :root{--textw:100%;--shellw:100%;--homew:100%;--railw:0px}
  .page,.art,.wrap{max-width:1180px}
  .artbody > *{width:auto;max-width:100%;margin-left:0;margin-right:0}
}
@media(max-width:640px){
  .page,.art,.wrap{padding-left:var(--g);padding-right:var(--g)}
}

/* ══════════ PROMPT BLOCKS ══════════ */
.prompt-wrap{margin:22px 0 26px;border:1px solid var(--line);border-radius:2px;
  background:linear-gradient(162deg,#07090C,#020305);overflow:hidden}
.prompt-label{font:700 9px var(--m);letter-spacing:.2em;color:var(--volt);
  padding:11px 14px;background:rgba(200,255,0,.05);
  border-bottom:1px solid var(--line)}
.prompt-box,.neg-box{font:400 12.5px/1.85 var(--m);color:var(--mid);
  padding:14px;white-space:pre-wrap;word-break:break-word}
.neg-box{border-left:2px solid #FF6A78;background:rgba(255,106,120,.04)}
.prompt{font:400 12.5px/1.8 var(--m);color:var(--mid);white-space:pre-wrap}
.ptxt{font:400 12.5px/1.8 var(--m);color:var(--mid)}

/* ══════════ CHIPS AND TAGS ══════════ */
.model-chips,.tools-row,.use-row,.checksrow,.prow,.signs,.stats,.wings{
  display:flex;flex-wrap:wrap;gap:7px;margin:14px 0 20px}
.chip,.tool-chip,.model-tag,.tool-tag,.use-tag{
  display:inline-block;font:700 9.5px var(--m);letter-spacing:.13em;
  text-transform:uppercase;color:var(--mid);background:rgba(255,255,255,.035);
  border:1px solid var(--line);border-radius:2px;padding:6px 10px;white-space:nowrap}
.chip.aff,.model-tag.aff,.aff{border-color:rgba(200,255,0,.3);color:var(--volt)}
.chip a,.tool-chip a,.model-tag a,.aff a{color:inherit;border:0}
.aff-link{color:var(--volt);border-bottom:1px solid rgba(200,255,0,.3)}
.range{color:var(--volt);border-color:rgba(200,255,0,.28);letter-spacing:.1em}

/* ══════════ NUMBERED / LABELLED BLOCKS
   step · phase · method · type · care · element · rev · pipeline ══════════ */
.pipeline-step,.step,.phase,.method-block,.type-block,.care-block,.element,
.rev-block,.dossier,.income-card,.panel,.case,.te,.frag{
  display:block;margin:24px 0;padding:20px;border-radius:2px;
  background:linear-gradient(162deg,#07090C,#020305);
  border:1px solid var(--line);border-top-color:rgba(255,255,255,.09)}
.pipeline-step{display:flex;gap:16px;align-items:flex-start}
.step-icon{flex:0 0 auto;font-size:22px;line-height:1}
.step-body{flex:1;min-width:0}
.step-label,.phase-label,.method-label,.type-label,.care-label,.element-num,
.rev-badge,.blog-label,.tldr-label,.bracket-label,.good-label,.bad-label,
.eyebrow,.rcap,.exhcap,.bldstamp,.fmeta,.honest{
  display:block;font:700 9px var(--m);letter-spacing:.2em;text-transform:uppercase;
  color:var(--volt);margin:0 0 9px}
.bad-label{color:#FF6A78}
.good-label{color:var(--volt)}
.step-title,.phase-title,.method-title,.type-title,.care-title,.element-name,
.rev-title,.related-title,.term-name,.ref-name,.ratio-name,.model-name,
.platform-name,.type-title,.hookline{
  font:700 16px/1.35 var(--s);color:var(--paper);margin:0 0 9px}
.step-text,.step-body,.method-body,.care-body,.element-body,.term-body,
.ref-desc,.ratio-desc,.model-body,.rev-desc,.blog-meta,.ex-text,.txt,.coda{
  font-size:14px;line-height:1.8;color:var(--mid)}
.step-text p:last-child,.method-body p:last-child,.care-body p:last-child,
.element-body p:last-child{margin-bottom:0}
.step-num,.element-num,.num,.pid{font:700 10px var(--m);letter-spacing:.18em;color:var(--volt)}
.step-tool,.model-sub,.ratio-use,.rev-desc,.blog-meta{
  font:400 11px/1.7 var(--m);color:var(--dim);margin-top:9px}
.step-content{flex:1;min-width:0}

/* ══════════ GRIDS ══════════ */
.ratio-grid,.type-grid,.ref-grid,.modgrid,.art-list,.tg-col{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:14px;margin:20px 0 26px}
.ratio-card,.ref-item,.rev-card,.method-block,.mc{
  padding:16px;border-radius:2px;border:1px solid var(--line);
  background:linear-gradient(162deg,#07090C,#020305)}
.rev-two-col{display:grid;grid-template-columns:1fr;gap:16px;margin:22px 0}
.rev-left,.rev-right{min-width:0}
.rev-intro{font-size:14px;line-height:1.8;color:var(--mid);margin-bottom:16px}
@media(min-width:1000px){.rev-two-col{grid-template-columns:1.15fr .85fr}}

/* ══════════ MODEL CARDS (craft/models) ══════════ */
.mc{margin:22px 0}
.mc-head{display:flex;gap:13px;align-items:flex-start;margin-bottom:12px}
.mc-icon{font-size:22px;line-height:1;flex:0 0 auto}
.mc-name{font:700 17px/1.3 var(--s);color:var(--paper)}
.mc-name a{color:inherit;border-bottom:1px solid rgba(200,255,0,.28)}
.mc-sub{font:400 10.5px var(--m);color:var(--dim);margin-top:3px}
.mc-checked{font:700 8.5px var(--m);letter-spacing:.18em;color:var(--dim2);margin-top:5px}
.mc-badge{display:inline-block;font:700 9px var(--m);letter-spacing:.17em;
  padding:6px 10px;border-radius:2px;margin-bottom:12px;
  background:rgba(200,255,0,.07);border:1px solid rgba(200,255,0,.25);color:var(--volt)}
.mc-bullets{margin:0 0 14px 17px;padding:0}
.mc-bullets li{font-size:14px;line-height:1.78;color:var(--mid);margin-bottom:7px}
.mc-tip{margin:12px 0;padding:13px 15px;border-radius:2px;font-size:13.5px;line-height:1.8;
  color:var(--mid);background:rgba(255,255,255,.022);
  border:1px solid var(--line);border-left:2px solid rgba(200,255,0,.4)}
.mc-tip strong{color:var(--paper)}
.mc-btn{display:inline-block;font:700 9.5px var(--m);letter-spacing:.16em;
  color:var(--volt);border:1px solid rgba(200,255,0,.3);border-radius:2px;
  padding:8px 12px;margin-top:6px;cursor:pointer;background:none}

/* ══════════ CALLOUTS AND BOXES ══════════ */
.callout,.source-box,.related-box,.est,.catch,.conf,.dit,.scannote{
  display:block;margin:22px 0;padding:17px;border-radius:2px;font-size:14px;line-height:1.8;
  color:var(--mid);background:linear-gradient(162deg,#07090C,#020305);
  border:1px solid var(--line);border-left:2px solid var(--volt)}
.callout strong,.source-box strong{color:var(--paper)}
.source-box{border-left-color:var(--dim);font-size:13px}
.related-box{border-left-color:rgba(200,255,0,.35)}
.related-title{font:700 9px var(--m);letter-spacing:.2em;color:var(--volt);
  text-transform:uppercase;margin-bottom:11px}

/* ══════════ LISTS ══════════ */
.blog-list,.blog-steps{margin:0 0 20px 18px;padding:0}
.blog-list li,.blog-steps li{font-size:14px;line-height:1.82;color:var(--mid);margin-bottom:10px}
.blog-list li strong,.blog-steps li strong{color:var(--paper)}
.blog-steps{counter-reset:bs}

/* ══════════ BRACKET BLOCK (video prompt anatomy) ══════════ */
.bracket-block{margin:20px 0;padding:16px;border-radius:2px;
  background:linear-gradient(162deg,#07090C,#020305);border:1px solid var(--line);
  font:400 12.5px/2 var(--m);color:var(--mid)}
.bracket-block .bracket-label{display:inline;color:var(--volt);margin:0 6px 0 0}

/* ══════════ NEWSLETTER CTA ══════════ */
.nl-cta,.cta{display:block;margin:30px 0 10px;padding:22px;border-radius:2px;text-align:center;
  background:linear-gradient(162deg,#0A0C08,#020305);border:1px solid rgba(200,255,0,.22)}
.nl-cta h3{font:700 17px var(--s);color:var(--paper);margin:0 0 8px}
.nl-cta p{font-size:13.5px;line-height:1.75;color:var(--mid);margin:0 0 15px}
.nl-cta a,.cta a{display:inline-block;font:700 10px var(--m);letter-spacing:.18em;
  color:#050506;background:var(--volt);border:0;border-radius:2px;padding:11px 18px}
.nl-cta a:hover,.cta a:hover{filter:brightness(1.08)}

/* ══════════ WORD-COUNT / DIAGRAM ODDS AND ENDS ══════════ */
.wcRead,.wcBars,.wcdiag,.radar,.scale,.scanmid,.sbeamwrap,.shwrap,.swi,
.farm,.weather,.worlds,.wing,.fill,.fin,.av,.bench,.mani,.hu,.path,.dots{
  display:block;max-width:100%}
.wcBars{display:flex;gap:4px;align-items:flex-end;min-height:34px;margin:10px 0}
.full{width:100%}
.flogo{font:700 11px var(--m);letter-spacing:.16em;color:var(--volt)}
.cmdbar,.cmdinner{font:400 12px var(--m);color:var(--mid)}
.mt,.mb,.rt,.sx,.sg,.ch,.bt,.fm,.usr,.tip,.what,.platform-specs,.platform-row{
  font-size:13.5px;line-height:1.8;color:var(--mid)}
.platform-row{display:flex;flex-wrap:wrap;gap:8px 18px;padding:9px 0;
  border-bottom:1px solid var(--line)}
.platform-name{font-weight:600;color:var(--paper);min-width:150px}
.tip{border-left:2px solid rgba(200,255,0,.4);padding-left:13px;margin:16px 0}

/* ══════════ MOBILE ══════════ */
@media(max-width:640px){
  .meter{gap:8px 16px}
  .pipeline-step{flex-direction:column;gap:10px}
  .ratio-grid,.type-grid,.ref-grid,.modgrid{grid-template-columns:1fr}
  .chip,.tool-chip,.model-tag,.use-tag{white-space:normal}
  .nl-cta a,.cta a,.mc-btn{min-height:44px;display:inline-flex;align-items:center}
}

/* bad / good side-by-side comparison */
.bad-good{display:grid;grid-template-columns:1fr;gap:13px;margin:22px 0 26px}
@media(min-width:820px){.bad-good{grid-template-columns:1fr 1fr}}
.bad-good > .bad,.bad-good > .good{padding:15px;border-radius:2px;
  background:linear-gradient(162deg,#07090C,#020305);border:1px solid var(--line)}
.bad-good > .bad{border-left:2px solid #FF6A78}
.bad-good > .good{border-left:2px solid var(--volt)}

/* containers and label lines that were wrongly styled as inline chips
   (fixed 26 Aug — .mod is a room card wrapper, .tbar a toolbar,
   .range a label line; chip styling broke their layout and forced nowrap) */
.mod,.tbar{display:block;white-space:normal}
.range{display:block;white-space:normal;font:700 9.5px var(--m);letter-spacing:.14em;
  text-transform:uppercase;color:var(--volt);margin:0 0 10px}
.wtag{display:block;white-space:normal;font:700 9px var(--m);letter-spacing:.2em;
  text-transform:uppercase;color:var(--dim);margin:18px 0 8px}
/* exhibits are full-bleed and dense: never let an inherited nowrap overflow */
html.exhibit .artbody .mod,html.exhibit .artbody .card,html.exhibit .artbody .md,
html.exhibit .artbody .tx,html.exhibit .artbody .swi,html.exhibit .artbody .note,
html.exhibit .artbody .mb,html.exhibit .artbody .mt,html.exhibit .artbody .stats{
  white-space:normal;overflow-wrap:anywhere}
html.exhibit .artbody .fh{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:baseline}

/* .type — a short label token inside room/exhibit cards */
.type{display:inline-block;font:700 9px var(--m);letter-spacing:.18em;
  text-transform:uppercase;color:var(--dim);white-space:normal}

/* ══════════ HOMEPAGE — MODEL CHEAT SHEET GRID (26 Aug) ══════════ */
.sheetgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:9px;margin:4px 0 0}
.sheet{display:flex;flex-direction:column;gap:3px;padding:13px 14px;border-radius:2px;
  text-decoration:none;background:linear-gradient(162deg,#0A0C10,#040507);
  border:1px solid var(--line);transition:border-color .18s var(--e),background .18s var(--e)}
.sheet:hover{border-color:rgba(200,255,0,.4);background:linear-gradient(162deg,#0E1116,#050609)}
.sh-k{font:700 8px var(--m);letter-spacing:.22em;color:var(--volt)}
.sh-n{font:700 14.5px/1.25 var(--s);color:var(--paper);letter-spacing:-.01em}
.sh-v{font:400 10.5px var(--m);color:var(--dim)}
.sh-x,.sh-y{font:700 8.5px var(--m);letter-spacing:.14em;text-transform:uppercase;margin-top:5px}
.sh-x{color:#FF6A78}
.sh-y{color:var(--volt)}
.cta-lite{display:inline-block;font:700 9.5px var(--m);letter-spacing:.17em;
  color:var(--volt);border:1px solid rgba(200,255,0,.3);border-radius:2px;
  padding:10px 14px;margin:4px 5px;text-decoration:none}
.cta-lite:hover{background:rgba(200,255,0,.07)}
@media(max-width:640px){.sheetgrid{grid-template-columns:1fr}.cta-lite{display:block;margin:6px 0}}

/* ══════════ READING RAIL — supporting furniture in the outer eighth ══════════
   Informational pages keep prose at 1/2 and let support reach 3/4. Source
   lines, takeaways and figure captions sit against the rail edge so the eye
   can find them without leaving the column. ══════════════════════════════ */
html.reading .artbody .src{border-left:2px solid rgba(200,255,0,.22);padding-left:11px;margin-left:-13px}
html.reading .artbody figure figcaption{color:var(--dim);font:400 11px/1.7 var(--m);padding-top:8px}
html.reading .artbody .takeaway{border-left-width:3px}

/* ══════════════════════════════════════════════════════════════════════════
   TWO-HALVES CARD ROW — wrap by available width, not by viewport (26 Aug)

   .hv-g was grid-template-columns:1fr 40px 1fr with a stacking rule keyed to
   @media(max-width:760px). It sits in a ~420px deck cell while the viewport is
   1440px, so the rule never fired and each card got ~150px — one or two words
   per line, with dead space underneath.

   Container queries were tried first and were the wrong tool: container-type
   on a grid item applies size containment, which collapsed .page and .halves
   to their padding (48px). Flex wrap achieves the same intent with no
   containment, so the cards simply stack when there is no room for two.
   ══════════════════════════════════════════════════════════════════════════ */
.hv-g{display:flex!important;flex-wrap:wrap;gap:14px;align-items:stretch;
  grid-template-columns:none!important}
.hv{flex:1 1 265px;min-width:0}
.hv-mid,.hx{flex:0 0 auto;align-self:center;padding:0}
.halves{display:block!important;grid-template-columns:none!important}

/* ══════ LAYOUT — mirrored from the crit block (authoritative copy) ══════ */
/*RW-26AUGb*/
:root{--textw:min(50vw,900px);--hubw:min(75vw,1340px);
--railw:calc((var(--hubw) - var(--textw))/2)}

/* ARTICLES, BLOG POSTS, GUIDES — everything in the middle half.
   Prose and its supporting boxes share one column so the eye never leaves it. */
html.reading .page{max-width:calc(var(--textw) + 2*var(--g))}
html.reading .art,html.reading.wide .art{
max-width:var(--textw);width:auto;margin-left:auto;margin-right:auto}
html.reading .arthd,html.reading .artbody{max-width:100%;margin-left:0;margin-right:0}
html.reading .artbody>*{width:auto;max-width:100%;margin-left:0;margin-right:0}

/* HUBS AND LANDING PAGES — card grids need room, so they keep 3/4 */
html.hub .page{max-width:var(--hubw)}
html.hub .art{max-width:var(--hubw);width:auto;margin:0 auto}
html.hub .arthd,html.hub .artbody{max-width:var(--textw);margin-left:auto;margin-right:auto}
html.hub .artbody>.score,html.hub .artbody>.rgrid,html.hub .artbody>.bento,
html.hub .artbody>.sl2,html.hub .artbody>.modgrid,html.hub .artbody>.ref-grid,
html.hub .artbody>.type-grid,html.hub .artbody>section.mech,
html.hub .artbody>.box,html.hub .artbody>.tldr,html.hub .artbody>table{
width:var(--hubw);max-width:var(--hubw);
margin-left:calc(0px - var(--railw));margin-right:calc(0px - var(--railw))}

/* EXHIBITS — bespoke full-bleed layouts, never a text column */
html.exhibit .page,html.exhibit .art,html.exhibit .arthd,html.exhibit .artbody{
max-width:none;width:auto;margin-left:auto;margin-right:auto}
html.exhibit .artbody>*{width:auto;max-width:100%;margin-left:0;margin-right:0}

@media(max-width:1100px){
:root{--textw:100%;--hubw:100%;--railw:0px}
html .page,html .art,html .wrap{max-width:1180px}
html.hub .arthd,html.hub .artbody{max-width:100%}
html.hub .artbody>*{width:auto;max-width:100%;margin-left:0;margin-right:0}}
@media(max-width:640px){
html .page,html .art,html .wrap{padding-left:var(--g);padding-right:var(--g)}}
/*/RW-26AUGb*/


/* ══ READING PAGES DO NOT ANIMATE ON LOAD ═══════════════════════════════════
   Removed 1 Sep 2026 on request. Four separate reveal systems were running on
   articles, guides and reference pages:
     1. [data-r]      opacity fade-in, driven by IntersectionObserver
     2. .sq/.sv       slide-up fallback for browsers without scroll-timeline
     3. view()        scroll-driven animation on h2, pull quotes, stats, bars
     4. numerals      meter figures scrambling and counting up
   On a page someone is trying to READ, content that fades in as you scroll is
   friction: the text you are moving toward is the text that is not there yet.
   The homepage keeps all of it — it is a showcase and nobody reads it linearly.
   Everything here is opacity/transform only, so switching it off changes no
   layout and no measurement. */
html:not(.home) [data-r],
html.js:not(.home) [data-r],
html:not(.home) [data-r]:not(.in){opacity:1!important}
html:not(.home) .sq,
html:not(.home) .sq.sv{opacity:1!important;transform:none!important}
@supports (animation-timeline: view()){
 html:not(.home) .artbody h2,
 html:not(.home) .artbody h2::before,
 html:not(.home) .artbody .pull::before,
 html:not(.home) .artbody .pull p,
 html:not(.home) .artbody .stat>div,
 html:not(.home) .chart .bar,
 html:not(.home) .chart .val,
 html:not(.home) .pan{animation:none!important;opacity:1!important;transform:none!important}
}


/* The bestiary entries on articles/eight-kinds-of-ai were <span class="dn">
   inside a <summary> — eight named sections that existed visually and not in
   the document outline, so the page had no headings at all. Promoted to h3 on
   6 Sep 2026; this keeps them looking and flowing exactly as the span did. */
/* !important because the inline crit block is injected after this stylesheet
   and styles .artbody h2 — without it these headings render as 20px blocks
   and the summary layout breaks. */
.artbody h2.dn,.artbody h3.dn,h2.dn,h3.dn{
  display:inline!important;font:inherit!important;margin:0!important;
  padding:0!important;letter-spacing:inherit!important;line-height:inherit!important;
  color:inherit!important;border:0!important}
.artbody h2.dn::before,.artbody h2.dn::after{content:none!important;display:none!important}


/* until JS says otherwise, the block is not shown at all */
.cst{display:none}
.cst.cst-live{display:block}
@media(max-width:768px){.cst{display:none!important}}
@media(prefers-reduced-motion:reduce){.cst-canvas{cursor:default}}


/* ══ THE STAR MAP · /worlds/starmap/ ═══════════════════════════════════════
   A flyable galaxy of the link graph. Two stacked canvases: WebGL for stars,
   links and background dust, a 2D context above it for labels, the crosshair
   and hit-testing. Everything here is display only — the page's real index is
   plain HTML further down, which is what crawlers and screen readers read.
   Hidden until starmap.js confirms WebGL and a wide enough viewport, so a
   failure leaves the page as it was rather than leaving a hole. */
.cst-link{margin:0 0 26px;padding:12px 14px;border:1px solid var(--ln);
  background:rgba(200,255,0,.04);font:400 12px/1.6 var(--s)}
.cst-link a{color:var(--volt)}

.sm{display:none;margin:0 0 30px;border:1px solid var(--ln);background:#05060a}
.sm.sm-live{display:grid;grid-template-columns:1fr 340px}
.sm.sm-off{display:none!important}
/* Tall on purpose. A galaxy you fly through in a letterbox is a diagram;
   the height is what makes it a place. Capped so it never exceeds the screen. */
.sm-stage{position:relative;height:clamp(560px,76vh,880px);overflow:hidden}
.sm-gl,.sm-ov{position:absolute;inset:0;display:block}
.sm-ov{cursor:grab;touch-action:pan-y}          /* never trap the page scroll */
.sm-ov:active{cursor:grabbing}
.sm-loading{position:absolute;inset:0;display:grid;place-items:center;
  font:400 10px var(--m);letter-spacing:.14em;opacity:.4}
.sm-live .sm-loading{display:none}

.sm-hud{position:absolute;z-index:3;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.sm-hud-tl{top:12px;left:12px}
.sm-hud-tr{top:12px;right:12px}
.sm-hud-bl{bottom:12px;left:12px;max-width:70%}
.sm-hud-br{bottom:12px;right:12px}
#sm-q{background:rgba(0,0,0,.55);border:1px solid var(--ln);color:inherit;
  padding:6px 9px;font:400 11px var(--m);width:170px;border-radius:2px}
#sm-q:focus{outline:1px solid var(--volt);outline-offset:1px}
.sm-count{font:400 9.5px var(--m);letter-spacing:.08em;opacity:.55;
  background:rgba(0,0,0,.45);padding:4px 7px}
.sm-hud button{background:rgba(0,0,0,.55);border:1px solid var(--ln);color:inherit;
  font:700 8.5px var(--m);letter-spacing:.13em;padding:5px 8px;cursor:pointer;border-radius:2px}
.sm-hud button:hover{border-color:var(--volt);color:var(--volt)}
#sm-legend button{display:inline-flex;align-items:center;gap:5px;
  font:400 9px var(--m);letter-spacing:.08em;text-transform:uppercase}
#sm-legend i{width:7px;height:7px;border-radius:50%;display:inline-block}
#sm-legend b{opacity:.5;font-weight:400}
.sm-keys{gap:11px;font:400 8.5px var(--m);letter-spacing:.09em;opacity:.42;
  justify-content:flex-end;max-width:60%}
.sm-keys span{display:inline-flex;align-items:center;gap:3px;white-space:nowrap}
kbd{font:700 8px var(--m);letter-spacing:.06em;border:1px solid var(--ln);
  border-bottom-width:2px;border-radius:3px;padding:2px 4px;background:rgba(255,255,255,.05);
  color:inherit;line-height:1}
.sm-panel kbd{font-size:9px;margin:0 1px}

.sm-panel{border-left:1px solid var(--ln);padding:16px 15px;overflow-y:auto;
  max-height:clamp(560px,76vh,880px);font:400 12px/1.6 var(--s)}
.sm-empty{display:block}
.sm-panel .sm-h{display:block;font:700 9.5px var(--m);letter-spacing:.16em;
  color:var(--volt);margin-bottom:9px}
.sm-panel p{margin:0 0 11px}
.sm-note{font-size:11px;opacity:.5;border-top:1px solid var(--ln);padding-top:10px}
.sm-stats{margin:0 0 13px;display:grid;grid-template-columns:auto 1fr;gap:3px 10px;
  font:400 11px var(--m)}
.sm-stats dt{opacity:.45;letter-spacing:.08em}
.sm-stats dd{margin:0}
.sm-stats a{display:block;font-size:11px;margin-bottom:2px}
.sm-stats a b{opacity:.45;font-weight:400}
.sm-tag{font:700 8.5px var(--m);letter-spacing:.16em}
.sm-card h3{font:700 15px/1.3 var(--s);margin:5px 0 4px}
.sm-url{font:400 10px var(--m);opacity:.42;word-break:break-all;margin:0 0 9px!important}
.sm-nums{font:400 10px var(--m);letter-spacing:.05em;opacity:.6;margin-bottom:11px}
.sm-nums b{color:var(--volt);font-weight:700;margin-right:3px}
.sm-nums b+b{margin-left:9px}
.sm-btns{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:14px}
.sm-open,.sm-fly{display:block;text-align:center;font:700 9px var(--m);
  letter-spacing:.13em;padding:8px 4px;cursor:pointer;border-radius:2px}
.sm-open{border:1px solid var(--volt);color:var(--volt);background:none}
.sm-open:hover{background:var(--volt);color:#05060a}
.sm-fly{border:1px solid var(--volt);background:var(--volt);color:#05060a}
.sm-fly:hover{filter:brightness(1.14)}
.sm-sub{font:700 8.5px var(--m)!important;letter-spacing:.14em;opacity:.5;
  margin:0 0 5px!important}
.sm-list{list-style:none;margin:0 0 13px;padding:0}
.sm-list li{margin-bottom:3px}
.sm-list a{display:flex;align-items:center;gap:6px;font-size:11.5px;line-height:1.4}
.sm-list i{width:6px;height:6px;border-radius:50%;flex:0 0 6px}
.sm-more{font:400 10px var(--m);opacity:.4;padding-left:12px}
.sm-none{font:400 11px var(--m)!important;opacity:.35}
.sm-clear{background:none;border:1px solid var(--ln);color:inherit;font:400 9px var(--m);
  letter-spacing:.1em;padding:6px 10px;cursor:pointer;width:100%}
.sm-clear:hover{border-color:var(--volt);color:var(--volt)}

/* the readable half: the full index, generated by tools/build_graph.py.
   A canvas contains no text, so this list is what a crawler, a screen reader
   or a browser without WebGL actually gets. It is not a fallback bolted on -
   it is the page, and the galaxy is drawn on top of it. */
.sm-idx{margin:0 0 30px}
.sm-idx-n{font:400 10px var(--m)!important;letter-spacing:.12em;opacity:.4;
  margin:0 0 16px!important;text-transform:uppercase}
.sm-idx h3{font:700 10px var(--m)!important;letter-spacing:.16em;text-transform:uppercase;
  color:var(--volt);margin:26px 0 9px!important;padding-bottom:7px;
  border-bottom:1px solid var(--ln)}
.sm-idx h3:first-child{margin-top:0!important}
.sm-idx h3 b{color:var(--mid);opacity:.45;font-weight:400;margin-left:4px}
.sm-idx ul{list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(255px,1fr));gap:1px 20px}
.sm-idx li{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  font-size:12.5px;line-height:1.62;padding:2px 0}
.sm-idx li a{flex:1;min-width:0}
.sm-idx li span{flex:0 0 auto;font:400 9.5px var(--m);opacity:.34;
  font-variant-numeric:tabular-nums}
@media(max-width:600px){.sm-idx ul{grid-template-columns:1fr}}

/* hover preview vs pinned card. The preview is deliberately quieter: no
   buttons, shorter lists, and a hint saying what a click would do. */
.sm-card.is-hov{opacity:.94}
.sm-tag em{font-style:normal;color:var(--volt);opacity:.8}
.sm-hint{font:400 10px var(--m)!important;letter-spacing:.06em;opacity:.42;
  border:1px dashed var(--ln);padding:7px 9px;margin:0 0 13px!important}
.sm-idx li a{transition:color .12s}
.sm-idx li:hover a{color:var(--volt)}
.sm-idx li:hover span{opacity:.7}

@media(max-width:1100px){.sm.sm-live{grid-template-columns:1fr 250px}}
/* stack the panel under the map rather than withholding the whole view */
@media(max-width:1000px){
  .sm.sm-live{grid-template-columns:1fr}
  .sm-stage{height:clamp(420px,58vh,560px)}
  .sm-panel{border-left:0;border-top:1px solid var(--ln);max-height:340px}
  .sm-hud-bl{max-width:58%}
  .sm-keys{display:none}
}
@media(max-width:700px){.sm{display:none!important}}
@media(prefers-reduced-motion:reduce){.sm-ov{cursor:default}}

/* ══ THE FLIGHT DECK · /worlds/flight/ ═════════════════════════════════════
   The star map at full size with a cockpit round it. The renderer is
   galaxy.js, shared with /worlds/starmap/; everything here is the interface.

   Same contract as the star map and for the same reason: the deck is drawn on
   top of a working page. The generated index below it is real HTML, both
   canvases are aria-hidden, and losing WebGL or dropping under 760px costs the
   picture and nothing else. Hidden until flight.js says it can run, so a
   failure leaves the page as it was rather than leaving a hole. */
/* No text selection anywhere on the deck. Dragging to steer used to sweep a
   selection highlight across the HUD and the labels behind it - the drag is a
   control input, not a gesture at text. */
.fl-deck{display:none;margin:0 0 34px;background:#020306;
  border-bottom:1px solid var(--ln);
  -webkit-user-select:none;-ms-user-select:none;user-select:none}
.fl-deck ::selection{background:transparent}
.fl-ov,.fl-gl{-webkit-user-select:none;user-select:none;-webkit-user-drag:none;
  -webkit-tap-highlight-color:transparent}
.fl-deck.fl-live{display:block}
.fl-deck.fl-off{display:none!important}
/* Full viewport minus the 28px sticky bar. Not "tall": the whole screen.
   A galaxy you pilot in a letterbox is a diagram of a galaxy. */
.fl-stage{position:relative;height:calc(100vh - 28px);min-height:560px;overflow:hidden;
  background:radial-gradient(ellipse at 50% 42%,#070a12 0%,#020306 72%)}
.fl-deck:fullscreen .fl-stage{height:100vh}
.fl-gl,.fl-ov{position:absolute;inset:0;display:block}
.fl-ov{cursor:grab;touch-action:pan-y}          /* never trap the page scroll */
.fl-ov:active{cursor:grabbing}
.fl-locked .fl-ov{cursor:none}
.fl-loading{position:absolute;inset:0;display:grid;place-items:center;
  font:400 10px var(--m);letter-spacing:.14em;opacity:.4}
.fl-live .fl-loading{display:none}

/* ── the launch card, first visit only ── */
.fl-intro{position:absolute;inset:0;z-index:20;display:grid;place-items:center;
  background:rgba(3,4,8,.82);backdrop-filter:blur(3px)}
/* display:grid beats the hidden attribute's UA display:none, so dismissing the
   card by setting el.hidden did nothing at all. Caught in a screenshot, not by
   the code, which reported it as hidden quite happily. */
.fl-intro[hidden]{display:none!important}
.fl-introbox{max-width:430px;padding:26px 28px;border:1px solid var(--ln);
  background:linear-gradient(162deg,#0A0D14,#05070C);border-radius:3px;
  box-shadow:0 26px 70px rgba(0,0,0,.6)}
.fl-ik{display:block;font:700 9px var(--m);letter-spacing:.2em;color:var(--volt);margin-bottom:7px}
.fl-ih{font:700 24px/1.1 var(--d)!important;letter-spacing:-.02em;text-transform:uppercase;
  color:var(--paper);margin:0 0 16px!important;padding:0!important;border:0!important}
.fl-keys{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:5px}
.fl-keys li{display:flex;align-items:center;gap:11px;font:400 12px var(--s);color:var(--mid)}
.fl-keys li>span{flex:0 0 118px;display:flex;gap:3px;justify-content:flex-end}
.fl-introbox button{width:100%;background:var(--volt);color:#05060a;border:0;border-radius:2px;
  font:700 11px var(--m);letter-spacing:.18em;padding:12px;cursor:pointer}
.fl-introbox button:hover{filter:brightness(1.12)}
.fl-ifoot{font:400 11px/1.6 var(--s)!important;color:var(--dim);margin:12px 0 0!important;
  text-align:center}

/* ── HUD corners ── */
.fl-hud{position:absolute;z-index:8;display:flex;gap:6px;align-items:flex-start}
.fl-tl{top:14px;left:14px;flex-direction:column}
.fl-tr{top:14px;right:14px;flex-wrap:wrap;justify-content:flex-end;max-width:46%}
.fl-bl{bottom:14px;left:14px;flex-direction:column;gap:10px}
.fl-hud button{background:rgba(4,6,10,.72);border:1px solid var(--ln);color:inherit;
  font:700 8.5px var(--m);letter-spacing:.14em;padding:7px 10px;cursor:pointer;border-radius:2px}
.fl-hud button:hover{border-color:var(--volt);color:var(--volt)}
#fl-tour-start{border-color:rgba(200,255,0,.4);color:var(--volt)}

.fl-search{position:relative}
#fl-q{background:rgba(4,6,10,.78);border:1px solid var(--ln);color:inherit;
  padding:8px 11px;font:400 11px var(--m);width:230px;border-radius:2px}
#fl-q:focus{outline:1px solid var(--volt);outline-offset:1px}
.fl-res{list-style:none;margin:4px 0 0;padding:0;width:270px;
  background:rgba(4,6,10,.94);border:1px solid var(--ln);border-radius:2px;
  max-height:0;overflow:hidden;transition:max-height .18s var(--e)}
.fl-searching .fl-res{max-height:290px;overflow:auto}
.fl-res button{display:flex;align-items:center;gap:8px;width:100%;text-align:left;
  background:none;border:0;border-bottom:1px solid rgba(255,255,255,.05);
  font:400 11.5px var(--s);color:var(--mid);padding:8px 10px;cursor:pointer;letter-spacing:0}
.fl-res button:hover{background:rgba(200,255,0,.08);color:var(--paper)}
.fl-res i{width:6px;height:6px;border-radius:50%;flex:0 0 6px}
.fl-res span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fl-res em{font-style:normal;font:400 8.5px var(--m);opacity:.4;letter-spacing:.1em}

/* ── progress: the reason to come back ── */
.fl-prog{background:rgba(4,6,10,.72);border:1px solid var(--ln);border-radius:2px;
  padding:11px 12px;width:198px}
.fl-pk{display:block;font:700 8.5px var(--m);letter-spacing:.18em;opacity:.5;margin-bottom:4px}
.fl-pv{display:block;font:400 11px var(--m);color:var(--mid);margin-bottom:7px}
.fl-pv b{font:700 19px var(--d);color:var(--volt);letter-spacing:-.02em}
.fl-pv span{opacity:.45}
.fl-track{height:3px;background:rgba(255,255,255,.09);border-radius:2px;overflow:hidden;
  margin-bottom:9px}
.fl-fill{height:100%;width:0;background:var(--volt);transition:width .4s var(--e)}
.fl-bysec{list-style:none;margin:0 0 9px;padding:0}
.fl-bysec li{display:flex;align-items:center;gap:6px;font:400 9.5px var(--m);
  color:var(--dim);padding:1px 0}
.fl-bysec i{width:5px;height:5px;border-radius:50%;flex:0 0 5px}
.fl-bysec span{flex:1;text-transform:uppercase;letter-spacing:.08em}
.fl-bysec b{font-weight:400;opacity:.75;font-variant-numeric:tabular-nums}
#fl-forget{width:100%;font-size:7.5px;opacity:.5}
#fl-forget:hover{opacity:1}
.fl-legend{display:flex;flex-wrap:wrap;gap:4px;max-width:230px}
.fl-legend button{display:inline-flex;align-items:center;gap:5px;
  background:rgba(4,6,10,.72);border:1px solid var(--ln);color:inherit;cursor:pointer;
  font:400 8.5px var(--m);letter-spacing:.08em;text-transform:uppercase;padding:5px 7px;
  border-radius:2px}
.fl-legend button:hover{border-color:var(--volt);color:var(--volt)}
.fl-legend i{width:6px;height:6px;border-radius:50%}

/* ── telemetry strip ── */
.fl-tel{position:absolute;z-index:8;left:50%;transform:translateX(-50%);bottom:14px;
  display:flex;background:rgba(4,6,10,.74);border:1px solid var(--ln);border-radius:2px;
  font:400 10px var(--m);color:var(--mid);max-width:60%;overflow:hidden}
.fl-tel span{display:flex;align-items:baseline;gap:6px;padding:7px 12px;
  border-right:1px solid rgba(255,255,255,.06);white-space:nowrap;
  font-variant-numeric:tabular-nums}
.fl-tel span:last-child{border-right:0}
.fl-tel i{font-style:normal;font-size:7.5px;letter-spacing:.16em;opacity:.42}
.fl-near{max-width:270px;overflow:hidden;text-overflow:ellipsis}

/* ── guided tour caption ── */
.fl-tour{position:absolute;z-index:9;left:50%;transform:translateX(-50%);bottom:64px;
  width:min(560px,72%);display:none;
  background:rgba(5,7,12,.93);border:1px solid rgba(200,255,0,.28);border-radius:3px;
  padding:15px 17px;box-shadow:0 20px 50px rgba(0,0,0,.55)}
.fl-touring .fl-tour{display:block}
.fl-tk{display:block;font:700 8.5px var(--m);letter-spacing:.2em;color:var(--volt);margin-bottom:7px}
.fl-tour p{font:400 12.5px/1.65 var(--s);color:var(--mid);margin:0 0 12px}
.fl-tb{display:flex;gap:7px}
.fl-tb button{background:none;border:1px solid var(--ln);color:inherit;cursor:pointer;
  font:700 8.5px var(--m);letter-spacing:.14em;padding:7px 12px;border-radius:2px}
#fl-tnext{border-color:var(--volt);color:var(--volt)}
.fl-tb button:hover{background:rgba(200,255,0,.1)}

/* ── the dossier ── */
.fl-dossier{position:absolute;z-index:9;top:14px;right:14px;width:296px;
  max-height:calc(100% - 28px);overflow-y:auto;
  background:rgba(5,7,12,.93);border:1px solid var(--ln);border-radius:3px;
  padding:15px 16px;font:400 12px/1.6 var(--s);
  box-shadow:0 20px 50px rgba(0,0,0,.5);display:none}
.fl-has-sel .fl-dossier{display:block}
.fl-has-sel .fl-tr{opacity:.26}
.fl-has-sel .fl-tr:hover{opacity:1}
.fl-x{position:absolute;top:9px;right:9px;background:none;border:0;color:var(--dim);
  font-size:13px;line-height:1;cursor:pointer;padding:3px 5px}
.fl-x:hover{color:var(--volt)}
.fl-tag{display:block;font:700 8.5px var(--m);letter-spacing:.16em;margin-bottom:5px}
.fl-dossier h3{font:700 15px/1.3 var(--s)!important;color:var(--paper);margin:0 0 4px!important;
  padding:0!important;border:0!important}
.fl-url{font:400 10px var(--m);opacity:.4;word-break:break-all;margin:0 0 9px}
.fl-nums{font:400 10px var(--m);letter-spacing:.05em;opacity:.6;margin-bottom:12px}
.fl-nums b{color:var(--volt);font-weight:700;margin-right:3px}
.fl-nums b+b{margin-left:9px}
.fl-btns{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:14px}
.fl-open,.fl-goto{display:block;text-align:center;font:700 9px var(--m);letter-spacing:.13em;
  padding:8px 4px;cursor:pointer;border-radius:2px}
/* .artbody a in the crit block is (0,1,1) and beats .fl-open at (0,1,0), so
   the OPEN button rendered volt-on-volt: a solid lime rectangle with invisible
   text. The crit block is injected after this stylesheet and is the
   authoritative layer, so any <a> styled here has to out-specify it. */
.fl-open{border:1px solid var(--volt);background:var(--volt)}
.artbody .fl-open,.artbody .fl-open:visited{color:#05060a!important;border-bottom-color:var(--volt)}
.artbody .fl-open:hover{filter:brightness(1.14);background:var(--volt)}
.fl-goto{border:1px solid var(--volt);background:none;color:var(--volt)}
.fl-goto:hover{background:rgba(200,255,0,.1)}
.fl-sub{font:700 8.5px var(--m);letter-spacing:.14em;opacity:.5;margin:0 0 5px}
.fl-list{list-style:none;margin:0 0 13px;padding:0}
.fl-list li{margin-bottom:3px}
.fl-list a{display:flex;align-items:center;gap:6px;font-size:11.5px;line-height:1.4}
.artbody .fl-list a{border-bottom:0}
.artbody .fl-list a:hover{background:rgba(200,255,0,.07)}
.fl-list i{width:6px;height:6px;border-radius:50%;flex:0 0 6px}
.fl-list em{font-style:normal;font:400 7.5px var(--m);letter-spacing:.12em;
  color:var(--volt);opacity:.65;margin-left:auto;flex:0 0 auto}
.fl-more{font:400 10px var(--m);opacity:.4;padding-left:12px}
.fl-none{font:400 11px var(--m);opacity:.35;padding:8px 10px}

@media(max-width:1200px){
  .fl-dossier{width:262px}
  .fl-tel{max-width:50%}
}
@media(max-width:1000px){
  .fl-stage{height:calc(100vh - 28px);min-height:440px}
  .fl-dossier{width:238px;font-size:11.5px}
  .fl-prog{width:172px}
  .fl-tel span:nth-child(n+4){display:none}
  .fl-legend{display:none}
}
@media(max-width:760px){.fl-deck{display:none!important}}
@media(prefers-reduced-motion:reduce){.fl-ov{cursor:default}.fl-fill{transition:none}}

/* a jump link to the part of a long page people came for */
.artbody .fl-jump{margin:0 0 22px!important;padding:11px 14px;
  border:1px solid rgba(200,255,0,.26);border-radius:2px;
  background:rgba(200,255,0,.05);font:400 13px/1.6 var(--s)}
.artbody .fl-jump a{font-weight:700}

/* the way in to /worlds/flight/, on the star map page */
.fl-enter{display:block;margin:0 0 30px;padding:18px 20px;text-decoration:none!important;
  border:1px solid rgba(200,255,0,.3);border-radius:3px;
  background:linear-gradient(120deg,rgba(200,255,0,.07),rgba(200,255,0,.015) 60%);
  transition:border-color .2s var(--e),background .2s var(--e)}
.fl-enter:hover{border-color:var(--volt);background:linear-gradient(120deg,rgba(200,255,0,.13),rgba(200,255,0,.03) 60%)}
.fe-k{display:block;font:700 8.5px var(--m);letter-spacing:.2em;color:var(--volt);margin-bottom:6px}
.fe-n{display:block;font:700 clamp(18px,2.4vw,25px)/1.15 var(--d);letter-spacing:-.02em;
  text-transform:uppercase;color:var(--paper);margin-bottom:7px}
.fe-d{display:block;font:400 12.5px/1.65 var(--s);color:var(--mid)}

/* ─── ⑬b FIGURES — generated by tools/build_figures.py ───────────────────────
   One accent (volt) for the thing that matters, grey for context. Text lives in
   HTML, not inside the SVG, so it reflows and stays readable on a phone; the SVG
   carries only marks, icons and connectors. Two-identity charts use the pair
   #7FA400 / #4A86D6, which passes every check in the dataviz palette validator on
   #050506 and #07090C (lightness band, chroma, CVD all-pairs, contrast). Status
   is never colour alone: every state ships with an icon and a word.
   EVERY class here starts g-. The first draft used short names (.tx .te .fr .sp
   .ch .sx) and collided with six existing rules: .tx is the page-wide noise
   overlay and .artbody .sp is all:unset, so the bars rendered at zero width. */
.artbody .g-fig{position:relative}
.g-fig .g-body{margin-top:2px}
.g-vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
/* bar list */
.g-fig .g-row{padding:10px 0;border-bottom:1px solid rgba(255,255,255,.05)}
.g-fig .g-row:last-child{border-bottom:0;padding-bottom:2px}
.g-fig .g-rowh{display:flex;justify-content:space-between;align-items:baseline;gap:14px;margin-bottom:7px}
.g-fig .g-lab{font:400 13.5px/1.45 var(--s);color:var(--mid);min-width:0;text-align:left}
.g-fig .g-val{font:700 13px var(--m);color:var(--paper);white-space:nowrap;font-variant-numeric:tabular-nums}
.g-fig .g-row.g-hi .g-lab{color:var(--paper)}
.g-fig .g-row.g-hi .g-val{color:var(--volt)}
.g-fig .g-track{height:10px;background:rgba(255,255,255,.035);border-radius:0 3px 3px 0}
.g-fig .g-bar{display:block;height:100%;min-width:2px;border-radius:0 4px 4px 0;background:rgba(200,255,0,.30)}
.g-fig .g-row.g-hi .g-bar{background:var(--volt)}
.g-fig .g-row.g-c1 .g-bar{background:#7FA400}.g-fig .g-row.g-c2 .g-bar{background:#4A86D6}
.g-fig .g-key{display:flex;flex-wrap:wrap;gap:6px 16px;margin:0 0 10px;font:700 9.5px var(--m);letter-spacing:.14em;color:#8891A0}
.g-fig .g-key i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:6px;vertical-align:-1px}
.g-fig .g-key .g-c1{background:#7FA400}.g-fig .g-key .g-c2{background:#4A86D6}
@media (prefers-reduced-motion:no-preference){@supports (animation-timeline:view()){
 .g-fig .g-bar{transform-origin:0 50%;animation:gGrow linear both;animation-timeline:view();animation-range:entry 10% cover 30%}}}
@keyframes gGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
/* timeline */
.g-fig .g-ev{display:grid;grid-template-columns:22px 1fr;column-gap:12px;position:relative;padding:0 0 18px}
.g-fig .g-ev:last-child{padding-bottom:2px}
.g-fig .g-ev::before{content:"";position:absolute;left:10.5px;top:17px;bottom:-1px;width:1px;background:rgba(255,255,255,.22)}
.g-fig .g-ev:last-child::before{display:none}
.g-fig .g-ev svg{width:22px;height:22px;margin-top:1px}
.g-fig .g-dot{fill:#5F6773;stroke:#07090C;stroke-width:3}
.g-fig .g-hi .g-dot{fill:var(--volt)}
.g-fig .g-date{display:block;font:700 10px var(--m);letter-spacing:.14em;color:var(--volt);margin:2px 0 3px}
.g-fig .g-evt{display:block;font:600 14.5px/1.45 var(--s);color:var(--paper)}
.g-fig .g-evx{display:block;font:400 13px/1.65 var(--s);color:var(--mid);margin-top:3px;text-align:left}
/* flow */
.g-fig .g-step{display:grid;grid-template-columns:34px 1fr;column-gap:13px;align-items:start}
.g-fig .g-step svg{width:34px;height:34px}
.g-fig .g-badge{fill:rgba(200,255,0,.08);stroke:rgba(200,255,0,.5);stroke-width:1.2}
.g-fig .g-step.g-hi .g-badge{fill:var(--volt);stroke:var(--volt)}
.g-fig .g-num{font:700 13px var(--m);fill:var(--volt)}
.g-fig .g-step.g-hi .g-num{fill:#050506}
.g-fig .g-sth{display:block;font:600 14.5px/1.45 var(--s);color:var(--paper);padding-top:6px}
.g-fig .g-stx{display:block;font:400 13px/1.65 var(--s);color:var(--mid);margin-top:2px;text-align:left}
.g-fig svg.g-arrow{display:block;width:34px;height:22px;margin:2px 0}
.g-fig .g-arr{fill:none;stroke:rgba(255,255,255,.24);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
/* two-column contrast */
.g-fig .g-cmp{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgba(255,255,255,.07);border-radius:2px;overflow:hidden}
.g-fig .g-col{background:#060709;padding:13px 14px}
.g-fig .g-colh{display:block;font:700 9.5px var(--m);letter-spacing:.18em;color:#8891A0;margin-bottom:8px}
.g-fig .g-item{display:grid;grid-template-columns:16px 1fr;column-gap:9px;padding:6px 0;font:400 13px/1.6 var(--s);color:var(--mid);text-align:left}
.g-fig .g-item svg{width:16px;height:16px;margin-top:3px}
.g-fig .g-ic{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.g-fig .g-ok{stroke:var(--volt)}.g-fig .g-no{stroke:#FF6A78}.g-fig .g-nu{stroke:#8891A0}
.g-fig .g-item b{color:var(--paper);font-weight:600}
@media (max-width:600px){.g-fig .g-cmp{grid-template-columns:1fr}}
/* scale: ordered positions along one track */
.g-fig .g-scale{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));position:relative;margin:4px 0 2px}
.g-fig .g-scale::before{content:"";position:absolute;left:calc(50% / var(--n));right:calc(50% / var(--n));top:10px;height:2px;background:rgba(255,255,255,.12)}
.g-fig .g-pos{position:relative;text-align:center;padding:0 5px}
.g-fig .g-pos svg{width:22px;height:22px;display:block;margin:0 auto 8px}
.g-fig .g-posl{display:block;font:700 10px var(--m);letter-spacing:.1em;color:var(--paper);line-height:1.45}
.g-fig .g-pos.g-hi .g-posl{color:var(--volt)}
.g-fig .g-posx{display:block;font:400 12px/1.55 var(--s);color:var(--mid);margin-top:4px}
@media (max-width:560px){.g-fig .g-scale{grid-template-columns:1fr}.g-fig .g-scale::before{display:none}
 .g-fig .g-pos{display:grid;grid-template-columns:22px 1fr;column-gap:12px;text-align:left;padding:0 0 12px}
 .g-fig .g-pos svg{margin:0;grid-row:span 2}}
/* hand-drawn diagram: a wide drawing and, optionally, a narrow one for phones */
.g-fig .g-dia svg{display:block;width:100%;max-width:640px;height:auto;margin:0 auto}
.g-fig .g-dia .g-narrow{display:none}
/* the phone copy takes over below 680px: at 600px a 640-wide drawing already puts 11px labels at about 9px */
@media (max-width:680px){.g-fig .g-dia .g-wide{display:none}.g-fig .g-dia .g-narrow{display:block;max-width:340px}}
.g-fig .g-box{fill:rgba(255,255,255,.03);stroke:rgba(255,255,255,.16);stroke-width:1}
.g-fig .g-boxhi{fill:rgba(200,255,0,.08);stroke:var(--volt);stroke-width:1.2}
.g-fig .g-boxbad{fill:rgba(255,106,120,.07);stroke:#FF6A78;stroke-width:1.2}
.g-fig .g-t{font:600 15px var(--s);fill:var(--paper)}
.g-fig .g-s{font:400 13px var(--s);fill:var(--mid)}
.g-fig .g-k{font:700 11px var(--m);letter-spacing:.12em;fill:var(--volt)}
.g-fig .g-m{font:700 11px var(--m);letter-spacing:.12em;fill:#8891A0}
.g-fig .g-bad{font:700 11px var(--m);letter-spacing:.12em;fill:#FF6A78}
.g-fig .g-line{fill:none;stroke:rgba(255,255,255,.26);stroke-width:1.5}
.g-fig .g-lineon{fill:none;stroke:var(--volt);stroke-width:2}
.g-fig .g-head{fill:rgba(255,255,255,.4)}
.g-fig .g-headon{fill:var(--volt)}
.g-fig .g-fill{fill:var(--volt)}
.g-fig .g-soft{fill:rgba(200,255,0,.30)}
.g-fig .g-faint{fill:rgba(255,255,255,.08)}
/* key fact: a tidbit, never more than two a page */
.artbody .g-fact{display:grid;grid-template-columns:24px 1fr;column-gap:13px;margin:22px 0 26px;padding:14px 16px 14px 14px;border-radius:2px;
 background:rgba(140,190,255,.045);border-left:2px solid rgba(140,190,255,.6)}
.artbody .g-fact svg{width:24px;height:24px;margin-top:1px}
.g-fact .g-facti{fill:none;stroke:#8CBEFF;stroke-width:1.6;stroke-linecap:round}
.g-fact .g-factk{display:block;font:700 9.5px var(--m);letter-spacing:.2em;color:#8CBEFF;margin-bottom:5px}
.artbody .g-fact p{margin:0;font-size:14.5px;line-height:1.72;color:var(--paper);text-align:left}
.artbody .g-fact .src{display:block;margin-top:6px}
.g-fig .stat{margin:0}
/* wide pages keep their smaller type */
html.wide .g-fig .g-lab,html.wide .g-fig .g-evx,html.wide .g-fig .g-stx,html.wide .g-fig .g-item,html.wide .g-fig .g-posx{font-size:11.5px}
html.wide .g-fig .g-evt,html.wide .g-fig .g-sth{font-size:12.5px}
html.wide .artbody .g-fact p{font-size:12px}
/* Wide data tables scroll inside themselves on a phone instead of dragging the page.
   Measured 17 Sep 2026 at 375px: nine pages scrolled sideways, up to 672px wide,
   all from table.score or plain tables. table.cmp already stacks into cards. */
@media (max-width:680px){
 .artbody table:not(.cmp){display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
}
/* A raw URL in a source note cannot break at spaces; on craft/permissions one pushed
   the page 71px sideways on a phone (17 Sep 2026). Break long runs only where needed. */
.artbody{overflow-wrap:break-word}
.artbody .src,.artbody cite.src,.artbody .citebox{overflow-wrap:anywhere}