[data-weather-view] [hidden]{display:none!important}
.satellite-loader{min-height:300px;padding:3rem 1.25rem;background:rgba(5,22,12,.9);border:1px solid #3b7049;border-radius:16px;text-align:center;color:#dcebd9;font-family:system-ui,sans-serif;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem}
.satellite-track{height:66px;width:min(420px,85%);position:relative;border-bottom:1px dashed #5b9261}
.satellite-track span{position:absolute;font-size:2.5rem;left:0;animation:satellite-pass 3s ease-in-out infinite alternate}
@keyframes satellite-pass{from{left:0;transform:rotate(-12deg)}to{left:calc(100% - 55px);transform:rotate(12deg)}}
.satellite-loader progress{width:min(420px,90%);height:12px;accent-color:#7eff7b}
.satellite-loader button{background:#245333;color:#fff;border:1px solid #80b57c;border-radius:8px;padding:.7rem 1rem}
.satellite-stamp{font: .85rem system-ui,sans-serif;color:#c8d8c2;margin-top:.75rem}
@media(prefers-reduced-motion:reduce){.satellite-track span{animation:none;left:45%}}

/* Keep the map and its percentage-positioned location marker on the same canvas. */
[data-weather-view] .image-container{position:relative;width:100%}
[data-weather-view] .image-container > [data-animation]{display:block;width:100%;max-width:100%;height:auto;max-height:none}
[data-weather-view] .image-container > [data-location]{position:absolute;z-index:1;pointer-events:none}