/* ══════════════════════════════════════════════════════════════════════════
   ATLAS — TOKENS AND STYLE
   Scoped to .atlas so nothing here can leak into the rest of the report. The
   atlas is deep-space in both site themes on purpose: it is a lit instrument,
   like a photograph, and inverting it would cost the depth the whole design
   rests on. Everything tunable — colour, glow, spacing, motion — is a token.
   ══════════════════════════════════════════════════════════════════════════ */

/* The overview's figure styles size any <svg> inside it to 100% — written for
   the schematic this replaced. The atlas owns several SVGs of its own at
   different sizes, so it states them here, after the base sheet. */
.atlas svg{width:auto; height:auto; max-width:none}
.atlas .atlas-canvas,.atlas .atlas-bg-svg svg{width:100%; height:100%}
.atlas .atlas-search svg{width:15px; height:15px}

.atlas{
  --atlas-bg:#06101d;
  --atlas-bg-2:#0a1b2e;
  --atlas-surface:rgba(8,24,40,.88);
  --atlas-surface-2:rgba(10,30,50,.72);
  --atlas-border:rgba(150,195,230,.28);
  --atlas-grid:rgba(120,180,225,.055);
  --atlas-text:#eaf6ff;
  --atlas-text-muted:#8faac1;
  --atlas-text-dim:#5f7d97;

  --atlas-energy:#ffbd4a;
  --atlas-materials:#ff7185;
  --atlas-compute:#9b78ff;
  --atlas-data:#53cfff;
  --atlas-intelligence:#48f1e5;
  --atlas-control:#65f49a;

  --r-foundations:var(--atlas-energy);
  --r-silicon:var(--atlas-materials);
  --r-compute:var(--atlas-compute);
  --r-intelligence:var(--atlas-intelligence);
  --r-network:var(--atlas-data);
  --r-embodied:var(--atlas-control);

  /* Per-layer colours. A card is coloured by the layer it opens, not by the
     macro-system it sits in: layer 1 is amber wherever it appears — the grid,
     the plant in the hall, the battery in the machine — which is how the hand-
     drawn schematic read it. These are the report's own dark-theme layer hues
     from style.css, pulled apart a little where two sat too close to tell
     apart at card size (7 against 8, 9 against the network). */
  --atlas-l1:#F0B45D;
  --atlas-l2:#C98A5A;
  --atlas-l3:#E0798F;
  --atlas-l4:#B69AE8;
  --atlas-l5:#7DA2FF;
  --atlas-l6:#7FC98C;
  --atlas-l7:#4FD0D8;
  --atlas-l8:#A9B6E0;
  --atlas-l9:#55BAD2;
  --atlas-l10:#7FC07A;
  /* The planet is not a layer; this is what its own runs are drawn in. */
  --atlas-world:var(--atlas-data);

  --atlas-glow-low:0 0 12px;
  --atlas-glow-high:0 0 24px;
  --atlas-motion-fast:160ms;
  --atlas-motion-normal:240ms;
  --atlas-ease:cubic-bezier(.4,.14,.3,1);
  --atlas-radius:12px;

  position:relative; isolation:isolate;
  background:var(--atlas-bg);
  border-radius:var(--r-lg,16px);
  overflow:hidden;
  color:var(--atlas-text);
  font-family:var(--f,system-ui,sans-serif);
  contain:paint;
}

/* ── background, in separately editable layers ───────────────────────────── */
/* The atlas background is now drawn from theme-native layers. The Earth is a
   separate transparent asset inside the SVG, so light mode never exposes a
   rectangular photograph behind the map. */
.atlas-bg{position:absolute; inset:0; pointer-events:none; z-index:0}
.atlas-bg>*{position:absolute; inset:0}
.atlas-bg-photo{background:
  radial-gradient(circle at 84% 42%, rgba(58,167,255,.18), transparent 19%),
  radial-gradient(circle at 48% 16%, rgba(92,133,255,.11), transparent 28%),
  linear-gradient(135deg, var(--atlas-bg) 0%, var(--atlas-bg-2) 52%, #061421 100%);
  opacity:1}
.atlas-bg-tint{background:linear-gradient(180deg,
  rgba(4,11,22,.85) 0%, rgba(4,11,22,.35) 22%, rgba(4,11,22,.35) 78%, rgba(4,11,22,.85) 100%)}

/* ── the stage: clips, and owns pan and zoom ─────────────────────────────── */
.atlas-stage{position:relative; z-index:1; width:100%; aspect-ratio:1760/990;
  overflow:hidden; cursor:grab; touch-action:pan-y}
.atlas-stage.is-panning{cursor:grabbing}
.atlas-world{position:absolute; inset:0; transform-origin:0 0;
  background:
    radial-gradient(circle at 10% 22%, rgba(125,162,255,.18) 0 1px, transparent 1.7px),
    radial-gradient(circle at 46% 78%, rgba(234,246,255,.16) 0 1px, transparent 1.8px),
    radial-gradient(circle at 74% 18%, rgba(85,186,210,.2) 0 1.1px, transparent 1.9px),
    linear-gradient(rgba(120,180,225,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120,180,225,.04) 1px, transparent 1px),
    radial-gradient(ellipse at 84% 42%, rgba(58,167,255,.16), transparent 23%),
    radial-gradient(ellipse at 46% 50%, rgba(34,92,150,.18), transparent 52%);
  background-size:211px 157px, 173px 191px, 239px 181px, 40px 40px, 40px 40px, 100% 100%, 100% 100%;
  transition:transform var(--atlas-motion-normal) var(--atlas-ease)}
.atlas-world.is-dragging{transition:none}
.atlas-canvas{position:absolute; inset:0; width:100%; height:100%; overflow:visible}
.atlas-world::before{content:''; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse at 78% 36%, transparent 0 28%, rgba(85,186,210,.08) 29%, transparent 30% 35%, rgba(125,162,255,.07) 36%, transparent 37%),
    radial-gradient(ellipse at 42% 48%, transparent 0 45%, rgba(85,186,210,.06) 46%, transparent 47%),
    linear-gradient(90deg, rgba(4,11,22,.62) 0%, rgba(4,11,22,.34) 46%,
    rgba(4,11,22,.08) 72%, rgba(4,11,22,0) 88%)}

/* ── macro-system regions ────────────────────────────────────────────────── */
.rg-box{fill:rgba(10,26,44,.42); stroke:currentColor; stroke-width:1.2;
  stroke-dasharray:9 8; rx:18; opacity:.62;
  transition:opacity var(--atlas-motion-normal) var(--atlas-ease)}
.rg-glow{fill:currentColor; opacity:.045; rx:18}
.rg-title{fill:var(--atlas-text); font:600 17px/1 var(--f,sans-serif);
  letter-spacing:.11em; text-transform:uppercase}
.rg-sub{fill:var(--atlas-text-muted); font:500 9.5px/1 var(--f,sans-serif);
  letter-spacing:.09em; text-transform:uppercase}
.atlas.is-filtered .rg-box{opacity:.3}

/* ── routes ──────────────────────────────────────────────────────────────── */
.rt{fill:none; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round;
  opacity:.62; transition:opacity var(--atlas-motion-normal) var(--atlas-ease),
  stroke-width var(--atlas-motion-fast) var(--atlas-ease)}
.rt.is-core{opacity:.95; stroke-width:2.6}
.rt-hit{fill:none; stroke:transparent; stroke-width:18; cursor:pointer}
/* Unlit runs have to fall far enough back that the geometry they leave behind
   does not read as a shape of its own. At .09 the amber corridors round the
   foundations drew a pale rectangle that looked deliberate. */
.atlas.is-filtered .rt{opacity:.045}
.atlas.is-filtered .rt.is-lit{opacity:1; stroke-width:3.2}
.rt.is-lit{opacity:1; stroke-width:3.2; filter:drop-shadow(0 0 7px currentColor)}
.rt-label{font:600 10px var(--f,sans-serif); letter-spacing:.06em;
  text-transform:uppercase; opacity:.75; paint-order:stroke;
  stroke:var(--atlas-bg); stroke-width:4px; stroke-linejoin:round}
.atlas.is-filtered .rt-label{opacity:.07}
.rt-g:has(.rt.is-lit) .rt-label{opacity:1}
.rt-dot{r:3; opacity:0}
.rt-dot.is-on{opacity:.95; filter:drop-shadow(0 0 5px currentColor)}

/* ── cards ───────────────────────────────────────────────────────────────── */
/* The cards are laid out in canvas pixels and the whole layer is scaled, so
   type shrinks with the drawing instead of staying 15px on a 70% map. */
.nd-region{display:none}
.atlas-nodes{position:absolute; left:0; top:0; pointer-events:none;
  width:var(--atlas-w,1760px);
  height:var(--atlas-h,880px); transform-origin:0 0; transform:scale(var(--atlas-k,1))}
.nd{position:absolute; pointer-events:auto; display:flex; flex-direction:column; gap:6px;
  text-align:left; padding:11px 13px;
  background:var(--atlas-surface); color:var(--atlas-text);
  border:1px solid color-mix(in srgb, currentColor 55%, transparent);
  border-radius:var(--atlas-radius); cursor:pointer; overflow:hidden;
  box-shadow:0 2px 14px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.045);
  transition:transform var(--atlas-motion-fast) var(--atlas-ease),
             box-shadow var(--atlas-motion-fast) var(--atlas-ease),
             border-color var(--atlas-motion-fast) var(--atlas-ease),
             opacity var(--atlas-motion-normal) var(--atlas-ease)}
.nd::before{content:''; position:absolute; inset:0; border-radius:inherit;
  background:linear-gradient(150deg, color-mix(in srgb, currentColor 16%, transparent), transparent 62%);
  pointer-events:none}
.nd:hover,.nd:focus-visible{transform:translateY(-3px);
  border-color:currentColor; box-shadow:var(--atlas-glow-high) color-mix(in srgb, currentColor 34%, transparent),
  0 8px 22px rgba(0,0,0,.5)}
.nd:focus-visible{outline:2px solid var(--atlas-text); outline-offset:3px}
.nd.is-selected{border-color:currentColor;
  box-shadow:var(--atlas-glow-high) color-mix(in srgb, currentColor 52%, transparent),
  0 10px 26px rgba(0,0,0,.55); background:var(--atlas-surface-2)}
.atlas.is-filtered .nd{opacity:.2}
.atlas.is-filtered .nd.is-lit,.atlas.is-filtered .nd.is-selected{opacity:1}

.nd-head{display:flex; align-items:center; gap:8px; min-width:0; padding-right:44px}
/* --nd-c, not currentColor: this element sets its own `color` for the digit,
   and currentColor in a declaration resolves against that — which painted the
   badge the same near-black as the number sitting on it. */
.nd-num{flex:none; width:22px; height:22px; border-radius:50%; display:grid;
  place-items:center; font:700 12px var(--f,sans-serif); color:#04101d;
  background:var(--nd-c, #7fd0ff);
  box-shadow:0 0 12px color-mix(in srgb, var(--nd-c, #7fd0ff) 55%, transparent)}
.nd-name{font:600 13.5px/1.25 var(--f,sans-serif); color:var(--atlas-text);
  letter-spacing:-.008em; min-width:0}
/* The mark sits in the corner rather than in the text row, so a long layer
   name gets the card's full width instead of wrapping around it. */
.atlas .nd .licon.nd-icon{position:absolute; top:50%; right:12px;
  width:34px; height:34px; opacity:.86; stroke:currentColor; fill:none;
  stroke-width:1.85; stroke-linecap:round; stroke-linejoin:round;
  transform:translate(var(--nd-ix,0px), calc(-50% + var(--nd-iy,0px))) scale(var(--nd-is,1)); pointer-events:none;
  filter:drop-shadow(0 0 7px color-mix(in srgb,currentColor 42%,transparent))}
.atlas .nd.is-small .licon.nd-icon{right:8px; width:24px; height:24px}
.atlas .nd.is-head .licon.nd-icon{width:36px; height:36px}
.nd-sub{margin:0; padding-right:42px; font:400 10px/1.45 var(--f,sans-serif); color:var(--atlas-text-muted)}
.nd-sub span{display:block}
.nd.is-small{padding:8px 12px; gap:3px; justify-content:center}
.nd.is-small .nd-head{padding-right:30px}
.nd.is-small .nd-name{font-size:12.5px}
.nd.is-small .nd-num{width:17px; height:17px; font-size:9.5px}
.nd.is-small .nd-icon{width:24px; height:24px}
.nd.is-small .nd-sub{font-size:9.5px; line-height:1.35; padding-right:30px}
.nd.is-head .nd-name{font-size:15px}
/* An enclosure holds other cards, so it must not paint over them: its header
   sits at the top and the rest of it is a frame. */
.nd.is-encl{justify-content:flex-start; padding:12px 14px;
  background:color-mix(in srgb, currentColor 8%, rgba(6,18,32,.55));
  border-width:1.5px; box-shadow:inset 0 0 34px color-mix(in srgb, currentColor 12%, transparent),
  0 4px 22px rgba(0,0,0,.4)}
.nd.is-encl::before{background:linear-gradient(180deg,
  color-mix(in srgb, currentColor 16%, transparent), transparent 22%)}
.nd.is-encl .nd-name{font-size:15px}
.nd.is-encl .nd-icon{top:29px; width:34px; height:34px;
  transform:translate(var(--nd-ix,0px), var(--nd-iy,0px)) scale(var(--nd-is,1))}

/* ── the planet ──────────────────────────────────────────────────────────── */
.pw-label{fill:var(--atlas-text); font:600 17px/1 var(--f,sans-serif);
  letter-spacing:.14em; text-transform:uppercase}
.pw-sub{fill:var(--atlas-text-muted); font:500 11px/1 var(--f,sans-serif);
  letter-spacing:.1em; text-transform:uppercase}
/* The planet is a <g tabindex="0">, and a focused SVG group is outlined by the
   browser around its whole bounding box — halo and caption included. That is
   the white rectangle that appeared on clicking it in Safari and Firefox;
   Chromium never drew it, which is why it took three goes to find. The rim and
   halo below are the focus indicator instead. */
.pw-node{cursor:pointer; outline:none}
.pw-node:focus,.pw-node:focus .pw-rim{opacity:.75}
.pw-node:focus .pw-halo{opacity:.3}
.pw-earth{pointer-events:none; opacity:.96; filter:drop-shadow(0 0 18px rgba(58,167,255,.55))}
/* fill:none is not hit-testable; a transparent fill is. This disc is the
   planet's whole hit area — the rings around it only ever draw. */
.pw-hit{fill:transparent}
.pw-node:focus-visible{outline:none}
.pw-halo{fill:none; stroke:var(--atlas-data); stroke-width:2; opacity:0;
  transition:opacity var(--atlas-motion-normal) var(--atlas-ease)}
.pw-rim{fill:transparent; stroke:var(--atlas-data); stroke-width:2; opacity:0;
  transition:opacity var(--atlas-motion-normal) var(--atlas-ease)}
.pw-node:hover .pw-rim,.pw-node:focus-visible .pw-rim,
.pw-node.is-selected .pw-rim{opacity:.75}
.pw-node:hover .pw-halo,.pw-node:focus-visible .pw-halo,
.pw-node.is-selected .pw-halo{opacity:.3}
.atlas.is-filtered .pw-label,.atlas.is-filtered .pw-sub{opacity:.28}
.pw-node.is-lit .pw-label,.pw-node.is-lit .pw-sub{opacity:1}

/* ── toolbar ─────────────────────────────────────────────────────────────── */
.atlas-top{position:relative; z-index:7; display:flex; flex-wrap:wrap; gap:12px;
  align-items:center; justify-content:flex-end; padding:16px 20px 4px}
.atlas-title{display:flex; align-items:baseline; gap:12px; margin-right:auto}
.atlas-title h3{margin:0; font:600 19px/1 var(--f,sans-serif); letter-spacing:.1em;
  text-transform:uppercase; color:var(--atlas-text)}
.atlas-title h3 em{font-style:normal; color:var(--atlas-data)}
.atlas-live{display:flex; align-items:center; gap:7px; font:600 10.5px var(--f,sans-serif);
  letter-spacing:.11em; text-transform:uppercase; color:var(--atlas-text-dim)}
.atlas-live i{width:7px; height:7px; border-radius:50%; background:var(--atlas-control);
  box-shadow:0 0 8px var(--atlas-control); animation:atlasPulse 2.6s ease-in-out infinite}
@keyframes atlasPulse{0%,100%{opacity:1}50%{opacity:.35}}

.atlas-filters{display:flex; flex-wrap:wrap; gap:12px; padding:10px 20px 18px;
  position:relative; z-index:3}
.fl-btn{display:inline-flex; align-items:center; justify-content:center; gap:12px;
  min-height:36px; padding:8px 17px; border-radius:999px;
  border:1.5px solid color-mix(in srgb, var(--fl-c, var(--atlas-text)) 36%, transparent);
  background:rgba(6,18,31,.56); color:var(--fl-c,var(--atlas-text));
  font:700 13px/1 var(--f,sans-serif); letter-spacing:.14em; text-transform:uppercase;
  cursor:pointer; box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
  transition:color var(--atlas-motion-fast) var(--atlas-ease),
             background var(--atlas-motion-fast) var(--atlas-ease),
             border-color var(--atlas-motion-fast) var(--atlas-ease),
             box-shadow var(--atlas-motion-fast) var(--atlas-ease),
             transform var(--atlas-motion-fast) var(--atlas-ease)}
.fl-btn:hover{border-color:color-mix(in srgb,var(--fl-c,var(--atlas-text)) 64%,transparent);
  background:rgba(12,34,56,.7); box-shadow:0 0 16px color-mix(in srgb,var(--fl-c,var(--atlas-text)) 18%,transparent)}
.fl-btn[aria-pressed="true"]{background:rgba(17,45,70,.86);
  border-color:color-mix(in srgb, currentColor 82%, transparent);
  box-shadow:0 0 18px color-mix(in srgb, currentColor 30%, transparent),
             inset 0 1px 0 rgba(255,255,255,.08)}
.fl-btn.fl-all{--fl-c:var(--atlas-text); color:var(--atlas-text);
  border-color:color-mix(in srgb, var(--atlas-text) 62%, transparent)}
.fl-btn.fl-all[aria-pressed="true"]{background:rgba(26,57,83,.92);
  box-shadow:0 0 24px rgba(210,233,255,.28), inset 0 1px 0 rgba(255,255,255,.14)}
.fl-btn:focus-visible{outline:2px solid var(--atlas-text); outline-offset:2px}
.fl-dash{width:21px; height:3px; background:currentColor; flex:none; border-radius:2px}

.atlas-search{position:relative; display:flex; align-items:center}
.atlas-search input{width:250px; max-width:44vw; padding:8px 14px 8px 34px;
  border-radius:999px; border:1px solid var(--atlas-border);
  background:rgba(8,22,38,.8); color:var(--atlas-text);
  font:400 13px var(--f,sans-serif)}
.atlas-search input::placeholder{color:var(--atlas-text-dim)}
.atlas-search input:focus{outline:2px solid var(--atlas-data); outline-offset:1px}
.atlas-search svg{position:absolute; left:11px; width:15px; height:15px;
  stroke:var(--atlas-text-dim); fill:none; pointer-events:none}
.atlas-results{position:absolute; top:calc(100% + 6px); right:0; min-width:100%; z-index:30;
  margin:0; padding:6px; list-style:none; border-radius:12px; max-height:280px;
  overflow:auto; background:#0b1e33; border:1px solid var(--atlas-border);
  box-shadow:0 18px 40px rgba(0,0,0,.6)}
.atlas-results:empty{display:none}
.atlas-results button{display:block; width:100%; text-align:left; padding:8px 10px;
  border:0; border-radius:8px; background:none; color:var(--atlas-text);
  font:400 13px var(--f,sans-serif); cursor:pointer}
.atlas-results button:hover,.atlas-results button:focus-visible{background:rgba(40,90,130,.5); outline:none}
.atlas-results small{display:block; color:var(--atlas-text-dim); font-size:11px}
.atlas-results small b{color:var(--atlas-data); font-weight:700; letter-spacing:.04em}

/* ── controls and minimap ────────────────────────────────────────────────── */
.atlas-controls{position:absolute; right:16px; bottom:16px; z-index:4;
  display:flex; flex-direction:column; gap:6px}
.atlas-controls button{width:34px; height:34px; border-radius:9px; cursor:pointer;
  border:1px solid var(--atlas-border); background:rgba(8,22,38,.85);
  color:var(--atlas-text-muted); font:600 15px var(--f,sans-serif); line-height:1;
  display:grid; place-items:center}
.atlas-controls button:hover{color:var(--atlas-text); border-color:var(--atlas-text-muted)}
.atlas-controls button:focus-visible{outline:2px solid var(--atlas-data); outline-offset:2px}

.atlas-hint{position:absolute; left:50%; bottom:18px; transform:translateX(-50%);
  z-index:4; font:400 11.5px var(--f,sans-serif); color:var(--atlas-text-dim);
  letter-spacing:.04em; pointer-events:none; white-space:nowrap}

/* ── the detail panel ────────────────────────────────────────────────────── */
/* Docked bottom-right and deliberately short: the point is to read a layer
   while still seeing where it sits, so the panel scrolls rather than growing
   over the map. */
.atlas-panel{position:absolute; right:16px; bottom:16px; z-index:6; width:min(500px,44%);
  max-height:min(440px, calc(100% - 150px)); display:flex; flex-direction:column;
  border-radius:14px; background:rgba(7,20,35,.96); border:1px solid var(--atlas-border);
  box-shadow:0 24px 60px rgba(0,0,0,.66); overflow:hidden;
  opacity:0; transform:translateY(14px) scale(.985); pointer-events:none;
  transition:opacity var(--atlas-motion-normal) var(--atlas-ease),
             transform var(--atlas-motion-normal) var(--atlas-ease)}
.atlas-panel.is-open{opacity:1; transform:none; pointer-events:auto}
.pn-head{display:flex; align-items:flex-start; gap:12px; padding:16px 16px 12px;
  border-bottom:1px solid rgba(150,195,230,.16)}
.pn-num{flex:none; width:36px; height:36px; border-radius:50%; display:grid;
  place-items:center; font:700 17px var(--f,sans-serif); color:#04101d;
  background:var(--nd-c, #7fd0ff);
  box-shadow:0 0 14px color-mix(in srgb, var(--nd-c, #7fd0ff) 55%, transparent)}
/* The world has no number, so its badge carries the globe mark instead. Same
   circle, drawn rather than set. */
.pn-globe{flex:none; width:36px; height:36px; border-radius:50%; display:grid;
  place-items:center; border:1.5px solid var(--atlas-data);
  background:color-mix(in srgb, var(--atlas-data) 14%, transparent);
  box-shadow:0 0 14px color-mix(in srgb, var(--atlas-data) 40%, transparent)}
.pn-globe .licon{width:22px; height:22px; stroke:var(--atlas-data) !important; fill:none;
  stroke-width:2.4; stroke-linecap:round}
/* The world's own colour, for a panel opened from the planet rather than a card. */
.atlas{--r-world:var(--atlas-data)}
.pn-id{min-width:0; flex:1}
.pn-id h4{margin:0; font:600 18px/1.25 var(--f,sans-serif); color:var(--atlas-text)}
.pn-id p{margin:2px 0 0; font:400 12.5px var(--f,sans-serif); color:var(--atlas-text-muted)}
.pn-moat{flex:none; align-self:center; padding:4px 10px; border-radius:999px;
  font:600 10px var(--f,sans-serif); letter-spacing:.08em; text-transform:uppercase;
  border:1px solid currentColor}
.pn-close{flex:none; width:30px; height:30px; border-radius:8px; border:0; cursor:pointer;
  background:rgba(255,255,255,.06); color:var(--atlas-text-muted); font-size:17px; line-height:1}
.pn-close:hover{background:rgba(255,255,255,.13); color:var(--atlas-text)}
.pn-close:focus-visible{outline:2px solid var(--atlas-data); outline-offset:2px}
.pn-body{padding:14px 16px 18px; overflow:auto; overscroll-behavior:contain;
  display:grid; gap:10px; grid-template-columns:1fr 1fr; align-content:start}
.pn-sec{background:rgba(255,255,255,.032); border:1px solid rgba(150,195,230,.13);
  border-radius:11px; padding:12px 13px}
.pn-sec.is-wide{grid-column:1 / -1}
.pn-sec h5{margin:0 0 7px; font:600 9.5px var(--f,sans-serif); letter-spacing:.14em;
  text-transform:uppercase; color:var(--atlas-text-dim)}
.pn-sec p{margin:0; font:400 12.5px/1.5 var(--f,sans-serif); color:var(--atlas-text)}
.pn-sec p b{color:#fff}
.pn-metric{display:flex; align-items:baseline; gap:9px; flex-wrap:wrap}
.pn-metric b{font:600 22px/1 var(--f,sans-serif); color:currentColor;
  letter-spacing:-.02em; text-shadow:0 0 18px color-mix(in srgb,currentColor 45%,transparent)}
.pn-metric span{font:400 12px var(--f,sans-serif); color:var(--atlas-text-muted)}
.pn-metric em{display:block; width:100%; font-style:normal; font-size:10.5px;
  color:var(--atlas-text-dim); margin-top:3px}
.pn-chips{display:flex; flex-wrap:wrap; gap:6px; margin:0; padding:0; list-style:none}
.pn-chips li{padding:4px 9px; border-radius:8px; font:400 11.5px var(--f,sans-serif);
  background:rgba(255,255,255,.055); border:1px solid rgba(150,195,230,.16);
  color:var(--atlas-text)}
.pn-more{margin:10px 0 0; font:400 12px var(--f,sans-serif)}
.pn-more a{color:var(--atlas-data)}

/* ── motion, and the promise to stop ─────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  .atlas *,.atlas *::before{transition-duration:1ms !important; animation:none !important}
  .rt-dot{display:none}
}

/* ── responsive ──────────────────────────────────────────────────────────── */
@media (max-width:1320px){
  .atlas-panel{width:min(460px,60%)}
}
@media (max-width:1080px){
  /* Below this the canvas cannot hold its labels, so the atlas reflows into
     regions stacked in the same left-to-right order, read top to bottom. */
  .atlas-stage{aspect-ratio:auto; height:auto; overflow:visible; cursor:default}
  .atlas-world{position:static; transform:none !important}
  /* .dia svg sets display:block at a higher specificity than a bare class,
     so the canvas is named through .atlas to switch it off here. */
  .atlas .atlas-canvas,.atlas .atlas-hint,.atlas .atlas-controls{display:none}
  .atlas-nodes{position:static; display:grid; gap:10px; padding:4px 14px 18px;
    width:auto; height:auto; transform:none !important}
  /* relative, not static: .nd::before is an absolute overlay, and with no
     positioned ancestor it stretches across the whole atlas as a coloured veil */
  .nd{position:relative !important; left:auto !important; top:auto !important;
    width:auto !important; height:auto !important; transform:none !important;
    min-height:0}
  .nd-region{display:block; margin:14px 0 2px; font:600 11px var(--f,sans-serif); letter-spacing:.14em;
    text-transform:uppercase; color:var(--atlas-text-dim)}
  /* contain:paint makes .atlas the containing block for position:fixed, which
     would strand the sheet halfway down a very tall page. */
  .atlas{contain:none}
  .atlas-panel{position:fixed; inset:auto 0 0 0; width:auto; max-height:76vh;
    border-radius:16px 16px 0 0; transform:translateY(100%);
    /* a sheet over the page has to be opaque, not the 96% a docked panel can
       afford over its own background */
    background:#081a2e; box-shadow:0 -18px 50px rgba(0,0,0,.7)}
  .atlas-panel.is-open{transform:none}
  .pn-body{grid-template-columns:1fr}
  .atlas-search{flex:1}
  .atlas-search input{width:100%; max-width:none}
  .atlas-top{padding:14px 14px 4px}
}

/* Before the script runs, and if it never does. */
.atlas.is-loading{min-height:120px; display:grid; place-items:center}
.atlas-fallback{margin:0; padding:28px; color:var(--atlas-text-muted,#8faac1);
  font:400 14px var(--f,sans-serif); text-align:center}
.atlas:not(.is-loading) .atlas-fallback{display:none}