---
description: 双主题视觉与 LP 章节结构约定
globs: src/App.tsx,src/App.css,src/index.css
alwaysApply: false
---

# UI 与章节

## 双主题

- `hero`～`system`：`.poetic-section`（宣纸/国风：`--paper`、`--ink`、`--red`、`--gold`）
- `tech`～`contact`：`.tech-section`（深色科技：`--tech`、`--tech-card`、`--tech-line`）
- 普通模式 `activeIndex >= tech` 时顶栏加 `is-tech-theme`；展控（`?mode=stage`）不加
- 新增章节必须选对主题族；勿混用两套配色令牌

## 改章节

1. 更新 `sections` 常量（id / label / title / summary）
2. 更新 `navItems`（hero 通常不进顶栏）
3. 增加带正确 `id` 的 `<section className="page-section …">`
4. 同步展控 UI（dots、panel、进度）

## 视觉原则

- 首屏品牌优先；章节多为 full-bleed 背景，保持 scroll-snap
- 动效沿用 `fadeRise`、`reveal-*`、`.is-entered`、`--slide-i`，勿堆叠无关徽章/卡片装饰
- 静态资源用 `/assets/...`；勿引用 `pdf-ref/`
- 响应式断点已有约 `1100px`、`760px`，优先扩展现有规则