.network-viewport{position:relative}
.network-legend{position:absolute;z-index:10;top:18px;left:20px;right:20px;display:flex;align-items:center;gap:15px;flex-wrap:wrap;padding:11px 14px;border:1px solid rgba(255,255,255,.14);background:rgba(5,13,19,.84);backdrop-filter:blur(8px);color:#aebbc3;font-size:11px;letter-spacing:.04em}
.network-legend strong{color:#fff;font-size:11px}.network-legend span{display:inline-flex;align-items:center;gap:7px}.legend-line{width:35px;height:3px;background:var(--net-accent);box-shadow:0 0 9px var(--net-accent)}.legend-line.duplex{height:7px;background:repeating-linear-gradient(0deg,var(--net-accent) 0 2px,transparent 2px 4px,var(--net-accent) 4px 7px)}.legend-node{width:13px;height:13px;border:1px solid #58b9ff;background:#19364a}.legend-hint{margin-left:auto;color:var(--net-accent)!important;font-weight:800}
.topology-explainer{margin-top:24px;border:1px solid #29404f;background:linear-gradient(135deg,rgba(16,31,41,.95),rgba(8,17,24,.95))}.explainer-head{display:flex;justify-content:space-between;align-items:end;gap:30px;padding:30px 34px;border-bottom:1px solid #29404f}.explainer-head h3{margin:8px 0 0;font-size:26px}.explainer-head p{max-width:620px;margin:0;color:#99a8b1;font-size:13px;line-height:1.7}.flow-steps{display:grid;grid-template-columns:repeat(5,1fr);counter-reset:flow}.flow-step{position:relative;min-height:185px;padding:29px 24px 25px;border-right:1px solid #29404f;counter-increment:flow}.flow-step:last-child{border-right:0}.flow-step::before{content:"0" counter(flow);display:block;margin-bottom:23px;color:var(--net-accent);font-size:11px;font-weight:900;letter-spacing:.14em}.flow-step:not(:last-child)::after{content:"\2192";position:absolute;z-index:2;top:27px;right:-10px;width:20px;height:20px;border-radius:50%;background:var(--net-accent);color:#fff;text-align:center;line-height:19px}.flow-step strong{display:block;margin-bottom:12px;color:#fff;font-size:16px}.flow-step p{margin:0;color:#9fadb5;font-size:12px;line-height:1.7}.flow-step code{color:#dce8ee;font-family:inherit;font-weight:700}.flow-status{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid #29404f}.flow-status article{padding:25px 34px}.flow-status article+article{border-left:1px solid #29404f}.flow-status span{display:block;margin-bottom:9px;color:var(--net-accent);font-size:10px;font-weight:900;letter-spacing:.15em}.flow-status strong{font-size:14px;line-height:1.65}.flow-status .fault span{color:#ff6b6b}
@media(max-width:1000px){.flow-steps{grid-template-columns:repeat(2,1fr)}.flow-step{border-bottom:1px solid #29404f}.flow-step:nth-child(2n){border-right:0}.flow-step::after{display:none}.flow-step:last-child{grid-column:1/-1}.explainer-head{display:block}.explainer-head p{margin-top:15px}}
@media(max-width:620px){.network-legend{position:relative;top:auto;left:auto;right:auto;margin:14px}.legend-hint{width:100%;margin-left:0}.flow-steps,.flow-status{grid-template-columns:1fr}.flow-step,.flow-step:nth-child(2n){min-height:auto;border-right:0}.flow-step:last-child{grid-column:auto}.flow-status article+article{border-left:0;border-top:1px solid #29404f}.explainer-head,.flow-status article{padding:24px}.network-scene{margin-top:5px}}