style(design): fix contrast, layout thrashing, and resolve ghost-card pattern

Author: AceCandy

.gitignore

@@ -15,3 +15,4 @@ data/generated/
 docs/superpowers/
 .codex/
 AGENTS.md
+.agents/

PRODUCT.md

@@ -0,0 +1,33 @@
+# Product
+
+## Register
+
+product
+
+## Users
+这个项目的主要用户是中文开发者，通常在编码、排查问题、查命令、看配置项时打开这张速查页。他们使用时的核心场景不是“沉浸式阅读”，而是“快速扫读、快速定位、快速确认”。界面需要优先服务信息检索效率，让用户能在高密度内容里迅速找到模块、分组、字段和说明。
+
+## Product Purpose
+生成和发布 Claude Code 中文速查表。自动抓取上游内容，利用词表完成中文映射并静态生成页面，在极低同步和维护成本下，为中文开发者提供最即时的信息检索和速查参考。
+
+## Brand Personality
+高效、锐利、现代。页面给人的感受应当是专业、可信、干净利落，而不是热闹、营销化或装饰驱动。
+
+## Anti-references
+- **Side-stripe borders**: 侧边粗边框作为卡片或警示的修饰。
+- **Gradient text**: 渐变字，影响低照度和低对比度下的扫读。
+- **Tiny uppercase tracked eyebrow**: 章节顶部的小字全大写跟踪线（如 "ABOUT" "PROCESS"），此为 AI 脚手架模板痕迹。
+- **Numbered eyebrows**: 无意义的 01 / 02 / 03 序号标识。
+- **Identical card grids**: 相同的卡片无限重复，应通过差异化排版提高信息层级。
+
+## Design Principles
+1. **扫读效率优先于装饰表现**：任何视觉决策都应先服务于“更快定位信息、更少认知负担、更清晰层级”。
+2. **高对比与可访问性是硬约束**：所有主题都应满足 WCAG AA，兼顾色盲友好、减少动画和清晰焦点态。
+3. **现代感来自秩序、比例和节奏**：可以锐利，可以有技术感，但不要依赖重阴影、夸张渐变、炫技动效或视觉噪声。
+4. **展示层可以重做，但同步链路不能被破坏**：上游抓取、解析、映射、生成的逻辑必须保持稳定；设计调整只发生在前端展示层与样式表达层。
+5. **信息密度要高，但不能压垮阅读**：允许紧凑布局，但必须通过分组、留白、字重、字号、颜色层级和模块边界维持清晰可读。
+
+## Accessibility & Inclusion
+- 确保文字对比度符合 WCAG AA 规范。
+- 支持深色和浅色双主题，具有出色的高对比度和清晰的聚焦态。
+- 减少不必要的动画，并支持 `prefers-reduced-motion`。

script.js

@@ -135,8 +135,14 @@ function initStickyOffsets() {
 
   updateStickyOffsets();
 
+  var resizeTimeout = null;
   if (window && typeof window.addEventListener === "function") {
-    window.addEventListener("resize", updateStickyOffsets);
+    window.addEventListener("resize", function () {
+      if (resizeTimeout) {
+        cancelAnimationFrame(resizeTimeout);
+      }
+      resizeTimeout = requestAnimationFrame(updateStickyOffsets);
+    });
   }
 }
 

styles.css

@@ -33,8 +33,8 @@
   --border-strong: #b8c5d8;
   --text: #17202e;
   --text-soft: #334155;
-  --text-muted: #64748b;
-  --shadow: 0 20px 48px rgba(15, 23, 42, 0.08);
+  --text-muted: #526075;
+  --shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
   --chip-bg: #f2f6fb;
   --chip-border: #c9d4e3;
   --control-bg: #eef2f7;
@@ -75,8 +75,8 @@
   --border-strong: #36516f;
   --text: #e8eef7;
   --text-soft: #c6d2e3;
-  --text-muted: #91a4bc;
-  --shadow: 0 24px 56px rgba(2, 6, 23, 0.45);
+  --text-muted: #a0b7d7;
+  --shadow: 0 2px 8px rgba(2, 6, 23, 0.25);
   --chip-bg: #1b2a3d;
   --chip-border: #32485f;
   --control-bg: #152233;
@@ -116,8 +116,8 @@
     --border-strong: #36516f;
     --text: #e8eef7;
     --text-soft: #c6d2e3;
-    --text-muted: #91a4bc;
-    --shadow: 0 24px 56px rgba(2, 6, 23, 0.45);
+    --text-muted: #a0b7d7;
+    --shadow: 0 2px 8px rgba(2, 6, 23, 0.25);
     --chip-bg: #1b2a3d;
     --chip-border: #32485f;
     --control-bg: #152233;
@@ -881,7 +881,7 @@ a,
   padding: 0.16rem 0.42rem;
   border-radius: 999px;
   background: var(--danger);
-  color: #fff;
+  color: #ffffff;
   font-size: 0.66rem;
   line-height: 1;
   font-weight: 700;