.network-engine{padding:100px clamp(20px,6vw,100px) 60px;background:radial-gradient(ellipse at 50% 50%,#172846 0,#0c1422 52%,#080d16 100%);color:#eef4ff;overflow:hidden}
.engine-heading{display:flex;justify-content:space-between;align-items:end;gap:40px;max-width:1440px;margin:auto}.engine-heading h2{font-size:clamp(42px,5.5vw,88px);font-weight:400;line-height:1.03;letter-spacing:-.055em;margin:24px 0 0}.engine-heading h2 em{color:#9fbaff;font-style:normal}.engine-heading>p{max-width:350px;color:#b4c3db;font-size:15px;line-height:1.8;margin:0 0 5px}
.engine-scene{position:relative;height:520px;max-width:1200px;margin:30px auto 0}.engine-routes{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}.engine-routes path{fill:none;stroke:url(#engine-line);stroke-width:1.4;opacity:.28;vector-effect:non-scaling-stroke;transition:opacity .6s,stroke-width .6s}.engine-routes path:where(.route-client,.route-need,.route-supply,.route-economy){stroke-dasharray:8 14;animation:engine-stream 7s linear infinite}.engine-scene[data-phase="0"] .route-client,.engine-scene[data-phase="1"] .route-need,.engine-scene[data-phase="2"] .route-supply,.engine-scene[data-phase="3"] .route-economy{opacity:1;stroke-width:2.5}
.engine-client,.engine-core,.engine-sources,.engine-network-note{position:absolute}.engine-client{top:23%;left:5%;width:17%;display:grid;justify-items:start;gap:11px;color:#a9bad5}.engine-client>svg{width:32px;height:32px;stroke-width:1.3}.engine-client>span{font-size:22px;color:#eaf2ff}.engine-client small,.engine-sources small{font-size:12px;color:#9bafcd;line-height:1.5}
.engine-core{top:50%;left:50%;transform:translate(-50%,-50%);width:270px;min-height:270px;border:1px solid #9ebdff66;border-radius:50%;background:radial-gradient(ellipse at 40% 15%,#8eafff30,#132038 65%);display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;text-decoration:none;padding:25px;box-shadow:0 0 95px #588bff22,inset 0 0 55px #7a9cda12;z-index:2;transition:box-shadow .5s}.engine-core:hover{box-shadow:0 0 110px #588bff55,inset 0 0 55px #7a9cda22}.engine-core-icon{margin-bottom:12px;color:#dce9ff}.engine-core-icon svg{width:33px;height:33px;stroke-width:1.4}.engine-core-label{color:#a3b8db;font-size:11px;letter-spacing:.1em;text-transform:uppercase}.engine-core strong{font-size:34px;font-weight:400;letter-spacing:-1.5px;margin:8px 0}.engine-core [data-engine-place]{color:#c5d4ee;font-size:12px;line-height:1.5;max-width:220px;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.engine-core-count{font-size:12px;color:#a5bded;margin-top:12px}.engine-core-link{display:flex;align-items:center;gap:8px;font-size:12px;margin-top:16px;color:#e0ebff}.engine-core-link svg{width:16px;height:16px}.engine-orbit{position:absolute;inset:-17px;border:1px solid #7da2ff29;border-radius:50%;pointer-events:none}.engine-orbit:before{content:"";position:absolute;inset:-13px;border:1px dashed #6c8dcd24;border-radius:50%;animation:engine-orbit 80s linear infinite}
.engine-sources{right:1%;top:10%;height:80%;width:23%;display:flex;flex-direction:column;justify-content:space-between;z-index:2}.engine-sources a{background:#14223be6;border:1px solid #7898d63b;border-radius:12px;padding:19px 19px 19px 55px;display:grid;gap:7px;text-decoration:none;position:relative;transition:background .3s,border-color .3s}.engine-sources a:hover{background:#22395a;border-color:#9ebaff}.engine-sources a>svg{position:absolute;left:18px;top:21px;width:22px;height:22px;color:#adc7f7;stroke-width:1.4}.engine-sources span{font-size:15px;color:#e4eeff}.engine-network-note{left:5%;top:67%;font-size:14px;line-height:1.8;color:#d2def2}.engine-network-note>span:last-child{color:#9eb1d0}.engine-network-note .signal-dot{display:inline-block;margin-right:7px}
.engine-controls{display:flex;border-top:1px solid #5b759d40;border-bottom:1px solid #5b759d40;max-width:1200px;margin:15px auto 0}.engine-controls button{font:inherit;font-size:13px;flex:1;border:0;border-right:1px solid #5b759d40;background:transparent;color:#a6b9d7;text-align:left;padding:22px 18px;cursor:pointer;transition:background .3s,color .3s}.engine-controls button span{font-size:11px;color:#99b0d8;margin-right:12px}.engine-controls button[aria-pressed="true"]{background:#739dff16;color:#fff}.engine-controls .engine-pause{flex:0 0 64px;display:grid;place-items:center;padding:14px;border-right:0}.engine-pause svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6}.engine-pause:disabled{opacity:.5;cursor:default}.engine-explanation{max-width:1200px;margin:25px auto 0;display:flex;justify-content:space-between;align-items:start;gap:35px}.engine-explanation p{color:#c6d5ee;font-size:15px;line-height:1.8;max-width:700px;margin:0;min-height:80px}.engine-explanation>a{flex:none;margin-top:6px;font-size:13px}.engine-disclosure{max-width:1200px;margin:20px auto 0;font-size:11px;line-height:1.7;color:#94a9c9}
.motion-stopped .engine-routes path,.motion-stopped .engine-orbit:before,.engine-offscreen .engine-routes path,.engine-offscreen .engine-orbit:before{animation-play-state:paused}.network-engine :focus-visible{outline:2px solid #c4d8ff;outline-offset:5px}
@keyframes engine-stream{to{stroke-dashoffset:-220}}@keyframes engine-orbit{to{transform:rotate(360deg)}}
@media(max-width:850px){.network-engine{padding-top:65px}.engine-heading{display:block}.engine-heading>p{margin-top:26px;max-width:550px}.engine-scene{height:450px}.engine-core{width:220px;min-height:220px;padding:18px}.engine-core strong{font-size:28px}.engine-core-label{font-size:10px}.engine-core-icon{margin-bottom:6px}.engine-sources{right:0;width:25%;top:9%;height:82%}.engine-sources a{padding:14px 10px;gap:5px}.engine-sources a>svg{position:static;width:19px;height:19px}.engine-sources span{font-size:13px}.engine-client{left:0;width:20%}.engine-client>span{font-size:18px}.engine-network-note{left:0;font-size:12px;width:20%}.engine-controls button{font-size:12px;padding:18px 12px}.engine-controls button span{display:block;margin-bottom:6px}.engine-explanation{display:block}.engine-explanation p{min-height:90px}.engine-explanation>a{display:inline-flex;margin-top:15px}}
@media(max-width:560px){.network-engine{padding:50px 20px 35px}.engine-scene{height:620px;margin-top:10px}.engine-routes{display:none}.engine-client{left:0;top:5%;width:100%;display:flex;align-items:center;gap:12px;padding:14px;border-bottom:1px solid #7898d633}.engine-client small{margin-left:auto;font-size:11px;max-width:120px}.engine-client>svg{width:24px;height:24px;flex:none}.engine-core{top:38%;width:230px;min-height:230px}.engine-core:before,.engine-core:after{content:"";position:absolute;left:50%;width:1px;height:50px;background:linear-gradient(#7898d622,#b7d1ff);pointer-events:none}.engine-core:before{bottom:calc(100% + 17px)}.engine-core:after{top:calc(100% + 17px)}.engine-sources{top:auto;bottom:35px;left:0;right:0;width:100%;height:auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.engine-sources a{padding:14px 10px;min-height:132px;align-content:start;border-radius:8px}.engine-sources span{font-size:12px;line-height:1.5}.engine-sources small{font-size:11px}.engine-network-note{top:auto;bottom:0;width:100%;font-size:11px;text-align:center}.engine-network-note br{display:initial}.engine-network-note>span:last-child:before{content:" "}.engine-controls{flex-wrap:wrap;margin-top:10px}.engine-controls button{flex:0 0 50%;border-bottom:1px solid #5b759d40;font-size:13px;padding:17px 12px;min-height:70px}.engine-controls button span{display:inline;margin:0 6px 0 0}.engine-controls .engine-pause{flex:0 0 100%;min-height:44px;padding:10px;border-bottom:0}.engine-explanation p{font-size:14px;min-height:125px}.engine-disclosure{font-size:11px}}
@media(prefers-reduced-motion:reduce){.engine-routes path,.engine-orbit:before{animation:none}.engine-core,.engine-routes path,.engine-controls button,.engine-sources a{transition:none}}

/* Keep the network story legible without changing its spatial composition. */
.engine-client small,.engine-sources small,.engine-core [data-engine-place],.engine-core-count,.engine-core-link{font-size:14px}.engine-core-label,.engine-controls button span,.engine-disclosure{font-size:12px}.engine-core-count{line-height:1.5}.engine-controls button{font-size:14px}.engine-sources a{overflow-wrap:anywhere}
@media(max-width:850px){.engine-client small,.engine-sources small{font-size:13px}.engine-network-note{font-size:13px}}
@media(max-width:560px){.engine-scene{height:700px}.engine-core{top:37%;width:244px;min-height:244px}.engine-client small{font-size:13px;max-width:140px}.engine-sources{bottom:48px}.engine-sources a{min-height:155px;padding:14px 10px}.engine-sources span{font-size:14px;line-height:1.5}.engine-sources small{font-size:13px}.engine-network-note{font-size:13px;line-height:1.6}.engine-explanation p{font-size:16px;min-height:0}.engine-explanation>a{font-size:14px}.engine-controls button{font-size:14px}}

@media(max-width:560px){.engine-scene{height:820px}.engine-sources{grid-template-columns:1fr;gap:10px;bottom:48px}.engine-sources a{min-height:80px;padding:14px 16px 14px 52px;gap:4px;align-content:center}.engine-sources a>svg{position:absolute;left:17px;top:20px;width:22px;height:22px}.engine-sources span{font-size:15px}.engine-sources small{font-size:14px}}
