body {
    font-family: Arial, sans-serif;
    margin: 0;
    overflow: hidden;
    background: black;
}

svg {
    width: 100vw;
    height: 100vh;
}

.link {
    stroke: #999;
    stroke-opacity: 0.6;
}

.highlighted {
    stroke: red !important;
    stroke-width: 3px;
}

.node {
    stroke: #fff;
    stroke-width: 1.5px;
    cursor: pointer;
}

.node.selected {
    stroke: yellow;
    stroke-width: 3px;
}

/* Color by Group */
.node.natural { fill: #1f77b4; }
.node.anthropogenic { fill: #ff7f0e; }
.node.impact { fill: #2ca02c; }
.node.governance { fill: #d62728; }
.node.disaster { fill: #9467bd; }
.node.crosscutting { fill: #8c564b; }

text {
    fill: white;
    font-size: 10px;
    pointer-events: none;
}

#info-panel {
    position: absolute;
    top: 20px;
    left: 20px;
    background: rgba(0,0,0,0.7);
    color: white;
    padding: 15px;
    border-radius: 5px;
    max-width: 300px;
    font-size: 13px;
}

#explanation {
    position: absolute;
    top: 20px;
    right: 20px;
    color: white;
    background: rgba(0,0,0,0.7);
    padding: 8px 12px;
    border-radius: 5px;
    font-size: 12px;
}

footer {
    position: absolute;
    bottom: 10px;
    right: 20px;
    color: white;
    font-size: 11px;
    opacity: 0.7;
}