html[data-page-transition] { overflow: hidden; }
html { scrollbar-gutter: stable; }
/* Keep the outgoing frame on screen until the next document is ready to paint.
   Both documents already show the same diamond, so no second crossfade is needed. */
@view-transition { navigation: auto; }
::view-transition-group(root), ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
::view-transition-old(root) { display: none; }
html[data-page-transition="arriving"]::before {
  content: ''; position: fixed; inset: 0; z-index: 9998;
  background: var(--transit-bg, #0e1116); pointer-events: none;
}
.page-transit {
  position: fixed; inset: 0; z-index: 9999; isolation: isolate;
  color: var(--transit-ink, #f5f7fa); overscroll-behavior: contain;
  contain: strict;
}
.page-transit[hidden] { display: none; }
.page-transit-veil { position: absolute; inset: 0; background: var(--transit-bg, #0e1116); opacity: var(--transit-veil, 0); }
.page-transit canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.page-transit-copy {
  position: absolute; top: calc(50% + 110px); left: 24px; right: 24px;
  text-align: center; opacity: var(--transit-veil, 0);
  font: 13px/1.8 "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
}
.page-transit-copy small { display: block; margin-bottom: 9px; font-size: 12px; letter-spacing: .12em; color: var(--transit-accent, #ff7a1a); }
.page-transit-copy span { display: block; letter-spacing: .015em; }
@media (max-width: 760px), (max-height: 520px) {
  .page-transit-copy { top: calc(50% + 78px); }
}
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  html[data-page-transition] { overflow: initial; }
  html[data-page-transition="arriving"]::before, .page-transit { display: none !important; }
}