/* Progressive enhancement: a readable diagram remains when WebGL is unavailable. */
.brand-site .scene-card{height:590px;max-height:none;display:flex;flex-direction:column;overflow:hidden;background:radial-gradient(ellipse at 35% 25%,#214b6f66,transparent 65%),linear-gradient(145deg,#132d44,#091726);border:1px solid #8dbfe03b;border-radius:22px;box-shadow:0 26px 80px #020c2340,inset 0 1px 0 #ffffff12;color:#eef7ff}
.security-scene-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:19px 22px 0;position:relative;z-index:2;pointer-events:none}
.security-scene-head .art-note{position:static!important;inset:auto!important;pointer-events:none}
.security-scene-head .art-note>span{font:600 10px/1.5 var(--sans,"Segoe UI",sans-serif);letter-spacing:1.3px;color:#a9c7de}
.security-scene-head .art-note p{margin:6px 0 0;font:500 23px/1.15 var(--sans,"Segoe UI",sans-serif);letter-spacing:-.6px;color:#f5faff}
.security-demo-badge{display:inline-flex;align-items:center;gap:6px;border:1px solid #72d8cb4a;background:#123d3a82;color:#a8f3e7;border-radius:7px;padding:6px 8px;font:600 9px/1.4 var(--sans,"Segoe UI",sans-serif);letter-spacing:.8px;white-space:nowrap}
.security-demo-badge i{width:5px;height:5px;border-radius:50%;background:#70ead0;box-shadow:0 0 8px #70ead040}
.security-scene-stage{position:relative;flex:1;min-height:325px;overflow:hidden;isolation:isolate}
.security-scene-stage:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#112a3c00 70%,#09172666);pointer-events:none;z-index:1}
.security-scene-canvas,.security-scene-fallback{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:contain}
.security-scene-canvas{opacity:0;transition:opacity .4s;z-index:0;touch-action:pan-y}
.scene-card[data-renderer=ready] .security-scene-canvas{opacity:1}
.scene-card[data-renderer=ready] .security-scene-fallback{opacity:0;visibility:hidden}
.security-scene-fallback{transition:opacity .4s;pointer-events:none}
.security-leaders{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;opacity:0;transition:opacity .4s}
.scene-card[data-renderer=ready] .security-leaders{opacity:1}
.security-leaders line{stroke:#a5d8ee;stroke-opacity:.55;stroke-width:1;vector-effect:non-scaling-stroke}
.security-leaders circle{fill:#93eadf;stroke:#163b50;stroke-width:2;vector-effect:non-scaling-stroke}
.security-equipment{position:absolute;inset:0;z-index:3;pointer-events:none}
.security-equipment-label{position:absolute;display:flex;align-items:center;gap:7px;max-width:151px;min-height:33px;padding:6px 9px;background:linear-gradient(135deg,#203f54ed,#0f2638ed);border:1px solid #9ed8ec42;border-radius:8px;box-shadow:0 6px 16px #06101e33;color:#ecf8ff;font:500 12px/1.25 var(--sans,"Segoe UI",sans-serif);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:border-color .4s,color .4s,box-shadow .4s}
.security-equipment-label svg{width:17px;height:17px;flex:none;stroke:#8bded7;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round}
.security-equipment-label[data-active=true]{border-color:#ffae70c4;box-shadow:0 0 19px #ff914530;color:#ffe9d9}
.security-equipment-label[data-active=true] svg{stroke:#ffb87e}
.security-label-camera{left:14px;top:13%}.security-label-motion{left:14px;top:40%}.security-label-smoke{right:14px;top:9%}.security-label-access{right:14px;top:44%}.security-label-alarm{right:14px;top:75%}
.security-cctv{position:absolute;left:15px;bottom:14px;z-index:4;width:137px;aspect-ratio:1.55;border:1px solid #8dd9e67a;border-radius:7px;background:#0b1d2a;overflow:hidden;pointer-events:none;box-shadow:0 8px 24px #020d1f55;transition:width .6s,border-color .6s;visibility:hidden}
.scene-card[data-renderer=ready] .security-cctv{visibility:visible;background:transparent}
.scene-card[data-scenario=cctv] .security-cctv{width:43%;border-color:#78e8d3}
.security-cctv:before{content:"";position:absolute;inset:20px 0 0;background:repeating-linear-gradient(0deg,#afdfdd03 0 1px,transparent 1px 4px);z-index:1}
.security-cctv-head{height:20px;display:flex;align-items:center;justify-content:space-between;padding:0 6px;background:#081925db;color:#c6ecf0;font:600 8px/1 var(--sans,"Segoe UI",sans-serif);letter-spacing:.5px}
.security-cctv-head span:last-child{color:#70e6c9;font-size:7px}
.security-cctv-corners{position:absolute;inset:28px 9px 9px;border:1px solid #95e8d830;pointer-events:none}
.security-scene-footer{position:relative;z-index:5;padding:0 20px 17px;background:linear-gradient(0deg,#091726,transparent);min-height:138px}
.security-scene-status{margin:0 0 11px;padding:10px 12px;border-left:2px solid #69d7c6;border-radius:0 8px 8px 0;background:#71c7e007;min-height:64px}
.security-scene-status strong{display:block;font:600 14px/1.35 var(--sans,"Segoe UI",sans-serif);color:#edfbff;margin-bottom:4px}
.security-scene-status p{font:400 12px/1.5 var(--sans,"Segoe UI",sans-serif);color:#b6cddb;margin:0;max-width:none}
.scene-card[data-scenario=intrusion] .security-scene-status,.scene-card[data-scenario=fire] .security-scene-status{border-left-color:#ffa86c}
.security-scenarios{display:grid;grid-template-columns:1fr 1fr 1fr;gap:7px}
.security-scenario{appearance:none;display:flex;align-items:center;justify-content:center;gap:5px;min-width:0;min-height:39px;padding:7px 6px;background:#a8d5e909;border:1px solid #93c6e035;border-radius:9px;color:#cce2f1;font:500 11px/1.3 var(--sans,"Segoe UI",sans-serif);text-align:left;cursor:pointer;transition:border-color .2s,background .2s,color .2s,transform .2s}
.security-scenario svg{width:17px;height:17px;flex:none;stroke:currentColor;stroke-width:1.6;fill:none;stroke-linejoin:round;stroke-linecap:round}
.security-scenario:hover{background:#80c6ea19;border-color:#95d0e589;transform:translateY(-1px)}
.security-scenario[aria-pressed=true]{background:#288b871f;border-color:#68d8ca85;color:#acfff0}
.security-scenario:focus-visible{outline:2px solid #ffb574;outline-offset:3px}
.security-scene-disclaimer{margin:9px 0 0;font:400 10px/1.4 var(--sans,"Segoe UI",sans-serif);color:#8daabd;text-align:center}
.security-static-description{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;clip:rect(0,0,0,0);overflow:hidden}
@media(min-width:1550px){.brand-site .scene-card{height:625px}.security-scene-head .art-note p{font-size:26px}.security-scene-stage{min-height:355px}.security-equipment-label{font-size:12px}.security-scenario{font-size:12px;min-height:42px}}
@media(max-width:1150px) and (min-width:851px){.brand-site .scene-card{height:595px}.security-scene-head{padding:18px 15px 0}.security-scene-head .art-note p{font-size:21px}.security-equipment-label{max-width:127px;gap:5px;padding:6px 7px}.security-label-camera,.security-label-motion{left:9px}.security-label-smoke,.security-label-access,.security-label-alarm{right:9px}.security-scene-footer{padding-inline:13px}.security-scenario{font-size:10px}.security-demo-badge{padding:5px 6px;font-size:8px}.security-cctv{width:118px;left:10px;bottom:12px}}
@media(max-width:850px){.brand-site .scene-card{height:610px;max-height:none;max-width:700px;width:100%;justify-self:center}.security-scene-stage{min-height:350px}}
@media(max-width:600px){.brand-site .scene-card{height:603px;border-radius:18px}.security-scene-head{padding:17px 14px 0}.security-scene-head .art-note p{font-size:21px}.security-scene-head .art-note>span{font-size:9px;letter-spacing:.8px}.security-demo-badge{font-size:8px;padding:5px 6px}.security-scene-stage{min-height:338px}.security-equipment-label{font-size:11px;gap:5px;padding:6px 7px;max-width:123px;min-height:32px}.security-equipment-label svg{width:16px;height:16px}.security-label-camera,.security-label-motion{left:8px}.security-label-smoke,.security-label-access,.security-label-alarm{right:8px}.security-label-camera{top:11%}.security-label-smoke{top:6%}.security-label-motion{top:37%}.security-label-access{top:47%}.security-label-alarm{top:72%}.security-cctv{left:9px;bottom:12px;width:119px}.security-scene-footer{padding:0 12px 14px;min-height:150px}.security-scene-status{padding:9px 10px;min-height:70px}.security-scene-status strong{font-size:13px}.security-scene-status p{font-size:11px;line-height:1.5}.security-scenarios{gap:5px}.security-scenario{font-size:10px;gap:4px;min-height:44px;padding:6px 5px}.security-scenario svg{width:15px;height:15px}.security-scene-disclaimer{font-size:9px;margin-top:8px}}
@media(max-width:360px){.brand-site .scene-card{height:609px}.security-scene-head{padding-inline:12px}.security-scene-head .art-note p{font-size:19px}.security-demo-badge{font-size:7px;letter-spacing:.5px}.security-equipment-label{max-width:109px;padding:6px;font-size:11px}.security-cctv{width:109px}.security-scene-footer{padding-inline:10px}.security-scenario{font-size:10px;display:block;text-align:center}.security-scenario svg{display:none}.security-scene-status{min-height:80px}}
@media(prefers-reduced-motion:reduce){.security-scene-canvas,.security-scene-fallback,.security-equipment-label,.security-cctv,.security-scenario{transition:none}.security-scenario:hover{transform:none}}