.family-canvas-shell{position:relative;height:calc(100vh - 72px);min-height:720px;background:#f7f4e8;border:0;overflow:hidden;touch-action:none;cursor:grab}
.family-canvas-shell:active{cursor:grabbing}
.family-canvas-stage{position:absolute;left:0;top:0;transform-origin:0 0;background:#f7f4e8}
.family-canvas-lines{position:absolute;z-index:2;inset:0;overflow:visible;pointer-events:none}
.family-canvas-lines path{fill:none;stroke:#272727;stroke-width:1.15;shape-rendering:geometricPrecision;vector-effect:non-scaling-stroke}
.family-canvas-lines path.is-wrap{stroke:#272727;stroke-width:1.15;stroke-dasharray:none}
.family-canvas-lines path.is-special{stroke-dasharray:5 4}
.family-canvas-watermarks{position:absolute;z-index:0;inset:0;overflow:hidden;pointer-events:none}
.family-canvas-watermarks span{position:absolute;color:#694c3b;font-family:"Microsoft YaHei","SimHei","Noto Sans CJK SC",sans-serif;font-size:42px;font-weight:700;letter-spacing:4px;white-space:nowrap;opacity:.038;transform:rotate(-38deg);transform-origin:center}
.family-canvas-toolbar{position:absolute;z-index:20;left:14px;top:12px;display:flex;align-items:center;gap:5px;padding:6px;background:rgba(255,255,255,.95);border:1px solid #d7d7d7;border-radius:3px;box-shadow:0 3px 12px rgba(0,0,0,.08);cursor:default}
.family-canvas-search{position:relative;display:flex;align-items:center}
.family-canvas-search input{width:185px;height:31px;padding:0 10px;border:1px solid #cfd4da;border-right:0;border-radius:2px 0 0 2px;color:#222;font-size:14px;outline:none}
.family-canvas-search>button{border-radius:0 2px 2px 0!important;color:#8b4c2d!important}
.family-canvas-search-results{position:absolute;z-index:30;left:0;top:calc(100% + 7px);width:350px;max-height:min(420px,calc(100vh - 125px));overflow:auto;border:1px solid #cfc8bc;border-radius:4px;background:#fff;box-shadow:0 10px 28px rgba(0,0,0,.18);cursor:default}
.family-canvas-search-summary{padding:9px 12px;border-bottom:1px solid #eee8df;color:#6e5a4c;font-size:13px}
.family-canvas-search-result{width:100%;height:auto!important;min-height:64px!important;display:grid!important;grid-template-columns:1fr auto;gap:3px 12px;padding:8px 12px!important;border:0!important;border-bottom:1px solid #f0ece5!important;border-radius:0!important;text-align:left;background:#fff!important}
.family-canvas-search-result:last-child{border-bottom:0!important}
.family-canvas-search-result:hover,.family-canvas-search-result:focus{background:#fff7ec!important;outline:0}
.family-canvas-result-name{padding:0!important;color:#1f1f1f!important;font-size:15px!important;font-weight:700}
.family-canvas-result-meta{padding:0!important;color:#815a3a!important;font-size:12px!important;text-align:right}
.family-canvas-result-parent{grid-column:1/-1;padding:0!important;color:#777!important;font-size:12px!important}
.family-canvas-toolbar.has-search-error .family-canvas-search input{border-color:#d33;background:#fff4f4;animation:family-search-shake .18s linear 2}
.family-canvas-generation-control{height:31px;display:flex;align-items:center;gap:4px;padding:0 8px;border:1px solid #cfd4da;border-radius:2px;color:#555;font-size:13px;white-space:nowrap}
.family-canvas-generation-control input{width:52px;height:25px;padding:0 4px;border:1px solid #d8d8d8;border-radius:2px;text-align:center;color:#222;font-size:13px}
.family-canvas-toolbar button{height:31px;min-width:34px;padding:0 10px;border:1px solid #cfd4da;border-radius:2px;background:#fff;color:#333;font-size:14px}
.family-canvas-toolbar button:hover{border-color:#8b4c2d;color:#8b4c2d}
.family-canvas-toolbar span{padding:0 7px;color:#777;font-size:12px}
.family-traditional-person{position:absolute;z-index:5;width:84px;height:124px;padding:0;border:0;background:transparent;color:#050505;font-family:"SimHei","Microsoft YaHei","Noto Sans CJK SC",sans-serif;cursor:pointer}
.family-traditional-person:hover .traditional-name,.family-traditional-person.is-active .traditional-name,.family-traditional-spouse:hover .traditional-spouse-name,.family-traditional-spouse.is-active .traditional-spouse-name{color:#8d3c17;text-shadow:0 0 1px rgba(141,60,23,.18)}
.family-traditional-person.is-search-hit,.family-traditional-spouse.is-search-hit{z-index:12}
.family-traditional-person.is-search-hit .traditional-dot{border-color:#d45a16;background:#fff0d6;box-shadow:0 0 0 5px rgba(255,133,31,.22),0 0 18px rgba(230,94,13,.72);animation:family-search-pulse 1s ease-in-out infinite alternate}
.family-traditional-person.is-search-hit .traditional-name,.family-traditional-spouse.is-search-hit .traditional-spouse-name{color:#c4450a;text-shadow:0 0 8px rgba(255,137,49,.55)}
.family-traditional-person.is-draft{opacity:.58}
.traditional-dot{position:absolute;left:33px;top:0;width:18px;height:18px;border:1.15px solid #292929;border-radius:50%;background:#f7f4e8;box-sizing:border-box}
.family-traditional-person[data-gender="female"] .traditional-dot::after{content:"女";position:absolute;inset:0;display:grid;place-items:center;color:#222;font-size:11px;font-weight:500;line-height:1}
.traditional-rank{position:absolute;left:17px;top:22px;width:50px;height:17px;color:#171717;font-size:12px;font-weight:500;line-height:17px;text-align:center;white-space:nowrap}
.traditional-name{position:absolute;left:32px;top:42px;height:68px;color:#020202;font-size:17px;font-weight:900;line-height:1.12;letter-spacing:1px;writing-mode:vertical-rl;text-orientation:upright}
.family-traditional-spouse{position:absolute;z-index:5;width:30px;height:78px;padding:0;border:0;background:transparent;color:#050505;font-family:"SimHei","Microsoft YaHei","Noto Sans CJK SC",sans-serif;cursor:pointer;transform:translateX(6px)}
.traditional-spouse-prefix{position:absolute;left:7px;top:0;color:#171717;font-size:10px;font-weight:500;line-height:1}
.traditional-spouse-name{position:absolute;left:5px;top:12px;height:64px;font-family:"Microsoft YaHei","Noto Sans CJK SC",sans-serif;font-size:13px;font-weight:400;line-height:1.08;letter-spacing:0;writing-mode:vertical-rl;text-orientation:upright}
.family-canvas-generation{position:absolute;z-index:6;width:34px;height:98px;padding:7px 5px;border:3px double #fff;border-radius:5px;outline:1px solid #252525;background:#0a0a0a;color:#fff;font-family:"SimHei","Microsoft YaHei","Noto Sans CJK SC",sans-serif;font-size:14px;font-weight:700;line-height:1.1;text-align:center;writing-mode:vertical-rl;text-orientation:upright;box-shadow:0 1px 2px rgba(0,0,0,.18);box-sizing:border-box;pointer-events:none}
.family-canvas-continuation{position:absolute;z-index:7;width:22px;height:22px;display:grid;place-items:center;border:1px solid #5f5148;border-radius:50%;background:#fff;color:#42362f;font-family:"Microsoft YaHei","SimHei",sans-serif;font-size:11px;font-weight:800;line-height:1;box-sizing:border-box;pointer-events:none}
.family-canvas-title{position:absolute;z-index:4;width:116px;min-height:470px;display:flex;align-items:center;justify-content:center;padding:23px 15px;border:6px double #6f351d;border-radius:17px;color:#050505;background:rgba(255,255,255,.95);font-family:"SimHei","Microsoft YaHei","Noto Sans CJK SC",sans-serif;font-size:37px;font-weight:900;line-height:1.15;letter-spacing:3px;writing-mode:vertical-rl;text-orientation:upright;box-sizing:border-box}
.family-canvas-empty{display:grid;place-items:center;min-height:720px;color:#7d7d7d}
@keyframes family-search-pulse{from{box-shadow:0 0 0 4px rgba(255,133,31,.2),0 0 10px rgba(230,94,13,.55)}to{box-shadow:0 0 0 8px rgba(255,133,31,.12),0 0 22px rgba(230,94,13,.9)}}
@keyframes family-search-shake{0%,100%{transform:translateX(0)}50%{transform:translateX(4px)}}
.family-person-drawer{position:fixed;z-index:1055;right:0;top:0;width:min(460px,100%);height:100vh;background:#fff;box-shadow:-10px 0 30px rgba(0,0,0,.16);transform:translateX(102%);transition:transform .22s ease;overflow:auto}
.family-person-drawer.is-open{transform:translateX(0)}
.family-person-drawer-head{position:sticky;top:0;z-index:2;display:flex;justify-content:space-between;align-items:center;padding:15px 18px;background:#fff;border-bottom:1px solid #eee}
.family-person-drawer-body{padding:18px}
.family-person-overlay{position:fixed;inset:0;z-index:1050;background:rgba(0,0,0,.28);display:none}
.family-person-overlay.is-open{display:block}
@media(max-width:760px){.family-canvas-shell{height:calc(100vh - 58px);min-height:620px}.family-canvas-toolbar{left:7px;top:7px;right:7px;flex-wrap:wrap}.family-canvas-search{flex:1 1 100%}.family-canvas-search input{width:auto;min-width:0;flex:1}.family-canvas-toolbar [data-tool="in"],.family-canvas-toolbar [data-tool="out"],.family-canvas-toolbar>span{display:none}.family-canvas-search-results{position:fixed;left:7px;top:52px;width:min(350px,calc(100vw - 14px));max-height:55vh}.family-canvas-title{font-size:35px}.family-person-drawer{top:auto;bottom:0;height:min(82vh,720px);width:100%;transform:translateY(102%);border-radius:18px 18px 0 0}.family-person-drawer.is-open{transform:translateY(0)}}