:root{color-scheme:dark;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#fff;background:#172027;font-size:16px}
*{box-sizing:border-box}body{margin:0}button{font:inherit;cursor:pointer}button:focus-visible,canvas:focus-visible{outline:3px solid #ffdc88;outline-offset:4px}button:disabled{opacity:.3;cursor:default}[hidden]{display:none!important}
#tour{position:relative;width:100%;height:100vh;height:100dvh;overflow:hidden;background:#172027;isolation:isolate}
#panorama{display:block;width:100%;height:100%;touch-action:none;cursor:grab}#panorama.dragging{cursor:grabbing}
#hotspots{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.hotspot{position:absolute;left:0;top:0;width:48px;height:48px;padding:0;border:1px solid #ffffffb8;border-radius:50%;background:#14222b6b;color:#fff;box-shadow:0 3px 16px #0005;pointer-events:auto;display:grid;place-items:center;transition:background .15s,box-shadow .15s;touch-action:manipulation}
.hotspot:hover,.hotspot:focus-visible{background:#14222ba3;color:#fff;box-shadow:0 0 0 6px #ffffff30}
.hotspot .chevron{display:block;width:13px;height:13px;border-top:3px solid currentColor;border-right:3px solid currentColor;transform:translateY(3px) rotate(-45deg)}
.hotspot[data-kind="down"] .chevron{transform:translateY(-3px) rotate(135deg)}
.hotspot[data-kind="up"]:after{content:"";position:absolute;width:3px;height:15px;background:currentColor;bottom:9px;border-radius:2px}
.masthead{position:absolute;top:0;left:0;right:0;padding:max(22px,env(safe-area-inset-top)) 26px 48px;background:linear-gradient(#0008,transparent);pointer-events:none}
.brand{display:flex;flex-direction:column;gap:5px;text-shadow:0 1px 5px #0008}.brand strong{font-size:1.25rem;font-weight:550;letter-spacing:.015em}.brand span{font-size:.875rem;color:#fff;opacity:.92}
.controls{position:absolute;bottom:max(34px,calc(env(safe-area-inset-bottom) + 12px));left:50%;transform:translateX(-50%);display:flex;gap:3px;align-items:center;padding:7px 9px;border:1px solid #ffffff70;border-radius:40px;background:#18273099;box-shadow:0 8px 32px #0004,inset 0 1px 0 #ffffff4d;backdrop-filter:blur(22px) saturate(1.35);-webkit-backdrop-filter:blur(22px) saturate(1.35)}
.controls button{width:44px;height:44px;border:0;border-radius:50%;background:transparent;color:#fff;font-size:1.55rem;line-height:1;display:grid;place-items:center}.controls button:hover:not(:disabled){background:#ffffff20}.controls #help-toggle{font-size:1.15rem}.divider{width:1px;height:21px;background:#ffffff35;margin:0 3px}
.hint{position:absolute;top:102px;bottom:auto;left:50%;transform:translateX(-50%);width:max-content;max-width:calc(100% - 32px);text-align:center;font-size:.875rem;line-height:1.55;background:#14222bd9;padding:10px 17px;border-radius:12px;pointer-events:none}
#notice{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;flex-direction:column;gap:15px;background:#14222bed;box-shadow:0 8px 40px #0003;border-radius:18px;padding:25px;max-width:calc(100% - 30px);width:max-content;text-align:center;line-height:1.5}
#notice button{padding:10px 20px;border:1px solid #ffffff90;background:#fff;color:#172027;border-radius:25px}.spinner{width:25px;height:25px;border:2px solid #ffffff40;border-top-color:#fff;border-radius:50%;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.spinner{animation:none}.hotspot{transition:none}}
@media(max-width:540px){.masthead{padding-left:18px;padding-right:18px}.brand strong{font-size:1.1rem}.controls{bottom:max(24px,calc(env(safe-area-inset-bottom) + 8px))}.hint{top:96px;bottom:auto}.hotspot{width:46px;height:46px}}
noscript{position:absolute;top:45%;left:10%;right:10%;text-align:center}

.transition-view{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:1;transform:scale(1);transition:opacity .55s ease,transform .55s ease;will-change:transform,opacity}
.transition-view.leaving{opacity:0;transform:scale(1.055)}
#panorama.arriving{animation:arrive .55s ease both}
@keyframes arrive{from{transform:scale(1.035)}to{transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.transition-view{transition:none}#panorama.arriving{animation:none}}

#revision{display:block;font-size:11px;font-weight:400;opacity:.8;margin-top:6px;}

.hotspot .passage-dot{display:block;width:7px;height:7px;border-radius:50%;background:currentColor;}
.hotspot[data-kind="down"]:after{content:"";position:absolute;width:3px;height:15px;background:currentColor;top:9px;border-radius:2px;}

.hotspot[data-kind="right"] .chevron{transform:translateX(-3px) rotate(45deg);}
.hotspot[data-kind="right"]:after{content:"";position:absolute;width:15px;height:3px;background:currentColor;left:9px;border-radius:2px;}