design: 课程白卡加 16:9 预期区，desc 定时自动翻转播放 GIF

- 白卡结构：图标+标题行 → 16:9 预期区（desc 常驻）→ 关系 chips → 状态行
- 翻转规则：定时 8s（flipInterval 可配）desc ⇄ GIF；hover/Tab 即时翻转并锁定；触屏/减动效不翻转
- 组件稿 P4 六变体重排（3×2，比例实测 1.78）、P5 播放态 512×288、目录口径更新
- 整页稿 P3 解剖同步（编号 1-4/5-7 与 pin 对齐）、P4 时序/触发矩阵改翻转口径

design-refs/mockup/components.html

@@ -139,7 +139,13 @@
     display: flex; flex-direction: column; gap: 5px;
     width: 262px;
   }
-  .ccard .icorow { display: flex; justify-content: space-between; align-items: flex-start; }
+  .ccard .icorow { display: flex; align-items: center; gap: 8px; }
+  .ccard .zone {
+    width: 100%; aspect-ratio: 16 / 9; border-radius: 10px;
+    background: #f7f7f5; border: 1px solid #ececea;
+    display: flex; align-items: center; padding: 10px 12px;
+    font-size: 11px; color: #8a8a8a; line-height: 1.5;
+  }
   .ccard .ttl { font-size: 13.5px; font-weight: 700; color: #1a1a1a; margin: 0; }
   .ccard .dsc { font-size: 11px; line-height: 1.4; color: #8a8a8a; margin: 0; flex: 1; }
   .ccard .btm { display: flex; align-items: center; justify-content: space-between; }
@@ -227,8 +233,8 @@
     <div class="toc-card"><div class="t">&lt;IconRail /&gt;</div><div class="c">左窄图标栏</div><div class="d">40px 宽，图标导航</div></div>
     <div class="toc-card"><div class="t">&lt;SearchPill /&gt;</div><div class="c">搜索胶囊</div><div class="d">页面标题行右侧搜索</div></div>
     <div class="toc-card"><div class="t">&lt;StatsRow /&gt;</div><div class="c">统计卡行</div><div class="d">大数字 + 灰标签，淡彩底</div></div>
-    <div class="toc-card"><div class="t">&lt;CourseCard /&gt;</div><div class="c">课程白卡</div><div class="d">图标 · 标题 · 预期一句话 · 状态 · 按钮</div></div>
+    <div class="toc-card"><div class="t">&lt;CourseCard /&gt;</div><div class="c">课程白卡</div><div class="d">16:9 预期区（desc ⇄ GIF）· 状态 · 按钮</div></div>
-    <div class="toc-card"><div class="t">&lt;CourseCardMedia /&gt;</div><div class="c">悬停媒体卡</div><div class="d">淡彩底 + 播放钮 + ⏱ GIF 循环</div></div>
+    <div class="toc-card"><div class="t">&lt;CourseCardMedia /&gt;</div><div class="c">播放态</div><div class="d">定时翻转/悬停锁定 + ⏱ GIF 循环</div></div>
     <div class="toc-card"><div class="t">&lt;EventsPanel /&gt;</div><div class="c">事件栏</div><div class="d">彩色条目：类型 · 日期 · 描述 · 时间</div></div>
     <div class="toc-card"><div class="t">&lt;CourseGraph /&gt;</div><div class="c">课程关系图</div><div class="d">前置实线 · 关联虚线 · 入口 ①②③</div></div>
     <div class="toc-card"><div class="t">&lt;EntryGuide /&gt;</div><div class="c">入口梳理</div><div class="d">读者画像 → 起点与路径</div></div>
@@ -391,68 +397,58 @@
   <div class="story-head">
     <span class="tag">&lt;CourseCard /&gt;</span>
     <h2>课程白卡 · default 态</h2>
-    <div class="desc">书架的核心单元：六个章节变体共用一个组件，数据全部来自 courses.ts。</div>
+    <div class="desc">书架核心单元：16:9 预期区常驻 desc，定时自动翻转为播放对应 GIF；数据全部来自 courses.ts。</div>
   </div>
 
-  <div class="canvas" style="top: 148px; left: 40px; width: 880px; height: 424px;">
+  <div class="canvas" style="top: 138px; left: 40px; width: 880px; padding: 16px;">
-    <div class="vrow" style="gap: 16px;">
+    <div class="vrow" style="gap: 14px;">
       <div class="variant">
         <div class="ccard">
-          <div class="icorow"><span class="icotile" style="background:#e0e7ff;">🌐</span></div>
+          <div class="icorow"><span class="icotile" style="background:#e0e7ff;">🌐</span><span class="ttl">快速开始</span></div>
-          <div class="ttl">快速开始</div>
+          <div class="zone">写出第一个网页并在浏览器打开，跑起你的第一个 HTTP 服务器。</div>
-          <div class="dsc">写出第一个网页并在浏览器打开，跑起你的第一个 HTTP 服务器。</div>
           <div class="chips"><span class="chip">前置：无</span></div>
           <div class="btm"><span class="pill done">✓ Completed 🎉</span><span class="cbtn">✓</span></div>
         </div>
         <div class="vlabel"><b>hello-world</b></div>
-      </div>
+      </div><div class="variant">
-      <div class="variant">
         <div class="ccard">
-          <div class="icorow"><span class="icotile" style="background:#fce7f3;">⚛️</span></div>
+          <div class="icorow"><span class="icotile" style="background:#fce7f3;">⚛️</span><span class="ttl">快速开始 React</span></div>
-          <div class="ttl">快速开始 React</div>
+          <div class="zone">用脚手架创建 React 应用，亲手拼出第一个 Todo List。</div>
-          <div class="dsc">用脚手架创建 React 应用，亲手拼出第一个 Todo List。</div>
           <div class="chips"><span class="chip">前置：快速开始</span><span class="chip" style="border-style:dashed;">关联：更多示例</span></div>
           <div class="btm"><span class="pill done">✓ Completed 🎉</span><span class="cbtn">✓</span></div>
         </div>
         <div class="vlabel"><b>hello-react</b></div>
-      </div>
+      </div><div class="variant">
-      <div class="variant">
         <div class="ccard">
-          <div class="icorow"><span class="icotile" style="background:#fef3c7;">🧱</span></div>
+          <div class="icorow"><span class="icotile" style="background:#fef3c7;">🧱</span><span class="ttl">更多示例</span></div>
-          <div class="ttl">更多示例</div>
+          <div class="zone">浮动布局等补充示例，巩固前面攒下的积木。</div>
-          <div class="dsc">浮动布局等补充示例，巩固前面攒下的积木。</div>
           <div class="chips"><span class="chip">前置：快速开始</span></div>
           <div class="btm"><span class="pill done">✓ Completed 🎉</span><span class="cbtn">✓</span></div>
         </div>
         <div class="vlabel"><b>more-example</b></div>
       </div>
     </div>
-    <div class="vrow" style="gap: 16px; margin-top: 16px;">
+    <div class="vrow" style="gap: 14px; margin-top: 14px;">
       <div class="variant">
         <div class="ccard">
-          <div class="icorow"><span class="icotile" style="background:#d1fae5;">📦</span></div>
+          <div class="icorow"><span class="icotile" style="background:#d1fae5;">📦</span><span class="ttl">更多</span></div>
-          <div class="ttl">更多</div>
+          <div class="zone">把示例工程构建为可发布产物，看清 build 做了什么。</div>
-          <div class="dsc">把示例工程构建为可发布产物，看清 build 做了什么。</div>
           <div class="chips"><span class="chip">前置：快速开始 React</span></div>
           <div class="btm"><span class="pill done">✓ Completed 🎉</span><span class="cbtn">✓</span></div>
         </div>
         <div class="vlabel"><b>more</b></div>
-      </div>
+      </div><div class="variant">
-      <div class="variant">
         <div class="ccard">
-          <div class="icorow"><span class="icotile" style="background:#e0f2fe;">🔗</span></div>
+          <div class="icorow"><span class="icotile" style="background:#e0f2fe;">🔗</span><span class="ttl">全栈基础</span></div>
-          <div class="ttl">全栈基础</div>
+          <div class="zone">从网页到服务与数据库，串起最小全栈闭环。</div>
-          <div class="dsc">从网页到服务与数据库，串起最小全栈闭环。</div>
           <div class="chips"><span class="chip" style="color:#8a8a8a; border-style:dashed;">关联章节整理中</span></div>
           <div class="btm"><span class="pill wip">Upcoming</span><span class="cbtn">→</span></div>
         </div>
         <div class="vlabel"><b>full-stack</b> · wip 变体</div>
-      </div>
+      </div><div class="variant">
-      <div class="variant">
         <div class="ccard">
-          <div class="icorow"><span class="icotile" style="background:#ede9fe;">🧠</span></div>
+          <div class="icorow"><span class="icotile" style="background:#ede9fe;">🧠</span><span class="ttl">高级教程</span></div>
-          <div class="ttl">高级教程</div>
+          <div class="zone">数据流、纯函数、CAP——工程上的心智模型。</div>
-          <div class="dsc">数据流、纯函数、CAP——工程上的心智模型。</div>
           <div class="chips"><span class="chip">前置：全栈基础</span></div>
           <div class="btm"><span class="pill done">✓ Completed 🎉</span><span class="cbtn">✓</span></div>
         </div>
@@ -466,19 +462,21 @@
       <h3>Args</h3>
       <table class="spec tight">
         <tr><th>Prop</th><th>类型</th><th>说明</th></tr>
-        <tr><td class="k"><code>title</code></td><td>string</td><td>章节名（分类 label）</td></tr>
+        <tr><td class="k"><code>title</code></td><td>string</td><td>章节名</td></tr>
-        <tr><td class="k"><code>desc</code></td><td>string</td><td>预期结果一句话</td></tr>
+        <tr><td class="k"><code>desc</code></td><td>string</td><td>预期一句话（16:9 区）</td></tr>
-        <tr><td class="k"><code>done</code></td><td>boolean</td><td>true → ✓ 胶囊 + ✓ 钮</td></tr>
+        <tr><td class="k"><code>done</code></td><td>boolean</td><td>✓ 胶囊 / Upcoming</td></tr>
-        <tr><td class="k"><code>prerequisites</code></td><td>string[]</td><td>前置章节 → 实线 chip + 图中实线边</td></tr>
+        <tr><td class="k"><code>prerequisites</code></td><td>string[]</td><td>前置 → 实线 chip + 图边</td></tr>
-        <tr><td class="k"><code>related</code></td><td>string[]</td><td>关联章节 → 虚线 chip + 图中虚线边</td></tr>
+        <tr><td class="k"><code>related</code></td><td>string[]</td><td>关联 → 虚线 chip + 图边</td></tr>
-        <tr><td class="k"><code>icon / tint</code></td><td>emoji / hex</td><td>IconTile 底色与图标</td></tr>
+        <tr><td class="k"><code>icon / tint</code></td><td>emoji / hex</td><td>图标与淡彩底</td></tr>
-        <tr><td class="k"><code>href</code></td><td>string</td><td>章节分类索引路由</td></tr>
+        <tr><td class="k"><code>href</code></td><td>string</td><td>章节路由</td></tr>
+        <tr><td class="k"><code>flipInterval</code></td><td>ms</td><td>翻转周期，默认 8000</td></tr>
       </table>
     </div>
     <div class="panel" style="margin-top: 12px; padding:14px 18px;">
       <h3>交互</h3>
-      <div class="note" style="margin-bottom:4px;"><span class="idx">1</span><span class="txt">整卡可点 → 进入章节；hover 切换为 <b>&lt;CourseCardMedia /&gt;</b>（见下页）。</span></div>
+      <div class="note" style="margin-bottom:4px;"><span class="idx">1</span><span class="txt">整卡可点进入章节；预期区定时翻转（见下页）。</span></div>
-      <div class="note" style="margin-bottom:0;"><span class="idx">2</span><span class="txt">Tab focus 与 hover 同态；触屏无预览态。</span></div>
+      <div class="note" style="margin-bottom:4px;"><span class="idx">2</span><span class="txt">hover / Tab：即时翻到 GIF 并锁定，移出恢复定时。</span></div>
+      <div class="note" style="margin-bottom:0;"><span class="idx">3</span><span class="txt">触屏 / 减动效：不自动翻转；首页可用紧凑变体。</span></div>
     </div>
   </div>
 
@@ -490,14 +488,14 @@
 <div class="page">
   <div class="story-head">
     <span class="tag">&lt;CourseCardMedia /&gt;</span>
-    <h2>悬停媒体卡 · hover 态</h2>
+    <h2>播放态 · 定时翻转 / 悬停锁定</h2>
-    <div class="desc">CourseCard 的 hover/focus 形态：淡彩整卡 + 黑色圆形播放钮 + ⏱ 胶囊，GIF 此刻才挂载并循环。</div>
+    <div class="desc">预期区（16:9）翻转化淡彩播放态：黑色圆形播放钮 + ⏱ 胶囊，GIF 此刻才挂载并循环。</div>
   </div>
 
-  <div class="canvas" style="top: 148px; left: 40px; width: 560px; height: 330px;">
+  <div class="canvas" style="top: 146px; left: 40px; width: 560px; height: 434px;">
     <div class="variant">
-      <div class="ccard media" style="--tint:#e0e7ff; width: 512px; height: 282px;">
+      <div class="ccard media" style="--tint:#e0e7ff; width: 512px;">
-        <div class="player" style="min-height: 180px;">
+        <div class="player" style="aspect-ratio: 16 / 9; min-height: 0;">
           <div class="playbtn" style="width:56px; height:56px; font-size:20px;">▶</div>
           <span class="pill time" style="position:absolute; right:12px; top:10px; font-size:12px;">⏱ GIF loop</span>
           <span class="pill time" style="position:absolute; left:12px; bottom:10px; font-size:12px;">预期成果 · 浏览器打开第一个网页</span>
@@ -507,11 +505,11 @@
           <div class="dsc" style="font-size:12px; color:#555;">GIF 来源 static/gifs/hello-world.gif · loop=0 · 悬停期间持续播放</div>
         </div>
       </div>
-      <div class="vlabel"><b>default</b> · tint = #E0E7FF（随章节主题色）</div>
+      <div class="vlabel"><b>playing</b> · 512 × 288（16:9）· tint 随章节主题色</div>
     </div>
   </div>
 
-  <div class="canvas" style="top: 502px; left: 40px; width: 560px; height: 150px;">
+  <div class="canvas" style="top: 600px; left: 40px; width: 560px; height: 140px;">
     <div style="font-size:14px; font-weight:700; color:#1a1a1a; margin-bottom:12px;">六章节 tint 变体（播放器区域）</div>
     <div class="vrow" style="gap: 10px;">
       <div class="variant"><div style="width:70px; height:48px; border-radius:10px; background:#e0e7ff; display:flex; align-items:center; justify-content:center; font-size:12px;">▶</div><div class="vlabel">#E0E7FF</div></div>
@@ -528,6 +526,7 @@
       <h3>播放器规格</h3>
       <table class="spec">
         <tr><th>项</th><th>规格</th></tr>
+        <tr><td class="k">翻转周期</td><td>desc 8s ⇄ GIF 8s（flipInterval 可配）；GIF 内部循环</td></tr>
         <tr><td class="k">播放钮</td><td>黑 #111 圆形 · 卡内 44px / 展示 56px · 阴影 0 4px 14px</td></tr>
         <tr><td class="k">⏱ 胶囊</td><td>右上 GIF loop · 左下成果字幕，白底描边胶囊</td></tr>
         <tr><td class="k">GIF</td><td>640×360 · loop=0 · ≤300KB · hover 时才挂载</td></tr>
@@ -536,9 +535,9 @@
     </div>
     <div class="panel" style="margin-top: 12px;">
       <h3>状态转换</h3>
-      <div class="note"><span class="idx">1</span><span class="txt"><b>default → hover</b>：mouseenter/focus，卡底翻章节淡彩，播放钮 + 胶囊出现，GIF 挂载。</span></div>
+      <div class="note"><span class="idx">1</span><span class="txt"><b>desc → playing</b>：定时 8s 到期，或 hover / Tab 聚焦即时触发；GIF 挂载循环。</span></div>
-      <div class="note"><span class="idx">2</span><span class="txt"><b>hover → default</b>：mouseleave/blur，还原白卡，GIF 卸载，HTTP 缓存保留。</span></div>
+      <div class="note"><span class="idx">2</span><span class="txt"><b>锁定</b>：悬停/聚焦期间停在 playing，不翻回；移出后按定时器继续轮换。</span></div>
-      <div class="note"><span class="idx">3</span><span class="txt"><b>再次 hover</b>：缓存命中，瞬时恢复播放，无二次流量。</span></div>
+      <div class="note"><span class="idx">3</span><span class="txt"><b>playing → desc</b>：定时到期或移出，GIF 卸载、缓存保留，再翻回瞬时恢复。</span></div>
     </div>
   </div>
 

design-refs/mockup/course-shelf.html

@@ -184,8 +184,14 @@
     gap: 10px;
   }
   .bigcard.media-card { background: #e0e7ff; box-shadow: none; }
+  .bigcard .zone16x9 {
+    aspect-ratio: 16 / 9; border-radius: 14px;
+    background: #f7f7f5; border: 1px solid #ececea;
+    display: flex; align-items: center; padding: 14px 16px;
+    font-size: 13.5px; color: #8a8a8a; line-height: 1.6;
+  }
   .bigcard .m-player {
-    height: 190px; border-radius: 14px; background: #e0e7ff;
+    aspect-ratio: 16 / 9; border-radius: 14px; background: #e0e7ff;
     display: flex; align-items: center; justify-content: center; position: relative;
   }
   .bigcard .m-playbtn { width: 56px; height: 56px; border-radius: 50%; background: #111; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 20px; box-shadow: 0 6px 18px rgba(17,17,17,0.3); }
@@ -402,19 +408,17 @@
 <!-- ================= P3 卡片解剖 · 默认态 vs 悬停态 ================= -->
 <div class="page">
   <div class="pagehead">
-    <h2>02 卡片解剖 · 默认白卡 → 悬停媒体卡</h2>
+    <h2>02 卡片解剖 · 默认白卡 → 播放态</h2>
-    <span class="sub">悬停 = 卡内嵌播放器，GIF 循环预期成果</span>
+    <span class="sub">16:9 预期区定时翻转 desc ⇄ GIF，悬停锁定</span>
   </div>
 
   <!-- 左：默认白卡 -->
-  <div class="bigcard" style="left: 56px; top: 118px;">
+  <div class="bigcard" style="left: 56px; top: 106px;">
     <div style="display:flex; justify-content:space-between; align-items:flex-start;">
       <span style="width:38px;height:38px;border-radius:12px;background:#e0e7ff;display:flex;align-items:center;justify-content:center;font-size:18px;">🌐</span>
     </div>
-    <div>
+    <div class="zone16x9">写出第一个网页并在浏览器打开，跑起你的第一个 HTTP 服务器。<br><span style="font-size:11.5px; color:#b1b1af;">16:9 预期区 · desc 常驻，定时 8s 翻转播放 GIF</span></div>
-      <div style="font-size:20px; font-weight:800; color:#1a1a1a;">快速开始</div>
+    <div style="font-size:20px; font-weight:800; color:#1a1a1a;">快速开始</div>
-      <div style="font-size:13.5px; color:#8a8a8a; margin-top:4px;">写出第一个网页并在浏览器打开，跑起你的第一个 HTTP 服务器。</div>
-    </div>
     <div class="chips"><span class="chip">前置：无</span><span class="chip">关联：快速开始 React</span></div>
     <div style="display:flex; align-items:center; justify-content:space-between;">
       <span class="pill done" style="font-size:12px; padding:4px 14px;">✓ Completed 🎉</span>
@@ -422,46 +426,45 @@
     </div>
   </div>
 
-  <!-- 右：悬停媒体卡 -->
+  <!-- 右：播放态（定时翻转/悬停锁定） -->
-  <div class="bigcard media-card" style="left: 700px; top: 118px;">
+  <div class="bigcard media-card" style="left: 700px; top: 106px;">
     <div class="m-player">
       <div class="m-playbtn">▶</div>
       <div class="m-time">⏱ Preview · GIF loop</div>
     </div>
-    <div>
+    <div style="font-size:20px; font-weight:800; color:#1a1a1a;">快速开始</div>
-      <div style="font-size:20px; font-weight:800; color:#1a1a1a;">快速开始</div>
+    <div style="font-size:13.5px; color:#555;">预期成果正在预期区循环播放：浏览器打开第一个网页。</div>
-      <div style="font-size:13.5px; color:#555; margin-top:4px;">预期成果正在卡内循环播放：浏览器打开第一个网页。</div>
-    </div>
     <div style="display:flex; align-items:center; justify-content:space-between;">
       <span class="pill time" style="font-size:12px; padding:4px 14px;">⏱ Watching</span>
       <span class="cbtn" style="width:32px;height:32px;font-size:14px;">▶</span>
     </div>
   </div>
 
-  <!-- pin 标注 -->
+  <!-- pin 标注：左卡 top106（icon≈118 / zone 166-388 / title≈398 / chips≈436）右卡同构 -->
-  <span class="pin" style="top: 142px; left: 470px;">1</span>
+  <span class="pin" style="top: 120px; left: 470px;">1</span>
-  <span class="pin" style="top: 252px; left: 470px;">2</span>
+  <span class="pin" style="top: 250px; left: 470px;">2</span>
-  <span class="pin" style="top: 335px; left: 470px;">3</span>
+  <span class="pin" style="top: 402px; left: 470px;">3</span>
-  <span class="pin" style="top: 382px; left: 470px;">4</span>
+  <span class="pin" style="top: 440px; left: 470px;">4</span>
-  <span class="pin" style="top: 142px; left: 1114px;">5</span>
+  <span class="pin" style="top: 120px; left: 1114px;">5</span>
-  <span class="pin" style="top: 224px; left: 1114px;">6</span>
+  <span class="pin" style="top: 260px; left: 1114px;">6</span>
-  <span class="pin" style="top: 392px; left: 1114px;">7</span>
+  <span class="pin" style="top: 428px; left: 1114px;">7</span>
 
   <!-- 底部两说明面板 -->
-  <div class="legendbox" style="top: 530px; left: 56px;">
+  <div class="legendbox" style="top: 544px; left: 56px;">
     <div class="panel" style="padding: 14px 18px;">
       <h3 style="margin-bottom: 8px;">默认白卡要素</h3>
-      <div class="note" style="margin-bottom: 5px;"><span class="idx">1</span><span class="txt"><b>彩色圆角图标</b>：每章一个 emoji 图标，淡彩圆角底。</span></div>
+      <div class="note" style="margin-bottom: 4px;"><span class="idx">1</span><span class="txt"><b>彩色圆角图标</b>：每章一个 emoji，淡彩圆角底。</span></div>
-      <div class="note" style="margin-bottom: 5px;"><span class="idx">2</span><span class="txt"><b>标题 + 预期结果一句话</b>：desc 写「学完能做出什么」。</span></div>
+      <div class="note" style="margin-bottom: 4px;"><span class="idx">2</span><span class="txt"><b>16:9 预期区</b>：desc 常驻（写「学完能做出什么」），定时 8s 自动翻转为播放 GIF。</span></div>
-      <div class="note" style="margin-bottom: 0;"><span class="idx">3</span><span class="txt"><b>关系 chips</b>：前置 / 关联章节（关系待列，示例为占位）。</span></div>
+      <div class="note" style="margin-bottom: 4px;"><span class="idx">3</span><span class="txt"><b>标题 + 关系 chips</b>：前置 / 关联（示例占位）。</span></div>
+      <div class="note" style="margin-bottom: 0;"><span class="idx">4</span><span class="txt"><b>状态胶囊 + 黑圆确认钮</b>：✓ / Upcoming。</span></div>
     </div>
   </div>
   <div class="legendbox" style="top: 530px; left: 700px;">
     <div class="panel" style="padding: 14px 18px;">
-      <h3 style="margin-bottom: 8px;">悬停媒体卡（复刻播放器）</h3>
+      <h3 style="margin-bottom: 6px;">播放态（定时翻转 / 悬停锁定）</h3>
-      <div class="note" style="margin-bottom: 5px;"><span class="idx">4</span><span class="txt"><b>状态胶囊 + 黑圆确认钮</b>：✓ Completed 🎉 / Upcoming，点击进入章节。</span></div>
+      <div class="note" style="margin-bottom: 4px;"><span class="idx">5</span><span class="txt"><b>淡彩预期区</b>：翻转为该章主题淡彩播放态。</span></div>
-      <div class="note" style="margin-bottom: 5px;"><span class="idx">5</span><span class="txt"><b>淡彩整卡</b>：白卡变为该章主题淡彩底，视觉即「进入预览」。</span></div>
+      <div class="note" style="margin-bottom: 4px;"><span class="idx">6</span><span class="txt"><b>黑色圆形播放钮 + ⏱ 胶囊</b>：复刻原稿标志元素，此刻才挂载 GIF 循环。</span></div>
-      <div class="note" style="margin-bottom: 0;"><span class="idx">6</span><span class="txt"><b>黑色圆形播放钮 + ⏱ 胶囊</b>：复刻原稿标志元素；此刻才挂载 GIF，移出还原白卡。</span></div>
+      <div class="note" style="margin-bottom: 0;"><span class="idx">7</span><span class="txt"><b>翻转规则</b>：定时 8s 或 hover/Tab 即时翻转并锁定；到期/移出还原 desc，缓存保留。</span></div>
     </div>
   </div>
 
@@ -473,17 +476,17 @@
 <div class="page">
   <div class="pagehead">
     <h2>03 交互流程 · 触发矩阵 · GIF 资产规范</h2>
-    <span class="sub">预期成果 GIF = 靶子「预期结果」的非文字化</span>
+    <span class="sub">16:9 预期区 · desc ⇄ GIF 定时轮换 · 悬停锁定</span>
   </div>
 
   <div style="position:absolute; top: 118px; left: 40px; right: 40px;">
     <div class="panel" style="padding-bottom: 18px;">
-      <h3>悬停播放时序</h3>
+      <h3>翻转播放时序</h3>
       <div class="flow">
-        <div class="step"><div class="s-no">STEP 1</div><div class="s-t">指针进入</div><div class="s-d">mouseenter / focus-visible 触发，白卡翻为淡彩媒体卡。</div></div>
+        <div class="step"><div class="s-no">STEP 1</div><div class="s-t">定时 / 指针进入</div><div class="s-d">8s 定时到期，或 mouseenter / focus 即时触发，预期区翻为淡彩播放态。</div></div>
-        <div class="step"><div class="s-no">STEP 2</div><div class="s-t">挂载播放器</div><div class="s-d">此刻才渲染 GIF，浏览器按需拉取，首屏零动图流量。</div></div>
+        <div class="step"><div class="s-no">STEP 2</div><div class="s-t">挂载播放器</div><div class="s-d">此刻才渲染 GIF，按需拉取；悬停/聚焦期间锁定在播放态。</div></div>
         <div class="step"><div class="s-no">STEP 3</div><div class="s-t">循环播放</div><div class="s-d">GIF loop=0 自动循环，卡内嵌播放，无控件无声音。</div></div>
-        <div class="step"><div class="s-no">STEP 4</div><div class="s-t">移出还原</div><div class="s-d">mouseleave 还原白卡；HTTP 缓存保留，再悬停瞬时恢复。</div></div>
+        <div class="step"><div class="s-no">STEP 4</div><div class="s-t">到期 / 移出还原</div><div class="s-d">定时到期或移出还原 desc；GIF 卸载，HTTP 缓存保留。</div></div>
       </div>
     </div>
   </div>
@@ -493,10 +496,10 @@
       <h3>触发矩阵</h3>
       <table class="spec">
         <tr><th>设备 / 输入</th><th>行为</th></tr>
-        <tr><td class="k">桌面 · 鼠标 hover</td><td>白卡 → 媒体卡播放预览；点击卡片进入章节。</td></tr>
+        <tr><td class="k">桌面 · 鼠标 hover</td><td>即时翻转并锁定 GIF；点击卡片进入章节。</td></tr>
         <tr><td class="k">键盘 · Tab focus</td><td>与 hover 同态（可访问性），Enter 进入章节。</td></tr>
-        <tr><td class="k">触屏 · 无 hover</td><td>不做预览态；首次点击直接进入章节，避免误触耗流量。</td></tr>
+        <tr><td class="k">触屏 · 无 hover</td><td>不自动翻转；点击直接进入章节，避免误触耗流量。</td></tr>
-        <tr><td class="k">减弱动效偏好</td><td>prefers-reduced-motion 时显示静帧，不自动播放。</td></tr>
+        <tr><td class="k">减弱动效偏好</td><td>prefers-reduced-motion 时不自动翻转，仅显示 desc。</td></tr>
       </table>
     </div>
   </div>