: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}.welcome-card{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:min(640px,calc(100% - 32px));max-height:calc(100% - 32px);overflow-y:auto;background:var(--bg-elevated);border:1px solid var(--grid);border-radius:12px;box-shadow:0 12px 48px #00000080;padding:24px 28px;z-index:10}.welcome-card-fade{transition:opacity .8s ease-out,transform .8s ease-out}.welcome-card-hidden{opacity:0;transform:translate(-50%,calc(-50% + 16px));pointer-events:none}.welcome-header{display:flex;align-items:baseline;gap:12px;margin-bottom:16px;position:relative}.welcome-header h1{margin:0;font-size:22px;color:var(--accent);font-weight:600;letter-spacing:.02em}.welcome-subtitle{margin:0;color:var(--fg-dim);font-size:13px}.welcome-dismiss{margin-left:auto;background:transparent;color:var(--fg-dim);border:1px solid var(--grid);border-radius:6px;width:28px;height:28px;font-size:16px;cursor:pointer;line-height:1}.welcome-dismiss:hover{color:var(--fg);border-color:var(--fg-dim)}.welcome-section+.welcome-section{margin-top:18px}.welcome-section h2{margin:0 0 8px;font-size:12px;font-weight:600;color:var(--fg-dim);text-transform:uppercase;letter-spacing:.08em}.welcome-section p{margin:0;font-size:13px;line-height:1.55;color:var(--fg)}.welcome-section p+p{margin-top:8px}.welcome-section code{background:var(--bg);padding:1px 5px;border-radius:3px;font-size:12px;color:var(--accent)}.welcome-status{margin:0;display:grid;grid-template-columns:max-content 1fr;gap:6px 16px;align-items:baseline}.welcome-status dt{color:var(--fg-dim);font-size:12px}.welcome-status dd{margin:0;font-size:12px}.welcome-status-row{display:flex;align-items:baseline;gap:8px}.welcome-badge{display:inline-block;width:9px;height:9px;border-radius:50%;flex-shrink:0;align-self:center}.welcome-badge[data-state=ok]{background:var(--schema-lattice)}.welcome-badge[data-state=wait]{background:var(--fg-dim)}.welcome-badge[data-state=warn]{background:var(--schema-ecn)}.welcome-badge[data-state=fail]{background:var(--schema-cot)}.welcome-footer{margin-top:12px!important;color:var(--fg-dim);font-size:11px}.welcome-footer a{color:var(--accent);text-decoration:none}.welcome-footer a:hover{text-decoration:underline}.welcome-pill{position:absolute;top:16px;right:16px;background:var(--bg-elevated);border:1px solid var(--grid);border-radius:14px;color:var(--fg-dim);font-size:11px;padding:4px 12px;cursor:pointer;z-index:9}.welcome-pill:hover{color:var(--fg);border-color:var(--fg-dim)}.welcome-pill.hidden{display:none}.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}