最後整合任務
交付：完成可切換且 Light/Dark 都具可讀性與鍵盤焦點的主題頁。
將同一組責任轉用到另一個商家情境，仍達成：完成可切換且 Light/Dark 都具可讀性與鍵盤焦點的主題頁。
限制：不新增框架。；保留 module id 與驗收證據。
INTEGRATED LAB · Starter
字型、尺度與主題 token｜整合 Lab
在同一份章節作品中整合 4 個 module，排除單項通過但組合失敗的問題。
依序回看每個 topic
整合不是重新背一遍名詞；是把每個 topic 的責任放回同一份作品。
- 1. 系統字型 fallback
files/starter/style.css｜runtime before=serif；after 字串包含 system-ui 與 sans-serif；property=font-family
回到 topic 說明 - 2. rem、em、ch 與可讀行長
files/starter/style.css｜runtime before=16px、after=20px、property=font-size；Styles 另可指出 padding:1em 與 max-width:60ch
回到 topic 說明 - 3. 用途型 CSS token
files/starter/style.css｜runtime before=rgb(255, 255, 255)、after=rgb(217, 238, 243)、property=background-color
回到 topic 說明 - 4. 完整 Light／Dark 主題對照
files/starter/style.css｜runtime before=light、after=dark、attribute=data-theme；視覺上 surface/text/border/action/focus tokens 同步改變，storage catch 不產生未處理錯誤
回到 topic 說明
四個整合停點
每個停點都要留下檔案、畫面或瀏覽器證據。
Step 1｜觀察整合 Starter 並找出第一個未通過 module。
檔案：
files/starter/index.html定位：#observe操作：逐項讀取 outcomes，執行一次現況操作。
// OBSERVE：不修改程式，先記錄第一個失敗 moduleId。預期：能指出第一個未通過 module。
證據：第一個 moduleId 與缺少的 evidence。
卡住先查：確認開啟的是 files/starter/index.html。
Step 2｜依 module 順序修改，一次只加入一個責任。
檔案：
files/starter/index.html定位：#modify操作：執行實驗替文字切換 system-stack class，讀取 font-family 前後值。 → 執行實驗切換 readable-scale class，讀取 font-size 由 1em 基準轉為 1.25rem 的 computed value。 → 執行實驗切換 alternate-surface class，只覆寫 --surface，讀取同一元件的 computed background-color。 → 執行實驗把主題預覽根節點的 data-theme 由 light 設為 dark；再以 safeRead/safeWrite 測試 storage 失敗仍回退 light。
// 06-01-fallback: 執行實驗替文字切換 system-stack class，讀取 font-family 前後值。 // 06-02-rem-em-ch: 執行實驗切換 readable-scale class，讀取 font-size 由 1em 基準轉為 1.25rem 的 computed value。 // 06-03-css-token: 執行實驗切換 alternate-surface class，只覆寫 --surface，讀取同一元件的 computed background-color。 // 06-04-light-dark: 執行實驗把主題預覽根節點的 data-theme 由 light 設為 dark；再以 safeRead/safeWrite 測試 storage 失敗仍回退 light。預期：完成可切換且 Light/Dark 都具可讀性與鍵盤焦點的主題頁。
證據：runtime before=serif；after 字串包含 system-ui 與 sans-serif；property=font-family；runtime before=16px、after=20px、property=font-size；Styles 另可指出 padding:1em 與 max-width:60ch；runtime before=rgb(255, 255, 255)、after=rgb(217, 238, 243)、property=background-color；runtime before=light、after=dark、attribute=data-theme；視覺上 surface/text/border/action/focus tokens 同步改變，storage catch 不產生未處理錯誤
卡住先查：回到第一個未通過的 module，只修該處。
Step 3｜驗證所有 module 在整合後仍成立。
檔案：
files/solution/index.html定位：#verify操作：重新整理並依 outcomes 順序重跑所有證據。
// VERIFY：逐項記錄 pass/fail，不以看到畫面代替 evidence。預期：4/4 module 通過。
證據：每個 moduleId 都有實際結果與重設後重現紀錄。
卡住先查：若失敗，回到第一個失敗 module，不同時修多項。
Step 4｜把本章責任轉用到不同內容情境。
檔案：
files/starter/index.html定位：#challenge操作：替另一個商家情境重做，仍達成：完成可切換且 Light/Dark 都具可讀性與鍵盤焦點的主題頁。
// CHALLENGE：只替換內容與資料，不新增框架或跳過 self-check。預期：完成可切換且 Light/Dark 都具可讀性與鍵盤焦點的主題頁。
證據：轉用後的作品與全數 module self-check。
卡住先查：先確認共同基底與 module id 未被改壞。
完成本階段後，重新載入並保存整合證據。
回到自主學習入口