diff --git a/design-refs/mockup/components.html b/design-refs/mockup/components.html
index 3b26c85..28f102f 100644
--- a/design-refs/mockup/components.html
+++ b/design-refs/mockup/components.html
@@ -217,16 +217,16 @@
 
   /* P7 路线图（线条构件版 · 大卡 CourseCard 实例） */
   .rcard {
-    position: absolute; width: 232px;
+    position: absolute; width: 190px;
     background: #ffffff; border-radius: 14px; padding: 10px;
     box-shadow: 0 1px 3px rgba(26,26,26,0.08);
   }
   .rcard .rzone {
-    height: 118px; border-radius: 8px;
+    height: 95px; border-radius: 8px;
     display: flex; align-items: center; justify-content: center;
     position: relative;
   }
-  .rcard .rzone span { font-size: 34px; }
+  .rcard .rzone span { font-size: 30px; }
   .rcard .rzone i {
     position: absolute; right: 7px; bottom: 7px; font-style: normal;
     font-size: 9px; color: #6b6b6b; background: rgba(255,255,255,0.9);
@@ -664,49 +664,8 @@
     <div class="desc">路线的最小构件是线条：直段 / 圆角转角 / 直角步进 / 分流岔口 / 汇合 / 站点，横平竖直。CourseCard 由路线串联：岔口分流、并线前进——网状关系在路线内可读。</div>
   </div>
 
-  <!-- 组合：CourseCard 之间的路线（双圆弧步进，无斜线） -->
-  <div class="canvas" style="top: 138px; left: 40px; width: 880px; height: 330px; padding: 0;">
-    <svg class="gedges" width="880" height="330" viewBox="0 0 880 330">
-      <path class="edge" d="M 4 165 H 16"/>
-      <path class="edge" d="M 248 165 H 266"/>
-      <path class="edge" d="M 266 165 A 8 8 0 0 0 274 157 V 103 A 8 8 0 0 1 282 95  H 324"/>
-      <path class="edge" d="M 266 165 A 8 8 0 0 1 274 173 V 227 A 8 8 0 0 0 282 235 H 324"/>
-      <path class="edge" d="M 556 95  H 588 A 8 8 0 0 1 596 103 V 157 A 8 8 0 0 0 604 165 H 632"/>
-      <path class="edge" d="M 556 235 H 588 A 8 8 0 0 0 596 227 V 173 A 8 8 0 0 1 604 165 H 632"/>
-      <path class="edge" d="M 864 165 H 876"/>
-      <circle class="station" cx="4"   cy="165" r="2.8"/>
-      <circle class="station" cx="266" cy="165" r="2.8"/>
-      <circle class="station" cx="276" cy="130" r="2.8"/>
-      <circle class="station" cx="276" cy="200" r="2.8"/>
-      <circle class="station" cx="596" cy="130" r="2.8"/>
-      <circle class="station" cx="596" cy="200" r="2.8"/>
-      <circle class="station" cx="604" cy="165" r="2.8"/>
-      <circle class="station" cx="871" cy="165" r="2.8"/>
-    </svg>
-    <div class="rcard" style="left:16px; top:81px;">
-      <span class="entry-badge" style="width:20px;height:20px;font-size:11px;">①</span>
-      <div class="rzone" style="background:#e0e7ff;"><span>🌐</span><i>16:9 · GIF</i></div>
-      <div class="rt"><span class="icotile" style="background:#e0e7ff;">🌐</span><b>快速开始</b><span class="st done">✓</span></div>
-    </div>
-    <div class="rcard" style="left:324px; top:11px;">
-      <span class="entry-badge" style="width:20px;height:20px;font-size:11px;">②</span>
-      <div class="rzone" style="background:#fce7f3;"><span>⚛️</span><i>16:9 · GIF</i></div>
-      <div class="rt"><span class="icotile" style="background:#fce7f3;">⚛️</span><b>React</b><span class="st done">✓</span></div>
-    </div>
-    <div class="rcard" style="left:324px; top:151px;">
-      <div class="rzone" style="background:#fef3c7;"><span>🧱</span><i>16:9 · GIF</i></div>
-      <div class="rt"><span class="icotile" style="background:#fef3c7;">🧱</span><b>更多示例</b><span class="st done">✓</span></div>
-    </div>
-    <div class="rcard" style="left:632px; top:81px;">
-      <div class="rzone" style="background:#d1fae5;"><span>📦</span><i>16:9 · GIF</i></div>
-      <div class="rt"><span class="icotile" style="background:#d1fae5;">📦</span><b>更多</b><span class="st done">✓</span></div>
-    </div>
-    <div style="position:absolute; right:14px; top:262px; font-size:11px; color:#6b6b6b;">→ 下一程：全栈基础 🔒 · ③ 高级教程</div>
-    <div style="position:absolute; right:12px; top:10px; font-size:11px; color:#6b6b6b;">分流 ×1 · 并线 ×2 · 站点 ×8</div>
-  </div>
-
-  <!-- 构件：线条组件六原语（弯道皆圆弧） -->
-  <div class="canvas" style="top: 478px; left: 40px; width: 880px; height: 258px; padding: 16px 22px;">
+  <!-- 构件：RouteLine 六原语（横平竖直 · 小圆角） -->
+  <div class="canvas" style="top: 138px; left: 40px; width: 880px; height: 258px; padding: 16px 22px;">
     <div style="font-size:14px; font-weight:700; color:#1a1a1a; margin-bottom:10px;">&lt;RouteLine /&gt; 线条组件 · 六原语</div>
     <div style="display:grid; grid-template-columns:repeat(3, 1fr); gap:12px;">
       <div class="linecard">
@@ -718,24 +677,65 @@
         <div class="vlabel"><b>elbow</b> · 圆角转角</div>
       </div>
       <div class="linecard">
-        <svg width="240" height="52" viewBox="0 0 240 52"><path class="edge" d="M 30 42 H 60 A 8 8 0 0 0 68 34 V 18 A 8 8 0 0 1 76 10 H 220"/><circle class="station" cx="30" cy="42" r="2.8"/><circle class="station" cx="68" cy="26" r="2.8"/><circle class="station" cx="220" cy="10" r="2.8"/></svg>
+        <svg width="240" height="52" viewBox="0 0 240 52"><path class="edge" d="M 30 42 H 60 A 8 8 0 0 0 68 34 V 18 A 8 8 0 0 1 76 10 H 220"/><circle class="station" cx="30" cy="42" r="2.8"/><circle class="station" cx="220" cy="10" r="2.8"/></svg>
         <div class="vlabel"><b>step</b> · 直角步进</div>
       </div>
       <div class="linecard">
-        <svg width="240" height="52" viewBox="0 0 240 52"><path class="edge" d="M 20 26 H 54"/><path class="edge" d="M 54 26 A 6 6 0 0 0 60 20 V 14 A 6 6 0 0 1 66 8 H 220"/><path class="edge" d="M 54 26 A 6 6 0 0 1 60 32 V 38 A 6 6 0 0 0 66 44 H 220"/><circle class="station" cx="54" cy="26" r="2.8"/></svg>
+        <svg width="240" height="52" viewBox="0 0 240 52"><path class="edge" d="M 20 26 H 54"/><path class="edge" d="M 54 26 A 6 6 0 0 0 60 20 V 14 A 6 6 0 0 1 66 8 H 220"/><path class="edge" d="M 54 26 A 6 6 0 0 1 60 32 V 38 A 6 6 0 0 0 66 44 H 220"/><circle class="station" cx="28" cy="26" r="2.8"/><circle class="station" cx="212" cy="8" r="2.8"/><circle class="station" cx="212" cy="44" r="2.8"/></svg>
         <div class="vlabel"><b>fork</b> · 分流岔口</div>
       </div>
       <div class="linecard">
-        <svg width="240" height="52" viewBox="0 0 240 52"><path class="edge" d="M 20 8 H 144 A 6 6 0 0 1 150 14 V 20 A 6 6 0 0 0 156 26 H 220"/><path class="edge" d="M 20 44 H 144 A 6 6 0 0 0 150 38 V 32 A 6 6 0 0 1 156 26 H 220"/><circle class="station" cx="156" cy="26" r="2.8"/></svg>
+        <svg width="240" height="52" viewBox="0 0 240 52"><path class="edge" d="M 20 8 H 144 A 6 6 0 0 1 150 14 V 20 A 6 6 0 0 0 156 26 H 220"/><path class="edge" d="M 20 44 H 144 A 6 6 0 0 0 150 38 V 32 A 6 6 0 0 1 156 26 H 220"/><circle class="station" cx="28" cy="8" r="2.8"/><circle class="station" cx="28" cy="44" r="2.8"/><circle class="station" cx="212" cy="26" r="2.8"/></svg>
         <div class="vlabel"><b>merge</b> · 汇合并线</div>
       </div>
       <div class="linecard">
-        <svg width="240" height="52" viewBox="0 0 240 52"><path class="edge" d="M 20 26 H 220"/><circle class="station" cx="90" cy="26" r="3"/><circle class="station" cx="170" cy="26" r="3"/></svg>
-        <div class="vlabel"><b>station</b> · 站点（悬浮于卡间槽内）</div>
+        <svg width="240" height="52" viewBox="0 0 240 52"><path class="edge" d="M 20 26 H 220"/><circle class="station" cx="34" cy="26" r="3"/><circle class="station" cx="206" cy="26" r="3"/></svg>
+        <div class="vlabel"><b>station</b> · 站点（贴近卡边锚定）</div>
       </div>
     </div>
   </div>
 
+  <!-- 实例：CourseCard 之间的路线（正交走线 + R8 小圆角，站点贴卡边） -->
+  <div class="canvas" style="top: 406px; left: 40px; width: 880px; height: 330px; padding: 0;">
+    <svg class="gedges" width="880" height="330" viewBox="0 0 880 330">
+      <path class="edge" d="M 6 165 H 20"/>
+      <path class="edge" d="M 210 165 H 232"/>
+      <path class="edge" d="M 232 165 A 8 8 0 0 0 240 157 V 92 A 8 8 0 0 1 248 84 H 345"/>
+      <path class="edge" d="M 232 165 A 8 8 0 0 1 240 173 V 238 A 8 8 0 0 0 248 246 H 345"/>
+      <path class="edge" d="M 535 84 H 557 A 8 8 0 0 1 565 92 V 157 A 8 8 0 0 0 573 165 H 670"/>
+      <path class="edge" d="M 535 246 H 557 A 8 8 0 0 0 565 238 V 173 A 8 8 0 0 1 573 165 H 670"/>
+      <path class="edge" d="M 860 165 H 872"/>
+      <circle class="station" cx="11"  cy="165" r="2.8"/>
+      <circle class="station" cx="218" cy="165" r="2.8"/>
+      <circle class="station" cx="337" cy="84"  r="2.8"/>
+      <circle class="station" cx="337" cy="246" r="2.8"/>
+      <circle class="station" cx="543" cy="84"  r="2.8"/>
+      <circle class="station" cx="543" cy="246" r="2.8"/>
+      <circle class="station" cx="662" cy="165" r="2.8"/>
+      <circle class="station" cx="866" cy="165" r="2.8"/>
+    </svg>
+    <div class="rcard" style="left:20px; top:92px;">
+      <span class="entry-badge" style="width:20px;height:20px;font-size:11px;">①</span>
+      <div class="rzone" style="background:#e0e7ff;"><span>🌐</span><i>16:9 · GIF</i></div>
+      <div class="rt"><span class="icotile" style="background:#e0e7ff;">🌐</span><b>快速开始</b><span class="st done">✓</span></div>
+    </div>
+    <div class="rcard" style="left:345px; top:11px;">
+      <span class="entry-badge" style="width:20px;height:20px;font-size:11px;">②</span>
+      <div class="rzone" style="background:#fce7f3;"><span>⚛️</span><i>16:9 · GIF</i></div>
+      <div class="rt"><span class="icotile" style="background:#fce7f3;">⚛️</span><b>React</b><span class="st done">✓</span></div>
+    </div>
+    <div class="rcard" style="left:345px; top:173px;">
+      <div class="rzone" style="background:#fef3c7;"><span>🧱</span><i>16:9 · GIF</i></div>
+      <div class="rt"><span class="icotile" style="background:#fef3c7;">🧱</span><b>更多示例</b><span class="st done">✓</span></div>
+    </div>
+    <div class="rcard" style="left:670px; top:92px;">
+      <div class="rzone" style="background:#d1fae5;"><span>📦</span><i>16:9 · GIF</i></div>
+      <div class="rt"><span class="icotile" style="background:#d1fae5;">📦</span><b>更多</b><span class="st done">✓</span></div>
+    </div>
+    <div style="position:absolute; right:14px; top:250px; font-size:11px; color:#6b6b6b;">→ 下一程：全栈基础 🔒 · ③ 高级教程</div>
+    <div style="position:absolute; right:12px; top:10px; font-size:11px; color:#6b6b6b;">分流 ×1 · 并线 ×2 · 站点 ×8</div>
+  </div>
+
   <div style="position:absolute; top: 138px; left: 948px; width: 292px;" class="panel">
     <h3 style="margin-bottom:8px;">Args</h3>
     <table class="spec tight">
@@ -743,14 +743,14 @@
       <tr><td class="k"><code>path</code></td><td>Segment[]</td><td>直段/转角/步进序列</td></tr>
       <tr><td class="k"><code>forks</code></td><td>Fork[]</td><td>分流岔口（分出车道）</td></tr>
       <tr><td class="k"><code>merges</code></td><td>Merge[]</td><td>直角并线点</td></tr>
-      <tr><td class="k"><code>stations</code></td><td>Node[]</td><td>站点圆点，锚定卡间槽</td></tr>
+      <tr><td class="k"><code>stations</code></td><td>Node[]</td><td>站点圆点，贴近卡边锚定</td></tr>
       <tr><td class="k"><code>status</code></td><td>无 prop</td><td>不在图上编码</td></tr>
     </table>
   </div>
   <div style="position:absolute; top: 420px; left: 948px; width: 292px;" class="panel">
     <h3 style="margin-bottom:6px;">设计原则</h3>
     <div class="note" style="margin-bottom:4px;"><span class="idx">1</span><span class="txt"><b>线只管顺序</b>：状态交给卡片 ✓ / 🔒。</span></div>
-    <div class="note" style="margin-bottom:4px;"><span class="idx">2</span><span class="txt"><b>背景级线条</b>：鼠尾草绿 <code>#A2B49B</code> · 1.4px · 划隙 4:2；站点 <code>#758C72</code> 深一档，直径 ≈ 4× 线宽。</span></div>
+    <div class="note" style="margin-bottom:4px;"><span class="idx">2</span><span class="txt"><b>背景级线条</b>：鼠尾草绿 <code>#A2B49B</code> · 1.4px · 划隙 4:2；站点 <code>#758C72</code> 贴近卡边锚定，直径 ≈ 4× 线宽。</span></div>
     <div class="note" style="margin-bottom:4px;"><span class="idx">3</span><span class="txt"><b>横平竖直</b>：走向只有水平与垂直，转折用小圆角 R8，全图无斜线。</span></div>
     <div class="note" style="margin-bottom:4px;"><span class="idx">4</span><span class="txt"><b>岔口即分支</b>：快速开始分流出 React 线与示例线，在「更多」并线。</span></div>
     <div class="note" style="margin-bottom:0;"><span class="idx">5</span><span class="txt">顺序为<b>示例占位</b>，填 courses.ts 自动更新。</span></div>
diff --git a/design-refs/mockup/components.pdf b/design-refs/mockup/components.pdf
index b61cf97..5d0b1fe 100644
Binary files a/design-refs/mockup/components.pdf and b/design-refs/mockup/components.pdf differ