diff --git a/README.md b/README.md
index 4f572ad..0089197 100755
--- a/README.md
+++ b/README.md
@@ -1,5 +1,5 @@
 <div align="center">
-<h1>Paper <sup><sup><sub>5.1</sub></sup></sup></h1>
+<h1>Paper <sup><sup><sub>6</sub></sup></sup></h1>
 
 Demo → [hugo-paper.vercel.app](https://hugo-paper.vercel.app/)
 
@@ -49,10 +49,15 @@ Available options to `config.toml`:
 disqusShortname = 'YOUR_DISQUS_SHORTNAME'   # add disqus comments
 
 [params]
-  disableHLJS = true                         # don't use highlight.js
-  twitter = 'YOUR_TWITTER_ID'                # twitter.com/YOUR_TWITTER_ID
-  github = 'YOUR_GITHUB_ID'                  # github.com/YOUR_GITHUB_ID
-  instagram = 'YOUR_INSTAGRAM_ID'            # instagram.com/YOUR_INSTAGRAM_ID
+    disableHLJS = true                         # disable loading highlight.js
+    twitter = 'YOUR_TWITTER_ID'                # twitter.com/YOUR_TWITTER_ID
+    github = 'YOUR_GITHUB_ID'                  # github.com/YOUR_GITHUB_ID
+    instagram = 'YOUR_INSTAGRAM_ID'            # instagram.com/YOUR_INSTAGRAM_ID
+
+    # Display profile on home page
+    avatar = 'IMAGE_URL'      # Gravatar email or image url(e.g. "https://deno.land/logo.svg")
+    name = 'YOUR_NAME'
+    bio = 'YOUR_BIO'
 ```
 
 ## License
diff --git a/assets/app.css b/assets/app.css
index 92835bb..0c2f4d1 100644
--- a/assets/app.css
+++ b/assets/app.css
@@ -3,50 +3,12 @@
  * A simple, clean, flexible Hugo theme
  * https://github.com/nanxiaobei/hugo-paper
  * Designed by 南小北 (https://lee.so/)
- * Updated in 2021.8.24
+ * Updated in 2022.7.20
  */
 
-/* Theme
- -------------------------------------------------- */
-:root {
-  --gap: 3.5rem;
-  --y-gap: 8rem;
-  --wide: 140rem;
-  --narrow: 80rem;
-  --side: calc((var(--wide) - var(--narrow)) / 2);
-  --header: 8rem;
-  --footer: calc(8rem + var(--safe-bottom));
-
-  --light: 255, 255, 255;
-  --dark: 22, 22, 22;
-  --hljs-bg: #111;
-
-  --safe-bottom: 0;
-}
-
-@supports (bottom: constant(safe-area-inset-bottom)) {
-  :root {
-    --safe-bottom: constant(safe-area-inset-bottom);
-  }
-}
-
-@supports (bottom: env(safe-area-inset-bottom)) {
-  :root {
-    --safe-bottom: env(safe-area-inset-bottom);
-  }
-}
-
-.dark {
-  --light: 22, 22, 22;
-  --dark: 255, 255, 255;
-  --hljs-bg: #282828;
-}
-
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-}
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
 
 html,
 body {
@@ -55,37 +17,11 @@ body {
 
 html {
   -webkit-tap-highlight-color: transparent;
-  font-size: 8px;
+  background: #fffefc;
 }
 
-body {
-  --white: rgba(var(--light), 1);
-  --black: rgba(var(--dark), 1);
-
-  --pro: rgba(var(--dark), 1);
-  --lit: rgba(var(--dark), 0.64);
-  --air: rgba(var(--dark), 0.48);
-  --fog: rgba(var(--dark), 0.12);
-
-  display: flex;
-  flex-direction: column;
-  padding-right: var(--gap);
-  padding-left: var(--gap);
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
-    'Open Sans', 'Helvetica Neue', sans-serif;
-  font-size: 2rem;
-  line-height: 1.8;
-  color: var(--pro);
-  word-break: break-word;
-  background: var(--white);
-  transition: background 0.4s ease-out;
-}
-
-body > * {
-  flex-shrink: 0;
-  width: 100%;
-  margin-inline: auto;
+html.dark {
+  background: #000;
 }
 
 .not-ready,
@@ -93,582 +29,48 @@ body > * {
   transition: none !important;
 }
 
-@media (max-width: 1199px) {
-  html {
-    font-size: 7px;
-  }
+.btn {
+  @apply rounded-full bg-black py-4 px-6 text-sm text-white no-underline shadow-lg duration-100 active:scale-95 dark:bg-white dark:text-black;
 }
 
-/* Reset
--------------------------------------------------- */
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  margin: 0;
-  font-size: inherit;
-  font-weight: 700;
-  line-height: 1.2;
-}
-
-p {
-  margin: 0;
-}
-
-strong,
-b {
-  font-weight: 500;
-}
-
-ul,
-ol {
-  padding: 0;
-  margin: 0;
-}
-
-a {
-  color: inherit;
-  text-decoration: none;
-}
-
-table {
-  width: 100%;
-  border-spacing: 0;
-  border-collapse: collapse;
-}
-
-button,
-input,
-textarea {
-  padding: 0;
-  font: inherit;
-  background: transparent;
-  border: 0;
-  outline: 0;
-  -webkit-appearance: none;
-}
-
-button,
-input[type='button'],
-input[type='submit'] {
-  cursor: pointer;
-}
-
-input,
-textarea {
-  padding: 0;
-  border: 0;
-}
-
-input:-webkit-autofill,
-textarea:-webkit-autofill {
-  box-shadow: 0 0 0 6rem var(--white) inset;
-}
-
-img {
-  display: block;
-  max-width: 100%;
-}
-
-/* Header
- -------------------------------------------------- */
-.header {
-  display: flex;
-  max-width: var(--wide);
-  height: var(--header);
-}
-
-.header a {
-  display: flex;
-  flex-shrink: 0;
-  align-items: center;
-}
-
-.logo {
-  display: flex;
-  min-width: var(--side);
-  padding-right: var(--gap);
-}
-
-.site-name {
-  max-width: calc(100% - 2rem - 3rem);
-  padding-bottom: 0.3rem;
-  overflow: auto;
-  font-size: 3.4rem;
-  font-weight: 700;
-  white-space: nowrap;
-}
-
-.btn-dark {
-  width: 3rem;
-  margin-left: 2rem;
-  cursor: pointer;
-  background: url(./theme.png) left / auto 3rem no-repeat;
-  transition: background-position 0.4s steps(5);
-}
-
-.dark .btn-dark {
-  background-position: right;
-}
-
-.menu {
-  display: flex;
-  overflow: auto;
-}
-
-.menu a + a {
-  margin-left: var(--gap);
-}
-
-.menu a.active {
-  opacity: 0.44;
-}
-
-.social {
-  display: flex;
-  margin-left: auto;
-}
-
-.social a {
-  width: 3rem;
-  margin-left: 3rem;
-  background: var(--url) center center no-repeat;
-}
-
-.dark .social a {
-  filter: invert(1);
-}
-
-@media (max-width: 1199px) {
-  .logo {
-    min-width: auto;
-  }
-
-  [data-menu='true'] {
-    --header: 16rem;
-  }
-
-  [data-menu='true'] .header {
-    position: relative;
-  }
-
-  [data-menu='true'] .header > * {
-    height: calc(var(--header) / 2);
-  }
-
-  [data-menu='true'] .menu {
-    position: absolute;
-    inset: auto 0 0;
-    border-bottom: 1px solid var(--fog);
-  }
-}
-
-/* Main
- -------------------------------------------------- */
-.main {
-  max-width: var(--narrow);
-  min-height: calc(100% - var(--header) - var(--footer));
-  padding-top: var(--y-gap);
-  padding-bottom: var(--y-gap);
-}
-
-.main-title {
-  margin-bottom: calc(var(--y-gap) + 1rem);
-  font-size: 3rem;
-  font-weight: 400;
-  color: var(--lit);
-}
-
-.main-nav {
-  display: flex;
-  margin-top: 5rem;
-}
-
-.main-nav a {
-  font-size: 1.8rem;
-  line-height: 5.5rem;
-  color: var(--white);
-  background: var(--black);
-  border-radius: 0.5rem;
-  padding-inline: 3rem;
-}
-
-.main-nav .next {
-  margin-left: auto;
-}
-
-/* Post entry
- -------------------------------------------------- */
-.post-entry {
-  position: relative;
-  padding-block: 2rem;
-  transition: transform 0.1s;
-}
-
-.post-entry:first-of-type {
-  margin-top: -2rem;
-}
-
-.post-entry:active {
-  transform: scale(0.99);
-}
-
-.post-entry h2 {
-  margin-bottom: 0.2rem;
-  font-size: 3rem;
-}
-
-.post-entry time {
-  flex-shrink: 0;
-  font-size: 1.7rem;
-  color: var(--air);
-}
-
-.post-entry a {
-  position: absolute;
-  inset: 0;
-}
-
-/* Post single
- -------------------------------------------------- */
-.post-title {
-  margin-bottom: calc(var(--y-gap) + 1rem);
-}
-
-.post-title p {
-  display: flex;
-  margin-bottom: 1.5rem;
-  font-size: 1.6rem;
-  color: var(--air);
-  transform: translateY(0.4rem);
-}
-
-.post-title p span::before {
-  content: '·';
-  margin-inline: 0.8rem;
-}
-
-.post-title h1 {
-  font-size: 5rem;
-  transform: translateX(-0.3rem);
-}
-
-.post-tags {
-  margin-top: 7rem;
-}
-
-.post-tags a {
-  display: inline-block;
-  font-weight: 500;
-  line-height: 5rem;
-  color: var(--lit);
-  background: rgba(var(--dark), 0.05);
-  border-radius: 0.5rem;
-  padding-inline: 2rem;
+.link {
+  @apply duration-200 hover:text-black dark:hover:text-white;
 }
 
-.post-tags a + a {
-  margin-left: 0.5rem;
+.btn-menu::before,
+.btn-menu::after {
+  @apply block h-[2px] w-5 bg-black duration-200 content-[''] dark:invert;
 }
 
-.post-nav {
-  display: flex;
-  justify-content: space-between;
-  margin-top: var(--y-gap);
-  background: rgba(var(--dark), 0.05);
-  border-radius: 0.5rem;
+.nav-wrapper {
+  background: #fffefc;
 }
 
-.post-nav a {
-  display: flex;
-  align-items: center;
-  width: 50%;
-  padding: var(--gap);
-  font-size: 2.4rem;
-  font-weight: 700;
-  line-height: 1.2;
+.open {
+  @apply overflow-hidden;
 }
 
-.post-nav a span + span {
-  margin-left: 1rem;
+.open .btn-menu::before {
+  @apply w-6 translate-y-[5.5px] rotate-45;
 }
 
-.post-nav .prev {
-  padding-right: 1rem;
+.open .btn-menu::after {
+  @apply w-6 -translate-y-[5.5px] -rotate-45;
 }
 
-.post-nav .next {
-  justify-content: flex-end;
-  padding-left: 1rem;
-  margin-left: auto;
+.open .nav-wrapper {
+  @apply top-0;
 }
 
-.post-comments {
-  margin-top: var(--y-gap);
-}
-
-@media (max-width: 1199px) {
-  .post-title {
-    display: block;
-  }
-
-  .post-title aside {
-    flex-direction: row;
-    width: auto;
-    padding-right: 0;
-    margin-bottom: 0.5rem;
-    margin-left: 0;
-    transform: none;
-  }
-
-  .post-title aside span::before {
-    content: '·';
-    margin-inline: 0.5rem;
-  }
-}
-
-/* Post content
- -------------------------------------------------- */
-.post-content {
-  font-size: 2.2rem;
-}
-
-.post-content h1,
-.post-content h2,
-.post-content h3,
-.post-content h4,
-.post-content h5,
-.post-content h6 {
-  margin-block: 2rem;
-}
-
-.post-content h1 {
-  margin-top: var(--y-gap);
-  font-size: 4.5rem;
-}
-
-.post-content h2 {
-  margin-top: 6rem;
-  font-size: 3.5rem;
-}
-
-.post-content h3 {
-  font-size: 2.5rem;
-}
-
-.post-content h4 {
-  font-size: 2.2rem;
-}
-
-.post-content h5 {
-  font-size: 1.8rem;
-}
-
-.post-content h6 {
-  font-size: 1.5rem;
-}
-
-.post-content img {
-  margin-inline: auto;
-}
-
-.post-content a {
-  padding-bottom: 0.2rem;
-  font-weight: 500;
-  border-bottom: 2px solid var(--pro);
-}
-
-.post-content a code {
-  margin-inline: 0;
-  border-bottom-right-radius: 0;
-  border-bottom-left-radius: 0;
-}
-
-.post-content del {
-  text-decoration: none;
-  background: linear-gradient(to right, var(--pro) 100%, transparent 0) 0 50% / 1px 1px repeat-x;
-}
-
-.post-content p,
-.post-content ul,
-.post-content ol,
-.post-content dl,
-.post-content details {
-  margin-bottom: 3rem;
-}
-
-.post-content ul,
-.post-content ol {
-  padding-left: 2.5rem;
-}
-
-.post-content li {
-  margin-top: 0.6rem;
-}
-
-.post-content li p {
-  margin-bottom: 0;
-}
-
-.post-content dl {
-  display: flex;
-  flex-wrap: wrap;
-  margin: 0;
-}
-
-.post-content dt {
-  width: 25%;
-  font-weight: 500;
-}
-
-.post-content dd {
-  width: 75%;
-  padding-left: 1.3rem;
-  margin-left: 0;
-}
-
-.post-content dt ~ dt,
-.post-content dd ~ dd {
-  margin-top: 1.3rem;
-}
-
-.post-content table {
-  margin-bottom: 4rem;
-}
-
-.post-content table th,
-.post-content table:not(.highlighttable) td {
-  min-width: 10rem;
-  padding: 1.5rem 1rem;
-  line-height: 1.5;
-  border-bottom: 1px solid var(--fog);
-}
-
-.post-content table th {
-  font-size: 1.6rem;
-  text-align: left;
-}
-
-.post-content table:not(.highlighttable) td code:only-of-type {
-  margin-inline: 0;
-}
-
-.post-content .highlight,
-.post-content pre {
-  margin: 0 calc(var(--gap) * -1) 4rem;
-  overflow-x: auto;
-  background: var(--hljs-bg) !important;
-  border-radius: 0.5rem;
-}
-
-.post-content ul pre {
-  margin-left: calc(var(--gap) * -2);
-}
-
-.post-content .highlight pre {
-  margin-inline: 0;
-  margin-bottom: 0;
-}
-
-/* table */
-.post-content .highlighttable {
-  table-layout: fixed;
-}
-
-.post-content .highlighttable td:first-of-type {
-  width: 5rem;
-}
-
-.post-content .highlighttable td .linenodiv {
-  padding-right: 0 !important;
-}
-
-.post-content .highlighttable td .linenodiv pre,
-.post-content .highlighttable td .highlight {
-  margin-bottom: 0;
-}
-
-.post-content .highlighttable td .highlight pre code::-webkit-scrollbar {
-  display: none;
-}
-
-/* inline */
-.post-content .highlight span {
-  background: transparent !important;
-}
-
-.post-content code {
-  padding: 0.5rem 1rem;
-  margin-inline: 0.5rem;
-  font-family: Menlo, Monaco, 'Courier New', Courier, monospace;
-  font-size: 0.8em;
-  line-height: 1.5;
-  background: rgba(var(--dark), 0.06);
-  border-radius: 0.3rem;
-}
-
-.post-content pre code {
-  display: block;
-  padding: var(--gap);
-  margin-inline: 0;
-  color: rgba(255, 255, 255, 0.8);
-  background: transparent;
-  border-radius: 0;
-}
-
-.post-content blockquote {
-  padding: 0 0 0 calc(var(--gap) - 0.4rem);
-  margin: 0 0 0 calc(var(--gap) * -1);
-  border-left: 0.4rem solid var(--pro);
-}
-
-.post-content hr {
-  height: 1px;
-  background: var(--fog);
-  border: 0;
-  margin-block: 12rem;
-}
-
-.post-content iframe {
-  width: 100%;
-  background: var(--black);
-}
-
-/* Footer
- -------------------------------------------------- */
-.footer {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  max-width: var(--narrow);
-  height: var(--footer);
-  padding-bottom: var(--safe-bottom);
-  margin-top: auto;
-  font-size: 1.6rem;
-  color: var(--lit);
-  border-top: 1px solid var(--fog);
-}
-
-.footer p + p::before {
-  content: '·';
-  margin-inline: 0.6rem;
-}
+article pre {
+  @apply shadow-lg;
 
-.footer a:hover {
-  color: var(--pro);
-  border-bottom: 1px solid var(--pro);
+  padding: theme('space.8') !important;
+  margin-inline: calc(theme('space.8') * -1);
 }
 
-/* 404
- -------------------------------------------------- */
-.title-404 {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-  padding-bottom: 8rem;
-  font-size: 16rem;
+article blockquote {
+  padding: 0 0 0 calc(theme('space.8') - 3px) !important;
+  margin: 0 0 0 calc(theme('space.8') * -1) !important;
+  border-color: theme('colors.zinc.800') !important;
 }
diff --git a/assets/main.css b/assets/main.css
new file mode 100644
index 0000000..6d380a9
--- /dev/null
+++ b/assets/main.css
@@ -0,0 +1,1677 @@
+/*
+ * Paper
+ * A simple, clean, flexible Hugo theme
+ * https://github.com/nanxiaobei/hugo-paper
+ * Designed by 南小北 (https://lee.so/)
+ * Updated in 2022.7.20
+ */
+
+/*
+ ! tailwindcss v3.1.4 | MIT License | https://tailwindcss.com
+ */
+
+/*
+1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
+2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
+*/
+
+*,
+::before,
+::after {
+  box-sizing: border-box;
+  /* 1 */
+  border-width: 0;
+  /* 2 */
+  border-style: solid;
+  /* 2 */
+  border-color: #e5e7eb;
+  /* 2 */
+}
+
+::before,
+::after {
+  --tw-content: '';
+}
+
+/*
+1. Use a consistent sensible line-height in all browsers.
+2. Prevent adjustments of font size after orientation changes in iOS.
+3. Use a more readable tab size.
+4. Use the user's configured `sans` font-family by default.
+*/
+
+html {
+  line-height: 1.5;
+  /* 1 */
+  -webkit-text-size-adjust: 100%;
+  /* 2 */
+  -moz-tab-size: 4;
+  /* 3 */
+  -o-tab-size: 4;
+     tab-size: 4;
+  /* 3 */
+  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  /* 4 */
+}
+
+/*
+1. Remove the margin in all browsers.
+2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
+*/
+
+body {
+  margin: 0;
+  /* 1 */
+  line-height: inherit;
+  /* 2 */
+}
+
+/*
+1. Add the correct height in Firefox.
+2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
+3. Ensure horizontal rules are visible by default.
+*/
+
+hr {
+  height: 0;
+  /* 1 */
+  color: inherit;
+  /* 2 */
+  border-top-width: 1px;
+  /* 3 */
+}
+
+/*
+Add the correct text decoration in Chrome, Edge, and Safari.
+*/
+
+abbr:where([title]) {
+  -webkit-text-decoration: underline dotted;
+          text-decoration: underline dotted;
+}
+
+/*
+Remove the default font size and weight for headings.
+*/
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-size: inherit;
+  font-weight: inherit;
+}
+
+/*
+Reset links to optimize for opt-in styling instead of opt-out.
+*/
+
+a {
+  color: inherit;
+  text-decoration: inherit;
+}
+
+/*
+Add the correct font weight in Edge and Safari.
+*/
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/*
+1. Use the user's configured `mono` font family by default.
+2. Correct the odd `em` font sizing in all browsers.
+*/
+
+code,
+kbd,
+samp,
+pre {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  /* 1 */
+  font-size: 1em;
+  /* 2 */
+}
+
+/*
+Add the correct font size in all browsers.
+*/
+
+small {
+  font-size: 80%;
+}
+
+/*
+Prevent `sub` and `sup` elements from affecting the line height in all browsers.
+*/
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/*
+1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
+2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
+3. Remove gaps between table borders by default.
+*/
+
+table {
+  text-indent: 0;
+  /* 1 */
+  border-color: inherit;
+  /* 2 */
+  border-collapse: collapse;
+  /* 3 */
+}
+
+/*
+1. Change the font styles in all browsers.
+2. Remove the margin in Firefox and Safari.
+3. Remove default padding in all browsers.
+*/
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit;
+  /* 1 */
+  font-size: 100%;
+  /* 1 */
+  font-weight: inherit;
+  /* 1 */
+  line-height: inherit;
+  /* 1 */
+  color: inherit;
+  /* 1 */
+  margin: 0;
+  /* 2 */
+  padding: 0;
+  /* 3 */
+}
+
+/*
+Remove the inheritance of text transform in Edge and Firefox.
+*/
+
+button,
+select {
+  text-transform: none;
+}
+
+/*
+1. Correct the inability to style clickable types in iOS and Safari.
+2. Remove default button styles.
+*/
+
+button,
+[type='button'],
+[type='reset'],
+[type='submit'] {
+  -webkit-appearance: button;
+  /* 1 */
+  background-color: transparent;
+  /* 2 */
+  background-image: none;
+  /* 2 */
+}
+
+/*
+Use the modern Firefox focus style for all focusable elements.
+*/
+
+:-moz-focusring {
+  outline: auto;
+}
+
+/*
+Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
+*/
+
+:-moz-ui-invalid {
+  box-shadow: none;
+}
+
+/*
+Add the correct vertical alignment in Chrome and Firefox.
+*/
+
+progress {
+  vertical-align: baseline;
+}
+
+/*
+Correct the cursor style of increment and decrement buttons in Safari.
+*/
+
+::-webkit-inner-spin-button,
+::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/*
+1. Correct the odd appearance in Chrome and Safari.
+2. Correct the outline style in Safari.
+*/
+
+[type='search'] {
+  -webkit-appearance: textfield;
+  /* 1 */
+  outline-offset: -2px;
+  /* 2 */
+}
+
+/*
+Remove the inner padding in Chrome and Safari on macOS.
+*/
+
+::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/*
+1. Correct the inability to style clickable types in iOS and Safari.
+2. Change font properties to `inherit` in Safari.
+*/
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button;
+  /* 1 */
+  font: inherit;
+  /* 2 */
+}
+
+/*
+Add the correct display in Chrome and Safari.
+*/
+
+summary {
+  display: list-item;
+}
+
+/*
+Removes the default spacing and border for appropriate elements.
+*/
+
+blockquote,
+dl,
+dd,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+hr,
+figure,
+p,
+pre {
+  margin: 0;
+}
+
+fieldset {
+  margin: 0;
+  padding: 0;
+}
+
+legend {
+  padding: 0;
+}
+
+ol,
+ul,
+menu {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+/*
+Prevent resizing textareas horizontally by default.
+*/
+
+textarea {
+  resize: vertical;
+}
+
+/*
+1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
+2. Set the default placeholder color to the user's configured gray 400 color.
+*/
+
+input::-moz-placeholder, textarea::-moz-placeholder {
+  opacity: 1;
+  /* 1 */
+  color: #9ca3af;
+  /* 2 */
+}
+
+input:-ms-input-placeholder, textarea:-ms-input-placeholder {
+  opacity: 1;
+  /* 1 */
+  color: #9ca3af;
+  /* 2 */
+}
+
+input::placeholder,
+textarea::placeholder {
+  opacity: 1;
+  /* 1 */
+  color: #9ca3af;
+  /* 2 */
+}
+
+/*
+Set the default cursor for buttons.
+*/
+
+button,
+[role="button"] {
+  cursor: pointer;
+}
+
+/*
+Make sure disabled buttons don't get the pointer cursor.
+*/
+
+:disabled {
+  cursor: default;
+}
+
+/*
+1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
+2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
+   This can trigger a poorly considered lint error in some tools but is included by design.
+*/
+
+img,
+svg,
+video,
+canvas,
+audio,
+iframe,
+embed,
+object {
+  display: block;
+  /* 1 */
+  vertical-align: middle;
+  /* 2 */
+}
+
+/*
+Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
+*/
+
+img,
+video {
+  max-width: 100%;
+  height: auto;
+}
+
+*, ::before, ::after {
+  --tw-border-spacing-x: 0;
+  --tw-border-spacing-y: 0;
+  --tw-translate-x: 0;
+  --tw-translate-y: 0;
+  --tw-rotate: 0;
+  --tw-skew-x: 0;
+  --tw-skew-y: 0;
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  --tw-pan-x:  ;
+  --tw-pan-y:  ;
+  --tw-pinch-zoom:  ;
+  --tw-scroll-snap-strictness: proximity;
+  --tw-ordinal:  ;
+  --tw-slashed-zero:  ;
+  --tw-numeric-figure:  ;
+  --tw-numeric-spacing:  ;
+  --tw-numeric-fraction:  ;
+  --tw-ring-inset:  ;
+  --tw-ring-offset-width: 0px;
+  --tw-ring-offset-color: #fff;
+  --tw-ring-color: rgb(59 130 246 / 0.5);
+  --tw-ring-offset-shadow: 0 0 #0000;
+  --tw-ring-shadow: 0 0 #0000;
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  --tw-blur:  ;
+  --tw-brightness:  ;
+  --tw-contrast:  ;
+  --tw-grayscale:  ;
+  --tw-hue-rotate:  ;
+  --tw-invert:  ;
+  --tw-saturate:  ;
+  --tw-sepia:  ;
+  --tw-drop-shadow:  ;
+  --tw-backdrop-blur:  ;
+  --tw-backdrop-brightness:  ;
+  --tw-backdrop-contrast:  ;
+  --tw-backdrop-grayscale:  ;
+  --tw-backdrop-hue-rotate:  ;
+  --tw-backdrop-invert:  ;
+  --tw-backdrop-opacity:  ;
+  --tw-backdrop-saturate:  ;
+  --tw-backdrop-sepia:  ;
+}
+
+::-webkit-backdrop {
+  --tw-border-spacing-x: 0;
+  --tw-border-spacing-y: 0;
+  --tw-translate-x: 0;
+  --tw-translate-y: 0;
+  --tw-rotate: 0;
+  --tw-skew-x: 0;
+  --tw-skew-y: 0;
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  --tw-pan-x:  ;
+  --tw-pan-y:  ;
+  --tw-pinch-zoom:  ;
+  --tw-scroll-snap-strictness: proximity;
+  --tw-ordinal:  ;
+  --tw-slashed-zero:  ;
+  --tw-numeric-figure:  ;
+  --tw-numeric-spacing:  ;
+  --tw-numeric-fraction:  ;
+  --tw-ring-inset:  ;
+  --tw-ring-offset-width: 0px;
+  --tw-ring-offset-color: #fff;
+  --tw-ring-color: rgb(59 130 246 / 0.5);
+  --tw-ring-offset-shadow: 0 0 #0000;
+  --tw-ring-shadow: 0 0 #0000;
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  --tw-blur:  ;
+  --tw-brightness:  ;
+  --tw-contrast:  ;
+  --tw-grayscale:  ;
+  --tw-hue-rotate:  ;
+  --tw-invert:  ;
+  --tw-saturate:  ;
+  --tw-sepia:  ;
+  --tw-drop-shadow:  ;
+  --tw-backdrop-blur:  ;
+  --tw-backdrop-brightness:  ;
+  --tw-backdrop-contrast:  ;
+  --tw-backdrop-grayscale:  ;
+  --tw-backdrop-hue-rotate:  ;
+  --tw-backdrop-invert:  ;
+  --tw-backdrop-opacity:  ;
+  --tw-backdrop-saturate:  ;
+  --tw-backdrop-sepia:  ;
+}
+
+::backdrop {
+  --tw-border-spacing-x: 0;
+  --tw-border-spacing-y: 0;
+  --tw-translate-x: 0;
+  --tw-translate-y: 0;
+  --tw-rotate: 0;
+  --tw-skew-x: 0;
+  --tw-skew-y: 0;
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  --tw-pan-x:  ;
+  --tw-pan-y:  ;
+  --tw-pinch-zoom:  ;
+  --tw-scroll-snap-strictness: proximity;
+  --tw-ordinal:  ;
+  --tw-slashed-zero:  ;
+  --tw-numeric-figure:  ;
+  --tw-numeric-spacing:  ;
+  --tw-numeric-fraction:  ;
+  --tw-ring-inset:  ;
+  --tw-ring-offset-width: 0px;
+  --tw-ring-offset-color: #fff;
+  --tw-ring-color: rgb(59 130 246 / 0.5);
+  --tw-ring-offset-shadow: 0 0 #0000;
+  --tw-ring-shadow: 0 0 #0000;
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  --tw-blur:  ;
+  --tw-brightness:  ;
+  --tw-contrast:  ;
+  --tw-grayscale:  ;
+  --tw-hue-rotate:  ;
+  --tw-invert:  ;
+  --tw-saturate:  ;
+  --tw-sepia:  ;
+  --tw-drop-shadow:  ;
+  --tw-backdrop-blur:  ;
+  --tw-backdrop-brightness:  ;
+  --tw-backdrop-contrast:  ;
+  --tw-backdrop-grayscale:  ;
+  --tw-backdrop-hue-rotate:  ;
+  --tw-backdrop-invert:  ;
+  --tw-backdrop-opacity:  ;
+  --tw-backdrop-saturate:  ;
+  --tw-backdrop-sepia:  ;
+}
+
+.prose {
+  color: var(--tw-prose-body);
+  max-width: 65ch;
+}
+
+.prose :where([class~="lead"]):not(:where([class~="not-prose"] *)) {
+  color: var(--tw-prose-lead);
+  font-size: 1.25em;
+  line-height: 1.6;
+  margin-top: 1.2em;
+  margin-bottom: 1.2em;
+}
+
+.prose :where(a):not(:where([class~="not-prose"] *)) {
+  color: var(--tw-prose-links);
+  text-decoration: underline;
+  font-weight: 500;
+}
+
+.prose :where(strong):not(:where([class~="not-prose"] *)) {
+  color: var(--tw-prose-bold);
+  font-weight: 600;
+}
+
+.prose :where(ol):not(:where([class~="not-prose"] *)) {
+  list-style-type: decimal;
+  padding-left: 1.625em;
+}
+
+.prose :where(ol[type="A"]):not(:where([class~="not-prose"] *)) {
+  list-style-type: upper-alpha;
+}
+
+.prose :where(ol[type="a"]):not(:where([class~="not-prose"] *)) {
+  list-style-type: lower-alpha;
+}
+
+.prose :where(ol[type="A" s]):not(:where([class~="not-prose"] *)) {
+  list-style-type: upper-alpha;
+}
+
+.prose :where(ol[type="a" s]):not(:where([class~="not-prose"] *)) {
+  list-style-type: lower-alpha;
+}
+
+.prose :where(ol[type="I"]):not(:where([class~="not-prose"] *)) {
+  list-style-type: upper-roman;
+}
+
+.prose :where(ol[type="i"]):not(:where([class~="not-prose"] *)) {
+  list-style-type: lower-roman;
+}
+
+.prose :where(ol[type="I" s]):not(:where([class~="not-prose"] *)) {
+  list-style-type: upper-roman;
+}
+
+.prose :where(ol[type="i" s]):not(:where([class~="not-prose"] *)) {
+  list-style-type: lower-roman;
+}
+
+.prose :where(ol[type="1"]):not(:where([class~="not-prose"] *)) {
+  list-style-type: decimal;
+}
+
+.prose :where(ul):not(:where([class~="not-prose"] *)) {
+  list-style-type: disc;
+  padding-left: 1.625em;
+}
+
+.prose :where(ol > li):not(:where([class~="not-prose"] *))::marker {
+  font-weight: 400;
+  color: var(--tw-prose-counters);
+}
+
+.prose :where(ul > li):not(:where([class~="not-prose"] *))::marker {
+  color: var(--tw-prose-bullets);
+}
+
+.prose :where(hr):not(:where([class~="not-prose"] *)) {
+  border-color: var(--tw-prose-hr);
+  border-top-width: 1px;
+  margin-top: 3em;
+  margin-bottom: 3em;
+}
+
+.prose :where(blockquote):not(:where([class~="not-prose"] *)) {
+  font-weight: 500;
+  font-style: italic;
+  color: var(--tw-prose-quotes);
+  border-left-width: 0.25rem;
+  border-left-color: var(--tw-prose-quote-borders);
+  quotes: "\201C""\201D""\2018""\2019";
+  margin-top: 1.6em;
+  margin-bottom: 1.6em;
+  padding-left: 1em;
+}
+
+.prose :where(blockquote p:first-of-type):not(:where([class~="not-prose"] *))::before {
+  content: open-quote;
+}
+
+.prose :where(blockquote p:last-of-type):not(:where([class~="not-prose"] *))::after {
+  content: close-quote;
+}
+
+.prose :where(h1):not(:where([class~="not-prose"] *)) {
+  color: var(--tw-prose-headings);
+  font-weight: 800;
+  font-size: 2.25em;
+  margin-top: 0;
+  margin-bottom: 0.8888889em;
+  line-height: 1.1111111;
+}
+
+.prose :where(h1 strong):not(:where([class~="not-prose"] *)) {
+  font-weight: 900;
+}
+
+.prose :where(h2):not(:where([class~="not-prose"] *)) {
+  color: var(--tw-prose-headings);
+  font-weight: 700;
+  font-size: 1.5em;
+  margin-top: 2em;
+  margin-bottom: 1em;
+  line-height: 1.3333333;
+}
+
+.prose :where(h2 strong):not(:where([class~="not-prose"] *)) {
+  font-weight: 800;
+}
+
+.prose :where(h3):not(:where([class~="not-prose"] *)) {
+  color: var(--tw-prose-headings);
+  font-weight: 600;
+  font-size: 1.25em;
+  margin-top: 1.6em;
+  margin-bottom: 0.6em;
+  line-height: 1.6;
+}
+
+.prose :where(h3 strong):not(:where([class~="not-prose"] *)) {
+  font-weight: 700;
+}
+
+.prose :where(h4):not(:where([class~="not-prose"] *)) {
+  color: var(--tw-prose-headings);
+  font-weight: 600;
+  margin-top: 1.5em;
+  margin-bottom: 0.5em;
+  line-height: 1.5;
+}
+
+.prose :where(h4 strong):not(:where([class~="not-prose"] *)) {
+  font-weight: 700;
+}
+
+.prose :where(figure > *):not(:where([class~="not-prose"] *)) {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.prose :where(figcaption):not(:where([class~="not-prose"] *)) {
+  color: var(--tw-prose-captions);
+  font-size: 0.875em;
+  line-height: 1.4285714;
+  margin-top: 0.8571429em;
+}
+
+.prose :where(code):not(:where([class~="not-prose"] *)) {
+  color: var(--tw-prose-code);
+  font-weight: 600;
+  font-size: 0.875em;
+}
+
+.prose :where(code):not(:where([class~="not-prose"] *))::before {
+  content: "`";
+}
+
+.prose :where(code):not(:where([class~="not-prose"] *))::after {
+  content: "`";
+}
+
+.prose :where(a code):not(:where([class~="not-prose"] *)) {
+  color: var(--tw-prose-links);
+}
+
+.prose :where(pre):not(:where([class~="not-prose"] *)) {
+  color: var(--tw-prose-pre-code);
+  background-color: var(--tw-prose-pre-bg);
+  overflow-x: auto;
+  font-weight: 400;
+  font-size: 0.875em;
+  line-height: 1.7142857;
+  margin-top: 1.7142857em;
+  margin-bottom: 1.7142857em;
+  border-radius: 0.375rem;
+  padding-top: 0.8571429em;
+  padding-right: 1.1428571em;
+  padding-bottom: 0.8571429em;
+  padding-left: 1.1428571em;
+}
+
+.prose :where(pre code):not(:where([class~="not-prose"] *)) {
+  background-color: transparent;
+  border-width: 0;
+  border-radius: 0;
+  padding: 0;
+  font-weight: inherit;
+  color: inherit;
+  font-size: inherit;
+  font-family: inherit;
+  line-height: inherit;
+}
+
+.prose :where(pre code):not(:where([class~="not-prose"] *))::before {
+  content: none;
+}
+
+.prose :where(pre code):not(:where([class~="not-prose"] *))::after {
+  content: none;
+}
+
+.prose :where(table):not(:where([class~="not-prose"] *)) {
+  width: 100%;
+  table-layout: auto;
+  text-align: left;
+  margin-top: 2em;
+  margin-bottom: 2em;
+  font-size: 0.875em;
+  line-height: 1.7142857;
+}
+
+.prose :where(thead):not(:where([class~="not-prose"] *)) {
+  border-bottom-width: 1px;
+  border-bottom-color: var(--tw-prose-th-borders);
+}
+
+.prose :where(thead th):not(:where([class~="not-prose"] *)) {
+  color: var(--tw-prose-headings);
+  font-weight: 600;
+  vertical-align: bottom;
+  padding-right: 0.5714286em;
+  padding-bottom: 0.5714286em;
+  padding-left: 0.5714286em;
+}
+
+.prose :where(tbody tr):not(:where([class~="not-prose"] *)) {
+  border-bottom-width: 1px;
+  border-bottom-color: var(--tw-prose-td-borders);
+}
+
+.prose :where(tbody tr:last-child):not(:where([class~="not-prose"] *)) {
+  border-bottom-width: 0;
+}
+
+.prose :where(tbody td):not(:where([class~="not-prose"] *)) {
+  vertical-align: baseline;
+  padding-top: 0.5714286em;
+  padding-right: 0.5714286em;
+  padding-bottom: 0.5714286em;
+  padding-left: 0.5714286em;
+}
+
+.prose {
+  --tw-prose-body: #374151;
+  --tw-prose-headings: #111827;
+  --tw-prose-lead: #4b5563;
+  --tw-prose-links: #111827;
+  --tw-prose-bold: #111827;
+  --tw-prose-counters: #6b7280;
+  --tw-prose-bullets: #d1d5db;
+  --tw-prose-hr: #e5e7eb;
+  --tw-prose-quotes: #111827;
+  --tw-prose-quote-borders: #e5e7eb;
+  --tw-prose-captions: #6b7280;
+  --tw-prose-code: #111827;
+  --tw-prose-pre-code: #e5e7eb;
+  --tw-prose-pre-bg: #1f2937;
+  --tw-prose-th-borders: #d1d5db;
+  --tw-prose-td-borders: #e5e7eb;
+  --tw-prose-invert-body: #d1d5db;
+  --tw-prose-invert-headings: #fff;
+  --tw-prose-invert-lead: #9ca3af;
+  --tw-prose-invert-links: #fff;
+  --tw-prose-invert-bold: #fff;
+  --tw-prose-invert-counters: #9ca3af;
+  --tw-prose-invert-bullets: #4b5563;
+  --tw-prose-invert-hr: #374151;
+  --tw-prose-invert-quotes: #f3f4f6;
+  --tw-prose-invert-quote-borders: #374151;
+  --tw-prose-invert-captions: #9ca3af;
+  --tw-prose-invert-code: #fff;
+  --tw-prose-invert-pre-code: #d1d5db;
+  --tw-prose-invert-pre-bg: rgb(0 0 0 / 50%);
+  --tw-prose-invert-th-borders: #4b5563;
+  --tw-prose-invert-td-borders: #374151;
+  font-size: 1rem;
+  line-height: 1.75;
+}
+
+.prose :where(p):not(:where([class~="not-prose"] *)) {
+  margin-top: 1.25em;
+  margin-bottom: 1.25em;
+}
+
+.prose :where(img):not(:where([class~="not-prose"] *)) {
+  margin-top: 2em;
+  margin-bottom: 2em;
+}
+
+.prose :where(video):not(:where([class~="not-prose"] *)) {
+  margin-top: 2em;
+  margin-bottom: 2em;
+}
+
+.prose :where(figure):not(:where([class~="not-prose"] *)) {
+  margin-top: 2em;
+  margin-bottom: 2em;
+}
+
+.prose :where(h2 code):not(:where([class~="not-prose"] *)) {
+  font-size: 0.875em;
+}
+
+.prose :where(h3 code):not(:where([class~="not-prose"] *)) {
+  font-size: 0.9em;
+}
+
+.prose :where(li):not(:where([class~="not-prose"] *)) {
+  margin-top: 0.5em;
+  margin-bottom: 0.5em;
+}
+
+.prose :where(ol > li):not(:where([class~="not-prose"] *)) {
+  padding-left: 0.375em;
+}
+
+.prose :where(ul > li):not(:where([class~="not-prose"] *)) {
+  padding-left: 0.375em;
+}
+
+.prose > :where(ul > li p):not(:where([class~="not-prose"] *)) {
+  margin-top: 0.75em;
+  margin-bottom: 0.75em;
+}
+
+.prose > :where(ul > li > *:first-child):not(:where([class~="not-prose"] *)) {
+  margin-top: 1.25em;
+}
+
+.prose > :where(ul > li > *:last-child):not(:where([class~="not-prose"] *)) {
+  margin-bottom: 1.25em;
+}
+
+.prose > :where(ol > li > *:first-child):not(:where([class~="not-prose"] *)) {
+  margin-top: 1.25em;
+}
+
+.prose > :where(ol > li > *:last-child):not(:where([class~="not-prose"] *)) {
+  margin-bottom: 1.25em;
+}
+
+.prose :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"] *)) {
+  margin-top: 0.75em;
+  margin-bottom: 0.75em;
+}
+
+.prose :where(hr + *):not(:where([class~="not-prose"] *)) {
+  margin-top: 0;
+}
+
+.prose :where(h2 + *):not(:where([class~="not-prose"] *)) {
+  margin-top: 0;
+}
+
+.prose :where(h3 + *):not(:where([class~="not-prose"] *)) {
+  margin-top: 0;
+}
+
+.prose :where(h4 + *):not(:where([class~="not-prose"] *)) {
+  margin-top: 0;
+}
+
+.prose :where(thead th:first-child):not(:where([class~="not-prose"] *)) {
+  padding-left: 0;
+}
+
+.prose :where(thead th:last-child):not(:where([class~="not-prose"] *)) {
+  padding-right: 0;
+}
+
+.prose :where(tbody td:first-child):not(:where([class~="not-prose"] *)) {
+  padding-left: 0;
+}
+
+.prose :where(tbody td:last-child):not(:where([class~="not-prose"] *)) {
+  padding-right: 0;
+}
+
+.prose > :where(:first-child):not(:where([class~="not-prose"] *)) {
+  margin-top: 0;
+}
+
+.prose > :where(:last-child):not(:where([class~="not-prose"] *)) {
+  margin-bottom: 0;
+}
+
+.prose-zinc {
+  --tw-prose-body: #3f3f46;
+  --tw-prose-headings: #18181b;
+  --tw-prose-lead: #52525b;
+  --tw-prose-links: #18181b;
+  --tw-prose-bold: #18181b;
+  --tw-prose-counters: #71717a;
+  --tw-prose-bullets: #d4d4d8;
+  --tw-prose-hr: #e4e4e7;
+  --tw-prose-quotes: #18181b;
+  --tw-prose-quote-borders: #e4e4e7;
+  --tw-prose-captions: #71717a;
+  --tw-prose-code: #18181b;
+  --tw-prose-pre-code: #e4e4e7;
+  --tw-prose-pre-bg: #27272a;
+  --tw-prose-th-borders: #d4d4d8;
+  --tw-prose-td-borders: #e4e4e7;
+  --tw-prose-invert-body: #d4d4d8;
+  --tw-prose-invert-headings: #fff;
+  --tw-prose-invert-lead: #a1a1aa;
+  --tw-prose-invert-links: #fff;
+  --tw-prose-invert-bold: #fff;
+  --tw-prose-invert-counters: #a1a1aa;
+  --tw-prose-invert-bullets: #52525b;
+  --tw-prose-invert-hr: #3f3f46;
+  --tw-prose-invert-quotes: #f4f4f5;
+  --tw-prose-invert-quote-borders: #3f3f46;
+  --tw-prose-invert-captions: #a1a1aa;
+  --tw-prose-invert-code: #fff;
+  --tw-prose-invert-pre-code: #d4d4d8;
+  --tw-prose-invert-pre-bg: rgb(0 0 0 / 50%);
+  --tw-prose-invert-th-borders: #52525b;
+  --tw-prose-invert-td-borders: #3f3f46;
+}
+
+.fixed {
+  position: fixed;
+}
+
+.absolute {
+  position: absolute;
+}
+
+.relative {
+  position: relative;
+}
+
+.inset-0 {
+  top: 0px;
+  right: 0px;
+  bottom: 0px;
+  left: 0px;
+}
+
+.inset-x-8 {
+  left: 2rem;
+  right: 2rem;
+}
+
+.inset-x-0 {
+  left: 0px;
+  right: 0px;
+}
+
+.top-0 {
+  top: 0px;
+}
+
+.bottom-16 {
+  bottom: 4rem;
+}
+
+.top-full {
+  top: 100%;
+}
+
+.z-50 {
+  z-index: 50;
+}
+
+.z-40 {
+  z-index: 40;
+}
+
+.mx-auto {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.my-0 {
+  margin-top: 0px;
+  margin-bottom: 0px;
+}
+
+.my-10 {
+  margin-top: 2.5rem;
+  margin-bottom: 2.5rem;
+}
+
+.\!my-0 {
+  margin-top: 0px !important;
+  margin-bottom: 0px !important;
+}
+
+.mx-1 {
+  margin-left: 0.25rem;
+  margin-right: 0.25rem;
+}
+
+.mx-6 {
+  margin-left: 1.5rem;
+  margin-right: 1.5rem;
+}
+
+.mb-20 {
+  margin-bottom: 5rem;
+}
+
+.mr-5 {
+  margin-right: 1.25rem;
+}
+
+.mt-1 {
+  margin-top: 0.25rem;
+}
+
+.mb-2\.5 {
+  margin-bottom: 0.625rem;
+}
+
+.mb-2 {
+  margin-bottom: 0.5rem;
+}
+
+.mt-20 {
+  margin-top: 5rem;
+}
+
+.ml-auto {
+  margin-left: auto;
+}
+
+.mb-16 {
+  margin-bottom: 4rem;
+}
+
+.mt-12 {
+  margin-top: 3rem;
+}
+
+.mr-1\.5 {
+  margin-right: 0.375rem;
+}
+
+.mb-1\.5 {
+  margin-bottom: 0.375rem;
+}
+
+.mr-1 {
+  margin-right: 0.25rem;
+}
+
+.mb-1 {
+  margin-bottom: 0.25rem;
+}
+
+.mt-16 {
+  margin-top: 4rem;
+}
+
+.ml-1\.5 {
+  margin-left: 0.375rem;
+}
+
+.ml-1 {
+  margin-left: 0.25rem;
+}
+
+.mr-auto {
+  margin-right: auto;
+}
+
+.ml-7 {
+  margin-left: 1.75rem;
+}
+
+.-mr-8 {
+  margin-right: -2rem;
+}
+
+.block {
+  display: block;
+}
+
+.flex {
+  display: flex;
+}
+
+.\!h-20 {
+  height: 5rem !important;
+}
+
+.h-\[5rem\] {
+  height: 5rem;
+}
+
+.h-\[1\.4rem\] {
+  height: 1.4rem;
+}
+
+.h-full {
+  height: 100%;
+}
+
+.h-8 {
+  height: 2rem;
+}
+
+.min-h-\[calc\(100\%-10rem\)\] {
+  min-height: calc(100% - 10rem);
+}
+
+.\!w-20 {
+  width: 5rem !important;
+}
+
+.w-1\/2 {
+  width: 50%;
+}
+
+.w-\[1\.4rem\] {
+  width: 1.4rem;
+}
+
+.w-\[5rem\] {
+  width: 5rem;
+}
+
+.w-8 {
+  width: 2rem;
+}
+
+.max-w-3xl {
+  max-width: 48rem;
+}
+
+.shrink-0 {
+  flex-shrink: 0;
+}
+
+.-translate-x-\[1px\] {
+  --tw-translate-x: -1px;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.-translate-y-0\.5 {
+  --tw-translate-y: -0.125rem;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.-translate-y-0 {
+  --tw-translate-y: -0px;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.cursor-pointer {
+  cursor: pointer;
+}
+
+.select-none {
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+}
+
+.flex-col {
+  flex-direction: column;
+}
+
+.flex-wrap {
+  flex-wrap: wrap;
+}
+
+.items-center {
+  align-items: center;
+}
+
+.justify-end {
+  justify-content: flex-end;
+}
+
+.justify-center {
+  justify-content: center;
+}
+
+.gap-2\.5 {
+  gap: 0.625rem;
+}
+
+.gap-2 {
+  gap: 0.5rem;
+}
+
+.space-x-10 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 0;
+  margin-right: calc(2.5rem * var(--tw-space-x-reverse));
+  margin-left: calc(2.5rem * calc(1 - var(--tw-space-x-reverse)));
+}
+
+.rounded-full {
+  border-radius: 9999px;
+}
+
+.rounded-lg {
+  border-radius: 0.5rem;
+}
+
+.bg-zinc-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(244 244 245 / var(--tw-bg-opacity));
+}
+
+.p-6 {
+  padding: 1.5rem;
+}
+
+.px-8 {
+  padding-left: 2rem;
+  padding-right: 2rem;
+}
+
+.px-4 {
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
+.py-2 {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+}
+
+.pt-16 {
+  padding-top: 4rem;
+}
+
+.pb-40 {
+  padding-bottom: 10rem;
+}
+
+.pb-1 {
+  padding-bottom: 0.25rem;
+}
+
+.pb-2 {
+  padding-bottom: 0.5rem;
+}
+
+.pr-3 {
+  padding-right: 0.75rem;
+}
+
+.pl-3 {
+  padding-left: 0.75rem;
+}
+
+.pb-16 {
+  padding-bottom: 4rem;
+}
+
+.text-center {
+  text-align: center;
+}
+
+.text-9xl {
+  font-size: 8rem;
+  line-height: 1;
+}
+
+.text-sm {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+
+.text-3xl {
+  font-size: 1.875rem;
+  line-height: 2.25rem;
+}
+
+.text-\[0\.9em\] {
+  font-size: 0.9em;
+}
+
+.text-lg {
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+}
+
+.font-bold {
+  font-weight: 700;
+}
+
+.font-medium {
+  font-weight: 500;
+}
+
+.\!leading-none {
+  line-height: 1 !important;
+}
+
+.leading-\[5rem\] {
+  line-height: 5rem;
+}
+
+.text-black {
+  --tw-text-opacity: 1;
+  color: rgb(0 0 0 / var(--tw-text-opacity));
+}
+
+.text-zinc-500 {
+  --tw-text-opacity: 1;
+  color: rgb(113 113 122 / var(--tw-text-opacity));
+}
+
+.no-underline {
+  -webkit-text-decoration-line: none;
+          text-decoration-line: none;
+}
+
+.duration-200 {
+  transition-duration: 200ms;
+}
+
+.ease-out {
+  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
+}
+
+.\[background\:url\(\.\/theme\.svg\)_left_center\/cover_no-repeat\] {
+  background: url(./theme.svg) left center/cover no-repeat;
+}
+
+.\[background\:var\(--url\)_center_center\/cover_no-repeat\] {
+  background: var(--url) center center/cover no-repeat;
+}
+
+html,
+body {
+  height: 100%;
+}
+
+html {
+  -webkit-tap-highlight-color: transparent;
+  background: #fffefc;
+}
+
+html.dark {
+  background: #000;
+}
+
+.not-ready,
+.not-ready * {
+  transition: none !important;
+}
+
+.btn {
+  border-radius: 9999px;
+  --tw-bg-opacity: 1;
+  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+  -webkit-text-decoration-line: none;
+          text-decoration-line: none;
+  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  transition-duration: 100ms;
+}
+
+.btn:active {
+  --tw-scale-x: .95;
+  --tw-scale-y: .95;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.dark .btn {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+  --tw-text-opacity: 1;
+  color: rgb(0 0 0 / var(--tw-text-opacity));
+}
+
+.link {
+  transition-duration: 200ms;
+}
+
+.link:hover {
+  --tw-text-opacity: 1;
+  color: rgb(0 0 0 / var(--tw-text-opacity));
+}
+
+.dark .link:hover {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
+
+.btn-menu::before, 
+.btn-menu::after {
+  display: block;
+  height: 2px;
+  width: 1.25rem;
+  --tw-bg-opacity: 1;
+  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
+  transition-duration: 200ms;
+  --tw-content: '';
+  content: var(--tw-content);
+}
+
+.dark .btn-menu::before, .dark 
+.btn-menu::after {
+  --tw-invert: invert(100%);
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+
+.nav-wrapper {
+  background: #fffefc;
+}
+
+.open {
+  overflow: hidden;
+}
+
+.open .btn-menu::before {
+  width: 1.5rem;
+  --tw-translate-y: 5.5px;
+  --tw-rotate: 45deg;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.open .btn-menu::after {
+  width: 1.5rem;
+  --tw-translate-y: -5.5px;
+  --tw-rotate: -45deg;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.open .nav-wrapper {
+  top: 0px;
+}
+
+article pre {
+  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  padding: 2rem !important;
+  margin-inline: calc(2rem * -1);
+}
+
+article blockquote {
+  padding: 0 0 0 calc(2rem - 3px) !important;
+  margin: 0 0 0 calc(2rem * -1) !important;
+  border-color: #27272a !important;
+}
+
+.first-of-type\:mt-0:first-of-type {
+  margin-top: 0px;
+}
+
+.last-of-type\:mb-0:last-of-type {
+  margin-bottom: 0px;
+}
+
+.dark .dark\:prose-invert {
+  --tw-prose-body: var(--tw-prose-invert-body);
+  --tw-prose-headings: var(--tw-prose-invert-headings);
+  --tw-prose-lead: var(--tw-prose-invert-lead);
+  --tw-prose-links: var(--tw-prose-invert-links);
+  --tw-prose-bold: var(--tw-prose-invert-bold);
+  --tw-prose-counters: var(--tw-prose-invert-counters);
+  --tw-prose-bullets: var(--tw-prose-invert-bullets);
+  --tw-prose-hr: var(--tw-prose-invert-hr);
+  --tw-prose-quotes: var(--tw-prose-invert-quotes);
+  --tw-prose-quote-borders: var(--tw-prose-invert-quote-borders);
+  --tw-prose-captions: var(--tw-prose-invert-captions);
+  --tw-prose-code: var(--tw-prose-invert-code);
+  --tw-prose-pre-code: var(--tw-prose-invert-pre-code);
+  --tw-prose-pre-bg: var(--tw-prose-invert-pre-bg);
+  --tw-prose-th-borders: var(--tw-prose-invert-th-borders);
+  --tw-prose-td-borders: var(--tw-prose-invert-td-borders);
+}
+
+.dark .dark\:border {
+  border-width: 1px;
+}
+
+.dark .dark\:border-zinc-700 {
+  --tw-border-opacity: 1;
+  border-color: rgb(63 63 70 / var(--tw-border-opacity));
+}
+
+.dark .dark\:bg-zinc-800 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(39 39 42 / var(--tw-bg-opacity));
+}
+
+.dark .dark\:bg-black {
+  --tw-bg-opacity: 1;
+  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
+}
+
+.dark .dark\:text-white {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
+
+.dark .dark\:invert {
+  --tw-invert: invert(100%);
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+
+.dark .dark\:\[background-position\:right\] {
+  background-position: right;
+}
+
+@media (min-width: 1024px) {
+  .lg\:static {
+    position: static;
+  }
+
+  .lg\:ml-14 {
+    margin-left: 3.5rem;
+  }
+
+  .lg\:mt-0 {
+    margin-top: 0px;
+  }
+
+  .lg\:flex {
+    display: flex;
+  }
+
+  .lg\:hidden {
+    display: none;
+  }
+
+  .lg\:h-auto {
+    height: auto;
+  }
+
+  .lg\:h-6 {
+    height: 1.5rem;
+  }
+
+  .lg\:w-6 {
+    width: 1.5rem;
+  }
+
+  .lg\:flex-row {
+    flex-direction: row;
+  }
+
+  .lg\:items-center {
+    align-items: center;
+  }
+
+  .lg\:justify-center {
+    justify-content: center;
+  }
+
+  .lg\:space-x-7 > :not([hidden]) ~ :not([hidden]) {
+    --tw-space-x-reverse: 0;
+    margin-right: calc(1.75rem * var(--tw-space-x-reverse));
+    margin-left: calc(1.75rem * calc(1 - var(--tw-space-x-reverse)));
+  }
+
+  .lg\:\!bg-transparent {
+    background-color: transparent !important;
+  }
+
+  .lg\:pb-0 {
+    padding-bottom: 0px;
+  }
+
+  .lg\:text-base {
+    font-size: 1rem;
+    line-height: 1.5rem;
+  }
+
+  .lg\:font-normal {
+    font-weight: 400;
+  }
+
+  .lg\:transition-none {
+    transition-property: none;
+  }
+}
diff --git a/exampleSite/config.toml b/exampleSite/config.toml
index 428a939..23de199 100644
--- a/exampleSite/config.toml
+++ b/exampleSite/config.toml
@@ -18,6 +18,12 @@ title = "Paper"
   twitter = 'nanxiaobei'
   github = 'nanxiaobei'
   instagram = 'nan.xiaobei'
+  rss = true
+
+  avatar = 'nanxiaobei@gmail.com'
+  name = 'Lee'
+  bio = 'Discover fresh context'
+
 # ------------------------------
 
 # needed to  render raw HTML (e.g. <sub>, <sup>, <kbd>, <mark>)
@@ -33,6 +39,11 @@ title = "Paper"
     name = "About"
     url = "/about/"
     weight = 10
+  [[menu.main]]
+    identifier = "contact"
+    name = "Contact"
+    url = "/contact/"
+    weight = 10
 
 [taxonomies]
 category = "categories"
diff --git a/exampleSite/content/contact.md b/exampleSite/content/contact.md
new file mode 100644
index 0000000..f5ae177
--- /dev/null
+++ b/exampleSite/content/contact.md
@@ -0,0 +1,10 @@
++++
+title = "Contact"
+description = "Hugo, the world's fastest framework for building websites"
+date = "2019-02-28"
+aliases = ["about-us", "about-hugo", "contact"]
+author = "lee.so"
++++
+
+- [github.com/nanxiaobei](https://github.com/nanxiaobei)
+- [lee.so](https://lee.so)
diff --git a/layouts/404.html b/layouts/404.html
index 1611a41..23add42 100644
--- a/layouts/404.html
+++ b/layouts/404.html
@@ -1,3 +1,3 @@
 {{ define "main" }}
-<h1 class="title-404">404</h1>
+<h1 class="absolute inset-x-8 top-0 bottom-16 flex items-center justify-center text-9xl">404</h1>
 {{ end }}
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index 5ce4605..f3b6120 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -1,20 +1,37 @@
 <!DOCTYPE html>
 
-{{ $.Scratch.Delete "social-list" }}<!---->
-{{ $social := slice "twitter" "github" "instagram" }}<!---->
-{{ range $social }}<!---->
+{{ $.Scratch.Delete "social_list" }}<!---->
+{{ $.Scratch.Delete "avatar_url" }}<!---->
+
+<!-- social_list -->
+{{ $socialParams := slice "twitter" "github" "instagram" "rss" }}<!---->
+{{ range $socialParams }}<!---->
 {{ if isset site.Params . }}<!---->
-{{ $.Scratch.Add "social-list" (slice .) }}<!---->
+{{ $.Scratch.Add "social_list" (slice .) }}<!---->
 {{ end }}<!---->
 {{ end }}<!---->
 
-<html lang="{{ site.LanguageCode }}">
+<!-- avatar_url -->
+{{ if site.Params.avatar }}<!---->
+{{ if in site.Params.avatar "http" }}<!---->
+{{ $.Scratch.Set "avatar_url" site.Params.avatar }}<!---->
+{{ else }}<!---->
+{{ $md5 := (md5 site.Params.avatar) }}<!---->
+{{ $url := print "https://www.gravatar.com/avatar/" $md5 "?s=160&d=identicon" }}<!---->
+{{ $.Scratch.Set "avatar_url" $url }}<!---->
+{{ end }}<!---->
+{{ end }}<!---->
+
+<html class="not-ready text-sm lg:text-base" lang="{{ site.LanguageCode }}">
   {{ partial "head.html" . }}
-
-  <body class="not-ready" data-menu="{{ isset site.Menus `main` }}">
+  <body class="text-black duration-200 ease-out dark:text-white">
     {{ partial "header.html" . }}
 
-    <main class="main">{{ block "main" . }}{{ end }}</main>
+    <main
+      class="prose prose-zinc relative mx-auto min-h-[calc(100%-10rem)] max-w-3xl px-8 pt-16 pb-40 dark:prose-invert"
+    >
+      {{ block "main" . }}{{ end }}
+    </main>
 
     {{ partial "footer.html" . }}
   </body>
diff --git a/layouts/_default/list.html b/layouts/_default/list.html
index 1158de7..ab1936f 100644
--- a/layouts/_default/list.html
+++ b/layouts/_default/list.html
@@ -2,31 +2,57 @@
 
 <!-- Main Title -->
 {{ if .Title }}
-<h1 class="main-title">{{ .Title }}</h1>
+<h1 class="mb-20">{{ .Title }}</h1>
 {{ end }}
 
 <!-- $pages -->
-{{ $pages := union .RegularPages .Sections }}
-<!---->{{ if .IsHome }} {{ $pages = where site.RegularPages "Type" "in" site.Params.mainSections }}
+{{ $pages := union .RegularPages .Sections }}<!---->
+{{ if .IsHome }}<!---->
+{{ $pages = where site.RegularPages "Type" "in" site.Params.mainSections }}<!---->
 {{ end }}
 
 <!-- Articles -->
-{{ $paginator := .Paginate $pages }} {{ range $index, $page := $paginator.Pages }}
-<article class="post-entry">
-  <h2>{{ .Title }}</h2>
-  <time>{{ .Date | time.Format ":date_medium" }}</time>
-  <a href="{{ .Permalink }}"></a>
+{{ $paginator := .Paginate $pages }} {{ range $index, $page := $paginator.Pages }}<!---->
+
+<!-- avatar -->
+{{ if and $.IsHome (eq $paginator.PageNumber 1) (eq $index 0) }}<!---->
+
+{{ $avatar_url := $.Scratch.Get `avatar_url` }}<!---->
+{{ if or $avatar_url site.Params.name }}
+<div class="mb-20 flex">
+  {{ if $avatar_url }}
+  <img
+    class="my-0 mr-5 !h-20 !w-20 rounded-full bg-zinc-100 dark:border dark:border-zinc-700"
+    src="{{ $avatar_url }}"
+    alt="avatar"
+  />
+  {{ end }}<!---->
+  {{ if site.Params.name }}
+  <div>
+    <h1 class="mt-1 mb-2.5 text-3xl font-bold">{{ site.Params.name }}</h1>
+    <div>{{ site.Params.bio | default (print "Personal blog by " site.Params.name) }}</div>
+  </div>
+  {{ end }}
+</div>
+{{ end }}<!---->
+
+{{ end }}
+
+<article class="relative my-10 first-of-type:mt-0 last-of-type:mb-0">
+  <h2 class="!my-0 pb-1 !leading-none">{{ .Title }}</h2>
+  <time class="text-sm text-zinc-500">{{ .Date | time.Format ":date_medium" }}</time>
+  <a class="absolute inset-0" href="{{ .Permalink }}"></a>
 </article>
 {{ end }}
 
 <!-- Main Nav -->
 {{ if gt $paginator.TotalPages 1 }}
-<nav class="main-nav">
+<nav class="mt-20 flex">
   {{ if $paginator.HasPrev }}
-  <a class="prev" href="{{ $paginator.Prev.URL }}">← {{ i18n "prev_page" }}</a>
+  <a class="btn" href="{{ $paginator.Prev.URL }}">← {{ i18n "prev_page" }}</a>
   {{ end }}<!---->
   {{ if $paginator.HasNext }}
-  <a class="next" href="{{ $paginator.Next.URL }}">{{ i18n "next_page" }} →</a>
+  <a class="btn ml-auto" href="{{ $paginator.Next.URL }}">{{ i18n "next_page" }} →</a>
   {{ end }}
 </nav>
 {{ end }}<!---->
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index d1b471e..0768923 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -1,24 +1,33 @@
 {{ define "main" }}
 
-<article class="post-single">
-  <header class="post-title">
-    <p>
+<article>
+  <header class="mb-16">
+    <h1 class="!my-0 pb-2">{{ .Title }}</h1>
+
+    {{ if ne .Type "page" }}
+    <div class="text-[0.9em] text-zinc-500">
       {{ if .Date }}
       <time>{{ .Date | time.Format ":date_medium" }}</time>
-      {{ end }}
+      {{ end }}<!---->
       {{ if or .Params.Author site.Author.name }}
+      <span class="mx-1">&middot;</span>
       <span>{{ .Params.Author | default site.Author.name }}</span>
       {{ end }}
-    </p>
-    <h1>{{ .Title }}</h1>
+    </div>
+    {{ end }}
   </header>
-  <section class="post-content">{{ .Content }}</section>
+
+  <section>{{ .Content }}</section>
 
   <!-- Post Tags -->
   {{ if .Params.tags }}
-  <footer class="post-tags">
+  <footer class="mt-12 flex flex-wrap">
     {{ range .Params.tags }} {{ $href := print (absURL "tags/") (urlize .) }}
-    <a href="{{ $href }}">{{ . }}</a>
+    <a
+      class="mr-1.5 mb-1.5 rounded-lg bg-zinc-100 px-4 py-2 no-underline dark:bg-zinc-800"
+      href="{{ $href }}"
+      >{{ . }}</a
+    >
     {{ end }}
   </footer>
   {{ end }}
@@ -26,21 +35,28 @@
   <!-- Post Nav -->
   {{ $pages := where site.RegularPages "Type" "in" site.Params.mainSections }}<!---->
   {{ if and (gt (len $pages) 1) (in $pages . ) }}
-  <nav class="post-nav">
+  <nav class="mt-16 flex rounded-lg bg-zinc-100 text-lg dark:bg-zinc-800">
     {{ with $pages.Next . }}
-    <a class="prev" href="{{ .Permalink }}"><span>←</span><span>{{ .Name }}</span></a>
-    {{ end }} {{ with $pages.Prev . }}
-    <a class="next" href="{{ .Permalink }}"><span>{{ .Name }}</span><span>→</span></a>
+    <a class="flex w-1/2 items-center p-6 pr-3 font-bold no-underline" href="{{ .Permalink }}"
+      ><span class="mr-1.5">←</span><span>{{ .Name }}</span></a
+    >
+    {{ end }}<!---->
+    {{ with $pages.Prev . }}
+    <a
+      class="ml-auto flex w-1/2 items-center justify-end p-6 pl-3 font-bold no-underline"
+      href="{{ .Permalink }}"
+      ><span>{{ .Name }}</span><span class="ml-1.5">→</span></a
+    >
     {{ end }}
   </nav>
   {{ end }}
 
   <!-- Disqus -->
   {{ if and site.DisqusShortname (not (eq .Params.comments false)) }}
-  <div id="disqus_thread" class="post-comments"></div>
+  <div id="disqus_thread"></div>
   <script>
-    var disqusShortname = '{{ site.DisqusShortname }}';
-    var script = document.createElement('script');
+    const disqusShortname = '{{ site.DisqusShortname }}';
+    const script = document.createElement('script');
     script.src = 'https://' + disqusShortname + '.disqus.com/embed.js';
     script.setAttribute('data-timestamp', +new Date());
     document.head.appendChild(script);
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
index 4804890..2d986d3 100644
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@@ -1,7 +1,11 @@
-<footer class="footer">
-  <p>&copy; {{ now.Year }} <a href="{{ `` | absURL }}">{{ site.Title }}</a></p>
-  <p>Powered by <a href="https://gohugo.io/" rel="noopener" target="_blank">Hugo️️</a>️</p>
-  <p>
-    <a href="https://github.com/nanxiaobei/hugo-paper" rel="noopener" target="_blank">Paper 5.1</a>
-  </p>
+<footer class="mx-auto flex h-[5rem] max-w-3xl items-center px-8 text-sm text-zinc-500">
+  <div class="mr-auto">
+    &copy; {{ now.Year }}
+    <a class="link" href="{{ `` | absURL }}">{{ site.Title }}</a>
+  </div>
+  <a class="link mx-6" href="https://gohugo.io/" rel="noopener" target="_blank">Powered by Hugo️️</a
+  >️
+  <a class="link" href="https://github.com/nanxiaobei/hugo-paper" rel="noopener" target="_blank"
+    >▷ Paper 6</a
+  >
 </footer>
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index af9acc0..1ec7cae 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -7,6 +7,7 @@
   <title>{{ if not .IsHome }}{{ .Title }} - {{ end }}{{ site.Title }}</title>
 
   <!-- Meta -->
+  <meta name="theme-color" />
   {{ if eq .Kind "page" }}
   <meta name="description" content="{{ .Summary }}" />
   <meta name="author" content="{{ .Params.Author | default site.Author.name }}" />
@@ -16,15 +17,14 @@
   {{ end }}
 
   <!-- Styles & Scripts -->
-  {{ $app_css := resources.Get "app.css" }}
+  {{ $main_css := resources.Get "main.css" }}
   <!---->
   {{ $custom_css := resources.Get "custom.css" }}
   <!---->
-  {{ $css := slice $app_css $custom_css | resources.Concat "app.css" | minify }}
+  {{ $css := slice $main_css $custom_css | resources.Concat "main.css" | minify }}
   <link rel="preload stylesheet" as="style" href="{{ $css.Permalink }}" />
 
   {{ if and .IsPage (not site.Params.disableHLJS) }}
-  <link rel="preload stylesheet" as="style" href="{{ `an-old-hope.min.css` | absURL }}" />
   <script
     defer
     src="{{ `highlight.min.js` | absURL }}"
@@ -33,9 +33,16 @@
   {{ end }}
 
   <!-- Preload -->
-  <link rel="preload" as="image" href="{{ `theme.png` | absURL }}" />
+  <link rel="preload" as="image" href="{{ `theme.svg` | absURL }}" />
 
-  {{ range $.Scratch.Get "social-list" }}
+  {{ $avatar_url := $.Scratch.Get "avatar_url" }}
+  <!---->
+  {{ if $avatar_url }}
+  <link rel="preload" as="image" href="{{ $avatar_url }}" />
+  {{ end }}
+  <!---->
+
+  {{ range $.Scratch.Get "social_list" }}
   <link rel="preload" as="image" href="{{ printf `%s.svg` . | absURL }}" />
   {{ end }}
 
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index 6c42ebf..2f84aad 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -1,51 +1,82 @@
-<header class="header">
-  {{ if .IsHome }}
-  <h1 class="logo">
-    <a class="site-name" href="{{ `` | absURL }}">{{ site.Title }}</a><a class="btn-dark"></a>
-  </h1>
-  {{ else }}
-  <p class="logo">
-    <a class="site-name" href="{{ `` | absURL }}">{{ site.Title }}</a><a class="btn-dark"></a>
-  </p>
-  {{ end }}
+<header class="mx-auto flex h-[5rem] max-w-3xl px-8 lg:justify-center">
+  <div class="relative z-50 mr-auto flex items-center">
+    <a class="-translate-x-[1px] -translate-y-0.5 text-3xl font-bold" href="{{ `` | absURL }}"
+      >{{ site.Title }}</a
+    >
+    <a
+      class="btn-dark ml-7 h-[1.4rem] w-[1.4rem] shrink-0 cursor-pointer [background:url(./theme.svg)_left_center/cover_no-repeat] dark:invert dark:[background-position:right]"
+    ></a>
+  </div>
+
+  <a
+    class="btn-menu relative z-50 -mr-8 flex h-[5rem] w-[5rem] shrink-0 cursor-pointer flex-col items-center justify-center gap-2.5 lg:hidden"
+  ></a>
 
   <script>
-    let bodyClx = document.body.classList;
-    let btnDark = document.querySelector('.btn-dark');
-    let sysDark = window.matchMedia('(prefers-color-scheme: dark)');
-    let darkVal = localStorage.getItem('dark');
+    const metaTheme = document.querySelector('meta[name="theme-color"]');
+    const htmlClass = document.documentElement.classList;
+    requestAnimationFrame(() => {
+      htmlClass.remove('not-ready');
+    });
 
-    let setDark = (isDark) => {
-      bodyClx[isDark ? 'add' : 'remove']('dark');
-      localStorage.setItem('dark', isDark ? 'yes' : 'no');
+    const setDark = (newDark) => {
+      metaTheme.setAttribute('content', newDark ? '#000' : '#FCFAF9');
+      htmlClass[newDark ? 'add' : 'remove']('dark');
+      localStorage.setItem('dark', newDark);
     };
 
-    setDark(darkVal ? darkVal === 'yes' : sysDark.matches);
-    requestAnimationFrame(() => bodyClx.remove('not-ready'));
+    // init
+    const darkScheme = window.matchMedia('(prefers-color-scheme: dark)');
+    const darkVal = localStorage.getItem('dark');
+    setDark(darkVal ? darkVal === 'true' : darkScheme.matches);
 
-    btnDark.addEventListener('click', () => setDark(!bodyClx.contains('dark')));
-    sysDark.addEventListener('change', (event) => setDark(event.matches));
+    // listen system
+    darkScheme.addEventListener('change', (event) => {
+      setDark(event.matches);
+    });
+
+    // manual switch
+    const btnDark = document.querySelector('.btn-dark');
+    btnDark.addEventListener('click', () => {
+      setDark(localStorage.getItem('dark') !== 'true');
+    });
+
+    // mobile menu
+    const btnMenu = document.querySelector('.btn-menu');
+    btnMenu.addEventListener('click', () => {
+      htmlClass.toggle('open');
+    });
   </script>
 
-  {{ $url := .RelPermalink }}<!---->
-  {{ with site.Menus.main }}
-  <nav class="menu">
-    {{ range . }}
-    <a class="{{ if eq .URL $url }}active{{ end }}" href="{{ .URL }}">{{ .Name }}</a>
-    {{ end }}
-  </nav>
-  {{ end }}<!---->
+  <div
+    class="nav-wrapper fixed inset-x-0 top-full z-40 flex h-full select-none flex-col justify-center pb-16 duration-200 dark:bg-black lg:static lg:h-auto lg:flex-row lg:!bg-transparent lg:pb-0 lg:transition-none"
+  >
+    {{ $url := .RelPermalink }}<!---->
+    {{ with site.Menus.main }}
+    <nav class="lg:ml-14 lg:flex lg:flex-row lg:items-center lg:space-x-7">
+      {{ range . }}
+      <a
+        class="block font-medium lg:font-normal text-center leading-[5rem] text-3xl lg:text-base {{ if eq .URL $url }}active{{ end }}"
+        href="{{ .URL }}"
+        >{{ .Name }}</a
+      >
+      {{ end }}
+    </nav>
+    {{ end }}<!---->
 
-  {{ with $.Scratch.Get "social-list" }}
-  <nav class="social">
-    {{ range . }}
-    <a
-      class="{{ . }}"
-      style="--url: url(./{{ . }}.svg)"
-      href="https://{{ . }}.com/{{ site.Params.Get . }}"
-      target="_blank"
-    ></a>
-    {{ end }}
-  </nav>
-  {{ end }}
+    {{ with $.Scratch.Get "social_list" }}
+    <nav
+      class="mt-12 flex justify-center space-x-10 dark:invert lg:mt-0 lg:ml-14 lg:items-center lg:space-x-7"
+    >
+      {{ range . }}<!---->
+      <a
+        class="h-8 w-8 [background:var(--url)_center_center/cover_no-repeat] lg:h-6 lg:w-6"
+        style="--url: url(./{{ . }}.svg)"
+        href="{{ if eq . `rss` }} {{ `index.xml` | absURL }} {{ else }} https://{{ . }}.com/{{ site.Params.Get . }} {{ end }}"
+        target="_blank"
+      ></a>
+      {{ end }}<!---->
+    </nav>
+    {{ end }}<!---->
+  </div>
 </header>
diff --git a/static/an-old-hope.min.css b/static/an-old-hope.min.css
deleted file mode 100644
index 936fba3..0000000
--- a/static/an-old-hope.min.css
+++ /dev/null
@@ -1 +0,0 @@
-.hljs-comment,.hljs-quote{color:#B6B18B}.hljs-variable,.hljs-template-variable,.hljs-tag,.hljs-name,.hljs-selector-id,.hljs-selector-class,.hljs-regexp,.hljs-deletion{color:#EB3C54}.hljs-number,.hljs-built_in,.hljs-builtin-name,.hljs-literal,.hljs-type,.hljs-params,.hljs-meta,.hljs-link{color:#E7CE56}.hljs-attribute{color:#EE7C2B}.hljs-string,.hljs-symbol,.hljs-bullet,.hljs-addition{color:#4FB4D7}.hljs-title,.hljs-section{color:#78BB65}.hljs-keyword,.hljs-selector-tag{color:#B45EA4}.hljs{display:block;overflow-x:auto;background:#1C1D21;color:#c0c5ce;padding:.5em}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:bold}
\ No newline at end of file
diff --git a/static/apple-touch-icon.png b/static/apple-touch-icon.png
index 75ed2a4..0bca31c 100644
Binary files a/static/apple-touch-icon.png and b/static/apple-touch-icon.png differ
diff --git a/static/favicon.ico b/static/favicon.ico
index acfbca3..b3a1a8b 100644
Binary files a/static/favicon.ico and b/static/favicon.ico differ
diff --git a/static/github.svg b/static/github.svg
index 6068b15..adefde2 100644
--- a/static/github.svg
+++ b/static/github.svg
@@ -1 +1 @@
-<svg viewBox="-0.8 -1 17.6 17.6" xmlns="http://www.w3.org/2000/svg"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z" /></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="1.3 1.3 21.4 21.4"><path d="M10.9,2.1c-4.6,0.5-8.3,4.2-8.8,8.7c-0.5,4.7,2.2,8.9,6.3,10.5C8.7,21.4,9,21.2,9,20.8v-1.6c0,0-0.4,0.1-0.9,0.1 c-1.4,0-2-1.2-2.1-1.9c-0.1-0.4-0.3-0.7-0.6-1C5.1,16.3,5,16.3,5,16.2C5,16,5.3,16,5.4,16c0.6,0,1.1,0.7,1.3,1c0.5,0.8,1.1,1,1.4,1 c0.4,0,0.7-0.1,0.9-0.2c0.1-0.7,0.4-1.4,1-1.8c-2.3-0.5-4-1.8-4-4c0-1.1,0.5-2.2,1.2-3C7.1,8.8,7,8.3,7,7.6C7,7.2,7,6.6,7.3,6 c0,0,1.4,0,2.8,1.3C10.6,7.1,11.3,7,12,7s1.4,0.1,2,0.3C15.3,6,16.8,6,16.8,6C17,6.6,17,7.2,17,7.6c0,0.8-0.1,1.2-0.2,1.4 c0.7,0.8,1.2,1.8,1.2,3c0,2.2-1.7,3.5-4,4c0.6,0.5,1,1.4,1,2.3v2.6c0,0.3,0.3,0.6,0.7,0.5c3.7-1.5,6.3-5.1,6.3-9.3 C22,6.1,16.9,1.4,10.9,2.1z"/></svg>
diff --git a/static/instagram.svg b/static/instagram.svg
index bb707e3..fb0ad37 100644
--- a/static/instagram.svg
+++ b/static/instagram.svg
@@ -1 +1 @@
-<svg viewBox="-1.5 -3 53 53" xmlns="http://www.w3.org/2000/svg"><path d="M25 1c-6.52 0-7.34.03-9.9.14-2.55.12-4.3.53-5.82 1.12a11.76 11.76 0 0 0-4.25 2.77 11.76 11.76 0 0 0-2.77 4.25c-.6 1.52-1 3.27-1.12 5.82C1.03 17.66 1 18.48 1 25c0 6.5.03 7.33.14 9.88.12 2.56.53 4.3 1.12 5.83a11.76 11.76 0 0 0 2.77 4.25 11.76 11.76 0 0 0 4.25 2.77c1.52.59 3.27 1 5.82 1.11 2.56.12 3.38.14 9.9.14 6.5 0 7.33-.02 9.88-.14 2.56-.12 4.3-.52 5.83-1.11a11.76 11.76 0 0 0 4.25-2.77 11.76 11.76 0 0 0 2.77-4.25c.59-1.53 1-3.27 1.11-5.83.12-2.55.14-3.37.14-9.89 0-6.51-.02-7.33-.14-9.89-.12-2.55-.52-4.3-1.11-5.82a11.76 11.76 0 0 0-2.77-4.25 11.76 11.76 0 0 0-4.25-2.77c-1.53-.6-3.27-1-5.83-1.12A170.2 170.2 0 0 0 25 1zm0 4.32c6.4 0 7.16.03 9.69.14 2.34.11 3.6.5 4.45.83 1.12.43 1.92.95 2.76 1.8a7.43 7.43 0 0 1 1.8 2.75c.32.85.72 2.12.82 4.46.12 2.53.14 3.29.14 9.7 0 6.4-.02 7.16-.14 9.69-.1 2.34-.5 3.6-.82 4.45a7.43 7.43 0 0 1-1.8 2.76 7.43 7.43 0 0 1-2.76 1.8c-.84.32-2.11.72-4.45.82-2.53.12-3.3.14-9.7.14-6.4 0-7.16-.02-9.7-.14-2.33-.1-3.6-.5-4.45-.82a7.43 7.43 0 0 1-2.76-1.8 7.43 7.43 0 0 1-1.8-2.76c-.32-.84-.71-2.11-.82-4.45a166.5 166.5 0 0 1-.14-9.7c0-6.4.03-7.16.14-9.7.11-2.33.5-3.6.83-4.45a7.43 7.43 0 0 1 1.8-2.76 7.43 7.43 0 0 1 2.75-1.8c.85-.32 2.12-.71 4.46-.82 2.53-.11 3.29-.14 9.7-.14zm0 7.35a12.32 12.32 0 1 0 0 24.64 12.32 12.32 0 0 0 0-24.64zM25 33a8 8 0 1 1 0-16 8 8 0 0 1 0 16zm15.68-20.8a2.88 2.88 0 1 0-5.76 0 2.88 2.88 0 0 0 5.76 0z" /></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="2.2 2.2 19.6 19.6"><path d="M 8 3 C 5.239 3 3 5.239 3 8 L 3 16 C 3 18.761 5.239 21 8 21 L 16 21 C 18.761 21 21 18.761 21 16 L 21 8 C 21 5.239 18.761 3 16 3 L 8 3 z M 18 5 C 18.552 5 19 5.448 19 6 C 19 6.552 18.552 7 18 7 C 17.448 7 17 6.552 17 6 C 17 5.448 17.448 5 18 5 z M 12 7 C 14.761 7 17 9.239 17 12 C 17 14.761 14.761 17 12 17 C 9.239 17 7 14.761 7 12 C 7 9.239 9.239 7 12 7 z M 12 9 A 3 3 0 0 0 9 12 A 3 3 0 0 0 12 15 A 3 3 0 0 0 15 12 A 3 3 0 0 0 12 9 z"/></svg>
diff --git a/static/rss.svg b/static/rss.svg
new file mode 100644
index 0000000..c107a4c
--- /dev/null
+++ b/static/rss.svg
@@ -0,0 +1 @@
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg" viewBox="7.5 7.5 81 81"><g transform="translate(0,96) scale(0.1,-0.1)" stroke="none"><path d="M145 815 l-25 -24 0 -311 0 -311 25 -24 24 -25 311 0 311 0 24 25 25 24 0 311 0 311 -25 24 -24 25 -311 0 -311 0 -24 -25z m227 -106 c195 -42 348 -229 348 -426 l0 -43 -39 0 -38 0 -5 64 c-15 185 -174 336 -355 336 l-43 0 0 40 c0 40 0 40 40 40 21 0 63 -5 92 -11z m-2 -165 c104 -31 190 -151 190 -265 0 -39 0 -39 -39 -39 l-38 0 -6 55 c-11 104 -78 171 -181 182 l-56 6 0 38 c0 38 1 39 38 39 21 0 62 -7 92 -16z m-30 -204 c11 -11 20 -29 20 -40 0 -26 -34 -60 -60 -60 -26 0 -60 34 -60 60 0 11 9 29 20 40 11 11 29 20 40 20 11 0 29 -9 40 -20z"/></g></svg>
diff --git a/static/theme.png b/static/theme.png
deleted file mode 100644
index 265ac1f..0000000
Binary files a/static/theme.png and /dev/null differ
diff --git a/static/theme.svg b/static/theme.svg
new file mode 100644
index 0000000..8f00446
--- /dev/null
+++ b/static/theme.svg
@@ -0,0 +1 @@
+<svg width="64" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g transform="translate(-12,0)"><path d="M9.3812 2.04327C7.76937 2.50154 6.2485 3.36519 4.97948 4.63421C1.00684 8.60687 1.00684 15.0478 4.97948 19.0205C8.95213 22.9932 15.3931 22.9932 19.3657 19.0205C20.6429 17.7433 21.5095 16.211 21.9654 14.5876M9.5384 2C8.6321 5.39377 9.51018 9.16492 12.1726 11.8274C14.8351 14.4899 18.6063 15.368 22 14.4617" stroke="#000" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" /></g><g transform="translate(12,0)"><path d="M17.5 17.5L19 19M20 12H22M6.5 6.5L5 5M17.5 6.5L19 5M6.5 17.5L5 19M2 12H4M12 2V4M12 20V22M16 12C16 14.2091 14.2091 16 12 16C9.79086 16 8 14.2091 8 12C8 9.79086 9.79086 8 12 8C14.2091 8 16 9.79086 16 12Z" stroke="#000" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" /></g></svg>
diff --git a/static/twitter.svg b/static/twitter.svg
index 32e59fa..0ba5c46 100644
--- a/static/twitter.svg
+++ b/static/twitter.svg
@@ -1 +1 @@
-<svg viewBox="0.9 0.5 22.8 22.8" xmlns="http://www.w3.org/2000/svg"><g><path d="M23.643 4.937c-.835.37-1.732.62-2.675.733.962-.576 1.7-1.49 2.048-2.578-.9.534-1.897.922-2.958 1.13-.85-.904-2.06-1.47-3.4-1.47-2.572 0-4.658 2.086-4.658 4.66 0 .364.042.718.12 1.06-3.873-.195-7.304-2.05-9.602-4.868-.4.69-.63 1.49-.63 2.342 0 1.616.823 3.043 2.072 3.878-.764-.025-1.482-.234-2.11-.583v.06c0 2.257 1.605 4.14 3.737 4.568-.392.106-.803.162-1.227.162-.3 0-.593-.028-.877-.082.593 1.85 2.313 3.198 4.352 3.234-1.595 1.25-3.604 1.995-5.786 1.995-.376 0-.747-.022-1.112-.065 2.062 1.323 4.51 2.093 7.14 2.093 8.57 0 13.255-7.098 13.255-13.254 0-.2-.005-.402-.014-.602.91-.658 1.7-1.477 2.323-2.41z" /></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="2.1 2.1 19.8 19.8"><path d="M22,3.999c-0.78,0.463-2.345,1.094-3.265,1.276c-0.027,0.007-0.049,0.016-0.075,0.023c-0.813-0.802-1.927-1.299-3.16-1.299 c-2.485,0-4.5,2.015-4.5,4.5c0,0.131-0.011,0.372,0,0.5c-3.353,0-5.905-1.756-7.735-4c-0.199,0.5-0.286,1.29-0.286,2.032 c0,1.401,1.095,2.777,2.8,3.63c-0.314,0.081-0.66,0.139-1.02,0.139c-0.581,0-1.196-0.153-1.759-0.617c0,0.017,0,0.033,0,0.051 c0,1.958,2.078,3.291,3.926,3.662c-0.375,0.221-1.131,0.243-1.5,0.243c-0.26,0-1.18-0.119-1.426-0.165 c0.514,1.605,2.368,2.507,4.135,2.539c-1.382,1.084-2.341,1.486-5.171,1.486H2C3.788,19.145,6.065,20,8.347,20 C15.777,20,20,14.337,20,8.999c0-0.086-0.002-0.266-0.005-0.447C19.995,8.534,20,8.517,20,8.499c0-0.027-0.008-0.053-0.008-0.08 c-0.003-0.136-0.006-0.263-0.009-0.329c0.79-0.57,1.475-1.281,2.017-2.091c-0.725,0.322-1.503,0.538-2.32,0.636 C20.514,6.135,21.699,4.943,22,3.999z"/></svg>