:root{font-family:"Helvetica Neue",Arial,sans-serif;color:#fff;background:#1c1f21;font-synthesis:none;-webkit-tap-highlight-color:transparent}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#1c1f21}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible,#panorama:focus-visible{outline:2px solid #fff;outline-offset:3px}
[hidden]{display:none!important}
svg{width:18px;height:18px;display:block}
#tour{position:relative;width:100%;height:100%;height:100dvh;min-height:280px;overflow:hidden;background:#1c1f21}
#panorama{position:absolute;inset:0;cursor:grab;touch-action:none;outline:none}
#panorama.dragging{cursor:grabbing}
#panorama canvas{display:block;width:100%;height:100%}
.shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.28),transparent 110px,transparent calc(100% - 200px),rgba(0,0,0,.45))}

/* loading */
#loading{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;gap:12px;background:#1c1f21;font-size:13px;letter-spacing:.02em;transition:background .3s}
#loading.soft{background:rgba(20,23,25,.35);backdrop-filter:blur(3px)}
.spinner{width:22px;height:22px;border-radius:50%;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
#error{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:6;padding:24px;width:min(420px,85%);background:rgba(28,31,33,.94);text-align:center;border-radius:10px}
#error h2{font-size:17px;margin:0 0 8px}#error p{font-size:14px;margin:0 0 16px;color:#d6dadc}
#error button{padding:9px 18px;border:1px solid rgba(255,255,255,.5);border-radius:6px;background:none}
#notice{position:absolute;z-index:7;left:50%;top:70px;transform:translateX(-50%);max-width:calc(100% - 40px);width:max-content;padding:11px 16px;border-radius:8px;background:rgba(20,23,25,.88);font-size:12px;text-align:center}

/* drag hint */
.look-hint{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:10px;font-size:13px;padding:14px 18px;border-radius:12px;background:rgba(0,0,0,.38);backdrop-filter:blur(4px);pointer-events:none;transition:opacity .5s;animation:hint-in .6s 3.6s both}
.hand{width:34px;height:34px;border-radius:50%;border:2px solid #fff;position:relative;animation:swipe 1.8s ease-in-out infinite}
.hand::before,.hand::after{content:"";position:absolute;top:50%;width:9px;height:9px;border-top:2px solid #fff;border-left:2px solid #fff}
.hand::before{left:-16px;transform:translateY(-50%) rotate(-45deg)}.hand::after{right:-16px;transform:translateY(-50%) rotate(135deg)}

.look-hint.gone{animation:none;opacity:0}
@keyframes swipe{0%,100%{transform:translateX(-10px)}50%{transform:translateX(10px)}}
@keyframes hint-in{from{opacity:0}to{opacity:1}}

/* right-hand controls */
.view-controls{position:absolute;right:16px;top:16px;display:flex;flex-direction:column;gap:10px;z-index:3}
.view-controls button,.step-controls button{width:38px;height:38px;border:0;border-radius:50%;background:rgba(0,0,0,.38);backdrop-filter:blur(6px);display:grid;place-items:center;transition:background .2s,transform .2s}
.view-controls button:hover,.step-controls button:hover{background:rgba(0,0,0,.6)}
.view-controls button:active,.step-controls button:active{transform:scale(.94)}
#rotate[aria-pressed=true] svg{animation:spin 6s linear infinite}

/* hotspots */
.hotspots{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:2}
.hotspot{position:absolute;left:0;top:0;pointer-events:auto;display:flex;flex-direction:column;align-items:center;gap:7px;padding:0;border:0;background:none;transition:opacity .35s}
.hotspot.is-hidden{opacity:0;pointer-events:none}
.hotspot-ring{width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.18);border:2px solid rgba(255,255,255,.95);display:grid;place-items:center;backdrop-filter:blur(3px);animation:pulse 2.2s ease-out infinite;transition:transform .2s,background .2s}
.hotspot-arrow{width:16px;height:16px;border-top:3px solid #fff;border-left:3px solid #fff;transform:translateY(4px) rotate(45deg)}
.hotspot-label{font-size:12px;font-weight:600;background:rgba(0,0,0,.55);padding:5px 11px;border-radius:14px;white-space:nowrap;letter-spacing:.01em}
.hotspot:hover .hotspot-ring,.hotspot:focus-visible .hotspot-ring{transform:scale(1.1);background:rgba(255,255,255,.3)}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,255,255,.55)}100%{box-shadow:0 0 0 18px rgba(255,255,255,0)}}

/* bottom area strip */
.area-nav{position:absolute;left:0;right:0;bottom:66px;padding:10px 16px;z-index:3;transition:transform .35s ease,opacity .35s}
.area-nav.collapsed{transform:translateY(24px);opacity:0;pointer-events:none}
.scene-list{display:flex;justify-content:safe center;gap:10px;overflow-x:auto;scrollbar-width:none;scroll-behavior:smooth;padding:4px 2px}
.scene-list::-webkit-scrollbar{display:none}
.scene-card{flex:0 0 96px;width:96px;height:68px;position:relative;padding:0;border:2px solid rgba(255,255,255,.55);border-radius:8px;background:#333;overflow:hidden;transition:border-color .2s,transform .2s;box-shadow:0 4px 14px rgba(0,0,0,.35)}
.scene-card:hover{transform:translateY(-2px);border-color:#fff}
.scene-card[aria-current=true]{border-color:#fff;box-shadow:0 0 0 2px rgba(255,255,255,.35),0 4px 14px rgba(0,0,0,.35)}
.scene-card img{display:block;width:100%;height:100%;object-fit:cover}
.scene-card span{position:absolute;left:0;right:0;bottom:0;font-size:10px;line-height:1.2;padding:12px 4px 4px;background:linear-gradient(transparent,rgba(0,0,0,.75));text-align:center}

/* footer */
footer{position:absolute;left:0;right:0;bottom:0;height:66px;display:flex;align-items:center;padding:8px 16px calc(8px + env(safe-area-inset-bottom,0px));gap:14px;z-index:3}
#toggle-scenes{display:flex;flex-direction:column;align-items:center;gap:4px;border:0;background:none;padding:0}
#toggle-scenes .round{width:38px;height:38px;border-radius:50%;background:rgba(0,0,0,.38);backdrop-filter:blur(6px);display:grid;place-items:center}
#toggle-scenes .caption{font-size:10px;letter-spacing:.04em;opacity:.9}
.scene-heading{display:flex;align-items:baseline;gap:10px;min-width:0;text-shadow:0 1px 4px rgba(0,0,0,.6)}
h1{font-size:15px;font-weight:600;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#scene-counter{font-size:11px;opacity:.8;white-space:nowrap}
.step-controls{margin-left:auto;display:flex;gap:10px}

@media(max-width:600px){
  .view-controls{right:10px;top:10px;gap:8px}
  .view-controls button,.step-controls button,#toggle-scenes .round{width:34px;height:34px}
  .area-nav{bottom:60px;padding:8px 10px}
  .scene-list{justify-content:flex-start;gap:8px}
  .scene-card{flex-basis:84px;width:84px;height:60px}
  footer{height:60px;padding:6px 10px calc(6px + env(safe-area-inset-bottom,0px));gap:10px}
  .scene-heading{flex-direction:column;gap:2px;align-items:flex-start}
  h1{font-size:13px}
}
@media(max-height:450px){
  .area-nav{bottom:52px;padding:6px 10px}.scene-card{height:52px;flex-basis:76px;width:76px}
  footer{height:52px}.view-controls{gap:6px}.view-controls button{width:30px;height:30px}
}
@media(prefers-reduced-motion:reduce){.look-hint,.hand,.hotspot-ring,.spinner,#rotate[aria-pressed=true] svg{animation:none}.area-nav,.hotspot{transition:none}}