@layer scenes {
      @media (prefers-reduced-motion: no-preference) {
        [data-8b-live] #switch .sw-tile:not(.is-done) {
          background: var(--color-3);
          color: var(--color-2);
        }
      }
    }

    @layer scenes {
      [data-8b-live] #switch {
        view-timeline: --switch-t1 block;
        view-timeline-inset: 0;
      }

      [data-8b-live] #switch .sw-tiles>li>.sw-ring>.sw-ring__arc {
        animation-name: switch-circle-sw-ring-arc-strokedashoffset;
        animation-timeline: --switch-t1;
        animation-range: cover calc(100vh - 66.6667vh * var(--i) + 33.3333% * var(--i)) cover calc(33.3333% + 33.3334% * var(--i) + 33.3333vh - 66.6666vh * var(--i));
        animation-timing-function: linear;
        animation-fill-mode: both;
      }

      @keyframes switch-circle-sw-ring-arc-strokedashoffset {
        0% {
          stroke-dashoffset: 1px;
        }

        100% {
          stroke-dashoffset: 0px;
        }
      }
    }