@font-face{font-family:Montserrat;src:url('fonts/Montserrat.ttf') format('truetype');font-style:normal;font-weight:100 900;font-display:swap}
*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden;background:#15202c;font-family:Montserrat,Arial,sans-serif;color:#f7f5ee}#pano{position:absolute;inset:0}
header{position:absolute;inset:0 0 auto;display:flex;justify-content:space-between;align-items:flex-start;padding:22px 28px 75px;background:linear-gradient(#061322d9,transparent);pointer-events:none}header>div{pointer-events:auto}.brand{display:block;width:165px;height:auto}h1{font-size:16px;margin:14px 0 0;font-weight:500;letter-spacing:.2px}.tools{display:flex;gap:8px}button{font:inherit;color:inherit;border:1px solid #ffffff40;background:#10263ac7;border-radius:8px;cursor:pointer;padding:11px 15px}button:hover{background:#23486b}button:focus-visible{outline:3px solid #fff;outline-offset:3px}#fullscreen{font-size:24px;padding:5px 13px}
.bottom{position:absolute;bottom:0;width:100%;height:150px;padding:12px 24px;background:linear-gradient(#081b2dd9,#081b2df5);transform:translateY(100%);opacity:0;visibility:hidden;transition:transform .3s ease,opacity .3s ease,visibility .3s;pointer-events:none}.scenes-open .bottom{transform:translateY(0);opacity:1;visibility:visible;pointer-events:auto}.scene-toggle{position:absolute;left:24px;bottom:20px;padding:10px 15px;font-size:12px;z-index:2;transition:bottom .3s ease;background:#10263ade}.scene-toggle span{margin-left:9px}.scenes-open .scene-toggle{bottom:166px}
.navigation{display:flex;gap:12px;justify-content:center;align-items:center;margin-bottom:8px}.navigation div{min-width:145px;text-align:center}.navigation strong{display:block;font-size:14px;font-weight:600}.navigation span{display:block;font-size:11px;color:#cbd3dc;margin-top:5px}#prev,#next{font-size:25px;padding:3px 13px}#reset{font-size:11px}#scenes{display:flex;gap:8px;overflow:auto;justify-content:flex-start;padding:4px 3px 7px;max-width:1160px;margin:auto;scrollbar-width:thin}#scenes button{position:relative;flex:0 0 86px;height:56px;padding:0;overflow:hidden;border:2px solid #ffffff30;border-radius:5px}#scenes button[aria-current=true]{border-color:#f7f5ee}#scenes img{width:100%;height:100%;object-fit:cover}#scenes span{position:absolute;bottom:2px;left:4px;text-shadow:0 1px 3px #000;font-size:10px}p{text-align:center;font-size:10px;color:#d6dee7;margin:5px 0}#notice{position:absolute;top:45%;left:50%;transform:translate(-50%,-50%);background:#10263ae8;padding:16px 22px;border-radius:8px;font-size:14px;pointer-events:none}
.hotspot{display:grid;place-items:center;width:50px;height:50px;padding:0;background:transparent;border:0;border-radius:50%;filter:drop-shadow(0 2px 3px #000d);transition:transform .15s,background .15s}.hotspot img{width:44px;height:44px}.hotspot:hover{background:#0003;transform:scale(1.1)}.zoom{position:absolute;right:18px;top:42%;display:flex;flex-direction:column;align-items:center;gap:5px}.zoom button{width:44px;height:44px;padding:0;font-size:28px;background:#10263ad9}.zoom output{font-size:11px;background:#10263ad9;padding:5px;border-radius:4px;min-width:44px;text-align:center}
@media(max-width:600px){header{padding:16px 16px 65px}.brand{width:128px}h1{font-size:13px;margin-top:10px}.tools button{font-size:10px;padding:9px}#fullscreen{font-size:21px}.bottom{height:140px;padding:10px}.scene-toggle{left:14px;bottom:16px}.scenes-open .scene-toggle{bottom:154px}.bottom p{font-size:8px}.navigation{gap:8px}.navigation div{min-width:112px}#scenes button{flex-basis:70px;height:47px}.navigation #reset{padding:10px;font-size:9px}.zoom{right:12px;top:38%}}
@media(prefers-reduced-motion:reduce){.bottom,.scene-toggle,.hotspot{transition:none}}
/* The viewer owns hotspot transforms: never interpolate their frame-by-frame positions. */
.hotspot{margin-left:-25px;margin-top:-25px;filter:none;transition:background .15s}
.hotspot img{filter:drop-shadow(0 2px 3px #000d);pointer-events:none}
.hotspot:hover{transform:none}
/* Keep hidden scene controls from creating a scrollable area below the panorama. */
html{overflow:clip}body{position:fixed;inset:0;overflow:clip}
.bottom,.scenes-open .bottom{transform:none;transition:opacity .2s ease,visibility .2s}