/* Shared directory and product-document header. */
:root{--header-h:64px;--header-nav-max:960px;--site-content-max:var(--header-nav-max);--header-nav-pad-x:1.25rem}
html{scrollbar-gutter:stable;scroll-behavior:smooth}
.site-header{position:fixed;inset:0 0 auto;z-index:100;height:var(--header-h);box-sizing:border-box;border-bottom:1px solid #00000017;background:#f5f5f4f5;backdrop-filter:blur(14px)}
.site-header nav{box-sizing:border-box;width:100%;max-width:var(--header-nav-max);height:100%;margin:auto;padding:0 var(--header-nav-pad-x);display:flex;align-items:center;justify-content:space-between;gap:16px}
.nav-identity{display:flex;align-items:center;gap:16px;min-width:0}
.site-header a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;flex-shrink:0;padding:0;border-radius:6px;color:#52525b;font-size:.875rem;line-height:1.25;text-decoration:none}
.site-header a:hover{color:#18181b}.site-header .site-product-brand{justify-content:flex-start;color:var(--text,#18181b);font-size:1rem;font-weight:650;letter-spacing:-.025em}
.site-family-back{gap:4px}.identity-divider{height:20px;width:1px;background:var(--border,#d8d8d6)}



.site-header :is(a,button):focus-visible{outline:2px solid var(--link,CanvasText);outline-offset:3px}
@media(max-width:600px){:root{--header-nav-pad-x:1rem}.site-header nav{gap:8px}.nav-identity{gap:8px}.site-family-back .family-label{display:none}.site-header .site-product-brand{font-size:.9375rem}.identity-divider{display:none}}
@media(max-width:360px){:root{--header-nav-pad-x:12px}.site-header .site-product-brand{font-size:.875rem;max-width:130px}.nav-identity{gap:4px}}
/* Shared footer with sister-site links */
.site-footer {
  margin-top: auto;
  padding: 1.6rem 1.25rem 2.1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-align: center;
  font-size: 0.8125rem;
  color: #64748b;
}

.site-footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 100%;
  gap: 1.25rem;
}

.site-footer-links a {
  color: #475569;
  text-decoration: none;
  font-weight: 500;
}

.site-footer-links a:hover {
  color: #0f172a;
  text-decoration: underline;
  text-underline-offset: 0.25rem;
}

[data-site-footer] {
  margin-top: auto;
}

#tools{scroll-margin-block-start:calc(var(--header-h) + 24px)}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

@media(max-width:360px){.site-header .site-product-brand{max-width:none;font-size:.9375rem}}