:root {
        --loader-size: 40px;
      }
      @media screen and (max-width: 1024px) {
        :root {
          --loader-size: 30px;
        }
      }
    @keyframes rotate {
        0% {
          transform: rotate(0);
        }
        100% {
          transform: rotate(360deg);
        }
      }
      @keyframes rotate-0 {
        0%,
        20% {
          transform: rotate(0);
        }
        40%,
        60% {
          transform: rotate(180deg);
        }
        100%,
        80% {
          transform: rotate(360deg);
        }
      }
      @keyframes rotate-1 {
        0%,
        20% {
          transform: rotate(20deg);
        }
        40%,
        60% {
          transform: rotate(200deg);
        }
        100%,
        80% {
          transform: rotate(380deg);
        }
      }
      @keyframes rotate-2 {
        0%,
        20% {
          transform: rotate(40deg);
        }
        40%,
        60% {
          transform: rotate(220deg);
        }
        100%,
        80% {
          transform: rotate(400deg);
        }
      }
      @keyframes rotate-3 {
        0%,
        20% {
          transform: rotate(60deg);
        }
        40%,
        60% {
          transform: rotate(240deg);
        }
        100%,
        80% {
          transform: rotate(420deg);
        }
      }

      @keyframes rotate-4 {
        0%,
        20% {
          transform: rotate(80deg);
        }
        40%,
        60% {
          transform: rotate(260deg);
        }
        100%,
        80% {
          transform: rotate(440deg);
        }
      }

      @keyframes rotate-5 {
        0%,
        20% {
          transform: rotate(100deg);
        }
        40%,
        60% {
          transform: rotate(280deg);
        }
        100%,
        80% {
          transform: rotate(460deg);
        }
      }
      @keyframes opacity {
        from {
          opacity: 1;
        }
        to {
          opacity: 0;
        }
      }
      
        .loader {
        position: relative;
        width: var(--loader-size);
        height: var(--loader-size);
        border-radius: 50%;
        animation: 4s linear 1s normal none infinite running;
        animation-name: rotate;
        margin-bottom: calc(var(--loader-size) / 2);
      }
      .loader span::after {
        position: absolute;
        width: calc(var(--loader-size) / 8);
        height: calc(var(--loader-size) / 8);
        border-radius: 50%;
        background-color: #fff;
        content: "";
        display: block;
        transform-origin: calc(var(--loader-size) / 2)
        calc(var(--loader-size) / 2);
        animation-duration: 4s;
        animation-iteration-count: infinite;
        animation-timing-function: ease-in-out;
      }
      
        .pip::after {
            position: absolute;
            border-radius: 50%;
            background-color: #fff;
            content: "";
            display: block;
            transform-origin: 50% 50%;
        }
        .pip-0::after { animation: rotate-0 4s infinite ease-in-out; animation-delay: 0.9s; }
        .pip-1::after { animation: rotate-1 4s infinite ease-in-out; animation-delay: 775ms; }
        .pip-2::after { animation: rotate-2 4s infinite ease-in-out; animation-delay: 650ms; }
        .pip-3::after { animation: rotate-3 4s infinite ease-in-out; animation-delay: 525ms; }
        .pip-4::after { animation: rotate-4 4s infinite ease-in-out; animation-delay: 0.4s; }
        .pip-5::after { animation: rotate-5 4s infinite ease-in-out; animation-delay: 275ms; }
        
        .update-screen {
            aspect-ratio: 16/9;
        }
        
        .progress-bar {
            transition: width 0.5s ease;
        }
        
        .update-screen.fullscreen {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            max-width: none;
            z-index: 1000;
            border-radius: 0;
        }
        
        @media (max-width: 1024px) {
            .loader {
                width: 30px;
                height: 30px;
            }
            .pip::after {
                width: 3.75px;
                height: 3.75px;
            }
        }