.docs-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 24px; border-bottom: 1px solid #ececea; }
.docs-top .top-links { position: static; margin: 0; }
.docs-link[aria-current] { color: #111; }
.docs-brand { color: #111; text-decoration: none; font-size: 1rem; }
.docs-layout { display: grid; grid-template-columns: 220px minmax(0, 720px); gap: 64px; padding-block: 48px 96px; }
.docs-nav { position: sticky; top: 32px; align-self: start; font-size: 0.9375rem; }
.docs-nav ul { list-style: none; margin: 0 0 28px; padding: 0; }
.docs-nav li a { display: block; padding: 6px 0; color: #555; text-decoration: none; }
.docs-nav li a:hover { color: #111; }
.docs-nav a[aria-current="page"] { color: #111; }
.docs-group { margin: 0 0 6px; font-size: 0.75rem; color: #888; }
.docs-content { min-width: 0; font-size: 1rem; line-height: 1.7; color: #222; }
.docs-content h1 { font-size: clamp(2rem, 3vw, 2.75rem); line-height: 1.1; letter-spacing: -0.04em; margin-bottom: 32px; }
.docs-content h2 { font-size: 1.5rem; line-height: 1.3; letter-spacing: -0.02em; margin: 48px 0 16px; }
.docs-content h3 { font-size: 1.125rem; margin: 36px 0 12px; font-weight: 400; }
.docs-content p, .docs-content ul, .docs-content ol { margin: 0 0 18px; }
.docs-content a { color: #111; text-underline-offset: 3px; }
.docs-content code { font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace; font-size: 0.875em; background: #f3f3f1; padding: 2px 5px; border-radius: 4px; }
.docs-content pre.code { background: #f5f5f3; padding: 20px 22px; overflow-x: auto; margin: 0 0 24px; line-height: 1.6; }
.docs-content pre.code code { background: none; padding: 0; font-size: 0.8125rem; }
.docs-content .table { overflow-x: auto; margin: 0 0 24px; }
.docs-content table { border-collapse: collapse; width: 100%; font-size: 0.9375rem; }
.docs-content th, .docs-content td { text-align: left; vertical-align: top; padding: 10px 16px 10px 0; border-bottom: 1px solid #ececea; }
.docs-content th { font-weight: 400; color: #666; }
.docs-figure { margin: 8px 0 32px; }
.docs-figure img { display: block; width: 100%; height: auto; background: #f5f5f3; }
.docs-figure.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.docs-figure figcaption { grid-column: 1 / -1; margin-top: 10px; font-size: 0.875rem; line-height: 1.5; color: #777; }
.docs-examples { list-style: none; padding: 0; display: grid; gap: 40px; }
.docs-examples li { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 24px; align-items: center; }
.docs-examples img { width: 100%; height: auto; background: #f5f5f3; }
.docs-examples h2 { margin: 0 0 4px; font-size: 1.25rem; }
.docs-examples p { margin: 0 0 6px; color: #555; }
.docs-meta { font-size: 0.875rem; color: #888 !important; }
.docs-pager { display: flex; justify-content: space-between; gap: 24px; margin-top: 64px; padding-top: 24px; border-top: 1px solid #ececea; }
.docs-pager a { display: flex; flex-direction: column; gap: 2px; text-decoration: none; color: #111; }
.docs-pager a span { font-size: 0.75rem; color: #888; }
.docs-pager .next { text-align: right; margin-left: auto; }
@media (max-width: 860px) {
  .docs-layout { grid-template-columns: minmax(0, 1fr); gap: 24px; padding-top: 24px; }
  .docs-nav { position: static; display: flex; flex-wrap: wrap; gap: 0 24px; padding-bottom: 16px; border-bottom: 1px solid #ececea; }
  .docs-nav ul { display: flex; flex-wrap: wrap; gap: 0 16px; margin-bottom: 8px; }
  .docs-group { width: 100%; margin-top: 8px; }
  .docs-examples li { grid-template-columns: minmax(0, 1fr); gap: 12px; }
}