#room-screen{z-index:1}
to{opacity:1;transform:none}}
#room-stage{will-change:auto;position:absolute;left:0;top:0;width:1536px;height:1024px}
.room-bg{position:absolute;left:0;top:0;width:1536px;height:1024px;display:block}
.starli-wrap{position:absolute;pointer-events:none}
.starli-img{width:100%;height:100%;display:block;animation:starli-float 4.2s ease-in-out infinite}
@keyframes starli-float{0%,100%{transform:translateY(-3px)}50%{transform:translateY(3px)}}
.hotspots{position:absolute;left:0;top:0;width:1536px;height:1024px}
.hs{cursor:pointer;outline:none}
.hs-hit{fill:transparent;pointer-events:all}
.hs-glow{fill:#fff3b0;opacity:0;pointer-events:none;transition:opacity .25s}
.hs-ring{fill:none;stroke:#fff6c8;stroke-width:var(--ring,5);stroke-linejoin:round;opacity:0;pointer-events:none;transition:opacity .2s}
.hs:hover .hs-glow{opacity:.5}
.hs:focus-visible .hs-glow{opacity:.75}
.hs:focus-visible .hs-ring{opacity:1;stroke:#ffd54a;stroke-width:calc(var(--ring,5) * 1.4)}
.hs.tap .hs-glow{opacity:.9}
.hotspots.hint .hs-glow{animation:hint-pulse 1.1s ease-in-out 2}
@keyframes hint-pulse{0%,100%{opacity:0}50%{opacity:var(--gmax,.7)}}
#room-screen.arrive{z-index:3;animation:room-fade 1.2s ease-in-out both}
#room-screen.arrive-dissolve{z-index:3;animation:room-fade 1s ease-in-out both}
#room-screen.arrive-fast{z-index:3;animation:room-fade .25s ease-out both}
@keyframes room-fade{from{opacity:0}to{opacity:1}}
.pad{fill:transparent;pointer-events:all;cursor:pointer}
.dev-pending{fill:rgba(0,120,255,.12);stroke:#0078ff;stroke-width:3;stroke-dasharray:10 8;pointer-events:none}
body.dev .hs-hit{fill:rgba(255,140,0,.12);stroke:#ff8c00;stroke-width:3}
body.dev .hs-ring{opacity:.6}
.hotspots.hint .hs-ring{animation:none;opacity:0}
@keyframes hint-ring{0%,100%{opacity:0}50%{opacity:.9}}
.hs{touch-action:manipulation;-webkit-tap-highlight-color:transparent}

.hotspots.hint-on .hs-glow{opacity:var(--gon,.55)}
.hs[data-id=nanav]{--gmax:.22;--gon:.2}
.hotspots.hint-on .hs-ring{opacity:.8}
.hotspots.hint-on [data-dest] ~ *{}