/* Article typography: used for reading, editing and previews. */
.prose {
  font-family: var(--font-read);
  font-size: 17px;
  line-height: 1.72;
  color: var(--ink);
  max-width: 72ch;
  overflow-wrap: break-word;
}
:root[data-font="modern"] .prose, :root[data-font="technical"] .prose, :root[data-font="humanist"] .prose { font-size: 16px; line-height: 1.68; }
.prose > :first-child { margin-top: 0; }
.prose p, .prose ul, .prose ol, .prose dl, .prose blockquote, .prose figure, .prose details, .prose .callout, .prose .table-wrap, .prose .code-wrap, .prose > table, .prose > pre { margin: 0 0 1.05em; }
.prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6 { font-family: var(--font-head); color: var(--ink); line-height: 1.3; scroll-margin-top: calc(var(--topbar-h) + 20px); position: relative; }
.prose h1 { font-size: 1.6em; margin: 1.6em 0 .55em; font-weight: 750; letter-spacing: -.02em; }
.prose h2 { font-size: 1.36em; margin: 1.75em 0 .55em; font-weight: 700; letter-spacing: -.015em; }
.prose h3 { font-size: 1.14em; margin: 1.5em 0 .45em; font-weight: 680; }
.prose h4, .prose h5, .prose h6 { font-size: 1em; margin: 1.3em 0 .4em; font-weight: 680; }
:root[data-font="technical"] .prose :is(h1, h2, h3, h4) { letter-spacing: -.01em; font-weight: 650; }
.prose .anchor { position: absolute; left: -.9em; padding-right: .2em; color: var(--ink-3); opacity: 0; font-weight: 400; text-decoration: none; }
.prose :is(h2, h3):hover .anchor, .prose .anchor:focus { opacity: 1; }
.prose a { color: var(--link); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--link) 35%, transparent); text-underline-offset: 3px; text-decoration-thickness: 1px; }
.prose a:hover { text-decoration-color: currentColor; }
.prose strong { font-weight: 700; }
.prose mark { background: var(--accent-soft); color: inherit; padding: 0 .15em; border-radius: 2px; }
.prose ul, .prose ol { padding-left: 1.5em; }
.prose li { margin: .3em 0; padding-left: .2em; }
.prose li > ul, .prose li > ol { margin: .3em 0; }
.prose li::marker { color: var(--ink-3); }
.prose ol > li::marker { font-family: var(--font-ui); font-weight: 650; font-size: .9em; }
.prose ul.checklist { list-style: none; padding-left: .2em; }
.prose ul.checklist > li { position: relative; padding-left: 1.8em; }
.prose ul.checklist > li[data-checked]::before {
  content: ""; position: absolute; left: 0; top: .32em; width: 1.05em; height: 1.05em; border-radius: 4px;
  border: 1.5px solid var(--ink-3); background: var(--surface); box-sizing: border-box;
}
.prose ul.checklist > li[data-checked="true"]::before {
  border-color: var(--brand); background: var(--brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7'/%3E%3C/svg%3E") center / 80% no-repeat;
}
.prose ul.checklist > li[data-checked="true"] { color: var(--ink-3); }
.editor-body ul.checklist > li[data-checked]::before { cursor: pointer; }
.prose blockquote { margin-left: 0; padding: .1em 0 .1em 1.1em; border-left: 3px solid var(--line); color: var(--ink-2); font-style: italic; }
.prose blockquote > :last-child { margin-bottom: 0; }
.prose hr { border: 0; height: 1px; background: var(--line); margin: 2.2em 0; }
.prose img { display: block; max-width: 100%; height: auto; border-radius: var(--r-md); border: 1px solid var(--line-soft); margin: 1.2em 0; }
.prose figure img { margin: 0; }
.prose figcaption { font-family: var(--font-ui); font-size: 13.5px; color: var(--ink-3); margin-top: 8px; text-align: center; }
.prose code { font-family: var(--font-mono); font-size: .84em; background: var(--surface-3); color: var(--ink); padding: .12em .38em; border-radius: var(--r-xs); }
.prose pre {
  font-family: var(--font-mono); font-size: 13.5px; line-height: 1.6; background: #18202B; color: #E3E8EF;
  padding: 16px 18px; border-radius: var(--r-md); overflow-x: auto; white-space: pre; tab-size: 2;
}
.prose pre code { background: none; padding: 0; color: inherit; font-size: inherit; }
.prose .code-wrap { position: relative; border-radius: var(--r-md); overflow: hidden; background: #18202B; }
.prose .code-wrap pre { margin: 0; border-radius: 0; padding-top: 10px; }
.code-bar { display: flex; align-items: center; justify-content: space-between; padding: 6px 8px 0 18px; font-family: var(--font-ui); font-size: 12px; color: #8E9AAC; }
.code-copy { display: inline-flex; align-items: center; gap: 5px; border: 0; background: transparent; color: #AEB9C9; padding: 4px 8px; border-radius: var(--r-xs); cursor: pointer; font-size: 12px; font-family: var(--font-ui); }
.code-copy:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.code-copy .icon { width: 13px; height: 13px; }
.prose .table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-md); }
.table-wrap { overflow-x: auto; }
.prose table { border-collapse: collapse; width: 100%; font-family: var(--font-ui); font-size: 14.5px; line-height: 1.5; }
.prose th, .prose td { text-align: left; vertical-align: top; padding: 9px 13px; border-bottom: 1px solid var(--line-soft); }
.prose td + td, .prose th + th, .prose td + th, .prose th + td { border-left: 1px solid var(--line-soft); }
.prose th { background: var(--surface-2); font-weight: 650; font-size: 13.5px; }
.prose tr:last-child td { border-bottom: 0; }
.prose .align-center { text-align: center; }
.prose .align-right { text-align: right; }
.prose > table, .editor-body table { border: 1px solid var(--line); }
.prose .callout {
  font-family: var(--font-ui); font-size: 15px; line-height: 1.6; padding: 14px 16px 14px 18px; border-radius: var(--r-md);
  border: 1px solid color-mix(in srgb, var(--k) 25%, transparent); border-left: 4px solid var(--k); background: color-mix(in srgb, var(--k) 8%, var(--surface));
  --k: var(--brand);
}
.prose .callout > :last-child { margin-bottom: 0; }
.prose .callout-success { --k: var(--success); }
.prose .callout-warning { --k: #D08A12; }
.prose .callout-danger { --k: var(--danger); }
.prose details { border: 1px solid var(--line); border-radius: var(--r-md); padding: 0 16px; background: var(--surface-2); }
.prose details[open] { padding-bottom: 4px; }
.prose summary { cursor: pointer; padding: 10px 0; font-family: var(--font-ui); font-weight: 600; font-size: 15px; }
.prose details > :last-child { margin-bottom: 12px; }
.prose kbd { font-size: .78em; }
.prose dl dt { font-weight: 650; }
.prose dl dd { margin: 0 0 .6em 1.2em; }
.prose-sm { font-size: 15px; }
.preview-prose { max-width: none; }
.editor-body.prose { max-width: none; }
@media (max-width: 720px) { .prose { font-size: 16px; } }