@font-face{font-family:Manrope;src:url('./assets/identity/manrope.ttf') format('truetype');font-weight:200 800;font-display:swap}
:root{color-scheme:dark;--fg:#f4efe4;--dim:#ded6c9;--heat:#f08b57}
*{box-sizing:border-box}
html{background:#000;scrollbar-color:#8a7464 #000}
html:has(body[data-crossing=black]){scrollbar-color:#000 #000}
body{margin:0;color:var(--fg);font:1rem/1.5 Manrope,Arial,sans-serif;background:#000}
#journey{height:100svh;position:relative}
body.live-experience #journey{height:680svh}
.viewport{position:sticky;top:0;width:100%;height:100svh;overflow:hidden;isolation:isolate}
#stage,#world,#reference,.scrim{position:absolute;inset:0;width:100%;height:100%}
#stage{overflow:hidden;background:#000}
#reference{object-fit:cover;object-position:center}
#world{opacity:0}
body[data-ready=true] #world{opacity:1}
body.graphics-failed #world,body[data-view=reference] #world{visibility:hidden}
#world canvas{width:100%;height:100%;display:block;touch-action:pan-y}
.scrim{pointer-events:none;background:linear-gradient(180deg,#17191750 0%,transparent 19%,transparent 73%,#16191688 100%)}
header{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;gap:24px;padding:28px 3.2%;z-index:3}
.brand{color:var(--fg);text-decoration:none;letter-spacing:-.075em;font-size:2.125rem;line-height:1;font-weight:800;text-shadow:0 1px 15px #0002}
.brand span{color:var(--heat);padding-left:5px}
h1{font-size:0.6875rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;margin:3px 0 0 auto;text-align:right;color:var(--fg)}
button{color:inherit;background:transparent;border:0;padding:10px 0;min-height:44px;cursor:pointer;font:inherit;touch-action:manipulation}
button:hover{color:#fff}
button:focus-visible,a:focus-visible{outline:2px solid #ffb790;outline-offset:6px}
button:disabled{opacity:.4;cursor:default}
#restart{margin-left:24px;font-size:0.6875rem;border-bottom:1px solid #fff6;padding:4px 0;min-height:36px}
#restart[hidden]{display:none}
footer:not(.embr-footer){position:absolute;bottom:0;left:0;right:0;display:grid;grid-template-columns:1fr 1fr 1fr;align-items:end;padding:24px 3.2%;z-index:3;gap:20px}
#motion{text-align:left;width:fit-content;font-size:0.6875rem}
#expand{justify-self:end;border-bottom:1px solid #f4efe477;min-width:96px;text-align:right;font-size:0.6875rem}
#expand[aria-pressed=true]{color:#ffd2ac;border-color:var(--heat)}
.scroll-cue{text-align:center;color:var(--fg);font-size:0.6875rem;letter-spacing:.04em;padding:12px 0 8px}
.progress-track{display:block;margin:12px auto 0;height:1px;background:#f4efe444;width:100px;overflow:hidden}
#progress{display:block;width:100%;height:100%;background:#ffb98f;transform:scaleX(0);transform-origin:left}
.statement{position:absolute;bottom:clamp(92px,12svh,150px);right:3.2%;max-width:34%;text-align:right;font-size:clamp(1.25rem,1.9vw,2rem);line-height:1.25;letter-spacing:-.045em;color:var(--fg);pointer-events:none}
body.graphics-failed #journey,body.graphics-failed.reduced-motion #journey{height:100svh}
body.live-experience.reduced-motion #journey{height:250svh}
body.graphics-failed .scroll-cue,body.graphics-failed .statement{display:none}
body.reduced-motion .progress-track{display:none}
.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}
.no-script{position:fixed;bottom:25px;left:25px;right:25px}
@media(max-width:700px){
 header{padding:24px 22px;gap:18px}.brand{font-size:1.8125rem}h1{font-size:0.6875rem;letter-spacing:.09em}
 #restart{font-size:0.6875rem;margin-left:auto}header:has(#restart:not([hidden])) h1{display:none}footer:not(.embr-footer){padding:20px 22px;grid-template-columns:1fr 1fr;gap:8px}
 .scroll-cue{grid-column:1/-1;grid-row:1;font-size:0.6875rem;padding-bottom:5px}
 #motion,#expand{font-size:0.6875rem}#motion{grid-row:2}#expand{grid-row:2}
 .statement{top:96px;bottom:auto;right:22px;left:auto;max-width:calc(100% - 44px);font-size:1.375rem}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}body.live-experience #journey{height:250svh}}

body[data-realm=cavern] #expand{display:none}
body[data-realm=cavern] .scrim{background:linear-gradient(180deg,#10172270,transparent 20%,transparent 80%,#0c101a70)}

#pool-action{grid-column:3;justify-self:end;border-bottom:1px solid #f4efe477;min-width:96px;text-align:right;font-size:0.6875rem}
#pool-action[hidden]{display:none}
@media(max-width:700px){#pool-action{grid-column:2;grid-row:2;font-size:0.6875rem}}

.skip-link{position:fixed;left:1rem;top:1rem;z-index:10000;padding:12px 18px;background:#f4efe4;color:#18212a;font-size:1rem;line-height:1.5;border-radius:3px;text-decoration:underline}
.skip-link:not(:focus){width:1px;height:1px;overflow:hidden;clip-path:inset(50%);padding:0;white-space:nowrap}
.skip-link:focus{outline:2px solid #f4bb83;outline-offset:3px}

.approach-loading{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;background:#0a0b0c;color:#f4f1e8;text-align:center;padding:24px}
.approach-loading[hidden]{display:none}
.approach-loading p{font-size:clamp(20px,3vw,30px)}
.approach-loading button{font:inherit;color:inherit;background:transparent;border:1px solid #8a8176;padding:12px 18px;cursor:pointer}
.approach-loading button:focus-visible{outline:2px solid #f4bb83;outline-offset:5px}