.ds-reference {
  padding:var(--space-16) 0
}
.ds-reference header h1 {
  font:600 clamp(48px,7vw,96px)/1.02 var(--display);
  letter-spacing:-.07em
}
.ds-reference p,.ds-reference li {
  color:var(--muted);
  line-height:var(--line-body)
}
.ds-reference header>p {
  max-width:760px;
  font-size:var(--text-lead)
}
.ds-reference section {
  padding:var(--space-12) 0;
  border-top:1px solid var(--stroke);
  scroll-margin-top:var(--space-8)
}
.ds-reference h2 {
  font:600 var(--heading-section)/1.1 var(--display);
  letter-spacing:-.06em
}
.ds-reference h3 {
  font:600 var(--heading-card)/1.3 var(--display)
}
.ds-reference-nav {
  display:flex;
  gap:var(--space-5);
  flex-wrap:wrap;
  padding:var(--space-6) 0
}
.ds-reference-nav a {
  font-size:var(--text-small);
  text-decoration:underline
}
.ds-reference-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--space-5)
}
.ds-swatch {
  height:80px;
  border:1px solid var(--stroke);
  border-radius:var(--radius-image)
}
.ds-reference code {
  font-size:var(--text-caption);
  overflow-wrap:anywhere
}
.ds-reference .ds-panel {
  margin:var(--space-6) 0
}
.ds-metric {
  font:600 48px/1.1 var(--display)
}
.ds-table-wrap {
  overflow:auto
}
.ds-reference table {
  border-collapse:collapse;
  width:100%;
  margin-top:var(--space-6)
}
.ds-reference td,.ds-reference th {
  text-align:left;
  border-bottom:1px solid var(--stroke);
  padding:var(--space-3);
  font-size:var(--text-small)
}
.ds-reference summary {
  cursor:pointer;
  padding:var(--space-4);
  background:var(--soft);
  border-radius:var(--radius-image)
}
button:disabled {
  cursor:not-allowed;
  opacity:.5
}
@media(max-width:850px) {
  .ds-reference-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }

}