/* Root-relative family hierarchy layer. The network remains visible, but family structure owns the geometry. */
.generation-band{background:linear-gradient(90deg,transparent 0,rgba(255,255,255,.006) 18%,rgba(255,255,255,.012) 50%,rgba(255,255,255,.006) 82%,transparent 100%)}
.generation-band.reference-band{border-top-color:rgba(213,180,110,.22);border-bottom-color:rgba(213,180,110,.10);background:linear-gradient(90deg,transparent,rgba(213,180,110,.022) 25%,rgba(213,180,110,.04) 50%,rgba(213,180,110,.022) 75%,transparent)}
.generation-band.reference-band span{color:rgba(229,207,160,.58)}
.kinship-label{display:block;margin-top:4px;color:rgba(213,180,110,.70);font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:7px;font-style:normal;font-weight:700;letter-spacing:.09em;line-height:1.15;text-transform:uppercase}
.graph-node.root-node .node-orb{border-color:rgba(213,180,110,.72);background:radial-gradient(circle at 36% 28%,rgba(213,180,110,.22),rgba(213,180,110,.065) 52%,rgba(0,0,0,.22));box-shadow:0 14px 34px rgba(0,0,0,.32),0 0 0 8px rgba(213,180,110,.045),0 0 34px rgba(213,180,110,.12)}
.graph-node.kinship-near:not(.root-node) .node-orb{border-color:rgba(213,180,110,.34);box-shadow:0 12px 30px rgba(0,0,0,.28),0 0 0 6px rgba(213,180,110,.022)}
.graph-node.kinship-cousin .node-orb,.graph-node.kinship-aunt-uncle .node-orb,.graph-node.kinship-grandparent .node-orb{border-color:rgba(255,255,255,.22)}
.graph-node.context-dimmed{opacity:.055;filter:saturate(.25)}
.graph-node.dimmed{opacity:.055;filter:saturate(.30)}
.edge{stroke:rgba(145,157,176,.13)}
.edge.parent,.edge.child,.edge.guardian{stroke:rgba(166,179,198,.25);stroke-width:1.35}
.edge.spouse,.edge.partner{stroke:rgba(213,180,110,.42);stroke-width:1.55}
.edge.social,.edge.friend,.edge.mentor,.edge.business_partner{stroke:rgba(125,169,255,.08);stroke-dasharray:5 9}
.edge.near-root{opacity:.95}
.edge.mid-root{opacity:.48}
.edge.far-root{opacity:.14}
.edge.context-dimmed,.edge.dimmed{opacity:.012}
.edge.related{opacity:1;stroke:rgba(232,236,241,.70);stroke-width:1.9}
.edge.spouse.related,.edge.partner.related{stroke:rgba(225,197,137,.82)}
.edge.research-edge{opacity:.55;stroke:rgba(134,168,210,.36);stroke-dasharray:4 6}
@media(max-width:650px){
  .graph-node{width:108px}
  .node-orb{width:58px;height:58px}
  .node-copy b{font-size:11px}
  .kinship-label{font-size:6.5px;letter-spacing:.07em}
  .generation-band span{font-size:9px;letter-spacing:.16em}
}


/* Focused family tree: hierarchy, portraits, and explanatory motion. */
.world.camera-animated{transition:transform .72s cubic-bezier(.2,.8,.2,1)}
.nodes,.edges{transition:opacity .16s ease}
.viewport.tree-transitioning .nodes,.viewport.tree-transitioning .edges{opacity:.08}
.viewport.tree-arriving .graph-node:not(.focused):not(.transition-anchor-overlay){animation:family-node-arrive .62s cubic-bezier(.16,.82,.24,1) both;animation-delay:var(--arrival-delay,0ms)}
.transition-anchor-overlay{position:absolute!important;z-index:24!important;display:block!important;margin:0!important;padding:0!important;min-width:0!important;pointer-events:none!important;transform:translate(-50%,-50%)!important;transition:width .72s cubic-bezier(.2,.8,.2,1),height .72s cubic-bezier(.2,.8,.2,1),opacity .16s ease!important}
.transition-anchor-overlay .node-orb{width:100%!important;height:100%!important}
.transition-anchor-overlay .node-copy{display:none!important}
.transition-anchor-overlay.transition-anchor-fading{opacity:0!important}
.graph-node.transition-anchor-target{opacity:0!important}
@keyframes family-node-arrive{
  from{opacity:0;transform:translate(-50%,-50%) scale(.72)}
  to{opacity:1;transform:translate(-50%,-50%) scale(1)}
}
.graph-node{width:144px;gap:10px}
.node-orb{width:74px;height:74px;overflow:visible}
.node-photo{position:absolute;inset:2px;width:calc(100% - 4px);height:calc(100% - 4px);border-radius:50%;object-fit:cover;object-position:center;background:#111722;opacity:0;transition:opacity .3s ease;z-index:1}
.node-orb.has-photo .node-photo{opacity:1}
.node-orb.has-photo .node-initials{opacity:0}
.node-initials{transition:opacity .2s ease}
.node-meta-dot{z-index:3}
.node-copy b{font-size:14px;line-height:1.2}
.node-copy small{font-size:11px}
.kinship-label{font-size:9px;margin-top:5px}
.edge{fill:none;stroke-linecap:round;stroke-linejoin:round;transition:opacity .25s ease,stroke .25s ease}
.edge.parent{stroke:rgba(188,200,219,.48);stroke-width:1.6}
.edge.spouse{stroke:rgba(224,193,128,.72);stroke-width:2.2}
.edge.uncertain{stroke-dasharray:5 7}
.generation-band span{font-size:11px;letter-spacing:.18em}
.detail-person-head{display:flex;align-items:center;gap:16px;margin:6px 0 16px}
.detail-person-head h2{margin:3px 0}
.detail-portrait{width:82px;height:82px;flex:0 0 82px;border-radius:50%;object-fit:cover;border:1px solid rgba(213,180,110,.48);box-shadow:0 10px 30px rgba(0,0,0,.3)}
.detail-portrait-fallback{display:grid;place-items:center;background:radial-gradient(circle at 35% 28%,rgba(213,180,110,.2),rgba(255,255,255,.035));font-family:Georgia,"Times New Roman",serif;color:var(--gold);font-size:22px}
.focus-family-btn{width:100%;margin:4px 0 18px;padding:11px 14px;border:1px solid rgba(213,180,110,.32);border-radius:10px;background:rgba(213,180,110,.08);color:#eadbb9;font:700 12px/1 Inter,ui-sans-serif,sans-serif;letter-spacing:.06em;cursor:pointer}
.focus-family-btn:hover{background:rgba(213,180,110,.15)}
.relationship-group{margin-top:19px}
.connection-item{width:100%;text-align:left;border:0}
.connection-item>img,.connection-item>i{width:34px;height:34px;flex:0 0 34px;border-radius:50%;object-fit:cover}
.media-preview{display:block;width:100%;max-height:250px;margin:0 0 12px;border-radius:10px;object-fit:cover;background:#10141c}
.tree-guide{position:absolute;left:18px;top:18px;z-index:7;display:flex;align-items:center;gap:14px;padding:9px 12px;border:1px solid rgba(255,255,255,.09);border-radius:11px;background:rgba(9,12,18,.76);backdrop-filter:blur(12px);color:var(--muted);font-size:11px;pointer-events:none}
.tree-guide span{display:flex;align-items:center;gap:6px}
.tree-guide i{display:block;width:18px;height:2px;border-radius:2px;background:rgba(188,200,219,.62)}
.tree-guide .partner-key i{background:rgba(224,193,128,.85)}
@media(max-width:650px){
  .graph-node{width:124px}
  .node-orb{width:64px;height:64px}
  .node-copy b{font-size:12px}
  .node-copy small{font-size:10px}
  .tree-guide{top:10px;left:10px;gap:10px;padding:8px 10px}
}
@media(prefers-reduced-motion:reduce){
  .world.camera-animated,.nodes,.edges,.graph-node,.node-photo{transition:none!important}
  .viewport.tree-arriving .graph-node{animation:none!important}
}


/* Futuristic radial family circuit */
.viewport{
  background:
    radial-gradient(circle at 50% 48%,rgba(31,224,255,.095),transparent 18%),
    radial-gradient(circle at 34% 42%,rgba(29,219,255,.045),transparent 30%),
    radial-gradient(circle at 70% 48%,rgba(244,74,255,.05),transparent 31%),
    linear-gradient(180deg,#070b13 0%,#050811 100%);
}
.viewport::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.28;
  background-image:
    linear-gradient(rgba(41,204,255,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(41,204,255,.055) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(circle at center,#000 0%,rgba(0,0,0,.76) 48%,transparent 92%);
}
.world::before{
  content:"";position:absolute;left:2100px;top:1500px;width:590px;height:590px;
  transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;z-index:0;
  border:1px solid rgba(44,226,255,.13);
  box-shadow:0 0 0 34px rgba(44,226,255,.018),0 0 0 76px rgba(230,67,255,.012),0 0 95px rgba(37,213,255,.11);
  background:repeating-radial-gradient(circle,transparent 0 52px,rgba(62,216,255,.035) 53px 54px);
}
.generation-band{display:none}
.edges{z-index:1;overflow:visible}
.nodes{z-index:2}
.graph-node{width:190px;gap:13px}
.graph-node:hover,.graph-node.focused{transform:translate(-50%,-50%);z-index:8}
.node-orb{
  width:100px;height:100px;border:2px solid rgba(74,225,255,.78);
  background:radial-gradient(circle at 38% 28%,rgba(122,243,255,.25),rgba(7,18,30,.94) 64%);
  box-shadow:0 0 0 7px rgba(36,222,255,.055),0 0 28px rgba(24,216,255,.28),inset 0 0 24px rgba(34,218,255,.13);
}
.node-orb::before{
  content:"";position:absolute;inset:-10px;border-radius:50%;border:1px dashed rgba(81,229,255,.34);
  pointer-events:none;animation:family-orbit-spin 18s linear infinite;
}
.graph-node.branch-right .node-orb{
  border-color:rgba(244,93,255,.82);
  background:radial-gradient(circle at 38% 28%,rgba(248,114,255,.21),rgba(20,8,31,.94) 64%);
  box-shadow:0 0 0 7px rgba(239,65,255,.05),0 0 28px rgba(232,56,255,.27),inset 0 0 24px rgba(238,72,255,.13);
}
.graph-node.branch-right .node-orb::before{border-color:rgba(243,105,255,.36)}
.graph-node.root-node .node-orb{
  width:188px;height:188px;border-width:4px;border-color:rgba(205,252,255,.98);
  background:radial-gradient(circle at 40% 25%,rgba(139,247,255,.35),rgba(7,25,43,.96) 66%);
  box-shadow:0 0 0 9px rgba(56,231,255,.12),0 0 0 17px rgba(181,71,255,.055),0 0 64px rgba(39,225,255,.55),inset 0 0 42px rgba(41,224,255,.22);
}
.graph-node.root-node .node-orb::before{inset:-19px;border-color:rgba(85,232,255,.5);border-style:solid}
.graph-node.kinship-parent .node-orb{width:140px;height:140px}
.graph-node.kinship-spouse .node-orb{width:122px;height:122px}
.graph-node.kinship-sibling .node-orb,.graph-node.kinship-child .node-orb{width:110px;height:110px}
.graph-node.kinship-grandparent .node-orb,.graph-node.kinship-grandchild .node-orb{width:94px;height:94px}
.node-photo{inset:4px;width:calc(100% - 8px);height:calc(100% - 8px)}
.node-initials{font-size:20px;color:#bdf8ff;text-shadow:0 0 15px rgba(65,229,255,.8)}
.graph-node.branch-right .node-initials{color:#ffd0ff;text-shadow:0 0 15px rgba(239,85,255,.75)}
.graph-node.root-node .node-initials{font-size:34px;color:#e7fdff}
.node-copy{max-width:190px}
.node-copy b{font:700 14px/1.2 Inter,ui-sans-serif,sans-serif;letter-spacing:.015em;color:#c8f9ff;text-shadow:0 0 12px rgba(42,220,255,.26)}
.graph-node.branch-right .node-copy b{color:#ffd1ff;text-shadow:0 0 12px rgba(237,67,255,.23)}
.graph-node.root-node .node-copy b{font-size:19px;color:#e9feff}
.node-copy small{font-size:11px;color:rgba(214,231,242,.62)}
.kinship-label{
  display:inline-flex;align-items:center;justify-content:center;margin-top:7px;padding:4px 8px;
  border:1px solid rgba(49,218,255,.32);border-radius:999px;background:rgba(21,184,216,.07);
  color:#57eaff;font-size:9px;letter-spacing:.12em;
}
.graph-node.branch-right .kinship-label{border-color:rgba(239,82,255,.34);background:rgba(206,54,225,.07);color:#f490ff}
.graph-node.root-node .kinship-label{color:#dffcff;border-color:rgba(146,241,255,.46)}
.edge{stroke-width:2;opacity:.78;vector-effect:non-scaling-stroke}
.edge.parent.branch-left,.edge.spouse.branch-left{
  stroke:#36e6ff;filter:drop-shadow(0 0 4px rgba(34,223,255,.82));
}
.edge.parent.branch-right,.edge.spouse.branch-right{
  stroke:#ef5dff;filter:drop-shadow(0 0 4px rgba(237,72,255,.78));
}
.edge.branch-center{
  stroke:#aef7ff;filter:drop-shadow(0 0 5px rgba(65,228,255,.75));
}
.edge.spouse{stroke-width:2.6}
.tree-guide{border-color:rgba(68,219,255,.16);background:rgba(5,12,22,.76)}
.tree-guide i{background:#39e7ff;box-shadow:0 0 7px rgba(39,222,255,.8)}
.tree-guide .partner-key i{background:#ed5bff;box-shadow:0 0 7px rgba(235,72,255,.78)}
@keyframes family-orbit-spin{to{transform:rotate(360deg)}}
@media(max-width:650px){
  .graph-node{width:154px}
  .graph-node.root-node .node-orb{width:150px;height:150px}
  .graph-node.kinship-parent .node-orb{width:118px;height:118px}
  .graph-node.kinship-spouse .node-orb{width:104px;height:104px}
  .graph-node.kinship-sibling .node-orb,.graph-node.kinship-child .node-orb{width:96px;height:96px}
  .graph-node.kinship-grandparent .node-orb,.graph-node.kinship-grandchild .node-orb{width:84px;height:84px}
}
@media(prefers-reduced-motion:reduce){.node-orb::before{animation:none!important}}


/* Family junction geometry: connectors remain outside portrait or card bounds at every camera scale. */
.graph-node{display:flex;flex-direction:column;align-items:center;justify-content:center}
.node-orb{flex:0 0 auto}
.node-copy{display:flex;flex-direction:column;align-items:center;text-align:center}
.edge.family-couple{stroke-width:2.8}
.edge.family-trunk,.edge.family-sibling-bar,.edge.family-child-drop{stroke-width:2.2}
.family-junction{fill:#aef7ff;stroke:#07111c;stroke-width:2;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 5px rgba(65,228,255,.9))}
.family-junction.branch-left{fill:#36e6ff}
.family-junction.branch-right{fill:#ef5dff}
.edge.family-couple,.edge.family-trunk,.edge.family-sibling-bar,.edge.family-child-drop{vector-effect:non-scaling-stroke}
body.classic-tree-mode .family-junction{fill:#654724;stroke:#dbc294;filter:none}
body.classic-tree-mode .edge.family-couple,
body.classic-tree-mode .edge.family-trunk,
body.classic-tree-mode .edge.family-sibling-bar,
body.classic-tree-mode .edge.family-child-drop{stroke:#654724;filter:none}

.edge:is(.family-couple,.family-trunk,.family-sibling-bar,.family-child-drop).branch-left{
  stroke:#36e6ff;filter:drop-shadow(0 0 4px rgba(34,223,255,.82))
}
.edge:is(.family-couple,.family-trunk,.family-sibling-bar,.family-child-drop).branch-right{
  stroke:#ef5dff;filter:drop-shadow(0 0 4px rgba(237,72,255,.78))
}
.edge:is(.family-couple,.family-trunk,.family-sibling-bar,.family-child-drop).branch-center{
  stroke:#aef7ff;filter:drop-shadow(0 0 5px rgba(65,228,255,.75))
}


/* Modern circuit-wire finish. Geometry is measured after kinship sizing in app.js. */
body:not(.classic-tree-mode) .edge.circuit-glow{
  stroke-width:10;
  opacity:.12;
  filter:blur(2.2px) drop-shadow(0 0 9px currentColor);
}
body:not(.classic-tree-mode) .edge.circuit-wire{
  stroke-width:1.8;
  opacity:.94;
}
body:not(.classic-tree-mode) .edge.circuit-wire.family-couple{
  stroke-width:2.35;
}
body:not(.classic-tree-mode) .edge.circuit-pulse{
  stroke:#effeff;
  stroke-width:1.15;
  stroke-dasharray:1 34;
  stroke-linecap:round;
  opacity:.88;
  filter:drop-shadow(0 0 4px currentColor);
  animation:family-circuit-flow 3.6s linear infinite;
}
body:not(.classic-tree-mode) .family-junction{
  fill:#061620;
  stroke:#c8fbff;
  stroke-width:2.4;
  filter:drop-shadow(0 0 3px #fff) drop-shadow(0 0 9px rgba(65,228,255,.95));
}
body:not(.classic-tree-mode) .family-junction.branch-left{
  fill:#06202a;
  stroke:#69efff;
}
body:not(.classic-tree-mode) .family-junction.branch-right{
  fill:#240828;
  stroke:#f58dff;
}
body.classic-tree-mode .edge.circuit-glow,
body.classic-tree-mode .edge.circuit-pulse{
  display:none;
}
@keyframes family-circuit-flow{
  to{stroke-dashoffset:-70}
}
@media(prefers-reduced-motion:reduce){
  body:not(.classic-tree-mode) .edge.circuit-pulse{animation:none;opacity:.42}
}


/* Universal attachment hardware for every portrait and line junction. */
.family-attachment,
.family-attachment-core{
  vector-effect:non-scaling-stroke;
  pointer-events:none;
}
body:not(.classic-tree-mode) .family-attachment{
  fill:#07131d;
  stroke:#dffcff;
  stroke-width:2.25;
  filter:drop-shadow(0 0 3px rgba(255,255,255,.92)) drop-shadow(0 0 9px rgba(65,228,255,.9));
}
body:not(.classic-tree-mode) .family-attachment.branch-left{
  fill:#06202a;
  stroke:#66efff;
}
body:not(.classic-tree-mode) .family-attachment.branch-right{
  fill:#26092c;
  stroke:#f58dff;
  filter:drop-shadow(0 0 3px rgba(255,255,255,.88)) drop-shadow(0 0 9px rgba(239,72,255,.88));
}
body:not(.classic-tree-mode) .family-attachment-core{
  fill:#f4feff;
  stroke:none;
  filter:drop-shadow(0 0 4px rgba(255,255,255,.95));
}
body:not(.classic-tree-mode) .family-attachment-core.branch-left{fill:#bff9ff}
body:not(.classic-tree-mode) .family-attachment-core.branch-right{fill:#ffd2ff}
body.classic-tree-mode .family-attachment{
  fill:#ead7ad;
  stroke:#654724;
  stroke-width:1.5;
  filter:none;
}
body.classic-tree-mode .family-attachment-core{
  fill:#654724;
  stroke:none;
  filter:none;
}

/* Relationship color system: line meaning stays constant across every family view. */
body:not(.classic-tree-mode){
  --relationship-family:#36e6ff;
  --relationship-family-soft:#c7fbff;
  --relationship-marriage:#ff5fa2;
  --relationship-marriage-soft:#ffd0e3;
}
body:not(.classic-tree-mode) .edge:is(.family-trunk,.family-sibling-bar,.family-child-drop){
  stroke:var(--relationship-family);
}
body:not(.classic-tree-mode) .edge.family-couple{
  stroke:var(--relationship-marriage);
}
body:not(.classic-tree-mode) .edge.circuit-glow:is(.family-trunk,.family-sibling-bar,.family-child-drop){
  stroke:var(--relationship-family);
  filter:blur(2.2px) drop-shadow(0 0 9px rgba(54,230,255,.95));
}
body:not(.classic-tree-mode) .edge.circuit-glow.family-couple{
  stroke:var(--relationship-marriage);
  filter:blur(2.2px) drop-shadow(0 0 10px rgba(255,95,162,.95));
}
body:not(.classic-tree-mode) .edge.circuit-pulse:is(.family-trunk,.family-sibling-bar,.family-child-drop){
  stroke:var(--relationship-family-soft);
}
body:not(.classic-tree-mode) .edge.circuit-pulse.family-couple{
  stroke:var(--relationship-marriage-soft);
}
body:not(.classic-tree-mode) .family-junction{
  fill:#061b24;
  stroke:var(--relationship-family-soft);
  filter:drop-shadow(0 0 3px #fff) drop-shadow(0 0 9px rgba(54,230,255,.95));
}
body:not(.classic-tree-mode) .tree-guide i{
  background:var(--relationship-family);
  box-shadow:0 0 8px rgba(54,230,255,.9);
}
body:not(.classic-tree-mode) .tree-guide .partner-key i{
  background:var(--relationship-marriage);
  box-shadow:0 0 8px rgba(255,95,162,.9);
}



/* Anchor modern graph positions to portrait centers, never the text block below. */
body:not(.classic-tree-mode) .graph-node{
  height:100px;
  gap:0;
}
body:not(.classic-tree-mode) .graph-node.root-node{height:188px}
body:not(.classic-tree-mode) .graph-node.kinship-parent{height:140px}
body:not(.classic-tree-mode) .graph-node.kinship-spouse{height:122px}
body:not(.classic-tree-mode) .graph-node.kinship-sibling,
body:not(.classic-tree-mode) .graph-node.kinship-child{height:110px}
body:not(.classic-tree-mode) .graph-node.kinship-grandparent,
body:not(.classic-tree-mode) .graph-node.kinship-grandchild{height:94px}
body:not(.classic-tree-mode) .graph-node .node-copy{
  position:absolute;
  top:calc(100% + 13px);
  left:50%;
  width:190px;
  transform:translateX(-50%);
}
@media(max-width:650px){
  body:not(.classic-tree-mode) .graph-node{height:100px}
  body:not(.classic-tree-mode) .graph-node.root-node{height:150px}
  body:not(.classic-tree-mode) .graph-node.kinship-parent{height:118px}
  body:not(.classic-tree-mode) .graph-node.kinship-spouse{height:104px}
  body:not(.classic-tree-mode) .graph-node.kinship-sibling,
  body:not(.classic-tree-mode) .graph-node.kinship-child{height:96px}
  body:not(.classic-tree-mode) .graph-node.kinship-grandparent,
  body:not(.classic-tree-mode) .graph-node.kinship-grandchild{height:84px}
  body:not(.classic-tree-mode) .graph-node .node-copy{width:154px}
}
/* Person colors come from the person's recorded sex, never their branch position. */
body:not(.classic-tree-mode) .graph-node.person.sex-male{--person-color:#8fdcff;--person-bright:#effaff;--person-rgb:143,220,255;--person-deep:rgba(5,25,44,.97);color:#8fdcff}
body:not(.classic-tree-mode) .graph-node.person.sex-female{--person-color:#ff74c6;--person-bright:#ffe0f3;--person-rgb:255,116,198;--person-deep:rgba(43,7,30,.97);color:#ff74c6}
body:not(.classic-tree-mode) .graph-node.person.sex-neutral{--person-color:#bdc9d8;--person-bright:#f1f5fa;--person-rgb:189,201,216;--person-deep:rgba(17,23,31,.96)}
body:not(.classic-tree-mode) .graph-node.person .node-orb,
body:not(.classic-tree-mode) .graph-node.person.branch-right .node-orb,
body:not(.classic-tree-mode) .graph-node.person.root-node .node-orb{
  border-color:rgba(var(--person-rgb),.9);
  background:radial-gradient(circle at 38% 28%,rgba(var(--person-rgb),.26),var(--person-deep) 64%);
  box-shadow:0 0 0 7px rgba(var(--person-rgb),.065),0 0 30px rgba(var(--person-rgb),.32),inset 0 0 26px rgba(var(--person-rgb),.15);
}
body:not(.classic-tree-mode) .graph-node.person.root-node .node-orb{box-shadow:0 0 0 9px rgba(var(--person-rgb),.12),0 0 0 17px rgba(var(--person-rgb),.045),0 0 64px rgba(var(--person-rgb),.48),inset 0 0 42px rgba(var(--person-rgb),.22)}
body:not(.classic-tree-mode) .graph-node.person .node-orb::before,
body:not(.classic-tree-mode) .graph-node.person.branch-right .node-orb::before,
body:not(.classic-tree-mode) .graph-node.person.root-node .node-orb::before{border-color:rgba(var(--person-rgb),.42)}
body:not(.classic-tree-mode) .graph-node.person.sex-male .node-orb::after{border-color:rgba(143,220,255,.68);box-shadow:0 0 28px rgba(143,220,255,.28)}
body:not(.classic-tree-mode) .graph-node.person .node-initials,
body:not(.classic-tree-mode) .graph-node.person.branch-right .node-initials,
body:not(.classic-tree-mode) .graph-node.person.root-node .node-initials{color:var(--person-bright);text-shadow:0 0 15px rgba(var(--person-rgb),.78)}
body:not(.classic-tree-mode) .graph-node.person .node-copy b,
body:not(.classic-tree-mode) .graph-node.person.branch-right .node-copy b,
body:not(.classic-tree-mode) .graph-node.person.root-node .node-copy b{color:var(--person-bright);text-shadow:0 0 12px rgba(var(--person-rgb),.28)}
body:not(.classic-tree-mode) .graph-node.person .kinship-label,
body:not(.classic-tree-mode) .graph-node.person.branch-right .kinship-label,
body:not(.classic-tree-mode) .graph-node.person.root-node .kinship-label{border-color:rgba(var(--person-rgb),.38);background:rgba(var(--person-rgb),.075);color:var(--person-color)}

/* Relationship wiring stays neutral so a line never implies a person's sex. */
body:not(.classic-tree-mode) .edge:is(.family-couple,.family-trunk,.family-sibling-bar,.family-child-drop),
body:not(.classic-tree-mode) .edge:is(.family-couple,.family-trunk,.family-sibling-bar,.family-child-drop).branch-left,
body:not(.classic-tree-mode) .edge:is(.family-couple,.family-trunk,.family-sibling-bar,.family-child-drop).branch-right,
body:not(.classic-tree-mode) .edge:is(.family-couple,.family-trunk,.family-sibling-bar,.family-child-drop).branch-center{stroke:#b9f4ff;filter:drop-shadow(0 0 5px rgba(86,225,255,.7))}
body:not(.classic-tree-mode) .family-junction,
body:not(.classic-tree-mode) .family-junction.branch-left,
body:not(.classic-tree-mode) .family-junction.branch-right,
body:not(.classic-tree-mode) .family-attachment,
body:not(.classic-tree-mode) .family-attachment.branch-left,
body:not(.classic-tree-mode) .family-attachment.branch-right{fill:#071820;stroke:#c8fbff}
body:not(.classic-tree-mode) .family-attachment-core.branch-left,
body:not(.classic-tree-mode) .family-attachment-core.branch-right{fill:#f4feff}

/* Carry the same identity color into search, relationship cards, and detail portraits. */
.search-result.sex-male .mini-dot.person,.connection-item.sex-male>i{color:#8fdcff;border-color:rgba(143,220,255,.42);background:rgba(143,220,255,.12)}
.search-result.sex-female .mini-dot.person,.connection-item.sex-female>i{color:#ff82d5;border-color:rgba(255,130,213,.35);background:rgba(255,130,213,.1)}
.search-result.sex-neutral .mini-dot.person,.connection-item.sex-neutral>i{color:#bdc9d8;border-color:rgba(189,201,216,.3);background:rgba(189,201,216,.08)}
.detail-panel[data-sex="male"] .detail-portrait{border-color:rgba(143,220,255,.72);box-shadow:0 10px 30px rgba(0,0,0,.3),0 0 22px rgba(143,220,255,.22)}
.detail-panel[data-sex="female"] .detail-portrait{border-color:rgba(255,130,213,.62);box-shadow:0 10px 30px rgba(0,0,0,.3),0 0 22px rgba(255,130,213,.16)}
.detail-panel[data-sex="male"] .detail-portrait-fallback,.detail-panel[data-sex="male"] .detail-kicker{color:#8fdcff}
.detail-panel[data-sex="female"] .detail-portrait-fallback,.detail-panel[data-sex="female"] .detail-kicker{color:#ff82d5}


/* Selected person: refined modern focus treatment. */
body:not(.classic-tree-mode) .graph-node.focused{
  z-index:20;
  isolation:isolate;
  filter:none;
}
body:not(.classic-tree-mode) .graph-node.focused::after{
  content:"In focus";
  position:absolute;
  top:-32px;
  left:50%;
  z-index:4;
  transform:translateX(-50%);
  padding:6px 12px 6px 23px;
  border:1px solid rgba(var(--person-rgb),.46);
  border-radius:999px;
  background:
    radial-gradient(circle at 12px 50%,var(--person-color) 0 2px,transparent 3px),
    linear-gradient(180deg,rgba(15,26,38,.94),rgba(5,13,22,.96));
  box-shadow:0 8px 24px rgba(0,0,0,.38),inset 0 1px rgba(255,255,255,.06);
  color:var(--person-bright);
  font:750 9px/1 Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  letter-spacing:.14em;
  text-transform:uppercase;
  white-space:nowrap;
  pointer-events:none;
}
body:not(.classic-tree-mode) .graph-node.focused .node-orb{
  border-color:var(--person-bright);
  box-shadow:
    0 0 0 3px rgba(var(--person-rgb),.24),
    0 0 0 8px rgba(3,10,18,.9),
    0 0 0 10px rgba(var(--person-rgb),.2),
    0 0 44px rgba(var(--person-rgb),.4),
    inset 0 0 30px rgba(var(--person-rgb),.16);
}
body:not(.classic-tree-mode) .graph-node.focused .node-orb::before{
  inset:-19px;
  border:0;
  background:conic-gradient(
    from -18deg,
    transparent 0 8%,
    rgba(var(--person-rgb),.22) 8% 31%,
    transparent 31% 39%,
    rgba(var(--person-rgb),.52) 39% 68%,
    transparent 68% 86%,
    var(--person-bright) 86% 89%,
    transparent 89% 100%
  );
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 2px));
  mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 2px));
  box-shadow:none;
  animation:selected-person-orbit 14s linear infinite;
}
body:not(.classic-tree-mode) .graph-node.focused .node-orb::after{
  inset:-9px;
  border:1px solid rgba(var(--person-rgb),.74);
  box-shadow:0 0 22px rgba(var(--person-rgb),.2),inset 0 0 16px rgba(var(--person-rgb),.08);
}
body:not(.classic-tree-mode) .graph-node.focused .node-photo{
  filter:saturate(1.06) brightness(1.04);
}
body:not(.classic-tree-mode) .graph-node.focused .node-copy b{
  color:#fff;
  text-shadow:0 0 13px rgba(var(--person-rgb),.42),0 2px 12px rgba(0,0,0,.85);
}
body:not(.classic-tree-mode) .graph-node.focused .kinship-label{
  border-color:rgba(var(--person-rgb),.54);
  background:linear-gradient(180deg,rgba(var(--person-rgb),.13),rgba(var(--person-rgb),.06));
  color:var(--person-bright);
  box-shadow:inset 0 1px rgba(255,255,255,.05);
}
body:not(.classic-tree-mode) .graph-node.root-node .root-person-badge{
  right:-10px;
  top:10px;
  min-width:34px;
  height:24px;
  border:1px solid rgba(var(--person-rgb),.5);
  background:rgba(5,14,23,.9);
  color:var(--person-bright);
  box-shadow:0 8px 20px rgba(0,0,0,.38),0 0 16px rgba(var(--person-rgb),.14);
  backdrop-filter:blur(10px);
}
@keyframes selected-person-orbit{
  to{transform:rotate(360deg)}
}
@media (prefers-reduced-motion:reduce){
  body:not(.classic-tree-mode) .graph-node.focused .node-orb::before{animation:none}
}

/* Keep relationship artwork behind every profile icon. The SVG is a true
   background layer, while each portrait gets an opaque shield beneath its
   translucent tint so glowing wires cannot show through the face or initials. */
.world{isolation:isolate}
.edges{z-index:1}
.nodes{z-index:2;pointer-events:none}
.nodes .graph-node{pointer-events:auto}
body:not(.classic-tree-mode) .graph-node.person .node-orb{
  isolation:isolate;
  background-color:#07131d;
}
body:not(.classic-tree-mode) .graph-node.person .node-photo,
body:not(.classic-tree-mode) .graph-node.person .node-initials{
  z-index:2;
}
body:not(.classic-tree-mode) .graph-node.person .node-initials{
  position:relative;
}
/* Entire-tree semantic zoom: structure first, detail returns as the camera moves closer. */
.viewport[data-scope="overview"] .edge.circuit-glow,
.viewport[data-scope="overview"] .edge.circuit-pulse,
.viewport[data-scope="overview"] .family-attachment,
.viewport[data-scope="overview"] .family-attachment-core{
  display:none;
}
.viewport[data-scope="overview"] .edge.circuit-wire{
  stroke-width:1.35;
  opacity:.78;
  filter:none;
}
.viewport[data-scope="overview"] .family-attachment.attachment-junction{
  display:block;
  fill:#b9f4ff;
  stroke:none;
  filter:none;
}
body.classic-tree-mode .viewport[data-scope="overview"] .family-attachment.attachment-junction{
  fill:#8b602d;
}
.viewport[data-scope="overview"].tree-zoomed-far .family-attachment.attachment-junction{display:none}
.viewport[data-scope="overview"] .edge.crossing-separated{stroke-linecap:butt}
body:not(.classic-tree-mode) .viewport[data-scope="overview"] .edge.circuit-wire.family-couple{
  stroke:var(--relationship-marriage,#f1a5c7);
  stroke-width:1.5;
  filter:none;
}
.viewport[data-scope="overview"].tree-zoomed-distant .node-copy small,
.viewport[data-scope="overview"].tree-zoomed-distant .kinship-label,
.viewport[data-scope="overview"].tree-zoomed-far .node-copy{
  display:none;
}
.viewport[data-scope="overview"].tree-zoomed-far .graph-node .node-orb::before,
.viewport[data-scope="overview"].tree-zoomed-far .graph-node .node-orb::after{
  display:none;
}
.viewport[data-scope="overview"].tree-zoomed-far .edge.circuit-wire{
  stroke-width:.8;
  opacity:.56;
}

/* Entire-family chart: a descendant chart per lineage. Earliest couples sit at
   the top, children hang below their parents in birth order, married-in
   partners sit beside their spouse, and a marriage that joins two lineages is
   drawn as a dashed arch instead of a line through everyone between them. */
.viewport[data-scope="overview"] .world::before{display:none}
.viewport[data-scope="overview"] .graph-node.kinship-relative .kinship-label{display:none}
.viewport[data-scope="overview"] .graph-node.root-node .node-orb{width:136px;height:136px;border-width:3px}
.viewport[data-scope="overview"] .graph-node.root-node .node-orb::before{inset:-12px}
.viewport[data-scope="overview"] .graph-node.root-node .node-initials{font-size:26px}
.viewport[data-scope="overview"] .graph-node.root-node .node-copy b{font-size:15px}
.viewport[data-scope="overview"] .graph-node.kinship-parent .node-orb,
.viewport[data-scope="overview"] .graph-node.kinship-spouse .node-orb,
.viewport[data-scope="overview"] .graph-node.kinship-sibling .node-orb,
.viewport[data-scope="overview"] .graph-node.kinship-child .node-orb{width:108px;height:108px}
.viewport[data-scope="overview"] .graph-node.kinship-grandparent .node-orb,
.viewport[data-scope="overview"] .graph-node.kinship-grandchild .node-orb{width:100px;height:100px}
body:not(.classic-tree-mode) .viewport[data-scope="overview"] .graph-node.root-node{height:136px}
body:not(.classic-tree-mode) .viewport[data-scope="overview"] .graph-node.kinship-parent,
body:not(.classic-tree-mode) .viewport[data-scope="overview"] .graph-node.kinship-spouse,
body:not(.classic-tree-mode) .viewport[data-scope="overview"] .graph-node.kinship-sibling,
body:not(.classic-tree-mode) .viewport[data-scope="overview"] .graph-node.kinship-child{height:108px}
body:not(.classic-tree-mode) .viewport[data-scope="overview"] .graph-node.kinship-grandparent,
body:not(.classic-tree-mode) .viewport[data-scope="overview"] .graph-node.kinship-grandchild{height:100px}
.edge.cross-link{stroke-dasharray:6 8;stroke-linecap:round}
.viewport[data-scope="overview"] .edge.circuit-wire.cross-link{stroke-width:1.6;opacity:.82}
.viewport[data-scope="overview"].tree-zoomed-far .edge.circuit-wire.cross-link{stroke-width:1.2}

/* Adoption is a parent-child connection with a distinct line in both themes. */
body .edge.circuit-wire.family-child-drop.family-adoptive,
body.classic-tree-mode .edge.circuit-wire.family-child-drop.family-adoptive{stroke-dasharray:6 5}
body .edge.family-adoptive.circuit-glow,
body .edge.family-adoptive.circuit-pulse,
body.classic-tree-mode .edge.family-adoptive.circuit-glow{display:none}
.tree-guide .adoption-key i{background:repeating-linear-gradient(90deg,var(--relationship-family,#b9f4ff) 0 4px,transparent 4px 7px);box-shadow:none}
.tree-guide .cross-key{display:none}
.viewport[data-scope="overview"] .tree-guide .cross-key{display:flex}
body:not(.classic-tree-mode) .tree-guide .cross-key i{background:repeating-linear-gradient(90deg,var(--relationship-marriage,#ff5fa2) 0 4px,transparent 4px 7px);box-shadow:none}
body.classic-tree-mode .tree-guide .cross-key i{background:repeating-linear-gradient(90deg,#8b602d 0 4px,transparent 4px 7px)}
.lineage-label{
  position:absolute;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:3px;
  padding:9px 16px 8px;
  border:1px solid rgba(201,251,255,.34);
  border-radius:12px;
  background:rgba(6,17,28,.88);
  color:#dffcff;
  white-space:nowrap;
  text-align:center;
  box-shadow:0 8px 24px rgba(0,0,0,.4),0 0 18px rgba(54,230,255,.12);
  transform:translate(-50%,-100%) scale(clamp(1,calc(1 / var(--camera-scale,1)),14));
  transform-origin:50% 100%;
  pointer-events:none;
}
.lineage-label--nested{padding:6px 12px 5px;border-color:rgba(201,251,255,.2);background:rgba(6,17,28,.8);transform:translate(-50%,-100%) scale(clamp(1,calc(.8 / var(--camera-scale,1)),7))}
/* Far out only the standalone trees are named; the lines that married in are
   named once the camera is close enough for them to have room. */
.viewport.tree-zoomed-far .lineage-label--nested{display:none}
.lineage-label--nested b{font-size:12px}
.lineage-label b{font:800 14px/1.1 Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:.14em;text-transform:uppercase}
.lineage-label small{font:600 10px/1 Inter,ui-sans-serif,sans-serif;letter-spacing:.08em;color:rgba(214,231,242,.7);text-transform:uppercase}
body.classic-tree-mode .lineage-label{border:1px solid rgba(74,50,26,.6);border-radius:2px;background:rgba(225,202,159,.96);color:#302318;box-shadow:0 4px 14px rgba(55,34,14,.24),inset 0 0 0 3px rgba(255,244,215,.34)}
body.classic-tree-mode .lineage-label b{font-family:var(--classic-display-font);letter-spacing:.1em}
body.classic-tree-mode .lineage-label small{font-family:var(--classic-display-font);color:#6b5236}
@media(prefers-reduced-motion:reduce){.lineage-label{transition:none}}