* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; background: #000; }
body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 16px; color: #fff;
  -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
a, a:hover, a:active, a:visited { text-decoration: none; color: inherit; }
#pano { position: absolute; inset: 0; }
.btn { position: absolute; top: 0; width: 44px; height: 44px; display: grid; place-items: center;
  background: rgba(20, 24, 32, 0.75); cursor: pointer; z-index: 5; }
.no-touch .btn:hover { background: rgba(40, 48, 64, 0.95); }
.btn img { width: 22px; height: 22px; }
.btn .on { display: none; } .btn.enabled .on { display: block; } .btn.enabled .off { display: none; }
#titleBar { position: absolute; top: 0; left: 0; right: 0; height: 44px; padding: 0 100px; text-align: center;
  background: rgba(20, 24, 32, 0.55); pointer-events: none; z-index: 4; }
.multiple-scenes #titleBar { padding-left: 54px; }
#titleBar .sceneName { margin: 0; line-height: 44px; font-size: 16px; font-weight: 600; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
#sceneListToggle { left: 0; }
.single-scene #sceneListToggle, .single-scene #sceneList { display: none; }
#autorotateToggle { right: 0; }
#fullscreenToggle { right: 45px; }
.fullscreen-disabled #fullscreenToggle { display: none; }
#sceneList { position: absolute; top: 45px; left: 0; bottom: 0; width: 240px; max-width: 100%; overflow-y: auto;
  background: rgba(20, 24, 32, 0.8); transform: translateX(-100%); transition: transform .3s ease; z-index: 3; }
#sceneList.enabled { transform: translateX(0); }
.mobile #sceneList { width: 100%; }
#sceneList .scenes { list-style: none; margin: 0; padding: 0; }
#sceneList .scene { display: block; padding: 12px 16px; font-size: 15px; line-height: 1.3; border-left: 3px solid transparent; }
.no-touch #sceneList .scene:hover { background: rgba(255, 255, 255, 0.08); }
#sceneList .scene.current { background: rgba(255, 255, 255, 0.14); border-left-color: #5aa9ff; }
.viewControlButton { display: none; position: absolute; bottom: 12px; width: 44px; height: 44px; border-radius: 22px;
  background: rgba(20, 24, 32, 0.75); cursor: pointer; place-items: center; z-index: 5; }
.view-control-buttons .viewControlButton { display: grid; }
.mobile .viewControlButton { display: none !important; }
.viewControlButton img { width: 22px; height: 22px; }
.no-touch .viewControlButton:hover { background: rgba(40, 48, 64, 0.95); }
#viewLeft { left: calc(50% - 160px); } #viewUp { left: calc(50% - 108px); } #viewDown { left: calc(50% - 56px); }
#viewRight { left: calc(50% + 12px); } #viewIn { left: calc(50% + 64px); } #viewOut { left: calc(50% + 116px); }
.hotspot { cursor: pointer; }
.street-arrow { width: 150px; height: 150px; opacity: 0.85; transition: opacity .15s; }
.street-arrow svg { display: block; width: 100%; height: 100%; transition: transform .15s; }
.no-touch .street-arrow:hover { opacity: 1; }
.no-touch .street-arrow:hover svg { transform: scale(1.12); }
#tourMap { display: none; position: absolute; right: 12px; bottom: 12px; width: 190px; height: 190px; z-index: 5;
  background: rgba(20, 24, 32, 0.7); border-radius: 12px; cursor: pointer; }
.has-map #tourMap { display: block; }
.mobile #tourMap { width: 120px; height: 120px; }
.link-hotspot { width: 64px; height: 64px; margin-left: -32px; margin-top: -32px; opacity: 0.92; transition: opacity .2s; }
.no-touch .link-hotspot:hover { opacity: 1; }
.link-hotspot-icon { width: 100%; height: 100%; filter: drop-shadow(0 2px 6px rgba(0,0,0,.45)); }
.hs-label { position: absolute; left: 50%; top: calc(100% + 6px); transform: translateX(-50%); white-space: nowrap;
  font: 600 13px/1.25 system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: #fff;
  padding: 4px 9px; pointer-events: none; }
.hs-label-arrow, .hs-label-plain { background: rgba(18, 22, 30, 0.85); border-radius: 6px; }
.hs-label-arrow::before { content: "\2192\00a0"; }
.hs-label-frame { border: 2px solid rgba(255, 255, 255, 0.95); border-radius: 6px; background: rgba(18, 22, 30, 0.35);
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6)); }
.hs-label-underline, .hs-label-overline { padding: 3px 2px; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.9)); }
.hs-label-underline { border-bottom: 2px solid #fff; }
.hs-label-overline { border-top: 2px solid #fff; }
.info-hotspot { margin-left: -20px; margin-top: -20px; }
.info-hotspot.visible { z-index: 2; }
.info-hotspot-header { display: flex; align-items: center; height: 40px; max-width: 40px; overflow: hidden;
  border-radius: 20px; background: rgba(20, 24, 32, 0.85); box-shadow: 0 2px 8px rgba(0,0,0,.35);
  transition: max-width .35s ease; white-space: nowrap; }
.no-touch .info-hotspot:hover .info-hotspot-header, .info-hotspot.visible .info-hotspot-header { max-width: 340px; }
.info-hotspot-icon-wrapper, .info-hotspot-close-wrapper { flex: none; width: 40px; height: 40px; display: grid; place-items: center; }
.info-hotspot-icon, .info-hotspot-close-icon { width: 22px; height: 22px; }
.info-hotspot-close-wrapper { display: none; }
.info-hotspot.visible .info-hotspot-close-wrapper { display: grid; }
.info-hotspot-title { padding: 0 12px 0 0; font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.info-hotspot-text { display: none; position: absolute; top: 46px; left: 0; width: 300px; max-height: 260px; overflow-y: auto;
  padding: 12px 14px; border-radius: 10px; background: rgba(255, 255, 255, 0.96); color: #1b1f27; font-size: 14px;
  line-height: 1.5; user-select: text; -webkit-user-select: text; cursor: auto; box-shadow: 0 6px 20px rgba(0,0,0,.35); }
.desktop .info-hotspot.visible .info-hotspot-text { display: block; }
.info-hotspot-modal { display: none; }
.mobile .info-hotspot-modal.visible { display: block; position: fixed; inset: 0; z-index: 20; background: rgba(0,0,0,.6); padding: 12px; }
.info-hotspot-modal .info-hotspot-header { max-width: none; border-radius: 10px 10px 0 0; }
.info-hotspot-modal .info-hotspot-title { flex: 1; }
.info-hotspot-modal .info-hotspot-close-wrapper { display: grid; cursor: pointer; }
.info-hotspot-modal .info-hotspot-text { display: block; position: static; width: auto; max-height: calc(100% - 52px);
  border-radius: 0 0 10px 10px; }