:root{color-scheme:dark;font-family:Inter,Segoe UI,Arial,sans-serif;color:#f7f8fa;background:#111820}*{box-sizing:border-box}body{margin:0;overflow:hidden}button,input{font:inherit}button{border:1px solid #ffffff26;background:#172430e8;color:inherit;border-radius:10px;cursor:pointer;padding:10px 14px;box-shadow:0 3px 15px #0002}button:hover{background:#294153}button:focus-visible,.pin:focus-visible{outline:3px solid #62d1ff;outline-offset:3px}[hidden]{display:none!important}header{height:72px;display:flex;gap:14px;align-items:center;padding:0 22px;border-bottom:1px solid #ffffff15;background:#111b25;position:relative;z-index:20}header>div{flex:1}header strong{font-size:20px;font-weight:650}header span#modeLabel{display:block;color:#aabcc9;font-size:12px;margin-top:4px}#count{background:#386985;border-radius:12px;padding:2px 7px;margin-left:7px;font-size:12px}main,section{position:absolute;inset:72px 0 0;overflow:hidden;touch-action:none}#mapView{background:#111820;cursor:grab}#mapView.dragging{cursor:grabbing}#mapPlane{width:4096px;height:4096px;transform-origin:0 0;will-change:transform;position:absolute;left:0;top:0}#mapImage{width:100%;height:100%;display:block;user-select:none;pointer-events:none}#pins{position:absolute;inset:0}.pin{position:absolute;transform:translate(-50%,-50%);border:3px solid #fff;background:#167aaf;border-radius:50%;width:38px;height:38px;padding:0;font-size:13px;font-weight:750;box-shadow:0 4px 20px #0009;z-index:2;transform-origin:center}.pin:hover{background:#ff8b3d;z-index:5}.pin::after{content:'360';position:absolute;background:#122533ed;color:#fff;border-radius:5px;font-size:9px;padding:2px 4px;top:32px;left:4px;letter-spacing:.5px}.pin.selected{background:#fa853c}.pin.editing{background:#e89b25;cursor:move}#mapHint{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);padding:10px 16px;border:1px solid #ffffff25;border-radius:12px;background:#132431e8;font-size:13px;white-space:nowrap;pointer-events:none}.mapTools{position:absolute;right:22px;bottom:76px;display:grid;gap:5px}.mapTools button{width:43px;height:43px;font-size:23px;padding:0}#mapOptions{position:absolute;left:22px;top:18px;display:flex;gap:8px;align-items:center}#mapOptions label{background:#142432ed;padding:11px 13px;border:1px solid #ffffff26;border-radius:10px;font-size:13px}input{accent-color:#31a4d6}#placementNote{position:absolute;left:22px;bottom:22px;color:#b9c5cf;font-size:11px;background:#111c27da;padding:7px 10px;border-radius:6px}#panoCanvas{width:100%;height:100%;display:block;touch-action:none;cursor:grab}#panoInfo{position:absolute;left:22px;top:20px;background:linear-gradient(120deg,#102434ef,#10243488);padding:17px 20px;border-radius:14px;pointer-events:none;max-width:430px}.badge{font-size:10px;letter-spacing:1.8px;color:#77d3ff}h1{font-size:21px;margin:7px 0}#panoInfo p{font-size:12px;color:#c0ced7;margin:0}#panoTools{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);display:flex;gap:9px;align-items:center;background:#11202be3;border:1px solid #ffffff26;border-radius:14px;padding:8px;white-space:nowrap}#panoCounter{font-size:12px;padding:0 6px;color:#c0d0dc}#gallery{position:absolute;right:16px;top:84px;bottom:16px;width:330px;background:#12222df5;border:1px solid #ffffff26;border-radius:16px;z-index:30;box-shadow:0 12px 60px #0008;overflow:auto}.galleryHead{position:sticky;top:0;display:flex;align-items:center;justify-content:space-between;padding:12px 14px;background:#12222d;z-index:2}.galleryHead strong{font-size:14px}.galleryHead button{font-size:22px;padding:3px 11px}.galleryItem{display:block;margin:0 12px 12px;padding:0;overflow:hidden;width:calc(100% - 24px);text-align:left}.galleryItem img{width:100%;height:112px;object-fit:cover;display:block}.galleryItem span{display:block;padding:10px 12px;font-size:13px}.galleryItem small{display:block;padding:0 12px 10px;color:#a6bdcc;font-size:10px}#status{position:absolute;inset:72px 0 0;display:flex;align-items:center;justify-content:center;z-index:40;background:#101b25c9;backdrop-filter:blur(4px);font-size:16px}#toast{position:absolute;top:88px;left:50%;transform:translateX(-50%);z-index:60;max-width:90vw;border-radius:12px;padding:12px 18px;background:#133247f5;border:1px solid #4c94b5;box-shadow:0 5px 30px #0005;font-size:13px}@media(max-width:700px){header{padding:0 12px;gap:7px;height:76px}header strong{font-size:17px}header button{font-size:12px;padding:10px}main,section{top:76px}#mapOptions{left:10px;top:12px;flex-wrap:wrap;max-width:85%}#mapHint{font-size:10px;bottom:12px}#placementNote{bottom:57px;left:10px;font-size:10px}.mapTools{right:10px;bottom:74px}#panoInfo{left:12px;top:12px;right:12px;padding:12px 15px;max-width:unset}h1{font-size:17px}#panoTools{bottom:16px;gap:3px;padding:5px}#panoTools button{font-size:11px;padding:10px}#gallery{left:10px;right:10px;width:auto;top:88px}}
/* Keep adjacent canopy pins independently selectable; gallery provides large tap targets. */
.pin{width:32px;height:32px;border-width:2px;font-size:11px}.pin::after{display:none;pointer-events:none}
.pin{width:32px;height:32px;border-width:2px;font-size:11px}.pin::after{display:none;pointer-events:none}

#splatCanvas{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}#pins{position:absolute;inset:0;pointer-events:none}body.hidePins #pins{visibility:hidden}.pin{pointer-events:auto;transform:translate(-50%,-50%)}.mapTools{bottom:76px}.mapTools button{height:36px}#mapHint{max-width:80%;white-space:normal;text-align:center}