@layer reading-world {
  .reading-world__number {
    display: inline-grid;
    min-block-size: 1.1em;
    align-items: center;
    justify-items: end;
    padding-block: 0.08em;
    overflow: clip;
    line-height: 1;
    vertical-align: bottom;
  }

  .reading-world__number-step {
    grid-area: 1 / 1;
    display: block;
    font: inherit;
    font-variant-numeric: tabular-nums lining-nums;
    letter-spacing: inherit;
    line-height: inherit;
    white-space: nowrap;
    will-change: transform;
  }

  .reading-world__number.is-flipping .reading-world__number-step--old {
    animation: reading-world-calendar-old 600ms cubic-bezier(0.32, 0.72, 0, 1)
      both;
  }

  .reading-world__number.is-flipping .reading-world__number-step--next {
    animation: reading-world-calendar-next 600ms cubic-bezier(0.32, 0.72, 0, 1)
      both;
  }

  .reading-world__bee-orbit {
    position: absolute;
    z-index: 2;
    inset: 3%;
    transform-origin: center;
    animation: reading-world-bee-orbit 24s linear infinite;
    pointer-events: none;
  }

  .reading-world__bee-counter-orbit {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-end: -1.5%;
    inline-size: clamp(4.75rem, 8vw, 7.25rem);
    transform: translateY(-50%);
    animation: reading-world-bee-counter-orbit 24s linear infinite;
  }

  .reading-world__bee-bob {
    display: block;
    animation: reading-world-bee-bob 2.8s ease-in-out infinite;
  }

  .reading-world__bee-bob img {
    inline-size: 100%;
    block-size: auto;
    filter: drop-shadow(0 0.35rem 0.45rem rgb(38 48 58 / 16%));
    pointer-events: none;
    user-select: none;
  }

  @keyframes reading-world-calendar-old {
    from {
      transform: translateY(0);
    }
    to {
      transform: translateY(-1.05em);
    }
  }

  @keyframes reading-world-calendar-next {
    from {
      transform: translateY(1.05em);
    }
    to {
      transform: translateY(0);
    }
  }

  @keyframes reading-world-bee-orbit {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }

  @keyframes reading-world-bee-counter-orbit {
    from {
      transform: translateY(-50%) rotate(0deg);
    }
    to {
      transform: translateY(-50%) rotate(-360deg);
    }
  }

  @keyframes reading-world-bee-bob {
    0%,
    100% {
      transform: translateY(-0.18rem);
    }
    50% {
      transform: translateY(0.28rem);
    }
  }

  @media (max-width: 52rem) {
    .reading-world__counter {
      text-align: center;
    }

    .reading-world__counter-heading,
    .reading-world__counter-values {
      justify-content: center;
    }

    .reading-world__number {
      justify-items: center;
    }

    .reading-world__disclosure,
    .reading-world__status {
      margin-inline: auto;
    }
  }

  @media (min-width: 48.0625rem) {
    html:not(.featured-sketchbook-visible)
      [data-action-rail]:not([hidden])
      ~ .reading-world
      .reading-world__counter {
      --reading-world-rail-intrusion: max(
        0rem,
        calc(
          clamp(0.75rem, 2vw, 1.75rem) + clamp(4.8875rem, 6.8vw, 5.61rem) +
            0.75rem - max(var(--gutter), calc((100vw - var(--shell)) / 2))
        )
      );
      inset-inline-end: var(--reading-world-rail-intrusion);
    }
  }

  @media (min-width: 48.0625rem) and (max-width: 52rem) {
    html:not(.featured-sketchbook-visible)
      [data-action-rail]:not([hidden])
      ~ .reading-world
      .reading-world__counter {
      inset-inline-end: max(1rem, var(--reading-world-rail-intrusion));
    }
  }

  @media (max-width: 48rem) {
    .reading-world__counter {
      inset-block-end: 5.5rem;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .reading-world__number.is-flipping .reading-world__number-step,
    .reading-world__bee-orbit,
    .reading-world__bee-counter-orbit,
    .reading-world__bee-bob {
      animation: none;
    }

    .reading-world__number.is-flipping .reading-world__number-step--old {
      display: none;
    }
  }
}