*{box-sizing:border-box}html,body,#viewer{margin:0;width:100%;height:100%;overflow:hidden;background:#000;font-family:Inter,system-ui;color:white}canvas{display:block}#top{position:fixed;z-index:5;left:20px;right:20px;top:18px;display:flex;justify-content:space-between;pointer-events:none;text-shadow:0 2px 12px #000}#top a{pointer-events:auto;color:#8df3ff;text-decoration:none;font:12px monospace;letter-spacing:.12em}#controls{position:fixed;z-index:5;bottom:22px;left:50%;transform:translateX(-50%);display:flex;gap:8px;padding:8px;background:#04121dcc;border:1px solid #3fdced55;border-radius:12px;backdrop-filter:blur(12px)}button{border:1px solid #2d7180;background:#071a25;color:#bdf9ff;border-radius:8px;padding:11px 14px;font:11px monospace}#reticle{display:none;position:fixed;z-index:7;left:50%;top:50%;transform:translate(-50%,-50%);color:#6ef4ff;font-size:26px;text-shadow:0 0 10px #00e5ff}.cardboard #top,.cardboard #controls{display:none}.cardboard #reticle{display:block}
:root{--gaze:0}#reticle{width:38px;height:38px;border:2px solid #72f4ff;border-radius:50%;font-size:0;background:conic-gradient(#58f1ff calc(var(--gaze)*360deg),transparent 0);box-shadow:0 0 16px #00eaff88}#reticle i{position:absolute;inset:7px;border-radius:50%;background:#06131a;border:1px solid #bdfaff}.gazing #reticle{transform:translate(-50%,-50%) scale(1.12)}
#viewer{opacity:1;transition:opacity .22s ease}.scene-leaving #viewer,.scene-loading #viewer{opacity:0}#loader{position:fixed;z-index:20;inset:0;background:#02070b;display:grid;place-content:center;justify-items:center;gap:12px;opacity:0;pointer-events:none;transition:opacity .2s}.scene-loading #loader,.scene-leaving #loader{opacity:1}.loader-ring{width:52px;height:52px;border:2px solid #123b47;border-top-color:#65efff;border-radius:50%;animation:spin .8s linear infinite}#loader b{letter-spacing:.3em}.loader-ring+ b{color:#eaffff}#loader span{font:9px monospace;color:#58818d;letter-spacing:.2em}@keyframes spin{to{transform:rotate(360deg)}}
#viewer-help{position:fixed;z-index:6;left:50%;top:18%;transform:translateX(-50%);display:grid;gap:5px;text-align:center;padding:12px 18px;background:#031019bb;border:1px solid #2a6070;backdrop-filter:blur(10px);transition:.5s;pointer-events:none}#viewer-help b{font:10px monospace;letter-spacing:.16em;color:#bafaff}#viewer-help span{font-size:11px;color:#7897a3}.viewer-ready #viewer-help,#viewer-help.hide{opacity:0;transform:translate(-50%,-8px)}.cardboard #viewer-help{display:none}canvas{touch-action:none;cursor:grab}canvas:active{cursor:grabbing}@media(max-width:600px){#top{left:12px;right:12px;top:12px}#top b{max-width:58vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:10px}#controls{bottom:12px;width:calc(100% - 20px);justify-content:center;gap:5px}#controls button{flex:1;padding:12px 5px;font-size:9px}#viewer-help{top:14%;width:calc(100% - 36px)}}
#hotspot-modal{position:fixed;z-index:12;left:50%;top:50%;transform:translate(-50%,-46%) scale(.96);width:min(620px,calc(100% - 32px));max-height:78vh;overflow:auto;padding:30px;background:#03131bed;border:1px solid #48dff1;box-shadow:0 25px 100px #000b;backdrop-filter:blur(18px);opacity:0;pointer-events:none;transition:.2s}#hotspot-modal.open{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1)}#hotspot-modal small{color:#55eaff;font:9px monospace;letter-spacing:.18em}#hotspot-modal h2{font-size:30px;margin:8px 35px 18px 0}#hotspot-modal-content{color:#9bb4be;line-height:1.7;white-space:pre-wrap}#hotspot-modal-content img{display:block;width:100%;max-height:55vh;object-fit:contain;background:#000}#hotspot-close{position:absolute;right:14px;top:14px;font-size:18px;padding:5px 10px}.cardboard #hotspot-modal{display:none}
/* Phone Cardboard is a pure WebGL stereo surface. Browser UI must not leak into the headset view. */
.cardboard #top,.cardboard #controls,.cardboard #viewer-help,.cardboard #hotspot-modal{display:none!important}.cardboard #viewer{position:fixed;inset:0;width:100vw;height:100dvh}.cardboard #reticle{display:block}.cardboard #reticle::after{content:'';position:fixed;left:50vw;top:0;width:1px;height:100vh;background:#ffffff12;transform:none}