@layer blocks {
  /* PROSE BLOCK
A block that styles prose content

CUSTOM PROPERTIES AND CONFIGURATION
--prose-blockquote-border-color: The color of the blockquote border

--prose-list-marker-color: The color of the list marker

--prose-list-marker-size: The size of the list marker
*/

  /* Default flow space. Change this one value to change the overall flow */
  .prose {
    --flow-space: var(--space-s, 2rem);
  }

  /* Increase legibility by limiting line lengths */
  .prose :is(p, li, dl, figcaption, blockquote) {
    max-width: 60ch;
    text-wrap: pretty;
  }

  /* Limit the length of headings, too */
  .prose :is(h1, h2, h3, h4) {
    max-width: 35ch;
  }

  .prose :is(h1, h2, h3) {
    /* Allow words to break by default. */
    overflow-wrap: anywhere;
  }

  /* Heading flow for elements that follow them */
  .prose :is(h1, h2, h3, h4):not(.not-prose) + *:not(.not-prose) {
    --flow-space: var(--space-s, 1.5rem);
  }

  /* Add more space on and around figures and tables */
  .prose :is(figure, table):not(.not-prose),
  .prose :is(figure, table):not(.not-prose) + *:not(.not-prose) {
    --flow-space: var(--space-l, 3rem);
  }

  /* Add more space to headings on block start */
  .prose *:not(.not-prose) + :is(h1, h2, h3, h4):not(.not-prose) {
    --flow-space: var(--space-m, 2.5rem);
  }

  /* Flow for list items */
  .prose :is(ul, ol):not(.not-prose) li + li,
  .prose :is(ul, ol):not(.not-prose) li > :is(ol, ul):not(.not-prose) {
    margin-block-start: var(--space-2xs, 0.75rem);
  }

  /* Flow for list items when a paragraph is inside it.*/
  .prose :is(ul, ol):not(.not-prose) li + li:has(p) {
    margin-block-start: var(--flow-space, var(--space-s, 2rem));
  }

  /* Flow for paragraphs used inside list items */
  .prose :is(ul, ol) li:has(> p) > p {
    margin-block-start: var(--space-2xs, 0.75rem);
  }

  /* Flow for dt/dd groups.*/
  .prose :is(dl):not(.not-prose) dd + dt {
    margin-block-start: var(--flow-space, var(--space-s, 2rem));
  }

  /* Flow for dt/dd pairs */
  .prose :is(dl):not(.not-prose) dt + dd {
    margin-block-start: var(--space-2xs, 0.75rem);
  }

  /* Add lots of space for horizontal rules */
  .prose :is(hr) {
    --flow-space: var(--space-l, 3rem);
  }

  /* Bump down the font weight for headings, dt, and strong */
  .prose :is(h1, h2, h3, h4, h5, h6, dt, strong) {
    font-weight: var(--weight-semi, 600);
  }

  .prose :is(blockquote) {
    padding-inline-start: var(--space-2xs, 1rem);
    border-inline-start-width: 0.25rem;
    border-inline-start-style: solid;
    border-inline-start-color: var(--prose-blockquote-border-color, var(--color-surface-border, currentColor));
  }

  .prose :is(blockquote) p {
    font-style: italic;
    font-weight: var(--weight-medium, 500);
  }

  .prose :is(kbd) {
    border-radius: var(--form-control-border-radius, 0.25rem);
  }

  .prose :is(code):not(.not-prose):not(pre code) {
    font-weight: var(--weight-semi, 600);
    font-size: 0.95em;
    background: revert;
  }

  .prose :is(code):not(.not-prose):not(pre code):before {
    content: "`";
  }

  .prose :is(code):not(.not-prose):not(pre code):after {
    content: "`";
  }

  .prose pre {
    border-radius: var(--panel-radius, 0.5rem);
  }

  .prose :is(ol, ul):not(.not-prose) {
    padding-inline-start: var(--space-s, 1.5rem);
  }

  .prose :is(ol, ul):not(.not-prose) li {
    padding-inline-start: var(--space-2xs, 0.5rem);
  }

  .prose :is(ul > li):not(.not-prose)::marker {
    color: var(--prose-list-marker-color, currentColor);
  }

  .prose :is(ol > li):not(.not-prose)::marker {
    font-weight: var(--weight-normal, 400);
    color: var(--prose-list-marker-color, currentColor);
    font-size: var(--prose-list-marker-size, 1em);
  }
}