body {
            font-family: sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            background-color: #f9f9f9;
            margin: 0;
            padding: 20px;
        }

        #controls {
            margin-bottom: 10px; /* 10px space below the controls */
            text-align: center;
        }

        button {
            padding: 8px 16px;
            font-size: 14px;
            cursor: pointer;
            border: 1px solid #ccc;
            border-radius: 4px;
            background-color: #fff;
        }

        button:hover {
            background-color: #eee;
        }

        svg {
            background-color: white;
            border: 1px solid #ddd;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

        /* SVG Element Styling */
        .link {
            fill: none;
            stroke: #ccc;
            stroke-width: 1.5px;
            transition: all 0.3s;
        }

        .link.active {
            stroke: #d9534f;
            /* Red for the evolutionary path */
            stroke-width: 4px;
        }

        .node circle {
            fill: #999;
            stroke: white;
            stroke-width: 2px;
            cursor: pointer;
            transition: all 0.3s;
        }

        .node.active circle {
            fill: #d9534f;
            r: 6;
        }

        .node.selected circle {
            fill: #0275d8;
            /* Blue for the selected endpoints */
            r: 8;
        }

        .node text {
            font-size: 10px;
            cursor: pointer;
            user-select: none;
        }