/* PC-only light gradients and a glass shadow around the centered page. */
@media (min-width: 451px) {
  :root {
    --desktop-glow-background:
      radial-gradient(ellipse at 12% 12%, rgba(255, 255, 255, .86), transparent 56%),
      radial-gradient(ellipse at 0% 78%, rgba(153, 192, 235, .18), transparent 54%),
      radial-gradient(ellipse at 100% 10%, rgba(181, 232, 245, .15), transparent 50%),
      radial-gradient(ellipse at 94% 100%, rgba(192, 188, 231, .14), transparent 52%),
      linear-gradient(155deg, #f1f7fc 0%, #f7fafe 38%, #eef4fc 72%, #eaf0f9 100%);
  }

  html,
  body {
    background: var(--desktop-glow-background) !important;
    background-attachment: fixed !important;
  }

  /* Soft blue shadows stay behind the page and all overlays. */
  body::before {
    content: '';
    position: fixed;
    inset: 0;
    width: min(100%, var(--app-layout-width, 100%));
    margin: 0 auto;
    z-index: 0;
    pointer-events: none;
    box-shadow:
      -12px 0 28px rgba(86, 131, 183, .09),
      12px 0 28px rgba(86, 131, 183, .09),
      -28px 0 64px rgba(153, 185, 220, .06),
      28px 0 64px rgba(153, 185, 220, .06);
  }
}
