*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--page);
  color: var(--ink);
  font-family: var(--font);
  font-weight: var(--weight);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

a { color: inherit; text-decoration: none; }

/* The layer owns this and nothing else. It is not a positioning context for the
   chrome, which is fixed to the viewport and outlives every route. */
#stage { display: block; }

/* Nothing may scroll sideways: the gallery draws frames slightly oversized so
   no seam can open between them, and that overhang is not content. */
body { overflow-x: hidden; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}