349 対話のHTML　出力プロンプト

以下の【対話データ】と【各種リンクデータ】を使用して、見やすく構造化された1つのHTMLファイルを作成してください。
作成にあたっては、必ず以下の【HTML/JS構造の指定】に従い、具体的なタグやID、クラス名、CSS変数をそのまま使用してください。

### 【HTML/JS構造の指定（厳守事項）】

**1. `<head>`内の指定（セキュリティとMathJax）**
- 悪意のあるリダイレクトを防ぐため、`polyfill.io` は絶対に記述しないこと。
- MathJaxは以下の安全なタグのみを使用すること。
`<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>`

**2. `<style>`の指定（カラー変数・ダークモード・数式スタイル）**
以下のCSS変数とクラスを定義して適用すること。
- `:root` にカラー変数を設定: `--bg-color: #f8f9fa ;`, `--text-color: #000 ;`, `--box-bg: #fff ;`, `--box-border: #ddd ;`, `--user-bg: #e6f7ff ;`, `--ai-bg: #f6ffed ;`
- `body.dark-mode` で変数を上書き: `--bg-color: #121212 ;`, `--text-color: #ffffff ;`, `--box-bg: #1e1e1e ;`, `--box-border: #333 ;`, `--user-bg: #1a2a3a ;`, `--ai-bg: #1e3a1e ;`
- `body`:
- `font-size: var(--base-font-size, 22px);`
- 背景色 `var(--bg-color)`、文字色 `var(--text-color)`、最大幅 `800px`、中央寄せ、適切な余白。
- UI要素やメッセージ枠などの背景・境界線にはすべて上記のCSS変数を使用すること。
- **数式スタイル強制上書き用CSS**:
- `body.force-inline mjx-container[display="true"] { display: inline-block !important; margin: 0 !important; }`
- `body.force-display mjx-container { display: block !important; text-align: center !important; margin: 1em 0 !important; }`

**3. `<body>`内の構造指定**
必ず以下の順番とタグ構造で出力すること。
```html
<body>
<!-- 1. 設定UI -->
<div class="settings-ui" style="background-color: var(--box-bg); border: 1px solid var(--box-border); padding: 15px; margin-bottom: 20px; border-radius: 8px;">
<div class="settings-row" style="margin-bottom: 10px;">
<label for="font-size-slider">文字サイズ:</label>
<input type="range" id="font-size-slider" min="10" max="40" value="22" step="1">
<span id="font-size-display">22px</span>
</div>
<div class="settings-row" style="margin-bottom: 10px;">
<label for="math-style-selector">数式スタイル:</label>
<select id="math-style-selector">
<option value="default">標準（自動）</option>
<option value="force-inline">全てインライン（テキスト内埋め込み）</option>
<option value="force-display">全て独立行（ディスプレイ）</option>
</select>
</div>
<div class="settings-row">
<select id="ai-selector">
<option value="AI Studio">AI Studio</option>
<option value="Chat GPT">Chat GPT</option>
<option value="Claude">Claude</option>
</select>
<button id="download-btn">この対話を保存</button>
<button id="dark-mode-btn">背景・文字色を反転</button>
</div>
</div>

<!-- 2. 先頭のリンク -->
<div class="link-section" id="top-links">
<h3>【関連リンク】</h3>
<ul><!-- 【提供したリンク】のリスト --></ul>
</div>

<!-- 3. 対話本文 -->
<div id="chat-content">
<div class="message user" style="background-color: var(--user-bg);">
<h3>ユーザー</h3>
<p><!-- ユーザーのテキスト --></p>
</div>
<div class="message ai" style="background-color: var(--ai-bg);">
<h3>AI</h3>
<p><!-- AIのテキスト --></p>
</div>
</div>

<!-- 4. 本文内の抽出リンク -->
<div class="link-section" id="inline-links">
<h3>【本文内リンク】</h3>
<ul><!-- 抽出したリンク --></ul>
</div>

<!-- 5. PDFリンク -->
<div class="link-section" id="pdf-links">
<h3>【読み込みPDFリンク先】</h3>
<ul><!-- 【PDFのリンク】 --></ul>
</div>

<!-- 6. JavaScript -->
<script>
// ここに指示通りJSを記述する
</script>
</body>
```

**4. `<script>`内のJavaScript処理指定**
以下の4つのロジックを必ず実装すること。

1. **文字サイズ変更**: `font-size-slider` の入力値で `document.documentElement.style.setProperty('--base-font-size', value + 'px')` を更新し、表示も更新する。
2. **数式スタイル変更**: `math-style-selector` の値に応じて、bodyの `force-inline` または `force-display` クラスを付与/削除する。
3. **ダークモード切替**: `dark-mode-btn` クリック時、`document.body.classList.toggle('dark-mode')` を実行。
4. **ダウンロード処理**: `download-btn` クリック時、日時から `YYYYMMDDHHMMSS` を生成し、AI名と結合してファイル名を作成。HTML全体をBlob化して一時的な `<a>` タグでダウンロード実行。

---

### 【データ入力欄】

**【提供したリンク】（先頭に配置）**
（※ここに先頭に置きたいリンクとタイトルを貼り付けます）


**【対話データ】（本文）**
（※ここに対話のテキストを貼り付けます）


**【PDFのリンク】（最後に配置）**
（※ここに読み込ませたPDFのリンクを貼り付けます）


---
**【出力に関する指示】**
上記の条件と指定コード構造をすべて満たした、**完全なHTMLコードのみ**をMarkdownのコードブロック（```html ... ```）で囲んで出力してください。説明や挨拶は不要です。