*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#201b17}
body{font-family:Georgia,'Times New Roman',serif}
#museum,#stage{position:relative;width:100%;height:100%;overflow:hidden}
#stage{isolation:isolate}
.scene{position:absolute;inset:0;display:grid;place-items:center}
.plane{position:relative;flex:none;will-change:transform,opacity,filter}
.plane>img{display:block;width:100%;height:100%;user-select:none;pointer-events:none}
.hotspot{position:absolute;transform:translate(-50%,-50%);width:44px;height:44px;display:grid;place-items:center;border:0;padding:0;background:transparent;color:#25221f;cursor:pointer;opacity:1;transition:opacity .25s;filter:drop-shadow(0 0 .65px #fff9ed) drop-shadow(0 0 .65px #fff9ed);-webkit-tap-highlight-color:transparent}
.hotspot svg{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:var(--marker-size,48px);height:var(--marker-size,48px);overflow:visible;stroke:currentColor;stroke-width:3.3;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.projection{transform-origin:32px 32px;transform:var(--projection)}
.chevron{animation:beckon 2.4s ease-in-out infinite}.chevron.lead{animation-delay:.22s}
.hotspot:hover,.hotspot:focus-visible,.hotspot:active{opacity:1;outline:none}
.hotspot:hover .chevron{animation-duration:1.45s}.hotspot:hover .lead{animation-delay:.15s}
.hotspot:focus-visible{border-radius:50%;outline:1px dashed #25221f;outline-offset:1px}
.destination{position:absolute;left:50%;bottom:100%;transform:translate(-50%,5px);white-space:nowrap;max-width:min(80vw,340px);font-size:14px;line-height:1.4;letter-spacing:.025em;color:#fff9ee;padding:5px 10px;background:#241b16ba;border-radius:2px;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}
.destination.align-left{left:0;transform:translate(0,5px)}.destination.align-right{left:auto;right:0;transform:translate(0,5px)}
.hotspot:hover .destination,.hotspot:focus-visible .destination,.hotspot:active .destination{opacity:1;transform:translate(-50%,0)}
.hotspot:hover .destination.align-left,.hotspot:focus-visible .destination.align-left,.hotspot:active .destination.align-left,.hotspot:hover .destination.align-right,.hotspot:focus-visible .destination.align-right,.hotspot:active .destination.align-right{transform:translate(0,0)}
#status{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);margin:0;color:#fff4de;font-size:14px;background:#201b17ba;padding:8px 12px;border-radius:3px}#status:empty{display:none}
@keyframes beckon{0%,100%{opacity:.78;transform:translateY(3px)}45%{opacity:1;transform:translateY(-2px)}70%{opacity:.88;transform:translateY(-3px)}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}.chevron{animation:none;opacity:.85}}
@media(pointer:coarse){.hotspot{opacity:.95}}

[hidden]{display:none!important}

#welcome{position:absolute;inset:0;z-index:2;background:#211a17;color:#fff3df;overflow:auto;display:flex;align-items:center}
.welcome-art{position:fixed;inset:0;pointer-events:none}
.welcome-art img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 48%}
#welcome::after{content:"";position:fixed;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(24,15,12,.88),rgba(24,15,12,.56) 39%,rgba(24,15,12,.08) 75%)}
.welcome-copy{position:relative;z-index:1;padding:clamp(30px,6vw,96px);width:min(650px,58%);text-shadow:0 2px 16px #1a100c55}
.welcome-kicker{font:12px/1.6 Arial,sans-serif;letter-spacing:.18em;color:#e7cdb1;margin:0 0 32px}
#welcome h1{font-weight:400;font-size:clamp(44px,5.2vw,82px);line-height:1.08;letter-spacing:-.035em;margin:0 0 22px}
#welcome h1 em{font-weight:400;color:#efd3ad}
.welcome-subtitle{font-size:clamp(16px,1.45vw,21px);line-height:1.5;color:#ead9c3;margin:0 0 30px}
.welcome-intro{font-family:Georgia,'Songti SC','SimSun',serif;font-size:15px;line-height:1.95;color:#f0e2d1;max-width:360px}
.welcome-intro p{margin:0 0 12px}
#enter-museum{display:flex;align-items:center;justify-content:space-between;gap:44px;margin-top:28px;background:#f3e8d7;color:#30241e;border:1px solid #f3e8d7;border-radius:2px;padding:15px 22px;font:16px/1.4 Georgia,'Songti SC',serif;letter-spacing:.12em;cursor:pointer;transition:background .2s,transform .2s}
#enter-museum:hover{background:#fff7eb;transform:translateY(-2px)}
#enter-museum:focus-visible{outline:2px solid #e1c5a3;outline-offset:5px}
#enter-museum:disabled{cursor:wait;opacity:.7}
.welcome-hint{font:12px/1.8 Arial,'PingFang SC',sans-serif;color:#decbb5;margin:16px 0 0}
@media(max-width:760px){#welcome{align-items:flex-end}#welcome::after{background:linear-gradient(0deg,rgba(24,15,12,.95),rgba(24,15,12,.7) 40%,rgba(24,15,12,.06) 85%)}.welcome-art img{object-position:56% center}.welcome-copy{padding:32px 28px;width:100%;max-width:520px;margin-top:18svh}.welcome-kicker{margin-bottom:16px}#welcome h1{font-size:46px;margin-bottom:16px}.welcome-subtitle{font-size:16px;margin-bottom:20px}.welcome-intro{font-size:14px;line-height:1.75}#enter-museum{margin-top:20px}}
@media(min-width:761px) and (max-height:700px){.welcome-copy{padding:26px 48px}.welcome-kicker{margin-bottom:18px}#welcome h1{font-size:48px;margin-bottom:18px}.welcome-subtitle{margin-bottom:18px}#enter-museum{margin-top:18px}}

/* Preserve the full theatre composition on every screen. */
.welcome-art{background:#211713}
.welcome-art img{object-fit:contain;object-position:right center}
#welcome::after{background:linear-gradient(90deg,rgba(24,15,12,.92),rgba(24,15,12,.58) 23%,transparent 51%)}
.welcome-copy{width:34%;min-width:300px;padding:36px clamp(24px,3vw,48px)}
#welcome h1{font-size:clamp(30px,3.5vw,54px)}
.welcome-kicker{letter-spacing:.12em;margin-bottom:24px}
.welcome-subtitle{font-size:17px;margin-bottom:24px}
@media(max-width:760px){#welcome{display:block}.welcome-art{position:relative;width:100%;height:auto}.welcome-art img{width:100%;height:auto;object-fit:contain}#welcome::after{display:none}.welcome-copy{width:100%;min-width:0;max-width:520px;margin:0;padding:26px 28px 32px}#welcome h1{font-size:40px}.welcome-kicker{margin-bottom:16px}}