:root,
[data-theme='light'] {
  --anzhiyu-main: #66856d !important;
  --anzhiyu-theme: #66856d !important;
  --anzhiyu-background: #edf2f2 !important;
  --anzhiyu-secondbg: #f8f5ef !important;
  --anzhiyu-card-bg: rgba(255, 253, 249, .9) !important;
  --anzhiyu-fontcolor: #17242a !important;
  --anzhiyu-secondtext: #6b7c80 !important;
  --desktop-surface: rgba(255, 253, 249, .9);
  --desktop-solid: #f8f5ef;
  --desktop-line: rgba(255, 255, 255, .78);
  --desktop-line-muted: rgba(86, 108, 96, .14);
  --desktop-shadow: 0 20px 54px rgba(54, 70, 67, .11);
}

html {
  min-width: 320px;
  scroll-padding-top: 100px;
}

body,
#body-wrap,
#web_bg {
  background: #edf2f2 url('/img/personal-desktop/ambient-light.webp') center / cover fixed no-repeat !important;
}

body {
  color: var(--anzhiyu-fontcolor);
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'PingFang SC', 'Microsoft YaHei', sans-serif !important;
  -webkit-font-smoothing: antialiased;
}

/* Shared floating navigation */
#nav {
  position: fixed !important;
  z-index: 110 !important;
  top: 24px !important;
  right: auto !important;
  left: 28px !important;
  width: auto !important;
  max-width: calc(100vw - 56px) !important;
  min-height: 60px !important;
  padding: 8px 11px !important;
  border: 1px solid var(--desktop-line) !important;
  border-radius: 22px !important;
  background: var(--desktop-surface) !important;
  box-shadow: var(--desktop-shadow) !important;
  backdrop-filter: blur(18px) saturate(116%) !important;
}

#nav #nav-group {
  display: flex;
  position: static !important;
  align-items: center;
  gap: 4px;
  width: auto;
}

#nav #blog_name {
  margin-right: 5px;
  padding-right: 12px;
  border-right: 1px solid var(--desktop-line-muted);
}

#nav #site-name {
  display: flex;
  align-items: center;
  min-height: 42px;
  padding: 0 8px !important;
  color: var(--anzhiyu-fontcolor) !important;
}

#nav #site-name .title {
  font-size: .88rem !important;
  font-weight: 650 !important;
}

#nav #site-name > i,
#nav .mask-name-container,
#nav #randomPost_button,
#nav #nav-totop,
#nav #center-console,
#nav #center-console + label,
#console {
  display: none !important;
}

#nav #menus,
#nav .menus_items,
#nav #nav-right {
  display: flex;
  position: static !important;
  align-items: center;
}

#nav .menus_items {
  gap: 3px;
}

#nav .menus_item > a,
#nav #search-button > a,
#nav #toggle-menu > a {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 12px !important;
  border-radius: 15px;
  color: var(--anzhiyu-secondtext) !important;
  font-size: .82rem !important;
}

#nav .menus_item > a:hover,
#nav #search-button > a:hover,
#nav #toggle-menu > a:hover {
  color: #526f5b !important;
  background: rgba(102, 133, 109, .11) !important;
}

#nav #nav-right {
  position: static !important;
  margin-left: 4px;
  padding-left: 4px;
  border-left: 1px solid var(--desktop-line-muted);
}

#nav #search-button span {
  display: none;
}

#toggle-menu {
  display: none;
}

/* Article masthead */
#page-header.post-bg {
  position: relative !important;
  width: min(1160px, calc(100% - 56px)) !important;
  height: 360px !important;
  min-height: 360px !important;
  margin: 128px auto 30px !important;
  overflow: hidden !important;
  border: 1px solid var(--desktop-line) !important;
  border-radius: 48px 78px 54px 72px !important;
  background: var(--desktop-surface) !important;
  box-shadow: var(--desktop-shadow) !important;
}

#page-header.post-bg::before {
  display: none !important;
}

#page-header.post-bg #post-info {
  position: absolute !important;
  z-index: 2;
  inset: 0 auto 0 0 !important;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  width: 56%;
  height: 100% !important;
  padding: 48px 52px 42px 62px !important;
  text-align: left !important;
}

#page-header.post-bg #post-top-cover {
  position: absolute !important;
  z-index: 1;
  inset: 0 0 0 auto !important;
  width: 52% !important;
  height: 100% !important;
  overflow: hidden;
  border-radius: 50% 0 0 50%;
  filter: none !important;
  transform: none !important;
}

#page-header.post-bg #post-top-cover::after {
  position: absolute;
  inset: 0;
  content: '';
  background: rgba(248, 245, 239, .08);
}

#page-header.post-bg #post-top-bg {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: 53% center !important;
  filter: saturate(.8) contrast(.95) brightness(1.03);
  transform: none !important;
}

#post-info #post-firstinfo {
  position: static !important;
  width: 100% !important;
  min-width: 0;
  margin: 0 0 15px !important;
}

#post-info #post-firstinfo .meta-firstline {
  flex-wrap: wrap !important;
  width: 100%;
  height: auto !important;
  min-height: 32px;
  line-height: 1.45;
  white-space: normal;
}

#post-info #post-firstinfo .post-meta-original,
#post-info #post-firstinfo .post-meta-categories,
#post-info #post-firstinfo .article-meta.tags {
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
}

#post-info .post-meta-original,
#post-info .post-meta-categories,
#post-info .article-meta__tags {
  color: #526f5b !important;
}

#post-info .meta-firstline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: .76rem;
}

#post-info .post-title {
  position: static !important;
  width: 100%;
  max-width: 510px;
  margin: 0 0 18px !important;
  overflow-wrap: anywhere;
  color: #17242a !important;
  font-size: clamp(2rem, 3vw, 2.8rem) !important;
  font-weight: 720 !important;
  letter-spacing: -.055em !important;
  line-height: 1.06 !important;
  text-shadow: none !important;
}

#post-info #post-meta {
  position: static !important;
  width: 100%;
  min-width: 0;
  margin: 0 !important;
}

#post-info #post-meta .meta-firstline {
  width: 100%;
  min-height: 28px;
  height: auto !important;
}

#post-info #post-meta,
#post-info #post-meta a,
#post-info #post-meta time {
  color: #6b7c80 !important;
  text-shadow: none !important;
}

#post-info .meta-secondline,
#post-info .post-meta-position,
#post-info .post-meta-label,
#post-info .post-meta-date-updated,
#post-info .post-meta-date-updated + * {
  display: none !important;
}

/* Reading surface and directory */
#blog-container {
  min-height: 50vh;
}

#content-inner.layout {
  display: grid !important;
  grid-template-columns: minmax(0, 820px) 250px;
  align-items: start;
  gap: 24px;
  width: min(1100px, calc(100% - 36px)) !important;
  max-width: 1100px !important;
  margin: 0 auto !important;
  padding: 0 0 74px !important;
}

#content-inner.layout > #post {
  grid-column: 1;
  grid-row: 1;
  order: 0 !important;
  width: auto !important;
  min-width: 0;
  padding: 48px 54px !important;
  border: 1px solid var(--desktop-line) !important;
  border-radius: 34px !important;
  background: var(--desktop-surface) !important;
  box-shadow: var(--desktop-shadow) !important;
}

#article-container > header {
  display: none;
}

#article-container {
  color: var(--anzhiyu-fontcolor) !important;
  font-size: 1.03rem !important;
  line-height: 1.95 !important;
}

#article-container p {
  margin: 0 0 1.45em !important;
}

#article-container h2,
#article-container h3,
#article-container h4 {
  color: var(--anzhiyu-fontcolor) !important;
  font-weight: 700 !important;
  letter-spacing: -.025em;
}

#article-container h2 {
  margin: 2.3em 0 .85em !important;
  padding: 0 0 12px !important;
  border-bottom: 1px solid var(--desktop-line-muted) !important;
  font-size: 1.58rem !important;
}

#article-container h3 {
  margin: 1.9em 0 .75em !important;
  font-size: 1.26rem !important;
}

#article-container a {
  color: #526f5b !important;
  text-decoration-color: rgba(82, 111, 91, .4) !important;
  text-underline-offset: 4px;
}

#article-container blockquote {
  margin: 1.6em 0 !important;
  padding: 18px 22px !important;
  border: 0 !important;
  border-left: 4px solid #66856d !important;
  border-radius: 0 18px 18px 0 !important;
  color: var(--anzhiyu-secondtext) !important;
  background: rgba(102, 133, 109, .1) !important;
}

#article-container img {
  border-radius: 22px !important;
}

#article-container figure.highlight,
#article-container pre {
  border-radius: 18px !important;
}

#aside-content {
  grid-column: 2;
  grid-row: 1;
  order: 0 !important;
  width: auto !important;
}

#aside-content .sticky_layout {
  top: 104px !important;
}

#aside-content #card-toc {
  padding: 20px !important;
  border: 1px solid var(--desktop-line) !important;
  border-radius: 25px !important;
  background: var(--desktop-surface) !important;
  box-shadow: 0 14px 38px rgba(54, 70, 67, .08) !important;
  backdrop-filter: blur(16px) !important;
}

#card-toc .item-headline {
  margin-bottom: 12px !important;
  color: var(--anzhiyu-fontcolor) !important;
  font-size: .86rem !important;
}

#card-toc .toc-link {
  min-height: 34px;
  padding: 7px 9px !important;
  border-radius: 10px;
  color: var(--anzhiyu-secondtext) !important;
  font-size: .78rem !important;
}

#card-toc .toc-link.active {
  color: #526f5b !important;
  background: rgba(102, 133, 109, .11) !important;
}

/* Compact, honest article ownership block */
.post-copyright {
  display: grid !important;
  grid-template-columns: auto 1fr;
  gap: 8px 16px !important;
  margin-top: 48px !important;
  padding: 24px !important;
  overflow: hidden;
  border: 1px solid var(--desktop-line-muted) !important;
  border-radius: 22px !important;
  background: rgba(102, 133, 109, .07) !important;
  box-shadow: none !important;
}

.post-copyright .copyright-cc-box,
.post-copyright .post-copyright__author_img,
.post-copyright .post-tools,
.post-copyright + .post-tools-right,
#post .post-tools-right,
#post .pagination-post:empty {
  display: none !important;
}

.post-copyright__author_box {
  grid-row: 1 / span 2;
  min-width: 90px;
}

.post-copyright__author_name,
.post-copyright__author_desc {
  color: var(--anzhiyu-fontcolor) !important;
}

.post-copyright__post__info,
.post-copyright__notice {
  min-width: 0;
}

.post-copyright__notice {
  color: var(--anzhiyu-secondtext) !important;
  font-size: .76rem !important;
  line-height: 1.65 !important;
}

/* Archive and taxonomy pages that still use the theme renderer */
#page-header:not(.post-bg) {
  height: 250px !important;
  min-height: 250px !important;
  margin-bottom: 20px;
  background: transparent !important;
}

#page-header:not(.post-bg)::before {
  display: none !important;
}

#page-header:not(.post-bg) #site-info,
#page-header:not(.post-bg) #page-site-info {
  padding-top: 125px !important;
  color: var(--anzhiyu-fontcolor) !important;
  text-shadow: none !important;
}

#archive,
#page,
.layout > div:first-child:not(.recent-posts):not(#post) {
  border: 1px solid var(--desktop-line) !important;
  border-radius: 30px !important;
  background: var(--desktop-surface) !important;
  box-shadow: var(--desktop-shadow) !important;
}

#footer {
  background: transparent !important;
}

#footer-wrap {
  display: none;
}

#footer-bar {
  width: min(1100px, calc(100% - 36px));
  margin: 0 auto 30px;
  padding: 22px 0 !important;
  border-top: 1px solid var(--desktop-line-muted);
  color: var(--anzhiyu-secondtext) !important;
  background: transparent !important;
}

#footer-bar .footer-bar-right,
#rightMenu,
#rightmenu-mask {
  display: none !important;
}

#rightside button {
  color: var(--anzhiyu-fontcolor) !important;
  background: var(--desktop-surface) !important;
  box-shadow: 0 10px 26px rgba(54, 70, 67, .1) !important;
}

a:hover,
#nav a:hover {
  color: #526f5b !important;
}

:focus-visible {
  outline: 3px solid rgba(45, 115, 84, .62) !important;
  outline-offset: 3px !important;
}

[data-theme='dark'] {
  --anzhiyu-main: #9ab7a2 !important;
  --anzhiyu-theme: #9ab7a2 !important;
  --anzhiyu-background: #15221e !important;
  --anzhiyu-secondbg: #24332d !important;
  --anzhiyu-card-bg: rgba(33, 48, 42, .92) !important;
  --anzhiyu-fontcolor: #edf2ed !important;
  --anzhiyu-secondtext: #aabbb1 !important;
  --desktop-surface: rgba(33, 48, 42, .92);
  --desktop-solid: #24332d;
  --desktop-line: rgba(224, 236, 229, .14);
  --desktop-line-muted: rgba(224, 236, 229, .11);
  --desktop-shadow: 0 22px 54px rgba(3, 8, 6, .34);
}

[data-theme='dark'] body,
[data-theme='dark'] #body-wrap,
[data-theme='dark'] #web_bg {
  background-color: #15221e !important;
  background-blend-mode: multiply !important;
}

[data-theme='dark'] #post-info .post-title {
  color: #edf2ed !important;
}

[data-theme='dark'] #page-header.post-bg #post-top-cover::after {
  background: rgba(21, 34, 30, .2);
}

@media (max-width: 980px) {
  #nav #menus {
    display: none;
  }

  #toggle-menu {
    display: block;
  }

  #content-inner.layout {
    grid-template-columns: 1fr;
  }

  #aside-content {
    display: none !important;
  }
}

@media (max-width: 720px) {
  html,
  body,
  #body-wrap {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  #nav {
    box-sizing: border-box !important;
    top: 12px !important;
    right: 12px !important;
    left: 12px !important;
    width: auto !important;
    max-width: calc(100% - 24px) !important;
  }

  #nav #nav-group {
    min-width: 0;
    width: 100%;
  }

  #nav #nav-right {
    margin-left: auto;
  }

  #page-header.post-bg {
    box-sizing: border-box !important;
    width: calc(100% - 24px) !important;
    min-width: 0 !important;
    max-width: calc(100% - 24px) !important;
    height: 505px !important;
    min-height: 505px !important;
    margin-top: 96px !important;
    border-radius: 34px 46px 38px 42px !important;
  }

  #page-header.post-bg #post-info {
    box-sizing: border-box !important;
    min-width: 0 !important;
    max-width: 100% !important;
    inset: 0 0 auto !important;
    justify-content: flex-start;
    width: 100%;
    height: 325px !important;
    padding: 32px 28px 24px !important;
  }

  #page-header.post-bg #post-top-cover {
    min-width: 0 !important;
    max-width: 100% !important;
    inset: auto 0 0 !important;
    width: 100% !important;
    height: 205px !important;
    border-radius: 50% 50% 0 0;
  }

  #post-info .post-title {
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 13px !important;
    overflow-wrap: anywhere;
    font-size: clamp(1.72rem, 8vw, 2.2rem) !important;
    line-height: 1.12 !important;
    white-space: normal !important;
  }

  #post-info #post-firstinfo {
    margin-bottom: 10px !important;
  }

  #post-info #post-firstinfo .meta-firstline {
    max-height: 76px;
    overflow: hidden;
  }

  #content-inner.layout {
    box-sizing: border-box !important;
    width: calc(100% - 24px) !important;
    min-width: 0 !important;
    max-width: calc(100% - 24px) !important;
  }

  #content-inner.layout > #post {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 32px 24px !important;
    border-radius: 28px !important;
  }

  #article-container {
    width: 100% !important;
    max-width: 100% !important;
    overflow-wrap: anywhere;
    font-size: .98rem !important;
    line-height: 1.85 !important;
  }

  #article-container h2 {
    font-size: 1.42rem !important;
  }

  .post-copyright {
    grid-template-columns: 1fr;
    padding: 20px !important;
  }

  .post-copyright__author_box {
    grid-row: auto;
  }

  #footer-bar {
    width: calc(100% - 28px);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}