/* One continuous interior; live books are projected onto its six shelf planes. */
.immersive-space {
  --scene: url('assets/immersive-realistic.webp');
  --shell: url('assets/immersive-realistic-shell.webp');
  --shelf-art: url('assets/shelf-view-realistic.png');
  position: relative;
  isolation: isolate;
  width: 100%;
  min-width: 840px;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: 12px;
  background: #b6a184;
  box-shadow: 0 12px 36px #332c1e18;
  container-type: inline-size;
}
.immersive-space[data-style="illustrated"] {
  --scene: url('assets/immersive-animated.webp');
  --shell: url('assets/immersive-animated-shell.webp');
  --shelf-art: url('assets/shelf-view-animated.png');
}
.immersive-space.space-loading {background:var(--nook-loading-background);}
.space-loading::after {content:'Loading your nook…';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:18px 24px;border:1px solid var(--accent-border);border-radius:20px;background:var(--nook-loading-background);color:var(--nook-loading-title);font:500 clamp(21px,2.8vw,30px)/1.25 Georgia,'Times New Roman',serif;letter-spacing:-.5px;text-align:center;white-space:nowrap;box-shadow:0 8px 32px #8063d61a}
.space-loading #room,.space-loading .space-art,.space-loading .space-object {visibility:hidden}
.space-art,.space-object {position:absolute;inset:0;background:var(--shell) center/100% 100% no-repeat;pointer-events:none}
.space-art {background-image:var(--shell);background-size:100% 100%;background-position:center;background-repeat:no-repeat}
.space-object {background-image:var(--scene)}
.space-chair {clip-path:polygon(64% 66%,71% 64%,76% 56%,87% 53%,98% 53%,98% 94%,92% 98%,83% 98%,83% 100%,70% 100%,64% 87%)}
.space-plant {clip-path:polygon(2% 40%,15% 40%,18% 61%,17% 88%,12% 92%,2% 92%)}
.space-plant-small {clip-path:polygon(55% 43%,64% 43%,64% 63%,55% 63%)}
.space-fire {clip-path:polygon(44% 46%,56% 46%,56% 62%,44% 62%)}
.space-window {clip-path:polygon(43.3% 33%,43.3% 14%,43.7% 9%,45.5% 5%,48% 2.8%,52% 2.8%,54.5% 5%,56% 9%,56.5% 14%,56.5% 33%)}
.immersive-space[data-theme="moonlit"] .space-art,.immersive-space[data-theme="moonlit"] .space-object {filter:brightness(.72) saturate(.7)}
.immersive-space[data-theme="academy"] .space-art,.immersive-space[data-theme="academy"] .space-object {filter:brightness(.85) saturate(.8)}
.immersive-space[data-theme="rose"] .space-art,.immersive-space[data-theme="rose"] .space-object {filter:brightness(1.04) saturate(.85)}

/* Explicitly reset the old front-facing composition in the expanded view. */
.immersive-space #room {
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  min-width:0!important;
  aspect-ratio:auto!important;
  background:transparent!important;
  border:0!important;
  border-radius:0;
  box-shadow:none;
  overflow:visible;
}
.immersive-space #room>.real-shell,
.immersive-space #room>.real-photo,
.immersive-space #room>.room-grain,
.immersive-space #room>.wallpaper-pattern,
.immersive-space #room>.ceiling-trim,
.immersive-space #room>.room-floor,
.immersive-space #room>.room-rug,
.immersive-space #room>.hanging-vine,
.immersive-space #room>.wall-light,
.immersive-space #room>.fireplace,
.immersive-space #room>.room-plant,
.immersive-space #room>.armchair,
.immersive-space #room>.real-fire-glow,
.immersive-space #room>.room-caption {display:none!important}

.immersive-space #room .bookcase {
  position:absolute!important;
  inset:0 auto auto 0!important;
  width:240px!important;
  height:540px!important;
  padding:0!important;
  background:transparent!important;
  border:0!important;
  border-radius:0;
  box-shadow:none!important;
  transform-origin:0 0;
  z-index:4;
  container-type:inline-size;
}
.immersive-space #room .bookcase::after,
.immersive-space #room .case-photo,
.immersive-space #room .bookcase-crown,
.immersive-space #room .cabinet-base {display:none!important}
.immersive-space #room .shelf-heading {
  position:absolute;
  top:-32px;
  left:0;
  width:100%;
  height:20px;
  padding:0;
  color:#f0e2bc;
  font:500 12px/20px var(--sans);
  text-align:center;
  letter-spacing:1.8px;
  text-shadow:0 1px 3px #0009;
}
.immersive-space #room .shelf-heading span {display:none}
.immersive-space #room .shelf-row {
  position:absolute!important;
  left:0!important;
  top:0!important;
  width:100%!important;
  height:180px!important;
  transform-origin:0 0;
  margin:0;
  padding:10px 7px 5px;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  align-items:flex-end;
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:none;
}
.immersive-space #room .shelf-row::after {display:none}
.immersive-space #room .shelf-row.drag-over {background:#e7d7a336!important;outline:2px solid #e7d7a3;outline-offset:-3px}
.immersive-space #room .arranged-shelf>.shelf-book {height:80%;border-radius:2px 3px 1px 1px;box-shadow:4px 2px 6px #0008}
.immersive-space #room .arranged-shelf>.shelf-book.spine {height:85%}
.immersive-space #room .cover-title {font-size:14px;line-height:1.2}
.immersive-space #room .cover-kicker {font-size:5px;letter-spacing:.5px}
.immersive-space #room .cover-author {font-size:6px}
.immersive-space #room .cover-symbol {font-size:22px}
.immersive-space #room .spine-art strong {font-size:13px}
.immersive-space #room .spine-art span {font-size:7px}
.immersive-space #room .arranged-shelf .stacked .cover-title {font-size:10px}
.immersive-space #room .arranged-shelf .book-pile {height:80%}
.immersive-space #room .arranged-shelf .shelf-decoration {height:65%;filter:drop-shadow(2px 3px 2px #0006)}
.immersive-space[data-style="realistic"] #room .shelf-book {filter:saturate(.8) brightness(.88)}
.immersive-space[data-style="illustrated"] #room .shelf-book {filter:saturate(.9);box-shadow:3px 2px 4px #43382f55}
.immersive-space[data-style="realistic"] #room .shelf-heading {opacity:0;pointer-events:none}
.room[data-style="realistic"] .room-sparkles {display:none!important}
.room[data-style="realistic"] .cartoon-companion:not(.paper-story-companion),
.room[data-style="realistic"] .animated-companion:not(.paper-story-companion):not(.companion-motion):not(.companion-legacy-motion) {display:none!important}
.room[data-style="illustrated"] .companion-sprite,
.room[data-style="illustrated"] .photo-motion {display:none!important}
.immersive-space[data-style="illustrated"] #room .cover-art {background:var(--cover);box-shadow:inset 0 0 0 1px #634d3d66}
.immersive-space[data-style="illustrated"] #room .spine-art {background:var(--cover);border:1px solid #634d3d66}
.immersive-space[data-style="illustrated"] #room .shelf-book {filter:none;border-radius:3px}

/* Real ornaments keep the same shelf controls while matching the photo room. */
.real-shelf-decoration {display:block;position:absolute;left:-10%;bottom:0;width:120%;height:auto;aspect-ratio:1;background:url('assets/realistic-shelf-ornaments.png') 0 0/300% 200% no-repeat}
.room[data-style="realistic"] .shelf-decoration {position:relative}
.real-shelf-decoration[data-kind="plant"] {background-position:0 0}
.real-shelf-decoration[data-kind="candle"] {background-position:50% 0}
.real-shelf-decoration[data-kind="orb"] {background-position:100% 0}
.real-shelf-decoration[data-kind="dragon"] {background-position:0 100%}
.real-shelf-decoration[data-kind="bear"] {background-position:50% 100%}
.real-shelf-decoration[data-kind="hourglass"] {background-position:100% 100%}
.room[data-style="realistic"] .shelf-decoration {filter:drop-shadow(2px 3px 2px #0006)}

/* The illustrated frame remains an accessible entrance to the favorites list. */
.immersive-space #room #centerFrame {
  position:absolute;
  left:46.5%;
  top:33.6%!important;
  width:6.6%;
  height:6.8%!important;
  min-height:0!important;
  max-height:none!important;
  padding:0;
  border:0;
  background:transparent;
  box-shadow:none;
  transform:none;
}
.immersive-space #centerFrame>* {display:none}
.immersive-space #centerFrame #editBoard {display:block;position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;font-size:0;border:0;border-radius:0;background:transparent}
.immersive-space #editBoard span {display:none}
.immersive-space #editBoard:hover {background:#f9e9bd22}
.immersive-space #room #roomWindow {left:43.5%;top:3%!important;width:12.7%;height:29.7%;padding:0;border:0;background:transparent;box-shadow:none;border-radius:50% 50% 0 0;overflow:hidden;z-index:2}
.immersive-space #roomWindow .window-frame,
.immersive-space #roomWindow .window-cross,
.immersive-space #roomWindow .window-sill,
.immersive-space #roomWindow .window-curtain {display:none!important}
.immersive-space #room #roomWindow .window-sky {inset:0;border-radius:50% 50% 0 0}
.immersive-space #roomWindow[data-view="forest"] {opacity:0}
.immersive-space #room #roomPet {width:8.5%;height:13%;z-index:8}
.immersive-space #room #realFireMotion {display:none!important}
.space-fire {animation:nook-firelight 3s ease-in-out infinite alternate}
@keyframes nook-firelight {from{filter:brightness(.96)}to{filter:brightness(1.09)}}
@media(prefers-reduced-motion:reduce){.space-fire{animation:none}}

/* Illustrated scenery uses drawn shapes rather than the photographic atlas. */
.room[data-style="illustrated"] .window-sky {background-image:none!important;background:linear-gradient(#adcfc4,#e9dcad 65%,#8ba976)}
.room[data-style="illustrated"] .window-sky .mountain,
.room[data-style="illustrated"] .window-sky .forest-trees {display:block!important}
.room[data-style="illustrated"] .room-window[data-view="night"] .window-sky {background:linear-gradient(#38425f,#727696 70%,#596c68)}
.room[data-style="illustrated"] .room-window[data-view="rain"] .window-sky {background:linear-gradient(#94a6ae,#c7d2c5 70%,#708a7a)}
.room[data-style="illustrated"] .room-window[data-view="ocean"] .window-sky {background:linear-gradient(#b9d5d8,#f2d7b4 60%,#83b9bb 61%,#6d9fa6)}
.room[data-style="illustrated"] .room-window[data-view="ocean"] .mountain,
.room[data-style="illustrated"] .room-window[data-view="ocean"] .forest-trees {display:none!important}
.immersive-space #room #fullscreenButton {right:18px;bottom:18px;width:36px;height:36px;border-radius:50%;background:#faf6ebe6;box-shadow:0 2px 12px #29211822;color:#4d5940}

.app-preview .immersive-space {min-width:0;width:max(100%,150cqh);height:100%;aspect-ratio:auto;border-radius:0}
.room-viewport.immersive-viewport {overflow:auto;touch-action:pan-x pan-y}
.app-preview .room-viewport.immersive-viewport {touch-action:pan-x}
.room-viewport.immersive-viewport.shelf-detail-viewport {overflow:hidden;touch-action:pan-y}
.immersive-space *,.immersive-space *::before,.immersive-space *::after {animation:none!important;transition:none!important}
.room-experience:has(.immersive-space.shelf-focus-view) .app-room-navigation,
.room-experience:has(.immersive-space) #companionControls {display:none!important}
.immersive-viewport {cursor:default;scrollbar-width:none}
.immersive-viewport.can-pan {cursor:grab}
.immersive-viewport::-webkit-scrollbar {display:none}
/* Dedicated front elevations keep each selected cabinet's live contents. */
.shelf-focus-frame,.shelf-focus-controls {display:none}
.room-viewport.shelf-detail-viewport {max-height:none!important;cursor:default}
.immersive-space.shelf-focus-view {--focus-surface:#edf1e9;--focus-panel:#fcfdf8;--focus-ink:#43523f;width:100%!important;min-width:0!important;height:760px;min-height:650px;aspect-ratio:auto;background:radial-gradient(ellipse at 35% 30%,color-mix(in srgb,var(--focus-accent,#78846b) 23%,transparent),transparent 68%),linear-gradient(135deg,var(--focus-surface),color-mix(in srgb,var(--focus-surface) 90%,var(--focus-accent,#78846b)));touch-action:pan-y}
.immersive-space.shelf-focus-view[data-theme="moonlit"] {--focus-surface:#202c3c;--focus-panel:#2b3849;--focus-ink:#e7edf3}
.immersive-space.shelf-focus-view[data-theme="rose"] {--focus-surface:#f3e9ed;--focus-panel:#fff9fc;--focus-ink:#725665}
.immersive-space.shelf-focus-view[data-theme="academy"] {--focus-surface:#e3e5e9;--focus-panel:#f2f3f6;--focus-ink:#424b5e}
.app-preview .immersive-space.shelf-focus-view {height:100%;min-height:0}
.shelf-focus-view>.space-art,.shelf-focus-view>.space-object {display:none}
.shelf-focus-view .shelf-focus-frame {display:block;position:absolute;overflow:hidden;border-radius:4px;box-shadow:0 12px 28px #33281926;pointer-events:none}
.shelf-focus-frame .shelf-focus-source {inset:0;width:100%;height:100%;background:var(--shelf-art) center/100% 100% no-repeat}
.shelf-focus-view .shelf-focus-controls {display:flex;position:absolute;top:12px;left:12px;right:12px;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;z-index:25;font:12px var(--sans);color:var(--focus-ink)}
.shelf-focus-back {border:1px solid #8b947344;border-radius:8px;background:#fffdf4ef;padding:9px 12px;color:#48583c;min-height:40px}
.shelf-focus-back:focus-visible {outline:2px solid #697e52;outline-offset:2px}
/* Keep the selected shelf announcement available to screen readers. */
.shelf-focus-name {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.app-preview .shelf-focus-controls {right:64px}
.shelf-focus-view #room>:not(.bookcase) {visibility:hidden;pointer-events:none}
.shelf-focus-view #room {touch-action:pan-y}
.shelf-focus-view #room .outside-shelf-focus {visibility:hidden;pointer-events:none}
.immersive-space.shelf-focus-view #room .bookcase {width:360px!important}
.shelf-focus-view #room .shelf-heading {opacity:0!important;pointer-events:none}
.immersive-space.shelf-focus-view #room .cover-title {font-size:12px;line-height:1.15;letter-spacing:.1px}
.immersive-space.shelf-focus-view #room .cover-author {font-size:6px}
.immersive-space.shelf-focus-view #room .shelf-row {scrollbar-width:thin;scrollbar-color:#b6a77a66 transparent}
.immersive-space.shelf-focus-view #room .shelf-row::-webkit-scrollbar {display:block;height:4px}
.immersive-space:not(.shelf-focus-view) #room .bookcase {cursor:pointer}
.immersive-space:not(.shelf-focus-view) #room .bookcase:hover {outline:2px solid #f4deb54d;outline-offset:4px}
.immersive-space #room .bookcase:focus-visible {outline:2px solid #f4deb5;outline-offset:4px}

/* Objects stay in cabinet coordinates in both fixed viewpoints. */
.user-shelf-decor {position:absolute;inset:0;pointer-events:none;z-index:10;transform-style:preserve-3d}
.placed-ornament {position:absolute;width:calc(19% * var(--orn-size,1));height:auto;aspect-ratio:5/6;padding:0;border:0;background:transparent;transform:translate(-50%,-100%);transform-origin:0 0;pointer-events:auto;cursor:pointer;touch-action:none;isolation:isolate}
.hanging-ornament {transform:translate(-50%,0)}
.immersive-space .placed-ornament {width:100px;height:120px;aspect-ratio:auto}
.ornament-art {display:block;width:100%;height:100%;overflow:visible;filter:drop-shadow(1px 2px 1px #151c1a40)}
.ornament-contact-shadow {display:none;position:absolute;left:0;top:0;width:100px;height:100px;transform-origin:0 0;border-radius:50%;background:radial-gradient(ellipse,#13170fde,#13170f66 48%,transparent 72%);pointer-events:none}
.immersive-space .ornament-contact-shadow {display:block}
.ornament-contact-shadow[hidden] {display:none}
.immersive-space .ornament-contact-shadow[hidden] {display:none}
.placed-ornament.is-selected {outline:2px dashed #e8ce94;outline-offset:2px;border-radius:6px}
.placed-ornament:focus-visible {outline:2px solid #f8e3b4;outline-offset:3px}
.shelf-focus-view .placed-ornament {cursor:grab}
.shelf-focus-view .placed-ornament:active {cursor:grabbing}
.orn-light-pool {position:absolute;inset:-45% -65% -15%;background:radial-gradient(ellipse,#ffe9a340,#ffd27015 45%,transparent 72%);pointer-events:none;z-index:-1;mix-blend-mode:screen}
.placed-ornament.is-lit .orn-light {filter:drop-shadow(0 0 8px #ffd982)}
.placed-ornament:not(.is-lit) .orn-flame {display:none}
.placed-ornament:not(.is-lit) .orn-light {fill:#ae9871}
.placed-ornament.is-lit .orn-flame {transform-origin:49px 32px;animation:shelf-candle-flicker 1.15s ease-in-out infinite alternate;filter:drop-shadow(0 0 5px #ffcf66)}
@keyframes shelf-candle-flicker {0%,100%{transform:scale(.95,1.03) rotate(-3deg);opacity:.85}40%{transform:scale(1.08,.92) rotate(3deg);opacity:1}70%{transform:scale(.92,1.09);opacity:.93}}
.shelf-decor-tray {display:none}
.shelf-focus-view .shelf-decor-tray {display:block;position:absolute;right:16px;top:80px;bottom:18px;width:216px;z-index:30;background:var(--focus-panel);color:var(--focus-ink);border:1px solid #88907926;border-radius:16px;box-shadow:0 8px 24px #1420160c;overflow-y:auto;scrollbar-width:thin;touch-action:pan-y;overscroll-behavior:contain}
.decor-tray-title {width:100%;padding:16px 12px;display:flex;justify-content:space-between;gap:8px;font:500 13px var(--sans);color:inherit;text-align:left}
.decor-tray-body {padding:0 12px 14px}
.decor-catalog {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;margin:12px 0}
.decor-catalog button {display:flex;flex-direction:column;align-items:center;gap:5px;padding:6px 2px;border:1px solid #88907926;border-radius:9px;background:#88907908;color:inherit;min-width:0;touch-action:none;cursor:grab}
.decor-catalog button:hover {background:#88907918;border-color:#88907970}
.decor-catalog .ornament-art {width:39px;height:47px;filter:drop-shadow(1px 2px 1px #14201630)}
.decor-catalog span {font:9px/1.3 var(--sans);text-align:center}
.decor-item-options {border-top:1px solid #88907930;padding-top:12px}
.decor-item-options strong {font:500 12px var(--sans)}
.decor-position-actions {display:flex;gap:5px}
.decor-item-options button {padding:7px 9px;border:1px solid #88907940;border-radius:7px;color:inherit;font-size:11px;min-height:34px;margin:5px 0;background:#88907908}
.decor-item-options>[data-orn-action] {width:100%;display:block}
.decor-item-options>[hidden] {display:none}
.decor-feedback {display:block;font:10px/1.5 var(--sans);opacity:.8;margin-top:10px}
@container(max-width:760px){
  .shelf-focus-name {font-size:10px;max-width:120px}
  .shelf-focus-view .shelf-focus-controls {justify-content:flex-start;gap:6px}
  .shelf-focus-back {font-size:12px;padding:10px;min-height:44px}
  .shelf-focus-view .shelf-decor-tray {right:8px;left:auto;top:94px;bottom:14px;width:88px;overflow:auto}
  .decor-tray-title {padding:12px 6px;font-size:10px}
  .decor-tray-body {padding:0 6px 10px}
  .decor-position-actions {display:grid;grid-template-columns:repeat(2,1fr);gap:2px}
  .decor-item-options strong {font-size:10px}
  .decor-item-options button {padding:5px 2px;font-size:9px}
  .decor-catalog {grid-template-columns:1fr}
  .decor-catalog span {font-size:8px}
  .decor-catalog .ornament-art {width:32px;height:39px}
  .app-preview .shelf-focus-controls {right:54px}
  .app-preview .shelf-decor-tray {bottom:80px}
}
@media(prefers-reduced-motion:reduce){.placed-ornament.is-lit .orn-flame {animation:none}}
.app-preview .app-room-navigation {gap:3px}
.app-preview #companionControls {display:none!important}
.app-preview .app-room-navigation button {min-width:0;padding:7px 10px}
.space-expanded {position:fixed!important;inset:3vh auto auto 50%;transform:translateX(-50%);height:94vh!important;width:141vh!important;min-width:0!important;max-width:98vw;z-index:100;box-shadow:0 0 0 100vmax #172019c9}
@media(max-width:760px){.studio-bar{flex-wrap:wrap}.immersive-space{min-width:780px}.space-expanded{width:98vw!important;height:65.33vw!important;top:15vh}}

/* Restrained framing also gives both original room styles a cleaner finish. */
.room-viewport:not(.immersive-viewport) .room {border-radius:12px;border-color:#e7e2d6;box-shadow:0 8px 28px #332b1c12}
.studio-bar {gap:12px}
.studio-presets,.space-presets,.size-presets {padding:3px;border-radius:9px;background:#efeee7}
.space-presets button {border:0;background:transparent;color:#737c68;border-radius:6px;padding:7px 10px;font-size:11px}
.space-presets button[aria-pressed="true"] {background:#fffdf6;color:#40543c;box-shadow:0 1px 5px #23361c12}
.app-room-tools>button {transition:background .15s}
.app-room-tools>button:hover {background:#e8eddf;color:#40543c}
.app-room-tools>button[aria-pressed="true"] {background:#445b3b;color:white}
@media(prefers-reduced-motion:reduce){.app-room-tools>button{transition:none}}

.decor-drag-preview {position:fixed;width:56px;height:70px;transform:translate(-50%,-80%);pointer-events:none;z-index:1000;opacity:.9}

/* Live architecture and effects in the perspective room. */
.immersive-space #room #dragonDecor {display:none!important}
.immersive-space #room #roomWindow {
  left:43.3%;top:2.8%!important;width:13.2%;height:37.8%;
  padding:0;border:5px solid #594a36;border-radius:50% 50% 0 0 / 25% 25% 0 0;
  background:#bad0bc;box-shadow:0 0 0 3px #d0b995,inset 0 0 10px #33251588;z-index:2;
}
.immersive-space #roomWindow[data-view="forest"] {opacity:1}
.immersive-space #room #roomWindow .window-sky {inset:0;border-radius:0}
.immersive-space #room #roomWindow .window-cross {display:block!important;position:absolute;inset:0;z-index:5;border-radius:0;pointer-events:none;background:linear-gradient(90deg,transparent 24%,#594a36 24% 25.5%,transparent 25.5% 73%,#594a36 73% 74.5%,transparent 74.5%)}
.immersive-space #room #roomWindow .window-cross:after {content:'';position:absolute;left:0;right:0;top:25%;height:3px;background:#594a36;box-shadow:0 1px #d0b995}
.immersive-space #room #roomWindow .window-cross:before {display:none}
.immersive-space #room #roomWindow .window-sky:after {content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 30% 24%,#fff9,transparent 55%);animation:window-daylight 8s ease-in-out infinite alternate;pointer-events:none}
.immersive-space #room #roomWindow[data-view="night"] .window-sky:after {background:radial-gradient(circle at 72% 18%,#fff8,transparent 30%);animation-duration:5s}
.immersive-space #room #roomWindow[data-view="ocean"] .window-sky:after {inset:55% 0 0;background:repeating-linear-gradient(0deg,transparent 0 12%,#d7eeff55 13% 14%,transparent 15% 24%);animation:ocean-shimmer 5s ease-in-out infinite alternate}
.immersive-space #room #realFireMotion {display:block!important;position:absolute;left:44.4%;top:48.5%;width:10.7%;height:12.4%;z-index:3;overflow:hidden;background:radial-gradient(ellipse at 50% 100%,#ff901d88,transparent 65%);filter:none;mask-image:linear-gradient(transparent,#000 20%);mix-blend-mode:screen;animation:none;pointer-events:none}
.immersive-space #room #realFireMotion[hidden] {display:none!important}
.immersive-space #room #centerFrame {left:55.5%;top:68%!important;width:12%;height:18%!important;padding:.7%;border:3px solid #8e7049;border-radius:3px;background:linear-gradient(110deg,#fff7e3,#e2d0ac);box-shadow:3px 5px 8px #30251666;transform:perspective(600px) rotateY(-8deg);overflow:visible;z-index:7;color:#4f4838}
.immersive-space #centerFrame:after {content:'';position:absolute;top:100%;left:8%;width:84%;height:18%;background:linear-gradient(100deg,#8e7049 0 8%,transparent 8% 92%,#8e7049 92%);clip-path:polygon(5% 0,95% 0,100% 100%,0 100%);pointer-events:none}
.immersive-space #centerFrame>* {display:block}
.immersive-space #centerFrame .frame-flourish {display:none}
.immersive-space #centerFrame>span {font:500 .45cqw var(--sans);letter-spacing:.08cqw}
.immersive-space #centerFrame h3 {font:600 1cqw/1.2 var(--serif);margin:.4cqw 0}
.immersive-space #centerFrame ol {font:.65cqw/1.4 var(--sans);padding-left:1.1cqw;margin:0;max-height:6.5cqw;overflow:auto}
.immersive-space #centerFrame li span {display:block;font-size:.45cqw}
.immersive-space #centerFrame #editBoard {position:static;width:100%;height:auto;margin-top:.4cqw;padding:.3cqw;font:.6cqw var(--sans);background:#e7dac1;color:#4f4838;border-radius:3px}
.immersive-space #centerFrame #editBoard:focus-visible {outline:2px solid #546c43;outline-offset:3px}
.immersive-space #room #fairyLights {position:absolute;left:22%;top:7%;width:56%;height:7%;display:block;z-index:6;pointer-events:none;transform:none;border:0}
.immersive-space #room #fairyLights[hidden] {display:none}
.immersive-space #room #fairyLights:before {inset:0;height:100%;border:0;border-radius:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0Q50 200 100 0' fill='none' stroke='%23554630' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center/100% 100% no-repeat;z-index:0}
.immersive-space #room #fairyLights i {position:absolute;left:var(--cord-x);top:var(--cord-y);margin:0;transform:translate(-50%,-10%);width:.45cqw;height:.65cqw;animation:none;border-radius:45%;box-shadow:0 0 5px 1px color-mix(in srgb,var(--light) 50%,transparent)}
.immersive-space #room[data-light-shape="stars"] #fairyLights i,.immersive-space #room[data-light-shape="hearts"] #fairyLights i,.immersive-space #room[data-light-shape="moons"] #fairyLights i {width:1em;height:1em;font-size:.9cqw;box-shadow:none}
@media(prefers-reduced-motion:reduce) {.immersive-space #room #roomWindow .window-sky:after {animation:none}}
/* Scene motion remains visible in both artwork styles. */
.immersive-space #room #roomWindow .window-sky:after {display:block;z-index:2;animation:nook-cloud-drift 14s ease-in-out infinite alternate;background:radial-gradient(ellipse at 20% 22%,#ffffff90,transparent 48%),radial-gradient(ellipse at 85% 42%,#ffffff60,transparent 44%)}
.immersive-space #room #roomWindow[data-view="forest"] .window-sky:after,.immersive-space #room #roomWindow[data-view="mountains"] .window-sky:after {inset:20% -35% -10%;background:radial-gradient(ellipse at 25% 60%,#e4eee6aa,transparent 50%),radial-gradient(ellipse at 80% 80%,#e4eee688,transparent 45%);animation:nook-mist-drift 12s ease-in-out infinite alternate}
.immersive-space #room #roomWindow[data-view="night"] .window-sky:after {inset:0;background:radial-gradient(circle at 20% 20%,#fff 0 1px,transparent 2px),radial-gradient(circle at 68% 35%,#fff 0 1px,transparent 2px),radial-gradient(circle at 40% 12%,#fff 0 1px,transparent 2px),radial-gradient(circle at 85% 15%,#fff 0 1px,transparent 2px);animation:nook-star-twinkle 3s ease-in-out infinite alternate}
.immersive-space #room #roomWindow[data-view="ocean"] .window-sky:after {inset:55% -10% -10%;background:repeating-linear-gradient(175deg,transparent 0 10%,#e5f4ff88 11% 12%,transparent 13% 23%);animation:nook-ocean-waves 3s ease-in-out infinite alternate}
.immersive-space #room #roomWindow[data-view="rain"] .window-sky:after {background:linear-gradient(#526d8520,#526d8540);animation:none}
@keyframes nook-cloud-drift {from{transform:translateX(-12%);opacity:.45}to{transform:translateX(14%);opacity:.85}}
@keyframes nook-mist-drift {from{transform:translateX(-12%);opacity:.35}to{transform:translateX(12%);opacity:.8}}
@keyframes nook-star-twinkle {from{opacity:.3}to{opacity:1}}
@keyframes nook-ocean-waves {from{transform:translate(-3%,-4%);opacity:.35}to{transform:translate(3%,6%);opacity:.85}}
/* Flicker only the light within the hearth; keep the photo geometry steady. */
.immersive-space[data-style="realistic"] #room #realFireMotion {left:45.5%;top:51%;width:8%;height:9.8%;background-image:var(--scene);background-position:49.4565% 56.541%;background-size:1250% 1020.408%;background-repeat:no-repeat;filter:brightness(1);mask-image:radial-gradient(ellipse at 50% 62%,#000 0 30%,#000b 50%,transparent 74%);mix-blend-mode:normal;opacity:.9}
.immersive-space[data-style="realistic"] .space-fire {clip-path:polygon(46% 51%,53% 51%,54% 60.8%,45% 60.8%);animation:none;filter:none}
@keyframes nook-photo-fire {0%,100%{filter:brightness(1) saturate(1)}18%{filter:brightness(1.13) saturate(1.06)}37%{filter:brightness(.96) saturate(1)}58%{filter:brightness(1.08) saturate(1.04)}79%{filter:brightness(1.02) saturate(1)}}
/* A small tabletop frame rests beside the chair, just above the table rim. */
.immersive-space #room #centerFrame {left:84%;top:59%!important;width:9%;height:13%!important;padding:.5%;transform:perspective(600px) rotateY(-12deg) rotate(-2deg);border-width:2px}
.immersive-space #centerFrame:after {left:12%;width:76%;height:12%;background:#8e7049;clip-path:polygon(6% 0,94% 0,100% 100%,0 100%)}
.immersive-space #centerFrame h3 {font-size:.8cqw;margin:.25cqw 0}
.immersive-space #centerFrame ol {font-size:.55cqw;max-height:3.4cqw;line-height:1.25;padding-left:.8cqw}
.immersive-space #centerFrame #editBoard {font-size:.55cqw;padding:.15cqw;margin-top:.2cqw}
.immersive-space[data-chair="false"] #room #centerFrame {left:65%;top:64%!important}
@media(prefers-reduced-motion:reduce) {.immersive-space #room #roomWindow .window-sky:after,.immersive-space[data-style="realistic"] .space-fire {animation:none}}
/* Keep long favorite lists readable without a bright scrollbar in the scene. */
.immersive-space #centerFrame ol {scrollbar-width:thin;scrollbar-color:#9c8762 transparent}

/* The illustrated 3D hearth reuses the front view's logs, glow and flames. */
.immersive-space[data-style="illustrated"] .space-fire,
.immersive-space[data-style="illustrated"] #room #realFireMotion {display:none!important}
.immersive-space[data-style="illustrated"] #room #fireplace {display:block!important;left:44.4%;top:46.2%;bottom:auto;width:10.7%;height:14.7%;z-index:3;filter:none;pointer-events:none}
.immersive-space[data-style="illustrated"] #room #fireplace[hidden] {display:none!important}
.immersive-space[data-style="illustrated"] #fireplace .mantel,
.immersive-space[data-style="illustrated"] #fireplace .hearth {display:none}
.immersive-space[data-style="illustrated"] #fireplace .fireplace-body {inset:0;width:100%;padding:0;background:transparent}
.immersive-space[data-style="illustrated"] #fireplace .fireplace-opening {height:100%;border:0;background:transparent;box-shadow:none;border-radius:40% 40% 0 0}
@media(prefers-reduced-motion:reduce) {.immersive-space[data-style="illustrated"] #fireplace .flame,.immersive-space[data-style="illustrated"] #fireplace .fire-glow {animation:none}}

/* Keep the hearth alive despite the room's general animation reset. */
@media(prefers-reduced-motion:no-preference) {
  .immersive-space[data-style="illustrated"] #fireplace .flame {animation:flame 1.4s infinite alternate ease-in-out!important}
  .immersive-space[data-style="illustrated"] #fireplace .flame-two {animation-delay:-.4s!important}
  .immersive-space[data-style="illustrated"] #fireplace .flame-three {animation-delay:-.9s!important}
  .immersive-space[data-style="illustrated"] #fireplace .fire-glow {animation:glow 3s ease-in-out infinite alternate!important}
  .immersive-space[data-style="realistic"] #room #realFireMotion {animation:photo-hearth-flicker 2.9s linear infinite!important}
  .immersive-space[data-style="realistic"] .space-fire {animation:none!important}
}
@media(prefers-reduced-motion:reduce) {
  .immersive-space[data-style="realistic"] #room #realFireMotion {filter:none;animation:none!important}
}

/* Each cabinet carries its own loop, including the side-wall perspective. */
.shelf-light-loop {display:none}
.immersive-space #room #fairyLights {display:none!important}
.immersive-space #room[data-lights="true"] .shelf-light-loop {display:block;position:absolute;left:2%;top:-12px;width:96%;height:36px;z-index:12;pointer-events:none}
.shelf-light-loop:before {content:'';position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0Q50 200 100 0' fill='none' stroke='%23554630' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center/100% 100% no-repeat}
.shelf-light-loop i {position:absolute;left:var(--cord-x);top:var(--cord-y);transform:translate(-50%,-10%);width:5px;height:8px;border-radius:45%;background:var(--light);box-shadow:0 0 6px 2px color-mix(in srgb,var(--light) 50%,transparent);color:var(--light);font-style:normal;font-family:Georgia,serif;text-align:center;line-height:1}
.room[data-light-color="rainbow"] .shelf-light-loop i {--light:var(--bulb-color)}
.room[data-light-shape="stars"] .shelf-light-loop i,.room[data-light-shape="hearts"] .shelf-light-loop i,.room[data-light-shape="moons"] .shelf-light-loop i {width:1em;height:1em;font-size:12px;background:none;box-shadow:none;filter:drop-shadow(0 0 3px var(--light));border-radius:0}

/* Free view keeps the compact pair of cabinets beside the fireplace. */
.room-experience:has(.room[data-space="classic"]) .size-presets {display:none}

/* Steam is anchored to the cup rim in each scene and follows chair visibility. */
.coffee-steam {position:absolute;left:88.9%;top:69.6%;width:3.2%;height:9%;overflow:visible;pointer-events:none;fill:none;stroke:#fffaf0;stroke-width:4.2;stroke-linecap:round;filter:blur(.35px)}
.coffee-steam path {opacity:.35;transform-box:fill-box;transform-origin:50% 100%;animation:var(--steam-animation,coffee-steam-rise) var(--steam-duration,4.8s) ease-in-out infinite}
.coffee-steam path:nth-child(2) {animation-delay:var(--steam-delay,-1.6s)}
.coffee-steam path:nth-child(3) {animation-delay:var(--steam-delay,-3.2s)}
.immersive-space .space-chair .coffee-steam {left:85.1%;top:59.4%;width:3.2%;height:9%}
.immersive-space[data-style="illustrated"] .coffee-steam {stroke-width:3.6;filter:blur(.3px)}
@keyframes coffee-steam-rise {
  0% {opacity:.12;transform:translate(0,12%) scale(.7,.65)}
  25% {opacity:.85}
  65% {opacity:.6;transform:translate(7%,-16%) scale(1.05,1.1)}
  100% {opacity:0;transform:translate(-6%,-40%) scale(1.25,1.3)}
}
@media(prefers-reduced-motion:reduce) {
  .coffee-steam path {animation:none;opacity:.55;transform:none}
}

/* Allow cup steam through the immersive room's blanket animation reset. */
@media(prefers-reduced-motion:no-preference) {
  .immersive-space .coffee-steam path {animation:var(--steam-animation,coffee-steam-rise) var(--steam-duration,4.8s) ease-in-out infinite!important}
  .immersive-space .coffee-steam path:nth-child(2) {animation-delay:var(--steam-delay,-1.6s)!important}
  .immersive-space .coffee-steam path:nth-child(3) {animation-delay:var(--steam-delay,-3.2s)!important}
}

/* Photographic cups release diffuse vapor with uneven, overlapping wisps. */
.room[data-style="realistic"] .coffee-steam,
.immersive-space[data-style="realistic"] .coffee-steam {
  --steam-animation:coffee-vapor-drift;
  --steam-duration:6.4s;
  stroke:#fffdf7;
  stroke-width:8;
  filter:blur(.65px);
  mask-image:linear-gradient(to top,#000 0 28%,#000c 50%,#0005 75%,transparent 100%);
}
.room[data-style="realistic"] .coffee-steam path,
.immersive-space[data-style="realistic"] .coffee-steam path {opacity:.3;filter:blur(1.8px)}
.room[data-style="realistic"] .coffee-steam path:nth-child(2),
.immersive-space[data-style="realistic"] .coffee-steam path:nth-child(2) {--steam-duration:7.7s;--steam-delay:-3.4s;stroke-width:11;filter:blur(2.8px)}
.room[data-style="realistic"] .coffee-steam path:nth-child(3),
.immersive-space[data-style="realistic"] .coffee-steam path:nth-child(3) {--steam-duration:5.9s;--steam-delay:-2.1s;stroke-width:7;filter:blur(2.2px)}
@keyframes coffee-vapor-drift {
  0% {opacity:0;transform:translate(0,15%) scale(.6,.65);filter:blur(1.4px)}
  20% {opacity:.48;transform:translate(-3%,2%) scale(.8,.85);filter:blur(1.9px)}
  45% {opacity:.38;transform:translate(9%,-14%) scale(1.1,1.05) skewX(-5deg);filter:blur(2.6px)}
  75% {opacity:.2;transform:translate(-8%,-34%) scale(1.4,1.2) skewX(7deg);filter:blur(3.5px)}
  100% {opacity:0;transform:translate(12%,-58%) scale(1.7,1.4);filter:blur(4.5px)}
}
@media(prefers-reduced-motion:reduce) {
  .room[data-style="realistic"] .coffee-steam path,
  .immersive-space[data-style="realistic"] .coffee-steam path {opacity:.28}
}