privateboard 0.1.3 → 0.1.5

package/public/index.html

@@ -2434,9 +2434,18 @@
      the SSE `room-paused` event arrives. */
   html.pause-pending .input-bar .input-wrap { display: none; }
   html.pause-pending .input-bar .speaking-queue { display: none; }
+  /* Hide the session-control toolbar mid-transition · prevents double-
+     clicking pause while the previous pause is still resolving (and
+     adjourn while we're stopping cleanly is also confusing UX). */
+  html.pause-pending .input-bar .input-bar-actions { display: none; }
   html.pause-pending .input-bar::before {
     content: "⌛ pausing after the current turn finishes…";
     display: block;
+    /* `.input-bar` is now `display: flex` (for the new icon toolbar),
+       so this pseudo is a flex child. Without `flex: 1` it shrinks
+       to its text width instead of spanning the bar. The grow-to-fill
+       restores the pre-flex banner behaviour. */
+    flex: 1 1 auto;
     text-align: center;
     font-family: var(--mono);
     font-size: 11px;
@@ -2487,6 +2496,39 @@
   }
   .resume-btn-lg:hover { background: var(--bg); color: var(--lime); }
 
+  /* Adjourn button on the paused-bar · same shape as resume-btn-lg
+     but secondary (ghost) treatment so resume reads as the primary
+     action when both are present. Goes warn-coloured on hover for
+     the destructive cue (matches the input-bar's ib-adjourn). */
+  .adjourn-btn-lg {
+    display: inline-flex;
+    align-items: center;
+    gap: 5px;
+    padding: 6px 12px;
+    background: transparent;
+    color: var(--text-soft);
+    border: 0.5px solid var(--line-bright);
+    font-family: var(--mono);
+    font-size: 10px;
+    font-weight: 700;
+    line-height: 1.2;
+    cursor: pointer;
+    text-decoration: none;
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+    transition: color 0.12s, border-color 0.12s, background 0.12s;
+  }
+  .adjourn-btn-lg .adjourn-glyph {
+    color: var(--text-faint);
+    letter-spacing: -0.04em;
+  }
+  .adjourn-btn-lg:hover {
+    color: var(--red, #C75450);
+    border-color: var(--red, #C75450);
+    background: var(--bg);
+  }
+  .adjourn-btn-lg:hover .adjourn-glyph { color: var(--red, #C75450); }
+
   /* ─── Adjourned-state controls (room is archived) ─── */
   .adjourned-pill {
     display: inline-flex;
@@ -2739,10 +2781,26 @@
   }
   /* Word / character count · same register as `.brief-meta-line` but
      keep numerals tabular so the figure doesn't jitter while the
-     parent flex-row gets re-rendered (e.g. on tab switch). */
+     parent flex-row gets re-rendered (e.g. on tab switch).
+     Tier colour communicates length-fit for the room's tone:
+       · thin     · text-faint  · "could be fuller"
+       · sweet    · lime        · bullseye
+       · dense    · amber       · past sweet zone, still readable
+       · long     · red soft    · approaching "filed not read"
+       · too-long · red strong  · likely skimmed, not read
+     The sweet band itself is tone-aware (brainstorm < standard <
+     research/critique) — see `_briefWordCount` in app.js. Hover
+     surfaces a tone-aware tip via `title`. */
   .brief-meta-words {
     font-variant-numeric: tabular-nums;
+    cursor: default;
+    transition: color 0.12s;
   }
+  .brief-meta-words.is-thin     { color: var(--text-faint); }
+  .brief-meta-words.is-sweet    { color: var(--lime); }
+  .brief-meta-words.is-dense    { color: var(--amber); }
+  .brief-meta-words.is-long     { color: var(--red); opacity: 0.85; }
+  .brief-meta-words.is-too-long { color: var(--red); font-weight: 700; }
 
   /* Signatures · folded into the meta line, no top border */
   .brief-signed {
@@ -3871,6 +3929,27 @@
     background: var(--bg);
     border: 0.5px solid var(--line);
   }
+  /* Items past index 1 hide by default; the [+ show N more] toggle
+     adds .sa-points-expanded to the parent <ul> to reveal them. */
+  .sa-points .sa-point-extra { display: none; }
+  .sa-points.sa-points-expanded .sa-point-extra { display: grid; }
+  .sa-points-toggle {
+    align-self: flex-start;
+    margin: 6px 0 0;
+    padding: 2px 0;
+    background: transparent;
+    border: none;
+    font-family: var(--mono);
+    font-size: 10px;
+    letter-spacing: 0.04em;
+    color: var(--text-faint);
+    cursor: pointer;
+  }
+  .sa-points-toggle:hover { color: var(--text-soft); }
+  .sa-points-toggle:focus-visible {
+    outline: 1px dotted var(--text-faint);
+    outline-offset: 2px;
+  }
   .sa-point-mark {
     color: var(--lime);
     font-size: 9.5px;
@@ -8811,14 +8890,123 @@
     background: var(--panel);
   }
 
-  /* Input bar — sits inside the chat column */
+  /* Input bar — sits inside the chat column. Live state hosts a
+     small action toolbar (pause / adjourn) on the left, then the
+     input pill which grows to fill remaining width. */
   .input-bar {
     flex: 0 0 auto;
     border-top: 0.5px solid var(--line-bright);
     padding: 8px 14px;
     background: var(--panel-2);
+    display: flex;
+    align-items: stretch;
+    gap: 10px;
+  }
+  /* Session-control icons · sit to the LEFT of the input pill as
+     bare glyph buttons. Borderless in the resting state so they
+     don't compete with the input pill's hairline frame.
+     ──────────────────────────────────────────────────────────────
+     Visual vocabulary mirrors the sidebar's nav icons (Lucide-style
+     stroked SVG, 16px, mask-image fill via currentColor). Hover
+     state matches the sidebar's `.new-btn:hover` — panel-2 bg + text
+     colour shift, no accent tint. The destructive cue for adjourn
+     lives in the confirm overlay, not in the icon, so neither
+     button needs an accent colour to broadcast severity here. Hit
+     target 32×32; icon 16×16 sits centred inside it. */
+  .input-bar-actions {
+    display: flex;
+    align-items: center;
+    gap: 2px;
+  }
+  .ib-action {
+    position: relative;
+    width: 32px;
+    height: 32px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    background: transparent;
+    border: none;
+    color: var(--text-faint);
+    cursor: pointer;
+    transition: color 0.12s, background 0.12s;
+  }
+  .ib-action::before {
+    content: "";
+    width: 16px;
+    height: 16px;
+    background-color: currentColor;
+    -webkit-mask-image: var(--icon, none);
+            mask-image: var(--icon, none);
+    -webkit-mask-repeat: no-repeat;
+            mask-repeat: no-repeat;
+    -webkit-mask-position: center;
+            mask-position: center;
+    -webkit-mask-size: 16px 16px;
+            mask-size: 16px 16px;
+  }
+  .ib-action:hover { background: var(--panel-2); color: var(--text); }
+  /* Hover tooltip · CSS-only via ::after + data-tip. The native
+     `title` attribute pops after a 1-2s OS delay, which is sluggish;
+     this version reveals at ~300ms — slow enough not to be noisy
+     when the cursor only passes through, fast enough to feel
+     responsive on intentional dwell. Mirrors the .note-tip visual
+     register (panel-2 surface, mono micro-type, hairline frame).
+     Pointer-events:none so the tooltip never blocks the hover that
+     triggers it. */
+  .ib-action::after {
+    content: attr(data-tip);
+    position: absolute;
+    bottom: calc(100% + 8px);
+    /* Anchor the tooltip's LEFT edge to the button's left edge so
+       the tip extends RIGHTWARD into the chat column. Centered
+       anchoring would push the left half past the chat-column edge
+       where `.body-grid { overflow: hidden }` (line ~215) clips it
+       behind the sidebar — the user reported this as "tip gets cut
+       off by the sidebar". Right-anchored gives clearance because
+       the chat column has plenty of width to the right. */
+    left: 0;
+    transform: translateY(3px);
+    background: var(--panel-2);
+    border: 0.5px solid var(--line-strong);
+    padding: 5px 9px;
+    font-family: var(--mono);
+    font-size: 10px;
+    letter-spacing: 0.04em;
+    color: var(--text);
+    white-space: nowrap;
+    pointer-events: none;
+    opacity: 0;
+    visibility: hidden;
+    box-shadow: 0 4px 14px -6px rgba(0, 0, 0, 0.55);
+    /* On exit the visibility flip is delayed past the opacity fade
+       so the tooltip stays interactable until it has fully
+       disappeared visually. */
+    transition: opacity 0.14s ease, transform 0.14s ease, visibility 0s linear 0.18s;
+    z-index: 50;
+  }
+  .ib-action:hover::after,
+  .ib-action:focus-visible::after {
+    opacity: 1;
+    visibility: visible;
+    transform: translateY(0);
+    /* On entry · 0.3s delay before the fade starts; visibility
+       flips immediately so the transform animates from offset. */
+    transition: opacity 0.14s ease 0.3s, transform 0.14s ease 0.3s, visibility 0s linear 0.3s;
+  }
+  /* Pause · Lucide pause (two rounded vertical bars). */
+  .ib-pause {
+    --icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='14' y='3' width='5' height='18' rx='1'/><rect x='5' y='3' width='5' height='18' rx='1'/></svg>");
+  }
+  /* Adjourn · Lucide log-out (door + arrow exit). Reads as "leave
+     this session"; the confirm overlay clarifies brief filing. */
+  .ib-adjourn {
+    --icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/><polyline points='16 17 21 12 16 7'/><line x1='21' x2='9' y1='12' y2='12'/></svg>");
   }
   .input-wrap {
+    flex: 1 1 auto;
+    min-width: 0;
     background: var(--bg);
     border: 0.5px solid var(--line-strong);
     padding: 0 8px;
@@ -9073,6 +9261,17 @@
           </div>
 
           <footer class="input-bar">
+            <!-- Session-control toolbar · pause + adjourn live left of
+                 the input pill so they're reachable without leaving
+                 the typing area. Both reuse the existing data-pause /
+                 data-adjourn handlers; no new backend routes. The
+                 visual grammar matches head-actions (mono caps,
+                 brackets) but at a tighter scale. Adjourn turns warn
+                 on hover to flag its destructiveness. -->
+            <div class="input-bar-actions">
+              <button type="button" class="ib-action ib-pause" data-pause aria-label="Pause discussion" data-tip="Pause · you can resume later"></button>
+              <button type="button" class="ib-action ib-adjourn" data-adjourn aria-label="Adjourn the room" data-tip="Adjourn · file the report and end"></button>
+            </div>
             <div class="input-wrap">
               <input type="text" placeholder="interject anytime · @first_p to direct a director..." data-send-input>
               <button class="send-btn" data-send-button>[ Send ]</button>
@@ -9085,6 +9284,7 @@
             </div>
             <div class="paused-bar-actions">
               <a href="?status=live" class="resume-btn-lg">[ ▶ Resume Discussion ]</a>
+              <a href="#" class="adjourn-btn-lg" data-adjourn>[ <span class="adjourn-glyph">⏏</span> Adjourn ]</a>
             </div>
           </footer>
 

package/public/new-agent.js

@@ -8,9 +8,11 @@
 (function () {
   const MODEL_GROUPS = [
     { provider: "anthropic", models: [
-      { v: "sonnet-4-6", name: "Sonnet 4.6", deck: "balanced · default" },
-      { v: "opus-4-7",   name: "Opus 4.7",   deck: "deep reasoning" },
-      { v: "haiku-4-5",  name: "Haiku 4.5",  deck: "fast · low-cost" }
+      { v: "sonnet-4-6",    name: "Sonnet 4.6",    deck: "balanced · default" },
+      { v: "opus-4-7",      name: "Opus 4.7",      deck: "deep reasoning" },
+      { v: "opus-4-6",      name: "Opus 4.6",      deck: "prior-gen flagship" },
+      { v: "opus-4-6-fast", name: "Opus 4.6 Fast", deck: "faster 4.6 · same intelligence" },
+      { v: "haiku-4-5",     name: "Haiku 4.5",     deck: "fast · low-cost" }
     ]},
     { provider: "openai", models: [
       { v: "gpt-5-5",      name: "GPT-5.5",      deck: "flagship · 1M ctx" },

package/public/report/spines/a16z-thesis.css

@@ -49,15 +49,21 @@
      as PingFang globally (user preference). Songti SC remains as a
      last-resort fallback for headless contexts that can't reach
      PingFang's font directory. */
-  --serif: "Charter", "Source Serif Pro", "Iowan Old Style", Georgia,
+  /* CJK dispatch handles lead each cascade · see report.html
+     @font-face block. Without "cjk-*" first, Chrome's print pipeline
+     lands on Arial mid-cascade and renders Chinese as .notdef. */
+  --serif: "cjk-serif",
+           "Charter", "Source Serif Pro", "Iowan Old Style", Georgia,
            "PingFang SC", "PingFang TC", "Hiragino Sans GB",
            "Source Han Sans CN", "Noto Sans CJK SC",
            "Songti SC", "STSong", serif;
-  --sans: "Inter", "Helvetica Neue", "Arial", -apple-system, BlinkMacSystemFont,
+  --sans: "cjk-sans",
+          "Inter", "Helvetica Neue", "Arial", -apple-system, BlinkMacSystemFont,
           "PingFang SC", "PingFang TC", "Hiragino Sans GB",
           "Source Han Sans CN", "Noto Sans CJK SC",
           "Songti SC", "STSong", sans-serif;
-  --mono: "SF Mono", "JetBrains Mono", "Menlo",
+  --mono: "cjk-mono",
+          "SF Mono", "JetBrains Mono", "Menlo",
           "PingFang SC", "PingFang TC", "Hiragino Sans GB",
           "Source Han Sans CN", "Songti SC", "STSong", monospace;
 }
@@ -1086,9 +1092,8 @@ html, body {
   background: transparent;
   border-top: 1px solid var(--gold);
   border-bottom: 1px solid var(--rule);
-  padding: 22px 0 18px;
+  padding: 18px 0 14px;
   margin: 20px 0 26px;
-  min-height: 360px;
   text-align: center;
   font-family: var(--mono);
   font-size: 11px;

package/public/report/spines/anthropic-essay.css

@@ -32,15 +32,22 @@
   /* Latin remains serif (Tiempos / Charter — anthropic signature).
      CJK falls to PingFang SC first per global preference; Songti
      remains as a last-resort fallback. */
-  --serif: "Tiempos Headline", "Tiempos", "Source Serif Pro", "Charter",
+  /* CJK dispatch handles (cjk-serif/sans/mono) lead each cascade so
+     Chrome's print pipeline routes CJK code points to PingFang/Songti
+     via @font-face unicode-range. Without these, Chrome lands on
+     Arial mid-cascade and renders Chinese as .notdef glyphs in PDFs. */
+  --serif: "cjk-serif",
+           "Tiempos Headline", "Tiempos", "Source Serif Pro", "Charter",
            "Iowan Old Style", "Palatino", Georgia,
            "PingFang SC", "PingFang TC", "Hiragino Sans GB",
            "Source Han Sans CN", "Noto Sans CJK SC",
            "Songti SC", "STSong", serif;
-  --sans: "Söhne", "Styrene B", "Inter", "Helvetica Neue", -apple-system,
+  --sans: "cjk-sans",
+          "Söhne", "Styrene B", "Inter", "Helvetica Neue", -apple-system,
           BlinkMacSystemFont, system-ui,
           "PingFang SC", "Hiragino Sans GB", "Source Han Sans CN", "Noto Sans CJK SC", sans-serif;
-  --mono: "Söhne Mono", "JetBrains Mono", "SF Mono",
+  --mono: "cjk-mono",
+          "Söhne Mono", "JetBrains Mono", "SF Mono",
           "PingFang SC", "Source Han Sans CN", monospace;
 }
 
@@ -602,7 +609,7 @@ html, body {
 .body section.section-methodology strong { color: var(--ink); font-family: var(--sans); font-size: 15px; font-weight: 600; }
 
 .body pre.codeblock { background: var(--surface); border: 1px solid var(--rule); padding: 14px; font-family: var(--mono); font-size: 14px; color: var(--ink-mid); border-radius: 3px; }
-.body pre.mermaid { background: var(--surface); border-top: 2px solid var(--clay); border-bottom: 1px solid var(--rule); padding: 28px 24px 24px; margin: 22px 0 28px; min-height: 380px; text-align: center; font-family: var(--mono); font-size: 12px; color: var(--ink-faint); }
+.body pre.mermaid { background: var(--surface); border-top: 2px solid var(--clay); border-bottom: 1px solid var(--rule); padding: 20px 18px 18px; margin: 22px 0 28px; text-align: center; font-family: var(--mono); font-size: 12px; color: var(--ink-faint); }
 .body pre.mermaid svg text { font-family: var(--serif) !important; }
 
 .foot-rule {

package/public/report/spines/boardroom-dark.css

@@ -51,12 +51,17 @@
      of every cascade — they're guaranteed-present on Mac and serve
      as a last-resort glyph source if the preferred CJK families
      aren't available (some print / headless contexts). */
-  --mono: "Human Sans", "Inter", -apple-system, BlinkMacSystemFont,
+  /* CJK dispatch handles lead each cascade · see report.html
+     @font-face block. Without "cjk-*" first, Chrome's print pipeline
+     lands on Arial mid-cascade and renders Chinese as .notdef. */
+  --mono: "cjk-mono",
+          "Human Sans", "Inter", -apple-system, BlinkMacSystemFont,
           "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
           "Source Han Sans CN", "Noto Sans CJK SC",
           "Songti SC", "STSong",
           "Segoe UI", system-ui, sans-serif;
-  --sans: "Human Sans", "Inter", -apple-system, BlinkMacSystemFont,
+  --sans: "cjk-sans",
+          "Human Sans", "Inter", -apple-system, BlinkMacSystemFont,
           "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
           "Source Han Sans CN", "Noto Sans CJK SC",
           "Songti SC", "STSong",
@@ -69,7 +74,8 @@
      fall through to PingFang SC first (sans) — user preference is
      that Chinese reads in PingFang globally. Songti / Source Han
      Serif sit deep as last-resort fallbacks. */
-  --serif: "Charter", "Source Serif Pro", "Iowan Old Style",
+  --serif: "cjk-serif",
+           "Charter", "Source Serif Pro", "Iowan Old Style",
            "Georgia",
            "PingFang SC", "PingFang TC", "Hiragino Sans GB",
            "Source Han Sans CN", "Noto Sans CJK SC",
@@ -1047,7 +1053,7 @@ html, body {
   background: var(--panel-2);
   border-top: 2px solid var(--text);
   border-bottom: 1px solid var(--line-bright);
-  padding: 28px 24px 24px;
+  padding: 20px 18px 18px;
   margin: 22px 0 28px;
   text-align: center;
   overflow-x: auto;
@@ -1055,7 +1061,11 @@ html, body {
   font-size: 11px;
   color: var(--text-faint);
   line-height: 1.4;
-  min-height: 360px;
+  /* No min-height · the chart's own dimensions (set in mermaid init)
+     drive the frame size. Forcing 360px left empty bands above /
+     below smaller diagrams (sequence, journey, mindmap) and pushed
+     the design toward "presentation slide" rather than "inline
+     exhibit". Refined-compact = the frame sizes to its content. */
 }
 .body pre.mermaid svg {
   max-width: 100%;

package/public/report/spines/gartner-note.css

@@ -28,10 +28,15 @@
   /* Cross-spine token aliases · used by the unified design system. */
   --accent: var(--brand);
   --warn: var(--red);
-  --sans: "Inter", "Helvetica Neue", "Arial", -apple-system, BlinkMacSystemFont,
+  /* CJK dispatch handles lead each cascade · see report.html
+     @font-face block. Without "cjk-*" first, Chrome's print pipeline
+     lands on Arial mid-cascade and renders Chinese as .notdef. */
+  --sans: "cjk-sans",
+          "Inter", "Helvetica Neue", "Arial", -apple-system, BlinkMacSystemFont,
           "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Source Han Sans CN",
           "Noto Sans CJK SC", sans-serif;
-  --mono: "SF Mono", "JetBrains Mono", "Menlo",
+  --mono: "cjk-mono",
+          "SF Mono", "JetBrains Mono", "Menlo",
           "PingFang SC", "Source Han Sans CN", monospace;
 }
 
@@ -431,7 +436,7 @@ html, body {
 .body section.section-methodology strong { color: var(--ink-soft); font-family: var(--mono); font-size: 12px; }
 
 .body pre.codeblock { background: var(--bg-soft); border: 1px solid var(--rule); padding: 12px 14px; font-family: var(--mono); font-size: 13px; color: var(--ink-soft); }
-.body pre.mermaid { background: var(--bg); border-top: 2px solid var(--brand); border-bottom: 1px solid var(--rule); padding: 28px 24px 24px; margin: 22px 0 28px; min-height: 380px; text-align: center; font-family: var(--mono); font-size: 11px; color: var(--ink-faint); }
+.body pre.mermaid { background: var(--bg); border-top: 2px solid var(--brand); border-bottom: 1px solid var(--rule); padding: 20px 18px 18px; margin: 22px 0 28px; text-align: center; font-family: var(--mono); font-size: 11px; color: var(--ink-faint); }
 .body pre.mermaid svg text { font-family: var(--sans) !important; }
 
 .foot-rule {

package/public/report/spines/mckinsey-deck.css

@@ -30,10 +30,15 @@
      report.html. */
   --accent: var(--blue);
   --warn: var(--red);
-  --sans: "Inter", "Helvetica Neue", "Arial", -apple-system, BlinkMacSystemFont,
+  /* CJK dispatch handles lead each cascade · see report.html
+     @font-face block. Without "cjk-*" first, Chrome's print pipeline
+     lands on Arial mid-cascade and renders Chinese as .notdef. */
+  --sans: "cjk-sans",
+          "Inter", "Helvetica Neue", "Arial", -apple-system, BlinkMacSystemFont,
           "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Source Han Sans CN",
           "Noto Sans CJK SC", sans-serif;
-  --mono: "SF Mono", "JetBrains Mono", "Menlo",
+  --mono: "cjk-mono",
+          "SF Mono", "JetBrains Mono", "Menlo",
           "PingFang SC", "Source Han Sans CN", monospace;
 }
 
@@ -419,7 +424,7 @@ html, body {
 .body section.section-methodology strong { color: var(--ink-soft); font-family: var(--mono); font-size: 12px; }
 
 .body pre.codeblock { background: var(--soft); border: 1px solid var(--rule); padding: 14px; font-family: var(--mono); font-size: 13px; color: var(--ink-soft); }
-.body pre.mermaid { background: var(--bg); border-top: 2px solid var(--navy); border-bottom: 1px solid var(--rule); padding: 28px 24px 24px; margin: 22px 0 28px; min-height: 380px; text-align: center; font-family: var(--mono); font-size: 11px; color: var(--ink-faint); }
+.body pre.mermaid { background: var(--bg); border-top: 2px solid var(--navy); border-bottom: 1px solid var(--rule); padding: 20px 18px 18px; margin: 22px 0 28px; text-align: center; font-family: var(--mono); font-size: 11px; color: var(--ink-faint); }
 .body pre.mermaid svg text { font-family: var(--sans) !important; }
 
 .foot-rule {

package/public/report/spines/openai-paper.css

@@ -21,10 +21,15 @@
   /* Cross-spine token aliases · used by the unified design system. */
   --accent: var(--teal);
   --warn: var(--red);
-  --sans: "Söhne", "Inter", "Helvetica Neue", -apple-system, BlinkMacSystemFont, system-ui,
+  /* CJK dispatch handles lead each cascade · see report.html
+     @font-face block. Without "cjk-*" first, Chrome's print pipeline
+     lands on Arial mid-cascade and renders Chinese as .notdef. */
+  --sans: "cjk-sans",
+          "Söhne", "Inter", "Helvetica Neue", -apple-system, BlinkMacSystemFont, system-ui,
           "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Source Han Sans CN",
           "Noto Sans CJK SC", sans-serif;
-  --mono: "Söhne Mono", "JetBrains Mono", "SF Mono", "Menlo",
+  --mono: "cjk-mono",
+          "Söhne Mono", "JetBrains Mono", "SF Mono", "Menlo",
           "PingFang SC", "Source Han Sans CN", monospace;
 }
 
@@ -412,7 +417,7 @@ html, body {
 .body section.section-methodology strong { color: var(--ink-soft); font-family: var(--mono); }
 
 .body pre.codeblock { background: var(--paper); border: 1px solid var(--rule); padding: 14px 16px; font-family: var(--mono); font-size: 13px; color: var(--ink-soft); border-radius: 4px; }
-.body pre.mermaid { background: var(--paper); border-top: 2px solid var(--ink); border-bottom: 1px solid var(--rule); border-radius: 4px; padding: 28px 24px 24px; margin: 22px 0 28px; min-height: 380px; text-align: center; font-family: var(--mono); font-size: 12px; color: var(--ink-faint); }
+.body pre.mermaid { background: var(--paper); border-top: 2px solid var(--ink); border-bottom: 1px solid var(--rule); border-radius: 4px; padding: 20px 18px 18px; margin: 22px 0 28px; text-align: center; font-family: var(--mono); font-size: 12px; color: var(--ink-faint); }
 .body pre.mermaid svg text { font-family: var(--sans) !important; }
 
 .foot-rule {