/* Copyright (c) 2026 yui540, MIT. Full license: /assets/motions/yui540/LICENSE
Namespaced keyframes imported from the complete dated demo collection. */
@keyframes yui_2025_02_25_index_slideIn {
        from {
          transform: translateX(-101%);
        }
        to {
          transform: translateX(0);
        }
      }
@keyframes yui_2025_02_25_index_slideOut {
        from {
          transform: translateX(0);
        }
        to {
          transform: translateX(101%);
        }
      }
@keyframes yui_2025_02_25_index_maskIn {
        from {
          clip-path: polygon(
            0 0,
            0 0,
            calc(var(--skew-x, 0) * -1) 100%,
            calc(var(--skew-x, 0) * -1) 100%
          );
        }
        to {
          clip-path: polygon(
            0 0,
            calc(100% + var(--skew-x, 0)) 0,
            100% 100%,
            calc(var(--skew-x, 0) * -1) 100%
          );
        }
      }
@keyframes yui_2025_02_25_index_maskOut {
        from {
          clip-path: polygon(
            0 0,
            calc(100% + var(--skew-x, 0)) 0,
            100% 100%,
            calc(var(--skew-x, 0) * -1) 100%
          );
        }
        to {
          clip-path: polygon(
            calc(100% + var(--skew-x, 0)) 0,
            calc(100% + var(--skew-x, 0)) 0,
            100% 100%,
            100% 100%
          );
        }
      }
@keyframes yui_2025_02_25_index_arrowIn {
        from {
          clip-path: polygon(
            calc(var(--sharpness) * -1) 0,
            calc(var(--sharpness) * -1) 0,
            0 50%,
            calc(var(--sharpness) * -1) 100%,
            calc(var(--sharpness) * -1) 100%,
            0 50%
          );
        }
        to {
          clip-path: polygon(
            calc(var(--sharpness) * -1) 0,
            100% 0,
            calc(100% + var(--sharpness)) 50%,
            100% 100%,
            calc(var(--sharpness) * -1) 100%,
            0 50%
          );
        }
      }
@keyframes yui_2025_02_25_index_arrowOut {
        from {
          clip-path: polygon(
            calc(var(--sharpness) * -1) 0,
            100% 0,
            calc(100% + var(--sharpness)) 50%,
            100% 100%,
            calc(var(--sharpness) * -1) 100%,
            0 50%
          );
        }
        to {
          clip-path: polygon(
            100% 0,
            100% 0,
            calc(100% + var(--sharpness)) 50%,
            100% 100%,
            100% 100%,
            calc(100% + var(--sharpness)) 50%
          );
        }
      }
@keyframes yui_2026_04_17_tips_1_popup {
        from {
          opacity: 0;
        }
        20%,
        to {
          opacity: 1;
        }

        from {
          transform: scale(0, 0);
        }
        50% {
          transform: scale(1.2, 1.25);
        }
        75% {
          transform: scale(0.9, 0.95);
        }
        to {
          transform: scale(1, 1);
        }
      }
@keyframes yui_2026_04_17_tips_2_translate {
        from {
          transform: translate(-51%, 101%);
          opacity: 0;
        }
        to {
          transform: translate(0%, 0%);
          opacity: 1;
        }
      }
@keyframes yui_2026_04_17_tips_2_border_radius {
        from {
          border-radius: 0 100% 0 0;
        }
        to {
          border-radius: 0 0 0 0;
        }
      }
@keyframes yui_2026_04_17_tips_2_scale {
        from {
          transform: scale(1.4, 0);
        }
        to {
          transform: scale(1, 1);
        }
      }
@keyframes yui_2026_04_17_tips_3_rolling {
        0% {
          transform: rotate(0deg);
        }
        50% {
          transform: rotate(90deg);
        }
        50.1% {
          transform: translateX(100%);
        }
        75% {
          transform: translateX(100%) rotate(8deg);
        }
        100% {
          transform: translateX(100%);
        }
      }
@keyframes yui_2026_04_17_tips_4_translate {
        from {
          translate: 200% 0;
        }
        to {
          translate: 0 0;
        }
      }
@keyframes yui_2026_04_17_tips_4_rotate1 {
        from {
          rotate: -14deg;
        }
        to {
          rotate: -18deg;
        }
      }
@keyframes yui_2026_04_17_tips_4_rotate2 {
        0% {
          rotate: -18deg;
        }
        40%,
        70%,
        100% {
          rotate: 0deg;
        }
        55% {
          rotate: -2deg;
        }
        85% {
          rotate: -1deg;
        }
      }
@keyframes yui_2026_04_18_tips_1_move_large_ball_1 {
        from {
          transform: translateX(0);
        }
        to {
          transform: translate(50%, 3%) rotate(30deg);
        }
      }
@keyframes yui_2026_04_18_tips_1_move_large_ball_2 {
        from {
          transform: translate(50%, 3%) rotate(30deg);
        }
        50% {
          transform: translate(-50%, 3%) rotate(-35deg);
        }
        75% {
          transform: translate(10%, 1%) rotate(10deg);
        }
        to {
          transform: translateX(0);
        }
      }
@keyframes yui_2026_04_18_tips_1_move_bar_1 {
        from {
          transform: translateX(0);
        }
        to {
          transform: translateX(8%) rotate(6deg);
        }
      }
@keyframes yui_2026_04_18_tips_1_move_bar_2 {
        from {
          transform: translateX(8%) rotate(6deg);
        }
        50% {
          transform: translateX(-8%) rotate(-6deg);
        }
        75% {
          transform: translateX(2%) rotate(2deg);
        }
        to {
          transform: translateX(0);
        }
      }
@keyframes yui_2026_04_18_tips_1_move_small_ball_1 {
        from {
          transform: translateX(0);
        }
        to {
          transform: translateX(30%) rotate(25deg);
        }
      }
@keyframes yui_2026_04_18_tips_1_move_small_ball_2 {
        from {
          transform: translateX(30%) rotate(25deg);
        }
        50% {
          transform: translateX(-30%) rotate(-25deg);
        }
        75% {
          transform: translateX(10%) rotate(5deg);
        }
        to {
          transform: translateX(0);
        }
      }
@keyframes yui_2026_04_18_tips_2_fall_down_1 {
        from {
          transform: rotate(0deg);
        }
        60% {
          transform: rotate(60deg);
        }
        80% {
          transform: rotate(55deg);
        }
        to {
          transform: rotate(60deg);
        }
      }
@keyframes yui_2026_04_18_tips_2_fall_down_2 {
        from {
          transform: rotate(0deg);
        }
        60% {
          transform: rotate(61deg);
        }
        80% {
          transform: rotate(56deg);
        }
        to {
          transform: rotate(61deg);
        }
      }
@keyframes yui_2026_04_18_tips_2_fall_down_3 {
        from {
          transform: rotate(0deg);
        }
        60% {
          transform: rotate(66deg);
        }
        80% {
          transform: rotate(60deg);
        }
        to {
          transform: rotate(66deg);
        }
      }
@keyframes yui_2026_04_18_tips_2_fall_down_4 {
        from {
          transform: rotate(0deg);
        }
        60% {
          transform: rotate(90deg);
        }
        80% {
          transform: rotate(85deg);
        }
        to {
          transform: rotate(90deg);
        }
      }
@keyframes yui_2026_04_18_tips_3_translate_x {
        from {
          transform: translateX(32%);
        }
        40% {
          transform: translateX(-16%);
        }
        70% {
          transform: translateX(8%);
        }
        to {
          transform: translateX(0%);
        }
      }
@keyframes yui_2026_04_18_tips_3_translate_y {
        from {
          transform: translateY(-150%);
        }
        40% {
          transform: translateY(20%);
        }
        60% {
          transform: translateY(0);
        }
        80% {
          transform: translateY(10%);
        }
        to {
          transform: translateY(0);
        }
      }
@keyframes yui_2026_04_18_tips_3_shake {
        from {
          transform: rotate(50deg);
        }
        40% {
          transform: rotate(-16deg);
        }
        70% {
          transform: rotate(8deg);
        }
        to {
          transform: rotate(0deg);
        }
      }
@keyframes yui_2026_04_18_tips_4_jump {
        from {
          transform: translateY(0);
        }
        40% {
          transform: translateY(-40%) rotate(6deg);
        }
        60% {
          transform: translateY(0%);
        }
        80% {
          transform: translateY(-20%) rotate(-3deg);
        }
        to {
          transform: translateY(0);
        }
      }
@keyframes yui_2026_04_18_tips_4_push {
        from {
          height: 0;
        }
        60% {
          height: 48px;
        }
        to {
          height: 40px;
        }
      }
@keyframes yui_2026_04_22_tips_1_block_in {
        from {
          height: 15px;
        }
        60% {
          height: 75px;
        }
        to {
          height: 73px;
        }
      }
@keyframes yui_2026_04_22_tips_1_block_out {
        from {
          height: 73px;
        }
        60% {
          height: 13px;
        }
        to {
          height: 15px;
        }
      }
@keyframes yui_2026_04_22_tips_2_close {
        from,
        to {
          transform-origin: left top;
        }

        from {
          box-shadow: -10px -10px 16px rgba(0, 0, 0, 0);
        }
        50%,
        to {
          box-shadow: -60px -15px 16px rgba(0, 0, 0, 0.1);
        }

        from {
          transform: translateX(101%) rotate(-25deg);
        }
        to {
          transform: translateX(0%) rotate(0deg);
        }
      }
@keyframes yui_2026_04_22_tips_2_open {
        from,
        to {
          transform-origin: right top;
        }

        from,
        50% {
          box-shadow: -60px -15px 16px rgba(0, 0, 0, 0.1);
        }
        to {
          box-shadow: -10px -10px 16px rgba(0, 0, 0, 0);
        }

        from {
          transform: translateX(0%) rotate(0deg);
        }
        to {
          transform: translateX(-101%) rotate(25deg);
        }
      }
@keyframes yui_2026_04_22_tips_3_slide_in {
        from {
          transform: translateY(-101%);
        }
        to {
          transform: translateY(0);
        }
      }
@keyframes yui_2026_04_22_tips_3_slide_out {
        from {
          transform: translateY(0);
        }
        to {
          transform: translateY(101%);
        }
      }
@keyframes yui_2026_04_22_tips_4_scale_in {
        from {
          transform: scaleY(0);
        }
        to {
          transform: scaleY(1);
        }
      }
@keyframes yui_2026_04_22_tips_4_scale_out {
        from {
          transform: scaleY(1);
        }
        to {
          transform: scaleY(0);
        }
      }
@keyframes yui_2026_04_25_tips_1_draw_line {
        from {
          transform: translateX(101%);
        }
        to {
          transform: translateX(0);
        }
      }
@keyframes yui_2026_04_25_tips_1_rotate {
        from {
          transform: translateX(0) rotate(180deg);
        }
        to {
          transform: translateX(-420%) rotate(-180deg);
        }
      }
@keyframes yui_2026_04_25_tips_1_slide_in {
        from {
          transform: translateY(100%);
        }
        60% {
          transform: translateY(-8%) scale(0.95, 1.15);
        }
        to {
          transform: translateY(0);
        }
      }
@keyframes yui_2026_04_25_tips_1_slide_out {
        from {
          transform: translateY(0);
        }
        to {
          transform: translateY(100%) scale(1.2, 0.6);
        }
      }
@keyframes yui_2026_04_25_tips_2_bounce {
        from {
          opacity: 0;
        }
        20%,
        to {
          opacity: 1;
        }

        0% {
          transform: translateY(-400%) rotate(30deg);
        }
        60% {
          transform: rotate(-4deg);
        }
        70% {
          transform: translateY(-10%) rotate(2deg);
        }
        80% {
          transform: rotate(0);
        }
        90% {
          transform: translateY(-5%) rotate(-1deg);
        }
        100% {
          transform: rotate(0);
        }
      }
@keyframes yui_2026_04_25_tips_2_fall {
        from,
        80% {
          opacity: 1;
        }
        to {
          opacity: 0;
        }

        from {
          transform: rotate(0);
        }
        to {
          transform: translateY(400%) rotate(20deg);
        }
      }
@keyframes yui_2026_04_25_tips_3_change {
        from,
        50% {
          z-index: 2;
        }
        50.1%,
        to {
          z-index: 0;
        }

        from,
        to {
          transform: rotate(0deg);
        }
        50% {
          transform: rotate(90deg);
        }
      }
@keyframes yui_2026_04_25_tips_4_fade_in_out {
        from {
          opacity: 1;
          transform: scale(0);
        }
        80%,
        to {
          opacity: 0;
          transform: scale(1);
        }
      }
@keyframes yui_2026_04_29_tips_1_draw_line {
        from {
          opacity: 0;
        }
        10%,
        to {
          opacity: 1;
        }

        from {
          stroke-dasharray: 0 var(--stroke-length);
          stroke-width: calc(var(--stroke-width) * 0.45);
        }
        to {
          stroke-dasharray: var(--stroke-length) var(--stroke-length);
          stroke-width: var(--stroke-width);
        }
      }
@keyframes yui_2026_04_29_tips_1_clear_line {
        from,
        90% {
          opacity: 1;
        }
        to {
          opacity: 0;
        }

        from {
          stroke-dashoffset: 0;
        }
        to {
          stroke-dashoffset: calc(var(--stroke-length) * -1);
        }
      }
@keyframes yui_2026_04_29_tips_2_pull {
        from,
        to {
          transform: translate(-50%, 100%);
        }
        30% {
          transform: translate(-50%, 130%);
        }
        60% {
          transform: translate(-50%, 92%);
        }
      }
@keyframes yui_2026_04_29_tips_2_sway {
        0%,
        100% {
          transform: rotate(0deg);
        }
        30% {
          transform: rotate(-10deg);
        }
        60% {
          transform: rotate(7deg);
        }
      }
@keyframes yui_2026_04_29_tips_2_sway_reverse {
        0%,
        100% {
          transform: rotate(0deg);
        }
        30% {
          transform: rotate(10deg);
        }
        60% {
          transform: rotate(-7deg);
        }
      }
@keyframes yui_2026_04_29_tips_2_turn {
        from {
          transform: rotate(0deg);
        }
        50% {
          transform: rotate(-190deg);
        }
        75% {
          transform: rotate(-175deg);
        }
        to {
          transform: rotate(-180deg);
        }
      }
@keyframes yui_2026_04_29_tips_2_turn_reverse {
        from {
          transform: rotate(-180deg);
        }
        50% {
          transform: rotate(10deg);
        }
        75% {
          transform: rotate(-5deg);
        }
        to {
          transform: rotate(0deg);
        }
      }
@keyframes yui_2026_04_29_tips_3_rotate {
        from {
          transform: rotate(0deg);
        }
        to {
          transform: rotate(90deg);
        }
      }
@keyframes yui_2026_04_29_tips_3_rotate_over {
        from {
          transform: rotate(0deg);
        }
        50% {
          transform: rotate(90deg);
        }
        75% {
          transform: rotate(84deg);
        }
        to {
          transform: rotate(90deg);
        }
      }
@keyframes yui_2026_04_29_tips_4_scale1 {
        from {
          transform: scale(1, 1);
        }
        20% {
          transform: scale(1.2, 0.7);
        }
        60% {
          transform: scale(0.8, 1.2);
        }
        to {
          transform: scale(1, 1);
        }
      }
@keyframes yui_2026_04_29_tips_4_scale2 {
        from,
        to {
          transform: scale(1, 1);
        }
        50% {
          transform: scale(1.2, 0.7);
        }
      }
@keyframes yui_2026_04_29_tips_4_jump {
        from {
          left: 0;
        }
        to {
          left: var(--x);
        }

        from,
        to {
          transform: translateY(0);
        }
        50% {
          transform: translateY(var(--y));
        }
      }
@keyframes yui_2026_05_02_tips_1_arrow_up {
        from,
        to {
          height: 100%;
        }
        50% {
          height: 140%;
        }
        75% {
          height: 90%;
        }
      }
@keyframes yui_2026_05_02_tips_1_arrow_down {
        from,
        to {
          height: 40%;
        }
        50% {
          height: 55%;
        }
        75% {
          height: 38%;
        }
      }
@keyframes yui_2026_05_02_tips_2_bar_rotate_1 {
        from {
          transform: rotate(0deg);
        }
        to {
          transform: rotate(58deg);
        }
      }
@keyframes yui_2026_05_02_tips_2_bar_rotate_2 {
        from {
          transform: rotate(58deg);
        }
        50% {
          transform: rotate(-8deg);
        }
        75% {
          transform: rotate(4deg);
        }
        to {
          transform: rotate(0deg);
        }
      }
@keyframes yui_2026_05_02_tips_2_bar_rotate_3 {
        from {
          transform: rotate(0deg);
        }
        to {
          transform: rotate(-58deg);
        }
      }
@keyframes yui_2026_05_02_tips_2_bar_rotate_4 {
        from {
          transform: rotate(-58deg);
        }
        50% {
          transform: rotate(8deg);
        }
        75% {
          transform: rotate(-4deg);
        }
        to {
          transform: rotate(0deg);
        }
      }
@keyframes yui_2026_05_02_tips_2_ball_move {
        from {
          transform: translate(50%, -50%);
        }
        to {
          transform: translate(-150%, -50%);
        }
      }
@keyframes yui_2026_05_02_tips_2_ball_squash {
        from,
        to {
          width: 100%;
          height: 100%;
        }
        50% {
          width: 120%;
          height: 45%;
        }
        75% {
          width: 90%;
          height: 120%;
        }
      }
@keyframes yui_2026_05_02_tips_3_download_arrow {
        from,
        to {
          transform: translateX(-50%) translateY(0%);
        }
        50% {
          transform: translateX(-50%) translateY(51%);
        }
      }
@keyframes yui_2026_05_02_tips_3_download_bottom {
        from,
        to {
          width: 100%;
        }
        50% {
          width: 130%;
        }
      }
@keyframes yui_2026_05_02_tips_3_chart_up {
        from {
          height: 40%;
        }
        60% {
          height: 110%;
        }
        to {
          height: 100%;
        }
      }
@keyframes yui_2026_05_02_tips_3_chart_down {
        from {
          height: 100%;
        }
        60% {
          height: 30%;
        }
        to {
          height: 40%;
        }
      }
@keyframes yui_2026_05_02_tips_4_spin {
        from {
          transform: rotate(0);
        }
        to {
          transform: rotate(360deg);
        }
      }
@keyframes yui_2026_05_02_tips_4_small_spin {
        from {
          transform: rotate(0);
        }
        80%,
        to {
          transform: rotate(360deg);
        }
      }
@keyframes yui_2026_05_14_tips_1_pull {
        0%,
        14.29% {
          opacity: 1;
          height: 50%;
          transform: translate(-50%, 0);
        }
        37.5% {
          height: 80%;
          transform: translate(-50%, 0);
        }
        51.43% {
          opacity: 1;
        }
        60.71%,
        100% {
          opacity: 0;
          height: 80%;
          transform: translate(-50%, -200%) rotate(20deg);
        }
      }
@keyframes yui_2026_05_14_tips_1_push {
        0%,
        25% {
          height: 50%;
          bottom: 0;
        }
        55% {
          height: 80%;
        }
        75%,
        100% {
          height: 50%;
          bottom: 99%;
        }
      }
@keyframes yui_2026_05_14_tips_2_line_anim {
        0%,
        6.67% {
          transform: translateY(0);
        }
        33.33%,
        53.33% {
          transform: translateY(-200px);
        }
        80%,
        100% {
          transform: translateY(0);
        }
      }
@keyframes yui_2026_05_14_tips_2_cloth_anim {
        0%,
        6.67% {
          border-radius: 0 0 0 0;
        }
        40%,
        53.33% {
          border-radius: 0 0 85% 0;
        }
        86.67%,
        100% {
          border-radius: 0 0 0 0;
        }
      }
@keyframes yui_2026_05_14_tips_2_zipper_up {
        0%,
        6.67% {
          bottom: 0;
        }
        33.33%,
        53.33% {
          bottom: 200px;
        }
        80%,
        100% {
          bottom: 0;
        }
      }
@keyframes yui_2026_05_14_tips_2_zipper_sway {
        0%,
        30% {
          transform: translate(-50%, 70%);
        }
        35% {
          transform: translate(-50%, 70%) rotate(8deg);
        }
        41.67% {
          transform: translate(-50%, 70%) rotate(-8deg);
        }
        46.67%,
        73.33% {
          transform: translate(-50%, 70%);
        }
        78.33% {
          transform: translate(-50%, 70%) rotate(8deg);
        }
        85% {
          transform: translate(-50%, 70%) rotate(-8deg);
        }
        90%,
        100% {
          transform: translate(-50%, 70%);
        }
      }
@keyframes yui_2026_05_14_tips_3_rolling_right {
        0%,
        10.53% {
          transform: rotate(0deg);
        }
        28.95%,
        100% {
          transform: rotate(90deg);
        }
      }
@keyframes yui_2026_05_14_tips_3_rolling_right_inner {
        0%,
        23.68% {
          transform: rotate(0deg);
        }
        31.58% {
          transform: rotate(8deg);
        }
        39.47%,
        100% {
          transform: rotate(0deg);
        }
      }
@keyframes yui_2026_05_14_tips_3_left_block_anim {
        0%,
        10.53% {
          width: 100%;
          height: 100%;
          transform: translateX(-50%) translateY(100%);
        }
        29.47% {
          width: 90%;
          height: 125%;
          transform: translateX(-50%) translateY(0);
        }
        42.11%,
        52.63% {
          width: 100%;
          height: 100%;
          transform: translateX(-50%) translateY(0);
        }
        68.42% {
          width: 90%;
          height: 120%;
          transform: translateX(-50%) translateY(0);
        }
        84.21%,
        100% {
          width: 120%;
          height: 60%;
          transform: translateX(-50%) translateY(100%);
        }
      }
@keyframes yui_2026_05_14_tips_4_box_anim {
        0%,
        30% {
          width: 110%;
          height: 100%;
        }
        42% {
          width: 96%;
          height: 110%;
        }
        50%,
        60% {
          width: 100%;
          height: 105%;
        }
        70% {
          width: 114%;
          height: 95%;
        }
        76.67%,
        100% {
          width: 110%;
          height: 100%;
        }
      }
@keyframes yui_2026_05_14_tips_4_headphone_move {
        0%,
        6.67% {
          transform: translate(-50%, -80%);
        }
        18.67% {
          transform: translate(-50%, -28%);
        }
        26.67%,
        73.33% {
          transform: translate(-50%, -30%);
        }
        87.33% {
          transform: translate(-50%, -82%);
        }
        96.67%,
        100% {
          transform: translate(-50%, -80%);
        }
      }
@keyframes yui_2026_05_14_tips_4_headphone_width {
        0%,
        26.67% {
          width: 94px;
        }
        38.67% {
          width: 72px;
        }
        46.67%,
        60% {
          width: 80px;
        }
        71.67%,
        100% {
          width: 94px;
        }
      }
@keyframes yui_2026_06_07_tips_1_circle_anim {
        from,
        to {
          opacity: 0;
        }
        50%,
        80% {
          opacity: 0.4;
        }

        from {
          transform: translate(-50%, -50%) scale(0);
        }
        to {
          transform: translate(-50%, -50%) scale(0.4);
        }
      }
@keyframes yui_2026_06_07_tips_1_move {
        from {
          opacity: 0;
          transform: rotate(var(--rotate, 0)) translateY(0);
        }
        to {
          opacity: 1;
          transform: rotate(var(--rotate, 0))
            translateY(var(--translate-y, 0px));
        }
      }
@keyframes yui_2026_06_07_tips_1_scale_in {
        from {
          transform: scale(0);
        }
        to {
          transform: scale(1);
        }
      }
@keyframes yui_2026_06_07_tips_1_scale_out {
        from {
          transform: scale(1);
        }
        to {
          transform: scale(0);
        }
      }
@keyframes yui_2026_06_07_tips_1_popup {
        0% {
          transform: scale(0);
        }
        40% {
          transform: scale(1.6);
        }
        60% {
          transform: scale(1.04);
        }
        80% {
          transform: scale(1.1);
        }
        100% {
          transform: scale(1.04);
        }
      }
@keyframes yui_2026_06_07_tips_2_fly {
        from,
        to {
          opacity: 0;
        }
        30%,
        70% {
          opacity: 0.2;
        }

        from {
          transform: translateY(0);
        }
        to {
          transform: translateY(-200%);
        }
      }
@keyframes yui_2026_06_07_tips_2_move {
        to {
          transform: translate(var(--x), var(--y)) rotate(var(--r));
        }
      }
@keyframes yui_2026_06_07_tips_2_scale {
        from,
        to {
          opacity: 0;
        }
        50% {
          opacity: 1;
        }

        from {
          transform: translateY(4%) scale(1);
        }
        to {
          transform: translateY(4%) scale(1.8);
        }
      }
@keyframes yui_2026_06_07_tips_2_popup {
        0% {
          transform: scale(0);
        }
        40% {
          transform: scale(1.6);
        }
        60% {
          transform: scale(1.04);
        }
        80% {
          transform: scale(1.1);
        }
        100% {
          transform: scale(1.04);
        }
      }
@keyframes yui_2026_06_07_tips_3_popup {
        0% {
          transform: scale(0);
        }
        40% {
          transform: scale(1.6);
        }
        60% {
          transform: scale(1.04);
        }
        80% {
          transform: scale(1.1);
        }
        100% {
          transform: scale(1.04);
        }
      }
@keyframes yui_2026_06_07_tips_3_cross_line_slide {
        from {
          transform: translateY(-101%);
        }
        to {
          transform: translateY(101%);
        }
      }
@keyframes yui_2026_06_07_tips_3_cross_seg_slide {
        from {
          transform: translateY(101%);
        }
        to {
          transform: translateY(-101%);
        }
      }
@keyframes yui_2026_06_08_tips_1_scale {
        from {
          transform: scale(0);
        }
        to {
          transform: scale(1.3);
        }
      }
@keyframes yui_2026_06_08_tips_1_up {
        from {
          transform: translateY(0);
        }
        50% {
          transform: translateY(22%);
        }
        to {
          transform: translateY(-101%);
        }
      }
@keyframes yui_2026_06_08_tips_1_reset {
        from {
          transform: translateY(-101%);
        }
        to {
          transform: translateY(0%);
        }
      }
@keyframes yui_2026_06_08_tips_1_color {
        from {
          background-color: #eee;
        }
        to {
          background-color: #999;
        }
      }
@keyframes yui_2026_06_08_tips_1_down {
        from {
          transform: perspective(700px) translateY(-40%) rotateX(80deg)
            rotateY(var(--z)) scale(1.5, 1.15);
        }
        to {
          transform: perspective(700px) translateY(0) rotateX(0deg) rotateY(0)
            scale(1);
        }
      }
@keyframes yui_2026_06_08_tips_1_kira {
        from,
        to {
          transform: scale(0);
        }
        50% {
          transform: scale(1);
        }
      }
@keyframes yui_2026_06_08_tips_2_panel_enter {
        from {
          transform: translate(-101%, -40%);
          opacity: 0;
        }
        to {
          transform: translate(0%, 0%);
          opacity: 1;
        }
      }
@keyframes yui_2026_06_08_tips_2_panel_exit {
        from {
          transform: translate(0%, 0%);
        }
        to {
          transform: translate(101%, 0%);
        }
      }
@keyframes yui_2026_06_08_tips_2_panel_flatten {
        from {
          border-radius: 0 0 100% 0;
        }
        to {
          border-radius: 0 0 0 0;
        }
      }
@keyframes yui_2026_06_08_tips_2_panel_round {
        from {
          border-radius: 0 0 0 0;
        }
        to {
          border-radius: 0 0 0 100%;
        }
      }
@keyframes yui_2026_06_08_tips_2_bookmark_swing {
        0% {
          rotate: 25deg;
        }
        40% {
          rotate: -4deg;
        }
        60% {
          rotate: 2deg;
        }
        80% {
          rotate: -1deg;
        }
        100% {
          rotate: 0deg;
        }
      }
@keyframes yui_2026_06_08_tips_2_bookmark_tip {
        from {
          rotate: 0deg;
        }
        to {
          rotate: 20deg;
        }
      }
@keyframes yui_2026_06_08_tips_2_shine_sweep {
        from {
          clip-path: polygon(
            calc(var(--shine-width) * -1) 0,
            0 0,
            calc(var(--shine-skew) * -1) 100%,
            calc((var(--shine-skew) + var(--shine-width)) * -1) 100%
          );
        }
        40%,
        to {
          clip-path: polygon(
            calc(100% + var(--shine-skew)) 0,
            calc(100% + var(--shine-skew) + var(--shine-width)) 0,
            calc(100% + var(--shine-width)) 100%,
            100% 100%
          );
        }
      }
@keyframes yui_2026_06_08_tips_3_slideIn {
        from {
          transform: translateX(101%);
        }
        to {
          transform: translateX(0%);
        }
      }
@keyframes yui_2026_06_08_tips_3_slideOut {
        from {
          transform: translateX(0%);
        }
        to {
          transform: translateX(-101%);
        }
      }
@keyframes yui_2026_06_08_tips_3_leftOut {
        from {
          left: 50%;
        }
        to {
          left: -50%;
        }
      }
@keyframes yui_2026_06_08_tips_3_leftIn {
        from {
          left: 150%;
        }
        to {
          left: 50%;
        }
      }
@keyframes yui_2026_06_08_tips_3_jump {
        0% {
          transform: scale(1);
        }
        30% {
          transform: scale(1.2, 0.6);
        }
        70% {
          transform: scale(0.8, 1.4);
        }
        100% {
          transform: scale(1, 1);
        }
      }
@keyframes yui_2026_06_08_tips_3_j {
        0%,
        100% {
          translate: 0 0;
        }
        50% {
          translate: 0 65%;
        }
      }
@keyframes yui_2026_06_08_tips_3_bounce {
        0% {
          scale: 1;
        }
        33% {
          scale: 1.2 0.7;
        }
        66% {
          scale: 1 1.1;
        }
        100% {
          scale: 1 1;
        }
      }
@keyframes yui_2026_06_09_tips_1_walk_in {
        from {
          transform: translate(-80%, -45%);
        }
        to {
          transform: translate(-35%, -45%);
        }
      }
@keyframes yui_2026_06_09_tips_1_walk_mid {
        from {
          transform: translate(-35%, -45%);
        }
        to {
          transform: translate(-15%, -45%);
        }
      }
@keyframes yui_2026_06_09_tips_1_walk_out {
        from {
          transform: translate(-15%, -45%);
        }
        to {
          transform: translate(-80%, -45%);
        }
      }
@keyframes yui_2026_06_09_tips_1_bob {
        from,
        to {
          transform: scale(1, 1);
        }
        50% {
          transform: translateY(-10%) scale(0.95, 1.1) rotate(3deg) skewX(-2deg);
        }
      }
@keyframes yui_2026_06_09_tips_1_bob_out {
        from,
        to {
          transform: scale(1, 1);
        }
        50% {
          transform: translateY(5%) scale(1.1, 0.98) rotate(-4deg) skewX(2deg);
        }
      }
@keyframes yui_2026_06_09_tips_1_breathe {
        from,
        to {
          transform: scale(1, 1);
        }
        50% {
          transform: scale(1.04, 1.025) skewX(-1deg);
        }
      }
@keyframes yui_2026_06_09_tips_1_tail_wag {
        from,
        to {
          transform: rotate(0deg);
        }
        50% {
          transform: rotate(-15deg);
        }
      }
@keyframes yui_2026_06_09_tips_1_ears_bob {
        from,
        to {
          transform: rotate(-10deg) translate(-15px, 18px) scale(1, 1.1);
        }
        50% {
          transform: rotate(2deg) translate(12px, 12px) scale(1, 1.02);
        }
      }
@keyframes yui_2026_06_09_tips_1_ears_bob_out {
        from,
        to {
          transform: rotate(-10deg) translate(-15px, 18px) scale(1, 1.1);
        }
        50% {
          transform: rotate(2deg) translate(15px, 8px) scale(0.9, 1.1);
        }
      }
@keyframes yui_2026_06_09_tips_1_ear_left {
        from,
        to {
          transform: rotate(0deg);
        }
        50% {
          transform: rotate(-5deg) scale(1.08);
        }
      }
@keyframes yui_2026_06_09_tips_1_ear_right {
        from,
        to {
          transform: rotate(0deg);
        }
        50% {
          transform: rotate(10deg) scale(1.08);
        }
      }
@keyframes yui_2026_06_09_tips_1_eye_move {
        from,
        to {
          transform: translate(-10px, 10px);
        }
        50% {
          transform: translate(0px, 4px) scaleY(1.15);
        }
      }
@keyframes yui_2026_06_09_tips_1_eye_move_out {
        from,
        to {
          transform: translate(-10px, 10px);
        }
        50% {
          transform: translate(-15px, 8px) scaleY(0.85);
        }
      }
@keyframes yui_2026_06_09_tips_1_line_in {
        from,
        to {
          bottom: 60px;
          rotate: 0deg;
        }
        50% {
          bottom: 75px;
          rotate: 3deg;
        }

        from {
          transform: translateX(-45%);
        }
        to {
          transform: translateX(-15%);
        }
      }
@keyframes yui_2026_06_09_tips_1_line_mid {
        from,
        to {
          bottom: 60px;
          rotate: 0deg;
        }
        50% {
          bottom: 75px;
          rotate: 2deg;
        }

        from {
          transform: translateX(-15%);
        }
        to {
          transform: translateX(0%);
        }
      }
@keyframes yui_2026_06_09_tips_1_line_out {
        from,
        to {
          bottom: 60px;
          right: 100px;
          rotate: 0deg;
        }
        50% {
          bottom: 65px;
          right: 110px;
          rotate: 2deg;
        }

        from {
          transform: translateX(0%);
        }
        to {
          transform: translateX(-45%);
        }
      }
@keyframes yui_2026_06_09_tips_2_stem_grow {
        from {
          height: 0;
        }
        to {
          height: 37%;
        }
      }
@keyframes yui_2026_06_09_tips_2_stem_extend {
        from {
          height: 37%;
        }
        to {
          height: 100%;
        }
      }
@keyframes yui_2026_06_09_tips_2_stem_retract {
        from {
          height: 100%;
        }
        to {
          height: 0%;
        }
      }
@keyframes yui_2026_06_09_tips_2_leaf_pop_1 {
        from {
          transform: scale(0) rotate(-50deg) skewX(-10deg);
        }
        50% {
          transform: scale(1.1) rotate(10deg) skewX(4deg);
        }
        to {
          transform: scale(1);
        }
      }
@keyframes yui_2026_06_09_tips_2_leaf_hide_1 {
        from {
          transform: scale(1);
        }
        to {
          transform: scale(0) rotate(-50deg) skewX(-10deg);
        }
      }
@keyframes yui_2026_06_09_tips_2_leaf_pop_2 {
        from {
          transform: scale(0) rotate(80deg) skewX(-5deg);
        }
        50% {
          transform: scale(1.05) rotate(5deg) skewX(2deg);
        }
        to {
          transform: scale(0.95) rotate(20deg);
        }
      }
@keyframes yui_2026_06_09_tips_2_leaf_hide_2 {
        from {
          transform: scale(0.95) rotate(20deg);
        }
        to {
          transform: scale(0) rotate(80deg) skewX(-5deg);
        }
      }
@keyframes yui_2026_06_09_tips_2_bloom_pop {
        from {
          transform: scale(0) rotate(-30deg);
        }
        50% {
          transform: scale(1.1) rotate(5deg);
        }
        to {
          transform: scale(1);
        }
      }
@keyframes yui_2026_06_09_tips_2_bloom_hide {
        from {
          transform: scale(1);
        }
        to {
          transform: scale(0) rotate(-30deg);
        }
      }
@keyframes yui_2026_06_09_tips_2_seed_pop {
        from {
          transform: scale(0);
        }
        50% {
          transform: scale(1.1);
        }
        to {
          transform: scale(1);
        }
      }
@keyframes yui_2026_06_09_tips_2_seed_hide {
        from {
          transform: scale(1);
        }
        to {
          transform: scale(0);
        }
      }
@keyframes yui_2026_06_09_tips_2_breathe {
        from,
        to {
          transform: scale(1, 1);
        }
        50% {
          transform: scale(1.03, 1.01) skewX(-1deg);
        }
      }
@keyframes yui_2026_06_09_tips_2_tail_wag {
        from,
        to {
          transform: rotate(0deg);
        }
        50% {
          transform: rotate(-15deg);
        }
      }
@keyframes yui_2026_06_09_tips_2_ears_settle {
        from {
          transform: rotate(-10deg) translate(-15px, 18px) scale(1, 1.1);
        }
        to {
          transform: translate(0px, 3px);
        }
      }
@keyframes yui_2026_06_09_tips_2_ears_tilt {
        from {
          transform: translate(0px, 3px);
        }
        to {
          transform: rotate(7deg) translate(14px, -5px) scale(1, 1.1);
        }
      }
@keyframes yui_2026_06_09_tips_2_ears_reset {
        from {
          transform: rotate(7deg) translate(14px, -5px) scale(1, 1.1);
        }
        to {
          transform: rotate(-10deg) translate(-15px, 18px) scale(1, 1.1);
        }
      }
@keyframes yui_2026_06_09_tips_2_ear_left {
        from,
        to {
          transform: rotate(0deg);
        }
        50% {
          transform: rotate(-5deg) scale(1.18);
        }
      }
@keyframes yui_2026_06_09_tips_2_ear_right {
        from,
        to {
          transform: rotate(0deg);
        }
        50% {
          transform: rotate(10deg) scale(1.18);
        }
      }
@keyframes yui_2026_06_09_tips_2_body_settle {
        from {
          transform: scale(1.04, 0.9);
        }
        to {
          transform: scale(1, 1);
        }
      }
@keyframes yui_2026_06_09_tips_2_body_stretch {
        from {
          transform: scale(1, 1);
        }
        to {
          transform: scale(0.94, 1.1);
        }
      }
@keyframes yui_2026_06_09_tips_2_body_reset {
        from {
          transform: scale(0.94, 1.1);
        }
        to {
          transform: scale(1.04, 0.9);
        }
      }
@keyframes yui_2026_06_09_tips_2_eye_settle {
        from {
          transform: translate(-10px, 20px) scaleY(0.9);
        }
        to {
          transform: translate(0, 0);
        }
      }
@keyframes yui_2026_06_09_tips_2_eye_squint {
        from {
          transform: translate(0, 0);
        }
        to {
          transform: translate(-2px, -8px) scaleY(0.8);
        }
      }
@keyframes yui_2026_06_09_tips_2_eye_reset {
        from {
          transform: translate(-2px, -8px) scaleY(0.8);
        }
        to {
          transform: translate(-10px, 20px) scaleY(0.9);
        }
      }