.tree-canvas{--ink:rgb(var(--foreground)/0.18);--ink-soft:rgb(var(--foreground)/0.1);--card-w:7.4rem;--card-h:3.45rem;--avatar:1.85rem;--line:1px;--stem:0.55rem;--drop:0.85rem;--kids-lead:1.7rem;--bond-w:1.6rem;--pair-gap:0.7rem;--kid-gap:1rem;position:relative;overflow:hidden;width:100%;border-radius:1.1rem;border:1px solid rgb(var(--border)/.7);background:radial-gradient(120% 80% at 50% 0,rgb(var(--cream)/.65),transparent 55%),rgb(var(--surface));padding:1rem .4rem 2.15rem}.tree-canvas__share{position:absolute;left:.7rem;bottom:.55rem;z-index:4}.tree-scroll{position:relative;z-index:1;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:none}.tree-scroll::-webkit-scrollbar{display:none}.tree-scroll--fade-left{-webkit-mask-image:linear-gradient(90deg,transparent,#000 .7rem,#000);mask-image:linear-gradient(90deg,transparent,#000 .7rem,#000)}.tree-scroll--fade-right{-webkit-mask-image:linear-gradient(90deg,#000,#000 calc(100% - .7rem),transparent);mask-image:linear-gradient(90deg,#000,#000 calc(100% - .7rem),transparent)}.tree-scroll--fade-left.tree-scroll--fade-right{-webkit-mask-image:linear-gradient(90deg,transparent,#000 .7rem,#000 calc(100% - .7rem),transparent);mask-image:linear-gradient(90deg,transparent,#000 .7rem,#000 calc(100% - .7rem),transparent)}.tree-scroll__inner{display:flex;min-width:100%}.tree-family,.tree-scroll__inner{justify-content:center;width:-moz-max-content;width:max-content}.tree-family{--pair-overhang:calc((var(--card-w) + var(--pair-gap)) / 2);display:grid;margin:0 auto;padding-inline:calc(var(--pair-overhang) + .85rem);grid-template-rows:auto auto auto;grid-auto-flow:column;grid-auto-columns:max-content;-moz-column-gap:var(--kid-gap);column-gap:var(--kid-gap)}.tree-col{display:contents}.tree-col__core,.tree-col__head,.tree-col__kids{display:flex;width:var(--card-w);min-width:var(--card-w);max-width:var(--card-w);flex-direction:column;align-items:center;justify-self:center;overflow:visible}.tree-col--narrow>.tree-col__core,.tree-col--narrow>.tree-col__head,.tree-col--narrow>.tree-col__kids{width:var(--bond-w);min-width:0;max-width:var(--bond-w)}.tree-col__head{align-items:center;justify-content:flex-end;min-height:0;padding-bottom:.1rem}.tree-col__core{justify-content:flex-end;min-height:var(--card-h)}.tree-col__kids{justify-content:flex-start}.tree-col--span>.tree-col__core,.tree-col--span>.tree-col__head{width:calc(var(--card-w) * var(--shared-n) + var(--kid-gap) * (var(--shared-n) - 1));min-width:calc(var(--card-w) * var(--shared-n) + var(--kid-gap) * (var(--shared-n) - 1));max-width:none}.tree-col--span>.tree-col__kids{width:-moz-max-content;width:max-content;min-width:-moz-max-content;min-width:max-content;max-width:none}.tree-col--wide-bond:not(.tree-col--span)>.tree-col__kids,.tree-col--wide-bond>.tree-col__core,.tree-col--wide-bond>.tree-col__head{width:calc(var(--card-w) + var(--pair-gap) + var(--bond-w));min-width:calc(var(--card-w) + var(--pair-gap) + var(--bond-w));max-width:none}.tree-bond{position:relative;align-self:stretch;width:100%;min-height:var(--card-h);pointer-events:none}.tree-bond__rail{position:absolute;top:50%;right:calc(var(--kid-gap) / -2);left:calc(var(--kid-gap) / -2);height:var(--line);background:var(--ink);transform:translateY(-50%)}.tree-bond--broken .tree-bond__rail{background:repeating-linear-gradient(to right,var(--ink) 0 3px,transparent 3px 6px)}.tree-bond__drop{position:absolute;top:50%;left:50%;width:var(--line);height:50%;background:var(--ink);transform:translateX(-50%)}.tree-bond__break{position:absolute;top:50%;left:50%;z-index:3;display:flex;width:.9rem;height:.95rem;align-items:center;justify-content:center;gap:.16rem;background:rgb(var(--surface));transform:translate(-50%,-50%)}.tree-bond__break i{display:block;width:1.5px;height:.72rem;border-radius:1px;background:rgb(var(--foreground)/.42);transform:rotate(-28deg)}.tree-kids{width:var(--card-w)}.tree-kids,.tree-kids__item{display:flex;flex-direction:column;align-items:center}.tree-kids__line{width:var(--line);height:var(--stem);background:var(--ink)}.tree-kids__line--first{height:var(--kids-lead)}.tree-fork{display:flex;width:calc(var(--card-w) * var(--fork-n, 1) + var(--kid-gap) * (var(--fork-n, 1) - 1));min-width:calc(var(--card-w) * var(--fork-n, 1) + var(--kid-gap) * (var(--fork-n, 1) - 1));max-width:none;flex-shrink:0;flex-direction:column;align-items:center;margin-inline:auto}.tree-fork__drop{width:var(--line);height:calc(var(--kids-lead) - var(--stem));background:var(--ink)}.tree-fork__row{position:relative;display:flex;width:-moz-max-content;width:max-content;flex-wrap:nowrap;justify-content:center;gap:var(--kid-gap)}.tree-fork__row:before{content:"";position:absolute;top:0;right:calc(var(--card-w) / 2);left:calc(var(--card-w) / 2);height:var(--line);background:var(--ink);pointer-events:none}.tree-fork__item{display:flex;flex:0 0 var(--card-w);width:var(--card-w);min-width:var(--card-w);max-width:var(--card-w);flex-shrink:0;flex-direction:column;align-items:center}.tree-fork__stem{width:var(--line);height:var(--stem);background:var(--ink)}.tree-pair{flex-direction:column;padding-bottom:var(--drop)}.tree-pair,.tree-pair__people{position:relative;display:flex;align-items:center}.tree-pair__people{gap:var(--pair-gap)}.tree-pair__rail{right:calc(var(--card-w) / 2);left:calc(var(--card-w) / 2);height:var(--line);background:repeating-linear-gradient(to right,var(--ink) 0 3px,transparent 3px 6px);transform:translateY(-50%)}.tree-pair__drop,.tree-pair__rail{position:absolute;top:50%;pointer-events:none}.tree-pair__drop{width:var(--line);background:repeating-linear-gradient(to bottom,var(--ink) 0 3px,transparent 3px 6px);transform:translateX(-50%)}.tree-pair__collapse,.tree-pair__drop,.tree-pair__drop--solo{left:50%;height:calc(50% + var(--drop))}.tree-pair__collapse{position:absolute;top:50%;z-index:3;width:1.6rem;border:0;background:transparent;transform:translateX(-50%);cursor:pointer}.tree-fold{display:flex;align-items:center;justify-content:center;margin:0;border:0;background:transparent;padding:.15rem;color:rgb(var(--muted))}.tree-fold--up{flex-direction:column-reverse}.tree-fold--left{flex-direction:row-reverse;min-height:var(--card-h)}.tree-fold--right{flex-direction:row;min-height:var(--card-h)}.tree-fold__stem{flex-shrink:0;background:var(--ink)}.tree-fold--up .tree-fold__stem{width:var(--line);height:.8rem}.tree-fold--left .tree-fold__stem,.tree-fold--right .tree-fold__stem{width:.85rem;height:var(--line)}.tree-fold__pills{position:relative;display:flex;align-items:center;justify-content:center}.tree-fold--up .tree-fold__pills{gap:.42rem}.tree-fold--left .tree-fold__pills,.tree-fold--right .tree-fold__pills{flex-direction:column;gap:.42rem}.tree-fold__pills:before{content:"";position:absolute;background:rgb(var(--muted)/.5)}.tree-fold--up .tree-fold__pills:before{top:50%;right:.38rem;left:.38rem;height:var(--line);transform:translateY(-50%)}.tree-fold--left .tree-fold__pills:before,.tree-fold--right .tree-fold__pills:before{top:.28rem;bottom:.28rem;left:50%;width:var(--line);transform:translateX(-50%)}.tree-fold--solo .tree-fold__pills:before{display:none}.tree-fold__pills i{position:relative;z-index:1;display:block;width:.72rem;height:.4rem;border-radius:999px;background:rgb(var(--muted)/.55)}.tree-fold:hover .tree-fold__pills i{background:rgb(var(--foreground)/.42)}.tree-bond--toggle{display:block;margin:0;border:0;background:transparent;padding:0;cursor:pointer;pointer-events:auto}.tree-card{position:relative;z-index:2;flex-shrink:0;width:var(--card-w)}.tree-card__button{display:flex;width:100%;min-height:var(--card-h);height:var(--card-h);align-items:center;gap:.45rem;overflow:hidden;border-radius:.85rem;border:1.5px solid rgb(var(--card-accent)/.5);background:rgb(var(--paper));padding:.28rem .4rem .28rem .32rem;text-align:left;box-shadow:0 4px 12px rgb(var(--foreground)/.04);transition:transform .16s ease,box-shadow .16s ease}.tree-card--ex .tree-card__button{border-style:dashed;border-color:rgb(var(--card-accent)/.45);background:transparent;box-shadow:none}.tree-card--ex .tree-card__photo{background:transparent!important;border-style:dashed}.tree-card--ex-dot{width:2.35rem}.tree-card--ex-dot .tree-card__button{min-height:0;width:2.35rem;flex-direction:column;gap:.2rem;border:none;background:transparent;padding:.15rem 0;box-shadow:none}.tree-card--ex-dot .tree-card__photo{width:.85rem;height:.85rem;min-width:.85rem;font-size:0;line-height:0;color:transparent!important}.tree-card--ex-dot .tree-card__text{align-items:center;text-align:center}.tree-card--ex-dot .tree-card__name{display:none}.tree-card--ex-dot .tree-card__bday{font-size:8px;line-height:1.15;max-width:3.4rem}.tree-card__button:hover{transform:translateY(-1px)}.tree-card__button[data-selected=true]{box-shadow:0 0 0 2px rgb(var(--primary)/.28),0 8px 16px rgb(var(--foreground)/.06)}.tree-card__button[data-deceased=true]{border-style:dashed;border-color:rgb(var(--muted)/.4);background:rgb(var(--muted)/.06);filter:grayscale(.65)}.tree-card__photo{display:flex;height:var(--avatar);width:var(--avatar);flex-shrink:0;align-items:center;justify-content:center;overflow:hidden;border-radius:9999px;border:1px solid rgb(var(--card-accent)/.4);font-size:.52rem;font-weight:650;line-height:1.1;letter-spacing:-.02em}.tree-card__photo-img{height:100%;width:100%;-o-object-fit:cover;object-fit:cover}.tree-card__text{display:flex;min-width:0;flex:1;flex-direction:column;gap:.08rem}.tree-card__name{font-size:.78rem;font-weight:650;letter-spacing:-.01em;color:rgb(var(--foreground))}.tree-card__bday,.tree-card__name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tree-card__bday{min-height:.85rem;font-size:.62rem;font-weight:500;color:rgb(var(--muted))}.tree-card__live{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.52rem;font-weight:600;color:rgb(var(--primary))}.tree-more__btn{display:inline-flex;align-items:center;gap:.3rem;border-radius:9999px;border:1px solid rgb(var(--border));background:rgb(var(--paper)/.95);padding:.35rem .7rem;font-size:.6875rem;color:rgb(var(--muted))}.tree-more__btn:hover{background:rgb(var(--cream));color:rgb(var(--foreground))}@media (max-width:639px){.tree-scroll--fade-left,.tree-scroll--fade-left.tree-scroll--fade-right,.tree-scroll--fade-right{-webkit-mask-image:none;mask-image:none}}@media (min-width:640px){.tree-canvas{padding:1.15rem .7rem 2.15rem;--card-w:7.4rem;--card-h:2.95rem;--avatar:1.95rem;--kids-lead:1.85rem;--drop:1rem;--bond-w:1.8rem}.tree-card__name{font-size:.8rem}}