design: 效果稿改为清淡简洁风格，T-200 完成

- play.html / list.html：从深色重金属改为浅暖纸白 + 墨色 + 单一柔和赭石强调，
  去掉颗粒/暗角/发光，UI 改用 Public Sans / Noto Sans SC；补齐焦点态、
  cursor、44px 触控、对比度、prefers-reduced-motion、aria-label
- README：设计语言更新为「清淡简洁 · Swiss/Minimal」
- 06-tasks：T-200 标记 DONE

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

design_mockups/README.md

@@ -7,11 +7,12 @@
 | `play.html` | 播放页 | **逐句字幕同步**：当前句放大+琥珀高亮+左侧光条，已读句变暗；**点任意句跳转**；底部播放器（播/停、上/下一句、进度）。点 ▶ 可看自动逐句推进的效果 |
 | `list.html` | 课程列表 | 26 集卡片：英文/中文标题、Act 幕状态（有音频=琥珀点 / 无音频=虚线）、进度环；顶部"继续学习"卡；ep18+ 显示"暂无音频"降级态 |
 
-## 设计语言（深夜电影感精听）
+## 设计语言（清淡简洁 · Swiss/Minimal）
 
-- **配色**：暖墨黑底 `#15120d` + 纸感米色 `#ece1cd` + **琥珀金单点强调** `#e6ad5c`；细微胶片颗粒 + 顶部暖光。
-- **字体**：英文句子用文学衬线 **Newsreader**（精听的主角）；UI 用 **Hanken Grotesk**；中文用 **Noto Serif SC**。
-- **原则**：单一强调色、移动优先、内容（英文句子）为视觉主体；克制、不镀金。
+- **配色**：浅暖纸白底 `#f8f6f1` + 墨色文字 `#2a2724` + **单一柔和赭石强调** `#a4662b`；细发丝线分隔，无颗粒/暗角/发光。
+- **字体**：英文句子用文学衬线 **Newsreader**（精听的主角，唯一的表现型元素）；UI 用干净的 **Public Sans**；中文用 **Noto Sans SC**。
+- **原则**：大量留白、高对比、单一强调色、移动优先；当前句靠"墨色加深 + 字号 + 细赭石标记"区分，不靠重特效。
+- **可访问性**：焦点可见态、`cursor-pointer`、44px 触控区、文字对比 ≥4.5:1、`prefers-reduced-motion` 降级、图标按钮带 `aria-label`。
 
 > 颜色 / 字体 / 间距都用 CSS 变量（`:root`）集中定义，迁移进 go-app 时整段 `:root` + 组件样式可直接复用。