@font-face{font-family:"LXGWWenKaiMono Nerd Font";src:local("LXGWWenKaiMono Nerd Font"),local("LXGWWenKaiMonoNF-Regular"),url(fontes/mono.woff2) format("woff2");font-display:swap}
:root{--gota:cubic-bezier(.2,1,.2,1);--petricor:cubic-bezier(.05,.9,.1,1);--mare:cubic-bezier(.65,0,.35,1);--respiro:cubic-bezier(.34,1.4,.64,1);--gaveta:cubic-bezier(.32,.72,0,1);--texto:"Michelangelus","LXGW WenKai Screen",system-ui,sans-serif;--mono:"LXGWWenKaiMono Nerd Font",ui-monospace,monospace;--destaque:"Ma Shan Zheng",var(--texto);--sombra:0 6px 22px rgb(0 0 0/.38);--anel:color-mix(in srgb,var(--acento) 30%,transparent)}
@keyframes surge{from{opacity:0;translate:0 10px}}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html,body{height:100%;touch-action:pan-x pan-y;background:var(--breu);color:var(--areia);font:14px/1.4 var(--texto);font-variant-numeric:tabular-nums}
body{overflow:hidden;--pw:408px}
body.sem{--pw:0px}
#lado{position:fixed;inset:0;overflow:hidden}
#mapa{position:absolute;inset:0}
#vento,#placas,#mascara{position:absolute;left:0;top:0;pointer-events:none}
#mascara{opacity:0;transition:opacity .6s}
.g{font-family:var(--mono)}
#chips{position:absolute;top:calc(14px + env(safe-area-inset-top));left:calc(14px + env(safe-area-inset-left));max-width:calc(100% - var(--pw) - 74px);display:flex;flex-wrap:wrap;gap:2px;z-index:2;background:var(--terra);border-radius:20px;padding:4px;box-shadow:var(--sombra);animation:surge .6s var(--petricor) both}
#chips button{display:flex;align-items:center;gap:6px;font:12px var(--texto);border:0;border-radius:999px;padding:6px 13px 6px 10px;background:none;color:var(--areia);cursor:pointer;transition:background .35s var(--gota),color .35s var(--gota),scale .3s var(--respiro)}
#chips button .g{width:17px;text-align:center;font-size:15px;color:var(--fonte);transition:color .35s var(--gota)}
#chips button:active,#play:active,#vel:active,#recolhe:active{scale:.92}
#chips button[aria-pressed=true] .g{color:var(--breu)}
#chips button:hover{background:var(--limo)}
#chips button[aria-pressed=true]{background:var(--acento);color:var(--breu)}
#recolhe{position:absolute;top:calc(14px + env(safe-area-inset-top));right:calc(var(--pw) + 14px);z-index:2;width:40px;height:40px;border:0;border-radius:50%;background:var(--terra);box-shadow:var(--sombra);animation:surge .6s .08s var(--petricor) both;color:var(--areia);font:17px/1 var(--mono);cursor:pointer;transition:right .5s var(--petricor),background .35s var(--gota),scale .3s var(--respiro)}
#recolhe:hover{background:var(--limo)}
#tempo{position:absolute;left:14px;right:calc(var(--pw) + 14px);transition:right .5s var(--petricor);bottom:14px;display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:12px;background:var(--terra);border-radius:24px;padding:6px 18px 4px 6px;z-index:2;box-shadow:var(--sombra);animation:surge .6s .16s var(--petricor) both}
#play{width:38px;height:38px;border-radius:50%;border:0;background:var(--acento);color:var(--breu);font:18px/1 var(--mono);cursor:pointer;transition:background .35s var(--gota),box-shadow .35s var(--gota),scale .3s var(--respiro)}
#play:hover{box-shadow:0 0 0 5px var(--anel)}
#play[aria-pressed=true]{background:var(--areia);box-shadow:0 0 0 5px var(--anel)}
#vel{min-width:42px;height:26px;border-radius:999px;border:0;background:var(--barro);color:var(--areia);font:11px var(--mono);cursor:pointer;margin-left:-4px;transition:background .35s var(--gota),scale .3s var(--respiro)}
#vel:hover,#recolhe:hover{background:var(--limo)}
#instante{position:absolute;bottom:calc(100% + 11px);translate:-50% 0;font:12px var(--mono);white-space:nowrap;background:var(--acento);color:var(--breu);border-radius:8px;padding:3px 10px;pointer-events:none;box-shadow:var(--sombra)}
#instante::after{content:'';position:absolute;left:50%;top:100%;translate:-50% 0;border:5px solid transparent;border-top-color:var(--acento)}
#instante:empty{display:none}
#slider{appearance:none;-webkit-appearance:none;background:none;height:20px;width:100%;cursor:pointer}
#trilho{position:relative;display:grid}
#dias{position:relative;height:17px;font:10px/12px var(--mono);pointer-events:none}
#dias span{position:absolute;top:4px;translate:-50% 0;white-space:nowrap;color:var(--areia);opacity:.7}
#dias i{position:absolute;top:0;width:1px;height:3px;background:var(--fonte)}
#dias i.d{height:16px}
#dias b{position:absolute;top:-1px;width:5px;height:5px;border-radius:50%;translate:-50% 0;background:var(--acento)}
#slider{--tr:linear-gradient(var(--fonte) 0 0) left center/var(--ag,0%) 2px no-repeat,linear-gradient(var(--fonte) 0 0) right center/calc(100% - var(--ag,0%)) 4px no-repeat}
#slider::-moz-range-track{height:4px;background:var(--tr)}
#slider::-moz-range-thumb{width:14px;height:14px;border:0;border-radius:50%;background:var(--acento);box-shadow:0 0 0 5px var(--anel);transition:transform .3s var(--respiro)}
#slider:hover::-moz-range-thumb{transform:scale(1.15)}
#slider::-webkit-slider-runnable-track{height:4px;background:var(--tr)}
#slider::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;margin-top:-5px;border-radius:50%;background:var(--acento);box-shadow:0 0 0 5px var(--anel)}
#slider:active::-moz-range-thumb{transform:scale(1.25)}
#legenda{position:absolute;top:max(56px,calc(var(--chips,0px) + 22px));right:calc(var(--pw) + 14px);transition:right .5s var(--petricor);width:250px;background:var(--terra);border-radius:16px;padding:10px 14px 8px;font:11px var(--mono);z-index:2;box-shadow:var(--sombra);animation:surge .6s .12s var(--petricor) both}
.leg .tit{color:var(--areia)}
.leg .rot,.leg .fr{color:var(--areia);opacity:.65}
.leg .item+.item{margin-top:10px;padding-top:9px;border-top:1px solid var(--limo)}
.leg .barra{height:8px;border-radius:4px;margin:6px 0 3px}
.leg .rot{position:relative;height:13px;font-size:10px}
.leg .rot span{position:absolute;translate:-50% 0;white-space:nowrap}
.leg .rot span:first-child{translate:0}
.leg .rot span:last-child:not(:first-child){translate:-100% 0}
.leg .fr{margin-top:4px;font-size:10px}
#dica,#leg-painel{display:none}
#mira{position:absolute;left:0;top:0;z-index:2;pointer-events:none;background:var(--terra);box-shadow:var(--sombra);border-radius:10px;padding:4px 10px;font:11px var(--mono);display:flex;align-items:baseline;gap:10px;white-space:nowrap}
#mira b{font:15px var(--mono)}
#mira .seta{display:inline-block;margin-right:3px;font-style:normal}
#mira .ch{color:var(--musgo)}
#aviso{position:absolute;left:0;top:0;z-index:3;pointer-events:none;background:var(--terra);box-shadow:var(--sombra);border-radius:10px;padding:5px 11px;font:12px var(--texto);white-space:nowrap;transform:translateY(-100%)}
#aviso div{display:flex;gap:7px;align-items:baseline}
#aviso .g{color:var(--ocre)}
#aviso .n1 .g,#aviso .n2 .g{color:var(--ferro)}
#aviso small{font:10px var(--mono);color:var(--fonte)}
.maplibregl-canvas-container.maplibregl-interactive,.maplibregl-canvas-container.maplibregl-interactive:active{cursor:default}
.cid{display:flex;align-items:center;gap:5px;pointer-events:none;font:11px var(--mono)}
.cid b{font-weight:normal;background:var(--terra);border-radius:999px;padding:1px 7px;box-shadow:0 2px 8px rgb(0 0 0/.4)}
.cid span{display:none;font:12px var(--texto);text-shadow:0 0 3px var(--breu),0 0 2px var(--breu)}
#mapa:not(.z5) .cid.n2{display:none}
#mapa.z5 .cid span{display:inline}
.massa{font:11px var(--mono);background:var(--terra);border-radius:999px;padding:2px 9px;pointer-events:none;white-space:nowrap}
.massa.f{color:var(--areia)}
.massa.q{color:var(--ferro)}
.leg b{font-weight:normal;margin-left:6px}
.lugar{width:14px;height:14px;border-radius:50%;border:3px solid var(--breu);background:var(--acento);box-shadow:0 0 0 0 var(--anel);animation:pulso 2.4s ease-out infinite}
@keyframes pulso{70%{box-shadow:0 0 0 14px transparent}100%{box-shadow:0 0 0 0 transparent}}
#painel{position:fixed;top:14px;right:14px;max-height:calc(100dvh - 28px);width:380px;z-index:3;border-radius:22px;transition:translate .5s var(--petricor);background:var(--terra);box-shadow:var(--sombra);overflow-y:auto;scrollbar-width:none;padding:22px;display:flex;flex-direction:column;gap:14px}
#painel::-webkit-scrollbar{display:none}
#busca{position:relative}
#busca .g{position:absolute;left:13px;top:50%;translate:0 -50%;font-size:17px;pointer-events:none}
#q{appearance:none;width:100%;font:14px var(--texto);background:var(--barro);color:var(--areia);border:0;border-radius:14px;padding:10px 14px 10px 38px;outline:none;transition:background .3s var(--gota)}
#q:focus{background:var(--limo)}
#q::-webkit-search-cancel-button{display:none}
#sugestoes{position:absolute;top:calc(100% + 4px);left:0;right:0;background:var(--barro);border-radius:14px;list-style:none;padding:4px;z-index:5}
#sugestoes li{padding:7px 10px;border-radius:10px;cursor:pointer}
#sugestoes li.sel,#sugestoes li:hover{background:var(--limo)}
#sugestoes span{font-size:12px}
section{background:var(--barro);border-radius:14px;padding:14px}
#agora{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:0 22px;background:none;padding:4px 2px}
.temp{font:104px/1 var(--destaque)}
.info{display:grid;gap:3px}
.nome{font-size:22px;line-height:1.2}
.nome small{font-size:14px}
.dado{font:12px var(--mono)}
.seta{display:inline-block;margin-right:4px}
#rodape{font:10px var(--mono);display:flex;flex-wrap:wrap;gap:4px 14px;padding:0 2px;margin-top:auto}
.erro{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--ferro);margin-left:4px;vertical-align:middle}
body.sem #painel{translate:calc(100% + 28px) 0}
#alca{display:none}
@media (max-width:900px){
body,body.sem{--pw:0px;--ph:62dvh;--peek:calc(66px + max(env(safe-area-inset-bottom) - 12px,10px))}
body.sem{--ph:var(--peek)}
#chips{top:calc(10px + env(safe-area-inset-top));left:10px;right:10px;max-width:none;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;border-radius:999px}
#chips::-webkit-scrollbar{display:none}
#chips button{flex:none;padding:7px 13px 7px 10px}
#recolhe{display:none}
#alca{display:block;flex:none;position:relative;height:16px;margin:0 -16px;border:0;background:none;cursor:grab;touch-action:none}
#alca::before{content:"";position:absolute;left:50%;top:5px;translate:-50% 0;width:40px;height:5px;border-radius:3px;background:var(--limo)}
#legenda{display:none}
#dica{display:flex;position:absolute;top:calc(62px + env(safe-area-inset-top));right:10px;z-index:2;gap:6px;align-items:center;border:0;background:var(--terra);color:var(--areia);border-radius:999px;padding:6px 12px 6px 10px;font:11px var(--mono);box-shadow:var(--sombra);animation:surge .6s .12s var(--petricor) both}
#leg-painel{display:block;flex:none;border:1px solid var(--limo);border-radius:16px;padding:10px 14px 8px;font:11px var(--mono)}
#tempo{left:8px;right:8px;bottom:calc(var(--ph) + 8px);transition:bottom .6s var(--gaveta);padding-right:14px}
#slider::-moz-range-thumb{width:20px;height:20px}
#slider::-webkit-slider-thumb{width:20px;height:20px;margin-top:-8px}
#slider{height:28px}
#painel{top:auto;left:0;right:0;bottom:0;width:auto;height:62dvh;border-radius:22px 22px 0 0;padding:4px 16px calc(22px + env(safe-area-inset-bottom));gap:8px;overscroll-behavior-y:none}
body.sem #painel{translate:0 calc(100% - var(--peek));overflow:hidden}
#painel{transition:translate .6s var(--gaveta)}
#lugar>*,#leg-painel,#rodape{transition:opacity .45s var(--gota) .1s,translate .6s var(--gaveta) .06s}
#leg-painel{transition-delay:.16s,.12s}
#rodape{transition-delay:.22s,.18s}
body.sem :is(#lugar>*,#leg-painel,#rodape){opacity:0;translate:0 24px;transition:opacity .15s,translate 0s .3s}
#painel.arrasta :is(#lugar>*,#leg-painel,#rodape){opacity:1;translate:0 0;transition:opacity .15s}
#agora{gap:0 16px}
.temp{font-size:64px}
.nome{font-size:18px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition-duration:0s!important}}