資料キット

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

これまでの内容を、そのまま人に見せられる1枚の資料HTMLにまとめてください。

【いちばん大事なこと】
文章をそのままHTMLに貼らないでください。段落をタグに置き換えただけのものは資料ではありません。
まず「結論は何か」「章はいくつか」を決めてから書いてください。
そして、下の部品から【3種類まで】選んで組み立ててください。全部使わないこと。

【部品】
1. 要約カード … 要点が3つに絞れるとき。横3枚。いちばん大事な1枚だけ面を明るくする
2. 本文＋補足 … 説明が続くとき。本文は幅68文字で止め、補足・注意は右の箱に逃がす
3. 段組     … 3つの段階・手順があるとき。横3列
4. 対比     … やる/やらない・前/後があるとき。左右2枚のカード
5. 表       … 項目×観点で並ぶとき。横長になるなら表の入れ物の中だけでスクロールさせる
6. 年表     … 時系列があるとき。縦1本の線に沿って並べ、重要な行だけ点を accent 色にする
7. 出典     … 根拠を示したいとき。実在するURLだけ書く

【構成】
- 冒頭に結論を1〜2文。ここを読むだけで用が足りるように書く。前置きから始めない
- 上部に固定ナビを置き、章へのリンクにする（4〜8個まで）
- 見出しは体言止めにせず、短くていいので文にする
- 最後に「まとめ」を置く。新しい情報をそこで足さない

【書いてはいけないこと】
- 元の内容にない数字・手順・出典を作らない。足りないなら、書く前に質問する
- 確かなことと、伝聞・推測・未確認を混ぜない。分けて書く
- 絵文字を装飾に使わない

【確度を示すバッジ】
確かさに差があるときは、小さなバッジを付けてください。色は変えず、先頭の丸の形で分けます。
- 確定 … 丸を塗りつぶす
- 自己申告 … 丸を中空（細い実線の輪）にする
- 未確認 … 丸を破線の輪にする

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

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

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

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

HTMLファイルは1枚。CSSは <style> に内包し、外部ファイル・画像は使わないでください。
幅375pxのスマホでも、ページごと横スクロールしないようにしてください。