.family-tree-canvas {
  background-color: #f7f5f0;
  background-image: radial-gradient(circle, rgba(120, 113, 108, 0.18) 0.7px, transparent 0.8px);
  background-size: 18px 18px;
}

.family-tree-person .family-tree-card {
  transition: fill 150ms ease, stroke 150ms ease;
}

.family-tree-person:hover .family-tree-card,
.family-tree-person:focus .family-tree-card {
  fill: #fffdf8;
  stroke: #78716c;
  stroke-width: 1.5;
}

.family-tree-person:focus { outline: none; }

.family-tree-control {
  min-width: 40px;
  height: 40px;
  color: #57534e;
  font: 600 18px/1 Lato, sans-serif;
  transition: background-color 120ms ease;
}

.family-tree-control:hover { background-color: #f5f5f4; }
.family-tree-control:focus-visible { outline: 2px solid #49796b; outline-offset: -3px; }

@media (prefers-reduced-motion: reduce) {
  .family-tree-person .family-tree-card,
  .family-tree-control { transition: none; }
}