AIの答えを、
1枚の図解にする。

押すと、下の文章がまるごとコピーされます

これまでの内容を、1枚のHTMLにまとめて出力してください。

【いちばん大事なこと】
文章をそのままHTMLに貼らないでください。段落をタグに置き換えただけのものは図解ではありません。
まず内容の構造を見つけて、下の5つの型のうち「合うものだけ」1〜3個に流し込んでください。

【型】
1. 手順   … 順番があるとき。番号つきの縦並び
2. 流れ   … 入口→処理→出口があるとき。横並びの箱と矢印。要点の箱だけ枠線を accent 色にする
3. 比較   … 前後・良し悪しがあるとき。左右2枚のカード
4. 表     … 項目×観点で並ぶとき
5. 数字   … 効果が数字で言えるとき。数字だけ大きく出す
迷ったら「手順」にしてください。使わない型は入れないでください。

【出力の決まり】
- HTMLファイル1枚。CSSは <style> に内包。外部ファイル・CDN・画像は使わない
- 冒頭に「結論」を1〜2文で置く
- 元の内容にない数字・手順を足さない。足りない情報があるなら、書く前に質問する
- 箱の中の見出しは1行。説明は1文まで
- 絵文字を装飾に使わない

【見た目の決まり】
影・グラデーションを使わない。面の色の差と1pxの線だけで階層を作る。
有彩色は #5e6ad2 の1色だけ。角丸は 8px（カードは12px）。
フォントは system-ui と Noto Sans JP。

ダークとライトの両方に対応させ、右上に「システム / ライト / ダーク」の3択ボタンを付けてください。
色は必ず下の変数を経由して書いてください（色を直接書かないこと）。

:root{
  --canvas:#010102; --s1:#0f1011; --s2:#141516;
  --hair:#23252a; --hair-strong:#34343a;
  --ink:#f7f8f8; --ink-muted:#d0d6e0; --ink-subtle:#8a8f98;
  --accent:#5e6ad2;
}
:root[data-theme="light"]{
  --canvas:#ffffff; --s1:#f8f9fa; --s2:#f1f2f4;
  --hair:#e4e6e9; --hair-strong:#d0d3d8;
  --ink:#101113; --ink-muted:#3f434a; --ink-subtle:#6b7078;
  --accent:#5e6ad2;
}

3択ボタンは、押した内容を localStorage に保存し、
「システム」のときだけ端末の設定に合わせてください。
テーマを決めるスクリプトは <head> の中（body より前）に置いてください。
後ろに置くと、開いた瞬間に色がちらつきます。

横に長い表は、ページごと横スクロールさせず、表の入れ物の中だけでスクロールさせてください。