演習（第5部）
実践テーマは「条件付きで見た目を変える」練習が中心です。
- ダークモード: §18.3 の
@custom-variant dark (&:where(.dark, .dark *))を設定し、<html>に.darkを付け外しして配色が切り替わるカードを作ってください。さらに、dark:をベタ書きする版と、セマンティックトークン（bg-surfaceなど）で切り替える版の両方を書き、違いを体感しましょう（§18.5）。 - フォームの状態: メール入力欄を作り、
focus:で枠を強調し、peer＋peer-invalid:で不正時にエラーメッセージを表示してください（§20.3）。 - アクセシビリティ点検: アイコンだけのボタンに
sr-onlyでラベルを付け、focus-visible:でフォーカスリングを出してください。outline-noneだけで終わらせていないか確認しましょう（§21.2・§21.3）。