:root {
    --bg: #ffffff;
    --core: #0099bb;
    --core-glow: rgba(0,153,187,0.35);
    --input1: #ff6b35;
    --input2: #c47a3a;
    --input3: #7b2d8b;
    --input4: #007ea8;
    --output1: #05a87d;
    --output2: #c49a00;
    --output3: #d63060;
    --grid: rgba(0,150,180,0.07);
    --text: #334e5e;
  }
 
 
  /* SVG Canvas */
  .canvas-wrap {
    position: relative;
    z-index: 10;
    width: 100%;
    max-width: 700px;
  }
 
  svg#flow {
    width: 100%;
    height: auto;
    overflow: visible;
  }
 
  /* Node base styles */
  .node-ring {
    fill: none;
    stroke-width: 2;
  }
  .node-inner {
    opacity: 0.15;
  }
  .node-label {
    font-size: 16px;
    font-weight: 500;
    text-transform: uppercase;
  }
  .node-sublabel {
    font-size: 15px;
  }
 
  /* Core node pulse */
  @keyframes corePulse {
    0%, 100% { r: 42; opacity: 0.25; }
    50% { r: 52; opacity: 0.08; }
  }
  @keyframes coreInnerPulse {
    0%, 100% { r: 28; }
    50% { r: 32; }
  }
  @keyframes coreRotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }
  @keyframes coreRotateRev {
    from { transform: rotate(0deg); }
    to { transform: rotate(-360deg); }
  }
 
  .core-pulse {
    animation: corePulse 2.5s ease-in-out infinite;
  }
  .core-inner-pulse {
    animation: coreInnerPulse 2.5s ease-in-out infinite;
  }
  .core-ring-1 {
    transform-origin: 350px 280px;
    animation: coreRotate 8s linear infinite;
  }
  .core-ring-2 {
    transform-origin: 350px 280px;
    animation: coreRotateRev 12s linear infinite;
  }
 
  /* Input node pulses */
  @keyframes nodePulse {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
  }
 
  /* Dot particle on path */
  @keyframes moveDot1 { to { offset-distance: 100%; } }
 
  /* Particle dots */
  .particle {
    r: 3.5;
    opacity: 0;
  }
 
  /* Path glow lines */
  .flow-path {
    fill: none;
    stroke-width: 1.5;
    opacity: 0.25;
  }
  .flow-path-glow {
    fill: none;
    stroke-width: 0.5;
    opacity: 0.6;
    filter: blur(0.5px);
  }
 
  /* Stats bar */
  .stats {
    display: flex;
    gap: clamp(8px, 2vw, 100px);
    margin-top: clamp(16px, 3vw, 30px);
    position: relative;
    z-index: 10;
    flex-wrap: wrap;
    justify-content: center;
  }
  .stat-item {
    text-align: center;
    padding: 10px 16px;
    border: 1px solid rgba(0,153,187,0.2);
    border-radius: 6px;
    background: rgba(0,153,187,0.05);
    min-width: 80px;
  }
  .stat-val {
    font-size: clamp(0.9rem, 2.5vw, 1.2rem);
    font-weight: 700;
    color: #1b9cd9;
  }
  .stat-lbl {
    font-size: clamp(0.55rem, 1.5vw, 0.65rem);
    opacity: 0.7;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-top: 3px;
  }
 
  /* Counter animation */
  @keyframes countUp {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
  }