/* Architecture map of Loresis Logistics, in the Mint language of the product:
   flat paper, black ink, square corners, one mint accent, condensed capitals. */
@font-face { font-family: "Loresis Grotesk"; src: url("fonts/archivo-latin.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2190-2199, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Loresis Grotesk"; src: url("fonts/archivo-latin-ext.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+A720-A7FF; }

:root {
  --font: "Loresis Grotesk", "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --bg: #f9f9f9; --paper: #ffffff; --ink: #000000; --ink-2: #505050; --grey: #6a6a6a; --line: #e4e4e4; --line-2: #cfcfcf;
  --accent: #cdeee5; --focus: #7470fa; --red: #ff4d67; --blue: #2f6bff;
  --t-people: #ffffff; --t-edge: #f6ecd6; --t-app: #cdeee5; --t-engine: #dbe8f6; --t-llm: #e5e3ff; --t-store: #ececec; --t-ext: #ffffff;
  --b-people: #000000; --b-edge: #c9a96a; --b-app: #6fb8a3; --b-engine: #7fa6d1; --b-llm: #8d87f0; --b-store: #9a9a9a; --b-ext: #8a8a8a;
  --wire: #9a9a9a; --wire-hot: #000000; --pulse: #7470fa;
  color-scheme: light;
}
:root[data-mode="dark"] {
  --bg: #0a0a0a; --paper: #171717; --ink: #f5f5f5; --ink-2: #b5b5b5; --grey: #8c8c8c; --line: #2c2c2c; --line-2: #3a3a3a;
  --t-people: #171717; --t-edge: #352d1d; --t-app: #1b3a32; --t-engine: #1b2a3b; --t-llm: #29264a; --t-store: #242424; --t-ext: #121212;
  --b-people: #f5f5f5; --b-edge: #a98a4e; --b-app: #5fa894; --b-engine: #6c93be; --b-llm: #8d87f0; --b-store: #707070; --b-ext: #666666;
  --wire: #5a5a5a; --wire-hot: #f5f5f5; --pulse: #cdeee5;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-mode="light"]) {
    --bg: #0a0a0a; --paper: #171717; --ink: #f5f5f5; --ink-2: #b5b5b5; --grey: #8c8c8c; --line: #2c2c2c; --line-2: #3a3a3a;
    --t-people: #171717; --t-edge: #352d1d; --t-app: #1b3a32; --t-engine: #1b2a3b; --t-llm: #29264a; --t-store: #242424; --t-ext: #121212;
    --b-people: #f5f5f5; --b-edge: #a98a4e; --b-app: #5fa894; --b-engine: #6c93be; --b-llm: #8d87f0; --b-store: #707070; --b-ext: #666666;
    --wire: #5a5a5a; --wire-hot: #f5f5f5; --pulse: #cdeee5;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-underline-offset: 3px; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
code, .mono { font-family: var(--mono); font-size: .86em; }
code { background: var(--t-store); padding: 1px 4px; overflow-wrap: anywhere; }
.caps { text-transform: uppercase; letter-spacing: .06em; font-size: 11px; font-weight: 700; }
.display { font-stretch: 72%; font-weight: 800; text-transform: uppercase; letter-spacing: -.005em; line-height: .95; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Top bar */
.top { position: sticky; top: 0; z-index: 30; background: var(--bg); border-bottom: 1px solid var(--line); }
.top-in { max-width: 1320px; margin: 0 auto; padding: 0 24px; height: 56px; display: flex; align-items: center; gap: 24px; }
.brand { font-stretch: 72%; font-weight: 800; font-size: 20px; letter-spacing: .02em; text-decoration: none; white-space: nowrap; }
.brand span { color: var(--grey); font-weight: 600; }
.nav { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; flex: 1; }
.nav::-webkit-scrollbar { display: none; }
.nav a { text-decoration: none; color: var(--grey); padding: 8px 10px; white-space: nowrap; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.nav a:hover, .nav a.on { color: var(--ink); text-decoration: underline; text-decoration-thickness: 2px; }
.mode { display: flex; border: 1px solid var(--line-2); }
.mode button { border: 0; background: none; padding: 6px 9px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; cursor: pointer; color: var(--grey); min-height: 32px; }
.mode button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }

.wrap { max-width: 1320px; margin: 0 auto; padding: 0 24px; }

/* Hero */
.hero { padding: 56px 0 40px; border-bottom: 1px solid var(--line); }
.hero h1 { font-size: clamp(44px, 7.4vw, 104px); margin: 0 0 22px; }
.hero h1 em { font-style: normal; background: var(--accent); color: #000; padding: 0 .08em; }
.lede { font-size: 19px; line-height: 1.5; max-width: 860px; margin: 0 0 14px; color: var(--ink); }
.lede-2 { font-size: 15px; color: var(--ink-2); max-width: 860px; margin: 0; }
.stats { display: grid; grid-template-columns: repeat(6, 1fr); border-top: 1px solid var(--ink); margin-top: 36px; }
.stat { padding: 14px 16px 4px 0; border-right: 1px solid var(--line); margin-right: 16px; }
.stat:last-child { border-right: 0; }
.stat b { display: block; font-size: 40px; font-stretch: 72%; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.stat span { display: block; font-size: 12px; color: var(--ink-2); margin-top: 6px; }
.howto { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 30px; border: 1px solid var(--line); background: var(--paper); }
.howto div { padding: 14px 18px; border-right: 1px solid var(--line); font-size: 14px; color: var(--ink-2); }
.howto div:last-child { border-right: 0; }
.howto b { display: block; color: var(--ink); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 4px; }

/* Sections */
.block { padding: 64px 0 24px; border-bottom: 1px solid var(--line); }
.block-head { display: grid; grid-template-columns: 90px 1fr; gap: 0 20px; margin-bottom: 26px; }
.num { font-size: 56px; font-stretch: 72%; font-weight: 800; line-height: .9; color: var(--grey); }
.block-head h2 { font-size: clamp(30px, 4.2vw, 52px); margin: 0 0 10px; }
.block-head p { margin: 0; max-width: 900px; color: var(--ink-2); font-size: 16px; }
.block-head p + p { margin-top: 8px; }

/* Legend */
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0 0 14px; font-size: 12px; color: var(--ink-2); }
.legend i { display: inline-block; width: 14px; height: 14px; vertical-align: -3px; margin-right: 6px; border: 1px solid; }
.legend .ln { display: inline-block; width: 22px; height: 0; border-top: 2px solid var(--wire); vertical-align: 4px; margin-right: 6px; }
.legend .ln.write { border-top-style: dashed; border-color: var(--red); }
.legend .ln.llm { border-color: var(--b-llm); }

/* Journey bar */
.journeys { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 12px; }
.journeys .lbl { margin-right: 6px; }
.map-hint { font-size: 12.5px; color: var(--ink-2); margin: -4px 0 10px; }
.chip { border: 1px solid var(--line-2); background: var(--paper); padding: 7px 12px; cursor: pointer; font-size: 13px; min-height: 36px; }
.chip:hover { border-color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.chip.ghost { background: none; border-style: dashed; }

/* The map */
.map-shell { position: relative; border: 1px solid var(--line); background: var(--paper); }
.map { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: auto minmax(72px, auto) auto minmax(72px, auto) auto minmax(72px, auto) auto minmax(72px, auto) minmax(72px, auto) auto minmax(72px, auto);
  gap: 16px 14px; padding: 18px; }
.band { grid-column: 1 / span 9; display: flex; align-items: baseline; gap: 8px; margin: 10px 0 -8px; color: var(--grey); font-size: 13px; }
.band b { color: var(--ink); }
.band.ext { grid-column: 10 / span 3; }
.band-rule { position: absolute; left: 0; right: 0; height: 0; border-top: 1px dashed var(--line); pointer-events: none; }
.wires { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.wires path { fill: none; stroke: var(--wire); stroke-width: 1.3; opacity: 0; transition: opacity .2s, stroke .2s; }
.wires path.spine { opacity: .7; }
.wires path.write { stroke: var(--red); stroke-dasharray: 5 4; }
.wires path.llm { stroke: var(--b-llm); }
.map.focus .wires path { opacity: 0; }
.map.focus .wires path.spine { opacity: .07; }
.map.focus .wires path.hot { opacity: 1; stroke-width: 2; stroke: var(--wire-hot); }
.map.focus .wires path.hot.write { stroke: var(--red); }
.map.focus .wires path.hot.llm { stroke: var(--b-llm); }
.wires path.run { opacity: 1 !important; stroke: var(--pulse) !important; stroke-width: 3 !important; stroke-dasharray: 8 7; animation: flow .9s linear infinite; }
.wires.lifted { z-index: 3; }
.wires .wire-label { font-weight: 600; font-size: 10.5px; fill: var(--ink-2); paint-order: stroke; stroke: var(--paper); stroke-width: 4px; font-family: var(--font); opacity: 0; transition: opacity .2s; }
.map.focus .wires .wire-label.hot { opacity: 1; }
@keyframes flow { to { stroke-dashoffset: -30; } }

.node { position: relative; z-index: 2; text-align: left; border: 1px solid var(--bd); background: var(--tone); padding: 9px 11px 10px; cursor: pointer; min-height: 64px; display: flex; flex-direction: column; justify-content: flex-start; gap: 2px; transition: opacity .2s, transform .15s, box-shadow .15s; }
.node:hover { box-shadow: 0 0 0 1px var(--ink) inset; }
.node .k { font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-2); }
.node .t { font-size: 14.5px; font-weight: 700; line-height: 1.2; }
.node .s { font-size: 12px; color: var(--ink-2); line-height: 1.35; }
.node.ext { border-style: dashed; min-height: 0; padding: 7px 10px 8px; }
.node.ext .k { display: none; }
.node.ext .t { font-size: 13.5px; }
.node.ext .s { font-size: 11.5px; }
.node.people { border-width: 1.5px; }
.map.focus .node { opacity: .28; }
.map.focus .node.near { opacity: 1; }
.map.focus .node.sel { opacity: 1; box-shadow: 0 0 0 2px var(--ink); }
.map.focus .node.step { opacity: 1; box-shadow: 0 0 0 3px var(--pulse), 0 0 0 4px var(--ink); }
.node .badge { position: absolute; top: -10px; right: -8px; background: var(--ink); color: var(--bg); font-size: 11px; font-weight: 800; min-width: 22px; height: 22px; display: none; align-items: center; justify-content: center; padding: 0 5px; }
.node.step .badge, .node.was .badge { display: flex; }
.node.was .badge { background: var(--grey); }
.map.focus .node.was { opacity: .9; }

.tone-people { --tone: var(--t-people); --bd: var(--b-people); }
.tone-edge { --tone: var(--t-edge); --bd: var(--b-edge); }
.tone-app { --tone: var(--t-app); --bd: var(--b-app); }
.tone-engine { --tone: var(--t-engine); --bd: var(--b-engine); }
.tone-llm { --tone: var(--t-llm); --bd: var(--b-llm); }
.tone-store { --tone: var(--t-store); --bd: var(--b-store); }
.tone-ext { --tone: var(--t-ext); --bd: var(--b-ext); }

/* Journey caption */
.caption { display: none; border-top: 1px solid var(--ink); background: var(--paper); padding: 16px 18px; gap: 18px; grid-template-columns: 1fr auto; align-items: start; }
.caption.on { display: grid; }
.caption .step-n { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--grey); }
.caption h3 { margin: 2px 0 4px; font-size: 20px; }
.caption p { margin: 0; color: var(--ink-2); max-width: 820px; }
.caption .ctl { display: flex; gap: 6px; }
.btn { border: 1px solid var(--ink); background: var(--ink); color: var(--bg); padding: 8px 14px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; cursor: pointer; min-height: 36px; }
.btn.sec { background: none; color: var(--ink); }
.btn:disabled { opacity: .35; cursor: default; }
.dots { display: flex; gap: 4px; margin-top: 10px; flex-wrap: wrap; }
.dots button { width: 22px; height: 6px; border: 0; background: var(--line-2); padding: 0; cursor: pointer; }
.dots button.on { background: var(--ink); }

/* Side panel */
.panel { position: fixed; top: 56px; right: 0; bottom: 0; width: min(460px, 100%); background: var(--paper); border-left: 1px solid var(--ink); z-index: 40; transform: translateX(102%); transition: transform .22s ease; overflow-y: auto; padding: 22px 24px 40px; }
.panel.open { transform: none; }
.panel .close { position: absolute; top: 12px; right: 12px; border: 1px solid var(--line-2); background: none; width: 38px; height: 38px; cursor: pointer; font-size: 18px; }
.panel .k { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-2); display: flex; gap: 8px; align-items: center; }
.panel .k i { width: 12px; height: 12px; display: inline-block; background: var(--tone); border: 1px solid var(--bd); }
.panel h3 { font-size: 34px; margin: 8px 40px 12px 0; }
.panel .what { font-size: 16.5px; line-height: 1.5; margin: 0 0 14px; }
.panel h4 { font-size: 11px; letter-spacing: .07em; text-transform: uppercase; margin: 22px 0 8px; border-top: 1px solid var(--line); padding-top: 12px; }
.panel ul { margin: 0; padding-left: 18px; }
.panel li { margin: 4px 0; font-size: 14px; }
.panel .why { color: var(--ink-2); margin: 0; font-size: 14.5px; }
.panel .links { display: flex; flex-wrap: wrap; gap: 6px; }
.panel .links button { border: 1px solid var(--bd); background: var(--tone); padding: 5px 9px; font-size: 12.5px; cursor: pointer; text-align: left; }
.panel .links button small { color: var(--ink-2); display: block; font-size: 11px; }
.panel .files li { font-family: var(--mono); font-size: 12px; list-style: square; overflow-wrap: anywhere; }
.scrim { position: fixed; inset: 56px 0 0 0; background: rgba(0,0,0,.18); z-index: 35; display: none; }
.scrim.on { display: block; }

/* Generic plates */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.plate { background: var(--paper); border: 1px solid var(--line); padding: 18px 20px; }
.plate h3 { margin: 0 0 8px; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; }
.plate p { margin: 0 0 8px; color: var(--ink-2); }
.note { font-size: 13px; color: var(--ink-2); margin-top: 10px; }
.callout { border-left: 4px solid var(--ink); background: var(--accent); color: #000; padding: 12px 16px; margin: 18px 0; font-size: 15px; }
.callout b { text-transform: uppercase; font-size: 11px; letter-spacing: .07em; display: block; margin-bottom: 2px; }

/* Logistics pipeline */
.pipe-steps { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 0; border: 1px solid var(--ink); background: var(--paper); }
.pstep { border: 0; border-right: 1px solid var(--line); background: none; padding: 12px 10px 14px; text-align: left; cursor: pointer; position: relative; min-height: 112px; }
.pstep:last-child { border-right: 0; }
.pstep .n { font-size: 30px; font-stretch: 72%; font-weight: 800; line-height: 1; color: var(--grey); }
.pstep .t { font-weight: 800; text-transform: uppercase; font-stretch: 80%; font-size: 15px; margin-top: 6px; letter-spacing: .02em; }
.pstep .who { display: inline-block; margin-top: 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 2px 6px; border: 1px solid var(--bd); background: var(--tone); }
.pstep[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.pstep[aria-pressed="true"] .n { color: var(--accent); }
.pstep[aria-pressed="true"] .who { color: var(--ink); }
.pstep::after { content: "→"; position: absolute; right: -7px; top: 40px; z-index: 2; background: var(--paper); font-size: 13px; line-height: 1; padding: 1px 0; color: var(--grey); }
.pstep:last-child::after { display: none; }
.lanes { display: grid; grid-template-columns: 150px repeat(8, minmax(0, 1fr)); border: 1px solid var(--line); border-top: 0; background: var(--paper); }
.lane-name { padding: 10px 12px; border-top: 1px solid var(--line); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; display: flex; align-items: center; gap: 8px; }
.lane-name i { width: 10px; height: 10px; background: var(--tone); border: 1px solid var(--bd); flex: none; }
.cell { border-top: 1px solid var(--line); border-left: 1px solid var(--line); padding: 8px; font-size: 12px; color: var(--ink-2); min-height: 64px; cursor: pointer; }
.cell.has { background: var(--tone); color: var(--ink); border-left: 1px solid var(--line); }
.cell.on { outline: 2px solid var(--ink); outline-offset: -2px; }
.cell.dim { opacity: .45; }
.pdetail { display: grid; grid-template-columns: 1.3fr 1fr; gap: 18px; margin-top: 18px; }
.pdetail h3 { font-size: 28px; margin: 0 0 8px; }
.pdetail .plate h3, .famdetail .plate h3 { font-size: 11px; letter-spacing: .07em; text-transform: uppercase; font-stretch: 100%; margin: 0 0 8px; line-height: 1.3; }
.pdetail .io { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pdetail ul { padding-left: 18px; margin: 6px 0 0; }
.pdetail li { margin: 3px 0; }
.status-line { display: flex; flex-wrap: wrap; align-items: center; gap: 0; margin-top: 22px; }
.status { border: 1px solid var(--ink); padding: 8px 12px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; background: var(--paper); }
.status.ok { background: var(--accent); color: #000; }
.status.bad { border-color: var(--red); color: var(--red); }
.arrow { padding: 0 8px; color: var(--grey); }

/* Assistant */
.orbit-wrap { display: grid; grid-template-columns: 1.15fr 1fr; gap: 22px; align-items: start; }
.orbit { width: 100%; height: auto; display: block; background: var(--paper); border: 1px solid var(--line); }
.orbit text { font-family: var(--font); fill: var(--ink); }
.orbit .hub-t { font-weight: 800; font-size: 15px; text-transform: uppercase; }
.orbit .fam { cursor: pointer; }
.orbit .fam rect { stroke: var(--bd); fill: var(--tone); }
.orbit .fam:hover rect, .orbit .fam.on rect { stroke: var(--ink); stroke-width: 2; }
.orbit .fam text { font-size: 12.5px; font-weight: 700; }
.orbit .fam .sub { font-size: 10.5px; font-weight: 500; fill: var(--ink-2); }
.orbit .spoke { stroke: var(--wire); stroke-width: 1.2; }
.orbit .spoke.on { stroke: var(--ink); stroke-width: 2.4; }
.orbit .ring { fill: none; stroke: var(--line); stroke-dasharray: 3 5; }
.fam-list { display: none; flex-wrap: wrap; gap: 6px; }
.fam-list .chip[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.famdetail h3 { font-size: 26px; margin: 0 0 6px; }
.famdetail ul { padding-left: 18px; margin: 6px 0; }
.famdetail li { margin: 3px 0; }
.sm { width: 100%; max-width: 940px; height: auto; display: block; margin: 0 auto; }
.sm text { font-family: var(--font); fill: var(--ink); }
.sm .st rect { fill: var(--paper); stroke: var(--ink); stroke-width: 1.3; }
.sm .st.ok rect { fill: var(--accent); }
.sm .st.bad rect { stroke: var(--red); }
.sm .st text { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.sm .tr { fill: none; stroke: var(--ink-2); stroke-width: 1.3; }
.sm .tr.gate { stroke: var(--red); stroke-width: 2; stroke-dasharray: 6 4; }
.sm .lab { font-size: 11.5px; fill: var(--ink-2); paint-order: stroke; stroke: var(--paper); stroke-width: 4px; }
.sm .lab.gate { fill: var(--red); font-weight: 700; }

/* Gates */
.gates { list-style: none; margin: 0; padding: 0; counter-reset: g; }
.gate { display: grid; grid-template-columns: 54px 1fr 1fr; border: 1px solid var(--line); border-top: 0; background: var(--paper); }
.gate:first-child { border-top: 1px solid var(--ink); }
.gate .gn { font-size: 30px; font-stretch: 72%; font-weight: 800; color: var(--grey); padding: 12px; border-right: 1px solid var(--line); }
.gate .pass, .gate .fail { padding: 12px 16px; font-size: 14px; }
.gate .pass b { display: block; font-size: 15px; }
.gate .pass span { color: var(--ink-2); }
.gate .fail { border-left: 1px solid var(--line); color: var(--ink-2); }
.gate .fail b { color: var(--red); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; display: block; }
.gate.final { background: var(--accent); color: #000; }
.gate.final .pass span, .gate.final .fail { color: #333; }

/* Data tree */
.tree { font-family: var(--mono); font-size: 13px; background: var(--paper); border: 1px solid var(--line); padding: 14px 16px; }
.tree details { margin-left: 18px; }
.tree > details { margin-left: 0; }
.tree summary { cursor: pointer; padding: 3px 0; list-style: none; display: flex; gap: 10px; align-items: baseline; }
.tree summary::-webkit-details-marker { display: none; }
.tree summary::before { content: "+"; width: 12px; color: var(--grey); flex: none; }
.tree details[open] > summary::before { content: "−"; }
.tree .leaf { margin-left: 18px; padding: 3px 0 3px 22px; display: flex; gap: 10px; align-items: baseline; }
.tree .nm { font-weight: 700; white-space: nowrap; }
.tree .ds { font-family: var(--font); color: var(--ink-2); font-size: 13px; }
.tables { columns: 3 220px; column-gap: 18px; }
.tables .tg { break-inside: avoid; margin-bottom: 14px; }
.tables h4 { margin: 0 0 4px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.tables code { display: inline-block; margin: 2px 2px 0 0; }

/* Deployment */
.deploy { width: 100%; height: auto; display: block; background: var(--paper); border: 1px solid var(--line); }
.deploy text { font-family: var(--font); fill: var(--ink); }
.deploy .mach { fill: none; stroke: var(--ink); stroke-width: 1.5; }
.deploy .mach-t { font-size: 22px; font-weight: 800; font-stretch: 72%; text-transform: uppercase; }
.deploy .mach-s { font-size: 12px; fill: var(--ink-2); }
.deploy .box rect { stroke: var(--bd); fill: var(--tone); }
.deploy .box .bt { font-size: 13px; font-weight: 700; }
.deploy .box .bs { font-size: 11px; fill: var(--ink-2); }
.deploy .ar { fill: none; stroke: var(--ink); stroke-width: 1.5; }
.deploy .ar.anim { stroke-dasharray: 7 6; animation: flow 1.2s linear infinite; stroke: var(--focus); stroke-width: 2; }
.deploy .al { font-size: 11.5px; fill: var(--ink); font-weight: 700; paint-order: stroke; stroke: var(--paper); stroke-width: 5px; }
.deploy .al2 { font-size: 10.5px; fill: var(--ink-2); paint-order: stroke; stroke: var(--paper); stroke-width: 5px; }
.steps-h { display: grid; grid-template-columns: repeat(6, 1fr); border: 1px solid var(--line); background: var(--paper); margin-top: 18px; }
.steps-h div { padding: 12px 14px; border-right: 1px solid var(--line); font-size: 13px; color: var(--ink-2); }
.steps-h div:last-child { border-right: 0; }
.steps-h b { display: block; color: var(--ink); font-size: 26px; font-stretch: 72%; font-weight: 800; line-height: 1; margin-bottom: 6px; }
.steps-h strong { color: var(--ink); display: block; }

/* Treemap */
.tm-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.crumbs { display: flex; gap: 4px; flex-wrap: wrap; font-size: 13px; }
.crumbs button { border: 0; background: none; padding: 4px 2px; cursor: pointer; text-decoration: underline; color: var(--ink-2); }
.crumbs span { color: var(--grey); }
.crumbs b { padding: 4px 2px; }
.treemap { position: relative; width: 100%; height: 560px; background: var(--paper); border: 1px solid var(--ink); overflow: hidden; }
.tm { position: absolute; border: 1px solid var(--paper); background: var(--tone); color: var(--ink); padding: 5px 7px; overflow: hidden; cursor: pointer; text-align: left; font-size: 12px; line-height: 1.2; transition: filter .15s; }
.tm:hover { filter: brightness(.94); outline: 2px solid var(--ink); outline-offset: -2px; z-index: 2; }
:root[data-mode="dark"] .tm:hover { filter: brightness(1.25); }
.tm b { display: block; font-size: 13px; overflow-wrap: anywhere; }
.tm small { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.tm.leafy { cursor: default; }
.tm-group { position: absolute; background: var(--paper); border: 1px solid var(--ink); overflow: hidden; }
.tm-h { position: absolute; left: 0; right: 0; top: 0; height: 20px; border: 0; background: var(--ink); color: var(--bg); text-align: left; font-size: 11px; font-weight: 700; letter-spacing: .04em; padding: 0 7px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tm-h:hover { text-decoration: underline; }
.tm-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--ink-2); margin-top: 10px; }
.tm-legend i { display: inline-block; width: 12px; height: 12px; vertical-align: -2px; margin-right: 6px; border: 1px solid; }

/* Glossary */
.gloss { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--ink); }
.gloss div { padding: 14px 16px 14px 0; border-bottom: 1px solid var(--line); margin-right: 16px; }
.gloss dt { font-weight: 800; text-transform: uppercase; font-stretch: 80%; font-size: 16px; letter-spacing: .02em; }
.gloss dd { margin: 4px 0 0; color: var(--ink-2); font-size: 14px; }
.foot { padding: 36px 0 60px; color: var(--ink-2); font-size: 13px; }
.foot ul { padding-left: 18px; }

/* Map on small screens: bands become stacked lists, wires hide. */
@media (max-width: 980px) {
  .stats { grid-template-columns: repeat(3, 1fr); }
  .stat { border-bottom: 1px solid var(--line); }
  .howto { grid-template-columns: 1fr; }
  .howto div { border-right: 0; border-bottom: 1px solid var(--line); }
  .map { display: flex; flex-direction: column; gap: 8px; padding: 12px; }
  .band, .band.ext { margin: 14px 0 0; }
  .band-rule, .wires { display: none; }
  .node { min-height: 0; }
  .orbit-wrap, .grid-2, .pdetail { grid-template-columns: 1fr; }
  .pipe-steps { grid-template-columns: repeat(4, 1fr); }
  .pstep { border-bottom: 1px solid var(--line); min-height: 96px; }
  .pstep::after { display: none; }
  .lanes { display: none; }
  .gloss { grid-template-columns: 1fr 1fr; }
  .steps-h { grid-template-columns: repeat(3, 1fr); }
  .steps-h div { border-bottom: 1px solid var(--line); }
}
@media (max-width: 640px) {
  .top-in { padding: 0 14px; gap: 10px; }
  .brand span { display: none; }
  .wrap { padding: 0 14px; }
  .hero { padding-top: 34px; }
  .lede { font-size: 17px; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stat b { font-size: 32px; }
  .block { padding-top: 44px; }
  .block-head { grid-template-columns: 1fr; }
  .num { font-size: 40px; margin-bottom: 4px; }
  .caption { grid-template-columns: 1fr; position: sticky; bottom: 0; z-index: 20; box-shadow: 0 -1px 0 var(--ink); }
  .pipe-steps { grid-template-columns: repeat(2, 1fr); }
  .gate { grid-template-columns: 44px 1fr; }
  .gate .fail { grid-column: 2; border-left: 0; border-top: 1px dashed var(--line); }
  .gloss { grid-template-columns: 1fr; }
  .steps-h { grid-template-columns: 1fr 1fr; }
  .treemap { height: 460px; }
  .pdetail .io { grid-template-columns: 1fr; }
  .orbit { display: none; }
  .fam-list { display: flex; }
  .scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .scroll-x .sm { min-width: 680px; }
  .scroll-x .deploy { min-width: 980px; }
  .panel { top: auto; height: 82vh; border-left: 0; border-top: 1px solid var(--ink); transform: translateY(102%); }
  .panel.open { transform: none; }
  .mode button { padding: 6px 7px; }
}