/* BTE r10: diffuse light behind the approved layout.
   The CSS field also covers no-JS, unavailable Canvas2D and print. */
body[data-page-surface]{
  isolation:isolate;
  background-color:#f8fbff;
  background-image:
    radial-gradient(ellipse 82% 780px at 112% 350px,#84b9ed59,transparent 77%),
    radial-gradient(ellipse 76% 900px at -14% 1600px,#a7d6ed42,transparent 76%),
    radial-gradient(ellipse 88% 1000px at 106% 3100px,#b0bce52b,transparent 78%),
    linear-gradient(180deg,#f9fcff 0%,#f4f9fd 47%,#f8fbff 100%);
  background-attachment:scroll;
  background-repeat:no-repeat;
}
body[data-page-surface="inner"]{
  background-image:
    radial-gradient(ellipse 85% 700px at 112% 420px,#9bc8ee45,transparent 77%),
    radial-gradient(ellipse 80% 950px at -12% 1800px,#b1d9ee36,transparent 76%),
    linear-gradient(180deg,#f9fcff,#f5f9fd 55%,#f8fbff);
}
/* A single small raster is softly upscaled by the browser. No CSS blur,
   backdrop, new stacking layer above copy, or interaction interception. */
body[data-page-surface].has-atmosphere{
  background-image:linear-gradient(180deg,#f9fcff,#f6faff 52%,#f9fcff);
}
body[data-page-surface]>.bte-atmosphere{
  position:fixed;
  inset:0 auto auto 0;
  width:100%;
  height:100%;
  height:100lvh;
  display:block;
  z-index:-1;
  pointer-events:none;
  user-select:none;
  contain:strict;
}
@media(max-width:600px){
  body[data-page-surface]{
    background-image:
      radial-gradient(ellipse 145% 720px at 115% 470px,#9ac8ef47,transparent 78%),
      radial-gradient(ellipse 125% 1000px at -25% 1800px,#b4d9ee32,transparent 78%),
      linear-gradient(180deg,#f9fcff,#f5f9fd 50%,#f9fcff);
  }
  body[data-page-surface].has-atmosphere{
    background-image:linear-gradient(180deg,#f9fcff,#f6faff 52%,#f9fcff);
  }
}
@media print{
  body[data-page-surface]{background:#fff!important}
  body[data-page-surface]>.bte-atmosphere{display:none!important}
}