/* Inset diagrams share the agent card's spacing and paper surface. */
.network-step.network-step--illustrated{padding:30px 0}
.network-copy--illustrated{flex-basis:42%;max-width:460px}
.network-copy--metro{flex-basis:50%;max-width:560px;padding-bottom:0}
.network-copy--metro .network-widget-body{display:flex;align-items:flex-start;gap:22px}
.network-copy--metro .network-widget-body p{flex:1;min-width:0}
.network-copy--metro .network-widget{order:1;float:none;flex:0 0 44%;width:44%;max-width:240px;margin:0}
.network-widget-body{display:flow-root;margin-top:16px}
.network-widget-body p{margin-top:0}
.network-widget{float:right;width:36%;max-width:170px;margin:0 0 8px 18px;scroll-margin-top:110px}
.network-widget>svg{display:block;width:100%;height:auto;overflow:visible}
.network-widget-footer{margin-top:20px;padding:22px 0;border-top:1px solid #b8b9b066}
.network-widget-select{display:grid;min-width:0;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0}
.network-widget-select button{display:flex;align-items:center;justify-content:center;min-width:0;min-height:48px;padding:2px 0;border:0;background:transparent;color:#8a9380}
.network-widget-silhouette{display:block;width:100%;max-width:58px;height:44px;background:currentColor;-webkit-mask-image:var(--widget-silhouette);mask-image:var(--widget-silhouette);-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;opacity:.38;transform:scale(.96);transition:opacity 350ms,transform 350ms cubic-bezier(.16,1,.3,1)}
.network-widget-select button:hover .network-widget-silhouette{opacity:.7}
.network-widget-select button[aria-pressed="true"]{color:var(--widget-accent)}
.network-widget-select button[aria-pressed="true"] .network-widget-silhouette{opacity:1;transform:scale(1.04)}
.network-widget-select button:focus-visible{outline:2px solid var(--widget-accent);outline-offset:4px}
.metro-enclosure,.metro-front{stroke:#859181;stroke-width:1;stroke-linejoin:round}
.metro-enclosure>path:last-child,.metro-front>path:last-child{fill:none}
.metro-floor{fill:#a8b49c1c}
.metro-floor-grid{fill:none;stroke:#8a9580;stroke-width:.7;opacity:.28}
.metro-front{pointer-events:none;opacity:.52}
.metro-layer{opacity:.58;transform:translateY(0);transition:opacity 650ms,transform 650ms cubic-bezier(.16,1,.3,1)}
.metro-layer.is-active{opacity:1;transform:translateY(-3px)}
.metro-people{fill:#a36f53}
.metro-conversation{fill:none;stroke:currentColor;stroke-width:1.3;stroke-dasharray:2 4;color:#a36f53}
.metro-agents{fill:#5c7d8c}
.metro-agent-orbit{fill:none;stroke:#5c7d8c;stroke-width:1.2;stroke-dasharray:2 3}
.metro-applications{fill:none;stroke:#6c7f50;stroke-width:1.5;stroke-linejoin:round}
.metro-tile{fill:#6c7f5026}
.community-connections{fill:none;stroke:#9aa18e;stroke-width:1;opacity:.45}
.community-route{fill:none;stroke:var(--widget-accent);stroke-width:1.5;opacity:0;transition:opacity 550ms}
.community-route.is-active{opacity:.8}
.community-route>path{stroke-dasharray:3 5}
.community-wave{transform-box:fill-box;transform-origin:center;opacity:0}
.community-avatar{fill:#e8e8e2;stroke:#a4ac99;stroke-width:1}
.community-person-mark{fill:#8b9680;transition:fill 550ms}
.community-person--1 .community-person-mark{fill:#5c7d8c}
.community-person--2 .community-person-mark{fill:#a36f53}
.community-person--3 .community-person-mark{fill:#8b6f89}
.community-center{fill:#e8e8e2;stroke:#a4ac99;stroke-width:1}
.community-activity{fill:none;stroke:var(--widget-accent);stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;opacity:0;transition:opacity 450ms}
.community-activity.is-active{opacity:1}
[data-widget-running="true"] .metro-layer.is-active .metro-conversation,[data-widget-running="true"] .metro-layer.is-active .metro-agent-orbit,[data-widget-running="true"] .community-route.is-active>path{animation:widget-flow 3.6s linear infinite}
[data-widget-running="true"] .community-route.is-active .community-wave{animation:widget-wave 3.6s ease-out infinite}
[data-widget-running="true"] .community-route.is-active .community-wave--second{animation-delay:1.2s}
[data-widget-running="true"] .metro-applications.is-active .metro-tile{animation:metro-tile-glow 3.6s ease-in-out infinite}
[data-widget-running="true"] .metro-applications.is-active>g:nth-child(2) .metro-tile{animation-delay:.4s}
[data-widget-running="true"] .metro-applications.is-active>g:nth-child(3) .metro-tile{animation-delay:.8s}
@keyframes metro-tile-glow{0%,70%,100%{fill:#6c7f5026}30%{fill:#6c7f5070}}
@keyframes widget-flow{to{stroke-dashoffset:-32}}
@keyframes widget-wave{0%,10%{opacity:0;transform:scale(.8)}25%{opacity:.5}70%,100%{opacity:0;transform:scale(1.4)}}
@media(max-width:1000px){.network-copy--illustrated{flex-basis:52%}.network-copy--metro{flex-basis:68%}}
@media(max-width:760px){.network-copy--illustrated{flex-basis:64%}.network-copy--metro{flex-basis:82%}}
@media(max-width:520px){.network-step.network-step--illustrated{display:block}.network-copy--illustrated{width:100%}.network-widget{margin-left:14px}}
@media(prefers-reduced-motion:reduce){.network-copy--illustrated *{animation:none!important;transition:none!important}.metro-layer{opacity:.8;transform:none}}