.canvas, #network { min-height: 760px; height: 760px; }
.canvas { background-size: 19px 19px; }
.dna-card { border: 2px solid #0a0a0a; box-shadow: 7px 7px 0 rgba(0,0,0,.08); }

.branch { stroke: #a1a1a1; stroke-width: 1.6; }
.branch.strong { stroke: #080808; stroke-width: 2.8; }
.branch.new { stroke: #606060; }
.dna-spine { fill: none; stroke: #0a0a0a; stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 7 7; animation: dnaFlow 10s linear infinite; }
.dna-spine.ghost { stroke: #888; animation-direction: reverse; }
.dna-spine-rung { stroke: #bbb; stroke-width: 1; }

.node circle { filter: drop-shadow(0 10px 13px rgba(0,0,0,.16)); }
.node.depth-0 circle, .node.depth-2 circle { fill: #090909 !important; }
.node.depth-1 circle { fill: #f9f9f6 !important; stroke: #111; stroke-width: 5; }
.node.depth-1:hover circle, .node.depth-1.selected circle { stroke-width: 8; }
.node.depth-2:hover circle, .node.depth-2.selected circle { stroke: #090909; stroke-width: 7; }
.node-you circle:not(.you-ring) { filter: drop-shadow(0 14px 20px rgba(0,0,0,.23)); }
.you-ring { stroke: #090909; stroke-width: 2; stroke-dasharray: 4 5; }
.root-label { font-size: 10px; font-weight: 900; letter-spacing: .19em; }
.legend { border: 1px solid #111; }

@media(max-width:850px){.canvas,#network{height:700px;min-height:700px}}
@media(max-width:520px){.canvas,#network{height:670px;min-height:670px}.root-label{font-size:9px}}