.flow-dot {
  r: 0.4;
  fill: currentColor;
  animation: moveDot 2s linear infinite;
}

@keyframes moveDot {
  0% {
    offset-distance: 0%;
  }
  100% {
    offset-distance: 100%;
  }
}
/* Container layout */
#power-flow-container {
  background: rgba(0, 0, 0, 0.03);
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* SVG should fill its card */
#power-flow-container svg {
  display: block;
  width: 100%;
  max-width: 600px;
}

/* Theme-driven label/icon color */
[data-bs-theme="light"] #power-flow-container {
  --pf-label-color: #000;
}

[data-bs-theme="dark"] #power-flow-container {
  --pf-label-color: #fff;
}

/* Apply the color to theme-aware things in the SVG */
#power-flow-container svg {
  color: var(--pf-label-color);
}

#power-flow-container svg {
  width: 100%;
  height: 100%;
}

#power-flow-container {
  width: 100%;
  aspect-ratio: 1 / 1; /* Perfect square */
}
#power-flow-container {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: visible;
}

#power-flow-container svg {
  width: 100% !important;
  height: 100% !important;
  display: block;
}