@charset "UTF-8";
header {
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: start;
  font-family: var(--ui-font);
  width: 100%;
  height: 6rem;
  z-index: 5;
}
header #title-container {
  padding: 0 3rem 0.5rem 0.5rem;
  margin: 0;
  text-decoration: none;
  font-size: 2rem;
  font-weight: 900;
  line-height: 2rem;
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: end;
  background-color: var(--primary-color);
  color: var(--white-color);
  height: calc(100% - 0.5rem);
  text-transform: uppercase;
  z-index: 8;
}
header #title-container p {
  margin: 0;
}
header #menu-container {
  margin: 0;
  padding: 0;
  flex-grow: 1;
  display: flex;
  align-items: end;
  justify-content: start;
  gap: 0;
  background-color: var(--primary-light-color);
  color: var(--black-color);
  height: 100%;
}
header #menu-container a {
  position: relative;
  text-decoration: none;
  color: var(--black-color);
  height: calc(100% - 0.5rem);
  padding: 0 0.8rem 1rem 2.6rem;
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: end;
  transition: all 0.25s ease-in-out;
}
header #menu-container a span {
  position: absolute;
  left: 0.8rem;
  bottom: 1.2rem;
  font-size: 3rem;
  color: var(--primary-semi-light-color);
  transition: all 0.25s ease-in-out;
}
header #menu-container a p {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 900;
  line-height: 1.5rem;
  text-transform: capitalize;
  z-index: 10;
  color: var(--primary-dark-color);
  transition: all 0.25s ease-in-out;
}
header #menu-container a.active {
  padding: 0.25rem 1.7rem 0.75rem 1.7rem;
  background-color: var(--primary-semi-light-color);
}
header #menu-container a.active span {
  color: var(--primary-little-light-color);
  font-size: 2.5rem;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}
@media (hover: hover) {
  header #menu-container a:hover {
    padding: 0.25rem 1.7rem 0.75rem 1.7rem;
    background-color: var(--primary-semi-light-color);
  }
  header #menu-container a:hover span {
    color: var(--primary-little-light-color);
    font-size: 2.5rem;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
  }
}

@media screen and (max-width: 1024px) {
  header {
    flex-direction: column;
    height: 4rem;
  }
  header #title-container {
    width: 100%;
    padding: 0;
    flex-direction: row;
    gap: 1rem;
    align-items: center;
    justify-content: center;
  }
  header #menu-container {
    display: none;
  }
}
@media screen and (max-width: 425px) {
  header {
    height: 3rem;
  }
}
@media screen and (min-width: 1440px) {
  header #title-container {
    padding: 0 3rem 0.5rem calc(50vw - 30rem);
  }
}
main {
  padding: 16rem 1rem 8rem 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: calc(100% - 2rem);
}
main #pagination-item-container {
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem 1.5rem;
  width: min(100%, 30rem);
  transition: background-color 0.25s ease-in-out;
}
@media (hover: hover) {
  main #pagination-item-container:hover {
    background-color: var(--primary-light-color);
  }
}
main #pagination-item-container #pagination-item-title {
  color: var(--primary-color);
  font-size: 1.5rem;
  font-weight: 900;
  font-family: var(--ui-font);
  margin: 0;
}
main #pagination-item-container #pagination-item-title #pagination-item-series {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--primary-little-light-color);
}
main #pagination-item-container #pagination-item-info {
  display: flex;
  align-items: center;
  justify-content: start;
  gap: 0.25rem 1rem;
  color: var(--primary-dark-color);
  white-space: nowrap;
  flex-wrap: wrap;
}
main #pagination-item-container #pagination-item-info #pagination-item-tag {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
}
main #pagination-item-container .material-symbols-outlined {
  padding: 0;
}
main hr {
  width: min(100%, 33rem);
  margin: 0;
  border: 1px solid var(--primary-light-color);
}

@media screen and (max-width: 768px) {
  main #pagination-item-container {
    width: min(100%, 40rem);
  }
}
@media screen and (max-width: 550px) {
  main #pagination-item-container {
    align-items: center;
    justify-content: center;
  }
  main #pagination-item-container #pagination-item-title {
    text-align: center;
  }
  main #pagination-item-container #pagination-item-info #pagination-item-tag {
    display: none;
  }
}
@media screen and (max-width: 425px) {
  main {
    padding: 8rem 1rem 5.75rem 1rem;
  }
}
#pagination-count {
  margin-top: 3rem;
  width: 100%;
  text-align: center;
  color: var(--primary-little-light-color);
  font-size: 0.8rem;
  font-family: var(--ui-font);
  font-weight: 900;
  text-transform: uppercase;
}

main #category-item-container {
  text-decoration: none;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 1rem 1.5rem;
  width: min(100%, 15rem);
  transition: background-color 0.25s ease-in-out;
}
@media (hover: hover) {
  main #category-item-container:hover {
    background-color: var(--primary-light-color);
  }
  main #category-item-container:hover #category-item-title {
    color: var(--primary-little-light-color);
  }
  main #category-item-container:hover #category-item-info {
    background-color: var(--primary-semi-light-color);
    color: var(--primary-little-light-color);
  }
}
main #category-item-container #category-item-title {
  color: var(--primary-semi-dark-color);
  font-size: 1.5rem;
  font-weight: 900;
  font-family: var(--ui-font);
  margin: 0;
  transition: all 0.25s ease-in-out;
}
main #category-item-container #category-item-info {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-semi-light-color);
  background-color: var(--primary-light-color);
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  transition: all 0.25s ease-in-out;
}
main #category-item-container .material-symbols-outlined {
  padding: 0;
}
main .category-hr {
  width: min(100%, 18rem);
  margin: 0;
  border: 1px solid var(--primary-light-color);
}

main #tag-container {
  width: min(100%, 60rem);
  justify-content: center;
}
main #tag-container #tag-item-container {
  text-decoration: none;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  transition: background-color 0.1s ease-in-out;
}
@media (hover: hover) {
  main #tag-container #tag-item-container:hover {
    background-color: var(--primary-light-color);
  }
  main #tag-container #tag-item-container:hover #tag-item-title {
    color: var(--primary-little-light-color);
  }
  main #tag-container #tag-item-container:hover #tag-item-info {
    background-color: var(--primary-semi-light-color);
    color: var(--primary-little-light-color);
  }
}
main #tag-container #tag-item-container #tag-item-title {
  color: var(--primary-semi-dark-color);
  font-size: 1.5rem;
  font-weight: 900;
  font-family: var(--ui-font);
  margin: 0;
  transition: all 0.1s ease-in-out;
}
main #tag-container #tag-item-container #tag-item-info {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white-color);
  color: var(--primary-semi-light-color);
  background-color: var(--primary-light-color);
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  transition: all 0.1s ease-in-out;
}
main #tag-container #tag-item-container .material-symbols-outlined {
  padding: 0;
}

footer {
  position: fixed;
  bottom: 0;
  left: 0;
  flex-grow: 1;
  width: 100%;
  display: flex;
  align-items: end;
  justify-content: center;
  z-index: 10;
}
footer #footer-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: end;
  background-color: var(--primary-light-color);
  color: var(--primary-dark-color);
  font-family: var(--ui-font);
  font-weight: 900;
  padding: 1.5rem 0 1rem 0;
}
footer #footer-container p {
  margin: 0;
  text-align: center;
}
footer #footer-container p a {
  text-decoration: underline;
  color: var(--primary-dark-color);
  transition: color 0.25s ease-in-out;
}
@media (hover: hover) {
  footer #footer-container p a:hover {
    color: var(--primary-color);
  }
}

@media screen and (max-width: 1024px) {
  @keyframes footer-scroll {
    100% {
      padding: 0;
    }
  }
}
#post-container {
  display: flex;
  flex-direction: column;
  gap: 6rem;
  width: min(100% - 2rem, 40rem);
  padding: 1rem;
  word-wrap: break-word;
  word-break: break-word;
  overflow: hidden;
}
#post-container #post-info-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
  justify-content: center;
}
#post-container #post-info-container #post-title {
  margin-bottom: 0.5rem;
  max-width: 100%;
  font-size: 3rem;
  line-height: 3.5rem;
  font-weight: 900;
  font-family: var(--ui-font);
  color: var(--primary-color);
  text-align: center;
  word-break: break-word;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}
#post-container #post-info-container #post-title #post-series {
  font-size: 2rem;
  color: var(--primary-little-light-color);
}
#post-container #post-info-container #post-info {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem 1rem;
  color: var(--primary-dark-color);
  white-space: nowrap;
  flex-wrap: wrap;
}
#post-container #post-info-container #post-info #post-categories,
#post-container #post-info-container #post-info #post-tags {
  display: flex;
  align-items: center;
  justify-content: start;
  gap: 0.25rem;
}
#post-container #post-info-container #post-info #post-date,
#post-container #post-info-container #post-info a {
  display: flex;
  align-items: center;
  justify-content: start;
  gap: 0;
}
#post-container #post-info-container #post-info a {
  position: relative;
  color: var(--primary-dark-color);
  text-decoration: none;
  transition: color 0.25s ease-in-out;
}
@media (hover: hover) {
  #post-container #post-info-container #post-info a:hover::after {
    content: "";
    display: block;
    width: 110%;
    height: 0.5rem;
    background-color: var(--primary-light-color);
    position: absolute;
    bottom: 0rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: -1;
  }
}
#post-container #post-info-container .material-symbols-outlined {
  padding: 0;
}
#post-container #post-content-container {
  color: var(--black-color);
  background-color: var(--white-color);
  overflow: hidden;
}
#post-container #post-content-container p,
#post-container #post-content-container ul,
#post-container #post-content-container ol,
#post-container #post-content-container blockquote,
#post-container #post-content-container table {
  font-size: 1rem;
  line-height: 2rem;
}
#post-container #post-content-container h1 {
  display: none;
}
#post-container #post-content-container h2,
#post-container #post-content-container h3,
#post-container #post-content-container h4,
#post-container #post-content-container h5,
#post-container #post-content-container h6 {
  font-family: var(--ui-font);
}
#post-container #post-content-container h2 a,
#post-container #post-content-container h3 a,
#post-container #post-content-container h4 a,
#post-container #post-content-container h5 a,
#post-container #post-content-container h6 a {
  color: var(--black-color);
}
@media (hover: hover) {
  #post-container #post-content-container h2 a:hover,
  #post-container #post-content-container h3 a:hover,
  #post-container #post-content-container h4 a:hover,
  #post-container #post-content-container h5 a:hover,
  #post-container #post-content-container h6 a:hover {
    text-decoration: none;
  }
}
#post-container #post-content-container h2 {
  position: relative;
  font-size: 2.5rem;
  font-weight: 900;
  z-index: 1;
}
#post-container #post-content-container h2::after {
  content: "";
  display: block;
  width: 10rem;
  height: 0.8rem;
  background-color: var(--primary-color);
  z-index: -1;
  position: absolute;
  bottom: 0;
  left: 0;
}
#post-container #post-content-container h3 {
  position: relative;
  font-size: 1.5rem;
  font-weight: 700;
  z-index: 1;
}
#post-container #post-content-container h3::after {
  content: "";
  display: block;
  width: 6rem;
  height: 0.6rem;
  background-color: var(--primary-semi-light-color);
  z-index: -1;
  position: absolute;
  bottom: 0;
  left: 0;
}
#post-container #post-content-container h4 {
  font-size: 1.25rem;
  font-weight: 700;
}
#post-container #post-content-container h5,
#post-container #post-content-container h6 {
  font-size: 1.2rem;
  font-weight: 700;
}
#post-container #post-content-container p:has(img) {
  display: flex;
  justify-content: center;
  align-items: center;
}
#post-container #post-content-container a {
  color: var(--primary-color);
  text-decoration: none;
  transition: text-decoration 0.25s ease-in-out;
}
@media (hover: hover) {
  #post-container #post-content-container a:hover {
    text-decoration: underline;
  }
}
@media (hover: hover) {
  #post-container #post-content-container sup a:hover {
    text-decoration: none;
  }
}
#post-container #post-content-container img {
  max-width: 100%;
  background-color: var(--true-white-color);
  cursor: pointer;
}
#post-container #post-content-container blockquote {
  margin: 0;
  border-left: 0.25rem solid var(--primary-color);
  box-sizing: border-box;
  background-color: var(--primary-extra-light-color);
  padding: 0.5rem 2rem;
}
#post-container #post-content-container blockquote pre:has(code) {
  border: 0.05rem solid var(--primary-color);
  box-sizing: border-box;
}
#post-container #post-content-container blockquote blockquote {
  border: 0.05rem solid var(--primary-color);
  border-left: 0.25rem solid var(--primary-color);
}
#post-container #post-content-container ul,
#post-container #post-content-container ol {
  padding-left: 1.5rem;
}
#post-container #post-content-container ul li::marker,
#post-container #post-content-container ol li::marker {
  color: var(--primary-color);
}
#post-container #post-content-container table {
  border-collapse: collapse;
  border: 0.05rem solid var(--primary-color);
  box-sizing: border-box;
  width: 100%;
}
#post-container #post-content-container table th,
#post-container #post-content-container table td {
  padding: 0;
}
#post-container #post-content-container table thead {
  background-color: var(--primary-color);
  color: var(--white-color);
}
#post-container #post-content-container table tbody tr {
  transition: background-color 0.25s ease-in-out;
}
#post-container #post-content-container table tbody tr:nth-child(even) {
  background-color: var(--primary-extra-light-color);
}
@media (hover: hover) {
  #post-container #post-content-container table tbody tr:hover {
    background-color: var(--primary-light-color);
  }
}
#post-container #post-content-container table tbody tr td {
  text-align: center;
}
#post-container #post-content-container code,
#post-container #post-content-container code * {
  font-family: "Courier New", Courier, monospace, "微软雅黑";
  white-space: pre-wrap;
}
#post-container #post-content-container pre:has(code) {
  position: relative;
  background-color: var(--primary-extra-light-color);
  padding: 0.5rem;
  line-height: 1.2rem;
  font-size: 1rem;
}
#post-container #post-content-container pre:has(code)::after {
  content: "Click to copy";
  display: block;
  width: -moz-fit-content;
  width: fit-content;
  color: var(--primary-dark-color);
  font-size: 0.8rem;
  font-family: var(--ui-font);
  font-weight: 700;
  position: absolute;
  top: -1.2rem;
  right: 0rem;
  opacity: 0;
  transition: opacity 0.25s ease-in-out;
}
@media (hover: hover) {
  #post-container #post-content-container pre:has(code):hover::after {
    opacity: 1;
  }
}
#post-container #post-content-container p code {
  font-weight: 700;
}
#post-container #post-content-container hr {
  width: 100%;
  border: 1px solid var(--primary-light-color);
}
#post-container #post-content-container .footnotes p {
  margin: 0;
}
#post-container #post-content-container .footnotes p,
#post-container #post-content-container .footnotes p a {
  color: var(--primary-dark-color);
}
#post-container #post-content-container .footnotes p a {
  text-decoration: underline;
}
#post-container #post-footer-container {
  width: 100%;
}

@media print {
  #post-container {
    width: 90%;
    padding: 0;
  }
}
/* Lightbox overlay */
.lightbox-overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.8);
  display: grid;
  place-items: center;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  z-index: 1000;
}
.lightbox-overlay .lightbox-img {
  max-width: 90%;
  max-height: 90%;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  padding: 1rem;
  background-color: var(--true-white-color);
}

#series-head-container {
  margin: 2rem 0 -2rem 0;
  background-color: var(--primary-light-color);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
  justify-content: center;
}
#series-head-container #series-description {
  font-weight: 700;
  color: var(--primary-dark-color);
  margin: 0;
}
#series-head-container #series-description #series-name {
  font-weight: 900;
  font-family: var(--ui-font);
  text-decoration: underline;
}
#series-head-container #series-item-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.5rem 1rem;
  grid-template-columns: auto 1fr;
  align-items: center;
}
#series-head-container #series-item-list span {
  text-align: right;
  color: var(--primary-semi-light-color);
}
#series-head-container #series-item-list span.material-symbols-outlined {
  font-size: 1.2rem;
  color: var(--primary-color);
}
#series-head-container #series-item-list a {
  text-decoration: none;
  color: var(--primary-dark-color);
  transition: all 0.3s ease-in-out;
}
#series-head-container #series-item-list a.em {
  color: var(--primary-color);
  font-weight: 700;
}
@media (hover: hover) {
  #series-head-container #series-item-list a:hover {
    color: var(--primary-color);
  }
}

#series-foot-container h1 {
  margin: 3rem 0 1rem 0;
  font-size: 1.5rem;
  font-weight: 900;
  font-family: var(--ui-font);
  color: var(--primary-color);
  text-align: center;
}
#series-foot-container #series-switcher {
  display: flex;
  gap: 1rem;
  justify-content: center;
  align-items: center;
}
#series-foot-container #series-switcher #series-previous,
#series-foot-container #series-switcher #series-next {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem;
  font-size: 1.2rem;
  font-weight: 700;
  background-color: var(--primary-light-color);
  color: var(--primary-little-light-color);
  text-decoration: none;
  transition: all 0.25s ease-in-out;
}
@media (hover: hover) {
  #series-foot-container #series-switcher #series-previous:hover,
  #series-foot-container #series-switcher #series-next:hover {
    background-color: var(--primary-color);
    color: var(--white-color);
  }
}
#series-foot-container #series-switcher #series-previous span,
#series-foot-container #series-switcher #series-next span {
  font-size: 3rem;
  color: var(--primary-semi-light-color);
}
#series-foot-container #series-switcher #series-previous {
  justify-content: start;
  text-align: left;
}
#series-foot-container #series-switcher #series-next {
  justify-content: end;
  text-align: right;
}

#copyright-container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  padding: 1rem 0;
}
#copyright-container img {
  width: 1.5rem;
  height: 1.5rem;
}
#copyright-container p {
  display: none;
}
@media (hover: hover) {
  #copyright-container:hover p {
    display: block;
    margin: 0;
    position: absolute;
    top: calc(100% + 0.6rem - 1rem);
    left: 0;
    width: 100%;
    background-color: var(--primary-little-light-color);
    color: var(--white-color);
    padding: 0.5rem 0;
    box-sizing: border-box;
    line-height: 1.5rem;
    text-align: center;
  }
  #copyright-container:hover p a {
    color: var(--white-color);
    text-decoration: underline;
  }
  #copyright-container:hover p::before {
    content: "";
    position: absolute;
    top: -0.6rem;
    left: 50%;
    transform: translateX(-50%);
    border-left: 0.6rem solid transparent;
    border-right: 0.6rem solid transparent;
    border-bottom: 0.6rem solid var(--primary-little-light-color);
  }
  #copyright-container:hover p::selection,
  #copyright-container:hover p a::selection {
    color: var(--primary-little-light-color);
    background-color: var(--white-color);
  }
}

#relate-container h1 {
  margin: 5rem 0 1rem 0;
  font-size: 1.5rem;
  font-weight: 900;
  font-family: var(--ui-font);
  color: var(--primary-color);
  text-align: center;
}
#relate-container ul {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
#relate-container ul li {
  position: relative;
  flex: 1;
  height: 6rem;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
#relate-container ul li a {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  height: 100%;
  padding: 1rem;
  font-size: 1.2rem;
  font-weight: 700;
  background-color: var(--primary-light-color);
  color: var(--primary-little-light-color);
  text-decoration: none;
  box-sizing: border-box;
  transition: all 0.25s ease-in-out;
}
#relate-container ul li a .title {
  z-index: 1;
}
#relate-container ul li a .material-symbols-outlined {
  position: absolute;
  bottom: 0;
  right: 0;
  font-size: 4rem;
  color: var(--primary-semi-light-color);
  z-index: 0;
  transition: all 0.25s ease-in-out;
}
@media (hover: hover) {
  #relate-container ul li a:hover {
    background-color: var(--primary-color);
    color: var(--white-color);
  }
  #relate-container ul li a:hover .material-symbols-outlined {
    bottom: 0.25rem;
    right: 0.25rem;
    color: var(--primary-semi-dark-color);
    font-size: 3rem;
  }
}

@media screen and (max-width: 550px) {
  #relate-container ul {
    flex-direction: column;
  }
  #relate-container ul li a .material-symbols-outlined {
    font-size: 3rem;
  }
}
#comment-container h1 {
  margin: 5rem 0 1rem 0;
  font-size: 1.5rem;
  font-weight: 900;
  font-family: var(--ui-font);
  color: var(--primary-color);
  text-align: center;
}
#comment-container .giscus {
  margin: 0;
}

#share-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  margin-bottom: 5rem;
}
#share-container h1 {
  margin: 5rem 0 1rem 0;
  font-size: 1.5rem;
  font-weight: 900;
  font-family: var(--ui-font);
  color: var(--primary-color);
  text-align: center;
}
#share-container ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
}
#share-container ul li {
  display: inline-block;
  margin: 0;
  padding: 0;
}
#share-container ul li a {
  display: inline-block;
  margin: 0;
  padding: 0;
  color: var(--primary-little-light-color);
  text-decoration: none;
  transition: all 0.25s ease-in-out;
}
@media (hover: hover) {
  #share-container ul li a:hover {
    color: var(--primary-color);
  }
}
#share-container ul li a i {
  display: inline-block;
  margin: 0;
  padding: 0;
  font-size: 2.5rem;
}

#archive-info-container {
  font-family: var(--ui-font);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 3rem;
}
#archive-info-container #archive-type {
  margin: 0;
  font-size: 2rem;
  font-weight: 900;
  line-height: 2rem;
  text-transform: uppercase;
  color: var(--primary-little-light-color);
}
#archive-info-container #archive-title {
  position: relative;
  margin: 0;
  font-size: 3rem;
  font-weight: 900;
  line-height: 3rem;
  text-transform: uppercase;
  color: var(--primary-color);
}
#archive-info-container #archive-title::after {
  content: "";
  display: block;
  width: 120%;
  height: 1.5rem;
  background-color: var(--primary-semi-light-color);
  position: absolute;
  bottom: -0.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: -1;
}

#sidebar-container {
  position: fixed;
  bottom: 6rem;
  right: max(2rem, (100vw - min(100% - 2rem, 40rem)) / 2 - 7rem);
  display: flex;
  flex-direction: column;
  align-items: end;
  justify-content: center;
  z-index: 90;
  gap: 1rem;
}
#sidebar-container #back-to-top-button,
#sidebar-container #menu-container-mobile,
#sidebar-container #theme-switcher,
#sidebar-container #toc-container button,
#sidebar-container #search-button {
  border-radius: 0.5rem;
  box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.2);
}
#sidebar-container #back-to-top-button,
#sidebar-container #menu-container-mobile,
#sidebar-container #theme-switcher {
  display: block;
  width: 3rem;
  height: 3rem;
  line-height: 3rem;
  font-size: 2rem;
  text-align: center;
  background-color: var(--primary-little-light-color);
  color: var(--primary-light-color);
  cursor: pointer;
  transition: background-color 0.25s ease-in-out;
}
@media (hover: hover) {
  #sidebar-container #back-to-top-button:hover,
  #sidebar-container #menu-container-mobile:hover,
  #sidebar-container #theme-switcher:hover {
    background-color: var(--primary-color);
  }
}
#sidebar-container #menu-container-mobile {
  display: none;
}
#sidebar-container #menu-container-mobile menu {
  display: none;
}

@media screen and (max-width: 1024px) {
  #sidebar-container {
    bottom: 5rem;
    right: 1.5rem;
  }
  #sidebar-container #back-to-top-button,
  #sidebar-container #menu-container-mobile,
  #sidebar-container #theme-switcher {
    width: 2.5rem;
    height: 2.5rem;
    line-height: 2.5rem;
    font-size: 1.5rem;
    background-color: var(--primary-color);
  }
  #sidebar-container #back-to-top-button {
    z-index: -2;
  }
  #sidebar-container #menu-container-mobile {
    position: relative;
    display: block;
  }
  #sidebar-container #menu-container-mobile #menu-container-mobile-button {
    position: relative;
    z-index: 91;
  }
  #sidebar-container #menu-container-mobile #menu-container-mobile-menu {
    position: absolute;
    bottom: 0;
    right: 1.5rem;
    background-color: var(--primary-light-color);
    width: 14rem;
    padding: 1rem;
    flex-direction: column;
    gap: 0.6rem;
    z-index: -1;
  }
  #sidebar-container #menu-container-mobile #menu-container-mobile-menu a {
    position: relative;
    text-decoration: none;
    color: var(--black-color);
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 0.5rem;
  }
  #sidebar-container #menu-container-mobile #menu-container-mobile-menu a span {
    color: var(--primary-semi-light-color);
  }
  #sidebar-container #menu-container-mobile #menu-container-mobile-menu a p {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.5rem;
    text-transform: capitalize;
    z-index: 10;
    color: var(--primary-dark-color);
  }
}
#toc-container {
  position: fixed;
  top: 15rem;
  right: max(2rem, (100vw - min(100% - 2rem, 40rem)) / 2 - 3rem);
  transform: translateX(100%);
  max-width: min(12rem, (100vw - min(100% - 2rem, 40rem)) / 2 - 3rem);
  color: var(--primary-dark-color);
  box-sizing: border-box;
  padding: 1rem;
  font-size: 1rem;
  z-index: 88;
}
#toc-container button {
  display: none;
  background-color: transparent;
  border: none;
  padding: 0;
  margin: 0;
}
#toc-container ul:not(.expand) {
  display: none;
}
#toc-container > ul {
  list-style-type: none;
  margin: 0;
  padding: 0 0.25rem 0 0;
  width: 100%;
  max-height: calc(100vh - 35rem);
  box-sizing: border-box;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
#toc-container > ul::-webkit-scrollbar-thumb {
  background-color: transparent;
  transition: all 0.25s ease-in-out;
}
#toc-container > ul::-webkit-scrollbar-track {
  background-color: transparent;
  transition: all 0.25s ease-in-out;
}
@media (hover: hover) {
  #toc-container > ul:hover::-webkit-scrollbar-thumb {
    background-color: var(--primary-semi-light-color);
  }
  #toc-container > ul:hover::-webkit-scrollbar-track {
    background-color: var(--primary-extra-light-color);
  }
}
#toc-container > ul code,
#toc-container > ul code * {
  font-family: "Courier New", Courier, monospace, "微软雅黑";
}
#toc-container > ul a {
  color: inherit;
  text-decoration: none;
  transition: all 0.25s ease-in-out;
}
#toc-container > ul a.active {
  color: var(--primary-color);
}
#toc-container > ul > li > a {
  font-weight: 700;
  font-size: 1.1rem;
}
#toc-container > ul li {
  list-style-type: none;
  margin: 0;
  padding: 0.1rem 0;
}
#toc-container > ul ul {
  margin: 0;
  padding: 0 0 0 1.5rem;
}

@media screen and (min-width: 1440px) {
  .toc {
    right: calc((100vw - 40rem) / 2 - 20rem);
  }
}
@media screen and (max-width: 1440px) and (min-width: 1024px) {
  .toc {
    font-size: 0.9rem;
  }
  .toc > li > a {
    font-size: 1rem;
  }
}
@media screen and (max-width: 1024px) {
  #toc-container {
    position: relative;
    top: 0;
    right: 0;
    width: auto;
    padding: 0;
    transform: none;
  }
  #toc-container button {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 2.5rem;
    height: 2.5rem;
    line-height: 2.5rem;
    font-size: 1.5rem;
    background-color: var(--primary-color);
    color: var(--white-color);
    z-index: 92;
  }
  #toc-container > ul {
    display: none;
    position: absolute;
    bottom: 1.5rem;
    right: 1.5rem;
    background-color: var(--primary-light-color);
    width: 16rem;
    padding: 1rem;
    z-index: -1;
  }
}
#search-container {
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}
#search-container * {
  box-sizing: border-box;
}
#search-container #search-button {
  display: block;
  width: 3rem;
  height: 3rem;
  line-height: 3rem;
  font-size: 2rem;
  text-align: center;
  background-color: var(--primary-little-light-color);
  color: var(--primary-light-color);
  cursor: pointer;
  transition: background-color 0.25s ease-in-out;
}
@media (hover: hover) {
  #search-container #search-button:hover {
    background-color: var(--primary-color);
  }
}
#search-container #search-input {
  /* remove default styles */
  appearance: none;
  border: none;
  outline: none;
  background-color: var(--primary-light-color);
  color: var(--primary-dark-color);
  width: 0;
  height: 3rem;
  font-size: 1.2rem;
  font-weight: 700;
  padding: 0;
  transition: all 0.25s ease-in-out;
}
#search-container #search-input::placeholder {
  color: var(--primary-semi-light-color);
}
#search-container #results-container {
  position: absolute;
  bottom: 3rem;
  left: 0;
  right: 0;
  width: 23rem;
  height: auto;
  max-height: 50vh;
  overflow-x: hidden;
  overflow-y: scroll;
}
#search-container #results-container #results {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 100%;
  background-color: var(--primary-extra-light-color);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
#search-container #results-container #results li {
  padding: 1.5rem 1rem;
  width: 100%;
  cursor: pointer;
  transition: all 0.25s ease-in-out;
}
#search-container #results-container #results li:not(:last-child) {
  border-bottom: 1px solid var(--primary-semi-light-color);
}
#search-container #results-container #results li a {
  text-decoration: none;
  color: inherit;
  width: 100%;
  height: 100%;
  word-wrap: break-word;
  word-break: break-all;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0.5rem;
}
#search-container #results-container #results li a .search-title {
  font-size: 1.2rem;
  font-weight: 900;
  color: var(--primary-color);
  font-family: var(--ui-font);
}
#search-container #results-container #results li a .search-content {
  margin: 0;
  font-size: 1rem;
  line-height: 1.5rem;
  color: var(--primary-dark-color);
  font-family: var(--text-font);
}
#search-container #results-container #results li a em {
  font-style: normal;
  padding: 0 0.25rem;
  background-color: var(--primary-dark-color);
  color: var(--primary-extra-light-color);
}
@media (hover: hover) {
  #search-container #results-container #results li:hover {
    background-color: var(--primary-semi-light-color);
  }
}

@media screen and (max-width: 1024px) {
  #search-container #search-button {
    width: 2.5rem;
    height: 2.5rem;
    line-height: 2.5rem;
    font-size: 1.5rem;
    background-color: var(--primary-color);
  }
  #search-container #search-input {
    height: 2.5rem;
    font-size: 1.25rem;
  }
  #search-container #results-container {
    bottom: 2.5rem;
    width: 22rem;
  }
}
.notfound-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.notfound-container h1 {
  font-size: 10rem;
  font-weight: 900;
  font-family: var(--ui-font);
  margin: 0;
  color: var(--primary-color);
}
.notfound-container p {
  font-size: 1.5rem;
  margin: 0;
  color: var(--primary-dark-color);
}

[data-theme=light] code table td {
  padding: 5px;
}
[data-theme=light] code table pre {
  margin: 0;
}
[data-theme=light] code .c, [data-theme=light] code .ch, [data-theme=light] code .cd, [data-theme=light] code .cm, [data-theme=light] code .cpf, [data-theme=light] code .c1 {
  color: #888888;
}
[data-theme=light] code .cp {
  color: #cc0000;
  font-weight: bold;
}
[data-theme=light] code .cs {
  color: #cc0000;
  background-color: #fff0f0;
  font-weight: bold;
}
[data-theme=light] code .err {
  color: #a61717;
  background-color: #e3d2d2;
}
[data-theme=light] code .gr {
  color: #aa0000;
}
[data-theme=light] code .gh {
  color: #333333;
}
[data-theme=light] code .gu {
  color: #666666;
}
[data-theme=light] code .gd {
  color: #000000;
  background-color: #ffdddd;
}
[data-theme=light] code .gi {
  color: #000000;
  background-color: #ddffdd;
}
[data-theme=light] code .ge {
  font-style: italic;
}
[data-theme=light] code .gs {
  font-weight: bold;
}
[data-theme=light] code .gl {
  color: #888888;
}
[data-theme=light] code .go {
  color: #888888;
}
[data-theme=light] code .gp {
  color: #555555;
}
[data-theme=light] code .gt {
  color: #aa0000;
}
[data-theme=light] code .k, [data-theme=light] code .kc, [data-theme=light] code .kd, [data-theme=light] code .kn, [data-theme=light] code .kr, [data-theme=light] code .kv {
  color: #008800;
  font-weight: bold;
}
[data-theme=light] code .kp {
  color: #008800;
}
[data-theme=light] code .kt {
  color: #888888;
  font-weight: bold;
}
[data-theme=light] code .m, [data-theme=light] code .mb, [data-theme=light] code .mf, [data-theme=light] code .mh, [data-theme=light] code .mi, [data-theme=light] code .il, [data-theme=light] code .mo, [data-theme=light] code .mx {
  color: #0000dd;
  font-weight: bold;
}
[data-theme=light] code .s, [data-theme=light] code .sb, [data-theme=light] code .sc, [data-theme=light] code .dl, [data-theme=light] code .sd, [data-theme=light] code .s2, [data-theme=light] code .sh, [data-theme=light] code .s1 {
  color: #dd2200;
  background-color: #fff0f0;
}
[data-theme=light] code .sa {
  color: #008800;
  font-weight: bold;
}
[data-theme=light] code .se {
  color: #0044dd;
  background-color: #fff0f0;
}
[data-theme=light] code .si {
  color: #3333bb;
  background-color: #fff0f0;
}
[data-theme=light] code .sx {
  color: #22bb22;
  background-color: #f0fff0;
}
[data-theme=light] code .sr {
  color: #008800;
}
[data-theme=light] code .ss {
  color: #aa6600;
  background-color: #fff0f0;
}
[data-theme=light] code .na {
  color: #336699;
}
[data-theme=light] code .nb, [data-theme=light] code .bp {
  color: #003388;
}
[data-theme=light] code .nc {
  color: #bb0066;
  font-weight: bold;
}
[data-theme=light] code .no {
  color: #003366;
  font-weight: bold;
}
[data-theme=light] code .nd {
  color: #555555;
}
[data-theme=light] code .ne {
  color: #bb0066;
  font-weight: bold;
}
[data-theme=light] code .nf, [data-theme=light] code .fm {
  color: #0066bb;
  font-weight: bold;
}
[data-theme=light] code .nl {
  color: #336699;
}
[data-theme=light] code .nn {
  color: #bb0066;
  font-weight: bold;
}
[data-theme=light] code .py {
  color: #336699;
  font-weight: bold;
}
[data-theme=light] code .nt {
  color: #bb0066;
  font-weight: bold;
}
[data-theme=light] code .nv, [data-theme=light] code .vc, [data-theme=light] code .vm {
  color: #336699;
}
[data-theme=light] code .vg {
  color: #dd7700;
}
[data-theme=light] code .vi {
  color: #3333bb;
}
[data-theme=light] code .ow {
  color: #008800;
}
[data-theme=light] code .w {
  color: #bbbbbb;
}

[data-theme=dark] .highlight table td {
  padding: 5px;
}
[data-theme=dark] .highlight table pre {
  margin: 0;
}
[data-theme=dark] .highlight .c, [data-theme=dark] .highlight .ch, [data-theme=dark] .highlight .cd, [data-theme=dark] .highlight .cpf {
  color: #5e5d83;
  font-style: italic;
}
[data-theme=dark] .highlight .cm {
  color: #5e5d83;
  font-style: italic;
}
[data-theme=dark] .highlight .c1 {
  color: #5e5d83;
  font-style: italic;
}
[data-theme=dark] .highlight .cp {
  color: #465457;
  font-weight: bold;
}
[data-theme=dark] .highlight .cs {
  color: #465457;
  font-weight: bold;
  font-style: italic;
}
[data-theme=dark] .highlight .err {
  color: #f8f8f2;
  background-color: #403d3d;
}
[data-theme=dark] .highlight .gi {
  color: #a6e22e;
}
[data-theme=dark] .highlight .gd {
  color: #f92672;
}
[data-theme=dark] .highlight .ge {
  color: #1b1d1e;
  font-style: italic;
}
[data-theme=dark] .highlight .gr {
  color: #f92672;
}
[data-theme=dark] .highlight .gt {
  color: #f92672;
}
[data-theme=dark] .highlight .gh {
  color: #403d3d;
}
[data-theme=dark] .highlight .go {
  color: #403d3d;
}
[data-theme=dark] .highlight .gp {
  color: #66d9ef;
}
[data-theme=dark] .highlight .gs {
  font-weight: bold;
}
[data-theme=dark] .highlight .gu {
  color: #465457;
}
[data-theme=dark] .highlight .k, [data-theme=dark] .highlight .kv {
  color: #66d9ef;
  font-weight: bold;
}
[data-theme=dark] .highlight .kc {
  color: #66d9ef;
  font-weight: bold;
}
[data-theme=dark] .highlight .kd {
  color: #66d9ef;
  font-weight: bold;
}
[data-theme=dark] .highlight .kp {
  color: #66d9ef;
  font-weight: bold;
}
[data-theme=dark] .highlight .kr {
  color: #66d9ef;
  font-weight: bold;
}
[data-theme=dark] .highlight .kt {
  color: #66d9ef;
  font-weight: bold;
}
[data-theme=dark] .highlight .kn {
  color: #f92672;
  font-weight: bold;
}
[data-theme=dark] .highlight .ow {
  color: #f92672;
  font-weight: bold;
}
[data-theme=dark] .highlight .o {
  color: #f92672;
  font-weight: bold;
}
[data-theme=dark] .highlight .mf {
  color: #af87ff;
}
[data-theme=dark] .highlight .mh {
  color: #af87ff;
}
[data-theme=dark] .highlight .il {
  color: #af87ff;
}
[data-theme=dark] .highlight .mi {
  color: #af87ff;
}
[data-theme=dark] .highlight .mo {
  color: #af87ff;
}
[data-theme=dark] .highlight .m, [data-theme=dark] .highlight .mb, [data-theme=dark] .highlight .mx {
  color: #af87ff;
}
[data-theme=dark] .highlight .se {
  color: #af87ff;
}
[data-theme=dark] .highlight .sb {
  color: #d7d787;
}
[data-theme=dark] .highlight .sc {
  color: #d7d787;
}
[data-theme=dark] .highlight .sd {
  color: #d7d787;
}
[data-theme=dark] .highlight .s2 {
  color: #d7d787;
}
[data-theme=dark] .highlight .sh {
  color: #d7d787;
}
[data-theme=dark] .highlight .si {
  color: #d7d787;
}
[data-theme=dark] .highlight .sx {
  color: #d7d787;
}
[data-theme=dark] .highlight .sr {
  color: #d7d787;
}
[data-theme=dark] .highlight .s1 {
  color: #d7d787;
}
[data-theme=dark] .highlight .ss {
  color: #d7d787;
}
[data-theme=dark] .highlight .s, [data-theme=dark] .highlight .sa, [data-theme=dark] .highlight .dl {
  color: #d7d787;
}
[data-theme=dark] .highlight .na {
  color: #a6e22e;
}
[data-theme=dark] .highlight .nc {
  color: #a6e22e;
  font-weight: bold;
}
[data-theme=dark] .highlight .nd {
  color: #a6e22e;
  font-weight: bold;
}
[data-theme=dark] .highlight .ne {
  color: #a6e22e;
  font-weight: bold;
}
[data-theme=dark] .highlight .nf, [data-theme=dark] .highlight .fm {
  color: #a6e22e;
  font-weight: bold;
}
[data-theme=dark] .highlight .no {
  color: #66d9ef;
}
[data-theme=dark] .highlight .bp {
  color: #f8f8f2;
}
[data-theme=dark] .highlight .nb {
  color: #f8f8f2;
}
[data-theme=dark] .highlight .ni {
  color: #f8f8f2;
}
[data-theme=dark] .highlight .nn {
  color: #f8f8f2;
}
[data-theme=dark] .highlight .vc {
  color: #f8f8f2;
}
[data-theme=dark] .highlight .vg {
  color: #f8f8f2;
}
[data-theme=dark] .highlight .vi {
  color: #f8f8f2;
}
[data-theme=dark] .highlight .nv, [data-theme=dark] .highlight .vm {
  color: #f8f8f2;
}
[data-theme=dark] .highlight .w {
  color: #f8f8f2;
}
[data-theme=dark] .highlight .nl {
  color: #f8f8f2;
  font-weight: bold;
}
[data-theme=dark] .highlight .nt {
  color: #f92672;
}
[data-theme=dark] .highlight {
  color: #f8f8f2;
  background-color: #1b1d1e;
}

html[data-theme=light] {
  --primary-dark-color: hsl(10, 83%, 20%);
  --primary-semi-dark-color: hsl(12, 83%, 35%);
  --primary-color: hsl(15, 83%, 46%);
  --primary-little-light-color: hsl(16, 83%, 65%);
  --primary-semi-light-color: hsl(18, 83%, 85%);
  --primary-light-color: hsl(20, 83%, 95%);
  --primary-extra-light-color: hsl(20, 83%, 98%);
  --white-color: hsl(0, 0%, 99%);
  --black-color: hsl(0, 0%, 0%);
  --true-white-color: hsl(0, 0%, 99%);
}

html[data-theme=dark] {
  --primary-dark-color: hsl(0, 0%, 60%);
  --primary-semi-dark-color: hsl(16, 83%, 65%);
  --primary-color: hsl(15, 83%, 46%);
  --primary-little-light-color: hsl(12, 83%, 35%);
  --primary-semi-light-color: hsl(0, 0%, 20%);
  --primary-light-color: hsl(0, 0%, 10%);
  --primary-extra-light-color: hsl(0, 0%, 5%);
  --white-color: hsl(0, 0%, 2%);
  --black-color: hsl(0, 0%, 80%);
  --true-white-color: hsl(0, 0%, 99%);
}

@font-face {
  font-family: "Orbitron";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url(/assets/font/Orbitron.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Material Symbols Outlined";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/font/Material_Symbols_Outlined.woff2) format("woff2");
}
.material-symbols-outlined {
  font-family: "Material Symbols Outlined", none;
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: none;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
}

:root {
  --ui-font: "Orbitron", sans-serif;
  --text-font: "Helvetica Neue", "Helvetica", "微软雅黑", "Arial", "sans-serif";
}

::selection {
  color: var(--white-color);
  background-color: var(--primary-little-light-color);
}

::-webkit-scrollbar {
  width: 0.25rem;
}

::-webkit-scrollbar-thumb {
  background-color: var(--primary-color);
}

::-webkit-scrollbar-track {
  background-color: var(--primary-extra-light-color);
}

:root {
  font-size: 16px;
  font-family: var(--text-font);
}

@media screen and (max-width: 1024px) {
  :root {
    font-size: 14px;
  }
}
@media screen and (max-width: 768px) {
  :root {
    font-size: 12px;
  }
}
html {
  overflow-x: hidden;
}

body {
  width: 100%;
  min-height: 100vh;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: start;
  gap: 1rem;
  scroll-behavior: smooth;
  background-color: var(--white-color);
}

* button {
  cursor: pointer;
}

* .no-select {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  -moz-user-drag: none;
}
* .no-select img {
  pointer-events: none;
}

@media print {
  :root {
    font-size: 12px;
  }
  * .no-print,
  * .no-print * {
    display: none !important;
  }
}
* .material-symbols-outlined {
  vertical-align: -0.2em;
}

* .iconify {
  vertical-align: -0.1em;
}

/*# sourceMappingURL=main.css.map */