/* The upcoming combined condition uses the same dark event illustration language. */
.combined-demo{margin-top:32px;border:1px solid #304758;border-radius:12px;overflow:hidden;background:#111f2c;color:#e5eef7;text-align:left}
.combined-heading{display:flex;align-items:center;justify-content:space-between;gap:22px;padding:24px 28px;border-bottom:1px solid #2d4355}
.combined-kicker{font-size:.75rem;font-weight:650;letter-spacing:.1em;color:#62cefa}
.combined-heading h3{font-size:1.45rem;letter-spacing:-.035em;line-height:1.35;margin-top:8px;color:#f2f6f9}
.combined-rule{display:flex;align-items:center;gap:10px;white-space:nowrap;font-size:.8125rem;color:#9eb9cc}
.combined-rule b{color:#68d4ff;border:1px solid #32576d;border-radius:5px;padding:5px 7px;font-size:.75rem}
.combined-layout{display:grid;grid-template-columns:minmax(0,1fr) 236px;gap:20px;padding:22px 28px 10px;align-items:center}
.combined-visual{min-width:0}
.combined-scene{position:relative;isolation:isolate;aspect-ratio:48/29;background:#111f2c}
.combined-scene-media{position:absolute;inset:0;overflow:hidden;-webkit-mask-image:linear-gradient(to right,transparent,#000 5%,#000 94%,transparent),linear-gradient(to bottom,transparent,#000 3%,#000 92%,transparent);mask-image:linear-gradient(to right,transparent,#000 5%,#000 94%,transparent),linear-gradient(to bottom,transparent,#000 3%,#000 92%,transparent);-webkit-mask-composite:source-in;mask-composite:intersect}
.combined-scene video{display:block;width:100%;height:100%;object-fit:contain}
.combined-zones{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.combined-fov,.combined-fov-opposite{stroke:#68c6e9;stroke-width:1;stroke-dasharray:5 7;stroke-opacity:.45}
.combined-curtains{color:#51b7ed;fill:currentColor;stroke:currentColor;stroke-width:.8}
.combined-curtain-beam{fill-opacity:.15;stroke-opacity:.2}
.combined-curtain-lower{fill-opacity:.2}
.combined-curtain-floor{fill-opacity:.035;stroke-opacity:.3;stroke-dasharray:3 6}
.combined-person-box{fill:none;stroke:#f4c56b;stroke-width:1.8;opacity:0}
.combined-scene-caption{position:absolute;left:12px;bottom:12px;z-index:1;max-width:calc(100% - 24px);border:1px solid #34536b;border-radius:5px;background:#0b1a28e8;color:#b7ccda;padding:7px 10px;font-size:.8125rem;line-height:1.4}
.combined-dimensions{display:flex;justify-content:center;flex-wrap:wrap;gap:10px 24px;margin-top:12px;font-size:.8125rem;color:#89a5bb}
.combined-dimensions b{margin-left:4px;color:#c1d7e4;font-weight:500}
.combined-conditions{min-width:0}
.combined-condition{border:1px solid #355064;border-radius:8px;background:#142737;padding:16px;transition:border-color .25s,background .25s}
.combined-source{display:block;font-size:.75rem;color:#7aa3be;letter-spacing:.055em;margin-bottom:9px}
.combined-condition strong{display:block;color:#edf6fd;font-size:.9375rem;line-height:1.4;font-weight:600}
.combined-condition-state{display:block;font-size:.875rem;color:#9ab6c9;margin-top:8px;line-height:1.45}
.combined-and{display:block;text-align:center;font-size:.75rem;font-weight:600;letter-spacing:.07em;color:#6bbadf;padding:8px}
.combined-result{margin-top:18px;padding:16px 10px 0;border-top:1px solid #304859;text-align:center;color:#8ba7b9}
.combined-result>.icon{width:24px;height:24px;margin:0 auto 10px;color:#7db6d4}
.combined-result strong{display:block;font-size:.9375rem;line-height:1.4;color:#b7cdda}
.combined-result>span{display:block;font-size:.8125rem;line-height:1.5;margin-top:7px}
.combined-controls{display:flex;align-items:center;gap:18px;padding:18px 28px 20px}
.combined-controls>.button{font-size:.875rem;min-height:44px;padding:12px 18px;flex-shrink:0;color:#fff;background:#008ccb;border-color:#159ad2}
.combined-reset{display:flex;align-items:center;gap:7px;background:transparent;border:0;color:#97b6ca;font:inherit;font-size:.8125rem;white-space:nowrap;padding:10px 0;cursor:pointer}
.combined-reset>.icon{width:14px;height:14px}
.combined-controls>p{font-size:.875rem;color:#9ebacf;line-height:1.5;margin:0 0 0 auto;max-width:460px}
.combined-progress{height:2px;background:#213a4d}
.combined-progress span{display:block;width:100%;height:100%;background:#50caff;transform-origin:left;transform:scaleX(0)}
.combined-demo>.combined-note{padding:12px 28px;margin:0;background:#0e1a26;color:#7fa2ba;font-size:.75rem;line-height:1.5}
.combined-demo[data-event="camera"] #combined-camera-condition,.combined-demo[data-event="alarm"] #combined-camera-condition{border-color:#a78347;background:#292a25}
.combined-demo[data-event="camera"] #combined-camera-state,.combined-demo[data-event="alarm"] #combined-camera-state{color:#f3cb81}
.combined-demo[data-event="camera"] .combined-fov,.combined-demo[data-event="alarm"] .combined-fov{stroke:#f2c273;stroke-opacity:.8;fill:#e6b96e;fill-opacity:.06}
.combined-demo[data-event="alarm"] #combined-pir-condition{border-color:#b0586a;background:#2d202c}
.combined-demo[data-event="alarm"] #combined-pir-state,.combined-demo[data-event="alarm"] .combined-result strong,.combined-demo[data-event="alarm"] .combined-result>.icon{color:#ff8e9b}
.combined-demo[data-event="alarm"] .combined-curtains{color:#fb728b}
.combined-demo[data-event="alarm"] .combined-curtain-beam{fill-opacity:.24}
.combined-demo[data-event="alarm"] .combined-person-box{stroke:#ff7287}
.combined-demo[data-event="alarm"] .combined-scene-caption{border-color:#ad5065;color:#ffc1ca;background:#381c2de8}
.combined-demo[data-event="alarm"] .combined-progress span{background:#ff758b}
.combined-demo button:focus-visible{outline:2px solid #72d6ff;outline-offset:4px}
@media(max-width:1000px){.combined-layout{grid-template-columns:1fr}.combined-conditions{display:grid;grid-template-columns:1fr 32px 1fr;align-items:stretch;gap:0}.combined-and{align-self:center}.combined-result{grid-column:1/-1;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px 14px;margin-top:16px;padding-top:14px}.combined-result>.icon{margin:0}.combined-result>span{margin:0}.combined-controls{flex-wrap:wrap}.combined-controls>p{max-width:none;flex-basis:100%;margin:0}.combined-rule{display:none}}
@media(max-width:600px){.combined-heading{padding:20px 16px}.combined-heading h3{font-size:1.3rem}.combined-layout{padding:14px 10px 8px;gap:14px}.combined-condition{padding:12px 10px}.combined-source{font-size:.7rem;letter-spacing:0}.combined-condition strong,.combined-condition-state{font-size:.8125rem}.combined-controls{padding:14px 16px;gap:12px}.combined-demo>.combined-note{padding:12px 16px}.combined-scene-caption{left:6px;bottom:6px;padding:4px 6px;font-size:.7rem}.combined-dimensions{gap:6px 12px;font-size:.75rem}}
@media(prefers-reduced-motion:reduce){.combined-condition{transition:none}}

.perimeter-tip{margin-top:28px;padding:26px 30px;border:1px solid #c4dfed;border-left:4px solid #0395cd;border-radius:10px;background:#edf6fb;color:#354e61}
.perimeter-tip-label{display:flex;align-items:center;gap:10px;margin-bottom:12px;color:#07618b;font-size:.875rem;font-weight:650;letter-spacing:.08em}
.perimeter-tip-label>.icon{width:21px;height:21px}
.perimeter-tip h3{margin:0 0 12px;color:#13384e;font-size:1.4rem;line-height:1.35}
.perimeter-tip p{font-size:1rem;line-height:1.7}
.perimeter-tip-points{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;padding:0;margin:22px 0 0;list-style:none}
.perimeter-tip-points>li{padding-top:16px;border-top:1px solid #c4dfed;min-width:0}
.perimeter-tip-points strong{display:block;margin-bottom:5px;color:#174863;font-size:1rem;font-weight:650}
.perimeter-tip-points b{font-weight:650;color:#174863}
@media(max-width:700px){.perimeter-tip{padding:22px 20px}.perimeter-tip-points{grid-template-columns:1fr;gap:18px;margin-top:18px}.perimeter-tip h3{font-size:1.25rem}}