:root {
  --primary-color: #766df4;
  --secondary-color: #e4e4ed;
  --tertiary-color: #6f6d91;
}

.sp-1 {
  width:50px;
  height:50px;
  border-radius:50%;
  border:8px solid;
  border-color:var(--primary-color) #0000;
  animation:ss1 1s infinite;
}
@keyframes ss1 {to{transform: rotate(.5turn)}}

.sp-2 {
  width:50px;
  height:50px;
  border-radius:50%;
  border:8px solid;
  border-color:var(--secondary-color);
  border-right-color: var(--primary-color);
  animation:ss2 1s infinite linear;
}
@keyframes ss2 {to{transform: rotate(1turn)}}

.sp-3 {
  width:50px;
  height:50px;
  border-radius:50%;
  background:conic-gradient(#0000 10%,var(--primary-color));
  -webkit-mask:radial-gradient(farthest-side,#0000 calc(100% - 8px),#000 0);
  animation:ss3 1s infinite linear;
}
@keyframes ss3 {to{transform: rotate(1turn)}}

.sp-4a {
  width:50px;
  height:50px;
  border-radius:50%;
  padding:1px;
  background:conic-gradient(#0000 10%,var(--primary-color)) content-box;
  -webkit-mask:
    repeating-conic-gradient(#0000 0deg,#000 1deg 20deg,#0000 21deg 36deg),
    radial-gradient(farthest-side,#0000 calc(100% - 9px),#000 calc(100% - 8px));
  -webkit-mask-composite: destination-in;
  mask-composite: intersect;
  animation:ss4 1s infinite steps(10);
}
@keyframes ss4 {to{transform: rotate(1turn)}}

.sp-5a {
  width:50px;
  height:50px;
  border-radius:50%;
  background:var(--primary-color);
  -webkit-mask:
    repeating-conic-gradient(#0000 0deg,#000 1deg 70deg,#0000 71deg 90deg),
    radial-gradient(farthest-side,#0000 calc(100% - 9px),#000 calc(100% - 8px));
  -webkit-mask-composite: destination-in;
  mask-composite: intersect;
  animation:ss5 1s infinite ;
}
@keyframes ss5 {to{transform: rotate(.5turn)}}

.sp-6 {
  width:50px;
  height:50px;
  border-radius:50%;
  padding:3px;
  background: 
    radial-gradient(farthest-side,var(--primary-color) 95%,#0000) 50% 0/12px 12px no-repeat,
    radial-gradient(farthest-side,#0000 calc(100% - 5px),var(--primary-color) calc(100% - 4px)) content-box;
  animation:ss6 2s infinite ;
}
@keyframes ss6 {to{transform: rotate(1turn)}}

.sp-7 {
  width:50px;
  height:50px;
  --c:radial-gradient(farthest-side,var(--primary-color) 92%,#0000);
  background: 
    var(--c) 50% 0,
    var(--c) 50% 100%,
    var(--c) 100% 50%,
    var(--c) 0    50%;
  background-size:12px 12px;
  background-repeat:no-repeat;
  animation:ss7 1s infinite;
}
@keyframes ss7 {to{transform: rotate(.5turn)}}

.sp-8 {
  width:50px;
  height:50px;
  color:var(--primary-color);
  --c:radial-gradient(farthest-side,currentColor 92%,#0000);
  background: 
    var(--c) 50% 0   /12px 12px,
    var(--c) 50% 100%/12px 12px,
    var(--c) 100% 50%/12px 12px,
    var(--c) 0    50%/12px 12px,
    var(--c) 50%  50%/12px 12px,
    linear-gradient(currentColor 0 0) 50% 50%/4px 100%,
    linear-gradient(currentColor 0 0) 50% 50%/100% 4px;
  background-repeat:no-repeat;
  animation:ss8 1s infinite linear;
}
@keyframes ss8 {to{transform: rotate(.5turn)}}

.sp-9 {
  width:50px;
  height:50px;
  border-radius:50%;
  background: 
    radial-gradient(farthest-side,var(--primary-color) 95%,#0000) 50% 1px/12px 12px no-repeat,
    radial-gradient(farthest-side,#0000 calc(100% - 14px),var(--secondary-color) 0);
  animation:ss9 2s infinite linear;
}
@keyframes ss9 {to{transform: rotate(1turn)}}

.sp-10 {
  width:50px;
  height:50px;
  border-radius:50%;
  color:var(--primary-color);
  background: 
    linear-gradient(currentColor 0 0) center/100% 4px,
    linear-gradient(currentColor 0 0) center/4px 100%,
    radial-gradient(farthest-side,#0000 calc(100% - 6px),currentColor calc(100% - 5px)),
    radial-gradient(circle 6px,currentColor 94%,#0000 0);
  background-repeat: no-repeat;
  animation:ss10 2s infinite linear;
  position: relative;
}
.sp-10:before {
  content: "";
  position: absolute;
  inset:0;
  border-radius: inherit;
  background:inherit;
  transform:rotate(45deg);
}
@keyframes ss10 {to{transform: rotate(.5turn)}}

.sp-11 {
  width:32px;
  height:32px;
  --c:radial-gradient(circle closest-side,var(--primary-color) 90%,#0000);
  background: 
    var(--c) 0    0,
    var(--c) 0    100%,
    var(--c) 100% 100%;
  background-size:12px 12px;
  background-repeat: no-repeat;
  animation:dd1 1s infinite linear;
}
@keyframes dd1 {
    25% {background-position:100% 0   ,0 100%,100% 100%}
    50% {background-position:100% 0   ,0 0   ,100% 100%}
    75% {background-position:100% 0   ,0 0   ,0    100%}
    100%{background-position:100% 100%,0 0   ,0    100%}
}

.sp-12 {
  width:50px;
  height:28px;
  --c:radial-gradient(farthest-side,var(--primary-color) 90%,#0000);
  background: 
    var(--c) 0    50%,
    var(--c) 50%  50%,
    var(--c) 50%  50%,
    var(--c) 100% 50%;
  background-size:12px 12px;
  background-repeat: no-repeat;
  animation:dd2 1s infinite linear;
}
@keyframes dd2 {
    33%  {background-position:0   0  ,50% 100%,50%  100%,100% 0}
    66%  {background-position:50% 0  ,0   100%,100% 100%,50%  0}
    100% {background-position:50% 50%,0   50% ,100% 50% ,50%  50%}
}

.sp-13 {
  width:50px;
  height:28px;
  background: 
    radial-gradient(farthest-side at bottom,var(--primary-color) 90%,#0000) 0    calc(50% - 3px),
    radial-gradient(farthest-side at top   ,var(--primary-color) 90%,#0000) 0    calc(50% + 3px),

    radial-gradient(farthest-side at bottom,var(--primary-color) 90%,#0000) 50%  calc(50% - 3px),
    radial-gradient(farthest-side at top   ,var(--primary-color) 90%,#0000) 50%  calc(50% + 3px),

    radial-gradient(farthest-side at bottom,var(--primary-color) 90%,#0000) 100% calc(50% - 3px),
    radial-gradient(farthest-side at top   ,var(--primary-color) 90%,#0000) 100% calc(50% + 3px);
  background-size:12px 6px;
  background-repeat: no-repeat;
  animation:dd3 1s infinite linear;
}
@keyframes dd3 {
    16.67% {background-position:0 0,0 100%,50% calc(50% - 3px),50% calc(50% + 3px),100% calc(50% - 3px),100% calc(50% + 3px)}
    33.33% {background-position:0 0,0 100%,50% 0,50% 100%,100% calc(50% - 3px),100% calc(50% + 3px)}
    50%    {background-position:0 0,0 100%,50% 0,50% 100%,100% 0,100% 100%}
    66.67% {background-position:0 calc(50% - 3px),0 calc(50% + 3px),50% 0,50% 100%,100% 0,100% 100%}
    83.33% {background-position:0 calc(50% - 3px),0 calc(50% + 3px),50% calc(50% - 3px),50% calc(50% + 3px),100% 0,100% 100%}
}


.sp-14 {
  width:50px;
  height:28px;
  background: 
    radial-gradient(farthest-side,var(--primary-color) 90%,#0000) 0   50%/12px 12px,

    radial-gradient(farthest-side at bottom,var(--primary-color) 90%,#0000) 50%  calc(50% - 3px)/12px 6px,
    radial-gradient(farthest-side at top   ,var(--primary-color) 90%,#0000) 50%  calc(50% + 3px)/12px 6px,

    radial-gradient(farthest-side at bottom,var(--primary-color) 90%,#0000) 100% calc(50% - 3px)/12px 6px,
    radial-gradient(farthest-side at top   ,var(--primary-color) 90%,#0000) 100% calc(50% + 3px)/12px 6px;
  background-repeat: no-repeat;
  animation:dd4 1s infinite;
}
@keyframes dd4 {
    25%  {background-position:0    50%,50% 0,50% 100%,100% 0,100% 100%}
    50%  {background-position:100% 50%,0   0,0   100%,50%  0,50%  100%}
    75%,
    100% {background-position:100% 50%,0 calc(50% - 3px),0 calc(50% + 3px),50% calc(50% - 3px),50% calc(50% + 3px)}
}

.sp-15 {
  width:50px;
  height:12px;
  background: 
    radial-gradient(farthest-side,var(--primary-color) 90%,#0000) left,
    radial-gradient(farthest-side,var(--primary-color) 90%,#0000) right;
  background-size: 12px 12px;
  background-repeat: no-repeat;
  position: relative;
  animation: dd5-0 1s infinite linear;
}
.sp-15::before {
  content:"";
  position: absolute;
  background:var(--primary-color);
  border-radius: 50%;
  inset:0 calc(50% - 6px);
  transform-origin: -13px 50%;
  animation: dd5-1 0.5s infinite linear;
}

@keyframes dd5-0 { 
    0%,49.99% {transform:scale(1)}
    50%,100%  {transform:scale(-1)} 
}

@keyframes dd5-1 { 
    80%,100% {transform:rotate(1turn)} 
}

.sp-16 {
  width:30px;
  height:27.6px;
  --c:radial-gradient(farthest-side,var(--primary-color) 90%,#0000);
  background: 
    var(--c) 50%  0,
    var(--c) 0    100%,
    var(--c) 100% 100%;
  background-size: 12px 12px;
  background-repeat: no-repeat;
  position: relative;
  animation: dd6 1s infinite;
}

@keyframes dd6{ 
    50%,100% {background-position: 100% 100%,50% 0,0 100%} 
}

.sp-17 {
  width:12px;
  height:12px;
  border-radius: 50%;
  clip-path: inset(-25px -100px);
  color: var(--primary-color);
  box-shadow: 19px -40px,38px -40px,57px -40px;
  transform: translateX(-38px);
  animation: dd7 1s infinite;
}

@keyframes dd7{ 
  16.67% {box-shadow: 19px  0px,38px -40px,57px -40px}
  33.33% {box-shadow: 19px  0px,38px   0px,57px -40px}
  45%,55%{box-shadow: 19px  0px,38px   0px,57px   0px}
  66.67% {box-shadow: 19px 40px,38px   0px,57px   0px}
  83.33% {box-shadow: 19px 40px,38px  40px,57px   0px}
  100%   {box-shadow: 19px 40px,38px  40px,57px  40px}
}


.sp-18 {
  width:12px;
  height:12px;
  border-radius: 50%;
  color: var(--primary-color);
  background: var(--primary-color);
  box-shadow: -19px 0px,19px 0px;
  animation: dd8 1s infinite;
}

@keyframes dd8{ 
  25%  {box-shadow: -19px -19px, 19px 19px}
  50%  {box-shadow:   0px -19px,  0px 19px}
  75%  {box-shadow:  19px -19px,-19px 19px}
  100% {box-shadow:  19px   0px,-19px  0px}
}

.sp-19 {
  width:12px;
  height:12px;
  border-radius: 50%;
  clip-path: inset(-45px);
  color: var(--primary-color);
  box-shadow: -60px 15px,-60px 15px,-60px 15px;
  transform: translateY(-15px);
  animation: dd9 1s infinite linear;
}

@keyframes dd9{ 
  16.67% {box-shadow:-60px 15px,-60px 15px,19px 15px}
  33.33% {box-shadow:-60px 15px,  0px 15px,19px 15px}
  40%,60%{box-shadow:-19px 15px,  0px 15px,19px 15px}
  66.67% {box-shadow:-19px 15px,  0px 15px,60px 15px}
  83.33% {box-shadow:-19px 15px, 60px 15px,60px 15px}
  100%   {box-shadow: 60px 15px, 60px 15px,60px 15px}
}


.sp-20 {
  width:76px;
  height:12px;
  display: flex;
}
.sp-20:before,
.sp-20:after {
  content:"";
  flex:1;
  background:
    radial-gradient(farthest-side         ,var(--primary-color) 90%,#0000) center/12px 100%,
    radial-gradient(farthest-side at right,var(--primary-color) 90%,#0000) right /6px  100%;
  background-repeat: no-repeat;
  transform:scale(var(--s,1)) translate(0px) rotate(0);
  animation:dd10 2s infinite;
}
.sp-20:after {
  --s:-1;
}
@keyframes dd10 {
    25%      {transform:scale(var(--s,1)) translate(-10px) rotate(0);}
    50%      {transform:scale(var(--s,1)) translate(-10px) rotate(1turn);}
    75%,100% {transform:scale(var(--s,1)) translate(0px)   rotate(1turn);}
}
.sp-21 {
  width:50px;
  height:12px;
  background: radial-gradient(circle closest-side,var(--primary-color) 90%,#0000) 0 0/33% 100% space;
  clip-path: inset(0 100% 0 0);
  animation:ad1 1s steps(4) infinite;
}
@keyframes ad1 {to{clip-path: inset(0 -34% 0 0)}}

.sp-22 {
  width:50px;
  height:12px;
  background: radial-gradient(circle closest-side,var(--primary-color) 90%,#0000) 0 0/33% 100% no-repeat;
  animation:ad2 1s steps(3) infinite;
}
@keyframes ad2 {to{background-position:150% 0}}

.sp-23 {
  width:50px;
  height:24px;
  background: 
    radial-gradient(circle closest-side,var(--primary-color) 90%,#0000) 0%   50%,
    radial-gradient(circle closest-side,var(--primary-color) 90%,#0000) 50%  50%,
    radial-gradient(circle closest-side,var(--primary-color) 90%,#0000) 100% 50%;
  background-size:calc(100%/3) 12px;
  background-repeat: no-repeat;
  animation:ad3 1s infinite linear;
}
@keyframes ad3 {
    20%{background-position:0%   0%, 50%  50%,100%  50%}
    40%{background-position:0% 100%, 50%   0%,100%  50%}
    60%{background-position:0%  50%, 50% 100%,100%   0%}
    80%{background-position:0%  50%, 50%  50%,100% 100%}
}

.sp-24 {
  width:50px;
  height:12px;
  background: 
    radial-gradient(circle closest-side at left  6px top 50%,var(--primary-color) 90%,#0000),
    radial-gradient(circle closest-side                     ,var(--primary-color) 90%,#0000),
    radial-gradient(circle closest-side at right 6px top 50%,var(--primary-color) 90%,#0000);
  background-size:100% 100%;
  background-repeat: no-repeat;
  animation:ad4 1s infinite alternate;
}
@keyframes ad4 {
    to{width:20px;height:24px}
}

.sp-25 {
  width:12px;
  height:12px;
  background: var(--primary-color);
  border-radius: 50%;
  box-shadow: 20px 0 #766df422,-20px 0 var(--primary-color);
  animation:ad5 1s infinite linear alternate;
}
@keyframes ad5 {
    0% {box-shadow: 20px 0 var(--primary-color),-20px 0 #766df422;background: var(--primary-color)}
    33%{box-shadow: 20px 0 var(--primary-color),-20px 0 #766df422;background: #766df422}
    66%{box-shadow: 20px 0 #766df422,-20px 0 var(--primary-color);background: #766df422}
}

.sp-26 {
  width:12px;
  height:12px;
  background: var(--primary-color);
  border-radius: 50%;
  box-shadow: 12px 0 var(--primary-color),-24px 0 var(--primary-color);
  animation:ad6 1s infinite linear alternate;
}
@keyframes ad6 {
    50% {box-shadow: 12px 0 var(--primary-color),-12px 0 var(--primary-color)}
    100%{box-shadow: 24px 0 var(--primary-color),-12px 0 var(--primary-color)}
}

.sp-27 {
  width:50px;
  height:12px;
  background: 
    radial-gradient(circle closest-side,var(--primary-color) 90%,#0000) 0%   50%,
    radial-gradient(circle closest-side,var(--primary-color) 90%,#0000) 50%  50%,
    radial-gradient(circle closest-side,var(--primary-color) 90%,#0000) 100% 50%;
  background-size:calc(100%/3) 100%;
  background-repeat: no-repeat;
  animation:ad7 1s infinite linear;
}
@keyframes ad7 {
    33%{background-size:calc(100%/3) 0%  ,calc(100%/3) 100%,calc(100%/3) 100%}
    50%{background-size:calc(100%/3) 100%,calc(100%/3) 0%  ,calc(100%/3) 100%}
    66%{background-size:calc(100%/3) 100%,calc(100%/3) 100%,calc(100%/3) 0%  }
}
.sp-28 {
  width:12px;
  height:12px;
  position: relative;
}
.sp-28::before,
.sp-28::after {
  content:"";
  position: absolute;
  inset:0;
  border-radius:50%;
  background:var(--primary-color);
}
.sp-28::before {
  box-shadow: -24px 0 var(--primary-color);
  animation:ad8-1 1s infinite linear;
}
.sp-28::after {
  transform: rotate(0deg) translateX(24px);
  animation:ad8-2 1s infinite linear;
}

@keyframes ad8-1 {
    100%{transform:translateX(24px)}
}
@keyframes ad8-2 {
    100%{transform:rotate(-180deg) translateX(24px)}
}

.sp-29 {
  width:12px;
  height:12px;
  position: relative;
  animation:ad9-0 2s infinite steps(2);
}
.sp-29::before,
.sp-29::after {
  content:"";
  position: absolute;
  inset:0;
  border-radius:50%;
  background:var(--primary-color);
}
.sp-29::before {
  box-shadow: 24px 0 var(--primary-color);
  transform:translateX(-24px);
  animation:ad9-1 1s infinite linear alternate;
}
.sp-29::after {
  transform:translateX(12px) rotate(0deg) translateX(12px);
  animation:ad9-2 1s infinite linear alternate;
}
@keyframes ad9-0 {
    0% ,49.9% {transform:scale(1)}
    50%,100%{transform:scale(-1)}
}
@keyframes ad9-1 {
    100%{box-shadow: 48px 0 var(--primary-color)}
}
@keyframes ad9-2 {
    100%{transform:translateX(12px) rotate(-180deg) translateX(12px)}
}

.sp-30 {
  width:12px;
  height:12px;
  position: relative;
}
.sp-30::before,
.sp-30::after {
  content:"";
  position: absolute;
  inset:0;
  border-radius:50%;
  background:var(--primary-color);
}
.sp-30::before {
  box-shadow: -24px 0 var(--primary-color);
  animation:ad10-1 2s infinite linear;
}
.sp-30::after {
  transform: rotate(0deg) translateX(24px);
  animation:ad10-2 2s infinite linear;
}
@keyframes ad10-1 {
    50%{transform:translateX(24px)}
}
@keyframes ad10-2 {
    100%{transform:rotate(-360deg) translateX(24px)}
}

.sp-31 {
  width:45px;
  height:40px;
  --c:linear-gradient(var(--primary-color) 0 0);
  background: 
    var(--c) 0%   50%,
    var(--c) 50%  50%,
    var(--c) 100% 50%;
  background-size:9px 100%;
  background-repeat: no-repeat;
  animation:bb1 1s infinite linear;
}
@keyframes bb1 {
    33%{background-size:9px 10% ,9px 100%,9px 100%}
    50%{background-size:9px 100%,9px 10% ,9px 100%}
    66%{background-size:9px 100%,9px 100%,9px 10% }
}

.sp-32 {
  width:45px;
  height:40px;
  --c:linear-gradient(var(--primary-color) 0 0);
  background: 
    var(--c) 0%   100%,
    var(--c) 50%  100%,
    var(--c) 100% 100%;
  background-size:9px 100%;
  background-repeat: no-repeat;
  animation:bb2 1s infinite linear;
}
@keyframes bb2 {
    20% {background-size:9px 60% ,9px 100%,9px 100%}
    40% {background-size:9px 80% ,9px 60% ,9px 100%}
    60% {background-size:9px 100%,9px 80% ,9px 60% }
    80% {background-size:9px 100%,9px 100%,9px 80% }
}

.sp-33 {
  width:45px;
  height:40px;
  background: 
    linear-gradient(#0000 calc(1*100%/6),var(--primary-color) 0 calc(3*100%/6),#0000 0) left bottom,
    linear-gradient(#0000 calc(2*100%/6),var(--primary-color) 0 calc(4*100%/6),#0000 0) center bottom,
    linear-gradient(#0000 calc(3*100%/6),var(--primary-color) 0 calc(5*100%/6),#0000 0) right bottom;
  background-size:9px 600%;
  background-repeat: no-repeat;
  animation:bb3 1s infinite linear;
}
@keyframes bb3 {
    100% {background-position: left top,center top,right top }
}

.sp-34 {
  width:45px;
  height:40px;
  --c:linear-gradient(var(--primary-color) calc(50% - 10px),#0000 0 calc(50% + 10px),var(--primary-color) 0);
  background: 
    var(--c) 0%   100%,
    var(--c) 50%  100%,
    var(--c) 100% 100%;
  background-size:9px calc(200% + 20px);
  background-repeat: no-repeat;
  animation:bb4 1s infinite linear;
}
@keyframes bb4 {
    33%  {background-position: 0% 50%,50% 100%,100% 100%}
    50%  {background-position: 0%  0%,50%  50%,100% 100%}
    66%  {background-position: 0%  0%,50%   0%,100%  50%}
    100% {background-position: 0%  0%,50%   0%,100%   0%}
}

.sp-35 {
  width:45px;
  height:60px;
  --c:linear-gradient(var(--primary-color) 0 0);
  background: 
    var(--c) 0%   100%,
    var(--c) 50%  100%,
    var(--c) 100% 100%;
  background-size:9px 65%;
  background-repeat: no-repeat;
  animation:bb5 1s infinite linear;
}
@keyframes bb5 {
    20% {background-position:0% 50% ,50% 100%,100% 100%}
    40% {background-position:0% 0%  ,50% 50% ,100% 100%}
    60% {background-position:0% 100%,50% 0%  ,100% 50% }
    80% {background-position:0% 100%,50% 100%,100% 0%  }
}

.sp-36 {
  width:45px;
  height:60px;
  --c:linear-gradient(var(--primary-color) 0 0);
  background: 
    var(--c) 0%   50%,
    var(--c) 50%  50%,
    var(--c) 100% 50%;
  background-size:9px 50%;
  background-repeat: no-repeat;
  animation:bb6 1s infinite linear;
}
@keyframes bb6 {
    20% {background-position:0% 0%  ,50% 50% ,100% 50% }
    40% {background-position:0% 100%,50% 0%  ,100% 50% }
    60% {background-position:0% 50% ,50% 100%,100% 0%  }
    80% {background-position:0% 50% ,50% 50% ,100% 100%}
}

.sp-37 {
  width:45px;
  height:60px;
  --c:linear-gradient(var(--primary-color) 0 0);
  background: 
    var(--c) 0%   50%,
    var(--c) 50%  50%,
    var(--c) 100% 50%;
  background-size:9px 50%;
  background-repeat: no-repeat;
  animation:bb7 1s infinite linear alternate;
}
@keyframes bb7 {
    20% {background-size:9px 20% ,9px 50% ,9px 50% }
    40% {background-size:9px 100%,9px 20% ,9px 50% }
    60% {background-size:9px 50% ,9px 100%,9px 20% }
    80% {background-size:9px 50% ,9px 50% ,9px 100%}
}

.sp-38 {
  width:45px;
  height:60px;
  --c:linear-gradient(var(--primary-color) 0 0);
  background: 
    var(--c) 0%   100%,
    var(--c) 50%  100%,
    var(--c) 100% 100%;
  background-size:9px 65%;
  background-repeat: no-repeat;
  animation:bb8 1s infinite linear;
}
@keyframes bb8 {
    16.67% {background-position:0% 0%  ,50% 100%,100% 100%}
    33.33% {background-position:0% 0%  ,50% 0%  ,100% 100%}
    50%    {background-position:0% 0%  ,50% 0%  ,100% 0%  }
    66.67% {background-position:0% 100%,50% 0%  ,100% 0%  }
    83.33% {background-position:0% 100%,50% 100%,100% 0%  }

}

.sp-39 {
  width:45px;
  height:60px;
  --c:linear-gradient(var(--primary-color) 0 0);
  background: 
    var(--c) 0%   50%,
    var(--c) 50%  50%,
    var(--c) 100% 50%;
  background-size:9px 60%;
  background-repeat: no-repeat;
  animation:bb9 1s infinite;
}
@keyframes bb9 {
    33% {background-position:0% 0%  ,50% 100%,100% 0%  }
    66% {background-position:0% 100%,50% 0%  ,100% 100%}
}

.sp-40 {
  width:54px;
  height:45px;
  --c:repeating-linear-gradient(90deg,var(--primary-color) 0 9px,#0000 0 18px);
  background: 
    var(--c) 50% 0,
    var(--c) 50% 100%;
  background-size:45px 50%;
  background-repeat: no-repeat;
  animation:bb10 1s infinite linear;
}
@keyframes bb10 {
  33%  {background-position: 0   0   ,100% 100%}
  66%  {background-position: 0   100%,100% 0   }
  100% {background-position: 50% 100%,50%  0   }
}

.sp-41 {
  width:90px;
  height:14px;
  background: repeating-linear-gradient(90deg, var(--primary-color) 0 calc(25% - 5px),#0000 0 25%) left/calc(4*100%/3) 100%;
  animation:ii1 0.5s infinite linear;
}
@keyframes ii1 {
    100% {background-position: right}
}

.sp-42 {
  width:90px;
  height:14px;
  background: radial-gradient(circle closest-side, var(--primary-color) 92%,#0000 ) calc(100%/3) 0/calc(100%/4) 100%;
  animation:ii2 0.5s infinite linear;
}
@keyframes ii2 {
    100% {background-position: 0 0}
}

.sp-43 {
  width:calc(80px / 0.707);
  height:14px;
  background: repeating-linear-gradient(-45deg, var(--primary-color) 0 15px,#0000 0 20px) left/200% 100%;
  animation:ii3 2s infinite linear;
}
@keyframes ii3 {
    100% {background-position:right}
}


.sp-44 {
  width:calc(80px / 0.707);
  height:14px;
  background: 
    repeating-linear-gradient(135deg, var(--primary-color) 0 15px,#0000 0 20px) left top,
    repeating-linear-gradient( 45deg, var(--primary-color) 0 15px,#0000 0 20px) left bottom;
  background-size:  200% 50%;
  background-repeat: no-repeat;
  animation:ii4 2s infinite linear;
}
@keyframes ii4 {
    100% {background-position:top right,bottom right}
}

.sp-45 {
  width:90px;
  height:14px;
  background: 
    radial-gradient(circle 10px at right 7px top 50%,#0000 92%,var(--primary-color)),
    radial-gradient(circle 10px at right 0   top 50%,var(--primary-color) 92%,#0000);
  background-size: calc(100%/3) 100%; 
  background-position: 50% 0%;
  animation:ii5 .5s infinite linear;
}
@keyframes ii5 {
    100% {background-position: 0% 0%}
}

.sp-46 {
  width:90px;
  height:14px;
  background: 
    conic-gradient(from   45deg at calc(100% - 7px) 50%,var(--primary-color) 90deg,#0000 0),
    conic-gradient(from -135deg at             7px  50%,var(--primary-color) 90deg,#0000 0);
  background-position: calc(100%/3) 0;
  background-size:calc(100%/4) 100%;
  animation:ii6 0.5s infinite linear;
}
@keyframes ii6 {
    100% {background-position: 0 0}
}

.sp-47 {
  width:90px;
  height:14px;
  background: 
    linear-gradient(90deg,var(--primary-color) 50%,#0000 0) repeat-x,
    conic-gradient(from 45deg at right 7px top  50%,var(--primary-color) 90deg,#0000 0);
  background-position: calc(100%/3) 50%;
  background-size:calc(100%/4) 60%,calc(100%/4) 100%;
  animation:ii7 0.5s infinite linear;
}
@keyframes ii7 {
    100% {background-position: 0 50%}
}
.sp-48 {
  width:90px;
  height:12px;
  background: 
    linear-gradient(90deg ,var(--primary-color) 50%,#0000 0) 0 0%,
    linear-gradient(-90deg,var(--primary-color) 50%,#0000 0) 0 50%,
    linear-gradient(90deg ,var(--primary-color) 50%,#0000 0) 0 100%;
  background-size: 8px calc(100%/3);
  background-repeat: repeat-x;
  animation:ii8 .25s infinite linear;
}
@keyframes ii8 {
    100% {background-position: -8px 0%,-8px 50%,-8px 100%}
}

.sp-49 {
  width:90px;
  height:14px;
  background: 
    linear-gradient(90deg,#0000 16px, var(--primary-color) 0 30px, #0000 0),
    radial-gradient(circle closest-side at 68% 50%, var(--primary-color) 92%,#0000),
    conic-gradient(from   45deg at calc(100% - 7px) 50%,var(--primary-color) 90deg,#0000 0),
    conic-gradient(from -135deg at             7px  50%,var(--primary-color) 90deg,#0000 0);
  background-position: 0 0;
  background-size:calc(3*100%/4) 100%;
  background-repeat: repeat-x;
  animation:ii9 2s infinite linear;
}
@keyframes ii9 {
    100% {background-position: -300% 0}
}

.sp-50 {
  width:90px;
  height:12px;
  background: 
    linear-gradient( 90deg,var(--primary-color) 50%,#0000 0) 0 0%,
    linear-gradient(-90deg,var(--primary-color) 50%,#0000 0) 0 0%;
  background-size: 20px 100%;
  background-repeat: repeat-x;
  animation:ii10 1s infinite linear;
}
@keyframes ii10 {
    100% {background-position: -20px 0%,20px 0%}
}

.sp-51 {
  width: 120px;
  height:20px;
  background: 
    linear-gradient(90deg,#0001 33%,#0005 50%,#0001 66%)
    var(--primary-color);
  background-size:300% 100%;
  animation: cct1 1s infinite linear;
}

@keyframes cct1 {
  0% {background-position: right}
}


.sp-52 {
  width: 120px;
  height: 20px;
  background: 
    linear-gradient(90deg, #0000 ,var(--primary-color)) left -50px top 0/50px 20px no-repeat 
    var(--secondary-color);
  animation: cct2 1s infinite linear;
}

@keyframes cct2 {
  100% {background-position: right -50px top 0}
}

.sp-53 {
  width: 120px;
  height: 20px;
  transform: skewX(-45deg);
  background: 
    linear-gradient(var(--primary-color) 0 0) left -30px top 0/30px 20px no-repeat 
    var(--secondary-color);
  animation: cct3 1s infinite linear;
}

@keyframes cct3 {
  100% {background-position: right -30px top 0}
}

.sp-54 {
  width: 120px;
  height: 22px;
  border-radius: 40px;
  color: var(--secondary-color);
  border: 2px solid;
  position: relative;
  overflow: hidden;
}

.sp-54::before {
  content: "";
  position: absolute;
  margin: 2px;
  width: 14px;
  top: 0;
  bottom: 0;
  left: -20px;
  border-radius: inherit;
  background: var(--primary-color);
  box-shadow: -10px 0 12px 3px var(--primary-color);
  clip-path: polygon(0 5%, 100% 0,100% 100%,0 95%,-30px 50%);
  animation: cct4 1s infinite linear;
}

@keyframes cct4 {
  100% {left: calc(100% + 20px)}
}

.sp-55 {
    width: 120px;
    height: 20px;
    background: 
      linear-gradient(var(--primary-color) 0 0) left -40px top 0/40px 20px,
      linear-gradient(var(--secondary-color) 0 0) center/100% 50%; 
    background-repeat: no-repeat;
    animation: cct5 1s infinite linear;
}

@keyframes cct5 {
  100% {background-position: right -40px top 0,center}
}

.sp-56 {
    width: 120px;
    height: 20px;
    background: 
      radial-gradient(circle 10px,var(--primary-color) 95%,#0000 )  right /calc(200% + 20px) 100%,
      linear-gradient(var(--primary-color) 0 0) center/100% 6px; 
    background-repeat: no-repeat; 
    -webkit-mask: radial-gradient(circle 4px,#0000 93%,var(--primary-color) ) right/calc(200% + 20px) 100%;
    animation: cct6 1s infinite linear;
}

@keyframes cct6 {
  100% {background-position: left;-webkit-mask-position:left}
}

.sp-57 {
  width:120px;
  height:20px;
  -webkit-mask:linear-gradient(90deg,var(--primary-color) 70%,#0000 0) left/20% 100%;
  background:
   linear-gradient(var(--primary-color) 0 0) left -25% top 0 /20% 100% no-repeat
   var(--secondary-color);
  animation:cct7 1s infinite steps(6);
}
@keyframes cct7 {
    100% {background-position: right -25% top 0}
}

.sp-58 {
    width: 40px;
    height: 40px;
    background:
      linear-gradient(to bottom right,#0000 calc(50% - 40px),var(--primary-color) 50%,#0000 calc(50% + 40px)) 
      bottom right/calc(200% + 80px) calc(200% + 80px) 
      var(--secondary-color);
    animation: cct8 1s infinite ;
}
@keyframes cct8 {
    100% {background-position: top left}
}

.sp-59 {
    width: 120px;
    height: 20px;
    background: 
      radial-gradient(circle closest-side,var(--primary-color) 94%,#0000) 50% 50%/calc(50% + 10px) 70% repeat-x 
      var(--secondary-color);
    animation: cct9 1s infinite cubic-bezier(0.3,1,0,1);
}

@keyframes cct9 {
  100% {background-position: calc(200% - 5px)}
}

.sp-60 {
    width: 120px;
    height: 20px;
    background: linear-gradient(var(--primary-color) 0 0) left -40px top 0/40px 100% no-repeat var(--secondary-color);
    -webkit-mask:
      linear-gradient(#000 0 0) top   /100% 5px no-repeat,
      linear-gradient(#000 0 0) bottom/100% 5px no-repeat,
      repeating-linear-gradient(90deg,#000 0 5px, #0000 0 20%) left/calc(100% - 5px) 100%;
    animation: cct10 1s infinite linear;
}

@keyframes cct10 {
  100% {background-position: right -40px top 0}
}

.sp-61 {
  width:120px;
  height:20px;
  background:
   linear-gradient(var(--primary-color) 0 0) left/0% 100% no-repeat
   var(--secondary-color);
  animation:pp1 2s infinite linear;
}
@keyframes pp1 {
    100% {background-size:100% 100%}
}

.sp-62 {
  width:120px;
  height:20px;
  border-radius: 20px;
  background:
   linear-gradient(var(--primary-color) 0 0) left/0% 100% no-repeat
   var(--secondary-color);
  animation:pp2 2s infinite steps(10);
}
@keyframes pp2 {
    100% {background-size:110% 100%}
}

.sp-63 {
  width:120px;
  height:20px;
  border-radius: 20px;
  background:
   repeating-linear-gradient(135deg,var(--primary-color) 0 10px,#766df4bf 0 20px) left/0% 100%   no-repeat,
   repeating-linear-gradient(135deg,#766df433    0 10px,#766df41a    0 20px) left/100% 100%;
  animation:pp3 2s infinite;
}
@keyframes pp3 {
    100% {background-size:100% 100%}
}

.sp-64 {
  width:120px;
  height:20px;
  -webkit-mask:linear-gradient(90deg,var(--primary-color) 70%,#0000 0) left/20% 100%;
  background:
   linear-gradient(var(--primary-color) 0 0) left/0% 100% no-repeat
   var(--secondary-color);
  animation:pp4 2s infinite steps(6);
}
@keyframes pp4 {
    100% {background-size:120% 100%}
}

.sp-65 {
  width:80px;
  height:40px;
  border:2px solid var(--primary-color);
  border-right-color: transparent;
  padding:3px;
  background: 
    repeating-linear-gradient(90deg,var(--primary-color) 0 10px,#0000 0 15px) 
    left/0% 100% no-repeat content-box content-box;
  position: relative;
  animation:pp5 2s infinite steps(6);
}
.sp-65::before {
  content:"";
  position: absolute;
  top:-2px;
  bottom:-2px;
  left:100%;
  width:10px;
  background:
    linear-gradient(
        #0000   calc(50% - 7px),var(--primary-color) 0 calc(50% - 5px),
        #0000 0 calc(50% + 5px),var(--primary-color) 0 calc(50% + 7px),#0000 0) left /100% 100%,
    linear-gradient(var(--primary-color) calc(50% - 5px),#0000        0 calc(50% + 5px),var(--primary-color) 0) left /2px 100%,
    linear-gradient(#0000        calc(50% - 5px),var(--primary-color) 0 calc(50% + 5px),#0000        0) right/2px 100%;
  background-repeat:no-repeat;
}
@keyframes pp5 {
    100% {background-size:120% 100%}
}

.sp-66 {
  width:120px;
  height:22px;
  border-radius: 20px;
  color:var(--primary-color);
  border:2px solid;
  position: relative;
}
.sp-66::before {
  content:"";
  position: absolute;
  margin:2px;
  inset:0 100% 0 0;
  border-radius: inherit;
  background:var(--primary-color);
  animation:pp6 2s infinite;
}
@keyframes pp6 {
    100% {inset:0}
}

.sp-67 {
  width:120px;
  height:24px;
  -webkit-mask:
    radial-gradient(circle closest-side,#000 94%,#0000) 0 0/25% 100%,
    linear-gradient(#000 0 0) center/calc(100% - 12px) calc(100% - 12px) no-repeat;
  background:
   linear-gradient(var(--primary-color) 0 0) left/0% 100% no-repeat
   var(--secondary-color);
  animation:pp7 2s infinite linear;
}
@keyframes pp7 {
    100% {background-size:100% 100%}
}

.sp-68 {
  width:60px;
  height:60px;
  border-radius: 50%;
  -webkit-mask:linear-gradient(0deg,#000 55%,#0000 0) bottom/100% 18.18%;
  background:
   linear-gradient(var(--primary-color) 0 0) bottom/100% 0% no-repeat
   var(--secondary-color);
  animation:pp8 2s infinite steps(7);
}
@keyframes pp8 {
    100% {background-size:100% 115%}
}


.sp-69 {    
  --r1: 154%;
  --r2: 68.5%;
  width:60px;
  height:60px;
  border-radius: 50%; 
  background:
    radial-gradient(var(--r1) var(--r2) at top   ,#0000 79.5%,var(--primary-color) 80%),
    radial-gradient(var(--r1) var(--r2) at bottom,var(--primary-color) 79.5%,#0000 80%),
    radial-gradient(var(--r1) var(--r2) at top   ,#0000 79.5%,var(--primary-color) 80%),
    var(--secondary-color);
  background-size: 50.5% 220%;
  background-position: -100% 0%,0% 0%,100% 0%;
  background-repeat:no-repeat;
  animation:pp9 2s infinite linear;
}
@keyframes pp9 {
    33%  {background-position:    0% 33% ,100% 33% ,200% 33% }
    66%  {background-position: -100%  66%,0%   66% ,100% 66% }
    100% {background-position:    0% 100%,100% 100%,200% 100%}
}


.sp-70 {
  width:120px;
  height:60px;
  border-radius:200px 200px 0 0;
  -webkit-mask:repeating-radial-gradient(farthest-side at bottom ,#0000 0,#000 1px 12%,#0000 calc(12% + 1px) 20%);
  background:
   radial-gradient(farthest-side at bottom,var(--primary-color) 0 95%,#0000 0) bottom/0% 0% no-repeat
   var(--secondary-color);
  animation:pp10 2s infinite steps(6);
}
@keyframes pp10 {
    100% {background-size:120% 120%}
}

.sp-71 {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background:var(--primary-color);
    clip-path: polygon(0 0,100% 0,100% 100%,0 100%);
    animation: ssh1 2s infinite cubic-bezier(0.3,1,0,1);
}
@keyframes ssh1 {
  33% {border-radius: 0;background:var(--secondary-color) ;clip-path: polygon(0 0,100% 0,100% 100%,0 100%)}
  66% {border-radius: 0;background:var(--tertiary-color) ;clip-path: polygon(50% 0,50% 0,100% 100%,0 100%)}
}

.sp-72 {
    width: 40px;
    height: 40px;
    background:var(--primary-color);
    clip-path: polygon(0 0,100% 0,100% 100%);
    animation: ssh2 2s infinite cubic-bezier(0.3,1,0,1);
}
@keyframes ssh2 {
  25%  {clip-path: polygon(0    0,100% 0   ,0 100%)}
  50%  {clip-path: polygon(0    0,100% 100%,0 100%)}
  75%  {clip-path: polygon(100% 0,100% 100%,0 100%)}
  100% {clip-path: polygon(100% 0,100% 100%,0 0   )}
}

.sp-73 {
  width: 50px;
  height: 50px;
  display: flex;
  transform:rotate(45deg);
  animation: ssh3-0 1.5s infinite linear;
}
.sp-73:before,
.sp-73:after {
  content: "";
  width:50%;
  background:var(--primary-color);
  clip-path: polygon(0 50%,100% 0,100% 100%);
  animation: inherit;
  animation-name: ssh3-1;
}
.sp-73:after {
  clip-path: polygon(0 0,100% 50%,0% 100%);
  animation-name: ssh3-2;
}
@keyframes ssh3-0 {
  25% {width:50px;height:50px;transform:rotate(0)}
  50% {width:50px;height:50px}
  75% {width:70.70px;height:35.35px}
  100%{width:70.70px;height:35.35px;transform:rotate(0)}
}
@keyframes ssh3-1 {
  0%,25% {clip-path: polygon(0 50% ,100% 0,100% 100%);transform:translate(0.3px)}
  50%    {clip-path: polygon(0 50% ,100% 0,100% 100%);transform:translate(-5px)}
  75%    {clip-path: polygon(0 100%,0    0,100% 100%);transform:translate(-5px)}
  100%   {clip-path: polygon(0 100%,0    0,100% 100%);transform:translate(17.7px)}
}
@keyframes ssh3-2 {
  0%,25% {clip-path: polygon(0 0,100% 50%,0    100%);transform:translate(-0.3px) }
  50%    {clip-path: polygon(0 0,100% 50%,0    100%);transform:translate(5px) }
  75%    {clip-path: polygon(0 0,100% 0  ,100% 100%);transform:translate(5px)}
  100%   {clip-path: polygon(0 0,100% 0  ,100% 100%);transform:translate(-17.7px) }
}

.sp-74 {
    width: 40px;
    height: 40px;
    color:var(--primary-color);
    background:
      conic-gradient(from  -45deg at top    20px left 50% ,#0000 ,currentColor 1deg 90deg,#0000 91deg),
      conic-gradient(from   45deg at right  20px top  50% ,#0000 ,currentColor 1deg 90deg,#0000 91deg),
      conic-gradient(from  135deg at bottom 20px left 50% ,#0000 ,currentColor 1deg 90deg,#0000 91deg),
      conic-gradient(from -135deg at left   20px top  50% ,#0000 ,currentColor 1deg 90deg,#0000 91deg);
    animation: ssh4 1.5s infinite cubic-bezier(0.3,1,0,1);
}
@keyframes ssh4 {
   50%  {width:60px;height: 60px;transform: rotate(180deg)}
   100% {transform: rotate(360deg)}
}

.sp-75 {
    width: 40px;
    height: 40px;
    color:var(--primary-color);
    background:
      linear-gradient(currentColor 0 0),
      linear-gradient(currentColor 0 0),
      linear-gradient(currentColor 0 0),
      linear-gradient(currentColor 0 0);
    background-size: 21px 21px;
    background-repeat:no-repeat;
    animation: ssh5 1.5s infinite cubic-bezier(0.3,1,0,1);
}
@keyframes ssh5 {
   0%   {background-position: 0    0,100% 0   ,100% 100%,0 100%}
   33%  {background-position: 0    0,100% 0   ,100% 100%,0 100%;width:60px;height: 60px}
   66%  {background-position: 100% 0,100% 100%,0    100%,0 0   ;width:60px;height: 60px}
   100% {background-position: 100% 0,100% 100%,0    100%,0 0   }
}

.sp-76 {
  width: 40px;
  height: 40px;
  display: grid;
  animation: ssh6-0 1.5s infinite linear;
}
.sp-76:before,
.sp-76:after {
  content: "";
  grid-area: 1/1;
  background:var(--primary-color);
  animation: 
    ssh6-1 1.5s infinite linear,
    ssh6-2 1.5s infinite linear;
}
.sp-76:after {
  --s:-1;
  animation-direction: reverse;
}

@keyframes ssh6-0 {
  0%,9%,91%,100% {background:var(--primary-color)}
  10%,90%        {background:#0000}
}
@keyframes ssh6-1 {
  0%,33%   {clip-path: polygon(0   0,50% 100%,100% 0,100% 100%,0 100%)}
  66%,100% {clip-path: polygon(50% 0,50% 100%,50%  0,100% 100%,0 100%)}
}
@keyframes ssh6-2 {
  0%,10%,90%,100% {transform: scale(var(--s,1)) translateY(0)}
  33%,66%         {transform: scale(var(--s,1)) translateY(50%)}
}

.sp-77 {
  width: 40px;
  height: 40px;
  color:var(--primary-color);
  position: relative;
  background:
    conic-gradient(from 134deg at top   ,currentColor 92deg,#0000 0) top,
    conic-gradient(from -46deg at bottom,currentColor 92deg,#0000 0) bottom;
  background-size:100% 50%;
  background-repeat: no-repeat;
}
.sp-77:before {
  content:'';
  position: absolute;
  inset:0;
  background:
    conic-gradient(from  -135deg at top 0    left   22px ,#0000 ,currentColor 1deg 90deg,#0000 0),
    conic-gradient(from  -45deg  at right 0  top    22px ,#0000 ,currentColor 1deg 90deg,#0000 0),
    conic-gradient(from   45deg  at bottom 0 right  22px ,#0000 ,currentColor 1deg 90deg,#0000 0),
    conic-gradient(from  135deg  at left  0  bottom 20px ,#0000 ,currentColor 1deg 90deg,#0000 0);
   animation: ssh7 1.5s infinite cubic-bezier(0.3,1,0,1);
}
@keyframes ssh7 {
   33%  {inset:-10px;transform: rotate(0deg)}
   66%  {inset:-10px;transform: rotate(90deg)}
   100% {inset:0    ;transform: rotate(90deg)}
}

.sp-78 {
  width: 40px;
  height: 40px;
  display: grid;
  animation: ssh8-0 1.5s infinite linear;
}
.sp-78:before,
.sp-78:after {
  content: "";
  grid-area: 1/1;
  background:var(--primary-color);
  clip-path: polygon(0 0%,100% 0,100% 100%);
  animation: inherit;
  animation-name: ssh8-1;
}
.sp-78:after {
  --s:-1;
}
@keyframes ssh8-0 {
  66%      {transform: skewX(0deg)}
  80%,100% {transform: skewX(-45deg)}
}
@keyframes ssh8-1 {
  0%   {transform:scale(var(--s,1)) translate(-0.5px,0)}
  33%  {transform:scale(var(--s,1)) translate(calc(1px - 50%),calc(1px - 50%))}
  66%  {transform:scale(var(--s,1)) translate(calc(1px - 50%),0%)}
  100% {transform:scale(var(--s,1)) translate(calc(0.5px - 50%),0%)}
}

.sp-79 {
  width: 40px;
  height: 20px;
  background:var(--primary-color);
  position: relative;
  animation: ssh9-0 1.5s infinite linear;
}
.sp-79:before,
.sp-79:after {
   content:"";
   position: absolute;
   background:inherit; 
   bottom: 100%;
   width: 50%;
   height: 100%;
   animation: inherit;
   animation-name: ssh9-1;
}
.sp-79:before {
  left:0;
  transform-origin: bottom left;
  --s:-1;
}
.sp-79:after {
  right:0;
  transform-origin: bottom right;
}
@keyframes ssh9-0 {
   0%,10%   {transform:translateY(0%)    scaleY(1)}
   49.99%   {transform:translateY(-50%)  scaleY(1)}
   50%      {transform:translateY(-50%)  scaleY(-1)}
   90%,100% {transform:translateY(-100%) scaleY(-1)}
}
@keyframes ssh9-1 {
   10%,90% {transform: rotate(0deg)}
   50%     {transform: rotate(calc(var(--s,1)*180deg))}
}

.sp-80 {
  display: flex;
  width:50px;
  height:50px;
  animation: ssh10-0 1.5s infinite linear;
}
.sp-80:before,
.sp-80:after {
  content: "";
  width:50%;
  background:var(--primary-color);
  clip-path: polygon(0 0,100% 50%,0% 100%);
  animation: inherit;
  animation-name: ssh10-1;
  transform-origin: bottom left;
}
.sp-80:before {
  clip-path: polygon(0 50%,100% 0,100% 100%);
  transform-origin: bottom right;
  --s:-1;
}

@keyframes ssh10-0 {
  0%,34.99% {transform: scaley(1)}
  35%,70%   {transform: scaley(-1)}
  90%,100%  {transform: scaley(-1) rotate(180deg)}
}

@keyframes ssh10-1 {
  0%,10%,70%,100%{transform:translateY(-100%) rotate(calc(var(--s,1)*135deg))}
  35%            {transform:translateY(0%)    rotate(0deg)}
}

.sp-81 {
  width:50px;
  height:50px;
  border:2px solid var(--primary-color);
  display: grid;
  animation: hh1 4s infinite linear;
}
.sp-81::before,
.sp-81::after {
  content: "";
  grid-area: 1/1;
  margin:auto;
  width:70.7%;
  height:70.7%; 
  border:2px solid var(--primary-color);
  animation: inherit;
}
.sp-81::after {
  width:50%;
  height:50%;
  border:2px solid var(--primary-color);
  animation-duration: 2s;
}
@keyframes hh1{
  100% {transform:rotate(1turn)}
}

.sp-82 {
  width:40px;
  height:40px;
  border-radius: 50%;
  border:2px solid var(--primary-color);
  position: relative;
  transform-origin: left;
  animation: hh2 1s infinite linear;
}
.sp-82::before,
.sp-82::after {
  content: "";
  position: absolute;
  inset:0 0 auto;
  margin:auto;
  width:50%;
  height:50%;
  border-radius: 50%;
  border:2px solid var(--primary-color);
  transform-origin: 50% calc(100% - 4px);
  animation: inherit;
}
.sp-82::after {
  inset:auto 0 calc(100% + 2px);
  animation-duration: 0.5s;
  animation-direction: reverse;
  transform-origin: 50% calc(200% - 2px);
}
@keyframes hh2{
  100% {transform:rotate(1turn)}
}

.sp-83 {
  width:50px;
  height:50px;
  border:2px solid var(--primary-color);
  background:
    conic-gradient(from -90deg at calc(100% - 2px) calc(100% - 2px),#0000 0 90deg,var(--primary-color) 0),
    conic-gradient(from -90deg at calc(100% - 2px) calc(100% - 2px),#0000 0 90deg,var(--primary-color) 0);
  background-size: 16px 16px;
  background-position: 0 0;
  animation: hh3 1s infinite;
}

@keyframes hh3{
  100% {background-position: -16px -16px,16px 16px}
}

.sp-84 {
  width:50px;
  height:50px;
  border:2px solid var(--primary-color);
  background:
    radial-gradient(farthest-side,#0000 calc(100% - 3px),var(--primary-color) calc(100% - 2px) 98%,#0000),
    radial-gradient(farthest-side,#0000 calc(100% - 3px),var(--primary-color) calc(100% - 2px) 98%,#0000);
  background-size: 23px 23px;
  background-position: 0 0,12px 12px;
  animation: hh4 1s infinite;
}

@keyframes hh4{
  100% {background-position: -23px 0px,12px 35px}
}

.sp-85 {
  width:50px;
  height:calc(50px*0.866);
  display: grid;
  background:
    linear-gradient(to bottom left ,#0000 calc(50% - 1px),var(--primary-color) 0 calc(50% + 1px),#0000 0) right/50% 100%,
    linear-gradient(to bottom right,#0000 calc(50% - 1px),var(--primary-color) 0 calc(50% + 1px),#0000 0) left /50% 100%,
    linear-gradient(var(--primary-color) 0 0) bottom/100% 2px;
  background-repeat: no-repeat;
  transform-origin: 50% 66%;
  animation: hh5 4s infinite linear;
}

.sp-85::before,
.sp-85::after {
  content: "";
  grid-area: 1/1;
  background:inherit;
  transform-origin: inherit;
  animation: inherit;
}
.sp-85::after {
  animation-duration: 2s;
}

@keyframes hh5{
  100% {transform:rotate(1turn)}
}

.sp-86 {
  width:50px;
  height:50px;
  display: grid;
  background:
    linear-gradient(90deg,var(--primary-color) 2px,#0000 0 calc(100% - 2px),var(--primary-color) 0) center/100% 14px,
    linear-gradient(0deg, var(--primary-color) 2px,#0000 0 calc(100% - 2px),var(--primary-color) 0) center/14px 100%,
    linear-gradient(var(--primary-color) 0 0) center/100% 2px,
    linear-gradient(var(--primary-color) 0 0) center/2px 100%;
  background-repeat: no-repeat;
  animation: hh6 4s infinite linear;
}

.sp-86::before,
.sp-86::after {
  content: "";
  grid-area: 1/1;
  background:inherit;
  transform-origin: inherit;
  animation: inherit;
}
.sp-86::after {
  animation-duration: 2s;
}

@keyframes hh6{
  100% {transform:rotate(1turn)}
}


.sp-87 {
  width:50px;
  height:50px;
  border:2px solid var(--primary-color);
  background:
    repeating-conic-gradient(#0000 0 90deg,var(--primary-color) 0 180deg),
    repeating-conic-gradient(var(--primary-color) 0 90deg,#0000 0 180deg);
  background-size: 16px 16px;
  background-position: 0 0;
  animation: hh7 2s infinite;
}

@keyframes hh7{
  100% {background-position: 0px 32px,16px 0px}
}

.sp-88 {
  width:50px;
  height:50px;
  border:2px solid var(--primary-color);
  background:
    radial-gradient(farthest-side,var(--primary-color) 90%,#0000),
    radial-gradient(farthest-side,#0000 90%,var(--primary-color));
  background-size: 16px 16px;
  background-position: 0 0;
  animation: hh8 2s infinite;
}

@keyframes hh8{
  100% {background-position: 0px 32px,-16px 0}
}

.sp-89 {
  width:50px;
  height:50px;
  position: relative;
  border-radius: 50%;
  background: repeating-conic-gradient(#0000,var(--primary-color) 1deg 18deg,#0000 20deg 36deg);
  animation: hh9 4s infinite linear;
}

.sp-89::before{
  content: "";
  position: absolute;
  border-radius: 50%;
  inset:0;
  background:inherit;
  animation: inherit;
}

@keyframes hh9{
  100% {transform:rotate(.5turn)}
}

.sp-90 {
  width:50px;
  height:50px;
  display: grid;
}

.sp-90::before,
.sp-90::after{
  content: "";
  grid-area: 1/1;
  border-radius: 50%;
  background: repeating-conic-gradient(#0000,var(--primary-color) 1deg 18deg,#0000 20deg 36deg);
  -webkit-mask:repeating-radial-gradient(farthest-side,#000 0 10%,#0000 0 20%);
  animation: hh10 4s infinite linear;
}

.sp-90::after{
  -webkit-mask:repeating-radial-gradient(farthest-side,#0000 0 10%,#000 0 20%);
  animation-direction: reverse;
}

@keyframes hh10 {
  100% {transform:rotate(.5turn)}
}

.sp-91 {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  padding: 6px;
  background:
    conic-gradient(from 135deg at top,var(--primary-color) 90deg, #0000 0) 0 calc(50% - 4px)/17px 8.5px,
    radial-gradient(farthest-side at bottom left,#0000 calc(100% - 6px),var(--primary-color) calc(100% - 5px) 99%,#0000) top right/50%  50% content-box content-box,
    radial-gradient(farthest-side at top        ,#0000 calc(100% - 6px),var(--primary-color) calc(100% - 5px) 99%,#0000) bottom   /100% 50% content-box content-box;
  background-repeat: no-repeat;
  animation:as1 1s infinite linear;
}

@keyframes as1{ 
  100%{transform: rotate(1turn)}
}

.sp-92 {
    width: 50px;
    height: 50px;
    display: grid;
}
.sp-92::before,
.sp-92::after {    
    content:"";
    grid-area: 1/1;
    --c: radial-gradient(farthest-side,var(--primary-color) 92%,#0000);
    background: 
      var(--c) 50%  0, 
      var(--c) 50%  100%, 
      var(--c) 100% 50%, 
      var(--c) 0    50%;
    background-size: 12px 12px;
    background-repeat: no-repeat;
    animation: as2 1s infinite;
}
.sp-92::before {
  margin:4px;
  filter:hue-rotate(45deg);
  background-size: 8px 8px;
  animation-timing-function: linear
}

@keyframes as2{ 
  100%{transform: rotate(.5turn)}
}

.sp-93 {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: 
    radial-gradient(farthest-side,var(--primary-color) 94%,#0000) top/8px 8px no-repeat,
    conic-gradient(#0000 30%,var(--primary-color));
  -webkit-mask: radial-gradient(farthest-side,#0000 calc(100% - 8px),#000 0);
  animation:as3 1s infinite linear;
}

@keyframes as3{ 
  100%{transform: rotate(1turn)}
}

.sp-94 {
  width: 50px;
  height: 50px;
  display: grid;
  animation: as4 4s infinite;
}
.sp-94::before,
.sp-94::after {    
  content:"";
  grid-area: 1/1;
  border:8px solid;
  border-radius: 50%;
  border-color:var(--primary-color) var(--primary-color) #0000 #0000;
  mix-blend-mode: darken;
  animation: as4 1s infinite linear;
}
.sp-94::after {
  border-color:#0000 #0000 var(--secondary-color) var(--secondary-color);
  animation-direction: reverse;
}

@keyframes as4{ 
  100%{transform: rotate(1turn)}
}


.sp-95 {
  width: 50px;
  height: 50px;
  display: grid;
  border:4px solid #0000;
  border-radius: 50%;
  border-right-color:var(--primary-color);
  animation: as5 1s infinite linear;
}
.sp-95::before,
.sp-95::after {    
  content:"";
  grid-area: 1/1;
  margin:2px;
  border:inherit;
  border-radius: 50%;
  animation: s5 2s infinite;
}
.sp-95::after {
  margin:8px;
  animation-duration: 3s;
}

@keyframes as5{ 
  100%{transform: rotate(1turn)}
}

.sp-96 {
  width: 50px;
  height: 50px;
  display: grid;
  border:4px solid #0000;
  border-radius: 50%;
  border-color:var(--secondary-color) #0000;
  animation: as6 1s infinite linear;
}
.sp-96::before,
.sp-96::after {    
  content:"";
  grid-area: 1/1;
  margin:2px;
  border:inherit;
  border-radius: 50%;
}
.sp-96::before {
  border-color:var(--primary-color) #0000;
  animation:inherit; 
  animation-duration: .5s;
  animation-direction: reverse;
}
.sp-96::after {
  margin:8px;
}

@keyframes as6 { 
  100%{transform: rotate(1turn)}
}

.sp-97 {
  width: 70px;
  height: 70px;
  background:
    radial-gradient(farthest-side,var(--primary-color) 90%,#0000) center/16px 16px,
    radial-gradient(farthest-side,var(--tertiary-color)   90%,#0000) bottom/12px 12px;
  background-repeat: no-repeat;
  animation: as7 1s infinite linear;
  position: relative;
}
.sp-97::before {    
  content:"";
  position: absolute;
  width:8px;
  height:8px;
  inset:auto 0 16px;
  margin: auto;
  background:var(--secondary-color);
  border-radius: 50%;
  transform-origin: 50% calc(100% + 10px);
  animation:inherit;
  animation-duration: 0.5s;
}


@keyframes as7 { 
  100%{transform: rotate(1turn)}
}


.sp-98 {
  width: 50px;
  height: 50px;
  --c: radial-gradient(farthest-side,var(--primary-color) 92%,#0000);
  background: 
    var(--c) 50%  0, 
    var(--c) 50%  100%, 
    var(--c) 100% 50%, 
    var(--c) 0    50%;
  background-size: 10px 10px;
  background-repeat: no-repeat;
  animation: as8 1s infinite;
  position: relative;
}
.sp-98::before {    
  content:"";
  position: absolute;
  inset:0;
  margin: 3px;
  background:repeating-conic-gradient(#0000 0 35deg,var(--primary-color) 0 90deg);
  -webkit-mask:radial-gradient(farthest-side,#0000 calc(100% - 3px),#000 0);
  border-radius: 50%;
}

@keyframes as8 { 
  100%{transform: rotate(.5turn)}
}

.sp-99 {
  width: 50px;
  height: 50px;
  display: grid;
  color:var(--primary-color);
  background: radial-gradient(farthest-side, currentColor calc(100% - 6px),#0000 calc(100% - 5px) 0);
  -webkit-mask:radial-gradient(farthest-side,#0000 calc(100% - 13px),#000 calc(100% - 12px));
  border-radius: 50%;
  animation: as9 2s infinite linear;
}
.sp-99::before,
.sp-99::after {    
  content:"";
  grid-area: 1/1;
  background:
    linear-gradient(currentColor 0 0) center,
    linear-gradient(currentColor 0 0) center;
  background-size: 100% 10px,10px 100%;
  background-repeat: no-repeat;
}
.sp-99::after {
   transform: rotate(45deg);
}

@keyframes as9 { 
  100%{transform: rotate(1turn)}
}

.sp-100 {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 8px solid var(--primary-color);
  animation:
    as10-1 0.8s infinite linear alternate,
    as10-2 1.6s infinite linear;
}
@keyframes as10-1{
   0%    {clip-path: polygon(50% 50%,0       0,  50%   0%,  50%    0%, 50%    0%, 50%    0%, 50%    0% )}
   12.5% {clip-path: polygon(50% 50%,0       0,  50%   0%,  100%   0%, 100%   0%, 100%   0%, 100%   0% )}
   25%   {clip-path: polygon(50% 50%,0       0,  50%   0%,  100%   0%, 100% 100%, 100% 100%, 100% 100% )}
   50%   {clip-path: polygon(50% 50%,0       0,  50%   0%,  100%   0%, 100% 100%, 50%  100%, 0%   100% )}
   62.5% {clip-path: polygon(50% 50%,100%    0, 100%   0%,  100%   0%, 100% 100%, 50%  100%, 0%   100% )}
   75%   {clip-path: polygon(50% 50%,100% 100%, 100% 100%,  100% 100%, 100% 100%, 50%  100%, 0%   100% )}
   100%  {clip-path: polygon(50% 50%,50%  100%,  50% 100%,   50% 100%,  50% 100%, 50%  100%, 0%   100% )}
}
@keyframes s10-2{ 
  0%    {transform:scaleY(1)  rotate(0deg)}
  49.99%{transform:scaleY(1)  rotate(135deg)}
  50%   {transform:scaleY(-1) rotate(0deg)}
  100%  {transform:scaleY(-1) rotate(-135deg)}
}

.sp-101 {
  width: 80px;
  height: 80px;
  color:var(--primary-color);
  background:
    conic-gradient(from  165deg at top   ,#0000, currentColor 1deg 30deg,#0000 31deg) top,
    conic-gradient(from   75deg at left  ,#0000, currentColor 1deg 30deg,#0000 31deg) left,
    conic-gradient(from  -15deg at bottom,#0000, currentColor 1deg 30deg,#0000 31deg) bottom, 
    conic-gradient(from -105deg at right ,#0000, currentColor 1deg 30deg,#0000 31deg) right;
  background-size: 100% 50%,50% 100%;
  -webkit-mask:radial-gradient(circle 5px,#0000 90%,#000);
  background-repeat: no-repeat;
  animation:psh1 1.5s infinite linear;
}

@keyframes psh1{ 
  100%{transform: rotate(1turn)}
}

.sp-102 {
  width: 80px;
  height: 80px;
  color:var(--primary-color);
  background:
    conic-gradient(from  165deg at top   ,#0000, currentColor 1deg 30deg,#0000 31deg) top,
    conic-gradient(from   75deg at left  ,#0000, currentColor 1deg 30deg,#0000 31deg) left,
    conic-gradient(from  -15deg at bottom,#0000, currentColor 1deg 30deg,#0000 31deg) bottom, 
    conic-gradient(from -105deg at right ,#0000, currentColor 1deg 30deg,#0000 31deg) right;
  background-size: 100% 50%,50% 100%;
  -webkit-mask:radial-gradient(circle 5px,#0000 90%,#000);
  background-repeat: no-repeat;
  animation:psh2 1.5s infinite linear;
}
.sp-102:before {
  content: "";
  position: absolute;
  inset:0;
  background:inherit;
  transform: rotate(45deg); 
}

@keyframes psh2{ 
  100%{transform: rotate(1turn)}
}

.sp-103 {
  width: 80px;
  height: 80px;
  display: grid;
  color:var(--primary-color);
  -webkit-mask:radial-gradient(circle 5px,#0000 90%,#000);
  animation:psh3 1.5s infinite linear;
}
.sp-103:before,
.sp-103:after {
  content: "";
  grid-area: 1/1;
  background: 
    radial-gradient(farthest-side at bottom left, currentColor 94%,#0000) top left, 
    radial-gradient(farthest-side at top right  , currentColor 94%,#0000) bottom right;
  background-size: 63% 50%;
  background-repeat: no-repeat;
  -webkit-mask: 
    radial-gradient(65% 110% at bottom left, #0000 94%,#000) top left, 
    radial-gradient(65% 110% at top   right, #0000 94%,#000) bottom right;
  -webkit-mask-size: 62% 50%;
  -webkit-mask-repeat: no-repeat;
}
.sp-103:after {
  transform: rotate(90deg);
}

@keyframes psh3 { 
  100%{transform: rotate(1turn)}
}

.sp-104 {
  width: calc(80px*0.707);
  height: calc(80px*0.707);
  background:var(--primary-color);
  clip-path: polygon(0 0,50% 15%,100% 0,85% 50%,100% 100%,50% 85%,0 100%,15% 50%);
  -webkit-mask:
    radial-gradient(circle closest-side,#0000 92%,#000) top   /100% 33.4%,
    radial-gradient(circle closest-side,#0000 92%,#000) left  /33.4%  33.4%,
    radial-gradient(circle 5px         ,#0000 92%,#000) center/33.3%  33.3%,
    radial-gradient(circle closest-side,#0000 92%,#000) right /33.4%  33.4%,
    radial-gradient(circle closest-side,#0000 92%,#000) bottom/100% 33.4%;
  -webkit-mask-repeat:no-repeat;
  animation:psh4 1.5s infinite linear;
}

@keyframes psh4 { 
  100%{transform: rotate(1turn)}
}

.sp-105 {
  width: 80px;
  height: 80px;
  color:var(--primary-color);
  background:
    linear-gradient(currentColor 0 0) center/100% 15px,
    linear-gradient(currentColor 0 0) center/15px 100%,
    radial-gradient(circle 15px,currentColor 94%,#0000);
  background-repeat: no-repeat;
  -webkit-mask:radial-gradient(circle 5px,#0000 90%,#000);
  clip-path: polygon(0 30px,calc(100% - 30px) 0,100% calc(100% - 30px),30px 100%);
  animation:psh5 1.5s infinite linear;
}

@keyframes psh5 { 
  100%{transform: rotate(1turn)}
}

.sp-106 {
  width: 80px;
  height: 80px;
  display: grid;
  color:var(--primary-color);
  background:
    conic-gradient(from -153deg at right,#0000,currentColor 1deg 126deg,#0000 127deg) calc(50% + 5px) 0   /10px 50%,
    conic-gradient(from   27deg at left ,#0000,currentColor 1deg 126deg,#0000 127deg) calc(50% - 5px) 100%/10px 50%,

    linear-gradient(to top    right,currentColor 50%,#0000 0%) calc(50% + 10px) calc(50% - 10px) /20px 20px,
    linear-gradient(to bottom left ,currentColor 50%,#0000 0%) calc(50% - 10px) calc(50% + 10px) /20px 20px;
  background-repeat: no-repeat;
  -webkit-mask:radial-gradient(circle 5px,#0000 90%,#000);
  animation:psh6 1.5s infinite linear;
}
.sp-106:before,
.sp-106:after {
  content: "";
  grid-area: 1/1;
  background:inherit; 
  transform: rotate(60deg);
}
.sp-106:after {
  transform: rotate(120deg);
}

@keyframes psh6 { 
  100%{transform: rotate(1turn)}
}

.sp-107 {
  width: 80px;
  height: 80px;
  color:var(--primary-color);
  background:
    radial-gradient(150% 150% at left  -40% top    -40%,#0000 98%,currentColor) left  top,
    radial-gradient(150% 150% at right -40% top    -40%,#0000 98%,currentColor) right top,
    radial-gradient(150% 150% at left  -40% bottom -40%,#0000 98%,currentColor) left  bottom,
    radial-gradient(150% 150% at right -40% bottom -40%,#0000 98%,currentColor) right bottom;
  background-size: 50.3% 50.3%;
  background-repeat: no-repeat;
  -webkit-mask:radial-gradient(circle 5px,#0000 90%,#000);
  animation:psh7 1.5s infinite linear;
}


@keyframes psh7 { 
  100%{transform: rotate(1turn)}
}

.sp-108 {
  width: 80px;
  height: 80px;
  --c:var(--primary-color) 91%,#0000;
  background:
    radial-gradient(30% 50% at -3px             55%, var(--c)) top    right,
    radial-gradient(30% 50% at -3px             45%, var(--c)) bottom right,
    radial-gradient(30% 50% at calc(100% + 3px) 55%, var(--c)) top    left,
    radial-gradient(30% 50% at calc(100% + 3px) 45%, var(--c)) bottom left,

    radial-gradient(50% 30% at 45% calc(100% + 3px), var(--c)) top    right,
    radial-gradient(50% 30% at 45% -3px            , var(--c)) bottom right,
    radial-gradient(50% 30% at 55% calc(100% + 3px), var(--c)) top    left,
    radial-gradient(50% 30% at 55% -3px            , var(--c)) bottom left;
  background-size: 50.1% 50.1%;
  background-repeat: no-repeat;
  -webkit-mask:radial-gradient(circle 5px,#0000 90%,#000);
  animation:psh8 1.5s infinite linear;
}

@keyframes psh8 { 
  100%{transform: rotate(1turn)}
}

.sp-109 {
  width: 80px;
  height: 80px;
  --c:var(--primary-color) 98%,#0000;
  background:
    radial-gradient(50% 70% at 50% 120%, var(--c)) top,
    radial-gradient(70% 50% at -20% 50%, var(--c)) right,
    radial-gradient(50% 70% at 50% -20%, var(--c)) bottom,
    radial-gradient(70% 50% at 120% 50%, var(--c)) left;
  background-size: 100% 50.1%,50.1% 100%;
  background-repeat: no-repeat;
  -webkit-mask:radial-gradient(circle 5px,#0000 90%,#000);
  animation:psh9 1.5s infinite linear;
}

@keyframes psh9 { 
  100%{transform: rotate(1turn)}
}

.sp-110 {
  width: 80px;
  height: 80px;
  display: grid;
  color:var(--primary-color);
  background: radial-gradient(circle 16px,currentColor 94%,#0000);
  -webkit-mask:radial-gradient(circle 5px,#0000 90%,#000);
  animation:psh10 1.5s infinite linear;
}
.sp-110:before,
.sp-110:after {
  content: "";
  grid-area: 1/1;
  background: 
    radial-gradient(farthest-side at bottom right,currentColor 94%,#0000) top    right, 
    radial-gradient(farthest-side at top    left ,currentColor 94%,#0000) bottom left;
  background-size: 40% 45%;
  background-repeat: no-repeat;
  -webkit-mask: 
    radial-gradient(60% 100% at bottom right,#0000 94%,#000) top    right, 
    radial-gradient(60% 100% at top    left ,#0000 94%,#000) bottom left;
  -webkit-mask-size: 40% 45%;
  -webkit-mask-repeat: no-repeat;
}
.sp-110:after {
  transform: rotate(90deg);
}

@keyframes psh10 { 
  100%{transform: rotate(1turn)}
}

.sp-111 {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    animation: bp1 2s infinite;
}
@keyframes bp1 {
  0%   {background: conic-gradient(var(--primary-color) 0     ,#0000 0)}
  12.5%{background: conic-gradient(var(--primary-color) 45deg ,#0000 46deg)}
  25%  {background: conic-gradient(var(--primary-color) 90deg ,#0000 91deg)}
  37.5%{background: conic-gradient(var(--primary-color) 135deg,#0000 136deg)}
  50%  {background: conic-gradient(var(--primary-color) 180deg,#0000 181deg)}
  62.5%{background: conic-gradient(var(--primary-color) 225deg,#0000 226deg)}
  75%  {background: conic-gradient(var(--primary-color) 270deg,#0000 271deg)}
  87.5%{background: conic-gradient(var(--primary-color) 315deg,#0000 316deg)}
  100% {background: conic-gradient(var(--primary-color) 360deg,#0000 360deg)}
}

.sp-112 {
    width: 120px;
    height: 20px;
    background: 
      linear-gradient(var(--primary-color) 50%,#0000 0),
      linear-gradient(#0000 50%,var(--primary-color) 0),
      linear-gradient(var(--primary-color) 50%,#0000 0),
      linear-gradient(#0000 50%,var(--primary-color) 0),
      linear-gradient(var(--primary-color) 50%,#0000 0),
      linear-gradient(#0000 50%,var(--primary-color) 0)
      var(--secondary-color);
    background-size: calc(100%/6 + 1px) 200%;
    background-repeat: no-repeat;
    animation: bp2 2s infinite;
}
@keyframes bp2 {
  0%     {background-position: calc(0*100%/5) 100%,calc(1*100%/5)   0%,calc(2*100%/5) 100%,calc(3*100%/5)   0%,calc(4*100%/5) 100%,calc(5*100%/5)   0%}
  16.67% {background-position: calc(0*100%/5)   0%,calc(1*100%/5)   0%,calc(2*100%/5) 100%,calc(3*100%/5)   0%,calc(4*100%/5) 100%,calc(5*100%/5)   0%}
  33.33% {background-position: calc(0*100%/5)   0%,calc(1*100%/5) 100%,calc(2*100%/5) 100%,calc(3*100%/5)   0%,calc(4*100%/5) 100%,calc(5*100%/5)   0%}
  50%    {background-position: calc(0*100%/5)   0%,calc(1*100%/5) 100%,calc(2*100%/5)   0%,calc(3*100%/5)   0%,calc(4*100%/5) 100%,calc(5*100%/5)   0%}
  66.67% {background-position: calc(0*100%/5)   0%,calc(1*100%/5) 100%,calc(2*100%/5)   0%,calc(3*100%/5) 100%,calc(4*100%/5) 100%,calc(5*100%/5)   0%}
  83.33% {background-position: calc(0*100%/5)   0%,calc(1*100%/5) 100%,calc(2*100%/5)   0%,calc(3*100%/5) 100%,calc(4*100%/5)   0%,calc(5*100%/5)   0%}
  100%   {background-position: calc(0*100%/5)   0%,calc(1*100%/5) 100%,calc(2*100%/5)   0%,calc(3*100%/5) 100%,calc(4*100%/5)   0%,calc(5*100%/5) 100%}
}

.sp-113 {
  width: 124px;
  height: 24px;
  -webkit-mask: 
    conic-gradient(from 135deg at top   ,#0000,#000 .5deg 90deg,#0000 90.5deg) 0 0   ,
    conic-gradient(from -45deg at bottom,#0000,#000 .5deg 90deg,#0000 90.5deg) 0 100%;
  -webkit-mask-size:25% 50%;
  -webkit-mask-repeat:repeat-x;
  background: linear-gradient(var(--primary-color) 0 0) left/0% 100% no-repeat var(--secondary-color);
  animation: bp3 2s infinite linear;
}
@keyframes bp3 {
  100% {background-size: 100% 100%}
}

.sp-114 {
    width: 60px;
    height: 50px;
    -webkit-mask: 
      linear-gradient(90deg,#000 70%,#0000 0) calc(0*100%/4) 100%/calc(100%/5) calc(1*100%/5),
      linear-gradient(90deg,#000 70%,#0000 0) calc(1*100%/4) 100%/calc(100%/5) calc(2*100%/5),
      linear-gradient(90deg,#000 70%,#0000 0) calc(2*100%/4) 100%/calc(100%/5) calc(3*100%/5),
      linear-gradient(90deg,#000 70%,#0000 0) calc(3*100%/4) 100%/calc(100%/5) calc(4*100%/5),
      linear-gradient(90deg,#000 70%,#0000 0) calc(4*100%/4) 100%/calc(100%/5) calc(5*100%/5);
    -webkit-mask-repeat:no-repeat;
    background: linear-gradient(var(--primary-color) 0 0) left/0% 100% no-repeat var(--secondary-color);
    animation: bp4 2s infinite steps(6);
}
@keyframes bp4 {
  100% {background-size: 120% 100%}
}

.sp-115 {
    width: 80px;
    height: calc(80px*0.866);
    clip-path: polygon(50% 0,100% 100%,0 100%);
    color: var(--primary-color);
    background: 
      linear-gradient(currentColor 0 0),
      linear-gradient(currentColor 0 0),
      linear-gradient(currentColor 0 0),
      linear-gradient(currentColor 0 0),
      linear-gradient(currentColor 0 0);
    background-size: 100% calc(100%/5 + 1px);
    background-repeat: no-repeat;
    animation: bp5 2s infinite;
}
@keyframes bp5 {
  0%  {background-position: 0 calc(-2*100%/4),0 calc(-2*100%/4),0 calc(-2*100%/4),0 calc(-2*100%/4),0 calc(-2*100%/4)}
  20% {background-position: 0 calc(4*100%/4) ,0 calc(-2*100%/4),0 calc(-2*100%/4),0 calc(-2*100%/4),0 calc(-2*100%/4)}
  40% {background-position: 0 calc(4*100%/4) ,0 calc(3*100%/4) ,0 calc(-2*100%/4),0 calc(-2*100%/4),0 calc(-2*100%/4)}
  60% {background-position: 0 calc(4*100%/4) ,0 calc(3*100%/4) ,0 calc(2*100%/4) ,0 calc(-2*100%/4),0 calc(-2*100%/4)}
  80% {background-position: 0 calc(4*100%/4) ,0 calc(3*100%/4) ,0 calc(2*100%/4) ,0 calc(1*100%/4) ,0 calc(-2*100%/4)}
  100%{background-position: 0 calc(4*100%/4) ,0 calc(3*100%/4) ,0 calc(2*100%/4) ,0 calc(1*100%/4) ,0 calc(0*100%/4)}
}


.sp-116 {
   height:4px;
   width:130px;
   background:
    linear-gradient(var(--primary-color) 0 0),
    linear-gradient(var(--primary-color) 0 0),
    var(--secondary-color);
  background-size: 60% 100%;
  background-repeat: no-repeat;
  animation: bp6 3s infinite;
}

@keyframes bp6 {
  0%   {background-position:-150% 0,-150% 0}
  66%  {background-position: 250% 0,-150% 0}
  100% {background-position: 250% 0, 250% 0}
}

.sp-117 {
    width: 120px;
    height: 20px;
    -webkit-mask: radial-gradient(circle closest-side,var(--primary-color) 94%,#0000) left/20% 100%;
    background: linear-gradient(var(--primary-color) 0 0) left/0% 100% no-repeat var(--secondary-color);
    animation: bp7 2s infinite steps(6);
}
@keyframes bp7 {
    100% {background-size:120% 100%}
}

.sp-118 {
  width: 60px;
  height: 60px;
  border:15px solid var(--secondary-color);
  border-radius: 50%;
  position: relative;
  transform:rotate(45deg);
}
.sp-118::before {
  content: "";
  position: absolute;
  inset:-15px;
  border-radius: 50%;
  border:15px solid var(--primary-color);
  animation: bp8 2s infinite linear;
}

@keyframes bp8 {
    0%   {clip-path:polygon(50% 50%,0 0,0    0,0    0   ,0    0   ,0    0   )}
    25%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 0   ,100% 0   ,100% 0   )}
    50%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,100% 100%,100% 100%)}
    75%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0    100%,0    100%)}
    100% {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0    100%,0    0   )}
}

.sp-119 {
  width: 60px;
  height: 60px;
  background: linear-gradient(var(--primary-color) 0 0) bottom/100% 0% no-repeat var(--secondary-color);
  -webkit-mask: 
    radial-gradient(circle at 60% 65%, #000 62%, #0000 65%) top left, 
    radial-gradient(circle at 40% 65%, #000 62%, #0000 65%) top right, 
    linear-gradient(to bottom left, #000 42%,#0000 43%) bottom left , 
    linear-gradient(to bottom right,#000 42%,#0000 43%) bottom right;
  -webkit-mask-size: 50% 50%;
  -webkit-mask-repeat: no-repeat;
  animation: bp9 2s infinite linear;
}

@keyframes bp9 {
    90%,100% {background-size:100% 100%}
}
.sp-120 {
   --s: 20px;
   height: calc(var(--s)*0.9);
   width: calc(var(--s)*5);
  --v1:transparent,#000 0.5deg 108deg,#0000 109deg;
  --v2:transparent,#000 0.5deg  36deg,#0000  37deg;
  -webkit-mask:
    conic-gradient(from 54deg  at calc(var(--s)*0.68) calc(var(--s)*0.57),var(--v1)),
    conic-gradient(from 90deg  at calc(var(--s)*0.02) calc(var(--s)*0.35),var(--v2)),
    conic-gradient(from 126deg at calc(var(--s)*0.5)  calc(var(--s)*0.7) ,var(--v1)),
    conic-gradient(from 162deg at calc(var(--s)*0.5)  0                  ,var(--v2));
  -webkit-mask-size: var(--s) var(--s);
  -webkit-mask-composite: xor,destination-over;
  mask-composite: exclude,add;
  -webkit-mask-repeat:repeat-x;
  background:linear-gradient(var(--primary-color) 0 0) left/0% 100% var(--secondary-color) no-repeat;
  animation: bp10 2s infinite linear;
}
@keyframes bp10 {
    90%,100% {background-size:100% 100%}
}

.sp-121 {
  width: 40px;
  height: 40px;
  background:var(--primary-color);
  transform:perspective(150px) rotateX(0);
  animation: ff1 1s infinite;
}

@keyframes ff1 {
  100% {transform:perspective(150px) rotateX(180deg)}
}

.sp-122 {
  width: 40px;
  height: 40px;
  transform:perspective(150px) rotateX(0);
  animation: 
    ff1-1 2s infinite linear,
    ff1-2 1s infinite linear alternate;
}

@keyframes ff1-1 {
  100% {transform:perspective(150px) rotateX(360deg)}
}

@keyframes ff1-2 {
  0%,49.9% {background:var(--primary-color)}
  50%,100% {background:var(--secondary-color)}
}


.sp-123 {
  width: 40px;
  height: 40px;
  transform:perspective(150px) rotateX(0) rotateY(0);
  animation: 
    ff3-1 2s infinite linear,
    ff3-2 3s infinite linear -.5s;
}

@keyframes ff3-1 {
  50%  {transform:perspective(150px) rotateX(180deg) rotateY(0)}
  100% {transform:perspective(150px) rotateX(180deg) rotateY(180deg)}
}

@keyframes ff3-2 {
  0%,33%     {background:var(--primary-color)}
  33.1%,66%  {background:var(--secondary-color)}
  66.1%,100% {background:var(--tertiary-color)}
}

.sp-124 {
  width: 60px;
  height: 60px;
  animation: ff4-0 2s infinite linear;
}
.sp-124::before {
  content:"";
  display:block;
  width:50%;
  height:50%;
  transform:perspective(150px) rotateX(0deg);
  transform-origin: bottom; 
  animation: 
    ff4-1 0.5s infinite linear alternate,
    ff4-2 0.5s infinite linear alternate;
}

@keyframes ff4-0 {
  0%,24.99%  {transform:scale(1 , 1) rotate(0deg)}
  25%,49.99% {transform:scale(1 ,-1) rotate(90deg)}
  50%,74.99% {transform:scale(-1,-1) rotate(0deg)}
  75%,100%   {transform:scale(-1, 1) rotate(90deg)}
}


@keyframes ff4-1 {
  100% {transform:perspective(150px) rotateX(180deg)}
}

@keyframes ff4-2 {
  0%,49.9% {background:var(--primary-color)}
  50%,100% {background:var(--secondary-color)}
}

.sp-125 {
  width: 60px;
  height: 60px;
  animation: ff5-0 1s infinite linear;
}
.sp-125::before,
.sp-125::after {
  content:"";
  position: absolute;
  inset:0 50% 50% 0;
  transform:scale(var(--s,1)) perspective(150px) rotateX(0deg);
  transform-origin: bottom right; 
  animation: 
    ff5-1 0.5s infinite linear alternate,
    ff5-2 0.5s infinite linear alternate;
}
.sp-125::after {
  --s:-1,-1;
}

@keyframes ff5-0 {
  0%,49.99% {transform:scale(1, 1) rotate(0deg)}
  50%,100%  {transform:scale(1,-1) rotate(90deg)}
}


@keyframes ff5-1 {
  100% {transform:scale(var(--s,1)) perspective(150px) rotateX(180deg)}
}

@keyframes ff5-2 {
  0%,49.9% {background:var(--primary-color)}
  50%,100% {background:var(--secondary-color)}
}


.sp-126 {
  width: 60px;
  height: 60px;
  color: var(--primary-color); 
  background:
    linear-gradient(currentColor 0 0),
    linear-gradient(currentColor 0 0),
    linear-gradient(currentColor 0 0);
  background-size: 50.1% 50.1%;
  background-repeat: no-repeat;
  animation: 
    ff6-0   1.5s infinite linear alternate,
    ff6-0-0 3s   infinite linear;
}
.sp-126::before {
  content:"";
  display:block;
  width:50%;
  height:50%;
  background:currentColor;
  transform:perspective(150px) rotateY(0deg) rotateX(0deg);
  transform-origin: bottom right; 
  animation: ff6-1 1.5s infinite linear alternate;
}


@keyframes ff6-0 {
  0% ,32.99% {background-position: 0    100%,100% 100%,100% 0}
  33%,65.99% {background-position: 100% 100%,100% 100%,100% 0}
  66%,100%   {background-position: 100% 0   ,100% 0   ,100% 0}
}

@keyframes ff6-0-0 {
  0%,49.99% {transform: scaleX(1)  rotate(0deg)}
  50%,100%  {transform: scaleX(-1) rotate(-90deg)}
}


@keyframes ff6-1 {
  16.5%{transform:perspective(150px) rotateX(-90deg)  rotateY(0deg)    rotateX(0deg);filter:grayscale(0.8)}
  33%  {transform:perspective(150px) rotateX(-180deg) rotateY(0deg)    rotateX(0deg)}
  66%  {transform:perspective(150px) rotateX(-180deg) rotateY(-180deg) rotateX(0deg)}
  100% {transform:perspective(150px) rotateX(-180deg) rotateY(-180deg) rotateX(-180deg);filter:grayscale(0.8)}
}

.sp-127 {
  width: 60px;
  height: 60px;
  color: var(--primary-color); 
  background:
    linear-gradient(currentColor 0 0) 100%  0,
    linear-gradient(currentColor 0 0) 0  100%;
  background-size: 50.1% 50.1%;
  background-repeat: no-repeat;
  animation:  ff7-0 1s infinite linear;
}
.sp-127::before,
.sp-127::after {
  content:"";
  position: absolute;
  inset:0 50% 50% 0;
  background:currentColor;
  transform:scale(var(--s,1)) perspective(150px) rotateY(0deg);
  transform-origin: bottom right; 
  animation: ff7-1 .5s infinite linear alternate;
}
.sp-127::after {
  --s:-1,-1;
}

@keyframes ff7-0 {
  0%,49.99% {transform: scaleX(1)  rotate(0deg)}
  50%,100%  {transform: scaleX(-1) rotate(-90deg)}
}


@keyframes ff7-1 {
  49.99% {transform:scale(var(--s,1)) perspective(150px) rotateX(-90deg) ;filter:grayscale(0)}
  50%    {transform:scale(var(--s,1)) perspective(150px) rotateX(-90deg) ;filter:grayscale(0.8)}
  100%   {transform:scale(var(--s,1)) perspective(150px) rotateX(-180deg);filter:grayscale(0.8)}
}

.sp-128 {
  width: 60px;
  height: 60px;
  display: flex;
  animation: ff8-0 2s infinite linear;
}
.sp-128::before,
.sp-128::after {
  content:"";
  flex:1;
  animation: 
    ff8-1 1s infinite linear alternate,
    ff8-2 2s infinite linear -.5s;
}
.sp-128::after {
  --s:-1,-1;
}

@keyframes ff8-0 {
  0%,49.99% {transform: scaleX(1)  rotate(0deg)}
  50%,100%  {transform: scaleX(-1) rotate(-90deg)}
}

@keyframes ff8-1 {
  0%,
  5%   {transform:scale(var(--s,1)) translate(0px)   perspective(150px) rotateY(0deg) }
  33%  {transform:scale(var(--s,1)) translate(-10px) perspective(150px) rotateX(0deg) }
  66%  {transform:scale(var(--s,1)) translate(-10px) perspective(150px) rotateX(-180deg)}
  95%,
  100% {transform:scale(var(--s,1)) translate(0px)   perspective(150px) rotateX(-180deg)}
}

@keyframes ff8-2 {
  0%,49.99% {background:var(--primary-color)}
  50%,100%  {background:var(--secondary-color)}
}


.sp-129 {
  width: 60px;
  height: 60px;
  color: var(--primary-color); 
  border-radius: 50%;
  background:
    linear-gradient(currentColor 0 0),
    linear-gradient(currentColor 0 0),
    linear-gradient(currentColor 0 0);
  background-size: 50.1% 50.1%;
  background-repeat: no-repeat;
  animation: 
    ff9-0   1.5s infinite linear alternate,
    ff9-0-0 3s   infinite linear alternate;
}
.sp-129::before {
  content:"";
  display:block;
  width:50%;
  height:50%;
  background:currentColor;
  border-top-left-radius: 100px;
  transform:perspective(150px) rotateY(0deg) rotateX(0deg);
  transform-origin: bottom right; 
  animation: ff9-1 1.5s infinite linear alternate;
}


@keyframes ff9-0 {
  0% ,32.99% {background-position: 0    100%,100% 100%,100% 0}
  33%,65.99% {background-position: 100% 100%,100% 100%,100% 0}
  66%,100%   {background-position: 100% 0   ,100% 0   ,100% 0}
}

@keyframes ff9-0-0 {
  0%,49.99% {transform: scaleX(1)  rotate(0deg)}
  50%,100%  {transform: scaleX(-1) rotate(-90deg)}
}


@keyframes ff9-1 {
  16.5%{transform:perspective(150px) rotateX(-90deg)  rotateY(0deg)    rotateX(0deg);filter:grayscale(0.8)}
  33%  {transform:perspective(150px) rotateX(-180deg) rotateY(0deg)    rotateX(0deg)}
  66%  {transform:perspective(150px) rotateX(-180deg) rotateY(-180deg) rotateX(0deg)}
  100% {transform:perspective(150px) rotateX(-180deg) rotateY(-180deg) rotateX(-180deg);filter:grayscale(0.8)}
}

.sp-130 {
  width: 60px;
  height: 60px;
  display: flex;
  animation: ff10-0 2s infinite linear;
}
.sp-130::before,
.sp-130::after {
  content:"";
  flex:1;
  animation: 
    ff10-1 1s infinite linear alternate,
    ff10-2 2s infinite linear -.5s;
}
.sp-130::after {
  --s:-1,-1;
}

@keyframes ff10-0 {
  0%,49.99% {transform: scaleX(1)  rotate(0deg)}
  50%,100%  {transform: scaleX(-1) rotate(-90deg)}
}

@keyframes ff10-1 {
  0%,
  5%   {transform:scale(var(--s,1)) translate(0px)   perspective(150px) rotateY(0deg) }
  33%  {transform:scale(var(--s,1)) translate(-10px) perspective(150px) rotateX(0deg) }
  66%  {transform:scale(var(--s,1)) translate(-10px) perspective(150px) rotateX(-180deg)}
  95%,
  100% {transform:scale(var(--s,1)) translate(0px)   perspective(150px) rotateX(-180deg)}
}

@keyframes ff10-2 {
  0%,49.99% {background:var(--primary-color);border-radius: 0}
  50%,100%  {background:var(--secondary-color);border-radius: 100px 0 0 100px}
}

.sp-131 {
  width: 40px;
  height: 40px;
  color: var(--primary-color);
  display: grid;
}

.sp-131::before,
.sp-131::after {
  content: "";
  grid-area: 1/1;
  background: currentColor;
  clip-path: polygon(0 0,50% 50%, 0 100%);
  animation: csp1 2s infinite;
}
.sp-131::after {
  animation-delay: -1.5s;
  --s:90deg;
}

@keyframes csp1 {
    0%,12.5%    {transform:rotate(var(--s,0deg)) rotate(0deg)}
    37.5%,62.5% {transform:rotate(var(--s,0deg)) rotate(-180deg)}
    87.5%,100%  {transform:rotate(var(--s,0deg)) rotate(-360deg)}
}

.sp-132 {
  width: 40px;
  height: 40px;
  color: var(--primary-color);
  background:repeating-conic-gradient(from -47deg,#0000 0deg, currentColor 1deg 91deg,#0000 94deg 180deg);
  display: flex;
  animation: csp2-0 2s infinite linear;
}

.sp-132::before,
.sp-132::after {
  content: "";
  flex: 1;
  background: currentColor;
  clip-path: polygon(0 0,100% 50%, 0 100%);
  animation: csp2 1s infinite alternate;
  transform-origin: bottom left;

}
.sp-132::after {
  clip-path: polygon(100% 0,100% 100%,0 50%);
  transform-origin: top right;
}

@keyframes csp2-0 {
    0%,49.9% {transform:scaleX( 1)}
    50%,100% {transform:scaleX(-1)}
}

@keyframes csp2 {
    0%, 20%  {transform:rotate(0deg)}
    80%,100% {transform:rotate(-270deg)}
}

.sp-133 {
  width: 40px;
  height: 40px;
  color: var(--primary-color);
  display: grid;
}

.sp-133::before,
.sp-133::after {
  content: "";
  grid-area: 1/1;
  background: currentColor;
  clip-path: polygon(0 0,101% 0, 0 100%);
  animation: csp3 2s infinite;
}
.sp-133::after {
  --s:-1,-1;
}

@keyframes csp3 {
    0%,
    10%  {transform:scale(var(--s,1)) translate(0,0)        rotate(0deg)}
    33%  {transform:scale(var(--s,1)) translate(20px,-20px) rotate(0deg)}
    66%  {transform:scale(var(--s,1)) translate(20px,-20px) rotate(180deg)}
    90%,
    100% {transform:scale(var(--s,1)) translate(0px,0px)    rotate(180deg)}
}

.sp-134 {
  width: 40px;
  height: 40px;
  color:var(--primary-color);
  background: conic-gradient(currentColor 0 270deg,#0000 0);
  border-radius: 50%;
  animation: csp4-0 4s infinite linear;
}

.sp-134::before {
  content: "";
  display: block;
  height: 50%;
  width: 50%;
  border-top-left-radius: 100px;
  background: currentColor;
  animation: csp4 0.5s infinite alternate;
}

@keyframes csp4-0 {
    0%,24.99%  {transform: rotate(0deg)}
    25%,49.99% {transform: rotate(90deg)}
    50%,74.99% {transform: rotate(180deg)}
    75%,100%   {transform: rotate(270deg)}
}

@keyframes csp4 {
    100%  {transform: translate(-10px,-10px)}
}

.sp-135 {
  width: 40px;
  height: 40px;
  display: flex;
  transform-origin:50% 125%;
  animation: csp5-0 1.5s infinite linear;
}
.sp-135:before,
.sp-135:after {
  content:"";
  flex:1;
  background: var(--primary-color);
  animation: inherit;
  transform-origin: bottom left;
  animation-name: csp5-1;
}
.sp-135:before {
  transform-origin: bottom right;
  --s:-1;
}

@keyframes csp5-0 {
   0%,10%   {transform:translateY(0)     scaleY(1)}
   49.99%   {transform:translateY(-75%)  scaleY(1)}
   50%      {transform:translateY(-75%)  scaleY(-1)}
   90%,100% {transform:translateY(-150%) scaleY(-1)}
}
@keyframes csp5-1 {
   10%,90% {transform: rotate(0deg)}
   50%     {transform: rotate(calc(var(--s,1)*90deg))}
}

.sp-136 {
  width: 40px;
  height: 40px;
  color: var(--primary-color);
  position: relative;
  background:
    linear-gradient(currentColor 0 0) center/100% 10px,
    linear-gradient(currentColor 0 0) center/10px 100%;
  background-repeat: no-repeat;
}
.sp-136:before {
  content:'';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(currentColor 0 0) 0    0,
    linear-gradient(currentColor 0 0) 100% 0,
    linear-gradient(currentColor 0 0) 0    100%,
    linear-gradient(currentColor 0 0) 100% 100%;
  background-size:15.5px 15.5px;
  background-repeat: no-repeat;
  animation: csp6 1.5s infinite cubic-bezier(0.3,1,0,1);
}
@keyframes csp6 {
   33%  {inset:-10px;transform: rotate(0deg)}
   66%  {inset:-10px;transform: rotate(90deg)}
   100% {inset:0    ;transform: rotate(90deg)}
}

.sp-137 {
  width: 40px;
  height: 60px;
  color: var(--primary-color);
  position: relative;
}

.sp-137::before,
.sp-137::after {
  content: "";
  position: absolute;
  inset:0;
  background:currentColor;
  clip-path: polygon(0 0,100% 0, 100% 67%,50% 67%,50% 34%,0 34%);
  animation: csp7 2s infinite;
}
.sp-137::after {
  --s:-1,-1;
}

@keyframes csp7 {
    0%,
    10%  {transform:scale(var(--s,1)) translate(0,0)        rotate(0deg)}
    33%  {transform:scale(var(--s,1)) translate(0,-20px)    rotate(0deg)}
    66%  {transform:scale(var(--s,1)) translate(10px,-20px) rotate(-90deg)}
    90%,
    100% {transform:scale(var(--s,1)) translate(10px,-10px) rotate(-90deg)}
}

.sp-138 {
  width: 40px;
  height: 40px;
  color:var(--primary-color);
  position: relative;
  background: radial-gradient(10px,currentColor 94%,#0000);
}
.sp-138:before {
  content:'';
  position: absolute;
  inset:0;
  border-radius: 50%;
  background:
    radial-gradient(9px at bottom right,#0000 94%,currentColor) top    left,
    radial-gradient(9px at bottom left ,#0000 94%,currentColor) top    right,
    radial-gradient(9px at top    right,#0000 94%,currentColor) bottom left,
    radial-gradient(9px at top    left ,#0000 94%,currentColor) bottom right;
  background-size:20px 20px;
  background-repeat: no-repeat;
  animation: csp8 1.5s infinite cubic-bezier(0.3,1,0,1);
}
@keyframes csp8 {
   33%  {inset:-10px;transform: rotate(0deg)}
   66%  {inset:-10px;transform: rotate(90deg)}
   100% {inset:0    ;transform: rotate(90deg)}
}

.sp-139 {
  width: 40px;
  height: 20px;
  background: var(--primary-color);
  position: relative;
  animation: csp9-0 1.5s infinite linear;
}
.sp-139:before,
.sp-139:after {
   content:"";
   position: absolute;
   background: inherit; 
   bottom: 100%;
   width: 50%;
   height: 100%;
   animation: inherit;
   animation-name: csp9-1;
}
.sp-139:before {
  left:0;
  --s:-1,1;
}
.sp-139:after {
  right:0;
}
@keyframes csp9-0 {
   0%,30%   {transform:translateY(0)     scaleY(1)}
   49.99%   {transform:translateY(-50%)  scaleY(1)}
   50%      {transform:translateY(-50%)  scaleY(-1)}
   70%,100% {transform:translateY(-100%) scaleY(-1)}
}
@keyframes csp9-1 {
   0%,10%,90%,100% {transform: scale(var(--s,1)) translate(0)}
   30%,70%         {transform: scale(var(--s,1)) translate(20px)}
   50%             {transform: scale(var(--s,1)) translate(20px,20px)}
}

.sp-140 {
  width: 40px;
  height: 40px;
  display: flex;
  transform-origin: 0% 150%;
  animation: csp10-0 2s infinite linear;
}
.sp-140:before,
.sp-140:after {
  content:"";
  flex:1;
  background:var(--primary-color);
  animation: csp10-1 1s infinite linear alternate;
  border-radius: 100px 0 0 100px;
  transform-origin: 100% 100%;
}
.sp-140:after {
  border-radius: 0 100px 100px 0;
  transform-origin: 0% 100%;
  --s:-1;
}

@keyframes csp10-0 {
   0%,10%   {transform:translateY(0)     scaleY(1)}
   49.99%   {transform:translateY(-100%) scaleY(1)}
   50%      {transform:translateY(-100%) scaleY(-1)}
   90%,100% {transform:translateY(-200%) scaleY(-1)}
}
@keyframes csp10-1 {
   0%,20%  {transform:rotate(0deg)                    translate(0,0)     rotate(0deg)}
   50%     {transform:rotate(calc(var(--s,1)*-90deg)) translate(0,0)     rotate(0deg)}
   100%    {transform:rotate(calc(var(--s,1)*-90deg)) translate(0,-20px) rotate(calc(var(--s,1)*-90deg))}
}

.sp-141 {
  width: 4px;
  height: 4px;
  color: var(--primary-color);
  border-radius: 50%;
  box-shadow: 19px 0 0 7px, 38px 0 0 3px, 57px 0 0 0;
  transform: translateX(-38px);
  animation: qd1 .5s infinite alternate linear;
}

@keyframes qd1 {
  50%  {box-shadow: 19px 0 0 3px, 38px 0 0 7px, 57px 0 0 3px}
  100% {box-shadow: 19px 0 0 0  , 38px 0 0 3px, 57px 0 0 7px}
}

.sp-142 {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background:var(--primary-color);
  color: var(--primary-color);
  box-shadow: 0 0 0 3px;
  position: relative;
  animation: qd2-0 2s infinite linear;
}

.sp-142:before,
.sp-142:after {
  content: "";
  position: absolute;
  border-radius: 50%;
  inset:0;
  background:var(--primary-color);
  transform: rotate(0deg) translate(18px);
  animation: qd2 1s infinite;
}
.sp-142:after {
  animation-delay: -.5s
}

@keyframes qd2-0 {
  100% {transform: rotate(1turn)}
}

@keyframes qd2 {
  100% {transform: rotate(1turn) translate(20px)}
}

.sp-143 {
  width: 50px;
  height: 28px;
  background:
    radial-gradient(farthest-side,var(--primary-color) 90%,#0000) 50%  0,
    radial-gradient(farthest-side,var(--primary-color) 90%,#0000) 100% 0;
  background-size:12px 12px;
  background-repeat: no-repeat;
  position: relative;
  animation: qd3-0 1.5s linear infinite;
}
.sp-143:before {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background:var(--primary-color);
  left:0;
  top:0;
  animation: 
    qd3-1 1.5s linear infinite,
    qd3-2 0.5s cubic-bezier(0,200,.8,200) infinite;
}

@keyframes qd3-0 {
  0%,31%  {background-position: 50% 0   ,100% 0}
  33%     {background-position: 50% 100%,100% 0}
  43%,64% {background-position: 50% 0   ,100% 0}
  66%     {background-position: 50% 0   ,100% 100%}
  79%     {background-position: 50% 0   ,100% 0}
  100%    {transform:translateX(calc(-100%/3))}
}

@keyframes qd3-1 {
  100% {left:calc(100% + 7px)}
}

@keyframes qd3-2 {
  100% {top:-0.1px}
}

.sp-144 {
  width: 88px;
  height: 12px;
  background:
    radial-gradient(farthest-side,var(--primary-color) 90%,#0000) 25% 0,
    radial-gradient(farthest-side,var(--primary-color) 90%,#0000) 75% 0;
  background-size:12px 12px;
  background-repeat: no-repeat;
  position: relative;
  animation: qd4-0 1s linear infinite;
}

.sp-144:before {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background:var(--primary-color);
  inset:0;
  margin:auto;
  animation: qd4-1 1s cubic-bezier(0.5,300,0.5,-300) infinite;
}

@keyframes qd4-0 {
  0%,24%  {background-position: 25% 0,75% 0}
  40%     {background-position: 25% 0,85% 0}
  50%,72% {background-position: 25% 0,75% 0}
  90%     {background-position: 15% 0,75% 0}
  100%    {background-position: 25% 0,75% 0}
}

@keyframes qd4-1 {
  100% {transform:translate(0.1px)}
}

.sp-145 {
  width: 50px;
  height: 12px;
  background:
    radial-gradient(farthest-side,var(--primary-color) 90%,#0000) left,
    radial-gradient(farthest-side,var(--primary-color) 90%,#0000) right;
  background-size:12px 12px;
  background-repeat: no-repeat;
  position: relative;
}

.sp-145:before {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background:var(--primary-color);
  inset:0;
  margin:auto;
  animation: qd5-1 1s, qd5-2 0.5s;
  animation-timing-function:cubic-bezier(.5,-900,.5,900);
  animation-iteration-count:infinite;
}

@keyframes qd5-1 {
  100% {transform:translate(0.12px)}
}

@keyframes qd5-2 {
  100% {inset:-0.15px 0 0;}
}


.sp-146 {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  color: var(--primary-color);
  box-shadow: 
    19px -19px 0 0px, 38px -19px 0 0px, 57px -19px 0 0px,
    19px 0     0 5px, 38px 0     0 5px, 57px 0     0 5px,
    19px 19px  0 0px, 38px 19px  0 0px, 57px 19px  0 0px;
  transform: translateX(-38px);
  animation: qd6 2s infinite linear;
}

@keyframes qd6 {
  12.5% {box-shadow: 
    19px -19px 0 0px, 38px -19px 0 0px, 57px -19px 0 5px,
    19px 0     0 5px, 38px 0     0 0px, 57px 0     0 5px,
    19px 19px  0 0px, 38px 19px  0 0px, 57px 19px  0 0px}
  25%   {box-shadow: 
    19px -19px 0 5px, 38px -19px 0 0px, 57px -19px 0 5px,
    19px 0     0 0px, 38px 0     0 0px, 57px 0     0 0px,
    19px 19px  0 0px, 38px 19px  0 5px, 57px 19px  0 0px}
  50%   {box-shadow: 
    19px -19px 0 5px, 38px -19px 0 5px, 57px -19px 0 0px,
    19px 0     0 0px, 38px 0     0 0px, 57px 0     0 0px,
    19px 19px  0 0px, 38px 19px  0 0px, 57px 19px  0 5px}
  62.5% {box-shadow: 
    19px -19px 0 0px, 38px -19px 0 0px, 57px -19px 0 0px,
    19px 0     0 5px, 38px 0     0 0px, 57px 0     0 0px,
    19px 19px  0 0px, 38px 19px  0 5px, 57px 19px  0 5px}
  75%   {box-shadow: 
    19px -19px 0 0px, 38px -19px 0 5px, 57px -19px 0 0px,
    19px 0     0 0px, 38px 0     0 0px, 57px 0     0 5px,
    19px 19px  0 0px, 38px 19px  0 0px, 57px 19px  0 5px}
  87.5% {box-shadow: 
    19px -19px 0 0px, 38px -19px 0 5px, 57px -19px 0 0px,
    19px 0     0 0px, 38px 0     0 5px, 57px 0     0 0px,
    19px 19px  0 5px, 38px 19px  0 0px, 57px 19px  0 0px}
}


.sp-147 {
  width: 50px;
  height: 12px;
  background:
    radial-gradient(farthest-side,var(--primary-color) 90%,#0000) left,
    radial-gradient(farthest-side,var(--primary-color) 90%,#0000) right;
  background-size:12px 12px;
  background-repeat: no-repeat;
  position: relative;
}

.sp-147:before,
.sp-147:after {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background:var(--primary-color);
  clip-path: inset(0 0 50%);
  inset:0;
  margin:auto;
  transform-origin: -13px 50%;
  animation: qd7 .5s infinite alternate;
}
.sp-147:after {
  --s:-1;
  transform-origin: calc(100% + 13px) 50%;
}

@keyframes qd7 {
  0%,40% {transform:scaleY(var(--s,1)) rotate(0)}
  100%   {transform:scaleY(var(--s,1)) rotate(calc(var(--s,1)*-90deg))}
}


.sp-148 {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background:var(--primary-color);
  color: var(--primary-color);
  clip-path: inset(-26px);
  animation: qd8 2s infinite linear;
}

@keyframes qd8 {
  0%  {box-shadow:0 0 0 0   , 40px 0,-40px 0,0 40px,0 -40px}
  10% {box-shadow:0 0 0 0   , 12px 0,-40px 0,0 40px,0 -40px}
  20% {box-shadow:0 0 0 4px , 0px  0,-40px 0,0 40px,0 -40px}
  30% {box-shadow:0 0 0 4px , 0px  0,-12px 0,0 40px,0 -40px}
  40% {box-shadow:0 0 0 8px , 0px  0,  0px 0,0 40px,0 -40px}
  50% {box-shadow:0 0 0 8px , 0px  0,  0px 0,0 12px,0 -40px}
  60% {box-shadow:0 0 0 12px, 0px  0,  0px 0,0  0px,0 -40px}
  70% {box-shadow:0 0 0 12px, 0px  0,  0px 0,0  0px,0 -12px}
  80% {box-shadow:0 0 0 16px, 0px  0,  0px 0,0  0px,0  0px }
  90%,
  100%{box-shadow:0 0 0 0   , 40px 0,-40px 0,0 40px,0 -40px}
}

.sp-149 {
  width: 31px;
  height: 31px;
  display: flex;
  justify-content: space-between;
  animation: qd9-0 1s infinite;
}
.sp-149::before,
.sp-149::after {
  content: "";
  width:12px;
  background:
    radial-gradient(farthest-side,var(--primary-color) 90%,#0000) top,
    radial-gradient(farthest-side,var(--primary-color) 90%,#0000) bottom;
  background-size:12px 12px;
  background-repeat: no-repeat;
  transform-origin:50% calc(100% - 6px);
  animation:inherit;
  animation-name: qd9-1;
}
.sp-149::after {
  --s:-1;
}

@keyframes qd9-0 {
    100% {transform:translateY(calc(12px - 100%))}
}

@keyframes qd9-1 {
    100% {transform:rotate(calc(var(--s,1)*-180deg))}
}

.sp-150 {
  width: 31px;
  height: 31px;
  display: flex;
  justify-content: space-between;
}
.sp-150::before,
.sp-150::after {
  content: "";
  width:12px;
  background:
    radial-gradient(farthest-side,var(--primary-color) 90%,#0000) top,
    radial-gradient(farthest-side,var(--primary-color) 90%,#0000) bottom;
  background-size:12px 12px;
  background-repeat: no-repeat;
  transform-origin:50% calc(100% - 6px);
  animation: qd10 1s infinite;
}
.sp-150::after {
  transform-origin:50% 6px;
}

@keyframes qd10 {
   70%,100% {transform:rotate(-270deg)}
}

.sp-151 {
  width: 50px;
  height: 50px;
  border: 2px solid var(--primary-color);
  border-radius: 50%;
  display: grid;
  animation: gh1 1.5s infinite linear;
  transform-origin: 50% 80%;
}
.sp-151:before,
.sp-151:after {
  content:"";
  grid-area: 1/1;
  border:inherit;
  border-radius: 50%;
  animation: inherit;
  animation-duration: 1s;
  transform-origin: inherit;
}
.sp-151:after {
  --s:-1;
}

@keyframes gh1 {
   100% {transform:rotate(calc(var(--s,1)*1turn))}
}

.sp-152 {
  width: 60px;
  height: 25px;
  border: 2px solid var(--primary-color);
  border-radius: 50%;
  display: grid;
  animation: gh2 2s infinite linear;
}
.sp-152:before,
.sp-152:after {
  content:"";
  grid-area: 1/1;
  border:inherit;
  border-radius: 50%;
  animation: inherit;
  animation-duration: 3s;
}
.sp-152:after {
  --s:-1;
}

@keyframes gh2 {
   100% {transform:rotate(calc(var(--s,1)*1turn))}
}

.sp-153 {
  width: 60px;
  height: 30px;
  display: flex;
  background:
    radial-gradient(farthest-side at bottom,#0000 calc(100% - 5px),var(--primary-color) calc(100% - 4px) 96%,#0000) 0 0,
    radial-gradient(farthest-side at top   ,#0000 calc(100% - 5px),var(--primary-color) calc(100% - 4px) 96%,#0000) 100% 100%;
  background-size:calc(50% + 2px) 50%;
  background-repeat: no-repeat;
  animation: gh3 2s infinite linear;
}
.sp-153:before {
  content:"";
  flex:1;
  background:inherit;
  transform:rotate(90deg);
}

@keyframes gh3 {
   100% {transform:rotate(1turn)}
}

.sp-154 {
  width: 60px;
  height: 30px;
  display: grid;
  background:
    radial-gradient(farthest-side at bottom,#0000 calc(100% - 5px),var(--primary-color) calc(100% - 4px) 96%,#0000) 0 0,
    radial-gradient(farthest-side at top   ,#0000 calc(100% - 5px),var(--primary-color) calc(100% - 4px) 96%,#0000) 100% 100%;
  background-size:calc(50% + 2px) 50%;
  background-repeat: no-repeat;
  animation: gh4 1.5s infinite linear;
}
.sp-154:before,
.sp-154:after {
  content:"";
  grid-area:1/1;
  background:inherit;
  animation: inherit;
  animation-duration: 2s;
}
.sp-154:after {
  --s:-1;
}

@keyframes gh4 {
   100% {transform:rotate(calc(var(--s,1)*1turn))}
}


.sp-155 {
  width: 50px;
  height: 50px;
  border: 2px solid var(--primary-color);
  background: 
    conic-gradient(from 180deg at 50% calc(100% - 2px),var(--primary-color) 90deg, #0000 0),
    conic-gradient(from 180deg at 50% calc(100% - 2px),var(--primary-color) 90deg, #0000 0);
  background-position: 0 0,8px 0;
  background-size: 16px 9.6px;
  animation: gh5 1s infinite;
}

@keyframes gh5 {
  100% {background-position: 0 -9.6px,8px 9.6px}
}

.sp-156 {
  width: 50px;
  height: 50px;
  position: relative;
  overflow: hidden;
  border: 2px solid var(--primary-color);
}
.sp-156::before {
  content: "";
  position: absolute;
  inset:-48px;
  background: 
    conic-gradient(from 180deg at 50% calc(100% - 2px),var(--primary-color) 90deg, #0000 0),
    conic-gradient(from 180deg at 50% calc(100% - 2px),var(--primary-color) 90deg, #0000 0);
  background-position: 0 0,8px 0;
  background-size: 16px 9.6px;
  animation: gh6 2s infinite;
}

@keyframes gh6 {
  50%  {background-position: 0 -9.6px ,8px 9.6px; transform:rotate(90deg)}
  100% {background-position: 0 -19.2px,8px 19.2px;transform:rotate(180deg)}
}

.sp-157 {
  width: 30px;
  height: calc(30px*1.732);
  display: grid;
  background:
    linear-gradient(var(--primary-color) 0 0) top   /100% 1px,
    linear-gradient(var(--primary-color) 0 0) bottom/100% 1px,
    linear-gradient(to bottom right, #0000 calc(50% - 2px),var(--primary-color) calc(50% - 1px),#0000 50%) top/100% calc(100% + 2px),
    linear-gradient(to bottom left , #0000 calc(50% - 2px),var(--primary-color) calc(50% - 1px),#0000 50%) top/100% calc(100% + 2px); 
  background-repeat: no-repeat;
  animation: gh7 4s infinite linear;
}
.sp-157::before,
.sp-157::after {
  content: "";
  grid-area: 1/1;
  background: inherit;
  border:inherit;
  animation: inherit;
}

.sp-157::after {
  animation-duration: 2s;
}

@keyframes gh7 {
  100% {transform: rotate(1turn)}
}

.sp-158 {
  width: 25px;
  height: 50px;
  display: grid;
  background:
    linear-gradient(var(--primary-color) 0 0) top/100% 2px,
    radial-gradient(farthest-side at  top, #0000 calc(100% - 2px),var(--primary-color) calc(100% - 1px) ,#0000) top,
    linear-gradient(var(--primary-color) 0 0) bottom/100% 2px,
    radial-gradient(farthest-side at  bottom, #0000 calc(100% - 2px),var(--primary-color) calc(100% - 1px) ,#0000) bottom;
  background-size: 100% 1px,100% 50%; 
  background-repeat: no-repeat;
  animation: gh8 4s infinite linear;
}
.sp-158::before,
.sp-158::after {
  content: "";
  grid-area: 1/1;
  background: inherit;
  border:inherit;
  animation: inherit;
}

.sp-158::after {
  animation-duration: 2s;
}

@keyframes gh8 {
  100% {transform: rotate(1turn)}
}

.sp-159 {
  width: 50px;
  height: 50px;
  display: grid;
}

.sp-159::before,
.sp-159::after {
  content: "";
  grid-area: 1/1;
  border-radius: 50%;
  background: repeating-radial-gradient(farthest-side,#0000 0%,var(--primary-color) 1% 10%,#0000 11% 30%);
  -webkit-mask: repeating-conic-gradient(#000 0 36deg,#0000 0 72deg);
  animation: gh9 4s infinite linear;
}
.sp-159::after {
  -webkit-mask: repeating-conic-gradient(#0000 0 36deg,#000 0 72deg);
  animation-direction: reverse;
}

@keyframes gh9 {
  100% {transform:rotate(1turn)}
}

.sp-160 {
  width: 50px;
  height: 50px;    
  --g: #0000 calc(100% - 5px),var(--primary-color) calc(100% - 3px) 93%,#0000;
  background: 
    radial-gradient(farthest-side at bottom,var(--g)) top                  /100% 50%,
    radial-gradient(farthest-side at top   ,var(--g)) bottom 18% right  0  /80%  40%,
    radial-gradient(farthest-side at bottom,var(--g)) left   50% top    30%/60%  30%,
    radial-gradient(farthest-side at top   ,var(--g)) right  34% bottom 37%/40%  20%,
    radial-gradient(farthest-side at bottom,var(--g)) left   52% top    43%/24%  12%;
  background-repeat: no-repeat;
  animation: gh10 1s infinite linear;
}

@keyframes gh10 {
  100% {transform: rotate(1turn)}
}

.sp-161 {
  width: 45px;
  aspect-ratio: 1;
  --c: no-repeat linear-gradient(var(--primary-color) 0 0);
  background: 
    var(--c) 0    0,
    var(--c) 0    100%, 
    var(--c) 50%  0,  
    var(--c) 50%  100%, 
    var(--c) 100% 0, 
    var(--c) 100% 100%;
  animation: qb1 1s infinite linear;
}

@keyframes qb1 {
 80% {background-size:20% 30%}
 0%,
 90%,
 100%{background-size:20% 50%}
}

.sp-162 {
  width: 45px;
  aspect-ratio: 1;
  --c:no-repeat linear-gradient(var(--primary-color) 0 0);
  background: 
    var(--c) 0    0,
    var(--c) 0    100%, 
    var(--c) 50%  0,  
    var(--c) 50%  100%, 
    var(--c) 100% 0, 
    var(--c) 100% 100%;
  animation: qb2 1s infinite;
}

@keyframes qb2 {
 0%,100%{background-size:20% 50%}
 16.67% {background-size:20% 30%, 20% 30%, 20% 50%, 20% 50%, 20% 50%, 20% 50%}
 33.33% {background-size:20% 30%, 20% 30%, 20% 30%, 20% 30%, 20% 50%, 20% 50%}
 50%    {background-size:20% 30%, 20% 30%, 20% 30%, 20% 30%, 20% 30%, 20% 30%}
 66.67% {background-size:20% 50%, 20% 50%, 20% 30%, 20% 30%, 20% 30%, 20% 30%}
 83.33% {background-size:20% 50%, 20% 50%, 20% 50%, 20% 50%, 20% 30%, 20% 30%}
}

.sp-163 {
  width: 45px;
  aspect-ratio: 1;
  --c:no-repeat linear-gradient(var(--primary-color) 0 0);
  background: 
    var(--c) 0    0,
    var(--c) 0    100%, 
    var(--c) 50%  50%,   
    var(--c) 100% 0, 
    var(--c) 100% 100%;
  animation: qb3 1s infinite alternate;
}

@keyframes qb3 {
 0%,10%   {background-size:20% 100%}
 50%      {background-size:20%  20%}
 90%,100% {background-size:100% 20%}
}

.sp-164 {
  width: 45px;
  aspect-ratio: 1;
  --c:no-repeat linear-gradient(var(--primary-color) 0 0);
  background: var(--c), var(--c), var(--c), var(--c), var(--c), var(--c);
  animation: 
    qb4-1 .5s infinite alternate,
    qb4-2  2s infinite;
}

@keyframes qb4-1 {
 0%,10% {background-size:20% 100%}
 100%   {background-size:20% 20%}
}

@keyframes qb4-2 {
 0%,49.9% {background-position: 0 0  ,0 100%,50% 50%,50% 50% ,100% 0  ,100% 100%}
 50%,100% {background-position: 0 50%,0  50%,50% 0  ,50% 100%,100% 50%,100% 50% }
}


.sp-165 {
  width: 45px;
  aspect-ratio: 1;
  --c:no-repeat linear-gradient(var(--primary-color) 0 0);
  background: var(--c), var(--c), var(--c);
  animation: 
    qb5-1 1s infinite,
    qb5-2 1s infinite;
}

@keyframes qb5-1 {
 0%,100% {background-size:20% 100%}
 33%,66% {background-size:20% 40%}
}

@keyframes qb5-2 {
 0%,33%   {background-position: 0    0,50% 100%,100% 100%}
 66%,100% {background-position: 100% 0,0   100%,50%  100%}
}

.sp-166 {
  width: 45px;
  aspect-ratio: 1;
  --c:no-repeat linear-gradient(var(--primary-color) 0 0);
  background: var(--c), var(--c), var(--c);
  animation: 
    qb6-1 1s infinite,
    qb6-2 1s infinite;
}

@keyframes qb6-1 {
 0%,100% {background-size:20% 100%}
 33%,66% {background-size:20% 40%}
}

@keyframes qb6-2 {
 0%,33%   {background-position: 0 0   ,50% 100%,100% 0}
 66%,100% {background-position: 0 100%,50% 0   ,100% 100%}
}

.sp-167 {
  width: 45px;
  aspect-ratio: 1;
  --c:no-repeat linear-gradient(var(--primary-color) 0 0);
  background: 
    var(--c) 0    0, 
    var(--c) 50%  50%, 
    var(--c) 100% 100%;
  animation: 
    qb7 1s infinite alternate;
}

@keyframes qb7 {
 0%,
 10%  {background-size:20% 100%}
 50%  {background-size:20% 20%}
 90%,
 100% {background-size:100% 20%}
}

.sp-168 {
  width: 45px;
  aspect-ratio: 1;
  --c:no-repeat linear-gradient(var(--primary-color) 0 0);
  background: var(--c), var(--c), var(--c);
  animation: 
    qb8-1 1s infinite,
    qb8-2 1s infinite;
}

@keyframes qb8-1 {
 0%,100% {background-size:20% 100%}
 33%,66% {background-size:20% 20%}
}

@keyframes qb8-2 {
 0%,33%   {background-position: 0    0,50% 50%,100% 100%}
 66%,100% {background-position: 100% 0,50% 50%,0    100%}
}

.sp-169 {
  width: 45px;
  aspect-ratio: 1;
  --c: conic-gradient(from -90deg,var(--primary-color) 90deg,#0000 0);
  background: var(--c), var(--c);
  background-size: 40% 40%;
  animation: qb9 1s infinite alternate;
}

@keyframes qb9 {
 0%,
 10%  {background-position: 0 0,0            calc(100%/3)}
 50%  {background-position: 0 0,calc(100%/3) calc(100%/3)}
 90%,
 100% {background-position: 0 0,calc(100%/3) 0}
}

.sp-170 {
  width: 45px;
  aspect-ratio: 1;
  --c: conic-gradient(from -90deg,var(--primary-color) 90deg,#0000 0);
  background: var(--c), var(--c);
  background-size: 40% 40%;
  animation: qb10 1.5s infinite;
}

@keyframes qb10 {
 0%,
 20%  {background-position: 0 0           ,0            calc(100%/3)}
 33%  {background-position: 0 0           ,calc(100%/3) calc(100%/3)}
 66%  {background-position: 0 calc(100%/3),calc(100%/3) 0  }
 80%,
 100% {background-position: 0 calc(100%/3),0            0  }
}

.sp-171 {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: repeating-conic-gradient(var(--primary-color) 0 90deg,var(--secondary-color) 0 180deg);
  animation: ts1 1s infinite linear;
}

@keyframes ts1 {
  100% {transform: rotate(.5turn)}
}

.sp-172 {
  width: 50px;
  height: 50px;
  display: grid;
  border-radius: 50%;
  background: conic-gradient(var(--primary-color) 25%,var(--secondary-color) 0 50%,var(--tertiary-color) 0 75%,var(--primary-color) 0);
  animation: ts2 2s infinite linear;
}
.sp-172::before,
.sp-172::after {
   content:"";
   grid-area: 1/1;
   margin:15%;
   border-radius: 50%;
   background:inherit;
   animation:inherit;
}
.sp-172::after {
   margin:25%;
   animation-duration: 3s;
}

@keyframes ts2 {
  100% {transform: rotate(1turn)}
}


.sp-173 {
  width: 50px;
  height: 50px;
  display: grid;
  border-radius: 50%;
  -webkit-mask:radial-gradient(farthest-side,#0000 40%,#000 41%);
  background:
    linear-gradient(0deg ,#766df480 50%,#766df4FF 0) center/4px 100%,
    linear-gradient(90deg,#766df440 50%,#766df4BF 0) center/100% 4px;
  background-repeat: no-repeat;
  animation: ts3 1s infinite steps(12);
}
.sp-173::before,
.sp-173::after {
   content:"";
   grid-area: 1/1;
   border-radius: 50%;
   background:inherit;
   opacity: 0.915;
   transform: rotate(30deg);
}
.sp-173::after {
   opacity: 0.83;
   transform: rotate(60deg);
}

@keyframes ts3 {
  100% {transform: rotate(1turn)}
}

.sp-174 {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 8px solid #0000;
  border-right-color: #766df497;
  position: relative;
  animation: ts4 1s infinite linear;
}
.sp-174:before,
.sp-174:after {
  content: "";
  position: absolute;
  inset:-8px;
  border-radius: 50%;
  border:inherit;
  animation:inherit;
  animation-duration: 2s;
}
.sp-174:after {
  animation-duration: 4s;
}

@keyframes ts4 {
  100% {transform: rotate(1turn)}
}


.sp-175 {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background:var(--primary-color);
  -webkit-mask:radial-gradient(circle closest-side at 50% 40%,#0000 94%, #000);
  transform-origin: 50% 40%;
  animation: ts5 1s infinite linear;
}

@keyframes ts5 {
  100% {transform: rotate(1turn)}
}

.sp-176 {
  width: 40px;
  height: 10px;
  color: var(--primary-color);
  background:
    radial-gradient(farthest-side,currentColor 90%,#0000) left  /10px 10px,
    radial-gradient(farthest-side,currentColor 90%,#0000) center/10px 10px,
    radial-gradient(farthest-side,currentColor 90%,#0000) right /10px 10px,
    linear-gradient(currentColor 0 0) center/100% 4px; 
  background-repeat: no-repeat;
  position: relative;
  animation: ts6 2s infinite linear;
}
.sp-176:before,
.sp-176:after {
  content: "";
  position: absolute;
  inset:0;
  background:inherit;
  animation:inherit;
  --s:calc(50% - 5px);
  animation-direction: reverse;
}
.sp-176:after {
  --s:calc(5px - 50%);
}

@keyframes ts6 {
  0%   {transform: translate(var(--s,0)) rotate(0)}
  100% {transform: translate(var(--s,0)) rotate(1turn)}
}

.sp-177 {
  --d:22px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  color: var(--primary-color);
  box-shadow: 
    calc(1*var(--d))      calc(0*var(--d))     0 0,
    calc(0.707*var(--d))  calc(0.707*var(--d)) 0 1px,
    calc(0*var(--d))      calc(1*var(--d))     0 2px,
    calc(-0.707*var(--d)) calc(0.707*var(--d)) 0 3px,
    calc(-1*var(--d))     calc(0*var(--d))     0 4px,
    calc(-0.707*var(--d)) calc(-0.707*var(--d))0 5px,
    calc(0*var(--d))      calc(-1*var(--d))    0 6px;
  animation: ts7 1s infinite steps(8);
}

@keyframes ts7 {
  100% {transform: rotate(1turn)}
}

.sp-178 {
  width: 50px;
  height: 50px;
  display: grid;
  color: var(--primary-color);
  background: 
    linear-gradient(currentColor 0 0) center/100% 3px,
    linear-gradient(currentColor 0 0) center/3px 100%;
  background-repeat: no-repeat;
  animation: ts8 2s infinite;
}

.sp-178::before,
.sp-178::after {
  content: "";
  grid-area: 1/1;
  background: repeating-conic-gradient(#0000 0 35deg,currentColor 0 90deg);
  -webkit-mask: radial-gradient(farthest-side,#0000 calc(100% - 3px),#000 0);
  border-radius: 50%;
}
.sp-178::after {
  margin:20%;
}

@keyframes ts8 {
  100% {transform: rotate(1turn)}
}

.sp-179 {
  --s:8px;
  width: 50px;
  height: 50px;
  background: var(--primary-color);
  border-radius: 50%;
  animation: ts9 2s infinite linear;
  clip-path: polygon(0 0,calc(50% - var(--s)) 0,50% var(--s),calc(50% + var(--s)) 0,100% 0,100% calc(50% - var(--s)),calc(100% - var(--s)) 50%,100% calc(50% + var(--s)),100% 100%,calc(50% + var(--s)) 100%, 50% calc(100% - var(--s)),calc(50% - var(--s)) 100%,0 100%,0 calc(50% + var(--s)), var(--s) 50%, 0 calc(50% - var(--s)));
}

@keyframes ts9 {
  100% {transform: rotate(1turn)}
}

.sp-180 {
  --R:30px;
  --g1:var(--primary-color) 96%, #0000;
  --g2:var(--secondary-color) 96%, #0000;
  width: calc(2*var(--R));
  height:calc(2*var(--R));
  border-radius:50%;
  display: grid;
  -webkit-mask:linear-gradient(#000 0 0);
  animation: ts10 2s infinite linear;
}

.sp-180::before,
.sp-180::after{
  content:"";
  grid-area: 1/1;
  width:50%;
  background:
    radial-gradient(farthest-side,var(--g1)) calc(var(--R) + 0.866*var(--R) - var(--R)) calc(var(--R) - 0.5*var(--R)   - var(--R)),
    radial-gradient(farthest-side,var(--g1)) calc(var(--R) + 0.866*var(--R) - var(--R)) calc(var(--R) - 0.5*var(--R)   - var(--R)),
    radial-gradient(farthest-side,var(--g2)) calc(var(--R) + 0.5*var(--R)   - var(--R)) calc(var(--R) - 0.866*var(--R) - var(--R)),
    radial-gradient(farthest-side,var(--g1)) 0 calc(-1*var(--R)),
    radial-gradient(farthest-side,var(--g2)) calc(var(--R) - 0.5*var(--R)   - var(--R)) calc(var(--R) - 0.866*var(--R) - var(--R)),
    radial-gradient(farthest-side,var(--g1)) calc(var(--R) - 0.866*var(--R) - var(--R)) calc(var(--R) - 0.5*var(--R)   - var(--R)),
    radial-gradient(farthest-side,var(--g2)) calc(-1*var(--R))  0,
    radial-gradient(farthest-side,var(--g1)) calc(var(--R) - 0.866*var(--R) - var(--R)) calc(var(--R) + 0.5*var(--R)   - var(--R));
   background-size:calc(2*var(--R)) calc(2*var(--R));
   background-repeat:no-repeat;
}

.sp-180::after {
 transform:rotate(180deg);
 transform-origin:right;
}

@keyframes ts10 {
  100% {transform: rotate(-1turn)}
}

.sp-181 {
  width: 40px;
  height: 40px;
  --c: linear-gradient(var(--primary-color) 0 0);
  --r1: radial-gradient(farthest-side at bottom,var(--primary-color) 93%,#0000);
  --r2: radial-gradient(farthest-side at top   ,var(--primary-color) 93%,#0000);
  background: 
    var(--c) ,
    var(--r1),
    var(--r2),
    var(--c) ,  
    var(--r1),
    var(--r2),
    var(--c) ,
    var(--r1),
    var(--r2);
  background-repeat: no-repeat;
  animation: adb1 1s infinite  alternate;
}

@keyframes adb1 {
  0%,10% {
    background-size: 8px 0,8px 4px,8px 4px;
    background-position: 0 50%,0 calc(50% - 2px),0 calc(50% + 2px),50% 50%,50% calc(50% - 2px),50% calc(50% + 2px),100% 50%,100% calc(50% - 2px),100% calc(50% + 2px);
 }
 90%,100% {
    background-size: 8px 100%,8px 4px, 8px 4px;
    background-position: 0 50%,0 -2px,0 calc(100% + 2px),50% 50%,50% -2px,50% calc(100% + 2px),100% 50%,100% -2px,100% calc(100% + 2px);
 }
}

.sp-182 {
  width: 40px;
  height: 40px;
  --c: linear-gradient(var(--primary-color) 0 0);
  --r1: radial-gradient(farthest-side at bottom,var(--primary-color) 93%,#0000);
  --r2: radial-gradient(farthest-side at top   ,var(--primary-color) 93%,#0000);
  background: 
    var(--c) ,
    var(--r1),
    var(--r2),
    var(--c) ,  
    var(--r1),
    var(--r2),
    var(--c) ,
    var(--r1),
    var(--r2);
  background-repeat: no-repeat;
  animation: adb2 1s infinite alternate;
}

@keyframes adb2 {
  0%,25% {
    background-size: 8px 0,8px 4px,8px 4px,8px 0,8px 4px,8px 4px,8px 0,8px 4px,8px 4px;
    background-position: 0 50%,0 calc(50% - 2px),0 calc(50% + 2px),50% 50%,50% calc(50% - 2px),50% calc(50% + 2px),100% 50%,100% calc(50% - 2px),100% calc(50% + 2px);
 }
 50% {
    background-size: 8px 100%,8px 4px,8px 4px,8px 0,8px 4px,8px 4px,8px 0,8px 4px,8px 4px;
    background-position: 0 50%,0 calc(0% - 2px),0 calc(100% + 2px),50% 50%,50% calc(50% - 2px),50% calc(50% + 2px),100% 50%,100% calc(50% - 2px),100% calc(50% + 2px);
 }
 75% {
    background-size: 8px 100%,8px 4px,8px 4px,8px 100%,8px 4px,8px 4px,8px 0,8px 4px,8px 4px;
    background-position: 0 50%,0 calc(0% - 2px),0 calc(100% + 2px),50% 50%,50% calc(0% - 2px),50% calc(100% + 2px),100% 50%,100% calc(50% - 2px),100% calc(50% + 2px);
 }
 95%,100% {
    background-size: 8px 100%,8px 4px, 8px 4px,8px 100%,8px 4px,8px 4px,8px 100%,8px 4px,8px 4px;
    background-position: 0 50%,0 calc(0% - 2px),0 calc(100% + 2px),50% 50%,50% calc(0% - 2px),50% calc(100% + 2px),100% 50%,100% calc(0% - 2px),100% calc(100% + 2px);
 }
}

.sp-183 {
  width: 40px;
  height: 26px;
  --c: linear-gradient(var(--primary-color) 0 0);
  background:
    var(--c) 0    100%,
    var(--c) 50%  100%,
    var(--c) 100% 100%;
  background-size:8px calc(100% - 4px);
  background-repeat: no-repeat;
  position: relative;
}
.sp-183:before {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background:var(--primary-color);
  left:0;
  top:0;
  animation: 
    adb3-1 1.5s  linear infinite alternate,
    adb3-2 0.75s cubic-bezier(0,200,.8,200) infinite;
}


@keyframes adb3-1 {
  100% {left:calc(100% - 8px)}
}

@keyframes adb3-2 {
  100% {top:-0.1px}
}


.sp-184 {
  width: 40px;
  height: 20px;
  --c:radial-gradient(farthest-side,var(--primary-color) 93%,#0000);
  background:
    var(--c) 0    0,
    var(--c) 50%  0,
    var(--c) 100% 0;
  background-size:8px 8px;
  background-repeat: no-repeat;
  position: relative;
  animation: adb4-0 1s linear infinite alternate;
}
.sp-184:before {
  content: "";
  position: absolute;
  width: 8px;
  height: 12px;
  background:var(--primary-color);
  left:0;
  top:0;
  animation: 
    adb4-1 1s  linear infinite alternate,
    adb4-2 0.5s cubic-bezier(0,200,.8,200) infinite;
}

@keyframes adb4-0 {
  0%      {background-position: 0  100%,50% 0   ,100% 0}
  8%,42%  {background-position: 0  0   ,50% 0   ,100% 0}
  50%     {background-position: 0  0   ,50% 100%,100% 0}
  58%,92% {background-position: 0  0   ,50% 0   ,100% 0}
  100%    {background-position: 0  0   ,50% 0   ,100% 100%}
}

@keyframes adb4-1 {
  100% {left:calc(100% - 8px)}
}

@keyframes adb4-2 {
  100% {top:-0.1px}
}

.sp-185 {
  width: 40px;
  height: 30px;
  --c: linear-gradient(var(--primary-color) 0 0);
  background:
    var(--c) 0    100%/8px 30px,
    var(--c) 50%  100%/8px 20px,
    var(--c) 100% 100%/8px 10px;
  background-repeat: no-repeat;
  position: relative;
  clip-path: inset(-100% 0);
}
.sp-185:before{
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background:var(--primary-color);
  left:-16px;
  top:0;
  animation: 
    adb5-1 2s   linear infinite,
    adb5-2 0.5s cubic-bezier(0,200,.8,200) infinite;
}

@keyframes adb5-1 {
  0%   {left:-16px;transform:translateY(-8px)}
  100% {left:calc(100% + 8px);transform:translateY(22px)}
}

@keyframes adb5-2 {
  100% {top:-0.1px}
}


.sp-186 {
  width: 40px;
  height: 20px;
  --c:radial-gradient(farthest-side,var(--primary-color) 93%,#0000);
  background:
    var(--c) 0    0,
    var(--c) 50%  0;
  background-size:8px 8px;
  background-repeat: no-repeat;
  position: relative;
  clip-path: inset(-200% -100% 0 0);
  animation: adb6-0 1.5s linear infinite;
}
.sp-186:before {
  content: "";
  position: absolute;
  width: 8px;
  height: 12px;
  background:var(--primary-color);
  left:-16px;
  top:0;
  animation: 
    adb6-1 1.5s linear infinite,
    adb6-2 0.5s cubic-bezier(0,200,.8,200) infinite;
}
.sp-186:after {
  content: "";
  position: absolute;
  inset:0 0 auto auto;
  width:8px;
  height: 8px;
  border-radius: 50%;
  background:var(--primary-color); 
  animation: adb6-3 1.5s  linear infinite;
}

@keyframes adb6-0 {
  0%,30%  {background-position: 0  0   ,50% 0   }
  33%     {background-position: 0  100%,50% 0   }
  41%,63% {background-position: 0  0   ,50% 0   }
  66%     {background-position: 0  0   ,50% 100%}
  74%,100%{background-position: 0  0   ,50% 0   }
}

@keyframes adb6-1 {
  90%  {transform:translateY(0)}
  95%  {transform:translateY(15px)}
  100% {transform:translateY(15px);left:calc(100% - 8px)}
}

@keyframes adb6-2 {
  100% {top:-0.1px}
}

@keyframes adb6-3 {
  0%,80%,100% {transform:translate(0)}
  90%         {transform:translate(26px)}
}


.sp-187 {
  width: 40px;
  height: 40px;
  --c: linear-gradient(var(--primary-color) 0 0);
  background: 
    var(--c) 0    0,
    var(--c) 0    100%, 
    var(--c) 50%  0,  
    var(--c) 50%  100%, 
    var(--c) 100% 0, 
    var(--c) 100% 100%;
  background-size: 8px 50%;
  background-repeat: no-repeat;
  animation: adb7-0 1s infinite;
  position: relative;
  overflow: hidden;
}
.sp-187:before {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--primary-color);
  top:calc(50% - 4px);
  left:-8px;
  animation:inherit;
  animation-name:adb7-1;
}

@keyframes adb7-0 {
 16.67% {background-size:8px 30%, 8px 30%, 8px 50%, 8px 50%, 8px 50%, 8px 50%}
 33.33% {background-size:8px 30%, 8px 30%, 8px 30%, 8px 30%, 8px 50%, 8px 50%}
 50%    {background-size:8px 30%, 8px 30%, 8px 30%, 8px 30%, 8px 30%, 8px 30%}
 66.67% {background-size:8px 50%, 8px 50%, 8px 30%, 8px 30%, 8px 30%, 8px 30%}
 83.33% {background-size:8px 50%, 8px 50%, 8px 50%, 8px 50%, 8px 30%, 8px 30%}
}

@keyframes adb7-1 {
 20%  {left:0px}
 40%  {left:calc(50%  - 4px)}
 60%  {left:calc(100% - 8px)}
 80%,
 100% {left:100%}
}

.sp-188 {
  width: 40px;
  height: 40px;
  --c: linear-gradient(var(--primary-color) 0 0);
  background: 
    var(--c) 0    0,
    var(--c) 0    100%, 
    var(--c) 50%  0,  
    var(--c) 50%  100%, 
    var(--c) 100% 0, 
    var(--c) 100% 100%;
  background-size: 8px 50%;
  background-repeat: no-repeat;
  animation: adb8-0 2s infinite;
  position: relative;
  overflow: hidden;
}
.sp-188:before {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--primary-color);
  top:calc(50% - 4px);
  left:-8px;
  animation:inherit;
  animation-name:adb8-1;
}

@keyframes adb8-0 {
 16.67% {background-size:8px 30%, 8px 30%, 8px 50%, 8px 50%, 8px 50%, 8px 50%}
 33.33% {background-size:8px 30%, 8px 30%, 8px 30%, 8px 30%, 8px 50%, 8px 50%}
 50%    {background-size:8px 30%, 8px 30%, 8px 30%, 8px 30%, 8px 50%, 8px 50%}
 66.67% {background-size:8px 50%, 8px 50%, 8px 30%, 8px 30%, 8px 50%, 8px 50%}
 83.33% {background-size:8px 50%, 8px 50%, 8px 50%, 8px 50%, 8px 50%, 8px 50%}
}

@keyframes adb8-1 {
 20%      {left:0px}
 40%,100% {left:calc(50% - 4px)}
}

.sp-189 {
  width: 40px;
  height: 40px;
  --c: linear-gradient(var(--primary-color) 0 0);
  background: 
    var(--c) 0    0,
    var(--c) 0    100%, 
    var(--c) 50%  0,  
    var(--c) 50%  100%, 
    var(--c) 100% 0, 
    var(--c) 100% 100%;
  background-size: 8px 50%;
  background-repeat: no-repeat;
  animation: adb9-0 2s infinite;
  position: relative;
  overflow: hidden;
}
.sp-189:before {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--primary-color);
  top:calc(50% - 4px);
  left:-8px;
  animation:inherit;
  animation-name:adb9-1;
}

@keyframes adb9-0 {
 16.67% {background-size:8px 30%, 8px 30%, 8px 50%, 8px 50%, 8px 50%, 8px 50%}
 33.33% {background-size:8px 30%, 8px 30%, 8px 30%, 8px 30%, 8px 50%, 8px 50%}
 50%    {background-size:8px 30%, 8px 30%, 8px 30%, 8px 30%, 8px 50%, 8px 50%}
 66.67% {background-size:8px 50%, 8px 50%, 8px 30%, 8px 30%, 8px 50%, 8px 50%}
 83.33% {background-size:8px 50%, 8px 50%, 8px 50%, 8px 50%, 8px 50%, 8px 50%}
}

@keyframes adb9-1 {
 20%     {left:0px}
 40%,70% {left:calc(50% - 4px)}
 80%,85% {left:8px;top:calc(50% - 4px)}
 100%    {left:8px;top:-8px}
}


.sp-190 {
  width: 70px;
  height: 30px;
  color: var(--primary-color);
  overflow: hidden;
  position: relative;
}
.sp-190::before {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius:50%;
  inset:0;
  margin:auto; 
  background: var(--primary-color);
  transform-origin: bottom;
  animation: adb10-1 3s infinite;
}
.sp-190::after {
  content: "";
  position: absolute;
  width:8px;
  height:14px;
  bottom:calc(50% - 4px);
  background: var(--primary-color);
  animation: adb10-2 3s infinite;
}

@keyframes adb10-1 {
 0%,
 10% {transform:translate(0)     scale(1)  ;box-shadow: 60px 0 ,60px 0}
 20%,
 40% {transform:translate(20px)  scale(1)  ;box-shadow: 60px 0 ,60px 0}
 48% {transform:translate(20px)  scale(1)  ;box-shadow: 8px  0 ,60px 0}
 50% {transform:translate(20px)  scale(1.5);box-shadow: 0    0 ,60px 0}
 58% {transform:translate(20px)  scale(1.5);box-shadow: 0    0 ,8px  0}
 60%,
 70% {transform:translate(20px)  scale(2)  ;box-shadow: 0    0 ,0    0}

 85% {transform:translate(-50px) scale(2)  ;box-shadow: 0    0 ,0    0}
 87% {transform:translate(-50px) scale(1)  ;box-shadow: 0    0 ,0    0}
 100%{transform:translate(0)     scale(1)  ;box-shadow: 0    0 ,0    0}
}

@keyframes adb10-2 {
 20%,70% {left:50%}
 0%,10%,85%,100% {left:-25px}
}

.sp-191 {
  width: 40px;
  height: 40px;
  display: flex;
}

.sp-191:before,
.sp-191:after {
  content:"";
  flex:1;
  background:var(--primary-color);
  animation: rsp1 2s infinite;
  border-radius: 100px 0 0 100px;
  transform-origin: top right;
  transform: translateY(calc(var(--s,1)*0%)) rotate(0);
}
.sp-191:after {
  transform-origin: bottom left;
  border-radius: 0 100px 100px 0;
  --s:-1;
}

@keyframes rsp1 {
  33%  {transform: translate(0,calc(var(--s,1)*50%)) rotate(0)}
  66%  {transform: translate(0,calc(var(--s,1)*50%)) rotate(-90deg)}
  90%,
  100% {transform: translate(calc(var(--s,1)*-100%),calc(var(--s,1)*50%))  rotate(-90deg)}
}

.sp-192 {
  width: 36px;
  height: 36px;
  color: var(--primary-color);
  background:conic-gradient( from 134deg at top,currentColor  92deg,#0000 0);
  position: relative;
  animation: rsp2-0 2s infinite linear;
}
.sp-192:before,
.sp-192:after {
  content: "";
  position: absolute;
  width: 50%;
  height: 50%;
  background:currentColor; 
  transform-origin: top right;
  clip-path: polygon(100% 0,100% 100%,0 100%);
  inset:auto 100% 0 auto;
  animation: rsp2-1 1s infinite linear alternate;
}

.sp-192:after {
  inset:auto auto 0 100%;
  transform-origin: top left;
  --s:-1;
  clip-path: polygon(0 0,100% 100%,0 100%);
}

@keyframes rsp2-0 {
 0% ,49.99% {transform:scaleY(1)}
 50%,90%    {transform:scaleY(-1)}
 100%       {transform:scaleY(-1) rotate(180deg)}
}

@keyframes rsp2-1 {
 0% ,30%   {transform:rotate(calc(var(--s,1)*0))}
 70%,100%  {transform:rotate(calc(var(--s,1)*180deg))}
}


.sp-193 {
  width: 36px;
  height: 36px;
  color: var(--primary-color);
  background:linear-gradient(45deg,#0000 24%,currentColor 0 76%,#0000 0);
  position: relative;
  animation: rsp3-0 1.5s infinite;
}
.sp-193:before,
.sp-193:after {
  content: "";
  position: absolute;
  width: 50%;
  height: 50%;
  background:currentColor; 
  transform-origin: top left;
  clip-path: polygon(-2px 0,0 -1px,100% 100%,-2px 100%);
  inset:auto auto 0 0;
  animation: rsp3-1 1.5s infinite;
}

.sp-193:after {
  inset:0 0 auto auto;
  transform-origin: bottom right;
  clip-path: polygon(0 0,calc(100% + 2px) 0,calc(100% + 2px) 100%,100% calc(100% + 1px));
}

@keyframes rsp3-0 {
 0% ,50%   {transform:skewX(0)}
 90%,100%  {transform:skewX(-45deg)}
}

@keyframes rsp3-1 {
 40%,100%  {transform:rotate(180deg);box-shadow: 0 0 0 3px;}
}


.sp-194 {
  width: 40px;
  height: 40px;
  display: grid;
}
.sp-194:before,
.sp-194:after {
  content:"";
  background:var(--primary-color);
  transform-origin:left;
  animation: rsp4 2s infinite;
}
.sp-194:before {
  transform-origin:right;
  --s:-1;
}

@keyframes rsp4 {
   0%,
   10%   {transform:translate(0,0)  scale(1)}
   33%   {transform:translate(calc(var(--s,1)*50%),0)  scale(1)}
   66%   {transform:translate(calc(var(--s,1)*50%),calc(var(--s,1)*-50%))  scale(1)}
   90%,
   100%  {transform:translate(calc(var(--s,1)*50%),calc(var(--s,1)*-50%))  scale(0.5,2)}
}


.sp-195 {
  width: 40px;
  height: 40px;
  color:var(--primary-color);
  position: relative;
}
.sp-195:before {
  content:'';
  position: absolute;
  inset:0;
  border-radius: 50%;
  background:
    conic-gradient(from 0deg,  #0000, currentColor 1deg 120deg,#0000 121deg) top right,
    conic-gradient(from 120deg,#0000, currentColor 1deg 120deg,#0000 121deg) bottom,
    conic-gradient(from 240deg,#0000, currentColor 1deg 120deg,#0000 121deg) top left;
  background-size:40px 40px;
  background-repeat: no-repeat;
  animation: rsp5 2s infinite cubic-bezier(0.3,1,0,1);
}
@keyframes rsp5 {
   33%  {inset:-8px;transform: rotate(0deg)}
   66%  {inset:-8px;transform: rotate(180deg)}
   100% {inset:0   ;transform: rotate(180deg)}
}

.sp-196 {
  width: 60px;
  height: 60px;
  color: var(--primary-color);
  position: relative;
}

.sp-196::before,
.sp-196::after {
  content: "";
  position: absolute;
  inset:0;
  background:
    linear-gradient(currentColor 0 0) 0 calc(var(--s,0)*-100%)/100% calc(100%/3),
    repeating-linear-gradient(90deg,currentColor 0 25%,#0000 0 50%) calc(var(--s,0)*100%) 50%/calc(4*100%/3) calc(100%/3);
  background-repeat: no-repeat;
  animation: rsp6 2s infinite;
}
.sp-196::after {
  --s:-1;
}

@keyframes rsp6 {
    0%,
    10%  {transform:translateY(calc(var(--s,1)*0));   background-position: 0 calc(var(--s,0)*-100%),calc(var(--s,0)*100%) 50%}
    33%  {transform:translateY(calc(var(--s,1)*-20%));background-position: 0 calc(var(--s,0)*-100%),calc(var(--s,0)*100%) 50%}
    66%  {transform:translateY(calc(var(--s,1)*-20%));background-position: 0 calc(var(--s,0)*-100%),calc(var(--s,0)*100% + 100%) 50%}
    90%,
    100%  {transform:translateY(calc(var(--s,1)*0));  background-position: 0 calc(var(--s,0)*-100%),calc(var(--s,0)*100% + 100%) 50%}
}


.sp-197 {
  width: 50px;
  height: calc(50px*0.866);
  position: relative;
  background:conic-gradient(from 120deg at 50% 64%,#0000, var(--primary-color) 1deg 120deg,#0000 121deg);
  transform-origin: 50% 50%;
  animation: rsp7-0 1.5s infinite cubic-bezier(0.3,1,0,1);
}
.sp-197:before,
.sp-197:after {
  content:'';
  position: absolute;
  inset:0;
  background:inherit;
  transform-origin: 50% 66%;
  animation: rsp7-1 1.5s infinite;
}
.sp-197:after {
  --s:-1;
}

@keyframes rsp7-0 {
   0%,30%      {transform: rotate(0)}
   70%         {transform: rotate(120deg)}
   70.01%,100% {transform: rotate(360deg)}
}

@keyframes rsp7-1 {
   0%      {transform: rotate(calc(var(--s,1)*120deg)) translate(0)}
   30%,70% {transform: rotate(calc(var(--s,1)*120deg)) translate(calc(var(--s,1)*-5px),10px)}
   100%    {transform: rotate(calc(var(--s,1)*120deg)) translate(0)}
}


.sp-198 {
  width: 20px;
  height: 20px;
  color: var(--primary-color);
  background:currentColor;
  position: relative;
  transform-origin: top right;
  animation: rsp8-0 2s infinite linear;
}
.sp-198:before,
.sp-198:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background:currentColor; 
  transform-origin: bottom right;
  clip-path: polygon(0 0,100% 100%,0 100%);
  inset:auto auto 100% 0;
  animation: rsp8-1 1s infinite linear alternate;
}

.sp-198:after {
  inset:auto auto 0 100%;
  transform-origin: top left;
  --s:-1;
}

@keyframes rsp8-0 {
 0% ,49.99% {transform:scale(1)}
 50%,90%    {transform:scale(-1)}
 100%       {transform:scale(-1) rotate(180deg)}
}

@keyframes rsp8-1 {
 0% ,30%   {transform:rotate(calc(var(--s,1)*0))}
 70%,100%  {transform:rotate(calc(var(--s,1)*90deg))}
}

.sp-199 {
  width: 60px;
  height: 60px;
  color: var(--primary-color);
  background:
    linear-gradient(currentColor 0 0) left   20px top    0,
    linear-gradient(currentColor 0 0) top    20px right  0,
    linear-gradient(currentColor 0 0) right  20px bottom 0,
    linear-gradient(currentColor 0 0) bottom 20px left   0;
  background-size:calc(100%/3) calc(100%/3);
  background-repeat: no-repeat;
  animation: 
    rsp9-1 .75s infinite alternate linear,
    rsp9-2 1.5s infinite;
}


@keyframes rsp9-1 {
 90%,100% {background-size:calc(2*100%/3) calc(100%/3),calc(100%/3) calc(2*100%/3)}
}
@keyframes rsp9-2 {
 0%,49.99% {transform:scaleX(1)}
 50%,100%  {transform:scaleX(-1)}
}

.sp-200 {
  width: 40px;
  height: 40px;
  display: grid;
  animation: rsh10-0 1.5s infinite linear;
}
.sp-200:before,
.sp-200:after {
  content: "";
  grid-area: 1/1;
  background:var(--primary-color);
  animation: inherit;
  animation-name: rsh10-1
}
.sp-200:after {
  transform-origin: bottom right;
  --s:1;
}

@keyframes rsh10-0 {
  0%,66%      {transform:scaleY(1)}
  66.01%,100% {transform:scaleY(-1)}
}

@keyframes rsh10-1 {
  0%,
  10%   {transform:scaleX(calc(var(--s,-1)*-1)) rotate(calc(var(--s,0)*90deg));clip-path: polygon(0 0,0 100%,100% 100%)}
  33%   {transform:scaleX(calc(var(--s,-1)*-1)) rotate(calc(var(--s,0)*0deg)); clip-path: polygon(0 0,0 100%,100% 100%)}
  66%   {transform:scaleX(calc(var(--s,-1)*-1)) rotate(calc(var(--s,0)*0deg)); clip-path: polygon(0 0,0 100%,100% 0)}
  66.01%{transform:scaleX(calc(var(--s,-1)*-1)) rotate(calc(var(--s,0)*0deg)); clip-path: polygon(0 0,0 100%,100% 100%)}
  90%,
  100%  {transform:scaleX(calc(var(--s,-1)*-1)) rotate(calc(var(--s,0)*90deg));clip-path: polygon(0 0,0 100%,100% 100%)}
}

.sp-201 {
  width: 50px;
  height: 12px;
  display: grid;
  animation:asd1-0 1s infinite; 
}
.sp-201:before,
.sp-201:after {
  content: "";
  grid-area: 1/1;
  background:
    radial-gradient(farthest-side,var(--primary-color) 90%,#0000) left,
    radial-gradient(farthest-side,var(--primary-color) 90%,#0000) right;
  background-size: 12px 12px;
  background-repeat: no-repeat;
}
.sp-201:after {
  transform:rotate(0) translate(19px) rotate(0);
  animation:inherit;
  animation-name: asd1-1; 
}

@keyframes asd1-0 {
  100% {transform:translate(19px)}
}

@keyframes asd1-1 {
  100% {transform:rotate(-.5turn) translate(19px) rotate(.5turn)}
}

.sp-202 {
  width: 69px;
  height: 12px;
  display: grid;
}
.sp-202:before,
.sp-202:after {
  content: "";
  grid-area: 1/1;
  background:
    radial-gradient(farthest-side,var(--primary-color) 90%,#0000) left,
    radial-gradient(farthest-side,var(--primary-color) 90%,#0000) right;
  background-size: 12px 12px;
  background-repeat: no-repeat;
  animation: asd2 1s infinite; 
}
.sp-202:after {
  margin:0 19px;
  animation-direction: reverse;
}

@keyframes asd2 {
  80%,100% {transform:rotate(.5turn)}
}

.sp-203 {
  width: 69px;
  height: 12px;
  display: flex;
  justify-content: space-between;
}
.sp-203:before,
.sp-203:after {
  content: "";
  width:31px;
  background:
    radial-gradient(farthest-side,var(--primary-color) 90%,#0000) left,
    radial-gradient(farthest-side,var(--primary-color) 90%,#0000) right;
  background-size: 12px 12px;
  background-repeat: no-repeat;
  transform-origin: 6px 50%;
  transform:translate(0) rotate(0);
  animation:asd3 1s infinite linear; 
}
.sp-203:after {
  --s:-1;
  transform-origin: calc(100% - 6px) 50%;
}

@keyframes asd3 {
  100% {transform:translate(calc(var(--s,1)*19px)) rotate(calc(var(--s,1)*.5turn))}
}

.sp-204 {
  width: 50px;
  height: 12px;
  display: grid;
}
.sp-204:before,
.sp-204:after {
  content: "";
  grid-area: 1/1;
  background:
    radial-gradient(farthest-side,var(--primary-color) 90%,#0000) left,
    radial-gradient(farthest-side,var(--primary-color) 90%,#0000) right;
  background-size: 12px 12px;
  background-repeat: no-repeat;
  animation:asd4 1s infinite; 
  transform:translate(var(--d,0)) rotate(0);
}
.sp-204:after {
  --d:19px;
  animation-delay: .5s;
}

@keyframes asd4 {
  50%,100% {transform:translate(var(--d,0)) rotate(.5turn)}
}

.sp-205 {
  width: 69px;
  height: 12px;
  display: grid;
}
.sp-205:before,
.sp-205:after {
  content: "";
  grid-area: 1/1;
  background:
    radial-gradient(farthest-side,var(--primary-color) 90%,#0000) left,
    radial-gradient(farthest-side,var(--primary-color) 90%,#0000) right;
  background-size: 12px 12px;
  background-repeat: no-repeat;
  animation:asd5 1s infinite linear; 
}
.sp-205:after {
  margin-left: auto;
  --s:-1;
}

@keyframes asd5 {
  0%   {transform:translateY(calc(var(--s,1)*0px));width:31px }
  33%  {transform:translateY(calc(var(--s,1)*8px));width:31px }
  66%  {transform:translateY(calc(var(--s,1)*8px));width:50px }
  100% {transform:translateY(calc(var(--s,1)*0px));width:50px }
}


.sp-206 {
  width: 69px;
  height: 12px;
  display: grid;
  animation:asd6-0 2s infinite linear; 
}
.sp-206:before,
.sp-206:after {
  content: "";
  grid-area: 1/1;
  background:
    radial-gradient(farthest-side,var(--primary-color) 90%,#0000) left,
    radial-gradient(farthest-side,var(--primary-color) 90%,#0000) right;
  background-size: 12px 12px;
  background-repeat: no-repeat;
  animation:asd6-1 1s infinite linear; 
}
.sp-206:after {
  margin-left: auto;
  --s:-1;
}

@keyframes asd6-0 {
  0%,49.99% {transform: scaleY( 1)}
  50%,100%  {transform: scaleY(-1)}
}

@keyframes asd6-1 {
  0%   {transform:translate(0                    ,calc(var(--s,1)*0px));width:31px}
  33%  {transform:translate(0                    ,calc(var(--s,1)*8px));width:31px}
  66%  {transform:translate(calc(var(--s,1)*19px),calc(var(--s,1)*8px));width:50px}
  100% {transform:translate(calc(var(--s,1)*19px),calc(var(--s,1)*0px));width:50px}
}


.sp-207 {
  width: 6px;
  height: 6px;
  border-radius: 50%; 
  color: var(--primary-color);
  animation:
    asd7-1 .75s infinite linear alternate,
    asd7-2 1.5s  infinite linear; 
}

@keyframes asd7-1 {
  0%,
  20% {box-shadow:30px 0 0 3px, 10px 0 0 3px, -10px 0 0 3px,-30px 0 0 3px}
  60%,
  100% {box-shadow:12px 0 0 3px, 14px 0 0 6px, -14px 0 0 6px,-12px 0 0 3px}
}

@keyframes asd7-2 {
  0%,25%   {transform: rotate(0)}
  50%,100% {transform: rotate(.5turn)}
}

.sp-208 {
  width: 32px;
  height: 32px;
  --c:radial-gradient(farthest-side,var(--primary-color) 90%,#0000);
  background:
    var(--c) 0    0,
    var(--c) 100% 0,
    var(--c) 100% 100%,
    var(--c) 0    100%;
  background-size: 12px 12px;
  background-repeat: no-repeat;
  animation:asd8 .5s infinite; 
}

@keyframes asd8 {
  100% {background-position: 100% 0,100% 100%,0 100%,0 0}
}


.sp-209 {
  width: 69px;
  height: 12px;
  display: grid;
  animation:asd9-0 1s infinite linear; 
}
.sp-209:before,
.sp-209:after {
  content: "";
  width:31px;
  grid-area: 1/1;
  background:
    radial-gradient(farthest-side,var(--primary-color) 90%,#0000) left,
    radial-gradient(farthest-side,var(--primary-color) 90%,#0000) right;
  background-size: 12px 12px;
  background-repeat: no-repeat;
  animation:asd9-1 1s infinite linear; 
}
.sp-209:after {
  margin-left: auto;
  --s:-1;
}

@keyframes asd9-0 {
  0%,30% {transform: rotate(0)}
  50%,100%   {transform: rotate(.5turn)}
}

@keyframes asd9-1 {
  30%,70% {transform:translate(calc(var(--s,1)*9.5px))}
}


.sp-210 {
  width: 69px;
  height: 12px;
  --c:radial-gradient(farthest-side,var(--primary-color) 90%,#0000);
  background:
    var(--c) ,
    var(--c) ,
    var(--c) ,
    var(--c) ;
  background-size: 12px 12px;
  background-repeat: no-repeat;
  animation:
    asd10-1 .75s infinite alternate,
    asd10-2 1.5s infinite alternate; 
}

@keyframes asd10-1 {
  0%,
  10% {background-position: 0 0,0 0,0 0,0 0}
  33% {background-position: 0 0,calc(100%/3) 0,calc(100%/3) 0,calc(100%/3) 0}
  66% {background-position: 0 0,calc(100%/3) 0,calc(2*100%/3) 0,calc(2*100%/3) 0}
  90%,
  100% {background-position: 0 0,calc(100%/3) 0,calc(2*100%/3) 0,100% 0}
}

@keyframes asd10-2 {
  0%,49.99% {transform: scale( 1)}
  50%,100%  {transform: scale(-1)}
}

.sp-211 {
  width: 45px;
  height: 45px;
  --c: repeating-linear-gradient(90deg,var(--primary-color) 0 9px,#0000 0 18px);
  background: 
    var(--c),
    var(--c),
    var(--c),
    var(--c);
  background-size: 100% 26%;
  background-repeat: no-repeat;
  animation: qwb1 1.5s infinite;
}

@keyframes qwb1 {
 0%    {background-position:-50px calc(0*100%/3),-50px calc(1*100%/3),-50px calc(2*100%/3),-50px calc(3*100%/3)}
 12.5% {background-position:0     calc(0*100%/3),-50px calc(1*100%/3),-50px calc(2*100%/3),-50px calc(3*100%/3)}
 25%   {background-position:0     calc(0*100%/3),0     calc(1*100%/3),-50px calc(2*100%/3),-50px calc(3*100%/3)}
 37.5% {background-position:0     calc(0*100%/3),0     calc(1*100%/3),0     calc(2*100%/3),-50px calc(3*100%/3)}
 45%,
 55%   {background-position:0     calc(0*100%/3),0     calc(1*100%/3),0     calc(2*100%/3),0     calc(3*100%/3)}
 62.5% {background-position:50px  calc(0*100%/3),0     calc(1*100%/3),0     calc(2*100%/3),0     calc(3*100%/3)}
 75%   {background-position:50px  calc(0*100%/3),50px  calc(1*100%/3),0     calc(2*100%/3),0     calc(3*100%/3)}
 87.5% {background-position:50px  calc(0*100%/3),50px  calc(1*100%/3),50px  calc(2*100%/3),0     calc(3*100%/3)}
 100%  {background-position:50px  calc(0*100%/3),50px  calc(1*100%/3),50px  calc(2*100%/3),50px  calc(3*100%/3)}
}


.sp-212 {
  width: 45px;
  height: 45px;
  --c: repeating-linear-gradient(90deg,var(--primary-color) 0 9px,#0000 0 18px);
  background: 
    var(--c),
    var(--c),
    var(--c),
    var(--c);
  background-size: 100% 26%;
  background-repeat: no-repeat;
  animation: qwb2 1.5s infinite;
}

@keyframes qwb2 {
 0%    {background-position:0 -20px        ,0 -20px         ,0 -20px         ,0 -20px}
 12.5% {background-position:0 -20px        ,0 -20px         ,0 -20px         ,0 calc(3*100%/3)}
 25%   {background-position:0 -20px        ,0 -20px         ,0 calc(2*100%/3),0 calc(3*100%/3)}
 37.5% {background-position:0 -20px        ,0 calc(1*100%/3),0 calc(2*100%/3),0 calc(3*100%/3)}
 45%,
 50%   {background-position:0 calc(0*100%/3),0 calc(1*100%/3),0 calc(2*100%/3),0 calc(3*100%/3)}
 62.5% {background-position:0 calc(0*100%/3),0 calc(1*100%/3),0 calc(2*100%/3),0 50px}
 75%   {background-position:0 calc(0*100%/3),0 calc(1*100%/3),0 50px          ,0 50px}
 87.5% {background-position:0 calc(0*100%/3),0 50px          ,0 50px          ,0 50px}
 100%  {background-position:0 50px          ,0 50px          ,0 50px          ,0 50px}
}


.sp-213 {
  width: 72px;
  height: 45px;
  --c: repeating-linear-gradient(90deg,var(--primary-color) 0 9px,#0000 0 18px);
  background: 
    var(--c),
    var(--c),
    var(--c),
    var(--c);
  background-size: 45px 26%;
  background-repeat: no-repeat;
  animation: qwb3 1s infinite;
}

@keyframes qwb3 {
 0%,
 10% {background-position:50%  calc(0*100%/3),50%              calc(1*100%/3),50%              calc(2*100%/3),50%  calc(3*100%/3)}
 33% {background-position:100% calc(0*100%/3),calc(100% - 9px) calc(1*100%/3),9px              calc(2*100%/3),0    calc(3*100%/3)}
 66% {background-position:0    calc(0*100%/3),9px              calc(1*100%/3),calc(100% - 9px) calc(2*100%/3),100% calc(3*100%/3)}
 90%, 
 100%{background-position:50% calc(0*100%/3),50%               calc(1*100%/3),50%              calc(2*100%/3),50%  calc(3*100%/3)}
}


.sp-214 {
  width: 45px;
  height: 54px;
  --c: repeating-linear-gradient(90deg,var(--primary-color) 0 9px,#0000 0 18px);
  background: 
    var(--c),
    var(--c),
    var(--c),
    var(--c);
  background-size: 100% 21%;
  background-repeat: no-repeat;
  animation: qwb4 .75s infinite alternate;
}
@keyframes qwb4 {
 0%,
 10% {background-position:0 calc(0*100%/4),0 calc(1*100%/4),0 calc(2*100%/4),0 calc(3*100%/4)}
 25% {background-position:0 calc(0*100%/4),0 calc(1*100%/4),0 calc(2*100%/4),0 calc(4*100%/4)}
 50% {background-position:0 calc(0*100%/4),0 calc(1*100%/4),0 calc(3*100%/4),0 calc(4*100%/4)}
 75% {background-position:0 calc(0*100%/4),0 calc(2*100%/4),0 calc(3*100%/4),0 calc(4*100%/4)}
 90%,
 100%{background-position:0 calc(1*100%/4),0 calc(2*100%/4),0 calc(3*100%/4),0 calc(4*100%/4)}
}


.sp-215 {
  width: 45px;
  height: 45px;
  --c: repeating-linear-gradient(90deg,var(--primary-color) 0 9px,#0000 0 18px);
  background: 
    var(--c),
    var(--c),
    var(--c),
    var(--c);
  background-size: calc(100% + 18px) 26%;
  background-repeat: no-repeat;
  animation: qwb5 .75s infinite;
}

@keyframes qwb5 {
 0%   {background-position:0    calc(0*100%/3),100% calc(1*100%/3),0    calc(2*100%/3),100% calc(3*100%/3)}
 25%  {background-position:100% calc(0*100%/3),100% calc(1*100%/3),0    calc(2*100%/3),100% calc(3*100%/3)}
 50%  {background-position:100% calc(0*100%/3),0    calc(1*100%/3),0    calc(2*100%/3),100% calc(3*100%/3)}
 75%  {background-position:100% calc(0*100%/3),0    calc(1*100%/3),100% calc(2*100%/3),100% calc(3*100%/3)}
 100% {background-position:100% calc(0*100%/3),0    calc(1*100%/3),100% calc(2*100%/3),0    calc(3*100%/3)}
}

.sp-216 {
  width: 45px;
  height: 45px;
  --c: repeating-linear-gradient(90deg,var(--primary-color) 0 9px,#0000 0 18px);
  background: 
    var(--c),
    var(--c),
    var(--c),
    var(--c);
  background-size: calc(100% + 18px) 26%;
  background-repeat: no-repeat;
  animation: qwb6 .75s infinite linear;
}

@keyframes qwb6 {
 0%,
 5%   {background-position:0    calc(0*100%/3),0    calc(1*100%/3),0    calc(2*100%/3),0    calc(3*100%/3)}
 20%  {background-position:50%  calc(0*100%/3),0    calc(1*100%/3),0    calc(2*100%/3),0    calc(3*100%/3)}
 40%  {background-position:100% calc(0*100%/3),50%  calc(1*100%/3),0    calc(2*100%/3),0    calc(3*100%/3)}
 60%  {background-position:100% calc(0*100%/3),100% calc(1*100%/3),50%  calc(2*100%/3),0    calc(3*100%/3)}
 80%  {background-position:100% calc(0*100%/3),100% calc(1*100%/3),100% calc(2*100%/3),50%  calc(3*100%/3)}
 95%,
 100% {background-position:100% calc(0*100%/3),100% calc(1*100%/3),100% calc(2*100%/3),100% calc(3*100%/3)}
}

.sp-217 {
  width: 45px;
  height: 45px;
  --c: repeating-linear-gradient(90deg,var(--primary-color) 0 9px,#0000 0 18px);
  background: 
    var(--c),
    var(--c),
    var(--c),
    var(--c);
  background-size: calc(100% + 18px) 26%;
  background-repeat: no-repeat;
  animation: qwb7 .75s infinite linear;
}

@keyframes qwb7 {
 0%,20%   {background-position:0    calc(0*100%/3),100% calc(1*100%/3),0    calc(2*100%/3),100% calc(3*100%/3)}
 80%,100% {background-position:100% calc(0*100%/3),0    calc(1*100%/3),100% calc(2*100%/3),0    calc(3*100%/3)}
}

.sp-218 {
  width: 63px;
  height: 45px;
  --c: repeating-linear-gradient(90deg,var(--primary-color) 0 9px,#0000 0 18px);
  background: 
    var(--c),
    var(--c),
    var(--c),
    var(--c);
  background-size: 45px 26%;
  background-repeat: no-repeat;
  animation: qwb8 1s infinite;
}

@keyframes qwb8 {
 0%,
 20%  {background-position:50% calc(0*100%/3),50%  calc(1*100%/3),50%  calc(2*100%/3),50% calc(3*100%/3)}
 40%  {background-position:50% calc(0*100%/3),100% calc(1*100%/3),0    calc(2*100%/3),50% calc(3*100%/3)}
 60%  {background-position:50% calc(0*100%/3),0    calc(1*100%/3),100% calc(2*100%/3),50% calc(3*100%/3)}
 80%,
 100% {background-position:50% calc(0*100%/3),50%  calc(1*100%/3),50%  calc(2*100%/3),50% calc(3*100%/3)}
}

.sp-219 {
  width:9px;
  height: 9px;
  background:var(--primary-color);
  color: var(--primary-color);
  box-shadow: 
    -18px -9px,0 -9px,18px -9px,
    -18px  0  ,       18px  0  ,
    -18px  9px,0  9px,18px  9px,
    -18px 18px,0 18px,18px 18px;
  animation: qwb9 2s infinite;
}

@keyframes qwb9 {
  10% {
   box-shadow: 
     -18px -9px,0 -9px,18px -9px,
     -18px  0  ,       18px  0  ,
     -18px  9px #0000,0  9px,18px  9px #0000,
     -18px 18px,0 18px,18px 18px;
  }
  20% {
   box-shadow: 
     -18px -9px,0 -9px,18px -9px,
     -18px  0  ,       18px  0  ,
     -18px  9px,0  9px,18px  9px #0000,
     -18px 18px #0000,0 18px,18px 18px;
  }
  30% {
   box-shadow: 
     -18px -9px,0 -9px #0000,18px -9px,
     -18px  0   #0000,       18px  0  ,
     -18px  9px,0  9px #0000,18px  9px,
     -18px 18px #0000,0 18px,18px 18px #0000;
  }
  40% {
   box-shadow: 
     -18px -9px,0 -9px,18px -9px,
     -18px  0  #0000,       18px  0 #0000,
     -18px  9px,0  9px,18px  9px,
     -18px 18px,0 18px,18px 18px;
  }
  50% {
   box-shadow: 
     -18px -9px,0 -9px,18px -9px,
     -18px  0  ,       18px  0  #0000,
     -18px  9px #0000,0  9px,18px  9px,
     -18px 18px,0 18px,18px 18px;
  }
  60% {
   box-shadow: 
     -18px -9px,0 -9px #0000,18px -9px,
     -18px  0  ,       18px  0  ,
     -18px  9px #0000,0  9px,18px  9px,
     -18px 18px #0000,0 18px,18px 18px;
  }
  70% {
   box-shadow: 
     -18px -9px,0 -9px #0000,18px -9px #0000,
     -18px  0  ,       18px  0  ,
     -18px  9px,0  9px,18px  9px,
     -18px 18px #0000,0 18px,18px 18px;
  }
  80% {
   box-shadow: 
     -18px -9px #0000,0 -9px,18px -9px,
     -18px  0  ,       18px  0  ,
     -18px  9px,0  9px,18px  9px,
     -18px 18px,0 18px,18px 18px #0000;
  }
  90% {
   box-shadow: 
     -18px -9px #0000,0 -9px,18px -9px,
     -18px  0  ,       18px  0  ,
     -18px  9px,0  9px #0000,18px  9px,
     -18px 18px,0 18px,18px 18px #0000;
  }
}


.sp-220 {
  width:9px;
  height: 9px;
  background:var(--primary-color);
  color: var(--primary-color);
  box-shadow: 
    -18px -9px,0 -9px,18px -9px,
    -18px  0  ,       18px  0  ,
    -18px  9px,0  9px,18px  9px,
    -18px 18px,0 18px,18px 18px;
  animation: qwb10 2s infinite;
}

@keyframes qwb10 {
  10% {
   box-shadow: 
     -18px -9px,0 -9px,18px -9px,
     -18px  0  ,       18px  0  ,
     -18px  9px 0 2px,0  9px,18px  9px 0 2px,
     -18px 18px,0 18px,18px 18px;
  }
  20% {
   box-shadow: 
     -18px -9px,0 -9px,18px -9px,
     -18px  0  ,       18px  0  ,
     -18px  9px,0  9px,18px  9px 0 2px,
     -18px 18px 0 2px,0 18px,18px 18px;
  }
  30% {
   box-shadow: 
     -18px -9px,0 -9px,18px -9px,
     -18px  0   0 2px,       18px  0  ,
     -18px  9px,0  9px 0 2px,18px  9px,
     -18px 18px 0 2px,0 18px,18px 18px 0 2px;
  }
  40% {
   box-shadow: 
     -18px -9px,0 -9px ,18px -9px,
     -18px  0  0 2px,       18px  0 0 2px,
     -18px  9px,0  9px,18px  9px,
     -18px 18px,0 18px,18px 18px  0 2px;
  }
  50% {
   box-shadow: 
     -18px -9px,0 -9px,18px -9px,
     -18px  0  ,       18px  0  0 2px,
     -18px  9px 0 2px,0  9px,18px  9px,
     -18px 18px,0 18px,18px 18px;
  }
  60% {
   box-shadow: 
     -18px -9px,0 -9px 0 2px,18px -9px,
     -18px  0  ,       18px  0  ,
     -18px  9px 0 2px,0  9px,18px  9px,
     -18px 18px 0 2px,0 18px,18px 18px;
  }
  70% {
   box-shadow: 
     -18px -9px,0 -9px 0 2px,18px -9px 0 2px,
     -18px  0  ,       18px  0  ,
     -18px  9px,0  9px,18px  9px,
     -18px 18px 0 2px,0 18px,18px 18px;
  }
  80% {
   box-shadow: 
     -18px -9px 0 2px,0 -9px,18px -9px,
     -18px  0  ,       18px  0  ,
     -18px  9px,0  9px,18px  9px,
     -18px 18px,0 18px,18px 18px 0 2px;
  }
  90% {
   box-shadow: 
     -18px -9px 0 2px,0 -9px,18px -9px,
     -18px  0  ,       18px  0  ,
     -18px  9px,0  9px 0 2px,18px  9px,
     -18px 18px,0 18px,18px 18px 0 2px;
  }
}

.sp-221 {
  width:35px;
  height:35px;
  color: var(--primary-color);
  --c:linear-gradient(currentColor 0 0);
  background:
    var(--c) 0 0,
    var(--c) 100% 0,
    var(--c) 100% 100%,
    var(--c) 0 100%;
  background-repeat: no-repeat;
  animation: pl1 1s infinite alternate;
}

@keyframes pl1 {
  0%   {background-size: 0    4px,4px 0   ,0    4px,4px 0   }
  25%  {background-size: 100% 4px,4px 0   ,0    4px,4px 0   }
  50%  {background-size: 100% 4px,4px 100%,0    4px,4px 0   }
  75%  {background-size: 100% 4px,4px 100%,100% 4px,4px 0   }
  90%,
  100% {background-size: 100% 4px,4px 100%,100% 4px,4px 100%}
}

.sp-222 {
  width:35px;
  height:35px;
  color: var(--primary-color);
  --c:linear-gradient(currentColor 0 0);
  background:
    var(--c) 0 0,
    var(--c) 100% 0,
    var(--c) 100% 100%,
    var(--c) 0 100%;
  background-repeat: no-repeat;
  animation: 
    pl2-1 2s infinite,
    pl2-2 2s infinite;
}

@keyframes pl2-1 {
  0%   {background-size: 0    4px,4px 0   ,0    4px,4px 0   }
  12.5%{background-size: 100% 4px,4px 0   ,0    4px,4px 0   }
  25%  {background-size: 100% 4px,4px 100%,0    4px,4px 0   }
  37.5%{background-size: 100% 4px,4px 100%,100% 4px,4px 0   }
  45%,
  55%  {background-size: 100% 4px,4px 100%,100% 4px,4px 100%}
  62.5%{background-size: 0    4px,4px 100%,100% 4px,4px 100%}
  75%  {background-size: 0    4px,4px 0   ,100% 4px,4px 100%}
  87.5%{background-size: 0    4px,4px 0   ,0    4px,4px 100%}
  100% {background-size: 0    4px,4px 0   ,0    4px,4px 0   }
}

@keyframes pl2-2 {
  0%,49.9%{background-position: 0 0   ,100% 0   ,100% 100%,0 100%}
  50%,100%{background-position: 100% 0,100% 100%,0    100%,0 0   }
}

.sp-223 {
  width:35px;
  height:35px;
  color: var(--primary-color);
  --c1:linear-gradient(90deg,#0000 calc(100%/3),currentColor 0 calc(2*100%/3),#0000 0);
  --c2:linear-gradient( 0deg,#0000 calc(100%/3),currentColor 0 calc(2*100%/3),#0000 0);
  background:
    var(--c1),
    var(--c2),
    var(--c1),
    var(--c2);
  background-size:300% 4px,4px 300%;
  background-repeat: no-repeat;
  animation: pl3 1s infinite linear;
}

@keyframes pl3 {
  0%   {background-position: 50%  0,100% 100%,0    100%,0 0}
  25%  {background-position: 0    0,100% 50% ,0    100%,0 0}
  50%  {background-position: 0    0,100% 0   ,50%  100%,0 0}
  75%  {background-position: 0    0,100% 0   ,100% 100%,0 50%}
 75.01%{background-position: 100% 0,100% 0   ,100% 100%,0 50%}
  100% {background-position: 50%  0,100% 0   ,100% 100%,0 100%}
}

.sp-224 {
  width:80px;
  height:40px;
  color: var(--primary-color);
  --c:linear-gradient(currentColor 0 0);
  background:
    var(--c),
    var(--c),
    var(--c),
    var(--c),
    var(--c),
    var(--c),
    var(--c);
  background-repeat: no-repeat;
  animation: 
    pl4-1 1.5s infinite,
    pl4-2 1.5s infinite;
}

@keyframes pl4-1 {
  0%      {background-size: 0   4px,4px 0  ,0   4px,4px 0   ,0   4px,4px 0  ,0   4px}
  7.14%   {background-size: 25% 4px,4px 0  ,0   4px,4px 0   ,0   4px,4px 0  ,0   4px}
  14.29%  {background-size: 25% 4px,4px 50%,0   4px,4px 0   ,0   4px,4px 0  ,0   4px}
  21.43%  {background-size: 25% 4px,4px 50%,25% 4px,4px 0   ,0   4px,4px 0  ,0   4px}
  28.57%  {background-size: 25% 4px,4px 50%,25% 4px,4px 100%,0   4px,4px 0  ,0   4px}
  35.71%  {background-size: 25% 4px,4px 50%,25% 4px,4px 100%,25% 4px,4px 0  ,0   4px}
  42.86%  {background-size: 25% 4px,4px 50%,25% 4px,4px 100%,25% 4px,4px 50%,0   4px}
  49%,
  51%     {background-size: 25% 4px,4px 50%,25% 4px,4px 100%,25% 4px,4px 50%,25% 4px}
  57.14%  {background-size: 0   4px,4px 50%,25% 4px,4px 100%,25% 4px,4px 50%,25% 4px}
  64.29%  {background-size: 0   4px,4px 0  ,25% 4px,4px 100%,25% 4px,4px 50%,25% 4px}
  71.43%  {background-size: 0   4px,4px 0  ,0   4px,4px 100%,25% 4px,4px 50%,25% 4px}
  78.57%  {background-size: 0   4px,4px 0  ,0   4px,4px 0   ,25% 4px,4px 50%,25% 4px}
  85.71%  {background-size: 0   4px,4px 0  ,0   4px,4px 0   ,0   4px,4px 50%,25% 4px}
  92.86%  {background-size: 0   4px,4px 0  ,0   4px,4px 0   ,0   4px,4px 0  ,25% 4px}
  100%    {background-size: 0   4px,4px 0  ,0   4px,4px 0   ,0   4px,4px 0  ,0   4px}
}
@keyframes pl4-2 {
  0%,49.9% {background-position:0 50%,bottom 20px left 16px,20px 0,50% 0,40px 100%,bottom 0 right 16px,60px 50% }
  50%,100% {background-position:right 60px top 50%,16px 0,right 40px top 0,50% 100%,right 20px bottom 0,right 16px top 20px,100% 50%}
}

.sp-225 {
  width:40px;
  height:40px;
  color: var(--primary-color);
  --c:linear-gradient(currentColor 0 0);
  background:
    var(--c) 0 50%,
    var(--c) right 0 bottom 20px,
    var(--c) 100% 0,
    var(--c) 50% 0,
    var(--c) right 20px bottom 0,
    var(--c) 0 100%;
  background-repeat: no-repeat;
  animation: pl5 1.5s infinite alternate;
}


@keyframes pl5 {
  0%     {background-size: 0    4px,4px 0  ,0   4px,4px 0   ,0    4px,4px 0   }
  16.67% {background-size: 100% 4px,4px 0  ,0   4px,4px 0   ,0    4px,4px 0   }
  33.33% {background-size: 100% 4px,4px 50%,0   4px,4px 0   ,0    4px,4px 0   }
  50%    {background-size: 100% 4px,4px 50%,50% 4px,4px 0   ,0    4px,4px 0   }
  66.67% {background-size: 100% 4px,4px 50%,50% 4px,4px 100%,0    4px,4px 0   }
  83.33% {background-size: 100% 4px,4px 50%,50% 4px,4px 100%,50%  4px,4px 0   }
  95%,
  100%   {background-size: 100% 4px,4px 50%,50% 4px,4px 100%,50%  4px,4px 50% }
}

.sp-226 {
  width:40px;
  height:40px;
  color: var(--primary-color);
  --c:linear-gradient(currentColor 0 0);
  background:
    var(--c),
    var(--c),
    var(--c),
    var(--c),
    var(--c),
    var(--c);
  background-repeat: no-repeat;
  animation: 
    pl6-1 2s infinite,
    pl6-2 2s infinite;
}

@keyframes pl6-1 {
  0%     {background-size: 0    4px,4px 0  ,0   4px,4px 0   ,0   4px,4px 0  }
  8.33%  {background-size: 100% 4px,4px 0  ,0   4px,4px 0   ,0   4px,4px 0  }
  16.67% {background-size: 100% 4px,4px 50%,0   4px,4px 0   ,0   4px,4px 0  }
  25%    {background-size: 100% 4px,4px 50%,50% 4px,4px 0   ,0   4px,4px 0  }
  33.33% {background-size: 100% 4px,4px 50%,50% 4px,4px 100%,0   4px,4px 0  }
  41.67% {background-size: 100% 4px,4px 50%,50% 4px,4px 100%,50% 4px,4px 0  }
  48%,
  52%    {background-size: 100% 4px,4px 50%,50% 4px,4px 100%,50% 4px,4px 50%}
  58.33% {background-size: 0    4px,4px 50%,50% 4px,4px 100%,50% 4px,4px 50%}
  66.67% {background-size: 0    4px,4px 0  ,50% 4px,4px 100%,50% 4px,4px 50%}
  75%    {background-size: 0    4px,4px 0  ,0   4px,4px 100%,50% 4px,4px 50%}
  83.33% {background-size: 0    4px,4px 0  ,0   4px,4px 0   ,50% 4px,4px 50%}
  91.67% {background-size: 0    4px,4px 0  ,0   4px,4px 0   ,0   4px,4px 50%}
  100%   {background-size: 0    4px,4px 0  ,0   4px,4px 0   ,0   4px,4px 0}
}
@keyframes pl6-2 {
  0%,49.9% {background-position: 0    50%,right 0 bottom 20px,100% 0,50% 0,right 20px bottom 0,0 100%}
  50%,100% {background-position: 100% 50%,100% 0,left 20px top 0,50% 100%,0 100%,0 20px}
}


.sp-227 {
  width:60px;
  height:60px;
  color: var(--primary-color);
  --c:linear-gradient(currentColor 0 0);
  background:
    var(--c) 0 38px,
    var(--c) right 18px bottom 18px,
    var(--c) right 18px top    18px,
    var(--c) 18px 18px,
    var(--c) 18px 100%,
    var(--c) 100% 100%,
    var(--c) 100% 0,
    var(--c) 0 0;
  background-repeat: no-repeat;
  animation: pl7 1.5s infinite alternate;
}

@keyframes pl7 {
  0%    {background-size: 0    4px,4px 0   ,0    4px,4px 0   ,0    4px,4px 0   ,0    4px,4px 0   }
  12.5% {background-size: 40px 4px,4px 0   ,0    4px,4px 0   ,0    4px,4px 0   ,0    4px,4px 0   }
  25%   {background-size: 40px 4px,4px 20px,0    4px,4px 0   ,0    4px,4px 0   ,0    4px,4px 0   }
  37.5% {background-size: 40px 4px,4px 20px,20px 4px,4px 0   ,0    4px,4px 0   ,0    4px,4px 0   }
  50%   {background-size: 40px 4px,4px 20px,20px 4px,4px 40px,0    4px,4px 0   ,0    4px,4px 0   }
  62.5% {background-size: 40px 4px,4px 20px,20px 4px,4px 40px,40px 4px,4px 0   ,0    4px,4px 0   }
  75%   {background-size: 40px 4px,4px 20px,20px 4px,4px 40px,40px 4px,4px 100%,0    4px,4px 0   }
  87.5% {background-size: 40px 4px,4px 20px,20px 4px,4px 40px,40px 4px,4px 100%,100% 4px,4px 0   }
  95%,
  100%  {background-size: 40px 4px,4px 20px,20px 4px,4px 40px,40px 4px,4px 100%,100% 4px,4px 40px}
}

.sp-228 {
  width:60px;
  height:60px;
  color: var(--primary-color);
  --c:linear-gradient(currentColor 0 0);
  background:
    var(--c) 0 38px,
    var(--c) right 18px bottom 18px,
    var(--c) right 18px top    18px,
    var(--c) 18px 18px,
    var(--c) 18px 100%,
    var(--c) 100% 100%,
    var(--c) 100% 0,
    var(--c) 0 0;
  background-repeat: no-repeat;
  animation: 
    pl8-1 2s infinite,
    pl8-2 2s infinite;
}

@keyframes pl8-1 {
  0%     {background-size: 0    4px,4px 0   ,0    4px,4px 0   ,0    4px,4px 0   ,0    4px,4px 0   }
  6.25%  {background-size: 40px 4px,4px 0   ,0    4px,4px 0   ,0    4px,4px 0   ,0    4px,4px 0   }
  12.5%  {background-size: 40px 4px,4px 20px,0    4px,4px 0   ,0    4px,4px 0   ,0    4px,4px 0   }
  18.75% {background-size: 40px 4px,4px 20px,20px 4px,4px 0   ,0    4px,4px 0   ,0    4px,4px 0   }
  25%    {background-size: 40px 4px,4px 20px,20px 4px,4px 40px,0    4px,4px 0   ,0    4px,4px 0   }
  31.25% {background-size: 40px 4px,4px 20px,20px 4px,4px 40px,40px 4px,4px 0   ,0    4px,4px 0   }
  37.5%  {background-size: 40px 4px,4px 20px,20px 4px,4px 40px,40px 4px,4px 100%,0    4px,4px 0   }
  43.75% {background-size: 40px 4px,4px 20px,20px 4px,4px 40px,40px 4px,4px 100%,100% 4px,4px 0   }
  48%,
  52%    {background-size: 40px 4px,4px 20px,20px 4px,4px 40px,40px 4px,4px 100%,100% 4px,4px 40px}
  56.25% {background-size: 0    4px,4px 20px,20px 4px,4px 40px,40px 4px,4px 100%,100% 4px,4px 40px}
  62.5%  {background-size: 0    4px,4px 0   ,20px 4px,4px 40px,40px 4px,4px 100%,100% 4px,4px 40px}
  68.75% {background-size: 0    4px,4px 0   ,0    4px,4px 40px,40px 4px,4px 100%,100% 4px,4px 40px}
  75%    {background-size: 0    4px,4px 0   ,0    4px,4px 0   ,40px 4px,4px 100%,100% 4px,4px 40px}
  81.25% {background-size: 0    4px,4px 0   ,0    4px,4px 0   ,0    4px,4px 100%,100% 4px,4px 40px}
  87.5%  {background-size: 0    4px,4px 0   ,0    4px,4px 0   ,0    4px,4px 0   ,100% 4px,4px 40px}
  93.75% {background-size: 0    4px,4px 0   ,0    4px,4px 0   ,0    4px,4px 0   ,0    4px,4px 40px}
  100%   {background-size: 0    4px,4px 0   ,0    4px,4px 0   ,0    4px,4px 0   ,0    4px,4px 0   }
}

@keyframes pl8-2 {
  0%,49.9% {background-position:0 38px, right 18px bottom 18px, right 18px top 18px,18px 18px,18px 100%,100% 100%,100% 0,0 0}
  50%,100% {background-position:right 18px bottom 18px, right 18px top 18px, 18px 18px,18px 100%,100% 100%,100% 0,0 0,bottom 18px left 0}
}

.sp-229 {
  width:60px;
  height:60px;
  color: var(--primary-color);
  --c:linear-gradient(currentColor 0 0);
  background:
    var(--c),
    var(--c),
    var(--c),
    var(--c);
  background-repeat: no-repeat;
  animation: 
    pl9-1 1.5s infinite,
    pl9-2 1.5s infinite;
}
@keyframes pl9-1 {
  0%   {background-size: 0    4px,4px 0   }
  25%  {background-size: 40px 4px,4px 0   }
  45%,
  55%  {background-size: 40px 4px,4px 42px}
  75%  {background-size: 0    4px,4px 42px}
  100% {background-size: 0    4px,4px 0   }
}
@keyframes pl9-2 {
  0%,49.9% {background-position: 0  38px               ,18px 18px,100% 18px,right 18px bottom 18px}
  50%,100% {background-position: right 20px bottom 18px,18px 100%,20px 18px,right 18px top 0      }
}


.sp-230 {
  width:40px;
  height:40px;
  color: var(--primary-color);
  display: grid;
}
.sp-230::before,
.sp-230::after {
  content: "";
  grid-area: 1/1;
  --c:linear-gradient(currentColor 0 0);
  background:
    var(--c) 0 0,
    var(--c) 100% 0,
    var(--c) 100% 100%,
    var(--c) 0 100%;
  background-repeat: no-repeat;
  animation: 
    pl10-1 2s infinite linear,
    pl10-2 2s infinite linear;
}
.sp-230::after {
  margin:10px;
  transform: scale(-1);
}

@keyframes pl10-1 {
  0%   {background-size: 0    4px,4px 0   ,0    4px,4px 0   }
  12.5%{background-size: 100% 4px,4px 0   ,0    4px,4px 0   }
  25%  {background-size: 100% 4px,4px 100%,0    4px,4px 0   }
  37.5%{background-size: 100% 4px,4px 100%,100% 4px,4px 0   }
  45%,
  55%  {background-size: 100% 4px,4px 100%,100% 4px,4px 100%}
  62.5%{background-size: 0    4px,4px 100%,100% 4px,4px 100%}
  75%  {background-size: 0    4px,4px 0   ,100% 4px,4px 100%}
  87.5%{background-size: 0    4px,4px 0   ,0    4px,4px 100%}
  100% {background-size: 0    4px,4px 0   ,0    4px,4px 0   }
}

@keyframes pl10-2 {
  0%,49.9%{background-position: 0 0   ,100% 0   ,100% 100%,0 100%}
  50%,100%{background-position: 100% 0,100% 100%,0    100%,0 0   }
}

.sp-231 {
  width:50px;
  height:50px;
  display: grid;
  color: var(--primary-color);
}

.sp-231:before,
.sp-231:after {
  content: "";
  grid-area: 1/1;
  --c1:linear-gradient(90deg,#0000 calc(100%/3),currentColor 0 calc(2*100%/3),#0000 0);
  --c2:linear-gradient( 0deg,#0000 calc(100%/3),currentColor 0 calc(2*100%/3),#0000 0);
  background:
    var(--c1),
    var(--c2),
    var(--c1),
    var(--c2);
  background-size:300% 4px,4px 300%;
  background-repeat: no-repeat;
  animation: ml1 1s infinite linear;
}
.sp-231:after {
  margin: 10px;
  transform: scaleX(-1);
  animation-delay: -.25s;
}

@keyframes ml1 {
  0%   {background-position: 50%  0,100% 100%,0    100%,0 0}
  25%  {background-position: 0    0,100% 50% ,0    100%,0 0}
  50%  {background-position: 0    0,100% 0   ,50%  100%,0 0}
  75%  {background-position: 0    0,100% 0   ,100% 100%,0 50%}
 75.01%{background-position: 100% 0,100% 0   ,100% 100%,0 50%}
  100% {background-position: 50%  0,100% 0   ,100% 100%,0 100%}
}

.sp-232 {
  width:50px;
  height:50px;
  display: grid;
  color: var(--primary-color);
}

.sp-232:before,
.sp-232:after {
  content: "";
  grid-area: 1/1;
  margin: 0 0 15px 15px;
  --c1:linear-gradient(90deg,#0000 calc(100%/3),currentColor 0 calc(2*100%/3),#0000 0);
  --c2:linear-gradient( 0deg,#0000 calc(100%/3),currentColor 0 calc(2*100%/3),#0000 0);
  background:
    var(--c1),
    var(--c2),
    var(--c1),
    var(--c2);
  background-size:300% 4px,4px 300%;
  background-repeat: no-repeat;
  animation: ml2 1s infinite linear;
}
.sp-232:after {
  margin: 15px 15px 0 0;
  transform: scale(-1,-1);
}

@keyframes ml2 {
  0%   {background-position: 50%  0,100% 100%,0    100%,0 0}
  25%  {background-position: 0    0,100% 50% ,0    100%,0 0}
  50%  {background-position: 0    0,100% 0   ,50%  100%,0 0}
  75%  {background-position: 0    0,100% 0   ,100% 100%,0 50%}
 75.01%{background-position: 100% 0,100% 0   ,100% 100%,0 50%}
  100% {background-position: 50%  0,100% 0   ,100% 100%,0 100%}
}

.sp-233 {
  width: 80px;
  height: 40px;
  display: flex;
  color: var(--primary-color);
}
.sp-233:before,
.sp-233:after {
  content: "";
  margin:0 -2px 0 0;
  flex: 1;
  --c: linear-gradient(currentColor 0 0);
  background: var(--c), var(--c), var(--c), var(--c);
  background-repeat: no-repeat;
  animation: ml3-1 1s infinite linear, ml3-2 1s infinite linear;
}
.sp-233:after {
  transform: scale(-1);
  margin:0 0 0 -2px;
}

@keyframes ml3-1 {
  0%,
  3%   {background-size: 0   4px,4px 0  ,0   4px,4px 0  }
  12.5%{background-size: 50% 4px,4px 0  ,0   4px,4px 0  }
  25%  {background-size: 50% 4px,4px 50%,0   4px,4px 0  }
  37.5%{background-size: 50% 4px,4px 50%,50% 4px,4px 0  }
  46%,
  54%  {background-size: 50% 4px,4px 50%,50% 4px,4px 50%}
  62.5%{background-size: 0   4px,4px 50%,50% 4px,4px 50%}
  75%  {background-size: 0   4px,4px 0  ,50% 4px,4px 50%}
  87.5%{background-size: 0   4px,4px 0  ,0   4px,4px 50%}
  96%,
  100% {background-size: 0   4px,4px 0  ,0   4px,4px 0  }
}

@keyframes ml3-2 {
  0%,49.9%{background-position:0              20px,50% 20px,20px 100%,100% 100%}
  50%,100%{background-position:right 20px top 20px,50% 100%,100% 100%,100% 20px}
}

.sp-234 {
  width: 60px;
  height: 30px;
  display: grid;
  color: var(--primary-color);
}
.sp-234:before,
.sp-234:after {
  content: "";
  grid-area: 1/1;
  --c: linear-gradient(currentColor 0 0);
  background: var(--c), var(--c), var(--c);
  background-repeat: no-repeat;
  animation: ml4-1 1s infinite linear, ml4-2 1s infinite linear;
}
.sp-234:after {
  transform: scale(-1);
}

@keyframes ml4-1 {
  0%,
  3%    {background-size: 0               4px,4px 0   ,0               4px}
  16.67%{background-size: calc(50% - 6px) 4px,4px 0   ,0               4px}
  33.33%{background-size: calc(50% - 6px) 4px,4px 14px,0               4px}
  46%,
  54%   {background-size: calc(50% - 6px) 4px,4px 14px,calc(50% + 6px) 4px}
  66.67%{background-size: 0               4px,4px 14px,calc(50% + 6px) 4px}
  83.33%{background-size: 0               4px,4px 0   ,calc(50% + 6px) 4px}
  96%,
  100%  {background-size: 0               4px,4px 0   ,0               4px}
}


@keyframes ml4-2 {
  0%,49.9%{background-position:0              50%,left calc(50% - 6px) bottom 13px,left  24px top 3px}
  50%,100%{background-position:right 36px top 50%,left calc(50% - 6px) top     3px,right 0    top 3px}
}

.sp-235 {
  width:60px;
  height:20px;
  display: grid;
  color: var(--primary-color);
}

.sp-235:before,
.sp-235:after {
  content: "";
  grid-area: 1/1;
  --c1:linear-gradient(90deg,#0000 calc(100%/3),currentColor 0 calc(2*100%/3),#0000 0);
  --c2:linear-gradient( 0deg,#0000 calc(100%/3),currentColor 0 calc(2*100%/3),#0000 0);
  background:
    var(--c1),
    var(--c2),
    var(--c1),
    var(--c2);
  background-size:300% 4px,4px 300%;
  background-repeat: no-repeat;
  animation: ml5 1.5s infinite;
}
.sp-235:after {
  animation-delay: -.75s;
}

@keyframes ml5 {
  0%   {background-position: 50%  0,100% 100%,0    100%,0 0}
  25%  {background-position: 0    0,100% 50% ,0    100%,0 0}
  50%  {background-position: 0    0,100% 0   ,50%  100%,0 0}
  75%  {background-position: 0    0,100% 0   ,100% 100%,0 50%}
 75.01%{background-position: 100% 0,100% 0   ,100% 100%,0 50%}
  100% {background-position: 50%  0,100% 0   ,100% 100%,0 100%}
}

.sp-236 {
  width:60px;
  height:16px;
  display: grid;
  color: var(--primary-color);
}

.sp-236:before,
.sp-236:after {
  content: "";
  grid-area: 1/1;
  --c: linear-gradient(currentColor 0 0);
  background: var(--c), var(--c), var(--c);
  background-repeat: no-repeat;
  animation: ml6-1 1.5s infinite linear, ml6-2 1.5s infinite linear;
  transform: scale(var(--s,1)) translate(3px,-3px);
}
.sp-236:after {
  --s:-1;
}

@keyframes ml6-1 {
  0%,
  3%    {background-size: 0    4px,4px 0   ,0    4px}
  16.67%{background-size: 100% 4px,4px 0   ,0    4px}
  33.33%{background-size: 100% 4px,4px 100%,0    4px}
  46%,
  54%   {background-size: 100% 4px,4px 100%,100% 4px}
  66.67%{background-size: 0    4px,4px 100%,100% 4px}
  83.33%{background-size: 0    4px,4px 0   ,100% 4px}
  96%,
  100%  {background-size: 0    4px,4px 0   ,0    4px}
}

@keyframes ml6-2 {
  0%,49.9%{background-position: 0    0,100% 0   ,100% 100%}
  50%,100%{background-position: 100% 0,100% 100%,0    100%}
}

.sp-237 {
  width:50px;
  height:50px;
  display: flex;
  color: var(--primary-color);
}

.sp-237:before,
.sp-237:after {
  content: "";
  flex: 1;
  margin:0 0 0 -2px;
  --c: linear-gradient(currentColor 0 0);
  background: 
    var(--c) 0    0, 
    var(--c) 100% 0, 
    var(--c) 100% 100%, 
    var(--c) 0    100%, 
    var(--c) 0    50%;
  background-repeat: no-repeat;
  animation: ml7 1s infinite alternate;
}
.sp-237:before {
  transform: scale(-1);
  margin:0 -2px 0 0;
}

@keyframes ml7 {
  0%,
  5%   {background-size: 0    4px,4px 0   ,0    4px,4px 0   ,0    4px}
  20%  {background-size: 100% 4px,4px 0   ,0    4px,4px 0   ,0    4px}
  40%  {background-size: 100% 4px,4px 100%,0    4px,4px 0   ,0    4px}
  60%  {background-size: 100% 4px,4px 100%,100% 4px,4px 0   ,0    4px}
  80%  {background-size: 100% 4px,4px 100%,100% 4px,4px 50% ,0    4px}
  95%,
  100% {background-size: 100% 4px,4px 100%,100% 4px,4px 50% ,100% 4px}
}

.sp-238 {
  width:60px;
  height:60px;
  padding:10px;
  display: grid;
  color: var(--primary-color);
}
.sp-238,
.sp-238:before,
.sp-238:after {
  --c: linear-gradient(currentColor 0 0);
  background:var(--c), var(--c), var(--c), var(--c);
  background-repeat: no-repeat;
  animation: ml8-1 1.5s infinite  cubic-bezier(0,0,1,1), ml8-2 1.5s infinite;
}
.sp-238:before,
.sp-238:after {
  content: "";
  grid-area: 1/1;
  animation-timing-function: cubic-bezier(0,0.2,1,1),linear;
}

.sp-238:after {
  margin: 10px;
  animation-timing-function: cubic-bezier(0,0.4,1,1),linear;
}

@keyframes ml8-1 {
  0%,
  10%   {background-size: 0    4px,4px 0 }
  40%,
  60%   {background-size: 100% 4px,4px 100%}
  90%,
  100%  {background-size: 0    4px,4px 0  }
}

@keyframes ml8-2 {
  0%,49.9%{background-position: 0    0,0    0,100% 100%,100% 100%}
  50%,100%{background-position: 100% 0,0 100%,0    100%,100% 0}
}

.sp-239 {
  width:30px;
  height:30px;
  display: grid;
  color: var(--primary-color);
}
.sp-239,
.sp-239:before,
.sp-239:after {
  --c: linear-gradient(currentColor 0 0);
  background:var(--c), var(--c), var(--c), var(--c);
  background-repeat: no-repeat;
  animation: ml9-1 1.5s infinite, ml9-2 1.5s infinite;
}
.sp-239:before,
.sp-239:after {
  content: "";
  grid-area: 1/1;
  transform: translate(calc(50% - 2px),calc(2px - 50%)) rotate(90deg);
  animation-delay: -.25s;
}
.sp-239:after {
  transform: translate(calc(2px - 50%),calc(50% - 2px)) rotate(90deg);
}


@keyframes ml9-1 {
  0%,
  10%   {background-size: 0    4px,4px 0 }
  40%,
  60%   {background-size: 100% 4px,4px 100%}
  90%,
  100%  {background-size: 0    4px,4px 0  }
}

@keyframes ml9-2 {
  0%,49.9%{background-position: 0    0,0    0,100% 100%,100% 100%}
  50%,100%{background-position: 100% 0,0 100%,0    100%,100% 0}
}


.sp-240 {
  width:25px;
  height:25px;
  display: grid;
  color: var(--primary-color);
}

.sp-240,
.sp-240:before,
.sp-240:after {
  --c: linear-gradient(currentColor 0 0);
  background:var(--c), var(--c), var(--c), var(--c);
  background-repeat: no-repeat;
  animation: ml10-1 1.5s infinite linear, ml10-2 1.5s infinite linear;
}

.sp-240:before,
.sp-240:after {
  content: "";
  grid-area: 1/1;
  transform: translate(calc(100% - 4px),calc(4px - 100%)) rotate(90deg);
}
.sp-240:after {
  transform: translate(calc(4px - 100%),calc(100% - 4px)) rotate(-90deg);
}

@keyframes ml10-1 {
  0%   {background-size: 0    4px,4px 0   ,0    4px,4px 0   }
  12.5%{background-size: 100% 4px,4px 0   ,0    4px,4px 0   }
  25%  {background-size: 100% 4px,4px 100%,0    4px,4px 0   }
  37.5%{background-size: 100% 4px,4px 100%,100% 4px,4px 0   }
  43%,
  57%  {background-size: 100% 4px,4px 100%,100% 4px,4px 100%}
  62.5%{background-size: 0    4px,4px 100%,100% 4px,4px 100%}
  75%  {background-size: 0    4px,4px 0   ,100% 4px,4px 100%}
  87.5%{background-size: 0    4px,4px 0   ,0    4px,4px 100%}
  100% {background-size: 0    4px,4px 0   ,0    4px,4px 0   }
}

@keyframes ml10-2 {
  0%,49.9%{background-position: 0 0   ,100% 0   ,100% 100%,0 100%}
  50%,100%{background-position: 100% 0,100% 100%,0    100%,0 0   }
}

.sp-241 {
  width: 40px;
  height: 40px;
   --c: linear-gradient(var(--primary-color) 0 0);
  background: 
    var(--c), 
    var(--c), 
    var(--c);
  background-size: 8px calc(50% + 8px);
  background-repeat: no-repeat;
  -webkit-mask:radial-gradient(circle closest-side,#0000 92%,var(--primary-color)) 0/8px 100%;
  animation: mdb1 .75s infinite alternate linear;
}


@keyframes mdb1 {
  0%,
  10%  {background-position: 0 100%,50% 100%,100% 100%}
  25%  {background-position: 0 50% ,50% 100%,100% 100%}
  50%  {background-position: 0 0   ,50% 50% ,100% 100%}
  75%  {background-position: 0 0   ,50% 0   ,100% 50% }
  90%
  ,100%{background-position: 0 0   ,50% 0   ,100% 0   }
}

.sp-242 {
  width: 40px;
  height: 40px;
   --c: linear-gradient(var(--primary-color) 0 0);
   --m: radial-gradient(circle closest-side,#0000 92%,var(--primary-color));
  background: 
    var(--c) 0    50%,
    var(--c) 50%  50%, 
    var(--c) 100% 50%;
  background-size: 8px calc(50% + 8px);
  background-repeat: no-repeat;
  -webkit-mask:
    var(--m),
    var(--m),
    var(--m);
  -webkit-mask-size:8px 150%;
  -webkit-mask-repeat:no-repeat;
  animation: mdb2 1s infinite alternate;
}

@keyframes mdb2 {
  0%,
  100% {-webkit-mask-position: 0 50% ,50% 50% ,100% 50% }
  20%  {-webkit-mask-position: 0 100%,50% 50% ,100% 50% }
  40%  {-webkit-mask-position: 0 0   ,50% 100%,100% 50% }
  60%  {-webkit-mask-position: 0 50% ,50% 0   ,100% 100%}
  80%  {-webkit-mask-position: 0 50% ,50% 50% ,100% 0   }
}

.sp-243 {
  width: 40px;
  height: 40px;
   --c: linear-gradient(var(--primary-color) 0 0);
   --m: radial-gradient(farthest-side,var(--primary-color) 92%,#0000);
  background: 
    var(--c), 
    var(--m),
    var(--c), 
    var(--m), 
    var(--c), 
    var(--m);
  background-size: 8px 12px,8px 8px;
  background-repeat: no-repeat;
  animation: mdb3 1s infinite alternate;
}

@keyframes mdb3 {
  0%,
  100%  {background-position: 0 0              ,0 100%           ,50% 0              ,50% 100%           ,100% 0              ,100% 100%}
  20%   {background-position: 0 calc(50% - 6px),0 calc(50% + 4px),50% 0              ,50% 100%           ,100% 0              ,100% 100%}
  40%   {background-position: 0 calc(50% - 6px),0 calc(50% + 4px),50% calc(50% - 6px),50% calc(50% + 4px),100% 0              ,100% 100%}
  60%   {background-position: 0 0              ,0 100%           ,50% calc(50% - 6px),50% calc(50% + 4px),100% calc(50% - 6px),100% calc(50% + 4px)}
  80%   {background-position: 0 0              ,0 100%           ,50% 0              ,50% 100%           ,100% calc(50% - 6px),100% calc(50% + 4px)}
}

.sp-244 {
  width: 40px;
  height: 40px;
   --c: linear-gradient(var(--primary-color) 0 0);
   --m: radial-gradient(farthest-side,var(--primary-color) 92%,#0000);
  background: 
    var(--c), 
    var(--m),
    var(--c), 
    var(--m), 
    var(--c), 
    var(--m);
  background-size: 8px 15px,8px 8px;
  background-repeat: no-repeat;
  animation: mdb4 1s infinite alternate;
}

@keyframes mdb4 {
  0%,
  10% {background-position: 0 0   ,0 100%,50% 0   ,50% 100%,100% 0   ,100% 100%}
  33% {background-position: 0 100%,0 0   ,50% 0   ,50% 100%,100% 0   ,100% 100%}
  66% {background-position: 0 100%,0 0   ,50% 100%,50% 0   ,100% 0   ,100% 100%}
  90%,
  100%{background-position: 0 100%,0 0   ,50% 100%,50% 0   ,100% 100%,100% 0   }
}

.sp-245 {
  width: 40px;
  height: 40px;
   --c: linear-gradient(var(--primary-color) 0 0);
   --m: radial-gradient(farthest-side,var(--primary-color) 92%,#0000);
  background: 
    var(--c), 
    var(--m),
    var(--c), 
    var(--m), 
    var(--c), 
    var(--m);
  background-size: 8px 15px,8px 8px;
  background-repeat: no-repeat;
  animation: mdb5 2s infinite;
}

@keyframes mdb5 {
  0%     {background-position: 0 0               ,0 100%,50% 0               ,50% 100%,100% 0               ,100% 100%}
  11.11% {background-position: 0 calc(100% - 8px),0 100%,50% 0               ,50% 100%,100% 0               ,100% 100%}
  22.22% {background-position: 0 calc(100% - 8px),0 100%,50% calc(100% - 8px),50% 100%,100% 0               ,100% 100%}
  33.33% {background-position: 0 calc(100% - 8px),0 100%,50% calc(100% - 8px),50% 100%,100% calc(100% - 8px),100% 100%}
  44.44% {background-position: 0 0               ,0 15px,50% calc(100% - 8px),50% 100%,100% calc(100% - 8px),100% 100%}
  55.55% {background-position: 0 0               ,0 15px,50% 0               ,50% 15px,100% calc(100% - 8px),100% 100%}
  66.66% {background-position: 0 0               ,0 15px,50% 0               ,50% 15px,100% 0               ,100% 15px}
  77.77% {background-position: 0 0               ,0 100%,50% 0               ,50% 15px,100% 0               ,100% 15px}
  88.88% {background-position: 0 0               ,0 100%,50% 0               ,50% 100%,100% 0               ,100% 15px}
  100%   {background-position: 0 0               ,0 100%,50% 0               ,50% 100%,100% 0               ,100% 100%}
}

.sp-246 {
  width: 40px;
  height: 40px;
   --c: linear-gradient(var(--primary-color) 0 0);
   --m: radial-gradient(farthest-side,var(--primary-color) 92%,#0000);
  background: 
    var(--c), 
    var(--m),
    var(--c), 
    var(--m), 
    var(--c), 
    var(--m);
  background-size: 8px 12px,8px 8px;
  background-repeat: no-repeat;
  animation: mdb6 1s infinite linear alternate;
}

@keyframes mdb6 {
  0%,5%   {background-position: 0 50%             ,0 0               ,50% 50%             ,50% 0               ,100% 50%             ,100% 0}
  16.67%  {background-position: 0 50%             ,0 calc(50% - 10px),50% 50%             ,50% 0               ,100% 50%             ,100% 0}
  33.33%  {background-position: 0 calc(50% + 10px),0 50%             ,50% 50%             ,50% 0               ,100% 50%             ,100% 0}
  50%     {background-position: 0 calc(50% + 10px),0 50%             ,50% 50%             ,50% calc(50% - 10px),100% 50%             ,100% 0}
  66.67%  {background-position: 0 calc(50% + 10px),0 50%             ,50% calc(50% + 10px),50% 50%             ,100% 50%             ,100% 0}
  83.33%  {background-position: 0 calc(50% + 10px),0 50%             ,50% calc(50% + 10px),50% 50%             ,100% 50%             ,100% calc(50% - 10px)}
  95%,100%{background-position: 0 calc(50% + 10px),0 50%             ,50% calc(50% + 10px),50% 50%             ,100% calc(50% + 10px),100% 50%}
}

.sp-247 {
  width: 40px;
  height: 40px;
   --c: linear-gradient(var(--primary-color) 0 0);
   --m: radial-gradient(farthest-side,var(--primary-color) 92%,#0000);
  background: 
    var(--c), 
    var(--m),
    var(--c), 
    var(--m), 
    var(--c), 
    var(--m);
  background-size: 8px 12px,8px 8px;
  background-repeat: no-repeat;
  animation: mdb7 1s infinite linear;
}

@keyframes mdb7 {
  0%,5% {background-position: 0 50%             ,0 0               ,50% 50%             ,50% 0               ,100% 50%             ,100% 0}
  12.5% {background-position: 0 50%             ,0 calc(50% - 10px),50% 50%             ,50% 0               ,100% 50%             ,100% 0}
  25%   {background-position: 0 calc(50% + 10px),0 50%             ,50% 50%             ,50% 0               ,100% 50%             ,100% 0}
  37.5% {background-position: 0 calc(50% + 10px),0 50%             ,50% 50%             ,50% calc(50% - 10px),100% 50%             ,100% 0}
  50%   {background-position: 0 50%             ,0 0               ,50% calc(50% + 10px),50% 50%             ,100% 50%             ,100% 0}
  62.5% {background-position: 0 50%             ,0 0               ,50% calc(50% + 10px),50% 50%             ,100% 50%             ,100% calc(50% - 10px)}
  75%   {background-position: 0 50%             ,0 0               ,50% 50%             ,50% 0               ,100% calc(50% + 10px),100% 50%}
  87.5% {background-position: 0 50%             ,0 0               ,50% 50%             ,50% 0               ,100% calc(50% + 10px),100% 50%}
  95%,
  100%  {background-position: 0 50%             ,0 0               ,50% 50%             ,50% 0               ,100% 50%             ,100% 0}
}


.sp-248 {
  width: 40px;
  height: 40px;
   --c: linear-gradient(var(--primary-color) 0 0);
   --m: radial-gradient(farthest-side,var(--primary-color) 92%,#0000);
  background: 
    var(--m) center               /12px 12px,
    var(--c) left 50% top    -20px/8px 16px, 
    var(--c) left 50% bottom -20px/8px 16px, 
    var(--c) top  50% left   -20px/16px 8px, 
    var(--c) top  50% right  -20px/16px 8px;
  background-repeat: no-repeat;
  animation: 
    mdb8-1 1.5s infinite,
    mdb8-2 1.5s infinite;
}

@keyframes mdb8-1 {
  30%,
  70% {background-position: 
        center,
        left 50% top    calc(50% - 8px),
        left 50% bottom calc(50% - 8px),
        top  50% left   calc(50% - 8px),
        top  50% right  calc(50% - 8px)}
}

@keyframes mdb8-2 {
  0%,40%   {transform: rotate(0)}
  60%,100% {transform: rotate(90deg)}
}

.sp-249 {
  width: 40px;
  height: 40px;
   --c: linear-gradient(var(--primary-color) 0 0);
   --m: radial-gradient(farthest-side,var(--primary-color) 90%,#0000);
  background: 
    var(--c), 
    var(--m),
    var(--c);
  background-size:16px 8px,10px 10px; 
  background-repeat: no-repeat;
  animation: 
    mdb9-1 .5s infinite alternate,
    mdb9-2 4s infinite linear .5s;
}
@keyframes mdb9-1 {
  0%,10%   {background-position: calc(50% - 8px) 50%,50% 10%,calc(50% + 8px)   50%}
  80%,100% {background-position: -20px           50%,50% 50%,calc(100% + 20px) 50%}
}
@keyframes mdb9-2 {
  0% ,24.99% {transform: rotate(0)}
  25%,49.99% {transform: rotate(90deg)}
  50%,74.99% {transform: rotate(180deg)}
  75%,100%   {transform: rotate(270deg)}
}

.sp-250 {
  width: 40px;
  height: 40px;
   --c: linear-gradient(var(--primary-color) 0 0);
   --m: radial-gradient(farthest-side,var(--primary-color) 90%,#0000);
  background: 
    var(--c), 
    var(--m),
    var(--c);
  background-size:16px 8px,10px 10px; 
  background-repeat: no-repeat;
  animation: 
    mdb10-1 1s infinite linear,
    mdb10-2 4s infinite linear -.4s;
}
@keyframes mdb10-1 {
  0%,10%   {background-position: calc(50% - 8px) 50%,50% -15px             ,calc(50% + 8px)   50%}
  33%      {background-position: -20px 50%          ,50%  50%              ,calc(100% + 20px) 50%}
  66%      {background-position: -20px 50%          ,50%  calc(100% + 15px),calc(100% + 20px) 50%}
  80%,100% {background-position: calc(50% - 8px)50% ,50%  calc(100% + 15px),calc(50% + 8px)   50%}
}
@keyframes mdb10-2 {
  0% ,24.99% {transform: rotate(0)}
  25%,49.99% {transform: rotate(90deg)}
  50%,74.99% {transform: rotate(180deg)}
  75%,100%   {transform: rotate(270deg)}
}

.sp-251 {
  width: 60px;
  height: 60px;
  display: flex;
  animation: pf1-0 2s infinite linear;
}
.sp-251::before,
.sp-251::after {
  content:"";
  flex:1;
  clip-path:polygon(100% 0,100% 100%,0 50%);
  animation: 
    pf1-1 1s infinite linear alternate,
    pf1-2 2s infinite linear -.5s;
}
.sp-251::after {
  --s:-1,-1;
}

@keyframes pf1-0 {
  0%,49.99% {transform: scaleX(1)  rotate(0deg)}
  50%,100%  {transform: scaleX(-1) rotate(-90deg)}
}

@keyframes pf1-1 {
  0%,
  5%   {transform:scale(var(--s,1)) translate(0px)   perspective(150px) rotateY(0deg) }
  33%  {transform:scale(var(--s,1)) translate(-10px) perspective(150px) rotateX(0deg) }
  66%  {transform:scale(var(--s,1)) translate(-10px) perspective(150px) rotateX(-180deg)}
  95%,
  100% {transform:scale(var(--s,1)) translate(0px)   perspective(150px) rotateX(-180deg)}
}

@keyframes pf1-2 {
  0%,49.99% {background:var(--primary-color)}
  50%,100%  {background:var(--secondary-color)}
}


.sp-252 {
  width: 60px;
  height: 60px;
  display: flex;
  animation: pf2-0 4s infinite linear .5s;
}
.sp-252::before,
.sp-252::after {
  content:"";
  flex:1;
  background:var(--primary-color);
  clip-path:polygon(100% 0,100% 100%,0 50%);
  animation: pf2-1 1s infinite linear;
}
.sp-252::after {
  transform:scale(-1);
  animation:none;
}

@keyframes pf2-0 {
  0%   ,12.49% {transform: rotate(0deg)}
  12.5%,37.49% {transform: rotate(90deg)}
  37.5%,62.49% {transform: rotate(180deg)}
  62.5%,87.49% {transform: rotate(270deg)}
  87.5%,100%   {transform: rotate(360deg)}
}

@keyframes pf2-1 {
  0%,
  5%   {transform: translate(0px)   perspective(150px) rotateY(0deg) }
  33%  {transform: translate(-10px) perspective(150px) rotateX(0deg) }
  66%  {transform: translate(-10px) perspective(150px) rotateX(-180deg)}
  95%,
  100%{transform: translate(0px)   perspective(150px) rotateX(-180deg)}
}


.sp-253 {
  width: 60px;
  height: 60px;
  display: flex;
  animation: pf3-0 4s infinite linear .5s;
}
.sp-253::before,
.sp-253::after {
  content:"";
  flex:1;
  background:var(--primary-color);
  clip-path:polygon(50% 0,100% 0,100% 100%,50% 100%,0 75%,0 25%);
  animation: pf3-1 1s infinite linear;
}
.sp-253::after {
  transform:scale(-1);
  animation:none;
}

@keyframes pf3-0 {
  0%   ,12.49% {transform: rotate(0deg)}
  12.5%,37.49% {transform: rotate(90deg)}
  37.5%,62.49% {transform: rotate(180deg)}
  62.5%,87.49% {transform: rotate(270deg)}
  87.5%,100%   {transform: rotate(360deg)}
}

@keyframes pf3-1 {
  0%,
  5%   {transform:translate(0px)   perspective(150px) rotateY(0deg) }
  33%  {transform:translate(-10px) perspective(150px) rotateX(0deg) }
  66%  {transform:translate(-10px) perspective(150px) rotateX(-180deg)}
  95%,
  100%{transform: translate(0px)   perspective(150px) rotateX(-180deg)}
}

.sp-254 {
  width: 60px;
  height: 60px;
  display: flex;
}
.sp-254::before,
.sp-254::after {
  content:"";
  flex:1;
  animation: pf4 1.5s -.25s infinite linear alternate both;
}
.sp-254::after {
  --s:-1,-1;
  animation-delay: .5s;
}


@keyframes pf4 {
  0%,
  30%  {transform:scale(var(--s,1)) translate(0px)   perspective(150px) rotateY(0deg);
        clip-path:polygon(50% 0,100% 0,100% 100%,50% 100%,0 75%,0 25%);
        background:var(--primary-color);}
  37.5%{transform:scale(var(--s,1)) translate(-10px) perspective(150px) rotateX(0deg);
        clip-path:polygon(50% 0,100% 0,100% 100%,50% 100%,0 75%,0 25%);
        background:var(--primary-color);}
  50%  {transform:scale(var(--s,1)) translate(-10px) perspective(150px) rotateX(-90deg);
        clip-path:polygon(50% 0,100% 0,100% 100%,50% 100%,0 75%,0 25%);
        background:var(--primary-color);
        border-radius: 0}
  50.01%{transform:scale(var(--s,1)) translate(-10px) perspective(150px) rotateX(-90.1deg);
         clip-path:polygon(0 0,100% 0,100% 100%,50% 100%,0 100%,0 25%);
         background:var(--secondary-color);
         border-radius: 100px 0 0 100px}
  62.5%{transform:scale(var(--s,1)) translate(-10px) perspective(150px) rotateX(-180deg);
        clip-path:polygon(0 0,100% 0,100% 100%,50% 100%,0 100%,0 25%);
        background:var(--secondary-color);
        border-radius: 100px 0 0 100px}
  70%,
  100%{transform:scale(var(--s,1)) translate(0px)   perspective(150px) rotateX(-180deg);
        clip-path:polygon(0 0,100% 0,100% 100%,50% 100%,0 100%,0 25%);
        background:var(--secondary-color);
        border-radius: 100px 0 0 100px;}
}


.sp-255 {
  width: 80px;
  height: 40px;
  display: flex;
}
.sp-255::before,
.sp-255::after {
  content:"";
  flex:1;
  clip-path:polygon(0 0,100% 0,100% 100%);
  background: var(--primary-color);
  animation: 
    pf5-1 1s infinite linear alternate,
    pf5-2 2s infinite linear -.5s;
}
.sp-255::after {
  --s:-1,-1;
}


@keyframes pf5-1 {
  0%,
  10%  {transform:scale(var(--s,1)) translate(0px)   perspective(150px) rotateY(0deg) }
  33%  {transform:scale(var(--s,1)) translate(-10px) perspective(150px) rotateX(0deg) }
  66%  {transform:scale(var(--s,1)) translate(-10px) perspective(150px) rotateX(-180deg)}
  90%,
  100% {transform:scale(var(--s,1)) translate(0px)   perspective(150px) rotateX(-180deg)}
}

@keyframes pf5-2 {
  0%,49.99% {background:var(--primary-color)}
  50%,100%  {background:var(--secondary-color)}
}


.sp-256 {
  width: 50px;
  height: 50px;
  display: flex;
  color:var(--primary-color);
  background:
    linear-gradient(currentColor 0 0) right  /51% 100%,
    linear-gradient(currentColor 0 0) bottom /100% 51%;
  background-repeat: no-repeat;
  animation: pf6-0 2s infinite linear .25s;
}
.sp-256::before{
  content:"";
  width:50%;
  height: 50%;
  background:currentColor;
  animation: pf6-1 .5s infinite linear;
}


@keyframes pf6-0 {
  0%   ,12.49% {transform: rotate(0deg)}
  12.5%,37.49% {transform: rotate(90deg)}
  37.5%,62.49% {transform: rotate(180deg)}
  62.5%,87.49% {transform: rotate(270deg)}
  87.5%,100%   {transform: rotate(360deg)}
}

@keyframes pf6-1 {
  0%      {transform: perspective(80px) rotate3d(-1,-1,0,0)}
  80%,100%{transform: perspective(80px) rotate3d(-1,-1,0,-180deg)}
}


.sp-257 {
  width: 50px;
  height: 50px;
  display: flex;
  color:var(--primary-color);
  background:
    linear-gradient(currentColor 0 0) right  /51% 100%,
    linear-gradient(currentColor 0 0) bottom /100% 51%;
  background-repeat: no-repeat;
  animation: pf7-0 2s infinite linear .25s;
}
.sp-257::before{
  content:"";
  width:50%;
  height: 50%;
  background:currentColor;
  transform-origin: 10% 10%;
  animation: pf7-1 .5s infinite linear;
}


@keyframes pf7-0 {
  0%   ,12.49% {transform: rotate(0deg)}
  12.5%,37.49% {transform: rotate(90deg)}
  37.5%,62.49% {transform: rotate(180deg)}
  62.5%,87.49% {transform: rotate(270deg)}
  87.5%,100%   {transform: rotate(360deg)}
}

@keyframes pf7-1 {
  0%      {transform: perspective(80px) rotate3d(-1,1,0, 0)}
  80%,100%{transform: perspective(80px) rotate3d(-1,1,0,-360deg)}
}


.sp-258 {
  width: 60px;
  height: 60px;
  display: flex;
  color:var(--primary-color);
  --c:#0000 calc(100% - 20px),currentColor calc(100% - 19px) 98%,#0000;
  background:
    radial-gradient(farthest-side at left,var(--c)) right /50% 100%,
    radial-gradient(farthest-side at top ,var(--c)) bottom/100% 50%;
  background-repeat: no-repeat;
  animation: pf8-0 2s infinite linear .25s;
}
.sp-258::before{
  content:"";
  width:50%;
  height: 50%;
  background:radial-gradient(farthest-side at bottom right,var(--c));
  animation: pf8-1 .5s infinite linear;
}


@keyframes pf8-0 {
  0%   ,12.49% {transform: rotate(0deg)}
  12.5%,37.49% {transform: rotate(90deg)}
  37.5%,62.49% {transform: rotate(180deg)}
  62.5%,87.49% {transform: rotate(270deg)}
  87.5%,100%   {transform: rotate(360deg)}
}

@keyframes pf8-1 {
  0%      {transform: perspective(150px) rotateY(0)      rotate(0)} 
  50%     {transform: perspective(150px) rotateY(180deg) rotate(0)} 
  80%,100%{transform: perspective(150px) rotateY(180deg) rotate(90deg)}
}

.sp-259 {
  width: 60px;
  height: 60px;
  display: grid;
}
.sp-259:before,
.sp-259:after {
  content: "";
  grid-area: 1/1;
  color:var(--primary-color);
  animation: pf9-1 1.5s infinite linear;
}
.sp-259:before {
  margin: 5px 20px;
  background:currentColor;
}
.sp-259:after {
  border: solid;
  border-width: 5px 20px;
  --s:0;
}

@keyframes pf9-1 {
  0%      {transform: perspective(100px) rotate3d(1,var(--s,1),0,0)     } 
  25%     {transform: perspective(100px) rotate3d(1,var(--s,1),0,90deg) }
  25.01%  {transform: perspective(100px) rotate3d(1,var(--s,1),0,90deg) } 
  40%,60% {transform: perspective(100px) rotate3d(1,var(--s,1),0,180deg)} 
  75%     {transform: perspective(100px) rotate3d(1,var(--s,1),0,270deg)}
  75.01%  {transform: perspective(100px) rotate3d(1,var(--s,1),0,270deg)} 
  90%,100%{transform: perspective(100px) rotate3d(1,var(--s,1),0,360deg)}
}


.sp-260 {
  width: 60px;
  height: 60px;
  display: grid;
}
.sp-260:before,
.sp-260:after {
  content: "";
  grid-area: 1/1; 
  background:var(--primary-color);
  clip-path: polygon(0 0,100% 0,100% 100%,75% 25%,0 0,0 100%,100% 100%,25% 75%,0 0);
  animation: pf10 1.5s infinite linear;
}
.sp-260:after {
  clip-path: polygon(0 0,76% 24%,100% 100%,24% 76%);
  --s:0;
}

@keyframes pf10 {
  0%      {transform: perspective(100px) rotate3d(1,var(--s,1),0,0)      } 
  25%     {transform: perspective(100px) rotate3d(1,var(--s,1),0,-90deg) }
  25.01%  {transform: perspective(100px) rotate3d(1,var(--s,1),0,-90deg) } 
  40%,60% {transform: perspective(100px) rotate3d(1,var(--s,1),0,-180deg)} 
  75%     {transform: perspective(100px) rotate3d(1,var(--s,1),0,-270deg)}
  75.01%  {transform: perspective(100px) rotate3d(1,var(--s,1),0,-270deg)} 
  90%,100%{transform: perspective(100px) rotate3d(1,var(--s,1),0,-360deg)}
}

.sp-261 {
  height: 9px;
  width: 60px;
  --c:linear-gradient(var(--primary-color) 0 0);
  background: var(--c), var(--c), var(--c), var(--c);
  background-size: 26% 3px;
  background-repeat: no-repeat;
  animation: tt1 1s infinite;
}

@keyframes tt1 {
  0%,
  70%,
  100%   {background-position: calc(0*100%/3) 50% ,calc(1*100%/3) 50% ,calc(2*100%/3) 50% ,calc(3*100%/3) 50% }
  11.67% {background-position: calc(0*100%/3) 0   ,calc(1*100%/3) 50% ,calc(2*100%/3) 50% ,calc(3*100%/3) 50% }
  23.33% {background-position: calc(0*100%/3) 100%,calc(1*100%/3) 0   ,calc(2*100%/3) 50% ,calc(3*100%/3) 50% }
  35%    {background-position: calc(0*100%/3) 50% ,calc(1*100%/3) 100%,calc(2*100%/3) 0   ,calc(3*100%/3) 50% }
  46.67% {background-position: calc(0*100%/3) 50% ,calc(1*100%/3) 50% ,calc(2*100%/3) 100%,calc(3*100%/3) 0   }
  58.34% {background-position: calc(0*100%/3) 50% ,calc(1*100%/3) 50% ,calc(2*100%/3) 50% ,calc(3*100%/3) 100%}
}

.sp-262 {
  height: 9px;
  width: 60px;
  --c:linear-gradient(var(--primary-color) 0 0);
  background: var(--c), var(--c), var(--c), var(--c);
  background-size: 26% 3px;
  background-repeat: no-repeat;
  animation: tt2 1s infinite;
}

@keyframes tt2 {
  0%,
  70%,
  100% {background-position: calc(0*100%/3) 100%,calc(1*100%/3) 100%,calc(2*100%/3) 100%,calc(3*100%/3) 100%}
  14%  {background-position: calc(0*100%/3) 0   ,calc(1*100%/3) 100%,calc(2*100%/3) 100%,calc(3*100%/3) 100%}
  28%  {background-position: calc(0*100%/3) 100%,calc(1*100%/3) 0   ,calc(2*100%/3) 100%,calc(3*100%/3) 100%}
  42%  {background-position: calc(0*100%/3) 100%,calc(1*100%/3) 100%,calc(2*100%/3) 0   ,calc(3*100%/3) 100%}
  56%  {background-position: calc(0*100%/3) 100%,calc(1*100%/3) 100%,calc(2*100%/3) 100%,calc(3*100%/3) 0   }
}

.sp-263 {
  height: 9px;
  width: 60px;
  --c:linear-gradient(var(--primary-color) 0 0);
  background: var(--c), var(--c), var(--c), var(--c);
  background-size: 26% 3px;
  background-repeat: no-repeat;
  animation: tt3 1s infinite;
}

@keyframes tt3 {
  0%,
  10%   {background-position: calc(0*100%/3) 100%,calc(1*100%/3) 100%,calc(2*100%/3) 100%,calc(3*100%/3) 100%}
  17.5% {background-position: calc(0*100%/3) 0   ,calc(1*100%/3) 100%,calc(2*100%/3) 100%,calc(3*100%/3) 100%}
  25%   {background-position: calc(0*100%/3) 0   ,calc(1*100%/3) 0   ,calc(2*100%/3) 100%,calc(3*100%/3) 100%}
  32.5% {background-position: calc(0*100%/3) 0   ,calc(1*100%/3) 0   ,calc(2*100%/3) 0   ,calc(3*100%/3) 100%}
  40%,
  60%   {background-position: calc(0*100%/3) 0   ,calc(1*100%/3) 0   ,calc(2*100%/3) 0   ,calc(3*100%/3) 0   }
  67.5% {background-position: calc(0*100%/3) 100%,calc(1*100%/3) 0   ,calc(2*100%/3) 0   ,calc(3*100%/3) 0   }
  75%   {background-position: calc(0*100%/3) 100%,calc(1*100%/3) 100%,calc(2*100%/3) 0   ,calc(3*100%/3) 0   }
  82.5% {background-position: calc(0*100%/3) 100%,calc(1*100%/3) 100%,calc(2*100%/3) 100%,calc(3*100%/3) 0   }
  90%,
  100%  {background-position: calc(0*100%/3) 100%,calc(1*100%/3) 100%,calc(2*100%/3) 100%,calc(3*100%/3) 100%}
}

.sp-264 {
  height: 15px;
  width: 60px;
  --c:repeating-linear-gradient(#0000 0 6px,var(--primary-color) 0 9px,#0000 0 15px);
  background: var(--c), var(--c), var(--c), var(--c);
  background-size: 26% 200%;
  background-repeat: no-repeat;
  animation: tt4 1.5s infinite linear;
}

@keyframes tt4 {
  0%,
  70%,
  100%  {background-position: calc(0*100%/3) 100%,calc(1*100%/3) 100%,calc(2*100%/3) 100%,calc(3*100%/3) 100%}
  17.5% {background-position: calc(0*100%/3) 0   ,calc(1*100%/3) 100%,calc(2*100%/3) 100%,calc(3*100%/3) 100%}
  35%   {background-position: calc(0*100%/3) 0   ,calc(1*100%/3) 0   ,calc(2*100%/3) 100%,calc(3*100%/3) 100%}
  52.5% {background-position: calc(0*100%/3) 0   ,calc(1*100%/3) 0   ,calc(2*100%/3) 0   ,calc(3*100%/3) 100%}
  69.99%{background-position: calc(0*100%/3) 0   ,calc(1*100%/3) 0   ,calc(2*100%/3) 0   ,calc(3*100%/3) 0   }
}

.sp-265 {
  height: 9px;
  width: 60px;
  --c:linear-gradient(var(--primary-color) 0 0);
  background: var(--c), var(--c), var(--c), var(--c);
  background-size: 26% 3px;
  background-repeat: no-repeat;
  animation: tt5 1s infinite;
}

@keyframes tt5 {
  0%,
  70%,
  100% {background-position: calc(0*100%/3) 50% ,calc(1*100%/3) 50% ,calc(2*100%/3) 50% ,calc(3*100%/3) 50% }
  12.5%{background-position: calc(0*100%/3) 0   ,calc(1*100%/3) 50% ,calc(2*100%/3) 50% ,calc(3*100%/3) 50% }
  25%  {background-position: calc(0*100%/3) 0   ,calc(1*100%/3) 100%,calc(2*100%/3) 50% ,calc(3*100%/3) 50% }
  37.5%{background-position: calc(0*100%/3) 0   ,calc(1*100%/3) 100%,calc(2*100%/3) 0   ,calc(3*100%/3) 50% }
  50%,
  60%  {background-position: calc(0*100%/3) 0   ,calc(1*100%/3) 100%,calc(2*100%/3) 0   ,calc(3*100%/3) 100%}
}

.sp-266 {
  height: 9px;
  width: 60px;
  --c:linear-gradient(var(--primary-color) 0 0);
  background: var(--c), var(--c), var(--c), var(--c);
  background-size: 26% 3px;
  background-repeat: no-repeat;
  animation: tt6 1s infinite;
}

@keyframes tt6 {
  0%,
  70%,
  100%  {background-position: calc(0*100%/3) 50%,calc(1*100%/3) 50% ,calc(2*100%/3) 50%,calc(3*100%/3) 50% }
  23.33%{background-position: calc(0*100%/3) 0  ,calc(1*100%/3) 100%,calc(2*100%/3) 0  ,calc(3*100%/3) 100%}
  46.67%{background-position: calc(1*100%/3) 0  ,calc(0*100%/3) 100%,calc(3*100%/3) 0  ,calc(2*100%/3) 100%}
  69.99%{background-position: calc(1*100%/3) 50%,calc(0*100%/3) 50% ,calc(3*100%/3) 50%,calc(2*100%/3) 50% }
}

.sp-267 {
  height: 3px;
  width: 75px;
  --c:linear-gradient(var(--primary-color) 0 0);
  background: var(--c), var(--c), var(--c), var(--c);
  background-size: 21% 100%;
  background-repeat: no-repeat;
  animation: tt7 1s infinite alternate;
}

@keyframes tt7 {
  0%,
  20%  {background-position: calc(0*100%/4) 0,calc(1*100%/4) 0,calc(2*100%/4) 0,calc(3*100%/4) 0}
  35%  {background-position: calc(0*100%/4) 0,calc(1*100%/4) 0,calc(2*100%/4) 0,calc(4*100%/4) 0}
  50%  {background-position: calc(0*100%/4) 0,calc(1*100%/4) 0,calc(3*100%/4) 0,calc(4*100%/4) 0}
  65%  {background-position: calc(0*100%/4) 0,calc(2*100%/4) 0,calc(3*100%/4) 0,calc(4*100%/4) 0}
  80%,
  100% {background-position: calc(1*100%/4) 0,calc(2*100%/4) 0,calc(3*100%/4) 0,calc(4*100%/4) 0}
}

.sp-268 {
  height: 12px;
  width: 60px;
  --c:linear-gradient(var(--primary-color) 0 0);
  background: var(--c), var(--c), var(--c), var(--c);
  background-size: 26% 3px;
  background-repeat: no-repeat;
  animation: tt8 1s infinite;
}

@keyframes tt8 {
  0%,
  70%,
  100%  {background-position: calc(0*100%/3) 50% ,calc(1*100%/3) 50%,calc(2*100%/3) 50%,calc(3*100%/3) 50%}
  23.33%{background-position: calc(0*100%/3) 100%,calc(1*100%/3) 66%,calc(2*100%/3) 33%,calc(3*100%/3) 0  }
  46.67%{background-position: calc(3*100%/3) 100%,calc(2*100%/3) 66%,calc(1*100%/3) 33%,calc(0*100%/3) 0  }
  69.99%{background-position: calc(3*100%/3) 50% ,calc(2*100%/3) 50%,calc(1*100%/3) 50%,calc(0*100%/3) 50%}
}

.sp-269 {
  height: 6px;
  width: 60px;
  --c:repeating-linear-gradient(90deg,var(--primary-color) 0 3px,#0000 0 6px);
  background: var(--c), var(--c);
  background-size: 100% 3px;
  background-repeat: no-repeat;
  animation: tt9 1s infinite;
}
@keyframes tt9 {
  0%,
  70%,
  100%   {background-position: 0   50%,3px 50% }
  23.33% {background-position: 0   0  ,3px 100%}
  46.67% {background-position: 3px 0  ,0   100%}
  69.99% {background-position: 3px 50%,0   50% }
}

.sp-270 {
  height: 3px;
  width: 60px;
  background: linear-gradient(var(--primary-color) 0 0) right/51% 100% no-repeat;
  display: flex;
  animation: tt10-0 2s linear infinite;
}
.sp-270:before,
.sp-270:after {
  content: "";
  width:15px;
  background:var(--primary-color);
  animation: tt10-1 2s linear infinite;
}
.sp-270:after {
  animation-delay: -1s;
  --s:-1;
}

@keyframes tt10-1 {
  0%,100%{transform:scaleX(var(--s,1)) rotate(0)}
  25%,75%   {transform:scaleX(var(--s,1)) rotate(180deg)}
}

@keyframes tt10-0 {
  0%,49.9%{transform:scaleX( 1)}
  50%,100%{transform:scaleX(-1)}
}

.sp-271 {
  width: 25px;
  height: 31px;
  display: flex;
  justify-content: space-between;
}
.sp-271:before,
.sp-271:after {
  content: "";
  width:12px;
  background:
    radial-gradient(farthest-side,var(--primary-color) 90%,#0000) top,
    radial-gradient(farthest-side,var(--primary-color) 90%,#0000) bottom;
  background-size: 12px 12px;
  background-repeat: no-repeat;
  transform:rotate(calc(var(--s,1)*45deg));
  animation:ld1 .5s infinite linear alternate; 
}
.sp-271:after {
  --s:-1;
}

@keyframes ld1 {
  100% {transform:rotate(calc(var(--s,1)*-45deg))}
}

.sp-272 {
  width: 69px;
  height: 12px;
  display: flex;
  justify-content: space-between;
  background:
    radial-gradient(farthest-side,var(--primary-color) 90%,#0000) calc(1*100%/3) 0,
    radial-gradient(farthest-side,var(--primary-color) 90%,#0000) calc(2*100%/3) 0;
  background-size: 12px 12px;
  background-repeat: no-repeat;
}

.sp-272:before,
.sp-272:after {
  content: "";
  width:12px;
  border-radius: 50%;
  background:var(--primary-color);
  animation:ld2 1s infinite; 
}
.sp-272:after {
  --s:-1,-1;
}

@keyframes ld2 {
  0%   {transform:scale(var(--s,1)) translate(0   ,0)}
  33%  {transform:scale(var(--s,1)) translate(0   ,16px)}
  66%  {transform:scale(var(--s,1)) translate(57px,16px)}
  100% {transform:scale(var(--s,1)) translate(57px,0)}
}

.sp-273 {
  width: 69px;
  height: 36px;
  --c:radial-gradient(farthest-side,var(--primary-color) 90%,#0000);
  background:var(--c), var(--c), var(--c), var(--c);
  background-size: 12px 12px;
  background-repeat: no-repeat;
  animation:ld3 1s infinite linear; 
}

@keyframes ld3 {
  0%     {background-position: calc(0*100%/3) 50% ,calc(1*100%/3) 50% ,calc(2*100%/3) 50% ,calc(3*100%/3) 50% }
  16.67% {background-position: calc(0*100%/3) 0   ,calc(1*100%/3) 50% ,calc(2*100%/3) 50% ,calc(3*100%/3) 50% }
  33.33% {background-position: calc(0*100%/3) 100%,calc(1*100%/3) 0   ,calc(2*100%/3) 50% ,calc(3*100%/3) 50% }
  50%    {background-position: calc(0*100%/3) 50% ,calc(1*100%/3) 100%,calc(2*100%/3) 0   ,calc(3*100%/3) 50% }
  66.67% {background-position: calc(0*100%/3) 50% ,calc(1*100%/3) 50% ,calc(2*100%/3) 100%,calc(3*100%/3) 0   }
  83.33% {background-position: calc(0*100%/3) 50% ,calc(1*100%/3) 50% ,calc(2*100%/3) 50% ,calc(3*100%/3) 100%}
  100%   {background-position: calc(0*100%/3) 50% ,calc(1*100%/3) 50% ,calc(2*100%/3) 50% ,calc(3*100%/3) 50% }
}

.sp-274 {
  width: 69px;
  height: 30px;
  --c:radial-gradient(farthest-side,var(--primary-color) 90%,#0000);
  background:var(--c), var(--c), var(--c), var(--c);
  background-size: 12px 12px;
  background-repeat: no-repeat;
  animation:ld4 1s infinite linear alternate; 
}

@keyframes ld4 {
  0%,
  5%    {background-position: calc(0*100%/3) 50% ,calc(1*100%/3) 50% ,calc(2*100%/3) 50% ,calc(3*100%/3) 50% }
  12.5% {background-position: calc(0*100%/3) 0   ,calc(1*100%/3) 50% ,calc(2*100%/3) 50% ,calc(3*100%/3) 50% }
  25%   {background-position: calc(0*100%/3) 0   ,calc(1*100%/3) 0   ,calc(2*100%/3) 50% ,calc(3*100%/3) 50% }
  37.5% {background-position: calc(0*100%/3) 100%,calc(1*100%/3) 0   ,calc(2*100%/3) 0   ,calc(3*100%/3) 50% }
  50%   {background-position: calc(0*100%/3) 100%,calc(1*100%/3) 100%,calc(2*100%/3) 0   ,calc(3*100%/3) 0   }
  62.5% {background-position: calc(0*100%/3) 50% ,calc(1*100%/3) 100%,calc(2*100%/3) 100%,calc(3*100%/3) 0   }
  75%   {background-position: calc(0*100%/3) 50% ,calc(1*100%/3) 50% ,calc(2*100%/3) 100%,calc(3*100%/3) 100%}
  87.5% {background-position: calc(0*100%/3) 50% ,calc(1*100%/3) 50% ,calc(2*100%/3) 50% ,calc(3*100%/3) 100%}
  95%,
  100%  {background-position: calc(0*100%/3) 50% ,calc(1*100%/3) 50% ,calc(2*100%/3) 50% ,calc(3*100%/3) 50% }
}

.sp-275 {
  width: 69px;
  height: 36px;
  --c0:radial-gradient(farthest-side          ,var(--primary-color) 90%,#0000);
  --c1:radial-gradient(farthest-side at top   ,var(--primary-color) 90%,#0000);
  --c2:radial-gradient(farthest-side at bottom,var(--primary-color) 90%,#0000);
  background:var(--c0), var(--c1), var(--c2), var(--c0), var(--c1), var(--c2);
  background-size: 12px 12px,12px 6px,12px 6px;
  background-repeat: no-repeat;
  animation:ld5 1s infinite; 
}

@keyframes ld5 {
  0%   {background-position:calc(0*100%/3) 50%,calc(1*100%/3) calc(50% + 3px),calc(1*100%/3) calc(50% - 3px), calc(3*100%/3) 50%,calc(2*100%/3) calc(50% + 3px),calc(2*100%/3) calc(50% - 3px)}
  33%  {background-position:calc(0*100%/3) 50%,calc(1*100%/3) 100%           ,calc(1*100%/3) 0              , calc(3*100%/3) 50%,calc(2*100%/3) 100%           ,calc(2*100%/3) 0              }
  66%  {background-position:calc(1*100%/3) 50%,calc(0*100%/3) 100%           ,calc(0*100%/3) 0              , calc(2*100%/3) 50%,calc(3*100%/3) 100%           ,calc(3*100%/3) 0              }
  90%,
  100% {background-position:calc(1*100%/3) 50%,calc(0*100%/3) calc(50% + 3px),calc(0*100%/3) calc(50% - 3px), calc(2*100%/3) 50%,calc(3*100%/3) calc(50% + 3px),calc(3*100%/3) calc(50% - 3px)}
}

.sp-276 {
  width: 32px;
  height: 32px;
  --c: radial-gradient(farthest-side,var(--primary-color) 90%,#0000);
  background: var(--c), var(--c), var(--c), var(--c);
  background-size: 12px 12px;
  background-repeat: no-repeat;
  animation: ld6 1s infinite;
}

@keyframes ld6 {
  0%  {background-position: 0 0      ,100% 0,100% 100%,0 100%}
  40%,
  50% {background-position: 100% 100%,100% 0,0    0   ,0 100%}
  90%,
  100%{background-position: 100% 100%,0 100%,0    0   ,100% 0}
}

.sp-277 {
  width: 32px;
  height: 32px;
  --c: radial-gradient(farthest-side,var(--primary-color) 90%,#0000);
  background: var(--c), var(--c), var(--c);
  background-size: 12px 12px;
  background-repeat: no-repeat;
  animation: ld7-0 .75s infinite;
  display: flex;
}
.sp-277:before {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 50%;
  transform-origin:calc(100% + 14px) 50%;
  background: var(--primary-color);
  animation: ld7-1 .75s infinite;
}

@keyframes ld7-0 {
  0%   {background-position: 0 100%,100% 0,100% 100%}
  80%,
  100% {background-position: 0 100%,100% 0,0    0   }
}

@keyframes ld7-1 {
  80%,
  100% {transform: rotate(270deg)}
}

.sp-278 {
  width: 32px;
  height: 32px;
  --c: radial-gradient(farthest-side,var(--primary-color) 90%,#0000);
  background: var(--c), var(--c);
  background-size: 12px 12px;
  background-repeat: no-repeat;
  animation: ld8-0 .75s infinite;
  display: grid;
}
.sp-278:before,
.sp-278:after {
  content: "";
  width: 12px;
  height: 12px;
  margin:0 auto auto 0;
  border-radius: 50%;
  transform-origin:calc(100% + 14px) 50%;
  background: var(--primary-color);
  animation: ld8-1 .75s infinite;
}
.sp-278:after {
  margin:auto auto 0 0;
  transform-origin:50% -14px;
}

@keyframes ld8-0 {
  0%   {background-position: 100% 0   ,100% 100%}
  80%,
  100% {background-position: 0    100%,0    0   }
}

@keyframes ld8-1 {
  80%,
  100% {transform: rotate(270deg)}
}

.sp-279 {
  width: 52px;
  height: 12px;
  --c: radial-gradient(farthest-side,var(--primary-color) 90%,#0000);
  background: 
    var(--c) left, 
    var(--c) right;
  background-size: 12px 12px;
  background-repeat: no-repeat;
  display: grid;
}
.sp-279:before,
.sp-279:after {
  content: "";
  width: 12px;
  height: 12px;
  grid-area: 1/1;
  margin: auto;
  border-radius: 50%;
  transform-origin:-12px 50%;
  background: var(--primary-color);
  animation: ld9 1s infinite linear;
}
.sp-279:after {
  transform-origin:calc(100% + 12px) 50%;
  --s:-1;
  animation-delay: -.5s;
}

@keyframes ld9 {
  58%,
  100% {transform: rotate(calc(var(--s,1)*1turn))}
}

.sp-280 {
  width: 52px;
  height: 12px;
  --c: radial-gradient(farthest-side,var(--primary-color) 90%,#0000);
  background: 
    var(--c) left, 
    var(--c) right;
  background-size: 12px 12px;
  background-repeat: no-repeat;
  display: flex;
}
.sp-280:before{
  content: "";
  flex:1;
  background: inherit;
  animation: ld10 2s infinite;
}
@keyframes ld10 {
  0%    {transform: translate( 20px) rotate(0)     }
  16.67%{transform: translate( 20px) rotate(90deg) }
  33.33%{transform: translate(-20px) rotate(90deg) }
  50%   {transform: translate(-20px) rotate(180deg)}
  66.67%{transform: translate(-20px) rotate(270deg)}
  83.33%{transform: translate( 20px) rotate(270deg)}
  100%  {transform: translate( 20px) rotate(360deg)}
}

.sp-281 {
  --c:linear-gradient(var(--primary-color) 0 0);
  background: 
    var(--c) 0 0,
    var(--c) 0 50%,
    var(--c) 0 100%,
    var(--c) 50% 0,
    var(--c) 50% 50%,
    var(--c) 50% 100%,
    var(--c) 100% 0,
    var(--c) 100% 50%,
    var(--c) 100% 100%;
  background-size: 16px 16px;
  background-repeat: no-repeat;
  animation: ush1 .5s infinite alternate;
}

@keyframes ush1 {
  0%,20%  {width:45px;height: 45px}
  90%,100%{width:65px;height: 65px}
}

.sp-282 {
  --c:linear-gradient(var(--primary-color) 0 0);
  background: 
    var(--c),
    var(--c),
    var(--c),
    var(--c),
    var(--c),
    var(--c),
    var(--c),
    var(--c),
    var(--c);
  background-size: 16px 16px;
  background-repeat: no-repeat;
  animation: 
    ush2-1 1s infinite,
    ush2-2 1s infinite;
}

@keyframes ush2-1 {
  0%,100% {width:45px;height: 45px}
  35%,65% {width:65px;height: 65px}
}

@keyframes ush2-2 {
  0%,40%  {background-position: 0 0,0 50%, 0 100%,50% 100%,100% 100%,100% 50%,100% 0,50% 0,  50% 50% }
  60%,100%{background-position: 0 50%, 0 100%,50% 100%,100% 100%,100% 50%,100% 0,50% 0,0 0,  50% 50% }
}


.sp-283 {
  height: 45px;
  --c:linear-gradient(var(--primary-color) 0 0);
  background: 
    var(--c) left,
    var(--c) center,
    var(--c) right;
  background-size: 16px 100%;
  background-repeat: no-repeat;
  animation: 
    ush3-1 1.5s infinite,
    ush3-2 1.5s infinite;
}

@keyframes ush3-1 {
  0%,100% {width:45px}
  35%,65% {width:65px}
}

@keyframes ush3-2 {
  0%,40%  {transform: rotate(0) }
  60%,100%{transform: rotate(90deg) }
}


.sp-284 {
  height: 60px;
  width: 60px;
  --c:linear-gradient(var(--primary-color) 0 0);
  background: 
    var(--c),var(--c),
    var(--c),var(--c),
    var(--c),var(--c);
  background-repeat: no-repeat;
  animation: 
    ush4-1 2s infinite alternate,
    ush4-2 2s infinite alternate;
}

@keyframes ush4-1 {
  0%,20%   {background-size:20px 20px}
  40%,60%  {background-size:100% 20px}
  80%,100% {background-size:20px 20px}
}

@keyframes ush4-2 {
  0%,40%  {background-position: 0   0,100% 0, 50% 50%, 50% 50%, 0   100%,100% 100%}
  60%,100%{background-position: 50% 0,50%  0, 0   50%,100% 50%, 50% 100%,50%  100%}
}


.sp-285 {
  width:50px;
  height: 50px;
  display: grid;
}
.sp-285:before,
.sp-285:after {
  content: "";
  grid-area: 1/1;
  border-radius: 50%;
  background: var(--primary-color);
  -webkit-mask:repeating-linear-gradient(#000 0 5px,#0000 0 10px);
  animation: ush5 1.5s infinite;
}
.sp-285:after {
  -webkit-mask:repeating-linear-gradient(#0000 0 5px,#000 0 10px);
  --s:-1;
}

@keyframes ush5 {
  0%,
  10% {transform: translate(0) rotate(0)}
  35% {transform: translate(calc(var(--s,1)*50%)) rotate(0)}
  66% {transform: translate(calc(var(--s,1)*50%)) rotate(calc(var(--s,1)*180deg))}
  90%,
  100% {transform: translate(0) rotate(calc(var(--s,1)*180deg))}
}

.sp-286 {
  width:50px;
  height: 50px;
  display: grid;
}
.sp-286:before,
.sp-286:after {
  content: "";
  grid-area: 1/1;
  border-radius: 50%;
  background: var(--primary-color);
  -webkit-mask:repeating-linear-gradient(#000 0 10px,#0000 0 20px);
}
.sp-286:after {
  -webkit-mask:repeating-linear-gradient(#0000 0 10px,#000 0 20px);
  animation: ush6 1.5s infinite;
}

@keyframes ush6 {
  0%,
  10%  {transform: rotate(0)      translate(0)}
  35%  {transform: rotate(0)      translate(100%)}
  66%  {transform: rotate(180deg) translate(100%)}
  90%,
  100% {transform: rotate(180deg) translate(0) }
}

.sp-287 {
  width:60px;
  height: calc(0.866*60px);
  color: var(--primary-color);
  --c1:conic-gradient(from 149deg at top   ,#0000 ,currentColor 2deg 59deg,#0000 61deg);
  --c2:conic-gradient(from -31deg at bottom,#0000 ,currentColor 1deg 61deg,#0000 63deg);
  background:
    var(--c1) top,
    var(--c1) bottom right,
    var(--c2) bottom,
    var(--c1) bottom left;
  background-size: 50% 50%;
  background-repeat: no-repeat;
  animation: ush7 1s infinite;
}

@keyframes ush7 {
  80%,100%{background-position: bottom right,bottom left,bottom,top}
}


.sp-288 {
  width: 60px;
  height: calc(0.866*60px);
  color:var(--primary-color);
  display: grid;
  animation: usp8-0 6s infinite linear;
}

.sp-288:before,
.sp-288:after {
  content: "";
  grid-area: 1/1;
}
.sp-288:before {
  clip-path: polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);
  background: conic-gradient(from -30deg,#0000 60deg,currentColor 0);
}
.sp-288:after {
  background: conic-gradient(from -30deg,currentColor 60deg,#0000 0);
  animation: usp8 0.5s infinite alternate;
}

@keyframes usp8-0 {
  0%,16.66%     {transform: rotate(0deg)}
  16.67%,33.33% {transform: rotate(60deg)}
  33.34%,50%    {transform: rotate(120deg)}
  50.1%,66.66%  {transform: rotate(180deg)}
  66.67%,83.33% {transform: rotate(240deg)}
  83.34%,100%   {transform: rotate(300deg)}
}

@keyframes usp8 {
  100%  {transform: translateY(-20px)}
}

.sp-289 {
  width:50px;
  height: 50px;
  color: var(--primary-color);
  background: currentColor;
  border-radius: 50%;
  position: relative;
}
.sp-289:before {
  content: "";
  position: absolute;
  background:
    radial-gradient(farthest-side at bottom right,#0000 94%,currentColor 96%) 0    0   ,
    radial-gradient(farthest-side at bottom left ,#0000 94%,currentColor 96%) 100% 0   ,
    radial-gradient(farthest-side at top    left ,#0000 94%,currentColor 96%) 100% 100%,
    radial-gradient(farthest-side at top    right,#0000 94%,currentColor 96%) 0    100%;
  background-size: 25px 25px;
  background-repeat: no-repeat;
  animation: 
    ush9-1 1s infinite,
    ush9-2 1s infinite;
}

@keyframes ush9-1 {
  0%,10%,90%,100% {inset:0}
  40%,60% {inset:-10px}
}

@keyframes ush9-2 {
  0%,40%  {transform: rotate(0)}
  60%,100%{transform: rotate(90deg)}
}



.sp-290 {
  width:50px;
  height: 50px;
  color: var(--primary-color);
  position: relative;
}
.sp-290:before,
.sp-290:after {
  content: "";
  position: absolute;
  inset:0;
  background-size: 25px 25px;
  background-position: 0 0,100% 0,100% 100%,0 100%;
  background-repeat: no-repeat;
}
.sp-290:before {
  background-image:
    radial-gradient(farthest-side at top    left ,currentColor 96%,#0000),
    radial-gradient(farthest-side at top    right,currentColor 96%,#0000),
    radial-gradient(farthest-side at bottom right,currentColor 96%,#0000),
    radial-gradient(farthest-side at bottom left ,currentColor 96%,#0000);
  animation: ush10-1 1s infinite;
}

.sp-290:after {
  background-image: 
    radial-gradient(farthest-side at top    left ,#0000 94%,currentColor 96%),
    radial-gradient(farthest-side at top    right,#0000 94%,currentColor 96%),
    radial-gradient(farthest-side at bottom right,#0000 94%,currentColor 96%),
    radial-gradient(farthest-side at bottom left ,#0000 94%,currentColor 96%);
  animation: ush10-2 1s infinite;
}

@keyframes ush10-1 {
  0%,10%,90%,100% {inset:0}
  40%,60% {inset:-10px}
}

@keyframes ush10-2 {
  0%,40%  {transform: rotate(0)}
  60%,100%{transform: rotate(90deg)}
}
.sp-291 {
  width: 70px;
  height: 26px;
  background:var(--primary-color);
  border-radius: 50px;
  --c:radial-gradient(farthest-side,#000 92%,#0000);
  --s:18px 18px;
  -webkit-mask:
    var(--c) left  4px top 50%,
    var(--c) center,
    var(--c) right 4px top 50%,
    linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  -webkit-mask-repeat:no-repeat;
  animation: cut1 1.5s infinite;
}

@keyframes cut1 {
  0%    {-webkit-mask-size:0    0  ,0    0  ,0    0  ,auto}
  16.67%{-webkit-mask-size:var(--s),0    0  ,0    0  ,auto}
  33.33%{-webkit-mask-size:var(--s),var(--s),0    0  ,auto}
  50%   {-webkit-mask-size:var(--s),var(--s),var(--s),auto}
  66.67%{-webkit-mask-size:0    0  ,var(--s),var(--s),auto}
  83.33%{-webkit-mask-size:0    0  ,0    0  ,var(--s),auto}
  100%  {-webkit-mask-size:0    0  ,0    0  ,0    0  ,auto}
}

.sp-292 {
  width: 70px;
  height: 26px;
  background:var(--primary-color);
  --c:linear-gradient(#000 0 0);
  --s:18px 18px;
  -webkit-mask:
    var(--c) left  4px top 50%,
    var(--c) center,
    var(--c) right 4px top 50%,
    linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  -webkit-mask-repeat:no-repeat;
  animation: cut2 1.5s infinite;
}

@keyframes cut2 {
  0%    {-webkit-mask-size:0    0  ,0    0  ,0    0  ,auto}
  16.67%{-webkit-mask-size:var(--s),0    0  ,0    0  ,auto}
  33.33%{-webkit-mask-size:var(--s),var(--s),0    0  ,auto}
  50%   {-webkit-mask-size:var(--s),var(--s),var(--s),auto}
  66.67%{-webkit-mask-size:0    0  ,var(--s),var(--s),auto}
  83.33%{-webkit-mask-size:0    0  ,0    0  ,var(--s),auto}
  100%  {-webkit-mask-size:0    0  ,0    0  ,0    0  ,auto}
}

.sp-293 {
  width: 78px;
  height: calc(27px*0.866 + 8px);
  background:var(--primary-color);
  --c1:conic-gradient(from 150deg at top   ,#000 60deg,#0000 0);
  --c2:conic-gradient(from -30deg at bottom,#000 60deg,#0000 0);
  --s:27px calc(27px*0.866);
  clip-path: polygon(18.1px 0,calc(100% - 18.1px) 0,100% 100%,0 100%);
  -webkit-mask:
    var(--c1) left  8px top 50%,
    var(--c2) center,
    var(--c1) right 8px top 50%,
    linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  -webkit-mask-repeat:no-repeat;
  animation: cut3 1.5s infinite;
}

@keyframes cut3 {
  0%    {-webkit-mask-size:0    0  ,0    0  ,0    0  ,auto}
  16.67%{-webkit-mask-size:var(--s),0    0  ,0    0  ,auto}
  33.33%{-webkit-mask-size:var(--s),var(--s),0    0  ,auto}
  50%   {-webkit-mask-size:var(--s),var(--s),var(--s),auto}
  66.67%{-webkit-mask-size:0    0  ,var(--s),var(--s),auto}
  83.33%{-webkit-mask-size:0    0  ,0    0  ,var(--s),auto}
  100%  {-webkit-mask-size:0    0  ,0    0  ,0    0  ,auto}
}

.sp-294 {
  width: 48px;
  height: 48px;
  background:var(--primary-color);
  border-radius: 9px;
  --c:radial-gradient(farthest-side,#000 92%,#0000);
  --s:18px 18px;
  -webkit-mask:
    var(--c) left  4px top    4px,
    var(--c) right 4px top    4px,
    var(--c) right 4px bottom 4px,
    var(--c) left  4px bottom 4px,
    linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  -webkit-mask-repeat:no-repeat;
  animation: cut4 1.5s infinite;
}

@keyframes cut4 {
  0%    {-webkit-mask-size:0    0  ,0    0  ,0    0  ,0    0  ,auto}
  12.5% {-webkit-mask-size:var(--s),0    0  ,0    0  ,0    0  ,auto}
  25%   {-webkit-mask-size:var(--s),var(--s),0    0  ,0    0  ,auto}
  37.5% {-webkit-mask-size:var(--s),var(--s),var(--s),0    0  ,auto}
  50%   {-webkit-mask-size:var(--s),var(--s),var(--s),var(--s),auto}
  62.5% {-webkit-mask-size:0    0  ,var(--s),var(--s),var(--s),auto}
  75%   {-webkit-mask-size:0    0  ,0    0  ,var(--s),var(--s),auto}
  87.5% {-webkit-mask-size:0    0  ,0    0  ,0   0   ,var(--s),auto}
  100%  {-webkit-mask-size:0    0  ,0    0  ,0   0   ,0   0   ,auto}
}


.sp-295 {
  width: 48px;
  height: 48px;
  background:var(--primary-color);
  --c:linear-gradient(#000 0 0);
  --s:18px 18px;
  -webkit-mask:
    var(--c) left  4px top    4px,
    var(--c) right 4px top    4px,
    var(--c) right 4px bottom 4px,
    var(--c) left  4px bottom 4px,
    linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  -webkit-mask-repeat:no-repeat;
  animation: cut5 1.5s infinite;
}

@keyframes cut5 {
  0%    {-webkit-mask-size:0    0  ,0    0  ,0    0  ,0    0  ,auto}
  12.5% {-webkit-mask-size:var(--s),0    0  ,0    0  ,0    0  ,auto}
  25%   {-webkit-mask-size:var(--s),var(--s),0    0  ,0    0  ,auto}
  37.5% {-webkit-mask-size:var(--s),var(--s),var(--s),0    0  ,auto}
  50%   {-webkit-mask-size:var(--s),var(--s),var(--s),var(--s),auto}
  62.5% {-webkit-mask-size:0    0  ,var(--s),var(--s),var(--s),auto}
  75%   {-webkit-mask-size:0    0  ,0    0  ,var(--s),var(--s),auto}
  87.5% {-webkit-mask-size:0    0  ,0    0  ,0   0   ,var(--s),auto}
  100%  {-webkit-mask-size:0    0  ,0    0  ,0   0   ,0   0   ,auto}
}


.sp-296 {
  width: 74px;
  height: calc(27px*0.866 + 6px);
  display: grid;
}
.sp-296:before,
.sp-296:after {
  content: "";
  grid-area: 1/1;
  background:var(--primary-color);
  --c1:conic-gradient(from 150deg at top   ,#000 60deg,#0000 0);
  --c2:conic-gradient(from -30deg at bottom,#000 60deg,#0000 0);
  --s:27px calc(27px*0.866);
  clip-path: polygon(17px 0,calc(100% - 17px) 0,100% 100%,0 100%);
  -webkit-mask:
    var(--c1) left  6px top 4px,
    var(--c2) center,
    var(--c1) right 6px top 4px,
    linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  -webkit-mask-repeat:no-repeat;
  animation: cut6 2s infinite both;
}
.sp-296:after {
  transform: rotate(180deg);
  transform-origin: 50% 99%;
  animation-delay: 0.5s;
}

@keyframes cut6 {
  0%    {-webkit-mask-size:0    0  ,0    0  ,0    0  ,auto}
  8.33% {-webkit-mask-size:var(--s),0    0  ,0    0  ,auto}
  16.67%{-webkit-mask-size:var(--s),var(--s),0    0  ,auto}
  25%,
  50%   {-webkit-mask-size:var(--s),var(--s),var(--s),auto}
  58.33%{-webkit-mask-size:0    0  ,var(--s),var(--s),auto}
  66.67%{-webkit-mask-size:0    0  ,0    0  ,var(--s),auto}
  75%,
  100%  {-webkit-mask-size:0    0  ,0    0  ,0    0  ,auto}
}

.sp-297 {
  width: 48px;
  height: 48px;
  background:var(--primary-color);
  border-radius: 50%;
  --c:linear-gradient(#000 0 0);
  --s:15px 15px;
  -webkit-mask:
    var(--c) top,
    var(--c) right,
    var(--c) bottom,
    var(--c) left,
    linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  -webkit-mask-repeat:no-repeat;
  animation: cut7 1.5s infinite;
}

@keyframes cut7 {
  0%    {-webkit-mask-size:0    0  ,0    0  ,0    0  ,0    0  ,auto}
  12.5% {-webkit-mask-size:var(--s),0    0  ,0    0  ,0    0  ,auto}
  25%   {-webkit-mask-size:var(--s),var(--s),0    0  ,0    0  ,auto}
  37.5% {-webkit-mask-size:var(--s),var(--s),var(--s),0    0  ,auto}
  45%,
  55%   {-webkit-mask-size:var(--s),var(--s),var(--s),var(--s),auto}
  62.5% {-webkit-mask-size:0    0  ,var(--s),var(--s),var(--s),auto}
  75%   {-webkit-mask-size:0    0  ,0    0  ,var(--s),var(--s),auto}
  87.5% {-webkit-mask-size:0    0  ,0    0  ,0   0   ,var(--s),auto}
  100%  {-webkit-mask-size:0    0  ,0    0  ,0   0   ,0   0   ,auto}
}

.sp-298 {
  width: 48px;
  height: 48px;
  background:var(--primary-color);
  --c:radial-gradient(farthest-side,#000 92%,#0000);
  --s:20px 20px;
  -webkit-mask:
    var(--c) top    -8px left 50%,
    var(--c) right  -8px top  50%,
    var(--c) bottom -8px left 50%,
    var(--c) left   -8px top  50%,
    linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  -webkit-mask-repeat:no-repeat;
  animation: cut8 1.5s infinite;
}

@keyframes cut8 {
  0%    {-webkit-mask-size:0    0  ,0    0  ,0    0  ,0    0  ,auto}
  12.5% {-webkit-mask-size:var(--s),0    0  ,0    0  ,0    0  ,auto}
  25%   {-webkit-mask-size:var(--s),var(--s),0    0  ,0    0  ,auto}
  37.5% {-webkit-mask-size:var(--s),var(--s),var(--s),0    0  ,auto}
  45%,
  55%   {-webkit-mask-size:var(--s),var(--s),var(--s),var(--s),auto}
  62.5% {-webkit-mask-size:0    0  ,var(--s),var(--s),var(--s),auto}
  75%   {-webkit-mask-size:0    0  ,0    0  ,var(--s),var(--s),auto}
  87.5% {-webkit-mask-size:0    0  ,0    0  ,0   0   ,var(--s),auto}
  100%  {-webkit-mask-size:0    0  ,0    0  ,0   0   ,0   0   ,auto}
}

.sp-299 {
  width: 50px;
  height: calc(50px*0.866);
  background:var(--primary-color);
  clip-path: polygon(50% 0,100% 100%,0 100%);
  --c:at 50% 66%,#000 60deg,#0000 0;
  -webkit-mask:
    conic-gradient(from  30deg var(--c)) right,
    conic-gradient(from 150deg var(--c)) bottom,
    conic-gradient(from -90deg var(--c)) left,
    linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  -webkit-mask-repeat:no-repeat;
  animation: cut9 1.5s infinite;
}

@keyframes cut9 {
  0%     {-webkit-mask-size:0    0   ,0    0   ,0    0   ,auto}
  13.33% {-webkit-mask-size:100% 100%,0    0   ,0    0   ,auto}
  26.67% {-webkit-mask-size:100% 100%,100% 100%,0    0   ,auto}
  40%,
  60%    {-webkit-mask-size:100% 100%,100% 100%,100% 100%,auto}
  73.33% {-webkit-mask-size:0    0   ,100% 100%,100% 100%,auto}
  86.67% {-webkit-mask-size:0    0   ,0    0   ,100% 100%,auto}
  100%   {-webkit-mask-size:0    0   ,0    0   ,0    0   ,auto}
}

.sp-300 {
  width: 70px;
  height: 70px;
  background:var(--primary-color);
  border-radius: 50px;
  -webkit-mask:
    radial-gradient(circle 31px at 50% calc(100% + 13px),#000 95%,#0000) top 4px left 50%,
    radial-gradient(circle 31px,#000 95%,#0000) center,
    radial-gradient(circle 31px at 50% -13px,#000 95%,#0000) bottom 4px left 50%,
    linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  -webkit-mask-repeat:no-repeat;
  animation: cut10 1.5s infinite;
}

@keyframes cut10 {
  0%    {-webkit-mask-size:0    18px,0    18px,0    18px,auto}
  16.67%{-webkit-mask-size:100% 18px,0    18px,0    18px,auto}
  33.33%{-webkit-mask-size:100% 18px,100% 18px,0    18px,auto}
  50%   {-webkit-mask-size:100% 18px,100% 18px,100% 18px,auto}
  66.67%{-webkit-mask-size:0    18px,100% 18px,100% 18px,auto}
  83.33%{-webkit-mask-size:0    18px,0    18px,100% 18px,auto}
  100%  {-webkit-mask-size:0    18px,0    18px,0    18px,auto}
}
.sp-301 {
  width:100px;
  height:30px;
  display: flex;
}
.sp-301:before {
  content: "";
  background: var(--primary-color);
  width:15px;
  clip-path: polygon(0 10px,calc(100% - 15px) 10px,calc(100% - 15px) 0,100% 50%,calc(100% - 15px) 100%,calc(100% - 15px) calc(100% - 10px),0 calc(100% - 10px));
  animation: aq1 1.5s infinite linear;
}
@keyframes aq1 {
  90%,100%{flex-grow: 1}
}

.sp-302 {
  width:100px;
  height:30px;
  display: flex;
  justify-content: center;
}
.sp-302:before,
.sp-302:after {
  content: "";
  background: var(--primary-color);
  width:15px;
  clip-path: polygon(0 10px,calc(100% - 15px) 10px,calc(100% - 15px) 0,100% 50%,calc(100% - 15px) 100%,calc(100% - 15px) calc(100% - 10px),0 calc(100% - 10px));
  animation: aq2 1s infinite linear;
}

.sp-302:before {
  transform: scaleX(-1);
}
@keyframes aq2 {
  90%,100%{flex-grow: .5}
}


.sp-303 {
  width:100px;
  height:30px;
  display: flex;
}
.sp-303:before,
.sp-303:after {
  content: "";
  flex: 1;
  margin: 0 5px;
  background: var(--primary-color);
  clip-path: polygon(0 10px,calc(100% - 15px) 10px,calc(100% - 15px) 0,100% 50%,calc(100% - 15px) 100%,calc(100% - 15px) calc(100% - 10px),0 calc(100% - 10px));
  animation: aq3 .5s infinite alternate;
}

.sp-303:after {
  --s:-1;
}
@keyframes aq3 {
  0%  {transform: scaleX(var(--s,1)) translate(-4px)}
  100%{transform: scaleX(var(--s,1)) translate( 4px)}
}

.sp-304 {
  width:40px;
  height:30px;
  display:grid;
}
.sp-304:before,
.sp-304:after {
  content: "";
  grid-area: 1/1;
  background: var(--primary-color);
  clip-path: polygon(0 10px,calc(100% - 15px) 10px,calc(100% - 15px) 0,100% 50%,calc(100% - 15px) 100%,calc(100% - 15px) calc(100% - 10px),0 calc(100% - 10px));
  animation: aq4 .5s infinite alternate;
}

.sp-304:after {
  --s:-1;
}
@keyframes aq4 {
  0%  {transform: scale(var(--s,1)) translate(12px,-6px) translate(4px)}
  100%{transform: scale(var(--s,1)) translate(12px,-6px) translate(-4px)}
}

.sp-305 {
  width:50px;
  height:30px;
  display: grid;
  overflow: hidden;
}
.sp-305:before,
.sp-305:after {
  content: "";
  grid-area: 1/1;
  background: var(--primary-color);
  clip-path: polygon(0 10px,calc(100% - 15px) 10px,calc(100% - 15px) 0,100% 50%,calc(100% - 15px) 100%,calc(100% - 15px) calc(100% - 10px),0 calc(100% - 10px));
  animation: aq5 1s infinite;
  transform: translate(calc(0% + var(--s,0%)));
}

.sp-305:after {
  --s:-100%;
}

@keyframes aq5 {
  80%,100%{transform: translate(calc(100% + var(--s,0%)))}
}

.sp-306 {
  width:50px;
  height:60px;
  display: grid;
}
.sp-306:before,
.sp-306:after {
  content: "";
  background:
    linear-gradient(90deg,var(--primary-color) calc(100% - 15px),#0000 0) 0 50%/100% 10px,
    conic-gradient(from -136deg at 15px 50%,#0000 ,var(--primary-color) 1deg 90deg,#0000 91deg) 35px 0/100% 100%;
  background-repeat: repeat-x;
  animation: aq6 1s infinite;
}
.sp-306:after {
  transform: scaleX(-1);
}

@keyframes aq6 {
  80%,100%{background-position: 50px 50%,85px 0}
}

.sp-307 {
  width:110px;
  height:30px;
  display: flex;
  background: 
    linear-gradient(var(--primary-color) 0 0) left /30px 10px,
    linear-gradient(var(--primary-color) 0 0) right/30px 10px,
    conic-gradient(from -136deg at             15px  50%,#0000 ,var(--primary-color) 1deg 90deg,#0000 91deg) 30px              0/100% 100%,
    conic-gradient(from   44deg at calc(100% - 15px) 50%,#0000 ,var(--primary-color) 1deg 90deg,#0000 91deg) calc(100% - 30px) 0/100% 100%;
  background-repeat: no-repeat;
  animation: aq7 .5s infinite alternate;
}
.sp-307:before {
  content: "";
  flex: 1;
  background: inherit;
  transform: rotate(90deg);
}

@keyframes aq7 {
  90%,100%{width:93px}
}

.sp-308 {
  width:30px;
  height:30px;
  display: flex;
  background: 
    linear-gradient(var(--primary-color) 0 0) center/calc(100% - 30px) 10px,
    conic-gradient(from -136deg at right,#0000 ,var(--primary-color) 1deg 90deg,#0000 91deg) right/15px 100%,
    conic-gradient(from   44deg at left ,#0000 ,var(--primary-color) 1deg 90deg,#0000 91deg) left /15px 100%;
  background-repeat: no-repeat;
  animation: aq8 .5s infinite alternate;
}
.sp-308:before {
  content: "";
  flex: 1;
  background: inherit;
  transform: rotate(90deg);
}

@keyframes aq8 {
  90%,100%{width:80px}
}

.sp-309 {
  width:60px;
  height:30px;
  display: flex;
  background: 
    linear-gradient(var(--primary-color) 0 0) center/calc(100% - 30px) 10px,
    conic-gradient(from -136deg at right,#0000 ,var(--primary-color) 1deg 90deg,#0000 91deg) right/15px 100%,
    conic-gradient(from   44deg at left ,#0000 ,var(--primary-color) 1deg 90deg,#0000 91deg) left /15px 100%;
  background-repeat: no-repeat;
  animation: aq9 .5s infinite linear alternate;
}

@keyframes aq9 {
  0%   {transform: translate(-30px)}
  100% {transform: translate( 30px)}
}

.sp-310 {
  width:30px;
  height:60px;
  padding-top: 60px;
  display: grid;
  background: 
    linear-gradient(var(--primary-color) 0 0) bottom/10px calc(100% - 15px),
    conic-gradient(from 134deg at top,#0000 ,var(--primary-color) 1deg 90deg,#0000 91deg) top/100% 15px;
  background-origin: content-box;
  background-repeat: no-repeat;
  animation: aq10-0 2s infinite;
}
.sp-310:before,
.sp-310:after {
  content: "";
  grid-area: 1/1;
  background:inherit;
  background-size: 10px calc(100% - 25px),100% 25px;
  animation: aq10-1 2s infinite;
}
.sp-310:after {
  background-size: 10px calc(100% - 30px),100% 30px;
  animation: aq10-2 2s infinite;
}
@keyframes aq10-0 {
  25%,100% {padding-top:0px}
}

@keyframes aq10-1 {
  0%,25%   {margin:60px -10px 0}
  50%,100% {margin:8px  -10px 0}
}
@keyframes aq10-2 {
  0%,50%   {margin:60px -15px 0}
  75%,100% {margin:20px -15px 0}
}