.connection-heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:35px}.connection-heading>p{font-size:14px;color:#737764}.record-switch{display:flex;gap:10px;margin-bottom:25px}.record-switch button{border:1px solid #b5b59d80;background:transparent;padding:15px 23px;font:inherit;font-size:13px;color:#7d806a;cursor:pointer;min-height:52px}.record-switch button span{font-size:10px;margin-left:12px}.record-switch [aria-pressed=true]{background:#3c4935;color:#fff7e8;border-color:#3c4935}.network-scene{position:relative;direction:ltr;isolation:isolate;width:100%;aspect-ratio:1000/520;min-height:440px;overflow:hidden;border-bottom:1px solid #b6b49b50;background:radial-gradient(ellipse at 25% 80%,#d8bd9429,transparent 55%)}.scene-label{position:absolute;top:16px;left:20px;direction:rtl;font-size:10px;color:#7b7d66;z-index:2;letter-spacing:.5px}.network-trailer{position:absolute;inset:0 auto 0 0;width:46%;height:100%}.network-trailer>img{width:100%;height:100%;object-fit:cover;object-position:right center;mask-image:linear-gradient(to right,#000 75%,transparent),linear-gradient(to bottom,transparent,#000 12%,#000 88%,transparent);mask-composite:intersect;mix-blend-mode:multiply}.recorder-inset{position:absolute;left:51%;top:73%;width:35%;padding:10px 10px 8px;border:1px solid #c6c5ac;background:#fff7e6;box-shadow:0 8px 22px #66553516;direction:rtl;transition:opacity .3s,transform .3s;z-index:3}.recorder-inset:before{content:'';position:absolute;inset:-6px;border:1px dashed #7c8c5f88;pointer-events:none}.recorder-inset strong{display:block;font-size:11px;font-weight:500}.recorder-inset small{font-size:9px;color:#7e806b}.recorder-led{position:absolute;left:9px;top:11px;width:5px;height:5px;background:#6c873e;border-radius:50%;box-shadow:0 0 9px #7f944c80}.recorder-slots{display:flex;gap:3px;margin-bottom:7px;width:60%}.recorder-slots i{height:3px;background:#8b9178;flex:1}.camera-tag{position:absolute;top:15%;left:56%;direction:rtl;font-size:10px;background:#f7eddde6;padding:5px 8px}.camera-tag span{color:#6b8250;margin-right:8px}.network-routes{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}.route{fill:none;stroke:#6f8553;stroke-width:1.8;stroke-dasharray:5 7;vector-effect:non-scaling-stroke;animation:data-stream 2s linear infinite}.local-route{stroke-width:2.5}.remote-route,.server-screen-route{opacity:.12;animation:none}.cellular-route,.screen-route{opacity:.65}.network-node{position:absolute;width:19%;text-align:center;direction:rtl;z-index:2}.network-node strong{display:block;font-size:15px;font-weight:500;margin-top:13px}.network-node small{display:block;font-size:10px;color:#7b816a;line-height:1.7;margin-top:6px}.cellular-node{left:49%;top:26%}.server-node{left:76%;top:23%;opacity:.25;transition:opacity .4s}.screen-node{left:75%;top:66%}.cellular-symbol{height:62px;display:flex;align-items:end;justify-content:center;gap:6px;direction:ltr}.cellular-symbol i{display:block;width:9px;background:#7b8a61;border-radius:2px}.cellular-symbol i:nth-child(1){height:14px}.cellular-symbol i:nth-child(2){height:28px}.cellular-symbol i:nth-child(3){height:44px}.cellular-symbol i:nth-child(4){height:60px}.server-hardware{width:76px;margin:auto;display:grid;gap:5px}.server-hardware i{height:20px;border:1px solid #727d5e;background:#f4ecd9;position:relative}.server-hardware i:before{content:'';position:absolute;left:8px;top:7px;width:4px;height:4px;border-radius:50%;background:#7a8f50}.server-hardware b{display:block;position:absolute;right:8px;top:8px;width:30px;height:2px;background:#9fa68a}.monitor-visual{width:105px;height:64px;background:#eff0dc;border:2px solid #6a7557;padding:5px;margin:auto;position:relative}.monitor-visual:after{content:'';position:absolute;bottom:-12px;left:42%;width:17%;height:10px;border-bottom:2px solid #6a7557;background:#9ba187}.monitor-feed{display:grid;grid-template-columns:1fr 1fr;gap:3px;height:100%}.monitor-feed span{background:linear-gradient(145deg,#b9c09f 50%,#899578 51%)}.monitor-feed span:nth-child(2),.monitor-feed span:nth-child(3){background:linear-gradient(35deg,#c6c6aa 50%,#a3ac8d 51%)}.screen-node strong{margin-top:24px}.network-status{position:absolute;bottom:12px;left:20px;display:flex;align-items:center;gap:8px;direction:rtl}.network-status>span{width:5px;height:5px;background:#6f8553;border-radius:50%}.network-status p{font-size:9px;color:#7b806a;margin:0}.network-scene[data-mode=server] .server-node{opacity:1}.network-scene[data-mode=server] .recorder-inset{opacity:.18;transform:scale(.95)}.network-scene[data-mode=server] .local-route,.network-scene[data-mode=server] .screen-route{opacity:.1;animation:none}.network-scene[data-mode=server] .remote-route,.network-scene[data-mode=server] .server-screen-route,.network-scene[data-mode=server] .cellular-route{opacity:1;animation:data-stream 2s linear infinite}.route-explanation{display:flex;gap:26px;max-width:850px;margin:35px auto 0}.route-explanation>span{font-size:13px;color:#7f886e;padding-top:10px}.route-explanation h3{font-size:25px;font-weight:450;margin:0 0 12px}.route-explanation p{font-size:15px;color:#6f7764;margin:0;line-height:1.9}.network-note{font-size:10px;color:#868775;max-width:850px;margin:25px auto 0}@keyframes data-stream{to{stroke-dashoffset:-48}}@media(max-width:600px){.connection-heading{display:block;margin-bottom:25px}.connection-heading>p{font-size:12px;margin-top:20px}.record-switch{gap:8px}.record-switch button{flex:1;padding:12px 9px;font-size:11px;line-height:1.6}.record-switch button span{display:block;margin:0 0 4px}.network-scene{aspect-ratio:1;min-height:390px}.network-trailer{width:56%;height:75%;top:10%}.network-routes{display:none}.scene-label{font-size:9px;left:8px}.camera-tag{left:44%;top:15%;font-size:8px}.recorder-inset{left:34%;top:74%;width:55%;padding:8px}.recorder-inset strong{font-size:9px}.recorder-inset small{font-size:8px}.network-node{width:32%;}.cellular-node{left:64%;top:10%}.server-node{left:64%;top:39%}.screen-node{left:64%;top:72%}.cellular-symbol{height:35px;gap:4px}.cellular-symbol i{width:6px}.cellular-symbol i:nth-child(1){height:9px}.cellular-symbol i:nth-child(2){height:16px}.cellular-symbol i:nth-child(3){height:25px}.cellular-symbol i:nth-child(4){height:35px}.network-node strong{font-size:11px;margin-top:8px}.network-node small{font-size:8px;margin-top:3px}.server-hardware{width:55px;gap:3px}.server-hardware i{height:14px}.server-hardware i:before{top:4px;left:5px;width:3px;height:3px}.server-hardware b{top:5px;right:5px;width:22px}.monitor-visual{width:67px;height:40px;padding:3px}.monitor-visual:after{height:7px;bottom:-9px}.screen-node strong{margin-top:17px}.network-status{bottom:6px;left:5px;max-width:58%;gap:5px}.network-status p{font-size:8px}.cellular-node:before{content:'';position:absolute;right:100%;top:25px;width:35px;border-top:1px dashed #6f8553;opacity:.6}.screen-node:before{content:'';position:absolute;right:50%;bottom:calc(100% + 10px);height:24px;border-right:1px dashed #6f8553}.server-node:before{content:'';position:absolute;right:50%;bottom:calc(100% + 10px);height:23px;border-right:1px dashed #6f8553;opacity:.3}.network-scene[data-mode=server] .server-node:before{opacity:1}.route-explanation{gap:15px;margin-top:25px}.route-explanation h3{font-size:23px}.route-explanation p{font-size:14px}.network-note{font-size:9px}}@media(prefers-reduced-motion:reduce){.route,.network-scene[data-mode=server] .route{animation:none}.recorder-inset,.server-node{transition:none}}
@media(max-width:600px){.network-trailer>img{object-position:84% center}}