pmx-canvas 0.7.3 → 0.8.2

package/src/client/theme/global.css

@@ -1,3 +1,85 @@
+/* ── Bundled fonts (IBM Plex, OFL-1.1; copied to dist/canvas/fonts by scripts/copy-fonts.ts) ── */
+@font-face {
+  font-family: "IBM Plex Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+@font-face {
+  font-family: "IBM Plex Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("fonts/ibm-plex-sans-latin-ext-400-normal.woff2") format("woff2");
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+@font-face {
+  font-family: "IBM Plex Sans";
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url("fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+@font-face {
+  font-family: "IBM Plex Sans";
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url("fonts/ibm-plex-sans-latin-ext-500-normal.woff2") format("woff2");
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+@font-face {
+  font-family: "IBM Plex Sans";
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url("fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+@font-face {
+  font-family: "IBM Plex Sans";
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url("fonts/ibm-plex-sans-latin-ext-600-normal.woff2") format("woff2");
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+@font-face {
+  font-family: "IBM Plex Mono";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+@font-face {
+  font-family: "IBM Plex Mono";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("fonts/ibm-plex-mono-latin-ext-400-normal.woff2") format("woff2");
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+@font-face {
+  font-family: "IBM Plex Mono";
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url("fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+@font-face {
+  font-family: "IBM Plex Mono";
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url("fonts/ibm-plex-mono-latin-ext-500-normal.woff2") format("woff2");
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
 :root {
   /* ── Core palette (dark · ink + cyan) ────────────────────── */
   --c-bg: #081524;
@@ -11,40 +93,27 @@
   --c-accent: #4BBCFF;
   --c-ok: #2fd07f;
   --c-warn: #f4c542;
-  --c-warn-alt: #FFB300;
   --c-danger: #ff6a7f;
-  --c-purple: #b07aff;
-  --c-thinking: #B388FF;
-  --c-subagent: #00E5FF;
+  /* ── Meaning (one hue per meaning in every theme; see docs/design.md) ── */
+  --c-pin: #4BBCFF;
+  --c-on-pin: #081524;
+  --c-agent: #B388FF;
+  --c-subagent: #E879F9;
+  --c-rel-supports: #5FCFC0;
+  --c-rel-contradicts: #E59B6B;
+  --c-rel-cites: #7C9CFF;
+  --c-rel-derived: #D5DEEA;
+  --c-rel-informs: #E58FB0;
+  --c-rel-related: #8ea3bd;
   --c-input-bg: #0a1729;
   --c-dot-grid: rgba(75, 188, 255, 0.08);
   --c-panel-overlay: rgba(8, 21, 36, 0.6);
   --c-panel-glass: rgba(15, 29, 49, 0.92);
   --c-shadow: rgba(0, 0, 0, 0.3);
   --c-shadow-heavy: rgba(0, 0, 0, 0.5);
-  --c-glow-accent: rgba(75, 188, 255, 0.15);
   --c-surface-hover: rgba(255, 255, 255, 0.06);
   --c-surface-subtle: rgba(255, 255, 255, 0.03);
   --c-surface-th: rgba(255, 255, 255, 0.04);
-  --c-accent-8: rgba(75, 188, 255, 0.08);
-  --c-accent-10: rgba(75, 188, 255, 0.1);
-  --c-accent-12: rgba(75, 188, 255, 0.12);
-  --c-accent-15: rgba(75, 188, 255, 0.15);
-  --c-accent-25: rgba(75, 188, 255, 0.25);
-  --c-accent-30: rgba(75, 188, 255, 0.3);
-  --c-accent-40: rgba(75, 188, 255, 0.4);
-  --c-ok-10: rgba(47, 208, 127, 0.1);
-  --c-ok-12: rgba(47, 208, 127, 0.12);
-  --c-ok-20: rgba(47, 208, 127, 0.2);
-  --c-ok-25: rgba(47, 208, 127, 0.25);
-  --c-warn-10: rgba(244, 197, 66, 0.1);
-  --c-warn-12: rgba(244, 197, 66, 0.12);
-  --c-warn-15: rgba(244, 197, 66, 0.15);
-  --c-warn-20: rgba(244, 197, 66, 0.2);
-  --c-warn-22: rgba(244, 197, 66, 0.22);
-  --c-warn-30: rgba(244, 197, 66, 0.3);
-  --c-warn-60: rgba(244, 197, 66, 0.6);
-  --c-danger-12: rgba(255, 106, 127, 0.12);
   --c-line-30: rgba(27, 44, 68, 0.3);
   --c-contrast-fg: #081524;
   --c-accent-hover: #6ECAFF;
@@ -52,12 +121,30 @@
   --c-canvas-wash: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(0, 0, 0, 0));
   --c-annotation: #F4EFE6;
   /* ── Non-color tokens ────────────────────────────────────── */
-  --font: "IBM Plex Sans", "SF Pro Text", "Avenir Next", system-ui, sans-serif;
-  --mono: "IBM Plex Mono", "SF Mono", "Fira Code", monospace;
+  --font-ui: "IBM Plex Sans", "SF Pro Text", "Avenir Next", system-ui, sans-serif;
+  --font-code: "IBM Plex Mono", "SF Mono", "Fira Code", monospace;
   --radius: 10px;
   --radius-sm: 6px;
   /* Shared height of the top bar and the session panel header. */
   --hud-bar-height: 44px;
+  /* ── Scale (same in every theme; see docs/design.md) ───────── */
+  --fs-meta: 11px;
+  --fs-ui: 12px;
+  --fs-body: 13px;
+  --fs-title: 15px;
+  --fs-heading: 20px;
+  --space-1: 4px;
+  --space-2: 8px;
+  --space-3: 12px;
+  --space-4: 16px;
+  --space-6: 24px;
+  --space-8: 32px;
+  --r-control: 6px;
+  --r-node: 10px;
+  --r-overlay: 14px;
+  --r-pill: 999px;
+  --e-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 6px 20px rgba(0, 0, 0, 0.24);
+  --e-2: 0 10px 30px rgba(0, 0, 0, 0.6);
 }
 
 .board-node, .md-card-preview { display: flex; flex-direction: column; height: 100%; min-height: 0; }
@@ -66,73 +153,63 @@
 .board-node-title { display: block; font-size: 17px; line-height: 1.35; margin-bottom: 6px; }
 .board-node-meta { color: var(--c-dim); font-size: 11px; line-height: 1.5; }
 .board-node-summary { color: var(--c-text-soft); font-size: 13px; line-height: 1.6; margin: 14px 0; }
-.board-node-open { display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; width: 100%; padding: 10px 16px; border: 0; border-top: 1px solid var(--c-line); background: var(--c-panel); color: var(--c-accent); font: 500 12px var(--font); text-align: left; cursor: pointer; }
-.board-node-open:hover:not(:disabled) { background: var(--c-accent-8); }
+.board-node-open { display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; width: 100%; padding: 10px 16px; border: 0; border-top: 1px solid var(--c-line); background: var(--c-panel); color: var(--c-accent); font: 500 12px var(--font-ui); text-align: left; cursor: pointer; }
+.board-node-open:hover:not(:disabled) { background: color-mix(in srgb, var(--c-accent) 8%, transparent); }
 .board-node-open:disabled { color: var(--c-dim); cursor: default; }
 .md-card-content { flex: 1; min-height: 0; overflow: auto; }
 .md-card-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; border-top: 1px solid var(--c-line); padding: 6px 36px 6px 8px; background: var(--c-panel); }
-.md-card-actions button { border: 1px solid transparent; border-radius: var(--radius-sm); background: transparent; color: var(--c-dim); padding: 4px 8px; font: 500 11px var(--font); cursor: pointer; }
-.md-card-actions button:hover { color: var(--c-text); background: var(--c-accent-8); }
-.md-card-actions .md-readme-btn[aria-pressed="true"] { color: var(--c-accent); background: var(--c-accent-8); border-color: var(--c-accent-25); }
+.md-card-actions button { border: 1px solid transparent; border-radius: var(--radius-sm); background: transparent; color: var(--c-dim); padding: 4px 8px; font: 500 11px var(--font-ui); cursor: pointer; }
+.md-card-actions button:hover { color: var(--c-text); background: color-mix(in srgb, var(--c-accent) 8%, transparent); }
+.md-card-actions .md-readme-btn[aria-pressed="true"] { color: var(--c-accent); background: color-mix(in srgb, var(--c-accent) 8%, transparent); border-color: color-mix(in srgb, var(--c-accent) 25%, transparent); }
 .md-card-edit { margin-left: auto; }
 .board-node-open:focus-visible, .md-card-actions button:focus-visible { outline: 2px solid var(--c-accent); outline-offset: -2px; }
 .canvas-node[data-node-type="markdown"] .node-body,
 .canvas-node[data-node-type="board"] .node-body { padding: 0; }
 .md-card-content { padding: 10px 14px; }
 
-:root[data-theme="light"] {
-  /* ── Core palette (light · paper + ink) ──────────────────── */
-  --c-bg: #F4EFE6;
-  --c-panel: #EFE7D4;
-  --c-panel-soft: #ECE4D0;
-  --c-line: #D6CBB4;
-  --c-text: #081524;
+:root[data-theme="daylight"] {
+  /* ── Core palette (Daylight · neutral paper + ink) ───────── */
+  --c-bg: #F6F7F9;
+  --c-panel: #FFFFFF;
+  --c-panel-soft: #F2F4F7;
+  --c-line: #DDE2E9;
+  --c-text: #0B1726;
   --c-text-soft: #3d4d63;
-  --c-muted: #5c6b80;
-  --c-dim: #8794a6;
+  --c-muted: #55657a;
+  --c-dim: #6f7d90;
   --c-accent: #1A7ABF;
-  --c-ok: #1a9f55;
-  --c-warn: #c89b2a;
-  --c-warn-alt: #b8860b;
-  --c-danger: #d32f2f;
-  --c-purple: #7c4dff;
-  --c-thinking: #7C4DFF;
-  --c-subagent: #00838F;
-  --c-input-bg: #FAF6EE;
-  --c-dot-grid: rgba(8, 21, 36, 0.08);
-  --c-panel-overlay: rgba(244, 239, 230, 0.88);
-  --c-panel-glass: rgba(239, 231, 212, 0.88);
+  --c-ok: #1E7F51;
+  --c-warn: #94600A;
+  --c-danger: #B8344A;
+  /* ── Meaning (one hue per meaning in every theme; see docs/design.md) ── */
+  --c-pin: #1A7ABF;
+  --c-on-pin: #FFFFFF;
+  --c-agent: #7C4DDB;
+  --c-subagent: #A83BB0;
+  --c-rel-supports: #1E8C80;
+  --c-rel-contradicts: #B8572A;
+  --c-rel-cites: #4257C9;
+  --c-rel-derived: #4A5566;
+  --c-rel-informs: #B03F72;
+  --c-rel-related: #5c6b80;
+  /* Light themes: ink-tinted shadows (the drawn black ones are for dark surfaces). */
+  --e-1: 0 1px 2px rgba(8, 21, 36, 0.1), 0 6px 20px rgba(8, 21, 36, 0.08);
+  --e-2: 0 10px 30px rgba(8, 21, 36, 0.18);
+  --c-input-bg: #FFFFFF;
+  --c-dot-grid: rgba(11, 23, 38, 0.12);
+  --c-panel-overlay: rgba(246, 247, 249, 0.88);
+  --c-panel-glass: rgba(255, 255, 255, 0.88);
   --c-shadow: rgba(8, 21, 36, 0.08);
   --c-shadow-heavy: rgba(8, 21, 36, 0.16);
-  --c-glow-accent: rgba(26, 122, 191, 0.12);
   --c-surface-hover: rgba(8, 21, 36, 0.06);
   --c-surface-subtle: rgba(8, 21, 36, 0.03);
   --c-surface-th: rgba(8, 21, 36, 0.04);
-  --c-accent-8: rgba(26, 122, 191, 0.08);
-  --c-accent-10: rgba(26, 122, 191, 0.1);
-  --c-accent-12: rgba(26, 122, 191, 0.12);
-  --c-accent-15: rgba(26, 122, 191, 0.15);
-  --c-accent-25: rgba(26, 122, 191, 0.25);
-  --c-accent-30: rgba(26, 122, 191, 0.3);
-  --c-accent-40: rgba(26, 122, 191, 0.4);
-  --c-ok-10: rgba(26, 159, 85, 0.1);
-  --c-ok-12: rgba(26, 159, 85, 0.12);
-  --c-ok-20: rgba(26, 159, 85, 0.2);
-  --c-ok-25: rgba(26, 159, 85, 0.25);
-  --c-warn-10: rgba(200, 155, 42, 0.1);
-  --c-warn-12: rgba(200, 155, 42, 0.12);
-  --c-warn-15: rgba(200, 155, 42, 0.15);
-  --c-warn-20: rgba(200, 155, 42, 0.2);
-  --c-warn-22: rgba(200, 155, 42, 0.22);
-  --c-warn-30: rgba(200, 155, 42, 0.3);
-  --c-warn-60: rgba(200, 155, 42, 0.6);
-  --c-danger-12: rgba(211, 47, 47, 0.12);
-  --c-line-30: rgba(214, 203, 180, 0.5);
-  --c-contrast-fg: #F4EFE6;
+  --c-line-30: rgba(221, 226, 233, 0.5);
+  --c-contrast-fg: #FFFFFF;
   --c-accent-hover: #1588CE;
   --c-warn-hover: #dab040;
   --c-canvas-wash: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(8, 21, 36, 0.02));
-  --c-annotation: #081524;
+  --c-annotation: #0B1726;
 }
 
 :root[data-theme="high-contrast"] {
@@ -147,40 +224,27 @@
   --c-accent: #00ffff;
   --c-ok: #00ff00;
   --c-warn: #ffff00;
-  --c-warn-alt: #ffcc00;
   --c-danger: #ff0000;
-  --c-purple: #e040fb;
-  --c-thinking: #E040FB;
-  --c-subagent: #18FFFF;
+  /* ── Meaning (one hue per meaning in every theme; see docs/design.md) ── */
+  --c-pin: #00ffff;
+  --c-on-pin: #000000;
+  --c-agent: #e040fb;
+  --c-subagent: #ff99ff;
+  --c-rel-supports: #00e5c0;
+  --c-rel-contradicts: #ff8a00;
+  --c-rel-cites: #8c9eff;
+  --c-rel-derived: #ffffff;
+  --c-rel-informs: #ff80ab;
+  --c-rel-related: #aaaaaa;
   --c-input-bg: #111111;
   --c-dot-grid: rgba(255, 255, 255, 0.12);
   --c-panel-overlay: rgba(0, 0, 0, 0.85);
   --c-panel-glass: rgba(0, 0, 0, 0.95);
   --c-shadow: rgba(0, 0, 0, 0.5);
   --c-shadow-heavy: rgba(0, 0, 0, 0.7);
-  --c-glow-accent: rgba(0, 255, 255, 0.2);
   --c-surface-hover: rgba(255, 255, 255, 0.1);
   --c-surface-subtle: rgba(255, 255, 255, 0.05);
   --c-surface-th: rgba(255, 255, 255, 0.08);
-  --c-accent-8: rgba(0, 255, 255, 0.08);
-  --c-accent-10: rgba(0, 255, 255, 0.1);
-  --c-accent-12: rgba(0, 255, 255, 0.12);
-  --c-accent-15: rgba(0, 255, 255, 0.15);
-  --c-accent-25: rgba(0, 255, 255, 0.25);
-  --c-accent-30: rgba(0, 255, 255, 0.3);
-  --c-accent-40: rgba(0, 255, 255, 0.4);
-  --c-ok-10: rgba(0, 255, 0, 0.1);
-  --c-ok-12: rgba(0, 255, 0, 0.12);
-  --c-ok-20: rgba(0, 255, 0, 0.2);
-  --c-ok-25: rgba(0, 255, 0, 0.25);
-  --c-warn-10: rgba(255, 255, 0, 0.1);
-  --c-warn-12: rgba(255, 255, 0, 0.12);
-  --c-warn-15: rgba(255, 255, 0, 0.15);
-  --c-warn-20: rgba(255, 255, 0, 0.2);
-  --c-warn-22: rgba(255, 255, 0, 0.22);
-  --c-warn-30: rgba(255, 255, 0, 0.3);
-  --c-warn-60: rgba(255, 255, 0, 0.6);
-  --c-danger-12: rgba(255, 0, 0, 0.12);
   --c-line-30: rgba(255, 255, 255, 0.3);
   --c-contrast-fg: #000000;
   --c-accent-hover: #33ffff;
@@ -202,40 +266,27 @@
   --c-accent: #8B96FF;
   --c-ok: #34D399;
   --c-warn: #F5C452;
-  --c-warn-alt: #FFB300;
   --c-danger: #FF6B8A;
-  --c-purple: #B388FF;
-  --c-thinking: #B388FF;
-  --c-subagent: #22D3EE;
+  /* ── Meaning (one hue per meaning in every theme; see docs/design.md) ── */
+  --c-pin: #4BBCFF;
+  --c-on-pin: #081524;
+  --c-agent: #B388FF;
+  --c-subagent: #E879F9;
+  --c-rel-supports: #5FCFC0;
+  --c-rel-contradicts: #E59B6B;
+  --c-rel-cites: #7C9CFF;
+  --c-rel-derived: #D5DEEA;
+  --c-rel-informs: #E58FB0;
+  --c-rel-related: #8D96BC;
   --c-input-bg: #0D1224;
   --c-dot-grid: rgba(139, 150, 255, 0.08);
   --c-panel-overlay: rgba(10, 13, 28, 0.6);
   --c-panel-glass: rgba(18, 23, 46, 0.92);
   --c-shadow: rgba(0, 0, 0, 0.3);
   --c-shadow-heavy: rgba(0, 0, 0, 0.5);
-  --c-glow-accent: rgba(139, 150, 255, 0.15);
   --c-surface-hover: rgba(255, 255, 255, 0.06);
   --c-surface-subtle: rgba(255, 255, 255, 0.03);
   --c-surface-th: rgba(255, 255, 255, 0.04);
-  --c-accent-8: rgba(139, 150, 255, 0.08);
-  --c-accent-10: rgba(139, 150, 255, 0.1);
-  --c-accent-12: rgba(139, 150, 255, 0.12);
-  --c-accent-15: rgba(139, 150, 255, 0.15);
-  --c-accent-25: rgba(139, 150, 255, 0.25);
-  --c-accent-30: rgba(139, 150, 255, 0.3);
-  --c-accent-40: rgba(139, 150, 255, 0.4);
-  --c-ok-10: rgba(52, 211, 153, 0.1);
-  --c-ok-12: rgba(52, 211, 153, 0.12);
-  --c-ok-20: rgba(52, 211, 153, 0.2);
-  --c-ok-25: rgba(52, 211, 153, 0.25);
-  --c-warn-10: rgba(245, 196, 82, 0.1);
-  --c-warn-12: rgba(245, 196, 82, 0.12);
-  --c-warn-15: rgba(245, 196, 82, 0.15);
-  --c-warn-20: rgba(245, 196, 82, 0.2);
-  --c-warn-22: rgba(245, 196, 82, 0.22);
-  --c-warn-30: rgba(245, 196, 82, 0.3);
-  --c-warn-60: rgba(245, 196, 82, 0.6);
-  --c-danger-12: rgba(255, 107, 138, 0.12);
   --c-line-30: rgba(35, 43, 74, 0.3);
   --c-contrast-fg: #0A0D1C;
   --c-accent-hover: #A3ACFF;
@@ -256,41 +307,31 @@
   --c-dim: #978870;
   --c-accent: #B4632C;
   --c-ok: #3E7D4F;
-  --c-warn: #A97B1E;
-  --c-warn-alt: #8F6A0D;
+  --c-warn: #8A5A00;
   --c-danger: #B3402E;
-  --c-purple: #8456B0;
-  --c-thinking: #8456B0;
-  --c-subagent: #0E7C7B;
+  /* ── Meaning (one hue per meaning in every theme; see docs/design.md) ── */
+  --c-pin: #1F6FA8;
+  --c-on-pin: #FFFFFF;
+  --c-agent: #7046A6;
+  --c-subagent: #A83BB0;
+  --c-rel-supports: #1E8C80;
+  --c-rel-contradicts: #A3461C;
+  --c-rel-cites: #3D50B0;
+  --c-rel-derived: #4E4433;
+  --c-rel-informs: #9C3A66;
+  --c-rel-related: #6B6A66;
+  /* Light themes: ink-tinted shadows (the drawn black ones are for dark surfaces). */
+  --e-1: 0 1px 2px rgba(8, 21, 36, 0.1), 0 6px 20px rgba(8, 21, 36, 0.08);
+  --e-2: 0 10px 30px rgba(8, 21, 36, 0.18);
   --c-input-bg: #F7EEDD;
   --c-dot-grid: rgba(46, 36, 22, 0.08);
   --c-panel-overlay: rgba(242, 231, 213, 0.88);
   --c-panel-glass: rgba(235, 220, 194, 0.88);
   --c-shadow: rgba(46, 36, 22, 0.08);
   --c-shadow-heavy: rgba(46, 36, 22, 0.16);
-  --c-glow-accent: rgba(180, 99, 44, 0.12);
   --c-surface-hover: rgba(46, 36, 22, 0.06);
   --c-surface-subtle: rgba(46, 36, 22, 0.03);
   --c-surface-th: rgba(46, 36, 22, 0.04);
-  --c-accent-8: rgba(180, 99, 44, 0.08);
-  --c-accent-10: rgba(180, 99, 44, 0.1);
-  --c-accent-12: rgba(180, 99, 44, 0.12);
-  --c-accent-15: rgba(180, 99, 44, 0.15);
-  --c-accent-25: rgba(180, 99, 44, 0.25);
-  --c-accent-30: rgba(180, 99, 44, 0.3);
-  --c-accent-40: rgba(180, 99, 44, 0.4);
-  --c-ok-10: rgba(62, 125, 79, 0.1);
-  --c-ok-12: rgba(62, 125, 79, 0.12);
-  --c-ok-20: rgba(62, 125, 79, 0.2);
-  --c-ok-25: rgba(62, 125, 79, 0.25);
-  --c-warn-10: rgba(169, 123, 30, 0.1);
-  --c-warn-12: rgba(169, 123, 30, 0.12);
-  --c-warn-15: rgba(169, 123, 30, 0.15);
-  --c-warn-20: rgba(169, 123, 30, 0.2);
-  --c-warn-22: rgba(169, 123, 30, 0.22);
-  --c-warn-30: rgba(169, 123, 30, 0.3);
-  --c-warn-60: rgba(169, 123, 30, 0.6);
-  --c-danger-12: rgba(179, 64, 46, 0.12);
   --c-line-30: rgba(211, 193, 160, 0.5);
   --c-contrast-fg: #F2E7D5;
   --c-accent-hover: #C4763F;
@@ -312,40 +353,27 @@
   --c-accent: #7FC8DE;
   --c-ok: #74C596;
   --c-warn: #E8C476;
-  --c-warn-alt: #E0A93F;
   --c-danger: #D9707C;
-  --c-purple: #B48EAD;
-  --c-thinking: #B48EAD;
-  --c-subagent: #6FD6C4;
+  /* ── Meaning (one hue per meaning in every theme; see docs/design.md) ── */
+  --c-pin: #6EC1F5;
+  --c-on-pin: #081524;
+  --c-agent: #B388FF;
+  --c-subagent: #E879F9;
+  --c-rel-supports: #5FCFC0;
+  --c-rel-contradicts: #E59B6B;
+  --c-rel-cites: #7C9CFF;
+  --c-rel-derived: #D5DEEA;
+  --c-rel-informs: #E58FB0;
+  --c-rel-related: #939DB1;
   --c-input-bg: #242936;
   --c-dot-grid: rgba(127, 200, 222, 0.08);
   --c-panel-overlay: rgba(32, 36, 46, 0.6);
   --c-panel-glass: rgba(42, 47, 60, 0.92);
   --c-shadow: rgba(0, 0, 0, 0.3);
   --c-shadow-heavy: rgba(0, 0, 0, 0.5);
-  --c-glow-accent: rgba(127, 200, 222, 0.15);
   --c-surface-hover: rgba(255, 255, 255, 0.06);
   --c-surface-subtle: rgba(255, 255, 255, 0.03);
   --c-surface-th: rgba(255, 255, 255, 0.04);
-  --c-accent-8: rgba(127, 200, 222, 0.08);
-  --c-accent-10: rgba(127, 200, 222, 0.1);
-  --c-accent-12: rgba(127, 200, 222, 0.12);
-  --c-accent-15: rgba(127, 200, 222, 0.15);
-  --c-accent-25: rgba(127, 200, 222, 0.25);
-  --c-accent-30: rgba(127, 200, 222, 0.3);
-  --c-accent-40: rgba(127, 200, 222, 0.4);
-  --c-ok-10: rgba(116, 197, 150, 0.1);
-  --c-ok-12: rgba(116, 197, 150, 0.12);
-  --c-ok-20: rgba(116, 197, 150, 0.2);
-  --c-ok-25: rgba(116, 197, 150, 0.25);
-  --c-warn-10: rgba(232, 196, 118, 0.1);
-  --c-warn-12: rgba(232, 196, 118, 0.12);
-  --c-warn-15: rgba(232, 196, 118, 0.15);
-  --c-warn-20: rgba(232, 196, 118, 0.2);
-  --c-warn-22: rgba(232, 196, 118, 0.22);
-  --c-warn-30: rgba(232, 196, 118, 0.3);
-  --c-warn-60: rgba(232, 196, 118, 0.6);
-  --c-danger-12: rgba(217, 112, 124, 0.12);
   --c-line-30: rgba(58, 65, 82, 0.3);
   --c-contrast-fg: #20242E;
   --c-accent-hover: #9AD5E7;
@@ -367,40 +395,27 @@
   --c-accent: #F34E1C;
   --c-ok: #4CC38A;
   --c-warn: #F5B944;
-  --c-warn-alt: #FFB300;
   --c-danger: #F0566A;
-  --c-purple: #A78BFA;
-  --c-thinking: #A78BFA;
-  --c-subagent: #38BDF8;
+  /* ── Meaning (one hue per meaning in every theme; see docs/design.md) ── */
+  --c-pin: #4BBCFF;
+  --c-on-pin: #081524;
+  --c-agent: #B388FF;
+  --c-subagent: #E879F9;
+  --c-rel-supports: #5FCFC0;
+  --c-rel-contradicts: #E59B6B;
+  --c-rel-cites: #7C9CFF;
+  --c-rel-derived: #D5DEEA;
+  --c-rel-informs: #E58FB0;
+  --c-rel-related: #96948D;
   --c-input-bg: #101012;
   --c-dot-grid: rgba(243, 78, 28, 0.08);
   --c-panel-overlay: rgba(11, 11, 12, 0.6);
   --c-panel-glass: rgba(22, 22, 24, 0.92);
   --c-shadow: rgba(0, 0, 0, 0.3);
   --c-shadow-heavy: rgba(0, 0, 0, 0.5);
-  --c-glow-accent: rgba(243, 78, 28, 0.15);
   --c-surface-hover: rgba(255, 255, 255, 0.06);
   --c-surface-subtle: rgba(255, 255, 255, 0.03);
   --c-surface-th: rgba(255, 255, 255, 0.04);
-  --c-accent-8: rgba(243, 78, 28, 0.08);
-  --c-accent-10: rgba(243, 78, 28, 0.1);
-  --c-accent-12: rgba(243, 78, 28, 0.12);
-  --c-accent-15: rgba(243, 78, 28, 0.15);
-  --c-accent-25: rgba(243, 78, 28, 0.25);
-  --c-accent-30: rgba(243, 78, 28, 0.3);
-  --c-accent-40: rgba(243, 78, 28, 0.4);
-  --c-ok-10: rgba(76, 195, 138, 0.1);
-  --c-ok-12: rgba(76, 195, 138, 0.12);
-  --c-ok-20: rgba(76, 195, 138, 0.2);
-  --c-ok-25: rgba(76, 195, 138, 0.25);
-  --c-warn-10: rgba(245, 185, 68, 0.1);
-  --c-warn-12: rgba(245, 185, 68, 0.12);
-  --c-warn-15: rgba(245, 185, 68, 0.15);
-  --c-warn-20: rgba(245, 185, 68, 0.2);
-  --c-warn-22: rgba(245, 185, 68, 0.22);
-  --c-warn-30: rgba(245, 185, 68, 0.3);
-  --c-warn-60: rgba(245, 185, 68, 0.6);
-  --c-danger-12: rgba(240, 86, 106, 0.12);
   --c-line-30: rgba(41, 41, 44, 0.3);
   --c-contrast-fg: #0B0B0C;
   --c-accent-hover: #FF6B3A;
@@ -422,40 +437,27 @@
   --c-accent: #5CCF8F;
   --c-ok: #74D99F;
   --c-warn: #E0B84F;
-  --c-warn-alt: #D9A421;
   --c-danger: #E57373;
-  --c-purple: #A88FE0;
-  --c-thinking: #A88FE0;
-  --c-subagent: #4FD8CE;
+  /* ── Meaning (one hue per meaning in every theme; see docs/design.md) ── */
+  --c-pin: #4BBCFF;
+  --c-on-pin: #081524;
+  --c-agent: #B388FF;
+  --c-subagent: #E879F9;
+  --c-rel-supports: #4FC9D9;
+  --c-rel-contradicts: #E59B6B;
+  --c-rel-cites: #7C9CFF;
+  --c-rel-derived: #D5DEEA;
+  --c-rel-informs: #E58FB0;
+  --c-rel-related: #8BA695;
   --c-input-bg: #101D16;
   --c-dot-grid: rgba(92, 207, 143, 0.08);
   --c-panel-overlay: rgba(12, 23, 18, 0.6);
   --c-panel-glass: rgba(20, 35, 27, 0.92);
   --c-shadow: rgba(0, 0, 0, 0.3);
   --c-shadow-heavy: rgba(0, 0, 0, 0.5);
-  --c-glow-accent: rgba(92, 207, 143, 0.15);
   --c-surface-hover: rgba(255, 255, 255, 0.06);
   --c-surface-subtle: rgba(255, 255, 255, 0.03);
   --c-surface-th: rgba(255, 255, 255, 0.04);
-  --c-accent-8: rgba(92, 207, 143, 0.08);
-  --c-accent-10: rgba(92, 207, 143, 0.1);
-  --c-accent-12: rgba(92, 207, 143, 0.12);
-  --c-accent-15: rgba(92, 207, 143, 0.15);
-  --c-accent-25: rgba(92, 207, 143, 0.25);
-  --c-accent-30: rgba(92, 207, 143, 0.3);
-  --c-accent-40: rgba(92, 207, 143, 0.4);
-  --c-ok-10: rgba(116, 217, 159, 0.1);
-  --c-ok-12: rgba(116, 217, 159, 0.12);
-  --c-ok-20: rgba(116, 217, 159, 0.2);
-  --c-ok-25: rgba(116, 217, 159, 0.25);
-  --c-warn-10: rgba(224, 184, 79, 0.1);
-  --c-warn-12: rgba(224, 184, 79, 0.12);
-  --c-warn-15: rgba(224, 184, 79, 0.15);
-  --c-warn-20: rgba(224, 184, 79, 0.2);
-  --c-warn-22: rgba(224, 184, 79, 0.22);
-  --c-warn-30: rgba(224, 184, 79, 0.3);
-  --c-warn-60: rgba(224, 184, 79, 0.6);
-  --c-danger-12: rgba(229, 115, 115, 0.12);
   --c-line-30: rgba(38, 64, 47, 0.3);
   --c-contrast-fg: #0C1712;
   --c-accent-hover: #7BDAA4;
@@ -477,40 +479,27 @@
   --c-accent: #DFDFC1;
   --c-ok: #52C880;
   --c-warn: #E4C465;
-  --c-warn-alt: #FFB300;
   --c-danger: #D67670;
-  --c-purple: #BC8FB4;
-  --c-thinking: #BC8FB4;
-  --c-subagent: #6CA0E0;
+  /* ── Meaning (one hue per meaning in every theme; see docs/design.md) ── */
+  --c-pin: #4BBCFF;
+  --c-on-pin: #081524;
+  --c-agent: #B388FF;
+  --c-subagent: #E879F9;
+  --c-rel-supports: #5FCFC0;
+  --c-rel-contradicts: #E59B6B;
+  --c-rel-cites: #7C9CFF;
+  --c-rel-derived: #D5DEEA;
+  --c-rel-informs: #E58FB0;
+  --c-rel-related: #9CA49C;
   --c-input-bg: #111311;
   --c-dot-grid: rgba(223, 223, 193, 0.08);
   --c-panel-overlay: rgba(11, 13, 11, 0.6);
   --c-panel-glass: rgba(23, 26, 23, 0.92);
   --c-shadow: rgba(0, 0, 0, 0.3);
   --c-shadow-heavy: rgba(0, 0, 0, 0.5);
-  --c-glow-accent: rgba(223, 223, 193, 0.15);
   --c-surface-hover: rgba(255, 255, 255, 0.06);
   --c-surface-subtle: rgba(255, 255, 255, 0.03);
   --c-surface-th: rgba(255, 255, 255, 0.04);
-  --c-accent-8: rgba(223, 223, 193, 0.08);
-  --c-accent-10: rgba(223, 223, 193, 0.1);
-  --c-accent-12: rgba(223, 223, 193, 0.12);
-  --c-accent-15: rgba(223, 223, 193, 0.15);
-  --c-accent-25: rgba(223, 223, 193, 0.25);
-  --c-accent-30: rgba(223, 223, 193, 0.3);
-  --c-accent-40: rgba(223, 223, 193, 0.4);
-  --c-ok-10: rgba(82, 200, 128, 0.1);
-  --c-ok-12: rgba(82, 200, 128, 0.12);
-  --c-ok-20: rgba(82, 200, 128, 0.2);
-  --c-ok-25: rgba(82, 200, 128, 0.25);
-  --c-warn-10: rgba(228, 196, 101, 0.1);
-  --c-warn-12: rgba(228, 196, 101, 0.12);
-  --c-warn-15: rgba(228, 196, 101, 0.15);
-  --c-warn-20: rgba(228, 196, 101, 0.2);
-  --c-warn-22: rgba(228, 196, 101, 0.22);
-  --c-warn-30: rgba(228, 196, 101, 0.3);
-  --c-warn-60: rgba(228, 196, 101, 0.6);
-  --c-danger-12: rgba(214, 118, 112, 0.12);
   --c-line-30: rgba(39, 42, 39, 0.3);
   --c-contrast-fg: #0B0D0B;
   --c-accent-hover: #EDEDDB;
@@ -525,6 +514,14 @@
   padding: 0;
 }
 
+/* Controls take the page font instead of the browser's (Arial). */
+button,
+input,
+select,
+textarea {
+  font: inherit;
+}
+
 html,
 body,
 #app {
@@ -533,7 +530,7 @@ body,
   overflow: hidden;
   background: var(--c-bg);
   color: var(--c-text);
-  font: 14px / 1.55 var(--font);
+  font: 14px / 1.55 var(--font-ui);
   -webkit-font-smoothing: antialiased;
 }
 
@@ -564,12 +561,13 @@ body,
 /* Node card shared styles */
 .canvas-node {
   position: absolute;
-  /* Standard card shell (rail-chrome-v2): node surface, 12px radius, soft
-     shadow. Every node kind shares it; the kind shows in the icon color. */
+  /* Standard card shell (docs/design/Context.dc.html): node surface, node
+     radius, first elevation. Every node kind shares it; the kind shows in
+     the icon color. */
   background: var(--c-panel);
   border: 1px solid var(--c-line);
-  border-radius: 12px;
-  box-shadow: 0 4px 24px var(--c-shadow);
+  border-radius: var(--r-node);
+  box-shadow: var(--e-1);
   display: flex;
   flex-direction: column;
   overflow: visible;
@@ -597,24 +595,24 @@ body,
 
 .canvas-node.active {
   border-color: var(--c-accent);
-  box-shadow: 0 0 0 1px var(--c-accent), 0 6px 32px var(--c-glow-accent);
+  box-shadow: 0 0 0 1px var(--c-accent), 0 6px 32px color-mix(in srgb, var(--c-accent) 15%, transparent);
 }
 
 .canvas-node.neighbor {
-  border-color: var(--c-accent-40);
-  box-shadow: 0 0 0 1px var(--c-accent-30), 0 4px 20px var(--c-accent-15);
+  border-color: color-mix(in srgb, var(--c-accent) 40%, transparent);
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--c-accent) 30%, transparent), 0 4px 20px color-mix(in srgb, var(--c-accent) 15%, transparent);
   transition: border-color 0.2s, box-shadow 0.2s;
 }
 
 /* Spatial search highlighting — canvas lights up as you type in Cmd+K */
 .canvas-node.search-match {
   border-color: var(--c-accent);
-  box-shadow: 0 0 0 2px var(--c-accent), 0 0 20px var(--c-accent-30), 0 0 40px var(--c-accent-15);
+  box-shadow: 0 0 0 2px var(--c-accent), 0 0 20px color-mix(in srgb, var(--c-accent) 30%, transparent), 0 0 40px color-mix(in srgb, var(--c-accent) 15%, transparent);
   animation: search-pulse 1.5s ease-in-out infinite;
 }
 @keyframes search-pulse {
-  0%, 100% { box-shadow: 0 0 0 2px var(--c-accent), 0 0 20px var(--c-accent-30), 0 0 40px var(--c-accent-15); }
-  50%      { box-shadow: 0 0 0 2px var(--c-accent), 0 0 30px var(--c-accent-40), 0 0 60px var(--c-accent-25); }
+  0%, 100% { box-shadow: 0 0 0 2px var(--c-accent), 0 0 20px color-mix(in srgb, var(--c-accent) 30%, transparent), 0 0 40px color-mix(in srgb, var(--c-accent) 15%, transparent); }
+  50%      { box-shadow: 0 0 0 2px var(--c-accent), 0 0 30px color-mix(in srgb, var(--c-accent) 40%, transparent), 0 0 60px color-mix(in srgb, var(--c-accent) 25%, transparent); }
 }
 .canvas-node.search-dimmed {
   opacity: 0.25;
@@ -638,8 +636,8 @@ body,
 }
 .node-port::after {
   content: '';
-  width: calc(6px * var(--node-port-scale, 1));
-  height: calc(6px * var(--node-port-scale, 1));
+  width: calc(4px * var(--node-port-scale, 1));
+  height: calc(4px * var(--node-port-scale, 1));
   border-radius: 50%;
   background: var(--c-accent);
   border: calc(2px * var(--node-port-scale, 1)) solid var(--c-panel);
@@ -698,31 +696,15 @@ body,
   justify-content: center;
   width: calc(14px * var(--node-chrome-scale, 1));
   height: calc(14px * var(--node-chrome-scale, 1));
-  color: var(--kind-accent, var(--c-accent));
+  color: var(--c-muted);
   flex-shrink: 0;
 }
 
-/* Node kind accents (rail-chrome-v2): the icon carries the kind. */
-.canvas-node[data-node-type='image'],
-.canvas-node[data-node-type='mermaid'] {
-  --kind-accent: var(--c-warn);
-}
-.canvas-node[data-node-type='webpage'],
-.canvas-node[data-node-type='status'],
-.canvas-node[data-node-type='trace'] {
-  --kind-accent: var(--c-ok);
-}
-.canvas-node[data-node-type='context'],
-.canvas-node[data-node-type='prompt'],
-.canvas-node[data-node-type='response'] {
-  --kind-accent: var(--c-purple);
-}
-
 .canvas-node .node-type-badge {
   font-size: calc(10px * var(--node-chrome-scale, 1));
   padding: calc(1px * var(--node-chrome-scale, 1)) calc(6px * var(--node-chrome-scale, 1));
   border-radius: calc(4px * var(--node-chrome-scale, 1));
-  background: var(--c-accent-12);
+  background: color-mix(in srgb, var(--c-accent) 12%, transparent);
   color: var(--c-accent);
   text-transform: uppercase;
   letter-spacing: 0.04em;
@@ -792,6 +774,18 @@ body,
   color: var(--c-text);
 }
 
+/* ⋯ and × appear on hover or keyboard focus; expand and the context pin
+   always show (docs/design/Chrome.dc.html). Reserve their slots so revealing
+   them cannot move the pin out from under the pointer onto Close. */
+.canvas-node .node-controls .node-hover-control {
+  visibility: hidden;
+}
+
+.canvas-node:hover .node-controls .node-hover-control,
+.canvas-node:focus-within .node-controls .node-hover-control {
+  visibility: visible;
+}
+
 .canvas-node .node-body {
   flex: 1;
   overflow: auto;
@@ -892,7 +886,7 @@ body,
 }
 
 .canvas-node .node-body code {
-  font-family: var(--mono);
+  font-family: var(--font-code);
   font-size: 0.9em;
   background: var(--c-surface-hover);
   padding: 2px 5px;
@@ -992,12 +986,12 @@ body,
   color: var(--c-text);
 }
 .rail-btn.active {
-  background: var(--c-accent-10);
-  border-color: var(--c-accent-25);
+  background: color-mix(in srgb, var(--c-accent) 10%, transparent);
+  border-color: color-mix(in srgb, var(--c-accent) 25%, transparent);
   color: var(--c-accent);
 }
 .rail-btn.active:hover {
-  background: var(--c-accent-15, var(--c-accent-10));
+  background: color-mix(in srgb, var(--c-accent) 15%, transparent);
 }
 
 .rail-divider {
@@ -1061,7 +1055,7 @@ body,
 }
 
 .top-bar-meta {
-  font: 11px var(--mono);
+  font: 11px var(--font-code);
   color: var(--c-dim);
   white-space: nowrap;
   flex-shrink: 0;
@@ -1103,7 +1097,7 @@ body,
 .top-bar-zoom-label {
   min-width: 38px;
   text-align: center;
-  font: 11px var(--mono);
+  font: 11px var(--font-code);
   color: var(--c-muted);
   background: none;
   border: 1px solid transparent;
@@ -1136,7 +1130,7 @@ body,
 .agent-chip.phase-thinking,
 .agent-cursor.phase-thinking,
 .minimap-presence.phase-thinking {
-  --presence-color: var(--c-purple);
+  --presence-color: var(--c-agent);
 }
 .agent-chip.phase-tooling,
 .agent-cursor.phase-tooling,
@@ -1220,7 +1214,7 @@ body,
   min-width: 0;
 }
 .agent-chip-who {
-  font: 10px var(--mono);
+  font: 10px var(--font-code);
   font-weight: 400;
   color: var(--c-muted);
   white-space: nowrap;
@@ -1358,22 +1352,15 @@ body,
   animation: presence-pulse 1.4s ease-in-out infinite;
 }
 .agent-cursor-who {
-  font: 9.5px var(--mono);
+  font: 9.5px var(--font-code);
   font-weight: 400;
   color: var(--c-muted);
 }
 
-/* Node shimmer: the node an attached agent is mutating right now */
-.canvas-node.agent-mutating {
-  border-color: color-mix(in srgb, var(--c-accent) 45%, transparent) !important;
-  background-image: linear-gradient(
-    100deg,
-    transparent 20%,
-    color-mix(in srgb, var(--c-accent) 13%, transparent) 50%,
-    transparent 80%
-  );
-  background-size: 200% 100%;
-  animation: presence-shimmer 1.6s linear infinite;
+/* The node an attached agent is editing right now: the violet agent bar
+   across the top of the header (docs/design/Context.dc.html). */
+.canvas-node.agent-mutating .node-titlebar {
+  box-shadow: inset 0 2.5px 0 var(--c-agent);
 }
 
 @keyframes presence-pulse {
@@ -1385,14 +1372,6 @@ body,
     opacity: 0.45;
   }
 }
-@keyframes presence-shimmer {
-  from {
-    background-position: 200% 0;
-  }
-  to {
-    background-position: -200% 0;
-  }
-}
 
 /* Reduced motion: keep every static color state, drop the motion. */
 @media (prefers-reduced-motion: reduce) {
@@ -1400,13 +1379,9 @@ body,
     transition: none;
   }
   .agent-chip-dot,
-  .agent-cursor-dot,
-  .canvas-node.agent-mutating {
+  .agent-cursor-dot {
     animation: none;
   }
-  .canvas-node.agent-mutating {
-    background-image: none;
-  }
 }
 
 /* ── Session panel (rail-chrome-v2 phase 4) ─────────────────────
@@ -1442,7 +1417,7 @@ body,
   flex-direction: column;
   align-items: center;
   gap: 4px;
-  font: 9px var(--mono);
+  font: 9px var(--font-code);
   color: var(--c-dim);
 }
 .session-collapsed-live .session-live-dot {
@@ -1470,11 +1445,11 @@ body,
   display: inline-flex;
   align-items: center;
   gap: 5px;
-  font: 10px var(--mono);
+  font: 10px var(--font-code);
   color: var(--c-muted);
 }
 .session-live.phase-thinking {
-  --presence-color: var(--c-purple);
+  --presence-color: var(--c-agent);
 }
 .session-live.phase-tooling {
   --presence-color: var(--c-accent);
@@ -1618,7 +1593,7 @@ body,
   margin-top: 3px;
 }
 .session-item-time {
-  font: 9px var(--mono);
+  font: 9px var(--font-code);
   color: var(--c-dim);
   flex-shrink: 0;
   margin-top: 4px;
@@ -1629,7 +1604,7 @@ body,
 }
 .session-gate-ttl {
   margin-top: 4px;
-  font: 10px var(--mono);
+  font: 10px var(--font-code);
   color: var(--c-warn);
 }
 .session-gate-held {
@@ -1691,7 +1666,7 @@ body,
   display: inline-flex;
   align-items: center;
   gap: 6px;
-  font: 10px/1 var(--mono);
+  font: 10px/1 var(--font-code);
   color: var(--c-muted);
 }
 .session-work-dot {
@@ -1728,7 +1703,7 @@ body,
   gap: 8px;
   padding: 7px 12px;
   border-bottom: 1px solid var(--c-line);
-  background: var(--c-accent-8);
+  background: color-mix(in srgb, var(--c-accent) 8%, transparent);
 }
 .session-undo-text {
   flex: 1;
@@ -1742,7 +1717,7 @@ body,
 .session-undo-btn {
   flex-shrink: 0;
   padding: 3px 10px;
-  border: 1px solid var(--c-accent-25);
+  border: 1px solid color-mix(in srgb, var(--c-accent) 25%, transparent);
   border-radius: 999px;
   background: none;
   color: var(--c-accent);
@@ -1751,7 +1726,7 @@ body,
   cursor: pointer;
 }
 .session-undo-btn:hover {
-  background: var(--c-accent-10);
+  background: color-mix(in srgb, var(--c-accent) 10%, transparent);
 }
 
 .session-timeline-filters {
@@ -1802,7 +1777,7 @@ body,
   --tone: var(--c-danger);
 }
 .session-timeline-row.tone-purple {
-  --tone: var(--c-purple);
+  --tone: var(--c-agent);
 }
 .session-timeline-dot {
   width: 6px;
@@ -1845,7 +1820,7 @@ body,
   padding: 4px 12px;
   border: 1px solid var(--c-accent);
   border-radius: 999px;
-  background: var(--c-accent-10);
+  background: color-mix(in srgb, var(--c-accent) 10%, transparent);
   color: var(--c-accent);
   font-size: 11.5px;
   font-weight: 700;
@@ -1858,7 +1833,7 @@ body,
 }
 .session-timeline-undone {
   margin-top: 2px;
-  font: 9px var(--mono);
+  font: 9px var(--font-code);
   color: var(--c-dim);
 }
 .session-timeline-body {
@@ -1879,7 +1854,7 @@ body,
   color: var(--c-muted);
 }
 .session-scope.is-fenced {
-  background: color-mix(in srgb, var(--c-purple) 8%, transparent);
+  background: color-mix(in srgb, var(--c-agent) 8%, transparent);
   color: var(--c-text-soft);
 }
 .session-scope-dot {
@@ -1890,14 +1865,14 @@ body,
   flex-shrink: 0;
 }
 .session-scope.is-fenced .session-scope-dot {
-  background: var(--c-purple);
+  background: var(--c-agent);
 }
 .session-scope-text {
   flex: 1;
   min-width: 0;
 }
 .session-scope-text strong {
-  color: var(--c-purple);
+  color: var(--c-agent);
 }
 .session-scope-action {
   padding: 3px 9px;
@@ -1911,8 +1886,8 @@ body,
   white-space: nowrap;
 }
 .session-scope-action:hover:not(:disabled) {
-  border-color: color-mix(in srgb, var(--c-purple) 45%, transparent);
-  color: var(--c-purple);
+  border-color: color-mix(in srgb, var(--c-agent) 45%, transparent);
+  color: var(--c-agent);
 }
 .session-scope-action:disabled {
   opacity: 0.5;
@@ -1926,9 +1901,9 @@ body,
   top: 0;
   z-index: 1;
   pointer-events: none;
-  border: 1.5px dashed color-mix(in srgb, var(--c-purple) 40%, transparent);
+  border: 1.5px dashed color-mix(in srgb, var(--c-agent) 40%, transparent);
   border-radius: 16px;
-  background: color-mix(in srgb, var(--c-purple) 3%, transparent);
+  background: color-mix(in srgb, var(--c-agent) 3%, transparent);
 }
 .scope-fence-pill {
   position: absolute;
@@ -1936,9 +1911,9 @@ body,
   transform-origin: 0 50%;
   padding: 3px 10px;
   border-radius: 999px;
-  border: 1px solid color-mix(in srgb, var(--c-purple) 35%, transparent);
-  background: color-mix(in srgb, var(--c-panel) 92%, var(--c-purple) 8%);
-  color: var(--c-purple);
+  border: 1px solid color-mix(in srgb, var(--c-agent) 35%, transparent);
+  background: color-mix(in srgb, var(--c-panel) 92%, var(--c-agent) 8%);
+  color: var(--c-agent);
   font-size: 10px;
   font-weight: 600;
   letter-spacing: 0.04em;
@@ -1982,9 +1957,9 @@ body,
   max-width: 240px;
   padding: 2px 5px 2px 9px;
   border-radius: 999px;
-  border: 1px solid color-mix(in srgb, var(--c-warn) 35%, transparent);
-  background: color-mix(in srgb, var(--c-warn) 12%, transparent);
-  color: var(--c-warn);
+  border: 1px solid color-mix(in srgb, var(--c-pin) 35%, transparent);
+  background: color-mix(in srgb, var(--c-pin) 12%, transparent);
+  color: var(--c-pin);
   font-size: 10px;
   font-weight: 600;
 }
@@ -2008,7 +1983,7 @@ body,
   border: none;
   border-radius: 50%;
   background: none;
-  color: var(--c-warn);
+  color: var(--c-pin);
   font-size: 12px;
   line-height: 1;
   cursor: pointer;
@@ -2016,7 +1991,7 @@ body,
 }
 .command-bar-chip-unpin:hover {
   opacity: 1;
-  background: color-mix(in srgb, var(--c-warn) 25%, transparent);
+  background: color-mix(in srgb, var(--c-pin) 25%, transparent);
 }
 .command-bar-chips-note {
   font-size: 10px;
@@ -2054,7 +2029,7 @@ body,
   border-radius: 8px;
   background: var(--c-panel-overlay);
   color: var(--c-text);
-  font: 12px/1.35 var(--font);
+  font: 12px/1.35 var(--font-ui);
   cursor: pointer;
 }
 .choice-menu-trigger > span {
@@ -2105,7 +2080,7 @@ body,
 
 .command-bar-icon {
   flex-shrink: 0;
-  color: var(--c-purple);
+  color: var(--c-agent);
 }
 .command-bar-input {
   flex: 1;
@@ -2115,7 +2090,7 @@ body,
   outline: none;
   background: none;
   color: var(--c-text);
-  font: 13px var(--font);
+  font: 13px var(--font-ui);
 }
 .command-bar-input::placeholder {
   color: var(--c-dim);
@@ -2175,7 +2150,7 @@ body,
   display: block;
   height: 100%;
   border-radius: 3px;
-  background: linear-gradient(90deg, var(--c-accent), var(--c-warn));
+  background: var(--c-accent);
   transition: width 180ms ease;
 }
 .context-budget.tone-warn .context-budget-fill,
@@ -2183,7 +2158,7 @@ body,
   background: var(--tone);
 }
 .context-budget-label {
-  font: 11px var(--mono);
+  font: 11px var(--font-code);
   color: var(--c-text-soft);
   min-width: 30px;
   text-align: right;
@@ -2209,9 +2184,9 @@ body,
   gap: 8px;
   padding: 4px 12px 4px 6px;
   border-radius: 999px;
-  border: 1px solid color-mix(in srgb, var(--c-purple) 35%, transparent);
-  background: color-mix(in srgb, var(--c-purple) 8%, transparent);
-  color: var(--c-purple);
+  border: 1px solid color-mix(in srgb, var(--c-agent) 35%, transparent);
+  background: color-mix(in srgb, var(--c-agent) 8%, transparent);
+  color: var(--c-agent);
   cursor: pointer;
   white-space: nowrap;
   flex-shrink: 0;
@@ -2219,7 +2194,7 @@ body,
 }
 .external-indicator:hover,
 .external-indicator[aria-expanded='true'] {
-  background: color-mix(in srgb, var(--c-purple) 15%, transparent);
+  background: color-mix(in srgb, var(--c-agent) 15%, transparent);
 }
 .external-indicator-avatars {
   display: inline-flex;
@@ -2233,14 +2208,14 @@ body,
   font-weight: 600;
 }
 .external-indicator-ops {
-  font: 10px var(--mono);
+  font: 10px var(--font-code);
   color: var(--c-muted);
 }
 .external-indicator-dot {
   width: 7px;
   height: 7px;
   border-radius: 50%;
-  background: var(--c-purple);
+  background: var(--c-agent);
   flex-shrink: 0;
   animation: presence-pulse 1.4s ease-in-out infinite;
 }
@@ -2254,7 +2229,7 @@ body,
   display: flex;
   flex-direction: column;
   background: var(--c-panel);
-  border: 1px solid color-mix(in srgb, var(--c-purple) 30%, transparent);
+  border: 1px solid color-mix(in srgb, var(--c-agent) 30%, transparent);
   border-radius: 10px;
   box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
   /* Popover-level like the rail menus: above the minimap, below the rail. */
@@ -2279,7 +2254,7 @@ body,
   color: var(--c-text);
 }
 .activity-feed-sub {
-  font: 9px var(--mono);
+  font: 9px var(--font-code);
   color: var(--c-dim);
 }
 .activity-feed-close {
@@ -2301,7 +2276,7 @@ body,
   border-bottom: 1px solid var(--c-line);
 }
 .activity-filter {
-  --writer: var(--c-purple);
+  --writer: var(--c-agent);
   padding: 2px 9px;
   border-radius: 999px;
   border: 1px solid var(--c-line);
@@ -2332,7 +2307,7 @@ body,
   border-bottom: none;
 }
 .activity-row.is-pending {
-  background: color-mix(in srgb, var(--c-purple) 5%, transparent);
+  background: color-mix(in srgb, var(--c-agent) 5%, transparent);
 }
 .activity-glyph {
   flex-shrink: 0;
@@ -2353,7 +2328,7 @@ body,
   color: var(--c-accent);
 }
 .activity-glyph.tone-purple {
-  color: var(--c-purple);
+  color: var(--c-agent);
 }
 .activity-main {
   flex: 1;
@@ -2370,7 +2345,7 @@ body,
   color: var(--c-muted);
 }
 .activity-writer {
-  font: 8.5px var(--mono);
+  font: 8.5px var(--font-code);
 }
 .activity-actions {
   display: flex;
@@ -2393,7 +2368,7 @@ body,
 }
 .activity-hint,
 .activity-age {
-  font: 9px var(--mono);
+  font: 9px var(--font-code);
   color: var(--c-dim);
   flex-shrink: 0;
 }
@@ -2428,7 +2403,7 @@ body,
   color: var(--c-text);
 }
 .activity-feed-link.is-accent {
-  color: var(--c-purple);
+  color: var(--c-agent);
 }
 .activity-feed-link.is-accent:hover {
   text-decoration: underline;
@@ -2469,7 +2444,7 @@ body,
   color: var(--c-text);
 }
 .writers-board {
-  font: 9px var(--mono);
+  font: 9px var(--font-code);
   color: var(--c-dim);
 }
 .writers-body {
@@ -2502,18 +2477,18 @@ body,
   white-space: nowrap;
 }
 .writers-name.is-mono {
-  font: 11px var(--mono);
+  font: 11px var(--font-code);
 }
 .writers-config {
   font-size: 9.5px;
   font-weight: 600;
   padding: 2px 8px;
   border-radius: 999px;
-  background: color-mix(in srgb, var(--c-purple) 12%, transparent);
-  color: var(--c-purple);
+  background: color-mix(in srgb, var(--c-agent) 12%, transparent);
+  color: var(--c-agent);
 }
 .writers-meta {
-  font: 9.5px var(--mono);
+  font: 9.5px var(--font-code);
   color: var(--c-dim);
 }
 .writers-empty {
@@ -2576,24 +2551,32 @@ body,
 .minimap-node {
   position: absolute;
   border-radius: 1.5px;
-  background: var(--kind);
+  background: var(--c-muted);
   opacity: 0.55;
 }
 .minimap-node.is-group {
-  background: color-mix(in srgb, var(--kind) 4%, transparent);
-  border: 1px dashed color-mix(in srgb, var(--kind) 55%, transparent);
+  background: color-mix(in srgb, var(--c-muted) 4%, transparent);
+  border: 1px dashed color-mix(in srgb, var(--c-muted) 55%, transparent);
   opacity: 1;
   border-radius: 2px;
 }
+.minimap-node.is-pinned {
+  background: var(--c-pin);
+  opacity: 0.9;
+}
+.minimap-node.is-agent {
+  background: var(--c-agent);
+  opacity: 0.9;
+}
 .minimap-node.is-selected {
   outline: 1px solid var(--c-accent);
   opacity: 0.8;
 }
 .minimap-fence {
   position: absolute;
-  border: 1px dashed color-mix(in srgb, var(--c-purple) 45%, transparent);
+  border: 1px dashed color-mix(in srgb, var(--c-agent) 45%, transparent);
   border-radius: 2px;
-  background: color-mix(in srgb, var(--c-purple) 3%, transparent);
+  background: color-mix(in srgb, var(--c-agent) 3%, transparent);
 }
 .minimap-presence {
   position: absolute;
@@ -2628,7 +2611,7 @@ body,
   position: absolute;
   right: 5px;
   bottom: 3px;
-  font: 8px var(--mono);
+  font: 8px var(--font-code);
   color: var(--c-dim);
 }
 
@@ -2730,7 +2713,7 @@ body,
   color: var(--c-accent);
 }
 .edge-hint-keys {
-  font: 9px var(--mono);
+  font: 9px var(--font-code);
   color: var(--c-dim);
 }
 
@@ -2783,8 +2766,8 @@ body,
   padding: 2px 9px;
   border-radius: 999px;
   background: var(--c-panel-soft);
-  border: 1px solid color-mix(in srgb, var(--c-warn) 40%, transparent);
-  color: var(--c-warn);
+  border: 1px solid color-mix(in srgb, var(--c-agent) 40%, transparent);
+  color: var(--c-agent);
   font-size: 9.5px;
   font-weight: 600;
   white-space: nowrap;
@@ -2793,7 +2776,7 @@ body,
   width: 6px;
   height: 6px;
   border-radius: 50%;
-  background: var(--c-warn);
+  background: var(--c-agent);
 }
 
 /* Quiet-board affordance in the top bar */
@@ -2813,8 +2796,8 @@ body,
   flex-shrink: 0;
 }
 .start-session-btn:hover {
-  border-color: color-mix(in srgb, var(--c-purple) 40%, transparent);
-  color: var(--c-purple);
+  border-color: color-mix(in srgb, var(--c-agent) 40%, transparent);
+  color: var(--c-agent);
 }
 .start-session-dot {
   width: 7px;
@@ -2823,7 +2806,7 @@ body,
   background: var(--c-dim);
 }
 .start-session-btn:hover .start-session-dot {
-  background: var(--c-purple);
+  background: var(--c-agent);
 }
 .session-end {
   padding: 3px 10px;
@@ -2885,6 +2868,11 @@ body,
   background: var(--c-surface-hover);
   color: var(--c-text);
 }
+.session-receipt-who {
+  margin: 2px 0 0 15px;
+  font-size: 11px;
+  color: var(--c-muted);
+}
 .session-receipt-tiles {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
@@ -2915,6 +2903,111 @@ body,
 .session-receipt-tile-value.tone-danger {
   color: var(--c-danger);
 }
+/* What the session did with context (docs/design/AgentContext.dc.html receipt). */
+.session-receipt-context {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+  margin-top: var(--space-3);
+}
+.session-receipt-warn {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  padding: var(--space-2) 10px;
+  border-radius: 8px;
+  background: color-mix(in srgb, var(--c-warn) 10%, transparent);
+  color: var(--c-warn);
+  font-size: var(--fs-meta);
+}
+.session-receipt-warn svg,
+.session-receipt-context-head svg {
+  width: 13px;
+  height: 13px;
+  flex-shrink: 0;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+.session-receipt-context-row {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  padding-bottom: var(--space-2);
+  border-bottom: 1px solid var(--c-line);
+}
+.session-receipt-context-head {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  color: var(--c-agent);
+}
+.session-receipt-context-name {
+  flex: 1;
+  font-size: var(--fs-ui);
+  font-weight: 600;
+  color: var(--c-text);
+}
+.session-receipt-context-count {
+  font-size: var(--fs-meta);
+  color: var(--c-dim);
+}
+.session-receipt-context-items {
+  padding-left: 19px;
+  font-size: var(--fs-meta);
+  color: var(--c-muted);
+}
+.session-receipt-mini {
+  padding: 2px var(--space-2);
+  border: 1px solid var(--c-line);
+  border-radius: var(--r-control);
+  background: none;
+  color: var(--c-text);
+  font-size: var(--fs-meta);
+  cursor: pointer;
+}
+.session-receipt-lens {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  padding: 0;
+  border: none;
+  background: none;
+  color: var(--c-muted);
+  font-size: var(--fs-meta);
+  cursor: pointer;
+}
+.session-receipt-lens-track {
+  position: relative;
+  width: 32px;
+  height: 18px;
+  border-radius: var(--r-pill);
+  background: var(--c-line);
+}
+.session-receipt-lens-knob {
+  position: absolute;
+  left: 2px;
+  top: 2px;
+  width: 14px;
+  height: 14px;
+  border-radius: var(--r-pill);
+  background: var(--c-muted);
+}
+.session-receipt-lens.is-on .session-receipt-lens-track {
+  background: var(--c-agent);
+}
+.session-receipt-lens.is-on .session-receipt-lens-knob {
+  left: auto;
+  right: 2px;
+  background: var(--c-bg);
+}
+/* The lens: nodes the session did not touch step back. */
+.canvas-node.lens-dimmed {
+  opacity: 0.35;
+}
+
 .session-receipt-note,
 .session-receipt-diff {
   margin-top: 10px;
@@ -2940,8 +3033,8 @@ body,
   cursor: pointer;
 }
 .session-receipt-primary {
-  border: 1px solid var(--c-accent-25);
-  background: var(--c-accent-12);
+  border: 1px solid color-mix(in srgb, var(--c-accent) 25%, transparent);
+  background: color-mix(in srgb, var(--c-accent) 12%, transparent);
   color: var(--c-accent);
 }
 .session-receipt-primary:disabled {
@@ -2966,7 +3059,7 @@ body,
   border: 1px solid color-mix(in srgb, var(--c-warn) 35%, transparent);
   background: color-mix(in srgb, var(--c-warn) 12%, transparent);
   color: var(--c-warn);
-  font: 11px var(--mono);
+  font: 11px var(--font-code);
   font-weight: 600;
   white-space: nowrap;
   flex-shrink: 0;
@@ -3061,7 +3154,7 @@ body,
   background: color-mix(in srgb, var(--c-panel) 92%, black 8%);
   border: 1px solid color-mix(in srgb, var(--c-line) 78%, var(--c-accent) 22%);
   border-radius: 10px;
-  box-shadow: 0 14px 36px var(--c-shadow-heavy), 0 0 0 1px var(--c-accent-8);
+  box-shadow: 0 14px 36px var(--c-shadow-heavy), 0 0 0 1px color-mix(in srgb, var(--c-accent) 8%, transparent);
   backdrop-filter: blur(14px);
   color: var(--c-text);
   font-size: 12px;
@@ -3197,10 +3290,10 @@ body,
   min-height: 20px;
   padding: 2px 7px;
   border-radius: 999px;
-  border: 1px solid var(--c-accent-25);
-  background: var(--c-accent-10);
+  border: 1px solid color-mix(in srgb, var(--c-accent) 25%, transparent);
+  background: color-mix(in srgb, var(--c-accent) 10%, transparent);
   color: var(--c-accent);
-  font: 11px/1 var(--mono);
+  font: 11px/1 var(--font-code);
   white-space: nowrap;
 }
 
@@ -3259,7 +3352,7 @@ body,
   min-width: 0;
 }
 .connection-banner-meta {
-  font: 9.5px var(--mono);
+  font: 9.5px var(--font-code);
   color: var(--c-muted);
 }
 .connection-banner-progress {
@@ -3436,7 +3529,7 @@ body,
   border: none;
   background: var(--c-panel-soft);
   color: var(--c-text);
-  font: 13px / 1.6 var(--mono);
+  font: 13px / 1.6 var(--font-code);
   padding: 12px;
   outline: none;
 }
@@ -3474,7 +3567,7 @@ body,
   border-radius: var(--radius-sm);
   color: var(--c-muted);
   cursor: pointer;
-  font-family: var(--font);
+  font-family: var(--font-ui);
   transition: all 0.12s ease;
 }
 
@@ -3485,13 +3578,13 @@ body,
 }
 
 .md-toolbar-btn-primary {
-  background: var(--c-accent-15);
-  border-color: var(--c-accent-40);
+  background: color-mix(in srgb, var(--c-accent) 15%, transparent);
+  border-color: color-mix(in srgb, var(--c-accent) 40%, transparent);
   color: var(--c-accent);
 }
 
 .md-toolbar-btn-primary:hover {
-  background: var(--c-accent-25);
+  background: color-mix(in srgb, var(--c-accent) 25%, transparent);
   border-color: var(--c-accent);
 }
 
@@ -3574,7 +3667,7 @@ body,
   border-left: 3px solid var(--c-accent);
   padding: 0.5em 1em;
   margin: 0.8em 0;
-  background: var(--c-accent-8);
+  background: color-mix(in srgb, var(--c-accent) 8%, transparent);
   border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
 }
 
@@ -3597,7 +3690,7 @@ body,
 }
 
 .md-reader-content code {
-  font-family: var(--mono);
+  font-family: var(--font-code);
   font-size: 0.88em;
   background: var(--c-surface-hover);
   padding: 2px 6px;
@@ -3636,7 +3729,7 @@ body,
 }
 
 .md-reader-content th {
-  background: var(--c-accent-8);
+  background: color-mix(in srgb, var(--c-accent) 8%, transparent);
   font-weight: 600;
   color: var(--c-text);
   padding: 10px 14px;
@@ -3680,17 +3773,17 @@ body,
   border-radius: var(--radius);
   color: var(--c-muted);
   cursor: pointer;
-  font-family: var(--font);
+  font-family: var(--font-ui);
   transition: all 0.15s ease;
   z-index: 1;
   box-shadow: 0 4px 16px var(--c-shadow);
 }
 
 .md-edit-fab:hover {
-  background: var(--c-accent-12);
+  background: color-mix(in srgb, var(--c-accent) 12%, transparent);
   border-color: var(--c-accent);
   color: var(--c-accent);
-  box-shadow: 0 4px 20px var(--c-glow-accent);
+  box-shadow: 0 4px 20px color-mix(in srgb, var(--c-accent) 15%, transparent);
 }
 
 /* ── Inline WYSIWYG editor (contentEditable on the rendered HTML) ─
@@ -3709,7 +3802,7 @@ body,
 
 .md-reader-editable::selection,
 .md-reader-editable *::selection {
-  background: var(--c-accent-25);
+  background: color-mix(in srgb, var(--c-accent) 25%, transparent);
 }
 
 /* ── Inline selection toolbar (contentEditable WYSIWYG) ────────── */
@@ -3725,7 +3818,7 @@ body,
   border: 1px solid var(--c-line);
   border-radius: 8px;
   box-shadow: 0 4px 16px var(--c-shadow), 0 0 0 1px var(--c-line-30);
-  font-family: var(--font);
+  font-family: var(--font-ui);
   animation: md-inline-format-bar-in 0.1s ease-out;
 }
 
@@ -3744,7 +3837,7 @@ body,
   background: none;
   border: 1px solid transparent;
   border-radius: var(--radius-sm);
-  font: 600 12px var(--font);
+  font: 600 12px var(--font-ui);
   color: var(--c-text-soft);
   cursor: pointer;
   white-space: nowrap;
@@ -3758,7 +3851,7 @@ body,
 }
 
 .md-inline-format-btn:active {
-  background: var(--c-accent-12);
+  background: color-mix(in srgb, var(--c-accent) 12%, transparent);
   color: var(--c-accent);
 }
 
@@ -3801,7 +3894,7 @@ body,
   background: none;
   border: 1px solid transparent;
   border-radius: var(--radius-sm);
-  font-family: var(--mono);
+  font-family: var(--font-code);
   font-size: 12px;
   font-weight: 600;
   color: var(--c-muted);
@@ -3817,7 +3910,7 @@ body,
 }
 
 .md-format-btn:active {
-  background: var(--c-accent-12);
+  background: color-mix(in srgb, var(--c-accent) 12%, transparent);
   color: var(--c-accent);
 }
 
@@ -3884,10 +3977,6 @@ html.is-node-resizing .canvas-node {
   transition: box-shadow 0.15s ease !important;
 }
 
-html.is-node-dragging .attention-field-layer {
-  visibility: hidden;
-}
-
 html.is-node-dragging,
 html.is-node-dragging *,
 html.is-canvas-panning,
@@ -3960,12 +4049,12 @@ html.is-node-resizing .ext-app-preview-catcher {
 }
 
 .context-menu-item:hover {
-  background: var(--c-accent-10);
+  background: color-mix(in srgb, var(--c-accent) 10%, transparent);
   color: var(--c-accent);
 }
 
 .context-menu-item.is-danger .context-menu-label {
-  color: var(--c-danger, #e5484d);
+  color: var(--c-danger);
 }
 
 .context-menu-shortcut {
@@ -4043,8 +4132,8 @@ html.is-node-resizing .ext-app-preview-catcher {
 }
 
 .context-menu-color-swatch:hover {
-  background: var(--c-accent-8);
-  border-color: var(--c-accent-30);
+  background: color-mix(in srgb, var(--c-accent) 8%, transparent);
+  border-color: color-mix(in srgb, var(--c-accent) 30%, transparent);
 }
 
 .context-menu-color-swatch.active {
@@ -4055,7 +4144,7 @@ html.is-node-resizing .ext-app-preview-catcher {
 .context-menu-color-dot {
   background: var(--swatch-color);
   border-radius: 999px;
-  box-shadow: 0 0 0 1px color-mix(in srgb, var(--swatch-color) 60%, #000 40%);
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--swatch-color) 60%, var(--c-bg) 40%);
   flex: 0 0 auto;
   height: 10px;
   width: 10px;
@@ -4092,7 +4181,7 @@ html.is-node-resizing .ext-app-preview-catcher {
 /* Edge labels — --edge-chrome-scale is set on the edge <svg> so labels keep a
    constant screen size while zoomed out (see edgeChromeScale in EdgeLayer). */
 .edge-label {
-  font-family: var(--font);
+  font-family: var(--font-ui);
   font-size: calc(11px * var(--edge-label-scale, 1));
   pointer-events: none;
   user-select: none;
@@ -4132,10 +4221,10 @@ html.is-node-resizing .ext-app-preview-catcher {
 @keyframes trace-pulse {
   0%,
   100% {
-    box-shadow: 0 0 0 0 var(--c-accent-30);
+    box-shadow: 0 0 0 0 color-mix(in srgb, var(--c-accent) 30%, transparent);
   }
   50% {
-    box-shadow: 0 0 0 4px var(--c-accent-15);
+    box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-accent) 15%, transparent);
   }
 }
 
@@ -4146,7 +4235,7 @@ html.is-node-resizing .ext-app-preview-catcher {
   gap: 10px;
   height: 100%;
   overflow: auto;
-  font-family: var(--mono);
+  font-family: var(--font-code);
   font-size: 12px;
   color: var(--c-text);
 }
@@ -4195,12 +4284,12 @@ html.is-node-resizing .ext-app-preview-catcher {
 
 .diff-node .diff-line-add {
   color: var(--c-ok);
-  background: var(--c-ok-10);
+  background: color-mix(in srgb, var(--c-ok) 10%, transparent);
 }
 
 .diff-node .diff-line-remove {
   color: var(--c-danger);
-  background: var(--c-danger-12);
+  background: color-mix(in srgb, var(--c-danger) 12%, transparent);
 }
 
 .diff-node .diff-line-context {
@@ -4241,7 +4330,7 @@ html.is-node-resizing .ext-app-preview-catcher {
   border-spacing: 0;
   width: max-content;
   min-width: 100%;
-  font-family: var(--mono);
+  font-family: var(--font-code);
   color: var(--c-text);
 }
 
@@ -4344,21 +4433,21 @@ html.is-node-resizing .ext-app-preview-catcher {
 
 /* ── Prompt nodes ──────────────────────────────────────────── */
 .canvas-node:has(.prompt-node-inner) {
-  border-color: var(--c-accent-30);
+  border-color: color-mix(in srgb, var(--c-accent) 30%, transparent);
 }
 
 .canvas-node:has(.prompt-node-inner) .node-type-badge {
-  background: var(--c-accent-15);
+  background: color-mix(in srgb, var(--c-accent) 15%, transparent);
   color: var(--c-accent);
 }
 
 /* ── Response nodes ────────────────────────────────────────── */
 .canvas-node:has(.response-node-inner) {
-  border-color: var(--c-ok-25);
+  border-color: color-mix(in srgb, var(--c-ok) 25%, transparent);
 }
 
 .canvas-node:has(.response-node-inner) .node-type-badge {
-  background: var(--c-ok-12);
+  background: color-mix(in srgb, var(--c-ok) 12%, transparent);
   color: var(--c-ok);
 }
 
@@ -4377,39 +4466,38 @@ html.is-node-resizing .ext-app-preview-catcher {
 
 /* ── Multi-node selection (item 13: outline, corner handles, soft glow) ── */
 .canvas-node.selected {
-  border-color: var(--c-accent);
-  box-shadow: 0 0 0 1px var(--c-accent), 0 0 0 4px color-mix(in srgb, var(--c-accent) 10%, transparent);
+  box-shadow: 0 0 0 3px var(--c-bg), 0 0 0 5px var(--c-accent), var(--e-1);
 }
 .node-selection-handle {
   position: absolute;
-  width: 7px;
-  height: 7px;
-  background: var(--c-bg);
+  width: 8px;
+  height: 8px;
+  background: var(--c-panel);
   border: 1.5px solid var(--c-accent);
   border-radius: 2px;
   pointer-events: none;
   z-index: 3;
 }
 .node-selection-handle.is-tl {
-  left: -4px;
-  top: -4px;
+  left: -9px;
+  top: -9px;
 }
 .node-selection-handle.is-tr {
-  right: -4px;
-  top: -4px;
+  right: -9px;
+  top: -9px;
 }
 .node-selection-handle.is-bl {
-  left: -4px;
-  bottom: -4px;
+  left: -9px;
+  bottom: -9px;
 }
 .node-selection-handle.is-br {
-  right: -4px;
-  bottom: -4px;
+  right: -9px;
+  bottom: -9px;
 }
 
 /* Lasso rectangle overlay */
 .lasso-rect {
-  background: var(--c-accent-8);
+  background: color-mix(in srgb, var(--c-accent) 8%, transparent);
   border: 1px solid var(--c-accent);
   border-radius: 2px;
   z-index: 9998;
@@ -4451,7 +4539,7 @@ html.is-node-resizing .ext-app-preview-catcher {
   border-radius: 4px;
   background: color-mix(in srgb, var(--c-bg) 72%, transparent);
   color: var(--c-annotation);
-  font-family: var(--font);
+  font-family: var(--font-ui);
   font-weight: 700;
   line-height: 1.15;
   outline: none;
@@ -4465,13 +4553,13 @@ html.is-node-resizing .ext-app-preview-catcher {
   pointer-events: none;
   border: 2px dashed var(--c-accent);
   border-radius: 8px;
-  background: var(--c-accent-8);
+  background: color-mix(in srgb, var(--c-accent) 8%, transparent);
   animation: drop-zone-pulse 1.5s ease-in-out infinite;
 }
 
 @keyframes drop-zone-pulse {
-  0%, 100% { background: var(--c-accent-8); }
-  50% { background: var(--c-accent-12); }
+  0%, 100% { background: color-mix(in srgb, var(--c-accent) 8%, transparent); }
+  50% { background: color-mix(in srgb, var(--c-accent) 12%, transparent); }
 }
 
 .drop-zone-indicator {
@@ -4486,9 +4574,9 @@ html.is-node-resizing .ext-app-preview-catcher {
   padding: 20px 32px;
   background: var(--c-panel-glass);
   backdrop-filter: blur(16px);
-  border: 1px solid var(--c-accent-30);
+  border: 1px solid color-mix(in srgb, var(--c-accent) 30%, transparent);
   border-radius: 12px;
-  box-shadow: 0 4px 24px var(--c-shadow), 0 0 24px var(--c-glow-accent);
+  box-shadow: 0 4px 24px var(--c-shadow), 0 0 24px color-mix(in srgb, var(--c-accent) 15%, transparent);
 }
 
 .drop-zone-icon {
@@ -4500,7 +4588,7 @@ html.is-node-resizing .ext-app-preview-catcher {
   display: flex;
   align-items: center;
   justify-content: center;
-  border: 2px dashed var(--c-accent-40);
+  border: 2px dashed color-mix(in srgb, var(--c-accent) 40%, transparent);
   border-radius: 50%;
 }
 
@@ -4556,7 +4644,7 @@ html.is-node-resizing .ext-app-preview-catcher {
   border-radius: 8px;
   background: var(--c-bg);
   color: var(--c-text);
-  font: 13px/1.4 var(--mono);
+  font: 13px/1.4 var(--font-code);
 }
 .text-prompt-input:focus {
   outline: none;
@@ -4580,7 +4668,7 @@ html.is-node-resizing .ext-app-preview-catcher {
   font-weight: 600;
 }
 .text-prompt-cancel:hover {
-  background: var(--c-accent-10);
+  background: color-mix(in srgb, var(--c-accent) 10%, transparent);
   border-color: var(--c-muted);
 }
 .text-prompt-cancel:focus-visible,
@@ -4701,181 +4789,51 @@ html.is-node-resizing .ext-app-preview-catcher {
   cursor: default;
 }
 .selection-bar-action.is-pin:hover {
-  background: color-mix(in srgb, var(--c-warn) 10%, transparent);
-  color: var(--c-warn);
+  background: color-mix(in srgb, var(--c-pin) 10%, transparent);
+  color: var(--c-pin);
 }
 .selection-bar-icon.is-danger:hover {
   background: color-mix(in srgb, var(--c-danger) 12%, transparent);
   color: var(--c-danger);
 }
 
-/* ── Context-pinned nodes — amber glow ───────────────────────── */
+/* ── Node states (docs/design/Context.dc.html) ─────────────────
+   In context: pin-blue border, tinted header, blue kind icon and the filled
+   pin badge. Selection is a ring with a gap outside the border, so the pin
+   styling survives it. */
 .canvas-node.context-pinned {
-  border-color: var(--c-warn-60);
-  box-shadow: 0 0 0 2px var(--c-warn), 0 0 8px var(--c-warn-30);
+  border: 1.5px solid var(--c-pin);
 }
 
-.canvas-node.context-pinned .node-type-badge {
-  background: var(--c-warn-15);
-  color: var(--c-warn);
+.canvas-node.context-pinned .node-titlebar {
+  background: color-mix(in srgb, var(--c-pin) 12%, var(--c-panel));
 }
 
-:root[data-theme="light"] .canvas-node.context-pinned {
-  border-color: #4BBCFF;
-  box-shadow: 0 0 0 2px #4BBCFF, 0 0 12px rgba(75, 188, 255, 0.28);
-}
-
-:root[data-theme="light"] .canvas-node.context-pinned .node-type-badge {
-  background: rgba(75, 188, 255, 0.14);
-  color: #1588CE;
-}
-
-/* ── Attention layer — human-facing semantic feedback ───────── */
-.canvas-node.attention-focus-primary {
-  box-shadow:
-    0 0 0 1px color-mix(in srgb, var(--c-warn) 72%, transparent),
-    0 12px 34px color-mix(in srgb, var(--c-warn) 18%, transparent),
-    inset 0 0 0 1px color-mix(in srgb, var(--c-warn) 28%, transparent);
-}
-
-.canvas-node.attention-focus-primary .node-titlebar {
-  background:
-    linear-gradient(90deg, color-mix(in srgb, var(--c-warn) 12%, transparent), transparent 68%),
-    var(--c-panel-soft);
-}
-
-:root[data-theme="light"] .canvas-node.attention-focus-primary {
-  box-shadow:
-    0 0 0 1px rgba(75, 188, 255, 0.72),
-    0 12px 34px rgba(75, 188, 255, 0.2),
-    inset 0 0 0 1px rgba(75, 188, 255, 0.18);
-}
-
-:root[data-theme="light"] .canvas-node.attention-focus-primary .node-titlebar {
-  background:
-    linear-gradient(90deg, rgba(75, 188, 255, 0.14), transparent 68%),
-    var(--c-panel-soft);
-}
-
-.canvas-node.attention-focus-secondary {
-  box-shadow:
-    0 0 0 1px color-mix(in srgb, var(--c-warn) 30%, transparent),
-    0 8px 24px color-mix(in srgb, var(--c-warn) 10%, transparent);
-}
-
-.canvas-node.attention-focus-secondary .node-type-badge {
-  background: color-mix(in srgb, var(--c-warn) 10%, transparent);
-  color: color-mix(in srgb, var(--c-warn) 88%, var(--c-text) 12%);
-}
-
-:root[data-theme="light"] .canvas-node.attention-focus-secondary {
-  box-shadow:
-    0 0 0 1px rgba(75, 188, 255, 0.32),
-    0 8px 24px rgba(75, 188, 255, 0.12);
-}
-
-:root[data-theme="light"] .canvas-node.attention-focus-secondary .node-type-badge {
-  background: rgba(75, 188, 255, 0.12);
-  color: #1588CE;
+.canvas-node.context-pinned .node-type-icon {
+  color: var(--c-pin);
 }
 
+/* A short pulse on the nodes a canvas change touched (pin, connect, group).
+   Accent, not a meaning colour: it says "this changed", nothing more. */
 .canvas-node.attention-pulse {
   animation: attention-node-pulse 0.9s ease;
 }
 
-:root[data-theme="light"] .canvas-node.attention-pulse {
-  animation-name: attention-node-pulse-light;
-}
-
 @keyframes attention-node-pulse {
   0% {
     transform: translateZ(0) scale(1);
-    box-shadow:
-      0 0 0 0 color-mix(in srgb, var(--c-warn) 0%, transparent),
-      0 4px 24px var(--c-shadow);
   }
   38% {
     transform: translateZ(0) scale(1.012);
     box-shadow:
-      0 0 0 3px color-mix(in srgb, var(--c-warn) 35%, transparent),
-      0 16px 34px color-mix(in srgb, var(--c-warn) 16%, transparent);
+      0 0 0 3px color-mix(in srgb, var(--c-accent) 35%, transparent),
+      var(--e-1);
   }
   100% {
     transform: translateZ(0) scale(1);
   }
 }
 
-@keyframes attention-node-pulse-light {
-  0% {
-    transform: translateZ(0) scale(1);
-    box-shadow:
-      0 0 0 0 rgba(75, 188, 255, 0),
-      0 4px 24px var(--c-shadow);
-  }
-  38% {
-    transform: translateZ(0) scale(1.012);
-    box-shadow:
-      0 0 0 3px rgba(75, 188, 255, 0.32),
-      0 16px 34px rgba(75, 188, 255, 0.18);
-  }
-  100% {
-    transform: translateZ(0) scale(1);
-  }
-}
-
-.attention-field-layer {
-  position: absolute;
-  inset: 0;
-  pointer-events: none;
-  z-index: 0;
-}
-
-.attention-field-region,
-.attention-field-node {
-  position: absolute;
-  pointer-events: none;
-}
-
-.attention-field-region {
-  background:
-    radial-gradient(circle at 25% 30%, color-mix(in srgb, var(--c-warn) 16%, transparent), transparent 62%),
-    linear-gradient(135deg, color-mix(in srgb, var(--c-warn) 10%, transparent), color-mix(in srgb, var(--c-accent) 5%, transparent));
-  border: 1px solid color-mix(in srgb, var(--c-warn) 22%, transparent);
-  opacity: 0.8;
-  filter: blur(18px);
-}
-
-.attention-field-node.attention-field-primary {
-  border: 1px solid color-mix(in srgb, var(--c-warn) 38%, transparent);
-  background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--c-warn) 16%, transparent), transparent 72%);
-  box-shadow: 0 0 38px color-mix(in srgb, var(--c-warn) 18%, transparent);
-}
-
-.attention-field-node.attention-field-secondary {
-  border: 1px solid color-mix(in srgb, var(--c-warn) 18%, transparent);
-  background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--c-warn) 9%, transparent), transparent 74%);
-  box-shadow: 0 0 24px color-mix(in srgb, var(--c-warn) 10%, transparent);
-}
-
-:root[data-theme="light"] .attention-field-region {
-  background:
-    radial-gradient(circle at 25% 30%, rgba(75, 188, 255, 0.16), transparent 62%),
-    linear-gradient(135deg, rgba(75, 188, 255, 0.1), rgba(75, 188, 255, 0.05));
-  border: 1px solid rgba(75, 188, 255, 0.22);
-}
-
-:root[data-theme="light"] .attention-field-node.attention-field-primary {
-  border: 1px solid rgba(75, 188, 255, 0.4);
-  background: radial-gradient(circle at 50% 50%, rgba(75, 188, 255, 0.18), transparent 72%);
-  box-shadow: 0 0 38px rgba(75, 188, 255, 0.2);
-}
-
-:root[data-theme="light"] .attention-field-node.attention-field-secondary {
-  border: 1px solid rgba(75, 188, 255, 0.18);
-  background: radial-gradient(circle at 50% 50%, rgba(75, 188, 255, 0.1), transparent 74%);
-  box-shadow: 0 0 24px rgba(75, 188, 255, 0.12);
-}
-
 /* Anchored to the canvas region (not the window): since the rail-chrome
    restructure the session panel owns the window's right edge. */
 .attention-toast {
@@ -4889,7 +4847,7 @@ html.is-node-resizing .ext-app-preview-catcher {
   padding: 6px 12px 6px 10px;
   background: color-mix(in srgb, var(--c-panel-glass) 96%, transparent);
   backdrop-filter: blur(14px);
-  border: 1px solid color-mix(in srgb, var(--c-line) 76%, var(--c-warn) 24%);
+  border: 1px solid color-mix(in srgb, var(--c-line) 76%, var(--c-accent) 24%);
   border-radius: 12px;
   box-shadow: 0 8px 22px var(--c-shadow);
   color: var(--c-text);
@@ -4963,9 +4921,9 @@ html.is-node-resizing .ext-app-preview-catcher {
   padding: 14px;
   background: color-mix(in srgb, var(--c-panel-glass) 96%, transparent);
   backdrop-filter: blur(16px);
-  border: 1px solid color-mix(in srgb, var(--c-line) 82%, var(--c-warn) 18%);
+  border: 1px solid color-mix(in srgb, var(--c-line) 82%, var(--c-accent) 18%);
   border-radius: 18px;
-  box-shadow: 0 14px 36px var(--c-shadow), 0 0 0 1px color-mix(in srgb, var(--c-warn) 8%, transparent);
+  box-shadow: 0 14px 36px var(--c-shadow), 0 0 0 1px color-mix(in srgb, var(--c-accent) 8%, transparent);
   z-index: 9990;
 }
 
@@ -4979,7 +4937,7 @@ html.is-node-resizing .ext-app-preview-catcher {
   padding: 8px 12px 8px 14px;
   background: color-mix(in srgb, var(--c-panel-glass) 96%, transparent);
   backdrop-filter: blur(16px);
-  border: 1px solid color-mix(in srgb, var(--c-line) 82%, var(--c-warn) 18%);
+  border: 1px solid color-mix(in srgb, var(--c-line) 82%, var(--c-accent) 18%);
   border-right: 0;
   border-radius: 14px 0 0 14px;
   box-shadow: 0 12px 36px var(--c-shadow);
@@ -5016,7 +4974,7 @@ html.is-node-resizing .ext-app-preview-catcher {
   align-items: center;
   justify-content: center;
   border-radius: 9px;
-  background: var(--c-warn);
+  background: var(--c-accent);
   color: var(--c-contrast-fg);
   font-size: 10px;
   font-weight: 700;
@@ -5115,16 +5073,16 @@ html.is-node-resizing .ext-app-preview-catcher {
 }
 
 .attention-tone-context {
-  border-color: color-mix(in srgb, var(--c-warn) 26%, transparent);
+  border-color: color-mix(in srgb, var(--c-pin) 26%, transparent);
 }
 
 .attention-toast.attention-tone-context {
-  color: color-mix(in srgb, var(--c-warn) 82%, var(--c-text) 18%);
+  color: color-mix(in srgb, var(--c-pin) 82%, var(--c-text) 18%);
 }
 
 .attention-tone-context .attention-history-kind,
 .attention-tone-context .attention-toast-title {
-  color: color-mix(in srgb, var(--c-warn) 82%, var(--c-text) 18%);
+  color: color-mix(in srgb, var(--c-pin) 82%, var(--c-text) 18%);
 }
 
 .attention-tone-relationship {
@@ -5141,33 +5099,33 @@ html.is-node-resizing .ext-app-preview-catcher {
 }
 
 .attention-tone-group {
-  border-color: color-mix(in srgb, var(--c-purple) 24%, transparent);
+  border-color: color-mix(in srgb, var(--c-accent) 24%, transparent);
 }
 
 .attention-toast.attention-tone-group {
-  color: color-mix(in srgb, var(--c-purple) 78%, var(--c-text) 22%);
+  color: color-mix(in srgb, var(--c-accent) 78%, var(--c-text) 22%);
 }
 
 .attention-tone-group .attention-history-kind,
 .attention-tone-group .attention-toast-title {
-  color: color-mix(in srgb, var(--c-purple) 78%, var(--c-text) 22%);
+  color: color-mix(in srgb, var(--c-accent) 78%, var(--c-text) 22%);
 }
 
 .attention-tone-cluster,
 .attention-tone-neighborhood {
-  border-color: color-mix(in srgb, var(--c-warn-alt) 22%, transparent);
+  border-color: color-mix(in srgb, var(--c-accent) 22%, transparent);
 }
 
 .attention-toast.attention-tone-cluster,
 .attention-toast.attention-tone-neighborhood {
-  color: color-mix(in srgb, var(--c-warn-alt) 78%, var(--c-text) 22%);
+  color: color-mix(in srgb, var(--c-accent) 78%, var(--c-text) 22%);
 }
 
 .attention-tone-cluster .attention-history-kind,
 .attention-tone-cluster .attention-toast-title,
 .attention-tone-neighborhood .attention-history-kind,
 .attention-tone-neighborhood .attention-toast-title {
-  color: color-mix(in srgb, var(--c-warn-alt) 78%, var(--c-text) 22%);
+  color: color-mix(in srgb, var(--c-accent) 78%, var(--c-text) 22%);
 }
 
 .attention-tone-remove {
@@ -5214,7 +5172,7 @@ html.is-node-resizing .ext-app-preview-catcher {
   background: color-mix(in srgb, var(--group-color, var(--c-accent)) 9%, transparent);
 }
 .canvas-node.group-node.is-drop-source {
-  border-color: color-mix(in srgb, var(--c-warn) 60%, transparent);
+  border-color: color-mix(in srgb, var(--c-accent) 60%, transparent);
 }
 .canvas-node.group-node .node-body {
   background: none;
@@ -5271,7 +5229,7 @@ html.is-node-resizing .ext-app-preview-catcher {
   text-overflow: ellipsis;
 }
 .group-count {
-  font: 9px var(--mono);
+  font: 9px var(--font-code);
   color: var(--c-dim);
 }
 .group-title-input {
@@ -5407,10 +5365,11 @@ html.is-node-resizing .ext-app-preview-catcher {
   width: 6px;
   height: 6px;
   border-radius: 2px;
+  background: var(--c-muted);
   opacity: 0.8;
 }
 .group-chip-count {
-  font: 9px var(--mono);
+  font: 9px var(--font-code);
   color: var(--c-dim);
 }
 
@@ -5434,7 +5393,7 @@ html.is-node-resizing .ext-app-preview-catcher {
   color: var(--c-accent);
 }
 .drop-pill-hint {
-  font: 9px var(--mono);
+  font: 9px var(--font-code);
   color: var(--c-dim);
 }
 
@@ -5450,9 +5409,9 @@ html.is-node-resizing .ext-app-preview-catcher {
   padding: 8px 14px;
   background: var(--c-panel-glass);
   backdrop-filter: blur(12px);
-  border: 1px solid var(--c-warn);
+  border: 1px solid var(--c-pin);
   border-radius: var(--radius);
-  box-shadow: 0 8px 32px var(--c-shadow), 0 0 0 1px var(--c-warn-15);
+  box-shadow: 0 8px 32px var(--c-shadow), 0 0 0 1px color-mix(in srgb, var(--c-pin) 15%, transparent);
   z-index: 64;
   white-space: nowrap;
 }
@@ -5460,35 +5419,35 @@ html.is-node-resizing .ext-app-preview-catcher {
 .context-pin-bar-count {
   font-size: 12px;
   font-weight: 600;
-  color: var(--c-warn);
+  color: var(--c-pin);
 }
 
 .context-pin-bar-btn {
   padding: 5px 12px;
   font-size: 12px;
   font-weight: 600;
-  background: var(--c-warn-10);
-  border: 1px solid var(--c-warn-30);
+  background: color-mix(in srgb, var(--c-pin) 10%, transparent);
+  border: 1px solid color-mix(in srgb, var(--c-pin) 30%, transparent);
   border-radius: var(--radius-sm);
-  color: var(--c-warn);
+  color: var(--c-pin);
   cursor: pointer;
-  font-family: var(--font);
+  font-family: var(--font-ui);
 }
 
 .context-pin-bar-btn:hover {
-  background: var(--c-warn-20);
-  border-color: var(--c-warn);
+  background: color-mix(in srgb, var(--c-pin) 20%, transparent);
+  border-color: var(--c-pin);
 }
 
 .context-pin-bar-ask {
-  background: var(--c-warn);
-  color: var(--c-contrast-fg);
-  border-color: var(--c-warn);
+  background: var(--c-pin);
+  color: var(--c-on-pin);
+  border-color: var(--c-pin);
 }
 
 .context-pin-bar-ask:hover {
-  background: var(--c-warn-hover);
-  border-color: var(--c-warn-hover);
+  background: color-mix(in srgb, var(--c-pin) 85%, var(--c-text));
+  border-color: color-mix(in srgb, var(--c-pin) 85%, var(--c-text));
 }
 
 .context-pin-bar-clear {
@@ -5530,7 +5489,7 @@ html.is-node-resizing .ext-app-preview-catcher {
   overflow: hidden;
 }
 .expanded-overlay-panel.is-pinned {
-  border-color: color-mix(in srgb, var(--c-warn) 45%, var(--c-line));
+  border-color: color-mix(in srgb, var(--c-pin) 45%, var(--c-line));
 }
 .expanded-header {
   display: flex;
@@ -5573,7 +5532,7 @@ html.is-node-resizing .ext-app-preview-catcher {
   cursor: pointer;
 }
 .expanded-pin.is-on {
-  color: var(--c-warn);
+  color: var(--c-pin);
 }
 .expanded-spacer {
   flex: 1;
@@ -5607,12 +5566,12 @@ html.is-node-resizing .ext-app-preview-catcher {
   padding: 8px 16px;
   border-top: 1px solid var(--c-line);
   background: color-mix(in srgb, var(--c-bg) 50%, transparent);
-  font: 9.5px var(--mono);
+  font: 9.5px var(--font-code);
   color: var(--c-dim);
   flex-shrink: 0;
 }
 .expanded-footer-hint.is-saving {
-  color: var(--c-warn);
+  color: var(--c-muted);
 }
 .expanded-actions {
   display: flex;
@@ -5629,7 +5588,7 @@ html.is-node-resizing .ext-app-preview-catcher {
   border-radius: var(--radius-sm);
   color: var(--c-text-soft);
   cursor: pointer;
-  font-family: var(--font);
+  font-family: var(--font-ui);
 }
 
 .expanded-action-btn:hover {
@@ -5639,25 +5598,25 @@ html.is-node-resizing .ext-app-preview-catcher {
 }
 
 .expanded-action-btn.expanded-action-primary {
-  background: var(--c-accent-12);
-  border-color: var(--c-accent-30);
+  background: color-mix(in srgb, var(--c-accent) 12%, transparent);
+  border-color: color-mix(in srgb, var(--c-accent) 30%, transparent);
   color: var(--c-accent);
 }
 
 .expanded-action-btn.expanded-action-primary:hover {
-  background: var(--c-accent-25);
+  background: color-mix(in srgb, var(--c-accent) 25%, transparent);
   border-color: var(--c-accent);
   color: var(--c-text);
 }
 
 .expanded-action-btn.expanded-action-active {
-  background: var(--c-warn-12);
-  border-color: var(--c-warn-30);
+  background: color-mix(in srgb, var(--c-warn) 12%, transparent);
+  border-color: color-mix(in srgb, var(--c-warn) 30%, transparent);
   color: var(--c-warn);
 }
 
 .expanded-action-btn.expanded-action-active:hover {
-  background: var(--c-warn-20);
+  background: color-mix(in srgb, var(--c-warn) 20%, transparent);
   border-color: var(--c-warn);
 }
 
@@ -5674,7 +5633,7 @@ html.is-node-resizing .ext-app-preview-catcher {
   display: flex;
   padding: 0;
   background:
-    radial-gradient(circle at top left, var(--c-accent-25), transparent 36rem),
+    radial-gradient(circle at top left, color-mix(in srgb, var(--c-accent) 25%, transparent), transparent 36rem),
     rgba(3, 7, 18, 0.96);
   color: var(--c-text);
 }
@@ -5691,7 +5650,7 @@ html.is-node-resizing .ext-app-preview-catcher {
   box-shadow: 0 18px 50px var(--c-shadow-heavy);
   color: var(--c-text-soft);
   cursor: pointer;
-  font: 600 12px/1 var(--font);
+  font: 600 12px/1 var(--font-ui);
   opacity: 0;
   pointer-events: none;
   transform: translateY(-6px);
@@ -5726,24 +5685,119 @@ html.is-node-resizing .ext-app-preview-catcher {
   border-radius: 0 !important;
 }
 
-/* ── Context pin button on node title bar ────────────────────── */
-.node-controls .ctx-pin-btn {
+/* ── Context pin on the node header (docs/design/Chrome.dc.html) ──
+   Always visible: an outline pin in a circle when the node is not in
+   context, the filled pin-blue badge when it is. */
+.canvas-node .node-controls .ctx-pin-btn:hover {
+  background: none;
+}
+
+/* ── What agents did with this node (docs/design/AgentContext.dc.html) ──
+   One chip after the title: glyph + word, hover explains. Violet = the agent
+   did it, muted = not yet, amber = needs a look. */
+.node-context-mark {
+  display: inline-flex;
+  align-items: center;
+  gap: calc(4px * var(--node-chrome-scale, 1));
+  height: calc(20px * var(--node-chrome-scale, 1));
+  padding: 0 calc(7px * var(--node-chrome-scale, 1));
+  border-radius: var(--r-pill);
+  font-size: calc(var(--fs-meta) * var(--node-chrome-scale, 1));
+  font-weight: 500;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+.node-context-mark svg {
+  width: calc(12px * var(--node-chrome-scale, 1));
+  height: calc(12px * var(--node-chrome-scale, 1));
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+.node-context-mark.is-agent {
+  color: var(--c-agent);
+  background: color-mix(in srgb, var(--c-agent) 16%, transparent);
+}
+.node-context-mark.is-muted {
   color: var(--c-muted);
-  opacity: 0;
-  transition: opacity 0.15s;
+  background: var(--c-panel-soft);
+}
+.node-context-mark.is-warn {
+  color: var(--c-warn);
+  background: color-mix(in srgb, var(--c-warn) 14%, transparent);
 }
 
-.canvas-node:hover .ctx-pin-btn {
-  opacity: 0.7;
+/* Near a pin (docs/design/NearPin.dc.html): dotted, weaker than in context. */
+.node-near-mark {
+  display: inline-flex;
+  align-items: center;
+  gap: calc(4px * var(--node-chrome-scale, 1));
+  height: calc(18px * var(--node-chrome-scale, 1));
+  padding: 0 calc(7px * var(--node-chrome-scale, 1));
+  border: 1px dotted var(--c-pin);
+  border-radius: var(--r-pill);
+  color: color-mix(in srgb, var(--c-pin) 75%, var(--c-text));
+  font-size: calc(var(--fs-meta) * var(--node-chrome-scale, 1));
+  font-weight: 500;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+.node-near-mark svg {
+  width: calc(12px * var(--node-chrome-scale, 1));
+  height: calc(12px * var(--node-chrome-scale, 1));
+}
+.node-near-ring {
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 2;
+  stroke-dasharray: 2.2 2.6;
+}
+.node-near-dot {
+  fill: currentColor;
 }
 
-.ctx-pin-btn.ctx-pin-active {
-  color: var(--c-warn);
-  opacity: 1 !important;
+/* Pinned by an agent: a violet dot on the pin badge. */
+.ctx-pin-mark {
+  position: relative;
+}
+.ctx-pin-agent-dot {
+  position: absolute;
+  right: -3px;
+  bottom: -3px;
+  width: 9px;
+  height: 9px;
+  box-sizing: border-box;
+  border-radius: var(--r-pill);
+  background: var(--c-agent);
+  border: 2px solid var(--c-panel);
+}
+
+/* The drawn 18 px circle sits inside the standard control hit target. */
+.ctx-pin-mark {
+  width: calc(18px * var(--node-chrome-scale, 1));
+  height: calc(18px * var(--node-chrome-scale, 1));
+  box-sizing: border-box;
+  border: 1.5px solid var(--c-muted);
+  border-radius: var(--r-pill);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(13px * var(--node-chrome-scale, 1));
+  color: var(--c-text-soft);
+}
+
+.ctx-pin-btn:hover .ctx-pin-mark {
+  border-color: var(--c-pin);
+  background: color-mix(in srgb, var(--c-pin) 12%, transparent);
+  color: var(--c-pin);
 }
 
-:root[data-theme="light"] .ctx-pin-btn.ctx-pin-active {
-  color: #4BBCFF;
+.ctx-pin-btn.ctx-pin-active .ctx-pin-mark {
+  border-color: var(--c-pin);
+  background: var(--c-pin);
+  color: var(--c-on-pin);
 }
 
 /* ── Context pin HUD — top-right pill ────────────────────────── */
@@ -5754,7 +5808,7 @@ html.is-node-resizing .ext-app-preview-catcher {
   padding: 5px 10px;
   background: var(--c-panel-glass);
   backdrop-filter: blur(12px);
-  border: 1px solid var(--c-warn-30);
+  border: 1px solid color-mix(in srgb, var(--c-pin) 30%, transparent);
   border-radius: var(--radius);
   white-space: nowrap;
 }
@@ -5762,7 +5816,7 @@ html.is-node-resizing .ext-app-preview-catcher {
 .context-pin-hud-label {
   font-size: 11px;
   font-weight: 600;
-  color: var(--c-warn);
+  color: var(--c-pin);
 }
 
 .context-pin-hud-clear {
@@ -5786,7 +5840,7 @@ html.is-node-resizing .ext-app-preview-catcher {
 
 .thread-turn-assistant {
   padding: 6px 0;
-  border-left: 2px solid var(--c-ok-20);
+  border-left: 2px solid color-mix(in srgb, var(--c-ok) 20%, transparent);
   padding-left: 10px;
   margin-left: 2px;
   overflow: hidden;
@@ -5948,7 +6002,7 @@ html.is-node-resizing .ext-app-preview-catcher {
   border-radius: 7px;
   background: var(--c-panel);
   color: var(--c-text);
-  font: 11.5px var(--font);
+  font: 11.5px var(--font-ui);
 }
 .snapshot-name-input:focus {
   outline: 2px solid var(--c-accent);
@@ -6006,8 +6060,8 @@ html.is-node-resizing .ext-app-preview-catcher {
   border-radius: 10px;
 }
 .snapshot-item.is-session {
-  border-color: color-mix(in srgb, var(--c-purple) 30%, transparent);
-  background: color-mix(in srgb, var(--c-purple) 5%, transparent);
+  border-color: color-mix(in srgb, var(--c-agent) 30%, transparent);
+  background: color-mix(in srgb, var(--c-agent) 5%, transparent);
 }
 .snapshot-item-head {
   display: flex;
@@ -6018,7 +6072,7 @@ html.is-node-resizing .ext-app-preview-catcher {
   width: 7px;
   height: 7px;
   border-radius: 50%;
-  background: var(--c-purple);
+  background: var(--c-agent);
   flex-shrink: 0;
 }
 .snapshot-item-glyph {
@@ -6040,7 +6094,7 @@ html.is-node-resizing .ext-app-preview-catcher {
   color: var(--c-text);
 }
 .snapshot-item-time {
-  font: 9px var(--mono);
+  font: 9px var(--font-code);
   color: var(--c-dim);
 }
 .snapshot-item-meta {
@@ -6155,7 +6209,7 @@ html.is-node-resizing .ext-app-preview-catcher {
   outline: none;
   background: none;
   color: var(--c-text);
-  font: 13px var(--font);
+  font: 13px var(--font-ui);
 }
 .command-palette-input::placeholder {
   color: var(--c-dim);
@@ -6165,7 +6219,7 @@ html.is-node-resizing .ext-app-preview-catcher {
   padding: 1px 6px;
   border: 1px solid var(--c-line);
   border-radius: 4px;
-  font: 9.5px var(--mono);
+  font: 9.5px var(--font-code);
   color: var(--c-muted);
 }
 .command-palette-esc {
@@ -6223,7 +6277,7 @@ html.is-node-resizing .ext-app-preview-catcher {
   color: var(--c-accent);
 }
 .command-palette-icon.tone-purple {
-  color: var(--c-purple);
+  color: var(--c-agent);
 }
 .command-palette-icon.tone-muted {
   color: var(--c-muted);
@@ -6251,7 +6305,7 @@ html.is-node-resizing .ext-app-preview-catcher {
   padding: 8px 14px;
   border-top: 1px solid var(--c-line);
   background: color-mix(in srgb, var(--c-bg) 50%, transparent);
-  font: 9.5px var(--mono);
+  font: 9.5px var(--font-code);
   color: var(--c-dim);
 }
 .command-palette-hint-spacer {
@@ -6308,7 +6362,7 @@ html.is-node-resizing .ext-app-preview-catcher {
   border: 1px solid var(--c-line);
   border-radius: 3px;
   padding: 0 4px;
-  font-family: var(--font);
+  font-family: var(--font-ui);
   font-size: 9px;
   line-height: 1.6;
   margin: 0 2px;
@@ -6349,7 +6403,7 @@ html.is-node-resizing .ext-app-preview-catcher {
   border: 1px solid var(--c-line);
   border-radius: 4px;
   padding: 2px 7px;
-  font-family: var(--mono);
+  font-family: var(--font-code);
   font-size: 11px;
   color: var(--c-text);
   white-space: nowrap;
@@ -6431,7 +6485,7 @@ html.is-node-resizing .ext-app-preview-catcher {
   border-color: color-mix(in srgb, var(--c-accent) 40%, transparent);
 }
 .empty-state-action.is-agent:hover {
-  border-color: color-mix(in srgb, var(--c-purple) 45%, transparent);
+  border-color: color-mix(in srgb, var(--c-agent) 45%, transparent);
 }
 .empty-state-action .tone-accent {
   color: var(--c-accent);
@@ -6443,7 +6497,7 @@ html.is-node-resizing .ext-app-preview-catcher {
   color: var(--c-ok);
 }
 .empty-state-action .tone-purple {
-  color: var(--c-purple);
+  color: var(--c-agent);
 }
 .empty-state-action-label {
   flex: 1;
@@ -6454,7 +6508,7 @@ html.is-node-resizing .ext-app-preview-catcher {
   padding: 1px 6px;
   border: 1px solid var(--c-line);
   border-radius: 4px;
-  font: 9.5px var(--mono);
+  font: 9.5px var(--font-code);
   color: var(--c-dim);
 }
 .empty-state-action-hint {
@@ -6465,7 +6519,7 @@ html.is-node-resizing .ext-app-preview-catcher {
   background: none;
   border: none;
   padding: 0;
-  font: 10.5px var(--mono);
+  font: 10.5px var(--font-code);
   color: var(--c-dim);
   cursor: pointer;
 }
@@ -6497,8 +6551,6 @@ html.is-node-resizing .ext-app-preview-catcher {
     animation: none !important;
   }
 
-  .attention-field-region,
-  .attention-field-node,
   .canvas-node {
     transition: none !important;
   }
@@ -6599,7 +6651,7 @@ html.is-node-resizing .ext-app-preview-catcher {
 }
 
 .image-node-error-path {
-  font-family: var(--mono);
+  font-family: var(--font-code);
   font-size: 10px;
   color: var(--c-muted);
   word-break: break-all;
@@ -6708,8 +6760,8 @@ html.is-node-resizing .ext-app-preview-catcher {
 .intent-ghost-box {
   border: 1.5px dashed var(--c-accent);
   border-radius: 10px;
-  background: var(--c-accent-10);
-  box-shadow: 0 0 0 1px var(--c-accent-10), 0 6px 22px var(--c-accent-10);
+  background: color-mix(in srgb, var(--c-accent) 10%, transparent);
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--c-accent) 10%, transparent), 0 6px 22px color-mix(in srgb, var(--c-accent) 10%, transparent);
   animation: intent-breathe 2.1s ease-in-out infinite;
   overflow: visible;
 }
@@ -6738,8 +6790,8 @@ html.is-node-resizing .ext-app-preview-catcher {
 }
 
 @keyframes intent-breathe {
-  0%, 100% { box-shadow: 0 0 0 1px var(--c-accent-10), 0 6px 22px var(--c-accent-10); }
-  50%      { box-shadow: 0 0 0 1px var(--c-accent-25), 0 8px 30px var(--c-accent-25); }
+  0%, 100% { box-shadow: 0 0 0 1px color-mix(in srgb, var(--c-accent) 10%, transparent), 0 6px 22px color-mix(in srgb, var(--c-accent) 10%, transparent); }
+  50%      { box-shadow: 0 0 0 1px color-mix(in srgb, var(--c-accent) 25%, transparent), 0 8px 30px color-mix(in srgb, var(--c-accent) 25%, transparent); }
 }
 
 /* remove — a red crosshatch tombstone over the target */
@@ -6760,7 +6812,7 @@ html.is-node-resizing .ext-app-preview-catcher {
 .intent-ghost-edit {
   border: 1.5px dashed var(--c-accent);
   border-radius: 10px;
-  background: var(--c-accent-10);
+  background: color-mix(in srgb, var(--c-accent) 10%, transparent);
   overflow: visible;
 }
 
@@ -6808,7 +6860,7 @@ html.is-node-resizing .ext-app-preview-catcher {
   border-radius: 999px;
   background: color-mix(in srgb, var(--c-panel-glass) 96%, transparent);
   backdrop-filter: blur(10px);
-  border: 1px solid var(--c-accent-25);
+  border: 1px solid color-mix(in srgb, var(--c-accent) 25%, transparent);
   box-shadow: 0 4px 14px var(--c-shadow);
   color: var(--c-text);
   font-size: 12px;
@@ -6898,7 +6950,7 @@ html.is-node-resizing .ext-app-preview-catcher {
 }
 
 .intent-edge.type-flow { stroke: var(--c-accent); }
-.intent-edge.type-depends-on { stroke: var(--c-warn); }
+.intent-edge.type-depends-on { stroke: var(--c-rel-informs); }
 .intent-edge.type-relation { stroke: var(--c-muted); }
 .intent-edge.type-references { stroke: var(--c-dim); }
 
@@ -7037,8 +7089,8 @@ html.is-node-dragging .intent-line-layer {
 .board-switcher-menu .toolbar-menu-item { padding: 10px; gap: 12px; }
 .board-switcher-menu .toolbar-menu-item:hover,
 .board-switcher-menu .toolbar-menu-item:focus-visible {
-  background: var(--c-accent-8);
-  border-color: var(--c-accent-25);
+  background: color-mix(in srgb, var(--c-accent) 8%, transparent);
+  border-color: color-mix(in srgb, var(--c-accent) 25%, transparent);
   outline: none;
 }
 .board-switcher-icon { display: flex; align-items: center; justify-content: center; width: 20px; flex-shrink: 0; color: var(--c-accent); font-size: 22px; }
@@ -7150,7 +7202,7 @@ html.is-node-dragging .intent-line-layer {
   white-space: nowrap;
 }
 .home-board-meta {
-  font: 11px var(--mono);
+  font: 11px var(--font-code);
   color: var(--c-text-soft);
 }
 .home-board-confirm-text {
@@ -7283,7 +7335,7 @@ html.is-node-dragging .intent-line-layer {
 }
 .home-section-folder { color: var(--c-dim); }
 .home-section-count {
-  font: 11px var(--mono);
+  font: 11px var(--font-code);
   text-transform: none;
   color: var(--c-dim);
   margin-left: auto;
@@ -7348,7 +7400,7 @@ html.is-node-dragging .intent-line-layer {
 .board-copy-card span { display: flex; flex-direction: column; min-width: 0; }
 .board-copy-card strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
 .board-copy-card small,
-.board-link-results small { color: var(--c-text-soft); font: 11px var(--mono); }
+.board-link-results small { color: var(--c-text-soft); font: 11px var(--font-code); }
 .board-copy-options { font-size: 13px; }
 .board-copy-options label { display: flex; gap: 8px; align-items: center; }
 .board-copy-note,
@@ -7432,7 +7484,7 @@ html.is-node-dragging .intent-line-layer {
   background: var(--c-panel);
   z-index: 1;
 }
-.attachment-review pre { white-space: pre-wrap; overflow-wrap: anywhere; font: 12px/1.6 var(--mono); padding: 12px; background: var(--c-bg); border-radius: 8px; }
+.attachment-review pre { white-space: pre-wrap; overflow-wrap: anywhere; font: 12px/1.6 var(--font-code); padding: 12px; background: var(--c-bg); border-radius: 8px; }
 .attachment-review h4 { margin-bottom: 6px; }
 .md-import-source { padding: 6px 12px; font-size: 11px; overflow-wrap: anywhere; color: var(--c-text-soft); border-top: 1px solid var(--c-line); }
 @media (max-width: 640px) {