<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>{{TITLE}} - {{FEATURE}}</title>
  <style>
    :root {
      color-scheme: light;
      --bg: #f7f7f4;
      --paper: #ffffff;
      --ink: #202427;
      --muted: #687076;
      --line: #d7dadd;
      --accent: #245c73;
      --soft: #eef5f7;
      --code: #182026;
    }
    * { box-sizing: border-box; }
    body {
      margin: 0;
      color: var(--ink);
      background: var(--bg);
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
      line-height: 1.65;
    }
    .layout {
      display: grid;
      grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
      gap: 28px;
      width: min(1180px, calc(100vw - 32px));
      margin: 0 auto;
      padding: 28px 0 48px;
    }
    aside {
      position: sticky;
      top: 20px;
      align-self: start;
      border: 1px solid var(--line);
      background: var(--paper);
      border-radius: 8px;
      padding: 16px;
    }
    main {
      border: 1px solid var(--line);
      background: var(--paper);
      border-radius: 8px;
      padding: 32px;
      min-width: 0;
    }
    h1, h2, h3, h4, h5, h6 { line-height: 1.25; margin: 1.4em 0 0.55em; }
    h1 { margin-top: 0; font-size: 2rem; }
    h2 { border-bottom: 1px solid var(--line); padding-bottom: 0.3em; }
    p, ul, ol, table, pre, blockquote { margin: 0 0 1em; }
    a { color: var(--accent); text-decoration: none; }
    a:hover { text-decoration: underline; }
    code {
      border-radius: 4px;
      background: var(--soft);
      padding: 0.1em 0.35em;
      font-family: "SFMono-Regular", Consolas, monospace;
      font-size: 0.92em;
    }
    pre {
      overflow-x: auto;
      border-radius: 8px;
      background: var(--code);
      color: #f3f7f8;
      padding: 16px;
    }
    pre code { background: transparent; color: inherit; padding: 0; }
    table { width: 100%; border-collapse: collapse; overflow-x: auto; display: block; }
    th, td { border: 1px solid var(--line); padding: 8px 10px; text-align: left; vertical-align: top; }
    th { background: var(--soft); }
    blockquote { border-left: 4px solid var(--accent); margin-left: 0; padding: 8px 14px; color: var(--muted); background: var(--soft); }
    .meta { color: var(--muted); font-size: 0.92rem; margin-bottom: 24px; }
    .summary { border: 1px solid var(--line); background: var(--soft); border-radius: 8px; padding: 16px; margin-bottom: 24px; }
    .toc-title { font-weight: 700; margin-bottom: 8px; }
    .toc ul, .summary ul { padding-left: 20px; }
    @media (max-width: 860px) {
      .layout { grid-template-columns: 1fr; }
      aside { position: static; }
      main { padding: 22px; }
    }
  </style>
</head>
<body>
  <div class="layout">
    <aside>
      <div class="toc-title">目录</div>
      {{TOC_HTML}}
    </aside>
    <main>
      <h1>{{TITLE}}</h1>
      <div class="meta">
        <div>Feature: {{FEATURE}}</div>
        <div>Source: {{SOURCE_ARTIFACT}}</div>
        <div>Generated: {{GENERATED_AT}}</div>
      </div>
      <section class="summary">
        <h2>摘要</h2>
        {{SUMMARY_HTML}}
      </section>
      {{BODY_HTML}}
    </main>
  </div>
</body>
</html>
