.family-selector{position:relative;max-width:32rem;margin-bottom:var(--space-8)}.family-selector__chip{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-1) var(--space-2) var(--space-1) var(--space-3);background:var(--color-brand-50);border:1px solid var(--color-brand-200);border-radius:var(--radius-full);margin-bottom:var(--space-3)}.family-selector__chip-name{font-size:var(--text-sm);font-weight:500;color:var(--color-brand-700)}.family-selector__chip-remove{display:flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;border:none;background:transparent;color:var(--color-brand-500);cursor:pointer;border-radius:var(--radius-full);transition:background var(--duration-fast) var(--ease-out)}.family-selector__chip-remove:hover{background:var(--color-brand-100)}.family-selector__search{position:relative;display:flex;align-items:center}.family-selector__search-icon{position:absolute;left:var(--space-3);width:1.25rem;height:1.25rem;color:var(--text-muted);pointer-events:none}.family-selector__input{width:100%;padding:var(--space-3) var(--space-10) var(--space-3) var(--space-10);font-size:var(--text-sm);border:var(--border-card);border-radius:var(--radius-lg);background:var(--surface-card);color:var(--text-primary);transition:border-color var(--duration-fast) var(--ease-out),box-shadow var(--duration-fast) var(--ease-out)}.family-selector__input:focus{outline:none;border-color:var(--color-brand-500);box-shadow:0 0 0 3px var(--color-brand-100)}.family-selector__clear-input{position:absolute;right:var(--space-2);display:flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;border:none;background:transparent;color:var(--text-muted);cursor:pointer;border-radius:var(--radius-md)}.family-selector__clear-input:hover{color:var(--text-primary)}.family-selector__dropdown{position:absolute;top:100%;left:0;right:0;z-index:50;margin-top:var(--space-1);background:var(--surface-card);border:var(--border-card);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);max-height:18rem;overflow-y:auto}.family-selector__dropdown-loading{display:flex;justify-content:center;padding:var(--space-4)}.family-selector__spinner{width:1.25rem;height:1.25rem;border:2px solid var(--color-gray-200);border-top-color:var(--color-brand-500);border-radius:50%;animation:spin .6s linear infinite}.family-selector__dropdown-empty{padding:var(--space-4);text-align:center;font-size:var(--text-sm);color:var(--text-muted)}.family-selector__result{display:flex;flex-direction:column;width:100%;padding:var(--space-2) var(--space-3);border:none;background:none;text-align:left;cursor:pointer;transition:background var(--duration-fast) var(--ease-out)}.family-selector__result:hover{background:var(--surface-subtle)}.family-selector__result-name{font-size:var(--text-sm);font-weight:500;color:var(--text-primary)}.family-selector__result-meta{font-size:var(--text-xs);color:var(--text-muted)}@keyframes spin{to{transform:rotate(360deg)}}.tree-node{position:absolute;width:130px;height:44px;display:flex;flex-direction:column;justify-content:center;padding:0 var(--space-3);background:var(--surface-card);border:1px solid var(--color-gray-200);border-radius:var(--radius-lg);cursor:pointer;-webkit-user-select:none;user-select:none;overflow:hidden;animation:ft-fadeIn .35s var(--ease-out) both;transition:border-color .15s,box-shadow .15s}.tree-node:hover{border-color:var(--color-brand-400);box-shadow:0 2px 8px #00000014}.tree-node--current{border-color:var(--color-brand-500);background:var(--color-brand-50);box-shadow:0 0 0 2px var(--color-brand-100)}.tree-node--current:hover{box-shadow:0 0 0 3px var(--color-brand-100)}.tree-node--ancestor{opacity:.8}.tree-node--ancestor:hover{opacity:1}.tree-node__name{font-size:.75rem;font-weight:600;color:var(--text-primary);line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tree-node__year{font-size:.625rem;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}.tree-node__link{position:absolute;right:var(--space-2);top:50%;transform:translateY(-50%);font-size:.625rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--color-brand-600);text-decoration:none;opacity:0;transition:opacity .15s;padding:2px 6px;border-radius:var(--radius-sm);background:var(--surface-card)}.tree-node:hover .tree-node__link{opacity:1}.tree-node__link:hover{color:var(--color-brand-700);background:var(--color-brand-50)}@keyframes ft-fadeIn{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.tree-viz{position:relative;margin-top:var(--space-4)}.tree-viz__controls{display:flex;align-items:center;gap:var(--space-1);margin-bottom:var(--space-2)}.tree-viz__ctrl-btn{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:1px solid var(--color-gray-200);border-radius:var(--radius-md);background:var(--surface-card);color:var(--text-secondary);cursor:pointer;transition:border-color .15s,color .15s,background .15s}.tree-viz__ctrl-btn:hover{border-color:var(--color-brand-400);color:var(--color-brand-600);background:var(--color-brand-50)}.tree-viz__ctrl-btn svg{width:1rem;height:1rem}.tree-viz__ctrl-zoom{font-size:var(--text-xs);font-variant-numeric:tabular-nums;color:var(--text-muted);min-width:2.5rem;text-align:center}.tree-viz__ctrl-sep{width:1px;height:1rem;background:var(--color-gray-200);margin:0 var(--space-1)}.tree-viz__viewport{position:relative;width:100%;height:500px;overflow:hidden;border:1px solid var(--color-gray-200);border-radius:var(--radius-xl);background:radial-gradient(circle,var(--color-gray-100) 1px,transparent 1px);background-size:24px 24px;cursor:grab;touch-action:none}.tree-viz__viewport--dragging{cursor:grabbing}.tree-viz__canvas{position:absolute;top:0;left:0;will-change:transform}.tree-viz__svg{position:absolute;top:0;left:0;pointer-events:none}.tree-viz__path{stroke:var(--color-gray-300);stroke-width:1.5;stroke-linecap:round}.tree-viz__empty{text-align:center;padding:var(--space-12) var(--space-4);color:var(--text-muted);font-size:var(--text-sm)}.tree-viz__hint{font-size:var(--text-xs);color:var(--text-muted);text-align:center;margin-top:var(--space-2)}.featured-families{margin-top:var(--space-8)}.featured-families__header{margin-bottom:var(--space-8)}.featured-families__title{font-family:var(--font-serif);font-size:clamp(1.5rem,3vw,2rem);font-weight:400;margin-bottom:var(--space-2)}.featured-families__subtitle{font-size:var(--text-base);color:var(--text-secondary)}.featured-families__grid{display:grid;grid-template-columns:1fr;gap:var(--space-4)}@media(min-width:640px){.featured-families__grid{grid-template-columns:repeat(2,1fr)}}@media(min-width:1024px){.featured-families__grid{grid-template-columns:repeat(3,1fr)}}.featured-families__card{display:flex;flex-direction:column;padding:var(--space-5) var(--space-6);background:var(--surface-card);border:var(--border-card);border-radius:var(--radius-xl);text-align:left;cursor:pointer;transition:border-color var(--duration-fast) var(--ease-out),box-shadow var(--duration-fast) var(--ease-out),transform var(--duration-fast) var(--ease-out)}.featured-families__card:hover{border-color:var(--color-brand-300);box-shadow:var(--shadow-md);transform:translateY(-2px)}.featured-families__card-name{font-size:var(--text-lg);font-weight:600;color:var(--text-primary);margin-bottom:var(--space-2)}.featured-families__card-desc{font-size:var(--text-sm);color:var(--text-secondary);line-height:var(--leading-relaxed);flex:1;margin-bottom:var(--space-4)}.featured-families__card-footer{display:flex;align-items:center;justify-content:space-between}.featured-families__card-count{font-size:var(--text-xs);color:var(--text-muted);font-variant-numeric:tabular-nums}.featured-families__card-explore{display:inline-flex;align-items:center;gap:var(--space-1);font-size:var(--text-sm);font-weight:500;color:var(--color-brand-600);transition:color var(--duration-fast) var(--ease-out),gap var(--duration-fast) var(--ease-out)}.featured-families__card:hover .featured-families__card-explore{color:var(--color-brand-700);gap:var(--space-2)}.family-tree{max-width:72rem;margin:0 auto;padding:var(--space-12) var(--content-padding) var(--space-16)}.family-tree__hero{margin-bottom:var(--space-6)}.family-tree__crumbs{display:flex;align-items:center;gap:var(--space-2);font-size:var(--text-sm);color:var(--text-muted);margin-bottom:var(--space-4);padding-bottom:var(--space-4);border-bottom:var(--border-subtle)}.family-tree__crumbs a{color:var(--text-secondary);text-decoration:none;transition:color var(--duration-fast) var(--ease-out)}.family-tree__crumbs a:hover{color:var(--text-link)}.family-tree__crumb-sep{color:var(--color-gray-300);font-size:var(--text-base)}.family-tree__badge{display:inline-flex;align-items:center;gap:var(--space-2);font-size:var(--text-xs);font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--color-brand-700);background:var(--color-brand-50);padding:2px var(--space-2);border-radius:var(--radius-full);margin-bottom:var(--space-3)}.family-tree__badge-icon{width:.875rem;height:.875rem}.family-tree__title{font-family:var(--font-serif);font-size:clamp(1.75rem,4vw,2.75rem);font-weight:400;letter-spacing:-.01em;line-height:1.1;margin-bottom:var(--space-2)}.family-tree__subtitle{font-size:var(--text-base);color:var(--text-secondary);line-height:var(--leading-relaxed);max-width:36rem}.family-tree__loading{display:flex;flex-direction:column;align-items:center;gap:var(--space-3);padding:var(--space-12) 0;color:var(--text-muted);font-size:var(--text-sm)}.family-tree__loading-spinner{width:1.5rem;height:1.5rem;border:2px solid var(--color-gray-200);border-top-color:var(--color-brand-500);border-radius:50%;animation:ft-spin .6s linear infinite}.family-tree__error{text-align:center;padding:var(--space-10) var(--space-4);color:var(--text-muted);font-size:var(--text-sm)}.family-tree__cta{margin-top:var(--space-10);padding:var(--space-8) var(--space-6);background:var(--surface-card);border:var(--border-card);border-radius:var(--radius-xl);text-align:center}.family-tree__cta-title{font-family:var(--font-serif);font-size:clamp(1.25rem,2.5vw,1.75rem);font-weight:400;margin-bottom:var(--space-2)}.family-tree__cta-desc{font-size:var(--text-sm);color:var(--text-secondary);max-width:32rem;margin:0 auto var(--space-5);line-height:var(--leading-relaxed)}@keyframes ft-spin{to{transform:rotate(360deg)}}