html[data-rooftop-ready="false"] :is(#todayView,#plannerView,#roofView) .banner-art:not(.time-ghost) {
  visibility: hidden;
}
html[data-rooftop-period="morning"] :is(#todayView,#plannerView,#roofView) .rooftop-banner { background-color: #9dc9ef; }
html[data-rooftop-period="noon"] :is(#todayView,#plannerView,#roofView) .rooftop-banner { background-color: #48a3df; }
html[data-rooftop-period="evening"] :is(#todayView,#plannerView,#roofView) .rooftop-banner { background-color: #222b5b; }
:is(#todayView,#plannerView,#roofView) .banner-art.time-ghost {
  z-index: 2;
  opacity: 1;
  transition: opacity 750ms ease;
}
:is(#todayView,#plannerView,#roofView) .banner-art.time-ghost.is-fading { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  :is(#todayView,#plannerView,#roofView) .banner-art.time-ghost { display: none; }
}