同一份讲义，生成、追加与修复

只处理本消息提供的材料，不调用工具、不读取任何其他文件、不访问网络。只返回完整单文件 HTML，不要 Markdown 围栏或解释。
我在准备面向零基础同事的 AI 分享。把下面讲义做成清楚、紧凑的一页讲义网页，内容先讲“模型与应用、训练与当前输入、Token”这三组概念，暂不讲缓存。
要求：每组先显示一句可独立理解的解释，补充解释默认折叠；有“展开全部/收起全部”控件；手机可读，无外部依赖；来源以可点击链接保留；不要杜撰价格、窗口或模型实测。页面标题“第一次用 AI，先弄懂这三件事”。不要把设计需求、验收要求或开发说明显示为网页内容。使用语义化 HTML，原生交互可用键盘操作。
材料：
AI 入门分享 · 已核对的讲义材料

模型与应用：AI 是人工智能，一类技术的总称。GPT 是模型家族；ChatGPT 是产品。Codex 组织模型与工具完成任务。应用名称不等于本次使用的具体模型。
训练与当前输入：训练调整模型参数，形成处理能力。使用时，文章、任务要求和相关对话组织成上下文。补充一次要求通常不会当场改变模型参数。
Token：文本经切分得到 Token，中文常译词元；Token 对应编号，再转成可计算的数值表示。一个 Token 不固定等于一个汉字。本文不规定具体模型的窗口或价格。
缓存（追加时使用）：满足相同前缀、长度、保留等服务条件时，提示缓存可能复用中间计算；新内容和新回答仍要计算。缓存输入仍占上下文容量，缓存不等于旧答案或永久记忆。

知识核对来源：
https://sspai.com/post/107236
https://learn.chatgpt.com/docs/models
https://developers.openai.com/api/docs/guides/prompt-caching
以上为本课独立改写的事实摘要，链接用于追溯，不要求本次联网读取。

只处理本消息提供的材料和已有 HTML，不调用工具、不读取文件、不联网。只返回修改后的完整单文件 HTML，不要解释或 Markdown。
下面是上一版讲义。这次是内容更新，不是让你假装上一版有错误。
请保留原有三组内容、手机布局、可折叠交互和来源，再追加第四组“缓存”。把标题更新为四件事。新增一句话须解释“复用部分重复计算，仍占上下文容量”；补充说明新输出仍生成、缓存不是永久记忆、条件依服务而定。
新增打印样式：即使屏幕上内容收起，打印时也必须呈现所有补充解释；打印页面不要有操作按钮。不要显示这些制作要求。
核对材料：
AI 入门分享 · 已核对的讲义材料

模型与应用：AI 是人工智能，一类技术的总称。GPT 是模型家族；ChatGPT 是产品。Codex 组织模型与工具完成任务。应用名称不等于本次使用的具体模型。
训练与当前输入：训练调整模型参数，形成处理能力。使用时，文章、任务要求和相关对话组织成上下文。补充一次要求通常不会当场改变模型参数。
Token：文本经切分得到 Token，中文常译词元；Token 对应编号，再转成可计算的数值表示。一个 Token 不固定等于一个汉字。本文不规定具体模型的窗口或价格。
缓存（追加时使用）：满足相同前缀、长度、保留等服务条件时，提示缓存可能复用中间计算；新内容和新回答仍要计算。缓存输入仍占上下文容量，缓存不等于旧答案或永久记忆。

知识核对来源：
https://sspai.com/post/107236
https://learn.chatgpt.com/docs/models
https://developers.openai.com/api/docs/guides/prompt-caching
以上为本课独立改写的事实摘要，链接用于追溯，不要求本次联网读取。

已有 HTML：
<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="color-scheme" content="light">
  <meta name="theme-color" content="#f5f7fb">
  <title>第一次用 AI，先弄懂这三件事</title>
  <style>
    :root {
      --bg: #f5f7fb;
      --surface: #ffffff;
      --text: #172033;
      --muted: #5e687a;
      --line: #dfe4ed;
      --accent: #3157d5;
      --accent-soft: #eef2ff;
      --shadow: 0 10px 30px rgba(27, 39, 75, 0.07);
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
        "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    }

    * {
      box-sizing: border-box;
    }

    html {
      background: var(--bg);
      color: var(--text);
      line-height: 1.65;
    }

    body {
      margin: 0;
    }

    a {
      color: var(--accent);
      text-underline-offset: 0.18em;
      overflow-wrap: anywhere;
    }

    button,
    summary {
      font: inherit;
    }

    button:focus-visible,
    summary:focus-visible,
    a:focus-visible {
      outline: 3px solid rgba(49, 87, 213, 0.28);
      outline-offset: 3px;
    }

    .page {
      width: min(920px, calc(100% - 32px));
      margin: 0 auto;
      padding: 44px 0 32px;
    }

    header {
      margin-bottom: 24px;
    }

    .eyebrow {
      margin: 0 0 6px;
      color: var(--accent);
      font-size: 0.82rem;
      font-weight: 750;
      letter-spacing: 0.08em;
    }

    h1 {
      margin: 0;
      max-width: 760px;
      font-size: clamp(2rem, 6vw, 3.7rem);
      line-height: 1.12;
      letter-spacing: -0.045em;
    }

    .intro {
      max-width: 650px;
      margin: 12px 0 0;
      color: var(--muted);
      font-size: 1rem;
    }

    .toolbar {
      display: flex;
      justify-content: flex-end;
      gap: 8px;
      margin: 18px 0 12px;
    }

    button {
      min-height: 38px;
      padding: 7px 14px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: var(--surface);
      color: var(--text);
      cursor: pointer;
    }

    button:hover {
      border-color: #bdc7da;
      background: #fafbfe;
    }

    .primary {
      border-color: var(--accent);
      background: var(--accent);
      color: #fff;
    }

    .primary:hover {
      border-color: #2648bd;
      background: #2648bd;
    }

    .concepts {
      display: grid;
      gap: 12px;
    }

    article {
      display: grid;
      grid-template-columns: 56px minmax(0, 1fr);
      gap: 16px;
      padding: 20px;
      border: 1px solid var(--line);
      border-radius: 18px;
      background: var(--surface);
      box-shadow: var(--shadow);
    }

    .number {
      display: grid;
      width: 46px;
      height: 46px;
      place-items: center;
      border-radius: 14px;
      background: var(--accent-soft);
      color: var(--accent);
      font-weight: 800;
    }

    h2 {
      margin: 0 0 5px;
      font-size: 1.25rem;
      line-height: 1.3;
    }

    .answer {
      margin: 0;
      font-size: 1.04rem;
    }

    details {
      margin-top: 13px;
      border-top: 1px solid var(--line);
      padding-top: 10px;
    }

    summary {
      width: fit-content;
      color: var(--accent);
      cursor: pointer;
      font-weight: 700;
    }

    details p {
      margin: 9px 0 0;
      color: var(--muted);
    }

    .terms {
      display: flex;
      flex-wrap: wrap;
      gap: 7px;
      margin: 12px 0 0;
      padding: 0;
      list-style: none;
    }

    .terms li {
      padding: 3px 9px;
      border-radius: 999px;
      background: var(--accent-soft);
      color: #2949af;
      font-size: 0.84rem;
    }

    footer {
      margin-top: 26px;
      padding: 18px 2px 0;
      border-top: 1px solid var(--line);
    }

    footer h2 {
      font-size: 1rem;
    }

    .sources {
      display: grid;
      gap: 6px;
      margin: 8px 0 0;
      padding-left: 1.25rem;
      color: var(--muted);
      font-size: 0.92rem;
    }

    .note {
      margin: 10px 0 0;
      color: var(--muted);
      font-size: 0.86rem;
    }

    @media (max-width: 560px) {
      .page {
        width: min(100% - 22px, 920px);
        padding-top: 26px;
      }

      header {
        margin-bottom: 18px;
      }

      .toolbar {
        justify-content: stretch;
      }

      .toolbar button {
        flex: 1;
        padding-inline: 10px;
      }

      article {
        grid-template-columns: 38px minmax(0, 1fr);
        gap: 11px;
        padding: 16px 14px;
        border-radius: 15px;
      }

      .number {
        width: 36px;
        height: 36px;
        border-radius: 11px;
      }

      h2 {
        font-size: 1.13rem;
      }

      .answer {
        font-size: 1rem;
      }
    }

    @media print {
      :root {
        --bg: #fff;
        --shadow: none;
      }

      .page {
        width: 100%;
        padding: 0;
      }

      .toolbar {
        display: none;
      }

      details {
        display: block;
      }

      details > *:not(summary) {
        display: block;
      }

      article {
        break-inside: avoid;
      }
    }
  </style>
</head>
<body>
  <main class="page">
    <header>
      <p class="eyebrow">AI 入门 · 三个基础概念</p>
      <h1>第一次用 AI，先弄懂这三件事</h1>
      <p class="intro">先分清名称、能力从哪里来，以及文字如何进入模型，就能更准确地理解 AI 的回答。</p>
    </header>

    <nav class="toolbar" aria-label="补充解释显示控制">
      <button class="primary" type="button" id="expand-all">展开全部</button>
      <button type="button" id="collapse-all">收起全部</button>
    </nav>

    <section class="concepts" aria-label="三个基础概念">
      <article>
        <div class="number" aria-hidden="true">01</div>
        <div>
          <h2>模型与应用</h2>
          <p class="answer">AI 是一类技术的总称；GPT 是模型家族，ChatGPT 是产品，Codex 则组织模型与工具完成任务。</p>
          <details>
            <summary>补充解释</summary>
            <p>模型提供处理信息的能力，应用负责把模型、界面、工具和工作流程组合起来。因此，应用名称不等于本次实际使用的具体模型。</p>
            <ul class="terms" aria-label="概念对应">
              <li>AI：技术类别</li>
              <li>GPT：模型家族</li>
              <li>ChatGPT：产品</li>
              <li>Codex：任务执行方式</li>
            </ul>
          </details>
        </div>
      </article>

      <article>
        <div class="number" aria-hidden="true">02</div>
        <div>
          <h2>训练与当前输入</h2>
          <p class="answer">训练通过调整模型参数形成处理能力，而你使用时提供的文章、要求和相关对话构成当前上下文。</p>
          <details>
            <summary>补充解释</summary>
            <p>训练影响模型长期形成的能力；当前输入则告诉模型这一次要处理什么。你补充一次要求，通常是在改变本次上下文，不是在当场修改模型参数。</p>
          </details>
        </div>
      </article>

      <article>
        <div class="number" aria-hidden="true">03</div>
        <div>
          <h2>Token</h2>
          <p class="answer">文本会被切分为 Token（词元），映射成编号，再转为模型能够计算的数值表示。</p>
          <details>
            <summary>补充解释</summary>
            <p>Token 是模型处理文本时使用的基本单位，但切分方式并不等同于自然语言中的“字”或“词”。一个 Token 不固定等于一个汉字，具体结果会随所用模型和切分方式而变化。</p>
          </details>
        </div>
      </article>
    </section>

    <footer>
      <h2>知识核对来源</h2>
      <ol class="sources">
        <li><a href="https://sspai.com/post/107236" target="_blank" rel="noopener noreferrer">少数派：AI 入门相关资料</a></li>
        <li><a href="https://learn.chatgpt.com/docs/models" target="_blank" rel="noopener noreferrer">ChatGPT Learning：Models</a></li>
        <li><a href="https://developers.openai.com/api/docs/guides/prompt-caching" target="_blank" rel="noopener noreferrer">OpenAI Developers：Prompt Caching</a></li>
      </ol>
      <p class="note">正文为本课根据核对材料独立改写的事实摘要。</p>
    </footer>
  </main>

  <script>
    (() => {
      const details = [...document.querySelectorAll("details")];
      const setAll = (open) => details.forEach((item) => {
        item.open = open;
      });

      document.getElementById("expand-all").addEventListener("click", () => setAll(true));
      document.getElementById("collapse-all").addEventListener("click", () => setAll(false));
    })();
  </script>
</body>
</html>

只处理本消息中的 HTML，不调用工具、不读取其他文件、不联网。返回修正后的完整单文件 HTML，不用 Markdown 围栏，不显示开发说明。
实际检查反馈：在 Chromium 156 中，四个 details 都收起时，真实打印 PDF 只保留了一句话解释，所有补充段落都没有进入 PDF。你的 print CSS 强制显示 details 子元素仍未奏效。
要求：保留原正文、四组概念、来源、展开收起、手机布局。修正打印：无论屏幕是否收起，打印时都包含所有补充段落，操作按钮不打印；打印后恢复用户原先的展开状态，不能把屏幕永久全展开。可以考虑打印前临时展开并在打印后恢复，但不要在网页上声称自己实际验证过。
已有 HTML：
<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="color-scheme" content="light">
  <meta name="theme-color" content="#f5f7fb">
  <title>第一次用 AI，先弄懂这四件事</title>
  <style>
    :root {
      --bg: #f5f7fb;
      --surface: #ffffff;
      --text: #172033;
      --muted: #5e687a;
      --line: #dfe4ed;
      --accent: #3157d5;
      --accent-soft: #eef2ff;
      --shadow: 0 10px 30px rgba(27, 39, 75, 0.07);
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
        "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    }

    * {
      box-sizing: border-box;
    }

    html {
      background: var(--bg);
      color: var(--text);
      line-height: 1.65;
    }

    body {
      margin: 0;
    }

    a {
      color: var(--accent);
      text-underline-offset: 0.18em;
      overflow-wrap: anywhere;
    }

    button,
    summary {
      font: inherit;
    }

    button:focus-visible,
    summary:focus-visible,
    a:focus-visible {
      outline: 3px solid rgba(49, 87, 213, 0.28);
      outline-offset: 3px;
    }

    .page {
      width: min(920px, calc(100% - 32px));
      margin: 0 auto;
      padding: 44px 0 32px;
    }

    header {
      margin-bottom: 24px;
    }

    .eyebrow {
      margin: 0 0 6px;
      color: var(--accent);
      font-size: 0.82rem;
      font-weight: 750;
      letter-spacing: 0.08em;
    }

    h1 {
      margin: 0;
      max-width: 760px;
      font-size: clamp(2rem, 6vw, 3.7rem);
      line-height: 1.12;
      letter-spacing: -0.045em;
    }

    .intro {
      max-width: 650px;
      margin: 12px 0 0;
      color: var(--muted);
      font-size: 1rem;
    }

    .toolbar {
      display: flex;
      justify-content: flex-end;
      gap: 8px;
      margin: 18px 0 12px;
    }

    button {
      min-height: 38px;
      padding: 7px 14px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: var(--surface);
      color: var(--text);
      cursor: pointer;
    }

    button:hover {
      border-color: #bdc7da;
      background: #fafbfe;
    }

    .primary {
      border-color: var(--accent);
      background: var(--accent);
      color: #fff;
    }

    .primary:hover {
      border-color: #2648bd;
      background: #2648bd;
    }

    .concepts {
      display: grid;
      gap: 12px;
    }

    article {
      display: grid;
      grid-template-columns: 56px minmax(0, 1fr);
      gap: 16px;
      padding: 20px;
      border: 1px solid var(--line);
      border-radius: 18px;
      background: var(--surface);
      box-shadow: var(--shadow);
    }

    .number {
      display: grid;
      width: 46px;
      height: 46px;
      place-items: center;
      border-radius: 14px;
      background: var(--accent-soft);
      color: var(--accent);
      font-weight: 800;
    }

    h2 {
      margin: 0 0 5px;
      font-size: 1.25rem;
      line-height: 1.3;
    }

    .answer {
      margin: 0;
      font-size: 1.04rem;
    }

    details {
      margin-top: 13px;
      border-top: 1px solid var(--line);
      padding-top: 10px;
    }

    summary {
      width: fit-content;
      color: var(--accent);
      cursor: pointer;
      font-weight: 700;
    }

    details p {
      margin: 9px 0 0;
      color: var(--muted);
    }

    .terms {
      display: flex;
      flex-wrap: wrap;
      gap: 7px;
      margin: 12px 0 0;
      padding: 0;
      list-style: none;
    }

    .terms li {
      padding: 3px 9px;
      border-radius: 999px;
      background: var(--accent-soft);
      color: #2949af;
      font-size: 0.84rem;
    }

    footer {
      margin-top: 26px;
      padding: 18px 2px 0;
      border-top: 1px solid var(--line);
    }

    footer h2 {
      font-size: 1rem;
    }

    .sources {
      display: grid;
      gap: 6px;
      margin: 8px 0 0;
      padding-left: 1.25rem;
      color: var(--muted);
      font-size: 0.92rem;
    }

    .note {
      margin: 10px 0 0;
      color: var(--muted);
      font-size: 0.86rem;
    }

    @media (max-width: 560px) {
      .page {
        width: min(100% - 22px, 920px);
        padding-top: 26px;
      }

      header {
        margin-bottom: 18px;
      }

      .toolbar {
        justify-content: stretch;
      }

      .toolbar button {
        flex: 1;
        padding-inline: 10px;
      }

      article {
        grid-template-columns: 38px minmax(0, 1fr);
        gap: 11px;
        padding: 16px 14px;
        border-radius: 15px;
      }

      .number {
        width: 36px;
        height: 36px;
        border-radius: 11px;
      }

      h2 {
        font-size: 1.13rem;
      }

      .answer {
        font-size: 1rem;
      }
    }

    @media print {
      :root {
        --bg: #fff;
        --shadow: none;
      }

      .page {
        width: 100%;
        padding: 0;
      }

      .toolbar,
      summary {
        display: none !important;
      }

      details {
        display: block;
      }

      details > *:not(summary),
      details:not([open]) > *:not(summary) {
        display: block !important;
      }

      article {
        break-inside: avoid;
      }
    }
  </style>
</head>
<body>
  <main class="page">
    <header>
      <p class="eyebrow">AI 入门 · 四个基础概念</p>
      <h1>第一次用 AI，先弄懂这四件事</h1>
      <p class="intro">先分清名称、能力从哪里来、文字如何进入模型，以及缓存能复用什么，就能更准确地理解 AI 的工作方式。</p>
    </header>

    <nav class="toolbar" aria-label="补充解释显示控制">
      <button class="primary" type="button" id="expand-all">展开全部</button>
      <button type="button" id="collapse-all">收起全部</button>
    </nav>

    <section class="concepts" aria-label="四个基础概念">
      <article>
        <div class="number" aria-hidden="true">01</div>
        <div>
          <h2>模型与应用</h2>
          <p class="answer">AI 是一类技术的总称；GPT 是模型家族，ChatGPT 是产品，Codex 则组织模型与工具完成任务。</p>
          <details>
            <summary>补充解释</summary>
            <p>模型提供处理信息的能力，应用负责把模型、界面、工具和工作流程组合起来。因此，应用名称不等于本次实际使用的具体模型。</p>
            <ul class="terms" aria-label="概念对应">
              <li>AI：技术类别</li>
              <li>GPT：模型家族</li>
              <li>ChatGPT：产品</li>
              <li>Codex：任务执行方式</li>
            </ul>
          </details>
        </div>
      </article>

      <article>
        <div class="number" aria-hidden="true">02</div>
        <div>
          <h2>训练与当前输入</h2>
          <p class="answer">训练通过调整模型参数形成处理能力，而你使用时提供的文章、要求和相关对话构成当前上下文。</p>
          <details>
            <summary>补充解释</summary>
            <p>训练影响模型长期形成的能力；当前输入则告诉模型这一次要处理什么。你补充一次要求，通常是在改变本次上下文，不是在当场修改模型参数。</p>
          </details>
        </div>
      </article>

      <article>
        <div class="number" aria-hidden="true">03</div>
        <div>
          <h2>Token</h2>
          <p class="answer">文本会被切分为 Token（词元），映射成编号，再转为模型能够计算的数值表示。</p>
          <details>
            <summary>补充解释</summary>
            <p>Token 是模型处理文本时使用的基本单位，但切分方式并不等同于自然语言中的“字”或“词”。一个 Token 不固定等于一个汉字，具体结果会随所用模型和切分方式而变化。本文不规定具体模型的上下文窗口或价格。</p>
          </details>
        </div>
      </article>

      <article>
        <div class="number" aria-hidden="true">04</div>
        <div>
          <h2>缓存</h2>
          <p class="answer">提示缓存可以复用部分重复计算，但缓存输入仍占上下文容量。</p>
          <details>
            <summary>补充解释</summary>
            <p>当输入满足相同前缀、长度、保留时间等服务条件时，提示缓存可能复用已有的中间计算；新增内容和新的回答仍需要生成与计算。</p>
            <p>缓存不等于保存旧答案，也不是永久记忆。能否命中、保留多久以及具体效果，取决于所用服务及其当时的条件。</p>
          </details>
        </div>
      </article>
    </section>

    <footer>
      <h2>知识核对来源</h2>
      <ol class="sources">
        <li><a href="https://sspai.com/post/107236" target="_blank" rel="noopener noreferrer">少数派：AI 入门相关资料</a></li>
        <li><a href="https://learn.chatgpt.com/docs/models" target="_blank" rel="noopener noreferrer">ChatGPT Learning：Models</a></li>
        <li><a href="https://developers.openai.com/api/docs/guides/prompt-caching" target="_blank" rel="noopener noreferrer">OpenAI Developers：Prompt Caching</a></li>
      </ol>
      <p class="note">正文为本课根据核对材料独立改写的事实摘要。</p>
    </footer>
  </main>

  <script>
    (() => {
      const details = [...document.querySelectorAll("details")];
      const setAll = (open) => details.forEach((item) => {
        item.open = open;
      });

      document.getElementById("expand-all").addEventListener("click", () => setAll(true));
      document.getElementById("collapse-all").addEventListener("click", () => setAll(false));
    })();
  </script>
</body>
</html>