:root{--cyan:#00efdf;color-scheme:dark}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#040b11;color:#edf7f4;font-family:Arial,Helvetica,sans-serif;overflow-x:clip}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}button:disabled{cursor:progress;opacity:.4}a,button{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible{outline:2px solid var(--cyan);outline-offset:6px}svg{height:21px;width:21px;stroke-width:1.4}header{position:fixed;inset:0 0 auto;z-index:30;display:flex;justify-content:space-between;align-items:center;padding:24px 4vw;background:linear-gradient(#040b11a0,transparent);pointer-events:none}header a{pointer-events:auto;display:flex;align-items:center;gap:24px}header img{width:117px;height:37px;object-fit:contain}header span{font-size:8px;letter-spacing:.18em;color:#a7c1ca}.exit{width:40px;height:40px;border:1px solid #aac7d144;border-radius:50%;justify-content:center;background:#040b1144}.skip{position:fixed;left:10px;top:10px;z-index:90;padding:12px;background:var(--cyan);color:#03151a;transform:translateY(-150%)}.skip:focus{transform:none}#viaje{height:2400svh;position:relative}.stage{position:sticky;top:0;height:100svh;min-height:500px;overflow:hidden;isolation:isolate}canvas{position:absolute;inset:0;width:100%;height:100%;display:block}.shade{position:absolute;inset:0;background:linear-gradient(0deg,#02080d88,transparent 25%);pointer-events:none;z-index:1}.intro{position:absolute;left:7vw;top:25%;width:48%;z-index:3}.kicker{display:block;font-size:9px;letter-spacing:.2em;line-height:1.6;color:var(--cyan)}h1{font-size:clamp(48px,6.7vw,105px);font-weight:400;line-height:1;letter-spacing:-.065em;margin:27px 0}em{color:var(--cyan);font-style:normal}.intro p{color:#b8cbd2;line-height:1.65;font-size:16px}.intro button,.ending button{display:flex;align-items:center;gap:26px;border:0;border-radius:35px;background:var(--cyan);color:#042326;padding:16px 24px;font-size:12px}.intro button{margin-top:27px}.intro small{display:block;font-size:8px;letter-spacing:.12em;line-height:1.7;color:#8ba9b6;margin-top:19px}.caption{position:absolute;left:7vw;bottom:15%;width:min(430px,34vw);z-index:3;opacity:0;pointer-events:none}.caption:before{position:absolute;content:'';inset:-45px -60px;z-index:-1;background:radial-gradient(ellipse,#030b11e0,transparent 75%)}.caption h2{font-weight:400;font-size:clamp(33px,4.1vw,62px);letter-spacing:-.055em;line-height:1.04;margin:19px 0}.caption p{font-size:15px;line-height:1.65;color:#c0d1d6;max-width:350px;margin:0}.stage[data-chapter="4"] .caption{top:17%;bottom:auto;width:26vw;max-width:350px}.stage[data-chapter="4"] .caption h2{font-size:clamp(30px,3.3vw,49px)}.stage[data-chapter="6"] .caption{bottom:20%}.timeline{position:absolute;z-index:5;left:4vw;right:4vw;bottom:23px;display:flex;align-items:center;gap:20px}.timeline>span{font-size:8px;letter-spacing:.13em;color:#a6bdc7;min-width:155px}.track{height:1px;background:#b4d3df33;flex:1}.track i{display:block;height:1px;background:var(--cyan);transform-origin:left;transform:scaleX(var(--p,0));box-shadow:0 0 8px #00efdf66}.timeline output{min-width:32px;font-size:9px;text-align:right;color:#a6bdc7}.moments{position:absolute;right:20px;top:50%;transform:translateY(-50%);z-index:7;display:grid;gap:8px}.moments button{width:35px;height:35px;border:0;background:none;padding:12px}.moments button:before{content:'';display:block;width:7px;height:7px;border:1px solid #9ab8c377;border-radius:50%}.moments button[aria-current=true]:before{background:var(--cyan);border-color:var(--cyan);box-shadow:0 0 12px #00efdf}.moments span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.hint{position:absolute;bottom:7%;left:50%;transform:translateX(-50%);font-size:7px;letter-spacing:.17em;color:#9db9c5;white-space:nowrap}.ready .hint{animation:hint 4s 1 forwards}@keyframes hint{to{opacity:0}}.loader{position:absolute;left:7vw;top:18%;z-index:5;display:flex;align-items:center;gap:12px;font-size:8px;letter-spacing:.17em;color:#a1bdc8;text-transform:uppercase}.loader i{width:7px;height:7px;background:var(--cyan);border-radius:50%;box-shadow:0 0 14px var(--cyan);animation:load 1.2s infinite alternate}@keyframes load{to{opacity:.2}}.ready .loader{display:none}.error{display:none}.ending{padding:110px 9vw 90px;border-top:1px solid #00efdf22;background:radial-gradient(ellipse at 80% 100%,#00efdf12,transparent 60%)}.ending h2{font-size:clamp(45px,7vw,105px);font-weight:400;line-height:1.03;letter-spacing:-.055em;margin:30px 0}.ending p{max-width:580px;font-size:18px;line-height:1.65;color:#bbd0d7}.ending>div{display:flex;align-items:center;flex-wrap:wrap;gap:30px;margin:35px 0}.ending a{display:flex;align-items:center;gap:14px;font-size:13px}.ending small{font-size:10px;line-height:1.7;color:#83a1ae}.reading[hidden],[hidden]{display:none!important}.reading{position:relative;background:#040b11;padding:90px 8vw;max-width:100%;}.reading h2{font-size:45px;font-weight:400;letter-spacing:-.04em}.reading ol{padding:0;list-style:none;display:grid;gap:35px;max-width:700px}.reading li{border-top:1px solid #00efdf33;padding-top:20px}.reading h3{font-size:24px;font-weight:400;color:var(--cyan)}.reading p{font-size:16px;line-height:1.7;color:#c0d2d9}#fallback{position:absolute;inset:0;z-index:2;pointer-events:none}#fallback img{position:absolute;width:48%;height:76%;right:0;top:12%;object-fit:contain;opacity:.7}#fallback>p{position:absolute;left:7vw;bottom:9%;font-size:13px;line-height:1.7;color:#a5bfc9;max-width:430px}.no-3d #viaje{height:100svh;min-height:760px}.no-3d .stage{min-height:760px}.no-3d .timeline,.no-3d .moments,.no-3d .hint{display:none}.no-3d .intro{top:19%}
@media(min-width:1800px){.intro,.caption{left:10vw}.caption p{font-size:17px}.stage[data-chapter="4"] .caption{left:6vw;max-width:400px}}
@media(max-width:700px){header{padding:17px 6vw}header img{width:96px;height:30px}header span{display:none}.exit{width:35px;height:35px}#viaje{height:2600svh}.intro{left:7vw;top:16%;width:87%}h1{font-size:clamp(43px,11.8vw,67px);margin:23px 0}.intro p{font-size:14px}.intro button{font-size:11px;padding:14px 19px;margin-top:23px}.intro small{max-width:53%;font-size:8px}.kicker{font-size:8px}.caption{left:7vw;bottom:13%;width:83%;max-width:355px}.caption h2{font-size:clamp(30px,8.2vw,41px);margin:14px 0}.caption p{font-size:14px;line-height:1.55;max-width:305px}.caption:before{inset:-30px;background:radial-gradient(ellipse,#030b11f0,transparent 77%)}.stage[data-chapter="4"] .caption{top:auto;bottom:12%;width:83%;max-width:355px}.stage[data-chapter="4"] .caption h2{font-size:31px}.stage[data-chapter="6"] .caption{bottom:13%}.moments{right:3px;gap:6px}.moments button{height:29px;width:29px;padding:10px}.moments button:before{width:6px;height:6px}.timeline{left:6vw;right:6vw;bottom:20px;gap:10px}.timeline>span{font-size:7px;min-width:125px}.timeline output{font-size:8px}.hint{font-size:6px}.loader{top:11%;font-size:7px}.ending{padding:85px 7vw 70px}.ending p{font-size:15px}.no-3d #fallback img{width:68%;height:42%;right:-6%;top:43%;opacity:.5}.no-3d #fallback>p{left:7vw;bottom:5%;width:85%;font-size:12px}.no-3d .intro{top:14%}.reading{padding:70px 7vw}.reading h2{font-size:36px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.loader i,.hint{animation:none}#viaje{height:1600svh}}

.reading:not([data-open=true]){position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);padding:0}.no-3d #viaje{height:auto;min-height:100svh}.no-3d .stage{position:relative}
.no-3d .intro small{display:none}
.no-3d .intro{opacity:1!important;visibility:visible!important;pointer-events:auto!important}.no-3d .caption,.no-3d canvas{display:none}

/* Text contrast remains independent of HDR reflections and bright geometry. */
.shade:before,.shade:after{content:'';position:absolute;inset:0;pointer-events:none}
.shade:before{background:linear-gradient(90deg,#02080dfc 0%,#02080df5 28%,#02080de8 44%,#02080d80 61%,#02080d00 78%);opacity:var(--intro-shade,1)}
.shade:after{background:linear-gradient(0deg,#02080df5 0%,#02080deb 21%,#02080dc7 37%,#02080d00 66%);opacity:var(--caption-shade,0)}
.intro p{color:#d4e2e7}.intro small{color:#b5cbd4}.intro .kicker{text-shadow:0 1px 10px #02080d}
.caption:before{inset:-45px -70px;background:#02080dea;filter:blur(24px);border-radius:25px}
.caption p{color:#d4e2e7}.timeline{filter:drop-shadow(0 1px 5px #02080d)}
@media(min-width:701px){.stage[data-chapter="4"] .shade:after{background:linear-gradient(90deg,#02080df0 0%,#02080dce 27%,#02080d00 48%)}}
@media(max-width:700px){.shade:before{background:linear-gradient(180deg,#02080dfa 0%,#02080df0 29%,#02080da8 44%,#02080d00 65%)}.caption:before{inset:-28px -28px;background:#02080ded;filter:blur(20px)}}
.intro small{font-size:9px}.intro .kicker{font-size:10px}.exit{background:#040b11cc}
.timeline:before{content:'';position:absolute;z-index:-1;inset:-26px -4vw -24px;background:linear-gradient(0deg,#02080df5,#02080d00);pointer-events:none}
@media(max-width:700px){.shade:before{background:linear-gradient(90deg,#02080df5 0%,#02080ddb 42%,#02080d55 75%,#02080d00 100%),linear-gradient(180deg,#02080df5 0%,#02080de0 37%,#02080d00 65%)}.intro .kicker{font-size:9px}.intro small{font-size:9px}}

.cross-glow{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:var(--cross-glow,0);background:radial-gradient(ellipse at 60% 45%,#bafdf5e8,#00efdf70 35%,#00efdf00 75%);mix-blend-mode:screen}.no-3d .cross-glow{display:none}
@media(min-width:701px) and (max-height:760px){.intro{top:16%}h1{font-size:clamp(45px,5.8vw,82px);margin:20px 0}.intro button{margin-top:20px}.intro small{margin-top:13px}.caption h2{font-size:clamp(29px,3.8vw,48px)}}
@media(min-width:701px) and (max-height:600px){.intro{top:15%}h1{font-size:clamp(38px,5vw,64px);margin:16px 0}.intro p{font-size:13px}.intro small{display:none}.intro button{padding:13px 20px;margin-top:15px}.caption p{font-size:13px}.caption h2{font-size:32px}.stage[data-chapter="4"] .caption h2{font-size:30px}}
@media(max-width:700px){.intro small{max-width:38%}}
@media(max-width:700px) and (max-height:740px){.intro{top:11%}h1{font-size:34px;margin:16px 0}.intro p{font-size:13px}.intro button{padding:12px 17px;margin-top:15px}.intro small{display:none}}
@media(max-width:700px) and (max-height:650px){.intro{top:9%}h1{font-size:32px}.intro p{font-size:12px}}

/* Chapter wayfinding stays quiet until deliberately explored. */
@media(hover:hover) and (min-width:701px){.moments button{position:relative}.moments button span{clip-path:none;width:max-content;height:auto;right:43px;top:50%;transform:translate(7px,-50%);padding:10px 14px;border:1px solid #00efdf33;border-radius:20px;background:#040b11ed;color:#dcebed;white-space:nowrap;font-size:10px;letter-spacing:.09em;opacity:0;transition:opacity .2s,transform .2s;pointer-events:none}.moments button:hover span,.moments button:focus-visible span{opacity:1;transform:translate(0,-50%)}}
.ending button.text-action{background:none;color:#c7dce2;padding:10px 0;border-radius:0;border-bottom:1px solid #00efdf55;gap:0}
.timeline{bottom:max(23px,env(safe-area-inset-bottom))}
header{padding-top:max(20px,env(safe-area-inset-top))}
@media(max-width:700px){.timeline{bottom:max(18px,env(safe-area-inset-bottom))}}
/* Short landscape screens must use their actual height, including browser chrome. */
@media(max-height:500px) and (min-width:600px){
 .stage{height:100svh;min-height:0}header{padding:10px max(22px,env(safe-area-inset-left))}header img{width:88px;height:28px}header span{display:none}.exit{height:30px;width:30px}
 .intro{top:18%;width:46%;left:6vw}h1{font-size:clamp(29px,4.4vw,44px);margin:12px 0}.intro .kicker{font-size:8px}.intro p{font-size:12px;line-height:1.4}.intro button{padding:10px 15px;margin-top:12px;font-size:10px}.intro small,.hint{display:none}
 .caption,.stage[data-chapter="4"] .caption,.stage[data-chapter="6"] .caption{top:auto;bottom:20%;left:6vw;width:30%;max-width:310px}.caption h2,.stage[data-chapter="4"] .caption h2{font-size:25px;margin:10px 0}.caption p{font-size:11px;line-height:1.45}.caption .kicker{font-size:8px}
 .moments{right:5px;gap:0}.moments button{height:26px;width:28px;padding:9px}.timeline{bottom:max(12px,env(safe-area-inset-bottom))}.loader{top:14%;font-size:7px}
}
@media(prefers-reduced-motion:reduce){.moments button span{transition:none}}

.inside-cue{position:absolute;z-index:4;left:50%;bottom:10%;transform:translateX(-50%);margin:0;padding:12px 18px;color:#c5fff8;background:#02080dbb;border:1px solid #00efdf25;border-radius:25px;backdrop-filter:blur(12px);font-size:11px;letter-spacing:.035em;white-space:nowrap;opacity:var(--inside-cue,0);pointer-events:none}.no-3d .inside-cue{display:none}
@media(max-height:500px){.inside-cue{bottom:14%;font-size:10px;padding:9px 14px}}

/* A stable mobile viewport avoids reallocating GPU buffers as browser bars move. */
@media(any-pointer:coarse){.stage{min-height:0}.caption:before{display:none}.inside-cue{backdrop-filter:none}.shade:after{background:linear-gradient(0deg,#02080ded 0%,#02080dbb 25%,#02080d55 43%,transparent 65%)}.moments button[aria-current=true]:before{box-shadow:none}}