:root{
  --bg:#0b0f14;
  --panel:#0f1620;
  --text:#e5e7eb;
  --muted:#94a3b8;
  --stroke:rgba(255,255,255,.14);
}
*{box-sizing:border-box}
body{
  margin:0;
  background: radial-gradient(1200px 800px at 20% -10%, rgba(96,165,250,.10), transparent 60%),
              radial-gradient(1200px 800px at 90% 10%, rgba(52,211,153,.07), transparent 55%),
              var(--bg);
  color:var(--text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}
header{
  padding:16px 18px 10px;
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:12px;
  flex-wrap:wrap;
}
h1{margin:0;font-size:20px}
.sub{color:var(--muted);font-size:12px;margin-top:6px;max-width:900px}

.wrap{ padding:0 18px 18px; }
.panel{
  background:var(--panel);
  border:1px solid rgba(255,255,255,.10);
  border-radius:14px;
  padding:10px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
#viz{ height: calc(100vh - 110px); min-height:520px; }
svg{ width:100%; height:100%; display:block; }

.node rect{
  rx:10; ry:10;
  stroke: rgba(255,255,255,.18);
  stroke-width: 1;
}
.node text{
  fill: var(--text);
  font-size: 16px;
  paint-order: stroke;
  stroke: rgba(0,0,0,.7);
  stroke-width: 3px;
  stroke-linejoin: round;
}

.link{
  fill:none;
  stroke-opacity:.45;
  mix-blend-mode: screen;
}
.link:hover{ stroke-opacity:.80; }

.tooltip{
  position:fixed;
  pointer-events:none;
  background:rgba(17,24,39,.95);
  border:1px solid rgba(255,255,255,.12);
  padding:8px 10px;
  border-radius:10px;
  display:none;
  font-size:12px;
  max-width:360px;
}
.tooltip b{display:block}
.tooltip .m{color:var(--muted);margin-top:2px}
.err{ color:#fca5a5; padding:12px; }