diff --git a/src/assets/styles/theme.scss b/src/assets/styles/theme.scss
index ee5070f..437917b 100644
--- a/src/assets/styles/theme.scss
+++ b/src/assets/styles/theme.scss
@@ -1,4 +1,5 @@
 
+
 :root {
   --font-family-base: "Inter var", "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   --font-family-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
@@ -11,232 +12,837 @@
   --brand-color: #0da6e9;
   --nav-link-color: #0da6e9;
 
-  --brand-color-light: #bcc0ff; // hover color
+  --brand-color-light: #bcc0ff;
 
-  --mute-light: #f6f6f7; // tag backgroun
+  --mute-light: #f6f6f7;
 
   --main-bg: #fff;
 
   --main-shadow: 0 12px 32px rgba(0, 0, 0, .1), 0 2px 6px rgba(0, 0, 0, .08);
 
-  // --text-font-color: rgba(28, 30, 33);
   --text-font-color: rgba(60, 60, 67, .92);
   --text-code-font-color: #476582;
 
-  color: var(--text-font-color);
-  background-color: var(--main-bg);
-  font-family: var(--font-family-base);
-}
 
-.nav-item .nav-active {
-  color: var(--brand-color);
-}
+  --advantage-bg: conic-gradient(from -90deg at 110% 100%, #fff 0deg, #ebecf0 90deg, #ebecf0 1turn);
+  --we-believe-bg: conic-gradient(from -90deg at 110% 100%, #fff 0deg, #ebecf0 90deg, #ebecf0 1turn);
+  --what-we-do-bg: conic-gradient(from 90deg at -10% 100%, #bcc1cd 0deg, #bcc1cd 90deg, #fff 1turn);
 
-.action .why-quark {
-  background-color: var(--main-bg);
-  color: #000;
-  &:hover {
-    background-color: #f6f6f6;
-  }
-}
+  --arrow-light-mode-icon: url('https://raw.githubusercontent.com/hellof2e/static/main/arrow-light-mode.png');
 
-.nav-item a {
-  color: var(--text-font-color-light);
-  font-family: var(--font-family-base);
-}
-.nav-item a:hover {
-  color: var(--brand-color);
-}
-.social-links a,
-.translate-lang a {
-  color: rgba(60, 60, 67, .7);
-}
-.social-links a:hover svg,
-.translate-lang a:hover svg{
-  color: rgba(60, 60, 67, .92);
-  transition: color .25s;
-}
-.header .container {
-  border-bottom: 1px solid var(--line-light);
-  background-color: var(--main-bg);
-}
-.doc-content-document p {
   color: var(--text-font-color);
-}
-.doc-content-document table {
-  border: 1px solid var(--line-light);
-}
-.doc-content-document table th,
-.doc-content-document table td {
-  border-left: 1px solid var(--line-light);
-  color: var(--text-font-color-light);
-}
-
-.doc-content-document table td {
-  border-top: 1px solid var(--line-light);
-}
-
-.doc-content-document table code {
-  color: var(--text-code-font-color);
-  background-color: var(--mute-light);
-}
+  background-color: var(--main-bg);
+  font-family: var(--font-family-base);
 
-.doc-content-document table td:first-child code {
-  color: var(--text-code-font-color);
-}
-.doc-nav {
-  border-right: 1px solid var(--line-light);
-}
-.doc-content-document p > code {
-  color: var(--text-code-font-color);
-  background-color: var(--mute-light);
-}
-.doc-content-document strong {
-  color: var(--text-font-color);
-}
-.doc-content-document blockquote {
-  background-color: rgba(100, 108, 255, .08);
-}
-.doc-content-document blockquote p {
-  color: #454ce1;
-}
+  animation: rainbow 40s linear infinite;
+
+  --vp-c-bg: #ffffff;
+  --vp-c-bg-alt: #f6f6f7;
+  --vp-c-bg-elv: #ffffff;
+  --vp-c-bg-soft: #f6f6f7;
+
+  --vp-c-white: #ffffff;
+  --vp-c-black: #000000;
+  --vp-c-neutral: var(--vp-c-black);
+  --vp-c-neutral-inverse: var(--vp-c-white);
+
+  --vp-nav-height: 64px;
+  --vp-nav-bg-color: var(--vp-c-bg);
+  --vp-button-brand-bg: var(--vp-c-brand-1);
+  --vp-home-hero-name-color: transparent;
+  --vp-home-hero-name-background: -webkit-linear-gradient(120deg, var(--vp-c-brand-1) 30%, var(--vp-c-brand-next));
+  --vp-home-hero-image-background-image: linear-gradient(-45deg, var(--vp-c-brand-1) 30%, var(--vp-c-brand-next));
+  --vp-home-hero-image-filter: blur(80px);
+
+  --vp-c-brand-1: #00a98e;
+  --vp-c-brand-light: #4ad1b4;
+  --vp-c-brand-lighter: #78fadc;
+  --vp-c-brand-dark: #008269;
+  --vp-c-brand-darker: #005d47;
+  --vp-c-brand-next: #009ff7;
+  --vp-button-brand-border: var(--vp-c-brand-light);
+  --vp-button-brand-text: var(--vp-c-white);
+  --vp-button-brand-hover-border: var(--vp-c-brand-light);
+  --vp-button-brand-hover-text: var(--vp-c-white);
+  --vp-button-brand-hover-bg: var(--vp-c-brand-light);
+  --vp-button-brand-active-border: var(--vp-c-brand-light);
+  --vp-button-brand-active-text: var(--vp-c-white);
+  --vp-button-brand-active-bg: var(--vp-button-brand-bg);
+
+  --vp-c-text-1: rgba(60, 60, 67);
+  --vp-c-text-2: rgba(60, 60, 67, .78);
+  --vp-c-text-3: rgba(60, 60, 67, .56);
 
-.doc-content-document ul li,
-.doc-content-document ol li,{
-  color: var(--text-font-color);
 }
 
 
 html.dark {
   --link-font-color-dark: rgba(255, 255, 255, 0.87);
-  --main-bg: #1e1e20;
+  --main-bg: #23272f;
   --text-font-color: rgba(255, 255, 255, 0.87);
   --header-bg-light: #fff;
-  --line-light: rgba(60, 60, 67, .12);
 
   --text-font-color-light: rgba(255, 255, 255, 0.5);
 
   --text-code-font-color: #c9def1;
   --brand-color: #0da6e9;
   --nav-link-color: #fff;
-  --brand-color-light: #bcc0ff; // hover color
-  --mute-light: #313136; // tag background
+  --brand-color-light: #bcc0ff;
+  --mute-light: #313136;
   --line-light: rgba(82, 82, 89, .32);
+
+
+  --advantage-bg: conic-gradient(from 90deg at -10% 100%, #2b303b 0deg, #2b303b 90deg, #16181d 1turn);
+  --we-believe-bg: conic-gradient(from -90deg at 110% 100%, #2b303b 0deg, #16181d 90deg, #16181d 1turn);
+  --what-we-do-bg: conic-gradient(from 90deg at -10% 100%, #2b303b 0deg, #2b303b 90deg, #16181d 1turn);
+
+  --scroll-down-dark-color: var(--link-font-color-dark);
+  --arrow-dark-mode-icon: url('https://raw.githubusercontent.com/hellof2e/static/main/arrow-dark-mode.png');
+  --footer-bg: conic-gradient(from 90deg at -10% 100%, #2b303b 0deg, #2b303b 90deg, #16181d 1turn);
+
   font-family: var(--font-family-base);
   color: var(--link-font-color-dark);
   background-color: var(--main-bg);
+}
+
+html.dark pre {
+  color: #1e1e20;
+}
+
+html.dark .paragraph {
+  color: var(--nav-link-color);
+}
 
-  pre {
-    color: #1e1e20;
+
+
+
+@keyframes rainbow {
+  0% {
+      --vp-c-brand-1: #00a98e;
+      --vp-c-brand-light: #4ad1b4;
+      --vp-c-brand-lighter: #78fadc;
+      --vp-c-brand-dark: #008269;
+      --vp-c-brand-darker: #005d47;
+      --vp-c-brand-next: #009ff7
   }
 
-  .flyout-menu .menu-wrap {
-    background: var(--main-bg);
-    box-shadow:  0 1px 2px rgba(0, 0, 0, .04), 0 1px 2px rgba(0, 0, 0, .06);
-    border: 1px solid rgba(84, 84, 84, .48);
+  1.25% {
+      --vp-c-brand-1: #00a996;
+      --vp-c-brand-light: #4bd1bd;
+      --vp-c-brand-lighter: #79fbe5;
+      --vp-c-brand-dark: #008371;
+      --vp-c-brand-darker: #005e4f;
+      --vp-c-brand-next: #009dfa
   }
 
-  .flyout-menu .menu-group-title {
-    color: rgba(235, 235, 235, .38);
+  2.5% {
+      --vp-c-brand-1: #00a99f;
+      --vp-c-brand-light: #4cd1c6;
+      --vp-c-brand-lighter: #7afbee;
+      --vp-c-brand-dark: #00837a;
+      --vp-c-brand-darker: #005e56;
+      --vp-c-brand-next: #009bfc
   }
 
-  .flyout-menu .menu-link {
-    color: rgba(255, 255, 255, .87);
-    &:hover {
-      color: #0da6e9;
-    }
+  3.75% {
+      --vp-c-brand-1: #00a9a7;
+      --vp-c-brand-light: #4dd1cf;
+      --vp-c-brand-lighter: #7bfbf8;
+      --vp-c-brand-dark: #008382;
+      --vp-c-brand-darker: #005e5e;
+      --vp-c-brand-next: #0098fd
   }
 
+  5% {
+      --vp-c-brand-1: #00a9b0;
+      --vp-c-brand-light: #4ed1d7;
+      --vp-c-brand-lighter: #7dfaff;
+      --vp-c-brand-dark: #00838a;
+      --vp-c-brand-darker: #005e65;
+      --vp-c-brand-next: #0096fd
+  }
 
-  .nav-item a:hover,
-  .nav-item button:hover {
-    color: rgba(255 255 255 / 1);
+  6.25% {
+      --vp-c-brand-1: #00a9b8;
+      --vp-c-brand-light: #4fd1e0;
+      --vp-c-brand-lighter: #7efaff;
+      --vp-c-brand-dark: #008391;
+      --vp-c-brand-darker: #005e6d;
+      --vp-c-brand-next: #0093fd
   }
-  .nav-item .nav-active {
-    color: #fff;
+
+  7.5% {
+      --vp-c-brand-1: #00a9c0;
+      --vp-c-brand-light: #50d0e8;
+      --vp-c-brand-lighter: #7ffaff;
+      --vp-c-brand-dark: #008399;
+      --vp-c-brand-darker: #005e74;
+      --vp-c-brand-next: #2e90fc
   }
 
-  .social-links a:hover svg{
-    color: #fff;
+  8.75% {
+      --vp-c-brand-1: #00a8c7;
+      --vp-c-brand-light: #51d0f0;
+      --vp-c-brand-lighter: #81f9ff;
+      --vp-c-brand-dark: #0082a0;
+      --vp-c-brand-darker: #005e7b;
+      --vp-c-brand-next: #4d8dfa
   }
-  .translate-lang:hover {
-    color: #fff;
+
+  10% {
+      --vp-c-brand-1: #00a8cf;
+      --vp-c-brand-light: #52cff7;
+      --vp-c-brand-lighter: #82f8ff;
+      --vp-c-brand-dark: #0082a7;
+      --vp-c-brand-darker: #005e81;
+      --vp-c-brand-next: #638af8
   }
 
-  .doc-nav a {
-    color: #fff;
+  11.25% {
+      --vp-c-brand-1: #00a7d5;
+      --vp-c-brand-light: #53cfff;
+      --vp-c-brand-lighter: #84f8ff;
+      --vp-c-brand-dark: #0081ae;
+      --vp-c-brand-darker: #005d87;
+      --vp-c-brand-next: #7587f5
   }
-  .doc-nav a:hover {
-    color: var(--brand-color);
+
+  12.5% {
+      --vp-c-brand-1: #00a6dc;
+      --vp-c-brand-light: #55ceff;
+      --vp-c-brand-lighter: #85f7ff;
+      --vp-c-brand-dark: #0081b4;
+      --vp-c-brand-darker: #005d8d;
+      --vp-c-brand-next: #8583f1
   }
 
-  .translations:before, .appearance:before, .social-links:before {
-    background-color: rgba(60, 60, 67, 0.92);
+  13.75% {
+      --vp-c-brand-1: #00a6e2;
+      --vp-c-brand-light: #56cdff;
+      --vp-c-brand-lighter: #87f6ff;
+      --vp-c-brand-dark: #0080b9;
+      --vp-c-brand-darker: #005c93;
+      --vp-c-brand-next: #9280ed
   }
 
+  15% {
+      --vp-c-brand-1: #00a4e7;
+      --vp-c-brand-light: #57ccff;
+      --vp-c-brand-lighter: #88f4ff;
+      --vp-c-brand-dark: #007fbf;
+      --vp-c-brand-darker: #005b98;
+      --vp-c-brand-next: #9f7ce9
+  }
 
-  .doc-content-document p > code {
-    color: var(--text-code-font-color);
+  16.25% {
+      --vp-c-brand-1: #00a3ec;
+      --vp-c-brand-light: #58caff;
+      --vp-c-brand-lighter: #89f3ff;
+      --vp-c-brand-dark: #007ec3;
+      --vp-c-brand-darker: #005b9c;
+      --vp-c-brand-next: #aa78e3
   }
-  .doc-content-document strong {
-    color: var(--text-font-color);
+
+  17.5% {
+      --vp-c-brand-1: #00a2f1;
+      --vp-c-brand-light: #58c9ff;
+      --vp-c-brand-lighter: #8af1ff;
+      --vp-c-brand-dark: #007dc8;
+      --vp-c-brand-darker: #0059a0;
+      --vp-c-brand-next: #b574dd
   }
-  .doc-content-document blockquote p {
-    color: #bcc0ff;
+
+  18.75% {
+      --vp-c-brand-1: #00a0f4;
+      --vp-c-brand-light: #59c7ff;
+      --vp-c-brand-lighter: #8bf0ff;
+      --vp-c-brand-dark: #007bcb;
+      --vp-c-brand-darker: #0058a3;
+      --vp-c-brand-next: #be71d7
   }
-  .doc-content-document a {
-    color: #9499ff;
-    text-decoration: underline;
+
+  20% {
+      --vp-c-brand-1: #009ff7;
+      --vp-c-brand-light: #5ac5ff;
+      --vp-c-brand-lighter: #8ceeff;
+      --vp-c-brand-dark: #007ace;
+      --vp-c-brand-darker: #0057a6;
+      --vp-c-brand-next: #c76dd1
   }
-  .doc-content-document a:hover {
-    color: #bcc0ff;
+
+  21.25% {
+      --vp-c-brand-1: #009dfa;
+      --vp-c-brand-light: #5ac3ff;
+      --vp-c-brand-lighter: #8decff;
+      --vp-c-brand-dark: #0078d0;
+      --vp-c-brand-darker: #0055a8;
+      --vp-c-brand-next: #cf69c9
   }
 
-  .doc-content-document table {
-    border: 1px solid #333;
+  22.5% {
+      --vp-c-brand-1: #009bfc;
+      --vp-c-brand-light: #5bc1ff;
+      --vp-c-brand-lighter: #8de9ff;
+      --vp-c-brand-dark: #0076d2;
+      --vp-c-brand-darker: #0053aa;
+      --vp-c-brand-next: #d566c2
   }
-  .doc-content-document table th,
-  .doc-content-document table td {
-    border-left: 1px solid #333;
-    color: #fff;
+
+  23.75% {
+      --vp-c-brand-1: #0098fd;
+      --vp-c-brand-light: #5bbfff;
+      --vp-c-brand-lighter: #8ee7ff;
+      --vp-c-brand-dark: #0074d3;
+      --vp-c-brand-darker: #0051ab;
+      --vp-c-brand-next: #dc63ba
   }
-  .doc-content-document table td  {
-    border-top: 1px solid #333;
+
+  25% {
+      --vp-c-brand-1: #0096fd;
+      --vp-c-brand-light: #5bbcff;
+      --vp-c-brand-lighter: #8ee4ff;
+      --vp-c-brand-dark: #0071d4;
+      --vp-c-brand-darker: #004fab;
+      --vp-c-brand-next: #e160b3
   }
 
-  .doc-content-document ul li,
-  .doc-content-document ol li
-   .doc-content-document strong {
-    color: var(--text-font-color);
+  26.25% {
+      --vp-c-brand-1: #0093fd;
+      --vp-c-brand-light: #5bb9ff;
+      --vp-c-brand-lighter: #8ee1ff;
+      --vp-c-brand-dark: #006fd3;
+      --vp-c-brand-darker: #004dab;
+      --vp-c-brand-next: #e65eab
   }
 
-  .action .why-quark {
-    background-color: #313136;
-    color: #fff;
-    &:hover {
-      background-color: #2c2c30;
-    }
+  27.5% {
+      --vp-c-brand-1: #2e90fc;
+      --vp-c-brand-light: #69b6ff;
+      --vp-c-brand-lighter: #99deff;
+      --vp-c-brand-dark: #006cd2;
+      --vp-c-brand-darker: #004baa;
+      --vp-c-brand-next: #e95ca2
+  }
+
+  28.75% {
+      --vp-c-brand-1: #4d8dfa;
+      --vp-c-brand-light: #7eb3ff;
+      --vp-c-brand-lighter: #abdbff;
+      --vp-c-brand-dark: #0069d1;
+      --vp-c-brand-darker: #0048a9;
+      --vp-c-brand-next: #ed5a9a
+  }
+
+  30% {
+      --vp-c-brand-1: #638af8;
+      --vp-c-brand-light: #8fb0ff;
+      --vp-c-brand-lighter: #bbd7ff;
+      --vp-c-brand-dark: #3066cf;
+      --vp-c-brand-darker: #0045a7;
+      --vp-c-brand-next: #ef5992
+  }
+
+  31.25% {
+      --vp-c-brand-1: #7587f5;
+      --vp-c-brand-light: #9fadff;
+      --vp-c-brand-lighter: #cad4ff;
+      --vp-c-brand-dark: #4963cc;
+      --vp-c-brand-darker: #0941a4;
+      --vp-c-brand-next: #f15989
   }
-}
 
+  32.5% {
+      --vp-c-brand-1: #8583f1;
+      --vp-c-brand-light: #aea9ff;
+      --vp-c-brand-lighter: #d8d1ff;
+      --vp-c-brand-dark: #5b5fc8;
+      --vp-c-brand-darker: #2e3ea1;
+      --vp-c-brand-next: #f25981
+  }
+
+  33.75% {
+      --vp-c-brand-1: #9280ed;
+      --vp-c-brand-light: #bca6ff;
+      --vp-c-brand-lighter: #e6cdff;
+      --vp-c-brand-dark: #6a5cc4;
+      --vp-c-brand-darker: #413a9d;
+      --vp-c-brand-next: #f25a79
+  }
 
+  35% {
+      --vp-c-brand-1: #9f7ce9;
+      --vp-c-brand-light: #c8a2ff;
+      --vp-c-brand-lighter: #f2c9ff;
+      --vp-c-brand-dark: #7758c0;
+      --vp-c-brand-darker: #503598;
+      --vp-c-brand-next: #f25c71
+  }
 
+  36.25% {
+      --vp-c-brand-1: #aa78e3;
+      --vp-c-brand-light: #d39eff;
+      --vp-c-brand-lighter: #fec6ff;
+      --vp-c-brand-dark: #8354bb;
+      --vp-c-brand-darker: #5c3193;
+      --vp-c-brand-next: #f15e69
+  }
 
+  37.5% {
+      --vp-c-brand-1: #b574dd;
+      --vp-c-brand-light: #de9bff;
+      --vp-c-brand-lighter: #ffc2ff;
+      --vp-c-brand-dark: #8d50b5;
+      --vp-c-brand-darker: #662c8e;
+      --vp-c-brand-next: #ef6061
+  }
 
-// @media screen and (min-width: 860px) {
-//   .doc-nav {
-//     display: none;
-//   }
-//   .doc-content {
-//     margin-left: 0!important;
-//   }
-// }
+  38.75% {
+      --vp-c-brand-1: #be71d7;
+      --vp-c-brand-light: #e897ff;
+      --vp-c-brand-lighter: #ffbfff;
+      --vp-c-brand-dark: #964baf;
+      --vp-c-brand-darker: #6f2688;
+      --vp-c-brand-next: #ed635a
+  }
+
+  40% {
+      --vp-c-brand-1: #c76dd1;
+      --vp-c-brand-light: #f194fa;
+      --vp-c-brand-lighter: #ffbcff;
+      --vp-c-brand-dark: #9e47a9;
+      --vp-c-brand-darker: #772082;
+      --vp-c-brand-next: #eb6552
+  }
+
+  41.25% {
+      --vp-c-brand-1: #cf69c9;
+      --vp-c-brand-light: #f991f2;
+      --vp-c-brand-lighter: #ffb9ff;
+      --vp-c-brand-dark: #a643a2;
+      --vp-c-brand-darker: #7e197c;
+      --vp-c-brand-next: #e8694b
+  }
+
+  42.5% {
+      --vp-c-brand-1: #d566c2;
+      --vp-c-brand-light: #ff8deb;
+      --vp-c-brand-lighter: #ffb6ff;
+      --vp-c-brand-dark: #ac3f9b;
+      --vp-c-brand-darker: #841075;
+      --vp-c-brand-next: #e46c44
+  }
+
+  43.75% {
+      --vp-c-brand-1: #dc63ba;
+      --vp-c-brand-light: #ff8be3;
+      --vp-c-brand-lighter: #ffb3ff;
+      --vp-c-brand-dark: #b23b94;
+      --vp-c-brand-darker: #89046f;
+      --vp-c-brand-next: #e06f3d
+  }
+
+  45% {
+      --vp-c-brand-1: #e160b3;
+      --vp-c-brand-light: #ff88db;
+      --vp-c-brand-lighter: #ffb1ff;
+      --vp-c-brand-dark: #b7378c;
+      --vp-c-brand-darker: #8d0068;
+      --vp-c-brand-next: #db7336
+  }
+
+  46.25% {
+      --vp-c-brand-1: #e65eab;
+      --vp-c-brand-light: #ff86d2;
+      --vp-c-brand-lighter: #ffaffb;
+      --vp-c-brand-dark: #bb3485;
+      --vp-c-brand-darker: #910060;
+      --vp-c-brand-next: #d77630
+  }
+
+  47.5% {
+      --vp-c-brand-1: #e95ca2;
+      --vp-c-brand-light: #ff84ca;
+      --vp-c-brand-lighter: #ffadf2;
+      --vp-c-brand-dark: #be317d;
+      --vp-c-brand-darker: #940059;
+      --vp-c-brand-next: #d17a2a
+  }
 
-// @media screen and (max-width: 880px) {
-//   .doc-nav {
-//     display: block;
-//   }
-//   .doc-content {
-//     margin-left: 260px;
-//   }
-// }
\ No newline at end of file
+  48.75% {
+      --vp-c-brand-1: #ed5a9a;
+      --vp-c-brand-light: #ff83c1;
+      --vp-c-brand-lighter: #fface9;
+      --vp-c-brand-dark: #c12f75;
+      --vp-c-brand-darker: #970052;
+      --vp-c-brand-next: #cc7d24
+  }
+
+  50% {
+      --vp-c-brand-1: #ef5992;
+      --vp-c-brand-light: #ff82b8;
+      --vp-c-brand-lighter: #ffabe0;
+      --vp-c-brand-dark: #c32d6d;
+      --vp-c-brand-darker: #98004b;
+      --vp-c-brand-next: #c6811e
+  }
+
+  51.25% {
+      --vp-c-brand-1: #f15989;
+      --vp-c-brand-light: #ff82af;
+      --vp-c-brand-lighter: #ffabd7;
+      --vp-c-brand-dark: #c52d65;
+      --vp-c-brand-darker: #9a0043;
+      --vp-c-brand-next: #bf8418
+  }
+
+  52.5% {
+      --vp-c-brand-1: #f25981;
+      --vp-c-brand-light: #ff82a7;
+      --vp-c-brand-lighter: #ffabce;
+      --vp-c-brand-dark: #c52e5e;
+      --vp-c-brand-darker: #9a003c;
+      --vp-c-brand-next: #b98713
+  }
+
+  53.75% {
+      --vp-c-brand-1: #f25a79;
+      --vp-c-brand-light: #ff839e;
+      --vp-c-brand-lighter: #ffacc5;
+      --vp-c-brand-dark: #c62f56;
+      --vp-c-brand-darker: #9a0035;
+      --vp-c-brand-next: #b28a0f
+  }
+
+  55% {
+      --vp-c-brand-1: #f25c71;
+      --vp-c-brand-light: #ff8496;
+      --vp-c-brand-lighter: #ffadbc;
+      --vp-c-brand-dark: #c5314e;
+      --vp-c-brand-darker: #99002e;
+      --vp-c-brand-next: #ab8d0c
+  }
+
+  56.25% {
+      --vp-c-brand-1: #f15e69;
+      --vp-c-brand-light: #ff868d;
+      --vp-c-brand-lighter: #ffaeb4;
+      --vp-c-brand-dark: #c43447;
+      --vp-c-brand-darker: #980027;
+      --vp-c-brand-next: #a3900b
+  }
+
+  57.5% {
+      --vp-c-brand-1: #ef6061;
+      --vp-c-brand-light: #ff8885;
+      --vp-c-brand-lighter: #ffb0ab;
+      --vp-c-brand-dark: #c3373f;
+      --vp-c-brand-darker: #970020;
+      --vp-c-brand-next: #9c920d
+  }
+
+  58.75% {
+      --vp-c-brand-1: #ed635a;
+      --vp-c-brand-light: #ff8a7d;
+      --vp-c-brand-lighter: #ffb2a3;
+      --vp-c-brand-dark: #c13b38;
+      --vp-c-brand-darker: #940619;
+      --vp-c-brand-next: #949510
+  }
+
+  60% {
+      --vp-c-brand-1: #eb6552;
+      --vp-c-brand-light: #ff8d76;
+      --vp-c-brand-lighter: #ffb59b;
+      --vp-c-brand-dark: #be3e31;
+      --vp-c-brand-darker: #921111;
+      --vp-c-brand-next: #8b9715
+  }
+
+  61.25% {
+      --vp-c-brand-1: #e8694b;
+      --vp-c-brand-light: #ff8f6e;
+      --vp-c-brand-lighter: #ffb794;
+      --vp-c-brand-dark: #bb4229;
+      --vp-c-brand-darker: #8f1908;
+      --vp-c-brand-next: #83991b
+  }
+
+  62.5% {
+      --vp-c-brand-1: #e46c44;
+      --vp-c-brand-light: #ff9367;
+      --vp-c-brand-lighter: #ffba8c;
+      --vp-c-brand-dark: #b74622;
+      --vp-c-brand-darker: #8c1f00;
+      --vp-c-brand-next: #7a9b21
+  }
+
+  63.75% {
+      --vp-c-brand-1: #e06f3d;
+      --vp-c-brand-light: #ff9661;
+      --vp-c-brand-lighter: #ffbd86;
+      --vp-c-brand-dark: #b44a1a;
+      --vp-c-brand-darker: #882500;
+      --vp-c-brand-next: #719d27
+  }
+
+  65% {
+      --vp-c-brand-1: #db7336;
+      --vp-c-brand-light: #ff995a;
+      --vp-c-brand-lighter: #ffc17f;
+      --vp-c-brand-dark: #af4e11;
+      --vp-c-brand-darker: #842a00;
+      --vp-c-brand-next: #679e2e
+  }
+
+  66.25% {
+      --vp-c-brand-1: #d77630;
+      --vp-c-brand-light: #ff9c54;
+      --vp-c-brand-lighter: #ffc47a;
+      --vp-c-brand-dark: #ab5206;
+      --vp-c-brand-darker: #802f00;
+      --vp-c-brand-next: #5da035
+  }
+
+  67.5% {
+      --vp-c-brand-1: #d17a2a;
+      --vp-c-brand-light: #fea04f;
+      --vp-c-brand-lighter: #ffc774;
+      --vp-c-brand-dark: #a55600;
+      --vp-c-brand-darker: #7b3300;
+      --vp-c-brand-next: #51a13c
+  }
+
+  68.75% {
+      --vp-c-brand-1: #cc7d24;
+      --vp-c-brand-light: #f8a34a;
+      --vp-c-brand-lighter: #ffca70;
+      --vp-c-brand-dark: #a05900;
+      --vp-c-brand-darker: #773700;
+      --vp-c-brand-next: #44a244
+  }
+
+  70% {
+      --vp-c-brand-1: #c6811e;
+      --vp-c-brand-light: #f2a646;
+      --vp-c-brand-lighter: #ffce6c;
+      --vp-c-brand-dark: #9b5d00;
+      --vp-c-brand-darker: #713b00;
+      --vp-c-brand-next: #34a44b
+  }
+
+  71.25% {
+      --vp-c-brand-1: #bf8418;
+      --vp-c-brand-light: #ebaa42;
+      --vp-c-brand-lighter: #ffd168;
+      --vp-c-brand-dark: #956000;
+      --vp-c-brand-darker: #6c3e00;
+      --vp-c-brand-next: #1ba553
+  }
+
+  72.5% {
+      --vp-c-brand-1: #b98713;
+      --vp-c-brand-light: #e4ad3f;
+      --vp-c-brand-lighter: #ffd466;
+      --vp-c-brand-dark: #8e6300;
+      --vp-c-brand-darker: #674100;
+      --vp-c-brand-next: #00a65b
+  }
+
+  73.75% {
+      --vp-c-brand-1: #b28a0f;
+      --vp-c-brand-light: #ddb03d;
+      --vp-c-brand-lighter: #ffd764;
+      --vp-c-brand-dark: #886600;
+      --vp-c-brand-darker: #614400;
+      --vp-c-brand-next: #00a663
+  }
+
+  75% {
+      --vp-c-brand-1: #ab8d0c;
+      --vp-c-brand-light: #d5b33c;
+      --vp-c-brand-lighter: #ffda63;
+      --vp-c-brand-dark: #816900;
+      --vp-c-brand-darker: #5b4700;
+      --vp-c-brand-next: #00a76c
+  }
+
+  76.25% {
+      --vp-c-brand-1: #a3900b;
+      --vp-c-brand-light: #cdb63c;
+      --vp-c-brand-lighter: #f8dd63;
+      --vp-c-brand-dark: #7a6b00;
+      --vp-c-brand-darker: #554900;
+      --vp-c-brand-next: #00a874
+  }
+
+  77.5% {
+      --vp-c-brand-1: #9c920d;
+      --vp-c-brand-light: #c5b83d;
+      --vp-c-brand-lighter: #f0e064;
+      --vp-c-brand-dark: #736e00;
+      --vp-c-brand-darker: #4e4b00;
+      --vp-c-brand-next: #00a87d
+  }
+
+  78.75% {
+      --vp-c-brand-1: #949510;
+      --vp-c-brand-light: #bdbb3e;
+      --vp-c-brand-lighter: #e7e366;
+      --vp-c-brand-dark: #6c7000;
+      --vp-c-brand-darker: #474d00;
+      --vp-c-brand-next: #00a985
+  }
+
+  80% {
+      --vp-c-brand-1: #8b9715;
+      --vp-c-brand-light: #b4bd41;
+      --vp-c-brand-lighter: #dee668;
+      --vp-c-brand-dark: #647200;
+      --vp-c-brand-darker: #404f00;
+      --vp-c-brand-next: #00a98e
+  }
+
+  81.25% {
+      --vp-c-brand-1: #83991b;
+      --vp-c-brand-light: #abc045;
+      --vp-c-brand-lighter: #d4e86c;
+      --vp-c-brand-dark: #5c7400;
+      --vp-c-brand-darker: #385100;
+      --vp-c-brand-next: #00a996
+  }
+
+  82.5% {
+      --vp-c-brand-1: #7a9b21;
+      --vp-c-brand-light: #a2c249;
+      --vp-c-brand-lighter: #cbea70;
+      --vp-c-brand-dark: #537600;
+      --vp-c-brand-darker: #2f5200;
+      --vp-c-brand-next: #00a99f
+  }
+
+  83.75% {
+      --vp-c-brand-1: #719d27;
+      --vp-c-brand-light: #98c44e;
+      --vp-c-brand-lighter: #c1ec75;
+      --vp-c-brand-dark: #4a7700;
+      --vp-c-brand-darker: #255300;
+      --vp-c-brand-next: #00a9a7
+  }
+
+  85% {
+      --vp-c-brand-1: #679e2e;
+      --vp-c-brand-light: #8ec654;
+      --vp-c-brand-lighter: #b7ee7a;
+      --vp-c-brand-dark: #407900;
+      --vp-c-brand-darker: #185500;
+      --vp-c-brand-next: #00a9b0
+  }
+
+  86.25% {
+      --vp-c-brand-1: #5da035;
+      --vp-c-brand-light: #84c75a;
+      --vp-c-brand-lighter: #acf080;
+      --vp-c-brand-dark: #357a0a;
+      --vp-c-brand-darker: #015600;
+      --vp-c-brand-next: #00a9b8
+  }
+
+  87.5% {
+      --vp-c-brand-1: #51a13c;
+      --vp-c-brand-light: #79c961;
+      --vp-c-brand-lighter: #a1f287;
+      --vp-c-brand-dark: #277b16;
+      --vp-c-brand-darker: #005700;
+      --vp-c-brand-next: #00a9c0
+  }
+
+  88.75% {
+      --vp-c-brand-1: #44a244;
+      --vp-c-brand-light: #6dca68;
+      --vp-c-brand-lighter: #96f48e;
+      --vp-c-brand-dark: #117c1f;
+      --vp-c-brand-darker: #005700;
+      --vp-c-brand-next: #00a8c7
+  }
+
+  90% {
+      --vp-c-brand-1: #34a44b;
+      --vp-c-brand-light: #60cc70;
+      --vp-c-brand-lighter: #89f595;
+      --vp-c-brand-dark: #007d28;
+      --vp-c-brand-darker: #005801;
+      --vp-c-brand-next: #00a8cf
+  }
+
+  91.25% {
+      --vp-c-brand-1: #1ba553;
+      --vp-c-brand-light: #51cd77;
+      --vp-c-brand-lighter: #7cf69d;
+      --vp-c-brand-dark: #007e30;
+      --vp-c-brand-darker: #00590d;
+      --vp-c-brand-next: #00a7d5
+  }
+
+  92.5% {
+      --vp-c-brand-1: #00a65b;
+      --vp-c-brand-light: #48ce80;
+      --vp-c-brand-lighter: #75f7a6;
+      --vp-c-brand-dark: #007f38;
+      --vp-c-brand-darker: #005917;
+      --vp-c-brand-next: #00a6dc
+  }
+
+  93.75% {
+      --vp-c-brand-1: #00a663;
+      --vp-c-brand-light: #48cf88;
+      --vp-c-brand-lighter: #75f8ae;
+      --vp-c-brand-dark: #008040;
+      --vp-c-brand-darker: #005a20;
+      --vp-c-brand-next: #00a6e2
+  }
+
+  95% {
+      --vp-c-brand-1: #00a76c;
+      --vp-c-brand-light: #49cf91;
+      --vp-c-brand-lighter: #76f9b7;
+      --vp-c-brand-dark: #008049;
+      --vp-c-brand-darker: #005b28;
+      --vp-c-brand-next: #00a4e7
+  }
+
+  96.25% {
+      --vp-c-brand-1: #00a874;
+      --vp-c-brand-light: #49d099;
+      --vp-c-brand-lighter: #76f9c0;
+      --vp-c-brand-dark: #008151;
+      --vp-c-brand-darker: #005c30;
+      --vp-c-brand-next: #00a3ec
+  }
+
+  97.5% {
+      --vp-c-brand-1: #00a87d;
+      --vp-c-brand-light: #49d0a2;
+      --vp-c-brand-lighter: #77fac9;
+      --vp-c-brand-dark: #008159;
+      --vp-c-brand-darker: #005c37;
+      --vp-c-brand-next: #00a2f1
+  }
+
+  98.75% {
+      --vp-c-brand-1: #00a985;
+      --vp-c-brand-light: #4ad1ab;
+      --vp-c-brand-lighter: #77fad3;
+      --vp-c-brand-dark: #008261;
+      --vp-c-brand-darker: #005d3f;
+      --vp-c-brand-next: #00a0f4
+  }
+
+  to {
+      --vp-c-brand-1: #00a98e;
+      --vp-c-brand-light: #4ad1b4;
+      --vp-c-brand-lighter: #78fadc;
+      --vp-c-brand-dark: #008269;
+      --vp-c-brand-darker: #005d47;
+      --vp-c-brand-next: #009ff7
+  }
+}