/* ListFX Blog custom skin, inspired by luotian.cyou. */
:root {
  --listfx-accent: #49b1f5;
  --listfx-text: #2c3e50;
  --listfx-glass: rgba(255, 255, 255, .64);
  --listfx-shadow: 0 10px 30px rgba(45, 65, 85, .2);
  --listfx-shadow-hover: 0 18px 38px -14px rgba(45, 65, 85, .36);
  --listfx-radius: 16px;
  --listfx-backdrop: blur(12px) saturate(135%);
}
body {
  background: radial-gradient(circle at 8% 12%, rgba(73,177,245,.2), transparent 30%), radial-gradient(circle at 88% 20%, rgba(255,113,66,.14), transparent 28%), radial-gradient(circle at 75% 88%, rgba(123,97,255,.13), transparent 30%), linear-gradient(135deg, #eef7ff 0%, #fff8f2 48%, #f3efff 100%);
  background-attachment: fixed;
}
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .25;
  background-image: radial-gradient(rgba(44,62,80,.16) .7px, transparent .7px);
  background-size: 18px 18px;
}
/* Glass surfaces, radius and depth are defined once at the end of this file. */
#body-wrap #pagination .page-number:not(.current):hover,
#body-wrap #pagination .extend:hover { color: #fff; border-color: rgba(255,113,66,.82); background: rgba(255,113,66,.82); }
html:not([data-theme='dark']) #site-title,
html:not([data-theme='dark']) .site-title,
html:not([data-theme='dark']) #site-name,
html:not([data-theme='dark']) #site-info .site-subtitle,
html:not([data-theme='dark']) #subtitle,
html:not([data-theme='dark']) #nav #blog-info a,
html:not([data-theme='dark']) #nav .site-page,
html:not([data-theme='dark']) #search-button > a,
html:not([data-theme='dark']) #post-info .post-title,
html:not([data-theme='dark']) #post-info #post-meta,
html:not([data-theme='dark']) #post-info #post-meta a,
html:not([data-theme='dark']) #footer,
html:not([data-theme='dark']) #footer > *,
html:not([data-theme='dark']) #footer div,
html:not([data-theme='dark']) #footer p,
html:not([data-theme='dark']) #footer span,
html:not([data-theme='dark']) #footer a,
html:not([data-theme='dark']) #footer .copyright *,
html:not([data-theme='dark']) #footer .framework-info * {
  color: var(--listfx-text) !important;
  text-shadow: none !important;
}

html:not([data-theme='dark']) #footer a:hover {
  color: var(--listfx-accent) !important;
}
html:not([data-theme='dark']) #nav .menus_item:hover > a,
html:not([data-theme='dark']) #nav .menus_item:hover > a > span,
html:not([data-theme='dark']) #nav .menus_item_child li:hover a,
html:not([data-theme='dark']) #post-info #post-meta a:hover { color: var(--listfx-accent) !important; }
#footer, #page-header.post-bg, #page-header.page-bg { background: transparent !important; }
#page-header.post-bg::before, #page-header.page-bg::before { background-color: transparent !important; }
#body-wrap #recent-posts > .recent-post-item .recent-post-info,
#body-wrap #recent-posts > .recent-post-item .recent-post-info::before,
#body-wrap #recent-posts > .recent-post-item .recent-post-info::after,
#body-wrap #recent-posts > .recent-post-item .recent-post-info > .article-title,
#body-wrap #recent-posts > .recent-post-item .recent-post-info > .article-meta-wrap,
#body-wrap #recent-posts > .recent-post-item .recent-post-info > .content { background: transparent !important; box-shadow: none !important; }
#page-header #post-info {
  position: absolute;
  bottom: 0;
  left: 50%;
  box-sizing: border-box;
  display: block;
  width: min(92%, 1100px);
  margin: 0;
  padding: 22px 40px;
  text-align: left;
  border-radius: var(--listfx-radius);
  transform: translateX(-50%);
}
#article-container {
  font-family: 'LXGW WenKai', sans-serif;
  text-align: justify;
}
/* Titles follow the same font as the article body. */
#post-info .post-title,
#page-site-info #site-title,
#page .page-title,
.recent-post-item .article-title,
.relatedPosts .info-item-2,
.pagination-related .info-item-2,
.aside-list .aside-list-item .title {
  font-family: 'LXGW WenKai', sans-serif;
}
#body-wrap #page .page-title { text-align: center !important; }
#article-container .mermaid, #article-container .mermaid svg, .mermaid-wrap,
#article-container .mermaid svg rect.mermaid-bg, #article-container .mermaid svg rect:first-child { background: transparent !important; fill: transparent !important; }
html:not([data-theme='dark']) {
  --hl-bg: #f4f7fa !important;
  --hltools-bg: #e9eef4 !important;
  --hlnumber-bg: #f4f7fa !important;
  --hlnumber-color: #8da4bb !important;
  --hlscrollbar-bg: #dbe6f0 !important;
}
html:not([data-theme='dark']) .highlight .code .keyword,
html:not([data-theme='dark']) .highlight .code .built_in,
html:not([data-theme='dark']) .highlight .code .type { color: #005cc5 !important; }
html:not([data-theme='dark']) .highlight .code .string { color: #22863a !important; }
html:not([data-theme='dark']) .highlight .code .comment { color: #677886 !important; font-style: italic; }
html:not([data-theme='dark']) .highlight .code .number { color: #d130a5 !important; }
html:not([data-theme='dark']) .highlight .code .title,
html:not([data-theme='dark']) .highlight .code .function { color: #0077aa !important; }
html:not([data-theme='dark']) .highlight .code .meta { color: #8b3c9b !important; }
html[data-theme='dark'] {
  --listfx-glass: rgba(255, 255, 255, .06);
  --listfx-shadow: 0 10px 30px rgba(0, 0, 0, .25);
  --listfx-shadow-hover: 0 18px 38px -14px rgba(0, 0, 0, .55);
  --hl-bg: #0b0f19 !important;
  --hltools-bg: #111726 !important;
  --hlnumber-bg: #0b0f19 !important;
  --hlnumber-color: #5c6c7f !important;
  --hlscrollbar-bg: #1e293b !important;
}
html[data-theme='dark'] body { background: radial-gradient(circle at 10% 15%, rgba(73,177,245,.14), transparent 30%), radial-gradient(circle at 88% 25%, rgba(255,113,66,.09), transparent 28%), linear-gradient(135deg, #0d1320 0%, #15131b 55%, #111827 100%); background-attachment: fixed; }
html[data-theme='dark'] .highlight .code .keyword,
html[data-theme='dark'] .highlight .code .built_in,
html[data-theme='dark'] .highlight .code .type { color: #569cd6 !important; }
html[data-theme='dark'] .highlight .code .string { color: #8fca5c !important; }
html[data-theme='dark'] .highlight .code .comment { color: #6e8294 !important; font-style: italic; }
html[data-theme='dark'] .highlight .code .number { color: #f07178 !important; }
html[data-theme='dark'] .highlight .code .title,
html[data-theme='dark'] .highlight .code .function { color: #82aaff !important; }
html[data-theme='dark'] .highlight .code .meta { color: #c792ea !important; }
#article-container table th, #article-container table thead th { text-align: center !important; }
html:not([data-theme='dark']) #article-container table { background: rgba(255,255,255,.5) !important; }
html:not([data-theme='dark']) #article-container table tbody tr:nth-child(even) { background: rgba(240,244,248,.5) !important; }
html[data-theme='dark'] #article-container table { background: rgba(22,27,34,.5) !important; }
html[data-theme='dark'] #article-container table tbody tr:nth-child(even) { background: rgba(30,36,44,.5) !important; }
iframe[src*='youtube.com'], iframe[src*='youtu.be'], iframe[src*='vimeo.com'] { display: block; width: 100%; max-width: 100%; height: auto; aspect-ratio: 16 / 9; }
@media screen and (max-width: 768px) {
  #page-header #post-info { bottom: 16px !important; width: calc(100% - 28px); padding: 16px 20px !important; }
  #post-info .post-title { display: block; margin-bottom: 10px; text-align: left !important; }
  #post-info #post-meta > .meta-firstline > span:not(.post-meta-wordcount),
  #post-info #post-meta > .meta-secondline > span:not(.post-meta-wordcount),
  #post-info #post-meta .post-meta-separator { display: none !important; }
}


/* Full-screen homepage hero. */
#page-header.full_page #site-info {
  top: 50%;
  z-index: 2;
  transform: translateY(-50%);
}

#page-header.full_page::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(8, 24, 42, 0) 42%, rgba(8, 35, 62, .16) 64%, rgba(8, 35, 62, .76) 100%);
}

#page-header.full_page #nav {
  top: 16px;
  right: 18px;
  left: 18px;
  z-index: 20;
  width: auto;
}

#page-header.full_page.nav-fixed.fixed #nav {
  top: 4px;
  right: 8px;
  left: 8px;
}

html:not([data-theme='dark']) #page-header.full_page #nav a,
html:not([data-theme='dark']) #page-header.full_page #nav .site-name,
html:not([data-theme='dark']) #page-header.full_page #nav #toggle-menu,
html:not([data-theme='dark']) #page-header.full_page #nav .site-page {
  color: var(--listfx-text) !important;
  text-shadow: none;
}

html:not([data-theme='dark']) #page-header.full_page #nav .menus_item:hover > a,
html:not([data-theme='dark']) #page-header.full_page #nav .menus_item:hover > a > span,
html:not([data-theme='dark']) #page-header.full_page #nav .site-page:hover {
  color: var(--listfx-accent) !important;
}

html[data-theme='dark'] #page-header.full_page #nav a,
html[data-theme='dark'] #page-header.full_page #nav .site-name,
html[data-theme='dark'] #page-header.full_page #nav #toggle-menu,
html[data-theme='dark'] #page-header.full_page #nav .site-page {
  color: var(--white) !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .42);
}

html[data-theme='dark'] #page-header.full_page #nav .menus_item:hover > a,
html[data-theme='dark'] #page-header.full_page #nav .menus_item:hover > a > span,
html[data-theme='dark'] #page-header.full_page #nav .site-page:hover {
  color: #bcefff !important;
}

#page-header.full_page #site-title {
  font-family: 'DynaPuff', system-ui, sans-serif;
  font-size: clamp(2.6rem, 5vw, 4.5rem);
  font-weight: 600;
  letter-spacing: .02em;
}

#page-header.full_page #scroll-down {
  bottom: 92px;
  z-index: 10;
  display: block !important;
  visibility: visible;
  opacity: 1;
  /* In light mode the arrow sits above the wave and drops down once the wave
     is gone, so animate that move instead of snapping when the theme flips. */
  transition: bottom .5s ease;
}

#page-header.full_page #scroll-down .scroll-down-effects {
  display: block;
  color: #fff !important;
  font-size: 28px;
  text-shadow: 0 2px 10px rgba(44, 62, 80, .55);
  filter: drop-shadow(0 1px 2px rgba(44, 62, 80, .35));
}

#page-header.full_page::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  z-index: 2;
  height: 86px;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1400 100' preserveAspectRatio='none'%3E%3Cpath fill='%23fff' fill-opacity='.55' d='M0 48C175 8 350 88 525 48S875 8 1050 48S1225 88 1400 48V100H0Z'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1100 100' preserveAspectRatio='none'%3E%3Cpath fill='%23fff' d='M0 55C138 15 275 90 413 55S688 15 825 55S963 90 1100 55V100H0Z'/%3E%3C/svg%3E");
    background-image: linear-gradient(180deg, rgba(70, 180, 220, 0) 0%, rgba(35, 142, 190, .78) 100%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1400 100' preserveAspectRatio='none'%3E%3Cpath fill='%23dff7ff' fill-opacity='.72' d='M0 48C175 8 350 88 525 48S875 8 1050 48S1225 88 1400 48V100H0Z'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1100 100' preserveAspectRatio='none'%3E%3Cpath fill='%23f4fcff' d='M0 55C138 15 275 90 413 55S688 15 825 55S963 90 1100 55V100H0Z'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: 0 100%, 0 100%;
  background-size: 1400px 100%, 1100px 86%;
  animation: listfx-wave-flow 14s linear infinite;
  opacity: 1;
  /* display:none cannot be animated, so the dark theme fades the wave out
     instead of removing it. */
  transition: opacity .5s ease;
}

@keyframes listfx-wave-flow {
  to { background-position: 1400px 100%, -1100px 100%; }
}

@media screen and (max-width: 768px) {
  #page-header.full_page #scroll-down { bottom: 70px; }
  #page-header.full_page::after { height: 64px; }
}

@media (prefers-reduced-motion: reduce) {
  #page-header.full_page::after { animation: none; }
  #page-header.full_page::after,
  #page-header.full_page #scroll-down { transition: none; }
}

/* V4 day/night widget in the right-side settings panel. */
#rightside #rightside-config-hide {
  overflow: visible;
}

#rightside #rightside-config-hide > #darkmode {
  display: none !important;
}

#rightside .theme-toggle-widget {
  position: absolute;
  top: 0;
  right: 45px;
  box-sizing: border-box;
  width: 145px;
  height: 75px;
  padding: 6px 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: none;
  border-radius: var(--listfx-radius);
  background: var(--listfx-glass);
  box-shadow: var(--listfx-shadow);
  opacity: 0;
  pointer-events: none;
  transform: translateX(14px) scale(.96);
  transform-origin: right center;
  backdrop-filter: var(--listfx-backdrop);
  -webkit-backdrop-filter: var(--listfx-backdrop);
  transition: opacity .28s ease, transform .32s ease;
}

#rightside #rightside-config-hide.show .theme-toggle-widget {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0) scale(1);
}

.theme-toggle-widget__control {
  position: relative;
  width: 112px;
  height: 42px;
  margin: 0 auto;
}

.theme-toggle-widget__control theme-button {
  position: relative;
  display: block;
  width: 112px;
  height: 42px;
}

@media screen and (max-width: 480px) {
  #rightside .theme-toggle-widget {
    right: 43px;
    width: 145px;
  }
}

/* Playful navigation typography. */
#nav .site-name,
#nav .site-page,
#nav .menus_item > a {
  font-family: 'ZCOOL KuaiLe', sans-serif;
}

/* The white wave is only used in light mode. */
html[data-theme='dark'] #page-header.full_page::after {
  opacity: 0;
}

html[data-theme='dark'] #page-header.full_page::before {
  background: linear-gradient(180deg, rgba(3, 10, 22, 0) 42%, rgba(4, 22, 40, .28) 64%, rgba(4, 22, 40, .9) 100%);
}

@media screen and (max-width: 768px) {
  #page-header.full_page #nav { top: 10px; right: 10px; left: 10px; }
  #page-header.full_page.nav-fixed.fixed #nav { top: 3px; right: 5px; left: 5px; }
}

html[data-theme='dark'] #page-header.full_page #scroll-down {
  bottom: 22px;
}

/* Single source of truth for every glass surface: navigation, article card,
   index cards, aside widgets, dropdown menus, pagination and post info. */
html #body-wrap #page-header #nav,
html #body-wrap #post,
html #body-wrap #page,
html #body-wrap .recent-post-item,
html #body-wrap #recent-posts > .recent-post-item,
html #body-wrap #aside-content .card-widget,
html #body-wrap .layout > div:first-child:not(.recent-posts),
html #body-wrap #nav .menus_items .menus_item .menus_item_child,
html #body-wrap #pagination .page-number:not(.current),
html #body-wrap #pagination .extend,
html #body-wrap #page-header #post-info,
html #rightside .theme-toggle-widget {
  background: var(--listfx-glass);
  border: none;
  border-radius: var(--listfx-radius);
  box-shadow: var(--listfx-shadow);
  backdrop-filter: var(--listfx-backdrop);
  -webkit-backdrop-filter: var(--listfx-backdrop);
  transition: background .3s ease, box-shadow .3s ease;
}

/* Identical hover lift for every glass surface. */
html #body-wrap #post:hover,
html #body-wrap #page:hover,
html #body-wrap .recent-post-item:hover,
html #body-wrap #recent-posts > .recent-post-item:hover,
html #body-wrap #aside-content .card-widget:hover,
html #body-wrap .layout > div:first-child:not(.recent-posts):hover,
html #rightside .theme-toggle-widget:hover {
  box-shadow: var(--listfx-shadow-hover);
}

@media screen and (max-width: 768px) {
  :root { --listfx-radius: 13px; }
}

/* Inline quote in the existing footer content. */
.footer_custom_text { margin-left: 8px; opacity: .8; }
.footer-hitokoto { overflow-wrap: anywhere; }

/* Homepage hero: blurred at rest, sharp on hover, with subtle mouse parallax. */
#page-header.full_page.hero-parallax {
  background-image: none !important;
  overflow: hidden;
}

#page-header.full_page.hero-parallax .hero-parallax__image {
  pointer-events: none;
  position: absolute;
  inset: -18px;
  z-index: 0;
  background-position: center;
  background-size: cover;
  filter: blur(8px) saturate(.86);
  opacity: 1;
  transform: translate3d(var(--hero-x, 0px), var(--hero-y, 0px), 0) scale(1.06);
  transition: filter .55s ease, transform .18s ease-out;
  will-change: transform, filter;
}

#page-header.full_page.hero-parallax.hero-parallax--loading .hero-parallax__image {
  filter: blur(24px) saturate(.7);
  opacity: .72;
  transition: filter .8s ease, opacity .8s ease, transform .18s ease-out;
}

#page-header.full_page.hero-parallax:hover .hero-parallax__image {
  filter: blur(0) saturate(1.08);
}

/* hero-parallax.js owns the one and only request for the hero image. Blanking
   the header background while JS is available stops the browser fetching it a
   second time, which matters because the photo endpoint returns a different
   photo on every request. Without JS the plain background still loads. */
html.js #page-header.full_page { background-image: none !important; }

#page-header.full_page.hero-parallax::before,
#page-header.full_page.hero-parallax::after { z-index: 2; }
#page-header.full_page.hero-parallax #nav,
#page-header.full_page.hero-parallax #site-info,
#page-header.full_page.hero-parallax #scroll-down { z-index: 3; }

/* Click ripple: sits on the hero image, under the header mask and content.
   It mirrors the image layer's geometry and blur so it lines up exactly.
   A canvas is a replaced element, so it needs an explicit size: `inset` alone
   would leave it at its intrinsic 300x150 and the effect would be invisible. */
#page-header.full_page.hero-parallax .hero-ripple {
  pointer-events: none;
  position: absolute;
  top: -18px;
  left: -18px;
  width: calc(100% + 36px);
  height: calc(100% + 36px);
  z-index: 1;
  opacity: 0;
  filter: blur(8px) saturate(.86);
  transform: translate3d(var(--hero-x, 0px), var(--hero-y, 0px), 0) scale(1.06);
  transition: filter .55s ease;
}

#page-header.full_page.hero-parallax:hover .hero-ripple {
  filter: blur(0) saturate(1.08);
}

@media (prefers-reduced-motion: reduce), (max-width: 768px), (hover: none), (pointer: coarse) {
  #page-header.full_page.hero-parallax .hero-parallax__image {
    filter: none !important;
    transition: none;
    will-change: auto;
    transform: scale(1.06);
  }
  #page-header.full_page.hero-parallax .hero-ripple {
    filter: none !important;
    transition: none;
  }
}