*{box-sizing:border-box}
html{background:#04140f;color-scheme:dark}
body.main-hall{margin:0;min-height:100svh;display:grid;place-items:center;overflow:hidden;background:#04140f;color:#f5e7c8;font-family:"Songti SC","STSong",serif}
.main-hall .skip-link{position:fixed;z-index:20;top:8px;left:8px;padding:10px 14px;background:#fff;color:#10251c;transform:translateY(-160%)}
.main-hall .skip-link:focus{transform:translateY(0)}
.main-hall-stage{position:relative;width:min(100vw,calc(100svh * 1487 / 1058));aspect-ratio:1487/1058;margin:auto}
.main-hall-stage>img{display:block;width:100%;height:100%;object-fit:contain}
.main-hall-stage>.japan-click-motion,.main-hall-stage>.cinema-hover-motion,.main-hall-stage>.europe-hover-motion,.main-hall-stage>.china-hover-motion,.main-hall-stage>.genres-hover-motion,.main-hall-stage>.concepts-hover-motion,.main-hall-stage>.lookup-hover-motion{position:absolute;z-index:1;object-fit:fill;opacity:0;visibility:hidden;pointer-events:none}
.main-hall-stage>.japan-click-motion{left:18.628%;top:23.724%;width:8.810%;height:25.142%}
.main-hall-stage>.cinema-hover-motion{left:80.363%;top:46.125%;width:17.821%;height:14.461%}
.main-hall-stage>.europe-hover-motion{left:43.309%;top:25.142%;width:13.181%;height:25.614%}
.main-hall-stage>.china-hover-motion{left:70.814%;top:23.535%;width:13.315%;height:25.709%}
.main-hall-stage>.genres-hover-motion{left:23.874%;top:51.796%;width:52.118%;height:12.193%}
.main-hall-stage>.concepts-hover-motion{left:4.371%;top:71.834%;width:10.558%;height:9.263%}
.main-hall-stage>.lookup-hover-motion{left:81.036%;top:69.660%;width:9.415%;height:12.760%}
.main-hall-stage>.japan-click-motion.is-playing,.main-hall-stage>.cinema-hover-motion.is-playing,.main-hall-stage>.europe-hover-motion.is-playing,.main-hall-stage>.china-hover-motion.is-playing,.main-hall-stage>.genres-hover-motion.is-playing,.main-hall-stage>.concepts-hover-motion.is-playing,.main-hall-stage>.lookup-hover-motion.is-playing{opacity:1;visibility:visible}
.main-hall-hotspot{position:absolute;z-index:2;border:0;text-decoration:none;outline:0;overflow:hidden;isolation:isolate}
.main-hall-hotspot.europe{left:39%;top:13%;width:22%;height:37%}
.main-hall-hotspot.japan{left:13%;top:13%;width:22%;height:37%}
.main-hall-hotspot.china{left:66%;top:13%;width:22%;height:37%}
.main-hall-hotspot.concepts{left:0;top:67%;width:28%;height:33%}
.main-hall-hotspot.genres{left:27%;top:49%;width:47%;height:23%}
.main-hall-hotspot.films{left:78%;top:45%;width:22%;height:25%}
.main-hall-hotspot.lookup{left:72%;top:70%;width:28%;height:30%}
.scene-window{display:none;position:absolute;inset:0;pointer-events:none;overflow:hidden;opacity:0;visibility:hidden;transition:opacity .22s ease,visibility 0s linear .22s;will-change:opacity,clip-path,mask-position}
.entrance-motion{position:absolute;inset:0;pointer-events:none;opacity:0;visibility:hidden;background-position:0 0;background-size:100% 4000%;background-repeat:no-repeat;transition:opacity .2s ease,visibility 0s linear .2s}
.river-motion{background-image:none}
.train-motion{background-image:url(/mystery-media/0f826c6b10e00f678ef5412bf3c4de3ff3ec0f82ef95e42abc76a01407d9a459.webp?v=transparent-objects-v3-20260913)}
.archive-motion{background-image:none}
.map-motion{background-image:url(/mystery-media/023ac35adf9f80e1c9a24805485babc1f147747bd51c7894dfedb8615e8940b2.webp?v=transparent-objects-v3-20260913)}
.cinema-motion{background-image:none}
.index-motion{background-image:none}
.main-hall-hotspot:hover .entrance-motion,.main-hall-hotspot:focus-visible .entrance-motion,.main-hall-hotspot.is-activating .entrance-motion{opacity:1;visibility:visible;transition-delay:.12s}
.main-hall-hotspot:hover .river-motion,.main-hall-hotspot:focus-visible .river-motion{animation:environmental-sprite 6.2s steps(39,end) infinite}
.main-hall-hotspot:hover .train-motion,.main-hall-hotspot:focus-visible .train-motion{animation:environmental-sprite 5.8s steps(39,end) infinite}
.main-hall-hotspot:hover .archive-motion,.main-hall-hotspot:focus-visible .archive-motion{animation:environmental-sprite 6s steps(39,end) infinite}
.main-hall-hotspot:hover .map-motion,.main-hall-hotspot:focus-visible .map-motion{animation:environmental-sprite 6.4s steps(39,end) infinite}
.main-hall-hotspot:hover .cinema-motion,.main-hall-hotspot:focus-visible .cinema-motion{animation:environmental-sprite 3.4s steps(39,end) infinite}
.main-hall-hotspot:hover .index-motion,.main-hall-hotspot:focus-visible .index-motion{animation:environmental-sprite 5.2s steps(39,end) infinite}
.main-hall-hotspot.is-activating .entrance-motion{animation:environmental-sprite .8s steps(39,end) 1}
.concept-object-motion{position:absolute;inset:0;pointer-events:none;overflow:hidden;opacity:0;visibility:hidden;perspective:620px;transition:opacity .2s ease,visibility 0s linear .2s}
.main-hall-hotspot.concepts:hover .concept-object-motion,.main-hall-hotspot.concepts:focus-visible .concept-object-motion,.main-hall-hotspot.concepts.is-activating .concept-object-motion{opacity:1;visibility:visible;transition-delay:0s}
.concept-clean-scene{position:absolute;inset:0;width:100%;height:100%;object-fit:fill}
.concept-moving-lens{position:absolute;z-index:3;left:33%;top:18%;width:20%;height:auto;filter:sepia(.1) brightness(.82) drop-shadow(0 5px 7px rgba(0,0,0,.55));transform-origin:50% 50%}
.concept-page-sprite{position:absolute;z-index:2;inset:0;background:url(/mystery-media/26ba84789a9e90e341ddc7f135020a8f4c72208a9c8ad8253fe8d1dbe6452784.webp) 0 0/100% 4000% no-repeat}
.main-hall-hotspot.concepts:hover .concept-moving-lens,.main-hall-hotspot.concepts:focus-visible .concept-moving-lens,.main-hall-hotspot.concepts.is-activating .concept-moving-lens{animation:lens-investigate 5.8s ease-in-out infinite}
.main-hall-hotspot.concepts:hover .concept-page-sprite,.main-hall-hotspot.concepts:focus-visible .concept-page-sprite{animation:hinged-page-turn 5.8s steps(39,end) infinite}
.main-hall-hotspot.concepts.is-activating .concept-page-sprite{animation:hinged-page-turn .82s steps(39,end) 1}
.main-hall-hotspot.concepts.is-activating .concept-moving-lens{filter:sepia(.08) brightness(.94) drop-shadow(0 5px 8px rgba(0,0,0,.58))}
.scene-motion{position:absolute;display:block;max-width:none;will-change:transform,filter}
.main-hall-hotspot:hover .scene-window,.main-hall-hotspot:focus-visible .scene-window,.main-hall-hotspot.is-activating .scene-window{opacity:1;visibility:visible;transition-delay:0s}
.main-hall-hotspot.europe .scene-motion,.main-hall-hotspot.japan .scene-motion,.main-hall-hotspot.china .scene-motion{width:426.073%;height:270.27%;top:-35.135%}
.main-hall-hotspot.europe .scene-motion{left:-44.855%}
.main-hall-hotspot.japan .scene-motion{left:-163.036%}
.main-hall-hotspot.china .scene-motion{left:-285.764%}
.main-hall-hotspot.concepts .scene-motion{width:334.771%;height:303.03%;left:11.186%;top:-203.03%}
.main-hall-hotspot.genres .scene-motion{width:199.438%;height:434.783%;left:-50.783%;top:-213.043%}
.main-hall-hotspot.films .scene-motion{width:426.073%;height:400%;left:-340.309%;top:-180%}
.main-hall-hotspot.lookup .scene-motion{width:334.771%;height:333.333%;left:-245.957%;top:-233.333%}
.main-hall-hotspot.europe .scene-window,.main-hall-hotspot.japan .scene-window,.main-hall-hotspot.china .scene-window{-webkit-mask-image:radial-gradient(ellipse 76% 86% at 50% 65%,#000 28%,rgba(0,0,0,.92) 54%,transparent 84%);mask-image:radial-gradient(ellipse 76% 86% at 50% 65%,#000 28%,rgba(0,0,0,.92) 54%,transparent 84%)}
.main-hall-hotspot.europe:hover .scene-motion,.main-hall-hotspot.europe:focus-visible .scene-motion,.main-hall-hotspot.europe.is-activating .scene-motion{animation:europe-depth 4.8s ease-in-out infinite}
.main-hall-hotspot.japan:hover .scene-motion,.main-hall-hotspot.japan:focus-visible .scene-motion,.main-hall-hotspot.japan.is-activating .scene-motion{animation:japan-arrival 5.2s ease-in-out infinite}
.main-hall-hotspot.china:hover .scene-motion,.main-hall-hotspot.china:focus-visible .scene-motion,.main-hall-hotspot.china.is-activating .scene-motion{animation:china-parallax 5.6s ease-in-out infinite}
.main-hall-hotspot.concepts .scene-window{clip-path:circle(0 at 31% 28%)}
.main-hall-hotspot.concepts .scene-motion{transform-origin:10% 74%;filter:brightness(1.22) contrast(1.04)}
.main-hall-hotspot.concepts:hover .scene-window,.main-hall-hotspot.concepts:focus-visible .scene-window,.main-hall-hotspot.concepts.is-activating .scene-window{animation:clue-reading 5.6s ease-in-out infinite}
.main-hall-hotspot.concepts:hover .scene-motion,.main-hall-hotspot.concepts:focus-visible .scene-motion,.main-hall-hotspot.concepts.is-activating .scene-motion{animation:page-magnify 5.6s ease-in-out infinite}
.main-hall-hotspot.genres .scene-window{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 42%,#000 58%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 42%,#000 58%,transparent 100%);-webkit-mask-size:34% 100%;mask-size:34% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.main-hall-hotspot.genres .scene-motion{filter:brightness(1.3) saturate(1.08)}
.main-hall-hotspot.genres:hover .scene-window,.main-hall-hotspot.genres:focus-visible .scene-window,.main-hall-hotspot.genres.is-activating .scene-window{animation:map-reading 5.8s ease-in-out infinite}
.main-hall-hotspot.films .scene-window{-webkit-mask-image:radial-gradient(ellipse 62% 54% at 42% 34%,#000 12%,rgba(0,0,0,.92) 48%,transparent 82%);mask-image:radial-gradient(ellipse 62% 54% at 42% 34%,#000 12%,rgba(0,0,0,.92) 48%,transparent 82%)}
.main-hall-hotspot.films:hover .scene-motion,.main-hall-hotspot.films:focus-visible .scene-motion,.main-hall-hotspot.films.is-activating .scene-motion{animation:projector-flicker 3.2s linear infinite}
.main-hall-hotspot.lookup .scene-window{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 38%,#000 62%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 38%,#000 62%,transparent 100%);-webkit-mask-size:100% 28%;mask-size:100% 28%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.main-hall-hotspot.lookup .scene-motion{filter:brightness(1.28) contrast(1.04)}
.main-hall-hotspot.lookup:hover .scene-window,.main-hall-hotspot.lookup:focus-visible .scene-window,.main-hall-hotspot.lookup.is-activating .scene-window{animation:index-search 4.8s ease-in-out infinite}
.main-hall-hotspot.is-activating .scene-window{filter:brightness(1.08);transition:opacity .12s ease,filter .7s ease}
@keyframes europe-depth{0%,100%{transform:scale(1);filter:brightness(1)}50%{transform:scale(1.018);filter:brightness(1.14) saturate(1.07)}}
@keyframes japan-arrival{0%,100%{transform:translateY(0) scale(1);filter:brightness(1)}50%{transform:translateY(-.45%) scale(1.024);filter:brightness(1.12) saturate(1.05)}}
@keyframes china-parallax{0%,100%{transform:translateX(0) scale(1);filter:brightness(1)}50%{transform:translateX(-.35%) scale(1.016);filter:brightness(1.13) saturate(1.05)}}
@keyframes clue-reading{0%,100%{clip-path:circle(0 at 25% 28%)}8%{clip-path:circle(10% at 25% 28%)}32%{clip-path:circle(11% at 43% 24%)}58%{clip-path:circle(10% at 49% 38%)}82%{clip-path:circle(10% at 31% 42%)}92%{clip-path:circle(0 at 25% 28%)}}
@keyframes page-magnify{0%,100%{transform:scale(1.018)}45%,60%{transform:scale(1.045)}}
@keyframes map-reading{0%,100%{opacity:0;-webkit-mask-position:-52% 0;mask-position:-52% 0}10%{opacity:1}50%{opacity:1;-webkit-mask-position:58% 0;mask-position:58% 0}90%{opacity:1}99%{opacity:0;-webkit-mask-position:152% 0;mask-position:152% 0}}
@keyframes projector-flicker{0%,100%{filter:brightness(1)}12%{filter:brightness(1.18)}15%{filter:brightness(1.04)}38%{filter:brightness(1.15)}43%{filter:brightness(1.06)}67%{filter:brightness(1.2)}72%{filter:brightness(1.08)}}
@keyframes index-search{0%,100%{opacity:0;-webkit-mask-position:0 -45%;mask-position:0 -45%}10%{opacity:1}48%{opacity:1;-webkit-mask-position:0 58%;mask-position:0 58%}88%{opacity:1}99%{opacity:0;-webkit-mask-position:0 145%;mask-position:0 145%}}
@keyframes lens-investigate{0%,100%{transform:translate(0,0) rotate(-2deg)}20%{transform:translate(44%,-6%) rotate(3deg)}42%{transform:translate(78%,10%) rotate(7deg)}62%{transform:translate(54%,27%) rotate(3deg)}82%{transform:translate(14%,20%) rotate(-5deg)}}
@keyframes hinged-page-turn{0%{background-position:0 0}100%{background-position:0 100%}}
@keyframes environmental-sprite{0%{background-position:0 0}100%{background-position:0 100%}}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.main-hall-mobile-nav{display:none}
body.main-hall-placeholder{margin:0;min-height:100svh;display:grid;place-items:center;padding:28px;background:#061c15 url(/mystery-media/75c41babe873c3e6069e3ec4e311cb56f9a4982d465d9b4b54bbbfe331637b5e.webp) center/cover fixed;color:#f4e7c8;font-family:"Songti SC","STSong",serif}
.main-hall-placeholder article{position:relative;max-width:680px;padding:52px 58px;border:1px solid #9f8450;background:rgba(5,24,18,.94);box-shadow:0 20px 70px rgba(0,0,0,.48)}
.main-hall-placeholder .eyebrow{margin:0 0 14px;color:#d1b473;font:600 .68rem/1.4 Georgia,serif;letter-spacing:.28em}
.main-hall-placeholder h1{margin:0 0 18px;font-size:clamp(2.4rem,6vw,4.4rem);font-weight:400;letter-spacing:.08em}
.main-hall-placeholder p{font-size:1rem;line-height:1.9;color:#d9c9a8}
.main-hall-placeholder nav{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.main-hall-placeholder a{padding:11px 16px;border:1px solid #9f8450;color:#f4e7c8;text-decoration:none}
.main-hall-placeholder a:hover,.main-hall-placeholder a:focus-visible{background:#173a2d;outline:2px solid #edcd84;outline-offset:3px}
/* Keep the illustrated entrances directly tappable on touch screens.
   Stage and artwork retain the same ratio so hotspots stay aligned. */
@media(max-width:700px){
 .main-hall-placeholder article{padding:34px 28px}
}
.main-hall-hotspot{touch-action:manipulation;-webkit-tap-highlight-color:rgba(237,205,132,.2)}
.main-hall-hotspot:focus-visible{outline:2px solid #edcd84;outline-offset:-3px}
@media(prefers-reduced-motion:reduce){.scene-window,.scene-motion,.entrance-motion,.concept-object-motion,.concept-moving-lens,.concept-page-sprite{animation:none!important;transition:none!important}.main-hall-hotspot:hover .scene-window,.main-hall-hotspot:focus-visible .scene-window,.main-hall-hotspot:hover .entrance-motion,.main-hall-hotspot:focus-visible .entrance-motion,.main-hall-hotspot:hover .concept-object-motion,.main-hall-hotspot:focus-visible .concept-object-motion{opacity:0}}
