html, body { height: 100%; }
body { display: flex; flex-direction: column; background: var(--darker); }
.container { margin-inline: auto; padding-inline: var(--fluid-gutter); }
.site-header {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  height: 3rem;
  background: var(--black);
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}
.site-nav { display: flex; align-items: center; gap: var(--fluid-space-md); font-size: var(--fluid-text-base); }
.site-nav a { color: var(--lighter); text-decoration: none; }
.site-logo { width: 3.5rem; }
.nav-faq { margin-left: auto; }
.github-link svg { width: 2rem; height: auto; color: var(--white); }
.scrollable-content { display: flex; flex: 1; min-height: 0; flex-direction: column; overflow-y: auto; }
.site-footer { display: flex; align-items: center; margin-top: auto; min-height: var(--fluid-space-xl); flex-shrink: 0; }
.site-footer .container { color: var(--midtone); text-align: center; font-size: var(--fluid-text-base); }
.site-footer a { color: var(--light); }
.hero, .feature { display: flex; flex-direction: column; align-items: center; text-align: center; }
.hero { padding-block: var(--fluid-space-xl); }
.hero-logo { width: 8rem; }
.hero-tagline { border-top: 2px solid var(--white); margin-top: var(--fluid-space-lg); padding-top: var(--fluid-space-3xs); }
.hero-summary { margin-top: var(--fluid-space-lg); max-width: 100%; }
.demo-video { margin-top: var(--fluid-space-xl); width: min(560px, 100%); height: auto; aspect-ratio: 560 / 315; }
.feature { padding-block: var(--fluid-space-2xl); }
.feature-band { margin-top: var(--fluid-space-md); background: var(--dark); }
.feature h2 { margin-top: 0; }
.feature-intro { margin-top: var(--fluid-space-3xs); }
.nowrap { white-space: nowrap; }
.docs-link {
  margin-block: var(--fluid-space-2xl);
  padding: var(--fluid-space-3xs) var(--fluid-space-2xs);
  color: var(--brand-1);
  border: 1px solid var(--brand-1);
  border-radius: 0.25rem;
  text-decoration: none;
}
.docs-link:hover { background: var(--dark); box-shadow: 0 1px 3px rgb(0 0 0 / 0.1); }
.content-page { padding-bottom: var(--fluid-space-3xl); }
.docs-content { max-width: 50rem; }
.docs-content .highlight { font-size: var(--fluid-text-base); }
.docs-content :not(pre) > code { white-space: normal; overflow-wrap: anywhere; }
/* Constrain long examples and embeds to the viewport on small screens. */
.feature > *, .hero > *, .docs-content { min-width: 0; }
@media (min-width: 48rem) {
  .site-header { height: 4rem; }
  .site-logo { width: 4rem; }
  .hero { padding-block: var(--fluid-space-3xl); }
  .hero-logo { width: 10rem; }
}