@layer components {
  .prose {
    /* Fluid typography scale — easily overridden in one place */
    --prose-h1-size: var(--font-size-lg-x5);
    --prose-h2-size: var(--font-size-lg-x3);
    --prose-h3-size: var(--font-size-lg-x2);
    --prose-h4-size: var(--font-size-md);
    --prose-h5-size: var(--font-size-sm-x1);
    --prose-h6-size: var(--font-size-sm-x2);
    --prose-body-size: var(--font-size-md);

    /* Spacing */
    --prose-gap: var(--space-lg-x1);
    --prose-heading-gap: var(--space-lg-x2);
    --prose-list-indent: var(--space-lg-x1);
    --prose-list-item-gap: var(--space-sm-x1);
    --prose-blockquote-border: var(--length-1);

    /* Measure & layout */
    --prose-max-width: 65ch;
    --prose-width: auto;
    --prose-line-height: var(--line-height-loosest);
    --prose-heading-line-height: var(--line-height-tighter);

    /* Colors */
    --prose-heading-color: var(--color-primary-8);
    --prose-link-color: var(--color-primary-7);
    --prose-link-hover-color: var(--color-primary-8);
    --prose-link-active-color: var(--color-primary-9);
    --prose-link-decoration-color: var(--color-primary-3);
    --prose-blockquote-border-color: var(--color-primary-3);
    --prose-code-bg: var(--color-neutral-1);
    --prose-strong-color: var(--color-primary-9);
    --prose-em-color: var(--color-neutral-6);
    --prose-list-marker-color: var(--color-primary-5);

    /* Container */
    width: var(--prose-width);

    /* First/last-child margin reset */
    > *:first-child {
      margin-top: 0;
    }

    > *:last-child {
      margin-bottom: 0;
    }
  }

  .prose--compact {
    --prose-width: min(100%, var(--max-reach-lg-x5));
  }

  .prose--section {
    --prose-width: 100%;
  }

  .prose--tight {
    --prose-line-height: var(--line-height-tight);
  }

  .prose--small {
    --prose-body-size: var(--font-size-sm-x1);
  }

  .prose--dark {
    --prose-heading-color: var(--color-primary-0);
    --prose-link-color: var(--color-primary-1);
    --prose-link-hover-color: var(--color-primary-0);
    --prose-link-active-color: var(--color-primary-2);
    --prose-link-decoration-color: var(--color-primary-2);
    --prose-strong-color: var(--color-primary-0);
    --prose-em-color: var(--color-primary-2);
    --prose-list-marker-color: var(--color-primary-2);
    --prose-blockquote-border-color: var(--color-primary-2);
    --prose-code-bg: var(--color-primary-9);

    color: var(--color-primary-0);
    font-weight: var(--font-weight-light);
  }

  /* Headings */
  .prose h1,
  .prose h2,
  .prose h3,
  .prose h4,
  .prose h5,
  .prose h6 {
    color: var(--prose-heading-color);
    text-wrap: pretty;
    line-height: var(--prose-heading-line-height);
  }

  .prose h1 {
    font-size: var(--prose-h1-size);
    font-weight: var(--font-weight-bolder);
  }

  .prose h2 {
    font-size: var(--prose-h2-size);
    font-weight: var(--font-weight-bold);
    margin-top: var(--prose-heading-gap);
  }

  .prose h3 {
    font-size: var(--prose-h3-size);
    font-weight: var(--font-weight-bold);
    margin-top: var(--prose-gap);
  }

  .prose h4 {
    font-size: var(--prose-h4-size);
    font-weight: var(--font-weight-bold);
    margin-top: var(--prose-gap);
  }

  .prose h5,
  .prose h6 {
    font-weight: var(--font-weight-bold);
    margin-top: var(--prose-gap);
  }

  .prose h5 {
    font-size: var(--prose-h5-size);
  }

  .prose h6 {
    font-size: var(--prose-h6-size);
  }

  /* Paragraphs */
  .prose p {
    line-height: var(--prose-line-height);
    margin-top: var(--prose-gap);
  }

  /* Links */
  .prose a {
    color: var(--prose-link-color);
    font-weight: var(--font-weight-semi-bold);
    text-underline-offset: var(--underline-offset-3);
    text-decoration: underline;
    text-decoration-color: oklch(
      from var(--prose-link-decoration-color) l c h / 50%
    );
    transition: all 200ms ease-in-out;
  }

  @media (any-hover: hover) {
    .prose a:hover {
      color: var(--prose-link-hover-color);
      text-decoration-color: oklch(
        from var(--prose-link-decoration-color) l c h / 75%
      );
      scale: 0.95;
    }
  }

  .prose a:active {
    color: var(--prose-link-active-color);
    text-decoration-color: oklch(
      from var(--prose-link-decoration-color) l c h / 25%
    );
    scale: 0.9;
  }

  .prose a:focus-visible {
    outline: var(--border-width-2) solid var(--prose-link-color);
    outline-offset: var(--underline-offset-3);
  }

  /* Strong */
  .prose strong,
  .prose b {
    font-weight: var(--font-weight-bolder);
    color: var(--prose-strong-color);
  }

  /* Emphasis */
  .prose em,
  .prose i {
    color: var(--prose-em-color);
    font-style: italic;
  }

  /* Lists — restore list styles removed by reset layer */
  .prose ul,
  .prose ol {
    list-style: revert;
    padding-inline-start: var(--prose-list-indent);
    margin-top: var(--prose-gap);
  }

  .prose li {
    margin-top: var(--prose-list-item-gap);
  }

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

  /* Nested lists */
  .prose ul ul,
  .prose ul ol,
  .prose ol ul,
  .prose ol ol {
    margin-top: var(--prose-list-item-gap);
    margin-bottom: var(--prose-list-item-gap);
  }

  /* List-item paragraphs */
  .prose > ul > li p,
  .prose > ol > li p {
    margin-top: var(--prose-list-item-gap);
    margin-bottom: var(--prose-list-item-gap);
  }

  .prose > ul > li > p:first-child,
  .prose > ol > li > p:first-child {
    margin-top: var(--prose-gap);
  }

  .prose > ul > li > p:last-child,
  .prose > ol > li > p:last-child {
    margin-bottom: var(--prose-gap);
  }

  /* Blockquotes */
  .prose blockquote {
    margin-top: var(--prose-gap);
    padding-inline-start: var(--prose-gap);
    border-left: var(--prose-blockquote-border) solid
      var(--prose-blockquote-border-color);
    font-style: normal;
  }

  .prose blockquote p:first-of-type::before {
    content: open-quote;
  }

  .prose blockquote p:last-of-type::after {
    content: close-quote;
  }

  /* Code blocks */
  .prose pre {
    background: var(--prose-code-bg);
    overflow-x: auto;
    padding: var(--space-md);
    margin-top: var(--prose-gap);
  }

  /* Inline code */
  .prose code {
    background: var(--prose-code-bg);
    padding-inline: var(--space-sm-x3);
    padding-block: var(--space-sm-x4);
    font-family: var(--font-family-code);
    font-weight: var(--font-weight-semi-bold);
    word-break: break-all;
  }

  /* Reset inline code styles inside pre blocks */
  .prose pre code {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
    font-weight: inherit;
    color: inherit;
    font-size: inherit;
    font-family: inherit;
    line-height: inherit;
  }

  .prose pre code::before,
  .prose pre code::after {
    content: none;
  }

  /* Box-decoration-break for inline code across line breaks */
  .prose p code,
  .prose li code {
    box-decoration-break: clone;
  }

  /* Images — bare minimum */
  .prose img {
    max-width: 100%;
    height: auto;
    display: block;
  }

  /* Mobile spacing tightening */
  @media (width < 40rem) {
    .prose {
      --prose-gap: var(--space-md);
      --prose-heading-gap: var(--space-lg-x1);
    }
  }
}