.weather-panel{display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin-top:24px;padding:22px 26px;background:var(--paper);border:1px solid var(--line);border-radius:8px}.weather-location{display:flex;align-items:center;gap:12px}.weather-location>svg{color:var(--blue);flex-shrink:0}.weather-location .eyebrow{margin:0 0 5px;font-size:.65rem}.weather-location h2{font-size:1.15rem;letter-spacing:-.025em;margin:0}.weather-reading{display:flex;align-items:center;gap:16px;flex:1;min-width:0;min-height:68px}.weather-temperature{font-size:2.5rem;line-height:1.1;letter-spacing:-.06em;white-space:nowrap;color:var(--navy)}.weather-temperature-group{display:flex;align-items:center;gap:10px;flex-shrink:0}.weather-scene{position:relative;width:68px;height:68px;flex-shrink:0;border-radius:50%;background:#f4ae2b14}.weather-scene-art{position:absolute;inset:0;overflow:hidden;border-radius:inherit;pointer-events:none}.weather-scene-art>svg{position:absolute;width:50px;height:50px;left:9px;top:9px}.weather-scene-art .weather-sun{color:#b96510;animation:weather-sun-turn 24s linear infinite}.weather-scene-art .weather-cloud{color:var(--blue);fill:var(--paper);animation:weather-cloud-drift 5s ease-in-out infinite}.weather-scene--partly .weather-sun{width:38px;height:38px;left:3px;top:3px}.weather-scene--partly .weather-cloud{width:46px;height:46px;left:20px;top:20px}.weather-scene--rain .weather-cloud,.weather-scene--snow .weather-cloud{width:46px;height:46px;top:0;left:11px}.weather-scene-art .weather-rain{width:64px;height:64px;left:2px;top:0;stroke:var(--blue);stroke-width:2.5;stroke-linecap:round;animation:weather-rain-fall 1.2s linear infinite}.weather-snow{position:absolute;left:17px;top:37px;display:flex;gap:4px;color:var(--blue)}.weather-snow svg{width:10px;height:10px;animation:weather-snow-fall 2.8s ease-in-out infinite}.weather-snow svg:nth-child(2){animation-delay:-1.8s}.weather-snow svg:nth-child(3){animation-delay:-.9s}.weather-scene-art .weather-storm{color:var(--blue);fill:#f4ae2b24;animation:weather-cloud-drift 4s ease-in-out infinite}.weather-scene-art .weather-fog,.weather-scene-art .weather-wind{color:var(--blue);animation:weather-air-drift 4s ease-in-out infinite}.weather-animation-toggle{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:flex-end;padding:3px;border:0;border-radius:50%;background:transparent;color:var(--blue);cursor:pointer}.weather-animation-toggle>svg{box-sizing:content-box;background:var(--paper);border-radius:50%;padding:3px;opacity:.7}.weather-animation-toggle:focus-visible>svg,.weather-animation-toggle:hover>svg{opacity:1}.weather-animation-toggle:focus-visible{outline:2px solid var(--blue);outline-offset:3px}.weather-scene[data-paused=true] .weather-scene-art *{animation-play-state:paused}@keyframes weather-sun-turn{to{transform:rotate(1turn)}}@keyframes weather-cloud-drift{0%,to{transform:translateX(-3px)}50%{transform:translateX(3px)}}@keyframes weather-rain-fall{0%{transform:translateY(-2px);opacity:0}25%{opacity:1}75%{opacity:1}to{transform:translateY(9px);opacity:0}}@keyframes weather-snow-fall{0%{transform:translateY(-3px);opacity:0}30%{opacity:1}to{transform:translate(4px,13px);opacity:0}}@keyframes weather-air-drift{0%,to{transform:translateX(-3px);opacity:.7}50%{transform:translateX(3px);opacity:1}}@media(prefers-reduced-motion:reduce){.weather-scene-art *{animation:none!important}.weather-animation-toggle{display:none}}.weather-description{margin:0;font-weight:600;font-size:.95rem}.weather-detail,.weather-source{margin:3px 0 0;font-size:.78rem;color:var(--muted);line-height:1.6}.weather-detail span{display:inline-flex;align-items:center;gap:4px;flex-wrap:wrap}.weather-detail>span{margin-right:4px}.weather-source{font-size:.7rem}.weather-forecast{display:inline-flex;align-items:center;gap:6px;min-height:44px;color:var(--blue-dark);font-size:.85rem;font-weight:600;text-decoration:underline;text-underline-offset:3px}@media(max-width:800px){.weather-panel{gap:14px 24px}.weather-reading{flex-basis:55%}}@media(max-width:520px){.weather-panel{padding:18px;gap:12px}.weather-location{flex-basis:100%}.weather-reading{flex-basis:100%;gap:14px}.weather-temperature{font-size:2.25rem}.weather-forecast{min-height:44px}.weather-reading{flex-wrap:wrap}.weather-reading>div:last-child{flex-basis:100%}}