/* A contained room: the entire composition fits in the first viewport. */
.interactive-hero{height:100svh;max-width:none;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at 70% 40%,#112029 0%,#060b10 68%);perspective:1600px}
.interactive-hero .hero-grid{flex:none;width:min(98%,calc(98svh * 1672 / 941));aspect-ratio:1672/941;height:auto;min-height:0;position:relative;z-index:1;gap:0}
.studio-header{z-index:5;padding-top:20px}.interactive-hero .hero-foot{z-index:5}
.setup{transform:rotateX(var(--room-rx,0deg)) rotateY(var(--room-ry,0deg));transform-origin:60% 55%;transition:transform .65s cubic-bezier(.2,.7,.2,1);transform-style:preserve-3d;box-shadow:0 32px 65px #0006}
.setup-image{filter:saturate(.66) brightness(.82) contrast(1.05)}
.setup::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,#030a1010 0%,transparent 35%,transparent 75%,#02060938 100%);box-shadow:inset 0 0 60px #01060a35;z-index:1}
.setup-nav,.setup-links{z-index:2}.setup-hint{z-index:3;color:#a3adb3}.hero-copy{z-index:4}.hero-copy h1{font-size:clamp(28px,3.8vw,64px);color:#e8e8e3}.hero-copy h1 em{color:#d49a8c}.hero-copy .intro{color:#acb6bd}.hero-copy .button{background:#142127;border-color:#3b505b;color:#dce7ec}
.setup-nav a:hover .object-label,.setup-links .hotspot:hover .device-label{filter:none;color:#fff;text-shadow:0 1px 2px #000;background:#ffffff0b}
.setup-nav a .object-label,.setup-links .hotspot .device-label{color:#c9d5da;font-weight:500;text-shadow:0 1px 2px #000;letter-spacing:0;transition:color .2s,background .2s}
.setup-nav a:nth-child(2) .object-label,.setup-links .hotspot-software .device-label{color:#e0b7ac}
.setup-nav a:focus-visible,.setup-links .hotspot:focus-visible{outline:1px solid #e0e8eb;outline-offset:3px;background:#ffffff07}
/* Label centers and slopes measured against each blank physical plaque. */
@media(min-width:1001px),(orientation:landscape){
 .setup-nav a{height:22.5%}.setup-nav .object-label{bottom:1%;height:15%;font-size:clamp(10px,1.05vw,17px)}
 .setup-links .hotspot-web .device-label{bottom:1.6%;transform:rotate(7deg);height:18%}
 .setup-links .hotspot-software .device-label{bottom:3%;transform:rotate(12deg);height:21%;font-size:clamp(9px,.85vw,14px)}
 .setup-links .hotspot-auto .device-label{bottom:5%;transform:rotate(22deg);height:28%;font-size:clamp(9px,.85vw,14px)}
 .setup-links .hotspot-auto{left:81.4%;width:9.8%}
}
@media(max-width:1000px) and (orientation:portrait){
 .interactive-hero{max-width:none;display:flex;flex-direction:column;justify-content:flex-start;height:100svh;perspective:none}
 .studio-header{position:relative;flex:none;width:100%;height:50px;min-height:0;padding:10px 20px;align-items:center;justify-content:space-between}.studio-header .wordmark{font-size:26px}.studio-contact{font-size:10px}
 .interactive-hero .hero-grid{width:100%;flex:1;min-height:0;height:auto;aspect-ratio:auto;display:flex;flex-direction:column;align-items:center}
 .hero-copy{position:relative;inset:auto;flex:none;width:100%;max-width:560px;margin:0;padding:8px 20px 14px;display:grid;grid-template-columns:1fr auto;column-gap:12px;align-items:center;pointer-events:auto}
 .studio-caption{display:none}.hero-copy h1{font-size:clamp(24px,6.4vw,36px);letter-spacing:-1px;line-height:1.08;margin:0 0 8px;grid-column:1/-1}.hero-copy h1 br{display:none}.hero-copy h1 em:before{content:' '}.hero-copy .intro{font-size:10px;line-height:1.5;max-width:none}.hero-copy .actions{margin:0}.hero-copy .button{font-size:9px;padding:9px 10px;gap:8px}.hero-copy .button span{font-size:14px}
 .setup{position:relative;inset:auto;flex:1;min-height:0;max-width:100%;width:auto;aspect-ratio:2/3;height:auto;margin:0;transform:none;box-shadow:0 15px 40px #0005;container-type:inline-size}
 .studio-picture,.setup-image{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
 .setup::after{box-shadow:inset 0 0 25px #0003}.setup-hint{display:none}
 .setup-nav .object-label{font-size:clamp(9px,3.1cqw,16px);bottom:3%;height:18%}
 .setup-links .hotspot .device-label{font-size:clamp(9px,3cqw,16px);transform:none}
 .setup-links .hotspot-web .device-label{font-size:clamp(12px,3.8cqw,20px);bottom:1%}
 .setup-links .hotspot-software .device-label,.setup-links .hotspot-auto .device-label{font-size:clamp(9px,2.8cqw,15px);bottom:2%}
 .interactive-hero .hero-foot{position:relative;inset:auto;flex:none;height:24px;width:100%;margin:0;padding:6px 20px;font-size:7px;line-height:12px;color:#7e909b}
}
@media(prefers-reduced-motion:reduce){.setup{transform:none!important;transition:none}}