*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--bg-deep:#050812;--bg-mid:#0a0f1c;--text:#dce2ee;--text-dim:#7c8ca5;--text-faint:#4a5a70;--text-muted:#2e3d52;--accent:#d4a030;--accent-dim:rgba(212,160,48,0.1);--panel-bg:rgba(8,12,24,0.85);--panel-border:rgba(124,140,165,0.08);--avatar-bg:rgba(124,140,165,0.05);--avatar-border:rgba(124,140,165,0.1);--line-color:rgba(124,140,165,0.15);--glow-gold:0 0 20px rgba(212,160,48,0.08)}
html{scroll-behavior:smooth}
body{width:100%;min-height:100vh;background:var(--bg-deep);color:var(--text);font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.stars-bg{position:fixed;inset:0;z-index:-1;background:radial-gradient(ellipse at 20% 50%,#0e1628 0%,transparent 50%),radial-gradient(ellipse at 80% 20%,#120e24 0%,transparent 50%),radial-gradient(ellipse at 50% 80%,#061018 0%,transparent 50%),var(--bg-deep)}
.stars-bg::before,.stars-bg::after{content:'';position:absolute;inset:0;background-image:radial-gradient(1px 1px at 10% 20%,rgba(255,255,255,0.45),transparent),radial-gradient(1px 1px at 30% 70%,rgba(255,255,255,0.3),transparent),radial-gradient(1px 1px at 50% 30%,rgba(255,255,255,0.4),transparent),radial-gradient(1px 1px at 70% 80%,rgba(255,255,255,0.2),transparent),radial-gradient(1px 1px at 90% 40%,rgba(255,255,255,0.35),transparent),radial-gradient(1.5px 1.5px at 15% 85%,rgba(255,255,255,0.55),transparent),radial-gradient(1.5px 1.5px at 85% 15%,rgba(255,255,255,0.45),transparent),radial-gradient(1px 1px at 45% 55%,rgba(255,255,255,0.2),transparent),radial-gradient(1px 1px at 65% 25%,rgba(255,255,255,0.3),transparent),radial-gradient(1px 1px at 25% 45%,rgba(255,255,255,0.2),transparent);background-size:100% 100%;animation:twinkle 8s ease-in-out infinite alternate}
.stars-bg::after{background-image:radial-gradient(1px 1px at 5% 60%,rgba(255,255,255,0.3),transparent),radial-gradient(1px 1px at 35% 15%,rgba(255,255,255,0.4),transparent),radial-gradient(1px 1px at 55% 75%,rgba(255,255,255,0.2),transparent),radial-gradient(1px 1px at 75% 45%,rgba(255,255,255,0.45),transparent),radial-gradient(1px 1px at 95% 85%,rgba(255,255,255,0.3),transparent),radial-gradient(2px 2px at 50% 10%,rgba(255,255,255,0.6),transparent),radial-gradient(1.5px 1.5px at 20% 90%,rgba(255,255,255,0.35),transparent);animation-delay:-4s}
@keyframes twinkle{0%{opacity:0.35}100%{opacity:0.85}}
.back-link{position:fixed;top:1.5rem;left:1.5rem;z-index:100;font-size:.8rem;font-weight:500;color:var(--text-dim);text-decoration:none;padding:.5rem 1rem;background:var(--panel-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--panel-border);border-radius:10px;transition:all .25s ease}
.back-link:hover{color:var(--accent);border-color:rgba(212,160,48,0.2);box-shadow:var(--glow-gold)}
.family-tree{max-width:1000px;margin:0 auto;padding:5rem 1.5rem 3rem;display:flex;flex-direction:column;align-items:center}
.grand-row{display:flex;align-items:flex-start;justify-content:center;gap:0;width:100%}
.grand-gap-wide{width:6rem;flex-shrink:0}
.tree-side{display:flex;flex-direction:column;align-items:center}
.grand-gap{width:4rem;flex-shrink:0}
.gen{display:flex;flex-direction:column;align-items:center;gap:0}
.gen-label{font-size:.65rem;font-weight:500;letter-spacing:.15em;text-transform:uppercase;color:var(--text-faint);margin-bottom:.75rem}
.couple{display:flex;align-items:center;gap:0}
.union-h{width:2rem;height:2px;background:var(--line-color);flex-shrink:0}
.union-pair{display:flex;align-items:center;gap:0;justify-content:center;margin:.5rem 0}
.children-row{display:flex;align-items:flex-start;justify-content:center;gap:2.5rem;width:100%}
.member{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:1.2rem 1.5rem;background:var(--panel-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--panel-border);border-radius:14px;min-width:100px;transition:all .25s ease;position:relative}
.member:hover{border-color:rgba(212,160,48,0.18);transform:translateY(-2px);box-shadow:0 8px 32px rgba(0,0,0,.4),var(--glow-gold)}
.avatar{width:64px;height:64px;border-radius:50%;overflow:hidden;flex-shrink:0}
.avatar.empty{background:var(--avatar-bg);border:1.5px dashed var(--avatar-border);display:flex;align-items:center;justify-content:center}
.avatar.empty::after{content:'+';font-size:1.5rem;font-weight:200;color:var(--text-muted)}
.avatar img{width:100%;height:100%;object-fit:cover;display:block}
.name{font-size:.95rem;font-weight:500;color:var(--text);letter-spacing:.02em}
.relation{font-size:.7rem;color:var(--text-faint);letter-spacing:.05em}
.gen-connector{position:relative;width:100%;height:2.5rem;display:flex;align-items:flex-start;flex-shrink:0}
.gen-connector-four{justify-content:center}
.gc-line{height:2px;background:var(--line-color);align-self:center}
.gc-line-left{flex:1}
.gc-line-right{flex:1}
.gc-v{width:2px;height:100%;background:var(--line-color);flex-shrink:0}
.gc-gap{width:4rem;flex-shrink:0}
.gc-gap-wide{width:6rem;flex-shrink:0}
.gen-connector-single{justify-content:center}
.gc-v-single{height:100%;width:2px;background:var(--line-color);flex-shrink:0}
.site-footer{text-align:center;padding:2rem 1rem 3rem;color:var(--text-faint);font-size:.75rem;letter-spacing:.05em;width:100%}
@media(max-width:768px){
.family-tree{padding:4rem 1rem 2rem}
.member{padding:.8rem 1rem;min-width:80px}
.avatar{width:52px;height:52px}
.name{font-size:.85rem}
.union-h{width:1.2rem}
.grand-gap{width:1.5rem}
.grand-gap-wide{width:2rem}
.gc-gap{width:1.5rem}
.gc-gap-wide{width:2rem}
.children-row{gap:1.5rem}
.gen-connector{height:1.8rem}
.back-link{top:.75rem;left:.75rem;font-size:.7rem;padding:.4rem .75rem}
}