*{box-sizing:border-box}
:root{--ink:#f4edda;--gold:#c8a766;--night:#05070e}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--night)}
body{color:var(--ink);font-family:Georgia,'Times New Roman',serif;-webkit-font-smoothing:antialiased}
button{font:inherit}
.experience{position:relative;width:100vw;height:100svh;overflow:hidden;background:var(--night)}
#world{position:absolute;inset:0;width:100%;height:100%;display:block}
.vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at center,transparent 48%,rgba(0,0,0,.22) 76%,rgba(0,0,0,.62) 100%);z-index:2}
.grain{position:absolute;inset:-50%;pointer-events:none;z-index:3;opacity:.04;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");mix-blend-mode:soft-light}
.opening-copy,.welcome-copy{position:absolute;z-index:5;left:50%;width:min(92vw,760px);transform:translateX(-50%);text-align:center;pointer-events:none;text-shadow:0 3px 28px rgba(0,0,0,.75)}
.opening-copy{top:11vh;transition:opacity 1.2s ease,transform 1.2s ease}
.opening-copy.exit{opacity:0;transform:translate(-50%,-18px)}
.eyebrow{margin:0 0 18px;color:#d2b878;font-size:clamp(10px,1.7vw,14px);letter-spacing:.42em;text-transform:uppercase}
.opening-copy h1{margin:0;font-size:clamp(34px,6vw,72px);font-weight:400;line-height:1.08;letter-spacing:.025em}
#instruction{margin:28px 0 0;color:rgba(244,237,218,.84);font-size:clamp(10px,1.8vw,14px);letter-spacing:.34em;text-transform:uppercase;transition:opacity .6s ease}
.welcome-copy{top:17vh;opacity:0;transform:translate(-50%,18px);transition:opacity 1.5s ease,transform 1.5s ease}
.welcome-copy.show{opacity:1;transform:translate(-50%,0)}
.welcome-copy h2{margin:0;font-size:clamp(34px,7vw,76px);font-weight:400;line-height:1.08;letter-spacing:.025em}
#welcome-sub{margin:18px 0 0;color:#d2bf91;font-size:clamp(11px,2vw,16px);letter-spacing:.36em;text-transform:uppercase}
#chart{margin-top:34px;padding:14px 34px;border:1px solid rgba(200,167,103,.78);border-radius:999px;background:rgba(5,7,14,.18);color:#efe5ca;font-size:12px;letter-spacing:.22em;text-transform:uppercase;pointer-events:auto;cursor:pointer;transition:background .25s ease,border-color .25s ease,transform .25s ease}
#chart:hover,#chart:focus-visible{background:rgba(200,167,103,.13);border-color:#ead29a;transform:translateY(-1px);outline:none}
#chart:disabled{cursor:default;opacity:.85}
.door-hit{position:absolute;z-index:6;left:50%;top:54%;width:min(64vw,470px);height:min(70vh,650px);transform:translate(-50%,-50%);border:0;background:transparent;cursor:pointer;padding:0}
.door-hit:focus-visible{outline:2px solid var(--gold);outline-offset:10px;border-radius:16px}
.door-hit.hidden{pointer-events:none}
@media(max-width:600px){.opening-copy{top:9vh}.opening-copy .eyebrow{margin-bottom:14px}.opening-copy h1{font-size:clamp(31px,9vw,48px);max-width:90vw;margin:auto}#instruction{margin-top:22px;letter-spacing:.28em}.welcome-copy{top:15vh;width:94vw}.welcome-copy h2{font-size:clamp(31px,9vw,52px)}#welcome-sub{letter-spacing:.27em}#chart{margin-top:28px;padding:13px 27px}.door-hit{top:55%;width:76vw;height:68vh}}
@media(prefers-reduced-motion:reduce){.opening-copy,.welcome-copy{transition:none}}