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