:root{--bg:#dce9f5;--land:#f3eee6;--card:rgba(255,255,255,.97);--ln:rgba(15,23,42,.1);--tx:#0f172a;--mu:#475569;--ac:#2563eb;--pk:#c2185b;--r:18px;--ease:cubic-bezier(.2,.7,.2,1)}
[hidden]{display:none!important}
*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--bg);color:var(--tx);font:15px/1.45 "Inter Variable",Inter,system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit}
#map{position:fixed;inset:0;background:var(--bg);transition:filter .6s var(--ease),opacity .6s var(--ease)}.leaflet-container{background:var(--bg);font:inherit}
body.first #map{filter:blur(2px) saturate(.6);opacity:.55}
.card{position:fixed;z-index:600;background:var(--card);backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);border:1px solid var(--ln);border-radius:var(--r);box-shadow:0 1px 2px rgba(20,26,46,.04),0 12px 40px rgba(20,26,46,.1);transition:opacity .4s var(--ease),transform .4s var(--ease)}
.card[hidden]{display:block!important;opacity:0;pointer-events:none;transform:translateY(10px)}
/* first run */
#intro{position:fixed;inset:0;z-index:700;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;text-align:center;transition:opacity .45s var(--ease),transform .45s var(--ease)}
body:not(.first) #intro{opacity:0;transform:scale(.98);pointer-events:none}
.kicker{margin:0 0 10px;font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ac)}
h1{margin:0;font-size:clamp(30px,5vw,48px);line-height:1.08;letter-spacing:-.025em;font-weight:700;max-width:14em}
.sub{margin:12px 0 28px;color:var(--mu);font-size:17px}
.drop{width:min(520px,100%);display:flex;flex-direction:column;align-items:center;gap:4px;padding:38px 24px;border-radius:22px;background:rgba(255,255,255,.92);border:1.5px dashed rgba(39,69,122,.35);cursor:pointer;box-shadow:0 12px 40px rgba(20,26,46,.08);transition:transform .2s var(--ease),border-color .2s,background .2s}
.drop:hover,.drop:focus-visible,.drop.over{border-color:var(--ac);background:#fff;transform:translateY(-2px);outline:none}
.drop.over{background:#eef2f9}
.drop svg{width:34px;height:34px;color:var(--ac);margin-bottom:6px}.drop b{font-size:19px;font-weight:650}.drop span{color:var(--mu);font-size:14px}
.ghost{margin-top:18px;background:none;border:0;color:var(--ac);font-weight:600;font-size:15px;cursor:pointer;padding:10px 14px;border-radius:999px}.ghost:hover{background:rgba(39,69,122,.08)}
.fine{margin:14px 0 0;color:var(--mu);font-size:13px}
.err{margin:14px 0 0;max-width:520px;color:#9f1239;background:#fff1f3;border:1px solid #fecdd3;padding:10px 14px;border-radius:12px;font-size:14px}
.ask{top:50%;left:50%;width:min(420px,92vw);padding:24px;transform:translate(-50%,-50%)}.ask[hidden]{transform:translate(-50%,-46%)}
.ask p{color:var(--mu);margin:6px 0 16px;font-size:14px}.askrow{display:flex;gap:8px}
#gridIn{flex:1;min-width:0;border:1px solid var(--ln);border-radius:12px;padding:11px 14px;font:inherit;text-transform:uppercase;background:#fff}
.primary{background:var(--ac);color:#fff;border:0;border-radius:12px;padding:11px 18px;font-weight:600;cursor:pointer}
/* stats */
/* panel */
.panel{left:50%;bottom:16px;width:min(760px,calc(100% - 32px));transform:translateX(-50%);padding:14px 18px 12px}.panel[hidden]{transform:translate(-50%,10px)}
.phead{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:8px}
.dates{font-weight:620;font-size:15px;font-variant-numeric:tabular-nums}.pbtn{display:flex;gap:6px}
.chipbtn{border:1px solid var(--ln);background:#fff;border-radius:999px;padding:5px 13px;font-size:13px;font-weight:560;cursor:pointer}
.chipbtn[aria-expanded=true]{background:var(--tx);color:#fff;border-color:var(--tx)}
.slider{position:relative;height:52px;touch-action:none;user-select:none;-webkit-user-select:none}
.slider canvas{position:absolute;inset:0;width:100%;height:100%}
.sel{position:absolute;top:0;bottom:0;background:rgba(39,69,122,.06);border-left:2px solid var(--ac);border-right:2px solid var(--ac);pointer-events:none}
.h{position:absolute;top:50%;width:22px;height:34px;margin:-17px 0 0 -11px;border-radius:9px;background:#fff;border:1.5px solid var(--ac);box-shadow:0 2px 8px rgba(20,26,46,.18);cursor:ew-resize;padding:0;touch-action:none}
.h::after{content:"";position:absolute;left:50%;top:9px;bottom:9px;width:2px;margin-left:-1px;background:rgba(39,69,122,.45);border-radius:1px}
.h:focus-visible{outline:3px solid rgba(39,69,122,.3)}
.ticks{position:relative;height:18px;color:var(--mu);font-size:11.5px;font-variant-numeric:tabular-nums}.ticks span{position:absolute;transform:translateX(-50%);top:3px}
.filters{border-top:1px solid var(--ln);margin-top:8px;padding-top:10px;display:grid;gap:8px}
.frow{display:flex;gap:10px;align-items:flex-start}.frow>span{width:44px;flex:none;color:var(--mu);font-size:12.5px;padding-top:5px}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--ln);background:#fff;color:var(--mu);padding:4px 11px;border-radius:999px;font-size:13px;cursor:pointer;transition:all .15s}
.chip i{width:8px;height:8px;border-radius:50%;background:currentColor;opacity:.35}
.chip.on{color:var(--tx);border-color:rgba(20,26,46,.22)}.chip.on i{opacity:1}
.chip:not(.on){opacity:.55}
.opts{align-items:center;gap:16px;font-size:13px;color:var(--mu);flex-wrap:wrap}.opts input{accent-color:var(--ac)}
.link{margin-left:auto;background:none;border:0;color:var(--ac);font-weight:600;font-size:13px;cursor:pointer;padding:0}
.leaflet-tooltip{border:0;border-radius:10px;box-shadow:0 6px 20px rgba(20,26,46,.15);font-size:13px;padding:7px 10px}
.leaflet-control-attribution{background:rgba(255,255,255,.6)!important;color:#98a2b3;font-size:10px}.leaflet-control-attribution a{color:#98a2b3}
.leaflet-bar{border:0!important;box-shadow:0 4px 16px rgba(20,26,46,.12)!important;border-radius:12px!important;overflow:hidden}.leaflet-bar a{border-color:var(--ln)!important;color:var(--tx)!important}
@media(max-width:640px){
 .panel{bottom:max(10px,env(safe-area-inset-bottom));width:calc(100% - 20px);padding:12px 14px 10px}
 .leaflet-control-zoom{display:none}.sub{font-size:15px}.drop{padding:30px 18px}
 .filters{max-height:38vh;overflow:auto}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

.seg{display:inline-flex;background:rgba(20,26,46,.05);border-radius:999px;padding:3px}
.seg button{border:0;background:none;border-radius:999px;padding:4px 12px;font-size:13px;color:var(--mu);cursor:pointer;transition:all .15s}
.seg button.on{background:#fff;color:var(--tx);box-shadow:0 1px 3px rgba(20,26,46,.15)}
.chip em{font-style:normal;color:var(--mu);font-size:11.5px;font-variant-numeric:tabular-nums}
body.one .chip i{display:none}

.chipbtn.icon{display:inline-flex;align-items:center;justify-content:center;padding:5px 9px}
.stats{cursor:pointer;transition:opacity .2s}.stats.off{opacity:.4}.stats.off b{color:var(--mu)}
@media(max-width:640px){.filters{max-height:none;overflow:visible;gap:6px;padding-top:8px}.frow{gap:6px}.frow>span{width:38px;font-size:11.5px;padding-top:3px}
 .chips{gap:4px}.chip{padding:2px 8px;font-size:12px;gap:4px}.chip em{font-size:10.5px}.seg button{padding:3px 10px;font-size:12px}.opts{gap:12px;font-size:12px}}

.card,.leaflet-control-container{transition:opacity .2s ease,transform .2s ease}
body.clean .stats{opacity:0!important;transform:translateY(-8px);pointer-events:none}
body.clean .panel{opacity:0;transform:translate(-50%,12px);pointer-events:none}
body.clean .leaflet-control-container{opacity:0;pointer-events:none}

.toast{position:fixed;z-index:800;left:50%;top:50%;transform:translate(-50%,-50%) scale(.98);background:rgba(20,26,46,.82);color:#fff;font-size:13.5px;padding:9px 16px;border-radius:999px;opacity:0;pointer-events:none;transition:opacity .3s ease,transform .3s ease}
.toast.on{opacity:1;transform:translate(-50%,-50%)}
.toast{white-space:nowrap}body.clean .toast{display:none}

/* play */
.dl{display:flex;align-items:center;gap:10px;min-width:0}
.playbtn{flex:none;width:30px;height:30px;border-radius:50%;border:0;background:var(--ac);color:#fff;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0 0 0 2px;transition:transform .15s,box-shadow .2s}
.playbtn.on{padding:0;box-shadow:0 0 0 4px rgba(56,189,248,.18)}.playbtn:active{transform:scale(.92)}
/* dark theme */
body.dark{--bg:#0a0f1c;--land:#18202f;--card:rgba(17,23,37,.86);--ln:rgba(255,255,255,.09);--tx:#e6eaf2;--mu:#8b95a8;--ac:#38bdf8;color-scheme:dark}
body.dark .card{box-shadow:0 1px 2px rgba(0,0,0,.3),0 12px 40px rgba(0,0,0,.45)}
body.dark .drop{background:rgba(17,23,37,.9);border-color:rgba(56,189,248,.35)}body.dark .drop:hover,body.dark .drop.over{background:#141c2e}
body.dark .chipbtn,body.dark .chip,body.dark #gridIn{background:rgba(255,255,255,.04)}
body.dark .chipbtn[aria-expanded=true]{background:var(--tx);color:#0a0f1c}
body.dark .chip.on{border-color:rgba(255,255,255,.22)}
body.dark .seg{background:rgba(255,255,255,.06)}body.dark .seg button.on{background:rgba(255,255,255,.14);box-shadow:none}
body.dark .sel{background:rgba(56,189,248,.08)}
body.dark .h{background:#1b2436;box-shadow:0 2px 8px rgba(0,0,0,.5)}body.dark .h::after{background:rgba(56,189,248,.6)}
body.dark .playbtn{color:#04121f}
body.dark .primary{color:#04121f}
body.dark .ghost:hover{background:rgba(56,189,248,.1)}
body.dark .err{background:#2a1218;border-color:#5b2130;color:#fda4af}
body.dark .toast{background:rgba(230,234,242,.92);color:#0a0f1c}
body.dark .leaflet-tooltip{background:#1b2436;color:var(--tx)}body.dark .leaflet-tooltip-top:before{border-top-color:#1b2436}
body.dark .leaflet-control-attribution{background:rgba(10,15,28,.6)!important;color:#5b6577}body.dark .leaflet-control-attribution a{color:#5b6577}
body.dark .leaflet-bar a{background:#141b2b!important}
.dates{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@media(max-width:640px){.dates{font-size:13.5px}.dl{gap:8px}.pbtn{gap:4px}.pbtn .chipbtn{padding:5px 10px}.pbtn .chipbtn.icon{padding:5px 8px}}

@font-face{font-family:"Inter Variable";font-style:normal;font-display:swap;font-weight:100 900;src:url(vendor/inter.woff2?v=74a194eeb5) format("woff2")}
.badge{position:fixed;z-index:610;left:50%;transform:translateX(-50%);top:max(98px,calc(env(safe-area-inset-top) + 88px));font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--mu);background:var(--card);border:1px solid var(--ln);padding:3px 10px;border-radius:999px;pointer-events:none;transition:opacity .2s}
@media(min-width:641px){.badge{top:22px}}
body.clean .badge{opacity:0}
.pc{position:fixed;inset:0;width:100%;height:100%;z-index:400;pointer-events:none;display:none}
#reset .ico{display:none}
@media(max-width:640px){#reset{padding:5px 8px}#reset .ico{display:block}#reset .lbl{display:none}}
.pc.dim{opacity:.7}
.tmu{color:var(--mu);font-size:12px}
/* phone landscape: slim KPI column top-left, compact panel */
@media (orientation:landscape) and (max-height:500px){
 .panel{bottom:max(6px,env(safe-area-inset-bottom));width:min(680px,calc(100% - 2*max(150px,env(safe-area-inset-left) + 140px)));padding:8px 14px 4px}
 .phead{margin-bottom:4px}.slider{height:38px}.ticks{height:15px;font-size:10.5px}
 .filters{max-height:calc(100vh - 150px);overflow:auto;gap:5px;padding-top:6px}
 .badge{top:10px}
}
.save2{position:fixed;z-index:620;right:max(12px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom));width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer;
 color:var(--tx);background:rgba(127,135,155,.16);border:1px solid var(--ln);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);opacity:0;pointer-events:none;transition:opacity .2s}
body.clean .save2{opacity:.6;pointer-events:auto}body.clean .save2:hover,body.clean .save2:active{opacity:.9}

/* KPI card */
.stats{top:max(16px,env(safe-area-inset-top));left:max(16px,env(safe-area-inset-left));display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding:0;width:min(420px,calc(100% - 32px))}
.stats>div{position:relative;padding:12px 16px 11px;min-width:0}
.stats>div+div::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:1px;background:var(--ln)}
.stats b{display:flex;align-items:baseline;column-gap:2px;font-size:22px;line-height:1.15;font-weight:600;letter-spacing:-.022em;font-variant-numeric:tabular-nums;white-space:nowrap}
.stats .unit{font-size:12.5px;font-weight:500;letter-spacing:.01em;color:var(--mu)}
.stats .lab{display:block;margin-top:2px;font-size:12.5px;line-height:1.2;letter-spacing:.015em;color:var(--mu);white-space:nowrap}
.stats.off b .num{color:var(--mu)}
@media(max-width:640px){
 .stats{left:max(10px,env(safe-area-inset-left));right:max(10px,env(safe-area-inset-right));width:auto;top:max(10px,env(safe-area-inset-top))}
 .stats b{font-size:20px}
}
@media(max-width:360px){.stats>div{padding:11px 12px 10px}.stats b{font-size:18px}.stats .lab{font-size:12px}.stats .unit{font-size:11.5px}}
@media (orientation:landscape) and (max-height:500px){
 .stats{grid-template-columns:1fr;width:auto;right:auto;top:max(8px,env(safe-area-inset-top));left:max(8px,env(safe-area-inset-left))}
 .stats>div{padding:8px 16px 7px}
 .stats>div+div::before{left:16px;right:16px;top:0;bottom:auto;width:auto;height:1px}
 .stats b{font-size:17px}.stats .lab{font-size:12px}
}
.stats .rng{display:none}
.stats.snap .rng{display:flex;flex-wrap:wrap;column-gap:.3em;grid-column:1/-1;position:relative;padding:9px 16px 11px;font-size:12.5px;line-height:1.2;letter-spacing:.015em;color:var(--mu);white-space:nowrap}
.stats.snap>.rng::before{content:"";position:absolute;left:16px;right:16px;top:0;height:1px;background:var(--ln)}
@media (orientation:landscape) and (max-height:500px){.stats.snap .rng{flex-direction:column;padding:8px 16px 9px;font-size:12px}}
:root{--sat:env(safe-area-inset-top);--sar:env(safe-area-inset-right);--sal:env(safe-area-inset-left)}
.smenu{z-index:900;top:0;left:0;padding:6px;min-width:184px;border-radius:16px;opacity:0;transform:scale(.96);transition:opacity .16s ease,transform .18s cubic-bezier(.2,.8,.2,1)}
.smenu.on{opacity:1;transform:none}
.smenu button{display:flex;align-items:center;gap:12px;width:100%;min-height:46px;padding:0 14px 0 12px;border:0;border-radius:11px;background:none;color:var(--tx);font:500 14.5px/1 "Inter Variable",Inter,system-ui,sans-serif;letter-spacing:-.005em;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
.smenu button+button{margin-top:2px}
.smenu button:hover,.smenu button:focus-visible{background:color-mix(in srgb,var(--tx) 7%,transparent);outline:0}
.smenu button:active{background:color-mix(in srgb,var(--tx) 11%,transparent)}
.smenu svg{width:19px;height:19px;flex:none;color:var(--mu)}
.smenu span{flex:1}
.smenu i{width:14px;height:14px;flex:none;border-radius:50%;border:1.8px solid color-mix(in srgb,var(--tx) 22%,transparent);border-top-color:var(--tx);opacity:0}
.smenu.busy button{pointer-events:none}.smenu.busy button:not(.wait){opacity:.45}
.smenu button.wait i{opacity:1;animation:smspin .7s linear infinite}
.smenu button.wait span::after{content:"…"}
@keyframes smspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.smenu{transition:opacity .12s linear;transform:none}.smenu button.wait i{animation-duration:2s}}
/* layout used only while drawing the whole-world photo */
body.wshot .stats{position:fixed!important;top:var(--wt,22px)!important;left:22px!important;right:auto!important;width:430px!important;grid-template-columns:repeat(3,minmax(0,1fr))!important}
body.wshot .stats>div{padding:12px 16px 11px!important}
body.wshot .stats>div+div::before{left:0!important;right:auto!important;top:12px!important;bottom:12px!important;width:1px!important;height:auto!important}
body.wshot .stats b{font-size:22px!important}body.wshot .stats .lab,body.wshot .stats .unit{font-size:12.5px!important}
body.wshot .stats.snap .rng{flex-direction:row!important;padding:9px 16px 11px!important;font-size:12.5px!important}
.filters{transition:transform .25s cubic-bezier(.16,1,.3,1),opacity .25s cubic-bezier(.16,1,.3,1);will-change:transform,opacity}
.filters.fs-in{transform:translateY(14px);opacity:0;transition:none}
.filters.fs-out{transform:translateY(10px);opacity:0;transition:transform .2s cubic-bezier(.33,1,.68,1),opacity .2s cubic-bezier(.33,1,.68,1)}
@media (prefers-reduced-motion:reduce){.filters,.filters.fs-out{transition:opacity .12s linear}.filters.fs-in,.filters.fs-out{transform:none}}