#living-tree{
  --grove:#233f35;
  --gold:#e3a43a;
  --blossom:#f0b3bd;
  --seed:#f3e8c8;
  --sky-top:#c9d8cc;
  --sky-mid:#e2e8da;
  --sky-bottom:#f0efe2;
  --ground:#6c8650;
  --fog:#e4e8da;
  --hemi-sky:#f4f1e2;
  --hemi-ground:#4a5a3a;
  --ink:#1d2a22;
  --ink-soft:#4f5d54;
  --panel:#fbfaf2;
  --line:#d6dacb;
  --chip:#edf0e2;
  --btn:rgba(251,250,242,.88);
  --label:rgba(251,250,242,.86);
  --label-ink:#1d2a22;
  --serif:"Fraunces", Georgia, "Times New Roman", serif;
  --sans:DM, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){#living-tree:not([data-theme="light"]){
    --sky-top:#0c1712; --sky-mid:#14241c; --sky-bottom:#1d3127;
    --ground:#16261a; --fog:#18291f; --hemi-sky:#8aa392; --hemi-ground:#1a2a1e;
    --ink:#eceee2; --ink-soft:#b2bdb2; --panel:#15231c; --line:#2d4136; --chip:#1f3128;
    --btn:rgba(21,35,28,.88); --label:rgba(17,29,23,.82); --label-ink:#eceee2;
  }

}
#living-tree[data-theme="dark"]{
  --sky-top:#0c1712; --sky-mid:#14241c; --sky-bottom:#1d3127;
  --ground:#16261a; --fog:#18291f; --hemi-sky:#8aa392; --hemi-ground:#1a2a1e;
  --ink:#eceee2; --ink-soft:#b2bdb2; --panel:#15231c; --line:#2d4136; --chip:#1f3128;
  --btn:rgba(21,35,28,.88); --label:rgba(17,29,23,.82); --label-ink:#eceee2;
}
#living-tree *,#living-tree *::before,#living-tree *::after{box-sizing:inherit}
#living-tree{scroll-padding-top:env(safe-area-inset-top,0px)}
#living-tree{margin:0;background:var(--sky-bottom);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
#living-tree .wrap{max-width:1280px;margin:0 auto;padding:clamp(20px,4vw,48px) clamp(14px,3vw,32px) 40px}
#living-tree .intro{max-width:44rem;margin-bottom:22px}
#living-tree .intro h1{font-family:var(--serif);font-weight:600;font-size:clamp(2rem,5vw,3.4rem);line-height:1.04;letter-spacing:-.01em;margin:0 0 10px}
#living-tree .intro p{margin:0;color:var(--ink-soft);font-size:1.05rem;max-width:38rem}
#living-tree .viewer{display:grid;grid-template-columns:minmax(0,1fr) 340px;border:1px solid var(--line);border-radius:22px;overflow:hidden;background:var(--panel)}
#living-tree .stage{position:relative;height:min(80vh,780px);min-height:520px;background:linear-gradient(180deg,var(--sky-top) 0%,var(--sky-mid) 55%,var(--sky-bottom) 100%);overflow:hidden;touch-action:none}
#living-tree .stage canvas{display:block;width:100%;height:100%;outline:none;cursor:grab}
#living-tree .stage canvas:active{cursor:grabbing}
#living-tree .stage canvas:focus-visible{box-shadow:inset 0 0 0 3px var(--gold)}
#living-tree .labels{position:absolute;inset:0;pointer-events:none;overflow:hidden}
#living-tree .lbl{position:absolute;left:0;top:0;pointer-events:auto;border:0;cursor:pointer;white-space:nowrap;font-family:var(--sans);font-size:11.5px;font-weight:500;color:var(--label-ink);background:var(--label);padding:3px 8px;border-radius:999px;transform-origin:0 50%;will-change:transform,opacity;transition:background .2s,color .2s;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
#living-tree .lbl.direct{font-family:var(--serif);font-size:13.5px;font-weight:600;padding:4px 11px;box-shadow:inset 3px 0 0 var(--gold)}
#living-tree .lbl.spouse{box-shadow:inset 3px 0 0 var(--blossom)}
#living-tree .lbl.family{box-shadow:inset 3px 0 0 var(--seed)}
#living-tree .lbl:hover,#living-tree .lbl.hover{background:var(--grove);color:#f3efdf}
#living-tree .lbl.selected{background:var(--gold);color:#1d2a22}
#living-tree .lbl:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
#living-tree .root-note{position:absolute;pointer-events:none;font-family:var(--serif);font-style:italic;font-size:12.5px;color:var(--ink-soft);white-space:nowrap}
#living-tree .bar{position:absolute;left:14px;right:14px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;pointer-events:none}
#living-tree .bar>*{pointer-events:auto}
#living-tree .bar.top{top:14px;justify-content:space-between}
#living-tree .bar.bottom{bottom:14px}
#living-tree .finder select,#living-tree .seg button,#living-tree .tool{font:500 14px/1 var(--sans);color:var(--ink);background:var(--btn);border:1px solid var(--line);border-radius:12px;height:40px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
#living-tree .finder select{padding:0 34px 0 12px;max-width:min(260px,58vw);appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink-soft) 50%),linear-gradient(135deg,var(--ink-soft) 50%,transparent 50%);background-position:calc(100% - 17px) 17px,calc(100% - 12px) 17px;background-size:5px 5px;background-repeat:no-repeat;cursor:pointer}
#living-tree .seg{display:inline-flex;gap:0}
#living-tree .seg button{padding:0 14px;cursor:pointer;border-radius:0}
#living-tree .seg button:first-child{border-radius:12px 0 0 12px}
#living-tree .seg button:last-child{border-radius:0 12px 12px 0;border-left:0}
#living-tree .seg button[aria-pressed="true"]{background:var(--grove);color:#f3efdf;border-color:var(--grove)}
#living-tree .tool{min-width:40px;padding:0 12px;cursor:pointer;font-size:16px}
#living-tree .tool.text{font-size:14px}
#living-tree .finder select:focus-visible,#living-tree .seg button:focus-visible,#living-tree .tool:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
#living-tree .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
#living-tree .legend{position:absolute;right:14px;bottom:14px;display:flex;flex-direction:column;gap:5px;font-size:12px;color:var(--ink-soft);background:var(--btn);border:1px solid var(--line);border-radius:12px;padding:9px 12px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
#living-tree .legend span{display:flex;align-items:center;gap:8px}
#living-tree .sw{width:12px;height:12px;border-radius:50%;flex:none}
#living-tree .sw.ring{border:3px solid var(--gold);background:transparent}
#living-tree .sw.bl{background:var(--blossom)}
#living-tree .sw.sd{background:var(--seed);border:1px solid rgba(0,0,0,.15)}
#living-tree .sw.dot{width:16px;height:4px;border-radius:0;background:radial-gradient(circle,var(--gold) 1.4px,transparent 1.6px) 0 0/5px 4px repeat-x}
#living-tree .panel{border-left:1px solid var(--line);padding:26px 24px;display:flex;flex-direction:column;gap:12px;overflow:auto;max-height:min(80vh,780px)}
#living-tree .panel .gen{margin:0;font-size:13px;color:var(--ink-soft)}
#living-tree .panel h2{font-family:var(--serif);font-weight:600;font-size:1.75rem;line-height:1.12;margin:0}
#living-tree .panel .dates{margin:0;font-family:var(--serif);font-size:1.05rem;color:var(--ink-soft)}
#living-tree .badge{align-self:flex-start;font-size:12.5px;font-weight:600;padding:4px 10px;border-radius:999px;background:var(--chip);color:var(--ink)}
#living-tree .panel .summary{margin:0;line-height:1.62}
#living-tree .panel h3{font-size:13px;font-weight:600;color:var(--ink-soft);margin:8px 0 0}
#living-tree .conn{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
#living-tree .conn button{width:100%;text-align:left;font:14px/1.35 var(--sans);color:var(--ink);background:var(--chip);border:1px solid transparent;border-radius:10px;padding:8px 11px;cursor:pointer}
#living-tree .conn button:hover{border-color:var(--grove)}
#living-tree .conn button:focus-visible{outline:2px solid var(--gold);outline-offset:1px}
#living-tree .conn .rel{color:var(--ink-soft);font-size:12.5px;display:block}
#living-tree .panel a{color:var(--ink);text-underline-offset:3px;font-size:14px}
#living-tree .hint{margin:12px 2px 0;font-size:13px;color:var(--ink-soft)}
@media (max-width:880px){#living-tree .viewer{grid-template-columns:1fr}
#living-tree .stage{height:68vh;min-height:440px}
#living-tree .panel{border-left:0;border-top:1px solid var(--line);max-height:none}
#living-tree .legend{right:auto;left:14px;bottom:64px;flex-direction:row;flex-wrap:wrap;gap:4px 12px;max-width:calc(100% - 28px)}

}
@media (prefers-reduced-motion: reduce){#living-tree .lbl{transition:none}
 }


#living-tree{max-width:1440px;margin:0 auto;padding:0 24px;color:var(--ink);font-family:var(--sans)}
#living-tree .viewer{isolation:isolate}#living-tree .stage{min-width:0;height:660px;min-height:560px}
#living-tree .panel{max-height:660px;min-width:0}#living-tree .panel a{overflow-wrap:anywhere}#living-tree .panel h2{letter-spacing:-.02em}
#living-tree .bar,#living-tree .legend{z-index:12}#living-tree .labels{z-index:2}#living-tree .bar.top{gap:10px}
#living-tree .bar.bottom{right:auto;max-width:calc(100% - 28px)}#living-tree .legend{bottom:70px}
#living-tree button,#living-tree select{min-height:44px}#living-tree .lbl{min-height:28px;max-width:230px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#living-tree .hint{margin:12px 2px 0}#living-tree .viewer-status{font-size:13px;min-height:20px;margin:8px 2px 0;color:var(--ink-soft)}
#living-tree .panel .source-links{margin:0;padding-left:18px;font-size:13px}#living-tree .panel .source-links li{margin:6px 0}
#living-tree .panel .conn button{line-height:1.45}#living-tree .bar.top .seg{margin-left:auto}
#living-tree.is-fallback .stage{height:210px;min-height:210px}#living-tree.is-fallback canvas,#living-tree.is-fallback .labels,#living-tree.is-fallback .bar,#living-tree.is-fallback .legend{display:none}
#living-tree.is-fallback .stage:after{content:'Explore every person in the directory below.';position:absolute;inset:60px 25px auto;text-align:center;font:22px var(--serif)}
@media(max-width:880px){#living-tree{padding:0 12px}#living-tree .stage{height:620px;min-height:560px}#living-tree .panel{max-height:none}#living-tree .legend{left:14px;right:14px;bottom:112px;max-width:none}#living-tree .bar.bottom{gap:6px;bottom:14px}#living-tree .finder{width:100%}#living-tree .finder select{max-width:100%;width:100%}#living-tree .bar.top .seg{margin-left:0}#living-tree .lbl{max-width:195px}#living-tree .hint{font-size:13px;line-height:1.6}}
@media print{#living-tree{display:none}}