:root {
  --canvas: #f5f6f8;
  --surface: #ffffff;
  --surface-subtle: #eef0f3;
  --line: #dfe2e7;
  --line-strong: #c8cdd5;
  --ink: #242932;
  --ink-strong: #111318;
  --ink-muted: #69717d;
  --accent: #607fa6;
  --accent-hover: #46698f;
  --accent-soft: rgba(96, 127, 166, 0.1);
  --radius: 6px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --global-bg: var(--canvas);
  --font-color: var(--ink);
  --text-highlight-color: var(--ink-strong);
  --card-meta: var(--ink-muted);
  --card-bg: var(--surface);
  --card-box-shadow: 0 1px 2px rgba(20, 24, 30, 0.05);
  --card-hover-box-shadow: 0 2px 8px rgba(20, 24, 30, 0.08);
  --sidebar-bg: var(--surface);
  --sidebar-menu-bg: var(--surface);
  --search-bg: var(--surface);
  --search-input-color: var(--ink);
  --search-a-color: var(--ink);
  --btn-color: #fff;
  --btn-bg: var(--accent);
  --btn-hover-color: var(--accent-hover);
  --text-bg-hover: var(--accent-soft);
  --light-grey: var(--line);
  --dark-grey: var(--line-strong);
  --white: #fff;
  --blockquote-color: var(--ink-muted);
  --blockquote-bg: var(--surface-subtle);
  --toc-link-color: var(--ink-muted);
  --hr-border: var(--line);
  --hr-before-color: var(--accent);
  --scrollbar-color: #9aa2ad;
  --zoom-bg: var(--canvas);
  --default-bg-color: var(--accent);
  --mark-bg: rgba(12, 15, 20, 0.42);
  --headline-presudo: var(--line-strong);
  --pseudo-hover: var(--accent);
}

[data-theme='dark'] {
  --canvas: #111318;
  --surface: #171a20;
  --surface-subtle: #1d2128;
  --line: #2a2e36;
  --line-strong: #3a404a;
  --ink: #d8dce3;
  --ink-strong: #f3f5f7;
  --ink-muted: #8d949f;
  --accent: #7d9bc1;
  --accent-hover: #a9bdd5;
  --accent-soft: rgba(125, 155, 193, 0.1);
  --global-bg: var(--canvas);
  --font-color: var(--ink);
  --text-highlight-color: var(--ink-strong);
  --card-meta: var(--ink-muted);
  --card-bg: var(--surface);
  --card-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.22);
  --card-hover-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
  --sidebar-bg: var(--surface);
  --sidebar-menu-bg: #15181e;
  --search-bg: #15181e;
  --search-input-color: var(--ink);
  --search-a-color: var(--ink);
  --btn-color: #111318;
  --btn-bg: var(--accent);
  --btn-hover-color: var(--accent-hover);
  --text-bg-hover: var(--accent-soft);
  --light-grey: var(--line);
  --dark-grey: var(--line-strong);
  --white: #f3f5f7;
  --blockquote-color: var(--ink-muted);
  --blockquote-bg: var(--surface-subtle);
  --toc-link-color: var(--ink-muted);
  --hr-border: var(--line);
  --hr-before-color: var(--accent);
  --scrollbar-color: #59616d;
  --zoom-bg: var(--canvas);
  --default-bg-color: var(--accent);
  --mark-bg: rgba(10, 12, 16, 0.5);
  --headline-presudo: var(--line-strong);
  --pseudo-hover: var(--accent);
}

html { scroll-behavior: smooth; }

body {
  color: var(--ink);
  background: var(--canvas);
  font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  font-feature-settings: "kern", "tnum";
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--accent);
  transition: color 160ms ease;
}

a:hover { color: var(--accent-hover); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

::selection {
  color: var(--ink-strong);
  background: rgba(125, 155, 193, 0.3);
}

#page-header.full_page {
  height: clamp(340px, 48vh, 520px);
  min-height: 0;
  background-attachment: scroll;
}

#page-header.not-home-page,
#page-header.post-bg { height: 240px; }

#page-header.full_page::before,
#page-header.not-home-page::before,
#page-header.post-bg::before {
  background: linear-gradient(180deg, rgba(10, 12, 16, 0.14), rgba(10, 12, 16, 0.62));
}

#page-header.full_page #site-info {
  top: auto;
  bottom: 42px;
  left: 50%;
  width: min(1160px, calc(100% - 48px));
  padding: 0;
  transform: translateX(-50%);
}

#page-header #site-title {
  max-width: 760px;
  color: #fff;
  font-family: Bahnschrift, "Noto Sans SC", sans-serif;
  font-size: clamp(2rem, 4vw, 3.25rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.08;
  text-align: left;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.28);
}

#page-header #scroll-down { display: none; }

#page-header #page-site-info {
  top: auto;
  bottom: 28px;
  left: 50%;
  width: min(1160px, calc(100% - 48px));
  padding: 0;
  transform: translateX(-50%);
}

#page-header #page-site-info #site-title {
  font-size: clamp(1.8rem, 3vw, 2.6rem);
}

#page-header #post-info { bottom: 28px; }

#page-header #post-info .post-title {
  font-family: Bahnschrift, "Noto Sans SC", sans-serif;
  font-size: clamp(1.8rem, 3.2vw, 2.7rem);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.18;
}

#page-header #post-info #post-meta,
#page-header #post-info #post-meta a {
  color: rgba(255, 255, 255, 0.78);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
}

#nav { padding: 0 max(24px, calc((100vw - 1160px) / 2)); }

#nav #blog-info .site-name,
#nav .site-page {
  font-weight: 500;
  letter-spacing: 0.01em;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.3);
}

#page-header.nav-fixed > #nav,
#page-header.not-top-img > #nav {
  background: color-mix(in srgb, var(--surface) 92%, transparent) !important;
  border-bottom: 1px solid var(--line);
  box-shadow: none !important;
  backdrop-filter: blur(12px);
}

#page-header.nav-fixed > #nav .site-page,
#page-header.nav-fixed > #nav .site-name,
#page-header.not-top-img > #nav .site-page,
#page-header.not-top-img > #nav .site-name {
  color: var(--ink);
  text-shadow: none;
}

.layout {
  max-width: 1160px;
  padding: 56px 24px 72px;
  gap: 24px;
}

.layout > div:first-child { width: calc(74% - 12px); }

.layout > div:first-child:not(.nc) {
  padding: 42px 44px;
  background: var(--surface) !important;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--card-box-shadow) !important;
}

.home-intro {
  max-width: 720px;
  margin-bottom: 42px;
}

.home-intro__eyebrow {
  margin: 0 0 14px;
  color: var(--accent);
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
}

.home-intro__title {
  margin: 0 0 12px;
  color: var(--ink-strong);
  font-family: Bahnschrift, "Noto Sans SC", sans-serif;
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1.15;
}

.home-intro__sub {
  margin: 0 0 18px;
  color: var(--ink-muted);
  font-size: 1rem;
  line-height: 1.75;
}

.home-intro__meta {
  margin: 0;
  color: var(--ink-muted);
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.75rem;
}

.category-directory {
  display: block;
  border-top: 1px solid var(--line-strong);
}

.category-row {
  display: grid;
  grid-template-columns: 1fr auto 18px;
  align-items: center;
  gap: 18px;
  min-height: 72px;
  padding: 0 4px;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  transition: padding 180ms var(--ease), color 180ms ease, border-color 180ms ease;
}

.category-row:hover {
  padding-left: 12px;
  color: var(--ink-strong);
  border-color: var(--accent);
}

.category-row__name {
  font-size: 1.08rem;
  font-weight: 600;
}

.category-row__count {
  color: var(--ink-muted);
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.74rem;
}

.category-row__arrow {
  color: var(--accent);
  font-size: 0.75rem;
  transition: transform 180ms var(--ease);
}

.category-row:hover .category-row__arrow { transform: translateX(4px); }

.page-head {
  margin-bottom: 30px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
}

.page-head__back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 14px;
  color: var(--ink-muted);
  font-size: 0.82rem;
}

.page-head__title {
  margin: 0 0 6px;
  color: var(--ink-strong);
  font-size: 1.85rem;
  font-weight: 600;
  letter-spacing: -0.025em;
}

.page-head__sub {
  margin: 0;
  color: var(--ink-muted);
  font-size: 0.82rem;
}

.post-grid {
  display: block;
  border-top: 1px solid var(--line-strong);
}

.post-card {
  display: block;
  padding: 24px 4px 22px;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  transition: padding 180ms var(--ease), border-color 180ms ease;
}

.post-card:hover {
  padding-left: 12px;
  border-color: var(--accent);
}

.post-card__title {
  margin-bottom: 8px;
  color: var(--ink-strong);
  font-size: 1.12rem;
  font-weight: 600;
  line-height: 1.45;
}

.post-card__title .sticky {
  margin-right: 8px;
  color: var(--accent);
  font-size: 0.72rem;
  transform: rotate(45deg);
}

.post-card__excerpt {
  display: -webkit-box;
  max-width: 680px;
  margin-bottom: 13px;
  overflow: hidden;
  color: var(--ink-muted);
  font-size: 0.88rem;
  line-height: 1.7;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.post-card__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  color: var(--ink-muted);
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.7rem;
}

.post-card__date,
.post-card__tags {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.post-card__tag { color: var(--ink-muted); }

#article-container {
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.9;
}

#article-container h1,
#article-container h2,
#article-container h3,
#article-container h4 {
  color: var(--ink-strong);
  font-weight: 600;
  letter-spacing: -0.02em;
}

#article-container h1[id],
#article-container h2[id],
#article-container h3[id],
#article-container h4[id],
#article-container h5[id],
#article-container h6[id] { scroll-margin-top: 76px; }

#article-container a {
  color: var(--accent);
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 48%, transparent);
}

#article-container blockquote {
  margin: 1.6em 0;
  padding: 14px 18px;
  color: var(--blockquote-color);
  background: var(--blockquote-bg);
  border-left: 2px solid var(--accent);
}

#article-container code {
  padding: 0.16em 0.38em;
  color: var(--accent-hover);
  background: var(--surface-subtle);
  border: 1px solid var(--line);
  border-radius: 3px;
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.86em;
}

#article-container pre,
#article-container figure.highlight {
  background: #0d0f13 !important;
  border: 1px solid var(--line);
  border-radius: 4px;
  box-shadow: none !important;
}

#article-container figure.highlight pre,
#article-container figure.highlight table,
#article-container figure.highlight th,
#article-container figure.highlight td {
  background: transparent !important;
  border: 0 !important;
}

#article-container pre code {
  color: #d8dce3;
  background: transparent;
  border: 0;
}

#article-container img { border-radius: 3px; }

#article-container table,
#article-container th,
#article-container td { border-color: var(--line) !important; }

#article-container thead {
  color: var(--ink-strong);
  background: var(--surface-subtle);
}

#aside-content { width: calc(26% - 12px); }

#aside-content .card-widget {
  margin-bottom: 16px;
  padding: 20px;
  color: var(--ink) !important;
  background: var(--surface) !important;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: none !important;
}

#aside-content .item-headline,
#aside-content .author-info__name {
  color: var(--ink-strong) !important;
  font-weight: 600;
}

#aside-content .item-headline i { color: var(--ink-muted); }

#aside-content .author-info__description,
#aside-content .site-data .headline,
#aside-content .card-category-list-count,
#aside-content .card-archive-list-count,
#aside-content .toc-percentage { color: var(--ink-muted) !important; }

#aside-content .avatar-img {
  border: 1px solid var(--line);
  box-shadow: none;
}

#aside-content .avatar-img:hover,
#aside-content .card-info-social-icons i:hover { transform: none; }

#aside-content .site-data .length-num,
#aside-content .toc-link.active,
#aside-content .toc-link:hover,
#aside-content .card-info-social-icons .social-icon:hover { color: var(--accent) !important; }

#aside-content #card-info-btn {
  color: var(--btn-color) !important;
  background: var(--btn-bg) !important;
  border-radius: 3px;
}

#aside-content .card-categories a,
#aside-content .card-archives a,
#aside-content .card-tag-cloud a,
#aside-content .toc-link,
#aside-content .card-info-social-icons .social-icon { color: var(--ink-muted) !important; }

#aside-content .card-categories a:hover,
#aside-content .card-archives a:hover {
  color: var(--ink-strong) !important;
  background: var(--accent-soft) !important;
}

.article-sort { border-color: var(--line-strong) !important; }

.article-sort-title,
.article-sort-item-title { color: var(--ink-strong) !important; }

.article-sort-item-time,
.article-sort-item.year { color: var(--ink-muted) !important; }

.article-sort-title::before,
.article-sort-item::before {
  background: var(--surface) !important;
  border-color: var(--accent) !important;
}

#pagination .pagination > *:not(.space) { border-radius: 3px !important; }

#pagination .page-number.current {
  color: var(--btn-color) !important;
  background: var(--accent) !important;
}

.pagination-related { border-radius: var(--radius) !important; }

#rightside > div > button,
#rightside > div > a {
  color: var(--ink-muted) !important;
  background: var(--surface) !important;
  border: 1px solid var(--line);
  box-shadow: none !important;
}

#footer {
  color: var(--ink-muted) !important;
  background: var(--canvas) !important;
  border-top: 1px solid var(--line);
}

#footer .footer-other {
  padding: 30px 20px;
  color: var(--ink-muted) !important;
  background: transparent !important;
}

#footer a,
#footer .footer-flex-title { color: var(--ink-muted) !important; }

#footer a:hover { color: var(--accent) !important; }

@media (max-width: 900px) {
  .layout { padding-top: 36px; }

  .layout > div:first-child,
  #aside-content { width: 100%; }

  #aside-content { margin-top: 12px; }
}

@media (max-width: 768px) {
  #page-header.full_page { height: 320px; }

  #page-header.not-home-page,
  #page-header.post-bg { height: 220px; }

  #page-header.full_page #site-info,
  #page-header #page-site-info {
    bottom: 28px;
    width: calc(100% - 36px);
  }

  #page-header #post-info { bottom: 20px; }

  #page-header #post-info .post-title { font-size: 1.65rem; }

  #nav { padding: 0 18px; }

  .layout { padding: 32px 12px 52px; }

  .layout > div:first-child:not(.nc) { padding: 30px 20px; }

  .home-intro { margin-bottom: 30px; }

  .home-intro__title { font-size: 2rem; }

  .category-row { min-height: 64px; }

  #article-container {
    font-size: 0.97rem;
    line-height: 1.84;
  }
}

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

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