:root{color-scheme:light;--ink:#222824;--muted:#515d54;--line:#dce2da;--green:#254c3a;--paper:#f5f7f2;font:16px/1.5 system-ui,sans-serif}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink)}
button,input,select{font:inherit;color:inherit}
button,select{cursor:pointer}
a{color:var(--green);text-underline-offset:.22em}
:focus-visible{outline:3px solid #276b94;outline-offset:3px}
.wrap{max-width:1140px;width:calc(100% - 2.5rem);margin-inline:auto}
.bar{background:#fff;border-bottom:1px solid var(--line)}
.bar-inner,.bar nav,.filters,.views,.tree-head,.dialog-top{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.bar-inner,.tree-head,.dialog-top{justify-content:space-between}
.bar-inner{padding:.85rem 0}
.bar nav{gap:.35rem}
.bar nav a{padding:.35rem .65rem;border-radius:.4rem;text-decoration:none}
.bar nav a[aria-current]{background:#e6eee5;font-weight:700}
.brand{font-family:Georgia,serif;font-size:1.25rem;font-weight:700;text-decoration:none}
.intro{padding:2.6rem 0 1.4rem}
.eyebrow,.label{font-size:.76rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--green)}
h1,h2{font-family:Georgia,serif;line-height:1.13;margin:.3rem 0 .55rem}
h1{font-size:clamp(2.35rem,6vw,4rem)}
h2{font-size:1.85rem}
p{margin:.35rem 0 .8rem}
.intro p:last-child,.tree-head p,.footer{color:var(--muted)}
.controls{background:white;border:1px solid var(--line);border-radius:.65rem;padding:1rem;margin-bottom:1.55rem}
.views{gap:.45rem;margin-bottom:1rem}
.views button,#clear,.close{border:1px solid var(--line);background:white;border-radius:.4rem;padding:.46rem .7rem}
.views button[aria-pressed=true]{background:var(--green);color:white;border-color:var(--green)}
.filters{align-items:end}
.filters label{display:grid;gap:.28rem;font-size:.87rem;font-weight:650}
.filters label:first-child{flex:1 1 13rem}
.filters label:nth-child(2){flex:0 1 19rem}
input,select{width:100%;min-width:0;background:#fff;border:1px solid #a7b4a7;border-radius:.35rem;padding:.47rem .58rem}
#count{font-size:.87rem;white-space:nowrap}
.legend{list-style:none;display:flex;gap:.55rem 1rem;flex-wrap:wrap;margin:0 0 1rem;padding:0;font-size:.83rem}
.legend li{display:flex;gap:.35rem;align-items:center}
.legend i{width:1rem;height:.2rem;background:var(--accent)}
#tree{background:white;border:1px solid var(--line);border-radius:.65rem;padding:1.3rem;min-height:10rem}
.root{display:flex;justify-content:center;margin:0 0 1.4rem}
.person{border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:.4rem;background:#fff;padding:.55rem .7rem;text-align:left;line-height:1.2;overflow-wrap:anywhere}
.person:hover{background:#f2f6ef;border-color:var(--accent)}
.person strong,.person small{display:block}
.person small{font-size:.76rem;margin-top:.34rem;color:var(--muted);line-height:1.26}
.size-4{font-size:1.24rem;min-height:5rem;flex-basis:14rem}
.size-3{font-size:1.09rem;min-height:4.25rem;flex-basis:12.5rem}
.size-2{font-size:.96rem;min-height:3.5rem;flex-basis:11rem}
.size-1{font-size:.85rem;min-height:3rem;flex-basis:9rem}
.root .person{background:var(--green);color:white;text-align:center;padding:.6rem 1.4rem}
.root .person small{color:#edf3ed}
.branches{position:relative;border-top:2px solid #a4b4a6;padding-top:.6rem}
.branches::before{content:"";position:absolute;height:1.4rem;border-left:2px solid #a4b4a6;top:-1.4rem;left:50%}
.branch{margin:.85rem 0 1.25rem;border-left:3px solid var(--accent);padding-left:1rem}
.branch h3{margin:0 0 .55rem;color:var(--accent);font-size:.94rem}
.leaves{display:flex;align-items:center;flex-wrap:wrap;gap:.62rem 1.45rem}
.leaves .person{position:relative;flex-grow:0;flex-shrink:1;max-width:100%}
.leaves .person::before{content:"➜";position:absolute;left:-1.22rem;top:50%;transform:translateY(-50%);color:var(--accent);font-size:1rem}
.footer{border-top:1px solid var(--line);margin-top:1.6rem;padding:1rem 0;font-size:.9rem}
dialog{max-width:min(37rem,calc(100% - 2rem));max-height:calc(100% - 2rem);width:100%;overflow:auto;border:1px solid var(--line);border-radius:.65rem;padding:1.35rem;color:var(--ink)}
dialog::backdrop{background:#17271dc2}
dialog .label{margin:1.15rem 0 .22rem}
#references{padding-left:1.15rem}
#references li{margin-bottom:.32rem}
.close{font-size:1.35rem;line-height:1}
@media(max-width:540px){.wrap{width:calc(100% - 1.25rem)}.bar-inner{gap:.25rem}.intro{padding-top:1.5rem}.tree-head{gap:0}#tree{padding:.9rem}.leaves{gap:.5rem 1.2rem}.leaves .person{flex-grow:1}}
.branches{border-left:2px solid #a4b4a6;border-radius:.3rem 0 0 .3rem;margin-left:.15rem;padding-left:1.45rem}
.branch{position:relative}
.branch::before{content:"";position:absolute;top:.73em;right:100%;width:1.65rem;border-top:2px solid var(--accent)}
@media(max-width:540px){.branches{padding-left:.6rem}.branch::before{width:.8rem}}