[hidden] { display:none !important; }
.entry-record { width:156px; height:156px; border:5px solid #151d2b; background:repeating-radial-gradient(circle,#111624 0 4px,#293044 5px 6px,#121724 7px 10px); box-shadow:0 0 0 2px #7e8ba5,0 12px 35px #080e21aa; animation:record-spin 24s linear infinite; }
.entry-record img { width:48% !important; height:48% !important; position:absolute; inset:26%; border:4px solid #e3bc68; border-radius:50%; object-fit:cover; }
.entry-record::after { content:''; position:absolute; inset:48%; border-radius:50%; background:#171d29; border:1px solid #e5c982; z-index:3; }
.entry-record:hover { animation-play-state:paused; }
.record-invitation { margin:22px 0 0; color:#faf0d7; font-size:14px; text-shadow:1px 2px #1d2337; }
.home .profile { transform:translateY(-3vh); }
.home .music-card { margin-top:40px; }
@keyframes record-spin { to { transform:rotate(360deg); } }
.room-world { min-height:100svh; background:#141625; color:#ebdfcb; font-family:'Zpix','Microsoft YaHei',sans-serif; animation:room-arrive .7s ease-out; }
@keyframes room-arrive { from { opacity:0; transform:scale(1.025); } to { opacity:1; transform:scale(1); } }
.room-world button,.room-reader button { color:inherit; font:inherit; cursor:pointer; }
.room-topbar { position:sticky; top:0; z-index:12; min-height:64px; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px clamp(12px,3vw,48px); background:#202337; border-bottom:1px solid #55506b; }
.room-topbar button,.room-dialogue button,.room-reader button { background:#292b42; border:1px solid #726680; padding:9px 14px; border-radius:2px; }
.room-topbar>span { font-size:18px; color:#ffe5a1; }
.room-topbar small { font-size:11px; color:#a6a0b5; margin-left:14px; }
.room-viewport { overflow-x:auto; overscroll-behavior-x:contain; }
.room-stage { width:min(100%,1440px); aspect-ratio:3/2; position:relative; margin:auto; background:#292039 url('./assets/ip/room/room-shell-v2.png') center / 100% 100% no-repeat; isolation:isolate; }
.room-stage::after { content:''; position:absolute; inset:0; pointer-events:none; box-shadow:inset 0 0 100px #090a2455; z-index:0; }
.room-interior { position:absolute; inset:0; }
.room-hotspot { position:absolute; z-index:2; background:transparent; border:0; padding:0; display:grid; place-items:center; color:#fff1ba; }
.room-hotspot i { position:absolute; width:25px; height:25px; border:1px solid #edcf8655; background:#181b3390; border-radius:50%; font-style:normal; box-shadow:0 0 14px #ffdc7220; transition:background .2s,transform .2s; }
.room-hotspot span { position:absolute; bottom:100%; white-space:nowrap; padding:6px 9px; background:#14162ee8; border:1px solid #867b85; opacity:0; transform:translateY(4px); transition:opacity .2s,transform .2s; font-size:12px; }
.room-hotspot:hover span,.room-hotspot:focus-visible span { opacity:1; transform:translateY(0); }
.room-hotspot:hover i { background:#725a38; transform:scale(1.15); }
.spot-window { left:3%; top:6%; width:20%; height:23%; }
.object-caption { position:absolute; top:100%; left:50%; transform:translateX(-50%); white-space:nowrap; color:#c7b9b0; font-size:11px; padding-top:8px; }
.room-host { position:absolute; left:62%; top:73%; width:11%; height:20%; border:0; background:transparent; z-index:3; }
.room-host img { width:100%; height:100%; object-fit:contain; image-rendering:pixelated; filter:drop-shadow(0 6px 3px #12122577); animation:host-breathe 4s ease-in-out infinite; }
.room-host span { font-size:10px; color:#e9ce89; }
@keyframes host-breathe { 50% { transform:translateY(-3px); } }
.room-dialogue { position:absolute; bottom:5%; left:24%; right:23%; z-index:8; background:#202034f2; border:2px solid #b49b73; box-shadow:5px 5px #10132199; padding:18px 22px; }
.dialogue-speaker { color:#ffe28d; font-size:13px; }
.room-dialogue p { font-size:16px; line-height:1.8; margin:10px 0 14px; min-height:2em; }
.room-dialogue>div { display:flex; justify-content:space-between; gap:8px; }
.room-dialogue button { font-size:12px; }
.room-dialogue button:last-child { background:#e2c98c; color:#342a36; border-color:#f6e3af; }
.room-footer { display:flex; justify-content:space-between; gap:12px; padding:16px 24px 80px; font-size:12px; color:#b3aabc; }
.room-music-button { position:fixed; bottom:18px; right:22px; z-index:16; background:#25283be8; border:1px solid #9d886d; padding:12px 18px; color:#f6dda1; }
.room-reader { position:fixed; width:min(820px,calc(100vw - 28px)); max-height:85svh; border:2px solid #988584; border-radius:3px; padding:22px; color:#ece0ce; background:#222338; font-family:'Zpix','Microsoft YaHei',sans-serif; box-shadow:12px 12px 0 #090c1b77; }
.room-reader::backdrop { background:#080d22aa; backdrop-filter:blur(3px); }
.room-reader>header { display:flex; justify-content:space-between; align-items:center; color:#d9bd7f; font-size:12px; }
.room-reader h2 { margin:12px 0 22px; font-size:26px; color:#ffe2a1; }
.room-reader p { line-height:1.9; color:#c8c0ca; white-space:pre-line; }
.room-reader button:hover { border-color:#f1d496; }
.room-cassettes { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.room-cassette { padding:8px !important; border:4px solid #657185 !important; border-bottom-width:13px !important; background:#393b4d !important; text-align:left; transition:transform .2s; }
.room-cassette:hover { transform:translateY(-4px) rotate(-1deg); }
.room-cassette img { width:100%; aspect-ratio:1.7; object-fit:cover; display:block; }
.room-cassette strong { display:block; margin:9px 2px 4px; font-size:14px; }
.room-cassette small { color:#bbb2b9; font-size:10px; }
.room-reader-cover { width:100%; max-height:330px; object-fit:contain; background:#101321; }
.room-reader video { width:100%; max-height:360px; background:#090d19; }
.room-reader-actions { display:flex; flex-wrap:wrap; gap:10px; margin:20px 0; }
.room-reader-actions a { padding:9px 14px; border:1px solid #726680; color:#ecce87; text-decoration:none; }
.room-gallery { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.room-gallery img { width:100%; aspect-ratio:1.3; object-fit:cover; }
.room-gallery-photo { padding:0 !important; border:4px solid #111c21 !important; background:#111c21 !important; min-width:0; box-shadow:3px 4px #0b111b66; }
.room-gallery-photo img { display:block; filter:grayscale(1) brightness(.82); transition:filter .25s; }
.room-gallery-photo:hover img,.room-gallery-photo:focus-visible img { filter:grayscale(0) brightness(1.05); }
/* Each cover is real content, composed under a reusable transparent frame. */
.room-work-wall { position:absolute; left:20%; top:22%; width:48%; height:32%; z-index:2; }
.room-wall-grid { position:relative; width:100%; height:100%; }
.room-framed { position:relative; display:block; aspect-ratio:3/2; padding:0; background:transparent; border:0; min-width:0; filter:drop-shadow(2px 5px 1px #110d2380); transition:transform .2s,filter .2s; }
.room-work-frame { position:absolute; transform:rotate(var(--frame-angle,0deg)); }
.room-work-frame:nth-child(1) { left:0; top:17%; width:28%; --frame-angle:-3deg; }
.room-work-frame:nth-child(2) { left:29%; top:-4%; width:21%; --frame-angle:2deg; }
.room-work-frame:nth-child(3) { left:53%; top:14%; width:25%; --frame-angle:-1.5deg; }
.room-work-frame:nth-child(4) { left:80%; top:0; width:24%; --frame-angle:1deg; }
.room-work-frame:nth-child(5) { left:3%; top:66%; width:25%; --frame-angle:2.5deg; }
.room-work-frame:nth-child(6) { left:33%; top:51%; width:24%; --frame-angle:-2deg; }
.room-work-frame:nth-child(7) { left:66%; top:60%; width:30%; --frame-angle:3deg; }
.room-frame-cover { position:absolute; left:17.6%; top:23.6%; width:64.8%; height:53%; object-fit:cover; background:#232038; }
.room-frame-border { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; image-rendering:pixelated; }
.room-frame-placeholder { display:grid; place-items:center; font-size:10px; color:#d4c8b7; }
.room-framed:hover,.room-framed:focus-visible { transform:translateY(-3px) rotate(var(--frame-angle,0deg)); filter:drop-shadow(0 0 5px #efce7b70); z-index:3; }
.room-frame-title { position:absolute; left:50%; top:92%; transform:translateX(-50%); width:max-content; max-width:200%; padding:5px 8px; background:#15182def; color:#ffe4a2; border:1px solid #ab9270; font-size:11px; opacity:0; pointer-events:none; }
.room-framed:hover .room-frame-title,.room-framed:focus-visible .room-frame-title { opacity:1; }
.room-wall-paging { position:absolute; top:100%; right:0; display:flex; align-items:center; justify-content:center; gap:10px; font-size:11px; margin-top:12px; }
.room-wall-paging button { border:1px solid #8e7c69; background:#252238e8; padding:5px 8px; }
.room-wall-empty { padding:20px; font-size:13px; color:#c0b2c2; }
.room-bookshelf { position:absolute; left:71%; top:16%; width:25%; aspect-ratio:1635/962; z-index:2; }
.room-bookshelf-base { display:block; width:100%; height:100%; image-rendering:pixelated; pointer-events:none; }
.room-book { position:absolute; padding:0; border:0; background:transparent; transition:filter .2s; }
.room-book img { display:block; width:100%; height:100%; image-rendering:pixelated; pointer-events:none; }
.room-book::after { content:''; position:absolute; inset:-4px -5px; }
.room-book span { position:absolute; left:50%; bottom:calc(100% + 8px); transform:translateX(-50%); white-space:nowrap; font-size:11px; color:#f1dfb6; padding:5px 8px; background:#251f35ed; border:1px solid #9b866b; opacity:0; pointer-events:none; }
.room-book:hover,.room-book:focus-visible { filter:brightness(1.3) drop-shadow(0 0 4px #efce7b60); z-index:3; }
.room-book:hover span,.room-book:focus-visible span { opacity:1; }
.room-gramophone { position:absolute; left:74%; top:50.5%; width:11%; aspect-ratio:1; padding:0; border:0; background:transparent; z-index:2; filter:drop-shadow(3px 4px 2px #160d2680); }
.gramophone-body { position:absolute; inset:0; width:100%; height:100%; image-rendering:pixelated; }
/* Flatten the container, rotate the circular child: the ellipse never wobbles. */
.gramophone-platter { position:absolute; left:31.2%; top:60.1%; width:39.4%; aspect-ratio:1; transform:scaleY(.23); transform-origin:50% 0; pointer-events:none; }
.gramophone-record { display:block; width:100%; height:100%; image-rendering:pixelated; animation:record-spin 7s linear infinite; animation-play-state:paused; }
.room-gramophone.is-playing .gramophone-record { animation-play-state:running; }
.room-gramophone:hover { filter:drop-shadow(0 0 7px #ecc56f50); }
.room-reader--gallery { width:min(1120px,calc(100vw - 32px)); background:#253a33; border:4px solid #b9a477; box-shadow:0 0 0 5px #15231f,12px 14px #090c1b77; }
.room-reader--gallery h2 { color:#f5ead0; margin-bottom:18px; }
.room-gallery--wall { grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.room-gallery--wall img { width:100%; aspect-ratio:16/9; object-fit:contain; background:#182323; }
.room-reader--photo { width:min(1200px,calc(100vw - 28px)); }
.room-reader--television { width:min(980px,calc(100vw - 28px)); border:10px solid #64596f; background:#141d29; box-shadow:0 0 0 3px #272337,10px 12px #080c1977; }
.room-reader--television video { display:block; max-height:58svh; aspect-ratio:16/9; object-fit:contain; }
.room-reader--television .room-video-feedback { display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px; margin-bottom:8px; }
.room-reader--television .room-video-status { margin:0; color:#60566a; font-size:12px; line-height:1.6; }
.room-full-photo { display:block; width:100%; max-height:62svh; object-fit:contain; background:#111422; }
.room-route { background:#252238e8; color:#f3d9a0; border:1px solid #9a866d; padding:10px 15px; }
.room-to-workshop { position:absolute; left:43%; bottom:12%; z-index:2; }
.room-workshop { position:absolute; inset:0; z-index:4; background:#12252b url('./assets/ip/scenes/works-workshop.webp') center / 100% 100%; }
.workshop-return { position:absolute; top:3%; left:3%; }
.workshop-display { position:absolute; border:0; padding:0; background:repeating-linear-gradient(0deg,#102b35ed 0 2px,#15323ded 3px 4px); color:#ead599; display:grid; place-items:center; transition:filter .2s; }
.workshop-display--projects { left:61.8%; top:46.8%; width:7.9%; height:7.8%; }
.workshop-display--demos { left:72.5%; top:42.5%; width:10.3%; height:10.8%; }
.workshop-display span { z-index:1; position:relative; font-size:clamp(10px,1vw,14px); text-shadow:1px 2px #132337; }
.workshop-display small { font-size:10px; color:#b3c9c0; }
.workshop-display img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.6; }
.workshop-display:hover,.workshop-display:focus-visible { filter:brightness(1.35); }
.workshop-hint { position:absolute; left:3%; bottom:3%; padding:12px 16px; background:#10232bdf; color:#b8c4bb; font-size:12px; }
.room-notes { display:grid; gap:12px; }
.room-note { text-align:left; display:block; width:100%; }
.room-note time { display:block; color:#b9a88e; font-size:12px; margin-bottom:7px; }
.room-note strong { font-size:16px; }
.room-shelf { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.room-shelf figure { margin:0; }
.room-shelf img { width:100%; aspect-ratio:1; object-fit:cover; border:4px solid #5f5268; }
.room-shelf figcaption { font-size:12px; margin-top:7px; }
.room-river { position:absolute; inset:0; background:linear-gradient(#07102433,#07102444),url('./assets/ip/galaxy/star-river.png') center / 100% 100%; z-index:5; }
.room-river>p { position:absolute; left:24px; bottom:12px; color:#aeb7c6; font-size:12px; }
.river-return { position:absolute; top:20px; left:22px; background:#12233bd9; color:#ebdab7; border:1px solid #728292; padding:10px; }
.room-river-nodes { position:absolute; inset:0; }
.room-river-node { position:absolute; width:44px; height:44px; margin:-22px; padding:0; background:transparent; border:0; animation:host-breathe 6s ease-in-out infinite; }
.room-river-node img { width:100%; height:100%; object-fit:contain; transform:rotate(55deg); clip-path:inset(0 0 20% 0); filter:brightness(.7); }
.room-river-node::after { content:''; position:absolute; left:7px; right:7px; top:29px; height:6px; border-bottom:1px solid #b0c7d98c; border-radius:50%; }
.room-river-node span { opacity:0; position:absolute; bottom:100%; left:50%; transform:translateX(-50%); width:max-content; max-width:170px; padding:7px; background:#0c1a2be8; font-size:11px; color:#e8d7ac; pointer-events:none; }
.room-river-node:hover span,.room-river-node:focus-visible span { opacity:1; }
.room-river-node:hover,.room-river-node:focus-visible { z-index:4; }
.room-world button:focus-visible,.room-reader button:focus-visible { outline:2px solid #ffe3a3; outline-offset:5px; }
@media(max-width:760px) { .room-topbar { padding:10px; min-height:60px; } .room-topbar>span { font-size:13px; } .room-topbar small { display:none; } .room-topbar button { padding:8px; font-size:11px; } .room-stage { min-width:760px; } .room-dialogue { left:6%; right:6%; bottom:4%; padding:14px; } .room-dialogue p { font-size:14px; } .room-cassettes { grid-template-columns:repeat(2,minmax(0,1fr)); } .room-shelf { grid-template-columns:repeat(2,minmax(0,1fr)); } .room-footer { padding:14px 12px 80px; font-size:10px; } .room-reader { padding:16px; } .room-reader h2 { font-size:22px; } }
@media(prefers-reduced-motion:reduce) { .entry-record,.room-host img,.room-river-node,.room-world { animation:none; } }
@media(prefers-reduced-motion:reduce) { .gramophone-record { animation:none; } .room-framed { transition:none; } }
@media(prefers-reduced-motion:reduce) { .room-book,.room-gallery-photo img { transition:none; } }
@media(max-width:760px) { .room-gallery--wall { gap:8px; } .room-reader--gallery { padding:14px; } .room-frame-title,.room-book span { font-size:9px; } .workshop-return { position:fixed; top:76px; left:14px; z-index:8; } }
@media(max-width:760px) { .room-dialogue { position:fixed; left:14px; right:14px; bottom:78px; z-index:20; } }
/* Keep the custom element rooted in one place: Meting destroys its player on reparent. */
body > .music-card { position:absolute; top:66svh; left:50%; transform:translateX(-50%); margin:0; width:min(88vw,600px); }
.music-dock-heading { display:none; }
.in-room > .music-card { position:fixed; top:auto; left:auto; right:22px; bottom:74px; transform:none; width:min(440px,calc(100vw - 32px)); z-index:25; background:#202236f5; padding:16px; border:1px solid #8b7b78; box-shadow:0 15px 50px #0008; }
.in-room .music-dock-heading { display:flex; width:100%; align-items:center; justify-content:space-between; gap:12px; font-size:12px; }
.music-dock-heading button { background:#292b42; color:#f2dfb4; border:1px solid #726680; padding:7px 10px; cursor:pointer; }
.in-room .music-card meting-js { width:100%; }
.in-room .music-card .aplayer { width:100%; }
@media(max-width:760px) { .room-river .river-return { position:fixed; top:76px; left:14px; z-index:8; } .room-river>p { position:fixed; bottom:88px; left:14px; font-size:10px; pointer-events:none; } }
/* Immersive room: navigation belongs to the host, reading belongs to paper. */
.room-topbar,.room-footer,.room-music-button,.room-to-workshop,.object-caption,.room-host>span { display:none; }
.room-stage { width:100%; }
.room-world { background:#292039; }
.room-hotspot i { opacity:0; }
.room-hotspot:hover i,.room-hotspot:focus-visible i { opacity:1; }
.room-dialogue { position:fixed; left:50%; right:auto; bottom:24px; transform:translateX(-50%); width:min(720px,calc(100vw - 32px)); box-sizing:border-box; padding:30px 38px; border:0; background:transparent url('./assets/ip/room/dialogue-panel-v1.png') center/100% 100% no-repeat; box-shadow:none; }
.room-dialogue p { font-size:15px; margin:8px 0 18px; }
.room-dialogue>div { justify-content:flex-start; flex-wrap:wrap; gap:10px 20px; }
.room-dialogue button,.room-dialogue button:last-child { color:#f3db9e; padding:4px 0; background:none; border:0; border-bottom:1px dashed #9d8059; }
.room-bookshelf { background:linear-gradient(transparent 46%,#a46b46 46% 49%,#513047 49% 53%,transparent 53% 94%,#a46b46 94% 97%,#513047 97%); }
.room-volume { position:absolute; padding:0; border:0; border-left:3px solid #d5b57b; border-right:3px solid #291f36; background:linear-gradient(90deg,#392f4b,hsl(var(--book-hue) 24% 38%),#44304f); box-shadow:2px 3px 0 #20172b; color:#f9df9e; transition:transform .2s; }
.room-volume::before,.room-volume::after { content:''; position:absolute; left:0; right:0; height:3px; background:#bd955c; top:9%; }
.room-volume::after { top:auto; bottom:9%; }
.room-volume span { writing-mode:vertical-rl; font-size:clamp(8px,.65vw,13px); max-height:76%; overflow:hidden; display:inline-block; }
.room-volume:hover,.room-volume:focus-visible { transform:translateY(-9px); filter:brightness(1.2); }
.room-reader { color:#493629; background:linear-gradient(90deg,#b69b71 0,#e8d7b0 3%,#f6ebcc 48%,#d8c296 50%,#f4e8c7 52%,#e7d4ad 97%,#ad895e); border:8px solid #624333; border-radius:8px 15px 15px 8px; padding:26px 34px; box-shadow:0 6px 0 #382733,0 18px 60px #090713a0; }
.room-reader h2,.room-reader p,.room-reader>header { color:#493629; }
.room-reader button,.room-reader-actions a { background:transparent; color:#60482f; border:0; border-bottom:1px solid #a78a60; }
.room-reader-cover { float:left; width:42%; max-height:290px; margin:0 24px 20px 0; background:none; }
.room-reader-actions { clear:both; }
.room-book-index { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.room-book-index button { padding:20px 10px; background:#72533f; color:#f5dfac; border:3px double #c3a170; box-shadow:4px 4px #b8a17b; }
.room-record-crate { position:absolute; left:85%; top:61%; border:3px double #d3ae68; background:#593744; color:#f7da9a; width:5%; aspect-ratio:1; transform:rotate(8deg); font-size:25px !important; box-shadow:3px 4px #281c30; }
.room-records { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.room-disc { display:flex; align-items:center; gap:14px; text-align:left; padding:10px !important; }
.room-disc i { display:block; flex:0 0 65px; height:65px; border-radius:50%; background:radial-gradient(circle,#e7d7a9 0 3px,#8f5b64 4px 12px,transparent 13px),repeating-radial-gradient(circle,#20202a 0 3px,#38313b 4px 5px); box-shadow:3px 4px #947955; }
.room-disc small { display:block; margin-top:6px; opacity:.7; }
@media(max-width:760px) { .room-dialogue { bottom:16px; padding:24px; } .room-dialogue p { font-size:13px; } .room-dialogue button { font-size:12px; } .room-reader { padding:18px; } .room-reader-cover { float:none; width:100%; margin:0 0 16px; } .room-book-index,.room-records { grid-template-columns:repeat(2,minmax(0,1fr)); } .room-disc { flex-direction:column; align-items:flex-start; font-size:12px !important; } .workshop-return { top:16px; } }
.room-bookshelf { background: url('./assets/ip/room/story-bookshelf-v1.png') center/100% 100% no-repeat; }
.room-volume { background:none; border:0; box-shadow:none; }
.room-volume::before,.room-volume::after { display:none; }
.room-volume span { opacity:0; position:absolute; bottom:100%; left:50%; transform:translateX(-50%); writing-mode:horizontal-tb; white-space:nowrap; max-height:none; overflow:visible; padding:6px 8px; background:#261d35; color:#f6dfa7; font-size:11px; pointer-events:none; }
.room-volume:hover span,.room-volume:focus-visible span { opacity:1; }
.room-volume:hover,.room-volume:focus-visible { background:#f8dfa522; box-shadow:0 0 12px #f9df8a66; }
/* Original chunky pixel furniture and a speech bubble above the host. */
.room-bookshelf { background:none; }
.room-book { image-rendering:pixelated; }
.room-original-volume { transition:transform .22s steps(5),filter .2s; }
.room-original-volume:hover,.room-original-volume:focus-visible { transform:translateY(-8px); }
.room-record-crate { left:69.4%; top:60%; width:5.5%; aspect-ratio:1.2; transform:none; background:none; border:0; box-shadow:none; padding:0; image-rendering:pixelated; }
.room-record-crate img { display:block; width:100%; height:100%; object-fit:contain; image-rendering:pixelated; }
.room-record-crate:hover { filter:brightness(1.2); transform:translateY(-2px); }
.room-dialogue { position:absolute; left:auto; right:2%; top:43%; bottom:auto; width:31%; min-height:220px; transform:translateY(8px) scale(.96); opacity:0; transform-origin:left bottom; padding:26px 30px 35px; background-image:url('./assets/ip/room/dialogue-bubble-v2.png'); image-rendering:pixelated; transition:opacity .32s,transform .38s; }
.room-dialogue.is-revealed { opacity:1; transform:translateY(0) scale(1); }
.room-dialogue p { font-size:clamp(12px,1vw,17px); min-height:3.6em; }
.room-dialogue>div { gap:8px 16px; opacity:0; transition:opacity .5s .6s; }
.room-dialogue.is-revealed>div { opacity:1; }
.room-dialogue button { font-size:12px; }
.room-reader { border-radius:0; box-shadow:4px 0 #352539,-4px 0 #352539,0 4px #352539,0 -4px #352539,8px 8px #110d2370; background:linear-gradient(90deg,#d0b887 0 2%,#e8d7b0 2% 49%,#b8a075 49% 50%,#ecddbb 50% 98%,#c3a378 98%); }
.room-reader[open] { animation:page-unfold .3s steps(6); }
@keyframes page-unfold { from { opacity:0; translate:0 12px; } to { opacity:1; translate:0 0; } }
.room-reader--records { background:#30263f; color:#f1dbab; border:6px solid #805536; }
.room-reader--records h2,.room-reader--records>header,.room-reader--records button { color:#f1dbab; }
.room-disc i { border-radius:0; background:transparent url('./assets/ip/room/gramophone-record.png') center/contain no-repeat; box-shadow:none; image-rendering:pixelated; }
.room-music-notice { position:absolute; left:66%; top:66%; max-width:29%; z-index:6; padding:8px 12px; background:#261d39e8; color:#f1dfb3; font-size:12px; line-height:1.7; }
.room-shelf-next { position:absolute; right:0; bottom:-25px; background:#30263f; color:#f1dbab; border:0; font:inherit; font-size:11px; }
@media(max-width:760px) { .room-dialogue { position:fixed; left:auto; right:12px; top:26%; bottom:auto; width:min(330px,calc(100vw - 24px)); min-height:220px; padding:24px 26px 36px; } .room-dialogue p { font-size:13px; } }
@media(prefers-reduced-motion:reduce) { .room-dialogue,.room-dialogue>div,.room-original-volume { transition:none; } .room-reader[open] { animation:none; } }
/* Safe content areas: the host stands by the bed; pages never cross the spine. */
.room-host { left:27%; top:76%; }
.room-dialogue { left:40%; right:auto; top:32%; width:43%; min-height:0; padding:68px 34px 78px; box-sizing:border-box; }
.dialogue-speaker { display:block; margin:0 0 8px; position:static; }
.room-dialogue p { margin:0 0 18px; min-height:3.6em; line-height:1.8; overflow-wrap:anywhere; }
.room-dialogue>div { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 18px; }
.room-dialogue button { text-align:left; line-height:1.7; white-space:normal; }
.room-frame-title,.room-book span { border:0; background:#2c2039; box-shadow:2px 0 #97704c,-2px 0 #97704c,0 2px #97704c,0 -2px #97704c; padding:7px 10px; image-rendering:pixelated; }
.room-reader--book { width:min(1040px,calc(100vw - 28px)); padding:34px 40px; }
.room-reader--book>h2 { width:calc(50% - 32px); overflow-wrap:anywhere; }
.room-reader--book [data-reader-body] { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:72px; align-items:start; }
.room-page { min-width:0; overflow-wrap:anywhere; }
.room-reader--book .room-reader-cover { float:none; width:100%; max-height:360px; margin:0 0 24px; }
.room-page p { margin-top:0; }
.room-page .room-reader-actions { display:flex; flex-direction:column; align-items:flex-start; gap:14px; }
.room-page .room-gallery-photo { width:100%; margin:0 0 16px; }
.room-page .room-gallery-photo img { width:100%; display:block; aspect-ratio:16/10; object-fit:contain; }
.room-page .room-cassettes { grid-template-columns:1fr; }
@media(max-width:760px) { .room-dialogue { position:fixed; left:auto; right:12px; top:6%; width:min(350px,calc(100vw - 24px)); padding:66px 30px 76px; } .room-reader--book { padding:24px 20px; } .room-reader--book [data-reader-body] { gap:36px; } .room-reader--book>h2 { font-size:20px; } .room-page p { font-size:13px; } }
@media(max-width:520px) { .room-reader--book { background:#ecddbb; } .room-reader--book [data-reader-body] { grid-template-columns:1fr; gap:24px; } .room-reader--book>h2 { width:100%; } .room-page--right { border-top:2px dashed #c5aa7c; padding-top:20px; } }
.room-dialogue { background-size:100% 140%; background-position:center; padding:36px 34px 46px; }
@media(max-width:760px) { .room-dialogue { padding:36px 28px 46px; } }
/* Single journal: preserve reading order, only cover and introduction share a row. */
.reader-mascot { display:none; }
.room-reader--book { background:#eddfbd url('./assets/ip/room/journal-panel-v3.png') center/100% 100% no-repeat; border:0; padding:48px 52px; box-shadow:6px 6px #16112580; }
.room-reader--book .reader-mascot { display:block; position:absolute; top:26px; right:92px; width:64px; height:80px; object-fit:contain; image-rendering:pixelated; pointer-events:none; }
.room-reader--book>h2 { width:calc(100% - 100px); margin:16px 0 30px; }
.room-reader--book>header { min-height:36px; padding-right:0; }
.room-reader--book [data-reader-body] { grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); column-gap:36px; row-gap:20px; }
.room-reader--book [data-reader-body]>.room-reader-actions,.room-reader--book [data-reader-body]>.room-gallery,.room-reader--book [data-reader-body]>h3,.room-reader--book [data-reader-body]>.room-cassettes { grid-column:1 / -1; margin:0; }
.room-reader--book .room-page { border:0; padding:0; }
.room-reader--book .room-reader-cover { max-height:300px; margin:0; }
.room-reader--book .room-gallery { grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.room-reader--book .room-gallery-photo { border:3px solid #70583f !important; background:#d7c49e !important; box-shadow:3px 3px #9b855e; }
.room-reader--book .room-gallery-photo img { aspect-ratio:16/9; object-fit:contain; }
.room-reader--book .room-cassettes { grid-template-columns:repeat(2,minmax(0,1fr)); }
.room-reader--book .room-cassette { background:#decca8 !important; border:3px solid #9d7956 !important; box-shadow:3px 3px #b39a6e; color:#493629; }
.room-reader--book .room-cassette small { color:#6c563f; }
.room-reader--book .room-reader-actions { display:flex; flex-direction:row; align-items:center; flex-wrap:wrap; }
@media(max-width:760px) { .room-reader--book { padding:38px 30px; } .room-reader--book [data-reader-body] { gap:22px; } .room-reader--book .reader-mascot { top:30px; right:70px; width:44px; height:55px; } }
@media(max-width:520px) { .room-reader--book { padding:34px 24px; background-color:#eddfbd; } .room-reader--book [data-reader-body] { grid-template-columns:1fr; } .room-reader--book .room-gallery { gap:10px; } .room-reader--book .room-cassettes { grid-template-columns:1fr; } }
/* Sprite-aware safe area and head-anchored tail, computed by positionDialogue(). */
.room-dialogue { position:fixed; right:auto; bottom:auto; min-height:0; max-width:calc(100vw - 24px); background-size:100% 100%; background-position:center; z-index:22; }
.room-dialogue .dialogue-speaker { margin:0 0 8px; line-height:1.5; }
.room-dialogue p { font-size:14px; min-height:3.6em; margin:0 0 18px; }
.room-dialogue>div { gap:8px 18px; }
.room-dialogue button { font-size:13px; padding:2px 0; line-height:1.65; }
@media(max-width:520px) { .room-dialogue p { font-size:12px; } .room-dialogue button { font-size:11px; } }
/* Reference layout: portrait left, speaker and copy right, choices along the bottom. */
.dialogue-portrait { position:absolute; left:1%; top:25%; width:16%; height:48%; object-fit:contain; image-rendering:pixelated; pointer-events:none; }
.room-dialogue>div { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:10px 20px; }
.room-dialogue button { border-bottom:0; color:#edd398; }
.room-dialogue button:hover,.room-dialogue button:focus-visible { color:#fff2c6; text-shadow:0 0 6px #f5d27980; }
.dialogue-speaker { color:#f6d381; font-size:15px; }
.room-host { left:8%; top:77%; }
/* Fixed-size corners; only the frame edges repeat as the panel changes size. */
.room-reader { box-sizing:border-box; width:min(1080px,calc(100vw - 24px)); max-height:88svh; padding:18px 20px; border:36px solid transparent; border-image:url('./assets/ip/room/journal-panel-v3.png') 150 fill / 36px / 0 round; border-radius:0; background:#eddfbd; overflow:hidden; box-shadow:6px 8px #16112580; }
.room-reader[open] { display:flex; flex-direction:column; }
.room-reader>header,.room-reader>h2 { flex-shrink:0; }
.room-reader>header { min-height:34px; padding-right:80px; }
.room-reader>h2,.room-reader--book>h2 { width:auto; margin:12px 0 22px; padding-right:70px; }
.room-reader [data-reader-body] { min-height:0; overflow:auto; overscroll-behavior:contain; scrollbar-gutter:stable; padding:0 8px 12px 0; }
.room-reader--book { padding:18px 20px; background:#eddfbd; border:36px solid transparent; }
.room-reader--book .reader-mascot { top:10px; right:18px; width:72px; height:90px; }
.room-reader--book .room-reader-cover { max-height:340px; }
.room-reader--book p { font-size:15px; line-height:2; }
.room-reader--book .collection-source { display:block; margin-top:20px; font-size:12px; color:#795737; }
.dialogue-portrait { display:none; }
.room-dialogue { border:solid transparent; border-width:38px 38px 48px; border-image:url('./assets/ip/room/dialogue-bubble-v2.png') 300 220 260 330 fill / 38px 38px 48px / 0 round; background:none; box-shadow:none; }
.room-dialogue p { min-height:3.6em; }
.room-dialogue>div { display:flex; flex-wrap:nowrap; justify-content:space-between; gap:12px; }
.room-dialogue button { flex:0 0 auto; font-size:12px; white-space:nowrap; }
@media(max-width:600px) { .room-dialogue>div { flex-wrap:wrap; justify-content:flex-start; gap:8px 16px; } .room-dialogue button { font-size:11px; } .room-reader,.room-reader--book { border-width:24px; border-image-width:24px; padding:12px; } .room-reader>header { padding-right:54px; } .room-reader--book .reader-mascot { width:48px; height:60px; right:10px; top:8px; } .room-reader--book p { font-size:13px; } }
.room-reader [data-reader-body] { scrollbar-color:#a783b2 #382940; scrollbar-width:auto; }
.room-reader [data-reader-body]::-webkit-scrollbar { width:14px; height:14px; }
.room-reader [data-reader-body]::-webkit-scrollbar-track { background:#382940; border:3px solid #695078; box-shadow:inset 2px 0 #231c30; }
.room-reader [data-reader-body]::-webkit-scrollbar-thumb { background:linear-gradient(90deg,#816090 0 25%,#b18aba 25% 65%,#755380 65%); border:2px solid #dfb973; border-radius:0; min-height:42px; }
.room-reader [data-reader-body]::-webkit-scrollbar-thumb:hover { background:#c19ac9; }
.room-reader [data-reader-body]::-webkit-scrollbar-button { display:none; }
/* Border shorthand resets border-image, so restore it after the book variant. */
.room-reader--book { border-image:url('./assets/ip/room/journal-panel-v3.png') 150 fill / 36px / 0 stretch; }
.room-reader { border-image-repeat:stretch; }
.room-dialogue { border-image-repeat:stretch; }
@supports selector(::-webkit-scrollbar) { .room-reader [data-reader-body] { scrollbar-color:auto; scrollbar-width:auto; } }
@media(max-width:600px) { .room-reader--book { border-image-width:24px; } }
/* Record selection uses the whole paper, independently of the book spread. */
.room-reader--records,.room-reader--records h2,.room-reader--records>header,.room-reader--records button { color:#493629; }
.room-reader--records [data-reader-body] { display:block; }
.room-records { width:100%; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 20px; }
.room-reader--records .room-disc { min-width:0; flex-direction:row; align-items:center; gap:16px; padding:14px !important; background:#f9edce88; border:2px solid #c4a77c; box-shadow:2px 2px #a3886244; font-size:15px; line-height:1.65; }
.room-disc>span { min-width:0; overflow-wrap:anywhere; }
.room-disc small { color:#755d48; opacity:1; font-size:12px; }
.room-reader--records .room-disc:hover,.room-reader--records .room-disc:focus-visible { background:#fff3d8; border-color:#86617f; }
.room-disc i { flex:0 0 64px; height:64px; }
@media(max-width:600px) { .room-records { grid-template-columns:1fr; gap:10px; } .room-reader--records .room-disc { padding:10px !important; font-size:13px; gap:12px; } .room-disc i { flex-basis:48px; height:48px; } }
.dialogue-advance { display:block; margin-top:14px; color:#baa780; font-size:11px; text-align:right; pointer-events:none; }
.room-dialogue p { cursor:pointer; }
.room-reader--profile { width:min(920px,calc(100vw - 24px)); }
.room-reader--profile .reader-mascot { display:none; }
.room-reader--profile>header { padding-right:0; }
.room-reader--profile [data-reader-body] { display:block; }
.profile-intro { display:flex; align-items:center; gap:26px; padding:20px 22px; background:#fff4d480; border-left:4px solid #846180; }
.profile-intro>img { width:110px; height:130px; object-fit:contain; image-rendering:pixelated; flex-shrink:0; }
.profile-intro small { color:#82604b; font-size:12px; }
.profile-intro h3 { margin:10px 0 12px; font-size:24px; }
.room-reader--profile p { margin:0; font-size:14px; line-height:1.9; }
.profile-interests { margin-top:26px; }
.profile-interests>h3,.profile-contact h3 { font-size:16px; color:#74516a; margin:0 0 14px; }
.profile-interests>div { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.profile-interests article { padding:16px; background:#f8ebcc; border:1px solid #cdb58a; box-shadow:2px 2px #ab916330; }
.profile-interests h4 { margin:0 0 7px; font-size:15px; color:#624631; }
.profile-interests article p { color:#7a624b; font-size:12px; }
.profile-contact { margin-top:24px; padding:18px 20px; background:#e1d0b0; border-top:2px solid #a48764; overflow-wrap:anywhere; }
@media(max-width:600px) { .profile-intro { align-items:flex-start; padding:14px; gap:14px; } .profile-intro>img { width:60px; height:85px; } .profile-intro h3 { font-size:18px; } .profile-interests>div { grid-template-columns:1fr; } .room-reader--profile p { font-size:13px; } }
/* Short physical slider: its position follows progress, its length stays 48px. */
.room-reader [data-reader-body] { scrollbar-width:none; scrollbar-gutter:auto; padding-right:24px; }
.room-reader [data-reader-body]::-webkit-scrollbar { display:none; }
.reader-scroll-rail { position:absolute; right:44px; width:12px; background:#382940; box-shadow:inset 2px 0 #211a2b,2px 0 #b59868; touch-action:none; cursor:pointer; z-index:3; }
.reader-scroll-rail>span { display:block; width:12px; height:48px; box-sizing:border-box; background:linear-gradient(90deg,#735080 0 25%,#b08aba 25% 65%,#74517e 65%); border:2px solid #d5ae6d; box-shadow:inset 0 3px #cba0ce,inset 0 -3px #553662; pointer-events:auto; }
.reader-scroll-rail>span::after { content:''; display:block; margin:17px 1px 0; height:3px; background:#e3bd7c; }
.reader-scroll-rail:focus-visible { outline:2px solid #80547b; outline-offset:4px; }
.room-host img { transform-origin:50% 90%; animation:host-idle 3.2s ease-in-out infinite; }
.room-host:hover img,.room-host:focus-visible img { animation:host-greet 2s ease-in-out infinite; }
.room-host.is-talking img { animation:host-chat 2.4s ease-in-out infinite; }
@keyframes host-idle { 0%,100% { transform:translateY(0) rotate(-.5deg); } 50% { transform:translateY(-2px) rotate(.5deg); } }
@keyframes host-greet { 0%,100% { transform:translateY(0) rotate(-1deg); } 50% { transform:translateY(-3px) rotate(1deg); } }
@keyframes host-chat { 0%,100% { transform:translateY(0) rotate(-.6deg); } 35% { transform:translateY(-2px) rotate(.6deg); } 65% { transform:translateY(-1px) rotate(0); } }
@media(max-width:600px) { .reader-scroll-rail { right:26px; } }
@media(prefers-reduced-motion:reduce) { .room-host img,.room-host:hover img,.room-host:focus-visible img,.room-host.is-talking img { animation:none; } }
.reader-scroll-rail { right:20px; }
@media(max-width:600px) { .reader-scroll-rail { right:12px; } }
.room-scene-veil { position:fixed; inset:0; z-index:1000; background:#1e172d; pointer-events:auto; }
.room-life-layer { position:absolute; inset:0; pointer-events:none; z-index:1; overflow:hidden; }
.room-woven-rug { position:absolute; left:34%; top:77%; width:28%; height:14%; transform:skewX(-18deg); background:repeating-linear-gradient(0deg,#574568 0 4px,#604b70 4px 8px); border:6px double #ae856a; box-shadow:0 5px #261c3544,inset 0 0 0 8px #40354f; clip-path:polygon(5% 0,95% 0,100% 95%,0 95%); opacity:.85; }
.room-woven-rug::after { content:'✦'; position:absolute; inset:12%; display:grid; place-items:center; color:#b69b78; font-size:clamp(22px,5vw,70px); border:2px solid #99816a66; }
.room-floor-cushion { position:absolute; left:29%; top:85%; width:6%; transform:rotate(-12deg); image-rendering:pixelated; filter:drop-shadow(2px 4px 1px #20142688); }
.room-floor-notebook { position:absolute; left:53%; top:81%; width:4%; transform:rotate(9deg); image-rendering:pixelated; }
.room-desk-mug { position:absolute; left:87%; top:60%; width:3%; image-rendering:pixelated; }
.room-lamplight { position:absolute; left:0; top:38%; width:26%; height:42%; background:radial-gradient(ellipse,#ffc77b22,transparent 65%); mix-blend-mode:screen; animation:room-light-breathe 7s ease-in-out infinite; }
.room-windowlight { position:absolute; left:4%; top:18%; width:32%; height:68%; transform:rotate(-24deg); background:linear-gradient(110deg,transparent,#b5b6f00b,transparent); }
.room-dust { position:absolute; width:3px; height:3px; background:#ffe6b4; opacity:0; animation:room-dust-drift 9s ease-in-out infinite; }
.dust-a { left:14%; top:48%; }.dust-b { left:31%; top:61%; animation-delay:-3s; }.dust-c { left:73%; top:55%; animation-delay:-6s; }
@keyframes room-light-breathe { 50% { opacity:.6; } }
@keyframes room-dust-drift { 0%,100% { opacity:0; transform:translate(0,0); } 35%,65% { opacity:.35; } 80% { transform:translate(12px,-30px); } }
@media(prefers-reduced-motion:reduce) { .room-lamplight,.room-dust { animation:none; } }
.room-desk-mug { left:84%; top:64.5%; }
/* Walk through the framed scene: capture the old room, push into the new one. */
html.room-travelling::view-transition-group(root) { animation-duration:950ms; }
html.room-travelling::view-transition-old(root) { animation:room-photo-depart 650ms cubic-bezier(.4,0,.8,.3) both; mix-blend-mode:normal; }
html.room-travelling::view-transition-new(root) { animation:room-photo-arrive 950ms cubic-bezier(.16,1,.3,1) both; mix-blend-mode:normal; }
@keyframes room-photo-depart { 0% { opacity:1; transform:scale(1); filter:blur(0); } 100% { opacity:0; transform:scale(1.28); filter:blur(5px); } }
@keyframes room-photo-arrive { 0%,15% { opacity:0; transform:scale(.78); clip-path:inset(13% 17%); filter:blur(3px); } 45% { opacity:1; } 100% { opacity:1; transform:scale(1); clip-path:inset(0); filter:blur(0); } }
html.room-travelling-reduced::view-transition-old(root),html.room-travelling-reduced::view-transition-new(root) { animation:none; }
html.room-travelling-reduced::view-transition-old(root) { animation:room-soft-out 160ms both; }
html.room-travelling-reduced::view-transition-new(root) { animation:room-soft-in 160ms both; }
@keyframes room-soft-out { to { opacity:0; } } @keyframes room-soft-in { from { opacity:0; } to { opacity:1; } }
/* The video remains untouched; foreground materials follow the pixel bedroom. */
.home .cover-lounge { position:absolute; left:50%; top:45svh; transform:translate(-50%,-50%); width:min(860px,calc(100vw - 48px)); box-sizing:border-box; display:grid; grid-template-columns:1fr 1fr; align-items:center; text-align:left; justify-items:stretch; gap:20px; padding:38px 42px; background:linear-gradient(130deg,#2d223fe8,#19192dd9); border:2px solid #a28560; box-shadow:0 0 0 5px #231a32,0 0 0 6px #735941,0 18px 60px #080b2855; color:#f1dfb7; font-family:'Zpix','Microsoft YaHei',sans-serif; }
.cover-lounge::before,.cover-lounge::after { content:'✦'; position:absolute; color:#e7bd73; font-size:20px; background:#30243c; padding:0 4px; top:-14px; left:18px; }
.cover-lounge::after { top:auto; left:auto; right:18px; bottom:-14px; }
.cover-eyebrow { color:#d3b78a; font-size:12px; letter-spacing:2px; }
.cover-lounge .home-title { display:block; margin:22px 0 16px; color:#f6e6be; font-size:64px; line-height:1.1; letter-spacing:10px; text-shadow:3px 3px #795a70; animation:none; }
.cover-lounge .home-title::before,.cover-lounge .home-title::after { display:none; }
.cover-lounge .home-title:hover { animation:none; transform:none; filter:none; }
.cover-subtitle { margin:0; color:#e8c88c; font-size:15px; line-height:1.8; }
.cover-description { margin:18px 0 24px; color:#bbb0c1; font-size:13px; line-height:2; }
.cover-signoff { display:block; font-size:11px; color:#ad9aa5; padding-top:16px; border-top:1px solid #b7976c44; }
.cover-lounge .cover-turntable { width:100%; height:auto; aspect-ratio:1; display:flex; flex-direction:column; align-items:center; justify-content:center; border:0; border-radius:0; background:none; box-shadow:none; animation:none; overflow:visible; transition:transform .3s; }
.cover-turntable::before,.cover-turntable::after { display:none; }
.cover-lounge .cover-turntable img { position:static; inset:auto; display:block; width:100% !important; height:auto !important; max-height:310px; object-fit:contain; border:0; border-radius:0; animation:none !important; image-rendering:pixelated; filter:drop-shadow(0 12px 5px #0b081d55); }
.cover-lounge .cover-turntable:hover { transform:translateY(-4px); border:0; box-shadow:none; }
.cover-enter-label { display:flex; align-items:center; justify-content:center; gap:32px; width:80%; margin-top:4px; padding:12px 0; background:#342740; border:1px solid #a5855c; color:#f5dca2; font-family:'Zpix',sans-serif; font-size:15px; box-shadow:3px 3px #120e2399; }
.cover-enter-label b { font-size:18px; font-weight:normal; }
body:not(.in-room)>.music-card { position:absolute; top:calc(45svh + 232px); left:50%; bottom:auto; transform:translateX(-50%); width:min(860px,calc(100vw - 48px)); margin:0; padding:0; box-sizing:border-box; }
body:not(.in-room)>.music-card .aplayer { width:100%; margin:0; border-radius:0; color:#ecdfc5; background:#251f35ed; border:1px solid #877050; box-shadow:3px 3px #15102277; font-family:'Zpix','Microsoft YaHei',sans-serif; }
body:not(.in-room)>.music-card .aplayer .aplayer-info { border:0; }
body:not(.in-room)>.music-card .aplayer .aplayer-author,body:not(.in-room)>.music-card .aplayer .aplayer-time { color:#b8a6b6; }
body:not(.in-room)>.music-card .aplayer .aplayer-icon path { fill:#d3b683; }
body:not(.in-room)>.music-card .aplayer .aplayer-list { background:#251f35; }
body:not(.in-room)>.music-card .aplayer .aplayer-list li { border-color:#61516a; }
body:not(.in-room)>.music-card .aplayer .aplayer-list li:hover,body:not(.in-room)>.music-card .aplayer .aplayer-list li.aplayer-list-light { background:#45334f; }
@media(max-width:640px) { .home .cover-lounge { top:40svh; width:calc(100vw - 36px); grid-template-columns:1fr; gap:10px; padding:24px; text-align:center; } .cover-lounge .home-title { font-size:44px; margin:14px 0 10px; } .cover-description { display:none; } .cover-signoff { display:none; } .cover-lounge .cover-turntable { aspect-ratio:auto; } .cover-lounge .cover-turntable img { width:210px !important; max-height:200px; } .cover-enter-label { width:210px; padding:10px 0; margin-top:0; } body:not(.in-room)>.music-card { top:calc(40svh + 230px); width:calc(100vw - 36px); } }
@media(max-height:650px) and (min-width:641px) { .home .cover-lounge { top:40svh; padding:22px 34px; } .cover-lounge .cover-turntable img { max-height:240px; } body:not(.in-room)>.music-card { top:calc(40svh + 190px); } }
@media(prefers-reduced-motion:reduce) { .cover-lounge .cover-turntable { transition:none; } }
body:not(.in-room)>.music-card>meting-js { display:block; width:100%; }
body:not(.in-room)>.music-card .aplayer .aplayer-body { height:88px; background:#251f35ed; border:0; border-radius:0; box-shadow:none; }
body:not(.in-room)>.music-card .aplayer .aplayer-pic { width:88px; height:88px; border-radius:0; }
body:not(.in-room)>.music-card .aplayer .aplayer-info,body:not(.in-room)>.music-card .aplayer.aplayer-withlrc .aplayer-info { height:88px; margin-left:88px; padding:13px 18px 0; }
body:not(.in-room)>.music-card .aplayer { min-height:88px; }
body:not(.in-room)>.music-card .aplayer .aplayer-music { text-align:left; margin:0 0 12px; height:26px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
body:not(.in-room)>.music-card .aplayer .aplayer-music .aplayer-title { color:#efdab0; font-size:15px; font-weight:normal; }
body:not(.in-room)>.music-card .aplayer .aplayer-music .aplayer-author { color:#b6a3b4; font-size:12px; font-weight:normal; }
body:not(.in-room)>.music-card .aplayer .aplayer-lrc { display:none; }
body:not(.in-room)>.music-card .aplayer .aplayer-list ol,body:not(.in-room)>.music-card .aplayer .aplayer-list ol li { background:transparent; }
@media(max-width:640px) { body:not(.in-room)>.music-card .aplayer .aplayer-pic { width:64px; height:80px; } body:not(.in-room)>.music-card .aplayer .aplayer-info,body:not(.in-room)>.music-card .aplayer.aplayer-withlrc .aplayer-info { margin-left:64px; padding:12px 10px 0; height:80px; } body:not(.in-room)>.music-card .aplayer .aplayer-music .aplayer-title { font-size:12px; } body:not(.in-room)>.music-card .aplayer .aplayer-body { height:80px; } }
/* A compact title and a tangible object, with the video allowed to breathe. */
.home .cover-lounge { width:min(900px,calc(100vw - 64px)); padding:18px 24px; gap:60px; border:0; box-shadow:none; background:none; grid-template-columns:1fr 1.1fr; top:44svh; }
.cover-lounge::before,.cover-lounge::after { display:none; }
.cover-intro { text-shadow:0 2px 12px #0d102a,0 2px 3px #111329; }
.cover-lounge .home-title { font-size:76px; margin:22px 0; letter-spacing:12px; color:#fff0ce; text-shadow:3px 3px #4d3c66,0 0 32px #14172b; }
.cover-eyebrow { color:#ead1a5; letter-spacing:3px; font-size:12px; }
.cover-subtitle { font-size:15px; color:#f3d49c; }
.cover-description { margin:20px 0 0; color:#d4c9d4; font-size:13px; }
.cover-signoff { display:none; }
.cover-lounge .cover-turntable img { max-height:320px; filter:drop-shadow(0 16px 10px #080b2066); }
.cover-enter-label { width:210px; margin:16px auto 0; padding:12px 0; background:#2b223be8; border:1px solid #c1a072; box-shadow:3px 3px #11112477; gap:28px; }
body:not(.in-room)>.music-card { width:min(760px,calc(100vw - 64px)); }
body:not(.in-room)>.music-card .aplayer { background:#221f34df; border-color:#9d855c88; }
body:not(.in-room)>.music-card .aplayer .aplayer-body { background:transparent; }
@media(max-width:640px) { .home .cover-lounge { width:calc(100vw - 36px); padding:10px 16px; top:39svh; gap:20px; grid-template-columns:1fr; } .cover-lounge .home-title { font-size:48px; margin:14px 0; } .cover-eyebrow { font-size:11px; } .cover-subtitle { font-size:12px; } .cover-lounge .cover-turntable img { width:230px !important; max-height:200px; } .cover-enter-label { margin-top:12px; width:190px; } body:not(.in-room)>.music-card { width:calc(100vw - 36px); } }
.room-stage { background-image:url('./assets/ip/room/room-shell-lived-in-v3.png'); }
/* Leave the baked-in mug visible at the desk's right edge. */
.room-gramophone { left:72%; top:52%; width:9.8%; }
.room-record-crate { left:68.8%; top:60.6%; width:4.8%; }
/* Song selection stage: fixed video, elliptical foreground orbit, no cards. */
.record-selection:not(.in-room) { overflow:hidden; }
.record-selection:not(.in-room)>#music { display:none !important; }
.record-orbit { position:absolute; inset:0; z-index:3; overflow:hidden; outline:none; touch-action:none; font-family:'Zpix','Microsoft YaHei',sans-serif; }
.record-orbit-items { position:absolute; inset:0; }
.orbit-record { position:absolute; left:0; top:0; width:210px; height:210px; padding:0; border:0; border-radius:50%; background:none; transform-origin:0 0; cursor:pointer; will-change:transform,opacity; }
.orbit-vinyl { position:absolute; inset:0; display:block; border-radius:50%; background:repeating-radial-gradient(circle,#141221 0 2px,#242132 2px 3px,#141321 3px 5px); box-shadow:inset 0 0 0 2px #55527880,inset -7px -5px 14px #070611,0 4px 16px #090c2544; animation:orbit-spin 48s linear infinite; }
.orbit-vinyl::before { content:''; position:absolute; inset:0; border-radius:50%; background:conic-gradient(from 20deg,transparent 0 20%,#a4a8d014 23%,transparent 27% 65%,#cbc3dd19 69%,transparent 73%); }
.orbit-vinyl::after { content:''; position:absolute; left:48.8%; top:48.8%; width:2.4%; height:2.4%; border-radius:50%; background:#100c1d; box-shadow:0 0 0 2px #c3ae7955; }
.orbit-label { position:absolute; left:32%; top:32%; width:36%; height:36%; object-fit:cover; border-radius:50%; box-shadow:0 0 0 2px #a28e6955; }
.orbit-record.is-current:hover .orbit-vinyl,.orbit-record:focus-visible .orbit-vinyl { box-shadow:inset 0 0 0 2px #d6b677aa,inset -7px -5px 14px #070611,0 0 18px #d6b67714; }
.record-orbit-caption { position:absolute; width:240px; transform:translateX(-50%); text-align:center; pointer-events:none; color:#efdfbe; text-shadow:0 2px 6px #10142e; }
.record-orbit-caption p { margin:0 0 8px; font-size:17px; letter-spacing:2px; line-height:1.7; overflow-wrap:anywhere; }
.record-orbit-caption small { display:block; color:#b6b1c5; font-size:11px; line-height:1.6; }
.record-orbit-caption>span { display:block; margin-top:12px; color:#c6b48e; font-size:10px; letter-spacing:3px; }
.record-playback { display:block; margin:10px auto 0; padding:4px 8px; border:0; background:none; color:#efdfbe; font:inherit; font-size:11px; line-height:1.6; text-shadow:inherit; cursor:pointer; pointer-events:auto; }
.record-playback[hidden] { display:none; }
.record-playback:disabled { color:#b6b1c5; cursor:default; }
.record-playback:focus-visible { outline:1px solid #c6b48e; outline-offset:3px; }
.record-scroll-hint { position:absolute; bottom:22px; left:50%; transform:translateX(-50%); color:#b8b5ca; opacity:.4; text-align:center; font-size:9px; letter-spacing:3px; line-height:2; transition:opacity .6s; pointer-events:none; }
.record-orbit.has-browsed .record-scroll-hint { opacity:0; }
@keyframes orbit-spin { to { transform:rotate(360deg); } }
@media(max-width:640px) { .record-orbit-caption { width:150px; } .record-orbit-caption p { font-size:12px; letter-spacing:1px; } .record-orbit-caption small { font-size:10px; } .record-orbit-caption>span { margin-top:8px; font-size:9px; } }
@media(prefers-reduced-motion:reduce) { .orbit-vinyl { animation:none; } .record-scroll-hint { transition:none; } }
.record-orbit,.orbit-record { user-select:none; -webkit-user-select:none; }
.orbit-label { pointer-events:none; }
.record-orbit::before { content:''; position:absolute; inset:0; background:#0b0a1e; opacity:0; transition:opacity .8s; pointer-events:none; }
.record-orbit.is-entering::before { opacity:.65; }
.record-orbit.is-entering .orbit-record:not(.is-current),.record-orbit.is-entering .record-orbit-caption,.record-orbit.is-entering .record-scroll-hint { opacity:0 !important; transition:opacity .4s; pointer-events:none !important; }
.record-entry-flight .orbit-label { animation:entry-label-out 1.1s both; }
@keyframes entry-label-out { 0%,35% {opacity:1;} 75%,100% {opacity:0;} }
.gramophone-label { position:absolute; left:34%; top:34%; width:32%; height:32%; border-radius:50%; object-fit:cover; animation:record-spin 7s linear infinite paused; pointer-events:none; }
.room-gramophone.is-playing .gramophone-label { animation-play-state:running; }
@media(prefers-reduced-motion:reduce) { .gramophone-label,.record-entry-flight .orbit-label { animation:none; } .record-orbit::before {transition:none;} }
/* Objects carry the workshop navigation; no instruction cards on the scene. */
.workshop-return { position:absolute; left:2.5%; top:45%; width:36px; height:48px; padding:0; background:none; border:0; color:#d9c18c !important; font-size:27px !important; text-shadow:2px 2px #102429; opacity:.65; z-index:7; }
.workshop-return:hover,.workshop-return:focus-visible { opacity:1; }
.workshop-display { background:#11252c; }
.workshop-display img { opacity:.85; object-fit:cover; image-rendering:auto; }
.workshop-trophies { position:absolute; left:80%; top:9.3%; width:13.7%; height:8.3%; padding:0; background:none; border:0; cursor:pointer; }
.workshop-trophies img { display:block; width:100%; height:100%; object-fit:contain; image-rendering:pixelated; }
.workshop-trophies:hover,.workshop-trophies:focus-visible { filter:brightness(1.2) drop-shadow(0 0 4px #e8cb6c44); }
.workshop-honors { position:absolute; left:29%; top:12%; width:27%; max-height:53%; padding:0 12px 0 0; box-sizing:border-box; overflow:auto; scrollbar-width:thin; scrollbar-color:#8d8b6d #12252b; color:#e1d3b3; font-family:'Zpix','Microsoft YaHei',sans-serif; text-shadow:1px 2px #09191e; animation:honors-appear .35s ease-out; }
.workshop-honors section { margin:0 0 20px; }
.workshop-honors h3 { margin:0 0 14px; font-size:clamp(12px,1.25vw,18px); color:#e8cb83; font-weight:normal; letter-spacing:3px; }
.workshop-honors ul { padding:0; margin:0; list-style:none; }
.workshop-honors li { margin:0 0 14px; font-size:clamp(10px,1vw,14px); line-height:1.8; overflow-wrap:anywhere; }
.workshop-honors small { display:block; color:#8daca6; font-size:clamp(9px,.85vw,12px); line-height:1.8; }
@keyframes honors-appear { from {opacity:0;translate:0 6px;} to {opacity:1;translate:0 0;} }
@media(max-width:760px) { .workshop-return { position:fixed; left:12px; top:18px; width:30px; height:38px; z-index:24; } .workshop-honors { position:fixed; left:18px; right:18px; top:80px; width:auto; max-height:65svh; padding:20px; background:#102126f2; box-shadow:0 10px 35px #07151988; z-index:23; } .workshop-honors h3 { font-size:16px; } .workshop-honors li { font-size:13px; } .workshop-honors small { font-size:11px; } }
@media(prefers-reduced-motion:reduce) { .workshop-honors {animation:none;} }
.room-workshop { background-image:url('./assets/ip/room/workshop-shell-v2.png'); }
.workshop-trophies img { transform:scale(1.12); transform-origin:50% 100%; }
.workshop-honors-close { float:right; padding:0; border:0; background:none; color:#b8c3ac; cursor:pointer; font-size:18px; }
.workshop-honors { left:33%; top:11%; width:25%; max-height:64%; }
.workshop-honors section { margin-bottom:16px; }
.workshop-honors li { margin-bottom:10px; }
@media(max-width:760px) { .workshop-honors { left:18px; top:80px; width:auto; max-height:65svh; } }
/* Screen glass: keep artwork behind the inner bezel, with a restrained CRT layer. */
.workshop-display { overflow:hidden; isolation:isolate; box-shadow:inset 0 0 8px 3px #05101ed9; }
.workshop-display--projects { left:62.1%; top:47%; width:7.3%; height:7.25%; clip-path:polygon(0 1%,99% 0,100% 98%,0 100%); }
.workshop-display--demos { left:72.7%; top:42.8%; width:9.9%; height:10.3%; clip-path:polygon(0 0,100% 1%,99% 100%,0 98%); }
.workshop-display img { opacity:.76; filter:brightness(.65) saturate(.65) contrast(.95); }
.workshop-display::before { content:''; position:absolute; inset:0; z-index:2; background:repeating-linear-gradient(0deg,#0a203b33 0 1px,transparent 1px 3px); box-shadow:inset 0 0 7px 2px #071422; pointer-events:none; }
.workshop-display::after { content:''; position:absolute; inset:0; z-index:3; background:linear-gradient(130deg,#97cbd319,transparent 45%,#13284722); pointer-events:none; }
.workshop-display:hover { filter:brightness(1.12); }
.workshop-trophies { top:11%; }
.room-reader--honors { width:min(760px,calc(100vw - 24px)); }
.room-reader--honors .reader-mascot { display:none; }
.room-reader--honors [data-reader-body] { display:block; }
.room-reader--honors [data-reader-body]>section { margin:0 0 28px; }
.room-reader--honors h3 { font-size:16px; color:#78516b; margin:0 0 14px; letter-spacing:3px; }
.room-reader--honors ul { list-style:none; padding:0; margin:0; }
.room-reader--honors li { display:grid; grid-template-columns:minmax(0,1fr) 110px; align-items:baseline; gap:20px; padding:12px 0; border-bottom:1px solid #b3996d55; font-size:14px; line-height:1.8; }
.room-reader--honors li small { color:#8a6b52; font-size:12px; text-align:right; }
@media(max-width:600px) { .room-reader--honors li {grid-template-columns:1fr;gap:4px;font-size:13px;} .room-reader--honors li small {text-align:left;} }
.honors-shade { position:fixed; inset:0; background:#07151e; opacity:0; pointer-events:none; z-index:100; }
.honors-flight { position:fixed; object-fit:contain; image-rendering:pixelated; pointer-events:none; z-index:101; transform-origin:center; }
/* Honor projection stays on the physical wall, with the original cabinet mascot. */
.room-workshop::after {content:'';position:absolute;inset:0;background:#06141d;opacity:0;transition:opacity .8s;pointer-events:none;z-index:1;}
.room-workshop.is-projecting::after {opacity:.22;}
.workshop-trophies {left:80.5%;top:11.8%;width:13.7%;height:5.5%;z-index:4;filter:none;}
.workshop-trophies img {transform:none;object-fit:fill;pointer-events:none;transition:filter .25s,translate .25s;}
.workshop-trophies:hover img,.workshop-trophies:focus-within img {translate:0 -1px;filter:brightness(1.12) drop-shadow(0 0 3px #ecc77855);}
.workshop-trophies button {position:absolute;top:0;bottom:0;width:25%;padding:0;border:0;background:transparent;cursor:pointer;}
.workshop-trophies button:nth-of-type(1){left:0;}.workshop-trophies button:nth-of-type(2){left:25%;}.workshop-trophies button:nth-of-type(3){left:50%;}.workshop-trophies button:nth-of-type(4){left:75%;}
.workshop-trophies button:focus-visible {outline:1px dotted #ecd28e;outline-offset:3px;}
.workshop-lamp-glow {position:absolute;left:82%;top:3%;width:15%;height:16%;pointer-events:none;background:radial-gradient(ellipse at 50% 15%,#f5ce7155,transparent 70%);opacity:0;z-index:3;transition:opacity .8s;}
.room-workshop:has(.workshop-trophies:hover) .workshop-lamp-glow {opacity:.35;}
.room-workshop.is-projecting .workshop-lamp-glow {opacity:1;}
.workshop-projection-beam {position:absolute;inset:0;pointer-events:none;z-index:2;clip-path:polygon(88% 6%,32% 17%,32% 66%,60% 66%,60% 17%);background:linear-gradient(120deg,transparent 25%,#eccd8920 95%);opacity:0;transition:opacity .8s;}
.is-projecting .workshop-projection-beam {opacity:.65;}
.workshop-honors {position:absolute;left:32%;right:auto;top:17%;width:28%;height:49%;max-height:none;padding:0;background:none;box-shadow:none;overflow:visible;z-index:5;animation:none;opacity:0;filter:blur(3px);translate:0 2px;transition:opacity .45s,filter .45s,translate .45s;color:#d5cea9;text-shadow:0 0 8px #e6c57e33,1px 1px #102329;}
.is-projecting .workshop-honors {opacity:1;filter:blur(0);translate:0 0;transition-delay:.45s;}
.room-workshop[data-honor-phase=open] .workshop-honors {transition-delay:0s;}
.workshop-honors.is-changing {opacity:0;transition:opacity .16s;}
.workshop-honors header {margin-bottom:16px;}
.achievement-heading {font-size:clamp(10px,1vw,14px);letter-spacing:2px;color:#e3c476;}
.workshop-honors h3 {margin:8px 0 6px;font-size:clamp(15px,1.5vw,21px);letter-spacing:3px;color:#e8d29a;}
.workshop-honors header small {font-size:11px;color:#93a99d;}
.workshop-honors-close {float:right;position:relative;z-index:1;line-height:1;color:#a9af96;}
.workshop-honors ul {margin:0;padding:0;list-style:none;}
.workshop-honors .achievement-rows li {position:relative;display:grid;grid-template-columns:32px 1fr 70px;column-gap:8px;margin:0;min-height:49px;font-size:clamp(11px,.95vw,14px);line-height:1.6;transition:opacity .2s,color .2s;outline:none;}
.achievement-year {font-size:10px;color:#8b9d8c;padding-top:3px;}
.achievement-level {text-align:right;color:#d8bb78;font-size:11px;}
.workshop-honors .achievement-description {grid-column:2/4;opacity:0;font-size:10px;color:#a6b7a5;line-height:1.5;transition:opacity .2s;}
.achievement-rows li:is(:hover,:focus) {color:#ffedb9;text-shadow:0 0 6px #e7c57066;}
.achievement-rows li:is(:hover,:focus)::before {content:'✦';position:absolute;left:-13px;top:1px;color:#f0ce79;font-size:10px;}
.achievement-rows li:is(:hover,:focus) .achievement-description {opacity:1;}
.achievement-rows:has(li:hover) li:not(:hover),.achievement-rows:has(li:focus) li:not(:focus) {opacity:.5;}
.achievement-categories {display:flex;gap:10px;flex-wrap:wrap;margin-top:12px;}
.achievement-categories button,.achievement-pagination button {border:0;background:none;padding:3px 0;color:#8b9f94;font:inherit;font-size:10px;cursor:pointer;}
.achievement-categories button[aria-pressed=true] {color:#e7c67c;text-shadow:0 0 6px #d6af5655;}
.achievement-pagination {display:flex;align-items:center;justify-content:center;gap:18px;margin-top:10px;font-size:10px;color:#a2aa91;}
.achievement-pagination button {font-size:19px;color:#ddc58a;}
.achievement-pagination button:disabled {opacity:.25;cursor:default;}
.achievement-empty {font-size:12px;color:#8da297;padding:35px 0;}
.achievement-spark {position:absolute;left:88%;top:13%;z-index:6;pointer-events:none;color:#e8cc82;font-style:normal;font-size:9px;opacity:0;animation:honor-travel var(--travel,650ms) var(--delay) ease-in-out both;}
@keyframes honor-travel {0%{opacity:0;transform:translate(0,0) scale(.5);}20%{opacity:.7;}80%{opacity:.45;}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.6);}}
@media(max-width:760px){.workshop-honors {position:absolute;left:30%;right:auto;top:10%;width:38%;height:61%;padding:0;background:none;box-shadow:none;max-height:none;}.workshop-honors h3{font-size:16px;}.workshop-honors .achievement-rows li {font-size:11px;min-height:47px;grid-template-columns:28px 1fr 64px;gap:5px;}.workshop-honors header{margin-bottom:12px;}.achievement-heading{font-size:10px;}.achievement-categories{gap:8px;}}
@media(prefers-reduced-motion:reduce){.workshop-honors,.workshop-lamp-glow,.room-workshop::after,.workshop-projection-beam{transition-duration:.05s!important;transition-delay:0s!important;}.workshop-trophies:hover img{translate:none;}.achievement-spark{display:none;}}
.workshop-honors,.workshop-honors * {letter-spacing:0;}
.workshop-honors .achievement-heading {font-size:clamp(13px,1.2vw,17px);letter-spacing:0;color:#dec38c;}
.workshop-honors h3 {margin:14px 0 0;font-size:clamp(12px,1.1vw,16px);font-weight:normal;letter-spacing:0;color:#bdc0a6;}
.workshop-honors header {margin-bottom:13px;}
.workshop-honors .achievement-categories {margin:0 0 22px;gap:15px;align-items:center;}
.workshop-honors .achievement-categories button {appearance:none!important;background:none!important;background-color:transparent!important;border:0!important;box-shadow:none!important;border-radius:0!important;padding:2px 0!important;font-size:clamp(10px,.9vw,13px);font-weight:normal;color:#8da49d;position:relative;}
.workshop-honors .achievement-categories button[aria-pressed=true] {color:#e4c888;text-shadow:0 0 6px #d6b56f44;}
.workshop-honors .achievement-categories button[aria-pressed=true]::before {content:'✦';margin-right:5px;font-size:9px;}
.workshop-honors .achievement-categories button:hover {color:#e7d7b1;}
.workshop-honors .achievement-categories button:not([aria-pressed=true]):hover::before {content:'·';position:absolute;left:-7px;color:#dfc682;}
.workshop-honors .achievement-rows li {min-height:58px;font-size:clamp(11px,.9vw,13px);grid-template-columns:28px 1fr 62px;column-gap:6px;line-height:1.5;}
.workshop-honors .achievement-description {opacity:.65;font-size:clamp(9px,.78vw,11px);color:#82a5a3;margin-top:2px;align-self:start;}
.workshop-honors .achievement-level {font-size:10px;}
.workshop-honors .achievement-pagination button {background:none!important;border:0!important;box-shadow:none!important;}
@media(max-width:760px){.workshop-honors .achievement-categories{gap:12px;margin-bottom:18px;}.workshop-honors .achievement-rows li{min-height:54px;}.workshop-honors h3{margin-top:12px;}}
.room-workshop {background-image:url('./assets/ip/room/workshop-wall-v3.png');}
.workshop-case-frame {position:absolute;left:73%;top:-.5%;width:27%;height:21%;pointer-events:none;z-index:3;}
.workshop-case-figurine {position:absolute;left:75%;top:7%;width:4.5%;height:9.3%;object-fit:contain;object-position:center bottom;image-rendering:pixelated;z-index:4;pointer-events:none;}
.workshop-trophies {left:80.3%;top:8%;width:13.9%;height:8.3%;}
.workshop-trophies img {object-fit:fill;filter:brightness(.86) saturate(.85);}
.workshop-lamp-glow {left:79%;top:3%;width:17%;height:16%;}
.workshop-case-figurine {top:5.5%;height:9.3%;}
.workshop-trophies {top:6.5%;height:8.3%;}
.workshop-award-assembly {position:absolute;inset:0;z-index:3;pointer-events:none;--shelf-baseline:14.8%;}
.workshop-award-assembly .workshop-trophies {pointer-events:auto;left:79.8%;top:auto;bottom:calc(100% - var(--shelf-baseline));width:15%;height:6.35%;}
.workshop-award-assembly .workshop-case-figurine {top:auto;bottom:calc(100% - var(--shelf-baseline));}
.workshop-honors {left:28.5%;color:#e0d5b3;}
.achievement-rows:has(li:hover) li:not(:hover),.achievement-rows:has(li:focus) li:not(:focus) {opacity:.82;}
.workshop-honors .achievement-level {color:#e5c685;}
.workshop-honors .achievement-description {opacity:.85;color:#94b3ac;}
@media(max-width:760px){.workshop-honors {left:26%;width:38%;}}

/* One compositor opacity animation owns the reveal; no animated blur or text movement. */
.room-workshop .workshop-honors {
 animation:none;filter:none;translate:none;transition:opacity .4s ease;
 transition-delay:0s;
}
.room-workshop[data-honor-phase=entering] .workshop-honors {
 opacity:0;pointer-events:none;will-change:opacity;
}
.room-workshop[data-honor-phase=open] .workshop-honors {opacity:1;transition:none;}
.room-workshop[data-honor-phase=open] .workshop-honors.is-changing {opacity:0;transition-duration:.18s;}
.room-workshop[data-honor-phase=exiting] .workshop-honors {opacity:0;}
@media(prefers-reduced-motion:reduce) {
 .room-workshop .workshop-honors {transition:none;}
}

/* Individual room props; supported objects are anchored inside the support's own coordinates. */
.room-props {position:absolute;inset:0;z-index:1;pointer-events:none;}
.room-prop {position:absolute;display:block;height:auto;image-rendering:pixelated;pointer-events:none;filter:brightness(.86) saturate(.8);}
.room-prop--floor {left:var(--x);bottom:var(--base);width:var(--size);}
.room-prop--hanging {left:70%;top:0;width:5.8%;filter:brightness(.82) saturate(.8);}
.room-prop-assembly {position:absolute;}
.room-prop-assembly .prop-support {inset:0;width:100%;height:100%;}
.room-prop-assembly--cushion {left:65.5%;bottom:15.5%;width:11.5%;aspect-ratio:2.21;}
.room-prop-assembly--cushion .prop-head {left:9%;bottom:54%;width:70%;}
.room-prop-assembly--cushion .prop-cushion-star {left:76%;bottom:44%;width:21%;}
.room-prop-assembly--tea {left:47%;bottom:3.5%;width:15%;aspect-ratio:2.49;}
.room-prop-assembly--tea .prop-mug {left:24%;bottom:61%;width:18%;}
.room-prop-assembly--tea .prop-headphones {left:62%;bottom:55%;width:27%;}
.room-prop-assembly--trunk {left:83%;bottom:.7%;width:15%;aspect-ratio:1.49;}
.room-prop-assembly--trunk .prop-trunk-book {left:15%;bottom:55%;width:65%;}

/* Keep the bubble and its fixed-size lower-left tail in room coordinates. */
.room-dialogue { position:absolute; transform:none; transition:opacity .25s; }
.room-dialogue.is-revealed { transform:none; }

/* Workshop host stays at the computer and turns back only while a conversation is open. */
.workshop-host { position:absolute; left:65.5%; bottom:11%; width:11%; padding:0; border:0; background:none; z-index:6; cursor:pointer; isolation:isolate; }
.workshop-host::before { content:''; position:absolute; left:17%; bottom:-1%; width:66%; height:6%; background:#07100ee0; border-radius:50%; filter:blur(2px); pointer-events:none; z-index:-1; }
.workshop-host img { display:block; width:100%; height:auto; image-rendering:pixelated; filter:brightness(.86) saturate(.85) drop-shadow(0 1px 1px #06131b88); transform-origin:50% 90%;  }
.workshop-host.is-talking img { animation:none; }
.workshop-host:focus-visible { outline:2px solid #e8cb83; outline-offset:4px; }

@media(prefers-reduced-motion:reduce) { .workshop-host img {animation:none;} }

/* The computer is on the right: mirror only the frame so its tail points to the gamer. */
.room-world[data-scene="workshop"] .room-dialogue { border-image:none; }
.room-world[data-scene="workshop"] .room-dialogue::before { content:''; position:absolute; inset:-38px -38px -48px; border:solid transparent; border-width:38px 38px 48px; border-image:url('./assets/ip/room/dialogue-bubble-v2.png') 300 220 260 330 fill / 38px 38px 48px / 0 stretch; transform:scaleX(-1); pointer-events:none; }
.room-world[data-scene="workshop"] .room-dialogue>span,.room-world[data-scene="workshop"] .room-dialogue>p,.room-world[data-scene="workshop"] .room-dialogue>div { position:relative; }

/* Daily maintenance notes live on the empty middle wall of the memory room. */
.room-maintenance { position:absolute; inset:0; z-index:4; background:#2c1828 url('./assets/ip/scenes/experience-memory-room.webp') center/100% 100% no-repeat; }
.maintenance-heading { position:absolute; left:29%; top:28%; width:38%; color:#f3d7a4; text-align:center; text-shadow:1px 2px #1d1024; }
.maintenance-heading h2 { margin:0 0 6px; font-weight:normal; font-size:clamp(16px,1.8vw,27px); letter-spacing:3px; }
.maintenance-notes { position:absolute; left:29.5%; top:36%; width:23%; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(12px,1.3vw,20px); }
.room-world .maintenance-note { position:relative; display:block; min-width:0; padding:0; aspect-ratio:4/5; border:0; border-radius:0; background:transparent url('./assets/ip/room/maintenance-card-v1.svg') center/100% 100% no-repeat; color:#4c392f; text-align:center; box-shadow:none; transform:rotate(var(--note-angle)); transition:transform .18s,filter .18s; image-rendering:pixelated; }
.maintenance-note time { position:absolute; left:10%; right:10%; bottom:8%; font-size:clamp(9px,.7vw,11px); line-height:1.2; color:#796653; }
.room-world .maintenance-note:hover,.room-world .maintenance-note:focus-visible { transform:rotate(0) translateY(-3px); filter:brightness(1.12); outline:0; }
.room-world .maintenance-note:focus-visible { outline:2px dashed #f4dcac; outline-offset:3px; }
.maintenance-calendar { position:absolute; left:55%; top:36%; width:14%; aspect-ratio:4/5; box-sizing:border-box; padding:3.2% 1.2% 1%; background:transparent url('./assets/ip/room/maintenance-calendar-v1.svg') center/100% 100% no-repeat; color:#533e37; image-rendering:pixelated; }
.maintenance-calendar header { display:flex; align-items:center; justify-content:space-between; gap:3px; }
.maintenance-calendar header strong { font-weight:normal; font-size:clamp(10px,.9vw,14px); white-space:nowrap; }
.room-world .maintenance-calendar button { border:0; padding:0; background:none; color:inherit; font-size:inherit; }
.maintenance-calendar header button { font-size:20px!important; padding:0 3px!important; }
.maintenance-calendar-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:2px; margin-top:5px; font-size:clamp(9px,.75vw,12px); line-height:1.6; text-align:center; }
.maintenance-calendar-grid .calendar-weekday { color:#947760; font-size:.85em; }
.maintenance-calendar-grid .has-note { color:#7f4537; background:#bb85502e; box-shadow:inset 0 -2px #9e684d; }
.maintenance-calendar-grid .has-note:hover,.maintenance-calendar-grid .has-note:focus-visible { background:#b9844a55; outline:1px solid #9c6b43; }
.maintenance-calendar>p { margin:6px 0 0; font-size:clamp(8px,.6vw,10px); line-height:1.5; text-align:center; color:#8c7057; }
.maintenance-status { position:absolute; left:30%; top:43%; width:22%; text-align:center; color:#e6cfaa; font-size:13px; }
.maintenance-status:empty { display:none; }
.room-dialogue>div { flex-wrap:wrap; justify-content:flex-start; }
@media(prefers-reduced-motion:reduce) { .maintenance-note { transition:none; } }

@media(max-width:900px) { .maintenance-calendar header strong {font-size:9px;} .maintenance-calendar-grid {gap:0;font-size:8px;line-height:1.4;} .maintenance-calendar>p {display:none;} }



/* Log details are a compact sheet of paper, independent of the book reader frame. */
.room-reader.room-reader--maintenance { width:min(640px,calc(100vw - 36px)); max-height:82svh; min-height:0; padding:26px 32px 28px; border:0; border-image:none; background:linear-gradient(105deg,#e5d3ad,#f3e6c8 48%,#e8d7b3); border-radius:2px; box-shadow:0 16px 48px #100b2470,3px 4px 0 #6b503b; color:#513d33; overflow:hidden; }
.room-reader--maintenance .reader-mascot,.room-reader--maintenance .reader-scroll-rail { display:none; }
.room-reader.room-reader--maintenance>header { min-height:26px; padding:0; align-items:center; font-size:11px; color:#947559; letter-spacing:.5px; }
.room-reader--maintenance>header button { padding:0 4px; border:0; background:none; color:#8f6a52; font-size:20px; line-height:1; }
.room-reader.room-reader--maintenance>h2 { margin:12px 0 20px; padding:0 20px 16px 0; border-bottom:1px solid #b3966a55; font-size:24px; line-height:1.45; color:#533b30; }
.room-reader.room-reader--maintenance [data-reader-body] { display:block; padding:0 6px 0 0; overflow:auto; scrollbar-width:thin; scrollbar-color:#b59a73 transparent; }
.room-reader--maintenance [data-reader-body]::-webkit-scrollbar { display:block; width:4px; }
.room-reader--maintenance [data-reader-body]::-webkit-scrollbar-thumb { border:0; background:#b59a73; }
.room-reader.room-reader--maintenance p { margin:0 0 16px; font-size:14px; line-height:1.9; color:#75583f; }
.room-reader.room-reader--maintenance ul { list-style:none; padding:0; margin:0; }
.room-reader.room-reader--maintenance li { position:relative; margin:0; padding:9px 0 9px 17px; font-size:14px; line-height:1.85; color:#604837; }
.room-reader--maintenance li::before { content:''; position:absolute; left:0; top:19px; width:4px; height:4px; background:#b98f53; }
@media(max-width:600px) { .room-reader.room-reader--maintenance {padding:20px;max-height:86svh;} .room-reader.room-reader--maintenance>h2 {font-size:20px;} .room-reader.room-reader--maintenance li {font-size:13px;} }

/* Original chunky RPG prop with separately rendered 3x5 pixel roller numerals. */
.maintenance-visit-counter { position:absolute; left:18.5%; top:69%; width:10.6%; aspect-ratio:3.3/1; color:#efd4a0; pointer-events:none; isolation:isolate; --visit-pixel:2px; }
.maintenance-visit-counter>img { display:block; width:100%; height:100%; object-fit:fill; image-rendering:pixelated; filter:brightness(.9) saturate(.85) drop-shadow(2px 2px 0 #180f2166); }
.visit-rollers { position:absolute; left:17%; right:18%; top:40%; height:37%; display:flex; gap:1px; align-items:stretch; overflow:hidden; }
.visit-wheel { position:relative; flex:1; min-width:0; height:100%; overflow:hidden; background:#34242d; box-shadow:inset 0 2px #211722,inset 0 -2px #4d3540; }
.visit-wheel::after { content:''; position:absolute; left:0; right:0; top:50%; height:1px; background:#170e1e55; pointer-events:none; }
.visit-wheel-track { display:flex; flex-direction:column; width:100%; height:200%; transform:translateY(0); }
.visit-wheel-track>span { display:grid; place-items:center; flex:0 0 50%; height:50%; }
.visit-glyph { display:grid; grid-template-columns:repeat(3,var(--visit-pixel)); grid-template-rows:repeat(5,var(--visit-pixel)); width:calc(3 * var(--visit-pixel)); height:calc(5 * var(--visit-pixel)); }
.visit-glyph i { display:block; }
.visit-glyph i.is-ink { background:#efd4a0; }
.maintenance-visit-counter>small { position:absolute; left:49%; top:calc(100% + 7px); width:38%; box-sizing:border-box; padding:4px 2px 3px; transform:rotate(-3deg); background:#d7bd7f; color:#685036; font-family:'Zpix','Microsoft YaHei',sans-serif; font-size:clamp(7px,.65vw,10px); line-height:1.3; white-space:nowrap; text-align:center; filter:drop-shadow(1px 2px 0 #21152588); clip-path:polygon(0 0,94% 0,94% 7%,100% 7%,100% 92%,91% 92%,91% 100%,5% 100%,5% 94%,0 94%); }
.maintenance-visit-counter>small::before { content:''; position:absolute; top:0; left:23%; width:35%; height:4px; transform:rotate(7deg); background:#e3d4afa0; }
@media(min-width:1100px) { .maintenance-visit-counter {--visit-pixel:3px;} }
@media(min-width:1800px) { .maintenance-visit-counter {--visit-pixel:4px;} }
@media(min-width:2300px) { .maintenance-visit-counter {--visit-pixel:5px;} }

/* A month is one wallful: extra photographs form a fourth-slot stack. */
.room-world .maintenance-photo-stack { isolation:isolate; background-image:url('./assets/ip/room/maintenance-card-castle-v1.svg'); }
.maintenance-photo-stack::before,.maintenance-photo-stack::after { content:'';position:absolute;inset:0;pointer-events:none;background:center/100% 100% no-repeat;image-rendering:pixelated; }
.maintenance-photo-stack::before { background-image:url('./assets/ip/room/maintenance-card-sunset-v1.svg');transform:rotate(-7deg) translate(-3px,-2px);z-index:-1; }
.maintenance-photo-stack::after { background-image:url('./assets/ip/room/maintenance-card-moon-v1.svg');transform:rotate(6deg) translate(3px,1px);z-index:-2; }
.maintenance-stack-count { position:absolute;left:10%;right:10%;bottom:8%;font-size:clamp(9px,.7vw,11px);line-height:1.2;color:#796653; }
.maintenance-quiet-note { grid-column:1/-1;justify-self:center;max-width:80%;margin:25px 0 0;padding:12px 14px;background:#d8c18e;color:#68513b;font-size:clamp(10px,.9vw,14px);line-height:1.7;transform:rotate(-2deg);box-shadow:2px 3px #21152566; }
.room-reader--maintenance .maintenance-month-entry { padding:0 0 22px;margin:0 0 22px;border-bottom:1px dashed #b3966a66; }
.room-reader--maintenance .maintenance-month-entry:last-child { border:0;margin:0;padding:0; }
.room-reader--maintenance .maintenance-month-entry h3 { font-size:16px;line-height:1.6;margin:0 0 10px;color:#72513c; }
/* Remove only the baked-in figurine; the original room remains unchanged elsewhere. */
.room-maintenance::before { content:'';position:absolute;left:56.3%;top:81.5%;width:6.2%;height:11.5%;background:url('./assets/ip/room/maintenance-desk-clean-v1.png') 60.02% 92.09% / 1612.903% 869.565% no-repeat;pointer-events:none;image-rendering:pixelated; }
/* The frame edge hides the body; no desk intersection or standing pose. */
.room-maintenance { overflow:hidden; }
.room-world .maintenance-host { position:absolute;left:-1.2%;top:54%;width:9%;aspect-ratio:280/512;padding:0;border:0;border-radius:0;background:none;box-shadow:none;overflow:visible;z-index:6;cursor:pointer; }
.maintenance-host img { display:block;width:100%;height:auto;image-rendering:pixelated;transform:none;transform-origin:0 50%; }
.room-world[data-scene="maintenance"] .room-dialogue { z-index:8;transform:none; }

.maintenance-host img.has-frames { background-image:url("./assets/ip/room/maintenance-side-peek-sheet-v1.png");background-size:548.5714286% 200%;background-repeat:no-repeat; }

.record-orbit.is-loading .record-orbit-items,.record-orbit.is-loading .record-orbit-caption { opacity:0;pointer-events:none; }
.room-host img {transform-origin:50% 90%;}

/* Bedroom responses come from dialogue events, without unrelated pose/idle loops. */
.room-host img,.room-host:hover img,.room-host:focus-visible img,.room-host.is-talking img {animation:none;}

.river-routes {position:absolute;top:20px;right:22px;display:flex;gap:12px;z-index:8;}
.river-routes button {background:#12233bd9;color:#ebdab7;border:1px solid #728292;padding:10px;font:inherit;font-size:12px;}

/* Prone mascot shares a fixed blanket contact baseline in every frame. */
.room-host {left:21.5%;top:58.8%;width:13.4%;height:auto;aspect-ratio:512/384;padding:0;isolation:isolate;}
.room-host img {display:block;width:100%;height:100%;object-fit:fill;background:url('./assets/ip/room/bedroom-sleep-sheet-v1.png') 0 12.5%/300% 266.6666667% no-repeat;filter:drop-shadow(0 2px 0 #24203955);}
.room-host::before {content:'';position:absolute;left:14%;right:5%;bottom:2%;height:5%;background:#211d3b70;clip-path:polygon(8% 0,92% 0,100% 50%,92% 100%,8% 100%,0 50%);z-index:-1;pointer-events:none;}

/* Keep one sleeping silhouette and interpolate tiny breaths at the mattress baseline. */
.room-host.is-sleeping>img {animation:bed-sleep-breath 5.6s ease-in-out infinite;transform-origin:50% 96%;}
@keyframes bed-sleep-breath {0%,100%{transform:scaleY(1);}50%{transform:scaleY(1.018);}}
.bed-dream {position:absolute;left:66%;top:-25%;width:30%;aspect-ratio:1/1;pointer-events:none;animation:bed-dream-appear 4.8s ease-in-out both;}
.bed-dream-cloud {display:flex;width:100%;height:86%;align-items:center;justify-content:center;background:#f1e5ca;box-shadow:2px 2px 0 #382a4155;clip-path:polygon(14% 0,86% 0,86% 8%,94% 8%,94% 20%,100% 20%,100% 80%,92% 80%,92% 92%,82% 92%,82% 100%,18% 100%,18% 92%,8% 92%,8% 82%,0 82%,0 18%,8% 18%,8% 8%,14% 8%);}
.room-host .bed-dream img {display:block;width:65%;height:65%;object-fit:contain;image-rendering:pixelated;background:none;filter:none;animation:none;transform:none;}
.bed-dream::before,.bed-dream::after {content:'';position:absolute;background:#f1e5ca;box-shadow:1px 1px #382a4144;}
.bed-dream::before {width:10%;height:10%;left:12%;top:95%;}
.bed-dream::after {width:6%;height:6%;left:0;top:111%;}
@keyframes bed-dream-appear {0%,100%{opacity:0;transform:translateY(3px);}8%,90%{opacity:1;transform:translateY(0);}}
@media(prefers-reduced-motion:reduce){.room-host.is-sleeping>img,.bed-dream {animation:none;}}

.room-host>.bed-dream:not([hidden]) {display:block;}

/* Blend the two sleeping drawings slowly instead of snapping their silhouettes. */
.room-host>.bed-sleep-overlay {display:none;position:absolute;inset:0;background:url('./assets/ip/room/bedroom-sleep-sheet-v1.png') 50% 12.5%/300% 266.6666667% no-repeat;pointer-events:none;filter:drop-shadow(0 2px 0 #24203955);}
.room-host.is-sleeping>.bed-sleep-overlay {display:block;animation:bed-sleep-pose 5.6s ease-in-out infinite;transform-origin:50% 96%;}
@keyframes bed-sleep-pose {0%,12%,100%{opacity:0;transform:scaleY(1);}44%,58%{opacity:1;transform:scaleY(1.018);}}
@media(prefers-reduced-motion:reduce){.room-host.is-sleeping>.bed-sleep-overlay {display:none;animation:none;}}

/* Keep first-use paper content together until its artwork has decoded. */
[data-visual-pending] {visibility:hidden!important;}
.room-dialogue.visual-art-fallback {background:#30253d;border:2px solid #d2af70;box-shadow:0 6px 24px #100b2470;}
.guestbook-dialog.visual-art-fallback {background:#eddfbd;border:2px solid #b29a75;}
.visual-load-status {position:fixed;left:50%;bottom:28px;transform:translateX(-50%);z-index:3000;padding:12px 20px;background:#211c30ed;border:1px solid #c5a76b;color:#f3dfb3;font:14px 'Zpix','Microsoft YaHei',sans-serif;max-width:calc(100vw - 40px);text-align:center;pointer-events:none;}