@layer components {
  :where(.prose) {
    font-size: var(--text-fluid-base);
    max-inline-size: 65ch;

    :is(h1, h2, h3, h4, h5, h6) {
      font-weight: var(--font-extrabold);
      hyphens: auto;
      letter-spacing: -0.02ch;
      line-height: 1.1;
      margin-block: 0.5em;
      overflow-wrap: break-word;
      text-wrap: balance;
    }

    h1 {
      font-size: 2.4em;
    }

    h2 {
      font-size: 1.8em;
    }

    h3 {
      font-size: 1.5em;
    }

    h4 {
      font-size: 1.2em;
    }

    h5 {
      font-size: 1em;
    }

    h6 {
      font-size: 0.8em;
    }

    :is(ul, ol, menu) {
      list-style: revert;
      padding-inline-start: revert;
    }

    :is(p, ul, ol, dl, blockquote, pre, figure, table, hr) {
      margin-block: 0.65lh;
      overflow-wrap: break-word;
      text-wrap: pretty;
    }

    hr {
      border-color: var(--color-border-dark);
      border-style: var(--border-style, solid) none none;
      margin: 2lh auto;
    }

    :is(b, strong) {
      font-weight: var(--font-bold);
    }

    :is(pre, code) {
      background-color: var(--color-border-light);
      border: 1px solid var(--color-border);
      border-radius: var(--rounded-sm);
      font-family: var(--font-monospace-code);
      font-size: 0.85em;
    }

    code {
      padding: 0.1em 0.3em;
    }

    pre {
      border-radius: 0.5em;
      overflow-x: auto;
      padding: 0.5lh 2ch;
      text-wrap: nowrap;
    }

    pre code {
      background-color: transparent;
      border: 0;
      font-size: 1em;
      padding: 0;
    }

    p {
      hyphens: auto;
      letter-spacing: -0.005ch;
    }

    blockquote {
      font-style: italic;
      margin: 0 3ch;
    }

    blockquote p {
      hyphens: none;
    }

    table {
      border: 1px solid var(--color-border-dark);
      border-collapse: collapse;
      margin: 1lh 0;
    }

    th {
      font-weight: var(--font-bold);
    }

    :is(th, td) {
      border: 1px solid var(--color-border-dark);
      padding: 0.2lh 1ch;
      text-align: start;
    }

    th {
      border-block-end-width: 3px;
    }

    del {
      background-color: rgb(from var(--color-negative) r g b / .1);
      color: var(--color-negative);
    }

    ins {
      background-color: rgb(from var(--color-positive) r g b / .1);
      color: var(--color-positive);
    }

    a {
      color: var(--color-link);
      text-decoration: underline;
      text-decoration-skip-ink: auto;
    }

    mark {
      background-color: var(--color-highlight);
      color: var(--color-text);
    }
  }
}