#entrance-screen{z-index:2}
#door-camera{position:absolute;left:0;top:0;width:1145px;height:1374px}
#door-camera>*{position:absolute}
.layer{left:0;top:0}
.hall-p{display:block;max-width:none}
.door-behind{background-repeat:no-repeat;background-color:#000}
.swing{width:1145px;height:1374px;perspective:2200px;pointer-events:none}
.door-leaf{position:absolute;backface-visibility:visible;will-change:transform}
.knob-target{background:transparent;border:0;border-radius:50%;cursor:pointer;padding:0;z-index:5}
.knob-target:focus-visible{outline:8px solid #ffd54a;outline-offset:4px}
.knob-glow{border-radius:50%;pointer-events:none;z-index:4;background:radial-gradient(circle,rgba(255,236,150,.55) 0%,rgba(255,226,120,.25) 45%,rgba(255,226,120,0) 70%);animation:knob-pulse 2.6s ease-in-out infinite}
.knob-target:hover+.knob-glow,.knob-target:focus-visible~.knob-glow{opacity:1}
@keyframes knob-pulse{0%,100%{opacity:.35;transform:scale(.92)}50%{opacity:.95;transform:scale(1.06)}}
body.door-busy .knob-glow{animation:none;opacity:0;transition:opacity .25s}
body.door-busy .knob-target{pointer-events:none}
/* WELCOME mat: part of the illustration. An invisible hotspot in the mat's exact shape, and a soft gold glow beside/over it. */
.welcome-mat{background:transparent;border:0;padding:0;margin:0;cursor:pointer;z-index:3;-webkit-tap-highlight-color:transparent;touch-action:manipulation;opacity:0}
.welcome-mat:focus-visible{opacity:0}
.mat-glow{z-index:2;pointer-events:none;overflow:visible;opacity:0;transition:opacity .25s ease}
.mat-glow-halo{fill:none;stroke:#ffe27a;stroke-width:16;stroke-linejoin:round;filter:blur(9px)}
.mat-glow-fill{fill:rgba(255,232,150,.16);stroke:rgba(255,226,120,.85);stroke-width:3;stroke-linejoin:round;mix-blend-mode:screen}
.welcome-mat:hover~.mat-glow,.welcome-mat:active~.mat-glow,.welcome-mat:focus-visible~.mat-glow,.mat-glow.tap{opacity:1}
body.door-busy .welcome-mat{pointer-events:none}
/* entrance theme song control: small, bottom-left, never over the door art */
.theme-ctl{position:absolute;left:max(12px,env(safe-area-inset-left));bottom:max(12px,env(safe-area-inset-bottom));z-index:20;display:flex;gap:8px;align-items:center}
.theme-ctl[hidden],.theme-ctl [hidden]{display:none}
.theme-btn,.theme-play{border:2px solid #d9c8f5;background:#fffaf0;color:#4b3a8c;box-shadow:0 2px 8px rgba(91,33,182,.15);cursor:pointer;display:flex;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent}
.theme-btn{width:44px;height:44px;border-radius:50%;padding:0}
.theme-play{height:44px;border-radius:999px;padding:0 16px 0 12px;gap:7px;font:700 15px/1 Poppins,system-ui,sans-serif;animation:theme-bob 2.4s ease-in-out infinite}
.theme-btn svg,.theme-play svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.theme-btn.off{opacity:.75}
.theme-btn:hover,.theme-play:hover{background:#fff4e2}
.theme-btn:focus-visible,.theme-play:focus-visible{outline:3px solid #1f6dff;outline-offset:2px}
@keyframes theme-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
html.calm .theme-play{animation:none}