.app-gallery .clearflow-motion {
  position: relative;
  display: block;
  width: min(100%, 31rem);
}

.app-gallery .clearflow-motion img {
  width: 100%;
  max-height: none;
}

.clearflow-motion-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.clearflow-motion-overlay svg {
  display: block;
  width: 100%;
  height: 100%;
}

.flow-erase,
.flow-track,
.flow-glow,
.flow-pulse {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.flow-erase {
  stroke: #e8dff0;
  stroke-width: 20.5;
}

.flow-track {
  stroke: #d4c9dd;
  stroke-width: 18;
  opacity: 0.72;
}

.flow-glow,
.flow-pulse {
  stroke: currentColor;
}

.flow-glow {
  opacity: 0.24;
}

.flow-pulse {
  stroke-dasharray: 1 5 12 8;
  animation: clearflow-pipe-move 1.7s linear infinite;
  shape-rendering: geometricPrecision;
}

.flow-pulse-safe {
  animation-duration: 1.95s;
}

.flow-node {
  fill: #e8dff0;
}

.flow-core { color: #5738e5; fill: currentColor; }
.flow-flexible { color: #b51d61; fill: currentColor; }
.flow-future { color: #673de0; fill: currentColor; }
.flow-safe { color: #8fbe27; fill: currentColor; }

@media (prefers-reduced-motion: reduce) {
  .clearflow-motion-overlay { display: none; }
}

@keyframes clearflow-pipe-move {
  to { stroke-dashoffset: -26; }
}