:root {
  --navigation-background: #0f0f0f;
  --navigation-foreground: #ebebeb;
  --navigation-muted: #858585;
  --navigation-accent: #2eb88a;
  background-color: var(--navigation-background);
  color-scheme: dark;
}
html.light {
  --navigation-background: #fff;
  --navigation-foreground: #212121;
  --navigation-muted: #6b6b6b;
  --navigation-accent: #238b68;
  color-scheme: light;
}
.page-navigation {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--navigation-background);
  color: var(--navigation-foreground);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 180ms ease, visibility 180ms;
}
html[data-page-navigation] .page-navigation {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
html[data-page-navigation="loading"] body > :not(.page-navigation) {
  visibility: hidden;
}
.page-navigation__status {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 24px;
  font: 400 14px/1.5 'Space Grotesk', sans-serif;
  letter-spacing: .01em;
}
.page-navigation__spinner {
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--navigation-muted);
  border-top-color: var(--navigation-accent);
  border-radius: 50%;
  animation: navigation-spin 800ms linear infinite;
}
.page-navigation__progress {
  position: absolute;
  top: 0;
  left: 0;
  width: 40%;
  height: 2px;
  background: var(--navigation-accent);
  animation: navigation-progress 1.2s ease-in-out infinite;
}
@keyframes navigation-spin { to { transform: rotate(360deg); } }
@keyframes navigation-progress {
  from { transform: translateX(-100%); }
  to { transform: translateX(350%); }
}
@media (prefers-reduced-motion: reduce) {
  .page-navigation { transition: none; }
  .page-navigation__spinner, .page-navigation__progress { animation: none; }
  .page-navigation__progress { width: 100%; opacity: .6; }
}