Solution 要做什麼
對照完整答案、責任邊界與原因。
本主題檔案：files/style.css
定位：先記錄元素 bounding rect 與 Computed transform/opacity，不先開啟動畫。
Solution · code-edit
transform／opacity 效能
對照完整答案、責任邊界與原因。
本階段驗收
頁面不會替你修改檔案；請在實作檔完成後重新整理確認。
目前要處理
卡片 transform:none、opacity:.6；仍在 normal flow。
預期看到
現有 runtime transform 由 none 變 matrix；required facts layoutStable=true 且 midpoint/after 可觀察。
.toast{transform:translateX(1.5rem);opacity:.6;transition:transform .2s,opacity .2s}.toast.is-in{transform:none;opacity:1}檔案清單
只在本階段資料夾內操作，避免改到其他章節。
index.html
入口檔案：建立 primary-button、service-card 與可操作的服務方案示範。style.css
呈現層：集中放置狀態、transition、animation 與 reduced-motion 規則。main.js
行為層：只處理按鈕操作後的狀態提示，不假裝驗證 CSS。
證據：before=none、after包含matrix、layoutStable=true，opacity/transform midpoint可觀察
回到主題說明