:root{--accent:#cd5f5c;--gold:#eea81c;--sans:"Manrope",system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:#05070a;font-family:var(--sans);color:#fff;overflow:hidden}
#pano{position:fixed;inset:0;background:#05070a;background-repeat:repeat-x;background-position:center;
  touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none}
/* top bar */
.vr-top{position:fixed;top:0;left:0;right:0;z-index:10;display:flex;align-items:center;gap:14px;padding:16px 20px;
  background:linear-gradient(180deg,rgba(0,0,0,.6),transparent);pointer-events:none}
.vr-top *{pointer-events:auto}
.vr-back{display:flex;align-items:center;gap:9px;background:rgba(0,0,0,.4);backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.18);border-radius:11px;height:44px;padding:0 16px;color:#fff;font-weight:700;font-size:14px;text-decoration:none}
.vr-back:hover{background:rgba(0,0,0,.6);border-color:var(--accent)}
.vr-titles{line-height:1.2}
.vr-titles h1{margin:0;font-size:17px;font-weight:800}
.vr-titles p{margin:2px 0 0;font-size:12.5px;color:#c7ccd4}
.vr-tools{margin-left:auto;display:flex;gap:8px}
.tbtn{width:44px;height:44px;border-radius:11px;background:rgba(0,0,0,.4);backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.18);color:#fff;display:grid;place-items:center;cursor:pointer}
.tbtn:hover{border-color:var(--accent)}
.tbtn.on{background:var(--accent);border-color:var(--accent)}
/* scene label */
.scene-label{position:fixed;left:50%;transform:translateX(-50%);top:78px;z-index:9;text-align:center;
  background:rgba(0,0,0,.4);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.15);border-radius:999px;padding:8px 18px}
.scene-label #sceneTitle{font-weight:700;font-size:14px}
.scene-label #counter{font-size:12px;color:var(--gold);margin-left:8px}
/* nav arrows */
.arrow{position:fixed;top:50%;transform:translateY(-50%);z-index:9;width:52px;height:52px;border-radius:50%;
  background:rgba(0,0,0,.42);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.2);color:#fff;display:grid;place-items:center;cursor:pointer}
.arrow:hover{background:var(--accent);border-color:var(--accent)}
.arrow.prev{left:18px}.arrow.next{right:18px}
/* thumbnails strip */
.strip{position:fixed;left:0;right:0;bottom:0;z-index:9;display:flex;gap:10px;padding:14px 18px 18px;overflow-x:auto;
  background:linear-gradient(0deg,rgba(0,0,0,.72),transparent)}
.thumb{position:relative;flex:none;width:112px;height:64px;border-radius:10px;overflow:hidden;border:2px solid transparent;
  background:#111;cursor:pointer;padding:0}
.thumb img{width:100%;height:100%;object-fit:cover;opacity:.72;transition:.15s}
.thumb:hover img{opacity:1}
.thumb.active{border-color:var(--gold);box-shadow:0 0 0 2px rgba(201,154,46,.4)}
.thumb.active img{opacity:1}
.thumb span{position:absolute;left:6px;bottom:5px;font-size:11px;font-weight:800;background:rgba(0,0,0,.6);padding:1px 7px;border-radius:6px}
/* loader */
#loader{position:fixed;inset:0;z-index:8;display:flex;flex-direction:column;gap:14px;align-items:center;justify-content:center;background:#05070a}
.spin{width:44px;height:44px;border:4px solid rgba(255,255,255,.15);border-top-color:var(--accent);border-radius:50%;animation:sp 1s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
#loader p{color:#9aa3ad;font-size:13px;margin:0}
.hint{position:fixed;left:50%;transform:translateX(-50%);bottom:96px;z-index:9;font-size:12px;color:#aab2bc;
  background:rgba(0,0,0,.35);padding:5px 12px;border-radius:999px}
@media(max-width:640px){
  .vr-titles h1{font-size:15px}.vr-titles p{display:none}
  .thumb{width:92px;height:54px}.arrow{width:44px;height:44px}
  .hint{display:none}
}