.doc {
  max-width: 920px;
  margin: 0 auto;
  padding: 28px 36px 64px;
  font-size: 15px;
  line-height: 1.65;
  overflow-wrap: break-word;
}
.doc > :first-child { margin-top: 0; }

.doc h1, .doc h2, .doc h3, .doc h4, .doc h5, .doc h6 { position: relative; margin: 1.8em 0 .6em; line-height: 1.25; font-weight: 650; }
.doc h1 { font-size: 1.85em; padding-bottom: .3em; border-bottom: 1px solid var(--border); }
.doc h2 { font-size: 1.4em; padding-bottom: .25em; border-bottom: 1px solid var(--border); }
.doc h3 { font-size: 1.18em; }
.doc h4 { font-size: 1.05em; }
.doc h5, .doc h6 { font-size: .95em; color: var(--muted); }

.doc .anchor { position: absolute; left: -1.1em; padding-right: .3em; color: var(--muted); text-decoration: none; opacity: 0; }
.doc h1:hover .anchor, .doc h2:hover .anchor, .doc h3:hover .anchor, .doc h4:hover .anchor { opacity: 1; }

.doc p, .doc ul, .doc ol, .doc blockquote, .doc table, .doc pre, .doc details { margin: 0 0 1em; }
.doc a { color: var(--accent); text-decoration: none; }
.doc a:hover { text-decoration: underline; }

.doc ul, .doc ol { padding-left: 1.6em; }
.doc li + li { margin-top: .25em; }
.doc li > ul, .doc li > ol { margin: .25em 0 0; }
.doc li:has(> input[type="checkbox"]) { list-style: none; margin-left: -1.4em; }
.doc input[type="checkbox"] { margin: 0 .45em 0 0; vertical-align: -1px; }

.doc blockquote { padding: .1em 1em; border-left: 4px solid var(--border); color: var(--muted); }
.doc blockquote > :last-child { margin-bottom: 0; }
.doc hr { height: 1px; margin: 2em 0; border: 0; background: var(--border); }

.doc code, .doc pre { font-family: ui-monospace, "Cascadia Code", Consolas, "Liberation Mono", monospace; font-size: .88em; }
.doc :not(pre) > code { padding: .15em .4em; border-radius: 5px; background: var(--code-bg); }
.doc pre { overflow: auto; padding: 14px 16px; border-radius: 8px; background: var(--code-bg); line-height: 1.5; }
.doc pre code.hljs { padding: 0; background: transparent; font-size: 1em; }

.doc pre.mermaid { display: flex; justify-content: center; padding: 20px; border: 1px solid var(--border); background: transparent; font-family: inherit; }
.doc pre.mermaid svg { max-width: 100%; height: auto; }
.doc pre.mermaid-error { display: block; border-color: var(--danger); white-space: pre-wrap; font-family: ui-monospace, Consolas, monospace; }

.doc table { display: block; width: max-content; max-width: 100%; overflow: auto; border-collapse: collapse; font-size: .93em; }
.doc th, .doc td { padding: 7px 12px; border: 1px solid var(--border); vertical-align: top; }
.doc th { background: var(--panel); font-weight: 600; text-align: left; }
.doc tbody tr:nth-child(even) { background: color-mix(in srgb, var(--panel) 55%, transparent); }

.doc img { max-width: 100%; border-radius: 6px; }

@media (max-width: 640px) {
  .doc { padding: 18px 16px 48px; }
}