/* Shared Markdown content, using Joboy's light and dark theme tokens. */
.markdown-article {
  max-width: 960px;
  margin: 48px auto 80px;
  padding: 0 24px;
}
.markdown-article > h1 {
  font-size: clamp(38px, 5vw, 68px);
  line-height: 1.12;
  letter-spacing: -1.5px;
}
.article-body {
  display: flow-root;
  min-width: 0;
  color: var(--text-primary);
  font-size: 18px;
  line-height: 1.75;
  overflow-wrap: anywhere;
}
.article-body h2 { font-size: clamp(26px, 3vw, 36px); }
.article-body :is(h2, h3, h4, h5, h6) { line-height: 1.25; margin-top: 1.5em; }
.article-body :is(p, ul, ol, dl, pre, table, blockquote) { margin-block: 1em; }
.article-body a, .article-body .markdown-modal-link {
  color: var(--link-color);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.article-body pre {
  max-width: 100%;
  overflow-x: auto;
  padding: 16px;
  border: 1px solid var(--border-color);
  border-radius: 7px;
  background: var(--surface-raised);
}
.article-body code { font-size: .9em; }
.article-body table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
}
.article-body :is(th, td) { padding: 10px 16px; border: 1px solid var(--border-color); text-align: left; }
.article-body th { background: var(--surface-raised); }
.article-body blockquote { margin-inline: 0; padding-left: 20px; border-left: 3px solid var(--link-color); }
.article-body hr { border: 0; border-top: 1px solid var(--border-color); }
.article-body img { max-width: 100%; height: auto; }
.article-body .component-inline-image--full-width { display: block; width: 100%; }
.article-body .component-inline-image--right { float: right; width: min(40%, 320px); margin: 0 0 20px 24px; }
.article-body .checklist-paragraph { display: flex; align-items: baseline; gap: 12px; }
.article-body .checklist-paragraph__marker { flex: none; }
.article-body .markdown-modal-link { border: 0; padding: 0; background: transparent; font: inherit; cursor: pointer; }
.article-body .markdown-modal {
  width: min(720px, calc(100% - 32px));
  max-height: calc(100% - 32px);
  overflow: auto;
  padding: 24px;
  color: var(--text-primary);
  background: var(--page-background);
  border: 1px solid var(--border-color);
  border-radius: 16px;
}
.article-body .markdown-modal::backdrop { background: rgb(0 0 0 / 45%); backdrop-filter: blur(3px); }
.article-body [data-markdown-close] {
  min-height: 44px;
  padding: 10px 22px;
  border: 0;
  border-radius: 7px;
  color: var(--primary-text);
  background: var(--primary-background);
  font: inherit;
  cursor: pointer;
}
.article-body :is(a, button):focus-visible { outline: 3px solid var(--link-color); outline-offset: 6px; }
.article-body .markdown-diagram, .article-body .markdown-math--display { display: block; max-width: 100%; overflow-x: auto; }
.article-body .markdown-diagram svg { max-width: 100%; height: auto; }
@media (max-width: 700px) {
  .article-body { font-size: 16px; }
  .article-body .component-inline-image--right { float: none; display: block; width: 100%; margin: 20px 0; }
}