.weather-widget{display:grid;grid-template-columns:minmax(190px,.72fr) minmax(0,1.28fr);align-items:center;gap:24px;padding:22px 0 30px}
.weather-widget-copy{padding:8px 0}.weather-eyebrow{display:block;color:#1976a7;font-size:.73rem;font-weight:900;letter-spacing:.14em;text-transform:uppercase}.weather-widget-copy h2{margin:5px 0 6px;color:#0b3150;font-size:clamp(1.35rem,2.2vw,1.8rem);letter-spacing:-.025em}.weather-widget-copy p{margin:0;color:#657786;font-size:.92rem}.weather-source{display:inline-block;margin-top:9px;color:#1976a7;font-size:.72rem;font-weight:700}
.weather-widget-card{position:relative;isolation:isolate;overflow:hidden;min-height:245px;padding:20px 22px 12px;border-radius:20px;background:linear-gradient(135deg,#103c48,#166176);color:#fff;box-shadow:0 14px 34px rgba(11,49,80,.14)}
.weather-sky{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none;background:linear-gradient(135deg,#185d78,#217fa1);transition:background .6s ease}
.weather-widget-card[data-weather="cloudy"] .weather-sky,.weather-widget-card[data-weather="fog"] .weather-sky{background:linear-gradient(135deg,#526b78,#8097a1)}
.weather-widget-card[data-weather="rain"] .weather-sky{background:linear-gradient(135deg,#3b596b,#58788b)}
.weather-widget-card[data-weather="storm"] .weather-sky{background:linear-gradient(135deg,#303c4a,#596b79)}
.weather-orb{position:absolute;width:210px;height:210px;right:8%;top:-135px;border-radius:50%;background:radial-gradient(circle,#ffd779a6,transparent 68%);animation:weather-drift 10s ease-in-out infinite alternate}
.weather-cloud{position:absolute;width:200px;height:95px;border-radius:50%;background:#ffffff20;filter:blur(20px);animation:weather-drift 15s ease-in-out infinite alternate}
.weather-cloud-one{left:36%;bottom:18px}.weather-cloud-two{right:-35px;top:35px;animation-direction:alternate-reverse}
.weather-rain{position:absolute;inset:0;opacity:0;background-image:repeating-linear-gradient(108deg,transparent 0 23px,#ffffff35 24px 25px,transparent 26px 46px);background-size:100% 100%;animation:weather-fall .9s linear infinite}
.weather-widget-card[data-weather="rain"] .weather-rain,.weather-widget-card[data-weather="storm"] .weather-rain{opacity:.65}
@keyframes weather-drift{to{transform:translate(18px,8px) scale(1.08)}}@keyframes weather-fall{to{background-position:-8px 28px}}
.weather-current{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:150px}
.weather-place{margin:0;font-weight:800;font-size:1rem}.weather-date{margin:3px 0 0;color:#e0eef3;font-size:.78rem}.weather-temp{display:flex;align-items:flex-start;margin:2px 0 0;font-size:3.7rem;line-height:1;font-weight:650;font-variant-numeric:tabular-nums;letter-spacing:-.06em}.weather-degree{font-size:1.8rem;line-height:1.3}.weather-condition{margin:3px 0 0;font-size:.88rem;color:#e3eef2}.weather-icon{width:70px;height:70px;flex:none;color:#ffd779;filter:drop-shadow(0 5px 16px #081c2c55)}.weather-icon svg{width:100%;height:100%}
.weather-extremes{display:flex;gap:16px;padding:2px 0 12px;color:#e1edf2;font-size:.76rem}.weather-extremes strong{color:#fff}
.weather-days{position:relative;display:flex;justify-content:space-between;gap:4px;padding:6px 4px 2px;border-top:1px solid #ffffff35}
.weather-day{flex:1;min-width:0;border:0;border-radius:10px;padding:7px 2px;background:transparent;color:#e1edf2;display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer;font:inherit;transition:background .2s,transform .2s}
.weather-day:hover,.weather-day[aria-selected="true"]{background:#ffffff24;color:#fff}.weather-day:active{transform:scale(.97)}.weather-day:focus-visible{outline:2px solid #ffd779;outline-offset:1px}
.weather-day-name{font-size:.68rem;font-weight:750}.weather-day-icon{width:22px;height:22px;color:#ffd779}.weather-day-icon svg{width:100%;height:100%}.weather-day-temp{font-size:.7rem;white-space:nowrap}
.weather-widget[data-state="error"] .weather-widget-copy p{max-width:340px}
@media(max-width:680px){.weather-widget{grid-template-columns:1fr;gap:12px;padding:22px 0 28px}.weather-widget-copy{padding:0}.weather-widget-card{min-height:232px;padding:17px 15px 10px}.weather-current{min-height:145px}.weather-temp{font-size:3.3rem}.weather-icon{width:60px;height:60px}.weather-day-name,.weather-day-temp{font-size:.65rem}}
@media(prefers-reduced-motion:reduce){.weather-orb,.weather-cloud,.weather-rain{animation:none!important}.weather-sky,.weather-day{transition:none!important}}