privateboard 0.1.13 → 0.1.16

package/public/report.html

@@ -277,12 +277,6 @@
       background: transparent !important;
       border-top-color: #1A1814 !important;
     }
-    /* Dark spine's mermaid frame — give it a paper bg in print. */
-    body[data-spine="boardroom-dark"] .body pre.mermaid {
-      background: #FFFFFF !important;
-      border-color: #DDD5C8 !important;
-    }
-
     /* CJK dispatch handles (cjk-sans / cjk-serif / cjk-mono) are
        declared OUTSIDE this @media block — see the @font-face
        trio at the top of <style>. Per-element font-family rules
@@ -353,7 +347,7 @@
     .body section.section-considerations li.rec-item,
     .body section.section-the-bet > ol > li,
     .body section.section-new-questions li.nq-item,
-    .body pre.mermaid,
+    .body figure.kami-chart,
     .body table.md-table,
     /* Tier A additions · the units that were still getting sliced
        between pages despite the legacy ruleset. Each one is a small
@@ -406,7 +400,7 @@
     .body section > h2 + ul,
     .body section > h2 + .pillars-grid,
     .body section > h2 + h3,
-    .body section > h2 + pre.mermaid,
+    .body section > h2 + figure.kami-chart,
     .body section > h3 + p,
     .body section > h3 + blockquote,
     .body section > h3 + table.md-table,
@@ -526,10 +520,10 @@
       break-inside: avoid;
       page-break-inside: avoid;
     }
-    /* Mermaid charts shouldn't reserve big empty boxes when the SVG
-       is small. */
-    .body pre.mermaid { min-height: auto !important; padding: 14px !important; }
-    .body pre.mermaid svg { max-width: 100% !important; height: auto !important; }
+    /* Kami chart figures shouldn't reserve big empty boxes when the
+       inline SVG is small. */
+    .body figure.kami-chart { padding: 14px !important; }
+    .body figure.kami-chart svg.kc-svg { max-width: 100% !important; height: auto !important; }
   }
 
   /* ─── Author byline · name list (spine-agnostic) ───────────────
@@ -598,185 +592,6 @@
     border-top: none;
   }
 
-  /* ─── Mermaid + adjacent table = doubled hairline ───────────────
-     Every spine's `pre.mermaid` carries a 1px `border-bottom` (the
-     mermaid frame's closing rule). A pipe-table directly underneath
-     carries its own 1.5–2px `border-top`. With only a paragraph
-     break between, the two parallel rules read as a doubled frame.
-     Drop the table's top border in that exact arrangement — the
-     mermaid's bottom rule already separates the diagram from the
-     table cleanly. Same reasoning works for the reverse order: a
-     mermaid right after a table inherits the table's last-row
-     border-bottom, so suppress the mermaid's top rule there too. */
-  .body pre.mermaid + table.md-table {
-    border-top: none;
-  }
-  .body table.md-table + pre.mermaid {
-    border-top-width: 0;
-  }
-
-  /* ─── Hide mermaid's internal render scratchpad ──────────────
-     During `mermaid.render(id, src)`, mermaid 10 briefly appends a
-     `<div id="dmermaid-...">` to document.body to measure layout +
-     produce the SVG. The div is removed once render() resolves,
-     but in the meantime it can flash visibly. Force it offscreen
-     so the user never sees mermaid's pre-takeover render at all.
-     The element still has natural dimensions for mermaid's layout
-     measurement — only its position + visibility is constrained. */
-  body > [id^="dmermaid-"] {
-    position: absolute !important;
-    left: -99999px !important;
-    top: 0 !important;
-    visibility: hidden !important;
-    pointer-events: none !important;
-  }
-
-  /* ─── Hide mermaid SVG until spine palette is applied ─────────
-     Pattern from user reports: "first time wrong, refresh OK" /
-     strict alternation (1st wrong, 2nd right, 3rd wrong, 4th
-     right). Cause: even with our continuous post-render takeover
-     (see report.html post-mermaid.run block), mermaid paints at
-     least once with its default palette BEFORE our takeover lands
-     — and the user sees that first paint. The takeover then
-     corrects it, but the user's already perceived "wrong colors."
-     On refresh, cached rendering may finish faster and the first
-     paint happens AFTER our takeover, which they perceive as
-     correct.
-     Defense: hide the SVG inside each pre.mermaid until we add
-     the `is-painted` class. The post-render takeover adds the
-     class as its last step. Until then, the user sees the frame
-     (matching the spine) with no SVG inside — no off-brand
-     colors flash at any point. */
-  .body pre.mermaid svg {
-    visibility: hidden;
-  }
-  .body pre.mermaid.is-painted svg {
-    visibility: visible;
-  }
-
-  /* ─── CSS-variable mermaid palette · timing-race-immune ──────
-     Final defense layer for the recurring "first time wrong,
-     refresh OK" bug. JS takeover fights timing with mermaid's
-     deferred render work; CSS doesn't have that problem — as
-     soon as the SVG is in the DOM, these rules apply. The
-     spine-specific colours are injected as CSS variables on
-     `:root` from JS in the swapSpine flow (see swapSpine /
-     mermaid.initialize block). Variables update when the spine
-     changes; CSS rules are static.
-
-     Specificity: each rule uses a 3-class+ chain plus
-     !important, beating mermaid's `.quadrant-fill { fill: ... }`
-     and any `fill="..."` presentation attribute. The element
-     selectors target every mermaid 10 chart-type's known
-     visual elements. */
-
-  /* Quadrant chart · 4 quadrant rects + data points */
-  .body pre.mermaid svg .quadrants .quadrant rect,
-  .body pre.mermaid svg g.quadrant > rect,
-  .body pre.mermaid svg [aria-roledescription="quadrantChart"] g.quadrant rect {
-    fill: var(--mm-q-fill, #1A1A18) !important;
-  }
-  .body pre.mermaid svg .data-points circle,
-  .body pre.mermaid svg circle.data-point,
-  .body pre.mermaid svg [aria-roledescription="quadrantChart"] .data-points circle {
-    fill: var(--mm-q-point, #C9A46B) !important;
-    stroke: var(--mm-q-bg, #1A1A18) !important;
-  }
-  .body pre.mermaid svg .quadrants line,
-  .body pre.mermaid svg .axis-line,
-  .body pre.mermaid svg .axisl-line,
-  .body pre.mermaid svg g.border line,
-  .body pre.mermaid svg [aria-roledescription="quadrantChart"] line,
-  .body pre.mermaid svg [aria-roledescription="quadrantChart"] g.border line {
-    stroke: var(--mm-q-border, #3A3934) !important;
-  }
-  .body pre.mermaid svg [aria-roledescription="quadrantChart"] text {
-    fill: var(--mm-q-text, #C8C5BE) !important;
-  }
-  .body pre.mermaid svg [aria-roledescription="quadrantChart"] .bottom-axis text,
-  .body pre.mermaid svg [aria-roledescription="quadrantChart"] .left-axis text,
-  .body pre.mermaid svg [aria-roledescription="quadrantChart"] .top-axis text,
-  .body pre.mermaid svg [aria-roledescription="quadrantChart"] .right-axis text {
-    fill: var(--mm-q-axis-text, #5C5A4D) !important;
-  }
-  .body pre.mermaid svg [aria-roledescription="quadrantChart"] .quadrant text {
-    fill: var(--mm-q-quad-text, #8E8B83) !important;
-  }
-
-  /* xychart-beta · bars cycle through palette via :nth-child */
-  .body pre.mermaid svg [aria-roledescription="xychart"] g[class*="bar-plot"] rect,
-  .body pre.mermaid svg [aria-roledescription="xychart"] g.plot rect {
-    fill: var(--mm-pal-0, #C9A46B) !important;
-    stroke: none !important;
-  }
-  .body pre.mermaid svg [aria-roledescription="xychart"] g[class*="bar-plot"] rect:nth-child(2),
-  .body pre.mermaid svg [aria-roledescription="xychart"] g.plot rect:nth-child(2) {
-    fill: var(--mm-pal-1, #B6B0A2) !important;
-  }
-  .body pre.mermaid svg [aria-roledescription="xychart"] g[class*="bar-plot"] rect:nth-child(3),
-  .body pre.mermaid svg [aria-roledescription="xychart"] g.plot rect:nth-child(3) {
-    fill: var(--mm-pal-2, #8E8B83) !important;
-  }
-  .body pre.mermaid svg [aria-roledescription="xychart"] g[class*="bar-plot"] rect:nth-child(n+4),
-  .body pre.mermaid svg [aria-roledescription="xychart"] g.plot rect:nth-child(n+4) {
-    fill: var(--mm-pal-3, #5C5A52) !important;
-  }
-  .body pre.mermaid svg [aria-roledescription="xychart"] text {
-    fill: var(--mm-axis-text, #5C5A4D) !important;
-  }
-  .body pre.mermaid svg [aria-roledescription="xychart"] .background,
-  .body pre.mermaid svg [aria-roledescription="xychart"] rect.background {
-    fill: transparent !important;
-  }
-
-  /* Pie · slice palette */
-  .body pre.mermaid svg path.pieCircle:nth-of-type(1) { fill: var(--mm-pal-0, #C9A46B) !important; stroke: var(--mm-q-bg, #1A1A18) !important; }
-  .body pre.mermaid svg path.pieCircle:nth-of-type(2) { fill: var(--mm-pal-1, #B6B0A2) !important; }
-  .body pre.mermaid svg path.pieCircle:nth-of-type(3) { fill: var(--mm-pal-2, #8E8B83) !important; }
-  .body pre.mermaid svg path.pieCircle:nth-of-type(n+4) { fill: var(--mm-pal-3, #5C5A52) !important; }
-  .body pre.mermaid svg circle.pieOuterCircle {
-    stroke: var(--mm-q-border, #3A3934) !important;
-    fill: none !important;
-  }
-
-  /* Universal text safety net inside any mermaid SVG · titleFill
-     for anything that escaped the per-type rules above. Lower
-     specificity than the type-specific rules so they still win. */
-  .body pre.mermaid svg text {
-    fill: var(--mm-text, #C8C5BE);  /* no !important · type-specific rules above WIN */
-  }
-
-  /* ─── Chart display sizes · CSS-enforced ─────────────────────
-     Mermaid 10.9.5's chartWidth/chartHeight config keys for
-     quadrantChart and xychart are silently ignored by the
-     bundled CDN build (verified via DOM dump showing default
-     500×500 viewBox even when chartWidth: 460 is configured).
-     CSS-enforced sizes via `max-width` on the rendered SVG let
-     us get refined-compact dimensions regardless of what
-     mermaid's config validator does. The viewBox stays at
-     mermaid's internal coordinate space (500×500 etc.) but the
-     displayed SVG scales down to our target size. Centered with
-     margin: 0 auto so the chart sits flush in the article column
-     instead of stretching to full width. */
-  .body pre.mermaid svg[aria-roledescription="quadrantChart"] {
-    max-width: 460px !important;
-    height: auto !important;
-    margin: 0 auto !important;
-    display: block !important;
-  }
-  .body pre.mermaid svg[aria-roledescription="xychart"] {
-    max-width: 560px !important;
-    height: auto !important;
-    margin: 0 auto !important;
-    display: block !important;
-  }
-  .body pre.mermaid svg[aria-roledescription="pie"] {
-    max-width: 420px !important;
-    height: auto !important;
-    margin: 0 auto !important;
-    display: block !important;
-  }
-
   /* ─── Metric-strip · spine-agnostic baseline ─────────────────────
      Editorial / Swiss register: oversized thin numerals top-left, mute
      mono label bottom-left, hairline grid (no card backgrounds, no
@@ -1131,6 +946,487 @@
     color: var(--red, #B5706A);
   }
 
+  /* ─── Kami-chart · spine-agnostic inline-SVG charts ──────────────
+     Replaces mermaid as the report's chart-rendering pipeline. Each
+     chart is emitted by the writer as a fenced ```kami-chart block
+     containing strict JSON; renderKamiChart() in JS turns it into
+     inline SVG. Styling is driven entirely by spine CSS variables
+     so each spine paints the chart in its own palette — no JS
+     palette takeover, no race conditions, no scratchpad div. */
+  .body .kami-chart {
+    margin: 28px 0 32px;
+    padding: 32px 36px 28px;
+    background: var(--paper-soft, #ECE6DA);
+    border: 1px solid var(--rule, rgba(0,0,0,0.14));
+  }
+  .body .kami-chart .kc-figheader {
+    display: flex; justify-content: space-between; align-items: baseline;
+    padding-bottom: 12px;
+    margin-bottom: 18px;
+    border-bottom: 1px solid var(--rule, rgba(0,0,0,0.14));
+  }
+  .body .kami-chart .kc-fignum {
+    font-family: var(--mono);
+    font-size: 11px;
+    text-transform: uppercase;
+    letter-spacing: 0.18em;
+    color: var(--accent, var(--em, #6B6660));
+    font-weight: 600;
+  }
+  .body .kami-chart .kc-figtitle {
+    font-family: var(--mono);
+    font-size: 11px;
+    text-transform: uppercase;
+    letter-spacing: 0.18em;
+    color: var(--ink-mid, #6A655D);
+  }
+  .body .kami-chart svg.kc-svg {
+    display: block;
+    width: 100%;
+    height: auto;
+    overflow: visible;
+  }
+
+  /* Canvas + grid + axis */
+  .body .kami-chart .kc-canvas   { fill: var(--paper-soft, #ECE6DA); }
+  .body .kami-chart .kc-grid     { stroke: var(--rule-soft, rgba(0,0,0,0.08)); stroke-width: 0.8; }
+  .body .kami-chart .kc-baseline { stroke: var(--ink, #2A2724); stroke-width: 0.8; }
+  .body .kami-chart .kc-y-tick {
+    fill: var(--ink-soft, #978C7E);
+    font: 10px var(--sans);
+  }
+  .body .kami-chart .kc-y-unit {
+    fill: var(--ink-soft, #978C7E);
+    font: 9px var(--mono);
+    letter-spacing: 0.12em;
+    text-transform: uppercase;
+  }
+
+  /* Bar series · spine accent for primary; neutrals for secondary/tertiary.
+     Single-focal rule from kami's design guide: at most one series carries
+     the accent. Multi-series charts use accent + ink-mid (+ ink-soft). */
+  .body .kami-chart .kc-bar.kc-series-primary   { fill: var(--accent, var(--em, #6B6660)); }
+  .body .kami-chart .kc-bar.kc-series-secondary { fill: var(--ink-mid, #6A655D); }
+  .body .kami-chart .kc-bar.kc-series-tertiary  { fill: var(--ink-soft, #978C7E); }
+
+  .body .kami-chart .kc-data-label {
+    fill: var(--ink, #2A2724);
+    font: 10px var(--sans);
+  }
+  .body .kami-chart .kc-data-label.kc-primary { font-weight: 600; }
+  .body .kami-chart .kc-category-label {
+    fill: var(--ink, #2A2724);
+    font: 11px var(--sans);
+  }
+
+  /* Legend */
+  .body .kami-chart .kc-legend-divider { stroke: var(--rule, rgba(0,0,0,0.14)); stroke-width: 0.8; }
+  .body .kami-chart .kc-legend-swatch.kc-series-primary   { fill: var(--accent, var(--em, #6B6660)); }
+  .body .kami-chart .kc-legend-swatch.kc-series-secondary { fill: var(--ink-mid, #6A655D); }
+  .body .kami-chart .kc-legend-swatch.kc-series-tertiary  { fill: var(--ink-soft, #978C7E); }
+  .body .kami-chart .kc-legend-text {
+    fill: var(--ink-mid, #6A655D);
+    font: 10px var(--sans);
+  }
+
+  /* Caption · editorial gloss below the chart. Serif italic <em> in accent. */
+  .body .kami-chart .kc-caption {
+    font-family: var(--serif);
+    font-size: 14px;
+    color: var(--ink-mid, #6A655D);
+    line-height: 1.7;
+    margin-top: 18px;
+    padding-top: 14px;
+    border-top: 1px solid var(--rule, rgba(0,0,0,0.14));
+    max-width: 60ch;
+  }
+  .body .kami-chart .kc-caption em {
+    color: var(--accent, var(--em, #B65A3A));
+    font-style: italic;
+  }
+
+  /* Error fallback · mirrors the metric-strip-error register so a
+     malformed chart degrades visibly without blowing up the report. */
+  .body .kami-chart-error {
+    margin: 28px 0;
+    padding: 16px 18px;
+    background: var(--paper-soft, #ECE6DA);
+    border: 1px dashed var(--rule, rgba(0,0,0,0.14));
+    font-family: var(--mono);
+    font-size: 11px;
+    color: var(--ink-soft, #978C7E);
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+  }
+  .body .kami-chart-error::before {
+    content: "// kami-chart · malformed";
+    display: block;
+    margin-bottom: 6px;
+    color: var(--red, #B5706A);
+  }
+
+  /* ─── Kami-chart · quadrant ──────────────────────────────────────
+     2-axis plot · plot area framed; preferred (top-right) quadrant
+     gets a subtle accent-tinted fill; crosshair at the midpoint;
+     axis-end arrows; quadrant labels in the four corners. */
+  .body .kami-chart .kc-q-frame  { fill: none; stroke: var(--rule, rgba(0,0,0,0.14)); stroke-width: 0.8; }
+  .body .kami-chart .kc-q-axis   { stroke: var(--rule-soft, rgba(0,0,0,0.08)); stroke-width: 0.8; }
+  .body .kami-chart .kc-q-tint   { fill: var(--paper-deep, rgba(0,0,0,0.03)); }
+  .body .kami-chart .kc-q-arrow  { stroke: var(--ink-mid, #6A655D); stroke-width: 1.2; fill: none; }
+  .body .kami-chart .kc-q-axis-label {
+    fill: var(--ink, #2A2724); font: 11px var(--sans);
+    letter-spacing: 0.08em;
+  }
+  .body .kami-chart .kc-q-quad-kicker {
+    fill: var(--ink-soft, #978C7E);
+    font: 9px var(--mono);
+    text-transform: uppercase;
+    letter-spacing: 0.22em;
+  }
+  .body .kami-chart .kc-q-quad-kicker.kc-q-pref { fill: var(--accent, #6B6660); }
+  .body .kami-chart .kc-q-quad-name {
+    fill: var(--ink-mid, #6A655D); font: 10px var(--sans);
+  }
+  .body .kami-chart .kc-q-quad-name.kc-q-pref { fill: var(--accent, #6B6660); font-weight: 500; }
+  .body .kami-chart .kc-point        { fill: var(--paper-soft, #ECE6DA); stroke: var(--ink, #2A2724); stroke-width: 1; }
+  .body .kami-chart .kc-point-focal  { fill: var(--accent, #6B6660); stroke: var(--accent, #6B6660); stroke-width: 1; }
+  .body .kami-chart .kc-point-tinted { fill: var(--paper-deep, rgba(0,0,0,0.03)); stroke: var(--accent, #6B6660); stroke-width: 1; }
+  .body .kami-chart .kc-point-faint  { fill: var(--paper-deep, rgba(0,0,0,0.03)); stroke: var(--ink-muted, #B5AB9B); stroke-width: 1; }
+  .body .kami-chart .kc-point-label {
+    fill: var(--ink, #2A2724); font: 10px var(--sans);
+  }
+  .body .kami-chart .kc-point-label.kc-primary { fill: var(--accent, #6B6660); font-weight: 500; }
+  .body .kami-chart .kc-point-label.kc-faint { fill: var(--ink-mid, #6A655D); }
+
+  /* ─── Kami-chart · timeline ──────────────────────────────────────
+     Horizontal time axis · events alternating above/below · each
+     event = dot on axis + dashed connector + rect card with period
+     (mono) + label (sans). Focal event renders in accent. */
+  .body .kami-chart .kc-t-axis    { stroke: var(--ink-muted, #B5AB9B); stroke-width: 1.4; }
+  .body .kami-chart .kc-t-arrow   { stroke: var(--ink-muted, #B5AB9B); stroke-width: 1.5; fill: none; stroke-linecap: round; }
+  .body .kami-chart .kc-t-dot     { fill: var(--ink-mid, #6A655D); stroke: var(--paper-soft, #ECE6DA); stroke-width: 1.5; }
+  .body .kami-chart .kc-t-dot-focal { fill: var(--accent, #6B6660); stroke: var(--paper-soft, #ECE6DA); stroke-width: 1.5; }
+  .body .kami-chart .kc-t-connector {
+    stroke: var(--ink-soft, #978C7E); stroke-width: 1;
+    stroke-dasharray: 3 3;
+  }
+  .body .kami-chart .kc-t-connector-focal {
+    stroke: var(--accent, #6B6660); stroke-width: 1.2;
+  }
+  .body .kami-chart .kc-t-card {
+    fill: var(--paper-soft, #ECE6DA);
+    stroke: var(--rule, rgba(0,0,0,0.14));
+    stroke-width: 0.8;
+  }
+  .body .kami-chart .kc-t-card-focal {
+    fill: var(--paper, #F4EFE6);
+    stroke: var(--accent, #6B6660);
+    stroke-width: 1;
+  }
+  .body .kami-chart .kc-t-period {
+    fill: var(--ink-soft, #978C7E);
+    font: 8px var(--mono);
+    letter-spacing: 0.15em;
+    text-transform: uppercase;
+  }
+  .body .kami-chart .kc-t-period-focal {
+    fill: var(--accent, #6B6660); font-weight: 600;
+  }
+  .body .kami-chart .kc-t-label {
+    fill: var(--ink, #2A2724);
+    font: 11px var(--sans); font-weight: 500;
+  }
+  .body .kami-chart .kc-t-label-focal { font-size: 12px; }
+
+  /* ─── Kami-chart · donut ─────────────────────────────────────────
+     6-slice maximum · cx=300 cy=200 R=136 r=76 · clockwise from top.
+     Slices declared in fill order; the largest (slice 1) carries the
+     accent, the rest cascade down the neutral ramp. Hollow centre
+     shows a single value + caption. Legend on the right. */
+  .body .kami-chart .kc-slice-1 { fill: var(--accent, #6B6660); }
+  .body .kami-chart .kc-slice-2 { fill: var(--ink-mid, #6A655D); }
+  .body .kami-chart .kc-slice-3 { fill: var(--ink-soft, #978C7E); }
+  .body .kami-chart .kc-slice-4 { fill: var(--ink-muted, #B5AB9B); }
+  .body .kami-chart .kc-slice-5 { fill: var(--paper-deep, #E2D9C4); }
+  .body .kami-chart .kc-slice-6 {
+    fill: var(--paper-soft, #ECE6DA);
+    stroke: var(--rule, rgba(0,0,0,0.14));
+    stroke-width: 0.8;
+  }
+  .body .kami-chart .kc-donut-separator {
+    fill: none;
+    stroke: var(--paper-soft, #ECE6DA);
+    stroke-width: 1.5;
+  }
+  .body .kami-chart .kc-donut-hole {
+    fill: var(--paper-soft, #ECE6DA);
+  }
+  .body .kami-chart .kc-donut-center-value {
+    fill: var(--accent, #6B6660);
+    font: 26px var(--serif);
+    font-weight: 500;
+  }
+  .body .kami-chart .kc-donut-center-label {
+    fill: var(--ink-soft, #978C7E);
+    font: 10px var(--sans);
+    letter-spacing: 0.10em;
+  }
+  .body .kami-chart .kc-donut-legend-divider {
+    stroke: var(--rule, rgba(0,0,0,0.14));
+    stroke-width: 0.8;
+  }
+  .body .kami-chart .kc-donut-legend-swatch.kc-slice-1 { fill: var(--accent, #6B6660); }
+  .body .kami-chart .kc-donut-legend-swatch.kc-slice-2 { fill: var(--ink-mid, #6A655D); }
+  .body .kami-chart .kc-donut-legend-swatch.kc-slice-3 { fill: var(--ink-soft, #978C7E); }
+  .body .kami-chart .kc-donut-legend-swatch.kc-slice-4 { fill: var(--ink-muted, #B5AB9B); }
+  .body .kami-chart .kc-donut-legend-swatch.kc-slice-5 { fill: var(--paper-deep, #E2D9C4); }
+  .body .kami-chart .kc-donut-legend-swatch.kc-slice-6 {
+    fill: var(--paper-soft, #ECE6DA);
+    stroke: var(--rule, rgba(0,0,0,0.14)); stroke-width: 0.8;
+  }
+  .body .kami-chart .kc-donut-legend-value {
+    fill: var(--ink, #2A2724);
+    font: 9.5px var(--sans);
+  }
+  .body .kami-chart .kc-donut-legend-value.kc-primary { font-weight: 600; }
+  .body .kami-chart .kc-donut-legend-label {
+    fill: var(--ink-mid, #6A655D);
+    font: 9px var(--sans);
+  }
+
+  /* ─── Kami-chart · gantt (replaces inline mermaid gantt) ──────────
+     Horizontal time axis with one bar per phase, optionally grouped
+     into named sections. Time scale auto-fits the longest end value.
+     Focal phase renders in accent. */
+  .body .kami-chart .kc-g-section-bg { fill: var(--paper-deep, rgba(0,0,0,0.03)); }
+  .body .kami-chart .kc-g-section-label {
+    fill: var(--ink-soft, #978C7E);
+    font: 9px var(--mono);
+    letter-spacing: 0.16em;
+    text-transform: uppercase;
+  }
+  .body .kami-chart .kc-g-row-rule { stroke: var(--rule-soft, rgba(0,0,0,0.08)); stroke-width: 0.8; }
+  .body .kami-chart .kc-g-task-label {
+    fill: var(--ink, #2A2724);
+    font: 10px var(--sans);
+  }
+  .body .kami-chart .kc-g-task-label.kc-primary { font-weight: 600; }
+  .body .kami-chart .kc-g-bar             { fill: var(--ink-mid, #6A655D); }
+  .body .kami-chart .kc-g-bar.kc-primary  { fill: var(--accent, #6B6660); }
+  .body .kami-chart .kc-g-bar-label {
+    fill: var(--paper-soft, #ECE6DA);
+    font: 9px var(--sans);
+    font-weight: 600;
+  }
+  .body .kami-chart .kc-g-bar-label.kc-outside {
+    fill: var(--ink-mid, #6A655D);
+  }
+  .body .kami-chart .kc-g-time-tick {
+    fill: var(--ink-soft, #978C7E);
+    font: 9px var(--mono);
+    letter-spacing: 0.12em;
+  }
+  .body .kami-chart .kc-g-time-axis { stroke: var(--ink, #2A2724); stroke-width: 0.8; }
+
+  /* ─── Kami-chart · tree (replaces inline mermaid mindmap) ─────────
+     2-deep hierarchy · root + N branches + M leaves per branch.
+     Connectors are right-angle paths with chevron arrows at child tops. */
+  .body .kami-chart .kc-tree-node-bg { fill: var(--paper, #F4EFE6); }
+  .body .kami-chart .kc-tree-root {
+    fill: var(--paper-soft, #ECE6DA);
+    stroke: var(--ink, #2A2724);
+    stroke-width: 1;
+  }
+  .body .kami-chart .kc-tree-branch {
+    fill: var(--paper-deep, rgba(0,0,0,0.03));
+    stroke: var(--ink-mid, #6A655D);
+    stroke-width: 1;
+  }
+  .body .kami-chart .kc-tree-branch-focal {
+    fill: var(--paper-deep, rgba(0,0,0,0.03));
+    stroke: var(--accent, #6B6660);
+    stroke-width: 1;
+  }
+  .body .kami-chart .kc-tree-leaf {
+    fill: var(--paper-deep, rgba(0,0,0,0.03));
+    stroke: var(--ink-mid, #6A655D);
+    stroke-width: 1;
+  }
+  .body .kami-chart .kc-tree-leaf-focal {
+    fill: var(--paper-deep, rgba(0,0,0,0.03));
+    stroke: var(--accent, #6B6660);
+    stroke-width: 0.8;
+  }
+  .body .kami-chart .kc-tree-kicker {
+    fill: var(--ink-soft, #978C7E);
+    font: 8px var(--mono);
+    letter-spacing: 0.15em;
+    text-transform: uppercase;
+  }
+  .body .kami-chart .kc-tree-kicker-focal { fill: var(--accent, #6B6660); }
+  .body .kami-chart .kc-tree-text {
+    fill: var(--ink, #2A2724);
+    font: 11px var(--sans);
+    font-weight: 500;
+  }
+  .body .kami-chart .kc-tree-connector       { stroke: var(--ink-mid, #6A655D); stroke-width: 1.2; fill: none; }
+  .body .kami-chart .kc-tree-connector-focal { stroke: var(--accent, #6B6660); stroke-width: 1.4; fill: none; }
+  .body .kami-chart .kc-tree-chevron       { stroke: var(--ink-mid, #6A655D); stroke-width: 1.5; fill: none; stroke-linecap: round; }
+  .body .kami-chart .kc-tree-chevron-focal { stroke: var(--accent, #6B6660); stroke-width: 1.5; fill: none; stroke-linecap: round; }
+
+  /* ─── Kami-chart · flowchart (replaces inline mermaid flowchart) ──
+     Two layouts:
+       · linear-v  · vertical chain of 2–5 nodes
+       · y-decision · root (decision diamond) → 2 branches → optional join
+     Node kinds: start | step | decision | outcome | end. */
+  .body .kami-chart .kc-fl-node {
+    fill: var(--paper, #F4EFE6);
+    stroke: var(--ink, #2A2724);
+    stroke-width: 1;
+  }
+  .body .kami-chart .kc-fl-node-focal {
+    fill: var(--paper-deep, rgba(0,0,0,0.03));
+    stroke: var(--accent, #6B6660);
+    stroke-width: 1.2;
+  }
+  .body .kami-chart .kc-fl-node-pill {
+    fill: var(--paper-soft, #ECE6DA);
+    stroke: var(--ink-mid, #6A655D);
+    stroke-width: 1;
+  }
+  .body .kami-chart .kc-fl-node-faint {
+    fill: var(--paper-deep, rgba(0,0,0,0.03));
+    stroke: var(--ink-muted, #B5AB9B);
+    stroke-width: 1;
+  }
+  .body .kami-chart .kc-fl-kicker {
+    fill: var(--ink-soft, #978C7E);
+    font: 7px var(--mono);
+    letter-spacing: 0.15em;
+    text-transform: uppercase;
+  }
+  .body .kami-chart .kc-fl-kicker-focal { fill: var(--accent, #6B6660); }
+  .body .kami-chart .kc-fl-text {
+    fill: var(--ink, #2A2724);
+    font: 12px var(--sans);
+    font-weight: 500;
+  }
+  .body .kami-chart .kc-fl-text-faint { fill: var(--ink-mid, #6A655D); }
+  .body .kami-chart .kc-fl-arrow       { stroke: var(--ink-mid, #6A655D); stroke-width: 1.2; fill: none; }
+  .body .kami-chart .kc-fl-arrow-focal { stroke: var(--accent, #6B6660); stroke-width: 1.4; fill: none; }
+  .body .kami-chart .kc-fl-arrowhead       { stroke: var(--ink-mid, #6A655D); stroke-width: 1.4; fill: none; stroke-linecap: round; }
+  .body .kami-chart .kc-fl-arrowhead-focal { stroke: var(--accent, #6B6660); stroke-width: 1.5; fill: none; stroke-linecap: round; }
+  .body .kami-chart .kc-fl-edge-label-bg {
+    fill: var(--paper-soft, #ECE6DA);
+  }
+  .body .kami-chart .kc-fl-edge-label {
+    fill: var(--ink-mid, #6A655D);
+    font: 8px var(--mono);
+    letter-spacing: 0.14em;
+    text-transform: uppercase;
+  }
+  .body .kami-chart .kc-fl-edge-label.kc-primary {
+    fill: var(--accent, #6B6660);
+    font-weight: 600;
+  }
+
+  /* ─── Kami-chart · swimlane (replaces sequence + journey) ────────
+     N lanes stacked vertically · steps positioned per lane in left-
+     to-right order · elbow connectors between consecutive steps with
+     chevron arrowheads. Focal lane gets a tinted background; focal
+     step gets accent border. Reuses kc-fl-* classes for nodes. */
+  .body .kami-chart .kc-sw-lane-bg     { fill: var(--paper-deep, rgba(0,0,0,0.03)); }
+  .body .kami-chart .kc-sw-lane-bg-alt { fill: var(--paper-soft, #ECE6DA); }
+  .body .kami-chart .kc-sw-lane-bg-focal { fill: var(--paper-deep, rgba(0,0,0,0.05)); }
+  .body .kami-chart .kc-sw-lane-divider { stroke: var(--rule-soft, rgba(0,0,0,0.08)); stroke-width: 0.8; }
+  .body .kami-chart .kc-sw-lane-divider-focal {
+    stroke: var(--accent, #6B6660);
+    stroke-width: 0.8;
+    stroke-dasharray: 4 3;
+  }
+  .body .kami-chart .kc-sw-lane-label {
+    fill: var(--ink-soft, #978C7E);
+    font: 9px var(--mono);
+    letter-spacing: 0.15em;
+    text-transform: uppercase;
+  }
+  .body .kami-chart .kc-sw-lane-label-focal { fill: var(--accent, #6B6660); }
+  .body .kami-chart .kc-sw-label-col {
+    fill: var(--paper, #F4EFE6);
+    stroke: var(--rule, rgba(0,0,0,0.14));
+    stroke-width: 0.8;
+  }
+  .body .kami-chart .kc-sw-arrow       { stroke: var(--ink-mid, #6A655D); stroke-width: 1.2; fill: none; }
+  .body .kami-chart .kc-sw-arrow-focal { stroke: var(--accent, #6B6660); stroke-width: 1.4; fill: none; }
+  .body .kami-chart .kc-sw-arrowhead       { stroke: var(--ink-mid, #6A655D); stroke-width: 1.5; fill: none; stroke-linecap: round; }
+  .body .kami-chart .kc-sw-arrowhead-focal { stroke: var(--accent, #6B6660); stroke-width: 1.5; fill: none; stroke-linecap: round; }
+  .body .kami-chart .kc-sw-score-dot {
+    fill: var(--accent, #6B6660);
+  }
+  .body .kami-chart .kc-sw-score-dot-faint {
+    fill: var(--ink-muted, #B5AB9B);
+  }
+
+  /* ─── Kami-chart · state-machine ──────────────────────────────────
+     Linear arrangement of state nodes · forward arrows (with optional
+     event labels) · optional back-transitions drawn as dashed arcs
+     above. Start dot + end double-circle markers are optional. */
+  .body .kami-chart .kc-sm-state {
+    fill: var(--paper, #F4EFE6);
+    stroke: var(--ink-mid, #6A655D);
+    stroke-width: 1;
+  }
+  .body .kami-chart .kc-sm-state-focal {
+    fill: var(--paper-deep, rgba(0,0,0,0.03));
+    stroke: var(--accent, #6B6660);
+    stroke-width: 1.2;
+  }
+  .body .kami-chart .kc-sm-state-terminal {
+    fill: var(--paper-soft, #ECE6DA);
+    stroke: var(--ink, #2A2724);
+    stroke-width: 1;
+  }
+  .body .kami-chart .kc-sm-kicker {
+    fill: var(--ink-soft, #978C7E);
+    font: 7px var(--mono);
+    letter-spacing: 0.15em;
+    text-transform: uppercase;
+  }
+  .body .kami-chart .kc-sm-kicker-focal { fill: var(--accent, #6B6660); }
+  .body .kami-chart .kc-sm-state-label {
+    fill: var(--ink, #2A2724);
+    font: 12px var(--sans);
+    font-weight: 500;
+  }
+  .body .kami-chart .kc-sm-state-hint {
+    fill: var(--ink-mid, #6A655D);
+    font: 9px var(--mono);
+  }
+  .body .kami-chart .kc-sm-forward       { stroke: var(--ink-mid, #6A655D); stroke-width: 1.2; fill: none; }
+  .body .kami-chart .kc-sm-forward-focal { stroke: var(--accent, #6B6660); stroke-width: 1.4; fill: none; }
+  .body .kami-chart .kc-sm-back {
+    stroke: var(--ink-mid, #6A655D);
+    stroke-width: 1.2;
+    fill: none;
+    stroke-dasharray: 4 3;
+  }
+  .body .kami-chart .kc-sm-arrowhead       { stroke: var(--ink-mid, #6A655D); stroke-width: 1.5; fill: none; stroke-linecap: round; }
+  .body .kami-chart .kc-sm-arrowhead-focal { stroke: var(--accent, #6B6660); stroke-width: 1.5; fill: none; stroke-linecap: round; }
+  .body .kami-chart .kc-sm-transition-label-bg { fill: var(--paper-soft, #ECE6DA); }
+  .body .kami-chart .kc-sm-transition-label {
+    fill: var(--ink-mid, #6A655D);
+    font: 8px var(--mono);
+    letter-spacing: 0.10em;
+    text-transform: uppercase;
+  }
+  .body .kami-chart .kc-sm-transition-label.kc-primary {
+    fill: var(--accent, #6B6660);
+    font-weight: 600;
+  }
+  .body .kami-chart .kc-sm-marker-start { fill: var(--ink, #2A2724); }
+  .body .kami-chart .kc-sm-marker-end-outer { fill: none; stroke: var(--ink, #2A2724); stroke-width: 1.4; }
+  .body .kami-chart .kc-sm-marker-end-inner { fill: var(--ink, #2A2724); }
+
   /* ─── Views-compared · spine-agnostic baseline ──────────────────
      The room's social map · always rendered when ≥ 2 directors.
      Layout: intro → 2-column compare grid (alignment | divergence)
@@ -1768,39 +2064,105 @@
      `body[data-spine="…"]` for higher specificity. */
 
   :root {
-    /* Type scale · 1 source of truth across all spines.
-       All sizes in px; line-heights unitless; tracking in em. */
-    --rep-display:        44px;    /* cover title */
-    --rep-h2:             24px;    /* section headings */
-    --rep-h3:             18px;    /* sub-section + recommendation action */
-    --rep-h4:             15px;  /* small headings */
-    --rep-body:           16px;    /* primary prose */
-    --rep-rationale:      16px;  /* secondary prose (rationale, item body) */
-    --rep-meta:           13px;    /* meta strips, metadata rows */
-    --rep-label:          10px;   /* mono uppercase labels */
-    --rep-caption:        11px;    /* footer captions */
-    --rep-pullquote:      19px;    /* italic pull-quotes inside cards */
-
-    --rep-leading-display: 1.18;
-    --rep-leading-heading: 1.4;
-    --rep-leading-body:    1.7;
-    --rep-leading-tight:   1.55;
-
-    --rep-tracking-display: -0.012em;
-    --rep-tracking-body:    -0.005em;
-    --rep-tracking-mono:     0.04em;
-    --rep-tracking-label:    0.2em;
-
-    /* Spacing scale */
-    --rep-section-gap: 56px;       /* before each H2 */
-    --rep-item-gap:    44px;       /* between rich list items */
-    --rep-para-gap:    14px;       /* between paragraphs */
-    --rep-row-gap:     10px;       /* tight rows inside a card */
+    /* ─── Type scale · 1 source of truth across all spines ─────────
+       All sizes in px; line-heights unitless; tracking in em.
+       Adapted from kami's pt-based ladder (px ≈ pt × 1.33). Spines
+       MAY scale globally (e.g. dense vs lush) but the relative
+       proportions and the line-height/tracking pairings stay locked. */
+    --rep-display:        44px;    /* cover title · pt-equiv 33 */
+    --rep-h1:             30px;    /* chapter / part divider · pt-equiv 22 */
+    --rep-h2:             24px;    /* section headings · pt-equiv 18 */
+    --rep-h3:             18px;    /* sub-section + recommendation action · pt-equiv 13 */
+    --rep-h4:             15px;    /* small headings · pt-equiv 11 */
+    --rep-lede:           17px;    /* intro paragraphs (first ¶ after H1/H2) · pt-equiv 13 */
+    --rep-body:           16px;    /* reading prose · pt-equiv 12 */
+    --rep-body-dense:     14px;    /* compact body (sidebars, dense lists) · pt-equiv 10.5 */
+    --rep-rationale:      16px;    /* secondary prose · matches body */
+    --rep-meta:           13px;    /* meta strips, metadata rows · pt-equiv 10 */
+    --rep-pullquote:      19px;    /* italic pull-quotes inside cards · pt-equiv 14 */
+    --rep-caption:        11px;    /* footer captions · pt-equiv 8 */
+    --rep-label:          10px;    /* mono uppercase labels (kickers) · pt-equiv 7.5 */
+    --rep-tiny:            9px;    /* footer meta / colophon / minor numerals · pt-equiv 7 */
+
+    /* ─── Line-height · 5 tiers, indexed by content type ───────────
+       Kami's invariant: print is tighter than web body. ≥ 1.6 floats;
+       ≤ 1.10 collides. Body prose 1.55-1.70; dense rhythm 1.42-1.45;
+       headlines 1.10-1.30. */
+    --rep-leading-display: 1.18;   /* display, H1, H2 */
+    --rep-leading-heading: 1.40;   /* H3, H4, lede */
+    --rep-leading-body:    1.70;   /* reading prose (loose, English-leaning) */
+    --rep-leading-tight:   1.55;   /* secondary prose, captions */
+    --rep-leading-dense:   1.42;   /* compact lists, sidebars · kami's "dense body" tier */
+
+    /* ─── Letter-spacing (tracking) · per-role, with CJK comp ──────
+       Latin body sits at 0. CJK body (especially TsangerJinKai02 /
+       PingFang) wants 0.03-0.06em to open up density. Display CJK
+       takes a smaller bump (the glyphs are already large). Mono
+       labels get 0.18-0.20em uppercase tracking. */
+    --rep-tracking-display:     -0.012em;
+    --rep-tracking-body:        -0.005em;
+    --rep-tracking-cjk-body:     0.04em;     /* applied via body.is-cjk */
+    --rep-tracking-cjk-display:  0.02em;     /* applied via body.is-cjk to display */
+    --rep-tracking-mono:         0.04em;
+    --rep-tracking-label:        0.20em;     /* uppercase kickers / overlines */
+
+    /* ─── Spacing scale · 7-tier, base 4px ─────────────────────────
+       Mirrors kami's xs/sm/md/lg/xl/2xl/3xl. Semantic aliases
+       (--rep-section-gap etc.) below resolve to specific tiers — use
+       the aliases in component CSS, never the bare tier number, so
+       the rhythm stays semantic not arithmetic. */
+    --rep-space-xs:        4px;     /* inline adjacent · row internal padding */
+    --rep-space-sm:        8px;     /* tag padding · dense layout · row gap */
+    --rep-space-md:       12px;     /* component interior · paragraph gap */
+    --rep-space-lg:       20px;     /* between components · card padding */
+    --rep-space-xl:       32px;     /* section-title margins · between rich items */
+    --rep-space-2xl:      56px;     /* between major sections (H2 zones) */
+    --rep-space-3xl:      96px;     /* between chapters in long-doc / part covers */
+
+    /* Semantic aliases · use these in component CSS so the rhythm
+       stays intention-named. Add new aliases when a new semantic
+       use emerges; never invent new numeric values. */
+    --rep-section-gap: var(--rep-space-2xl);    /* before each H2 */
+    --rep-item-gap:    var(--rep-space-xl);     /* between rich list items */
+    --rep-para-gap:    var(--rep-space-md);     /* between paragraphs · 12px */
+    --rep-row-gap:     var(--rep-space-sm);     /* tight rows inside a card */
+
+    /* ─── Radius scale · capped at 10px ────────────────────────────
+       Per project rule (CLAUDE.md memory · feedback_no_emoji_in_designs
+       adjacency): max 10px. Beyond, surfaces start to feel like App
+       Store chrome. Reserve 16px exclusively for hero / cover cards. */
+    --rep-radius-tight:      2px;   /* swatches, mini-tags, inline pills */
+    --rep-radius-card:       4px;   /* tag pads, code blocks */
+    --rep-radius-container:  6px;   /* card edges, callout aside */
+    --rep-radius-feature:   10px;   /* feature cards, lockup tiles */
+    --rep-radius-hero:      16px;   /* RESERVED · cover hero only */
+
+    /* ─── Depth · three methods, no hard drop shadows ──────────────
+       Kami: ring shadow / whisper shadow / light-dark surface
+       alternation. Never `0 6px 12px rgba(0,0,0,0.4)` style drops —
+       reads as 2010s material-design and clashes with the editorial
+       register. */
+    --rep-shadow-ring:    0 0 0 1px var(--rule, rgba(0,0,0,0.14));
+    --rep-shadow-whisper: 0 4px 24px rgba(0,0,0,0.05);
 
     /* Reading column */
     --rep-prose-width: 64ch;
   }
 
+  /* ─── CJK body letter-spacing application ──────────────────────
+     The CJK tracking tokens above are inert until we apply them.
+     `body.is-cjk` is set by report.js when the brief's locale is
+     zh/ja, so non-CJK reports remain untouched. */
+  body.is-cjk .body p,
+  body.is-cjk .body li,
+  body.is-cjk .body blockquote,
+  body.is-cjk .body td,
+  body.is-cjk .body th { letter-spacing: var(--rep-tracking-cjk-body); }
+  body.is-cjk .body h1,
+  body.is-cjk .body h2,
+  body.is-cjk .body h3,
+  body.is-cjk .body .cover-title { letter-spacing: var(--rep-tracking-cjk-display); }
+
   /* ── Section break + heading rhythm · cross-spine ────────────────
      Each numbered section is preceded by `<div class="chapter-num">
      Section NN</div>` (injected client-side). Together they form the
@@ -1994,7 +2356,7 @@
   }
   .rec-num {
     font-family: var(--mono);
-    font-size: 10.5px;
+    font-size: 10px;
     font-weight: 400;
     color: var(--ink-faint, var(--text-faint));
     letter-spacing: 0.2em;
@@ -3020,73 +3382,6 @@
       .replace(/`([^`]+)`/g, "<code>$1</code>");
   }
 
-  /** Mermaid 10.9.5 quadrantChart lexer is strict: anything beyond ASCII
-   *  alphanumerics + spaces breaks UNQUOTED axis/quadrant/item labels
-   *  (CJK, parens, `+`, etc. all fail with "Unrecognized text"). The
-   *  fix is to ALWAYS wrap those labels in double quotes; titles are
-   *  exempt. Mirrors src/utils/mermaid-sanitize.ts — keep in sync. */
-  function sanitizeMermaid(src) {
-    if (!src) return src;
-    if (!/^\s*quadrantChart\b/i.test(src)) return src;
-
-    const clamp01 = (n) => {
-      if (!Number.isFinite(n)) return 0.5;
-      return Math.max(0.02, Math.min(0.98, n));
-    };
-    const cleanLabel = (s) => s
-      .replace(/（/g, "(")
-      .replace(/）/g, ")")
-      .replace(/，/g, " ")
-      .replace(/：/g, " ")
-      .replace(/、/g, " ")
-      .replace(/。/g, " ")
-      .replace(/；/g, " ")
-      .replace(/["'`\[\]:]+/g, " ")
-      .replace(/\s+/g, " ")
-      .trim();
-
-    return src.split("\n").map((line) => {
-      const indentMatch = /^(\s*)/.exec(line);
-      const indent = indentMatch ? indentMatch[1] || "    " : "    ";
-      const t = line.trim();
-      if (!t) return line;
-
-      // Title · cleaned but unquoted.
-      const titleM = /^title\s+(.+)$/i.exec(t);
-      if (titleM) return `${indent}title ${cleanLabel(titleM[1])}`;
-
-      // Axis lines · always quoted both-ends.
-      const ax = /^(x-axis|y-axis)\s+(.+)$/i.exec(t);
-      if (ax) {
-        const which = ax[1].toLowerCase();
-        const rest = ax[2].trim();
-        if (rest.includes("-->")) {
-          const parts = rest.split("-->").map((s) => cleanLabel(s));
-          if (parts.length === 2 && parts[0] && parts[1]) {
-            return `${indent}${which} "${parts[0]}" --> "${parts[1]}"`;
-          }
-        }
-        const cleaned = cleanLabel(rest);
-        return `${indent}${which} "Low ${cleaned}" --> "High ${cleaned}"`;
-      }
-
-      // Quadrant labels · always quoted.
-      const qM = /^(quadrant-[1-4])\s+(.+)$/i.exec(t);
-      if (qM) return `${indent}${qM[1]} "${cleanLabel(qM[2])}"`;
-
-      // Item lines · always quoted, coords clamped.
-      const item = /^"?([^"\[\]]+?)"?\s*:\s*\[\s*(-?[\d.]+)\s*,\s*(-?[\d.]+)\s*\]\s*$/.exec(t);
-      if (item) {
-        const label = cleanLabel(item[1]);
-        const x = clamp01(parseFloat(item[2]));
-        const y = clamp01(parseFloat(item[3]));
-        return `${indent}"${label}": [${x.toFixed(2)}, ${y.toFixed(2)}]`;
-      }
-
-      return line;
-    }).join("\n");
-  }
-
   /** Parse a fenced ```metric-strip block body (strict JSON) and emit
    *  the dashboard card grid. Mirrors how ```mermaid is handled — the
    *  block is pulled out at the placeholder layer before block parsing,
@@ -3225,6 +3520,1415 @@
       `</div>`;
   }
 
+  /** Parse a fenced ```kami-chart block (strict JSON) and emit inline
+   *  SVG. Replaces the mermaid pipeline for typed visuals. Dispatch by
+   *  `type` field; each generator owns its own SVG coordinate math and
+   *  uses spine CSS variables for colour so per-spine palettes apply
+   *  automatically. Bad JSON / unknown type degrades to a quiet error
+   *  block · never throws. */
+  function renderKamiChart(body) {
+    let parsed;
+    try { parsed = JSON.parse(body); } catch (e) {
+      return `<div class="kami-chart-error" data-err="parse">${escape(body)}</div>`;
+    }
+    if (!parsed || typeof parsed !== "object") {
+      return `<div class="kami-chart-error" data-err="shape"></div>`;
+    }
+    const type = typeof parsed.type === "string" ? parsed.type.trim() : "";
+    switch (type) {
+      case "bar":
+      case "bar-chart":
+        return renderKamiBar(parsed);
+      case "quadrant":
+      case "quadrant-chart":
+        return renderKamiQuadrant(parsed);
+      case "timeline":
+        return renderKamiTimeline(parsed);
+      case "donut":
+      case "donut-chart":
+      case "pie":
+      case "pie-chart":
+        return renderKamiDonut(parsed);
+      case "gantt":
+        return renderKamiGantt(parsed);
+      case "tree":
+      case "mindmap":
+        return renderKamiTree(parsed);
+      case "flowchart":
+      case "flow":
+        return renderKamiFlowchart(parsed);
+      case "swimlane":
+      case "sequence":
+      case "journey":
+        return renderKamiSwimlane(parsed);
+      case "state":
+      case "state-machine":
+      case "statediagram":
+      case "statediagram-v2":
+        return renderKamiStateMachine(parsed);
+      default:
+        return `<div class="kami-chart-error" data-err="type">unsupported chart type: ${escape(type || "<empty>")}</div>`;
+    }
+  }
+
+  /** Pick the next "nice" round number ≥ v · 1, 1.5, 2, 2.5, 3, 4, 5,
+   *  7.5, 10 × 10^N. Used to round the bar-chart Y-axis maximum so
+   *  gridlines hit even values regardless of the underlying data. */
+  function kcNiceMax(v) {
+    if (!isFinite(v) || v <= 0) return 10;
+    const exp = Math.floor(Math.log10(v));
+    const pow = Math.pow(10, exp);
+    const norm = v / pow;
+    let nice;
+    if (norm <= 1)   nice = 1;
+    else if (norm <= 1.5) nice = 1.5;
+    else if (norm <= 2)   nice = 2;
+    else if (norm <= 2.5) nice = 2.5;
+    else if (norm <= 3)   nice = 3;
+    else if (norm <= 4)   nice = 4;
+    else if (norm <= 5)   nice = 5;
+    else if (norm <= 7.5) nice = 7.5;
+    else                  nice = 10;
+    return nice * pow;
+  }
+
+  /** Format a Y-axis tick value · drop trailing zeros, keep ≤ 2
+   *  decimals so labels read cleanly at 10px. */
+  function kcFmt(v) {
+    if (!isFinite(v)) return "";
+    if (Number.isInteger(v)) return String(v);
+    return Number(v.toFixed(2)).toString();
+  }
+
+  /** Bar chart · 2–8 categories, single series. Optional `focal` label
+   *  picks one bar to render with the spine accent (others go neutral).
+   *  Without `focal`, every bar is primary. */
+  function renderKamiBar(data) {
+    const title = typeof data.title === "string" ? data.title.trim() : "";
+    const yLabel = typeof data.yLabel === "string" ? data.yLabel.trim() : "";
+    const unit = typeof data.unit === "string" ? data.unit.trim() : "";
+    const focal = typeof data.focal === "string" ? data.focal.trim() : "";
+    const caption = typeof data.caption === "string" ? data.caption.trim() : "";
+    const figNum = typeof data.figNum === "string" || typeof data.figNum === "number"
+      ? String(data.figNum) : "";
+    const barsRaw = Array.isArray(data.bars) ? data.bars : [];
+    const bars = [];
+    for (const b of barsRaw) {
+      if (!b || typeof b !== "object") continue;
+      const label = typeof b.label === "string" ? b.label.trim() : "";
+      const value = Number(b.value);
+      if (!label || !isFinite(value)) continue;
+      bars.push({ label, value });
+      if (bars.length >= 8) break;
+    }
+    if (bars.length < 2) {
+      return `<div class="kami-chart-error" data-err="too-few-bars"></div>`;
+    }
+
+    // Geometry · viewBox 680 × 420, chart area x∈[60,620], y∈[40,320].
+    const X0 = 60, X1 = 620, Y0 = 40, Y1 = 320;
+    const W  = X1 - X0; // 560
+    const H  = Y1 - Y0; // 280
+    const N = bars.length;
+    const groupW = W / N;
+    const barW = Math.min(48, Math.round(groupW * 0.55));
+    const maxV = Math.max(...bars.map((b) => b.value), 0);
+    const yMax = kcNiceMax(maxV);
+
+    // Five gridlines at 0 / 25% / 50% / 75% / 100% of yMax.
+    const gridlines = [0, 0.25, 0.5, 0.75, 1].map((p) => ({
+      v: yMax * p,
+      y: Y1 - (Y1 - Y0) * p,
+    }));
+
+    // Per-bar layout
+    const barEls = [];
+    const labelEls = [];
+    const dataLabelEls = [];
+    bars.forEach((b, i) => {
+      const cx = X0 + groupW * i + groupW / 2;
+      const bx = Math.round(cx - barW / 2);
+      const bh = Math.round((b.value / yMax) * H);
+      const by = Y1 - bh;
+      const isFocal = focal ? (b.label === focal) : true;
+      const seriesCls = isFocal ? "kc-series-primary" : "kc-series-secondary";
+      barEls.push(
+        `<rect class="kc-bar ${seriesCls}" x="${bx}" y="${by}" width="${barW}" height="${bh}" rx="2"/>`,
+      );
+      // Number above bar
+      const labelTxt = unit
+        ? `${kcFmt(b.value)}${unit}`
+        : kcFmt(b.value);
+      dataLabelEls.push(
+        `<text class="kc-data-label${isFocal ? " kc-primary" : ""}" x="${Math.round(cx)}" y="${by - 4}" text-anchor="middle">${escape(labelTxt)}</text>`,
+      );
+      // Category label · truncate to 18 chars to keep packing safe
+      const catLabel = b.label.length > 18 ? b.label.slice(0, 17) + "…" : b.label;
+      labelEls.push(
+        `<text class="kc-category-label" x="${Math.round(cx)}" y="${Y1 + 20}" text-anchor="middle">${escape(catLabel)}</text>`,
+      );
+    });
+
+    // Gridlines + Y-axis ticks
+    const gridEls = gridlines.map((g) =>
+      `<line class="kc-grid" x1="${X0}" y1="${g.y}" x2="${X1}" y2="${g.y}"/>`,
+    ).join("");
+    const tickEls = gridlines.map((g) =>
+      `<text class="kc-y-tick" x="${X0 - 8}" y="${g.y + 4}" text-anchor="end">${escape(kcFmt(g.v))}</text>`,
+    ).join("");
+
+    // Y-axis unit (rotated)
+    const yUnitTxt = yLabel || unit;
+    const yUnitEl = yUnitTxt
+      ? `<text class="kc-y-unit" x="16" y="${(Y0 + Y1) / 2}" transform="rotate(-90 16 ${(Y0 + Y1) / 2})" text-anchor="middle">${escape(yUnitTxt.toUpperCase())}</text>`
+      : "";
+
+    // Figure header
+    const figHeader =
+      `<div class="kc-figheader">` +
+      `<span class="kc-fignum">Figure${figNum ? " " + escape(figNum) : ""}</span>` +
+      (title ? `<span class="kc-figtitle">${escape(title)}</span>` : "") +
+      `</div>`;
+
+    // Caption
+    const captionEl = caption
+      ? `<p class="kc-caption">${inline(escape(caption))}</p>`
+      : "";
+
+    return (
+      `<figure class="kami-chart">` +
+        figHeader +
+        `<svg class="kc-svg" viewBox="0 0 680 380" xmlns="http://www.w3.org/2000/svg" aria-label="${escape(title || "Bar chart")}">` +
+          `<rect class="kc-canvas" width="100%" height="100%"/>` +
+          gridEls +
+          tickEls +
+          yUnitEl +
+          `<line class="kc-baseline" x1="${X0}" y1="${Y1}" x2="${X1}" y2="${Y1}"/>` +
+          barEls.join("") +
+          dataLabelEls.join("") +
+          labelEls.join("") +
+        `</svg>` +
+        captionEl +
+      `</figure>`
+    );
+  }
+
+  /** Quadrant chart · 2-axis plot, labelled items, optional `focal`.
+   *  Items use {label, x, y} where x and y are 0..1 (0 = low, 1 = high).
+   *  Top-right quadrant is the "preferred" zone (accent-tinted background
+   *  + accent quad-label). Focal item renders solid accent; everything
+   *  else cascades from outline-ink to faint-muted by `tier` (1..4) if
+   *  provided, otherwise everyone shares the standard outline. */
+  function renderKamiQuadrant(data) {
+    const title = typeof data.title === "string" ? data.title.trim() : "";
+    const xLabel = typeof data.xLabel === "string" ? data.xLabel.trim() : "";
+    const yLabel = typeof data.yLabel === "string" ? data.yLabel.trim() : "";
+    const q1 = typeof data.q1 === "string" ? data.q1.trim() : "";
+    const q2 = typeof data.q2 === "string" ? data.q2.trim() : "";
+    const q3 = typeof data.q3 === "string" ? data.q3.trim() : "";
+    const q4 = typeof data.q4 === "string" ? data.q4.trim() : "";
+    const focal = typeof data.focal === "string" ? data.focal.trim() : "";
+    const caption = typeof data.caption === "string" ? data.caption.trim() : "";
+    const figNum = typeof data.figNum === "string" || typeof data.figNum === "number"
+      ? String(data.figNum) : "";
+    const itemsRaw = Array.isArray(data.items) ? data.items : [];
+    const items = [];
+    for (const it of itemsRaw) {
+      if (!it || typeof it !== "object") continue;
+      const label = typeof it.label === "string" ? it.label.trim() : "";
+      const x = Number(it.x);
+      const y = Number(it.y);
+      if (!label || !isFinite(x) || !isFinite(y)) continue;
+      const tier = Number.isInteger(it.tier) ? Math.max(1, Math.min(4, it.tier)) : 0;
+      items.push({ label, x: Math.max(0, Math.min(1, x)), y: Math.max(0, Math.min(1, y)), tier });
+      if (items.length >= 16) break;
+    }
+    if (items.length < 2) {
+      return `<div class="kami-chart-error" data-err="too-few-items"></div>`;
+    }
+
+    // Geometry · viewBox 820 × 540, plot area x∈[80, 740], y∈[60, 440].
+    // y-up in data terms (y=0 bottom, y=1 top) → svg y flipped.
+    const X0 = 80, X1 = 740, Y0 = 60, Y1 = 440;
+    const CX = (X0 + X1) / 2, CY = (Y0 + Y1) / 2;
+    const toSvgX = (x) => X0 + x * (X1 - X0);
+    const toSvgY = (y) => Y1 - y * (Y1 - Y0);
+
+    // Quadrant text positions (offset from each quadrant centre)
+    const quadEls = [
+      // Q2 · top-left · high-y, low-x
+      q2 ? `<text class="kc-q-quad-kicker" x="${X0 + 164}" y="${Y0 + 26}" text-anchor="middle">HIGH-Y · LOW-X</text>
+            <text class="kc-q-quad-name"   x="${X0 + 164}" y="${Y0 + 42}" text-anchor="middle">${escape(q2)}</text>` : "",
+      // Q1 · top-right · high-y, high-x (PREFERRED)
+      q1 ? `<text class="kc-q-quad-kicker kc-q-pref" x="${X1 - 164}" y="${Y0 + 26}" text-anchor="middle">HIGH-Y · HIGH-X</text>
+            <text class="kc-q-quad-name kc-q-pref"   x="${X1 - 164}" y="${Y0 + 42}" text-anchor="middle">${escape(q1)}</text>` : "",
+      // Q3 · bottom-left · low-y, low-x
+      q3 ? `<text class="kc-q-quad-kicker" x="${X0 + 164}" y="${Y1 - 28}" text-anchor="middle">LOW-Y · LOW-X</text>
+            <text class="kc-q-quad-name"   x="${X0 + 164}" y="${Y1 - 12}" text-anchor="middle">${escape(q3)}</text>` : "",
+      // Q4 · bottom-right · low-y, high-x
+      q4 ? `<text class="kc-q-quad-kicker" x="${X1 - 164}" y="${Y1 - 28}" text-anchor="middle">LOW-Y · HIGH-X</text>
+            <text class="kc-q-quad-name"   x="${X1 - 164}" y="${Y1 - 12}" text-anchor="middle">${escape(q4)}</text>` : "",
+    ].join("");
+
+    // Items · render in reverse z-order so focal lands on top
+    const pointEls = items.map((it) => {
+      const cx = Math.round(toSvgX(it.x));
+      const cy = Math.round(toSvgY(it.y));
+      const isFocal = focal && it.label === focal;
+      let pointCls = "kc-point";
+      let labelCls = "kc-point-label";
+      let r = 5;
+      if (isFocal) {
+        pointCls = "kc-point-focal";
+        labelCls = "kc-point-label kc-primary";
+        r = 6.5;
+      } else if (it.tier === 2) {
+        pointCls = "kc-point-tinted";
+      } else if (it.tier === 3) {
+        pointCls = "kc-point";
+      } else if (it.tier === 4) {
+        pointCls = "kc-point-faint";
+        labelCls = "kc-point-label kc-faint";
+        r = 4;
+      }
+      // Place label to the right of the point; if point is in the right
+      // half (cx > CX), pull label to the left so it doesn't overflow.
+      const labelOnLeft = cx > X1 - 80;
+      const lx = labelOnLeft ? cx - 10 : cx + 10;
+      const ly = cy + 4;
+      const anchor = labelOnLeft ? "end" : "start";
+      return (
+        `<circle class="${pointCls}" cx="${cx}" cy="${cy}" r="${r}"/>` +
+        `<text class="${labelCls}" x="${lx}" y="${ly}" text-anchor="${anchor}">${escape(it.label)}</text>`
+      );
+    }).join("");
+
+    const xLabelEl = xLabel
+      ? `<text class="kc-q-axis-label" x="${CX}" y="${Y1 + 40}" text-anchor="middle">${escape(xLabel)}</text>`
+      : "";
+    const yLabelEl = yLabel
+      ? `<text class="kc-q-axis-label" x="30" y="${CY}" text-anchor="middle" transform="rotate(-90 30 ${CY})">${escape(yLabel)}</text>`
+      : "";
+
+    const figHeader =
+      `<div class="kc-figheader">` +
+      `<span class="kc-fignum">Figure${figNum ? " " + escape(figNum) : ""}</span>` +
+      (title ? `<span class="kc-figtitle">${escape(title)}</span>` : "") +
+      `</div>`;
+
+    const captionEl = caption
+      ? `<p class="kc-caption">${inline(escape(caption))}</p>`
+      : "";
+
+    return (
+      `<figure class="kami-chart">` +
+        figHeader +
+        `<svg class="kc-svg" viewBox="0 0 820 500" xmlns="http://www.w3.org/2000/svg" aria-label="${escape(title || "Quadrant chart")}">` +
+          `<rect class="kc-canvas" width="100%" height="100%"/>` +
+          `<rect class="kc-q-frame" x="${X0}" y="${Y0}" width="${X1 - X0}" height="${Y1 - Y0}"/>` +
+          `<rect class="kc-q-tint"  x="${CX}" y="${Y0}" width="${X1 - CX}" height="${CY - Y0}"/>` +
+          `<line class="kc-q-axis" x1="${X0}" y1="${CY}" x2="${X1}" y2="${CY}"/>` +
+          `<line class="kc-q-axis" x1="${CX}" y1="${Y0}" x2="${CX}" y2="${Y1}"/>` +
+          `<line class="kc-q-arrow" x1="${X0}" y1="${Y1 + 16}" x2="${X1}" y2="${Y1 + 16}"/>` +
+          `<path class="kc-q-arrow" d="M${X1 - 6},${Y1 + 12} L${X1},${Y1 + 16} L${X1 - 6},${Y1 + 20}"/>` +
+          `<line class="kc-q-arrow" x1="60" y1="${Y1}" x2="60" y2="${Y0}"/>` +
+          `<path class="kc-q-arrow" d="M56,${Y0 + 6} L60,${Y0} L64,${Y0 + 6}"/>` +
+          quadEls +
+          pointEls +
+          xLabelEl +
+          yLabelEl +
+        `</svg>` +
+        captionEl +
+      `</figure>`
+    );
+  }
+
+  /** Timeline · 3–8 dated events on a horizontal axis. Events alternate
+   *  above / below the axis. `focal` (period of the load-bearing event)
+   *  renders the dot, connector, and card in the spine accent. */
+  function renderKamiTimeline(data) {
+    const title = typeof data.title === "string" ? data.title.trim() : "";
+    const focal = typeof data.focal === "string" ? data.focal.trim() : "";
+    const caption = typeof data.caption === "string" ? data.caption.trim() : "";
+    const figNum = typeof data.figNum === "string" || typeof data.figNum === "number"
+      ? String(data.figNum) : "";
+    const pointsRaw = Array.isArray(data.points) ? data.points : [];
+    const points = [];
+    for (const p of pointsRaw) {
+      if (!p || typeof p !== "object") continue;
+      const period = typeof p.period === "string" ? p.period.trim() : "";
+      const label = typeof p.label === "string" ? p.label.trim() : "";
+      const description = typeof p.description === "string" ? p.description.trim() : "";
+      if (!period || !label) continue;
+      points.push({ period, label, description });
+      if (points.length >= 8) break;
+    }
+    if (points.length < 3) {
+      return `<div class="kami-chart-error" data-err="too-few-points"></div>`;
+    }
+
+    // Geometry · viewBox 960 × 380. Axis at y=200; cards above y∈[100,168],
+    // below y∈[232,300]. Events evenly distributed across x∈[100,860].
+    const X0 = 100, X1 = 860, AY = 200;
+    const N = points.length;
+    const step = (X1 - X0) / (N - 1);
+
+    const els = [];
+    points.forEach((pt, i) => {
+      const cx = Math.round(X0 + step * i);
+      const above = i % 2 === 0;
+      const isFocal = focal && pt.period === focal;
+
+      const dotCls = isFocal ? "kc-t-dot-focal" : "kc-t-dot";
+      const conCls = isFocal ? "kc-t-connector-focal" : "kc-t-connector";
+      const cardCls = isFocal ? "kc-t-card-focal" : "kc-t-card";
+      const periodCls = isFocal ? "kc-t-period kc-t-period-focal" : "kc-t-period";
+      const labelCls = isFocal ? "kc-t-label kc-t-label-focal" : "kc-t-label";
+      const r = isFocal ? 6 : 5;
+
+      // Card geometry
+      const cardW = 132, cardH = pt.description ? 56 : 40;
+      const cardX = cx - cardW / 2;
+      const cardY = above ? (AY - 32 - cardH) : (AY + 32);
+      const conX = cx;
+      const conY1 = above ? AY - 8 : AY + 8;
+      const conY2 = above ? cardY + cardH : cardY;
+
+      const periodY = above ? cardY + 16 : cardY + 16;
+      const labelY  = above ? cardY + 32 : cardY + 32;
+      const descY   = above ? cardY + 48 : cardY + 48;
+
+      els.push(
+        `<line class="${conCls}" x1="${conX}" y1="${conY1}" x2="${conX}" y2="${conY2}"/>` +
+        `<circle class="${dotCls}" cx="${cx}" cy="${AY}" r="${r}"/>` +
+        `<rect class="${cardCls}" x="${cardX}" y="${cardY}" width="${cardW}" height="${cardH}" rx="4"/>` +
+        `<text class="${periodCls}" x="${cx}" y="${periodY}" text-anchor="middle">${escape(pt.period)}</text>` +
+        `<text class="${labelCls}" x="${cx}" y="${labelY}" text-anchor="middle">${escape(pt.label)}</text>` +
+        (pt.description
+          ? `<text class="kc-t-period" x="${cx}" y="${descY}" text-anchor="middle" style="text-transform:none;letter-spacing:0;font-size:9px">${escape(pt.description.length > 40 ? pt.description.slice(0, 39) + "…" : pt.description)}</text>`
+          : ""),
+      );
+    });
+
+    const figHeader =
+      `<div class="kc-figheader">` +
+      `<span class="kc-fignum">Figure${figNum ? " " + escape(figNum) : ""}</span>` +
+      (title ? `<span class="kc-figtitle">${escape(title)}</span>` : "") +
+      `</div>`;
+
+    const captionEl = caption
+      ? `<p class="kc-caption">${inline(escape(caption))}</p>`
+      : "";
+
+    return (
+      `<figure class="kami-chart">` +
+        figHeader +
+        `<svg class="kc-svg" viewBox="0 0 960 380" xmlns="http://www.w3.org/2000/svg" aria-label="${escape(title || "Timeline")}">` +
+          `<rect class="kc-canvas" width="100%" height="100%"/>` +
+          `<line class="kc-t-axis" x1="${X0 - 40}" y1="${AY}" x2="${X1 + 40}" y2="${AY}"/>` +
+          `<path class="kc-t-arrow" d="M${X1 + 34},${AY - 4} L${X1 + 40},${AY} L${X1 + 34},${AY + 4}"/>` +
+          els.join("") +
+        `</svg>` +
+        captionEl +
+      `</figure>`
+    );
+  }
+
+  /** Donut chart · 2–6 slices summing to 100 (values may be raw, the
+   *  renderer normalises). Largest slice carries the accent; smaller
+   *  slices cascade down the neutral ramp. The hole shows the largest
+   *  slice's value + caption. */
+  function renderKamiDonut(data) {
+    const title = typeof data.title === "string" ? data.title.trim() : "";
+    const centerLabel = typeof data.centerLabel === "string" ? data.centerLabel.trim() : "";
+    const caption = typeof data.caption === "string" ? data.caption.trim() : "";
+    const figNum = typeof data.figNum === "string" || typeof data.figNum === "number"
+      ? String(data.figNum) : "";
+    const slicesRaw = Array.isArray(data.slices) ? data.slices : [];
+    const slices = [];
+    for (const s of slicesRaw) {
+      if (!s || typeof s !== "object") continue;
+      const label = typeof s.label === "string" ? s.label.trim() : "";
+      const value = Number(s.value);
+      if (!label || !isFinite(value) || value <= 0) continue;
+      slices.push({ label, value });
+      if (slices.length >= 6) break;
+    }
+    if (slices.length < 2) {
+      return `<div class="kami-chart-error" data-err="too-few-slices"></div>`;
+    }
+
+    // Sort largest-first so slice 1 = largest = accent
+    slices.sort((a, b) => b.value - a.value);
+    const total = slices.reduce((s, x) => s + x.value, 0);
+    slices.forEach((s) => { s.pct = (s.value / total) * 100; });
+
+    // Geometry · viewBox 680 × 420 · donut centre (300, 200), R=136, r=76
+    const CX = 300, CY = 200, R = 136, IR = 76;
+
+    function polar(r, deg) {
+      const rad = (deg - 90) * Math.PI / 180;  // -90 puts 0° at top
+      return { x: CX + r * Math.cos(rad), y: CY + r * Math.sin(rad) };
+    }
+    function round1(v) { return Math.round(v * 10) / 10; }
+
+    let cursor = 0;
+    const sliceEls = slices.map((s, i) => {
+      const span = (s.value / total) * 360;
+      const a0 = cursor;
+      const a1 = cursor + span;
+      cursor = a1;
+      const large = span > 180 ? 1 : 0;
+      const o0 = polar(R, a0);
+      const o1 = polar(R, a1);
+      const iEnd = polar(IR, a1);
+      const iStart = polar(IR, a0);
+      const cls = `kc-slice-${Math.min(6, i + 1)}`;
+      const d = `M ${round1(o0.x)} ${round1(o0.y)} ` +
+                `A ${R} ${R} 0 ${large} 1 ${round1(o1.x)} ${round1(o1.y)} ` +
+                `L ${round1(iEnd.x)} ${round1(iEnd.y)} ` +
+                `A ${IR} ${IR} 0 ${large} 0 ${round1(iStart.x)} ${round1(iStart.y)} Z`;
+      return `<path class="${cls}" d="${d}"/>`;
+    }).join("");
+
+    // Centre · largest slice's value + supplied label
+    const lead = slices[0];
+    const centerValue = Number.isInteger(lead.pct)
+      ? `${lead.pct}%`
+      : `${lead.pct.toFixed(1)}%`;
+    const centerLabelTxt = (centerLabel || lead.label).toUpperCase();
+
+    // Legend · vertical list right of donut. x=472 swatch, x=492 pct, x=524 label.
+    const legendRow = (s, i) => {
+      const y = 136 + i * 26;
+      const cls = `kc-slice-${Math.min(6, i + 1)}`;
+      const pctTxt = Number.isInteger(s.pct) ? `${s.pct}%` : `${s.pct.toFixed(1)}%`;
+      const isPrimary = i === 0 ? " kc-primary" : "";
+      return (
+        `<rect class="kc-donut-legend-swatch ${cls}" x="472" y="${y}" width="12" height="12" rx="2"/>` +
+        `<text class="kc-donut-legend-value${isPrimary}" x="492" y="${y + 10}">${escape(pctTxt)}</text>` +
+        `<text class="kc-donut-legend-label" x="528" y="${y + 10}">${escape(s.label)}</text>`
+      );
+    };
+    const legendEls = slices.map(legendRow).join("");
+    const legendTopY = 124;
+    const legendBotY = 136 + slices.length * 26;
+
+    const figHeader =
+      `<div class="kc-figheader">` +
+      `<span class="kc-fignum">Figure${figNum ? " " + escape(figNum) : ""}</span>` +
+      (title ? `<span class="kc-figtitle">${escape(title)}</span>` : "") +
+      `</div>`;
+
+    const captionEl = caption
+      ? `<p class="kc-caption">${inline(escape(caption))}</p>`
+      : "";
+
+    return (
+      `<figure class="kami-chart">` +
+        figHeader +
+        `<svg class="kc-svg" viewBox="0 0 680 400" xmlns="http://www.w3.org/2000/svg" aria-label="${escape(title || "Donut chart")}">` +
+          `<rect class="kc-canvas" width="100%" height="100%"/>` +
+          sliceEls +
+          `<circle class="kc-donut-separator" cx="${CX}" cy="${CY}" r="${R}"/>` +
+          `<circle class="kc-donut-separator" cx="${CX}" cy="${CY}" r="${IR}"/>` +
+          `<circle class="kc-donut-hole" cx="${CX}" cy="${CY}" r="${IR - 1}"/>` +
+          `<text class="kc-donut-center-value" x="${CX}" y="${CY - 7}" text-anchor="middle">${escape(centerValue)}</text>` +
+          `<text class="kc-donut-center-label" x="${CX}" y="${CY + 14}" text-anchor="middle">${escape(centerLabelTxt)}</text>` +
+          `<line class="kc-donut-legend-divider" x1="460" y1="${legendTopY}" x2="460" y2="${legendBotY}"/>` +
+          legendEls +
+        `</svg>` +
+        captionEl +
+      `</figure>`
+    );
+  }
+
+  /** Gantt chart · phases as horizontal bars over a shared time axis,
+   *  grouped by optional `section`. Replaces inline mermaid gantt blocks. */
+  function renderKamiGantt(data) {
+    const title = typeof data.title === "string" ? data.title.trim() : "";
+    const unit = typeof data.unit === "string" ? data.unit.trim() : "";
+    const focal = typeof data.focal === "string" ? data.focal.trim() : "";
+    const caption = typeof data.caption === "string" ? data.caption.trim() : "";
+    const figNum = typeof data.figNum === "string" || typeof data.figNum === "number"
+      ? String(data.figNum) : "";
+    const phasesRaw = Array.isArray(data.phases) ? data.phases : [];
+    const phases = [];
+    for (const p of phasesRaw) {
+      if (!p || typeof p !== "object") continue;
+      const label = typeof p.label === "string" ? p.label.trim() : "";
+      const section = typeof p.section === "string" ? p.section.trim() : "";
+      const start = Number(p.start);
+      const end = Number(p.end);
+      if (!label || !isFinite(start) || !isFinite(end) || end <= start) continue;
+      phases.push({ label, section, start, end });
+      if (phases.length >= 10) break;
+    }
+    if (phases.length < 2) {
+      return `<div class="kami-chart-error" data-err="too-few-phases"></div>`;
+    }
+
+    // Group by section preserving order of first appearance.
+    const sectionOrder = [];
+    const sectionMap = new Map();
+    phases.forEach((p) => {
+      const key = p.section || "";
+      if (!sectionMap.has(key)) {
+        sectionOrder.push(key);
+        sectionMap.set(key, []);
+      }
+      sectionMap.get(key).push(p);
+    });
+    const hasSections = sectionOrder.some((s) => s !== "");
+
+    // Geometry · viewBox: variable width, fixed by row count.
+    // Left column for labels: 220 wide. Time axis: x∈[220, 920].
+    const X0 = 220, X1 = 920;
+    const rowH = 32;
+    const sectionGap = hasSections ? 8 : 0;
+    const sectionHeaderH = hasSections ? 22 : 0;
+    let cursorY = 80; // start below the time axis
+    const yByPhase = new Map();
+    const sectionBlocks = [];
+    sectionOrder.forEach((sec, sIdx) => {
+      const tasks = sectionMap.get(sec);
+      const headerY = cursorY;
+      tasks.forEach((p) => {
+        yByPhase.set(p, cursorY + sectionHeaderH);
+        cursorY += rowH;
+      });
+      cursorY += sectionGap;
+      sectionBlocks.push({ name: sec, headerY, taskCount: tasks.length });
+    });
+    cursorY += 20;
+    const totalH = cursorY;
+    const viewBoxW = 960;
+    const viewBoxH = totalH + (caption ? 0 : 12);
+
+    // Time scale · axis goes 0..maxEnd
+    const maxEnd = Math.max(...phases.map((p) => p.end), 0);
+    const niceMax = kcNiceMax(maxEnd);
+    const toX = (t) => X0 + (t / niceMax) * (X1 - X0);
+
+    // Time ticks · 5 evenly-spaced
+    const tickCount = 5;
+    const tickEls = [];
+    for (let i = 0; i <= tickCount; i++) {
+      const v = (niceMax / tickCount) * i;
+      const x = toX(v);
+      const ticked = `${kcFmt(v)}${unit ? " " + unit : ""}`;
+      tickEls.push(`<text class="kc-g-time-tick" x="${x}" y="64" text-anchor="middle">${escape(ticked)}</text>`);
+    }
+
+    // Section headers + task rows
+    let secCursor = 80;
+    const sectionEls = [];
+    const taskEls = [];
+    sectionBlocks.forEach((blk, sIdx) => {
+      const startY = secCursor + (hasSections ? sectionHeaderH : 0);
+      const blockH = blk.taskCount * rowH;
+      const endY = startY + blockH;
+      if (sIdx % 2 === 0) {
+        sectionEls.push(`<rect class="kc-g-section-bg" x="20" y="${startY}" width="${viewBoxW - 40}" height="${blockH}"/>`);
+      }
+      if (hasSections && blk.name) {
+        sectionEls.push(`<text class="kc-g-section-label" x="40" y="${secCursor + 16}">${escape(blk.name)}</text>`);
+      }
+      secCursor = endY + sectionGap;
+    });
+
+    phases.forEach((p) => {
+      const y = yByPhase.get(p);
+      const barY = y + 8;
+      const barX = toX(p.start);
+      const barW = toX(p.end) - barX;
+      const isFocal = focal && p.label === focal;
+      const barCls = isFocal ? "kc-g-bar kc-primary" : "kc-g-bar";
+      const labelCls = isFocal ? "kc-g-task-label kc-primary" : "kc-g-task-label";
+      const labelTxt = p.label.length > 24 ? p.label.slice(0, 23) + "…" : p.label;
+      // Show bar duration inside the bar if it fits, else outside.
+      const span = p.end - p.start;
+      const spanTxt = `${kcFmt(span)}${unit ? unit.slice(0, 1) : ""}`;
+      const spanX = barW > 36 ? barX + barW / 2 : barX + barW + 6;
+      const spanCls = barW > 36 ? "kc-g-bar-label" : "kc-g-bar-label kc-outside";
+      const spanAnchor = barW > 36 ? "middle" : "start";
+      taskEls.push(
+        `<text class="${labelCls}" x="200" y="${barY + 13}" text-anchor="end">${escape(labelTxt)}</text>` +
+        `<rect class="${barCls}" x="${barX}" y="${barY}" width="${Math.max(2, barW)}" height="16" rx="2"/>` +
+        `<text class="${spanCls}" x="${spanX}" y="${barY + 11}" text-anchor="${spanAnchor}">${escape(spanTxt)}</text>` +
+        `<line class="kc-g-row-rule" x1="20" y1="${y + rowH}" x2="${viewBoxW - 20}" y2="${y + rowH}"/>`,
+      );
+    });
+
+    const figHeader =
+      `<div class="kc-figheader">` +
+      `<span class="kc-fignum">Figure${figNum ? " " + escape(figNum) : ""}</span>` +
+      (title ? `<span class="kc-figtitle">${escape(title)}</span>` : "") +
+      `</div>`;
+
+    const captionEl = caption
+      ? `<p class="kc-caption">${inline(escape(caption))}</p>`
+      : "";
+
+    return (
+      `<figure class="kami-chart">` +
+        figHeader +
+        `<svg class="kc-svg" viewBox="0 0 ${viewBoxW} ${viewBoxH}" xmlns="http://www.w3.org/2000/svg" aria-label="${escape(title || "Gantt chart")}">` +
+          `<rect class="kc-canvas" width="100%" height="100%"/>` +
+          sectionEls.join("") +
+          `<line class="kc-g-time-axis" x1="${X0}" y1="72" x2="${X1}" y2="72"/>` +
+          tickEls.join("") +
+          taskEls.join("") +
+        `</svg>` +
+        captionEl +
+      `</figure>`
+    );
+  }
+
+  /** Tree (mindmap) · 1 root + 2–6 branches × 0–4 leaves per branch.
+   *  Replaces inline mermaid mindmap blocks. Layout: root centred on
+   *  top, branches spread evenly on a horizontal band, leaves drop
+   *  beneath each branch with even horizontal spacing. */
+  function renderKamiTree(data) {
+    const rootRaw = typeof data.root === "string" ? data.root.trim() : "";
+    const focal = typeof data.focal === "string" ? data.focal.trim() : "";
+    const caption = typeof data.caption === "string" ? data.caption.trim() : "";
+    const figNum = typeof data.figNum === "string" || typeof data.figNum === "number"
+      ? String(data.figNum) : "";
+    const branchesRaw = Array.isArray(data.branches) ? data.branches : [];
+    const branches = [];
+    for (const b of branchesRaw) {
+      if (!b || typeof b !== "object") continue;
+      const label = typeof b.label === "string" ? b.label.trim() : "";
+      if (!label) continue;
+      const leaves = Array.isArray(b.leaves) ? b.leaves
+        .map((l) => typeof l === "string" ? l.trim() : "")
+        .filter(Boolean)
+        .slice(0, 4) : [];
+      branches.push({ label, leaves });
+      if (branches.length >= 6) break;
+    }
+    if (!rootRaw || branches.length < 2) {
+      return `<div class="kami-chart-error" data-err="too-small-tree"></div>`;
+    }
+
+    // Layout · viewBox 960 × 460.
+    const VBW = 960, VBH = 460;
+    const ROOT_Y = 64, ROOT_H = 48, ROOT_W = 168;
+    const BRANCH_Y = 160, BRANCH_H = 48, BRANCH_W = 144;
+    const LEAF_Y = 290, LEAF_H = 48, LEAF_W = 128;
+    const N = branches.length;
+    const totalLeafCount = branches.reduce((s, b) => s + b.leaves.length, 0);
+    const hasLeaves = totalLeafCount > 0;
+    const SVG_H = hasLeaves ? 380 : 240;
+
+    // Spread branches evenly across plot width [80, 880]
+    const plotW = VBW - 160;
+    const branchX = (i) => Math.round(80 + (plotW / N) * i + (plotW / N) / 2);
+
+    // Root centre
+    const rootCX = VBW / 2;
+
+    const els = [];
+
+    // Connectors · root → each branch top
+    branches.forEach((b, i) => {
+      const isFocal = focal && b.label === focal;
+      const conCls = isFocal ? "kc-tree-connector-focal" : "kc-tree-connector";
+      const chevCls = isFocal ? "kc-tree-chevron-focal" : "kc-tree-chevron";
+      const bx = branchX(i);
+      const midY = (ROOT_Y + ROOT_H + BRANCH_Y) / 2;
+      // Path: from root bottom-center → drop to midY → horizontal to branch x → drop to branch top
+      els.push(
+        `<path class="${conCls}" d="M ${rootCX} ${ROOT_Y + ROOT_H} L ${rootCX} ${midY} L ${bx} ${midY} L ${bx} ${BRANCH_Y}"/>` +
+        `<path class="${chevCls}" d="M ${bx - 5} ${BRANCH_Y - 4} L ${bx} ${BRANCH_Y} L ${bx + 5} ${BRANCH_Y - 4}"/>`,
+      );
+    });
+
+    // Branch nodes
+    branches.forEach((b, i) => {
+      const isFocal = focal && b.label === focal;
+      const bx = branchX(i);
+      const rectCls = isFocal ? "kc-tree-branch-focal" : "kc-tree-branch";
+      const kickerCls = isFocal ? "kc-tree-kicker kc-tree-kicker-focal" : "kc-tree-kicker";
+      const kickerTxt = isFocal ? "FOCAL" : `BRANCH ${String(i + 1).padStart(2, "0")}`;
+      const labelTxt = b.label.length > 18 ? b.label.slice(0, 17) + "…" : b.label;
+      els.push(
+        `<rect class="${rectCls}" x="${bx - BRANCH_W / 2}" y="${BRANCH_Y}" width="${BRANCH_W}" height="${BRANCH_H}" rx="6"/>` +
+        `<text class="${kickerCls}" x="${bx - BRANCH_W / 2 + 16}" y="${BRANCH_Y + 16}">${escape(kickerTxt)}</text>` +
+        `<text class="kc-tree-text" x="${bx}" y="${BRANCH_Y + 34}" text-anchor="middle">${escape(labelTxt)}</text>`,
+      );
+    });
+
+    // Leaves per branch · spread under each branch
+    if (hasLeaves) {
+      branches.forEach((b, i) => {
+        if (b.leaves.length === 0) return;
+        const isFocalBranch = focal && b.label === focal;
+        const conCls = isFocalBranch ? "kc-tree-connector-focal" : "kc-tree-connector";
+        const chevCls = isFocalBranch ? "kc-tree-chevron-focal" : "kc-tree-chevron";
+        const leafCls = isFocalBranch ? "kc-tree-leaf-focal" : "kc-tree-leaf";
+        const bx = branchX(i);
+        const slotW = Math.min(LEAF_W + 8, (plotW / N) - 4);
+        const leafCount = b.leaves.length;
+        const totalSpan = slotW * leafCount;
+        const startX = bx - totalSpan / 2 + slotW / 2;
+        const midY = (BRANCH_Y + BRANCH_H + LEAF_Y) / 2;
+
+        b.leaves.forEach((leaf, k) => {
+          const lx = Math.round(startX + slotW * k);
+          // Connector from branch bottom → mid → leaf top
+          els.push(
+            `<path class="${conCls}" d="M ${bx} ${BRANCH_Y + BRANCH_H} L ${bx} ${midY} L ${lx} ${midY} L ${lx} ${LEAF_Y}"/>` +
+            `<path class="${chevCls}" d="M ${lx - 5} ${LEAF_Y - 4} L ${lx} ${LEAF_Y} L ${lx + 5} ${LEAF_Y - 4}"/>`,
+          );
+          const leafTxt = leaf.length > 16 ? leaf.slice(0, 15) + "…" : leaf;
+          // Leaf width based on slot
+          const lw = Math.min(LEAF_W, slotW - 8);
+          els.push(
+            `<rect class="${leafCls}" x="${lx - lw / 2}" y="${LEAF_Y}" width="${lw}" height="${LEAF_H}" rx="6"/>` +
+            `<text class="kc-tree-text" x="${lx}" y="${LEAF_Y + 28}" text-anchor="middle" style="font-size:10px">${escape(leafTxt)}</text>`,
+          );
+        });
+      });
+    }
+
+    // Root node (drawn last so it sits on top of any connectors at the top)
+    const rootLabel = rootRaw.length > 22 ? rootRaw.slice(0, 21) + "…" : rootRaw;
+    els.unshift(
+      `<rect class="kc-tree-root" x="${rootCX - ROOT_W / 2}" y="${ROOT_Y}" width="${ROOT_W}" height="${ROOT_H}" rx="6"/>` +
+      `<text class="kc-tree-kicker" x="${rootCX - ROOT_W / 2 + 16}" y="${ROOT_Y + 16}">ROOT</text>` +
+      `<text class="kc-tree-text" x="${rootCX}" y="${ROOT_Y + 34}" text-anchor="middle">${escape(rootLabel)}</text>`,
+    );
+
+    const figHeader =
+      `<div class="kc-figheader">` +
+      `<span class="kc-fignum">Figure${figNum ? " " + escape(figNum) : ""}</span>` +
+      (data.title ? `<span class="kc-figtitle">${escape(String(data.title).trim())}</span>` : "") +
+      `</div>`;
+
+    const captionEl = caption
+      ? `<p class="kc-caption">${inline(escape(caption))}</p>`
+      : "";
+
+    return (
+      `<figure class="kami-chart">` +
+        figHeader +
+        `<svg class="kc-svg" viewBox="0 0 ${VBW} ${SVG_H}" xmlns="http://www.w3.org/2000/svg" aria-label="${escape(data.title || "Tree")}">` +
+          `<rect class="kc-canvas" width="100%" height="100%"/>` +
+          els.join("") +
+        `</svg>` +
+        captionEl +
+      `</figure>`
+    );
+  }
+
+  /** Flowchart · two layout templates:
+   *   · linear-v  · 2–5 nodes top-to-bottom, single column with arrows
+   *   · y-decision · root (top) → 2 branches (left/right) → optional join.
+   *  Replaces inline mermaid flowchart blocks. */
+  function renderKamiFlowchart(data) {
+    const layout = typeof data.layout === "string" ? data.layout.trim() : "linear-v";
+    const focal = typeof data.focal === "string" ? data.focal.trim() : "";
+    const caption = typeof data.caption === "string" ? data.caption.trim() : "";
+    const figNum = typeof data.figNum === "string" || typeof data.figNum === "number"
+      ? String(data.figNum) : "";
+    const nodesRaw = Array.isArray(data.nodes) ? data.nodes : [];
+    const nodes = [];
+    for (const n of nodesRaw) {
+      if (!n || typeof n !== "object") continue;
+      const label = typeof n.label === "string" ? n.label.trim() : "";
+      if (!label) continue;
+      const kind = typeof n.kind === "string" ? n.kind.trim() : "step";
+      const hint = typeof n.hint === "string" ? n.hint.trim() : "";
+      nodes.push({ label, kind, hint });
+    }
+    if (nodes.length < 2) {
+      return `<div class="kami-chart-error" data-err="too-few-nodes"></div>`;
+    }
+
+    if (layout === "y-decision") {
+      return renderKamiFlowchartYDecision(nodes, focal, caption, figNum, data);
+    }
+    return renderKamiFlowchartLinearV(nodes, focal, caption, figNum, data);
+  }
+
+  /** Render a flowchart node (returns SVG string). Kind controls shape:
+   *  · start / end  · rounded pill, paper-soft fill
+   *  · decision     · diamond, accent border + paper-deep fill
+   *  · outcome      · square box, paper-deep fill, muted border (the
+   *                   "deferred" branch reads as receded)
+   *  · step (default) · square box, paper fill, ink border
+   *  Focal nodes get the accent treatment regardless of kind. */
+  function kcFlowNode(opts) {
+    const { x, y, w, h, kind, label, hint, isFocal } = opts;
+    const labelClipped = label.length > 18 ? label.slice(0, 17) + "…" : label;
+    const cx = x + w / 2;
+    const cy = y + h / 2;
+
+    if (kind === "decision") {
+      // Diamond · 6-point polygon
+      const points = [
+        `${cx},${y}`,
+        `${x + w},${cy - h * 0.18}`,
+        `${x + w},${cy + h * 0.18}`,
+        `${cx},${y + h}`,
+        `${x},${cy + h * 0.18}`,
+        `${x},${cy - h * 0.18}`,
+      ].join(" ");
+      const cls = isFocal ? "kc-fl-node-focal" : "kc-fl-node";
+      const kickerCls = isFocal ? "kc-fl-kicker kc-fl-kicker-focal" : "kc-fl-kicker";
+      return (
+        `<polygon class="${cls}" points="${points}"/>` +
+        `<text class="${kickerCls}" x="${cx}" y="${cy - 8}" text-anchor="middle">DECISION</text>` +
+        `<text class="kc-fl-text" x="${cx}" y="${cy + 6}" text-anchor="middle">${escape(labelClipped)}</text>` +
+        (hint ? `<text class="kc-fl-edge-label" x="${cx}" y="${cy + 18}" text-anchor="middle">${escape(hint.toUpperCase())}</text>` : "")
+      );
+    }
+
+    if (kind === "start" || kind === "end") {
+      // Pill · rounded rect, paper-soft
+      const cls = "kc-fl-node-pill";
+      const labelTxt = label.length > 16 ? label.slice(0, 15) + "…" : label;
+      return (
+        `<rect class="${cls}" x="${x}" y="${y}" width="${w}" height="${h}" rx="${h / 2}"/>` +
+        `<text class="kc-fl-text" x="${cx}" y="${cy + 4}" text-anchor="middle">${escape(labelTxt)}</text>`
+      );
+    }
+
+    if (kind === "outcome") {
+      // Square, faint
+      const cls = isFocal ? "kc-fl-node-focal" : "kc-fl-node-faint";
+      const kickerCls = isFocal ? "kc-fl-kicker kc-fl-kicker-focal" : "kc-fl-kicker";
+      const kicker = (opts.kicker || "OUTCOME").toUpperCase();
+      const textCls = isFocal ? "kc-fl-text" : "kc-fl-text kc-fl-text-faint";
+      return (
+        `<rect class="${cls}" x="${x}" y="${y}" width="${w}" height="${h}" rx="6"/>` +
+        `<text class="${kickerCls}" x="${x + 16}" y="${y + 16}">${escape(kicker)}</text>` +
+        `<text class="${textCls}" x="${cx}" y="${cy + 8}" text-anchor="middle">${escape(labelClipped)}</text>` +
+        (hint ? `<text class="kc-fl-kicker" x="${cx}" y="${y + h - 8}" text-anchor="middle">${escape(hint)}</text>` : "")
+      );
+    }
+
+    // step (default) · square box
+    const cls = isFocal ? "kc-fl-node-focal" : "kc-fl-node";
+    const kickerCls = isFocal ? "kc-fl-kicker kc-fl-kicker-focal" : "kc-fl-kicker";
+    const kicker = (opts.kicker || "STEP").toUpperCase();
+    return (
+      `<rect class="${cls}" x="${x}" y="${y}" width="${w}" height="${h}" rx="6"/>` +
+      `<text class="${kickerCls}" x="${x + 16}" y="${y + 16}">${escape(kicker)}</text>` +
+      `<text class="kc-fl-text" x="${cx}" y="${cy + 8}" text-anchor="middle">${escape(labelClipped)}</text>` +
+      (hint ? `<text class="kc-fl-kicker" x="${cx}" y="${y + h - 8}" text-anchor="middle">${escape(hint)}</text>` : "")
+    );
+  }
+
+  function renderKamiFlowchartLinearV(nodes, focal, caption, figNum, data) {
+    // Up to 5 nodes vertical · viewBox 600 × dynamic
+    const N = Math.min(nodes.length, 5);
+    const arr = nodes.slice(0, N);
+    const W = 600;
+    const nodeW = 220, nodeH = 60;
+    const gap = 36;
+    const startY = 30;
+    const totalH = startY + N * nodeH + (N - 1) * gap + 30;
+
+    const cx = W / 2;
+    const els = [];
+
+    arr.forEach((n, i) => {
+      const isFocal = focal && n.label === focal;
+      const y = startY + i * (nodeH + gap);
+      const x = cx - nodeW / 2;
+      // Connector from previous to this
+      if (i > 0) {
+        const prevY = startY + (i - 1) * (nodeH + gap) + nodeH;
+        const arrowCls = (focal && (arr[i - 1].label === focal || n.label === focal))
+          ? "kc-fl-arrow-focal" : "kc-fl-arrow";
+        const headCls = (focal && (arr[i - 1].label === focal || n.label === focal))
+          ? "kc-fl-arrowhead-focal" : "kc-fl-arrowhead";
+        els.push(
+          `<line class="${arrowCls}" x1="${cx}" y1="${prevY}" x2="${cx}" y2="${y}"/>` +
+          `<path class="${headCls}" d="M ${cx - 5} ${y - 6} L ${cx} ${y} L ${cx + 5} ${y - 6}"/>`,
+        );
+      }
+      els.push(kcFlowNode({
+        x, y, w: nodeW, h: nodeH,
+        kind: n.kind, label: n.label, hint: n.hint, isFocal,
+        kicker: n.kind === "start" ? "" : (n.kind === "end" ? "" : `STEP ${String(i + 1).padStart(2, "0")}`),
+      }));
+    });
+
+    const figHeader =
+      `<div class="kc-figheader">` +
+      `<span class="kc-fignum">Figure${figNum ? " " + escape(figNum) : ""}</span>` +
+      (data.title ? `<span class="kc-figtitle">${escape(String(data.title).trim())}</span>` : "") +
+      `</div>`;
+
+    const captionEl = caption
+      ? `<p class="kc-caption">${inline(escape(caption))}</p>`
+      : "";
+
+    return (
+      `<figure class="kami-chart">` +
+        figHeader +
+        `<svg class="kc-svg" viewBox="0 0 ${W} ${totalH}" xmlns="http://www.w3.org/2000/svg" aria-label="${escape(data.title || "Flowchart")}">` +
+          `<rect class="kc-canvas" width="100%" height="100%"/>` +
+          els.join("") +
+        `</svg>` +
+        captionEl +
+      `</figure>`
+    );
+  }
+
+  function renderKamiFlowchartYDecision(nodes, focal, caption, figNum, data) {
+    // y-decision · expects nodes in this canonical order:
+    //   [0] root (decision diamond)
+    //   [1] left branch outcome
+    //   [2] right branch outcome
+    //   [3] optional join / end
+    // Edge labels come from each branch node's `hint` field (e.g. "YES", "NO").
+    const arr = nodes.slice(0, 4);
+    if (arr.length < 3) {
+      return `<div class="kami-chart-error" data-err="y-decision needs 3-4 nodes"></div>`;
+    }
+    const hasJoin = arr.length === 4;
+    const W = 720;
+    const totalH = hasJoin ? 380 : 280;
+    const rootY = 30;
+    const branchY = 160;
+    const joinY = 280;
+    const rootW = 200, rootH = 80;
+    const branchW = 180, branchH = 70;
+    const joinW = 140, joinH = 50;
+
+    const cx = W / 2;
+    const leftCX = cx - 180;
+    const rightCX = cx + 180;
+
+    const root = arr[0];
+    const left = arr[1];
+    const right = arr[2];
+    const join = arr[3];
+
+    const isRootFocal = focal && root.label === focal;
+    const isLeftFocal = focal && left.label === focal;
+    const isRightFocal = focal && right.label === focal;
+    const isJoinFocal = hasJoin && focal && join.label === focal;
+
+    const els = [];
+
+    // Root → Left branch
+    const leftArrowCls = (isRootFocal || isLeftFocal) ? "kc-fl-arrow-focal" : "kc-fl-arrow";
+    const leftHeadCls  = (isRootFocal || isLeftFocal) ? "kc-fl-arrowhead-focal" : "kc-fl-arrowhead";
+    const leftPath = `M ${cx - 30} ${rootY + rootH - 10} L ${leftCX} ${rootY + rootH + 30} L ${leftCX} ${branchY}`;
+    els.push(`<path class="${leftArrowCls}" d="${leftPath}"/>`);
+    els.push(`<path class="${leftHeadCls}" d="M ${leftCX - 5} ${branchY - 6} L ${leftCX} ${branchY} L ${leftCX + 5} ${branchY - 6}"/>`);
+    // Edge label for left branch (from left.hint)
+    if (left.hint) {
+      const labelMidX = leftCX + 40;
+      const labelMidY = (rootY + rootH + branchY) / 2 - 4;
+      const labelTxt = left.hint.toUpperCase();
+      const labelW = labelTxt.length * 6 + 14;
+      const labelCls = isLeftFocal ? "kc-fl-edge-label kc-primary" : "kc-fl-edge-label";
+      els.push(
+        `<rect class="kc-fl-edge-label-bg" x="${labelMidX - labelW / 2}" y="${labelMidY - 8}" width="${labelW}" height="14" rx="2"/>` +
+        `<text class="${labelCls}" x="${labelMidX}" y="${labelMidY + 3}" text-anchor="middle">${escape(labelTxt)}</text>`,
+      );
+    }
+
+    // Root → Right branch
+    const rightArrowCls = (isRootFocal || isRightFocal) ? "kc-fl-arrow-focal" : "kc-fl-arrow";
+    const rightHeadCls  = (isRootFocal || isRightFocal) ? "kc-fl-arrowhead-focal" : "kc-fl-arrowhead";
+    const rightPath = `M ${cx + 30} ${rootY + rootH - 10} L ${rightCX} ${rootY + rootH + 30} L ${rightCX} ${branchY}`;
+    els.push(`<path class="${rightArrowCls}" d="${rightPath}"/>`);
+    els.push(`<path class="${rightHeadCls}" d="M ${rightCX - 5} ${branchY - 6} L ${rightCX} ${branchY} L ${rightCX + 5} ${branchY - 6}"/>`);
+    if (right.hint) {
+      const labelMidX = rightCX - 40;
+      const labelMidY = (rootY + rootH + branchY) / 2 - 4;
+      const labelTxt = right.hint.toUpperCase();
+      const labelW = labelTxt.length * 6 + 14;
+      const labelCls = isRightFocal ? "kc-fl-edge-label kc-primary" : "kc-fl-edge-label";
+      els.push(
+        `<rect class="kc-fl-edge-label-bg" x="${labelMidX - labelW / 2}" y="${labelMidY - 8}" width="${labelW}" height="14" rx="2"/>` +
+        `<text class="${labelCls}" x="${labelMidX}" y="${labelMidY + 3}" text-anchor="middle">${escape(labelTxt)}</text>`,
+      );
+    }
+
+    // Branches → join (if exists)
+    if (hasJoin) {
+      const joinArrowCls = (isJoinFocal) ? "kc-fl-arrow-focal" : "kc-fl-arrow";
+      const joinHeadCls  = (isJoinFocal) ? "kc-fl-arrowhead-focal" : "kc-fl-arrowhead";
+      const leftJoinPath = `M ${leftCX} ${branchY + branchH} L ${leftCX} ${joinY + joinH / 2 - 20} L ${cx - joinW / 2} ${joinY + joinH / 2 - 8}`;
+      const rightJoinPath = `M ${rightCX} ${branchY + branchH} L ${rightCX} ${joinY + joinH / 2 - 20} L ${cx + joinW / 2} ${joinY + joinH / 2 - 8}`;
+      els.push(`<path class="${joinArrowCls}" d="${leftJoinPath}"/>`);
+      els.push(`<path class="${joinHeadCls}" d="M ${cx - joinW / 2 - 5} ${joinY + joinH / 2 - 14} L ${cx - joinW / 2} ${joinY + joinH / 2 - 8} L ${cx - joinW / 2 - 5} ${joinY + joinH / 2 - 2}"/>`);
+      els.push(`<path class="${joinArrowCls}" d="${rightJoinPath}"/>`);
+      els.push(`<path class="${joinHeadCls}" d="M ${cx + joinW / 2 + 5} ${joinY + joinH / 2 - 14} L ${cx + joinW / 2} ${joinY + joinH / 2 - 8} L ${cx + joinW / 2 + 5} ${joinY + joinH / 2 - 2}"/>`);
+    }
+
+    // Root node (decision diamond by default; respect explicit kind)
+    const rootKind = root.kind || "decision";
+    els.push(kcFlowNode({
+      x: cx - rootW / 2, y: rootY, w: rootW, h: rootH,
+      kind: rootKind, label: root.label, hint: root.hint, isFocal: isRootFocal,
+    }));
+
+    // Left branch (outcome by default)
+    els.push(kcFlowNode({
+      x: leftCX - branchW / 2, y: branchY, w: branchW, h: branchH,
+      kind: left.kind || "outcome", label: left.label, hint: left.hint, isFocal: isLeftFocal,
+      kicker: "OUTCOME A",
+    }));
+
+    // Right branch (outcome by default)
+    els.push(kcFlowNode({
+      x: rightCX - branchW / 2, y: branchY, w: branchW, h: branchH,
+      kind: right.kind || "outcome", label: right.label, hint: right.hint, isFocal: isRightFocal,
+      kicker: "OUTCOME B",
+    }));
+
+    // Join (end pill by default)
+    if (hasJoin) {
+      els.push(kcFlowNode({
+        x: cx - joinW / 2, y: joinY, w: joinW, h: joinH,
+        kind: join.kind || "end", label: join.label, hint: join.hint, isFocal: isJoinFocal,
+      }));
+    }
+
+    const figHeader =
+      `<div class="kc-figheader">` +
+      `<span class="kc-fignum">Figure${figNum ? " " + escape(figNum) : ""}</span>` +
+      (data.title ? `<span class="kc-figtitle">${escape(String(data.title).trim())}</span>` : "") +
+      `</div>`;
+
+    const captionEl = caption
+      ? `<p class="kc-caption">${inline(escape(caption))}</p>`
+      : "";
+
+    return (
+      `<figure class="kami-chart">` +
+        figHeader +
+        `<svg class="kc-svg" viewBox="0 0 ${W} ${totalH}" xmlns="http://www.w3.org/2000/svg" aria-label="${escape(data.title || "Flowchart")}">` +
+          `<rect class="kc-canvas" width="100%" height="100%"/>` +
+          els.join("") +
+        `</svg>` +
+        captionEl +
+      `</figure>`
+    );
+  }
+
+  /** Swimlane · 2–4 horizontal lanes × 4–10 steps. Each step assigned
+   *  to a lane via `laneIdx`; rendered left-to-right in step order.
+   *  Connectors elbow when consecutive steps change lanes. Replaces
+   *  inline mermaid `sequenceDiagram` AND `journey`. */
+  function renderKamiSwimlane(data) {
+    const title = typeof data.title === "string" ? data.title.trim() : "";
+    const focal = typeof data.focal === "string" ? data.focal.trim() : "";
+    const focalLane = typeof data.focalLane === "string" ? data.focalLane.trim() : "";
+    const caption = typeof data.caption === "string" ? data.caption.trim() : "";
+    const figNum = typeof data.figNum === "string" || typeof data.figNum === "number"
+      ? String(data.figNum) : "";
+    const lanesRaw = Array.isArray(data.lanes) ? data.lanes : [];
+    const lanes = lanesRaw
+      .map((l) => typeof l === "string" ? l.trim() : "")
+      .filter(Boolean)
+      .slice(0, 4);
+    if (lanes.length < 2) {
+      return `<div class="kami-chart-error" data-err="too-few-lanes"></div>`;
+    }
+    const stepsRaw = Array.isArray(data.steps) ? data.steps : [];
+    const steps = [];
+    for (const s of stepsRaw) {
+      if (!s || typeof s !== "object") continue;
+      const label = typeof s.label === "string" ? s.label.trim() : "";
+      const laneIdx = Number.isInteger(s.laneIdx) ? s.laneIdx : -1;
+      if (!label || laneIdx < 0 || laneIdx >= lanes.length) continue;
+      const kicker = typeof s.kicker === "string" ? s.kicker.trim() : "";
+      const score = Number.isInteger(s.score) ? Math.max(1, Math.min(5, s.score)) : 0;
+      steps.push({ label, laneIdx, kicker, score });
+      if (steps.length >= 10) break;
+    }
+    if (steps.length < 3) {
+      return `<div class="kami-chart-error" data-err="too-few-steps"></div>`;
+    }
+
+    // Geometry · viewBox 960 × variable. Lane label column on left (64w).
+    const VBW = 960;
+    const LANE_COL_W = 72;
+    const LANE_H = 110;
+    const PAD_TOP = 40;
+    const PAD_BOTTOM = 30;
+    const NLanes = lanes.length;
+    const totalH = PAD_TOP + NLanes * LANE_H + PAD_BOTTOM;
+    const PLOT_X0 = LANE_COL_W + 16, PLOT_X1 = VBW - 24;
+    const PLOT_W = PLOT_X1 - PLOT_X0;
+    const N = steps.length;
+    const stepGap = PLOT_W / N;
+    const NODE_W = Math.min(140, Math.round(stepGap * 0.78));
+    const NODE_H = 48;
+
+    // Lane backgrounds + labels
+    const laneEls = [];
+    for (let i = 0; i < NLanes; i++) {
+      const y = PAD_TOP + i * LANE_H;
+      const isFocalLane = focalLane && lanes[i] === focalLane;
+      const bgCls = isFocalLane ? "kc-sw-lane-bg-focal" : (i % 2 === 0 ? "kc-sw-lane-bg" : "kc-sw-lane-bg-alt");
+      laneEls.push(`<rect class="${bgCls}" x="${LANE_COL_W}" y="${y}" width="${VBW - LANE_COL_W}" height="${LANE_H}"/>`);
+      if (i > 0) {
+        const dCls = isFocalLane || (focalLane && lanes[i - 1] === focalLane)
+          ? "kc-sw-lane-divider-focal" : "kc-sw-lane-divider";
+        laneEls.push(`<line class="${dCls}" x1="${LANE_COL_W}" y1="${y}" x2="${VBW}" y2="${y}"/>`);
+      }
+      const labelCls = isFocalLane ? "kc-sw-lane-label kc-sw-lane-label-focal" : "kc-sw-lane-label";
+      const laneTxt = lanes[i].length > 14 ? lanes[i].slice(0, 13) + "…" : lanes[i];
+      laneEls.push(`<text class="${labelCls}" x="${LANE_COL_W / 2}" y="${y + LANE_H / 2 + 4}" text-anchor="middle" transform="rotate(-90 ${LANE_COL_W / 2} ${y + LANE_H / 2})">${escape(laneTxt.toUpperCase())}</text>`);
+    }
+    // Label column frame
+    laneEls.unshift(`<rect class="kc-sw-label-col" x="0" y="${PAD_TOP}" width="${LANE_COL_W}" height="${NLanes * LANE_H}"/>`);
+
+    // Step positions
+    const stepGeo = steps.map((s, i) => {
+      const cx = Math.round(PLOT_X0 + stepGap * i + stepGap / 2);
+      const cy = PAD_TOP + s.laneIdx * LANE_H + LANE_H / 2;
+      return { cx, cy, x: cx - NODE_W / 2, y: cy - NODE_H / 2, ...s };
+    });
+
+    // Connectors (drawn first so nodes overlap them)
+    const connectorEls = [];
+    for (let i = 0; i < stepGeo.length - 1; i++) {
+      const a = stepGeo[i];
+      const b = stepGeo[i + 1];
+      const isFocal = focal && (a.label === focal || b.label === focal);
+      const arrowCls = isFocal ? "kc-sw-arrow-focal" : "kc-sw-arrow";
+      const headCls = isFocal ? "kc-sw-arrowhead-focal" : "kc-sw-arrowhead";
+      if (a.laneIdx === b.laneIdx) {
+        // Horizontal · from right edge of a to left edge of b
+        const x1 = a.x + NODE_W;
+        const x2 = b.x;
+        const y = a.cy;
+        connectorEls.push(`<line class="${arrowCls}" x1="${x1}" y1="${y}" x2="${x2}" y2="${y}"/>`);
+        connectorEls.push(`<path class="${headCls}" d="M ${x2 - 5} ${y - 4} L ${x2} ${y} L ${x2 - 5} ${y + 4}"/>`);
+      } else {
+        // Elbow · right edge of a → down/up to b's lane → left edge of b
+        const x1 = a.x + NODE_W;
+        const x2 = b.x;
+        const midX = Math.round((x1 + x2) / 2);
+        const path = `M ${x1} ${a.cy} L ${midX} ${a.cy} L ${midX} ${b.cy} L ${x2} ${b.cy}`;
+        connectorEls.push(`<path class="${arrowCls}" d="${path}"/>`);
+        connectorEls.push(`<path class="${headCls}" d="M ${x2 - 5} ${b.cy - 4} L ${x2} ${b.cy} L ${x2 - 5} ${b.cy + 4}"/>`);
+      }
+    }
+
+    // Step nodes (reuse kc-fl-* classes for consistency)
+    const nodeEls = stepGeo.map((s) => {
+      const isFocal = focal && s.label === focal;
+      const cls = isFocal ? "kc-fl-node-focal" : "kc-fl-node";
+      const kickerCls = isFocal ? "kc-fl-kicker kc-fl-kicker-focal" : "kc-fl-kicker";
+      const kicker = s.kicker || `STEP ${String(stepGeo.indexOf(s) + 1).padStart(2, "0")}`;
+      const labelTxt = s.label.length > 18 ? s.label.slice(0, 17) + "…" : s.label;
+      // Optional journey score · 5 dots (filled up to score)
+      const scoreEls = s.score > 0
+        ? [1, 2, 3, 4, 5].map((n) =>
+            `<circle class="${n <= s.score ? "kc-sw-score-dot" : "kc-sw-score-dot-faint"}" cx="${s.cx - 16 + (n - 1) * 8}" cy="${s.y + NODE_H + 12}" r="2.4"/>`,
+          ).join("")
+        : "";
+      return (
+        `<rect class="${cls}" x="${s.x}" y="${s.y}" width="${NODE_W}" height="${NODE_H}" rx="6"/>` +
+        `<text class="${kickerCls}" x="${s.x + 16}" y="${s.y + 16}">${escape(kicker.toUpperCase())}</text>` +
+        `<text class="kc-fl-text" x="${s.cx}" y="${s.cy + 8}" text-anchor="middle">${escape(labelTxt)}</text>` +
+        scoreEls
+      );
+    }).join("");
+
+    const figHeader =
+      `<div class="kc-figheader">` +
+      `<span class="kc-fignum">Figure${figNum ? " " + escape(figNum) : ""}</span>` +
+      (title ? `<span class="kc-figtitle">${escape(title)}</span>` : "") +
+      `</div>`;
+
+    const captionEl = caption
+      ? `<p class="kc-caption">${inline(escape(caption))}</p>`
+      : "";
+
+    return (
+      `<figure class="kami-chart">` +
+        figHeader +
+        `<svg class="kc-svg" viewBox="0 0 ${VBW} ${totalH}" xmlns="http://www.w3.org/2000/svg" aria-label="${escape(title || "Swimlane")}">` +
+          `<rect class="kc-canvas" width="100%" height="100%"/>` +
+          laneEls.join("") +
+          connectorEls.join("") +
+          nodeEls +
+        `</svg>` +
+        captionEl +
+      `</figure>`
+    );
+  }
+
+  /** State machine · 2–6 states in a linear row · forward arrows
+   *  auto-drawn between consecutive states (labels from `forwardLabels`
+   *  array, indexed by source position) · optional dashed back-arcs
+   *  drawn above for cycles. Replaces inline mermaid `stateDiagram-v2`. */
+  function renderKamiStateMachine(data) {
+    const title = typeof data.title === "string" ? data.title.trim() : "";
+    const focal = typeof data.focal === "string" ? data.focal.trim() : "";
+    const caption = typeof data.caption === "string" ? data.caption.trim() : "";
+    const figNum = typeof data.figNum === "string" || typeof data.figNum === "number"
+      ? String(data.figNum) : "";
+    const statesRaw = Array.isArray(data.states) ? data.states : [];
+    const states = [];
+    for (const st of statesRaw) {
+      if (!st || typeof st !== "object") continue;
+      const label = typeof st.label === "string" ? st.label.trim() : "";
+      if (!label) continue;
+      const hint = typeof st.hint === "string" ? st.hint.trim() : "";
+      const terminal = !!st.terminal;
+      states.push({ label, hint, terminal });
+      if (states.length >= 6) break;
+    }
+    if (states.length < 2) {
+      return `<div class="kami-chart-error" data-err="too-few-states"></div>`;
+    }
+    const forwardLabels = Array.isArray(data.forwardLabels) ? data.forwardLabels : [];
+    const backsRaw = Array.isArray(data.backTransitions) ? data.backTransitions : [];
+    const backs = [];
+    for (const b of backsRaw) {
+      if (!b || typeof b !== "object") continue;
+      const fromIdx = Number.isInteger(b.fromIdx) ? b.fromIdx : -1;
+      const toIdx = Number.isInteger(b.toIdx) ? b.toIdx : -1;
+      if (fromIdx < 0 || toIdx < 0 || fromIdx >= states.length || toIdx >= states.length) continue;
+      if (fromIdx <= toIdx) continue; // back arcs must go right-to-left
+      const label = typeof b.label === "string" ? b.label.trim() : "";
+      backs.push({ fromIdx, toIdx, label });
+      if (backs.length >= 4) break;
+    }
+    const showStart = !!data.showStart;
+    const showEnd = !!data.showEnd;
+
+    // Geometry · viewBox 960 × 460, states arranged left-to-right.
+    const VBW = 960, VBH = 380;
+    const STATE_W = 140, STATE_H = 64;
+    const ROW_Y = backs.length > 0 ? 184 : 140;
+    const N = states.length;
+
+    // Compute total horizontal space (including optional start dot + end marker)
+    const startSpace = showStart ? 60 : 0;
+    const endSpace = showEnd ? 60 : 0;
+    const innerSpace = VBW - 48 - startSpace - endSpace;
+    const slotW = innerSpace / N;
+    const stateX = (i) => 24 + startSpace + slotW * i + (slotW - STATE_W) / 2;
+
+    const stateEls = [];
+    const arrowEls = [];
+
+    // States
+    states.forEach((s, i) => {
+      const x = stateX(i);
+      const y = ROW_Y;
+      const isFocal = focal && s.label === focal;
+      const cls = s.terminal
+        ? "kc-sm-state-terminal"
+        : (isFocal ? "kc-sm-state-focal" : "kc-sm-state");
+      const kickerCls = isFocal ? "kc-sm-kicker kc-sm-kicker-focal" : "kc-sm-kicker";
+      const kickerTxt = s.terminal ? "TERMINAL" : (isFocal ? "FOCAL" : "STATE");
+      const labelTxt = s.label.length > 16 ? s.label.slice(0, 15) + "…" : s.label;
+      const hintTxt = s.hint && s.hint.length > 14 ? s.hint.slice(0, 13) + "…" : s.hint;
+      stateEls.push(
+        `<rect class="${cls}" x="${x}" y="${y}" width="${STATE_W}" height="${STATE_H}" rx="6"/>` +
+        `<text class="${kickerCls}" x="${x + 16}" y="${y + 16}">${escape(kickerTxt)}</text>` +
+        `<text class="kc-sm-state-label" x="${x + STATE_W / 2}" y="${y + 36}" text-anchor="middle">${escape(labelTxt)}</text>` +
+        (hintTxt ? `<text class="kc-sm-state-hint" x="${x + STATE_W / 2}" y="${y + 52}" text-anchor="middle">${escape(hintTxt)}</text>` : ""),
+      );
+    });
+
+    // Forward arrows (consecutive)
+    for (let i = 0; i < N - 1; i++) {
+      const x1 = stateX(i) + STATE_W;
+      const x2 = stateX(i + 1);
+      const y = ROW_Y + STATE_H / 2;
+      const a = states[i], b = states[i + 1];
+      const isFocal = focal && (a.label === focal || b.label === focal);
+      const arrowCls = isFocal ? "kc-sm-forward-focal" : "kc-sm-forward";
+      const headCls = isFocal ? "kc-sm-arrowhead-focal" : "kc-sm-arrowhead";
+      arrowEls.push(`<line class="${arrowCls}" x1="${x1}" y1="${y}" x2="${x2}" y2="${y}"/>`);
+      arrowEls.push(`<path class="${headCls}" d="M ${x2 - 6} ${y - 4} L ${x2} ${y} L ${x2 - 6} ${y + 4}"/>`);
+      const lbl = forwardLabels[i] && typeof forwardLabels[i] === "string" ? forwardLabels[i].trim() : "";
+      if (lbl) {
+        const midX = (x1 + x2) / 2;
+        const lblTxt = lbl.toUpperCase();
+        const w = lblTxt.length * 5 + 12;
+        const labelCls = isFocal ? "kc-sm-transition-label kc-primary" : "kc-sm-transition-label";
+        arrowEls.push(
+          `<rect class="kc-sm-transition-label-bg" x="${midX - w / 2}" y="${y - 6}" width="${w}" height="12" rx="2"/>` +
+          `<text class="${labelCls}" x="${midX}" y="${y + 3}" text-anchor="middle">${escape(lblTxt)}</text>`,
+        );
+      }
+    }
+
+    // Back-arcs (dashed)
+    backs.forEach((bk) => {
+      const fromX = stateX(bk.fromIdx) + STATE_W / 2;
+      const toX = stateX(bk.toIdx) + STATE_W / 2;
+      const startX = fromX - STATE_W / 4;
+      const endX = toX + STATE_W / 4;
+      const apexY = ROW_Y - 56;
+      const path = `M ${startX} ${ROW_Y} Q ${(startX + endX) / 2} ${apexY} ${endX} ${ROW_Y}`;
+      arrowEls.push(`<path class="kc-sm-back" d="${path}"/>`);
+      arrowEls.push(`<path class="kc-sm-arrowhead" d="M ${endX + 6} ${ROW_Y - 5} L ${endX} ${ROW_Y} L ${endX + 6} ${ROW_Y + 5}"/>`);
+      if (bk.label) {
+        const midX = (startX + endX) / 2;
+        const lblTxt = bk.label.toUpperCase();
+        const w = lblTxt.length * 5 + 14;
+        arrowEls.push(
+          `<rect class="kc-sm-transition-label-bg" x="${midX - w / 2}" y="${apexY + 8}" width="${w}" height="12" rx="2"/>` +
+          `<text class="kc-sm-transition-label" x="${midX}" y="${apexY + 17}" text-anchor="middle">${escape(lblTxt)}</text>`,
+        );
+      }
+    });
+
+    // Start dot
+    if (showStart) {
+      const cx = 24 + startSpace - 30;
+      const cy = ROW_Y + STATE_H / 2;
+      const firstX = stateX(0);
+      arrowEls.push(`<circle class="kc-sm-marker-start" cx="${cx}" cy="${cy}" r="6"/>`);
+      arrowEls.push(`<line class="kc-sm-forward" x1="${cx + 6}" y1="${cy}" x2="${firstX}" y2="${cy}"/>`);
+      arrowEls.push(`<path class="kc-sm-arrowhead" d="M ${firstX - 6} ${cy - 4} L ${firstX} ${cy} L ${firstX - 6} ${cy + 4}"/>`);
+    }
+
+    // End marker
+    if (showEnd) {
+      const cx = VBW - 24 - endSpace + 30;
+      const cy = ROW_Y + STATE_H / 2;
+      const lastX = stateX(N - 1) + STATE_W;
+      arrowEls.push(`<line class="kc-sm-forward" x1="${lastX}" y1="${cy}" x2="${cx - 10}" y2="${cy}"/>`);
+      arrowEls.push(`<path class="kc-sm-arrowhead" d="M ${cx - 16} ${cy - 4} L ${cx - 10} ${cy} L ${cx - 16} ${cy + 4}"/>`);
+      arrowEls.push(`<circle class="kc-sm-marker-end-outer" cx="${cx}" cy="${cy}" r="8"/>`);
+      arrowEls.push(`<circle class="kc-sm-marker-end-inner" cx="${cx}" cy="${cy}" r="4"/>`);
+    }
+
+    const figHeader =
+      `<div class="kc-figheader">` +
+      `<span class="kc-fignum">Figure${figNum ? " " + escape(figNum) : ""}</span>` +
+      (title ? `<span class="kc-figtitle">${escape(title)}</span>` : "") +
+      `</div>`;
+
+    const captionEl = caption
+      ? `<p class="kc-caption">${inline(escape(caption))}</p>`
+      : "";
+
+    return (
+      `<figure class="kami-chart">` +
+        figHeader +
+        `<svg class="kc-svg" viewBox="0 0 ${VBW} ${VBH}" xmlns="http://www.w3.org/2000/svg" aria-label="${escape(title || "State machine")}">` +
+          `<rect class="kc-canvas" width="100%" height="100%"/>` +
+          arrowEls.join("") +
+          stateEls.join("") +
+        `</svg>` +
+        captionEl +
+      `</figure>`
+    );
+  }
+
   /** Parse a fenced ```path-comparison block (strict JSON) and emit
    *  the side-by-side binary comparison: 2 columns, each with a mono
    *  verdict tag, serif path name, and bullet characteristics. Stance
@@ -3520,17 +5224,15 @@
           }
           const body = lines.slice(start, end).join("\n");
           const idx = placeholders.length;
-          // Mermaid acceptance · the canonical fence is ```mermaid,
-          // but writers regularly emit ```quadrantChart /
-          // ```xychart-beta / ```flowchart / ```sequenceDiagram /
-          // etc. directly (the chart-type IS the lang in their head).
-          // Accept those bare type tags as mermaid too — otherwise
-          // they fall through to a plain `<pre class="codeblock">`
-          // and ship to the user as raw mermaid source. Catalog
-          // matches mermaid 10's diagram registry. The fenced body's
-          // first non-empty line is the actual mermaid type, so
-          // sanitizeMermaid handles the rest as before.
-          const MERMAID_TYPES = new Set([
+          // Legacy mermaid blocks · all chart types migrated to the
+          // `kami-chart` pipeline in v0.16. Old briefs in the DB still
+          // carry ```mermaid (or bare ```quadrantChart / ```flowchart /
+          // ```sequenceDiagram / etc.) — render those as a clear
+          // "legacy" placeholder so the section stays readable instead
+          // of leaking raw mermaid source through the codeblock pre.
+          // Catalog matches the mermaid 10 diagram registry the writer
+          // used to emit.
+          const LEGACY_MERMAID_TYPES = new Set([
             "mermaid",
             "quadrantchart", "xychart", "xychart-beta",
             "flowchart", "graph",
@@ -3546,24 +5248,22 @@
             "gitgraph",
             "requirementdiagram", "requirement",
             "c4context", "c4container", "c4component", "c4dynamic",
-            // newer / -beta types in mermaid 10+
             "sankey-beta", "sankey",
             "block-beta", "block",
             "info",
             "packet-beta", "packet",
             "architecture-beta", "architecture",
           ]);
-          if (MERMAID_TYPES.has(lang)) {
-            // For non-"mermaid" lang tags, the fence didn't include
-            // the type-as-first-line — prepend the ORIGINAL-cased
-            // lang token so mermaid's case-sensitive parser accepts
-            // it (e.g. "quadrantChart", not "quadrantchart").
-            const mermaidBody = (lang === "mermaid")
-              ? body
-              : `${langRaw}\n${body}`;
-            placeholders.push(`<pre class="mermaid">${escape(sanitizeMermaid(mermaidBody))}</pre>`);
+          if (LEGACY_MERMAID_TYPES.has(lang)) {
+            placeholders.push(
+              `<div class="kami-chart-error" data-err="legacy-mermaid">` +
+              `// legacy mermaid block · re-generate this brief to render in the current pipeline` +
+              `</div>`,
+            );
           } else if (lang === "metric-strip") {
             placeholders.push(renderMetricStrip(body));
+          } else if (lang === "kami-chart") {
+            placeholders.push(renderKamiChart(body));
           } else if (lang === "path-comparison") {
             placeholders.push(renderPathComparison(body));
           } else if (lang === "views-compared") {
@@ -4862,1370 +6562,6 @@
     //    to missing sections (a report may skip Frame Shift, etc.).
     decorateReport(document.querySelector("[data-report-body]"));
 
-    // Render any mermaid blocks. Wrapped in try/catch — a syntax error in
-    // one diagram should not blank the whole report. The mermaid script is
-    // deferred, so it may not be available the instant `load()` resolves;
-    // poll up to 5s before giving up and leaving the raw fenced text in
-    // place as a graceful fallback.
-    if (document.querySelector(".mermaid")) {
-      const mermaid = await new Promise((resolve) => {
-        if (window.mermaid) return resolve(window.mermaid);
-        let elapsed = 0;
-        const t = setInterval(() => {
-          if (window.mermaid) { clearInterval(t); resolve(window.mermaid); }
-          else if ((elapsed += 50) > 5000) { clearInterval(t); resolve(null); }
-        }, 50);
-      });
-      if (mermaid) {
-        try {
-          // Pick mermaid theme variables based on the active spine.
-          // Each spine uses neutral quadrant fills (no colored tints —
-          // all four quadrants share one fill for a clean Gartner / BCG
-          // matrix look) and the spine's accent for plotted points.
-          const spineKey = (brief.spine && SPINES.has(brief.spine)) ? brief.spine : "boardroom-dark";
-          // Per-spine palette · `vars` carries every colour the
-          // mermaid theme block touches. Extended with `accent` /
-          // `accentSoft` (single accent for monochrome mindmap +
-          // gantt bars + sequence notes), `accentText` (legible text
-          // on accent fills), and `linkText` (faint text on link
-          // backgrounds) so flowchart / mindmap / gantt / sequence /
-          // state diagrams pick up spine-coherent colours instead of
-          // mermaid's rainbow defaults.
-          // Per-spine mermaid theme · every value here is taken from
-          // the spine's :root tokens (boardroom-dark.css / a16z-thesis.css /
-          // etc.) so charts feel like a native exhibit of the spine
-          // rather than a foreign visualization with its own palette.
-          // Audit cadence: when a spine adds / renames a token, mirror
-          // it here in the same change. Drift between spine tokens and
-          // these `vars` is what makes charts read as "off-brand".
-          //
-          // Mapping rules (consistent across spines):
-          //   background  → spine main bg                    (so chart canvas blends with frame)
-          //   quadrantFill→ spine paper-soft / panel / bg-soft (slight contrast for inner zones)
-          //   pointFill   → primary brand/accent              (data dots = load-bearing)
-          //   titleFill   → --ink / --text                    (max-contrast text)
-          //   axisText    → --ink-faint / --text-faint        (subdued axis labels)
-          //   border      → --rule (NOT rule-strong)          (matches body hairlines)
-          //   inner       → --rule-soft                       (lightest separator)
-          //   accent      → spine accent token                (general fill)
-          //   accentSoft  → spine pale variant                (washed accent for backgrounds)
-          //   palette     → 4-step monochrome ramp from accent (cycled across pie/journey/git slices)
-          const themes = {
-            "boardroom-dark": {
-              // theme: "base" + darkMode flag, NOT "dark". Mermaid 10's
-              // built-in "dark" preset injects a violet-tinged primary
-              // colour that bleeds into quadrant1Fill / quadrantPointFill
-              // and ALSO overrides our themeVariables in some code paths
-              // (the "Platform Strategy chart on boardroom-dark renders
-              // purple" bug). "base" uses minimal defaults so our
-              // explicit `vars` below are the only colour source.
-              base: "base",
-              darkMode: true,
-              // Frame bg: pre.mermaid uses --panel-2 (#1A1A18). Match it
-              // for the canvas so the SVG doesn't sit "inside" a darker
-              // tray. Quadrant inner boxes go to --bg (#0A0A0A) so the
-              // four boxes read as cut-outs against the canvas.
-              vars: {
-                background: "#1A1A18",   // --panel-2 (matches pre.mermaid frame)
-                quadrantFill: "#0A0A0A", // --bg (cut-out zones inside chart)
-                quadrantText: "#8E8B83", // --text-soft
-                pointFill: "#C9A46B",    // --em / --lime · load-bearing gold for data
-                pointText: "#C8C5BE",    // --text
-                titleFill: "#C8C5BE",    // --text
-                axisText: "#5C5A4D",     // --text-faint (was too bright before)
-                border: "#3A3934",       // --line-bright
-                inner: "#21211E",        // --panel-3
-                accent: "#C9A46B",       // --em (load-bearing gold)
-                accentSoft: "#5C4422",   // --lime-dim
-                accentText: "#0A0A0A",   // --bg for contrast on accent fills
-              },
-              // Gold for the lead, then beige-neutrals — multi-bar
-              // charts get one bold lead + 3 supporting tones rather
-              // than 4 competing golds.
-              palette: ["#C9A46B", "#B6B0A2", "#8E8B83", "#5C5A52"],
-              fontFamily: '"Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif',
-            },
-            "a16z-thesis": {
-              base: "default",
-              vars: {
-                background: "#F7F3E8",   // --bg / --paper
-                quadrantFill: "#F2EAD8", // soft panel tone (between paper and rule-soft)
-                quadrantText: "#57503F", // --ink-mid
-                pointFill: "#8B6A2E",    // --gold (precise spine value, was #876C2A)
-                pointText: "#14110C",    // --ink
-                titleFill: "#14110C",    // --ink
-                axisText: "#847B65",     // --ink-faint
-                border: "#DCD3BD",       // --rule (not --rule-strong)
-                inner: "#E5DECC",        // --rule-soft
-                accent: "#8B6A2E",       // --gold
-                accentSoft: "#C4A865",   // --gold-pale
-                accentText: "#FFFFFF",
-              },
-              palette: ["#8B6A2E", "#A8843A", "#C4A865", "#E2CFA0"],
-              fontFamily: '"Inter", "Helvetica Neue", -apple-system, system-ui, sans-serif',
-            },
-            "anthropic-essay": {
-              base: "default",
-              vars: {
-                background: "#F4F0E8",   // --paper (was --surface, slight off)
-                quadrantFill: "#EDE6D6", // --paper-soft
-                quadrantText: "#6B6359", // --ink-mid
-                pointFill: "#A85A41",    // --clay-deep · stronger contrast for data
-                pointText: "#1A1814",    // --ink (was --ink-soft, low contrast)
-                titleFill: "#1A1814",    // --ink
-                axisText: "#978C7E",     // --ink-faint
-                border: "#DDD5C8",       // --rule
-                inner: "#E8E1D2",        // --rule-soft
-                accent: "#CC785C",       // --clay (spine's --accent resolves here, NOT clay-deep)
-                accentSoft: "#F2E0D5",   // --clay-pale
-                accentText: "#FFFFFF",
-              },
-              palette: ["#CC785C", "#A85A41", "#B65A3A", "#F2E0D5"],
-              fontFamily: '"Charter", "Source Serif Pro", "Iowan Old Style", Georgia, serif',
-            },
-            "gartner-note": {
-              base: "default",
-              vars: {
-                background: "#FFFFFF",   // --bg
-                quadrantFill: "#F5F7FA", // --bg-soft (was --bg-emphasis #FAFBFC)
-                quadrantText: "#455364", // --ink-soft
-                pointFill: "#0A4DA1",    // --brand
-                pointText: "#1A2332",    // --ink
-                titleFill: "#1A2332",    // --ink
-                axisText: "#6B7785",     // --ink-faint
-                border: "#DDE2E8",       // --rule (was --rule-strong, too heavy)
-                inner: "#E8ECF1",        // --rule-soft
-                accent: "#0A4DA1",       // --brand
-                accentSoft: "#E8F1FB",   // --brand-pale
-                accentText: "#FFFFFF",
-              },
-              palette: ["#0A4DA1", "#1A65BD", "#3F73B8", "#7AA0CF"],
-              fontFamily: '"Inter", "Helvetica Neue", Arial, sans-serif',
-            },
-            "mckinsey-deck": {
-              base: "default",
-              vars: {
-                background: "#FFFFFF",   // --bg
-                quadrantFill: "#F8FAFD", // soft panel (slightly tinted)
-                quadrantText: "#4A5870", // --ink-soft
-                pointFill: "#2251FF",    // --blue
-                pointText: "#051C2C",    // --ink / --navy
-                titleFill: "#051C2C",    // --navy
-                axisText: "#758296",     // --ink-faint
-                border: "#D5DCE4",       // --rule (was --rule-strong)
-                inner: "#E5EAF1",        // --rule-soft
-                accent: "#2251FF",       // --blue
-                accentSoft: "#E5EDFA",   // --blue-pale
-                accentText: "#FFFFFF",
-              },
-              palette: ["#2251FF", "#1A3FBD", "#6285FF", "#B8C2D0"],
-              fontFamily: '"Inter", "Helvetica Neue", Arial, sans-serif',
-            },
-            "openai-paper": {
-              base: "default",
-              vars: {
-                background: "#FFFFFF",   // --bg
-                quadrantFill: "#FAFAFA", // --paper
-                quadrantText: "#404040", // --ink-soft
-                pointFill: "#10A37F",    // --teal
-                pointText: "#0D0D0D",    // --ink
-                titleFill: "#0D0D0D",    // --ink
-                axisText: "#6E6E80",     // --ink-faint
-                border: "#E5E5E5",       // --rule
-                inner: "#EFEFEF",        // --rule-soft
-                accent: "#10A37F",       // --teal
-                accentSoft: "#E6F6F0",   // --teal-pale
-                accentText: "#FFFFFF",
-              },
-              palette: ["#10A37F", "#0E8C6D", "#52B89A", "#8FCDB7"],
-              fontFamily: '"Söhne", "Inter", -apple-system, system-ui, sans-serif',
-            },
-          };
-          const t = themes[spineKey];
-
-          // Inject spine palette as CSS variables on :root so the
-          // CSS rules in the global <style> block (mermaid spine
-          // CSS) resolve to the right colours. This is the
-          // PRIMARY mechanism — CSS applies on every paint, no JS
-          // timing race possible. The JS takeover below stays as
-          // belt-and-suspenders for chart elements not covered by
-          // the CSS rules.
-          try {
-            const root = document.documentElement.style;
-            root.setProperty('--mm-q-fill',     t.vars.quadrantFill);
-            root.setProperty('--mm-q-bg',       t.vars.background);
-            root.setProperty('--mm-q-point',    t.vars.pointFill);
-            root.setProperty('--mm-q-border',   t.vars.border);
-            root.setProperty('--mm-q-text',     t.vars.titleFill);
-            root.setProperty('--mm-q-axis-text', t.vars.axisText);
-            root.setProperty('--mm-q-quad-text', t.vars.quadrantText);
-            root.setProperty('--mm-text',       t.vars.titleFill);
-            root.setProperty('--mm-axis-text',  t.vars.axisText);
-            root.setProperty('--mm-pal-0', t.palette[0]);
-            root.setProperty('--mm-pal-1', t.palette[1]);
-            root.setProperty('--mm-pal-2', t.palette[2]);
-            root.setProperty('--mm-pal-3', t.palette[3]);
-          } catch (_) {}
-
-          // Build pie / journey / state / git slice-color overrides
-          // by cycling through the spine's monochrome `palette`.
-          // Without these, mermaid 11+ paints pie1..pie12 +
-          // fillType0..7 + git0..7 with its built-in rainbow set
-          // (violet / teal / orange) — that's the source of the
-          // "white + purple" charts on the dark spine.
-          const sliceColors = {};
-          for (let i = 0; i < 12; i++) {
-            const c = t.palette[i % t.palette.length];
-            sliceColors[`pie${i + 1}`] = c;
-          }
-          for (let i = 0; i < 8; i++) {
-            const c = t.palette[i % t.palette.length];
-            sliceColors[`fillType${i}`] = c;
-            sliceColors[`git${i}`] = c;
-            sliceColors[`gitInv${i}`] = c;
-          }
-          // themeCSS shapes the rendered SVG beyond what themeVariables
-          // expose. The chart title is hidden because the markdown
-          // already renders an H3 caption directly above each chart —
-          // showing it twice is the single ugliest mermaid default.
-          // Hide every mermaid chart's built-in <text> title — the markdown
-          // already prints an H3 caption right above each diagram, and
-          // showing it twice is mermaid's single ugliest default. Apply
-          // across quadrant / xychart / pie / timeline.
-          const themeCSS = `
-            /* ── SVG canvas · paint the theme bg explicitly. Without
-               this, mermaid leaves the SVG transparent and the parent
-               <pre>'s background bleeds through inconsistently across
-               diagram types — most visibly on dark spines where the
-               browser default white shows through pie/journey gaps. */
-            svg { background: ${t.vars.background}; }
-            .pieOuterCircle { stroke: ${t.vars.border} !important; }
-            /* ── Quadrant chart ── */
-            g.quadrant-chart text { font-family: ${t.fontFamily}; }
-            g.quadrant-point > circle, .quadrant-point circle {
-              stroke: ${t.vars.background};
-              stroke-width: 2px;
-            }
-            text.quadrant-title,
-            .pieTitleText,
-            .xy-chart .title-text,
-            .timeline .title-text,
-            .timeline-title { display: none !important; }
-
-            /* ── xychart-beta · refined bars ──
-               Bar WIDTH is slimmed by the post-render JS mutation
-               (see "xychart bar slimming" block after mermaid.run) --
-               CSS scaleX on SVG rects is unreliable across browsers,
-               so we mutate the rect attributes directly. Here we
-               only handle the COLOUR pass: solid accent fill, no
-               stroke, with per-position cycling through the spine's
-               4-shade monochrome palette so multi-bar charts stagger
-               tones rather than reading as one flat block. */
-            .xy-chart .bar,
-            g.bar-plot .bar,
-            g.bar-plot rect,
-            g.plot > rect {
-              fill: ${t.vars.accent} !important;
-              stroke: none !important;
-            }
-            .xy-chart .bar:nth-child(2n),
-            g.bar-plot .bar:nth-child(2n),
-            g.bar-plot rect:nth-child(2n),
-            g.plot > rect:nth-child(2n)   { fill: ${t.palette[1]} !important; }
-            .xy-chart .bar:nth-child(3n),
-            g.bar-plot .bar:nth-child(3n),
-            g.bar-plot rect:nth-child(3n),
-            g.plot > rect:nth-child(3n)   { fill: ${t.palette[2]} !important; }
-            .xy-chart .bar:nth-child(4n),
-            g.bar-plot .bar:nth-child(4n),
-            g.bar-plot rect:nth-child(4n),
-            g.plot > rect:nth-child(4n)   { fill: ${t.palette[3]} !important; }
-            /* Axis / grid refinement · 0.5px-feel hairlines, label
-               typography in the mono kicker register so the chart's
-               typography aligns with the rest of the doc. */
-            .xy-chart .background { fill: transparent !important; }
-            .xy-chart .x-axis line,
-            .xy-chart .y-axis line,
-            .xy-chart line.tick {
-              stroke: ${t.vars.border} !important;
-              stroke-width: 1px !important;
-            }
-            .xy-chart .x-axis path,
-            .xy-chart .y-axis path,
-            .xy-chart path.domain {
-              stroke: ${t.vars.titleFill} !important;
-              stroke-width: 1px !important;
-              fill: none !important;
-            }
-            .xy-chart .grid line,
-            .xy-chart .gridline,
-            .xy-chart line.grid {
-              stroke: ${t.vars.inner} !important;
-              stroke-width: 1px !important;
-              stroke-dasharray: 2 3 !important;
-            }
-            .xy-chart text,
-            .xy-chart .x-axis text,
-            .xy-chart .y-axis text {
-              font-family: "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace !important;
-              font-size: 10px !important;
-              fill: ${t.vars.axisText} !important;
-              letter-spacing: 0.06em !important;
-            }
-            /* Data labels (showDataLabel) in the kicker register too. */
-            .xy-chart .data-label,
-            .xy-chart text.data-label {
-              font-family: "SF Mono", "JetBrains Mono", Menlo, monospace !important;
-              font-size: 10px !important;
-              fill: ${t.vars.titleFill} !important;
-            }
-
-            /* ── Pie ── */
-            .pieCircle { stroke: ${t.vars.background}; stroke-width: 2px; }
-            text.slice, .pieLegendText { font-family: ${t.fontFamily}; }
-
-            /* ── Timeline ── */
-            .timeline text { font-family: ${t.fontFamily}; }
-
-            /* ── Flowchart · compact nodes + 1px hairline edges ──
-               Default flowchart text is 16px, padding generous, edges
-               heavy. Push to 12.5px / 1px / tighter so the diagram
-               reads as a precise schematic, not a presentation slide.
-               IMPORTANT: do NOT force a line-height larger than 1.2
-               on .nodeLabel — mermaid's foreignObject is sized at
-               measurement time using the inherited font-size at that
-               moment. If we then forcibly stretch line-height, the
-               actually-rendered text exceeds the foreignObject height
-               and the bottom of multi-line node labels gets clipped.
-               Also zero out the wrapper div / paragraph margins so
-               the inline-block measurement doesn't include browser
-               default <p> margins that mermaid won't account for. */
-            .flowchart foreignObject > div,
-            .label > foreignObject > div {
-              line-height: 1.2 !important;
-              margin: 0 !important;
-              padding: 0 !important;
-            }
-            .flowchart .nodeLabel,
-            .flowchart-label foreignObject div,
-            .label foreignObject div,
-            .label foreignObject p,
-            .label foreignObject span,
-            .nodeLabel,
-            .nodeLabel p,
-            .nodeLabel span {
-              font-family: ${t.fontFamily} !important;
-              font-size: 12.5px !important;
-              line-height: 1.2 !important;
-              margin: 0 !important;
-              padding: 0 !important;
-              color: ${t.vars.titleFill} !important;
-            }
-            .flowchart .edgeLabel,
-            .flowchart .edgeLabel p,
-            .edgeLabel foreignObject div,
-            .edgeLabel p,
-            .edgeLabel,
-            .edgeLabel span {
-              font-family: ${t.fontFamily} !important;
-              font-size: 11px !important;
-              line-height: 1.2 !important;
-              margin: 0 !important;
-              padding: 0 !important;
-              color: ${t.vars.axisText} !important;
-              background: ${t.vars.background} !important;
-            }
-            .flowchart .node rect,
-            .flowchart .node circle,
-            .flowchart .node ellipse,
-            .flowchart .node polygon,
-            .node rect,
-            .node circle,
-            .node polygon,
-            .node ellipse {
-              stroke-width: 1px !important;
-              stroke: ${t.vars.border} !important;
-              fill: ${t.vars.quadrantFill} !important;
-            }
-            .flowchart .edgePath path,
-            .flowchart-link,
-            .edgePath .path,
-            .flowchart-link path {
-              stroke: ${t.vars.border} !important;
-              stroke-width: 1px !important;
-              fill: none !important;
-            }
-            .flowchart .marker,
-            .flowchart .arrowheadPath,
-            #arrowhead, marker#arrowhead path {
-              fill: ${t.vars.border} !important;
-              stroke: ${t.vars.border} !important;
-            }
-            .cluster rect {
-              stroke-width: 1px !important;
-              stroke: ${t.vars.border} !important;
-              fill: ${t.vars.background} !important;
-            }
-            .cluster text { font-size: 11px !important; font-family: ${t.fontFamily} !important; fill: ${t.vars.axisText} !important; }
-
-            /* ── Mindmap · monochrome accent (override rainbow) ── */
-            .mindmap g.node text,
-            .mindmap g.section text,
-            .mindmap g.section foreignObject div,
-            .mindmap-node text,
-            .mindmap-node .nodeLabel {
-              font-family: ${t.fontFamily} !important;
-              font-size: 12px !important;
-              fill: ${t.vars.titleFill} !important;
-              color: ${t.vars.titleFill} !important;
-            }
-            .mindmap-node circle,
-            .mindmap-node rect,
-            .mindmap-node polygon {
-              stroke-width: 1px !important;
-              stroke: ${t.vars.accent} !important;
-            }
-            .mindmap-edge,
-            .mindmap-edges path {
-              stroke: ${t.vars.border} !important;
-              stroke-width: 1px !important;
-              fill: none !important;
-            }
-
-            /* ── Sequence diagram · compact actor boxes + thin arrows ── */
-            text.actor,
-            text.actor > tspan,
-            .actor-box-text {
-              font-family: ${t.fontFamily} !important;
-              font-size: 12px !important;
-              fill: ${t.vars.titleFill} !important;
-            }
-            .actor {
-              stroke-width: 1px !important;
-              stroke: ${t.vars.border} !important;
-              fill: ${t.vars.quadrantFill} !important;
-            }
-            .actor-line,
-            line.actor-line {
-              stroke: ${t.vars.border} !important;
-              stroke-width: 1px !important;
-            }
-            .messageText {
-              font-family: ${t.fontFamily} !important;
-              font-size: 11px !important;
-              fill: ${t.vars.titleFill} !important;
-            }
-            .messageLine0, .messageLine1 {
-              stroke-width: 1px !important;
-              stroke: ${t.vars.titleFill} !important;
-            }
-            .note,
-            rect.note {
-              stroke: ${t.vars.border} !important;
-              fill: ${t.vars.accentSoft} !important;
-              stroke-width: 1px !important;
-            }
-            .noteText,
-            text.noteText,
-            .note text {
-              font-family: ${t.fontFamily} !important;
-              font-size: 11px !important;
-              fill: ${t.vars.titleFill} !important;
-            }
-            .activation0, .activation1, .activation2 {
-              stroke: ${t.vars.border} !important;
-              fill: ${t.vars.inner} !important;
-            }
-
-            /* ── State diagram (v2) ── */
-            .stateGroup rect,
-            .stateGroup circle,
-            .stateGroup line {
-              stroke-width: 1px !important;
-            }
-            .stateLabel,
-            .state-description,
-            .stateGroup text {
-              font-family: ${t.fontFamily} !important;
-              font-size: 11.5px !important;
-              fill: ${t.vars.titleFill} !important;
-            }
-            .transition {
-              stroke: ${t.vars.border} !important;
-              stroke-width: 1px !important;
-              fill: none !important;
-            }
-            .compositeBackground,
-            .composit {
-              fill: ${t.vars.background} !important;
-              stroke: ${t.vars.border} !important;
-            }
-            .stateGroup .innerCircle {
-              fill: ${t.vars.titleFill} !important;
-            }
-
-            /* ── Gantt · tight bars + small grid ── */
-            .taskText,
-            .taskTextOutsideRight,
-            .taskTextOutsideLeft,
-            text.taskText {
-              font-family: ${t.fontFamily} !important;
-              font-size: 11px !important;
-            }
-            .tick text,
-            g.tick text {
-              font-family: ${t.fontFamily} !important;
-              font-size: 10px !important;
-              fill: ${t.vars.axisText} !important;
-            }
-            .grid .tick line,
-            g.grid line {
-              stroke: ${t.vars.inner} !important;
-              stroke-width: 0.5px !important;
-            }
-            .grid path { stroke-width: 0 !important; }
-            .titleText { display: none !important; }
-            .section0 text, .section1 text, .section2 text, .section3 text,
-            .sectionTitle0, .sectionTitle1, .sectionTitle2, .sectionTitle3 {
-              font-family: ${t.fontFamily} !important;
-              font-size: 11px !important;
-              fill: ${t.vars.axisText} !important;
-            }
-            rect.task,
-            rect.task0, rect.task1, rect.task2, rect.task3,
-            rect.activeTask0, rect.activeTask1, rect.activeTask2, rect.activeTask3 {
-              stroke-width: 0 !important;
-            }
-
-            /* ── Journey · compact ── */
-            .journey-section text,
-            .journey-section foreignObject div {
-              font-family: ${t.fontFamily} !important;
-              font-size: 11px !important;
-              fill: ${t.vars.titleFill} !important;
-            }
-            .face-rect { stroke-width: 1px !important; }
-          `;
-          mermaid.initialize({
-            startOnLoad: false,
-            theme: t.base,
-            fontFamily: t.fontFamily,
-            themeCSS,
-            quadrantChart: {
-              // Refined-compact · was 640×480; the chart fits inside a
-              // 740–880px article column, and 480px tall reads as a
-              // presentation slide rather than an inline exhibit.
-              chartWidth: 460,
-              chartHeight: 320,
-              // Hide mermaid's own title slot — the H3 above the chart
-              // is the caption. Setting padding/size to 0 keeps the
-              // layout from leaving an empty band at the top.
-              titlePadding: 0,
-              titleFontSize: 0,
-              titleTextMargin: 0,
-              quadrantPadding: 8,
-              quadrantInternalBorderStrokeWidth: 0.5,
-              quadrantExternalBorderStrokeWidth: 1,
-              quadrantLabelFontSize: 11,
-              quadrantTextTopPadding: 10,
-              pointRadius: 5,
-              pointLabelFontSize: 11,
-              pointTextPadding: 6,
-              xAxisLabelFontSize: 11,
-              xAxisLabelPadding: 6,
-              yAxisLabelFontSize: 11,
-              yAxisLabelPadding: 6,
-              xAxisPosition: "bottom",
-              yAxisPosition: "left",
-            },
-            themeVariables: {
-              // Global default · drives mermaid's INTERNAL label
-              // measurement before SVG/foreignObject sizing. Setting
-              // it here keeps the box dimensions in sync with the
-              // CSS-rendered font-size, so multi-line flowchart node
-              // labels don't get vertically clipped (which they did
-              // when the CSS forced 12px after mermaid measured at
-              // its 16px default).
-              fontSize: "12.5px",
-              // darkMode flag tells mermaid whether to invert
-              // computed contrast pairs — required when we feed it
-              // dark surface colors via the "base" theme. Without
-              // this, mermaid computes text colors assuming a light
-              // canvas and ends up with low-contrast labels.
-              darkMode: t.darkMode === true,
-              background: t.vars.background,
-              // primaryColor MUST NOT be the quadrantFill (which is
-              // very dark on dark spines). Mermaid uses primaryColor
-              // as the seed for many derived colours (cScale shades,
-              // pie defaults, accent variations) — when it's near-
-              // black the derivations come out muddy. Use the spine's
-              // accent so derivations land in the brand family.
-              primaryColor: t.vars.accent,
-              primaryTextColor: t.vars.titleFill,
-              primaryBorderColor: t.vars.border,
-              lineColor: t.vars.border,
-              secondaryColor: t.vars.accentSoft,
-              tertiaryColor: t.vars.quadrantFill,
-              // All 4 quadrants share the same fill — clean matrix.
-              quadrant1Fill: t.vars.quadrantFill,
-              quadrant2Fill: t.vars.quadrantFill,
-              quadrant3Fill: t.vars.quadrantFill,
-              quadrant4Fill: t.vars.quadrantFill,
-              quadrant1TextFill: t.vars.quadrantText,
-              quadrant2TextFill: t.vars.quadrantText,
-              quadrant3TextFill: t.vars.quadrantText,
-              quadrant4TextFill: t.vars.quadrantText,
-              quadrantPointFill: t.vars.pointFill,
-              quadrantPointTextFill: t.vars.pointText,
-              quadrantTitleFill: t.vars.titleFill,
-              quadrantXAxisTextFill: t.vars.axisText,
-              quadrantYAxisTextFill: t.vars.axisText,
-              quadrantInternalBorderStrokeFill: t.vars.inner,
-              quadrantExternalBorderStrokeFill: t.vars.border,
-              // ── Flowchart / generic node-graph ──
-              mainBkg: t.vars.quadrantFill,
-              nodeBorder: t.vars.border,
-              clusterBkg: t.vars.background,
-              clusterBorder: t.vars.border,
-              defaultLinkColor: t.vars.border,
-              edgeLabelBackground: t.vars.background,
-              titleColor: t.vars.titleFill,
-              // ── Mindmap · single accent everywhere (override rainbow) ──
-              cScale0: t.vars.accent,
-              cScale1: t.vars.accent,
-              cScale2: t.vars.accent,
-              cScale3: t.vars.accent,
-              cScale4: t.vars.accent,
-              cScale5: t.vars.accent,
-              cScale6: t.vars.accent,
-              cScale7: t.vars.accent,
-              cScale8: t.vars.accent,
-              cScale9: t.vars.accent,
-              cScale10: t.vars.accent,
-              cScale11: t.vars.accent,
-              // ── Sequence diagram ──
-              actorBkg: t.vars.quadrantFill,
-              actorBorder: t.vars.border,
-              actorTextColor: t.vars.titleFill,
-              actorLineColor: t.vars.border,
-              signalColor: t.vars.titleFill,
-              signalTextColor: t.vars.titleFill,
-              labelBoxBkgColor: t.vars.quadrantFill,
-              labelBoxBorderColor: t.vars.border,
-              labelTextColor: t.vars.titleFill,
-              loopTextColor: t.vars.titleFill,
-              noteBkgColor: t.vars.accentSoft,
-              noteTextColor: t.vars.titleFill,
-              noteBorderColor: t.vars.border,
-              activationBorderColor: t.vars.border,
-              activationBkgColor: t.vars.inner,
-              // ── Gantt · single-accent bars + neutral grid ──
-              taskBkgColor: t.vars.accent,
-              taskTextColor: t.vars.accentText,
-              taskTextDarkColor: t.vars.titleFill,
-              taskTextLightColor: t.vars.accentText,
-              taskTextOutsideColor: t.vars.titleFill,
-              activeTaskBkgColor: t.vars.accent,
-              activeTaskBorderColor: t.vars.accent,
-              doneTaskBkgColor: t.vars.inner,
-              doneTaskBorderColor: t.vars.border,
-              critBkgColor: t.vars.accent,
-              critBorderColor: t.vars.accent,
-              gridColor: t.vars.inner,
-              sectionBkgColor: t.vars.background,
-              altSectionBkgColor: t.vars.quadrantFill,
-              sectionBkgColor2: t.vars.background,
-              todayLineColor: t.vars.accent,
-              // ── Pie / journey / state / git · monochrome palette
-              // Cycles t.palette across mermaid's per-slice color
-              // slots so these chart types stop falling back to
-              // mermaid's built-in violet/teal rainbow defaults
-              // (the white+purple leak on dark spines).
-              ...sliceColors,
-              // ── xychart-beta · single-accent bars + matched chrome.
-              // Mermaid generates xychart SVG using these tokens BEFORE
-              // our themeCSS overrides apply, so they have to be set
-              // here to get the right fill at render time (not just
-              // post-paint via CSS). Palette joined as comma-separated
-              // string per mermaid's plotColorPalette contract.
-              xyChart: {
-                backgroundColor: "transparent",
-                titleColor: t.vars.titleFill,
-                xAxisLabelColor: t.vars.axisText,
-                xAxisTitleColor: t.vars.titleFill,
-                xAxisTickColor: t.vars.border,
-                xAxisLineColor: t.vars.titleFill,
-                yAxisLabelColor: t.vars.axisText,
-                yAxisTitleColor: t.vars.titleFill,
-                yAxisTickColor: t.vars.border,
-                yAxisLineColor: t.vars.titleFill,
-                plotColorPalette: t.palette.join(","),
-              },
-              pieTitleTextSize: "0px",
-              pieTitleTextColor: t.vars.titleFill,
-              pieSectionTextColor: t.vars.titleFill,
-              pieSectionTextSize: "11px",
-              pieLegendTextColor: t.vars.titleFill,
-              pieLegendTextSize: "11px",
-              pieStrokeColor: t.vars.background,
-              pieStrokeWidth: "1px",
-              pieOuterStrokeColor: t.vars.border,
-              pieOuterStrokeWidth: "1px",
-              pieOpacity: "1",
-            },
-            flowchart: {
-              useMaxWidth: true,
-              htmlLabels: true,
-              // Tighter spacing · default 50/50/15 reads as a slide,
-              // these values render as a precise schematic. `padding`
-              // is the cluster (subgraph) padding, NOT node padding —
-              // mermaid sizes node boxes from text dimensions + an
-              // internal margin, so this value alone won't squeeze
-              // node labels. Keep at 12 for readable subgraph titles.
-              nodeSpacing: 36,
-              rankSpacing: 42,
-              padding: 12,
-              curve: "basis",
-            },
-            sequence: {
-              useMaxWidth: true,
-              diagramMarginX: 12,
-              diagramMarginY: 6,
-              actorMargin: 24,
-              boxMargin: 5,
-              boxTextMargin: 3,
-              noteMargin: 6,
-              messageMargin: 18,
-              mirrorActors: false,
-              bottomMarginAdj: 0,
-              actorFontSize: 11,
-              messageFontSize: 10,
-              noteFontSize: 10,
-            },
-            gantt: {
-              useMaxWidth: true,
-              fontSize: 10,
-              sectionFontSize: 10,
-              numberSectionStyles: 3,
-              leftPadding: 64,
-              topPadding: 18,
-              rightPadding: 18,
-              barGap: 3,
-              barHeight: 14,
-              gridLineStartPadding: 28,
-            },
-            mindmap: {
-              useMaxWidth: true,
-              padding: 6,
-            },
-            stateDiagram: {
-              useMaxWidth: true,
-              fontSize: 12,
-              titleTopMargin: 0,
-              padding: 6,
-              miniPadding: 4,
-            },
-            state: {
-              useMaxWidth: true,
-              fontSize: 12,
-            },
-            journey: {
-              useMaxWidth: true,
-              fontSize: 11,
-              taskFontSize: 11,
-              sectionFontSize: 12,
-            },
-            // ── xychart-beta · bar charts ──────────────────────────
-            // Tight margins, label hidden (caption above), and a single
-            // colour palette derived from the spine's pointFill so
-            // every bar in a chart shares a coherent voice. Mermaid
-            // 11+ accepts the `xyChart` key (older releases tolerated
-            // `xychart` — keep BOTH so the config isn't fragile across
-            // CDN bumps).
-            xyChart: {
-              // Was 720×360 · oversized for an inline exhibit. 560×260
-              // sits comfortably inside a 740px article column without
-              // pretending to be a presentation slide. Slightly shorter
-              // than the 320px we tried first — squat-ish proportions
-              // read as "data exhibit" while taller bars look like a
-              // pitch slide.
-              width: 560,
-              height: 260,
-              titlePadding: 0,
-              titleFontSize: 0,
-              showTitle: false,
-              showDataLabel: true,
-              // Refined bars · 50 → 32 → 20. mermaid xychart's bar
-              // width is `slotWidth × reservedPercent / 100`, where
-              // slotWidth scales inversely with bar count — so a value
-              // tuned for 8 bars looks chunky on 3 bars (each slot
-              // is ~3× wider). 20 keeps 8-12-bar charts legible while
-              // 3-bar charts come out as ~36px-wide thin bars rather
-              // than 60-90px filler blocks.
-              plotReservedSpacePercent: 20,
-              xAxis: { labelFontSize: 10, titleFontSize: 0, showTitle: false },
-              yAxis: { labelFontSize: 10, titleFontSize: 10 },
-            },
-            // Pie · legend on the right, slice labels disabled so wide
-            // labels don't push the chart off-screen. The legend
-            // already carries label + value (showData: true above).
-            pie: {
-              textPosition: 0.7,
-              useMaxWidth: true,
-            },
-            // Timeline · cards-on-rail; title suppressed (caption above).
-            timeline: {
-              padding: 16,
-              useMaxWidth: true,
-            },
-          });
-          // ── Off-screen render + paint-then-insert ────────────────
-          // DEFINITIVE fix for "first time wrong, refresh OK" /
-          // strict alternation pattern. Earlier strategies all let
-          // mermaid render in-place, then patched colors after —
-          // which gave the user a visible window of mermaid-default
-          // colors before our takeover landed.
-          //
-          // The only race-free approach: render OFFSCREEN, paint our
-          // spine palette onto the SVG while it's still detached,
-          // THEN insert into the visible DOM. The user's first paint
-          // sees the spine-colored SVG; there is no intermediate
-          // mermaid-default state to perceive.
-          //
-          // mermaid 10's `render(id, src)` returns the SVG as a
-          // string (not in-DOM) — perfect for this flow. We loop
-          // through every `pre.mermaid`, render its source via
-          // `mermaid.render`, parse the resulting string, apply the
-          // takeover to the parsed (still-detached) SVG, then swap
-          // the corrected SVG into the visible container.
-          // Belt-and-suspenders fill setter · sets BOTH the inline
-          // `style="fill: X !important"` AND the SVG `fill="X"`
-          // presentation attribute. With mermaid's embedded <style>
-          // already wiped, either layer is sufficient — but setting
-          // both means even if one is somehow stripped/overridden
-          // (browser quirk, late mermaid post-processing, CSS
-          // cascade edge case), the chart still renders in the
-          // spine palette.
-          const setFill = (el, c) => {
-            if (!c) return;
-            try { el.style.setProperty('fill', c, 'important'); } catch (_) {}
-            try { if (el.setAttribute) el.setAttribute('fill', c); } catch (_) {}
-          };
-          const setStroke = (el, c) => {
-            if (c === undefined || c === null) return;
-            try { el.style.setProperty('stroke', c, 'important'); } catch (_) {}
-            try { if (el.setAttribute) el.setAttribute('stroke', c); } catch (_) {}
-          };
-          const setColor = (el, c) => { if (c) el.style.setProperty('color', c, 'important'); };
-          const cyclePalette = (i) => t.palette[i % t.palette.length];
-
-          // Apply the spine palette to ONE SVG element (offscreen or
-          // onscreen — works either way since every fill/stroke is
-          // forced via inline `!important`). Pure function: no
-          // global queries, only operates on the passed element.
-          const applySpineToSvg = (svg) => {
-            try {
-              // ── 0. Pin the SVG max-width per chart type ──
-              // Mermaid 10's chartWidth/chartHeight config is silently
-              // ignored by the bundled CDN build, so the SVG ships at
-              // its default size with `style="max-width: 500px"`
-              // inline. CSS in <style> overrides it at paint time, but
-              // there's a one-frame race on cold loads where the
-              // user can perceive the unconstrained size before CSS
-              // applies. Pin via inline style with !important here
-              // for refined-compact dimensions on every first paint.
-              const role = svg.getAttribute('aria-roledescription') || '';
-              const chartMaxWidth = (
-                role === 'quadrantChart' ? '460px' :
-                role === 'xychart' ? '560px' :
-                role === 'pie' ? '420px' :
-                ''
-              );
-              if (chartMaxWidth) {
-                svg.style.setProperty('max-width', chartMaxWidth, 'important');
-                svg.style.setProperty('height', 'auto', 'important');
-                svg.style.setProperty('margin', '0 auto', 'important');
-                svg.style.setProperty('display', 'block', 'important');
-              }
-              // ── 1. Wipe mermaid's embedded <style> block ──
-              // Mermaid generates `<style>.quadrant-chart > .quadrant-
-              // point > circle { fill: #...; }` etc. inside each SVG;
-              // those CSS rules beat our setAttribute-set fills. After
-              // removal, our inline-style fills below have no rivals.
-              svg.querySelectorAll(':scope > style, defs > style').forEach((s) => s.remove());
-
-              // ── 2. SVG canvas / background ──
-              // Any rect that fills the whole SVG is the chart canvas;
-              // pin to t.vars.background so the chart blends with its
-              // spine frame instead of showing mermaid's default white.
-              const sw = parseFloat(svg.getAttribute('width') || '0');
-              svg.querySelectorAll(':scope > rect, :scope > g > rect.background, rect.main-bkg').forEach((el) => {
-                const w = parseFloat(el.getAttribute('width') || '0');
-                if (w > 0 && sw > 0 && w >= sw * 0.95) setFill(el, t.vars.background);
-              });
-
-              // ── 3. Quadrant chart ──
-              // Mermaid 10's actual class names (verified against rendered DOM):
-              //   `<g class="quadrant">` — group; each contains a child <rect>
-              //   `.quadrants` — outer parent group
-              //   `<circle class="data-point">` — each data circle
-              //   `.data-points` — parent group
-              //   `.axis-line` / `.axisl-line` — axis lines
-              //   `.bottom-axis`, `.left-axis` — axis text containers
-              // CRITICAL: the `.quadrant` class is on a <g>, but the
-              // actual fillable rect is INSIDE the group. Selecting
-              // `.quadrants > .quadrant` matches the <g> only;
-              // setting style.fill on a <g> does NOT override the
-              // child <rect>'s `fill="..."` attribute in SVG. We
-              // must select the inner rect directly.
-              //
-              // Belt-and-suspenders: also match ALL <rect> inside
-              // any quadrantChart SVG (excluding the canvas-bg rect
-              // we already handled via dimensions). Catches any
-              // mermaid version variation in class naming.
-              svg.querySelectorAll('.quadrants .quadrant rect, g.quadrant > rect, rect.quadrant, rect.quadrant-fill, .quadrant-fill').forEach((el) => setFill(el, t.vars.quadrantFill));
-              if (svg.getAttribute('aria-roledescription') === 'quadrantChart') {
-                const qsw = parseFloat(svg.getAttribute('width') || '0');
-                svg.querySelectorAll('rect').forEach((el) => {
-                  // Skip the canvas-bg rect (full-width).
-                  const w = parseFloat(el.getAttribute('width') || '0');
-                  if (qsw > 0 && w >= qsw * 0.95) return;
-                  setFill(el, t.vars.quadrantFill);
-                });
-              }
-              // Quadrant border lines · mermaid 10 puts the outer
-              // rectangle + cross-divider lines inside `<g class="border">`,
-              // a sibling of `.quadrants` (NOT a descendant). Catch
-              // both the inside-quadrants axis-line case AND the
-              // border group case.
-              svg.querySelectorAll('.axis-line, .axisl-line, .quadrants line, g.border line, .border line').forEach((el) => setStroke(el, t.vars.border));
-              svg.querySelectorAll('.quadrant-internal-border, line.quadrant-internal-border').forEach((el) => setStroke(el, t.vars.inner));
-              svg.querySelectorAll('.quadrant-external-border, rect.quadrant-external-border').forEach((el) => {
-                setStroke(el, t.vars.border);
-                setFill(el, 'none');
-              });
-              svg.querySelectorAll('text.quadrant-title, .quadrant-title, .chart-title').forEach((el) => setFill(el, t.vars.titleFill));
-              // Quadrant labels (the 4 corner labels). Mermaid 10
-              // doesn't put them in a class; they're plain `<text>` inside
-              // each `.quadrant` group. Walk children of `.quadrant` text.
-              svg.querySelectorAll('.quadrant text, .quadrants text:not(.chart-title)').forEach((el) => setFill(el, t.vars.quadrantText));
-              svg.querySelectorAll('text.quadrant-text, text.quadrant-quadrant-1-text-fill, text.quadrant-quadrant-2-text-fill, text.quadrant-quadrant-3-text-fill, text.quadrant-quadrant-4-text-fill').forEach((el) => setFill(el, t.vars.quadrantText));
-              // Axis labels · "Low likelihood / High likelihood" etc.
-              svg.querySelectorAll('.bottom-axis text, .left-axis text, .top-axis text, .right-axis text, text.x-axis-text-label, text.y-axis-text-label, .quadrant-x-axis-label, .quadrant-y-axis-label').forEach((el) => setFill(el, t.vars.axisText));
-              // Data points · the load-bearing accent.
-              svg.querySelectorAll('.data-point, .data-points circle, circle.data-point, .quadrant-point > circle, g.quadrant-point > circle, circle.quadrant-point').forEach((el) => {
-                setFill(el, t.vars.pointFill);
-                setStroke(el, t.vars.background);
-              });
-              svg.querySelectorAll('.data-point text, .data-points text, text.point-text, .quadrant-point text').forEach((el) => setFill(el, t.vars.titleFill));
-
-              // ── 4. Pie chart ──
-              svg.querySelectorAll('path.pieCircle, g.pieCircle path, .slice').forEach((el, i) => {
-                setFill(el, cyclePalette(i));
-                setStroke(el, t.vars.background);
-              });
-              svg.querySelectorAll('.pieOuterCircle, circle.pieOuterCircle').forEach((el) => {
-                setStroke(el, t.vars.border);
-                setFill(el, 'none');
-              });
-              svg.querySelectorAll('text.slice, text.pieLegendText, .legend text, g.legend text').forEach((el) => setFill(el, t.vars.titleFill));
-              svg.querySelectorAll('.pieTitleText').forEach((el) => setFill(el, t.vars.titleFill));
-
-              // ── 5. xychart-beta ──
-              // Bars cycle through palette; axes + grid + labels match
-              // the spine's neutrals.
-              svg.querySelectorAll('g.plot rect, g.bar-plot rect, g[class*="-plot"] rect, rect.bar').forEach((el, i) => {
-                // Skip the plot-background rect (full plot width).
-                const w = parseFloat(el.getAttribute('width') || '0');
-                if (w >= 200) return;
-                setFill(el, cyclePalette(i));
-                setStroke(el, 'none');
-              });
-              svg.querySelectorAll('.xy-chart .background, rect.background').forEach((el) => setFill(el, 'transparent'));
-              svg.querySelectorAll('.xy-chart text, g.xy-chart text, .xy-chart .x-axis text, .xy-chart .y-axis text').forEach((el) => setFill(el, t.vars.axisText));
-              svg.querySelectorAll('.xy-chart .x-axis path.domain, .xy-chart .y-axis path.domain, .xy-chart .x-axis line, .xy-chart .y-axis line').forEach((el) => setStroke(el, t.vars.titleFill));
-              svg.querySelectorAll('.xy-chart .grid line, .xy-chart line.grid').forEach((el) => setStroke(el, t.vars.inner));
-
-              // ── 6. Flowchart ──
-              svg.querySelectorAll('.flowchart .node rect, .flowchart .node circle, .flowchart .node ellipse, .flowchart .node polygon, .node rect, .node circle, .node polygon, .node ellipse').forEach((el) => {
-                setFill(el, t.vars.quadrantFill);
-                setStroke(el, t.vars.border);
-              });
-              svg.querySelectorAll('.flowchart-link, .edgePath path, .edgePath .path, path.flowchart-link').forEach((el) => {
-                setStroke(el, t.vars.border);
-                setFill(el, 'none');
-              });
-              svg.querySelectorAll('marker path, #arrowhead path, marker#arrowhead path').forEach((el) => {
-                setFill(el, t.vars.border);
-                setStroke(el, t.vars.border);
-              });
-              svg.querySelectorAll('.cluster rect').forEach((el) => {
-                setFill(el, t.vars.background);
-                setStroke(el, t.vars.border);
-              });
-              svg.querySelectorAll('.cluster text, .nodeLabel, .label foreignObject *').forEach((el) => {
-                setFill(el, t.vars.titleFill);
-                setColor(el, t.vars.titleFill);
-              });
-              svg.querySelectorAll('.edgeLabel, .edgeLabel foreignObject *').forEach((el) => {
-                setFill(el, t.vars.axisText);
-                setColor(el, t.vars.axisText);
-                el.style.setProperty('background-color', t.vars.background, 'important');
-              });
-
-              // ── 7. Mindmap ──
-              svg.querySelectorAll('.mindmap g.section circle, .mindmap-node circle, g.mindmap-node circle').forEach((el, i) => {
-                setFill(el, cyclePalette(i));
-                setStroke(el, t.vars.border);
-              });
-              svg.querySelectorAll('.mindmap g.section rect, .mindmap-node rect, g.mindmap-node rect').forEach((el, i) => {
-                setFill(el, cyclePalette(i));
-                setStroke(el, t.vars.border);
-              });
-              svg.querySelectorAll('.mindmap g.section polygon, .mindmap-node polygon, g.mindmap-node polygon').forEach((el, i) => {
-                setFill(el, cyclePalette(i));
-                setStroke(el, t.vars.border);
-              });
-              svg.querySelectorAll('.mindmap-edges path, .mindmap path.edge').forEach((el) => {
-                setStroke(el, t.vars.border);
-                setFill(el, 'none');
-              });
-              svg.querySelectorAll('.mindmap text, .mindmap-node text, g.mindmap-node text, .mindmap foreignObject *').forEach((el) => {
-                setFill(el, t.vars.titleFill);
-                setColor(el, t.vars.titleFill);
-              });
-
-              // ── 8. Sequence diagram ──
-              svg.querySelectorAll('rect.actor, .actor').forEach((el) => {
-                setFill(el, t.vars.quadrantFill);
-                setStroke(el, t.vars.border);
-              });
-              svg.querySelectorAll('line.actor-line, .actor-line').forEach((el) => setStroke(el, t.vars.border));
-              svg.querySelectorAll('text.actor, text.actor tspan, .actor-box-text, .messageText, text.messageText, .noteText, text.noteText, .note text').forEach((el) => setFill(el, t.vars.titleFill));
-              svg.querySelectorAll('.messageLine0, .messageLine1, line.messageLine0, line.messageLine1').forEach((el) => setStroke(el, t.vars.titleFill));
-              svg.querySelectorAll('rect.note, .note').forEach((el) => {
-                setFill(el, t.vars.accentSoft);
-                setStroke(el, t.vars.border);
-              });
-              svg.querySelectorAll('.activation0, .activation1, .activation2, rect.activation0, rect.activation1, rect.activation2').forEach((el) => {
-                setFill(el, t.vars.inner);
-                setStroke(el, t.vars.border);
-              });
-              svg.querySelectorAll('.labelBox, rect.labelBox').forEach((el) => {
-                setFill(el, t.vars.quadrantFill);
-                setStroke(el, t.vars.border);
-              });
-
-              // ── 9. State diagram ──
-              svg.querySelectorAll('.stateGroup rect, g.stateGroup rect, rect.state').forEach((el) => {
-                setFill(el, t.vars.quadrantFill);
-                setStroke(el, t.vars.border);
-              });
-              svg.querySelectorAll('.stateGroup circle, g.stateGroup circle').forEach((el) => {
-                setFill(el, t.vars.titleFill);
-                setStroke(el, t.vars.titleFill);
-              });
-              svg.querySelectorAll('.stateGroup line, line.transition, path.transition').forEach((el) => {
-                setStroke(el, t.vars.border);
-                setFill(el, 'none');
-              });
-              svg.querySelectorAll('.stateLabel, .state-description, .stateGroup text').forEach((el) => setFill(el, t.vars.titleFill));
-              svg.querySelectorAll('.compositeBackground, rect.compositeBackground').forEach((el) => {
-                setFill(el, t.vars.background);
-                setStroke(el, t.vars.border);
-              });
-
-              // ── 10. Journey ──
-              svg.querySelectorAll('.face-circle, circle.face-circle, .journey-section .face').forEach((el, i) => {
-                setFill(el, cyclePalette(i));
-                setStroke(el, t.vars.background);
-              });
-              svg.querySelectorAll('.journey-section text, .section text, .journey-section foreignObject *').forEach((el) => {
-                setFill(el, t.vars.titleFill);
-                setColor(el, t.vars.titleFill);
-              });
-              svg.querySelectorAll('rect.journey, .journey-section rect').forEach((el) => {
-                setFill(el, t.vars.quadrantFill);
-                setStroke(el, t.vars.border);
-              });
-
-              // ── 11. Gantt ──
-              svg.querySelectorAll('rect.task, rect.task0, rect.task1, rect.task2, rect.task3, rect.activeTask0, rect.activeTask1, rect.activeTask2, rect.activeTask3').forEach((el, i) => {
-                setFill(el, cyclePalette(i));
-                setStroke(el, 'none');
-              });
-              svg.querySelectorAll('rect.done, rect.done0, rect.done1, rect.done2, rect.done3, rect.doneTask').forEach((el) => {
-                setFill(el, t.vars.inner);
-                setStroke(el, t.vars.border);
-              });
-              svg.querySelectorAll('rect.crit, rect.crit0, rect.crit1, rect.crit2, rect.crit3').forEach((el) => {
-                setFill(el, t.vars.accent);
-                setStroke(el, t.vars.accent);
-              });
-              svg.querySelectorAll('.taskText, .taskTextOutsideRight, .taskTextOutsideLeft, text.taskText').forEach((el) => setFill(el, t.vars.titleFill));
-              svg.querySelectorAll('.tick text, g.tick text').forEach((el) => setFill(el, t.vars.axisText));
-              svg.querySelectorAll('.tick line, .grid line, g.tick line, g.grid line').forEach((el) => setStroke(el, t.vars.inner));
-              svg.querySelectorAll('.section0 text, .section1 text, .section2 text, .section3 text, .sectionTitle0, .sectionTitle1, .sectionTitle2, .sectionTitle3').forEach((el) => setFill(el, t.vars.axisText));
-              svg.querySelectorAll('line.today, .today').forEach((el) => setStroke(el, t.vars.accent));
-
-              // ── 12. Timeline ──
-              svg.querySelectorAll('.timeline rect, .timeline-section rect').forEach((el, i) => {
-                setFill(el, cyclePalette(i));
-                setStroke(el, t.vars.border);
-              });
-              svg.querySelectorAll('.timeline text, .timeline foreignObject *').forEach((el) => {
-                setFill(el, t.vars.titleFill);
-                setColor(el, t.vars.titleFill);
-              });
-              svg.querySelectorAll('.timeline path, .timeline-line').forEach((el) => {
-                setStroke(el, t.vars.border);
-                setFill(el, 'none');
-              });
-
-              // ── 13. Git graph ──
-              svg.querySelectorAll('.commit-bullets circle, circle.commit, .commit').forEach((el, i) => {
-                setFill(el, cyclePalette(i));
-                setStroke(el, t.vars.border);
-              });
-              svg.querySelectorAll('.commit-arrows path, path.commit-arrow, .commit-arrow').forEach((el) => {
-                setStroke(el, t.vars.border);
-                setFill(el, 'none');
-              });
-              svg.querySelectorAll('text.commit-label, .commit-label, .branch-label').forEach((el) => setFill(el, t.vars.titleFill));
-
-              // ── 14. Generic title (every chart type) ──
-              svg.querySelectorAll('text.titleText, .titleText, text.chart-title').forEach((el) => setFill(el, t.vars.titleFill));
-
-              // ── 15. Universal text safety net ──
-              // Any text element that survived the per-type passes
-              // without an inline style fill — pin to titleFill so no
-              // text leaks the mermaid-default purple/blue.
-              svg.querySelectorAll('text').forEach((el) => {
-                if (!el.style.fill) setFill(el, t.vars.titleFill);
-              });
-
-              // ── 16. Mark the parent pre.mermaid as painted ──
-              // CSS hides `.body pre.mermaid svg` until `.is-painted`
-              // is added on the parent. We add it here so that even
-              // when the SVG is later inserted into the live DOM, the
-              // CSS-based hide is already lifted (no flash).
-              const host = svg.closest('pre.mermaid');
-              if (host && !host.classList.contains('is-painted')) {
-                host.classList.add('is-painted');
-              }
-            } catch (forceColorErr) {
-              console.warn('[mermaid] palette takeover failed for svg:', forceColorErr);
-            }
-          };  // applySpineToSvg
-
-          // Wrapper · walks every onscreen SVG and applies the
-          // takeover. Used by the safety polling + MutationObserver
-          // (defense-in-depth) for any SVGs that were already
-          // inserted before the offscreen-render loop took over.
-          const applySpinePaletteOnce = () => {
-            document.querySelectorAll('.mermaid svg').forEach(applySpineToSvg);
-          };
-
-          // ── Offscreen render via mermaid.run + DOM relocation ─
-          // DEFINITIVE fix for "first load wrong / strict
-          // alternation." Keep mermaid.run (it handles lazy module
-          // loading for diagram types correctly — mermaid.render's
-          // first call races with that loading on cold cache),
-          // but move every pre.mermaid INTO AN OFFSCREEN CONTAINER
-          // before running. mermaid renders inside the offscreen
-          // container (user can't see it), we apply the spine
-          // takeover to every resulting SVG, then move each
-          // pre.mermaid back to its original DOM position. The
-          // user's first paint of each chart shows the
-          // spine-coloured SVG; no race possible.
-          //
-          // Diagnostic logs (console.info) so the user can verify
-          // which path was taken and at what timing — open DevTools
-          // and refresh; the log narrates the flow.
-          const _mLog = (msg, ...rest) => {
-            try { console.info(`[mermaid-spine] ${msg}`, ...rest); } catch (_) {}
-          };
-          _mLog('flow start · spine =', spineKey);
-          const charts = Array.from(document.querySelectorAll('pre.mermaid'));
-          _mLog('charts found:', charts.length);
-          if (charts.length > 0) {
-            // Capture original DOM positions so we can restore each
-            // pre.mermaid exactly where it was.
-            const anchors = charts.map((el) => ({
-              el,
-              parent: el.parentNode,
-              nextSibling: el.nextSibling,
-            }));
-            // Build the offscreen host. Width matches a typical
-            // article column so mermaid sizes the SVG correctly
-            // (useMaxWidth: true uses the offscreen container's
-            // dimensions for layout). Height: 0 + overflow: visible
-            // so mermaid can compute proper SVG sizes.
-            const offscreen = document.createElement('div');
-            offscreen.id = 'mermaid-offscreen-host';
-            offscreen.style.cssText = [
-              'position: absolute',
-              'left: -99999px',
-              'top: 0',
-              'width: 880px',
-              'visibility: hidden',
-              'pointer-events: none',
-              'z-index: -1',
-            ].join('; ');
-            document.body.appendChild(offscreen);
-            // Move each pre.mermaid into the offscreen host.
-            anchors.forEach((a) => offscreen.appendChild(a.el));
-            _mLog('moved offscreen, calling mermaid.run');
-            // Run mermaid · scoped to the offscreen host so it only
-            // touches elements we just moved. mermaid handles lazy
-            // module registration internally.
-            try {
-              await mermaid.run({ querySelector: '#mermaid-offscreen-host pre.mermaid' });
-              _mLog('mermaid.run resolved');
-            } catch (runErr) {
-              console.warn('[mermaid-spine] offscreen run failed:', runErr);
-            }
-            // Wait for mermaid's deferred post-render work to land.
-            // Quadrant chart (specifically) does d3-based label
-            // positioning in a setTimeout(0) AFTER mermaid.run
-            // resolves — if we apply takeover before that fires,
-            // mermaid overwrites our fills. Two rAF + setTimeout(0)
-            // cycles guarantee deferred work has settled. Cheap
-            // (~32ms) and only runs once per page load.
-            await new Promise((r) => requestAnimationFrame(() => requestAnimationFrame(() => setTimeout(r, 0))));
-            // Apply takeover to all SVGs while still offscreen.
-            const svgsOffscreen = offscreen.querySelectorAll('svg');
-            _mLog('SVGs rendered offscreen:', svgsOffscreen.length);
-            svgsOffscreen.forEach(applySpineToSvg);
-            _mLog('takeover applied offscreen');
-            // Move each pre.mermaid back to its original position
-            // and mark as painted (CSS reveal rule). Single DOM
-            // mutation per chart → single paint frame with the
-            // corrected SVG already in place.
-            anchors.forEach((a) => {
-              a.el.classList.add('is-painted');
-              if (a.parent) {
-                if (a.nextSibling && a.nextSibling.parentNode === a.parent) {
-                  a.parent.insertBefore(a.el, a.nextSibling);
-                } else {
-                  a.parent.appendChild(a.el);
-                }
-              }
-              // Re-apply takeover immediately after move · catches
-              // any post-attach mermaid behaviour (ResizeObserver
-              // re-renders, deferred rAF) that might restyle.
-              a.el.querySelectorAll('svg').forEach(applySpineToSvg);
-            });
-            _mLog('moved back onscreen + reapplied takeover');
-            // Cleanup offscreen host.
-            offscreen.remove();
-          }
-
-          // Safety net · if the takeover errors out for some reason
-          // (script bug, exotic chart type), make sure every chart
-          // becomes visible within 6s so the user at least sees the
-          // chart (even if colours leak) instead of an empty frame.
-          // Normal flow: each successful takeover pass marks its
-          // pre.mermaid as `.is-painted` immediately, so the chart
-          // appears as soon as the first pass succeeds (~16ms).
-          setTimeout(() => {
-            document.querySelectorAll('pre.mermaid:not(.is-painted)').forEach((el) => {
-              el.classList.add('is-painted');
-            });
-          }, 6000);
-
-          // ── Continuous re-apply for the first 5 seconds ──
-          // The user reported strict alternation ("1st wrong, 2nd
-          // right, 3rd wrong, 4th right…") which means a single
-          // setTimeout chain wasn't enough — mermaid's deferred
-          // work was landing in different timing windows on
-          // alternate loads, and my chain was missing odd-numbered
-          // ones.
-          //
-          // Defense in depth: re-apply EVERY 60ms for the first 5
-          // seconds. By the time the user perceives the chart, our
-          // styles have been pinned 80+ times across every possible
-          // mermaid post-render window. After 5s, switch to a pure
-          // MutationObserver (only fires on real DOM changes) so we
-          // keep up with future mutations without the polling cost.
-          //
-          // Each call is idempotent — same selectors set the same
-          // inline-style values, so re-running is a cheap no-op
-          // when nothing changed.
-          applySpinePaletteOnce();                                // sync, before next paint
-          let pollCount = 0;
-          const pollInterval = setInterval(() => {
-            applySpinePaletteOnce();
-            if (++pollCount > 80) clearInterval(pollInterval);    // 80 × 60ms ≈ 4.8s
-          }, 60);
-
-          // Persistent MutationObserver · catches any post-poll
-          // mutations (container resize, font swap, late SSE
-          // re-render). Watches structural changes only — our own
-          // setProperty calls modify the `style` attribute, which
-          // is excluded by `attributes: false` (default), so this
-          // can't loop on itself.
-          document.querySelectorAll('.mermaid svg').forEach((svg) => {
-            const obs = new MutationObserver(() => {
-              requestAnimationFrame(applySpinePaletteOnce);
-            });
-            obs.observe(svg, { childList: true, subtree: true });
-          });
-          // ── Post-render xychart bar slimming ─────────────────────
-          // mermaid xychart-beta renders bars at near-full slot width
-          // regardless of `plotReservedSpacePercent` in some 11.x
-          // versions, and CSS transform: scaleX(...) on the bar rects
-          // is unreliable across browsers (transform-box: fill-box
-          // has Chrome/Safari gaps for SVG rect). Direct attribute
-          // mutation is bulletproof: we walk every rendered xychart
-          // SVG, identify the bar rects via class + geometric
-          // heuristic (rect inside g.plot, height > width, not full-
-          // plot wide), and shrink each rect's `width` to ~50% with
-          // a matching `x` shift so it stays centered in its slot.
-          // Result: a 3-bar chart goes from 3 chunky filler blocks
-          // to 3 thin accents on a wide whitespace canvas — refined-
-          // exhibit, not slide. */
-          try {
-            const xyHosts = document.querySelectorAll('.mermaid');
-            xyHosts.forEach((host) => {
-              const svg = host.querySelector('svg');
-              if (!svg) return;
-              // Only xychart-beta SVGs · skip quadrant / pie / etc.
-              if (!svg.matches('[id^="xychart"], [aria-roledescription="xychart"]')
-                  && !svg.querySelector('g.plot, g.bar-plot, g[class*="-plot"], rect.bar')) {
-                return;
-              }
-              // Catch rects across mermaid 11.x naming conventions.
-              const candidates = svg.querySelectorAll(
-                'rect.bar, g.bar-plot rect, g.plot rect, g[class*="plot"] > rect'
-              );
-              candidates.forEach((rect) => {
-                const x = parseFloat(rect.getAttribute('x'));
-                const w = parseFloat(rect.getAttribute('width'));
-                const h = parseFloat(rect.getAttribute('height'));
-                if (!Number.isFinite(x) || !Number.isFinite(w) || !Number.isFinite(h)) return;
-                // Skip the plot-background rect (full plot width).
-                // Don't filter on h-vs-w ratio — that catches short
-                // bars (small data values) and leaves them at full
-                // width while their taller siblings shrink, giving
-                // a mismatched chart.
-                if (w >= 200) return;
-                const scale = 0.5;
-                const newW = w * scale;
-                rect.setAttribute('width', newW.toFixed(2));
-                rect.setAttribute('x', (x + (w - newW) / 2).toFixed(2));
-              });
-            });
-          } catch (slimErr) {
-            console.warn('[mermaid] xychart bar slimming failed:', slimErr);
-          }
-        } catch (e) {
-          // Per-diagram failures already render as inline error overlays —
-          // log and move on.
-          console.warn("[mermaid] render failed:", e);
-        }
-      }
-    }
   }
 
   /** Subscribe to room SSE so the title live-updates when the brief
@@ -6282,7 +6618,6 @@
   });
 })();
 </script>
-<script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js" defer></script>
 
 </body>
 </html>