:root{color-scheme:dark;--bg:#07090d;--text:#e9edf5;--muted:#8792a8;--accent:#ab94ff;font-family:Arial,Helvetica,sans-serif;font-synthesis:none}
*{box-sizing:border-box}
body{margin:0;min-height:100dvh;background:var(--bg);color:var(--text);display:flex;flex-direction:column}
a{color:inherit;text-decoration:none}button{font:inherit}a,button{-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
.topbar{height:76px;flex:none;display:flex;align-items:center;gap:35px;padding:0 32px;border-bottom:1px solid #ffffff0c}
.brand{font-size:25px;letter-spacing:-1.1px;font-weight:700;white-space:nowrap}.brand span{font-weight:400}
.floor-nav{display:flex;flex-wrap:wrap;gap:18px;align-items:center}.floor-nav a{font-size:13px;color:var(--muted);padding:10px 0;border-bottom:1px solid transparent;white-space:nowrap}.floor-nav a:hover,.floor-nav a[aria-current="page"]{color:var(--text);border-bottom-color:var(--accent)}
h1{font-size:15px;font-weight:400;color:#cbd2df;letter-spacing:.15px;margin:0;outline:none}
.back{margin-left:auto;font-size:14px;display:flex;align-items:center;gap:10px;padding:12px 0 12px 16px}.back:hover{color:var(--accent)}.back span{font-size:21px}
main{flex:1;min-height:0;display:grid;place-items:center;position:relative;padding:18px 24px}
.scene{position:relative;width:min(100%,calc((100dvh - 190px)*var(--aspect)));aspect-ratio:var(--aspect);overflow:hidden;background:#07090d;transition:opacity 160ms ease;isolation:isolate}
.scene>img{display:block;width:100%;height:100%;object-fit:contain;user-select:none;transition:transform 210ms ease,opacity 160ms ease;transform-origin:var(--entry-x,50%) 55%}
.scene.departing>img{transform:scale(1.045);opacity:0}.scene.departing .hotspots{opacity:0;pointer-events:none}.scene.arriving{animation:arrive 260ms ease both}
.scene.camera-cut>img{transition:opacity 140ms ease;transform:none}.scene.camera-cut.arriving{animation-duration:160ms}
@keyframes arrive{from{opacity:0}to{opacity:1}}
.hotspots{position:absolute;inset:0;transition:opacity 100ms}
.hotspot{position:absolute;top:var(--top,0%);height:var(--height,100%);left:var(--left);width:var(--width);cursor:pointer;outline-offset:-5px}
.hotspot:after{content:"";position:absolute;inset:1.5% 3% 6%;border:1px solid transparent;transition:border-color 140ms,background 140ms;pointer-events:none}
.hotspot:hover:after,.hotspot:focus-visible:after{border-color:#ab94ff99;background:#ab94ff08}
.hotspot.selected:after{border-color:#ab94ff;background:#ab94ff18}
.hotspot>span{position:absolute;bottom:8%;left:50%;transform:translate(-50%,8px);opacity:0;display:flex;align-items:center;gap:10px;white-space:nowrap;background:#080a13eb;box-shadow:0 8px 25px #0005;border:1px solid #ab94ff55;padding:12px 15px;font-size:14px;transition:transform 140ms,opacity 140ms;z-index:1}
.hotspot:hover>span,.hotspot:focus-visible>span{transform:translate(-50%,0);opacity:1}.hotspot small{font-size:12px;color:var(--accent)}.hotspot b{font-weight:400;color:var(--accent);font-size:17px}
footer{flex:none;min-height:70px;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:12px 32px;border-top:1px solid #ffffff0c}
.room-nav{display:flex;align-items:center;gap:25px}.room-nav a{font-size:14px;color:#a2aec1;padding:9px 0;border-bottom:1px solid transparent;white-space:nowrap}.room-nav a>span{color:#59677e;font-size:12px;margin-right:8px}.room-nav a:hover,.room-nav a[aria-current="page"]{color:#eee9ff;border-bottom-color:var(--accent)}.room-nav a[aria-current="page"]>span{color:var(--accent)}
#hint{margin:0;color:var(--muted);font-size:13px;text-align:right}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:5px}
.load-error{position:absolute;bottom:24px;padding:16px;background:#151b28;border:1px solid #525b6d;font-size:14px}.load-error button{color:white;background:transparent;border:0;text-decoration:underline;cursor:pointer;margin-left:8px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
body.busy{cursor:progress}
@media(max-width:700px){.topbar{min-height:96px;height:auto;gap:8px 18px;padding:10px 16px;flex-wrap:wrap}.brand{font-size:23px}.floor-nav{margin-left:auto;gap:12px}.floor-nav a{font-size:12px}.topbar h1{flex-basis:60%;font-size:14px}.back{font-size:14px;padding:4px 0;gap:6px}main{padding:12px 0}.scene{width:min(100%,calc((100dvh - 210px)*var(--aspect)))}footer{padding:10px 12px;min-height:82px;flex-direction:column;gap:4px;justify-content:center}.room-nav{width:100%;justify-content:space-between;gap:8px;flex-wrap:wrap}.room-nav a{font-size:12px;white-space:normal}.room-nav a>span{display:none}#hint{font-size:12px}.hotspot>span{display:none}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
