:root{--paper:#f0eadc;--gold:#d4b779;--ink:#293025;--line:rgba(240,234,220,.23);--daylight:.62}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#171c16;color:var(--paper);font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft Yahei",sans-serif}button,a,input{-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,[tabindex]:focus-visible{outline:2px solid var(--gold);outline-offset:6px}button:disabled{opacity:.35;cursor:default}[hidden]{display:none!important}#experience{height:100svh;min-height:620px;position:relative;overflow:hidden;isolation:isolate;background:#22281e}.scene-bg{position:absolute;inset:-2%;z-index:-5;background-position:center;background-size:cover;transition:opacity 1.3s,filter 1.3s,transform 1.8s;will-change:transform;filter:brightness(.76) saturate(.74)}#exterior{background-image:url('assets/courtyard.jpg')}#interior{background-image:url('assets/study.jpg');opacity:0;transform:scale(1.05)}body[data-scene="2"] #interior,body[data-scene="3"] #interior{opacity:1;transform:scale(1)}body[data-scene="2"] #exterior,body[data-scene="3"] #exterior{opacity:0}body[data-scene="1"] #exterior{filter:brightness(calc(.6 + var(--daylight)*.3)) saturate(.82);transform:scale(1.06)}body[data-scene="3"] #interior{filter:brightness(.47) saturate(.6);transform:scale(1.08)}.shade{position:absolute;inset:0;z-index:-3;pointer-events:none;background:linear-gradient(90deg,rgba(15,23,17,.8),rgba(17,23,17,.4) 36%,rgba(17,23,17,.05) 65%),linear-gradient(0deg,rgba(11,18,13,.92),transparent 29%,transparent 72%,rgba(12,19,13,.65))}#effects{position:absolute;inset:0;z-index:-2;pointer-events:none}#effects canvas{display:block}.grain{position:absolute;inset:0;z-index:10;pointer-events:none;opacity:.035;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='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' opacity='.5' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}header{position:absolute;top:0;left:0;right:0;padding:32px 4.2%;display:flex;align-items:center;justify-content:space-between;z-index:15}.brand{display:flex;gap:15px;align-items:center;letter-spacing:.18em;font-family:"Songti SC","SimSun",serif;font-size:23px}.seal{display:grid;place-content:center;width:45px;height:48px;background:#874a38;color:#f1deba;border:1px solid #b78057;font-size:14px;letter-spacing:.12em;line-height:1.35}.brand-en{font-family:Arial,sans-serif;display:block;font-size:8px;letter-spacing:.19em;color:#bdbba8;margin-top:8px}nav{display:flex;gap:31px;align-items:center;font-size:12px;color:#e1ddcd}nav button{padding:10px 0}nav button span:not(.sound-bars){margin-left:8px}.sound-button{display:flex;align-items:center;gap:8px}.sound-bars{display:flex;align-items:center;gap:3px;height:16px}.sound-bars i{width:2px;height:6px;background:var(--gold)}.sound-bars i:nth-child(2){height:14px}.sound-bars i:nth-child(3){height:10px}.sound-button[aria-pressed="true"] i{animation:sound .7s ease-in-out infinite alternate}.sound-bars i:nth-child(2){animation-delay:.3s!important}.sound-bars i:nth-child(3){animation-delay:.15s!important}@keyframes sound{to{height:3px}}
.narrative{position:absolute;left:8%;top:28%;max-width:460px;z-index:4;transition:opacity .3s,transform .5s}.narrative.changing{opacity:0;transform:translateY(12px)}.eyebrow{display:flex;align-items:center;gap:14px;color:var(--gold);font-size:11px;letter-spacing:.24em;margin:0 0 25px}.line{height:1px;width:36px;background:var(--gold)}h1{font-family:"Songti SC","STSong","SimSun",serif;font-size:clamp(48px,5.1vw,82px);font-weight:400;line-height:1.27;letter-spacing:.09em;margin:0 0 25px;text-shadow:0 2px 30px #17201955}.chapter-copy{font-size:13px;line-height:2.1;letter-spacing:.08em;color:#d1d0bd;max-width:340px}.primary{min-width:188px;border:1px solid #bda573;background:#e6dcc5;color:#273123;font-size:12px;letter-spacing:.12em;padding:16px 23px;margin-top:25px;display:inline-flex;gap:42px;justify-content:space-between;align-items:center;transition:background .25s,transform .25s}.primary:hover{background:#f7edda;transform:translateY(-2px)}.primary span{font-family:Arial;font-size:18px}.micro{font-size:9px;color:#a9ac98;letter-spacing:.12em;margin-top:20px}.door-interaction{position:absolute;left:61%;top:36%;width:170px;height:310px;z-index:3;transform:translateX(-50%)}.door-handle{height:225px;position:relative;touch-action:none;cursor:ew-resize;perspective:700px;border:8px solid #281c11;box-shadow:0 0 60px #e4bb6b22;background:radial-gradient(ellipse,#daba7b,#85622d 60%,#2c2416)}.door-left,.door-right{position:absolute;top:0;bottom:0;width:50%;background:repeating-linear-gradient(90deg,transparent 0,transparent 17px,#19140970 19px,#543c20 20px),linear-gradient(105deg,#4b3522,#302317 60%,#5b4328);box-shadow:inset 0 0 12px #0008;transition:transform .08s linear;backface-visibility:hidden}.door-left{left:0;transform-origin:left;transform:rotateY(calc(var(--opening,0)*-110deg))}.door-right{right:0;transform-origin:right;transform:rotateY(calc(var(--opening,0)*110deg))}.door-knob{position:absolute;top:53%;width:9px;height:13px;border:2px solid #bd9952;border-radius:50%;pointer-events:none;opacity:calc(1 - var(--opening,0))}.door-knob.one{left:40%}.door-knob.two{right:40%}.door-caption{text-align:center;font-size:10px;letter-spacing:.15em;color:#e2d2ad;white-space:nowrap;margin-top:22px}.tiny-mark{display:block;font-size:17px;margin-bottom:8px}.opening-track{height:2px;width:74px;background:#d8bf7a30;margin:12px auto}.opening-track i{display:block;height:2px;background:var(--gold);width:0}.camera-widget{position:absolute;right:4.2%;bottom:153px;z-index:6;width:202px}.camera-button{border:1px solid var(--line);background:#1c231c77;backdrop-filter:blur(12px);width:100%;padding:13px;display:flex;align-items:center;justify-content:space-between;font-size:11px;letter-spacing:.04em}.camera-icon{color:var(--gold);font-size:18px}.camera-note{display:block;text-align:center;color:#b4b6a3;font-size:9px;letter-spacing:.05em;margin-top:11px}.camera-button[aria-pressed="true"]{border-color:#d4b77999}.camera-button:disabled{cursor:wait;opacity:.6}#cameraPreview{position:relative;height:115px;margin-top:12px;background:#162018;border:1px solid var(--line);overflow:hidden}video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}#trackingLabel{position:absolute;bottom:5px;left:7px;font-size:9px;background:#172019b0;padding:4px;color:#e9dfc5}.hand-cursor{position:absolute;z-index:25;width:28px;height:28px;border:1px solid #e8c880;border-radius:50%;background:#dcc28a30;pointer-events:none;transform:translate(-50%,-50%);box-shadow:0 0 22px #e9bf5e44}.hand-cursor::after{content:'';position:absolute;inset:9px;background:var(--gold);border-radius:50%}.hand-cursor.dwelling{outline:3px solid #d4b779}
footer{position:absolute;bottom:0;left:4.2%;right:4.2%;height:101px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:18px;z-index:12}.location{font-size:9px;color:#abaf99;letter-spacing:.07em;white-space:nowrap}.location-dot{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--gold);margin-right:9px}.chapter-nav{display:flex;gap:35px;height:100%;align-items:center}.chapter-nav button{font-size:12px;position:relative;height:100%;letter-spacing:.1em;color:#b4b7a3;white-space:nowrap}.chapter-nav small{font-family:Georgia,serif;font-size:10px;margin-right:9px;opacity:.65}.chapter-nav button[aria-pressed="true"]{color:#f2e4c1}.chapter-nav button span{height:2px;position:absolute;top:-1px;width:0;background:var(--gold);left:0;transition:width .5s}.chapter-nav button[aria-pressed="true"] span{width:100%}.journal-button{font-size:10px;letter-spacing:.08em;white-space:nowrap}.journal-button output{font-family:Georgia,serif;margin:0 8px;color:#b6ad8f}.journal-button>span{color:var(--gold)}.status{position:absolute;bottom:112px;left:8%;font-size:10px;letter-spacing:.08em;color:#d3c39c;max-width:60%;transition:opacity .5s;pointer-events:none;opacity:0}.status.visible{opacity:1}.hotspot{position:absolute;z-index:5;display:flex;align-items:center;gap:10px;white-space:nowrap}.hotspot>span{display:grid;place-items:center;width:33px;height:33px;border:1px solid #dfc4869c;border-radius:50%;background:#20271d65;color:#ead8aa;font-size:19px;box-shadow:0 0 0 7px #dfc4860c;transition:box-shadow .25s}.hotspot:hover>span{box-shadow:0 0 0 12px #dfc48625;background:#b99b5d;color:#1d251b}.hotspot em{font-size:11px;letter-spacing:.12em;font-style:normal;background:#1c241a88;padding:7px 10px;backdrop-filter:blur(8px)}.hotspot.visited>span{background:#dac28b;color:#1d251b}.roof{left:54%;top:29%}.pond{left:72%;top:73%}.threshold{left:49%;top:60%}.book-hotspot{left:64%;top:62%}.light-hint{position:absolute;top:77%;left:57%;font-size:10px;letter-spacing:.12em;color:#d7c49a}.light-control{position:absolute;bottom:159px;left:8%;align-items:center;gap:12px;display:flex;font-size:9px;color:#b9bca6}.light-control label{color:#dbd7bb;margin-right:6px}.light-control input{width:105px;accent-color:var(--gold)}body[data-scene="1"] .narrative,body[data-scene="2"] .narrative{top:25%}body[data-scene="3"] .narrative{top:21%}.timeline{position:absolute;left:48%;top:29%;width:40%;list-style:none;padding:0;margin:0;z-index:5}.timeline li{border-bottom:1px solid var(--line);padding:19px 0;display:flex;align-items:center;gap:30px}.timeline li span{font-family:Georgia,serif;font-size:33px;font-weight:400;color:#e0c68f}.timeline p{font-size:12px;letter-spacing:.1em;color:#d0d0bb}
dialog{border:1px solid #d1bd9155;background:#eee7d6;color:#283022;padding:54px;max-width:650px;width:calc(100% - 36px);max-height:88svh;overflow:auto;box-shadow:0 25px 100px #0009}dialog::backdrop{background:#0d160ee0;backdrop-filter:blur(9px)}dialog h2{font-family:"Songti SC","SimSun",serif;font-size:32px;line-height:1.5;font-weight:400;letter-spacing:.05em;margin:0 0 24px}dialog .eyebrow{color:#8d6b37;font-size:10px;margin-bottom:20px}dialog p{font-size:13px;line-height:1.95;color:#66705e}dialog .dialog-lead{font-size:14px;line-height:2;color:#515c48}.close{position:absolute;right:20px;top:15px;font-size:28px;color:#716e5b;z-index:2;width:32px;height:32px}.privacy{font-size:10px!important;line-height:1.9!important;color:#7c816d!important;border-top:1px solid #a69b7b55;padding-top:20px;margin-top:24px}.guide-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:27px}.guide-grid b{font-size:12px;color:#6c5430}.guide-grid p{font-size:12px;margin-top:8px}.shortcuts{font-size:10px!important}.source-link{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #bcb39b80;padding:19px 0;font-size:12px;color:#755c33}.artifact-number{display:block;font-family:Georgia,serif;font-size:73px;line-height:1;color:#c4b58e;margin-bottom:24px}.recorded{margin-top:25px;font-size:10px;color:#8a7d58;display:flex;justify-content:space-between}.book-dialog{max-width:880px;padding:0;background:#ded3b7;overflow:visible}.book-page{display:grid;grid-template-columns:1fr 1fr;min-height:420px}.book-left{padding:45px;background:linear-gradient(90deg,#e8deca,#ddd0b3);box-shadow:inset -12px 0 20px #75622c18}.book-year{display:block;font-family:Georgia,serif;font-size:76px;color:#aa8b54;margin-top:50px}.book-left>p:not(.eyebrow){font-family:"Songti SC",serif;font-size:22px;line-height:1.8;color:#73684f}.book-rule{display:block;width:45px;height:1px;background:#ae9668;margin-top:30px}.book-right{padding:45px 42px;background:linear-gradient(90deg,#e6dbc1,#f1e8d7);display:flex;flex-direction:column}.book-right h2{font-size:27px}.book-right>p:not(.eyebrow){flex:1;font-size:13px;line-height:2.1}.book-right>a{font-size:10px;color:#8c7343;margin:10px 0 20px}.book-controls{display:flex;align-items:center;justify-content:space-between;border-top:1px solid #ab987c55;padding-top:18px}.book-controls button{width:35px;height:35px;border:1px solid #a18b6180}.book-controls output{font-family:Georgia,serif;font-size:12px;color:#8f7d59}.dark{background:#303c2b;color:#e9dfc7}.dark:hover{background:#4c5b40}.journal-list{padding:0;list-style:none;border-top:1px solid #baa98355}.journal-list li{padding:11px 0;border-bottom:1px solid #baa98355;font-size:12px;display:flex;justify-content:space-between;color:#6e745f}.journal-list .unread{opacity:.5}.text-button{font-size:11px;padding:20px;color:#8c7048}body.loading .scene-bg{opacity:0}.scene-bg{transition:opacity 1.3s,transform 1.8s,filter 1.3s}
@media(min-width:1600px){.door-interaction{width:195px;top:38%}.door-handle{height:270px}.narrative{left:9%}}
@media(max-width:1050px){.location{display:none}.narrative{left:6%;max-width:350px}h1{font-size:60px}.chapter-copy{font-size:12px}.camera-widget{bottom:135px;width:180px}.door-interaction{left:67%}.chapter-nav{gap:24px}.timeline{left:50%;width:43%}.timeline li{gap:18px}.timeline p{font-size:11px}}
@media(max-width:650px){#experience{min-height:720px;height:100svh}header{padding:22px 6%;align-items:flex-start}.brand{font-size:20px;gap:10px}.brand-en{font-size:6px;letter-spacing:.09em}.seal{width:36px;height:42px;font-size:12px}nav{gap:16px;font-size:10px}nav #sourceButton{display:none}.sound-button #soundText{display:none}.narrative{top:20%!important;left:8%;max-width:87%}h1{font-size:49px;line-height:1.25;margin-bottom:17px}.eyebrow{font-size:9px;margin-bottom:18px;letter-spacing:.15em}.chapter-copy{font-size:11px;max-width:270px}.primary{margin-top:14px;padding:13px 18px;min-width:157px;font-size:11px}.micro{font-size:8px;margin-top:14px}.shade{background:linear-gradient(90deg,#111b14bb,#111b1433),linear-gradient(0deg,#101b14,transparent 35%,transparent 66%,#101b1466)}#exterior{background-position:58% center}#interior{background-position:60% center}.door-interaction{left:73%;top:48%;width:109px;height:210px}.door-handle{height:157px;border-width:5px}.door-caption{font-size:8px;margin-top:13px}.door-caption .tiny-mark{font-size:12px}.camera-widget{right:6%;bottom:104px;width:160px}.camera-button{padding:10px;font-size:10px}.camera-note{font-size:8px}.camera-icon{font-size:15px}#cameraPreview{height:90px}.camera-widget:has(#cameraPreview:not([hidden])){bottom:102px}.camera-widget:has(#cameraPreview:not([hidden])) .camera-note{display:none}footer{left:6%;right:6%;height:78px;gap:10px}.chapter-nav{gap:17px}.chapter-nav button{font-size:10px}.chapter-nav small{display:block;font-size:9px;margin-right:0;margin-bottom:5px}.journal-button{font-size:9px}.journal-button output{margin:0 4px;font-size:9px}.status{bottom:190px;left:8%;max-width:83%;font-size:9px}.roof{left:49%;top:51%}.threshold{left:29%;top:68%}.pond{left:58%;top:77%}.hotspot em{font-size:9px}.hotspot>span{width:27px;height:27px;font-size:16px}.light-control{left:8%;bottom:110px;display:block;max-width:120px;font-size:8px}.light-control label{display:block;margin-bottom:8px}.light-control input{width:67px;vertical-align:middle}.book-hotspot{left:52%;top:64%}.light-hint{left:22%;top:75%;font-size:9px}body[data-scene="3"] .narrative{top:18%!important}body[data-scene="3"] h1{font-size:39px}body[data-scene="3"] .chapter-copy{max-width:290px}.timeline{left:8%;top:47%;width:72%}.timeline li{padding:9px 0;gap:21px}.timeline li span{font-size:25px}.timeline p{font-size:10px;margin:7px 0}.timeline li:last-child p{max-width:155px}.timeline li:last-child{padding-bottom:10px}.guide-grid{gap:15px}.guide-grid p{font-size:11px}dialog{padding:35px 25px}dialog h2{font-size:25px}.book-page{display:block;min-height:0}.book-left{padding:25px}.book-left .eyebrow{margin-bottom:10px}.book-year{font-size:44px;margin-top:15px}.book-left>p:not(.eyebrow){display:none}.book-rule{display:none}.book-right{padding:25px;min-height:280px}.book-right h2{font-size:25px;margin-bottom:14px}.book-right .eyebrow{margin-bottom:10px}.book-dialog{overflow:auto}.artifact-number{font-size:55px}.text-button{padding:18px 0}.journal-button>span{display:none}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
/* The wooden leaves align with the opening in the courtyard artwork. */
@media(min-width:651px){.door-interaction{left:56%;top:47.5%;width:10.2vw;max-width:180px;min-width:120px;height:auto}.door-handle{height:25svh;min-height:180px;max-height:290px;border-width:5px}}
@media(max-width:650px){body[data-scene="0"] #exterior{background-position:49% center}.door-interaction{left:73%;top:48%;width:109px}.door-handle{height:157px}}
@media(max-width:650px){#experience{min-height:620px}nav{gap:13px}nav #sourceButton{display:block}nav #sourceButton span{display:none}}
@media(min-width:1051px){.narrative{max-width:560px;width:41%}}
@media(min-width:651px) and (max-width:1050px){.narrative{max-width:420px;width:44%}}
body[data-scene="1"] #exterior{filter:brightness(calc(.95 - var(--daylight)*.38)) saturate(.82)}
@media(max-width:650px){.timeline{top:54%}}
@media(max-width:650px) and (max-height:760px){body[data-scene="3"] .narrative{top:17%!important}body[data-scene="3"] h1{font-size:32px}body[data-scene="3"] .primary,body[data-scene="3"] .micro{display:none}.timeline{top:49%}.timeline li{padding:7px 0}.timeline li span{font-size:23px}.timeline p{font-size:9px}}