@layer scenes {
      [data-8b-live] {
        --ease-640c4e: linear(0, 0.1444, 0.278, 0.4011, 0.514, 0.6172, 0.711, 0.7958, 0.872, 0.9399, 1, 1.0526, 1.098, 1.1367, 1.169, 1.1953, 1.216, 1.2314, 1.242, 1.2481, 1.25, 1.2482, 1.243, 1.2348, 1.224, 1.2109, 1.196, 1.1796, 1.162, 1.1437, 1.125, 1.1063, 1.088, 1.0704, 1.054, 1.0391, 1.026, 1.0152, 1.007, 1.0018, 1);
      }

      [data-8b-live] #principle .pc-in {
        view-timeline: --principle-last block;
        view-timeline-inset: 0;
      }

      [data-8b-live] #principle .pc-dot {
        animation-name: principle-dot;
        animation-timeline: --principle-last;
        animation-range: cover 38vh cover 54vh;
        animation-timing-function: var(--ease-640c4e);
        animation-fill-mode: both;
        transform: none;
        transform-origin: 50% 80%;
      }

      @keyframes principle-dot {
        0% {
          scale: 0;
        }

        0.002% {
          scale: 0.0012;
        }

        100% {
          scale: 1;
        }
      }
    }