.hp-weather.hp-service-background{--hp-service-overlay:linear-gradient(115deg,rgba(8,23,40,.87),rgba(8,23,40,.38));border:0;background-color:#163b58;color:#fff;box-shadow:0 16px 38px rgba(8,23,40,.2)}
.hp-weather.hp-service-background :is(.hp-kicker,.hp-meta,.hp-weather-stale,.hp-weather-meta i,.hp-weather-city-picker label){color:rgba(255,255,255,.9)}.hp-weather.hp-service-background .hp-weather-city-picker{border-color:rgba(255,255,255,.24)}
.hp-weather--card .hp-weather-symbol{display:grid;width:58px;height:58px;place-items:center;border-radius:0;background:transparent}.hp-weather--card .hp-weather-temp{letter-spacing:-.055em}
.hp-weather--compact{border-inline-start:5px solid var(--hp-accent)}.hp-weather--compact .hp-weather-symbol{display:grid;width:48px;height:48px;place-items:center;border-radius:50%;background:color-mix(in srgb,var(--hp-accent) 11%,var(--bs-tertiary-bg))}
.hp-weather--gradient{background:radial-gradient(circle at 78% 16%,rgba(255,255,255,.25),transparent 27%),linear-gradient(135deg,var(--hp-accent),color-mix(in srgb,var(--hp-accent) 48%,#112846))}.hp-weather--gradient .hp-weather-symbol{filter:drop-shadow(0 8px 12px rgba(0,0,0,.18))}
.hp-weather--centered{border-radius:46% 46% var(--hp-card-radius) var(--hp-card-radius) / 12% 12% var(--hp-card-radius) var(--hp-card-radius)}.hp-weather--centered .hp-weather-body{padding-block:1.8rem}.hp-weather--centered .hp-weather-symbol{filter:drop-shadow(0 10px 12px rgba(14,32,53,.15))}
.hp-weather--outline{position:relative;border-style:dashed}.hp-weather--outline::after{position:absolute;inset:8px;border:1px solid color-mix(in srgb,var(--hp-accent) 18%,transparent);border-radius:calc(var(--hp-card-radius) - 4px);content:"";pointer-events:none}
.hp-weather--split .hp-weather-body{grid-template-columns:minmax(120px,.8fr) 1.2fr;grid-template-areas:"head temp" "head meta" "picker picker";align-items:center;background:linear-gradient(90deg,color-mix(in srgb,var(--hp-accent) 12%,var(--bs-tertiary-bg)) 0 42%,transparent 42%)}.hp-weather--split .hp-weather-head{grid-area:head;align-items:center;flex-direction:column;text-align:center}.hp-weather--split .hp-weather-symbol{font-size:4rem}.hp-weather--split .hp-weather-temp{grid-area:temp}.hp-weather--split .hp-weather-meta{grid-area:meta;display:grid}.hp-weather--split :is(.hp-weather-city-picker,.hp-weather-stale){grid-area:picker}
.hp-weather--glass{border:1px solid rgba(255,255,255,.3);background:linear-gradient(135deg,rgba(255,255,255,.18),rgba(255,255,255,.06));box-shadow:inset 0 1px rgba(255,255,255,.28),0 18px 44px rgba(11,31,49,.18);backdrop-filter:blur(14px)}.hp-weather--glass .hp-weather-symbol{filter:drop-shadow(0 8px 18px rgba(0,0,0,.18))}
.hp-weather--radar{border:0;background:radial-gradient(circle at 78% 30%,transparent 0 18%,rgba(45,212,191,.18) 18.5% 19%,transparent 19.5% 29%,rgba(45,212,191,.13) 29.5% 30%,transparent 30.5%),#071828;color:#e8fbff}.hp-weather--radar :is(.hp-kicker,.hp-meta,.hp-weather-stale,.hp-weather-meta i){color:#9de8df}.hp-weather--radar .hp-weather-symbol{color:#5eead4}.hp-weather--radar .hp-weather-temp{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
@container(max-width:420px){.hp-weather--split .hp-weather-body{grid-template-columns:1fr;grid-template-areas:"head" "temp" "meta" "picker";background:linear-gradient(180deg,color-mix(in srgb,var(--hp-accent) 12%,var(--bs-tertiary-bg)) 0 42%,transparent 42%)}}