/* All positions share the 2172 × 724 room coordinates. */
.studio-world{--floor-offset:32px;background-image:url('assets/studio-v19/room.png')}
.studio-world .actor-anchor{pointer-events:none;margin-top:var(--floor-offset)}
/* Keep the whole cabinet and floor in frame as the panorama grows beyond Full HD. */
@media(min-width:1001px){.studio-scene{height:max(clamp(320px,26vw,420px),23.5vw)}}
.city-window{position:absolute;left:905px;top:166px;width:800px;height:305px;z-index:0;background:#191923;border:12px solid #191719;box-shadow:0 0 0 3px #453830,inset 0 0 20px #000,0 12px 0 #30231e,0 16px 0 #100f11;overflow:hidden}
.city-view{position:absolute;inset:0;background:url('assets/studio-v19/city.png') center/100% 100%;filter:brightness(.72) saturate(.8)}
.city-window:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent 32.8%,#19171c 32.8% 33.4%,transparent 33.4% 66.4%,#19171c 66.4% 67%,transparent 67%),linear-gradient(#0004,transparent 20%,transparent 90%,#0005);pointer-events:none}
.cloud-drift{position:absolute;left:-18px;right:-18px;top:0;height:55px;background:url('assets/studio-v19/city.png') left top/100% auto;mask-image:linear-gradient(#000 45%,transparent);animation:cloud-drift 48s ease-in-out infinite alternate;opacity:.7}
@keyframes cloud-drift{to{transform:translateX(25px)}}
.city-light{position:absolute;width:2px;height:3px;background:#ffcd7b;opacity:.15;animation:city-light 13s ease-in-out infinite}
@keyframes city-light{0%,25%,100%{opacity:.1}40%,68%{opacity:.85}85%{opacity:.25}}
.vk-office-logo{position:absolute;left:48.4%;top:27%;width:23px;height:23px;background:#1766be;color:#d2e6ff;font:700 15px Arial,sans-serif;text-align:center;line-height:23px;transform:skewY(-12deg);box-shadow:0 0 8px #3b9eff35}
.window-curtains{left:905px;top:164px;width:800px;height:310px;z-index:1;border-top:7px solid #181619}
.curtain{transform:scaleX(.06)}
.display-cabinet,.coffee-unit{position:absolute;z-index:1;pointer-events:none;filter:brightness(.74)}
.display-cabinet{left:650px;top:calc(160px + var(--floor-offset));width:220px;height:394px}
.coffee-unit{left:58px;top:calc(287px + var(--floor-offset));width:295px;height:272px}
.display-cabinet canvas,.coffee-unit canvas{width:100%;height:100%;image-rendering:pixelated;display:block}
.coffee-unit:after,.display-cabinet:after{content:'';position:absolute;bottom:-6px;left:0;right:0;height:16px;background:radial-gradient(ellipse,#070608d9 25%,#07060870 55%,transparent 74%);z-index:-1}
/* The wand tip is (1322,568) in the furniture atlas, relative to its coffee crop. */
.coffee-steam{position:absolute;left:81.1%;top:36.3%;width:1px;height:1px;opacity:0;pointer-events:none}
.coffee-steam i{position:absolute;left:-3px;top:-3px;width:7px;height:8px;background:#eee6d7c7;clip-path:polygon(25% 0,75% 0,75% 25%,100% 25%,100% 75%,75% 75%,75% 100%,25% 100%,25% 75%,0 75%,0 25%,25% 25%);animation:coffee-steam 1.5s -.35s linear infinite}
.coffee-steam i:nth-child(2){animation-delay:-.7s}.coffee-steam i:nth-child(3){animation-delay:-1.05s}.coffee-steam i:nth-child(4){animation-delay:-1.4s}
@keyframes coffee-steam{0%{transform:translate(0,0) scale(.45);opacity:0}12%{opacity:.85}35%{transform:translate(5px,7px) scale(1);opacity:.7}70%{transform:translate(13px,-8px) scale(1.6);opacity:.4}100%{transform:translate(19px,-34px) scale(2.25);opacity:0}}
.steaming .coffee-steam{opacity:1}.brewing .coffee-unit canvas{animation:coffee-rattle .14s steps(2,end) infinite}
@keyframes coffee-rattle{to{transform:translateX(.7px)}}
.coffee-hotspot{left:62px;top:calc(287px + var(--floor-offset));width:288px;height:180px;z-index:2}
.memento{position:absolute;margin-top:var(--floor-offset);z-index:2;background:none;border:0;padding:0;cursor:pointer;filter:brightness(.8);transition:filter .2s;touch-action:manipulation}
.memento canvas{display:block;width:100%;height:100%;object-fit:contain;object-position:center bottom;image-rendering:pixelated}
.memento:before{content:'';position:absolute;inset:-10px}
.memento:hover,.memento:focus-visible,.memento.is-inspected{filter:brightness(1.15) drop-shadow(0 0 4px #e4b87b77)}
.memento:focus-visible{outline:2px solid #e7bc87;outline-offset:4px}
.memento.is-taken{opacity:.25}
.memento-hint{position:absolute;z-index:8;left:18px;bottom:16px;width:440px;max-width:calc(100% - 36px);padding:17px 38px 17px 17px;border:1px solid #6c5344;border-radius:5px;background:#191719f5;color:#eee5dd;box-shadow:0 6px 24px #0007;font-size:15px;line-height:1.55;display:grid;grid-template-columns:140px minmax(0,1fr);gap:17px;align-items:center}
.memento-preview{display:block;width:140px;height:140px;object-fit:contain;image-rendering:pixelated}
.memento-hint strong{display:block;color:#ffd2aa;font-size:17px;margin-bottom:7px}.memento-hint p{margin:0}.memento-hint button{position:absolute;right:6px;top:5px;background:transparent;border:0;color:#ccc;font-size:20px;padding:4px}
.memento-hint a{color:#ffd2aa;text-decoration:underline;text-underline-offset:3px}.memento-hint a:hover{color:#fff0e0}.memento-hint a:focus-visible{outline:2px solid #ff6078;outline-offset:4px;border-radius:2px}
.desk-contact{position:absolute;left:1812px;top:calc(551px + var(--floor-offset));width:300px;height:31px;background:radial-gradient(ellipse,#050507c9 25%,#05050755 53%,transparent 73%);z-index:1;pointer-events:none}
#workstation-canvas{top:calc(295px + var(--floor-offset));filter:brightness(.82)}.streaming #workstation-canvas{filter:brightness(.94)}
#stream-camera{top:calc(329px + var(--floor-offset))}
#stream-microphone{top:calc(408px + var(--floor-offset))}
.desk-hotspot{top:calc(330px + var(--floor-offset))}
.panel-light-right{top:calc(300px + var(--floor-offset))}
.paused .cloud-drift,.paused .city-light,.paused .coffee-steam i,.paused .coffee-unit canvas{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.cloud-drift,.city-light,.coffee-steam i,.brewing .coffee-unit canvas{animation:none}.memento{transition:none}}
@media(max-width:700px){.memento-hint{position:fixed;z-index:100;font-size:13px;bottom:16px;grid-template-columns:80px minmax(0,1fr);gap:12px;padding:13px 28px 13px 13px}.memento-preview{width:80px;height:100px}.memento-hint strong{font-size:14px}.studio-caption{max-width:48%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}}