:root{--bg:#f6f1e7;--ink:#2b2620;--muted:#7a6f60;--card:#fffdf8;--line:#b9a98f;--confirmed:#2f7d4f;--family:#b07a2a;--shejire:#6b5bb5;--probable:#8a8a8a;--gap:18px}@media (prefers-color-scheme:dark){:root{--bg:#17140f;--ink:#eee6d8;--muted:#a79a86;--card:#221e17;--line:#5e533f}}*{box-sizing:border-box}body,html{margin:0;height:100%}body{background:var(--bg);color:var(--ink);font:15px/1.5 Georgia,Times New Roman,serif}main{height:100vh;height:100dvh;display:flex;flex-direction:column}.top{padding:20px 16px 8px;max-width:900px}.top h1{margin:0 0 4px;font-size:28px}.top p{margin:0}.legend,.top p{color:var(--muted)}.legend{display:flex;flex-wrap:wrap;gap:14px;padding:0;margin:10px 0 0;list-style:none;font:13px system-ui,sans-serif}.legend li:before{content:"";display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;background:var(--c)}.s-confirmed{--c:var(--confirmed)}.s-family{--c:var(--family)}.s-shejire{--c:var(--shejire)}.s-probable{--c:var(--probable)}.scroller{flex:1 1;min-height:0;overflow:auto;padding:24px 16px 48px}.tree{justify-content:center;width:max-content;min-width:100%}.node,.tree{display:flex}.node{flex-direction:column;align-items:center}.parents{display:flex;align-items:flex-end}.branch{position:relative;display:flex;flex-direction:column;align-items:center;padding:0 calc(var(--gap) / 2) 36px}.branch:after{left:50%;height:18px;border-left:2px solid var(--line);transform-origin:bottom;animation:grow-y .4s ease-out both;animation-delay:calc(var(--d, 0) * .22s + .12s)}.branch:after,.branch:before{content:"";position:absolute;bottom:18px}.branch:before{left:0;right:0;border-top:2px solid var(--line);animation:grow-x .4s ease-out both;animation-delay:calc(var(--d, 0) * .22s + 60ms)}.branch:first-child:before{left:50%}.branch:last-child:before{right:50%}.parents.single .branch:before{display:none}.parents.single .branch:after{height:36px;bottom:0}.card{position:relative;width:148px;padding:10px 10px 9px;text-align:center;cursor:pointer;background:var(--card);color:inherit;font:inherit;border:1px solid var(--line);border-top:4px solid var(--c);border-radius:10px;box-shadow:0 1px 2px rgb(0 0 0/.06);display:flex;flex-direction:column;align-items:center;gap:2px;animation:pop .55s cubic-bezier(.2,.9,.3,1.25) both;animation-delay:calc(var(--d) * .22s);transition:transform .2s,box-shadow .2s}.card.has-parents:before{content:"";position:absolute;top:-18px;left:50%;height:18px;border-left:2px solid var(--line)}.parents.single+.card.has-parents:before{display:none}.card:focus-visible,.card:hover{transform:translateY(-3px);box-shadow:0 8px 20px rgb(0 0 0/.12);outline:none}.card.picked{box-shadow:0 0 0 3px var(--c)}.card img{width:56px;height:56px;object-fit:cover;border-radius:50%;margin-bottom:4px;filter:sepia(.25)}.role{font:11px/1.3 system-ui,sans-serif;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}.name{font-weight:600;font-size:14px;line-height:1.25}.years{font:12px system-ui,sans-serif;color:var(--muted)}.panel{position:fixed;top:0;right:0;bottom:0;width:min(380px,100vw);overflow-y:auto;background:var(--card);border-left:1px solid var(--line);box-shadow:-10px 0 30px rgb(0 0 0/.15);transform:translateX(105%);transition:transform .35s cubic-bezier(.2,.8,.2,1)}.panel.open{transform:none}.panel-body{padding:24px 20px;animation:fade .4s ease-out both}.panel-body img{width:100%;border-radius:8px;margin-bottom:12px;filter:sepia(.2)}.panel h2{margin:2px 0 4px;font-size:22px}.panel ul{padding-left:18px}.panel li{margin:4px 0}.badge{display:inline-block;margin:6px 0;padding:2px 10px;border-radius:99px;font:12px system-ui,sans-serif;color:#fff;background:var(--c)}.sib{color:var(--muted);font-style:italic}.close{position:absolute;top:14px;right:14px;z-index:1;width:36px;height:36px;border:0;border-radius:50%;background:var(--card);color:var(--ink);font-size:24px;line-height:1;cursor:pointer;box-shadow:0 1px 4px rgb(0 0 0/.3)}@keyframes pop{0%{opacity:0;transform:translateY(16px) scale(.85)}to{opacity:1;transform:none}}@keyframes grow-y{0%{transform:scaleY(0)}to{transform:none}}@keyframes grow-x{0%{opacity:0}to{opacity:1}}@keyframes fade{0%{opacity:0;transform:translateX(12px)}to{opacity:1;transform:none}}@media (prefers-reduced-motion:reduce){*,:after,:before{animation:none!important;transition:none!important}}@media (max-width:600px){.card{width:124px;padding:8px 6px}.name{font-size:13px}}