把 color-system.html 里定义的三套场景配色，真正应用到应援主页上，并支持在 A / B / C 之间实时切换。本页展示三套方案下的实际渲染效果、切换控件的入口位置，以及切换后的状态。
01 — Applied Schemes · 三套方案应用效果
以下均为主页的真实渲染截图（首屏 hero），不是示意图。三套方案共用同一套版式与字体层级，只替换色彩 token。
SCHEME A
近黑舞台底 + 热忱黄高光。识别度最高，最贴近现场「黄色星海」的观感。
SCHEME B
暖白 + 蜜光浅黄底，正文转为深海青。轻盈亲和，最省墨也最耐看。
SCHEME C
剧场紫底 + 追光黄，是唯一完整覆盖官方黄 / 紫 / 红三色的方案，叙事感最强。
02 — Control · 切换入口与控件
同一组控件，两种形态：桌面端固定在导航右侧，移动端转为底部固定胶囊条。移动端之所以要换形态，是因为原来的 .nav-links 与 .nav-cta 在 720px 以下会被隐藏。
.nav-cta 左侧，与导航链接同一行。position:fixed 贴底居中，宽度 calc(100% - 24px)，最大 340px。body 补 64px 底部内边距，页脚不会被压住。bottom:74px，避让胶囊条。<html data-theme>，全部颜色由 CSS 变量驱动，无需刷新。localStorage，下次访问保持上次的方案。?theme=a|b|c，链接直达指定配色。role="group" + aria-pressed 标示当前项，支持左右方向键切换。meta[name=theme-color]，移动端地址栏跟着变色。03 — Mobile States · 移动端切换后状态
390×844 视口下的真实渲染。注意底部胶囊条始终可见，且不遮挡页脚内容。
04 — State Matrix · 切换后状态对照
下表列出切换时实际变化的语义 token。版式、字号、间距、交互行为全部不变，只有色彩被替换。
| Token | A · 星海 | B · 蜜光 | C · 剧场 |
|---|---|---|---|
| 页面底色 | #0B0E1A | #FFF6E5 | #1A1028 |
| 正文色 | #FFF6E5 | #14484D | #FFF6E5 |
| 主色 / 高亮 | #FFD22E | #14484D | #FFD22E |
| 次级强调 | #FFB020 | #0F6B62 | #E8483C |
| 正文对比度 | 17.9 : 1 | 9.5 : 1 | 14.8 : 1 |
| 切换控件形态 | 桌面：导航右侧药丸组 · 移动：底部固定胶囊条（三套一致） | ||
| 版式 / 字号 | 完全一致，不随配色改变 | ||
05 — Design Notes · 设计说明
--bg / --text / --accent 而非 --yellow，这样 B 套把主色换成深青时，语义依然成立。06 — Boundaries · 版权与边界
配色可以切换，身份不能替代。