diff --git a/.vitepress/theme/Layout.vue b/.vitepress/theme/Layout.vue
index ea1d5e0..67bd325 100644
--- a/.vitepress/theme/Layout.vue
+++ b/.vitepress/theme/Layout.vue
@@ -1,28 +1,31 @@
 <script setup lang="ts">
-import { useData } from 'vitepress'
-
-// https://vitepress.dev/reference/runtime-api#usedata
-const { site, page, frontmatter } = useData()
+import { useData } from "vitepress";
+import Sidebar from "./components/Sidebar.vue";
+const { site, page, frontmatter } = useData();
 </script>
 
 <template>
-  <div v-if="frontmatter.home">
-    <h1>{{ site.title }}</h1>
-    <p>{{ site.description }}</p>
-    <ul>
-      <li><a href="/markdown-examples.html">Markdown Examples</a></li>
-      <li><a href="/api-examples.html">API Examples</a></li>
-    </ul>
+  <div id="main-layout" spec="feed">
+    <Sidebar />
+    <div id="main-layout-content-flow">
+      <div id="main-layout-content-filler">
+        <div v-if="frontmatter.home">
+          <h1>{{ site.title }}</h1>
+          <p>{{ site.description }}</p>
+          <ul>
+            <li><a href="/markdown-examples.html">Markdown Examples</a></li>
+            <li><a href="/api-examples.html">API Examples</a></li>
+          </ul>
+        </div>
+        <div v-else-if="page.isNotFound">
+          <a href="/">Home</a>
+          <p>404!</p>
+        </div>
+        <div v-else>
+          <a href="/">Home</a>
+          <Content />
+        </div>
+      </div>
+    </div>
   </div>
-
-  <div v-if="page.isNotFound">
-    <a href="/">Home</a>
-    <p>404!</p>
-  </div>
-
-  <div v-else>
-    <a href="/">Home</a>
-    <Content />
-  </div>
-
 </template>
diff --git a/.vitepress/theme/index.ts b/.vitepress/theme/index.ts
index 9667dfe..705b97e 100644
--- a/.vitepress/theme/index.ts
+++ b/.vitepress/theme/index.ts
@@ -1,11 +1,11 @@
 // https://vitepress.dev/guide/custom-theme
 import Layout from "./Layout.vue";
 import type { Theme } from "vitepress";
-import "./style.css";
+import "./styles/main.scss";
 
 export default {
   Layout,
-  enhanceApp({ app, router, siteData }) {
-    // ...
+  enhanceApp({ app }) {
+    app.component("MainLaylout", Layout);
   },
 } satisfies Theme;
diff --git a/.vitepress/theme/styles/_components/layout.scss b/.vitepress/theme/styles/_components/layout.scss
new file mode 100644
index 0000000..22e0a6a
--- /dev/null
+++ b/.vitepress/theme/styles/_components/layout.scss
@@ -0,0 +1,969 @@
+@use "sass:meta";
+@use "sass:string";
+@use "../mixin";
+
+#main-layout {
+  display: grid;
+  grid-template-columns: 96px 0px auto;
+
+  position: relative;
+
+  height: 100%;
+
+  z-index: 1;
+  transition: var(--md-sys-motion-duration-medium1) var(--md-sys-motion-easing-emphasized);
+
+  #main-layout-content-flow {
+    display: grid;
+    align-content: space-between;
+    align-items: start;
+    gap: 24px;
+    grid-column: 3;
+    grid-template-columns: repeat(12, minmax(72px, 84px));
+
+    position: relative;
+
+    padding-block-end: 68px;
+    padding-inline: 4vw;
+
+    width: 100%;
+
+    overflow: overlay;
+    scroll-behavior: smooth;
+    scroll-padding-top: 120px;
+    scrollbar-width: thin;
+    transition: var(--md-sys-motion-duration-medium1) var(--md-sys-motion-easing-emphasized);
+
+    #main-layout-content-filler {
+      display: grid;
+      grid-column: span 12;
+    }
+
+    #main-layout-scrolltop {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      grid-column: 11/13;
+
+      position: sticky;
+      bottom: 72px;
+      right: 0px;
+
+      height: 100%;
+      width: 100%;
+
+      opacity: 0;
+      transition: var(--md-sys-motion-duration-medium4) var(--md-sys-motion-easing-standard);
+      visibility: hidden;
+      z-index: 21;
+
+      #main-layout-scrolltop-desktop {
+        @include mixin.material-symbols($size: 24);
+
+        position: relative;
+
+        height: 84px;
+        min-width: 84px;
+        width: 84px;
+
+        color: var(--md-sys-color-outline);
+
+        border-radius: var(--md-sys-shape-corner-full);
+        border: 1px solid var(--md-sys-color-outline-variant);
+
+        background-color: var(--md-sys-color-surface-container-low);
+
+        cursor: pointer;
+        overflow: hidden;
+      }
+    }
+
+    hr {
+      grid-column: span 12;
+    }
+  }
+
+  &[spec="article"] {
+    #main-layout-content-flow {
+      grid-template-rows: auto;
+      justify-content: center;
+
+      padding-block-end: 68px;
+
+      #main-layout-content-filler {
+        grid-template-columns: minmax(50%, 70%) minmax(20%, 30%);
+
+        padding-block: 24px 12px;
+
+        border-radius: var(--md-sys-shape-corner-large) var(--md-sys-shape-corner-large) var(--md-sys-shape-corner-extra-large)
+          var(--md-sys-shape-corner-extra-large);
+
+        background-color: var(--md-sys-color-surface-container-lowest);
+
+        section:nth-child(1) {
+          overflow: hidden;
+
+          em {
+            display: inline-block;
+
+            font-style: normal;
+
+            transform: skewX(-10deg);
+          }
+
+          pre {
+            overflow: auto;
+          }
+
+          div a {
+            text-decoration: none;
+          }
+
+          ul,
+          ol {
+            padding-inline-start: 20px;
+
+            li {
+              @include mixin.typescale-style("body-large");
+
+              position: relative;
+
+              margin-block-end: 5px;
+
+              vertical-align: middle;
+
+              p a:has(img) {
+                max-width: 100%;
+
+                img {
+                  max-width: 100%;
+                }
+              }
+            }
+          }
+
+          ol {
+            li {
+              div.highlighter-rouge {
+                margin-block-end: 5px;
+              }
+
+              blockquote {
+                border-radius: var(--md-sys-shape-corner-small);
+              }
+            }
+          }
+
+          ul {
+            list-style-type: none;
+
+            li::before {
+              content: "";
+
+              display: inline-block;
+
+              position: absolute;
+              left: -21px;
+              top: 4.5px;
+
+              height: 18px;
+              width: 18px;
+
+              background-color: var(--md-sys-color-on-surface);
+
+              -webkit-mask: var(--via-svg-list-bullet) 0 0/100% no-repeat;
+              mask: var(--via-svg-list-bullet) 0 0/100% no-repeat;
+            }
+
+            li > p::before {
+              display: none;
+            }
+
+            &.task-list {
+              padding-inline: 0px;
+
+              .task-list-item {
+                &::before {
+                  display: none;
+                }
+              }
+            }
+          }
+
+          p a,
+          li a {
+            display: inline-flex;
+
+            position: relative;
+
+            text-indent: initial;
+            text-decoration: underline dashed;
+
+            overflow: hidden;
+
+            &::before {
+              content: "";
+
+              display: block;
+
+              position: absolute;
+              bottom: 0px;
+
+              height: 100%;
+              width: 0%;
+
+              background-color: var(--md-sys-color-primary);
+
+              opacity: 0.2;
+              transition: var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-emphasized);
+            }
+
+            &:hover {
+              text-decoration: underline solid;
+
+              &::before {
+                width: 100%;
+              }
+            }
+          }
+
+          blockquote {
+            margin-block-end: 12px;
+            padding-block: 24px 12px;
+
+            color: var(--md-sys-color-on-tertiary-container);
+
+            border-radius: var(--md-sys-shape-corner-medium);
+
+            background-color: var(--md-sys-color-inverse-on-surface);
+
+            p {
+              margin-inline: 24px;
+              margin-block-end: 0px;
+              padding-block-end: 12px;
+            }
+
+            ul,
+            ol {
+              margin-inline: 24px;
+              padding-block-end: 7px;
+            }
+
+            .task-list-item {
+              margin: 0px;
+
+              &::before {
+                display: none;
+              }
+            }
+          }
+
+          details {
+            margin: 0.5vh 0px;
+
+            border-radius: var(--md-sys-shape-corner-small);
+
+            overflow: hidden;
+            transition: var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
+
+            img {
+              display: block;
+            }
+
+            summary {
+              @include mixin.typescale-style("body-large");
+
+              display: flex;
+              align-items: center;
+              flex-direction: row;
+              flex-wrap: nowrap;
+              gap: 12px;
+
+              padding: 12px;
+
+              cursor: pointer;
+              list-style: none;
+              transition: var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-emphasized);
+
+              &::before {
+                @include mixin.material-symbols("expand_more");
+
+                transform: rotateZ(-90deg);
+                transition: var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-emphasized);
+              }
+            }
+
+            &:hover {
+              background-color: var(--md-sys-color-inverse-on-surface);
+            }
+
+            &[open] {
+              border-radius: var(--md-sys-shape-corner-extra-large);
+
+              summary {
+                &:focus-visible {
+                  border-radius: var(--md-sys-shape-corner-extra-large-top);
+                }
+
+                &::before {
+                  transform: rotateZ(0deg);
+                }
+              }
+            }
+          }
+
+          table {
+            margin-block-end: 12px;
+            margin-inline: 24px;
+            padding: 0px;
+
+            width: calc(100% - 48px);
+          }
+
+          mjx-container {
+            @include mixin.typescale-style("body-large");
+
+            margin-inline: 10px;
+          }
+
+          [role="doc-noteref"] {
+            display: inline-block;
+
+            vertical-align: baseline;
+
+            a {
+              text-decoration: none;
+
+              &::before {
+                display: none;
+              }
+            }
+
+            .footnote {
+              display: inline-block;
+
+              min-width: 24px;
+
+              color: var(--md-sys-color-on-tertiary-container);
+              line-height: 18px;
+              text-align: center;
+              vertical-align: sub;
+
+              border-radius: var(--md-sys-shape-corner-large);
+
+              background-color: var(--md-sys-color-tertiary-container);
+            }
+
+            &:target .footnote {
+              color: var(--md-sys-color-on-primary);
+
+              background-color: var(--md-sys-color-primary);
+            }
+          }
+
+          [role="doc-endnotes"] {
+            margin-inline: 24px;
+            padding-block-end: 12px;
+
+            ol {
+              margin-inline: 24px;
+              padding-block-start: 24px;
+              padding-inline-start: 0px;
+
+              counter-reset: listCounter;
+
+              p {
+                display: inline-block;
+
+                vertical-align: middle;
+              }
+
+              :target p {
+                text-decoration: underline wavy;
+                text-underline-offset: 4px;
+              }
+            }
+          }
+
+          [role="doc-endnote"] {
+            counter-increment: listCounter;
+            list-style: none;
+
+            a {
+              text-decoration: none;
+
+              &::before {
+                display: none;
+              }
+            }
+
+            &::before {
+              @include mixin.typescale-style("body-large", $line-height: 36rem);
+              content: counter(listCounter);
+
+              display: inline-block;
+
+              min-height: 36px;
+              min-width: 24px;
+
+              color: var(--md-sys-color-on-tertiary-container);
+              text-align: center;
+              vertical-align: middle;
+
+              border-radius: var(--md-sys-shape-corner-large);
+
+              background-color: var(--md-sys-color-tertiary-container);
+            }
+          }
+
+          & > {
+            * {
+              position: relative;
+
+              margin-inline: 24px;
+              padding-block-end: 12px;
+            }
+
+            h1,
+            h2,
+            h3,
+            h4,
+            h5,
+            h6 {
+              &::before {
+                content: "";
+
+                display: inline-block;
+
+                position: absolute;
+                left: -24px;
+
+                height: calc(100% - 12px);
+                width: 3px;
+
+                background-color: var(--md-sys-color-surface-container-high);
+              }
+            }
+
+            h1 {
+              cursor: pointer;
+              transition: var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-emphasized);
+
+              &::before {
+                transition: var(--md-sys-motion-duration-medium1) var(--md-sys-motion-easing-standard);
+              }
+
+              &:hover {
+                font-weight: 500;
+
+                &::before {
+                  width: 6px;
+                }
+              }
+
+              &:active {
+                font-weight: 300;
+
+                &::before {
+                  width: 18px;
+                }
+              }
+            }
+
+            p {
+              img {
+                max-width: 100%;
+
+                border-radius: var(--md-sys-shape-corner-small);
+              }
+            }
+
+            picture {
+              display: block;
+
+              source,
+              img {
+                max-width: 100%;
+
+                border-radius: var(--md-sys-shape-corner-small);
+              }
+            }
+
+            div.highlighter-rouge {
+              width: calc(100% - 48px);
+            }
+          }
+        }
+
+        section:nth-child(2) {
+          margin-inline: 24px;
+          padding-block-end: 12px;
+
+          background-color: var(--md-sys-color-inverse-on-surface);
+
+          visibility: hidden;
+        }
+      }
+
+      .main-layout-quicklinks {
+        width: 100%;
+        height: max-content;
+
+        text-align: center;
+        text-decoration: none;
+        vertical-align: top;
+        white-space: break-spaces;
+
+        p {
+          display: inline-flex;
+          align-items: center;
+          gap: 3px;
+        }
+
+        .card {
+          height: 100%;
+        }
+
+        &[spec="previous"] {
+          grid-column: 1/6;
+
+          .card .card-supporting {
+            align-items: self-start;
+
+            text-align: start;
+
+            p::before {
+              @include mixin.material-symbols("west", $size: 18);
+            }
+          }
+        }
+
+        &[spec="next"] {
+          grid-column: 6/11;
+
+          .card .card-supporting {
+            align-items: flex-end;
+
+            text-align: end;
+
+            p::after {
+              @include mixin.material-symbols("east", $size: 18);
+            }
+          }
+        }
+      }
+    }
+  }
+
+  &[spec="blank"] {
+    #main-layout-content-flow {
+      grid-template-rows: auto;
+
+      padding-block-end: 68px;
+
+      #main-layout-content-filler {
+        grid-template-columns: auto;
+
+        padding-block: 24px 12px;
+
+        border-radius: var(--md-sys-shape-corner-large);
+
+        background-color: var(--md-sys-color-surface-container-lowest);
+
+        section:nth-child(1) {
+          overflow: hidden;
+
+          * {
+            position: relative;
+
+            margin-inline: 24px;
+            padding-block-end: 12px;
+          }
+
+          h1,
+          h2,
+          h3,
+          h4,
+          h5,
+          h6 {
+            &::before {
+              content: "";
+
+              display: inline-block;
+
+              position: absolute;
+              left: -24px;
+
+              height: calc(100% - 12px);
+              width: 3px;
+
+              background-color: var(--md-sys-color-surface-container-high);
+            }
+          }
+
+          h1 {
+            cursor: pointer;
+            transition: var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-emphasized);
+
+            &::before {
+              transition: var(--md-sys-motion-duration-medium1) var(--md-sys-motion-easing-standard);
+            }
+
+            &:hover {
+              font-weight: 500;
+
+              &::before {
+                width: 6px;
+              }
+            }
+
+            &:active {
+              font-weight: 300;
+
+              &::before {
+                width: 18px;
+              }
+            }
+          }
+
+          p {
+            img {
+              width: 100%;
+
+              border-radius: var(--md-sys-shape-corner-small);
+            }
+          }
+        }
+
+        section:nth-child(2) {
+          display: none;
+        }
+      }
+    }
+  }
+
+  &[spec="feed"] {
+    #main-layout-content-flow {
+      gap: 24px;
+      grid-template-rows: minmax(90px, 240px) minmax(180px, 360px) auto;
+      justify-content: center;
+
+      padding-block-end: 68px;
+
+      & > {
+        h1 {
+          @include mixin.typescale-style("display-large");
+
+          display: flex;
+          align-items: center;
+          grid-column: span 9;
+
+          height: 100%;
+        }
+
+        h6 {
+          grid-column: span 9;
+        }
+
+        img {
+          grid-column: 11 / span 2;
+          grid-row: 2 / span 2;
+
+          margin: auto;
+
+          height: 120px;
+          width: 120px;
+
+          -webkit-mask: var(--via-svg-mask) no-repeat 0 / 100%;
+          mask: var(--via-svg-mask) no-repeat 0 / 100%;
+        }
+      }
+
+      #main-layout-content-filler {
+        display: flex;
+        flex-flow: column wrap;
+        height: 100%;
+
+        padding: 24px;
+
+        background-color: var(--md-sys-color-surface-container-lowest);
+
+        border-radius: var(--md-sys-shape-corner-extra-extra-large);
+
+        &::before,
+        &::after {
+          content: "";
+          flex-basis: 100%;
+          width: 0;
+          order: 2;
+        }
+
+        div.card[spec="feed"] {
+          width: calc(50% - 12px);
+
+          border-radius: var(--md-sys-shape-corner-extra-large-increased);
+
+          &:nth-child(2n + 4),
+          &[size="large"] {
+            margin-inline-end: 12px;
+
+            order: 1;
+          }
+
+          &:nth-child(2n + 3),
+          &[size="small"] {
+            margin-inline-start: 12px;
+
+            order: 2;
+          }
+
+          & > a {
+            width: 100%;
+
+            color: var(--md-sys-color-on-surface);
+            text-decoration: none;
+          }
+        }
+      }
+    }
+  }
+
+  @media screen and (max-width: 1600px) {
+    $columns: 9;
+
+    #main-layout-content-flow {
+      grid-template-columns: repeat($columns, 1fr);
+      padding-inline: 6vw;
+
+      #main-layout-content-filler {
+        grid-column: span $columns;
+      }
+
+      #main-layout-scrolltop {
+        grid-column: $columns;
+      }
+
+      hr {
+        grid-column: span $columns;
+      }
+
+      .main-layout-footer {
+        grid-column: span $columns;
+      }
+    }
+
+    &[spec="article"] {
+      #main-layout-content-flow {
+        #main-layout-content-filler {
+          grid-template-columns: minmax(50vw, 70%) minmax(300px, 30%);
+        }
+
+        .main-layout-quicklinks {
+          &[spec="previous"] {
+            grid-column: 1 string.unquote("/") calc(($columns + 1) / 2);
+          }
+
+          &[spec="next"] {
+            grid-column: calc(($columns + 1) / 2) string.unquote("/") $columns;
+          }
+        }
+      }
+    }
+
+    &[spec="feed"] {
+      #main-layout-content-flow {
+        & > {
+          h1,
+          h6 {
+            grid-column: span calc($columns - 2);
+          }
+
+          img {
+            grid-column: calc($columns - 1) / calc($columns + 1);
+          }
+        }
+
+        #main-layout-search {
+          grid-column: span $columns;
+        }
+      }
+    }
+  }
+
+  @media screen and (max-width: 1200px) {
+    $columns: 6;
+
+    #main-layout-content-flow {
+      grid-template-columns: repeat($columns, 1fr);
+
+      padding-inline: 24px;
+
+      #main-layout-content-filler {
+        grid-column: span $columns;
+      }
+
+      #main-layout-scrolltop {
+        grid-column: $columns;
+      }
+
+      hr {
+        grid-column: span $columns;
+      }
+
+      .main-layout-footer {
+        grid-column: span $columns;
+      }
+    }
+
+    &[spec="article"] {
+      #main-layout-content-flow {
+        #main-layout-content-filler {
+          grid-template-columns: auto;
+
+          section:nth-child(2) {
+            display: none;
+          }
+        }
+
+        .main-layout-quicklinks {
+          &[spec="previous"],
+          &[spec="next"] {
+            grid-column: span calc($columns / 2);
+          }
+        }
+      }
+    }
+
+    &[spec="feed"] {
+      #main-layout-content-flow {
+        & > {
+          h1,
+          h6 {
+            grid-column: span calc($columns - 1);
+          }
+
+          img {
+            grid-column: $columns;
+          }
+        }
+      }
+    }
+  }
+
+  @media screen and (max-width: 840px) {
+    $columns: 4;
+
+    grid-template-columns: 0px auto;
+    grid-template-rows: auto 80px;
+
+    #main-layout-content-flow {
+      grid-template-columns: repeat($columns, 1fr);
+
+      padding-block: 64px;
+      padding-inline: 42px;
+
+      #main-layout-content-filler {
+        grid-column: span $columns;
+      }
+
+      #main-layout-scrolltop {
+        grid-column: $columns;
+
+        bottom: 0px;
+      }
+
+      hr {
+        grid-column: span $columns;
+      }
+
+      .main-layout-footer {
+        grid-column: span $columns;
+      }
+    }
+
+    &[spec="article"] {
+      #main-layout-content-flow {
+        .main-layout-quicklinks {
+          &[spec="previous"],
+          &[spec="next"] {
+            grid-column: span calc($columns / 2);
+          }
+        }
+      }
+    }
+
+    &[spec="feed"] {
+      #main-layout-content-flow {
+        & > {
+          h1 {
+            @include mixin.typescale-style("display-medium");
+
+            grid-column: span calc($columns - 1);
+
+            margin-inline-start: 12px;
+          }
+
+          h6 {
+            grid-column: span $columns;
+
+            margin-inline-start: 12px;
+          }
+
+          img {
+            grid-column: $columns;
+            grid-row: 1;
+          }
+        }
+
+        #main-layout-content-filler {
+          &::before,
+          &::after {
+            order: 1;
+          }
+
+          div.card[spec="feed"] {
+            width: 100%;
+
+            &:nth-child(2n + 4),
+            &[size="large"] {
+              margin-inline-end: 0px;
+
+              order: 1;
+            }
+
+            &:nth-child(2n + 3),
+            &[size="small"] {
+              margin-inline-start: 0px;
+
+              order: 1;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  @media screen and (max-width: 600px) {
+    $columns: 4;
+
+    #main-layout-content-flow {
+      padding-inline: 12px;
+    }
+
+    &[spec="article"] {
+      #main-layout-content-flow {
+        #main-layout-content-filler [role="doc-endnotes"]ol {
+          margin-inline: 0px;
+          padding-inline: 0px;
+        }
+
+        .main-layout-quicklinks {
+          &[spec="previous"],
+          &[spec="next"] {
+            grid-column: span $columns;
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/.vitepress/theme/styles/animation.scss b/.vitepress/theme/styles/animation.scss
new file mode 100644
index 0000000..d8409cf
--- /dev/null
+++ b/.vitepress/theme/styles/animation.scss
@@ -0,0 +1,42 @@
+// 动画
+
+@keyframes fadeOut {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes popOut {
+  0% {
+    transform: scale(0);
+  }
+
+  40% {
+    transform: scale(1.1);
+  }
+
+  100% {
+    transform: scale(1);
+  }
+}
+
+@keyframes search-results-container-show {
+  0% {
+    visibility: hidden;
+  }
+
+  1% {
+    visibility: visible;
+    opacity: 0;
+  }
+
+  100% {
+    height: calc(100% - 68px);
+
+    opacity: 1;
+  }
+}
diff --git a/.vitepress/theme/styles/fonts.scss b/.vitepress/theme/styles/fonts.scss
new file mode 100644
index 0000000..737a60a
--- /dev/null
+++ b/.vitepress/theme/styles/fonts.scss
@@ -0,0 +1,5 @@
+@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@200..800&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@200..800&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Source+Code+Pro&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200");
+@import url("https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&display=swap");
diff --git a/.vitepress/theme/styles/main.scss b/.vitepress/theme/styles/main.scss
new file mode 100644
index 0000000..bbe62ab
--- /dev/null
+++ b/.vitepress/theme/styles/main.scss
@@ -0,0 +1,210 @@
+@use "sass:meta";
+@use "mixin";
+
+* {
+  box-sizing: border-box;
+}
+
+@include meta.load-css("fonts");
+@include meta.load-css("tokens");
+@include meta.load-css("animation");
+@include meta.load-css("overlay");
+
+@include meta.load-css("_components/appbar");
+@include meta.load-css("_components/card");
+@include meta.load-css("_components/code");
+@include meta.load-css("_components/dialog");
+@include meta.load-css("_components/footer");
+@include meta.load-css("_components/header");
+@include meta.load-css("_components/layout");
+@include meta.load-css("_components/loading-splash");
+@include meta.load-css("_components/navigation");
+@include meta.load-css("_components/notfound");
+@include meta.load-css("_components/snackbar");
+@include meta.load-css("_components/table");
+
+:root {
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  -webkit-tap-highlight-color: transparent;
+  font-size: 1px;
+  font-synthesis: none;
+  scrollbar-color: var(--md-sys-color-secondary) transparent;
+  text-rendering: optimizeLegibility;
+  hyphens: auto;
+}
+
+html,
+body {
+  height: 100%;
+  width: 100%;
+
+  margin: 0px;
+  padding: 0px;
+
+  overflow: hidden;
+
+  ::selection {
+    color: var(--md-sys-color-surface-variant);
+
+    background-color: var(--md-sys-color-on-surface-variant);
+  }
+}
+
+#app {
+  position: relative;
+
+  height: 100%;
+
+  color: var(--md-sys-color-on-surface);
+
+  background-color: var(--md-sys-color-surface-container-lowest);
+
+  backdrop-filter: contrast(1);
+  opacity: 1;
+  touch-action: none;
+  transition: var(--md-sys-motion-duration-extra-long1) var(--md-sys-motion-easing-standard);
+  z-index: 1;
+
+  :disabled,
+  [disabled] {
+    box-shadow: none;
+    filter: grayscale(1);
+    opacity: 0.38;
+    pointer-events: none;
+  }
+}
+
+h1 {
+  @include mixin.typescale-style("headline-large");
+
+  margin: 0px;
+}
+
+h2 {
+  @include mixin.typescale-style("headline-medium");
+
+  margin: 0px;
+}
+
+h3 {
+  @include mixin.typescale-style("headline-small");
+
+  margin: 0px;
+}
+
+h4 {
+  @include mixin.typescale-style("title-large");
+
+  margin: 0px;
+}
+
+h5 {
+  @include mixin.typescale-style("title-medium");
+
+  margin: 0px;
+}
+
+h6 {
+  @include mixin.typescale-style("title-small");
+
+  margin: 0px;
+}
+
+p {
+  @include mixin.typescale-style("body-large");
+
+  margin: 0px;
+}
+
+a {
+  display: inline-block;
+
+  height: max-content;
+  width: max-content;
+
+  color: var(--md-sys-color-primary);
+  letter-spacing: 0px;
+  text-underline-offset: 5px;
+
+  code {
+    color: var(--md-sys-color-inverse-primary) !important;
+    font-weight: bold;
+    text-decoration: underline;
+  }
+}
+
+abbr {
+  cursor: help;
+}
+
+del,
+s {
+  opacity: 0.5;
+}
+
+hr {
+  border: 1px solid var(--md-sys-color-outline-variant);
+
+  opacity: 0.3;
+
+  &[spec="wave"] {
+    height: 15px;
+
+    margin: 0px;
+
+    border-radius: var(--md-sys-shape-corner-small);
+    border: none;
+
+    background: var(--md-sys-color-outline-variant);
+
+    -webkit-mask: var(--via-svg-wave) repeat;
+    mask: var(--via-svg-wave) repeat;
+  }
+}
+
+.task-list {
+  padding-inline-start: 1em;
+
+  list-style-type: none;
+
+  .task-list-item {
+    margin: 5px 0px;
+
+    vertical-align: middle;
+
+    input {
+      line-height: 0px;
+
+      &.task-list-item-checkbox {
+        @include mixin.material-symbols($size: 24);
+
+        display: inline-block;
+
+        margin-inline-end: 2px;
+
+        letter-spacing: 0px;
+        vertical-align: inherit;
+
+        appearance: none;
+
+        &::after {
+          content: "check_box_outline_blank";
+
+          display: inline-block;
+
+          height: 26.4px;
+
+          color: var(--md-sys-color-on-surface-variant);
+        }
+
+        &:checked::after {
+          content: "check_box";
+
+          color: var(--md-sys-color-primary);
+          font-variation-settings: "FILL" 1;
+        }
+      }
+    }
+  }
+}
diff --git a/.vitepress/theme/styles/mixin.scss b/.vitepress/theme/styles/mixin.scss
new file mode 100644
index 0000000..9d8e0d6
--- /dev/null
+++ b/.vitepress/theme/styles/mixin.scss
@@ -0,0 +1,61 @@
+@mixin typescale-style(
+  $type-scale,
+  $font-family: var(--md-sys-typescale-#{$type-scale}-family),
+  $font-size: var(--md-sys-typescale-#{$type-scale}-size),
+  $font-weight: var(--md-sys-typescale-#{$type-scale}-weight),
+  $line-height: var(--md-sys-typescale-#{$type-scale}-line-height),
+  $letter-spacing: var(--md-sys-typescale-#{$type-scale}-letter-spacing),
+  $font-variation-settings: var(--md-sys-typescale-#{$type-scale}-font-variation-settings)
+) {
+  font-family: $font-family;
+  font-size: $font-size;
+  font-weight: $font-weight;
+  line-height: $line-height;
+  letter-spacing: $letter-spacing;
+  font-variation-settings: $font-variation-settings;
+}
+
+@mixin typescale(
+  $name,
+  $family,
+  $weight,
+  $size,
+  $tracking,
+  $line-height,
+  $vf-weight,
+  $vf-GRAD,
+  $vf-wdth,
+  $vf-ROND,
+  $vf-opsz,
+  $vf-CRSV,
+  $vf-slnt,
+  $vf-FILL,
+  $vf-HEXP
+) {
+  --md-sys-typescale-#{$name}-family: #{$family};
+  --md-sys-typescale-#{$name}-weight: #{$weight};
+  --md-sys-typescale-#{$name}-size: #{$size}rem;
+  --md-sys-typescale-#{$name}-letter-spacing: #{$tracking}rem;
+  --md-sys-typescale-#{$name}-line-height: #{$line-height}rem;
+  --md-sys-typescale-#{$name}-font-variation-settings: "wght" #{$vf-weight}, "GRAD" #{$vf-GRAD}, "wdth" #{$vf-wdth}, "ROND" #{$vf-ROND}, "opsz" #{$vf-opsz},
+    "CRSV" #{$vf-CRSV}, "slnt" #{$vf-slnt}, "FILL" #{$vf-FILL}, "HEXP" #{$vf-HEXP};
+}
+
+@mixin material-symbols($name: "", $size: 24, $font-size: $size, $line-height: $size) {
+  content: $name;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  direction: ltr;
+  display: inline-block;
+  font-family: "Material Symbols Outlined";
+  font-feature-settings: "liga";
+  font-size: #{$size}rem;
+  font-style: normal;
+  font-weight: normal;
+  letter-spacing: normal;
+  line-height: #{$line-height}rem;
+  text-rendering: optimizeLegibility;
+  text-transform: none;
+  white-space: nowrap;
+  word-wrap: normal;
+}
diff --git a/.vitepress/theme/styles/overlay.scss b/.vitepress/theme/styles/overlay.scss
new file mode 100644
index 0000000..e21eced
--- /dev/null
+++ b/.vitepress/theme/styles/overlay.scss
@@ -0,0 +1,83 @@
+// 操作覆盖层
+
+[o-increasescroll="true"] {
+  .appbar {
+    top: -64px;
+
+    transition: var(--md-sys-motion-duration-medium2);
+  }
+}
+
+[o-onload] {
+  .appbar {
+    opacity: 1;
+  }
+
+  .navigation {
+    #navigation-fab {
+      opacity: 1;
+    }
+
+    #navigation-destinations {
+      opacity: 1;
+    }
+  }
+
+  .loading-splash {
+    opacity: 0;
+  }
+
+  .main-layout #main-layout-content-flow {
+    opacity: 1;
+    transform: translateY(0px) scale(1);
+  }
+}
+
+[o-showsearch] {
+  #default-header-webinfo {
+    display: none;
+  }
+  .main-layout {
+    #main-layout-content-flow {
+      filter: brightness(0.5);
+    }
+  }
+
+  #main-layout-scrolltop {
+    opacity: 0 !important;
+    visibility: hidden !important;
+  }
+
+  @media screen and (max-width: 768px) {
+    .navigation[spec="bar"],
+    .appbar {
+      filter: brightness(0.5);
+    }
+  }
+}
+
+[o-showdrawer="true"] {
+  .main-layout {
+    .navigation {
+      #navigation-drawer {
+        opacity: 1;
+        transform: translateX(0);
+        transition: background-color var(--md-sys-motion-duration-extra-long1) var(--md-sys-motion-easing-standard),
+          padding-block var(--md-sys-motion-duration-medium2) var(--md-sys-motion-duration-short1), visibility var(--md-sys-motion-duration-short1),
+          opacity var(--md-sys-motion-duration-medium4) var(--md-sys-motion-easing-emphasized),
+          transform var(--md-sys-motion-duration-medium1) var(--md-sys-motion-easing-emphasized);
+        visibility: visible;
+
+        #navigation-drawer-container {
+          details a {
+            opacity: 1;
+          }
+        }
+      }
+
+      &[spec="rail"] {
+        background-color: var(--md-sys-color-surface-container);
+      }
+    }
+  }
+}
diff --git a/.vitepress/theme/styles/tokens.scss b/.vitepress/theme/styles/tokens.scss
new file mode 100644
index 0000000..c55b443
--- /dev/null
+++ b/.vitepress/theme/styles/tokens.scss
@@ -0,0 +1,320 @@
+@use "mixin";
+
+:root {
+  // Default colors
+  --md-ref-palette-primary10: #410006;
+  --md-ref-palette-primary20: #68000f;
+  --md-ref-palette-primary30: #8c1520;
+  --md-ref-palette-primary40: #ae2f34;
+  --md-ref-palette-primary80: #ffb3b0;
+  --md-ref-palette-primary90: #ffdad8;
+  --md-ref-palette-primary100: #ffffff;
+  --md-ref-palette-secondary10: #2c1514;
+  --md-ref-palette-secondary20: #442928;
+  --md-ref-palette-secondary30: #5d3f3e;
+  --md-ref-palette-secondary40: #775655;
+  --md-ref-palette-secondary80: #e7bdba;
+  --md-ref-palette-secondary90: #ffdad8;
+  --md-ref-palette-secondary100: #ffffff;
+  --md-ref-palette-tertiary10: #271900;
+  --md-ref-palette-tertiary20: #412d05;
+  --md-ref-palette-tertiary30: #5a4319;
+  --md-ref-palette-tertiary40: #735a2e;
+  --md-ref-palette-tertiary80: #e3c28c;
+  --md-ref-palette-tertiary90: #ffdeaa;
+  --md-ref-palette-tertiary100: #ffffff;
+  --md-ref-palette-neutral0: #000000;
+  --md-ref-palette-neutral4: #120d0d;
+  --md-ref-palette-neutral6: #181212;
+  --md-ref-palette-neutral10: #201a1a;
+  --md-ref-palette-neutral12: #251e1e;
+  --md-ref-palette-neutral17: #2f2828;
+  --md-ref-palette-neutral20: #362f2e;
+  --md-ref-palette-neutral22: #3a3333;
+  --md-ref-palette-neutral24: #3f3737;
+  --md-ref-palette-neutral87: #e4d7d6;
+  --md-ref-palette-neutral90: #ede0de;
+  --md-ref-palette-neutral92: #f2e5e4;
+  --md-ref-palette-neutral94: #f8ebea;
+  --md-ref-palette-neutral95: #fbeeed;
+  --md-ref-palette-neutral96: #fef1ef;
+  --md-ref-palette-neutral98: #fff8f7;
+  --md-ref-palette-neutral100: #ffffff;
+  --md-ref-palette-neutral-variant30: #534342;
+  --md-ref-palette-neutral-variant50: #857372;
+  --md-ref-palette-neutral-variant60: #a08c8b;
+  --md-ref-palette-neutral-variant80: #d7c1c0;
+  --md-ref-palette-neutral-variant90: #f4dddc;
+  --md-ref-palette-error10: #410002;
+  --md-ref-palette-error20: #690005;
+  --md-ref-palette-error30: #93000a;
+  --md-ref-palette-error40: #ba1a1a;
+  --md-ref-palette-error80: #ffb4ab;
+  --md-ref-palette-error90: #ffdad6;
+  --md-ref-palette-error100: #ffffff;
+
+  // Motion(https://m3.material.io/styles/motion/overview/specs)
+  --md-sys-motion-duration-short1: 50ms;
+  --md-sys-motion-duration-short2: 100ms;
+  --md-sys-motion-duration-short3: 150ms;
+  --md-sys-motion-duration-short4: 200ms;
+  --md-sys-motion-duration-medium1: 250ms;
+  --md-sys-motion-duration-medium2: 300ms;
+  --md-sys-motion-duration-medium3: 350ms;
+  --md-sys-motion-duration-medium4: 400ms;
+  --md-sys-motion-duration-long1: 450ms;
+  --md-sys-motion-duration-long2: 500ms;
+  --md-sys-motion-duration-long3: 550ms;
+  --md-sys-motion-duration-long4: 600ms;
+  --md-sys-motion-duration-extra-long1: 700ms;
+  --md-sys-motion-duration-extra-long2: 800ms;
+  --md-sys-motion-duration-extra-long3: 900ms;
+  --md-sys-motion-duration-extra-long4: 1000ms;
+  --md-sys-motion-easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
+  --md-sys-motion-easing-emphasized-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15);
+  --md-sys-motion-easing-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1);
+  --md-sys-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
+  --md-sys-motion-easing-standard-accelerate: cubic-bezier(0.3, 0, 1, 1);
+  --md-sys-motion-easing-standard-decelerate: cubic-bezier(0, 0, 0, 1);
+  --md-sys-motion-easing-legacy: cubic-bezier(0.4, 0, 0.2, 1);
+  --md-sys-motion-easing-legacy-accelerate: cubic-bezier(0.4, 0, 1, 1);
+  --md-sys-motion-easing-legacy-decelerate: cubic-bezier(0, 0, 0.2, 1);
+  --md-sys-motion-easing-liner: cubic-bezier(0, 0, 1, 1);
+  --md-sys-motion-path: var(--md-sys-motion-easing-liner);
+  --md-sys-motion-spring-fast-spatial: cubic-bezier(0.42, 1.67, 0.21, 0.9);
+  --md-sys-motion-spring-fast-spatial-duration: 350ms;
+  --md-sys-motion-spring-fast-effect: cubic-bezier(0.31, 0.94, 0.34, 1);
+  --md-sys-motion-spring-fast-effect-duration: 150ms;
+  --md-sys-motion-spring-fast-spatial-standard: cubic-bezier(0.27, 1.06, 0.18, 1);
+  --md-sys-motion-spring-fast-spatial-standard-duration: 350ms;
+  --md-sys-motion-spring-fast-effect-standard: cubic-bezier(0.31, 0.94, 0.34, 1);
+  --md-sys-motion-spring-fast-effect-standard-duration: 150ms;
+  --md-sys-motion-spring-default-spatial: cubic-bezier(0.38, 1.21, 0.22, 1);
+  --md-sys-motion-spring-default-spatial-duration: 500ms;
+  --md-sys-motion-spring-default-effect: cubic-bezier(0.34, 0.8, 0.34, 1);
+  --md-sys-motion-spring-default-effect-duration: 200ms;
+  --md-sys-motion-spring-default-spatial-standard: cubic-bezier(0.27, 1.06, 0.18, 1);
+  --md-sys-motion-spring-default-spatial-standard-duration: 500ms;
+  --md-sys-motion-spring-default-effect-standard: cubic-bezier(0.34, 0.8, 0.34, 1);
+  --md-sys-motion-spring-default-effect-standard-duration: 200ms;
+  --md-sys-motion-spring-slow-spatial: cubic-bezier(0.39, 1.29, 0.35, 0.98);
+  --md-sys-motion-spring-slow-spatial-duration: 650ms;
+  --md-sys-motion-spring-slow-effect: cubic-bezier(0.34, 0.88, 0.34, 1);
+  --md-sys-motion-spring-slow-effect-duration: 300ms;
+  --md-sys-motion-spring-slow-spatial-standard: cubic-bezier(0.27, 1.06, 0.18, 1);
+  --md-sys-motion-spring-slow-spatial-standard-duration: 750ms;
+  --md-sys-motion-spring-slow-effect-standard: cubic-bezier(0.34, 0.88, 0.34, 1);
+  --md-sys-motion-spring-slow-effect-standard-duration: 300ms;
+
+  // Shape(https://m3.material.io/styles/shape/corner-radius-scale)
+  --md-sys-shape-corner-none: 0px;
+  --md-sys-shape-corner-extra-small: 4px;
+  --md-sys-shape-corner-extra-small-top: 4px 4px 0px 0px;
+  --md-sys-shape-corner-small: 8px;
+  --md-sys-shape-corner-medium: 12px;
+  --md-sys-shape-corner-large: 16px;
+  --md-sys-shape-corner-large-increased: 20px;
+  --md-sys-shape-corner-large-top: 16px 16px 0px 0px;
+  --md-sys-shape-corner-large-start: 16px 0px 0px 16px;
+  --md-sys-shape-corner-large-end: 0px 16px 16px 0px;
+  --md-sys-shape-corner-extra-large: 28px;
+  --md-sys-shape-corner-extra-large-top: 28px 28px 0px 0px;
+  --md-sys-shape-corner-extra-large-increased: 32px;
+  --md-sys-shape-corner-extra-extra-large: 40px;
+  --md-sys-shape-corner-full: 100%;
+
+  // MD Ripple(material-web)
+  --md-ripple-hover-color: var(--md-sys-color-primary);
+  --md-ripple-pressed-color: var(--md-sys-color-primary);
+
+  // Typography
+  $level1-font-family: "Plus Jakarta Sans", "Noto Sans SC", sans-serif;
+  $level2-font-family: "Plus Jakarta Sans", "Noto Sans SC", sans-serif;
+  @include mixin.typescale("display-large", $level1-font-family, 400, 57, -0.25, 64, 400, 0, 100, 0, 57, 0, 0, 0, 0);
+  @include mixin.typescale("display-medium", $level1-font-family, 400, 45, 0, 52, 400, 0, 100, 0, 45, 0, 0, 0, 0);
+  @include mixin.typescale("display-small", $level1-font-family, 400, 36, 0, 44, 400, 0, 100, 0, 36, 0, 0, 0, 0);
+  @include mixin.typescale("headline-large", $level1-font-family, 400, 32, 0, 40, 400, 0, 100, 0, 32, 0, 0, 0, 0);
+  @include mixin.typescale("headline-medium", $level1-font-family, 400, 28, 0, 36, 400, 0, 100, 0, 28, 0, 0, 0, 0);
+  @include mixin.typescale("headline-small", $level1-font-family, 400, 24, 0, 32, 400, 0, 100, 0, 24, 0, 0, 0, 0);
+  @include mixin.typescale("title-large", $level1-font-family, 400, 22, 0, 28, 400, 0, 100, 0, 22, 0, 0, 0, 0);
+  @include mixin.typescale("title-medium", $level2-font-family, 500, 16, 0.15, 24, 500, 0, 100, 0, 16, 0, 0, 0, 0);
+  @include mixin.typescale("title-small", $level2-font-family, 500, 14, 0.1, 20, 500, 0, 100, 0, 14, 0, 0, 0, 0);
+  @include mixin.typescale("body-large", $level2-font-family, 400, 16, 0.5, 24, 400, 0, 100, 0, 16, 0, 0, 0, 0);
+  @include mixin.typescale("body-medium", $level2-font-family, 400, 14, 0.25, 20, 400, 0, 100, 0, 14, 0, 0, 0, 0);
+  @include mixin.typescale("body-small", $level2-font-family, 400, 12, 0.4, 16, 400, 0, 100, 0, 12, 0, 0, 0, 0);
+  @include mixin.typescale("label-large", $level2-font-family, 500, 14, 0.1, 20, 500, 0, 100, 0, 14, 0, 0, 0, 0);
+  @include mixin.typescale("label-medium", $level2-font-family, 500, 12, 0.5, 16, 500, 0, 100, 0, 12, 0, 0, 0, 0);
+  @include mixin.typescale("label-small", $level2-font-family, 500, 11, 0.5, 16, 500, 0, 100, 0, 11, 0, 0, 0, 0);
+
+  // Svg
+  --via-svg-mask: url("data:image/svg+xml;charset=utf-8;base64,PHN2ZyB3aWR0aD0iNTEyIiBoZWlnaHQ9IjUxMiIgdmlld0JveD0iMCAwIDUxMiA1MTIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTQyNy44NjQgNDI3Ljg2NGMtMTMuNTc4IDEzLjU3Ny0yNy42MTggOS40NTQtNDMuNTgzIDIwLjEyMi0xNS45NjYgMTAuNjY4LTE3LjUzIDI1LjIxNy0zNS4yNjkgMzIuNTY1LTE3Ljc0IDcuMzQ4LTI5LjEzMy0xLjgzNC00Ny45NjYgMS45MTItMTguODMyIDMuNzQ2LTI1Ljg0NCAxNi41OS00NS4wNDYgMTYuNTktMTkuMjAyIDAtMjYuMjE0LTEyLjg0NC00NS4wNDYtMTYuNTktMTguODMzLTMuNzQ2LTMwLjIyNiA1LjQzNi00Ny45NjYtMS45MTItMTcuNzQtNy4zNDgtMTkuMzAzLTIxLjg5Ny0zNS4yNjktMzIuNTY1LTE1Ljk2NS0xMC42NjgtMzAuMDA1LTYuNTQ1LTQzLjU4My0yMC4xMjItMTMuNTc3LTEzLjU3OC05LjQ1NC0yNy42MTgtMjAuMTIyLTQzLjU4My0xMC42NjgtMTUuOTY2LTI1LjIxNy0xNy41My0zMi41NjUtMzUuMjY5LTcuMzQ4LTE3Ljc0IDEuODM0LTI5LjEzMy0xLjkxMi00Ny45NjYtMy43NDYtMTguODMyLTE2LjU5LTI1Ljg0NC0xNi41OS00NS4wNDYgMC0xOS4yMDIgMTIuODQ0LTI2LjIxNCAxNi41OS00NS4wNDYgMy43NDYtMTguODMzLTUuNDM2LTMwLjIyNiAxLjkxMi00Ny45NjYgNy4zNDgtMTcuNzQgMjEuODk3LTE5LjMwMyAzMi41NjUtMzUuMjY5IDEwLjY2OC0xNS45NjUgNi41NDUtMzAuMDA1IDIwLjEyMi00My41ODMgMTMuNTc4LTEzLjU3NyAyNy42MTgtOS40NTQgNDMuNTgzLTIwLjEyMiAxNS45NjYtMTAuNjY4IDE3LjUzLTI1LjIxNyAzNS4yNjktMzIuNTY1IDE3Ljc0LTcuMzQ4IDI5LjEzMyAxLjgzNCA0Ny45NjYtMS45MTIgMTguODMyLTMuNzQ2IDI1Ljg0NC0xNi41OSA0NS4wNDYtMTYuNTkgMTkuMjAyIDAgMjYuMjE0IDEyLjg0NCA0NS4wNDYgMTYuNTkgMTguODMzIDMuNzQ2IDMwLjIyNi01LjQzNiA0Ny45NjYgMS45MTIgMTcuNzQgNy4zNDggMTkuMzAzIDIxLjg5NyAzNS4yNjkgMzIuNTY1IDE1Ljk2NSAxMC42NjggMzAuMDA1IDYuNTQ1IDQzLjU4MyAyMC4xMjIgMTMuNTc3IDEzLjU3OCA5LjQ1NCAyNy42MTggMjAuMTIyIDQzLjU4MyAxMC42NjggMTUuOTY2IDI1LjIxNyAxNy41MyAzMi41NjUgMzUuMjY5IDcuMzQ4IDE3Ljc0LTEuODM0IDI5LjEzMyAxLjkxMiA0Ny45NjYgMy43NDYgMTguODMyIDE2LjU5IDI1Ljg0NCAxNi41OSA0NS4wNDYgMCAxOS4yMDItMTIuODQ0IDI2LjIxNC0xNi41OSA0NS4wNDYtMy43NDYgMTguODMzIDUuNDM2IDMwLjIyNi0xLjkxMiA0Ny45NjYtNy4zNDggMTcuNzQtMjEuODk3IDE5LjMwMy0zMi41NjUgMzUuMjY5LTEwLjY2OCAxNS45NjUtNi41NDUgMzAuMDA1LTIwLjEyMiA0My41ODN6IiBmaWxsPSIjZmZmIi8+PC9zdmc+");
+  --via-svg-wave: url("data:image/svg+xml;charset=utf-8;base64,PHN2ZyB2aWV3Qm94PSIwIC01IDMwIDIwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik0wIDFjNy41IDAgNy41IDggMTUgOHM3LjUtOCAxNS04IiBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgc3Ryb2tlLXdpZHRoPSI0Ii8+PC9zdmc+");
+  --via-svg-qrcode-rickroll: url("data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzNyAzNyI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0iI0ZGRiIvPjxwYXRoIGQ9Ik00IDRoMXYxSDR6bTEgMGgxdjFINXptMSAwaDF2MUg2em0xIDBoMXYxSDd6bTEgMGgxdjFIOHptMSAwaDF2MUg5em0xIDBoMXYxaC0xem00IDBoMXYxaC0xem01IDBoMXYxaC0xem0xIDBoMXYxaC0xem0xIDBoMXYxaC0xem0xIDBoMXYxaC0xem0xIDBoMXYxaC0xem0zIDBoMXYxaC0xem0xIDBoMXYxaC0xem0xIDBoMXYxaC0xem0xIDBoMXYxaC0xem0xIDBoMXYxaC0xem0xIDBoMXYxaC0xem0xIDBoMXYxaC0xek00IDVoMXYxSDR6bTYgMGgxdjFoLTF6bTMgMGgxdjFoLTF6bTQgMGgxdjFoLTF6bTEgMGgxdjFoLTF6bTEgMGgxdjFoLTF6bTMgMGgxdjFoLTF6bTEgMGgxdjFoLTF6bTEgMGgxdjFoLTF6bTIgMGgxdjFoLTF6bTYgMGgxdjFoLTF6TTQgNmgxdjFINHptMiAwaDF2MUg2em0xIDBoMXYxSDd6bTEgMGgxdjFIOHptMiAwaDF2MWgtMXptMiAwaDF2MWgtMXptMyAwaDF2MWgtMXptMyAwaDF2MWgtMXptMSAwaDF2MWgtMXptMSAwaDF2MWgtMXptMyAwaDF2MWgtMXptMSAwaDF2MWgtMXptMiAwaDF2MWgtMXptMiAwaDF2MWgtMXptMSAwaDF2MWgtMXptMSAwaDF2MWgtMXptMiAwaDF2MWgtMXpNNCA3aDF2MUg0em0yIDBoMXYxSDZ6bTEgMGgxdjFIN3ptMSAwaDF2MUg4em0yIDBoMXYxaC0xem0zIDBoMXYxaC0xem0zIDBoMXYxaC0xem02IDBoMXYxaC0xem0xIDBoMXYxaC0xem0zIDBoMXYxaC0xem0yIDBoMXYxaC0xem0xIDBoMXYxaC0xem0xIDBoMXYxaC0xem0yIDBoMXYxaC0xek00IDhoMXYxSDR6bTIgMGgxdjFINnptMSAwaDF2MUg3em0xIDBoMXYxSDh6bTIgMGgxdjFoLTF6bTMgMGgxdjFoLTF6bTMgMGgxdjFoLTF6bTUgMGgxdjFoLTF6bTEgMGgxdjFoLTF6bTEgMGgxdjFoLTF6bTMgMGgxdjFoLTF6bTIgMGgxdjFoLTF6bTEgMGgxdjFoLTF6bTEgMGgxdjFoLTF6bTIgMGgxdjFoLTF6TTQgOWgxdjFINHptNiAwaDF2MWgtMXptNCAwaDF2MWgtMXptMSAwaDF2MWgtMXptMSAwaDF2MWgtMXptMSAwaDF2MWgtMXptMiAwaDF2MWgtMXptMSAwaDF2MWgtMXptMSAwaDF2MWgtMXptMSAwaDF2MWgtMXptMSAwaDF2MWgtMXptMyAwaDF2MWgtMXptNiAwaDF2MWgtMXpNNCAxMGgxdjFINHptMSAwaDF2MUg1em0xIDBoMXYxSDZ6bTEgMGgxdjFIN3ptMSAwaDF2MUg4em0xIDBoMXYxSDl6bTEgMGgxdjFoLTF6bTIgMGgxdjFoLTF6bTIgMGgxdjFoLTF6bTIgMGgxdjFoLTF6bTIgMGgxdjFoLTF6bTIgMGgxdjFoLTF6bTIgMGgxdjFoLTF6bTIgMGgxdjFoLTF6bTIgMGgxdjFoLTF6bTEgMGgxdjFoLTF6bTEgMGgxdjFoLTF6bTEgMGgxdjFoLTF6bTEgMGgxdjFoLTF6bTEgMGgxdjFoLTF6bTEgMGgxdjFoLTF6bS0yMCAxaDF2MWgtMXptMyAwaDF2MWgtMXptMiAwaDF2MWgtMXptMSAwaDF2MWgtMXptMiAwaDF2MWgtMXptMSAwaDF2MWgtMXptMSAwaDF2MWgtMXptMiAwaDF2MWgtMXpNNCAxMmgxdjFINHptMSAwaDF2MUg1em0xIDBoMXYxSDZ6bTIgMGgxdjFIOHptMSAwaDF2MUg5em0xIDBoMXYxaC0xem0xIDBoMXYxaC0xem0xIDBoMXYxaC0xem00IDBoMXYxaC0xem0xIDBoMXYxaC0xem0xIDBoMXYxaC0xem0yIDBoMXYxaC0xem0xIDBoMXYxaC0xem0xIDBoMXYxaC0xem0xIDBoMXYxaC0xem0xIDBoMXYxaC0xem0xIDBoMXYxaC0xem0xIDBoMXYxaC0xem00IDBoMXYxaC0xek03IDEzaDF2MUg3em0yIDBoMXYxSDl6bTIgMGgxdjFoLTF6bTIgMGgxdjFoLTF6bTIgMGgxdjFoLTF6bTEgMGgxdjFoLTF6bTEgMGgxdjFoLTF6bTEgMGgxdjFoLTF6bTEgMGgxdjFoLTF6bTEgMGgxdjFoLTF6bTUgMGgxdjFoLTF6bTEgMGgxdjFoLTF6bTMgMGgxdjFoLTF6bTMgMGgxdjFoLTF6TTQgMTRoMXYxSDR6bTEgMGgxdjFINXptNCAwaDF2MUg5em0xIDBoMXYxaC0xem00IDBoMXYxaC0xem0xIDBoMXYxaC0xem0xIDBoMXYxaC0xem0yIDBoMXYxaC0xem0zIDBoMXYxaC0xem01IDBoMXYxaC0xem00IDBoMXYxaC0xem0xIDBoMXYxaC0xem0xIDBoMXYxaC0xek00IDE1aDF2MUg0em0yIDBoMXYxSDZ6bTUgMGgxdjFoLTF6bTEgMGgxdjFoLTF6bTEgMGgxdjFoLTF6bTEgMGgxdjFoLTF6bTIgMGgxdjFoLTF6bTEgMGgxdjFoLTF6bTEgMGgxdjFoLTF6bTEgMGgxdjFoLTF6bTIgMGgxdjFoLTF6bTEgMGgxdjFoLTF6bTEgMGgxdjFoLTF6bTIgMGgxdjFoLTF6bTEgMGgxdjFoLTF6bTIgMGgxdjFoLTF6bTMgMGgxdjFoLTF6TTUgMTZoMXYxSDV6bTIgMGgxdjFIN3ptMyAwaDF2MWgtMXptNCAwaDF2MWgtMXptMSAwaDF2MWgtMXptMiAwaDF2MWgtMXptNCAwaDF2MWgtMXptMiAwaDF2MWgtMXptMSAwaDF2MWgtMXptMSAwaDF2MWgtMXptMSAwaDF2MWgtMXptMyAwaDF2MWgtMXptMiAwaDF2MWgtMXptMSAwaDF2MWgtMXpNNyAxN2gxdjFIN3ptNSAwaDF2MWgtMXptMSAwaDF2MWgtMXptMSAwaDF2MWgtMXptMSAwaDF2MWgtMXptMyAwaDF2MWgtMXptMyAwaDF2MWgtMXptMSAwaDF2MWgtMXptMiAwaDF2MWgtMXptMSAwaDF2MWgtMXptMSAwaDF2MWgtMXptMSAwaDF2MWgtMXptMiAwaDF2MWgtMXptMyAwaDF2MWgtMXpNNSAxOGgxdjFINXptMSAwaDF2MUg2em0xIDBoMXYxSDd6bTEgMGgxdjFIOHptMiAwaDF2MWgtMXptMSAwaDF2MWgtMXptMSAwaDF2MWgtMXptMSAwaDF2MWgtMXptMSAwaDF2MWgtMXptNCAwaDF2MWgtMXptMiAwaDF2MWgtMXptMSAwaDF2MWgtMXptMyAwaDF2MWgtMXptMyAwaDF2MWgtMXptMiAwaDF2MWgtMXptMiAwaDF2MWgtMXptMSAwaDF2MWgtMXpNNiAxOWgxdjFINnptMSAwaDF2MUg3em0yIDBoMXYxSDl6bTIgMGgxdjFoLTF6bTEgMGgxdjFoLTF6bTIgMGgxdjFoLTF6bTEgMGgxdjFoLTF6bTIgMGgxdjFoLTF6bTMgMGgxdjFoLTF6bTEgMGgxdjFoLTF6bTIgMGgxdjFoLTF6bTEgMGgxdjFoLTF6bTUgMGgxdjFoLTF6bTIgMGgxdjFoLTF6TTQgMjBoMXYxSDR6bTEgMGgxdjFINXptMSAwaDF2MUg2em0zIDBoMXYxSDl6bTEgMGgxdjFoLTF6bTEgMGgxdjFoLTF6bTEgMGgxdjFoLTF6bTEgMGgxdjFoLTF6bTEgMGgxdjFoLTF6bTIgMGgxdjFoLTF6bTEgMGgxdjFoLTF6bTEgMGgxdjFoLTF6bTMgMGgxdjFoLTF6bTIgMGgxdjFoLTF6bTEgMGgxdjFoLTF6bTEgMGgxdjFoLTF6bTEgMGgxdjFoLTF6bTEgMGgxdjFoLTF6bTIgMGgxdjFoLTF6bTIgMGgxdjFoLTF6bTEgMGgxdjFoLTF6TTcgMjFoMXYxSDd6bTEgMGgxdjFIOHptMSAwaDF2MUg5em00IDBoMXYxaC0xem0yIDBoMXYxaC0xem0xIDBoMXYxaC0xem0xIDBoMXYxaC0xem0xIDBoMXYxaC0xem0xIDBoMXYxaC0xem0xIDBoMXYxaC0xem00IDBoMXYxaC0xem0xIDBoMXYxaC0xem0xIDBoMXYxaC0xem0zIDBoMXYxaC0xem0xIDBoMXYxaC0xem0yIDBoMXYxaC0xek00IDIyaDF2MUg0em0zIDBoMXYxSDd6bTIgMGgxdjFIOXptMSAwaDF2MWgtMXptMSAwaDF2MWgtMXptMiAwaDF2MWgtMXptMiAwaDF2MWgtMXptMSAwaDF2MWgtMXptMSAwaDF2MWgtMXptMyAwaDF2MWgtMXptMiAwaDF2MWgtMXptMyAwaDF2MWgtMXptMiAwaDF2MWgtMXptNCAwaDF2MWgtMXptMSAwaDF2MWgtMXpNNSAyM2gxdjFINXptMSAwaDF2MUg2em0xIDBoMXYxSDd6bTEgMGgxdjFIOHptMyAwaDF2MWgtMXptMyAwaDF2MWgtMXptMiAwaDF2MWgtMXptMSAwaDF2MWgtMXptMSAwaDF2MWgtMXptMyAwaDF2MWgtMXptMSAwaDF2MWgtMXptMSAwaDF2MWgtMXptMiAwaDF2MWgtMXptNCAwaDF2MWgtMXptMiAwaDF2MWgtMXpNNCAyNGgxdjFINHptMiAwaDF2MUg2em00IDBoMXYxaC0xem0zIDBoMXYxaC0xem0yIDBoMXYxaC0xem0yIDBoMXYxaC0xem0zIDBoMXYxaC0xem0xIDBoMXYxaC0xem0yIDBoMXYxaC0xem0xIDBoMXYxaC0xem0xIDBoMXYxaC0xem0xIDBoMXYxaC0xem0xIDBoMXYxaC0xem0xIDBoMXYxaC0xem0tMTYgMWgxdjFoLTF6bTEgMGgxdjFoLTF6bTIgMGgxdjFoLTF6bTQgMGgxdjFoLTF6bTEgMGgxdjFoLTF6bTEgMGgxdjFoLTF6bTIgMGgxdjFoLTF6bTEgMGgxdjFoLTF6bTQgMGgxdjFoLTF6bTIgMGgxdjFoLTF6bTEgMGgxdjFoLTF6bTEgMGgxdjFoLTF6TTQgMjZoMXYxSDR6bTEgMGgxdjFINXptMSAwaDF2MUg2em0xIDBoMXYxSDd6bTEgMGgxdjFIOHptMSAwaDF2MUg5em0xIDBoMXYxaC0xem0yIDBoMXYxaC0xem02IDBoMXYxaC0xem01IDBoMXYxaC0xem0xIDBoMXYxaC0xem0yIDBoMXYxaC0xem0yIDBoMXYxaC0xem0xIDBoMXYxaC0xem0yIDBoMXYxaC0xem0xIDBoMXYxaC0xek00IDI3aDF2MUg0em02IDBoMXYxaC0xem0yIDBoMXYxaC0xem0xIDBoMXYxaC0xem0yIDBoMXYxaC0xem0yIDBoMXYxaC0xem0zIDBoMXYxaC0xem0xIDBoMXYxaC0xem0zIDBoMXYxaC0xem00IDBoMXYxaC0xem0xIDBoMXYxaC0xem0zIDBoMXYxaC0xek00IDI4aDF2MUg0em0yIDBoMXYxSDZ6bTEgMGgxdjFIN3ptMSAwaDF2MUg4em0yIDBoMXYxaC0xem0yIDBoMXYxaC0xem00IDBoMXYxaC0xem0xIDBoMXYxaC0xem0xIDBoMXYxaC0xem0xIDBoMXYxaC0xem0xIDBoMXYxaC0xem0xIDBoMXYxaC0xem0zIDBoMXYxaC0xem0xIDBoMXYxaC0xem0xIDBoMXYxaC0xem0xIDBoMXYxaC0xem0xIDBoMXYxaC0xek00IDI5aDF2MUg0em0yIDBoMXYxSDZ6bTEgMGgxdjFIN3ptMSAwaDF2MUg4em0yIDBoMXYxaC0xem0zIDBoMXYxaC0xem0xIDBoMXYxaC0xem0xIDBoMXYxaC0xem0xIDBoMXYxaC0xem0xIDBoMXYxaC0xem0xIDBoMXYxaC0xem0zIDBoMXYxaC0xem0yIDBoMXYxaC0xem0xIDBoMXYxaC0xem00IDBoMXYxaC0xem0yIDBoMXYxaC0xem0xIDBoMXYxaC0xem0xIDBoMXYxaC0xek00IDMwaDF2MUg0em0yIDBoMXYxSDZ6bTEgMGgxdjFIN3ptMSAwaDF2MUg4em0yIDBoMXYxaC0xem0yIDBoMXYxaC0xem0xIDBoMXYxaC0xem0yIDBoMXYxaC0xem0xIDBoMXYxaC0xem0xIDBoMXYxaC0xem03IDBoMXYxaC0xem0zIDBoMXYxaC0xem0xIDBoMXYxaC0xem0xIDBoMXYxaC0xem0zIDBoMXYxaC0xek00IDMxaDF2MUg0em02IDBoMXYxaC0xem0yIDBoMXYxaC0xem00IDBoMXYxaC0xem0xIDBoMXYxaC0xem0xIDBoMXYxaC0xem0yIDBoMXYxaC0xem0xIDBoMXYxaC0xem0xIDBoMXYxaC0xem0xIDBoMXYxaC0xem0xIDBoMXYxaC0xem0xIDBoMXYxaC0xem0xIDBoMXYxaC0xem0yIDBoMXYxaC0xem0zIDBoMXYxaC0xek00IDMyaDF2MUg0em0xIDBoMXYxSDV6bTEgMGgxdjFINnptMSAwaDF2MUg3em0xIDBoMXYxSDh6bTEgMGgxdjFIOXptMSAwaDF2MWgtMXptMiAwaDF2MWgtMXptMyAwaDF2MWgtMXptMSAwaDF2MWgtMXptMiAwaDF2MWgtMXptMSAwaDF2MWgtMXptMSAwaDF2MWgtMXptMSAwaDF2MWgtMXptMiAwaDF2MWgtMXptMSAwaDF2MWgtMXptMSAwaDF2MWgtMXptMSAwaDF2MWgtMXptMSAwaDF2MWgtMXptMSAwaDF2MWgtMXptMSAwaDF2MWgtMXptMiAwaDF2MWgtMXptMSAwaDF2MWgtMXoiLz48L3N2Zz4=");
+  --via-svg-list-bullet: url("data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiI+PHBhdGggZD0ibTEzLjcxNiA3LjQ1Ni0zLjk4IDIuMTc3LTIuMTc2IDMuOTgtMi4xNzctMy45OC0zLjk4LTIuMTc3IDMuOTgtMi4xNzZMNy41NiAxLjNsMi4xNzYgMy45OFoiIHN0eWxlPSJmaWxsOiMwMDA7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOm5vbmU7c3Ryb2tlLXdpZHRoOjIuMDAwNzQ7c3Ryb2tlLWRhc2hhcnJheTpub25lIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxLjg2IDEuOTQ0KSBzY2FsZSguODEyMTgpIi8+PC9zdmc+");
+
+  // Material web
+  @mixin button-scaffold($name, $family, $weight, $size, $line-height, $shape) {
+    --md-#{$name}-button-container-shape: #{$shape};
+    --md-#{$name}-button-label-text-font: #{$family};
+    --md-#{$name}-button-label-text-font-weight: #{$weight};
+    --md-#{$name}-button-label-text-font-size: #{$size}rem;
+    --md-#{$name}-button-label-text-line-height: #{$line-height}rem;
+  }
+  // @include button-scaffold("elevated", $level1-font-family, 500, 14, 20, var(--md-sys-shape-corner-extra-large));
+  @include button-scaffold("filled", $level1-font-family, 500, 14, 20, var(--md-sys-shape-corner-extra-large));
+  @include button-scaffold("filled-tonal", $level1-font-family, 500, 14, 20, var(--md-sys-shape-corner-extra-large));
+  // @include button-scaffold("outlined", $level1-font-family, 500, 14, 20, var(--md-sys-shape-corner-extra-large));
+  @include button-scaffold("text", $level1-font-family, 500, 14, 20, var(--md-sys-shape-corner-extra-large));
+
+  @mixin chip-scaffold($name, $family, $weight, $size, $line-height) {
+    --md-#{$name}-chip-label-text-font: #{$family};
+    --md-#{$name}-chip-label-text-font-weight: #{$weight};
+    --md-#{$name}-chip-label-text-font-size: #{$size}rem;
+    --md-#{$name}-chip-label-text-line-height: #{$line-height}rem;
+  }
+  @include chip-scaffold("assist", $level2-font-family, 500, 14, 20);
+  // @include chip-scaffold("filter", $level2-font-family, 500, 14, 20);
+  // @include chip-scaffold("input", $level2-font-family, 500, 14, 20);
+  // @include chip-scaffold("suggestion", $level2-font-family, 500, 14, 20);
+
+  // Colors scheme
+  @media (prefers-color-scheme: light) {
+    --md-sys-color-primary: var(--md-ref-palette-primary40);
+    --md-sys-color-primary-container: var(--md-ref-palette-primary90);
+    --md-sys-color-on-primary: var(--md-ref-palette-primary100);
+    --md-sys-color-on-primary-container: var(--md-ref-palette-primary10);
+    --md-sys-color-inverse-primary: var(--md-ref-palette-primary80);
+    --md-sys-color-secondary: var(--md-ref-palette-secondary40);
+    --md-sys-color-secondary-container: var(--md-ref-palette-secondary90);
+    --md-sys-color-on-secondary: var(--md-ref-palette-secondary100);
+    --md-sys-color-on-secondary-container: var(--md-ref-palette-secondary10);
+    --md-sys-color-tertiary: var(--md-ref-palette-tertiary40);
+    --md-sys-color-tertiary-container: var(--md-ref-palette-tertiary90);
+    --md-sys-color-on-tertiary: var(--md-ref-palette-tertiary100);
+    --md-sys-color-on-tertiary-container: var(--md-ref-palette-tertiary10);
+    --md-sys-color-surface: var(--md-ref-palette-neutral98);
+    --md-sys-color-surface-dim: var(--md-ref-palette-neutral87);
+    --md-sys-color-surface-bright: var(--md-ref-palette-neutral98);
+    --md-sys-color-surface-container-lowest: var(--md-ref-palette-neutral100);
+    --md-sys-color-surface-container-low: var(--md-ref-palette-neutral96);
+    --md-sys-color-surface-container: var(--md-ref-palette-neutral94);
+    --md-sys-color-surface-container-high: var(--md-ref-palette-neutral92);
+    --md-sys-color-surface-container-highest: var(--md-ref-palette-neutral90);
+    --md-sys-color-surface-variant: var(--md-ref-palette-neutral-variant90);
+    --md-sys-color-on-surface: var(--md-ref-palette-neutral10);
+    --md-sys-color-on-surface-variant: var(--md-ref-palette-neutral-variant30);
+    --md-sys-color-inverse-surface: var(--md-ref-palette-neutral20);
+    --md-sys-color-inverse-on-surface: var(--md-ref-palette-neutral95);
+    --md-sys-color-background: var(--md-ref-palette-neutral98);
+    --md-sys-color-on-background: var(--md-ref-palette-neutral10);
+    --md-sys-color-error: var(--md-ref-palette-error40);
+    --md-sys-color-error-container: var(--md-ref-palette-error90);
+    --md-sys-color-on-error: var(--md-ref-palette-error100);
+    --md-sys-color-on-error-container: var(--md-ref-palette-error10);
+    --md-sys-color-outline: var(--md-ref-palette-neutral-variant50);
+    --md-sys-color-outline-variant: var(--md-ref-palette-neutral-variant80);
+    --md-sys-color-shadow: var(--md-ref-palette-neutral0);
+    --md-sys-color-surface-tint-color: var(--md-sys-color-primary);
+    --md-sys-color-scrim: var(--md-ref-palette-neutral0);
+
+    --md-sys-color-red: var(--md-ref-palette-red40);
+    --md-sys-color-red-container: var(--md-ref-palette-red90);
+    --md-sys-color-on-red: var(--md-ref-palette-red95);
+    --md-sys-color-on-red-container: var(--md-ref-palette-red10);
+    --md-sys-color-inverse-red: var(--md-ref-palette-red80);
+
+    --md-sys-color-blue: var(--md-ref-palette-blue40);
+    --md-sys-color-blue-container: var(--md-ref-palette-blue90);
+    --md-sys-color-on-blue: var(--md-ref-palette-blue95);
+    --md-sys-color-on-blue-container: var(--md-ref-palette-blue10);
+    --md-sys-color-inverse-blue: var(--md-ref-palette-blue80);
+
+    --md-sys-color-green: var(--md-ref-palette-green40);
+    --md-sys-color-green-container: var(--md-ref-palette-green90);
+    --md-sys-color-on-green: var(--md-ref-palette-green95);
+    --md-sys-color-on-green-container: var(--md-ref-palette-green10);
+    --md-sys-color-inverse-green: var(--md-ref-palette-green80);
+
+    --md-sys-color-yellow: var(--md-ref-palette-yellow40);
+    --md-sys-color-yellow-container: var(--md-ref-palette-yellow90);
+    --md-sys-color-on-yellow: var(--md-ref-palette-yellow95);
+    --md-sys-color-on-yellow-container: var(--md-ref-palette-yellow10);
+    --md-sys-color-inverse-yellow: var(--md-ref-palette-yellow80);
+
+    --md-sys-color-purple: var(--md-ref-palette-purple40);
+    --md-sys-color-purple-container: var(--md-ref-palette-purple90);
+    --md-sys-color-on-purple: var(--md-ref-palette-purple95);
+    --md-sys-color-on-purple-container: var(--md-ref-palette-purple10);
+    --md-sys-color-inverse-purple: var(--md-ref-palette-purple80);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    --md-sys-color-primary: var(--md-ref-palette-primary80);
+    --md-sys-color-primary-container: var(--md-ref-palette-primary30);
+    --md-sys-color-on-primary: var(--md-ref-palette-primary20);
+    --md-sys-color-on-primary-container: var(--md-ref-palette-primary90);
+    --md-sys-color-inverse-primary: var(--md-ref-palette-primary40);
+    --md-sys-color-secondary: var(--md-ref-palette-secondary80);
+    --md-sys-color-secondary-container: var(--md-ref-palette-secondary30);
+    --md-sys-color-on-secondary: var(--md-ref-palette-secondary20);
+    --md-sys-color-on-secondary-container: var(--md-ref-palette-secondary90);
+    --md-sys-color-tertiary: var(--md-ref-palette-tertiary80);
+    --md-sys-color-tertiary-container: var(--md-ref-palette-tertiary30);
+    --md-sys-color-on-tertiary: var(--md-ref-palette-tertiary20);
+    --md-sys-color-on-tertiary-container: var(--md-ref-palette-tertiary90);
+    --md-sys-color-surface: var(--md-ref-palette-neutral6);
+    --md-sys-color-surface-dim: var(--md-ref-palette-neutral6);
+    --md-sys-color-surface-bright: var(--md-ref-palette-neutral24);
+    --md-sys-color-surface-container-lowest: var(--md-ref-palette-neutral4);
+    --md-sys-color-surface-container-low: var(--md-ref-palette-neutral10);
+    --md-sys-color-surface-container: var(--md-ref-palette-neutral12);
+    --md-sys-color-surface-container-high: var(--md-ref-palette-neutral17);
+    --md-sys-color-surface-container-highest: var(--md-ref-palette-neutral22);
+    --md-sys-color-surface-variant: var(--md-ref-palette-neutral-variant30);
+    --md-sys-color-on-surface: var(--md-ref-palette-neutral90);
+    --md-sys-color-on-surface-variant: var(--md-ref-palette-neutral-variant80);
+    --md-sys-color-inverse-surface: var(--md-ref-palette-neutral90);
+    --md-sys-color-inverse-on-surface: var(--md-ref-palette-neutral20);
+    --md-sys-color-background: var(--md-ref-palette-neutral6);
+    --md-sys-color-on-background: var(--md-ref-palette-neutral90);
+    --md-sys-color-error: var(--md-ref-palette-error80);
+    --md-sys-color-error-container: var(--md-ref-palette-error30);
+    --md-sys-color-on-error: var(--md-ref-palette-error20);
+    --md-sys-color-on-error-container: var(--md-ref-palette-error90);
+    --md-sys-color-outline: var(--md-ref-palette-neutral-variant60);
+    --md-sys-color-outline-variant: var(--md-ref-palette-neutral-variant30);
+    --md-sys-color-shadow: var(--md-ref-palette-neutral0);
+    --md-sys-color-surface-tint-color: var(--md-sys-color-primary);
+    --md-sys-color-scrim: var(--md-ref-palette-neutral0);
+
+    --md-sys-color-red: var(--md-ref-palette-red80);
+    --md-sys-color-red-container: var(--md-ref-palette-red30);
+    --md-sys-color-on-red: var(--md-ref-palette-red20);
+    --md-sys-color-on-red-container: var(--md-ref-palette-red90);
+    --md-sys-color-inverse-red: var(--md-ref-palette-red40);
+
+    --md-sys-color-blue: var(--md-ref-palette-blue80);
+    --md-sys-color-blue-container: var(--md-ref-palette-blue30);
+    --md-sys-color-on-blue: var(--md-ref-palette-blue20);
+    --md-sys-color-on-blue-container: var(--md-ref-palette-blue90);
+    --md-sys-color-inverse-blue: var(--md-ref-palette-blue40);
+
+    --md-sys-color-green: var(--md-ref-palette-green80);
+    --md-sys-color-green-container: var(--md-ref-palette-green30);
+    --md-sys-color-on-green: var(--md-ref-palette-green20);
+    --md-sys-color-on-green-container: var(--md-ref-palette-green90);
+    --md-sys-color-inverse-green: var(--md-ref-palette-green40);
+
+    --md-sys-color-yellow: var(--md-ref-palette-yellow80);
+    --md-sys-color-yellow-container: var(--md-ref-palette-yellow30);
+    --md-sys-color-on-yellow: var(--md-ref-palette-yellow20);
+    --md-sys-color-on-yellow-container: var(--md-ref-palette-yellow90);
+    --md-sys-color-inverse-yellow: var(--md-ref-palette-yellow40);
+
+    --md-sys-color-purple: var(--md-ref-palette-purple80);
+    --md-sys-color-purple-container: var(--md-ref-palette-purple30);
+    --md-sys-color-on-purple: var(--md-ref-palette-purple20);
+    --md-sys-color-on-purple-container: var(--md-ref-palette-purple90);
+    --md-sys-color-inverse-purple: var(--md-ref-palette-purple40);
+  }
+}