/* The lights on a phone. On a phone every screen's light is drawn without filter: blur(), which
   made the page lag. Each colour below is the same light as in page.css (or the hero's own style in
   index.html), but instead of a straight fade to transparent it fades on a smoothstep curve, which
   has no visible edge: the stops at 0, 20, 40, 60 and 80% carry 100, 89.6, 64.8, 35.2 and 10.4% of
   the colour's alpha. Change a light's colour in both places. */
.m .card-screen .spill,
.m .sx .x-bs > .spill,
.m .sx .x-sx-light,
.m .sx-last .x-lc-light {
  filter: none;
  will-change: auto;
}
.m .sx .x-l-night {
  background:
    radial-gradient(closest-side at 44% 28%, rgba(80, 64, 230, 0.9) 0%, rgba(80, 64, 230, 0.806) 20%, rgba(80, 64, 230, 0.583) 40%, rgba(80, 64, 230, 0.317) 60%, rgba(80, 64, 230, 0.094) 80%, transparent),
    radial-gradient(closest-side at 52% 58%, rgba(160, 50, 130, 0.95) 0%, rgba(160, 50, 130, 0.851) 20%, rgba(160, 50, 130, 0.616) 40%, rgba(160, 50, 130, 0.334) 60%, rgba(160, 50, 130, 0.099) 80%, transparent),
    radial-gradient(closest-side at 58% 88%, rgba(240, 93, 53, 0.9) 0%, rgba(240, 93, 53, 0.806) 20%, rgba(240, 93, 53, 0.583) 40%, rgba(240, 93, 53, 0.317) 60%, rgba(240, 93, 53, 0.094) 80%, transparent);
}
.m .sx .x-l-gold {
  background:
    radial-gradient(closest-side at 50% 30%, rgba(201, 163, 92, 0.85) 0%, rgba(201, 163, 92, 0.762) 20%, rgba(201, 163, 92, 0.551) 40%, rgba(201, 163, 92, 0.299) 60%, rgba(201, 163, 92, 0.088) 80%, transparent),
    radial-gradient(closest-side at 50% 80%, rgba(240, 93, 53, 0.8) 0%, rgba(240, 93, 53, 0.717) 20%, rgba(240, 93, 53, 0.518) 40%, rgba(240, 93, 53, 0.282) 60%, rgba(240, 93, 53, 0.083) 80%, transparent);
}
.m .sx .x-l-cat {
  background:
    radial-gradient(closest-side at 50% 26%, rgba(92, 142, 194, 0.7) 0%, rgba(92, 142, 194, 0.627) 20%, rgba(92, 142, 194, 0.454) 40%, rgba(92, 142, 194, 0.246) 60%, rgba(92, 142, 194, 0.073) 80%, transparent),
    radial-gradient(closest-side at 60% 60%, rgba(95, 156, 129, 0.55) 0%, rgba(95, 156, 129, 0.493) 20%, rgba(95, 156, 129, 0.356) 40%, rgba(95, 156, 129, 0.194) 60%, rgba(95, 156, 129, 0.057) 80%, transparent),
    radial-gradient(closest-side at 44% 88%, rgba(201, 163, 92, 0.5) 0%, rgba(201, 163, 92, 0.448) 20%, rgba(201, 163, 92, 0.324) 40%, rgba(201, 163, 92, 0.176) 60%, rgba(201, 163, 92, 0.052) 80%, transparent);
}
.m .sx .x-l-pos {
  background:
    radial-gradient(closest-side at 50% 34%, rgba(88, 176, 131, 0.75) 0%, rgba(88, 176, 131, 0.672) 20%, rgba(88, 176, 131, 0.486) 40%, rgba(88, 176, 131, 0.264) 60%, rgba(88, 176, 131, 0.078) 80%, transparent),
    radial-gradient(closest-side at 46% 80%, rgba(201, 163, 92, 0.45) 0%, rgba(201, 163, 92, 0.403) 20%, rgba(201, 163, 92, 0.292) 40%, rgba(201, 163, 92, 0.158) 60%, rgba(201, 163, 92, 0.047) 80%, transparent);
}
.m .sx .x-l-ai {
  background:
    radial-gradient(closest-side at 50% 36%, rgba(127, 158, 196, 0.85) 0%, rgba(127, 158, 196, 0.762) 20%, rgba(127, 158, 196, 0.551) 40%, rgba(127, 158, 196, 0.299) 60%, rgba(127, 158, 196, 0.088) 80%, transparent),
    radial-gradient(closest-side at 50% 80%, rgba(80, 64, 230, 0.5) 0%, rgba(80, 64, 230, 0.448) 20%, rgba(80, 64, 230, 0.324) 40%, rgba(80, 64, 230, 0.176) 60%, rgba(80, 64, 230, 0.052) 80%, transparent);
}
.m .sx .x-l-wheat {
  background:
    radial-gradient(closest-side at 50% 30%, rgba(201, 163, 92, 0.7) 0%, rgba(201, 163, 92, 0.627) 20%, rgba(201, 163, 92, 0.454) 40%, rgba(201, 163, 92, 0.246) 60%, rgba(201, 163, 92, 0.073) 80%, transparent),
    radial-gradient(closest-side at 52% 78%, rgba(127, 158, 196, 0.45) 0%, rgba(127, 158, 196, 0.403) 20%, rgba(127, 158, 196, 0.292) 40%, rgba(127, 158, 196, 0.158) 60%, rgba(127, 158, 196, 0.047) 80%, transparent);
}
.m .sx .x-l-rose {
  background:
    radial-gradient(closest-side at 50% 30%, rgba(215, 105, 127, 0.6) 0%, rgba(215, 105, 127, 0.538) 20%, rgba(215, 105, 127, 0.389) 40%, rgba(215, 105, 127, 0.211) 60%, rgba(215, 105, 127, 0.062) 80%, transparent),
    radial-gradient(closest-side at 50% 78%, rgba(201, 163, 92, 0.45) 0%, rgba(201, 163, 92, 0.403) 20%, rgba(201, 163, 92, 0.292) 40%, rgba(201, 163, 92, 0.158) 60%, rgba(201, 163, 92, 0.047) 80%, transparent);
}
.m .sx-last .x-lc-light {
  background:
    radial-gradient(closest-side at 30% 50%, rgba(92, 142, 194, 0.8) 0%, rgba(92, 142, 194, 0.717) 20%, rgba(92, 142, 194, 0.518) 40%, rgba(92, 142, 194, 0.282) 60%, rgba(92, 142, 194, 0.083) 80%, transparent),
    radial-gradient(closest-side at 52% 44%, rgba(160, 50, 130, 0.85) 0%, rgba(160, 50, 130, 0.762) 20%, rgba(160, 50, 130, 0.551) 40%, rgba(160, 50, 130, 0.299) 60%, rgba(160, 50, 130, 0.088) 80%, transparent),
    radial-gradient(closest-side at 70% 56%, rgba(240, 93, 53, 0.8) 0%, rgba(240, 93, 53, 0.717) 20%, rgba(240, 93, 53, 0.518) 40%, rgba(240, 93, 53, 0.282) 60%, rgba(240, 93, 53, 0.083) 80%, transparent),
    radial-gradient(closest-side at 50% 70%, rgba(201, 163, 92, 0.7) 0%, rgba(201, 163, 92, 0.627) 20%, rgba(201, 163, 92, 0.454) 40%, rgba(201, 163, 92, 0.246) 60%, rgba(201, 163, 92, 0.073) 80%, transparent);
}
.m .cs-home .spill {
  background:
          radial-gradient(closest-side at 50% 26%, rgba(92, 142, 194, 0.7) 0%, rgba(92, 142, 194, 0.627) 20%, rgba(92, 142, 194, 0.454) 40%, rgba(92, 142, 194, 0.246) 60%, rgba(92, 142, 194, 0.073) 80%, transparent),
          radial-gradient(closest-side at 60% 60%, rgba(95, 156, 129, 0.55) 0%, rgba(95, 156, 129, 0.493) 20%, rgba(95, 156, 129, 0.356) 40%, rgba(95, 156, 129, 0.194) 60%, rgba(95, 156, 129, 0.057) 80%, transparent),
          radial-gradient(closest-side at 44% 88%, rgba(201, 163, 92, 0.5) 0%, rgba(201, 163, 92, 0.448) 20%, rgba(201, 163, 92, 0.324) 40%, rgba(201, 163, 92, 0.176) 60%, rgba(201, 163, 92, 0.052) 80%, transparent);
}
.m .cs-night .spill {
  background:
          radial-gradient(closest-side at 44% 28%, rgba(80, 64, 230, 0.9) 0%, rgba(80, 64, 230, 0.806) 20%, rgba(80, 64, 230, 0.583) 40%, rgba(80, 64, 230, 0.317) 60%, rgba(80, 64, 230, 0.094) 80%, transparent),
          radial-gradient(closest-side at 52% 58%, rgba(160, 50, 130, 0.95) 0%, rgba(160, 50, 130, 0.851) 20%, rgba(160, 50, 130, 0.616) 40%, rgba(160, 50, 130, 0.334) 60%, rgba(160, 50, 130, 0.099) 80%, transparent),
          radial-gradient(closest-side at 58% 88%, rgba(240, 93, 53, 0.9) 0%, rgba(240, 93, 53, 0.806) 20%, rgba(240, 93, 53, 0.583) 40%, rgba(240, 93, 53, 0.317) 60%, rgba(240, 93, 53, 0.094) 80%, transparent);
}
.m .cs-june .spill {
  background:
          radial-gradient(closest-side at 50% 30%, rgba(201, 163, 92, 0.85) 0%, rgba(201, 163, 92, 0.762) 20%, rgba(201, 163, 92, 0.551) 40%, rgba(201, 163, 92, 0.299) 60%, rgba(201, 163, 92, 0.088) 80%, transparent),
          radial-gradient(closest-side at 50% 80%, rgba(240, 93, 53, 0.85) 0%, rgba(240, 93, 53, 0.762) 20%, rgba(240, 93, 53, 0.551) 40%, rgba(240, 93, 53, 0.299) 60%, rgba(240, 93, 53, 0.088) 80%, transparent);
}