:root{color-scheme:dark;--bg:#14181a;--ink:#ede5d5;--muted:#b8b4a9;--gold:#d7b36b;--line:#47453e;--parent:#8db8b4}
*{box-sizing:border-box}[hidden]{display:none!important}
body{margin:0;background:radial-gradient(ellipse at 35% 10%,#29302e 0,transparent 55%),var(--bg);color:var(--ink);font-family:Georgia,"Yu Mincho","Hiragino Mincho ProN",serif;line-height:1.85}
a{color:var(--gold);text-underline-offset:5px}button{font:inherit;color:inherit;cursor:pointer}button,a{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible,section:focus-visible,.graph-viewport:focus-visible{outline:2px solid #f5d18b;outline-offset:4px}button:disabled{opacity:.4;cursor:default}
.page-header{max-width:1460px;margin:auto;padding:25px 5%;display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:.9rem}.page-header a{text-decoration:none}.page-header button{border:1px solid #79705c;background:transparent;padding:5px 15px;border-radius:3px;min-height:44px}
main{max-width:1460px;margin:auto;padding:30px 5% 65px}.heading{max-width:760px;margin:0 0 35px}.eyebrow{font:.7rem/1.8 Georgia,serif;letter-spacing:.18em;color:var(--gold);margin:0 0 16px}.eyebrow span{color:var(--muted)}h1{font-size:clamp(2.1rem,4vw,3.6rem);font-weight:400;letter-spacing:.09em;margin:10px 0 18px}h2,h3{font-weight:400}h2{font-size:1.35rem}h3{font-size:1rem}.lead{font-size:1.2rem;letter-spacing:.08em}.scope,.graph-note,.list-help,.directory p,.view-note{font-size:.86rem;color:var(--muted)}
.workspace{border:1px solid #69604c;border-top:3px double #aa915c;background:linear-gradient(120deg,#242a2780,#14181a80);box-shadow:0 15px 70px #0003}.graph-panel{min-width:0;padding:25px 25px 18px}.graph-panel h2{margin:0 0 8px}#graph-help{font-size:.9rem;color:var(--muted);margin:0;max-width:900px}.graph-controls{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:20px 0 12px}.graph-controls button{min-width:44px;min-height:44px;border:1px solid #7d6b49;background:#1d2525;padding:5px 13px}.graph-controls button:hover:not(:disabled){background:#35352a}.graph-controls output{font: .85rem Georgia,serif;min-width:48px;text-align:center;color:var(--muted)}
.graph-viewport{overflow:auto;position:relative;height:min(78svh,780px);min-height:360px;max-width:100%;border:1px solid #6b624d;background:radial-gradient(ellipse at 50% 25%,#38382b40,transparent 65%),#131a1b;overscroll-behavior-x:contain;scrollbar-color:#8c7851 #1d2525;scrollbar-width:auto;isolation:isolate}.graph-viewport:focus{outline-offset:2px}#graph-sheet{position:relative;margin:0 auto}.graph{position:absolute;top:0;left:0;transform-origin:0 0;isolation:isolate}#threads{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}#threads path{fill:none;stroke-linecap:square;stroke-linejoin:round;stroke-width:1.6;stroke:var(--parent)}#base-threads path{opacity:.8}#threads .spouse{stroke:var(--gold);stroke-width:2.5}#focus-threads path{stroke:#a8d5cb;stroke-width:2.5;opacity:.7}#focus-threads .spouse{stroke:#f0c873}#light-threads .energy{stroke:#fff3c4;stroke-width:4;stroke-linecap:round;stroke-dasharray:8 100;stroke-dashoffset:8;animation:trace-light 1200ms ease-in-out 1 both;pointer-events:none}@keyframes trace-light{from{stroke-dashoffset:8}to{stroke-dashoffset:-100}}
.chart-label{position:absolute;margin:0;padding:0 7px;font-size:14px;line-height:26px;letter-spacing:.08em;color:#c9c3b2;background:#151c1de8;pointer-events:none;white-space:nowrap}.generation-one{top:20px;left:30px;color:#c5ac78}.generation-two{top:320px;left:30px;color:#c5ac78}.upper-union{top:148px;left:50%;transform:translateX(-50%);font-size:13px;color:var(--gold)}.lower-union{top:720px;left:65%;transform:translateX(-50%);color:var(--gold)}.parent-caption{top:300px;left:calc(50% + 15px);color:var(--parent)}
.god-node{position:absolute;width:148px;height:234px;transform:translateX(-50%);padding:9px 8px 6px;display:flex;align-items:center;flex-direction:column;gap:5px;line-height:1.5;text-align:center;z-index:1;border:5px solid transparent;border-radius:1px;background:linear-gradient(#202725,#171e20) padding-box,linear-gradient(135deg,#ead2a0 0%,#8e6834 14%,#caa66a 32%,#473821 52%,#aa8149 77%,#e7c78b 92%,#70512c) border-box;box-shadow:0 4px 0 #3d2c19,0 10px 15px #0006,inset 0 0 0 1px #c59e5b66;cursor:pointer}.god-node:before{content:"";position:absolute;inset:-2px;border:1px solid #e7c98a99;pointer-events:none}.god-node:after{content:"◆";position:absolute;top:-14px;left:calc(50% - 5px);font-size:10px;color:#cba968;text-shadow:0 1px 2px #000;pointer-events:none}.god-node .portrait{display:block;width:120px;height:150px;flex:none;background:#11191a;border:1px solid #9e8354}.god-node img{display:block;width:100%;height:100%;object-fit:contain;border-radius:0}.god-node .node-name{font-size:15px;line-height:25px;max-width:100%;color:#eee0c5;white-space:nowrap}.god-node .node-role{font-size:10px;line-height:15px;white-space:nowrap;color:#b8b8ad;letter-spacing:.02em}.god-node[aria-pressed="true"]{outline:3px solid #f1cc81;outline-offset:5px;box-shadow:0 4px 0 #3d2c19,0 0 24px #d7b36b35}.god-node[aria-pressed="true"] .node-name,.god-node[aria-pressed="true"] .node-role{color:#ffe3a0}.god-node:hover{border-bottom-color:#ddba74}.god-node[data-related="true"] .node-role{color:#cfbc91}
.legend{list-style:none;display:flex;gap:24px;justify-content:center;flex-wrap:wrap;padding:0;margin:16px 0 6px;font-size:.85rem;color:var(--muted)}.legend li{display:flex;gap:8px;align-items:center}.legend i{display:inline-block;width:30px;border-top:2px solid var(--parent)}.legend .spouse{border-color:var(--gold);border-top-width:3px}.view-note{margin:10px 0}.graph-note{margin:10px 0 0}
.reading{border-top:1px solid #69604c;padding:30px;background:#10141655;min-width:0;display:grid;grid-template-columns:minmax(210px,1fr) minmax(0,2fr);gap:36px}.figure-summary{min-width:0}.reading h2{font-size:2rem;letter-spacing:.08em;margin:0 0 15px}.reading h3{margin:0 0 8px}.reading .eyebrow{margin-bottom:8px}#selected-summary{font-size:.94rem}.article-link{display:inline-block;border-bottom:1px solid #907746;padding:5px 0;text-decoration:none;min-height:44px}.list-help{margin:0 0 18px}.relationships{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 25px}.relationships li{padding:15px 0;border-top:1px solid #45453b;min-width:0}.relation-head{display:flex;gap:12px;align-items:center;justify-content:space-between}.relation-head button{padding:4px 0;background:transparent;border:0;text-align:left;min-height:44px;color:#f0e5cc;font-size:1rem}.relation-head button:hover{text-decoration:underline;text-underline-offset:5px}.relation-tags{font-size:.75rem;color:var(--gold);text-align:right}.relation-source{font-size:.75rem;color:var(--muted);margin:5px 0 0;overflow-wrap:anywhere}.relation-source a{color:var(--muted)}
.sources,.directory{border-top:1px solid var(--line);margin-top:48px;padding-top:32px;max-width:930px}.sources h2{margin-top:0}.sources p,.sources li{font-size:.92rem}.sources li{padding:6px 0}.sources li:target{background:#d7b36b12;outline:1px solid #b89b6d;padding:12px;scroll-margin-top:20px}.directory ul{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:8px 26px}.directory a{display:inline-block;padding:6px 0;min-height:44px}footer{max-width:1460px;margin:auto;padding:0 5% 25px;color:var(--muted);font-size:.8rem;letter-spacing:.06em}.skip{position:absolute;top:0;left:10px;transform:translateY(-150%);padding:10px;background:var(--bg);z-index:10}.skip:focus{transform:none}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media(max-width:850px){.graph-panel{padding:22px 16px}.heading{margin-bottom:30px}.reading{padding:25px 22px;grid-template-columns:1fr;gap:25px}.graph-viewport{height:70svh}}
@media(max-width:500px){main{padding-left:12px;padding-right:12px}.page-header{padding:18px;gap:10px;font-size:.8rem}.graph-panel{padding:20px 10px}.reading{padding:25px 17px}.relationships{grid-template-columns:1fr}.eyebrow{letter-spacing:.12em}.lead{font-size:1.05rem}.sources ul{padding-left:22px}.graph-controls{gap:6px}.graph-controls button{padding:5px 10px}.graph-controls #zoom-readable{font-size:.85rem}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}#light-threads{display:none!important}}
@media(forced-colors:active){.god-node{border:3px solid ButtonText}.god-node[aria-pressed="true"]{outline:3px solid Highlight}#threads path{stroke:CanvasText}#threads .spouse{stroke:LinkText}.legend i{border-color:CanvasText}}
.graph-viewport.is-fit{height:auto;min-height:0;max-height:min(70svh,780px)}
/* Larger genealogy: crossings are not joins; dots identify actual branch joins. */
#threads .wire-backdrop{stroke:#131a1b!important;stroke-width:7!important;stroke-dasharray:none!important;opacity:1!important}#threads .consort{stroke:var(--gold);stroke-width:2;stroke-dasharray:7 5}#junctions circle{fill:var(--parent);stroke:#131a1b;stroke-width:1}.legend .consort{border-color:var(--gold);border-top-style:dashed}.chart-label{transform:translateX(-50%);font-size:13px}.chart-label.label-left{transform:none}.tradition-note{font-size:.85rem;color:#d7c6a0;border-left:2px solid #a38b5a;padding:8px 12px;background:#b89b6d0a}.figure-search{margin:20px 0;max-width:650px}.figure-search label{display:block;font-size:.9rem;color:var(--muted);margin-bottom:7px}.figure-search input{width:100%;min-height:46px;border:1px solid #827352;border-radius:2px;background:#131a1b;color:var(--ink);padding:8px 12px;font:inherit}.figure-search input:focus-visible{outline:2px solid #d7b36b;outline-offset:3px}.figure-search ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:8px 0;padding:0}.figure-search button{min-height:44px;padding:4px 13px;background:#202825;border:1px solid #7d6b49}.figure-search p{font-size:.85rem;color:var(--muted);margin:5px 0}.god-node[data-related="false"]:not([aria-pressed="true"]){opacity:.75}.node-role{overflow:hidden;text-overflow:ellipsis}.sources>a{display:inline-block;margin:0 25px 8px 0}
/* Typed future relations and reusable family navigation. */
#family-navigation{display:contents}.god-node{width:var(--card-width,148px);height:var(--card-height,234px)}.parentage-note{font-size:.85rem;color:var(--muted);padding:8px 12px;border-left:2px solid #7a9992;margin:14px 0}.parentage-note p{margin:3px 0}#threads .generation{stroke:#b2a2d0;stroke-dasharray:2 5}#threads .sequence{stroke:#a9a8a1;stroke-dasharray:10 4 2 4}#threads .association{stroke:#a5b7bf;stroke-dasharray:4 5}
.legend .generation{border-color:#b2a2d0;border-top-style:dotted}.legend .sequence{border-color:#a9a8a1;border-top-style:dashed}.legend .association{border-color:#a5b7bf;border-top-style:dotted}
/* The chart is the first screen. Reference material opens in an on-demand bottom sheet. */
.viewer-only{display:none}#reference{max-width:1100px;margin:25px auto;padding:24px}.reference-header{display:flex;align-items:center;justify-content:space-between;gap:15px}.reference-header h2{margin:0}.reference-header button{min-width:44px;min-height:44px;border:1px solid #9c8455;background:#1b2322;color:var(--ink);font-size:24px}
body.graph-ready{height:100vh;height:100dvh;overflow:hidden;background:#131a1b}body.graph-ready main{position:fixed;inset:0;margin:0;padding:0;max-width:none}body.graph-ready #experience,body.graph-ready .workspace,body.graph-ready .graph-panel{position:absolute;inset:0;margin:0;padding:0;max-width:none;border:0;background:none;box-shadow:none}body.graph-ready .workspace{border:1px solid #9b825344}body.graph-ready .graph-viewport,body.graph-ready .graph-viewport.is-fit{position:absolute;inset:0;width:100%;height:100%;min-height:0;max-height:none;border:0;overscroll-behavior:contain}body.graph-ready .graph-viewport.is-fit{display:flex;align-items:center;justify-content:center}body.graph-ready .is-fit #graph-sheet{margin:0;flex:none}body.graph-ready .fallback-footer{display:none}body.graph-ready .viewer-only{display:block}
body.graph-ready .viewer-header{position:fixed;top:max(6px,env(safe-area-inset-top));left:max(6px,env(safe-area-inset-left));right:max(6px,env(safe-area-inset-right));z-index:30;max-width:none;padding:0;margin:0;gap:8px;pointer-events:none;align-items:flex-start}.hud{padding:12px;pointer-events:auto;opacity:.5;transition:opacity .18s ease}.hud:hover,.hud:focus-within{opacity:1}.header-home a,.header-tools button,.tool-menu summary,.card-peek button{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:5px 12px;border:1px solid #8e784c66;border-radius:2px;background:#131a1bd9;color:var(--ink);text-decoration:none}.header-home a{gap:8px;font-size:.85rem}.header-tools{position:relative;display:flex;gap:6px;align-items:center}.header-tools .icon-button{padding:0;width:44px;font-size:22px}.header-tools #language{padding:4px 8px;min-width:64px;font-size:.8rem}.tool-menu{position:static}.tool-menu summary{padding:0;width:44px;list-style:none;font-size:24px;cursor:pointer}.tool-menu summary::-webkit-details-marker{display:none}.tool-menu summary:focus-visible{outline:2px solid #f5d18b;outline-offset:3px}.tool-popover{position:absolute;top:calc(100% + 3px);right:0;z-index:3;width:min(360px,calc(100vw - 28px));max-height:min(60dvh,420px);overflow:auto;padding:17px;border:1px solid #8e784c;background:#192120;box-shadow:0 8px 30px #0006}.tool-popover.figure-search{margin:0}.tool-popover input{font-size:16px}#search-results{display:grid;grid-template-columns:1fr;gap:6px;max-height:230px;overflow:auto}.tool-popover button{width:100%;text-align:left;justify-content:flex-start}#family-navigation{display:none}#family-menu[open] #family-navigation{display:grid;gap:7px}
body.graph-ready .graph-controls{position:fixed;z-index:20;left:50%;bottom:max(8px,env(safe-area-inset-bottom));transform:translateX(-50%);margin:0;display:flex;gap:5px;flex-wrap:nowrap;align-items:center;background:linear-gradient(transparent,#131a1b99);border-radius:4px}body.graph-ready .graph-controls button{background:#131a1bd9;border-color:#8e784c66;white-space:nowrap;font-size:.85rem;padding:5px 12px}body.graph-ready .graph-controls output{min-width:40px;font-size:.75rem}.graph-ready .skip{position:fixed;z-index:100}.graph-ready .graph-viewport:focus-visible{outline-offset:-4px}
.reference-dialog{width:min(1000px,calc(100vw - 28px));max-width:1000px;max-height:calc(100vh - 28px);max-height:calc(100dvh - 28px);padding:0;border:1px solid #ae9259;border-top:3px double #c4a772;background:#172020;color:var(--ink);box-shadow:0 15px 80px #0009;overscroll-behavior:contain}.reference-dialog::backdrop{background:#0009}.reference-dialog #reference{margin:0;padding:0;max-width:none}.reference-dialog .reference-header{position:sticky;top:0;z-index:3;padding:12px 20px;background:#172020;border-bottom:1px solid #62583f}.reference-dialog .reference-header h2{font-size:1.1rem}.reference-dialog .reading{border-top:0;background:none}.reference-dialog .sources,.reference-dialog .directory{margin:0;padding:26px 30px;max-width:none}.reference-dialog .sources h2,.reference-dialog .directory h2{font-size:1.2rem}.reference-dialog :target,.reference-dialog section{scroll-margin-top:90px}.reference-dialog .legend{justify-content:flex-start;margin:15px 0}.reference-dialog .directory ul{gap:6px 22px}.graph-ready.reference-static{overflow:auto}.graph-ready.reference-static main{position:relative;height:100dvh}.reference-static #reference{position:relative;z-index:40;background:#172020}
@media(max-width:700px){.hud{padding:6px}.header-home a{padding:4px 9px}.header-home a span[data-en]{display:none}.header-tools{gap:4px}body.graph-ready .graph-controls button{padding:5px 9px;font-size:.8rem}body.graph-ready .graph-controls{gap:4px}.graph-controls #zoom-readable{font-size:.8rem}.reference-dialog .sources,.reference-dialog .directory{padding:22px 18px}.reference-dialog .reference-header{padding:9px 12px}.reference-dialog .reading{padding:22px 18px}.tool-popover{right:0}}
@media(hover:none),(pointer:coarse){.hud{opacity:1}.header-home a,.header-tools button,.tool-menu summary,.card-peek button,body.graph-ready .graph-controls button{background:#172020f2;border-color:#9a815277}}
@media(prefers-reduced-motion:reduce){.hud{transition:none}}

/* A padded canvas lets the whole chart pan even when it fits on screen. */
#graph-space{position:relative}body.graph-ready .graph-viewport.is-fit{display:block}body.graph-ready #graph-sheet{position:absolute;margin:0}body.graph-ready .graph-viewport{cursor:grab;touch-action:auto}body.graph-ready .graph-viewport.is-dragging{cursor:grabbing;user-select:none}
/* A consistent upper-right card action, independent of neighbouring portraits. */
.card-peek{position:fixed;z-index:25;max-width:calc(100vw - 24px);padding:0;border:1px solid #b59a60;border-radius:3px;background:linear-gradient(135deg,#33392df5,#192320fa);box-shadow:0 5px 18px #0009,inset 0 0 0 1px #d4b77a33}.card-peek button{display:block;min-width:44px;min-height:44px;padding:8px 13px;border:0;border-radius:2px;background:transparent;color:#f3d49a;white-space:nowrap;font-size:.86rem;line-height:1.5}.card-peek button:hover,.card-peek button:focus-visible{background:#b3914733}
/* Reference reading uses the screen, leaving a narrow outside area to dismiss it. */
.reference-dialog{position:fixed;inset:16px;margin:0;width:calc(100% - 32px);max-width:none;height:calc(100dvh - 32px);max-height:none;overflow-y:auto;border-radius:4px;padding-bottom:env(safe-area-inset-bottom);box-shadow:0 12px 60px #0009}.reference-dialog::backdrop{background:#000a}.reference-dialog[open]{animation:reference-in .16s ease-out}.reference-dialog .reference-header{padding:4px 14px;gap:12px;background:linear-gradient(110deg,#30382c,#172020);border-bottom-color:#88713d}.reference-dialog .reference-header h2{font-size:.95rem}.reference-dialog .reference-header button{font-size:21px}.reference-dialog .reading{padding-top:22px}.reference-dialog :target,.reference-dialog section{scroll-margin-top:60px}
@keyframes reference-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:700px){.reference-dialog{inset:8px;width:calc(100% - 16px);height:calc(100dvh - 16px)}.reference-dialog .reference-header{padding:4px 10px}.card-peek button{font-size:.84rem}}
@media(prefers-reduced-motion:reduce){.reference-dialog[open]{animation:none}}

/* Always-readable key; it does not capture pointer input over the chart. */
.chart-legend{position:fixed;z-index:15;left:max(18px,env(safe-area-inset-left));bottom:calc(86px + env(safe-area-inset-bottom));padding:10px 13px;border:1px solid #a0874a55;border-radius:3px;background:#131a1bd9;pointer-events:none;color:#d5d0c3;max-width:280px}.chart-legend .legend{margin:0;padding:0;display:grid;gap:4px;justify-content:start;font-size:.76rem;line-height:1.5}.chart-legend .legend li{gap:8px}.chart-legend .legend i{width:26px;flex:none}
@media(max-width:700px){.chart-legend{left:auto;right:12px;top:76px;bottom:auto;max-width:calc(100vw - 24px);padding:7px 9px}.chart-legend .legend{gap:2px;font-size:.7rem;line-height:1.4}.chart-legend .legend i{width:20px}}

.god-node .node-role{max-width:100%;overflow:hidden;text-overflow:ellipsis}
/* Reuse the selected card artwork, with a smaller portrait on narrow screens. */
.detail-portrait{width:min(100%,280px);aspect-ratio:4/5;margin:4px 0 22px;padding:8px;border:5px solid transparent;background:linear-gradient(#101819,#18211f) padding-box,linear-gradient(135deg,#ead2a0,#8e6834 15%,#caa66a 34%,#473821 54%,#aa8149 77%,#e7c78b 92%,#70512c) border-box;box-shadow:0 4px 0 #3d2c19,0 8px 22px #0005,inset 0 0 0 1px #c59e5b66}.detail-portrait img{width:100%;height:100%;display:block;object-fit:contain;background:#101819}.detail-portrait[aria-busy="true"]{background:linear-gradient(135deg,#26302a,#101819) padding-box,linear-gradient(135deg,#bda472,#66502f,#c5a269) border-box}
@media(max-width:700px){.detail-portrait{width:min(100%,160px);margin:8px auto 20px;padding:5px;border-width:4px}}
@media(max-width:700px) and (max-height:500px){.detail-portrait{width:110px}}