#family-radar { position: relative; background: #faf8f2; border-radius: 12px; }
#family-radar svg { display: block; width: 100%; height: auto; font-family: system-ui, sans-serif; }
#family-radar .radar-heading { text-anchor: middle; font-size: 23px; font-weight: 700; fill: #253238; }
#family-radar .radar-subheading { text-anchor: middle; font-size: 14px; fill: #586462; }
#family-radar .radar-grid circle, #family-radar .radar-grid line { fill: none; stroke: #c5cbc3; stroke-width: 1; }
#family-radar .radar-grid text { font-size: 11px; fill: #687572; }
#family-radar .radar-label { font-size: 14px; fill: #353b3d; }
#family-radar .radar-series { fill-opacity: .09; stroke-width: 3; stroke-linejoin: round; }
#family-radar .series-1 { stroke-dasharray: 8 5; }
#family-radar .series-2 { stroke-dasharray: 2 4; }
#family-radar .radar-legend { font-size: 15px; fill: #253238; }
#family-radar .radar-key { text-anchor: middle; font-size: 13px; fill: #586462; }
#family-radar .radar-label { cursor: pointer; }
#family-radar .radar-label:focus { outline: none; text-decoration: underline; }
#family-radar .radar-tooltip { position: absolute; z-index: 2; bottom: .5rem; left: 50%; transform: translateX(-50%); width: max-content; max-width: 90%; padding: .45rem .7rem; border-radius: 5px; background: #253238; color: white; font: 13px/1.4 system-ui, sans-serif; text-align: center; pointer-events: none; }
#family-radar .radar-tooltip[hidden] { display: none; }
@media (max-width: 600px) {
  #family-radar .radar-label { font-size: 12px; }
  #family-radar .radar-heading { font-size: 18px; }
  #family-radar .radar-subheading { font-size: 12px; }
  #family-radar .radar-key { font-size: 11px; }
  #family-radar .radar-legend { font-size: 12px; }
}

#family-radar .radar-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem .6rem; padding: 0 .75rem .75rem; }
#family-radar .radar-legend-item { display: inline-flex; align-items: center; gap: .4rem; min-height: 2.5rem; padding: .3rem .55rem; border: 1px solid #a5aea8; border-radius: 5px; background: #fff; color: #253238; font: inherit; cursor: pointer; }
#family-radar .radar-legend-item[aria-pressed="false"] { opacity: .55; text-decoration: line-through; }
#family-radar .radar-legend-item:focus-visible { outline: 3px solid #0072b2; outline-offset: 2px; }
#family-radar .radar-legend-item svg { flex: none; width: 36px; height: 16px; }