/* One continuous field of overlapping brand color, with no document-height cutoff. */
:root {
  --ux-mist-mint:rgb(22 103 71 / 7%);
  --ux-mist-sage:rgb(137 165 120 / 8%);
  --ux-mist-blue:rgb(100 135 161 / 5%);
  --ux-mist-warm:rgb(170 112 36 / 2%);
}

/* Give supporting text enough contrast even where the light color washes overlap. */
html[data-academy-theme="light"] {--ux-muted:#54665d}
html[data-academy-theme="light"] .ux-student:has(.ep-page) {--ux-muted:inherit}

html[data-academy-theme="dark"] {
  --ux-mist-mint:rgb(139 204 168 / 17%);
  --ux-mist-sage:rgb(96 147 113 / 8%);
  --ux-mist-blue:rgb(154 191 255 / 9%);
  --ux-mist-warm:rgb(229 186 120 / 2%);
}

body:is(.ux-site,.ux-student,[class*="learn-mode-"]) {
  background-color:var(--ux-bg);
  background-image:
    radial-gradient(ellipse 90% 75% at 102% -8%,var(--ux-mist-mint) 0%,transparent 100%),
    radial-gradient(ellipse 85% 78% at -15% 50%,var(--ux-mist-blue) 0%,transparent 100%),
    radial-gradient(ellipse 85% 70% at 90% 115%,var(--ux-mist-sage) 0%,transparent 100%),
    radial-gradient(ellipse 90% 70% at 25% 105%,var(--ux-mist-warm) 0%,transparent 100%)!important;
  /* Size to the whole painting area, not a finite strip at the top of the page.
     Fixed attachment keeps the same continuous field behind long, scrolling pages.
     Browsers falling back to scroll attachment still paint the entire body. */
  background-size:100% 100%!important;
  background-repeat:no-repeat!important;
  background-position:center top!important;
  background-attachment:fixed!important;
}

/* Carry the same atmosphere through the course introduction and its surrounding space. */
.ux-site .cp-hero {background:transparent;border-bottom:0}

@media print, (forced-colors:active) {
  body:is(.ux-site,.ux-student,[class*="learn-mode-"]) {background-image:none!important}
}