:root {
  --oak-deep: #493124; --oak-mid: #795136; --oak-light: #ae8150; --brass: #c7a66d;
  --model-paper: #e8e3d5; --model-green: #576b50; --model-sage: #9da988; --model-wall: #d7d0bc;
  --model-wood-top: #b99a70; --model-wood-side: #8a6c47; --model-wood-shade: #6a5239;
  --model-stone-side: #aaa38f; --model-stone-shade: #8a8978; --model-ivory: #f1ecdf;
  --door-time: 1400ms; --scene-time: 650ms; --scene-ease: cubic-bezier(.22, 1, .36, 1);
}

.door-scene { position: relative; width: 100%; height: 550px; perspective: 1200px; }
.door-halo { position: absolute; inset: 0 -10% 2%; pointer-events: none; background: radial-gradient(ellipse at 52% 48%, rgb(192 151 86 / .17), transparent 65%); }
.floor-grid { position: absolute; width: 130%; height: 350px; left: -15%; bottom: -100px; transform: rotateX(76deg); transform-origin: center 30%; background-image: linear-gradient(rgb(229 181 124 / .075) 1px, transparent 1px), linear-gradient(90deg, rgb(229 181 124 / .075) 1px, transparent 1px); background-size: 48px 48px; mask-image: radial-gradient(ellipse, #000 10%, transparent 69%); pointer-events: none; }
.architecture { position: absolute; width: 400px; height: 452px; left: 50%; top: 40px; margin-left: -200px; transform: rotateY(-9deg); transform-style: preserve-3d; }
.architecture::before { content: ''; position: absolute; width: 252px; height: 366px; top: 31px; left: 74px; border: 16px solid var(--line); border-bottom-width: 9px; border-radius: 144px 144px 3px 3px; box-sizing: border-box; background: #1a231c; box-shadow: inset 6px 3px 10px rgb(0 0 0 / .7), 1px 0 0 #65725c, 7px 5px 0 #273126, 11px 9px 24px rgb(0 0 0 / .34), -1px -1px 0 rgb(241 201 150 / .18); }
.architecture::after { content: ''; position: absolute; width: 330px; height: 65px; bottom: 12px; left: 37px; transform: rotateX(74deg) translateZ(-20px); border-radius: 50%; background: rgb(0 0 0 / .75); filter: blur(14px); pointer-events: none; }
.house-number { position: absolute; left: 12px; top: 191px; color: var(--accent); font: 11px/1.4 ui-monospace, monospace; text-align: center; }
.house-number b { display: block; margin-top: 4px; font: 28px/1 Georgia, serif; letter-spacing: -.04em; }
.house-number span { display: block; margin-top: 16px; color: var(--muted); font-size: 7px; letter-spacing: .16em; line-height: 1.8; }
.doorway { position: absolute; z-index: 2; width: 220px; height: 340px; left: 90px; top: 48px; display: block; padding: 0; border: 0; border-radius: 110px 110px 0 0; background: transparent; color: var(--ink); cursor: pointer; perspective: 1000px; transform-style: preserve-3d; -webkit-tap-highlight-color: transparent; }
.doorway:focus-visible { outline: 3px solid var(--accent-strong); outline-offset: 18px; }
.door-interior { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; transform: translateZ(-3px); background: linear-gradient(180deg, #e1caa3 0%, #b0a78b 68%, #8b795e 69%, #c9a77b 100%); box-shadow: inset 0 0 40px #70563c, 0 0 48px rgb(229 181 124 / .2); }
.door-interior::after { content: ''; position: absolute; left: -30%; right: -30%; bottom: -20%; height: 49%; background: repeating-linear-gradient(90deg, transparent 0 27px, rgb(81 64 38 / .15) 28px 29px); transform: perspective(100px) rotateX(43deg); }
.interior-window { position: absolute; width: 70px; height: 97px; top: 63px; right: 22px; border: 5px solid var(--model-paper); border-radius: 36px 36px 0 0; background: linear-gradient(120deg, #fff0c8, #c9d1ba); box-shadow: -12px 14px 0 rgb(105 94 69 / .09), 0 0 40px rgb(255 234 173 / .38); }
.interior-window::before { content: ''; position: absolute; width: 3px; height: 100%; left: 50%; background: var(--model-paper); }
.interior-window::after { content: ''; position: absolute; width: 100%; height: 3px; top: 48%; left: 0; background: var(--model-paper); }
.interior-plant { position: absolute; bottom: 91px; left: 25px; width: 27px; height: 50px; border-radius: 50% 0; background: var(--model-green); transform: rotate(-20deg); box-shadow: 19px 5px 0 -3px #718260, 14px 25px 0 -4px #647454; }
.welcome { position: absolute; z-index: 1; left: 27px; bottom: 61px; text-align: left; color: #354432; font: 16px/1.2 Georgia, serif; text-shadow: 0 1px 10px rgb(255 242 209 / .45); }
.welcome em { display: block; font-size: 40px; line-height: 1.1; }
.door-leaf--left, .door-leaf--right { position: absolute; top: 0; width: 50%; height: 100%; background: repeating-linear-gradient(89deg, transparent 0 3px, rgb(49 27 17 / .08) 4px, transparent 5px 12px), linear-gradient(95deg, var(--oak-mid), var(--oak-light) 31%, #9a6f44 50%, var(--oak-mid)); box-shadow: inset 0 0 0 1px rgb(238 197 139 / .28), inset 0 0 0 5px rgb(69 41 24 / .18), 0 1px 3px #25180f; transform-style: preserve-3d; transition: transform var(--door-time) var(--scene-ease); }
.door-leaf--left { left: 0; border-radius: 110px 0 0 0; transform-origin: left center; }
.door-leaf--right { right: 0; border-radius: 0 110px 0 0; transform-origin: right center; background-position: 7px 0, 0 0; }
.door-leaf--left::after, .door-leaf--right::after { content: ''; position: absolute; height: 45px; bottom: 19px; left: 14px; right: 14px; border: 1px solid rgb(239 204 151 / .22); box-shadow: inset 3px 3px 5px rgb(45 25 13 / .38), 1px 1px 0 rgb(239 204 151 / .22); background: rgb(62 35 20 / .09); }
.door-panel { position: absolute; top: 31px; left: 14px; right: 14px; height: 226px; border: 1px solid rgb(245 211 162 / .24); box-shadow: inset 4px 3px 7px rgb(37 22 12 / .32), 1px 1px 1px rgb(232 190 132 / .24); background: linear-gradient(100deg, rgb(49 27 15 / .17), transparent 35%, rgb(244 207 149 / .06)); }
.door-leaf--left .door-panel { border-radius: 92px 0 0 0; }
.door-leaf--right .door-panel { border-radius: 0 92px 0 0; }
.door-handle { position: absolute; width: 5px; height: 45px; top: 198px; border-radius: 2px; background: linear-gradient(90deg, #836035, #f3d39a 40%, var(--brass) 70%, #987447); box-shadow: 3px 2px 3px rgb(43 24 13 / .65); transform: translateZ(4px); }
.door-leaf--left .door-handle { right: 9px; }
.door-leaf--right .door-handle { left: 9px; }
.door-handle::before, .door-handle::after { content: ''; position: absolute; width: 8px; height: 3px; left: -1px; background: var(--brass); box-shadow: 1px 1px 2px #382211; }
.door-handle::before { top: 4px; }
.door-handle::after { bottom: 4px; }
.door-threshold { position: absolute; height: 11px; left: -17px; right: -17px; bottom: -11px; background: linear-gradient(var(--model-stone-side) 0 2px, #676958 3px 7px, #414a3b 8px); box-shadow: 3px 5px 8px rgb(0 0 0 / .35); transform: translateZ(2px); }
.wall-light--left, .wall-light--right { position: absolute; width: 5px; height: 28px; top: 172px; border-radius: 2px; background: linear-gradient(90deg, #665c3b, #f3d49c, #8f7b4e); box-shadow: 0 0 9px rgb(241 201 150 / .28); }
.wall-light--left { left: 57px; }
.wall-light--right { right: 50px; }
.wall-light--left::before, .wall-light--right::before { content: ''; position: absolute; width: 60px; height: 150px; top: -61px; left: -27px; background: radial-gradient(ellipse, rgb(230 196 126 / .16), transparent 65%); }
.door-plant { position: absolute; bottom: 43px; width: 66px; height: 115px; transform: translateZ(35px); z-index: 3; pointer-events: none; }
.plant-left { left: 14px; }
.plant-right { right: 9px; transform: translateZ(35px) scale(.84); transform-origin: bottom; }
.door-plant b { position: absolute; bottom: 0; left: 8px; width: 50px; height: 43px; border-radius: 3px 3px 14px 14px; background: repeating-linear-gradient(90deg, transparent 0 5px, rgb(26 34 26 / .15) 6px 7px), linear-gradient(100deg, #6c7560, #454f40 60%, #323d32); box-shadow: inset 0 2px 0 #969a7a, 5px 7px 8px rgb(0 0 0 / .23); }
.door-plant i { position: absolute; bottom: 34px; width: 23px; height: 75px; left: 24px; border-radius: 100% 0 80% 0; transform-origin: center bottom; background: linear-gradient(95deg, #293e2b, #69835a 49%, #7f9166 51%, #405b37); box-shadow: inset 1px 0 0 rgb(197 204 148 / .12); }
.door-plant i:nth-child(1) { transform: rotate(-36deg); height: 60px; }
.door-plant i:nth-child(2) { transform: rotate(29deg); height: 68px; }
.door-plant i:nth-child(3) { transform: rotate(-10deg); height: 88px; }
.door-plant i:nth-child(4) { transform: rotate(52deg); height: 45px; }
.door-caption { position: absolute; bottom: 4px; left: 0; right: 0; text-align: center; color: var(--muted); font: 10px/1.6 ui-monospace, monospace; letter-spacing: .14em; }
.entry.is-opening .door-leaf--left { transform: rotateY(-105deg); }
.entry.is-opening .door-leaf--right { transform: rotateY(105deg); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .doorway:hover .door-leaf--left { transform: rotateY(-4deg); }
  .doorway:hover .door-leaf--right { transform: rotateY(4deg); }
  .entry.is-opening .doorway .door-leaf--left { transform: rotateY(-105deg); }
  .entry.is-opening .doorway .door-leaf--right { transform: rotateY(105deg); }
}

#model-stage { position: relative; perspective: 1500px; }
#model-rotator { position: absolute; left: 50%; top: 50%; width: 420px; height: 320px; margin: -145px 0 0 -210px; transform: scale(var(--model-scale, 1)); transform-style: preserve-3d; }
.house-model { position: relative; width: 420px; height: 320px; transform: rotateX(57deg) rotateZ(var(--rotation, -32deg)); transform-style: preserve-3d; transition: transform var(--scene-time) var(--scene-ease); --fabric-top: var(--model-sage); --fabric-side: var(--model-green); --fabric-shade: #455440; }
.house-model *, .house-model *::before, .house-model *::after { box-sizing: border-box; }
.model-box { position: absolute; left: var(--x); top: var(--y); width: var(--w); height: var(--d); transform: translateZ(var(--z)) rotateZ(var(--r)); transform-style: preserve-3d; --mat-top: var(--model-wood-top); --mat-side: var(--model-wood-side); --mat-shade: var(--model-wood-shade); }
.box-face { position: absolute; left: 0; top: 0; width: var(--w); height: var(--h); transform-origin: 0 0; background: var(--mat-side); backface-visibility: visible; box-shadow: inset 0 0 0 .3px rgb(255 255 255 / .06); }
.box-face--top { height: var(--d); background: var(--mat-top); transform: translateZ(var(--h)); }
.box-face--north { transform: rotateX(90deg); background: var(--mat-shade); }
.box-face--south { transform: translateY(var(--d)) rotateX(90deg); }
.box-face--east { width: var(--d); transform: translateX(var(--w)) rotateZ(90deg) rotateX(90deg); background: var(--mat-shade); }
.box-face--west { width: var(--d); transform: rotateZ(90deg) rotateX(90deg); }
.material-base { --mat-top: #d3c6aa; --mat-side: #a79d84; --mat-shade: #857e6a; }
.foundation > .box-face--top { background-image: repeating-linear-gradient(90deg, transparent 0 14px, rgb(114 85 51 / .12) 14px 15px), repeating-linear-gradient(0deg, transparent 0 68px, rgb(114 85 51 / .06) 68px 69px); box-shadow: inset 0 0 0 6px var(--model-paper); }
.foundation > .box-face--south { background: linear-gradient(var(--mat-side) 0 3px, #827c68 3px 5px, var(--mat-side) 5px); }
.material-wall { --mat-top: var(--model-ivory); --mat-side: var(--model-wall); --mat-shade: var(--model-stone-side); }
.material-wall > .box-face--south { background-image: linear-gradient(0deg, rgb(96 86 63 / .14), transparent 28%); }
.material-paper, .material-linen { --mat-top: var(--model-ivory); --mat-side: #d9d3c2; --mat-shade: #b7b3a4; }
.material-fabric { --mat-top: var(--fabric-top); --mat-side: var(--fabric-side); --mat-shade: var(--fabric-shade); }
.material-throw { --mat-top: var(--fabric-side); --mat-side: var(--fabric-shade); --mat-shade: var(--fabric-shade); }
.material-sofa { --mat-top: #b4b49d; --mat-side: #909680; --mat-shade: #697561; }
.material-book { --mat-top: #be8260; --mat-side: #eee3ca; --mat-shade: #a76748; }
.material-frame { --mat-top: var(--model-wood-top); --mat-side: #ded7bb; --mat-shade: var(--model-wood-shade); }
.art-frame > .box-face--south { background: linear-gradient(30deg, #839274 0 33%, transparent 34%), linear-gradient(135deg, #d0b785 0 50%, #e7dfc5 51%); border: 3px solid var(--oak-mid); }
.material-brass { --mat-top: #e7c993; --mat-side: var(--brass); --mat-shade: #8f7750; }
.material-pot { --mat-top: #565743; --mat-side: #d0b698; --mat-shade: #947f63; }
.material-stem { --mat-top: #6b7751; --mat-side: #6b7751; --mat-shade: #435440; }
.material-lamp { --mat-top: #fbebbd; --mat-side: #e1c68e; --mat-shade: #c3aa79; }
.material-kitchen { --mat-top: #798569; --mat-side: #7b876b; --mat-shade: #536349; }
.kitchen-unit > .box-face--west { background-image: repeating-linear-gradient(90deg, transparent 0 32px, rgb(35 49 32 / .4) 33px 34px); }
.material-sink { --mat-top: #73827b; --mat-side: #718077; --mat-shade: #485b52; }
.kitchen-sink > .box-face--top { border: 3px solid #c0c4b3; box-shadow: inset 4px 3px 6px rgb(39 50 45 / .6); }
.material-hob { --mat-top: #3c4740; --mat-side: #39433a; --mat-shade: #222d27; }
.kitchen-hob > .box-face--top { background-image: radial-gradient(circle at 28% 27%, transparent 3px, #9eaa94 4px, transparent 5px), radial-gradient(circle at 70% 73%, transparent 5px, #9eaa94 6px, transparent 7px); }
.model-room { position: absolute; width: 138px; height: 150px; transform: translate3d(var(--room-x), 0, 0); transform-style: preserve-3d; transition: transform var(--scene-time) var(--scene-ease); }
.room-oak { --fabric-top: #b29e7a; --fabric-side: #8b795c; --fabric-shade: #766749; }
.room-sage { --fabric-top: var(--model-sage); --fabric-side: #78896a; --fabric-shade: #596f50; }
.room-sun { --fabric-top: #d5b675; --fabric-side: #ac8d55; --fabric-shade: #8d7145; }
.room-floor { position: absolute; width: 130px; height: 138px; left: 7px; top: 8px; transform: translateZ(1px); background: rgb(227 216 183 / .15); border: 2px solid transparent; transition: opacity 300ms; }
.model-room.is-selected { transform: translate3d(var(--room-x), 0, 5px); }
.model-room.is-selected .room-floor { background: radial-gradient(ellipse at 46% 35%, rgb(244 206 141 / .13), rgb(238 202 132 / .28)); border-color: var(--accent); box-shadow: inset 0 0 14px rgb(244 206 141 / .18), 0 0 14px rgb(229 181 124 / .25); }
.room-selection-ring { position: absolute; left: 6px; top: 8px; width: 132px; height: 140px; border: 2px solid var(--accent-strong); transform: translateZ(43px); box-shadow: 0 0 7px rgb(243 201 142 / .3); opacity: 0; transition: opacity 220ms; pointer-events: none; }
.model-room.is-selected .room-selection-ring { opacity: 1; }
.mattress > .box-face--top, .pillow > .box-face--top, .sofa-cushion > .box-face--top { border-radius: 3px; box-shadow: inset 1px 1px 2px rgb(255 255 255 / .3), inset -2px -2px 3px rgb(71 61 42 / .12); }
.duvet > .box-face--top { background-image: repeating-linear-gradient(0deg, transparent 0 8px, rgb(255 255 255 / .05) 9px, transparent 10px 16px); }
.bed-throw > .box-face--top { background-image: repeating-linear-gradient(90deg, transparent 0 2px, rgb(242 228 197 / .15) 3px, transparent 4px); }
.desk > .box-face--west { background-image: linear-gradient(0deg, transparent 48%, rgb(55 39 23 / .2) 50%, transparent 53%); }
.model-window { position: absolute; left: 36px; top: 6.4px; width: 68px; height: 35px; transform-origin: left top; transform: translateZ(24px) rotateX(90deg); border: 4px solid #a49e85; background: linear-gradient(125deg, #c9d9c7 5%, #e8ecd2 58%, #a6c4b6); box-shadow: inset 2px 2px 0 rgb(63 80 63 / .15), 1px 1px 0 #f4edd8; }
.window-mullion { position: absolute; width: 3px; height: 100%; left: 50%; background: var(--model-paper); }
.window-mullion::after { content: ''; position: absolute; width: 60px; height: 2px; top: 13px; left: -30px; background: var(--model-paper); }
.room-number { position: absolute; left: 96px; top: 123px; width: 25px; height: 25px; display: grid; place-items: center; border: 1px solid rgb(86 94 72 / .34); border-radius: 50%; color: #526047; background: #d5d0b9; transform: translateZ(47px) rotateZ(calc(var(--rotation, -32deg) * -1)) rotateX(-57deg); font: 11px/1 ui-monospace, monospace; transition: transform var(--scene-time) var(--scene-ease); }
.model-room.is-selected .room-number { color: #4d3b22; background: var(--accent-strong); border-color: #f5dca8; box-shadow: 0 0 13px rgb(244 204 136 / .4); }
.shared-room { position: absolute; inset: 0; transform-style: preserve-3d; }
.living-rug { position: absolute; left: 20px; top: 216px; width: 185px; height: 84px; transform: translateZ(1px); border: 4px solid #c5b894; border-radius: 2px; background: repeating-linear-gradient(0deg, #b2ab8d 0 2px, #b8b297 2px 3px); box-shadow: 2px 3px 3px rgb(84 70 45 / .15); }
.coffee-table > .box-face--top, .dining-table > .box-face--top { border-radius: 3px; background-image: repeating-linear-gradient(90deg, transparent 0 7px, rgb(117 78 39 / .08) 8px, transparent 9px 13px); }
.model-plant { position: absolute; width: 16px; height: 16px; transform-style: preserve-3d; }
.model-leaf { position: absolute; left: 4px; top: 4px; width: 15px; height: 28px; border-radius: 90% 0 90% 0; transform-origin: 3px 3px; transform: translateZ(var(--leaf-height)) rotateZ(var(--leaf-angle)) rotateX(36deg); background: linear-gradient(100deg, #3e6547, #7a905a 48%, #597347 51%); box-shadow: inset 0 1px 0 rgb(193 204 143 / .18); }
.common-label { position: absolute; left: 213px; top: 293px; transform: translateZ(1px); color: #726d55; font: 7px/1 ui-monospace, monospace; letter-spacing: 1.8px; }
.house-ground-shadow { position: absolute; width: 460px; height: 354px; left: -12px; top: 5px; transform: translateZ(-22px); background: rgb(0 0 0 / .5); border-radius: 24px; box-shadow: 0 15px 45px rgb(0 0 0 / .4); filter: blur(18px); }
.scene-panel.is-night { --model-ivory: #c6c5b4; --model-wall: #aeb4a0; --model-stone-side: #7b8976; --model-wood-top: #9e916c; --model-wood-side: #756c4e; --model-wood-shade: #514f3b; }
.scene-panel.is-night .model-window { background: linear-gradient(120deg, #415b56, #7f9990); border-color: #737e66; }
.scene-panel.is-night .room-floor { background: radial-gradient(ellipse at 8% 12%, rgb(255 216 131 / .44), transparent 65%); }
.scene-panel.is-night .room-lamp > .box-face--top { box-shadow: 0 0 17px 9px rgb(255 214 127 / .45); }
.scene-panel.is-night .model-room.is-selected .room-floor { border-color: var(--accent); box-shadow: inset 0 0 24px rgb(229 181 124 / .3), 0 0 20px rgb(229 181 124 / .3); }

@media (max-width: 1100px) { #model-rotator { --model-scale: .88; } }
@media (max-width: 760px) {
  .door-scene { height: 400px; }
  .architecture { top: -9px; transform: rotateY(-9deg) scale(.81); transform-origin: center 44%; }
  .door-halo { inset: -5% -10% -10%; }
  .door-caption { bottom: 0; }
  .floor-grid { bottom: -114px; }
  #model-rotator { --model-scale: .91; margin-top: -137px; }
}
@media (max-width: 540px) { #model-rotator { --model-scale: .60; } }
@media (max-width: 380px) { #model-rotator { --model-scale: .54; } .architecture { transform: rotateY(-9deg) scale(.76); } }
@media (prefers-reduced-motion: reduce) {
  .door-leaf--left, .door-leaf--right, .house-model, .model-room, .room-number, .room-selection-ring { transition: none; }
  .entry.is-opening .door-leaf--left, .entry.is-opening .door-leaf--right { transform: none; opacity: 0; }
}