#weatherCanvas{position:fixed;z-index:12;inset:0;width:100%;height:100%;pointer-events:none}
body.weather-partly-cloudy #weatherCanvas,body.weather-overcast #weatherCanvas,body.weather-fog #weatherCanvas,body.weather-rime-fog #weatherCanvas{opacity:.3}body.weather-drizzle #weatherCanvas,body.weather-rain #weatherCanvas,body.weather-showers #weatherCanvas{opacity:.62}body.weather-heavy-rain #weatherCanvas,body.weather-thunderstorm #weatherCanvas,body.weather-hail #weatherCanvas{opacity:.74}
.weather-widget{position:fixed;z-index:55;top:76px;right:24px}
.weather-summary{min-width:160px;display:grid;grid-template-columns:42px 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center;padding:10px 14px;border:1px solid rgba(255,255,255,.85);border-radius:18px;background:rgba(255,255,255,.84);color:var(--ink);box-shadow:0 12px 32px rgba(23,59,59,.12);backdrop-filter:blur(16px);cursor:pointer;text-align:left}
.weather-summary>span{grid-row:1/3;width:42px;height:42px;display:grid;place-items:center;border-radius:50%;background:var(--bg);font-size:12px}.weather-summary strong{font-size:16px}.weather-summary small{max-width:118px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted)}
.weather-picker{position:absolute;right:0;top:68px;width:296px;padding:16px;border:1px solid rgba(255,255,255,.85);border-radius:18px;background:rgba(255,255,255,.96);box-shadow:0 18px 42px rgba(23,59,59,.16);opacity:0;pointer-events:none;transform:translateY(-8px);transition:opacity 300ms var(--ease),transform 500ms var(--ease)}
.weather-widget.is-open .weather-picker{opacity:1;pointer-events:auto;transform:none}.weather-picker label{display:grid;gap:6px;margin-bottom:10px;font-size:12px;color:var(--muted)}.weather-picker select{width:100%;min-height:44px;padding:8px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);font:inherit}.weather-picker button{width:100%;min-height:44px;border:0;border-radius:999px;background:var(--ink);color:#fff;font:600 14px var(--font);cursor:pointer}.weather-picker button:disabled{opacity:.55}.weather-picker .weather-locate{margin-bottom:8px;background:var(--accent)}.location-note{margin:0 0 14px;font-size:12px;line-height:16px;color:var(--muted)}.weather-picker #weatherStatus{min-height:20px;margin:8px 0 0;font-size:12px;color:var(--muted)}
body.weather-clear{--weather-tint:#edf8f5}body.weather-mainly-clear{--weather-tint:#eaf6f3}body.weather-partly-cloudy{--weather-tint:#e8f2f0}body.weather-overcast{--weather-tint:#dde8e7}body.weather-fog,body.weather-rime-fog{--weather-tint:#e5ecea}body.weather-drizzle,body.weather-freezing-drizzle{--weather-tint:#e2eef0}body.weather-rain,body.weather-showers{--weather-tint:#dce9ed}body.weather-heavy-rain,body.weather-thunderstorm,body.weather-hail{--weather-tint:#cfdee4}body.weather-snow,body.weather-heavy-snow{--weather-tint:#edf6fa}
body[class*="weather-"]{background:var(--weather-tint,var(--bg))}body.weather-clear .ambient,body.weather-mainly-clear .ambient{opacity:.72}body.weather-partly-cloudy .ambient{opacity:.48}body.weather-overcast .ambient,body.weather-rain .ambient,body.weather-heavy-rain .ambient,body.weather-thunderstorm .ambient{opacity:.22}
body.weather-fog:after,body.weather-rime-fog:after{content:"";position:fixed;z-index:11;inset:0;background:rgba(225,234,235,.16);backdrop-filter:blur(1px);pointer-events:none}
@media(max-width:720px){.weather-widget{top:64px;right:12px}.weather-summary{min-width:132px;padding:8px 10px}.weather-picker{width:min(296px,calc(100vw - 24px))}}
@media(prefers-reduced-motion:reduce){#weatherCanvas{display:none}.weather-picker{transition:opacity 300ms var(--ease)}}