.tree-canvas--network {
  background:
    linear-gradient(90deg, rgb(120 93 82 / 5%) 1px, transparent 1px) 0 0 / 158px 100%,
    linear-gradient(180deg, #fffaf0, #eee7df);
}
.tree-canvas--network .tree-edge--strong { stroke: #a85f5d; }
.tree-canvas--network .tree-edge--pending { stroke: #aa8e83; stroke-dasharray: 10 9; }
.tree-canvas--network .tree-edge--interaction { stroke: #74866d; stroke-dasharray: 3 7; }
.tree-canvas--network .tree-edge--interaction.is-new-clue {
  stroke: #d28a4e;
  stroke-width: 4px;
  stroke-dasharray: 12 7;
  filter: drop-shadow(0 0 5px rgb(220 150 78 / 68%));
  animation: genealogy-clue-flow 1.4s linear infinite;
}

.tree-edge-label {
  position: absolute;
  z-index: 2;
  left: var(--x);
  top: var(--y);
  padding: 2px 6px;
  border: 1px solid rgb(255 255 255 / 70%);
  border-radius: 999px;
  background: rgb(255 249 242 / 94%);
  color: #765852;
  font-size: 10px;
  font-weight: 850;
  white-space: nowrap;
  transform: translate(-50%, -50%);
  box-shadow: 0 3px 9px rgb(69 49 44 / 9%);
}
.tree-edge-label--pending { color: #927a70; }
.tree-edge-label--interaction { color: #61705c; }
.tree-edge-label--interaction.is-new-clue { border-color: rgb(210 138 78 / 44%); background: #fff2d2; color: #9b5d30; box-shadow: 0 0 0 5px rgb(230 177 101 / 12%), 0 5px 14px rgb(111 70 37 / 16%); }
.tree-legend__line--strong { background: #a85f5d; }
.tree-legend__line--pending { height: 0; border-top: 1px dashed #aa8e83; background: transparent; }
.tree-legend__line--interaction { height: 0; border-top: 2px dotted #74866d; background: transparent; }

.tree-canvas--network .tree-node { z-index: 3; width: 128px; min-height: 156px; padding: 9px 9px 8px; }
.tree-canvas--network .tree-node img { width: 68px; height: 68px; }
.tree-node__owner {
  display: grid;
  margin-top: 7px;
  padding-top: 6px;
  gap: 2px;
  border-top: 1px solid rgb(168 95 93 / 16%);
  text-align: center;
}
.tree-node__owner > span { overflow: hidden; color: #a86a63; font-size: 10px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.tree-node__owner > span > b { display: inline; color: #654b45; font-size: 10px; }
.tree-node__owner > small { overflow: hidden; color: #8e776e; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.tree-node__visit { min-height: 25px; margin-top: 3px; padding: 0 7px; border: 0; border-radius: 7px; background: #b46c68; color: white; font-size: 10px; font-weight: 850; }
.tree-node__visit.is-locked { display: grid; place-items: center; background: #eee1d8; color: #8e776e; }

.tree-canvas--network .tree-node.is-new-clue { border-color: #d59555; box-shadow: 0 0 0 5px rgb(226 171 100 / 18%), 0 9px 22px rgb(95 59 38 / 18%); animation: genealogy-clue-node-in 540ms cubic-bezier(.2, .8, .2, 1) both; }
.tree-canvas--network .tree-node.is-new-clue--source::before,
.tree-canvas--network .tree-node.is-new-clue--match::before { position: absolute; top: -12px; left: 50%; padding: 3px 8px; border: 1px solid rgb(255 255 255 / 84%); border-radius: 999px; transform: translateX(-50%); background: #bd6d5d; color: #fff; content: "我的猫"; font-size: 10px; font-weight: 900; white-space: nowrap; }
.tree-canvas--network .tree-node.is-new-clue--match::before { background: #778a6e; content: "新连接"; }

@keyframes genealogy-clue-flow { to { stroke-dashoffset: -38; } }
@keyframes genealogy-clue-node-in { from { opacity: .35; transform: translate(-50%, -50%) scale(.88); } }