*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg:#eef3f9;--surface:#fff;--border:#d4dce8;--text:#1a1a2e;--text-2:#555e6e;--text-3:#8a93a3;--accent:#2563eb;--accent-hover:#1d4ed8;--danger:#dc2626;--node-fill:#fff;--node-stroke:#334155;--radius:8px;--dot-color:#c5cfe0;--dot-size:1.2px;--dot-gap:22px}html{font-size:15px}body{background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Noto Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;line-height:1.5}button,input,select,textarea{-webkit-tap-highlight-color:transparent}.app-shell{height:100dvh;box-sizing:border-box;height:100svh;min-height:0;padding-top:env(safe-area-inset-top,0px);padding-right:env(safe-area-inset-right,0px);padding-bottom:env(safe-area-inset-bottom,0px);padding-left:env(safe-area-inset-left,0px);flex-direction:column;display:flex;overflow:hidden}.app-topbar{background:var(--surface);border-bottom:1px solid var(--border);flex-shrink:0;justify-content:space-between;align-items:center;gap:10px;min-height:52px;padding:0 20px;display:flex}.topbar-brand{flex-direction:column;flex-shrink:1;gap:1px;min-width:0;display:flex}.app-topbar h1{letter-spacing:-.01em;text-overflow:ellipsis;white-space:nowrap;font-size:1rem;font-weight:600;overflow:hidden}.app-tagline{color:var(--text-2);letter-spacing:.03em;text-overflow:ellipsis;white-space:nowrap;font-family:Cormorant Garamond,Georgia,Times New Roman,serif;font-size:.82rem;font-style:italic;font-weight:500;line-height:1.15;overflow:hidden}.topbar-actions{flex:1;justify-content:flex-end;align-items:center;gap:8px;min-width:0;display:flex}.search-box{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);color:var(--text-3);align-items:center;gap:6px;padding:5px 10px;display:flex}.search-box input{font:inherit;color:var(--text);background:0 0;border:none;outline:none;flex:1;width:120px;min-width:0;font-size:.85rem}.search-box input::placeholder{color:var(--text-3)}.btn-add{background:var(--accent);color:#fff;border-radius:var(--radius);font:inherit;cursor:pointer;border:none;align-items:center;gap:4px;padding:6px 14px;font-size:.82rem;font-weight:500;transition:background .15s;display:flex}.btn-add:hover{background:var(--accent-hover)}.status-line{color:var(--text-3);background:var(--surface);border-bottom:1px solid var(--border);flex-wrap:wrap;flex-shrink:0;align-items:center;gap:8px 16px;padding:6px 20px;font-size:.72rem;display:flex}.error-banner{color:var(--danger);background:#fef2f2;border-bottom:1px solid #fecaca;padding:8px 20px;font-size:.82rem}.tree-viewport{contain:layout paint;background:radial-gradient(circle, var(--dot-color) var(--dot-size), transparent var(--dot-size)), var(--bg);background-size:var(--dot-gap) var(--dot-gap);cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;overscroll-behavior:none;flex:1;min-height:0;position:relative;overflow:hidden}.tree-viewport.is-panning{cursor:grabbing}.tree-viewport.is-dragging-node{cursor:default}.selection-badge{z-index:11;border:1px solid var(--border);background:var(--surface);color:var(--text-2);border-radius:999px;padding:4px 10px;font-size:.75rem;font-weight:600;position:absolute;top:12px;left:16px}.tree-canvas{pointer-events:none;will-change:transform;-webkit-backface-visibility:hidden;backface-visibility:hidden;position:absolute;top:0;left:0}.tree-canvas>*{pointer-events:auto}.tree-svg{display:block;overflow:visible}.zoom-controls{z-index:12;border-radius:var(--radius);border:1px solid var(--border);flex-direction:column;gap:4px;display:flex;position:absolute;bottom:16px;right:16px;overflow:hidden;box-shadow:0 4px 14px #0f172a1f}.zoom-btn{background:var(--surface);width:40px;height:40px;color:var(--text);cursor:pointer;border:none;justify-content:center;align-items:center;transition:background .15s;display:flex}.zoom-btn:hover{background:var(--bg)}.zoom-btn:active{background:#e2e8f0}.zoom-btn+.zoom-btn{border-top:1px solid var(--border)}.selection-rect{fill:#2563eb26;stroke:var(--accent);stroke-width:1.5px;stroke-dasharray:6 4;pointer-events:none}.tree-node{transition:transform .15s}.node-circle{fill:var(--node-fill);stroke:var(--node-stroke);stroke-width:2px;transition:r .2s,fill .2s,stroke .2s}.tree-node:hover .node-circle{fill:#e8edf5;stroke:var(--accent)}.tree-node.is-selected .node-circle{fill:var(--accent);stroke:var(--accent)}.node-name{fill:var(--text);pointer-events:none;font-size:16px;font-weight:600}.tree-node.is-selected .node-name{fill:var(--accent)}.node-relation{fill:var(--text-3);pointer-events:none;font-size:13px}.tree-node.is-selected .node-relation{fill:var(--accent-hover)}.node-notes-fo{pointer-events:none;overflow:visible}.node-notes{color:var(--text-2);text-align:center;white-space:pre-wrap;word-break:break-word;pointer-events:none;margin:0;padding:0 4px;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Noto Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;font-size:11px;font-style:italic;line-height:1.25}.tree-node.is-selected .node-notes{color:var(--accent-hover)}.pinned-node-card{border:1px solid var(--border);background:var(--surface);height:100%;max-height:340px;color:var(--text);border-radius:12px;flex-direction:column;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Noto Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;font-size:13px;display:flex;overflow:hidden;box-shadow:0 10px 28px #0f172a2e}.pinned-node-card-inner{flex:1;min-height:0;padding:10px 12px 8px;overflow-y:auto}.pinned-node-card .person-detail-content--compact .detail-eyebrow{margin-bottom:2px;font-size:.62rem}.pinned-node-card .person-detail-content--compact h2{margin-bottom:2px;font-size:.95rem;line-height:1.2}.pinned-node-card .person-detail-content--compact .detail-relation{margin-bottom:8px;font-size:.72rem}.pinned-node-card .person-detail-content--compact .detail-meta{gap:4px;margin-bottom:8px;font-size:.72rem}.pinned-node-card .person-detail-content--compact .detail-meta span{gap:4px}.pinned-node-card .person-detail-content--compact .detail-notes{margin-bottom:0;font-size:.72rem}.pinned-node-card-toolbar{border-top:1px solid var(--border);background:var(--bg);flex-shrink:0;gap:6px;padding:6px 8px;display:flex}.pinned-toolbar-btn{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);font:inherit;color:var(--text-2);cursor:pointer;flex:1;justify-content:center;align-items:center;gap:4px;padding:5px 8px;font-size:.72rem;font-weight:500;display:flex}.pinned-toolbar-btn:hover{background:#fff}.pinned-toolbar-btn--accent{color:var(--accent);border-color:#bfdbfe}.pinned-toolbar-btn--accent:hover{background:#eff6ff}.empty-state{min-height:300px;color:var(--text-3);justify-content:center;align-items:center;font-size:.9rem;display:flex}.tree-legend{z-index:10;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);color:var(--text-2);flex-direction:column;gap:6px;max-width:min(280px,100% - 32px);padding:10px 14px;font-size:.75rem;display:flex;position:absolute;bottom:16px;left:16px;box-shadow:0 1px 4px #0000000f}.legend-item{align-items:center;gap:8px;display:flex}.legend-line{border-radius:2px;flex-shrink:0;width:24px;height:2.5px;display:inline-block}.legend-line.dashed{background:repeating-linear-gradient(90deg,currentColor 0 5px,#0000 5px 8px);background-color:#0000!important}.legend-item:first-child .legend-line.dashed{color:#334155}.legend-item:nth-child(2) .legend-line.dashed{color:#e11d48}.legend-item:nth-child(3) .legend-line.dashed{color:#2563eb}.drawer-scrim{cursor:default;z-index:90;background:#00000026;border:none;position:fixed;top:0;bottom:0;left:0;right:0}.drawer{content-visibility:auto;contain-intrinsic-size:auto 500px;top:calc(74px + env(safe-area-inset-top,0px));right:max(20px, env(safe-area-inset-right,0px));width:min(360px, calc(100vw - 32px - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px)));background:var(--surface);border:1px solid var(--border);clip-path:polygon(12px 0,calc(100% - 12px) 0,100% 12px,100% calc(100% - 12px),calc(100% - 12px) 100%,12px 100%,0 calc(100% - 12px),0 12px);z-index:100;-webkit-overflow-scrolling:touch;max-height:min(76svh,700px);padding:16px;padding-bottom:max(16px, env(safe-area-inset-bottom,0px));opacity:0;border-radius:20px;transition:transform .25s,opacity .25s;position:fixed;overflow-y:auto;transform:translate(120%);box-shadow:0 14px 38px #0f172a33}.drawer.is-open{opacity:1;transform:translate(0)}.drawer-close{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);width:32px;height:32px;color:var(--text-2);cursor:pointer;justify-content:center;align-items:center;margin-bottom:16px;margin-left:auto;display:flex}.detail-section{border-bottom:1px solid var(--border);margin-bottom:24px;padding-bottom:20px}.detail-eyebrow{text-transform:uppercase;letter-spacing:.06em;color:var(--text-3);margin-bottom:4px;font-size:.7rem}.detail-section h2{margin-bottom:2px;font-size:1.15rem;font-weight:600}.detail-relation{color:var(--text-2);margin-bottom:12px;font-size:.85rem}.detail-meta{color:var(--text-2);flex-direction:column;gap:6px;margin-bottom:12px;font-size:.8rem;display:flex}.detail-meta span{align-items:center;gap:6px;display:flex}.detail-notes{color:var(--text-2);margin-bottom:12px;font-size:.82rem;font-style:italic}.detail-actions{gap:8px;display:flex}.detail-actions button{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);font:inherit;color:var(--text);cursor:pointer;align-items:center;gap:4px;padding:5px 12px;font-size:.78rem;transition:background .15s;display:flex}.detail-actions button:hover{background:var(--bg)}.detail-actions .danger{color:var(--danger);border-color:#fecaca}.detail-actions .danger:hover{background:#fef2f2}.detail-actions .pin-btn{color:var(--accent);border-color:#bfdbfe}.detail-actions .pin-btn:hover{background:#eff6ff}.form-section{flex-direction:column;gap:10px;display:flex}.form-section h3{font-size:.95rem;font-weight:600}.link-btn{font:inherit;color:var(--accent);cursor:pointer;text-align:left;background:0 0;border:none;padding:0;font-size:.78rem}.field-label{color:var(--text-2);margin-bottom:-4px;font-size:.78rem;font-weight:500}.add-form{flex-direction:column;gap:8px;display:flex}.add-form input,.add-form select,.add-form textarea{border:1px solid var(--border);border-radius:var(--radius);width:100%;font:inherit;color:var(--text);background:var(--surface);outline:none;padding:7px 10px;font-size:.82rem;transition:border-color .15s}.add-form input:focus,.add-form select:focus,.add-form textarea:focus{border-color:var(--accent)}.add-form textarea{resize:vertical;min-height:60px}.add-form select[multiple]{min-height:72px}.form-row{gap:8px;display:flex}.form-row>*{flex:1}.submit{justify-content:center;margin-top:4px}.searchable-select{flex-direction:column;gap:4px;display:flex}.ss-search{border:1px solid var(--border);border-radius:var(--radius);color:var(--text-3);align-items:center;gap:6px;padding:5px 8px;display:flex}.ss-search input{font:inherit;color:var(--text);background:0 0;border:none;outline:none;width:100%;font-size:.8rem}.ss-search input::placeholder{color:var(--text-3)}.ss-list{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);max-height:120px;overflow-y:auto}.ss-option{cursor:pointer;align-items:center;gap:6px;padding:4px 8px;font-size:.8rem;transition:background .1s;display:flex}.ss-option:hover{background:var(--bg)}.ss-option input[type=checkbox]{width:14px;height:14px;accent-color:var(--accent);flex-shrink:0}.ss-empty{text-align:center;color:var(--text-3);padding:8px;font-size:.78rem}.person-attachments{border-top:1px solid var(--border);margin-top:14px;padding-top:12px}.person-attachments--compact{margin-top:8px;padding-top:8px}.attachments-header{color:var(--text-2);align-items:center;gap:6px;margin-bottom:8px;font-size:.78rem;font-weight:600;display:flex}.person-attachments--compact .attachments-header{margin-bottom:6px;font-size:.72rem}.attachment-upload{border:1px dashed var(--border);border-radius:var(--radius);color:var(--accent);cursor:pointer;align-items:center;gap:6px;padding:6px 10px;font-size:.78rem;transition:background .15s,border-color .15s;display:inline-flex}.attachment-upload:hover{background:#eff6ff;border-color:#93c5fd}.attachment-upload input{display:none}.attachment-hint,.attachment-empty{color:var(--text-3);margin-top:6px;font-size:.72rem}.attachment-error{color:var(--danger);margin-top:6px;font-size:.72rem}.attachment-block{border:1px solid var(--border);border-radius:var(--radius);background:var(--bg);margin-top:10px;padding:8px}.attachment-row{justify-content:space-between;align-items:center;gap:8px;margin-bottom:6px;display:flex}.attachment-name{color:var(--text);text-overflow:ellipsis;white-space:nowrap;min-width:0;font-size:.76rem;overflow:hidden}.attachment-delete{color:var(--text-3);cursor:pointer;background:0 0;border:none;border-radius:4px;flex-shrink:0;justify-content:center;align-items:center;padding:4px;display:flex}.attachment-delete:hover{color:var(--danger);background:#fef2f2}.media-player{background:#000;border-radius:6px;width:100%;max-height:160px}.person-attachments--compact .media-player{max-height:100px}.text-preview{color:var(--text-2);white-space:pre-wrap;word-break:break-word;background:var(--surface);border-radius:4px;max-height:120px;margin:0;padding:6px;font-size:.72rem;line-height:1.4;overflow-y:auto}.attachment-download{color:var(--accent);align-items:center;gap:6px;font-size:.76rem;text-decoration:none;display:inline-flex}.attachment-download:hover{text-decoration:underline}.pinned-node-card-inner .person-attachments{max-height:140px;overflow-y:auto}@media (max-width:640px){.app-topbar{flex-wrap:wrap;row-gap:8px;padding-top:8px;padding-bottom:8px}.search-box{flex:1;min-width:0}.search-box input{width:auto;font-size:1rem}.add-form input,.add-form select,.add-form textarea,.ss-search input{font-size:1rem}.drawer{right:max(10px, env(safe-area-inset-right,0px));width:calc(100vw - 20px - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px));top:calc(124px + env(safe-area-inset-top,0px));max-height:calc(100svh - 136px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px))}.tree-legend{padding:8px 10px;font-size:.7rem;bottom:10px;left:10px}}@media (pointer:coarse){.btn-add{min-height:44px;padding-left:16px;padding-right:16px}.drawer-close{min-width:44px;min-height:44px}.detail-actions{flex-wrap:wrap}.detail-actions button{min-height:44px;padding-left:14px;padding-right:14px}.pinned-toolbar-btn{min-height:44px}.zoom-btn{width:44px;height:44px}.submit{min-height:48px}}.btn-edit-lock{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);color:var(--text-2);cursor:pointer;align-items:center;gap:6px;padding:8px 14px;font-size:.9rem;font-weight:500;display:inline-flex}.btn-edit-lock:hover{border-color:var(--accent);color:var(--accent)}.edit-modal-backdrop{z-index:100;background:#0f172a73;justify-content:center;align-items:center;padding:20px;display:flex;position:fixed;top:0;bottom:0;left:0;right:0}.edit-modal{background:var(--surface);border:1px solid var(--border);border-radius:12px;width:min(100%,380px);padding:28px 24px 24px;position:relative;box-shadow:0 20px 50px #0f172a2e}.edit-modal-close{border-radius:var(--radius);width:32px;height:32px;color:var(--text-3);cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;display:flex;position:absolute;top:12px;right:12px}.edit-modal-close:hover{background:var(--bg);color:var(--text)}.edit-modal-icon{width:44px;height:44px;color:var(--accent);background:#eff6ff;border-radius:50%;justify-content:center;align-items:center;margin-bottom:12px;display:flex}.edit-modal h2{margin-bottom:6px;font-size:1.15rem;font-weight:600}.edit-modal-desc{color:var(--text-2);margin-bottom:18px;font-size:.9rem}.edit-modal-form{flex-direction:column;gap:12px;display:flex}.edit-modal-form label{color:var(--text-2);flex-direction:column;gap:6px;font-size:.85rem;display:flex}.edit-modal-form input{border:1px solid var(--border);border-radius:var(--radius);padding:10px 12px;font-size:1rem}.edit-modal-error{color:var(--danger);font-size:.85rem}.edit-modal-actions{flex-direction:column;gap:10px;display:flex}.edit-modal-logout{justify-content:center;align-items:center;gap:6px;display:inline-flex}