/* Pulse Publish — public pages in the DebugInit design system (debuginit-lp/DESIGN-SYSTEM.md §0, the app look):
   light and card-less, no shadows, sections divided by one hairline, a floating glass island for the header,
   Cormorant Garamond headlines with an italic emphasis word, Plus Jakarta Sans for everything else, Pulse pink as the
   one spark, 50 px pill buttons, the 8 px grid and the fluid type scale. Day and Night follow the system unless chosen. */
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 200 800; font-display: swap; src: url(/assets/fonts/plus-jakarta-sans-var.woff2) format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 300 700; font-display: swap; src: url(/assets/fonts/cormorant-garamond-n-latin-ac5feb.woff2) format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 300 700; font-display: swap; src: url(/assets/fonts/cormorant-garamond-i-latin-880eab.woff2) format("woff2"); }

:root {
  --desk: #FFFFFF; --paper: #FAF7F0; --paper-2: #F3EFE7; --ink: #0F1A2E; --ink-2: #364157; --ink-3: #5B6476;
  --pulse: #B3006D; --pulse-2: #8F0057; --on-pulse: #FFFFFF; --pulse-soft: color-mix(in srgb, #B3006D 9%, transparent);
  --gilt: #E8D3A9; --line: color-mix(in srgb, var(--ink) 9%, transparent); --line-2: color-mix(in srgb, var(--ink) 16%, transparent);
  --success: #2E6B3A; --attention: #855000; --problem: #A8321A;
  --code-bg: #F6F4EF; --code-ink: #1D2433; --code-k: #B3006D; --code-s: #2E6B3A; --code-c: #7A8394; --code-n: #855000;
  --font-display: "Cormorant Garamond", "EB Garamond", "Iowan Old Style", Palatino, Georgia, serif;
  --font-sans: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --t--1: clamp(0.8875rem, 0.8854rem + 0.0093vw, 0.8938rem); --t-0: clamp(1.0625rem, 1.0208rem + 0.1852vw, 1.1875rem);
  --t-1: clamp(1.2750rem, 1.1724rem + 0.4562vw, 1.5829rem); --t-2: clamp(1.5300rem, 1.3366rem + 0.8593vw, 2.1101rem);
  --t-3: clamp(1.8360rem, 1.5104rem + 1.4470vw, 2.8127rem); --t-4: clamp(2.2032rem, 1.6878rem + 2.2906vw, 3.7493rem);
  --t-5: clamp(2.6438rem, 1.8592rem + 3.4874vw, 4.9979rem);
  --fs-label: 12.5px; --fs-small: 14px; --fs-ui: 15.5px; --tap: 44px;
  --sp-xs: 8px; --sp-s: 16px; --sp-m: 24px; --sp-l: 48px; --sp-xl: 96px; --r-full: 999px; --r-m: 14px; --r-l: 20px;
  --w-page: 1200px; --measure: 34em; --spring: cubic-bezier(.2, .9, .25, 1);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --desk: #1C2128; --paper: #22272E; --paper-2: #2D333B; --ink: #CDD5DE; --ink-2: #ADBAC7; --ink-3: #8F9CAA;
  --pulse: #FF7CB8; --pulse-2: #FF9ACB; --on-pulse: #1C2128; --gilt: #373E47; --success: #7FC48C; --attention: #E2B15C; --problem: #F09A86;
  --code-bg: #161A20; --code-ink: #CDD5DE; --code-k: #FF7CB8; --code-s: #7FC48C; --code-c: #768390; --code-n: #E2B15C; color-scheme: dark; } }
:root[data-theme="dark"] {
  --desk: #1C2128; --paper: #22272E; --paper-2: #2D333B; --ink: #CDD5DE; --ink-2: #ADBAC7; --ink-3: #8F9CAA;
  --pulse: #FF7CB8; --pulse-2: #FF9ACB; --on-pulse: #1C2128; --gilt: #373E47; --success: #7FC48C; --attention: #E2B15C; --problem: #F09A86;
  --code-bg: #161A20; --code-ink: #CDD5DE; --code-k: #FF7CB8; --code-s: #7FC48C; --code-c: #768390; --code-n: #E2B15C; color-scheme: dark; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; }
body { margin: 0; background: var(--desk); color: var(--ink-2); font: 400 var(--t-0)/1.6 var(--font-sans); overflow-x: hidden;
  font-feature-settings: "kern", "liga"; -webkit-font-smoothing: antialiased; }
a { color: var(--pulse); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--pulse-2); }
img, svg { max-width: 100%; }
:focus-visible { outline: 2px solid var(--pulse); outline-offset: 3px; border-radius: 6px; }
.wrap { width: min(var(--w-page), 100% - 32px); margin-inline: auto; }
.skip { position: absolute; left: -999px; } .skip:focus { left: 16px; top: 16px; z-index: 50; background: var(--desk); padding: 8px 12px; }

/* type */
h1, h2 { font-family: var(--font-display); color: var(--ink); font-weight: 600; margin: 0; text-wrap: balance; }
h1 { font-size: var(--t-5); line-height: 1.0; letter-spacing: -0.02em; }
h1.long { font-size: var(--t-4); line-height: 1.04; }
h2 { font-size: var(--t-3); line-height: 1.08; letter-spacing: -0.01em; }
h1 em, h2 em { font-style: italic; color: var(--pulse); font-weight: 500; }
h3 { font: 650 var(--t-1)/1.3 var(--font-sans); color: var(--ink); letter-spacing: -0.006em; margin: 0; }
h4 { font: 650 var(--t-0)/1.4 var(--font-sans); color: var(--ink); margin: 0; }
p { margin: 0 0 var(--sp-s); max-width: var(--measure); }
.lead { font-size: var(--t-1); line-height: 1.45; max-width: 30em; color: var(--ink-2); }
.label { font: 700 var(--fs-label)/1.2 var(--font-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--pulse); margin: 0 0 var(--sp-s); display: block; }
.small, small { font-size: var(--fs-small); color: var(--ink-3); }
:root[data-theme="dark"] h1, :root[data-theme="dark"] h2 { font-weight: 650; }

/* island header: a floating glass pill that tucks away on the way down */
.hd { position: fixed; z-index: 40; top: 12px; left: 50%; translate: -50% 0; width: max-content; max-width: calc(100% - 24px);
  display: flex; align-items: center; gap: 6px; height: 56px; padding: 0 8px 0 14px; border-radius: var(--r-full);
  border: 1px solid var(--line-2); background: color-mix(in srgb, var(--desk) 72%, transparent);
  -webkit-backdrop-filter: saturate(1.7) blur(18px); backdrop-filter: saturate(1.7) blur(18px);
  transition: translate 420ms var(--spring), opacity 300ms ease; }
.hd.is-away { translate: -50% calc(-100% - 24px); opacity: 0; pointer-events: none; }
.hd__brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); font-weight: 700; font-size: var(--fs-ui); margin-right: 8px; white-space: nowrap; }
.hd__brand img { width: 40px; height: 26px; }
.hd__brand span b { color: var(--pulse); font-weight: 700; }
.hd nav { display: flex; align-items: center; gap: 2px; }
.hd nav a { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 14px; border-radius: var(--r-full); color: var(--ink-2);
  text-decoration: none; font: 600 var(--fs-small)/1 var(--font-sans); white-space: nowrap; }
.hd nav a:hover { color: var(--ink); background: var(--pulse-soft); }
.hd nav a[aria-current="page"] { color: var(--pulse); }
.theme { width: var(--tap); height: var(--tap); border-radius: 50%; border: 0; background: transparent; color: var(--ink-2); cursor: pointer; display: grid; place-items: center; }
.theme:hover { background: var(--pulse-soft); color: var(--ink); }
.theme svg { width: 20px; height: 20px; }
.hd .cta { margin-left: 4px; }
main { padding-top: 84px; }

/* buttons: 50 px pills */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 0 26px; border-radius: var(--r-full);
  font: 600 var(--fs-ui)/1 var(--font-sans); letter-spacing: -0.005em; text-decoration: none; cursor: pointer; border: 0;
  transition: transform 160ms var(--spring), background 160ms ease, box-shadow 160ms ease; }
.btn:active { transform: scale(.97); }
.btn--primary { background: var(--pulse); color: var(--on-pulse); }
.btn--primary:hover { background: var(--pulse-2); color: var(--on-pulse); }
.btn--quiet { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line-2); }
.btn--quiet:hover { color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.btn--sm { min-height: var(--tap); padding: 0 18px; font-size: var(--fs-small); }
.btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: var(--sp-m); }

/* sections: words on the page, one hairline between */
.sec { padding-block: clamp(56px, 7vw, 112px); }
.sec + .sec { border-top: 1px solid var(--line); }
.sec__hd { max-width: 44rem; margin-bottom: var(--sp-l); }
.sec__hd p { margin-top: var(--sp-s); }

/* hero */
.hero { padding-block: clamp(40px, 6vw, 80px) clamp(48px, 6vw, 96px); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.hero h1 { margin-bottom: var(--sp-m); }
.hero .trace { display: block; width: 200px; height: 22px; margin: 0 0 var(--sp-m); color: var(--pulse); }
.hero .trace path { stroke-dasharray: 260; stroke-dashoffset: 260; animation: draw 2.8s var(--spring) .3s infinite; }
@keyframes draw { 0% { stroke-dashoffset: 260 } 45%, 80% { stroke-dashoffset: 0 } 100% { stroke-dashoffset: -260 } }
.facts { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: var(--sp-m); padding: 0; list-style: none; font-size: var(--fs-small); color: var(--ink-3); }
.facts li::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--pulse); margin-right: 8px; vertical-align: 2px; }

/* the flow graphic */
.flow { position: relative; }
.flow svg { display: block; width: 100%; height: auto; overflow: visible; }
.flow .wire { fill: none; stroke: var(--line-2); stroke-width: 1.5; }
.flow .wire.on { stroke: color-mix(in srgb, var(--pulse) 45%, transparent); }
.flow .wire.off { stroke-dasharray: 3 5; opacity: .5; }
.flow .ecg { fill: none; stroke: var(--pulse); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.flow .tile { fill: var(--paper); stroke: var(--line-2); stroke-width: 1.2; }
.flow .tile-play { fill: var(--pulse); }
.flow .t { font: 600 11px var(--font-sans); fill: var(--ink-3); letter-spacing: .08em; text-transform: uppercase; }
.flow .t-ink { font: 600 12.5px var(--font-sans); fill: var(--ink-2); }
.flow .gate-ring { fill: var(--desk); stroke: var(--line-2); stroke-width: 1.5; transition: stroke 300ms ease; }
.flow .gate-fill { fill: none; stroke: var(--pulse); stroke-width: 4; stroke-linecap: round; transition: stroke-dashoffset 900ms var(--spring); }
.flow .gate-tick { fill: none; stroke: var(--pulse); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; transition: stroke-dashoffset 500ms var(--spring); }
.flow[data-gate="ok"] .gate-tick { stroke-dashoffset: 0; }
.flow[data-gate="changed"] .gate-ring { stroke: var(--attention); }
.flow .net { cursor: pointer; outline: none; }
.flow .net circle { fill: var(--desk); stroke: var(--line-2); stroke-width: 1.5; transition: fill 300ms ease, stroke 300ms ease, transform 400ms var(--spring); transform-box: fill-box; transform-origin: center; }
.flow .net text { font: 700 11px var(--font-sans); fill: var(--ink-2); text-anchor: middle; dominant-baseline: central; pointer-events: none; transition: fill 300ms ease; }
.flow .net:hover circle, .flow .net:focus-visible circle { stroke: var(--pulse); transform: scale(1.12); }
.flow .net.is-off circle { opacity: .45; stroke-dasharray: 3 3; }
.flow .net.is-off text { opacity: .5; }
.flow .net.is-posted circle { fill: var(--pulse); stroke: var(--pulse); }
.flow .net.is-posted text { fill: var(--on-pulse); }
.flow .net.is-picked circle { stroke: var(--pulse); stroke-width: 2.5; }
.flow .dot { fill: var(--pulse); }
.flow__status { min-height: 3.2em; font-size: var(--fs-small); color: var(--ink-2); max-width: none; }
.flow__status b { color: var(--ink); }
.flow__info { margin-top: var(--sp-s); padding-top: var(--sp-s); border-top: 1px solid var(--line); font-size: var(--fs-small); color: var(--ink-3); min-height: 3.2em; }
.flow__info b { color: var(--ink); font-weight: 650; }

/* the DebugInit ecosystem band */
.eco { border-top: 1px solid var(--line); padding-block: clamp(36px, 5vw, 64px); }
.eco__in { display: flex; align-items: center; flex-wrap: wrap; gap: 20px clamp(24px, 4vw, 56px); }
.eco__mark img { display: block; width: clamp(130px, 14vw, 180px); height: auto; }
.eco__words { flex: 1 1 320px; }
.eco__words .label { margin-bottom: 8px; }
.eco__line { font: 600 var(--t-3)/1.08 var(--font-display); color: var(--ink); margin: 0; max-width: 22ch; letter-spacing: -0.01em; }
.eco__line em { font-style: italic; font-weight: 500; color: var(--pulse); }
.eco__go { margin-left: auto; }
@media (max-width: 760px) { .eco__go { margin-left: 0; } }

/* rows (no cards): numbered steps, lists */
.rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.rows > li { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: var(--sp-s); padding: var(--sp-m) 0; border-bottom: 1px solid var(--line); }
.rows .n { font: 600 var(--t-2)/1 var(--font-display); color: var(--pulse); font-variant-numeric: lining-nums; }
.rows h3 { margin-bottom: 6px; }
.rows p { margin: 0; }
.rows.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(24px, 5vw, 72px); }
.cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 5vw, 72px); }
.cols .rows > li { grid-template-columns: minmax(0, 1fr); }
.netlist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); border-top: 1px solid var(--line); }
.netlist li { padding: 18px 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; align-items: start; padding-right: 16px; }
.netlist .mono { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font: 700 12px var(--font-sans); color: var(--pulse); box-shadow: inset 0 0 0 1.5px var(--line-2); }
.netlist b { color: var(--ink); display: block; font-weight: 650; }
.netlist span { font-size: var(--fs-small); color: var(--ink-2); display: block; }
.netlist small { display: block; margin-top: 4px; font-size: 13px; line-height: 1.5; color: var(--ink-3); }

/* call to action band */
.cta-band { text-align: center; }
.cta-band h2 { margin-inline: auto; max-width: 18ch; }
.cta-band p { margin: var(--sp-s) auto 0; }
.cta-band .btns { justify-content: center; }

/* code */
code, pre, kbd { font-family: var(--font-mono); }
:not(pre) > code { font-size: .88em; padding: .1em .4em; border-radius: 6px; background: var(--code-bg); color: var(--ink); word-break: break-word; }
.code { margin: var(--sp-s) 0 var(--sp-m); border-radius: var(--r-m); background: var(--code-bg); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; max-width: 100%; }
.code__bar { display: flex; align-items: center; gap: 2px; padding: 6px 6px 0 10px; border-bottom: 1px solid var(--line); }
.code__bar button { font: 600 13px/1 var(--font-sans); color: var(--ink-3); background: none; border: 0; padding: 0 12px; min-height: 38px; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.code__bar button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--pulse); }
.code__bar .copy { margin-left: auto; border: 0; border-radius: var(--r-full); padding: 0 12px; min-height: 32px; margin-bottom: 6px; color: var(--ink-2); }
.code__bar .copy:hover { color: var(--pulse); }
.code__file { font: 600 12.5px var(--font-mono); color: var(--ink-3); padding-right: 8px; }
.code pre { margin: 0; padding: 16px 18px; overflow-x: auto; font-size: 13.5px; line-height: 1.65; color: var(--code-ink); white-space: pre; tab-size: 2; }
.code pre[hidden] { display: none; }
.k { color: var(--code-k); } .s { color: var(--code-s); } .c { color: var(--code-c); font-style: italic; } .nu { color: var(--code-n); }

/* tables */
.table { overflow-x: auto; margin: var(--sp-s) 0 var(--sp-m); border-top: 1px solid var(--line); }
table { border-collapse: collapse; width: 100%; font-size: var(--fs-small); }
th, td { text-align: left; padding: 11px 14px 11px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font: 700 var(--fs-label)/1.2 var(--font-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
td { color: var(--ink-2); } td code { overflow-wrap: anywhere; }

/* docs layout */
.docs { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); padding-block: var(--sp-l) var(--sp-xl); }
.side { position: sticky; top: 92px; align-self: start; max-height: calc(100vh - 110px); overflow-y: auto; padding-right: 8px; scrollbar-width: thin; }
.side details > summary { display: none; }
.find { display: flex; align-items: center; gap: 8px; border-bottom: 1.5px solid var(--line-2); margin-bottom: var(--sp-m); transition: border-color 200ms; }
.find:focus-within { border-color: var(--pulse); }
.find label { font: 700 11px var(--font-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.find input { flex: 1; min-width: 0; border: 0; background: none; color: var(--ink); font: 500 var(--fs-ui) var(--font-sans); height: var(--tap); outline: none; }
.find kbd { font-size: 12px; color: var(--ink-3); padding: 2px 7px; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--line-2); }
.side h4 { font: 700 11px/1.2 var(--font-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin: var(--sp-m) 0 6px; }
.side ul { list-style: none; margin: 0; padding: 0; }
.side a { display: block; padding: 6px 12px; margin-left: -12px; border-radius: 10px; color: var(--ink-2); text-decoration: none; font-size: var(--fs-small); font-weight: 500; line-height: 1.35; }
.side a:hover { color: var(--ink); background: var(--pulse-soft); }
.side a.is-here { color: var(--pulse); font-weight: 650; background: var(--pulse-soft); }
.side .meth { font: 700 10px var(--font-mono); margin-right: 6px; }
.doc { min-width: 0; max-width: 820px; }
.doc > section { padding-block: var(--sp-l); border-top: 1px solid var(--line); }
.doc > section:first-child { border-top: 0; padding-top: 0; }
.doc h2 { margin-bottom: var(--sp-s); }
.doc h3 { margin: var(--sp-l) 0 var(--sp-xs); scroll-margin-top: 96px; }
.doc h3 a.hash, .doc h2 a.hash { color: var(--ink-3); text-decoration: none; opacity: 0; margin-left: 8px; font-size: .7em; }
.doc h3:hover a.hash, .doc h2:hover a.hash { opacity: 1; }
.doc ul, .doc ol { padding-left: 22px; max-width: var(--measure); } .doc li { margin: 6px 0; }
.steps { counter-reset: st; list-style: none; padding: 0 !important; max-width: none !important; }
.steps > li { counter-increment: st; position: relative; padding: 0 0 var(--sp-m) 52px; margin: 0 !important; border-left: 1.5px solid var(--line); margin-left: 16px !important; }
.steps > li:last-child { border-left-color: transparent; }
.steps > li::before { content: counter(st); position: absolute; left: -17px; top: -2px; width: 32px; height: 32px; border-radius: 50%; background: var(--desk);
  box-shadow: inset 0 0 0 1.5px var(--pulse); color: var(--pulse); font: 700 14px/32px var(--font-sans); text-align: center; }
.steps > li > h4 { margin-bottom: 4px; }
.note { margin: var(--sp-s) 0 var(--sp-m); padding: 2px 0 2px 18px; border-left: 3px solid var(--pulse); max-width: var(--measure); }
.note.warn { border-left-color: var(--attention); }
.note p { margin: 4px 0; }
.ep { margin: var(--sp-l) 0 0; padding-top: var(--sp-m); border-top: 1px solid var(--line); scroll-margin-top: 96px; }
.ep__hd { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 8px; }
.ep__hd code { font-size: 15px; font-weight: 600; background: none !important; padding: 0 !important; color: var(--ink); }
.m { display: inline-block; min-width: 54px; text-align: center; font: 700 11.5px/1 var(--font-mono); padding: 6px 8px; border-radius: var(--r-full); letter-spacing: .04em; }
.m.get { color: var(--success); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--success) 50%, transparent); }
.m.post { color: var(--pulse); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--pulse) 50%, transparent); }
.m.delete { color: var(--problem); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--problem) 50%, transparent); }
.pill { font: 600 11.5px/1 var(--font-sans); color: var(--ink-3); padding: 6px 10px; border-radius: var(--r-full); box-shadow: inset 0 0 0 1px var(--line-2); }
.pill.w { color: var(--attention); }
.check { list-style: none; padding: 0 !important; }
.check li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--line); margin: 0 !important; }
.check input { width: 20px; height: 20px; accent-color: var(--pulse); margin-top: 3px; }
.check label { cursor: pointer; }
.life { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: var(--sp-s) 0 var(--sp-m); font-size: var(--fs-small); }
.life span { padding: 8px 14px; border-radius: var(--r-full); box-shadow: inset 0 0 0 1.5px var(--line-2); color: var(--ink); font-weight: 600; }
.life span.ok { box-shadow: inset 0 0 0 1.5px var(--pulse); color: var(--pulse); }
.life span.bad { box-shadow: inset 0 0 0 1.5px var(--problem); color: var(--problem); }
.life i { color: var(--ink-3); font-style: normal; }

/* footer */
.ft { border-top: 1px solid var(--line); padding-block: var(--sp-l) calc(var(--sp-l) + env(safe-area-inset-bottom)); font-size: var(--fs-small); color: var(--ink-3); }
.ft__in { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; justify-content: space-between; }
.ft__brand { display: flex; align-items: center; gap: 12px; color: var(--ink-2); }
.ft__brand img { width: 64px; height: 30px; }
.ft nav { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.ft nav a { color: var(--ink-2); text-decoration: none; } .ft nav a:hover { color: var(--pulse); }

/* reveal on scroll (only when motion is allowed and scripts run) */
.js .rv { opacity: 0; translate: 0 18px; transition: opacity 700ms ease, translate 900ms var(--spring); }
.js .rv.in { opacity: 1; translate: 0 0; }

@media (max-width: 1023px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); }
  .docs { grid-template-columns: minmax(0, 1fr); padding-top: var(--sp-m); }
  .side { position: static; max-height: none; overflow: visible; padding: 0; }
  .side details > summary { display: flex; align-items: center; justify-content: space-between; min-height: 50px; cursor: pointer; list-style: none;
    font: 650 var(--fs-ui) var(--font-sans); color: var(--ink); border-bottom: 1px solid var(--line); }
  .side details > summary::-webkit-details-marker { display: none; }
  .side details > summary::after { content: "+"; color: var(--pulse); font-size: 22px; font-weight: 400; }
  .side details[open] > summary::after { content: "–"; }
  .side details[open] > summary { margin-bottom: var(--sp-s); }
  .cols, .rows.two { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .hd { top: 10px; height: 52px; padding: 0 4px 0 12px; gap: 2px; }
  .hd__brand span { display: none; }
  .hd nav a { padding: 0 10px; }
  .hd nav a.wide { display: none; }
  .hd .cta { display: none; }
  main { padding-top: 72px; }
  .rows > li { grid-template-columns: 3rem minmax(0, 1fr); }
  .code pre { font-size: 12.5px; padding: 14px; }
  .ft__in { flex-direction: column; align-items: flex-start; }
  .flow .net circle { r: 23px; }
  .flow .net text { font-size: 14px; }
  .flow .t { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .js .rv { opacity: 1; translate: none; }
}

/* ---- fewer buttons: arrow links do the navigating (the owner, 15 Nov) */
.links { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 28px; margin: var(--sp-m) 0 0; max-width: none; }
.go { display: inline-flex; align-items: center; gap: 8px; min-height: var(--tap); padding: 0; border: 0; background: none; cursor: pointer;
  font: 650 var(--fs-ui)/1.2 var(--font-sans); color: var(--pulse); text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor); background-size: 0% 1.5px; background-position: 0 calc(100% - 10px); background-repeat: no-repeat;
  transition: background-size 320ms var(--spring), color 160ms ease; }
.go::after { content: "→"; transition: translate 320ms var(--spring); }
.go:hover { color: var(--pulse-2); background-size: calc(100% - 1.3em) 1.5px; }
.go:hover::after { translate: 4px 0; }
.go--quiet { color: var(--ink); }
.go--quiet:hover { color: var(--pulse); }

/* ---- the flow graphic is its own control */
.flow .gate, .flow .vid { cursor: pointer; outline: none; }
.flow .gate-halo { fill: none; stroke: var(--pulse); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.flow[data-gate="no"] .gate-halo, .flow[data-gate="changed"] .gate-halo { animation: halo 2.2s ease-out infinite; }
@keyframes halo { 0% { opacity: .55; transform: scale(1); } 100% { opacity: 0; transform: scale(1.7); } }
.flow .gate:hover .gate-ring, .flow .gate:focus-visible .gate-ring { stroke: var(--pulse); }
.flow .vid:hover .tile, .flow .vid:focus-visible .tile { stroke: var(--pulse); }
.flow .vid:focus-visible .tile, .flow .gate:focus-visible .gate-ring { stroke-width: 2.5; }
.flow__status { margin-top: var(--sp-s); }

/* ---- MCP: architecture strip */
.arch { display: grid; grid-template-columns: auto minmax(40px, 1fr) auto minmax(40px, 1fr) auto; align-items: center; gap: 0 12px; margin: var(--sp-m) 0; }
.arch__node b { display: block; color: var(--ink); font-weight: 650; font-size: var(--fs-ui); }
.arch__node small { color: var(--ink-3); font-size: 12.5px; }
.arch__node--hub b { color: var(--pulse); }
.arch__wire { position: relative; height: 34px; }
.arch__wire::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1.5px dashed var(--line-2); }
.arch__wire i { position: absolute; top: calc(50% - 4px); left: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--pulse); animation: packet 2.4s ease-in-out infinite; }
.arch__wire + .arch__node + .arch__wire i { animation-delay: 1.2s; }
.arch__wire span { position: absolute; left: 50%; top: -6px; translate: -50% 0; font: 600 11px var(--font-sans); color: var(--ink-3); white-space: nowrap; letter-spacing: .04em; }
@keyframes packet { 0% { left: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { left: calc(100% - 8px); opacity: 0; } }
@media (max-width: 640px) {
  .arch { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .arch__wire { height: 30px; width: 2px; margin-left: 14px; }
  .arch__wire::before { left: 0; right: auto; top: 0; bottom: 0; border-top: 0; border-left: 1.5px dashed var(--line-2); }
  .arch__wire i { left: -3px; animation-name: packet-v; }
  .arch__wire span { left: 16px; top: 8px; translate: none; }
  @keyframes packet-v { 0% { top: 0; opacity: 0; } 20%, 80% { opacity: 1; } 100% { top: calc(100% - 8px); opacity: 0; } }
}

/* ---- MCP: the agent demo (a console, like a code block) */
.agent { margin: var(--sp-s) 0 var(--sp-m); border-radius: var(--r-m); background: var(--code-bg); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.agent__bar { display: flex; align-items: center; gap: 10px; padding: 4px 8px 4px 16px; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--ink-3); }
.agent__bar b { color: var(--ink); font-weight: 650; }
.agent__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 0 color-mix(in srgb, var(--success) 50%, transparent); animation: live 2s ease-out infinite; }
@keyframes live { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--success) 45%, transparent); } 100% { box-shadow: 0 0 0 8px transparent; } }
.agent__replay { margin-left: auto; font-size: 13px; }
.agent__log { padding: 16px 18px 18px; font-size: 14px; }
.msg { margin: 0 0 12px; max-width: none; color: var(--ink); }
.msg span { display: block; font: 700 10.5px/1.2 var(--font-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 4px; }
.msg--agent span { color: var(--pulse); }
.calls { list-style: none; padding: 0 !important; margin: 0 0 12px !important; max-width: none !important; }
.call { display: grid; grid-template-columns: minmax(150px, max-content) minmax(0, 1fr); gap: 4px 14px; align-items: baseline; padding: 7px 0; margin: 0 !important; border-top: 1px dashed var(--line); }
.call code { font-size: 12.5px; background: none !important; padding: 0 !important; color: var(--ink); white-space: nowrap; }
.call code::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 8px; vertical-align: 1px; background: var(--success); }
.call code.w::before { background: var(--pulse); }
.call span { color: var(--ink-2); font-size: 13px; }
.ask { margin: 4px 0 12px; padding: 10px 0 2px 14px; border-left: 3px solid var(--pulse); }
.ask p { margin: 0; max-width: none; }
.js .agent .call, .js .agent .ask, .js .agent .msg--agent, .js .agent .calls--after { display: none; }
.js .agent .call.on, .js .agent .calls--after.on, .js .agent .msg--agent.on { display: grid; animation: in 420ms var(--spring); }
.js .agent .calls--after.on, .js .agent .msg--agent.on { display: block; }
.js .agent .ask.on { display: block; animation: in 420ms var(--spring); }
.js .agent .call.run span { color: var(--ink-3); }
.js .agent .call.run span::after { content: " …"; animation: blink 1s steps(2) infinite; }
@keyframes in { from { opacity: 0; translate: 0 6px; } to { opacity: 1; translate: 0 0; } }
@keyframes blink { 50% { opacity: 0; } }
@media (max-width: 640px) { .call { grid-template-columns: minmax(0, 1fr); } }

/* ---- MCP: tool explorer */
.tx { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 0 28px; margin: var(--sp-s) 0 var(--sp-m); border-top: 1px solid var(--line); padding-top: var(--sp-s); }
.tx__list { display: flex; flex-direction: column; gap: 2px; }
.tx__list button { display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 0 12px; margin-left: -12px; border: 0; border-radius: 10px; background: none; cursor: pointer; text-align: left;
  font: 500 13.5px var(--font-mono); color: var(--ink-2); }
.tx__list button:hover { background: var(--pulse-soft); color: var(--ink); }
.tx__list button[aria-selected="true"] { background: var(--pulse-soft); color: var(--pulse); font-weight: 650; }
.tx__list i { width: 7px; height: 7px; border-radius: 50%; background: var(--success); flex: none; }
.tx__list i.w { background: var(--pulse); }
.tx__panel h4 { margin: 4px 0 6px; } .tx__panel h4 code { font-size: 13px; margin-left: 6px; }
.tx__panel p { margin-bottom: 10px; }
.tx__badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
.js .tx__panel[hidden] { display: none; }
@media (max-width: 760px) {
  .tx { grid-template-columns: minmax(0, 1fr); }
  .tx__list { flex-direction: row; overflow-x: auto; padding-bottom: 8px; margin-bottom: 8px; scrollbar-width: thin; }
  .tx__list button { margin-left: 0; white-space: nowrap; flex: none; }
}