:root{color-scheme:dark;--ink:#111210;--ivory:#e9e5db;--warm:#bbae91;--serif:"STSong","Songti SC","SimSun",serif;--ease:cubic-bezier(.19,1,.22,1)}
.film-cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;transition:opacity .4s}.film-frame.ready .film-cover{opacity:0}.film-frame video{position:relative;z-index:1}.film-loading{position:absolute;inset:0;z-index:2;place-items:center;background:#0003;pointer-events:none}.film-loading:not([hidden]){display:grid}.film-spinner{width:40px;height:40px;border:2px solid #eee5d34d;border-top-color:#fff7e5;border-radius:50%;box-shadow:0 0 18px #0005;animation:film-spin .85s linear infinite}.film-frame #film-error{z-index:3;inset:0;margin:0;padding:24px;background:#0b0c0aed;align-content:center;font-size:14px;line-height:1.8}.film-frame #film-error:not([hidden]){display:grid;place-content:center;gap:12px}@keyframes film-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.film-spinner{animation:none}.film-cover{transition:none}}
*{box-sizing:border-box}html,body{margin:0;min-width:300px;background:var(--ink);color:var(--ivory)}body{font-family:"Microsoft YaHei",Arial,sans-serif}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible{outline:1px solid #eee0bc;outline-offset:7px}button:disabled{opacity:.25;cursor:default}button{touch-action:manipulation}body.locked{overflow:hidden}#room{transition:filter .85s,opacity .85s,transform 1.1s var(--ease);transform-origin:65% 65%}body.locked #room{filter:blur(9px);opacity:.16;transform:scale(.96)}
.masthead{height:102px;position:absolute;inset:0 0 auto;display:flex;align-items:center;justify-content:space-between;padding:0 5.5vw;z-index:20}.wordmark{display:flex;align-items:center;gap:15px;font-family:var(--serif);font-size:20px;letter-spacing:3px}.room-mark{width:15px;height:23px;border:1px solid #c5bea7;position:relative}.room-mark:after{content:"";position:absolute;height:27px;left:4px;top:-3px;border-left:1px solid #c5bea7;transform:rotate(12deg)}nav{display:flex;gap:39px}nav button{font-size:14px;letter-spacing:3px;padding:12px 0}nav button span{margin-left:8px}
.hero{height:100svh;min-height:780px;max-height:1250px;position:relative;isolation:isolate;overflow:hidden;background:radial-gradient(ellipse at 66% 59%,#34302530 0%,transparent 55%)}.hero:after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.028;z-index:7;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' d='M0 0h160v160H0z'/%3E%3C/svg%3E")}.hero-title{position:absolute;left:6.2%;top:23%;z-index:5;pointer-events:none}h1{font-family:var(--serif);font-size:clamp(90px,10.4vw,174px);font-weight:400;line-height:1.24;letter-spacing:-.065em;margin:0;color:#e4e1d8}h1 span{letter-spacing:.02em}h1 i{font-style:normal;font-size:.43em;margin-left:.04em;color:#a88f65}
.installation{position:absolute;width:650px;left:64%;top:50%;height:min(800px,94%);transform:translate(-50%,-46%)}.spiral{position:absolute;inset:4% 0 18%;z-index:3;touch-action:pan-x;cursor:grab;user-select:none}.spiral:active{cursor:grabbing}.spiral-card{position:absolute;left:50%;top:47%;width:152px;height:168px;padding:0;border-radius:9px;will-change:transform,opacity;isolation:isolate;overflow:hidden;text-align:left;background:#39382d;box-shadow:0 10px 28px #0008;transform-origin:center}.spiral-card img{width:100%;height:100%;object-fit:cover;pointer-events:none;transition:filter .5s,transform .65s var(--ease)}.spiral-card:after{content:"";position:absolute;inset:40% 0 0;background:linear-gradient(transparent,#090a09d9)}.card-meta{position:absolute;left:12px;right:10px;bottom:13px;z-index:2}.card-age{font-size:23px;font-family:Georgia,serif;line-height:1.1}.card-age small{font:10px "Microsoft YaHei",sans-serif;margin-left:3px}.card-title{font-size:10px;display:block;letter-spacing:1px;margin-top:5px;color:#f0ede5}.play-mark{position:absolute;width:28px;height:28px;border:1px solid #fff7;right:10px;top:10px;border-radius:50%;display:grid;place-items:center;font-size:8px;z-index:2;opacity:0;transition:opacity .25s,transform .4s;transform:scale(.75);background:#10110f30}.spiral-card:hover .play-mark,.spiral-card:focus-visible .play-mark{opacity:1;transform:scale(1)}.spiral-card:hover img{filter:brightness(1.14);transform:scale(1.055)}
.beam{position:absolute;left:50%;top:0;height:86%;width:160px;transform:translateX(-50%);background:linear-gradient(transparent,rgba(239,220,172,.035) 13%,rgba(236,219,170,.12) 94%,transparent);clip-path:polygon(48% 0,52% 0,100% 100%,0 100%);filter:blur(4px);z-index:1;pointer-events:none}.beam-core{position:absolute;inset:0;left:calc(50% - 1px);width:2px;background:linear-gradient(transparent,#f2e8cb9c 40%,#f3e4b98c 88%,transparent);box-shadow:0 0 16px 5px #e4d1a72e}.light-pool{position:absolute;left:50%;bottom:9%;width:530px;height:100px;background:radial-gradient(ellipse,#e4c99526,transparent 67%);transform:translateX(-50%);filter:blur(12px)}.dust{position:absolute;inset:12% 20% 20%;opacity:.3;pointer-events:none;background-image:radial-gradient(circle at 22% 32%,#e2d6b5 0 1px,transparent 1.4px),radial-gradient(circle at 77% 73%,#e2d6b5 0 1px,transparent 1.3px),radial-gradient(circle at 46% 54%,#e2d6b5 0 .7px,transparent 1px);background-size:130px 173px,183px 237px,270px 170px;animation:dust 18s linear infinite}@keyframes dust{to{transform:translateY(-40px)}}
.book-rest{position:absolute;left:50%;bottom:2%;width:460px;height:260px;transform:translateX(-50%);z-index:4;perspective:1000px}.book-button{display:block;width:100%;height:100%;padding:0;position:relative;filter:drop-shadow(0 42px 18px #000b)}.mini-book{position:absolute;inset:0;display:block;transform:rotateX(54deg) rotateZ(-7deg);transform-style:preserve-3d;transition:transform 1s var(--ease)}.book-button:hover .mini-book,.book-button:focus-visible .mini-book{transform:translateY(-12px) rotateX(46deg) rotateZ(-5deg)}.book-cover{position:absolute;inset:-5px -7px -10px;background:#302b22;border:1px solid #68573f;border-radius:5px 9px 10px 5px;box-shadow:0 4px #201c17,0 7px #342a20;background-image:repeating-linear-gradient(80deg,transparent 0 2px,#e2c88e10 2px 3px)}.page-stack{position:absolute;top:1px;bottom:-5px;width:50%;background:repeating-linear-gradient(#ad9e81 0 1px,#dfd5bc 1px 3px);border-radius:2px 3px 8px 6px;box-shadow:0 4px 3px #0005}.left-stack{left:0;transform:skewY(1.8deg)}.right-stack{right:0;transform:skewY(-1.8deg)}.book-leaf{position:absolute;top:0;bottom:0;width:50%;background:#e7dfcb;display:flex;align-items:center;justify-content:center;transform-style:preserve-3d}.leaf-left{left:0;transform-origin:right center;transform:rotateY(6deg);background:linear-gradient(90deg,#d7cbb5,#efe9d9 20%,#e3d9c4 88%,#9e8d70)}.leaf-right{right:0;transform-origin:left center;transform:rotateY(-6deg);background:linear-gradient(90deg,#918069,#e4d9c4 10%,#eee6d5 75%,#cbbba0)}.book-leaf img{width:80%;height:auto;display:block;box-shadow:0 1px 4px #5143335c;filter:saturate(.83)}.book-leaf>span{position:absolute;bottom:20px;font:9px Georgia,serif;color:#6c6454;letter-spacing:1px}.book-binding{position:absolute;left:49.5%;top:1%;bottom:0;width:1%;background:linear-gradient(90deg,#0000,#47382387,#0000);box-shadow:0 0 10px #28200e50;pointer-events:none}.turning-leaf{position:absolute;left:50%;width:50%;height:100%;background:linear-gradient(90deg,#c9bca0,#ede5d1 15%,#e9e0c9);transform-origin:left center;transform:rotateY(-6deg);backface-visibility:hidden;opacity:0;display:flex;align-items:center;justify-content:center}.turning-leaf img{width:80%;box-shadow:0 2px 4px #0003}.book-button:hover .turning-leaf,.book-button:focus-visible .turning-leaf{animation:page-peek 1.9s var(--ease) infinite}@keyframes page-peek{0%,100%{transform:rotateY(-8deg);opacity:0}12%{opacity:1}60%{transform:rotateY(-65deg);opacity:1}95%{opacity:1}}
.chapter-focus{position:absolute;left:6.7%;bottom:17%;z-index:5}#focus-age{font:italic 58px Georgia,serif;color:#c5b89d;letter-spacing:-4px}.age-unit{margin-left:10px;font-family:var(--serif);font-size:17px;color:#b7aa90}.chapter-focus p{font-family:var(--serif);font-size:20px;letter-spacing:4px;margin:10px 0 0;color:#c9c4b9}.hero-foot{position:absolute;bottom:34px;left:6.7%;right:5.5%;display:flex;justify-content:space-between;align-items:center;z-index:10}.chapter-index{display:flex;gap:19px}.chapter-index button{font:12px Georgia,serif;color:#aaa89e;position:relative;min-width:28px;padding:12px 3px}.chapter-index button:after{content:"";position:absolute;bottom:3px;left:50%;width:3px;height:3px;border-radius:50%;background:#e0d2b3;opacity:0}.chapter-index button.active{color:#f7eed8}.chapter-index button.active:after{opacity:1}.icon-button{font-size:13px;width:36px;height:36px;border:1px solid #6a665942;border-radius:50%;color:#c9c2b2}
.overlay{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;color:var(--ivory);overflow:hidden;opacity:0;transition:opacity .5s}.overlay::backdrop{background:#080a08b8;backdrop-filter:blur(2px)}.overlay.is-visible{opacity:1}.overlay-top{position:absolute;top:4%;left:7%;right:5%;display:flex;align-items:center;justify-content:space-between}.overlay-top>div{display:flex;align-items:baseline;gap:20px}.overlay-top span{font:18px Georgia,serif;color:#b5aa94}.overlay h2{font:26px var(--serif);letter-spacing:3px;margin:0}.close-button{width:44px;height:44px;font:32px Arial;font-weight:200;border:1px solid #e2d8c12b;border-radius:50%;z-index:3}.close-button:hover{background:#fff1}.film-frame{width:min(1120px,86vw,calc((100svh - 220px)*16/9));aspect-ratio:16/9;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:#0b0c0a;box-shadow:0 25px 120px #0008;border-radius:4px;overflow:hidden}.film-frame video{width:100%;height:100%;display:block;opacity:0;transition:opacity .4s}.film-frame.ready video{opacity:1}.film-frame p{position:absolute;inset:30%;text-align:center}.film-frame p button{text-decoration:underline}.film-footer{position:absolute;bottom:5%;width:230px;left:50%;transform:translateX(-50%);display:flex;justify-content:space-between;align-items:center}.film-footer button{font-size:24px;padding:12px}.film-footer span{font:13px Georgia,serif;color:#aaa28e;letter-spacing:3px}.album-overlay{background:#121310}.album-overlay>.close-button{position:absolute;right:4%;top:4%;color:#ece7dc}.album-overlay iframe{width:100%;height:100%;border:0;display:block}#transition-layer{position:fixed;inset:0;z-index:1000000;pointer-events:none}.flying-cover{position:fixed;overflow:hidden;box-shadow:0 20px 100px #0009;transform-origin:center;background:#161712}.flying-cover img{width:100%;height:100%;object-fit:cover;display:block}.flying-book{position:fixed;perspective:1300px;filter:drop-shadow(0 40px 30px #000b)}.flying-book .mini-book{transition:none}
@media(min-width:1600px){.installation{transform:translate(-50%,-46%) scale(1.12)}}
@media(max-width:1050px) and (min-width:701px){.installation{left:67%;width:560px;transform:translate(-50%,-46%) scale(.86)}h1{font-size:11vw}.hero-title{left:5%;top:25%}.chapter-focus{bottom:22%}.book-rest{bottom:-2%}}
@media(max-width:700px){.masthead{height:76px;padding:0 25px}.wordmark{font-size:16px;letter-spacing:2px;gap:12px}nav{gap:24px}nav button{font-size:12px;letter-spacing:1px}.hero{min-height:860px;height:100svh;max-height:none}.hero-title{top:106px;left:25px;right:20px;z-index:2}h1{font-size:clamp(60px,15vw,100px);line-height:1.08;letter-spacing:-.02em}h1 br{display:none}h1 i{font-size:.28em;margin-left:0}h1 span{letter-spacing:-.02em}.installation{left:50%;top:205px;transform:translateX(-50%);width:100%;max-width:480px;height:600px}.spiral{inset:1% 0 18%}.book-rest{width:320px;height:190px;bottom:0}.light-pool{width:340px;bottom:0}.beam{top:0;height:85%;width:110px}.chapter-focus{top:181px;left:28px;bottom:auto;pointer-events:none}#focus-age{font-size:32px;letter-spacing:-2px}.age-unit{font-size:12px;margin-left:7px}.chapter-focus p{font-size:12px;letter-spacing:2px;margin:4px 0 0}.hero-foot{left:25px;right:25px;bottom:20px}.chapter-index{gap:9px}.chapter-index button{font-size:11px;min-width:24px}.book-leaf>span{bottom:14px;font-size:7px}.overlay-top{top:4%;left:6%;right:5%}.overlay-top>div{gap:12px}.overlay h2{font-size:18px;letter-spacing:1px}.overlay-top span{font-size:14px}.film-frame{width:100vw;border-radius:0}.film-footer{bottom:12%}.album-overlay>.close-button{top:18px;right:18px;width:36px;height:36px}.close-button{width:37px;height:37px;font-size:27px}}
@media(max-width:360px){.masthead{padding:0 20px}nav{gap:17px}.installation{height:570px;top:208px}.book-rest{width:280px;height:176px}.hero{min-height:830px}.chapter-index{gap:4px}.hero-title{left:20px}h1{font-size:14.6vw}.chapter-focus{left:24px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
/* The flight is a manual popover so it stays above modal dialogs. */
#transition-layer{margin:0;padding:0;border:0;max-width:none;max-height:none;width:100%;height:100%;background:transparent;overflow:visible}
#transition-layer::backdrop{background:transparent;pointer-events:none}
@media(min-width:701px){.hero{min-height:700px}.installation{height:min(740px,96%);top:46.5%}.spiral{inset:10% 0 19%;}.spiral-card{top:50%}.book-rest{bottom:0}}
.album-overlay>.close-button{color:#493e32;border-color:#493e3245}
@media(max-width:700px){.hero{min-height:840px}.chapter-focus{display:none}.installation{height:590px}}
@media(max-width:360px){.hero{min-height:830px}.installation{height:570px}}