@charset "UTF-8";
html,
body,
#app {
  font-family: var(--main-font-family) !important;
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 1rem;
  font-style: normal;
  color: var(--main-font-color);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@keyframes show {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fade-up-opacity {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 0.8;
    transform: translateY(0);
  }
}
@keyframes fade-down {
  from {
    opacity: 0;
    transform: translateY(-50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fade-left {
  from {
    opacity: 0;
    transform: translateX(10px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes loading {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
  100% {
    opacity: 1;
  }
}
@keyframes loading-width {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}
@keyframes gradientFlow {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}
@keyframes skeleton-loading {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}
@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes moveDown {
  0%, 100% {
    bottom: 30px;
  }
  50% {
    bottom: 60px;
  }
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease-in-out;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

.fadeDown-enter-active,
.fadeDown-leave-active {
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.fadeDown-enter-from,
.fadeDown-leave-to {
  opacity: 0;
  transform: translateY(-10px);
}

.toLeft-enter-active,
.toLeft-leave-active {
  transition: transform 0.3s ease;
}

.toLeft-enter-from,
.toLeft-leave-to {
  transform: translateX(300px);
}

:root {
  --main-color: #425aef;
  --main-color-bg: #4259ef0d;
  --main-site-background: #f7f9fe;
  --main-card-background: #fff;
  --main-card-second-background: #f7f7f9;
  --main-font-color: #363636;
  --main-font-second-color: #3c3c43cc;
  --main-card-border: #e3e8f7;
  --main-border-shadow: #2c2d300c;
  --main-scrollbar-bar: rgba(60, 60, 67, 0.4);
  --main-mask-background: rgba(255, 255, 255, 0.95);
  --main-mask-Inverse-background: rgba(0, 0, 0, 0.08);
  --main-mask-second-background: rgba(255, 255, 255, 0.45);
  --main-color-opacity: rgba(255, 255, 255, 0.15);
  --main-dark-opacity: rgba(255, 255, 255, 0.15);
  --main-dark-shadow: #0000006e;
  --main-info-color: #50bfff;
  --main-info-color-gray: #50bfff60;
  --main-warning-color: #ffa500;
  --main-warning-color-gray: #f7ba2a60;
  --main-success-color: #13ce66;
  --main-success-color-gray: #13ce6660;
  --main-error-color: #ff3842;
  --main-error-color-gray: #ff38423b;
  --main-color-blue: #0084ff;
  --main-color-white: #ffffff40;
  --main-color-gray: #999;
  --main-color-red: #ff3842;
  --main-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu,
    Cantarell, "Helvetica Neue", sans-serif;
}

html.dark {
  --main-color: #dfac46;
  --main-color-bg: #f2b94b23;
  --main-site-background: #18171d;
  --main-card-background: #1b1c20;
  --main-card-second-background: #21232a;
  --main-font-color: #f7f7fa;
  --main-font-second-color: #a1a2b8;
  --main-card-border: #3d3d3f;
  --main-border-shadow: #00000050;
  --main-scrollbar-bar: rgba(200, 200, 223, 0.4);
  --main-mask-background: rgba(0, 0, 0, 0.95);
  --main-mask-Inverse-background: rgba(255, 255, 255, 0.08);
  --main-mask-second-background: rgba(0, 0, 0, 0.45);
  --main-color-opacity: rgba(0, 0, 0, 0.15);
}

html.hmos {
  --main-font-family: "HarmonyOS Sans SC Web", "HarmonyOS Sans SC", "HarmonyOS Sans", "HarmonyOS_Regular", "Microsoft YaHei", sans-serif;
}
html.lxgw {
  --main-font-family: "LXGW WenKai", sans-serif;
}
html.vivo {
  --main-font-family: "vivo Sans SC Web", "vivo Sans SC", "vivo Sans", "Microsoft YaHei", sans-serif;
}
html.xiaolai {
  --main-font-family: "Xiaolai Welcome", "LXGW WenKai", sans-serif;
}
html .iconfont {
  font-size: 1rem;
}
html button {
  font-family: var(--main-font-family);
}

html.image {
  --main-card-border: #3d3d3f63;
  --main-font-second-color: #c6c6c6;
  --main-card-background: #1b1c20de;
  --main-card-second-background: #21232ab5;
}
html.image .main-nav {
  backdrop-filter: blur(20px);
}
html.image .main-nav.top {
  backdrop-filter: blur(0);
}
@media (max-width: 768px) {
  html.image .main-nav.down .nav-center {
    background-color: #1b1c20 !important;
  }
}
html.image .loading {
  backdrop-filter: blur(20px);
}
html.image .tags-cloud .all-tags::after {
  display: none;
}
html.image .home:not(.archive-page) .type-bar {
  background-color: #1b1c20;
}

* {
  -webkit-user-drag: none;
  box-sizing: border-box;
}

html {
  user-select: none;
  scroll-behavior: smooth;
  scroll-padding-top: 76px;
  -webkit-text-size-adjust: 100%;
}
html.curve-initial-hash {
  scroll-behavior: auto;
}
html.dark pre code .line span {
  color: var(--shiki-dark) !important;
}
html.gray {
  filter: grayscale(100%);
}

body {
  margin: 0;
  padding: 0;
  color: var(--main-font-color);
  background-color: var(--main-site-background);
  animation: show forwards 0.5s;
  overflow-x: hidden;
  transition: color 0.3s, background-color 0.3s;
}

a {
  text-decoration: none;
  color: var(--main-font-color);
  transition: all 0.3s;
}
a .iconfont {
  transition: all 0.3s;
}
a:hover {
  color: var(--main-color);
}

#app {
  width: 100vw;
  width: 100dvw;
  transition: filter 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
#app .simplebar-scrollbar::before {
  right: 0;
  left: 4px;
  background: var(--main-scrolling-bar);
  transition: background 0.3s, left 0.3s;
  cursor: pointer;
}
#app .simplebar-scrollbar:hover::before {
  left: 2px;
  background: var(--main-color);
}
#app.blur {
  filter: blur(20px);
}

.s-card {
  padding: 0.8rem;
  border-radius: 16px;
  background-color: var(--main-card-background);
  border: 1px solid var(--main-card-border);
  box-shadow: 0 8px 16px -4px var(--main-border-shadow);
  transition: all 0.3s;
  cursor: pointer;
}
.s-card:hover.hover {
  border-color: var(--main-color);
  box-shadow: 0 8px 16px -4px var(--main-color-bg);
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-thumb {
  background-color: var(--main-scrollbar-bar);
  border-radius: 8px;
  cursor: pointer;
}
::-webkit-scrollbar-thumb:hover {
  background-color: var(--main-color);
}

::selection {
  background-color: var(--main-color);
  color: #efefef;
}

.custom-block .custom-block-content p, .custom-block .custom-block-content ul, .custom-block .custom-block-content ol, .custom-block .custom-block-content li {
  color: var(--main-font-color) !important;
}
.custom-block.info .custom-block-content p, .custom-block.info .custom-block-content ul, .custom-block.info .custom-block-content ol, .custom-block.info .custom-block-content li, .custom-block.warning .custom-block-content p, .custom-block.warning .custom-block-content ul, .custom-block.warning .custom-block-content ol, .custom-block.warning .custom-block-content li, .custom-block.danger .custom-block-content p, .custom-block.danger .custom-block-content ul, .custom-block.danger .custom-block-content ol, .custom-block.danger .custom-block-content li, .custom-block.tip .custom-block-content p, .custom-block.tip .custom-block-content ul, .custom-block.tip .custom-block-content ol, .custom-block.tip .custom-block-content li, .custom-block.summary .custom-block-content p, .custom-block.summary .custom-block-content ul, .custom-block.summary .custom-block-content ol, .custom-block.summary .custom-block-content li {
  color: var(--main-font-color) !important;
}
.custom-block .custom-block-title {
  color: inherit;
}

.markdown-main-style div > h1 {
  font-size: 2rem;
  text-align: center;
  border-bottom: 1px dashed var(--main-color-bg);
  padding-bottom: 1rem;
}
.markdown-main-style div > h1 .header-anchor::before {
  display: none;
}
.markdown-main-style div > h2 {
  font-size: 1.6rem;
  line-height: 1.6;
  border-bottom: 1px dashed var(--main-color-bg);
  padding-bottom: 0.5rem;
}
.markdown-main-style div > h3 {
  width: fit-content;
  font-size: 1.2rem;
  z-index: 0;
}
.markdown-main-style div > h3::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 8px;
  border-radius: 3px;
  background-color: var(--main-card-border);
  z-index: -1;
}
.markdown-main-style div > h1,
.markdown-main-style div > h2,
.markdown-main-style div > h3,
.markdown-main-style div > h4 {
  position: relative;
  cursor: pointer;
}
.markdown-main-style div > h1:hover .header-anchor,
.markdown-main-style div > h2:hover .header-anchor,
.markdown-main-style div > h3:hover .header-anchor,
.markdown-main-style div > h4:hover .header-anchor {
  opacity: 1;
}
.markdown-main-style .header-anchor {
  position: absolute;
  left: 0;
  opacity: 0;
  transition: opacity 0.3s;
}
.markdown-main-style .header-anchor::before {
  content: "#";
  position: absolute;
  left: -1.3rem;
  color: var(--main-color);
  font-weight: bold;
}
.markdown-main-style p {
  font-size: 1.1rem;
}
.markdown-main-style p,
.markdown-main-style ul,
.markdown-main-style li,
.markdown-main-style td {
  margin: 1rem 0;
  text-align: left;
  letter-spacing: 0.6px;
  line-height: 2;
}
.markdown-main-style p code,
.markdown-main-style ul code,
.markdown-main-style li code,
.markdown-main-style td code {
  display: inline-flex;
  font-size: 0.8rem;
  padding: 0 6px;
  border-radius: 6px;
  background-color: var(--main-card-border);
  font-family: "Fira Code", var(--main-font-family), monospace;
  font-optical-sizing: auto;
  white-space: nowrap;
  transform: translateY(-2px);
  overflow-x: auto;
  max-width: 100%;
  transition: color 0.3s, background-color 0.3s;
  cursor: pointer;
}
.markdown-main-style p code:hover,
.markdown-main-style ul code:hover,
.markdown-main-style li code:hover,
.markdown-main-style td code:hover {
  color: var(--main-color);
  background-color: var(--main-color-bg);
}
.markdown-main-style p a,
.markdown-main-style ul a,
.markdown-main-style li a,
.markdown-main-style td a {
  position: relative;
  display: inline-flex;
  color: var(--main-color);
}
.markdown-main-style p a::before,
.markdown-main-style ul a::before,
.markdown-main-style li a::before,
.markdown-main-style td a::before {
  content: "";
  position: absolute;
  border-radius: 2px;
  bottom: 2px;
  left: 0;
  right: 0;
  height: 1px;
  opacity: 0.8;
  background-color: var(--main-color);
  border-radius: 4px;
  transition: all 0.3s;
}
.markdown-main-style p a:hover::before,
.markdown-main-style ul a:hover::before,
.markdown-main-style li a:hover::before,
.markdown-main-style td a:hover::before {
  height: 100%;
  opacity: 0.2;
  bottom: 0;
  left: -2px;
  right: -2px;
}
.markdown-main-style p strong,
.markdown-main-style ul strong,
.markdown-main-style li strong,
.markdown-main-style td strong {
  color: var(--main-color);
}
.markdown-main-style img {
  width: 100%;
  border-radius: 12px;
}
.markdown-main-style .img-fancybox {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--main-font-color);
}
.markdown-main-style .img-fancybox .post-img {
  width: auto;
  max-height: 450px;
  max-width: 100%;
  margin: 0 auto;
  border-radius: 12px;
  cursor: zoom-in;
  transition: opacity 0.3s, filter 0.3s;
}
.markdown-main-style .img-fancybox .post-img:hover {
  filter: blur(0) brightness(0.8);
}
.markdown-main-style .img-fancybox .post-img-tip {
  display: inline-flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  margin: 0.8rem 0;
  font-size: 14px;
  opacity: 0.6;
}
.markdown-main-style .img-fancybox::before {
  display: none;
}
.markdown-main-style .img-fancybox:hover {
  color: var(--main-font-color);
}
.markdown-main-style div[class*=language-] {
  position: relative;
  display: flex;
  flex-direction: row-reverse;
  border-radius: 12px;
  background-color: var(--main-card-background);
  border: 1px solid var(--main-card-border);
  padding-top: 36px;
  margin: 1rem 0;
  overflow: hidden;
}
.markdown-main-style div[class*=language-] .copy,
.markdown-main-style div[class*=language-] .lang {
  position: absolute;
}
.markdown-main-style div[class*=language-] .lang {
  width: 100%;
  height: 36px;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  background-color: var(--main-card-second-background);
  border-bottom: 1px solid var(--main-card-border);
  padding-left: 16px;
  font-weight: bold;
  font-size: 18px;
}
.markdown-main-style div[class*=language-] .copy {
  top: 0;
  right: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  border: none;
  font-family: "iconfont";
  font-size: 20px;
  font-style: normal;
  z-index: 1;
  color: var(--main-font-color);
  cursor: pointer;
}
.markdown-main-style div[class*=language-] .copy::after {
  content: "\e01c";
  transition: color 0.3s;
}
.markdown-main-style div[class*=language-] .copy::before {
  content: "复制成功";
  position: absolute;
  left: -60px;
  font-size: 14px;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(5px);
  transition: color 0.3s, opacity 0.3s, transform 0.3s;
}
.markdown-main-style div[class*=language-] .copy.copied::before {
  opacity: 1;
  transform: translateX(0);
}
.markdown-main-style div[class*=language-] .copy:hover::before, .markdown-main-style div[class*=language-] .copy:hover::after {
  color: var(--main-color);
}
.markdown-main-style div[class*=language-] .line-numbers-wrapper {
  padding: 6px 10px;
  opacity: 0.6;
  text-align: center;
  user-select: none;
  color: var(--main-font-second-color);
  background-color: var(--main-card-second-background);
}
.markdown-main-style div[class*=language-] .line-numbers-wrapper .line-number {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  font-size: 14px;
}
.markdown-main-style div[class*=language-] .line-numbers-wrapper br {
  display: none;
}
.markdown-main-style div[class*=language-] pre {
  margin: 0;
  padding: 6px 10px;
  width: 100%;
  overflow-y: auto;
  user-select: text;
  border-left: 1px solid var(--main-card-border);
}
.markdown-main-style div[class*=language-] pre code {
  font-family: "Fira Code", var(--main-font-family), monospace;
  font-optical-sizing: auto;
}
.markdown-main-style div[class*=language-] pre code .line {
  display: inline-block;
  height: 22px;
}
.markdown-main-style div[class*=language-] pre code .line span {
  color: var(--shiki-light);
  transition: color 0.3s;
}
.markdown-main-style div[class*=language-] pre code .line.highlighted {
  width: 100%;
  background-color: var(--main-card-border);
  border-radius: 6px;
}
.markdown-main-style div[class*=language-] pre code .line:empty {
  height: 17px;
}
.markdown-main-style pre {
  width: 100%;
  overflow-y: auto;
  user-select: text;
}
.markdown-main-style blockquote {
  padding: 2px 16px;
  margin: 1rem 0;
  color: var(--main-font-color);
  text-align: left;
  border: 1px solid var(--main-card-border);
  border-left: 8px solid var(--main-card-border);
  background-color: var(--main-card-second-background);
  border-radius: 4px 8px 8px 4px;
}
.markdown-main-style blockquote p {
  margin: 0.5rem 0;
}
.markdown-main-style ul {
  list-style-type: none;
  padding-left: 1rem;
}
.markdown-main-style ul li {
  position: relative;
  padding-left: 1.2rem;
  margin: 0.6rem 0;
  overflow: auto;
}
.markdown-main-style ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7rem;
  width: 0.6rem;
  height: 0.6rem;
  background-color: var(--main-color);
  border-radius: 50%;
}
.markdown-main-style ul li p:first-child {
  margin-top: 0;
}
.markdown-main-style ul li p:last-child {
  margin-bottom: 0;
}
.markdown-main-style ol {
  padding-left: 2rem;
}
.markdown-main-style ol li::marker {
  color: var(--main-color);
  font-weight: bold;
}
.markdown-main-style .table-container {
  width: 100%;
  margin: 1rem 0;
  border: 1px solid var(--main-card-border);
  border-radius: 8px;
  overflow-y: hidden;
  overflow-x: auto;
}
.markdown-main-style .table-container table {
  width: 100%;
  min-width: 512px;
  max-width: 1200px;
  margin: 0 auto;
  border-collapse: collapse;
  border-spacing: 0;
}
.markdown-main-style .table-container table td,
.markdown-main-style .table-container table th {
  margin: 0;
  padding: 0.6rem 1rem;
  line-height: normal;
  letter-spacing: normal;
  vertical-align: middle;
  border: 1px solid var(--main-card-border);
}
.markdown-main-style .table-container table thead {
  background-color: var(--main-card-second-background);
}
.markdown-main-style .table-container table tbody tr {
  transition: background-color 0.3s;
  cursor: pointer;
}
.markdown-main-style .table-container table tbody tr:hover {
  background-color: var(--main-card-second-background);
}
.markdown-main-style hr {
  margin: 1rem 0;
  height: 2px;
  border: none;
  background-color: var(--main-card-border);
}
.markdown-main-style label {
  cursor: pointer;
}
.markdown-main-style mjx-container {
  overflow: auto;
  padding-bottom: 8px;
  font-family: auto;
}
.markdown-main-style .custom-block {
  margin: 1rem 0;
  padding: 16px;
  padding-left: 12px;
  border-radius: 8px;
  background-color: var(--main-card-border);
  border-left: 6px solid var(--main-color-gray);
  user-select: none;
}
.markdown-main-style .custom-block p {
  margin: 0;
  line-height: normal;
  font-size: 0.95rem;
}
.markdown-main-style .custom-block p.custom-block-title {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 6px;
}
.markdown-main-style .custom-block.tip {
  background-color: var(--main-info-color-gray);
  border-left-color: var(--main-info-color);
}
.markdown-main-style .custom-block.tip p {
  color: var(--main-info-color);
}
.markdown-main-style .custom-block.warning {
  background-color: var(--main-warning-color-gray);
  border-left-color: var(--main-warning-color);
}
.markdown-main-style .custom-block.warning p {
  color: var(--main-warning-color);
}
.markdown-main-style .custom-block.danger {
  background-color: var(--main-error-color-gray);
  border-left-color: var(--main-error-color);
}
.markdown-main-style .custom-block.danger p {
  color: var(--main-error-color);
}
.markdown-main-style .custom-block.details {
  border: none;
  padding: 0;
  background-color: transparent;
  transition: max-height 0.4s ease-in-out;
  overflow: hidden;
}
.markdown-main-style .custom-block.details summary {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  border-radius: 12px;
  font-weight: bold;
  border: 1px solid var(--main-card-border);
  background-color: var(--main-card-second-background);
  transition: color 0.3s, border-color 0.3s, background-color 0.3s;
  cursor: pointer;
}
.markdown-main-style .custom-block.details summary::before {
  content: "\e057";
  font-family: "iconfont";
  margin-right: 6px;
  font-size: 18px;
  transition: transform 0.3s;
}
.markdown-main-style .custom-block.details summary::after {
  content: "+";
  margin-left: auto;
}
.markdown-main-style .custom-block.details summary:hover {
  color: var(--main-card-background);
  background-color: var(--main-color);
}
.markdown-main-style .custom-block.details > :last-child {
  padding: 16px;
  font-size: 1rem;
  border-radius: 0 0 12px 12px;
  border: 1px solid var(--main-card-border);
  background-color: var(--main-card-background);
  border-top: none;
}
.markdown-main-style .custom-block.details[open] summary {
  border-radius: 12px 12px 0 0;
  border-color: var(--main-color);
  color: var(--main-card-background);
  background-color: var(--main-color);
}
.markdown-main-style .custom-block.details[open] summary::before {
  transform: rotate(90deg);
}
.markdown-main-style .custom-block.details[open] summary::after {
  content: "-";
}
.markdown-main-style .custom-block.details[open] > :last-child {
  border-color: var(--main-color);
}
.markdown-main-style .custom-block.details:hover summary {
  color: var(--main-card-background);
  background-color: var(--main-color);
}
.markdown-main-style .plugin-tabs {
  margin: 1rem 0;
  border-radius: 12px;
  background-color: var(--main-card-background);
  border: 1px solid var(--main-card-border);
  overflow: hidden;
}
.markdown-main-style .plugin-tabs .plugin-tabs--tab-list {
  padding: 0 12px;
  background-color: var(--main-card-second-background);
  border-bottom: 1px solid var(--main-card-border);
}
.markdown-main-style .plugin-tabs .plugin-tabs--tab-list .plugin-tabs--tab {
  padding: 12px 16px;
  margin-right: 12px;
  outline: none;
  border: none;
  line-height: normal;
  font-size: 16px;
  font-weight: bold;
  font-family: var(--main-font-family);
  background-color: transparent;
  border-bottom: 2px solid transparent;
  transition: all 0.3s;
  cursor: pointer;
}
.markdown-main-style .plugin-tabs .plugin-tabs--tab-list .plugin-tabs--tab[aria-selected=true] {
  color: var(--main-color);
  border-bottom-color: var(--main-color);
}
.markdown-main-style .plugin-tabs .plugin-tabs--content {
  padding: 1rem;
  max-height: 500px;
  overflow: auto;
  animation: show 0.5s forwards;
}
.markdown-main-style .timeline {
  position: relative;
  padding: 0 0 1rem 26px;
  cursor: pointer;
}
.markdown-main-style .timeline .timeline-title {
  display: inline-block;
  font-size: 14px;
  opacity: 0.6;
  transform: translateY(-2px);
  transition: color 0.3s, opacity 0.3s;
}
.markdown-main-style .timeline .timeline-content {
  margin-top: 12px;
  border-radius: 2px 12px 12px 12px;
  padding: 1rem;
  max-width: 80%;
  width: max-content;
  border: 1px solid var(--main-card-border);
  background-color: var(--main-card-second-background);
}
.markdown-main-style .timeline .timeline-content > :first-child {
  margin-top: 0;
}
.markdown-main-style .timeline .timeline-content > :last-child {
  margin-bottom: 0;
}
.markdown-main-style .timeline::after {
  content: "";
  position: absolute;
  top: 7px;
  left: 7px;
  width: 4px;
  height: 100%;
  border-radius: 4px;
  background-color: var(--main-card-border);
  z-index: 0;
}
.markdown-main-style .timeline::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--main-color);
  background-color: var(--main-card-background);
  transition: transform 0.3s;
  z-index: 1;
}
.markdown-main-style .timeline:hover .timeline-title {
  opacity: 1;
  color: var(--main-color);
}
.markdown-main-style .timeline:hover::before {
  transform: scale(1.2);
}
.markdown-main-style .radio {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin: 1rem 0;
}
.markdown-main-style .radio .radio-point {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  margin: 0;
  margin-right: 12px;
  outline: 2px solid var(--main-color);
  border-radius: 50%;
}
.markdown-main-style .radio .radio-point::after {
  content: "";
  opacity: 0;
  position: absolute;
  width: 65%;
  height: 65%;
  background-color: var(--main-color);
  border-radius: 50%;
}
.markdown-main-style .radio .radio-point.checked::after {
  opacity: 1;
}
.markdown-main-style .radio p {
  margin: 0;
}
.markdown-main-style .card {
  padding: 1rem 1.2rem;
  border-radius: 8px;
  border: 1px solid var(--main-card-border);
  background-color: var(--main-card-second-background);
  box-shadow: 0 8px 16px -4px var(--main-border-shadow);
}
.markdown-main-style .card p:first-child {
  margin-top: 0;
}
.markdown-main-style .card p:last-child {
  margin-bottom: 0;
}
.markdown-main-style .button {
  outline: none;
  border-radius: 8px;
  padding: 6px 16px;
  border: 1px solid var(--main-card-border);
  background-color: var(--main-card-second-background);
  transition: background-color 0.3s;
  cursor: pointer;
}
.markdown-main-style .button p,
.markdown-main-style .button a {
  padding: 0;
  margin: 0;
  font-size: 1rem;
  color: var(--main-font-color);
}
.markdown-main-style .button p::before,
.markdown-main-style .button a::before {
  display: none;
}
.markdown-main-style .button.primary {
  color: var(--main-card-background);
  background-color: var(--main-color);
}
.markdown-main-style .button:hover {
  background-color: var(--main-card-border);
}

/* Extracted from vitepress-theme-curve component styles. */
/* App.vue */
.mian-layout {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 1rem 2rem;
  animation: show 0.5s forwards;
  animation-duration: 0.5s;
  display: block;
}
.mian-layout.loading {
  display: none;
}
@media (max-width: 768px) {
  .mian-layout {
    padding: 1rem 1.5rem;
  }
  .mian-layout.is-post {
    padding: 0;
  }
}

.left-menu {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 1100;
}
.left-menu > .settings > .set-btn {
  will-change: width, opacity, transform;
  transition: width 0.3s ease, opacity 0.35s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0s;
}
.left-menu > .settings > .set-btn.footer-hidden {
  opacity: 0;
  transform: translateY(calc(100% + 20px));
  visibility: hidden;
  pointer-events: none;
  transition-delay: 0s, 0s, 0s, 0.35s;
}

/* FakeGPT summary widget */
.article-gpt {
  margin-top: 1.2rem;
  background-color: var(--main-card-second-background);
  user-select: none;
  cursor: auto;
}
.article-gpt .title {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.8rem;
  padding: 0 8px;
}
.article-gpt .title .name {
  display: flex;
  align-items: center;
  color: var(--main-color);
  font-weight: bold;
  cursor: pointer;
}
.article-gpt .title .name .icon-robot {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: normal;
  width: 26px;
  height: 26px;
  color: var(--main-card-background);
  background-color: var(--main-color);
  border-radius: 50%;
  margin-right: 8px;
}
.article-gpt .title .name .icon-up {
  font-weight: normal;
  font-size: 12px;
  margin-left: 6px;
  opacity: 0.6;
  color: var(--main-color);
  transform: rotate(90deg);
}
.article-gpt .title .logo {
  padding: 4px 10px;
  font-size: 12px;
  color: var(--main-card-background);
  background-color: var(--main-color);
  border-radius: 25px;
  font-weight: bold;
  cursor: pointer;
}
.article-gpt .title .logo.loading {
  animation: loading 1s infinite;
  cursor: not-allowed;
}
.article-gpt .content {
  cursor: auto;
}
.article-gpt .content .point {
  color: var(--main-color);
  font-weight: bold;
  margin-left: 4px;
  animation: loading 0.8s infinite;
}
.article-gpt .meta {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin-top: 1rem;
  padding: 0 8px;
  font-size: 12px;
}
.article-gpt .meta .tip {
  opacity: 0.6;
}
.article-gpt .meta .report {
  white-space: nowrap;
  margin-left: 12px;
  opacity: 0.8;
}

/* components/Aside/Widgets/Clock.vue */
.clock {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  border: 6px solid var(--main-card-background);
  box-shadow: 0 8px 16px -4px var(--main-border-shadow);
  background-image: linear-gradient(to bottom, #505152, #2e2f30);
  overflow: hidden;
}
.clock .clock-content {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  box-shadow: inset 0 0 16px -6px #191a1b;
}
.clock .clock-content .pointer {
  position: absolute;
  bottom: calc(50% - 5px);
  box-shadow: 0 0 10px 0 #191a1b;
  border-radius: 25px;
}
.clock .clock-content .pointer.hour {
  width: 10px;
  height: 40px;
  background-color: #e4e4e4;
  z-index: 2;
  transform-origin: 5px 35px;
}
.clock .clock-content .pointer.minute {
  width: 8px;
  height: 55px;
  background-color: #d2d2d2;
  transform-origin: 4px 50px;
  z-index: 1;
}
.clock .clock-content .pointer.second {
  width: 4px;
  height: 60px;
  background-color: #a51b1d;
  transform-origin: 2px 55px;
  z-index: 3;
}
.clock .clock-content .pointer.second::after {
  content: "";
  position: absolute;
  bottom: -6px;
  width: 4px;
  height: 10px;
  background-color: #a51b1d;
  border-radius: 25px;
}
.clock .clock-content::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  background-color: #a51b1d;
  border-radius: 50%;
  z-index: 4;
}

/* components/Aside/Widgets/Countdown.vue */
.count-down {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.count-down .count-left {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  margin-right: 0.8rem;
}
.count-down .count-left .text {
  font-size: 14px;
  color: var(--main-font-second-color);
}
.count-down .count-left .name {
  font-weight: bold;
  font-size: 18px;
  margin-top: 2px;
}
.count-down .count-left .time {
  font-size: 30px;
  font-weight: bold;
  margin: 4px 0;
  color: var(--main-color);
}
.count-down .count-left .date {
  font-size: 12px;
  opacity: 0.6;
}
.count-down .count-left::after {
  content: "";
  position: absolute;
  right: -0.8rem;
  width: 2px;
  height: 80%;
  background-color: var(--main-card-border);
}
.count-down .count-right {
  flex: 1;
  width: 100%;
  margin-left: 0.8rem;
}
.count-down .count-right .count-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 24px;
  margin: 6px 0;
}
.count-down .count-right .count-item .item-name {
  font-size: 14px;
  margin-right: 0.8rem;
  white-space: nowrap;
  color: var(--main-font-second-color);
}
.count-down .count-right .count-item .item-progress {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  width: 100%;
  border-radius: 8px;
  background-color: var(--main-color-bg);
  overflow: hidden;
}
.count-down .count-right .count-item .item-progress .progress-bar {
  height: 100%;
  border-radius: 8px;
  background-color: var(--main-color);
}
.count-down .count-right .count-item .item-progress .percentage,
.count-down .count-right .count-item .item-progress .remaining {
  position: absolute;
  font-size: 12px;
  margin: 0 6px;
  transition: opacity 0.3s, transform 0.3s;
}
.count-down .count-right .count-item .item-progress .percentage.many,
.count-down .count-right .count-item .item-progress .remaining.many {
  color: #fff;
}
.count-down .count-right .count-item .item-progress .percentage.many .tip,
.count-down .count-right .count-item .item-progress .remaining.many .tip {
  opacity: 0.8;
}
.count-down .count-right .count-item .item-progress .remaining {
  opacity: 0;
  transform: translateX(10px);
}
.count-down .count-right .count-item .item-progress .remaining .tip {
  opacity: 0.6;
}
.count-down:hover .count-right .remaining {
  transform: translateX(0) !important;
  opacity: 1 !important;
}
.count-down:hover .count-right .percentage {
  transform: translateX(-10px) !important;
  opacity: 0 !important;
}

/* components/Aside/Widgets/Hello.vue */
.hello {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: var(--main-color);
  color: var(--main-card-background);
  border: none;
}
.hello .tip {
  display: inline-block;
  min-width: 140px;
  text-align: center;
  padding: 6px 12px;
  border-radius: 25px;
  font-size: 14px;
  font-weight: bold;
  background-color: var(--main-color-opacity);
  margin-bottom: 12px;
  transition: color 0.3s, transform 0.3s, background-color 0.3s;
}
.hello .tip:hover {
  transform: scale(1.1);
  color: var(--main-font-color);
  background-color: var(--main-card-background);
}
.hello .tip:active {
  transform: scale(1);
}
.hello .content {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 180px;
}
.hello .content .site-logo {
  position: absolute;
  width: 160px;
  height: 160px;
  transition: transform cubic-bezier(0.69, 0.39, 0, 1.21) 0.3s, opacity cubic-bezier(0.69, 0.39, 0, 1.21) 0.3s;
  transform-origin: bottom;
}
.hello .content .site-desc {
  display: block;
  height: 100%;
  margin-top: 20px;
  font-size: 1.1rem;
  line-height: 1.5;
  opacity: 0;
  transition: opacity 0.3s;
}
.hello .info {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-top: 20px;
}
.hello .info .name {
  display: flex;
  flex-direction: column;
}
.hello .info .name .author {
  font-weight: bold;
  font-size: 20px;
}
.hello .info .name .desc {
  font-size: 12px;
  opacity: 0.6;
}
.hello .info .link {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-left: 20px;
}
.hello .info .link .social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-left: 12px;
  background-color: var(--main-color-opacity);
  border-radius: 50%;
}
.hello .info .link .social-link .iconfont {
  font-size: 22px;
  color: var(--main-card-background);
}
.hello .info .link .social-link:first-child {
  margin-left: 0;
}
.hello .info .link .social-link:hover {
  transform: scale(1.1);
  background-color: var(--main-card-background);
}
.hello .info .link .social-link:hover .iconfont {
  color: var(--main-font-color);
}
.hello:hover .content .site-logo {
  opacity: 0;
  transform: scale(0);
}
.hello:hover .content .site-desc {
  opacity: 1;
}

/* components/Aside/Widgets/SiteData.vue */
.site-data .all-data .data-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.2rem;
}
.site-data .all-data .data-item .name {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.site-data .all-data .data-item .name .iconfont {
  margin-right: 8px;
  opacity: 0.6;
  font-size: 18px;
}
.site-data .all-data .data-item .num {
  opacity: 0.8;
  font-size: 15px;
}
.site-data .all-data .data-item #busuanzi_value_site_pv::after {
  content: " 次";
}
.site-data .all-data .data-item #busuanzi_value_site_uv::after {
  content: " 人";
}
.site-data .all-data .data-item:last-child {
  padding-bottom: 0;
}

/* components/Aside/Widgets/Tags.vue */
.tags-cloud .all-tags {
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  max-height: 500px;
  overflow: hidden;
}
.tags-cloud .all-tags .tags {
  display: inline-block;
  padding: 4px 8px;
  margin: 2px;
  border-radius: 8px;
}
.tags-cloud .all-tags .tags .num {
  margin-left: 2px;
  opacity: 0.6;
}
.tags-cloud .all-tags .tags:hover {
  color: var(--main-color);
  background-color: var(--main-color-bg);
}
.tags-cloud .all-tags::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 48%;
  max-height: 150px;
  background-image: linear-gradient(to top, var(--main-card-background), transparent);
  pointer-events: none;
}
.tags-cloud .more-tags {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 40px;
  border-radius: 8px;
  font-size: 14px;
  border: 1px solid var(--main-card-border);
  background-color: var(--main-card-second-background);
}
.tags-cloud .more-tags:hover {
  color: var(--main-color);
  border-color: var(--main-color-bg);
  background-color: var(--main-color-bg);
}

/* components/Aside/Widgets/Toc.vue */
.toc {
  position: relative;
  padding: 0 !important;
  overflow: hidden;
}
.toc .toc-title {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 18px;
  height: 58px;
}
.toc .toc-title .iconfont {
  margin-right: 8px;
  font-weight: bold;
  opacity: 0.6;
}
.toc .toc-title .name {
  font-weight: bold;
}
.toc .toc-list {
  position: relative;
  padding: 20px;
  padding-top: 0;
  padding-left: 24px;
  display: flex;
  flex-direction: column;
  max-height: calc(70vh - 58px);
  overflow: auto;
}
.toc .toc-list .toc-item {
  margin: 4px 0;
  padding: 6px 12px;
  border-radius: 8px;
  opacity: 0.6;
  transition: color 0.3s, opacity 0.3s, font-size 0.3s, background-color 0.3s;
  cursor: pointer;
}
.toc .toc-list .toc-item:first-child {
  margin-top: 0;
}
.toc .toc-list .toc-item:last-child {
  margin-bottom: 0;
}
.toc .toc-list .toc-item.H2 {
  font-weight: bold;
}
.toc .toc-list .toc-item.H3 {
  font-size: 14px;
  margin-left: 20px;
}
.toc .toc-list .toc-item.active {
  opacity: 1;
  color: var(--main-color);
  background-color: var(--main-color-bg);
}
.toc .toc-list .toc-item.active.H2 {
  font-size: 18px;
}
.toc .toc-list .toc-item.active.H3 {
  font-size: 16px;
}
.toc .toc-list .toc-item:hover {
  opacity: 1;
  color: var(--main-color);
  background-color: var(--main-color-bg);
}
.toc .toc-list::after {
  content: "";
  position: absolute;
  left: 12px;
  top: var(--height);
  width: 4px;
  height: 20px;
  margin: 8px 0;
  background-color: var(--main-color);
  border-radius: 8px;
  transition: top 0.3s;
}
.toc::before {
  content: "";
  position: absolute;
  left: 12px;
  bottom: 20px;
  width: 4px;
  height: calc(100% - 78px);
  background-color: var(--main-card-border);
  border-radius: 8px;
}

/* components/Aside/index.vue */
.main-aside {
  padding-left: 1rem;
  display: flex;
  flex-direction: column;
  animation: fade-up 0.6s 0.3s backwards;
}
.main-aside .weidgets {
  padding: 18px;
  margin-bottom: 1rem;
}
.main-aside .weidgets .title {
  margin-bottom: 12px;
  font-weight: bold;
  display: flex;
  align-items: center;
  opacity: 0.75;
}
.main-aside .weidgets .title .iconfont {
  opacity: 0.6;
  margin-right: 6px;
}
.main-aside .weidgets .title .title-name {
  opacity: 0.8;
}
.main-aside .sticky {
  position: sticky;
  top: calc(60px + 1rem);
}
.main-aside .sticky .weidgets {
  animation: fade-up 0.6s 0.4s backwards;
}
.main-aside .sticky .weidgets:last-child {
  margin-bottom: 0;
}

/* components/Background.vue */
.background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: -2;
}
.background.patterns {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='192' viewBox='0 0 192 192'%3E%3Cpath fill='%23494849' fill-opacity='0.08' d='M192 15v2a11 11 0 0 0-11 11c0 1.94 1.16 4.75 2.53 6.11l2.36 2.36a6.93 6.93 0 0 1 1.22 7.56l-.43.84a8.08 8.08 0 0 1-6.66 4.13H145v35.02a6.1 6.1 0 0 0 3.03 4.87l.84.43c1.58.79 4 .4 5.24-.85l2.36-2.36a12.04 12.04 0 0 1 7.51-3.11 13 13 0 1 1 .02 26 12 12 0 0 1-7.53-3.11l-2.36-2.36a4.93 4.93 0 0 0-5.24-.85l-.84.43a6.1 6.1 0 0 0-3.03 4.87V143h35.02a8.08 8.08 0 0 1 6.66 4.13l.43.84a6.91 6.91 0 0 1-1.22 7.56l-2.36 2.36A10.06 10.06 0 0 0 181 164a11 11 0 0 0 11 11v2a13 13 0 0 1-13-13 12 12 0 0 1 3.11-7.53l2.36-2.36a4.93 4.93 0 0 0 .85-5.24l-.43-.84a6.1 6.1 0 0 0-4.87-3.03H145v35.02a8.08 8.08 0 0 1-4.13 6.66l-.84.43a6.91 6.91 0 0 1-7.56-1.22l-2.36-2.36A10.06 10.06 0 0 0 124 181a11 11 0 0 0-11 11h-2a13 13 0 0 1 13-13c2.47 0 5.79 1.37 7.53 3.11l2.36 2.36a4.94 4.94 0 0 0 5.24.85l.84-.43a6.1 6.1 0 0 0 3.03-4.87V145h-35.02a8.08 8.08 0 0 1-6.66-4.13l-.43-.84a6.91 6.91 0 0 1 1.22-7.56l2.36-2.36A10.06 10.06 0 0 0 107 124a11 11 0 0 0-22 0c0 1.94 1.16 4.75 2.53 6.11l2.36 2.36a6.93 6.93 0 0 1 1.22 7.56l-.43.84a8.08 8.08 0 0 1-6.66 4.13H49v35.02a6.1 6.1 0 0 0 3.03 4.87l.84.43c1.58.79 4 .4 5.24-.85l2.36-2.36a12.04 12.04 0 0 1 7.51-3.11A13 13 0 0 1 81 192h-2a11 11 0 0 0-11-11c-1.94 0-4.75 1.16-6.11 2.53l-2.36 2.36a6.93 6.93 0 0 1-7.56 1.22l-.84-.43a8.08 8.08 0 0 1-4.13-6.66V145H11.98a6.1 6.1 0 0 0-4.87 3.03l-.43.84c-.79 1.58-.4 4 .85 5.24l2.36 2.36a12.04 12.04 0 0 1 3.11 7.51A13 13 0 0 1 0 177v-2a11 11 0 0 0 11-11c0-1.94-1.16-4.75-2.53-6.11l-2.36-2.36a6.93 6.93 0 0 1-1.22-7.56l.43-.84a8.08 8.08 0 0 1 6.66-4.13H47v-35.02a6.1 6.1 0 0 0-3.03-4.87l-.84-.43c-1.59-.8-4-.4-5.24.85l-2.36 2.36A12 12 0 0 1 28 109a13 13 0 1 1 0-26c2.47 0 5.79 1.37 7.53 3.11l2.36 2.36a4.94 4.94 0 0 0 5.24.85l.84-.43A6.1 6.1 0 0 0 47 84.02V49H11.98a8.08 8.08 0 0 1-6.66-4.13l-.43-.84a6.91 6.91 0 0 1 1.22-7.56l2.36-2.36A10.06 10.06 0 0 0 11 28 11 11 0 0 0 0 17v-2a13 13 0 0 1 13 13c0 2.47-1.37 5.79-3.11 7.53l-2.36 2.36a4.94 4.94 0 0 0-.85 5.24l.43.84A6.1 6.1 0 0 0 11.98 47H47V11.98a8.08 8.08 0 0 1 4.13-6.66l.84-.43a6.91 6.91 0 0 1 7.56 1.22l2.36 2.36A10.06 10.06 0 0 0 68 11 11 11 0 0 0 79 0h2a13 13 0 0 1-13 13 12 12 0 0 1-7.53-3.11l-2.36-2.36a4.93 4.93 0 0 0-5.24-.85l-.84.43A6.1 6.1 0 0 0 49 11.98V47h35.02a8.08 8.08 0 0 1 6.66 4.13l.43.84a6.91 6.91 0 0 1-1.22 7.56l-2.36 2.36A10.06 10.06 0 0 0 85 68a11 11 0 0 0 22 0c0-1.94-1.16-4.75-2.53-6.11l-2.36-2.36a6.93 6.93 0 0 1-1.22-7.56l.43-.84a8.08 8.08 0 0 1 6.66-4.13H143V11.98a6.1 6.1 0 0 0-3.03-4.87l-.84-.43c-1.59-.8-4-.4-5.24.85l-2.36 2.36A12 12 0 0 1 124 13a13 13 0 0 1-13-13h2a11 11 0 0 0 11 11c1.94 0 4.75-1.16 6.11-2.53l2.36-2.36a6.93 6.93 0 0 1 7.56-1.22l.84.43a8.08 8.08 0 0 1 4.13 6.66V47h35.02a6.1 6.1 0 0 0 4.87-3.03l.43-.84c.8-1.59.4-4-.85-5.24l-2.36-2.36A12 12 0 0 1 179 28a13 13 0 0 1 13-13zM84.02 143a6.1 6.1 0 0 0 4.87-3.03l.43-.84c.8-1.59.4-4-.85-5.24l-2.36-2.36A12 12 0 0 1 83 124a13 13 0 1 1 26 0c0 2.47-1.37 5.79-3.11 7.53l-2.36 2.36a4.94 4.94 0 0 0-.85 5.24l.43.84a6.1 6.1 0 0 0 4.87 3.03H143v-35.02a8.08 8.08 0 0 1 4.13-6.66l.84-.43a6.91 6.91 0 0 1 7.56 1.22l2.36 2.36A10.06 10.06 0 0 0 164 107a11 11 0 0 0 0-22c-1.94 0-4.75 1.16-6.11 2.53l-2.36 2.36a6.93 6.93 0 0 1-7.56 1.22l-.84-.43a8.08 8.08 0 0 1-4.13-6.66V49h-35.02a6.1 6.1 0 0 0-4.87 3.03l-.43.84c-.79 1.58-.4 4 .85 5.24l2.36 2.36a12.04 12.04 0 0 1 3.11 7.51A13 13 0 1 1 83 68a12 12 0 0 1 3.11-7.53l2.36-2.36a4.93 4.93 0 0 0 .85-5.24l-.43-.84A6.1 6.1 0 0 0 84.02 49H49v35.02a8.08 8.08 0 0 1-4.13 6.66l-.84.43a6.91 6.91 0 0 1-7.56-1.22l-2.36-2.36A10.06 10.06 0 0 0 28 85a11 11 0 0 0 0 22c1.94 0 4.75-1.16 6.11-2.53l2.36-2.36a6.93 6.93 0 0 1 7.56-1.22l.84.43a8.08 8.08 0 0 1 4.13 6.66V143h35.02z'%3E%3C/path%3E%3C/svg%3E");
}
.background.dark.patterns {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='192' viewBox='0 0 192 192'%3E%3Cpath fill='%23fcfcfc' fill-opacity='0.08' d='M192 15v2a11 11 0 0 0-11 11c0 1.94 1.16 4.75 2.53 6.11l2.36 2.36a6.93 6.93 0 0 1 1.22 7.56l-.43.84a8.08 8.08 0 0 1-6.66 4.13H145v35.02a6.1 6.1 0 0 0 3.03 4.87l.84.43c1.58.79 4 .4 5.24-.85l2.36-2.36a12.04 12.04 0 0 1 7.51-3.11 13 13 0 1 1 .02 26 12 12 0 0 1-7.53-3.11l-2.36-2.36a4.93 4.93 0 0 0-5.24-.85l-.84.43a6.1 6.1 0 0 0-3.03 4.87V143h35.02a8.08 8.08 0 0 1 6.66 4.13l.43.84a6.91 6.91 0 0 1-1.22 7.56l-2.36 2.36A10.06 10.06 0 0 0 181 164a11 11 0 0 0 11 11v2a13 13 0 0 1-13-13 12 12 0 0 1 3.11-7.53l2.36-2.36a4.93 4.93 0 0 0 .85-5.24l-.43-.84a6.1 6.1 0 0 0-4.87-3.03H145v35.02a8.08 8.08 0 0 1-4.13 6.66l-.84.43a6.91 6.91 0 0 1-7.56-1.22l-2.36-2.36A10.06 10.06 0 0 0 124 181a11 11 0 0 0-11 11h-2a13 13 0 0 1 13-13c2.47 0 5.79 1.37 7.53 3.11l2.36 2.36a4.94 4.94 0 0 0 5.24.85l.84-.43a6.1 6.1 0 0 0 3.03-4.87V145h-35.02a8.08 8.08 0 0 1-6.66-4.13l-.43-.84a6.91 6.91 0 0 1 1.22-7.56l2.36-2.36A10.06 10.06 0 0 0 107 124a11 11 0 0 0-22 0c0 1.94 1.16 4.75 2.53 6.11l2.36 2.36a6.93 6.93 0 0 1 1.22 7.56l-.43.84a8.08 8.08 0 0 1-6.66 4.13H49v35.02a6.1 6.1 0 0 0 3.03 4.87l.84.43c1.58.79 4 .4 5.24-.85l2.36-2.36a12.04 12.04 0 0 1 7.51-3.11A13 13 0 0 1 81 192h-2a11 11 0 0 0-11-11c-1.94 0-4.75 1.16-6.11 2.53l-2.36 2.36a6.93 6.93 0 0 1-7.56 1.22l-.84-.43a8.08 8.08 0 0 1-4.13-6.66V145H11.98a6.1 6.1 0 0 0-4.87 3.03l-.43.84c-.79 1.58-.4 4 .85 5.24l2.36 2.36a12.04 12.04 0 0 1 3.11 7.51A13 13 0 0 1 0 177v-2a11 11 0 0 0 11-11c0-1.94-1.16-4.75-2.53-6.11l-2.36-2.36a6.93 6.93 0 0 1-1.22-7.56l.43-.84a8.08 8.08 0 0 1 6.66-4.13H47v-35.02a6.1 6.1 0 0 0-3.03-4.87l-.84-.43c-1.59-.8-4-.4-5.24.85l-2.36 2.36A12 12 0 0 1 28 109a13 13 0 1 1 0-26c2.47 0 5.79 1.37 7.53 3.11l2.36 2.36a4.94 4.94 0 0 0 5.24.85l.84-.43A6.1 6.1 0 0 0 47 84.02V49H11.98a8.08 8.08 0 0 1-6.66-4.13l-.43-.84a6.91 6.91 0 0 1 1.22-7.56l2.36-2.36A10.06 10.06 0 0 0 11 28 11 11 0 0 0 0 17v-2a13 13 0 0 1 13 13c0 2.47-1.37 5.79-3.11 7.53l-2.36 2.36a4.94 4.94 0 0 0-.85 5.24l.43.84A6.1 6.1 0 0 0 11.98 47H47V11.98a8.08 8.08 0 0 1 4.13-6.66l.84-.43a6.91 6.91 0 0 1 7.56 1.22l2.36 2.36A10.06 10.06 0 0 0 68 11 11 11 0 0 0 79 0h2a13 13 0 0 1-13 13 12 12 0 0 1-7.53-3.11l-2.36-2.36a4.93 4.93 0 0 0-5.24-.85l-.84.43A6.1 6.1 0 0 0 49 11.98V47h35.02a8.08 8.08 0 0 1 6.66 4.13l.43.84a6.91 6.91 0 0 1-1.22 7.56l-2.36 2.36A10.06 10.06 0 0 0 85 68a11 11 0 0 0 22 0c0-1.94-1.16-4.75-2.53-6.11l-2.36-2.36a6.93 6.93 0 0 1-1.22-7.56l.43-.84a8.08 8.08 0 0 1 6.66-4.13H143V11.98a6.1 6.1 0 0 0-3.03-4.87l-.84-.43c-1.59-.8-4-.4-5.24.85l-2.36 2.36A12 12 0 0 1 124 13a13 13 0 0 1-13-13h2a11 11 0 0 0 11 11c1.94 0 4.75-1.16 6.11-2.53l2.36-2.36a6.93 6.93 0 0 1 7.56-1.22l.84.43a8.08 8.08 0 0 1 4.13 6.66V47h35.02a6.1 6.1 0 0 0 4.87-3.03l.43-.84c.8-1.59.4-4-.85-5.24l-2.36-2.36A12 12 0 0 1 179 28a13 13 0 0 1 13-13zM84.02 143a6.1 6.1 0 0 0 4.87-3.03l.43-.84c.8-1.59.4-4-.85-5.24l-2.36-2.36A12 12 0 0 1 83 124a13 13 0 1 1 26 0c0 2.47-1.37 5.79-3.11 7.53l-2.36 2.36a4.94 4.94 0 0 0-.85 5.24l.43.84a6.1 6.1 0 0 0 4.87 3.03H143v-35.02a8.08 8.08 0 0 1 4.13-6.66l.84-.43a6.91 6.91 0 0 1 7.56 1.22l2.36 2.36A10.06 10.06 0 0 0 164 107a11 11 0 0 0 0-22c-1.94 0-4.75 1.16-6.11 2.53l-2.36 2.36a6.93 6.93 0 0 1-7.56 1.22l-.84-.43a8.08 8.08 0 0 1-4.13-6.66V49h-35.02a6.1 6.1 0 0 0-4.87 3.03l-.43.84c-.79 1.58-.4 4 .85 5.24l2.36 2.36a12.04 12.04 0 0 1 3.11 7.51A13 13 0 1 1 83 68a12 12 0 0 1 3.11-7.53l2.36-2.36a4.93 4.93 0 0 0 .85-5.24l-.43-.84A6.1 6.1 0 0 0 84.02 49H49v35.02a8.08 8.08 0 0 1-4.13 6.66l-.84.43a6.91 6.91 0 0 1-7.56-1.22l-2.36-2.36A10.06 10.06 0 0 0 28 85a11 11 0 0 0 0 22c1.94 0 4.75-1.16 6.11-2.53l2.36-2.36a6.93 6.93 0 0 1 7.56-1.22l.84.43a8.08 8.08 0 0 1 4.13 6.66V143h35.02z'%3E%3C/path%3E%3C/svg%3E");
}
.background.dark .cover {
  filter: brightness(0.6);
}
.background .cover {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: filter 0.3s, opacity 0.3s;
}
.background .cover.loaded {
  opacity: 1;
}

/* components/Banner.vue */
.banner {
  height: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  animation: fade-up 0.6s 0.1s backwards;
  transition: height 0.3s;
}
.banner.full {
  opacity: 0;
  height: calc(100vh - 70px);
  padding-bottom: 100px;
  animation: fade-up 0.6s 0.5s forwards;
}
.banner.full .subtitle {
  opacity: 0;
  animation: fade-up-opacity 0.8s 0.5s forwards;
}
.banner .title {
  font-weight: bold;
  font-size: 2.75rem;
}
.banner .subtitle {
  width: 80%;
  font-size: 1.25rem;
  opacity: 0.8;
  animation: fade-up-opacity 0.6s 0.1s backwards;
}
.banner .subtitle .text {
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.banner .icon-up {
  font-size: 20px;
  position: absolute;
  bottom: 60px;
  left: calc(50% - 10px);
  transform: rotate(180deg);
  animation: moveDown 2s ease-in-out infinite;
  cursor: pointer;
}
@media (max-width: 768px) {
  .banner {
    align-items: flex-start;
    height: 240px;
  }
  .banner .title {
    font-size: 2.25rem;
  }
  .banner .subtitle {
    height: 50px;
    font-size: 1.125rem;
    margin-left: 8px;
  }
  .banner .subtitle .text {
    text-align: left;
  }
}

.banner-page {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 2rem;
  min-height: 380px;
  background-size: cover;
}
.banner-page .top {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2rem;
}
.banner-page .top .title {
  display: flex;
  flex-direction: column;
}
.banner-page .top .title .title-small {
  color: var(--main-font-second-color);
  font-size: 0.875rem;
}
.banner-page .top .title .title-big {
  font-size: 2.25rem;
  font-weight: bold;
  line-height: 1.2;
  margin-top: 12px;
}
.banner-page .footer {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
}
.banner-page .footer .footer-left {
  margin-top: auto;
  color: var(--main-font-second-color);
  opacity: 0.8;
}
.banner-page.image {
  color: #fff !important;
}
.banner-page.image .top .title-small {
  color: #fff;
  opacity: 0.6;
}
.banner-page.image .footer .footer-left {
  color: #fff;
}
.banner-page.image .footer .iconfont {
  color: #fff !important;
}
@media (max-width: 1200px) {
  .banner-page {
    min-height: 300px;
  }
}
@media (max-width: 768px) {
  .banner-page {
    min-height: 260px;
  }
  .banner-page .top-right,
  .banner-page .footer-right {
    display: none;
  }
}

/* components/Control.vue */
.control {
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 100vh;
  z-index: 1109;
}
.control .close-control {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 35px;
  height: 35px;
  padding: 0;
  opacity: 0;
  transition: background-color 0.3s, opacity 0.3s;
  border-radius: 50%;
  cursor: pointer;
}
.control .close-control .iconfont {
  font-size: 18px;
  line-height: 1;
  transition: color 0.3s, opacity 0.3s;
}
.control .close-control:hover {
  background-color: var(--main-color);
}
.control .close-control:hover .iconfont {
  color: var(--main-card-background);
}
.control .control-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background-color: var(--main-mask-background);
}
.control .control-content {
  position: absolute;
  animation: fade-up 0.5s forwards;
}
.control .control-content .menu {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.control .control-content .menu .menu-item {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 6px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 1px solid var(--main-card-border);
  background-color: var(--main-card-background);
  transition: transform 0.3s, background-color 0.3s;
  cursor: pointer;
}
.control .control-content .menu .menu-item .iconfont {
  font-size: 24px;
  color: var(--main-font-color);
  transition: color 0.3s;
}
.control .control-content .menu .menu-item.open {
  background-color: var(--main-color);
}
.control .control-content .menu .menu-item.open .iconfont {
  color: #fff;
}
.control .control-content .menu .menu-item:hover {
  transform: scale(1.05);
}
.control .control-content .menu .menu-item:active {
  transform: scale(1);
}

/* components/Copyright.vue */
.copyright {
  position: relative;
  background-color: var(--main-card-second-background);
  padding: 18px;
  margin-top: 2rem;
  overflow: hidden;
}
.copyright .title {
  display: flex;
  flex-direction: column;
}
.copyright .title .post-link {
  margin-top: 2px;
  font-size: 14px;
  opacity: 0.6;
}
.copyright .title .post-link:hover {
  opacity: 1;
}
.copyright > .post-meta {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin: 1rem 0;
}
.copyright > .post-meta .meta-item {
  display: flex;
  flex-direction: column;
  margin-right: 2rem;
}
.copyright > .post-meta .meta-item .name {
  margin-top: 4px;
  font-size: 14px;
  opacity: 0.6;
  transition: color 0.3s, opacity 0.3s;
  cursor: pointer;
}
.copyright > .post-meta .meta-item.cc .name:hover {
  opacity: 1;
  color: var(--main-color);
}
.copyright .meta-tip {
  opacity: 0.4;
}
.copyright::after {
  content: "\e021";
  position: absolute;
  top: -4rem;
  right: -4rem;
  font-family: "iconfont";
  opacity: 0.1;
  font-size: 16rem;
  transform: rotate(334deg);
}
@media (max-width: 768px) {
  .copyright .post-meta {
    display: none;
  }
  .copyright .meta-tip {
    display: inline-block;
    margin-top: 12px;
    font-size: 14px;
  }
}

/* components/Footer.vue */
.main-footer {
  display: flex;
  margin-top: 1rem;
  padding: 1rem 0;
  background-color: var(--main-card-background);
  border-top: 1px solid var(--main-card-border);
  overflow: hidden;
  animation: show 0.3s backwards;
  transition: color 0.3s, border 0.3s, background-color 0.3s;
}
.main-footer .footer-content {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 1rem;
  color: var(--main-font-color);
  line-height: 1;
  min-height: 32px;
}
.main-footer .footer-content .copyright .icp .iconfont {
  font-size: 20px;
  opacity: 0.6;
}
.main-footer .footer-content .copyright .upyun .iconfont {
  font-size: 20px;
  font-weight: normal;
}
.main-footer .footer-content .meta {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.main-footer .footer-content .meta .power {
  margin-right: 4px;
}
.main-footer .footer-content .meta .power .by {
  font-weight: normal;
  opacity: 0.8;
  margin-right: 6px;
}
.main-footer .footer-content .meta .rss {
  margin-right: 4px;
}
.main-footer .footer-content .meta .rss .iconfont {
  font-weight: normal;
  margin-right: 6px;
}
.main-footer .footer-content .meta .cc .iconfont {
  margin: 0 2px;
  font-weight: normal;
}
.main-footer .footer-content .link {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  font-weight: bold;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  padding: 8px;
  margin: 0 2px;
  height: 38px;
  border-radius: 12px;
  transition: color 0.3s, background-color 0.3s;
  cursor: pointer;
}
.main-footer .footer-content .link .iconfont {
  font-size: 22px;
  margin-right: 4px;
  transition: color 0.3s;
}
.main-footer .footer-content .link:hover {
  color: var(--main-color);
  background-color: var(--main-color-bg);
}
.main-footer .footer-content .link:hover .iconfont {
  color: var(--main-color);
}
@media (max-width: 768px) {
  .main-footer .footer-content {
    font-size: 14px;
  }
  .main-footer .footer-content .meta {
    display: none;
  }
}
@media (max-width: 420px) {
  .main-footer .footer-content .copyright .icp .iconfont {
    display: none;
  }
}

/* components/FooterLink.vue */
.footer-link {
  width: 100%;
  max-width: 1200px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  flex-direction: row;
  margin: 1rem auto;
  margin-bottom: 3rem;
  padding: 0 1rem;
  animation: show 0.3s backwards;
}
.footer-link .footer-bar {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 2rem;
}
.footer-link .footer-bar .site-title {
  font-weight: bold;
  font-size: 22px;
}
.footer-link .footer-bar .site-desc {
  margin: 0.6rem 0;
  font-weight: bold;
  font-size: 18px;
  color: var(--main-font-second-color);
}
.footer-link .footer-bar .to-home {
  padding: 8px 16px;
  border-radius: 25px;
  margin-top: 8px;
  font-size: 14px;
  color: var(--main-font-color);
  background-color: var(--main-card-second-background);
  border: 1px solid var(--main-card-border);
  transition: color 0.3s, transform 0.3s, border-color 0.3s, background-color 0.3s;
  cursor: pointer;
}
.footer-link .footer-bar .to-home:hover {
  color: var(--main-card-background);
  background-color: var(--main-color);
  transform: scale(1.1);
  border-color: var(--main-color);
}
.footer-link .footer-social {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 60px minmax(0, 1fr);
  align-items: center;
  margin-top: 2rem;
}
.footer-link .footer-social .footer-social-side {
  display: flex;
  align-items: center;
  gap: 52px;
  min-width: 0;
  padding: 0 26px;
  box-sizing: border-box;
}
.footer-link .footer-social .footer-social-left {
  justify-content: flex-end;
}
.footer-link .footer-social .footer-social-right {
  justify-content: flex-start;
}
.footer-link .footer-social .social-link {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  border-radius: 50%;
  background-color: var(--main-font-color);
  transition: transform 0.3s, background-color 0.3s;
}
.footer-link .footer-social .social-link .iconfont {
  font-size: 20px;
  color: var(--main-card-background);
}
.footer-link .footer-social .social-link .social-mark {
  color: var(--main-card-background);
  font-family: Arial, sans-serif;
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
}
.footer-link .footer-social .social-link:hover {
  transform: scale(1.15);
  background-color: var(--main-color);
}
.footer-link .footer-social .social-link:active {
  transform: scale(1);
}
.footer-link .footer-social .footer-avatar {
  position: relative;
  width: 60px;
  height: 60px;
  margin: 0;
  grid-column: 2;
}
.footer-link .footer-social .footer-avatar .logo {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  transition: transform 0.3s;
  cursor: pointer;
}
.footer-link .footer-social .footer-avatar .logo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.footer-link .footer-social .footer-avatar .logo:hover {
  transform: scale(1.2);
}
.footer-link .footer-social .footer-avatar .logo:active {
  transform: scale(1);
}
.footer-link .footer-social .footer-avatar .footer-avatar-note {
  position: absolute;
  left: 40px;
  bottom: -6px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  max-width: 26px;
  width: 26px;
  height: 26px;
  padding: 2px;
  font-size: 12px;
  color: var(--main-font-color);
  background-color: var(--main-card-background);
  border: 1px solid var(--main-card-border);
  border-radius: 50%;
  box-sizing: border-box;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  transition: max-width 0.3s, background-color 0.3s, border-color 0.3s;
  cursor: help;
  overflow: hidden;
  white-space: nowrap;
}
.footer-link .footer-social .footer-avatar .footer-avatar-note .footer-avatar-note-text {
  display: block;
  max-width: 0;
  overflow: hidden;
  opacity: 0;
  line-height: 1.35;
  transition: max-width 0.3s, margin-left 0.3s, opacity 0.2s;
}
.footer-link .footer-social .footer-avatar .footer-avatar-note .footer-avatar-note-emoji {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  font-size: 15px;
  line-height: 1;
  border-radius: 50%;
  background-color: var(--main-card-second-background);
}
.footer-link .footer-social .footer-avatar .footer-avatar-note:hover, .footer-link .footer-social .footer-avatar .footer-avatar-note:focus-visible {
  max-width: min(210px, 100vw - 2rem);
  width: max-content;
  height: 26px;
  min-height: 26px;
  padding-right: 6px;
  justify-content: flex-start;
  border-radius: 999px;
  background-color: var(--main-card-second-background);
  border-color: var(--main-color);
}
.footer-link .footer-social .footer-avatar .footer-avatar-note:hover .footer-avatar-note-text, .footer-link .footer-social .footer-avatar .footer-avatar-note:focus-visible .footer-avatar-note-text {
  max-width: 175px;
  margin-left: 4px;
  opacity: 1;
  white-space: nowrap;
  text-overflow: ellipsis;
  transition: max-width 0.3s, margin-left 0.3s, opacity 0.15s 0.3s;
}
@media (max-width: 768px) {
  .footer-link .footer-social {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    grid-template-columns: none;
  }
  .footer-link .footer-social .footer-social-side {
    display: contents;
  }
  .footer-link .footer-social .footer-avatar {
    display: none;
  }
}
.footer-link .footer-sitemap {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 1rem 0;
}
.footer-link .footer-sitemap .sitemap-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 120px;
}
.footer-link .footer-sitemap .sitemap-item .title {
  display: inline-block;
  margin: 1rem 0;
  font-size: 16px;
  font-weight: bold;
  color: var(--main-font-second-color);
}
.footer-link .footer-sitemap .sitemap-item .title.friends {
  display: flex;
  flex-direction: row;
  align-items: center;
  cursor: pointer;
}
.footer-link .footer-sitemap .sitemap-item .title.friends .iconfont {
  font-weight: normal;
  margin-left: 6px;
  color: var(--main-font-second-color);
  transition: color 0.3s;
}
.footer-link .footer-sitemap .sitemap-item .title.friends .iconfont:hover {
  color: var(--main-color);
}
.footer-link .footer-sitemap .sitemap-item .links {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.footer-link .footer-sitemap .sitemap-item .links .link-text {
  color: var(--main-font-color);
  display: inline-block;
  max-width: 120px;
  width: max-content;
  margin: 4px 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow-wrap: break-word;
  padding: 8px;
  border-radius: 12px;
  transition: color 0.3s, background-color 0.3s;
  cursor: pointer;
}
.footer-link .footer-sitemap .sitemap-item .links .link-text:hover {
  color: var(--main-color);
  background-color: var(--main-color-bg);
}
.footer-link .footer-sitemap .sitemap-item.sitemap-friends .title.friends {
  gap: 4px;
  cursor: default;
}
.footer-link .footer-sitemap .sitemap-item.sitemap-friends .title.friends .friends-refresh {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: var(--main-font-second-color);
  background: transparent;
  cursor: pointer;
  transition: color 0.3s, background-color 0.3s, transform 0.3s;
}
.footer-link .footer-sitemap .sitemap-item.sitemap-friends .title.friends .friends-refresh .iconfont {
  margin-left: 0;
}
.footer-link .footer-sitemap .sitemap-item.sitemap-friends .title.friends .friends-refresh:hover {
  color: var(--main-color);
  background-color: var(--main-color-bg);
  transform: rotate(180deg);
}

/* components/LazyLoader.vue */
.loading {
  background: linear-gradient(90deg, var(--main-card-border) 25%, var(--main-card-background) 37%, var(--main-card-border) 63%);
  background-size: 400% 100%;
  animation: skeleton-loading 1.4s ease infinite;
}

.hidden {
  display: none;
}

/* components/List/LinkList.vue */
.link-list .link-type-list {
  margin-top: 1rem;
}
.link-list .link-type-list .title {
  margin-left: 6px;
  margin-bottom: 1.6rem;
}
.link-list .link-type-list .title .name {
  border-bottom: none;
  margin-bottom: 4px;
}
.link-list .link-type-list .title .name .name-count {
  color: var(--main-font-second-color);
}
.link-list .link-type-list .title .tip {
  color: var(--main-font-second-color);
}
.link-list .link-type-list .all-link {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(5, 1fr);
}
.link-list .link-type-list .all-link .link-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 90px;
  width: 100%;
  padding: 12px;
}
.link-list .link-type-list .all-link .link-card.loss {
  pointer-events: none;
}
.link-list .link-type-list .all-link .link-card .cover {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  min-width: 60px;
  margin-right: 20px;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(90deg, var(--main-card-border) 25%, var(--main-card-background) 37%, var(--main-card-border) 63%);
  background-size: 400% 100%;
  animation: skeleton-loading 1.4s ease infinite;
  transition: all 0.6s;
}
.link-list .link-type-list .all-link .link-card .cover .cover-img {
  width: 100%;
  height: 100%;
  background-color: var(--main-card-background);
  opacity: 0;
  filter: blur(10px);
  transition: filter 0.3s, opacity 0.3s;
}
.link-list .link-type-list .all-link .link-card .cover .cover-img.loaded {
  opacity: 1;
  filter: blur(0);
}
.link-list .link-type-list .all-link .link-card .data {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.link-list .link-type-list .all-link .link-card .data .name {
  font-weight: bold;
  font-size: 18px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  line-clamp: 1;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  white-space: nowrap;
}
.link-list .link-type-list .all-link .link-card .data .desc {
  font-size: 15px;
  margin-top: 4px;
  line-height: 1.2;
  color: var(--main-font-second-color);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  transition: color 0.3s, opacity 0.3s;
}
.link-list .link-type-list .all-link .link-card:hover {
  color: var(--main-card-background);
  background-color: var(--main-color);
  border-color: var(--main-color);
  box-shadow: 0 0 16px 6px var(--main-color-bg);
}
.link-list .link-type-list .all-link .link-card:hover .cover {
  margin-right: 6px;
  min-width: 0;
  opacity: 0;
  width: 0;
  height: 0;
}
.link-list .link-type-list .all-link .link-card:hover .data .desc {
  opacity: 0.7;
  color: var(--main-card-background);
}
@media (max-width: 1200px) {
  .link-list .link-type-list .all-link {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (max-width: 992px) {
  .link-list .link-type-list .all-link {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 768px) {
  .link-list .link-type-list .all-link {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 576px) {
  .link-list .link-type-list .all-link {
    grid-template-columns: 1fr;
  }
}

.no-data {
  text-align: center;
  margin-top: 40px;
  font-size: 1.4rem;
  font-weight: bold;
}

/* components/List/PostList.vue */
.post-lists .post-item {
  padding: 0 !important;
  display: flex;
  margin-bottom: 1rem;
  animation: fade-up 0.6s 0.4s backwards;
  cursor: pointer;
  overflow: hidden;
  min-height: 12.5rem;
  height: 12.5rem;
}
.post-lists .post-item .post-cover {
  flex: 0 0 35%;
  min-height: 12.5rem;
  overflow: hidden;
  transform: translateZ(0);
}
.post-lists .post-item .post-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: center center;
  will-change: transform, filter;
  transition: transform 0.5s ease-out, filter 0.5s ease-out;
  backface-visibility: hidden;
}
.post-lists .post-item .post-content {
  flex: 1;
  min-width: 0;
  padding: 1.6rem 2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.post-lists .post-item .post-content .post-category {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  color: var(--main-font-second-color);
  font-size: 0.875rem;
}
.post-lists .post-item .post-content .post-category .cat-name {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.post-lists .post-item .post-content .post-category .cat-name .iconfont {
  opacity: 0.8;
  margin-right: 6px;
  color: var(--main-font-second-color);
}
.post-lists .post-item .post-content .post-category .top {
  margin-left: 12px;
  color: var(--main-color);
}
.post-lists .post-item .post-content .post-category .top .iconfont {
  opacity: 0.8;
  color: var(--main-color);
}
.post-lists .post-item .post-content .post-title {
  font-size: 1.25rem;
  line-height: 1.5;
  font-weight: bold;
  margin: 0.8rem 0;
  transition: color 0.3s;
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  word-break: normal;
}
.post-lists .post-item .post-content .post-desc {
  margin-top: -0.4rem;
  margin-bottom: 0.8rem;
  opacity: 0.8;
  line-height: 1.5;
  display: -webkit-box;
  overflow: hidden;
  word-break: break-all;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.post-lists .post-item .post-content .post-meta {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  color: var(--main-font-second-color);
}
.post-lists .post-item .post-content .post-meta .post-tags {
  display: flex;
  flex: 0 1 auto;
  min-width: 0;
  max-width: calc(100% - 6rem);
  flex-wrap: nowrap;
  opacity: 0.8;
  margin-right: 20px;
  overflow: hidden;
  white-space: nowrap;
  mask: linear-gradient(90deg, #fff 0, #fff 90%, hsla(0, 0%, 100%, 0.6) 95%, hsla(0, 0%, 100%, 0) 100%);
}
.post-lists .post-item .post-content .post-meta .post-tags .tags-name {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex: 0 0 auto;
  margin-right: 12px;
  white-space: nowrap;
  transition: color 0.3s;
}
.post-lists .post-item .post-content .post-meta .post-tags .tags-name .iconfont {
  font-weight: normal;
  opacity: 0.6;
  margin-right: 4px;
  transition: color 0.3s;
}
.post-lists .post-item .post-content .post-meta .post-tags .tags-name:hover {
  color: var(--main-color);
}
.post-lists .post-item .post-content .post-meta .post-tags .tags-name:hover .iconfont {
  color: var(--main-color);
}
@media (max-width: 768px) {
  .post-lists .post-item .post-content .post-meta .post-tags {
    flex-wrap: nowrap;
  }
}
.post-lists .post-item .post-content .post-meta .post-time {
  opacity: 0.6;
  flex-shrink: 0;
  font-size: 0.8125rem;
  white-space: nowrap;
}
.post-lists .post-item.simple {
  animation: none;
  padding: 0.5rem 1.4rem;
  background-color: var(--main-card-second-background);
  height: auto;
}
.post-lists .post-item:last-child {
  margin-bottom: 0;
}
.post-lists .post-item:hover .post-cover img {
  filter: brightness(0.8);
  transform: scale(1.05);
}
.post-lists .post-item:hover .post-content .post-title {
  color: var(--main-color);
}
.post-lists .post-item:active {
  transform: scale(0.98);
}
@media (max-width: 768px) {
  .post-lists .post-item {
    flex-direction: column;
    min-height: 0;
    height: auto;
  }
  .post-lists .post-item .post-cover {
    flex: none;
    width: 100%;
    height: 12.5rem;
    min-height: 0;
  }
}
.post-lists .post-item.cover-left {
  flex-direction: row;
}
.post-lists .post-item.cover-right {
  flex-direction: row-reverse;
}
.post-lists .post-item.cover-both:nth-child(odd) {
  flex-direction: row;
}
.post-lists .post-item.cover-both:nth-child(even) {
  flex-direction: row-reverse;
}
@media (max-width: 768px) {
  .post-lists .post-item.cover-left, .post-lists .post-item.cover-right, .post-lists .post-item.cover-both {
    flex-direction: column !important;
  }
}
.post-lists.layout-grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns, 2), 1fr);
  gap: var(--grid-gap, 1rem);
}
.post-lists.layout-grid .post-item {
  margin: 0;
  flex-direction: column;
  min-height: 0;
  height: auto;
}
.post-lists.layout-grid .post-item .post-cover {
  flex: none;
  width: 100%;
  height: 14.0625rem;
  min-height: 0;
}
.post-lists.layout-grid .post-item .post-content {
  flex: 1;
}
@media (max-width: 768px) {
  .post-lists.layout-grid {
    grid-template-columns: 1fr;
  }
}

/* components/List/TypeBar.vue */
.type-bar {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  padding: 0.6rem;
  font-weight: bold;
  animation: fade-up 0.6s 0.3s backwards;
}
.type-bar .all-type {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-right: 12px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}
.type-bar .all-type::-webkit-scrollbar {
  display: none;
}
.type-bar .all-type {
  mask: linear-gradient(90deg, #fff 0, #fff 90%, hsla(0, 0%, 100%, 0.6) 95%, hsla(0, 0%, 100%, 0) 100%);
}
.type-bar .all-type .type-item {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  padding: 0.1rem 0.5rem;
  margin-right: 6px;
  font-weight: bold;
  border-radius: 8px;
  white-space: nowrap;
  min-height: 1.875rem;
  height: auto;
  line-height: 1.5;
  cursor: pointer;
}
.type-bar .all-type .type-item .num {
  margin-left: 4px;
  font-weight: normal;
  padding: 2px 6px;
  font-size: 0.75rem;
  color: var(--main-font-color);
  background-color: var(--main-card-border);
  border-radius: 8px;
}
.type-bar .all-type .type-item.choose {
  color: var(--main-card-background);
  background-color: var(--main-color);
}
.type-bar .all-type .type-item.choose .num {
  color: var(--main-color);
}
.type-bar .all-type .type-item.hidden {
  display: none;
}
.type-bar .all-type .type-item:hover {
  color: var(--main-card-background);
  background-color: var(--main-color);
}
.type-bar .more-type {
  flex: 0 0 auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  white-space: nowrap;
  margin-right: 4px;
  margin-left: 8px;
}
.type-bar .more-type .iconfont {
  font-size: 0.9375rem;
  margin-right: 8px;
}
.type-bar .more-type:hover .iconfont {
  color: var(--main-color);
}

/* components/Loading.vue */
.loading {
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 100vh;
  background-color: var(--main-card-background);
  z-index: 9999;
}
.loading .logo {
  width: 100px;
  height: 100px;
  display: block;
  border-radius: 50%;
  object-fit: cover;
  animation: loading 2s infinite;
}
.loading .tip {
  position: absolute;
  bottom: 2rem;
  font-size: 14px;
  opacity: 0;
  transition: opacity 0.3s;
}
.loading .tip.show {
  opacity: 0.6;
}

/* components/Message.vue */
.message {
  position: relative;
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60px;
  width: 100%;
  width: 100vw;
  background-color: var(--main-color);
  z-index: 3000;
}
.message .message-content {
  display: flex;
  flex-direction: row;
  align-items: center;
  font-size: 18px;
  font-weight: bold;
}
.message .message-content .text {
  color: var(--main-card-background);
}
.message .message-content .close {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 12px;
  padding: 10px;
  border-radius: 50%;
  transition: background-color 0.3s;
  cursor: pointer;
}
.message .message-content .close .iconfont {
  font-size: 14px;
  color: var(--main-card-background);
  opacity: 0.6;
  transition: opacity 0.3s;
}
.message .message-content .close:hover {
  background-color: var(--main-color-white);
}
.message .message-content .close:hover .iconfont {
  opacity: 1;
}
.message.success {
  background-color: var(--main-success-color);
}
.message.warning {
  background-color: var(--main-warning-color);
}
.message.error {
  background-color: var(--main-error-color);
}
.message.info {
  background-color: var(--main-info-color);
}
.message::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  z-index: -1;
  background-color: var(--main-color-white);
  transition: width 0.3s;
  animation: loading-width var(--duration) linear forwards;
}
.message.always::after {
  width: 100%;
  animation: loading 1.5s infinite;
}

/* components/MobileMenu.vue */
.mobile-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 3000;
}
.mobile-menu .menu-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background-color: var(--main-mask-background);
}
.mobile-menu .menu-content {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 100%;
  max-width: 300px;
  border-radius: 12px 0 0 12px;
  padding: 20px;
  overflow: auto;
}
.mobile-menu .menu-content .close-control {
  position: absolute;
  top: 10px;
  right: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 35px;
  height: 35px;
  padding: 0;
  transition: background-color 0.3s, opacity 0.3s;
  border-radius: 50%;
  cursor: pointer;
}
.mobile-menu .menu-content .close-control .iconfont {
  font-size: 18px;
  line-height: 1;
  color: var(--main-font-second-color);
  transition: color 0.3s, opacity 0.3s;
}
.mobile-menu .menu-content .close-control:hover {
  background-color: var(--main-color);
}
.mobile-menu .menu-content .close-control:hover .iconfont {
  color: var(--main-card-background);
}
.mobile-menu .menu-content .menu-list {
  margin-bottom: 20px;
}
.mobile-menu .menu-content .menu-list:last-child {
  margin-bottom: 0;
}
.mobile-menu .menu-content .menu-item {
  margin-bottom: 12px;
}
.mobile-menu .menu-content .menu-item .link-title {
  font-size: 14px;
  margin-bottom: 12px;
  display: inline-block;
  color: var(--main-font-second-color);
}
.mobile-menu .menu-content .menu-item .link-child {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr 1fr;
}
.mobile-menu .menu-content .menu-item .link-child .link-child-btn {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  border-radius: 8px;
  padding: 10px 12px;
  background-color: var(--main-card-background);
  border: 1px solid var(--main-card-border);
  box-shadow: 0 8px 16px -4px var(--main-border-shadow);
  font-size: 15px;
}
.mobile-menu .menu-content .menu-item .link-child .link-child-btn .iconfont {
  margin-right: 6px;
  opacity: 0.6;
}
.mobile-menu .menu-content .menu-item .link-child .link-child-btn .name {
  max-width: 80px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mobile-menu .menu-content .menu-item .link-child .link-child-btn .num {
  opacity: 0.4;
  font-size: 12px;
  margin-bottom: auto;
  margin-left: 4px;
}
.mobile-menu .menu-content .menu-item:last-child {
  margin-bottom: 0;
}
.mobile-menu .menu-content hr {
  margin: 1rem 0;
  opacity: 0.4;
  border: 1px dashed var(--main-font-second-color);
}

/* components/Modal.vue */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 100vh;
  z-index: 2000;
}
.modal .modal-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background-color: var(--main-mask-background);
}
.modal .modal-main {
  position: absolute;
  padding: 0;
  animation: fade-up 0.5s forwards;
  width: calc(100% - 40px);
  overflow: hidden;
}
.modal .modal-main > .title {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  font-size: 1.125rem;
  padding: 20px;
  height: 64px;
  background-color: var(--main-card-background);
  border-bottom: 1px solid var(--main-card-border);
}
.modal .modal-main > .title .title-left {
  width: 100%;
}
.modal .modal-main > .title .title-left .iconfont {
  font-size: 1.25rem;
  margin-right: 8px;
}
.modal .modal-main > .title .close {
  position: absolute;
  right: 20px;
  margin-right: 0;
  font-size: 1rem;
  border-radius: 8px;
  padding: 8px;
  transition: background-color 0.3s;
  cursor: pointer;
}
.modal .modal-main > .title .close:hover {
  background-color: var(--main-card-border);
}
.modal .modal-main .modal-content {
  max-height: calc(var(--height) - 46px);
  padding: 20px;
  overflow: auto;
}

/* components/Nav.vue */
.main-header {
  position: relative;
  width: 100%;
  height: 60px;
  overflow: hidden;
  z-index: 1000;
  animation: show 0.3s backwards;
}
.main-header .main-nav {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 60px;
  background-color: var(--main-card-background);
  transition: background-color 0.3s, backdrop-filter 0.3s;
}
.main-header .main-nav::after {
  content: "";
  position: absolute;
  height: 1px;
  width: 100%;
  left: 0;
  bottom: 0;
  background-color: var(--main-card-border);
  transition: opacity 0.3s;
}
.main-header .main-nav.top {
  background-color: transparent;
  outline: 0px;
}
.main-header .main-nav.top::after {
  opacity: 0;
}
.main-header .main-nav.top .nav-all .site-menu, .main-header .main-nav.up .nav-all .site-menu {
  transform: translateY(0);
  opacity: 1;
}
.main-header .main-nav.top .nav-all .site-title, .main-header .main-nav.up .nav-all .site-title {
  transform: translateY(50px);
  opacity: 0;
}
@media (max-width: 768px) {
  .main-header .main-nav.top .nav-center, .main-header .main-nav.up .nav-center {
    top: -80px;
  }
}
.main-header .nav-all {
  position: relative;
  width: 100%;
  height: 100%;
  max-width: 1400px;
  padding: 0 2rem;
  display: grid;
  grid-template-columns: minmax(200px, 1fr) auto minmax(200px, 1fr);
  align-items: center;
}
.main-header .nav-all .left-nav {
  display: flex;
  flex-direction: row;
  align-items: center;
  min-width: 200px;
}
.main-header .nav-all .left-nav .more-menu {
  position: relative;
  margin-right: 4px;
}
@media (max-width: 512px) {
  .main-header .nav-all .left-nav .more-menu {
    display: none;
  }
}
.main-header .nav-all .left-nav .more-menu .more-card {
  position: absolute;
  left: 0;
  top: 46px;
  opacity: 0;
  visibility: hidden;
  transform-origin: left top;
  transform: scale(0.8) translateY(-5px);
}
.main-header .nav-all .left-nav .more-menu .more-card .more-item {
  margin-top: 0.8rem;
}
.main-header .nav-all .left-nav .more-menu .more-card .more-item:first-child {
  margin-top: 0;
}
.main-header .nav-all .left-nav .more-menu .more-card .more-item .more-name {
  font-size: 14px;
  display: inline-block;
  color: var(--main-font-second-color);
  margin-bottom: 0.6rem;
}
.main-header .nav-all .left-nav .more-menu .more-card .more-item .more-list {
  display: grid;
  gap: 0.8rem;
  grid-template-columns: 1fr 1fr;
}
.main-header .nav-all .left-nav .more-menu .more-card .more-item .more-list .more-link {
  display: flex;
  align-items: center;
  width: 150px;
  padding: 6px 8px;
  border-radius: 8px;
}
.main-header .nav-all .left-nav .more-menu .more-card .more-item .more-list .more-link .link-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 8px;
}
.main-header .nav-all .left-nav .more-menu .more-card .more-item .more-list .more-link:hover {
  color: var(--main-card-background);
  background-color: var(--main-color);
}
.main-header .nav-all .left-nav .more-menu .more-card::after {
  content: "";
  position: absolute;
  top: -20px;
  left: 0;
  width: 100%;
  height: 30px;
  z-index: 1;
}
.main-header .nav-all .left-nav .more-menu .more-card:hover {
  border-color: var(--main-color);
}
.main-header .nav-all .left-nav .more-menu:hover .more-card {
  opacity: 1;
  transform: scale(1) translateY(0);
  visibility: visible;
}
.main-header .nav-all .left-nav .site-name {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: bold;
  height: 34px;
  padding: 0 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: transform 0.3s;
  cursor: pointer;
}
.main-header .nav-all .left-nav .site-name::after {
  content: "\e032";
  font-family: "iconfont";
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  color: var(--main-card-background);
  background-color: var(--main-color);
  font-size: 22px;
  border-radius: 25px;
  opacity: 0;
  transition: opacity 0.3s;
}
@media (min-width: 768px) {
  .main-header .nav-all .left-nav .site-name:hover::after {
    opacity: 1;
  }
  .main-header .nav-all .left-nav .site-name:active {
    transform: scale(0.95);
  }
}
.main-header .nav-all .nav-center {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  width: 100%;
  height: 60px;
  overflow: hidden;
  transition: top 0.3s;
}
.main-header .nav-all .nav-center .site-menu {
  position: absolute;
  width: fit-content;
  min-height: 60px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  z-index: 10;
  opacity: 0;
  transform: translateY(-50px);
  transition: transform 0.3s, opacity 0.3s;
}
.main-header .nav-all .nav-center .site-menu .menu-item {
  position: relative;
  padding: 0 0.4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: auto;
  cursor: pointer;
}
.main-header .nav-all .nav-center .site-menu .menu-item .link-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.2rem;
  padding: 0 0.8rem 0 1rem;
  font-weight: bold;
  height: 35px;
  line-height: 35px;
  border-radius: 50px;
  transition: color 0.3s, background-color 0.3s;
}
.main-header .nav-all .nav-center .site-menu .menu-item .link-child {
  position: absolute;
  top: 35px;
  margin-top: 8px;
  padding: 6px 2px;
  display: flex;
  flex-direction: row;
  align-items: center;
  background-color: var(--main-card-background);
  border: 1px solid var(--main-color);
  box-shadow: 0 8px 12px -3px var(--main-color-bg);
  border-radius: 50px;
  transform: translateY(-10px) scale(0.8);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s, transform 0.3s;
}
.main-header .nav-all .nav-center .site-menu .menu-item .link-child::before {
  content: "";
  position: absolute;
  top: -14px;
  left: 0;
  width: 100%;
  height: 20px;
}
.main-header .nav-all .nav-center .site-menu .menu-item .link-child .link-child-btn {
  display: flex;
  align-items: center;
  border-radius: 100px;
  margin: 0 4px;
  padding: 0.6rem 0.8rem;
  white-space: nowrap;
  transition: color 0.3s, padding 0.3s, background-color 0.3s, box-shadow 0.3s;
}
.main-header .nav-all .nav-center .site-menu .menu-item .link-child .link-child-btn .iconfont {
  margin-right: 8px;
  font-size: 20px;
  transition: color 0.3s;
}
.main-header .nav-all .nav-center .site-menu .menu-item .link-child .link-child-btn:hover {
  color: var(--main-card-background);
  background-color: var(--main-color);
  box-shadow: 0 8px 12px -3px var(--main-color-bg);
  padding: 0.6rem 1rem;
}
.main-header .nav-all .nav-center .site-menu .menu-item .link-child .link-child-btn:hover .iconfont {
  color: var(--main-card-background);
}
.main-header .nav-all .nav-center .site-menu .menu-item:first-child .link-child::after {
  content: "";
  position: absolute;
  top: -60px;
  left: 0;
  width: 50%;
  height: 60px;
}
.main-header .nav-all .nav-center .site-menu .menu-item:last-child .link-child::after {
  content: "";
  position: absolute;
  top: -60px;
  right: 0;
  width: 50%;
  height: 60px;
}
.main-header .nav-all .nav-center .site-menu .menu-item:hover .link-btn {
  color: var(--main-card-background);
  background-color: var(--main-color);
}
.main-header .nav-all .nav-center .site-menu .menu-item:hover .link-child {
  transform: translateY(0) scale(1);
  opacity: 1;
  visibility: visible;
}
.main-header .nav-all .nav-center .site-title {
  position: relative;
  display: inline-block;
  width: 100%;
  min-width: 280px;
  height: 35px;
  font-weight: bold;
  font-size: 18px;
  padding: 4px 8px;
  text-align: center;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  transition: transform 0.3s, opacity 0.3s;
  cursor: pointer;
}
.main-header .nav-all .nav-center .site-title::after {
  content: "返回顶部";
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 35px;
  font-size: 16px;
  border-radius: 50px;
  color: var(--main-card-background);
  background-color: var(--main-color);
  opacity: 0;
  transition: opacity 0.3s;
  z-index: 1;
}
.main-header .nav-all .nav-center .site-title:hover::after {
  opacity: 1;
}
.main-header .nav-all .nav-center .site-title:active {
  transform: scale(0.95);
}
@media (max-width: 768px) {
  .main-header .nav-all .nav-center .site-title::after {
    display: none;
  }
}
.main-header .nav-all .right-nav {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  min-width: 200px;
}
.main-header .nav-all .right-nav .menu-btn {
  margin-left: 0.5rem;
}
.main-header .nav-all .right-nav .menu-btn.mobile {
  display: none;
}
@media (max-width: 768px) {
  .main-header .nav-all .right-nav .menu-btn.mobile {
    display: flex;
  }
  .main-header .nav-all .right-nav .menu-btn.pc {
    display: none;
  }
}
.main-header .nav-all .right-nav .to-top {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 35px;
  height: 35px;
  transition: all 0.3s;
  cursor: pointer;
}
.main-header .nav-all .right-nav .to-top .to-top-btn {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 25px;
  height: 25px;
  border-radius: 40px;
  background-color: var(--main-font-color);
  transition: width 0.3s, height 0.3s, background-color 0.3s;
}
.main-header .nav-all .right-nav .to-top .to-top-btn .num {
  position: absolute;
  font-size: 12px;
  color: var(--main-card-background);
  transition: opacity 0.1s;
}
.main-header .nav-all .right-nav .to-top .to-top-btn .icon-up {
  position: absolute;
  color: var(--main-card-background);
  opacity: 0;
  transition: opacity 0.3s;
}
.main-header .nav-all .right-nav .to-top.hidden {
  width: 0;
  opacity: 0;
  transform: scale(0);
  margin: 0;
}
.main-header .nav-all .right-nav .to-top.long {
  width: 80px;
}
.main-header .nav-all .right-nav .to-top.long .to-top-btn {
  width: 70px;
}
.main-header .nav-all .right-nav .to-top:hover .to-top-btn {
  width: 35px;
  height: 35px;
  background-color: var(--main-color);
}
.main-header .nav-all .right-nav .to-top:hover .to-top-btn .num {
  opacity: 0;
}
.main-header .nav-all .right-nav .to-top:hover .to-top-btn .icon-up {
  opacity: 1;
}
.main-header .nav-all .right-nav .to-top:hover.long {
  width: 80px;
}
.main-header .nav-all .right-nav .to-top:hover.long .to-top-btn {
  width: 80px;
  height: 35px;
}
.main-header .nav-all .right-nav .to-top:active {
  transform: scale(0.9);
}
@media (max-width: 768px) {
  .main-header .nav-all {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 1rem 1.5rem;
  }
  .main-header .nav-all .left-nav,
  .main-header .nav-all .right-nav {
    min-width: auto;
  }
  .main-header .nav-all .nav-center {
    position: absolute;
    top: 0;
    left: 0;
    background-color: var(--main-card-background);
    border-bottom: 1px solid var(--main-card-border);
    z-index: 100;
  }
  .main-header .nav-all .nav-center .site-title {
    font-size: 15px;
    height: auto;
  }
}
.main-header .nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 35px;
  height: 35px;
  padding: 0;
  transition: background-color 0.3s;
  border-radius: 50%;
  cursor: pointer;
}
.main-header .nav-btn .iconfont {
  font-size: 20px;
  line-height: 1;
  transition: color 0.3s, opacity 0.3s;
}
.main-header .nav-btn:hover {
  background-color: var(--main-color);
}
.main-header .nav-btn:hover .iconfont {
  color: var(--main-card-background);
}

/* components/NextPost.vue */
.next-post {
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: 20px;
  background-color: var(--main-card-background);
}
.next-post .post-tip {
  font-size: 14px;
  color: var(--main-font-second-color);
  padding-bottom: 8px;
  margin-bottom: 12px;
  border-bottom: 1px dashed var(--main-card-border);
  transition: color 0.3s;
}
.next-post .post-title {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.next-post.fixed {
  position: fixed;
  right: 20px;
  bottom: 20px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 100;
  width: 300px;
  transform: translateY(180px);
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.35s;
}
.next-post.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition-delay: 0s;
}
.next-post:hover {
  background-color: var(--main-color);
  border-color: var(--main-color);
  color: var(--main-card-background);
  box-shadow: 0 8px 16px -4px var(--main-color-bg);
}
.next-post:hover .post-tip {
  opacity: 0.8;
  color: var(--main-card-background);
}
@media (max-width: 768px) {
  .next-post {
    display: none;
  }
}

/* components/Pagination.vue */
.pagination {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
  width: 100%;
  height: 40px;
  animation: fade-up 0.6s 0.4s backwards;
}
.pagination .page-item {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  overflow: hidden;
  background-color: var(--main-card-background);
  border: 1px solid var(--main-card-border);
  box-shadow: 0 8px 16px -4px var(--main-border-shadow);
  transition: border-color 0.3s, box-shadow 0.3s;
  cursor: pointer;
}
.pagination .page-item.prev, .pagination .page-item.next {
  position: absolute;
  width: 80px;
  left: 0;
}
.pagination .page-item.prev .iconfont, .pagination .page-item.next .iconfont {
  transform: rotate(180deg);
  transition: color 0.3s, transform 0.3s;
}
.pagination .page-item.prev .page-text, .pagination .page-item.next .page-text {
  opacity: 0;
  margin-left: 4px;
  margin-right: -36px;
  transition: opacity 0.3s, margin 0.3s;
}
.pagination .page-item.next {
  left: auto;
  right: 0;
}
.pagination .page-item.next .iconfont {
  transform: rotate(0);
}
.pagination .page-item.next .page-text {
  margin-right: 4px;
  margin-left: -36px;
}
.pagination .page-item:hover {
  border-color: var(--main-color);
  box-shadow: 0 8px 16px -4px var(--main-color-bg);
}
.pagination .page-item:hover .iconfont {
  color: var(--main-color);
}
.pagination .page-item:hover.prev, .pagination .page-item:hover.next {
  color: var(--main-color);
}
.pagination .page-item:hover.prev .page-text, .pagination .page-item:hover.next .page-text {
  opacity: 1;
  margin-right: 0;
}
.pagination .page-item:hover.next .page-text {
  margin-right: 4px;
  margin-left: 0;
}
.pagination .page-number {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.pagination .page-number .page-item {
  margin: 0 6px;
}
.pagination .page-number .page-item.choose {
  color: var(--main-card-background);
  border-color: var(--main-color);
  background-color: var(--main-color);
  box-shadow: 0 8px 16px -4px var(--main-color-bg);
}
.pagination .page-number .point {
  margin: 0 4px;
  transform: translateY(-8px);
  font-size: 22px;
}
.pagination .page-number .fast-jump {
  position: relative;
  margin: 0 6px;
}
.pagination .page-number .fast-jump input {
  border: none;
  outline: none;
  background: none;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  padding: 0 8px;
  font-size: 16px;
  color: var(--main-font-color);
  background-color: var(--main-card-background);
  border: 1px solid var(--main-card-border);
  box-shadow: 0 8px 16px -4px var(--main-border-shadow);
  transition: all 0.3s;
}
.pagination .page-number .fast-jump .iconfont {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 5px;
  right: 5px;
  width: 30px;
  height: 30px;
  border-radius: 4px;
  background-color: var(--main-card-background);
  transition: color 0.3s, opacity 0.3s, background-color 0.3s;
  cursor: pointer;
}
.pagination .page-number .fast-jump .iconfont:hover {
  color: var(--main-card-background);
  background-color: var(--main-color);
}
.pagination .page-number .fast-jump.focus input, .pagination .page-number .fast-jump:hover input {
  width: 100px;
  border-color: var(--main-color);
  box-shadow: 0 8px 16px -4px var(--main-color-bg);
}
.pagination .page-number .fast-jump.focus .iconfont, .pagination .page-number .fast-jump:hover .iconfont {
  opacity: 0.2;
  pointer-events: none;
}
.pagination .page-number .fast-jump.focus .iconfont.click, .pagination .page-number .fast-jump:hover .iconfont.click {
  opacity: 1;
  pointer-events: all;
}
@media (max-width: 768px) {
  .pagination .page-number {
    display: none;
  }
  .pagination .page-item:first-child {
    margin-right: 10px;
  }
  .pagination .page-item:last-child {
    margin-left: 10px;
  }
}

/* components/Plugins/Comments/index.vue */
.comment {
  margin-top: 2rem;
}
.comment .title {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin: 3rem 0 1rem 0;
  padding: 0 6px;
}
.comment .title .name {
  display: flex;
  align-items: center;
  font-size: 24px;
  font-weight: bold;
}
.comment .title .name .iconfont {
  font-size: 26px;
  font-weight: normal;
  margin-right: 8px;
}
.comment .title .tool {
  opacity: 0.6;
  font-size: 14px;
  cursor: pointer;
  transition: opacity 0.3s, color 0.3s;
}
.comment .title .tool:hover {
  opacity: 1;
  color: var(--main-color);
}

/* components/References.vue */
.references {
  margin: 1rem 0;
  padding: 18px;
  margin-top: 2rem;
  background-color: var(--main-card-second-background);
}
.references .title {
  display: flex;
  flex-direction: row;
  align-items: center;
  color: var(--main-font-second-color);
  font-size: 15px;
  margin-bottom: 0.8rem;
}
.references .title .iconfont {
  margin-right: 4px;
  font-size: 18px;
  color: var(--main-font-second-color);
  opacity: 0.6;
}
.references .list {
  display: flex;
  flex-direction: column;
  margin: 0;
  list-style-type: none;
  padding-left: 0.4rem;
}
.references .list .list-item {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  position: relative;
  width: max-content;
  padding-left: 1rem;
  margin-bottom: 0.4rem;
  overflow: auto;
  transition: color 0.3s;
}
.references .list .list-item .item-title {
  padding-bottom: 2px;
}
.references .list .list-item:last-child {
  margin-bottom: 0;
}
.references .list .list-item::before {
  content: "";
  position: absolute;
  left: 0;
  width: 8px;
  height: 8px;
  opacity: 0.6;
  background-color: var(--main-font-color);
  border-radius: 50%;
  transition: background-color 0.3s;
}
.references .list .list-item::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 0;
  margin-left: 1rem;
  background-color: var(--main-color);
  transition: width 0.3s;
}
.references .list .list-item:hover {
  color: var(--main-color);
}
.references .list .list-item:hover::before {
  background-color: var(--main-color);
}
.references .list .list-item:hover::after {
  width: calc(100% - 1rem);
}

/* components/RelatedPost.vue */
.related-post {
  margin-top: 1rem;
}
.related-post .title {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin: 3rem 0 1rem 0;
  padding: 0 6px;
}
.related-post .title .name {
  display: flex;
  align-items: center;
  font-size: 24px;
  font-weight: bold;
}
.related-post .title .name .iconfont {
  font-size: 26px;
  font-weight: normal;
  margin-right: 8px;
}
.related-post .title .shuffle {
  opacity: 0.6;
  font-size: 14px;
  transition: color 0.3s, opacity 0.3s;
  cursor: pointer;
}
.related-post .title .shuffle:hover {
  opacity: 1;
  color: var(--main-color);
}

/* components/RewardBtn.vue */
.reward {
  position: relative;
  display: flex;
  justify-content: center;
  width: max-content;
  margin: 1rem auto;
  user-select: none;
  cursor: pointer;
}
.reward .reward-btn {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  height: 40px;
  width: 120px;
  border-radius: 8px;
  color: #fff;
  background-color: var(--main-color-red);
  transition: box-shadow 0.5s;
}
.reward .reward-btn .iconfont {
  color: #fff;
  font-weight: normal;
  margin-right: 6px;
}
.reward .reward-btn:hover {
  box-shadow: 0 0 40px 6px rgba(255, 56, 66, 0.4392156863);
}

.reward-modal-main {
  max-width: 430px;
}

.reward-card .thank {
  display: inline-flex;
  justify-content: center;
  margin-bottom: 1rem;
  width: 100%;
  color: var(--main-color);
  font-weight: bold;
}
.reward-card .qr {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr 1fr;
}
.reward-card .qr .qr-img {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.reward-card .qr .qr-img img {
  width: 100%;
  height: auto;
  border-radius: 16px;
  overflow: hidden;
}
.reward-card .qr .qr-img .tip {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-top: 0.8rem;
  font-weight: bold;
}
.reward-card .qr .qr-img .tip.wechat {
  color: #07c160;
}
.reward-card .qr .qr-img .tip.alipay {
  color: #1677ff;
}
.reward-card .qr .qr-img .tip .iconfont {
  margin-right: 6px;
  font-size: 21px;
  font-weight: normal;
}
.reward-card .qr .qr-img .tip.wechat .iconfont {
  color: #07c160;
}
.reward-card .qr .qr-img .tip.alipay .iconfont {
  color: #1677ff;
}
.reward-card .all-list {
  margin-top: 20px;
  display: flex;
  align-items: center;
  flex-direction: column;
  background-color: var(--main-card-second-background);
}
.reward-card .all-list .title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 8px;
  transition: color 0.3s;
}
.reward-card .all-list .tip {
  text-align: center;
  font-size: 12px;
  opacity: 0.6;
}
.reward-card .all-list:hover .title {
  color: var(--main-color);
}

/* components/RightMenu.vue */
.right-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999;
  transition: opacity 0.2s;
}
.right-menu .menu-content {
  position: absolute;
  width: 180px;
  background-color: var(--main-card-background);
  animation: fade-up 0.2s forwards;
  transition: opacity 0.3s, border-color 0.3s, box-shadow 0.3s, background-color 0.3s;
}
.right-menu .menu-content .tools {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  justify-content: space-between;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--main-card-border);
}
.right-menu .menu-content .tools .btn {
  width: 34px;
  height: 34px;
  min-width: 34px;
}
.right-menu .menu-content .all-menu {
  margin-top: 12px;
}
.right-menu .menu-content .all-menu .btn {
  justify-content: flex-start;
  margin-bottom: 6px;
}
.right-menu .menu-content .all-menu .btn .iconfont {
  font-size: 20px;
}
.right-menu .menu-content .all-menu .btn:last-child {
  margin-bottom: 0;
}
.right-menu .menu-content .all-menu.general {
  padding-top: 12px;
  border-top: 1px solid var(--main-card-border);
}
.right-menu .menu-content .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  padding: 8px;
  transition: color 0.3s, background-color 0.3s;
}
.right-menu .menu-content .btn .iconfont {
  font-size: 20px;
  transition: color 0.3s;
}
.right-menu .menu-content .btn .name {
  margin-left: 12px;
}
.right-menu .menu-content .btn:hover {
  color: var(--main-card-background);
  background-color: var(--main-color);
}
.right-menu .menu-content .btn:hover .iconfont {
  color: var(--main-card-background);
}

.modal-tip {
  font-size: 15px;
  margin-top: -4px;
  margin-bottom: 1rem;
  display: block;
  color: var(--main-font-second-color);
  border-left: 4px solid var(--main-card-border);
  border-radius: 4px;
  padding: 8px 0 8px 12px;
  background-color: var(--main-card-second-background);
}

/* components/Search.vue */
.ais-InstantSearch {
  height: 100%;
}
.ais-InstantSearch .ais-SearchBox {
  height: 40px;
  width: 100%;
}
.ais-InstantSearch .ais-SearchBox .ais-SearchBox-input {
  width: 100%;
  outline: none;
  border-radius: 8px;
  font-size: 16px;
  padding: 0.6rem 1rem;
  color: var(--main-font-color);
  font-family: var(--main-font-family);
  border: 1px solid var(--main-card-border);
  background-color: var(--main-card-second-background);
  transition: border-color 0.3s, box-shadow 0.3s;
}
.ais-InstantSearch .ais-SearchBox .ais-SearchBox-input:focus {
  border-color: var(--main-color);
  box-shadow: 0 8px 16px -4px var(--main-color-bg);
}
.ais-InstantSearch .ais-SearchBox .ais-SearchBox-input::-webkit-search-cancel-button {
  display: none;
}
.ais-InstantSearch .ais-SearchBox .ais-SearchBox-loadingIndicator,
.ais-InstantSearch .ais-SearchBox .ais-SearchBox-submit,
.ais-InstantSearch .ais-SearchBox .ais-SearchBox-reset {
  display: none;
}
.ais-InstantSearch .ais-Hits {
  margin-top: 20px;
  min-height: 300px;
  height: 100%;
}
.ais-InstantSearch .ais-Hits .no-result {
  height: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.ais-InstantSearch .ais-Hits .no-result .iconfont {
  font-size: 40px;
  margin-bottom: 12px;
}
.ais-InstantSearch .ais-Hits .no-result .text {
  font-size: 18px;
  opacity: 0.6;
}
.ais-InstantSearch .ais-Hits .search-list .search-item {
  margin-bottom: 12px;
}
.ais-InstantSearch .ais-Hits .search-list .search-item .title {
  display: inline;
  font-size: 16px;
  margin-bottom: 6px;
}
.ais-InstantSearch .ais-Hits .search-list .search-item .anchor {
  margin-top: 6px;
  color: var(--main-font-second-color);
  font-size: 14px;
}
.ais-InstantSearch .ais-Hits .search-list .search-item .anchor::before {
  content: "# ";
}
.ais-InstantSearch .ais-Hits .search-list .search-item .content {
  color: var(--main-font-second-color);
  margin-top: 0.8rem;
  font-size: 12px;
  padding: 8px;
  border-radius: 8px;
}
.ais-InstantSearch .ais-Hits .search-list .search-item p {
  margin: 0;
}
.ais-InstantSearch .ais-Hits .search-list .search-item p mark {
  background-color: transparent;
  color: var(--main-color);
}
.ais-InstantSearch .ais-Hits .search-list .search-item:last-child {
  margin-bottom: 0;
}
.ais-InstantSearch .ais-Pagination {
  margin-top: 20px;
}
.ais-InstantSearch .ais-Pagination .ais-Pagination-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.ais-InstantSearch .ais-Pagination .ais-Pagination-list .ais-Pagination-item {
  margin: 0 4px;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  transition: background-color 0.3s;
  cursor: pointer;
}
.ais-InstantSearch .ais-Pagination .ais-Pagination-list .ais-Pagination-item .ais-Pagination-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.ais-InstantSearch .ais-Pagination .ais-Pagination-list .ais-Pagination-item .ais-Pagination-link:hover {
  color: var(--main-font-color);
}
.ais-InstantSearch .ais-Pagination .ais-Pagination-list .ais-Pagination-item:hover {
  color: var(--main-font-color);
  background-color: var(--main-color);
}
.ais-InstantSearch .ais-Pagination .ais-Pagination-list .ais-Pagination-item:hover .ais-Pagination-link {
  color: var(--main-card-border);
}
.ais-InstantSearch .ais-Pagination .ais-Pagination-list .ais-Pagination-item.ais-Pagination-item--selected {
  font-weight: bold;
  background-color: var(--main-color);
}
.ais-InstantSearch .ais-Pagination .ais-Pagination-list .ais-Pagination-item.ais-Pagination-item--selected .ais-Pagination-link {
  color: var(--main-card-border);
}
.ais-InstantSearch .ais-Pagination .ais-Pagination-list .ais-Pagination-item.ais-Pagination-item--disabled, .ais-InstantSearch .ais-Pagination .ais-Pagination-list .ais-Pagination-item.ais-Pagination-item--nextPage, .ais-InstantSearch .ais-Pagination .ais-Pagination-list .ais-Pagination-item.ais-Pagination-item--lastPage {
  opacity: 0.8;
}
.ais-InstantSearch .ais-Stats {
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: space-between;
  margin-top: 20px;
  opacity: 0.8;
  font-size: 14px;
}
.ais-InstantSearch .ais-Stats .power {
  display: flex;
  flex-direction: row;
  align-items: center;
  font-size: 16px;
  opacity: 0.6;
  transition: color 0.3s, opacity 0.3s;
}
.ais-InstantSearch .ais-Stats .power .iconfont {
  margin-right: 4px;
  font-size: 20px;
  transition: color 0.3s;
}
.ais-InstantSearch .ais-Stats .power .name {
  font-weight: bold;
}
.ais-InstantSearch .ais-Stats .power:hover {
  opacity: 1;
  color: var(--main-color);
}
.ais-InstantSearch .ais-Stats .power:hover .iconfont {
  color: var(--main-color);
}
@media (max-width: 512px) {
  .ais-InstantSearch .ais-Stats {
    justify-content: center;
  }
  .ais-InstantSearch .ais-Stats .information {
    display: none;
  }
}

/* components/Settings.vue */
.settings .set-btn {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border-radius: 25px;
  box-shadow: 0 6px 10px -4px var(--main-dark-shadow);
}
.settings .set-btn .iconfont {
  font-size: 22px;
  margin-left: 10px;
  transition: color 0.3s;
}
.settings .set-btn .set-text {
  margin-left: 10px;
  display: inline-flex;
  opacity: 0;
  font-size: 14px;
  line-height: 1;
  overflow: hidden;
  white-space: nowrap;
  transition: opacity 0.3s;
}
.settings .set-btn:hover {
  width: 140px;
  color: var(--main-card-background);
  border-color: var(--main-color);
  background-color: var(--main-color);
}
.settings .set-btn:hover .iconfont {
  color: var(--main-card-background);
}
.settings .set-btn:hover .set-text {
  opacity: 1;
}

.set-list .title {
  display: block;
  width: 100%;
  margin: 1rem 0;
  font-size: 16px;
  font-weight: bold;
  border-left: 4px solid var(--main-color);
  border-radius: 4px 8px 8px 4px;
  background-color: var(--main-border-shadow);
  padding: 6px 0 6px 12px;
}
.set-list .title:first-child {
  margin-top: 0;
}
.set-list .set-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.set-list .set-item .set-options {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  min-height: 2.75rem;
  height: auto;
  border-radius: 8px;
}
.set-list .set-item .set-options .options {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9375rem;
  border-radius: 8px;
  margin: 4px 8px;
  padding: 6px 8px;
  line-height: 1.4;
  min-width: 30px;
  background-color: var(--main-card-border);
  transition: color 0.3s, background-color 0.3s;
}
.set-list .set-item .set-options .options.choose, .set-list .set-item .set-options .options:hover {
  color: var(--main-card-background);
  background-color: var(--main-color);
  box-shadow: 0 8px 16px -4px var(--main-border-shadow);
}
.set-list .set-item .set-options .options:last-child {
  margin-right: 0;
}
.set-list .set-item .set-options .num {
  margin: 0 4px;
}
.set-list .set-item .set-options input {
  border: none;
  outline: none;
  border-radius: 8px;
  color: var(--main-font-color);
  font-family: var(--main-font-family);
  background-color: var(--main-border-shadow);
  min-height: 2.5rem;
  height: auto;
  padding: 0 1rem;
  font-size: 14px;
}
.set-list .set-item:last-child {
  margin-bottom: 0;
}
@media (max-width: 512px) {
  .set-list .set-item {
    flex-direction: column;
    align-items: flex-start;
  }
  .set-list .set-item .set-options {
    margin-top: 8px;
  }
  .set-list .set-item .set-options .options:first-child {
    margin-left: 0;
  }
}

/* components/Tags/Checkbox.vue */
.checkbox {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin: 1rem 0;
  cursor: pointer;
}
.checkbox .checkbox-box {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  margin-right: 8px;
  border: 1.5px solid var(--main-card-border);
  transition: border 0.3s, background-color 0.3s;
}
.checkbox .checkbox-box::after {
  content: "\e04e";
  position: absolute;
  font-family: "iconfont";
  font-size: 12px;
  color: var(--main-card-background);
  font-weight: bold;
  opacity: 0;
  transform: scale(0);
  transition: opacity 0.3s, transform 0.3s;
}
.checkbox .checkbox-box.check {
  background-color: var(--main-color);
}
.checkbox .checkbox-box.check::after {
  opacity: 1;
  transform: scale(1);
}
.checkbox:hover .checkbox-box {
  border-color: var(--main-color);
}

/* components/Tags/LinkCard.vue */
.link-card {
  display: block;
  width: 100%;
  margin: 1rem 0;
  padding: 1rem;
  background-color: var(--main-card-second-background);
}
.link-card .link-tip {
  display: inline-block;
  width: 100%;
  font-size: 14px;
  opacity: 0.6;
  padding-bottom: 0.8rem;
  margin-bottom: 0.8rem;
  border-bottom: 2px dashed var(--main-card-border);
}
.link-card .link-data {
  height: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.link-card .link-data .link-icon {
  width: 60px;
  height: 60px;
  min-width: 60px;
  margin-right: 0.8rem;
  border-radius: 12px;
  overflow: hidden;
}
.link-card .link-data .link-icon .link-img {
  width: 100%;
  height: 100%;
}
.link-card .link-data .link-icon .iconfont {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  font-weight: bold;
  background-color: var(--main-card-border);
}
.link-card .link-data .link-desc {
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.link-card .link-data .link-desc .link-title {
  margin-bottom: 4px;
  font-size: 18px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow-wrap: break-word;
}
.link-card .link-data .link-desc .link-description {
  color: var(--main-font-second-color);
  font-size: 14px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  transition: color 0.3s;
}
.link-card .link-data .link-go {
  display: flex;
  margin-left: 12px;
  transform: rotate(90deg);
  transition: color 0.3s;
}
.link-card:hover {
  color: var(--main-card-background);
  background-color: var(--main-color);
}
.link-card:hover .link-data .link-desc .link-description {
  color: var(--main-card-background);
  opacity: 0.6;
}
.link-card:hover .link-data .link-go {
  color: var(--main-card-background);
}

/* components/Tags/Slider.vue */
.slider {
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 4px !important;
}
.slider .vue-slider-rail {
  height: 8px;
  background-color: var(--main-color-bg);
  border-radius: 25px;
}
.slider .vue-slider-rail .vue-slider-process {
  border-radius: 25px;
  background-color: var(--main-color);
}
.slider .vue-slider-rail .vue-slider-dot {
  width: 16px;
  height: 16px;
  border: 1px solid var(--main-color-bg);
  background-color: var(--main-color);
  box-shadow: 0.5px 0.5px 2px 1px rgba(0, 0, 0, 0.32);
  border-radius: 50%;
  cursor: pointer;
}

/* views/About.vue */
.about .title {
  font-size: 2.4rem;
  text-align: center;
  border: none;
}
.about .about-content {
  display: grid;
  grid-template-columns: auto auto;
  gap: 20px;
  margin-bottom: 20px;
}
.about .about-content .about-item {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 1.2rem 2rem;
  border-radius: 12px;
  background-color: var(--main-card-background);
  border: 1px solid var(--main-card-border);
  box-shadow: 0 8px 12px -4px var(--main-border-shadow);
  overflow: hidden;
}
.about .about-content .about-item .tip {
  font-size: 14px;
  opacity: 0.8;
  margin-bottom: 12px;
}
.about .about-content .about-item .title1 {
  font-size: 36px;
  font-weight: bold;
  opacity: 0.6;
}
.about .about-content .about-item .title2 {
  font-size: 36px;
  font-weight: bold;
  margin-right: 4rem;
}
.about .about-content .about-item .text {
  font-size: 18px;
  margin: 0.6rem 0;
}
.about .about-content .about-item.child {
  background-color: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  gap: 20px;
}
.about .about-content .about-item.child .about-item {
  height: 100%;
}
.about .about-content .about-item.hello {
  justify-content: center;
  padding: 2rem;
  color: #fff;
  background-image: linear-gradient(120deg, #5b27ff 0%, #00d4ff 100%);
  background-size: 200% 200%;
  animation: gradientFlow 6s ease infinite;
}
.about .about-content .about-item.hello .title2 {
  line-height: 2;
  margin-right: 0;
}
.about .about-content .about-item.pursuit .title2 {
  line-height: 1.2;
}
.about .about-content .about-item.pursuit .title2:last-child {
  display: inline-block;
  background-size: 100% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-repeat: no-repeat;
  background-image: linear-gradient(45deg, #fa7671 50%, #f45f7f);
}
.about .about-content .about-item.character {
  min-height: 220px;
  cursor: pointer;
}
.about .about-content .about-item.character .more {
  margin-top: auto;
  font-size: 14px;
  color: var(--main-color-gray);
}
.about .about-content .about-item.character .more a {
  color: var(--main-color-gray);
}
.about .about-content .about-item.character .more a:hover {
  color: var(--color);
}
.about .about-content .about-item.character .male {
  position: absolute;
  top: 20px;
  right: -10px;
  height: 140%;
  width: auto;
  transition: transform 0.5s;
  transform-origin: top center;
}
@media (max-width: 768px) {
  .about .about-content .about-item.character .male {
    height: 80%;
  }
}
.about .about-content .about-item.character:hover .male {
  transform: scale(1.2);
}
.about .about-content .about-item.skills .skills-list {
  margin-top: 12px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.about .about-content .about-item.skills .skills-list .skills-item {
  display: flex;
  align-items: center;
  margin-right: 10px;
  margin-top: 10px;
  padding: 8px 12px 8px 8px;
  border-radius: 40px;
  background-color: var(--main-site-background);
  border: 1px solid var(--main-card-border);
  box-shadow: 0 8px 12px -4px var(--main-border-shadow);
  transition: background-color 0.3s;
  cursor: pointer;
}
.about .about-content .about-item.skills .skills-list .skills-item .skills-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-right: 8px;
  border-radius: 50%;
  background-color: var(--color);
}
.about .about-content .about-item.skills .skills-list .skills-item .skills-logo .iconfont {
  color: #fff;
}
.about .about-content .about-item.skills .skills-list .skills-item .skills-name {
  font-weight: bold;
  transition: color 0.3s;
}
.about .about-content .about-item.skills .skills-list .skills-item:hover {
  background-color: var(--main-card-background);
}
.about .about-content .about-item.career .title2 {
  letter-spacing: 0.2rem;
  font-size: 40px;
}
.about .about-content .about-item.career .list {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
}
.about .about-content .about-item.career .list .list-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 12px;
  color: var(--main-font-second-color);
}
.about .about-content .about-item.career .list .list-item::before {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  background-color: var(--color);
  border-radius: 50%;
  margin-right: 8px;
}
.about .about-content .about-item.career .career-img {
  position: absolute;
  bottom: -10px;
  left: 0;
  width: 100%;
}
@media (max-width: 768px) {
  .about .about-content .about-item.career .career-img {
    position: static;
  }
}
.about .about-content .about-item.game {
  min-height: 300px;
}
@media (max-width: 768px) {
  .about .about-content .about-item.game {
    min-height: 240px;
  }
}
.about .about-content .about-item.like {
  min-height: 400px;
}
@media (max-width: 768px) {
  .about .about-content .about-item.like {
    min-height: 300px;
  }
}
.about .about-content .about-item.image {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.about .about-content .about-item.image .image-content {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  z-index: 2;
  color: #fff;
}
.about .about-content .about-item.image .image-content .image-desc {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
}
.about .about-content .about-item.image .image-content .image-desc.opacity {
  font-size: 14px;
  color: #eee;
  opacity: 0.8;
}
.about .about-content .about-item.image .image-content .image-desc.opacity a {
  color: #eee;
}
.about .about-content .about-item.image .image-content .image-desc.opacity a:hover {
  color: var(--main-color);
}
.about .about-content .about-item.image::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  box-shadow: inset 0 -70px 204px 10px var(--color);
  z-index: 0;
}
.about .about-content .about-item.static .static-data {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr 1fr;
  margin: 20px 0;
}
.about .about-content .about-item.static .static-data .static-item {
  display: flex;
  flex-direction: column;
}
.about .about-content .about-item.static .static-data .static-item .static-name {
  font-size: 15px;
  opacity: 0.8;
}
.about .about-content .about-item.static .static-data .static-item .static-num {
  font-size: 34px;
  font-weight: bold;
}
.about .about-content .about-item.map {
  min-height: 170px;
  background-size: 100%;
  transition: background 1.5s ease-in-out;
  cursor: pointer;
}
@media (max-width: 768px) {
  .about .about-content .about-item.map {
    background-size: cover;
    pointer-events: none;
  }
}
.about .about-content .about-item.map .position {
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  padding: 20px 30px;
  color: #fff;
  background-color: #636352;
  font-size: 20px;
  transition: bottom 1s;
}
.about .about-content .about-item.map:hover {
  background-size: 120%;
  background-position-x: 0;
  background-position-y: 36%;
}
.about .about-content .about-item.map:hover .position {
  bottom: -80px;
}
.about .about-content .about-item.info {
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
}
.about .about-content .about-item.info .info-item {
  display: flex;
  flex-direction: column;
  margin-right: 32px;
}
.about .about-content .about-item.info .info-item .info-name {
  font-size: 14px;
  margin-bottom: 8px;
  color: var(--main-font-second-color);
}
.about .about-content .about-item.info .info-item .info-num {
  font-size: 34px;
  font-weight: bold;
  color: var(--color);
}
.about .about-content:last-child {
  margin-bottom: 0;
}
@media (max-width: 768px) {
  .about .about-content {
    display: flex;
    flex-direction: column;
  }
}

/* views/Archives.vue */
.archives {
  padding: 2rem;
}
.archives .title {
  display: flex;
  margin-bottom: 1rem;
}
.archives .title .name {
  margin: 0;
  border-bottom: none;
}
.archives .title .num {
  margin-left: 8px;
  font-size: 20px;
  font-weight: bold;
  opacity: 0.6;
}
.archives .archives-list .year-list {
  margin-bottom: 2rem;
}
.archives .archives-list .year-list .year {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-left: 6px;
  padding-left: 12px;
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 1rem;
}
.archives .archives-list .year-list .year::before {
  content: "";
  position: absolute;
  left: 0;
  width: 4px;
  height: 70%;
  background-color: var(--main-color);
  border-radius: 8px;
}
.archives .archives-list .year-list .posts .posts-item {
  padding: 20px;
  margin-bottom: 1rem;
}
.archives .archives-list .year-list .posts .posts-item .title {
  margin-bottom: 16px;
  font-size: 18px;
  font-weight: bold;
  transition: color 0.3s;
}
.archives .archives-list .year-list .posts .posts-item .tags {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: center;
  opacity: 0.6;
}
.archives .archives-list .year-list .posts .posts-item .tags .type-item {
  font-size: 14px;
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-right: 8px;
}
.archives .archives-list .year-list .posts .posts-item .tags .type-item .name {
  transition: color 0.3s;
}
.archives .archives-list .year-list .posts .posts-item .tags .type-item .iconfont {
  margin-right: 2px;
  transition: color 0.3s;
}
.archives .archives-list .year-list .posts .posts-item .tags .type-item:hover .name,
.archives .archives-list .year-list .posts .posts-item .tags .type-item:hover .iconfont {
  color: var(--main-color);
}
.archives .archives-list .year-list .posts .posts-item:last-child {
  margin-bottom: 0;
}
.archives .archives-list .year-list .posts .posts-item:hover .title {
  color: var(--main-color);
}
.archives .archives-list .year-list:last-child {
  margin-bottom: 0;
}

/* views/CatOrTag.vue */
.cat-or-tag {
  min-height: 400px;
}
.cat-or-tag .title {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.cat-or-tag .title .title-name {
  font-size: 1.875rem;
  margin-bottom: 0;
}
.cat-or-tag .title .title-num {
  margin-top: 20px;
  font-size: 1.125rem;
  opacity: 0.6;
}
.cat-or-tag .type-lists {
  padding: 2rem 0 3rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  flex-direction: row;
  align-items: center;
}
.cat-or-tag .type-lists .type-item {
  font-size: 1.25rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  margin: 0.5em;
}
.cat-or-tag .type-lists .type-item .name {
  font-weight: bold;
  transition: color 0.3s;
}
.cat-or-tag .type-lists .type-item .iconfont {
  margin-right: 8px;
  font-size: 1.25rem;
  opacity: 0.6;
  transition: color 0.3s;
}
.cat-or-tag .type-lists .type-item .num {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  padding: 6px 4px;
  margin-left: 8px;
  min-width: 35px;
  border-radius: 8px;
  background-color: var(--main-card-border);
}
.cat-or-tag .type-lists .type-item:hover {
  transform: scale(1.05);
  background-color: var(--main-color);
}
.cat-or-tag .type-lists .type-item:hover .name,
.cat-or-tag .type-lists .type-item:hover .iconfont {
  color: var(--main-card-background);
}

/* views/Home.vue */
.home .home-content {
  width: 100%;
  display: flex;
  flex-direction: row;
}
.home .home-content .posts-content {
  width: calc(100% - 300px);
  transition: width 0.3s;
}
.home .home-content .main-aside {
  width: 300px;
  padding-left: 1rem;
}
@media (max-width: 1200px) {
  .home .home-content .posts-content {
    width: 100%;
  }
  .home .home-content .main-aside {
    display: none;
  }
}

/* views/Link.vue */
.link {
  margin-bottom: 4rem;
}
.link .banner-page {
  min-height: auto;
}
.link .banner-page .menu {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: flex-start;
  margin-bottom: auto;
}
.link .banner-page .menu .menu-item {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 46px;
  padding: 12px 18px;
  border-radius: 8px;
  background-color: var(--main-card-second-background);
  border: 1px solid var(--main-card-border);
  box-shadow: 0 8px 16px -4px var(--main-border-shadow);
  transition: all 0.3s;
  cursor: pointer;
}
.link .banner-page .menu .menu-item .iconfont {
  font-size: 18px;
  margin-right: 8px;
  transition: color 0.3s;
}
.link .banner-page .menu .menu-item.random {
  color: var(--main-color);
}
.link .banner-page .menu .menu-item.random .iconfont {
  color: var(--main-color);
}
.link .banner-page .menu .menu-item.add {
  color: var(--main-card-second-background);
  background-color: var(--main-font-color);
}
.link .banner-page .menu .menu-item.add .iconfont {
  font-size: 22px;
  margin-right: 6px;
  color: var(--main-card-second-background);
}
.link .banner-page .menu .menu-item:last-child {
  margin-left: 20px;
}
.link .banner-page .menu .menu-item:hover {
  color: #fff;
  background-color: var(--main-color);
  box-shadow: 0 8px 16px -4px var(--main-color-bg);
}
.link .banner-page .menu .menu-item:hover .iconfont {
  color: #fff;
}
.link .banner-page .link-group {
  position: absolute;
  left: 0;
  top: 140px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  overflow: hidden;
}
.link .banner-page .link-group .link-group-item {
  display: flex;
  flex-direction: column;
}
.link .banner-page .link-group .link-group-item .link-logo {
  margin-right: 1.2rem;
}
.link .banner-page .link-group .link-group-item .link-logo .link-logo-img {
  width: 120px;
  height: 120px;
  min-width: 120px;
  border-radius: 50%;
  overflow: hidden;
}
.link .banner-page .link-group .link-group-item .link-logo:nth-of-type(2n) {
  margin-top: 1.2rem;
  transform: translate(-60px);
}
@media (max-width: 800px) {
  .link .banner-page {
    min-height: auto;
  }
  .link .banner-page .menu,
  .link .banner-page .link-group {
    display: none;
  }
}

/* views/NotFound.vue */
.not-found-content {
  animation: fade-up 0.6s 0.1s backwards;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 4rem 0;
}
.not-found-content .title {
  font-size: 8rem;
  margin: 2rem 0;
  line-height: 1;
}
.not-found-content .title-tip {
  font-size: 2rem;
  opacity: 0.6;
}
.not-found-content .to-home {
  margin-top: 2rem;
  padding: 12px 26px;
  font-size: 20px;
  color: var(--main-font-color);
  background-color: var(--main-card-border);
  border-radius: 12px;
  outline: none;
  border: none;
  transition: color 0.3s, background-color 0.3s;
  cursor: pointer;
}
.not-found-content .to-home:hover {
  color: var(--main-card-background);
  background-color: var(--main-color);
}

/* views/Page.vue */
.page {
  width: 100%;
  display: flex;
  flex-direction: row;
  animation: fade-up 0.6s 0.1s backwards;
}
.page .page-content {
  width: 100%;
  transition: width 0.3s;
}
.page .page-content .s-card {
  padding: 1rem 2rem;
}
.page.has-aside {
  animation: fade-up 0.6s 0.3s backwards;
}
.page.has-aside .page-content {
  width: calc(100% - 300px);
}
.page.has-aside .main-aside {
  width: 300px;
  padding-left: 1rem;
}
@media (max-width: 1200px) {
  .page .page-content {
    width: 100% !important;
  }
  .page .main-aside {
    display: none;
  }
}

/* views/Post.vue */
.post {
  width: 100%;
  display: flex;
  flex-direction: column;
  animation: fade-up 0.6s 0.1s backwards;
}
.post > .post-meta {
  padding: 2rem 0 3rem 18px;
  width: 100%;
}
.post > .post-meta > .meta {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.5rem 0.75rem;
  min-width: 0;
}
.post > .post-meta .meta .categories {
  flex: 0 0 auto;
  margin-right: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0.25rem;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}
.post > .post-meta .meta .categories::-webkit-scrollbar {
  display: none;
}
.post > .post-meta .meta .categories .cat-item {
  flex: 0 0 auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 6px 12px;
  font-size: 14px;
  font-weight: bold;
  border-radius: 8px;
  background-color: var(--main-mask-Inverse-background);
  opacity: 0.8;
  white-space: nowrap;
}
.post > .post-meta .meta .categories .cat-item .iconfont {
  margin-right: 6px;
}
.post > .post-meta .meta .categories .cat-item:hover {
  color: var(--main-color);
  background-color: var(--main-color-bg);
}
.post > .post-meta .meta .categories .cat-item:hover .iconfont {
  color: var(--main-color);
}
.post > .post-meta .meta .tags {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0.25rem;
  overflow-x: auto;
  scrollbar-width: none;
}
.post > .post-meta .meta .tags::-webkit-scrollbar {
  display: none;
}
.post > .post-meta .meta .tags .tag-item {
  flex: 0 0 auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 6px 12px;
  font-size: 14px;
  font-weight: bold;
  border-radius: 8px;
  opacity: 0.8;
  white-space: nowrap;
}
.post > .post-meta .meta .tags .tag-item .iconfont {
  margin-right: 4px;
  opacity: 0.6;
  font-weight: normal;
}
.post > .post-meta .meta .tags .tag-item:hover {
  color: var(--main-color);
  background-color: var(--main-color-bg);
}
.post > .post-meta .meta .tags .tag-item:hover .iconfont {
  color: var(--main-color);
}
.post > .post-meta .title {
  max-width: 100%;
  font-size: clamp(1.7rem, 3vw, 2.2rem);
  line-height: 1.3;
  color: var(--main-font-color);
  margin: 1.4rem 0;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.post > .post-meta .other-meta {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.post > .post-meta .other-meta .meta {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 6px 12px;
  font-size: 14px;
  border-radius: 8px;
  opacity: 0.8;
  white-space: nowrap;
}
.post > .post-meta .other-meta .meta .iconfont {
  margin-right: 6px;
  transition: color 0.3s;
}
.post > .post-meta .other-meta .meta.date {
  padding-left: 0;
}
.post > .post-meta .other-meta .meta.hot .iconfont {
  font-size: 18px;
}
.post > .post-meta .other-meta .meta.hover {
  transition: color 0.3s, background-color 0.3s;
  cursor: pointer;
}
.post > .post-meta .other-meta .meta.hover:hover {
  color: var(--main-color);
  background-color: var(--main-color-bg);
}
.post > .post-meta .other-meta .meta.hover:hover .iconfont {
  color: var(--main-color);
}
.post > .post-meta .other-meta .meta.edit-post {
  flex-shrink: 0;
  color: var(--main-color);
  background-color: var(--main-color-bg);
}
.post > .post-meta .other-meta .meta.edit-post .iconfont {
  color: var(--main-color);
}
.post > .post-content {
  width: 100%;
  display: flex;
  flex-direction: row;
  animation: fade-up 0.6s 0.3s backwards;
}
.post > .post-content .post-article {
  width: calc(100% - 300px);
  padding: 1rem 2.2rem 2.2rem 2.2rem;
  user-select: text;
  cursor: auto;
}
.post > .post-content .post-article:hover {
  border-color: var(--main-card-border);
}
.post > .post-content .post-article .expired {
  margin: 1.2rem 0 2rem 0;
  padding: 0.8rem 1.2rem;
  border-left: 6px solid var(--main-warning-color);
  border-radius: 6px 16px 16px 6px;
  user-select: none;
}
.post > .post-content .post-article .expired strong {
  color: var(--main-warning-color);
}
.post > .post-content .post-article .other-meta {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 2rem 0;
  opacity: 0.8;
}
.post > .post-content .post-article .other-meta .all-tags {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 0.45rem;
  max-height: 9rem;
  overflow-y: auto;
  scrollbar-width: thin;
}
.post > .post-content .post-article .other-meta .all-tags .tag-item {
  flex: 0 0 auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 6px 12px;
  font-size: 14px;
  font-weight: bold;
  border-radius: 8px;
  background-color: var(--main-card-border);
  margin: 0;
  max-width: 100%;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.post > .post-content .post-article .other-meta .all-tags .tag-item .iconfont {
  margin-right: 4px;
  opacity: 0.6;
  font-weight: normal;
}
.post > .post-content .post-article .other-meta .all-tags .tag-item:hover {
  color: var(--main-color);
  background-color: var(--main-color-bg);
}
.post > .post-content .post-article .other-meta .all-tags .tag-item:hover .iconfont {
  color: var(--main-color);
}
.post > .post-content .post-article .other-meta .report {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 6px 12px;
  font-size: 14px;
  font-weight: bold;
  border-radius: 8px;
  background-color: var(--main-card-border);
}
.post > .post-content .post-article .other-meta .report .iconfont {
  margin-right: 6px;
}
.post > .post-content .post-article .other-meta .report:hover {
  color: #efefef;
  background-color: var(--main-error-color);
}
.post > .post-content .post-article .other-meta .report:hover .iconfont {
  color: #efefef;
}
.post > .post-content .main-aside {
  width: 300px;
  padding-left: 1rem;
}
@media (max-width: 1200px) {
  .post > .post-content .post-article {
    width: 100%;
  }
  .post > .post-content .main-aside {
    display: none;
  }
}
@media (max-width: 768px) {
  .post > .post-meta {
    padding: 4rem 1.5rem;
  }
  .post > .post-meta .meta {
    justify-content: center;
  }
  .post > .post-meta .meta .categories {
    margin-right: 0;
  }
  .post > .post-meta .meta .tags {
    display: none;
  }
  .post > .post-meta .title {
    font-size: clamp(1.5rem, 7vw, 1.8rem);
    text-align: center;
    line-height: 1.35;
  }
  .post > .post-meta .other-meta {
    justify-content: center;
    flex-wrap: wrap;
  }
  .post > .post-content .post-article {
    border: none;
    padding: 20px 30px;
  }
  .post > .post-content .post-article .other-meta {
    margin: 1rem 0 2rem 0;
    flex-direction: column;
  }
  .post > .post-content .post-article .other-meta .all-tags {
    flex-wrap: wrap;
    width: 100%;
  }
  .post > .post-content .post-article .other-meta .all-tags .tag-item {
    margin-top: 0;
  }
  .post > .post-content .post-article .other-meta .report {
    margin-top: 20px;
  }
}

/* Typecho data adapters. The surrounding selectors intentionally use Curve's
 * original component class names; these rules only cover Typecho-generated
 * markup that has no VitePress equivalent. */
[hidden] {
  display: none !important;
}

.main-header {
  overflow: visible;
}

/* The source theme uses clickable divs. Typecho adds semantic buttons for
 * keyboard access, so remove the browser's native button chrome first. */
button {
  appearance: none;
  border: 0;
  outline: 0;
  font: inherit;
  color: inherit;
  background: transparent;
}

/* A card is a visual container by default. Only semantic links/buttons (or
 * explicitly interactive cards) should advertise a hand cursor. */
.s-card {
  cursor: default;
}

a.s-card,
button.s-card,
[role=button].s-card,
[data-scroll-top].s-card,
[data-settings-open].s-card {
  cursor: pointer;
}

#app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Background blur affects the wallpaper layer only. Foreground content,
 * cards and controls must remain sharp. */
#app.blur {
  filter: none;
}

.background.is-blurred {
  filter: blur(20px);
  transform: scale(1.04);
  transition: filter 0.3s ease, transform 0.3s ease;
}

#app > .main-header {
  flex: 0 0 60px;
}

#app > .mian-layout {
  flex: 1 0 auto;
  width: 100%;
}

#app > .footer-link,
#app > .main-footer {
  flex: 0 0 auto;
}

#app.is-loading > .mian-layout,
#app.is-loading > .footer-link,
#app.is-loading > .main-footer {
  display: none;
}

/* The source theme also uses `.loading` for skeleton placeholders. Scope the
 * full-page loader so it keeps Loading.vue's solid card background instead of
 * inheriting the LazyLoader gradient animation. */
.loading[data-loading] {
  background: var(--main-card-background);
  background-image: none;
  background-size: auto;
  animation: none;
}

.loading[data-loading] .logo {
  animation: loading 2s infinite;
}

/* Keep this state class distinct from
 * Loading.vue's global `.loading`, which is a fixed full-screen overlay. */
.article-gpt .title .logo.fake-gpt-loading {
  animation: loading 1s infinite;
  cursor: not-allowed;
}

.nav-btn,
.to-top,
.set-btn,
.modal .close,
.close-control,
.control .menu-item {
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.main-footer {
  width: 100%;
  clear: both;
}

/* The backend can choose a dedicated font or make the welcome line follow the global font. */
.banner .title {
  font-family: var(--curve-banner-title-font-family, "Xiaolai Welcome", "LXGW WenKai", sans-serif);
}

/* Copyright.vue and Footer.vue intentionally reuse the class name
 * `copyright`; Vue scoped CSS kept them separate in the original build.
 * The extracted source CSS needs this boundary restored for Typecho. */
.main-footer .copyright {
  position: static;
  margin-top: 0;
  padding: 0;
  overflow: visible;
  background: transparent;
}

.main-footer .copyright::after {
  content: none;
}

/* Link.vue has a scoped root `.link`; after extraction it would otherwise
 * add a 4rem bottom margin to Footer.vue's metadata anchors. */
.main-footer .link {
  margin-bottom: 0;
}

.hello .info {
  min-width: 0;
}

.hello .info .name {
  min-width: 0;
  overflow: hidden;
}

.hello .info .name .desc {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hello .info .link {
  flex: 0 0 auto;
  margin-bottom: 0;
}

@keyframes hello-tip-spread {
  0% {
    opacity: 0.72;
    transform: scale(0.94);
  }
  65%, 100% {
    opacity: 0;
    transform: scale(1.6);
  }
}
@keyframes hello-tip-milestone {
  0% {
    transform: scale(0.9) rotate(-2deg);
  }
  35% {
    transform: scale(1.2) rotate(2deg);
  }
  65% {
    transform: scale(0.98) rotate(-1deg);
  }
  100% {
    transform: scale(1) rotate(0);
  }
}
.hello .tip {
  position: relative;
  z-index: 0;
  isolation: isolate;
}

.hello .tip::before,
.hello .tip::after {
  position: absolute;
  z-index: -1;
  inset: -4px;
  content: "";
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(120deg, #5b27ff 0%, #00d4ff 50%, #fa7671 100%);
  background-size: 200% 200%;
  filter: blur(7px);
}

.hello .tip.is-counting::before {
  animation: hello-tip-spread 1.1s ease-out;
}

.hello .tip.is-counting::after {
  animation: hello-tip-spread 1.1s ease-out 0.16s;
}

.hello .tip.is-milestone {
  animation: hello-tip-milestone 0.75s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.hello .tip.is-milestone::before,
.hello .tip.is-milestone::after {
  animation: hello-tip-spread 1.25s ease-out;
  filter: blur(9px);
}

.hello .tip.is-milestone::after {
  animation-delay: 0.12s;
}

@media (prefers-reduced-motion: reduce) {
  .hello .tip.is-milestone {
    animation: none;
    transform: none;
  }
  .hello .tip.is-counting::before,
  .hello .tip.is-counting::after,
  .hello .tip.is-milestone::before,
  .hello .tip.is-milestone::after {
    animation: none;
    opacity: 0.35;
    transform: scale(1.08);
  }
}
.comment-list {
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}

.comment-list .children {
  margin: 0.85rem 0 0.1rem 2.5rem;
  padding: 0 0 0 1rem;
  list-style: none;
  border-left: 2px solid var(--main-color-bg);
}

.comment-list .children > .comment-list {
  margin: 0;
}

.comment-item {
  margin: 0 0 0.85rem;
  list-style: none;
}

.comment-list .comment-body {
  margin: 1rem 0;
  padding: 1rem;
  list-style: none;
  border: 1px solid var(--main-card-border);
  border-radius: 16px;
  background: var(--main-card-background);
  box-shadow: 0 8px 16px -4px var(--main-border-shadow);
}

.comment-list .comment-author {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.comment-list .comment-author .avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
}

.comment-list .comment-author .fn {
  font-style: normal;
  font-weight: bold;
}

.comment-list .comment-meta {
  margin-top: 0.45rem;
  font-size: 0.8rem;
  opacity: 0.6;
}

.comment-list .comment-content {
  margin-top: 0.65rem;
  word-break: break-word;
}

.comment-list .comment-content p {
  margin: 0;
}

.comment-list .comment-reply {
  margin-top: 0.65rem;
  font-size: 0.85rem;
}

.comment-item__body {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  padding: 1rem;
  border: 1px solid var(--main-card-border);
  border-radius: 16px;
  background: var(--main-card-background);
  box-shadow: 0 8px 16px -4px var(--main-border-shadow);
  transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s;
}

.comment-item__body:hover {
  border-color: var(--main-color-bg);
  box-shadow: 0 10px 22px -8px var(--main-border-shadow);
}

.comment-item__body.is-author-comment {
  border-color: var(--main-color-bg);
}

.comment-item__avatar {
  flex: 0 0 44px;
}

.comment-item__avatar img {
  display: block;
  width: 44px;
  height: 44px;
  border: 2px solid var(--main-card-background);
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--main-color-bg);
}

.comment-item__body.is-author-comment .comment-item__avatar img {
  box-shadow: 0 0 0 2px var(--main-color), 0 5px 12px -5px var(--main-color);
}

.comment-item__content {
  flex: 1;
  min-width: 0;
}

.comment-item__body > .respond {
  flex: 1 1 100%;
  min-width: 0;
}

.comment-item__body > .children {
  flex: 1 1 calc(100% - 3.5rem);
  min-width: 0;
}

.cancel-comment-reply {
  margin-top: 0.8rem;
  text-align: right;
  font-size: 0.85rem;
}

.cancel-comment-reply a {
  color: var(--main-font-second-color);
}

.cancel-comment-reply a:hover {
  color: var(--main-color);
}

.comment-item__content header {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  align-items: center;
  min-height: 1.5rem;
  font-size: 0.85rem;
}

.comment-item__author {
  min-width: 0;
  color: var(--main-font-color);
  font-weight: 700;
  overflow-wrap: anywhere;
}

.comment-item__author a, .comment-item__author a:visited {
  color: inherit;
  text-decoration: none;
}

.comment-item__author a:hover {
  color: inherit;
  text-decoration: none;
}

.comment-item__author.is-author {
  color: var(--main-color);
}

.comment-author-badge {
  display: inline-flex;
  align-items: center;
  margin-left: 0.45rem;
  padding: 0.14rem 0.4rem;
  color: var(--main-color);
  border: 1px solid var(--main-color-bg);
  border-radius: 5px;
  background: var(--main-color-bg);
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1.2;
  vertical-align: 1px;
}

.comment-author-badge .iconfont {
  margin-right: 0.25rem;
  font-size: 0.95em;
  line-height: 1;
}

.comment-author-badge.comment-item__status {
  margin-left: 0;
}

.comment-item__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 0.65rem;
  margin-top: 0.18rem;
  color: var(--main-font-second-color);
  font-size: 0.72rem;
  line-height: 1.5;
}

.comment-item__meta time {
  cursor: help;
}

.comment-item__content header > a {
  flex-shrink: 0;
  margin-left: auto;
  padding: 0.25rem 0.55rem;
  color: var(--main-color);
  border-radius: 6px;
  background: var(--main-color-bg);
  font-size: 0.75rem;
  transition: color 0.3s, background 0.3s, transform 0.3s;
}

.comment-item__content header > a:hover {
  color: var(--main-card-background);
  background: var(--main-color);
  transform: translateY(-1px);
}

.comment-item__text {
  margin-top: 0.65rem;
  color: var(--main-font-color);
  line-height: 1.8;
  word-break: break-word;
}

.comment-item__text p {
  margin: 0;
}

.comment-item__text p + p {
  margin-top: 0.6rem;
}

.comment-form {
  margin-top: 1.2rem;
  padding: 1.1rem;
  border: 1px solid var(--main-card-border);
  border-radius: 16px;
  background: var(--main-card-second-background);
  box-shadow: 0 8px 16px -4px var(--main-border-shadow);
}

.comment-fields {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
}

.comment-fields > p {
  margin: 0;
  color: var(--main-font-second-color);
  font-size: 0.85rem;
}

.comment-form label {
  display: grid;
  gap: 0.35rem;
  color: var(--main-font-second-color);
  font-size: 0.8rem;
}

.comment-form input, .comment-form textarea {
  width: 100%;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--main-card-border);
  border-radius: 10px;
  outline: none;
  color: var(--main-font-color);
  background: var(--main-card-background);
  font-family: var(--main-font-family);
  transition: border-color 0.3s, box-shadow 0.3s, background 0.3s;
}

.comment-form input::placeholder, .comment-form textarea::placeholder {
  color: var(--main-font-second-color);
  opacity: 0.65;
}

.comment-form input:focus, .comment-form textarea:focus {
  border-color: var(--main-color);
  box-shadow: 0 8px 16px -4px var(--main-color-bg);
}

.comment-form textarea {
  display: block;
  min-height: 120px;
  margin: 0.9rem 0;
  resize: vertical;
  line-height: 1.7;
}

.comment-form button {
  padding: 0.65rem 1.05rem;
  border: 0;
  border-radius: 9px;
  color: #fff;
  background: var(--main-color);
  box-shadow: 0 6px 14px -8px var(--main-color);
  cursor: pointer;
  transition: transform 0.3s, box-shadow 0.3s, opacity 0.3s;
}

.comment-form button:disabled {
  opacity: 0.65;
  cursor: wait;
  transform: none;
}

.comment-form button:hover {
  box-shadow: 0 8px 18px -7px var(--main-color);
  transform: translateY(-1px);
}

.comment-form button:active {
  opacity: 0.85;
  transform: translateY(0);
}

.comment-empty {
  margin: 1rem 0;
  padding: 1rem 1.1rem;
  color: var(--main-font-second-color);
  border: 1px dashed var(--main-card-border);
  border-radius: 12px;
  background: var(--main-card-second-background);
}

.post-category a, .post-tags a, .all-tags a {
  margin-right: 8px;
}

.post-tags a::before, .all-tags a::before {
  content: "#";
  margin-right: 3px;
  color: var(--main-color);
}

.pagination .page-navigator {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 40px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
  animation: fade-up 0.6s 0.4s backwards;
}

.pagination .page-navigator li {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: 0 6px;
  overflow: hidden;
  list-style: none;
  border: 1px solid var(--main-card-border);
  border-radius: 8px;
  background: var(--main-card-background);
  box-shadow: 0 8px 16px -4px var(--main-border-shadow);
  transition: border-color 0.3s, box-shadow 0.3s;
}

.pagination .page-navigator li a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

.pagination .page-navigator li.current {
  color: var(--main-card-background);
  border-color: var(--main-color);
  background: var(--main-color);
  box-shadow: 0 8px 16px -4px var(--main-color-bg);
}

.pagination .page-navigator li.prev,
.pagination .page-navigator li.next {
  position: absolute;
  top: 0;
  width: 80px;
  margin: 0;
}

.pagination .page-navigator li.prev {
  left: 0;
}

.pagination .page-navigator li.next {
  right: 0;
}

.pagination .page-navigator li.prev .iconfont,
.pagination .page-navigator li.next .iconfont {
  transition: color 0.3s, transform 0.3s;
}

.pagination .page-navigator li.prev .iconfont {
  transform: rotate(180deg);
}

.pagination .page-navigator li .page-text {
  opacity: 0;
  transition: opacity 0.3s, margin 0.3s;
}

.pagination .page-navigator li.prev .page-text {
  margin-left: 4px;
  margin-right: -36px;
}

.pagination .page-navigator li.next .page-text {
  margin-left: -36px;
  margin-right: 4px;
}

.pagination .page-navigator li:hover {
  border-color: var(--main-color);
  box-shadow: 0 8px 16px -4px var(--main-color-bg);
}

.pagination .page-navigator li:hover .iconfont {
  color: var(--main-color);
}

.pagination .page-navigator li.prev:hover,
.pagination .page-navigator li.next:hover {
  color: var(--main-color);
}

.pagination .page-navigator li:hover .page-text {
  opacity: 1;
  margin-right: 0;
}

.pagination .page-navigator li.next:hover .page-text {
  margin-left: 0;
  margin-right: 4px;
}

.pagination .page-navigator li:has(> span:only-child) {
  width: auto;
  height: auto;
  margin: 0 4px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: translateY(-8px);
  font-size: 22px;
}

.pagination .page-navigator li:has(> span:only-child) > span {
  width: auto;
  height: auto;
  margin: 0;
  color: var(--main-font-color);
  background: transparent;
  box-shadow: none;
}

.pagination .page-navigator li.fast-jump {
  position: relative;
  width: auto;
  height: 40px;
  margin: 0 6px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.pagination .page-navigator li.fast-jump:hover,
.pagination .page-navigator li.fast-jump.focus {
  color: inherit;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.pagination .page-navigator li.fast-jump input {
  width: 40px;
  height: 40px;
  padding: 0 8px;
  border: 1px solid var(--main-card-border);
  border-radius: 8px;
  outline: none;
  color: var(--main-font-color);
  background: var(--main-card-background);
  font: inherit;
  box-shadow: 0 8px 16px -4px var(--main-border-shadow);
  transition: all 0.3s;
}

.pagination .page-navigator li.fast-jump .iconfont {
  position: absolute;
  top: 5px;
  right: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 4px;
  color: var(--main-font-color);
  background: var(--main-card-background);
  cursor: pointer;
  transition: color 0.3s, opacity 0.3s, background-color 0.3s;
}

.pagination .page-navigator li.fast-jump:hover input,
.pagination .page-navigator li.fast-jump.focus input {
  width: 100px;
  border-color: var(--main-color);
  box-shadow: 0 8px 16px -4px var(--main-color-bg);
}

.pagination .page-navigator li.fast-jump:hover .iconfont,
.pagination .page-navigator li.fast-jump.focus .iconfont {
  opacity: 0.2;
  pointer-events: none;
}

.pagination .page-navigator li.fast-jump:hover .iconfont.click,
.pagination .page-navigator li.fast-jump.focus .iconfont.click {
  opacity: 1;
  color: var(--main-card-background);
  background: var(--main-color);
  pointer-events: all;
}

@media (max-width: 768px) {
  .pagination .page-navigator li:not(.prev):not(.next) {
    display: none;
  }
}
.post-lists .post-item {
  cursor: default;
}

.post-lists .post-item .post-content {
  cursor: default;
}

.post-lists .post-item .post-title,
.post-lists .post-item .post-cover {
  cursor: pointer;
}

.post-lists .post-item.simple {
  padding: 0.5rem 1.4rem !important;
  min-height: 0;
}

.post-lists .post-item.simple .post-content {
  padding: 0;
}

.home:not(.archive-page) .type-bar .type-item {
  transition: color 0.28s ease, background-color 0.28s ease, box-shadow 0.28s ease, transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
  position: relative;
  z-index: 1;
}

.home:not(.archive-page) .type-bar {
  position: sticky;
  top: var(--home-type-bar-top);
  z-index: 1001;
  isolation: isolate;
  background-color: var(--main-card-background);
}

:root {
  --home-type-bar-top: calc(60px + 1rem);
  --home-type-bar-cover-bottom: var(--home-type-bar-top);
  --home-type-bar-gap-left: 0px;
  --home-type-bar-gap-right: 100vw;
}

.home-type-bar-marker {
  display: block;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
  pointer-events: none;
}

.background.home-type-bar-gap {
  z-index: 999;
  pointer-events: none;
  clip-path: polygon(var(--home-type-bar-gap-left) 60px, var(--home-type-bar-gap-right) 60px, var(--home-type-bar-gap-right) var(--home-type-bar-cover-bottom), var(--home-type-bar-gap-left) var(--home-type-bar-cover-bottom));
  -webkit-clip-path: polygon(var(--home-type-bar-gap-left) 60px, var(--home-type-bar-gap-right) 60px, var(--home-type-bar-gap-right) var(--home-type-bar-cover-bottom), var(--home-type-bar-gap-left) var(--home-type-bar-cover-bottom));
  background-color: var(--main-site-background);
}

.home:not(.archive-page) .type-bar .type-item.choose {
  color: var(--main-card-background);
  background: var(--main-color);
  box-shadow: none;
  animation: none;
}

.posts-content {
  position: relative;
}

.post-list-stage {
  position: relative;
}

.category-loading {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 100%;
  color: var(--main-font-second-color);
  border-radius: 12px;
  background: color-mix(in srgb, var(--main-card-background) 88%, transparent);
  opacity: 0;
  transform: translateY(-6px) scale(0.985);
  transition: opacity 0.28s ease, transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}

.category-loading.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.category-loading.is-leaving {
  opacity: 0;
  transform: translateY(-4px) scale(0.99);
}

.category-loading .iconfont {
  color: var(--main-color);
  animation: rotate 1s linear infinite;
}

.category-list-enter {
  animation: fade-up 0.48s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.post-lists .post-item.is-top {
  order: -1;
}

.post-lists.layout-grid {
  display: grid;
  row-gap: 1rem;
}

.home.category-archive .post-lists {
  row-gap: 1.4rem;
}

.home.is-category-loading .post-lists,
.home.is-category-loading .pagination {
  opacity: 0.45;
  transition: opacity 0.2s;
}

.category-summary {
  min-height: 0;
  margin-bottom: 1rem;
  padding: 1.4rem 1.6rem;
}

.category-summary .summary-top {
  display: flex;
  flex-direction: column;
}

.category-summary .summary-label {
  color: var(--main-font-second-color);
  font-size: 0.875rem;
}

.category-summary .summary-name {
  margin: 0.5rem 0 0;
  font-size: 2rem;
  line-height: 1.25;
}

.category-summary .summary-description {
  max-width: 52rem;
  margin: 0.75rem 0 0;
  color: var(--main-font-second-color);
  line-height: 1.75;
}

.category-summary .summary-count {
  display: block;
  margin-top: 1rem;
  color: var(--main-font-second-color);
  opacity: 0.8;
}

.archives-page .archive-heading {
  min-height: auto;
  margin-bottom: 1rem;
}

.next-post .post-title a {
  color: inherit;
}

.next-post:hover .post-title a {
  color: var(--main-card-background);
}

.tags-cloud .all-tags {
  max-height: none;
  overflow: visible;
}

.tags-cloud .all-tags::after {
  display: none;
}

.modal .modal-main .modal-content .set-list .title {
  display: block;
  width: 100%;
  height: auto;
  margin: 1rem 0;
  padding: 6px 0 6px 12px;
  border: 0;
  border-left: 4px solid var(--main-color);
  border-radius: 4px 8px 8px 4px;
  background-color: var(--main-border-shadow);
  font-size: 16px;
  font-weight: bold;
  line-height: normal;
  text-align: left;
  justify-content: initial;
}

.modal .modal-main .modal-content .set-list .title:first-child {
  margin-top: 0;
}

.markdown-main-style {
  user-select: text;
}

.markdown-main-style h1[id],
.markdown-main-style h2[id],
.markdown-main-style h3[id],
.markdown-main-style h4[id],
.markdown-main-style h5[id],
.markdown-main-style h6[id],
#main-comment,
.comment-item__body[id] {
  scroll-margin-top: 76px;
}

:target {
  scroll-margin-top: 76px;
}

.link > .cat-or-tag {
  min-height: auto;
}

.link > .cat-or-tag + .markdown-main-style.s-card {
  margin-top: 1.5rem;
  padding: 1rem 2.2rem 2.2rem;
  user-select: text;
  cursor: auto;
}

@media (max-width: 768px) {
  .link > .cat-or-tag + .markdown-main-style.s-card {
    border: none;
    padding: 20px 30px;
  }
}

.link-config-errors,
.link-config-empty,
.link-config-help {
  margin-top: 1.5rem;
  padding: 1.4rem 1.6rem;
}

.link-config-errors {
  border-left: 4px solid var(--main-color);
}

.link-config-errors strong,
.link-config-empty strong {
  display: block;
  margin-bottom: 0.5rem;
}

.link-config-errors p,
.link-config-empty p {
  margin: 0;
  color: var(--main-font-second-color);
}

.link-config-errors ul {
  margin: 0.8rem 0 0;
  padding-left: 1.4rem;
  color: var(--main-font-second-color);
}

.link-config-errors li + li {
  margin-top: 0.35rem;
}

.link-config-help {
  cursor: default;
}

.link-config-help > :first-child {
  margin-top: 0;
}

.cat-or-tag.privacy-page .privacy-content {
  margin-top: 2rem;
  padding: 1rem 2.2rem 3rem;
  user-select: text;
  cursor: auto;
}

@media (max-width: 768px) {
  .cat-or-tag.privacy-page .privacy-content {
    border: none;
    padding: 20px 30px 3rem;
  }
}

.markdown-main-style > h1 {
  font-size: 2rem;
  text-align: center;
  border-bottom: 1px dashed var(--main-color-bg);
  padding-bottom: 1rem;
}

.markdown-main-style > h2 {
  font-size: 1.6rem;
  line-height: 1.6;
  border-bottom: 1px dashed var(--main-color-bg);
  padding-bottom: 0.5rem;
}

.markdown-main-style > h3 {
  position: relative;
  width: fit-content;
  font-size: 1.2rem;
  z-index: 0;
}

.markdown-main-style > h3::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 8px;
  border-radius: 3px;
  background: var(--main-card-border);
  z-index: -1;
}

.markdown-main-style > h1, .markdown-main-style > h2, .markdown-main-style > h3, .markdown-main-style > h4 {
  position: relative;
}

.markdown-main-style > table {
  width: 100%;
  margin: 1rem 0;
  border-collapse: collapse;
  border-spacing: 0;
}

.markdown-main-style > table td, .markdown-main-style > table th {
  padding: 0.6rem 1rem;
  line-height: normal;
  letter-spacing: normal;
  vertical-align: middle;
  border: 1px solid var(--main-card-border);
}

.markdown-main-style > table thead {
  background: var(--main-card-second-background);
}

.markdown-main-style > table tbody tr:hover {
  background: var(--main-card-second-background);
}

.markdown-main-style > pre {
  margin: 1rem 0;
  padding: 1rem;
  overflow: auto;
  border: 1px solid var(--main-card-border);
  border-radius: 12px;
  background: var(--main-card-second-background);
}

.markdown-main-style > pre code {
  display: block;
  padding: 0;
  white-space: pre;
  font-family: "Fira Code", var(--main-font-family), monospace;
  background: transparent;
}

.markdown-main-style > *:first-child {
  margin-top: 0;
}

.markdown-main-style img {
  cursor: zoom-in;
}

.curve-image-viewer {
  position: fixed;
  inset: 0;
  z-index: 4000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background: var(--main-mask-background);
}

.curve-image-viewer[hidden] {
  display: none !important;
}

.curve-image-viewer img {
  max-width: 95vw;
  max-height: 90vh;
  border-radius: 12px;
}

.curve-image-viewer button {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  color: var(--main-font-color);
  background: var(--main-card-background);
  font-size: 1.6rem;
  cursor: pointer;
}

.search.modal .modal-main {
  width: calc(100% - 40px);
  max-width: 800px;
}

.search.modal .modal-content {
  max-height: calc(80vh - 46px);
  padding: 20px;
  overflow: auto;
}

.search.modal .search-form {
  display: block;
  margin: 0;
}

.search.modal .search-form input {
  display: block;
  width: 100%;
  min-height: 2.5rem;
  height: auto;
  padding: 0.6rem 1rem;
  border: 1px solid var(--main-card-border);
  border-radius: 8px;
  outline: none;
  color: var(--main-font-color);
  background: var(--main-card-second-background);
  font: inherit;
  line-height: 1.4;
  transition: border-color 0.3s, box-shadow 0.3s;
}

.search.modal .search-form input:focus {
  border-color: var(--main-color);
  box-shadow: 0 8px 16px -4px var(--main-color-bg);
}

.search.modal .search-form input::-webkit-search-cancel-button {
  display: none;
}

.search.modal .search-form button {
  display: none;
}

.main-header .nav-all .right-nav .to-top.long .to-top-btn .num {
  white-space: nowrap;
}

.main-header .nav-all .right-nav .to-top .to-top-btn .num {
  transition: opacity 0.3s ease-in-out;
}

.main-header .nav-all .right-nav .to-top .to-top-btn .num.scroll-text-changing {
  opacity: 0;
}

.main-header .nav-all .right-nav .to-top:hover .to-top-btn .num {
  transition-duration: 0.1s;
}

@media (max-width: 768px) {
  .search.modal .modal-main {
    width: calc(100% - 24px);
  }
  .search.modal .modal-content {
    padding: 16px;
  }
}
@media (max-width: 768px) {
  .comment-fields {
    grid-template-columns: 1fr;
  }
  .comment-list .children {
    margin-left: 0.75rem;
    padding-left: 0.75rem;
  }
  .comment-item__body {
    padding: 0.85rem;
  }
  .comment-item__avatar {
    flex-basis: 38px;
  }
  .comment-item__avatar img {
    width: 38px;
    height: 38px;
  }
  .comment-item__content header {
    gap: 0.45rem;
  }
  .comment-item__meta {
    font-size: 0.68rem;
  }
  .comment-form {
    padding: 0.9rem;
  }
}