かわいいプロフィールサイトを AI でつくる

次の人の、SNS のプロフィール欄に貼るリンクの行き先になるプロフィールページを、1 ページでつくってください。

本人のこと（見本のページの例。依頼の内容で置きかえる）:
みお（@mio_mogumogu）。大学2年で、パン屋さんめぐりと夜ふかしのゲームが好き。Instagram に食べたパンの記録、TikTok に 60 秒の食レポ、X に夜中のひとりごと、それとパンの地図。パステルで、ちょっとふざけた感じに

入れるもの（依頼に合わせて、足したり外したりしてかまいません）:
- いちばん上に、アイコン、名前かハンドルネーム、@ID、ひとこと（1〜2 行）。アイコンは絵文字か頭文字のステッカー。画像の URL が依頼にあれば、その画像
- そのすぐ下に、SNS などのリンクを 3〜5 個。行き先の名前（Instagram、TikTok など）と、そこに何があるかを短く。スマホの最初の画面に、名前とリンクが入るように
- 「すきなもの」のタグと、「わたしのこと」の短い質問と答え
- ちょっとした遊びを 1 つ（見本は、ボタンを押すたびに「どうでもいい情報」が 1 つ出る）。遊びの中身はページのデータ（<script type="application/json" data-cvk-slot="facts">）に書く
- 最後に「このページのリンクをコピー」のボタン
- リンクは HTML に直接書く（スクリプトでつくらない）

事実の扱い:
- 名前・@ID・リンク先は、依頼に書かれたものだけを使う。上の例（見本のページ）の名前・@ID・リンク・すきなもの・遊びの中身は、依頼の人のものではないので使わない。名前が書かれていなければ「なまえ」、リンク先が書かれていなければ "#" にする（仮のものはこの 2 つだけ）。@ID が書かれていなければ載せない。実在の人の名前はつくらない
- @ID とリンク先の URL は、依頼に書かれたとおりに 1 文字ずつ写す。「_」「.」や数字も、そのあとに続く文字も ID の一部なので、削ったり短くしたり、それらしく整えたりしない
- SNS などのリンクは、依頼に書かれたものだけを並べる。リンクの説明も、書かれていなければつけない。依頼にリンクが 1 つもなければ、仮のリンク（"#"）を 1 つ
- ひとこと・すきなもの・わたしのこと・遊びは、依頼に書かれたことからつくる。書かれていない好みや出来事はつくらない。依頼に何もない欄は、見出しごと入れない。「ここに書く」「すきなものを書く」のような、書き方を指示する仮の文字は書かない
- 遊び（見本の「どうでもいい情報」）は、依頼に事実か好きなものが 2 つ以上あるときだけ、その中からつくる。なければ遊びもデータ（data-cvk-slot="facts"）も入れない
- 雰囲気や色の指定（「パステルで」「黒と赤で」など）は見た目だけを変える。欄も、好きなものも、リンクも足さない
- 住所、学校名、電話番号、生まれた年は載せない

デザイン（このページの DESIGN.md。毎回これに従う）:
- 見た目は依頼にいちばん近いものを 1 つ選ぶ。色やモチーフの指定があれば、その見た目の色を差し替える
  - A ゆるパステル（指定がないとき）: 背景 #FFF4F8 に淡い水玉、面 #FFFFFF、文字 #3B2440、薄い文字 #6B4F70、淡いアクセント #FFD9E6 と、淡い水色・黄色・黄緑。線は 2px の文字色、角丸 20px、ボタンとカードに 3px ずらした影。フォント Zen Maru Gothic（500 と 700）
  - B バンドっぽい: 背景 #0E0E10、面 #1A1A1E、文字 #F4F1EA、薄い文字 #B9B4AA、アクセント #E0262B（ボタンの面。上の文字は #FFFFFF）。角は 0〜4px、2px の線。見出しは、ガムテープのように少し斜めに貼ったラベルにして、カードのすぐ上に置く（カードの中に入れず、カードの内側の余白は上下左右そろえる）。見出し Dela Gothic One、本文 Zen Kaku Gothic New
  - C 白黒クール: 背景 #F7F7F5、面 #FFFFFF、文字 #111111、薄い文字 #55575C、線 #D9D9D6。アクセントの色は使わず、文字の太さと大きさで差をつける。角丸 12px、1px の線。フォント Noto Sans JP（400 と 800）
- 色は CSS 変数（--bg、--surface、--ink、--muted、--accent、--line）にまとめる。差し替えた色でも、文字と背景のコントラストは 4.5:1 以上
- 文字: 名前 32px、見出し 20px、本文 16px、補足 14px。本文の行の高さ 1.7。日本語は word-break: auto-phrase にして、ことばの途中で折り返さない
- 余白は 4px の倍数（4・8・12・16・20・24・32・40・48）。まとまりの中は 8〜12px、まとまりのあいだは 32px 以上。カードの内側の余白は上下左右をそろえる
- 幅は最大 480px で中央に。名前・@ID・ひとことは中央寄せ、3 行をこえる文は左寄せ
- 名前とリンクだけのような短いページでも、できあがって見えるように。いちばん上とリンクのまとまりを、最初の画面（下の Convika のバナーの上）の縦の中央に置き、リンクが 1〜2 個ならボタンを大きく（高さ 72px ほど）する
- 動き: 表示されるときに 0.4 秒でふわっと出る、押したときに 2px 沈む。prefers-reduced-motion のときは動かさない
- リンクとボタンは、どれも高さも幅も 44px 以上（min-height: 44px。Tailwind なら min-h-[44px]）で、となりと 8px 以上あける。リンクの文字は行き先がわかることばにする（「詳細」「こちら」にしない）。ボタンの文字は 1 行。横にスクロールしない。長い @ID は折り返す
- 避けること: SNS のロゴの画像やブランドの色、アイコンだけのリンク、柄の上の読みにくい文字、文字のグラデーション、画面の下に固定するもの（Free のページは、いちばん下に Convika のバナーが出る）、いちばん上の長い自己紹介
- 文章は本人の口調で、短く

HTML ファイル 1 つで、CSS と JavaScript もその中に書いてください。入力された内容はどこにも送らず、画像ファイルは使わないでください。スマホの縦画面でも使えるようにしてください。画面のいちばん下の右側はあけておいてください。応援ボタンが出ることがあります。

上の内容は見本です。しくみや画面の組み立て、雰囲気はそのままに、次の希望に合わせて中身を変えてください。
つくりたいもの：＿＿＿