这个页面本身就是演示：12 列栅格、1.25 倍字阶、单一强调色。所有间距都从同一组变量派生，改一个数就能整站联动。
移动端把 12 列折叠成 6 列，字阶不变——保证同一份内容在手机上仍保持层级关系。
纵向间距取 8 的倍数：8 / 16 / 24 / 40 / 64。模块之间用 40，段落之间用 16，标题与正文用 8。
改版时最容易崩的是「随手写个 margin」，所以这里把间距写进变量，页面上不出现临时数值。
| 变量 | 值 | 用途 |
|---|---|---|
| --s1 | 8px | 标题与正文 |
| --s2 | 16px | 段落之间 |
| --s3 | 24px | 列表项内 |
| --s4 | 40px | 模块之间 |
| --s5 | 64px | 大区块分隔 |
| 整页缩放到 390px | 标题不换行成孤字、表格不横向溢出 |
| 把强调色换掉 | 只改一个变量，全站强调色同步 |
| 随机抽三处间距 | 都落在 8 的倍数上 |