:root{--bg: #0d1117;--bg-elevated: #161b22;--fg: #e6edf3;--fg-dim: #8b949e;--accent: #58a6ff;--grid: #21262d;--role-source: #f78166;--role-sink: #58a6ff;--role-intermediary: #a371f7;--role-unknown: #6e7681;--schema-lattice: #2ea043;--schema-ecn: #d29922;--schema-cot: #f85149;--schema-community: #58a6ff;--schema-goat: #a371f7;--schema-unknown: #6e7681}*{box-sizing:border-box}html,body{margin:0;padding:0;height:100%;background:var(--bg);color:var(--fg);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;font-size:13px;overflow:hidden}body{display:flex;flex-direction:column}header{display:flex;align-items:center;gap:8px;padding:8px 16px;background:var(--bg-elevated);border-bottom:1px solid var(--grid)}.brand{font-weight:600;letter-spacing:.02em;color:var(--accent)}.separator,.subtitle{color:var(--fg-dim)}.connection-indicator{margin-left:auto;padding:2px 10px;border-radius:10px;font-size:11px;background:var(--grid)}.connection-indicator[data-state=connecting]{color:var(--fg-dim)}.connection-indicator[data-state=live]{color:var(--schema-lattice)}.connection-indicator[data-state=lagged]{color:var(--schema-ecn)}.connection-indicator[data-state=closed]{color:var(--schema-cot)}main{flex:1;position:relative;overflow:hidden}#graph{width:100%;height:100%;display:block}.info-panel{position:absolute;top:16px;right:16px;width:320px;max-height:calc(100% - 32px);overflow-y:auto;padding:12px 16px;background:var(--bg-elevated);border:1px solid var(--grid);border-radius:8px;box-shadow:0 4px 16px #0006}.info-panel.hidden{display:none}.info-panel h3{margin:0 0 8px;font-size:13px;font-weight:600;color:var(--accent)}.info-panel dl{margin:0;display:grid;grid-template-columns:max-content 1fr;gap:4px 12px;font-size:12px}.info-panel dt{color:var(--fg-dim)}.info-panel dd{margin:0;word-break:break-all}.info-panel ul{margin:4px 0 0;padding-left:16px}.legend{display:flex;align-items:center;gap:24px;padding:6px 16px;background:var(--bg-elevated);border-top:1px solid var(--grid);font-size:11px}.legend-section{display:flex;align-items:center;gap:4px}.legend-label{color:var(--fg-dim)}.legend-sub{color:var(--fg-dim);font-size:10px;margin-left:4px}.node circle{stroke:var(--fg);stroke-width:1.5;cursor:pointer}.node:hover circle{stroke-width:2.5}.node text{font-size:11px;fill:var(--fg);text-anchor:middle;pointer-events:none;-webkit-user-select:none;user-select:none}.edge{stroke-opacity:.6;fill:none;pointer-events:none}.packet-dot{fill:var(--fg);pointer-events:none}