/* ═══ 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}
@media(pointer:fine){}
#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 */
.artbody .tick{color:var(--volt);font-weight:600;white-space:nowrap}

/* 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*="ch"]:not([class*="chip"]),.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}
/* 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)}