@import url('scene.css');
:root{--ink:#122446;--orange:#f5a020;--muted-light:#60758b}
[hidden]{display:none!important}body{background:#edf0f6;color:var(--ink)}.mast{background:#0b1829;color:#c3d1df;min-height:74px;padding:14px max(24px,calc((100vw - 1240px)/2));display:flex;align-items:center;justify-content:space-between;gap:20px}.mast img{width:135px;max-height:46px;object-fit:contain}.mast span{font-size:12px}.mast a:last-child{font-size:14px}main{max-width:1288px;padding:22px 24px 30px;margin:auto}.directions{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:18px}.directions button{display:flex;align-items:center;gap:16px;text-align:left;border:1px solid #cdd5e3;border-radius:10px;background:#f9fbfd;padding:14px 20px;cursor:pointer;color:#405873}.directions b{font-size:14px;color:#718499;font-weight:400}.directions span{font-size:16px;font-weight:600}.directions small{display:block;font-size:12px;font-weight:400;margin-top:2px}.directions button[aria-pressed=true]{background:#122446;border-color:#122446;color:#fff}.directions button[aria-pressed=true] b{color:#ffb63f}.concept{border:1px solid #d5deea;border-radius:16px;overflow:hidden;min-height:500px;position:relative}.lead{display:flex;justify-content:space-between;gap:30px;align-items:flex-end;padding:32px 38px 10px}.kicker{font-size:11px;letter-spacing:.13em;font-weight:600;color:#ab690b;margin:0 0 12px}h1{font-size:clamp(28px,3vw,40px);line-height:1.12;letter-spacing:-.035em;margin:0}h1 em{font-style:normal;color:#527698}.lead>p{color:#647c92;font-size:14px;line-height:1.7;margin:0}.system{background:radial-gradient(ellipse at 50% 50%,#e6f0f8,transparent 65%),#fff}.diagram{position:relative;display:grid;grid-template-columns:1fr .65fr 1fr;align-items:center;gap:8%;padding:30px 4% 34px;min-height:300px}.diagram canvas,.network-field canvas{position:absolute;inset:0;pointer-events:none;width:100%;height:100%}.site-boundary{position:relative;border:1px solid #bbccdc;border-radius:14px;padding:22px 18px 13px;background:#ffffffbf;z-index:1}.zone-label{display:block;font-size:11px;letter-spacing:.1em;color:#5e7690;font-weight:600}.site-boundary>.zone-label{position:absolute;top:-10px;left:15px;background:#fff;padding:0 7px}.equipment{display:flex;justify-content:space-between;gap:5px}.equipment span{padding:7px 8px;background:#eaf0f7;border:1px solid #d1ddea;border-radius:5px;font-size:11px;color:#3a5874}.local-wire{margin:0 12px;height:37px;border-left:1px solid #a9bfd2;border-bottom:1px solid #a9bfd2;position:relative}.local-wire span{position:absolute;right:0;top:8px;font-size:10px;color:#7890a6}.gateway{display:flex;align-items:center;gap:14px;background:#fff;padding:12px 0 0}.gateway img{width:95px;height:108px;object-fit:contain;filter:drop-shadow(0 9px 6px #0002)}.gateway small{display:block;font-size:9px;letter-spacing:.07em;color:#688096}.gateway strong{display:block;font-size:26px;margin:3px 0}.link-state{font-size:11px;color:#168277}.cloud-node{position:relative;z-index:1;text-align:center;background:#f6fbff;border:1px solid #bdd7e9;border-radius:50%;aspect-ratio:1;display:flex;flex-direction:column;justify-content:center;box-shadow:0 14px 28px #20406b12, inset 0 2px 0 #fff}.cloud-symbol{font-family:Arial,sans-serif;font-size:54px;line-height:1;color:#709aba}.cloud-node strong{font-size:22px}.cloud-node small{font-size:11px;color:#6b849a;margin-top:4px}.engineer-node{position:relative;z-index:1;text-align:center;padding:8px 10px;background:#f9fbfd;border-radius:10px}.engineer-node>.zone-label{text-align:left;margin-bottom:12px}.mini-screen{border:5px solid #253d53;border-radius:8px;box-shadow:0 10px 16px #1232;margin-bottom:17px;overflow:hidden;transform:perspective(900px) rotateY(-6deg);background:#fff}.mini-screen img{display:block;width:100%;height:auto}.engineer-node>strong{font-size:15px}.engineer-node p{font-size:12px;color:#6a8094;margin:6px 0}.wire-label{position:absolute;font-size:10px;color:#8294a6;top:41%;transform:translateX(-50%)}.wire-label-a{left:36%}.wire-label-b{left:65%}.system-caption{padding:10px 32px 22px;display:flex;align-items:center;justify-content:center;gap:9px;font-size:13px;color:#60768b}.live-dot{display:inline-block;background:#1ba185;width:7px;height:7px;border-radius:50%;flex-shrink:0}
.network{background:radial-gradient(ellipse at 52% 65%,#1c4670,transparent 53%),#0b1829;color:#ecf3ff;border-color:#1e3954}.network .kicker{color:#ffbb53}.network h1 em{color:#9cbedc}.network .lead>p{color:#9bb3cb}.network-field{min-height:290px;position:relative;display:grid;grid-template-columns:1fr .9fr 1fr;gap:12%;align-items:center;padding:25px 5% 34px}.site-list{z-index:1;display:grid;gap:10px}.site-list button{display:flex;align-items:center;gap:14px;background:#10263c;border:1px solid #41638170;border-radius:9px;padding:12px 15px;color:#d3e4f3;text-align:left;cursor:pointer}.site-number{font-size:11px;color:#7398b7}.site-list strong{display:block;font-size:15px;font-weight:600}.site-list small{display:block;font-size:11px;color:#88a6c0;margin-top:3px}.site-list i{margin-left:auto;width:6px;height:6px;border-radius:50%;background:#64879f}.site-list button[aria-pressed=true]{border-color:#f5a020;background:#28333b}.site-list button[aria-pressed=true] i{background:#f5a020;box-shadow:0 0 12px #f5a02080}.hub{position:relative;z-index:1;text-align:center;aspect-ratio:1;border-radius:50%;border:1px solid #78b8e94a;background:radial-gradient(circle at 35% 20%,#3a658e,#112943 72%);display:flex;flex-direction:column;justify-content:center;box-shadow:0 0 50px #49a2e426,inset 0 1px #bbd9ef70}.hub strong{font-size:24px;color:#fff}.hub small{font-size:10px;letter-spacing:.25em;color:#9dbbd4;margin-top:5px}.hub .cloud-symbol{color:#bbdcf4}.hub-orbit{position:absolute;inset:-12px;border:1px solid #78b8e91c;border-radius:50%}.remote{z-index:1;text-align:center;background:#122840;border:1px solid #40668770;border-radius:13px;padding:20px 10px}.remote-symbol{display:block;font-size:32px;color:#ffb13c;line-height:1.1;margin-bottom:10px}.remote strong{display:block;font-size:20px}.remote>small{display:block;font-size:10px;color:#9eb8d0;margin-top:6px}.destination{display:block;border-top:1px solid #ffffff1a;margin-top:16px;padding-top:12px;font-size:11px;color:#94acc1}.destination b{display:block;font-size:14px;color:#e4f0fa;font-weight:400;margin-top:3px}.network-bottom{display:flex;justify-content:space-between;gap:20px;padding:8px 32px 22px;font-size:12px;color:#91adc6}.network-bottom .live-dot{margin-right:8px}.network-bottom small{font-size:11px}
.walkthrough{display:grid;grid-template-columns:.75fr 1.4fr;gap:32px;padding:40px 32px;background:linear-gradient(125deg,#fff8eb,#fff 55%,#eaf1f8)}.walk-copy h1{font-size:40px}.walk-copy h1 em{color:#bc7618}.walk-intro{font-size:14px;color:#657990;line-height:1.7;margin:18px 0 26px}.walk-steps{display:grid;gap:9px}.walk-steps button{background:transparent;border:0;border-left:2px solid #dbe1e8;display:flex;gap:16px;text-align:left;padding:12px 14px;color:#728398;cursor:pointer}.walk-steps b{font-size:12px;font-weight:400}.walk-steps button>span{font-size:15px;font-weight:600}.walk-steps small{display:block;font-size:11px;font-weight:400;margin-top:5px}.walk-steps button[aria-pressed=true]{border-left-color:#e89b24;background:#fff0d4;color:#192f4a}.walk-visual{display:flex;flex-direction:column;justify-content:center;min-width:0}.screen-frame{border-radius:10px;border:1px solid #c4d2e0;background:#fff;box-shadow:0 20px 40px #2640631c;overflow:hidden}.screen-bar{display:flex;justify-content:space-between;align-items:center;gap:10px;background:#e8eef5;padding:11px 14px;font-size:11px;color:#587188}.screen-bar>span:first-child{display:flex;gap:5px}.screen-bar i{width:5px;height:5px;border-radius:50%;background:#a8b9ca}.screen-bar a{font-size:11px;color:#24527f}.screen-content{aspect-ratio:1.91;background:#eef3f8;overflow:hidden}.screen-content img{display:block;width:100%;height:100%;object-fit:contain}.hardware-strip{display:flex;align-items:center;gap:15px;padding:24px 12px 12px}.hardware-strip>img{width:47px;height:51px;object-fit:contain}.hardware-strip strong{font-size:12px;display:block}.hardware-strip small{font-size:10px;color:#76899c;display:block;margin-top:4px}.strip-line{flex:1;height:1px;background:#c1d3e0;position:relative;overflow:hidden}.strip-line i{display:block;width:15px;height:2px;background:#eb9a22;position:absolute;left:var(--strip,0%)}.strip-end{font-size:11px;color:#45647f}.screen-note{font-size:11px;color:#7b8fa2;margin:10px 12px 0;line-height:1.6}.player{position:relative;display:flex;justify-content:space-between;align-items:center;gap:18px;padding:17px 20px;background:#fff;border:1px solid #d5deea;border-radius:10px;margin-top:12px;overflow:hidden}.player>div:first-child{display:flex;align-items:center;gap:18px}.player-number{font-size:12px;color:#ae721c}.player-status,#player-status{font-size:14px}.player-controls{display:flex;align-items:center;gap:8px}.player-controls>span{font-size:11px;color:#7b8ca0;font-variant-numeric:tabular-nums;margin-right:8px}.player button{background:#f7f9fc;border:1px solid #d5dfea;border-radius:6px;padding:7px 12px;min-height:36px;font-size:12px;color:#294461;cursor:pointer}.player button:hover{background:#eaf0f8}.progress{position:absolute;bottom:0;left:0;width:100%;height:2px;background:#e3eaf2}.progress i{display:block;width:100%;height:100%;background:#f5a020;transform:scaleX(0);transform-origin:left}.direction-note{font-size:14px;color:#3d5874;margin:16px 3px 5px}.disclaimer{font-size:11px;color:#7c8fa3;margin:0 3px}
@media(max-width:900px){.lead{padding:26px 24px 10px}.concept{min-height:460px}.diagram{gap:5%;padding:28px 3%}.gateway{gap:7px}.gateway img{width:70px;height:85px}.gateway strong{font-size:22px}.equipment{flex-wrap:wrap}.equipment span{font-size:10px}.cloud-node strong{font-size:18px}.cloud-symbol{font-size:42px}.network-field{gap:8%;padding:24px 4%}.walkthrough{grid-template-columns:.7fr 1.2fr;gap:20px;padding:30px 24px}.walk-copy h1{font-size:32px}.hardware-strip{gap:9px}.hardware-strip small{display:none}.directions button{padding:12px;gap:10px}.directions span{font-size:14px}.directions small{font-size:11px}.wire-label{display:none}}
@media(max-width:620px){main{padding:14px 12px 24px}.mast{padding:12px 18px}.mast span{display:none}.directions{gap:5px}.directions button{display:block;padding:10px 8px}.directions b{display:block;margin-bottom:4px;font-size:11px}.directions span{font-size:12px;line-height:1.3}.directions small{display:none}.lead{display:block;padding:22px 20px 5px}.lead>p{font-size:12px;margin-top:14px}.lead>p br{display:none}.concept{min-height:0}.diagram{grid-template-columns:1fr;padding:24px 40px 26px;gap:38px}.site-boundary{max-width:310px;width:100%;justify-self:center}.cloud-node{width:128px;justify-self:center}.engineer-node{width:245px;justify-self:center}.mini-screen{margin:8px auto 15px;width:200px}.system-caption{font-size:12px;padding:0 20px 20px;align-items:flex-start}.network-field{grid-template-columns:1fr;padding:22px 40px;gap:38px}.site-list{grid-template-columns:1fr}.site-list button{min-height:56px}.hub{width:145px;justify-self:center}.remote{width:245px;justify-self:center}.network-bottom{display:block;padding:8px 20px 20px;font-size:11px}.network-bottom small{display:block;margin-top:10px}.walkthrough{grid-template-columns:1fr;padding:26px 20px;gap:24px}.walk-steps{gap:5px}.walk-steps button{min-height:58px}.walk-intro{margin:15px 0}.walk-intro br{display:none}.screen-bar{padding:9px 8px;font-size:9px}.screen-bar a{font-size:10px}.screen-bar>span:first-child{display:none}.hardware-strip{padding:18px 0 8px}.hardware-strip strong,.strip-end{font-size:10px}.hardware-strip>img{width:33px;height:38px}.player{flex-wrap:wrap;padding:13px 15px}.player-controls{width:100%;justify-content:flex-end}.player button{min-height:44px}.player-number{white-space:nowrap}#player-status{font-size:12px}.direction-note{font-size:13px}.disclaimer{font-size:10px}}