.topology{border:1px solid var(--color-line);border-radius:var(--radius-xl);background:var(--color-plan-ground);box-shadow:var(--shadow-md);flex-direction:column;display:flex;overflow:hidden}.topology-bar{border-bottom:1px solid var(--color-line);background:var(--color-surface);justify-content:space-between;align-items:center;gap:12px;padding:12px 16px;display:flex}.topology-status{font:500 var(--text-small) / 1.5 var(--font-sans);color:var(--color-ink-soft)}.topology-toggle{font:600 var(--text-small) / 24px var(--font-sans);color:var(--color-ink);background:var(--color-secondary);border:1px solid var(--color-secondary);border-radius:var(--radius-xs);cursor:pointer;flex:none;padding:7px 16px;transition:background-color .1s,border-color .1s}.topology-toggle:hover{background:var(--color-secondary-hover);border-color:var(--color-secondary-hover)}.topology-figure{aspect-ratio:1200/610}.topology-svg{width:100%;height:auto;display:block}.topology-svg text{font-family:var(--font-sans);fill:var(--color-plan)}.topology-svg .ground{fill:var(--color-plan-ground)}.topology-svg .title{fill:var(--color-ink);font-size:13.5px;font-weight:600}.topology-svg .sub{fill:var(--color-muted);font-size:12px}.topology-svg .site-label{letter-spacing:.08em;font-size:11px;font-weight:600}.topology-svg .tag-text{letter-spacing:.06em;fill:var(--color-ink-dark);font-size:11px;font-weight:600}.topology-svg .boundary-tag{fill:var(--color-paper)}.topology-svg .badge-text{fill:var(--color-bad-soft);font-size:11px;font-weight:600}.topology-svg .badge-box{fill:var(--color-bad-fill);stroke:var(--color-bad)}.topology-svg .boundary{fill:color-mix(in srgb, var(--color-white) 1.5%, transparent);stroke:color-mix(in srgb, var(--color-plan-light) 55%, transparent);stroke-width:1.5px;stroke-dasharray:8 6}.topology-svg .site-box{fill:var(--color-surface);stroke:var(--color-line-strong);stroke-width:1.5px;transition:stroke .2s}.topology-svg .site.isolated .site-box{stroke:var(--color-bad)}.topology-svg .headquarters{fill:var(--color-raised);stroke:color-mix(in srgb, var(--color-accent) 70%, transparent);stroke-width:1.5px}.topology-svg .node rect{fill:var(--color-surface);stroke:var(--color-line-strong);stroke-width:1.5px}.topology-svg .node.edge rect{stroke:var(--color-accent)}.topology-svg .node.hub rect{stroke:var(--color-accent-soft);stroke-width:2px}.topology-svg .camera-link{fill:none;stroke:var(--color-line-strong);stroke-width:1.2px}.topology-svg .camera-wedge{fill:color-mix(in srgb, var(--color-accent) 26%, transparent);stroke:color-mix(in srgb, var(--color-accent) 60%, transparent);stroke-width:1px}.topology-svg .camera-dot{fill:var(--color-plan-light)}.topology-svg .recording{fill:var(--color-ok);animation:1.1s ease-in-out infinite alternate topology-recording}.topology-svg .link{fill:none;stroke:var(--color-plan);stroke-width:1.6px;stroke-dasharray:6 5;transition:stroke .2s}.topology-svg .link.cut{stroke:var(--color-bad);stroke-dasharray:3 8}.topology-svg .plain-link{fill:none;stroke:var(--color-plan);stroke-width:1.6px}.topology-svg .internet-link{stroke:var(--color-line-strong);stroke-width:1.6px;stroke-dasharray:4 5}.topology-svg .cross{stroke:var(--color-bad);stroke-width:2.4px}.topology-svg .internet{fill:none;stroke:var(--color-line-strong);stroke-dasharray:4 4}.topology-svg .packet{fill:var(--color-accent-soft)}.topology-svg .callout circle{fill:var(--color-accent)}.topology-svg .callout-number{fill:var(--color-white);font-size:12px;font-weight:700}.topology-svg.portrait .title{font-size:19px}.topology-svg.portrait .sub,.topology-svg.portrait .site-label{font-size:15px}.topology-svg.portrait .tag-text,.topology-svg.portrait .badge-text{font-size:13px}.topology-svg.portrait .callout-number{font-size:17px}@media (max-width:760px){.topology-bar{flex-direction:column;align-items:flex-start}.topology-figure{aspect-ratio:600/1150}}@keyframes topology-recording{0%{opacity:.25}to{opacity:1}}@media (prefers-reduced-motion:reduce){.topology-svg .recording{animation:none}}