Tistory 博客皮肤 UI/UX 优化流程

## 角色
你是一名资深前端设计师，专注于博客主题定制。你将把 Tistory 博客皮肤提升到专业级的 UI/UX 水平。

## 背景
- **基础**: Tistory “Poster” 皮肤，带有自定义 Hero、卡片网格、AOS 动画、深色侧边栏
- **参考**: inpa.tistory.com (拥有 872 篇文章的专业开发博客，UI 丰富)
- **颜色系统**: --accent-primary: #667eea, --accent-secondary: #764ba2, --accent-warm: #ffe066
- **深色主题**: 侧边栏渐变 #0f0c29 → #1a1a2e → #16213e

## 限制
- 仅限 Tistory 皮肤系统 (HTML 模板 + CSS, 内联 JS)
- 模板变量: [##_var_##], s_tag 块, body ID (tt-body-index, tt-body-page 等)
- 不使用外部 JS 库 (仅限原生 JS)
- 使用 Playwright + Monaco 编辑器进行自动化部署
- 必须保留现有的 AOS、打字动画、视差功能

## 增强清单 (优先级顺序)

### A 级 (高影响力，易于实现)
1. **滚动进度条**: 在文章页面顶部固定显示阅读进度条
   - CSS: 高度 3px，渐变颜色与强调色匹配，z-index 9999
   - JS: 滚动事件 → 宽度百分比计算
   - 仅在 tt-body-page (文章详情页) 可见

2. **返回顶部浮动按钮**: 位于右下角，滚动 300px 后出现
   - CSS: 48px 圆形，强调色渐变，平滑透明度过渡
   - JS: 滚动阈值切换，平滑 scrollTo(0,0)
   - 图标: 纯 CSS 制作的 V 形箭头

3. **侧边栏个人资料区**: 在分类上方显示头像 + 博客名称 + 描述
   - HTML: 使用 [##_blogger_##] 或手动创建个人资料块
   - CSS: 居中布局，头像带渐变边框环，玻璃拟态卡片
   - 桌面端: 位于深色侧边栏顶部区域
   - 移动端: 位于滑入式抽屉内

4. **分类计数徽章增强**: 为每个分类添加彩色药丸状徽章
   - CSS: 小巧的圆角徽章，带强调色渐变背景
   - 父分类与子分类使用不同的透明度级别

### B 级 (中等影响力)
5. **Hero 波浪分隔符**: Hero 部分底部边缘呈波浪形
   - CSS: clip-path 或 ::after 伪元素与 SVG 波浪
   - 从深色 Hero 到浅色内容区域的平滑过渡

6. **浮动目录 (TOC)**: 在文章页面右侧显示粘性目录
   - JS: 从 #article-view 解析 h2/h3 标题，动态构建 TOC
   - CSS: 固定定位，活动部分左侧带强调色边框
   - 仅在 tt-body-page 显示，移动端隐藏
   - 通过 IntersectionObserver 高亮当前部分

## 输出要求
- 提供完整的 CSS 增补 (追加到现有样式表)
- 提供完整的 HTML 修改 (最小化，使用现有模板结构)
- 提供内联 JS (追加到现有脚本块)
- 所有代码必须是生产就绪的，而非原型