:root{
  --ink:#23201B; --ink2:#4A453C; --muted:#7C756A;
  --bg:#EFEDE8; --surface:#FCFBF9; --surface2:#F6F4F0;
  --line:#DBD6CC; --line2:#C9C2B5;
  --accent:#0E6B60; --accent-d:#0A4F47; --accent-soft:#D4E6E2;
  --flag:#A63A1E; --flag-soft:#F3E2DC;
  --bull:#2C6E49; --bull-soft:#E6F0E9;
  --nav-h:58px;
  --f:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 16px)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto} *{animation:none!important; transition:none!important}}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--f);
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; font-feature-settings:'tnum' 1}
/* A theme-native sky for dark mode. The atlas no longer carries a full raster
   background, so the page uses CSS light, grid and grain instead. Behind
   everything, never under text directly: every surface above it is opaque. */
[data-theme="dark"] body::before{content:''; position:fixed; inset:0; z-index:-1;
  pointer-events:none; background:
    radial-gradient(circle at 82% 16%, rgba(85,186,210,.18), transparent 22%),
    radial-gradient(circle at 18% 4%, rgba(125,162,255,.13), transparent 28%),
    linear-gradient(rgba(120,180,225,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120,180,225,.035) 1px, transparent 1px),
    linear-gradient(135deg, #07101c 0%, #081928 46%, var(--bg) 100%);
  background-size:100% 100%, 100% 100%, 48px 48px, 48px 48px, 100% 100%;
  opacity:.82}
[data-theme="dark"] body::after{content:''; position:fixed; inset:0; z-index:-1;
  pointer-events:none; background:linear-gradient(180deg,
    rgba(8,19,31,.55) 0%, rgba(8,19,31,.86) 42%, var(--bg) 100%)}
.wrap{max-width:1180px; margin:0 auto; padding:0 28px}
@media(max-width:640px){.wrap{padding:0 16px}}
h1,h2,h3,h4{margin:0; font-weight:600; letter-spacing:-.02em; line-height:1.2}
p{margin:0 0 1em}
.num{font-variant-numeric:tabular-nums; letter-spacing:-.03em}

nav{position:fixed; top:0; left:0; right:0; height:var(--nav-h); z-index:50;
  background:rgba(239,237,232,.9); backdrop-filter:blur(12px); border-bottom:1px solid var(--line)}
.nav-in{max-width:1180px; margin:0 auto; padding:0 28px; height:100%;
  display:flex; align-items:center; justify-content:space-between; gap:18px}
.brand{display:flex; align-items:baseline; gap:9px; font-weight:600; font-size:15px; white-space:nowrap}
.brand i{width:7px; height:7px; border-radius:50%; background:var(--accent); display:block; flex:none; transform:translateY(-1px)}
.navlinks{display:flex; gap:2px; overflow-x:auto; scrollbar-width:none}
.navlinks::-webkit-scrollbar{display:none}
.navlinks a{text-decoration:none; font-size:13.5px; color:var(--muted); padding:6px 10px;
  border-radius:5px; white-space:nowrap; transition:color .18s, background .18s}
.navlinks a:hover{color:var(--ink); background:rgba(0,0,0,.04)}
.navlinks a.on{color:var(--accent-d); background:var(--accent-soft); font-weight:500}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
@media(max-width:900px){.nav-in{padding:0 16px} .brand span{display:none}}

header{padding:calc(var(--nav-h) + 72px) 0 56px; border-bottom:1px solid var(--line)}
.figure{font-size:clamp(64px,10.5vw,124px); font-weight:600; line-height:.88; letter-spacing:-.045em}
.figure em{font-style:normal; color:var(--accent)}
.strip{display:grid; grid-template-columns:repeat(4,1fr); margin-top:48px; border-top:1px solid var(--line2)}
.strip div{padding:20px 22px 0 0; border-right:1px solid var(--line)}
.strip div:last-child{border-right:0}
.strip b{display:block; font-size:26px; font-weight:600; letter-spacing:-.03em}
.strip span{display:block; font-size:13px; color:var(--muted); margin-top:5px; line-height:1.45}
@media(max-width:900px){ .strip{grid-template-columns:1fr 1fr}
  .strip div{padding:18px 18px 18px 0; border-bottom:1px solid var(--line)} .strip div:nth-child(2n){border-right:0}}

.dia-grid{display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:48px;
  margin-top:56px; padding-top:44px; border-top:1px solid var(--line2); align-items:start}
@media(max-width:960px){.dia-grid{grid-template-columns:1fr; gap:44px}}
.dia h3{font-size:20px; margin-bottom:7px}
.dia .d-sub{font-size:14.5px; color:var(--ink2); margin:0 0 22px; max-width:52ch; line-height:1.55}
.dia svg{width:100%; height:auto; display:block}
/* the atlas sizes its own SVGs — see assets/atlas/atlas.css */
.dia .atlas svg{width:auto; height:auto}
.dia .d-cap{font-size:13.5px; color:var(--muted); margin-top:18px; line-height:1.6}
.dia .d-cap b{color:var(--ink2); font-weight:500}
.ln{fill:none; stroke:#C9C2B5; stroke-width:1.4}
.ln-a{fill:none; stroke:#0E6B60; stroke-width:1.7}
.bt{fill:#23201B; font:600 15px 'Inter',system-ui,sans-serif; letter-spacing:-.012em}
.bs{fill:#7C756A; font:400 11.5px 'Inter',system-ui,sans-serif}
.bn{fill:#fff; font:600 11px 'Inter',system-ui,sans-serif}
.lb{fill:#7C756A; font:400 11px 'Inter',system-ui,sans-serif}
.lb-a{fill:#0A4F47; font:500 11px 'Inter',system-ui,sans-serif}

section{padding:72px 0; border-bottom:1px solid var(--line)}
.sec-head{max-width:70ch; margin-bottom:36px}
.sec-head h1,.sec-head h2{font-size:clamp(28px,3.5vw,38px); letter-spacing:-.03em}
.sec-head p{margin:14px 0 0; color:var(--ink2); font-size:16.5px}

.stack{display:grid; grid-template-columns:300px minmax(0,1fr); gap:36px; align-items:start}
.rail{display:flex; flex-direction:column; border-left:1px solid var(--line2)}
.tab{appearance:none; background:none; border:0; border-left:3px solid transparent; margin-left:-1px;
  text-align:left; cursor:pointer; font-family:var(--f); padding:11px 14px;
  display:flex; gap:12px; align-items:center; color:var(--muted);
  transition:color .18s, border-color .18s, background .18s; border-radius:0 4px 4px 0}
.tab .dot{width:9px; height:9px; border-radius:50%; flex:none; opacity:.45; transition:opacity .18s}
.tab .t{font-size:15px; font-weight:500; letter-spacing:-.012em}
.tab:hover{color:var(--ink); background:rgba(0,0,0,.028)}
.tab:hover .dot{opacity:1}
.tab[aria-selected="true"]{color:var(--ink); background:var(--surface)}
.tab[aria-selected="true"] .dot{opacity:1}
.panel{display:none}
.panel.on{display:block; animation:fade .28s ease-out}
@keyframes fade{from{opacity:0; transform:translateY(5px)} to{opacity:1; transform:none}}
@media(max-width:900px){
  .stack{grid-template-columns:1fr; gap:20px}
  .rail{flex-direction:row; overflow-x:auto; border-left:0; border-bottom:1px solid var(--line2); scrollbar-width:none}
  .rail::-webkit-scrollbar{display:none}
  .tab{border-left:0; border-bottom:3px solid transparent; margin-left:0; margin-bottom:-1px;
    white-space:nowrap; border-radius:4px 4px 0 0}
}

.card{background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:30px 32px; border-top:3px solid var(--line2)}
@media(max-width:640px){.card{padding:20px}}
.chip{font-size:11.5px; font-weight:500; padding:3px 10px; border-radius:20px;
  background:var(--surface2); border:1px solid var(--line); color:var(--ink2); white-space:nowrap}
.chip.good{background:var(--bull-soft); border-color:#C3DACB; color:var(--bull)}
.chip.warn{background:var(--flag-soft); border-color:#E0C2B7; color:var(--flag)}
.lede{color:var(--ink2); font-size:16px; margin:8px 0 16px; max-width:76ch}
.why{font-size:15px; color:var(--ink2); max-width:76ch; margin:0 0 20px}
.why b{color:var(--ink); font-weight:600}
.choke{border-left:3px solid var(--line2); padding:4px 0 4px 16px; margin:0 0 24px; font-size:15.5px; max-width:76ch}
.choke b{font-weight:600}
.facts{display:grid; grid-template-columns:repeat(auto-fit,minmax(155px,1fr)); gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:8px; overflow:hidden; margin-bottom:28px}
.facts div{background:var(--surface2); padding:15px 17px}
.facts b{display:block; font-size:21px; font-weight:600; letter-spacing:-.028em}
.facts span{display:block; font-size:12.5px; color:var(--muted); margin-top:4px; line-height:1.4}
.sub{font-size:12.5px; color:var(--muted); margin:0 0 12px}
.wrongnote{margin-top:24px; padding:16px 18px; background:var(--flag-soft); border-radius:8px;
  font-size:14px; color:#6E2916; line-height:1.6}
.wrongnote b{font-weight:600}

.chartbox{background:var(--surface2); border:1px solid var(--line); border-radius:8px; padding:20px 22px; margin-bottom:28px}
.chartbox h4{font-size:15px; margin-bottom:16px; letter-spacing:-.012em}
.bar{display:grid; grid-template-columns:minmax(110px,190px) minmax(0,1fr) auto; gap:14px; align-items:center; padding:7px 0}
.bar .lb2{font-size:13.5px; color:var(--ink2)}
.bar .tr{height:9px; background:rgba(0,0,0,.055); border-radius:5px; overflow:hidden}
.bar .fl{height:100%; border-radius:5px; width:0; transition:width .8s cubic-bezier(.22,1,.36,1)}
.bar .vl{font-size:13.5px; font-weight:600; letter-spacing:-.02em; min-width:76px; text-align:right}
.cnote{font-size:12.5px; color:var(--muted); margin:12px 0 0; line-height:1.55}
@media(max-width:560px){.bar{grid-template-columns:1fr auto; gap:4px} .bar .tr{grid-column:1/-1}}

.tw{overflow-x:auto; border:1px solid var(--line); border-radius:9px; background:var(--surface); margin-bottom:6px}
table{width:100%; border-collapse:collapse; font-size:14px}
th,td{text-align:left; padding:12px 14px; border-bottom:1px solid var(--line); vertical-align:top}
th{font-weight:500; font-size:12px; color:var(--muted); background:var(--surface2); border-bottom:1px solid var(--line2); white-space:nowrap}
tbody tr:last-child td{border-bottom:0}
td.co-n{font-weight:600; white-space:nowrap; font-size:14.5px}
td.bull{background:var(--bull-soft); color:#255C3D; font-size:13px; line-height:1.5}
td.bear{background:var(--flag-soft); color:#7A3018; font-size:13px; line-height:1.5}
td.sm{font-size:13px; color:var(--ink2); line-height:1.5}
table.co{min-width:1080px}
table.dat{min-width:520px}
.hl{color:var(--flag); font-weight:600}
.ok{color:var(--bull); font-weight:600}
.tnote{font-size:12.5px; color:var(--muted); margin:10px 0 0; line-height:1.55}

.mats{display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:16px}
.mat{background:var(--surface); border:1px solid var(--line); border-radius:9px; padding:22px}
.mat h4{font-size:16.5px}
.mat .big{font-size:31px; font-weight:600; letter-spacing:-.034em; margin:12px 0 2px}
.mat p{font-size:13.5px; color:var(--ink2); margin:8px 0 0; line-height:1.55}
.mat .src{font-size:12px; color:var(--muted); margin-top:11px}

.split{display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:28px; margin-bottom:30px}
.block h4{font-size:15px; margin-bottom:14px; letter-spacing:-.012em}
.block .cap{font-size:13px; color:var(--muted); margin-top:12px; line-height:1.55}
.blockhead{font-size:20px; margin:44px 0 6px; letter-spacing:-.022em}
.blocksub{font-size:15px; color:var(--ink2); max-width:76ch; margin:0 0 22px}

.phase{display:grid; grid-template-columns:auto minmax(0,1fr); background:var(--surface);
  border:1px solid var(--line); border-radius:9px; overflow:hidden}
.phase>div{padding:14px 18px; border-bottom:1px solid var(--line)}
.phase>div:nth-last-child(-n+2){border-bottom:0}
.phase .ph-t{font-size:13px; color:var(--muted); white-space:nowrap; font-variant-numeric:tabular-nums; background:var(--surface2)}
.phase .ph-d b{font-weight:600; font-size:14.5px}
.phase .ph-d span{display:block; font-size:13px; color:var(--ink2); margin-top:3px}

.ptabs{display:flex; margin:0 0 32px; border-bottom:1px solid var(--line); flex-wrap:wrap}
.ptab{appearance:none; background:none; border:0; border-bottom:2px solid transparent; margin-bottom:-1px;
  font-family:var(--f); font-size:15.5px; font-weight:500; color:var(--muted); padding:10px 2px;
  margin-right:28px; cursor:pointer; transition:color .18s, border-color .18s; letter-spacing:-.012em}
.ptab:hover{color:var(--ink)}
.ptab[aria-selected="true"]{color:var(--ink); border-bottom-color:var(--accent)}
.ppanel{display:none}
.ppanel.on{display:block; animation:fade .3s ease-out}
.deep{margin:22px 0 0}
.deep>div{padding:20px 0 2px; border-top:1px solid var(--line)}
.deep h5{font-size:15.5px; font-weight:600; margin:0 0 8px; letter-spacing:-.014em}
.deep p{font-size:14.5px; color:var(--ink2); line-height:1.68; margin:0; max-width:84ch}
.deep p b{color:var(--ink); font-weight:600}

.risks{display:grid; grid-template-columns:repeat(auto-fit,minmax(275px,1fr)); gap:16px}
.risk{background:var(--surface); border:1px solid var(--line); border-radius:9px; padding:22px 24px; border-top:2px solid var(--flag)}
.risk h4{font-size:16.5px; margin-bottom:9px}
.risk p{font-size:14px; color:var(--ink2); margin:0; line-height:1.6}
.verdict{margin-top:34px; background:var(--ink); color:#EDEAE4; border-radius:10px; padding:34px 38px}
.verdict h3{font-size:22px; color:#fff; margin-bottom:12px}
.verdict p{font-size:16px; line-height:1.65; color:#CBC5BB; max-width:76ch}
.verdict p:last-child{margin-bottom:0}
.verdict b{color:#fff; font-weight:600}
@media (max-width:640px){.verdict{padding:26px 22px}}

footer{padding:52px 0 70px; font-size:13px; color:var(--muted); line-height:1.7}
footer h4{font-size:14px; color:var(--ink2); margin-bottom:10px}
.fgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:34px}
/* An <h2> that sits where the Method page uses <h4>, so the outline does not
   skip a level: same size as the <h4> it replaces. */
.fgrid .h4{font-size:1em}
.disc{margin-top:34px; padding-top:22px; border-top:1px solid var(--line); max-width:84ch}

/* ──────────────────────────────────────────────────────────────────────────
   APP SHELL — three fixed-viewport workspaces, no document-length scrolling
   ────────────────────────────────────────────────────────────────────────── */
:root{--nav-h:64px; --app-pad:22px}
html,body{height:100%; overflow:hidden}
body{background:
  radial-gradient(circle at 78% 8%,rgba(14,107,96,.07),transparent 28%),
  radial-gradient(circle at 8% 92%,rgba(192,122,44,.06),transparent 25%),var(--bg)}
nav{height:var(--nav-h); box-shadow:0 1px 0 rgba(255,255,255,.65); background:rgba(239,237,232,.94)}
.nav-in{max-width:none; padding:0 30px}
.brand{font-size:14.5px; letter-spacing:-.01em}
.brand i{box-shadow:0 0 0 5px rgba(14,107,96,.1)}
.navlinks{gap:7px; padding:5px; border:1px solid var(--line); border-radius:10px; background:rgba(252,251,249,.7)}
.navlinks a,.navlinks button{appearance:none; text-decoration:none; border:0; background:transparent; color:var(--muted); cursor:pointer;
  font:500 13.5px var(--f); padding:7px 15px; border-radius:7px; white-space:nowrap; transition:.18s ease}
.navlinks a:hover,.navlinks button:hover{color:var(--ink); background:rgba(0,0,0,.035)}
.navlinks a[aria-current="page"],.navlinks button[aria-selected="true"]{color:#fff; background:var(--accent); box-shadow:0 3px 12px rgba(14,107,96,.2)}

.main-view{position:fixed; inset:var(--nav-h) 0 0; display:block; overflow:hidden; padding:var(--app-pad) 0; border:0}
.main-view.on{display:block; animation:viewIn .25s ease-out}
@keyframes viewIn{from{opacity:0; transform:translateY(4px)}to{opacity:1;transform:none}}
.main-view>.wrap{max-width:1600px; height:100%; padding:0 30px; min-height:0}

/* Overview: thesis at left, enlarged system map at right */
#overview{padding:18px 0}
#overview>.wrap{display:grid; grid-template-columns:minmax(270px,355px) minmax(0,1fr);
  grid-template-rows:auto minmax(0,1fr) auto; grid-template-areas:"kicker map" "hero map" "stats map";
  gap:18px 28px}
#overview .figure{font-size:clamp(62px,7.4vw,112px)}
#overview .strip{grid-area:stats; grid-template-columns:1fr 1fr; margin:0; align-self:end; border:1px solid var(--line);
  border-radius:10px; overflow:hidden; background:rgba(252,251,249,.66)}
#overview .strip div{padding:13px 14px; border-right:1px solid var(--line); border-bottom:1px solid var(--line)}
#overview .strip div:nth-child(2n){border-right:0}
#overview .strip div:nth-last-child(-n+2){border-bottom:0}
#overview .strip b{font-size:22px}
#overview .strip span{font-size:11.5px}
#overview .dia-grid{grid-area:map; margin:0; padding:0; border:0; height:100%; min-height:0;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(230px,285px); gap:18px; align-items:stretch}
#overview .dia{min-height:0; border:1px solid var(--line); border-radius:14px; background:rgba(252,251,249,.72); padding:16px 18px}
#overview .dia:first-child{display:grid; grid-template-rows:auto auto minmax(0,1fr); box-shadow:0 14px 40px rgba(38,32,23,.06)}
#overview .dia:first-child>.dia-shell svg{height:100%; max-height:none; width:100%; min-height:0}
#overview .dia:nth-child(2){display:flex; flex-direction:column}
#overview .dia:nth-child(2) svg{margin:5px 0 8px}
#overview .dia h3{font-size:16px}
#overview .dia .d-sub{font-size:12px; margin:3px 0 6px; line-height:1.45}
#overview .dia .d-cap{font-size:11.5px; margin-top:10px; line-height:1.5}

/* Stack workspace */
#stack{padding:18px 0}
#stack>.wrap{display:grid; grid-template-rows:auto minmax(0,1fr); gap:14px}
#stack .sec-head,#projects>.wrap>.sec-head{display:flex; align-items:end; justify-content:space-between; gap:30px;
  max-width:none; margin:0; padding-bottom:12px; border-bottom:1px solid var(--line)}
#stack .sec-head h1,#stack .sec-head h2,
#projects>.wrap>.sec-head h1,#projects>.wrap>.sec-head h2{font-size:25px; white-space:nowrap}
#stack .sec-head p,#projects>.wrap>.sec-head p{font-size:12.5px; max-width:85ch; margin:0; line-height:1.5; text-align:right}
#stack .stack{height:100%; min-height:0; grid-template-columns:250px minmax(0,1fr); gap:16px}
#stack .rail{height:100%; overflow-y:auto; border:1px solid var(--line); border-radius:12px; padding:8px;
  background:rgba(252,251,249,.58); box-shadow:0 10px 30px rgba(38,32,23,.035)}
#stack .tab{border-left:3px solid transparent; margin:0; padding:12px 11px; border-radius:8px; min-height:48px}
#stack .tab+.tab{margin-top:2px}
#stack .tab[aria-selected="true"]{box-shadow:inset 0 0 0 1px var(--line)}
#stack #panels,#stack .panel{height:100%; min-height:0}
#stack .card{height:100%; min-height:0; padding:0; overflow:hidden; display:grid;
  grid-template-rows:auto auto minmax(0,1fr); border-radius:12px; box-shadow:0 12px 38px rgba(38,32,23,.05)}
.layer-head{display:flex; align-items:center; justify-content:space-between; gap:20px; padding:18px 22px 14px}
.layer-index{font-size:11px; color:var(--muted); letter-spacing:.09em; text-transform:uppercase; margin-bottom:3px}
.layer-headline{display:flex; align-items:center; gap:12px}
.layer-headline h3{font-size:23px}
.layer-score{display:flex; align-items:center; gap:9px; padding:8px 11px; background:var(--surface2); border:1px solid var(--line); border-radius:9px}
.layer-score i{display:block; width:8px; height:8px; border-radius:50%}
.layer-score span{font-size:11px; color:var(--muted)}
.layer-score b{display:block; font-size:12px; font-weight:600; color:var(--ink2)}
.layer-modes{display:flex; gap:4px; padding:0 22px; border-bottom:1px solid var(--line); overflow-x:auto; scrollbar-width:none}
.layer-modes::-webkit-scrollbar{display:none}
.layer-mode{appearance:none; border:0; border-bottom:2px solid transparent; background:transparent; cursor:pointer;
  padding:9px 12px 10px; color:var(--muted); font:500 12.5px var(--f); white-space:nowrap}
.layer-mode:hover{color:var(--ink)}
.layer-mode[aria-selected="true"]{color:var(--ink); border-bottom-color:currentColor}
.layer-body{position:relative; min-height:0}
.layer-pane{display:none; position:absolute; inset:0; overflow:auto; padding:18px 22px 28px; scrollbar-gutter:stable}
.layer-pane.on{display:block; animation:fade .22s ease-out}
.overview-lede{display:grid; grid-template-columns:minmax(0,1.45fr) minmax(260px,.75fr); gap:18px; align-items:start; margin-bottom:18px}
.overview-lede .lede{font-size:15px; margin:0 0 8px}
.overview-lede .why{font-size:13.5px; margin:0}
.choke-card{border-left:4px solid var(--line2); background:var(--surface2); padding:13px 14px; border-radius:0 8px 8px 0;
  font-size:13px; color:var(--ink2); line-height:1.55}
.layer-pane .facts{margin-bottom:18px}
.layer-pane .facts div{padding:12px 14px}
.layer-pane .facts b{font-size:18px}
.layer-diagnostic{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(300px,.95fr); gap:16px; align-items:start}
.layer-diagnostic .chartbox,.layer-diagnostic .tw{margin:0}
.essay-list{margin-top:18px; border-top:1px solid var(--line)}
.essay{border-bottom:1px solid var(--line)}
.essay summary{cursor:pointer; list-style:none; padding:13px 28px 13px 2px; position:relative; font-size:13.5px; font-weight:600}
.essay summary::-webkit-details-marker{display:none}
.essay summary::after{content:"+"; position:absolute; right:5px; top:10px; font-size:19px; font-weight:400; color:var(--muted)}
.essay[open] summary::after{content:"−"}
.essay p{font-size:13px; color:var(--ink2); line-height:1.65; max-width:100%; padding:0 22px 15px 2px; margin:0}

/* Per-layer materials */
.material-hero{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:22px; align-items:center; margin-bottom:16px;
  padding:16px 18px; background:linear-gradient(120deg,var(--surface2),rgba(255,255,255,.5)); border:1px solid var(--line); border-radius:10px}
.material-hero h4{font-size:17px; margin-bottom:5px}
.material-hero p{font-size:13px; color:var(--ink2); margin:0; max-width:82ch}
.severity-badge{text-align:right; min-width:100px}
.severity-badge span{display:block; font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.severity-badge b{font-size:16px}
.material-stats{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line);
  border-radius:9px; overflow:hidden; margin-bottom:16px}
.material-stats div{background:var(--surface); padding:11px 13px}
.material-stats b{display:block; font-size:18px; letter-spacing:-.03em}
.material-stats span{font-size:10.5px; line-height:1.35; color:var(--muted)}
.supply-flow{display:grid; grid-template-columns:repeat(4,1fr); gap:26px; margin:0 0 18px; padding:15px; border:1px solid var(--line); border-radius:9px; background:var(--surface2)}
.flow-node{position:relative; min-width:0}
.flow-node:not(:last-child)::after{content:"→"; position:absolute; right:-20px; top:12px; color:var(--line2); font-size:18px}
.flow-node small{display:block; font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:3px}
.flow-node b{display:block; font-size:12px; line-height:1.35; overflow-wrap:anywhere}
.material-cards{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px}
.material-card{border:1px solid var(--line); border-radius:9px; background:var(--surface); padding:13px 14px; display:grid;
  grid-template-columns:minmax(115px,.65fr) minmax(0,1.35fr); gap:12px}
.material-card h5{font-size:13px; margin:0 0 3px}
.material-card .mat-role{font-size:10.5px; color:var(--muted); line-height:1.4}
.material-card .mat-choke{font-size:11.5px; color:var(--ink2); line-height:1.5}
.material-card .mat-meta{display:flex; gap:6px; flex-wrap:wrap; margin-top:7px}
.micro-chip{font-size:9.5px; color:var(--muted); border:1px solid var(--line); border-radius:20px; padding:2px 7px; background:var(--surface2)}
.material-note{margin-top:14px; padding:12px 14px; border-radius:8px; background:var(--accent-soft); color:var(--accent-d); font-size:12px; line-height:1.55}

/* Per-layer risk dashboard */
.risk-layout{display:grid; grid-template-columns:minmax(250px,.72fr) minmax(0,1.28fr); gap:16px; align-items:start}
.risk-scorecard{border:1px solid var(--line); border-radius:10px; background:var(--surface2); padding:15px 16px}
.risk-scorecard h4{font-size:14px; margin-bottom:11px}
.risk-meter{display:grid; grid-template-columns:105px minmax(0,1fr) 24px; align-items:center; gap:8px; padding:6px 0}
.risk-meter span{font-size:10.5px; color:var(--muted)}
.risk-meter .meter-track{height:7px; border-radius:5px; background:rgba(0,0,0,.07); overflow:hidden}
.risk-meter i{display:block; height:100%; border-radius:5px; background:var(--flag)}
.risk-meter b{font-size:10.5px; text-align:right}
.risk-cards{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px}
.risk-item{border:1px solid var(--line); border-top:2px solid var(--flag); background:var(--surface); border-radius:9px; padding:13px 14px}
.risk-item h5{font-size:12.5px; margin:0 0 5px}
.risk-item p{font-size:11.5px; color:var(--ink2); margin:0; line-height:1.5}
.risk-item small{display:block; color:var(--muted); font-size:10px; margin-top:8px; padding-top:7px; border-top:1px solid var(--line)}
.monitor-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:17px}
.monitor-grid .tw{margin:0}
.layer-verdict{margin-top:17px; padding:14px 16px; color:#E8E4DD; background:var(--ink); border-radius:9px; font-size:12px; line-height:1.6}
.layer-verdict b{color:#fff}

/* Projects: project tabs + generated chapter tabs */
#projects{padding:18px 0}
#projects>.wrap{display:grid; grid-template-rows:auto auto minmax(0,1fr); gap:10px}
#projects .ptabs{margin:0; flex-wrap:nowrap; gap:7px; border:0}
#projects .ptab{margin:0; padding:8px 14px; border:1px solid var(--line); border-radius:8px; background:rgba(252,251,249,.65); font-size:12.5px}
#projects .ptab[aria-selected="true"]{color:#fff; border-color:var(--accent); background:var(--accent)}
#projects .ppanel{min-height:0; height:100%}
#projects .ppanel.on{display:grid; grid-template-rows:auto minmax(0,1fr)}
.project-chapter-nav{display:flex; gap:3px; overflow-x:auto; padding:1px 0 8px; scrollbar-width:none}
.project-chapter-nav::-webkit-scrollbar{display:none}
.chapter-tab{appearance:none; border:0; background:transparent; color:var(--muted); padding:6px 10px; border-radius:6px;
  font:500 11.5px var(--f); cursor:pointer; white-space:nowrap}
.chapter-tab:hover{color:var(--ink); background:rgba(0,0,0,.035)}
.chapter-tab[aria-selected="true"]{color:var(--accent-d); background:var(--accent-soft)}
.project-chapters{min-height:0; height:100%; position:relative; border:1px solid var(--line); border-radius:12px;
  background:rgba(252,251,249,.72); overflow:hidden; box-shadow:0 12px 38px rgba(38,32,23,.045)}
.project-chapter{display:none; position:absolute; inset:0; overflow:auto; padding:21px 24px 30px; scrollbar-gutter:stable}
.project-chapter.on{display:block; animation:fade .22s ease-out}
.project-chapter>.blockhead:first-child{margin-top:0}
.project-chapter .blockhead{font-size:20px; margin-top:26px}
.project-chapter .blocksub{font-size:13px; margin-bottom:15px}
.project-chapter .split{gap:16px; margin-bottom:16px}
.project-chapter .chartbox{margin-bottom:0}
.project-chapter .sec-head{display:block!important; border:0!important; padding:0!important; margin:0 0 14px!important}
.project-chapter .sec-head p{text-align:left!important; max-width:90ch!important; margin-top:6px!important}
.project-chapter .facts{margin-bottom:16px}
.project-visual-grid{display:grid; grid-template-columns:minmax(0,1.5fr) minmax(260px,.5fr); gap:15px; align-items:stretch; margin:15px 0 4px}
.cost-lenses{border:1px solid var(--line); border-radius:11px; padding:15px 16px; background:var(--surface)}
.cost-lenses h4{font-size:14px; margin-bottom:6px}
.cost-lenses>p{font-size:11px; color:var(--muted); line-height:1.5; margin-bottom:13px}
.cost-lens{padding:10px 0; border-top:1px solid var(--line)}
.cost-lens:first-of-type{border-top:0}
.cost-lens header{padding:0; border:0; display:flex; justify-content:space-between; align-items:baseline}
.cost-lens header b{font-size:12px}.cost-lens header strong{font-size:18px}
.cost-lens .lens-bar{height:8px; display:flex; overflow:hidden; border-radius:5px; margin:7px 0 5px; background:var(--line)}
.cost-lens .lens-bar i{display:block; height:100%}
.cost-lens small{font-size:9.5px; line-height:1.35; color:var(--muted)}
.humanoid-blueprint{display:grid; grid-template-columns:repeat(5,1fr); gap:18px; padding:15px; border:1px solid var(--line); border-radius:10px;
  background:linear-gradient(135deg,#F8F7F4,#EFF3F1); margin:14px 0}
.blueprint-node{position:relative; min-width:0; padding:12px 11px; border:1px solid var(--line); border-top:3px solid var(--accent); border-radius:8px; background:var(--surface)}
.blueprint-node:not(:last-child)::after{content:"→"; position:absolute; right:-16px; top:34px; color:var(--line2)}
.blueprint-node small{display:block; font-size:9px; color:var(--muted); text-transform:uppercase; letter-spacing:.07em}
.blueprint-node b{display:block; font-size:12px; margin:4px 0 2px}.blueprint-node span{font-size:10px; color:var(--ink2); line-height:1.35; display:block}

/* Source-sketch modal */
dialog{border:1px solid var(--line); border-radius:14px; padding:0; background:var(--surface); color:var(--ink); box-shadow:0 30px 90px rgba(0,0,0,.25); max-width:min(760px,92vw)}
dialog::backdrop{background:rgba(25,23,20,.56); backdrop-filter:blur(4px)}

@media(max-height:780px) and (min-width:901px){
  #overview .dia .d-cap{font-size:10.5px; line-height:1.4}
  #overview .dia:nth-child(2) svg{max-height:190px}
}
@media(max-width:1180px){
  #overview>.wrap{grid-template-columns:270px minmax(0,1fr); gap:16px}
  #overview .dia-grid{grid-template-columns:minmax(0,1fr) 220px}
  #overview .dia{padding:13px}
  #overview .dia .d-cap{font-size:10.5px}
  .layer-diagnostic{grid-template-columns:1fr}
}
@media(max-width:900px){
  :root{--app-pad:12px}
  .nav-in{padding:0 14px}.brand span{display:none}.navlinks button{padding:7px 10px}
  .main-view{overflow:auto}
  .main-view>.wrap{padding:0 14px; height:auto; min-height:100%}
  #overview>.wrap{display:flex; flex-direction:column}
  #overview .dia-grid{display:grid; grid-template-columns:1fr; height:auto}
  #overview .dia:first-child>.dia-shell svg{height:auto; min-height:650px}
  #overview .strip{order:3}
  #stack>.wrap,#projects>.wrap{height:100%; min-height:620px}
  #stack .sec-head p,#projects>.wrap>.sec-head p{display:none}
  #stack .stack{grid-template-columns:1fr; grid-template-rows:auto minmax(0,1fr)}
  #stack .rail{height:auto; flex-direction:row; overflow-x:auto; border-left:1px solid var(--line)}
  #stack .tab{white-space:nowrap; min-height:42px; border-left:0!important; border-bottom:3px solid transparent}
  #stack .tab+.tab{margin:0 0 0 2px}
  .overview-lede,.risk-layout,.monitor-grid{grid-template-columns:1fr}
  .material-cards{grid-template-columns:1fr}
  .humanoid-blueprint{grid-template-columns:1fr 1fr}
  .blueprint-node::after{display:none}
}
@media(max-width:620px){
  .navlinks{gap:2px}.navlinks button{font-size:11.5px;padding:7px 8px}
  #overview .dia:first-child svg{min-height:520px}
  .layer-head{padding:14px}.layer-headline h3{font-size:18px}.layer-score{display:none}
  .layer-modes{padding:0 10px}.layer-pane{padding:14px}
  .material-stats{grid-template-columns:1fr 1fr}.supply-flow{grid-template-columns:1fr 1fr}.flow-node::after{display:none}
  .risk-cards{grid-template-columns:1fr}.project-chapter{padding:16px}
  .project-visual-grid{grid-template-columns:1fr}
}

/* ══════════════════════════════════════════════════════════════════════════
   V3 — theming tokens, dark mode, chart system, print
   ══════════════════════════════════════════════════════════════════════════ */
:root{
  --l1:#C07A2C; --l1s:#F7EEE1; --l2:#A85C3A; --l2s:#F5EAE4;
  --l3:#8E4F5B; --l3s:#F4E9EB; --l4:#5F5A8C; --l4s:#EBEAF2;
  --l5:#3D6A8F; --l5s:#E7EEF4; --l6:#2F7A73; --l6s:#E4F0EE;
  --l7:#4F7A46; --l7s:#E9F1E6; --l8:#6E6A5F; --l8s:#EFEDE9;
  --on-layer:#ffffff;
  --bull-ink:#255C3D; --flag-ink:#7A3018; --warn-ink:#6E2916;
  --invert-bg:#23201B; --invert-fg:#EDEAE4; --invert-fg2:#CBC5BB;
  --track:rgba(0,0,0,.055); --panel-a:rgba(252,251,249,.72);
  --grad-a:rgba(14,107,96,.07); --grad-b:rgba(192,122,44,.06);
  --leaf:#75A66F; --sea:#DCECE9;
}
[data-theme="dark"]{
  color-scheme:dark;
  --ink:#ECE8E1; --ink2:#BDB5A8; --muted:#8D867A;
  --bg:#13120F; --surface:#1C1A16; --surface2:#22201A; --line:#332F28; --line2:#4B453B;
  --accent:#4FB3A2; --accent-d:#89D6C7; --accent-soft:#152E29;
  --flag:#E0714F; --flag-soft:#33201A; --flag-ink:#EFA184;
  --bull:#6FB98A; --bull-soft:#182A20; --bull-ink:#9BD3B0; --warn-ink:#EFA184;
  --l1:#D9A052; --l1s:#312617; --l2:#CE7E58; --l2s:#2F211A;
  --l3:#C2818D; --l3s:#2E2024; --l4:#928CC4; --l4s:#242335;
  --l5:#6E9CC4; --l5s:#1C2733; --l6:#4FB3A2; --l6s:#152E29;
  --l7:#82B276; --l7s:#1E2A1B; --l8:#A29A8A; --l8s:#252320;
  --on-layer:#141310;
  --invert-bg:#0A0A08; --invert-fg:#F2EFE9; --invert-fg2:#B7B0A4;
  --track:rgba(255,255,255,.09); --panel-a:rgba(28,26,22,.72);
  --grad-a:rgba(79,179,162,.10); --grad-b:rgba(217,160,82,.07);
  --leaf:#5E8F5A; --sea:#17332E;
}

/* Re-point every hard-coded colour so both themes are designed, not inverted */
body{background:
  radial-gradient(circle at 78% 8%,var(--grad-a),transparent 28%),
  radial-gradient(circle at 8% 92%,var(--grad-b),transparent 25%),var(--bg)}
nav{background:var(--bg); box-shadow:none; border-bottom:1px solid var(--line)}
.navlinks{background:var(--surface)}
.navlinks a:hover,.navlinks button:hover{background:var(--surface2)}
.navlinks a[aria-current="page"],.navlinks button[aria-selected="true"]{color:var(--bg); background:var(--accent); box-shadow:none}
#overview .strip,#overview .dia,#stack .rail,.project-chapters,#projects .ptab{background:var(--panel-a)}
#projects .ptab[aria-selected="true"]{color:var(--bg)}
.chapter-tab:hover,.tab:hover,.layer-mode:hover{background:var(--surface2)}
.bar .tr,.risk-meter .meter-track{background:var(--track)}
.verdict,.layer-verdict{background:var(--invert-bg); color:var(--invert-fg2)}
.verdict h3,.verdict b,.layer-verdict b{color:var(--invert-fg)}
.verdict p{color:var(--invert-fg2)}
.wrongnote{color:var(--warn-ink)}
td.bull{color:var(--bull-ink)} td.bear{color:var(--flag-ink)}
.material-hero{background:var(--surface2)}
.humanoid-blueprint{background:var(--surface2)}
dialog{max-width:min(980px,94vw)}

/* Theme toggle */
.theme-toggle{appearance:none; display:inline-flex; align-items:center; gap:7px; cursor:pointer;
  border:1px solid var(--line); background:var(--surface); color:var(--ink2); border-radius:8px;
  padding:6px 10px; font:500 11.5px var(--f); transition:.18s ease; white-space:nowrap}
.theme-toggle:hover{border-color:var(--accent); color:var(--accent-d)}
.theme-toggle{display:none}
.theme-toggle svg{width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round}
.theme-toggle .tt-moon{display:none}
[data-theme="dark"] .theme-toggle .tt-moon{display:block}
[data-theme="dark"] .theme-toggle .tt-sun{display:none}
.nav-right{display:flex; align-items:center; gap:12px}
@media(max-width:620px){.theme-toggle span{display:none} .theme-toggle{padding:6px 8px}}

/* Diagram primitives, shared by every inline SVG */
.ln{stroke:var(--line2)} .ln-a{stroke:var(--accent)}
.bt{fill:var(--ink)} .bs{fill:var(--muted)} .lb{fill:var(--muted)} .lb-a{fill:var(--accent-d)}
.bn{fill:var(--on-layer)}
.mk{stroke:var(--line2)} .mkA{stroke:var(--accent)}
.bx{stroke-width:1.3}
.b1{fill:var(--l1s);stroke:var(--l1)} .b2{fill:var(--l2s);stroke:var(--l2)}
.b3{fill:var(--l3s);stroke:var(--l3)} .b4{fill:var(--l4s);stroke:var(--l4)}
.b5{fill:var(--l5s);stroke:var(--l5)} .b6{fill:var(--l6s);stroke:var(--l6)}
.b7{fill:var(--l7s);stroke:var(--l7)} .b8{fill:var(--l8s);stroke:var(--l8)}
.b9{fill:var(--l9s);stroke:var(--l9)} .b10{fill:var(--l10s);stroke:var(--l10)}
.d1{fill:var(--l1)} .d2{fill:var(--l2)} .d3{fill:var(--l3)} .d4{fill:var(--l4)}
.d5{fill:var(--l5)} .d6{fill:var(--l6)} .d7{fill:var(--l7)} .d8{fill:var(--l8)}
.d9{fill:var(--l9)} .d10{fill:var(--l10)}
.sea{fill:var(--sea);stroke:var(--accent)} .leaf{fill:var(--leaf)}

/* Chart system */
.cw{background:var(--surface2); border:1px solid var(--line); border-radius:10px; padding:16px 18px 14px; margin-bottom:0}
.cw+.cw{margin-top:14px}
.cw h4{font-size:14.5px; margin:0 0 3px; letter-spacing:-.012em}
.cw .cq{font-size:11.5px; color:var(--muted); margin:0 0 12px; line-height:1.5}
.cw .cnote{margin-top:11px}
.cw svg{width:100%; height:auto; display:block; overflow:visible}
.ax{stroke:var(--line2); stroke-width:1}
.gr{stroke:var(--line); stroke-width:1; stroke-dasharray:2 4}
.ct{fill:var(--ink); font:600 12px var(--f); font-variant-numeric:tabular-nums}
.cs{fill:var(--muted); font:400 10.5px var(--f)}
.cs2{fill:var(--ink2); font:500 11px var(--f)}
.cv{fill:var(--ink); font:600 11.5px var(--f); font-variant-numeric:tabular-nums}
.cmk{stroke:var(--flag); stroke-width:1.2; stroke-dasharray:4 3}
.cmk-t{fill:var(--flag); font:500 10px var(--f)}
.seg{stroke:var(--surface2); stroke-width:1}
.legend{display:flex; flex-wrap:wrap; gap:6px 16px; margin-top:11px}
.legend span{display:inline-flex; align-items:center; gap:6px; font-size:11px; color:var(--ink2)}
.legend i{width:10px; height:10px; border-radius:3px; display:block; flex:none}
.legend i.dash{height:0; border-top:2px dashed currentColor; border-radius:0; width:14px}
.figwrap{border:1px solid var(--line); border-radius:11px; background:var(--surface); padding:16px 18px; margin:14px 0 16px}
.figwrap h4{font-size:14.5px; margin:0 0 3px}
.figwrap .cq{font-size:11.5px; color:var(--muted); margin:0 0 12px; line-height:1.5}
.figwrap svg{width:100%; height:auto; display:block}
.figwrap figcaption{font-size:11.5px; color:var(--muted); line-height:1.55; margin-top:11px}
#overview .dia:nth-child(2){overflow:auto; scrollbar-width:thin}
.mini-h{font-size:12.5px; font-weight:600; margin:16px 0 4px; letter-spacing:-.01em}
.conc-wrap{margin:16px 0 0}
.policy-rail{margin-top:14px}

/* Print / PDF: flatten the app shell into a linear document */
@media print{
  @page{margin:14mm}
  html,body{height:auto!important; overflow:visible!important; background:#fff!important; color:#000!important}
  nav,.theme-toggle,.navlinks,.project-chapter-nav,.layer-modes,.ptabs,dialog{display:none!important}
  .main-view{position:static!important; display:block!important; inset:auto!important;
    overflow:visible!important; padding:0!important; border:0!important}
  .main-view[hidden]{display:block!important}
  #materials,#risks,#method,footer{display:block!important}
  .panel,.ppanel,.layer-pane,.project-chapter,.rail{display:block!important; position:static!important;
    overflow:visible!important; height:auto!important; inset:auto!important}
  .project-chapters,.card,#stack .card,#stack #panels,#stack .panel,.main-view>.wrap{
    height:auto!important; overflow:visible!important; box-shadow:none!important}
  #overview>.wrap,#stack>.wrap,#projects>.wrap{display:block!important}
  #overview .dia-grid{display:block!important}
  .tw{overflow:visible!important}
  table{page-break-inside:auto} tr{page-break-inside:avoid}
  h2,h3,h4,.blockhead{page-break-after:avoid}
  .cw,.figwrap,.card,.risk,.mat{page-break-inside:avoid}
  .verdict,.layer-verdict{background:#fff!important; color:#000!important; border:1px solid #999}
  .verdict h3,.verdict b,.layer-verdict b{color:#000!important}
  .verdict p{color:#222!important}
}
@media (prefers-contrast:more){
  :root{--line:#A9A296; --line2:#6E675B; --muted:#4E483F}
  [data-theme="dark"]{--line:#5B554A; --line2:#8A8375; --muted:#B4ADA1}
}
#overview .dia-grid{grid-template-columns:minmax(0,1fr) minmax(258px,330px)}
.cw svg,.figwrap svg{max-width:880px; overflow:visible}
.cw figcaption,.figwrap figcaption{font-size:12px; color:var(--muted); line-height:1.55; margin-top:11px}
.cw figcaption b,.figwrap figcaption b{color:var(--ink2); font-weight:600}
#cx-matrix svg{max-width:none}

/* the horizontal bar fills are <i> elements inside a non-flex track, so they
   need to be blockified before a width can apply */
.bar .fl{display:block}
#overview .figure{font-size:clamp(50px,5.2vw,84px)}

@media(max-width:560px){.brand{display:none} .nav-in{gap:8px}}

.cx-host{margin:14px 0 16px}
.cx-host .cw,.figwrap#cx-sankey{margin:0}
.pw{stroke:var(--l1);stroke-width:1.6;fill:none}
.sc{stroke:var(--l7);stroke-width:1.6;fill:none}

/* ══════════════════════════════════════════════════════════════════════════
   V4 — overview given over to the schematic, plus the value chain view
   ══════════════════════════════════════════════════════════════════════════ */
#overview>.wrap{display:block; height:100%}
#overview .dia-grid{height:100%; margin:0; padding:0; border:0;
  grid-template-columns:minmax(0,1fr) minmax(290px,370px); gap:18px; align-items:stretch}
#overview .dia:first-child{display:grid; grid-template-rows:auto auto minmax(0,1fr)}
#overview .dia h3{font-size:18px}
#overview .dia .d-sub{font-size:13px; max-width:104ch}
.dia-head{display:flex; align-items:start; justify-content:space-between; gap:16px}
.lb-p{fill:var(--l1); font:500 11px var(--f)}
@media(max-width:900px){
  #overview .dia-grid{display:grid; grid-template-columns:1fr; height:auto}
  .dia-head{flex-direction:column; gap:8px}
}

/* Companies table */
td.co-geo{white-space:nowrap; color:var(--ink2)}
td.co-share{font-weight:500; color:var(--ink)}
table.co{min-width:1320px}

/* Value chain */
.chain-lead{font-size:14px; color:var(--ink2); line-height:1.6; max-width:88ch; margin:0 0 16px}
.chain-flow{list-style:none; display:flex; gap:26px; margin:0 0 16px; padding:2px 0 6px;
  overflow-x:auto; scrollbar-width:thin}
.chain-stage{position:relative; flex:1 1 0; min-width:206px; border:1px solid var(--line);
  border-top:3px solid var(--stage,var(--line2)); border-radius:10px; background:var(--surface); padding:13px 14px}
.chain-stage:not(:last-child)::after{content:""; position:absolute; right:-19px; top:46px;
  width:12px; height:12px; border-top:1.5px solid var(--line2); border-right:1.5px solid var(--line2);
  transform:rotate(45deg)}
.chain-stage.is-choke{background:var(--flag-soft); border-color:var(--flag)}
.chain-step{font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.chain-stage.is-choke .chain-step{color:var(--flag)}
.chain-stage h5{font-size:13.5px; margin:4px 0 9px; letter-spacing:-.012em}
.chain-node{font-size:11px; color:var(--ink2); background:var(--surface2); border:1px solid var(--line);
  border-radius:5px; padding:3px 7px; line-height:1.35}
.chain-stage.is-choke .chain-node{background:var(--surface); border-color:var(--line2)}
.chain-note{font-size:10.5px; color:var(--muted); line-height:1.45; margin:9px 0 0;
  padding-top:8px; border-top:1px solid var(--line)}
.chain-key{display:flex; flex-wrap:wrap; gap:8px 22px; margin-bottom:12px}
.chain-key span{display:inline-flex; align-items:center; gap:7px; font-size:11px; color:var(--muted)}
.chain-key i{width:11px; height:11px; border-radius:3px; display:block; flex:none}
.chain-key i.k-choke{background:var(--flag-soft); border:1px solid var(--flag)}
.chain-key i.k-flow{background:var(--surface2); border:1px solid var(--line2)}
@media(max-width:900px){
  .chain-flow{flex-direction:column; gap:20px}
  .chain-stage:not(:last-child)::after{right:auto; left:24px; top:auto; bottom:-16px; transform:rotate(135deg)}
}
@media print{ .chain-flow{flex-wrap:wrap; overflow:visible} .chain-stage{page-break-inside:avoid} }
.sc2{stroke:var(--l3); stroke-width:1.5; fill:none}
.pw2{stroke:var(--l1); stroke-width:1.6; fill:none}
.lb-s{fill:var(--l3); font:500 11px var(--f)}

/* Eight columns need real room; fix the widths so the argument columns keep theirs */
table.co{min-width:1560px; table-layout:fixed}
table.co th:nth-child(1),table.co td:nth-child(1){width:150px}
table.co th:nth-child(2),table.co td:nth-child(2){width:118px}
table.co th:nth-child(3),table.co td:nth-child(3){width:186px}
table.co th:nth-child(4),table.co td:nth-child(4){width:216px}
table.co th:nth-child(5),table.co td:nth-child(5){width:230px}
table.co th:nth-child(6),table.co td:nth-child(6){width:150px}
table.co th:nth-child(7),table.co td:nth-child(7),table.co th:nth-child(8),table.co td:nth-child(8){width:255px}
table.co th{white-space:normal}

/* The chain reads left to right, so it scrolls rather than wraps */
.chain-wrap{position:relative}
.chain-wrap::after{content:""; position:absolute; top:0; right:0; width:34px; height:100%;
  pointer-events:none; background:linear-gradient(to right,transparent,var(--surface2))}
.chain-hint{font-size:11px; color:var(--muted); margin:0 0 10px}
.chain-flow{scrollbar-width:thin}
table.co td.co-n,table.co td.co-geo{white-space:normal}

/* ══════════════════════════════════════════════════════════════════════════
   V5 — realigned to HTML Report Design System V2
   Warm-neutral ground replaced by the V2 cool-mineral foundation, teal accent
   replaced by cobalt, semantic palette (teal / amber / coral) applied
   consistently, and the eight layer hues rebuilt inside the V2 chart family
   so the colour coding survives the change. Structure and content unchanged.
   ══════════════════════════════════════════════════════════════════════════ */
:root{
  color-scheme:light;
  /* foundation */
  --bg:#F6F7F9; --surface:#FFFFFF; --surface2:#EEF1F4; --surface3:#E4E8ED;
  --ink:#17202A; --ink2:#5B6673; --muted:#7F8A98;
  --line:#D8DDE4; --line2:#BCC5CF;
  /* accent and semantics */
  --accent:#2457D6; --accent-d:#1947BB; --accent-soft:#E7EDFF;
  --teal:#087F73; --teal-soft:#DFF5F1;
  --amber:#A46100; --amber-soft:#FFF0CF;
  --flag:#C23B3B; --flag-soft:#FDE8E7; --flag-ink:#96292C;
  --bull:#087F73; --bull-soft:#DFF5F1; --bull-ink:#065E55;
  --warn-ink:#96292C;
  /* the ten layers — palette per the AUDIT brief, matched to the
     architecture diagram: amber energy, orange materials, rose semis,
     purple compute, blue enclosure, then the green-to-teal information
     band (data, models, software), cyan connectivity, green embodied. */
  --l1:#A46100;  --l1s:#FFF0CF;
  --l2:#B4552E;  --l2s:#FBE9E0;
  --l3:#B03A52;  --l3s:#FBE6EB;
  --l4:#7B61B7;  --l4s:#EEE9F8;
  --l5:#2457D6;  --l5s:#E7EDFF;
  --l6:#2E7F6E;  --l6s:#E4F1ED;
  --l7:#0E9488;  --l7s:#DEF4F1;
  --l8:#60758A;  --l8s:#EAEEF2;
  --l9:#1573A8;  --l9s:#E2F0F7;
  --l10:#3F7D3C; --l10s:#E4F2E2;
  --on-layer:#FFFFFF;
  /* surfaces and depth */
  --invert-bg:#17202A; --invert-fg:#F1F4F7; --invert-fg2:#AEB8C5;
  --track:rgba(23,32,42,.075); --panel-a:rgba(255,255,255,.74);
  --grad-a:rgba(36,87,214,.055); --grad-b:rgba(164,97,0,.05);
  --sea:#DDE9F6; --leaf:#4E8F5E;
  --shadow-sm:0 1px 2px rgb(20 30 45 / .05), 0 4px 16px rgb(20 30 45 / .04);
  --shadow-lg:0 18px 60px rgb(20 30 45 / .10);
  /* type and motion */
  --f:Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --f-mono:"SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --ease:cubic-bezier(.2,.8,.2,1);
  --r:10px; --r-lg:16px;
}
[data-theme="dark"]{
  color-scheme:dark;
  /* Tuned to the atlas photograph so the whole report reads as one piece:
     the same deep navy, the same blue cast in the lines. */
  --bg:#08131F; --surface:#0F1E2D; --surface2:#152838; --surface3:#1D3448;
  --ink:#EDF4FA; --ink2:#A8BBCC; --muted:#7C90A2;
  --line:#20364A; --line2:#38536B;
  --accent:#7DA2FF; --accent-d:#9BB8FF; --accent-soft:#1D2D55;
  --teal:#55C8B7; --teal-soft:#153B37;
  --amber:#F0B45D; --amber-soft:#493315;
  --flag:#F07A78; --flag-soft:#4A2427; --flag-ink:#F6A3A1;
  --bull:#55C8B7; --bull-soft:#153B37; --bull-ink:#8ADCCE;
  --warn-ink:#F6A3A1;
  --l1:#F0B45D;  --l1s:#3A2A12;
  --l2:#EA8A5F;  --l2s:#3A2418;
  --l3:#E0798F;  --l3s:#3A1F26;
  --l4:#B69AE8;  --l4s:#282141;
  --l5:#7DA2FF;  --l5s:#1D2D55;
  --l6:#66BEA8;  --l6s:#17332C;
  --l7:#50CFC3;  --l7s:#103330;
  --l8:#9AABBA;  --l8s:#242C34;
  --l9:#55BAD2;  --l9s:#123340;
  --l10:#7FC07A; --l10s:#1C3320;
  --on-layer:#0F1319;
  --invert-bg:#080B10; --invert-fg:#F1F4F7; --invert-fg2:#AEB8C5;
  --track:rgba(241,244,247,.10); --panel-a:rgba(23,28,36,.74);
  --grad-a:rgba(125,162,255,.09); --grad-b:rgba(240,180,93,.06);
  --sea:#16283C; --leaf:#4E8F5E;
  --shadow-sm:0 1px 2px rgb(0 0 0 / .22), 0 8px 24px rgb(0 0 0 / .16);
  --shadow-lg:0 22px 70px rgb(0 0 0 / .34);
}

/* Geometry: V2 uses 10px as the default radius and lets borders do the work */
.card,.dia,.strip,.block,.mat,.risk,.cw,.figwrap,.chain-stage,.material-hero,.humanoid-blueprint,.project-chapters,.navlinks,#stack .rail,.tw{border-radius:var(--r)}
dialog,#overview .dia{border-radius:var(--r-lg)}
.card,.dia,.block,.cw,.figwrap,.project-chapters{box-shadow:none}
nav{box-shadow:none; border-bottom:1px solid var(--line)}
.navlinks{box-shadow:var(--shadow-sm)}

/* Typography: V2 scale, mono reserved for small technical labels */
h1,h2,h3,h4,h5{letter-spacing:-.018em}
#overview .dia h3,#stack h1,#stack h2,#projects h1,#projects h2{font-weight:600}
.eyebrow,.chain-step,.co-share,.cs,.lb,.lb-a,.lb-p,.lb-s{font-feature-settings:'tnum' 1}
.chain-step,.eyebrow{font-family:var(--f-mono); letter-spacing:.04em}
.num,td.co-share,.cv,.bar .vl{font-variant-numeric:tabular-nums}
body{font-size:16px}

/* Motion: one easing family, honoured everywhere */
a,button,.tab,.layer-mode,.chapter-tab,.ptab,.chain-stage,.theme-toggle{transition:
  color .18s var(--ease), background-color .18s var(--ease), border-color .18s var(--ease),
  box-shadow .18s var(--ease)}
.bar .fl{transition:width .42s var(--ease)}

/* Accessibility: skip link and a visible, high-contrast focus ring */
/* The landmark takes focus from the skip link, but must not draw a ring when
   it is merely clicked through. */
main{display:block}
main:focus{outline:none}
/* The app views are fixed overlays, which without scripts would cover the
   summary entirely. The inline head script adds .js to <html>; its absence is
   the only reliable signal that scripts did not run, so use it to let the
   views flow in the document instead. The inline map on the overview is real
   content and stays visible; only the layout changes. */
html:not(.js) .main-view{position:static; inset:auto; overflow:visible; height:auto}
html:not(.js) .main-view>.wrap{height:auto; min-height:0}
html:not(.js) .main-view[hidden]{display:none}

/* The no-script summary. Only ever painted when scripts are off, so it has to
   stand on its own: the page around it is mostly empty in that case. */
.ns-summary{max-width:760px; margin:0 auto; padding:48px 28px}
.ns-summary>p{color:var(--muted); margin:0 0 28px}
.ns-layers{margin:0; padding:0; list-style:none; counter-reset:nsl}
.ns-layers li{padding:20px 0; border-top:1px solid var(--line)}
.ns-layers h3{font-size:19px; margin:0 0 8px}
.ns-layers p{margin:0 0 8px; color:var(--ink2)}
.ns-layers p:last-child{color:var(--muted); font-size:14px}
.skip-link{position:absolute; left:12px; top:-60px; z-index:100; background:var(--accent);
  color:#fff; padding:10px 16px; border-radius:var(--r); font:600 14px var(--f); text-decoration:none}
.skip-link:focus{top:10px}
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--accent); outline-offset:2px; border-radius:4px}
[data-theme="dark"] a:focus-visible,[data-theme="dark"] button:focus-visible{outline-color:var(--accent-d)}

/* Semantic colour used consistently: teal enables, amber constrains, coral warns */
.chain-stage.is-choke .chain-step{color:var(--amber)}
.chain-key i.k-choke{background:var(--amber-soft); border-color:var(--amber)}
.cmk{stroke:var(--amber)} .cmk-t{fill:var(--amber)}

/* ══════════════════════════════════════════════════════════════════════════
   V6 — sources view, ticker links, and more room for the schematic
   ══════════════════════════════════════════════════════════════════════════ */
/* Company cell: name links to the listing, ticker sits beneath it */
.co-name{display:block; font-weight:600; color:var(--ink); line-height:1.3}
a.co-link{text-decoration:none; border-bottom:1px solid transparent}
a.co-link:hover{color:var(--accent); border-bottom-color:var(--accent)}
.co-tick{display:flex; flex-wrap:wrap; gap:4px 8px; margin-top:5px}
.co-priv{display:block; margin-top:5px; font:400 10.5px var(--f-mono); color:var(--muted)}
a.tick{display:inline-flex; align-items:center; gap:3px; font:500 10.5px var(--f-mono);
  color:var(--ink2); text-decoration:none; background:var(--surface2);
  border:1px solid var(--line); border-radius:5px; padding:2px 5px; white-space:nowrap}
a.tick:hover{color:var(--accent); border-color:var(--accent); background:var(--accent-soft)}
a.tick svg{width:9px; height:9px; flex:none; opacity:.65}

/* Sources */
.src-list{list-style:none; margin:0 0 8px; padding:0; display:grid; gap:8px}
.src{display:grid; grid-template-columns:minmax(180px,250px) minmax(0,1fr) auto; gap:6px 18px;
  align-items:baseline; border:1px solid var(--line); border-radius:var(--r);
  background:var(--surface); padding:11px 14px}
.src-name{display:inline-flex; align-items:center; gap:5px; font-size:13.5px; font-weight:600;
  color:var(--ink); text-decoration:none; line-height:1.35}
.src-name:hover{color:var(--accent)}
.src-name svg{width:10px; height:10px; flex:none; opacity:.6}
.src-use{font-size:12.5px; color:var(--ink2); line-height:1.5}
.src-host{font:400 10.5px var(--f-mono); color:var(--muted); white-space:nowrap}
@media(max-width:820px){
  .src{grid-template-columns:1fr}
  .src-host{justify-self:start}
}
@media print{ .src{page-break-inside:avoid} }

/* The schematic gets the space back: tighter frame, narrower side column */
#overview .dia-grid{grid-template-columns:minmax(0,1fr) minmax(250px,300px); gap:14px}
#overview .dia{padding:16px 18px 14px}
#overview .dia h3{font-size:16.5px}
#overview .dia .d-sub{font-size:12.5px; line-height:1.5; margin:4px 0 2px; max-width:none}
#overview .dia-head{align-items:center}
#overview .dia .d-cap{font-size:12px}
#overview .dia:nth-child(2) h3{font-size:15px}
@media(min-width:1500px){#overview .dia-grid{grid-template-columns:minmax(0,1fr) 300px}}

/* ══════════════════════════════════════════════════════════════════════════
   V7 — linked chain entities, chain diagrams, project sources, larger overview
   ══════════════════════════════════════════════════════════════════════════ */
a.chain-node.is-link{display:inline-flex; align-items:center; gap:5px; text-decoration:none;
  color:var(--ink2); background:var(--surface2)}
a.chain-node.is-link:hover{color:var(--accent); border-color:var(--accent); background:var(--accent-soft)}
a.chain-node.is-link svg{width:8px; height:8px; flex:none; opacity:.5}
.chip-tick{font:500 9px var(--f-mono); color:var(--muted); letter-spacing:.02em;
  border-left:1px solid var(--line2); padding-left:5px}
a.chain-node.is-link:hover .chip-tick{color:var(--accent)}
.chain-key i.k-link{background:var(--accent-soft); border:1px solid var(--accent)}

/* Overview: the schematic and its type both step up */
#overview .dia-grid{grid-template-columns:minmax(0,1fr); gap:20px}
#overview .dia{padding:14px 16px 12px}
#overview .dia h3{font-size:17.5px}
#overview .dia .d-sub{font-size:13px}
#overview .dia:nth-child(2){font-size:13.5px}
#overview .dia:nth-child(2) p{font-size:13px; line-height:1.55}
#overview .dia:nth-child(2) h3{font-size:15.5px}
#overview .figwrap h4,#overview .cw h4{font-size:14px}
/* SVG type in the schematic, scaled up for the larger canvas */
#overview .dia .bt{font-size:16px}
#overview .dia .bs{font-size:12.5px}
#overview .dia .lb,#overview .dia .lb-a,#overview .dia .lb-wf,
#overview .dia .lb-p,#overview .dia .lb-s{font-size:12px}
#overview .dia .bn{font-size:12.5px}
@media(max-width:900px){#overview .dia-grid{grid-template-columns:1fr}}

/* (the V8 slot-swap override is gone — the ten-layer palette above is the
   single definition, so software is 9 and embodied is 10 by name.) */
.wl{stroke:var(--l1); stroke-width:1.5; fill:none; stroke-dasharray:6 5}
.wl2{stroke:var(--l2); stroke-width:1.5; fill:none; stroke-dasharray:6 5}
.mt2{stroke:var(--l2); stroke-width:1.6; fill:none}
.lb-m{fill:var(--l2); font:500 11px var(--f)}
#overview .dia .lb-m{font-size:12px}

/* ══════════════════════════════════════════════════════════════════════════
   V9 — the map gets the full width, the loop and the matrix sit below it
   ══════════════════════════════════════════════════════════════════════════ */
#overview{overflow-y:auto; overscroll-behavior:contain}
#overview>.wrap{display:block; height:auto; padding-bottom:28px}
#overview .dia-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px; height:auto}
#overview .dia-grid>*:first-child{grid-column:1 / -1}
#overview .dia{padding:20px 24px 22px}
#overview .dia h3{font-size:21px; margin-bottom:6px}
#overview .dia .d-sub{font-size:15px; line-height:1.62; max-width:88ch}
#overview .dia:nth-child(2){font-size:15.5px}
#overview .dia:nth-child(2) p{font-size:15px; line-height:1.65}
#overview .dia:nth-child(2) h3{font-size:21px}
#overview .dia .d-cap{font-size:14px; line-height:1.62}
#overview #cx-matrix{padding:20px 24px 22px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); margin:0}
#overview #cx-matrix h4{font-size:21px; letter-spacing:-.018em; margin-bottom:6px}
#overview #cx-matrix .cq{font-size:15px; line-height:1.6; margin-bottom:16px}
#overview #cx-matrix figcaption{font-size:14px; line-height:1.62}
#overview #cx-matrix svg{max-width:560px; margin:0 auto}
@media(max-width:960px){#overview .dia-grid{grid-template-columns:1fr}}

/* the physical world sits apart from the numbered layers in the rail */
.tab.world-tab{margin-top:10px; border-top:1px solid var(--line); padding-top:14px}
.tab.world-tab .t{font-style:normal}
#panels .card .layer-head:only-child{margin-bottom:0}

/* the physical world panel has no sub-views, so it scrolls as one document */
.world-panel .card{display:flex; flex-direction:column}
.world-body{flex:1; min-height:0; overflow:auto; scrollbar-gutter:stable}
.world-body .layer-pane{position:static; inset:auto; overflow:visible; display:block; padding:18px 22px 28px}
.world-panel .layer-head{margin-bottom:4px}
.world-body h4.mini-h{margin-top:26px}
.world-body .tw{margin-bottom:6px}

/* ──────────────────────────────────────────────────────────────────────────
   MULTI-PAGE — pages whose content flows and scrolls in the normal document
   rather than sitting in a fixed viewport workspace (materials, risks,
   method). The .doc class is set on <html> and <body> of those pages.
   ────────────────────────────────────────────────────────────────────────── */
html.doc,body.doc{height:auto; overflow:auto}
body.doc nav{position:sticky; top:0; z-index:60}
body.doc section{display:block; padding:34px 0 56px; border-bottom:1px solid var(--line)}
body.doc section>.wrap{max-width:1280px; padding:0 30px; height:auto}
body.doc footer{display:block}
body.doc footer>.wrap{max-width:1280px; padding:0 30px}
@media (max-width:900px){
  body.doc section>.wrap,body.doc footer>.wrap{padding:0 16px}
}

/* Landing rail — the report's title block and section index at the top of
   index.html, above the system map. The overview pane scrolls (see V9 above),
   so this sits in normal flow rather than in a grid column. */
.landing-rail{margin:0 0 20px; padding:0 0 20px; border-bottom:1px solid var(--line);
  display:flex; flex-direction:column; gap:12px}
.landing-rail h1{font-size:clamp(28px,3.1vw,44px); letter-spacing:-.03em; margin:0; max-width:22ch}
.landing-rail .lede{font-size:16px; color:var(--ink2); line-height:1.62; margin:0; max-width:78ch}

/* Clickable layer nodes in the overview map — each box links to its layer on
   the infrastructure page. */
.dia a.node{cursor:pointer}
.dia a.node .bx{transition:filter .18s ease, stroke-width .18s ease}
.dia a.node:hover .bx{filter:brightness(1.05) saturate(1.1); stroke-width:2.2}
.dia a.node:hover .bt{text-decoration:underline; text-underline-offset:2px}
.dia a.node:focus{outline:none}
.dia a.node:focus-visible .bx{stroke:var(--accent); stroke-width:2.6}
:root[data-theme="dark"] .dia a.node:hover .bx{filter:brightness(1.35)}
@media (prefers-reduced-motion:reduce){.dia a.node .bx{transition:none}}

/* Layer marks on the overview map, drawn at 0.85 scale. */
.dia .lic{fill:none; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; opacity:.85}
.dia a.node .lic{transition:opacity .18s ease}
.dia a.node:hover .lic{opacity:1}

/* ──────────────────────────────────────────────────────────────────────────
   THE OVERVIEW MAP, READ BY POINTING
   Arrow labels are hidden at rest — the diagram carries thirteen of them and
   showing them all at once is most of what made it hard to read. Pointing at a
   layer lights its outgoing arrows, reveals just those labels, and fills the
   panel beside the map.
   ────────────────────────────────────────────────────────────────────────── */
/* superseded by .dia-shell */
#mapsvg{width:100%; height:auto; min-height:0}

/* data-ends marks anything that belongs to a flow — the arrow and its label.
   Labels stay hidden until their flow is highlighted, so the map reads clean
   at rest; the few that are always on say so themselves further down. */
#mapsvg path[data-ends]{opacity:.72; transition:opacity .16s var(--ease), stroke-width .16s var(--ease)}
#mapsvg text[data-ends]{opacity:0; transition:opacity .16s var(--ease)}
#mapsvg.hl path[data-ends]:not(.on){opacity:.11}
/* Highlighting brightens and thickens an arrow; it must not repaint it. An
   arrow's colour says which family it belongs to — energy, material,
   semiconductor, data, model — and recolouring it to whichever layer happens
   to be under the cursor destroyed exactly the thing the colour encodes. */
#mapsvg path[data-ends].on{opacity:1; stroke-width:2.4}
#mapsvg text[data-ends].on{opacity:1}
#mapsvg .worldnode{cursor:default}

/* Hovering a layer fades every box that is not that layer, so what is left at
   full strength is the layer itself and the arrows in and out of it. A layer
   can own several boxes (layer 1 is the grid, the on-site plant and the
   machine's battery); all of them stay lit. The fade is partial on purpose —
   the rest of the map still has to read as context, not disappear. */
#mapsvg a.node,#mapsvg a.worldnode{transition:opacity .16s var(--ease)}
#mapsvg.hl [data-node]:not(.on){opacity:.3}

/* Layer marks in the rail and the layer head on the infrastructure page */
.licon{fill:none; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; flex:none}
.rail-icon{width:23px; height:23px}
#rail .tab{display:flex; align-items:center; gap:9px}
.head-icon{width:40px; height:40px}
.layer-head-main{display:flex; align-items:center; gap:14px; min-width:0}
@media (prefers-reduced-motion:reduce){
  #mapsvg path[data-ends],#mapsvg text[data-ends],
  #mapsvg a.node,#mapsvg a.worldnode{transition:none}
}

/* Company marks on the value-chain chips. Logos sit on a light plate so marks
   drawn in dark ink stay legible on the dark theme, where many would otherwise
   disappear into the chip. */
.co-logo{width:15px; height:15px; flex:none; object-fit:contain;
  background:#fff; border-radius:3px; padding:1px; box-shadow:0 0 0 1px rgba(23,32,42,.07)}
:root[data-theme="dark"] .co-logo{box-shadow:0 0 0 1px rgba(255,255,255,.12)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .co-logo{box-shadow:0 0 0 1px rgba(255,255,255,.12)}
}

/* ──────────────────────────────────────────────────────────────────────────
   THE VALUE CHAIN
   The most-read pane in the layer view, so it gets the room. Stage cards are
   wide enough to carry a sentence on what the stage does, and every supplier
   chip leads with the company's mark — scanning logos is faster than reading
   a list of names.
   ────────────────────────────────────────────────────────────────────────── */

.chain-stage:not(:last-child)::after{right:-22px; top:52px}
.cs-head{display:flex; align-items:flex-start; gap:11px; margin-bottom:10px}
.cs-num{flex:none; width:26px; height:26px; border-radius:7px; display:grid; place-items:center;
  font:600 12.5px var(--f-mono); background:var(--stage,var(--accent)); color:#fff}
.cs-title{min-width:0}
.cs-title .chain-step{display:block}
.chain-stage h5{font-size:15.5px; margin:2px 0 0; letter-spacing:-.016em; line-height:1.25}
.cs-what{font-size:12.5px; line-height:1.55; color:var(--ink2); margin:0 0 13px}
.chain-node{font-size:11px; padding:6px 8px; border-radius:7px; min-width:0;
  display:flex; align-items:flex-start; gap:7px; line-height:1.25}
.cn-text{min-width:0; display:flex; flex-direction:column; gap:1px}
.cn-name{display:block; font-weight:500; color:var(--ink); font-size:11.5px;
  line-height:1.3; overflow-wrap:anywhere}
a.chain-node.is-link .cn-name{color:var(--ink)}
a.chain-node.is-link:hover .cn-name{color:var(--accent)}
.chain-node .chip-tick{font-size:8.5px; border:0; padding:0; background:none}
.chip-tick.is-priv{font-style:italic}
.chain-node .co-logo{width:20px; height:20px; margin-top:1px}
/* Kept for the value-chain rows, where the column has to line up. Chips do not
   use it: an empty square there reads as a broken image. */
.co-logo.is-blank{background:var(--surface2); box-shadow:inset 0 0 0 1px var(--line)}
.chain-node:not(:has(img,.co-logo)){padding-left:11px}
a.chain-node.is-link>svg{margin-left:auto; opacity:.35}
.chain-note{font-size:11px; margin-top:auto; padding-top:11px}

/* The process strip — a chain inside a stage */
.vc-proc{margin:30px 0 4px; padding-top:4px}
.proc-flow{list-style:none; margin:0 0 14px; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:12px}
.proc-step{display:flex; gap:11px; background:var(--surface); border:1px solid var(--line);
  border-radius:10px; padding:14px 15px; position:relative}
.ps-num{flex:none; width:23px; height:23px; border-radius:6px; display:grid; place-items:center;
  font:600 11.5px var(--f-mono); background:var(--surface2); color:var(--ink2);
  box-shadow:inset 0 0 0 1px var(--line)}
.ps-body{min-width:0}
.ps-body h6{font-size:13.5px; margin:0 0 6px; letter-spacing:-.012em}
.ps-who{display:flex; align-items:center; gap:6px; margin-bottom:7px}
.ps-who span{font:500 11px var(--f); color:var(--accent)}
.ps-body p{font-size:11.5px; line-height:1.5; color:var(--ink2); margin:0}
.proc-note{margin-top:0; padding-top:0; border:0}

@media (max-width:760px){
  .chain-stage{flex-basis:270px; min-width:270px}
}

/* ──────────────────────────────────────────────────────────────────────────
   VERTICAL VALUE CHAIN
   The chain reads top to bottom now. Sideways scrolling hid most of it and
   capped how much could be said about any one company; a vertical column gives
   every supplier a full row — a large mark, what it supplies at that stage,
   and its position on the right.
   ────────────────────────────────────────────────────────────────────────── */
.chain-wrap{overflow:visible}
.chain-wrap::after{display:none}
.chain-flow{display:flex; flex-direction:column; gap:0; overflow:visible;
  margin:0 0 8px; padding:0}
.chain-stage{flex:none; min-width:0; width:100%; border:1px solid var(--line);
  border-radius:12px; padding:18px 20px 16px; background:var(--surface);
  display:block; margin-bottom:34px; position:relative}
.chain-stage:last-child{margin-bottom:6px}
/* the connector between stages now points down */
.chain-stage:not(:last-child)::after{content:""; position:absolute;
  left:50%; right:auto; top:auto; bottom:-25px; width:2px; height:16px;
  transform:translateX(-50%); background:var(--line2); border:0}
.chain-stage:not(:last-child)::before{content:""; position:absolute;
  left:50%; bottom:-28px; width:9px; height:9px; transform:translateX(-50%) rotate(45deg);
  border-right:2px solid var(--line2); border-bottom:2px solid var(--line2)}

.cs-head{display:flex; align-items:center; gap:13px; margin-bottom:11px}
.cs-count{margin-left:auto; font:500 10px var(--f-mono); letter-spacing:.06em;
  text-transform:uppercase; color:var(--muted); white-space:nowrap}
.chain-stage h5{font-size:18px}
.cs-what{font-size:13.5px; max-width:92ch; margin:0 0 15px}

.vs-rows{list-style:none; margin:0; padding:0; display:grid; gap:9px}
.vrow{display:grid;
  grid-template-columns:60px minmax(0,1fr) 104px minmax(150px,232px) minmax(120px,164px);
  gap:16px; align-items:center; padding:12px 14px; border:1px solid var(--line);
  border-radius:10px; background:var(--surface2)}
.vr-logo{width:52px; height:52px; object-fit:contain; background:#fff; border-radius:8px;
  padding:4px; box-shadow:0 0 0 1px rgba(23,32,42,.08)}
.vr-logo.is-blank{background:var(--surface3,var(--surface2)); box-shadow:inset 0 0 0 1px var(--line)}
:root[data-theme="dark"] .vr-logo{box-shadow:0 0 0 1px rgba(255,255,255,.13)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .vr-logo{box-shadow:0 0 0 1px rgba(255,255,255,.13)}
}
.vr-main{min-width:0}
.vr-top{display:flex; align-items:baseline; gap:9px; flex-wrap:wrap}
.vr-name{font-size:14.5px; font-weight:600; letter-spacing:-.014em; color:var(--ink);
  text-decoration:none; display:inline-flex; align-items:center; gap:5px}
a.vr-name.is-link:hover{color:var(--accent); text-decoration:underline}
a.vr-name svg{width:9px; height:9px; opacity:.4}
.vr-tick{font:500 9.5px var(--f-mono); letter-spacing:.04em; color:var(--muted);
  border:1px solid var(--line); border-radius:4px; padding:1px 5px; white-space:nowrap}
.vr-tick.is-priv{border-style:dashed; font-style:italic}
.vr-desc{font-size:12.5px; line-height:1.5; color:var(--ink2); margin:5px 0 0; max-width:78ch}
.vr-geo{display:block; font-size:12px; color:var(--ink2); font-weight:500; margin-bottom:4px}
.vr-lbl{display:block; font:400 9.5px var(--f-mono); letter-spacing:.05em;
  text-transform:uppercase; color:var(--muted); margin-top:4px}

@media (max-width:820px){
  .vrow{grid-template-columns:40px minmax(0,1fr); gap:12px}
  .vr-logo{width:36px; height:36px}
  .vr-lbl{margin-top:0}
  .cs-count{margin-left:0; width:100%}
  .cs-head{flex-wrap:wrap}
}

/* The companies table lost its "critical products and services" column — that
   description now sits beside each company in the value chain — so the rest can
   be laid out to fit the pane instead of scrolling sideways. */
table.co{min-width:0; width:100%; table-layout:fixed}
table.co th,table.co td{overflow-wrap:anywhere}
table.co th:nth-child(1),table.co td:nth-child(1){width:15%}
table.co th:nth-child(2),table.co td:nth-child(2){width:9%}
table.co th:nth-child(3),table.co td:nth-child(3){width:13%}
table.co th:nth-child(4),table.co td:nth-child(4){width:18%}
table.co th:nth-child(5),table.co td:nth-child(5){width:13%}
table.co th:nth-child(6),table.co td:nth-child(6){width:16%}
table.co th:nth-child(7),table.co td:nth-child(7){width:16%}
@media (max-width:900px){
  table.co{min-width:820px; table-layout:auto}
  table.co th,table.co td{width:auto!important}
}

/* The physical world has no layer colour of its own; it borrows the accent, and
   resolves per theme because the accent does. */
:root{--l0:var(--accent)}
#mapsvg a.worldnode{cursor:pointer}
#mapsvg a.worldnode .sea{transition:filter .18s ease}
#mapsvg a.worldnode:hover .sea{filter:brightness(1.06)}
#mapsvg a.worldnode:focus{outline:none}
#mapsvg a.worldnode:focus-visible .sea{stroke-width:3}
#rail .tab.world-tab{display:flex; align-items:center; gap:9px}

/* Value chain row: mark, who they are, what they are worth, the share note,
   and where they are domiciled — five columns instead of one crowded pair. */
.vr-cap{text-align:right}
.vr-cap b{display:block; font-size:14.5px; font-weight:600; letter-spacing:-.016em;
  color:var(--ink); font-variant-numeric:tabular-nums; line-height:1.2}
.vr-note{font-size:11.5px; line-height:1.45; color:var(--ink2);
  padding-left:15px; border-left:1px solid var(--line)}
.vr-none{font:400 10px var(--f-mono); letter-spacing:.03em; color:var(--muted)}
.vr-geo{display:flex; align-items:center; gap:7px; font-size:11.5px; color:var(--ink2);
  padding-left:15px; border-left:1px solid var(--line); text-align:left}
.vr-flag{font-size:14px; line-height:1; flex:none;
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif}

/* Company marks in the companies table, at the same size as the chain rows. */
.co-cell{display:flex; align-items:flex-start; gap:11px}
.co-tlogo{width:52px; height:52px; flex:none; object-fit:contain; background:#fff;
  border-radius:9px; padding:5px; box-shadow:0 0 0 1px rgba(23,32,42,.08)}
.co-tlogo.is-blank{background:var(--surface2); box-shadow:inset 0 0 0 1px var(--line)}
:root[data-theme="dark"] .co-tlogo{box-shadow:0 0 0 1px rgba(255,255,255,.13)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .co-tlogo{box-shadow:0 0 0 1px rgba(255,255,255,.13)}
}
table.co th:nth-child(1),table.co td:nth-child(1){width:19%}
table.co th:nth-child(2),table.co td:nth-child(2){width:10%}
table.co th:nth-child(3),table.co td:nth-child(3){width:12%}
table.co th:nth-child(4),table.co td:nth-child(4){width:17%}
table.co th:nth-child(5),table.co td:nth-child(5){width:12%}
table.co th:nth-child(6),table.co td:nth-child(6){width:15%}
table.co th:nth-child(7),table.co td:nth-child(7){width:15%}
td.co-geo{white-space:nowrap}

@media (max-width:1180px){
  .vrow{grid-template-columns:52px minmax(0,1fr) 96px minmax(120px,190px)}
  .vr-geo{grid-column:2/-1; padding-left:0; border-left:0; padding-top:8px;
    border-top:1px solid var(--line)}
}
@media (max-width:820px){
  .vrow{grid-template-columns:44px minmax(0,1fr)}
  .vr-logo{width:44px; height:44px}
  .vr-cap{grid-column:2; text-align:left}
  .vr-note{grid-column:1/-1; padding-left:0; border-left:0; padding-top:8px;
    border-top:1px solid var(--line)}
  .vr-geo{grid-column:1/-1; padding-top:6px; border-top:0}
  .co-tlogo{width:40px; height:40px}
}

td.co-geo{white-space:normal}
td.co-geo .vr-flag{margin-right:6px; vertical-align:-1px}

/* ──────────────────────────────────────────────────────────────────────────
   VALUE CHAIN — stage index
   The sub-layer breakdown that used to sit in the thesis pane now heads the
   value chain, where it doubles as a jump index into the stages below it.
   ────────────────────────────────────────────────────────────────────────── */
.vc-index{border:1px solid var(--line); border-radius:12px; background:var(--surface2);
  padding:18px 20px 16px; margin:0 0 22px}
.vc-index-h{font-size:15.5px; font-weight:600; letter-spacing:-.014em; margin:0; color:var(--ink)}
.vc-index-s{font-size:12.5px; color:var(--muted); margin:4px 0 14px}
/* Each chain reads left to right. Short ones fit a line; layer 5's runs to
   fourteen stages, so chains wrap onto a second row rather than squeezing
   every stage into an unreadable sliver. The connector carries across the
   wrap, so it still reads as one chain. */
.vj-jump{list-style:none; margin:0; padding:0; display:flex; align-items:stretch;
  gap:8px 0; flex-wrap:wrap}
.vj-jump li{flex:1 1 132px; min-width:0; display:flex; align-items:stretch}
/* the connector: within a chain, each stage depends on the one before it */
.vj-jump li:not(:last-child)::after{content:""; flex:none; align-self:center; width:20px; height:9px;
  margin:0 3px; background:var(--line2);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 9'%3E%3Cpath d='M0 4.5h16M12.5 1 16 4.5 12.5 8' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 9'%3E%3Cpath d='M0 4.5h16M12.5 1 16 4.5 12.5 8' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain}
.vj{appearance:none; width:100%; text-align:left; cursor:pointer; font:inherit;
  display:flex; flex-direction:column; gap:4px; background:var(--surface);
  border:1px solid var(--line); border-radius:8px; padding:8px 9px 9px;
  transition:border-color .16s var(--ease), transform .16s var(--ease)}
.vj:hover{border-color:var(--accent); transform:translateY(-1px)}
.vj:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.vj-n{width:19px; height:19px; border-radius:50%; background:var(--accent-soft); color:var(--accent);
  font:600 11px var(--f-mono); display:flex; align-items:center; justify-content:center; flex:none}
.vj b{font-size:12px; color:var(--ink); letter-spacing:-.012em; line-height:1.22;
  overflow-wrap:anywhere}
.vj-f{font-size:11px; color:var(--muted); line-height:1.4}
/* (No wrap at narrow widths: the row scrolls instead, so the chain survives.) */
.vc-top-wrap{margin:18px 0 0; text-align:right}
.vc-top{appearance:none; background:none; border:0; cursor:pointer; padding:0;
  font:500 12.5px var(--f); color:var(--accent)}
.vc-top:hover{text-decoration:underline}
.chain-stage{scroll-margin-top:20px}
.layer-diagnostic.single{grid-template-columns:1fr}

/* ──────────────────────────────────────────────────────────────────────────
   LAYER DESCRIPTION
   ────────────────────────────────────────────────────────────────────────── */

.how-stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:0;
  border:1px solid var(--line); border-radius:11px; overflow:hidden; margin:0 0 26px}
.how-stats>div{padding:14px 16px; border-right:1px solid var(--line)}
.how-stats>div:last-child{border-right:0}
.how-stats b{display:block; font-size:21px; letter-spacing:-.024em; color:var(--ink)}
.how-stats span{display:block; font-size:11.5px; color:var(--muted); margin-top:3px; line-height:1.45}
.how-list{list-style:none; margin:0 0 24px; padding:0; display:flex; flex-direction:column; gap:2px}
.how-list li{display:grid; grid-template-columns:34px minmax(0,1fr); gap:14px; align-items:start;
  padding:16px 0; border-top:1px solid var(--line)}
.how-n{width:28px; height:28px; border-radius:8px; background:var(--stage,var(--accent)); color:#fff;
  font:600 12px var(--f-mono); display:flex; align-items:center; justify-content:center; opacity:.92}
.how-list h5{font-size:15px; font-weight:600; letter-spacing:-.014em; margin:2px 0 6px; color:var(--ink)}
.how-list p{font-size:14px; line-height:1.65; color:var(--ink2); margin:0; max-width:88ch}
.how-money{border-left:3px solid var(--accent); background:var(--surface2);
  border-radius:0 10px 10px 0; padding:16px 20px; margin:0 0 6px}
.how-money h5{font-size:14px; font-weight:600; margin:0 0 6px; color:var(--ink)}
.how-money p{font-size:14px; line-height:1.65; color:var(--ink2); margin:0; max-width:88ch}

/* (The per-material photo strips are gone — each layer now carries a proper
   key-elements section, and the strips were the same pictures a second time.) */
.material-card .mat-top>div:last-child{min-width:0}
.mats-inline{margin-top:8px}

/* Source register on the Method page */
.src-layer{border:1px solid var(--line); border-radius:11px; margin-bottom:9px; background:var(--surface)}
.src-layer summary{display:flex; align-items:center; gap:11px; cursor:pointer; padding:13px 16px;
  font-size:14.5px; font-weight:600; letter-spacing:-.012em; color:var(--ink); list-style:none}
.src-layer summary::-webkit-details-marker{display:none}
.src-layer summary::after{content:"+"; margin-left:auto; color:var(--muted); font:400 17px var(--f-mono)}
.src-layer[open] summary::after{content:"\2212"}
.src-icon{width:22px; height:22px}
.src-layer-body{padding:0 16px 16px; border-top:1px solid var(--line)}
.src-doc a{display:inline-block; margin-top:6px; font-size:14px; font-weight:500;
  color:var(--accent); text-decoration:none}
.src-doc a:hover{text-decoration:underline}


/* ──────────────────────────────────────────────────────────────────────────
   TAB INTROS — a title and one line saying what each pane shows, tinted with
   the layer's own colour so the tab you are in is legible at a glance.
   ────────────────────────────────────────────────────────────────────────── */
.tab-intro{border-left:4px solid var(--tint,var(--accent)); background:var(--surface2);
  border-radius:0 10px 10px 0; padding:14px 18px 15px; margin:0 0 20px}
.tab-intro h4{font-size:16px; font-weight:600; letter-spacing:-.016em; margin:0 0 5px; color:var(--ink)}
.tab-intro p{font-size:13.5px; line-height:1.6; color:var(--ink2); margin:0; max-width:92ch}

/* ──────────────────────────────────────────────────────────────────────────
   CHOKEPOINT AND MOAT — the scatter explains itself on hover
   ────────────────────────────────────────────────────────────────────────── */
#overview #cx-matrix{grid-column:1 / -1}
/* superseded by .dia-shell */
.mx-pt{cursor:pointer}
.mx-pt .mx-dot{transition:r .16s var(--ease), opacity .16s var(--ease)}
svg.mx-hl .mx-pt:not(.on) .mx-dot{opacity:.24}
svg.mx-hl .mx-pt:not(.on) text{opacity:.4}
.mx-pt.on .mx-dot{r:16}
.mx-pt:focus{outline:none}
.mx-pt:focus-visible .mx-dot{stroke:var(--accent); stroke-width:2.5}
.mx-eyebrow{font-size:10.5px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--muted); margin:0 0 5px; font-weight:600}
.mx-info h5{font-size:16.5px; font-weight:600; letter-spacing:-.018em; margin:0 0 10px;
  color:var(--ink); line-height:1.28}
.mx-lede{font-size:13px; line-height:1.6; color:var(--ink2); margin:0}
.mx-hint{font-size:12px; color:var(--muted); margin:12px 0 0; padding-top:11px;
  border-top:1px solid var(--line)}
.mx-scores{display:flex; gap:9px; margin:0 0 11px; flex-wrap:wrap}
.mx-scores span{font-size:11.5px; color:var(--ink2); background:var(--surface2);
  border:1px solid var(--line); border-radius:7px; padding:5px 10px}
.mx-scores b{display:block; font-size:9.5px; letter-spacing:.07em; text-transform:uppercase;
  color:var(--muted); font-weight:600; margin-bottom:1px}
.mx-why{font-size:12.5px; line-height:1.6; color:var(--ink2); margin:0 0 9px}
.mx-why b{color:var(--ink)}
.mx-watch{font-size:12px; line-height:1.55; color:var(--ink2); margin:11px 0 0;
  padding:8px 0 8px 12px; border-left:3px solid var(--accent)}
@media (prefers-reduced-motion:reduce){ .mx-pt .mx-dot{transition:none} }

/* ──────────────────────────────────────────────────────────────────────────
   OVERVIEW FIGURES — one shell for all three
   The map, the loop and the moat scatter now share a layout: the drawing on
   the left at about half the width, its reading panel on the right. Pointing
   at anything in the drawing fills the panel.
   ────────────────────────────────────────────────────────────────────────── */
#overview .dia-grid{grid-template-columns:1fr}
#overview .dia-grid>*{grid-column:1 / -1}
.dia-shell{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:26px; align-items:start; margin-top:6px}
.dia-chart{min-width:0}
.dia-chart svg{width:100%; height:auto; display:block}
.dia-info{border:1px solid var(--line); border-radius:12px; background:var(--surface);
  padding:17px 19px 18px; min-height:250px; align-self:stretch}
.dia-info .mx-eyebrow{font-size:10.5px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--muted); margin:0 0 5px; font-weight:600}
.dia-info h5{font-size:17px; font-weight:600; letter-spacing:-.018em; margin:0 0 10px;
  color:var(--ink); line-height:1.28}
.dia-info .mi-eyebrow{font-size:10.5px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--muted); margin:0 0 5px; font-weight:600}
.dia-info h4{font-size:17px; font-weight:600; letter-spacing:-.018em; margin:0 0 9px; color:var(--ink)}

/* The loop: same highlight grammar as the moat scatter */
#loopsvg .loop-node{cursor:pointer}
#loopsvg .loop-node rect,#loopsvg .loop-node text{transition:opacity .16s var(--ease)}
#loopsvg.mx-hl .loop-node:not(.on) rect,#loopsvg.mx-hl .loop-node:not(.on) text{opacity:.3}
#loopsvg .loop-node.on rect{stroke-width:2.4}
#loopsvg .loop-node:focus{outline:none}
#loopsvg .loop-node:focus-visible rect{stroke:var(--accent); stroke-width:2.6}

/* Hover labels on the map punch through whatever they cross */
#mapsvg text[data-ends]{paint-order:stroke; stroke:var(--bg); stroke-width:3.6px;
  stroke-linejoin:round}

@media (max-width:1000px){
  .dia-shell{grid-template-columns:1fr}
  .dia-info{min-height:0}
}
@media (prefers-reduced-motion:reduce){
  #loopsvg .loop-node rect,#loopsvg .loop-node text{transition:none}
}

/* ──────────────────────────────────────────────────────────────────────────
   PER-FIGURE PROPORTIONS
   Shared format, not shared size. The map is detailed and needs the width;
   the loop is four boxes and does not, so it renders near its natural size
   rather than stretching to fill half the figure.
   ────────────────────────────────────────────────────────────────────────── */
.dia-shell.is-map{grid-template-columns:minmax(0,1fr) minmax(168px,196px)}
/* The map earns more of the page than the other two figures: it is wider,
   carries four groupings and has to stay readable without zooming. Keep this
   under the height the viewBox's own ratio gives at full width, or the box
   letterboxes: -80 -96 1888 1184 is 1.595:1. */
#mapsvg{min-height:660px}
@media(max-width:1200px){ #mapsvg{min-height:0} }
.dia-shell.is-loop{
  grid-template-columns:minmax(560px,.92fr) minmax(320px,1fr);
  align-items:stretch;
}
.dia-shell.is-loop .dia-chart{
  border:1px solid var(--chrome-line); border-radius:16px; padding:16px;
  background:linear-gradient(180deg,var(--glass-strong),var(--glass));
  box-shadow:var(--shadow-sm); overflow:hidden;
}
#loopsvg{
  width:100%; min-height:330px; display:block;
  color:var(--accent);
}
#loopsvg .loop-orbit{
  fill:color-mix(in srgb,var(--accent-soft) 24%,transparent);
  stroke:color-mix(in srgb,var(--accent) 34%,transparent);
  stroke-width:1.2; stroke-dasharray:6 8;
}
#loopsvg .loop-route{
  fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round;
  opacity:.82; filter:drop-shadow(0 0 8px currentColor);
}
#loopsvg .r-observe{color:var(--l6)}
#loopsvg .r-learn{color:var(--l7)}
#loopsvg .r-act{color:var(--l10)}
#loopsvg .r-change{color:var(--l1)}
#loopsvg .loop-node .bx{
  fill:color-mix(in srgb,var(--surface2) 76%,transparent);
  stroke:currentColor; stroke-width:1.7;
  filter:drop-shadow(0 0 12px color-mix(in srgb,currentColor 32%,transparent));
}
#loopsvg .loop-node .b10{color:var(--l10)}
#loopsvg .loop-node .b8{color:var(--l7)}
#loopsvg .loop-node .b9{color:var(--l8)}
#loopsvg .loop-node .bt{
  fill:var(--ink); font-size:17px; font-weight:760; letter-spacing:0;
}
#loopsvg .loop-node .bs{
  fill:var(--ink2); font-size:12.5px; font-weight:520;
}
#loopsvg .loop-core{
  fill:none; stroke:var(--accent); stroke-width:2.2; opacity:.78;
  filter:drop-shadow(0 0 10px var(--accent));
}
#loopsvg.mx-hl .loop-node:not(.on) rect,
#loopsvg.mx-hl .loop-node:not(.on) text,
#loopsvg.mx-hl .loop-route{opacity:.28}
#loopsvg.mx-hl .loop-node.on rect{stroke-width:2.8}
:root[data-theme="dark"] .dia-shell.is-loop .dia-chart{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 0 34px rgba(85,186,210,.08);
}
:root[data-theme="dark"] #loopsvg .loop-node .bx{
  fill:color-mix(in srgb,var(--surface2) 62%,transparent);
}
:root[data-theme="dark"] #loopsvg .loop-node .bt{fill:var(--ink)}
:root[data-theme="dark"] #loopsvg .loop-node .bs{fill:var(--ink2)}
@media (max-width:1000px){
  .dia-shell.is-map{grid-template-columns:1fr}
  .dia-shell.is-loop{grid-template-columns:1fr}
}

/* The photographic globe replaces the drawn one when the Earth image exists;
   the vector globe underneath remains the fallback. */
#mapsvg .earth{pointer-events:none}

/* Deliberately no scroll-behavior:smooth on .layer-pane. Smooth scrolling is a
   no-op in some embeddings of this page, and once it is set every scrollTop
   assignment routes through it and silently does nothing. Stage jumps are
   instant, which also means they need no reduced-motion guard. */

/* The drawn globe is the fallback; it steps aside once the photograph loads. */
#mapsvg.has-earth .sea,#mapsvg.has-earth .leaf{display:none}

/* ──────────────────────────────────────────────────────────────────────────
   ELEMENT DETAIL DIALOG
   ────────────────────────────────────────────────────────────────────────── */
.el-dialog{border:1px solid var(--line); border-radius:14px; background:var(--surface);
  color:var(--ink); padding:0; max-width:460px; width:calc(100% - 32px);
  box-shadow:var(--shadow-lg)}
.el-dialog::backdrop{background:rgba(10,14,20,.55); backdrop-filter:blur(2px)}
.eld-body{padding:20px 22px 18px; position:relative}
.eld-close{position:absolute; top:12px; right:13px; appearance:none; border:0; background:none;
  font:400 22px/1 var(--f); color:var(--muted); cursor:pointer; padding:4px 6px; border-radius:6px}
.eld-close:hover{color:var(--ink); background:var(--surface2)}
.eld-head{display:flex; gap:16px; align-items:center; margin-bottom:15px; padding-right:26px}
.eld-shot{width:96px; height:96px; object-fit:cover; border-radius:11px;
  border:1px solid var(--line); background:#F3F4F4; flex:none}
.eld-z{font-size:10.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--muted);
  margin:0 0 3px; font-weight:600}
.el-dialog h4{font-size:20px; font-weight:600; letter-spacing:-.02em; margin:0 0 8px}
.eld-sym{font:600 13px var(--f-mono); color:var(--muted); vertical-align:middle;
  border:1px solid var(--line); border-radius:5px; padding:2px 6px; margin-left:5px}
.eld-chips{display:flex; gap:6px; flex-wrap:wrap}
.eld-chips span{font-size:11px; color:var(--ink2); background:var(--surface2);
  border:1px solid var(--line); border-radius:6px; padding:3px 8px}
.eld-lede{font-size:13.5px; line-height:1.6; color:var(--ink2); margin:0 0 10px}
.eld-lede b{color:var(--ink)}
.eld-warn{font-size:12.5px; line-height:1.55; color:var(--warn-ink); margin:0 0 10px;
  padding:8px 11px; background:var(--flag-soft); border-radius:8px}
.eld-uses{margin:0 0 12px; padding-top:11px; border-top:1px solid var(--line)}
.eld-h{font-size:10.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--muted);
  margin:0 0 6px; font-weight:600}
.eld-uses ul{margin:0; padding-left:17px; font-size:13px; color:var(--ink2); line-height:1.55}

/* The photograph note sits under the credit, at caption size. */
.eld-shows{font-size:11px; line-height:1.5; color:var(--muted); margin:7px 0 0}
.eld-shows b{color:var(--ink2); font-weight:600}

/* ──────────────────────────────────────────────────────────────────────────
   COMPANY LOGO BUTTONS
   ────────────────────────────────────────────────────────────────────────── */
.co-logo-btn{appearance:none; border:0; background:none; padding:0; margin:0; cursor:pointer;
  display:inline-flex; line-height:0; border-radius:4px}
.co-logo-btn img{transition:transform .16s var(--ease), box-shadow .16s var(--ease)}
.co-logo-btn:hover img{transform:scale(1.08); box-shadow:0 0 0 2px var(--accent)}
.co-logo-btn:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

/* ──────────────────────────────────────────────────────────────────────────
   COMPANY DIALOG
   ────────────────────────────────────────────────────────────────────────── */
.co-dialog{border:1px solid var(--line); border-radius:16px; background:var(--surface);
  color:var(--ink); padding:0; max-width:760px; width:calc(100% - 32px);
  max-height:calc(100vh - 48px); box-shadow:var(--shadow-lg); overflow:hidden}
.co-dialog::backdrop{background:rgba(10,14,20,.6); backdrop-filter:blur(3px)}
.cod-body{padding:20px 22px 18px; position:relative; overflow-y:auto;
  max-height:calc(100vh - 48px)}
.cod-close{position:absolute; top:13px; right:14px; appearance:none; border:0; background:none;
  font:400 24px/1 var(--f); color:var(--muted); cursor:pointer; padding:4px 7px; border-radius:7px;
  z-index:2}
.cod-close:hover{color:var(--ink); background:var(--surface2)}
.cod-head{padding-right:34px}
.cod-id{display:flex; align-items:center; gap:13px; margin-bottom:4px}
.cod-logo{width:40px; height:40px; object-fit:contain; background:#fff; border-radius:8px;
  padding:3px; box-shadow:0 0 0 1px rgba(23,32,42,.08); flex:none}
:root[data-theme="dark"] .cod-logo{box-shadow:0 0 0 1px rgba(255,255,255,.14)}
.co-dialog h4{font-size:21px; font-weight:600; letter-spacing:-.022em; margin:0}
.cod-tick{font:500 12px var(--f-mono); color:var(--muted); margin:3px 0 0; letter-spacing:.02em}
.cod-exch{display:inline-block; background:var(--surface2); border:1px solid var(--line);
  border-radius:5px; padding:1px 6px; margin-right:7px; color:var(--ink2)}

.cod-foot{font-size:11px; line-height:1.55; color:var(--muted); margin:14px 0 0;
  padding-top:11px; border-top:1px solid var(--line)}
.cod-foot a{color:var(--accent); text-decoration:none}
.cod-foot a:hover{text-decoration:underline}
.tradingview-widget-container,.tradingview-widget-container__widget{width:100%}
/* autosize charts need a height all the way down the container chain */
@media (max-width:640px){
  .cod-body{padding:16px 15px 14px}
  .co-dialog h4{font-size:18px}
}
@media (prefers-reduced-motion:reduce){
  .co-logo-btn img,}

/* Widget loading state, replaced when the TradingView iframe paints. */
.cod-loading{position:absolute; inset:0; z-index:0; display:flex; align-items:center;
  justify-content:center; margin:0; font-size:12px; color:var(--muted); pointer-events:none}
/* the widget stacks above the placeholder and hides it once it paints */

/* Fundamentals from the scheduled refresh, above the TradingView financials. */
.cod-stats{margin-top:14px}
.cod-h{font-size:11px; letter-spacing:.09em; text-transform:uppercase; color:var(--muted);
  margin:14px 0 8px; font-weight:600}
.cod-h span{letter-spacing:.02em; text-transform:none; font-weight:500; opacity:.8}
.cod-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(112px,1fr)); gap:0;
  border:1px solid var(--line); border-radius:10px; overflow:hidden}
.cod-grid>div{padding:9px 12px; border-right:1px solid var(--line); border-bottom:1px solid var(--line)}
.cod-grid>div span{display:block; font-size:10.5px; color:var(--muted); margin-bottom:2px}
.cod-grid>div b{font-size:14px; font-weight:600; letter-spacing:-.012em;
  font-variant-numeric:tabular-nums}
.cod-stamp{font-size:10.5px; color:var(--muted); margin:8px 0 0}

/* One box size across the dialog, so quote, chart and financials read as a set
   rather than three panels of different heights. */
.cod-desc{font-size:13.5px; line-height:1.6; color:var(--ink2); margin:10px 0 14px;
  padding-bottom:13px; border-bottom:1px solid var(--line)}

/* ──────────────────────────────────────────────────────────────────────────
   COMPANY DIALOG — the three widget boxes
   One rule, stated once. Earlier attempts left five overlapping declarations
   fighting over height, including a `height:100%` that resolved to auto and
   let the chart grow past the others.
   ────────────────────────────────────────────────────────────────────────── */
.cod-quote,.cod-chart,.cod-fund{
  height:300px; min-height:300px; max-height:300px;
  position:relative; overflow:hidden;
  border:1px solid var(--line); border-radius:10px;
  margin:0 0 12px}
.cod-fund{margin-bottom:0}
/* the widget fills its box and stacks above the loading placeholder */
.cod-quote>.tradingview-widget-container,.cod-chart>.tradingview-widget-container,.cod-fund>.tradingview-widget-container{position:relative; z-index:1; height:100%}
.cod-quote .tradingview-widget-container__widget,.cod-chart .tradingview-widget-container__widget,.cod-fund .tradingview-widget-container__widget{height:100%}
.cod-quote iframe,.cod-chart iframe,.cod-fund iframe{height:100%!important; display:block}
@media (max-width:640px){
  .cod-quote,.cod-chart,.cod-fund{height:260px; min-height:260px; max-height:260px}
}

/* Names and chips are buttons now, but must still read as text, not controls. */
button.chain-node,button.vr-name,button.co-name{appearance:none; background:none; border:0;
  font:inherit; color:inherit; text-align:left; cursor:pointer; padding:0}
button.chain-node{padding:inherit}
.vr-name.is-link,.co-name.co-link{color:var(--accent)}
.vr-name.is-link:hover,.co-name.co-link:hover{text-decoration:underline}
button.chain-node:focus-visible,button.vr-name:focus-visible,button.co-name:focus-visible{
  outline:2px solid var(--accent); outline-offset:2px; border-radius:4px}

/* Chokepoint marking on the stage index, without recolouring the stage below. */
.vj.is-choke{border-color:var(--amber); background:linear-gradient(var(--surface),var(--surface)) padding-box}
.vj.is-choke .vj-n{background:var(--amber-soft); color:var(--amber)}

/* ──────────────────────────────────────────────────────────────────────────
   CHOKEPOINTS AND CLICKABLE NAMES
   Amber belongs to the stage index, where the whole layer is visible at once.
   The stage boxes below carry the same information in their step label, so
   colouring them too only made the page louder without saying anything new.
   ────────────────────────────────────────────────────────────────────────── */
.chain-stage.is-choke{background:var(--surface); border-color:var(--line)}
.chain-stage.is-choke .cs-num{background:var(--stage,var(--accent)); color:#fff}
.chain-stage.is-choke .chain-step{color:var(--amber)}   /* the word, not the box */
.vj.is-choke{border-color:var(--amber)}
.vj.is-choke .vj-n{background:var(--amber-soft); color:var(--amber)}

/* A company name is a name first. Clickable or not, it reads the same; the
   affordance is the cursor and a hover underline, not a permanent colour that
   splits the list into two visual classes. */
.vr-name.is-link,.co-name.co-link{color:var(--ink)}
.vr-name.is-link:hover,.co-name.co-link:hover{color:var(--accent); text-decoration:underline}
.chain-node.is-link .cn-name{color:var(--ink)}
.chain-node.is-link:hover .cn-name{color:var(--accent)}

/* ──────────────────────────────────────────────────────────────────────────
   WHERE THE CHAIN IS DOMICILED
   A donut plus a flagged legend, replacing two bar charts — one of which
   measured the diagram rather than the industry.
   ────────────────────────────────────────────────────────────────────────── */
.chain-geo{margin-top:26px; padding-top:22px; border-top:1px solid var(--line)}
.dn-wrap{display:grid; grid-template-columns:minmax(180px,240px) minmax(0,1fr);
  gap:28px; align-items:center; margin:14px 0 4px}
.dn-chart svg{width:100%; height:auto; display:block; overflow:visible}
.dn-seg{stroke:var(--surface); stroke-width:1.5; transition:opacity .16s var(--ease)}
.dn-chart:hover .dn-seg{opacity:.45}
.dn-chart .dn-seg:hover{opacity:1}
.dn-total{fill:var(--ink); font:600 30px var(--f); letter-spacing:-.03em}
.dn-sub{fill:var(--muted); font:500 10px var(--f); letter-spacing:.09em; text-transform:uppercase}
.dn-legend{list-style:none; margin:0; padding:0; display:grid;
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:2px 18px}
.dn-legend li{display:grid; grid-template-columns:10px 20px minmax(0,1fr) auto auto;
  align-items:center; gap:8px; padding:5px 0; border-bottom:1px solid var(--line)}
.dn-legend li:last-child{border-bottom:0}
.dn-key{width:10px; height:10px; border-radius:3px}
.dn-flag{font-size:13px; line-height:1}
.dn-name{font-size:12.5px; color:var(--ink2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.dn-val{font:600 12.5px var(--f); color:var(--ink); font-variant-numeric:tabular-nums}
.dn-pct{font:500 11px var(--f-mono); color:var(--muted); min-width:34px; text-align:right}
@media (max-width:820px){
  .dn-wrap{grid-template-columns:1fr; gap:18px}
  .dn-chart{max-width:220px; margin:0 auto}
}
@media (prefers-reduced-motion:reduce){.dn-seg{transition:none}}

/* ──────────────────────────────────────────────────────────────────────────
   VALUE CHAIN — parallel branches and qualified chokepoints
   A layer is no longer one queue. Each branch is a chain in its own right,
   and a chokepoint has to state what it constrains before it earns the amber.
   ────────────────────────────────────────────────────────────────────────── */
.chain-branch{margin:26px 0 0}
.chain-branch:first-of-type{margin-top:18px}
.cb-head{border-left:3px solid var(--stage); padding:2px 0 2px 13px; margin:0 0 14px}
.cb-title{font-size:16px; font-weight:600; letter-spacing:-.016em; margin:0; color:var(--ink)}
.cb-sub{font-size:13.5px; line-height:1.55; color:var(--ink2); margin:4px 0 0; max-width:74ch}

/* One box per chain. A layer runs several in parallel and they are different
   subjects, not one sequence — the box is what says so at a glance. */
.vj-group{border:1px solid var(--line); border-radius:11px; background:var(--surface2);
  padding:13px 14px 14px}
.vj-group+.vj-group{margin-top:10px}
.vj-gh{display:flex; align-items:center; gap:8px; font-size:12.5px; font-weight:600;
  letter-spacing:-.01em; color:var(--ink2); margin:0 0 9px}
.vj-gn{display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px;
  border-radius:50%; background:var(--surface2); border:1px solid var(--line);
  font:600 10.5px var(--f-mono); color:var(--muted); flex:none}

.cq{margin:10px 0 12px; border:1px solid var(--line); border-radius:9px;
  background:var(--surface2); overflow:hidden}
.cq>summary{cursor:pointer; list-style:none; padding:9px 12px; font-size:12.5px;
  color:var(--ink2); display:flex; align-items:center; gap:9px}
.cq>summary::-webkit-details-marker{display:none}
.cq>summary:hover{color:var(--ink)}
.cq-tag{font:600 10px var(--f-mono); letter-spacing:.07em; text-transform:uppercase;
  color:var(--amber); border:1px solid var(--amber); border-radius:4px; padding:2px 6px; flex:none}
.cq[open]>summary{border-bottom:1px solid var(--line)}
.cq-grid{margin:0; padding:11px 13px 13px; display:grid; gap:8px 20px;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.cqr{display:grid; grid-template-columns:96px minmax(0,1fr); gap:10px; align-items:baseline}
.cqr dt{font:600 10.5px var(--f-mono); letter-spacing:.05em; text-transform:uppercase;
  color:var(--muted)}
.cqr dd{margin:0; font-size:12.5px; line-height:1.5; color:var(--ink2)}
@media(max-width:640px){ .cqr{grid-template-columns:1fr; gap:2px} }

/* ──────────────────────────────────────────────────────────────────────────
   THE ARCHITECTURE MAP — containment, not a stack
   The map shows two physical enclosures (the data centre and the machine)
   with the same layers appearing inside both, so it needs group boxes,
   nested cards at two type sizes, and four kinds of arrow that must stay
   distinguishable: physical supply, data up, models down, and the world.
   ────────────────────────────────────────────────────────────────────────── */
#mapsvg .mg-box{fill:none; stroke:var(--line2); stroke-width:1.4; stroke-dasharray:7 6}
#mapsvg .mg-label{fill:var(--muted); font:600 13px var(--f); letter-spacing:.08em;
  text-transform:uppercase}
#mapsvg .mg-panel{fill:var(--surface2); stroke:var(--line); stroke-width:1.2}
#mapsvg .mg-h{fill:var(--ink); font:600 15px var(--f); letter-spacing:-.012em}
#mapsvg .mg-note{fill:var(--muted); font:500 11.5px var(--f-mono); letter-spacing:.03em}
#mapsvg .mg-tag{fill:var(--muted); font:600 11px var(--f); letter-spacing:.09em;
  text-transform:uppercase}
#mapsvg .bt2{fill:var(--ink); font:600 16px var(--f); letter-spacing:-.014em}
#mapsvg .bt3{fill:var(--ink); font:600 14px var(--f); letter-spacing:-.012em}
#mapsvg .bs2{fill:var(--ink2); font:400 11.5px var(--f)}
#mapsvg .bn2{fill:var(--on-layer); font:600 10px var(--f)}
#mapsvg .encl-box{fill:var(--surface); fill-opacity:.5; stroke-width:2.2}

/* four arrow families, deliberately different in weight and dash */
#mapsvg .ln-s{stroke:var(--l3); stroke-width:1.6; fill:none}
#mapsvg .ln-i{stroke:var(--line2); stroke-width:1.5; fill:none}
#mapsvg .ln-d{stroke:var(--l7); stroke-width:1.6; fill:none; stroke-dasharray:5 4}
#mapsvg .ln-m{stroke:var(--l8); stroke-width:1.6; fill:none; stroke-dasharray:5 4}
#mapsvg .ln-g{stroke:var(--l9); stroke-width:1.6; fill:none; stroke-dasharray:5 4}
#mapsvg .lb-d{fill:var(--l7); font:500 11.5px var(--f)}
#mapsvg .lb-m2{fill:var(--l8); font:500 11.5px var(--f)}
#mapsvg .lb-g{fill:var(--l9); font:500 11.5px var(--f)}

/* the enclosure box must not swallow clicks meant for the cards inside it */
#mapsvg a.encl{pointer-events:none}
#mapsvg a.encl .encl-box,#mapsvg a.encl text,#mapsvg a.encl circle{pointer-events:auto}

/* ──────────────────────────────────────────────────────────────────────────
   DEPLOYMENT AND MARKETS
   The commercial system beside the ten layers. Reuses the report's card and
   table grammar; adds a numbered pipeline, a market grid and a per-layer
   value-capture list keyed to the layer palette.
   ────────────────────────────────────────────────────────────────────────── */
.dep-flow{list-style:none; margin:18px 0 0; padding:0; display:grid; gap:10px}
.dep-step{display:grid; grid-template-columns:34px minmax(0,1fr); gap:14px; align-items:start;
  background:var(--surface); border:1px solid var(--line); border-radius:9px; padding:14px 16px}
.ds-num{display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px;
  border-radius:50%; background:var(--surface2); border:1px solid var(--line2);
  font:600 12px var(--f-mono); color:var(--ink2)}
.ds-body h5{font-size:15px; font-weight:600; letter-spacing:-.014em; margin:3px 0 5px; color:var(--ink)}
.ds-body p{font-size:13.5px; line-height:1.58; color:var(--ink2); margin:0; max-width:82ch}

.dep-mkgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:14px; margin-top:18px}
.dep-mk{background:var(--surface); border:1px solid var(--line); border-radius:9px; padding:16px 18px}
.dep-mk h5{font-size:15px; font-weight:600; letter-spacing:-.014em; margin:0 0 6px; color:var(--ink)}
.dep-mk p{font-size:13px; line-height:1.55; color:var(--ink2); margin:0 0 11px}
.dep-tag{display:inline-block; font:600 10.5px var(--f-mono); letter-spacing:.05em;
  text-transform:uppercase; color:var(--muted); border:1px solid var(--line2);
  border-radius:4px; padding:3px 7px}

.dep-list{list-style:none; margin:12px 0 0; padding:0; display:grid; gap:8px}
.dep-list li{display:grid; grid-template-columns:220px minmax(0,1fr); gap:14px; align-items:baseline;
  border-bottom:1px solid var(--line); padding-bottom:8px}
.dep-list b{font-size:13.5px; color:var(--ink)}
.dep-list span{font-size:13px; color:var(--ink2); line-height:1.55}

.dep-caps{list-style:none; margin:18px 0 0; padding:0; display:grid; gap:9px}
.dep-cap{display:grid; grid-template-columns:32px minmax(0,1fr) auto; gap:14px; align-items:center;
  background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--stage);
  border-radius:9px; padding:13px 16px}
.dc-n{display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px;
  border-radius:50%; background:var(--stage); color:var(--on-layer); font:600 12px var(--f)}
.dc-body h5{font-size:14.5px; font-weight:600; letter-spacing:-.014em; margin:0 0 4px; color:var(--ink)}
.dc-body p{font-size:13px; line-height:1.55; color:var(--ink2); margin:0; max-width:78ch}
.dc-v{font:600 11px var(--f-mono); letter-spacing:.04em; text-transform:uppercase;
  color:var(--muted); text-align:right; white-space:nowrap}

.dep-avoid{margin:12px 0 16px; padding-left:20px}
.dep-avoid li{font-size:14px; line-height:1.6; color:var(--ink2); margin-bottom:5px}

@media(max-width:720px){
  .dep-list li{grid-template-columns:1fr; gap:2px}
  .dep-cap{grid-template-columns:32px minmax(0,1fr); row-gap:8px}
  .dc-v{grid-column:2; text-align:left}
}

/* A headline figure states when it was true and where it came from. */
.facts .fact-src{display:block; font-style:normal; font-size:11px; line-height:1.45;
  color:var(--muted); margin-top:6px; font-family:var(--f-mono); letter-spacing:.02em}

/* ──────────────────────────────────────────────────────────────────────────
   KEY ELEMENTS BY LAYER
   The materials view names materials; this names the elements doing the work
   inside them, with the applicability code and whether the element survives
   into the product. Layers with no intrinsic element set say so instead.
   ────────────────────────────────────────────────────────────────────────── */
.el-block{margin:14px 0 0}
.el-lead{font-size:14px; line-height:1.62; color:var(--ink2); margin:0 0 14px; max-width:84ch}
.el-none{font-size:13.5px; line-height:1.6; color:var(--ink2); margin:0 0 14px; max-width:84ch;
  background:var(--surface2); border:1px solid var(--line); border-left:3px solid var(--muted);
  border-radius:8px; padding:12px 15px}
.el-none b{color:var(--ink)}

.ei-deps{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px}
.ei-dep{display:inline-flex; align-items:center; gap:9px; background:var(--surface);
  border:1px solid var(--line); border-left:3px solid var(--stage); border-radius:8px;
  padding:8px 13px 8px 11px; font-size:13px; color:var(--ink2)}
.ei-n{display:inline-flex; align-items:center; justify-content:center; width:21px; height:21px;
  border-radius:50%; background:var(--stage); color:var(--on-layer); font:600 11px var(--f)}

.el-filter{display:flex; flex-wrap:wrap; align-items:center; gap:7px; margin:0 0 14px}
.elf-h{font:600 10.5px var(--f-mono); letter-spacing:.07em; text-transform:uppercase;
  color:var(--muted); margin-right:3px}
.elf{display:inline-flex; align-items:center; gap:7px; cursor:pointer; font-family:var(--f);
  font-size:12.5px; color:var(--ink2); background:var(--surface); border:1px solid var(--line);
  border-radius:20px; padding:5px 12px; transition:border-color .16s, color .16s, background .16s}
.elf:hover{color:var(--ink); border-color:var(--line2)}
.elf b{font:600 11px var(--f-mono); color:var(--muted)}
.elf span{font:600 11px var(--f-mono); color:var(--muted)}
.elf.is-on{background:var(--surface2); border-color:var(--accent); color:var(--ink)}
.elf.is-on b,.elf.is-on span{color:var(--accent)}

.el-grid{list-style:none; margin:0; padding:0; display:grid; gap:10px;
  grid-template-columns:repeat(auto-fit,minmax(330px,1fr))}
.elc{display:block}
/* .elc's display would otherwise outrank the browser's [hidden] rule, which is
   why the applicability filter appeared to do nothing. */
.elc[hidden]{display:none}
.elc-btn{display:grid; grid-template-columns:56px minmax(0,1fr); gap:13px; align-items:start;
  width:100%; text-align:left; cursor:pointer; font-family:var(--f);
  background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--stage);
  border-radius:9px; padding:12px 14px; transition:border-color .16s, background .16s}
.elc-btn:hover{background:var(--surface2); border-color:var(--line2); border-left-color:var(--stage)}
.elc-btn:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.elc-shot{position:relative; display:block; width:56px; height:56px; border-radius:7px;
  overflow:hidden; background:var(--surface2); border:1px solid var(--line)}
.elc-shot img{width:100%; height:100%; object-fit:cover; display:block}
.elc-sym{position:absolute; inset:auto 0 0 0; text-align:center; font:600 10px var(--f-mono);
  letter-spacing:.06em; color:var(--ink2); background:var(--panel-a); padding:2px 0}
.elc-head{display:flex; align-items:center; flex-wrap:wrap; gap:7px; margin-bottom:5px}
.elc-head b{font-size:14px; font-weight:600; letter-spacing:-.012em; color:var(--ink)}
.elc-code{font:600 9.5px var(--f-mono); letter-spacing:.06em; color:var(--muted);
  border:1px solid var(--line2); border-radius:4px; padding:1px 5px; cursor:help}
.elc-keep{font:600 9.5px var(--f-mono); letter-spacing:.05em; text-transform:uppercase;
  border-radius:4px; padding:1px 6px}
.elc-keep.is-kept{color:var(--bull-ink); background:var(--bull-soft)}
.elc-keep.is-process{color:var(--warn-ink); background:var(--flag-soft)}
.elc-keep.is-trace{color:var(--muted); background:var(--track)}
.elc-why{display:block; font-size:13px; line-height:1.55; color:var(--ink2)}
.elc-also{display:block; margin-top:7px; font:500 11px var(--f-mono); letter-spacing:.03em;
  color:var(--muted)}
@media(max-width:640px){ .el-grid{grid-template-columns:1fr} }

/* An element opens to say which layers use it, and for what. */
.eld-layers{list-style:none; margin:0; padding:0; display:grid; gap:6px}
.eld-layers li{margin:0}
.eld-layers a{display:grid; grid-template-columns:22px minmax(0,1fr); gap:9px 10px;
  align-items:baseline; text-decoration:none; color:inherit;
  background:var(--surface2); border:1px solid var(--line); border-left:3px solid var(--stage);
  border-radius:7px; padding:8px 11px}
.eld-layers a:hover{border-color:var(--line2); background:var(--surface3)}
.eldl-n{display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px;
  border-radius:50%; background:var(--stage); color:var(--on-layer); font:600 10.5px var(--f)}
.eld-layers b{font-size:13px; font-weight:600; color:var(--ink); letter-spacing:-.012em}
.eld-layers a>span:last-child{grid-column:2; font-size:12px; line-height:1.5; color:var(--ink2)}

/* ──────────────────────────────────────────────────────────────────────────
   THE PHYSICAL WORLD
   Vector, in the same family as the layer marks, but coloured and carrying
   more detail — it is the one thing on the map nobody designed.
   ────────────────────────────────────────────────────────────────────────── */
:root{
  --globe-sea:#2E7FC4; --globe-land:#4E9E62; --globe-ice:#F2F7FA;
  --globe-line:rgba(255,255,255,.36); --globe-edge:#1B5C93; --globe-cloud:#FFFFFF;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --globe-sea:#2C6FA6; --globe-land:#4B9159; --globe-ice:#E4EDF4;
    --globe-line:rgba(255,255,255,.28); --globe-edge:#7FB6E2; --globe-cloud:#F4F8FB;
  }
}
:root[data-theme="dark"]{
  --globe-sea:#2C6FA6; --globe-land:#4B9159; --globe-ice:#E4EDF4;
  --globe-line:rgba(255,255,255,.28); --globe-edge:#7FB6E2; --globe-cloud:#F4F8FB;
}
#mapsvg .g-sea{fill:var(--globe-sea)}
#mapsvg .g-land{fill:var(--globe-land); stroke:var(--globe-edge); stroke-width:.7;
  stroke-linejoin:round; opacity:.96}
#mapsvg .g-ice{fill:var(--globe-ice); opacity:.9}
#mapsvg .g-cloud{fill:var(--globe-cloud); opacity:.3}
#mapsvg .g-grid{fill:none; stroke:var(--globe-line); stroke-width:.8}
#mapsvg .g-edge{fill:none; stroke:var(--globe-edge); stroke-width:1.9}
#mapsvg .worldnode{cursor:pointer}
#mapsvg .worldnode:hover .g-edge{stroke-width:2.6}
#mapsvg .globe{transition:transform .2s var(--ease)}

/* primary-source lines: always legible, since nothing is bought here */
#mapsvg .wl,#mapsvg .wl2{opacity:.6}
#mapsvg .lb-w{fill:var(--muted); font:500 12px var(--f)}


/* The map's reading panel gives width back to the drawing: the schematic is
   the thing being read, and the panel is a caption for it. */
.dia-shell.is-map .dia-info{padding:12px 13px 13px}
.dia-shell.is-map .dia-info h4{font-size:13.5px; margin-bottom:7px; line-height:1.3}
.dia-shell.is-map .dia-info .mi-eyebrow{font-size:9.5px; margin-bottom:4px}
.dia-shell.is-map .dia-info .mi-lede{font-size:11.5px; line-height:1.5}
.dia-shell.is-map .dia-info .mi-choke{font-size:10.5px; line-height:1.45; margin-top:9px}
.dia-shell.is-map .dia-info .mi-hint{font-size:10px; line-height:1.42; margin-top:10px}
.dia-shell.is-map .dia-info .mi-more{font-size:10.5px; margin-top:10px}
.dia-shell.is-map .dia-info .chip{font-size:10.5px; margin-bottom:8px}

/* ──────────────────────────────────────────────────────────────────────────
   ENVIRONMENTAL IMPACT
   Built to be filled in. Every claim carries how well it is currently
   measured, because in this field that is usually the more interesting fact.
   ────────────────────────────────────────────────────────────────────────── */
.env-st{font:600 9.5px var(--f-mono); letter-spacing:.05em; text-transform:uppercase;
  border-radius:4px; padding:2px 7px; white-space:nowrap; flex:none}
.env-st.is-measured{color:var(--bull-ink); background:var(--bull-soft)}
.env-st.is-partial{color:var(--amber); background:var(--amber-soft)}
.env-st.is-poor{color:var(--warn-ink); background:var(--flag-soft)}

.env-bds{display:grid; gap:11px; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); margin-bottom:8px}
.env-bd{background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:15px 17px}
.env-bd h5{font-size:14.5px; font-weight:600; letter-spacing:-.014em; margin:0 0 7px; color:var(--ink)}
.env-bd p{margin:0; font-size:13.5px; line-height:1.6; color:var(--ink2)}

.env-fcs{display:grid; gap:11px; grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.env-fc{background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:15px 17px}
.env-fc-h{display:flex; align-items:center; gap:10px; margin-bottom:8px}
.env-fc-h h5{font-size:15px; font-weight:600; letter-spacing:-.014em; margin:0; color:var(--ink)}
.env-fc p{margin:0; font-size:13.5px; line-height:1.6; color:var(--ink2)}
.env-metric{margin-top:9px !important; font-size:12.5px !important; color:var(--muted) !important}
.env-metric b{font:600 10px var(--f-mono); letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted); margin-right:7px}

.env-list{display:grid; gap:9px}
.env-layer{border:1px solid var(--line); border-left:3px solid var(--stage);
  border-radius:11px; background:var(--surface)}
.env-layer summary{display:flex; align-items:center; gap:11px; cursor:pointer; padding:13px 16px;
  list-style:none}
.env-layer summary::-webkit-details-marker{display:none}
.env-layer summary::after{content:"+"; margin-left:auto; color:var(--muted); font:400 17px var(--f-mono); flex:none}
.env-layer[open] summary::after{content:"\2212"}
.env-layer summary:hover{background:var(--surface2)}
.env-n{display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px;
  border-radius:50%; background:var(--stage); color:var(--on-layer); font:600 11px var(--f); flex:none}
.env-layer summary b{font-size:14.5px; font-weight:600; letter-spacing:-.012em; color:var(--ink); flex:none}
.env-sum{font-size:13px; color:var(--muted); min-width:0; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap}
.env-body{padding:0 17px 17px; border-top:1px solid var(--line)}
.env-lede{font-size:14px; line-height:1.62; color:var(--ink2); margin:14px 0 15px; max-width:84ch}
.env-cols{display:grid; gap:14px 26px; grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.env-ch{font:600 10.5px var(--f-mono); letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted); margin:0 0 7px}
.env-col ul{margin:0; padding-left:17px}
.env-col li{font-size:13px; line-height:1.55; color:var(--ink2); margin-bottom:5px}
.env-bad{margin:15px 0 0; font-size:13px; line-height:1.58; color:var(--ink2);
  background:var(--surface2); border:1px solid var(--line); border-radius:8px; padding:11px 14px}
.env-bad b{color:var(--ink)}

.env-open{list-style:none; margin:0; padding:0; display:grid; gap:9px}
.env-open li{background:var(--surface); border:1px solid var(--line); border-radius:10px;
  padding:13px 16px}
.env-open b{display:block; font-size:14px; font-weight:600; letter-spacing:-.012em;
  color:var(--ink); margin-bottom:5px}
.env-open span{font-size:13.5px; line-height:1.58; color:var(--ink2)}
@media(max-width:700px){ .env-sum{display:none} }



/* Constraint commentary, carried on the element it constrains. */
.elc-note{display:block; margin-top:8px; padding:8px 10px; border-radius:7px;
  background:var(--surface2); border:1px solid var(--line);
  font-size:12px; line-height:1.5; color:var(--ink2)}
.elc-note b{display:block; font-size:12px; font-weight:600; color:var(--ink); margin-bottom:2px}
.elc-chips{display:flex; gap:6px; flex-wrap:wrap; margin-top:6px}

.vj-group+.vj-group{margin-top:10px}
.ei-notes{display:grid; gap:8px; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); margin-top:12px}
.ei-notes .elc-note{margin-top:0}

/* ──────────────────────────────────────────────────────────────────────────
   THE WIDER MARKET MAP
   Named entries in a stage carry an argument; these carry coverage. Kept
   collapsed and denser so the chain still reads as a chain.
   ────────────────────────────────────────────────────────────────────────── */
.mkt{margin:10px 0 0; border:1px solid var(--line); border-radius:9px;
  background:var(--surface2); overflow:hidden}
.mkt>summary{cursor:pointer; list-style:none; padding:9px 12px; font-size:12.5px;
  color:var(--ink2); display:flex; align-items:center; gap:9px}
.mkt>summary::-webkit-details-marker{display:none}
.mkt>summary:hover{color:var(--ink)}
.mkt>summary::after{content:"+"; margin-left:auto; color:var(--muted); font:400 15px var(--f-mono)}
.mkt[open]>summary::after{content:"\2212"}
.mkt[open]>summary{border-bottom:1px solid var(--line)}
.mkt-n{font:600 10.5px var(--f-mono); color:var(--accent); background:var(--accent-soft);
  border-radius:4px; padding:2px 7px; flex:none}
.mkt-list{list-style:none; margin:0; padding:11px 12px; display:flex; flex-wrap:wrap; gap:6px}
.mkt-list .chain-node{font-size:12px}
.mkt-note{margin:0; padding:0 12px 12px; font-size:11.5px; line-height:1.5; color:var(--muted)}
.mkt-note code{font:500 11px var(--f-mono); color:var(--ink2)}

/* Said plainly when the stored set does not cover a company. */
.cod-nodata{margin:0 0 14px; padding:11px 13px; border-radius:8px;
  background:var(--surface2); border:1px solid var(--line);
  font-size:12.5px; line-height:1.55; color:var(--ink2)}
.cod-nodata b{color:var(--ink)}

/* ──────────────────────────────────────────────────────────────────────────
   THE WORLD AND THE MACHINE — arrow colours
   .ln-a and .lb-a are older classes meaning "the accented flow", from the map
   this one replaced. On the new map the two arrows they carry have owners:
   actuators belong to the machine, sensors to the physical world. Left as they
   were, the actuator arrow drew a blue line under a green arrowhead and the
   sensor arrow a grey line under a blue one.
   ────────────────────────────────────────────────────────────────────────── */
#mapsvg .ln-a{stroke:var(--l10); stroke-width:1.7; fill:none}
#mapsvg .lb-a{fill:var(--l10)}
#mapsvg .ln-w{stroke:var(--accent); stroke-width:1.7; fill:none}
#mapsvg .lb-wf{fill:var(--accent); font:500 11px var(--f)}

/* The world's two exchanges with the machine stay legible without hovering:
   they are the loop the whole report is about, not a detail to discover. */
#mapsvg text.lb-a,#mapsvg text.lb-wf{opacity:1}

/* Sub-groups inside the data centre: what is made of metal, and what is made
   of information. Lighter than the outer group boxes so the hierarchy reads
   enclosure → division → layer rather than three competing boxes. */
#mapsvg .mg-sub{fill:none; stroke:var(--line2); stroke-width:1.1; stroke-dasharray:4 5; opacity:.75}
#mapsvg .mg-sublabel{fill:var(--muted); font:600 11px var(--f); letter-spacing:.07em;
  text-transform:uppercase}

/* Supply constraints live in the element dialog now, not on the card. The card
   stays a compact index entry; the detail is one click away. */
.eld-cons{list-style:none; margin:0; padding:0; display:grid; gap:8px}
.eld-cons li{background:var(--surface2); border:1px solid var(--line); border-radius:8px;
  padding:10px 12px}
.eld-cons b{font-size:13px; font-weight:600; color:var(--ink); margin-right:8px}
.eld-c-layer{font:600 10px var(--f-mono); letter-spacing:.05em; text-transform:uppercase;
  color:var(--muted); border:1px solid var(--line2); border-radius:4px; padding:1px 6px}
.eld-c-why{display:block; margin-top:6px; font-size:12.5px; line-height:1.55; color:var(--ink2)}
.eld-c-chips{display:flex; gap:6px; flex-wrap:wrap; margin-top:8px}

/* The layer marks are the quickest way to tell one box from another, so they
   are drawn a size up from where they started. */
#mapsvg .lic{stroke-width:2.1}

/* ──────────────────────────────────────────────────────────────────────────
   HOW A LAYER IS MEASURED
   Formulas are HTML, not typeset maths — the report loads no remote scripts,
   and a formula the reader can select and copy beats one that needs a library
   to render at all. Monospace, generous line height, wraps on narrow screens.
   ────────────────────────────────────────────────────────────────────────── */
.mtr{margin:28px 0 0}
.mtr-primary{background:var(--surface); border:1px solid var(--line);
  border-left:3px solid var(--stage); border-radius:10px; padding:15px 17px; margin:14px 0 0}
.mtr-eyebrow{font:600 10px var(--f-mono); letter-spacing:.09em; text-transform:uppercase;
  color:var(--muted); margin:0 0 6px}
.mtr-primary h5{font-size:15.5px; font-weight:600; letter-spacing:-.014em; margin:0 0 11px; color:var(--ink)}
.mtr-w{margin:11px 0 0; font-size:13.5px; line-height:1.62; color:var(--ink2)}
.mtr-w b{color:var(--ink)}
.mtr-h{font-size:13px; font-weight:600; letter-spacing:-.01em; color:var(--ink2); margin:20px 0 8px}

.fml{display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 12px; margin:10px 0}
.fml-t{font:600 10.5px var(--f-mono); letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted); flex:none}
.fml code,.dat code{font:500 12.5px var(--f-mono); color:var(--ink); background:var(--surface2);
  border:1px solid var(--line); border-radius:6px; padding:7px 10px; line-height:1.75;
  display:inline-block; max-width:100%; overflow-wrap:anywhere}
.dat code{font-size:11.5px; padding:3px 6px; line-height:1.5; background:none; border:0}
.fml.is-lead code{font-size:13px; display:block}
.fml-u{font:500 11.5px var(--f-mono); color:var(--accent); flex:none}
.fml code sub{font-size:.72em; opacity:.85}

.eq-read{display:grid; gap:10px; margin:12px 0 0}
.eq-card{border:1px solid color-mix(in srgb,var(--stage) 34%,var(--line));
  border-radius:10px; background:linear-gradient(180deg,
  color-mix(in srgb,var(--stage) 8%,var(--surface2)),var(--surface2));
  padding:11px 12px}
.eq-label{margin:0 0 8px; font:650 10.5px var(--f-mono); letter-spacing:.08em;
  text-transform:uppercase; color:var(--stage)}
.eq-frac{display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  gap:10px; align-items:stretch}
.eq-frac>div{border:1px solid var(--line); border-radius:8px; padding:9px 10px;
  background:color-mix(in srgb,var(--surface) 78%,transparent)}
.eq-frac span{display:block; margin:0 0 5px; font-size:11.5px; line-height:1.35;
  color:var(--muted)}
.eq-frac b{align-self:center; color:var(--ink2); font:600 11px var(--f-mono);
  letter-spacing:.06em; text-transform:uppercase}
.eq-card code,.eq-frac code{font:500 12px var(--f-mono); color:var(--ink);
  background:transparent; border:0; padding:0; line-height:1.55; overflow-wrap:anywhere}

.mtr-worked{margin:16px 0 0; background:var(--surface2); border:1px solid var(--line);
  border-left:3px solid var(--stage); border-radius:9px; padding:13px 16px}
.mtr-worked h5{font-size:15px; font-weight:650; letter-spacing:-.01em; color:var(--ink);
  margin:0 0 12px}
.mtr-worked h5 span{display:inline-flex; margin-left:8px; vertical-align:middle;
  font:600 10px var(--f-mono); letter-spacing:.06em; text-transform:uppercase;
  color:var(--stage); border:1px solid color-mix(in srgb,var(--stage) 38%,var(--line));
  border-radius:999px; padding:3px 7px}
.calc-inputs{border:1px solid var(--line); border-radius:9px; padding:10px 12px;
  background:var(--surface); margin:0 0 12px}
.mtr-worked ul{margin:0; padding-left:18px}
.mtr-worked li{font-size:13px; line-height:1.55; color:var(--ink2); margin-bottom:3px}
.calc-steps{list-style:none; counter-reset:calc; margin:0; padding:0; display:grid; gap:8px}
.calc-steps li{counter-increment:calc; display:grid; grid-template-columns:auto minmax(0,1fr);
  gap:6px 10px; align-items:start; border:1px solid var(--line); border-radius:9px;
  background:color-mix(in srgb,var(--surface) 78%,transparent); padding:10px 11px}
.calc-steps li::before{content:counter(calc); display:grid; place-items:center;
  width:24px; height:24px; border-radius:999px; background:var(--stage); color:var(--bg);
  font:700 12px var(--f-mono)}
.calc-steps span{font-size:12.5px; font-weight:650; color:var(--ink)}
.calc-steps code{grid-column:2; width:max-content; max-width:100%;
  font:500 12.5px var(--f-mono); color:var(--ink); background:var(--surface2);
  border:1px solid var(--line); border-radius:7px; padding:6px 8px; overflow-wrap:anywhere}
.calc-steps em{grid-column:2; color:var(--muted); font-size:12.5px; line-height:1.45}
.mtr-r{margin:10px 0 0; font:500 13px var(--f-mono); color:var(--ink);
  background:var(--surface); border:1px solid var(--line); border-radius:7px;
  padding:9px 12px; overflow-wrap:anywhere}

.mfr{margin:18px 0 0; border:1px solid var(--line); border-radius:10px; background:var(--surface2)}
.mfr>summary{cursor:pointer; list-style:none; padding:11px 14px; font-size:13px;
  font-weight:600; color:var(--ink2); display:flex; align-items:center}
.mfr>summary::-webkit-details-marker{display:none}
.mfr>summary::after{content:"+"; margin-left:auto; color:var(--muted); font:400 16px var(--f-mono)}
.mfr[open]>summary::after{content:"\2212"}
.mfr[open]>summary{border-bottom:1px solid var(--line)}
.mfr>summary:hover{color:var(--ink)}
.mfr-body{padding:14px 16px 16px}
.mfr-w{margin:6px 0 14px; font-size:13px; line-height:1.6; color:var(--ink2)}
.mfr-h{font-size:12.5px; font-weight:600; color:var(--ink); margin:16px 0 7px}
.mfr-guards{margin:0; padding-left:18px}
.mfr-guards li{font-size:13px; line-height:1.55; color:var(--ink2); margin-bottom:4px}
.mfr-warn{margin:14px 0 0; font-size:13px; line-height:1.58; color:var(--ink2);
  background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--amber);
  border-radius:7px; padding:10px 13px}
@media(max-width:720px){
  .eq-frac{grid-template-columns:1fr}
  .eq-frac b{text-align:left}
}

/* The headline is short enough to hold one line at any width the report is
   read at, so it should not break where a browser happens to choose. */
.h1-oneline{white-space:nowrap}
@media(max-width:820px){ .h1-oneline{white-space:normal} }

/* ──────────────────────────────────────────────────────────────────────────
   ONE CHAIN AT A TIME
   The index shows every chain; the companies below show the one selected.
   ────────────────────────────────────────────────────────────────────────── */
.vj-group{transition:border-color .16s var(--ease), background .16s var(--ease)}
.vj-group.is-on{border-color:var(--accent); background:var(--surface)}
.vj-gh{appearance:none; width:100%; text-align:left; cursor:pointer; font-family:var(--f);
  background:none; border:0; padding:0; margin:0 0 9px;
  display:flex; align-items:center; gap:9px; font-size:12.5px; font-weight:600;
  letter-spacing:-.01em; color:var(--ink2)}
.vj-gh:hover{color:var(--ink)}
.vj-gh:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:5px}
.vj-group.is-on .vj-gh{color:var(--ink)}
.vj-gt{min-width:0}
.vj-gc{font:600 10px var(--f-mono); letter-spacing:.05em; text-transform:uppercase;
  color:var(--muted); flex:none}
.vj-gx{margin-left:auto; flex:none; width:15px; height:15px; position:relative}
.vj-gx::before,.vj-gx::after{content:""; position:absolute; background:var(--muted);
  transition:opacity .16s var(--ease)}
.vj-gx::before{inset:6.5px 1px auto 1px; height:2px}
.vj-gx::after{inset:1px 6.5px auto 6.5px; height:13px; width:2px}
.vj-group.is-on .vj-gx::after{opacity:0}
.vj-group.is-on .vj-gx::before{background:var(--accent)}

/* only the chosen chain's stages are in the document flow */
.chain-branch{display:none}
.chain-branch.is-on{display:block}

/* ══════════════════════════════════════════════════════════════════════════
   V10 — site-wide visual upgrade, aligned to the atlas
   The atlas now sets the standard: deep technical atmosphere, luminous layer
   colour, dense working surfaces and restrained glass. This final layer pulls
   the older report chrome into that same visual system without changing copy.
   ══════════════════════════════════════════════════════════════════════════ */
:root{
  color-scheme:light;
  --nav-h:68px;
  --bg:#EAF0F6; --surface:#F8FAFC; --surface2:#EDF3F8; --surface3:#E1E9F1;
  --ink:#0E1824; --ink2:#405065; --muted:#69798B;
  --line:#C9D4E0; --line2:#9BAFC2;
  --accent:#2D6BFF; --accent-d:#174FDC; --accent-soft:#DFE9FF;
  --panel-a:rgba(248,250,252,.78);
  --glass:rgba(248,250,252,.72);
  --glass-strong:rgba(255,255,255,.88);
  --chrome:rgba(234,240,246,.82);
  --chrome-line:rgba(92,115,140,.28);
  --shadow-sm:0 1px 0 rgba(255,255,255,.72) inset, 0 12px 34px rgba(32,49,72,.08);
  --shadow-lg:0 1px 0 rgba(255,255,255,.62) inset, 0 28px 90px rgba(20,34,54,.16);
  --track:rgba(14,24,36,.085);
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#05101B; --surface:#0B1825; --surface2:#102435; --surface3:#173348;
  --ink:#EFF7FF; --ink2:#B9C9D8; --muted:#8194A8;
  --line:#1F3A51; --line2:#3C607B;
  --accent:#6ECFFF; --accent-d:#9BE1FF; --accent-soft:#0D3447;
  --panel-a:rgba(8,20,32,.78);
  --glass:rgba(8,20,32,.68);
  --glass-strong:rgba(12,28,43,.88);
  --chrome:rgba(5,16,27,.82);
  --chrome-line:rgba(125,207,255,.22);
  --shadow-sm:0 1px 0 rgba(255,255,255,.055) inset, 0 14px 42px rgba(0,0,0,.28);
  --shadow-lg:0 1px 0 rgba(255,255,255,.07) inset, 0 34px 110px rgba(0,0,0,.48);
  --track:rgba(239,247,255,.10);
}

html{background:var(--bg)}
body{
  background:
    linear-gradient(180deg,rgba(255,255,255,.62) 0%,rgba(255,255,255,0) 260px),
    linear-gradient(135deg,rgba(45,107,255,.11),rgba(46,127,110,.07) 38%,rgba(164,97,0,.08) 78%,rgba(45,107,255,.04)),
    var(--bg);
}
:root[data-theme="dark"] body{
  background:
    linear-gradient(180deg,rgba(5,16,27,.16),rgba(5,16,27,.82) 360px,var(--bg)),
    linear-gradient(135deg,rgba(110,207,255,.12),rgba(240,180,93,.06) 45%,rgba(127,192,122,.08)),
    var(--bg);
}
:root[data-theme="dark"] body::before{opacity:.38; filter:saturate(.95) contrast(1.06)}
:root[data-theme="dark"] body::after{background:linear-gradient(180deg,
  rgba(5,16,27,.16) 0%, rgba(5,16,27,.54) 42%, var(--bg) 100%)}

nav{
  height:68px; background:var(--chrome); border-bottom:1px solid var(--chrome-line);
  backdrop-filter:blur(22px) saturate(1.24);
}
.nav-in{padding:0 28px; gap:16px}
.brand{
  align-items:center; gap:10px; height:38px; padding:0 13px 0 10px;
  border:1px solid var(--chrome-line); border-radius:999px;
  background:linear-gradient(180deg,var(--glass-strong),var(--glass));
  box-shadow:var(--shadow-sm); font-weight:650; letter-spacing:.08em;
  text-transform:uppercase; font-size:12px;
}
.brand i{
  width:10px; height:10px; background:linear-gradient(135deg,var(--l1),var(--accent));
  box-shadow:0 0 18px color-mix(in srgb,var(--accent) 42%,transparent);
}
.navlinks{
  flex:1; justify-content:center; gap:4px; padding:5px;
  border-color:var(--chrome-line); border-radius:999px;
  background:linear-gradient(180deg,var(--glass-strong),var(--glass));
  box-shadow:var(--shadow-sm);
}
.navlinks a,.navlinks button{
  border-radius:999px; padding:8px 14px; font-size:12.5px; font-weight:650;
  letter-spacing:.015em; color:var(--ink2);
}
.navlinks a:hover,.navlinks button:hover{
  background:color-mix(in srgb,var(--accent-soft) 58%,transparent); color:var(--ink);
}
.navlinks a[aria-current="page"],.navlinks button[aria-selected="true"]{
  color:var(--on-layer); background:linear-gradient(135deg,var(--accent),var(--l9));
  box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 34%,transparent),
    0 10px 26px color-mix(in srgb,var(--accent) 22%,transparent);
}
:root[data-theme="dark"] .navlinks a[aria-current="page"],
:root[data-theme="dark"] .navlinks button[aria-selected="true"]{color:#03101B}
.theme-toggle{
  height:38px; border-radius:999px; border-color:var(--chrome-line);
  background:linear-gradient(180deg,var(--glass-strong),var(--glass));
  box-shadow:var(--shadow-sm); color:var(--ink2); font-weight:650;
}
.theme-toggle:hover{color:var(--ink); border-color:color-mix(in srgb,var(--accent) 58%,var(--line))}

.main-view{inset:68px 0 0; padding:24px 0}
.main-view>.wrap{max-width:1680px}
.landing-rail{
  border:1px solid var(--chrome-line); border-radius:22px; padding:24px 28px;
  background:linear-gradient(135deg,var(--glass-strong),var(--glass));
  box-shadow:var(--shadow-lg); margin-bottom:22px; position:relative; overflow:hidden;
}
.landing-rail::after{
  content:""; position:absolute; inset:auto 22px 0 22px; height:1px;
  background:linear-gradient(90deg,transparent,var(--accent),var(--l1),transparent);
  opacity:.55;
}
.landing-rail h1{
  max-width:none; font-size:clamp(34px,4.2vw,68px); line-height:.96;
  letter-spacing:-.05em;
}
.landing-rail .lede{font-size:17px; max-width:70ch; color:var(--ink2); margin-top:2px}

#overview .dia-grid{gap:22px}
#overview .dia,#overview #cx-matrix,.card,.project-chapters,#stack .rail,.tw,.cw,.figwrap,
.block,.verdict,.chain-stage,.material-hero,.risk-scorecard,.risk-item,.env-bd,.env-fc,
.env-layer,.env-open li,.mkt,.mtr-primary,.mtr-worked,.mfr{
  border-color:var(--chrome-line);
  background:linear-gradient(180deg,var(--glass-strong),var(--glass));
  box-shadow:var(--shadow-sm);
}
#overview .dia:first-child{
  padding:18px 20px 20px; box-shadow:var(--shadow-lg);
  background:linear-gradient(180deg,rgba(255,255,255,.86),rgba(248,250,252,.70));
}
:root[data-theme="dark"] #overview .dia:first-child{
  background:linear-gradient(180deg,rgba(10,25,39,.86),rgba(8,20,32,.68));
}
#overview .dia h3,#overview #cx-matrix h4{
  font-size:22px; letter-spacing:-.026em; color:var(--ink);
}
#overview .dia .d-sub,#overview .dia .d-cap,#overview #cx-matrix .cq,
#overview #cx-matrix figcaption{color:var(--ink2)}
#overview .dia .d-cap{
  background:color-mix(in srgb,var(--surface2) 58%,transparent);
  border:1px solid color-mix(in srgb,var(--line) 72%,transparent);
  border-radius:12px; padding:12px 14px; margin-top:12px;
}
#overview #cx-matrix{
  padding:20px 22px 22px;
  background:
    linear-gradient(135deg,color-mix(in srgb,var(--surface) 92%,transparent),
      color-mix(in srgb,var(--surface2) 78%,transparent));
}
#overview #cx-matrix .dia-shell{
  grid-template-columns:minmax(360px,1.08fr) minmax(320px,.92fr);
  gap:22px; align-items:stretch;
}
#overview #cx-matrix .dia-chart{
  border:1px solid var(--chrome-line); border-radius:16px; padding:14px;
  background:linear-gradient(180deg,var(--glass-strong),var(--glass));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.42);
}
:root[data-theme="dark"] #overview #cx-matrix .dia-chart{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 0 34px rgba(85,186,210,.08);
}
#overview #cx-matrix svg .gr{stroke:color-mix(in srgb,var(--line2) 42%,transparent)}
#overview #cx-matrix .mx-dot{
  filter:drop-shadow(0 0 10px color-mix(in srgb,var(--mxc,var(--accent)) 42%,transparent));
  stroke:color-mix(in srgb,var(--surface) 82%,transparent); stroke-width:2;
}
#overview #cx-matrix .mx-pt.on .mx-dot{
  filter:drop-shadow(0 0 14px var(--mxc,var(--accent)));
  stroke:var(--ink);
}
#overview #cx-matrix .dia-info{
  border-color:var(--chrome-line); border-radius:16px;
  background:linear-gradient(180deg,var(--glass-strong),var(--glass));
  box-shadow:var(--shadow-sm);
}
#overview #cx-matrix .mx-scores span{
  border-color:var(--chrome-line);
  background:color-mix(in srgb,var(--surface2) 72%,transparent);
  border-radius:999px;
}
#overview #cx-matrix .mx-watch{
  border-radius:0 12px 12px 0;
  background:color-mix(in srgb,var(--surface2) 58%,transparent);
  padding:10px 12px;
}

#stack>.wrap,#projects>.wrap{gap:18px}
#stack .sec-head,#projects>.wrap>.sec-head{
  border:1px solid var(--chrome-line); border-radius:18px; padding:18px 20px;
  background:linear-gradient(135deg,var(--glass-strong),var(--glass));
  box-shadow:var(--shadow-sm); align-items:center;
}
#stack .sec-head h1,#stack .sec-head h2,#projects>.wrap>.sec-head h1,
#projects>.wrap>.sec-head h2{
  font-size:clamp(24px,2.2vw,34px); letter-spacing:-.034em; white-space:normal;
}
#stack .sec-head p,#projects>.wrap>.sec-head p{font-size:13.5px; color:var(--ink2)}
#stack .stack{gap:18px; grid-template-columns:282px minmax(0,1fr)}
#stack .rail{
  padding:10px; border-radius:18px; background:linear-gradient(180deg,var(--glass-strong),var(--glass));
}
#stack .tab{
  border:1px solid transparent; border-left:4px solid transparent; border-radius:12px;
  padding:13px 12px; min-height:52px; color:var(--ink2);
}
#stack .tab:hover{background:color-mix(in srgb,var(--surface3) 55%,transparent); color:var(--ink)}
#stack .tab[aria-selected="true"]{
  background:linear-gradient(135deg,var(--surface),var(--surface2));
  border-color:var(--chrome-line); box-shadow:0 10px 26px rgba(0,0,0,.08);
}
:root[data-theme="dark"] #stack .tab[aria-selected="true"]{box-shadow:0 12px 34px rgba(0,0,0,.26)}
#stack .card{
  border-radius:18px; border-color:var(--chrome-line);
  background:linear-gradient(180deg,var(--glass-strong),var(--glass));
  box-shadow:var(--shadow-lg);
}
.layer-head{
  padding:22px 26px 16px; border-bottom:1px solid color-mix(in srgb,var(--line) 64%,transparent);
}
.layer-index,.mtr-eyebrow,.mfr>summary,.chain-step,.env-ch{letter-spacing:.055em}
.layer-headline h3{font-size:clamp(22px,2vw,30px); letter-spacing:-.03em}
.layer-score{
  background:color-mix(in srgb,var(--surface2) 78%,transparent);
  border-color:var(--chrome-line); border-radius:999px; padding:9px 13px;
}
.layer-modes{
  padding:0 24px; background:color-mix(in srgb,var(--surface2) 42%,transparent);
}
.layer-mode{padding:11px 13px 12px; border-bottom-width:3px; font-size:13px}
.layer-pane{padding:22px 26px 30px}
.overview-lede{gap:22px}
.choke-card,.tab-intro,.material-note,.cod-nodata,.elc-note,.env-bad,.mfr-warn{
  border-color:var(--chrome-line); background:color-mix(in srgb,var(--surface2) 72%,transparent);
}

.facts,.material-stats{
  gap:0; border-color:var(--chrome-line); background:var(--chrome-line);
  border-radius:14px; box-shadow:var(--shadow-sm);
}
.facts div,.material-stats div{
  background:linear-gradient(180deg,var(--surface),var(--surface2)); padding:16px 18px;
}
.facts b,.material-stats b{font-size:22px; letter-spacing:-.04em}
.chip,.micro-chip,.chain-node,a.tick,.mkt-n,.eld-c-layer{
  border-color:var(--chrome-line); background:color-mix(in srgb,var(--surface2) 78%,transparent);
  border-radius:999px;
}

th{
  background:linear-gradient(180deg,var(--surface2),var(--surface3));
  color:var(--ink2); font-weight:700; letter-spacing:.04em; text-transform:uppercase;
}
td{background:color-mix(in srgb,var(--surface) 74%,transparent)}
tbody tr:hover td{background:color-mix(in srgb,var(--accent-soft) 42%,var(--surface))}
.tw{overflow:auto; scrollbar-width:thin}

.chain-flow{gap:30px}
.chain-stage{
  border-radius:16px; padding:16px; background:linear-gradient(180deg,var(--surface),var(--surface2));
}
.chain-stage.is-choke{
  background:linear-gradient(180deg,color-mix(in srgb,var(--amber-soft) 62%,var(--surface)),
    color-mix(in srgb,var(--flag-soft) 36%,var(--surface2)));
}
.cs-num{border-radius:9px; box-shadow:0 0 18px color-mix(in srgb,var(--stage) 32%,transparent)}
.chain-node{border-radius:10px}
.vj-group{
  border-color:var(--chrome-line); border-radius:14px;
  background:color-mix(in srgb,var(--surface2) 54%,transparent);
}
.vj-group.is-on{background:linear-gradient(180deg,var(--surface),var(--surface2))}

body.doc section{padding:42px 0 68px}
body.doc section>.wrap,body.doc footer>.wrap{max-width:1360px}
body.doc .sec-head{
  max-width:none; border:1px solid var(--chrome-line); border-radius:20px;
  padding:24px 28px; margin-bottom:28px;
  background:linear-gradient(135deg,var(--glass-strong),var(--glass));
  box-shadow:var(--shadow-lg);
}
body.doc .sec-head h1{font-size:clamp(34px,4vw,58px); letter-spacing:-.05em}
body.doc .sec-head p{font-size:17px; color:var(--ink2); max-width:86ch}
.blockhead{font-size:clamp(22px,2vw,30px); margin-top:52px}
.blocksub{font-size:16px; color:var(--ink2)}
.verdict{
  color:var(--invert-fg2); border-color:color-mix(in srgb,var(--accent) 22%,var(--line));
  background:linear-gradient(135deg,var(--invert-bg),color-mix(in srgb,var(--invert-bg) 76%,var(--accent)));
}
.verdict h3{font-size:24px}

footer{
  border-top:1px solid var(--chrome-line);
  background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--surface2) 58%,transparent));
}

@media(max-width:900px){
  :root{--nav-h:116px}
  nav{height:auto; min-height:64px}
  .nav-in{padding:10px 14px; flex-wrap:wrap}
  .navlinks{order:3; flex-basis:100%; justify-content:flex-start; border-radius:16px}
  .main-view{inset:116px 0 0; padding:14px 0}
  .landing-rail{padding:20px; border-radius:18px}
  #overview .dia{padding:16px}
  #overview #cx-matrix .dia-shell{grid-template-columns:1fr}
  #stack .stack{grid-template-columns:1fr}
  #stack .rail{border-radius:14px}
  #stack .tab{min-height:46px}
  body.doc .sec-head{padding:20px}
}
@media(max-width:640px){
  :root{--nav-h:110px}
  .main-view{inset:110px 0 0}
  .navlinks a,.navlinks button{font-size:11.5px; padding:7px 10px}
  .landing-rail h1,body.doc .sec-head h1{letter-spacing:-.035em}
  #overview .dia .d-cap{font-size:13px}
  .facts div,.material-stats div{padding:13px 14px}
}