:root{--bg-primary: #fafafa;--bg-secondary: #ffffff;--bg-tertiary: #f5f5f5;--surface: #ffffff;--surface-elevated: rgba(255, 255, 255, .95);--text-primary: #1a1a1a;--text-secondary: #6b7280;--text-tertiary: #9ca3af;--accent-primary: #1a1a1a;--accent-secondary: #6b7280;--accent-hover: #374151;--border-light: rgba(0, 0, 0, .08);--border-medium: rgba(0, 0, 0, .12);--shadow-sm: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .08);--shadow-md: 0 4px 6px rgba(0, 0, 0, .07), 0 2px 4px rgba(0, 0, 0, .06);--shadow-lg: 0 10px 15px rgba(0, 0, 0, .1), 0 4px 6px rgba(0, 0, 0, .08);--shadow-xl: 0 20px 25px rgba(0, 0, 0, .1), 0 10px 10px rgba(0, 0, 0, .06);--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--radius-xl: 20px;--radius-full: 9999px;--font-sans: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-mono: "Source Code Pro", "SF Mono", Monaco, monospace}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-sans);color:var(--text-primary);background:#f5f5f5;background-attachment:fixed;height:100vh;overflow:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}h1,h2,h3,h4,h5,h6{font-weight:600;line-height:1.2}p{line-height:1.6}:focus-visible{outline:2px solid var(--accent-primary);outline-offset:2px}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border-medium);border-radius:var(--radius-full)}::-webkit-scrollbar-thumb:hover{background:var(--text-tertiary)}::selection{background:#3b82f633;color:var(--text-primary)}.app{display:flex;flex-direction:column;height:100vh;width:100vw}main{position:relative;flex:1;overflow:hidden;background:var(--bg-primary)}#chart{width:100%;height:100%;display:block;touch-action:none;user-select:none;-webkit-user-select:none;background:radial-gradient(circle at 20% 20%,rgba(59,130,246,.03) 0%,transparent 50%),radial-gradient(circle at 80% 80%,rgba(139,92,246,.03) 0%,transparent 50%),var(--bg-primary);cursor:grab}#chart:active{cursor:grabbing}.empty-state{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;pointer-events:none;z-index:1}.empty-content{text-align:center;padding:2rem;max-width:400px}.empty-icon{width:80px;height:80px;color:var(--text-tertiary);margin:0 auto 1.5rem;opacity:.5}.empty-content h2{font-size:1.5rem;color:var(--text-primary);margin-bottom:.5rem}.empty-content p{color:var(--text-secondary);font-size:.95rem}#status{position:absolute;left:20px;bottom:20px;background:var(--surface-elevated);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid var(--border-light);padding:10px 16px;border-radius:var(--radius-full);box-shadow:var(--shadow-lg);font-size:.85rem;color:var(--text-secondary);pointer-events:none;font-weight:500;z-index:10}.top-toolbar{position:absolute;left:20px;top:20px;right:20px;z-index:20;display:flex;align-items:center;gap:12px;pointer-events:none;justify-content:start;flex-direction:row;flex-wrap:wrap}.top-toolbar>*{pointer-events:auto}.toolbar-btn,.toolbar-menu-btn,.toolbar-select{height:44px;border:1px solid var(--border-light);border-radius:var(--radius-md);padding:0 11px;background:var(--surface-elevated);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);color:var(--text-primary);display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:.9rem;font-weight:600;box-shadow:var(--shadow-sm);cursor:pointer;white-space:nowrap;transition:all .2s cubic-bezier(.4,0,.2,1);font-family:var(--font-sans)}.toolbar-btn:hover,.toolbar-menu-btn:hover,.toolbar-select:hover{transform:translateY(-1px);box-shadow:var(--shadow-md);border-color:var(--border-medium)}.toolbar-btn:active,.toolbar-menu-btn:active{transform:translateY(0);box-shadow:var(--shadow-sm)}.toolbar-btn.dark{background:var(--text-primary);color:#fff;border:none}.toolbar-btn.dark:hover{background:var(--text-secondary)}.toolbar-btn.round{width:44px;padding:0;font-size:1.2rem}.toolbar-btn:disabled{opacity:.5;cursor:not-allowed;transform:none!important}.toolbar-select{min-width:220px;padding:0 40px 0 16px;font-weight:600;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236b7280'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:20px}.toolbar-select:disabled{opacity:.5;cursor:not-allowed}.toolbar-dropdown{position:relative}.toolbar-menu{position:absolute;top:54px;left:0;min-width:320px;background:var(--surface-elevated);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid var(--border-light);border-radius:var(--radius-lg);padding:16px;box-shadow:var(--shadow-xl);display:none;gap:10px;max-height:500px;overflow-y:auto}.toolbar-dropdown.open .toolbar-menu{display:grid;animation:slideDown .2s cubic-bezier(.4,0,.2,1)}.link-type-row{display:grid;grid-template-columns:24px 20px 1fr;align-items:center;gap:10px;font-size:.9rem;color:var(--text-primary);padding:10px;border-radius:var(--radius-md);cursor:pointer;transition:background .15s ease}.link-type-row:hover{background:var(--bg-tertiary)}.link-type-row input[type=checkbox]{width:18px;height:18px;cursor:pointer;accent-color:var(--accent-primary)}.type-swatch{width:16px;height:16px;border-radius:50%;border:2px solid var(--border-light);box-shadow:var(--shadow-sm)}.add-type-row{display:grid;grid-template-columns:1fr auto;gap:10px;border-top:1px solid var(--border-light);padding-top:12px;margin-top:8px}.add-type-row input{height:40px;border:1px solid var(--border-light);border-radius:var(--radius-md);padding:0 12px;font-size:.9rem;background:var(--bg-primary);color:var(--text-primary);font-family:var(--font-sans);transition:border-color .2s ease}.add-type-row input:focus{outline:none;border-color:var(--accent-primary)}.mini-btn{height:37px;border-radius:var(--radius-md);padding:0 16px;font-size:.85rem;font-weight:700;border:none;background:linear-gradient(135deg,var(--accent-primary),var(--accent-secondary));color:#fff;cursor:pointer;transition:all .2s ease;font-family:var(--font-sans)}.mini-btn:hover{transform:translateY(-1px);box-shadow:var(--shadow-md)}.mini-btn.danger-mini{background:#fee2e2;color:#dc2626}.mini-btn.danger-mini:hover{background:#fecaca}.new-tree-widget{position:relative}.new-tree-popover{position:absolute;top:calc(100% + 8px);left:0;display:none;align-items:center;gap:8px;background:var(--surface-elevated);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid var(--border-light);border-radius:var(--radius-md);padding:10px 12px;box-shadow:var(--shadow-xl);white-space:nowrap;z-index:100;animation:slideDown .15s cubic-bezier(.4,0,.2,1)}.new-tree-popover.open{display:flex}.new-tree-popover input{height:36px;border:1px solid var(--border-light);border-radius:var(--radius-md);padding:0 10px;font-size:.9rem;background:var(--bg-primary);color:var(--text-primary);font-family:var(--font-sans);width:200px;transition:border-color .2s ease}.new-tree-popover input:focus{outline:none;border-color:var(--accent-primary)}.selected-link-tools{border-top:1px solid var(--border-light);margin-top:8px;padding-top:12px;display:grid;gap:10px}.selected-link-tools .hint{color:var(--text-secondary);font-size:.8rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em}.selected-link-tools select{height:40px;border:1px solid var(--border-light);border-radius:var(--radius-md);padding:0 12px;font-size:.9rem;background:var(--bg-primary);color:var(--text-primary);cursor:pointer;font-family:var(--font-sans)}.link-ctx-menu{position:fixed;z-index:1000;background:var(--surface-elevated);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid var(--border-light);border-radius:var(--radius-lg);padding:10px;box-shadow:var(--shadow-xl);min-width:160px;animation:slideDown .15s cubic-bezier(.4,0,.2,1)}.link-ctx-title{font-size:.72rem;font-weight:700;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.06em;padding:0 6px 6px}.link-ctx-types{display:flex;flex-direction:column;gap:2px;margin-bottom:8px}.link-ctx-type-btn{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:var(--radius-md);border:1px solid transparent;background:none;color:var(--text-primary);font-size:.9rem;font-family:var(--font-sans);font-weight:500;cursor:pointer;text-align:left;transition:background .1s ease}.link-ctx-type-btn:before{content:"";width:11px;height:11px;border-radius:50%;background:var(--swatch);flex-shrink:0}.link-ctx-type-btn:hover{background:var(--bg-tertiary)}.link-ctx-type-btn.active{border-color:var(--border-medium);background:var(--bg-secondary);font-weight:700}.link-ctx-remove{width:100%;padding:7px 10px;border-radius:var(--radius-md);border:none;background:#dc262614;color:#dc2626;font-size:.85rem;font-family:var(--font-sans);font-weight:600;cursor:pointer;transition:background .1s ease;text-align:left}.link-ctx-remove:hover{background:#dc26262e}.axis-line{stroke-width:3;stroke-linecap:round;opacity:.33;transition:opacity .2s ease}.axis-wrap{cursor:pointer;pointer-events:all}.axis-wrap:hover .axis-line{opacity:.6}.axis-hit{stroke:transparent;stroke-width:20;pointer-events:stroke;cursor:pointer}.axis-label{fill:var(--text-secondary);font-size:12px;opacity:0;pointer-events:none;transition:opacity .15s ease;paint-order:stroke fill}.axis-wrap.axis-hover .axis-label{opacity:1;animation:fadeIn .15s ease}.axis-add-btn{cursor:pointer;transition:opacity .2s ease}.axis-add-btn circle{fill:#fffffff2;stroke:var(--border-medium);stroke-width:1.5;filter:drop-shadow(0 2px 6px rgba(0,0,0,.12))}.axis-add-btn text{fill:var(--text-secondary);pointer-events:none}@media (hover: hover){.axis-add-btn{opacity:0}.axis-wrap:hover .axis-add-btn{opacity:1}}@media (hover: none){.axis-add-btn{opacity:.75}}.side-axis-add{cursor:pointer;opacity:.6;transition:opacity .2s ease;pointer-events:all}.side-axis-add:hover{opacity:1}.side-axis-add circle{fill:#fffffff2;stroke:var(--border-medium);stroke-width:1.5;filter:drop-shadow(0 4px 12px rgba(0,0,0,.15));transition:filter .15s ease,stroke-width .15s ease}.side-axis-add:hover circle{stroke-width:2;filter:drop-shadow(0 5px 14px rgba(0,0,0,.2))}.side-axis-add text{fill:var(--text-secondary);pointer-events:none}.side-tooltip{fill:var(--text-secondary);font-size:12px;opacity:0;pointer-events:none;transition:opacity .15s ease;paint-order:stroke fill}.side-axis-add.side-hover .side-tooltip{opacity:1;animation:fadeIn .15s ease}.parent-link{fill:none;stroke-width:2;opacity:.5;cursor:pointer;transition:all .2s ease}.parent-link:hover{opacity:.9;stroke-width:3}.parent-link.default{stroke-dasharray:8 5;stroke:#94a3b8}.parent-link.father{stroke:#3b82f6}.parent-link.mother{stroke:#ec4899}.parent-link.selected{stroke-width:4;opacity:1;filter:drop-shadow(0 2px 4px rgba(0,0,0,.2))}.married-link{stroke:#64748b;cursor:pointer;transition:all .2s ease}.married-link:hover{opacity:1;stroke-width:3.5}.married-link.selected{stroke-width:4.5;opacity:1;filter:drop-shadow(0 2px 4px rgba(0,0,0,.2))}.node{cursor:pointer}.node rect{stroke:var(--border-medium);stroke-width:1.5;rx:14;ry:14;filter:drop-shadow(0 4px 12px rgba(0,0,0,.1));transition:stroke-width .15s ease,filter .15s ease}.node:hover rect{stroke-width:2;filter:drop-shadow(0 6px 16px rgba(0,0,0,.15))}.node.selected rect{stroke:var(--text-primary);stroke-width:3;filter:drop-shadow(0 8px 20px rgba(0,0,0,.2))}.node text{font-size:13px;fill:var(--text-primary);pointer-events:none;font-weight:500}.node text.editable-text{pointer-events:auto;cursor:pointer}.node .line-0{font-weight:700;font-size:13.5px}.node .line-1,.node .line-2,.node .line-3{fill:var(--text-secondary);font-size:11.5px;font-weight:400}.node-foreign-editor{overflow:visible;pointer-events:all;z-index:100}.node-foreign-editor textarea{box-sizing:border-box;width:220px;height:58px;border:2px solid var(--text-primary);border-radius:14px;padding:10px 12px;background:#fff;color:var(--text-primary);font:13px var(--font-sans);line-height:1.3;resize:none;outline:none;box-shadow:0 8px 24px #0003}.connector-dot{cursor:crosshair;pointer-events:all}@media (hover: none){.connector-dot circle{stroke-width:3;r:9}}.node.link-pending-source rect{stroke-dasharray:6 3;stroke-width:3.5;animation:pulse 1s ease-in-out infinite}.node.link-pending-source .connector-dot circle{fill:var(--text-primary);stroke:var(--text-primary)}.connector-dot circle{stroke:var(--text-secondary);fill:#fff;stroke-width:2.5;filter:drop-shadow(0 2px 6px rgba(0,0,0,.2));transition:fill .15s ease,filter .15s ease,stroke-width .15s ease}.connector-dot:hover circle{fill:var(--text-primary);stroke-width:3;filter:drop-shadow(0 3px 8px rgba(0,0,0,.3))}.connector-tooltip{fill:#000;font-size:11px;opacity:0;pointer-events:none;transition:opacity .15s ease}.connector-dot.connector-hover .connector-tooltip{opacity:1;animation:fadeIn .15s ease}.drag-preview{fill:none;stroke:var(--text-primary);stroke-width:2.5;stroke-dasharray:8 5;opacity:.7;pointer-events:none}.drop-target rect{stroke:var(--text-primary);stroke-width:3;animation:pulse .6s ease-in-out infinite}.delete-node-x,.edit-node-btn{display:none;cursor:pointer;pointer-events:all}.node:hover .delete-node-x,.node:hover .edit-node-btn,.node.selected .delete-node-x,.node.selected .edit-node-btn{display:block;animation:fadeIn .2s ease}.delete-node-x circle{fill:#000;stroke:#fff;stroke-width:2;filter:drop-shadow(0 2px 6px rgba(239,68,68,.3));transition:filter .15s ease,stroke-width .15s ease}.delete-node-x:hover circle{stroke-width:2.5;filter:drop-shadow(0 3px 8px rgba(239,68,68,.4))}.edit-node-btn circle{fill:#fff;stroke:var(--border-medium);stroke-width:1.5;filter:drop-shadow(0 2px 6px rgba(0,0,0,.15));transition:filter .15s ease,stroke-width .15s ease}.edit-node-btn:hover circle{stroke-width:2;filter:drop-shadow(0 3px 8px rgba(0,0,0,.2))}.delete-node-x text{fill:#fff;font-size:14px;font-weight:900;pointer-events:none}.edit-node-btn text{fill:var(--text-primary);font-size:12px;font-weight:900;pointer-events:none}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse{0%,to{stroke-width:3}50%{stroke-width:5}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}