:root{
       --chain-gap: 2.1rem;

}





/* Chain Wrapper Started */

   /* Path segment (flat cube) styles */
   .path-segment {
       position: absolute;
       width: 2rem;
       height: 2rem;
       transform-origin: center;
   }

   .path-segment.black {
       background-color: #2a2a2a;
   }

   .path-segment.white {
       background-color: #dadada;
   }



/* Font scale adjustments for different screen sizes */
@media (max-width: 1920px) {
    :root {
        --chain-gap: 1.9rem;
    }
    .path-segment {
           width: 1.9rem;
           height: 1.9rem;
       }
}

@media (max-width: 1440px) {
    :root {
        --chain-gap: 1.8rem;
    }
      .path-segment {
           width: 1.8rem;
           height: 1.8rem;
       }
}

@media (max-width: 1200px) {
    :root {
        --chain-gap: 1.8rem;
    }
      .path-segment {
           width: 1.8rem;
           height: 1.8rem;
       }
}

@media (max-width: 992px) {
    :root {
        --chain-gap: 1.2rem;
    }

        .chainwrapper-overview,
    .chainwrapper-start,
    .chainwrapper-2016,
    .chainwrapper-2017,
    .chainwrapper-2019,
    .chainwrapper-2020,
    .chainwrapper-2022,
    .chainwrapper-2024,
    .chainwrapper-2025 {
        display: none;
    }
}

@media (max-width: 768px) {
    :root {
        --chain-gap: 1rem;
    }

      .container {
           max-width: 100%;
           padding: 10px;
       }


       .path-segment {
           width: 12px;
           height: 12px;
       }
 .chainwrapper-overview,
    .chainwrapper-start,
    .chainwrapper-2016,
    .chainwrapper-2017,
    .chainwrapper-2019,
    .chainwrapper-2020,
    .chainwrapper-2022,
    .chainwrapper-2024,
    .chainwrapper-2025 {
        display: none;
    }
   
}

@media (max-width: 576px) {
    :root {
        --chain-gap: 0.8rem;
    }

    .path-segment {
           width: 10px;
           height: 10px;
       }
}

   .path0-1 {
       /* top: 0px; */
       /* left: 14rem; */
       top: -170px;
       left: 25px;
       transform: rotate(15deg);
   }

   .path0-2 {
       /* top: calc((var(--chain-gap))*1); */
       /* left: 13.25rem; */
       top: -130px;
       left: 10px;
       transform: rotate(15deg);
   }

   .path0-3 {
       /* top: calc((var(--chain-gap))*2); */
       /* left: 12.75rem; */
        top: -90px;
        left: 0px;
        transform: rotate(15deg);
   }



   /* Smoothed version of your path with small curves */
   .path1-1 {
       /* top: calc((var(--chain-gap))* 4 + 2.5rem);
       left: calc(12rem + 2.5rem); */
       top: 20px;
       left: 50px;
       transform: rotate(45deg);
   }

   .path1-2 {
       /* top: calc((var(--chain-gap))* 5 + 2.5rem);
       left: calc(14rem + 2.5rem); */
        top: calc(20px + var(--chain-gap));
        left: calc(50px + 2rem);

       transform: rotate(45deg);
   }

  .path1-3 {
    /* Old positioning - commented for reference */
    /* top: calc((var(--chain-gap)) * 6 + 2.25rem);
    left: calc(16rem + 2.5rem); */
    
    top: calc(20px + (var(--chain-gap) * 2) - 0.25rem);
    left: calc(50px + 4rem);
    transform: rotate(44deg);
    }

    .path1-4 {
        /* Old positioning - commented for reference */
        /* top: calc((var(--chain-gap)) * 7 + 1.7rem);
        left: calc(18.1rem + 2.5rem); */
        
        top: calc(20px + (var(--chain-gap) * 3) - 0.8rem);
        left: calc(50px + 6.1rem);
        transform: rotate(36deg);
    }

    .path1-5 {
        /* Old positioning - commented for reference */
        /* top: calc((var(--chain-gap)) * 8 + 1.15rem);
        left: calc(20.2rem + 2.5rem); */
        
        top: calc(20px + (var(--chain-gap) * 4) - 1.35rem);
        left: calc(50px + 8.2rem);
        transform: rotate(40deg);
    }

    .path1-6 {
        /* Old positioning - commented for reference */
        /* top: calc((var(--chain-gap)) * 9 + 0.5rem);
        left: calc(22.3rem + 3rem); */
        
        top: calc(20px + (var(--chain-gap) * 5.1) - 2rem);
        left: calc(50px + 9.8rem + 0.5rem);
        transform: rotate(50deg);

    }

    .path1-7 {
        /* Old positioning - commented for reference */
        /* top: calc((var(--chain-gap)) * 10 + 0.5rem);
        left: calc(24.3rem + 3.5rem); */
        
        top: calc(20px + (var(--chain-gap) * 6) - 2rem);
        left: calc(50px + 11rem + 1rem);
        transform: rotate(60deg);

    }

    .path1-8 {
        /* Old positioning - commented for reference */
        /* top: calc((var(--chain-gap)) * 11 + 0.5rem);
        left: calc(26.2rem + 3.35rem); */
        
        top: calc(20px + (var(--chain-gap) * 7) - 2rem);
        left: calc(50px + 12.2rem + 0.85rem);
        transform: rotate(70deg);

    }

    .path1-9 {
        /* Old positioning - commented for reference */
        /* top: calc((var(--chain-gap)) * 12 + 0.5rem);
        left: calc(28rem + 2.85rem); */
        
        top: calc(20px + (var(--chain-gap) * 8.1) - 2rem);
        left: calc(50px + 13.5rem + 0.35rem);
        transform: rotate(80deg);

    }

    .path1-10 {
        /* Old positioning - commented for reference */
        /* top: calc((var(--chain-gap)) * 13 + 0.5rem);
        left: calc(29.7rem + 2.5rem); */
        
        top: calc(20px + (var(--chain-gap) * 9.3) - 2rem);
        left: calc(50px + 14.3rem);
        transform: rotate(90deg);

    }

    .path1-11 {
        /* Old positioning - commented for reference */
        /* top: calc((var(--chain-gap)) * 14 + 0.6rem);
        left: calc(31.3rem + 2.5rem); */
        
        top: calc(20px + (var(--chain-gap) * 10.5) - 1.9rem);
        left: calc(50px + 14.4rem);
        transform: rotate(100deg);

    }


   /* Second path - from cube2 to cube3 (white segments) - S-curve left */
   .path2-1 {
       /* top: calc((var(--chain-gap))*14 + 2.5rem);
       left: 32rem; */
        top: 10px;
        left: calc(50px + 13.4rem);
        transform: rotate(20deg);
   }

  .path2-2 {
    /* Old positioning - commented for reference */
    /* top: calc((var(--chain-gap)) * 15 + 2.5rem);
    left: 31rem; */
    
    /* New positioning - maintaining same gap pattern */
    top: calc(20px + var(--chain-gap));
    left: calc(50px + 12.4rem);  /* 1rem less than path2-1 */
    transform: rotate(26deg);
}

.path2-3 {
    /* Old positioning - commented for reference */
    /* top: calc((var(--chain-gap)) * 16 + 2.5rem);
    left: 29.5rem; */
    
    top: calc(20px + (var(--chain-gap) * 2.2));
    left: calc(50px + 10.8rem);  /* 1.5rem less */
    transform: rotate(40deg);
}

.path2-4 {
    /* Old positioning - commented for reference */
    /* top: calc((var(--chain-gap)) * 17 + 2.5rem);
    left: 27.5rem; */
    
    top: calc(20px + (var(--chain-gap) * 3.15));
    left: calc(50px + 8.5rem);  /* 2rem less */
    transform: rotate(60deg);
}

.path2-5 {
    /* Old positioning - commented for reference */
    /* top: calc((var(--chain-gap)) * 18 + 2rem);
    left: 25rem; */
    
    top: calc(20px + (var(--chain-gap) * 3.9) - 0.5rem);
    left: calc(50px + 6.2rem);  /* 2.5rem less */
    transform: rotate(63deg);

}

.path2-6 {
    /* Old positioning - commented for reference */
    /* top: calc((var(--chain-gap)) * 18 + 2.8rem);
    left: 22.5rem; */
    
    top: calc(20px + (var(--chain-gap) * 3.8) + 0.3rem);
    left: calc(50px + 3.7rem);  /* 2.5rem less */
    transform: rotate(82deg);
}

.path2-7 {
    /* Old positioning - commented for reference */
    /* top: calc((var(--chain-gap)) * 18 + 3.1rem);
    left: 20rem; */
    
    top: calc(20px + (var(--chain-gap) * 3.8) + 0.6rem);
    left: calc(50px + 1.2rem);  /* 2.5rem less */
    transform: rotate(90deg);

}

.path2-8 {
    /* Old positioning - commented for reference */
    /* top: calc((var(--chain-gap)) * 18 + 3.1rem);
    left: 17.5rem; */
    
    top: calc(20px + (var(--chain-gap) * 3.90) + 0.4rem);
    left: calc(50px - 1.45rem);  /* 2.5rem less */
    transform: rotate(90deg);
}

.path2-9 {
    /* Old positioning - commented for reference */
    /* top: calc((var(--chain-gap)) * 18 + 3.2rem);
    left: 15rem; */
    
    top: calc(20px + (var(--chain-gap) * 4) + 0.3rem);
    left: calc(50px - 4rem);  /* 2.5rem less */
    transform: rotate(80deg);

}

.path2-10 {
    /* Old positioning - commented for reference */
    /* top: calc((var(--chain-gap)) * 18 + 3.5rem);
    left: 12.5rem; */
    
    top: calc(20px + (var(--chain-gap) * 4) + 0.6rem);
    left: calc(50px - 6.4rem);  /* 2.5rem less, now negative offset */
    transform: rotate(75deg);



}

.path2-11 {
    /* Old positioning - commented for reference */
    /* top: calc((var(--chain-gap)) * 19 + 2.5rem);
    left: 10rem; */
    
    top: calc(20px + (var(--chain-gap) * 4.25) + 0.85rem);
    left: calc(50px - 8.8rem);  /* 2.5rem less */
    transform: rotate(65deg);



}

  .path2-12 {
    /* Old positioning - commented for reference */
    /* top: calc((var(--chain-gap)) * 20 + 2rem);
    left: 8rem; */
    
    /* New positioning - continuing the pattern */
    top: calc(20px + (var(--chain-gap) * 5.4) - 0.5rem);
    left: calc(50px - 11rem);  /* 2rem less */
    transform: rotate(60deg);
}

.path2-13 {
    /* Old positioning - commented for reference */
    /* top: calc((var(--chain-gap)) * 21 + 2rem);
    left: 6.5rem; */
    
    top: calc(20px + (var(--chain-gap) * 6) - 0.3rem);
    left: calc(50px - 13rem);  /* 1.5rem less */
    transform: rotate(40deg);

}

.path2-14 {
    /* Old positioning - commented for reference */
    /* top: calc((var(--chain-gap)) * 22 + 2.5rem);
    left: 5.5rem; */
    
    top: calc(20px + (var(--chain-gap) * 7) + 0rem);
    left: calc(50px - 14.4rem);  /* 1rem less */
    transform: rotate(20deg);

}

.path2-15 {
    /* Old positioning - commented for reference */
    /* top: calc((var(--chain-gap)) * 23 + 3rem);
    left: 5.5rem; */
    
    top: calc(20px + (var(--chain-gap) * 8) + 0.5rem);
    left: calc(50px - 15rem);  /* same as path2-14 */
    transform: rotate(5deg);

}



   /* Third path - from cube3 short black segment */
   /* Third path - from cube3 short black segment */
.path3-1 {
    /* Old positioning - commented for reference */
    /* top: calc((var(--chain-gap)) * 25 + 1.25rem);
    left: 6rem; */
    
    /* New positioning - continuing from path2-15 */
    top: calc(20px + (var(--chain-gap) * 9) + 1rem);  /* Continues from multiplier 9, adjusted for fine-tuning */
    left: calc(50px - 15.1rem);  /* 6rem from original becomes relative to 50px base */
    transform: rotate(0deg);
}

.path3-2 {
    /* Old positioning - commented for reference */
    /* top: calc((var(--chain-gap)) * 25 + 3.5rem);
    left: 7rem; */
    
    top: calc(20px + (var(--chain-gap) * 10) + 1.25rem);  /* Same multiplier as 3-1 but different fine-tuning */
    left: calc(50px - 15rem);  /* 1rem more than path3-1 */
    transform: rotate(-10deg);
}

.path3-3 {
    /* Old positioning - commented for reference */
    /* top: calc((var(--chain-gap)) * 26 + 3.5rem);
    left: 8rem; */
    
    top: calc(20px + (var(--chain-gap) * 11) + 1.5rem);
    left: calc(50px - 14.5rem);  /* 1rem more than path3-2 */
    transform: rotate(-20deg);
}

.path3-4 {
    /* Old positioning - commented for reference */
    /* top: calc((var(--chain-gap)) * 27 + 3.5rem);
    left: 9.5rem; */
    
    top: calc(20px + (var(--chain-gap) * 12) + 1.65rem);
    left: calc(50px - 13.7rem);  /* 1.5rem more than path3-3 */
    transform: rotate(-30deg);
}

.path3-5 {
    /* Old positioning - commented for reference */
    /* top: calc((var(--chain-gap)) * 28 + 3rem);
    left: 11.5rem; */
    
    top: calc(20px + (var(--chain-gap) * 13) + 1.9rem);  /* Adjusted fine-tuning */
    left: calc(50px - 12.7rem);  /* 2rem more than path3-4 */
    transform: rotate(-20deg);

}
   /* Fourth path - long S-curve right (white segments) */
   .path4-1 {
    /* Old positioning - commented for reference */
    /* top: calc((var(--chain-gap)) * 30 + 4rem);
    left: 15.5rem; */
    
    /* New positioning - continuing from path3-5 */
    top: calc(20px + (var(--chain-gap) * 16) + 1rem);  /* Jump of 2 multipliers from 14 to 16 */
    left: calc(50px - 11.2rem);  /* 4rem more than path3-5 */
    transform: rotate(-10deg);

}

.path4-2 {
    /* Old positioning - commented for reference */
    /* top: calc((var(--chain-gap)) * 32 + 2rem);
    left: 16.5rem; */
    
    top: calc(20px + (var(--chain-gap) * 17) + 1.5rem);  /* Jump of 2 multipliers */
    left: calc(50px - 10.5rem);  /* 1rem more than path4-1 */
    transform: rotate(-25deg);
}

.path4-3 {
    /* Old positioning - commented for reference */
    /* top: calc((var(--chain-gap)) * 33 + 2rem);
    left: 17.5rem; */
    
    top: calc(20px + (var(--chain-gap) * 18) + 1.5rem);
    left: calc(50px - 9.2rem);  /* 1rem more than path4-2 */
    transform: rotate(-40deg);

}

.path4-4 {
    /* Old positioning - commented for reference */
    /* top: calc((var(--chain-gap)) * 34 + 2rem);
    left: 19rem; */
    
    top: calc(20px + (var(--chain-gap) * 19) + 1.2rem);
    left: calc(50px - 7.3rem);  /* 1.5rem more than path4-3 */
    transform: rotate(-50deg);
}

.path4-5 {
    /* Old positioning - commented for reference */
    /* top: calc((var(--chain-gap)) * 35 + 2rem);
    left: 20.5rem; */
    
    top: calc(20px + (var(--chain-gap) * 20) + 1rem);
    left: calc(50px - 5.1rem);  /* 1.5rem more than path4-4 */
    transform: rotate(50deg);  /* Note: positive rotation here */
}


   /* Fifth path - curve down and left (black segments) */
  .path5-1 {
    /* Old positioning - commented for reference */
    /* top: calc((var(--chain-gap)) * 36 + 2.25rem);
    left: 22.5rem; */
    
    /* New positioning - continuing from path4-5 */
    top: calc(20px + (var(--chain-gap) * 22) - 0.35rem);
    left: calc(50px - 2rem);  /* 2rem more than path4-5 */
    transform: rotate(40deg);
}

.path5-2 {
    /* Old positioning - commented for reference */
    /* top: calc((var(--chain-gap)) * 37 + 2.25rem);
    left: 25rem; */
    
    top: calc(20px + (var(--chain-gap) * 23) - 0.45rem);
    left: calc(50px + 0.5rem);  /* 2.5rem more */
    transform: rotate(40deg);
}

.path5-3 {
    /* Old positioning - commented for reference */
    /* top: calc((var(--chain-gap)) * 38 + 2rem);
    left: 28rem; */
    
    top: calc(20px + (var(--chain-gap) * 24) - 0.5rem);
    left: calc(50px + 3.2rem);  /* 3rem more */
    transform: rotate(30deg);
}

.path5-4 {
    /* Old positioning - commented for reference */
    /* top: calc((var(--chain-gap)) * 39 + 1rem);
    left: 31rem; */
    
    top: calc(20px + (var(--chain-gap) * 25) - 1.5rem);
    left: calc(50px + 6rem);  /* 3rem more */
    transform: rotate(10deg);
}

.path5-5 {
    /* Old positioning - commented for reference */
    /* top: calc((var(--chain-gap)) * 39 + 1.5rem);
    left: 34rem; */
    
    top: calc(20px + (var(--chain-gap) * 25) - 1rem);  /* Same multiplier as 5-4 */
    left: calc(50px + 8.6rem);  /* 3rem more */
    transform: rotate(10deg);
}

.path5-6 {
    /* Old positioning - commented for reference */
    /* top: calc((var(--chain-gap)) * 40 + 0rem);
    left: 37rem; */
    
    top: calc(20px + (var(--chain-gap) * 26) - 2.8rem);
    left: calc(50px + 11.4rem);  /* 3rem more */
    transform: rotate(5deg);
}

.path5-7 {
    /* Old positioning - commented for reference */
    /* top: calc((var(--chain-gap)) * 40 + 0rem);
    left: 40rem; */
    
    top: calc(20px + (var(--chain-gap) * 26) - 2.5rem);  /* Same as 5-6 */
    left: calc(50px + 14rem);  /* 3rem more */
    transform: rotate(8deg);
}

.path5-8 {
    /* Old positioning - commented for reference */
    /* top: calc((var(--chain-gap)) * 40 + 0.5rem);
    left: 43rem; */
    
    top: calc(20px + (var(--chain-gap) * 26) - 2rem);  /* Still multiplier 26 */
    left: calc(50px + 16.8rem);  /* 3rem more */
    transform: rotate(15deg);
}

.path5-9 {
    /* Old positioning - commented for reference */
    /* top: calc((var(--chain-gap)) * 40 + 1.5rem);
    left: 46rem; */
    
    top: calc(20px + (var(--chain-gap) * 26) - 1.5rem);  /* Still multiplier 26 */
    left: calc(50px + 19.3rem);  /* 3rem more */
    transform: rotate(10deg);
}

.path5-10 {
    /* Old positioning - commented for reference */
    /* top: calc((var(--chain-gap)) * 41 + 0rem);
    left: 49rem; */
    
    top: calc(20px + (var(--chain-gap) * 26) - 0.7rem);
    left: calc(50px + 21.8rem);  /* 3rem more */
    transform: rotate(25deg);
}

.path5-11 {
    /* Old positioning - commented for reference */
    /* top: calc((var(--chain-gap)) * 42 + 0rem);
    left: 52rem; */
    
    top: calc(20px + (var(--chain-gap) * 26) + 1rem);
    left: calc(50px + 24.5rem);  /* 3rem more */
    transform: rotate(40deg);
}

.path5-12 {
    /* Old positioning - commented for reference */
    /* top: calc((var(--chain-gap)) * 43 + 0rem);
    left: 54.5rem; */
    
    top: calc(20px + (var(--chain-gap) * 27) + 1rem);
    left: calc(50px + 26.7rem);  /* 2.5rem more */
    transform: rotate(50deg);
}

.path5-13 {
    /* Old positioning - commented for reference */
    /* top: calc((var(--chain-gap)) * 43 + 2.5rem);
    left: 56.5rem; */
    
    top: calc(20px + (var(--chain-gap) * 28) + 1rem);  /* Same multiplier as 5-12 */
    left: calc(50px + 28.6rem);  /* 2rem more */
    transform: rotate(50deg);
}

.path5-14 {
    /* Old positioning - commented for reference */
    /* top: calc((var(--chain-gap)) * 44 + 3rem);
    left: 58.5rem; */
    
    top: calc(20px + (var(--chain-gap) * 29) + 1.5rem);
    left: calc(50px + 30.2rem);  /* 2rem more */
    transform: rotate(60deg);
}

.path5-15 {
    /* Old positioning - commented for reference */
    /* top: calc((var(--chain-gap)) * 46 + 1.5rem);
    left: 60rem; */
    
    top: calc(20px + (var(--chain-gap) * 30) + 2rem);  /* Jump of 2 multipliers */
    left: calc(50px + 31.8rem);  /* 1.5rem more */
    transform: rotate(50deg);
}

.path5-16 {
    /* Old positioning - commented for reference */
    /* top: calc((var(--chain-gap)) * 47 + 1.5rem);
    left: 62.5rem; */
    
    top: calc(20px + (var(--chain-gap) * 31) + 2rem);
    left: calc(50px + 33.9rem);  /* 2.5rem more */
    transform: rotate(30deg);
}

.path5-17 {
    /* Old positioning - commented for reference */
    /* top: calc((var(--chain-gap)) * 48 + 1.5rem);
    left: 65rem; */
    
    top: calc(20px + (var(--chain-gap) * 32) + 1.5rem);
    left: calc(50px + 36.5rem);  /* 2.5rem more */
    transform: rotate(40deg);
}

.path5-18 {
    /* Old positioning - commented for reference */
    /* top: calc((var(--chain-gap)) * 49 + 1.5rem);
    left: 67rem; */
    
    top: calc(20px + (var(--chain-gap) * 33) + 1.5rem);
    left: calc(50px + 38.4rem);  /* 2rem more */
    transform: rotate(60deg);
}
   /* Sixth path - curve left (white segments) */
   .path6-1 {
    /* Old positioning - commented for reference */
    /* top: calc((var(--chain-gap)) * 50 + 1.75rem);
    left: 68.5rem; */
    
    /* New positioning - continuing from path5-18 */
    top: calc(20px + (var(--chain-gap) * 35) + 0.75rem);
    left: calc(50px + 40rem);  /* 1.5rem more than path5-18 */
    transform: rotate(60deg);
}

.path6-2 {
    /* Old positioning - commented for reference */
    /* top: calc((var(--chain-gap)) * 51 + 2rem);
    left: 69.5rem; */
    
    top: calc(20px + (var(--chain-gap) * 37) - 0.5rem);
    left: calc(50px + 41rem);  /* 1rem more */
    transform: rotate(70deg);
}

.path6-3 {
    /* Old positioning - commented for reference */
    /* top: calc((var(--chain-gap)) * 52 + 2.5rem);
    left: 70.5rem; */
    
    top: calc(20px + (var(--chain-gap) * 38));
    left: calc(50px + 42rem);  /* 1rem more */
    transform: rotate(75deg);
}

.path6-4 {
    /* Old positioning - commented for reference */
    /* top: calc((var(--chain-gap)) * 58 + 2rem);
    left: 71rem; */
    
    top: calc(20px + (var(--chain-gap) * 44) - 0.5rem);  /* Jump of 6 multipliers */
    left: calc(50px + 42rem);  /* 0.5rem more */
    transform: rotate(120deg);
}

.path6-5 {
    /* Old positioning - commented for reference */
    /* top: calc((var(--chain-gap)) * 59 + 2.5rem);
    left: 69.5rem; */
    
    top: calc(20px + (var(--chain-gap) * 45));
    left: calc(50px + 40.5rem);  /* 1.5rem less - curve back */
    transform: rotate(120deg);
}

.path6-6 {
    /* Old positioning - commented for reference */
    /* top: calc((var(--chain-gap)) * 60 + 2.5rem);
    left: 68rem; */
    
    top: calc(20px + (var(--chain-gap) * 46));
    left: calc(50px + 39rem);  /* 1.5rem less */
    transform: rotate(130deg);
}

.path6-7 {
    /* Old positioning - commented for reference */
    /* top: calc((var(--chain-gap)) * 61 + 2rem);
    left: 66rem; */
    
    top: calc(20px + (var(--chain-gap) * 47) + 0rem);
    left: calc(50px + 37rem);  /* 2rem less */
    transform: rotate(145deg);
}

.path6-8 {
    /* Old positioning - commented for reference */
    /* top: calc((var(--chain-gap)) * 62 + 1rem);
    left: 64rem; */
    
    top: calc(20px + (var(--chain-gap) * 48) - 0.8rem);
    left: calc(50px + 34.5rem);  /* 2rem less */
    transform: rotate(160deg);
}

.path6-9 {
    /* Old positioning - commented for reference */
    /* top: calc((var(--chain-gap)) * 63 + 0rem);
    left: 61.5rem; */
    
    top: calc(20px + (var(--chain-gap) * 49) - 2rem);
    left: calc(50px + 32rem);  /* 2.5rem less */
    transform: rotate(70deg);
}

.path6-10 {
    /* Old positioning - commented for reference */
    /* top: calc((var(--chain-gap)) * 63 + 1.25rem);
    left: 59rem; */
    
    top: calc(20px + (var(--chain-gap) * 49) - 0.7rem);  /* Same multiplier as 6-9 */
    left: calc(50px + 29.8rem);  /* 2.5rem less */
    transform: rotate(50deg);
}

.path6-11 {
    /* Old positioning - commented for reference */
    /* top: calc((var(--chain-gap)) * 64 + 1.25rem);
    left: 57rem; */
    
    top: calc(20px + (var(--chain-gap) * 50) - 0.9rem);
    left: calc(50px + 28rem);  /* 2rem less */
    transform: rotate(30deg);
}

   /* Seventh path - curve down right (black segments) */
  .path7-1 {
    /* Old positioning - commented for reference */
    /* top: calc((var(--chain-gap)) * 65 + 1.5rem);
    left: 56rem; */
    
    /* New positioning - continuing from path6-11 */
    top: calc(20px + (var(--chain-gap) * 51) - 1rem);
    left: calc(50px + 27rem);  /* 1rem less than path6-11 */
    transform: rotate(20deg);
}

.path7-2 {
    /* Old positioning - commented for reference */
    /* top: calc((var(--chain-gap)) * 66 + 1.5rem);
    left: 55rem; */
    
    top: calc(20px + (var(--chain-gap) * 52) - 1rem);
    left: calc(50px + 26rem);  /* 1rem less */
    transform: rotate(30deg);
}

.path7-3 {
    /* Old positioning - commented for reference */
    /* top: calc((var(--chain-gap)) * 67 + 1.5rem);
    left: 53.5rem; */
    
    top: calc(20px + (var(--chain-gap) * 53) - 1rem);
    left: calc(50px + 24.5rem);  /* 1.5rem less */
    transform: rotate(40deg);
}

.path7-4 {
    /* Old positioning - commented for reference */
    /* top: calc((var(--chain-gap)) * 68 + 1.25rem);
    left: 51.5rem; */
    
    top: calc(20px + (var(--chain-gap) * 54) - 1.25rem);
    left: calc(50px + 22.5rem);  /* 2rem less */
    transform: rotate(55deg);
}

.path7-5 {
    /* Old positioning - commented for reference */
    /* top: calc((var(--chain-gap)) * 69 + 0.5rem);
    left: 49.25rem; */
    
    top: calc(20px + (var(--chain-gap) * 55) - 2rem);
    left: calc(50px + 20rem);  /* 2.25rem less */
    transform: rotate(60deg);
}

   /* Eighth path - final S-curve to cube4 (white segments) */
   .path8-1 {
    /* Old positioning - commented for reference */
    /* top: calc((var(--chain-gap)) * 69 + 1.5rem);
    left: 46.5rem; */
    
    /* New positioning - continuing from path7-5 */
    top: calc(20px + (var(--chain-gap) * 55) - 1rem);  /* Same multiplier as path7-5 */
    left: calc(50px + 17.4rem);  /* 2.75rem less than path7-5 */
    transform: rotate(80deg);
}

.path8-2 {
    /* Old positioning - commented for reference */
    /* top: calc((var(--chain-gap)) * 70 + 0.5rem);
    left: 44rem; */
    
    top: calc(20px + (var(--chain-gap) * 56) - 2rem);
    left: calc(50px + 14.5rem);  /* 2.5rem less */
    transform: rotate(60deg);
}

.path8-3 {
    /* Old positioning - commented for reference */
    /* top: calc((var(--chain-gap)) * 71 + 0.25rem);
    left: 41.75rem; */
    
    top: calc(20px + (var(--chain-gap) * 57) - 2.25rem);
    left: calc(50px + 12.5rem);  /* 2.25rem less */
    transform: rotate(40deg);
}

.path8-4 {
    /* Old positioning - commented for reference */
    /* top: calc((var(--chain-gap)) * 72 + 0.5rem);
    left: 40rem; */
    
    top: calc(20px + (var(--chain-gap) * 58) - 2rem);
    left: calc(50px + 10.8rem);  /* 1.75rem less */
    transform: rotate(30deg);
}

.path8-5 {
    /* Old positioning - commented for reference */
    /* top: calc((var(--chain-gap)) * 73 + 0.75rem);
    left: 38rem; */
    
    top: calc(20px + (var(--chain-gap) * 59) - 1.75rem);
    left: calc(50px + 9.1rem);  /* 2rem less */
    transform: rotate(45deg);
}

.path8-6 {
    /* Old positioning - commented for reference */
    /* top: calc((var(--chain-gap)) * 74 + 0.75rem);
    left: 36rem; */
    
    top: calc(20px + (var(--chain-gap) * 60) - 1.75rem);
    left: calc(50px + 7.5rem);  /* 2rem less */
    transform: rotate(30deg);
}

.path8-7 {
    /* Old positioning - commented for reference */
    /* top: calc((var(--chain-gap)) * 75 + 1rem);
    left: 34rem; */
    
    top: calc(20px + (var(--chain-gap) * 61) - 1.5rem);
    left: calc(50px + 5.8rem);  /* 2rem less */
    transform: rotate(45deg);
}

.path8-8 {
    /* Old positioning - commented for reference */
    /* top: calc((var(--chain-gap)) * 76 + 0.5rem);
    left: 32rem; */
    
    top: calc(20px + (var(--chain-gap) * 62) - 1.8rem);
    left: calc(50px + 3.5rem);  /* 2rem less */
    transform: rotate(60deg);
}

.path8-9 {
    /* Old positioning - commented for reference */
    /* top: calc((var(--chain-gap)) * 76 + 1.5rem);
    left: 29rem; */
    
    top: calc(20px + (var(--chain-gap) * 62) - 1rem);  /* Same multiplier as 8-8 */
    left: calc(50px + 1rem);  /* 3rem less */
    transform: rotate(80deg);
}

.path8-10 {
    /* Old positioning - commented for reference */
    /* top: calc((var(--chain-gap)) * 76 + 2rem);
    left: 26rem; */
    
    top: calc(20px + (var(--chain-gap) * 62) - 0.75rem);  /* Same multiplier */
    left: calc(50px - 1.8rem);  /* 3rem less */
    transform: rotate(90deg);
}

.path8-11 {
    /* Old positioning - commented for reference */
    /* top: calc((var(--chain-gap)) * 76 + 2.5rem);
    left: 23rem; */
    
    top: calc(20px + (var(--chain-gap) * 62) - 0.3rem);  /* Same multiplier */
    left: calc(50px - 4.7rem);  /* 3rem less */
    transform: rotate(70deg);
}

.path8-12 {
    /* Old positioning - commented for reference */
    /* top: calc((var(--chain-gap)) * 77 + 2rem);
    left: 20rem; */
    
    top: calc(20px + (var(--chain-gap) * 62) + 0.75rem);
    left: calc(50px - 7.5rem);  /* 3rem less */
    transform: rotate(60deg);
}

.path8-13 {
    /* Old positioning - commented for reference */
    /* top: calc((var(--chain-gap)) * 78 + 1rem);
    left: 17rem; */
    
    top: calc(20px + (var(--chain-gap) * 63) - 0.5rem);
    left: calc(50px - 10.3rem);  /* 3rem less */
    transform: rotate(80deg);
}

.path8-14 {
    /* Old positioning - commented for reference */
    /* top: calc((var(--chain-gap)) * 78 + 1.5rem);
    left: 14rem; */
    
    top: calc(20px + (var(--chain-gap) * 63) - 0.25rem);  /* Same multiplier as 8-13 */
    left: calc(50px - 12.8rem);  /* 3rem less */
    transform: rotate(90deg);
}

.path8-15 {
    /* Old positioning - commented for reference */
    /* top: calc((var(--chain-gap)) * 78 + 2rem);
    left: 11rem; */
    
    top: calc(20px + (var(--chain-gap) * 63) + 0.25rem);  /* Same multiplier */
    left: calc(50px - 15.8rem);  /* 3rem less, now negative */
    transform: rotate(70deg);
}

.path8-16 {
    /* Old positioning - commented for reference */
    /* top: calc((var(--chain-gap)) * 79 + 0.5rem);
    left: 8.5rem; */
    
    top: calc(20px + (var(--chain-gap) * 63) + 1.2rem);
    left: calc(50px - 18.5rem);  /* 2.5rem less */
    transform: rotate(75deg);
}

.path8-17 {
    /* Old positioning - commented for reference */
    /* top: calc((var(--chain-gap)) * 79 + 2rem);
    left: 6rem; */
    
    top: calc(20px + (var(--chain-gap) * 64) + 0.25rem);  /* Same multiplier as 8-16 */
    left: calc(50px - 20.9rem);  /* 2.5rem less */
    transform: rotate(60deg);
}

.path8-18 {
    /* Old positioning - commented for reference */
    /* top: calc((var(--chain-gap)) * 80 + 2rem);
    left: 4rem; */
    
    top: calc(20px + (var(--chain-gap) * 65) + 0.5rem);
    left: calc(50px - 22.9rem);  /* 2rem less */
    transform: rotate(30deg);
}

   /* Nine path - final S-curve to cube4 (white segments) */
   .path9-1 {
    /* Old positioning - commented for reference */
    /* top: calc((var(--chain-gap)) * 82 + 1rem);
    left: 2.5rem; */
    
    /* New positioning - continuing from path8-18 */
    top: calc(20px + (var(--chain-gap) * 66) + 1.5rem);  /* Jump of 2 multipliers */
    left: calc(50px - 23.8rem);  /* 1.5rem less than path8-18 */
    transform: rotate(10deg);
}

.path9-2 {
    /* Old positioning - commented for reference */
    /* top: calc((var(--chain-gap)) * 83 + 2rem);
    left: 1.5rem; */
    
    top: calc(20px + (var(--chain-gap) * 67) + 2.5rem);
    left: calc(50px - 23.8rem);  /* 1rem less */
    transform: rotate(80deg);
}

.path9-3 {
    /* Old positioning - commented for reference */
    /* top: calc((var(--chain-gap)) * 84 + 2.5rem);
    left: 1.5rem; */
    
    top: calc(20px + (var(--chain-gap) * 69) + 1rem);
    left: calc(50px - 23rem);  /* Same as path9-2 */
    transform: rotate(70deg);
}

.path9-4 {
    /* Old positioning - commented for reference */
    /* top: calc((var(--chain-gap)) * 85 + 3rem);
    left: 2.5rem; */
    
    top: calc(20px + (var(--chain-gap) * 70) + 1.5rem);
    left: calc(50px - 21.6rem);  /* 1rem more (moving right) */
    transform: rotate(50deg);

}

.path9-5 {
    /* Old positioning - commented for reference */
    /* top: calc((var(--chain-gap)) * 86 + 3rem);
    left: 4.5rem; */
    
    top: calc(20px + (var(--chain-gap) * 71) + 1.5rem);
    left: calc(50px - 19.2rem);  /* 2rem more */
    transform: rotate(30deg);
}

.path9-6 {
    /* Old positioning - commented for reference */
    /* top: calc((var(--chain-gap)) * 87 + 2rem);
    left: 7rem; */
    
    top: calc(20px + (var(--chain-gap) * 72) + 0.7rem);
    left: calc(50px - 16.5rem);  /* 2.5rem more */
    transform: rotate(20deg);
}

.path9-7 {
    /* Old positioning - commented for reference */
    /* top: calc((var(--chain-gap)) * 88 + 0.5rem);
    left: 9.5rem; */
    
    top: calc(20px + (var(--chain-gap) * 73) - 0.7rem);
    left: calc(50px - 13.7rem);  /* 2.5rem more */
    transform: rotate(10deg);
}

.path9-8 {
    /* Old positioning - commented for reference */
    /* top: calc((var(--chain-gap)) * 88 + 0.75rem);
    left: 12.25rem; */
    
    top: calc(20px + (var(--chain-gap) * 74) - 2rem);  /* Same multiplier as 9-7 */
    left: calc(50px - 10.5rem);  /* 2.75rem more */
    transform: rotate(10deg);
}

.path9-9 {
    /* Old positioning - commented for reference */
    /* top: calc((var(--chain-gap)) * 88 + 1.5rem);
    left: 15rem; */
    
    top: calc(20px + (var(--chain-gap) * 73) + 0.5rem);  /* Same multiplier */
    left: calc(50px - 7.4rem);  /* 2.75rem more, now positive */
    transform: rotate(10deg);

}

.path9-10 {
    /* Old positioning - commented for reference */
    /* top: calc((var(--chain-gap)) * 89 + 0.5rem);
    left: 17.5rem; */
    
    top: calc(20px + (var(--chain-gap) * 73) + 0.8rem);
    left: calc(50px - 4.5rem);  /* 2.5rem more */
    transform: rotate(0deg);
}

.path9-11 {
    /* Old positioning - commented for reference */
    /* top: calc((var(--chain-gap)) * 89 + 2rem);
    left: 20rem; */
    
    top: calc(20px + (var(--chain-gap) * 74) - 0.85rem);  /* Same multiplier as 9-10 */
    left: calc(50px - 1.5rem);  /* 2.5rem more */
    transform: rotate(15deg);


}

.path9-12 {
    /* Old positioning - commented for reference */
    /* top: calc((var(--chain-gap)) * 90 + 1.5rem);
    left: 22.5rem; */
    
    top: calc(20px + (var(--chain-gap) * 74) + 0.25rem);
    left: calc(50px + 1.2rem);  /* 2.5rem more */
    transform: rotate(30deg);
}

.path9-13 {
    /* Old positioning - commented for reference */
    /* top: calc((var(--chain-gap)) * 91 + 1.5rem);
    left: 24.5rem; */
    
    top: calc(20px + (var(--chain-gap) * 75) - 0.3rem);
    left: calc(50px + 3.7rem);  /* 2rem more */
    transform: rotate(40deg);
}


.path9-14 {
    top: calc(20px + (var(--chain-gap) * 76) - 0.8rem);
    left: calc(50px + 5.9rem);  /* 2rem more */
    transform: rotate(35deg);
}


.path9-15 {
    top: calc(20px + (var(--chain-gap) * 76) + 1rem);
    left: calc(50px + 7.9rem);  /* 2rem more */
    transform: rotate(50deg);
}

   /* Ten path - final S-curve to cube4 (white segments) */
  .path10-1 {
    /* Old positioning - commented for reference */
    /* top: calc((var(--chain-gap)) * 92 + 2rem);
    left: 26rem; */
    
    /* New positioning - continuing from path9-13 */
    top: calc(20px + (var(--chain-gap) * 78) - 0.5rem);
    left: calc(50px + 9.8rem);  /* 1.5rem more than path9-13 */
    transform: rotate(60deg);
}

.path10-2 {
    /* Old positioning - commented for reference */
    /* top: calc((var(--chain-gap)) * 93 + 2.5rem);
    left: 26.5rem; */
    
    top: calc(20px + (var(--chain-gap) * 79));
    left: calc(50px + 10.7rem);  /* 0.5rem more */
    transform: rotate(80deg);
}

.path10-3 {
    /* Old positioning - commented for reference */
    /* top: calc((var(--chain-gap)) * 94 + 3rem);
    left: 27rem; */
    
    top: calc(20px + (var(--chain-gap) * 80) + 0.5rem);
    left: calc(50px + 11.4rem);  /* 0.5rem more */
    transform: rotate(70deg);
}

.path10-4 {
    /* Old positioning - commented for reference */
    /* top: calc((var(--chain-gap)) * 103 + 1rem);
    left: 40rem; */
    
    top: calc(20px + (var(--chain-gap) * 90) + 1.5rem);  /* Big jump of 9 multipliers */
    left: calc(50px + 16.4rem);  /* 13rem more - big jump */
    transform: rotate(65deg);
}

.path10-5 {
    /* Old positioning - commented for reference */
    /* top: calc((var(--chain-gap)) * 104 + 1rem);
    left: 41.5rem; */
    
    top: calc(20px + (var(--chain-gap) * 91) + 1.8rem);
    left: calc(50px + 17.5rem);  /* 1.5rem more */
    transform: rotate(55deg);
}

.path10-6 {
    /* Old positioning - commented for reference */
    /* top: calc((var(--chain-gap)) * 105 + 1rem);
    left: 43rem; */
    
    top: calc(20px + (var(--chain-gap) * 92) + 1.8rem);
    left: calc(50px + 19.10em);  /* 1.5rem more */
    transform: rotate(50deg);
}

   /* Eleven path - final S-curve to cube4 (white segments) */
  
   .path11-1 {
    /* Old positioning - commented for reference */
    /* top: calc((var(--chain-gap)) * 106 + 1rem);
    left: 45rem; */
    
    /* New positioning - continuing from path10-6 */
    top: calc(20px + (var(--chain-gap) * 93) + 1.5rem);
    left: calc(50px + 20.8rem);  /* 2rem more than path10-6 */
    transform: rotate(50deg);
}

.path11-2 {
    /* Old positioning - commented for reference */
    /* top: calc((var(--chain-gap)) * 107 + 1rem);
    left: 47rem; */
    
    top: calc(20px + (var(--chain-gap) * 94) + 1.5rem);
    left: calc(50px + 22.4rem);  /* 2rem more */
    transform: rotate(50deg);
}

.path11-3 {
    /* Old positioning - commented for reference */
    /* top: calc((var(--chain-gap)) * 108 + 1rem);
    left: 48.5rem; */
    
    top: calc(20px + (var(--chain-gap) * 95) + 1.5rem);
    left: calc(50px + 23.9rem);  /* 1.5rem more */
    transform: rotate(60deg);
}

.path11-4 {
    /* Old positioning - commented for reference */
    /* top: calc((var(--chain-gap)) * 109 + 1rem);
    left: 50rem; */
    
    top: calc(20px + (var(--chain-gap) * 96) + 1.5rem);
    left: calc(50px + 25.4rem);  /* 1.5rem more */
    transform: rotate(50deg);
}

.path11-5 {
    /* Old positioning - commented for reference */
    /* top: calc((var(--chain-gap)) * 110 + 1rem);
    left: 52rem; */
    
    top: calc(20px + (var(--chain-gap) * 97) + 1.5rem);
    left: calc(50px + 27.25rem);  /* 2rem more */
    transform: rotate(40deg);
}

.path11-6 {
    /* Old positioning - commented for reference */
    /* top: calc((var(--chain-gap)) * 111 + 0.5rem);
    left: 54rem; */
    
    top: calc(20px + (var(--chain-gap) * 98) + 1rem);
    left: calc(50px + 29rem);  /* 2rem more */
    transform: rotate(50deg);
}


  
        
      
         /* Initially hide all path segments */
        .path-segment {
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        
        /* Show segments when visible class is added */
        .path-segment.visible {
            opacity: 1;
        }
        
        /* Faster animation for mobile */
        @media (max-width: 768px) {
            .path-segment {
                transition: opacity 0.2s ease;
            }
        }
        
        /* Instant show for reduced motion preference */
        @media (prefers-reduced-motion: reduce) {
            .path-segment {
                transition: none;
            }
        }