.city-section{padding:96px var(--page-x) 40px}
.city-section .section-heading p.city-sub{color:var(--muted);margin:10px 0 0;font-size:17px}
.city-stage{position:relative;margin-top:28px;height:min(78vh,760px);min-height:420px;border-radius:24px;overflow:hidden;background:#dfe9f2;box-shadow:var(--shadow);touch-action:pan-y;cursor:grab;user-select:none}
.city-stage.dragging{cursor:grabbing}
.city-stage canvas,.city-stage .city-poster{position:absolute;inset:0;width:100%;height:100%;display:block}
.city-stage .city-poster{object-fit:cover;transition:opacity .5s}
.city-stage.ready .city-poster{opacity:0}
.city-tabs{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);display:flex;gap:6px;padding:6px;background:rgba(255,255,255,.88);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:999px;box-shadow:0 10px 30px rgba(28,32,40,.14)}
.city-tabs button{border:0;background:transparent;font:inherit;font-weight:700;font-size:15px;color:var(--ink);padding:9px 18px;border-radius:999px;cursor:pointer}
.city-tabs button.active{background:var(--orange);color:#fff}
.city-tabs button:not(.active):hover{background:var(--orange-soft)}
.city-hint{position:absolute;left:20px;top:18px;padding:7px 13px;border-radius:999px;background:rgba(255,255,255,.82);font-size:13px;font-weight:700;color:var(--ink);pointer-events:none;transition:opacity .6s}
.city-stage.moved .city-hint{opacity:0}
.city-load{position:absolute;right:20px;top:18px;width:18px;height:18px;border-radius:50%;border:3px solid rgba(255,255,255,.7);border-top-color:var(--orange);animation:cityspin 1s linear infinite}
.city-stage.ready .city-load{display:none}
@keyframes cityspin{to{transform:rotate(360deg)}}
@media (max-width:760px){.city-section{padding:64px 16px 24px}.city-stage{height:72vh;border-radius:18px}.city-tabs button{padding:8px 13px;font-size:14px}}