.room-view { background:#39362f; overflow:hidden; --chrome-ink:#fff8e4; --chrome-mark-shadow:0 2px 6px #2a1b11; --chrome-mark-bg:#24180f3d; --chrome-nav-bg:#24180f3d; --chrome-halo:0 0 16px 8px #24180f3d; --chrome-nav-padding:2px; --chrome-icon-opacity:.78; --chrome-current-opacity:.95; --chrome-icon-shadow:drop-shadow(0 1px 2px #1c1008cc); }
.room-view .desk { display:block; position:fixed; inset:0; width:100%; height:100svh; min-height:0; padding:0; overflow:auto; overscroll-behavior:none; }
.room-view .stage,.room-view .stage:has(.notebook.is-open) { isolation:isolate; position:relative; display:block; width:max(100vw,150svh,900px); height:max(66.6667vw,100svh,600px)!important; min-height:0; margin:0; padding:0; perspective:none; background:url('../../assets/room/desk-room-v2.webp') center/100% 100% no-repeat,var(--room-preview) center/100% 100% no-repeat; }
.room-shelf-swap { position:absolute; inset:0; z-index:1; pointer-events:none; background:url('../../assets/room/desk-room-shelf-swap.webp') center/100% 100% no-repeat; }
.room-shelf-swap-upper { -webkit-mask-image:radial-gradient(ellipse 10.5% 9% at 75.5% 35.7%,#000 65%,transparent 100%); mask-image:radial-gradient(ellipse 10.5% 9% at 75.5% 35.7%,#000 65%,transparent 100%); }
.room-shelf-swap-lower { -webkit-mask-image:radial-gradient(ellipse 11.8% 9% at 77.4% 67.4%,#000 65%,transparent 100%); mask-image:radial-gradient(ellipse 11.8% 9% at 77.4% 67.4%,#000 65%,transparent 100%); }
.room-shelf-yearbook { z-index:10; }
.room-view .stage [data-object="games"] { display:none; }
/* The first paint is a 5 KB copy of the same photograph, not loose app icons on an empty desk. */
.room-view .stage::before { content:''; position:absolute; inset:0; z-index:20; pointer-events:none; background:var(--room-preview) center/100% 100% no-repeat; opacity:0; visibility:hidden; transition:opacity .32s ease,visibility 0s .32s; }
html.room-loading .room-view .stage::before { opacity:1; visibility:visible; transition:none; }
html.room-photo-fallback .room-view .stage { background-image:var(--room-preview); }
/* The resting objects belong to one photograph. Only their hit regions are layered. */
.room-view .stage .scene-hit:not(.is-open),.room-view .stage .scene-hit:not(.is-open):hover {
  position:absolute; left:var(--scene-left); top:var(--scene-top); width:var(--scene-width)!important; height:var(--scene-height)!important; min-height:0!important; max-width:none!important; margin:0; padding:0; border:0; border-radius:0; background:none; box-shadow:none; filter:none; transform:none!important; translate:none!important; aspect-ratio:auto; cursor:pointer; touch-action:pan-x pan-y;
}
.room-view .stage .scene-hit > .object-photo,.room-view .stage .scene-hit .etch-hardware,.room-view .stage .walkman-photo { opacity:0; pointer-events:none; }
.room-view .stage .scene-hit .object-resizer { display:none; }
.room-view .stage .desk-sticker { display:none!important; }
.scene-highlight { position:absolute; z-index:4; inset:0; pointer-events:none; background-repeat:no-repeat; clip-path:var(--scene-outline); opacity:0; filter:brightness(1.12) saturate(1.04); transition:opacity .18s ease; }
.room-view .scene-hit:hover > .scene-highlight,.room-view .scene-hit:focus-visible > .scene-highlight,.room-view .scene-hit:has(:focus-visible) > .scene-highlight { opacity:1; }
.room-view .scene-hit:focus-visible,.room-view .scene-hit:has(:focus-visible) { outline:2px solid #ffefb8; outline-offset:4px; border-radius:3px; }
.room-view .stage .notebook:not(.is-open) .cover { opacity:0; }
.room-view .notebook-bookmark { top:2%; right:25%; width:9px; height:25px; z-index:6; }
.room-view .stage .notebook.is-open > .scene-highlight { display:none; }
.room-view .stage .notebook { perspective:1900px; }
/* Live clippings and drawings sit inside the photographed frames. */
/* The bulletin board is its own photograph on the wall, graded into the room's light; the clippings ride on its cork. */
.room-view .stage .quote-board > .object-photo { opacity:1; position:absolute; inset:0; width:100%; height:100%; object-fit:fill; filter:brightness(.8) sepia(.2) saturate(.82) drop-shadow(3px 6px 5px #1b120a8c); transition:filter .18s; }
.room-view .stage .quote-board:is(:hover,:focus-visible) > .object-photo { filter:brightness(.92) sepia(.16) saturate(.86) drop-shadow(3px 6px 5px #1b120a8c); }
.room-view .stage .quote-board .board-preview { z-index:5; left:4.2%; right:4.2%; top:6.4%; bottom:6.8%; aspect-ratio:auto; filter:brightness(.8) sepia(.26) saturate(.76); }
.room-wall-patch { position:absolute; z-index:1; pointer-events:none; user-select:none; }
.room-view .stage .etch-shell-preview { display:block; position:absolute; inset:0; width:100%; height:100%; aspect-ratio:auto; }
.room-view .stage .etch-shell-preview .etch-screen-art { z-index:5; left:13.1%; top:13.1%; width:74.5%; height:62.6%; border-radius:2%; object-fit:cover; filter:saturate(.72) contrast(.9) brightness(.93); }
.room-view .stage .cd-player .music-open { position:absolute; inset:0; width:100%; height:100%; cursor:pointer; }
.room-view .stage .cd-player:has(.is-playing)::after { content:''; position:absolute; z-index:6; width:3px; height:3px; border-radius:50%; background:#c4f3a0; box-shadow:0 0 4px #b7f789; left:78%; top:70%; pointer-events:none; }
.room-view .stage:has(.notebook.is-open) .object-rack { display:contents; }
.room-view .stage:has(.notebook.is-open) .desk-sticker { display:none!important; }
.room-view .stage .notebook.is-open { position:fixed; z-index:10000; left:50vw; top:50svh; width:min(430px,calc((100vw - 32px)/2)); max-width:none; height:min(590px,calc(100svh - 60px)); min-height:0; margin:0; transform:translateY(-50%); translate:none!important; filter:drop-shadow(0 20px 40px #0008); }
.room-view .stage:has(.notebook.is-open)::after { content:''; position:fixed; z-index:150; inset:0; pointer-events:none; background:#19150b80; backdrop-filter:blur(3px); }
.room-view .stage .notebook.is-open .cover { opacity:1; visibility:visible; transform:rotateY(-180deg); }
.room-view .stage .notebook.is-open .cover-front { visibility:hidden; }
.room-view .stage .notebook.is-open .cover-back { transform:rotateY(180deg); }
.room-pan { position:fixed; z-index:100; top:54%; width:44px; height:44px; padding:0; border:1px solid #f6e4c955; border-radius:6px; background:#24180f8a; color:#fff6df; font:29px/1 Georgia,serif; cursor:pointer; backdrop-filter:blur(4px); }
.room-pan[hidden],.room-view:has(.notebook.is-open) .room-pan { display:none; }
.room-pan-left { left:8px; } .room-pan-right { right:8px; }
.room-pan:focus-visible { outline:2px solid #fff4cb; outline-offset:3px; }
@keyframes room-pan-invite { 0%,100% { box-shadow:0 0 0 0 #ffe9bd00; } 35%,70% { box-shadow:0 0 0 7px #ffe9bd44; } }
.room-pan.is-inviting { animation:room-pan-invite 5s ease-out 1; }
@media(prefers-reduced-motion:reduce) { .room-pan.is-inviting { animation:none; background:#f6dca533; box-shadow:0 0 8px #f6dca580; } }
@media(max-width:650px) {
  .room-view .stage .notebook.is-open { width:calc((100vw - 24px)/2); height:min(540px,calc(100svh - 70px)); }
}
.room-view .stage .desk-sticker.scene-hit { display:block!important; }
.room-view .stage .clay-sticker.scene-hit > img { opacity:0; }
/* Preserve the photographed monitor in the cross-document zoom snapshot. */
.room-view .my-computer > .scene-highlight { opacity:1; filter:none; }
.room-view .my-computer:hover > .scene-highlight,.room-view .my-computer:focus-visible > .scene-highlight { filter:brightness(1.12) saturate(1.04); }

.room-poster { position:absolute; left:0; top:0; z-index:2; display:block; overflow:hidden; transform-origin:0 0; background:#251b18; color:#e8d5b7; text-decoration:none; filter:brightness(.69) sepia(.2) saturate(.73); transition:filter .18s; }
.room-poster:hover { filter:brightness(.9) sepia(.15) saturate(.8); }
.room-poster img { display:block; width:100%; height:100%; object-fit:cover; }
.room-poster span { position:absolute; left:8%; right:8%; bottom:5%; text-transform:uppercase; font:bold 17px/1.25 Georgia,serif; letter-spacing:2px; text-shadow:0 1px 3px #000; }
.room-poster-lebron img { object-position:50% 35%; }
.room-poster-lebron span { font:700 9px/1.15 Impact,Arial,sans-serif; letter-spacing:2px; }
@media(prefers-reduced-motion:reduce) { .scene-highlight,.room-poster { transition:none; } }

.room-poster-kaho img { object-position:50% 50%; }

.room-poster-wwe img { object-position:50% 38%;  }

/* Paper takes on the same warm, shaded light as the shelf around it. */
.room-view .stage .board-preview .board-clipping { background:#e5d5b8; box-shadow:2px 4px 5px #38251480; }
.room-view .stage .board-preview .board-clipping:nth-child(3n) { background:#eaddc5; }
.room-view .stage .board-preview .board-clipping:nth-child(5n) { background:#d4c09b; }
.room-view .stage .board-preview .board-clipping::after { opacity:.24; }
.room-view .stage .board-preview::after { content:''; position:absolute; inset:0; z-index:2; pointer-events:none; background:linear-gradient(115deg,#f1d8a40a,#66422220); box-shadow:inset 0 3px 5px #3e281c35; }

/* Idle life: after ~10s untouched, dust drifts and a quote corner lifts. */
.room-ambient-dust { position:absolute; z-index:3; inset:0; pointer-events:none; }
.room-ambient-dust i { position:absolute; width:var(--size,2.5px); height:var(--size,2.5px); border-radius:50%; background:#fff3da; filter:blur(.8px); opacity:0; }
.is-idle .room-ambient-dust i { animation:room-dust var(--dur) linear var(--delay) infinite; }
@keyframes room-dust {
  0% { transform:translate(0,0); opacity:0; }
  14% { opacity:.55; }
  62% { opacity:.32; }
  100% { transform:translate(var(--dx),var(--dy)); opacity:0; }
}
.room-view #board-preview-canvas .board-clipping.ambient-lift { transition:translate 1.8s ease,rotate 1.8s ease,box-shadow 1.8s ease; }
.is-idle #board-preview-canvas .board-clipping.ambient-lift { translate:2px -3px; rotate:1.6deg; box-shadow:3px 7px 9px #38251499; }
.ambient-curl { position:absolute; right:0; bottom:0; width:24%; height:24%; pointer-events:none; clip-path:polygon(100% 0,0 100%,100% 100%); background:linear-gradient(315deg,transparent 46%,#6d5c3f80 50%,#efe6cf 56%,#fffdf2 100%); transform:scale(0); transform-origin:100% 100%; transition:transform 1.8s ease; }
.is-idle .ambient-curl { transform:scale(1); }
@media(prefers-reduced-motion:reduce) {
  .room-ambient-dust,.ambient-curl { display:none; }
}

/* Time-of-day light: the whole room grades with the visitor's sun (daylight.js). */
.room-daylight,.room-daylight-warm { position:absolute; inset:0; pointer-events:none; opacity:0; }
/* Above the z-index:10 hit regions, whose live previews and monitor highlight must share the room's light. */
.room-daylight-warm { z-index:11; mix-blend-mode:soft-light; }
.room-daylight { z-index:11; mix-blend-mode:multiply; }
@media(prefers-reduced-motion:no-preference) {
  .room-daylight,.room-daylight-warm { transition:background-color 240s linear,opacity 240s linear; }
}

/* A stack of Bollywood one-sheets on the wall; tapping moves into the collection. */
.room-poster-classics { appearance:none; padding:0; border:0; text-align:initial; cursor:pointer; box-shadow:none; }
.room-poster-classics canvas { display:block; width:100%; height:100%; }
.room-poster-classics:focus-visible { outline:2px solid #ffefb8; outline-offset:4px; }

/* The poster stays in place while the camera approaches and the viewer appears. */
.room-poster-sheet[hidden] { display:none; }
.room-poster-sheet { position:fixed; z-index:10000; inset:0; display:grid; place-items:center; background:#19150b66; backdrop-filter:blur(1.5px); -webkit-backdrop-filter:blur(1.5px); opacity:0; transition:opacity .34s ease .16s; }
.room-poster-sheet.is-open { opacity:1; }
.room-poster-sheet:not(.is-open) { transition-delay:0s; }
.room-poster-sheet-close { position:absolute; inset:0; width:100%; height:100%; padding:0; border:0; background:none; cursor:zoom-out; text-indent:-9999px; }
.room-poster-sheet-figure { position:relative; z-index:1; width:min(400px,calc((100svh - 140px)*.6667),calc(100vw - 56px)); aspect-ratio:2/3; cursor:ew-resize; touch-action:pan-y; background:#251b18; box-shadow:0 30px 70px #140d06cc,0 6px 18px #140d0699; outline:none; transition:transform .26s cubic-bezier(.32,.72,.35,1); }
.poster-return { z-index:2; }
.room-poster-sheet > .keyboard-shuffle { position:absolute; bottom:max(16px,env(safe-area-inset-bottom)); left:50%; translate:-50% 0; }
.room-poster-sheet-figure canvas { display:block; width:100%; height:100%; }
.room-view:has(.room-poster-sheet:not([hidden])) .room-pan { display:none; }
@media(max-width:650px) { .room-poster-sheet-figure { width:min(calc(100vw - 44px),calc((100svh - 150px)*.6667)); } }
@media(prefers-reduced-motion:reduce) { .room-poster-sheet,.room-poster-sheet-figure { transition:none; } }

/* The photographed tray notebook generated with a garbled label; the real composition-book cover rides over it, no stickers. */
.room-tray-notebook { position:absolute; left:0; top:0; z-index:6; pointer-events:none; transform-origin:0 0; container-type:inline-size; overflow:hidden; filter:brightness(.76) sepia(.3) saturate(.72) blur(.3px); }
.room-tray-notebook img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.room-tray-notebook-label { position:absolute; top:24%; left:31%; right:15%; height:23%; display:flex; flex-direction:column; justify-content:center; text-align:center; color:#2c2a26; }
.room-tray-notebook-label span { font:900 4.9cqw/1.05 Arial,Helvetica,sans-serif; letter-spacing:.01em; margin-bottom:1.4cqw; }
.room-tray-notebook-label strong { display:block; margin:0 8%; border-bottom:1px solid #8d8c86; font:400 7.2cqw/1.12 var(--hand); font-weight:400; white-space:nowrap; }
.room-tray-notebook-label em { display:block; margin:1.2cqw 8% 0; font:400 6.1cqw/1.12 var(--hand); font-style:normal; white-space:nowrap; }

/* Original photographic tape lands over each single sheet of printed paper. */
.room-poster-photo-tape { position:absolute; inset:0; z-index:3; pointer-events:none; background:url("../../assets/room/desk-room-v2.webp") center/100% 100% no-repeat; }

.room-poster-sheet-figure { perspective:1400px; transform-origin:50% 0; }
.room-poster-sheet-figure canvas { rotate:y var(--poster-bend,0deg); transform-origin:50% 0; transition:rotate 160ms; box-shadow:2px 3px 0 #c9baa2,5px 14px 28px #0008; }
@media(prefers-reduced-motion:reduce) { .room-poster-sheet-figure canvas { rotate:none!important; transition:none; } }

/* The WebGL photograph (depth.js) replaces the CSS photograph once it has drawn. */
.room-photo { position:absolute; inset:0; z-index:-1; width:100%; height:100%; pointer-events:none; opacity:0; transition:opacity .35s ease; }
.room-photo.is-ready { opacity:1; }
/* Everything laid on the photograph slides with the pixels at its own depth. */
.room-has-depth .stage :is(.scene-hit:not(.is-open),.room-poster,.room-poster-photo-tape,.room-tray-notebook,[data-depth-track]) { translate:calc(var(--par-x,0px) * var(--depth-rel,0)) calc(var(--par-y,0px) * var(--depth-rel,0))!important; }
.room-has-depth .stage .scene-hit:not(.is-open):hover { translate:calc(var(--par-x,0px) * var(--depth-rel,0)) calc(var(--par-y,0px) * var(--depth-rel,0))!important; }

/* Room-owned light (lights.js). --room-night comes from daylight.js: 0 by day, 1 after dusk. */
.room-lights { position:absolute; inset:0; z-index:11; pointer-events:none; }
.room-lights > div { position:absolute; inset:0; pointer-events:none; }
.room-lights .room-night-shade { background:radial-gradient(ellipse 34% 40% at 50% 42%,transparent 0%,#0b1233 100%); mix-blend-mode:multiply; opacity:calc(var(--room-night,0) * .62); }
.room-lights .room-night-window { background:url("../../assets/room/desk-room-v2.webp") center/100% 100% no-repeat,linear-gradient(180deg,#0a1331 0%,#17234a 58%,#2c2941 100%); background-blend-mode:multiply; filter:brightness(.62) saturate(.8); opacity:calc(var(--room-night,0) * .9); }
.room-lights .room-streetlamp { inset:auto; left:3.2%; top:8%; width:8.4%; height:34%; background:radial-gradient(ellipse at 72% 38%,#ffc77aa6 0%,#ff9c4a47 18%,transparent 58%); mix-blend-mode:screen; opacity:var(--room-night,0); }
.room-lights .room-crt-screen { background:url("../../assets/room/desk-room-v2.webp") center/100% 100% no-repeat; filter:brightness(1.04) saturate(1.05); opacity:var(--room-night,0); }
.room-lights .room-crt-spill { background:radial-gradient(ellipse 22% 24% at 49.8% 34.5%,#8fb8ff57,transparent 72%),radial-gradient(ellipse 30% 9% at 49.6% 56.5%,#8fb6ff3d,transparent 70%),radial-gradient(ellipse 16% 6% at 50.5% 64.5%,#8fb6ff26,transparent 70%); mix-blend-mode:screen; opacity:var(--room-night,0); }
.room-lights .room-hall-light { background:linear-gradient(90deg,transparent 95.9%,#ffd7a033 96.1%,#ffdcaa70 96.35%,transparent 96.8%),radial-gradient(ellipse 9% 7% at 96.4% 99%,#ffd29a45,transparent 70%); mix-blend-mode:screen; opacity:calc(var(--room-night,0) * .5); }
.room-lights .room-cd-glow { background:radial-gradient(ellipse 3.4% 2.6% at 24.6% 69.4%,#b9f59a70,transparent 70%); mix-blend-mode:screen; opacity:0; transition:opacity 1.2s ease; }
.stage:has(.cd-player .is-playing) .room-lights .room-cd-glow { opacity:calc(.45 + var(--room-night,0) * .55); }
@media(prefers-reduced-motion:no-preference) {
  .room-lights .room-crt-spill { animation:room-crt-breathe 5.3s ease-in-out infinite; }
  .room-lights .room-streetlamp.is-humming { animation:room-lamp-hum 9s steps(1) infinite; }
}
@keyframes room-crt-breathe { 0%,100% { filter:brightness(1); } 47% { filter:brightness(1.08); } 52% { filter:brightness(.94); } }
@keyframes room-lamp-hum { 0%,61%,63%,100% { filter:none; } 62% { filter:brightness(.8); } }
.room-snow { position:absolute; left:0; top:0; z-index:11; pointer-events:none; }
/* A playing tape lights the dimmed room around the player with its own colors. */
.room-view .object-dialog.is-tape-lit { box-shadow:0 30px 100px #11171075,-90px 0 240px 0 color-mix(in srgb,var(--tape-left,#000) 45%,transparent),90px 0 240px 0 color-mix(in srgb,var(--tape-right,#000) 45%,transparent); }
@media(prefers-reduced-motion:no-preference) { .room-view .object-dialog { transition:transform .3s cubic-bezier(.16,1,.3,1),opacity .3s ease,box-shadow .5s linear; } }

/* Traces the room keeps (traces.js). */
.room-flag-patch,.room-flag { position:absolute; z-index:10; pointer-events:none; user-select:none; }
.room-flag { transform-origin:36.1% 83.7%; transition:rotate .9s cubic-bezier(.3,1.6,.5,1); }
.room-flag.is-down { rotate:-90deg; }
@media(prefers-reduced-motion:reduce) { .room-flag { transition:none; } }
/* The filled-in view behind the flag follows the window's season (depth.js). */
.room-has-depth .room-flag-patch { display:none; } /* drawn and season-graded by depth.js instead */
.stage[data-season="winter"] .room-flag-patch { filter:grayscale(1) brightness(1.22); }
.stage[data-season="spring"] .room-flag-patch { filter:hue-rotate(52deg) saturate(.72); }
.stage[data-season="summer"] .room-flag-patch { filter:hue-rotate(62deg) saturate(.8) brightness(.8); }
.room-desk-tape { position:absolute; z-index:10; padding:0; border:0; background:none; cursor:pointer; transform:perspective(420px) rotateX(63deg) rotateZ(-7deg); transform-origin:50% 80%; filter:brightness(.8) sepia(.22) saturate(.8) drop-shadow(1px 3px 1.5px #2a170a99); }
.room-desk-tape[hidden] { display:none; }
.room-desk-tape img { display:block; width:100%; height:100%; object-fit:contain; pointer-events:none; }
.room-desk-tape:hover,.room-desk-tape:focus-visible { filter:brightness(.95) sepia(.18) saturate(.85) drop-shadow(1px 3px 1.5px #2a170a99); }
.room-desk-tape:focus-visible,.room-wall-print:focus-visible { outline:2px solid #ffefb8; outline-offset:3px; }
.room-desk-tape.is-arriving { animation:room-tape-arrive .7s cubic-bezier(.2,.9,.3,1.2) both; }
@keyframes room-tape-arrive { from { opacity:0; translate:0 -18px; } }
.room-wall-print { position:absolute; left:0; top:0; z-index:3; padding:22px; border:0; background:#f1ece0; transform-origin:0 0; cursor:pointer; box-shadow:0 10px 18px #1c120a55; filter:brightness(.6) sepia(.3) saturate(.72); transition:filter .18s; }
.room-wall-print[hidden] { display:none; }
.room-wall-print:hover,.room-wall-print:focus-visible { filter:brightness(.74) sepia(.24) saturate(.78); }
.room-wall-print img { display:block; width:100%; height:100%; object-fit:cover; pointer-events:none; }
.room-wall-print-tape { position:absolute; top:-26px; width:150px; height:56px; background:#efe3c2c9; box-shadow:0 1px 2px #0003; }
.room-wall-print-tape.is-left { left:-40px; rotate:-24deg; } .room-wall-print-tape.is-right { right:-40px; rotate:21deg; }
.room-wall-print.is-arriving > img { animation:room-print-arrive .8s ease-out both; }
@keyframes room-print-arrive { from { opacity:0; } }
@media(prefers-reduced-motion:reduce) { .room-desk-tape.is-arriving,.room-wall-print.is-arriving > img { animation:none; } }

/* Furniture cut from the photograph (furniture.js, toss.js). Pieces sit under the z-index:10 app hit regions. */
.room-piece { position:absolute; z-index:9; margin:0; padding:0; border:0; background:none; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.room-piece:focus-visible,.room-piece :focus-visible { outline:2px solid #ffefb8; outline-offset:2px; }
.room-cut { position:absolute; inset:0; display:block; background-repeat:no-repeat; pointer-events:none; transition:transform .28s cubic-bezier(.3,.8,.35,1),filter .2s,opacity .3s; }
.room-piece:is(:hover,:focus-visible) > .room-cut,.room-drawer-pull:is(:hover,:focus-visible) > .room-cut { filter:brightness(1.16) saturate(1.04); }
/* A jewel case eases out of its slot; the slot behind it is dark. */
.room-cd-gap,.room-book-gap { position:absolute; inset:0; background:linear-gradient(180deg,#070403,#1b100a 70%,#0c0705); opacity:0; transition:opacity .2s; }
.room-cd-case.is-pulling > .room-cd-gap,.room-cd-case.is-out > .room-cd-gap { opacity:1; }
.room-cd-case.is-pulling > .room-cut { transform:translate(-6%,14%) scale(1.22); filter:brightness(1.18) drop-shadow(0 4px 3px #0009); opacity:0; transition:transform .42s cubic-bezier(.2,.8,.3,1),opacity .42s ease-in; }
.room-cd-case.is-out > .room-cut { opacity:0; }
/* Books tip forward from the shelf by their tops. */
.room-book > .room-cut { transform-origin:50% 100%; }
.room-book.is-tipping > .room-cut { transform:perspective(260px) rotateX(-38deg) scale(1.05); filter:brightness(1.16) drop-shadow(0 6px 4px #0008); }
.room-book.is-tipping > .room-book-gap { opacity:1; }
/* Drawers slide out toward the room, showing what is inside. */
/* The front and its hit target move together; the cavity occludes the original
   photographed front, and contents emerge behind the moving wooden lip. */
.room-drawer { cursor:default; --drawer-duration:560ms; --drawer-ease:cubic-bezier(.22,.7,.25,1); }
.room-drawer.is-open { z-index:10; }
.room-drawer-pull { position:absolute; z-index:2; inset:0; margin:0; padding:0; border:0; background:none; cursor:pointer; transition:transform var(--drawer-duration) var(--drawer-ease); }
.room-drawer-front { transition:filter .2s; }
.room-drawer.is-open .room-drawer-pull { transform:translateY(44%); }
.room-drawer-inside { position:absolute; z-index:1; inset:0; overflow:hidden; background:linear-gradient(180deg,#170e09,#4b321f 44%,#291a10); box-shadow:inset 0 6px 8px #0009,inset 5px 0 6px #0006,inset -5px 0 6px #0006; clip-path:inset(0 0 100%); pointer-events:none; transition:clip-path var(--drawer-duration) var(--drawer-ease); }
.room-drawer.is-open .room-drawer-inside { clip-path:inset(0); pointer-events:auto; }
.room-drawer-item { position:absolute; margin:0; padding:0; border:0; cursor:pointer; box-shadow:1px 3px 3px #0009; transition:translate .2s,filter .2s; }
.room-drawer-item:is(:hover,:focus-visible) { filter:brightness(1.12); }
.room-drawer-print { left:calc(6% + var(--i) * 17%); top:5%; width:21%; height:36%; border:3px solid #eee6d6; background:center/cover no-repeat #eee6d6; rotate:calc(-4deg + var(--i) * 3deg); }
.room-drawer-envelope { left:calc(5% + var(--i) * 14%); top:7%; width:26%; height:34%; background:linear-gradient(160deg,transparent 49%,#cbbc9c 50%,transparent 51%),linear-gradient(20deg,transparent 49%,#cbbc9c 50%,transparent 51%),#efe6d2; rotate:calc(3deg - var(--i) * 2.2deg); }
.room-drawer-gameboy { left:34%; top:-16%; width:32%; height:76%; background:url("../../assets/gameboy-color.webp") center/contain no-repeat; rotate:78deg; box-shadow:none; filter:drop-shadow(3px 4px 2px #000b); }
/* The door swings into the room on its hinges and the hall light spills in. */
.room-door { overflow:visible; }
.room-door-hall { position:absolute; inset:0; display:block; background:linear-gradient(90deg,#fff1cf 0%,#f0cf96 30%,#b88e5c 75%,#7a5a39 100%); opacity:0; transition:opacity .5s; }
.room-door-leaf { transform-origin:100% 50%; transition:transform 1.1s cubic-bezier(.2,.75,.25,1),filter .2s; }
.room-door[data-state="ajar"] .room-door-leaf { transform:perspective(700px) rotateY(22deg); }
.room-door[data-state="open"] .room-door-leaf { transform:perspective(700px) rotateY(62deg); }
.room-door:is([data-state="ajar"],[data-state="open"]) .room-door-hall { opacity:1; }
/* Paper toss. */
.room-basket-pile { position:absolute; left:14%; right:12%; top:8.5%; height:16%; }
/* The photographed front covers only what is below the rim's front edge, so paper shows inside the opening. */
.room-basket-front { clip-path:polygon(0% 14%,6% 17.1%,24% 20%,54% 22.2%,79% 20%,94% 15%,100% 13%,100% 100%,0% 100%); }
.room-basket-pile i { position:absolute; left:calc(2% + var(--i) * 12%); top:calc(8% + var(--row) * 10%); width:38%; aspect-ratio:1; background:center/contain no-repeat; filter:brightness(.7) sepia(.2); }
.room-toss { position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.room-paper { position:absolute; z-index:9; height:auto; aspect-ratio:1; pointer-events:none; user-select:none; -webkit-user-drag:none; filter:brightness(.88) sepia(.14) drop-shadow(2px 5px 3px #1b0f0799); }
.room-paper.is-behind { z-index:8; }
.room-paper.is-hand { z-index:12; pointer-events:auto; cursor:grab; touch-action:none; }
.room-paper.is-hand.is-held { cursor:grabbing; filter:brightness(.95) sepia(.1) drop-shadow(3px 8px 5px #1b0f0788); }
.room-paper.is-hand:focus-visible { outline:2px solid #ffefb8; outline-offset:4px; border-radius:50%; }
.room-paper.is-arriving { animation:room-paper-arrive .35s cubic-bezier(.3,1.5,.5,1); }
@keyframes room-paper-arrive { from { scale:.55; opacity:0; } }
.room-paper.is-in { transition:translate .38s ease-in,opacity .38s ease-in; translate:0 40%; opacity:0; }
@media(prefers-reduced-motion:reduce) { .room-cut,.room-drawer-pull,.room-drawer-inside,.room-drawer-front,.room-door-leaf { transition:none; } .room-paper.is-arriving { animation:none; } }
/* AIM's buddy-in toast on the photographed screen (presence.js). */
.room-buddy-toast { position:absolute; z-index:12; display:grid; place-items:center; pointer-events:none; background:linear-gradient(#fdfdf6,#e4e1d2); border:1px solid #7b7a70; box-shadow:1px 1px 0 #fff inset,1px 2px 3px #0005; opacity:0; translate:0 30%; transition:opacity .25s,translate .25s; }
.room-buddy-toast img { width:58%; height:auto; }
.room-buddy-toast.is-showing { opacity:.94; translate:0 0; }
@media(prefers-reduced-motion:reduce) { .room-buddy-toast { transition:none; translate:0 0; } }

/* While the visitor turns the clock, the room's minutes-long light changes keep up with the hands. */
.stage.room-scrubbing :is(.room-daylight,.room-daylight-warm) { transition-duration:.45s!important; }

/* The wall clock and the calendar (almanac.js). */
.room-clock { position:absolute; inset:0; display:block; pointer-events:none; }
.room-clock img { position:absolute; inset:0; width:100%; height:100%; transform-origin:50% 50%; user-select:none; -webkit-user-drag:none; }
.room-clock.is-settling img { transition:rotate .6s cubic-bezier(.3,.8,.3,1); }
.room-wall-clock { border-radius:50%; }
.room-wall-clock .room-clock { filter:brightness(.84) sepia(.16) saturate(.86) drop-shadow(2px 4px 3px #1b120a80); transition:filter .18s; }
.room-wall-clock:is(:hover,:focus-visible) .room-clock { filter:brightness(.96) sepia(.12) saturate(.9) drop-shadow(2px 4px 3px #1b120a80); }
.room-wall-clock.is-night-inviting { z-index:12; }
.room-wall-clock.is-night-inviting .room-clock { filter:brightness(1.13) sepia(.08) drop-shadow(0 0 8px #f6dca590) drop-shadow(2px 4px 3px #1b120a80); }
.room-clock-hint { visibility:hidden; opacity:0; position:absolute; top:112%; left:50%; translate:-50% 0; z-index:1; padding:4px 8px; border:1px solid #ffe5ad80; border-radius:4px; background:#17233bdd; color:#fff1cf; font:16px/1.15 var(--hand); white-space:nowrap; pointer-events:none; box-shadow:0 2px 8px #0b102388; }
.room-wall-clock.is-night-inviting .room-clock-hint { visibility:visible; opacity:1; }
.room-wall-clock.is-night-inviting::after { content:''; position:absolute; inset:-7%; border:2px solid #f6dca580; border-radius:50%; pointer-events:none; animation:room-clock-invite 4.6s ease-out both; }
@keyframes room-clock-invite { 0%,100% { opacity:0; scale:.9; } 18%,62% { opacity:1; scale:1.12; } }
@media(prefers-reduced-motion:reduce) { .room-wall-clock.is-night-inviting::after { animation:none; opacity:1; scale:1; } }
.room-wall-calendar { rotate:-2.2deg; }
.room-wall-calendar > canvas,.room-almanac-calendar > canvas { position:absolute; inset:0; display:block; width:100%; height:100%; }
.room-wall-calendar > canvas { filter:brightness(.8) sepia(.22) saturate(.8) drop-shadow(1px 3px 2px #1b120a99); transition:filter .18s; }
.room-wall-calendar:is(:hover,:focus-visible) > canvas { filter:brightness(.92) sepia(.18) saturate(.84) drop-shadow(1px 3px 2px #1b120a99); }
.room-calendar-pin { position:absolute; z-index:2; left:46%; top:-3%; width:9%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle at 35% 30%,#ff8f80,#c8231a 45%,#6d0c07 100%); box-shadow:1px 2px 2px #0008; pointer-events:none; }
.room-almanac[hidden] { display:none; }
.room-almanac { position:fixed; z-index:10000; inset:0; opacity:0; transition:opacity .32s ease .16s; }
.room-almanac.is-open { opacity:1; }
.room-almanac.is-closing { pointer-events:none; transition-delay:0s; }
.room-almanac-close { position:absolute; inset:0; width:100%; height:100%; padding:0; border:0; background:none; cursor:zoom-out; text-indent:-9999px; }
.room-almanac-clock,.room-almanac-calendar { position:absolute; display:none; left:50%; top:50%; translate:-50% -50%; outline:none; }
.room-almanac[data-showing="clock"] .room-almanac-clock,.room-almanac[data-showing="calendar"] .room-almanac-calendar { display:block; }
.room-almanac-clock { --size:min(360px,64vw,calc(100dvh - 180px)); width:var(--size); height:var(--size); border-radius:50%; cursor:grab; touch-action:none; filter:drop-shadow(0 22px 40px #0b0704aa) drop-shadow(0 4px 10px #0b070488); }
.room-almanac-clock.is-turning { cursor:grabbing; }
.room-almanac-clock:focus-visible,.room-almanac-calendar:focus-visible { outline:2px solid #ffefb8; outline-offset:8px; }
.room-clock-knob { position:absolute; z-index:1; left:46.5%; top:-5.5%; width:7%; height:7%; padding:0; border:0; border-radius:2px 2px 1px 1px; background:repeating-linear-gradient(90deg,#8d6b33 0 2px,#e9cf8e 2px 4px,#a8843f 4px 6px); box-shadow:0 1px 2px #0009; cursor:pointer; }
.room-clock-knob:active { translate:0 8%; }
.room-clock-knob:focus-visible { outline:2px solid #ffefb8; outline-offset:3px; }
.room-almanac-calendar { --width:min(300px,70vw,calc((100dvh - 180px) * .75)); width:var(--width); aspect-ratio:3/4; perspective:900px; cursor:pointer; touch-action:none; filter:drop-shadow(0 22px 40px #0b0704aa) drop-shadow(0 4px 10px #0b070488); }
.room-almanac-calendar > .room-calendar-pin { top:-2%; width:7%; }
.room-calendar-turning { opacity:0; transform-origin:50% 4%; pointer-events:none; }
.room-calendar-turning.is-lifting { animation:room-page-lift .55s cubic-bezier(.4,.1,.6,1) forwards; }
.room-calendar-turning.is-dropping { animation:room-page-lift .55s cubic-bezier(.4,.1,.6,1) reverse forwards; }
@keyframes room-page-lift { from { opacity:1; transform:rotateX(0); filter:brightness(1); } 70% { opacity:1; } to { opacity:0; transform:rotateX(-150deg); filter:brightness(.7); } }
@media(prefers-reduced-motion:reduce) { .room-almanac,.room-clock.is-settling img { transition:none; } }
.room-view:has(.room-almanac:not([hidden])) .room-pan { display:none; }
/* Signs of life (life.js). Grey days mute the room's warm grade. */
.stage[data-weather="overcast"] .room-daylight-warm,.stage[data-weather="rain"] .room-daylight-warm { filter:saturate(.4); }
.room-rain { position:absolute; left:0; top:0; z-index:11; pointer-events:none; }
.room-led { position:absolute; z-index:12; aspect-ratio:1; border-radius:50%; pointer-events:none; }
.room-led.is-monitor { background:radial-gradient(circle,#c8ffb0 0,#6fe25a 38%,#3a9e2c00 72%); opacity:calc(.55 + var(--room-night,0) * .45); }
.room-led.is-power { background:radial-gradient(circle,#d4ffc0 0,#78ea60 36%,#3a9e2c00 72%); opacity:calc(.5 + var(--room-night,0) * .5); }
.room-led.is-drive { background:radial-gradient(circle,#fff0b8 0,#ffb13a 38%,#ff900000 72%); opacity:0; }
.room-led.is-drive.is-on { opacity:calc(.75 + var(--room-night,0) * .25); }
.room-lights .room-crt-glass { position:absolute; inset:auto; overflow:hidden; border-radius:5% / 6%; opacity:0; transition:opacity .6s ease; background:#101414; isolation:isolate; }
.room-crt-glass .room-screensaver { display:block; width:100%; height:100%; opacity:.88; filter:blur(.3px) saturate(.82) contrast(.94); }
/* Restore the curved tube reflection lost when the single saver became shared.
   Glass stays outside the canvas so trails never accumulate the reflection. */
.room-crt-glass::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(128deg,#e8f1ed22, #e8f1ed09 34%,transparent 35%),radial-gradient(ellipse at 48% 46%,transparent 42%,#06111170 100%); box-shadow:inset 0 0 5px 2px #071211aa; }
.stage.room-screensaver-on .room-lights .room-crt-glass { opacity:1; }
@media(prefers-reduced-motion:reduce) { .room-lights .room-crt-glass { transition:none; } }
.stage.room-screensaver-on .room-lights .room-crt-spill { opacity:calc(var(--room-night,0) * .25); }
.room-lights .room-headlights { opacity:0; background:linear-gradient(calc(100deg * var(--sweep-direction,1)),transparent 30%,#fff1d61f 44%,#fff6e640 50%,#fff1d61f 56%,transparent 70%) 0 0/300% 100% no-repeat; mix-blend-mode:screen; }
.room-lights .room-headlights.is-passing { animation:room-headlights 3.6s ease-in-out; }
@keyframes room-headlights { 0% { opacity:0; background-position:calc(50% + 50% * var(--sweep-direction,1)) 0; } 20%,80% { opacity:var(--room-night,0); } 100% { opacity:0; background-position:calc(50% - 50% * var(--sweep-direction,1)) 0; } }
.room-lights .room-cloud-shade { background:#7f8a98; mix-blend-mode:multiply; opacity:calc(var(--room-cloud,0) * .3); transition:opacity 2.4s linear; }


/* The pencil lies on the tray beside the notebook: it opens the blank doodle page. */
.room-view .stage .desk-pencil { position:absolute; left:35.48%; top:62.7%; width:4.95%; z-index:5; padding:0; border:0; background:transparent; cursor:pointer; }
.room-view .stage .desk-pencil img { display:block; width:100%; height:auto; filter:drop-shadow(1px 2px 1.5px rgb(0 0 0 / .45)); transform:rotate(-4deg); }
body:not(.room-view) .desk-pencil { display:none; }
.room-view .stage .desk-pencil:focus-visible { outline:2px solid #fff3c4; outline-offset:2px; }


@media(max-width:650px) {
  .room-view .stage .notebook.is-open { height:min(540px,calc(100dvh - 155px)); }
}
@media (hover:hover) and (pointer:fine) {
  .room-view .stage .scene-hit:not(.is-open),
  .room-view .stage .scene-hit:not(.is-open):hover { cursor:url('../../assets/cursors/hand.png') 13 3,pointer; }
  .room-view .stage .scene-hit[data-object="paint"]:not(.is-open),
  .room-view .stage .scene-hit[data-object="paint"]:not(.is-open):hover { cursor:url('../../assets/cursors/brush.png') 4 28,pointer; }
  .room-view .stage .notebook.scene-hit:not(.is-open),
  .room-view .stage .notebook.scene-hit:not(.is-open):hover,
  .room-view .stage .notebook:not(.is-open) .open-cover { cursor:url('../../assets/cursors/pencil.png') 3 29,pointer; }
}