這個網站沒有框架、沒有 build、沒有後端——整個站就是一個 .html 檔：雙擊能開、離線能看、隨身碟帶得走。底下是它的設計語言，以及可以直接照抄的規範與骨架。
0. 五條核心原則
- 一個檔案就是全部：HTML +
<style>+<script>塞在一起，沒有 npm、沒有打包、沒有 CDN。 - 深色優先：近黑 canvas + 四階表面製造層次，不靠陰影。
- 一個強調色：全站只有一個品牌色，而且節制使用。畫面上任何藍紫色都在說「這裡重要」。
- 語意色不算裝飾：成功 / 警告 / 危險，以及訓練區間 Z1–Z5，因為攜帶資訊所以可以自由用。
- hairline 取代卡片陰影：1px 分隔線就夠，不要 box-shadow 堆疊。
1. 色票
--bg#010102 頁面底
--card#0f1011 一級卡片
--card2#141516 次級區塊
--card3#18191a 三級
--line#23252a hairline
--txt#f7f8f8 主文
--mut#8a8f98 說明
--acc#5e6ad2 品牌色
--acc2#3fb950 成功 / Z2
--z3#d29922 節奏
--z4#f85149 閾值
--z5#bc4bff VO2
強調色只出現在四個地方：品牌字、關鍵數字（FTP / 倒數）、分頁 active、目標功率。其他一律用文字三階拉層次。
2. 字體與節奏
font-family: "SF Pro Display","SF Pro Text",-apple-system,
"Segoe UI","Microsoft JhengHei",sans-serif;
font-size: 15px; line-height: 1.5;
letter-spacing: -0.011em; /* 內文：微負字距 */
h1,h2,h3 { letter-spacing: -0.02em; font-weight: 600 }
- 字重只用 500 / 600 / 700，不用 800 以上。
- 圓角：卡片 12px、區塊 8px、標籤 6px。
- 間距：一律 4 的倍數。
3. 版面骨架
- sticky header：半透明 +
backdrop-filter: blur(12px)，扁平、無陰影。 - 分頁＝一排按鈕切
.tab的 display，不用路由。 - 手風琴：週 → 日 兩層摺疊，靠
classList.toggle('open')，不用動畫套件。 - 內容最大寬 1100px，手機直接單欄不另寫版本。