.theme-dissolve {
  position: fixed;
  z-index: 2147482500;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  will-change: opacity, transform;
  transform: translateZ(0);
  backface-visibility: hidden;
  contain: strict;
  /* The fill is opaque, so there is nothing for a backdrop blur to do. */
}

/* The veil is now a circle that grows from the control that was pressed,
   painted in the incoming theme's own page colour (set inline by
   js/theme.js) — so the switch reads as the new theme sweeping in rather
   than as a scrim passing over the old one. It is fully opaque, which is
   why the old midpoint flash cannot return: the page underneath is never
   seen half-changed. */
/* js/theme.js sets the fill inline (a white frost going to light, the
   solid page colour going to dark); these are the fallbacks if it does
   not. Anything painted ON the sweep is white, which is legible over the
   frost while the darker page still shows through it. */
.theme-dissolve { color: #ffffff; }
.theme-dissolve--to-light { background: rgba(255, 255, 255, .6); }
.theme-dissolve--to-dark { background: #0f0f0f; }

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  /* No blur available, so the frost has to carry the change on tint
     alone and needs to be denser. */
  .theme-dissolve--to-light { background: rgba(250, 250, 250, .82); }
  .theme-dissolve--to-dark { background: #0f0f0f; }
}

@media (prefers-reduced-motion: reduce) {
  .theme-dissolve { display: none; }
}