/* nexusatlas.io engineering additions — layered on the family Midnight system.
   base.css, theme.css and v2.css are untouched byte-copies of the .eu build;
   everything the engineering site needs beyond them lives here. */

/* ---------- Semantic state tokens (demos, tables, badges) ---------- */
:root { --warn:#f0ad4e; --danger:#ef5350; }
:root[data-color-theme="light"] { --warn:#a8610f; --danger:#b3261e; }

/* ---------- Unblock position:sticky ----------
   base.css gives .shell `overflow:hidden` to stop sideways overflow, but a
   non-visible overflow on ANY ancestor silently disables position:sticky in
   every descendant — the /playbooks index rail scrolled away instead of
   sticking. `clip` clips exactly the same way without establishing a scroll
   container, which is what sticky objects to. base.css is a byte-copy of the
   .eu build, so the correction belongs here. */
.shell { overflow:visible; overflow-x:clip; }

/* ---------- Selection on always-dark surfaces ----------
   base.css sets `body::selection { background:var(--accent-soft); color:var(--ink) }`
   — a faint tint with the PAGE's ink colour. That is right on the page ground
   and unreadable on the surfaces that stay dark in both themes, where --ink is
   near-black: selecting the config listing produced dark text on a barely-there
   highlight. base.css already handles .section-dark and the footer this way. */
.code-block ::selection, .code-block::selection,
.demo-log ::selection, .demo-log::selection { background:#2ad4ff; color:#02050a; }
.code-block ::-moz-selection, .demo-log ::-moz-selection { background:#2ad4ff; color:#02050a; }

/* ---------- Navigation active states for the .io nav keys ---------- */
body[data-active="how"] .nav-links > a[data-nav="how"],
body[data-active="platform"] .nav-links a[data-nav="platform"],
body[data-active="operations"] .nav-links > a[data-nav="operations"],
body[data-active="demos"] .nav-links > a[data-nav="demos"],
body[data-active="more"] .nav-links a[data-nav="more"] { color:var(--accent); background:var(--accent-soft); }
/* …and inside an open dropdown, which of its entries you are actually on.
   server.js stamps aria-current="page" on the matching link. */
.dropdown-panel a[aria-current="page"] { color:var(--accent); background:var(--accent-soft); font-weight:640; }
/* The marker rides in the link's existing left padding and is centred on the
   box, so it stays on the text's midline whether the label wraps or not —
   a floated marker aligns to the first line's top instead. Nothing shifts,
   because it occupies padding that was already there. */
.dropdown-panel a[aria-current="page"] { position:relative; }
.dropdown-panel a[aria-current="page"]::before { content:""; position:absolute; left:5px; top:50%; transform:translateY(-50%); width:3px; height:1.05em; border-radius:2px; background:var(--accent); }

/* ---------- Truth labels: MEASURED / SIMULATION / TUNED PROFILE ---------- */
.tl { display:inline-flex; align-items:center; gap:6px; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:10px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; white-space:nowrap; }
.tl::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
.tl-measured { color:var(--accent); }
.tl-sim { color:var(--muted); }
.tl-tuned { color:var(--warn); }
.section-dark .tl-sim { color:var(--on-dark-dim); }

/* ---------- Demo frame: the standard chrome around every simulation ---------- */
.demo { position:relative; margin-top:26px; border:1px solid var(--line); border-radius:14px; background:var(--surface); overflow:hidden; }
.demo-head { display:flex; flex-wrap:wrap; align-items:center; gap:12px; padding:13px 18px; border-bottom:1px solid var(--line); }
.demo-head strong { color:var(--ink); font-size:13.5px; letter-spacing:-.01em; }
.demo-head .tl { margin-left:auto; }
.demo-stage { position:relative; aspect-ratio:16/8; background:color-mix(in srgb, var(--dark) 88%, var(--surface)); }
.demo-stage canvas { position:absolute; inset:0; width:100%; height:100%; }
@media (max-width:640px) { .demo-stage { aspect-ratio:4/3; } }
/* Stage shapes. Lane layouts (rows plus header and footer strips) want a
   shallower box than the 16/8 default; scene layouts want something between.

   NEVER pair `aspect-ratio` with `min-height` here. With width:auto and the
   min-height making the height definite, the ratio drives the WIDTH instead of
   the height: a 426px floor at 16/5.6 computes a 1217px-wide stage, which
   overflows the frame and is clipped by .demo's overflow:hidden at every
   viewport under ~1265px. Express the floor as a pinned height below the
   breakpoint where the ratio would fall through it. */
.demo-stage.stage-lanes { aspect-ratio:16/5.6; }
.demo-stage.stage-lanes-3 { aspect-ratio:16/5; }
.demo-stage.stage-map { aspect-ratio:16/7; }
.demo-stage.stage-terrain { aspect-ratio:16/6; }
@media (max-width:1280px) {
  .demo-stage.stage-lanes { aspect-ratio:auto; height:428px; }
  .demo-stage.stage-lanes-3 { aspect-ratio:auto; height:394px; }
}
@media (max-width:1040px) { .demo-stage.stage-map { aspect-ratio:auto; height:430px; } .demo-stage.stage-terrain { aspect-ratio:auto; height:400px; } }
@media (max-width:640px) {
  .demo-stage.stage-lanes { height:380px; }
  .demo-stage.stage-lanes-3 { height:330px; }
  .demo-stage.stage-map { height:400px; }
  .demo-stage.stage-terrain { height:360px; }
}
.demo-log { display:grid; gap:4px; max-height:120px; overflow:hidden; padding:11px 18px; border-top:1px solid var(--line); font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:11px; color:var(--muted); }
.demo-log div:first-child { color:var(--ink); }
.demo-log:empty { display:none; }
.demo-fs { position:absolute; right:10px; top:10px; z-index:3; display:grid; place-items:center; width:30px; height:30px; padding:0; border:1px solid color-mix(in srgb,#fff 22%,transparent); border-radius:8px; background:color-mix(in srgb,#000 45%,transparent); color:#e8f4ff; font-size:13px; line-height:1; cursor:pointer; opacity:.75; transition:opacity .16s ease; }
.demo-fs:hover { opacity:1; }
/* Fullscreen: the stage takes whatever height is left after the chrome, so
   controls, stats and the event log stay on screen instead of being pushed
   past the bottom edge. */
.demo:fullscreen { display:flex; flex-direction:column; width:100%; height:100%; border:0; border-radius:0; background:var(--surface); overflow:hidden; }
.demo:fullscreen .demo-head,
.demo:fullscreen .demo-controls,
.demo:fullscreen .demo-stats,
.demo:fullscreen .demo-log,
.demo:fullscreen .demo-note { flex:0 0 auto; }
.demo:fullscreen .demo-stage { flex:1 1 auto; min-height:0; aspect-ratio:auto; }
.demo:fullscreen .demo-log { max-height:96px; }
.demo-controls { display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:13px 18px; border-top:1px solid var(--line); }
.demo-controls .demo-group { display:inline-flex; flex-wrap:wrap; gap:6px; align-items:center; }
.demo-controls .demo-sep { width:1px; align-self:stretch; background:var(--line); margin:0 6px; }
.demo-btn { padding:7px 12px; border:1px solid var(--line-strong); border-radius:8px; background:var(--bg); color:var(--text); font:inherit; font-size:12.5px; font-weight:640; cursor:pointer; transition:color .16s,border-color .16s,background .16s; }
.demo-btn:hover { color:var(--accent); border-color:var(--accent); }
.demo-btn[aria-pressed="true"], .demo-btn.is-active { color:var(--accent); border-color:var(--accent); background:var(--accent-soft); }
.demo-btn-danger { color:var(--danger); border-color:color-mix(in srgb,var(--danger) 45%,var(--line-strong)); }
.demo-btn-danger:hover { color:var(--danger); border-color:var(--danger); background:color-mix(in srgb,var(--danger) 8%,transparent); }
.demo-btn-danger[aria-pressed="true"] { color:var(--danger); border-color:var(--danger); background:color-mix(in srgb,var(--danger) 12%,transparent); }
.demo-btn-good { color:var(--good); border-color:color-mix(in srgb,var(--good) 45%,var(--line-strong)); }
.demo-btn-good:hover { border-color:var(--good); background:color-mix(in srgb,var(--good) 8%,transparent); }
/* Segmented switcher: one instrument with N members, rather than N loose
   buttons each restating the verb. Neutral by default (pick a mode); the
   -kill variant is destructive, and its dot mirrors the lane status dot in
   the diagram so control and effect carry the same mark. */
.demo-cap { color:var(--muted); font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:10.5px; font-weight:600; letter-spacing:.11em; text-transform:uppercase; }
.demo-seg { display:inline-flex; flex-wrap:wrap; border:1px solid var(--line-strong); border-radius:9px; background:var(--bg); overflow:hidden; }
.demo-seg .demo-btn { display:inline-flex; align-items:center; gap:8px; padding:8px 13px; border:0; border-left:1px solid var(--line-strong); border-radius:0; background:transparent; }
.demo-seg .demo-btn:first-child { border-left:0; }
.demo-seg .demo-btn:hover { color:var(--accent); border-color:var(--line-strong); background:color-mix(in srgb,var(--accent) 9%,transparent); }
.demo-seg .demo-btn[aria-pressed="true"] { color:var(--accent); border-color:var(--line-strong); background:var(--accent-soft); }
.demo-seg .demo-btn-danger:hover { color:var(--danger); background:color-mix(in srgb,var(--danger) 8%,transparent); }
.demo-seg .demo-btn-danger[aria-pressed="true"] { color:var(--danger); background:color-mix(in srgb,var(--danger) 13%,transparent); }
.demo-seg-kill .demo-btn::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--accent); opacity:.8; transition:background .16s ease,opacity .16s ease; }
.demo-seg-kill .demo-btn:hover { color:var(--danger); background:color-mix(in srgb,var(--danger) 8%,transparent); }
.demo-seg-kill .demo-btn:hover::before { background:var(--danger); opacity:1; }
.demo-seg-kill .demo-btn[aria-pressed="true"] { color:var(--danger); background:color-mix(in srgb,var(--danger) 13%,transparent); }
.demo-seg-kill .demo-btn[aria-pressed="true"]::before { background:var(--danger); opacity:1; }
/* First-use affordance: a control row the diagram is waiting on breathes gently
   until the viewer touches it, so "click something" is said without words. It
   starts when the demo scrolls into view (not at page load, or it would spend
   itself off-screen), stops on the first click, and never runs under reduced
   motion. Mark the row with data-nudge; core.js does the rest. */
/* Two shadows doing different jobs: an expanding ring that reads as a beat,
   and a soft halo that keeps the control lit between beats. The border rides
   the same cycle so the outline visibly brightens and dims. */
@keyframes atlas-nudge {
  0%, 100% {
    border-color:color-mix(in srgb,var(--accent) 82%,var(--line-strong));
    box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 72%,transparent),
               0 0 11px 0 color-mix(in srgb,var(--accent) 34%,transparent);
  }
  55% {
    border-color:color-mix(in srgb,var(--accent) 34%,var(--line-strong));
    box-shadow:0 0 0 12px color-mix(in srgb,var(--accent) 0%,transparent),
               0 0 22px 3px color-mix(in srgb,var(--accent) 12%,transparent);
  }
}
/* Three control structures exist across the demos — segmented groups, buttons
   in a .demo-group, and buttons loose in the row — so pulse everything, then
   silence the members of a segmented group (the group rings as one instrument)
   and the reset buttons, which are the way back rather than the thing to try. */
.demo-nudge .demo-seg,
.demo-nudge .demo-btn:not(.demo-btn-good) {
  animation:atlas-nudge 1.9s ease-in-out infinite;
  border-color:color-mix(in srgb,var(--accent) 50%,var(--line-strong));
}
.demo-nudge .demo-seg .demo-btn { animation:none; }
@media (prefers-reduced-motion:reduce) {
  .demo-nudge .demo-seg, .demo-nudge .demo-btn { animation:none; }
}
.demo-restore { margin-left:auto; }
@media (max-width:900px) { .demo-restore { margin-left:0; } }
/* A control row can be mode-specific; [hidden] must beat the flex display. */
.demo [hidden] { display:none !important; }
/* One-line explanation of the selected mode, so the frame is self-explaining
   without sending the reader down to the reference list. */
.demo-explain { padding:12px 18px; border-top:1px solid var(--line); color:var(--text); font-size:13.5px; line-height:1.6; }
.demo-explain p { margin:0; max-width:82ch; }
.demo-explain code { font-size:12.5px; }
.demo-controls + .demo-controls { border-top:1px solid var(--line); }
.demo-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:1px; background:var(--line); border-top:1px solid var(--line); }
.demo-stat { padding:13px 18px; background:var(--surface); }
.demo-stat b { display:block; color:var(--ink); font-size:17px; font-weight:700; letter-spacing:-.01em; font-variant-numeric:tabular-nums; }
.demo-stat span { color:var(--muted); font-size:11px; }
.demo-note { padding:11px 18px; border-top:1px solid var(--line); color:var(--muted); font-size:12px; }
.demo-note strong { color:var(--ink); }
.demo-static-hint { position:absolute; inset:auto 0 0 0; z-index:2; padding:8px 14px; background:color-mix(in srgb,#000 55%,transparent); color:#dfeaf5; font-size:11.5px; text-align:center; }

/* ---------- Code blocks: TOML / CLI / JSON ---------- */
.code-block { position:relative; margin-top:18px; border:1px solid var(--line); border-radius:12px; background:color-mix(in srgb, var(--dark) 90%, var(--surface)); overflow:hidden; }
.code-title { display:flex; align-items:center; gap:10px; padding:9px 15px; border-bottom:1px solid color-mix(in srgb,#fff 9%,transparent); color:#8ba1b8; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; }
.code-copy { margin-left:auto; padding:4px 10px; border:1px solid color-mix(in srgb,#fff 16%,transparent); border-radius:7px; background:transparent; color:#a9bccf; font:inherit; font-size:10.5px; letter-spacing:.06em; cursor:pointer; transition:color .16s,border-color .16s; }
.code-copy:hover { color:#e8f4ff; border-color:#e8f4ff; }
.code-block pre { margin:0; padding:15px 17px; overflow-x:auto; }
.code-block code { font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:12.5px; line-height:1.65; color:#d7e5f2; }
.code-block .ck { color:#7cd7f7; }      /* key / flag */
.code-block .cs { color:#9ee8b8; }      /* string */
.code-block .cn { color:#f2c98a; }      /* number */
.code-block .cc { color:#748aa0; }      /* comment */
p code, li code, td code, .detail-content code, .pb-body code { padding:2px 6px; border:1px solid var(--line); border-radius:6px; background:var(--surface-2); color:var(--ink); font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.86em; }
.section-dark p code, .section-dark li code { border-color:color-mix(in srgb,var(--on-dark) 16%,transparent); background:color-mix(in srgb,var(--on-dark) 7%,transparent); color:var(--on-dark); }

/* ---------- Spec / parameter / API tables ---------- */
.spec-wrap { overflow-x:auto; margin-top:18px; border:1px solid var(--line); border-radius:12px; background:var(--bg); }
.spec-table { width:100%; min-width:560px; border-collapse:collapse; }
.spec-table th { padding:13px 18px; border-bottom:1px solid var(--line); background:var(--surface); color:var(--ink); font-size:12px; letter-spacing:.05em; text-transform:uppercase; text-align:left; }
.spec-table td { padding:12px 18px; border-bottom:1px solid var(--line); color:var(--muted); font-size:13.5px; vertical-align:top; }
.spec-table tr:last-child td { border-bottom:0; }
/* Row hover: a quiet contrast shift so the eye keeps its line across a wide
   row. Ink-mix darkens on the light theme and lightens on the dark one — the
   correct direction in each. The header row has no <td>, so it never lifts. */
@media (hover:hover) {
  .spec-table td { transition:background-color .22s ease; }
  .spec-table tr:hover td { background-color:color-mix(in srgb, var(--ink) 5%, transparent); }
}
@media (prefers-reduced-motion:reduce) { .spec-table td { transition:none; } }
.spec-table td:first-child { color:var(--ink); font-weight:600; white-space:nowrap; }
.spec-table td.mono, .spec-table .mono { font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:12.5px; font-variant-numeric:tabular-nums; }
.api-list { margin-top:18px; border:1px solid var(--line); border-radius:12px; background:var(--bg); overflow:hidden; }
.api-row { display:grid; grid-template-columns:64px minmax(180px,.9fr) 1.6fr; gap:14px; align-items:baseline; padding:12px 18px; border-bottom:1px solid var(--line); }
.api-row:last-child { border-bottom:0; }
.api-method { font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:10.5px; font-weight:700; letter-spacing:.08em; color:var(--good); }
.api-method.m-post { color:var(--accent); }
.api-method.m-put { color:var(--warn); }
.api-path { font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:12.5px; color:var(--ink); overflow-wrap:anywhere; }
.api-row p { margin:0; color:var(--muted); font-size:13px; }
details.param-ref { margin-top:18px; border:1px solid var(--line); border-radius:12px; background:var(--surface); }
details.param-ref summary { display:flex; align-items:center; gap:12px; padding:15px 20px; cursor:pointer; list-style:none; color:var(--ink); font-weight:700; font-size:14.5px; }
details.param-ref summary::-webkit-details-marker { display:none; }
details.param-ref summary .pb-caret { margin-left:auto; }
details.param-ref .spec-wrap { margin:0 20px 18px; }

/* ---------- Numbers strip (6 cells) ---------- */
.proof-grid-six { grid-template-columns:repeat(6,1fr); }
.proof-grid-six .proof-item { min-height:96px; padding:20px 22px; }
.proof-grid-six .proof-item strong { font-size:16.5px; }
@media (max-width:1080px) { .proof-grid-six { grid-template-columns:repeat(3,1fr); } .proof-grid-six .proof-item:nth-child(3n) { border-right:0; } .proof-grid-six .proof-item:nth-child(-n+3) { border-bottom:1px solid var(--line); } }
@media (max-width:640px) { .proof-grid-six { grid-template-columns:1fr; } .proof-grid-six .proof-item { border-right:0; border-bottom:1px solid var(--line); } .proof-grid-six .proof-item:last-child { border-bottom:0; } }

/* ---------- Packet-lifecycle flow (home + architecture) ---------- */
.lifecycle { display:grid; grid-template-columns:repeat(7,1fr); gap:9px; margin-top:26px; counter-reset:stage; }
.lifecycle a, .lifecycle span.stage { position:relative; display:grid; align-content:start; gap:7px; min-height:118px; padding:14px; border:1px solid var(--line); border-radius:12px; background:var(--bg); counter-increment:stage; transition:border-color .18s,transform .18s; }
.lifecycle a:hover { border-color:var(--accent); transform:translateY(-2px); }
.lifecycle b { color:var(--ink); font-size:13px; letter-spacing:-.01em; }
.lifecycle small { color:var(--muted); font-size:11px; line-height:1.5; }
.lifecycle a::before, .lifecycle span.stage::before { content:"0" counter(stage); color:var(--accent); font-size:10px; font-weight:800; }
@media (max-width:1080px) { .lifecycle { grid-template-columns:repeat(4,1fr); } }
@media (max-width:640px) { .lifecycle { grid-template-columns:1fr 1fr; } }

/* ---------- Playbook essays ---------- */
.essay-list { display:grid; gap:16px; max-width:1020px; }
details.essay { border:1px solid var(--line); border-radius:14px; background:var(--surface); scroll-margin-top:110px; }
details.essay summary { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:16px; padding:19px 22px; cursor:pointer; list-style:none; }
details.essay summary::-webkit-details-marker { display:none; }
details.essay .pb-title h3 { font-size:18px; }
details.essay .essay-body { display:grid; gap:12px; margin:0 22px; padding:18px 0 22px; border-top:1px solid var(--line); }
details.essay .essay-body p { margin:0; font-size:14.5px; line-height:1.7; color:var(--text); }
details.essay .essay-body strong { color:var(--ink); }
details.essay .essay-body .callout { margin-top:6px; }

/* ---------- Boundary / honesty cards ---------- */
.boundary-grid { display:grid; grid-template-columns:1fr 1fr; gap:15px; }
.boundary-card { padding:27px; border:1px solid var(--line); border-radius:var(--radius); background:var(--bg); }
.boundary-card h3 { display:flex; align-items:center; gap:10px; margin-bottom:14px; font-size:21px; }
.boundary-card ul { margin:0; padding:0; list-style:none; display:grid; gap:9px; }
.boundary-card li { display:flex; gap:10px; color:var(--muted); font-size:14px; line-height:1.6; }
.boundary-card li::before { content:"—"; color:var(--accent); font-weight:700; flex:none; }
.boundary-card.boundary-plain li::before { color:var(--line-strong); }
@media (max-width:820px) { .boundary-grid { grid-template-columns:1fr; } }

/* ---------- Concession block (comparison honesty) ---------- */
.concession { margin-top:14px; padding:16px 20px; border:1px dashed var(--line-strong); border-radius:12px; background:transparent; color:var(--muted); font-size:13.5px; }
.concession strong { color:var(--ink); }

/* ---------- Compare page: opponent sections ---------- */
.opp { padding:26px 0; border-top:1px solid var(--line); scroll-margin-top:110px; }
.opp:last-child { border-bottom:1px solid var(--line); }
.opp h3 { display:flex; flex-wrap:wrap; align-items:baseline; gap:10px; font-size:24px; }
.opp h3 small { color:var(--muted); font-size:13px; font-weight:500; }

/* ---------- Business hand-off chip (.eu counterpart of the io-chip) ---------- */
.eu-chip { display:inline-flex; align-items:center; gap:4px; margin-left:10px; padding:2px 9px; border:1px solid var(--line); border-radius:999px; font-size:11px; font-weight:620; letter-spacing:.04em; color:var(--muted); vertical-align:3px; transition:color .16s,border-color .16s; }
.eu-chip:hover { color:var(--accent); border-color:var(--accent); }
.handoff-strip { margin-top:34px; padding:16px 22px; border:1px solid var(--line); border-radius:12px; background:var(--surface); color:var(--muted); font-size:13.5px; display:flex; flex-wrap:wrap; gap:8px 18px; align-items:center; }
.handoff-strip strong { color:var(--ink); }
.handoff-strip a { color:var(--accent); font-weight:650; }

/* ---------- Contact form (adapted family form) ---------- */
.contact-grid { display:grid; grid-template-columns:.85fr 1.15fr; gap:70px; align-items:start; }
@media (max-width:820px) { .contact-grid { grid-template-columns:1fr; gap:40px; } }

/* ---------- Hero demo tabs ----------
   One instrument, six faces. The bar reuses the segmented-switcher language of
   the in-demo controls so the hero does not introduce chrome of its own. A
   hidden panel has zero size, so the runtime's IntersectionObserver never fires
   for it and its frame loop never starts until the tab is actually selected. */
.demo-tabs { display:flex; flex-wrap:wrap; justify-content:center; gap:4px; width:fit-content; max-width:100%; margin-inline:auto; padding:4px; border:1px solid var(--line); border-radius:999px; background:color-mix(in srgb,var(--surface) 74%,transparent); box-shadow:0 12px 30px rgba(2,8,14,.16); backdrop-filter:blur(12px); }
.demo-tabs button { display:grid; grid-template-columns:19px auto; grid-template-rows:auto auto; align-items:center; column-gap:9px; min-height:46px; padding:6px 16px; border:1px solid transparent; border-radius:999px; background:transparent; color:var(--muted); font:inherit; text-align:left; cursor:pointer; transition:border-color .22s ease,background .22s ease,color .22s ease,box-shadow .22s ease; }
.demo-tabs button svg { grid-row:1/-1; width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.45; stroke-linecap:round; stroke-linejoin:round; }
.demo-tabs button b { align-self:end; font-size:12.5px; font-weight:650; line-height:1.2; letter-spacing:-.005em; }
.demo-tabs button small { align-self:start; color:var(--muted); font-size:9.5px; line-height:1.3; }
.demo-tabs button:hover { color:var(--ink); background:color-mix(in srgb,var(--surface) 84%,transparent); }
.demo-tabs button[aria-selected="true"] { color:var(--ink); border-color:color-mix(in srgb,var(--accent) 45%,transparent); background:color-mix(in srgb,var(--accent) 12%,var(--surface)); box-shadow:0 4px 15px color-mix(in srgb,var(--accent) 12%,transparent); }
.demo-tabs button[aria-selected="true"] b { color:var(--accent); }
.demo-tabs button[aria-selected="true"] small { color:color-mix(in srgb,var(--accent) 55%,var(--muted)); }
/* The incoming face rises into place rather than snapping. */
@keyframes hero-face-in { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
.demo-tab-panel:not([hidden]) { animation:hero-face-in .34s cubic-bezier(.22,.61,.36,1) both; }
@media (prefers-reduced-motion:reduce) {
  .demo-tab-panel:not([hidden]) { animation:none; }
  .demo-tabs button { transition:none; }
}
.demo-tab-panel[hidden] { display:none; }
/* In the hero the switcher sits above everything it controls — each panel is a
   whole hero (kicker, headline, lede, actions, diagram), so the tabs change the
   statement and not just the picture. */
.hero-io .demo-tabs { margin:0 auto 38px; }  /* auto, not 0 — this shorthand
   must not clobber the margin-inline:auto that centres the pill */
.hero-io .demo-tab-panel .eyebrow { margin-bottom:14px; }
/* The lede runs the full container so a four-line paragraph becomes two — the
   switcher already costs vertical space above it, and the diagram is the thing
   that should be above the fold. */
.hero-io .demo-tab-panel .hero-lede { max-width:none; }
/* The actions sit after the diagram, so they need the gap the diagram used to
   get above them. */
.hero-io .demo-tab-panel .hero-actions { margin:26px 0 0; }
/* Each face says where its full argument lives — the hero is the site's main
   route into the deep pages, not a terminus. */
.demo-more { display:flex; justify-content:flex-end; padding:10px 18px; border-top:1px solid var(--line); font-size:13px; }
@media (max-width:900px) {
  /* Below the width where six pills fit on one line, drop the subtitles and
     let the switcher wrap as a compact icon-and-label cluster. */
  .demo-tabs { border-radius:20px; }
  .demo-tabs button { min-height:38px; padding:6px 12px; border-radius:999px; grid-template-rows:auto; }
  .demo-tabs button small { display:none; }
  .demo-tabs button b { align-self:center; }
}

/* ---------- Home hero: demo-first ---------- */
.hero-io { padding:64px 0 40px; }
.hero-io .eyebrow { font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.6875rem; font-weight:500; letter-spacing:.14em; }
.hero-io h1 { max-width:820px; margin-bottom:1.2rem; font-size:clamp(2.3rem,calc(5.6vw + .4rem),4.1rem); font-weight:700; line-height:1.04; letter-spacing:-.035em; }
.hero-io h1 .accent-word { color:var(--accent); }
.hero-io .hero-lede { max-width:46rem; }
@media (max-width:640px) { .hero-io { padding:44px 0 30px; } }

/* ---------- Environments band ---------- */
.env-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.env-card { padding:24px; border:1px solid color-mix(in srgb,var(--on-dark) 13%,transparent); border-radius:14px; background:color-mix(in srgb,var(--on-dark) 4%,transparent); }
.env-card h3 { margin-bottom:9px; font-size:18px; }
.env-card p { margin:0 0 12px; color:var(--on-dark-dim); font-size:13px; }
.env-card .text-link { font-size:12.5px; }
@media (max-width:1080px) { .env-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:640px) { .env-grid { grid-template-columns:1fr; } }

/* ---------- Scheduler strategy table rows ---------- */
.strategy-list .detail-row { grid-template-columns:210px 1fr; }
@media (max-width:640px) { .strategy-list .detail-row { grid-template-columns:1fr; } }
.strategy-name { font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:13px; font-weight:600; color:var(--ink); overflow-wrap:anywhere; }
.strategy-name small { display:block; margin-top:5px; font-family:var(--font); color:var(--accent); font-size:10.5px; font-weight:750; letter-spacing:.06em; text-transform:uppercase; }

/* ---------- Three-column comparison table ----------
   base.css sizes comparison columns for the two-column .eu table
   (`th { width:50% }`), which squeezes a third column into a word-per-line
   ribbon. Fixed layout with explicit widths, and the Atlas column carries
   the same accent wash the wide .eu table uses. */
.comparison-table.compare-3 { table-layout:fixed; min-width:760px; }
.comparison-table.compare-3 th { width:auto; font-size:13.5px; }
.comparison-table.compare-3 th:nth-child(1), .comparison-table.compare-3 td:nth-child(1) { width:34%; }
.comparison-table.compare-3 th:nth-child(2), .comparison-table.compare-3 td:nth-child(2) { width:28%; }
.comparison-table.compare-3 th:nth-child(3), .comparison-table.compare-3 td:nth-child(3) { width:38%; }
.comparison-table.compare-3 th:last-child, .comparison-table.compare-3 td:last-child { background:var(--accent-soft); color:var(--ink); }
.comparison-table.compare-3 td { padding:18px 22px; line-height:1.6; }
@media (hover:hover) {
  .comparison-table.compare-3 tbody tr:hover td:last-child { background-color:color-mix(in srgb, var(--ink) 7%, var(--accent-soft)); }
}

/* ---------- Callouts inside a split section ----------
   A callout dropped into the two-column split grid would otherwise land in
   the narrow left column; it belongs across the full content width. */
.content-split > .callout, .content-split > .timing-note { grid-column:1 / -1; margin-top:34px; }

/* ---------- Ecosystem grid ----------
   Matches the nexusatlas.net treatment: the current property is a solid
   accent block, the others shift background smoothly on hover. */
/* Five properties, not four — .eu · .io · .net · console · .app, the same
   stack the other family sites show. Cells are separated by 1px grid gaps
   over the container's line colour instead of per-cell borders, so the
   separators stay correct at every breakpoint without nth-child bookkeeping. */
.ecosystem-grid { grid-template-columns:repeat(5,minmax(0,1fr)); gap:1px; background:var(--line); }
.ecosystem-item { border-right:0 !important; border-bottom:0 !important; }
.ecosystem-item p { overflow-wrap:break-word; }
@media (max-width:1180px) { .ecosystem-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:820px) { .ecosystem-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:640px) { .ecosystem-grid { grid-template-columns:1fr; } }
.ecosystem-item { transition:background-color .18s ease; }
a.ecosystem-item:hover { background:color-mix(in srgb, var(--accent) 8%, var(--bg)); }
.ecosystem-item.current { background:var(--accent); }
.ecosystem-item.current .ecosystem-domain,
.ecosystem-item.current strong,
.ecosystem-item.current p { color:#00131a; }
:root[data-color-theme="light"] .ecosystem-item.current .ecosystem-domain,
:root[data-color-theme="light"] .ecosystem-item.current strong,
:root[data-color-theme="light"] .ecosystem-item.current p { color:#fff; }
@media (prefers-reduced-motion:reduce) { .ecosystem-item { transition:none; } }

/* ---------- Playbooks layout B: sticky filterable index + open essays ---------- */
.pb-summary { display:flex; flex-wrap:wrap; gap:10px 22px; margin-top:22px; color:var(--muted); font-size:13px; }
.pb-summary b { color:var(--ink); font-size:15px; margin-right:5px; }
.pb-compare { margin-top:18px; color:var(--muted); font-size:13px; }
.pb-compare a { color:var(--accent); font-weight:650; }

.pb-layout { display:grid; grid-template-columns:272px minmax(0,1fr); gap:60px; align-items:start; }
.pb-rail { position:sticky; top:104px; align-self:start; max-height:calc(100vh - 130px); overflow-y:auto; padding-right:6px; }
.pb-filters { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:20px; }
.pb-filter { padding:6px 12px; border:1px solid var(--line-strong); border-radius:999px; background:var(--bg); color:var(--muted); font:inherit; font-size:12.5px; font-weight:650; cursor:pointer; transition:color .16s,border-color .16s,background .16s; }
.pb-filter:hover { color:var(--accent); border-color:var(--accent); }
.pb-filter.is-active { color:var(--accent); border-color:var(--accent); background:var(--accent-soft); }
.pb-nav { display:grid; gap:1px; }
.pb-nav-group { display:flex; align-items:baseline; justify-content:space-between; margin:20px 0 8px; color:var(--muted); font-size:11px; font-weight:760; letter-spacing:.1em; text-transform:uppercase; }
.pb-nav-group:first-child { margin-top:0; }
.pb-nav-group b { color:var(--accent); font-size:11px; }
.pb-nav a { display:block; padding:7px 11px; border-left:2px solid transparent; border-radius:0 7px 7px 0; color:var(--muted); font-size:13px; line-height:1.45; transition:color .16s,background .16s,border-color .16s; }
.pb-nav a:hover { color:var(--ink); background:var(--surface); }
.pb-nav a.is-active { color:var(--accent); background:var(--accent-soft); border-left-color:var(--accent); font-weight:640; }

.pb-item { padding:38px 0; border-top:1px solid var(--line); scroll-margin-top:104px; }
.pb-group { padding-top:8px; }
.pb-group + .pb-item { border-top:0; padding-top:6px; }
.pb-group-title { display:flex; align-items:baseline; gap:12px; margin-bottom:6px; font-size:clamp(26px,3vw,36px); }
.pb-group-title span { color:var(--accent); font-size:15px; font-weight:700; }
.pb-group-blurb { max-width:62ch; margin-bottom:0; color:var(--muted); font-size:14.5px; }
.pb-item-head { margin-bottom:18px; }
.pb-item-head h3 { margin:10px 0 6px; font-size:clamp(21px,2.2vw,26px); }
.pb-lede { margin:0; color:var(--muted); font-size:15px; }
.pb-item-body { display:grid; grid-template-columns:minmax(0,1fr) 290px; gap:40px; align-items:start; }
.pb-prose p { max-width:70ch; margin-bottom:14px; font-size:14.5px; line-height:1.72; }
.pb-prose p:last-child { margin-bottom:0; }
.pb-prose strong { color:var(--ink); }
.pb-aside { padding:20px 22px; border:1px solid var(--line); border-radius:12px; background:var(--surface); }
.pb-aside h4 { margin:0 0 8px; color:var(--accent); font-size:11px; font-weight:760; letter-spacing:.08em; text-transform:uppercase; }
.pb-aside p { margin:0; color:var(--muted); font-size:13.5px; line-height:1.65; }
.pb-aside strong { color:var(--ink); }

/* filter state */
.pb-layout[data-filter="capability"] .pb-item:not([data-tag="capability"]),
.pb-layout[data-filter="capability"] .pb-group:not([data-group="capability"]),
.pb-layout[data-filter="capability"] .pb-nav a:not([data-tag="capability"]),
.pb-layout[data-filter="capability"] .pb-nav-group:not([data-group="capability"]),
.pb-layout[data-filter="pattern"] .pb-item:not([data-tag="pattern"]),
.pb-layout[data-filter="pattern"] .pb-group:not([data-group="pattern"]),
.pb-layout[data-filter="pattern"] .pb-nav a:not([data-tag="pattern"]),
.pb-layout[data-filter="pattern"] .pb-nav-group:not([data-group="pattern"]),
.pb-layout[data-filter="concept"] .pb-item:not([data-tag="concept"]),
.pb-layout[data-filter="concept"] .pb-group:not([data-group="concept"]),
.pb-layout[data-filter="concept"] .pb-nav a:not([data-tag="concept"]),
.pb-layout[data-filter="concept"] .pb-nav-group:not([data-group="concept"]) { display:none; }

@media (max-width:1080px) {
  .pb-layout { grid-template-columns:1fr; gap:34px; }
  .pb-rail { position:static; max-height:none; overflow:visible; padding-bottom:10px; border-bottom:1px solid var(--line); }
  .pb-nav { grid-template-columns:1fr 1fr; display:grid; }
  .pb-nav-group { grid-column:1/-1; }
  .pb-item-body { grid-template-columns:1fr; gap:22px; }
}
@media (max-width:640px) { .pb-nav { grid-template-columns:1fr; } }
@media (prefers-reduced-motion:reduce) { .pb-nav a, .pb-filter { transition:none; } }

/* ---------- Three-step process cards ----------
   base.css sizes .journey for four cards; a three-step process needs the
   full width, or the cards huddle at the left of the container. */
.journey.journey-3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.journey.journey-3 .journey-card { min-height:262px; padding:30px; }
.journey.journey-3 .journey-card::before { font-size:14px; letter-spacing:.04em; margin-bottom:56px; }
.journey.journey-3 .journey-card h3 { font-size:24px; }
.journey.journey-3 .journey-card p { font-size:14.5px; line-height:1.68; }
@media (max-width:1080px) { .journey.journey-3 { grid-template-columns:1fr 1fr; } }
@media (max-width:640px) { .journey.journey-3 { grid-template-columns:1fr; } .journey.journey-3 .journey-card { min-height:0; } }

/* ---------- Bearer table: long names wrap instead of forcing a wide column ---------- */
.bearer-table td:first-child { white-space:normal; min-width:186px; }

/* ---------- Honeypot field (forms) ---------- */
.hp-field { position:absolute !important; left:-9999px !important; width:1px; height:1px; opacity:0; pointer-events:none; }

/* ---------- Misc ---------- */
.mono { font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; }
.section-sub { margin-top:64px; }
.section-sub h3 { font-size:clamp(24px,2.6vw,32px); margin-bottom:14px; }
.footnote { margin-top:14px; color:var(--muted); font-size:12.5px; }
.footnote strong { color:var(--ink); }
.anchor-target { scroll-margin-top:110px; }
.section[id], .section-sub[id], h3[id], article[id] { scroll-margin-top:110px; }

/* ================================================================
   STATIC EXPLANATORY DIAGRAMS  (`.dg`) — architecture + integrations
   ----------------------------------------------------------------
   Two diagrams on this site are pure labels: a layered picture of what
   the software is made of (/architecture) and the anatomy of a radio
   adapter (/integrations). Nothing about them moves, so they are HTML
   and CSS rather than canvas — which buys real selectable text, working
   `.txt` twins, a screen-reader outline (each block is a real heading)
   and reflow to one column on a phone instead of a canvas shrinking to
   illegibility.

   The colour rule is the site rule, applied semantically rather than
   decoratively: grayscale plus ONE accent. Depth is carried by
   elevation and border treatment, never by hue —

     solid border + --surface-2 ground  = inside the daemon
     dashed border + no ground          = outside it (kernel, radio, peer)
     accent                             = spent exactly twice, on the
                                          engine band and on the one
                                          telemetry field that changes
                                          scheduling behaviour.

   Chrome (frame / head / footer note) deliberately mirrors `.demo` so a
   static diagram and a simulation read as the same family of object.
   ================================================================ */

/* ---------- Shared frame ---------- */
.dg { margin-top:30px; border:1px solid var(--line); border-radius:14px; background:var(--surface); }
.dg-head { display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px; padding:14px 20px; border-bottom:1px solid var(--line); }
.dg-head strong { color:var(--ink); font-size:13.5px; letter-spacing:-.01em; }
.dg-body { padding:22px 20px; }
.dg-note { padding:12px 20px; border-top:1px solid var(--line); color:var(--muted); font-size:12px; line-height:1.65; }
.dg-note strong { color:var(--ink); }
.dg-note code { font-size:11.5px; }

/* Legend: the key to the border language above. Marks are hairlines, so
   the legend states the rule in the same ink the diagram draws it in. */
.dg-legend { display:flex; flex-wrap:wrap; align-items:center; gap:7px 16px; margin-left:auto; color:var(--muted); font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:9.5px; font-weight:600; letter-spacing:.11em; text-transform:uppercase; }
/* <b>, not <span>: the plaintext twin renders a closing </b> as a space
   and a closing </span> as nothing, so three legend spans in a row come
   out of `/architecture.txt` as one run-on word. Same reason the opt-in
   tag below is a <b>. */
.dg-legend b { display:inline-flex; align-items:center; gap:7px; font-weight:inherit; }
.dg-legend i { flex:none; width:17px; height:0; border-top:1px solid var(--line-strong); }
.dg-legend .lg-out i { border-top-style:dashed; }
.dg-legend .lg-key i { border-top:2px solid var(--accent); }
@media (max-width:820px) { .dg-legend { margin-left:0; } }

/* ---------- Shared parts of a labelled block ---------- */
.dg h3 { margin:0 0 6px; color:var(--ink); font-size:15px; font-weight:660; letter-spacing:-.01em; line-height:1.32; }
.dg h3.mono { font-size:13.5px; letter-spacing:0; overflow-wrap:anywhere; }
.dg p { margin:0; color:var(--muted); font-size:12.5px; line-height:1.62; }
.dg p + p { margin-top:8px; }
.dg-cap { display:block; margin-bottom:9px; color:var(--muted); font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:9.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; }
.dg-path { margin:0 0 8px; color:var(--text); font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:11.5px; line-height:1.66; overflow-wrap:anywhere; }
/* An identifier broken across two lines by its own hyphen reads as two
   identifiers. Every inline chip here is short enough to hold one line
   even in the narrowest cell. */
.dg code { white-space:nowrap; }
/* Scoped with .dg so it outranks `.dg-cell b`, which would otherwise
   make the pill a full-width block. */
.dg .dg-tag { display:inline-block; margin-left:7px; padding:2px 7px; border:1px solid var(--line-strong); border-radius:999px; color:var(--muted); font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:9px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; vertical-align:2px; white-space:nowrap; }
.dg a.text-link { margin-top:9px; font-size:12px; }

/* ---------- Diagram 1: the layered stack ---------- */
.dg-band { display:grid; grid-template-columns:172px minmax(0,1fr); gap:12px 22px; align-items:start; padding:16px; border-radius:12px; }
.dg-band-out { border:1px dashed var(--line-strong); background:transparent; }
.dg-band-in { border:1px solid var(--line-strong); background:var(--surface-2); }
/* The engine is the one band that IS the product, so it carries the
   accent. The 3px left edge is the site's existing "this one matters"
   mark (`.callout`), reused rather than reinvented — and unlike a tinted
   border alone it survives the light theme, where a 42% accent mix reads
   as just another grey. */
.dg-band-key { border-color:color-mix(in srgb,var(--accent) 42%,var(--line-strong)); border-left:3px solid var(--accent); }
.dg-band-key .dg-rail .dg-cap { color:var(--accent); }
.dg-rail p { font-size:11.5px; line-height:1.55; }
.dg-rail h3 { font-size:16px; }
.dg-cells { display:grid; gap:11px; }
.dg-sub { display:grid; gap:8px; }
.dg-row { display:grid; gap:9px; }
.dg-row-2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.dg-row-3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.dg-row-5 { grid-template-columns:repeat(5,minmax(0,1fr)); }
.dg-row-6 { grid-template-columns:repeat(6,minmax(0,1fr)); }
.dg-cell { padding:12px 13px; border:1px solid var(--line); border-radius:10px; background:var(--bg); }
.dg-band-out .dg-cell { border-style:dashed; }
/* Cells carry a bolded label rather than a heading: the five band names
   are the outline a screen reader should get, and twenty-odd sub-headings
   under one h2 would bury it. */
.dg-cell b { display:block; margin-bottom:5px; color:var(--ink); font-size:13px; font-weight:660; letter-spacing:-.005em; line-height:1.35; }
.dg-cell b.mono { font-size:12.5px; letter-spacing:0; overflow-wrap:anywhere; }
.dg-cell p { font-size:11.5px; line-height:1.55; }

/* Connector between two bands: a hairline dropping to a chevron, with the
   relationship named beside it. A labelled edge, so the `.txt` twin and a
   screen reader get the flow too — not just a decorative arrow. */
.dg-flow { display:grid; grid-template-columns:172px minmax(0,1fr); gap:22px; }
/* Block, not flex: a flex container turns every text run and inline
   <code> into a separate flex item, which shreds the label into a
   staircase the moment it needs two lines. */
.dg-flow > p { grid-column:2; position:relative; min-height:38px; padding:10px 0 10px 40px; color:var(--muted); font-size:12px; line-height:1.5; }
.dg-flow > p::before { content:""; position:absolute; left:17px; top:0; bottom:0; width:1px; background:var(--line-strong); }
.dg-flow > p::after { content:""; position:absolute; left:13px; bottom:1px; width:8px; height:8px; border-right:1px solid var(--line-strong); border-bottom:1px solid var(--line-strong); transform:rotate(45deg); }

@media (max-width:1180px) {
  .dg-row-6, .dg-row-5 { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:960px) {
  .dg-band, .dg-flow { grid-template-columns:minmax(0,1fr); }
  .dg-flow > p { grid-column:1; }
  .dg-rail { padding-bottom:2px; border-bottom:1px solid var(--line); }
}
@media (max-width:760px) {
  .dg-row-6, .dg-row-5, .dg-row-3 { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .dg-body { padding:16px 12px; }
  .dg-band { padding:14px 12px; }
}
@media (max-width:520px) {
  .dg-row-6, .dg-row-5, .dg-row-3, .dg-row-2 { grid-template-columns:minmax(0,1fr); }
}

/* ---------- Diagram 2: the adapter, left to right ---------- */
/* The first two blocks span both rows, so they stretch past their own
   text. Rather than leave two hollow rectangles (or let them end
   raggedly mid-frame), every block is a flex column with an identity
   line pinned to its bottom edge — head, body, foot, exactly like the
   `.demo` frame. Columns are uneven on purpose: the blocks carrying the
   most prose get the most width, which is what keeps the two sides of
   the fork close to the same height. */
.dg-track { display:grid; grid-template-columns:.76fr .94fr 1.17fr 1.13fr; gap:16px 44px; }
.dg-stage { position:relative; display:flex; flex-direction:column; padding:15px 16px; border:1px solid var(--line-strong); border-radius:12px; background:var(--surface-2); }
.dg-foot { margin:14px 0 0; padding-top:11px; border-top:1px solid var(--line); color:var(--muted); font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:10px; line-height:1.65; overflow-wrap:anywhere; }
.dg-stage .dg-foot { margin-top:auto; }
.dg-stage-out { border-style:dashed; background:transparent; }
.dg-stage-plain { background:var(--bg); }
/* Chevrons are pure decoration — every relationship they draw is already
   said in the block's own micro-label, so nothing is lost to a reader
   who never sees them. */
.dg-stage::before { content:"→"; position:absolute; right:100%; top:50%; width:46px; transform:translateY(-50%); color:var(--line-strong); font-size:17px; line-height:1; text-align:center; }
.dg-s1 { grid-column:1; grid-row:1 / span 2; }
.dg-s2 { grid-column:2; grid-row:1 / span 2; }
.dg-s3a { grid-column:3; grid-row:1; }
.dg-s4a { grid-column:4; grid-row:1; }
.dg-s3b { grid-column:3; grid-row:2; }
.dg-s4b { grid-column:4; grid-row:2; }
.dg-s1::before { content:none; }

/* The seven fields the adapter puts on the socket. The one that is wired
   to a scheduling decision is the accent; the other six are not styled
   as failures — they are simply not load-bearing yet. */
.dg-fields { display:flex; flex-wrap:wrap; gap:4px; margin:0 0 10px; padding:0; list-style:none; }
.dg-fields li { padding:2px 6px; border:1px solid var(--line); border-radius:6px; background:var(--bg); color:var(--muted); font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:10px; white-space:nowrap; }
.dg-fields li.is-key { border-color:var(--accent); background:var(--accent-soft); color:var(--accent); }

.dg-split { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-top:24px; padding-top:22px; border-top:1px solid var(--line); }
.dg-panel { padding:16px 18px; border:1px solid var(--line); border-left:3px solid var(--line-strong); border-radius:10px; background:var(--bg); }
.dg-panel-on { border-left-color:var(--accent); background:color-mix(in srgb,var(--accent) 5%,var(--bg)); }
.dg-panel-on .dg-cap { color:var(--accent); }
.dg-panel-off { border-left-style:dashed; }

@media (max-width:1160px) {
  /* Two columns, and the fork survives it: each channel keeps its own
     landing in Atlas on the same row. */
  .dg-track { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .dg-s1 { grid-column:1; grid-row:1; }
  .dg-s2 { grid-column:2; grid-row:1; }
  .dg-s3a { grid-column:1; grid-row:2; }
  .dg-s4a { grid-column:2; grid-row:2; }
  .dg-s3b { grid-column:1; grid-row:3; }
  .dg-s4b { grid-column:2; grid-row:3; }
  .dg-s3a::before, .dg-s3b::before { content:none; }
}
@media (max-width:860px) { .dg-split { grid-template-columns:minmax(0,1fr); } }
@media (max-width:700px) {
  /* One column, in reading order: radio, adapter, then the data chain
     followed by the telemetry chain. Chevrons turn to point down. */
  .dg-track { grid-template-columns:minmax(0,1fr); gap:32px; }
  .dg-track > .dg-stage { grid-column:1; grid-row:auto; }
  .dg-track .dg-stage::before { content:"↓"; right:auto; left:50%; top:auto; bottom:100%; width:auto; margin-bottom:7px; transform:translateX(-50%); }
  .dg-track .dg-s1::before { content:none; }
}


/* ---------- Adapter flow, drawn ----------
   Ported from the original .io diagram: same topology, our palette. Depth is
   the same rule the other diagrams use — dashed and unfilled is not ours. */
.af-figure { margin:0; padding:22px 18px; }
.af-svg { display:block; width:100%; height:auto; }
.af-svg text { font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; text-anchor:middle; }
.af-svg rect { fill:var(--surface-2); stroke:var(--line-strong); stroke-width:1.4; }
.af-svg .af-hw rect { fill:none; stroke-dasharray:7 5; stroke:var(--muted); }
.af-svg .af-proc-key rect { stroke:color-mix(in srgb,var(--accent) 55%,var(--line-strong)); }
.af-svg .af-inner rect { fill:var(--bg); stroke:var(--line); }
.af-svg .af-inner-key rect { stroke:color-mix(in srgb,var(--accent) 45%,var(--line)); }
.af-svg .af-rule { stroke:var(--line-strong); stroke-width:1; }
.af-svg .af-t { fill:var(--ink); font-size:19px; font-weight:700; letter-spacing:.09em; }
.af-svg .af-t2 { fill:var(--ink); font-size:14px; font-weight:640; letter-spacing:.05em; }
.af-svg .af-m { fill:var(--text); font-size:13px; }
.af-svg .af-d { fill:var(--muted); font-size:12.5px; }
.af-svg .af-sub { fill:var(--muted); font-size:11.5px; }
.af-svg .af-lbl { fill:var(--text); font-size:12.5px; }
.af-svg .af-key { fill:var(--accent); }
.af-svg .af-wire { color:color-mix(in srgb,var(--accent) 62%,var(--line-strong)); }
.af-svg .af-wire line, .af-svg .af-wire path { stroke:currentColor; stroke-width:1.8; fill:none; }
.af-svg .af-wire-dash line { stroke-dasharray:8 6; color:var(--muted); }
.af-svg .af-wire-a { color:color-mix(in srgb,var(--accent) 88%,transparent); }
.af-svg .af-wire-a path { stroke-width:2.4; }
.af-svg .af-wire-b { color:color-mix(in srgb,var(--accent) 50%,var(--line-strong)); }
/* Below the width where 12px type inside a 1600-unit viewBox stops being
   legible, let the figure scroll rather than shrink into illegibility. */
@media (max-width:900px) {
  .af-figure { overflow-x:auto; padding:18px 14px; }
  .af-svg { width:1180px; }
}

/* ---------- System architecture, drawn ----------
   Ported from the original .io architecture diagram. Shares .af-svg's type and
   box styles; adds the tier bands. */
.sa-svg .sa-band rect { fill:none; stroke:var(--line); stroke-width:1.2; }
.sa-svg .sa-band-out rect { stroke-dasharray:7 5; stroke:var(--muted); }
.sa-svg .sa-tier { text-anchor:start; letter-spacing:.13em; font-size:11px; fill:var(--muted); }
.sa-svg .sa-tier-r { text-anchor:end; }
.sa-svg .sa-row { text-anchor:start; letter-spacing:.11em; font-size:10.5px; fill:var(--muted); }
.sa-svg .sa-cap { text-anchor:start; }
.sa-svg .af-up { fill:var(--good); }
.sa-svg .af-upt { text-anchor:start; fill:var(--good); font-size:10.5px; letter-spacing:.09em; }
@media (max-width:900px) { .sa-svg { width:1240px; } }

/* ---------- Intent surface diagram ---------- */
.li-svg .af-hw rect { fill:none; stroke-dasharray:7 5; stroke:var(--muted); }
@media (max-width:900px) { .li-svg { width:1180px; } }

/* the return arrow is a path, not a line — dash it too */
.af-svg .af-wire-dash path { stroke-dasharray:8 6; }

/* ---------- /demos: the trust ladder ----------
   Depth carries the claim: the simulated rung is dashed and unfilled, the
   executed rung solid, the fielded rung solid with the accent edge. The
   visual weight is the argument. */
.dm-ladder { display:grid; gap:14px; }
.dm-rung { display:grid; grid-template-columns:300px minmax(0,1fr); gap:28px; padding:24px 26px; border:1px solid var(--line-strong); border-radius:14px; background:var(--surface); transition:background-color .24s ease, border-color .24s ease, box-shadow .24s ease; }
/* Hover lifts each rung off the page so the three read as separable
   objects while you scan them. Each variant keeps its own resting
   ground — the simulated rung stays unfilled, so it warms from
   transparent rather than from the surface. */
.dm-rung:hover { background-color:color-mix(in srgb,var(--accent) 6%,var(--surface)); border-color:color-mix(in srgb,var(--accent) 38%,var(--line-strong)); }
.dm-sim { border-style:dashed; background:transparent; }
.dm-sim:hover { background-color:color-mix(in srgb,var(--accent) 5%,transparent); }
@media (prefers-reduced-motion:reduce) { .dm-rung { transition:none; } }
.dm-tier { display:block; margin-bottom:9px; color:var(--muted); font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:10px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; }
.dm-rung-key h3 { margin:0 0 9px; font-size:20px; letter-spacing:-.015em; }
.dm-runs { margin:0; color:var(--muted); font-size:13.5px; line-height:1.65; }
.dm-rung-body { display:grid; gap:18px; align-content:center; }
.dm-claim { display:grid; grid-template-columns:112px minmax(0,1fr); gap:18px; align-items:baseline; }
.dm-claim > span { color:var(--accent); font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:10px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; }
.dm-claim-not > span { color:var(--muted); }
.dm-claim p { margin:0; color:var(--text); font-size:14.5px; line-height:1.66; }
.dm-claim-not p { color:var(--muted); }
.dm-items { margin-top:18px; padding-top:16px; border-top:1px solid var(--line); }
.dm-items b { display:block; color:var(--accent); font-size:32px; font-weight:700; line-height:1; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.dm-items span { display:block; margin-top:7px; color:var(--muted); font-size:12.5px; line-height:1.5; }
@media (max-width:900px) {
  .dm-rung { grid-template-columns:1fr; gap:18px; }
  .dm-claim { grid-template-columns:1fr; gap:4px; }
}

/* ---------- /demos: failure → demo map ---------- */
.dm-map { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
/* Each family is its own panel — four boxes reading as four boxes, with a
   header strip carrying the count so the shape of the catalogue is visible
   before you read a single row. */
.dm-group { border:1px solid var(--line); border-radius:14px; background:var(--surface); overflow:hidden; }
.dm-group > h3 { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0; padding:13px 17px; border-bottom:1px solid var(--line); background:color-mix(in srgb,var(--ink) 3.5%,transparent); color:var(--muted); font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:10.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; }
.dm-group > h3 b { color:var(--accent); font-size:11.5px; font-variant-numeric:tabular-nums; }
.dm-rows { padding:8px 9px; }
.dm-row { display:grid; grid-template-columns:minmax(0,1fr) 34px minmax(0,1.05fr); align-items:center; gap:6px; padding:11px 12px; border-radius:10px; transition:background .16s ease; }
.dm-row:hover { background:var(--bg); }
.dm-fail { color:var(--text); font-size:13.5px; line-height:1.5; }
.dm-arrow { position:relative; height:1px; background:var(--line-strong); }
.dm-arrow::after { content:""; position:absolute; right:0; top:50%; width:5px; height:5px; margin-top:-3px; border-top:1px solid var(--line-strong); border-right:1px solid var(--line-strong); transform:rotate(45deg); }
.dm-row:hover .dm-arrow, .dm-row:hover .dm-arrow::after { background:var(--accent); border-color:var(--accent); }
.dm-demo b { display:block; color:var(--ink); font-size:13.5px; font-weight:640; }
.dm-row:hover .dm-demo b { color:var(--accent); }
.dm-demo small { display:block; margin-top:3px; color:var(--muted); font-size:12px; line-height:1.45; }
@media (max-width:900px) { .dm-map { grid-template-columns:1fr; gap:28px; } }

/* ---------- Companion-viewer switcher (/demos) ----------
   Three viewers, one player area. Each panel keeps its own preload="none"
   video, so choosing a viewer is what fetches it. */
/* Same instrument as the hero switcher — a floating pill with a raised active
   thumb — scaled up, because here each option is a whole viewer rather than a
   face of one diagram. */
.vw-tabs { display:flex; flex-wrap:wrap; justify-content:center; gap:5px; width:fit-content; max-width:100%; margin-inline:auto; padding:5px; border:1px solid var(--line); border-radius:999px; background:color-mix(in srgb,var(--surface) 74%,transparent); box-shadow:0 14px 34px rgba(2,8,14,.16); backdrop-filter:blur(12px); }
.vw-tabs button { display:grid; grid-template-columns:20px auto; grid-template-rows:auto auto; align-items:center; column-gap:10px; min-height:52px; padding:7px 18px; border:1px solid transparent; border-radius:999px; background:transparent; color:var(--muted); font:inherit; text-align:left; cursor:pointer; transition:border-color .22s ease,background .22s ease,color .22s ease,box-shadow .22s ease; }
.vw-tabs button svg { grid-row:1/-1; width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.vw-tabs button b { align-self:end; color:var(--ink); font-size:13.5px; font-weight:660; line-height:1.2; letter-spacing:-.01em; }
.vw-tabs button small { align-self:start; margin-top:1px; color:var(--muted); font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:9.5px; letter-spacing:.05em; text-transform:uppercase; }
.vw-tabs button:hover { color:var(--ink); background:color-mix(in srgb,var(--surface) 84%,transparent); }
.vw-tabs button[aria-selected="true"] { color:var(--accent); border-color:color-mix(in srgb,var(--accent) 45%,transparent); background:color-mix(in srgb,var(--accent) 12%,var(--surface)); box-shadow:0 5px 18px color-mix(in srgb,var(--accent) 12%,transparent); }
.vw-tabs button[aria-selected="true"] b { color:var(--accent); }
.vw-tabs button[aria-selected="true"] small { color:color-mix(in srgb,var(--accent) 55%,var(--muted)); }
@media (prefers-reduced-motion:reduce) { .vw-tabs button { transition:none; } }
.vw-panel { margin-top:34px; }
.vw-panel[hidden] { display:none; }
/* The panel copy runs the full container, like the hero lede, and keeps a
   real gap before the footage rather than sitting on top of it. */
.vw-copy { max-width:none; margin:0 0 26px; color:var(--muted); font-size:15px; line-height:1.7; }
.vw-pending { padding:26px 24px; border:1px dashed var(--line-strong); border-radius:14px; color:var(--muted); font-size:14px; line-height:1.65; }
.vw-pending strong { color:var(--ink); }
@media (max-width:820px) {
  .vw-tabs { border-radius:22px; width:100%; }
  .vw-tabs button { flex:1 1 100%; min-height:48px; }
}