/* A small decorative sunrise/sunset signature beside the navigation. */
.header .topbar-solar { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 62px; width: 62px; height: 38px; pointer-events: none; }
.topbar-solar > svg { display: block; width: 100%; height: 100%; overflow: visible; }
.topbar-solar-sun { transform: translate(44px, 14px); }
.topbar-solar-rays { transform-origin: 0 0; }
.topbar-solar-night { opacity: 0; }
.topbar-solar-water { transform-origin: 44px 35px; }
@media (prefers-reduced-motion: no-preference) {
  .topbar-solar.is-animated .topbar-solar-sun { animation: topbar-solar-day 32s linear infinite; }
  .topbar-solar.is-animated .topbar-solar-rays { animation: topbar-solar-rays 24s linear infinite; }
  .topbar-solar.is-animated .topbar-solar-night { animation: topbar-solar-night 32s linear infinite; }
  .topbar-solar.is-animated .topbar-solar-water { animation: topbar-solar-water 8s ease-in-out infinite alternate; }
  .topbar-solar.is-paused * { animation-play-state: paused !important; }
}
@keyframes topbar-solar-day {
  0% { transform: translate(18px, 28px); opacity: 1; }
  14% { transform: translate(28px, 16px); opacity: 1; }
  28% { transform: translate(45px, 10px); opacity: 1; }
  42% { transform: translate(63px, 17px); opacity: 1; }
  52% { transform: translate(72px, 28px); opacity: 1; }
  58% { transform: translate(75px, 37px); opacity: 0; }
  85% { transform: translate(12px, 37px); opacity: 0; }
  95% { transform: translate(16px, 31px); opacity: .6; }
  100% { transform: translate(18px, 28px); opacity: 1; }
}
@keyframes topbar-solar-rays { to { transform: rotate(360deg); } }
@keyframes topbar-solar-night { 0%, 52% { opacity: 0; } 65%, 79% { opacity: 1; } 91%, 100% { opacity: 0; } }
@keyframes topbar-solar-water { from { transform: translateX(-1.5px); opacity: .7; } to { transform: translateX(1.5px); opacity: 1; } }
@media (max-width: 1200px) { .header .topbar-solar { flex-basis: 52px; width: 52px; height: 34px; } }
@media (max-width: 760px) { .header .header-actions { gap: 12px; } .header .topbar-solar { flex-basis: 44px; width: 44px; height: 31px; } }
@media (max-width: 600px) { .header .header-actions { gap: 9px; } .header .topbar-solar { flex-basis: 40px; width: 40px; height: 29px; } }
@media (max-width: 365px) { .header .header-actions { gap: 7px; } .header .topbar-solar { flex-basis: 34px; width: 34px; height: 26px; } }