四階段使用同一份檔案骨架。Checkpoint 只逐項完成任務，Solution 不加入延伸功能。
| 任務 | 完成標記 | 修改檔案 | 修改位置 | 可見結果 |
|---|---|---|---|---|
| TASK-01 | DONE-01 | style.css | :root、.work-card、.work-card__button | Computed 顯示卡片 padding 24px、按鈕背景 rgb(12, 118, 86)，來源由 --space-card 與 --color-brand 控制 |
| TASK-02 | DONE-02 | style.css | .legacy-note 與 .work-card__text | 卡片說明使用元件級顏色，#portfolio p 不再覆蓋，.legacy-note 仍維持獨立責任 |
| TASK-03 | DONE-03 | index.html、style.css | 按鈕 class 與狀態規則 | 舊 class 搜尋為 0，新 class 同時保留基本、hover 位移與 focus-visible 輪廓 |
階段差異
starter/：三項 TASK 都保留，先讀骨架與預測結果。checkpoint-1/：只完成 DONE-01。checkpoint-2/：保留 DONE-01，再完成 DONE-02。solution/：在 HTML 與 CSS 同步完成真實 class rename，並刪除舊按鈕規則；沒有無關重構。
人工驗收
提交以下六項證據，讓畫面結果與 CSS 責任可以互相對照：
- TASK-01 變數 vs 硬編碼：把未使用的
--brand、--space語意化為--color-brand: #0c7656、--space-card: 24px，Computed 顯示卡片padding: 24px與按鈕rgb(12, 118, 86)。 - TASK-01 Computed vs 原始碼：從 Computed 的
var()回到 Styles 的:root宣告，暫改--space-card為30px後確認只影響卡片，再改回24px。 - TASK-02 specificity vs scope：停用
#portfolio p，在.work-card__text看到元件規則生效，且沒有用!important。 - TASK-02 頁面規則 vs 元件規則：確認
#proof的.legacy-note與.work-card__text各自保留責任，#portfolio p不再存在於 Solution。 - TASK-03 rename call sites：HTML 與 CSS 的
work-card__button搜尋結果皆為 0，work-card__action同時存在於兩側。 - TASK-03 state rules：滑鼠 hover 看到位移，Tab focus 看到
focus-visible輪廓，DevTools 能指出新 class 的基本、hover、focus 規則。