:root {
  --prose-scale: 0.75;
  --prose-font-scale: 1;
  --divider-icon-image: url(data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Ccircle%20fill%3D%22none%22%20stroke%3D%22%23e6e6e6%22%20stroke-width%3D%222%22%20cx%3D%2210%22%20cy%3D%2210%22%20r%3D%227%22%20%2F%3E%0A%3C%2Fsvg%3E%0A);
  --divider-invert-icon-image: url(data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Ccircle%20fill%3D%22none%22%20stroke%3D%22%23364153%22%20stroke-width%3D%222%22%20cx%3D%2210%22%20cy%3D%2210%22%20r%3D%227%22%20%2F%3E%0A%3C%2Fsvg%3E%0A);
}

.prose {
  /* Spacing unit */
  --sp: calc(var(--prose-scale) * 1em);
  
  /* Default colors (gray) */
  --prose-body: var(--color-gray-700, oklch(37.3% 0.034 259.733));
  --prose-headings: var(--color-gray-900, oklch(21% 0.034 264.665));
  --prose-lead: var(--color-gray-600, oklch(44.6% 0.03 256.802));
  --prose-links: var(--color-gray-900, oklch(21% 0.034 264.665));
  --prose-bold: var(--color-gray-900, oklch(21% 0.034 264.665));
  --prose-counters: var(--color-gray-500, oklch(55.1% 0.027 264.364));
  --prose-bullets: var(--color-gray-300, oklch(87.2% 0.01 258.338));
  --prose-hr: var(--color-gray-200, oklch(92.8% 0.006 264.531));
  --prose-quotes: var(--color-gray-900, oklch(21% 0.034 264.665));
  --prose-quote-borders: var(--color-gray-200, oklch(92.8% 0.006 264.531));
  --prose-captions: var(--color-gray-500, oklch(55.1% 0.027 264.364));
  --prose-code: var(--color-gray-900, oklch(21% 0.034 264.665));
  --prose-pre-code: var(--color-gray-200, oklch(92.8% 0.006 264.531));
  --prose-pre-bg: var(--color-gray-800, oklch(27.8% 0.033 256.848));
  --prose-th-borders: var(--color-gray-300, oklch(87.2% 0.01 258.338));
  --prose-td-borders: var(--color-gray-200, oklch(92.8% 0.006 264.531));
  
  /* Invert colors (for dark mode) */
  --prose-invert-body: var(--color-gray-300, oklch(87.2% 0.01 258.338));
  --prose-invert-headings: white;
  --prose-invert-lead: var(--color-gray-400, oklch(70.7% 0.022 261.325));
  --prose-invert-links: white;
  --prose-invert-bold: white;
  --prose-invert-counters: var(--color-gray-400, oklch(70.7% 0.022 261.325));
  --prose-invert-bullets: var(--color-gray-600, oklch(44.6% 0.03 256.802));
  --prose-invert-hr: var(--color-gray-700, oklch(37.3% 0.034 259.733));
  --prose-invert-quotes: var(--color-gray-100, oklch(96.7% 0.003 264.542));
  --prose-invert-quote-borders: var(--color-gray-700, oklch(37.3% 0.034 259.733));
  --prose-invert-captions: var(--color-gray-400, oklch(70.7% 0.022 261.325));
  --prose-invert-code: white;
  --prose-invert-pre-code: var(--color-gray-300, oklch(87.2% 0.01 258.338));
  --prose-invert-pre-bg: rgb(0 0 0 / 50%);
  --prose-invert-th-borders: var(--color-gray-600, oklch(44.6% 0.03 256.802));
  --prose-invert-td-borders: var(--color-gray-700, oklch(37.3% 0.034 259.733));
  
  /* Base styles */
  font-size: calc(var(--prose-font-scale) * 1rem);
  line-height: 1.3;
  color: var(--prose-body);
  
  /* Block spacing */
  p, ol, ul, dl { margin: var(--sp) 0 0; }
  dt { margin-top: var(--sp); color: var(--prose-headings); font-weight: 600; }
  dd { margin-top: calc(var(--sp) * 0.25); padding-inline-start: 1.375em; }
  li { margin: calc(var(--sp) * 0.25) 0 0; }
  ol > li, ul > li { padding-inline-start: 0.375em; }
  ol, ul { padding-inline-start: 1.7em; }
  ol { list-style-type: decimal; }
  ul { list-style-type: disc; }
  ol[type="A"], ol[type="A" s] { list-style-type: upper-alpha; }
  ol[type="a"], ol[type="a" s] { list-style-type: lower-alpha; }
  ol[type="I"], ol[type="I" s] { list-style-type: upper-roman; }
  ol[type="i"], ol[type="i" s] { list-style-type: lower-roman; }
  ol[type="1"] { list-style-type: decimal; }
  ul ul, ul ol, ol ul, ol ol { margin: 0; }
  > ul > li p { margin: calc(var(--sp) * 0.5) 0 0; }
  > ul > li > p:first-child, > ol > li > p:first-child { margin-top: calc(var(--sp) * 0.75); }
  ol > li::marker { font-weight: 400; color: var(--prose-counters); }
  ul > li::marker { color: var(--prose-bullets); }
  p + ul, p + ol { margin-top: calc(var(--sp) * 0.25); }
  
  /* Headings */
  h1, h2, h3, h4 { color: var(--prose-headings); }
  h1 {
    font-size: 2.25em; font-weight: 800; line-height: 1.1;
    margin: calc(var(--sp) * 1.4) 0 0;
  }
  h2 {
    font-size: 1.5em; font-weight: 700; line-height: 1.3;
    margin: calc(var(--sp) * 1.4) 0 0;
  }
  h3 {
    font-size: 1.25em; font-weight: 600; line-height: 1.4;
    margin: calc(var(--sp) * 1.2) 0 0;
  }
  h4 {
    font-size: 1em; font-weight: 600; line-height: 1.4;
    margin: calc(var(--sp) * 1.25) 0 0;
  }
  h1 strong { font-weight: 900; color: inherit; }
  h2 strong { font-weight: 800; color: inherit; }
  h3 strong, h4 strong { font-weight: 700; color: inherit; }
  
  /* Lead */
  [class~="lead"] {
    font-size: 1.25em; line-height: 1.6; color: var(--prose-lead);
    margin: var(--sp) 0 0;
  }
  
  /* Links */
  a { color: var(--prose-links); text-decoration: underline; font-weight: 500; }
  a strong, a code { color: inherit; }
  
  /* Strong */
  strong { color: var(--prose-bold); font-weight: 600; }
  
  /* Media */
  img, picture, video, figure { margin: calc(var(--sp) * 1.5) 0 0; }
  picture { display: block; }
  figcaption {
    font-size: 0.875em; line-height: 1.4; color: var(--prose-captions);
    margin-top: calc(var(--sp) * 0.5);
  }
  
  /* Blockquote */
  blockquote {
    font-style: italic; font-weight: 500; color: var(--prose-quotes);
    margin: calc(var(--sp) * 1.5) 0 0; padding-inline-start: 1em;
    border-inline-start: 0.25rem solid var(--prose-quote-borders);
    quotes: "\201C" "\201D" "\2018" "\2019";
  }
  blockquote strong, blockquote code { color: inherit; }
  
  /* Code */
  *:not(pre) > code { font-size: 0.875em; font-weight: 600; color: var(--prose-code); }
  h1 code, h2 code, h3 code, h4 code, blockquote code, thead th code { color: inherit; }
  
  /* Kbd */
  kbd {
    font-size: 0.875em; font-weight: 500; font-family: inherit;
    color: var(--prose-code);
    padding: 0.125em 0.3125em;
    border-radius: 0.3125rem;
    box-shadow: 0 0 0 1px rgb(0 0 0 / 10%), 0 3px 0 rgb(0 0 0 / 10%);
  }
  
  /* Table */
  table {
    display: block; width: fit-content; max-width: calc(100% + 1em);
    overflow-x: auto; border-collapse: collapse;
    font-size: 0.875em; line-height: 1.5; margin: calc(var(--sp) * 2) -0.5em 0;
  }
  caption { width: max-content; max-width: 100%; padding: 0 0.5em; }

  th, td { text-align: start; overflow-wrap: break-word; }
  thead { border-bottom: 1px solid var(--prose-th-borders); }
  thead th {
    color: var(--prose-headings); font-weight: 600; vertical-align: bottom;
    padding: 0 0.5em calc(var(--sp) * 0.5);
  }
  thead th strong, thead th code { color: inherit; }
  tbody tr { border-bottom: 1px solid var(--prose-td-borders); }
  tbody tr:last-child { border-bottom: 0; }
  tbody td { vertical-align: baseline; padding: calc(var(--sp) * 0.5) 0.5em; }
  tfoot { border-top: 1px solid var(--prose-th-borders); }
  tfoot td { vertical-align: top; padding: calc(var(--sp) * 0.5) 0.5em; }
  
  hr {
      border: none; margin-top: var(--sp);
      position: relative; height: 1.25rem;
      background-image: var(--divider-icon-image);
      background-repeat: no-repeat; background-position: 50% 50%;
  }
  hr::before, hr::after {
      content: ""; position: absolute; top: 50%;
      max-width: calc(50% - (3rem / 2));
      border-bottom: 1px solid var(--prose-hr);
  }
  hr::before {
      right: calc(50% + (3rem / 2)); width: 100%;
  }
  hr::after {
      left: calc(50% + (3rem / 2)); width: 100%;
  }


  /* Shared reset rules */
  h1 + * { margin-top: calc(var(--sp) * 1.5); }
  h2 + * { margin-top: var(--sp); }
  h3 + *, h4 + * { margin-top: calc(var(--sp) * 0.5); }
  picture > img, figure > * { margin-top: 0; margin-bottom: 0; }
  > :first-child { margin-top: 0; }
  > :last-child { margin-bottom: 0; }
}

/* Size variants */
.prose-sm { --prose-scale: 0.7; --prose-font-scale: 0.875; }
.prose-lg { --prose-scale: 0.8; --prose-font-scale: 1.125; }
.prose-xl { --prose-scale: 0.9; --prose-font-scale: 1.25; }
.prose-2xl { --prose-scale: 1.1; --prose-font-scale: 1.5; }

/* Color themes - slate */
.prose-slate {
  --prose-body: var(--color-slate-700, oklch(37.2% 0.044 257.287));
  --prose-headings: var(--color-slate-900, oklch(20.8% 0.042 265.755));
  --prose-lead: var(--color-slate-600, oklch(44.6% 0.043 257.281));
  --prose-links: var(--color-slate-900, oklch(20.8% 0.042 265.755));
  --prose-bold: var(--color-slate-900, oklch(20.8% 0.042 265.755));
  --prose-counters: var(--color-slate-500, oklch(55.4% 0.046 257.417));
  --prose-bullets: var(--color-slate-300, oklch(86.9% 0.022 252.894));
  --prose-hr: var(--color-slate-200, oklch(92.9% 0.013 255.508));
  --prose-quotes: var(--color-slate-900, oklch(20.8% 0.042 265.755));
  --prose-quote-borders: var(--color-slate-200, oklch(92.9% 0.013 255.508));
  --prose-captions: var(--color-slate-500, oklch(55.4% 0.046 257.417));
  --prose-code: var(--color-slate-900, oklch(20.8% 0.042 265.755));
  --prose-pre-code: var(--color-slate-200, oklch(92.9% 0.013 255.508));
  --prose-pre-bg: var(--color-slate-800, oklch(27.9% 0.041 260.031));
  --prose-th-borders: var(--color-slate-300, oklch(86.9% 0.022 252.894));
  --prose-td-borders: var(--color-slate-200, oklch(92.9% 0.013 255.508));
  --prose-invert-body: var(--color-slate-300, oklch(86.9% 0.022 252.894));
  --prose-invert-headings: white;
  --prose-invert-lead: var(--color-slate-400, oklch(70.4% 0.04 256.788));
  --prose-invert-links: white;
  --prose-invert-bold: white;
  --prose-invert-counters: var(--color-slate-400, oklch(70.4% 0.04 256.788));
  --prose-invert-bullets: var(--color-slate-600, oklch(44.6% 0.043 257.281));
  --prose-invert-hr: var(--color-slate-700, oklch(37.2% 0.044 257.287));
  --prose-invert-quotes: var(--color-slate-100, oklch(96.8% 0.007 247.896));
  --prose-invert-quote-borders: var(--color-slate-700, oklch(37.2% 0.044 257.287));
  --prose-invert-captions: var(--color-slate-400, oklch(70.4% 0.04 256.788));
  --prose-invert-code: white;
  --prose-invert-pre-code: var(--color-slate-300, oklch(86.9% 0.022 252.894));
  --prose-invert-pre-bg: rgb(0 0 0 / 50%);
  --prose-invert-th-borders: var(--color-slate-600, oklch(44.6% 0.043 257.281));
  --prose-invert-td-borders: var(--color-slate-700, oklch(37.2% 0.044 257.287));
}

/* Color themes - zinc */
.prose-zinc {
  --prose-body: var(--color-zinc-700, oklch(37% 0.013 285.805));
  --prose-headings: var(--color-zinc-900, oklch(21% 0.006 285.885));
  --prose-lead: var(--color-zinc-600, oklch(44.2% 0.017 285.786));
  --prose-links: var(--color-zinc-900, oklch(21% 0.006 285.885));
  --prose-bold: var(--color-zinc-900, oklch(21% 0.006 285.885));
  --prose-counters: var(--color-zinc-500, oklch(55.2% 0.016 285.938));
  --prose-bullets: var(--color-zinc-300, oklch(87.1% 0.006 286.286));
  --prose-hr: var(--color-zinc-200, oklch(92% 0.004 286.32));
  --prose-quotes: var(--color-zinc-900, oklch(21% 0.006 285.885));
  --prose-quote-borders: var(--color-zinc-200, oklch(92% 0.004 286.32));
  --prose-captions: var(--color-zinc-500, oklch(55.2% 0.016 285.938));
  --prose-code: var(--color-zinc-900, oklch(21% 0.006 285.885));
  --prose-pre-code: var(--color-zinc-200, oklch(92% 0.004 286.32));
  --prose-pre-bg: var(--color-zinc-800, oklch(27.4% 0.006 286.033));
  --prose-th-borders: var(--color-zinc-300, oklch(87.1% 0.006 286.286));
  --prose-td-borders: var(--color-zinc-200, oklch(92% 0.004 286.32));
  --prose-invert-body: var(--color-zinc-300, oklch(87.1% 0.006 286.286));
  --prose-invert-headings: white;
  --prose-invert-lead: var(--color-zinc-400, oklch(70.5% 0.015 286.067));
  --prose-invert-links: white;
  --prose-invert-bold: white;
  --prose-invert-counters: var(--color-zinc-400, oklch(70.5% 0.015 286.067));
  --prose-invert-bullets: var(--color-zinc-600, oklch(44.2% 0.017 285.786));
  --prose-invert-hr: var(--color-zinc-700, oklch(37% 0.013 285.805));
  --prose-invert-quotes: var(--color-zinc-100, oklch(96.7% 0.001 286.375));
  --prose-invert-quote-borders: var(--color-zinc-700, oklch(37% 0.013 285.805));
  --prose-invert-captions: var(--color-zinc-400, oklch(70.5% 0.015 286.067));
  --prose-invert-code: white;
  --prose-invert-pre-code: var(--color-zinc-300, oklch(87.1% 0.006 286.286));
  --prose-invert-pre-bg: rgb(0 0 0 / 50%);
  --prose-invert-th-borders: var(--color-zinc-600, oklch(44.2% 0.017 285.786));
  --prose-invert-td-borders: var(--color-zinc-700, oklch(37% 0.013 285.805));
}

/* Color themes - neutral */
.prose-neutral {
  --prose-body: var(--color-neutral-700, oklch(37.1% 0 0));
  --prose-headings: var(--color-neutral-900, oklch(20.5% 0 0));
  --prose-lead: var(--color-neutral-600, oklch(43.9% 0 0));
  --prose-links: var(--color-neutral-900, oklch(20.5% 0 0));
  --prose-bold: var(--color-neutral-900, oklch(20.5% 0 0));
  --prose-counters: var(--color-neutral-500, oklch(55.6% 0 0));
  --prose-bullets: var(--color-neutral-300, oklch(87% 0 0));
  --prose-hr: var(--color-neutral-200, oklch(92.2% 0 0));
  --prose-quotes: var(--color-neutral-900, oklch(20.5% 0 0));
  --prose-quote-borders: var(--color-neutral-200, oklch(92.2% 0 0));
  --prose-captions: var(--color-neutral-500, oklch(55.6% 0 0));
  --prose-code: var(--color-neutral-900, oklch(20.5% 0 0));
  --prose-pre-code: var(--color-neutral-200, oklch(92.2% 0 0));
  --prose-pre-bg: var(--color-neutral-800, oklch(26.9% 0 0));
  --prose-th-borders: var(--color-neutral-300, oklch(87% 0 0));
  --prose-td-borders: var(--color-neutral-200, oklch(92.2% 0 0));
  --prose-invert-body: var(--color-neutral-300, oklch(87% 0 0));
  --prose-invert-headings: white;
  --prose-invert-lead: var(--color-neutral-400, oklch(70.8% 0 0));
  --prose-invert-links: white;
  --prose-invert-bold: white;
  --prose-invert-counters: var(--color-neutral-400, oklch(70.8% 0 0));
  --prose-invert-bullets: var(--color-neutral-600, oklch(43.9% 0 0));
  --prose-invert-hr: var(--color-neutral-700, oklch(37.1% 0 0));
  --prose-invert-quotes: var(--color-neutral-100, oklch(97% 0 0));
  --prose-invert-quote-borders: var(--color-neutral-700, oklch(37.1% 0 0));
  --prose-invert-captions: var(--color-neutral-400, oklch(70.8% 0 0));
  --prose-invert-code: white;
  --prose-invert-pre-code: var(--color-neutral-300, oklch(87% 0 0));
  --prose-invert-pre-bg: rgb(0 0 0 / 50%);
  --prose-invert-th-borders: var(--color-neutral-600, oklch(43.9% 0 0));
  --prose-invert-td-borders: var(--color-neutral-700, oklch(37.1% 0 0));
}

/* Color themes - stone */
.prose-stone {
  --prose-body: var(--color-stone-700, oklch(37.4% 0.01 67.558));
  --prose-headings: var(--color-stone-900, oklch(21.6% 0.006 56.043));
  --prose-lead: var(--color-stone-600, oklch(44.4% 0.011 73.639));
  --prose-links: var(--color-stone-900, oklch(21.6% 0.006 56.043));
  --prose-bold: var(--color-stone-900, oklch(21.6% 0.006 56.043));
  --prose-counters: var(--color-stone-500, oklch(55.3% 0.013 58.071));
  --prose-bullets: var(--color-stone-300, oklch(86.9% 0.005 56.366));
  --prose-hr: var(--color-stone-200, oklch(92.3% 0.003 48.717));
  --prose-quotes: var(--color-stone-900, oklch(21.6% 0.006 56.043));
  --prose-quote-borders: var(--color-stone-200, oklch(92.3% 0.003 48.717));
  --prose-captions: var(--color-stone-500, oklch(55.3% 0.013 58.071));
  --prose-code: var(--color-stone-900, oklch(21.6% 0.006 56.043));
  --prose-pre-code: var(--color-stone-200, oklch(92.3% 0.003 48.717));
  --prose-pre-bg: var(--color-stone-800, oklch(26.8% 0.007 34.298));
  --prose-th-borders: var(--color-stone-300, oklch(86.9% 0.005 56.366));
  --prose-td-borders: var(--color-stone-200, oklch(92.3% 0.003 48.717));
  --prose-invert-body: var(--color-stone-300, oklch(86.9% 0.005 56.366));
  --prose-invert-headings: white;
  --prose-invert-lead: var(--color-stone-400, oklch(70.9% 0.01 56.259));
  --prose-invert-links: white;
  --prose-invert-bold: white;
  --prose-invert-counters: var(--color-stone-400, oklch(70.9% 0.01 56.259));
  --prose-invert-bullets: var(--color-stone-600, oklch(44.4% 0.011 73.639));
  --prose-invert-hr: var(--color-stone-700, oklch(37.4% 0.01 67.558));
  --prose-invert-quotes: var(--color-stone-100, oklch(97% 0.001 106.424));
  --prose-invert-quote-borders: var(--color-stone-700, oklch(37.4% 0.01 67.558));
  --prose-invert-captions: var(--color-stone-400, oklch(70.9% 0.01 56.259));
  --prose-invert-code: white;
  --prose-invert-pre-code: var(--color-stone-300, oklch(86.9% 0.005 56.366));
  --prose-invert-pre-bg: rgb(0 0 0 / 50%);
  --prose-invert-th-borders: var(--color-stone-600, oklch(44.4% 0.011 73.639));
  --prose-invert-td-borders: var(--color-stone-700, oklch(37.4% 0.01 67.558));
}

/* Dark mode (invert) */
.prose-invert {
  --prose-body: var(--prose-invert-body);
  --prose-headings: var(--prose-invert-headings);
  --prose-lead: var(--prose-invert-lead);
  --prose-links: var(--prose-invert-links);
  --prose-bold: var(--prose-invert-bold);
  --prose-counters: var(--prose-invert-counters);
  --prose-bullets: var(--prose-invert-bullets);
  --prose-hr: var(--prose-invert-hr);
  --prose-quotes: var(--prose-invert-quotes);
  --prose-quote-borders: var(--prose-invert-quote-borders);
  --prose-captions: var(--prose-invert-captions);
  --prose-code: var(--prose-invert-code);
  --prose-pre-code: var(--prose-invert-pre-code);
  --prose-pre-bg: var(--prose-invert-pre-bg);
  --prose-th-borders: var(--prose-invert-th-borders);
  --prose-td-borders: var(--prose-invert-td-borders);
  --divider-icon-image: var(--divider-invert-icon-image);
}