:root{--bg:#fafafa;--card:#fff;--muted:#6b7280;--accent:#0ea5e9}
html,body{height:100%;margin:0;font-family:Inter,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:#0f172a}
.wrap{padding:20px;display:flex;flex-direction:column;gap:12px;min-height:100%}
.controls{display:flex;gap:8px;align-items:center}
button{padding:8px 12px;border-radius:8px;border:1px solid rgba(15,23,42,0.06);background:white;cursor:pointer}
button.primary{background:var(--accent);color:white;border:none}
.card{background:var(--card);border-radius:12px;padding:14px;box-shadow:0 6px 18px rgba(2,6,23,0.06);flex:1;display:flex;flex-direction:column}
#chart{flex:1;min-height:480px}
.node circle{fill:#fff;stroke:steelblue;stroke-width:2px}
.node text{font:12px sans-serif;pointer-events:auto}
.node text.clickable{fill:var(--accent);cursor:pointer;font-weight:600;text-decoration:underline}
.node text.clickable:hover{opacity:0.85}
.tooltip{
	position: absolute;
	pointer-events: none;
	background: white;
	color: #0f172a;
	border: 1px solid rgba(15,23,42,0.08);
	padding: 8px 10px;
	border-radius: 8px;
	box-shadow: 0 6px 18px rgba(2,6,23,0.06);
	font-size: 13px;
	line-height: 1.25;
	display: none;
	z-index: 1000;
	max-width: 320px;
}
.tooltip .k{font-weight:600;margin-right:6px}
.tooltip .v{color:var(--muted)}
.link{fill:none;stroke:#9ca3af;stroke-width:1.5px}

body {
	background-color: red;
}