/* The visualizer page is the widget and nothing else. widget.js sizes its
   iframe to the window (width 100%, height = the visual viewport), so the page
   only has to give it no margins and the same dark ground it paints, so a
   resize never flashes white. No overflow or touch-action rules on html/body:
   see the iOS scroll note in the README. */

/* Every other page opts in to the cross-document view transition (stage.css),
   so this one has to as well: otherwise Chrome aborts the transition into it
   with an InvalidStateError on every arrival. Same reduced-motion opt-out. */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

html,
body {
  margin: 0;
  background: #0a0a0a;
  color: #f4f7fb;
  font-family: Barlow, "Helvetica Neue", Arial, sans-serif;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.fallback {
  margin: 0;
  padding: 32px 16px;
  text-align: center;
}

.fallback a { color: #58a6ff; }