/* Fade the page to graphite, then show the symbol once in the new document. */
/* Preserve the outgoing frame across the browser's document/canvas swap. */
@view-transition { navigation: auto; }
::view-transition-group(root) { animation-duration: .14s; }
html { background-color: #17191d; }
html[data-page-transition] { background-color: #17191d !important; }
html[data-page-transition]::before,
html[data-page-transition]::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 2147483647;
}
html[data-page-transition]::before {
  background: #17191d;
  pointer-events: auto;
}
html[data-page-transition]::after {
  /* Inline the existing vector so a new document cannot briefly lose the logo. */
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%2245%2045%20148.8%20148.8%22%3E%20%3Cpolygon%20points%3D%2245%2082.2%2045%20193.8%2082.2%20193.8%20119.4%20156.6%2082.2%20156.6%2082.2%2082.2%20119.4%2082.2%20119.4%2045%2082.2%2045%2045%2082.2%22%20fill%3D%22%23fff%22%2F%3E%20%3Cg%20fill%3D%22%23db0032%22%3E%20%3Crect%20x%3D%22156.6%22%20y%3D%2282.2%22%20width%3D%2237.2%22%20height%3D%2237.2%22%2F%3E%20%3Crect%20x%3D%22119.4%22%20y%3D%22119.4%22%20width%3D%2237.2%22%20height%3D%2237.2%22%2F%3E%20%3Crect%20x%3D%22119.4%22%20y%3D%2245%22%20width%3D%2237.2%22%20height%3D%2237.2%22%2F%3E%20%3C%2Fg%3E%20%3Crect%20x%3D%22156.6%22%20y%3D%22119.4%22%20width%3D%2237.2%22%20height%3D%2274.4%22%20fill%3D%22%23fff%22%2F%3E%20%3C%2Fsvg%3E") center / 72px 72px no-repeat;
  opacity: 0;
  pointer-events: none;
}
html[data-page-transition="enter"]::before {
  animation: site-page-enter .6s cubic-bezier(.22,1,.36,1) both;
}
html[data-page-transition="enter"]::after {
  animation: site-symbol-enter .6s ease-in-out both;
}
html[data-page-transition="leave"]::before {
  animation: site-page-leave .14s ease-out both;
}
@keyframes site-page-enter {
  0%, 55% { opacity: 1; visibility: visible; }
  100% { opacity: 0; visibility: hidden; }
}
@keyframes site-symbol-enter {
  0% { opacity: 0; }
  25%, 55% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes site-page-leave {
  from { opacity: 0; }
  to { opacity: 1; }
}
@media (max-width: 680px) {
  html[data-page-transition]::after { background-size: 56px 56px; }
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(root) { animation-duration: 0s; }
  html[data-page-transition]::before,
  html[data-page-transition]::after { animation: none; }
}