:root{--red:#8b1a1a;--red2:#b71c1c;--gold:#c99a2e;--gold2:#f1d48a;--paper:#fbf4e4;--ink:#2b1a10;--muted:#6b5443;--card:#fffaf0}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;overflow-x:hidden;background:var(--paper);color:var(--ink);font:400 19px/1.6 "Noto Serif","Times New Roman",serif;
 background-image:radial-gradient(circle at 20% 10%,rgba(201,154,46,.12),transparent 40%),radial-gradient(circle at 80% 90%,rgba(139,26,26,.08),transparent 40%)}
a{color:var(--red2)}
.wrap{max-width:1080px;margin:0 auto;padding:0 16px}
header.top{background:linear-gradient(180deg,#7a1414,#5a0f0f);color:#fff7e0;border-bottom:4px solid var(--gold)}
header.top .wrap{display:flex;align-items:center;gap:12px;min-height:64px}
header.top a{color:#fff7e0;text-decoration:none;font-weight:700;font-size:22px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:56px;padding:0 22px;border-radius:14px;
 font-family:inherit;font-weight:700;font-size:19px;line-height:1.2;border:2px solid var(--red);background:var(--red2);color:#fff;text-decoration:none;cursor:pointer}
.btn.secondary{background:var(--card);color:var(--red)}
.btn.block{width:100%}
.hero{text-align:center;padding:48px 0 24px}
.hero h1{font-size:clamp(30px,6vw,52px);color:var(--red);margin:.2em 0}
.hero p{font-size:21px;color:var(--muted);max-width:720px;margin:0 auto 20px}
.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin:24px 0}
.feature{background:var(--card);border:2px solid var(--gold2);border-radius:16px;padding:18px}
.feature h3{margin:.2em 0;color:var(--red)}
.open-box{background:var(--card);border:3px double var(--gold);border-radius:18px;padding:20px;margin:24px auto;max-width:560px;text-align:center}
.open-box input{width:100%;min-height:60px;font-family:ui-monospace,Menlo,monospace;font-weight:700;font-size:26px;text-align:center;letter-spacing:4px;border:2px solid var(--gold);border-radius:12px;margin:12px 0;text-transform:uppercase}
footer{color:var(--muted);text-align:center;padding:32px 16px;font-size:16px}
/* viewer */
.vhead{text-align:center;padding:20px 0 4px}
.vhead h1{margin:0;color:var(--red);font-size:clamp(28px,5vw,44px)}
.vhead .meta{color:var(--muted);padding:0 8px}
.toolbar{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:14px 0}
.toolbar .btn{min-width:150px}
.zoom{display:flex;gap:8px;justify-content:center;margin-bottom:8px}
.zoom button{min-width:56px;min-height:56px;font-size:26px;border-radius:12px;border:2px solid var(--gold);background:var(--card);color:var(--red);cursor:pointer}
.canvas{overflow:auto;-webkit-overflow-scrolling:touch;border-top:2px solid var(--gold2);border-bottom:2px solid var(--gold2);background:rgba(255,250,240,.6);padding:24px 8px 40px}
.tree{transform-origin:top left;display:inline-block;min-width:100%}
.tree ul{position:relative;padding-top:28px;margin:0;display:flex;justify-content:center;padding-left:0}
.tree li{list-style:none;position:relative;padding:28px 8px 0;display:flex;flex-direction:column;align-items:center}
.tree li::before,.tree li::after{content:"";position:absolute;top:0;right:50%;width:50%;height:28px;border-top:3px solid var(--gold)}
.tree li::after{right:auto;left:50%;border-left:3px solid var(--gold)}
.tree li:only-child::before,.tree li:only-child::after{display:none}
.tree li:only-child{padding-top:0}
.tree li:first-child::before,.tree li:last-child::after{border:0 none}
.tree li:last-child::before{border-right:3px solid var(--gold);border-radius:0 8px 0 0}
.tree li:first-child::after{border-radius:8px 0 0 0}
.tree ul ul::before{content:"";position:absolute;top:0;left:50%;height:28px;border-left:3px solid var(--gold)}
.tree>ul{padding-top:0}
.person{background:var(--card);border:3px solid var(--red);border-radius:14px;padding:10px 14px;min-width:170px;max-width:240px;text-align:center;
 box-shadow:0 3px 0 var(--gold);cursor:pointer}
.person.root{background:linear-gradient(#fff6db,#fbe7b0);border-color:var(--gold);border-width:4px}
.person .gen{display:inline-block;background:var(--red);color:#fff;font-size:14px;border-radius:999px;padding:1px 10px;margin-bottom:4px}
.person .name{font-weight:700;font-size:20px;line-height:1.25}
.person .yrs{color:var(--muted);font-size:15px}
.person .wives,.person .dau{font-size:15px;margin-top:4px;color:#4a2c1a}
.person .dau{color:#8a3b5c}
dialog{border:3px double var(--gold);border-radius:18px;background:var(--card);max-width:520px;width:calc(100% - 32px);padding:20px;color:var(--ink)}
dialog::backdrop{background:rgba(40,10,10,.5)}
dialog h2{color:var(--red);margin-top:0}
.qr{display:block;margin:8px auto;width:240px;height:240px}
.codebig{font:700 32px/1.2 monospace;letter-spacing:4px;text-align:center;color:var(--red)}
.empty{padding:60px 16px;text-align:center}
@media print{header.top,.toolbar,.zoom,footer{display:none}.canvas{overflow:visible;border:0}body{background:#fff}}