.docs-page {
  max-width:940px;
  padding-block:48px 72px
}

.docs-page h1 {
  font-size:clamp(38px,6vw,64px)
}

.docs-page h2 {
  font-size:clamp(25px,3vw,34px);
  margin-top:52px;
  padding-top:28px;
  border-top:1px solid var(--line)
}

.docs-page p,.docs-page li,.docs-page td {
  overflow-wrap:anywhere
}

.docs-page li {
  color:var(--muted);
  margin-bottom:12px
}

.docs-page strong {
  color:var(--text)
}

.docs-page p a,.docs-page td a {
  color:var(--accent);
  text-decoration:underline;
  text-underline-offset:3px
}

.docs-page :not(pre)>code {
  font: .88em var(--mono);
  color:var(--accent)
}

.docs-toc {
  display:flex;
  flex-wrap:wrap;
  gap:8px 22px;
  margin-bottom:24px;
  font-size:14px
}

.docs-code {
  margin-block:22px
}

.docs-code pre {
  color:var(--accent)
}

.copy-code {
  color:var(--text);
  background:transparent;
  border:1px solid var(--line);
  border-radius:4px;
  padding:8px 14px;
  min-height:44px;
  cursor:pointer;
  outline-offset:3px
}

.copy-code:hover {
  color:var(--accent);
  border-color:var(--accent)
}

.docs-table {
  overflow-x:auto;
  margin-block:24px;
  outline-offset:4px
}

.docs-table table {
  width:100%;
  border-collapse:collapse;
  font-size:14px
}

.docs-table th,.docs-table td {
  text-align:left;
  vertical-align:top;
  padding:14px 12px;
  border-bottom:1px solid var(--line)
}

.docs-table th {
  color:var(--text);
  background:var(--panel)
}

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

#copy-status {
  min-height:1.6em
}

@media(max-width:620px) {
  .docs-page {
    padding-block:36px
  }
  .docs-table table {
    min-width:560px
  }
  .docs-page ol,.docs-page ul {
    padding-left:22px
  }
}