:root{color-scheme:dark;--ink:#f2f0e9;--muted:#b5b7ae;--line:rgba(242,240,233,.3);--black:#111210;--ease:cubic-bezier(.2,.7,.2,1)}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--black);color:var(--ink)}
body{font:14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}
button,input{font:inherit}button{color:inherit;cursor:pointer}button{background:none;border:0;padding:0}button:focus-visible,input:focus-visible{outline:2px solid var(--ink);outline-offset:6px}button:disabled{cursor:wait;opacity:.45}button:hover{color:#fff}button,section{ -webkit-tap-highlight-color:transparent}button[hidden],[hidden]{display:none!important}h1,h2,p,figure{margin:0}h1,h2{font-family:Georgia,"Times New Roman",serif;font-weight:400;line-height:1.06;letter-spacing:-.035em}canvas{display:block;touch-action:none;width:100%;height:100%}#room{position:fixed;inset:0}#room canvas{transition:opacity 1s;opacity:0}body[data-loaded="true"] #room canvas{opacity:1}
.edge-shade{position:fixed;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.6),transparent 18%,transparent 61%,rgba(0,0,0,.7));z-index:1}
.masthead{position:fixed;z-index:8;top:35px;left:48px;right:48px;display:flex;align-items:center;gap:28px;text-shadow:0 1px 16px #0006}.wordmark{font:32px/1 Georgia,serif;letter-spacing:.32em}.brand-note{font-size:8px;line-height:1.8;letter-spacing:.26em;border-left:1px solid var(--line);padding-left:25px}.room-identity{margin-left:auto;display:flex;align-items:center;gap:20px;font-size:13px}.fine{font-size:10px;letter-spacing:.15em;color:var(--muted)}.text-button{font-size:11px;color:#d2d4cb;margin-left:28px}.text-button span{margin-left:10px}
.eyebrow{font-size:10px;font-weight:500;letter-spacing:.22em;line-height:1.5;color:#d0d1c8}.quiet{font-size:11px;color:var(--muted);line-height:1.6}
#portrait{position:fixed;inset:0;z-index:3;pointer-events:none}body[data-state="portrait"] .brand-note,body[data-state="portrait"] #about-button{display:none}body[data-state="portrait"] .edge-shade{background:linear-gradient(180deg,#0005,transparent 16%,transparent 56%,#000000b3)}
.portrait-entry{position:absolute;right:6%;bottom:158px;pointer-events:auto;min-width:190px}#enter-room{display:flex;align-items:center;justify-content:space-between;gap:37px;width:100%;padding:12px 0;border-bottom:1px solid #fff8;font-size:13px;text-shadow:0 1px 10px #0008;transition:border-color .2s}#enter-room:hover{border-color:white}#enter-room>span:last-child{font-size:22px;line-height:1}#load-status{position:absolute;right:0;top:58px;white-space:nowrap;font-size:10px}
#coordinates{position:fixed;inset:0;pointer-events:none;z-index:2}.coordinate{position:absolute;left:0;top:0;display:flex;align-items:center;gap:13px;padding:14px;transform:translate(-50%,-50%);white-space:nowrap;pointer-events:auto;text-shadow:0 1px 12px #000,0 0 5px #0006;transition:opacity .25s;text-align:left}.coordinate .point{width:8px;height:8px;border-radius:50%;background:#fff;position:relative;flex:none;box-shadow:0 0 0 5px #fff1}.coordinate .point:after{content:"";position:absolute;inset:-9px;border:1px solid #ffffff85;border-radius:50%;transition:transform .25s}.coordinate:hover .point:after{transform:scale(1.3)}.coordinate .coordinate-copy{display:grid;gap:1px}.coordinate small{font-size:9px;color:#ddd;letter-spacing:.08em}.coordinate strong{font-size:13px;font-weight:450}.coordinate.empty{opacity:.35}.coordinate.featured .point:after{inset:-12px}.coordinate .alignment-mark{font-size:13px;color:#f2eedc;margin-left:1px}
#perspectives{position:fixed;z-index:4;top:111px;right:48px;display:flex;gap:22px}#perspectives button{font-size:11px;color:#ccc;padding-bottom:7px;border-bottom:1px solid transparent;text-shadow:0 1px 7px #000}#perspectives button[aria-current="true"]{color:#fff;border-color:#eee}#explore-caption{position:fixed;bottom:210px;left:48px;z-index:2;text-shadow:0 2px 14px #0008;pointer-events:none}#explore-caption h1{font-size:43px;margin:10px 0 13px}#explore-hint{font-size:12px;color:#d4d6cd}#room-tools{position:fixed;z-index:4;bottom:38px;right:48px;display:flex;align-items:center;gap:23px;color:#bbb;font-size:10px}#room-tools button{font-size:17px}#room-tools button span{font-size:10px;margin-left:5px}.back-button{position:fixed;top:116px;left:48px;z-index:7;display:flex;align-items:center;gap:13px;font-size:20px;text-shadow:0 2px 10px #000}.back-button span{font-size:11px}.back-button:hover span{text-decoration:underline;text-underline-offset:5px}
#timeline{position:fixed;z-index:4;bottom:81px;left:48px;right:48px}.timeline-heading{display:flex;justify-content:space-between;align-items:center;font-size:9px;letter-spacing:.18em;margin-bottom:18px;color:#ddd}.timeline-heading output{letter-spacing:.06em;font-variant-numeric:tabular-nums}.timeline-track{position:relative;height:22px}.timeline-track:before{content:"";position:absolute;left:0;right:0;top:10px;height:1px;background:#ffffff65}input[type="range"]{-webkit-appearance:none;appearance:none;display:block;width:100%;height:22px;background:transparent;margin:0;cursor:ew-resize}input[type="range"]::-webkit-slider-runnable-track{height:1px;background:transparent}input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;width:11px;height:11px;background:#f2efdd;border-radius:50%;margin-top:-5px;box-shadow:0 0 0 5px #ffffff12,0 0 14px #e7d7a660}input[type="range"]::-moz-range-thumb{width:11px;height:11px;background:#f2efdd;border:0;border-radius:50%}#time{position:relative;z-index:2}#time-ticks{position:absolute;inset:0;pointer-events:none}#time-ticks i{position:absolute;top:8px;width:2px;height:5px;background:#eee9;transform:translateX(-1px)}.timeline-years{display:flex;justify-content:space-between;padding-top:7px}.timeline-years button{font-size:12px;font-variant-numeric:tabular-nums;color:#d5d5cb}.timeline-years button span{font-size:8px;letter-spacing:.1em;margin-left:8px;color:#bbb}
#memories{position:fixed;left:48px;right:48px;bottom:69px;z-index:5}.memory-heading{display:flex;align-items:end;justify-content:space-between;max-width:700px;margin-bottom:20px}.memory-heading h2{font-size:31px;margin-top:7px}.memory-heading>p{font-size:10px;color:#ddd}#thumbnails{display:flex;gap:13px;overflow-x:auto;padding:4px 4px 11px;margin-left:-4px;max-width:calc(100vw - 96px)}.thumbnail{position:relative;width:120px;flex:none;text-align:left}.thumbnail img{display:block;width:120px;height:76px;object-fit:cover;border:1px solid #ffffff55;transition:border-color .2s,transform .2s}.thumbnail:hover img{border-color:#fff;transform:translateY(-3px)}.thumbnail span{font-size:10px;display:block;color:#d7d7cd;margin-top:8px}.thumbnail em{position:absolute;right:6px;top:50px;background:#161713d9;font-size:9px;font-style:normal;padding:2px 5px;color:white}.thumbnail[aria-pressed="true"] img{outline:1px solid #fff;outline-offset:3px}
#photo-layer{position:fixed;inset:0;z-index:2;pointer-events:none;opacity:0;transition:opacity .45s var(--ease)}#aligned-photo{display:block;width:100%;height:100%;object-fit:cover;opacity:var(--past,1)}body[data-state="compare"] #photo-layer,body[data-state="photo"] #photo-layer{opacity:1}body[data-state="photo"] #photo-layer{inset:16% 22% 24%;}body[data-state="photo"] #aligned-photo{object-fit:contain;filter:drop-shadow(0 15px 35px #0005)}body[data-state="photo"] .edge-shade{z-index:2;background:#0005}body[data-state="compare"] .edge-shade{z-index:3;background:linear-gradient(180deg,#0006,transparent 18%,transparent 55%,#000c)}.frame-corner{position:absolute;width:20px;height:20px;opacity:.65}.tl{top:94px;left:30px;border-top:1px solid white;border-left:1px solid white}.br{bottom:30px;right:30px;border-bottom:1px solid white;border-right:1px solid white}body[data-state="photo"] .frame-corner{display:none}#comparison{position:fixed;inset:0;z-index:4;pointer-events:none}.comparison-caption{position:absolute;left:48px;bottom:75px}.comparison-caption h1{font-size:42px;margin:12px 0 17px}#photo-date{font-size:12px;color:#d3d4cb}#blend-control{position:absolute;bottom:85px;left:50%;width:350px;transform:translateX(-50%);pointer-events:auto}.blend-labels{display:flex;justify-content:space-between;margin-bottom:9px}.blend-labels button{font-size:11px;letter-spacing:.12em;padding:8px 0}.blend-labels button span{color:#b5b8b0;font-size:9px;margin:0 7px;letter-spacing:0}#blend{background:linear-gradient(#fff8,#fff8) center/100% 1px no-repeat}#blend-control>p{text-align:center;font-size:10px;letter-spacing:.05em;color:#c5c7be;margin-top:14px}body[data-state="photo"] #comparison-title{font-size:30px}body[data-state="photo"] .comparison-caption{bottom:56px}
#status{position:fixed;z-index:10;left:50%;bottom:26px;transform:translateX(-50%);font-size:12px;background:#151611ed;border:1px solid #fff4;padding:14px 22px;max-width:80vw}dialog{background:#171915;color:var(--ink);border:1px solid #ffffff30;width:480px;max-width:calc(100vw - 40px);padding:45px}dialog::backdrop{background:#0008}dialog h2{font-size:46px;margin:22px 0}dialog p{font-size:13px;color:#bfc2b7;line-height:1.8;margin-top:16px}dialog .eyebrow{font-size:9px}dialog hr{border:0;border-top:1px solid #ffffff20;margin:28px 0}.dialog-close{position:absolute;right:21px;top:15px;font-size:28px}.no-script{position:fixed;inset:0;z-index:20;display:grid;place-items:center;background:#111}
@media(max-height:760px){#explore-caption{bottom:185px}#timeline{bottom:65px}#room-tools{bottom:23px}}
@media(max-width:850px){.masthead{left:25px;right:25px;top:25px}.brand-note,.room-identity .fine{display:none}.text-button{margin-left:5px}.wordmark{font-size:25px}.room-identity{font-size:11px}#perspectives{right:25px;gap:14px;top:85px}.back-button{left:25px;top:86px}#explore-caption,#memories{left:25px}#timeline{left:25px;right:25px}#room-tools{right:25px}#room-tools>span{display:none}.comparison-caption{left:25px;bottom:165px}.comparison-caption h1{font-size:32px}#blend-control{bottom:50px;width:min(350px,80vw)}body[data-state="photo"] #photo-layer{inset:20% 8% 28%}}
.language-toggle{display:flex;align-items:center;gap:8px;padding-left:20px;border-left:1px solid var(--line);font-size:11px;white-space:nowrap;color:#aaa}.language-toggle .active{color:var(--ink)}.language-toggle:hover{color:var(--ink)}#about-label{margin-left:0}.blend-labels b{font-weight:400}
html[lang="zh-CN"] h1,html[lang="zh-CN"] h2{font-family:"Songti SC","STSong",serif;letter-spacing:.01em;line-height:1.3}html[lang="zh-CN"] .eyebrow{letter-spacing:.14em}html[lang="zh-CN"] #slide-place{letter-spacing:.08em}
@media(max-width:850px){.language-toggle{padding-left:10px;gap:5px}.masthead{gap:15px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important}}

.slide-copy{position:absolute;left:6%;bottom:118px;text-shadow:0 1px 18px #0007;transition:opacity .2s linear}.slide-copy h1{font-size:clamp(40px,4.2vw,68px);letter-spacing:-.02em;line-height:1.1}#slide-note{display:flex;align-items:baseline;gap:16px;margin-top:16px;font-size:14px;color:#ebe9e1}#slide-note time{font-size:11px;letter-spacing:.14em;color:#c9cabf;font-variant-numeric:tabular-nums}
.portrait-entry{position:absolute;right:6%;bottom:122px;pointer-events:auto;min-width:200px}#enter-room{display:flex;align-items:center;justify-content:space-between;gap:37px;width:100%;padding:12px 0;border-bottom:1px solid #fff8;font-size:13px;text-shadow:0 1px 10px #0008;transition:border-color .2s}#enter-room:hover{border-color:white}#enter-room>span:last-child{font-size:22px;line-height:1}#load-status{position:absolute;right:0;top:58px;white-space:nowrap;font-size:10px}
#slides{position:absolute;left:6%;right:calc(6% + 96px);bottom:40px;display:grid;grid-template-columns:repeat(4,1fr);gap:14px;pointer-events:auto}#slides button{display:grid;gap:10px;padding:12px 0 6px;text-align:left;font-size:11px;letter-spacing:.06em;color:#a9aba2;text-shadow:0 1px 8px #000a;transition:color .2s}#slides button:hover,#slides button[aria-current="true"]{color:#fff}#slides button:disabled{opacity:.5}#slides i{display:block;height:1px;background:#ffffff38;position:relative;overflow:hidden}#slides i:after{content:"";position:absolute;inset:0;background:#f2f0e9;transform-origin:left;transform:scaleX(var(--progress,0))}#slides button[aria-current="true"] i{background:#ffffff55}
#cover{position:fixed;inset:0;z-index:20;background:#0d0c0a;opacity:0;visibility:hidden;transition:opacity .6s var(--ease),visibility 0s .6s}#cover:before{content:"";position:absolute;inset:-80px;background:url(assets/cover.jpg) center/cover;filter:blur(48px) brightness(.55)}#cover img{position:relative;display:block;width:100%;height:100%;object-fit:contain}body[data-cover="true"] #cover{opacity:1;visibility:visible;transition:opacity .6s var(--ease)}
#cover-toggle{position:fixed;z-index:21;right:6%;bottom:46px;font-size:11px;letter-spacing:.06em;color:#d9dad1;padding:10px 0 4px;border-bottom:1px solid #ffffff55;text-shadow:0 1px 8px #000a;transition:opacity .4s,color .2s,border-color .2s}#cover-toggle:hover{border-color:#fff}body:not([data-state="portrait"]):not([data-cover="true"]) #cover-toggle{display:none}body[data-cover="true"] #cover-toggle{opacity:0}body[data-cover="true"][data-pointer="active"] #cover-toggle,body[data-cover="true"] #cover-toggle:focus-visible{opacity:.8}
@media(max-height:760px){.slide-copy{bottom:100px}.portrait-entry{bottom:104px}#slides{bottom:26px}#cover-toggle{bottom:32px}}
@media(max-width:850px){.slide-copy{left:25px;bottom:178px}.slide-copy h1{font-size:38px}#slide-note{flex-direction:column;gap:6px;font-size:13px}.portrait-entry{left:25px;right:auto;bottom:96px;min-width:180px}#slides{left:25px;right:25px;bottom:26px;gap:10px}#slides button{font-size:10px;letter-spacing:0}#cover-toggle{right:25px;bottom:101px}}
