:root { color-scheme: dark; --ink:#f3f0e8; --muted:#a4a7a5; --glass:rgba(13,15,17,.72); --line:rgba(255,255,255,.13); --accent:#d8ff69; }
* { box-sizing:border-box; }
html, body { width:100%; height:100%; margin:0; overflow:hidden; background:#090b0d; color:var(--ink); font-family:Inter,"PingFang SC","Microsoft YaHei",sans-serif; }
#viewer { position:fixed; inset:0; width:100%; height:100%; display:block; cursor:grab; }
#viewer:active { cursor:grabbing; }
body::after { content:""; position:fixed; inset:0; pointer-events:none; background:linear-gradient(180deg,rgba(0,0,0,.58),transparent 26%,transparent 66%,rgba(0,0,0,.5)); }
.topbar { position:fixed; z-index:3; left:0; top:0; width:100%; display:flex; align-items:flex-start; justify-content:space-between; padding:26px 30px; pointer-events:none; }
.eyebrow { margin:0 0 7px; color:var(--accent); font-size:11px; font-weight:750; letter-spacing:.22em; }
h1 { margin:0; font-size:clamp(24px,3vw,42px); font-weight:520; letter-spacing:-.04em; text-shadow:0 2px 24px #000; }
.vr-button { pointer-events:auto; border:1px solid rgba(255,255,255,.28); border-radius:999px; padding:12px 18px; display:flex; gap:10px; align-items:center; color:#10130c; background:var(--accent); font-size:15px; font-weight:750; box-shadow:0 10px 40px rgba(0,0,0,.28); cursor:pointer; }
.vr-button:disabled { cursor:not-allowed; color:#d2d4d2; background:rgba(38,42,43,.84); opacity:.8; }
.goggles { font-size:11px; letter-spacing:-.2em; padding-right:.2em; }
.panel { position:fixed; z-index:3; left:24px; bottom:24px; width:min(330px,calc(100vw - 48px)); max-height:min(52vh,480px); overflow:hidden; border:1px solid var(--line); border-radius:18px; background:var(--glass); backdrop-filter:blur(18px); box-shadow:0 22px 70px rgba(0,0,0,.35); }
.panel-head { display:flex; justify-content:space-between; padding:15px 17px 11px; color:var(--muted); border-bottom:1px solid var(--line); font-size:12px; letter-spacing:.14em; }
.panel-head small { font:inherit; }
.scene-list { max-height:calc(min(52vh,480px) - 44px); padding:8px; overflow:auto; scrollbar-width:thin; }
.scene { width:100%; border:0; border-radius:11px; padding:11px 12px; display:grid; grid-template-columns:28px 1fr; gap:4px 7px; align-items:center; color:var(--ink); background:transparent; text-align:left; cursor:pointer; }
.scene:hover { background:rgba(255,255,255,.08); }
.scene.active { color:#15180f; background:var(--accent); }
.scene .num { grid-row:1 / 3; color:var(--muted); font-size:11px; }
.scene.active .num { color:#606b39; }
.scene strong { font-size:14px; font-weight:600; }
.scene em { color:var(--muted); font-size:10px; font-style:normal; text-transform:uppercase; letter-spacing:.13em; }
.scene.active em { color:#606b39; }
.hint { position:fixed; z-index:3; left:50%; bottom:28px; transform:translateX(-50%); padding:9px 13px; border:1px solid var(--line); border-radius:999px; color:#d5d5d1; background:rgba(10,12,13,.58); backdrop-filter:blur(10px); font-size:12px; pointer-events:none; }
.loading { position:fixed; z-index:5; inset:0; display:flex; flex-direction:column; gap:15px; align-items:center; justify-content:center; background:#090b0d; transition:opacity .35s,visibility .35s; }
.loading.hidden { opacity:0; visibility:hidden; }
.loading span { width:32px; height:32px; border:2px solid #34383a; border-top-color:var(--accent); border-radius:50%; animation:spin .8s linear infinite; }
.loading b { font-size:13px; font-weight:500; color:var(--muted); }
.toast { position:fixed; z-index:8; top:92px; left:50%; transform:translate(-50%,-15px); max-width:min(560px,calc(100vw - 30px)); padding:12px 16px; border:1px solid var(--line); border-radius:12px; color:#fff; background:rgba(24,27,29,.94); opacity:0; visibility:hidden; transition:.2s; text-align:center; font-size:13px; }
.toast.show { opacity:1; visibility:visible; transform:translate(-50%,0); }
@keyframes spin { to { transform:rotate(360deg); } }
@media (max-width:640px) { .topbar { padding:18px; } .vr-button { padding:11px 14px; } .panel { left:12px; bottom:12px; width:min(270px,calc(100vw - 24px)); max-height:40vh; } .scene-list { max-height:calc(40vh - 44px); } .hint { display:none; } h1 { font-size:23px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important; } }