*, *::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.

   clip, not hidden. `hidden` on the body is honoured on a desktop and only
   half-honoured on a phone: iOS will still pan the page sideways to bring a
   focused element into view. Tapping a snap focuses its button while the
   piece is growing out from the edge of the sphere, and for a few frames it
   reached past the screen — Safari scrolled across to show it, then back when
   it had finished growing. That was the snap going to the side and coming
   back. `clip` leaves nothing there to scroll to, and makes no scroll
   container of its own either. */
html, body { overflow-x: clip; }

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