.prose {
  --prose-heading-weight: var(--text-display-36-weight);
  --prose-h1-size:        var(--text-display-36-size);
  --prose-h1-line-height: var(--text-display-36-line-height);
  --prose-h2-size:        var(--text-display-28-size);
  --prose-h2-line-height: var(--text-display-28-line-height);
  --prose-h3-size:        var(--text-display-24-size);
  --prose-h3-line-height: var(--text-display-24-line-height);
  --prose-h4-size:        var(--text-display-20-size);
  --prose-h4-line-height: var(--text-display-20-line-height);
  --prose-h5-size:        var(--text-display-18-size);
  --prose-h5-line-height: var(--text-display-18-line-height);
  --prose-h6-size:        var(--text-display-16-size);
  --prose-h6-line-height: var(--text-display-16-line-height);
  --prose-gap-h1: var(--spacing-32);
  --prose-gap-h2: var(--spacing-24);
  --prose-gap-h3: var(--spacing-20);
  --prose-gap-h4: var(--spacing-16);
  --prose-gap-h5: var(--spacing-12);
  --prose-gap-h6: var(--spacing-8);
  --prose-flow:    var(--spacing-16);
  --prose-section: var(--spacing-60);
  --prose-marker-size:   var(--spacing-8);
  --prose-marker-gap:    var(--spacing-12);
  --prose-list-offset:   var(--spacing-8);
  --prose-list-indent:   var(--spacing-16);
  --prose-list-flow:     var(--spacing-8);
  --prose-list-flow-top: var(--spacing-16);
  font-family: var(--font-family-base);
  color: var(--color-gray-700);
}

.prose-page {
  container-type: inline-size;
  container-name: prose-page;
}

.prose > * + * {
  padding-top: var(--prose-flow);
}

.prose > * + :where(h1, h2, h3, h4, h5, h6) {
  padding-top: var(--prose-section);
}

.prose > :where(h1) + * { padding-top: var(--prose-gap-h1); }
.prose > :where(h2) + * { padding-top: var(--prose-gap-h2); }
.prose > :where(h3) + * { padding-top: var(--prose-gap-h3); }
.prose > :where(h4) + * { padding-top: var(--prose-gap-h4); }
.prose > :where(h5) + * { padding-top: var(--prose-gap-h5); }
.prose > :where(h6) + * { padding-top: var(--prose-gap-h6); }

.prose :where(h1, h2, h3, h4, h5, h6) {
  margin: 0;
  font-family: var(--font-family-base);
  font-weight: var(--prose-heading-weight);
  color: var(--color-gray-900);
  font-optical-sizing: none;
}

.prose :where(h1) { font-size: var(--prose-h1-size); line-height: var(--prose-h1-line-height); }
.prose :where(h2) { font-size: var(--prose-h2-size); line-height: var(--prose-h2-line-height); }
.prose :where(h3) { font-size: var(--prose-h3-size); line-height: var(--prose-h3-line-height); }
.prose :where(h4) { font-size: var(--prose-h4-size); line-height: var(--prose-h4-line-height); }
.prose :where(h5) { font-size: var(--prose-h5-size); line-height: var(--prose-h5-line-height); }
.prose :where(h6) { font-size: var(--prose-h6-size); line-height: var(--prose-h6-line-height); }

.prose :where(p) {
  margin: 0;
  font-size: var(--text-body-16-size);
  line-height: var(--text-body-16-line-height);
  font-weight: var(--text-body-16-weight);
  color: var(--color-gray-700);
}

.prose :where(a) {
  color: var(--color-accent-400);
  font-weight: var(--text-body-16m-weight);
  text-decoration: none;
}

.prose :where(strong, b) {
  font-weight: var(--text-body-16m-weight);
  color: var(--color-gray-900);
}

.prose :where(ul, ol) {
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--color-gray-900);
  font-size: var(--text-body-16-size);
  line-height: var(--text-body-16-line-height);
  font-weight: var(--text-body-16-weight);
}

.prose :where(ul) { padding-left: var(--prose-list-offset); }

.prose :where(li) + :where(li)   { padding-top: var(--prose-list-flow); }
.prose > :where(ul, ol) > :where(li) + :where(li) { padding-top: var(--prose-list-flow-top); }

.prose :where(li) > :where(ul, ol) {
  padding-top: var(--prose-list-flow);
  padding-left: var(--prose-list-indent);
}

.prose :where(ul) > :where(li) {
  display: grid;
  grid-template-columns: var(--prose-marker-size) 1fr;
  column-gap: var(--prose-marker-gap);
}

.prose :where(ul) > :where(li)::before {
  content: "";
  width: var(--prose-marker-size);
  height: var(--prose-marker-size);
  border-radius: 50%;
  background: var(--color-accent-400);
  margin-top: var(--spacing-8);
}

.prose :where(li) > :where(ul, ol) { grid-column: 1 / -1; }

.prose :where(li li li) {
  color: var(--color-gray-700);
}

.prose :where(ul) :where(li li li)::before {
  background: transparent;
  box-shadow: inset 0 0 0 2px var(--color-accent-400);
}

.prose :where(ol) {
  counter-reset: prose-ol;
}

.prose :where(ol) > :where(li) {
  display: block;
  counter-increment: prose-ol;
}

.prose :where(ol) > :where(li)::before {
  content: counters(prose-ol, ".") ". ";
}

@container prose-page (max-width: 767px) {
  .prose > * {
    --prose-h1-size:        var(--text-display-24-size) !important;
    --prose-h1-line-height: var(--text-display-24-line-height) !important;
    --prose-h2-size:        var(--text-display-22-size) !important;
    --prose-h2-line-height: var(--text-display-22-line-height) !important;
    --prose-h3-size:        var(--text-display-20-size) !important;
    --prose-h3-line-height: var(--text-display-20-line-height) !important;
    --prose-h4-size:        var(--text-display-18-size) !important;
    --prose-h4-line-height: var(--text-display-18-line-height) !important;
    --prose-h5-size:        var(--text-display-16-size) !important;
    --prose-h5-line-height: var(--text-display-16-line-height) !important;
    --prose-h6-size:        var(--text-display-14-size) !important;
    --prose-h6-line-height: var(--text-display-14-line-height) !important;
    --prose-gap-h1: var(--spacing-20) !important;
    --prose-gap-h2: var(--spacing-16) !important;
    --prose-gap-h3: var(--spacing-16) !important;
    --prose-gap-h4: var(--spacing-12) !important;
    --prose-gap-h5: var(--spacing-8) !important;
    --prose-gap-h6: var(--spacing-8) !important;
    --prose-section: var(--spacing-40) !important;
  }
}

.prose--compact > * {
  --prose-h2-size:        var(--text-display-20-size);
  --prose-h2-line-height: var(--text-display-20-line-height);
  --prose-h3-size:        var(--text-display-18-size);
  --prose-h3-line-height: var(--text-display-18-line-height);
  --prose-h4-size:        var(--text-display-16-size);
  --prose-h4-line-height: var(--text-display-16-line-height);
  --prose-gap-h2: var(--spacing-12);
  --prose-gap-h3: var(--spacing-12);
  --prose-gap-h4: var(--spacing-12);
  --prose-flow:    var(--spacing-24);
  --prose-section: var(--spacing-40);
}