@font-face{font-family:RoomDisplay;src:url('../shared-ui/fonts/cormorant.woff2') format('woff2');font-display:swap}
:root{color-scheme:light;--paper:#eee7d2;--ink:#33483d;--muted:#6f7465;--wood:#74574a;--gold:#b8a179;--serif:'Songti SC','Noto Serif CJK SC','SimSun',serif}
*{box-sizing:border-box}html,body{height:100%;margin:0;overflow:hidden}body{background:#263e35;color:var(--paper);font-family:var(--serif);-webkit-font-smoothing:antialiased}button,a,select{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;color:inherit;background:none;border:0}button:focus-visible,a:focus-visible,select:focus-visible{outline:2px solid #b69c69;outline-offset:6px}button:disabled{opacity:.32;cursor:default}a{color:inherit;text-decoration:none}button{transition:color .2s,transform .4s}button:active{transform:translateY(1px)}[hidden]{display:none!important}#room,#scene{position:absolute;inset:0;width:100%;height:100%;touch-action:none}#scene{display:block}.room-grain{position:fixed;inset:0;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='.83' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.6' filter='url(%23n)'/%3E%3C/svg%3E");z-index:2;mix-blend-mode:soft-light}
.masthead{position:fixed;top:0;left:0;right:0;z-index:5;display:flex;align-items:center;justify-content:space-between;padding:24px 4vw;background:linear-gradient(#20362ddb,transparent);pointer-events:none}.masthead>*{pointer-events:auto}.home{display:flex;align-items:center;gap:16px}.home img{width:68px;filter:brightness(1.7) saturate(.65)}.home>span{font-size:24px;letter-spacing:.16em}.home i{font-size:12px;font-style:normal;letter-spacing:.3em;border-left:1px solid #c8c5a747;padding-left:17px;color:#ddd5ba}.masthead nav{display:flex;gap:40px;margin-left:auto;margin-right:5vw}.masthead nav button{font-size:14px;letter-spacing:.22em;padding:8px 0;border-bottom:1px solid transparent}.masthead nav button.active{border-bottom-color:#c2bd9c}.masthead nav button:hover{color:white}.masthead #sound{display:flex;gap:10px;align-items:center;font-size:12px}#sound>span:first-child{font-size:26px;line-height:1;display:inline-block}#sound.playing>span:first-child{animation:hum 3s ease-in-out infinite}@keyframes hum{50%{transform:rotate(-8deg) translateY(-2px)}}
#loading{position:fixed;z-index:20;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;background:#33483d;transition:opacity .9s}#loading p{font-size:27px;letter-spacing:.3em;margin:0 0 20px}#loading span{font-size:12px;letter-spacing:.3em;opacity:.65}#loading i{display:block;width:140px;height:1px;background:#b9b39a;margin-top:26px;transform-origin:left;animation:load 2s infinite ease-in-out}@keyframes load{0%{transform:scaleX(.05);opacity:.4}90%,100%{transform:scaleX(1);opacity:1}}
#welcome{position:fixed;z-index:4;top:50%;left:9%;transform:translateY(-43%);transition:opacity .55s,transform .8s;pointer-events:none;text-shadow:0 2px 16px #24382aaa}#welcome p{font-size:12px;letter-spacing:.16em;color:#dbd5be}#welcome h1{font-size:clamp(28px,3.2vw,52px);line-height:1.9;font-weight:400;letter-spacing:.12em;margin:20px 0 40px}#welcome em{font-style:normal;font-size:.75em}#welcome button{pointer-events:auto;border-bottom:1px solid #d3c8a570;padding:12px 0;min-width:170px;text-align:left;font-size:14px;letter-spacing:.1em}#welcome button span{float:right;margin-left:40px;font-size:22px}body.entered #welcome{opacity:0;transform:translateY(-40%);pointer-events:none}body.entered #welcome button{pointer-events:none}
#hotspots{position:absolute;inset:0;pointer-events:none;z-index:3}.hotspot{position:absolute;pointer-events:auto;transform:translate(-50%,-50%);font-size:12px;letter-spacing:.18em;display:flex;gap:9px;align-items:center;padding:10px 16px;background:#273d35c9;color:#f7f0da;border:1px solid #bcb09270;border-radius:2px;box-shadow:0 4px 15px #172c262f;opacity:0;transition:opacity .6s,background .2s;white-space:nowrap}.hotspot:before{content:'';width:4px;height:4px;border:1px solid #ddd4b1;border-radius:50%}.hotspot:hover{background:#354f40}.entered .hotspot{opacity:1}.focusing .hotspot{opacity:0;pointer-events:none}.room-footer{position:fixed;left:4vw;right:4vw;bottom:23px;display:flex;justify-content:space-between;align-items:center;z-index:5;font-size:12px;letter-spacing:.13em;color:#e0dcc9}.room-footer #room-hint{opacity:.78;text-shadow:0 1px 6px #15231a}#overview{padding:9px 16px;background:#293f35e0;border:1px solid #b6ad8c65}#motion{font-size:11px;opacity:.7}#motion:hover{opacity:1}
.selection{position:fixed;z-index:5;right:6vw;top:50%;transform:translateY(-45%);width:280px;padding:25px 25px 20px;background:#263d32e8;border:1px solid #9eac8661;box-shadow:0 18px 80px #17261b44;animation:sel .65s both}.eyebrow{font-size:11px;letter-spacing:.18em;opacity:.6}.selection h2{font-size:29px;font-weight:400;letter-spacing:.12em;margin:16px 0 23px}.selection button{display:block;text-align:left;width:100%;padding:13px 0;border-top:1px solid #dfd5b927}.selection button span{float:right;font-size:11px;opacity:.6}.selection button em{font-family:RoomDisplay,Georgia,serif;font-size:27px}.selection .select-note{font-size:12px;line-height:1.9;color:#d0c7ae}.selection button:hover{color:#fff;transform:translateX(3px)}@keyframes sel{from{opacity:0;translate:12px 0}to{opacity:1;translate:0 0}}
dialog{border:0;padding:0;color:var(--ink);background:none;max-width:none;max-height:none}dialog::backdrop{background:#1b302a88;backdrop-filter:blur(9px)}#reading{width:min(970px,88vw);height:88vh;box-shadow:0 28px 110px #14251dc7;border-radius:2px;overflow:visible}#reading[open]{animation:bookIn .65s cubic-bezier(.2,.8,.2,1) both}.reading-shell{height:100%;display:flex;flex-direction:column;padding:27px 56px 23px 65px;background:linear-gradient(90deg,#d9d0b9 0,#ede5cf 1.3%,#f2eddf 3%,#eee7d3 5%,#f3eddd 25%,#eee6d2 99%,#b0a48a 100%);position:relative;border:1px solid #baaf954f}.reading-shell:after{content:'';position:absolute;inset:7px -5px -7px 5px;border:1px solid #c7bc9e;background:#ded4bb;z-index:-1;box-shadow:2px 3px 0 #847960,4px 5px 0 #d4c8ae}.reading-top{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #40514038;padding-bottom:15px;font-size:12px;letter-spacing:.12em;color:#7c806b}.reading-top button span{font-size:20px;margin-left:7px}.book-head{display:flex;justify-content:space-between;align-items:center;padding:23px 0 19px}.book-head p{margin:0 0 8px;font-size:12px;letter-spacing:.1em;color:#787c67}.book-head h2{font-family:RoomDisplay,var(--serif);font-size:37px;font-weight:500;margin:0}.book-head select{background:transparent;border:0;border-bottom:1px solid #40514055;color:#59674e;font:12px var(--serif);padding:8px 0}#reading-scroll{overflow:auto;flex:1;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#a7ad8d transparent;padding:2px 30px 25px 0;outline:none}#reading-body{max-width:680px;margin:auto;font-size:18px;line-height:2.12;letter-spacing:.03em}#reading-body p{margin:0 0 1.15em;white-space:pre-wrap;overflow-wrap:anywhere}#reading-body .diary-paragraph:first-child:first-letter{font-size:1.4em}#reading-body a{border-bottom:1px solid #91967d;color:#536c5a}#reading-body .references{font-size:12px;line-height:1.8;margin:-5px 0 22px;color:#6f7964}#reading-body .references a{margin-right:14px;display:inline-block}#reading-body .record{border-top:1px solid #51604c24;padding:17px 0 8px}#reading-body .record header{font:12px/1.7 sans-serif;color:#7a806d;letter-spacing:.03em;margin-bottom:12px;display:flex;justify-content:space-between}#reading-body .record.thought{font-size:16px;color:#536151;padding-left:24px;border-left:1px solid #a0ac8c}#reading-body details{font-size:15px;color:#65715c;line-height:1.9;margin:20px 0}#reading-body summary{cursor:pointer;font-size:12px;padding:7px 0}#reading-body .letter-person{font-family:RoomDisplay,serif;font-size:26px;font-style:italic}#reading-body .letter{margin:0 0 30px;padding-left:20px;border-left:1px solid #8a9d7766}.reading-bottom{display:flex;justify-content:space-between;border-top:1px solid #40514033;padding-top:13px;font-size:12px;color:#68735e}.reading-bottom span{font-family:RoomDisplay,serif;font-size:17px;font-style:italic}#reading-body.turning{animation:pageIn .4s ease both}@keyframes pageIn{from{opacity:.25;transform:translateX(6px)}to{opacity:1;transform:none}}@keyframes bookIn{from{opacity:0;transform:translateY(35px) rotateX(8deg) scale(.93)}to{opacity:1;transform:none}}
#artwork{width:min(1200px,93vw);height:87vh;color:#eee6cd;overflow:visible;padding:50px 0 0;grid-template-columns:minmax(0,1fr) 300px;gap:45px;align-items:center}#artwork[open]{display:grid;animation:bookIn .7s both}#artwork::backdrop{background:#1a302aea;backdrop-filter:blur(9px)}.art-close{position:absolute;right:0;top:0;font-size:13px;letter-spacing:.12em}.art-image{height:100%;max-height:75vh;display:flex;justify-content:center;align-items:center;padding:12px}.art-image img{max-width:100%;max-height:100%;object-fit:contain;border:8px solid #e8dfc7;box-shadow:0 15px 65px #070f0ac4;transform:rotate(-.5deg)}.art-label>p:first-child{font-family:RoomDisplay,serif;font-size:24px;font-style:italic;color:#bfcaa9}.art-label h2{font-size:28px;font-weight:400;line-height:1.6;letter-spacing:.06em}.art-label>p{font-size:14px;line-height:2;color:#c9cdb9}.art-label button{font-size:25px;padding:12px 16px 12px 0}.art-label>span{font-family:RoomDisplay,serif;font-style:italic;padding-right:16px;color:#b2b994}.art-label #art-text{font:15px/2 var(--serif);white-space:pre-wrap;max-height:40vh;overflow:auto;scrollbar-width:thin}.art-image.empty{display:none}#artwork.text-only{width:min(750px,88vw);grid-template-columns:1fr}#artwork.text-only #art-text{max-height:57vh}#error{position:fixed;bottom:80px;left:50%;transform:translateX(-50%);background:#eee7d2;color:#33483d;padding:16px;z-index:25;max-width:700px}
@media(max-width:850px){.masthead{padding:20px}.home i{display:none}.masthead nav{gap:18px;margin-right:20px}.home img{width:40px}.home>span{font-size:18px}#welcome{left:7%}.selection{right:4%;width:240px}.reading-shell{padding:20px 24px 18px 32px}#reading-body{font-size:16px}#reading-scroll{padding-right:10px}#artwork{gap:20px;grid-template-columns:minmax(0,1fr) 230px}.room-footer #room-hint{max-width:45%;font-size:10px}.book-head h2{font-size:30px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
#sound .score-bookmark{width:53px;height:43px;overflow:visible}#sound .score-feed{animation:room-score-feed 12s linear infinite;animation-play-state:paused}#sound.playing .score-feed{animation-play-state:running}@keyframes room-score-feed{to{transform:translateY(-28px)}}