.immersive-environment{position:relative;isolation:isolate;background:#eeeae1;color:#141918}
.immersive-environment-stage{position:sticky;top:0;height:100svh;margin-bottom:-100svh;z-index:1;pointer-events:none}
.immersive-environment-stage .commander-live-canvas{height:100%;transition:opacity .6s ease}
.environment-panel{position:relative;min-height:max(740px,100svh);display:grid;align-items:center;overflow:clip}
.environment-panel>.container{position:relative;z-index:3;padding-block:90px}
.environment-paper{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;z-index:0;pointer-events:none}
.environment-fog-layout{display:grid;grid-template-columns:minmax(0,.42fr) minmax(0,.58fr);align-items:center;gap:15px}
.environment-copy h2{font:clamp(50px,6.8vw,104px)/1.02 var(--display);letter-spacing:-.025em;text-transform:uppercase;margin:0 0 25px}
.environment-copy h2 .title-line{display:block}
.environment-copy h2 .title-line:last-child{color:var(--red)}
.environment-copy p{font-size:clamp(21px,1.9vw,28px);line-height:1.35;max-width:26ch;margin:0 0 28px}
.environment-copy .button{font-size:clamp(17px,1.6vw,23px);min-height:48px;padding:15px 22px}
.environment-copy .button .icon{filter:invert(1)}
.environment-fallback .screenshot{width:100%;border-radius:0;box-shadow:0 20px 65px #0004}
.immersive-environment.has-live-commanders .environment-fallback{visibility:hidden;pointer-events:none}
.immersive-environment.has-live-commanders .environment-fallback button{display:none}
.immersive-environment.has-live-commanders .environment-paper{z-index:2;mask-image:linear-gradient(90deg,#000 24%,transparent 53%)}
.environment-mechanics{color:#fff;background:transparent!important;--environment-seam:clamp(28px,4vw,64px)}
.environment-mechanics::before{content:"";position:absolute;inset:0;z-index:0;background:#141b20;clip-path:polygon(0 0,100% var(--environment-seam),100% 100%,0 100%)}
.immersive-environment.has-live-commanders .environment-mechanics::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:#141b20;mask-image:linear-gradient(90deg,transparent 39%,#000 57%);clip-path:polygon(0 0,100% var(--environment-seam),100% 100%,0 100%)}
.environment-mechanics-layout{display:grid;grid-template-columns:53% 47%;align-items:center;gap:0}
.environment-mechanics-copy{min-width:0;position:relative;padding-left:15px}
.environment-feature-list{list-style:none;padding:0;margin:0;display:grid;gap:24px}
.environment-feature{display:grid;grid-template-columns:35% 1fr;align-items:center;gap:20px;width:100%;padding:8px 0;border:0;background:none;color:inherit;text-align:left}
.environment-feature:disabled{opacity:1;cursor:default}
.environment-feature-thumb{width:100%;height:auto;object-fit:contain;box-shadow:0 10px 30px #0003;outline:2px solid #ffffff16;outline-offset:3px;transition:outline-color .25s ease}
.environment-feature[aria-pressed=true] .environment-feature-thumb,.environment-feature:hover .environment-feature-thumb{outline-color:var(--red)}
.environment-feature-title{display:block;font:clamp(25px,2.8vw,44px)/1.06 var(--display);text-transform:uppercase;letter-spacing:-.015em;margin-bottom:12px}
.environment-feature-title>span{color:var(--red)}
.environment-feature-description{display:block;font-size:clamp(17px,1.5vw,23px);line-height:1.35;max-width:28ch}
@media(max-width:1100px) and (min-width:761px){
 .environment-fog-layout{grid-template-columns:minmax(0,.42fr) minmax(0,.58fr)}
 .environment-copy h2{font-size:clamp(48px,6.4vw,74px)}
 .environment-feature{grid-template-columns:30% 1fr;gap:15px}
 .environment-feature-title{font-size:28px}
 .environment-feature-description{font-size:18px}
}
@media(max-width:760px){
 .environment-panel{min-height:100svh;align-items:start}
 .environment-panel>.container{padding-block:55px 30px}
 .environment-fog-layout,.environment-mechanics-layout{grid-template-columns:1fr;gap:30px}
 .environment-copy{max-width:100%}
 .environment-copy h2{font-size:clamp(39px,10.4vw,67px);margin-bottom:18px;max-width:19ch}
 .environment-copy p{font-size:19px;max-width:29ch;margin-bottom:20px}
 .environment-copy .button{font-size:16px;padding:12px 18px}
 .environment-fallback{padding-block:12px}
 .immersive-environment.has-live-commanders .environment-paper{mask-image:linear-gradient(#000 42%,transparent 65%)}
 .immersive-environment.has-live-commanders .environment-fallback{height:280px}
 .environment-mechanics-layout>.environment-fallback{order:2}
 .environment-mechanics-copy{padding:10px 0 0}
 .environment-feature-list{gap:17px}
 .environment-feature{grid-template-columns:31% 1fr;gap:17px;padding:6px 0}
 .environment-feature-title{font-size:clamp(23px,6.1vw,35px);margin-bottom:8px}
 .environment-feature-description{font-size:16px;line-height:1.3}
 .immersive-environment.has-live-commanders .environment-mechanics::after{mask-image:linear-gradient(#000 43%,transparent 68%)}
}
@media(prefers-reduced-motion:reduce){
 .immersive-environment-stage{display:none}
 .environment-feature-thumb{transition:none}
 .immersive-environment.has-live-commanders .environment-fallback{visibility:visible;pointer-events:auto}
 .immersive-environment.has-live-commanders .environment-fallback button{display:block}
}