.live-weather{margin:16px 0 22px;max-width:540px;padding:12px 16px;border:1px solid #ffffff40;border-radius:14px;background:#08202dbb;font-size:1rem}.live-weather small{display:block;margin-top:6px;font-size:.68rem;line-height:1.5;color:#e2eaed}.live-weather a{color:inherit}.hero[data-weather="clear"] .day-cloud{opacity:0}.hero[data-weather="partly"] .day-cloud{opacity:.5;animation-play-state:running}.hero:is([data-weather="cloudy"],[data-weather="rain"],[data-weather="storm"],[data-weather="snow"]) .day-cloud{opacity:.85;background:#a5b6c2;animation-play-state:running}.hero:is([data-weather="cloudy"],[data-weather="rain"],[data-weather="storm"],[data-weather="snow"],[data-weather="fog"]) :is(.sun-orbit,.moon-orbit,.stars,.shooting-star){opacity:0}.hero:is([data-weather="rain"],[data-weather="storm"])::after{background:linear-gradient(#19364888,#0b243e99)}.weather-rain,.weather-snow,.weather-fog{display:none;position:absolute;inset:-30%;pointer-events:none}.hero:is([data-weather="rain"],[data-weather="storm"]) .weather-rain{display:block;inset:0;overflow:hidden;background:none;animation:none}
.weather-drop{position:absolute;top:-22px;left:var(--drop-x);width:var(--drop-size);height:calc(var(--drop-size)*1.7);border-radius:55% 55% 65% 65%;background:radial-gradient(ellipse at 32% 27%,#fff 0 10%,#d8f0ffb3 28%,#88b6d16b 65%,#b7e4f580 100%);border:1px solid #dbf4ff5c;opacity:0;box-shadow:inset -1px -1px 2px #eefaff70;animation:weather-drop-fall var(--drop-duration) linear var(--drop-delay) infinite;will-change:transform}
.hero[data-weather="storm"] .weather-drop{animation-duration:calc(var(--drop-duration)*.78)}
@keyframes weather-drop-fall{0%{transform:translate3d(0,-18px,0) rotate(-12deg);opacity:0}9%{opacity:var(--drop-opacity)}85%{opacity:var(--drop-opacity)}100%{transform:translate3d(-55px,105vh,0) rotate(-12deg);opacity:0}}
@media(max-width:700px){.weather-drop:nth-child(n+23){display:none}}
@media(prefers-reduced-motion:reduce){.hero .weather-rain{display:none!important}}
html.motion-paused .weather-rain{display:none!important}
.hero[data-weather="snow"] .weather-snow{display:block;background:radial-gradient(circle,#fff9 2px,transparent 3px) 0 0/50px 60px;animation:weather-rain 6s linear infinite}.hero[data-weather="fog"] .weather-fog{display:block;background:linear-gradient(transparent,#d6e0e17a,transparent);animation:weather-fog 10s ease-in-out infinite alternate}@keyframes weather-rain{to{transform:translate(-30px,130px)}}@keyframes weather-fog{to{transform:translateX(12%);opacity:.6}}@media(prefers-reduced-motion:reduce){.hero .time-sky *{animation:none!important;transition:none!important}}

/* Weather rules override the time-of-day sky, including clear daytime skies. */
.hero[data-weather="clear"] .day-cloud{opacity:0;animation-play-state:paused}
.hero[data-weather="partly"] .day-cloud{opacity:.5}
.hero[data-weather="fog"] .day-cloud{opacity:.12}
.hero[data-weather="fog"] :is(.sun-orbit,.moon-orbit){opacity:.12}
.weather-lightning{display:none;position:absolute;inset:0;background:linear-gradient(120deg,transparent,#dceaff77,transparent);opacity:0;pointer-events:none}
.hero[data-weather="storm"] .weather-lightning{display:block;animation:weather-lightning 12s linear infinite}
@keyframes weather-lightning{0%,89%,93%,100%{opacity:0}90%,92%{opacity:.4}91%{opacity:.06}}
@media(prefers-reduced-motion:reduce){.weather-lightning{display:none!important}}

/* Small pictogram display, independent of the centered hero text. */
.home-page .hero > .live-weather{position:absolute;z-index:5;top:16px;left:max(20px,calc((100% - 1240px)/2));margin:0;padding:5px 9px;max-width:calc(100% - 40px);border:1px solid #ffffff26;border-radius:12px;background:#102f4099;box-shadow:none;font-size:.8rem;backdrop-filter:blur(8px)}
.live-weather-main{display:flex;align-items:center;gap:8px;min-height:30px}
.live-weather-icon{display:grid;place-items:center;flex:0 0 28px;width:28px;height:28px;color:#f6c86a}
.live-weather-icon svg{display:block;width:28px;height:28px;overflow:visible}
#live-weather-temperature{white-space:nowrap;font-size:.8rem;color:#fff}
.weather-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.weather-info summary{display:grid;place-items:center;width:24px;height:28px;cursor:pointer;color:#d4e2e6;font-size:.75rem;list-style:none}
.weather-info summary::-webkit-details-marker{display:none}
.weather-info[open] summary{color:#f6c86a}
.weather-info small{position:absolute;top:calc(100% + 8px);left:0;width:min(300px,calc(100vw - 64px));box-sizing:border-box;margin:0;padding:12px;border:1px solid #ffffff30;border-radius:12px;background:#102f40f5;font-size:.68rem;line-height:1.6;color:#e2eaed;box-shadow:0 8px 24px #0003}
.home-page .hero-inner{grid-template-columns:minmax(0,1fr);padding-top:88px;align-content:center;gap:30px}
.home-page .hero-inner > div:first-child{text-align:center}
.home-page .hero-copy{margin-inline:auto}
.home-page .hero-inner .actions{justify-content:center}
.home-page .hero-note{justify-self:center;align-self:center;max-width:560px;text-align:center}
@media(max-width:700px){.home-page .hero-inner{padding-top:78px;gap:24px}.home-page .hero > .live-weather{top:14px;left:20px}.home-page .hero-note{justify-self:center}}

/* The weather information control is also comfortable to tap. */
.weather-info summary{width:44px;height:44px;font-size:1rem}
.weather-info small{font-size:.9rem}
#live-weather-temperature{font-size:.95rem}

/* Mobile homepage: keep animation control at the upper right beside weather. */
@media(max-width:700px){
  .home-page .hero>.motion-toggle{top:14px;right:20px;left:auto;max-width:calc(100% - 200px);min-height:44px;padding:10px 12px;font-size:.8rem;line-height:1.35;white-space:normal}
}