/* Реальные изделия: пропорции и маркировка исходных фотографий сохранены. */
:root{color-scheme:light}
.system{background:radial-gradient(ellipse at 20% 60%,#e5edf6,transparent 50%),radial-gradient(ellipse at 75% 80%,#fff3dc,transparent 55%),#fff}
.system .diagram{grid-template-columns:1.35fr .58fr 1fr;gap:6%;padding:30px 4% 32px;align-items:center}
.site-boundary{padding:26px 18px 15px;background:linear-gradient(145deg,#fffffffa,#f1f5fa);border-color:#c4d0df;box-shadow:0 16px 28px -18px #233b6570,inset 0 2px 0 #fff;border-radius:14px}
.site-boundary>.zone-label{font-size:9px;letter-spacing:.07em;left:12px}
.controller-pair{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.controller-product{margin:0;min-width:0;text-align:center}
.controller-photo{position:relative;isolation:isolate;display:flex;align-items:center;justify-content:center;height:156px;background:#fff;border-radius:8px;box-shadow:0 8px 12px -10px #21395570;overflow:hidden}
.controller-photo img{display:block;width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.controller-product figcaption{padding-top:10px;line-height:1.35}
.controller-product figcaption small{display:block;font-size:9px;font-weight:600;color:#71869c;letter-spacing:.1em}
.controller-product figcaption strong{display:block;font-size:13px;font-weight:600;margin-top:3px}
.local-bus{height:42px;position:relative;display:flex;justify-content:center;align-items:center;margin:0 23%}
.local-bus:before{content:"";position:absolute;left:0;right:0;top:0;height:21px;border:solid #a5b9cc;border-width:0 1px 1px;border-radius:0 0 5px 5px}
.local-bus:after{content:"";position:absolute;left:50%;top:21px;height:21px;border-left:1px solid #a5b9cc}
.local-bus span{position:relative;z-index:1;font-size:9px;color:#6c849b;background:#f6f8fb;padding:1px 5px;white-space:nowrap}
.gateway{position:relative;background:linear-gradient(125deg,#fff,#e8eff7);border:1px solid #d3deea;border-radius:10px;padding:8px 14px;gap:18px;box-shadow:0 7px 12px -10px #12244680}
.gateway img{width:88px;height:88px;transform:rotate(-5deg);filter:drop-shadow(6px 10px 5px #12244630)}
.gateway strong{font-size:25px}.gateway small{font-size:8px}.link-state{font-size:10px}
.cloud-node{background:radial-gradient(circle at 33% 20%,#fff 10%,#dfedf7 70%,#a9c4da);box-shadow:inset 0 2px 2px #fff,inset 0 -8px 16px #7293b22b,0 20px 20px -16px #28476f90;border-color:#afc9dc}
.cloud-node .cloud-symbol{text-shadow:0 2px #fff,0 6px 9px #799ab857}.cloud-node strong{font-size:21px}
.engineer-node{background:transparent;padding:8px 0;perspective:900px}
.mini-screen{position:relative;overflow:visible;border-width:6px;transform:rotateY(-9deg) rotateX(3deg);margin-bottom:36px;box-shadow:8px 16px 22px -13px #18344e90}
.mini-screen img{border-radius:3px}
.mini-screen:after{content:"";position:absolute;left:-6%;right:-6%;height:10px;bottom:-16px;background:linear-gradient(#becbda,#e6ecf3 45%,#96a7ba);border-radius:0 0 60% 60%;box-shadow:0 10px 12px -6px #29415f70}
.wire-label{top:56%;background:#f8fbfccc;padding:3px 5px;border-radius:3px}.wire-label-a{left:43%}.wire-label-b{left:68%}
.system[data-stage="2"] .gateway{border-color:#8dbfb4}.system[data-stage="2"] .cloud-node{border-color:#87bcae}
.network-field{grid-template-columns:1.25fr .8fr 1fr;gap:9%;min-height:330px}
.site-list{gap:13px}.site-list button{padding:9px 12px 9px 9px;gap:12px;background:linear-gradient(130deg,#1e3a53,#10263c);box-shadow:0 9px 16px -12px #000c,inset 0 1px #ffffff12;transition:border-color .2s,box-shadow .2s}
.site-list button[aria-pressed=true]{background:linear-gradient(130deg,#354759,#1b3043);box-shadow:0 9px 20px -12px #000c,inset 3px 0 #f5a020}
.site-photo{width:67px;height:69px;flex-shrink:0;background:#f8fafc;border:1px solid #d5e0eb;border-radius:6px;overflow:hidden;display:flex;align-items:center;justify-content:center}
.site-photo img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}.site-photo.gateway-photo img{width:83%;height:83%}
.controller-photo .siemens-cpu,.site-photo .siemens-cpu{object-fit:cover}
.site-list strong{font-size:14px}.site-list small{font-size:10px;line-height:1.4}.site-list i{flex-shrink:0}
.remote{background:linear-gradient(135deg,#25445e,#122840);box-shadow:10px 18px 25px -18px #000b,inset 0 1px #ffffff12}
.asset-note{font-size:11px;color:#687e94;line-height:1.6;margin:9px 3px 6px;max-width:900px}
@media(max-width:1000px) and (min-width:621px){.system .diagram{grid-template-columns:1.3fr .6fr 1fr;gap:4%;padding:30px 3%}.site-boundary{padding:23px 12px 12px}.controller-photo{height:125px}.controller-pair{gap:8px}.gateway{padding:8px;gap:9px}.gateway img{width:65px;height:75px}.gateway small{font-size:7px}.gateway strong{font-size:23px}.cloud-node strong{font-size:18px}.cloud-node small{font-size:9px}.network-field{grid-template-columns:1.3fr .75fr 1fr;gap:7%;padding:24px 3%}.site-list button{gap:8px}.site-photo{width:49px;height:58px}.site-list small{font-size:9px}}
@media(max-width:620px){.system .diagram{grid-template-columns:1fr;gap:38px;padding:26px 28px}.controller-photo{height:135px}.site-boundary{max-width:340px}.gateway{justify-content:center}.cloud-node{width:138px}.network-field{grid-template-columns:1fr;gap:38px;padding:22px 30px}.site-list{width:100%;max-width:340px;justify-self:center}.site-photo{width:65px;height:65px}.wire-label{display:none}.asset-note{font-size:10px}}
@media(prefers-reduced-motion:reduce){.site-list button{transition:none}}