:root {
  --reference-head-space: 72px;
  --reference-head-end: 64px;
  --reference-lead-size: 20px;
  --reference-index-width: 224px;
  --reference-column-gap: 64px;
  --reference-index-size: 14px;
  --reference-index-number-size: 11px;
  --reference-index-gap: 12px;
  --reference-title-gap: 24px;
  --reference-chapter-label-gap: 20px;
  --reference-scroll-offset: 28px;
  --reference-mobile-head-space: 44px;
  --reference-mobile-head-end: 40px;
  --reference-mobile-lead-size: 18px;
}

.reference-head {
  padding-top: var(--reference-head-space);
  padding-bottom: var(--reference-head-end);
  background: var(--c-panel);
  color: var(--c-text);
}

.reference-head h1 {
  margin-top: 0;
  margin-bottom: var(--reference-title-gap);
}

.reference-lead {
  font-size: var(--reference-lead-size);
  color: var(--c-accent-dark);
}

.reference-head p:last-child {
  margin-bottom: 0;
}

.reference-layout {
  display: grid;
  grid-template-columns: minmax(0, var(--reference-index-width)) minmax(0, 1fr);
  align-items: start;
  gap: var(--reference-column-gap);
  margin-top: var(--section-gap);
}

.reference-toc {
  flex-direction: column;
  flex-wrap: nowrap;
  min-width: 0;
}

.reference-toc a {
  gap: var(--reference-index-gap);
  font-size: var(--reference-index-size);
}

.reference-toc .mono {
  font-size: var(--reference-index-number-size);
  color: var(--c-muted);
}

.reference-body {
  min-width: 0;
}

.reference-chapter {
  scroll-margin-top: var(--reference-scroll-offset);
}

.reference-chapter + .reference-chapter {
  margin-top: var(--section-gap);
}

.reference-chapter > h2 {
  margin-top: var(--reference-chapter-label-gap);
}

.reference-chapter > p:last-child {
  margin-bottom: 0;
}

@media (max-width: 1000px) {
  .reference-layout {
    display: block;
  }

  .reference-toc {
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    margin-bottom: var(--reference-head-end);
  }

  .reference-toc a {
    flex-shrink: 0;
  }
}

@media (max-width: 640px) {
  .reference-head {
    padding-top: var(--reference-mobile-head-space);
    padding-bottom: var(--reference-mobile-head-end);
  }

  .reference-lead {
    font-size: var(--reference-mobile-lead-size);
  }
}