/* Light/dark switch in the top header (design from Uiverse.io by RiccardoRapelli).
   Kept out of the dark-theme generator so its sky, sun and moon colours stay fixed.
   Checked = dark. */
.theme-switch { position: relative; display: inline-block; flex: 0 0 auto; width: 60px; height: 34px; cursor: pointer; }
.theme-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.theme-switch .slider { position: absolute; inset: 0; z-index: 0; overflow: hidden; border-radius: 34px; background-color: #2196f3; transition: background-color 0.4s; }
.theme-switch .sun-moon { position: absolute; left: 4px; bottom: 4px; width: 26px; height: 26px; border-radius: 50%; background-color: yellow; transition: transform 0.4s, background-color 0.4s; }
.theme-switch input:checked + .slider { background-color: black; }
.theme-switch input:focus-visible + .slider { outline: 2px solid #7c5cf0; outline-offset: 2px; }
.theme-switch input:checked + .slider .sun-moon { transform: translateX(26px); background-color: white; animation: theme-switch-turn 0.6s ease-in-out both; }
.theme-switch svg { position: absolute; }
.theme-switch .moon-dot { opacity: 0; transition: 0.4s; fill: gray; z-index: 4; }
.theme-switch input:checked + .slider .moon-dot { opacity: 1; }
.theme-switch .moon-dot-1 { left: 10px; top: 3px; width: 6px; height: 6px; }
.theme-switch .moon-dot-2 { left: 2px; top: 10px; width: 10px; height: 10px; }
.theme-switch .moon-dot-3 { left: 16px; top: 18px; width: 3px; height: 3px; }
.theme-switch .light-ray { z-index: -1; fill: white; opacity: 0.1; }
.theme-switch .light-ray-1 { left: -8px; top: -8px; width: 43px; height: 43px; }
.theme-switch .light-ray-2 { left: -50%; top: -50%; width: 55px; height: 55px; }
.theme-switch .light-ray-3 { left: -18px; top: -18px; width: 60px; height: 60px; }
.theme-switch .cloud-light, .theme-switch .cloud-dark { animation: theme-switch-cloud 6s infinite; }
.theme-switch .cloud-light { fill: #eee; }
.theme-switch .cloud-dark { fill: #ccc; animation-delay: 1s; }
.theme-switch .cloud-1 { left: 30px; top: 15px; width: 40px; }
.theme-switch .cloud-2 { left: 44px; top: 10px; width: 20px; }
.theme-switch .cloud-3 { left: 18px; top: 24px; width: 30px; }
.theme-switch .cloud-4 { left: 36px; top: 18px; width: 40px; }
.theme-switch .cloud-5 { left: 48px; top: 14px; width: 20px; }
.theme-switch .cloud-6 { left: 22px; top: 26px; width: 30px; }
.theme-switch .stars { transform: translateY(-32px); opacity: 0; transition: 0.4s; }
.theme-switch input:checked + .slider .stars { transform: translateY(0); opacity: 1; }
.theme-switch .star { fill: white; transition: 0.4s; animation: theme-switch-twinkle 2s infinite; }
.theme-switch .star-1 { width: 20px; top: 2px; left: 3px; animation-delay: 0.3s; }
.theme-switch .star-2 { width: 6px; top: 16px; left: 3px; }
.theme-switch .star-3 { width: 12px; top: 20px; left: 10px; animation-delay: 0.6s; }
.theme-switch .star-4 { width: 18px; top: 0; left: 18px; animation-delay: 1.3s; }
@keyframes theme-switch-cloud { 0%, 100% { transform: translateX(0); } 40% { transform: translateX(4px); } 80% { transform: translateX(-4px); } }
@keyframes theme-switch-twinkle { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.2); } 80% { transform: scale(0.8); } }
@keyframes theme-switch-turn { 0% { transform: translateX(26px) rotate(0); } 100% { transform: translateX(26px) rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .theme-switch *, .theme-switch .slider { animation: none !important; transition: none !important; }
}