body{margin:0}#root{min-height:100vh}.family-tree-container{background:var(--card-bg);border-radius:12px;padding:25px 30px;box-shadow:0 2px 8px #0000000f}.family-tabs{flex-wrap:wrap;gap:10px;margin-bottom:20px;display:flex}.family-tab{border:1px solid var(--border-color);background:var(--bg-color);color:var(--text-color);cursor:pointer;border-radius:20px;padding:8px 16px;font-family:inherit;font-size:.9rem;transition:all .2s}.family-tab:hover{border-color:var(--accent-color);color:var(--accent-color)}.family-tab.active{background:var(--accent-color);border-color:var(--accent-color);color:#fff}.family-header{border-bottom:1px dashed var(--border-color);margin-bottom:25px;padding-bottom:15px}.family-header h2{color:var(--accent-color);margin-bottom:8px;font-size:1.5rem}.family-desc{color:#666;font-size:.95rem}.tree-wrapper{min-height:300px;padding:20px 10px;overflow-x:auto}.tree-node-wrapper{vertical-align:top;flex-direction:column;align-items:center;display:inline-flex}.tree-node{text-align:center;background:#f8f6f3;border:2px solid #d4c4a8;border-radius:8px;min-width:90px;max-width:150px;padding:10px 15px}.tree-node.female{background:#fdf2f8;border-color:#f9a8d4}.tree-node.branch{background:#fef3c7;border-color:#f59e0b;font-weight:700}.tree-node.ancestor{background:#fee2e2;border-color:#ef4444;font-weight:700}.tree-node.generation{background:#e0e7ff;border-color:#6366f1}.tree-node.highlight{border-width:3px;border-color:var(--accent-color);box-shadow:0 0 10px #8b45134d}.node-name{color:var(--text-color);cursor:pointer;font-size:.95rem;font-weight:600;transition:color .2s;display:block}.node-name:hover{color:var(--link-color)}.node-spouse,.node-concubine,.node-mother{color:#888;margin-top:3px;font-size:.7rem;display:block}.node-spouse span{cursor:pointer;color:var(--link-color)}.node-spouse span:hover{text-decoration:underline}.node-desc{color:#999;margin-top:3px;font-size:.65rem;font-style:italic;display:block}.tree-line-down{background:#b8a88a;width:2px;height:15px}.tree-line-horizontal{background:#b8a88a;align-self:stretch;height:2px;position:relative}.tree-line-up{background:#b8a88a;width:2px;height:15px}.tree-children{justify-content:center;display:inline-flex;position:relative}.tree-children:before{content:"";background:#b8a88a;height:2px;position:absolute;top:0;left:0;right:0}.tree-children[data-count="1"]:before{display:none}.tree-child-wrapper{flex-direction:column;align-items:center;padding:0 8px;display:flex}.tree-child-wrapper:first-child{padding-left:0}.tree-child-wrapper:last-child{padding-right:0}.tree-legend{border-top:1px dashed var(--border-color);flex-wrap:wrap;justify-content:center;gap:20px;margin-top:25px;padding-top:15px;display:flex}.legend-item{color:#666;align-items:center;gap:6px;font-size:.85rem;display:flex}.legend-box{border:2px solid;border-radius:4px;width:16px;height:16px}.legend-box.male{background:#f8f6f3;border-color:#d4c4a8}.legend-box.female{background:#fdf2f8;border-color:#f9a8d4}.legend-box.highlight{border-color:var(--accent-color);background:#fff;border-width:3px}@media (width<=768px){.family-tree-container{padding:15px}.tree-wrapper{padding:10px 0}.tree-node{min-width:65px;max-width:100px;padding:6px 8px}.node-name{font-size:.8rem}.node-desc,.node-spouse,.node-concubine,.node-mother{display:none}.tree-child-wrapper{padding:0 4px}}*{box-sizing:border-box;margin:0;padding:0}:root{--bg-color:#faf8f5;--text-color:#333;--accent-color:#8b4513;--link-color:#b22222;--sidebar-bg:#f5f0e8;--card-bg:#fff;--border-color:#ddd}body{background-color:var(--bg-color);color:var(--text-color);min-height:100vh;font-family:Noto Serif SC,Source Han Serif CN,Songti SC,serif;line-height:1.8}.container{min-height:100vh;display:flex}.sidebar{background:var(--sidebar-bg);border-right:1px solid var(--border-color);width:240px;height:100vh;padding:20px;transition:transform .3s;position:fixed;overflow-y:auto}.sidebar-section{margin-bottom:25px}.sidebar-section:last-child{margin-bottom:0}.sidebar h2{color:var(--accent-color);border-bottom:2px solid var(--accent-color);margin-bottom:12px;padding-bottom:8px;font-size:1rem}.sidebar ul{list-style:none}.sidebar li{margin-bottom:8px}.sidebar a{color:var(--text-color);border-radius:6px;padding:8px 12px;font-size:.95rem;text-decoration:none;transition:all .2s;display:block}.sidebar a:hover,.sidebar a.active{background:var(--accent-color);color:#fff}.main{flex:1;max-width:900px;margin-left:240px;padding:30px 50px}.main h1{color:var(--accent-color);margin-bottom:10px;font-size:2rem}.main .subtitle{color:#666;margin-bottom:30px;font-size:.95rem}.chapter{background:var(--card-bg);border-radius:12px;margin-bottom:25px;padding:25px 30px;box-shadow:0 2px 8px #0000000f}.chapter h2{color:var(--accent-color);border-bottom:1px dashed var(--border-color);margin-bottom:15px;padding-bottom:10px;font-size:1.3rem}.chapter p{text-indent:2em;margin-bottom:12px}.char-link{color:var(--link-color);cursor:pointer;border-bottom:1px dotted var(--link-color);transition:all .2s}.char-link:hover{background:#b222221a}.modal-overlay{z-index:1000;background:#00000080;justify-content:center;align-items:center;display:none;position:fixed;inset:0}.modal-overlay.show{display:flex}.modal{background:var(--card-bg);border-radius:16px;width:90%;max-width:500px;max-height:80vh;padding:30px;position:relative;overflow-y:auto;box-shadow:0 10px 40px #0003}.modal-close{cursor:pointer;color:#999;background:0 0;border:none;font-size:1.5rem;position:absolute;top:15px;right:20px}.modal-close:hover{color:var(--accent-color)}.modal h3{color:var(--accent-color);margin-bottom:15px;padding-right:30px;font-size:1.5rem}.modal .char-type{background:var(--accent-color);color:#fff;border-radius:12px;margin-bottom:15px;padding:3px 10px;font-size:.75rem;display:inline-block}.modal p{color:#555;line-height:1.9}.modal .aliases{border-top:1px dashed var(--border-color);color:#777;margin-top:15px;padding-top:15px;font-size:.9rem}.menu-toggle{z-index:1001;background:var(--accent-color);color:#fff;cursor:pointer;border:none;border-radius:50%;width:45px;height:45px;font-size:1.5rem;display:none;position:fixed;top:15px;left:15px;box-shadow:0 2px 10px #0003}@media (width<=768px){.sidebar{z-index:1000;width:280px;transform:translate(-100%)}.sidebar.open{transform:translate(0)}.main{margin-left:0;padding:70px 20px 30px}.menu-toggle{display:block}.chapter{padding:20px}.main h1{font-size:1.5rem}.chapter h2{font-size:1.1rem}}.read-original{border-top:1px dashed var(--border-color);text-align:right;margin-top:15px;padding-top:15px}.read-original button{border:1px solid var(--accent-color);color:var(--accent-color);cursor:pointer;background:0 0;border-radius:20px;padding:8px 16px;font-family:inherit;font-size:.9rem;transition:all .2s}.read-original button:hover{background:var(--accent-color);color:#fff}.chapter-reader{background:var(--card-bg);border-radius:12px;padding:30px 40px;box-shadow:0 2px 8px #0000000f}.chapter-reader .back-button{color:var(--accent-color);cursor:pointer;background:0 0;border:none;margin-bottom:20px;padding:0;font-family:inherit;font-size:.95rem}.chapter-reader .back-button:hover{text-decoration:underline}.chapter-reader .chapter-title{color:var(--accent-color);border-bottom:2px solid var(--accent-color);margin-bottom:25px;padding-bottom:15px;font-size:1.5rem}.chapter-reader .chapter-body p{text-indent:2em;margin-bottom:1em;line-height:2}.chapter-reader .chapter-end{text-align:center;color:#999;text-indent:0;margin-top:30px}.chapter-reader .chapter-nav{border-top:1px dashed var(--border-color);justify-content:center;gap:15px;margin-top:40px;padding-top:20px;display:flex}.chapter-reader .chapter-nav button{background:var(--sidebar-bg);border:1px solid var(--border-color);color:var(--text-color);cursor:pointer;border-radius:8px;padding:10px 20px;font-family:inherit;font-size:.9rem;transition:all .2s}.chapter-reader .chapter-nav button:hover{background:var(--accent-color);color:#fff;border-color:var(--accent-color)}@media (width<=768px){.chapter-reader{padding:20px}.chapter-reader .chapter-nav{flex-direction:column}}.loading{text-align:center;color:#999;padding:50px}.loading:after{content:"";border:2px solid var(--accent-color);vertical-align:middle;border-top-color:#0000;border-radius:50%;width:20px;height:20px;margin-left:10px;animation:1s linear infinite spin;display:inline-block}@keyframes spin{to{transform:rotate(360deg)}}.home-page{max-width:700px}.home-page h1{color:var(--accent-color);margin-bottom:10px;font-size:2.5rem}.home-page .subtitle{color:#666;margin-bottom:40px;font-size:1.1rem}.home-section{background:var(--card-bg);border-radius:12px;margin-bottom:25px;padding:25px 30px;box-shadow:0 2px 8px #0000000f}.home-section h2{color:var(--accent-color);border-bottom:1px dashed var(--border-color);margin-bottom:15px;padding-bottom:10px;font-size:1.2rem}.home-section p{color:#555;line-height:1.9}.feature-list{padding:0;list-style:none}.feature-list li{color:#555;padding:8px 0;line-height:1.7}.feature-list li strong{color:var(--accent-color)}.home-actions{text-align:center;margin-top:30px}.home-actions button{background:var(--accent-color);color:#fff;cursor:pointer;border:none;border-radius:25px;padding:15px 30px;font-family:inherit;font-size:1rem;transition:all .2s;box-shadow:0 4px 15px #8b45134d}.home-actions button:hover{transform:translateY(-2px);box-shadow:0 6px 20px #8b451366}@media (width<=768px){.home-page h1{font-size:1.8rem}.home-section{padding:20px}}