/* Keep the viewport width stable before and after the scrollbar appears. */
html { scrollbar-gutter: stable; }
/* Sequential page dissolve: old 1->0, then new 0->1. Navigation is unchanged. */
@view-transition { navigation: auto; }
::view-transition { background: #f7f7f7; }
::view-transition-group(root) { animation: none; }
::view-transition-old(root) {
  animation: td316-dissolve-out 300ms ease-in-out 0ms both;
}
::view-transition-new(root) {
  animation: td316-dissolve-in 300ms ease-in-out 300ms both;
}
@keyframes td316-dissolve-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes td316-dissolve-in { from { opacity: 0; } to { opacity: 1; } }
#td316-global-header { view-transition-name: td316-fixed-header; }
::view-transition-group(td316-fixed-header) { animation: none; }
::view-transition-old(td316-fixed-header) { animation: none; opacity: 0; }
::view-transition-new(td316-fixed-header) { animation: none; opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* The early-head script marks arrivals before their first paint. */
html.td316-dissolve-pending :is(.page-container-wrapper, .td316-section-crumb-anchor, #td316-reference-heading) { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  html.td316-dissolve-pending :is(.page-container-wrapper, .td316-section-crumb-anchor, #td316-reference-heading) { opacity: 1; }
}