.demo-body{background:radial-gradient(ellipse at 18% 5%,#27525355,transparent 45%),var(--demo-bg)}.demo-topbar{background:#061e251f}.demo-topbar .brand img{border-radius:50%;box-shadow:0 0 20px #d9f3be18}.experience-heading{margin-bottom:32px}.experience-heading h1{font-size:54px;letter-spacing:-2.5px}.experience-heading h1 span{font-family:Georgia,serif;font-style:italic;font-weight:400}.workbench{grid-template-columns:minmax(0,1fr) 310px;gap:24px}.visual-panel{min-height:520px;border-color:#d1ece32e;box-shadow:0 20px 60px #00121a40}.visual-panel>.scene-svg{height:520px;position:relative;z-index:1;transition:opacity .7s,filter .8s,transform .8s}.visual-panel[data-view=immersion]>.scene-svg{opacity:0;pointer-events:none}.demo-photograph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(var(--photo-light,.8));transform:scale(1.035);transition:filter 1s,opacity .7s,transform 1.2s}.photo-treatment{position:absolute;inset:0;background:linear-gradient(180deg,#071d2950,transparent 40%,#071d29c7);transition:background 1s}.visual-panel[data-view=plan] .demo-photograph{opacity:.08;transform:scale(1)}.visual-panel[data-view=plan] .photo-treatment{background:#0b283277}.visual-panel[data-view=plan] .immersive-title,.visual-panel[data-view=plan] .ambient-orb{opacity:0;pointer-events:none}.immersive-title{position:absolute;top:45%;left:7%;z-index:2;pointer-events:none;transition:opacity .5s}.immersive-title>small{font-size:7px;letter-spacing:.18em;color:#e2ecdf;text-shadow:0 2px 8px #000}.immersive-title>strong{display:block;font-family:Georgia,serif;font-style:italic;font-weight:400;font-size:72px;letter-spacing:-3px;line-height:1.1;color:#fff;text-shadow:0 2px 20px #0005;margin-top:11px}.immersive-title strong span{display:block;font-family:Manrope,sans-serif;font-style:normal;letter-spacing:.12em;font-size:8px;margin-top:16px;color:#d9e9da}.visual-view-toggle{position:absolute;right:22px;top:20px;z-index:6;display:flex;padding:4px;gap:4px;border:1px solid #ffffff40;background:#0a242b80;backdrop-filter:blur(14px);border-radius:30px}.visual-view-toggle button{border:0;background:none;color:#dae8de;padding:8px 12px;border-radius:30px;font-size:9px}.visual-view-toggle button[aria-pressed=true]{background:#e0edbf;color:#1d3932}.panel-top{right:auto;max-width:45%;top:32px;line-height:1.5;color:#e3ede0;font-size:8px;text-shadow:0 2px 8px #001}.panel-top .map-time{display:none}.scene-indicator{background:#0b242887;backdrop-filter:blur(14px);border-color:#cde9ce55;padding:12px 16px;border-radius:30px}.map-badge{background:#0b242870;backdrop-filter:blur(14px);color:#e0e9d7;border-color:#ffffff30}.ambient-orb{position:absolute;right:12%;top:43%;width:90px;aspect-ratio:1;border-radius:50%;z-index:2;background:radial-gradient(circle at 30% 25%,#e8fbc5dc,#94cbb178 32%,#4a9f8e32 65%,#122b3b80);border:1px solid #dcf3d275;box-shadow:inset -10px -12px 25px #00152370,0 0 45px #e5ffb333;backdrop-filter:blur(5px);animation:orbFloat 7s ease-in-out infinite}.ambient-orb:after{content:'';position:absolute;inset:-18px;border:1px solid #e0f3d22b;border-radius:50%;transform:rotateX(65deg) rotate(-20deg)}.control-panel{background:linear-gradient(140deg,#d4ebd60e,transparent 70%),var(--panel);border-color:#d6efda2e;box-shadow:0 20px 50px #00131b35;border-radius:20px}.preset-options button{transition:background .3s,transform .3s,box-shadow .3s}.preset-options button:hover{transform:translateY(-2px);box-shadow:0 8px 20px #00131b25}.preset-options button[aria-pressed=true]{box-shadow:0 7px 25px #d9f5aa12}.telemetry>div{background:linear-gradient(135deg,#ddeed10d,transparent);border-color:#e7ffd321;border-radius:13px}.telemetry strong{font-size:32px}.meter-track span{box-shadow:0 0 8px var(--accent)}.zone-bar button{border-radius:100px;transition:.3s}.zone-bar button[aria-pressed=true]{background:var(--accent);color:var(--demo-bg);border-color:var(--accent)}.event-panel,.insight-panel{background:#aee5bd04;border-color:#d5eecd25}.visual-panel[data-scene-mode=nuit] .photo-treatment{background:linear-gradient(0deg,#061d44a8,#102b5066)}.visual-panel[data-scene-mode=sunset] .demo-photograph{filter:brightness(var(--photo-light)) sepia(.2)}.visual-panel[data-scene-mode=show] .photo-treatment{background:linear-gradient(130deg,#723cbf55,transparent 50%,#44a2fb44);animation:stageGlow 5s ease-in-out infinite alternate}.visual-panel.has-incident .ambient-orb{background:radial-gradient(circle at 30% 25%,#fff4be,#efab55a8 40%,#66312470);box-shadow:0 0 50px #ffa94570;animation:orbFloat 2s infinite alternate}.scene-tv .visual-panel[data-view=immersion] .tv-channel{z-index:4;top:auto;bottom:95px;left:7%;right:auto;min-width:180px;padding:18px 25px;text-align:left;background:#211b38aa}.scene-tv .immersive-title{top:24%}.scene-tv .ambient-orb{top:39%}.scene-security .demo-photograph,.scene-building .demo-photograph{object-position:center 40%}.blinds-down .demo-photograph{filter:brightness(.35)}
@keyframes orbFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-15px)}}@keyframes stageGlow{to{opacity:.45}}
@media(max-width:1100px){.workbench{grid-template-columns:minmax(0,1fr) 280px}.experience-heading h1{font-size:45px}.immersive-title>strong{font-size:58px}.ambient-orb{width:65px;right:12%}.visual-view-toggle{right:15px;top:18px}.visual-view-toggle button{font-size:8px;padding:8px 10px}.panel-top{font-size:7px;left:17px}.visual-panel,.visual-panel>.scene-svg{min-height:480px;height:480px}.map-badge{font-size:6px}.telemetry strong{font-size:25px}}
@media(max-width:740px){.workbench{grid-template-columns:1fr}.experience-heading h1{font-size:37px}.visual-panel,.visual-panel>.scene-svg{min-height:385px;height:385px}.immersive-title>strong{font-size:57px}.immersive-title{top:43%}.immersive-title>small{font-size:6px}.ambient-orb{width:65px;right:12%;top:47%}.visual-view-toggle{right:12px;top:15px}.panel-top{left:15px;top:27px;font-size:6px;max-width:42%}.scene-indicator{font-size:8px;padding:10px 12px;left:14px;bottom:15px}.map-badge{font-size:6px;right:13px;bottom:17px;padding:9px 7px}.telemetry strong{font-size:25px}.zone-bar button{flex-basis:40%}.scene-tv .immersive-title{top:25%}.scene-tv .visual-panel[data-view=immersion] .tv-channel{bottom:72px;padding:13px 18px;min-width:150px}.control-panel{padding:23px}.visual-view-toggle button{min-height:30px}.telemetry small{font-size:7px}}
@media(max-width:380px){.experience-heading h1{font-size:32px}.immersive-title>strong{font-size:50px}.visual-panel,.visual-panel>.scene-svg{min-height:360px;height:360px}}
@media(prefers-reduced-motion:reduce){.ambient-orb,.visual-panel[data-scene-mode=show] .photo-treatment{animation:none}}