/*
 * Pigtt Blog — restrained modern refresh for Butterfly 4.8.1
 *
 * This file intentionally changes presentation only. It keeps Butterfly's
 * existing IDs, classes, layout hooks, and JavaScript behavior intact.
 */

:root {
  color-scheme: light;
  --monet-sky: #7ba9c4;
  --monet-sage: #718a72;
  --monet-leaf: #4e6e58;
  --monet-cream: #f0ebd8;
  --monet-sun: #d6bd68;
  --monet-charcoal: #263432;
  --modern-accent: var(--monet-sage);
  --modern-accent-strong: var(--monet-charcoal);
  --modern-accent-soft: rgba(113, 138, 114, 0.14);
  --modern-secondary: #558ba6;
  --modern-secondary-soft: rgba(123, 169, 196, 0.2);
  --modern-link: #356d84;
  --modern-paper: #e7ede7;
  --modern-surface: rgba(247, 246, 237, 0.5);
  --modern-surface-muted: rgba(225, 232, 222, 0.62);
  --modern-text: #111a18;
  --modern-text-strong: #08100e;
  --modern-text-muted: #26322f;
  --modern-border: rgba(29, 29, 31, 0.12);
  --modern-border-strong: rgba(29, 29, 31, 0.24);
  --modern-shadow: 0 1px 2px rgba(29, 29, 31, 0.04);
  --modern-shadow-hover: 0 14px 34px rgba(29, 29, 31, 0.1);
  --liquid-glass-bg: rgba(246, 249, 243, 0.18);
  --liquid-glass-bg-strong: rgba(246, 249, 243, 0.3);
  --liquid-glass-edge: rgba(255, 255, 255, 0.84);
  --liquid-glass-edge-muted: rgba(29, 29, 31, 0.1);
  --liquid-glass-highlight: rgba(255, 255, 255, 0.28);
  --liquid-glass-shadow:
    0 1px 1px rgba(255, 255, 255, 0.72) inset,
    0 -1px 1px rgba(29, 29, 31, 0.08) inset,
    0 16px 42px rgba(29, 29, 31, 0.1);
  --liquid-glass-shadow-hover:
    0 1px 1px rgba(255, 255, 255, 0.82) inset,
    0 -1px 1px rgba(29, 29, 31, 0.1) inset,
    0 22px 56px rgba(29, 29, 31, 0.16);
  --liquid-glass-blur: 28px;
  --liquid-glass-saturation: 185%;
  --liquid-glass-spring: 520ms cubic-bezier(0.22, 1.42, 0.36, 1);
  --liquid-glass-spring-soft: 420ms cubic-bezier(0.2, 0.9, 0.25, 1.12);
  --modern-radius: 8px;
  --modern-radius-small: 6px;
  --modern-focus: rgba(0, 113, 227, 0.32);
  --modern-font-ui: "Helvetica Neue", Helvetica, "Inter", "Avenir Next",
    Avenir, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial,
    "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --modern-font-editorial: "Iowan Old Style", "Source Serif Pro", Georgia,
    "Noto Serif SC", "Songti SC", STSong, SimSun, serif;
  --global-bg: var(--modern-paper);
  --font-color: var(--modern-text);
  --text-highlight-color: var(--modern-text-strong);
  --card-bg: var(--liquid-glass-bg);
  --sidebar-bg: rgba(245, 245, 247, 0.78);
  --search-bg: var(--liquid-glass-bg-strong);
  --search-input-color: var(--modern-text-strong);
  --search-a-color: var(--modern-text);
  --btn-bg: var(--modern-accent);
  --btn-hover-color: var(--modern-accent-strong);
  --text-bg-hover: var(--modern-accent-soft);
  --card-box-shadow: var(--modern-shadow);
  --card-hover-box-shadow: var(--modern-shadow-hover);
  --blockquote-bg: var(--modern-surface-muted);
  --toc-link-color: var(--modern-text-muted);
  --scrollbar-color: rgba(110, 116, 128, 0.45);
}

html {
  scroll-padding-top: 76px;
}

body {
  color: var(--modern-text);
  font-size: 15px;
  font-family: var(--modern-font-ui);
  line-height: 1.75;
  background: var(--modern-paper);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: auto;
  font-synthesis: none;
}

::selection {
  background: var(--modern-secondary-soft);
  color: var(--modern-text-strong);
}

#web_bg {
  /* Claude Monet, Woman with a Parasol (1875), public-domain source: Wikimedia Commons. */
  background:
    linear-gradient(180deg, rgba(244, 249, 250, 0.2), rgba(221, 230, 224, 0.3)),
    url("/images/backgrounds/monet-woman-with-parasol.jpg") center / cover no-repeat,
    var(--modern-paper) !important;
}

/* Header and navigation */

#page-header:not(.not-top-img)::before {
  background: linear-gradient(
    180deg,
    rgba(29, 29, 31, 0.18) 0%,
    rgba(29, 29, 31, 0.28) 44%,
    rgba(29, 29, 31, 0.62) 100%
  );
}

#page-header.full_page {
  min-height: 520px;
  height: 75vh;
  height: 75svh;
}

#page-header #site-title,
#page-header #site-subtitle {
  white-space: normal;
  text-wrap: balance;
}

#page-header #site-title {
  max-width: min(88vw, 920px);
  font-size: clamp(2.55rem, 6vw, 5.1rem);
  font-family: var(--modern-font-editorial);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: 0;
  text-shadow: 0 3px 20px rgba(0, 0, 0, 0.34);
  text-transform: none;
  overflow-wrap: break-word;
}

#page-header #site-subtitle {
  margin-top: 0.9rem;
  font-size: clamp(0.98rem, 1.7vw, 1.18rem);
  line-height: 1.55;
  letter-spacing: 0;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.34);
}

#nav {
  height: 64px;
  padding: 0 clamp(18px, 4vw, 52px);
  font-size: 1rem;
  transition: background-color 180ms ease, border-color 180ms ease,
    box-shadow 180ms ease, backdrop-filter 180ms ease;
}

#nav .site-name {
  font-size: 1.08rem;
  font-family: var(--modern-font-editorial);
  font-weight: 700;
  letter-spacing: 0;
}

#nav .site-page {
  padding: 8px 2px;
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0;
}

#nav .menus_items .menus_item {
  padding-left: 20px;
}

#nav .site-page:not(.child)::after {
  height: 2px;
  border-radius: 999px;
  background: currentColor;
}

#nav .menus_items .menus_item .menus_item_child {
  overflow: hidden;
  margin-top: 10px;
  border: 1px solid var(--liquid-glass-edge-muted);
  border-radius: 8px;
  background:
    linear-gradient(145deg, var(--liquid-glass-highlight), rgba(255, 255, 255, 0.1) 44%),
    var(--liquid-glass-bg-strong);
  box-shadow: var(--liquid-glass-shadow);
  backdrop-filter: saturate(var(--liquid-glass-saturation)) blur(var(--liquid-glass-blur));
  -webkit-backdrop-filter: saturate(var(--liquid-glass-saturation)) blur(var(--liquid-glass-blur));
}

#nav .menus_items .menus_item .menus_item_child a {
  padding: 9px 18px;
  font-size: 0.88rem;
}

#page-header.nav-fixed #nav,
#page-header.not-top-img #nav {
  border-bottom: 1px solid var(--liquid-glass-edge-muted);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.5)),
    var(--liquid-glass-bg);
  box-shadow:
    0 1px 0 var(--liquid-glass-edge) inset,
    0 12px 28px rgba(29, 29, 31, 0.08);
  backdrop-filter: saturate(var(--liquid-glass-saturation)) blur(var(--liquid-glass-blur));
  -webkit-backdrop-filter: saturate(var(--liquid-glass-saturation)) blur(var(--liquid-glass-blur));
}

/* Layout and shared surfaces */

.layout {
  gap: 24px;
  max-width: 1240px;
  padding: 42px 20px 56px;
}

.layout > div:first-child {
  flex: 1 1 0;
  min-width: 0;
  width: auto;
}

#aside-content {
  flex: 0 0 286px;
  width: 286px;
  padding-right: 0;
  padding-left: 0;
}

.layout > div:first-child:not(.recent-posts),
#recent-posts > .recent-post-item,
#aside-content .card-widget,
.layout > .recent-posts .pagination > *:not(.space) {
  border: 1px solid var(--liquid-glass-edge-muted);
  border-radius: var(--modern-radius);
  background:
    linear-gradient(145deg, var(--liquid-glass-highlight), rgba(255, 255, 255, 0.08) 42%, rgba(255, 255, 255, 0.04)),
    var(--card-bg);
  background-clip: padding-box;
  box-shadow: var(--liquid-glass-shadow);
  backdrop-filter: saturate(var(--liquid-glass-saturation)) blur(var(--liquid-glass-blur));
  -webkit-backdrop-filter: saturate(var(--liquid-glass-saturation)) blur(var(--liquid-glass-blur));
}

#recent-posts > .recent-post-item,
#aside-content .card-widget,
.layout > div:first-child:not(.recent-posts) {
  border-top-color: var(--liquid-glass-edge);
}

.layout > div:first-child:not(.recent-posts) {
  padding: clamp(32px, 5vw, 58px) clamp(20px, 5vw, 54px);
}

#aside-content .card-widget {
  margin-top: 24px;
  padding: 20px;
}

/* Keep primary reading surfaces crisp while gently receding utility tiles. */
#aside-content .card-widget:not(.card-info):not(#card-toc) {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.01), rgba(255, 255, 255, 0.003) 42%, rgba(255, 255, 255, 0.002)),
    rgba(246, 249, 243, 0.01);
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

#aside-content .card-widget:not(.card-info):not(#card-toc)::after {
  opacity: 0.01;
}

#aside-content > .card-widget:first-child {
  margin-top: 0;
}

/* Homepage article cards */

#recent-posts > .recent-post-item:not(:first-child) {
  margin-top: 24px;
}

#recent-posts > .recent-post-item {
  align-items: stretch;
  min-height: 0;
  height: clamp(16rem, 22vw, 18rem);
  border-color: rgba(255, 255, 255, 0.68);
  border-radius: 28px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.3) 0%, rgba(230, 241, 237, 0.07) 42%, rgba(123, 169, 196, 0.03) 100%),
    rgba(244, 248, 241, 0.11);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    inset 1px 0 0 rgba(255, 255, 255, 0.48),
    inset 0 -1px 0 rgba(29, 29, 31, 0.08),
    0 18px 48px rgba(54, 64, 78, 0.14);
  backdrop-filter: blur(30px) saturate(190%);
  -webkit-backdrop-filter: blur(30px) saturate(190%);
  isolation: isolate;
  transition: border-color 180ms ease, box-shadow 180ms ease,
    transform 180ms ease;
}

#recent-posts > .recent-post-item::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: 0;
  left: 11%;
  width: 56%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.98), transparent);
  box-shadow: 0 1px 12px rgba(255, 255, 255, 0.72);
  pointer-events: none;
}

#recent-posts > .recent-post-item::after,
#aside-content .card-widget::after,
.layout > div:first-child:not(.recent-posts)::after,
.search-dialog::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(ellipse at 8% 0%, rgba(255, 255, 255, 0.58), transparent 42%),
    linear-gradient(118deg, rgba(255, 255, 255, 0.32), transparent 26%),
    linear-gradient(300deg, rgba(255, 255, 255, 0.18), transparent 34%);
  opacity: 0.42;
  pointer-events: none;
}

#recent-posts > .recent-post-item,
#aside-content .card-widget,
.layout > div:first-child:not(.recent-posts),
.search-dialog {
  position: relative;
  overflow: hidden;
}

#recent-posts > .recent-post-item > *,
#aside-content .card-widget > *,
.layout > div:first-child:not(.recent-posts) > *,
.search-dialog > * {
  position: relative;
  z-index: 1;
}

#recent-posts > .recent-post-item .post_cover {
  box-sizing: border-box;
  flex: 0 0 42%;
  min-width: 0;
  min-height: 0;
  width: 42%;
  height: 100%;
  background: var(--modern-surface-muted);
  line-height: 0;
}

#recent-posts > .recent-post-item .post_cover > a {
  display: block;
  overflow: hidden;
  width: 100%;
  height: 100%;
  line-height: 0;
}

#recent-posts > .recent-post-item .post_cover .post-bg {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 0;
  object-fit: cover;
  vertical-align: middle;
  transition: filter 300ms ease, transform 500ms cubic-bezier(0.2, 0.75, 0.3, 1);
}

#recent-posts > .recent-post-item > .recent-post-info {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  min-width: 0;
  height: 100%;
  padding: 1.8rem clamp(1.6rem, 3vw, 2.45rem);
  width: 58%;
}

#recent-posts > .recent-post-item > .recent-post-info > .article-title {
  display: block;
  overflow: visible;
  color: var(--modern-text-strong);
  font-size: clamp(1.42rem, 2.1vw, 1.82rem);
  font-family: var(--modern-font-editorial);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0;
  white-space: normal;
  overflow-wrap: anywhere;
  -webkit-box-orient: initial;
  -webkit-line-clamp: initial;
}

#recent-posts > .recent-post-item > .recent-post-info > .article-meta-wrap {
  margin: 10px 0 12px;
  color: var(--modern-text);
  font-size: 0.78rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

#recent-posts > .recent-post-item > .recent-post-info > .content {
  display: block;
  overflow: hidden;
  color: var(--modern-text);
  font-size: 0.94rem;
  font-family: var(--modern-font-editorial);
  line-height: 1.7;
  font-weight: 600;
  white-space: normal;
  -webkit-box-orient: initial;
  -webkit-line-clamp: initial;
}

/* Article reading surface */

#post-info .post-title {
  margin-right: auto;
  margin-left: auto;
  max-width: 980px;
  font-size: clamp(2rem, 4.5vw, 3.7rem);
  font-family: var(--modern-font-editorial);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: 0;
  text-wrap: balance;
}

#post-info #post-meta {
  font-size: 0.84rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

#article-container {
  color: var(--modern-text);
  font-size: 1rem;
  font-family: var(--modern-font-editorial);
  line-height: 1.82;
}

#article-container p {
  margin-bottom: 1.25em;
}

#article-container h1,
#article-container h2,
#article-container h3,
#article-container h4,
#article-container h5,
#article-container h6 {
  scroll-margin-top: 88px;
  color: var(--modern-text-strong);
  font-family: var(--modern-font-editorial);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0;
  text-wrap: balance;
}

#article-container h1 {
  margin-top: 2.15em;
  font-size: clamp(1.85rem, 4vw, 2.35rem);
}

#article-container h2 {
  margin-top: 2em;
  font-size: clamp(1.55rem, 3.3vw, 2rem);
}

#article-container h3 {
  margin-top: 1.8em;
  font-size: clamp(1.3rem, 2.7vw, 1.65rem);
}

#article-container h4,
#article-container h5,
#article-container h6 {
  margin-top: 1.6em;
  font-size: 1.12rem;
}

#article-container a {
  color: var(--modern-link);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

#article-container li::marker {
  color: var(--modern-link);
}

#article-container blockquote {
  margin: 1.6rem 0;
  padding: 1rem 1.25rem;
  border: 1px solid var(--modern-border);
  border-left: 3px solid var(--modern-secondary);
  border-radius: 0 var(--modern-radius-small) var(--modern-radius-small) 0;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.28), transparent 48%),
    rgba(244, 248, 241, 0.16);
  color: var(--modern-text);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.62) inset;
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
}

#article-container img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  vertical-align: middle;
}

/* A 216-byte preview replaces the former transparent lazy-load pixel. */

img[data-lazy-src] {
  transition: filter 420ms ease, opacity 420ms ease;
}

img[data-lazy-src]:not(.loaded):not(.error) {
  filter: blur(14px) saturate(0.72) brightness(0.92);
  opacity: 0.84;
}

img[data-lazy-src].loaded,
img[data-lazy-src].error {
  filter: none;
  opacity: 1;
}

#article-container iframe {
  max-width: 100%;
  border-radius: 10px;
}

#article-container hr {
  margin: 2.75rem 0;
  width: 100%;
  border: 0;
  border-top: 1px solid var(--modern-border-strong);
}

#article-container hr::before {
  display: none;
}

#article-container .table-wrap {
  margin: 1.5rem 0;
  border: 1px solid var(--modern-border);
  border-radius: 12px;
  background: rgba(244, 248, 241, 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.54);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
}

#article-container .table-wrap table {
  margin: 0;
}

#article-container table th,
#article-container table td {
  padding: 0.65rem 0.8rem;
  border-color: var(--modern-border);
}

#article-container table thead {
  background: rgba(123, 169, 196, 0.16);
}

#post .post-copyright {
  margin-top: 3rem;
  padding: 16px 18px;
  border: 1px solid var(--liquid-glass-edge-muted);
  border-radius: 12px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.25), transparent 48%),
    rgba(244, 248, 241, 0.14);
  box-shadow: 0 1px 0 var(--liquid-glass-edge) inset;
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
}

#post .tag_share .post-meta__tags {
  padding: 2px 12px;
  border-color: var(--modern-border-strong);
  border-radius: 999px;
  background: var(--modern-secondary-soft);
  color: var(--modern-secondary);
}

#post .tag_share .post-meta__tags:hover {
  border-color: var(--modern-accent);
  background: var(--btn-bg);
  color: #fff;
}

#post .post-copyright .post-copyright-meta {
  color: var(--modern-secondary);
}

/* Code, keyboard input, and technical content */

#article-container :not(pre) > code {
  padding: 0.18em 0.42em;
  border: 1px solid var(--modern-border);
  border-radius: 6px;
  background: var(--modern-accent-soft);
  color: var(--modern-accent-strong);
  font-size: 0.88em;
}

#article-container pre,
#article-container figure.highlight {
  margin: 1.5rem 0;
  border: 1px solid var(--modern-border);
  border-radius: 9px;
  box-shadow: none;
}

#article-container pre {
  padding: 1rem 1.2rem;
}

#article-container figure.highlight {
  overflow: hidden;
}

#article-container figure.highlight pre {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

#article-container .highlight-tools {
  min-height: 34px;
  border-bottom: 1px solid rgba(11, 11, 11, 0.12);
  letter-spacing: 0.025em;
}

#article-container .highlight-tools .copy-button,
#article-container .highlight-tools .expand {
  border-radius: 6px;
}

#article-container kbd {
  padding: 0.2em 0.48em;
  border: 1px solid var(--modern-border-strong);
  border-radius: 6px;
  background: var(--modern-surface-muted);
  box-shadow: 0 1px 0 var(--modern-border-strong);
  color: var(--modern-text-strong);
}

/* Sidebar, table of contents, and archive details */

.avatar-img {
  width: 100px;
  height: 100px;
  border: 4px solid var(--modern-surface);
  box-shadow: 0 1px 2px rgba(11, 11, 11, 0.08);
}

.avatar-img img:hover {
  transform: scale(1.025);
}

#aside-content .card-info .author-info__name {
  margin-top: 8px;
  color: var(--modern-text-strong);
  font-size: 1.35rem;
  font-family: var(--modern-font-editorial);
  font-weight: 700;
  letter-spacing: 0;
}

#aside-content .card-info .author-info__description {
  color: var(--modern-text);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.55;
}

#aside-content .item-headline {
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--modern-border);
  color: var(--modern-text-strong);
  font-size: 0.98rem;
  font-weight: 650;
  letter-spacing: 0;
}

#aside-content .aside-list > .aside-list-item {
  padding: 9px 0;
}

#aside-content .aside-list > .aside-list-item:not(:last-child) {
  border-bottom: 1px solid var(--modern-border);
}

#aside-content .aside-list .thumbnail {
  border-radius: 9px;
}

#aside-content .aside-list .content > .title,
#aside-content .aside-list .content > .comment {
  line-height: 1.45;
}

#aside-content a:hover,
#recent-posts > .recent-post-item > .recent-post-info > .article-title:hover,
#recent-posts > .recent-post-item > .recent-post-info > .article-meta-wrap a:hover {
  color: var(--modern-link);
}

#recent-posts > .recent-post-item > .recent-post-info > .article-meta-wrap a {
  color: var(--modern-text);
}

#aside-content #card-info-btn {
  min-height: 40px;
  border-radius: 8px;
  font-weight: 600;
  line-height: 40px;
}

#aside-content #card-toc .toc-content .toc-link {
  margin: 3px 0;
  padding: 5px 9px;
  border-radius: 7px;
  line-height: 1.45;
}

#aside-content #card-toc .toc-content .toc-link.active {
  background: var(--btn-bg);
  color: var(--btn-color, #fff);
}

.article-sort {
  border-left-color: var(--modern-border-strong);
}

.article-sort-item-img {
  border-radius: 10px;
}

.article-sort-item-title {
  color: var(--modern-text-strong);
  font-family: var(--modern-font-editorial);
  font-weight: 700;
}

.article-sort-item-title:hover {
  color: var(--modern-accent);
}

/* Mobile navigation drawer */

#sidebar #menu-mask {
  background: rgba(29, 29, 31, 0.34);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

#sidebar #sidebar-menus {
  border-left: 1px solid var(--liquid-glass-edge-muted);
  background:
    linear-gradient(145deg, var(--liquid-glass-highlight), rgba(255, 255, 255, 0.08) 42%),
    var(--sidebar-bg);
  box-shadow: -18px 0 46px rgba(29, 29, 31, 0.16);
  backdrop-filter: saturate(var(--liquid-glass-saturation)) blur(var(--liquid-glass-blur));
  -webkit-backdrop-filter: saturate(var(--liquid-glass-saturation)) blur(var(--liquid-glass-blur));
}

#sidebar #sidebar-menus .menus_items {
  padding: 2px 14px 40px;
}

#sidebar #sidebar-menus .menus_items .site-page {
  margin: 3px 0;
  padding: 9px 30px 9px 14px;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 500;
}

#sidebar #sidebar-menus .menus_items .site-page:hover {
  background: var(--modern-accent-soft);
  color: var(--modern-accent);
}

/* Search */

.search-dialog {
  top: 8%;
  margin-left: -340px;
  padding: 26px;
  width: 680px;
  border: 1px solid var(--liquid-glass-edge-muted);
  border-radius: 10px;
  background:
    linear-gradient(145deg, var(--liquid-glass-highlight), rgba(255, 255, 255, 0.12) 44%),
    var(--search-bg);
  box-shadow: var(--liquid-glass-shadow-hover);
  backdrop-filter: saturate(var(--liquid-glass-saturation)) blur(var(--liquid-glass-blur));
  -webkit-backdrop-filter: saturate(var(--liquid-glass-saturation)) blur(var(--liquid-glass-blur));
}

.search-dialog .search-nav {
  margin-bottom: 18px;
  color: var(--modern-text-strong);
  font-size: 1.15rem;
  font-family: var(--modern-font-editorial);
  font-weight: 700;
}

#algolia-search .search-dialog .ais-SearchBox input,
#local-search .search-dialog .local-search-box input {
  min-height: 48px;
  padding: 10px 16px;
  border: 1px solid var(--modern-border-strong);
  border-radius: 8px;
  background: var(--modern-surface-muted);
  color: var(--modern-text-strong);
  font-size: 1rem;
  transition: border-color 160ms ease, box-shadow 160ms ease,
    background-color 160ms ease;
}

#algolia-search .search-dialog .ais-SearchBox input:focus,
#local-search .search-dialog .local-search-box input:focus {
  border-color: var(--modern-accent);
  background: var(--modern-surface);
  box-shadow: 0 0 0 4px var(--modern-accent-soft);
}

#algolia-search .algolia-hits-item-title,
#local-search .search-result-title {
  color: var(--modern-text-strong);
  font-family: var(--modern-font-editorial);
  font-size: 1.05rem;
}

#local-search .local-search-hit-item {
  margin: 4px 0;
  padding: 10px 10px 10px 28px;
  border-bottom: 1px solid var(--modern-border);
}

#local-search .local-search-hit-item::before {
  top: 1.18em;
  border-color: var(--modern-secondary);
}

#search-mask {
  background: rgba(29, 29, 31, 0.34);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

/* Buttons and pagination */

#article-container .btn-beautify,
#aside-content #card-info-btn,
#rightside > div > button,
#rightside > div > a,
.layout > .recent-posts .pagination > *:not(.space) {
  transition: color 160ms ease, background-color 160ms ease,
    border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

#article-container .btn-beautify {
  min-height: 38px;
  padding: 3px 16px;
  border-radius: 8px;
  font-weight: 600;
}

#rightside > div > button,
#rightside > div > a {
  margin-bottom: 7px;
  width: 40px;
  height: 40px;
  border: 1px solid var(--liquid-glass-edge-muted);
  border-radius: 8px;
  background:
    linear-gradient(145deg, var(--liquid-glass-highlight), rgba(255, 255, 255, 0.1) 44%),
    var(--liquid-glass-bg);
  box-shadow:
    0 1px 0 var(--liquid-glass-edge) inset,
    0 10px 24px rgba(29, 29, 31, 0.1);
  backdrop-filter: saturate(170%) blur(18px);
  -webkit-backdrop-filter: saturate(170%) blur(18px);
  line-height: 38px;
}

.layout > .recent-posts .pagination > * {
  margin: 0 4px;
  border-radius: 8px;
}

#pagination .page-number.current {
  background: var(--btn-bg);
  color: var(--btn-color, #fff);
}

#pagination.pagination-post {
  border-radius: var(--modern-radius);
}

/* Keyboard accessibility */

:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 3px solid var(--modern-focus);
  outline-offset: 3px;
}

#nav :where(a, button):focus-visible,
#rightside :where(a, button):focus-visible {
  border-radius: 7px;
}

/* Dark mode */

[data-theme="dark"] {
  color-scheme: dark;
  --modern-accent: #9db39e;
  --modern-accent-strong: #f1eee0;
  --modern-accent-soft: rgba(157, 179, 158, 0.16);
  --modern-secondary: #8cb8cf;
  --modern-secondary-soft: rgba(140, 184, 207, 0.18);
  --modern-link: #9bc7dd;
  --modern-paper: #101817;
  --modern-surface: rgba(29, 29, 31, 0.78);
  --modern-surface-muted: #242528;
  --modern-text: #d6d6d9;
  --modern-text-strong: #f5f5f7;
  --modern-text-muted: #a1a1a6;
  --modern-border: rgba(245, 245, 247, 0.12);
  --modern-border-strong: rgba(245, 245, 247, 0.24);
  --modern-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
  --modern-shadow-hover: 0 8px 26px rgba(0, 0, 0, 0.26);
  --liquid-glass-bg: rgba(29, 29, 31, 0.58);
  --liquid-glass-bg-strong: rgba(29, 29, 31, 0.72);
  --liquid-glass-edge: rgba(255, 255, 255, 0.16);
  --liquid-glass-edge-muted: rgba(245, 245, 247, 0.12);
  --liquid-glass-highlight: rgba(255, 255, 255, 0.12);
  --liquid-glass-shadow:
    0 1px 1px rgba(255, 255, 255, 0.12) inset,
    0 -1px 1px rgba(0, 0, 0, 0.32) inset,
    0 18px 46px rgba(0, 0, 0, 0.28);
  --liquid-glass-shadow-hover:
    0 1px 1px rgba(255, 255, 255, 0.14) inset,
    0 -1px 1px rgba(0, 0, 0, 0.36) inset,
    0 24px 62px rgba(0, 0, 0, 0.38);
  --modern-focus: rgba(41, 151, 255, 0.38);
  --global-bg: var(--modern-paper);
  --font-color: var(--modern-text);
  --text-highlight-color: var(--modern-text-strong);
  --card-bg: var(--liquid-glass-bg);
  --sidebar-bg: rgba(18, 18, 20, 0.78);
  --search-bg: var(--liquid-glass-bg-strong);
  --search-input-color: var(--modern-text-strong);
  --search-a-color: var(--modern-text);
  --btn-bg: #0071e3;
  --btn-hover-color: #2997ff;
  --text-bg-hover: var(--modern-accent-soft);
  --card-box-shadow: var(--modern-shadow);
  --card-hover-box-shadow: var(--modern-shadow-hover);
  --blockquote-bg: var(--modern-surface-muted);
  --toc-link-color: var(--modern-text-muted);
  --scrollbar-color: rgba(152, 152, 157, 0.42);
}

[data-theme="dark"] #web_bg {
  background:
    radial-gradient(circle at 20% 4%, rgba(137, 145, 158, 0.24), transparent 32%),
    repeating-linear-gradient(112deg, rgba(255, 255, 255, 0.025) 0 1px, rgba(0, 0, 0, 0.06) 1px 4px, transparent 4px 8px),
    linear-gradient(145deg, #202329 0%, #0f1114 46%, #2a2e35 72%, #111317 100%),
    var(--modern-paper) !important;
}

[data-theme="dark"] #recent-posts > .recent-post-item {
  border-color: rgba(255, 255, 255, 0.16);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.055) 44%, rgba(255, 255, 255, 0.02) 100%),
    rgba(24, 25, 28, 0.46);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 1px 0 0 rgba(255, 255, 255, 0.09),
    inset 0 -1px 0 rgba(0, 0, 0, 0.44),
    0 20px 54px rgba(0, 0, 0, 0.34);
}

[data-theme="dark"] #page-header.nav-fixed #nav,
[data-theme="dark"] #page-header.not-top-img #nav {
  border-bottom-color: var(--modern-border);
  background:
    linear-gradient(180deg, rgba(34, 34, 38, 0.76), rgba(18, 18, 20, 0.52)),
    var(--liquid-glass-bg);
  box-shadow:
    0 1px 0 rgba(245, 245, 247, 0.08) inset,
    0 12px 30px rgba(0, 0, 0, 0.32);
}

[data-theme="dark"] #nav .menus_items .menus_item .menus_item_child {
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.36);
}

[data-theme="dark"] #article-container :not(pre) > code {
  border-color: var(--modern-border);
  background: var(--modern-accent-soft);
  color: var(--modern-accent-strong);
}

[data-theme="dark"] #article-container pre,
[data-theme="dark"] #article-container figure.highlight {
  border-color: var(--modern-border);
  box-shadow: none;
}

[data-theme="dark"] #article-container .highlight-tools {
  border-bottom-color: var(--modern-border);
}

[data-theme="dark"] #article-container kbd {
  border-color: var(--modern-border-strong);
  background: var(--modern-surface-muted);
  box-shadow: 0 1px 0 rgba(245, 245, 247, 0.16);
  color: var(--modern-text-strong);
}

[data-theme="dark"] #article-container blockquote,
[data-theme="dark"] #post .post-copyright {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.08), transparent 48%),
    rgba(29, 29, 31, 0.5);
}

[data-theme="dark"] img[data-lazy-src]:not(.loaded):not(.error) {
  filter: blur(14px) saturate(0.68) brightness(0.68);
}

[data-theme="dark"] img[data-lazy-src].loaded,
[data-theme="dark"] img[data-lazy-src].error {
  filter: brightness(0.8);
}

[data-theme="dark"] #post .tag_share .post-meta__tags {
  color: var(--modern-accent);
}

[data-theme="dark"] ::selection {
  background: var(--modern-secondary-soft);
  color: var(--modern-text-strong);
}

[data-theme="dark"] .search-dialog {
  box-shadow: 0 26px 80px rgba(0, 0, 0, 0.48);
}

/* Liquid glass system — CSS-only, with native browser fallbacks below */

.layout > div:first-child:not(.recent-posts),
#aside-content .card-widget,
.search-dialog,
#sidebar #sidebar-menus,
#pagination.pagination-post {
  border-color: rgba(255, 255, 255, 0.58);
  border-radius: 24px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.22), rgba(224, 237, 232, 0.045) 48%, rgba(123, 169, 196, 0.025)),
    rgba(244, 248, 241, 0.1);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.86),
    inset 0 -1px 0 rgba(40, 58, 56, 0.08),
    0 22px 64px rgba(44, 65, 65, 0.16);
  backdrop-filter: blur(34px) saturate(180%);
  -webkit-backdrop-filter: blur(34px) saturate(180%);
}

#post,
#page,
#archive,
#category,
#tag {
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.72);
}

/* Adaptive 26% ice glass keeps the painting present without fighting the type. */
:root:not([data-theme="dark"]) .layout > div:first-child:not(.recent-posts),
:root:not([data-theme="dark"]) #recent-posts > .recent-post-item,
:root:not([data-theme="dark"]) #aside-content .card-widget,
:root:not([data-theme="dark"]) .layout > .recent-posts .pagination > *:not(.space),
:root:not([data-theme="dark"]) .search-dialog,
:root:not([data-theme="dark"]) #sidebar #sidebar-menus,
:root:not([data-theme="dark"]) #pagination.pagination-post {
  background: rgba(238, 250, 252, 0.26);
  backdrop-filter: blur(clamp(12px, 1.6vw, 26px)) saturate(162%);
  -webkit-backdrop-filter: blur(clamp(12px, 1.6vw, 26px)) saturate(162%);
}

:root:not([data-theme="dark"]) #recent-posts > .recent-post-item::after,
:root:not([data-theme="dark"]) #aside-content .card-widget::after,
:root:not([data-theme="dark"]) .layout > div:first-child:not(.recent-posts)::after,
:root:not([data-theme="dark"]) .search-dialog::after {
  display: block;
  opacity: 0.34;
  background:
    linear-gradient(118deg, rgba(255, 255, 255, 0.46), transparent 25%),
    radial-gradient(ellipse at 14% 2%, rgba(204, 242, 251, 0.5), transparent 38%),
    linear-gradient(305deg, rgba(150, 215, 232, 0.2), transparent 36%);
  filter: url("/images/effects/liquid-ice.svg#liquid-ice");
}

:root:not([data-theme="dark"]) #recent-posts .recent-post-info,
:root:not([data-theme="dark"]) #aside-content .card-widget,
:root:not([data-theme="dark"]) .layout > div:first-child:not(.recent-posts) {
  color: var(--modern-text);
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.78);
}

#nav .menus_items .menus_item .menus_item_child,
#page-header.nav-fixed #nav,
#page-header.not-top-img #nav,
#rightside > div > button,
#rightside > div > a,
#article-container .btn-beautify,
#aside-content #card-info-btn,
.layout > .recent-posts .pagination > *:not(.space),
#comment-switch > .switch-btn {
  border: 1px solid rgba(255, 255, 255, 0.64);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.48), rgba(123, 169, 196, 0.1) 52%, rgba(113, 138, 114, 0.06)),
    rgba(241, 247, 239, 0.22);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    inset 0 -1px 0 rgba(33, 54, 51, 0.12),
    0 10px 28px rgba(38, 61, 60, 0.16);
  backdrop-filter: blur(22px) saturate(190%);
  -webkit-backdrop-filter: blur(22px) saturate(190%);
}

#rightside > div > button,
#rightside > div > a {
  border-radius: 50%;
  transition: color 180ms ease, border-color 180ms ease,
    box-shadow var(--liquid-glass-spring-soft),
    transform var(--liquid-glass-spring);
}

/* The scroll-position button behaves like a small liquid magnifying lens. */
#rightside #go-up {
  position: relative;
  overflow: hidden;
  border-color: rgba(255, 255, 255, 0.82);
  background:
    radial-gradient(circle at 32% 24%, rgba(255, 255, 255, 0.88) 0 7%, transparent 19%),
    rgba(240, 248, 245, 0.24);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.94),
    inset 0 -1px 0 rgba(24, 45, 42, 0.15),
    0 9px 24px rgba(25, 48, 45, 0.2);
  backdrop-filter: blur(5px) saturate(210%) contrast(112%);
  -webkit-backdrop-filter: blur(5px) saturate(210%) contrast(112%);
}

#rightside #go-up::after {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(255, 255, 255, 0.46);
  border-radius: 50%;
  pointer-events: none;
}

#rightside #go-up .scroll-percent {
  position: relative;
  z-index: 1;
  color: var(--modern-text-strong);
  font-size: 0.72rem;
  font-weight: 700;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.86);
}

#rightside #go-up:hover {
  transform: scale(1.14);
  backdrop-filter: blur(3px) saturate(235%) contrast(118%);
  -webkit-backdrop-filter: blur(3px) saturate(235%) contrast(118%);
}

[data-theme="dark"] #rightside #go-up .scroll-percent {
  color: var(--modern-text-strong);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.72);
}

/* Icy, semi-3D hero surface. The filtered layer is decorative, so text stays crisp. */
#page-header.full_page {
  isolation: isolate;
  perspective: 1100px;
  box-shadow:
    inset 0 -1px 0 rgba(216, 247, 255, 0.55),
    inset 0 -28px 54px rgba(8, 24, 29, 0.18),
    0 22px 52px rgba(16, 39, 43, 0.18);
}

#page-header.full_page::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  background:
    radial-gradient(ellipse at 24% 12%, rgba(228, 251, 255, 0.3), transparent 28%),
    linear-gradient(112deg, transparent 18%, rgba(221, 248, 255, 0.18) 36%, transparent 52%),
    radial-gradient(ellipse at 78% 88%, rgba(116, 202, 226, 0.16), transparent 34%);
  filter: url("/images/effects/liquid-ice.svg#liquid-ice");
  opacity: 0.52;
  pointer-events: none;
  transform: translateZ(18px) scale(1.015);
  transform-origin: center;
}

#page-header.full_page #nav,
#page-header.full_page #site-info,
#page-header.full_page #scroll-down {
  z-index: 2;
}

#page-header.full_page #site-info {
  transform: translateZ(34px);
  text-shadow:
    0 2px 2px rgba(0, 0, 0, 0.44),
    0 12px 30px rgba(4, 18, 22, 0.32);
}

@media (hover: hover) and (pointer: fine) {
  #page-header.full_page #site-info {
    transition: transform 700ms cubic-bezier(0.2, 0.8, 0.2, 1),
      text-shadow 700ms ease;
  }

  #page-header.full_page:hover #site-info {
    transform: translateZ(52px) scale(1.018);
    text-shadow:
      0 3px 3px rgba(0, 0, 0, 0.48),
      0 18px 42px rgba(4, 18, 22, 0.38);
  }
}

#rightside #darkmode {
  background:
    radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.95) 0 9%, transparent 10%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.5), rgba(123, 169, 196, 0.22)),
    rgba(241, 247, 239, 0.22);
}

#rightside #rightside_config i {
  animation-duration: 9s;
}

#comment-switch > .switch-btn {
  position: relative;
  overflow: visible;
  border-radius: 999px;
  transition: background-color 240ms ease, box-shadow 240ms ease;
}

#comment-switch > .switch-btn::before {
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, 0.84);
  background:
    radial-gradient(circle at 34% 24%, #fff 0 9%, transparent 11%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(220, 230, 228, 0.7));
  box-shadow: 0 5px 14px rgba(29, 47, 46, 0.24);
  transition: transform var(--liquid-glass-spring);
}

#comment-switch > .switch-btn.move::before {
  transform: translateX(20px);
}

#algolia-search .search-dialog .ais-SearchBox input,
#local-search .search-dialog .local-search-box input,
#article-container input:not([type="checkbox"]):not([type="radio"]),
#article-container textarea,
#article-container select {
  border-color: rgba(255, 255, 255, 0.62);
  border-radius: 16px;
  background: rgba(244, 248, 241, 0.22);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    0 8px 20px rgba(39, 59, 57, 0.08);
  backdrop-filter: blur(18px) saturate(170%);
  -webkit-backdrop-filter: blur(18px) saturate(170%);
  transition: border-color 180ms ease, background-color 180ms ease,
    box-shadow var(--liquid-glass-spring-soft),
    transform var(--liquid-glass-spring-soft);
}

#recent-posts > .recent-post-item,
#aside-content .card-widget,
.layout > div:first-child:not(.recent-posts),
.search-dialog,
.layout > .recent-posts .pagination > *:not(.space),
#article-container .btn-beautify,
#aside-content #card-info-btn {
  transition: color 180ms ease, border-color 180ms ease,
    box-shadow var(--liquid-glass-spring-soft),
    transform var(--liquid-glass-spring);
}

[data-theme="dark"] #web_bg {
  background:
    linear-gradient(180deg, rgba(8, 13, 14, 0.56), rgba(10, 14, 15, 0.68)),
    url("/images/backgrounds/monet-woman-with-parasol.jpg") center / cover no-repeat,
    var(--modern-paper) !important;
}

[data-theme="dark"] .layout > div:first-child:not(.recent-posts),
[data-theme="dark"] #aside-content .card-widget,
[data-theme="dark"] .search-dialog,
[data-theme="dark"] #sidebar #sidebar-menus,
[data-theme="dark"] #pagination.pagination-post {
  border-color: rgba(255, 255, 255, 0.15);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.035) 52%, transparent),
    rgba(15, 19, 20, 0.52);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -1px 0 rgba(0, 0, 0, 0.5),
    0 24px 68px rgba(0, 0, 0, 0.38);
}

[data-theme="dark"] #rightside > div > button,
[data-theme="dark"] #rightside > div > a,
[data-theme="dark"] #article-container .btn-beautify,
[data-theme="dark"] #aside-content #card-info-btn,
[data-theme="dark"] .layout > .recent-posts .pagination > *:not(.space),
[data-theme="dark"] #comment-switch > .switch-btn {
  border-color: rgba(255, 255, 255, 0.18);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.035)),
    rgba(18, 23, 24, 0.48);
}

/* Liquid scrollbar: a translucent rail with a refractive glass thumb. */
html {
  scrollbar-width: auto;
  scrollbar-color: rgba(204, 232, 239, 0.72) rgba(222, 238, 238, 0.12);
}

html::-webkit-scrollbar {
  width: 14px;
  height: 14px;
}

html::-webkit-scrollbar-track {
  background:
    linear-gradient(90deg, transparent, rgba(224, 243, 246, 0.18), transparent),
    rgba(225, 237, 235, 0.08);
  border-left: 1px solid rgba(255, 255, 255, 0.28);
}

html::-webkit-scrollbar-thumb {
  min-height: 54px;
  border: 3px solid transparent;
  border-radius: 999px;
  background:
    radial-gradient(circle at 34% 20%, rgba(255, 255, 255, 0.96) 0 5%, transparent 18%),
    linear-gradient(145deg, rgba(236, 253, 255, 0.88), rgba(142, 202, 216, 0.52) 52%, rgba(70, 117, 125, 0.62)) padding-box;
  background-clip: padding-box;
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.92),
    inset -1px -2px 0 rgba(36, 74, 80, 0.2),
    0 4px 14px rgba(36, 78, 84, 0.22);
}

html::-webkit-scrollbar-thumb:hover {
  background:
    radial-gradient(circle at 35% 18%, #fff 0 6%, transparent 19%),
    linear-gradient(145deg, rgba(244, 255, 255, 0.96), rgba(137, 213, 230, 0.7) 48%, rgba(56, 104, 114, 0.76)) padding-box;
  background-clip: padding-box;
}

html::-webkit-scrollbar-corner {
  background: transparent;
}

/* A sharper refractive edge gives every glass surface physical thickness. */
.layout > div:first-child:not(.recent-posts),
#recent-posts > .recent-post-item,
#aside-content .card-widget,
.search-dialog {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 1px 0 0 rgba(229, 249, 252, 0.52),
    inset 0 -1px 0 rgba(45, 83, 86, 0.13),
    0 18px 52px rgba(26, 60, 62, 0.14);
}

/* Platinum-diamond dark mode: graphite depth, silver edges, no neon wash. */
[data-theme="dark"] {
  --modern-paper: #080b0f;
  --modern-surface: rgba(16, 20, 26, 0.68);
  --modern-surface-muted: #171c23;
  --modern-text: #d9e0e5;
  --modern-text-strong: #f4f7f9;
  --modern-text-muted: #aeb9c2;
  --modern-border: rgba(213, 225, 233, 0.17);
  --modern-border-strong: rgba(226, 236, 242, 0.32);
  --liquid-glass-bg: rgba(10, 14, 19, 0.5);
  --liquid-glass-bg-strong: rgba(13, 18, 24, 0.68);
  --liquid-glass-edge: rgba(238, 246, 250, 0.3);
  --liquid-glass-edge-muted: rgba(205, 220, 229, 0.16);
  --modern-link: #c1d8e4;
  --btn-bg: #596976;
  --btn-hover-color: #8295a3;
}

[data-theme="dark"] #web_bg {
  background:
    radial-gradient(circle at 18% 8%, rgba(176, 197, 211, 0.13), transparent 28%),
    radial-gradient(circle at 82% 64%, rgba(88, 107, 123, 0.14), transparent 34%),
    linear-gradient(180deg, rgba(3, 7, 11, 0.7), rgba(5, 8, 12, 0.82)),
    url("/images/backgrounds/monet-woman-with-parasol.jpg") center / cover no-repeat,
    #080b0f !important;
}

[data-theme="dark"] .layout > div:first-child:not(.recent-posts),
[data-theme="dark"] #recent-posts > .recent-post-item,
[data-theme="dark"] #aside-content .card-widget,
[data-theme="dark"] .search-dialog,
[data-theme="dark"] #sidebar #sidebar-menus,
[data-theme="dark"] #pagination.pagination-post {
  border-color: rgba(221, 232, 239, 0.24);
  background:
    linear-gradient(138deg, rgba(239, 247, 250, 0.12), transparent 22%, rgba(151, 171, 185, 0.045) 54%, transparent 72%),
    radial-gradient(ellipse at 82% 112%, rgba(147, 170, 186, 0.13), transparent 46%),
    rgba(8, 12, 17, 0.56);
  box-shadow:
    inset 0 1px 0 rgba(248, 252, 255, 0.28),
    inset 1px 0 0 rgba(208, 226, 236, 0.1),
    inset 0 -1px 0 rgba(0, 0, 0, 0.82),
    0 26px 76px rgba(0, 0, 0, 0.48);
  backdrop-filter: blur(18px) saturate(118%) contrast(108%);
  -webkit-backdrop-filter: blur(18px) saturate(118%) contrast(108%);
}

[data-theme="dark"] #recent-posts > .recent-post-item::after,
[data-theme="dark"] #aside-content .card-widget::after,
[data-theme="dark"] .layout > div:first-child:not(.recent-posts)::after,
[data-theme="dark"] .search-dialog::after {
  display: block;
  background:
    conic-gradient(from 218deg at 18% 0%, transparent, rgba(233, 245, 251, 0.18) 8deg, transparent 22deg),
    linear-gradient(124deg, transparent 34%, rgba(214, 232, 241, 0.09) 35%, transparent 36%),
    linear-gradient(304deg, transparent 64%, rgba(156, 180, 194, 0.08) 65%, transparent 66%);
  filter: url("/images/effects/liquid-ice.svg#liquid-ice");
  opacity: 0.48;
}

[data-theme="dark"] html,
html[data-theme="dark"] {
  scrollbar-color: rgba(168, 187, 200, 0.76) rgba(7, 10, 14, 0.5);
}

html[data-theme="dark"]::-webkit-scrollbar-track {
  background: linear-gradient(90deg, #080b0f, rgba(65, 77, 88, 0.24), #080b0f);
  border-left-color: rgba(212, 227, 236, 0.1);
}

html[data-theme="dark"]::-webkit-scrollbar-thumb {
  background:
    radial-gradient(circle at 35% 18%, rgba(255, 255, 255, 0.9) 0 4%, transparent 16%),
    linear-gradient(145deg, #e4ebef, #82919c 44%, #313b45 72%, #9aa8b1) padding-box;
  background-clip: padding-box;
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.64),
    inset -1px -2px 0 rgba(0, 0, 0, 0.62),
    0 4px 18px rgba(0, 0, 0, 0.5);
}

/* Tag clouds use one readable material palette instead of random inline colors. */
.tag-cloud-list a,
#aside-content .card-tag-cloud a {
  color: var(--modern-text-strong) !important;
  font-weight: 650;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.72);
}

.tag-cloud-list a:hover,
#aside-content .card-tag-cloud a:hover {
  color: var(--modern-link) !important;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.84);
}

[data-theme="dark"] .tag-cloud-list a,
[data-theme="dark"] #aside-content .card-tag-cloud a {
  color: #e2e9ed !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.78);
}

[data-theme="dark"] .tag-cloud-list a:hover,
[data-theme="dark"] #aside-content .card-tag-cloud a:hover {
  color: #fff !important;
}

/* The footer is the final glass plane, matching cards and pagination. */
#footer {
  margin-top: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.66);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(194, 229, 235, 0.08)),
    rgba(238, 250, 252, 0.26);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.76),
    0 -16px 48px rgba(27, 58, 61, 0.1);
  backdrop-filter: blur(26px) saturate(162%);
  -webkit-backdrop-filter: blur(26px) saturate(162%);
}

#footer::before {
  display: none;
}

#footer-wrap {
  padding: 32px 20px calc(32px + env(safe-area-inset-bottom));
  color: var(--modern-text);
  font-size: 0.9rem;
  font-weight: 600;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.72);
}

#footer-wrap a {
  color: var(--modern-text-strong);
  font-weight: 700;
}

#footer-wrap a:hover {
  color: var(--modern-link);
}

[data-theme="dark"] #footer {
  border-top-color: rgba(226, 236, 242, 0.22);
  background:
    linear-gradient(180deg, rgba(231, 241, 247, 0.07), transparent 42%),
    rgba(8, 12, 17, 0.72);
  box-shadow:
    inset 0 1px 0 rgba(244, 249, 252, 0.18),
    0 -20px 62px rgba(0, 0, 0, 0.36);
  backdrop-filter: blur(26px) saturate(116%);
  -webkit-backdrop-filter: blur(26px) saturate(116%);
}

[data-theme="dark"] #footer-wrap {
  color: var(--modern-text);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.72);
}

[data-theme="dark"] #footer-wrap a {
  color: var(--modern-text-strong);
}

/* Pearl-quartz light mode: the bright counterpart to platinum dark mode. */
:root:not([data-theme="dark"]) {
  --modern-paper: #e8f0ef;
  --modern-surface: rgba(245, 251, 250, 0.52);
  --modern-surface-muted: rgba(221, 235, 232, 0.62);
  --modern-border: rgba(45, 76, 77, 0.15);
  --modern-border-strong: rgba(34, 65, 67, 0.28);
  --liquid-glass-edge: rgba(255, 255, 255, 0.94);
  --liquid-glass-edge-muted: rgba(46, 79, 80, 0.13);
  --modern-link: #285f70;
}

:root:not([data-theme="dark"]) .layout > div:first-child:not(.recent-posts),
:root:not([data-theme="dark"]) #recent-posts > .recent-post-item,
:root:not([data-theme="dark"]) #aside-content .card-widget,
:root:not([data-theme="dark"]) .search-dialog,
:root:not([data-theme="dark"]) #sidebar #sidebar-menus,
:root:not([data-theme="dark"]) #pagination.pagination-post {
  border-color: rgba(255, 255, 255, 0.78);
  background:
    linear-gradient(138deg, rgba(255, 255, 255, 0.42), transparent 23%, rgba(187, 224, 231, 0.08) 55%, transparent 74%),
    radial-gradient(ellipse at 84% 112%, rgba(133, 197, 211, 0.18), transparent 46%),
    rgba(238, 250, 252, 0.26);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.98),
    inset 1px 0 0 rgba(236, 252, 255, 0.68),
    inset 0 -1px 0 rgba(50, 91, 94, 0.16),
    0 24px 66px rgba(34, 72, 75, 0.16);
}

:root:not([data-theme="dark"]) #recent-posts > .recent-post-item::after,
:root:not([data-theme="dark"]) #aside-content .card-widget::after,
:root:not([data-theme="dark"]) .layout > div:first-child:not(.recent-posts)::after,
:root:not([data-theme="dark"]) .search-dialog::after {
  display: block;
  background:
    conic-gradient(from 220deg at 18% 0%, transparent, rgba(255, 255, 255, 0.62) 9deg, transparent 23deg),
    linear-gradient(124deg, transparent 34%, rgba(224, 249, 254, 0.36) 35%, transparent 36%),
    linear-gradient(304deg, transparent 64%, rgba(115, 188, 204, 0.12) 65%, transparent 66%);
  filter: url("/images/effects/liquid-ice.svg#liquid-ice");
  opacity: 0.38;
}

:root:not([data-theme="dark"]) #nav .menus_items .menus_item .menus_item_child,
:root:not([data-theme="dark"]) #page-header.nav-fixed #nav,
:root:not([data-theme="dark"]) #page-header.not-top-img #nav,
:root:not([data-theme="dark"]) #rightside > div > button,
:root:not([data-theme="dark"]) #rightside > div > a,
:root:not([data-theme="dark"]) #article-container .btn-beautify,
:root:not([data-theme="dark"]) #aside-content #card-info-btn,
:root:not([data-theme="dark"]) .layout > .recent-posts .pagination > *:not(.space),
:root:not([data-theme="dark"]) #comment-switch > .switch-btn {
  border-color: rgba(255, 255, 255, 0.82);
  background:
    radial-gradient(circle at 28% 18%, rgba(255, 255, 255, 0.86), transparent 18%),
    linear-gradient(145deg, rgba(250, 255, 255, 0.48), rgba(163, 214, 225, 0.18) 52%, rgba(105, 169, 181, 0.1)),
    rgba(236, 248, 249, 0.28);
  box-shadow:
    inset 0 1px 0 #fff,
    inset 0 -1px 0 rgba(45, 84, 87, 0.16),
    0 12px 32px rgba(34, 73, 76, 0.17);
}

:root:not([data-theme="dark"]) #footer {
  border-top-color: rgba(255, 255, 255, 0.82);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.36), transparent 34%, rgba(153, 210, 222, 0.1)),
    rgba(238, 250, 252, 0.26);
  box-shadow:
    inset 0 1px 0 #fff,
    0 -18px 54px rgba(33, 72, 75, 0.13);
}

:root:not([data-theme="dark"]) #footer-wrap,
:root:not([data-theme="dark"]) #footer-wrap a {
  color: var(--modern-text-strong);
}

/* Responsive adjustments */

@media screen and (max-width: 1100px) and (min-width: 901px) {
  .layout {
    gap: 20px;
  }

  #aside-content {
    flex-basis: 264px;
    width: 264px;
  }

  #recent-posts > .recent-post-item > .recent-post-info {
    padding-right: 1.7rem;
    padding-left: 1.7rem;
  }
}

@media screen and (max-width: 900px) {
  .layout {
    gap: 24px;
    padding-top: 32px;
  }

  #aside-content {
    flex: 0 0 auto;
    width: 100%;
  }

  #aside-content > .card-widget:first-child {
    margin-top: 0;
  }

  #aside-content #card-toc {
    border-radius: 16px;
  }
}

@media screen and (max-width: 768px) {
  html,
  body,
  #body-wrap {
    max-width: 100vw;
    overflow-x: hidden;
  }

  body {
    font-size: 14px;
  }

  #page-header.full_page {
    min-height: 500px;
    height: 75vh;
    height: 75svh;
    background-attachment: scroll;
  }

  #web_bg,
  [data-theme="dark"] #web_bg {
    background-attachment: scroll !important;
  }

  #page-header #site-title {
    width: 92vw;
    max-width: 92vw;
    font-size: clamp(2rem, 10vw, 2.65rem);
    overflow-wrap: break-word;
    word-break: normal;
  }

  #page-header #site-subtitle {
    max-width: 84vw;
    padding: 0 8vw;
  }

  #nav {
    height: 60px;
    padding: 0 16px;
  }

  .layout {
    box-sizing: border-box;
    gap: 20px;
    width: 100%;
    max-width: 100vw;
    padding: 20px 10px 36px;
    overflow-x: hidden;
  }

  .layout > .recent-posts,
  #recent-posts {
    box-sizing: border-box;
    width: 100% !important;
    max-width: 100%;
    min-width: 0;
  }

  .layout > div:first-child:not(.recent-posts) {
    padding: 30px 18px;
    border-radius: 20px;
  }

  #recent-posts > .recent-post-item {
    flex-direction: column;
    min-height: 0;
    height: auto;
    max-width: 100%;
    width: min(100%, calc(100vw - 20px));
    overflow: hidden;
    border-radius: 24px;
  }

  #recent-posts > .recent-post-item .post_cover {
    box-sizing: border-box;
    flex: 0 0 auto;
    min-height: 0;
    width: 100%;
    height: auto;
    aspect-ratio: 2 / 1;
  }

  #recent-posts > .recent-post-item > .recent-post-info {
    box-sizing: border-box;
    flex: 0 0 auto;
    min-height: 13rem;
    height: auto;
    max-width: 100%;
    padding: 24px 20px 28px;
    width: 100%;
  }

  #recent-posts > .recent-post-item > .recent-post-info > .article-title {
    display: block !important;
    overflow: visible;
    font-size: 1.42rem;
    line-height: 1.24;
    max-width: 100%;
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: normal;
    -webkit-line-clamp: unset !important;
  }

  #recent-posts > .recent-post-item > .recent-post-info > .content {
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  #post-info .post-title {
    font-size: clamp(1.85rem, 9vw, 2.7rem);
  }

  #article-container {
    font-size: 1rem;
    line-height: 1.78;
  }

  #article-container h1,
  #article-container h2,
  #article-container h3,
  #article-container h4,
  #article-container h5,
  #article-container h6 {
    scroll-margin-top: 72px;
  }

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

  #aside-content .card-widget {
    border-radius: 10px;
  }

  .search-dialog {
    top: 0;
    left: 0;
    margin: 0;
    padding: 22px 18px;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 0;
  }

  #rightside > div > button,
  #rightside > div > a {
    width: 38px;
    height: 38px;
    line-height: 36px;
  }

  .aplayer.aplayer-fixed {
    display: none !important;
  }
}

@media screen and (max-width: 480px) {
  #page-header #site-title {
    font-size: clamp(1.9rem, 9.6vw, 2.45rem);
  }

  #recent-posts > .recent-post-item > .recent-post-info > .article-title {
    font-size: 1.26rem;
    line-height: 1.28;
  }

  #recent-posts > .recent-post-item > .recent-post-info {
    min-height: 12.5rem;
    padding: 22px 17px 25px;
  }

  #article-container blockquote {
    padding: 0.85rem 1rem;
  }
}

@media (hover: hover) and (pointer: fine) {
  #recent-posts > .recent-post-item:hover {
    border-color: var(--modern-border-strong);
    box-shadow: var(--liquid-glass-shadow-hover);
    transform: translateY(-5px) scale(1.006);
  }

  #recent-posts > .recent-post-item:hover .post_cover .post-bg {
    transform: scale(1.018);
  }

  #aside-content .card-widget:hover,
  .layout > div:first-child:not(.recent-posts):hover {
    border-color: var(--modern-border-strong);
    box-shadow: var(--liquid-glass-shadow-hover);
  }

  #article-container .btn-beautify:hover,
  #aside-content #card-info-btn:hover,
  #rightside > div > button:hover,
  #rightside > div > a:hover {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.94),
      0 14px 34px rgba(38, 61, 60, 0.2);
    transform: translateY(-3px) scale(1.045);
  }
}

#rightside > div > button:active,
#rightside > div > a:active,
#article-container .btn-beautify:active,
#aside-content #card-info-btn:active,
.layout > .recent-posts .pagination > *:not(.space):active {
  transform: translateY(1px) scale(0.94);
  transition-duration: 90ms;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root {
    --card-bg: rgba(255, 255, 255, 0.9);
    --sidebar-bg: rgba(245, 245, 247, 0.96);
    --search-bg: rgba(255, 255, 255, 0.96);
  }

  [data-theme="dark"] {
    --card-bg: rgba(29, 29, 31, 0.94);
    --sidebar-bg: rgba(18, 18, 20, 0.96);
    --search-bg: rgba(29, 29, 31, 0.96);
  }

  .layout > div:first-child:not(.recent-posts),
  #recent-posts > .recent-post-item,
  #aside-content .card-widget,
  .search-dialog,
  #sidebar #sidebar-menus {
    background: rgba(255, 255, 255, 0.94);
  }

  [data-theme="dark"] .layout > div:first-child:not(.recent-posts),
  [data-theme="dark"] #recent-posts > .recent-post-item,
  [data-theme="dark"] #aside-content .card-widget,
  [data-theme="dark"] .search-dialog,
  [data-theme="dark"] #sidebar #sidebar-menus {
    background: rgba(24, 25, 28, 0.95);
  }
}

@media (prefers-reduced-transparency: reduce) {
  :root {
    --liquid-glass-bg: #ffffff;
    --liquid-glass-bg-strong: #ffffff;
    --card-bg: #ffffff;
    --sidebar-bg: #f5f5f7;
    --search-bg: #ffffff;
  }

  [data-theme="dark"] {
    --liquid-glass-bg: #1d1d1f;
    --liquid-glass-bg-strong: #1d1d1f;
    --card-bg: #1d1d1f;
    --sidebar-bg: #121214;
    --search-bg: #1d1d1f;
  }

  .layout > div:first-child:not(.recent-posts),
  #recent-posts > .recent-post-item,
  #aside-content .card-widget,
  .search-dialog,
  #sidebar #sidebar-menus {
    background: #fff;
  }

  [data-theme="dark"] .layout > div:first-child:not(.recent-posts),
  [data-theme="dark"] #recent-posts > .recent-post-item,
  [data-theme="dark"] #aside-content .card-widget,
  [data-theme="dark"] .search-dialog,
  [data-theme="dark"] #sidebar #sidebar-menus {
    background: #1d1d1f;
  }

  #nav,
  #nav .menus_items .menus_item .menus_item_child,
  .layout > div:first-child:not(.recent-posts),
  #recent-posts > .recent-post-item,
  #aside-content .card-widget,
  .layout > .recent-posts .pagination > *:not(.space),
  #sidebar #menu-mask,
  #sidebar #sidebar-menus,
  .search-dialog,
  #search-mask,
  #rightside > div > button,
  #rightside > div > a,
  #article-container blockquote,
  #post .post-copyright {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  #recent-posts > .recent-post-item::after,
  #aside-content .card-widget::after,
  .layout > div:first-child:not(.recent-posts)::after,
  .search-dialog::after {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }

  #page-header.full_page {
    background-attachment: scroll;
  }

  #recent-posts > .recent-post-item:hover,
  #recent-posts > .recent-post-item:hover .post_cover .post-bg,
  .avatar-img img:hover,
  #article-container .btn-beautify:hover,
  #aside-content #card-info-btn:hover,
  #rightside > div > button:hover,
  #rightside > div > a:hover {
    transform: none;
  }
}