diff --git a/design-refs/mockup/design-system.html b/design-refs/mockup/design-system.html
index c395e9f..81f8b82 100644
--- a/design-refs/mockup/design-system.html
+++ b/design-refs/mockup/design-system.html
@@ -111,7 +111,7 @@
 
   <div class="canvas" style="top: 138px; left: 40px; width: 880px; height: 594px;">
     <div class="pillar-label">支柱一 · 色彩 <i>鲜艳、碰撞——三组撞色对，黑描边统一收束，大底永远是纸色</i></div>
-    <div style="display:flex; gap:18px; margin-bottom:16px; align-items:flex-start;">
+    <div style="display:flex; gap:18px; margin-bottom:10px; align-items:flex-start;">
       <div>
         <div class="pair"><div style="background:#ff6b6b;"></div><div style="background:#4ecdc4;"></div></div>
         <div style="font-size:9.5px; color:#6b6b6b; margin-top:4px;">撞色对 1 · coral × teal</div>
@@ -130,7 +130,7 @@
     </div>
 
     <div class="pillar-label">支柱二 · 形状即语义 <i>孟菲斯形状对内容下定义，散落于空白——装饰即语义</i></div>
-    <div style="display:grid; grid-template-columns:repeat(7, 1fr); gap:8px; margin-bottom:16px;">
+    <div style="display:grid; grid-template-columns:repeat(7, 1fr); gap:8px; margin-bottom:10px;">
       <div class="shapechip"><div class="box"><svg width="26" height="24"><path d="M13 2 L25 22 L1 22 Z" fill="#ff6b6b" stroke="#111" stroke-width="2"/></svg></div><div class="sn">▲ 靶子</div><div class="sm">目标，卡头打头</div></div>
       <div class="shapechip"><div class="box"><svg width="26" height="24"><circle cx="8" cy="12" r="5" fill="#ffd93d" stroke="#111" stroke-width="2"/><circle cx="19" cy="12" r="5" fill="#fff9f0" stroke="#111" stroke-width="2"/></svg></div><div class="sn">● 积木</div><div class="sm">清单点列，实=已学</div></div>
       <div class="shapechip"><div class="box"><svg width="26" height="24"><circle cx="13" cy="12" r="8" fill="none" stroke="#4ecdc4" stroke-width="4"/><circle cx="13" cy="12" r="8" fill="none" stroke="#111" stroke-width="1.5"/></svg></div><div class="sn">○ 预期</div><div class="sm">可核对的结果</div></div>
@@ -141,7 +141,7 @@
     </div>
 
     <div class="pillar-label">支柱三 · 卡片 <i>核心：教程的入口载体——孟菲斯骨架 + 拟物纸感，卡头三件套即靶子</i></div>
-    <div style="display:flex; gap:26px; margin-bottom:14px; align-items:flex-start;">
+    <div style="display:flex; gap:26px; margin-bottom:8px; align-items:flex-start;">
       <div class="mscard" style="position:static; width:300px;">
         <div class="mszone" style="background:#ff6b6b;">
           <span>🌐</span>
@@ -161,15 +161,43 @@
       </div>
     </div>
 
-    <div class="pillar-label">支柱四 · 线条 <i>关系，不可缺——横平竖直 + R8 小圆角 + 站点半嵌卡边 + 并行不合并</i></div>
-    <svg width="700" height="52" viewBox="0 0 700 52">
-      <path class="msline" d="M 10 38 H 120 A 8 8 0 0 0 128 30 V 22 A 8 8 0 0 1 136 14 H 500"/>
-      <path class="msline" d="M 10 38 H 424 A 8 8 0 0 1 432 30 V 26 A 8 8 0 0 0 440 18 H 497"/>
-      <circle class="msstation" cx="10" cy="38" r="6" fill="#ffd93d"/>
-      <circle class="msstation" cx="260" cy="38" r="6" fill="#4ecdc4"/>
-      <rect class="msstation" x="494" y="8" width="7" height="22" rx="3.5" fill="#ff6b6b"/>
-    </svg>
-    <div style="font-size:11px; color:#6b6b6b; margin-top:4px;">黑 2.5px 实线；站点＝描边圆点四色轮换、半嵌卡边；多线入同一卡口 → 胶囊（端头半圆、线止于胶囊边）。</div>
+    <div class="pillar-label">支柱四 · 线条 <i>关系，不可缺——形式即含义：四种形式各答一个问题；拓扑规则全形式通用</i></div>
+    <div style="display:grid; grid-template-columns:repeat(4, 1fr); gap:12px; margin-bottom:8px;">
+      <div>
+        <svg width="196" height="44" viewBox="0 0 196 44">
+          <rect x="6" y="8" width="2" height="30" fill="#c9c9c7"/><rect x="188" y="2" width="2" height="18" fill="#c9c9c7"/>
+          <path d="M 7 34 H 46 A 8 8 0 0 0 54 26 V 18 A 8 8 0 0 1 62 10 H 188" fill="none" stroke="#111" stroke-width="2.5"/>
+          <circle cx="7" cy="34" r="5.5" fill="#ffd93d" stroke="#111" stroke-width="2"/>
+          <circle cx="189" cy="10" r="5.5" fill="#4ecdc4" stroke="#111" stroke-width="2"/>
+        </svg>
+        <div style="font-size:11.5px; font-weight:700; margin-top:2px;">实线 ＝ 先后</div>
+        <div style="font-size:9.5px; color:#6b6b6b;">推荐顺序 · 主线，唯一带站点</div>
+      </div>
+      <div>
+        <svg width="196" height="44" viewBox="0 0 196 44">
+          <rect x="6" y="14" width="2" height="18" fill="#c9c9c7"/><rect x="188" y="14" width="2" height="18" fill="#c9c9c7"/>
+          <path d="M 7 23 H 189" fill="none" stroke="#111" stroke-width="2" stroke-dasharray="4 2"/>
+        </svg>
+        <div style="font-size:11.5px; font-weight:700; margin-top:2px;">虚线 ＝ 相关</div>
+        <div style="font-size:9.5px; color:#6b6b6b;">内容互参 · 无顺序，无站点</div>
+      </div>
+      <div>
+        <svg width="196" height="44" viewBox="0 0 196 44">
+          <rect x="6" y="14" width="2" height="18" fill="#c9c9c7"/><rect x="188" y="14" width="2" height="18" fill="#c9c9c7"/>
+          <path d="M 7 23 H 189" fill="none" stroke="#111" stroke-width="2.4" stroke-dasharray="0.1 6" stroke-linecap="round"/>
+        </svg>
+        <div style="font-size:11.5px; font-weight:700; margin-top:2px;">点线 ＝ 同族</div>
+        <div style="font-size:9.5px; color:#6b6b6b;">同一积木家族（教一块带一族）</div>
+      </div>
+      <div>
+        <svg width="196" height="44" viewBox="0 0 196 44">
+          <path d="M 12 22 q 8 -18 16 0 t16 0 t16 0 t16 0 t16 0 t16 0 t16 0 t16 0 t16 0 t16 0" fill="none" stroke="#5b8def" stroke-width="3" stroke-linecap="round"/>
+        </svg>
+        <div style="font-size:11.5px; font-weight:700; margin-top:2px;">波浪带 ＝ 代理交接</div>
+        <div style="font-size:9.5px; color:#6b6b6b;">agent 边界 · 区域标记，不连线</div>
+      </div>
+    </div>
+    <div style="font-size:11px; color:#6b6b6b;">拓扑全形式通用：横平竖直＋R8；站点只上先后线、半嵌卡边；并行不合并（4px）；多线卡口→胶囊（端头半圆、距外侧线 ≥ 2 线宽、线止于胶囊边）。</div>
   </div>
 
   <div style="position:absolute; top: 138px; left: 948px; width: 292px;" class="panel">
@@ -207,17 +235,16 @@
       <path d="M 30 300 q 8 -22 16 0 t16 0 t16 0 t16 0" fill="none" stroke="#5b8def" stroke-width="3" stroke-linecap="round"/>
       <path d="M 762 270 l 10 20 22 3 -16 15 4 22 -20 -11 -20 11 4 -22 -16 -15 22 -3 z" fill="#a78bfa" stroke="#111" stroke-width="2"/>
       <path d="M 60 540 L 68 522 L 76 540 L 84 522 L 92 540" fill="none" stroke="#ff6b6b" stroke-width="3" stroke-linejoin="round"/>
-      <circle cx="480" cy="52" r="10" fill="none" stroke="#4ecdc4" stroke-width="4"/><circle cx="480" cy="52" r="10" fill="none" stroke="#111" stroke-width="1.5"/>
+      <circle cx="852" cy="192" r="10" fill="none" stroke="#4ecdc4" stroke-width="4"/><circle cx="852" cy="192" r="10" fill="none" stroke="#111" stroke-width="1.5"/>
       <path d="M 624 470 v22 M613 481 h22" stroke="#a78bfa" stroke-width="4" stroke-linecap="round"/><path d="M 624 470 v22 M613 481 h22" stroke="#111" stroke-width="1.2"/>
       <path d="M 810 250 v20 M800 260 h20" stroke="#5b8def" stroke-width="4" stroke-linecap="round"/><path d="M 810 250 v20 M800 260 h20" stroke="#111" stroke-width="1.2"/>
 
-      <path class="msline" d="M 290 180 H 320 A 8 8 0 0 0 328 172 V 116 A 8 8 0 0 1 336 108 H 380"/>
-      <path class="msline" d="M 290 180 H 380"/>
-      <path class="msline" d="M 630 108 H 648 A 8 8 0 0 1 656 116 V 236 A 8 8 0 0 0 664 244 H 700"/>
-      <circle class="msstation" cx="293" cy="180" r="6" fill="#ffd93d"/>
+      <path class="msline" d="M 299 180 H 302 A 8 8 0 0 0 310 172 V 116 A 8 8 0 0 1 318 108 H 378"/>
+      <path class="msline" d="M 639 108 H 699"/>
+      <circle class="msstation" cx="299" cy="180" r="6" fill="#ffd93d"/>
       <circle class="msstation" cx="378" cy="108" r="6" fill="#4ecdc4"/>
-      <circle class="msstation" cx="378" cy="180" r="6" fill="#ff8fab"/>
-      <rect class="msstation" x="697" y="233" width="7" height="22" rx="3.5" fill="#ff6b6b"/>
+      <circle class="msstation" cx="639" cy="108" r="6" fill="#ffd93d"/>
+      <circle class="msstation" cx="699" cy="108" r="6" fill="#ff8fab"/>
     </svg>
 
     <div class="mscard" style="left:40px; top:110px; width:250px;">
@@ -263,7 +290,7 @@
       <span style="font-size:11px; color:#3d3d3d;"><b>价值区</b>：过程就地写清</span>
     </div>
 
-    <div style="position:absolute; left:40px; top:562px; font-size:10.5px; color:#8a7a5c;">形状散落于空白，每个都有含义：▲ 靶子 · ● 积木 · ○ 预期 · ～ 代理区 · ▬ 价值区 · ⌇ 脱靶 · ＋ 指派</div>
+    <div style="position:absolute; left:40px; top:562px; font-size:10.5px; color:#8a7a5c;">形状散落于空白，每个都有含义：▲ 靶子 · ● 积木 · ○ 预期 · ～ 代理区 · ▬ 价值区 · ⌇ 脱靶 · ＋ 指派；线：实＝先后 · 虚＝相关 · 点＝同族</div>
   </div>
 
   <div style="position:absolute; top: 138px; left: 948px; width: 292px;" class="panel">
diff --git a/design-refs/mockup/design-system.pdf b/design-refs/mockup/design-system.pdf
index 3ae9a0b..5010b51 100644
Binary files a/design-refs/mockup/design-system.pdf and b/design-refs/mockup/design-system.pdf differ