/* The environment belongs to the whole section. Products contain true alpha. */
.showroom{isolation:isolate;padding-top:75px;--showcase-accent:#6800ff;transition:background-color 1150ms cubic-bezier(.65,0,.35,1),color 1150ms cubic-bezier(.65,0,.35,1)}
.showroom-atmosphere{position:absolute;inset:-10%;z-index:-2;pointer-events:none;will-change:opacity,transform}
.showroom-atmosphere.device-outgoing{z-index:-1}
.showroom:after{content:'';position:absolute;inset:0;pointer-events:none;z-index:0;background:radial-gradient(ellipse at 50% 45%,transparent 40%,#1c1c1e0b 100%);opacity:.7}
.showroom-heading,.device-stage,.device-tabs{position:relative;z-index:1}
.showroom-heading{margin-top:48px}
.device-stage{height:610px}
.showroom .device-picture,.showroom.dark-device .device-picture{inset:10px 15% auto;width:70%;height:80%;mask-image:none;overflow:visible;z-index:2;background:none}
.showroom .device-picture img{width:100%;height:100%;object-fit:contain;mix-blend-mode:normal;mask-image:none;filter:drop-shadow(0 14px 13px #1c1c1e15);transition:none}
.device-shadow{position:absolute;left:34%;width:32%;height:26px;top:77%;border-radius:50%;background:#1c1c1e;opacity:.16;filter:blur(23px);pointer-events:none;z-index:0}
.showroom .device-giant{top:12%;opacity:.065;font-size:clamp(64px,13.7vw,250px);z-index:0;white-space:nowrap}
.showroom .device-giant.device-outgoing{z-index:0}
.showroom .device-label,.showroom .device-index{z-index:5}
.device-label{bottom:15px}.device-current{display:inline-block;min-width:2ch}
.showroom .round-button{z-index:6;background:#ffffff04;backdrop-filter:blur(12px);transition:transform .35s,border-color .35s,box-shadow .35s,color .35s}
.showroom .round-button:hover{background:#ffffff08;color:inherit;border-color:var(--showcase-accent);box-shadow:0 0 22px color-mix(in srgb,var(--showcase-accent) 15%,transparent);transform:translateX(3px) scale(1.04)}
.showroom .device-prev:hover{transform:translateX(-3px) scale(1.04)}
.showroom .text-button:hover{color:var(--showcase-accent)}
.device-tabs{width:max-content;max-width:100%;margin-inline:auto;gap:30px;isolation:isolate}
.device-tabs button,.device-tabs button.active{border-bottom-color:transparent;transition:opacity .5s,color .8s;min-height:44px}
.device-tabs button.active{color:var(--showcase-accent)}
.device-indicator{position:absolute;left:0;bottom:0;height:2px;background:var(--showcase-accent);transition:transform 1150ms cubic-bezier(.65,0,.35,1),width 1150ms cubic-bezier(.65,0,.35,1),background-color 1150ms;pointer-events:none}
.navigation{transition:background .8s,color .8s,border-color .8s;backdrop-filter:blur(18px) saturate(130%)}
.navigation.showroom-light{background:linear-gradient(120deg,#f0e6c8dc,#f0e6c8b8);color:#1c1c1e;border-color:#1c1c1e26;box-shadow:inset 0 1px 0 #fff6,0 8px 35px #1c1c1e12}
.navigation.showroom-light .nav-links a.active,.navigation.showroom-light .nav-links a:hover{color:#6800ff}
.navigation.showroom-light .nav-shop{background:#1c1c1e;color:#f0e6c8}
.navigation.showroom-light .menu-lines{border-color:#1c1c1e}
.navigation.showroom-light .nav-links.open{color:#f0e6c8}
.navigation.showroom-light .nav-links.open a.active{color:#ff79bc}
@media(max-width:800px){.device-stage{height:530px}.showroom .device-picture{inset:15px 10% auto;width:80%;height:78%}.device-tabs{gap:22px}}
@media(max-width:600px){.showroom{padding-top:50px}.showroom-heading{margin-top:30px}.showroom-atmosphere{opacity:.7}.device-stage{height:420px}.showroom .device-picture{inset:8px -3% auto;width:106%;height:77%}.showroom .device-giant{font-size:13.5vw;top:12%}.showroom .round-button{width:35px;height:35px;top:36%;background:#ffffff0a}.device-shadow{top:69%;height:15px;filter:blur(16px)}.device-tabs{gap:18px;width:100%;justify-content:space-between}.device-tabs button{font-size:7px;letter-spacing:.04em}.device-label h3{max-width:280px;font-size:23px}.navigation.showroom-light .menu-toggle[aria-expanded=true] .menu-lines:after{border-color:#1c1c1e}}
@media(prefers-reduced-motion:reduce){.showroom-atmosphere,.device-picture{will-change:auto}.device-indicator{transition:none}}
.showroom[data-device="laptop"] .device-picture img{transform:scale(1.18)}
@media(max-width:600px){.showroom .device-picture img{transform:scale(1.12)}.showroom[data-device="laptop"] .device-picture img{transform:scale(1.23)}.showroom .round-button{backdrop-filter:none;-webkit-backdrop-filter:none}}
