@layer components {
  .prose {
    max-inline-size: 720px;

    h1 {
      font-size: var(--text-3xl);
      font-weight: 700;
      letter-spacing: -0.025em;
    }

    h2 {
      margin-top: var(--block-space-double);
      font-size: var(--text-xl);
      font-weight: 600;
    }

    p {
      color: oklch(var(--lch-gray-600));
      line-height: 1.625;
    }

    p + p {
      margin-top: var(--block-space);
    }
  }

  .prose__updated {
    color: var(--color-muted);
    font-size: var(--text-sm);
  }

  .category-prose {
    margin-top: var(--block-space-double);

    h3 {
      margin-top: var(--block-space);
      font-size: var(--text-lg);
      font-weight: 600;
    }

    ul, ol {
      margin-top: var(--block-space);
      padding-inline-start: 1.25em;
      color: oklch(var(--lch-gray-600));
      line-height: 1.625;

      li + li {
        margin-top: calc(var(--block-space) / 2);
      }
    }

    h2 + p, h3 + p, p + ul, p + ol {
      margin-top: var(--block-space);
    }
  }

  .category-prose--introduction {
    margin-top: 0;
    margin-bottom: var(--block-space);
  }

  .category-prose table {
    inline-size: 100%;
    margin-top: var(--block-space);
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 1.5rem;
    background-color: var(--color-surface);
    box-shadow: var(--shadow-soft);
    font-size: var(--text-sm);

    th {
      font-weight: 600;
    }

    th, td {
      padding: var(--block-space-half) var(--inline-space);
      text-align: start;
      color: oklch(var(--lch-gray-600));
    }

    th ~ th, td ~ td {
      padding-inline-start: 0;
      text-align: end;
      white-space: nowrap;
      font-variant-numeric: tabular-nums;
    }

    thead th, tbody tr:not(:last-child) td {
      border-block-end: 1px solid var(--color-separator);
    }

    a {
      color: var(--color-primary);
      font-weight: 600;
    }
  }
}