test: design-lab 加 E2e 防画面偏差——结构契约断言 + 五页视觉基线（reducedMotion 稳定截图）

apps/design-lab/src/components/Ticket.tsx

@@ -6,7 +6,6 @@ export function Ticket({ chapter, done }: { chapter: Chapter; done: boolean }) {
   return (
     <div
       className={`relative flex w-[216px] items-stretch overflow-hidden rounded-xl border-2 border-ink bg-paper shadow-[5px_5px_0_var(--color-ink)] ${done ? 'ticket-pk' : ''}`}
-      style={{ ['--tk-color' as string]: chapter.color }}
     >
       {/* 头部媒体块：章节色纯填充，无独立边框（由票体裁切） */}
       <div className="flex w-14 shrink-0 items-center justify-center text-[22px]" style={{ background: chapter.color }}>{chapter.emoji}</div>
@@ -21,14 +20,6 @@ export function Ticket({ chapter, done }: { chapter: Chapter; done: boolean }) {
       >
         №{String(chapter.id).padStart(2, '0')}
       </div>
-      <style>{`
-        .ticket-pk::before, .ticket-pk::after {
-          content: ''; position: absolute; left: 160px; width: 14px; height: 14px;
-          border-radius: 50%; background: var(--color-paper); border: 2px solid var(--color-ink);
-        }
-        .ticket-pk::before { top: -10px; }
-        .ticket-pk::after { bottom: -10px; }
-      `}</style>
     </div>
   )
 }

apps/design-lab/src/pages/shelf/App.tsx

@@ -9,7 +9,7 @@ import { Bar, Cross, MissMark, Ring, Tremble, Tri, Wave } from '../../components
 const nodes = {
   1: { id: 1, borderLeft: 40, right: 299, y: 180 },
   2: { id: 2, borderLeft: 378, right: 639, y: 108 },
-  4: { id: 4, borderLeft: 698, right: 848, y: 108 },
+  5: { id: 5, borderLeft: 698, right: 848, y: 108 },
 } as const
 
 const SCATTER = [

apps/design-lab/src/styles/tokens.css

@@ -31,3 +31,22 @@
 .sem-shadow {
   filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.9));
 }
+
+/* 票券打孔：⌀14 圆跨边，被 overflow-hidden 裁成半圆缺口（完成票专用） */
+.ticket-pk::before,
+.ticket-pk::after {
+  content: '';
+  position: absolute;
+  left: 160px;
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  background: var(--color-paper);
+  border: 2px solid var(--color-ink);
+}
+.ticket-pk::before {
+  top: -10px;
+}
+.ticket-pk::after {
+  bottom: -10px;
+}