@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=DM+Serif+Display&display=swap');
:root {
    --ink: #173537; --deep: #102f32; --muted: #697d7a; --soft: #f8f7f2;
    --cream: #efece4; --line: #d7ded7; --sage: #d1dfd6; --accent: #d9aa73;
    --side-width: 355px; --header-height: 82px;
}
* { box-sizing: border-box; }
html, body { width: 100%; min-width: 320px; min-height: 100%; margin: 0; }
body { font: 14px/1.5 'DM Sans', Arial, sans-serif; background: var(--soft); color: var(--ink); }
button, input { font: inherit; }
button { touch-action: manipulation; }
.app-header { height: var(--header-height); display:flex; align-items:center; justify-content: space-between; gap: 24px; padding: 0 30px; color: #f1eee3; background:var(--deep); position:relative; z-index:12; }
.brand-wrap { display:flex; align-items:center; gap:14px; }
.brand-mark { display:grid; place-items:center; width:41px; height:41px; border:1px solid #a5bab0; border-radius:50%; color:var(--accent); font-size:24px; }
.brand-eyebrow { display:block; color:#b2c5ba; font-size:10px; letter-spacing:2.2px; line-height: 15px; text-transform:uppercase; }
.brand-name { font-family:'DM Serif Display', Georgia, serif; font-size:27px; line-height:30px; }
.brand-period { color:var(--accent); }
.header-caption { color:#abc1b6; font-size:13px; font-style:italic; }
.header-actions { display:flex; align-items:center; gap:20px; }
.header-subtitle { font-size:11px; text-transform:uppercase; letter-spacing:1.6px; color:#d1ded6; }
.header-menu { display:none; background:#ffffff12; border:1px solid #ffffff4a; border-radius:20px; color:white; padding:7px 13px; }
.network-shell { height:calc(100dvh - var(--header-height)); min-height:530px; display:grid; grid-template-columns:minmax(0,1fr) var(--side-width); }
.network-explorer { position:relative; min-width:0; display:flex; flex-direction:column; background:radial-gradient(circle at 28% 30%,#f9faf6,#f2f3ed 70%); }
.network-toolbar { position:relative; flex:none; height:70px; display:flex; align-items:center; gap:9px; padding:0 24px; border-bottom:1px solid #dce2db; background:#fffffff0; z-index:9; }
.network-search { position:relative; display:flex; align-items:center; height:39px; background:#f5f7f3; border:1px solid #d9e2d9; border-radius:22px; min-width:160px; max-width:330px; flex:1; padding:0 14px; }
.network-search:focus-within { border-color:#648c7d; box-shadow:0 0 0 3px #a4c7b444; }
.network-search svg { flex:none; width:17px; height:17px; stroke:#607b71; stroke-width:1.8; fill:none; }
.network-search input { width:100%; border:0; outline:0; padding:6px 9px; background:transparent; color:var(--ink); font-size:12px; }
.network-search input::placeholder { color:#7e9187; }
.search-results { position:absolute; z-index:30; left:0; top:calc(100% + 9px); right:0; background:white; box-shadow:0 15px 35px #18372d2a; border:1px solid var(--line); border-radius:15px; padding:7px; max-height:320px; overflow-y:auto; }
.search-option { width:100%; display:flex; justify-content:space-between; align-items:center; text-align:left; padding:10px 12px; background:transparent; border:0; border-radius:10px; color:var(--ink); }
.search-option:hover,.search-option:focus { background:#eaf2ec; outline:0; }
.search-option small { color:var(--muted); }
.search-empty { padding:14px; font-size:12px; color:var(--muted); }
.toolbar-divider { height:24px; width:1px; background:#d7e0d7; margin:0 3px; }
.toolbar-btn { display:flex; align-items:center; justify-content:center; gap:5px; height:35px; min-width:35px; padding:0 7px; border:0; border-radius:9px; background:transparent; color:#46675d; font-size:20px; }
.toolbar-btn:hover { background:#edf3ed; }
.toolbar-btn:disabled { color:#b2c2b5; }
.toolbar-text-btn { font-size:16px; white-space:nowrap; }
.toolbar-text-btn span { font-size:11px; font-weight:700; }
.zoom-readout { font-size:11px; text-align:center; min-width:36px; color:var(--muted); }
.network-viewport { position:relative; flex:1; overflow:hidden; cursor:grab; touch-action:none; background-image:radial-gradient(#8daca035 0.8px,transparent .8px); background-size:20px 20px; }
.network-viewport.is-dragging { cursor:grabbing; }
.network-viewport:focus { outline:0; }
.network-stage { position:absolute; top:0; left:0; transform-origin:0 0; will-change:transform; }
.network-lines,.network-nodes,.generation-labels { position:absolute; top:0; left:0; overflow:visible; }
.network-lines { pointer-events:none; }
.network-nodes { z-index:3; }
.generation-labels { z-index:1; pointer-events:none; display:none; }
.generation-marker { position:absolute; color:#7c9891; min-width:140px; font-size:10px; text-align:right; text-transform:uppercase; letter-spacing:2px; border-bottom:1px solid #bfd0c1; padding-bottom:9px; }
.generation-marker strong { font-size:13px; display:block; color:#5d7d70; font-weight:500; font-family:'DM Serif Display',Georgia,serif; letter-spacing:0; text-transform:none; }
.person-card { position:absolute; width:200px; height:135px; background:#fffffffa; border:1px solid #dce3dc; border-radius:14px; box-shadow:0 7px 21px #26463d12; transition:border-color 150ms ease,box-shadow 150ms ease; overflow:hidden; }
.person-card:hover { border-color:#93af9d; box-shadow:0 10px 30px #214b392a; }
.person-card.is-center { border:2px solid #668d7d; box-shadow:0 0 0 5px #aac5b051,0 12px 28px #214b3928; }
.person-card.is-center:before { position:absolute; top:0; left:16px; right:16px; height:3px; background:#d6a76c; content:''; }
.person-card-hit { display:flex; width:100%; height:100%; padding:15px 12px 12px; flex-direction:column; align-items:center; background:transparent; border:0; text-align:center; color:var(--ink); }
.person-card-hit:focus-visible { outline:3px solid #94c0a5; outline-offset:-3px; }
.person-avatar { height:48px; width:48px; object-fit:cover; border-radius:50%; border:2px solid #e9ede7; background:#e1ebe4; display:grid; place-items:center; color:#5d7d70; font-family:'DM Serif Display', Georgia, serif; font-size:18px; flex:none; }
.person-card-name { margin-top:7px; width:100%; font-family:'DM Serif Display',Georgia,serif; font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.person-card-years { margin-top:0; font-size:10px; color:var(--muted); letter-spacing:.4px; }
.person-card-info { position:absolute; right:9px; top:8px; border:1px solid #d7e3dc; background:#f8faf7; color:#64897a; border-radius:50%; width:22px; height:22px; font-size:11px; font-weight:700; }
.person-card-info:hover { background:#d8e8dd; }
.edge { fill:none; stroke:#96b4a4; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; opacity:.84; }
.edge.partner { stroke:#c29364; stroke-width:2; stroke-dasharray:7 5; }
.edge.adoptive { stroke-dasharray:4 5; }
.network-state { position:absolute; z-index:6; left:50%; top:50%; transform:translate(-50%,-50%); color:#70867c; padding:14px 19px; border-radius:30px; background:#ffffffea; border:1px solid #d7e2da; box-shadow:0 12px 35px #153d2e14; font-size:13px; }
.network-state[hidden] { display:none; }
.network-footer { height:48px; flex:none; display:flex; justify-content:space-between; align-items:center; gap:16px; padding:0 25px; background:#fffffff0; border-top:1px solid #dce2db; color:var(--muted); font-size:10px; }
.network-legend { display:flex; flex-wrap:wrap; gap:16px; }
.network-legend span { display:flex; align-items:center; gap:7px; }
.legend-line { width:20px; height:0; border-top:2px solid #96b4a4; }
.legend-line.partner { border-top-color:#c29364; border-top-style:dashed; }
.legend-line.adoptive { border-top-style:dashed; }
.network-count { white-space:nowrap; }
.profile-panel { background:#fefdf9; border-left:1px solid #e0e4dc; display:flex; flex-direction:column; overflow:hidden; }
.profile-topline { flex:none; height:71px; display:flex; justify-content:space-between; align-items:center; padding:0 27px; border-bottom:1px solid #e5e9e1; }
.profile-kicker { text-transform:uppercase; color:#6c8c7b; font-size:10px; letter-spacing:2.2px; font-weight:700; }
.profile-close { background:transparent; border:0; color:#7f9888; font-size:23px; display:none; }
.profile-content { flex:1; overflow-y:auto; padding:24px 27px 35px; scrollbar-width:thin; }
.profile-hero { display:flex; align-items:center; gap:17px; margin-bottom:24px; }
.profile-avatar { flex:none; width:91px; height:91px; object-fit:cover; border-radius:50%; border:4px solid #e4eee5; background:#e0e9e2; color:#5c7b6e; display:grid; place-items:center; font:34px 'DM Serif Display',Georgia,serif; }
.profile-name { font:28px/1.1 'DM Serif Display', Georgia,serif; color:var(--deep); margin:0 0 10px; }
.profile-life { font-size:12px; color:#748b7d; }
.profile-section { padding:22px 0; border-top:1px solid #e4e9e2; }
.profile-section h2 { font-size:10px; text-transform:uppercase; font-weight:700; letter-spacing:2.3px; color:#648579; margin:0 0 14px; }
.profile-biography { color:#3a5450; font-size:13px; line-height:1.8; overflow-wrap:anywhere; }
.profile-biography p { margin-bottom:12px; }
.profile-biography a { color:#346f65; }
.profile-gallery { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.gallery-item { width:100%; height:115px; border:0; border-radius:9px; background:#dde7db; padding:0; overflow:hidden; }
.gallery-item img { display:block; height:100%; width:100%; object-fit:cover; transition:transform 160ms; }
.gallery-item:hover img { transform:scale(1.07); }
.profile-empty { color:#8aa094; font-size:12px; font-style:italic; }
.profile-bottom { display:flex; align-items:center; justify-content:space-between; border-top:1px solid #e3e8df; padding:18px 27px; font-size:11px; color:#9aada0; }
.profile-bottom-mark { font-size:21px; color:#b6c6b7; }
.profile-placeholder { display:grid; justify-items:center; align-content:center; min-height:290px; text-align:center; color:#8da395; font-size:13px; }
.placeholder-ring { font-size:62px; color:#bfd2c1; }
.gallery-dialog { border:0; padding:16px; border-radius:15px; max-width:min(900px,95vw); max-height:95vh; background:#fefdf9; box-shadow:0 25px 80px #0004; }
.gallery-dialog::backdrop { background:#0e2929d9; }
.gallery-dialog img { max-width:100%; max-height:75vh; display:block; margin:auto; border-radius:6px; }
.gallery-dismiss { display:block; margin-left:auto; margin-bottom:8px; border:0; font-size:26px; background:transparent; }
#gallery-caption { font-size:12px; color:#506b60; margin-top:11px; text-align:center; }
@media (max-width:1050px) { :root { --side-width:310px; } .header-caption { display:none; } .toolbar-text-btn span { display:none; } }
@media (max-width:760px) {
    :root { --header-height:67px; }
    .app-header { padding:0 16px; } .brand-name { font-size:24px; } .brand-mark { width:35px; height:35px; }
    .header-subtitle { display:none; } .header-menu { display:block; }
    .network-shell { display:block; min-height:0; }
    .network-explorer { height:100%; }
    .profile-panel { position:fixed; top:var(--header-height); right:0; width:min(360px,95vw); height:calc(100dvh - var(--header-height)); transform:translateX(110%); transition:transform .2s; z-index:15; box-shadow:-14px 0 40px #183a3033; }
    .profile-panel.is-open { transform:translateX(0); }
    .profile-close { display:block; }
    .network-toolbar { padding:0 9px; gap:4px; height:61px; }
    .network-search { min-width:90px; padding:0 8px; } .network-legend span { gap:5px; } .network-legend { gap:9px; }
    .network-footer { padding:0 10px; font-size:9px; height:51px; } .network-count { display:none; }
    .toolbar-divider { margin:0 1px; } .toolbar-btn { min-width:30px; font-size:17px; padding:0 3px; }
    .zoom-readout { display:none; }
}