From 97f1c3712f3b9da346abe558c11d42b37485a26a Mon Sep 17 00:00:00 2001
From: biss <bishsh2006@outlook.com>
Date: Sat, 20 Jun 2026 10:48:33 +0800
Subject: [PATCH] =?UTF-8?q?css=E6=8B=86=E5=88=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/styles/site.css                   | 4895 +------------------------
 src/styles/site/01-base.css           |   60 +
 src/styles/site/02-navigation.css     |  380 ++
 src/styles/site/03-overlays.css       |  485 +++
 src/styles/site/04-layout.css         |  261 ++
 src/styles/site/05-cards-sidebar.css  |  632 ++++
 src/styles/site/06-article-prose.css  |  938 +++++
 src/styles/site/07-post-comments.css  |  277 ++
 src/styles/site/08-archives-stats.css |  402 ++
 src/styles/site/09-shuoshuo.css       |  314 ++
 src/styles/site/10-pages.css          |  287 ++
 src/styles/site/11-footer.css         |  150 +
 src/styles/site/12-theme.css          |  223 ++
 src/styles/site/13-responsive.css     |  377 ++
 src/styles/site/14-animations.css     |   95 +
 15 files changed, 4895 insertions(+), 4881 deletions(-)
 create mode 100644 src/styles/site/01-base.css
 create mode 100644 src/styles/site/02-navigation.css
 create mode 100644 src/styles/site/03-overlays.css
 create mode 100644 src/styles/site/04-layout.css
 create mode 100644 src/styles/site/05-cards-sidebar.css
 create mode 100644 src/styles/site/06-article-prose.css
 create mode 100644 src/styles/site/07-post-comments.css
 create mode 100644 src/styles/site/08-archives-stats.css
 create mode 100644 src/styles/site/09-shuoshuo.css
 create mode 100644 src/styles/site/10-pages.css
 create mode 100644 src/styles/site/11-footer.css
 create mode 100644 src/styles/site/12-theme.css
 create mode 100644 src/styles/site/13-responsive.css
 create mode 100644 src/styles/site/14-animations.css

diff --git a/src/styles/site.css b/src/styles/site.css
index 2c7ce8f..33aed33 100644
--- a/src/styles/site.css
+++ b/src/styles/site.css
@@ -1,4881 +1,14 @@
-@import url("https://fontsapi.zeoseven.com/7/main/result.css");
-
-:root {
-  color-scheme: light;
-  --bg: #f7f5ef;
-  --surface: #fffdf8;
-  --text: #20242a;
-  --muted: #686f78;
-  --line: #ded8cc;
-  --accent: #0f766e;
-  --accent-strong: #14532d;
-  --shadow: 0 14px 45px rgba(58, 51, 38, 0.1);
-  --page-gutter: clamp(20px, 4vw, 64px);
-  --wide-width: 1440px;
-  --content-width: 1280px;
-  --article-width: 1080px;
-  --narrow-width: 1000px;
-}
-
-:root[data-theme='dark'] {
-  color-scheme: dark;
-  --bg: #0b1014;
-  --surface: #141b21;
-  --text: #eef4f6;
-  --muted: #b6c3c9;
-  --line: rgba(181, 198, 207, 0.28);
-  --accent: #8be0d5;
-  --accent-strong: #b7e7d4;
-  --shadow: 0 18px 52px rgba(0, 0, 0, 0.44);
-}
-
-* {
-  box-sizing: border-box;
-}
-
-body {
-  margin: 0;
-  color: var(--text);
-  font-family: "Zhuque Fangsong (technical preview)";
-  font-weight: normal;
-  line-height: 1.75;
-  background:
-    linear-gradient(rgba(247, 245, 239, 0.86), rgba(247, 245, 239, 0.95)),
-    url('/images/background.png') center top / cover fixed;
-  transition:
-    color 0.22s ease,
-    background-color 0.22s ease;
-}
-
-:root[data-theme='dark'] body {
-  background:
-    linear-gradient(rgba(7, 10, 14, 0.9), rgba(8, 13, 17, 0.96)),
-    url('/images/background.png') center top / cover fixed;
-}
-
-a {
-  color: inherit;
-  text-decoration: none;
-}
-
-.site-header {
-  position: sticky;
-  top: 12px;
-  z-index: 10;
-  pointer-events: none;
-}
-
-.nav {
-  position: relative;
-  width: min(var(--wide-width), calc(100% - (var(--page-gutter) * 2)));
-  min-height: 58px;
-  margin: 0 auto;
-  padding: 0 18px;
-  display: grid;
-  grid-template-columns: minmax(120px, 1fr) auto minmax(120px, 1fr);
-  align-items: center;
-  gap: 24px;
-  overflow: hidden;
-  border: 1px solid rgba(255, 255, 255, 0.56);
-  border-radius: 999px;
-  background:
-    linear-gradient(135deg, rgba(255, 255, 255, 0.52), rgba(255, 255, 255, 0.2)),
-    rgba(255, 255, 255, 0.28);
-  box-shadow:
-    inset 0 1px 0 rgba(255, 255, 255, 0.82),
-    inset 0 -18px 38px rgba(255, 255, 255, 0.16),
-    0 18px 54px rgba(44, 55, 63, 0.18);
-  backdrop-filter: blur(22px) saturate(180%);
-  -webkit-backdrop-filter: blur(22px) saturate(180%);
-  pointer-events: auto;
-}
-
-.nav::before {
-  content: "";
-  position: absolute;
-  inset: 0;
-  background:
-    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.72), transparent 30%),
-    linear-gradient(90deg, rgba(255, 255, 255, 0.42), transparent 38%, rgba(255, 255, 255, 0.22));
-  opacity: 0.74;
-  pointer-events: none;
-}
-
-.nav::after {
-  display: none;
-}
-
-.brand {
-  position: relative;
-  z-index: 1;
-  font-size: 1.05rem;
-  font-weight: 800;
-}
-
-.nav-menu {
-  display: contents;
-}
-
-.nav-menu-toggle {
-  position: relative;
-  z-index: 1;
-  display: none;
-  width: 40px;
-  height: 40px;
-  place-items: center;
-  border: 1px solid transparent;
-  border-radius: 999px;
-  color: var(--muted);
-  font: inherit;
-  background: transparent;
-  cursor: pointer;
-  transition:
-    color 0.2s ease,
-    background-color 0.2s ease,
-    border-color 0.2s ease,
-    box-shadow 0.2s ease,
-    transform 0.2s ease;
-}
-
-.nav-menu-close {
-  display: none;
-}
-
-.nav-links {
-  position: relative;
-  z-index: 1;
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  color: var(--muted);
-  font-size: 0.94rem;
-  white-space: nowrap;
-}
-
-.nav-center {
-  justify-content: center;
-}
-
-.nav-actions {
-  justify-content: flex-end;
-}
-
-.nav-links a,
-.nav-random,
-.nav-search,
-.nav-console,
-.theme-toggle {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  border: 1px solid transparent;
-  border-radius: 999px;
-  padding: 7px 12px;
-  transition:
-    color 0.2s ease,
-    background-color 0.2s ease,
-    border-color 0.2s ease,
-    box-shadow 0.2s ease,
-    transform 0.2s ease;
-}
-
-.nav-search,
-.nav-random,
-.nav-console,
-.theme-toggle {
-  color: inherit;
-  font: inherit;
-  line-height: inherit;
-  background: transparent;
-  cursor: pointer;
-}
-
-.nav-random {
-  position: relative;
-  overflow: hidden;
-}
-
-.nav-random::after {
-  content: "";
-  position: absolute;
-  inset: 3px;
-  border-radius: inherit;
-  background:
-    linear-gradient(120deg, transparent 8%, rgba(255, 255, 255, 0.82) 34%, transparent 58%);
-  opacity: 0;
-  transform: translateX(-135%);
-  pointer-events: none;
-}
-
-.nav-random.is-randomizing {
-  color: var(--accent);
-  border-color: rgba(15, 118, 110, 0.22);
-  background: rgba(255, 255, 255, 0.5);
-  box-shadow:
-    inset 0 1px 0 rgba(255, 255, 255, 0.76),
-    0 10px 24px rgba(15, 118, 110, 0.16);
-}
-
-.nav-random.is-randomizing::after {
-  opacity: 1;
-  animation: random-button-sheen 0.72s ease both;
-}
-
-.nav-random.is-randomizing .nav-icon {
-  animation: random-button-spin 0.72s cubic-bezier(0.2, 0.8, 0.2, 1) both;
-}
-
-.nav-icon {
-  display: inline-grid;
-  width: 16px;
-  min-width: 16px;
-  height: 16px;
-  place-items: center;
-  font-size: 0.95em;
-  line-height: 1;
-}
-
-.theme-toggle {
-  justify-content: center;
-  width: 38px;
-  min-height: 38px;
-  padding: 0;
-}
-
-:root:not([data-theme='dark']) .theme-toggle-sun,
-:root[data-theme='dark'] .theme-toggle-moon {
-  display: none;
-}
-
-.nav-links a:hover,
-.nav-random:hover,
-.nav-search:hover,
-.nav-console:hover,
-.theme-toggle:hover,
-.site-footer a:hover,
-.section-heading a:hover {
-  color: var(--accent);
-}
-
-.custom-context-menu {
-  position: fixed;
-  top: 0;
-  left: 0;
-  z-index: 1000;
-  width: min(218px, calc(100vw - 20px));
-  max-height: calc(100vh - 20px);
-  overflow-y: auto;
-  border: 1px solid rgba(255, 255, 255, 0.58);
-  border-radius: 14px;
-  padding: 8px;
-  color: #4f565b;
-  background:
-    linear-gradient(145deg, rgba(255, 255, 255, 0.78), rgba(235, 248, 231, 0.68)),
-    rgba(245, 252, 241, 0.82);
-  box-shadow:
-    inset 0 1px 0 rgba(255, 255, 255, 0.86),
-    0 18px 42px rgba(44, 55, 63, 0.18);
-  backdrop-filter: blur(18px) saturate(165%);
-  -webkit-backdrop-filter: blur(18px) saturate(165%);
-  opacity: 0;
-  pointer-events: none;
-  transform: translate3d(0, 6px, 0) scale(0.98);
-  transform-origin: top left;
-  transition:
-    opacity 0.14s ease,
-    transform 0.14s ease;
-}
-
-.custom-context-menu.is-open {
-  opacity: 1;
-  pointer-events: auto;
-  transform: translate3d(0, 0, 0) scale(1);
-}
-
-.custom-context-menu [hidden] {
-  display: none !important;
-}
-
-.context-menu-nav {
-  display: grid;
-  grid-template-columns: repeat(4, minmax(0, 1fr));
-  gap: 6px;
-  padding-bottom: 7px;
-}
-
-.context-menu-group {
-  display: grid;
-  gap: 2px;
-  border-top: 1px dashed rgba(104, 111, 120, 0.18);
-  padding-top: 7px;
-}
-
-.context-menu-group + .context-menu-group {
-  margin-top: 7px;
-}
-
-.custom-context-menu :where(a, button) {
-  display: flex;
-  align-items: center;
-  width: 100%;
-  min-width: 0;
-  border: 0;
-  color: inherit;
-  font: inherit;
-  line-height: 1.25;
-  text-align: left;
-  background: transparent;
-  cursor: pointer;
-}
-
-.context-menu-nav :where(a, button) {
-  justify-content: center;
-  height: 42px;
-  border: 1px solid rgba(178, 194, 170, 0.42);
-  border-radius: 14px;
-  color: #6b7174;
-  background: rgba(255, 255, 255, 0.44);
-  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.76);
-}
-
-.context-menu-group :where(a, button) {
-  gap: 12px;
-  min-height: 40px;
-  border-radius: 10px;
-  padding: 9px 10px;
-}
-
-.custom-context-menu :where(a, button):hover,
-.custom-context-menu :where(a, button):focus-visible {
-  color: var(--accent);
-  background: rgba(255, 255, 255, 0.58);
-  outline: 0;
-}
-
-.custom-context-menu i {
-  display: inline-grid;
-  width: 18px;
-  min-width: 18px;
-  height: 18px;
-  place-items: center;
-  color: #737a7d;
-  font-size: 0.98rem;
-  line-height: 1;
-}
-
-.custom-context-menu :where(a, button):hover i,
-.custom-context-menu :where(a, button):focus-visible i {
-  color: currentColor;
-}
-
-.custom-context-menu span {
-  min-width: 0;
-  overflow: hidden;
-  font-size: 0.95rem;
-  font-weight: 650;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.context-menu-native-hint {
-  position: fixed;
-  right: max(16px, env(safe-area-inset-right));
-  bottom: max(16px, env(safe-area-inset-bottom));
-  z-index: 900;
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  max-width: min(300px, calc(100vw - 32px));
-  border: 1px solid rgba(255, 255, 255, 0.58);
-  border-radius: 999px;
-  padding: 8px 12px;
-  color: #4f565b;
-  font-size: 0.84rem;
-  font-weight: 650;
-  line-height: 1.3;
-  background:
-    linear-gradient(145deg, rgba(255, 255, 255, 0.78), rgba(235, 248, 231, 0.68)),
-    rgba(245, 252, 241, 0.82);
-  box-shadow:
-    inset 0 1px 0 rgba(255, 255, 255, 0.86),
-    0 12px 30px rgba(44, 55, 63, 0.14);
-  backdrop-filter: blur(16px) saturate(165%);
-  -webkit-backdrop-filter: blur(16px) saturate(165%);
-  opacity: 0;
-  pointer-events: none;
-  transform: translate3d(0, 8px, 0);
-  transition:
-    opacity 0.18s ease,
-    transform 0.18s ease;
-}
-
-.context-menu-native-hint.is-visible {
-  opacity: 1;
-  transform: translate3d(0, 0, 0);
-}
-
-.context-menu-native-hint kbd {
-  border: 1px solid rgba(178, 194, 170, 0.52);
-  border-radius: 7px;
-  padding: 1px 6px;
-  color: var(--accent);
-  font: inherit;
-  background: rgba(255, 255, 255, 0.52);
-  box-shadow: inset 0 -1px 0 rgba(44, 55, 63, 0.08);
-}
-
-.nav-links a:hover,
-.nav-random:hover,
-.nav-search:hover,
-.nav-console:hover,
-.theme-toggle:hover,
-.nav-menu-toggle:hover {
-  border-color: rgba(255, 255, 255, 0.62);
-  background: rgba(255, 255, 255, 0.38);
-  box-shadow:
-    inset 0 1px 0 rgba(255, 255, 255, 0.72),
-    0 8px 18px rgba(15, 118, 110, 0.1);
-  transform: translateY(-1px);
-}
-
-.random-post-transition {
-  position: fixed;
-  inset: 0;
-  z-index: 1200;
-  display: grid;
-  place-items: center;
-  padding: var(--page-gutter);
-  opacity: 0;
-  pointer-events: none;
-  background: rgba(247, 245, 239, 0.34);
-  backdrop-filter: blur(6px) saturate(145%);
-  -webkit-backdrop-filter: blur(6px) saturate(145%);
-  transition: opacity 0.18s ease;
-}
-
-.random-post-transition.is-visible {
-  opacity: 1;
-}
-
-.random-post-flight {
-  position: absolute;
-  inset: 0;
-  overflow: hidden;
-  pointer-events: none;
-}
-
-.random-post-flying-card {
-  position: absolute;
-  top: calc(50% + var(--flight-y));
-  left: 50%;
-  width: min(260px, 68vw);
-  border: 1px solid rgba(255, 255, 255, 0.64);
-  border-radius: 8px;
-  padding: 12px 14px;
-  color: #2f4358;
-  background:
-    linear-gradient(135deg, rgba(255, 255, 255, 0.88), rgba(238, 250, 246, 0.68)),
-    rgba(255, 255, 255, 0.74);
-  box-shadow:
-    inset 0 1px 0 rgba(255, 255, 255, 0.86),
-    0 18px 48px rgba(44, 55, 63, 0.16);
-  opacity: 0;
-  transform: translate3d(-50vw, -50%, 0) rotate(var(--flight-rotate)) scale(0.82);
-  animation: random-card-fly 1.16s cubic-bezier(0.16, 0.84, 0.28, 1) var(--flight-delay) both;
-}
-
-.random-post-flying-card small,
-.random-post-flying-card strong {
-  display: block;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.random-post-flying-card small {
-  color: var(--muted);
-  font-size: 0.74rem;
-  font-weight: 700;
-}
-
-.random-post-flying-card strong {
-  margin-top: 4px;
-  font-size: 0.95rem;
-  font-weight: 800;
-}
-
-.random-post-transition-card {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  gap: 12px;
-  min-width: min(280px, 100%);
-  border: 1px solid rgba(255, 255, 255, 0.66);
-  border-radius: 999px;
-  padding: 16px 22px;
-  color: var(--accent);
-  font-size: 1rem;
-  font-weight: 750;
-  background:
-    linear-gradient(135deg, rgba(255, 255, 255, 0.84), rgba(238, 250, 246, 0.62)),
-    rgba(255, 255, 255, 0.7);
-  box-shadow:
-    inset 0 1px 0 rgba(255, 255, 255, 0.88),
-    0 24px 64px rgba(44, 55, 63, 0.2);
-  transform: translateY(8px) scale(0.96);
-  transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
-}
-
-.random-post-transition.is-visible .random-post-transition-card {
-  transform: translateY(0) scale(1);
-}
-
-.random-post-transition-card::before,
-.random-post-transition-card::after {
-  content: "";
-  position: absolute;
-  inset: -10px;
-  border: 1px solid rgba(15, 118, 110, 0.24);
-  border-radius: inherit;
-  opacity: 0;
-  animation: random-card-pulse 1.1s ease-out infinite;
-}
-
-.random-post-transition-card::after {
-  animation-delay: 0.28s;
-}
-
-.random-post-transition-card i {
-  display: inline-grid;
-  width: 22px;
-  min-width: 22px;
-  height: 22px;
-  place-items: center;
-  animation: random-button-spin 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
-}
-
-.random-post-transition-card span {
-  min-width: 0;
-  overflow-wrap: anywhere;
-}
-
-.random-post-transition-card span::after {
-  content: "";
-  display: inline-block;
-  width: 1.25em;
-  text-align: left;
-  animation: random-loading-dots 1s steps(4, end) infinite;
-}
-
-.has-control-console {
-  overflow: hidden;
-}
-
-.control-console {
-  position: fixed;
-  inset: 0;
-  z-index: 900;
-  display: grid;
-  place-items: center;
-  padding: var(--page-gutter);
-  opacity: 0;
-  pointer-events: none;
-  transition: opacity 0.18s ease;
-}
-
-.control-console.is-open {
-  opacity: 1;
-  pointer-events: auto;
-}
-
-.control-console-backdrop {
-  position: absolute;
-  inset: 0;
-  background: rgba(28, 37, 42, 0.36);
-  backdrop-filter: blur(10px);
-  -webkit-backdrop-filter: blur(10px);
-}
-
-.control-console-panel {
-  position: relative;
-  width: min(880px, 100%);
-  max-height: min(760px, calc(100vh - (var(--page-gutter) * 2)));
-  overflow: auto;
-  border: 1px solid rgba(255, 255, 255, 0.58);
-  border-radius: 8px;
-  padding: clamp(20px, 4vw, 30px);
-  background:
-    radial-gradient(circle at 14% 0%, rgba(255, 255, 255, 0.76), transparent 34%),
-    linear-gradient(145deg, rgba(255, 255, 255, 0.76), rgba(226, 248, 241, 0.48)),
-    rgba(255, 253, 248, 0.88);
-  box-shadow:
-    inset 0 1px 0 rgba(255, 255, 255, 0.82),
-    0 28px 80px rgba(44, 55, 63, 0.24);
-  backdrop-filter: blur(20px) saturate(165%);
-  -webkit-backdrop-filter: blur(20px) saturate(165%);
-  transform: translateY(10px) scale(0.98);
-  transition: transform 0.18s ease;
-}
-
-.control-console.is-open .control-console-panel {
-  transform: translateY(0) scale(1);
-}
-
-.control-console-panel:focus {
-  outline: 0;
-}
-
-.control-console-head {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 20px;
-  margin-bottom: 20px;
-}
-
-.control-console-head p {
-  margin: 0 0 4px;
-  color: var(--accent);
-  font-size: 0.78rem;
-  font-weight: 800;
-}
-
-.control-console-head h2 {
-  margin: 0;
-  color: #20242a;
-  font-size: clamp(1.8rem, 5vw, 2.7rem);
-  line-height: 1.08;
-}
-
-.control-console-close {
-  display: grid;
-  width: 40px;
-  height: 40px;
-  place-items: center;
-  flex: 0 0 auto;
-  border: 1px solid rgba(15, 118, 110, 0.16);
-  border-radius: 999px;
-  color: var(--accent);
-  font: inherit;
-  background: rgba(236, 253, 245, 0.64);
-  cursor: pointer;
-  transition:
-    color 0.2s ease,
-    background-color 0.2s ease,
-    transform 0.2s ease;
-}
-
-.control-console-close:hover {
-  color: #fff;
-  background: #3eb8be;
-  transform: translateY(-1px);
-}
-
-.control-console-grid {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 14px;
-}
-
-.control-site-card {
-  display: grid;
-  grid-template-columns: 46px minmax(0, 1fr);
-  gap: 14px;
-  align-items: center;
-  min-width: 0;
-  border: 1px solid rgba(15, 118, 110, 0.14);
-  border-radius: 8px;
-  padding: 16px;
-  background: rgba(236, 253, 245, 0.58);
-  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.62);
-  transition:
-    border-color 0.2s ease,
-    background-color 0.2s ease,
-    transform 0.2s ease;
-}
-
-.control-site-card:hover {
-  border-color: rgba(15, 118, 110, 0.28);
-  background: rgba(236, 253, 245, 0.78);
-  transform: translateY(-2px);
-}
-
-.control-site-card > i {
-  display: grid;
-  width: 46px;
-  height: 46px;
-  place-items: center;
-  border-radius: 8px;
-  color: #fff;
-  background: #3eb8be;
-}
-
-.control-site-card span {
-  display: grid;
-  min-width: 0;
-  gap: 3px;
-}
-
-.control-site-card strong {
-  color: #33433f;
-  font-size: 1.04rem;
-  line-height: 1.25;
-}
-
-.control-site-card em,
-.control-site-card small {
-  overflow: hidden;
-  color: var(--muted);
-  font-style: normal;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.control-site-card small {
-  grid-column: 2;
-  font-size: 0.82rem;
-}
-
-.control-console-info {
-  display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: 12px;
-  margin-top: 18px;
-}
-
-.control-console-info section {
-  display: grid;
-  gap: 4px;
-  border: 1px solid rgba(222, 216, 204, 0.72);
-  border-radius: 8px;
-  padding: 14px;
-  background: rgba(255, 253, 248, 0.56);
-}
-
-.control-console-info span {
-  color: var(--muted);
-  font-size: 0.84rem;
-  font-weight: 700;
-}
-
-.control-console-info strong {
-  min-width: 0;
-  overflow-wrap: anywhere;
-  color: #2f4358;
-  font-size: 1rem;
-}
-
-:root[data-theme='dark'] .nav {
-  border-color: rgba(166, 184, 194, 0.2);
-  background:
-    linear-gradient(135deg, rgba(25, 35, 42, 0.82), rgba(10, 15, 20, 0.66)),
-    rgba(10, 15, 20, 0.68);
-  box-shadow:
-    inset 0 1px 0 rgba(255, 255, 255, 0.12),
-    inset 0 -18px 38px rgba(0, 0, 0, 0.18),
-    0 18px 54px rgba(0, 0, 0, 0.42);
-}
-
-:root[data-theme='dark'] .nav::before {
-  background:
-    radial-gradient(circle at 18% 0%, rgba(125, 211, 199, 0.16), transparent 32%),
-    linear-gradient(90deg, rgba(255, 255, 255, 0.07), transparent 42%, rgba(125, 211, 199, 0.08));
-}
-
-:root[data-theme='dark'] .nav::after {
-  background: rgba(255, 255, 255, 0.12);
-}
-
-:root[data-theme='dark'] .nav-links a:hover,
-:root[data-theme='dark'] .nav-random:hover,
-:root[data-theme='dark'] .nav-search:hover,
-:root[data-theme='dark'] .nav-console:hover,
-:root[data-theme='dark'] .theme-toggle:hover,
-:root[data-theme='dark'] .nav-menu-toggle:hover {
-  border-color: rgba(125, 211, 199, 0.28);
-  background: rgba(125, 211, 199, 0.11);
-  box-shadow:
-    inset 0 1px 0 rgba(255, 255, 255, 0.12),
-    0 8px 18px rgba(0, 0, 0, 0.18);
-}
-
-:root[data-theme='dark'] .nav-random.is-randomizing {
-  color: var(--accent);
-  border-color: rgba(139, 224, 213, 0.32);
-  background: rgba(125, 211, 199, 0.14);
-  box-shadow:
-    inset 0 1px 0 rgba(255, 255, 255, 0.12),
-    0 10px 24px rgba(0, 0, 0, 0.28);
-}
-
-:root[data-theme='dark'] .random-post-transition {
-  background: rgba(3, 10, 12, 0.38);
-}
-
-:root[data-theme='dark'] .random-post-transition-card {
-  border-color: rgba(166, 184, 194, 0.22);
-  background:
-    linear-gradient(135deg, rgba(25, 35, 42, 0.9), rgba(10, 17, 22, 0.76)),
-    rgba(14, 22, 28, 0.84);
-  box-shadow:
-    inset 0 1px 0 rgba(255, 255, 255, 0.1),
-    0 28px 74px rgba(0, 0, 0, 0.42);
-}
-
-:root[data-theme='dark'] .random-post-transition-card::before,
-:root[data-theme='dark'] .random-post-transition-card::after {
-  border-color: rgba(139, 224, 213, 0.26);
-}
-
-:root[data-theme='dark'] .random-post-flying-card {
-  border-color: rgba(166, 184, 194, 0.2);
-  color: #edf7f5;
-  background:
-    linear-gradient(135deg, rgba(25, 35, 42, 0.88), rgba(10, 17, 22, 0.72)),
-    rgba(14, 22, 28, 0.78);
-  box-shadow:
-    inset 0 1px 0 rgba(255, 255, 255, 0.1),
-    0 22px 54px rgba(0, 0, 0, 0.34);
-}
-
-:root[data-theme='dark'] .control-console-backdrop {
-  background: rgba(3, 10, 12, 0.58);
-}
-
-:root[data-theme='dark'] .control-console-panel {
-  border-color: rgba(166, 184, 194, 0.2);
-  background:
-    radial-gradient(circle at 14% 0%, rgba(125, 211, 199, 0.08), transparent 34%),
-    linear-gradient(145deg, rgba(24, 34, 42, 0.9), rgba(10, 17, 22, 0.84)),
-    rgba(14, 22, 28, 0.84);
-  box-shadow:
-    inset 0 1px 0 rgba(255, 255, 255, 0.1),
-    0 28px 80px rgba(0, 0, 0, 0.46);
-}
-
-:root[data-theme='dark'] .control-console-head h2,
-:root[data-theme='dark'] .control-site-card strong,
-:root[data-theme='dark'] .control-console-info strong {
-  color: #edf7f5;
-}
-
-:root[data-theme='dark'] .control-site-card,
-:root[data-theme='dark'] .control-console-info section,
-:root[data-theme='dark'] .control-console-close {
-  border-color: rgba(125, 211, 199, 0.2);
-  background: rgba(125, 211, 199, 0.08);
-  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
-}
-
-:root[data-theme='dark'] .control-console-close:hover {
-  color: #081315;
-  background: var(--accent);
-}
-
-:root[data-theme='dark'] .custom-context-menu {
-  border-color: rgba(166, 184, 194, 0.2);
-  color: #e2ecef;
-  background:
-    linear-gradient(145deg, rgba(27, 39, 47, 0.9), rgba(10, 17, 22, 0.82)),
-    rgba(14, 22, 28, 0.84);
-  box-shadow:
-    inset 0 1px 0 rgba(255, 255, 255, 0.1),
-    0 18px 42px rgba(0, 0, 0, 0.42);
-}
-
-:root[data-theme='dark'] .context-menu-nav :where(a, button) {
-  border-color: rgba(166, 184, 194, 0.16);
-  color: #c7d4d9;
-  background: rgba(255, 255, 255, 0.08);
-  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
-}
-
-:root[data-theme='dark'] .context-menu-group {
-  border-top-color: rgba(166, 184, 194, 0.16);
-}
-
-:root[data-theme='dark'] .custom-context-menu :where(a, button):hover,
-:root[data-theme='dark'] .custom-context-menu :where(a, button):focus-visible {
-  color: var(--accent);
-  background: rgba(125, 211, 199, 0.1);
-}
-
-:root[data-theme='dark'] .custom-context-menu i {
-  color: #c1cdd2;
-}
-
-:root[data-theme='dark'] .context-menu-native-hint {
-  border-color: rgba(166, 184, 194, 0.2);
-  color: #e2ecef;
-  background:
-    linear-gradient(145deg, rgba(27, 39, 47, 0.9), rgba(10, 17, 22, 0.82)),
-    rgba(14, 22, 28, 0.84);
-  box-shadow:
-    inset 0 1px 0 rgba(255, 255, 255, 0.1),
-    0 12px 30px rgba(0, 0, 0, 0.32);
-}
-
-:root[data-theme='dark'] .context-menu-native-hint kbd {
-  border-color: rgba(166, 184, 194, 0.2);
-  color: var(--accent);
-  background: rgba(255, 255, 255, 0.08);
-  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.18);
-}
-
-.hero {
-  width: min(var(--wide-width), calc(100% - (var(--page-gutter) * 2)));
-  min-height: 360px;
-  margin: 0 auto;
-  display: grid;
-  align-items: center;
-}
-
-.compact-hero {
-  min-height: 260px;
-}
-
-.hero h1 {
-  margin: 0;
-  font-size: clamp(3rem, 8vw, 6.5rem);
-  line-height: 0.95;
-}
-
-.hero p {
-  max-width: 620px;
-  margin: 18px 0 0;
-  color: var(--muted);
-  font-size: 1.12rem;
-}
-
-.home-hero {
-  grid-template-columns: minmax(320px, 0.74fr) minmax(360px, 1fr);
-  gap: clamp(28px, 6vw, 84px);
-}
-
-.hero-copy {
-  min-width: 0;
-}
-
-.hero-talk {
-  align-self: center;
-  width: 100%;
-  max-width: 820px;
-  min-height: 190px;
-  overflow: hidden;
-  border: 1px solid rgba(255, 255, 255, 0.52);
-  border-radius: 8px;
-  padding: 18px 18px 16px;
-  background:
-    linear-gradient(135deg, rgba(255, 255, 255, 0.3), rgba(241, 250, 244, 0.16)),
-    rgba(255, 255, 255, 0.18);
-  box-shadow:
-    inset 0 1px 0 rgba(255, 255, 255, 0.58),
-    0 18px 46px rgba(44, 55, 63, 0.12);
-  backdrop-filter: blur(10px) saturate(135%);
-  -webkit-backdrop-filter: blur(10px) saturate(135%);
-}
-
-.hero-talk-head {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 16px;
-  margin-bottom: 12px;
-  color: var(--accent-strong);
-  font-size: 0.86rem;
-  font-weight: 800;
-  letter-spacing: 0.04em;
-  text-transform: uppercase;
-}
-
-.hero-talk-head a {
-  display: grid;
-  width: 34px;
-  height: 34px;
-  place-items: center;
-  border: 1px solid rgba(15, 118, 110, 0.16);
-  border-radius: 999px;
-  color: var(--accent);
-  background: rgba(236, 253, 245, 0.54);
-  transition:
-    color 0.2s ease,
-    background-color 0.2s ease,
-    transform 0.2s ease;
-}
-
-.hero-talk-head a:hover {
-  color: #fff;
-  background: #3eb8be;
-  transform: translateY(-1px);
-}
-
-.hero-talk .talk-list {
-  display: grid;
-  height: 120px;
-  margin: 0;
-  overflow: hidden;
-  padding: 0;
-  list-style: none;
-}
-
-.hero-talk .talk-list:empty::before {
-  content: "说说加载中...";
-  display: grid;
-  min-height: 58px;
-  align-items: center;
-  color: var(--muted);
-  font-size: 0.95rem;
-}
-
-.hero-talk .item {
-  display: flex;
-  min-height: 40px;
-  align-items: center;
-  gap: 10px;
-  border-top: 1px dashed rgba(104, 111, 120, 0.22);
-  padding: 9px 2px;
-  color: #40505a;
-  font-size: 0.96rem;
-  line-height: 1.55;
-}
-
-.hero-talk .item:first-child {
-  border-top: 0;
-}
-
-.hero-talk .item::before {
-  content: "";
-  width: 7px;
-  height: 7px;
-  flex: 0 0 auto;
-  border-radius: 999px;
-  background: #3eb8be;
-  box-shadow: 0 0 0 4px rgba(62, 184, 190, 0.14);
-}
-
-.hero-talk .item i {
-  color: var(--accent);
-}
-
-.eyebrow {
-  margin: 0 0 16px !important;
-  color: var(--accent-strong) !important;
-  font-size: 0.95rem !important;
-  font-weight: 700;
-}
-
-.content-wrap {
-  width: min(var(--content-width), calc(100% - (var(--page-gutter) * 2)));
-  margin: 0 auto 72px;
-}
-
-.content-wrap.narrow {
-  width: min(var(--narrow-width), calc(100% - (var(--page-gutter) * 2)));
-}
-
-.page-header-card {
-  position: relative;
-  overflow: hidden;
-  margin: 40px 0 26px;
-  border: 1px solid rgba(255, 255, 255, 0.58);
-  border-radius: 8px;
-  padding: clamp(26px, 5vw, 44px);
-  background:
-    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.78), transparent 36%),
-    linear-gradient(135deg, rgba(255, 255, 255, 0.58), rgba(238, 250, 243, 0.36)),
-    rgba(255, 253, 248, 0.72);
-  box-shadow:
-    inset 0 1px 0 rgba(255, 255, 255, 0.82),
-    0 18px 48px rgba(58, 51, 38, 0.12);
-  backdrop-filter: blur(18px) saturate(165%);
-  -webkit-backdrop-filter: blur(18px) saturate(165%);
-}
-
-.page-header-card::after {
-  content: "";
-  position: absolute;
-  top: 10px;
-  right: 18px;
-  left: 18px;
-  height: 1px;
-  border-radius: 999px;
-  background: rgba(255, 255, 255, 0.76);
-}
-
-.page-header-eyebrow {
-  position: relative;
-  z-index: 1;
-  margin: 0 0 8px;
-  color: var(--accent);
-  font-size: 0.86rem;
-  font-weight: 700;
-}
-
-.page-header-card h1,
-.content-wrap .page-header-card h1 {
-  position: relative;
-  z-index: 1;
-  margin: 0;
-  color: #20242a;
-  font-size: clamp(2rem, 5vw, 3.6rem);
-  line-height: 1.08;
-}
-
-.page-header-subtitle {
-  position: relative;
-  z-index: 1;
-  max-width: 620px;
-  margin: 12px 0 0;
-  color: var(--muted);
-  font-size: 1rem;
-}
-
-.page-with-card {
-  margin-bottom: 0;
-}
-
-.page-article {
-  margin-top: 0;
-}
-
-.post-layout {
-  width: min(var(--wide-width), calc(100% - (var(--page-gutter) * 2)));
-  margin: 40px auto 84px;
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) 320px;
-  align-items: start;
-  gap: 28px;
-}
-
-.post-layout .article {
-  width: 100%;
-  min-width: 0;
-  margin: 0;
-}
-
-.home-layout {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) 320px;
-  align-items: start;
-  gap: 24px;
-}
-
-.home-main {
-  min-width: 0;
-}
-
-.section-heading {
-  display: flex;
-  align-items: end;
-  justify-content: space-between;
-  gap: 20px;
-  margin-bottom: 18px;
-}
-
-.section-heading h2,
-.content-wrap h1 {
-  margin: 0;
-  font-size: 1.8rem;
-  line-height: 1.2;
-}
-
-.section-heading a {
-  color: var(--muted);
-}
-
-.post-list {
-  display: grid;
-  gap: 16px;
-}
-
-.post-card {
-  border: 1px solid var(--line);
-  border-radius: 8px;
-  padding: 22px;
-  background: rgba(255, 253, 248, 0.88);
-  box-shadow: var(--shadow);
-}
-
-.post-card h2 {
-  margin: 6px 0 8px;
-  font-size: 1.35rem;
-  line-height: 1.35;
-}
-
-.post-card p {
-  margin: 0;
-  color: var(--muted);
-}
-
-.home-sidebar {
-  align-self: stretch;
-  display: grid;
-  align-content: start;
-  gap: 20px;
-}
-
-.sticky-sidebar {
-  position: sticky;
-  top: 84px;
-  display: grid;
-  align-content: start;
-  gap: 20px;
-}
-
-.sidebar-card {
-  overflow: hidden;
-  border: 1px solid rgba(222, 216, 204, 0.72);
-  border-radius: 8px;
-  padding: 18px;
-  background:
-    linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(242, 251, 237, 0.78)),
-    rgba(255, 253, 248, 0.76);
-  box-shadow: var(--shadow);
-  backdrop-filter: blur(12px);
-}
-
-.sidebar-card h2 {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  margin: 0 0 14px;
-  color: #4d5258;
-  font-size: 1.08rem;
-  font-weight: 700;
-}
-
-.sidebar-card h2 em {
-  margin-left: auto;
-  min-width: 28px;
-  border-radius: 999px;
-  padding: 2px 8px;
-  color: #6d9cc2;
-  font-size: 0.78rem;
-  font-style: normal;
-  text-align: center;
-  background: rgba(102, 200, 245, 0.18);
-}
-
-.profile-card {
-  text-align: center;
-}
-
-.profile-avatar {
-  width: 112px;
-  height: 112px;
-  margin: 0 auto 14px;
-  border-radius: 999px;
-  object-fit: cover;
-  box-shadow: 0 12px 30px rgba(15, 118, 110, 0.18);
-}
-
-.profile-name {
-  margin-bottom: 16px;
-  font-family: Georgia, "Times New Roman", serif;
-  color: #585b5e;
-  font-size: 1.9rem;
-  letter-spacing: 0;
-}
-
-.profile-stats {
-  display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: 10px;
-  margin-bottom: 18px;
-}
-
-.profile-stats a {
-  display: grid;
-  gap: 3px;
-  color: var(--muted);
-}
-
-.profile-stats strong {
-  color: #2f4358;
-  font-size: 1.22rem;
-  font-weight: 600;
-}
-
-.profile-stats a:first-child strong,
-.notice-card strong,
-.schedule-left span,
-.calendar-summary span {
-  color: #66c8f5;
-}
-
-.follow-button {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 10px;
-  min-height: 44px;
-  border-radius: 8px;
-  color: #fff;
-  font-weight: 700;
-  background: #3eb8be;
-  transition:
-    transform 0.2s ease,
-    background-color 0.2s ease;
-}
-
-.follow-button:hover {
-  color: #fff;
-  transform: translateY(-1px);
-  background: #279fa5;
-}
-
-.github-mark {
-  font-size: 0.9rem;
-}
-
-.profile-links {
-  display: flex;
-  justify-content: center;
-  gap: 18px;
-  margin-top: 16px;
-  color: #3f5368;
-  font-weight: 700;
-}
-
-.notice-card p {
-  margin: 0.65em 0;
-  color: #596068;
-  line-height: 1.9;
-}
-
-.site-info-card h2 i {
-  width: 18px;
-  color: #3eb8be;
-  font-size: 0.92rem;
-}
-
-.site-info-list {
-  display: grid;
-  margin: 0;
-}
-
-.site-info-list div {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 18px;
-  border-top: 1px dashed rgba(104, 111, 120, 0.2);
-  padding: 9px 0;
-}
-
-.site-info-list div:first-child {
-  border-top: 0;
-  padding-top: 0;
-}
-
-.site-info-list div:last-child {
-  padding-bottom: 0;
-}
-
-.site-info-list dt,
-.site-info-list dd {
-  margin: 0;
-}
-
-.site-info-list dt {
-  color: #68717a;
-  font-size: 0.92rem;
-  font-weight: 700;
-}
-
-.site-info-list dd {
-  min-width: 0;
-  color: #1aa8f6;
-  font-size: 0.98rem;
-  font-weight: 800;
-  line-height: 1.3;
-  text-align: right;
-  overflow-wrap: anywhere;
-}
-
-#welcome-info,
-#welcome-ip-location-info {
-  margin: 0.65em 0;
-  overflow-wrap: anywhere;
-  color: #596068;
-  line-height: 1.9;
-  --kouseki-welcome-color: #66c8f5;
-  --kouseki-ip-color: #66c8f5;
-  --kouseki-gl-size: 16px;
-}
-
-#welcome-info b span.ip-mask,
-#welcome-ip-location-info b span.ip-mask {
-  display: inline-block;
-  filter: blur(6px);
-  transition: filter 0.3s ease;
-  cursor: pointer;
-  user-select: none;
-}
-
-#welcome-info b span.ip-mask:hover,
-#welcome-info b span.ip-mask:active,
-#welcome-ip-location-info b span.ip-mask:hover,
-#welcome-ip-location-info b span.ip-mask:active {
-  filter: blur(0);
-}
-
-.calendar-widget,
-.schedule-widget {
-  display: grid;
-  grid-template-columns: 0.9fr 1.1fr;
-  gap: 16px;
-  align-items: center;
-}
-
-.calendar-summary,
-.schedule-left {
-  display: grid;
-  gap: 4px;
-  text-align: center;
-}
-
-.calendar-summary strong,
-.schedule-left strong {
-  color: #4b5560;
-  font-size: 0.9rem;
-}
-
-.calendar-summary span,
-.schedule-left span {
-  font-size: 2.25rem;
-  line-height: 1.1;
-  font-weight: 800;
-}
-
-.calendar-summary small,
-.schedule-left small {
-  color: var(--muted);
-  font-size: 0.78rem;
-}
-
-.calendar-grid {
-  display: grid;
-  grid-template-columns: repeat(7, minmax(0, 1fr));
-  gap: 4px 7px;
-  color: #8aa6be;
-  text-align: center;
-}
-
-.calendar-grid span {
-  display: grid;
-  place-items: center;
-  min-height: 22px;
-  padding: 0;
-  border: 1px solid transparent;
-  border-radius: 999px;
-  line-height: 1;
-}
-
-.calendar-grid b {
-  font-size: 0.78rem;
-  font-weight: 700;
-}
-
-.calendar-grid .muted {
-  opacity: 0.45;
-}
-
-.calendar-grid .today {
-  color: #fff;
-  background: #66c8f5;
-  border-color: #66c8f5;
-}
-
-.schedule-bars {
-  display: grid;
-  gap: 8px;
-}
-
-.schedule-row {
-  display: grid;
-  grid-template-columns: 34px minmax(52px, 1fr) 74px;
-  align-items: center;
-  gap: 8px;
-  color: var(--muted);
-  font-size: 0.78rem;
-}
-
-.schedule-row progress {
-  width: 100%;
-  height: 10px;
-  overflow: hidden;
-  border: 0;
-  border-radius: 999px;
-  background: rgba(102, 200, 245, 0.16);
-}
-
-.schedule-row progress::-webkit-progress-bar {
-  border-radius: 999px;
-  background: rgba(102, 200, 245, 0.16);
-}
-
-.schedule-row progress::-webkit-progress-value {
-  border-radius: 999px;
-  background: linear-gradient(90deg, #5ec7f4, #42d4c4);
-}
-
-.schedule-row progress::-moz-progress-bar {
-  border-radius: 999px;
-  background: linear-gradient(90deg, #5ec7f4, #42d4c4);
-}
-
-.schedule-row em {
-  min-width: 0;
-  font-style: normal;
-  text-align: right;
-  white-space: nowrap;
-}
-
-.sidebar-posts {
-  display: grid;
-}
-
-.sidebar-post {
-  display: grid;
-  grid-template-columns: 70px minmax(0, 1fr);
-  gap: 12px;
-  align-items: center;
-  padding: 12px 0;
-  border-top: 1px dashed rgba(104, 111, 120, 0.28);
-}
-
-.sidebar-post:first-child {
-  border-top: 0;
-  padding-top: 0;
-}
-
-.sidebar-post img,
-.post-thumb-fallback {
-  width: 70px;
-  aspect-ratio: 1;
-  border-radius: 6px;
-  object-fit: cover;
-  background: linear-gradient(135deg, rgba(62, 184, 190, 0.32), rgba(102, 200, 245, 0.34));
-}
-
-.sidebar-post strong {
-  display: -webkit-box;
-  overflow: hidden;
-  color: #4d5258;
-  font-size: 0.94rem;
-  font-weight: 500;
-  line-height: 1.45;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 2;
-}
-
-.sidebar-post time {
-  display: block;
-  margin-top: 3px;
-}
-
-.article-sidebar {
-  align-self: stretch;
-  display: grid;
-  align-content: start;
-  gap: 20px;
-}
-
-.article-sticky-sidebar {
-  position: sticky;
-  top: 90px;
-  display: grid;
-  max-height: calc(100vh - 110px);
-  align-content: start;
-  gap: 20px;
-  overflow-y: auto;
-  scrollbar-width: thin;
-}
-
-.article-author-card {
-  text-align: center;
-  background:
-    radial-gradient(circle at 50% 0%, rgba(102, 200, 245, 0.32), transparent 42%),
-    linear-gradient(135deg, rgba(255, 255, 255, 0.58), rgba(214, 238, 255, 0.3)),
-    rgba(255, 253, 248, 0.62);
-}
-
-.article-author-card .profile-avatar {
-  width: 88px;
-  height: 88px;
-}
-
-.article-author-card .profile-name {
-  margin-bottom: 8px;
-  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-  font-size: 1.45rem;
-  font-weight: 800;
-}
-
-.article-author-meta {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  gap: 8px;
-  color: var(--muted);
-  font-size: 0.86rem;
-}
-
-.article-author-meta a {
-  color: var(--accent);
-}
-
-.toc-list,
-.article-tag-list,
-.same-category-list {
-  display: grid;
-  gap: 6px;
-}
-
-.toc-list {
-  position: relative;
-  padding-top: 10px;
-}
-
-.toc-list::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  right: 0;
-  left: 0;
-  height: 5px;
-  border-radius: 999px;
-  background-image: radial-gradient(circle, rgba(102, 200, 245, 0.72) 2px, transparent 2px);
-  background-size: 14px 5px;
-}
-
-.toc-list a,
-.article-tag-list a,
-.same-category-list a {
-  border-radius: 8px;
-  padding: 9px 11px;
-  color: #50637a;
-  line-height: 1.45;
-  transition:
-    color 0.2s ease,
-    background-color 0.2s ease,
-    transform 0.2s ease;
-}
-
-.toc-list a:hover,
-.article-tag-list a:hover,
-.same-category-list a:hover {
-  color: #1f618d;
-  background: rgba(102, 200, 245, 0.16);
-  transform: translateX(2px);
-}
-
-.toc-tree {
-  gap: 8px;
-}
-
-.toc-group {
-  position: relative;
-}
-
-.toc-link {
-  position: relative;
-  display: flex;
-  align-items: flex-start;
-  gap: 9px;
-  text-decoration: none;
-}
-
-.toc-link-main {
-  color: #3e5664 !important;
-  font-weight: 800;
-}
-
-.toc-marker {
-  flex: 0 0 auto;
-  width: 8px;
-  height: 8px;
-  margin-top: 0.52em;
-  border-radius: 999px;
-  background: rgba(102, 200, 245, 0.52);
-  box-shadow: 0 0 0 4px rgba(102, 200, 245, 0.12);
-}
-
-.toc-children {
-  position: relative;
-  display: grid;
-  gap: 4px;
-  max-height: 0;
-  margin-left: 14px;
-  overflow: hidden;
-  border-left: 1px solid rgba(102, 200, 245, 0.24);
-  padding-left: 10px;
-  opacity: 0;
-  transition:
-    max-height 0.28s ease,
-    opacity 0.22s ease,
-    margin-top 0.22s ease;
-}
-
-.toc-group.is-open .toc-children {
-  max-height: 520px;
-  margin-top: 4px;
-  opacity: 1;
-}
-
-.toc-link-child {
-  color: #657384 !important;
-  font-size: 0.9rem;
-  font-weight: 600;
-}
-
-.toc-link.is-active {
-  color: #0f766e !important;
-  background: rgba(102, 200, 245, 0.16);
-  transform: translateX(2px);
-}
-
-.toc-group.is-open .toc-link-main .toc-marker,
-.toc-link.is-active .toc-marker {
-  background: #3eb8be;
-  box-shadow: 0 0 0 4px rgba(62, 184, 190, 0.16);
-}
-
-.article-tag-list {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-}
-
-.article-tag-list a {
-  display: inline-flex;
-  align-items: center;
-  min-height: 34px;
-  border: 1px solid rgba(15, 118, 110, 0.18);
-  padding: 6px 11px;
-  color: var(--accent);
-  font-size: 0.88rem;
-  font-weight: 700;
-  background: rgba(236, 253, 245, 0.66);
-}
-
-.toc-depth-2 {
-  padding-left: 22px !important;
-}
-
-.toc-depth-3 {
-  padding-left: 24px !important;
-  font-size: 0.9rem;
-}
-
-.same-category-list a {
-  display: grid;
-  gap: 3px;
-  border-top: 1px dashed rgba(104, 111, 120, 0.22);
-}
-
-.same-category-list a:first-child {
-  border-top: 0;
-}
-
-.same-category-list strong {
-  display: -webkit-box;
-  overflow: hidden;
-  font-size: 0.94rem;
-  font-weight: 600;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 2;
-}
-
-.sidebar-empty {
-  margin: 0;
-  color: var(--muted);
-  font-size: 0.92rem;
-}
-
-time {
-  color: var(--muted);
-  font-size: 0.9rem;
-}
-
-.meta-list {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  margin-top: 14px;
-}
-
-.meta-list a {
-  border: 1px solid rgba(15, 118, 110, 0.28);
-  border-radius: 999px;
-  padding: 2px 10px;
-  color: var(--accent);
-  font-size: 0.86rem;
-  background: rgba(236, 253, 245, 0.7);
-}
-
-.article {
-  --article-padding: clamp(24px, 5vw, 48px);
-  width: min(var(--article-width), calc(100% - (var(--page-gutter) * 2)));
-  min-width: 0;
-  margin: 64px auto 84px;
-  border: 1px solid rgba(255, 255, 255, 0.58);
-  border-radius: 8px;
-  padding: var(--article-padding);
-  background:
-    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.72), transparent 34%),
-    linear-gradient(145deg, rgba(255, 255, 255, 0.62), rgba(226, 248, 241, 0.35)),
-    rgba(255, 253, 248, 0.68);
-  box-shadow:
-    inset 0 1px 0 rgba(255, 255, 255, 0.82),
-    0 24px 64px rgba(44, 55, 63, 0.16);
-  backdrop-filter: blur(18px) saturate(165%);
-  -webkit-backdrop-filter: blur(18px) saturate(165%);
-}
-
-.prose {
-  min-width: 0;
-}
-
-.article-header {
-  position: relative;
-  margin-bottom: 28px;
-  padding-bottom: 22px;
-  border-bottom: 1px solid var(--line);
-}
-
-.article-header-content {
-  position: relative;
-  z-index: 1;
-}
-
-.article-header h1 {
-  margin: 8px 0 0;
-  font-size: clamp(2rem, 6vw, 3.3rem);
-  line-height: 1.14;
-}
-
-.article-header-cover {
-  display: grid;
-  align-items: end;
-  min-height: clamp(320px, 40vw, 460px);
-  margin: calc(var(--article-padding) * -1) calc(var(--article-padding) * -1) 34px;
-  overflow: hidden;
-  border: 0;
-  border-radius: 8px 8px 0 0;
-  padding: clamp(86px, 13vw, 150px) var(--article-padding) clamp(28px, 6vw, 52px);
-  color: #fff;
-  background: #5d7f78;
-}
-
-.article-header-cover::before,
-.article-header-cover::after {
-  content: "";
-  position: absolute;
-  inset: 0;
-  pointer-events: none;
-}
-
-.article-header-cover::before {
-  z-index: 1;
-  background:
-    linear-gradient(180deg, rgba(23, 55, 48, 0.42), rgba(23, 55, 48, 0.18) 38%, rgba(12, 31, 28, 0.68)),
-    linear-gradient(90deg, rgba(13, 55, 49, 0.52), rgba(19, 90, 79, 0.14) 54%, rgba(13, 55, 49, 0.36));
-}
-
-.article-header-cover::after {
-  z-index: 2;
-  box-shadow:
-    inset 0 1px 0 rgba(255, 255, 255, 0.2),
-    inset 0 -90px 110px rgba(10, 28, 26, 0.34);
-}
-
-.article-header-cover-img {
-  position: absolute;
-  inset: 0;
-  display: block;
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  filter: saturate(0.9) contrast(0.94);
-}
-
-.article-header-cover .article-header-content {
-  z-index: 3;
-  max-width: 900px;
-  text-shadow: 0 3px 14px rgba(0, 0, 0, 0.48);
-}
-
-.article-header-cover time {
-  display: none;
-}
-
-.article-header-cover h1 {
-  max-width: 920px;
-  margin: 0;
-  color: #fff;
-  font-family: Georgia, "Times New Roman", "Microsoft YaHei", serif;
-  font-size: clamp(2.4rem, 6vw, 4.2rem);
-  font-weight: 700;
-  line-height: 1.12;
-}
-
-.article-hero-meta {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 9px 12px;
-  align-items: center;
-  margin-top: 18px;
-  color: rgba(255, 255, 255, 0.92);
-  font-size: 0.98rem;
-  font-weight: 700;
-}
-
-.article-hero-meta span,
-.article-hero-meta a {
-  display: inline-flex;
-  align-items: center;
-}
-
-.article-hero-meta span:not(:first-child)::before,
-.article-hero-meta a::before {
-  content: "|";
-  margin-right: 12px;
-  color: rgba(255, 255, 255, 0.62);
-  font-weight: 400;
-}
-
-.article-hero-meta a:hover {
-  color: #d8fff5;
-}
-
-.article-summary-card {
-  position: relative;
-  margin: 0 0 30px;
-  overflow: hidden;
-  border: 1px solid rgba(133, 162, 153, 0.34);
-  border-radius: 8px;
-  padding: 34px 20px 16px;
-  background:
-    radial-gradient(circle at 12% 0%, rgba(255, 255, 255, 0.8), transparent 32%),
-    linear-gradient(135deg, rgba(250, 252, 247, 0.88), rgba(228, 240, 234, 0.78)),
-    rgba(245, 250, 246, 0.78);
-  box-shadow:
-    inset 0 1px 0 rgba(255, 255, 255, 0.9),
-    0 14px 34px rgba(58, 51, 38, 0.1);
-  backdrop-filter: blur(18px) saturate(145%);
-  -webkit-backdrop-filter: blur(18px) saturate(145%);
-}
-
-.article-summary-card::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  right: 0;
-  left: 0;
-  height: 25px;
-  border-bottom: 1px solid rgba(133, 162, 153, 0.18);
-  background: rgba(255, 255, 255, 0.28);
-  pointer-events: none;
-}
-
-.article-summary-dots {
-  position: absolute;
-  top: 14px;
-  left: 16px;
-  z-index: 1;
-  display: flex;
-  gap: 8px;
-}
-
-.article-summary-dots span {
-  width: 10px;
-  height: 10px;
-  border-radius: 999px;
-  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.12);
-}
-
-.article-summary-dots span:nth-child(1) {
-  background: #ff6b63;
-}
-
-.article-summary-dots span:nth-child(2) {
-  background: #ffc247;
-}
-
-.article-summary-dots span:nth-child(3) {
-  background: #4ecb71;
-}
-
-.article-summary-content {
-  position: relative;
-  z-index: 1;
-  margin: 0;
-  color: #59615f;
-  font-family: "LXGW WenKai", "霞鹜文楷", "Microsoft YaHei", ui-sans-serif, system-ui, sans-serif;
-  font-size: 1rem;
-  line-height: 1.9;
-}
-
-.article-summary-caret {
-  display: inline-block;
-  width: 2px;
-  height: 1.1em;
-  margin-left: 3px;
-  vertical-align: -0.16em;
-  background: var(--accent);
-  animation: summary-caret-blink 0.9s steps(1) infinite;
-}
-
-.article-summary-footer {
-  position: relative;
-  z-index: 1;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 16px;
-  margin-top: 24px;
-  color: rgba(85, 95, 94, 0.56);
-  font-family: "JetBrains Mono", Consolas, "Microsoft YaHei", monospace;
-  font-size: 0.95rem;
-  font-weight: 900;
-  letter-spacing: 0;
-}
-
-.article-summary-brand {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.article-summary-brand span {
-  color: rgba(15, 118, 110, 0.56);
-  font-size: 1.05rem;
-}
-
-.article-summary-model {
-  white-space: nowrap;
-}
-
-@keyframes summary-caret-blink {
-  50% {
-    opacity: 0;
-  }
-}
-
-.prose :where(h2, h3, h4) {
-  scroll-margin-top: 110px;
-  margin-top: 2em;
-  line-height: 1.35;
-}
-
-.prose :where(p, ul, ol, blockquote, pre) {
-  margin: 1.1em 0;
-}
-
-.prose a {
-  color: var(--accent);
-  text-decoration: underline;
-  text-underline-offset: 3px;
-}
-
-.prose .hexo-link-card {
-  display: grid;
-  grid-template-columns: 46px minmax(0, 1fr);
-  gap: 14px;
-  align-items: center;
-  margin: 1.2em 0;
-  border: 1px solid rgba(15, 118, 110, 0.2);
-  border-radius: 8px;
-  padding: 14px 16px;
-  color: #27313a;
-  text-decoration: none;
-  background:
-    linear-gradient(135deg, rgba(255, 255, 255, 0.78), rgba(236, 253, 245, 0.62)),
-    rgba(255, 253, 248, 0.88);
-  box-shadow: 0 12px 28px rgba(44, 55, 63, 0.1);
-  transition:
-    border-color 0.2s ease,
-    box-shadow 0.2s ease,
-    transform 0.2s ease;
-}
-
-.prose .hexo-link-card:hover {
-  color: #27313a;
-  border-color: rgba(15, 118, 110, 0.38);
-  box-shadow: 0 16px 34px rgba(15, 118, 110, 0.14);
-  transform: translateY(-1px);
-}
-
-.hexo-link-card__icon {
-  display: grid;
-  place-items: center;
-  width: 46px;
-  height: 46px;
-  border-radius: 8px;
-  color: #fff;
-  font-size: 1.05rem;
-  font-weight: 800;
-  background: #3eb8be;
-}
-
-.hexo-link-card__body {
-  display: grid;
-  min-width: 0;
-  gap: 2px;
-}
-
-.hexo-link-card__body strong,
-.hexo-link-card__body span {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.hexo-link-card__body strong {
-  font-size: 1rem;
-  line-height: 1.35;
-}
-
-.hexo-link-card__body span {
-  color: var(--muted);
-  font-size: 0.88rem;
-}
-
-.prose img {
-  display: block;
-  max-width: 100%;
-  height: auto;
-  margin: 1.4em auto;
-  border-radius: 8px;
-}
-
-.prose .fancybox {
-  display: block;
-  width: fit-content;
-  max-width: 100%;
-  margin: 1.4em auto;
-  border-radius: 8px;
-  text-decoration: none;
-}
-
-.prose .fancybox img {
-  margin: 0 auto;
-  box-shadow: 0 12px 32px rgba(44, 55, 63, 0.12);
-  transition:
-    box-shadow 0.2s ease,
-    transform 0.2s ease;
-}
-
-.prose .fancybox:hover img {
-  box-shadow: 0 16px 38px rgba(15, 118, 110, 0.16);
-  transform: translateY(-1px);
-}
-
-.prose pre {
-  max-width: 100%;
-  margin: 0;
-  overflow-x: auto;
-  padding: 18px;
-  overscroll-behavior-inline: contain;
-  scrollbar-color: rgba(102, 200, 245, 0.58) rgba(255, 255, 255, 0.08);
-  scrollbar-width: thin;
-}
-
-.prose code {
-  font-family: "JetBrains Mono", Consolas, monospace;
-}
-
-.prose :not(pre) > code {
-  border: 1px solid rgba(15, 118, 110, 0.14);
-  border-radius: 6px;
-  padding: 0.12em 0.38em;
-  color: #0f766e;
-  font-size: 0.92em;
-  line-height: 1.4;
-  background: rgba(236, 253, 245, 0.78);
-  overflow-wrap: break-word;
-}
-
-.butterfly-note {
-  display: grid;
-  grid-template-columns: auto minmax(0, 1fr);
-  gap: 12px;
-  margin: 1.2em 0;
-  border: 1px solid rgba(15, 118, 110, 0.18);
-  border-left-width: 4px;
-  border-radius: 8px;
-  padding: 14px 16px;
-  color: #32413f;
-  background: rgba(236, 253, 245, 0.58);
-}
-
-.article-outdated-note[hidden] {
-  display: none;
-}
-
-.butterfly-note > i {
-  margin-top: 0.28em;
-  color: var(--butterfly-note-color, var(--accent));
-}
-
-.butterfly-note.is-no-icon {
-  grid-template-columns: minmax(0, 1fr);
-}
-
-.butterfly-note__content > :first-child {
-  margin-top: 0;
-}
-
-.butterfly-note__content > :last-child {
-  margin-bottom: 0;
-}
-
-.butterfly-note--default,
-.butterfly-label--default,
-.butterfly-btn--default {
-  --butterfly-note-color: #68717a;
-  --butterfly-color: #68717a;
-}
-
-.butterfly-note--primary,
-.butterfly-note--blue,
-.butterfly-label--blue,
-.butterfly-btn--blue {
-  --butterfly-note-color: #2f80ed;
-  --butterfly-color: #2f80ed;
-}
-
-.butterfly-note--success,
-.butterfly-note--green,
-.butterfly-label--green,
-.butterfly-btn--green {
-  --butterfly-note-color: #2f9e44;
-  --butterfly-color: #2f9e44;
-}
-
-.butterfly-note--info {
-  --butterfly-note-color: #0ea5e9;
-  --butterfly-color: #0ea5e9;
-}
-
-.butterfly-note--warning,
-.butterfly-note--orange,
-.butterfly-label--orange,
-.butterfly-btn--orange {
-  --butterfly-note-color: #f59f00;
-  --butterfly-color: #f59f00;
-}
-
-.butterfly-note--danger,
-.butterfly-note--red,
-.butterfly-label--red,
-.butterfly-btn--red {
-  --butterfly-note-color: #e03131;
-  --butterfly-color: #e03131;
-}
-
-.butterfly-note--pink,
-.butterfly-label--pink,
-.butterfly-btn--pink {
-  --butterfly-note-color: #d63384;
-  --butterfly-color: #d63384;
-}
-
-.butterfly-note--purple,
-.butterfly-label--purple,
-.butterfly-btn--purple {
-  --butterfly-note-color: #7950f2;
-  --butterfly-color: #7950f2;
-}
-
-.butterfly-note {
-  border-left-color: var(--butterfly-note-color, var(--accent));
-}
-
-.butterfly-note--modern {
-  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.62);
-}
-
-.butterfly-note--flat {
-  border-color: transparent;
-  border-left-color: var(--butterfly-note-color, var(--accent));
-  background: color-mix(in srgb, var(--butterfly-note-color, #0f766e) 13%, transparent);
-}
-
-.butterfly-note--disabled {
-  display: block;
-  border: 0;
-  padding: 0;
-  background: transparent;
-}
-
-.butterfly-label {
-  display: inline-flex;
-  align-items: center;
-  min-height: 1.7em;
-  border-radius: 6px;
-  padding: 0.05em 0.48em;
-  color: #fff;
-  font-size: 0.88em;
-  font-weight: 700;
-  line-height: 1.35;
-  vertical-align: 0.08em;
-  background: var(--butterfly-color, #68717a);
-}
-
-.butterfly-inline-img {
-  display: inline-block !important;
-  width: auto;
-  max-width: min(100%, 18rem);
-  margin: 0 0.18em !important;
-  vertical-align: middle;
-}
-
-.prose .butterfly-btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 0.45em;
-  min-height: 34px;
-  border: 1px solid var(--butterfly-color, var(--accent));
-  border-radius: 8px;
-  padding: 0.4em 0.78em;
-  color: #fff;
-  font-weight: 800;
-  line-height: 1.2;
-  text-decoration: none;
-  background: var(--butterfly-color, var(--accent));
-  transition:
-    color 0.2s ease,
-    background-color 0.2s ease,
-    box-shadow 0.2s ease,
-    transform 0.2s ease;
-}
-
-.prose .butterfly-btn:hover {
-  color: #fff;
-  box-shadow: 0 10px 22px color-mix(in srgb, var(--butterfly-color, #0f766e) 24%, transparent);
-  transform: translateY(-1px);
-}
-
-.prose .butterfly-btn.is-outline {
-  color: var(--butterfly-color, var(--accent));
-  background: transparent;
-}
-
-.prose .butterfly-btn.is-outline:hover {
-  color: #fff;
-  background: var(--butterfly-color, var(--accent));
-}
-
-.prose .butterfly-btn.is-larger {
-  min-height: 40px;
-  padding: 0.56em 1em;
-  font-size: 1.05em;
-}
-
-.prose .butterfly-btn.is-block {
-  display: flex;
-  width: fit-content;
-  margin: 0.9em 0;
-}
-
-.prose .butterfly-btn.is-center {
-  margin-right: auto;
-  margin-left: auto;
-}
-
-.prose .butterfly-btn.is-right {
-  margin-left: auto;
-}
-
-.butterfly-hide-inline {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.45em;
-  vertical-align: baseline;
-}
-
-.butterfly-hide-toggle,
-.butterfly-hide-block > summary {
-  border: 0;
-  border-radius: 7px;
-  padding: 0.25em 0.62em;
-  color: var(--hide-color, #fff);
-  font: inherit;
-  font-weight: 800;
-  line-height: 1.3;
-  background: var(--hide-bg, #ff7242);
-  cursor: pointer;
-}
-
-.butterfly-hide-content {
-  display: none;
-  color: var(--text);
-}
-
-.butterfly-hide-inline.is-open .butterfly-hide-content {
-  display: inline;
-}
-
-.butterfly-hide-block {
-  margin: 1.2em 0;
-}
-
-.butterfly-hide-block > summary {
-  display: inline-flex;
-  list-style: none;
-}
-
-.butterfly-hide-block > summary::-webkit-details-marker {
-  display: none;
-}
-
-.butterfly-hide-block__content {
-  margin-top: 0.9em;
-  border-left: 3px solid rgba(15, 118, 110, 0.2);
-  padding-left: 1em;
-}
-
-.prose .code-block {
-  position: relative;
-  width: 100%;
-  max-width: 100%;
-  min-width: 0;
-  margin: 1.25em 0;
-  overflow: hidden;
-  border: 1px solid rgba(15, 118, 110, 0.16);
-  border-radius: 8px;
-  background: rgba(22, 31, 36, 0.96);
-  box-shadow: 0 14px 32px rgba(44, 55, 63, 0.12);
-}
-
-.prose .code-block pre::-webkit-scrollbar,
-.table-scroll::-webkit-scrollbar {
-  height: 10px;
-}
-
-.prose .code-block pre::-webkit-scrollbar-track,
-.table-scroll::-webkit-scrollbar-track {
-  border-radius: 999px;
-  background: rgba(255, 255, 255, 0.08);
-}
-
-.prose .code-block pre::-webkit-scrollbar-thumb,
-.table-scroll::-webkit-scrollbar-thumb {
-  border: 2px solid rgba(255, 255, 255, 0.08);
-  border-radius: 999px;
-  background:
-    linear-gradient(90deg, rgba(102, 200, 245, 0.72), rgba(62, 184, 190, 0.76)),
-    rgba(62, 184, 190, 0.72);
-}
-
-.prose .code-block pre::-webkit-scrollbar-thumb:hover,
-.table-scroll::-webkit-scrollbar-thumb:hover {
-  background:
-    linear-gradient(90deg, rgba(102, 200, 245, 0.9), rgba(62, 184, 190, 0.94)),
-    rgba(62, 184, 190, 0.9);
-}
-
-.prose .code-block pre {
-  max-width: 100%;
-  max-height: none;
-  padding: 44px 18px 18px;
-  background: transparent;
-  white-space: normal !important;
-  word-wrap: normal !important;
-  transition: max-height 0.24s ease;
-}
-
-.prose .code-block pre code {
-  display: block;
-  min-width: max-content;
-}
-
-.prose .code-block.is-collapsible:not(.is-expanded) pre {
-  max-height: 15.5em;
-}
-
-.prose .code-block.is-collapsible:not(.is-expanded)::after {
-  content: "";
-  position: absolute;
-  z-index: 1;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  height: 58px;
-  background: linear-gradient(rgba(22, 31, 36, 0), rgba(22, 31, 36, 0.98));
-  pointer-events: none;
-}
-
-.code-block-expand-cue {
-  appearance: none;
-  -webkit-appearance: none;
-  position: absolute;
-  z-index: 3;
-  right: 50%;
-  bottom: 10px;
-  display: none;
-  width: 36px;
-  height: 28px;
-  align-items: center;
-  justify-content: center;
-  border: 1px solid rgba(255, 255, 255, 0.18);
-  border-radius: 999px;
-  padding: 0;
-  background: rgba(22, 31, 36, 0.72);
-  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
-  cursor: pointer;
-  transform: translateX(50%);
-  backdrop-filter: blur(8px);
-  -webkit-backdrop-filter: blur(8px);
-  transition:
-    border-color 0.2s ease,
-    background-color 0.2s ease,
-    transform 0.2s ease;
-}
-
-.code-block-expand-cue span {
-  width: 10px;
-  height: 10px;
-  border-right: 2px solid rgba(255, 255, 255, 0.9);
-  border-bottom: 2px solid rgba(255, 255, 255, 0.9);
-  transform: translateY(-2px) rotate(45deg);
-}
-
-.code-block-expand-cue:hover,
-.code-block-expand-cue:focus-visible {
-  border-color: rgba(255, 255, 255, 0.36);
-  background: rgba(62, 184, 190, 0.82);
-  transform: translateX(50%) translateY(-1px);
-}
-
-.prose .code-block.is-collapsible:not(.is-expanded) .code-block-expand-cue {
-  display: inline-flex;
-}
-
-.prose .code-block code {
-  color: #e8edf2;
-  line-height: 1.42;
-}
-
-.code-block-header {
-  position: absolute;
-  top: 0;
-  right: 0;
-  left: 0;
-  z-index: 2;
-  display: flex;
-  min-height: 42px;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
-  padding: 8px 10px 8px 16px;
-  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02));
-  pointer-events: none;
-}
-
-.code-block-language {
-  overflow: hidden;
-  color: rgba(232, 237, 242, 0.72);
-  font-family: "JetBrains Mono", Consolas, monospace;
-  font-size: 0.8rem;
-  font-weight: 800;
-  letter-spacing: 0;
-  text-overflow: ellipsis;
-  text-transform: uppercase;
-  white-space: nowrap;
-}
-
-.code-block-toolbar {
-  display: flex;
-  flex: 0 0 auto;
-  gap: 8px;
-  pointer-events: auto;
-}
-
-.prose .code-block.has-line-numbers code > .line {
-  position: relative;
-  display: block;
-  min-height: 1.42em;
-  padding-left: calc(var(--line-number-width, 3ch) + 16px);
-  white-space: pre;
-}
-
-.prose .code-block.has-line-numbers code > .line::before {
-  content: attr(data-line);
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: var(--line-number-width, 3ch);
-  color: rgba(232, 237, 242, 0.34);
-  font-variant-numeric: tabular-nums;
-  text-align: right;
-  user-select: none;
-}
-
-.code-block-copy,
-.code-block-toggle {
-  appearance: none;
-  -webkit-appearance: none;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 30px;
-  border: 1px solid rgba(255, 255, 255, 0.18);
-  border-radius: 8px;
-  padding: 5px 9px;
-  color: rgba(255, 255, 255, 0.86);
-  font: 700 0.78rem/1 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-  background: rgba(255, 255, 255, 0.1);
-  cursor: pointer;
-  backdrop-filter: blur(8px);
-  -webkit-backdrop-filter: blur(8px);
-  transition:
-    color 0.2s ease,
-    border-color 0.2s ease,
-    background-color 0.2s ease,
-    transform 0.2s ease;
-}
-
-.code-block-copy:hover,
-.code-block-toggle:hover {
-  color: #fff;
-  border-color: rgba(255, 255, 255, 0.34);
-  background: rgba(62, 184, 190, 0.72);
-  transform: translateY(-1px);
-}
-
-.code-block-toggle {
-  display: none;
-}
-
-.code-block.is-collapsible .code-block-toggle {
-  display: inline-flex;
-}
-
-.table-scroll {
-  max-width: 100%;
-  margin: 1.35em 0;
-  overflow-x: auto;
-  border: 1px solid rgba(15, 118, 110, 0.14);
-  border-radius: 8px;
-  background:
-    linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(236, 253, 245, 0.42)),
-    rgba(255, 253, 248, 0.78);
-  box-shadow: 0 14px 34px rgba(44, 55, 63, 0.1);
-  overscroll-behavior-inline: contain;
-  scrollbar-color: rgba(62, 184, 190, 0.58) rgba(15, 118, 110, 0.08);
-  scrollbar-width: thin;
-}
-
-.prose table {
-  width: 100%;
-  min-width: 620px;
-  border-collapse: separate;
-  border-spacing: 0;
-  color: #33433f;
-  font-size: 0.95rem;
-  line-height: 1.6;
-}
-
-.prose th,
-.prose td {
-  border-right: 1px solid rgba(15, 118, 110, 0.1);
-  border-bottom: 1px solid rgba(15, 118, 110, 0.1);
-  padding: 12px 14px;
-  vertical-align: top;
-}
-
-.prose th:last-child,
-.prose td:last-child {
-  border-right: 0;
-}
-
-.prose tr:last-child td {
-  border-bottom: 0;
-}
-
-.prose thead th {
-  color: #2f4a43;
-  font-weight: 800;
-  text-align: left;
-  background:
-    linear-gradient(135deg, rgba(236, 253, 245, 0.88), rgba(220, 246, 240, 0.72)),
-    rgba(255, 255, 255, 0.66);
-}
-
-.prose tbody tr:nth-child(even) td {
-  background: rgba(236, 253, 245, 0.36);
-}
-
-.prose tbody tr:hover td {
-  background: rgba(102, 200, 245, 0.13);
-}
-
-.fancybox__container {
-  --fancybox-bg: rgba(32, 36, 42, 0.72);
-  --fancybox-accent-color: #3eb8be;
-  backdrop-filter: blur(18px) saturate(145%);
-  -webkit-backdrop-filter: blur(18px) saturate(145%);
-}
-
-.prose mjx-container {
-  color: #223833;
-}
-
-.prose mjx-container[display="true"] {
-  max-width: 100%;
-  margin: 1.35em 0;
-  overflow-x: auto;
-  overflow-y: hidden;
-  padding: 10px 0;
-  scrollbar-color: rgba(62, 184, 190, 0.58) rgba(15, 118, 110, 0.08);
-  scrollbar-width: thin;
-}
-
-.prose mjx-container[display="true"]::-webkit-scrollbar {
-  height: 8px;
-}
-
-.prose mjx-container[display="true"]::-webkit-scrollbar-track {
-  border-radius: 999px;
-  background: rgba(15, 118, 110, 0.08);
-}
-
-.prose mjx-container[display="true"]::-webkit-scrollbar-thumb {
-  border-radius: 999px;
-  background:
-    linear-gradient(90deg, rgba(102, 200, 245, 0.72), rgba(62, 184, 190, 0.76)),
-    rgba(62, 184, 190, 0.72);
-}
-
-.post-copyright-card {
-  position: relative;
-  overflow: hidden;
-  margin-top: 42px;
-  border: 1px solid rgba(255, 255, 255, 0.64);
-  border-radius: 8px;
-  padding: 24px 28px 20px;
-  color: #33433f;
-  background:
-    radial-gradient(circle at 14% 0%, rgba(255, 255, 255, 0.82), transparent 32%),
-    linear-gradient(135deg, rgba(255, 253, 248, 0.76), rgba(236, 253, 245, 0.58)),
-    rgba(255, 253, 248, 0.72);
-  box-shadow:
-    inset 0 1px 0 rgba(255, 255, 255, 0.88),
-    0 16px 42px rgba(58, 51, 38, 0.12);
-  backdrop-filter: blur(18px) saturate(165%);
-  -webkit-backdrop-filter: blur(18px) saturate(165%);
-}
-
-.post-copyright-card::before {
-  content: "";
-  position: absolute;
-  inset: 0;
-  background: linear-gradient(135deg, rgba(255, 255, 255, 0.44), transparent 44%, rgba(255, 255, 255, 0.22));
-  pointer-events: none;
-}
-
-.post-copyright-card::after {
-  content: "";
-  position: absolute;
-  top: 8px;
-  right: 16px;
-  left: 16px;
-  height: 1px;
-  border-radius: 999px;
-  background: rgba(255, 255, 255, 0.82);
-  pointer-events: none;
-}
-
-.post-copyright-main,
-.post-copyright-footer {
-  position: relative;
-  z-index: 2;
-}
-
-.post-copyright-mark {
-  position: absolute;
-  top: 14px;
-  right: 22px;
-  z-index: 1;
-  display: grid;
-  place-items: center;
-  width: clamp(74px, 12vw, 118px);
-  aspect-ratio: 1;
-  border: 1px solid rgba(15, 118, 110, 0.12);
-  border-radius: 999px;
-  color: rgba(15, 118, 110, 0.16);
-  font-family: Georgia, "Times New Roman", serif;
-  font-size: clamp(1.85rem, 5vw, 3.4rem);
-  font-weight: 900;
-  line-height: 1;
-  background:
-    linear-gradient(145deg, rgba(255, 255, 255, 0.46), rgba(236, 253, 245, 0.2)),
-    rgba(255, 255, 255, 0.16);
-  box-shadow:
-    inset 0 1px 0 rgba(255, 255, 255, 0.72),
-    0 12px 30px rgba(15, 118, 110, 0.06);
-  pointer-events: none;
-}
-
-.post-copyright-mark span {
-  transform: translateY(-1px);
-}
-
-.post-copyright-card h2 {
-  margin: 0;
-  color: #27313a;
-  font-size: clamp(1.08rem, 2.2vw, 1.35rem);
-  line-height: 1.35;
-}
-
-.post-copyright-link {
-  display: inline-block;
-  margin-top: 12px;
-  color: var(--muted);
-  font-size: 0.94rem;
-  font-weight: 600;
-}
-
-.post-copyright-link:hover,
-.post-copyright-meta a:hover {
-  color: var(--accent);
-}
-
-.post-copyright-meta {
-  display: grid;
-  grid-template-columns: 1fr 1.25fr 2fr;
-  gap: 18px 28px;
-  margin: 20px 0 0;
-  border-top: 1px solid rgba(15, 118, 110, 0.18);
-  border-bottom: 1px solid rgba(15, 118, 110, 0.12);
-  padding: 16px 0;
-}
-
-.post-copyright-meta div {
-  min-width: 0;
-}
-
-.post-copyright-meta dt {
-  margin-bottom: 5px;
-  color: #58645f;
-  font-size: 0.8rem;
-  font-weight: 800;
-}
-
-.post-copyright-meta dd {
-  margin: 0;
-  color: #2f4a43;
-  font-size: 0.95rem;
-  font-weight: 600;
-}
-
-.post-copyright-meta time {
-  color: inherit;
-  font-size: inherit;
-}
-
-.post-copyright-footer {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 18px;
-  margin-top: 14px;
-}
-
-.post-copyright-tags,
-.post-copyright-actions {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 10px;
-}
-
-.post-copyright-tags a,
-.post-copyright-action,
-.post-copyright-icon {
-  min-height: 38px;
-  border: 1px solid rgba(15, 118, 110, 0.2);
-  border-radius: 999px;
-  color: var(--accent);
-  background: rgba(236, 253, 245, 0.72);
-  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.54);
-  transition:
-    color 0.2s ease,
-    background-color 0.2s ease,
-    transform 0.2s ease;
-}
-
-.post-copyright-tags a {
-  display: inline-flex;
-  align-items: center;
-  padding: 7px 13px;
-  font-size: 0.88rem;
-}
-
-.post-copyright-action {
-  appearance: none;
-  -webkit-appearance: none;
-  display: inline-flex;
-  align-items: center;
-  gap: 7px;
-  padding: 7px 15px;
-  font: inherit;
-  font-weight: 800;
-  cursor: pointer;
-}
-
-.post-copyright-action.is-primary {
-  color: #fff;
-  border-color: rgba(15, 118, 110, 0.3);
-  background: #3eb8be;
-}
-
-.post-copyright-action svg {
-  width: 17px;
-  height: 17px;
-  fill: none;
-  stroke: currentColor;
-  stroke-linecap: round;
-  stroke-linejoin: round;
-  stroke-width: 2.4;
-}
-
-.post-copyright-icon {
-  display: grid;
-  place-items: center;
-  width: 38px;
-  font-size: 0.94rem;
-  font-weight: 900;
-  line-height: 1;
-}
-
-.post-copyright-tags a:hover,
-.post-copyright-action:hover,
-.post-copyright-icon:hover {
-  color: #fff;
-  background: #3eb8be;
-  transform: translateY(-1px);
-}
-
-.twikoo-comments {
-  margin-top: 34px;
-  border: 1px solid rgba(255, 255, 255, 0.64);
-  border-radius: 8px;
-  padding: clamp(20px, 4vw, 30px);
-  background:
-    radial-gradient(circle at 14% 0%, rgba(255, 255, 255, 0.8), transparent 32%),
-    linear-gradient(135deg, rgba(255, 253, 248, 0.8), rgba(236, 253, 245, 0.55)),
-    rgba(255, 253, 248, 0.76);
-  box-shadow:
-    inset 0 1px 0 rgba(255, 255, 255, 0.86),
-    0 16px 42px rgba(58, 51, 38, 0.12);
-  backdrop-filter: blur(18px) saturate(165%);
-  -webkit-backdrop-filter: blur(18px) saturate(165%);
-}
-
-.twikoo-comments-head {
-  display: flex;
-  align-items: center;
-  gap: 14px;
-  margin-bottom: 22px;
-}
-
-.twikoo-comments-icon {
-  display: grid;
-  flex: 0 0 auto;
-  place-items: center;
-  width: 44px;
-  height: 44px;
-  border-radius: 8px;
-  color: #fff;
-  background: #3eb8be;
-  box-shadow: 0 12px 28px rgba(15, 118, 110, 0.16);
-}
-
-.twikoo-comments-icon svg {
-  width: 22px;
-  height: 22px;
-  fill: none;
-  stroke: currentColor;
-  stroke-linecap: round;
-  stroke-linejoin: round;
-  stroke-width: 2.2;
-}
-
-.twikoo-comments h2 {
-  margin: 0;
-  color: #27313a;
-  font-size: 1.28rem;
-  line-height: 1.25;
-}
-
-.twikoo-comments p {
-  margin: 4px 0 0;
-  color: var(--muted);
-  font-size: 0.92rem;
-  line-height: 1.45;
-}
-
-.twikoo-wrap {
-  min-height: 160px;
-}
-
-.twikoo-comments :where(.tk-comments-container, .tk-submit) {
-  color: var(--text);
-}
-
-.archive-timeline {
-  position: relative;
-  display: grid;
-  gap: 26px;
-  margin-top: 28px;
-  padding-left: 34px;
-}
-
-.archive-timeline::before {
-  content: "";
-  position: absolute;
-  top: 10px;
-  bottom: 10px;
-  left: 10px;
-  width: 2px;
-  border-radius: 999px;
-  background: linear-gradient(180deg, rgba(62, 184, 190, 0.8), rgba(222, 216, 204, 0.18));
-}
-
-.archive-year {
-  position: relative;
-  display: grid;
-  grid-template-columns: 150px minmax(0, 1fr);
-  gap: 22px;
-}
-
-.archive-year-marker {
-  position: absolute;
-  top: 12px;
-  left: -31px;
-  width: 18px;
-  height: 18px;
-  border: 4px solid rgba(255, 253, 248, 0.96);
-  border-radius: 999px;
-  background: #3eb8be;
-  box-shadow:
-    0 0 0 6px rgba(62, 184, 190, 0.16),
-    0 10px 24px rgba(15, 118, 110, 0.18);
-}
-
-.archive-year-head {
-  position: sticky;
-  top: 92px;
-  align-self: start;
-  display: grid;
-  gap: 4px;
-  padding-top: 2px;
-}
-
-.archive-year-head h2 {
-  margin: 0;
-  color: var(--accent-strong);
-  font-size: clamp(1.8rem, 4vw, 2.7rem);
-  line-height: 1;
-}
-
-.archive-year-head span {
-  color: var(--muted);
-  font-size: 0.92rem;
-  font-weight: 700;
-}
-
-.archive-months {
-  display: grid;
-  gap: 16px;
-  min-width: 0;
-}
-
-.archive-month {
-  display: grid;
-  grid-template-columns: 92px minmax(0, 1fr);
-  gap: 18px;
-  border: 1px solid rgba(222, 216, 204, 0.72);
-  border-radius: 8px;
-  padding: 18px;
-  background:
-    linear-gradient(135deg, rgba(255, 255, 255, 0.76), rgba(242, 251, 237, 0.58)),
-    rgba(255, 253, 248, 0.78);
-  box-shadow: var(--shadow);
-}
-
-.archive-month-label {
-  display: grid;
-  align-content: start;
-  gap: 6px;
-  color: var(--accent);
-  font-weight: 900;
-  line-height: 1.2;
-}
-
-.archive-month-label small {
-  color: var(--muted);
-  font-size: 0.82rem;
-  font-weight: 700;
-}
-
-.archive-list {
-  display: grid;
-  gap: 8px;
-  min-width: 0;
-}
-
-.archive-list a {
-  display: grid;
-  grid-template-columns: 46px minmax(0, 1fr);
-  align-items: center;
-  gap: 14px;
-  border: 1px solid transparent;
-  border-radius: 8px;
-  padding: 9px 12px;
-  background: rgba(255, 253, 248, 0.54);
-  transition:
-    color 0.2s ease,
-    border-color 0.2s ease,
-    background-color 0.2s ease,
-    box-shadow 0.2s ease,
-    transform 0.2s ease;
-}
-
-.archive-list a time {
-  display: inline-grid;
-  place-items: center;
-  width: 38px;
-  height: 38px;
-  border-radius: 8px;
-  color: #fff;
-  font-size: 0.9rem;
-  font-weight: 900;
-  line-height: 1;
-  background: #3eb8be;
-  box-shadow: 0 10px 24px rgba(15, 118, 110, 0.14);
-}
-
-.archive-list a span {
-  min-width: 0;
-  overflow-wrap: anywhere;
-  color: var(--text);
-  font-weight: 800;
-  line-height: 1.45;
-}
-
-.archive-list a:hover {
-  border-color: rgba(62, 184, 190, 0.32);
-  background: rgba(255, 255, 255, 0.82);
-  box-shadow: 0 12px 28px rgba(58, 51, 38, 0.1);
-  transform: translateY(-1px);
-}
-
-.pagination {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: center;
-  gap: 10px;
-  margin-top: 30px;
-}
-
-.pagination-pages {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  gap: 8px;
-}
-
-.pagination-link,
-.pagination-number {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 40px;
-  min-height: 40px;
-  border: 1px solid rgba(222, 216, 204, 0.78);
-  border-radius: 8px;
-  padding: 8px 12px;
-  color: #50637a;
-  font-weight: 700;
-  line-height: 1;
-  background: rgba(255, 253, 248, 0.82);
-  box-shadow: 0 10px 28px rgba(58, 51, 38, 0.08);
-  transition:
-    color 0.2s ease,
-    border-color 0.2s ease,
-    background-color 0.2s ease,
-    transform 0.2s ease;
-}
-
-.pagination-link {
-  min-width: 76px;
-}
-
-.pagination-link:hover,
-.pagination-number:hover,
-.pagination-number.is-current {
-  color: #fff;
-  border-color: rgba(15, 118, 110, 0.34);
-  background: #3eb8be;
-  transform: translateY(-1px);
-}
-
-.pagination-link.is-disabled {
-  color: rgba(104, 111, 120, 0.5);
-  background: rgba(255, 253, 248, 0.46);
-  box-shadow: none;
-  cursor: not-allowed;
-}
-
-.term-grid {
-  margin-top: 24px;
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
-  gap: 12px;
-}
-
-.term-grid a {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-  border: 1px solid var(--line);
-  border-radius: 8px;
-  padding: 14px 16px;
-  background: rgba(255, 253, 248, 0.9);
-}
-
-.stats-chart {
-  margin-top: 24px;
-  border: 1px solid rgba(222, 216, 204, 0.78);
-  border-radius: 8px;
-  padding: 22px;
-  background: rgba(255, 253, 248, 0.88);
-  box-shadow: 0 14px 36px rgba(58, 51, 38, 0.08);
-}
-
-.stats-chart-head {
-  display: grid;
-  gap: 6px;
-  margin-bottom: 18px;
-}
-
-.stats-chart-head h2,
-.stats-chart-head p {
-  margin: 0;
-}
-
-.stats-chart-head h2 {
-  color: #27313a;
-  font-size: 1.18rem;
-  line-height: 1.25;
-}
-
-.stats-chart-head p {
-  color: var(--muted);
-  font-size: 0.92rem;
-}
-
-.stats-chart-body {
-  display: grid;
-  grid-template-columns: minmax(180px, 240px) 1fr;
-  align-items: center;
-  gap: 24px;
-}
-
-.pie-chart {
-  width: 100%;
-  max-width: 240px;
-  margin: 0 auto;
-  overflow: visible;
-}
-
-.pie-chart-track,
-.pie-chart-segment {
-  fill: none;
-  stroke-width: 18;
-}
-
-.pie-chart-track {
-  stroke: rgba(222, 216, 204, 0.52);
-}
-
-.pie-chart-segment {
-  transform: rotate(-90deg);
-  transform-origin: 60px 60px;
-  transition: stroke-width 0.2s ease;
-}
-
-.pie-chart-segment:hover {
-  stroke-width: 20;
-}
-
-.pie-chart-total {
-  fill: #27313a;
-  font-size: 1.28rem;
-  font-weight: 800;
-}
-
-.pie-chart-label {
-  fill: var(--muted);
-  font-size: 0.68rem;
-}
-
-.chart-legend {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
-  gap: 10px;
-}
-
-.chart-legend-item {
-  display: grid;
-  grid-template-columns: 12px minmax(0, 1fr) auto auto;
-  align-items: center;
-  gap: 10px;
-  border: 1px solid rgba(222, 216, 204, 0.68);
-  border-radius: 8px;
-  padding: 10px 12px;
-  color: var(--text);
-  background: rgba(255, 255, 255, 0.58);
-}
-
-a.chart-legend-item {
-  transition:
-    border-color 0.2s ease,
-    transform 0.2s ease,
-    box-shadow 0.2s ease;
-}
-
-a.chart-legend-item:hover {
-  border-color: rgba(62, 184, 190, 0.42);
-  box-shadow: 0 10px 24px rgba(58, 51, 38, 0.08);
-  transform: translateY(-1px);
-}
-
-.chart-legend-color {
-  width: 12px;
-  height: 12px;
-  border-radius: 50%;
-  background: var(--chart-color);
-}
-
-.chart-legend-label {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.chart-legend-item strong {
-  color: #27313a;
-  font-size: 1rem;
-}
-
-.chart-legend-percent {
-  min-width: 38px;
-  color: var(--muted);
-  font-size: 0.84rem;
-  text-align: right;
-}
-
-.line-chart-wrap {
-  width: 100%;
-  overflow-x: auto;
-}
-
-.line-chart {
-  display: block;
-  width: 100%;
-  min-width: 520px;
-  height: 260px;
-}
-
-.line-chart-axis {
-  stroke: rgba(104, 111, 120, 0.32);
-  stroke-width: 1.4;
-}
-
-.line-chart-grid {
-  stroke: rgba(104, 111, 120, 0.16);
-  stroke-width: 1;
-}
-
-.line-chart-area {
-  fill: rgba(62, 184, 190, 0.18);
-}
-
-.line-chart-line {
-  fill: none;
-  stroke: #3eb8be;
-  stroke-linecap: round;
-  stroke-linejoin: round;
-  stroke-width: 4;
-}
-
-.line-chart-dot {
-  fill: #fffdf8;
-  stroke: #3eb8be;
-  stroke-width: 3;
-}
-
-.line-chart-x-label,
-.line-chart-y-label {
-  fill: var(--muted);
-  font-size: 0.78rem;
-}
-
-.shuoshuo-page {
-  margin-top: 40px;
-}
-
-#talk {
-  position: relative;
-  width: 100%;
-  min-height: 220px;
-}
-
-#talk:empty::before {
-  content: "说说加载中...";
-  display: grid;
-  min-height: 180px;
-  place-items: center;
-  border: 1px solid rgba(255, 255, 255, 0.58);
-  border-radius: 8px;
-  color: var(--muted);
-  background:
-    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.72), transparent 34%),
-    linear-gradient(145deg, rgba(255, 255, 255, 0.62), rgba(226, 248, 241, 0.35)),
-    rgba(255, 253, 248, 0.68);
-  box-shadow: var(--shadow);
-  backdrop-filter: blur(18px) saturate(165%);
-  -webkit-backdrop-filter: blur(18px) saturate(165%);
-}
-
-#talk .talk_item {
-  position: absolute;
-  display: flex;
-  flex-direction: column;
-  width: calc(33.333% - 8px);
-  margin: 0 12px 12px 0;
-  border: 1px solid rgba(255, 255, 255, 0.58);
-  border-radius: 8px;
-  padding: 20px;
-  color: var(--text);
-  background:
-    radial-gradient(circle at 14% 0%, rgba(255, 255, 255, 0.72), transparent 34%),
-    linear-gradient(145deg, rgba(255, 255, 255, 0.62), rgba(226, 248, 241, 0.35)),
-    rgba(255, 253, 248, 0.78);
-  box-shadow: var(--shadow);
-  backdrop-filter: blur(18px) saturate(165%);
-  -webkit-backdrop-filter: blur(18px) saturate(165%);
-  transition:
-    box-shadow 0.2s ease,
-    transform 0.2s ease;
-}
-
-#talk .talk_item:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 20px 54px rgba(44, 55, 63, 0.18);
-}
-
-#talk .talk_meta,
-#talk .talk_bottom {
-  display: flex;
-  align-items: center;
-}
-
-#talk .talk_meta {
-  width: 100%;
-  border-bottom: 1px dashed rgba(104, 111, 120, 0.34);
-  padding-bottom: 10px;
-}
-
-#talk .talk_meta .avatar {
-  width: 56px;
-  height: 56px;
-  margin: 0 !important;
-  border-radius: 8px;
-  object-fit: cover;
-}
-
-#talk .talk_meta .info {
-  display: flex;
-  min-width: 0;
-  flex-direction: column;
-  margin-left: 12px;
-  line-height: 1.4;
-}
-
-#talk .talk_meta .info .talk_nick {
-  display: inline-flex;
-  align-items: center;
-  gap: 5px;
-  color: #3eb8be;
-  font-size: 1.08rem;
-  font-weight: 800;
-}
-
-#talk .talk_meta .info svg.is-badge.icon {
-  width: 15px;
-  height: 15px;
-  flex: 0 0 auto;
-}
-
-#talk .talk_meta .info span.talk_date {
-  color: var(--muted);
-  font-size: 0.9rem;
-}
-
-#talk .talk_item .talk_content {
-  margin-top: 12px;
-  overflow-wrap: anywhere;
-  color: #33433f;
-}
-
-#talk .talk_item .talk_content a {
-  color: #d75f54;
-  font-weight: 700;
-}
-
-#talk .talk_item .talk_content a:hover {
-  color: var(--accent);
-}
-
-#talk .talk_item .talk_content .zone_imgbox {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 10px;
-  margin-top: 12px;
-  --talk-image-size: calc(25% - 8px);
-}
-
-#talk .talk_item .talk_content .zone_imgbox a {
-  position: relative;
-  display: block;
-  width: var(--talk-image-size);
-  overflow: hidden;
-  border-radius: 8px;
-  aspect-ratio: 1;
-}
-
-#talk .talk_item .talk_content .zone_imgbox a:first-child {
-  width: 100%;
-  aspect-ratio: 1.8;
-}
-
-#talk .talk_item .talk_content .zone_imgbox img {
-  width: 100%;
-  height: 100%;
-  margin: 0 !important;
-  object-fit: cover;
-}
-
-#talk .talk_item .talk_bottom {
-  justify-content: space-between;
-  gap: 12px;
-  margin-top: 15px;
-  border-top: 1px dashed rgba(104, 111, 120, 0.34);
-  padding-top: 10px;
-}
-
-#talk .talk_item .talk_bottom span.talk_tag,
-#talk .talk_item .talk_bottom span.location_tag {
-  display: inline-flex;
-  max-width: 100%;
-  min-height: 30px;
-  align-items: center;
-  border: 1px solid rgba(15, 118, 110, 0.16);
-  border-radius: 999px;
-  padding: 3px 11px;
-  color: var(--accent);
-  font-size: 0.86rem;
-  background: rgba(236, 253, 245, 0.7);
-  transition:
-    color 0.2s ease,
-    background-color 0.2s ease,
-    transform 0.2s ease;
-}
-
-#talk .talk_item .talk_bottom span.talk_tag:hover,
-#talk .talk_item .talk_bottom span.location_tag:hover,
-#talk .talk_item .talk_bottom .icon:hover {
-  color: #fff;
-  background: #3eb8be;
-  transform: translateY(-1px);
-}
-
-#talk .talk_item .talk_bottom .icon {
-  display: grid;
-  place-items: center;
-  width: 34px;
-  height: 34px;
-  border-radius: 999px;
-  color: var(--accent);
-  transition:
-    color 0.2s ease,
-    background-color 0.2s ease,
-    transform 0.2s ease;
-}
-
-#talk .talk_item .talk_content .shuoshuo-external-link {
-  width: 100%;
-  height: 80px;
-  margin-top: 12px;
-  overflow: hidden;
-  border: 1px solid rgba(15, 118, 110, 0.14);
-  border-radius: 8px;
-  color: var(--text);
-  background: rgba(236, 253, 245, 0.64);
-  transition:
-    background-color 0.2s ease,
-    transform 0.2s ease;
-}
-
-.shuoshuo-external-link:hover {
-  background: #3eb8be;
-  transform: translateY(-1px);
-}
-
-.shuoshuo-external-link .external-link {
-  display: flex;
-  width: 100%;
-  height: 100%;
-}
-
-.shuoshuo-external-link .external-link:hover {
-  color: #fff;
-}
-
-.shuoshuo-external-link .external-link-left {
-  width: 60px;
-  height: 60px;
-  margin: 10px;
-  flex: 0 0 auto;
-  border-radius: 8px;
-  background-position: center;
-  background-size: cover;
-}
-
-.shuoshuo-external-link .external-link-right {
-  display: flex;
-  min-width: 0;
-  width: calc(100% - 80px);
-  flex-direction: column;
-  justify-content: center;
-  padding: 10px;
-}
-
-.shuoshuo-external-link .external-link-right .external-link-title {
-  overflow: hidden;
-  font-size: 1rem;
-  font-weight: 800;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.talk_content iframe {
-  min-height: 150px;
-}
-
-meting-js {
-  display: block;
-  min-height: 100px;
-  margin-top: 10px;
-}
-
-.limit {
-  width: 100%;
-  margin-top: 30px;
-  color: var(--muted);
-  text-align: center;
-}
-
-:root[data-theme='dark'] #talk:empty::before,
-:root[data-theme='dark'] #talk .talk_item {
-  border-color: rgba(181, 198, 207, 0.24);
-  background:
-    radial-gradient(circle at 14% 0%, rgba(139, 224, 213, 0.1), transparent 34%),
-    linear-gradient(145deg, rgba(22, 32, 39, 0.92), rgba(8, 14, 19, 0.86)),
-    rgba(12, 19, 25, 0.88);
-  box-shadow: var(--shadow);
-}
-
-:root[data-theme='dark'] #talk .talk_item .talk_content {
-  color: var(--text);
-}
-
-:root[data-theme='dark'] #talk .talk_item .talk_bottom span.talk_tag,
-:root[data-theme='dark'] #talk .talk_item .talk_bottom span.location_tag,
-:root[data-theme='dark'] #talk .talk_item .talk_content .shuoshuo-external-link {
-  border-color: rgba(139, 224, 213, 0.28);
-  color: #e6f4f6;
-  background: rgba(139, 224, 213, 0.13);
-}
-
-:root[data-theme='dark'] #talk .talk_meta,
-:root[data-theme='dark'] #talk .talk_item .talk_bottom {
-  border-color: rgba(181, 198, 207, 0.26);
-  color: var(--muted);
-}
-
-:root[data-theme='dark'] .hero-talk {
-  border-color: rgba(181, 198, 207, 0.24);
-  background:
-    linear-gradient(135deg, rgba(22, 32, 39, 0.78), rgba(8, 14, 19, 0.72)),
-    rgba(12, 19, 25, 0.74);
-  box-shadow:
-    inset 0 1px 0 rgba(255, 255, 255, 0.1),
-    0 18px 46px rgba(0, 0, 0, 0.34);
-}
-
-:root[data-theme='dark'] .hero-talk .item {
-  border-top-color: rgba(181, 198, 207, 0.22);
-  color: var(--text);
-}
-
-:root[data-theme='dark'] .hero-talk-head a {
-  border-color: rgba(139, 224, 213, 0.28);
-  background: rgba(139, 224, 213, 0.13);
-}
-
-.external-redirect {
-  width: min(760px, calc(100% - (var(--page-gutter) * 2)));
-  min-height: calc(100vh - 240px);
-  margin: 42px auto 80px;
-  display: grid;
-  place-items: center;
-}
-
-.external-redirect-panel {
-  width: 100%;
-  overflow: hidden;
-  border: 1px solid rgba(255, 255, 255, 0.58);
-  border-radius: 8px;
-  padding: clamp(26px, 6vw, 48px);
-  background:
-    radial-gradient(circle at 15% 0%, rgba(255, 255, 255, 0.74), transparent 36%),
-    linear-gradient(145deg, rgba(255, 255, 255, 0.7), rgba(226, 248, 241, 0.42)),
-    rgba(255, 253, 248, 0.78);
-  box-shadow:
-    inset 0 1px 0 rgba(255, 255, 255, 0.82),
-    0 24px 64px rgba(44, 55, 63, 0.16);
-  backdrop-filter: blur(18px) saturate(165%);
-  -webkit-backdrop-filter: blur(18px) saturate(165%);
-}
-
-.external-redirect-eyebrow {
-  margin: 0 0 10px;
-  color: var(--accent);
-  font-size: 0.88rem;
-  font-weight: 800;
-}
-
-.external-redirect h1 {
-  margin: 0;
-  color: #20242a;
-  font-size: clamp(2rem, 6vw, 3.8rem);
-  line-height: 1.08;
-}
-
-.external-redirect-copy {
-  max-width: 620px;
-  margin: 16px 0 0;
-  color: var(--muted);
-  font-size: 1rem;
-}
-
-.external-redirect-target {
-  display: grid;
-  gap: 8px;
-  margin-top: 24px;
-  border: 1px solid rgba(15, 118, 110, 0.16);
-  border-radius: 8px;
-  padding: 14px 16px;
-  background: rgba(236, 253, 245, 0.64);
-}
-
-.external-redirect-target span {
-  color: var(--accent);
-  font-size: 0.84rem;
-  font-weight: 800;
-}
-
-.external-redirect-target code {
-  overflow-wrap: anywhere;
-  color: #33433f;
-  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
-  font-size: 0.92rem;
-}
-
-.external-redirect-countdown {
-  position: relative;
-  width: 112px;
-  height: 112px;
-  margin: 26px auto 0;
-}
-
-.external-redirect-countdown svg {
-  width: 112px;
-  height: 112px;
-  transform: rotate(-90deg);
-}
-
-.external-redirect-countdown circle {
-  fill: none;
-  stroke: rgba(15, 118, 110, 0.14);
-  stroke-width: 10;
-}
-
-.external-redirect-countdown circle:last-child {
-  stroke: #3eb8be;
-  stroke-linecap: round;
-  transition: stroke-dashoffset 0.9s linear;
-}
-
-.external-redirect-countdown strong {
-  position: absolute;
-  inset: 0;
-  display: grid;
-  place-items: center;
-  color: #2f4358;
-  font-size: 2rem;
-  line-height: 1;
-}
-
-.external-redirect-actions {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  gap: 12px;
-  margin-top: 28px;
-}
-
-.external-redirect-button {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 44px;
-  border: 1px solid rgba(15, 118, 110, 0.2);
-  border-radius: 8px;
-  padding: 9px 16px;
-  color: var(--accent);
-  font: inherit;
-  font-weight: 800;
-  background: rgba(236, 253, 245, 0.68);
-  cursor: pointer;
-  transition:
-    color 0.2s ease,
-    background-color 0.2s ease,
-    transform 0.2s ease;
-}
-
-.external-redirect-button:hover,
-.external-redirect-button.is-primary {
-  color: #fff;
-  background: #3eb8be;
-  transform: translateY(-1px);
-}
-
-.native-page {
-  margin-top: 40px;
-}
-
-.native-page-article {
-  overflow: hidden;
-}
-
-.native-feature-grid,
-.friend-link-grid {
-  display: grid;
-  gap: 16px;
-}
-
-.native-feature-grid {
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-  margin: 28px 0;
-}
-
-.native-feature-grid section,
-.friend-link-card {
-  border: 1px solid rgba(15, 118, 110, 0.14);
-  border-radius: 8px;
-  background: rgba(236, 253, 245, 0.58);
-  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.62);
-}
-
-.native-feature-grid section {
-  padding: 18px;
-}
-
-.native-feature-grid i {
-  display: grid;
-  width: 42px;
-  height: 42px;
-  margin-bottom: 12px;
-  place-items: center;
-  border-radius: 8px;
-  color: #fff;
-  background: #3eb8be;
-}
-
-.native-feature-grid h2 {
-  margin: 0 0 8px;
-  font-size: 1.12rem;
-}
-
-.native-feature-grid p {
-  margin: 0;
-  color: var(--muted);
-}
-
-.native-table-wrap {
-  overflow-x: auto;
-}
-
-.friend-link-grid {
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  margin: 0 0 24px;
-}
-
-.friend-link-card {
-  display: grid;
-  grid-template-columns: 58px minmax(0, 1fr) auto;
-  align-items: center;
-  gap: 14px;
-  padding: 16px;
-  transition:
-    border-color 0.2s ease,
-    background-color 0.2s ease,
-    transform 0.2s ease;
-}
-
-.friend-link-card:hover {
-  border-color: rgba(15, 118, 110, 0.28);
-  background: rgba(236, 253, 245, 0.78);
-  transform: translateY(-2px);
-}
-
-.friend-link-card img {
-  width: 58px;
-  height: 58px;
-  border-radius: 8px;
-  object-fit: cover;
-}
-
-.friend-link-card span {
-  display: grid;
-  min-width: 0;
-  gap: 2px;
-}
-
-.friend-link-card strong {
-  color: #33433f;
-  font-size: 1.05rem;
-}
-
-.friend-link-card em {
-  overflow: hidden;
-  color: var(--muted);
-  font-size: 0.9rem;
-  font-style: normal;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.friend-link-card i {
-  color: var(--accent);
-}
-
-.link-apply-card {
-  width: 100%;
-  margin-top: 0;
-}
-
-:root[data-theme='dark'] .external-redirect-panel {
-  border-color: rgba(181, 198, 207, 0.24);
-  background:
-    radial-gradient(circle at 14% 0%, rgba(139, 224, 213, 0.1), transparent 34%),
-    linear-gradient(145deg, rgba(22, 32, 39, 0.92), rgba(8, 14, 19, 0.86)),
-    rgba(12, 19, 25, 0.88);
-  box-shadow: var(--shadow);
-}
-
-:root[data-theme='dark'] .external-redirect h1,
-:root[data-theme='dark'] .external-redirect-countdown strong {
-  color: #edf7f5;
-}
-
-:root[data-theme='dark'] .external-redirect-target,
-:root[data-theme='dark'] .external-redirect-button {
-  border-color: rgba(139, 224, 213, 0.28);
-  background: rgba(139, 224, 213, 0.13);
-}
-
-:root[data-theme='dark'] .external-redirect-target code {
-  color: var(--text);
-}
-
-:root[data-theme='dark'] .native-feature-grid section,
-:root[data-theme='dark'] .friend-link-card {
-  border-color: rgba(139, 224, 213, 0.26);
-  background: rgba(139, 224, 213, 0.12);
-}
-
-:root[data-theme='dark'] .friend-link-card strong {
-  color: #edf7f5;
-}
-
-.site-footer {
-  position: relative;
-  margin-top: 64px;
-  color: rgba(83, 91, 96, 0.72);
-  background:
-    linear-gradient(180deg, rgba(242, 248, 236, 0.56), rgba(246, 250, 239, 0.72)),
-    rgba(246, 250, 239, 0.72);
-  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78);
-  backdrop-filter: blur(18px) saturate(150%);
-  -webkit-backdrop-filter: blur(18px) saturate(150%);
-}
-
-.footer-inner {
-  width: min(1180px, calc(100% - (var(--page-gutter) * 2)));
-  margin: 0 auto;
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) minmax(220px, 320px);
-  gap: 34px 64px;
-  padding: 42px 0 38px;
-}
-
-.footer-top {
-  display: grid;
-  align-content: start;
-  gap: 10px;
-}
-
-.footer-brand {
-  display: inline-flex;
-  align-items: center;
-  gap: 10px;
-  width: fit-content;
-  color: #3f4143;
-  font-size: 1.22rem;
-  font-weight: 800;
-  line-height: 1;
-}
-
-.footer-brand img {
-  width: 34px;
-  height: 34px;
-  border-radius: 999px;
-  object-fit: cover;
-  box-shadow: 0 8px 22px rgba(15, 118, 110, 0.18);
-}
-
-.footer-slogan,
-.footer-contact p,
-.footer-bottom p {
-  margin: 0;
-}
-
-.footer-slogan {
-  font-size: 0.92rem;
-}
-
-.footer-contact {
-  display: grid;
-  justify-items: center;
-  align-content: start;
-  gap: 10px;
-  text-align: center;
-}
-
-.footer-contact p {
-  color: rgba(83, 91, 96, 0.64);
-  font-size: 0.94rem;
-}
-
-.footer-socials {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-}
-
-.footer-socials a {
-  display: grid;
-  place-items: center;
-  width: 36px;
-  height: 36px;
-  border: 1px solid rgba(178, 194, 170, 0.48);
-  border-radius: 10px;
-  color: rgba(76, 84, 88, 0.78);
-  background:
-    linear-gradient(145deg, rgba(255, 255, 255, 0.48), rgba(218, 231, 203, 0.42)),
-    rgba(236, 244, 226, 0.72);
-  box-shadow:
-    inset 0 1px 0 rgba(255, 255, 255, 0.7),
-    0 10px 24px rgba(91, 107, 74, 0.1);
-  transition:
-    color 0.2s ease,
-    border-color 0.2s ease,
-    background-color 0.2s ease,
-    transform 0.2s ease;
-}
-
-.footer-socials a:hover {
-  color: var(--accent);
-  border-color: rgba(15, 118, 110, 0.28);
-  background-color: rgba(255, 255, 255, 0.84);
-  transform: translateY(-2px);
-}
-
-.footer-socials i {
-  width: 18px;
-  height: 18px;
-  display: inline-grid;
-  place-items: center;
-  font-size: 1.08rem;
-  line-height: 1;
-}
-
-.footer-contact-links,
-.footer-meta p:last-child {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-}
-
-.footer-contact-links {
-  font-size: 0.92rem;
-}
-
-.footer-contact-links span,
-.footer-meta span {
-  color: rgba(83, 91, 96, 0.35);
-}
-
-.footer-bottom {
-  grid-column: 1 / -1;
-  display: flex;
-  justify-content: space-between;
-  gap: 24px;
-  border-top: 1px solid rgba(182, 197, 174, 0.34);
-  padding-top: 22px;
-  font-size: 0.92rem;
-}
-
-.footer-bottom > div {
-  display: grid;
-  gap: 8px;
-}
-
-.footer-meta {
-  justify-items: end;
-  text-align: right;
-}
-
-:root[data-theme='dark'] :where(
-  .page-header-card,
-  .post-card,
-  .sidebar-card,
-  .article,
-  .article-summary-card,
-  .post-copyright-card,
-  .twikoo-comments,
-  .table-scroll,
-  .stats-chart,
-  .term-grid a,
-  .pagination-link,
-  .pagination-number
-) {
-  border-color: rgba(181, 198, 207, 0.24);
-  background:
-    radial-gradient(circle at 14% 0%, rgba(139, 224, 213, 0.1), transparent 34%),
-    linear-gradient(145deg, rgba(22, 32, 39, 0.92), rgba(8, 14, 19, 0.86)),
-    rgba(12, 19, 25, 0.88);
-  box-shadow: var(--shadow);
-}
-
-:root[data-theme='dark'] :where(
-  .page-header-card::after,
-  .post-copyright-card::after
-) {
-  background: rgba(255, 255, 255, 0.12);
-}
-
-:root[data-theme='dark'] :where(
-  .page-header-card h1,
-  .content-wrap .page-header-card h1,
-  .sidebar-card h2,
-  .stats-chart-head h2,
-  .chart-legend-item strong,
-  .pie-chart-total,
-  .profile-name,
-  .calendar-summary strong,
-  .schedule-left strong,
-  .sidebar-post strong,
-  .toc-link-main,
-  .post-copyright-card h2,
-  .post-copyright-meta dd,
-  .twikoo-comments h2,
-  .footer-brand
-) {
-  color: #edf7f5;
-}
-
-:root[data-theme='dark'] .page-header-eyebrow {
-  color: #a8f1e8;
-  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.38);
-}
-
-:root[data-theme='dark'] .page-header-card h1,
-:root[data-theme='dark'] .content-wrap .page-header-card h1 {
-  color: #f5fbfc;
-  text-shadow:
-    0 2px 16px rgba(0, 0, 0, 0.72),
-    0 0 1px rgba(245, 251, 252, 0.92);
-}
-
-:root[data-theme='dark'] .page-header-subtitle {
-  color: #d3e0e5;
-  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.48);
-}
-
-:root[data-theme='dark'] :where(
-  .notice-card p,
-  #welcome-info,
-  #welcome-ip-location-info,
-  .site-info-list dt,
-  .toc-link-child,
-  .same-category-list a,
-  .profile-links,
-  .footer-contact p
-) {
-  color: #c4d0d5;
-}
-
-:root[data-theme='dark'] .chart-legend-item {
-  border-color: rgba(181, 198, 207, 0.22);
-  background: rgba(255, 255, 255, 0.08);
-}
-
-:root[data-theme='dark'] .calendar-grid {
-  color: #c2d2dc;
-}
-
-:root[data-theme='dark'] .pie-chart-track {
-  stroke: rgba(181, 198, 207, 0.22);
-}
-
-:root[data-theme='dark'] .line-chart-dot {
-  fill: #112023;
-}
-
-:root[data-theme='dark'] .site-info-list div {
-  border-top-color: rgba(181, 198, 207, 0.22);
-}
-
-:root[data-theme='dark'] :where(
-  .meta-list a,
-  .article-tag-list a,
-  .post-copyright-tags a,
-  .post-copyright-action,
-  .post-copyright-icon
-) {
-  border-color: rgba(139, 224, 213, 0.28);
-  color: var(--accent);
-  background: rgba(139, 224, 213, 0.13);
-  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
-}
-
-:root[data-theme='dark'] :where(
-  .follow-button,
-  .calendar-grid .today,
-  .post-copyright-action.is-primary,
-  .post-copyright-tags a:hover,
-  .post-copyright-action:hover,
-  .post-copyright-icon:hover,
-  .pagination-link:hover,
-  .pagination-number:hover,
-  .pagination-number.is-current
-) {
-  color: #081315;
-  background: var(--accent);
-}
-
-:root[data-theme='dark'] .pagination-link.is-disabled {
-  color: rgba(198, 211, 218, 0.72);
-  background: rgba(255, 255, 255, 0.08);
-}
-
-:root[data-theme='dark'] .article-header {
-  border-bottom-color: var(--line);
-}
-
-:root[data-theme='dark'] .article-header-cover {
-  background: #0d171d;
-}
-
-:root[data-theme='dark'] .article-header-cover::before {
-  background:
-    linear-gradient(180deg, rgba(5, 9, 12, 0.58), rgba(8, 16, 20, 0.28) 38%, rgba(3, 8, 11, 0.86)),
-    linear-gradient(90deg, rgba(5, 13, 17, 0.66), rgba(20, 57, 58, 0.14) 54%, rgba(5, 13, 17, 0.48));
-}
-
-:root[data-theme='dark'] .prose .code-block {
-  border-color: rgba(139, 224, 213, 0.24);
-  background: rgba(5, 8, 12, 0.96);
-  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.32);
-}
-
-:root[data-theme='dark'] .prose :not(pre) > code {
-  border-color: rgba(139, 224, 213, 0.3);
-  color: var(--accent);
-  background: rgba(139, 224, 213, 0.13);
-}
-
-:root[data-theme='dark'] .butterfly-note {
-  color: #e5eff1;
-  background: rgba(139, 224, 213, 0.11);
-}
-
-:root[data-theme='dark'] .butterfly-note--disabled {
-  background: transparent;
-}
-
-:root[data-theme='dark'] .butterfly-hide-content {
-  color: #e5eff1;
-}
-
-:root[data-theme='dark'] .butterfly-hide-block__content {
-  border-left-color: rgba(139, 224, 213, 0.28);
-}
-
-:root[data-theme='dark'] .prose table {
-  color: #e5eff1;
-}
-
-:root[data-theme='dark'] .prose thead th {
-  color: #effaf7;
-  background:
-    linear-gradient(135deg, rgba(35, 55, 61, 0.86), rgba(18, 31, 38, 0.78)),
-    rgba(12, 21, 27, 0.84);
-}
-
-:root[data-theme='dark'] .prose tbody tr:nth-child(even) td {
-  background: rgba(139, 224, 213, 0.09);
-}
-
-:root[data-theme='dark'] .prose tbody tr:hover td {
-  background: rgba(139, 224, 213, 0.14);
-}
-
-:root[data-theme='dark'] .prose :where(th, td) {
-  border-color: rgba(139, 224, 213, 0.18);
-}
-
-:root[data-theme='dark'] .site-footer {
-  color: rgba(218, 228, 232, 0.86);
-  background:
-    linear-gradient(180deg, rgba(10, 16, 21, 0.82), rgba(6, 10, 14, 0.94)),
-    rgba(7, 11, 15, 0.92);
-  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
-}
-
-:root[data-theme='dark'] .footer-socials a {
-  border-color: rgba(181, 198, 207, 0.24);
-  color: rgba(231, 240, 243, 0.9);
-  background:
-    linear-gradient(145deg, rgba(28, 40, 48, 0.8), rgba(10, 17, 22, 0.74)),
-    rgba(14, 22, 28, 0.74);
-  box-shadow:
-    inset 0 1px 0 rgba(255, 255, 255, 0.08),
-    0 10px 24px rgba(0, 0, 0, 0.3);
-}
-
-:root[data-theme='dark'] .footer-bottom {
-  border-top-color: rgba(181, 198, 207, 0.22);
-}
-
-@media (min-width: 960px) {
-  .post-list {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-}
-
-@media (max-width: 1100px) {
-  .post-layout {
-    grid-template-columns: 1fr;
-  }
-
-  .home-hero {
-    grid-template-columns: 1fr;
-    gap: 22px;
-    padding: 44px 0 28px;
-  }
-
-  .hero-talk {
-    max-width: none;
-  }
-
-  .article-sidebar {
-    align-self: auto;
-    position: static;
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-
-  .article-sticky-sidebar {
-    position: static;
-    grid-column: 1 / -1;
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-    max-height: none;
-    overflow: visible;
-  }
-
-  .toc-card {
-    grid-column: 1 / -1;
-  }
-
-  .home-layout {
-    grid-template-columns: 1fr;
-  }
-
-  #talk .talk_item {
-    width: calc(50% - 6px);
-  }
-
-  .home-sidebar {
-    align-self: auto;
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-
-  .sticky-sidebar,
-  .article-sticky-sidebar {
-    position: static;
-    max-height: none;
-    overflow: visible;
-  }
-}
-
-@media (max-width: 720px) {
-  :root {
-    --page-gutter: 16px;
-  }
-
-  .custom-context-menu {
-    width: min(218px, calc(100vw - 16px));
-    border-radius: 12px;
-    padding: 7px;
-  }
-
-  .context-menu-nav :where(a, button) {
-    height: 40px;
-    border-radius: 13px;
-  }
-
-  .context-menu-group :where(a, button) {
-    min-height: 38px;
-    padding: 8px 9px;
-  }
-
-  .nav {
-    display: grid;
-    grid-template-columns: minmax(0, 1fr) 40px;
-    min-height: auto;
-    padding: 10px 12px;
-    align-items: center;
-    gap: 0 10px;
-    border-radius: 24px;
-  }
-
-  .nav-menu-toggle {
-    display: grid;
-    justify-self: end;
-  }
-
-  .nav.is-open .nav-menu-open,
-  .nav-menu-close {
-    display: none;
-  }
-
-  .nav.is-open .nav-menu-close {
-    display: inline-block;
-  }
-
-  .nav-menu {
-    display: none;
-    grid-column: 1 / -1;
-    gap: 8px;
-    margin-top: 10px;
-    border-top: 1px solid rgba(255, 255, 255, 0.46);
-    padding-top: 10px;
-  }
-
-  .nav.is-open .nav-menu {
-    display: grid;
-  }
-
-  .nav-links {
-    width: 100%;
-    gap: 6px;
-    overflow: visible;
-    padding-bottom: 0;
-  }
-
-  .nav-menu .nav-links {
-    display: grid;
-  }
-
-  .nav-center {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-
-  .nav-actions {
-    grid-template-columns: repeat(4, minmax(0, 1fr));
-  }
-
-  .nav-links a,
-  .nav-random,
-  .nav-search,
-  .nav-console,
-  .theme-toggle {
-    width: 100%;
-    justify-content: center;
-  }
-
-  .control-console {
-    align-items: end;
-    padding: 14px;
-  }
-
-  .control-console-panel {
-    max-height: calc(100vh - 28px);
-    border-radius: 8px;
-    padding: 18px;
-  }
-
-  .control-console-grid,
-  .control-console-info {
-    grid-template-columns: 1fr;
-  }
-
-  .control-site-card {
-    grid-template-columns: 40px minmax(0, 1fr);
-    gap: 12px;
-    padding: 14px;
-  }
-
-  .control-site-card > i {
-    width: 40px;
-    height: 40px;
-  }
-
-  .control-site-card small {
-    grid-column: 1 / -1;
-  }
-
-  .theme-toggle {
-    min-height: 38px;
-  }
-
-  .hero {
-    min-height: 300px;
-  }
-
-  .home-hero {
-    min-height: auto;
-    padding-top: 34px;
-  }
-
-  .hero-talk {
-    min-height: 164px;
-    padding: 14px;
-  }
-
-  .hero-talk .talk-list {
-    height: 102px;
-  }
-
-  .hero-talk .item {
-    min-height: 34px;
-    padding: 7px 0;
-    font-size: 0.9rem;
-  }
-
-  .home-sidebar {
-    grid-template-columns: 1fr;
-  }
-
-  .native-feature-grid,
-  .friend-link-grid {
-    grid-template-columns: 1fr;
-  }
-
-  #talk .talk_item {
-    width: 100%;
-    margin-right: 0;
-  }
-
-  #talk .talk_item .talk_content .zone_imgbox {
-    --talk-image-size: calc(50% - 5px);
-  }
-
-  .calendar-widget,
-  .schedule-widget {
-    grid-template-columns: 1fr;
-  }
-
-  .article-sidebar {
-    grid-template-columns: 1fr;
-  }
-
-  .article-sticky-sidebar {
-    grid-template-columns: 1fr;
-  }
-
-  .archive-timeline {
-    padding-left: 24px;
-  }
-
-  .archive-timeline::before {
-    left: 7px;
-  }
-
-  .archive-year {
-    grid-template-columns: 1fr;
-    gap: 14px;
-  }
-
-  .archive-year-marker {
-    left: -25px;
-  }
-
-  .archive-year-head {
-    position: static;
-  }
-
-  .archive-month {
-    grid-template-columns: 1fr;
-    gap: 12px;
-    padding: 16px;
-  }
-
-  .archive-month-label {
-    display: flex;
-    align-items: baseline;
-    justify-content: space-between;
-    gap: 12px;
-  }
-
-  .archive-list a {
-    grid-template-columns: 38px minmax(0, 1fr);
-    gap: 10px;
-    padding: 8px;
-  }
-
-  .archive-list a time {
-    width: 34px;
-    height: 34px;
-  }
-
-  .stats-chart {
-    padding: 18px;
-  }
-
-  .stats-chart-body {
-    grid-template-columns: 1fr;
-  }
-
-  .chart-legend {
-    grid-template-columns: 1fr;
-  }
-
-  .line-chart {
-    min-width: 460px;
-  }
-
-  .article {
-    margin-top: 32px;
-  }
-
-  .article-header-cover {
-    min-height: 300px;
-    padding-top: 92px;
-  }
-
-  .article-header-cover h1 {
-    font-size: clamp(2rem, 11vw, 3rem);
-  }
-
-  .article-hero-meta {
-    font-size: 0.9rem;
-  }
-
-  .article-summary-card {
-    padding: 34px 16px 16px;
-  }
-
-  .article-summary-footer {
-    align-items: flex-start;
-    flex-direction: column;
-    gap: 8px;
-  }
-
-  .prose .code-block,
-  .table-scroll {
-    margin-right: calc(var(--article-padding) * -0.5);
-    margin-left: calc(var(--article-padding) * -0.5);
-  }
-
-  .prose .code-block pre {
-    padding-right: 16px;
-    padding-left: 16px;
-  }
-
-  .prose table {
-    min-width: 560px;
-    font-size: 0.9rem;
-  }
-
-  .post-copyright-card {
-    padding: 22px 18px 18px;
-  }
-
-  .post-copyright-meta {
-    grid-template-columns: 1fr;
-    gap: 12px;
-  }
-
-  .post-copyright-footer {
-    align-items: flex-start;
-    flex-direction: column;
-  }
-
-  .footer-inner {
-    grid-template-columns: 1fr;
-    gap: 28px;
-    padding: 36px 0 34px;
-    text-align: center;
-  }
-
-  .footer-top {
-    justify-items: center;
-  }
-
-  .footer-bottom {
-    flex-direction: column;
-    align-items: center;
-    text-align: center;
-  }
-
-  .footer-meta {
-    justify-items: center;
-    text-align: center;
-  }
-}
-
-@keyframes random-button-spin {
-  0% {
-    transform: rotate(0deg) scale(1);
-  }
-
-  55% {
-    transform: rotate(210deg) scale(1.18);
-  }
-
-  100% {
-    transform: rotate(360deg) scale(1);
-  }
-}
-
-@keyframes random-button-sheen {
-  0% {
-    transform: translateX(-135%);
-  }
-
-  100% {
-    transform: translateX(135%);
-  }
-}
-
-@keyframes random-card-pulse {
-  0% {
-    opacity: 0.55;
-    transform: scale(0.94);
-  }
-
-  100% {
-    opacity: 0;
-    transform: scale(1.16);
-  }
-}
-
-@keyframes random-card-fly {
-  0% {
-    opacity: 0;
-    filter: blur(2px);
-    transform: translate3d(-58vw, -50%, 0) rotate(calc(var(--flight-rotate) - 8deg)) scale(0.74);
-  }
-
-  22% {
-    opacity: 0.88;
-    filter: blur(0);
-  }
-
-  58% {
-    opacity: 0.92;
-    transform: translate3d(-50%, -50%, 0) rotate(var(--flight-rotate)) scale(1);
-  }
-
-  100% {
-    opacity: 0;
-    filter: blur(2px);
-    transform: translate3d(58vw, -50%, 0) rotate(calc(var(--flight-rotate) + 10deg)) scale(0.78);
-  }
-}
-
-@keyframes random-loading-dots {
-  0% {
-    content: "";
-  }
-
-  25% {
-    content: ".";
-  }
-
-  50% {
-    content: "..";
-  }
-
-  75%,
-  100% {
-    content: "...";
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .nav-random.is-randomizing::after,
-  .nav-random.is-randomizing .nav-icon,
-  .random-post-flying-card,
-  .random-post-transition-card::before,
-  .random-post-transition-card::after,
-  .random-post-transition-card i,
-  .random-post-transition-card span::after {
-    animation: none;
-  }
-
-  .random-post-transition,
-  .random-post-transition-card {
-    transition: none;
-  }
-}
+@import "./site/01-base.css";
+@import "./site/02-navigation.css";
+@import "./site/03-overlays.css";
+@import "./site/04-layout.css";
+@import "./site/05-cards-sidebar.css";
+@import "./site/06-article-prose.css";
+@import "./site/07-post-comments.css";
+@import "./site/08-archives-stats.css";
+@import "./site/09-shuoshuo.css";
+@import "./site/10-pages.css";
+@import "./site/11-footer.css";
+@import "./site/12-theme.css";
+@import "./site/13-responsive.css";
+@import "./site/14-animations.css";
diff --git a/src/styles/site/01-base.css b/src/styles/site/01-base.css
new file mode 100644
index 0000000..690b3cc
--- /dev/null
+++ b/src/styles/site/01-base.css
@@ -0,0 +1,60 @@
+@import url("https://fontsapi.zeoseven.com/7/main/result.css");
+
+:root {
+  color-scheme: light;
+  --bg: #f7f5ef;
+  --surface: #fffdf8;
+  --text: #20242a;
+  --muted: #686f78;
+  --line: #ded8cc;
+  --accent: #0f766e;
+  --accent-strong: #14532d;
+  --shadow: 0 14px 45px rgba(58, 51, 38, 0.1);
+  --page-gutter: clamp(20px, 4vw, 64px);
+  --wide-width: 1440px;
+  --content-width: 1280px;
+  --article-width: 1080px;
+  --narrow-width: 1000px;
+}
+
+:root[data-theme='dark'] {
+  color-scheme: dark;
+  --bg: #0b1014;
+  --surface: #141b21;
+  --text: #eef4f6;
+  --muted: #b6c3c9;
+  --line: rgba(181, 198, 207, 0.28);
+  --accent: #8be0d5;
+  --accent-strong: #b7e7d4;
+  --shadow: 0 18px 52px rgba(0, 0, 0, 0.44);
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  color: var(--text);
+  font-family: "Zhuque Fangsong (technical preview)";
+  font-weight: normal;
+  line-height: 1.75;
+  background:
+    linear-gradient(rgba(247, 245, 239, 0.86), rgba(247, 245, 239, 0.95)),
+    url('/images/background.png') center top / cover fixed;
+  transition:
+    color 0.22s ease,
+    background-color 0.22s ease;
+}
+
+:root[data-theme='dark'] body {
+  background:
+    linear-gradient(rgba(7, 10, 14, 0.9), rgba(8, 13, 17, 0.96)),
+    url('/images/background.png') center top / cover fixed;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
diff --git a/src/styles/site/02-navigation.css b/src/styles/site/02-navigation.css
new file mode 100644
index 0000000..9777286
--- /dev/null
+++ b/src/styles/site/02-navigation.css
@@ -0,0 +1,380 @@
+.site-header {
+  position: sticky;
+  top: 12px;
+  z-index: 10;
+  pointer-events: none;
+}
+
+.nav {
+  position: relative;
+  width: min(var(--wide-width), calc(100% - (var(--page-gutter) * 2)));
+  min-height: 58px;
+  margin: 0 auto;
+  padding: 0 18px;
+  display: grid;
+  grid-template-columns: minmax(120px, 1fr) auto minmax(120px, 1fr);
+  align-items: center;
+  gap: 24px;
+  overflow: hidden;
+  border: 1px solid rgba(255, 255, 255, 0.56);
+  border-radius: 999px;
+  background:
+    linear-gradient(135deg, rgba(255, 255, 255, 0.52), rgba(255, 255, 255, 0.2)),
+    rgba(255, 255, 255, 0.28);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.82),
+    inset 0 -18px 38px rgba(255, 255, 255, 0.16),
+    0 18px 54px rgba(44, 55, 63, 0.18);
+  backdrop-filter: blur(22px) saturate(180%);
+  -webkit-backdrop-filter: blur(22px) saturate(180%);
+  pointer-events: auto;
+}
+
+.nav::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background:
+    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.72), transparent 30%),
+    linear-gradient(90deg, rgba(255, 255, 255, 0.42), transparent 38%, rgba(255, 255, 255, 0.22));
+  opacity: 0.74;
+  pointer-events: none;
+}
+
+.nav::after {
+  display: none;
+}
+
+.brand {
+  position: relative;
+  z-index: 1;
+  font-size: 1.05rem;
+  font-weight: 800;
+}
+
+.nav-menu {
+  display: contents;
+}
+
+.nav-menu-toggle {
+  position: relative;
+  z-index: 1;
+  display: none;
+  width: 40px;
+  height: 40px;
+  place-items: center;
+  border: 1px solid transparent;
+  border-radius: 999px;
+  color: var(--muted);
+  font: inherit;
+  background: transparent;
+  cursor: pointer;
+  transition:
+    color 0.2s ease,
+    background-color 0.2s ease,
+    border-color 0.2s ease,
+    box-shadow 0.2s ease,
+    transform 0.2s ease;
+}
+
+.nav-menu-close {
+  display: none;
+}
+
+.nav-links {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  color: var(--muted);
+  font-size: 0.94rem;
+  white-space: nowrap;
+}
+
+.nav-center {
+  justify-content: center;
+}
+
+.nav-actions {
+  justify-content: flex-end;
+}
+
+.nav-links a,
+.nav-random,
+.nav-search,
+.nav-console,
+.theme-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  border: 1px solid transparent;
+  border-radius: 999px;
+  padding: 7px 12px;
+  transition:
+    color 0.2s ease,
+    background-color 0.2s ease,
+    border-color 0.2s ease,
+    box-shadow 0.2s ease,
+    transform 0.2s ease;
+}
+
+.nav-search,
+.nav-random,
+.nav-console,
+.theme-toggle {
+  color: inherit;
+  font: inherit;
+  line-height: inherit;
+  background: transparent;
+  cursor: pointer;
+}
+
+.nav-random {
+  position: relative;
+  overflow: hidden;
+}
+
+.nav-random::after {
+  content: "";
+  position: absolute;
+  inset: 3px;
+  border-radius: inherit;
+  background:
+    linear-gradient(120deg, transparent 8%, rgba(255, 255, 255, 0.82) 34%, transparent 58%);
+  opacity: 0;
+  transform: translateX(-135%);
+  pointer-events: none;
+}
+
+.nav-random.is-randomizing {
+  color: var(--accent);
+  border-color: rgba(15, 118, 110, 0.22);
+  background: rgba(255, 255, 255, 0.5);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.76),
+    0 10px 24px rgba(15, 118, 110, 0.16);
+}
+
+.nav-random.is-randomizing::after {
+  opacity: 1;
+  animation: random-button-sheen 0.72s ease both;
+}
+
+.nav-random.is-randomizing .nav-icon {
+  animation: random-button-spin 0.72s cubic-bezier(0.2, 0.8, 0.2, 1) both;
+}
+
+.nav-icon {
+  display: inline-grid;
+  width: 16px;
+  min-width: 16px;
+  height: 16px;
+  place-items: center;
+  font-size: 0.95em;
+  line-height: 1;
+}
+
+.theme-toggle {
+  justify-content: center;
+  width: 38px;
+  min-height: 38px;
+  padding: 0;
+}
+
+:root:not([data-theme='dark']) .theme-toggle-sun,
+:root[data-theme='dark'] .theme-toggle-moon {
+  display: none;
+}
+
+.nav-links a:hover,
+.nav-random:hover,
+.nav-search:hover,
+.nav-console:hover,
+.theme-toggle:hover,
+.site-footer a:hover,
+.section-heading a:hover {
+  color: var(--accent);
+}
+
+.custom-context-menu {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 1000;
+  width: min(218px, calc(100vw - 20px));
+  max-height: calc(100vh - 20px);
+  overflow-y: auto;
+  border: 1px solid rgba(255, 255, 255, 0.58);
+  border-radius: 14px;
+  padding: 8px;
+  color: #4f565b;
+  background:
+    linear-gradient(145deg, rgba(255, 255, 255, 0.78), rgba(235, 248, 231, 0.68)),
+    rgba(245, 252, 241, 0.82);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.86),
+    0 18px 42px rgba(44, 55, 63, 0.18);
+  backdrop-filter: blur(18px) saturate(165%);
+  -webkit-backdrop-filter: blur(18px) saturate(165%);
+  opacity: 0;
+  pointer-events: none;
+  transform: translate3d(0, 6px, 0) scale(0.98);
+  transform-origin: top left;
+  transition:
+    opacity 0.14s ease,
+    transform 0.14s ease;
+}
+
+.custom-context-menu.is-open {
+  opacity: 1;
+  pointer-events: auto;
+  transform: translate3d(0, 0, 0) scale(1);
+}
+
+.custom-context-menu [hidden] {
+  display: none !important;
+}
+
+.context-menu-nav {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 6px;
+  padding-bottom: 7px;
+}
+
+.context-menu-group {
+  display: grid;
+  gap: 2px;
+  border-top: 1px dashed rgba(104, 111, 120, 0.18);
+  padding-top: 7px;
+}
+
+.context-menu-group + .context-menu-group {
+  margin-top: 7px;
+}
+
+.custom-context-menu :where(a, button) {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  min-width: 0;
+  border: 0;
+  color: inherit;
+  font: inherit;
+  line-height: 1.25;
+  text-align: left;
+  background: transparent;
+  cursor: pointer;
+}
+
+.context-menu-nav :where(a, button) {
+  justify-content: center;
+  height: 42px;
+  border: 1px solid rgba(178, 194, 170, 0.42);
+  border-radius: 14px;
+  color: #6b7174;
+  background: rgba(255, 255, 255, 0.44);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.76);
+}
+
+.context-menu-group :where(a, button) {
+  gap: 12px;
+  min-height: 40px;
+  border-radius: 10px;
+  padding: 9px 10px;
+}
+
+.custom-context-menu :where(a, button):hover,
+.custom-context-menu :where(a, button):focus-visible {
+  color: var(--accent);
+  background: rgba(255, 255, 255, 0.58);
+  outline: 0;
+}
+
+.custom-context-menu i {
+  display: inline-grid;
+  width: 18px;
+  min-width: 18px;
+  height: 18px;
+  place-items: center;
+  color: #737a7d;
+  font-size: 0.98rem;
+  line-height: 1;
+}
+
+.custom-context-menu :where(a, button):hover i,
+.custom-context-menu :where(a, button):focus-visible i {
+  color: currentColor;
+}
+
+.custom-context-menu span {
+  min-width: 0;
+  overflow: hidden;
+  font-size: 0.95rem;
+  font-weight: 650;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.context-menu-native-hint {
+  position: fixed;
+  right: max(16px, env(safe-area-inset-right));
+  bottom: max(16px, env(safe-area-inset-bottom));
+  z-index: 900;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  max-width: min(300px, calc(100vw - 32px));
+  border: 1px solid rgba(255, 255, 255, 0.58);
+  border-radius: 999px;
+  padding: 8px 12px;
+  color: #4f565b;
+  font-size: 0.84rem;
+  font-weight: 650;
+  line-height: 1.3;
+  background:
+    linear-gradient(145deg, rgba(255, 255, 255, 0.78), rgba(235, 248, 231, 0.68)),
+    rgba(245, 252, 241, 0.82);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.86),
+    0 12px 30px rgba(44, 55, 63, 0.14);
+  backdrop-filter: blur(16px) saturate(165%);
+  -webkit-backdrop-filter: blur(16px) saturate(165%);
+  opacity: 0;
+  pointer-events: none;
+  transform: translate3d(0, 8px, 0);
+  transition:
+    opacity 0.18s ease,
+    transform 0.18s ease;
+}
+
+.context-menu-native-hint.is-visible {
+  opacity: 1;
+  transform: translate3d(0, 0, 0);
+}
+
+.context-menu-native-hint kbd {
+  border: 1px solid rgba(178, 194, 170, 0.52);
+  border-radius: 7px;
+  padding: 1px 6px;
+  color: var(--accent);
+  font: inherit;
+  background: rgba(255, 255, 255, 0.52);
+  box-shadow: inset 0 -1px 0 rgba(44, 55, 63, 0.08);
+}
+
+.nav-links a:hover,
+.nav-random:hover,
+.nav-search:hover,
+.nav-console:hover,
+.theme-toggle:hover,
+.nav-menu-toggle:hover {
+  border-color: rgba(255, 255, 255, 0.62);
+  background: rgba(255, 255, 255, 0.38);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.72),
+    0 8px 18px rgba(15, 118, 110, 0.1);
+  transform: translateY(-1px);
+}
+
diff --git a/src/styles/site/03-overlays.css b/src/styles/site/03-overlays.css
new file mode 100644
index 0000000..fcae75e
--- /dev/null
+++ b/src/styles/site/03-overlays.css
@@ -0,0 +1,485 @@
+.random-post-transition {
+  position: fixed;
+  inset: 0;
+  z-index: 1200;
+  display: grid;
+  place-items: center;
+  padding: var(--page-gutter);
+  opacity: 0;
+  pointer-events: none;
+  background: rgba(247, 245, 239, 0.34);
+  backdrop-filter: blur(6px) saturate(145%);
+  -webkit-backdrop-filter: blur(6px) saturate(145%);
+  transition: opacity 0.18s ease;
+}
+
+.random-post-transition.is-visible {
+  opacity: 1;
+}
+
+.random-post-flight {
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+  pointer-events: none;
+}
+
+.random-post-flying-card {
+  position: absolute;
+  top: calc(50% + var(--flight-y));
+  left: 50%;
+  width: min(260px, 68vw);
+  border: 1px solid rgba(255, 255, 255, 0.64);
+  border-radius: 8px;
+  padding: 12px 14px;
+  color: #2f4358;
+  background:
+    linear-gradient(135deg, rgba(255, 255, 255, 0.88), rgba(238, 250, 246, 0.68)),
+    rgba(255, 255, 255, 0.74);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.86),
+    0 18px 48px rgba(44, 55, 63, 0.16);
+  opacity: 0;
+  transform: translate3d(-50vw, -50%, 0) rotate(var(--flight-rotate)) scale(0.82);
+  animation: random-card-fly 1.16s cubic-bezier(0.16, 0.84, 0.28, 1) var(--flight-delay) both;
+}
+
+.random-post-flying-card small,
+.random-post-flying-card strong {
+  display: block;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.random-post-flying-card small {
+  color: var(--muted);
+  font-size: 0.74rem;
+  font-weight: 700;
+}
+
+.random-post-flying-card strong {
+  margin-top: 4px;
+  font-size: 0.95rem;
+  font-weight: 800;
+}
+
+.random-post-transition-card {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: 12px;
+  min-width: min(280px, 100%);
+  border: 1px solid rgba(255, 255, 255, 0.66);
+  border-radius: 999px;
+  padding: 16px 22px;
+  color: var(--accent);
+  font-size: 1rem;
+  font-weight: 750;
+  background:
+    linear-gradient(135deg, rgba(255, 255, 255, 0.84), rgba(238, 250, 246, 0.62)),
+    rgba(255, 255, 255, 0.7);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.88),
+    0 24px 64px rgba(44, 55, 63, 0.2);
+  transform: translateY(8px) scale(0.96);
+  transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+
+.random-post-transition.is-visible .random-post-transition-card {
+  transform: translateY(0) scale(1);
+}
+
+.random-post-transition-card::before,
+.random-post-transition-card::after {
+  content: "";
+  position: absolute;
+  inset: -10px;
+  border: 1px solid rgba(15, 118, 110, 0.24);
+  border-radius: inherit;
+  opacity: 0;
+  animation: random-card-pulse 1.1s ease-out infinite;
+}
+
+.random-post-transition-card::after {
+  animation-delay: 0.28s;
+}
+
+.random-post-transition-card i {
+  display: inline-grid;
+  width: 22px;
+  min-width: 22px;
+  height: 22px;
+  place-items: center;
+  animation: random-button-spin 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
+}
+
+.random-post-transition-card span {
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+.random-post-transition-card span::after {
+  content: "";
+  display: inline-block;
+  width: 1.25em;
+  text-align: left;
+  animation: random-loading-dots 1s steps(4, end) infinite;
+}
+
+.has-control-console {
+  overflow: hidden;
+}
+
+.control-console {
+  position: fixed;
+  inset: 0;
+  z-index: 900;
+  display: grid;
+  place-items: center;
+  padding: var(--page-gutter);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.18s ease;
+}
+
+.control-console.is-open {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.control-console-backdrop {
+  position: absolute;
+  inset: 0;
+  background: rgba(28, 37, 42, 0.36);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+}
+
+.control-console-panel {
+  position: relative;
+  width: min(880px, 100%);
+  max-height: min(760px, calc(100vh - (var(--page-gutter) * 2)));
+  overflow: auto;
+  border: 1px solid rgba(255, 255, 255, 0.58);
+  border-radius: 8px;
+  padding: clamp(20px, 4vw, 30px);
+  background:
+    radial-gradient(circle at 14% 0%, rgba(255, 255, 255, 0.76), transparent 34%),
+    linear-gradient(145deg, rgba(255, 255, 255, 0.76), rgba(226, 248, 241, 0.48)),
+    rgba(255, 253, 248, 0.88);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.82),
+    0 28px 80px rgba(44, 55, 63, 0.24);
+  backdrop-filter: blur(20px) saturate(165%);
+  -webkit-backdrop-filter: blur(20px) saturate(165%);
+  transform: translateY(10px) scale(0.98);
+  transition: transform 0.18s ease;
+}
+
+.control-console.is-open .control-console-panel {
+  transform: translateY(0) scale(1);
+}
+
+.control-console-panel:focus {
+  outline: 0;
+}
+
+.control-console-head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 20px;
+  margin-bottom: 20px;
+}
+
+.control-console-head p {
+  margin: 0 0 4px;
+  color: var(--accent);
+  font-size: 0.78rem;
+  font-weight: 800;
+}
+
+.control-console-head h2 {
+  margin: 0;
+  color: #20242a;
+  font-size: clamp(1.8rem, 5vw, 2.7rem);
+  line-height: 1.08;
+}
+
+.control-console-close {
+  display: grid;
+  width: 40px;
+  height: 40px;
+  place-items: center;
+  flex: 0 0 auto;
+  border: 1px solid rgba(15, 118, 110, 0.16);
+  border-radius: 999px;
+  color: var(--accent);
+  font: inherit;
+  background: rgba(236, 253, 245, 0.64);
+  cursor: pointer;
+  transition:
+    color 0.2s ease,
+    background-color 0.2s ease,
+    transform 0.2s ease;
+}
+
+.control-console-close:hover {
+  color: #fff;
+  background: #3eb8be;
+  transform: translateY(-1px);
+}
+
+.control-console-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 14px;
+}
+
+.control-site-card {
+  display: grid;
+  grid-template-columns: 46px minmax(0, 1fr);
+  gap: 14px;
+  align-items: center;
+  min-width: 0;
+  border: 1px solid rgba(15, 118, 110, 0.14);
+  border-radius: 8px;
+  padding: 16px;
+  background: rgba(236, 253, 245, 0.58);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.62);
+  transition:
+    border-color 0.2s ease,
+    background-color 0.2s ease,
+    transform 0.2s ease;
+}
+
+.control-site-card:hover {
+  border-color: rgba(15, 118, 110, 0.28);
+  background: rgba(236, 253, 245, 0.78);
+  transform: translateY(-2px);
+}
+
+.control-site-card > i {
+  display: grid;
+  width: 46px;
+  height: 46px;
+  place-items: center;
+  border-radius: 8px;
+  color: #fff;
+  background: #3eb8be;
+}
+
+.control-site-card span {
+  display: grid;
+  min-width: 0;
+  gap: 3px;
+}
+
+.control-site-card strong {
+  color: #33433f;
+  font-size: 1.04rem;
+  line-height: 1.25;
+}
+
+.control-site-card em,
+.control-site-card small {
+  overflow: hidden;
+  color: var(--muted);
+  font-style: normal;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.control-site-card small {
+  grid-column: 2;
+  font-size: 0.82rem;
+}
+
+.control-console-info {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 12px;
+  margin-top: 18px;
+}
+
+.control-console-info section {
+  display: grid;
+  gap: 4px;
+  border: 1px solid rgba(222, 216, 204, 0.72);
+  border-radius: 8px;
+  padding: 14px;
+  background: rgba(255, 253, 248, 0.56);
+}
+
+.control-console-info span {
+  color: var(--muted);
+  font-size: 0.84rem;
+  font-weight: 700;
+}
+
+.control-console-info strong {
+  min-width: 0;
+  overflow-wrap: anywhere;
+  color: #2f4358;
+  font-size: 1rem;
+}
+
+:root[data-theme='dark'] .nav {
+  border-color: rgba(166, 184, 194, 0.2);
+  background:
+    linear-gradient(135deg, rgba(25, 35, 42, 0.82), rgba(10, 15, 20, 0.66)),
+    rgba(10, 15, 20, 0.68);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.12),
+    inset 0 -18px 38px rgba(0, 0, 0, 0.18),
+    0 18px 54px rgba(0, 0, 0, 0.42);
+}
+
+:root[data-theme='dark'] .nav::before {
+  background:
+    radial-gradient(circle at 18% 0%, rgba(125, 211, 199, 0.16), transparent 32%),
+    linear-gradient(90deg, rgba(255, 255, 255, 0.07), transparent 42%, rgba(125, 211, 199, 0.08));
+}
+
+:root[data-theme='dark'] .nav::after {
+  background: rgba(255, 255, 255, 0.12);
+}
+
+:root[data-theme='dark'] .nav-links a:hover,
+:root[data-theme='dark'] .nav-random:hover,
+:root[data-theme='dark'] .nav-search:hover,
+:root[data-theme='dark'] .nav-console:hover,
+:root[data-theme='dark'] .theme-toggle:hover,
+:root[data-theme='dark'] .nav-menu-toggle:hover {
+  border-color: rgba(125, 211, 199, 0.28);
+  background: rgba(125, 211, 199, 0.11);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.12),
+    0 8px 18px rgba(0, 0, 0, 0.18);
+}
+
+:root[data-theme='dark'] .nav-random.is-randomizing {
+  color: var(--accent);
+  border-color: rgba(139, 224, 213, 0.32);
+  background: rgba(125, 211, 199, 0.14);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.12),
+    0 10px 24px rgba(0, 0, 0, 0.28);
+}
+
+:root[data-theme='dark'] .random-post-transition {
+  background: rgba(3, 10, 12, 0.38);
+}
+
+:root[data-theme='dark'] .random-post-transition-card {
+  border-color: rgba(166, 184, 194, 0.22);
+  background:
+    linear-gradient(135deg, rgba(25, 35, 42, 0.9), rgba(10, 17, 22, 0.76)),
+    rgba(14, 22, 28, 0.84);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.1),
+    0 28px 74px rgba(0, 0, 0, 0.42);
+}
+
+:root[data-theme='dark'] .random-post-transition-card::before,
+:root[data-theme='dark'] .random-post-transition-card::after {
+  border-color: rgba(139, 224, 213, 0.26);
+}
+
+:root[data-theme='dark'] .random-post-flying-card {
+  border-color: rgba(166, 184, 194, 0.2);
+  color: #edf7f5;
+  background:
+    linear-gradient(135deg, rgba(25, 35, 42, 0.88), rgba(10, 17, 22, 0.72)),
+    rgba(14, 22, 28, 0.78);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.1),
+    0 22px 54px rgba(0, 0, 0, 0.34);
+}
+
+:root[data-theme='dark'] .control-console-backdrop {
+  background: rgba(3, 10, 12, 0.58);
+}
+
+:root[data-theme='dark'] .control-console-panel {
+  border-color: rgba(166, 184, 194, 0.2);
+  background:
+    radial-gradient(circle at 14% 0%, rgba(125, 211, 199, 0.08), transparent 34%),
+    linear-gradient(145deg, rgba(24, 34, 42, 0.9), rgba(10, 17, 22, 0.84)),
+    rgba(14, 22, 28, 0.84);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.1),
+    0 28px 80px rgba(0, 0, 0, 0.46);
+}
+
+:root[data-theme='dark'] .control-console-head h2,
+:root[data-theme='dark'] .control-site-card strong,
+:root[data-theme='dark'] .control-console-info strong {
+  color: #edf7f5;
+}
+
+:root[data-theme='dark'] .control-site-card,
+:root[data-theme='dark'] .control-console-info section,
+:root[data-theme='dark'] .control-console-close {
+  border-color: rgba(125, 211, 199, 0.2);
+  background: rgba(125, 211, 199, 0.08);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
+}
+
+:root[data-theme='dark'] .control-console-close:hover {
+  color: #081315;
+  background: var(--accent);
+}
+
+:root[data-theme='dark'] .custom-context-menu {
+  border-color: rgba(166, 184, 194, 0.2);
+  color: #e2ecef;
+  background:
+    linear-gradient(145deg, rgba(27, 39, 47, 0.9), rgba(10, 17, 22, 0.82)),
+    rgba(14, 22, 28, 0.84);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.1),
+    0 18px 42px rgba(0, 0, 0, 0.42);
+}
+
+:root[data-theme='dark'] .context-menu-nav :where(a, button) {
+  border-color: rgba(166, 184, 194, 0.16);
+  color: #c7d4d9;
+  background: rgba(255, 255, 255, 0.08);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
+}
+
+:root[data-theme='dark'] .context-menu-group {
+  border-top-color: rgba(166, 184, 194, 0.16);
+}
+
+:root[data-theme='dark'] .custom-context-menu :where(a, button):hover,
+:root[data-theme='dark'] .custom-context-menu :where(a, button):focus-visible {
+  color: var(--accent);
+  background: rgba(125, 211, 199, 0.1);
+}
+
+:root[data-theme='dark'] .custom-context-menu i {
+  color: #c1cdd2;
+}
+
+:root[data-theme='dark'] .context-menu-native-hint {
+  border-color: rgba(166, 184, 194, 0.2);
+  color: #e2ecef;
+  background:
+    linear-gradient(145deg, rgba(27, 39, 47, 0.9), rgba(10, 17, 22, 0.82)),
+    rgba(14, 22, 28, 0.84);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.1),
+    0 12px 30px rgba(0, 0, 0, 0.32);
+}
+
+:root[data-theme='dark'] .context-menu-native-hint kbd {
+  border-color: rgba(166, 184, 194, 0.2);
+  color: var(--accent);
+  background: rgba(255, 255, 255, 0.08);
+  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.18);
+}
+
diff --git a/src/styles/site/04-layout.css b/src/styles/site/04-layout.css
new file mode 100644
index 0000000..142af6d
--- /dev/null
+++ b/src/styles/site/04-layout.css
@@ -0,0 +1,261 @@
+.hero {
+  width: min(var(--wide-width), calc(100% - (var(--page-gutter) * 2)));
+  min-height: 360px;
+  margin: 0 auto;
+  display: grid;
+  align-items: center;
+}
+
+.compact-hero {
+  min-height: 260px;
+}
+
+.hero h1 {
+  margin: 0;
+  font-size: clamp(3rem, 8vw, 6.5rem);
+  line-height: 0.95;
+}
+
+.hero p {
+  max-width: 620px;
+  margin: 18px 0 0;
+  color: var(--muted);
+  font-size: 1.12rem;
+}
+
+.home-hero {
+  grid-template-columns: minmax(320px, 0.74fr) minmax(360px, 1fr);
+  gap: clamp(28px, 6vw, 84px);
+}
+
+.hero-copy {
+  min-width: 0;
+}
+
+.hero-talk {
+  align-self: center;
+  width: 100%;
+  max-width: 820px;
+  min-height: 190px;
+  overflow: hidden;
+  border: 1px solid rgba(255, 255, 255, 0.52);
+  border-radius: 8px;
+  padding: 18px 18px 16px;
+  background:
+    linear-gradient(135deg, rgba(255, 255, 255, 0.3), rgba(241, 250, 244, 0.16)),
+    rgba(255, 255, 255, 0.18);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.58),
+    0 18px 46px rgba(44, 55, 63, 0.12);
+  backdrop-filter: blur(10px) saturate(135%);
+  -webkit-backdrop-filter: blur(10px) saturate(135%);
+}
+
+.hero-talk-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  margin-bottom: 12px;
+  color: var(--accent-strong);
+  font-size: 0.86rem;
+  font-weight: 800;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+.hero-talk-head a {
+  display: grid;
+  width: 34px;
+  height: 34px;
+  place-items: center;
+  border: 1px solid rgba(15, 118, 110, 0.16);
+  border-radius: 999px;
+  color: var(--accent);
+  background: rgba(236, 253, 245, 0.54);
+  transition:
+    color 0.2s ease,
+    background-color 0.2s ease,
+    transform 0.2s ease;
+}
+
+.hero-talk-head a:hover {
+  color: #fff;
+  background: #3eb8be;
+  transform: translateY(-1px);
+}
+
+.hero-talk .talk-list {
+  display: grid;
+  height: 120px;
+  margin: 0;
+  overflow: hidden;
+  padding: 0;
+  list-style: none;
+}
+
+.hero-talk .talk-list:empty::before {
+  content: "说说加载中...";
+  display: grid;
+  min-height: 58px;
+  align-items: center;
+  color: var(--muted);
+  font-size: 0.95rem;
+}
+
+.hero-talk .item {
+  display: flex;
+  min-height: 40px;
+  align-items: center;
+  gap: 10px;
+  border-top: 1px dashed rgba(104, 111, 120, 0.22);
+  padding: 9px 2px;
+  color: #40505a;
+  font-size: 0.96rem;
+  line-height: 1.55;
+}
+
+.hero-talk .item:first-child {
+  border-top: 0;
+}
+
+.hero-talk .item::before {
+  content: "";
+  width: 7px;
+  height: 7px;
+  flex: 0 0 auto;
+  border-radius: 999px;
+  background: #3eb8be;
+  box-shadow: 0 0 0 4px rgba(62, 184, 190, 0.14);
+}
+
+.hero-talk .item i {
+  color: var(--accent);
+}
+
+.eyebrow {
+  margin: 0 0 16px !important;
+  color: var(--accent-strong) !important;
+  font-size: 0.95rem !important;
+  font-weight: 700;
+}
+
+.content-wrap {
+  width: min(var(--content-width), calc(100% - (var(--page-gutter) * 2)));
+  margin: 0 auto 72px;
+}
+
+.content-wrap.narrow {
+  width: min(var(--narrow-width), calc(100% - (var(--page-gutter) * 2)));
+}
+
+.page-header-card {
+  position: relative;
+  overflow: hidden;
+  margin: 40px 0 26px;
+  border: 1px solid rgba(255, 255, 255, 0.58);
+  border-radius: 8px;
+  padding: clamp(26px, 5vw, 44px);
+  background:
+    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.78), transparent 36%),
+    linear-gradient(135deg, rgba(255, 255, 255, 0.58), rgba(238, 250, 243, 0.36)),
+    rgba(255, 253, 248, 0.72);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.82),
+    0 18px 48px rgba(58, 51, 38, 0.12);
+  backdrop-filter: blur(18px) saturate(165%);
+  -webkit-backdrop-filter: blur(18px) saturate(165%);
+}
+
+.page-header-card::after {
+  content: "";
+  position: absolute;
+  top: 10px;
+  right: 18px;
+  left: 18px;
+  height: 1px;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.76);
+}
+
+.page-header-eyebrow {
+  position: relative;
+  z-index: 1;
+  margin: 0 0 8px;
+  color: var(--accent);
+  font-size: 0.86rem;
+  font-weight: 700;
+}
+
+.page-header-card h1,
+.content-wrap .page-header-card h1 {
+  position: relative;
+  z-index: 1;
+  margin: 0;
+  color: #20242a;
+  font-size: clamp(2rem, 5vw, 3.6rem);
+  line-height: 1.08;
+}
+
+.page-header-subtitle {
+  position: relative;
+  z-index: 1;
+  max-width: 620px;
+  margin: 12px 0 0;
+  color: var(--muted);
+  font-size: 1rem;
+}
+
+.page-with-card {
+  margin-bottom: 0;
+}
+
+.page-article {
+  margin-top: 0;
+}
+
+.post-layout {
+  width: min(var(--wide-width), calc(100% - (var(--page-gutter) * 2)));
+  margin: 40px auto 84px;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 320px;
+  align-items: start;
+  gap: 28px;
+}
+
+.post-layout .article {
+  width: 100%;
+  min-width: 0;
+  margin: 0;
+}
+
+.home-layout {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 320px;
+  align-items: start;
+  gap: 24px;
+}
+
+.home-main {
+  min-width: 0;
+}
+
+.section-heading {
+  display: flex;
+  align-items: end;
+  justify-content: space-between;
+  gap: 20px;
+  margin-bottom: 18px;
+}
+
+.section-heading h2,
+.content-wrap h1 {
+  margin: 0;
+  font-size: 1.8rem;
+  line-height: 1.2;
+}
+
+.section-heading a {
+  color: var(--muted);
+}
+
diff --git a/src/styles/site/05-cards-sidebar.css b/src/styles/site/05-cards-sidebar.css
new file mode 100644
index 0000000..dc6ef35
--- /dev/null
+++ b/src/styles/site/05-cards-sidebar.css
@@ -0,0 +1,632 @@
+.post-list {
+  display: grid;
+  gap: 16px;
+}
+
+.post-card {
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  padding: 22px;
+  background: rgba(255, 253, 248, 0.88);
+  box-shadow: var(--shadow);
+}
+
+.post-card h2 {
+  margin: 6px 0 8px;
+  font-size: 1.35rem;
+  line-height: 1.35;
+}
+
+.post-card p {
+  margin: 0;
+  color: var(--muted);
+}
+
+.home-sidebar {
+  align-self: stretch;
+  display: grid;
+  align-content: start;
+  gap: 20px;
+}
+
+.sticky-sidebar {
+  position: sticky;
+  top: 84px;
+  display: grid;
+  align-content: start;
+  gap: 20px;
+}
+
+.sidebar-card {
+  overflow: hidden;
+  border: 1px solid rgba(222, 216, 204, 0.72);
+  border-radius: 8px;
+  padding: 18px;
+  background:
+    linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(242, 251, 237, 0.78)),
+    rgba(255, 253, 248, 0.76);
+  box-shadow: var(--shadow);
+  backdrop-filter: blur(12px);
+}
+
+.sidebar-card h2 {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin: 0 0 14px;
+  color: #4d5258;
+  font-size: 1.08rem;
+  font-weight: 700;
+}
+
+.sidebar-card h2 em {
+  margin-left: auto;
+  min-width: 28px;
+  border-radius: 999px;
+  padding: 2px 8px;
+  color: #6d9cc2;
+  font-size: 0.78rem;
+  font-style: normal;
+  text-align: center;
+  background: rgba(102, 200, 245, 0.18);
+}
+
+.profile-card {
+  text-align: center;
+}
+
+.profile-avatar {
+  width: 112px;
+  height: 112px;
+  margin: 0 auto 14px;
+  border-radius: 999px;
+  object-fit: cover;
+  box-shadow: 0 12px 30px rgba(15, 118, 110, 0.18);
+}
+
+.profile-name {
+  margin-bottom: 16px;
+  font-family: Georgia, "Times New Roman", serif;
+  color: #585b5e;
+  font-size: 1.9rem;
+  letter-spacing: 0;
+}
+
+.profile-stats {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 10px;
+  margin-bottom: 18px;
+}
+
+.profile-stats a {
+  display: grid;
+  gap: 3px;
+  color: var(--muted);
+}
+
+.profile-stats strong {
+  color: #2f4358;
+  font-size: 1.22rem;
+  font-weight: 600;
+}
+
+.profile-stats a:first-child strong,
+.notice-card strong,
+.schedule-left span,
+.calendar-summary span {
+  color: #66c8f5;
+}
+
+.follow-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  min-height: 44px;
+  border-radius: 8px;
+  color: #fff;
+  font-weight: 700;
+  background: #3eb8be;
+  transition:
+    transform 0.2s ease,
+    background-color 0.2s ease;
+}
+
+.follow-button:hover {
+  color: #fff;
+  transform: translateY(-1px);
+  background: #279fa5;
+}
+
+.github-mark {
+  font-size: 0.9rem;
+}
+
+.profile-links {
+  display: flex;
+  justify-content: center;
+  gap: 18px;
+  margin-top: 16px;
+  color: #3f5368;
+  font-weight: 700;
+}
+
+.notice-card p {
+  margin: 0.65em 0;
+  color: #596068;
+  line-height: 1.9;
+}
+
+.site-info-card h2 i {
+  width: 18px;
+  color: #3eb8be;
+  font-size: 0.92rem;
+}
+
+.site-info-list {
+  display: grid;
+  margin: 0;
+}
+
+.site-info-list div {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 18px;
+  border-top: 1px dashed rgba(104, 111, 120, 0.2);
+  padding: 9px 0;
+}
+
+.site-info-list div:first-child {
+  border-top: 0;
+  padding-top: 0;
+}
+
+.site-info-list div:last-child {
+  padding-bottom: 0;
+}
+
+.site-info-list dt,
+.site-info-list dd {
+  margin: 0;
+}
+
+.site-info-list dt {
+  color: #68717a;
+  font-size: 0.92rem;
+  font-weight: 700;
+}
+
+.site-info-list dd {
+  min-width: 0;
+  color: #1aa8f6;
+  font-size: 0.98rem;
+  font-weight: 800;
+  line-height: 1.3;
+  text-align: right;
+  overflow-wrap: anywhere;
+}
+
+#welcome-info,
+#welcome-ip-location-info {
+  margin: 0.65em 0;
+  overflow-wrap: anywhere;
+  color: #596068;
+  line-height: 1.9;
+  --kouseki-welcome-color: #66c8f5;
+  --kouseki-ip-color: #66c8f5;
+  --kouseki-gl-size: 16px;
+}
+
+#welcome-info b span.ip-mask,
+#welcome-ip-location-info b span.ip-mask {
+  display: inline-block;
+  filter: blur(6px);
+  transition: filter 0.3s ease;
+  cursor: pointer;
+  user-select: none;
+}
+
+#welcome-info b span.ip-mask:hover,
+#welcome-info b span.ip-mask:active,
+#welcome-ip-location-info b span.ip-mask:hover,
+#welcome-ip-location-info b span.ip-mask:active {
+  filter: blur(0);
+}
+
+.calendar-widget,
+.schedule-widget {
+  display: grid;
+  grid-template-columns: 0.9fr 1.1fr;
+  gap: 16px;
+  align-items: center;
+}
+
+.calendar-summary,
+.schedule-left {
+  display: grid;
+  gap: 4px;
+  text-align: center;
+}
+
+.calendar-summary strong,
+.schedule-left strong {
+  color: #4b5560;
+  font-size: 0.9rem;
+}
+
+.calendar-summary span,
+.schedule-left span {
+  font-size: 2.25rem;
+  line-height: 1.1;
+  font-weight: 800;
+}
+
+.calendar-summary small,
+.schedule-left small {
+  color: var(--muted);
+  font-size: 0.78rem;
+}
+
+.calendar-grid {
+  display: grid;
+  grid-template-columns: repeat(7, minmax(0, 1fr));
+  gap: 4px 7px;
+  color: #8aa6be;
+  text-align: center;
+}
+
+.calendar-grid span {
+  display: grid;
+  place-items: center;
+  min-height: 22px;
+  padding: 0;
+  border: 1px solid transparent;
+  border-radius: 999px;
+  line-height: 1;
+}
+
+.calendar-grid b {
+  font-size: 0.78rem;
+  font-weight: 700;
+}
+
+.calendar-grid .muted {
+  opacity: 0.45;
+}
+
+.calendar-grid .today {
+  color: #fff;
+  background: #66c8f5;
+  border-color: #66c8f5;
+}
+
+.schedule-bars {
+  display: grid;
+  gap: 8px;
+}
+
+.schedule-row {
+  display: grid;
+  grid-template-columns: 34px minmax(52px, 1fr) 74px;
+  align-items: center;
+  gap: 8px;
+  color: var(--muted);
+  font-size: 0.78rem;
+}
+
+.schedule-row progress {
+  width: 100%;
+  height: 10px;
+  overflow: hidden;
+  border: 0;
+  border-radius: 999px;
+  background: rgba(102, 200, 245, 0.16);
+}
+
+.schedule-row progress::-webkit-progress-bar {
+  border-radius: 999px;
+  background: rgba(102, 200, 245, 0.16);
+}
+
+.schedule-row progress::-webkit-progress-value {
+  border-radius: 999px;
+  background: linear-gradient(90deg, #5ec7f4, #42d4c4);
+}
+
+.schedule-row progress::-moz-progress-bar {
+  border-radius: 999px;
+  background: linear-gradient(90deg, #5ec7f4, #42d4c4);
+}
+
+.schedule-row em {
+  min-width: 0;
+  font-style: normal;
+  text-align: right;
+  white-space: nowrap;
+}
+
+.sidebar-posts {
+  display: grid;
+}
+
+.sidebar-post {
+  display: grid;
+  grid-template-columns: 70px minmax(0, 1fr);
+  gap: 12px;
+  align-items: center;
+  padding: 12px 0;
+  border-top: 1px dashed rgba(104, 111, 120, 0.28);
+}
+
+.sidebar-post:first-child {
+  border-top: 0;
+  padding-top: 0;
+}
+
+.sidebar-post img,
+.post-thumb-fallback {
+  width: 70px;
+  aspect-ratio: 1;
+  border-radius: 6px;
+  object-fit: cover;
+  background: linear-gradient(135deg, rgba(62, 184, 190, 0.32), rgba(102, 200, 245, 0.34));
+}
+
+.sidebar-post strong {
+  display: -webkit-box;
+  overflow: hidden;
+  color: #4d5258;
+  font-size: 0.94rem;
+  font-weight: 500;
+  line-height: 1.45;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+
+.sidebar-post time {
+  display: block;
+  margin-top: 3px;
+}
+
+.article-sidebar {
+  align-self: stretch;
+  display: grid;
+  align-content: start;
+  gap: 20px;
+}
+
+.article-sticky-sidebar {
+  position: sticky;
+  top: 90px;
+  display: grid;
+  max-height: calc(100vh - 110px);
+  align-content: start;
+  gap: 20px;
+  overflow-y: auto;
+  scrollbar-width: thin;
+}
+
+.article-author-card {
+  text-align: center;
+  background:
+    radial-gradient(circle at 50% 0%, rgba(102, 200, 245, 0.32), transparent 42%),
+    linear-gradient(135deg, rgba(255, 255, 255, 0.58), rgba(214, 238, 255, 0.3)),
+    rgba(255, 253, 248, 0.62);
+}
+
+.article-author-card .profile-avatar {
+  width: 88px;
+  height: 88px;
+}
+
+.article-author-card .profile-name {
+  margin-bottom: 8px;
+  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  font-size: 1.45rem;
+  font-weight: 800;
+}
+
+.article-author-meta {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 8px;
+  color: var(--muted);
+  font-size: 0.86rem;
+}
+
+.article-author-meta a {
+  color: var(--accent);
+}
+
+.toc-list,
+.article-tag-list,
+.same-category-list {
+  display: grid;
+  gap: 6px;
+}
+
+.toc-list {
+  position: relative;
+  padding-top: 10px;
+}
+
+.toc-list::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: 0;
+  height: 5px;
+  border-radius: 999px;
+  background-image: radial-gradient(circle, rgba(102, 200, 245, 0.72) 2px, transparent 2px);
+  background-size: 14px 5px;
+}
+
+.toc-list a,
+.article-tag-list a,
+.same-category-list a {
+  border-radius: 8px;
+  padding: 9px 11px;
+  color: #50637a;
+  line-height: 1.45;
+  transition:
+    color 0.2s ease,
+    background-color 0.2s ease,
+    transform 0.2s ease;
+}
+
+.toc-list a:hover,
+.article-tag-list a:hover,
+.same-category-list a:hover {
+  color: #1f618d;
+  background: rgba(102, 200, 245, 0.16);
+  transform: translateX(2px);
+}
+
+.toc-tree {
+  gap: 8px;
+}
+
+.toc-group {
+  position: relative;
+}
+
+.toc-link {
+  position: relative;
+  display: flex;
+  align-items: flex-start;
+  gap: 9px;
+  text-decoration: none;
+}
+
+.toc-link-main {
+  color: #3e5664 !important;
+  font-weight: 800;
+}
+
+.toc-marker {
+  flex: 0 0 auto;
+  width: 8px;
+  height: 8px;
+  margin-top: 0.52em;
+  border-radius: 999px;
+  background: rgba(102, 200, 245, 0.52);
+  box-shadow: 0 0 0 4px rgba(102, 200, 245, 0.12);
+}
+
+.toc-children {
+  position: relative;
+  display: grid;
+  gap: 4px;
+  max-height: 0;
+  margin-left: 14px;
+  overflow: hidden;
+  border-left: 1px solid rgba(102, 200, 245, 0.24);
+  padding-left: 10px;
+  opacity: 0;
+  transition:
+    max-height 0.28s ease,
+    opacity 0.22s ease,
+    margin-top 0.22s ease;
+}
+
+.toc-group.is-open .toc-children {
+  max-height: 520px;
+  margin-top: 4px;
+  opacity: 1;
+}
+
+.toc-link-child {
+  color: #657384 !important;
+  font-size: 0.9rem;
+  font-weight: 600;
+}
+
+.toc-link.is-active {
+  color: #0f766e !important;
+  background: rgba(102, 200, 245, 0.16);
+  transform: translateX(2px);
+}
+
+.toc-group.is-open .toc-link-main .toc-marker,
+.toc-link.is-active .toc-marker {
+  background: #3eb8be;
+  box-shadow: 0 0 0 4px rgba(62, 184, 190, 0.16);
+}
+
+.article-tag-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.article-tag-list a {
+  display: inline-flex;
+  align-items: center;
+  min-height: 34px;
+  border: 1px solid rgba(15, 118, 110, 0.18);
+  padding: 6px 11px;
+  color: var(--accent);
+  font-size: 0.88rem;
+  font-weight: 700;
+  background: rgba(236, 253, 245, 0.66);
+}
+
+.toc-depth-2 {
+  padding-left: 22px !important;
+}
+
+.toc-depth-3 {
+  padding-left: 24px !important;
+  font-size: 0.9rem;
+}
+
+.same-category-list a {
+  display: grid;
+  gap: 3px;
+  border-top: 1px dashed rgba(104, 111, 120, 0.22);
+}
+
+.same-category-list a:first-child {
+  border-top: 0;
+}
+
+.same-category-list strong {
+  display: -webkit-box;
+  overflow: hidden;
+  font-size: 0.94rem;
+  font-weight: 600;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+
+.sidebar-empty {
+  margin: 0;
+  color: var(--muted);
+  font-size: 0.92rem;
+}
+
+time {
+  color: var(--muted);
+  font-size: 0.9rem;
+}
+
+.meta-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-top: 14px;
+}
+
+.meta-list a {
+  border: 1px solid rgba(15, 118, 110, 0.28);
+  border-radius: 999px;
+  padding: 2px 10px;
+  color: var(--accent);
+  font-size: 0.86rem;
+  background: rgba(236, 253, 245, 0.7);
+}
+
diff --git a/src/styles/site/06-article-prose.css b/src/styles/site/06-article-prose.css
new file mode 100644
index 0000000..049db05
--- /dev/null
+++ b/src/styles/site/06-article-prose.css
@@ -0,0 +1,938 @@
+.article {
+  --article-padding: clamp(24px, 5vw, 48px);
+  width: min(var(--article-width), calc(100% - (var(--page-gutter) * 2)));
+  min-width: 0;
+  margin: 64px auto 84px;
+  border: 1px solid rgba(255, 255, 255, 0.58);
+  border-radius: 8px;
+  padding: var(--article-padding);
+  background:
+    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.72), transparent 34%),
+    linear-gradient(145deg, rgba(255, 255, 255, 0.62), rgba(226, 248, 241, 0.35)),
+    rgba(255, 253, 248, 0.68);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.82),
+    0 24px 64px rgba(44, 55, 63, 0.16);
+  backdrop-filter: blur(18px) saturate(165%);
+  -webkit-backdrop-filter: blur(18px) saturate(165%);
+}
+
+.prose {
+  min-width: 0;
+}
+
+.article-header {
+  position: relative;
+  margin-bottom: 28px;
+  padding-bottom: 22px;
+  border-bottom: 1px solid var(--line);
+}
+
+.article-header-content {
+  position: relative;
+  z-index: 1;
+}
+
+.article-header h1 {
+  margin: 8px 0 0;
+  font-size: clamp(2rem, 6vw, 3.3rem);
+  line-height: 1.14;
+}
+
+.article-header-cover {
+  display: grid;
+  align-items: end;
+  min-height: clamp(320px, 40vw, 460px);
+  margin: calc(var(--article-padding) * -1) calc(var(--article-padding) * -1) 34px;
+  overflow: hidden;
+  border: 0;
+  border-radius: 8px 8px 0 0;
+  padding: clamp(86px, 13vw, 150px) var(--article-padding) clamp(28px, 6vw, 52px);
+  color: #fff;
+  background: #5d7f78;
+}
+
+.article-header-cover::before,
+.article-header-cover::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+}
+
+.article-header-cover::before {
+  z-index: 1;
+  background:
+    linear-gradient(180deg, rgba(23, 55, 48, 0.42), rgba(23, 55, 48, 0.18) 38%, rgba(12, 31, 28, 0.68)),
+    linear-gradient(90deg, rgba(13, 55, 49, 0.52), rgba(19, 90, 79, 0.14) 54%, rgba(13, 55, 49, 0.36));
+}
+
+.article-header-cover::after {
+  z-index: 2;
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.2),
+    inset 0 -90px 110px rgba(10, 28, 26, 0.34);
+}
+
+.article-header-cover-img {
+  position: absolute;
+  inset: 0;
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  filter: saturate(0.9) contrast(0.94);
+}
+
+.article-header-cover .article-header-content {
+  z-index: 3;
+  max-width: 900px;
+  text-shadow: 0 3px 14px rgba(0, 0, 0, 0.48);
+}
+
+.article-header-cover time {
+  display: none;
+}
+
+.article-header-cover h1 {
+  max-width: 920px;
+  margin: 0;
+  color: #fff;
+  font-family: Georgia, "Times New Roman", "Microsoft YaHei", serif;
+  font-size: clamp(2.4rem, 6vw, 4.2rem);
+  font-weight: 700;
+  line-height: 1.12;
+}
+
+.article-hero-meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 9px 12px;
+  align-items: center;
+  margin-top: 18px;
+  color: rgba(255, 255, 255, 0.92);
+  font-size: 0.98rem;
+  font-weight: 700;
+}
+
+.article-hero-meta span,
+.article-hero-meta a {
+  display: inline-flex;
+  align-items: center;
+}
+
+.article-hero-meta span:not(:first-child)::before,
+.article-hero-meta a::before {
+  content: "|";
+  margin-right: 12px;
+  color: rgba(255, 255, 255, 0.62);
+  font-weight: 400;
+}
+
+.article-hero-meta a:hover {
+  color: #d8fff5;
+}
+
+.article-summary-card {
+  position: relative;
+  margin: 0 0 30px;
+  overflow: hidden;
+  border: 1px solid rgba(133, 162, 153, 0.34);
+  border-radius: 8px;
+  padding: 34px 20px 16px;
+  background:
+    radial-gradient(circle at 12% 0%, rgba(255, 255, 255, 0.8), transparent 32%),
+    linear-gradient(135deg, rgba(250, 252, 247, 0.88), rgba(228, 240, 234, 0.78)),
+    rgba(245, 250, 246, 0.78);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.9),
+    0 14px 34px rgba(58, 51, 38, 0.1);
+  backdrop-filter: blur(18px) saturate(145%);
+  -webkit-backdrop-filter: blur(18px) saturate(145%);
+}
+
+.article-summary-card::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: 0;
+  height: 25px;
+  border-bottom: 1px solid rgba(133, 162, 153, 0.18);
+  background: rgba(255, 255, 255, 0.28);
+  pointer-events: none;
+}
+
+.article-summary-dots {
+  position: absolute;
+  top: 14px;
+  left: 16px;
+  z-index: 1;
+  display: flex;
+  gap: 8px;
+}
+
+.article-summary-dots span {
+  width: 10px;
+  height: 10px;
+  border-radius: 999px;
+  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.12);
+}
+
+.article-summary-dots span:nth-child(1) {
+  background: #ff6b63;
+}
+
+.article-summary-dots span:nth-child(2) {
+  background: #ffc247;
+}
+
+.article-summary-dots span:nth-child(3) {
+  background: #4ecb71;
+}
+
+.article-summary-content {
+  position: relative;
+  z-index: 1;
+  margin: 0;
+  color: #59615f;
+  font-family: "LXGW WenKai", "霞鹜文楷", "Microsoft YaHei", ui-sans-serif, system-ui, sans-serif;
+  font-size: 1rem;
+  line-height: 1.9;
+}
+
+.article-summary-caret {
+  display: inline-block;
+  width: 2px;
+  height: 1.1em;
+  margin-left: 3px;
+  vertical-align: -0.16em;
+  background: var(--accent);
+  animation: summary-caret-blink 0.9s steps(1) infinite;
+}
+
+.article-summary-footer {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  margin-top: 24px;
+  color: rgba(85, 95, 94, 0.56);
+  font-family: "JetBrains Mono", Consolas, "Microsoft YaHei", monospace;
+  font-size: 0.95rem;
+  font-weight: 900;
+  letter-spacing: 0;
+}
+
+.article-summary-brand {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.article-summary-brand span {
+  color: rgba(15, 118, 110, 0.56);
+  font-size: 1.05rem;
+}
+
+.article-summary-model {
+  white-space: nowrap;
+}
+
+@keyframes summary-caret-blink {
+  50% {
+    opacity: 0;
+  }
+}
+
+.prose :where(h2, h3, h4) {
+  scroll-margin-top: 110px;
+  margin-top: 2em;
+  line-height: 1.35;
+}
+
+.prose :where(p, ul, ol, blockquote, pre) {
+  margin: 1.1em 0;
+}
+
+.prose a {
+  color: var(--accent);
+  text-decoration: underline;
+  text-underline-offset: 3px;
+}
+
+.prose .hexo-link-card {
+  display: grid;
+  grid-template-columns: 46px minmax(0, 1fr);
+  gap: 14px;
+  align-items: center;
+  margin: 1.2em 0;
+  border: 1px solid rgba(15, 118, 110, 0.2);
+  border-radius: 8px;
+  padding: 14px 16px;
+  color: #27313a;
+  text-decoration: none;
+  background:
+    linear-gradient(135deg, rgba(255, 255, 255, 0.78), rgba(236, 253, 245, 0.62)),
+    rgba(255, 253, 248, 0.88);
+  box-shadow: 0 12px 28px rgba(44, 55, 63, 0.1);
+  transition:
+    border-color 0.2s ease,
+    box-shadow 0.2s ease,
+    transform 0.2s ease;
+}
+
+.prose .hexo-link-card:hover {
+  color: #27313a;
+  border-color: rgba(15, 118, 110, 0.38);
+  box-shadow: 0 16px 34px rgba(15, 118, 110, 0.14);
+  transform: translateY(-1px);
+}
+
+.hexo-link-card__icon {
+  display: grid;
+  place-items: center;
+  width: 46px;
+  height: 46px;
+  border-radius: 8px;
+  color: #fff;
+  font-size: 1.05rem;
+  font-weight: 800;
+  background: #3eb8be;
+}
+
+.hexo-link-card__body {
+  display: grid;
+  min-width: 0;
+  gap: 2px;
+}
+
+.hexo-link-card__body strong,
+.hexo-link-card__body span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.hexo-link-card__body strong {
+  font-size: 1rem;
+  line-height: 1.35;
+}
+
+.hexo-link-card__body span {
+  color: var(--muted);
+  font-size: 0.88rem;
+}
+
+.prose img {
+  display: block;
+  max-width: 100%;
+  height: auto;
+  margin: 1.4em auto;
+  border-radius: 8px;
+}
+
+.prose .fancybox {
+  display: block;
+  width: fit-content;
+  max-width: 100%;
+  margin: 1.4em auto;
+  border-radius: 8px;
+  text-decoration: none;
+}
+
+.prose .fancybox img {
+  margin: 0 auto;
+  box-shadow: 0 12px 32px rgba(44, 55, 63, 0.12);
+  transition:
+    box-shadow 0.2s ease,
+    transform 0.2s ease;
+}
+
+.prose .fancybox:hover img {
+  box-shadow: 0 16px 38px rgba(15, 118, 110, 0.16);
+  transform: translateY(-1px);
+}
+
+.prose pre {
+  max-width: 100%;
+  margin: 0;
+  overflow-x: auto;
+  padding: 18px;
+  overscroll-behavior-inline: contain;
+  scrollbar-color: rgba(102, 200, 245, 0.58) rgba(255, 255, 255, 0.08);
+  scrollbar-width: thin;
+}
+
+.prose code {
+  font-family: "JetBrains Mono", Consolas, monospace;
+}
+
+.prose :not(pre) > code {
+  border: 1px solid rgba(15, 118, 110, 0.14);
+  border-radius: 6px;
+  padding: 0.12em 0.38em;
+  color: #0f766e;
+  font-size: 0.92em;
+  line-height: 1.4;
+  background: rgba(236, 253, 245, 0.78);
+  overflow-wrap: break-word;
+}
+
+.butterfly-note {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  gap: 12px;
+  margin: 1.2em 0;
+  border: 1px solid rgba(15, 118, 110, 0.18);
+  border-left-width: 4px;
+  border-radius: 8px;
+  padding: 14px 16px;
+  color: #32413f;
+  background: rgba(236, 253, 245, 0.58);
+}
+
+.article-outdated-note[hidden] {
+  display: none;
+}
+
+.butterfly-note > i {
+  margin-top: 0.28em;
+  color: var(--butterfly-note-color, var(--accent));
+}
+
+.butterfly-note.is-no-icon {
+  grid-template-columns: minmax(0, 1fr);
+}
+
+.butterfly-note__content > :first-child {
+  margin-top: 0;
+}
+
+.butterfly-note__content > :last-child {
+  margin-bottom: 0;
+}
+
+.butterfly-note--default,
+.butterfly-label--default,
+.butterfly-btn--default {
+  --butterfly-note-color: #68717a;
+  --butterfly-color: #68717a;
+}
+
+.butterfly-note--primary,
+.butterfly-note--blue,
+.butterfly-label--blue,
+.butterfly-btn--blue {
+  --butterfly-note-color: #2f80ed;
+  --butterfly-color: #2f80ed;
+}
+
+.butterfly-note--success,
+.butterfly-note--green,
+.butterfly-label--green,
+.butterfly-btn--green {
+  --butterfly-note-color: #2f9e44;
+  --butterfly-color: #2f9e44;
+}
+
+.butterfly-note--info {
+  --butterfly-note-color: #0ea5e9;
+  --butterfly-color: #0ea5e9;
+}
+
+.butterfly-note--warning,
+.butterfly-note--orange,
+.butterfly-label--orange,
+.butterfly-btn--orange {
+  --butterfly-note-color: #f59f00;
+  --butterfly-color: #f59f00;
+}
+
+.butterfly-note--danger,
+.butterfly-note--red,
+.butterfly-label--red,
+.butterfly-btn--red {
+  --butterfly-note-color: #e03131;
+  --butterfly-color: #e03131;
+}
+
+.butterfly-note--pink,
+.butterfly-label--pink,
+.butterfly-btn--pink {
+  --butterfly-note-color: #d63384;
+  --butterfly-color: #d63384;
+}
+
+.butterfly-note--purple,
+.butterfly-label--purple,
+.butterfly-btn--purple {
+  --butterfly-note-color: #7950f2;
+  --butterfly-color: #7950f2;
+}
+
+.butterfly-note {
+  border-left-color: var(--butterfly-note-color, var(--accent));
+}
+
+.butterfly-note--modern {
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.62);
+}
+
+.butterfly-note--flat {
+  border-color: transparent;
+  border-left-color: var(--butterfly-note-color, var(--accent));
+  background: color-mix(in srgb, var(--butterfly-note-color, #0f766e) 13%, transparent);
+}
+
+.butterfly-note--disabled {
+  display: block;
+  border: 0;
+  padding: 0;
+  background: transparent;
+}
+
+.butterfly-label {
+  display: inline-flex;
+  align-items: center;
+  min-height: 1.7em;
+  border-radius: 6px;
+  padding: 0.05em 0.48em;
+  color: #fff;
+  font-size: 0.88em;
+  font-weight: 700;
+  line-height: 1.35;
+  vertical-align: 0.08em;
+  background: var(--butterfly-color, #68717a);
+}
+
+.butterfly-inline-img {
+  display: inline-block !important;
+  width: auto;
+  max-width: min(100%, 18rem);
+  margin: 0 0.18em !important;
+  vertical-align: middle;
+}
+
+.prose .butterfly-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.45em;
+  min-height: 34px;
+  border: 1px solid var(--butterfly-color, var(--accent));
+  border-radius: 8px;
+  padding: 0.4em 0.78em;
+  color: #fff;
+  font-weight: 800;
+  line-height: 1.2;
+  text-decoration: none;
+  background: var(--butterfly-color, var(--accent));
+  transition:
+    color 0.2s ease,
+    background-color 0.2s ease,
+    box-shadow 0.2s ease,
+    transform 0.2s ease;
+}
+
+.prose .butterfly-btn:hover {
+  color: #fff;
+  box-shadow: 0 10px 22px color-mix(in srgb, var(--butterfly-color, #0f766e) 24%, transparent);
+  transform: translateY(-1px);
+}
+
+.prose .butterfly-btn.is-outline {
+  color: var(--butterfly-color, var(--accent));
+  background: transparent;
+}
+
+.prose .butterfly-btn.is-outline:hover {
+  color: #fff;
+  background: var(--butterfly-color, var(--accent));
+}
+
+.prose .butterfly-btn.is-larger {
+  min-height: 40px;
+  padding: 0.56em 1em;
+  font-size: 1.05em;
+}
+
+.prose .butterfly-btn.is-block {
+  display: flex;
+  width: fit-content;
+  margin: 0.9em 0;
+}
+
+.prose .butterfly-btn.is-center {
+  margin-right: auto;
+  margin-left: auto;
+}
+
+.prose .butterfly-btn.is-right {
+  margin-left: auto;
+}
+
+.butterfly-hide-inline {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.45em;
+  vertical-align: baseline;
+}
+
+.butterfly-hide-toggle,
+.butterfly-hide-block > summary {
+  border: 0;
+  border-radius: 7px;
+  padding: 0.25em 0.62em;
+  color: var(--hide-color, #fff);
+  font: inherit;
+  font-weight: 800;
+  line-height: 1.3;
+  background: var(--hide-bg, #ff7242);
+  cursor: pointer;
+}
+
+.butterfly-hide-content {
+  display: none;
+  color: var(--text);
+}
+
+.butterfly-hide-inline.is-open .butterfly-hide-content {
+  display: inline;
+}
+
+.butterfly-hide-block {
+  margin: 1.2em 0;
+}
+
+.butterfly-hide-block > summary {
+  display: inline-flex;
+  list-style: none;
+}
+
+.butterfly-hide-block > summary::-webkit-details-marker {
+  display: none;
+}
+
+.butterfly-hide-block__content {
+  margin-top: 0.9em;
+  border-left: 3px solid rgba(15, 118, 110, 0.2);
+  padding-left: 1em;
+}
+
+.prose .code-block {
+  position: relative;
+  width: 100%;
+  max-width: 100%;
+  min-width: 0;
+  margin: 1.25em 0;
+  overflow: hidden;
+  border: 1px solid rgba(15, 118, 110, 0.16);
+  border-radius: 8px;
+  background: rgba(22, 31, 36, 0.96);
+  box-shadow: 0 14px 32px rgba(44, 55, 63, 0.12);
+}
+
+.prose .code-block pre::-webkit-scrollbar,
+.table-scroll::-webkit-scrollbar {
+  height: 10px;
+}
+
+.prose .code-block pre::-webkit-scrollbar-track,
+.table-scroll::-webkit-scrollbar-track {
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.08);
+}
+
+.prose .code-block pre::-webkit-scrollbar-thumb,
+.table-scroll::-webkit-scrollbar-thumb {
+  border: 2px solid rgba(255, 255, 255, 0.08);
+  border-radius: 999px;
+  background:
+    linear-gradient(90deg, rgba(102, 200, 245, 0.72), rgba(62, 184, 190, 0.76)),
+    rgba(62, 184, 190, 0.72);
+}
+
+.prose .code-block pre::-webkit-scrollbar-thumb:hover,
+.table-scroll::-webkit-scrollbar-thumb:hover {
+  background:
+    linear-gradient(90deg, rgba(102, 200, 245, 0.9), rgba(62, 184, 190, 0.94)),
+    rgba(62, 184, 190, 0.9);
+}
+
+.prose .code-block pre {
+  max-width: 100%;
+  max-height: none;
+  padding: 44px 18px 18px;
+  background: transparent;
+  white-space: normal !important;
+  word-wrap: normal !important;
+  transition: max-height 0.24s ease;
+}
+
+.prose .code-block pre code {
+  display: block;
+  min-width: max-content;
+}
+
+.prose .code-block.is-collapsible:not(.is-expanded) pre {
+  max-height: 15.5em;
+}
+
+.prose .code-block.is-collapsible:not(.is-expanded)::after {
+  content: "";
+  position: absolute;
+  z-index: 1;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  height: 58px;
+  background: linear-gradient(rgba(22, 31, 36, 0), rgba(22, 31, 36, 0.98));
+  pointer-events: none;
+}
+
+.code-block-expand-cue {
+  appearance: none;
+  -webkit-appearance: none;
+  position: absolute;
+  z-index: 3;
+  right: 50%;
+  bottom: 10px;
+  display: none;
+  width: 36px;
+  height: 28px;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid rgba(255, 255, 255, 0.18);
+  border-radius: 999px;
+  padding: 0;
+  background: rgba(22, 31, 36, 0.72);
+  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
+  cursor: pointer;
+  transform: translateX(50%);
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+  transition:
+    border-color 0.2s ease,
+    background-color 0.2s ease,
+    transform 0.2s ease;
+}
+
+.code-block-expand-cue span {
+  width: 10px;
+  height: 10px;
+  border-right: 2px solid rgba(255, 255, 255, 0.9);
+  border-bottom: 2px solid rgba(255, 255, 255, 0.9);
+  transform: translateY(-2px) rotate(45deg);
+}
+
+.code-block-expand-cue:hover,
+.code-block-expand-cue:focus-visible {
+  border-color: rgba(255, 255, 255, 0.36);
+  background: rgba(62, 184, 190, 0.82);
+  transform: translateX(50%) translateY(-1px);
+}
+
+.prose .code-block.is-collapsible:not(.is-expanded) .code-block-expand-cue {
+  display: inline-flex;
+}
+
+.prose .code-block code {
+  color: #e8edf2;
+  line-height: 1.42;
+}
+
+.code-block-header {
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: 0;
+  z-index: 2;
+  display: flex;
+  min-height: 42px;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+  padding: 8px 10px 8px 16px;
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02));
+  pointer-events: none;
+}
+
+.code-block-language {
+  overflow: hidden;
+  color: rgba(232, 237, 242, 0.72);
+  font-family: "JetBrains Mono", Consolas, monospace;
+  font-size: 0.8rem;
+  font-weight: 800;
+  letter-spacing: 0;
+  text-overflow: ellipsis;
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+
+.code-block-toolbar {
+  display: flex;
+  flex: 0 0 auto;
+  gap: 8px;
+  pointer-events: auto;
+}
+
+.prose .code-block.has-line-numbers code > .line {
+  position: relative;
+  display: block;
+  min-height: 1.42em;
+  padding-left: calc(var(--line-number-width, 3ch) + 16px);
+  white-space: pre;
+}
+
+.prose .code-block.has-line-numbers code > .line::before {
+  content: attr(data-line);
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: var(--line-number-width, 3ch);
+  color: rgba(232, 237, 242, 0.34);
+  font-variant-numeric: tabular-nums;
+  text-align: right;
+  user-select: none;
+}
+
+.code-block-copy,
+.code-block-toggle {
+  appearance: none;
+  -webkit-appearance: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 30px;
+  border: 1px solid rgba(255, 255, 255, 0.18);
+  border-radius: 8px;
+  padding: 5px 9px;
+  color: rgba(255, 255, 255, 0.86);
+  font: 700 0.78rem/1 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  background: rgba(255, 255, 255, 0.1);
+  cursor: pointer;
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+  transition:
+    color 0.2s ease,
+    border-color 0.2s ease,
+    background-color 0.2s ease,
+    transform 0.2s ease;
+}
+
+.code-block-copy:hover,
+.code-block-toggle:hover {
+  color: #fff;
+  border-color: rgba(255, 255, 255, 0.34);
+  background: rgba(62, 184, 190, 0.72);
+  transform: translateY(-1px);
+}
+
+.code-block-toggle {
+  display: none;
+}
+
+.code-block.is-collapsible .code-block-toggle {
+  display: inline-flex;
+}
+
+.table-scroll {
+  max-width: 100%;
+  margin: 1.35em 0;
+  overflow-x: auto;
+  border: 1px solid rgba(15, 118, 110, 0.14);
+  border-radius: 8px;
+  background:
+    linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(236, 253, 245, 0.42)),
+    rgba(255, 253, 248, 0.78);
+  box-shadow: 0 14px 34px rgba(44, 55, 63, 0.1);
+  overscroll-behavior-inline: contain;
+  scrollbar-color: rgba(62, 184, 190, 0.58) rgba(15, 118, 110, 0.08);
+  scrollbar-width: thin;
+}
+
+.prose table {
+  width: 100%;
+  min-width: 620px;
+  border-collapse: separate;
+  border-spacing: 0;
+  color: #33433f;
+  font-size: 0.95rem;
+  line-height: 1.6;
+}
+
+.prose th,
+.prose td {
+  border-right: 1px solid rgba(15, 118, 110, 0.1);
+  border-bottom: 1px solid rgba(15, 118, 110, 0.1);
+  padding: 12px 14px;
+  vertical-align: top;
+}
+
+.prose th:last-child,
+.prose td:last-child {
+  border-right: 0;
+}
+
+.prose tr:last-child td {
+  border-bottom: 0;
+}
+
+.prose thead th {
+  color: #2f4a43;
+  font-weight: 800;
+  text-align: left;
+  background:
+    linear-gradient(135deg, rgba(236, 253, 245, 0.88), rgba(220, 246, 240, 0.72)),
+    rgba(255, 255, 255, 0.66);
+}
+
+.prose tbody tr:nth-child(even) td {
+  background: rgba(236, 253, 245, 0.36);
+}
+
+.prose tbody tr:hover td {
+  background: rgba(102, 200, 245, 0.13);
+}
+
+.fancybox__container {
+  --fancybox-bg: rgba(32, 36, 42, 0.72);
+  --fancybox-accent-color: #3eb8be;
+  backdrop-filter: blur(18px) saturate(145%);
+  -webkit-backdrop-filter: blur(18px) saturate(145%);
+}
+
+.prose mjx-container {
+  color: #223833;
+}
+
+.prose mjx-container[display="true"] {
+  max-width: 100%;
+  margin: 1.35em 0;
+  overflow-x: auto;
+  overflow-y: hidden;
+  padding: 10px 0;
+  scrollbar-color: rgba(62, 184, 190, 0.58) rgba(15, 118, 110, 0.08);
+  scrollbar-width: thin;
+}
+
+.prose mjx-container[display="true"]::-webkit-scrollbar {
+  height: 8px;
+}
+
+.prose mjx-container[display="true"]::-webkit-scrollbar-track {
+  border-radius: 999px;
+  background: rgba(15, 118, 110, 0.08);
+}
+
+.prose mjx-container[display="true"]::-webkit-scrollbar-thumb {
+  border-radius: 999px;
+  background:
+    linear-gradient(90deg, rgba(102, 200, 245, 0.72), rgba(62, 184, 190, 0.76)),
+    rgba(62, 184, 190, 0.72);
+}
+
diff --git a/src/styles/site/07-post-comments.css b/src/styles/site/07-post-comments.css
new file mode 100644
index 0000000..5dbba51
--- /dev/null
+++ b/src/styles/site/07-post-comments.css
@@ -0,0 +1,277 @@
+.post-copyright-card {
+  position: relative;
+  overflow: hidden;
+  margin-top: 42px;
+  border: 1px solid rgba(255, 255, 255, 0.64);
+  border-radius: 8px;
+  padding: 24px 28px 20px;
+  color: #33433f;
+  background:
+    radial-gradient(circle at 14% 0%, rgba(255, 255, 255, 0.82), transparent 32%),
+    linear-gradient(135deg, rgba(255, 253, 248, 0.76), rgba(236, 253, 245, 0.58)),
+    rgba(255, 253, 248, 0.72);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.88),
+    0 16px 42px rgba(58, 51, 38, 0.12);
+  backdrop-filter: blur(18px) saturate(165%);
+  -webkit-backdrop-filter: blur(18px) saturate(165%);
+}
+
+.post-copyright-card::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(135deg, rgba(255, 255, 255, 0.44), transparent 44%, rgba(255, 255, 255, 0.22));
+  pointer-events: none;
+}
+
+.post-copyright-card::after {
+  content: "";
+  position: absolute;
+  top: 8px;
+  right: 16px;
+  left: 16px;
+  height: 1px;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.82);
+  pointer-events: none;
+}
+
+.post-copyright-main,
+.post-copyright-footer {
+  position: relative;
+  z-index: 2;
+}
+
+.post-copyright-mark {
+  position: absolute;
+  top: 14px;
+  right: 22px;
+  z-index: 1;
+  display: grid;
+  place-items: center;
+  width: clamp(74px, 12vw, 118px);
+  aspect-ratio: 1;
+  border: 1px solid rgba(15, 118, 110, 0.12);
+  border-radius: 999px;
+  color: rgba(15, 118, 110, 0.16);
+  font-family: Georgia, "Times New Roman", serif;
+  font-size: clamp(1.85rem, 5vw, 3.4rem);
+  font-weight: 900;
+  line-height: 1;
+  background:
+    linear-gradient(145deg, rgba(255, 255, 255, 0.46), rgba(236, 253, 245, 0.2)),
+    rgba(255, 255, 255, 0.16);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.72),
+    0 12px 30px rgba(15, 118, 110, 0.06);
+  pointer-events: none;
+}
+
+.post-copyright-mark span {
+  transform: translateY(-1px);
+}
+
+.post-copyright-card h2 {
+  margin: 0;
+  color: #27313a;
+  font-size: clamp(1.08rem, 2.2vw, 1.35rem);
+  line-height: 1.35;
+}
+
+.post-copyright-link {
+  display: inline-block;
+  margin-top: 12px;
+  color: var(--muted);
+  font-size: 0.94rem;
+  font-weight: 600;
+}
+
+.post-copyright-link:hover,
+.post-copyright-meta a:hover {
+  color: var(--accent);
+}
+
+.post-copyright-meta {
+  display: grid;
+  grid-template-columns: 1fr 1.25fr 2fr;
+  gap: 18px 28px;
+  margin: 20px 0 0;
+  border-top: 1px solid rgba(15, 118, 110, 0.18);
+  border-bottom: 1px solid rgba(15, 118, 110, 0.12);
+  padding: 16px 0;
+}
+
+.post-copyright-meta div {
+  min-width: 0;
+}
+
+.post-copyright-meta dt {
+  margin-bottom: 5px;
+  color: #58645f;
+  font-size: 0.8rem;
+  font-weight: 800;
+}
+
+.post-copyright-meta dd {
+  margin: 0;
+  color: #2f4a43;
+  font-size: 0.95rem;
+  font-weight: 600;
+}
+
+.post-copyright-meta time {
+  color: inherit;
+  font-size: inherit;
+}
+
+.post-copyright-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 18px;
+  margin-top: 14px;
+}
+
+.post-copyright-tags,
+.post-copyright-actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 10px;
+}
+
+.post-copyright-tags a,
+.post-copyright-action,
+.post-copyright-icon {
+  min-height: 38px;
+  border: 1px solid rgba(15, 118, 110, 0.2);
+  border-radius: 999px;
+  color: var(--accent);
+  background: rgba(236, 253, 245, 0.72);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.54);
+  transition:
+    color 0.2s ease,
+    background-color 0.2s ease,
+    transform 0.2s ease;
+}
+
+.post-copyright-tags a {
+  display: inline-flex;
+  align-items: center;
+  padding: 7px 13px;
+  font-size: 0.88rem;
+}
+
+.post-copyright-action {
+  appearance: none;
+  -webkit-appearance: none;
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  padding: 7px 15px;
+  font: inherit;
+  font-weight: 800;
+  cursor: pointer;
+}
+
+.post-copyright-action.is-primary {
+  color: #fff;
+  border-color: rgba(15, 118, 110, 0.3);
+  background: #3eb8be;
+}
+
+.post-copyright-action svg {
+  width: 17px;
+  height: 17px;
+  fill: none;
+  stroke: currentColor;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  stroke-width: 2.4;
+}
+
+.post-copyright-icon {
+  display: grid;
+  place-items: center;
+  width: 38px;
+  font-size: 0.94rem;
+  font-weight: 900;
+  line-height: 1;
+}
+
+.post-copyright-tags a:hover,
+.post-copyright-action:hover,
+.post-copyright-icon:hover {
+  color: #fff;
+  background: #3eb8be;
+  transform: translateY(-1px);
+}
+
+.twikoo-comments {
+  margin-top: 34px;
+  border: 1px solid rgba(255, 255, 255, 0.64);
+  border-radius: 8px;
+  padding: clamp(20px, 4vw, 30px);
+  background:
+    radial-gradient(circle at 14% 0%, rgba(255, 255, 255, 0.8), transparent 32%),
+    linear-gradient(135deg, rgba(255, 253, 248, 0.8), rgba(236, 253, 245, 0.55)),
+    rgba(255, 253, 248, 0.76);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.86),
+    0 16px 42px rgba(58, 51, 38, 0.12);
+  backdrop-filter: blur(18px) saturate(165%);
+  -webkit-backdrop-filter: blur(18px) saturate(165%);
+}
+
+.twikoo-comments-head {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  margin-bottom: 22px;
+}
+
+.twikoo-comments-icon {
+  display: grid;
+  flex: 0 0 auto;
+  place-items: center;
+  width: 44px;
+  height: 44px;
+  border-radius: 8px;
+  color: #fff;
+  background: #3eb8be;
+  box-shadow: 0 12px 28px rgba(15, 118, 110, 0.16);
+}
+
+.twikoo-comments-icon svg {
+  width: 22px;
+  height: 22px;
+  fill: none;
+  stroke: currentColor;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  stroke-width: 2.2;
+}
+
+.twikoo-comments h2 {
+  margin: 0;
+  color: #27313a;
+  font-size: 1.28rem;
+  line-height: 1.25;
+}
+
+.twikoo-comments p {
+  margin: 4px 0 0;
+  color: var(--muted);
+  font-size: 0.92rem;
+  line-height: 1.45;
+}
+
+.twikoo-wrap {
+  min-height: 160px;
+}
+
+.twikoo-comments :where(.tk-comments-container, .tk-submit) {
+  color: var(--text);
+}
+
diff --git a/src/styles/site/08-archives-stats.css b/src/styles/site/08-archives-stats.css
new file mode 100644
index 0000000..83edba8
--- /dev/null
+++ b/src/styles/site/08-archives-stats.css
@@ -0,0 +1,402 @@
+.archive-timeline {
+  position: relative;
+  display: grid;
+  gap: 26px;
+  margin-top: 28px;
+  padding-left: 34px;
+}
+
+.archive-timeline::before {
+  content: "";
+  position: absolute;
+  top: 10px;
+  bottom: 10px;
+  left: 10px;
+  width: 2px;
+  border-radius: 999px;
+  background: linear-gradient(180deg, rgba(62, 184, 190, 0.8), rgba(222, 216, 204, 0.18));
+}
+
+.archive-year {
+  position: relative;
+  display: grid;
+  grid-template-columns: 150px minmax(0, 1fr);
+  gap: 22px;
+}
+
+.archive-year-marker {
+  position: absolute;
+  top: 12px;
+  left: -31px;
+  width: 18px;
+  height: 18px;
+  border: 4px solid rgba(255, 253, 248, 0.96);
+  border-radius: 999px;
+  background: #3eb8be;
+  box-shadow:
+    0 0 0 6px rgba(62, 184, 190, 0.16),
+    0 10px 24px rgba(15, 118, 110, 0.18);
+}
+
+.archive-year-head {
+  position: sticky;
+  top: 92px;
+  align-self: start;
+  display: grid;
+  gap: 4px;
+  padding-top: 2px;
+}
+
+.archive-year-head h2 {
+  margin: 0;
+  color: var(--accent-strong);
+  font-size: clamp(1.8rem, 4vw, 2.7rem);
+  line-height: 1;
+}
+
+.archive-year-head span {
+  color: var(--muted);
+  font-size: 0.92rem;
+  font-weight: 700;
+}
+
+.archive-months {
+  display: grid;
+  gap: 16px;
+  min-width: 0;
+}
+
+.archive-month {
+  display: grid;
+  grid-template-columns: 92px minmax(0, 1fr);
+  gap: 18px;
+  border: 1px solid rgba(222, 216, 204, 0.72);
+  border-radius: 8px;
+  padding: 18px;
+  background:
+    linear-gradient(135deg, rgba(255, 255, 255, 0.76), rgba(242, 251, 237, 0.58)),
+    rgba(255, 253, 248, 0.78);
+  box-shadow: var(--shadow);
+}
+
+.archive-month-label {
+  display: grid;
+  align-content: start;
+  gap: 6px;
+  color: var(--accent);
+  font-weight: 900;
+  line-height: 1.2;
+}
+
+.archive-month-label small {
+  color: var(--muted);
+  font-size: 0.82rem;
+  font-weight: 700;
+}
+
+.archive-list {
+  display: grid;
+  gap: 8px;
+  min-width: 0;
+}
+
+.archive-list a {
+  display: grid;
+  grid-template-columns: 46px minmax(0, 1fr);
+  align-items: center;
+  gap: 14px;
+  border: 1px solid transparent;
+  border-radius: 8px;
+  padding: 9px 12px;
+  background: rgba(255, 253, 248, 0.54);
+  transition:
+    color 0.2s ease,
+    border-color 0.2s ease,
+    background-color 0.2s ease,
+    box-shadow 0.2s ease,
+    transform 0.2s ease;
+}
+
+.archive-list a time {
+  display: inline-grid;
+  place-items: center;
+  width: 38px;
+  height: 38px;
+  border-radius: 8px;
+  color: #fff;
+  font-size: 0.9rem;
+  font-weight: 900;
+  line-height: 1;
+  background: #3eb8be;
+  box-shadow: 0 10px 24px rgba(15, 118, 110, 0.14);
+}
+
+.archive-list a span {
+  min-width: 0;
+  overflow-wrap: anywhere;
+  color: var(--text);
+  font-weight: 800;
+  line-height: 1.45;
+}
+
+.archive-list a:hover {
+  border-color: rgba(62, 184, 190, 0.32);
+  background: rgba(255, 255, 255, 0.82);
+  box-shadow: 0 12px 28px rgba(58, 51, 38, 0.1);
+  transform: translateY(-1px);
+}
+
+.pagination {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  margin-top: 30px;
+}
+
+.pagination-pages {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 8px;
+}
+
+.pagination-link,
+.pagination-number {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 40px;
+  min-height: 40px;
+  border: 1px solid rgba(222, 216, 204, 0.78);
+  border-radius: 8px;
+  padding: 8px 12px;
+  color: #50637a;
+  font-weight: 700;
+  line-height: 1;
+  background: rgba(255, 253, 248, 0.82);
+  box-shadow: 0 10px 28px rgba(58, 51, 38, 0.08);
+  transition:
+    color 0.2s ease,
+    border-color 0.2s ease,
+    background-color 0.2s ease,
+    transform 0.2s ease;
+}
+
+.pagination-link {
+  min-width: 76px;
+}
+
+.pagination-link:hover,
+.pagination-number:hover,
+.pagination-number.is-current {
+  color: #fff;
+  border-color: rgba(15, 118, 110, 0.34);
+  background: #3eb8be;
+  transform: translateY(-1px);
+}
+
+.pagination-link.is-disabled {
+  color: rgba(104, 111, 120, 0.5);
+  background: rgba(255, 253, 248, 0.46);
+  box-shadow: none;
+  cursor: not-allowed;
+}
+
+.term-grid {
+  margin-top: 24px;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+  gap: 12px;
+}
+
+.term-grid a {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  padding: 14px 16px;
+  background: rgba(255, 253, 248, 0.9);
+}
+
+.stats-chart {
+  margin-top: 24px;
+  border: 1px solid rgba(222, 216, 204, 0.78);
+  border-radius: 8px;
+  padding: 22px;
+  background: rgba(255, 253, 248, 0.88);
+  box-shadow: 0 14px 36px rgba(58, 51, 38, 0.08);
+}
+
+.stats-chart-head {
+  display: grid;
+  gap: 6px;
+  margin-bottom: 18px;
+}
+
+.stats-chart-head h2,
+.stats-chart-head p {
+  margin: 0;
+}
+
+.stats-chart-head h2 {
+  color: #27313a;
+  font-size: 1.18rem;
+  line-height: 1.25;
+}
+
+.stats-chart-head p {
+  color: var(--muted);
+  font-size: 0.92rem;
+}
+
+.stats-chart-body {
+  display: grid;
+  grid-template-columns: minmax(180px, 240px) 1fr;
+  align-items: center;
+  gap: 24px;
+}
+
+.pie-chart {
+  width: 100%;
+  max-width: 240px;
+  margin: 0 auto;
+  overflow: visible;
+}
+
+.pie-chart-track,
+.pie-chart-segment {
+  fill: none;
+  stroke-width: 18;
+}
+
+.pie-chart-track {
+  stroke: rgba(222, 216, 204, 0.52);
+}
+
+.pie-chart-segment {
+  transform: rotate(-90deg);
+  transform-origin: 60px 60px;
+  transition: stroke-width 0.2s ease;
+}
+
+.pie-chart-segment:hover {
+  stroke-width: 20;
+}
+
+.pie-chart-total {
+  fill: #27313a;
+  font-size: 1.28rem;
+  font-weight: 800;
+}
+
+.pie-chart-label {
+  fill: var(--muted);
+  font-size: 0.68rem;
+}
+
+.chart-legend {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+  gap: 10px;
+}
+
+.chart-legend-item {
+  display: grid;
+  grid-template-columns: 12px minmax(0, 1fr) auto auto;
+  align-items: center;
+  gap: 10px;
+  border: 1px solid rgba(222, 216, 204, 0.68);
+  border-radius: 8px;
+  padding: 10px 12px;
+  color: var(--text);
+  background: rgba(255, 255, 255, 0.58);
+}
+
+a.chart-legend-item {
+  transition:
+    border-color 0.2s ease,
+    transform 0.2s ease,
+    box-shadow 0.2s ease;
+}
+
+a.chart-legend-item:hover {
+  border-color: rgba(62, 184, 190, 0.42);
+  box-shadow: 0 10px 24px rgba(58, 51, 38, 0.08);
+  transform: translateY(-1px);
+}
+
+.chart-legend-color {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background: var(--chart-color);
+}
+
+.chart-legend-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.chart-legend-item strong {
+  color: #27313a;
+  font-size: 1rem;
+}
+
+.chart-legend-percent {
+  min-width: 38px;
+  color: var(--muted);
+  font-size: 0.84rem;
+  text-align: right;
+}
+
+.line-chart-wrap {
+  width: 100%;
+  overflow-x: auto;
+}
+
+.line-chart {
+  display: block;
+  width: 100%;
+  min-width: 520px;
+  height: 260px;
+}
+
+.line-chart-axis {
+  stroke: rgba(104, 111, 120, 0.32);
+  stroke-width: 1.4;
+}
+
+.line-chart-grid {
+  stroke: rgba(104, 111, 120, 0.16);
+  stroke-width: 1;
+}
+
+.line-chart-area {
+  fill: rgba(62, 184, 190, 0.18);
+}
+
+.line-chart-line {
+  fill: none;
+  stroke: #3eb8be;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  stroke-width: 4;
+}
+
+.line-chart-dot {
+  fill: #fffdf8;
+  stroke: #3eb8be;
+  stroke-width: 3;
+}
+
+.line-chart-x-label,
+.line-chart-y-label {
+  fill: var(--muted);
+  font-size: 0.78rem;
+}
+
diff --git a/src/styles/site/09-shuoshuo.css b/src/styles/site/09-shuoshuo.css
new file mode 100644
index 0000000..5c053e9
--- /dev/null
+++ b/src/styles/site/09-shuoshuo.css
@@ -0,0 +1,314 @@
+.shuoshuo-page {
+  margin-top: 40px;
+}
+
+#talk {
+  position: relative;
+  width: 100%;
+  min-height: 220px;
+}
+
+#talk:empty::before {
+  content: "说说加载中...";
+  display: grid;
+  min-height: 180px;
+  place-items: center;
+  border: 1px solid rgba(255, 255, 255, 0.58);
+  border-radius: 8px;
+  color: var(--muted);
+  background:
+    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.72), transparent 34%),
+    linear-gradient(145deg, rgba(255, 255, 255, 0.62), rgba(226, 248, 241, 0.35)),
+    rgba(255, 253, 248, 0.68);
+  box-shadow: var(--shadow);
+  backdrop-filter: blur(18px) saturate(165%);
+  -webkit-backdrop-filter: blur(18px) saturate(165%);
+}
+
+#talk .talk_item {
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  width: calc(33.333% - 8px);
+  margin: 0 12px 12px 0;
+  border: 1px solid rgba(255, 255, 255, 0.58);
+  border-radius: 8px;
+  padding: 20px;
+  color: var(--text);
+  background:
+    radial-gradient(circle at 14% 0%, rgba(255, 255, 255, 0.72), transparent 34%),
+    linear-gradient(145deg, rgba(255, 255, 255, 0.62), rgba(226, 248, 241, 0.35)),
+    rgba(255, 253, 248, 0.78);
+  box-shadow: var(--shadow);
+  backdrop-filter: blur(18px) saturate(165%);
+  -webkit-backdrop-filter: blur(18px) saturate(165%);
+  transition:
+    box-shadow 0.2s ease,
+    transform 0.2s ease;
+}
+
+#talk .talk_item:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 20px 54px rgba(44, 55, 63, 0.18);
+}
+
+#talk .talk_meta,
+#talk .talk_bottom {
+  display: flex;
+  align-items: center;
+}
+
+#talk .talk_meta {
+  width: 100%;
+  border-bottom: 1px dashed rgba(104, 111, 120, 0.34);
+  padding-bottom: 10px;
+}
+
+#talk .talk_meta .avatar {
+  width: 56px;
+  height: 56px;
+  margin: 0 !important;
+  border-radius: 8px;
+  object-fit: cover;
+}
+
+#talk .talk_meta .info {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  margin-left: 12px;
+  line-height: 1.4;
+}
+
+#talk .talk_meta .info .talk_nick {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  color: #3eb8be;
+  font-size: 1.08rem;
+  font-weight: 800;
+}
+
+#talk .talk_meta .info svg.is-badge.icon {
+  width: 15px;
+  height: 15px;
+  flex: 0 0 auto;
+}
+
+#talk .talk_meta .info span.talk_date {
+  color: var(--muted);
+  font-size: 0.9rem;
+}
+
+#talk .talk_item .talk_content {
+  margin-top: 12px;
+  overflow-wrap: anywhere;
+  color: #33433f;
+}
+
+#talk .talk_item .talk_content a {
+  color: #d75f54;
+  font-weight: 700;
+}
+
+#talk .talk_item .talk_content a:hover {
+  color: var(--accent);
+}
+
+#talk .talk_item .talk_content .zone_imgbox {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  margin-top: 12px;
+  --talk-image-size: calc(25% - 8px);
+}
+
+#talk .talk_item .talk_content .zone_imgbox a {
+  position: relative;
+  display: block;
+  width: var(--talk-image-size);
+  overflow: hidden;
+  border-radius: 8px;
+  aspect-ratio: 1;
+}
+
+#talk .talk_item .talk_content .zone_imgbox a:first-child {
+  width: 100%;
+  aspect-ratio: 1.8;
+}
+
+#talk .talk_item .talk_content .zone_imgbox img {
+  width: 100%;
+  height: 100%;
+  margin: 0 !important;
+  object-fit: cover;
+}
+
+#talk .talk_item .talk_bottom {
+  justify-content: space-between;
+  gap: 12px;
+  margin-top: 15px;
+  border-top: 1px dashed rgba(104, 111, 120, 0.34);
+  padding-top: 10px;
+}
+
+#talk .talk_item .talk_bottom span.talk_tag,
+#talk .talk_item .talk_bottom span.location_tag {
+  display: inline-flex;
+  max-width: 100%;
+  min-height: 30px;
+  align-items: center;
+  border: 1px solid rgba(15, 118, 110, 0.16);
+  border-radius: 999px;
+  padding: 3px 11px;
+  color: var(--accent);
+  font-size: 0.86rem;
+  background: rgba(236, 253, 245, 0.7);
+  transition:
+    color 0.2s ease,
+    background-color 0.2s ease,
+    transform 0.2s ease;
+}
+
+#talk .talk_item .talk_bottom span.talk_tag:hover,
+#talk .talk_item .talk_bottom span.location_tag:hover,
+#talk .talk_item .talk_bottom .icon:hover {
+  color: #fff;
+  background: #3eb8be;
+  transform: translateY(-1px);
+}
+
+#talk .talk_item .talk_bottom .icon {
+  display: grid;
+  place-items: center;
+  width: 34px;
+  height: 34px;
+  border-radius: 999px;
+  color: var(--accent);
+  transition:
+    color 0.2s ease,
+    background-color 0.2s ease,
+    transform 0.2s ease;
+}
+
+#talk .talk_item .talk_content .shuoshuo-external-link {
+  width: 100%;
+  height: 80px;
+  margin-top: 12px;
+  overflow: hidden;
+  border: 1px solid rgba(15, 118, 110, 0.14);
+  border-radius: 8px;
+  color: var(--text);
+  background: rgba(236, 253, 245, 0.64);
+  transition:
+    background-color 0.2s ease,
+    transform 0.2s ease;
+}
+
+.shuoshuo-external-link:hover {
+  background: #3eb8be;
+  transform: translateY(-1px);
+}
+
+.shuoshuo-external-link .external-link {
+  display: flex;
+  width: 100%;
+  height: 100%;
+}
+
+.shuoshuo-external-link .external-link:hover {
+  color: #fff;
+}
+
+.shuoshuo-external-link .external-link-left {
+  width: 60px;
+  height: 60px;
+  margin: 10px;
+  flex: 0 0 auto;
+  border-radius: 8px;
+  background-position: center;
+  background-size: cover;
+}
+
+.shuoshuo-external-link .external-link-right {
+  display: flex;
+  min-width: 0;
+  width: calc(100% - 80px);
+  flex-direction: column;
+  justify-content: center;
+  padding: 10px;
+}
+
+.shuoshuo-external-link .external-link-right .external-link-title {
+  overflow: hidden;
+  font-size: 1rem;
+  font-weight: 800;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.talk_content iframe {
+  min-height: 150px;
+}
+
+meting-js {
+  display: block;
+  min-height: 100px;
+  margin-top: 10px;
+}
+
+.limit {
+  width: 100%;
+  margin-top: 30px;
+  color: var(--muted);
+  text-align: center;
+}
+
+:root[data-theme='dark'] #talk:empty::before,
+:root[data-theme='dark'] #talk .talk_item {
+  border-color: rgba(181, 198, 207, 0.24);
+  background:
+    radial-gradient(circle at 14% 0%, rgba(139, 224, 213, 0.1), transparent 34%),
+    linear-gradient(145deg, rgba(22, 32, 39, 0.92), rgba(8, 14, 19, 0.86)),
+    rgba(12, 19, 25, 0.88);
+  box-shadow: var(--shadow);
+}
+
+:root[data-theme='dark'] #talk .talk_item .talk_content {
+  color: var(--text);
+}
+
+:root[data-theme='dark'] #talk .talk_item .talk_bottom span.talk_tag,
+:root[data-theme='dark'] #talk .talk_item .talk_bottom span.location_tag,
+:root[data-theme='dark'] #talk .talk_item .talk_content .shuoshuo-external-link {
+  border-color: rgba(139, 224, 213, 0.28);
+  color: #e6f4f6;
+  background: rgba(139, 224, 213, 0.13);
+}
+
+:root[data-theme='dark'] #talk .talk_meta,
+:root[data-theme='dark'] #talk .talk_item .talk_bottom {
+  border-color: rgba(181, 198, 207, 0.26);
+  color: var(--muted);
+}
+
+:root[data-theme='dark'] .hero-talk {
+  border-color: rgba(181, 198, 207, 0.24);
+  background:
+    linear-gradient(135deg, rgba(22, 32, 39, 0.78), rgba(8, 14, 19, 0.72)),
+    rgba(12, 19, 25, 0.74);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.1),
+    0 18px 46px rgba(0, 0, 0, 0.34);
+}
+
+:root[data-theme='dark'] .hero-talk .item {
+  border-top-color: rgba(181, 198, 207, 0.22);
+  color: var(--text);
+}
+
+:root[data-theme='dark'] .hero-talk-head a {
+  border-color: rgba(139, 224, 213, 0.28);
+  background: rgba(139, 224, 213, 0.13);
+}
+
diff --git a/src/styles/site/10-pages.css b/src/styles/site/10-pages.css
new file mode 100644
index 0000000..ff94069
--- /dev/null
+++ b/src/styles/site/10-pages.css
@@ -0,0 +1,287 @@
+.external-redirect {
+  width: min(760px, calc(100% - (var(--page-gutter) * 2)));
+  min-height: calc(100vh - 240px);
+  margin: 42px auto 80px;
+  display: grid;
+  place-items: center;
+}
+
+.external-redirect-panel {
+  width: 100%;
+  overflow: hidden;
+  border: 1px solid rgba(255, 255, 255, 0.58);
+  border-radius: 8px;
+  padding: clamp(26px, 6vw, 48px);
+  background:
+    radial-gradient(circle at 15% 0%, rgba(255, 255, 255, 0.74), transparent 36%),
+    linear-gradient(145deg, rgba(255, 255, 255, 0.7), rgba(226, 248, 241, 0.42)),
+    rgba(255, 253, 248, 0.78);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.82),
+    0 24px 64px rgba(44, 55, 63, 0.16);
+  backdrop-filter: blur(18px) saturate(165%);
+  -webkit-backdrop-filter: blur(18px) saturate(165%);
+}
+
+.external-redirect-eyebrow {
+  margin: 0 0 10px;
+  color: var(--accent);
+  font-size: 0.88rem;
+  font-weight: 800;
+}
+
+.external-redirect h1 {
+  margin: 0;
+  color: #20242a;
+  font-size: clamp(2rem, 6vw, 3.8rem);
+  line-height: 1.08;
+}
+
+.external-redirect-copy {
+  max-width: 620px;
+  margin: 16px 0 0;
+  color: var(--muted);
+  font-size: 1rem;
+}
+
+.external-redirect-target {
+  display: grid;
+  gap: 8px;
+  margin-top: 24px;
+  border: 1px solid rgba(15, 118, 110, 0.16);
+  border-radius: 8px;
+  padding: 14px 16px;
+  background: rgba(236, 253, 245, 0.64);
+}
+
+.external-redirect-target span {
+  color: var(--accent);
+  font-size: 0.84rem;
+  font-weight: 800;
+}
+
+.external-redirect-target code {
+  overflow-wrap: anywhere;
+  color: #33433f;
+  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
+  font-size: 0.92rem;
+}
+
+.external-redirect-countdown {
+  position: relative;
+  width: 112px;
+  height: 112px;
+  margin: 26px auto 0;
+}
+
+.external-redirect-countdown svg {
+  width: 112px;
+  height: 112px;
+  transform: rotate(-90deg);
+}
+
+.external-redirect-countdown circle {
+  fill: none;
+  stroke: rgba(15, 118, 110, 0.14);
+  stroke-width: 10;
+}
+
+.external-redirect-countdown circle:last-child {
+  stroke: #3eb8be;
+  stroke-linecap: round;
+  transition: stroke-dashoffset 0.9s linear;
+}
+
+.external-redirect-countdown strong {
+  position: absolute;
+  inset: 0;
+  display: grid;
+  place-items: center;
+  color: #2f4358;
+  font-size: 2rem;
+  line-height: 1;
+}
+
+.external-redirect-actions {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 12px;
+  margin-top: 28px;
+}
+
+.external-redirect-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 44px;
+  border: 1px solid rgba(15, 118, 110, 0.2);
+  border-radius: 8px;
+  padding: 9px 16px;
+  color: var(--accent);
+  font: inherit;
+  font-weight: 800;
+  background: rgba(236, 253, 245, 0.68);
+  cursor: pointer;
+  transition:
+    color 0.2s ease,
+    background-color 0.2s ease,
+    transform 0.2s ease;
+}
+
+.external-redirect-button:hover,
+.external-redirect-button.is-primary {
+  color: #fff;
+  background: #3eb8be;
+  transform: translateY(-1px);
+}
+
+.native-page {
+  margin-top: 40px;
+}
+
+.native-page-article {
+  overflow: hidden;
+}
+
+.native-feature-grid,
+.friend-link-grid {
+  display: grid;
+  gap: 16px;
+}
+
+.native-feature-grid {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  margin: 28px 0;
+}
+
+.native-feature-grid section,
+.friend-link-card {
+  border: 1px solid rgba(15, 118, 110, 0.14);
+  border-radius: 8px;
+  background: rgba(236, 253, 245, 0.58);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.62);
+}
+
+.native-feature-grid section {
+  padding: 18px;
+}
+
+.native-feature-grid i {
+  display: grid;
+  width: 42px;
+  height: 42px;
+  margin-bottom: 12px;
+  place-items: center;
+  border-radius: 8px;
+  color: #fff;
+  background: #3eb8be;
+}
+
+.native-feature-grid h2 {
+  margin: 0 0 8px;
+  font-size: 1.12rem;
+}
+
+.native-feature-grid p {
+  margin: 0;
+  color: var(--muted);
+}
+
+.native-table-wrap {
+  overflow-x: auto;
+}
+
+.friend-link-grid {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  margin: 0 0 24px;
+}
+
+.friend-link-card {
+  display: grid;
+  grid-template-columns: 58px minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 14px;
+  padding: 16px;
+  transition:
+    border-color 0.2s ease,
+    background-color 0.2s ease,
+    transform 0.2s ease;
+}
+
+.friend-link-card:hover {
+  border-color: rgba(15, 118, 110, 0.28);
+  background: rgba(236, 253, 245, 0.78);
+  transform: translateY(-2px);
+}
+
+.friend-link-card img {
+  width: 58px;
+  height: 58px;
+  border-radius: 8px;
+  object-fit: cover;
+}
+
+.friend-link-card span {
+  display: grid;
+  min-width: 0;
+  gap: 2px;
+}
+
+.friend-link-card strong {
+  color: #33433f;
+  font-size: 1.05rem;
+}
+
+.friend-link-card em {
+  overflow: hidden;
+  color: var(--muted);
+  font-size: 0.9rem;
+  font-style: normal;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.friend-link-card i {
+  color: var(--accent);
+}
+
+.link-apply-card {
+  width: 100%;
+  margin-top: 0;
+}
+
+:root[data-theme='dark'] .external-redirect-panel {
+  border-color: rgba(181, 198, 207, 0.24);
+  background:
+    radial-gradient(circle at 14% 0%, rgba(139, 224, 213, 0.1), transparent 34%),
+    linear-gradient(145deg, rgba(22, 32, 39, 0.92), rgba(8, 14, 19, 0.86)),
+    rgba(12, 19, 25, 0.88);
+  box-shadow: var(--shadow);
+}
+
+:root[data-theme='dark'] .external-redirect h1,
+:root[data-theme='dark'] .external-redirect-countdown strong {
+  color: #edf7f5;
+}
+
+:root[data-theme='dark'] .external-redirect-target,
+:root[data-theme='dark'] .external-redirect-button {
+  border-color: rgba(139, 224, 213, 0.28);
+  background: rgba(139, 224, 213, 0.13);
+}
+
+:root[data-theme='dark'] .external-redirect-target code {
+  color: var(--text);
+}
+
+:root[data-theme='dark'] .native-feature-grid section,
+:root[data-theme='dark'] .friend-link-card {
+  border-color: rgba(139, 224, 213, 0.26);
+  background: rgba(139, 224, 213, 0.12);
+}
+
+:root[data-theme='dark'] .friend-link-card strong {
+  color: #edf7f5;
+}
+
diff --git a/src/styles/site/11-footer.css b/src/styles/site/11-footer.css
new file mode 100644
index 0000000..d47054d
--- /dev/null
+++ b/src/styles/site/11-footer.css
@@ -0,0 +1,150 @@
+.site-footer {
+  position: relative;
+  margin-top: 64px;
+  color: rgba(83, 91, 96, 0.72);
+  background:
+    linear-gradient(180deg, rgba(242, 248, 236, 0.56), rgba(246, 250, 239, 0.72)),
+    rgba(246, 250, 239, 0.72);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78);
+  backdrop-filter: blur(18px) saturate(150%);
+  -webkit-backdrop-filter: blur(18px) saturate(150%);
+}
+
+.footer-inner {
+  width: min(1180px, calc(100% - (var(--page-gutter) * 2)));
+  margin: 0 auto;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(220px, 320px);
+  gap: 34px 64px;
+  padding: 42px 0 38px;
+}
+
+.footer-top {
+  display: grid;
+  align-content: start;
+  gap: 10px;
+}
+
+.footer-brand {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  width: fit-content;
+  color: #3f4143;
+  font-size: 1.22rem;
+  font-weight: 800;
+  line-height: 1;
+}
+
+.footer-brand img {
+  width: 34px;
+  height: 34px;
+  border-radius: 999px;
+  object-fit: cover;
+  box-shadow: 0 8px 22px rgba(15, 118, 110, 0.18);
+}
+
+.footer-slogan,
+.footer-contact p,
+.footer-bottom p {
+  margin: 0;
+}
+
+.footer-slogan {
+  font-size: 0.92rem;
+}
+
+.footer-contact {
+  display: grid;
+  justify-items: center;
+  align-content: start;
+  gap: 10px;
+  text-align: center;
+}
+
+.footer-contact p {
+  color: rgba(83, 91, 96, 0.64);
+  font-size: 0.94rem;
+}
+
+.footer-socials {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.footer-socials a {
+  display: grid;
+  place-items: center;
+  width: 36px;
+  height: 36px;
+  border: 1px solid rgba(178, 194, 170, 0.48);
+  border-radius: 10px;
+  color: rgba(76, 84, 88, 0.78);
+  background:
+    linear-gradient(145deg, rgba(255, 255, 255, 0.48), rgba(218, 231, 203, 0.42)),
+    rgba(236, 244, 226, 0.72);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.7),
+    0 10px 24px rgba(91, 107, 74, 0.1);
+  transition:
+    color 0.2s ease,
+    border-color 0.2s ease,
+    background-color 0.2s ease,
+    transform 0.2s ease;
+}
+
+.footer-socials a:hover {
+  color: var(--accent);
+  border-color: rgba(15, 118, 110, 0.28);
+  background-color: rgba(255, 255, 255, 0.84);
+  transform: translateY(-2px);
+}
+
+.footer-socials i {
+  width: 18px;
+  height: 18px;
+  display: inline-grid;
+  place-items: center;
+  font-size: 1.08rem;
+  line-height: 1;
+}
+
+.footer-contact-links,
+.footer-meta p:last-child {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.footer-contact-links {
+  font-size: 0.92rem;
+}
+
+.footer-contact-links span,
+.footer-meta span {
+  color: rgba(83, 91, 96, 0.35);
+}
+
+.footer-bottom {
+  grid-column: 1 / -1;
+  display: flex;
+  justify-content: space-between;
+  gap: 24px;
+  border-top: 1px solid rgba(182, 197, 174, 0.34);
+  padding-top: 22px;
+  font-size: 0.92rem;
+}
+
+.footer-bottom > div {
+  display: grid;
+  gap: 8px;
+}
+
+.footer-meta {
+  justify-items: end;
+  text-align: right;
+}
+
diff --git a/src/styles/site/12-theme.css b/src/styles/site/12-theme.css
new file mode 100644
index 0000000..5325dcb
--- /dev/null
+++ b/src/styles/site/12-theme.css
@@ -0,0 +1,223 @@
+:root[data-theme='dark'] :where(
+  .page-header-card,
+  .post-card,
+  .sidebar-card,
+  .article,
+  .article-summary-card,
+  .post-copyright-card,
+  .twikoo-comments,
+  .table-scroll,
+  .stats-chart,
+  .term-grid a,
+  .pagination-link,
+  .pagination-number
+) {
+  border-color: rgba(181, 198, 207, 0.24);
+  background:
+    radial-gradient(circle at 14% 0%, rgba(139, 224, 213, 0.1), transparent 34%),
+    linear-gradient(145deg, rgba(22, 32, 39, 0.92), rgba(8, 14, 19, 0.86)),
+    rgba(12, 19, 25, 0.88);
+  box-shadow: var(--shadow);
+}
+
+:root[data-theme='dark'] :where(
+  .page-header-card::after,
+  .post-copyright-card::after
+) {
+  background: rgba(255, 255, 255, 0.12);
+}
+
+:root[data-theme='dark'] :where(
+  .page-header-card h1,
+  .content-wrap .page-header-card h1,
+  .sidebar-card h2,
+  .stats-chart-head h2,
+  .chart-legend-item strong,
+  .pie-chart-total,
+  .profile-name,
+  .calendar-summary strong,
+  .schedule-left strong,
+  .sidebar-post strong,
+  .toc-link-main,
+  .post-copyright-card h2,
+  .post-copyright-meta dd,
+  .twikoo-comments h2,
+  .footer-brand
+) {
+  color: #edf7f5;
+}
+
+:root[data-theme='dark'] .page-header-eyebrow {
+  color: #a8f1e8;
+  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.38);
+}
+
+:root[data-theme='dark'] .page-header-card h1,
+:root[data-theme='dark'] .content-wrap .page-header-card h1 {
+  color: #f5fbfc;
+  text-shadow:
+    0 2px 16px rgba(0, 0, 0, 0.72),
+    0 0 1px rgba(245, 251, 252, 0.92);
+}
+
+:root[data-theme='dark'] .page-header-subtitle {
+  color: #d3e0e5;
+  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.48);
+}
+
+:root[data-theme='dark'] :where(
+  .notice-card p,
+  #welcome-info,
+  #welcome-ip-location-info,
+  .site-info-list dt,
+  .toc-link-child,
+  .same-category-list a,
+  .profile-links,
+  .footer-contact p
+) {
+  color: #c4d0d5;
+}
+
+:root[data-theme='dark'] .chart-legend-item {
+  border-color: rgba(181, 198, 207, 0.22);
+  background: rgba(255, 255, 255, 0.08);
+}
+
+:root[data-theme='dark'] .calendar-grid {
+  color: #c2d2dc;
+}
+
+:root[data-theme='dark'] .pie-chart-track {
+  stroke: rgba(181, 198, 207, 0.22);
+}
+
+:root[data-theme='dark'] .line-chart-dot {
+  fill: #112023;
+}
+
+:root[data-theme='dark'] .site-info-list div {
+  border-top-color: rgba(181, 198, 207, 0.22);
+}
+
+:root[data-theme='dark'] :where(
+  .meta-list a,
+  .article-tag-list a,
+  .post-copyright-tags a,
+  .post-copyright-action,
+  .post-copyright-icon
+) {
+  border-color: rgba(139, 224, 213, 0.28);
+  color: var(--accent);
+  background: rgba(139, 224, 213, 0.13);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
+}
+
+:root[data-theme='dark'] :where(
+  .follow-button,
+  .calendar-grid .today,
+  .post-copyright-action.is-primary,
+  .post-copyright-tags a:hover,
+  .post-copyright-action:hover,
+  .post-copyright-icon:hover,
+  .pagination-link:hover,
+  .pagination-number:hover,
+  .pagination-number.is-current
+) {
+  color: #081315;
+  background: var(--accent);
+}
+
+:root[data-theme='dark'] .pagination-link.is-disabled {
+  color: rgba(198, 211, 218, 0.72);
+  background: rgba(255, 255, 255, 0.08);
+}
+
+:root[data-theme='dark'] .article-header {
+  border-bottom-color: var(--line);
+}
+
+:root[data-theme='dark'] .article-header-cover {
+  background: #0d171d;
+}
+
+:root[data-theme='dark'] .article-header-cover::before {
+  background:
+    linear-gradient(180deg, rgba(5, 9, 12, 0.58), rgba(8, 16, 20, 0.28) 38%, rgba(3, 8, 11, 0.86)),
+    linear-gradient(90deg, rgba(5, 13, 17, 0.66), rgba(20, 57, 58, 0.14) 54%, rgba(5, 13, 17, 0.48));
+}
+
+:root[data-theme='dark'] .prose .code-block {
+  border-color: rgba(139, 224, 213, 0.24);
+  background: rgba(5, 8, 12, 0.96);
+  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.32);
+}
+
+:root[data-theme='dark'] .prose :not(pre) > code {
+  border-color: rgba(139, 224, 213, 0.3);
+  color: var(--accent);
+  background: rgba(139, 224, 213, 0.13);
+}
+
+:root[data-theme='dark'] .butterfly-note {
+  color: #e5eff1;
+  background: rgba(139, 224, 213, 0.11);
+}
+
+:root[data-theme='dark'] .butterfly-note--disabled {
+  background: transparent;
+}
+
+:root[data-theme='dark'] .butterfly-hide-content {
+  color: #e5eff1;
+}
+
+:root[data-theme='dark'] .butterfly-hide-block__content {
+  border-left-color: rgba(139, 224, 213, 0.28);
+}
+
+:root[data-theme='dark'] .prose table {
+  color: #e5eff1;
+}
+
+:root[data-theme='dark'] .prose thead th {
+  color: #effaf7;
+  background:
+    linear-gradient(135deg, rgba(35, 55, 61, 0.86), rgba(18, 31, 38, 0.78)),
+    rgba(12, 21, 27, 0.84);
+}
+
+:root[data-theme='dark'] .prose tbody tr:nth-child(even) td {
+  background: rgba(139, 224, 213, 0.09);
+}
+
+:root[data-theme='dark'] .prose tbody tr:hover td {
+  background: rgba(139, 224, 213, 0.14);
+}
+
+:root[data-theme='dark'] .prose :where(th, td) {
+  border-color: rgba(139, 224, 213, 0.18);
+}
+
+:root[data-theme='dark'] .site-footer {
+  color: rgba(218, 228, 232, 0.86);
+  background:
+    linear-gradient(180deg, rgba(10, 16, 21, 0.82), rgba(6, 10, 14, 0.94)),
+    rgba(7, 11, 15, 0.92);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
+}
+
+:root[data-theme='dark'] .footer-socials a {
+  border-color: rgba(181, 198, 207, 0.24);
+  color: rgba(231, 240, 243, 0.9);
+  background:
+    linear-gradient(145deg, rgba(28, 40, 48, 0.8), rgba(10, 17, 22, 0.74)),
+    rgba(14, 22, 28, 0.74);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.08),
+    0 10px 24px rgba(0, 0, 0, 0.3);
+}
+
+:root[data-theme='dark'] .footer-bottom {
+  border-top-color: rgba(181, 198, 207, 0.22);
+}
+
diff --git a/src/styles/site/13-responsive.css b/src/styles/site/13-responsive.css
new file mode 100644
index 0000000..7cf218d
--- /dev/null
+++ b/src/styles/site/13-responsive.css
@@ -0,0 +1,377 @@
+@media (min-width: 960px) {
+  .post-list {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 1100px) {
+  .post-layout {
+    grid-template-columns: 1fr;
+  }
+
+  .home-hero {
+    grid-template-columns: 1fr;
+    gap: 22px;
+    padding: 44px 0 28px;
+  }
+
+  .hero-talk {
+    max-width: none;
+  }
+
+  .article-sidebar {
+    align-self: auto;
+    position: static;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .article-sticky-sidebar {
+    position: static;
+    grid-column: 1 / -1;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    max-height: none;
+    overflow: visible;
+  }
+
+  .toc-card {
+    grid-column: 1 / -1;
+  }
+
+  .home-layout {
+    grid-template-columns: 1fr;
+  }
+
+  #talk .talk_item {
+    width: calc(50% - 6px);
+  }
+
+  .home-sidebar {
+    align-self: auto;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .sticky-sidebar,
+  .article-sticky-sidebar {
+    position: static;
+    max-height: none;
+    overflow: visible;
+  }
+}
+
+@media (max-width: 720px) {
+  :root {
+    --page-gutter: 16px;
+  }
+
+  .custom-context-menu {
+    width: min(218px, calc(100vw - 16px));
+    border-radius: 12px;
+    padding: 7px;
+  }
+
+  .context-menu-nav :where(a, button) {
+    height: 40px;
+    border-radius: 13px;
+  }
+
+  .context-menu-group :where(a, button) {
+    min-height: 38px;
+    padding: 8px 9px;
+  }
+
+  .nav {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) 40px;
+    min-height: auto;
+    padding: 10px 12px;
+    align-items: center;
+    gap: 0 10px;
+    border-radius: 24px;
+  }
+
+  .nav-menu-toggle {
+    display: grid;
+    justify-self: end;
+  }
+
+  .nav.is-open .nav-menu-open,
+  .nav-menu-close {
+    display: none;
+  }
+
+  .nav.is-open .nav-menu-close {
+    display: inline-block;
+  }
+
+  .nav-menu {
+    display: none;
+    grid-column: 1 / -1;
+    gap: 8px;
+    margin-top: 10px;
+    border-top: 1px solid rgba(255, 255, 255, 0.46);
+    padding-top: 10px;
+  }
+
+  .nav.is-open .nav-menu {
+    display: grid;
+  }
+
+  .nav-links {
+    width: 100%;
+    gap: 6px;
+    overflow: visible;
+    padding-bottom: 0;
+  }
+
+  .nav-menu .nav-links {
+    display: grid;
+  }
+
+  .nav-center {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .nav-actions {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+
+  .nav-links a,
+  .nav-random,
+  .nav-search,
+  .nav-console,
+  .theme-toggle {
+    width: 100%;
+    justify-content: center;
+  }
+
+  .control-console {
+    align-items: end;
+    padding: 14px;
+  }
+
+  .control-console-panel {
+    max-height: calc(100vh - 28px);
+    border-radius: 8px;
+    padding: 18px;
+  }
+
+  .control-console-grid,
+  .control-console-info {
+    grid-template-columns: 1fr;
+  }
+
+  .control-site-card {
+    grid-template-columns: 40px minmax(0, 1fr);
+    gap: 12px;
+    padding: 14px;
+  }
+
+  .control-site-card > i {
+    width: 40px;
+    height: 40px;
+  }
+
+  .control-site-card small {
+    grid-column: 1 / -1;
+  }
+
+  .theme-toggle {
+    min-height: 38px;
+  }
+
+  .hero {
+    min-height: 300px;
+  }
+
+  .home-hero {
+    min-height: auto;
+    padding-top: 34px;
+  }
+
+  .hero-talk {
+    min-height: 164px;
+    padding: 14px;
+  }
+
+  .hero-talk .talk-list {
+    height: 102px;
+  }
+
+  .hero-talk .item {
+    min-height: 34px;
+    padding: 7px 0;
+    font-size: 0.9rem;
+  }
+
+  .home-sidebar {
+    grid-template-columns: 1fr;
+  }
+
+  .native-feature-grid,
+  .friend-link-grid {
+    grid-template-columns: 1fr;
+  }
+
+  #talk .talk_item {
+    width: 100%;
+    margin-right: 0;
+  }
+
+  #talk .talk_item .talk_content .zone_imgbox {
+    --talk-image-size: calc(50% - 5px);
+  }
+
+  .calendar-widget,
+  .schedule-widget {
+    grid-template-columns: 1fr;
+  }
+
+  .article-sidebar {
+    grid-template-columns: 1fr;
+  }
+
+  .article-sticky-sidebar {
+    grid-template-columns: 1fr;
+  }
+
+  .archive-timeline {
+    padding-left: 24px;
+  }
+
+  .archive-timeline::before {
+    left: 7px;
+  }
+
+  .archive-year {
+    grid-template-columns: 1fr;
+    gap: 14px;
+  }
+
+  .archive-year-marker {
+    left: -25px;
+  }
+
+  .archive-year-head {
+    position: static;
+  }
+
+  .archive-month {
+    grid-template-columns: 1fr;
+    gap: 12px;
+    padding: 16px;
+  }
+
+  .archive-month-label {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: 12px;
+  }
+
+  .archive-list a {
+    grid-template-columns: 38px minmax(0, 1fr);
+    gap: 10px;
+    padding: 8px;
+  }
+
+  .archive-list a time {
+    width: 34px;
+    height: 34px;
+  }
+
+  .stats-chart {
+    padding: 18px;
+  }
+
+  .stats-chart-body {
+    grid-template-columns: 1fr;
+  }
+
+  .chart-legend {
+    grid-template-columns: 1fr;
+  }
+
+  .line-chart {
+    min-width: 460px;
+  }
+
+  .article {
+    margin-top: 32px;
+  }
+
+  .article-header-cover {
+    min-height: 300px;
+    padding-top: 92px;
+  }
+
+  .article-header-cover h1 {
+    font-size: clamp(2rem, 11vw, 3rem);
+  }
+
+  .article-hero-meta {
+    font-size: 0.9rem;
+  }
+
+  .article-summary-card {
+    padding: 34px 16px 16px;
+  }
+
+  .article-summary-footer {
+    align-items: flex-start;
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  .prose .code-block,
+  .table-scroll {
+    margin-right: calc(var(--article-padding) * -0.5);
+    margin-left: calc(var(--article-padding) * -0.5);
+  }
+
+  .prose .code-block pre {
+    padding-right: 16px;
+    padding-left: 16px;
+  }
+
+  .prose table {
+    min-width: 560px;
+    font-size: 0.9rem;
+  }
+
+  .post-copyright-card {
+    padding: 22px 18px 18px;
+  }
+
+  .post-copyright-meta {
+    grid-template-columns: 1fr;
+    gap: 12px;
+  }
+
+  .post-copyright-footer {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+
+  .footer-inner {
+    grid-template-columns: 1fr;
+    gap: 28px;
+    padding: 36px 0 34px;
+    text-align: center;
+  }
+
+  .footer-top {
+    justify-items: center;
+  }
+
+  .footer-bottom {
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+  }
+
+  .footer-meta {
+    justify-items: center;
+    text-align: center;
+  }
+}
+
diff --git a/src/styles/site/14-animations.css b/src/styles/site/14-animations.css
new file mode 100644
index 0000000..4376467
--- /dev/null
+++ b/src/styles/site/14-animations.css
@@ -0,0 +1,95 @@
+@keyframes random-button-spin {
+  0% {
+    transform: rotate(0deg) scale(1);
+  }
+
+  55% {
+    transform: rotate(210deg) scale(1.18);
+  }
+
+  100% {
+    transform: rotate(360deg) scale(1);
+  }
+}
+
+@keyframes random-button-sheen {
+  0% {
+    transform: translateX(-135%);
+  }
+
+  100% {
+    transform: translateX(135%);
+  }
+}
+
+@keyframes random-card-pulse {
+  0% {
+    opacity: 0.55;
+    transform: scale(0.94);
+  }
+
+  100% {
+    opacity: 0;
+    transform: scale(1.16);
+  }
+}
+
+@keyframes random-card-fly {
+  0% {
+    opacity: 0;
+    filter: blur(2px);
+    transform: translate3d(-58vw, -50%, 0) rotate(calc(var(--flight-rotate) - 8deg)) scale(0.74);
+  }
+
+  22% {
+    opacity: 0.88;
+    filter: blur(0);
+  }
+
+  58% {
+    opacity: 0.92;
+    transform: translate3d(-50%, -50%, 0) rotate(var(--flight-rotate)) scale(1);
+  }
+
+  100% {
+    opacity: 0;
+    filter: blur(2px);
+    transform: translate3d(58vw, -50%, 0) rotate(calc(var(--flight-rotate) + 10deg)) scale(0.78);
+  }
+}
+
+@keyframes random-loading-dots {
+  0% {
+    content: "";
+  }
+
+  25% {
+    content: ".";
+  }
+
+  50% {
+    content: "..";
+  }
+
+  75%,
+  100% {
+    content: "...";
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .nav-random.is-randomizing::after,
+  .nav-random.is-randomizing .nav-icon,
+  .random-post-flying-card,
+  .random-post-transition-card::before,
+  .random-post-transition-card::after,
+  .random-post-transition-card i,
+  .random-post-transition-card span::after {
+    animation: none;
+  }
+
+  .random-post-transition,
+  .random-post-transition-card {
+    transition: none;
+  }
+}