diff --git a/src/main/index.ts b/src/main/index.ts
index 85b9edf..9ef9c61 100644
--- a/src/main/index.ts
+++ b/src/main/index.ts
@@ -3,7 +3,6 @@ import { app, ipcMain, nativeImage } from 'electron';
 import { join } from 'path';
 
 import { loadLyricWindow } from './lyric';
-import { initializeCacheManager } from './modules/cache';
 import { initializeConfig } from './modules/config';
 import { initializeFileManager } from './modules/fileManager';
 import { initializeShortcuts, registerShortcuts } from './modules/shortcuts';
@@ -27,8 +26,6 @@ let mainWindow: Electron.BrowserWindow;
 function initialize() {
   // 初始化配置管理
   initializeConfig();
-  // 初始化缓存管理
-  initializeCacheManager();
   // 初始化文件管理
   initializeFileManager();
   // 初始化窗口管理
diff --git a/src/renderer/api/music.ts b/src/renderer/api/music.ts
index 28bdfe7..844e412 100644
--- a/src/renderer/api/music.ts
+++ b/src/renderer/api/music.ts
@@ -1,9 +1,12 @@
+import { musicDB } from '@/hooks/MusicHook';
 import store from '@/store';
 import type { ILyric } from '@/type/lyric';
 import { isElectron } from '@/utils';
 import request from '@/utils/request';
 import requestMusic from '@/utils/request_music';
 
+const { addData, getData, deleteData } = musicDB;
+
 // 获取音乐音质详情
 export const getMusicQualityDetail = (id: number) => {
   return request.get('/song/music/detail', { params: { id } });
@@ -37,24 +40,31 @@ export const getMusicDetail = (ids: Array<number>) => {
 
 // 根据音乐Id获取音乐歌词
 export const getMusicLrc = async (id: number) => {
-  if (isElectron) {
-    // 先尝试从缓存获取
-    const cachedLyric = await window.api.invoke('get-cached-lyric', id);
-    console.log('cachedLyric', cachedLyric);
-    if (cachedLyric) {
-      return { data: cachedLyric };
+  const TEN_DAYS_MS = 10 * 24 * 60 * 60 * 1000; // 10天的毫秒数
+
+  try {
+    // 尝试获取缓存的歌词
+    const cachedLyric = await getData('music_lyric', id);
+    if (cachedLyric?.createTime && Date.now() - cachedLyric.createTime < TEN_DAYS_MS) {
+      return { ...cachedLyric };
     }
+
+    // 获取新的歌词数据
+    const res = await request.get<ILyric>('/lyric', { params: { id } });
+
+    // 只有在成功获取新数据后才删除旧缓存并添加新缓存
+    if (res?.data) {
+      if (cachedLyric) {
+        await deleteData('music_lyric', id);
+      }
+      addData('music_lyric', { id, data: res.data, createTime: Date.now() });
+    }
+
+    return res;
+  } catch (error) {
+    console.error('获取歌词失败:', error);
+    throw error; // 向上抛出错误，让调用者处理
   }
-
-  // 如果缓存中没有，则从服务器获取
-  const res = await request.get<ILyric>('/lyric', { params: { id } });
-
-  // 缓存完整的响应数据
-  if (isElectron && res) {
-    await window.api.invoke('cache-lyric', id, res.data);
-  }
-
-  return res;
 };
 
 export const getParsingMusicUrl = (id: number, data: any) => {
diff --git a/src/renderer/assets/css/animate.css b/src/renderer/assets/css/animate.css
deleted file mode 100644
index 61ee831..0000000
--- a/src/renderer/assets/css/animate.css
+++ /dev/null
@@ -1,3687 +0,0 @@
-@charset "UTF-8"; /*!
- * animate.css - https://animate.style/
- * Version - 4.1.1
- * Licensed under the MIT license - http://opensource.org/licenses/MIT
- *
- * Copyright (c) 2020 Animate.css
- */
-:root {
-  --animate-duration: 1s;
-  --animate-delay: 1s;
-  --animate-repeat: 1;
-}
-.animate__animated {
-  -webkit-animation-duration: 1s;
-  animation-duration: 1s;
-  -webkit-animation-duration: var(--animate-duration);
-  animation-duration: var(--animate-duration);
-  -webkit-animation-fill-mode: both;
-  animation-fill-mode: both;
-}
-.animate__animated.animate__infinite {
-  -webkit-animation-iteration-count: infinite;
-  animation-iteration-count: infinite;
-}
-.animate__animated.animate__repeat-1 {
-  -webkit-animation-iteration-count: 1;
-  animation-iteration-count: 1;
-  -webkit-animation-iteration-count: var(--animate-repeat);
-  animation-iteration-count: var(--animate-repeat);
-}
-.animate__animated.animate__repeat-2 {
-  -webkit-animation-iteration-count: 2;
-  animation-iteration-count: 2;
-  -webkit-animation-iteration-count: calc(var(--animate-repeat) * 2);
-  animation-iteration-count: calc(var(--animate-repeat) * 2);
-}
-.animate__animated.animate__repeat-3 {
-  -webkit-animation-iteration-count: 3;
-  animation-iteration-count: 3;
-  -webkit-animation-iteration-count: calc(var(--animate-repeat) * 3);
-  animation-iteration-count: calc(var(--animate-repeat) * 3);
-}
-.animate__animated.animate__delay-1s {
-  -webkit-animation-delay: 1s;
-  animation-delay: 1s;
-  -webkit-animation-delay: var(--animate-delay);
-  animation-delay: var(--animate-delay);
-}
-.animate__animated.animate__delay-2s {
-  -webkit-animation-delay: 2s;
-  animation-delay: 2s;
-  -webkit-animation-delay: calc(var(--animate-delay) * 2);
-  animation-delay: calc(var(--animate-delay) * 2);
-}
-.animate__animated.animate__delay-3s {
-  -webkit-animation-delay: 3s;
-  animation-delay: 3s;
-  -webkit-animation-delay: calc(var(--animate-delay) * 3);
-  animation-delay: calc(var(--animate-delay) * 3);
-}
-.animate__animated.animate__delay-4s {
-  -webkit-animation-delay: 4s;
-  animation-delay: 4s;
-  -webkit-animation-delay: calc(var(--animate-delay) * 4);
-  animation-delay: calc(var(--animate-delay) * 4);
-}
-.animate__animated.animate__delay-5s {
-  -webkit-animation-delay: 5s;
-  animation-delay: 5s;
-  -webkit-animation-delay: calc(var(--animate-delay) * 5);
-  animation-delay: calc(var(--animate-delay) * 5);
-}
-.animate__animated.animate__faster {
-  -webkit-animation-duration: 0.5s;
-  animation-duration: 0.5s;
-  -webkit-animation-duration: calc(var(--animate-duration) / 2);
-  animation-duration: calc(var(--animate-duration) / 2);
-}
-.animate__animated.animate__fast {
-  -webkit-animation-duration: 0.8s;
-  animation-duration: 0.8s;
-  -webkit-animation-duration: calc(var(--animate-duration) * 0.8);
-  animation-duration: calc(var(--animate-duration) * 0.8);
-}
-.animate__animated.animate__slow {
-  -webkit-animation-duration: 2s;
-  animation-duration: 2s;
-  -webkit-animation-duration: calc(var(--animate-duration) * 2);
-  animation-duration: calc(var(--animate-duration) * 2);
-}
-.animate__animated.animate__slower {
-  -webkit-animation-duration: 3s;
-  animation-duration: 3s;
-  -webkit-animation-duration: calc(var(--animate-duration) * 3);
-  animation-duration: calc(var(--animate-duration) * 3);
-}
-@media (prefers-reduced-motion: reduce), print {
-  .animate__animated {
-    -webkit-animation-duration: 1ms !important;
-    animation-duration: 1ms !important;
-    -webkit-transition-duration: 1ms !important;
-    transition-duration: 1ms !important;
-    -webkit-animation-iteration-count: 1 !important;
-    animation-iteration-count: 1 !important;
-  }
-  .animate__animated[class*='Out'] {
-    opacity: 0;
-  }
-}
-@-webkit-keyframes bounce {
-  0%,
-  20%,
-  53%,
-  to {
-    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-    -webkit-transform: translateZ(0);
-    transform: translateZ(0);
-  }
-  40%,
-  43% {
-    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-    -webkit-transform: translate3d(0, -30px, 0) scaleY(1.1);
-    transform: translate3d(0, -30px, 0) scaleY(1.1);
-  }
-  70% {
-    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-    -webkit-transform: translate3d(0, -15px, 0) scaleY(1.05);
-    transform: translate3d(0, -15px, 0) scaleY(1.05);
-  }
-  80% {
-    -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-    -webkit-transform: translateZ(0) scaleY(0.95);
-    transform: translateZ(0) scaleY(0.95);
-  }
-  90% {
-    -webkit-transform: translate3d(0, -4px, 0) scaleY(1.02);
-    transform: translate3d(0, -4px, 0) scaleY(1.02);
-  }
-}
-@keyframes bounce {
-  0%,
-  20%,
-  53%,
-  to {
-    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-    -webkit-transform: translateZ(0);
-    transform: translateZ(0);
-  }
-  40%,
-  43% {
-    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-    -webkit-transform: translate3d(0, -30px, 0) scaleY(1.1);
-    transform: translate3d(0, -30px, 0) scaleY(1.1);
-  }
-  70% {
-    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-    -webkit-transform: translate3d(0, -15px, 0) scaleY(1.05);
-    transform: translate3d(0, -15px, 0) scaleY(1.05);
-  }
-  80% {
-    -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-    -webkit-transform: translateZ(0) scaleY(0.95);
-    transform: translateZ(0) scaleY(0.95);
-  }
-  90% {
-    -webkit-transform: translate3d(0, -4px, 0) scaleY(1.02);
-    transform: translate3d(0, -4px, 0) scaleY(1.02);
-  }
-}
-.animate__bounce {
-  -webkit-animation-name: bounce;
-  animation-name: bounce;
-  -webkit-transform-origin: center bottom;
-  transform-origin: center bottom;
-}
-@-webkit-keyframes flash {
-  0%,
-  50%,
-  to {
-    opacity: 1;
-  }
-  25%,
-  75% {
-    opacity: 0;
-  }
-}
-@keyframes flash {
-  0%,
-  50%,
-  to {
-    opacity: 1;
-  }
-  25%,
-  75% {
-    opacity: 0;
-  }
-}
-.animate__flash {
-  -webkit-animation-name: flash;
-  animation-name: flash;
-}
-@-webkit-keyframes pulse {
-  0% {
-    -webkit-transform: scaleX(1);
-    transform: scaleX(1);
-  }
-  50% {
-    -webkit-transform: scale3d(1.05, 1.05, 1.05);
-    transform: scale3d(1.05, 1.05, 1.05);
-  }
-  to {
-    -webkit-transform: scaleX(1);
-    transform: scaleX(1);
-  }
-}
-@keyframes pulse {
-  0% {
-    -webkit-transform: scaleX(1);
-    transform: scaleX(1);
-  }
-  50% {
-    -webkit-transform: scale3d(1.05, 1.05, 1.05);
-    transform: scale3d(1.05, 1.05, 1.05);
-  }
-  to {
-    -webkit-transform: scaleX(1);
-    transform: scaleX(1);
-  }
-}
-.animate__pulse {
-  -webkit-animation-name: pulse;
-  animation-name: pulse;
-  -webkit-animation-timing-function: ease-in-out;
-  animation-timing-function: ease-in-out;
-}
-@-webkit-keyframes rubberBand {
-  0% {
-    -webkit-transform: scaleX(1);
-    transform: scaleX(1);
-  }
-  30% {
-    -webkit-transform: scale3d(1.25, 0.75, 1);
-    transform: scale3d(1.25, 0.75, 1);
-  }
-  40% {
-    -webkit-transform: scale3d(0.75, 1.25, 1);
-    transform: scale3d(0.75, 1.25, 1);
-  }
-  50% {
-    -webkit-transform: scale3d(1.15, 0.85, 1);
-    transform: scale3d(1.15, 0.85, 1);
-  }
-  65% {
-    -webkit-transform: scale3d(0.95, 1.05, 1);
-    transform: scale3d(0.95, 1.05, 1);
-  }
-  75% {
-    -webkit-transform: scale3d(1.05, 0.95, 1);
-    transform: scale3d(1.05, 0.95, 1);
-  }
-  to {
-    -webkit-transform: scaleX(1);
-    transform: scaleX(1);
-  }
-}
-@keyframes rubberBand {
-  0% {
-    -webkit-transform: scaleX(1);
-    transform: scaleX(1);
-  }
-  30% {
-    -webkit-transform: scale3d(1.25, 0.75, 1);
-    transform: scale3d(1.25, 0.75, 1);
-  }
-  40% {
-    -webkit-transform: scale3d(0.75, 1.25, 1);
-    transform: scale3d(0.75, 1.25, 1);
-  }
-  50% {
-    -webkit-transform: scale3d(1.15, 0.85, 1);
-    transform: scale3d(1.15, 0.85, 1);
-  }
-  65% {
-    -webkit-transform: scale3d(0.95, 1.05, 1);
-    transform: scale3d(0.95, 1.05, 1);
-  }
-  75% {
-    -webkit-transform: scale3d(1.05, 0.95, 1);
-    transform: scale3d(1.05, 0.95, 1);
-  }
-  to {
-    -webkit-transform: scaleX(1);
-    transform: scaleX(1);
-  }
-}
-.animate__rubberBand {
-  -webkit-animation-name: rubberBand;
-  animation-name: rubberBand;
-}
-@-webkit-keyframes shakeX {
-  0%,
-  to {
-    -webkit-transform: translateZ(0);
-    transform: translateZ(0);
-  }
-  10%,
-  30%,
-  50%,
-  70%,
-  90% {
-    -webkit-transform: translate3d(-10px, 0, 0);
-    transform: translate3d(-10px, 0, 0);
-  }
-  20%,
-  40%,
-  60%,
-  80% {
-    -webkit-transform: translate3d(10px, 0, 0);
-    transform: translate3d(10px, 0, 0);
-  }
-}
-@keyframes shakeX {
-  0%,
-  to {
-    -webkit-transform: translateZ(0);
-    transform: translateZ(0);
-  }
-  10%,
-  30%,
-  50%,
-  70%,
-  90% {
-    -webkit-transform: translate3d(-10px, 0, 0);
-    transform: translate3d(-10px, 0, 0);
-  }
-  20%,
-  40%,
-  60%,
-  80% {
-    -webkit-transform: translate3d(10px, 0, 0);
-    transform: translate3d(10px, 0, 0);
-  }
-}
-.animate__shakeX {
-  -webkit-animation-name: shakeX;
-  animation-name: shakeX;
-}
-@-webkit-keyframes shakeY {
-  0%,
-  to {
-    -webkit-transform: translateZ(0);
-    transform: translateZ(0);
-  }
-  10%,
-  30%,
-  50%,
-  70%,
-  90% {
-    -webkit-transform: translate3d(0, -10px, 0);
-    transform: translate3d(0, -10px, 0);
-  }
-  20%,
-  40%,
-  60%,
-  80% {
-    -webkit-transform: translate3d(0, 10px, 0);
-    transform: translate3d(0, 10px, 0);
-  }
-}
-@keyframes shakeY {
-  0%,
-  to {
-    -webkit-transform: translateZ(0);
-    transform: translateZ(0);
-  }
-  10%,
-  30%,
-  50%,
-  70%,
-  90% {
-    -webkit-transform: translate3d(0, -10px, 0);
-    transform: translate3d(0, -10px, 0);
-  }
-  20%,
-  40%,
-  60%,
-  80% {
-    -webkit-transform: translate3d(0, 10px, 0);
-    transform: translate3d(0, 10px, 0);
-  }
-}
-.animate__shakeY {
-  -webkit-animation-name: shakeY;
-  animation-name: shakeY;
-}
-@-webkit-keyframes headShake {
-  0% {
-    -webkit-transform: translateX(0);
-    transform: translateX(0);
-  }
-  6.5% {
-    -webkit-transform: translateX(-6px) rotateY(-9deg);
-    transform: translateX(-6px) rotateY(-9deg);
-  }
-  18.5% {
-    -webkit-transform: translateX(5px) rotateY(7deg);
-    transform: translateX(5px) rotateY(7deg);
-  }
-  31.5% {
-    -webkit-transform: translateX(-3px) rotateY(-5deg);
-    transform: translateX(-3px) rotateY(-5deg);
-  }
-  43.5% {
-    -webkit-transform: translateX(2px) rotateY(3deg);
-    transform: translateX(2px) rotateY(3deg);
-  }
-  50% {
-    -webkit-transform: translateX(0);
-    transform: translateX(0);
-  }
-}
-@keyframes headShake {
-  0% {
-    -webkit-transform: translateX(0);
-    transform: translateX(0);
-  }
-  6.5% {
-    -webkit-transform: translateX(-6px) rotateY(-9deg);
-    transform: translateX(-6px) rotateY(-9deg);
-  }
-  18.5% {
-    -webkit-transform: translateX(5px) rotateY(7deg);
-    transform: translateX(5px) rotateY(7deg);
-  }
-  31.5% {
-    -webkit-transform: translateX(-3px) rotateY(-5deg);
-    transform: translateX(-3px) rotateY(-5deg);
-  }
-  43.5% {
-    -webkit-transform: translateX(2px) rotateY(3deg);
-    transform: translateX(2px) rotateY(3deg);
-  }
-  50% {
-    -webkit-transform: translateX(0);
-    transform: translateX(0);
-  }
-}
-.animate__headShake {
-  -webkit-animation-timing-function: ease-in-out;
-  animation-timing-function: ease-in-out;
-  -webkit-animation-name: headShake;
-  animation-name: headShake;
-}
-@-webkit-keyframes swing {
-  20% {
-    -webkit-transform: rotate(15deg);
-    transform: rotate(15deg);
-  }
-  40% {
-    -webkit-transform: rotate(-10deg);
-    transform: rotate(-10deg);
-  }
-  60% {
-    -webkit-transform: rotate(5deg);
-    transform: rotate(5deg);
-  }
-  80% {
-    -webkit-transform: rotate(-5deg);
-    transform: rotate(-5deg);
-  }
-  to {
-    -webkit-transform: rotate(0deg);
-    transform: rotate(0deg);
-  }
-}
-@keyframes swing {
-  20% {
-    -webkit-transform: rotate(15deg);
-    transform: rotate(15deg);
-  }
-  40% {
-    -webkit-transform: rotate(-10deg);
-    transform: rotate(-10deg);
-  }
-  60% {
-    -webkit-transform: rotate(5deg);
-    transform: rotate(5deg);
-  }
-  80% {
-    -webkit-transform: rotate(-5deg);
-    transform: rotate(-5deg);
-  }
-  to {
-    -webkit-transform: rotate(0deg);
-    transform: rotate(0deg);
-  }
-}
-.animate__swing {
-  -webkit-transform-origin: top center;
-  transform-origin: top center;
-  -webkit-animation-name: swing;
-  animation-name: swing;
-}
-@-webkit-keyframes tada {
-  0% {
-    -webkit-transform: scaleX(1);
-    transform: scaleX(1);
-  }
-  10%,
-  20% {
-    -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate(-3deg);
-    transform: scale3d(0.9, 0.9, 0.9) rotate(-3deg);
-  }
-  30%,
-  50%,
-  70%,
-  90% {
-    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(3deg);
-    transform: scale3d(1.1, 1.1, 1.1) rotate(3deg);
-  }
-  40%,
-  60%,
-  80% {
-    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg);
-    transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg);
-  }
-  to {
-    -webkit-transform: scaleX(1);
-    transform: scaleX(1);
-  }
-}
-@keyframes tada {
-  0% {
-    -webkit-transform: scaleX(1);
-    transform: scaleX(1);
-  }
-  10%,
-  20% {
-    -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate(-3deg);
-    transform: scale3d(0.9, 0.9, 0.9) rotate(-3deg);
-  }
-  30%,
-  50%,
-  70%,
-  90% {
-    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(3deg);
-    transform: scale3d(1.1, 1.1, 1.1) rotate(3deg);
-  }
-  40%,
-  60%,
-  80% {
-    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg);
-    transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg);
-  }
-  to {
-    -webkit-transform: scaleX(1);
-    transform: scaleX(1);
-  }
-}
-.animate__tada {
-  -webkit-animation-name: tada;
-  animation-name: tada;
-}
-@-webkit-keyframes wobble {
-  0% {
-    -webkit-transform: translateZ(0);
-    transform: translateZ(0);
-  }
-  15% {
-    -webkit-transform: translate3d(-25%, 0, 0) rotate(-5deg);
-    transform: translate3d(-25%, 0, 0) rotate(-5deg);
-  }
-  30% {
-    -webkit-transform: translate3d(20%, 0, 0) rotate(3deg);
-    transform: translate3d(20%, 0, 0) rotate(3deg);
-  }
-  45% {
-    -webkit-transform: translate3d(-15%, 0, 0) rotate(-3deg);
-    transform: translate3d(-15%, 0, 0) rotate(-3deg);
-  }
-  60% {
-    -webkit-transform: translate3d(10%, 0, 0) rotate(2deg);
-    transform: translate3d(10%, 0, 0) rotate(2deg);
-  }
-  75% {
-    -webkit-transform: translate3d(-5%, 0, 0) rotate(-1deg);
-    transform: translate3d(-5%, 0, 0) rotate(-1deg);
-  }
-  to {
-    -webkit-transform: translateZ(0);
-    transform: translateZ(0);
-  }
-}
-@keyframes wobble {
-  0% {
-    -webkit-transform: translateZ(0);
-    transform: translateZ(0);
-  }
-  15% {
-    -webkit-transform: translate3d(-25%, 0, 0) rotate(-5deg);
-    transform: translate3d(-25%, 0, 0) rotate(-5deg);
-  }
-  30% {
-    -webkit-transform: translate3d(20%, 0, 0) rotate(3deg);
-    transform: translate3d(20%, 0, 0) rotate(3deg);
-  }
-  45% {
-    -webkit-transform: translate3d(-15%, 0, 0) rotate(-3deg);
-    transform: translate3d(-15%, 0, 0) rotate(-3deg);
-  }
-  60% {
-    -webkit-transform: translate3d(10%, 0, 0) rotate(2deg);
-    transform: translate3d(10%, 0, 0) rotate(2deg);
-  }
-  75% {
-    -webkit-transform: translate3d(-5%, 0, 0) rotate(-1deg);
-    transform: translate3d(-5%, 0, 0) rotate(-1deg);
-  }
-  to {
-    -webkit-transform: translateZ(0);
-    transform: translateZ(0);
-  }
-}
-.animate__wobble {
-  -webkit-animation-name: wobble;
-  animation-name: wobble;
-}
-@-webkit-keyframes jello {
-  0%,
-  11.1%,
-  to {
-    -webkit-transform: translateZ(0);
-    transform: translateZ(0);
-  }
-  22.2% {
-    -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
-    transform: skewX(-12.5deg) skewY(-12.5deg);
-  }
-  33.3% {
-    -webkit-transform: skewX(6.25deg) skewY(6.25deg);
-    transform: skewX(6.25deg) skewY(6.25deg);
-  }
-  44.4% {
-    -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
-    transform: skewX(-3.125deg) skewY(-3.125deg);
-  }
-  55.5% {
-    -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
-    transform: skewX(1.5625deg) skewY(1.5625deg);
-  }
-  66.6% {
-    -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
-    transform: skewX(-0.78125deg) skewY(-0.78125deg);
-  }
-  77.7% {
-    -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
-    transform: skewX(0.390625deg) skewY(0.390625deg);
-  }
-  88.8% {
-    -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
-    transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
-  }
-}
-@keyframes jello {
-  0%,
-  11.1%,
-  to {
-    -webkit-transform: translateZ(0);
-    transform: translateZ(0);
-  }
-  22.2% {
-    -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
-    transform: skewX(-12.5deg) skewY(-12.5deg);
-  }
-  33.3% {
-    -webkit-transform: skewX(6.25deg) skewY(6.25deg);
-    transform: skewX(6.25deg) skewY(6.25deg);
-  }
-  44.4% {
-    -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
-    transform: skewX(-3.125deg) skewY(-3.125deg);
-  }
-  55.5% {
-    -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
-    transform: skewX(1.5625deg) skewY(1.5625deg);
-  }
-  66.6% {
-    -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
-    transform: skewX(-0.78125deg) skewY(-0.78125deg);
-  }
-  77.7% {
-    -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
-    transform: skewX(0.390625deg) skewY(0.390625deg);
-  }
-  88.8% {
-    -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
-    transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
-  }
-}
-.animate__jello {
-  -webkit-animation-name: jello;
-  animation-name: jello;
-  -webkit-transform-origin: center;
-  transform-origin: center;
-}
-@-webkit-keyframes heartBeat {
-  0% {
-    -webkit-transform: scale(1);
-    transform: scale(1);
-  }
-  14% {
-    -webkit-transform: scale(1.3);
-    transform: scale(1.3);
-  }
-  28% {
-    -webkit-transform: scale(1);
-    transform: scale(1);
-  }
-  42% {
-    -webkit-transform: scale(1.3);
-    transform: scale(1.3);
-  }
-  70% {
-    -webkit-transform: scale(1);
-    transform: scale(1);
-  }
-}
-@keyframes heartBeat {
-  0% {
-    -webkit-transform: scale(1);
-    transform: scale(1);
-  }
-  14% {
-    -webkit-transform: scale(1.3);
-    transform: scale(1.3);
-  }
-  28% {
-    -webkit-transform: scale(1);
-    transform: scale(1);
-  }
-  42% {
-    -webkit-transform: scale(1.3);
-    transform: scale(1.3);
-  }
-  70% {
-    -webkit-transform: scale(1);
-    transform: scale(1);
-  }
-}
-.animate__heartBeat {
-  -webkit-animation-name: heartBeat;
-  animation-name: heartBeat;
-  -webkit-animation-duration: 1.3s;
-  animation-duration: 1.3s;
-  -webkit-animation-duration: calc(var(--animate-duration) * 1.3);
-  animation-duration: calc(var(--animate-duration) * 1.3);
-  -webkit-animation-timing-function: ease-in-out;
-  animation-timing-function: ease-in-out;
-}
-@-webkit-keyframes backInDown {
-  0% {
-    -webkit-transform: translateY(-1200px) scale(0.7);
-    transform: translateY(-1200px) scale(0.7);
-    opacity: 0.7;
-  }
-  80% {
-    -webkit-transform: translateY(0) scale(0.7);
-    transform: translateY(0) scale(0.7);
-    opacity: 0.7;
-  }
-  to {
-    -webkit-transform: scale(1);
-    transform: scale(1);
-    opacity: 1;
-  }
-}
-@keyframes backInDown {
-  0% {
-    -webkit-transform: translateY(-1200px) scale(0.7);
-    transform: translateY(-1200px) scale(0.7);
-    opacity: 0.7;
-  }
-  80% {
-    -webkit-transform: translateY(0) scale(0.7);
-    transform: translateY(0) scale(0.7);
-    opacity: 0.7;
-  }
-  to {
-    -webkit-transform: scale(1);
-    transform: scale(1);
-    opacity: 1;
-  }
-}
-.animate__backInDown {
-  -webkit-animation-name: backInDown;
-  animation-name: backInDown;
-}
-@-webkit-keyframes backInLeft {
-  0% {
-    -webkit-transform: translateX(-2000px) scale(0.7);
-    transform: translateX(-2000px) scale(0.7);
-    opacity: 0.7;
-  }
-  80% {
-    -webkit-transform: translateX(0) scale(0.7);
-    transform: translateX(0) scale(0.7);
-    opacity: 0.7;
-  }
-  to {
-    -webkit-transform: scale(1);
-    transform: scale(1);
-    opacity: 1;
-  }
-}
-@keyframes backInLeft {
-  0% {
-    -webkit-transform: translateX(-2000px) scale(0.7);
-    transform: translateX(-2000px) scale(0.7);
-    opacity: 0.7;
-  }
-  80% {
-    -webkit-transform: translateX(0) scale(0.7);
-    transform: translateX(0) scale(0.7);
-    opacity: 0.7;
-  }
-  to {
-    -webkit-transform: scale(1);
-    transform: scale(1);
-    opacity: 1;
-  }
-}
-.animate__backInLeft {
-  -webkit-animation-name: backInLeft;
-  animation-name: backInLeft;
-}
-@-webkit-keyframes backInRight {
-  0% {
-    -webkit-transform: translateX(2000px) scale(0.7);
-    transform: translateX(2000px) scale(0.7);
-    opacity: 0.7;
-  }
-  80% {
-    -webkit-transform: translateX(0) scale(0.7);
-    transform: translateX(0) scale(0.7);
-    opacity: 0.7;
-  }
-  to {
-    -webkit-transform: scale(1);
-    transform: scale(1);
-    opacity: 1;
-  }
-}
-@keyframes backInRight {
-  0% {
-    -webkit-transform: translateX(2000px) scale(0.7);
-    transform: translateX(2000px) scale(0.7);
-    opacity: 0.7;
-  }
-  80% {
-    -webkit-transform: translateX(0) scale(0.7);
-    transform: translateX(0) scale(0.7);
-    opacity: 0.7;
-  }
-  to {
-    -webkit-transform: scale(1);
-    transform: scale(1);
-    opacity: 1;
-  }
-}
-.animate__backInRight {
-  -webkit-animation-name: backInRight;
-  animation-name: backInRight;
-}
-@-webkit-keyframes backInUp {
-  0% {
-    -webkit-transform: translateY(1200px) scale(0.7);
-    transform: translateY(1200px) scale(0.7);
-    opacity: 0.7;
-  }
-  80% {
-    -webkit-transform: translateY(0) scale(0.7);
-    transform: translateY(0) scale(0.7);
-    opacity: 0.7;
-  }
-  to {
-    -webkit-transform: scale(1);
-    transform: scale(1);
-    opacity: 1;
-  }
-}
-@keyframes backInUp {
-  0% {
-    -webkit-transform: translateY(1200px) scale(0.7);
-    transform: translateY(1200px) scale(0.7);
-    opacity: 0.7;
-  }
-  80% {
-    -webkit-transform: translateY(0) scale(0.7);
-    transform: translateY(0) scale(0.7);
-    opacity: 0.7;
-  }
-  to {
-    -webkit-transform: scale(1);
-    transform: scale(1);
-    opacity: 1;
-  }
-}
-.animate__backInUp {
-  -webkit-animation-name: backInUp;
-  animation-name: backInUp;
-}
-@-webkit-keyframes backOutDown {
-  0% {
-    -webkit-transform: scale(1);
-    transform: scale(1);
-    opacity: 1;
-  }
-  20% {
-    -webkit-transform: translateY(0) scale(0.7);
-    transform: translateY(0) scale(0.7);
-    opacity: 0.7;
-  }
-  to {
-    -webkit-transform: translateY(700px) scale(0.7);
-    transform: translateY(700px) scale(0.7);
-    opacity: 0.7;
-  }
-}
-@keyframes backOutDown {
-  0% {
-    -webkit-transform: scale(1);
-    transform: scale(1);
-    opacity: 1;
-  }
-  20% {
-    -webkit-transform: translateY(0) scale(0.7);
-    transform: translateY(0) scale(0.7);
-    opacity: 0.7;
-  }
-  to {
-    -webkit-transform: translateY(700px) scale(0.7);
-    transform: translateY(700px) scale(0.7);
-    opacity: 0.7;
-  }
-}
-.animate__backOutDown {
-  -webkit-animation-name: backOutDown;
-  animation-name: backOutDown;
-}
-@-webkit-keyframes backOutLeft {
-  0% {
-    -webkit-transform: scale(1);
-    transform: scale(1);
-    opacity: 1;
-  }
-  20% {
-    -webkit-transform: translateX(0) scale(0.7);
-    transform: translateX(0) scale(0.7);
-    opacity: 0.7;
-  }
-  to {
-    -webkit-transform: translateX(-2000px) scale(0.7);
-    transform: translateX(-2000px) scale(0.7);
-    opacity: 0.7;
-  }
-}
-@keyframes backOutLeft {
-  0% {
-    -webkit-transform: scale(1);
-    transform: scale(1);
-    opacity: 1;
-  }
-  20% {
-    -webkit-transform: translateX(0) scale(0.7);
-    transform: translateX(0) scale(0.7);
-    opacity: 0.7;
-  }
-  to {
-    -webkit-transform: translateX(-2000px) scale(0.7);
-    transform: translateX(-2000px) scale(0.7);
-    opacity: 0.7;
-  }
-}
-.animate__backOutLeft {
-  -webkit-animation-name: backOutLeft;
-  animation-name: backOutLeft;
-}
-@-webkit-keyframes backOutRight {
-  0% {
-    -webkit-transform: scale(1);
-    transform: scale(1);
-    opacity: 1;
-  }
-  20% {
-    -webkit-transform: translateX(0) scale(0.7);
-    transform: translateX(0) scale(0.7);
-    opacity: 0.7;
-  }
-  to {
-    -webkit-transform: translateX(2000px) scale(0.7);
-    transform: translateX(2000px) scale(0.7);
-    opacity: 0.7;
-  }
-}
-@keyframes backOutRight {
-  0% {
-    -webkit-transform: scale(1);
-    transform: scale(1);
-    opacity: 1;
-  }
-  20% {
-    -webkit-transform: translateX(0) scale(0.7);
-    transform: translateX(0) scale(0.7);
-    opacity: 0.7;
-  }
-  to {
-    -webkit-transform: translateX(2000px) scale(0.7);
-    transform: translateX(2000px) scale(0.7);
-    opacity: 0.7;
-  }
-}
-.animate__backOutRight {
-  -webkit-animation-name: backOutRight;
-  animation-name: backOutRight;
-}
-@-webkit-keyframes backOutUp {
-  0% {
-    -webkit-transform: scale(1);
-    transform: scale(1);
-    opacity: 1;
-  }
-  20% {
-    -webkit-transform: translateY(0) scale(0.7);
-    transform: translateY(0) scale(0.7);
-    opacity: 0.7;
-  }
-  to {
-    -webkit-transform: translateY(-700px) scale(0.7);
-    transform: translateY(-700px) scale(0.7);
-    opacity: 0.7;
-  }
-}
-@keyframes backOutUp {
-  0% {
-    -webkit-transform: scale(1);
-    transform: scale(1);
-    opacity: 1;
-  }
-  20% {
-    -webkit-transform: translateY(0) scale(0.7);
-    transform: translateY(0) scale(0.7);
-    opacity: 0.7;
-  }
-  to {
-    -webkit-transform: translateY(-700px) scale(0.7);
-    transform: translateY(-700px) scale(0.7);
-    opacity: 0.7;
-  }
-}
-.animate__backOutUp {
-  -webkit-animation-name: backOutUp;
-  animation-name: backOutUp;
-}
-@-webkit-keyframes bounceIn {
-  0%,
-  20%,
-  40%,
-  60%,
-  80%,
-  to {
-    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-  }
-  0% {
-    opacity: 0;
-    -webkit-transform: scale3d(0.3, 0.3, 0.3);
-    transform: scale3d(0.3, 0.3, 0.3);
-  }
-  20% {
-    -webkit-transform: scale3d(1.1, 1.1, 1.1);
-    transform: scale3d(1.1, 1.1, 1.1);
-  }
-  40% {
-    -webkit-transform: scale3d(0.9, 0.9, 0.9);
-    transform: scale3d(0.9, 0.9, 0.9);
-  }
-  60% {
-    opacity: 1;
-    -webkit-transform: scale3d(1.03, 1.03, 1.03);
-    transform: scale3d(1.03, 1.03, 1.03);
-  }
-  80% {
-    -webkit-transform: scale3d(0.97, 0.97, 0.97);
-    transform: scale3d(0.97, 0.97, 0.97);
-  }
-  to {
-    opacity: 1;
-    -webkit-transform: scaleX(1);
-    transform: scaleX(1);
-  }
-}
-@keyframes bounceIn {
-  0%,
-  20%,
-  40%,
-  60%,
-  80%,
-  to {
-    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-  }
-  0% {
-    opacity: 0;
-    -webkit-transform: scale3d(0.3, 0.3, 0.3);
-    transform: scale3d(0.3, 0.3, 0.3);
-  }
-  20% {
-    -webkit-transform: scale3d(1.1, 1.1, 1.1);
-    transform: scale3d(1.1, 1.1, 1.1);
-  }
-  40% {
-    -webkit-transform: scale3d(0.9, 0.9, 0.9);
-    transform: scale3d(0.9, 0.9, 0.9);
-  }
-  60% {
-    opacity: 1;
-    -webkit-transform: scale3d(1.03, 1.03, 1.03);
-    transform: scale3d(1.03, 1.03, 1.03);
-  }
-  80% {
-    -webkit-transform: scale3d(0.97, 0.97, 0.97);
-    transform: scale3d(0.97, 0.97, 0.97);
-  }
-  to {
-    opacity: 1;
-    -webkit-transform: scaleX(1);
-    transform: scaleX(1);
-  }
-}
-.animate__bounceIn {
-  -webkit-animation-duration: 0.75s;
-  animation-duration: 0.75s;
-  -webkit-animation-duration: calc(var(--animate-duration) * 0.75);
-  animation-duration: calc(var(--animate-duration) * 0.75);
-  -webkit-animation-name: bounceIn;
-  animation-name: bounceIn;
-}
-@-webkit-keyframes bounceInDown {
-  0%,
-  60%,
-  75%,
-  90%,
-  to {
-    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-  }
-  0% {
-    opacity: 0;
-    -webkit-transform: translate3d(0, -3000px, 0) scaleY(3);
-    transform: translate3d(0, -3000px, 0) scaleY(3);
-  }
-  60% {
-    opacity: 1;
-    -webkit-transform: translate3d(0, 25px, 0) scaleY(0.9);
-    transform: translate3d(0, 25px, 0) scaleY(0.9);
-  }
-  75% {
-    -webkit-transform: translate3d(0, -10px, 0) scaleY(0.95);
-    transform: translate3d(0, -10px, 0) scaleY(0.95);
-  }
-  90% {
-    -webkit-transform: translate3d(0, 5px, 0) scaleY(0.985);
-    transform: translate3d(0, 5px, 0) scaleY(0.985);
-  }
-  to {
-    -webkit-transform: translateZ(0);
-    transform: translateZ(0);
-  }
-}
-@keyframes bounceInDown {
-  0%,
-  60%,
-  75%,
-  90%,
-  to {
-    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-  }
-  0% {
-    opacity: 0;
-    -webkit-transform: translate3d(0, -3000px, 0) scaleY(3);
-    transform: translate3d(0, -3000px, 0) scaleY(3);
-  }
-  60% {
-    opacity: 1;
-    -webkit-transform: translate3d(0, 25px, 0) scaleY(0.9);
-    transform: translate3d(0, 25px, 0) scaleY(0.9);
-  }
-  75% {
-    -webkit-transform: translate3d(0, -10px, 0) scaleY(0.95);
-    transform: translate3d(0, -10px, 0) scaleY(0.95);
-  }
-  90% {
-    -webkit-transform: translate3d(0, 5px, 0) scaleY(0.985);
-    transform: translate3d(0, 5px, 0) scaleY(0.985);
-  }
-  to {
-    -webkit-transform: translateZ(0);
-    transform: translateZ(0);
-  }
-}
-.animate__bounceInDown {
-  -webkit-animation-name: bounceInDown;
-  animation-name: bounceInDown;
-}
-@-webkit-keyframes bounceInLeft {
-  0%,
-  60%,
-  75%,
-  90%,
-  to {
-    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-  }
-  0% {
-    opacity: 0;
-    -webkit-transform: translate3d(-3000px, 0, 0) scaleX(3);
-    transform: translate3d(-3000px, 0, 0) scaleX(3);
-  }
-  60% {
-    opacity: 1;
-    -webkit-transform: translate3d(25px, 0, 0) scaleX(1);
-    transform: translate3d(25px, 0, 0) scaleX(1);
-  }
-  75% {
-    -webkit-transform: translate3d(-10px, 0, 0) scaleX(0.98);
-    transform: translate3d(-10px, 0, 0) scaleX(0.98);
-  }
-  90% {
-    -webkit-transform: translate3d(5px, 0, 0) scaleX(0.995);
-    transform: translate3d(5px, 0, 0) scaleX(0.995);
-  }
-  to {
-    -webkit-transform: translateZ(0);
-    transform: translateZ(0);
-  }
-}
-@keyframes bounceInLeft {
-  0%,
-  60%,
-  75%,
-  90%,
-  to {
-    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-  }
-  0% {
-    opacity: 0;
-    -webkit-transform: translate3d(-3000px, 0, 0) scaleX(3);
-    transform: translate3d(-3000px, 0, 0) scaleX(3);
-  }
-  60% {
-    opacity: 1;
-    -webkit-transform: translate3d(25px, 0, 0) scaleX(1);
-    transform: translate3d(25px, 0, 0) scaleX(1);
-  }
-  75% {
-    -webkit-transform: translate3d(-10px, 0, 0) scaleX(0.98);
-    transform: translate3d(-10px, 0, 0) scaleX(0.98);
-  }
-  90% {
-    -webkit-transform: translate3d(5px, 0, 0) scaleX(0.995);
-    transform: translate3d(5px, 0, 0) scaleX(0.995);
-  }
-  to {
-    -webkit-transform: translateZ(0);
-    transform: translateZ(0);
-  }
-}
-.animate__bounceInLeft {
-  -webkit-animation-name: bounceInLeft;
-  animation-name: bounceInLeft;
-}
-@-webkit-keyframes bounceInRight {
-  0%,
-  60%,
-  75%,
-  90%,
-  to {
-    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-  }
-  0% {
-    opacity: 0;
-    -webkit-transform: translate3d(3000px, 0, 0) scaleX(3);
-    transform: translate3d(3000px, 0, 0) scaleX(3);
-  }
-  60% {
-    opacity: 1;
-    -webkit-transform: translate3d(-25px, 0, 0) scaleX(1);
-    transform: translate3d(-25px, 0, 0) scaleX(1);
-  }
-  75% {
-    -webkit-transform: translate3d(10px, 0, 0) scaleX(0.98);
-    transform: translate3d(10px, 0, 0) scaleX(0.98);
-  }
-  90% {
-    -webkit-transform: translate3d(-5px, 0, 0) scaleX(0.995);
-    transform: translate3d(-5px, 0, 0) scaleX(0.995);
-  }
-  to {
-    -webkit-transform: translateZ(0);
-    transform: translateZ(0);
-  }
-}
-@keyframes bounceInRight {
-  0%,
-  60%,
-  75%,
-  90%,
-  to {
-    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-  }
-  0% {
-    opacity: 0;
-    -webkit-transform: translate3d(3000px, 0, 0) scaleX(3);
-    transform: translate3d(3000px, 0, 0) scaleX(3);
-  }
-  60% {
-    opacity: 1;
-    -webkit-transform: translate3d(-25px, 0, 0) scaleX(1);
-    transform: translate3d(-25px, 0, 0) scaleX(1);
-  }
-  75% {
-    -webkit-transform: translate3d(10px, 0, 0) scaleX(0.98);
-    transform: translate3d(10px, 0, 0) scaleX(0.98);
-  }
-  90% {
-    -webkit-transform: translate3d(-5px, 0, 0) scaleX(0.995);
-    transform: translate3d(-5px, 0, 0) scaleX(0.995);
-  }
-  to {
-    -webkit-transform: translateZ(0);
-    transform: translateZ(0);
-  }
-}
-.animate__bounceInRight {
-  -webkit-animation-name: bounceInRight;
-  animation-name: bounceInRight;
-}
-@-webkit-keyframes bounceInUp {
-  0%,
-  60%,
-  75%,
-  90%,
-  to {
-    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-  }
-  0% {
-    opacity: 0;
-    -webkit-transform: translate3d(0, 3000px, 0) scaleY(5);
-    transform: translate3d(0, 3000px, 0) scaleY(5);
-  }
-  60% {
-    opacity: 1;
-    -webkit-transform: translate3d(0, -20px, 0) scaleY(0.9);
-    transform: translate3d(0, -20px, 0) scaleY(0.9);
-  }
-  75% {
-    -webkit-transform: translate3d(0, 10px, 0) scaleY(0.95);
-    transform: translate3d(0, 10px, 0) scaleY(0.95);
-  }
-  90% {
-    -webkit-transform: translate3d(0, -5px, 0) scaleY(0.985);
-    transform: translate3d(0, -5px, 0) scaleY(0.985);
-  }
-  to {
-    -webkit-transform: translateZ(0);
-    transform: translateZ(0);
-  }
-}
-@keyframes bounceInUp {
-  0%,
-  60%,
-  75%,
-  90%,
-  to {
-    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-  }
-  0% {
-    opacity: 0;
-    -webkit-transform: translate3d(0, 3000px, 0) scaleY(5);
-    transform: translate3d(0, 3000px, 0) scaleY(5);
-  }
-  60% {
-    opacity: 1;
-    -webkit-transform: translate3d(0, -20px, 0) scaleY(0.9);
-    transform: translate3d(0, -20px, 0) scaleY(0.9);
-  }
-  75% {
-    -webkit-transform: translate3d(0, 10px, 0) scaleY(0.95);
-    transform: translate3d(0, 10px, 0) scaleY(0.95);
-  }
-  90% {
-    -webkit-transform: translate3d(0, -5px, 0) scaleY(0.985);
-    transform: translate3d(0, -5px, 0) scaleY(0.985);
-  }
-  to {
-    -webkit-transform: translateZ(0);
-    transform: translateZ(0);
-  }
-}
-.animate__bounceInUp {
-  -webkit-animation-name: bounceInUp;
-  animation-name: bounceInUp;
-}
-@-webkit-keyframes bounceOut {
-  20% {
-    -webkit-transform: scale3d(0.9, 0.9, 0.9);
-    transform: scale3d(0.9, 0.9, 0.9);
-  }
-  50%,
-  55% {
-    opacity: 1;
-    -webkit-transform: scale3d(1.1, 1.1, 1.1);
-    transform: scale3d(1.1, 1.1, 1.1);
-  }
-  to {
-    opacity: 0;
-    -webkit-transform: scale3d(0.3, 0.3, 0.3);
-    transform: scale3d(0.3, 0.3, 0.3);
-  }
-}
-@keyframes bounceOut {
-  20% {
-    -webkit-transform: scale3d(0.9, 0.9, 0.9);
-    transform: scale3d(0.9, 0.9, 0.9);
-  }
-  50%,
-  55% {
-    opacity: 1;
-    -webkit-transform: scale3d(1.1, 1.1, 1.1);
-    transform: scale3d(1.1, 1.1, 1.1);
-  }
-  to {
-    opacity: 0;
-    -webkit-transform: scale3d(0.3, 0.3, 0.3);
-    transform: scale3d(0.3, 0.3, 0.3);
-  }
-}
-.animate__bounceOut {
-  -webkit-animation-duration: 0.75s;
-  animation-duration: 0.75s;
-  -webkit-animation-duration: calc(var(--animate-duration) * 0.75);
-  animation-duration: calc(var(--animate-duration) * 0.75);
-  -webkit-animation-name: bounceOut;
-  animation-name: bounceOut;
-}
-@-webkit-keyframes bounceOutDown {
-  20% {
-    -webkit-transform: translate3d(0, 10px, 0) scaleY(0.985);
-    transform: translate3d(0, 10px, 0) scaleY(0.985);
-  }
-  40%,
-  45% {
-    opacity: 1;
-    -webkit-transform: translate3d(0, -20px, 0) scaleY(0.9);
-    transform: translate3d(0, -20px, 0) scaleY(0.9);
-  }
-  to {
-    opacity: 0;
-    -webkit-transform: translate3d(0, 2000px, 0) scaleY(3);
-    transform: translate3d(0, 2000px, 0) scaleY(3);
-  }
-}
-@keyframes bounceOutDown {
-  20% {
-    -webkit-transform: translate3d(0, 10px, 0) scaleY(0.985);
-    transform: translate3d(0, 10px, 0) scaleY(0.985);
-  }
-  40%,
-  45% {
-    opacity: 1;
-    -webkit-transform: translate3d(0, -20px, 0) scaleY(0.9);
-    transform: translate3d(0, -20px, 0) scaleY(0.9);
-  }
-  to {
-    opacity: 0;
-    -webkit-transform: translate3d(0, 2000px, 0) scaleY(3);
-    transform: translate3d(0, 2000px, 0) scaleY(3);
-  }
-}
-.animate__bounceOutDown {
-  -webkit-animation-name: bounceOutDown;
-  animation-name: bounceOutDown;
-}
-@-webkit-keyframes bounceOutLeft {
-  20% {
-    opacity: 1;
-    -webkit-transform: translate3d(20px, 0, 0) scaleX(0.9);
-    transform: translate3d(20px, 0, 0) scaleX(0.9);
-  }
-  to {
-    opacity: 0;
-    -webkit-transform: translate3d(-2000px, 0, 0) scaleX(2);
-    transform: translate3d(-2000px, 0, 0) scaleX(2);
-  }
-}
-@keyframes bounceOutLeft {
-  20% {
-    opacity: 1;
-    -webkit-transform: translate3d(20px, 0, 0) scaleX(0.9);
-    transform: translate3d(20px, 0, 0) scaleX(0.9);
-  }
-  to {
-    opacity: 0;
-    -webkit-transform: translate3d(-2000px, 0, 0) scaleX(2);
-    transform: translate3d(-2000px, 0, 0) scaleX(2);
-  }
-}
-.animate__bounceOutLeft {
-  -webkit-animation-name: bounceOutLeft;
-  animation-name: bounceOutLeft;
-}
-@-webkit-keyframes bounceOutRight {
-  20% {
-    opacity: 1;
-    -webkit-transform: translate3d(-20px, 0, 0) scaleX(0.9);
-    transform: translate3d(-20px, 0, 0) scaleX(0.9);
-  }
-  to {
-    opacity: 0;
-    -webkit-transform: translate3d(2000px, 0, 0) scaleX(2);
-    transform: translate3d(2000px, 0, 0) scaleX(2);
-  }
-}
-@keyframes bounceOutRight {
-  20% {
-    opacity: 1;
-    -webkit-transform: translate3d(-20px, 0, 0) scaleX(0.9);
-    transform: translate3d(-20px, 0, 0) scaleX(0.9);
-  }
-  to {
-    opacity: 0;
-    -webkit-transform: translate3d(2000px, 0, 0) scaleX(2);
-    transform: translate3d(2000px, 0, 0) scaleX(2);
-  }
-}
-.animate__bounceOutRight {
-  -webkit-animation-name: bounceOutRight;
-  animation-name: bounceOutRight;
-}
-@-webkit-keyframes bounceOutUp {
-  20% {
-    -webkit-transform: translate3d(0, -10px, 0) scaleY(0.985);
-    transform: translate3d(0, -10px, 0) scaleY(0.985);
-  }
-  40%,
-  45% {
-    opacity: 1;
-    -webkit-transform: translate3d(0, 20px, 0) scaleY(0.9);
-    transform: translate3d(0, 20px, 0) scaleY(0.9);
-  }
-  to {
-    opacity: 0;
-    -webkit-transform: translate3d(0, -2000px, 0) scaleY(3);
-    transform: translate3d(0, -2000px, 0) scaleY(3);
-  }
-}
-@keyframes bounceOutUp {
-  20% {
-    -webkit-transform: translate3d(0, -10px, 0) scaleY(0.985);
-    transform: translate3d(0, -10px, 0) scaleY(0.985);
-  }
-  40%,
-  45% {
-    opacity: 1;
-    -webkit-transform: translate3d(0, 20px, 0) scaleY(0.9);
-    transform: translate3d(0, 20px, 0) scaleY(0.9);
-  }
-  to {
-    opacity: 0;
-    -webkit-transform: translate3d(0, -2000px, 0) scaleY(3);
-    transform: translate3d(0, -2000px, 0) scaleY(3);
-  }
-}
-.animate__bounceOutUp {
-  -webkit-animation-name: bounceOutUp;
-  animation-name: bounceOutUp;
-}
-@-webkit-keyframes fadeIn {
-  0% {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-@keyframes fadeIn {
-  0% {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-.animate__fadeIn {
-  -webkit-animation-name: fadeIn;
-  animation-name: fadeIn;
-}
-@-webkit-keyframes fadeInDown {
-  0% {
-    opacity: 0;
-    -webkit-transform: translate3d(0, -100%, 0);
-    transform: translate3d(0, -100%, 0);
-  }
-  to {
-    opacity: 1;
-    -webkit-transform: translateZ(0);
-    transform: translateZ(0);
-  }
-}
-@keyframes fadeInDown {
-  0% {
-    opacity: 0;
-    -webkit-transform: translate3d(0, -100%, 0);
-    transform: translate3d(0, -100%, 0);
-  }
-  to {
-    opacity: 1;
-    -webkit-transform: translateZ(0);
-    transform: translateZ(0);
-  }
-}
-.animate__fadeInDown {
-  -webkit-animation-name: fadeInDown;
-  animation-name: fadeInDown;
-}
-@-webkit-keyframes fadeInDownBig {
-  0% {
-    opacity: 0;
-    -webkit-transform: translate3d(0, -2000px, 0);
-    transform: translate3d(0, -2000px, 0);
-  }
-  to {
-    opacity: 1;
-    -webkit-transform: translateZ(0);
-    transform: translateZ(0);
-  }
-}
-@keyframes fadeInDownBig {
-  0% {
-    opacity: 0;
-    -webkit-transform: translate3d(0, -2000px, 0);
-    transform: translate3d(0, -2000px, 0);
-  }
-  to {
-    opacity: 1;
-    -webkit-transform: translateZ(0);
-    transform: translateZ(0);
-  }
-}
-.animate__fadeInDownBig {
-  -webkit-animation-name: fadeInDownBig;
-  animation-name: fadeInDownBig;
-}
-@-webkit-keyframes fadeInLeft {
-  0% {
-    opacity: 0;
-    -webkit-transform: translate3d(-100%, 0, 0);
-    transform: translate3d(-100%, 0, 0);
-  }
-  to {
-    opacity: 1;
-    -webkit-transform: translateZ(0);
-    transform: translateZ(0);
-  }
-}
-@keyframes fadeInLeft {
-  0% {
-    opacity: 0;
-    -webkit-transform: translate3d(-100%, 0, 0);
-    transform: translate3d(-100%, 0, 0);
-  }
-  to {
-    opacity: 1;
-    -webkit-transform: translateZ(0);
-    transform: translateZ(0);
-  }
-}
-.animate__fadeInLeft {
-  -webkit-animation-name: fadeInLeft;
-  animation-name: fadeInLeft;
-}
-@-webkit-keyframes fadeInLeftBig {
-  0% {
-    opacity: 0;
-    -webkit-transform: translate3d(-2000px, 0, 0);
-    transform: translate3d(-2000px, 0, 0);
-  }
-  to {
-    opacity: 1;
-    -webkit-transform: translateZ(0);
-    transform: translateZ(0);
-  }
-}
-@keyframes fadeInLeftBig {
-  0% {
-    opacity: 0;
-    -webkit-transform: translate3d(-2000px, 0, 0);
-    transform: translate3d(-2000px, 0, 0);
-  }
-  to {
-    opacity: 1;
-    -webkit-transform: translateZ(0);
-    transform: translateZ(0);
-  }
-}
-.animate__fadeInLeftBig {
-  -webkit-animation-name: fadeInLeftBig;
-  animation-name: fadeInLeftBig;
-}
-@-webkit-keyframes fadeInRight {
-  0% {
-    opacity: 0;
-    -webkit-transform: translate3d(100%, 0, 0);
-    transform: translate3d(100%, 0, 0);
-  }
-  to {
-    opacity: 1;
-    -webkit-transform: translateZ(0);
-    transform: translateZ(0);
-  }
-}
-@keyframes fadeInRight {
-  0% {
-    opacity: 0;
-    -webkit-transform: translate3d(100%, 0, 0);
-    transform: translate3d(100%, 0, 0);
-  }
-  to {
-    opacity: 1;
-    -webkit-transform: translateZ(0);
-    transform: translateZ(0);
-  }
-}
-.animate__fadeInRight {
-  -webkit-animation-name: fadeInRight;
-  animation-name: fadeInRight;
-}
-@-webkit-keyframes fadeInRightBig {
-  0% {
-    opacity: 0;
-    -webkit-transform: translate3d(2000px, 0, 0);
-    transform: translate3d(2000px, 0, 0);
-  }
-  to {
-    opacity: 1;
-    -webkit-transform: translateZ(0);
-    transform: translateZ(0);
-  }
-}
-@keyframes fadeInRightBig {
-  0% {
-    opacity: 0;
-    -webkit-transform: translate3d(2000px, 0, 0);
-    transform: translate3d(2000px, 0, 0);
-  }
-  to {
-    opacity: 1;
-    -webkit-transform: translateZ(0);
-    transform: translateZ(0);
-  }
-}
-.animate__fadeInRightBig {
-  -webkit-animation-name: fadeInRightBig;
-  animation-name: fadeInRightBig;
-}
-@-webkit-keyframes fadeInUp {
-  0% {
-    opacity: 0;
-    -webkit-transform: translate3d(0, 100%, 0);
-    transform: translate3d(0, 100%, 0);
-  }
-  to {
-    opacity: 1;
-    -webkit-transform: translateZ(0);
-    transform: translateZ(0);
-  }
-}
-@keyframes fadeInUp {
-  0% {
-    opacity: 0;
-    -webkit-transform: translate3d(0, 100%, 0);
-    transform: translate3d(0, 100%, 0);
-  }
-  to {
-    opacity: 1;
-    -webkit-transform: translateZ(0);
-    transform: translateZ(0);
-  }
-}
-.animate__fadeInUp {
-  -webkit-animation-name: fadeInUp;
-  animation-name: fadeInUp;
-}
-@-webkit-keyframes fadeInUpBig {
-  0% {
-    opacity: 0;
-    -webkit-transform: translate3d(0, 2000px, 0);
-    transform: translate3d(0, 2000px, 0);
-  }
-  to {
-    opacity: 1;
-    -webkit-transform: translateZ(0);
-    transform: translateZ(0);
-  }
-}
-@keyframes fadeInUpBig {
-  0% {
-    opacity: 0;
-    -webkit-transform: translate3d(0, 2000px, 0);
-    transform: translate3d(0, 2000px, 0);
-  }
-  to {
-    opacity: 1;
-    -webkit-transform: translateZ(0);
-    transform: translateZ(0);
-  }
-}
-.animate__fadeInUpBig {
-  -webkit-animation-name: fadeInUpBig;
-  animation-name: fadeInUpBig;
-}
-@-webkit-keyframes fadeInTopLeft {
-  0% {
-    opacity: 0;
-    -webkit-transform: translate3d(-100%, -100%, 0);
-    transform: translate3d(-100%, -100%, 0);
-  }
-  to {
-    opacity: 1;
-    -webkit-transform: translateZ(0);
-    transform: translateZ(0);
-  }
-}
-@keyframes fadeInTopLeft {
-  0% {
-    opacity: 0;
-    -webkit-transform: translate3d(-100%, -100%, 0);
-    transform: translate3d(-100%, -100%, 0);
-  }
-  to {
-    opacity: 1;
-    -webkit-transform: translateZ(0);
-    transform: translateZ(0);
-  }
-}
-.animate__fadeInTopLeft {
-  -webkit-animation-name: fadeInTopLeft;
-  animation-name: fadeInTopLeft;
-}
-@-webkit-keyframes fadeInTopRight {
-  0% {
-    opacity: 0;
-    -webkit-transform: translate3d(100%, -100%, 0);
-    transform: translate3d(100%, -100%, 0);
-  }
-  to {
-    opacity: 1;
-    -webkit-transform: translateZ(0);
-    transform: translateZ(0);
-  }
-}
-@keyframes fadeInTopRight {
-  0% {
-    opacity: 0;
-    -webkit-transform: translate3d(100%, -100%, 0);
-    transform: translate3d(100%, -100%, 0);
-  }
-  to {
-    opacity: 1;
-    -webkit-transform: translateZ(0);
-    transform: translateZ(0);
-  }
-}
-.animate__fadeInTopRight {
-  -webkit-animation-name: fadeInTopRight;
-  animation-name: fadeInTopRight;
-}
-@-webkit-keyframes fadeInBottomLeft {
-  0% {
-    opacity: 0;
-    -webkit-transform: translate3d(-100%, 100%, 0);
-    transform: translate3d(-100%, 100%, 0);
-  }
-  to {
-    opacity: 1;
-    -webkit-transform: translateZ(0);
-    transform: translateZ(0);
-  }
-}
-@keyframes fadeInBottomLeft {
-  0% {
-    opacity: 0;
-    -webkit-transform: translate3d(-100%, 100%, 0);
-    transform: translate3d(-100%, 100%, 0);
-  }
-  to {
-    opacity: 1;
-    -webkit-transform: translateZ(0);
-    transform: translateZ(0);
-  }
-}
-.animate__fadeInBottomLeft {
-  -webkit-animation-name: fadeInBottomLeft;
-  animation-name: fadeInBottomLeft;
-}
-@-webkit-keyframes fadeInBottomRight {
-  0% {
-    opacity: 0;
-    -webkit-transform: translate3d(100%, 100%, 0);
-    transform: translate3d(100%, 100%, 0);
-  }
-  to {
-    opacity: 1;
-    -webkit-transform: translateZ(0);
-    transform: translateZ(0);
-  }
-}
-@keyframes fadeInBottomRight {
-  0% {
-    opacity: 0;
-    -webkit-transform: translate3d(100%, 100%, 0);
-    transform: translate3d(100%, 100%, 0);
-  }
-  to {
-    opacity: 1;
-    -webkit-transform: translateZ(0);
-    transform: translateZ(0);
-  }
-}
-.animate__fadeInBottomRight {
-  -webkit-animation-name: fadeInBottomRight;
-  animation-name: fadeInBottomRight;
-}
-@-webkit-keyframes fadeOut {
-  0% {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-  }
-}
-@keyframes fadeOut {
-  0% {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-  }
-}
-.animate__fadeOut {
-  -webkit-animation-name: fadeOut;
-  animation-name: fadeOut;
-}
-@-webkit-keyframes fadeOutDown {
-  0% {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-    -webkit-transform: translate3d(0, 100%, 0);
-    transform: translate3d(0, 100%, 0);
-  }
-}
-@keyframes fadeOutDown {
-  0% {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-    -webkit-transform: translate3d(0, 100%, 0);
-    transform: translate3d(0, 100%, 0);
-  }
-}
-.animate__fadeOutDown {
-  -webkit-animation-name: fadeOutDown;
-  animation-name: fadeOutDown;
-}
-@-webkit-keyframes fadeOutDownBig {
-  0% {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-    -webkit-transform: translate3d(0, 2000px, 0);
-    transform: translate3d(0, 2000px, 0);
-  }
-}
-@keyframes fadeOutDownBig {
-  0% {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-    -webkit-transform: translate3d(0, 2000px, 0);
-    transform: translate3d(0, 2000px, 0);
-  }
-}
-.animate__fadeOutDownBig {
-  -webkit-animation-name: fadeOutDownBig;
-  animation-name: fadeOutDownBig;
-}
-@-webkit-keyframes fadeOutLeft {
-  0% {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-    -webkit-transform: translate3d(-100%, 0, 0);
-    transform: translate3d(-100%, 0, 0);
-  }
-}
-@keyframes fadeOutLeft {
-  0% {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-    -webkit-transform: translate3d(-100%, 0, 0);
-    transform: translate3d(-100%, 0, 0);
-  }
-}
-.animate__fadeOutLeft {
-  -webkit-animation-name: fadeOutLeft;
-  animation-name: fadeOutLeft;
-}
-@-webkit-keyframes fadeOutLeftBig {
-  0% {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-    -webkit-transform: translate3d(-2000px, 0, 0);
-    transform: translate3d(-2000px, 0, 0);
-  }
-}
-@keyframes fadeOutLeftBig {
-  0% {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-    -webkit-transform: translate3d(-2000px, 0, 0);
-    transform: translate3d(-2000px, 0, 0);
-  }
-}
-.animate__fadeOutLeftBig {
-  -webkit-animation-name: fadeOutLeftBig;
-  animation-name: fadeOutLeftBig;
-}
-@-webkit-keyframes fadeOutRight {
-  0% {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-    -webkit-transform: translate3d(100%, 0, 0);
-    transform: translate3d(100%, 0, 0);
-  }
-}
-@keyframes fadeOutRight {
-  0% {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-    -webkit-transform: translate3d(100%, 0, 0);
-    transform: translate3d(100%, 0, 0);
-  }
-}
-.animate__fadeOutRight {
-  -webkit-animation-name: fadeOutRight;
-  animation-name: fadeOutRight;
-}
-@-webkit-keyframes fadeOutRightBig {
-  0% {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-    -webkit-transform: translate3d(2000px, 0, 0);
-    transform: translate3d(2000px, 0, 0);
-  }
-}
-@keyframes fadeOutRightBig {
-  0% {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-    -webkit-transform: translate3d(2000px, 0, 0);
-    transform: translate3d(2000px, 0, 0);
-  }
-}
-.animate__fadeOutRightBig {
-  -webkit-animation-name: fadeOutRightBig;
-  animation-name: fadeOutRightBig;
-}
-@-webkit-keyframes fadeOutUp {
-  0% {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-    -webkit-transform: translate3d(0, -100%, 0);
-    transform: translate3d(0, -100%, 0);
-  }
-}
-@keyframes fadeOutUp {
-  0% {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-    -webkit-transform: translate3d(0, -100%, 0);
-    transform: translate3d(0, -100%, 0);
-  }
-}
-.animate__fadeOutUp {
-  -webkit-animation-name: fadeOutUp;
-  animation-name: fadeOutUp;
-}
-@-webkit-keyframes fadeOutUpBig {
-  0% {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-    -webkit-transform: translate3d(0, -2000px, 0);
-    transform: translate3d(0, -2000px, 0);
-  }
-}
-@keyframes fadeOutUpBig {
-  0% {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-    -webkit-transform: translate3d(0, -2000px, 0);
-    transform: translate3d(0, -2000px, 0);
-  }
-}
-.animate__fadeOutUpBig {
-  -webkit-animation-name: fadeOutUpBig;
-  animation-name: fadeOutUpBig;
-}
-@-webkit-keyframes fadeOutTopLeft {
-  0% {
-    opacity: 1;
-    -webkit-transform: translateZ(0);
-    transform: translateZ(0);
-  }
-  to {
-    opacity: 0;
-    -webkit-transform: translate3d(-100%, -100%, 0);
-    transform: translate3d(-100%, -100%, 0);
-  }
-}
-@keyframes fadeOutTopLeft {
-  0% {
-    opacity: 1;
-    -webkit-transform: translateZ(0);
-    transform: translateZ(0);
-  }
-  to {
-    opacity: 0;
-    -webkit-transform: translate3d(-100%, -100%, 0);
-    transform: translate3d(-100%, -100%, 0);
-  }
-}
-.animate__fadeOutTopLeft {
-  -webkit-animation-name: fadeOutTopLeft;
-  animation-name: fadeOutTopLeft;
-}
-@-webkit-keyframes fadeOutTopRight {
-  0% {
-    opacity: 1;
-    -webkit-transform: translateZ(0);
-    transform: translateZ(0);
-  }
-  to {
-    opacity: 0;
-    -webkit-transform: translate3d(100%, -100%, 0);
-    transform: translate3d(100%, -100%, 0);
-  }
-}
-@keyframes fadeOutTopRight {
-  0% {
-    opacity: 1;
-    -webkit-transform: translateZ(0);
-    transform: translateZ(0);
-  }
-  to {
-    opacity: 0;
-    -webkit-transform: translate3d(100%, -100%, 0);
-    transform: translate3d(100%, -100%, 0);
-  }
-}
-.animate__fadeOutTopRight {
-  -webkit-animation-name: fadeOutTopRight;
-  animation-name: fadeOutTopRight;
-}
-@-webkit-keyframes fadeOutBottomRight {
-  0% {
-    opacity: 1;
-    -webkit-transform: translateZ(0);
-    transform: translateZ(0);
-  }
-  to {
-    opacity: 0;
-    -webkit-transform: translate3d(100%, 100%, 0);
-    transform: translate3d(100%, 100%, 0);
-  }
-}
-@keyframes fadeOutBottomRight {
-  0% {
-    opacity: 1;
-    -webkit-transform: translateZ(0);
-    transform: translateZ(0);
-  }
-  to {
-    opacity: 0;
-    -webkit-transform: translate3d(100%, 100%, 0);
-    transform: translate3d(100%, 100%, 0);
-  }
-}
-.animate__fadeOutBottomRight {
-  -webkit-animation-name: fadeOutBottomRight;
-  animation-name: fadeOutBottomRight;
-}
-@-webkit-keyframes fadeOutBottomLeft {
-  0% {
-    opacity: 1;
-    -webkit-transform: translateZ(0);
-    transform: translateZ(0);
-  }
-  to {
-    opacity: 0;
-    -webkit-transform: translate3d(-100%, 100%, 0);
-    transform: translate3d(-100%, 100%, 0);
-  }
-}
-@keyframes fadeOutBottomLeft {
-  0% {
-    opacity: 1;
-    -webkit-transform: translateZ(0);
-    transform: translateZ(0);
-  }
-  to {
-    opacity: 0;
-    -webkit-transform: translate3d(-100%, 100%, 0);
-    transform: translate3d(-100%, 100%, 0);
-  }
-}
-.animate__fadeOutBottomLeft {
-  -webkit-animation-name: fadeOutBottomLeft;
-  animation-name: fadeOutBottomLeft;
-}
-@-webkit-keyframes flip {
-  0% {
-    -webkit-transform: perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn);
-    transform: perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn);
-    -webkit-animation-timing-function: ease-out;
-    animation-timing-function: ease-out;
-  }
-  40% {
-    -webkit-transform: perspective(400px) scaleX(1) translateZ(150px) rotateY(-190deg);
-    transform: perspective(400px) scaleX(1) translateZ(150px) rotateY(-190deg);
-    -webkit-animation-timing-function: ease-out;
-    animation-timing-function: ease-out;
-  }
-  50% {
-    -webkit-transform: perspective(400px) scaleX(1) translateZ(150px) rotateY(-170deg);
-    transform: perspective(400px) scaleX(1) translateZ(150px) rotateY(-170deg);
-    -webkit-animation-timing-function: ease-in;
-    animation-timing-function: ease-in;
-  }
-  80% {
-    -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translateZ(0) rotateY(0deg);
-    transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translateZ(0) rotateY(0deg);
-    -webkit-animation-timing-function: ease-in;
-    animation-timing-function: ease-in;
-  }
-  to {
-    -webkit-transform: perspective(400px) scaleX(1) translateZ(0) rotateY(0deg);
-    transform: perspective(400px) scaleX(1) translateZ(0) rotateY(0deg);
-    -webkit-animation-timing-function: ease-in;
-    animation-timing-function: ease-in;
-  }
-}
-@keyframes flip {
-  0% {
-    -webkit-transform: perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn);
-    transform: perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn);
-    -webkit-animation-timing-function: ease-out;
-    animation-timing-function: ease-out;
-  }
-  40% {
-    -webkit-transform: perspective(400px) scaleX(1) translateZ(150px) rotateY(-190deg);
-    transform: perspective(400px) scaleX(1) translateZ(150px) rotateY(-190deg);
-    -webkit-animation-timing-function: ease-out;
-    animation-timing-function: ease-out;
-  }
-  50% {
-    -webkit-transform: perspective(400px) scaleX(1) translateZ(150px) rotateY(-170deg);
-    transform: perspective(400px) scaleX(1) translateZ(150px) rotateY(-170deg);
-    -webkit-animation-timing-function: ease-in;
-    animation-timing-function: ease-in;
-  }
-  80% {
-    -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translateZ(0) rotateY(0deg);
-    transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translateZ(0) rotateY(0deg);
-    -webkit-animation-timing-function: ease-in;
-    animation-timing-function: ease-in;
-  }
-  to {
-    -webkit-transform: perspective(400px) scaleX(1) translateZ(0) rotateY(0deg);
-    transform: perspective(400px) scaleX(1) translateZ(0) rotateY(0deg);
-    -webkit-animation-timing-function: ease-in;
-    animation-timing-function: ease-in;
-  }
-}
-.animate__animated.animate__flip {
-  -webkit-backface-visibility: visible;
-  backface-visibility: visible;
-  -webkit-animation-name: flip;
-  animation-name: flip;
-}
-@-webkit-keyframes flipInX {
-  0% {
-    -webkit-transform: perspective(400px) rotateX(90deg);
-    transform: perspective(400px) rotateX(90deg);
-    -webkit-animation-timing-function: ease-in;
-    animation-timing-function: ease-in;
-    opacity: 0;
-  }
-  40% {
-    -webkit-transform: perspective(400px) rotateX(-20deg);
-    transform: perspective(400px) rotateX(-20deg);
-    -webkit-animation-timing-function: ease-in;
-    animation-timing-function: ease-in;
-  }
-  60% {
-    -webkit-transform: perspective(400px) rotateX(10deg);
-    transform: perspective(400px) rotateX(10deg);
-    opacity: 1;
-  }
-  80% {
-    -webkit-transform: perspective(400px) rotateX(-5deg);
-    transform: perspective(400px) rotateX(-5deg);
-  }
-  to {
-    -webkit-transform: perspective(400px);
-    transform: perspective(400px);
-  }
-}
-@keyframes flipInX {
-  0% {
-    -webkit-transform: perspective(400px) rotateX(90deg);
-    transform: perspective(400px) rotateX(90deg);
-    -webkit-animation-timing-function: ease-in;
-    animation-timing-function: ease-in;
-    opacity: 0;
-  }
-  40% {
-    -webkit-transform: perspective(400px) rotateX(-20deg);
-    transform: perspective(400px) rotateX(-20deg);
-    -webkit-animation-timing-function: ease-in;
-    animation-timing-function: ease-in;
-  }
-  60% {
-    -webkit-transform: perspective(400px) rotateX(10deg);
-    transform: perspective(400px) rotateX(10deg);
-    opacity: 1;
-  }
-  80% {
-    -webkit-transform: perspective(400px) rotateX(-5deg);
-    transform: perspective(400px) rotateX(-5deg);
-  }
-  to {
-    -webkit-transform: perspective(400px);
-    transform: perspective(400px);
-  }
-}
-.animate__flipInX {
-  -webkit-backface-visibility: visible !important;
-  backface-visibility: visible !important;
-  -webkit-animation-name: flipInX;
-  animation-name: flipInX;
-}
-@-webkit-keyframes flipInY {
-  0% {
-    -webkit-transform: perspective(400px) rotateY(90deg);
-    transform: perspective(400px) rotateY(90deg);
-    -webkit-animation-timing-function: ease-in;
-    animation-timing-function: ease-in;
-    opacity: 0;
-  }
-  40% {
-    -webkit-transform: perspective(400px) rotateY(-20deg);
-    transform: perspective(400px) rotateY(-20deg);
-    -webkit-animation-timing-function: ease-in;
-    animation-timing-function: ease-in;
-  }
-  60% {
-    -webkit-transform: perspective(400px) rotateY(10deg);
-    transform: perspective(400px) rotateY(10deg);
-    opacity: 1;
-  }
-  80% {
-    -webkit-transform: perspective(400px) rotateY(-5deg);
-    transform: perspective(400px) rotateY(-5deg);
-  }
-  to {
-    -webkit-transform: perspective(400px);
-    transform: perspective(400px);
-  }
-}
-@keyframes flipInY {
-  0% {
-    -webkit-transform: perspective(400px) rotateY(90deg);
-    transform: perspective(400px) rotateY(90deg);
-    -webkit-animation-timing-function: ease-in;
-    animation-timing-function: ease-in;
-    opacity: 0;
-  }
-  40% {
-    -webkit-transform: perspective(400px) rotateY(-20deg);
-    transform: perspective(400px) rotateY(-20deg);
-    -webkit-animation-timing-function: ease-in;
-    animation-timing-function: ease-in;
-  }
-  60% {
-    -webkit-transform: perspective(400px) rotateY(10deg);
-    transform: perspective(400px) rotateY(10deg);
-    opacity: 1;
-  }
-  80% {
-    -webkit-transform: perspective(400px) rotateY(-5deg);
-    transform: perspective(400px) rotateY(-5deg);
-  }
-  to {
-    -webkit-transform: perspective(400px);
-    transform: perspective(400px);
-  }
-}
-.animate__flipInY {
-  -webkit-backface-visibility: visible !important;
-  backface-visibility: visible !important;
-  -webkit-animation-name: flipInY;
-  animation-name: flipInY;
-}
-@-webkit-keyframes flipOutX {
-  0% {
-    -webkit-transform: perspective(400px);
-    transform: perspective(400px);
-  }
-  30% {
-    -webkit-transform: perspective(400px) rotateX(-20deg);
-    transform: perspective(400px) rotateX(-20deg);
-    opacity: 1;
-  }
-  to {
-    -webkit-transform: perspective(400px) rotateX(90deg);
-    transform: perspective(400px) rotateX(90deg);
-    opacity: 0;
-  }
-}
-@keyframes flipOutX {
-  0% {
-    -webkit-transform: perspective(400px);
-    transform: perspective(400px);
-  }
-  30% {
-    -webkit-transform: perspective(400px) rotateX(-20deg);
-    transform: perspective(400px) rotateX(-20deg);
-    opacity: 1;
-  }
-  to {
-    -webkit-transform: perspective(400px) rotateX(90deg);
-    transform: perspective(400px) rotateX(90deg);
-    opacity: 0;
-  }
-}
-.animate__flipOutX {
-  -webkit-animation-duration: 0.75s;
-  animation-duration: 0.75s;
-  -webkit-animation-duration: calc(var(--animate-duration) * 0.75);
-  animation-duration: calc(var(--animate-duration) * 0.75);
-  -webkit-animation-name: flipOutX;
-  animation-name: flipOutX;
-  -webkit-backface-visibility: visible !important;
-  backface-visibility: visible !important;
-}
-@-webkit-keyframes flipOutY {
-  0% {
-    -webkit-transform: perspective(400px);
-    transform: perspective(400px);
-  }
-  30% {
-    -webkit-transform: perspective(400px) rotateY(-15deg);
-    transform: perspective(400px) rotateY(-15deg);
-    opacity: 1;
-  }
-  to {
-    -webkit-transform: perspective(400px) rotateY(90deg);
-    transform: perspective(400px) rotateY(90deg);
-    opacity: 0;
-  }
-}
-@keyframes flipOutY {
-  0% {
-    -webkit-transform: perspective(400px);
-    transform: perspective(400px);
-  }
-  30% {
-    -webkit-transform: perspective(400px) rotateY(-15deg);
-    transform: perspective(400px) rotateY(-15deg);
-    opacity: 1;
-  }
-  to {
-    -webkit-transform: perspective(400px) rotateY(90deg);
-    transform: perspective(400px) rotateY(90deg);
-    opacity: 0;
-  }
-}
-.animate__flipOutY {
-  -webkit-animation-duration: 0.75s;
-  animation-duration: 0.75s;
-  -webkit-animation-duration: calc(var(--animate-duration) * 0.75);
-  animation-duration: calc(var(--animate-duration) * 0.75);
-  -webkit-backface-visibility: visible !important;
-  backface-visibility: visible !important;
-  -webkit-animation-name: flipOutY;
-  animation-name: flipOutY;
-}
-@-webkit-keyframes lightSpeedInRight {
-  0% {
-    -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
-    transform: translate3d(100%, 0, 0) skewX(-30deg);
-    opacity: 0;
-  }
-  60% {
-    -webkit-transform: skewX(20deg);
-    transform: skewX(20deg);
-    opacity: 1;
-  }
-  80% {
-    -webkit-transform: skewX(-5deg);
-    transform: skewX(-5deg);
-  }
-  to {
-    -webkit-transform: translateZ(0);
-    transform: translateZ(0);
-  }
-}
-@keyframes lightSpeedInRight {
-  0% {
-    -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
-    transform: translate3d(100%, 0, 0) skewX(-30deg);
-    opacity: 0;
-  }
-  60% {
-    -webkit-transform: skewX(20deg);
-    transform: skewX(20deg);
-    opacity: 1;
-  }
-  80% {
-    -webkit-transform: skewX(-5deg);
-    transform: skewX(-5deg);
-  }
-  to {
-    -webkit-transform: translateZ(0);
-    transform: translateZ(0);
-  }
-}
-.animate__lightSpeedInRight {
-  -webkit-animation-name: lightSpeedInRight;
-  animation-name: lightSpeedInRight;
-  -webkit-animation-timing-function: ease-out;
-  animation-timing-function: ease-out;
-}
-@-webkit-keyframes lightSpeedInLeft {
-  0% {
-    -webkit-transform: translate3d(-100%, 0, 0) skewX(30deg);
-    transform: translate3d(-100%, 0, 0) skewX(30deg);
-    opacity: 0;
-  }
-  60% {
-    -webkit-transform: skewX(-20deg);
-    transform: skewX(-20deg);
-    opacity: 1;
-  }
-  80% {
-    -webkit-transform: skewX(5deg);
-    transform: skewX(5deg);
-  }
-  to {
-    -webkit-transform: translateZ(0);
-    transform: translateZ(0);
-  }
-}
-@keyframes lightSpeedInLeft {
-  0% {
-    -webkit-transform: translate3d(-100%, 0, 0) skewX(30deg);
-    transform: translate3d(-100%, 0, 0) skewX(30deg);
-    opacity: 0;
-  }
-  60% {
-    -webkit-transform: skewX(-20deg);
-    transform: skewX(-20deg);
-    opacity: 1;
-  }
-  80% {
-    -webkit-transform: skewX(5deg);
-    transform: skewX(5deg);
-  }
-  to {
-    -webkit-transform: translateZ(0);
-    transform: translateZ(0);
-  }
-}
-.animate__lightSpeedInLeft {
-  -webkit-animation-name: lightSpeedInLeft;
-  animation-name: lightSpeedInLeft;
-  -webkit-animation-timing-function: ease-out;
-  animation-timing-function: ease-out;
-}
-@-webkit-keyframes lightSpeedOutRight {
-  0% {
-    opacity: 1;
-  }
-  to {
-    -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
-    transform: translate3d(100%, 0, 0) skewX(30deg);
-    opacity: 0;
-  }
-}
-@keyframes lightSpeedOutRight {
-  0% {
-    opacity: 1;
-  }
-  to {
-    -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
-    transform: translate3d(100%, 0, 0) skewX(30deg);
-    opacity: 0;
-  }
-}
-.animate__lightSpeedOutRight {
-  -webkit-animation-name: lightSpeedOutRight;
-  animation-name: lightSpeedOutRight;
-  -webkit-animation-timing-function: ease-in;
-  animation-timing-function: ease-in;
-}
-@-webkit-keyframes lightSpeedOutLeft {
-  0% {
-    opacity: 1;
-  }
-  to {
-    -webkit-transform: translate3d(-100%, 0, 0) skewX(-30deg);
-    transform: translate3d(-100%, 0, 0) skewX(-30deg);
-    opacity: 0;
-  }
-}
-@keyframes lightSpeedOutLeft {
-  0% {
-    opacity: 1;
-  }
-  to {
-    -webkit-transform: translate3d(-100%, 0, 0) skewX(-30deg);
-    transform: translate3d(-100%, 0, 0) skewX(-30deg);
-    opacity: 0;
-  }
-}
-.animate__lightSpeedOutLeft {
-  -webkit-animation-name: lightSpeedOutLeft;
-  animation-name: lightSpeedOutLeft;
-  -webkit-animation-timing-function: ease-in;
-  animation-timing-function: ease-in;
-}
-@-webkit-keyframes rotateIn {
-  0% {
-    -webkit-transform: rotate(-200deg);
-    transform: rotate(-200deg);
-    opacity: 0;
-  }
-  to {
-    -webkit-transform: translateZ(0);
-    transform: translateZ(0);
-    opacity: 1;
-  }
-}
-@keyframes rotateIn {
-  0% {
-    -webkit-transform: rotate(-200deg);
-    transform: rotate(-200deg);
-    opacity: 0;
-  }
-  to {
-    -webkit-transform: translateZ(0);
-    transform: translateZ(0);
-    opacity: 1;
-  }
-}
-.animate__rotateIn {
-  -webkit-animation-name: rotateIn;
-  animation-name: rotateIn;
-  -webkit-transform-origin: center;
-  transform-origin: center;
-}
-@-webkit-keyframes rotateInDownLeft {
-  0% {
-    -webkit-transform: rotate(-45deg);
-    transform: rotate(-45deg);
-    opacity: 0;
-  }
-  to {
-    -webkit-transform: translateZ(0);
-    transform: translateZ(0);
-    opacity: 1;
-  }
-}
-@keyframes rotateInDownLeft {
-  0% {
-    -webkit-transform: rotate(-45deg);
-    transform: rotate(-45deg);
-    opacity: 0;
-  }
-  to {
-    -webkit-transform: translateZ(0);
-    transform: translateZ(0);
-    opacity: 1;
-  }
-}
-.animate__rotateInDownLeft {
-  -webkit-animation-name: rotateInDownLeft;
-  animation-name: rotateInDownLeft;
-  -webkit-transform-origin: left bottom;
-  transform-origin: left bottom;
-}
-@-webkit-keyframes rotateInDownRight {
-  0% {
-    -webkit-transform: rotate(45deg);
-    transform: rotate(45deg);
-    opacity: 0;
-  }
-  to {
-    -webkit-transform: translateZ(0);
-    transform: translateZ(0);
-    opacity: 1;
-  }
-}
-@keyframes rotateInDownRight {
-  0% {
-    -webkit-transform: rotate(45deg);
-    transform: rotate(45deg);
-    opacity: 0;
-  }
-  to {
-    -webkit-transform: translateZ(0);
-    transform: translateZ(0);
-    opacity: 1;
-  }
-}
-.animate__rotateInDownRight {
-  -webkit-animation-name: rotateInDownRight;
-  animation-name: rotateInDownRight;
-  -webkit-transform-origin: right bottom;
-  transform-origin: right bottom;
-}
-@-webkit-keyframes rotateInUpLeft {
-  0% {
-    -webkit-transform: rotate(45deg);
-    transform: rotate(45deg);
-    opacity: 0;
-  }
-  to {
-    -webkit-transform: translateZ(0);
-    transform: translateZ(0);
-    opacity: 1;
-  }
-}
-@keyframes rotateInUpLeft {
-  0% {
-    -webkit-transform: rotate(45deg);
-    transform: rotate(45deg);
-    opacity: 0;
-  }
-  to {
-    -webkit-transform: translateZ(0);
-    transform: translateZ(0);
-    opacity: 1;
-  }
-}
-.animate__rotateInUpLeft {
-  -webkit-animation-name: rotateInUpLeft;
-  animation-name: rotateInUpLeft;
-  -webkit-transform-origin: left bottom;
-  transform-origin: left bottom;
-}
-@-webkit-keyframes rotateInUpRight {
-  0% {
-    -webkit-transform: rotate(-90deg);
-    transform: rotate(-90deg);
-    opacity: 0;
-  }
-  to {
-    -webkit-transform: translateZ(0);
-    transform: translateZ(0);
-    opacity: 1;
-  }
-}
-@keyframes rotateInUpRight {
-  0% {
-    -webkit-transform: rotate(-90deg);
-    transform: rotate(-90deg);
-    opacity: 0;
-  }
-  to {
-    -webkit-transform: translateZ(0);
-    transform: translateZ(0);
-    opacity: 1;
-  }
-}
-.animate__rotateInUpRight {
-  -webkit-animation-name: rotateInUpRight;
-  animation-name: rotateInUpRight;
-  -webkit-transform-origin: right bottom;
-  transform-origin: right bottom;
-}
-@-webkit-keyframes rotateOut {
-  0% {
-    opacity: 1;
-  }
-  to {
-    -webkit-transform: rotate(200deg);
-    transform: rotate(200deg);
-    opacity: 0;
-  }
-}
-@keyframes rotateOut {
-  0% {
-    opacity: 1;
-  }
-  to {
-    -webkit-transform: rotate(200deg);
-    transform: rotate(200deg);
-    opacity: 0;
-  }
-}
-.animate__rotateOut {
-  -webkit-animation-name: rotateOut;
-  animation-name: rotateOut;
-  -webkit-transform-origin: center;
-  transform-origin: center;
-}
-@-webkit-keyframes rotateOutDownLeft {
-  0% {
-    opacity: 1;
-  }
-  to {
-    -webkit-transform: rotate(45deg);
-    transform: rotate(45deg);
-    opacity: 0;
-  }
-}
-@keyframes rotateOutDownLeft {
-  0% {
-    opacity: 1;
-  }
-  to {
-    -webkit-transform: rotate(45deg);
-    transform: rotate(45deg);
-    opacity: 0;
-  }
-}
-.animate__rotateOutDownLeft {
-  -webkit-animation-name: rotateOutDownLeft;
-  animation-name: rotateOutDownLeft;
-  -webkit-transform-origin: left bottom;
-  transform-origin: left bottom;
-}
-@-webkit-keyframes rotateOutDownRight {
-  0% {
-    opacity: 1;
-  }
-  to {
-    -webkit-transform: rotate(-45deg);
-    transform: rotate(-45deg);
-    opacity: 0;
-  }
-}
-@keyframes rotateOutDownRight {
-  0% {
-    opacity: 1;
-  }
-  to {
-    -webkit-transform: rotate(-45deg);
-    transform: rotate(-45deg);
-    opacity: 0;
-  }
-}
-.animate__rotateOutDownRight {
-  -webkit-animation-name: rotateOutDownRight;
-  animation-name: rotateOutDownRight;
-  -webkit-transform-origin: right bottom;
-  transform-origin: right bottom;
-}
-@-webkit-keyframes rotateOutUpLeft {
-  0% {
-    opacity: 1;
-  }
-  to {
-    -webkit-transform: rotate(-45deg);
-    transform: rotate(-45deg);
-    opacity: 0;
-  }
-}
-@keyframes rotateOutUpLeft {
-  0% {
-    opacity: 1;
-  }
-  to {
-    -webkit-transform: rotate(-45deg);
-    transform: rotate(-45deg);
-    opacity: 0;
-  }
-}
-.animate__rotateOutUpLeft {
-  -webkit-animation-name: rotateOutUpLeft;
-  animation-name: rotateOutUpLeft;
-  -webkit-transform-origin: left bottom;
-  transform-origin: left bottom;
-}
-@-webkit-keyframes rotateOutUpRight {
-  0% {
-    opacity: 1;
-  }
-  to {
-    -webkit-transform: rotate(90deg);
-    transform: rotate(90deg);
-    opacity: 0;
-  }
-}
-@keyframes rotateOutUpRight {
-  0% {
-    opacity: 1;
-  }
-  to {
-    -webkit-transform: rotate(90deg);
-    transform: rotate(90deg);
-    opacity: 0;
-  }
-}
-.animate__rotateOutUpRight {
-  -webkit-animation-name: rotateOutUpRight;
-  animation-name: rotateOutUpRight;
-  -webkit-transform-origin: right bottom;
-  transform-origin: right bottom;
-}
-@-webkit-keyframes hinge {
-  0% {
-    -webkit-animation-timing-function: ease-in-out;
-    animation-timing-function: ease-in-out;
-  }
-  20%,
-  60% {
-    -webkit-transform: rotate(80deg);
-    transform: rotate(80deg);
-    -webkit-animation-timing-function: ease-in-out;
-    animation-timing-function: ease-in-out;
-  }
-  40%,
-  80% {
-    -webkit-transform: rotate(60deg);
-    transform: rotate(60deg);
-    -webkit-animation-timing-function: ease-in-out;
-    animation-timing-function: ease-in-out;
-    opacity: 1;
-  }
-  to {
-    -webkit-transform: translate3d(0, 700px, 0);
-    transform: translate3d(0, 700px, 0);
-    opacity: 0;
-  }
-}
-@keyframes hinge {
-  0% {
-    -webkit-animation-timing-function: ease-in-out;
-    animation-timing-function: ease-in-out;
-  }
-  20%,
-  60% {
-    -webkit-transform: rotate(80deg);
-    transform: rotate(80deg);
-    -webkit-animation-timing-function: ease-in-out;
-    animation-timing-function: ease-in-out;
-  }
-  40%,
-  80% {
-    -webkit-transform: rotate(60deg);
-    transform: rotate(60deg);
-    -webkit-animation-timing-function: ease-in-out;
-    animation-timing-function: ease-in-out;
-    opacity: 1;
-  }
-  to {
-    -webkit-transform: translate3d(0, 700px, 0);
-    transform: translate3d(0, 700px, 0);
-    opacity: 0;
-  }
-}
-.animate__hinge {
-  -webkit-animation-duration: 2s;
-  animation-duration: 2s;
-  -webkit-animation-duration: calc(var(--animate-duration) * 2);
-  animation-duration: calc(var(--animate-duration) * 2);
-  -webkit-animation-name: hinge;
-  animation-name: hinge;
-  -webkit-transform-origin: top left;
-  transform-origin: top left;
-}
-@-webkit-keyframes jackInTheBox {
-  0% {
-    opacity: 0;
-    -webkit-transform: scale(0.1) rotate(30deg);
-    transform: scale(0.1) rotate(30deg);
-    -webkit-transform-origin: center bottom;
-    transform-origin: center bottom;
-  }
-  50% {
-    -webkit-transform: rotate(-10deg);
-    transform: rotate(-10deg);
-  }
-  70% {
-    -webkit-transform: rotate(3deg);
-    transform: rotate(3deg);
-  }
-  to {
-    opacity: 1;
-    -webkit-transform: scale(1);
-    transform: scale(1);
-  }
-}
-@keyframes jackInTheBox {
-  0% {
-    opacity: 0;
-    -webkit-transform: scale(0.1) rotate(30deg);
-    transform: scale(0.1) rotate(30deg);
-    -webkit-transform-origin: center bottom;
-    transform-origin: center bottom;
-  }
-  50% {
-    -webkit-transform: rotate(-10deg);
-    transform: rotate(-10deg);
-  }
-  70% {
-    -webkit-transform: rotate(3deg);
-    transform: rotate(3deg);
-  }
-  to {
-    opacity: 1;
-    -webkit-transform: scale(1);
-    transform: scale(1);
-  }
-}
-.animate__jackInTheBox {
-  -webkit-animation-name: jackInTheBox;
-  animation-name: jackInTheBox;
-}
-@-webkit-keyframes rollIn {
-  0% {
-    opacity: 0;
-    -webkit-transform: translate3d(-100%, 0, 0) rotate(-120deg);
-    transform: translate3d(-100%, 0, 0) rotate(-120deg);
-  }
-  to {
-    opacity: 1;
-    -webkit-transform: translateZ(0);
-    transform: translateZ(0);
-  }
-}
-@keyframes rollIn {
-  0% {
-    opacity: 0;
-    -webkit-transform: translate3d(-100%, 0, 0) rotate(-120deg);
-    transform: translate3d(-100%, 0, 0) rotate(-120deg);
-  }
-  to {
-    opacity: 1;
-    -webkit-transform: translateZ(0);
-    transform: translateZ(0);
-  }
-}
-.animate__rollIn {
-  -webkit-animation-name: rollIn;
-  animation-name: rollIn;
-}
-@-webkit-keyframes rollOut {
-  0% {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-    -webkit-transform: translate3d(100%, 0, 0) rotate(120deg);
-    transform: translate3d(100%, 0, 0) rotate(120deg);
-  }
-}
-@keyframes rollOut {
-  0% {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-    -webkit-transform: translate3d(100%, 0, 0) rotate(120deg);
-    transform: translate3d(100%, 0, 0) rotate(120deg);
-  }
-}
-.animate__rollOut {
-  -webkit-animation-name: rollOut;
-  animation-name: rollOut;
-}
-@-webkit-keyframes zoomIn {
-  0% {
-    opacity: 0;
-    -webkit-transform: scale3d(0.3, 0.3, 0.3);
-    transform: scale3d(0.3, 0.3, 0.3);
-  }
-  50% {
-    opacity: 1;
-  }
-}
-@keyframes zoomIn {
-  0% {
-    opacity: 0;
-    -webkit-transform: scale3d(0.3, 0.3, 0.3);
-    transform: scale3d(0.3, 0.3, 0.3);
-  }
-  50% {
-    opacity: 1;
-  }
-}
-.animate__zoomIn {
-  -webkit-animation-name: zoomIn;
-  animation-name: zoomIn;
-}
-@-webkit-keyframes zoomInDown {
-  0% {
-    opacity: 0;
-    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
-    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
-    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
-    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
-  }
-  60% {
-    opacity: 1;
-    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
-    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
-    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
-    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
-  }
-}
-@keyframes zoomInDown {
-  0% {
-    opacity: 0;
-    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
-    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
-    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
-    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
-  }
-  60% {
-    opacity: 1;
-    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
-    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
-    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
-    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
-  }
-}
-.animate__zoomInDown {
-  -webkit-animation-name: zoomInDown;
-  animation-name: zoomInDown;
-}
-@-webkit-keyframes zoomInLeft {
-  0% {
-    opacity: 0;
-    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
-    transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
-    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
-    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
-  }
-  60% {
-    opacity: 1;
-    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
-    transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
-    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
-    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
-  }
-}
-@keyframes zoomInLeft {
-  0% {
-    opacity: 0;
-    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
-    transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
-    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
-    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
-  }
-  60% {
-    opacity: 1;
-    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
-    transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
-    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
-    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
-  }
-}
-.animate__zoomInLeft {
-  -webkit-animation-name: zoomInLeft;
-  animation-name: zoomInLeft;
-}
-@-webkit-keyframes zoomInRight {
-  0% {
-    opacity: 0;
-    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
-    transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
-    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
-    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
-  }
-  60% {
-    opacity: 1;
-    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
-    transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
-    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
-    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
-  }
-}
-@keyframes zoomInRight {
-  0% {
-    opacity: 0;
-    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
-    transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
-    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
-    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
-  }
-  60% {
-    opacity: 1;
-    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
-    transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
-    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
-    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
-  }
-}
-.animate__zoomInRight {
-  -webkit-animation-name: zoomInRight;
-  animation-name: zoomInRight;
-}
-@-webkit-keyframes zoomInUp {
-  0% {
-    opacity: 0;
-    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
-    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
-    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
-    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
-  }
-  60% {
-    opacity: 1;
-    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
-    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
-    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
-    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
-  }
-}
-@keyframes zoomInUp {
-  0% {
-    opacity: 0;
-    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
-    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
-    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
-    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
-  }
-  60% {
-    opacity: 1;
-    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
-    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
-    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
-    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
-  }
-}
-.animate__zoomInUp {
-  -webkit-animation-name: zoomInUp;
-  animation-name: zoomInUp;
-}
-@-webkit-keyframes zoomOut {
-  0% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0;
-    -webkit-transform: scale3d(0.3, 0.3, 0.3);
-    transform: scale3d(0.3, 0.3, 0.3);
-  }
-  to {
-    opacity: 0;
-  }
-}
-@keyframes zoomOut {
-  0% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0;
-    -webkit-transform: scale3d(0.3, 0.3, 0.3);
-    transform: scale3d(0.3, 0.3, 0.3);
-  }
-  to {
-    opacity: 0;
-  }
-}
-.animate__zoomOut {
-  -webkit-animation-name: zoomOut;
-  animation-name: zoomOut;
-}
-@-webkit-keyframes zoomOutDown {
-  40% {
-    opacity: 1;
-    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
-    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
-    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
-    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
-  }
-  to {
-    opacity: 0;
-    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
-    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
-    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
-    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
-  }
-}
-@keyframes zoomOutDown {
-  40% {
-    opacity: 1;
-    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
-    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
-    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
-    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
-  }
-  to {
-    opacity: 0;
-    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
-    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
-    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
-    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
-  }
-}
-.animate__zoomOutDown {
-  -webkit-animation-name: zoomOutDown;
-  animation-name: zoomOutDown;
-  -webkit-transform-origin: center bottom;
-  transform-origin: center bottom;
-}
-@-webkit-keyframes zoomOutLeft {
-  40% {
-    opacity: 1;
-    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
-    transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
-  }
-  to {
-    opacity: 0;
-    -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0);
-    transform: scale(0.1) translate3d(-2000px, 0, 0);
-  }
-}
-@keyframes zoomOutLeft {
-  40% {
-    opacity: 1;
-    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
-    transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
-  }
-  to {
-    opacity: 0;
-    -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0);
-    transform: scale(0.1) translate3d(-2000px, 0, 0);
-  }
-}
-.animate__zoomOutLeft {
-  -webkit-animation-name: zoomOutLeft;
-  animation-name: zoomOutLeft;
-  -webkit-transform-origin: left center;
-  transform-origin: left center;
-}
-@-webkit-keyframes zoomOutRight {
-  40% {
-    opacity: 1;
-    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
-    transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
-  }
-  to {
-    opacity: 0;
-    -webkit-transform: scale(0.1) translate3d(2000px, 0, 0);
-    transform: scale(0.1) translate3d(2000px, 0, 0);
-  }
-}
-@keyframes zoomOutRight {
-  40% {
-    opacity: 1;
-    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
-    transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
-  }
-  to {
-    opacity: 0;
-    -webkit-transform: scale(0.1) translate3d(2000px, 0, 0);
-    transform: scale(0.1) translate3d(2000px, 0, 0);
-  }
-}
-.animate__zoomOutRight {
-  -webkit-animation-name: zoomOutRight;
-  animation-name: zoomOutRight;
-  -webkit-transform-origin: right center;
-  transform-origin: right center;
-}
-@-webkit-keyframes zoomOutUp {
-  40% {
-    opacity: 1;
-    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
-    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
-    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
-    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
-  }
-  to {
-    opacity: 0;
-    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
-    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
-    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
-    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
-  }
-}
-@keyframes zoomOutUp {
-  40% {
-    opacity: 1;
-    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
-    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
-    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
-    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
-  }
-  to {
-    opacity: 0;
-    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
-    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
-    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
-    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
-  }
-}
-.animate__zoomOutUp {
-  -webkit-animation-name: zoomOutUp;
-  animation-name: zoomOutUp;
-  -webkit-transform-origin: center bottom;
-  transform-origin: center bottom;
-}
-@-webkit-keyframes slideInDown {
-  0% {
-    -webkit-transform: translate3d(0, -100%, 0);
-    transform: translate3d(0, -100%, 0);
-    visibility: visible;
-  }
-  to {
-    -webkit-transform: translateZ(0);
-    transform: translateZ(0);
-  }
-}
-@keyframes slideInDown {
-  0% {
-    -webkit-transform: translate3d(0, -100%, 0);
-    transform: translate3d(0, -100%, 0);
-    visibility: visible;
-  }
-  to {
-    -webkit-transform: translateZ(0);
-    transform: translateZ(0);
-  }
-}
-.animate__slideInDown {
-  -webkit-animation-name: slideInDown;
-  animation-name: slideInDown;
-}
-@-webkit-keyframes slideInLeft {
-  0% {
-    -webkit-transform: translate3d(-100%, 0, 0);
-    transform: translate3d(-100%, 0, 0);
-    visibility: visible;
-  }
-  to {
-    -webkit-transform: translateZ(0);
-    transform: translateZ(0);
-  }
-}
-@keyframes slideInLeft {
-  0% {
-    -webkit-transform: translate3d(-100%, 0, 0);
-    transform: translate3d(-100%, 0, 0);
-    visibility: visible;
-  }
-  to {
-    -webkit-transform: translateZ(0);
-    transform: translateZ(0);
-  }
-}
-.animate__slideInLeft {
-  -webkit-animation-name: slideInLeft;
-  animation-name: slideInLeft;
-}
-@-webkit-keyframes slideInRight {
-  0% {
-    -webkit-transform: translate3d(100%, 0, 0);
-    transform: translate3d(100%, 0, 0);
-    visibility: visible;
-  }
-  to {
-    -webkit-transform: translateZ(0);
-    transform: translateZ(0);
-  }
-}
-@keyframes slideInRight {
-  0% {
-    -webkit-transform: translate3d(100%, 0, 0);
-    transform: translate3d(100%, 0, 0);
-    visibility: visible;
-  }
-  to {
-    -webkit-transform: translateZ(0);
-    transform: translateZ(0);
-  }
-}
-.animate__slideInRight {
-  -webkit-animation-name: slideInRight;
-  animation-name: slideInRight;
-}
-@-webkit-keyframes slideInUp {
-  0% {
-    -webkit-transform: translate3d(0, 100%, 0);
-    transform: translate3d(0, 100%, 0);
-    visibility: visible;
-  }
-  to {
-    -webkit-transform: translateZ(0);
-    transform: translateZ(0);
-  }
-}
-@keyframes slideInUp {
-  0% {
-    -webkit-transform: translate3d(0, 100%, 0);
-    transform: translate3d(0, 100%, 0);
-    visibility: visible;
-  }
-  to {
-    -webkit-transform: translateZ(0);
-    transform: translateZ(0);
-  }
-}
-.animate__slideInUp {
-  -webkit-animation-name: slideInUp;
-  animation-name: slideInUp;
-}
-@-webkit-keyframes slideOutDown {
-  0% {
-    -webkit-transform: translateZ(0);
-    transform: translateZ(0);
-  }
-  to {
-    visibility: hidden;
-    -webkit-transform: translate3d(0, 100%, 0);
-    transform: translate3d(0, 100%, 0);
-  }
-}
-@keyframes slideOutDown {
-  0% {
-    -webkit-transform: translateZ(0);
-    transform: translateZ(0);
-  }
-  to {
-    visibility: hidden;
-    -webkit-transform: translate3d(0, 100%, 0);
-    transform: translate3d(0, 100%, 0);
-  }
-}
-.animate__slideOutDown {
-  -webkit-animation-name: slideOutDown;
-  animation-name: slideOutDown;
-}
-@-webkit-keyframes slideOutLeft {
-  0% {
-    -webkit-transform: translateZ(0);
-    transform: translateZ(0);
-  }
-  to {
-    visibility: hidden;
-    -webkit-transform: translate3d(-100%, 0, 0);
-    transform: translate3d(-100%, 0, 0);
-  }
-}
-@keyframes slideOutLeft {
-  0% {
-    -webkit-transform: translateZ(0);
-    transform: translateZ(0);
-  }
-  to {
-    visibility: hidden;
-    -webkit-transform: translate3d(-100%, 0, 0);
-    transform: translate3d(-100%, 0, 0);
-  }
-}
-.animate__slideOutLeft {
-  -webkit-animation-name: slideOutLeft;
-  animation-name: slideOutLeft;
-}
-@-webkit-keyframes slideOutRight {
-  0% {
-    -webkit-transform: translateZ(0);
-    transform: translateZ(0);
-  }
-  to {
-    visibility: hidden;
-    -webkit-transform: translate3d(100%, 0, 0);
-    transform: translate3d(100%, 0, 0);
-  }
-}
-@keyframes slideOutRight {
-  0% {
-    -webkit-transform: translateZ(0);
-    transform: translateZ(0);
-  }
-  to {
-    visibility: hidden;
-    -webkit-transform: translate3d(100%, 0, 0);
-    transform: translate3d(100%, 0, 0);
-  }
-}
-.animate__slideOutRight {
-  -webkit-animation-name: slideOutRight;
-  animation-name: slideOutRight;
-}
-@-webkit-keyframes slideOutUp {
-  0% {
-    -webkit-transform: translateZ(0);
-    transform: translateZ(0);
-  }
-  to {
-    visibility: hidden;
-    -webkit-transform: translate3d(0, -100%, 0);
-    transform: translate3d(0, -100%, 0);
-  }
-}
-@keyframes slideOutUp {
-  0% {
-    -webkit-transform: translateZ(0);
-    transform: translateZ(0);
-  }
-  to {
-    visibility: hidden;
-    -webkit-transform: translate3d(0, -100%, 0);
-    transform: translate3d(0, -100%, 0);
-  }
-}
-.animate__slideOutUp {
-  -webkit-animation-name: slideOutUp;
-  animation-name: slideOutUp;
-}
diff --git a/src/renderer/components.d.ts b/src/renderer/components.d.ts
index 4edc351..d3fd957 100644
--- a/src/renderer/components.d.ts
+++ b/src/renderer/components.d.ts
@@ -7,6 +7,41 @@ export {}
 /* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
+    NAvatar: typeof import('naive-ui')['NAvatar']
+    NBadge: typeof import('naive-ui')['NBadge']
+    NButton: typeof import('naive-ui')['NButton']
+    NButtonGroup: typeof import('naive-ui')['NButtonGroup']
+    NCheckbox: typeof import('naive-ui')['NCheckbox']
+    NCheckboxGroup: typeof import('naive-ui')['NCheckboxGroup']
+    NConfigProvider: typeof import('naive-ui')['NConfigProvider']
+    NDialogProvider: typeof import('naive-ui')['NDialogProvider']
+    NDrawer: typeof import('naive-ui')['NDrawer']
+    NDrawerContent: typeof import('naive-ui')['NDrawerContent']
+    NDropdown: typeof import('naive-ui')['NDropdown']
+    NEllipsis: typeof import('naive-ui')['NEllipsis']
+    NEmpty: typeof import('naive-ui')['NEmpty']
+    NForm: typeof import('naive-ui')['NForm']
+    NFormItem: typeof import('naive-ui')['NFormItem']
+    NIcon: typeof import('naive-ui')['NIcon']
+    NImage: typeof import('naive-ui')['NImage']
+    NInput: typeof import('naive-ui')['NInput']
+    NInputNumber: typeof import('naive-ui')['NInputNumber']
+    NLayout: typeof import('naive-ui')['NLayout']
+    NMessageProvider: typeof import('naive-ui')['NMessageProvider']
+    NModal: typeof import('naive-ui')['NModal']
+    NPopover: typeof import('naive-ui')['NPopover']
+    NProgress: typeof import('naive-ui')['NProgress']
+    NScrollbar: typeof import('naive-ui')['NScrollbar']
+    NSelect: typeof import('naive-ui')['NSelect']
+    NSlider: typeof import('naive-ui')['NSlider']
+    NSpace: typeof import('naive-ui')['NSpace']
+    NSpin: typeof import('naive-ui')['NSpin']
+    NSwitch: typeof import('naive-ui')['NSwitch']
+    NTabPane: typeof import('naive-ui')['NTabPane']
+    NTabs: typeof import('naive-ui')['NTabs']
+    NTag: typeof import('naive-ui')['NTag']
+    NTooltip: typeof import('naive-ui')['NTooltip']
+    NVirtualList: typeof import('naive-ui')['NVirtualList']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
   }
diff --git a/src/renderer/components/common/DonationList.vue b/src/renderer/components/common/DonationList.vue
index 5801aa2..2e43ea9 100644
--- a/src/renderer/components/common/DonationList.vue
+++ b/src/renderer/components/common/DonationList.vue
@@ -106,8 +106,6 @@
 </template>
 
 <script setup lang="ts">
-import 'animate.css';
-
 import axios from 'axios';
 import { computed, onActivated, onMounted, ref } from 'vue';
 
diff --git a/src/renderer/hooks/IndexDBHook.ts b/src/renderer/hooks/IndexDBHook.ts
index b68ecab..5011c5f 100644
--- a/src/renderer/hooks/IndexDBHook.ts
+++ b/src/renderer/hooks/IndexDBHook.ts
@@ -1,24 +1,29 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { ref } from 'vue';
 
+// 定义表配置的泛型接口
+export interface StoreConfig<T extends string> {
+  name: T;
+  keyPath?: string;
+}
+
 // 创建一个使用 IndexedDB 的组合函数
-const useIndexedDB = () => {
-  const db = ref<IDBDatabase | null>(null); // 数据库引用
+const useIndexedDB = async <T extends string, S extends Record<T, Record<string, any>>>(
+  dbName: string,
+  stores: StoreConfig<T>[],
+  version: number = 1
+) => {
+  const db = ref<IDBDatabase | null>(null);
 
   // 打开数据库并创建表
-  const initDB = (
-    dbName: string,
-    version: number,
-    stores: { name: string; keyPath?: string }[]
-  ) => {
+  const initDB = () => {
     return new Promise<void>((resolve, reject) => {
-      const request = indexedDB.open(dbName, version); // 打开数据库请求
+      const request = indexedDB.open(dbName, version);
 
       request.onupgradeneeded = (event: any) => {
-        const db = event.target.result; // 获取数据库实例
+        const db = event.target.result;
         stores.forEach((store) => {
           if (!db.objectStoreNames.contains(store.name)) {
-            // 确保对象存储（表）创建
             db.createObjectStore(store.name, {
               keyPath: store.keyPath || 'id',
               autoIncrement: true
@@ -28,39 +33,41 @@ const useIndexedDB = () => {
       };
 
       request.onsuccess = (event: any) => {
-        db.value = event.target.result; // 保存数据库实例
-        resolve(); // 成功时解析 Promise
+        db.value = event.target.result;
+        resolve();
       };
 
       request.onerror = (event: any) => {
-        reject(event.target.error); // 失败时拒绝 Promise
+        reject(event.target.error);
       };
     });
   };
 
-  // 通用新增数据
-  const addData = (storeName: string, value: any) => {
-    return new Promise<void>((resolve, reject) => {
-      if (!db.value) return reject('数据库未初始化'); // 检查数据库是否已初始化
-      const tx = db.value.transaction(storeName, 'readwrite'); // 创建事务
-      const store = tx.objectStore(storeName); // 获取对象存储
+  await initDB();
 
-      const request = store.add(value); // 添加数据请求
+  // 通用新增数据
+  const addData = <K extends T>(storeName: K, value: S[K]) => {
+    return new Promise<void>((resolve, reject) => {
+      if (!db.value) return reject('数据库未初始化');
+      const tx = db.value.transaction(storeName, 'readwrite');
+      const store = tx.objectStore(storeName);
+
+      const request = store.add(value);
 
       request.onsuccess = () => {
-        console.log('成功'); // 成功时输出
-        resolve(); // 解析 Promise
+        console.log('成功');
+        resolve();
       };
 
       request.onerror = (event) => {
-        console.error('新增失败:', (event.target as IDBRequest).error); // 输出错误
-        reject((event.target as IDBRequest).error); // 拒绝 Promise
+        console.error('新增失败:', (event.target as IDBRequest).error);
+        reject((event.target as IDBRequest).error);
       };
     });
   };
 
   // 通用保存数据（新增或更新）
-  const saveData = (storeName: string, value: any) => {
+  const saveData = <K extends T>(storeName: K, value: S[K]) => {
     return new Promise<void>((resolve, reject) => {
       if (!db.value) return reject('数据库未初始化');
       const tx = db.value.transaction(storeName, 'readwrite');
@@ -79,8 +86,8 @@ const useIndexedDB = () => {
   };
 
   // 通用获取数据
-  const getData = (storeName: string, key: string | number) => {
-    return new Promise<any>((resolve, reject) => {
+  const getData = <K extends T>(storeName: K, key: string | number) => {
+    return new Promise<S[K]>((resolve, reject) => {
       if (!db.value) return reject('数据库未初始化');
       const tx = db.value.transaction(storeName, 'readonly');
       const store = tx.objectStore(storeName);
@@ -101,7 +108,7 @@ const useIndexedDB = () => {
   };
 
   // 删除数据
-  const deleteData = (storeName: string, key: string | number) => {
+  const deleteData = <K extends T>(storeName: K, key: string | number) => {
     return new Promise<void>((resolve, reject) => {
       if (!db.value) return reject('数据库未初始化');
       const tx = db.value.transaction(storeName, 'readwrite');
@@ -120,8 +127,8 @@ const useIndexedDB = () => {
   };
 
   // 查询所有数据
-  const getAllData = (storeName: string) => {
-    return new Promise<any[]>((resolve, reject) => {
+  const getAllData = <K extends T>(storeName: K) => {
+    return new Promise<S[K][]>((resolve, reject) => {
       if (!db.value) return reject('数据库未初始化');
       const tx = db.value.transaction(storeName, 'readonly');
       const store = tx.objectStore(storeName);
@@ -142,29 +149,29 @@ const useIndexedDB = () => {
   };
 
   // 分页查询数据
-  const getDataWithPagination = (storeName: string, page: number, pageSize: number) => {
-    return new Promise<any[]>((resolve, reject) => {
+  const getDataWithPagination = <K extends T>(storeName: K, page: number, pageSize: number) => {
+    return new Promise<S[K][]>((resolve, reject) => {
       if (!db.value) return reject('数据库未初始化');
       const tx = db.value.transaction(storeName, 'readonly');
       const store = tx.objectStore(storeName);
-      const request = store.openCursor(); // 打开游标请求
-      const results: any[] = []; // 存储结果的数组
-      let index = 0; // 当前索引
-      const skip = (page - 1) * pageSize; // 计算跳过的数量
+      const request = store.openCursor();
+      const results: S[K][] = [];
+      let index = 0;
+      const skip = (page - 1) * pageSize;
 
       request.onsuccess = (event: any) => {
-        const cursor = event.target.result; // 获取游标
+        const cursor = event.target.result;
         if (!cursor) {
-          resolve(results); // 如果没有更多数据，解析结果
+          resolve(results);
           return;
         }
 
         if (index >= skip && results.length < pageSize) {
-          results.push(cursor.value); // 添加当前游标值到结果
+          results.push(cursor.value);
         }
 
-        index++; // 增加索引
-        cursor.continue(); // 继续游标
+        index++;
+        cursor.continue();
       };
 
       request.onerror = (event: any) => {
diff --git a/src/renderer/hooks/MusicHook.ts b/src/renderer/hooks/MusicHook.ts
index c09ca76..863d454 100644
--- a/src/renderer/hooks/MusicHook.ts
+++ b/src/renderer/hooks/MusicHook.ts
@@ -1,8 +1,9 @@
 import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue';
 
+import useIndexedDB from '@/hooks/IndexDBHook';
 import { audioService } from '@/services/audioService';
 import store from '@/store';
-import type { ILyricText, SongResult } from '@/type/music';
+import type { Artist, ILyricText, SongResult } from '@/type/music';
 import { isElectron } from '@/utils';
 import { getTextColors } from '@/utils/linearColor';
 
@@ -19,6 +20,15 @@ export const playMusic = computed(() => store.state.playMusic as SongResult); //
 export const sound = ref<Howl | null>(audioService.getCurrentSound());
 export const isLyricWindowOpen = ref(false); // 新增状态
 export const textColors = ref<any>(getTextColors());
+export const artistList = computed(
+  () => (store.state.playMusic.ar || store.state.playMusic?.song?.artists) as Artist[]
+);
+
+export const musicDB = await useIndexedDB('musicDB', [
+  { name: 'music', keyPath: 'id' },
+  { name: 'music_lyric', keyPath: 'id' },
+  { name: 'api_cache', keyPath: 'id' }
+]);
 
 document.onkeyup = (e) => {
   // 检查事件目标是否是输入框元素
@@ -43,10 +53,18 @@ document.onkeyup = (e) => {
 
 watch(
   () => store.state.playMusicUrl,
-  (newVal) => {
+  async (newVal) => {
     if (newVal && playMusic.value) {
-      sound.value = audioService.play(newVal, playMusic.value);
-      setupAudioListeners();
+      try {
+        const newSound = await audioService.play(newVal, playMusic.value);
+        sound.value = newSound as Howl;
+        setupAudioListeners();
+      } catch (error) {
+        console.error('播放音频失败:', error);
+        store.commit('setPlayMusic', false);
+        // 下一首
+        store.commit('nextPlay');
+      }
     }
   }
 );
@@ -72,26 +90,52 @@ watch(
 const setupAudioListeners = () => {
   let interval: any = null;
 
+  const clearInterval = () => {
+    if (interval) {
+      window.clearInterval(interval);
+      interval = null;
+    }
+  };
+
   // 清理所有事件监听器
   audioService.clearAllListeners();
 
   // 监听播放
   audioService.on('play', () => {
     store.commit('setPlayMusic', true);
-    if (interval) clearInterval(interval);
-    interval = setInterval(() => {
-      nowTime.value = sound.value?.seek() as number;
-      allTime.value = sound.value?.duration() as number;
-      const newIndex = getLrcIndex(nowTime.value);
-      if (newIndex !== nowIndex.value) {
-        nowIndex.value = newIndex;
-        currentLrcProgress.value = 0;
+    clearInterval();
+    interval = window.setInterval(() => {
+      try {
+        const currentSound = sound.value;
+        if (!currentSound || typeof currentSound.seek !== 'function') {
+          console.error('Invalid sound object or seek function');
+          clearInterval();
+          return;
+        }
+
+        const currentTime = currentSound.seek() as number;
+        if (typeof currentTime !== 'number' || Number.isNaN(currentTime)) {
+          console.error('Invalid current time:', currentTime);
+          clearInterval();
+          return;
+        }
+
+        nowTime.value = currentTime;
+        allTime.value = currentSound.duration() as number;
+        const newIndex = getLrcIndex(nowTime.value);
+        if (newIndex !== nowIndex.value) {
+          nowIndex.value = newIndex;
+          currentLrcProgress.value = 0;
+          if (isElectron && isLyricWindowOpen.value) {
+            sendLyricToWin();
+          }
+        }
         if (isElectron && isLyricWindowOpen.value) {
           sendLyricToWin();
         }
-      }
-      if (isElectron && isLyricWindowOpen.value) {
-        sendLyricToWin();
+      } catch (error) {
+        console.error('Error in interval:', error);
+        clearInterval();
       }
     }, 50);
   });
@@ -99,10 +143,7 @@ const setupAudioListeners = () => {
   // 监听暂停
   audioService.on('pause', () => {
     store.commit('setPlayMusic', false);
-    if (interval) {
-      clearInterval(interval);
-      interval = null;
-    }
+    clearInterval();
     if (isElectron && isLyricWindowOpen.value) {
       sendLyricToWin();
     }
@@ -110,22 +151,28 @@ const setupAudioListeners = () => {
 
   // 监听结束
   audioService.on('end', () => {
-    if (interval) {
-      clearInterval(interval);
-      interval = null;
-    }
+    clearInterval();
 
     if (store.state.playMode === 1) {
       // 单曲循环模式
       if (sound.value) {
         sound.value.seek(0);
-        sound.value.play();
+        try {
+          sound.value.play();
+        } catch (error) {
+          console.error('Error replaying song:', error);
+          store.commit('nextPlay');
+        }
       }
     } else if (store.state.playMode === 2) {
       // 随机播放模式
       const { playList } = store.state;
       if (playList.length <= 1) {
-        sound.value?.play();
+        try {
+          sound.value?.play();
+        } catch (error) {
+          console.error('Error replaying song:', error);
+        }
       } else {
         let randomIndex;
         do {
@@ -140,14 +187,7 @@ const setupAudioListeners = () => {
     }
   });
 
-  // 监听上一曲/下一曲控制
-  audioService.on('previoustrack', () => {
-    store.commit('prevPlay');
-  });
-
-  audioService.on('nexttrack', () => {
-    store.commit('nextPlay');
-  });
+  return clearInterval;
 };
 
 export const play = () => {
@@ -212,20 +252,47 @@ export const useLyricProgress = () => {
   let animationFrameId: number | null = null;
 
   const updateProgress = () => {
-    if (!isPlaying.value) return;
+    if (!isPlaying.value) {
+      stopProgressAnimation();
+      return;
+    }
+
     const currentSound = sound.value;
-    if (!currentSound) return;
+    if (!currentSound || typeof currentSound.seek !== 'function') {
+      console.error('Invalid sound object or seek function');
+      stopProgressAnimation();
+      return;
+    }
 
-    const { start, end } = currentLrcTiming.value;
-    const duration = end - start;
-    const elapsed = (currentSound.seek() as number) - start;
-    currentLrcProgress.value = Math.min(Math.max((elapsed / duration) * 100, 0), 100);
+    try {
+      const { start, end } = currentLrcTiming.value;
+      if (typeof start !== 'number' || typeof end !== 'number' || start === end) {
+        return;
+      }
 
+      const currentTime = currentSound.seek() as number;
+      if (typeof currentTime !== 'number' || Number.isNaN(currentTime)) {
+        console.error('Invalid current time:', currentTime);
+        return;
+      }
+
+      const elapsed = currentTime - start;
+      const duration = end - start;
+      const progress = (elapsed / duration) * 100;
+
+      // 确保进度在 0-100 之间
+      currentLrcProgress.value = Math.min(Math.max(progress, 0), 100);
+    } catch (error) {
+      console.error('Error updating progress:', error);
+    }
+
+    // 继续下一帧更新
     animationFrameId = requestAnimationFrame(updateProgress);
   };
 
   const startProgressAnimation = () => {
-    if (!animationFrameId && isPlaying.value) {
+    stopProgressAnimation(); // 先停止之前的动画
+    if (isPlaying.value) {
       updateProgress();
     }
   };
@@ -237,8 +304,30 @@ export const useLyricProgress = () => {
     }
   };
 
-  watch(isPlaying, (newIsPlaying) => {
-    if (newIsPlaying) {
+  // 监听播放状态变化
+  watch(
+    isPlaying,
+    (newIsPlaying) => {
+      if (newIsPlaying) {
+        startProgressAnimation();
+      } else {
+        stopProgressAnimation();
+      }
+    },
+    { immediate: true }
+  );
+
+  // 监听当前歌词索引变化
+  watch(nowIndex, () => {
+    currentLrcProgress.value = 0;
+    if (isPlaying.value) {
+      startProgressAnimation();
+    }
+  });
+
+  // 监听音频对象变化
+  watch(sound, (newSound) => {
+    if (newSound && isPlaying.value) {
       startProgressAnimation();
     } else {
       stopProgressAnimation();
@@ -377,12 +466,13 @@ if (isElectron) {
 
 // 在组件挂载时设置监听器
 onMounted(() => {
-  if (isPlaying.value) {
-    useLyricProgress();
-  }
-});
+  const clearIntervalFn = setupAudioListeners();
+  useLyricProgress(); // 直接调用，不需要解构返回值
 
-// 在组件卸载时清理
-onUnmounted(() => {
-  audioService.stop();
+  // 在组件卸载时清理
+  onUnmounted(() => {
+    clearIntervalFn();
+    audioService.stop();
+    audioService.clearAllListeners();
+  });
 });
diff --git a/src/renderer/hooks/MusicListHook.ts b/src/renderer/hooks/MusicListHook.ts
index 0b9efe9..1539a9a 100644
--- a/src/renderer/hooks/MusicListHook.ts
+++ b/src/renderer/hooks/MusicListHook.ts
@@ -1,5 +1,6 @@
 import { Howl } from 'howler';
 import { cloneDeep } from 'lodash';
+import { ref } from 'vue';
 
 import { getMusicLrc, getMusicUrl, getParsingMusicUrl } from '@/api/music';
 import { useMusicHistory } from '@/hooks/MusicHistoryHook';
@@ -63,43 +64,91 @@ export const useMusicListHook = () => {
     fetchSongs(state, playListIndex + 1, playListIndex + 6);
   };
 
+  const preloadingSounds = ref<Howl[]>([]);
+
   // 用于预加载下一首歌曲的 MP3 数据
   const preloadNextSong = (nextSongUrl: string) => {
-    const sound = new Howl({
-      src: [nextSongUrl],
-      html5: true,
-      preload: true,
-      autoplay: false
-    });
-    return sound;
+    try {
+      // 限制同时预加载的数量
+      if (preloadingSounds.value.length >= 2) {
+        const oldestSound = preloadingSounds.value.shift();
+        if (oldestSound) {
+          oldestSound.unload();
+        }
+      }
+
+      const sound = new Howl({
+        src: [nextSongUrl],
+        html5: true,
+        preload: true,
+        autoplay: false
+      });
+
+      preloadingSounds.value.push(sound);
+
+      // 添加加载错误处理
+      sound.on('loaderror', () => {
+        console.error('预加载音频失败:', nextSongUrl);
+        const index = preloadingSounds.value.indexOf(sound);
+        if (index > -1) {
+          preloadingSounds.value.splice(index, 1);
+        }
+        sound.unload();
+      });
+
+      return sound;
+    } catch (error) {
+      console.error('预加载音频出错:', error);
+      return null;
+    }
   };
 
   const fetchSongs = async (state: any, startIndex: number, endIndex: number) => {
-    const songs = state.playList.slice(
-      Math.max(0, startIndex),
-      Math.min(endIndex, state.playList.length)
-    );
+    try {
+      const songs = state.playList.slice(
+        Math.max(0, startIndex),
+        Math.min(endIndex, state.playList.length)
+      );
 
-    const detailedSongs = await Promise.all(
-      songs.map(async (song: SongResult) => {
-        // 如果歌曲详情已经存在，就不重复请求
-        if (!song.playMusicUrl) {
-          return await getSongDetail(song);
+      const detailedSongs = await Promise.all(
+        songs.map(async (song: SongResult) => {
+          try {
+            // 如果歌曲详情已经存在，就不重复请求
+            if (!song.playMusicUrl) {
+              return await getSongDetail(song);
+            }
+            return song;
+          } catch (error) {
+            console.error('获取歌曲详情失败:', error);
+            return song;
+          }
+        })
+      );
+
+      // 加载下一首的歌词
+      const nextSong = detailedSongs[0];
+      if (nextSong && !(nextSong.lyric && nextSong.lyric.lrcTimeArray.length > 0)) {
+        try {
+          nextSong.lyric = await loadLrc(nextSong.id);
+        } catch (error) {
+          console.error('加载歌词失败:', error);
         }
-        return song;
-      })
-    );
-    // 加载下一首的歌词
-    const nextSong = detailedSongs[0];
-    if (!(nextSong.lyric && nextSong.lyric.lrcTimeArray.length > 0)) {
-      nextSong.lyric = await loadLrc(nextSong.id);
-    }
+      }
 
-    // 更新播放列表中的歌曲详情
-    detailedSongs.forEach((song, index) => {
-      state.playList[startIndex + index] = song;
-    });
-    preloadNextSong(nextSong.playMusicUrl);
+      // 更新播放列表中的歌曲详情
+      detailedSongs.forEach((song, index) => {
+        if (song && startIndex + index < state.playList.length) {
+          state.playList[startIndex + index] = song;
+        }
+      });
+
+      // 只预加载下一首歌曲
+      if (nextSong && nextSong.playMusicUrl) {
+        preloadNextSong(nextSong.playMusicUrl);
+      }
+    } catch (error) {
+      console.error('获取歌曲列表失败:', error);
+    }
   };
 
   const nextPlay = async (state: any) => {
@@ -153,7 +202,7 @@ export const useMusicListHook = () => {
       const { lyrics, times } = parseLyrics(data.lrc.lyric);
       const tlyric: Record<string, string> = {};
 
-      if (data.tlyric.lyric) {
+      if (data.tlyric && data.tlyric.lyric) {
         const { lyrics: tLyrics, times: tTimes } = parseLyrics(data.tlyric.lyric);
         tLyrics.forEach((lyric, index) => {
           tlyric[tTimes[index].toString()] = lyric.text;
@@ -193,6 +242,12 @@ export const useMusicListHook = () => {
     audioService.getCurrentSound()?.pause();
   };
 
+  // 在组件卸载时清理预加载的音频
+  onUnmounted(() => {
+    preloadingSounds.value.forEach((sound) => sound.unload());
+    preloadingSounds.value = [];
+  });
+
   return {
     handlePlayMusic,
     nextPlay,
diff --git a/src/renderer/index.css b/src/renderer/index.css
index 179ca8f..34a3616 100644
--- a/src/renderer/index.css
+++ b/src/renderer/index.css
@@ -11,7 +11,12 @@
 }
 
 .n-slider-handle-indicator--top {
-  @apply bg-transparent dark:text-[#ffffffdd] text-[#000000dd] text-2xl px-2 py-1 shadow-none mb-0 !important;
+  @apply bg-transparent text-2xl px-2 py-1 shadow-none mb-0 dark:text-[#ffffffdd] text-[#000000dd]  !important;
+  mix-blend-mode: difference !important;
+}
+
+.v-binder-follower-container:has(.n-slider-handle-indicator--top) {
+  z-index: 999999999 !important;
 }
 
 .text-el {
@@ -56,3 +61,11 @@
   --text-color-300: #3d3d3d;
   --primary-color: #22c55e;
 }
+
+:root {
+  --text-color: #000000dd;
+}
+
+:root[class='dark'] {
+  --text-color: #ffffffdd;
+}
diff --git a/src/renderer/index.html b/src/renderer/index.html
index f5972d1..afe3375 100644
--- a/src/renderer/index.html
+++ b/src/renderer/index.html
@@ -28,7 +28,6 @@
     <meta name="apple-mobile-web-app-title" content="网抑云音乐" />
     <!-- 资源预加载 -->
     <link rel="preload" href="./assets/icon/iconfont.css" as="style" />
-    <link rel="preload" href="./assets/css/animate.css" as="style" />
     <link rel="preload" href="./assets/css/base.css" as="style" />
 
     <!-- 样式表 -->
diff --git a/src/renderer/layout/components/MusicFull.vue b/src/renderer/layout/components/MusicFull.vue
index 489538e..7361290 100644
--- a/src/renderer/layout/components/MusicFull.vue
+++ b/src/renderer/layout/components/MusicFull.vue
@@ -5,6 +5,7 @@
     placement="bottom"
     :style="{ background: currentBackground || background }"
     :to="`#layout-main`"
+    :z-index="9998"
   >
     <div id="drawer-target">
       <div class="drawer-back"></div>
@@ -31,13 +32,13 @@
               }"
             >
               <span
-                v-for="(item, index) in playMusic.ar || playMusic.song.artists"
+                v-for="(item, index) in artistList"
                 :key="index"
                 class="cursor-pointer hover:text-green-500"
                 @click="handleArtistClick(item.id)"
               >
                 {{ item.name }}
-                {{ index < (playMusic.ar || playMusic.song.artists).length - 1 ? ' / ' : '' }}
+                {{ index < artistList.length - 1 ? ' / ' : '' }}
               </span>
             </n-ellipsis>
           </div>
@@ -87,6 +88,7 @@ import { computed, onBeforeUnmount, ref, watch } from 'vue';
 import { useStore } from 'vuex';
 
 import {
+  artistList,
   lrcArray,
   nowIndex,
   playMusic,
@@ -124,14 +126,18 @@ const isVisible = computed({
 });
 
 // 歌词滚动方法
-const lrcScroll = (behavior = 'smooth') => {
+const lrcScroll = (behavior = 'smooth', top: null | number = null) => {
   const nowEl = document.querySelector(`#music-lrc-text-${nowIndex.value}`);
   if (isVisible.value && !isMouse.value && nowEl && lrcContainer.value) {
-    const containerRect = lrcContainer.value.getBoundingClientRect();
-    const nowElRect = nowEl.getBoundingClientRect();
-    const relativeTop = nowElRect.top - containerRect.top;
-    const scrollTop = relativeTop - lrcSider.value.$el.getBoundingClientRect().height / 2;
-    lrcSider.value.scrollTo({ top: scrollTop, behavior });
+    if (top !== null) {
+      lrcSider.value.scrollTo({ top, behavior });
+    } else {
+      const containerRect = lrcContainer.value.getBoundingClientRect();
+      const nowElRect = nowEl.getBoundingClientRect();
+      const relativeTop = nowElRect.top - containerRect.top;
+      const scrollTop = relativeTop - lrcSider.value.$el.getBoundingClientRect().height / 2;
+      lrcSider.value.scrollTo({ top: scrollTop, behavior });
+    }
   }
 };
 
diff --git a/src/renderer/layout/components/PlayBar.vue b/src/renderer/layout/components/PlayBar.vue
index f2d51e7..40c1f80 100644
--- a/src/renderer/layout/components/PlayBar.vue
+++ b/src/renderer/layout/components/PlayBar.vue
@@ -1,7 +1,4 @@
 <template>
-  <!-- 展开全屏 -->
-  <!-- 底部播放栏 -->
-
   <div
     class="music-play-bar"
     :class="
@@ -60,13 +57,12 @@
           }"
         >
           <span
-            v-for="(artists, artistsindex) in playMusic.ar || playMusic.song.artists"
+            v-for="(artists, artistsindex) in artistList"
             :key="artistsindex"
             class="cursor-pointer hover:text-green-500"
             @click="handleArtistClick(artists.id)"
           >
-            {{ artists.name
-            }}{{ artistsindex < (playMusic.ar || playMusic.song.artists).length - 1 ? ' / ' : '' }}
+            {{ artists.name }}{{ artistsindex < artistList.length - 1 ? ' / ' : '' }}
           </span>
         </n-ellipsis>
       </div>
@@ -160,9 +156,11 @@ import { useStore } from 'vuex';
 import SongItem from '@/components/common/SongItem.vue';
 import {
   allTime,
+  artistList,
   isLyricWindowOpen,
   nowTime,
   openLyric,
+  playMusic,
   sound,
   textColors
 } from '@/hooks/MusicHook';
@@ -174,12 +172,11 @@ import MusicFull from './MusicFull.vue';
 
 const store = useStore();
 
-// 播放的音乐信息
-const playMusic = computed(() => store.state.playMusic as SongResult);
 // 是否播放
 const play = computed(() => store.state.play as boolean);
+// 播放列表
 const playList = computed(() => store.state.playList as SongResult[]);
-
+// 背景颜色
 const background = ref('#000');
 
 watch(
@@ -190,7 +187,7 @@ watch(
   { immediate: true, deep: true }
 );
 
-// 使用 useThrottleFn 创建节流版本的 seek 函数
+// 节流版本的 seek 函数
 const throttledSeek = useThrottleFn((value: number) => {
   if (!sound.value) return;
   sound.value.seek(value);
diff --git a/src/renderer/services/audioService.ts b/src/renderer/services/audioService.ts
index 4482971..69a731b 100644
--- a/src/renderer/services/audioService.ts
+++ b/src/renderer/services/audioService.ts
@@ -121,52 +121,79 @@ class AudioService {
   }
 
   // 播放控制相关
-  play(url: string, track: SongResult) {
-    // Howler.unload();
-    if (this.currentSound) {
-      this.currentSound.unload();
-    }
-    this.currentSound = null;
-    this.currentTrack = track;
+  play(url: string, track: SongResult): Promise<Howl> {
+    return new Promise((resolve, reject) => {
+      let retryCount = 0;
+      const maxRetries = 3;
 
-    this.currentSound = new Howl({
-      src: [url],
-      html5: true,
-      autoplay: true,
-      volume: localStorage.getItem('volume')
-        ? parseFloat(localStorage.getItem('volume') as string)
-        : 1
+      const tryPlay = () => {
+        if (this.currentSound) {
+          this.currentSound.unload();
+        }
+        this.currentSound = null;
+        this.currentTrack = track;
+
+        this.currentSound = new Howl({
+          src: [url],
+          html5: true,
+          autoplay: true,
+          volume: localStorage.getItem('volume')
+            ? parseFloat(localStorage.getItem('volume') as string)
+            : 1,
+          onloaderror: () => {
+            console.error('Audio load error');
+            if (retryCount < maxRetries) {
+              retryCount++;
+              console.log(`Retrying playback (${retryCount}/${maxRetries})...`);
+              setTimeout(tryPlay, 1000 * retryCount);
+            } else {
+              reject(new Error('音频加载失败，请尝试切换其他歌曲'));
+            }
+          },
+          onplayerror: () => {
+            console.error('Audio play error');
+            if (retryCount < maxRetries) {
+              retryCount++;
+              console.log(`Retrying playback (${retryCount}/${maxRetries})...`);
+              setTimeout(tryPlay, 1000 * retryCount);
+            } else {
+              reject(new Error('音频播放失败，请尝试切换其他歌曲'));
+            }
+          }
+        });
+
+        // 更新媒体会话元数据
+        this.updateMediaSessionMetadata(track);
+
+        // 设置音频事件监听
+        this.currentSound.on('play', () => {
+          this.updateMediaSessionState(true);
+          this.emit('play');
+        });
+
+        this.currentSound.on('pause', () => {
+          this.updateMediaSessionState(false);
+          this.emit('pause');
+        });
+
+        this.currentSound.on('end', () => {
+          this.emit('end');
+        });
+
+        this.currentSound.on('seek', () => {
+          this.updateMediaSessionPositionState();
+          this.emit('seek');
+        });
+
+        this.currentSound.on('load', () => {
+          this.updateMediaSessionPositionState();
+          this.emit('load');
+          resolve(this.currentSound as Howl);
+        });
+      };
+
+      tryPlay();
     });
-
-    // 更新媒体会话元数据
-    this.updateMediaSessionMetadata(track);
-
-    // 设置音频事件监听
-    this.currentSound.on('play', () => {
-      this.updateMediaSessionState(true);
-      this.emit('play');
-    });
-
-    this.currentSound.on('pause', () => {
-      this.updateMediaSessionState(false);
-      this.emit('pause');
-    });
-
-    this.currentSound.on('end', () => {
-      this.emit('end');
-    });
-
-    this.currentSound.on('seek', () => {
-      this.updateMediaSessionPositionState();
-      this.emit('seek');
-    });
-
-    this.currentSound.on('load', () => {
-      this.updateMediaSessionPositionState();
-      this.emit('load');
-    });
-
-    return this.currentSound;
   }
 
   getCurrentSound() {
diff --git a/src/renderer/type/music.ts b/src/renderer/type/music.ts
index 503176b..4388575 100644
--- a/src/renderer/type/music.ts
+++ b/src/renderer/type/music.ts
@@ -160,7 +160,7 @@ interface Album {
   picId_str: string;
 }
 
-interface Artist {
+export interface Artist {
   name: string;
   id: number;
   picId: number;