.documentation-page {
  --documentation-page-rail-width: 14.5rem;
  --documentation-page-layout-gap: 3.5rem;
  background: var(--theme-surface-fill);
  box-sizing: border-box;
  color: var(--theme-body-readable);
  isolation: isolate;
  margin-inline: calc(50% - 50vw);
  padding: clamp(var(--space-16), 6vw, var(--space-24)) var(--section-rail-padding-inline)
    clamp(var(--space-20), 7vw, var(--space-32));
  position: relative;
  width: 100vw;
}

@supports (width: 100dvw) {
  .documentation-page {
    margin-inline: calc(50% - 50dvw);
    width: 100dvw;
  }
}

.documentation-page::before {
  background: var(--theme-surface-fill);
  content: "";
  inset-block: 0;
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
  width: 100vw;
  z-index: -1;
}

@supports (width: 100dvw) {
  .documentation-page::before {
    width: 100dvw;
  }
}

.documentation-page__shell {
  margin-inline: auto;
  max-width: 72rem;
  position: relative;
  width: 100%;
  z-index: 1;
}

.documentation-page__layout {
  display: grid;
  gap: clamp(2.5rem, 4vw, var(--documentation-page-layout-gap));
  grid-template-columns: minmax(12rem, var(--documentation-page-rail-width)) minmax(0, 1fr);
  margin-inline: auto;
  width: 100%;
}

.documentation-page__rail,
.documentation-page__content {
  min-width: 0;
}

.documentation-page__rail-inner {
  display: grid;
  gap: var(--space-6);
}

.documentation-page--sticky-nav .documentation-page__rail-inner {
  position: sticky;
  top: calc(var(--header-offset, 0px) + 2rem);
}

.documentation-page__nav-title {
  margin: 0;
}

.documentation-page__nav-title {
  color: var(--theme-heading-strong);
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1.4vw, 1.45rem);
  font-weight: 560;
  letter-spacing: 0;
  line-height: 1.1;
}

.documentation-page__nav-list {
  display: grid;
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.documentation-page__nav-item {
  display: grid;
  gap: 0.45rem;
}

.documentation-page__nav-link {
  align-items: baseline;
  color: var(--theme-body-readable);
  column-gap: 0.55rem;
  display: inline-flex;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.35;
  opacity: 0.86;
  text-decoration: none;
  width: fit-content;
}

.documentation-page__nav-link:hover,
.documentation-page__nav-link:focus-visible,
.documentation-page__subnav-link:hover,
.documentation-page__subnav-link:focus-visible {
  color: var(--theme-link-hover-color);
  opacity: 1;
}

.documentation-page__nav-index {
  color: var(--color-primary);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  line-height: 1.4;
  text-transform: uppercase;
}

.documentation-page__nav-label {
  color: inherit;
  font-weight: 650;
}

.documentation-page__subnav-list {
  display: grid;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0.1rem 0 0 2.6rem;
}

.documentation-page__subnav-link {
  color: var(--theme-body-readable);
  display: inline-flex;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.35;
  opacity: 0.54;
  text-decoration: none;
  width: fit-content;
}

.documentation-page__content {
  display: grid;
  gap: clamp(var(--space-12), 6vw, var(--space-20));
  justify-self: start;
  max-width: min(100%, 52rem);
}

.documentation-page__section {
  border-top: 1px solid var(--color-outline);
  display: grid;
  gap: clamp(var(--space-4), 2vw, var(--space-6));
  padding-top: clamp(var(--space-6), 3vw, var(--space-8));
  scroll-margin-top: calc(var(--header-offset, 0px) + 2rem);
}

.documentation-page__section-heading :is(h1, h2, h3, h4, h5, h6, p) {
  color: var(--theme-heading-strong) !important;
  font-family: var(--font-display);
  font-size: clamp(2.35rem, 4vw, 4rem);
  font-weight: 540;
  letter-spacing: 0;
  line-height: 1;
  margin: 0;
  text-wrap: balance;
}

.documentation-page__subsections {
  display: grid;
  gap: clamp(var(--space-7), 3vw, var(--space-10));
  margin-top: 0;
}

.documentation-page__subsection {
  display: grid;
  gap: var(--space-3);
  scroll-margin-top: calc(var(--header-offset, 0px) + 2rem);
}

.documentation-page__subsection-heading :is(h1, h2, h3, h4, h5, h6, p) {
  color: var(--color-primary) !important;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  line-height: 1.4;
  margin: 0;
  text-transform: uppercase;
}

.documentation-page__section-body,
.documentation-page__subsection-body {
  color: var(--theme-body-readable);
  font-size: var(--text-body);
  line-height: 1.72;
  max-width: min(100%, 68ch);
}

.documentation-page__section-body > :first-child,
.documentation-page__subsection-body > :first-child {
  margin-top: 0;
}

.documentation-page__section-body > :last-child,
.documentation-page__subsection-body > :last-child {
  margin-bottom: 0;
}

.documentation-page__section-body p,
.documentation-page__section-body ul,
.documentation-page__section-body ol,
.documentation-page__section-body li,
.documentation-page__subsection-body p,
.documentation-page__subsection-body ul,
.documentation-page__subsection-body ol,
.documentation-page__subsection-body li {
  color: inherit;
}

.documentation-page__section-body :is(p, ul, ol) + :is(p, ul, ol),
.documentation-page__subsection-body :is(p, ul, ol) + :is(p, ul, ol) {
  margin-top: var(--space-4);
}

.documentation-page__section-body ul,
.documentation-page__section-body ol,
.documentation-page__subsection-body ul,
.documentation-page__subsection-body ol {
  padding-left: 1.25rem;
}

.documentation-page__section-body li + li,
.documentation-page__subsection-body li + li {
  margin-top: var(--space-2);
}

.documentation-page__section-body a,
.documentation-page__subsection-body a {
  color: var(--theme-link-color);
  text-decoration-color: var(--theme-link-decoration-color);
}

.documentation-page__section-body a:hover,
.documentation-page__section-body a:focus-visible,
.documentation-page__subsection-body a:hover,
.documentation-page__subsection-body a:focus-visible {
  color: var(--theme-link-hover-color);
  text-decoration-color: var(--theme-link-decoration-color-hover);
}

@media (max-width: 991px) {
  .documentation-page__layout {
    grid-template-columns: 1fr;
  }

  .documentation-page__rail {
    order: 2;
  }

  .documentation-page__content {
    order: 1;
  }

  .documentation-page__rail-inner,
  .documentation-page--sticky-nav .documentation-page__rail-inner {
    gap: var(--space-4);
    position: static;
  }

  .documentation-page__nav-list {
    column-gap: var(--space-4);
    display: flex;
    overflow-x: auto;
    padding-bottom: 0.25rem;
    white-space: nowrap;
  }

  .documentation-page__subnav-list {
    display: none;
  }
}

@media (max-width: 767px) {
  .documentation-page {
    padding-block: clamp(var(--space-12), 12vw, var(--space-20));
  }

  .documentation-page__layout,
  .documentation-page__content {
    gap: var(--space-8);
  }

  .documentation-page__section-heading :is(h1, h2, h3, h4, h5, h6, p) {
    font-size: clamp(2rem, 10vw, 3rem);
  }

  .documentation-page__subsection-heading :is(h1, h2, h3, h4, h5, h6, p) {
    font-size: 0.7rem;
  }
}