@lark-apaas/coding-steering 0.1.70 → 0.1.72

package/steering/nestjs-react-fullstack/skills/design-guide/references/claude-editorial-research.md

@@ -1,375 +0,0 @@
----
-version: alpha
-name: claude-editorial-research
-name_zh: 陶色书卷
-description: 暖奶油画布 + 珊瑚强调 + 深藏青产品面的社论式 AI 界面。以带暖调的奶油底色（非纯白、非冷灰）为默认地板，板衬线展示标题走 400 字重 + 负字距（Copernicus / Tiempos，替代 Cormorant Garamond），配人文无衬线正文（StyreneB / Inter）。品牌电压只来自「奶油 + 珊瑚」这对暖色，珊瑚仅点在主 CTA 与整幅召唤卡上。三种表面模式（奶油画布 / 奶油卡 / 深藏青产品面）逐屏交替形成节奏，深色面承载真实代码窗、终端、模型对比等产品 chrome，而非抽象营销插画。整体读感是长文杂志专栏而非 SaaS 落地页。
-anchors:
-  - id: canvas
-    type: token
-    desc: 暖调奶油底色，全站默认地板，刻意不用纯白/冷灰，见 colors.background
-  - id: primary
-    type: token
-    desc: 品牌珊瑚色，稀用于主 CTA、慷慨用于整幅召唤卡，从不作第三强调色
-  - id: display-serif
-    type: pattern
-    desc: 板衬线展示标题配负字距，文学社论气质，绝不加粗、绝不换无衬线
-  - id: surface-dark
-    type: token
-    desc: 深藏青产品面，承载代码窗、终端、模型对比卡等真实产品 chrome
-  - id: callout-card-coral
-    type: component
-    desc: 整幅珊瑚召唤卡，珊瑚面本身即品牌电压，内部按钮反相为奶油
-  - id: code-window-card
-    type: component
-    desc: 深色代码窗卡片，带行号与语法高亮，开发页面的招牌视觉元素
-  - id: three-surface-rhythm
-    type: pattern
-    desc: 奶油画布 / 奶油卡 / 深藏青三种表面按内容需要穿插，构成页面的节奏与呼吸
-colors:
-  primary: "#cc785c"
-  primary-active: "#a9583e"
-  foreground: "#141413"
-  body: "#3d3d3a"
-  muted-foreground: "#6c6a64"
-  border: "#e6dfd8"
-  background: "#faf9f5"
-  card: "#efe9de"
-  surface-cream-strong: "#e8e0d2"
-  surface-dark: "#181715"
-  surface-dark-elevated: "#252320"
-  surface-dark-soft: "#1f1e1b"
-  primary-foreground: "#ffffff"
-  on-dark: "#faf9f5"
-  on-dark-soft: "#a09d96"
-  accent-teal: "#5db8a6"
-  success: "#5db872"
-  error: "#c64545"
-
-typography:
-  display-xl:
-    fontFamily: "Copernicus, Tiempos Headline, Cormorant Garamond, Noto Serif SC, serif"
-    fontSize: 64px
-    fontWeight: 400
-    lineHeight: 1.05
-    letterSpacing: -1.5px
-  display-lg:
-    fontFamily: "Copernicus, Tiempos Headline, Cormorant Garamond, Noto Serif SC, serif"
-    fontSize: 48px
-    fontWeight: 400
-    lineHeight: 1.1
-    letterSpacing: -1px
-  display-md:
-    fontFamily: "Copernicus, Tiempos Headline, Cormorant Garamond, Noto Serif SC, serif"
-    fontSize: 36px
-    fontWeight: 400
-    lineHeight: 1.15
-    letterSpacing: -0.5px
-  display-sm:
-    fontFamily: "Copernicus, Tiempos Headline, Cormorant Garamond, Noto Serif SC, serif"
-    fontSize: 28px
-    fontWeight: 400
-    lineHeight: 1.2
-    letterSpacing: -0.3px
-  title-lg:
-    fontFamily: "StyreneB, Inter, PingFang SC, sans-serif"
-    fontSize: 22px
-    fontWeight: 500
-    lineHeight: 1.3
-    letterSpacing: 0
-  title-md:
-    fontFamily: "StyreneB, Inter, PingFang SC, sans-serif"
-    fontSize: 18px
-    fontWeight: 500
-    lineHeight: 1.4
-    letterSpacing: 0
-  body-md:
-    fontFamily: "StyreneB, Inter, PingFang SC, sans-serif"
-    fontSize: 16px
-    fontWeight: 400
-    lineHeight: 1.55
-    letterSpacing: 0
-  body-sm:
-    fontFamily: "StyreneB, Inter, PingFang SC, sans-serif"
-    fontSize: 14px
-    fontWeight: 400
-    lineHeight: 1.55
-    letterSpacing: 0
-  caption-uppercase:
-    fontFamily: "StyreneB, Inter, PingFang SC, sans-serif"
-    fontSize: 12px
-    fontWeight: 500
-    lineHeight: 1.4
-    letterSpacing: 1.5px
-  code:
-    fontFamily: "JetBrains Mono, ui-monospace, monospace"
-    fontSize: 14px
-    fontWeight: 400
-    lineHeight: 1.6
-    letterSpacing: 0
-  button:
-    fontFamily: "StyreneB, Inter, PingFang SC, sans-serif"
-    fontSize: 14px
-    fontWeight: 500
-    lineHeight: 1
-    letterSpacing: 0
-  nav-link:
-    fontFamily: "StyreneB, Inter, PingFang SC, sans-serif"
-    fontSize: 14px
-    fontWeight: 500
-    lineHeight: 1.4
-    letterSpacing: 0
-
-rounded:
-  md: 8px
-  lg: 12px
-  xl: 16px
-  pill: 9999px
-
-spacing:
-  lg: 24px
-  xl: 32px
-  xxl: 48px
-  section: 96px
-
-components:
-  button-primary:
-    background: "{colors.primary}"
-    color: "{colors.primary-foreground}"
-    typography: "{typography.button}"
-    rounded: "{rounded.md}"
-    padding: 12px 20px
-    height: 40px
-    description: 招牌珊瑚 CTA；按下态转 primary-active，不设其它 hover
-  button-secondary-on-dark:
-    background: "{colors.surface-dark-elevated}"
-    color: "{colors.on-dark}"
-    typography: "{typography.button}"
-    rounded: "{rounded.md}"
-    padding: 12px 20px
-    description: 深色面上的次级按钮，保持深色，从不反相为浅色
-  text-link:
-    background: transparent
-    color: "{colors.primary}"
-    typography: "{typography.body-md}"
-    description: 正文内联链接用珊瑚色，是系统最有辨识度的小细节
-  top-nav:
-    background: "{colors.background}"
-    color: "{colors.foreground}"
-    typography: "{typography.nav-link}"
-    height: 64px
-    description: 奶油顶栏，左侧 Anthropic 星芒标 + Claude 字标，右侧珊瑚主按钮
-  hero-band:
-    background: "{colors.background}"
-    color: "{colors.foreground}"
-    typography: "{typography.display-xl}"
-    padding: 96px
-    description: 奶油画布英雄区，6/6 栅格：左标题右插画或产品 mockup
-  feature-card:
-    background: "{colors.card}"
-    color: "{colors.foreground}"
-    typography: "{typography.title-md}"
-    rounded: "{rounded.lg}"
-    padding: 32px
-    description: 比画布深一档的奶油特性卡，3-up 栅格，无阴影
-  product-mockup-card-dark:
-    background: "{colors.surface-dark}"
-    color: "{colors.on-dark}"
-    typography: "{typography.title-md}"
-    rounded: "{rounded.lg}"
-    padding: 32px
-    description: 深藏青产品卡，展示真实 Claude 产品界面片段
-  code-window-card:
-    background: "{colors.surface-dark}"
-    color: "{colors.on-dark}"
-    typography: "{typography.code}"
-    rounded: "{rounded.lg}"
-    padding: 24px
-    innerBlock: "{colors.surface-dark-soft}"
-    description: 深色代码窗，带行号与语法高亮，内嵌块用 surface-dark-soft
-  pricing-tier-card-featured:
-    background: "{colors.surface-dark}"
-    color: "{colors.on-dark}"
-    typography: "{typography.title-lg}"
-    rounded: "{rounded.lg}"
-    padding: 32px
-    description: 主推档位卡，深色面本身即「featured」信号，其余档位为奶油描边
-  callout-card-coral:
-    background: "{colors.primary}"
-    color: "{colors.primary-foreground}"
-    typography: "{typography.title-md}"
-    rounded: "{rounded.lg}"
-    padding: 48px
-    description: 整幅珊瑚召唤卡，内部 CTA 反相为奶油按钮
-  cta-band-coral:
-    background: "{colors.primary}"
-    color: "{colors.primary-foreground}"
-    typography: "{typography.display-sm}"
-    rounded: "{rounded.lg}"
-    padding: 64px
-    description: 页脚前珊瑚 CTA 带，标题仍是衬线
-  badge-coral:
-    background: "{colors.primary}"
-    color: "{colors.primary-foreground}"
-    typography: "{typography.caption-uppercase}"
-    rounded: "{rounded.pill}"
-    padding: 4px 12px
-    description: NEW / BETA 珊瑚胶囊徽章
-  text-input-focused:
-    background: "{colors.background}"
-    color: "{colors.foreground}"
-    typography: "{typography.body-md}"
-    rounded: "{rounded.md}"
-    border: 1px {colors.primary}
-    description: 聚焦态输入框，边框转珊瑚 + 3px 珊瑚 15% 透明外环
-  footer:
-    background: "{colors.surface-dark}"
-    color: "{colors.on-dark-soft}"
-    typography: "{typography.body-sm}"
-    padding: 64px
-    description: 深藏青页脚收束每页，4 列链接，星芒标 + Anthropic 字标，从不反相
-gaps:
-  - "Copernicus / StyreneB / Tiempos Headline 是 Anthropic 授权字体、无公开 web font；本档用 Cormorant Garamond / Inter / Noto Serif SC 作替代项（源推荐字体无可用镜像源），气质近似但非精确。"
-  - "Anthropic 星芒标（四芒放射）为品牌 glyph，作 logo 资产处理，未形式化为系统 token（未取到完整 SVG path，落 gap 不凭二手重绘）。"
-  - "动画与转场时序（消息揭示、代码打字机、agentic-flow 图动画）不在抽取范围。"
-  - "text-input-focused 之外的表单校验态（error / success 输入态）未抽取。"
-  - "claude.ai 产品面的对话气泡、消息工具、文件上传芯片、会话侧栏等产品专属组件不在本营销面文档范围。"
-  - "primary-disabled、body-strong、muted-soft、surface-soft、hairline-soft、accent-amber、warning 等源中次要 token 与 title-sm / caption / xs / sm 半径为收敛体量已删减，需要时回查 raw-source。"
----
-
-## Overview
-
-Claude 是 AI 产品品类里最暖、最社论化的界面。基底气质是一层**带暖调的奶油画布**（`{colors.background}`）——刻意不用其它 AI 品牌惯用的冷灰白或纯白。标题走**板衬线展示体**（Copernicus / Tiempos Headline，替代 Cormorant Garamond）400 字重 + 负字距，配 **StyreneB / Inter** 人文无衬线正文，读感是文学出版物而非 SaaS 营销页。
-
-品牌电压只来自**奶油 + 珊瑚**这对暖色：珊瑚（`{colors.primary}`）是 Anthropic 招牌强调色，稀用于每个主 CTA 与品牌字标，慷慨用于整幅召唤卡，从不作第三强调色。珊瑚偏暖略哑，绝不偏青蓝——是对冷色调 AI 品牌的刻意反位。
-
-三种表面模式逐屏交替：
-1. **奶油画布** `{colors.background}` —— 默认正文地板
-2. **奶油特性卡** `{colors.card}` —— 比画布深一档
-3. **深藏青产品面** `{colors.surface-dark}` —— 代码窗、模型卡、页脚前 CTA、页脚本身
-
-深色面是 Claude 展示真实产品 chrome（代码块、终端、模型对比表）之处，而非抽象营销插画；奶油到深色的对比即页面节奏。层级半径：`{rounded.md}` 用于按钮与输入框，`{rounded.lg}` 用于内容与产品卡，`{rounded.xl}` 用于英雄插画容器，`{rounded.pill}` 用于徽章。段落节奏 `{spacing.section}` 恒定，卡内留白慷慨 `{spacing.xl}`。
-
-## Colors
-
-### 品牌与强调
-- **珊瑚 / 主色** `{colors.primary}`：招牌暖珊瑚，用于每个主 CTA 背景、整幅珊瑚召唤卡、品牌字标强调。
-- **珊瑚按下态** `{colors.primary-active}`：按下 / hover 变深。
-- **强调青** `{colors.accent-teal}`：极少量用于次级产品面（终端状态点、连接器「活跃」指示）。
-
-### 表面
-- **画布** `{colors.background}`：默认地板，暖奶油，非纯白。
-- **奶油卡** `{colors.card}`：特性卡、内容卡，比画布深一档。
-- **强奶油** `{colors.surface-cream-strong}`：选中态分类标签、强调段落带。
-- **深藏青** `{colors.surface-dark}`：代码窗、模型卡、页脚，主导深色面。
-- **深藏青抬升** `{colors.surface-dark-elevated}`：深色带内的抬升卡与次级按钮。
-- **深藏青柔** `{colors.surface-dark-soft}`：大深色卡内代码块背景。
-- **发丝线** `{colors.border}`：奶油面上的 1px 边框色，边界像一档抬升而非墨线。
-
-### 文本
-- **墨** `{colors.foreground}`：所有标题与主文本，暖深、略偏离纯黑。
-- **正文** `{colors.body}`：默认行文色。
-- **弱化** `{colors.muted-foreground}`：子标题、面包屑、次要文本。
-- **珊瑚上白字** `{colors.primary-foreground}`：珊瑚按钮上文字。
-- **深面上字** `{colors.on-dark}`：深色面上的奶油调白（呼应画布）。
-- **深面弱字** `{colors.on-dark-soft}`：页脚正文、深 mockup 内次级标签。
-
-### 语义
-- **成功** `{colors.success}`：绿色状态点、「可用」指示。
-- **错误** `{colors.error}`：校验错误。
-
-## Typography
-
-字体加载（`@import` 原样写入全局样式首行，**HARD REQUIREMENT：域名一律走自有镜像，禁止替换为 fonts.googleapis.com 直连**）：
-
-```css
-@import url('https://miaoda.feishu.cn/fonts/css2?family=Cormorant+Garamond:wght@500;600&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400&family=Noto+Serif+SC:wght@400;600&display=swap');
-```
-
-Copernicus / Tiempos Headline / StyreneB 是 Anthropic 授权字体、无公开 web font；本档以 **Cormorant Garamond**（weight 500、`-0.02em` 字距）作衬线展示体最近开源替代，**Inter** 作 StyreneB 替代，**JetBrains Mono** 处理代码。
-
-- 展示（`{typography.display-xl}` / `{typography.display-lg}` / `{typography.display-md}` / `{typography.display-sm}`）→ 板衬线，400 字重 + 负字距，用于 h1–h3 与英雄标题。负字距（-0.3 至 -1.5px）不可省——去掉后衬线读感偏离品牌。**绝不加粗**：加重靠更大字号而非更粗字重。
-- 标签 / 正文（`{typography.title-lg}` / `{typography.title-md}` / `{typography.body-md}` / `{typography.body-sm}` / `{typography.caption-uppercase}` / `{typography.button}` / `{typography.nav-link}`）→ 人文无衬线，正文 400、标签 500。
-- 代码（`{typography.code}`）→ JetBrains Mono。
-
-**中文兜底与行高转译**：本风格仅有拉丁展示体，无源推荐 CJK 字体；展示体末位补 **Noto Serif SC**（气质最近的优雅简中衬线），正文补 PingFang SC 系统兜底。中文标题回退时**清零负字距**、`line-height` 保持 ≥1.05（当前 1.05–1.2 已达标），中文正文 `line-height` ≥1.5（当前 1.55 达标），避免中文字形占满 em 盒后重叠。
-
-## Layout
-
-- **间距刻度**：`{spacing.lg}` 24px · `{spacing.xl}` 32px · `{spacing.xxl}` 48px · `{spacing.section}` 96px。
-- **段落节奏**：主内容组之间可参考 `{spacing.section}`（96px），信息紧凑时允许缩减。
-- **卡内留白**：特性 / 定价 / 模型卡 `{spacing.xl}`（32px）；代码窗卡 `{spacing.lg}`（24px）；珊瑚召唤卡 `{spacing.xxl}`（48px）；深色 CTA 带 64px。
-- **容器**：最大内容宽可参考 ~1200px 居中；分栏比例和卡片列数按内容关系与可用宽度决定。
-- **留白哲学**：奶油画布 + 衬线展示 + 慷慨卡内留白共同营造社论节奏，读感是长文杂志专栏而非营销模板。
-
-## Elevation & Depth
-
-深度以**色块优先、阴影稀有**：大部分层次来自奶油 vs 深藏青的表面对比，而非投影。
-
-| 层级 | 处理 | 用途 |
-|---|---|---|
-| 平 | 无阴影无边框 | 正文段、顶栏、英雄带 |
-| 发丝线 | 1px `{colors.border}` 边框 | 输入框、次级导航、偶尔卡片 |
-| 奶油卡 | `{colors.card}` 背景、无阴影 | 特性卡、内容卡 |
-| 深面卡 | `{colors.surface-dark}` 背景、无阴影 | 代码窗、模型卡 |
-| 微投影 | `0 1px 3px rgba(20,20,19,0.08)`（稀用） | 仅 hover 抬升态 |
-
-深色 mockup 自带内部产品 chrome（编辑器滚动条、行号、语法高亮），无需外部阴影即有细节。Anthropic 星芒标（四芒放射星号）作为小黑标出现在字标前缀与内联内容标记处。
-
-## Shapes
-
-| Token | 值 | 用途 |
-|---|---|---|
-| `{rounded.md}` | 8px | 标准 CTA 按钮、文本输入、分类标签 |
-| `{rounded.lg}` | 12px | 内容卡（特性 / 定价 / 代码窗 / 模型对比）|
-| `{rounded.xl}` | 16px | 英雄插画容器、大幅陈列组件 |
-| `{rounded.pill}` | 9999px | 徽章胶囊、NEW 标 |
-
-英雄区极少用照片；主流做法是珊瑚 + 深藏青线描插画、代码窗 mockup、终端输出 mockup、模型对比卡（Opus / Sonnet / Haiku 抽象几何缩略图）。测评头像裁为 40px 正圆。
-
-## Components
-
-- **`button-primary`** —— 招牌珊瑚 CTA，`{colors.primary}` 底 + `{colors.primary-foreground}` 字，`{typography.button}`，`{rounded.md}`，按下态转 `{colors.primary-active}`。
-- **`button-secondary-on-dark`** —— 深色面上次级按钮，`{colors.surface-dark-elevated}` 底，保持深色不反相。
-- **`text-link`** —— 正文珊瑚内联链接，系统最有辨识度的小细节。
-- **`top-nav`** —— 64px 奶油顶栏，星芒标 + Claude 字标 + 珊瑚主按钮。
-- **`hero-band`** —— 奶油英雄区，6/6 分栏，纵向 `{spacing.section}` 留白。
-- **`feature-card`** —— 奶油特性卡（`{colors.card}`），3-up 栅格，`{rounded.lg}`，`{spacing.xl}` 内边距。
-- **`product-mockup-card-dark`** —— 深藏青产品卡，展示真实 Claude 界面片段。
-- **`code-window-card`** —— 深色代码窗，行号 + 语法高亮，内嵌块用 `{colors.surface-dark-soft}`，开发页面招牌视觉。
-- **`pricing-tier-card-featured`** —— 主推档位卡翻为 `{colors.surface-dark}`，深色面本身即 featured 信号。
-- **`callout-card-coral`** —— 整幅珊瑚召唤卡，`{colors.primary}` 面即电压，内部按钮反相为奶油。
-- **`cta-band-coral`** —— 页脚前珊瑚 CTA 带，标题仍走 `{typography.display-sm}` 衬线。
-- **`badge-coral`** —— NEW / BETA 珊瑚胶囊徽章，`{typography.caption-uppercase}`。
-- **`text-input-focused`** —— 聚焦态输入框，边框转珊瑚 + 3px 珊瑚 15% 透明外环。
-- **`footer`** —— 深藏青页脚，4 列链接，星芒标 + Anthropic 字标，从不反相。
-
-### 图表与产品面色序
-报表 / 数据可视化容器落在深色面上时，序列色从 `{colors.accent-teal}`、`{colors.primary}`、`{colors.on-dark-soft}` 中取，容器背景 `{colors.surface-dark}`，网格线用 `{colors.surface-dark-elevated}`；语义状态点用 `{colors.success}` / `{colors.error}`。
-
-## Hard Rules
-
-- 每页必须锚定 `{colors.background}` 奶油画布，**禁止用纯白或冷灰作画布**——暖调即品牌差异。
-- 展示标题必须用板衬线（Copernicus / Cormorant Garamond）400 字重 + 负字距，**禁止加粗、禁止换无衬线做展示**；加重用更大字号。
-- `{colors.primary}` 珊瑚**仅**用于主 CTA 与整幅 `callout-card-coral` / `cta-band-coral`，**禁止**作第三强调色四处点缀。
-- **禁止**在相邻两个带用同一表面模式；节奏须交替：奶油 → 奶油卡 → 深藏青 → 奶油 → 珊瑚召唤 → 深藏青页脚。
-- `@import` 字体加载域名**禁止替换**为 `fonts.googleapis.com`，一律走自有镜像。
-- 只定义默认态与按下 / 聚焦态，**禁止**新增其它 hover 样式。
-- **禁止**引入第四种表面色调（无紫卡、无绿区块）：奶油 + 珊瑚 + 深藏青是唯一三元组。
-
-## Exceptions
-
-- 微投影 `0 1px 3px rgba(20,20,19,0.08)` 仅允许出现在 hover 抬升态，是「阴影稀有」规则下的明确例外。
-- `button-icon-circular` 类图标按钮触达尺寸 36×36px，略低于 WCAG 44 但视觉居中，允许。
-- 页脚与深色 CTA 带内边距用 64px（不在 spacing 刻度上），是深色带专属留白，允许。
-
-## Do's and Don'ts
-
-### Do
-- 用 `feature-card`（奶油）与 `product-mockup-card-dark`（深藏青）交替成带，节奏即品牌机制。
-- 用 `code-window-card` / `product-mockup-card-dark` 展示真实产品 chrome，而非画营销代码插画。
-- 用星芒标作字标前缀；定价主推档用深色面而非彩色描边。
-
-### Don't
-- 别用 Inter 做展示标题——衬线气质才是品牌声音。
-- 别把珊瑚铺满：它在单个元素上稀缺、只在整幅召唤卡上慷慨。
-- 别在字标内把星芒标反相为深底白色。

package/steering/nestjs-react-fullstack/skills/design-guide/references/crimson-frosted-glass.md

@@ -1,221 +0,0 @@
----
-version: alpha
-name: crimson-frosted-glass
-name_zh: 暗黑毛玻璃
-description: 毛玻璃暗色界面风——纯黑底 + 固定模糊背景图 + 三段渐变遮罩,浮层为半透明白毛玻璃卡片(细边框+24px 大圆角+无阴影),红色强调色(#FF4D4D)点缀主数据系列/图标/趋势标记;超大粗体标题(text-5xl~text-7xl,extrabold/black,tracking-tighter);内容采用杂志式层级与错落节奏。高端、沉浸、数据自信。
-colors:
-  background: "#000000"
-  card: "rgba(255,255,255,0.05)"
-  surface-hover: "rgba(255,255,255,0.10)"
-  header-from: "rgba(0,0,0,0.60)"
-  header-via: "rgba(0,0,0,0.80)"
-  header-to: "#000000"
-  foreground: "#FFFFFF"
-  muted-foreground: "rgba(255,255,255,0.60)"
-  text-50: "rgba(255,255,255,0.50)"
-  text-40: "rgba(255,255,255,0.40)"
-  text-30: "rgba(255,255,255,0.30)"
-  primary: "#FF4D4D"
-  border: "rgba(255,255,255,0.10)"
-  icon-bg: "rgba(255,255,255,0.05)"
-  button-active-bg: "#FFFFFF"
-  button-active-text: "#000000"
-  primary-area-top: "rgba(255,77,77,0.30)"
-  primary-area-bottom: "rgba(255,77,77,0)"
-  inactive-bar: "rgba(255,255,255,0.10)"
-  positive: "#4ADE80"
-  positive-bg: "rgba(34,197,94,0.20)"
-  negative: "#EF4444"
-  icon-orange: "#FB923C"
-  icon-blue: "#60A5FA"
-typography:
-  sans:
-    fontFamily: 'Inter, sans-serif'
-    fontWeight: 400
-    usage: 全局唯一字体(Tailwind font-sans),标题字重上探至 800(extrabold)/900(black)
-rounded:
-  card: 24px
-  button-group: 16px
-  button: 12px
-  icon: 12px
-  nav-item: 16px
-  trend-tag: 8px
-  avatar: 9999px
-  tooltip: 12px
-  bar-end: "0px 10px 10px 0px"
-spacing:
-  content-padding-mobile: 16px
-  content-padding-desktop: 48px
-  section-gap: 32px
-  section-gap-lg: 48px
-  card-gap: 24px
-  header-gap: 32px
-  card-padding: 24px
-  card-padding-lg: 32px
-components:
-  glass-card:
-    background: "{colors.card}"
-    backdropFilter: "blur(12px)"
-    border: "1px solid {colors.border}"
-    borderRadius: "{rounded.card}"
-    hover: "background→{colors.surface-hover},transition-all duration-300"
-  stat-card:
-    base: "glass-card p-6 flex flex-col justify-between h-full group"
-    top: "标签 text-sm {colors.muted-foreground} tracking-wider uppercase(左)+ 图标容器 p-2 {colors.icon-bg} rounded-xl group-hover:scale-110(右)"
-    value: "text-3xl font-extrabold {colors.foreground}"
-    subtitle: "text-sm {colors.text-40}"
-    icon: "lucide-react,语义色(icon-orange/icon-blue/negative 等)"
-  hero-card:
-    base: "glass-card overflow-hidden relative;尺寸按内容和可用空间确定"
-    header: "小标签 text-sm {colors.text-40} uppercase tracking-widest + 大数值 text-6xl font-black + 趋势标签({colors.positive}/{colors.positive-bg}/{rounded.trend-tag}) + 时间戳 {colors.text-30}"
-    avatars: "flex -space-x-2,头像 w-8 h-8 rounded-full border-2 border-black {colors.surface-hover},计数块 bg-white text-black text-[10px] font-bold"
-    chart-layer: "absolute inset-0 top-32,面积图铺满剩余空间"
-  navigation:
-    base: "使用 {colors.card} 毛玻璃表面与 {colors.border} 分隔，位置和形态由应用信息架构决定"
-    logo: "w-12 h-12 rounded-full border-2 border-white/20,hover:border-white"
-    nav-item: "p-4 {rounded.nav-item},激活=bg-white text-black shadow-lg shadow-white/20;非激活={colors.text-40} hover:text-white hover:{colors.icon-bg}"
-  time-toggle:
-    base: "flex items-center space-x-4 {colors.surface-hover} p-2 {rounded.button-group} backdrop-blur-md"
-    active: "px-6 py-2 {rounded.button} {colors.button-active-bg} {colors.button-active-text} font-bold text-sm"
-    inactive: "px-6 py-2 {rounded.button} {colors.muted-foreground} font-bold text-sm hover:text-white"
-  charts:
-    palette: "{colors.primary} {colors.foreground} #FFA366 #4DFF88(红/白/橙/绿,序列固定顺序)"
-    container: "glass-card,{rounded.card},无阴影,p-6(标准)/p-8(大图表)"
-    tooltip: "背景 rgba(0,0,0,0.80),{rounded.tooltip},backdrop-blur(8px),文字 {colors.foreground}"
-    axis: "yAxis 默认隐藏标签,xAxis 标签 {colors.text-30},网格线 rgba(255,255,255,0.05)"
-    area-fill: "折线区域渐变 {colors.primary-area-top} → {colors.primary-area-bottom}"
-    bar: "水平条形,首项(最大值) {colors.primary},其余 {colors.inactive-bar},borderRadius {rounded.bar-end}"
-anchors:
-  - id: black-glass-base
-    type: pattern
-    desc: 纯黑背景(colors.background)+固定模糊背景图+三段渐变遮罩(colors.header-from/via/to)作全页底层,毛玻璃卡片浮于其上
-  - id: glass-card-signature
-    type: component
-    desc: 毛玻璃卡片(components.glass-card)半透明白底+backdrop-blur+细白边框+大圆角(rounded.card),是全页核心识别单元
-  - id: crimson-accent
-    type: token
-    desc: 强调色(colors.primary)专用于主数据系列/图标/趋势标记,点缀式使用不铺大面积
-  - id: oversized-heading
-    type: pattern
-    desc: 页面主标题超大字重(font-extrabold~font-black)搭配 tracking-tighter,弱化词用 text-40 斜体细体
-  - id: no-shadow-depth
-    type: pattern
-    desc: 层次感几乎不依赖阴影,靠毛玻璃透明度分级(card/surface-hover/border)营造深度
-  - id: four-color-chart-sequence
-    type: token
-    desc: 图表统一序列色(components.charts.palette 红/白/橙/绿固定顺序),不随意扩展色数
-gaps:
-  - 无表单控件(input/select/checkbox 等)规范
-  - 无 Empty/Loading/Error 状态定义
-  - 单一暗色主题,无 light mode 定义
-  - Sidebar 具体图标集未列出,仅注明限定 lucide-react 图标库
-  - 头像图片/背景模糊图片来源未定义,仅注明 URL 可替换
-exceptions:
-  - 圆形头像/Logo/进度环使用全圆 rounded.avatar,不套用卡片 24px 大圆角体系
-  - 导航激活态/移动浮动按钮/滚动条滑块允许有阴影(shadow-lg/shadow-2xl),不受"整体无阴影"规则约束
-  - 断点适配下的字号/间距/网格列数、图表高度、Section 子网格列数、背景模糊图片 URL、头像图片 URL、切换按钮数量与文案允许按需微调
-  - 图标限定 lucide-react 图标库,可按需更换具体图标
----
-
-## Overview
-
-毛玻璃暗色界面风格。纯黑背景 + 固定模糊背景图 + 三段渐变遮罩打底,浮层为半透明白毛玻璃卡片(细边框+大圆角+无阴影),红色强调色专用于主数据系列/图标/趋势标记的点缀式强调。内容区使用杂志式大小对比和错落节奏，具体导航与模块结构服从任务。情绪基调:高端、沉浸、数据自信。
-
-## Colors
-
-| 角色 | 值 | 用法 |
-|-----|-----|------|
-| background | {colors.background} | 页面背景,纯黑 |
-| card | {colors.card} | 毛玻璃卡片/Sidebar/图标容器背景 |
-| surface-hover | {colors.surface-hover} | 卡片/按钮组 hover 背景 |
-| header-from/via/to | {colors.header-from} → {colors.header-via} → {colors.header-to} | 固定背景层三段渐变遮罩 |
-| foreground | {colors.foreground} | 主要文字 |
-| muted-foreground/text-50/40/30 | {colors.muted-foreground}/{colors.text-50}/{colors.text-40}/{colors.text-30} | 四档次要文字:标签/描述/辅助/极小字 |
-| primary | {colors.primary} | 主强调色:数据系列、图标、趋势标记、按钮激活强调 |
-| border | {colors.border} | 卡片边框、Sidebar 分隔线 |
-| icon-bg | {colors.icon-bg} | 图标容器背景(值同 card) |
-| button-active-bg/text | {colors.button-active-bg}/{colors.button-active-text} | 激活态按钮/浮动按钮反色底 |
-| primary-area-top/bottom | {colors.primary-area-top} → {colors.primary-area-bottom} | 面积图渐变填充 |
-| inactive-bar | {colors.inactive-bar} | 条形图非强调条 |
-| positive/positive-bg | {colors.positive}/{colors.positive-bg} | 趋势正向文字/标签底 |
-| negative | {colors.negative} | 趋势负向文字、图标-红色(复用同值) |
-| icon-orange/icon-blue | {colors.icon-orange}/{colors.icon-blue} | 辅助图标色 |
-
-## Typography
-
-全局样式首行原样写入(HARD REQUIREMENT,禁止替换):
-
-```css
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
-```
-
-| 层级 | 样式 | 颜色 |
-|-----|-----|-----|
-| 页面主标题 | text-5xl md:text-7xl font-extrabold tracking-tighter leading-none | {colors.foreground},弱化部分 {colors.text-40} italic font-light |
-| Hero KPI 数值 | text-6xl font-black | {colors.foreground} |
-| Section 标题 | text-2xl font-black italic | {colors.foreground} |
-| 卡片内标题 | text-xl font-bold | {colors.foreground} |
-| KPI 数值(卡片) | text-3xl font-extrabold | {colors.foreground} |
-| 标签/分类 | text-sm font-medium tracking-wider uppercase | {colors.muted-foreground} |
-| 小标签 | text-sm font-bold uppercase tracking-widest | {colors.text-40} |
-| 趋势标签 | text-xs font-bold | {colors.positive},bg {colors.positive-bg},{rounded.trend-tag} |
-| 描述文字 | text-lg leading-relaxed | {colors.text-50} |
-| 辅助小字 | text-sm | {colors.text-40} |
-| 极小字 | text-[10px] uppercase tracking-tighter | {colors.text-30} |
-| 按钮文字 | text-sm font-bold | 激活 {colors.button-active-text};非激活 {colors.muted-foreground} |
-| 突出标题 | text-4xl font-black uppercase | {colors.foreground} |
-
-## Layout
-
-- 固定背景层(最底层,均 fixed inset-0 pointer-events-none):模糊图片 opacity-40 + 渐变遮罩 linear-gradient(to bottom, {colors.header-from}, {colors.header-via}, {colors.header-to})。
-- 页面模块按业务内容自由组织，可用大小悬殊的毛玻璃卡片形成杂志式焦点；不得固定导航位置、3/4+1/4 分栏、洞察列数或区块顺序。
-- 间距:主内容 padding {spacing.content-padding-mobile} → md:{spacing.content-padding-desktop};Section 间 {spacing.section-gap}~{spacing.section-gap-lg};卡片间 {spacing.card-gap};Header 内 gap {spacing.header-gap};卡片内边距 {spacing.card-padding}(标准)/{spacing.card-padding-lg}(大图表)。
-- 响应式:宽屏可强化错落层级；窄屏按阅读和操作优先级重排，标题缩放、图例简化，导航采用适合当前应用的移动形态。
-- 滚动条:宽 6px,轨道 {colors.background},滑块 #333,圆角 10px。
-
-## Elevation & Depth
-
-- 整体不依赖阴影分层,靠毛玻璃透明度梯度({colors.card} → {colors.surface-hover})+ 1px 边框({colors.border})营造深度。
-- 例外阴影:导航激活态 shadow-lg shadow-white/20;移动浮动按钮 shadow-2xl;其余元素无阴影。
-- Hover:卡片背景微亮(card→surface-hover),图标 group-hover:scale-110,按钮/导航文字色反转或加深,浮动按钮 hover:rotate-45,过渡统一 transition-all duration-300。
-
-## Shapes
-
-- 圆角体系(全部见 frontmatter rounded):卡片 {rounded.card},按钮组 {rounded.button-group},按钮/图标 {rounded.button}/{rounded.icon},导航项 {rounded.nav-item},趋势标签 {rounded.trend-tag},头像/Logo/进度环 {rounded.avatar}(全圆,例外见 Exceptions),Tooltip {rounded.tooltip},条形图右端 {rounded.bar-end}。
-- 边框:卡片 1px solid {colors.border};Sidebar 右边框同色;Logo border-2 border-white/20(hover→border-white);头像堆叠 border-2 border-black;Sidebar 头像 border border-white/20。
-- 无手绘/有机形态语言,全部规则矩形/圆形几何。
-
-## Components
-
-frontmatter components 已含核心规格,补充细节:
-
-- **glass-card**:所有卡片基座,毛玻璃背景+细边框+大圆角,无阴影。
-- **stat-card**:紧凑数据卡，顶部标签+图标，底部数值+副标题，可按信息关系独立使用。
-- **hero-card**:用于主数据焦点的较大卡片，包含面积图背景层和顶部信息层；尺寸和位置按内容决定。
-- **navigation**:若业务需要导航，沿用毛玻璃表面、图标容器和反色激活态，不限制侧栏或顶栏。
-- **time-toggle**:时间段切换按钮组,激活态反色(白底黑字)。
-- **图例**:自定义 HTML/CSS 实现(非 ECharts 内置 legend),水平图例 flex + 圆点色块 + 大写标签;垂直图例 space-y-3 + 圆点+名称+数值。
-- **SVG 圆环进度**:relative w-24 h-24,背景环 stroke white/5,进度环 stroke {colors.negative} strokeWidth 3 strokeLinecap round,中心数字 font-bold text-xl。
-- **图表(ECharts)**:序列色/容器/Tooltip/坐标轴规则见 frontmatter components.charts;折线默认 smooth+区域渐变,阶梯折线用于辅助系列;饼图环形 55%~73% padAngle 5 无描边;水平条形首项高亮其余灰。
-
-## Do's and Don'ts
-
-- 图表配色优先使用 charts.palette 四色顺序,不随意扩展或调换顺序。
-- Hover 交互统一 transition-all duration-300,避免不同组件使用不一致的过渡时长。
-- 弱化文字用透明度阶梯(muted-foreground/text-50/40/30)表达层级,不引入新的灰度色板。
-- 大圆角(rounded.card)与强调色(primary)是核心识别特征,新增卡片类组件应延用而非另起圆角值。
-
-## Hard Rules
-
-- 背景必须为纯黑({colors.background})+固定模糊背景图+三段渐变遮罩,禁止改为浅色或纯色背景。
-- 卡片类容器必须使用毛玻璃(components.glass-card):半透明白底+backdrop-blur+细边框+{rounded.card},禁止实色不透明卡片。
-- 强调色 {colors.primary} 仅用于主数据系列/图标/趋势标记的点缀式强调,禁止大面积铺色。
-- 字体 @import 必须原样写入全局样式首行,禁止替换或省略(HARD REQUIREMENT)。
-- 图表序列色必须使用 charts.palette 固定顺序(红/白/橙/绿),禁止引入额外颜色。
-
-## Exceptions
-
-- 圆形头像/Logo/进度环使用全圆 {rounded.avatar},不套用卡片 {rounded.card} 大圆角体系。
-- 导航激活态、移动浮动按钮、滚动条滑块允许有阴影(shadow-lg/shadow-2xl),不受"整体无阴影"规则约束。
-- 断点适配下的字号/间距/网格列数、图表高度、Section 子网格列数、背景模糊图片 URL、头像图片 URL、切换按钮数量与文案允许按需微调。
-- 图标限定 lucide-react 图标库,可按需更换具体图标。