.sf-demo{--sf-navy:#071321;--sf-panel:#101f2e;--sf-cyan:#24d9ef;--sf-yellow:#f4e900;color:#f6f8f9;background:var(--sf-navy);border:1px solid #294454;border-radius:18px;overflow:hidden;font-family:Inter,Arial,sans-serif;box-shadow:0 24px 70px #0004;text-align:left}.sf-demo *{box-sizing:border-box}.sf-demo-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 22px;background:#102230;border-bottom:1px solid #294454;font-size:12px;letter-spacing:.08em}.sf-demo-top strong{display:flex;align-items:center;gap:9px}.sf-demo-dot{width:7px;height:7px;border-radius:50%;background:var(--sf-cyan);box-shadow:0 0 14px #24d9ef99}.sf-demo-tag{color:var(--sf-cyan);font-size:10px;font-weight:700;border:1px solid #24d9ef44;border-radius:30px;padding:6px 10px}.sf-demo-grid{display:grid;grid-template-columns:minmax(0,1fr) 260px;align-items:stretch}.sf-demo-map{position:relative;aspect-ratio:1330/990;overflow:hidden;background:#07101a;isolation:isolate}.sf-demo-map>img,.sf-demo-map>svg{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;max-width:none}.sf-demo-map>img{filter:brightness(1.08)}.sf-demo-map>svg{z-index:2;pointer-events:none}.sf-fence-line{stroke:#50ee9c;stroke-width:5;fill:none;opacity:.75}.sf-fence-pulse{stroke:#f4e900;stroke-width:9;fill:none;stroke-linecap:round;stroke-dasharray:72 2050;filter:drop-shadow(0 0 7px #f4e900)}.sf-camera-ring{fill:none;stroke:#24d9ef;stroke-width:4;filter:drop-shadow(0 0 9px #24d9ef)}.sf-map-label{position:absolute;left:6%;top:5%;z-index:3;display:grid;gap:6px;background:#05121be6;border:1px solid #ffffff26;border-left:3px solid var(--sf-yellow);border-radius:6px;padding:12px 15px;box-shadow:0 12px 30px #0006;font-size:11px;max-width:80%}.sf-map-label strong{font-size:13px;color:var(--sf-yellow)}.sf-map-label span{color:#cfdae1}.sf-demo-side{padding:24px 21px;background:linear-gradient(160deg,#152a38,#081725);border-left:1px solid #294454;display:flex;flex-direction:column;gap:18px;min-width:0}.sf-side-title{display:flex;justify-content:space-between;align-items:center;font-size:10px;letter-spacing:.12em;color:#9ab3c3}.sf-side-title span{color:#50ee9c}.sf-demo-side h3{font-family:inherit;color:white;font-size:25px;line-height:1.05;letter-spacing:-.04em;margin:0}.sf-demo-side .sf-side-sub{margin:0;color:#a5b9c5;font-size:12px;line-height:1.5}.sf-voltage{border:1px solid #f4e90044;border-radius:10px;background:#f4e90008;padding:16px}.sf-voltage small{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:#d4d9b4}.sf-voltage-number{display:flex;align-items:baseline;gap:7px;color:var(--sf-yellow);font-weight:700;margin-top:4px}.sf-voltage-number b{font-size:47px;letter-spacing:-.07em;line-height:1}.sf-voltage-number span{font-size:16px}.sf-wave{display:block;width:100%;height:30px;margin-top:14px;overflow:visible}.sf-wave path{fill:none;stroke:#f4e900;stroke-width:2;vector-effect:non-scaling-stroke}.sf-demo-data{display:grid;gap:0;margin:0}.sf-demo-data>div{display:flex;justify-content:space-between;gap:10px;padding:11px 0;border-bottom:1px solid #ffffff12;font-size:11px}.sf-demo-data dt{color:#9ab3c3}.sf-demo-data dd{margin:0;font-weight:700}.sf-demo-data .sf-armed{color:#50ee9c}.sf-camera-open,.sf-play{font-family:inherit;cursor:pointer;min-height:44px;display:flex;align-items:center;justify-content:center;gap:8px;font-size:12px;font-weight:700;border:1px solid #24d9ef55;border-radius:6px;background:#24d9ef0d;color:#24d9ef;padding:10px 12px;text-decoration:none}.sf-camera-open:hover{background:#24d9ef22}.sf-camera-open:focus-visible,.sf-play:focus-visible,.sf-camera-close:focus-visible,.sf-video-link:focus-visible{outline:3px solid #f4e900;outline-offset:3px}.sf-demo-side-note{color:#9ab3c3;font-size:10px;line-height:1.5;margin:0;margin-top:auto}.sf-demo-controls{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding:14px 20px;border-top:1px solid #294454;background:#0d1c29}.sf-play{min-height:36px;padding:7px 12px;color:#f4e900;border-color:#f4e90055;background:#f4e90008;min-width:108px}.sf-demo-progress{flex:1;height:3px;background:#ffffff16;border-radius:10px;overflow:hidden;min-width:40px}.sf-demo-progress span{display:block;height:100%;background:#24d9ef;width:0}.sf-demo-caption{font-size:10px;color:#9ab3c3}.sf-video-link{font-size:11px;color:#cfdae1;text-decoration:underline;text-underline-offset:4px}.sf-camera-window{position:absolute;z-index:5;right:3.5%;top:11%;width:54%;max-width:500px;border:1px solid #24d9ef77;border-radius:10px;background:#071321;overflow:hidden;box-shadow:0 25px 70px #0009;transform-origin:80% 90%;transition:opacity .35s,transform .35s;opacity:0;transform:scale(.85) translateY(12px);visibility:hidden}.sf-camera-window.is-open{visibility:visible;opacity:1;transform:scale(1) translateY(0)}.sf-camera-head{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;font-size:10px;font-weight:700;background:#132c3a}.sf-camera-close{cursor:pointer;background:transparent;border:0;color:white;font:inherit;width:28px;height:28px;font-size:20px}.sf-camera-image{position:relative;aspect-ratio:16/10;overflow:hidden}.sf-camera-image img{display:block;width:100%;height:100%;object-fit:cover;filter:contrast(1.05) brightness(.9)}.sf-camera-image::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0px,transparent 3px,#0001 4px);pointer-events:none}.sf-camera-meta{position:absolute;top:10px;left:10px;font:10px monospace;color:white;background:#071321bb;padding:5px 7px;border-radius:3px}.sf-camera-target{position:absolute;left:42%;top:35%;width:31%;height:43%;border:1px solid #24d9ef;box-shadow:0 0 0 1px #07132155}.sf-camera-footer{padding:11px 12px;color:#9ab3c3;font-size:10px;line-height:1.5}.sf-demo-compact .sf-demo-grid{grid-template-columns:minmax(0,1fr) 175px}.sf-demo-compact .sf-demo-top{padding:12px 14px;font-size:10px}.sf-demo-compact .sf-demo-side{padding:16px 13px;gap:12px}.sf-demo-compact .sf-demo-side h3{font-size:20px}.sf-demo-compact .sf-voltage{padding:10px}.sf-demo-compact .sf-voltage-number b{font-size:36px}.sf-demo-compact .sf-demo-data>div{font-size:10px;padding:8px 0}.sf-demo-compact .sf-map-label{padding:8px;top:4%;left:4%}.sf-demo-compact .sf-map-label strong{font-size:10px}.sf-demo-compact .sf-map-label span{font-size:9px}.sf-demo-compact .sf-demo-caption,.sf-demo-compact .sf-demo-side-note,.sf-demo-compact .sf-side-sub,.sf-demo-compact .sf-wave{display:none}.sf-demo-compact .sf-demo-controls{padding:10px 12px;gap:10px}.sf-demo-compact .sf-demo-map{aspect-ratio:auto;min-height:320px}.sf-demo-compact .sf-demo-map>img,.sf-demo-compact .sf-demo-map>svg{object-fit:fill}.sf-demo-compact .sf-demo-map>svg{width:100%;height:100%}
@media(max-width:760px){.sf-demo-grid{grid-template-columns:1fr}.sf-demo-side{border-left:0;border-top:1px solid #294454;display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:20px}.sf-side-title,.sf-demo-side-note{grid-column:1/-1}.sf-voltage{grid-column:2;grid-row:2/4}.sf-demo-data{grid-column:1/-1;grid-template-columns:1fr 1fr;gap:0 20px}.sf-camera-open{grid-column:1/-1}.sf-demo-side h3{align-self:end}.sf-demo-top{padding:14px 12px;font-size:10px}.sf-demo-tag{font-size:8px;padding:5px 6px;letter-spacing:0}.sf-demo-caption{width:100%;order:5}.sf-camera-window{width:73%;right:3%;top:15%}.sf-map-label{font-size:9px;padding:8px}.sf-map-label strong{font-size:10px}.sf-demo-controls{gap:12px;padding:14px}.sf-demo-compact .sf-demo-grid{grid-template-columns:1fr}.sf-demo-compact .sf-demo-map{aspect-ratio:1330/990;min-height:0}.sf-demo-compact .sf-demo-side{display:grid}.sf-demo-compact .sf-demo-side-note{display:block}}
.sf-demo-compact .sf-demo-map{aspect-ratio:1330/990;min-height:0;align-self:center}.sf-demo-compact .sf-demo-map>img{object-fit:contain}
@media(max-width:760px){.sf-camera-window{width:68%;top:3%}}
@media(prefers-reduced-motion:reduce){.sf-camera-window{transition:none}}