/* Low-power mode (phones, tablets, low-RAM / few-core devices, Save-Data). html.cf-low is set
   before first paint. Large backdrop blurs over the animated background are re-computed every frame
   and are the single most expensive effect on mobile GPUs, so they are lightened or replaced with
   a more opaque surface that looks the same at a glance. */
html.cf-low .nav,
html.cf-low .nav.nav-scrolled,
html.cf-low .wf-page .nav {
  -webkit-backdrop-filter: blur(8px) !important;
  backdrop-filter: blur(8px) !important;
  background: color-mix(in srgb, var(--bg, #07040f) 82%, transparent) !important;
}
html.cf-low .mobile-menu {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  background: color-mix(in srgb, var(--surface, #120b24) 96%, transparent) !important;
}
html.cf-low body *:not(.nav):not(.mobile-menu) {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
html.cf-low .form-card,
html.cf-low .pos-embed-card,
html.cf-low .menu-toggle,
html.cf-low .filter {
  background: color-mix(in srgb, var(--surface, #120b24) 88%, transparent) !important;
}

/* Images and embeds never cause horizontal scrolling. */
img, video, iframe { max-width: 100%; }
html, body { overflow-x: clip; }

/* Respect users who ask for less motion. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; }
}

/* Under the WebGL canvas: the same dark-purple glow, so any frame where the canvas is not drawn
   (toolbar resize, GPU context loss, slow first frame) never flashes black or white. */
body.story { background: radial-gradient(60% 50% at 50% 40%, #2d0f78 0%, #0a0418 55%, #030208 100%) fixed #030208; }
html[data-theme="light"] body.story { background: radial-gradient(60% 50% at 50% 40%, #d9ccff 0%, #f1eefb 60%, #f7f6fc 100%) fixed #f7f6fc; }
@supports (height: 100lvh) { #bg-canvas { height: 100lvh !important; } }