feat: 全栈教程站（AI 时代版）——OUTLINE 大纲（skill 配方：靶子先行/步骤分类/积木三句话/指派三样/脱靶/认知基础）+ Vite MPA 七页（书架+六章），跨文档 View Transitions 防闪白（书架相框↔章头共享元素 morph），组件复用 design-lab 孟菲斯×拟物卡

apps/tutorial/src/styles/tokens.css

@@ -0,0 +1,84 @@
+@import 'tailwindcss';
+
+/* ===== 设计系统 tokens（孟菲斯 × 拟物卡）===== */
+@theme {
+  /* 撞色对（鲜艳的全部来源，相邻必撞） */
+  --color-clash1a: #ff6b6b; /* coral  · ch1 */
+  --color-clash1b: #4ecdc4; /* teal    · ch4 */
+  --color-clash2a: #ffd93d; /* mustard · ch3 */
+  --color-clash2b: #a78bfa; /* violet  · ch6 */
+  --color-clash3a: #ff8fab; /* pink    · ch2 */
+  --color-clash3b: #5b8def; /* blue    · ch5 */
+
+  /* 中性阶（纸的世界） */
+  --color-ink: #111111;
+  --color-paper: #fff9f0;
+  --color-mute: #8a7a5c;
+  --color-body: #3d3d3d;
+
+  /* 统一硬投影——唯一投影配方，所有基础组件复用（rest / 拿起） */
+  --shadow-hard: 5px 5px 0 var(--color-ink);
+  --shadow-hard-lift: 8px 8px 0 var(--color-ink);
+  /* 同配方的 drop-shadow 形态：给挖空轮廓用（票券）——box-shadow 会被 mask 裁掉 */
+  --drop-shadow-hard: 5px 5px 0 var(--color-ink);
+
+  /* 章节色别名 */
+  --color-ch1: #ff6b6b;
+  --color-ch2: #ff8fab;
+  --color-ch3: #ffd93d;
+  --color-ch4: #4ecdc4;
+  --color-ch5: #5b8def;
+  --color-ch6: #a78bfa;
+}
+
+/* 票券打孔（完成票专用），三件分工：
+ * 挖空 = 票体 mask 差集（两端 1/4 圆硬停剪切，孔穿透露出页面底色）；
+ * 阴影 = 外层 wrapper drop-shadow-hard——drop-shadow 跟随 alpha 轮廓，
+ *        孔挖到哪阴影咬到哪（box-shadow 会被 mask 的 border-box 裁切整体吃掉，不可用）；
+ * 孔缘 = .pk-arc 半圆环补 ink 边线（mask 只减形不补线），圆心骑撕线两端。 */
+.tk-pk {
+  --hole-x: 172.75px; /* 撕线中心：216 − 右描边 2 − stub 42 + 撕线半宽 */
+}
+.ticket-pk {
+  -webkit-mask-image:
+    radial-gradient(circle 7px at var(--hole-x) 0, transparent 6px, #000 6.5px),
+    radial-gradient(circle 7px at var(--hole-x) 100%, transparent 6px, #000 6.5px);
+  -webkit-mask-composite: source-in;
+  mask-image:
+    radial-gradient(circle 7px at var(--hole-x) 0, transparent 6px, #000 6.5px),
+    radial-gradient(circle 7px at var(--hole-x) 100%, transparent 6px, #000 6.5px);
+  mask-composite: intersect;
+}
+/* 孔缘弧线：16px 圆环（描边带 r6–8），clip-path 只留票内一半，不进阴影轮廓 */
+.pk-arc {
+  position: absolute;
+  left: calc(var(--hole-x) - 8px);
+  width: 16px;
+  height: 16px;
+  border: 2px solid var(--color-ink);
+  border-radius: 9999px;
+  pointer-events: none;
+}
+.pk-arc-t {
+  top: -8px;
+  clip-path: inset(50% 0 0 0);
+}
+.pk-arc-b {
+  bottom: -8px;
+  clip-path: inset(0 0 50% 0);
+}
+
+/* ===== MPA 跨文档 View Transitions：页面切换交叉淡入，不闪白 =====
+ * 同名 view-transition-name 的元素（site-header 站头、ch-<id> 相框↔章头）
+ * 在导航时做共享元素变形；其余内容默认交叉淡入。 */
+@view-transition {
+  navigation: auto;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  ::view-transition-group(*),
+  ::view-transition-old(*),
+  ::view-transition-new(*) {
+    animation-duration: 0.01ms;
+  }
+}