/* ============================================================
   tuoyu theme v2 —— 复刻 jeffreyemanuel.com 排版
   浅色默认 + 暗夜模式（[data-theme="dark"]）
   区块：hero / 金刚区 / 正文大数字 / 统计 / stack / ecosystem /
   flywheel14 / explore大图卡 / projects / recognition / writing /
   background / demos / live / threads / newsletter / footer
   ============================================================ */

/* ---------- 主题变量 ---------- */
:root {
  --bg: #f8fafc;
  --bg-soft: #ffffff;
  --bg-2: #f1f5f9;
  --text: #0f172a;
  --text-heading: #0f172a;
  --text-body: #334155;
  --text-2: #475569;
  --text-3: #64748b;
  --border: rgba(15, 23, 42, 0.08);
  --border-strong: #cbd5e1;
  --card: #ffffff;
  --card-hover: #ffffff;
  --shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px -12px rgba(15, 23, 42, 0.12);
  --shadow-lg: 0 12px 40px -16px rgba(15, 23, 42, 0.22);
  --header-bg: rgba(248, 250, 252, 0.9);
  --header-border: rgba(15, 23, 42, 0.1);
  --header-shadow: 0 12px 36px -26px rgba(15, 23, 42, 0.85);
  --float-bg: rgba(255, 255, 255, 0.75);
  --float-border: rgba(15, 23, 42, 0.1);
  --float-border-hover: rgba(2, 132, 199, 0.3);
  --float-shadow: 0 4px 14px -6px rgba(15, 23, 42, 0.18);
  --input-bg: #ffffff;
  --ring: rgba(14, 165, 233, 0.35);
  --grad: linear-gradient(135deg, #0ea5e9, #8b5cf6 55%, #10b981);
  --grad-text: linear-gradient(120deg, #34d399, #38bdf8 50%, #a78bfa);
  --accent: #0284c7;
  --accent-soft: rgba(14, 165, 233, 0.12);
  --particle: rgba(2, 132, 199, 0.5);
  --overlay: rgba(15, 23, 42, 0.5);
  --panel-bg: #ffffff;
  color-scheme: light;
}
[data-theme="dark"] {
  --bg: #020617;
  --bg-soft: #0f172a;
  --bg-2: #0b1220;
  --text: #f1f5f9;
  --text-heading: #f1f5f9;
  --text-body: #cbd5e1;
  --text-2: #94a3b8;
  --text-3: #8390a5;
  --border: rgba(255, 255, 255, 0.1);
  --border-strong: #334155;
  --card: rgba(255, 255, 255, 0.035);
  --card-hover: rgba(255, 255, 255, 0.07);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px -12px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 12px 40px -16px rgba(0, 0, 0, 0.7);
  --header-bg: rgba(2, 6, 23, 0.92);
  --header-border: rgba(255, 255, 255, 0.22);
  --header-shadow: 0 12px 36px -26px rgba(2, 6, 23, 0.95);
  --float-bg: rgba(255, 255, 255, 0.06);
  --float-border: rgba(255, 255, 255, 0.12);
  --float-border-hover: rgba(255, 255, 255, 0.3);
  --float-shadow: 0 4px 14px -6px rgba(0, 0, 0, 0.5);
  --input-bg: rgba(255, 255, 255, 0.06);
  --ring: rgba(56, 189, 248, 0.4);
  --grad: linear-gradient(135deg, #38bdf8, #a78bfa 55%, #34d399);
  --grad-text: linear-gradient(120deg, #34d399, #38bdf8 50%, #c4b5fd);
  --accent: #38bdf8;
  --accent-soft: rgba(56, 189, 248, 0.14);
  --particle: rgba(125, 211, 252, 0.6);
  --overlay: rgba(2, 6, 23, 0.6);
  --panel-bg: #0f172a;
  color-scheme: dark;
}

/* ---------- 基础 ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text-body);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.3s ease, color 0.3s ease;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
.container { max-width: 80rem; margin: 0 auto; padding: 0 1.5rem; }
@media (min-width: 640px) { .container { padding: 0 1.5rem; } }
@media (min-width: 1024px) { .container { padding: 0 2rem; } }

/* 滚动进度条 */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; z-index: 95;
  height: 3px; transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, #0ea5e9, #8b5cf6, #10b981);
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.45);
}

/* ---------- Header ---------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 90;
  border-bottom: 1px solid var(--header-border);
  background: var(--header-bg);
  -webkit-backdrop-filter: blur(22px) saturate(1.25);
  backdrop-filter: blur(22px) saturate(1.25);
  box-shadow: var(--header-shadow);
  transition: background-color 0.3s, border-color 0.3s, box-shadow 0.3s;
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding-top: 12px; padding-bottom: 12px;
}
.brand { display: flex; align-items: center; gap: 0.75rem; }
.brand-mark {
  display: flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem; border-radius: 0.75rem;
  background: linear-gradient(45deg, #0ea5e9, #8b5cf6 55%, #34d399);
  color: #fff;
  box-shadow: 0 8px 20px -6px rgba(56, 189, 248, 0.3);
  transition: transform 0.2s;
  position: relative; overflow: hidden;
}
.brand-mark .brand-spark {
  width: 1.15rem; height: 1.15rem; color: #fff;
  position: absolute; inset: 0; margin: auto; z-index: 1;
  opacity: 0; transform: scale(0.6) rotate(-20deg);
  transition: opacity 0.55s ease, transform 0.55s ease;
  pointer-events: none;
}
.brand-mark .brand-spark.active { opacity: 1; transform: scale(1) rotate(0); }
.brand-mark .brand-shine {
  position: absolute; inset: 0; border-radius: inherit;
  background: rgba(255, 255, 255, 0.2); mix-blend-mode: overlay; pointer-events: none;
}
.brand:hover .brand-mark { transform: scale(1.05); }
.brand-name { font-size: 1.125rem; font-weight: 700; letter-spacing: -0.02em; }

.main-nav { display: none; align-items: center; gap: 0.95rem; }
.main-nav a {
  position: relative; padding: 0.55rem 1.3rem; border-radius: 9999px;
  font-size: 1.05rem; font-weight: 600; letter-spacing: 0.035em; color: var(--text-2);
  white-space: nowrap; transition: color 0.2s, background-color 0.2s;
}
.main-nav a:hover { color: var(--text); background: var(--bg-2); }
.main-nav a.current {
  color: var(--accent); background: var(--accent-soft);
  font-weight: 700;
}
.header-right { display: flex; align-items: center; gap: 0.5rem; }

.search-btn {
  display: flex; align-items: center; gap: 0.5rem;
  height: 2.75rem; padding: 0 0.9rem;
  border: 1px solid var(--border); border-radius: 9999px;
  background: var(--input-bg); color: var(--text-2);
  font-size: 0.875rem; cursor: pointer;
  transition: border-color 0.2s, background-color 0.2s, color 0.2s;
}
.search-btn:hover { border-color: var(--border-strong); color: var(--text); }
.search-btn kbd {
  display: inline-block; padding: 0.15rem 0.4rem; border-radius: 0.35rem;
  border: 1px solid var(--border); background: var(--bg-2);
  font-size: 0.7rem; font-weight: 700; color: var(--text-2);
}
.theme-btn {
  display: flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem; flex-shrink: 0;
  border: 1px solid var(--border); border-radius: 9999px;
  background: var(--input-bg); color: var(--text-2); cursor: pointer;
  transition: border-color 0.2s, background-color 0.2s, color 0.2s;
}
.theme-btn:hover { border-color: var(--border-strong); color: var(--text); }
.theme-btn svg { width: 1.1rem; height: 1.1rem; }
/* 明亮/暗色图标动态切换：默认浅色显示月亮，暗色显示太阳 */
.theme-btn .icon-sun { display: none; }
.theme-btn .icon-moon { display: inline-block; }
[data-theme="dark"] .theme-btn .icon-sun { display: inline-block; }
[data-theme="dark"] .theme-btn .icon-moon { display: none; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
  min-height: 2.75rem; padding: 0.5rem 1.1rem;
  border-radius: 9999px; font-size: 0.875rem; font-weight: 600;
  cursor: pointer; border: 1px solid transparent; text-decoration: none;
  transition: transform 0.2s, box-shadow 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s;
}
.btn:active, button:active, a:active { transform: scale(0.98); }
.btn-primary {
  background: linear-gradient(90deg, #7c3aed, #c026d3); color: #fff;
  box-shadow: 0 0 20px -5px rgba(139, 92, 246, 0.4);
}
[data-theme="dark"] .btn-primary { background: linear-gradient(90deg, #8b5cf6, #d946ef); }
.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 30px -5px rgba(139, 92, 246, 0.5), 0 0 60px -10px rgba(217, 70, 239, 0.3);
}
.btn-ghost { border-color: var(--border-strong); color: var(--text); background: transparent; }
.btn-ghost:hover { background: var(--accent-soft); color: var(--accent); transform: translateY(-1px); box-shadow: 0 0 20px -8px rgba(56, 189, 248, 0.35); }
.btn-sm { min-height: 2.25rem; padding: 0.3rem 0.9rem; font-size: 0.8rem; }

.nav-toggle {
  display: flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 2.75rem; height: 2.75rem; border: 1px solid var(--border);
  border-radius: 0.75rem; background: transparent; cursor: pointer;
}
.nav-toggle span { display: block; width: 22px; height: 2px; margin: 0 auto; background: var(--text); border-radius: 2px; transition: 0.25s; }
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* 移动端菜单 */
.mobile-menu {
  display: none; padding: 0.5rem 1.5rem 1rem;
  border-bottom: 1px solid var(--border);
}
.mobile-menu.open { display: block; }
.mobile-menu a {
  display: block; padding: 0.7rem 0.4rem; font-weight: 500; color: var(--text);
  border-bottom: 1px solid var(--border);
}
.mobile-menu a:last-child { border-bottom: 0; }
.mobile-menu a.current { color: var(--accent); font-weight: 700; }

@media (min-width: 1024px) {
  .main-nav { display: flex; }
  .nav-toggle { display: none; }
  .mobile-menu { display: none !important; }
}

/* ---------- Hero ---------- */
.hero { padding: 8.5rem 0 4rem; position: relative; }
.hero .container { display: grid; gap: 2.5rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .hero .container { grid-template-columns: 0.72fr 1.28fr; gap: 3rem; } }
.hero-side {}
.hero-avatar {
  width: 9rem; height: 9rem; border-radius: 1.25rem; overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.hero-avatar img { width: 100%; height: 100%; object-fit: cover; }
.hero-id { margin-top: 1.25rem; }
.hero-id .name { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; }
.hero-id .role {
  margin-top: 0.25rem; font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-2);
}
.hero-kicker {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-2);
  padding: 0.3rem 0.7rem; border-radius: 9999px;
  border: 1px solid var(--border); background: var(--card);
  margin-bottom: 1.25rem;
  animation: chip-float 6s ease-in-out infinite alternate;
}
.hero-kicker .badge-dot { width: 6px; height: 6px; border-radius: 50%; background: #10b981; animation: pulse-gentle 2s ease-in-out infinite; }
.hero-title {
  margin: 0 0 1.25rem;
  font-size: clamp(2.1rem, 5.2vw, 3.6rem);
  font-weight: 800; line-height: 1.08; letter-spacing: -0.03em;
}
.gradient-text {
  background: var(--grad-text);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: shimmer 7s ease-in-out infinite;
}
.hero-lead { margin: 0 0 1.75rem; font-size: 1.05rem; color: var(--text-2); max-width: 38rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* 金刚区工具 */
.hero-tools { margin-top: 2.5rem; }
.hero-tools-title {
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-3); margin-bottom: 1rem;
}
.tool-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .tool-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .tool-grid { grid-template-columns: repeat(3, 1fr); } }
.tool-card {
  display: flex; flex-direction: column; gap: 0.4rem;
  padding: 1.1rem 1.2rem; border-radius: 1.25rem;
  border: 1px solid var(--border); background: var(--card);
  transition: border-color 0.2s, background-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.tool-card:hover { transform: translateY(-2px); background: var(--card-hover); box-shadow: var(--shadow); }
.tool-card-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.tool-card h3 { margin: 0; font-size: 0.95rem; font-weight: 700; }
.tool-card .tool-star {
  flex-shrink: 0; font-size: 0.72rem; font-weight: 600; color: #f59e0b;
}
.tool-card p { margin: 0; font-size: 0.82rem; line-height: 1.5; color: var(--text-2); }
.tool-card .tool-sub { font-size: 0.78rem; font-weight: 600; color: var(--text-2); }
.tool-more {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-size: 0.85rem; font-weight: 600; color: var(--accent);
  min-height: 2.5rem; padding: 0.3rem 0.2rem;
}
.tool-more:hover { text-decoration: underline; }

/* ---------- 正文大数字段 ---------- */
.lead-section { padding: 3.5rem 0 1rem; }
.lead-big {
  display: flex; align-items: baseline; gap: 0.9rem; flex-wrap: wrap;
  margin-bottom: 1.25rem;
}
.lead-big .num { font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 800; letter-spacing: -0.02em; }
.lead-big .label { font-size: 1.05rem; font-weight: 600; color: var(--text-2); }
.lead-paras p { margin: 0 0 1rem; color: var(--text-2); font-size: 1.02rem; max-width: 46rem; line-height: 1.7; }
.lead-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; }

/* ---------- 统计 ---------- */
.stats-section { padding: 3.5rem 0 2rem; }
.stats-grid {
  display: grid; gap: 1.5rem; grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 800px) { .stats-grid { grid-template-columns: repeat(4, 1fr); } }
.stat-item {}
.stat-item .stat-label {
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-3); margin-bottom: 0.35rem;
}
.stat-item .stat-num {
  font-size: clamp(2rem, 3.6vw, 2.6rem); font-weight: 800; letter-spacing: -0.02em;
  line-height: 1.1;
}
.stat-item .stat-desc { margin-top: 0.4rem; font-size: 0.8rem; color: var(--text-3); max-width: 15rem; }
.stats-aside { margin-top: 1.25rem; font-size: 0.8rem; }
.stats-aside a { color: var(--accent); font-weight: 600; }
.stats-aside a:hover { text-decoration: underline; }

/* ---------- Section 通用 ---------- */
.section { padding: 3.5rem 0; }
.section-head { margin-bottom: 2.5rem; }
.section-tag {
  display: inline-block; font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent);
  margin-bottom: 0.75rem;
}
.section-title { margin: 0 0 0.75rem; font-size: clamp(1.6rem, 3.2vw, 2.4rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; }
.section-sub { margin: 0; color: var(--text-2); max-width: 42rem; }

/* ---------- 首页动态：简洁分隔线列表（日期 · 标题 · 摘要 · 箭头） ---------- */
.threads-sec { padding: 2.5rem 0 0; }
.threads-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding-bottom: 0.75rem; border-bottom: 1px solid var(--border-strong);
}
.threads-title {
  position: relative; margin: 0; padding-left: 0.85rem;
  font-size: 0.95rem; font-weight: 700; letter-spacing: 0.16em; color: var(--text);
}
.threads-title::before {
  content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 3px; height: 0.95em; border-radius: 2px; background: var(--grad);
}
.threads-more {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-size: 0.8rem; color: var(--text-3); transition: color 0.2s;
}
.threads-more:hover { color: var(--accent); }
.thread-list { list-style: none; margin: 0; padding: 0; }
.thread-item + .thread-item { border-top: 1px solid var(--border); }
.thread-item a {
  display: grid; grid-template-columns: 5.5rem minmax(0, 1fr) auto;
  align-items: center; gap: 0 1.1rem; padding: 0.8rem 0.15rem;
  transition: background-color 0.2s;
}
.thread-item a:hover { background: var(--bg-2); }
.thread-date { font-size: 0.76rem; color: var(--text-3); font-variant-numeric: tabular-nums; }
.thread-body { min-width: 0; display: flex; align-items: baseline; gap: 0.7rem; }
.thread-title {
  flex: 0 1 auto; min-width: 0; font-size: 0.92rem; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color 0.2s;
}
.thread-item a:hover .thread-title { color: var(--accent); }
.thread-excerpt {
  flex: 1 1 0; min-width: 0; font-size: 0.82rem; color: var(--text-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.thread-go { font-size: 0.85rem; color: var(--text-3); transition: transform 0.2s, color 0.2s; }
.thread-item a:hover .thread-go { color: var(--accent); transform: translateX(3px); }
@media (max-width: 720px) {
  .thread-excerpt { display: none; }
  .thread-item a { grid-template-columns: 4.8rem minmax(0, 1fr) auto; gap: 0 0.7rem; }
}

.grid-3 { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 760px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }
.grid-4 { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .grid-4 { grid-template-columns: repeat(4, 1fr); } }
.grid-2 { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 760px) { .grid-2 { grid-template-columns: repeat(2, 1fr); } }

.card {
  display: flex; flex-direction: column; gap: 0.6rem;
  padding: 1.5rem; border-radius: 1.5rem;
  border: 1px solid var(--border); background: var(--card);
  transition: border-color 0.2s, background-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
a.card:hover { transform: translateY(-3px); background: var(--card-hover); box-shadow: var(--shadow-lg); }
.card-tag {
  align-self: flex-start; display: inline-flex;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--accent); padding: 0.25rem 0.6rem; border-radius: 9999px;
  background: var(--accent-soft);
}
.card h3 { margin: 0; font-size: 1.15rem; font-weight: 700; letter-spacing: -0.01em; }
.card p { margin: 0; color: var(--text-2); font-size: 0.9rem; line-height: 1.6; }
.card-link {
  display: inline-flex; align-items: center; gap: 0.3rem;
  margin-top: auto; font-size: 0.85rem; font-weight: 600; color: var(--accent);
}
.card-link:hover { text-decoration: underline; }

/* ---------- Ecosystem（飞轮 14 工具列表） ---------- */
.flywheel-grid { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 760px) { .flywheel-grid { grid-template-columns: repeat(2, 1fr); } }
.fly-item {
  display: flex; gap: 1rem; align-items: flex-start;
  padding: 1.1rem 1.2rem; border-radius: 1.25rem;
  border: 1px solid var(--border); background: var(--card);
  transition: border-color 0.2s, background-color 0.2s, transform 0.2s;
}
.fly-item:hover { transform: translateY(-2px); background: var(--card-hover); }
.fly-avatar {
  flex-shrink: 0; width: 3.4rem; height: 3.4rem; border-radius: 1rem;
  overflow: hidden; background: var(--grad);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 800; font-size: 1rem;
}
.fly-avatar img { width: 100%; height: 100%; object-fit: cover; }
.fly-body h3 { margin: 0 0 0.3rem; font-size: 0.98rem; font-weight: 700; }
.fly-body p { margin: 0; font-size: 0.84rem; color: var(--text-2); line-height: 1.55; }
.fly-body a { color: var(--accent); font-weight: 600; font-size: 0.82rem; }
.fly-body a:hover { text-decoration: underline; }
.fly-stat {
  display: flex; align-items: center; gap: 0.5rem; margin-top: 0.5rem;
  font-size: 0.75rem; color: var(--text-3);
}
.fly-stat b { color: var(--text-2); font-weight: 700; }
.section-more { margin-top: 2rem; }

/* ---------- Explore 大图卡 ---------- */
.explore-grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .explore-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .explore-grid { grid-template-columns: repeat(4, 1fr); } }
.explore-card {
  display: flex; flex-direction: column;
  border-radius: 1.5rem; overflow: hidden;
  border: 1px solid var(--border); background: var(--card);
  transition: transform 0.25s, box-shadow 0.25s, background-color 0.25s;
}
.explore-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); background: var(--card-hover); }
.explore-cover { aspect-ratio: 1200 / 630; overflow: hidden; }
.explore-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.explore-card:hover .explore-cover img { transform: scale(1.04); }
.explore-body { display: flex; flex-direction: column; gap: 0.5rem; padding: 1.25rem 1.25rem 1.4rem; flex: 1; }
.explore-body .domain { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; color: var(--text-3); text-transform: uppercase; }
.explore-body h3 { margin: 0; font-size: 1.05rem; font-weight: 700; }
.explore-body p { margin: 0; font-size: 0.84rem; color: var(--text-2); line-height: 1.55; }
.explore-body .card-link { margin-top: 0.5rem; }

/* ---------- Projects ---------- */
.proj-grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 760px) { .proj-grid { grid-template-columns: repeat(2, 1fr); } }
.proj-card {
  display: flex; flex-direction: column; gap: 0;
  border-radius: 1.5rem; overflow: hidden;
  border: 1px solid var(--border); background: var(--card);
  transition: transform 0.25s, box-shadow 0.25s, background-color 0.25s;
}
.proj-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); background: var(--card-hover); }
.proj-cover { aspect-ratio: 2730 / 1536; overflow: hidden; }
.proj-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.proj-card:hover .proj-cover img { transform: scale(1.04); }
.proj-body { display: flex; flex-direction: column; gap: 0.6rem; padding: 1.35rem 1.35rem 1.5rem; flex: 1; }
.proj-body h3 { margin: 0; font-size: 1.1rem; font-weight: 700; }
.proj-body p { margin: 0; color: var(--text-2); font-size: 0.88rem; line-height: 1.6; }
.tech-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.tech-tags span {
  font-size: 0.72rem; font-weight: 600; color: var(--text-2);
  padding: 0.2rem 0.55rem; border-radius: 9999px;
  border: 1px solid var(--border); background: var(--bg-2);
}

/* ---------- Recognition ---------- */
.quote-grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 760px) { .quote-grid { grid-template-columns: repeat(2, 1fr); } }
.quote-card { justify-content: center; }
.quote-card blockquote {
  margin: 0; font-size: 1.15rem; line-height: 1.6; font-weight: 500;
  letter-spacing: -0.01em;
}
.quote-card figcaption { margin-top: 1.25rem; }
.quote-card figcaption b { display: block; font-size: 0.9rem; }
.quote-card figcaption span { font-size: 0.78rem; color: var(--text-3); }
.quote-nav { display: flex; align-items: center; gap: 0.8rem; margin-top: 1.5rem; font-size: 0.8rem; color: var(--text-3); }
.quote-nav button {
  border: 1px solid var(--border); background: transparent; color: var(--text-2);
  border-radius: 9999px; padding: 0.3rem 0.8rem; cursor: pointer; font-size: 0.8rem;
}
.quote-nav button:hover { background: var(--accent-soft); }

/* ---------- Writing 列表（卡片网格，参照开源项目卡） ---------- */
.writing-list { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 760px) { .writing-list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .writing-list { grid-template-columns: repeat(3, 1fr); } }
.writing-item {
  display: flex; flex-direction: column; gap: 0.55rem;
  border: 1px solid var(--border); border-radius: 1.25rem; padding: 1.35rem 1.4rem 1.4rem;
  background: var(--card); text-decoration: none; color: inherit;
  transition: transform 0.25s, box-shadow 0.25s, background-color 0.25s, border-color 0.25s;
}
.writing-item:hover {
  transform: translateY(-3px); box-shadow: var(--shadow-lg);
  background: var(--card-hover); border-color: var(--border-strong);
}
.writing-top { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }
.writing-top .cate {
  font-size: 0.72rem; font-weight: 700; color: var(--accent);
  background: var(--accent-soft); padding: 0.22rem 0.62rem; border-radius: 9999px;
}
.writing-top .date { font-size: 0.75rem; color: var(--text-3); }
.writing-item h3 { margin: 0; font-size: 1.05rem; font-weight: 700; line-height: 1.5; letter-spacing: -0.01em; }
.writing-item h3 a { color: inherit; }
.writing-item p {
  margin: 0; color: var(--text-2); font-size: 0.87rem; line-height: 1.65;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.writing-foot {
  margin-top: auto; padding-top: 0.7rem; border-top: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; gap: 0.6rem;
}
.writing-foot .tags { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.writing-foot .tags span {
  font-size: 0.68rem; font-weight: 600; color: var(--text-2);
  border: 1px solid var(--border); background: var(--bg-2); padding: 0.12rem 0.52rem; border-radius: 9999px;
}
.writing-item .card-link { transition: color 0.2s; }
.writing-item:hover .card-link { color: var(--accent); }

/* ---------- Background 时间线 ---------- */
.timeline { display: flex; flex-direction: column; }
.tl-item {
  display: grid; gap: 0.5rem; grid-template-columns: 1fr;
  padding: 1.4rem 0; border-bottom: 1px solid var(--border);
}
@media (min-width: 760px) { .tl-item { grid-template-columns: 14rem 1fr; gap: 2rem; } }
.tl-period { font-size: 0.85rem; font-weight: 600; color: var(--text-2); padding-top: 0.15rem; }
.tl-body h3 { margin: 0 0 0.35rem; font-size: 1.02rem; font-weight: 700; }
.tl-body p { margin: 0; color: var(--text-2); font-size: 0.88rem; line-height: 1.6; }
.tl-body .loc { margin-top: 0.35rem; font-size: 0.75rem; color: var(--text-3); }

/* ---------- Demos：一行三个（缩略图在上，标题与介绍在下） ---------- */
.demo-grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 760px) { .demo-grid { grid-template-columns: repeat(3, 1fr); } }
.demo-card {
  display: flex; flex-direction: column;
  border-radius: 1.5rem; overflow: hidden;
  border: 1px solid var(--border); background: var(--card);
  transition: transform 0.25s, box-shadow 0.25s, background-color 0.25s;
}
.demo-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); background: var(--card-hover); }
.demo-cover { aspect-ratio: 16 / 9; overflow: hidden; }
.demo-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.demo-card:hover .demo-cover img { transform: scale(1.04); }
.demo-body { display: flex; flex-direction: column; gap: 0.55rem; padding: 1.25rem 1.25rem 1.4rem; flex: 1; }
.demo-body h3 { margin: 0; font-size: 1.05rem; font-weight: 700; }
.demo-body p { margin: 0; color: var(--text-2); font-size: 0.85rem; line-height: 1.55; }

/* ---------- Live ---------- */
.live-card {
  display: flex; align-items: center; gap: 1rem;
  padding: 1.5rem; border-radius: 1.5rem;
  border: 1px solid var(--border); background: var(--card);
}
.live-pulse { position: relative; width: 0.7rem; height: 0.7rem; flex-shrink: 0; }
.live-pulse::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: #10b981; animation: ping 1.8s cubic-bezier(0, 0, 0.2, 1) infinite;
}
.live-pulse::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #10b981; }
@keyframes ping { 75%, 100% { transform: scale(2.4); opacity: 0; } }
.live-body h3 { margin: 0 0 0.25rem; font-size: 1.02rem; font-weight: 700; }
.live-body p { margin: 0; font-size: 0.85rem; color: var(--text-2); }
.live-body .offline { display: inline-flex; margin-top: 0.5rem; font-size: 0.75rem; color: var(--text-3); }

/* ---------- Threads ---------- */
.thread-list { display: flex; flex-direction: column; }
.thread-item {
  display: block; padding: 1.3rem 0; border-bottom: 1px solid var(--border);
  border-radius: 0.5rem; transition: padding-left 0.2s, background-color 0.2s;
}
.thread-item:hover { padding-left: 0.75rem; background: var(--accent-soft); }
.thread-item h3 { margin: 0 0 0.35rem; font-size: 1.02rem; font-weight: 700; }
.thread-item p { margin: 0; color: var(--text-2); font-size: 0.88rem; line-height: 1.6; max-width: 44rem; }

/* ---------- Newsletter ---------- */
.newsletter { padding-top: 4rem; }
.newsletter-inner {
  padding: 3rem 1.5rem; border-radius: 2rem; text-align: center;
  border: 1px solid var(--border);
  background:
    radial-gradient(ellipse at top, var(--accent-soft), transparent 65%),
    var(--card);
}
.newsletter-inner h2 { margin: 0 0 0.75rem; font-size: 1.8rem; font-weight: 800; letter-spacing: -0.02em; }
.newsletter-inner > p { margin: 0 auto 1.5rem; color: var(--text-2); max-width: 34rem; }
.subscribe-form { display: flex; gap: 0.6rem; max-width: 30rem; margin: 0 auto; flex-wrap: wrap; justify-content: center; }
.subscribe-form input {
  flex: 1; min-width: 14rem; min-height: 2.75rem; padding: 0.5rem 1rem;
  border: 1px solid var(--border); border-radius: 9999px;
  background: var(--input-bg); color: var(--text); font-size: 0.9rem;
  outline: none; transition: border-color 0.2s, box-shadow 0.2s;
}
.subscribe-form input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); }
.newsletter-note { margin-top: 1rem; font-size: 0.75rem; color: var(--text-3); }

/* ---------- Footer ---------- */
.site-footer { position: relative; margin-top: 4rem; }
.footer-line { height: 1px; background: linear-gradient(90deg, transparent, var(--ring), transparent); }
.footer-glow {
  position: absolute; inset: 0 0 auto 0; height: 10rem; pointer-events: none;
  background: radial-gradient(ellipse at center, var(--accent-soft), transparent 70%);
}
.footer-inner {
  position: relative; display: flex; flex-wrap: wrap; align-items: center;
  gap: 1.25rem 2.5rem; padding: 2.25rem 0 1.5rem;
}
.footer-brand { flex: 1 1 20rem; }
.footer-brand p { margin: 0.6rem 0 0; color: var(--text-3); font-size: 0.85rem; line-height: 1.6; }
.footer-nav { flex: 1 1 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1.15rem; }
.footer-nav a { font-size: 0.88rem; color: var(--text-2); padding: 0.3rem 0; display: inline-flex; align-items: center; transition: color 0.2s; }
.footer-nav a:hover { color: var(--text); }
.footer-right { flex: 0 0 auto; display: flex; align-items: center; gap: 1rem; }
.social-row { display: flex; gap: 0.75rem; }
.social-btn {
  display: flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem; border-radius: 9999px;
  border: 1px solid var(--border); background: var(--card); color: var(--text-2);
  transition: transform 0.2s, border-color 0.2s, color 0.2s;
}
.social-btn:hover { transform: scale(1.1); border-color: var(--border-strong); color: var(--text); }
.social-btn svg { width: 1.1rem; height: 1.1rem; }
.footer-bottom {
  padding: 1rem 0 1.75rem; font-size: 0.78rem; color: var(--text-3);
  border-top: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center; gap: 0.9rem;
  text-align: center; flex-wrap: wrap;
}

/* 右下浮动回顶（玻璃拟态圆钮，参考站圆钮风格） */
.float-top {
  position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 80;
  width: 3rem; height: 3rem; border-radius: 9999px;
  border: 1px solid var(--float-border);
  background: var(--float-bg);
  color: var(--text-2);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; box-shadow: var(--float-shadow);
  opacity: 0; pointer-events: none; transform: translateY(10px);
  transition: opacity 0.3s, transform 0.3s, box-shadow 0.25s, background-color 0.25s, color 0.25s, border-color 0.25s;
}
.float-top.show { opacity: 1; pointer-events: auto; transform: translateY(0); }
.float-top:hover {
  background: var(--accent-soft); color: var(--accent); border-color: var(--float-border-hover);
  transform: translateY(-3px) scale(1.04);
  box-shadow: 0 0 20px -8px rgba(56, 189, 248, 0.4);
}
.float-top svg { width: 1.2rem; height: 1.2rem; transition: transform 0.25s ease; }
.float-top:hover svg { transform: translateY(-2px); }

/* ---------- 粒子背景 ---------- */
#particles {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
}
.site-main { position: relative; z-index: 1; }

/* ---------- 搜索面板 ---------- */
.search-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: var(--overlay);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  display: none; align-items: flex-start; justify-content: center;
  padding: 12vh 1rem 2rem;
}
.search-overlay.open { display: flex; }
.search-panel {
  width: 100%; max-width: 36rem; max-height: 70vh; overflow: auto;
  border-radius: 1.5rem; border: 1px solid var(--border);
  background: var(--panel-bg); box-shadow: var(--shadow-lg);
  animation: pop 0.18s ease-out;
}
@keyframes pop { from { transform: scale(0.97); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.search-head {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 1rem 1.25rem; border-bottom: 1px solid var(--border);
}
.search-head svg { width: 1.15rem; height: 1.15rem; color: var(--text-3); flex-shrink: 0; }
.search-head input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
  color: var(--text); font-size: 1rem;
}
.search-head kbd {
  font-size: 0.7rem; font-weight: 700; color: var(--text-3);
  border: 1px solid var(--border); border-radius: 0.35rem; padding: 0.15rem 0.4rem;
}
.search-body { padding: 0.5rem 0 1rem; }
.search-group-label {
  padding: 0.9rem 1.25rem 0.35rem;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-3);
}
.search-item {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.7rem 1.25rem; cursor: pointer;
}
.search-item:hover, .search-item.active { background: var(--accent-soft); }
.search-item .t { font-size: 0.92rem; font-weight: 600; color: var(--text); }
.search-item .d { font-size: 0.78rem; color: var(--text-3); white-space: nowrap; }
.search-empty { padding: 1.5rem 1.25rem; font-size: 0.9rem; color: var(--text-3); }
.search-foot {
  display: flex; align-items: center; gap: 1rem; justify-content: center;
  padding: 0.8rem; border-top: 1px solid var(--border);
  font-size: 0.72rem; color: var(--text-3);
}
.search-foot span b {
  padding: 0.1rem 0.4rem; border: 1px solid var(--border); border-radius: 0.3rem;
  font-weight: 700;
}

/* ---------- 动效：滚动显现 ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.in { opacity: 1; transform: none; }

/* ---------- 列表页 / 搜索 / 404 ---------- */
.list-main { padding: 8rem 0 4rem; min-height: 60vh; }
.list-head { margin-bottom: 2.5rem; }
.list-title { margin: 0 0 0.5rem; font-size: clamp(1.8rem, 3.4vw, 2.6rem); font-weight: 800; letter-spacing: -0.02em; }
.list-sub { margin: 0; color: var(--text-2); }
.search-form { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 1.25rem; max-width: 30rem; }
.search-form input {
  flex: 1; min-width: 14rem; min-height: 2.75rem; padding: 0.5rem 1rem;
  border: 1px solid var(--border); border-radius: 9999px;
  background: var(--input-bg); color: var(--text); font-size: 0.9rem;
  outline: none; transition: border-color 0.2s, box-shadow 0.2s;
}
.search-form input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); }
.empty-tip { padding: 4rem 0; text-align: center; color: var(--text-3); }
.pagebar-wrap { margin-top: 2.5rem; }
.pagination, .pagebar { display: flex; flex-wrap: wrap; gap: 0.45rem; justify-content: center; }
.pagination a, .pagebar a {
  min-width: 2.3rem; height: 2.3rem; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 0.6rem; border: 1px solid var(--border);
  background: var(--card); font-size: 0.85rem; font-weight: 600; padding: 0 0.8rem;
  color: var(--text-2); text-decoration: none;
  transition: background-color 0.18s, color 0.18s, border-color 0.18s, box-shadow 0.18s;
}
.pagination a:hover, .pagebar a:hover {
  background: var(--accent-soft); color: var(--accent); border-color: var(--accent);
  box-shadow: 0 3px 12px -6px var(--accent);
}
.pagination a .page, .pagebar a .page {
  border: 0; background: transparent; box-shadow: none;
  min-width: 0; height: auto; padding: 0;
  font-size: inherit; font-weight: inherit; color: inherit;
}
.pagination .now-page, .pagebar .now-page {
  min-width: 2.3rem; height: 2.3rem; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 0.6rem; border: 1px solid var(--accent);
  background: var(--accent); color: #fff;
  font-size: 0.85rem; font-weight: 600; padding: 0 0.8rem;
  box-shadow: 0 5px 16px -8px var(--accent);
  cursor: default;
}
.pagination .page.icon svg { width: 0.95rem; height: 0.95rem; }

/* ---------- 文章页 ---------- */
.single-main { padding: 8rem 0 4rem; }
.article-wrap { max-width: 74rem; margin: 0 auto; }
.post-head { margin-bottom: 2rem; }
.post-head .section-tag { margin-bottom: 0.6rem; }
.post-title { margin: 0 0 1rem; font-size: clamp(1.9rem, 3.6vw, 2.8rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; }
.post-meta { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; font-size: 0.82rem; color: var(--text-3); }
.post-meta a { color: var(--accent); }
.post-hero-cover { margin: 1.5rem 0 2rem; border-radius: 1.5rem; overflow: hidden; border: 1px solid var(--border); }
.post-hero-cover img { width: 100%; }
.post-content { font-size: 1.02rem; line-height: 1.85; }
.post-content p { margin: 0 0 1.25rem; }
.post-content h2 { margin: 2.2rem 0 1rem; font-size: 1.45rem; font-weight: 700; letter-spacing: -0.01em; }
.post-content h3 { margin: 2rem 0 0.8rem; font-size: 1.2rem; font-weight: 700; }
.post-content img { display: block; max-width: 100%; height: auto; border-radius: 1rem; margin: 1.5rem auto; }
.post-content a { color: var(--accent); text-decoration: underline; }
.post-content blockquote {
  margin: 1.5rem 0; padding: 1rem 1.25rem; border-left: 3px solid var(--accent);
  background: var(--bg-2); border-radius: 0 0.75rem 0.75rem 0; color: var(--text-2);
}
.post-content code { background: var(--bg-2); padding: 0.15rem 0.4rem; border-radius: 0.35rem; font-size: 0.88em; }
.post-content pre { background: var(--bg-2); padding: 1.25rem; border-radius: 1rem; overflow: auto; border: 1px solid var(--border); }
.post-content pre code { background: transparent; padding: 0; }
/* Markdown 转换后的扩展样式：列表 / 表格 / 分隔线 / 多级标题 */
.post-content h4 { margin: 1.75rem 0 0.7rem; font-size: 1.08rem; font-weight: 700; }
.post-content ul, .post-content ol { margin: 0 0 1.25rem; padding-left: 1.6rem; }
.post-content ul { list-style: disc; }
.post-content ol { list-style: decimal; }
.post-content li { margin: 0.35rem 0; }
.post-content li > ul, .post-content li > ol { margin: 0.35rem 0; }
.post-content hr { border: none; border-top: 1px solid var(--border); margin: 2.2rem 0; }
.post-content table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: 0.95rem; }
.post-content th, .post-content td { border: 1px solid var(--border); padding: 0.6rem 0.9rem; text-align: left; vertical-align: top; }
.post-content th { background: var(--bg-2); font-weight: 700; }
.post-content tr:nth-child(even) td { background: var(--bg-2); }
.post-foot { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--border); }
.post-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1.5rem; }
.post-tags a {
  font-size: 0.75rem; font-weight: 600; color: var(--text-2);
  padding: 0.25rem 0.6rem; border-radius: 9999px;
  border: 1px solid var(--border); background: var(--bg-2);
}
.post-tags a:hover { color: var(--accent); border-color: var(--accent); }
.post-nav { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; }
.post-nav a { color: var(--text-2); font-size: 0.88rem; }
.post-nav a:hover { color: var(--accent); }

/* 评论 */
.comments-section { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--border); }
.comments-title { font-size: 1.2rem; font-weight: 700; margin-bottom: 1.25rem; }
.comment-item {
  padding: 1.1rem 0; border-bottom: 1px solid var(--border);
}
.comment-item .cmt-meta { display: flex; align-items: center; gap: 0.6rem; font-size: 0.8rem; color: var(--text-3); margin-bottom: 0.4rem; }
.comment-item .cmt-name { font-weight: 700; color: var(--text); }
.comment-item .cmt-content { font-size: 0.92rem; line-height: 1.7; }
.comment-item .cmt-reply { color: var(--accent); font-size: 0.78rem; }
#comment-post { margin-top: 2rem; }
#comment-post h3 { font-size: 1.05rem; margin-bottom: 1rem; }
#comment-post input[type="text"], #comment-post input[type="email"], #comment-post textarea {
  width: 100%; padding: 0.7rem 1rem; margin-bottom: 0.75rem;
  border: 1px solid var(--border); border-radius: 0.9rem;
  background: var(--input-bg); color: var(--text); font-size: 0.9rem; font-family: inherit;
  outline: none; transition: border-color 0.2s, box-shadow 0.2s;
}
#comment-post input:focus, #comment-post textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); }
#comment-post textarea { min-height: 8rem; resize: vertical; }

/* 评论发布表单（现代卡片式） */
.comment-post {
  background: var(--bg-2); border: 1px solid var(--border); border-radius: 1.25rem;
  padding: 1.75rem; margin-top: 2.25rem;
}
.comment-post .comments-title { margin-bottom: 1.4rem; }
.comment-post form .comment-fields { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
@media (max-width: 820px) { .comment-post form .comment-fields { grid-template-columns: 1fr; } }
.comment-post .cf label, .comment-post .cf-full label {
  display: block; font-size: 0.82rem; font-weight: 600; color: var(--text-2); margin-bottom: 0.45rem;
}
.comment-post .cf label em, .comment-post .cf-full label em { color: var(--accent); font-style: normal; margin-left: 2px; }
.comment-post .cf input.text, .comment-post .cf-full textarea {
  width: 100%; padding: 0.7rem 1rem;
  border: 1px solid var(--border); border-radius: 0.9rem;
  background: var(--input-bg); color: var(--text); font-size: 0.9rem; font-family: inherit;
  outline: none; transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
}
.comment-post .cf input.text:focus, .comment-post .cf-full textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); }
.comment-post .cf-full { margin-top: 1.25rem; }
.comment-post .cf-full textarea { min-height: 8.5rem; resize: vertical; }
.comment-post .verify-row { display: flex; align-items: center; gap: 0.75rem; }
.comment-post .verify-img {
  border: 1px solid var(--border); border-radius: 0.7rem; cursor: pointer;
  flex-shrink: 0; height: 2.4rem;
}
.comment-post .cf-submit { margin-top: 1.25rem; }
.comment-post .postbottom {
  margin-top: 1.25rem; padding-top: 1rem; border-top: 1px dashed var(--border);
  font-size: 0.8rem; color: var(--text-3);
}

@media print { .site-header, .site-footer, .float-top, #particles, .search-overlay, .scroll-progress { display: none !important; } }

/* ========== 参考站动画体系 (jeffreyemanuel.com) ========== */
@keyframes page-enter {
  0% { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: none; }
}
@keyframes chip-float {
  0% { transform: translateY(0); }
  100% { transform: translateY(-8px); }
}
@keyframes pulse-gentle {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes cursor-blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}
.site-main { animation: page-enter 0.3s cubic-bezier(0.16, 1, 0.3, 1) both; }
.sol-tab { animation: chip-float 6s ease-in-out infinite alternate; }
.sol-tab:nth-child(2) { animation-delay: 0.6s; }
.sol-tab:nth-child(3) { animation-delay: 1.2s; }
.sol-tab:nth-child(4) { animation-delay: 1.8s; }
.sol-tab:nth-child(5) { animation-delay: 2.4s; }
.sol-tab:nth-child(6) { animation-delay: 3s; }
.section-tag { animation: chip-float 7s ease-in-out infinite alternate; }

/* 细滚动条（参考站 scrollbar-thin） */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(100, 116, 139, 0.35); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: rgba(100, 116, 139, 0.55); }

/* 噪声纹理（参考站 body::before） */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  opacity: 0.4; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}

/* 卡片顶部渐变线（参考站 group-hover scale-x） */
.writing-item, .proj-card, .demo-card { position: relative; overflow: hidden; }
.writing-item::before, .proj-card::before, .demo-card::before {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 2px; z-index: 1;
  transform: scaleX(0); transform-origin: center; opacity: 0;
  background: linear-gradient(90deg, #38bdf8, #a78bfa, #38bdf8);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.5s;
}
.writing-item:hover::before, .proj-card:hover::before, .demo-card:hover::before {
  transform: scaleX(1); opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .site-main, .hero-kicker, .sol-tab, .section-tag, .gradient-text,
  .hero-kicker .badge-dot { animation: none !important; }
}

/* ---------- 项目栏目页：标签筛选 + 文字卡片（参照 jeffreyemanuel.com/projects） ---------- */
.proj-filters{display:flex;flex-wrap:wrap;gap:.55rem;margin:2.25rem 0 2.5rem}
.pf-chip{font-family:inherit;font-size:.88rem;font-weight:600;color:var(--text-2);background:var(--card);border:1px solid var(--border);padding:.5rem 1.15rem;border-radius:9999px;cursor:pointer;transition:all .2s ease}
.pf-chip:hover{color:var(--accent);border-color:var(--accent);transform:translateY(-1px)}
.pf-chip.on{color:#fff;background:var(--accent);border-color:var(--accent);box-shadow:0 6px 18px rgba(139,92,246,.32)}
.proj-grid.proj-page{grid-template-columns:repeat(2,1fr);gap:1.5rem}
@media(max-width:760px){.proj-grid.proj-page{grid-template-columns:1fr}}
.proj-card.proj-text{
  position:relative;color:inherit;text-decoration:none;border-radius:1.5rem;
  background:linear-gradient(165deg,#F2EEFF 0%,#FDFCFF 44%,#FFFFFF 100%);
  border:1px solid #E8E2FA;
  padding:1.75rem 1.75rem 1.5rem;
  display:flex;flex-direction:column;
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
.proj-card.proj-text:hover{transform:translateY(-5px);box-shadow:0 20px 45px rgba(76,58,150,.14);border-color:#D8CFF5}
.proj-card.proj-text .proj-cover{border-radius:.9rem;margin:0 0 1.15rem;aspect-ratio:2730/1536;overflow:hidden}
.proj-card.proj-text .proj-cover img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.proj-card.proj-text:hover .proj-cover img{transform:scale(1.04)}
html[data-theme="dark"] .proj-card.proj-text{background:linear-gradient(165deg,#171331 0%,#101024 45%,#0B0B1E 100%);border-color:#251E48}
html[data-theme="dark"] .proj-card.proj-text:hover{border-color:#3C2F74;box-shadow:0 20px 45px rgba(0,0,0,.5)}
.proj-top{display:flex;align-items:center;gap:.6rem;margin-bottom:1.1rem}
.proj-emoji{font-size:1.75rem;line-height:1}
.proj-kick{font-size:.7rem;font-weight:800;letter-spacing:.12em;color:var(--accent);text-transform:uppercase}
.proj-state{font-size:.72rem;color:var(--text-3);font-weight:500;border:1px solid var(--border);border-radius:999px;padding:.16rem .65rem}
.proj-card.proj-text h3{margin:0;font-size:1.3rem;font-weight:800;letter-spacing:-.01em;color:var(--text-1);line-height:1.4}
.proj-sub{margin:.5rem 0 0;font-size:.92rem;font-weight:600;color:var(--text-2)}
.proj-desc{margin:.7rem 0 0;font-size:.87rem;line-height:1.7;color:var(--text-2);display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.proj-foot{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:1.4rem;padding-top:1.1rem;border-top:1px solid var(--border)}
.proj-tags{display:flex;flex-wrap:wrap;gap:.4rem}
.proj-tags i{font-style:normal;font-size:.75rem;font-weight:600;color:var(--text-2);border:1px solid var(--border);padding:.2rem .6rem;border-radius:999px}
.proj-view{font-size:.85rem;font-weight:700;color:var(--accent);white-space:nowrap;transition:letter-spacing .2s}
.proj-card.proj-text:hover .proj-view{letter-spacing:.04em}

/* ---------- 栏目页单列写作列表（写作 / 记录，参照 jeffreyemanuel.com/writing） ---------- */
.writing-list.wlist{display:flex;flex-direction:column;gap:1rem}
.wlist .writing-item{
  display:block;border-radius:1rem;padding:1.5rem 1.6rem;
  border:1px solid var(--border);background:var(--card);
  box-shadow:none;transform:none;
  transition:background-color .22s ease,border-color .22s ease,box-shadow .22s ease;
}
.wlist .writing-item:hover{transform:none;background:var(--card-hover);border-color:var(--border-strong);box-shadow:var(--shadow)}
.wlist .writing-top{display:flex;align-items:baseline;justify-content:space-between;gap:1rem}
.wlist .writing-top .cate{
  font-size:.8rem;font-weight:700;color:var(--text-1);
  background:transparent;padding:0;border-radius:0;letter-spacing:.03em;
}
.wlist .writing-top .date{font-size:.8rem;font-weight:500;color:var(--text-3);white-space:nowrap}
.wlist .writing-item h3{font-size:1.35rem;font-weight:700;margin-top:.6rem;letter-spacing:-.01em;line-height:1.45;color:var(--text-1)}
.wlist .writing-item p{margin-top:.5rem;font-size:.95rem;line-height:1.75;color:var(--text-2);-webkit-line-clamp:3}
.wlist .writing-foot{margin-top:.95rem;padding-top:0;border-top:0;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.wlist .writing-foot .tags span{font-size:.72rem;font-weight:500;color:var(--text-3);border-color:var(--border);background:transparent}
.wlist .writing-item .card-link{font-size:.82rem;font-weight:600;color:var(--text-3);transition:color .2s}
.wlist .writing-item:hover .card-link{color:var(--accent)}

/* ---------- 首页产品区块：横向推荐广告条（参照参考站 FEATURED 卡片） ---------- */
.featured-band{
  position:relative;display:flex;align-items:center;justify-content:space-between;gap:2.5rem;
  margin:1.7rem 0 2.3rem;padding:2.3rem 2.7rem;border-radius:1.5rem;overflow:hidden;
  background:linear-gradient(120deg,#f5f3ff 0%,#eef2ff 46%,#fdf2f8 100%);
  border:1px solid #e5e0f8;text-decoration:none;color:inherit;
  transition:border-color .25s,box-shadow .25s,transform .25s;
}
.featured-band:hover{border-color:var(--accent);box-shadow:0 16px 44px -16px rgba(139,92,246,.3);transform:translateY(-2px)}
.fb-copy{position:relative;z-index:1;max-width:35rem}
.fb-kicker{display:inline-flex;align-items:center;gap:.5rem;font-size:.78rem;font-weight:700;letter-spacing:.08em;color:var(--accent);margin-bottom:.85rem}
.fb-kicker::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px rgba(139,92,246,.16)}
.fb-title{margin:0 0 .6rem;font-size:1.45rem;font-weight:800;letter-spacing:-.01em;line-height:1.4;color:var(--text-1)}
.fb-desc{margin:0;font-size:.92rem;line-height:1.75;color:var(--text-2)}
.fb-link{display:inline-flex;align-items:center;gap:.4rem;margin-top:1.05rem;font-size:.86rem;font-weight:700;color:var(--accent);transition:gap .2s}
.featured-band:hover .fb-link{gap:.65rem}
.fb-link svg{width:1rem;height:1rem}
.fb-deco{position:relative;width:170px;height:170px;flex-shrink:0}
.fb-dot{position:absolute;width:9px;height:9px;border-radius:50%}
.fb-dot.d1{top:2%;left:50%;transform:translateX(-50%);background:#8b5cf6}
.fb-dot.d2{top:50%;right:0;transform:translateY(-50%);background:#06b6d4}
.fb-dot.d3{bottom:2%;left:50%;transform:translateX(-50%);background:#34d399}
.fb-dot.d4{top:50%;left:0;transform:translateY(-50%);background:#f472b6}
.fb-dot.d5{top:9%;right:9%;background:#f59e0b}
.fb-dot.d6{bottom:9%;left:9%;background:#60a5fa}
.fb-core{position:absolute;inset:0;margin:auto;width:98px;height:98px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:#fff;border:1px solid #e9e4fa;box-shadow:0 12px 32px -12px rgba(139,92,246,.4);color:var(--accent)}
.fb-core svg{width:46px;height:46px}
html[data-theme="dark"] .featured-band{background:linear-gradient(120deg,#16131f 0%,#131221 46%,#181218 100%);border-color:#2b2642}
html[data-theme="dark"] .featured-band:hover{border-color:var(--accent)}
html[data-theme="dark"] .fb-title{color:#ede9fe}
html[data-theme="dark"] .fb-desc{color:#a7a3c2}
html[data-theme="dark"] .fb-core{background:#1d1a31;border-color:#332e56}
@media (max-width: 640px){.fb-deco{display:none}.featured-band{padding:1.6rem 1.5rem}}

/* ---------- 首页金刚区：数据统计 + 服务主线入口 ---------- */
.kebab-panel{background:var(--bg-soft);border:1px solid var(--border);border-radius:1.15rem;overflow:hidden;
  box-shadow:0 10px 34px -20px rgba(15,23,42,.14)}
.kebab-stats{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--border)}
.kebab-cell{display:flex;align-items:center;gap:.95rem;padding:1.05rem 1.25rem;transition:background .2s}
.kebab-cell+.kebab-cell{border-left:1px solid var(--border)}
.kebab-cell:hover{background:var(--bg-2)}
.kebab-ico{width:2.35rem;height:2.35rem;border-radius:.7rem;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,rgba(2,132,199,.12),rgba(139,92,246,.14));color:var(--accent)}
.kebab-ico svg{width:1.15rem;height:1.15rem}
.kebab-txt{min-width:0}
.kebab-num{font-size:1.32rem;font-weight:800;line-height:1.15;letter-spacing:-.01em}
.kebab-label{font-size:.73rem;color:var(--text-2);margin-top:.1rem}
.kebab-entries{display:grid;grid-template-columns:repeat(3,1fr)}
.kebab-entry{display:flex;align-items:center;gap:.85rem;padding:1rem 1.25rem;text-decoration:none;color:inherit;transition:background .2s}
.kebab-entry+.kebab-entry{border-left:1px solid var(--border)}
.kebab-entry:hover{background:var(--bg-2)}
.kebab-et{flex:1;min-width:0}
.kebab-et b{display:block;font-size:.92rem;font-weight:700;color:var(--text-heading);margin-bottom:.14rem;transition:color .2s}
.kebab-et small{display:block;font-size:.73rem;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kebab-arrow{width:1rem;height:1rem;flex-shrink:0;color:var(--text-3);transition:transform .2s,color .2s}
.kebab-entry:hover .kebab-arrow{transform:translateX(3px);color:var(--accent)}
@media (max-width: 900px){
  .kebab-stats{grid-template-columns:repeat(2,1fr)}
  .kebab-cell:nth-child(odd){border-left:0}
  .kebab-cell:nth-child(n+3){border-top:1px solid var(--border)}
  .kebab-entries{grid-template-columns:1fr}
  .kebab-entry+.kebab-entry{border-left:0;border-top:1px solid var(--border)}
}

/* ---------- AI 编程内训广告条（首页作品与写作之间，风格同法律大模型） ---------- */
.aicoding-band{background:linear-gradient(120deg,#e8f4ff 0%,#eef2ff 48%,#f5f3ff 100%);border-color:#dbe6fb}
.aicoding-band:hover{box-shadow:0 16px 44px -16px rgba(14,165,233,.32)}
html[data-theme="dark"] .aicoding-band{background:linear-gradient(120deg,#0d1b2e 0%,#131221 48%,#16131f 100%);border-color:#1d3352}
html[data-theme="dark"] .aicoding-band:hover{box-shadow:0 16px 44px -16px rgba(56,189,248,.3)}

/* ---------- MindBase 广告条（首页作品区块，风格同法律大模型） ---------- */
.mindbase-band{background:linear-gradient(120deg,#eaf3ff 0%,#e9f0ff 48%,#eefaf4 100%);border-color:#d8e6fb}
.mindbase-band .fb-kicker::before{background:#1857e6;box-shadow:0 0 0 4px rgba(24,87,230,.16)}
.mindbase-band:hover{box-shadow:0 16px 44px -16px rgba(24,87,230,.32)}
html[data-theme="dark"] .mindbase-band{background:linear-gradient(120deg,#0c1729 0%,#101a2c 48%,#0f1e1a 100%);border-color:#1e3050}
html[data-theme="dark"] .mindbase-band:hover{box-shadow:0 16px 44px -16px rgba(56,132,255,.3)}

/* ---------- 列表摘要内图片（保留图片+普通文本） ---------- */
.writing-item p img, .demo-card p img{max-height:110px;max-width:100%;width:auto;display:block;border-radius:10px;margin:0 0 10px;object-fit:cover}
html[data-theme="dark"] .writing-item p img{border:1px solid rgba(255,255,255,.08)}

/* ---------- 方案栏目页：蓝色金刚区紧贴导航（去掉通用列表页顶部留白） ---------- */
.list-main.zc-list{padding-top:0 !important}