@layer components {
  /* Markdown 正文（Markdig + Sanitizer 输出） */
  .prose { max-width: 72ch; font-size: var(--t-base); line-height: 1.75; }
  .prose > * + * { margin-top: 1em; }
  .prose h1 { font-size: var(--t-2xl); margin-top: 0; }
  .prose h2 { font-size: var(--t-xl); margin-top: 2.2em; padding-top: .6em; border-top: 1px solid var(--line); scroll-margin-top: 96px; }
  .prose h3 { font-size: var(--t-lg); margin-top: 1.8em; scroll-margin-top: 96px; }
  .prose h4 { margin-top: 1.4em; scroll-margin-top: 96px; }
  .prose h2 + *, .prose h3 + *, .prose h4 + * { margin-top: .6em; }
  .prose p { text-wrap: pretty; }
  .prose a { text-decoration: underline; }
  .prose strong { color: var(--text); font-weight: 700; }
  .prose ul, .prose ol { padding-inline-start: 1.5em; }
  .prose li + li { margin-top: .35em; }
  .prose li > ul, .prose li > ol { margin-top: .35em; }
  .prose ul.contains-task-list { list-style: none; padding-inline-start: .25em; }
  .prose .task-list-item { display: flex; gap: var(--s-2); align-items: baseline; }
  .prose .task-list-item input { accent-color: var(--cyan-ink); margin-top: .35em; }
  .prose blockquote { border-left: 2px solid var(--cyan-ink); padding: var(--s-2) var(--s-5); color: var(--muted); background: color-mix(in oklab, var(--cyan-ink) 6%, transparent); border-radius: 0 var(--r-sm) var(--r-sm) 0; }
  .prose blockquote > * + * { margin-top: .6em; }
  .prose hr { margin-block: 2em; }
  .prose img { border-radius: var(--r-md); border: 1px solid var(--line); margin-inline: auto; }
  .prose code { font-size: .875em; padding: .15em .4em; background: var(--raised); border: 1px solid var(--line); border-radius: var(--r-xs); }
  .prose pre { padding: var(--s-4) var(--s-5); background: var(--raised); border: 1px solid var(--line-strong); border-radius: var(--r-md); overflow-x: auto; font-size: var(--t-sm); line-height: 1.6; }
  .prose pre code { padding: 0; background: none; border: 0; font-size: inherit; }
  .prose table { width: 100%; font-size: var(--t-sm); display: block; overflow-x: auto; border: 1px solid var(--line-strong); border-radius: var(--r-xs); }
  .prose thead th { font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); background: var(--raised); text-align: left; padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--line-strong); }
  .prose td { padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--line); vertical-align: top; }
  .prose tbody tr:last-child td { border-bottom: 0; }
  .prose kbd { padding: .1em .4em; border: 1px solid var(--line-strong); border-bottom-width: 2px; border-radius: var(--r-xs); font-size: .85em; }
  .prose mark, .search-hit mark { background: color-mix(in oklab, var(--amber) 35%, transparent); color: inherit; padding: 0 .1em; border-radius: 2px; }
  .prose-sm { font-size: var(--t-sm); }

  /* 右侧目录 */
  .toc { font-size: var(--t-sm); border-left: 1px solid var(--line-strong); }
  .toc-title { font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding: 0 var(--s-4) var(--s-2); }
  .toc ol { list-style: none; padding: 0; }
  .toc a { display: block; padding: var(--s-1) var(--s-4); color: var(--muted); text-decoration: none; border-left: 2px solid transparent; margin-left: -1px; line-height: 1.4; }
  .toc a:hover { color: var(--text); }
  .toc a.is-current { color: var(--cyan-ink); border-left-color: var(--cyan-ink); }
  .toc .lvl-3 a { padding-left: var(--s-6); font-size: var(--t-xs); }
  @media (max-width: 1023px) {
    .toc { border-left: 0; border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s-3) 0; max-height: 240px; overflow: auto; }
  }
}