.scene canvas { display: block; width: 100%; height: 100%; }
.scene::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.6; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.07 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* no JavaScript: a still golden hour */
.no-js .scene { background: linear-gradient(#3f8fcf 0%, #9dcbea 34%, #ffcf8a 60%, #8fd0ee 60.5%, #1c6e9d 100%); }
.no-js .scene canvas { display: none; }


.mark img {
  filter: drop-shadow(0 0 calc(var(--night) * 3px) rgba(41, 182, 246, calc(var(--night) * 0.9)))
          drop-shadow(0 0 calc(var(--night) * 10px) rgba(41, 182, 246, calc(var(--night) * 0.5)));
}

@media (max-width: 900px) {
  .scene::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 18%; z-index: 1; pointer-events: none; background: linear-gradient(to bottom, transparent, var(--surface)); }
}