diff --git a/playground/public/design-process-review.html b/playground/public/design-process-review.html
index 32bf2c49..25c991de 100644
--- a/playground/public/design-process-review.html
+++ b/playground/public/design-process-review.html
@@ -10,6 +10,14 @@
 <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap">
 <style>
   :root{
+  --sp-xxs: 4px;   /* ← src/tokens/variables.css 逐字 */
+  --sp-xs: 8px;   /* ← src/tokens/variables.css 逐字 */
+  --sp-s: 12px;   /* ← src/tokens/variables.css 逐字 */
+  --sp-m: 16px;   /* ← src/tokens/variables.css 逐字 */
+  --sp-l: 24px;   /* ← src/tokens/variables.css 逐字 */
+  --r-xs: 2px;   /* ← src/tokens/variables.css 逐字 */
+  --r-s: 4px;   /* ← src/tokens/variables.css 逐字 */
+  --color-white: #ffffff;   /* ← src/tokens/variables.css 逐字 */
     --ink:#141414; --panel:#1f1f1f; --raise:#262626; --deep:#0f0f0f;
     --line:#353535; --line-soft:#2a2a2a;
     --fg:#f0f0f0; --fg-2:#cccccc; --fg-3:#8c8c8c;
@@ -21,16 +29,16 @@
   *{box-sizing:border-box}
   html,body{margin:0;padding:0}
   body{background:var(--ink);color:var(--fg);font-family:var(--sans);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased}
-  ::selection{background:var(--brand-dim);color:#fff}
+  ::selection{background:var(--brand-dim);color:var(--color-white)}
 
   .deck{min-height:100vh;display:flex;flex-direction:column}
-  .rail{display:flex;align-items:center;gap:13px;padding:11px 24px;border-bottom:1px solid var(--line);background:var(--panel);position:sticky;top:0;z-index:20}
+  .rail{display:flex;align-items:center;gap:13px;padding:11px var(--sp-l);border-bottom:1px solid var(--line);background:var(--panel);position:sticky;top:0;z-index:20}
   .rail .dot{width:8px;height:8px;border-radius:50%;background:var(--brand);flex:none}
   .rail .who{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3)}
   .rail .case{font-family:var(--mono);font-size:11px;color:var(--brand);margin-left:auto;letter-spacing:.06em}
   @media(max-width:640px){.rail .who:nth-of-type(2){display:none}}
 
-  .bar{display:flex;gap:3px;padding:0 24px;background:var(--panel);border-bottom:1px solid var(--line);position:sticky;top:44px;z-index:19}
+  .bar{display:flex;gap:3px;padding:0 var(--sp-l);background:var(--panel);border-bottom:1px solid var(--line);position:sticky;top:44px;z-index:19}
   .bar i{flex:1;height:3px;background:var(--line);transition:background .25s}
   .bar i.on{background:var(--brand)} .bar i.past{background:var(--brand-dim)}
 
@@ -39,20 +47,20 @@
   @keyframes rise{from{opacity:.45;transform:translateY(6px)}to{opacity:1;transform:none}}
   @media (prefers-reduced-motion:reduce){.slide{animation:none}}
 
-  .step{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--brand);margin:0 0 12px;display:flex;align-items:center;gap:10px}
+  .step{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--brand);margin:0 0 var(--sp-s);display:flex;align-items:center;gap:10px}
   .step::after{content:"";height:1px;flex:1;background:linear-gradient(90deg,var(--line),transparent)}
-  h1{font-size:clamp(29px,5vw,50px);line-height:1.15;margin:0 0 16px;font-weight:700;text-wrap:balance;letter-spacing:-.01em}
-  h2{font-size:clamp(21px,3.1vw,31px);line-height:1.28;margin:0 0 8px;font-weight:600;text-wrap:balance;letter-spacing:-.005em}
+  h1{font-size:clamp(29px,5vw,50px);line-height:1.15;margin:0 0 var(--sp-m);font-weight:700;text-wrap:balance;letter-spacing:-.01em}
+  h2{font-size:clamp(21px,3.1vw,31px);line-height:1.28;margin:0 0 var(--sp-xs);font-weight:600;text-wrap:balance;letter-spacing:-.005em}
   .sub{font-size:clamp(14px,1.5vw,16.5px);color:var(--fg-2);margin:0 0 22px;max-width:70ch;text-wrap:balance}
   p{margin:0 0 11px} b{font-weight:600}
 
   /* ── 前后对比骨架 ───────────────────── */
   .ba{display:grid;grid-template-columns:1fr 30px 1fr;margin:20px 0;align-items:stretch}
-  @media(max-width:800px){.ba{grid-template-columns:1fr;gap:12px}.ba .mid{display:none}}
-  .side{background:var(--panel);border:1px solid var(--line);border-radius:5px;padding:15px 16px;display:flex;flex-direction:column}
+  @media(max-width:800px){.ba{grid-template-columns:1fr;gap:var(--sp-s)}.ba .mid{display:none}}
+  .side{background:var(--panel);border:1px solid var(--line);border-radius:5px;padding:15px var(--sp-m);display:flex;flex-direction:column}
   .side.before{border-left:3px solid #7a3b34}
   .side.after{border-left:3px solid var(--brand)}
-  .side h4{margin:0 0 11px;font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;font-weight:500;display:flex;gap:8px;align-items:baseline}
+  .side h4{margin:0 0 11px;font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;font-weight:500;display:flex;gap:var(--sp-xs);align-items:baseline}
   .side.before h4{color:#d98a80} .side.after h4{color:var(--brand)}
   .side h4 em{font-style:normal;color:var(--fg-3);letter-spacing:0;text-transform:none;font-size:11px}
   .mid{display:flex;align-items:center;justify-content:center;color:var(--fg-3);font-size:18px}
@@ -62,12 +70,12 @@
   /* ── 需求卡 ─────────────────────────── */
   .req{background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--red);border-radius:5px;padding:20px 22px;margin:20px 0}
   .req .t{font-size:clamp(18px,2.4vw,24px);font-weight:600;margin:0 0 10px;line-height:1.35}
-  .req .m{display:flex;flex-wrap:wrap;gap:8px 20px;font-family:var(--mono);font-size:11.5px;color:var(--fg-3);letter-spacing:.04em}
+  .req .m{display:flex;flex-wrap:wrap;gap:var(--sp-xs) 20px;font-family:var(--mono);font-size:11.5px;color:var(--fg-3);letter-spacing:.04em}
   .req .m .id{color:var(--blue)}
 
   /* ── 开关判定 ───────────────────────── */
-  .sws{display:grid;gap:8px;margin:16px 0}
-  .sw{display:flex;align-items:center;gap:14px;background:var(--panel);border:1px solid var(--line);border-radius:5px;padding:12px 15px}
+  .sws{display:grid;gap:var(--sp-xs);margin:var(--sp-m) 0}
+  .sw{display:flex;align-items:center;gap:14px;background:var(--panel);border:1px solid var(--line);border-radius:5px;padding:var(--sp-s) 15px}
   .sw .q{flex:1;font-size:14.5px}
   .tog{flex:none;width:52px;height:26px;border-radius:13px;position:relative;background:#3a3a3a;transition:.2s}
   .tog::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#8c8c8c;transition:.2s}
@@ -75,7 +83,7 @@
   .tog.on::after{left:29px;background:var(--brand)}
   .tog-lbl{flex:none;font-family:var(--mono);font-size:11px;width:22px;color:var(--fg-3)}
   .tog.on + .tog-lbl{color:var(--brand)}
-  .verdict{display:flex;align-items:center;gap:14px;background:linear-gradient(90deg,var(--raise),var(--panel));border:1px solid var(--line);border-left:3px solid var(--brand);border-radius:5px;padding:14px 17px;margin-top:12px}
+  .verdict{display:flex;align-items:center;gap:14px;background:linear-gradient(90deg,var(--raise),var(--panel));border:1px solid var(--line);border-left:3px solid var(--brand);border-radius:5px;padding:14px 17px;margin-top:var(--sp-s)}
   .verdict .lv{font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--brand)}
   .verdict .cnt{font-family:var(--mono);font-size:24px;font-weight:600;font-variant-numeric:tabular-nums}
   .verdict .d{font-size:13.5px;color:var(--fg-2);line-height:1.45}
@@ -87,24 +95,24 @@
   .good.off{color:#5c5c5c;text-decoration:line-through;border-style:dashed;border-color:#3a3a3a}
 
   /* ── 散文块（before 示意）───────────── */
-  .prose{background:var(--raise);border-radius:3px;padding:12px 13px}
+  .prose{background:var(--raise);border-radius:3px;padding:var(--sp-s) 13px}
   .pl{height:7px;background:#3d3d3d;border-radius:3px;margin-bottom:6px}
   .pl.s{background:#333}
   .prose-cap{font-family:var(--mono);font-size:9.5px;color:var(--fg-3);letter-spacing:.1em;text-transform:uppercase;margin-bottom:9px}
 
   /* ── 对照表（after 示意）────────────── */
   .pair{display:grid;grid-template-columns:1fr 1fr;gap:3px;background:var(--raise);border-radius:3px;padding:10px}
-  .pc{background:#2f2f2f;border-radius:2px;padding:6px 8px;font-size:11px;color:var(--fg-2);line-height:1.35}
-  .pc.h{background:transparent;color:var(--fg-3);font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;padding:2px 8px 5px}
+  .pc{background:#2f2f2f;border-radius:var(--r-xs);padding:6px var(--sp-xs);font-size:11px;color:var(--fg-2);line-height:1.35}
+  .pc.h{background:transparent;color:var(--fg-3);font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;padding:2px var(--sp-xs) 5px}
   .pc.ok{color:#8fd9a2}
 
   /* ── 流程图 ─────────────────────────── */
-  .flow{background:var(--raise);border-radius:3px;padding:14px 12px;overflow-x:auto}
+  .flow{background:var(--raise);border-radius:3px;padding:14px var(--sp-s);overflow-x:auto}
   .flow-row{display:flex;align-items:center;gap:0;min-width:min-content}
-  .scr{flex:none;width:96px;background:#232323;border:1px solid #3d3d3d;border-radius:4px;overflow:hidden}
-  .scr .bar2{background:#2c2c2c;padding:4px 6px;font-size:9px;color:var(--brand);font-family:var(--mono);border-bottom:1px solid #3d3d3d;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+  .scr{flex:none;width:96px;background:#232323;border:1px solid #3d3d3d;border-radius:var(--r-s);overflow:hidden}
+  .scr .bar2{background:#2c2c2c;padding:var(--sp-xxs) 6px;font-size:9px;color:var(--brand);font-family:var(--mono);border-bottom:1px solid #3d3d3d;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
   .scr .body{padding:6px}
-  .scr .rw{height:5px;background:#3a3a3a;border-radius:2px;margin-bottom:4px}
+  .scr .rw{height:5px;background:#3a3a3a;border-radius:var(--r-xs);margin-bottom:var(--sp-xxs)}
   .scr .rw.hl{background:var(--brand-dim);outline:1px dashed var(--orange);outline-offset:1px}
   .arw{flex:none;width:74px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:0 2px}
   .arw .lbl{font-family:var(--mono);font-size:8.5px;color:var(--blue);text-align:center;line-height:1.25;white-space:nowrap}
@@ -113,11 +121,11 @@
 
   /* ── 体验地图 ───────────────────────── */
   .jm-before{display:flex;gap:5px;background:var(--raise);border-radius:3px;padding:11px}
-  .jblk{flex:1;background:#2c2c2c;border-radius:2px;padding:7px 6px;min-height:132px}
+  .jblk{flex:1;background:#2c2c2c;border-radius:var(--r-xs);padding:7px 6px;min-height:132px}
   .jblk .h{font-size:9px;color:var(--fg-3);font-family:var(--mono);margin-bottom:6px}
   .jm-after{background:var(--raise);border-radius:3px;padding:11px;overflow-x:auto}
   .jgrid{display:grid;grid-template-columns:44px repeat(5,minmax(60px,1fr));gap:2px;min-width:400px}
-  .jc{background:#2c2c2c;border-radius:2px;padding:5px 4px;font-size:8.5px;color:var(--fg-2);line-height:1.25;display:flex;align-items:center;min-height:22px}
+  .jc{background:#2c2c2c;border-radius:var(--r-xs);padding:5px var(--sp-xxs);font-size:8.5px;color:var(--fg-2);line-height:1.25;display:flex;align-items:center;min-height:22px}
   .jc.rh{background:transparent;color:var(--fg-3);font-family:var(--mono);font-size:8px}
   .jc.ch{background:#343434;color:var(--fg-2);font-family:var(--mono);font-size:8px;justify-content:center;text-align:center}
   .jc.hit{background:#16351f;color:#6cd688} .jc.next{background:#152c44;color:#7ab4ef}
@@ -129,12 +137,12 @@
   .callout .small{font-size:13.5px;color:var(--fg-2);margin:0;line-height:1.55}
   .callout.alert{border-color:#5a221c;background:linear-gradient(180deg,#241614,var(--panel))}
   .callout.alert .big{color:#ff8b7e}
-  .q-box{background:var(--panel);border-left:3px solid var(--orange);border-radius:0 5px 5px 0;padding:14px 17px;margin:16px 0}
+  .q-box{background:var(--panel);border-left:3px solid var(--orange);border-radius:0 5px 5px 0;padding:14px 17px;margin:var(--sp-m) 0}
   .q-box p{font-size:15.5px;margin:0;line-height:1.5}
-  .q-box .src{font-family:var(--mono);font-size:10.5px;color:var(--fg-3);margin-top:8px;letter-spacing:.06em}
+  .q-box .src{font-family:var(--mono);font-size:10.5px;color:var(--fg-3);margin-top:var(--sp-xs);letter-spacing:.06em}
 
-  .stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:12px;margin:20px 0}
-  .stat{background:var(--panel);border:1px solid var(--line);border-radius:5px;padding:15px 16px;display:flex;flex-direction:column;gap:5px}
+  .stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:var(--sp-s);margin:20px 0}
+  .stat{background:var(--panel);border:1px solid var(--line);border-radius:5px;padding:15px var(--sp-m);display:flex;flex-direction:column;gap:5px}
   .stat .k{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-3)}
   .stat .v{font-family:var(--mono);font-size:clamp(24px,3.4vw,34px);font-weight:600;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
   .stat .n{font-size:12.5px;color:var(--fg-2);line-height:1.45}
@@ -149,7 +157,7 @@
   td.num{font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
   td .b4{color:var(--fg-3)} td .af{color:var(--brand);font-weight:600} td .ar{color:var(--fg-3);padding:0 5px}
 
-  .list{display:grid;gap:9px;margin:16px 0}
+  .list{display:grid;gap:9px;margin:var(--sp-m) 0}
   .item{display:flex;gap:11px;align-items:flex-start}
   .item .m{font-family:var(--mono);font-size:10.5px;color:var(--brand);flex:none;border:1px solid var(--brand-dim);border-radius:3px;padding:2px 7px;margin-top:2px;white-space:nowrap}
   .item .m.x{color:var(--red);border-color:#5a221c}
@@ -164,17 +172,17 @@
   .cover{padding-top:clamp(26px,6vh,66px)}
   .cover h1{font-size:clamp(31px,6.4vw,60px);margin-bottom:18px}
   .cover .lede{font-size:clamp(15px,1.9vw,18.5px);color:var(--fg-2);max-width:56ch;margin:0 0 26px}
-  .cover .meta{display:flex;flex-wrap:wrap;gap:9px 24px;font-family:var(--mono);font-size:12px;color:var(--fg-3);padding-top:18px;border-top:1px solid var(--line)}
+  .cover .meta{display:flex;flex-wrap:wrap;gap:9px var(--sp-l);font-family:var(--mono);font-size:12px;color:var(--fg-3);padding-top:18px;border-top:1px solid var(--line)}
   .cover .meta b{color:var(--fg-2);font-weight:500}
   .guide{display:grid;gap:7px;margin-top:22px;max-width:620px}
-  .g{display:flex;align-items:baseline;gap:12px;padding:9px 13px;background:var(--panel);border:1px solid var(--line);border-radius:4px}
+  .g{display:flex;align-items:baseline;gap:var(--sp-s);padding:9px 13px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-s)}
   .g .gk{font-size:13.5px;font-weight:600;flex:none;min-width:6.5em}
   .g .gv{font-family:var(--mono);font-size:11px;color:var(--brand);flex:none}
   .g .gd{font-size:12.5px;color:var(--fg-3);line-height:1.4}
-  @media(max-width:560px){.g{flex-wrap:wrap;gap:4px 10px}.g .gd{width:100%}}
+  @media(max-width:560px){.g{flex-wrap:wrap;gap:var(--sp-xxs) 10px}.g .gd{width:100%}}
 
-  .srcs{margin:22px 0 0;padding-top:16px;border-top:1px solid var(--line);display:grid;gap:8px}
-  .src-row{display:flex;gap:12px;align-items:baseline;flex-wrap:wrap}
+  .srcs{margin:22px 0 0;padding-top:var(--sp-m);border-top:1px solid var(--line);display:grid;gap:var(--sp-xs)}
+  .src-row{display:flex;gap:var(--sp-s);align-items:baseline;flex-wrap:wrap}
   .src-row .sk{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-3);flex:none;min-width:5.6em}
   .src-row .sv{font-size:12.5px;color:var(--fg-3);line-height:1.5;flex:1;min-width:240px}
   .src-row a.link{font-size:12.5px;word-break:break-all}
@@ -182,12 +190,12 @@
   a.link{color:var(--blue);text-decoration:none;border-bottom:1px solid rgba(56,146,243,.4)}
   a.link:hover{border-bottom-color:var(--blue)}
   a.link:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
-  .figma-btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12px;color:var(--blue);
-    border:1px solid #1d3f63;border-radius:4px;padding:7px 13px;text-decoration:none;transition:.15s;background:var(--raise)}
+  .figma-btn{display:inline-flex;align-items:center;gap:var(--sp-xs);font-family:var(--mono);font-size:12px;color:var(--blue);
+    border:1px solid #1d3f63;border-radius:var(--r-s);padding:7px 13px;text-decoration:none;transition:.15s;background:var(--raise)}
   .figma-btn:hover{border-color:var(--blue);background:#16283a}
   .figma-btn:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
 
-  .pager{position:sticky;bottom:0;z-index:20;display:flex;align-items:center;gap:11px;padding:9px 24px;border-top:1px solid var(--line);background:var(--panel)}
+  .pager{position:sticky;bottom:0;z-index:20;display:flex;align-items:center;gap:11px;padding:9px var(--sp-l);border-top:1px solid var(--line);background:var(--panel)}
   .pager button{font-family:var(--mono);font-size:12px;background:var(--raise);color:var(--fg-2);border:1px solid var(--line);border-radius:3px;padding:7px 14px;cursor:pointer;transition:.15s}
   .pager button:hover:not(:disabled){border-color:var(--brand);color:var(--brand)}
   .pager button:disabled{opacity:.3;cursor:default}