.geo{position:relative;height:min(84vh,820px);min-height:560px;overflow:hidden;outline:none;isolation:isolate;background:#cfe3f5}
.geo:focus-visible{box-shadow:inset 0 0 0 4px var(--gold)}
.geo-sky{position:absolute;inset:0;z-index:0;transition:background .8s ease}
.geo[data-sky=day] .geo-sky{background:linear-gradient(180deg,#7fb3e6 0%,#bcd9f2 45%,#e8f1fa 70%)}
.geo[data-sky=golden] .geo-sky{background:linear-gradient(180deg,#5d6fb8 0%,#e48a76 42%,#ffc98b 68%,#ffe6c4 80%)}
.geo[data-sky=night] .geo-sky{background:radial-gradient(1.5px 1.5px at 12% 18%,#fff,transparent 60%),radial-gradient(1px 1px at 28% 8%,#fff,transparent 60%),radial-gradient(1.5px 1.5px at 47% 22%,#fff,transparent 60%),radial-gradient(1px 1px at 63% 12%,#fff,transparent 60%),radial-gradient(2px 2px at 78% 26%,#fff,transparent 60%),radial-gradient(1px 1px at 88% 9%,#fff,transparent 60%),radial-gradient(1px 1px at 36% 30%,#fff,transparent 60%),radial-gradient(1.5px 1.5px at 92% 34%,#fff,transparent 60%),linear-gradient(180deg,#060b1f 0%,#13214a 50%,#22335f 75%)}
#geo-cv{position:absolute;inset:0;width:100%;height:100%;z-index:1;touch-action:pan-y;cursor:grab;display:none}
#geo-cv:active{cursor:grabbing}
.geo.gl-on #geo-cv{display:block}
.geo-pins{position:absolute;inset:0;z-index:2;pointer-events:none}
.gpin{position:absolute;left:0;top:0;pointer-events:auto;border:0;background:none;padding:0;margin:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;transform-origin:50% 100%;will-change:transform;font:inherit}
.gpin[hidden]{display:none}
.gpin .gl{order:0;background:rgba(255,255,255,.95);color:var(--deep);font-weight:800;font-size:12.5px;padding:3px 8px;border-radius:999px;box-shadow:0 2px 8px rgba(18,33,63,.25);white-space:nowrap;margin-bottom:2px}
.gpin svg{order:1;width:20px;height:27px;filter:drop-shadow(0 2px 2px rgba(0,0,0,.35))}
.gpin.t0 .gl{font-size:14px;padding:4px 10px}
.gpin:hover .gl,.gpin:focus-visible .gl,.gpin.sel .gl{background:var(--gold);color:#3b2f00}
.gpin:focus-visible{outline:none}.gpin:focus-visible .gl{box-shadow:0 0 0 3px var(--navy)}
.geo[data-sky=night] .gpin.city svg{filter:drop-shadow(0 0 6px rgba(255,209,0,.9))}
.gpin.trail{flex-direction:column}
.gpin.trail .gl{order:0;font-size:13px;background:#fff}
.gpin.trail .ti{order:1;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-size:22px;background:#fff;border:4px solid var(--red);box-shadow:0 6px 16px rgba(18,33,63,.3);animation:bob 5s ease-in-out infinite}
.gpin.trail::after{content:'';order:2;width:3px;height:30px;background:linear-gradient(#fff,rgba(255,255,255,0));opacity:.9}
.gpin.trail.seo .ti{border-color:#1b2f5b}.gpin.trail.web .ti{border-color:#c8102e}.gpin.trail.paint .ti{border-color:#7a3b21}.gpin.trail.bath .ti{border-color:#0f5b5a}.gpin.trail.mall .ti{border-color:#b45309}
.gpin.trail.portal .ti{width:58px;height:58px;font-size:26px;border:0;background:#fff;position:relative}
.gpin.trail.portal .ti::before{content:'';position:absolute;inset:-6px;border-radius:50%;background:conic-gradient(#ff5a8a,#ffd100,#22c08a,#3a7bd5,#8b5cf6,#ff5a8a);z-index:-1;animation:spin 14s linear infinite}
.gpin.trail.portal .gl{background:linear-gradient(90deg,#3b2a7a,#5b3fc4);color:#fff}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.geo-card{position:absolute;left:22px;top:22px;z-index:3;max-width:380px;background:rgba(255,255,255,.93);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.8);border-radius:20px;padding:20px 22px;box-shadow:0 12px 40px rgba(18,33,63,.22)}
.geo-card .tag{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.05em;color:var(--red)}
.geo-card h1{font-size:clamp(1.6rem,3.2vw,2.4rem);line-height:1.05;margin:8px 0 8px;color:var(--deep)}
.geo-card p{margin:0 0 12px;color:var(--soft)}
#geo-find{display:flex;gap:8px}#geo-find input{flex:1;min-width:0;font:inherit;font-size:16px;padding:11px 12px;border:1px solid #c3cfe0;border-radius:10px}
.geo-ctl{position:absolute;right:18px;top:22px;z-index:3;display:flex;flex-direction:column;gap:8px}
.geo-ctl button{min-width:46px;height:46px;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.95);color:var(--deep);font:800 20px var(--body);cursor:pointer;box-shadow:0 4px 14px rgba(18,33,63,.18)}
.geo-ctl #geo-sky{font-size:13px;padding:0 10px}
.geo-ctl button:hover{background:var(--gold)}
.geo-panel{position:absolute;right:18px;bottom:22px;z-index:4;width:min(360px,calc(100% - 36px));max-height:70%;overflow:auto;background:#fff;border-radius:20px;padding:22px;box-shadow:0 16px 50px rgba(18,33,63,.3);animation:pop .25s ease-out}
.geo-panel .gx{position:absolute;right:10px;top:10px;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:#fff;font-size:20px;cursor:pointer}
.geo-panel .gk{font-size:12px;font-weight:800;letter-spacing:.05em;color:var(--red);text-transform:uppercase}
.geo-panel h2{margin:4px 40px 6px 0;font-size:1.6rem}
.geo-panel .gc{margin:0 0 12px;color:var(--soft)}
.geo-panel .grow{display:flex;flex-wrap:wrap;gap:8px}
.gcats{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.gcats a,.gbest a{font-size:13.5px;font-weight:700;text-decoration:none;padding:6px 10px;border-radius:999px;border:1px solid var(--line);background:var(--mist)}
.gbest{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px;padding-top:12px;border-top:1px dashed var(--line)}.gbest b{width:100%;font-size:13px}
.geo-down{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);z-index:3;background:rgba(255,255,255,.95);color:var(--deep);font-weight:800;font-size:14px;text-decoration:none;padding:10px 16px;border-radius:999px;box-shadow:0 4px 14px rgba(18,33,63,.2)}
.geo-flat{position:absolute;inset:0;z-index:1;display:none}
.geo.nogl .geo-flat{display:block}
.geo-flat .fmap{position:absolute;inset:0;width:100%;height:100%}
.geo-flat .fp{position:absolute;transform:translate(-50%,-50%);background:#fff;color:var(--deep);font-weight:800;font-size:13px;padding:4px 9px;border-radius:999px;text-decoration:none;box-shadow:0 2px 8px rgba(18,33,63,.25);white-space:nowrap}
.geo-flat .fp.t1{font-size:11.5px;opacity:.9}
.tgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px;margin-top:14px}
.tcard{display:flex;flex-direction:column;gap:6px;background:#fff;border:1px solid var(--line);border-radius:18px;padding:18px;text-decoration:none;color:var(--ink);transition:transform .2s ease,box-shadow .2s ease}
.tcard:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(18,33,63,.12)}
.tcard .ti{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-size:22px;border:3px solid var(--red)}
.tcard.seo .ti{border-color:#1b2f5b}.tcard.paint .ti{border-color:#7a3b21}.tcard.bath .ti{border-color:#0f5b5a}.tcard.mall .ti{border-color:#b45309}.tcard.portal .ti{border-color:#5b3fc4}
.tcard b{font-size:1.1rem;color:var(--deep)}.tcard small{color:var(--soft);font-size:14.5px}
.ctgrid{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
@media (max-width:760px){
 .geo{height:78vh;min-height:520px}
 .geo-card{left:12px;right:12px;top:12px;max-width:none;padding:14px 16px;border-radius:16px}
 .geo-card h1{font-size:1.45rem}.geo-card p{display:none}
 .geo-ctl{right:12px;top:auto;bottom:70px}
 .geo-panel{left:10px;right:10px;width:auto;bottom:10px;max-height:58%}
 .geo-down{bottom:14px;font-size:13px}
 .gpin .gl{font-size:11.5px}
}
@media (prefers-reduced-motion:reduce){.gpin.trail .ti,.gpin.trail.portal .ti::before{animation:none}.tcard{transition:none}}