/* The app's colours (HeroUI's --background / --foreground, light and dark). */
  :root { --background: oklch(0.9702 0 0); --foreground: oklch(0.2103 0.0059 285.89); }
  @media (prefers-color-scheme: dark) {
    :root { --background: oklch(12% 0.005 285.823); --foreground: oklch(0.9911 0 0); }
  }
  body { font: 16px/1.6 system-ui, sans-serif; color: var(--foreground);
    background: var(--background); max-width: 42rem; margin: 0 auto;
    padding: 2rem 1.25rem; }
  h1 { font-size: 1.875rem; margin: 0 0 1rem; }
  h2 { font-size: 1.25rem; margin: 2rem 0 0.75rem; }
  ul { padding-left: 1.5rem; }
  a { color: inherit; }
  .site-header { display: flex; align-items: center; margin-bottom: 2rem; }
  .site-header a { display: flex; align-items: center; text-decoration: none;
    font-weight: 700; }
  .site-header img { width: 23px; height: 23px; margin-right: 0.5rem; }
  @media (prefers-color-scheme: dark) { .site-header img { filter: invert(1); } }
  .site-footer { margin-top: 3rem; padding-top: 1rem; font-size: 0.875rem;
    border-top: 1px solid rgba(128, 128, 128, 0.35); display: flex;
    flex-wrap: wrap; gap: 0.5rem 1.25rem; opacity: 0.8; }