.api-page .guide-intro {
  padding-block: 40px 34px;
}

.api-page .guide-intro h1 {
  font-size: clamp(2.5rem, 5vw, 4.4rem);
}

.api-page .guide-lede {
  margin-bottom: 0;
}

.api-page .site-nav a[aria-current] {
  color: var(--cyan);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

.api-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  padding-block: 18px;
  border-bottom: 1px solid var(--line-strong);
  font-family: var(--mono);
  font-size: 0.76rem;
}

.api-tabs a {
  padding-block: 5px;
  text-decoration: none;
}

.api-tabs a[aria-current="page"] {
  color: var(--cyan);
  box-shadow: 0 2px var(--cyan);
}

.api-page .guide-nav {
  max-height: calc(100dvh - var(--header) - 50px);
  overflow-y: auto;
}

.api-page .guide-nav a {
  overflow-wrap: anywhere;
}

.api-page .guide-nav-note a {
  display: inline;
  padding: 0;
  border: 0;
  font: inherit;
  text-decoration: underline;
}

.api-section + .api-section {
  margin-top: 40px;
  padding-top: 36px;
  border-top: 1px solid var(--line-strong);
}

.api-section h2 {
  margin: 0 0 18px;
  font-family: var(--serif);
  font-size: clamp(1.75rem, 3vw, 2.3rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.035em;
  overflow-wrap: anywhere;
}

.api-section h3 {
  margin: 26px 0 12px;
  font-size: 1.05rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.api-section p,
.api-section li {
  color: var(--muted);
  font-size: 0.9rem;
}

.api-section p {
  margin: 14px 0;
}

.api-section p code,
.api-section li code,
.api-table code {
  color: var(--ink);
  font-family: var(--mono);
  font-size: 0.86em;
  overflow-wrap: anywhere;
}

.api-table-wrap {
  max-width: 100%;
  margin-block: 18px;
  overflow-x: auto;
  border: 1px solid var(--line-strong);
  background: var(--white);
}

.api-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 0.82rem;
  line-height: 1.6;
}

.api-table caption {
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  background: var(--paper-warm);
  font-family: var(--mono);
  font-size: 0.65rem;
  text-align: left;
}

.api-table th,
.api-table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  overflow-wrap: anywhere;
}

.api-table thead th {
  background: var(--paper-warm);
  font-size: 0.72rem;
}

.api-table tbody th {
  min-width: 145px;
  font-weight: 500;
}

.api-table tbody tr:last-child > * {
  border-bottom: 0;
}

.api-table td {
  color: var(--muted);
}

.api-signature {
  margin-block: 14px;
  border-left: 3px solid var(--cyan);
  color: var(--ink);
  background: var(--cyan-wash);
}

.api-signature code {
  min-width: 0;
  padding: 16px 18px;
  font-size: 0.73rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.api-note {
  padding: 16px 20px;
  border-left: 3px solid var(--acid-dark);
  background: var(--acid-wash);
}

.api-section .api-note {
  color: var(--ink);
}

.api-page .code-panel {
  margin-block: 18px;
}

.api-page .copy-button {
  min-height: 32px;
  font-size: 0.64rem;
}

.api-page .code-toolbar {
  font-size: 0.65rem;
}

.api-page .code-panel pre code {
  font-size: 0.76rem;
}

.api-cards {
  display: grid;
  gap: 14px;
  margin-block: 24px;
}

.api-doc-card {
  display: block;
  padding: 24px;
  border: 1px solid var(--line-strong);
  background: var(--white);
  text-decoration: none;
}

.api-doc-card:hover,
.api-doc-card:focus-visible {
  border-color: var(--cyan);
  background: var(--cyan-wash);
}

.api-doc-card strong {
  font-family: var(--serif);
  font-size: 1.65rem;
}

.api-doc-card p {
  margin-bottom: 0;
}

.api-section details {
  margin-block: 18px;
}

.api-section summary {
  padding: 12px 14px;
  border: 1px solid var(--line-strong);
  background: var(--paper-warm);
  font-family: var(--mono);
  font-size: 0.78rem;
  cursor: pointer;
}

.api-section .api-schema {
  padding: 13px 16px;
  background: var(--paper-warm);
  overflow-wrap: anywhere;
}

@media (max-width: 720px) {
  .api-page .guide-nav {
    max-height: none;
    overflow: visible;
  }

  .api-table th,
  .api-table td {
    padding: 10px;
  }

  .api-page .code-panel pre code {
    padding: 18px 16px;
    font-size: 0.72rem;
  }
}