.house-experience{position:fixed;inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;background:#000;color:#e4e8eb;border:0;overflow:hidden}
.house-experience:not([open]),.house-experience [hidden]{display:none!important}
.house-experience::backdrop{background:#000}
.experience-exit,.experience-back{position:absolute;z-index:5;padding:14px;background:#000;color:#dae4e9;border:0;font:10px 'Bodoni Moda',serif;letter-spacing:.16em;min-height:44px}
.experience-exit{bottom:24px;right:24px}.experience-back{top:24px;left:24px}
.photo-web{position:absolute;inset:8% 4% 14%;transition:transform 1.1s ease-in,opacity 1.1s ease-in}
.photo-web svg,.web-images{position:absolute;inset:0;width:100%;height:100%}
.photo-web path{stroke:#a9cbdc;stroke-width:1;fill:none;opacity:.45}
.web-images img{position:absolute;max-height:18%;object-fit:cover;aspect-ratio:4/5;border:1px solid #cbdbe04d;box-shadow:0 0 18px #b9d9e91a;transform:translate(-50%,-50%) rotate(var(--tilt))}
.web-active .photo-web path{stroke-dasharray:1100;animation:web-thread 1.2s ease both}
.web-active .web-images img{animation:web-photo .8s var(--arrive) ease both}
.web-unfold .photo-web{transform:scale(2.8);opacity:0}
.web-caption{position:absolute;bottom:11%;width:100%;text-align:center;font:10px 'Bodoni Moda',serif;letter-spacing:.25em;color:#d0dce2;pointer-events:none}
.closed-door-scene{position:absolute;inset:10% 0 5%;display:flex;flex-direction:column;align-items:center;justify-content:center;animation:door-arrive .8s ease both}
.closed-door{position:relative;width:min(235px,52vw);height:min(380px,52vh);flex-shrink:0}
.closed-door svg{width:100%;height:100%;fill:none;stroke:#dce1e4;stroke-width:.8}
.door-etch{stroke:#9fc2d3;opacity:.45}
.door-knob{position:absolute;right:12%;top:54%;width:44px;height:44px;display:grid;place-items:center;border:0;background:none;color:#e8eef1;cursor:pointer}
.door-knob span{width:11px;height:11px;border-radius:50%;background:radial-gradient(circle at 30% 25%,#fff,#c9dce4 35%,#596d78 85%);box-shadow:0 0 10px #accbda26}
.door-status{font:20px Georgia, 'Times New Roman', serif;color:#b9c8cf;text-align:center;margin:8px 16px 16px}
.door-rattle{animation:door-rattle .4s ease}
.door-note{width:min(280px,80vw);min-height:88px;padding:15px 20px;background:linear-gradient(130deg,#d9e1e4,#fafafa 50%,#becbd2);color:#1b2429;border:1px solid #edf3f6;display:grid;gap:16px;text-align:center;font:10px 'Bodoni Moda',serif;letter-spacing:.16em;animation:note-slip 1.1s ease both;transition:min-height .6s}
.note-open{min-height:125px}.closed-message{font:20px 'Bodoni Moda',serif;letter-spacing:.08em}.closed-message small{display:block;font-size:10px;margin-top:12px;letter-spacing:.2em}
.house-experience button:focus-visible{outline:1px solid #bad7e6;outline-offset:5px}
.house-doors{grid-template-columns:repeat(4,minmax(0,1fr))}
@keyframes web-thread{from{stroke-dashoffset:1100}to{stroke-dashoffset:0}}@keyframes web-photo{from{opacity:.1;transform:translate(-50%,-50%) scale(.2)}to{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(var(--tilt))}}
@keyframes door-arrive{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:none}}
@keyframes door-rattle{25%,75%{transform:translateX(-2px)}50%{transform:translateX(2px)}}
@keyframes note-slip{from{opacity:0;transform:translateY(-30px) scaleY(.1)}to{opacity:1;transform:none}}
@media(max-width:600px){.house-doors{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 24px}.house-rooms{padding-top:44px;padding-bottom:80px}.house-door{padding:16px 8px;gap:15px}.photo-web{inset:15% 2% 20%}.door-status{font-size:18px}}
@media(prefers-reduced-motion:reduce){.house-experience *{animation:none!important;transition:none!important}.web-images img{opacity:1}}