```css
/* =========================================================
   关系图整体容器
   ========================================================= */

.graph-large-wrap {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  margin: 0;
  padding: 0;

  display: block;

  pointer-events: none;

  overflow: hidden;
}


/* =========================================================
   SVG 关系图画布
   ========================================================= */

.graph-large-svg {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  max-width: none;

  display: block;

  margin: 0;
  padding: 0;

  background: transparent;

  border: 0;
  border-radius: 0;

  overflow: visible;

  pointer-events: auto;

  /*
   * 禁止浏览器把触摸拖拽解释成网页滚动。
   * 这样手机 / 平板也可以拖动关系图。
   */
  touch-action: none;

  cursor: grab;

  user-select: none;

  -webkit-user-select: none;
}

.graph-large-svg.is-dragging {
  cursor: grabbing;
}


/* =========================================================
   关系边
   ========================================================= */

.rel-edge {
  fill: none;

  transition:
    opacity .18s ease,
    stroke-width .18s ease;

  pointer-events: none;
}

.rel-edge.future {
  opacity: .14;
}

.rel-edge-ended {
  opacity: .34;
}


/* =========================================================
   关系文字
   ========================================================= */

.rel-edge-label {
  font-family:
    "PingFang SC",
    "Microsoft YaHei",
    sans-serif;

  font-size: 9.5px;

  fill: #7d8896;

  text-anchor: middle;

  pointer-events: none;

  paint-order: stroke;

  stroke: #0e1116;

  stroke-width: 2.5px;

  stroke-linejoin: round;

  user-select: none;
}


/* =========================================================
   节点
   ========================================================= */

.rel-node {
  cursor: pointer;

  pointer-events: all;

  user-select: none;

  -webkit-user-select: none;

  transition:
    opacity .18s ease;
}

.rel-node.future {
  opacity: .18;
}

.rel-node-ended {
  opacity: .42;
}


/* =========================================================
   节点点击范围
   ========================================================= */

.rel-hit {
  pointer-events: all;

  cursor: pointer;

  fill: #ffffff;

  /*
   * 不是 display:none。
   * 必须保留真正可 hit-test 的 SVG 图形。
   */
  fill-opacity: .001;

  stroke: none;
}


/* =========================================================
   光晕
   ========================================================= */

.rel-halo {
  pointer-events: none;

  transition:
    opacity .16s ease,
    r .16s ease;
}

.rel-node:hover .rel-halo {
  opacity: .22;
}


/* =========================================================
   节点外圈
   ========================================================= */

.rel-ring {
  pointer-events: none;

  transition:
    r .16s ease,
    opacity .16s ease,
    stroke-width .16s ease;
}


/* =========================================================
   节点圆点
   ========================================================= */

.rel-core,
.rel-node .dot {
  pointer-events: none;

  transition:
    r .16s ease,
    filter .16s ease,
    stroke-width .16s ease;
}

.rel-node:hover .rel-core,
.rel-node:hover .dot {
  r: 10;

  filter:
    drop-shadow(
      0 0 8px currentColor
    );
}


/* =========================================================
   状态点
   ========================================================= */

.rel-state-dot {
  pointer-events: none;
}


/* =========================================================
   名称背景
   ========================================================= */

.rel-label-bg {
  pointer-events: none;

  transition:
    fill-opacity .16s ease,
    stroke-opacity .16s ease;
}

.rel-node:hover .rel-label-bg {
  fill-opacity: .95;

  stroke-opacity: .5;
}


/* =========================================================
   节点文字
   ========================================================= */

.rel-node text {
  font-family:
    "PingFang SC",
    "Microsoft YaHei",
    sans-serif;

  text-anchor: middle;

  pointer-events: none;

  paint-order: stroke;

  stroke: #0e1116;

  stroke-width: 3px;

  stroke-linejoin: round;

  user-select: none;
}

.rel-name {
  font-size: 12px;

  fill: #dde4ec;

  font-weight: 600;

  transition:
    fill .16s ease,
    font-size .16s ease;
}

.rel-role {
  font-size: 9.5px;

  fill: #7d8896;

  transition:
    fill .16s ease;
}


/* =========================================================
   选中节点
   ========================================================= */

.rel-node.selected .rel-core,
.rel-node.selected .dot {
  r: 11;

  stroke: var(--gold);

  stroke-width: 3;

  filter:
    drop-shadow(
      0 0 9px currentColor
    );
}

.rel-node.selected .rel-ring {
  r: 15;

  stroke: var(--gold);

  stroke-width: 1.5;

  opacity: .82;
}

.rel-node.selected .rel-name {
  fill: var(--gold);

  font-size: 12.5px;
}

.rel-node.selected .rel-role {
  fill: #b7c0cb;
}

.rel-node.selected .rel-label-bg {
  fill-opacity: 1;

  stroke: var(--gold);

  stroke-opacity: .55;
}


/* =========================================================
   悬浮效果
   ========================================================= */

.rel-node:hover .rel-name {
  fill: #ffffff;
}

.rel-node:hover .rel-role {
  fill: #aab5c2;
}


/* =========================================================
   图例
   ========================================================= */

.graph-legend {
  position: absolute;

  left: 50%;
  bottom: 24px;

  transform: translateX(-50%);

  z-index: 4;

  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  gap: 14px 24px;

  padding: 8px 14px;

  border-radius: 10px;

  background:
    rgba(14, 18, 24, .72);

  border:
    1px solid
    rgba(70, 82, 96, .45);

  backdrop-filter: blur(10px);

  font-size: 11px;

  color: var(--muted);

  pointer-events: none;
}

.graph-legend-item {
  display: flex;

  align-items: center;

  gap: 7px;
}

.graph-legend-dot {
  width: 8px;
  height: 8px;

  flex: 0 0 auto;

  border-radius: 50%;
}


/* =========================================================
   关系图说明
   ========================================================= */

.graph-note {
  position: absolute;

  left: 50%;
  bottom: 7px;

  transform: translateX(-50%);

  z-index: 4;

  font-size: 10px;

  color: #606c79;

  text-align: center;

  line-height: 1.8;

  pointer-events: none;
}


/* =========================================================
   移动端
   ========================================================= */

@media (max-width: 900px) {

  .rel-name {
    font-size: 11px;
  }

  .rel-role {
    font-size: 9px;
  }

  .graph-legend {
    bottom: 16px;

    gap: 10px 16px;

    font-size: 10px;
  }
}


@media (max-width: 640px) {

  .rel-name {
    font-size: 10px;
  }

  .rel-role {
    font-size: 8px;
  }

  .graph-legend {
    max-width:
      calc(100% - 30px);

    bottom: 12px;

    gap: 8px 12px;
  }
}
```