/* ============================================================
   AI NATIVE 组织方法论 4.0 — 「组织施工图集」
   A drawing-set for organizations: drafting paper, iron-gall ink,
   vermilion review stamps, prussian drafting blue.
   ============================================================ */

:root {
  /* paper strata */
  --paper:      #f6f3e9;
  --paper-2:    #f0ebdb;
  --paper-deep: #e6dfc9;
  --vellum:     #fbf9f1;
  /* ink */
  --ink:        #1c1c17;
  --ink-soft:   #544e40;
  --ink-fade:   #6f684f;
  /* rules */
  --rule:        #d8d1bc;
  --rule-soft:   #e8e2cf;
  --rule-strong: #1c1c17;
  /* voices */
  --vermilion:      #b53a0c;
  --vermilion-soft: #e05a1d;
  --prussian:       #33526f;
  --prussian-soft:  #5d7d9c;
  --verified:       #1d6b4f;
  --caution:        #a05c0a;
  --grid: rgba(51, 82, 111, 0.055);

  /* legacy aliases - inline styles & SVGs depend on these */
  --bg: var(--paper);
  --bg-deep: var(--paper-deep);
  --surface: var(--vellum);
  --surface-2: var(--paper-2);
  --line: var(--rule);
  --line-bright: var(--rule-strong);
  --line-soft: var(--rule-soft);
  --text: var(--ink);
  --text-soft: var(--ink-soft);
  --text-fade: var(--ink-fade);
  --accent: var(--vermilion);
  --accent-soft: var(--vermilion-soft);
  --signal: var(--verified);
  --warn: var(--caution);

  /* type */
  --serif: 'Noto Serif SC', 'Songti SC', serif;
  --sans: 'Noto Sans SC', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  --mono: 'JetBrains Mono', 'SFMono-Regular', 'Menlo', 'Consolas', monospace;
  --latin-display: 'Spectral', 'Noto Serif SC', serif;

  /* motion */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --dur-1: .15s;
  --dur-2: .25s;
  --dur-3: .7s;

  --rail-w: 46px;
  --rail-open-w: 214px;
  --rail-shift: 128px;
  --sheet-pad: clamp(28px, 5vw, 72px);
  /* DS-UNIFY v2 · scales */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px;
  --r-1: 2px; --r-2: 4px; --r-3: 8px; --r-pill: 999px;
  --elev-1: 0 1px 2px rgba(28,28,23,.06); --elev-2: 0 4px 14px -8px rgba(28,28,23,.18); --elev-3: 0 12px 32px -16px rgba(28,28,23,.30);
  --fs-cap: 10px; --fs-sm: 12px; --fs-base: 15px; --fs-md: 19px; --fs-lg: 24px; --fs-xl: 32px; --fs-display: 46px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background:
    repeating-linear-gradient(0deg,  var(--grid) 0 1px, transparent 1px 32px),
    repeating-linear-gradient(90deg, var(--grid) 0 1px, transparent 1px 32px),
    var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.85;
  letter-spacing: 0.01em;
}

::selection { background: var(--vermilion); color: var(--vellum); }
:focus-visible { outline: 2px solid var(--vermilion); outline-offset: 2px; }
code {
  font-family: var(--mono);
  font-size: 0.86em;
  background: var(--paper-2);
  border: 1px solid var(--rule-soft);
  padding: 0 5px;
  color: var(--prussian);
}
strong { font-weight: 700; color: var(--ink); }
em { font-style: normal; color: var(--vermilion); }
a { color: inherit; }

/* ---------- reading progress ---------- */
#progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0%;
  background: var(--vermilion); z-index: 60;
}

/* ---------- topbar ---------- */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 clamp(16px, 3vw, 36px);
  height: 52px;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--rule);
}
.topbar .logo {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.22em; font-weight: 600;
}
.topbar .logo .logo-mark {
  width: 22px; height: 22px; flex: none; display: block; color: var(--ink);
}
.topbar .logo .logo-mark .logo-axis { stroke: var(--prussian); opacity: 0.72; }
.topbar .logo .logo-mark .logo-node { fill: var(--paper); stroke: currentColor; }
.topbar .sheet-ind {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.18em;
  color: var(--ink-fade);
}
.topbar .sheet-ind b { color: var(--vermilion); font-weight: 600; }

/* ---------- left rail (chapter spine) ---------- */
.rail {
  position: fixed; z-index: 40;
  top: 52px; bottom: 10px; left: 0; width: var(--rail-w);
  border-right: 1px solid var(--rule);
  background: color-mix(in oklab, var(--paper) 92%, white 8%);
  display: flex; flex-direction: column; justify-content: flex-start; gap: 2px;
  padding: 18px 0 20px;
  overflow-y: auto; overflow-x: hidden; scrollbar-width: none;
  transition: width .34s var(--ease-out), padding-right .34s var(--ease-out), background-color .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.rail::-webkit-scrollbar { display: none; }
.rail::before {
  content: ""; position: absolute; left: 14px; top: 16px; bottom: 16px; width: 1px;
  background: linear-gradient(180deg, transparent 0%, var(--rule) 10%, var(--rule) 90%, transparent 100%);
  opacity: .9; pointer-events: none;
}
.rail::after {
  content: ""; position: absolute; left: 14px; top: 18px; width: 2px; height: var(--rail-progress, 0px);
  background: linear-gradient(180deg, var(--vermilion-soft), var(--vermilion));
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--vermilion) 12%, transparent);
  opacity: .82; pointer-events: none;
  transition: height .28s var(--ease-out), opacity .24s ease;
}
.rail:hover, .rail:focus-within, body.rail-pinned .rail {
  width: var(--rail-open-w);
  padding-right: 12px;
  background: var(--paper);
  box-shadow: 8px 0 24px color-mix(in srgb, var(--ink) 12%, transparent);
  z-index: 60;
}
.ln-rail-meta {
  position: sticky; top: -1px; z-index: 4;
  display: flex; align-items: flex-start; gap: 8px;
  padding: 7px 8px 10px;
  margin: 0 0 6px;
  background: linear-gradient(180deg, color-mix(in oklab, var(--paper) 97%, white 3%) 0%, color-mix(in oklab, var(--paper) 94%, white 6%) 82%, transparent 100%);
  border-bottom: 1px solid var(--rule-soft);
}
.ln-rail-live { min-width: 0; flex: 1 1 auto; }
.ln-rail-k {
  display: block;
  margin-bottom: 3px;
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.16em;
  color: var(--ink-fade);
}
.ln-rail-now {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--vermilion);
}
.ln-rail-cur {
  display: inline-block; max-width: 0; overflow: hidden; opacity: 0; vertical-align: bottom;
  white-space: nowrap;
  font-family: var(--serif);
  font-size: 12px;
  color: var(--ink);
  transition: max-width .36s var(--ease-out), opacity .26s var(--ease-out), margin-left .26s var(--ease-out);
}
.rail:hover .ln-rail-cur, .rail:focus-within .ln-rail-cur, body.rail-pinned .rail .ln-rail-cur {
  max-width: 128px; opacity: 1; margin-left: 8px;
}
.ln-rail-pin {
  flex: 0 0 auto;
  min-width: 34px;
  padding: 5px 7px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: color-mix(in oklab, var(--paper) 84%, white 16%);
  color: var(--ink-fade);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: color .24s var(--ease-out), border-color .24s var(--ease-out), background .24s var(--ease-out), transform .24s var(--ease-out);
}
.ln-rail-pin:hover, .ln-rail-pin:focus-visible {
  color: var(--vermilion);
  border-color: color-mix(in oklab, var(--vermilion) 42%, var(--rule));
  background: color-mix(in oklab, var(--vermilion) 8%, var(--paper));
}
.ln-rail-pin[aria-pressed="true"] {
  color: var(--vermilion);
  border-color: color-mix(in oklab, var(--vermilion) 44%, var(--rule));
  background: color-mix(in oklab, var(--vermilion) 10%, var(--paper));
}
.rail a {
  position: relative;
  display: block; text-decoration: none;
  font-family: var(--mono); font-size: 8.7px; letter-spacing: 0.12em;
  color: var(--ink-fade);
  padding: 5px 10px 5px 24px;
  border-left: 2px solid transparent; margin-left: -1px; margin-right: 8px;
  border-radius: 0 6px 6px 0;
  transition: color .24s var(--ease-out), border-color .24s var(--ease-out), background .26s var(--ease-out), opacity .26s var(--ease-out), transform .32s var(--ease-out);
  white-space: nowrap;
}
.rail a::before {
  content: ""; position: absolute; left: 10px; top: 50%;
  width: 8px; height: 1px; background: var(--rule);
  transform: translateY(-50%);
  transition: background-color .24s ease, width .28s var(--ease-out);
}
.rail a::after {
  content: ""; position: absolute; left: 24px; right: 16px; bottom: 2px; height: 1px;
  background: var(--vermilion); opacity: 0;
  transform: scaleX(.15); transform-origin: left center;
  transition: transform .32s var(--ease-out), opacity .22s ease;
}
.rail a .t {
  display: inline-block; max-width: 0; overflow: hidden; vertical-align: bottom;
  transition: max-width .36s var(--ease-out), opacity .26s var(--ease-out), margin-left .26s var(--ease-out);
  opacity: 0;
}
.rail a.on {
  color: var(--ink);
  border-left-color: var(--vermilion);
  background: color-mix(in oklab, var(--vermilion) 7%, transparent);
}
.rail a.on::before { width: 10px; background: var(--vermilion); }
.rail a.on::after { opacity: .78; transform: scaleX(1); }
.rail a.on .t { max-width: 104px; opacity: 1; margin-left: 8px; }
.rail:hover a .t, .rail:focus-within a .t, body.rail-pinned .rail a .t { max-width: 170px; opacity: 1; margin-left: 8px; }
@media (hover: hover) {
  .rail:hover a:hover,
  .rail a:focus-visible {
    transform: translateX(4px);
    color: var(--ink);
    background: color-mix(in oklab, var(--vermilion) 8%, transparent);
  }
  .rail:hover a:hover::before,
  .rail a:focus-visible::before { background: var(--vermilion-soft); width: 10px; }
  .rail:hover a:hover::after,
  .rail a:focus-visible::after { opacity: .72; transform: scaleX(1); }
  .rail:hover a:hover + a { transform: translateX(2px); opacity: .82; }
  .rail a:focus-visible { outline: 2px solid var(--vermilion); outline-offset: -2px; }
}
@media (max-width: 1199px) { .rail { display: none; } }

/* ---------- page column ---------- */
.article, .hero, .toc, .closing, .colophon {
  margin-left: var(--rail-w);
}
@media (min-width: 1200px) {
  .article, .hero, .toc, .closing, .colophon, .part-hero, .loc-band, .module-dossier, .module-shift, .section {
    transition: transform .34s var(--ease-out);
    will-change: transform;
  }
  body:is(.rail-open, .rail-pinned) :is(.article, .hero, .toc, .closing, .colophon, .part-hero, .loc-band, .module-dossier, .module-shift, .section) {
    transform: translateX(var(--rail-shift));
  }
}
@media (max-width: 1199px) {
  .article, .hero, .toc, .closing, .colophon { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .rail, .rail::after, .rail a, .rail a::before, .rail a::after, .rail a .t,
  .article, .hero, .toc, .closing, .colophon, .part-hero, .loc-band, .module-dossier, .module-shift, .section {
    transition: none !important;
  }
}

/* ---------- hero ---------- */
.hero {
  position: relative;
  padding: calc(52px + clamp(28px, 6vh, 80px)) var(--sheet-pad) clamp(40px, 7vh, 80px);
  border-bottom: 1px solid var(--rule-strong);
  overflow: hidden;
}
.hero-id {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em;
  color: var(--vermilion);
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  margin-bottom: clamp(24px, 4vh, 40px);
}
.hero-id .pip { width: 10px; height: 10px; background: var(--vermilion); display: inline-block; }
.hero-id .sep { color: var(--rule); }
.hero h1 {
  font-family: var(--serif);
  font-weight: 900;
  font-size: clamp(44px, 9.5vw, 124px);
  line-height: 1.04;
  letter-spacing: 0.01em;
  max-width: 11em;
}
.hero h1 .accent { color: var(--vermilion); }
.hero h1 .light { font-weight: 700; color: var(--ink-soft); }
.hero-sub {
  margin-top: clamp(22px, 4vh, 36px);
  max-width: 33em;
  font-size: clamp(16px, 1.6vw, 19px);
  line-height: 1.9;
  color: var(--ink-soft);
}
.hero-sub .latin {
  display: block; margin-top: 6px;
  font-family: var(--latin-display); font-style: italic;
  font-size: 0.82em; color: var(--ink-fade);
}
.hero-grid {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(360px, 0.9fr);
  gap: clamp(28px, 5vw, 72px); align-items: start;
}
.hero-side {
  display: grid;
  gap: 16px;
  align-self: start;
}
.hero-meta {
  border: 1px solid var(--rule-strong);
  background: var(--vellum);
  font-size: 13px;
}
.hero-meta > div {
  display: grid; grid-template-columns: 112px 1fr;
  border-bottom: 1px solid var(--rule-soft);
}
.hero-meta > div:last-child { border-bottom: none; }
.hero-meta .label {
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.14em;
  color: var(--ink-fade); padding: 10px 12px;
  border-right: 1px solid var(--rule-soft);
  display: flex; align-items: center;
}
.hero-meta .val { padding: 9px 14px; font-weight: 500; }
.hero-meta .val .accent { color: var(--vermilion); }
.hero-stamp {
  position: absolute; right: clamp(16px, 5vw, 72px); top: calc(52px + 28px);
  width: 92px; height: 92px;
  border: 2.5px solid var(--vermilion);
  border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--serif); font-weight: 900; font-size: 19px; line-height: 1.25;
  color: var(--vermilion); text-align: center;
  transform: rotate(8deg);
  opacity: 0.82;
  mask-image: radial-gradient(circle at 32% 64%, transparent 0 2px, black 3px),
              radial-gradient(circle at 70% 22%, transparent 0 1.5px, black 2.5px);
}
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; align-items: start; }
  .hero-side { align-self: start; }
  .hero-stamp { display: none; }
}

/* ---------- TOC (sheet index) ---------- */
.toc {
  padding: clamp(36px, 6vh, 64px) var(--sheet-pad);
  border-bottom: 1px solid var(--rule);
}
.toc .toc-cap {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em;
  color: var(--ink-fade); margin-bottom: 22px;
}
.toc ol { list-style: none; }
.toc li { break-inside: avoid; }
.toc-acts { columns: 2; column-gap: clamp(32px, 6vw, 96px); margin-top: 10px; }
.toc-act { break-inside: avoid; margin-bottom: 24px; }
.toc-acts ol a {
  display: flex; align-items: baseline; gap: 14px;
  text-decoration: none; padding: 7px 2px;
  border-bottom: 1px dotted var(--rule);
  transition: background .2s;
}
.toc-acts ol a:hover { background: var(--paper-2); }
.toc .n {
  font-family: var(--mono); font-size: 11px; color: var(--vermilion); min-width: 2.2em;
}
.toc .zh { font-family: var(--serif); font-weight: 700; font-size: 15.5px; }
.toc .hint {
  margin-left: auto; font-size: 11.5px; color: var(--ink-fade);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 14em;
}
@media (max-width: 760px) { .toc-acts { columns: 1; } .toc .hint { display: none; } .routes { grid-template-columns: 1fr; } }

/* ---------- article & sheets ---------- */
.article { display: block; }
.section {
  position: relative;
  margin: clamp(28px, 5vh, 56px) var(--sheet-pad);
  padding: clamp(26px, 4vw, 52px) clamp(22px, 3.6vw, 56px) clamp(36px, 5vw, 64px);
  background: var(--vellum);
  border: 1px solid var(--rule-strong);
}
.section:nth-of-type(even) { background: color-mix(in srgb, var(--vellum) 72%, var(--paper-2)); }
/* drafting corner ticks */
.section::before, .section::after {
  content: ""; position: absolute; width: 14px; height: 14px; pointer-events: none;
}
.section::before {
  top: -7px; left: -7px;
  border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink);
}
.section::after {
  bottom: -7px; right: -7px;
  border-left: 1px solid var(--ink); border-top: 1px solid var(--ink);
}

/* sheet header = title block */
.section-header {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: clamp(20px, 3vw, 44px);
  padding-bottom: clamp(20px, 3vh, 30px);
  margin-bottom: clamp(26px, 4vh, 40px);
  border-bottom: 2px solid var(--rule-strong);
}
.section-id {
  border: 1px solid var(--rule-strong);
  background: var(--paper);
  align-self: start;
  font-family: var(--mono);
  text-align: center;
}
.section-id > div:first-child {
  font-size: 8.5px; letter-spacing: 0.3em; color: var(--ink-fade);
  padding: 6px 0 4px; border-bottom: 1px solid var(--rule);
}
.section-id .num {
  font-family: var(--serif); font-weight: 900;
  font-size: 44px; line-height: 1.15;
  border-bottom: 1px solid var(--rule);
  padding: 2px 0 4px;
}
.section-id .num span { color: var(--vermilion); }
.section-id .label {
  font-size: 8px; letter-spacing: 0.1em; color: var(--ink-soft);
  padding: 6px 8px; line-height: 1.6;
}
.section-header h2 {
  font-family: var(--serif); font-weight: 900;
  font-size: clamp(30px, 4.6vw, 52px);
  line-height: 1.3; letter-spacing: 0.01em;
  position: relative; display: inline-block;
}
.section-header h2 .em {
  color: var(--vermilion); font-style: normal;
}
.section-header h2::after {
  content: ""; display: block; height: 3px; margin-top: 12px;
  background: var(--ink); width: 64px;
  transform-origin: left center;
}
.rv-h .section-header h2::after { transform: scaleX(0); }
.rv-h.in .section-header h2::after { transition: transform .9s var(--ease-out) .15s; transform: scaleX(1); }
.section-lede {
  margin-top: 16px;
  font-size: clamp(15px, 1.5vw, 17px);
  line-height: 1.95;
  color: var(--ink-soft);
  max-width: 46em;
}
@media (max-width: 760px) {
  .section-header { grid-template-columns: 1fr; }
  .section-id { display: inline-grid; grid-template-columns: auto auto auto; align-items: center; }
  .section-id > div:first-child { border-bottom: none; border-right: 1px solid var(--rule); padding: 4px 8px; }
  .section-id .num { font-size: 22px; border-bottom: none; border-right: 1px solid var(--rule); padding: 2px 10px; }
  .section-id .label { padding: 4px 10px; }
}

/* ---------- body two-column with marginalia ---------- */
.body {
  display: grid;
  grid-template-columns: minmax(150px, 200px) minmax(0, 1fr);
  gap: clamp(22px, 3.4vw, 52px);
  margin-top: 26px;
}
.body-side {
  font-size: 12px; line-height: 1.8; color: var(--ink-soft);
  border-top: 2px solid var(--ink);
  padding-top: 10px;
  position: relative;
}
.body-side::before {
  content: ""; position: absolute; top: -2px; right: -26px; width: 26px; height: 2px;
  background: linear-gradient(90deg, var(--ink), transparent);
}
.body-side .key, .body-side dt {
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.2em;
  color: var(--vermilion); margin: 10px 0 6px;
}
.body-side ul { list-style: none; }
.body-side li {
  padding: 4px 0; border-bottom: 1px dotted var(--rule);
}
.body-side dd { margin-bottom: 8px; }
.body-main { max-width: 66ch; }
.body-main p + p { margin-top: 1.1em; }
.body-main > p:first-child::first-letter {
  font-family: var(--serif); font-weight: 900; font-size: 1.9em;
  line-height: 1; padding-right: 2px;
}
@media (max-width: 860px) {
  .body { grid-template-columns: 1fr; }
  .body-side { border-top-width: 1px; }
  .body-side::before { display: none; }
}

/* ---------- callout (review note) ---------- */
.callout {
  margin: 1.6em 0;
  padding: 18px 22px 18px 26px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--vermilion);
  position: relative;
}
.callout .key {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.2em;
  color: var(--vermilion); margin-bottom: 8px;
}
.callout p { font-size: 14.5px; line-height: 1.9; color: var(--ink-soft); }

/* ---------- diagrams (figure sheets) ---------- */
.diagram-wrap {
  margin: clamp(28px, 5vh, 44px) auto;
  max-width: 960px;
  border: 1px solid var(--rule-strong);
  background: var(--vellum);
}
.diagram-meta {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 16px;
  border-bottom: 1px solid var(--rule);
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em;
  color: var(--ink-fade);
  background: var(--paper);
}
.diagram-meta .id { color: var(--ink); font-weight: 600; }
.diagram { padding: clamp(14px, 2.5vw, 30px); overflow-x: auto; }
.diagram svg { min-width: 640px; width: 100%; display: block; }
/* taste 2026-06 · C-1: hover-to-inspect — accent the hovered node, recede the other shapes (labels stay legible) */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .diagram svg :is(rect, circle, ellipse, polygon)[stroke] { transition: opacity var(--dur-2) var(--ease-out), stroke var(--dur-1) var(--ease-out); }
  .diagram svg:has(:is(rect, circle, ellipse, polygon)[stroke]:hover) :is(rect, circle, ellipse, polygon)[stroke]:not(:hover) { opacity: .3; }
  .diagram svg :is(rect, circle, ellipse, polygon)[stroke]:hover { stroke: var(--accent); }
}
.diagram-caption {
  padding: 12px 18px 14px;
  border-top: 1px dashed var(--rule);
  font-size: 12.5px; line-height: 1.8; color: var(--ink-soft);
  background: var(--paper);
}
.diagram-wrap + .diagram-wrap { margin-top: clamp(44px, 7vh, 72px); }
.diagram-duo {
  width: min(100%, 1120px);
  margin: clamp(34px, 6vh, 58px) auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 2.4vw, 28px);
  align-items: start;
}
.diagram-duo > .diagram-wrap { margin: 0; max-width: none; min-width: 0; }
.diagram-duo .diagram-meta { align-items: flex-start; gap: 8px; flex-wrap: wrap; }
.diagram-duo .diagram { padding: clamp(12px, 2vw, 22px); }
.diagram-duo .diagram svg { min-width: 0; }
.diagram-duo[data-mode="balanced"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.diagram-duo[data-mode="sidecar"] { grid-template-columns: minmax(0, 1.5fr) minmax(240px, 1fr); }
.diagram-duo[data-mode="reverse-sidecar"] { grid-template-columns: minmax(240px, 1fr) minmax(0, 1.5fr); }
.diagram-duo[data-mode="sidecar"] > .diagram-wrap:nth-child(2) .diagram-caption,
.diagram-duo[data-mode="reverse-sidecar"] > .diagram-wrap:nth-child(1) .diagram-caption {
  font-size: 11.2px;
  line-height: 1.65;
}
@media (max-width: 980px) {
  .diagram-duo,
  .diagram-duo[data-mode="balanced"],
  .diagram-duo[data-mode="sidecar"],
  .diagram-duo[data-mode="reverse-sidecar"] { grid-template-columns: 1fr; width: min(100%, 960px); }
  .diagram-duo .diagram svg { min-width: 640px; }
}
.gen-plate {
  width: min(100%, 1040px);
  margin: clamp(32px, 6vh, 56px) auto;
  border: 1px solid var(--rule-strong);
  background: var(--vellum);
  overflow: hidden;
}
.gen-plate img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  filter: saturate(0.92) contrast(1.03);
}
.gen-plate img[src$=".svg"] {
  object-fit: contain;
  filter: none;
  background: var(--vellum);
}
.gen-plate figcaption {
  padding: 12px clamp(14px, 2vw, 18px) 14px;
  border-top: 1px dashed var(--rule);
  background: var(--paper);
  color: var(--ink-soft);
  font-size: clamp(11.5px, 1.05vw, 12.5px);
  line-height: 1.7;
}
.gen-plate .cap-k {
  display: block;
  margin-bottom: 4px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  color: var(--vermilion);
}
.side-ai-plate {
  margin: 0 0 18px;
  border: 1px solid var(--rule);
  background: var(--paper);
  overflow: hidden;
}
.side-ai-plate img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  filter: saturate(.9) contrast(1.02);
}
.side-ai-plate figcaption {
  padding: 8px 10px 10px;
  border-top: 1px dashed var(--rule);
  background: var(--paper);
  color: var(--ink-soft);
  font-size: 10.5px;
  line-height: 1.55;
}
.side-ai-plate .cap-k {
  display: block;
  margin-bottom: 3px;
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: .16em;
  color: var(--vermilion);
}
@media (max-width: 860px) {
  .side-ai-plate { max-width: 220px; }
}

/* ---------- models (worldviews) ---------- */
.models {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px;
  margin-top: 30px;
}
.model {
  grid-column: span 2;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-top: 2px solid var(--ink);
  padding: 18px 20px 20px;
  transition: transform .35s var(--ease-out), border-color .3s;
}
.model:nth-child(1), .model:nth-child(2) { grid-column: span 3; }
.model:hover { transform: translateY(-4px); border-top-color: var(--vermilion); }
.model-id {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em;
  color: var(--vermilion); margin-bottom: 10px;
}
.model h4 {
  font-family: var(--serif); font-weight: 900; font-size: 19px; margin-bottom: 10px;
}
.model p { font-size: 13.5px; line-height: 1.85; color: var(--ink-soft); }
@media (max-width: 900px) { .model, .model:nth-child(-n+2) { grid-column: span 6; } }

.model-synthesis {
  margin-top: 18px;
  border: 1px solid var(--rule-strong);
  background: var(--paper);
  padding: 26px 30px;
  position: relative;
}
.model-synthesis::before {
  content: "META"; position: absolute; top: -1px; right: 18px;
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.25em;
  background: var(--ink); color: var(--paper);
  padding: 3px 10px;
}
.syn-header {
  display: flex; gap: 16px; align-items: baseline; margin-bottom: 10px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.15em;
}
.syn-id { color: var(--vermilion); font-weight: 600; }
.syn-tag { color: var(--ink-fade); font-family: var(--latin-display); font-style: italic; font-size: 12px; letter-spacing: 0.02em; }
.model-synthesis h4 { font-family: var(--serif); font-weight: 900; font-size: 22px; margin-bottom: 12px; }
.syn-body p { font-size: 14px; line-height: 1.9; color: var(--ink-soft); }
.syn-body p + p { margin-top: 10px; }

/* shared EN inline label */
.en, .bn-en {
  font-family: var(--latin-display); font-style: italic; font-weight: 400;
  font-size: 0.72em; color: var(--ink-fade); margin-left: 10px; letter-spacing: 0.02em;
}

/* ---------- pillars ---------- */
.pillars { margin-top: 30px; }
.pillar {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) 210px;
  gap: clamp(18px, 3vw, 40px);
  padding: clamp(22px, 3.4vh, 34px) 0;
  border-bottom: 1px solid var(--rule);
}
.pillar:last-child { border-bottom: none; }
.pillar-id {
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.18em; color: var(--ink-fade);
}
.pillar-id .num {
  display: block;
  font-family: var(--serif); font-weight: 900; font-size: 46px; line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.2px var(--ink);
  margin-bottom: 6px;
}
.pillar:hover .pillar-id .num { -webkit-text-stroke-color: var(--vermilion); }
.pillar h3 { font-family: var(--serif); font-weight: 900; font-size: clamp(20px, 2.4vw, 26px); }
.pillar h3 .em { color: var(--vermilion); }
.pillar-en {
  font-family: var(--latin-display); font-style: italic; font-size: 13px;
  color: var(--ink-fade); margin: 4px 0 12px;
}
.pillar p { font-size: 14px; line-height: 1.9; color: var(--ink-soft); }
.pillar p + p { margin-top: 9px; }
.pillar-spec {
  align-self: start;
  border: 1px solid var(--rule);
  background: var(--paper);
  padding: 12px 14px;
  font-size: 11.5px;
}
.pillar-spec .label {
  font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.25em;
  color: var(--vermilion); margin-bottom: 8px;
}
.pillar-spec dt {
  font-family: var(--mono); font-size: 9px; color: var(--ink-fade); letter-spacing: 0.08em;
  margin-top: 7px;
}
.pillar-spec dd { color: var(--ink-soft); }
@media (max-width: 960px) {
  .pillar { grid-template-columns: 64px 1fr; }
  .pillar-spec { grid-column: 2; }
}

/* ---------- substrate stack ---------- */
.stack { margin-top: 30px; counter-reset: none; }
.layer {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) 200px;
  gap: clamp(18px, 3vw, 40px);
  align-items: start;
  border: 1px solid var(--rule-strong);
  background: var(--paper);
  padding: 20px 24px;
  margin-bottom: -1px;
  transition: background .25s;
}
.layer:hover { background: var(--vellum); }
.layer-num {
  font-family: var(--serif); font-weight: 900; font-size: 44px; line-height: 1;
  color: transparent; -webkit-text-stroke: 1.2px var(--prussian);
}
.layer h4 { font-family: var(--serif); font-weight: 900; font-size: 18px; margin-bottom: 6px; }
.layer p { font-size: 13.5px; line-height: 1.85; color: var(--ink-soft); }
.layer-tools {
  font-family: var(--mono); font-size: 10.5px; line-height: 2;
  color: var(--prussian);
  border-left: 1px dashed var(--rule);
  padding-left: 16px;
}
.layer-tools .key {
  font-size: 8.5px; letter-spacing: 0.25em; color: var(--ink-fade); margin-bottom: 4px;
}
@media (max-width: 860px) {
  .layer { grid-template-columns: 56px 1fr; }
  .layer-tools { grid-column: 2; border-left: none; padding-left: 0; border-top: 1px dashed var(--rule); padding-top: 10px; }
}

/* ---------- failure modes ---------- */
.failures { margin-top: 28px; }
.failure-row {
  display: grid;
  grid-template-columns: minmax(170px, 240px) minmax(0, 1fr);
  gap: clamp(16px, 3vw, 40px);
  padding: 16px 4px;
  border-bottom: 1px dotted var(--rule);
  position: relative;
}
.failure-row::before {
  content: "✕";
  position: absolute; left: -22px; top: 18px;
  font-size: 11px; color: var(--vermilion); opacity: 0.65;
}
.failure-name {
  font-family: var(--serif); font-weight: 900; font-size: 16px; line-height: 1.5;
}
.failure-name .en { display: block; margin: 2px 0 0; font-size: 11.5px; }
.failure-desc { font-size: 13.5px; line-height: 1.85; color: var(--ink-soft); }
@media (max-width: 760px) { .failure-row { grid-template-columns: 1fr; gap: 6px; } }

/* ---------- fit grid ---------- */
.fit-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 30px;
}
.fit { border: 1px solid var(--rule-strong); padding: 24px 26px; background: var(--paper); position: relative; }
.fit-key {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; margin-bottom: 14px;
}
.fit.yes .fit-key { color: var(--verified); }
.fit.no  .fit-key { color: var(--vermilion); }
.fit.yes::after, .fit.no::after {
  position: absolute; top: 14px; right: 16px;
  font-family: var(--serif); font-weight: 900; font-size: 15px;
  border: 2px solid currentColor; border-radius: 50%;
  width: 34px; height: 34px; display: grid; place-items: center;
  transform: rotate(10deg); opacity: 0.7;
}
.fit.yes::after { content: "宜"; color: var(--verified); }
.fit.no::after  { content: "忌"; color: var(--vermilion); }
.fit p { font-size: 13.5px; line-height: 1.85; color: var(--ink-soft); }
.fit p + p { margin-top: 12px; }
@media (max-width: 800px) { .fit-grid { grid-template-columns: 1fr; } }

/* ---------- perspectives ---------- */
.perspectives { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 30px; }
.perspective {
  border: 1px solid var(--rule); border-top: 2px solid var(--prussian);
  background: var(--paper); padding: 18px 20px;
}
.perspective .id {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.16em; color: var(--prussian);
  margin-bottom: 10px;
}
.perspective h4 { font-family: var(--serif); font-weight: 900; font-size: 17px; margin-bottom: 8px; }
.perspective h4 .en { display: block; margin: 3px 0 0; }
.perspective p { font-size: 13px; line-height: 1.8; color: var(--ink-soft); }
.examples {
  margin-top: 12px; padding-top: 10px; border-top: 1px dotted var(--rule);
  font-size: 11.5px; line-height: 1.9; color: var(--ink-fade);
}
.examples .lbl, .stats .lbl {
  display: block;
  font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.22em;
  color: var(--vermilion); margin-bottom: 4px;
}
@media (max-width: 900px) { .perspectives { grid-template-columns: 1fr; } }

/* ---------- case map (ledger) ---------- */
.case-group { margin-top: 34px; border: 1px solid var(--rule-strong); background: var(--paper); }
.case-group-header {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 10px 18px;
  background: var(--ink); color: var(--paper);
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em;
}
.case-group-header .title { font-family: var(--sans); font-size: 12px; letter-spacing: 0.05em; color: var(--paper-deep); }
.case-row {
  display: grid;
  grid-template-columns: minmax(150px, 200px) minmax(0, 1fr) 180px;
  gap: clamp(14px, 2.4vw, 32px);
  padding: 16px 18px;
  border-bottom: 1px solid var(--rule-soft);
}
.case-row:last-child { border-bottom: none; }
.case-row:hover { background: var(--vellum); }
.case-row .name { font-family: var(--serif); font-weight: 900; font-size: 15.5px; line-height: 1.5; }
.case-row .what {
  display: block; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.06em;
  color: var(--prussian); margin-top: 4px; font-weight: 400;
}
.case-row .desc { font-size: 13px; line-height: 1.8; color: var(--ink-soft); }
.case-row .stats { font-size: 11.5px; border-left: 1px dashed var(--rule); padding-left: 14px; }
.case-row .stats .lbl { margin-top: 7px; }
.case-row .stats .val { color: var(--ink); font-weight: 500; }
@media (max-width: 860px) {
  .case-row { grid-template-columns: 1fr; }
  .case-row .stats { border-left: none; padding-left: 0; display: flex; flex-wrap: wrap; gap: 0 18px; }
}

/* ---------- dimensions ---------- */
.dimensions { margin-top: 28px; }
.dim-row {
  display: grid; grid-template-columns: minmax(130px, 170px) minmax(0, 1fr);
  gap: clamp(18px, 3vw, 44px);
  padding: 20px 0; border-bottom: 1px solid var(--rule);
}
.dim-row:last-child { border-bottom: none; }
.dim-name { font-family: var(--serif); font-weight: 900; font-size: 17px; }
.dim-name .id {
  display: block; font-family: var(--mono); font-weight: 400; font-size: 9.5px;
  letter-spacing: 0.18em; color: var(--vermilion); margin-bottom: 6px;
}
.dim-body p { font-size: 13.5px; line-height: 1.85; color: var(--ink-soft); }
.dim-body p + p { margin-top: 8px; }
@media (max-width: 720px) { .dim-row { grid-template-columns: 1fr; gap: 8px; } }

/* ---------- timeline ---------- */
.tl-wrap { margin-top: 30px; border-left: 2px solid var(--ink); padding-left: clamp(18px, 3vw, 36px); }
.tl-row { position: relative; padding: 18px 0 26px; }
.tl-row::before {
  content: ""; position: absolute; left: calc(-1 * clamp(18px, 3vw, 36px) - 6px); top: 30px;
  width: 10px; height: 10px; background: var(--vermilion);
}
.tl-period {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.2em; color: var(--ink-fade);
}
.tl-period .big {
  display: block; font-family: var(--serif); font-weight: 900; font-size: clamp(24px, 3.4vw, 34px);
  color: var(--ink); letter-spacing: 0; margin: 2px 0 10px;
}
.tl-content h4, .tl-content h5 { font-family: var(--serif); font-weight: 900; font-size: 16.5px; margin-bottom: 8px; }
.tl-content p { font-size: 13.5px; line-height: 1.85; color: var(--ink-soft); }
.tl-content p + p { margin-top: 7px; }

/* ---------- playbook ---------- */
.playbook { margin-top: 30px; }
.pb-title {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; color: var(--vermilion);
}
.pb-title .big {
  display: block; font-family: var(--serif); font-weight: 900;
  font-size: clamp(22px, 3vw, 30px); color: var(--ink); letter-spacing: 0.01em; margin-top: 6px;
}
.pb-sub { font-size: 14px; color: var(--ink-soft); margin: 10px 0 26px; max-width: 50em; }
.pb-month {
  display: grid; grid-template-columns: 96px minmax(0, 1fr);
  gap: clamp(18px, 3vw, 40px);
  padding: 18px 0; border-top: 1px solid var(--rule);
}
.pb-month-num {
  font-family: var(--serif); font-weight: 900; font-size: 30px; line-height: 1.1;
  color: transparent; -webkit-text-stroke: 1.1px var(--ink);
}
.pb-month-num .lbl {
  display: block; font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.2em;
  color: var(--ink-fade); -webkit-text-stroke: 0; margin-top: 5px;
}
.pb-month h5 { font-family: var(--serif); font-weight: 900; font-size: 16.5px; margin-bottom: 7px; }
.pb-month p { font-size: 13.5px; line-height: 1.85; color: var(--ink-soft); }
@media (max-width: 720px) { .pb-month { grid-template-columns: 64px 1fr; } }

/* ---------- bottlenecks ---------- */
.bottlenecks { display: flex; flex-direction: column; gap: 20px; margin-top: 40px; }
.bn {
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  transition: box-shadow .3s, transform .3s var(--ease-out);
}
.bn:hover { transform: translateY(-2px); box-shadow: 0 10px 28px -18px rgba(28,28,23,.5); }
.bn.hit { border-left: 3px solid var(--vermilion); }
.bn-head {
  display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap;
  padding: 16px 22px 13px;
  border-bottom: 2px solid var(--ink);
}
.bn-id {
  font-family: var(--serif); font-weight: 900; font-size: 19px;
  color: transparent; -webkit-text-stroke: 1px var(--vermilion);
  letter-spacing: 0.04em;
}
.bn-head h4 { font-family: var(--serif); font-weight: 900; font-size: 19px; }
.bn-law {
  margin-left: auto;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.12em;
  color: var(--ink-fade); text-transform: uppercase;
  border: 1px solid var(--rule); padding: 2px 8px; background: var(--vellum);
}
.bn-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; }
.bn-cell { padding: 15px 22px 18px; border-right: 1px dashed var(--rule); }
.bn-cell:last-child { border-right: none; }
.bn-cell p { font-size: 13px; line-height: 1.82; color: var(--ink-soft); }
.bn-key {
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.16em;
  color: var(--ink-fade); margin-bottom: 8px; text-transform: uppercase;
}
.bn-cell.bad .bn-key { color: var(--caution); }
.bn-cell.good { background: color-mix(in srgb, var(--verified) 4.5%, var(--paper)); }
.bn-cell.good .bn-key { color: var(--verified); }
.bn-test {
  display: flex; gap: 14px; align-items: baseline;
  padding: 11px 22px;
  border-top: 1px solid var(--rule);
  background: var(--paper-2);
  font-size: 12.5px; line-height: 1.75; color: var(--ink-soft);
}
.bn-tkey {
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.16em;
  color: var(--vermilion); white-space: nowrap;
}
.bn-toggle {
  margin-left: auto; align-self: center; flex: none;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em;
  border: 1px solid var(--rule-strong); background: var(--vellum); color: var(--ink-soft);
  padding: 4px 12px; cursor: pointer;
  transition: background .2s, color .2s;
}
.bn-toggle:hover { background: var(--ink); color: var(--paper); }
.bn-toggle[aria-pressed="true"] { background: var(--vermilion); border-color: var(--vermilion); color: var(--vellum); }
@media (max-width: 920px) {
  .bn-grid { grid-template-columns: 1fr; }
  .bn-cell { border-right: none; border-bottom: 1px dashed var(--rule); }
  .bn-cell:last-child { border-bottom: none; }
  .bn-law { margin-left: 0; }
  .bn-test { flex-wrap: wrap; }
}

/* ---------- diagnosis verdict ---------- */
.bnv {
  margin-top: 36px;
  border: 1px solid var(--rule-strong);
  background: var(--paper);
  padding: 24px 28px;
}
.bnv .bnv-key {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; color: var(--vermilion);
  margin-bottom: 12px;
}
.bnv-bar {
  height: 14px; border: 1px solid var(--ink); background: var(--vellum);
  position: relative; margin: 12px 0 8px;
}
.bnv-bar i {
  position: absolute; inset: 1px 1px 1px 1px; width: auto;
  background: repeating-linear-gradient(135deg, var(--vermilion) 0 5px, color-mix(in srgb, var(--vermilion) 70%, var(--paper)) 5px 10px);
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform .6s var(--ease-out);
}
.bnv-scale {
  display: flex; justify-content: space-between;
  font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.1em; color: var(--ink-fade);
}
.bnv-read { font-size: 14px; line-height: 1.85; color: var(--ink-soft); margin-top: 12px; }
.bnv-read b { font-family: var(--serif); font-size: 1.25em; color: var(--vermilion); }

/* ---------- kernel ---------- */
.kernel {
  margin-top: 48px;
  border: 1px solid var(--rule-strong);
  background: var(--paper);
  padding: 30px 34px;
  position: relative;
}
.kernel::after {
  content: "核"; position: absolute; top: 20px; right: 24px;
  width: 58px; height: 58px; border: 2.5px solid var(--vermilion); border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--serif); font-weight: 900; font-size: 26px; color: var(--vermilion);
  transform: rotate(-9deg); opacity: 0.55;
}
.bn-syn-key {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em;
  color: var(--vermilion); margin-bottom: 14px;
}
.kernel p { font-size: 14.5px; line-height: 1.9; color: var(--ink-soft); }
.kernel p + p { margin-top: 11px; }
.k-abilities {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 0;
  margin-top: 28px; border: 1px solid var(--ink);
}
.k-ab { padding: 14px 14px 16px; border-right: 1px solid var(--rule); background: var(--vellum); }
.k-ab:last-child { border-right: none; }
.k-ab-id { font-family: var(--mono); font-size: 9px; letter-spacing: 0.15em; color: var(--vermilion); margin-bottom: 6px; }
.k-ab-name { font-family: var(--serif); font-weight: 900; font-size: 15px; margin-bottom: 6px; }
.k-ab p { font-size: 11.5px; line-height: 1.72; color: var(--ink-soft); }
.k-ab-caption {
  margin-top: 12px; font-family: var(--latin-display); font-style: italic;
  font-size: 12.5px; color: var(--ink-fade);
}
.k-gens { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; margin-top: 26px; }
.k-gen { border: 1px solid var(--rule); background: var(--vellum); padding: 16px 18px; position: relative; }
.k-gen:not(:last-child)::after {
  content: "→"; position: absolute; right: -14px; top: 50%; transform: translateY(-50%);
  color: var(--vermilion); font-size: 15px; z-index: 1;
}
.k-gen:last-child { border-color: var(--vermilion); }
.k-gen-num { font-family: var(--mono); font-size: 9px; letter-spacing: 0.18em; color: var(--prussian); margin-bottom: 6px; }
.k-gen-name { font-family: var(--serif); font-weight: 900; font-size: 15.5px; margin-bottom: 8px; }
.k-gen p { font-size: 12px; line-height: 1.78; color: var(--ink-soft); }
@media (max-width: 920px) {
  .k-abilities { grid-template-columns: 1fr 1fr; border: none; gap: 10px; }
  .k-ab { border: 1px solid var(--rule); }
  .k-gens { grid-template-columns: 1fr; }
  .k-gen:not(:last-child)::after { content: "↓"; right: auto; left: 50%; top: auto; bottom: -16px; transform: translateX(-50%); }
}

/* ---------- bn synthesis ---------- */
.bn-synthesis {
  margin-top: 28px;
  border-top: 2px solid var(--ink);
  padding: 26px 6px 4px;
}
.bn-synthesis p { font-size: 14.5px; line-height: 1.92; color: var(--ink-soft); max-width: 72ch; }
.bn-synthesis p + p { margin-top: 12px; }
.bn-syn-final {
  margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--rule);
  font-family: var(--serif); font-weight: 900; font-size: clamp(18px, 2.2vw, 22px);
  color: var(--ink);
}

/* ---------- Amdahl lab ---------- */
.amdahl {
  margin: clamp(28px, 5vh, 44px) 0;
  border: 1px solid var(--rule-strong);
  background: var(--paper);
}
.amdahl-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 16px; border-bottom: 1px solid var(--rule);
  background: var(--ink); color: var(--paper);
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em;
}
.amdahl-head .live { color: color-mix(in srgb, var(--vermilion-soft) 78%, var(--paper)); }
.amdahl-body {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(20px, 3.5vw, 48px);
  padding: clamp(18px, 3vw, 30px);
}
.amdahl label {
  display: block; font-size: 13px; color: var(--ink-soft); margin-bottom: 4px;
}
.amdahl label b { font-family: var(--mono); font-size: 12px; color: var(--vermilion); }
/* ---------- scrub: premium instrument sliders (taste 2026-06, C-2) ---------- */
.scrub {
  width: 100%; appearance: none; -webkit-appearance: none;
  height: 22px; background: transparent; cursor: pointer; --p: 0%;
}
.amdahl .scrub { margin-bottom: 14px; }
.scrub::-webkit-slider-runnable-track {
  height: 4px; border-radius: 2px;
  background: linear-gradient(90deg, var(--accent) var(--p), var(--rule) var(--p));
}
.scrub::-moz-range-track { height: 4px; border-radius: 2px; background: var(--rule); }
.scrub::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--accent); }
.scrub::-webkit-slider-thumb {
  -webkit-appearance: none; width: 16px; height: 16px; margin-top: -6px;
  background: var(--vellum); border: 2px solid var(--accent); border-radius: 50%;
  box-shadow: 0 1px 3px rgba(28, 28, 23, 0.25);
  transition: transform var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
}
.scrub::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--vellum); border: 2px solid var(--accent);
  box-shadow: 0 1px 3px rgba(28, 28, 23, 0.25);
  transition: transform var(--dur-1) var(--ease-out);
}
.scrub:hover::-webkit-slider-thumb { transform: scale(1.18); }
.scrub:active::-webkit-slider-thumb { transform: scale(1.06); box-shadow: 0 0 0 7px color-mix(in srgb, var(--accent) 15%, transparent); }
.scrub:focus-visible { outline: none; }
.scrub:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 32%, transparent); }
.scrub:hover::-moz-range-thumb { transform: scale(1.18); }
.scrub:active::-moz-range-thumb { transform: scale(1.06); }
.scrub:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 32%, transparent); }
@media (prefers-reduced-motion: reduce) {
  .scrub::-webkit-slider-thumb, .scrub::-moz-range-thumb { transition: none; }
}
.amdahl-out .speed {
  font-family: var(--serif); font-weight: 900; font-size: clamp(38px, 5vw, 54px); line-height: 1.1;
}
.amdahl-out .speed small {
  font-family: var(--mono); font-size: 11px; color: var(--ink-fade); letter-spacing: 0.12em;
  display: block; margin-bottom: 4px; font-weight: 400;
}
.amdahl-bars { margin-top: 14px; }
.amdahl-bars .row { display: grid; grid-template-columns: 88px 1fr; align-items: center; gap: 10px; margin-bottom: 7px; }
.amdahl-bars .row span { font-family: var(--mono); font-size: 9px; letter-spacing: 0.1em; color: var(--ink-fade); }
.amdahl-bars .bar { height: 11px; border: 1px solid var(--ink); background: var(--vellum); position: relative; overflow: hidden; }
.amdahl-bars .bar i {
  position: absolute; inset: 1px 1px 1px 1px; width: auto;
  background: var(--ink-fade);
  transform-origin: left center;
  transform: scaleX(1);
  transition: transform .35s var(--ease-out), background .3s;
}
.amdahl-bars .bar.after i { background: var(--vermilion); }
.amdahl-verdict {
  margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--rule);
  font-size: 13px; line-height: 1.8; color: var(--ink-soft); min-height: 3.6em;
}
.amdahl-verdict b { color: var(--vermilion); }
@media (max-width: 800px) { .amdahl-body { grid-template-columns: 1fr; } }

/* ---------- closing (ink plate) ---------- */
.closing {
  background: var(--ink);
  color: var(--paper-2);
  padding: clamp(56px, 10vh, 110px) var(--sheet-pad) clamp(48px, 8vh, 90px);
  position: relative;
  overflow: hidden;
}
.closing::before {
  content: ""; position: absolute; inset: 14px;
  border: 1px solid rgba(246, 243, 233, 0.22);
  pointer-events: none;
}
.closing-mark {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.25em;
  color: var(--vermilion-soft); margin-bottom: 30px;
}
.closing h2 {
  font-family: var(--serif); font-weight: 900;
  font-size: clamp(32px, 5.2vw, 58px); line-height: 1.25;
  max-width: 18em;
}
.closing h2 .em { color: var(--vermilion-soft); }
.closing-body { margin-top: 30px; max-width: 62ch; }
.closing-body p { font-size: 15px; line-height: 2; color: color-mix(in srgb, var(--paper-2) 82%, var(--ink)); }
.closing-body p + p { margin-top: 12px; }
.closing-body strong { color: var(--paper-2); }
.closing-final {
  margin-top: 44px;
  font-family: var(--serif); font-weight: 900;
  font-size: clamp(20px, 2.6vw, 28px); line-height: 1.7;
}
.closing-final .em { color: var(--vermilion-soft); }
.closing .seal {
  position: absolute; right: clamp(20px, 6vw, 90px); bottom: clamp(28px, 6vh, 60px);
  width: 96px; height: 96px;
  border: 3px solid var(--vermilion-soft); border-radius: 4px;
  display: grid; place-items: center;
  font-family: var(--serif); font-weight: 900; font-size: 30px; line-height: 1.2;
  color: var(--vermilion-soft);
  transform: rotate(-7deg); opacity: 0.85;
  letter-spacing: 6px; text-indent: 6px;
}

/* ---------- colophon ---------- */
.colophon {
  padding: 28px var(--sheet-pad) 40px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em;
  color: var(--ink-fade);
  display: flex; flex-direction: column; gap: 6px;
}
.colophon .accent { color: var(--vermilion); }
.colophon table { border-collapse: collapse; margin-top: 10px; }
.colophon th, .colophon td {
  border: 1px solid var(--rule); padding: 5px 14px;
  font-weight: 400; text-align: left; letter-spacing: 0.08em;
}
.colophon th { background: var(--paper-2); color: var(--ink-soft); font-size: 8.5px; letter-spacing: 0.22em; }
.colophon tr.cur td { color: var(--ink); border-bottom: 2px solid var(--vermilion); }

/* ---------- reveal motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  .rv { opacity: 0; transform: translateY(16px); }
  .rv.in { opacity: 1; transform: none; transition: opacity var(--dur-3) ease, transform .8s var(--ease-out); }
  .rv.in.d1 { transition-delay: .08s; } .rv.in.d2 { transition-delay: .16s; } .rv.in.d3 { transition-delay: .24s; }
}

/* taste 2026-06: tactile press feedback (§4.5, reduced-motion gated) */
button, summary, [role="button"], .route, .md-tab, .ba-opt, .lff-opt, .vc-opt, .rc-opt,
.rvt-opt, .lnoa-opt, .sc-opt, .lz-sw, .syc-node, .ln-bn-chip, .ln-fs-btn,
.ln-sheet-toggle, .ln-skel, .ln-bar {
  touch-action: manipulation;
  -webkit-tap-highlight-color: color-mix(in srgb, var(--vermilion) 18%, transparent);
}
@media (prefers-reduced-motion: no-preference) {
  :where(button, summary, [role="button"], #bn-sticky, .route, .md-tab, .ba-opt, .lff-opt, .vc-opt, .rc-opt,
  .rvt-opt, .lnoa-opt, .sc-opt, .lz-sw, .syc-node, .ln-bn-chip, .ln-fs-btn,
  .ln-sheet-toggle, .ln-skel, .ln-bar):active {
    transform: translateY(1px) scale(.99);
    filter: saturate(.96);
  }
}

/* ---------- small screens ---------- */
@media (max-width: 640px) {
  .topbar { height: 44px; }
  .topbar .logo { font-size: 9px; letter-spacing: 0.12em; white-space: nowrap; }
  .sheet-ind { display: none; }
  .hero { padding-top: calc(44px + 44px); }
}

/* ---------- print ---------- */
@media print {
  .topbar, .rail, #progress, .bn-toggle, #theme-toggle, #lang-toggle { display: none !important; }
  .article, .hero, .toc, .closing, .colophon { margin-left: 0; }
  .section { break-inside: avoid-page; }
  /* 8.0: force light theme on print - reset dark vars back to daytime values */
  [data-theme="dark"] {
    --paper:#f6f3e9; --paper-2:#f0ebdb; --vellum:#fbf9f1; --paper-deep:#e6dfc9;
    --ink:#1c1c17; --ink-soft:#544e40; --ink-fade:#6f684f;
    --rule:#d8d1bc; --rule-soft:#e8e2cf; --rule-strong:#1c1c17;
    --vermilion:#b53a0c; --vermilion-soft:#e05a1d; --prussian:#33526f; --prussian-soft:#5d7d9c;
    --verified:#1d6b4f; --caution:#a05c0a; --grid:rgba(51,82,111,.055);
  }
  [data-theme="dark"] .diagram, [data-theme="dark"] .map-scroll, [data-theme="dark"] .ct-canvas { box-shadow:none; }
}


/* ---------- 5.0: index map (general arrangement) ---------- */
.toc-map { margin-top: 30px; border-top: 1px solid var(--rule); padding-top: 20px; }
.toc-map-cap {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em;
  color: var(--ink-fade); margin-bottom: 16px;
}
.toc-map .map-scroll { overflow-x: auto; }
.toc-map svg { min-width: 880px; width: 100%; max-width: 1000px; margin: 0 auto; display: block; }
.toc-map a { cursor: pointer; outline: none; }
.toc-map a:hover .nd, .toc-map a:focus-visible .nd { stroke: var(--vermilion); stroke-width: 1.8; }
.toc-map a:focus-visible { outline: 2px solid var(--vermilion); outline-offset: 2px; }

/* ---------- 5.0: fayol five functions ---------- */
.fayol { border: 1px solid var(--rule-strong); background: var(--vellum); margin: clamp(28px, 5vh, 44px) 0; }
.fayol-cap {
  padding: 8px 16px; border-bottom: 1px solid var(--rule);
  background: var(--ink); color: var(--paper);
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em;
  display: flex; justify-content: space-between;
}
.fayol-row { display: grid; grid-template-columns: 132px 1fr 1.45fr 1fr; border-bottom: 1px solid var(--rule-soft); }
.fayol-row:last-child { border-bottom: none; }
.fayol-row > div { padding: 13px 15px; font-size: 13px; line-height: 1.75; border-right: 1px solid var(--rule-soft); }
.fayol-row > div:last-child { border-right: none; }
.fayol-row.fhead > div {
  padding: 8px 15px; font-family: var(--mono); font-size: 9px; letter-spacing: 0.13em;
  color: var(--ink-fade); background: var(--paper-2);
}
.fayol-row .fn { font-family: var(--serif); font-weight: 700; font-size: 16px; line-height: 1.4; }
.fayol-row .fn small {
  display: block; font-family: var(--mono); font-weight: 400; font-size: 8.5px;
  color: var(--ink-fade); letter-spacing: 0.1em; margin-top: 5px;
}
.fayol-row .gone { color: var(--ink-soft); }
.fayol-row .keep { color: var(--ink); }
.fayol-row .keep b { color: var(--vermilion); font-weight: 600; }
@media (max-width: 860px) {
  .fayol-row { grid-template-columns: 1fr; }
  .fayol-row > div { border-right: none; border-bottom: 1px dotted var(--rule-soft); }
  .fayol-row > div:last-child { border-bottom: none; }
}

/* ---------- 5.0: instrument 03 readouts ---------- */
.ct-nums { display: flex; gap: clamp(20px, 3vw, 40px); flex-wrap: wrap; }
.ct-nums .speed { font-size: clamp(30px, 3.8vw, 44px); }
.ct-nums .speed span { color: var(--vermilion); }
.ct-nums .speed.hub span { color: var(--prussian); }
.ct-canvas { margin-top: 14px; border-top: 1px dashed var(--rule); padding-top: 12px; }
.ct-canvas svg { width: 100%; max-width: 900px; margin: 0 auto; display: block; }

/* ---------- 6.0: pillar precision strips ---------- */
.pillar-claim {
  border-left: 3px solid var(--vermilion);
  padding: 4px 0 4px 14px;
  margin: 2px 0 8px;
  font-family: var(--serif); font-weight: 700; font-size: 15px; line-height: 1.75;
  color: var(--ink);
}
.pillar-from {
  font-family: var(--mono); font-weight: 400; font-size: 10px;
  letter-spacing: 0.08em; color: var(--ink-fade); white-space: nowrap;
}
.pillar-not {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.04em;
  color: var(--ink-fade); margin-bottom: 14px; line-height: 1.7;
}
.pillar-not span { color: var(--vermilion); font-weight: 700; margin-right: 7px; font-size: 12px; }

/* ---------- 6.0: lobby story + routes + acts ---------- */
.lobby-story p {
  max-width: 58em; font-size: 15px; line-height: 2.05; color: var(--ink-soft);
  margin-bottom: 26px;
}
.lobby-story b { color: var(--vermilion); font-family: var(--serif); font-weight: 900; }
.routes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 0 0 34px; }
.route {
  text-align: left; font: inherit; color: inherit;
  background: var(--vellum); border: 1px solid var(--rule-strong);
  padding: 14px 16px 12px; cursor: pointer; position: relative;
  transition: background .2s, border-color .2s;
}
.route::before {
  content: ""; position: absolute; top: -1px; left: -1px; right: -1px; height: 3px;
  background: transparent; transition: background .2s;
}
.route:hover { background: var(--paper-2); }
.route[aria-pressed="true"] { border-color: var(--vermilion); }
.route[aria-pressed="true"]::before { background: var(--vermilion); }
.route:focus-visible { outline: 2px solid var(--vermilion); outline-offset: 2px; }
.route-id { display: block; font-family: var(--mono); font-size: 9px; letter-spacing: 0.18em; color: var(--vermilion); }
.route-name { display: block; font-family: var(--serif); font-weight: 900; font-size: 19px; margin: 6px 0 4px; }
.route-path { display: block; font-family: var(--mono); font-size: 10.5px; color: var(--ink-soft); letter-spacing: 0.04em; }
.route-for { display: block; font-size: 11.5px; color: var(--ink-fade); margin-top: 7px; }
.act-head {
  display: flex; align-items: baseline; gap: 12px;
  border-bottom: 1px solid var(--rule-strong); padding-bottom: 6px; margin-bottom: 4px;
}
.act-id { font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; color: var(--vermilion); }
.act-title { font-family: var(--serif); font-weight: 700; font-size: 13.5px; color: var(--ink); }
.toc-acts a { transition: opacity .25s, background .2s; }
.toc[data-route] .toc-acts a { opacity: 0.3; }
.toc[data-route="a"] .toc-acts a[data-r~="a"],
.toc[data-route="b"] .toc-acts a[data-r~="b"],
.toc[data-route="c"] .toc-acts a[data-r~="c"] { opacity: 1; background: var(--paper-2); border-bottom: 1px solid var(--vermilion); }

/* ---------- 6.0: sticky diagnosis counter ---------- */
#bn-sticky {
  position: fixed; right: 18px; bottom: 18px; z-index: 80;
  background: var(--ink); color: var(--paper); border: 1px solid var(--ink);
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em;
  padding: 10px 16px; cursor: pointer;
  box-shadow: 3px 3px 0 rgba(28, 28, 23, 0.18);
}
#bn-sticky b { color: var(--vermilion-soft); font-size: 13px; }
#bn-sticky:focus-visible { outline: 2px solid var(--vermilion); outline-offset: 2px; }
@media (max-width: 700px) { #bn-sticky { right: 10px; bottom: 10px; padding: 8px 12px; } }
@media (max-width: 760px) { .routes { grid-template-columns: 1fr; } }

/* ---------- 6.1: hero difference card ---------- */
.hero-diff > div.hd-head {
  display: flex; justify-content: space-between; align-items: center;
  grid-template-columns: none;
  background: var(--ink); color: var(--paper);
  padding: 9px 12px;
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.14em;
}
.hero-diff .hd-head .vs { color: var(--vermilion-soft); font-size: 14px; font-weight: 700; }
.hero-diff .val .o {
  display: block; color: var(--ink-fade); font-size: 12px;
  text-decoration: line-through;
  text-decoration-color: color-mix(in srgb, var(--ink-fade) 55%, transparent);
}
.hero-diff .val .n { display: block; font-weight: 600; color: var(--ink); }
.hero-diff > div.hd-foot {
  display: block; grid-template-columns: none;
  padding: 9px 12px;
  font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.08em; color: var(--ink-fade);
}
.hero-diff .hd-foot a { color: color-mix(in srgb, var(--prussian) 82%, var(--ink)); text-decoration: none; border-bottom: 1px solid var(--rule); }

/* ---------- 6.1: problem chain ---------- */
.chain {
  display: grid; grid-template-columns: 1fr 30px 1fr 30px 1fr;
  align-items: stretch; margin: 0 0 32px;
}
.chain-step { border: 1px solid var(--rule-strong); background: var(--vellum); padding: 16px 18px 14px; }
.chain-step .ck { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.16em; color: var(--vermilion); margin-bottom: 9px; }
.chain-step p { font-size: 13.5px; line-height: 1.85; color: var(--ink-soft); }
.chain-step p strong { color: var(--ink); }
.chain-step .cs-link {
  display: inline-block; margin-top: 10px;
  font-family: var(--mono); font-size: 9.5px; color: var(--prussian);
  text-decoration: none; border-bottom: 1px solid var(--rule);
}
.chain-step .cs-link:hover { border-bottom-color: var(--vermilion); color: var(--vermilion); }
.chain-arrow { display: grid; place-items: center; font-size: 17px; color: var(--ink-fade); }
@media (max-width: 860px) {
  .chain { grid-template-columns: 1fr; gap: 2px; }
  .chain-arrow { transform: rotate(90deg); padding: 4px 0; }
}

/* ---------- 6.1: usage line + legend + collapsible toc ---------- */
.routes { margin-bottom: 14px; }
.usage-line { margin: 0 0 36px; font-size: 12.5px; line-height: 2; color: var(--ink-soft); }
.usage-line .u { font-family: var(--mono); font-size: 9px; letter-spacing: 0.2em; color: var(--vermilion); margin-right: 10px; }
.usage-line a { color: var(--prussian); text-decoration: none; border-bottom: 1px solid var(--rule); }
.usage-line a:hover { color: var(--vermilion); border-bottom-color: var(--vermilion); }
.type-legend {
  margin: 30px 0 16px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.04em;
  color: var(--ink-fade); line-height: 2;
}
.type-legend b { font-weight: 600; }
.type-legend .lv { color: var(--vermilion); }
.type-legend .le { color: var(--verified); }
.type-legend .lf { color: var(--caution); }
.toc-full summary {
  cursor: pointer; list-style: none;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.18em; color: var(--ink-soft);
  padding: 12px 0; border-top: 1px solid var(--rule-strong); border-bottom: 1px solid var(--rule);
}
.toc-full summary::-webkit-details-marker { display: none; }
.toc-full summary::before { content: "▸ "; color: var(--vermilion); }
.toc-full[open] summary::before { content: "▾ "; }
.toc-full .toc-acts { margin-top: 20px; }

/* ---------- 6.1: sheet type tags + epistemic notes ---------- */
.sec-type {
  display: inline-block; margin-top: 10px; padding: 3px 8px;
  border: 1px solid var(--rule-strong);
  font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.12em;
  color: var(--ink-soft);
}
.sec-type.st-claim { border-color: var(--vermilion); color: var(--vermilion); }
.sec-type.st-ev { border-color: var(--verified); color: var(--verified); }
.sec-type.st-fc { border-color: var(--caution); color: var(--caution); }
.ev-note {
  margin: 0 0 28px; padding: 13px 16px;
  border: 1px dashed var(--rule-strong); border-left: 3px solid var(--verified);
  background: var(--vellum);
  font-size: 12.5px; line-height: 1.9; color: var(--ink-soft);
}
.ev-note b {
  display: inline-block; margin-right: 10px;
  font-family: var(--mono); font-weight: 600; font-size: 9.5px; letter-spacing: 0.14em;
  color: var(--verified);
}
.ev-note.fc { border-left-color: var(--caution); }
.ev-note.fc b { color: var(--caution); }

/* ---------- 6.1: key figure mark ---------- */
.diagram-meta .fkey {
  color: var(--vermilion); border: 1px solid var(--vermilion);
  padding: 1px 7px; margin-right: 9px;
  font-weight: 600; letter-spacing: 0.1em;
}

/* ---------- 6.2: inline citation marks ---------- */
a.cite {
  font-family: var(--mono); font-size: 0.62em;
  vertical-align: super; text-decoration: none;
  color: var(--vermilion); letter-spacing: 0.04em; white-space: nowrap;
}
a.cite:hover, a.cite:focus-visible { text-decoration: underline; }
.refs-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.refs-scroll table { min-width: 680px; }

/* ---------- 7.0: dimension lens bench (INSTRUMENT 04) ---------- */
.lz { border: 1px solid var(--rule); background: var(--paper-2, #f4f1ea);
  padding: 22px clamp(14px, 3vw, 30px); margin: 30px 0; }
.lz-head { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em;
  color: var(--vermilion); margin-bottom: 14px; }
.lz-switches { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.lz-sw { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em;
  border: 1px solid var(--rule); color: var(--ink-soft);
  padding: 4px 11px; cursor: pointer; background: transparent;
  transition: border-color .15s, color .15s, background .15s; }
.lz-sw[aria-pressed="true"] { border-color: var(--vermilion); color: var(--vermilion);
  background: color-mix(in srgb, var(--vermilion) 8%, transparent); }
.lz-sw:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lz-matrix-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.lz-matrix { border-collapse: collapse; font-family: var(--mono); font-size: 11px;
  min-width: 540px; width: 100%; }
.lz-matrix th { font-weight: 600; color: var(--ink-soft); text-align: center;
  padding: 6px 4px; letter-spacing: 0.04em; }
.lz-matrix th.lz-rowh { text-align: left; white-space: nowrap; padding-right: 12px; }
.lz-matrix td { text-align: center; padding: 5px 4px; border-top: 1px solid var(--rule-soft, #e4ded0); }
.lz-cell { display: inline-block; width: 13px; height: 13px; line-height: 13px;
  color: var(--rule); }
.lz-cell.lz-hot { color: var(--ink); }            /* 受灾格 */
.lz-cell.lz-blind { color: var(--accent); }       /* 盲区（新瓶颈受灾） */
.lz-matrix tr.lz-new th.lz-rowh { color: var(--vermilion); }
.lz-matrix col.lz-on, .lz-matrix td.lz-on { background: color-mix(in srgb, var(--vermilion) 7%, transparent); }
.lz-matrix tr.lz-dimmed { opacity: 0.32; }
.lz-read { font-family: var(--mono); font-size: 12px; color: var(--ink-soft);
  margin-top: 14px; min-height: 1.6em; line-height: 1.7; }
.lz-read b { color: var(--vermilion); }
.lz-judge { margin-top: 8px; font-size: 13px; color: var(--ink); line-height: 1.8;
  border-left: 2px solid var(--vermilion); padding-left: 12px; display: none; }
.lz-judge.show { display: block; }

/* ---------- 7.0: company-history panel ---------- */
.coh { border: 1px solid var(--rule); background: transparent;
  padding: 20px clamp(14px, 3vw, 26px); margin: 26px 0; }
.coh-key { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.16em;
  color: var(--vermilion); margin-bottom: 12px; }
.coh-time { display: flex; flex-wrap: wrap; gap: 0; margin: 14px 0; border-top: 1px solid var(--rule); }
.coh-era { flex: 1 1 150px; padding: 12px 14px 12px 0; border-right: 1px solid var(--rule-soft, #e4ded0); }
.coh-era:last-child { border-right: none; }
.coh-yr { font-family: var(--mono); font-size: 17px; color: var(--ink); }
.coh-lbl { font-size: 12px; color: var(--ink-soft); margin-top: 4px; line-height: 1.5; }
@media (prefers-reduced-motion: reduce) { .lz-sw, .lz-cell { transition: none; } }
/* ---------- 7.2: tech convergence ---------- */
.tc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin: 24px 0; }
.tc-curve { border: 1px solid var(--rule); padding: 16px 18px; background: var(--paper-2, #f4f1ea); }
.tc-name { font-family: var(--serif); font-weight: 700; font-size: 15px; color: var(--ink); margin-bottom: 4px; }
.tc-en { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; color: var(--ink-fade); }
.tc-row { display: flex; gap: 8px; margin-top: 10px; font-size: 12.5px; line-height: 1.6; }
.tc-key { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.08em; color: var(--vermilion); min-width: 4.4em; flex-shrink: 0; padding-top: 2px; }
.tc-trl { display: inline-block; font-family: var(--mono); font-size: 10px; border: 1px solid var(--rule); padding: 1px 7px; color: var(--ink-soft); }
@media (max-width: 760px) { .tc-grid { grid-template-columns: 1fr; } }

/* ---------- 7.2: INSTRUMENT 05 scenario bench ---------- */
.sc { border: 1px solid var(--rule); background: var(--paper-2, #f4f1ea); padding: 22px clamp(14px,3vw,30px); margin: 30px 0; }
.sc-head { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; color: var(--vermilion); margin-bottom: 14px; }
.sc-axes { display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: 16px; }
.sc-axis { font-family: var(--mono); font-size: 11px; }
.sc-axis-label { color: var(--ink-fade); letter-spacing: 0.08em; margin-bottom: 5px; }
.sc-toggle { display: inline-flex; border: 1px solid var(--rule); }
.sc-opt { padding: 4px 11px; cursor: pointer; background: transparent; border: none; font-family: var(--mono); font-size: 11px; color: var(--ink-soft); border-right: 1px solid var(--rule); }
.sc-opt:last-child { border-right: none; }
.sc-opt[aria-pressed="true"] { background: color-mix(in srgb, var(--vermilion) 12%, transparent); color: var(--vermilion); font-weight: 600; }
.sc-opt:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.sc-quad { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; margin: 14px 0; }
.sc-cell { border: 1px solid var(--rule-soft, #e4ded0); padding: 12px 14px; min-height: 78px; transition: background .15s, border-color .15s; }
.sc-cell.sc-on { border-color: var(--vermilion); background: color-mix(in srgb, var(--vermilion) 7%, transparent); }
.sc-cell.sc-dim { opacity: 0.4; }
.sc-cell-name { font-family: var(--serif); font-weight: 700; font-size: 14px; color: var(--ink); }
.sc-cell-axis { font-family: var(--mono); font-size: 9px; color: var(--ink-fade); letter-spacing: 0.06em; margin-top: 2px; }
.sc-read { font-family: var(--mono); font-size: 12px; color: var(--ink-soft); line-height: 1.8; margin-top: 12px; min-height: 3em; border-left: 2px solid var(--vermilion); padding-left: 12px; }
.sc-read b { color: var(--vermilion); }

/* ---------- 7.2: future artifacts (design fiction) ---------- */
.fa { position: relative; border: 1px dashed var(--rule-strong, #b8b09a); background: transparent; padding: 22px clamp(16px,3vw,28px); margin: 26px 0; }
.fa-seal { position: absolute; top: 10px; right: 12px; font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.12em; color: var(--vermilion); border: 1px solid var(--vermilion); padding: 2px 7px; transform: rotate(4deg); opacity: 0.8; }
.fa-kind { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; color: var(--ink-fade); margin-bottom: 8px; }
.fa-title { font-family: var(--serif); font-weight: 700; font-size: 16px; color: var(--ink); margin-bottom: 10px; }
.fa-body { font-size: 13.5px; line-height: 1.85; color: var(--ink-soft); }
.fa-body dt { font-family: var(--mono); font-size: 11px; color: var(--ink); margin-top: 8px; }
.fa-body dd { margin: 2px 0 0 0; }
@media (prefers-reduced-motion: reduce) { .sc-opt, .sc-cell { transition: none; } }
/* ---------- 8.0: theme toggle button ---------- */
#theme-toggle { margin-left: 14px; background: transparent; border: 1px solid var(--rule);
  color: var(--ink-soft); font-size: 13px; line-height: 1; padding: 5px 8px; cursor: pointer;
  border-radius: 3px; transition: border-color .15s, color .15s; }
#theme-toggle:hover { border-color: var(--vermilion); color: var(--vermilion); }
#theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#theme-toggle .tt-moon { display: none; }
[data-theme="dark"] #theme-toggle .tt-sun { display: none; }
[data-theme="dark"] #theme-toggle .tt-moon { display: inline; }
@media (prefers-reduced-motion: reduce) { #theme-toggle { transition: none; } }
/* ---------- W1: bilingual language toggle ---------- */
[data-lang="zh"] [lang="en"] { display: none !important; }
[data-lang="en"] [lang="zh"] { display: none !important; }
/* English typographic overrides - reuse existing --serif Latin glyphs, no new webfont */
[data-lang="en"] p,
[data-lang="en"] li,
[data-lang="en"] .section-lede,
[data-lang="en"] .hero-sub { text-align: left; -webkit-hyphens: auto; hyphens: auto; letter-spacing: 0; }
#lang-toggle { margin-left: 14px; background: transparent; border: 1px solid var(--rule);
  color: var(--ink-soft); font-size: 12px; line-height: 1; padding: 5px 8px; cursor: pointer;
  border-radius: 3px; font-family: var(--mono); letter-spacing: .04em;
  transition: border-color .15s, color .15s; }
#lang-toggle:hover { border-color: var(--vermilion); color: var(--vermilion); }
#lang-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#lang-toggle .lt-to-zh { display: none; }
[data-lang="en"] #lang-toggle .lt-to-en { display: none; }
[data-lang="en"] #lang-toggle .lt-to-zh { display: inline; }
@media (prefers-reduced-motion: reduce) { #lang-toggle { transition: none; } }
/* ---------- 8.0: dark blueprint palette ---------- */
[data-theme="dark"] {
  --paper: #0e2235;
  --paper-2: #14304a;
  --vellum: #173a58;
  --paper-deep: #0a1a2a;
  --ink: #dce8f2;
  --ink-soft: #a8c0d6;
  --ink-fade: #93acc4;
  --rule: #2f4a63;
  --rule-soft: #21405c;
  --rule-strong: #cfe0f0;
  --vermilion: #ff8a4c;
  --vermilion-soft: #ffa066;
  --prussian: #6f9bc4;
  --prussian-soft: #87a8c8;
  --verified: #4fae86;
  --caution: #d6913f;
  --grid: rgba(140, 180, 220, 0.07);
}
/* soft cross-fade on theme switch (reduced-motion safe) */
body, .section, .topbar, .rail, .hero, .toc, .colophon { transition: background-color .25s ease, color .25s ease, border-color .25s ease; }
@media (prefers-reduced-motion: reduce) { body, .section, .topbar, .rail, .hero, .toc, .colophon { transition: none; } }
/* ---------- 8.0: figures stay light in dark (blueprints on dark wall) ---------- */
[data-theme="dark"] .diagram,
[data-theme="dark"] .map-scroll,
[data-theme="dark"] .ct-canvas {
  background: #f4f1ea;
  border-radius: 3px;
  padding: 10px;
  box-shadow: 0 0 0 1px #cfc7b0, 0 6px 20px rgba(0,0,0,0.35);
}
/* figure caption/meta around the panel stays in dark-theme text (uses vars) - no override needed */
/* ---------- 9.0: toolkit ---------- */
.tk-pre { font-family: var(--mono); font-size: 12px; line-height: 1.6;
  background: var(--paper-deep); border: 1px solid var(--rule); border-left: 2px solid var(--vermilion);
  color: var(--ink); padding: 14px 16px; margin: 16px 0; overflow-x: auto; -webkit-overflow-scrolling: touch;
  white-space: pre; tab-size: 2; }
.tk-pre .c { color: var(--ink-soft); }            /* 注释 */
.tk-pre .k { color: color-mix(in srgb, var(--vermilion) 82%, var(--ink)); }            /* 关键字/类型 */
.tk-kit { margin: 26px 0; }
.tk-node { display: inline-block; font-family: var(--mono); font-size: 11px; letter-spacing: .04em;
  border: 1px solid var(--rule); padding: 2px 9px; margin: 3px 4px 3px 0; }
.tk-node.agent { border-color: var(--prussian); color: var(--prussian); }
.tk-node.human { border-color: var(--vermilion); color: var(--vermilion); }
.tk-node.policy { border-color: var(--caution); color: var(--caution); }
.tk-dl { font-family: var(--serif); }
.tk-dl a, .tk-link { font-family: var(--mono); font-size: 12px; color: var(--vermilion); text-decoration: none; }
.tk-link:hover { text-decoration: underline; }


/* owl-concept-illustrations plates */.concept-figure {
  margin: 0;
  border: 1px solid var(--rule);
  background: var(--paper);
  overflow: hidden;
}
.concept-figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background: white;
}
.concept-figure figcaption {
  min-height: 86px;
  padding: 11px 13px 13px;
  border-top: 1px dashed var(--rule);
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 1.65;
  background: var(--vellum);
}
.concept-figure .cap-k {
  display: block;
  margin-bottom: 5px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  color: var(--accent);
}
@media (max-width: 760px) {
  .concept-grid { grid-template-columns: 1fr; }
  .concept-figure figcaption { min-height: 0; }
}


/* DS-UNIFY · typographic grading */
h1,h2,h3,h4{text-wrap:balance;}
p,li,dd,figcaption,blockquote{text-wrap:pretty;}
table,time,.stats,[class~="num"],[class*="-num"],[class*="-nums"]{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;}

/* DS-UNIFY v2 · interaction states */
#lang-toggle,#theme-toggle{transition:background var(--dur-1) var(--ease-out),border-color var(--dur-1) var(--ease-out),transform var(--dur-1) var(--ease-out);}
#lang-toggle:hover,#theme-toggle:hover{background:var(--paper-2);border-color:var(--ink-soft);}
#lang-toggle:active,#theme-toggle:active{transform:translateY(1px);}
.rail a:active,.topbar-nav a:active{transform:translateY(1px);}
@media (prefers-reduced-motion:reduce){#lang-toggle:active,#theme-toggle:active,.rail a:active,.topbar-nav a:active{transform:none;}}

/* DS-UNIFY v3 · elevation wiring */
.model{transition:transform var(--dur-2) var(--ease-out),box-shadow var(--dur-2) var(--ease-out),border-color var(--dur-2) var(--ease-out);}
.model:hover{box-shadow:var(--elev-2);}
.signal{transition:box-shadow var(--dur-2) var(--ease-out);}
.signal:hover{box-shadow:var(--elev-2);}
@media (prefers-reduced-motion:reduce){.model{transition:border-color var(--dur-1) var(--ease-out);}.signal{transition:none;}}

/* DS-UNIFY v3 · link polish */
a{text-underline-offset:.15em;}