*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }
:root { color-scheme: light dark; }
body { background: var(--surface-primary); color: var(--ink-body); }
.container { width: 100%; max-width: var(--content-full); margin-inline: auto; padding-inline: var(--space-4); }
.skip-link { position: absolute; left: -9999px;  top: 0; z-index: 30; padding: var(--space-2) var(--space-3); background: var(--brand-primary); color: var(--ink-inverse); text-decoration: none; font-weight: var(--fw-semibold); }
.skip-link:focus { left: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.prose { max-width: var(--measure); }
.fgl-icon { display: inline-flex; }
.fgl-icon svg { width: var(--icon-size); height: var(--icon-size); stroke-width: var(--icon-stroke); }
:where(a, button, [role="button"], summary, input, select, textarea):focus-visible { outline: 2px solid transparent;  outline-offset: 2px;  box-shadow: var(--focus-ring); }
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}