.qgn,
.qgn * {
  box-sizing: border-box;
}

.qgn {
  --qgn-bg: #fbfaff;
  --qgn-ink: #14111f;
  --qgn-purple: #6619ff;
  --qgn-height: 620px;
  --qgn-min-height: 420px;

  position: relative;
  width: 100%;
  min-width: 0;
  min-height: var(--qgn-min-height);
  overflow: hidden;
  background: var(--qgn-bg);
  color: var(--qgn-ink);
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
}

.qgn__svg {
  display: block;
  width: 106%;
  height: min(var(--qgn-height), 58vw);
  min-height: var(--qgn-min-height);
  margin-left: -3%;
  cursor: none;
}

.qgn__line {
  transition:
    x1 150ms ease-out,
    y1 150ms ease-out,
    x2 150ms ease-out,
    y2 150ms ease-out,
    stroke-opacity 150ms ease-out,
    stroke-width 150ms ease-out;
}

.qgn__node {
  transition:
    cx 150ms ease-out,
    cy 150ms ease-out,
    r 150ms ease-out,
    fill-opacity 150ms ease-out;
}

.qgn__label-dot {
  filter: drop-shadow(0 6px 12px rgba(102, 25, 255, 0.2));
}

.qgn__label-text {
  paint-order: stroke;
  stroke: rgba(251, 250, 255, 0.76);
  stroke-width: 4px;
  stroke-linejoin: round;
}

.qgn__cursor-halo,
.qgn__cursor-dot {
  pointer-events: none;
}

.qgn [data-qgn-cursor-effect][hidden] {
  display: none;
}

.qgn[data-show-labels="false"] .qgn__label {
  display: none;
}

@media (max-width: 900px) {
  .qgn {
    --qgn-height: 430px;
    --qgn-min-height: 430px;
  }

  .qgn__svg {
    width: 140%;
    margin-left: -20%;
  }

  .qgn__label {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .qgn__line,
  .qgn__node {
    transition: none;
  }
}