/* Cloth bindings, small brass labels and warm paper. The room stays central. */
@font-face{font-family:RoomSong;src:url('../shared-ui/fonts/serif-sc.woff2') format('woff2');font-display:swap}
:root{--song:RoomSong,'Songti SC','SimSun',serif;--display:RoomDisplay,Georgia,serif;--sans:'Microsoft YaHei',system-ui,sans-serif}
.masthead{background:linear-gradient(#21352bb8,transparent);padding:23px 3.4vw}.masthead .home img{filter:brightness(1.4) saturate(.7)}.masthead nav{gap:30px;margin-right:3.6vw}.masthead nav button{font:13px var(--song);min-height:42px;letter-spacing:.15em}.room-grain{opacity:.018}
.hotspot{background:#ece6cfed;color:#36483b;padding:9px 15px;border:0;border-radius:2px 2px 9px 2px;box-shadow:0 3px 12px #13251b35;letter-spacing:.10em;font:13px var(--song);backdrop-filter:blur(8px);transform:translate(-50%,-130%)}
.hotspot:before{width:4px;height:4px;background:#a78f60;border:0;border-radius:50%}.hotspot:after{content:'';position:absolute;top:100%;left:50%;height:17px;width:1px;background:#e5dbc0cc;box-shadow:0 1px 4px #182d23}.hotspot:hover{background:#fff8e3;box-shadow:0 5px 20px #13251b50}.hotspot:active{transform:translate(-50%,-130%)}
.selection{top:50%;right:3.5vw;width:clamp(230px,20vw,300px);padding:24px 25px 19px;color:#344a3c;background:linear-gradient(100deg,#f3eddbf5,#e5ddc7f0);border:1px solid #f4eedb99;border-left:3px solid #9b9071;box-shadow:1px 2px 0 #a99d7e,0 12px 38px #182e233b;backdrop-filter:blur(14px)}
.selection:before{display:none}.selection .eyebrow:empty{display:none}.selection h2{font:23px/1.6 var(--song);letter-spacing:.15em;margin:0 0 17px}.selection button{border-top:1px solid #6a745326;min-height:56px;padding:13px 0;display:flex;align-items:center;justify-content:space-between;gap:15px}.selection button em{font:italic 28px var(--display)}.selection button span{font:12px var(--song);opacity:.78;white-space:nowrap;float:none}.selection button:hover{color:#1d3527;transform:translateX(2px)}.selection button[aria-pressed=true]{color:#805f32}.selection[data-place=music] button em{font:15px/1.7 var(--song)}.selection[data-place=music] h2:after{content:'♪';float:right;color:#9d8254;font:25px Georgia}.selection[data-place=cabinet] button em,.selection[data-place=desk] button em{font:18px var(--song)}
.room-footer{left:3.4vw;right:3.4vw;gap:20px;justify-content:flex-start;font:12px var(--song);letter-spacing:.06em}#room-hint:empty{display:none}#room-hint{max-width:35%}#overview{border:0;border-bottom:1px solid #e4dab384;background:#263b3180;backdrop-filter:blur(8px);padding:11px 15px;border-radius:2px}#quality{margin-left:auto}#quality,#motion{font:11px var(--song);min-height:40px;text-shadow:0 1px 6px #122a1d}
.room-time-control{display:flex;gap:8px;align-items:center;font-size:11px;order:4;padding-left:18px;border-left:1px solid #ded2ad50}.room-time-control>span{opacity:.64}.room-time-control select{font:12px var(--song);color:#eee7d2;background:#273e337d;border:0;border-bottom:1px solid #d4c6a175;border-radius:0;padding:8px 3px;min-height:40px;cursor:pointer}.room-time-control option{color:#34483a;background:#eee7d2}
#welcome{top:auto;bottom:16vh;left:50%;transform:translateX(-50%);background:none}#welcome button{border:1px solid #e0d3ac70;padding:16px 23px;background:#273e339c;backdrop-filter:blur(10px);text-align:center}body.entered #welcome{transform:translateX(-50%);visibility:hidden}#loading{background:#34483d}#loading p{font:25px var(--song)}#loading span{letter-spacing:.12em}#scene{outline-offset:-8px}
.room-fallback #scene{display:none}.room-fallback #room{background:linear-gradient(#203d3577,#263d34bb),url('assets/mountains.webp') center/cover}.room-fallback .selection{right:50%;transform:translate(50%,-50%);width:min(390px,85vw)}.room-fallback .room-footer{display:none}
.drawer-tray{width:min(1100px,91vw);height:min(820px,87svh);overflow:visible;color:#384335;box-shadow:0 35px 110px #101d1799;background:transparent}.drawer-tray::backdrop{background:#17251e77;backdrop-filter:blur(4px)}.drawer-tray[open]{animation:tray-arrive .45s cubic-bezier(.2,.7,.2,1) both}.tray-rim{height:100%;display:flex;flex-direction:column;border:14px solid #8a6a4c;border-top-color:#ab8e65;border-bottom-color:#6a503d;border-radius:3px;background:repeating-linear-gradient(2deg,#cfbb9600 0,#65513c09 2px,#cfbb9600 4px,#cfbb9600 11px),#c7b795;box-shadow:inset 0 9px 22px #4e3a2933,0 0 0 1px #c2a776}
.tray-rim>header{display:flex;align-items:center;justify-content:space-between;padding:20px 30px 15px;border-bottom:1px solid #796b5033;gap:20px}.tray-kicker{font:11px var(--sans);letter-spacing:.18em;color:#746449}.tray-rim h2{font:26px var(--song);letter-spacing:.10em;margin:5px 0 0}.tray-close{font:12px var(--song);padding:12px 0 12px 15px;min-height:44px}.tray-close span{font:26px var(--display);margin-left:12px}.tray-scroll{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#8b7c5d transparent;padding:29px 30px 36px}.tray-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px 25px;align-items:start}
.tray-piece{display:block;padding:0;text-align:left;width:100%;color:#354235;transition:transform .25s}.tray-mount{height:183px;padding:12px;background:#f1ebd9;box-shadow:1px 3px 4px #68543c40,0 0 0 1px #fdf7e6;display:flex;align-items:center;justify-content:center;flex-direction:column;position:relative;gap:10px}.tray-piece:nth-child(3n+1) .tray-mount{rotate:-.65deg}.tray-piece:nth-child(3n) .tray-mount{rotate:.55deg}.tray-mount img{width:100%;height:100%;object-fit:contain}.tray-piece-title{display:block;font:16px/1.6 var(--song);margin-top:13px}.tray-piece small{display:block;font:italic 17px var(--display);color:#786b51;margin-top:3px}.tray-piece:hover{transform:translateY(-4px)}.tray-piece:focus-visible{outline-color:#526d54;outline-offset:9px}.tray-mark{font:italic 38px var(--display);color:#7c876d}.tray-paper-title{font:16px/1.6 var(--song);text-align:center;max-width:90%}.tray-type-text{align-items:flex-start;padding:22px}.tray-type-text:after{content:'';display:block;width:73%;height:20px;background:repeating-linear-gradient(transparent 0 7px,#83907740 7px 8px)}.tray-type-text .tray-mark{font:12px var(--song);color:#8b917a}.tray-type-text .tray-paper-title{text-align:left;font-size:20px}.tray-rim>footer{display:flex;align-items:center;justify-content:space-between;padding:12px 27px;border-top:1px solid #796b5033;background:#bba47d45;font:12px var(--song)}.tray-rim>footer button{min-height:42px;min-width:42px}.tray-rim>footer nav{display:flex;align-items:center;gap:18px}.tray-more{letter-spacing:.08em}.tray-empty{font:15px var(--song)}
@keyframes tray-arrive{from{opacity:0;transform:translateY(12px) scale(.975)}to{opacity:1;transform:none}}
@media(max-width:1000px){.selection{right:22px;width:238px;padding:20px}.tray-mount{height:155px}.tray-grid{gap:25px 20px}.masthead nav{gap:20px}}
@media(max-width:760px){
 .masthead{padding:16px 18px;align-items:flex-start;height:105px}.home img{width:40px}.home>span{font-size:21px}.home i{display:none}.masthead nav{position:fixed;bottom:max(17px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);width:max-content;max-width:94vw;margin:0;gap:21px;padding:0 22px;background:#eee7d2ed;color:#344a3c;border:1px solid #f9f1d8b0;box-shadow:0 7px 26px #15251b45;backdrop-filter:blur(14px);border-radius:3px}.masthead nav button{min-height:46px;font-size:13px;letter-spacing:.08em}.masthead nav button:hover{color:#715d36}.masthead nav button.active{border-bottom:2px solid #99845b}
 #sound{min-height:42px;gap:0!important}#sound .score-bookmark{width:40px;height:34px}#sound-label{font-size:11px}.selection{left:18px;right:18px;top:auto;bottom:129px;transform:none;width:auto;max-height:37svh;overflow:auto;padding:16px 21px}.selection h2{font-size:20px;margin:0 0 8px}.selection button{min-height:44px;padding:7px 0}.selection button em{font-size:24px}.selection button span{font-size:11px}
 .room-footer{left:18px;right:18px;bottom:76px;gap:9px;flex-wrap:wrap}#room-hint{display:none}#overview{font-size:11px;padding:8px 11px;min-height:38px}#quality{margin-left:auto}#quality,#motion{font-size:10px;min-height:34px}.room-time-control{padding-left:8px;gap:4px}.room-time-control>span{display:none}.room-time-control select{font-size:11px;min-height:35px;padding:6px 0}.hotspot{font-size:11px;padding:9px 11px}.hotspot:after{height:13px}
 .drawer-tray{width:95vw;height:90svh}.tray-rim{border-width:8px}.tray-rim>header{padding:16px 18px 12px}.tray-rim h2{font-size:23px}.tray-kicker{font-size:10px}.tray-close{font-size:11px}.tray-scroll{padding:22px 18px}.tray-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:25px 18px}.tray-mount{height:145px;padding:9px}.tray-piece-title{font-size:14px;margin-top:10px}.tray-piece small{font-size:15px}.tray-type-text{padding:14px}.tray-type-text .tray-paper-title{font-size:17px}.tray-rim>footer{padding:7px 15px}.room-fallback .selection{left:25px;right:25px;top:25%;bottom:auto;transform:none;width:auto;max-height:60svh}
}
@media(max-width:380px){.room-footer{gap:6px}.room-time-control{border:0;padding-left:0}#quality{font-size:9px}.masthead nav{gap:16px;padding:0 18px}.tray-mount{height:125px}}
@media(prefers-reduced-motion:reduce){.drawer-tray[open]{animation:none}.tray-piece,.hotspot{transition:none}}
@media(max-width:760px){.selection[data-place=music]{max-height:29svh}}

/* The open drawer stays in view until a work is deliberately opened. */
.selection[data-place=open-drawer]{top:auto;bottom:16vh;transform:none;padding:18px 23px;width:225px}
.selection[data-place=open-drawer] h2{font-size:18px;margin:0 0 8px}
.selection[data-place=open-drawer] button{min-height:43px;padding:10px 0}
.selection[data-place=open-drawer] button em{font:16px var(--song)}
@media(max-width:760px){.selection[data-place=open-drawer]{left:18px;right:18px;bottom:126px;width:auto;max-height:24svh;padding:12px 20px}.selection[data-place=open-drawer] h2{font-size:17px}.selection[data-place=open-drawer] button{min-height:37px;padding:6px 0}}

#book-caption{position:fixed;z-index:14;pointer-events:none;max-width:248px;padding:9px 13px;background:#eee7d5;color:#344a3c;box-shadow:0 4px 14px #14291f36;border-left:2px solid #9b9071;font:13px/1.7 Georgia,"Songti SC",SimSun,serif;letter-spacing:.035em}
#book-caption[hidden]{display:none}
/* Keep the bookcase visible above its compact mobile index. */
@media(max-width:760px){.selection[data-place=shelf]{max-height:170px;padding:10px 17px;bottom:129px}.selection[data-place=shelf] h2{font-size:16px;margin:0 0 3px}.selection[data-place=shelf] #selection-body{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}.selection[data-place=shelf] button{min-height:42px;gap:6px}.selection[data-place=shelf] button em{font-size:17px}.selection[data-place=shelf] button span{font-size:11px}}