:root{
  --night:#07090a;
  --night2:#0e1113;
  --paper:#ece7dd;
  --paperText:#171615;
  --white:#f1ede5;
  --muted:rgba(241,237,229,.48);
  --amber:#b88a62;
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box}
html{background:var(--night);scroll-behavior:auto}
body{margin:0;height:1200vh;background:var(--night);color:var(--white);font-family:"Songti SC","STSong","Noto Serif CJK SC",Georgia,serif;overflow-x:hidden}
button{font:inherit}
#stage{position:fixed;inset:0;overflow:hidden;background:var(--night);isolation:isolate}
.scene{position:absolute;inset:0;pointer-events:none;opacity:0;visibility:hidden}
.film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;filter:saturate(.7) contrast(1.06) brightness(.7);transform:scale(1.03);will-change:opacity,transform,filter}
#filmShade{position:absolute;inset:0;background:radial-gradient(80% 90% at 65% 48%,transparent 0,rgba(3,5,6,.28) 45%,rgba(3,5,6,.83) 100%),linear-gradient(90deg,rgba(2,4,5,.84),rgba(2,4,5,.12) 54%,rgba(2,4,5,.58));z-index:3;pointer-events:none}
#grain{position:absolute;inset:-50%;z-index:90;pointer-events:none;opacity:.12;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");animation:grain .23s steps(2) infinite}
@keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(2%,-3%)}50%{transform:translate(-4%,2%)}75%{transform:translate(3%,4%)}100%{transform:translate(-2%,-2%)}}
#topChrome{position:absolute;top:0;left:0;right:0;z-index:120;display:flex;justify-content:space-between;align-items:center;padding:25px 31px;font-family:Inter,ui-sans-serif,system-ui,sans-serif;font-size:10px;letter-spacing:.17em;text-transform:uppercase;color:rgba(241,237,229,.5);mix-blend-mode:normal}
.tinyMark{opacity:.7}
#soundToggle{pointer-events:auto;border:0;background:none;color:inherit;display:flex;gap:8px;align-items:center;cursor:pointer;padding:12px;margin:-12px;letter-spacing:.15em}
#soundToggle b{font-weight:500;color:rgba(241,237,229,.82)}
#loader{position:fixed;inset:0;z-index:1000;background:#060708;color:var(--white);display:grid;place-items:center;transition:opacity .7s var(--ease),visibility .7s}
#loader.hidden{opacity:0;visibility:hidden}
.loaderInner{width:min(360px,70vw);font-family:Inter,ui-sans-serif,system-ui,sans-serif}
#loaderNum{font-size:58px;font-weight:300;letter-spacing:-.06em}.loaderPct{font-size:14px;color:#807d77;margin-left:3px}.loaderRule{margin:18px 0 12px;height:1px;background:#292a2b}.loaderRule i{display:block;height:100%;width:0;background:#d8d1c4;transition:width .18s linear}.loaderInner p{font-size:10px;letter-spacing:.18em;color:#6c6963;margin:0;text-transform:uppercase}
#intro{z-index:20}.introTitleWrap{position:absolute;left:7.2vw;top:29vh;z-index:6;width:min(720px,62vw)}
#introTitle{font-weight:400;font-size:clamp(58px,7.7vw,132px);line-height:.98;letter-spacing:-.045em;margin:0;max-width:9em;text-shadow:0 2px 45px rgba(0,0,0,.55);clip-path:inset(0 100% 0 0);will-change:clip-path,transform,opacity}
#introSub{font-size:clamp(16px,1.45vw,23px);line-height:1.8;color:rgba(241,237,229,.58);margin:28px 0 0;opacity:0;letter-spacing:.02em}
#introFragments{position:absolute;inset:0;z-index:4;pointer-events:none}.introFrag{position:absolute;margin:0;overflow:hidden;border:1px solid rgba(255,255,255,.12);box-shadow:0 18px 65px rgba(0,0,0,.38);opacity:0;filter:saturate(.55) brightness(.65);will-change:transform,opacity,filter}.introFrag img,.introFrag video{width:100%;height:100%;display:block;object-fit:cover}.f1{left:63vw;top:11vh;width:15vw;height:33vh}.f2{left:78vw;top:49vh;width:11vw;height:28vh}.f3{left:54vw;top:57vh;width:12vw;height:25vh}.f4{left:72vw;top:19vh;width:10vw;height:40vh}
.scrollCue{position:absolute;left:7.4vw;bottom:7.5vh;z-index:10;font-family:Inter,ui-sans-serif,system-ui,sans-serif;font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:rgba(241,237,229,.46);display:flex;align-items:center;gap:15px}.scrollCue i{display:block;width:70px;height:1px;background:rgba(241,237,229,.3);position:relative}.scrollCue i:after{content:"";position:absolute;right:0;top:-2px;width:5px;height:5px;border-radius:50%;background:rgba(241,237,229,.65)}
#premise{z-index:25}.premiseLine{position:absolute;font-size:clamp(36px,5vw,80px);line-height:1.24;letter-spacing:-.035em;opacity:0;will-change:transform,opacity,filter}.p1{left:9vw;top:25vh}.p2{right:8vw;top:26vh;text-align:right;font-size:clamp(30px,4.1vw,66px)}.p3{left:12vw;bottom:20vh;font-size:clamp(28px,3.5vw,55px)}.p4{right:11vw;bottom:18vh;font-size:clamp(34px,4.5vw,72px);color:#d5a878}
#memoryField{z-index:32;background:#090b0c;overflow:hidden}.memoryLabel{position:absolute;left:5.5vw;top:14vh;z-index:18;width:300px;font-size:13px;line-height:1.9;color:rgba(241,237,229,.4);letter-spacing:.06em}
.memory{position:absolute;margin:0;z-index:12;overflow:hidden;opacity:0;filter:grayscale(.92) saturate(.35) brightness(.46) contrast(1.08);transition:filter .55s var(--ease),opacity .55s var(--ease),box-shadow .55s var(--ease),inset .8s var(--ease),width .8s var(--ease),height .8s var(--ease),transform .8s var(--ease);pointer-events:auto;cursor:pointer;will-change:transform,opacity,filter}.memory img,.memory video{width:100%;height:100%;display:block;object-fit:cover}.memory figcaption{position:absolute;left:16px;right:16px;bottom:14px;font-size:12px;line-height:1.65;color:rgba(255,255,255,.0);text-shadow:0 2px 15px #000;transition:color .45s}.memory.focused{filter:grayscale(.05) saturate(.9) brightness(.78);z-index:30;box-shadow:0 22px 85px rgba(0,0,0,.48)}.memory.focused figcaption{color:rgba(255,255,255,.8)}.memory.dimmed{opacity:.17!important;filter:grayscale(1) brightness(.25)}.memory.expanded{inset:4.5vh 4vw!important;width:auto!important;height:auto!important;transform:none!important;z-index:80!important;filter:grayscale(.08) brightness(.75)!important;opacity:1!important;cursor:zoom-out}.memory.expanded figcaption{font-size:clamp(20px,2.2vw,34px);bottom:6vh;left:6vw;color:#fff;max-width:560px}
.m1{left:7vw;top:31vh;width:18vw;height:42vh}.m2{left:28vw;top:14vh;width:13vw;height:31vh}.m3{right:7vw;top:18vh;width:14vw;height:48vh}.m4{left:43vw;top:51vh;width:13vw;height:31vh}.m5{left:46vw;top:17vh;width:22vw;height:24vh}.m6{right:20vw;bottom:8vh;width:14vw;height:29vh}.m7{left:21vw;bottom:7vh;width:18vw;height:26vh}.timePiece,.textPiece{display:flex;flex-direction:column;justify-content:center;padding:18px 22px;background:transparent;border-top:1px solid rgba(255,255,255,.23);border-bottom:1px solid rgba(255,255,255,.08);filter:none;color:#eee;cursor:default;overflow:visible}.timePiece span,.textPiece span{font-family:Inter,ui-sans-serif,system-ui,sans-serif;font-weight:300;font-size:clamp(28px,3.5vw,58px);letter-spacing:-.04em}.timePiece small,.textPiece small{font-size:11px;color:rgba(255,255,255,.4);margin-top:10px;letter-spacing:.08em}.m8{right:39vw;top:43vh;width:14vw;height:16vh}.m9{right:6vw;bottom:9vh;width:17vw;height:16vh}
#gravityCanvas{position:absolute;inset:0;width:100%;height:100%;z-index:8;pointer-events:none;opacity:0}#gravityCore{position:absolute;left:50%;top:50%;width:6px;height:6px;border-radius:50%;background:#e1c09b;box-shadow:0 0 24px 6px rgba(184,138,98,.34);z-index:16;opacity:0;transform:translate(-50%,-50%)}#gravityCopy{position:absolute;left:50%;top:50%;z-index:25;transform:translate(-50%,-50%);text-align:center;width:min(760px,80vw);pointer-events:none}.g1,.g2,.g3{margin:.5em 0;font-size:clamp(28px,4vw,62px);line-height:1.3;opacity:0;letter-spacing:-.025em}
#distance{z-index:40;background:#07090a}.distancePoint{position:absolute;width:7px;height:7px;border-radius:50%;background:#f5ecdf;box-shadow:0 0 16px rgba(245,236,223,.28);transform:translate(-50%,-50%);z-index:4}.distancePoint.target{left:70%;top:48%;background:#c9a27c}.distancePoint.source{left:30%;top:53%}.distanceCopy{position:absolute;left:7vw;bottom:12vh;width:min(700px,70vw)}.distanceCopy p{font-size:clamp(22px,2.8vw,44px);line-height:1.65;margin:0 0 16px;opacity:0;color:rgba(241,237,229,.84)}.distanceHint{position:absolute;right:5vw;bottom:5vh;font-family:Inter,ui-sans-serif,system-ui,sans-serif;font-size:9px;letter-spacing:.17em;color:rgba(241,237,229,.32);text-transform:uppercase}
#reality{z-index:50;background:var(--paper);color:var(--paperText)}.fact{position:absolute;margin:0;font-size:clamp(52px,8vw,140px);line-height:.98;letter-spacing:-.05em;font-weight:400;opacity:0}.fact1{font-size:clamp(28px,4vw,62px);left:7vw;top:18vh;max-width:12em;line-height:1.35}.fact2{left:8vw;top:40vh}.fact3{right:9vw;top:37vh}.fact4{left:8vw;bottom:12vh;font-size:clamp(35px,5vw,80px)}.fact5{right:9vw;bottom:11vh;font-size:clamp(42px,6vw,96px);color:#6d553f}
#reveal{z-index:60;background:#0b0c0c}.revealFilm{position:absolute;right:-6vw;top:-5vh;height:110vh;width:48vw;object-fit:cover;filter:grayscale(.95) sepia(.12) brightness(.42) contrast(1.08);opacity:.7}.revealShade{position:absolute;inset:0;background:linear-gradient(90deg,#090a0a 0%,rgba(9,10,10,.93) 42%,rgba(9,10,10,.32) 74%,rgba(9,10,10,.55) 100%)}.recall{position:absolute;z-index:4;font-size:clamp(25px,3vw,48px);line-height:1.65;letter-spacing:-.02em;color:rgba(241,237,229,.72);opacity:0}.r1{left:8vw;top:17vh}.r2{left:35vw;top:40vh}.r3{left:9vw;bottom:18vh}.r4{right:10vw;bottom:13vh}.switchWord{display:inline-block;position:relative;min-width:1.15em;margin:0 .05em;color:#d2a274}.switchWord i,.switchWord b{font-style:normal;font-weight:400;display:inline-block;transition:none}.switchWord b{position:absolute;left:0;top:0;opacity:0;color:#d2a274}
#ending{z-index:70;background:#07090a}.endingCopy{position:absolute;left:7vw;bottom:13vh}.endingCopy h2{font-weight:400;font-size:clamp(54px,8vw,130px);line-height:1;letter-spacing:-.05em;margin:0;opacity:0}.endingCopy p{font-size:clamp(15px,1.5vw,24px);color:rgba(241,237,229,.48);margin:28px 0 0;opacity:0}
#progressTrack{position:absolute;left:31px;right:31px;bottom:20px;height:1px;background:rgba(255,255,255,.08);z-index:130;pointer-events:none}#progressFill{display:block;width:0;height:100%;background:rgba(235,222,205,.5)}
@media(max-width:900px){body{height:1350vh}.tinyMark{display:none}#topChrome{padding:18px 20px}.introTitleWrap{left:7vw;top:32vh;width:86vw}#introTitle{font-size:clamp(52px,14vw,90px)}.introFrag{display:none}.premiseLine{font-size:clamp(30px,8vw,56px);max-width:82vw}.p1,.p3{left:8vw}.p2,.p4{right:8vw}.memoryLabel{left:6vw;top:10vh}.m1{left:5vw;top:28vh;width:37vw;height:33vh}.m2{left:46vw;top:18vh;width:28vw;height:28vh}.m3{right:4vw;top:48vh;width:30vw;height:38vh}.m4{left:43vw;top:55vh;width:29vw;height:27vh}.m5{left:15vw;top:14vh;width:40vw;height:23vh}.m6{right:10vw;bottom:8vh;width:30vw;height:24vh}.m7{left:6vw;bottom:7vh;width:34vw;height:24vh}.m8{display:none}.m9{right:6vw;bottom:34vh;width:30vw;height:12vh}.revealFilm{width:70vw}.r1{left:7vw}.r2{left:24vw}.r4{right:6vw}.distanceCopy{width:86vw}.fact2{left:7vw}.fact3{right:7vw}.endingCopy{left:7vw;bottom:18vh}.endingCopy h2{font-size:clamp(52px,15vw,90px)}}
@media(prefers-reduced-motion:reduce){#grain{animation:none}.memory{transition:none!important}}