.weather-grid-canvas{position:absolute;left:0;top:0;pointer-events:none;opacity:.92;mix-blend-mode:screen;filter:saturate(1.18) contrast(1.04);transition:opacity .25s ease;will-change:transform,opacity}.weather-grid-canvas[hidden]{display:none!important}.weather-grid-live .weather-field{opacity:.075}.weather-grid-live .particle-canvas{opacity:.46}.observation-active .weather-grid-canvas{opacity:0}
.weather-animation-hud{position:fixed;z-index:955;left:210px;top:82px;width:min(330px,calc(100vw - 570px));min-width:250px;height:46px;border-radius:15px;display:grid;grid-template-columns:12px minmax(0,1fr) auto 30px;align-items:center;gap:8px;padding:7px 8px 7px 10px;background:linear-gradient(135deg,rgba(5,18,31,.88),rgba(10,35,52,.78));pointer-events:auto}.weather-animation-hud>div{min-width:0;display:grid;gap:2px}.weather-animation-hud strong{font-size:9px;letter-spacing:.06em;text-transform:uppercase}.weather-animation-hud small{display:block;color:#92aabd;font-size:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.weather-animation-hud time{color:#9cdff3;font-size:7px;white-space:nowrap}.weather-animation-pulse{width:9px;height:9px;border-radius:50%;background:#52d9ff;box-shadow:0 0 0 4px rgba(82,217,255,.11),0 0 16px rgba(82,217,255,.7);animation:weather-animation-pulse 1.8s ease-in-out infinite}.weather-animation-toggle{width:28px;height:28px;border:1px solid rgba(255,255,255,.12);border-radius:9px;background:rgba(255,255,255,.055);color:#7be5ff;font-size:15px;display:grid;place-items:center}.weather-animation-toggle:hover{background:rgba(82,217,255,.14)}.weather-animation-hud[data-state="loading"] .weather-animation-pulse{background:#ffd166;box-shadow:0 0 0 4px rgba(255,209,102,.11),0 0 16px rgba(255,209,102,.65);animation-duration:.75s}.weather-animation-hud[data-state="error"] .weather-animation-pulse{background:#ff7584;box-shadow:0 0 0 4px rgba(255,117,132,.11),0 0 16px rgba(255,117,132,.62);animation:none}.weather-animation-hud[data-state="off"],.weather-animation-hud[data-state="hidden"]{opacity:.78}.weather-animation-hud[data-state="off"] .weather-animation-pulse,.weather-animation-hud[data-state="hidden"] .weather-animation-pulse{background:#7f93a5;box-shadow:none;animation:none}@keyframes weather-animation-pulse{50%{transform:scale(.78);opacity:.62}}
@media(max-width:900px){.weather-animation-hud{left:188px;width:min(280px,calc(100vw - 505px));min-width:220px}}
@media(max-width:680px){.weather-animation-hud{left:6px;right:auto;top:238px;bottom:auto;width:224px;min-width:0;height:28px;grid-template-columns:8px minmax(0,1fr) 26px;gap:6px;padding:4px 5px 4px 7px;border-radius:10px}.weather-animation-hud strong{font-size:7px}.weather-animation-hud small{font-size:6px}.weather-animation-hud time{display:none}.weather-animation-pulse{width:7px;height:7px}.weather-animation-toggle{width:24px;height:20px;border-radius:7px;font-size:12px}.weather-grid-live .weather-field{opacity:.055}.weather-grid-live .particle-canvas{opacity:.34}}
@media(max-width:680px) and (max-height:700px){.weather-animation-hud{top:214px;width:208px}}
@media(prefers-reduced-motion:reduce){.weather-animation-pulse{animation:none}.weather-grid-canvas{transition:none}}

#metricLegend[data-scale="precipitation"] .legend-bar{background:linear-gradient(90deg,#d7f4ff,#56c8ff,#2979ff,#7b3cff,#ff4f9a)}
@media(max-width:680px){
  .metric-legend{bottom:252px!important;width:154px;z-index:956}
  .app-shell:has(.decision-card.expanded) .metric-legend,.app-shell:has(.decision-card.expanded) .weather-animation-hud{opacity:0;visibility:hidden;pointer-events:none}
}