:root { --bg:#0b0b0b; --ink:#f5f3ee; --muted:#a9a399; --gold:#c9a54c; --glass:rgba(11,11,11,.62); --line:rgba(201,165,76,.35); }
* { box-sizing:border-box; }
html, body { margin:0; height:100%; background:var(--bg); color:var(--ink); font:14px/1.4 "Segoe UI", system-ui, -apple-system, Roboto, sans-serif; overflow:hidden; }
#viewer { position:fixed !important; inset:0; width:100vw; height:100vh; height:100dvh; background:var(--bg); }
.psv-navbar, .psv-loader-container { display:none !important; }
.psv-container, .psv-canvas { background:var(--bg) !important; }
svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }

.bar { position:fixed; left:0; right:0; display:flex; align-items:center; gap:10px; padding:10px 14px; z-index:10; pointer-events:none; }
.bar > * { pointer-events:auto; }
.top { top:0; padding-top:max(10px, env(safe-area-inset-top)); background:linear-gradient(#000a, #0000); }
.bottom { bottom:0; padding-bottom:max(10px, env(safe-area-inset-bottom)); background:linear-gradient(#0000, #000c); }
.brand { font-family:Georgia, "Times New Roman", serif; font-size:18px; color:var(--ink); text-decoration:none; white-space:nowrap; }
.brand span { color:var(--gold); }
.title { flex:1; min-width:0; text-align:center; }
.title span { display:block; font-family:Georgia, serif; font-size:16px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.title small { color:var(--gold); font-size:11px; letter-spacing:2px; text-transform:uppercase; }
.icon { width:40px; height:40px; border-radius:50%; border:1px solid var(--line); background:var(--glass); color:var(--ink); display:grid; place-items:center; cursor:pointer; flex:none; transition:border-color .2s, transform .15s; }
.icon:hover { border-color:var(--gold); }
.icon:active { transform:scale(.94); }

.strip { flex:1; display:flex; gap:8px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; padding:2px; }
.strip::-webkit-scrollbar { display:none; }
.thumb { flex:none; width:96px; scroll-snap-align:center; border:1px solid transparent; border-radius:8px; overflow:hidden; background:var(--glass); cursor:pointer; padding:0; color:var(--ink); text-align:left; transition:border-color .2s, opacity .2s; opacity:.75; }
.thumb img { display:block; width:100%; height:54px; object-fit:cover; }
.thumb span { display:block; font-size:10.5px; padding:4px 6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.thumb[aria-current="true"] { border-color:var(--gold); opacity:1; }
.thumb:hover { opacity:1; }

.actions { position:fixed; right:14px; top:50%; transform:translateY(-50%); display:flex; flex-direction:column; gap:10px; z-index:10; }
.act { display:flex; align-items:center; gap:8px; height:42px; padding:0 14px 0 12px; border-radius:21px; background:var(--glass); border:1px solid var(--line); color:var(--ink); text-decoration:none; font-size:13px; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); transition:border-color .2s; }
.act:hover { border-color:var(--gold); }
.act.gold { background:var(--gold); color:#0b0b0b; border-color:var(--gold); font-weight:600; }
.act[hidden] { display:none; }

.hint { position:fixed; left:50%; top:50%; transform:translate(-50%,-50%); padding:8px 16px; border-radius:20px; background:var(--glass); font-size:13px; z-index:9; pointer-events:none; transition:opacity .6s; }
.hint.gone { opacity:0; }

@media (max-width: 640px) {
  .brand { font-size:15px; }
  .title span { font-size:14px; }
  .actions { top:auto; bottom:96px; transform:none; flex-direction:row; right:50%; translate:50% 0; }
  .act span { display:none; }
  .act { width:42px; padding:0; justify-content:center; }
  .act.gold { width:auto; padding:0 14px; }
  .act.gold span { display:inline; }
  .thumb { width:84px; }
  .thumb img { height:46px; }
}
@media (prefers-reduced-motion: reduce) { * { transition:none !important; } }

/* hotspots */
#hs{position:fixed;inset:0;pointer-events:none;z-index:6;transition:opacity .4s}
.hs{position:absolute;left:0;top:0;pointer-events:auto;border:0;background:none;padding:0;cursor:pointer;display:grid;place-items:center;will-change:transform}
.hs i{width:46px;height:46px;border-radius:50%;border:2px solid #F6C880;background:rgba(15,15,15,.45);backdrop-filter:blur(4px);position:relative;box-shadow:0 0 0 0 rgba(246,200,128,.55);animation:hsp 2.2s infinite}
.hs i::after{content:"";position:absolute;left:50%;top:50%;width:11px;height:11px;border-top:3px solid #F6C880;border-right:3px solid #F6C880;transform:translate(-65%,-50%) rotate(45deg)}
.hs span{position:absolute;top:54px;white-space:nowrap;font:600 13px/1 system-ui,sans-serif;letter-spacing:.05em;color:#fff;background:rgba(15,15,15,.78);border:1px solid rgba(246,200,128,.5);padding:7px 12px;border-radius:999px;box-shadow:0 4px 14px rgba(0,0,0,.35)}
.hs:hover i{background:rgba(246,200,128,.25)}
@keyframes hsp{70%{box-shadow:0 0 0 16px rgba(246,200,128,0)}100%{box-shadow:0 0 0 0 rgba(246,200,128,0)}}