.docs-layout {
  display: grid;
  grid-template-columns: 180px minmax(0, 720px);
  gap: clamp(32px, 6vw, 94px);
  padding-block: 65px 74px;
}

.docs-index {
  position: sticky;
  top: 32px;
  display: block;
  align-self: start;
  padding-top: 4px;
}

.docs-index p { margin: 0 0 10px; color: var(--ink); }
.docs-index ul { list-style: none; margin: 0; padding: 0 0 0 13px; border-left: 1px solid var(--line); }
.docs-index li + li { margin-top: 9px; }
.docs-index a { display: inline-block; color: var(--muted); }

.docs-intro h1 {
  margin: 10px 0 13px;
  font-size: clamp(44px, 7vw, 76px);
  letter-spacing: -.065em;
}

.docs-intro > p:last-child { margin-bottom: 29px; font-size: clamp(16px, 2vw, 19px); }
.docs-main { min-width: 0; }
.docs-main section { border-top: 1px solid var(--line); padding-block: 27px 29px; scroll-margin-top: 24px; }
.docs-main section:last-child { padding-bottom: 0; }
.docs-main h2 { margin: 0 0 10px; font-size: clamp(23px, 4vw, 29px); line-height: 1.25; letter-spacing: -.037em; }
.docs-main p, .docs-main li, .docs-engines dd { color: var(--muted); }
.docs-main a { color: var(--amber-hover); text-decoration: underline; text-underline-offset: 3px; }
.docs-main a:hover { color: var(--ink); }
.docs-main strong, .docs-engines dt { color: var(--ink); }
.docs-main ol, .docs-main ul { padding-left: 24px; margin: 0; }
.docs-main li { padding-left: 3px; }
.docs-main li + li { margin-top: 8px; }
.docs-main li::marker { color: var(--amber); }
.docs-main code {
  padding: 2px 5px;
  border-radius: 4px;
  background: var(--surface-hover);
  color: var(--ink);
  font-size: .89em;
  overflow-wrap: anywhere;
}

.docs-callout {
  margin: 15px 0 18px;
  padding: 14px 17px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--amber);
  border-radius: 6px;
}

.docs-callout p { margin: 3px 0 0; }
.docs-engines { margin: 14px 0; }
.docs-engines div { border-block-start: 1px solid var(--line); padding: 10px 0; }
.docs-engines div:last-child { border-block-end: 1px solid var(--line); }
.docs-engines dt { font-weight: 650; }
.docs-engines dd { margin: 3px 0 0; }
.docs-main section > :last-child { margin-bottom: 0; }
.docs-footer { border-top: 1px solid var(--line); }

@media (max-width: 730px) {
  .docs-layout { grid-template-columns: 1fr; padding-block: 39px 53px; }
  .docs-index { position: static; order: 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: 8px; }
  .docs-index ul { display: flex; flex-wrap: wrap; gap: 9px 16px; border-left: 0; padding: 0; }
  .docs-index li + li { margin: 0; }
}