@layer scenes {
      @media (prefers-reduced-motion: no-preference) {
        [data-8b-live] #month .mo-task:not(.is-on) {
          color: var(--color-4);
        }

        [data-8b-live] #month .mo-task:not(.is-on) .mo-day {
          color: var(--color-4);
        }
      }
    }

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

      [data-8b-live] #month .mo-fill,
      [data-8b-live] #month .mo-marker {
        animation-timeline: --month-t1;
        animation-range: cover 100vh cover calc(100% - 100vh);
        animation-timing-function: linear;
        animation-fill-mode: both;
        transform: none;
      }

      @keyframes month-span-mo-fill-scale-d {
        0% {
          scale: 0 1;
        }

        100% {
          scale: 1;
        }
      }

      @keyframes month-span-mo-fill-scale-m {
        0% {
          scale: 1 0;
        }

        100% {
          scale: 1;
        }
      }

      @keyframes month-span-mo-marker-translate-d {
        0% {
          translate: calc(-1 * var(--month-board-w, 0px)) 0px;
        }

        100% {
          translate: 0px 0px;
        }
      }

      @keyframes month-span-mo-marker-translate-m {
        0% {
          translate: 0px calc(-1 * var(--month-board-h, 0px));
        }

        100% {
          translate: 0px 0px;
        }
      }

      @media (min-width: 701px) {
        [data-8b-live] #month .mo-fill {
          animation-name: month-span-mo-fill-scale-d;
        }

        [data-8b-live] #month .mo-marker {
          animation-name: month-span-mo-marker-translate-d;
        }
      }

      @media (max-width: 700px) {
        [data-8b-live] #month .mo-fill {
          animation-name: month-span-mo-fill-scale-m;
        }

        [data-8b-live] #month .mo-marker {
          animation-name: month-span-mo-marker-translate-m;
        }
      }
    }