.city-page{color:#eaf1f7;background:#0a1420;width:100vw;height:100dvh;min-height:100dvh;font-family:Segoe UI,sans-serif;position:relative;overflow:hidden}.city-stage{position:absolute;inset:0}.city-stage canvas{touch-action:none;width:100%;height:100%;display:block}.topbar{pointer-events:none;align-items:center;gap:12px;display:flex;position:absolute;top:18px;left:18px;right:18px}.brand,.infocard,.modeToggle,.tiltbtn,.compass,.zoomstack{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.brand{pointer-events:auto;background:#0d1b29e6;border:1px solid #8caac82e;border-radius:14px;align-items:center;gap:10px;padding:10px 16px;display:flex}.brand-name{font-size:15px;font-weight:600}.infocard{color:#eaf1f7;background:#0d1b29e6;border:1px solid #8caac82e;border-radius:14px;width:250px;padding:14px 16px;transition:opacity .25s,transform .25s;position:absolute;bottom:18px;left:18px}.infocard.hidden{opacity:0;pointer-events:none;transform:translateY(6px)}.infocard .row1{font-size:14px;font-weight:600}.infocard .row2{color:#8fa7bc;margin-top:4px;font-size:11.5px;line-height:1.5}.divider{background:#8caac82e;height:1px;margin:10px 0}.stat{color:#8fa7bc;justify-content:space-between;margin-top:4px;font-size:11.5px;display:flex}.stat b{color:#eaf1f7;font-weight:600}.delete-object{color:#ffb3b3;width:100%;font:inherit;cursor:pointer;background:#a836362e;border:1px solid #ee69698c;border-radius:8px;margin-top:12px;padding:8px 10px;font-size:12px}.delete-object:hover{color:#fff;background:#a8363652}.modeToggle{background:#0d1b29e6;border:1px solid #8caac82e;border-radius:14px;gap:4px;padding:4px;display:flex;position:absolute;top:18px;right:18px}.modeToggle button{color:#8fa7bc;cursor:pointer;background:0 0;border:none;border-radius:10px;padding:8px 16px;font-family:inherit;font-size:12.5px}.modeToggle button.active{color:#eaf1f7;background:#16293c}.controls{flex-direction:column;align-items:flex-end;gap:12px;display:flex;position:absolute;bottom:18px;right:18px}.controls-stack{flex-direction:column;align-items:flex-end;gap:10px;display:flex}.expand-toggle{color:#eaf1f7;cursor:pointer;background:0 0;border:1px solid #8caac82e;border-radius:50%;justify-content:center;align-items:center;width:44px;height:44px;padding:0;font-size:28px;line-height:1;display:flex}.expand-toggle.open{transform:rotate(45deg)}.tiltbtn{color:#eaf1f7;cursor:pointer;background:0 0;border:1px solid #8caac82e;border-radius:14px;align-items:center;gap:8px;padding:9px 14px;font-size:12.5px;display:flex}.tiltbtn:hover,.expand-toggle:hover{background:#ffffff0f}.road-btn.active{color:#f2a93b;background:#f2a93b33;border-color:#f2a93bcc}.roadicon{background:#1e2632;border:1px solid #fff6;border-radius:2px;justify-content:center;align-items:center;width:18px;height:10px;display:flex;position:relative}.roadicon:after{content:"";background:repeating-linear-gradient(90deg,#f2a93b 0 3px,#0000 3px 6px);width:100%;height:2px}.drawbtn.active{background:#49d3c433;border-color:#49d3c4b3}.drawicon{border:1px solid #49d3c4;width:8px;height:8px;transform:rotate(45deg)}.lane-btn.active{background:#ffffff24;border-color:#ffffffb3}.laneicon{background:repeating-linear-gradient(90deg,#fff 0 5px,#0000 5px 9px);width:16px;height:2px}.crosswalk-btn.active{background:#49d3c424;border-color:#49d3c4b3}.crosswalkicon{background:repeating-linear-gradient(90deg,#fff 0 3px,#0000 3px 5px);border-radius:2px;width:18px;height:10px;position:relative}.crosswalkicon:before{content:"";background:repeating-linear-gradient(90deg,#ffffff2e 0 2px,#0000 2px 4px);position:absolute;inset:0}.arrow-btn.active{background:#49d3c424;border-color:#49d3c4b3}.arrowicon{border-bottom:9px solid #fff;border-left:5px solid #0000;border-right:5px solid #0000;width:0;height:0;position:relative}.arrowicon:after{content:"";background:#fff;width:4px;height:5px;position:absolute;top:9px;left:-2px}.dot{background:#49d3c4;border-radius:50%;width:6px;height:6px}.compass{cursor:pointer;background:#0d1b29e6;border:1px solid #8caac82e;border-radius:50%;justify-content:center;align-items:center;width:44px;height:44px;display:flex}.zoomstack{background:#0d1b29e6;border:1px solid #8caac82e;border-radius:14px;overflow:hidden}.zoomstack button{color:#eaf1f7;cursor:pointer;background:0 0;border:none;width:44px;height:40px;font-family:inherit;font-size:18px;display:block}.zoomstack .sep{background:#8caac82e;height:1px}