四階段使用同一份檔案骨架。Checkpoint 只逐項完成任務，Solution 不加入延伸功能。
| 任務 | 完成標記 | 修改檔案 | 修改位置 | 可見結果 |
|---|---|---|---|---|
| TASK-01 | DONE-01 | style.css | .cta-button、:hover、:active、:focus-visible | 按鈕有平順位移、按壓回饋與焦點框 |
| TASK-02 | DONE-02 | style.css | .status-pill 與 @keyframes status-pulse | 處理中標籤以淡入淡出提示狀態 |
| TASK-03 | DONE-03 | style.css | @media (prefers-reduced-motion: reduce) | 系統偏好減少動態時取消轉場與動畫 |
六個微實驗證據索引
- TASK-01｜Focus-visible：用 Tab 聚焦
.cta-button，證明:focus-visible的 outline 是可見焦點線索，不只依賴 hover 或顏色。 - TASK-01｜Transition：比較 transition 放在一般狀態與只放在
:hover的進場／退場差異，並指出只 transition 會變化的屬性。 - TASK-02｜Keyframes：比較 transition 不會自行循環、
@keyframes status-pulse可以播放時間分鏡，並觀察 opacity 變化。 - TASK-02｜Animation vs transition：切換 hover 版與 animation 版，說明狀態切換與自動播放的觸發差異。
- TASK-03｜Reduced motion：開啟 reduced-motion，確認 transition 與 animation 停止或縮短，但 CTA 仍可操作、焦點框仍可見。
- TASK-03｜狀態訊息 vs 動態裝飾：並排比較一般模式與 reduced-motion，指出「作品正在準備」文字與焦點證據仍然存在。
階段差異
starter/：三項 TASK 都保留，先讀骨架與預測結果。checkpoint-1/：只完成 DONE-01。checkpoint-2/：保留 DONE-01，再完成 DONE-02。solution/：只在相同位置完成 DONE-03；沒有無關重構。
人工驗收
錄下滑鼠、鍵盤與 reduced-motion 三種操作，並口頭說明哪一個是 transition、哪一個是 animation。