/* ============================================================
   Bolg — 动态点阵博客 · 设计系统 v3
   设计语言：白 / 黑 双色 · 点阵网格 · 编辑排版 · 巨型字排
   ============================================================ */

:root {
  --bg: #ffffff;
  --bg-soft: #f6f6f4;
  --bg-raise: #ffffff;
  --fg: #0a0a0a;
  --fg-soft: #55554f;
  --fg-faint: #9a9a93;
  --line: rgba(10, 10, 10, 0.13);
  --line-strong: rgba(10, 10, 10, 0.82);
  --dot: #0a0a0a;
  --accent: #0a0a0a;
  --code-bg: #0c0c0c;
  --code-fg: #e8e8e2;
  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --mono: "JetBrains Mono", "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
          "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --radius: 16px;
  --radius-sm: 10px;
  --maxw: 1140px;
  --nav-h: 66px;
  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --shadow: 0 24px 48px -28px rgba(10, 10, 10, 0.35);
  --noise-opacity: 0.03;
}

/* 花体：Playfair Display Black Italic（本地字体文件，离线可用） */
@font-face {
  font-family: "Playfair Display";
  src: url("../fonts/playfair-900i.woff2") format("woff2");
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

html[data-theme="dark"] {
  --bg: #0a0a0a;
  --bg-soft: #101010;
  --bg-raise: #141414;
  --fg: #f2f2ee;
  --fg-soft: #a3a39c;
  --fg-faint: #5f5f5a;
  --line: rgba(242, 242, 238, 0.14);
  --line-strong: rgba(242, 242, 238, 0.82);
  --dot: #f2f2ee;
  --accent: #f2f2ee;
  --code-bg: #060606;
  --code-fg: #e8e8e2;
  --shadow: 0 24px 48px -28px rgba(0, 0, 0, 0.8);
  --noise-opacity: 0.025;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  color-scheme: light;
}

html[data-theme="dark"] { color-scheme: dark; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color .35s ease, color .35s ease;
  overflow-x: hidden;
}

/* ---- 印刷噪点质感（全屏叠加） ---- */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 85;
  pointer-events: none;
  opacity: var(--noise-opacity);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

::selection { background: var(--fg); color: var(--bg); }

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; }

:focus-visible {
  outline: 2px dashed var(--fg);
  outline-offset: 3px;
}

/* 自定义光标下保留键盘焦点可见性 */
@media (pointer: fine) {
  body.cursor-hidden, body.cursor-hidden a, body.cursor-hidden button {
    cursor: none;
  }
}

/* 自定义滚动条（点阵感细条） */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--fg) 20%, transparent);
  border-radius: 999px;
  border: 3px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--fg) 42%, transparent); }

.container {
  width: min(var(--maxw), 100% - 48px);
  margin-inline: auto;
}

.mono { font-family: var(--mono); }

/* 空心描边字（黑白视觉对撞） */
.outline {
  color: transparent;
  -webkit-text-stroke: 1.5px var(--fg);
}

/* Lucide 图标基类 */
.lucide {
  width: 1em;
  height: 1em;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  flex: none;
}

/* ============================================================
   加载帷幕（点阵点亮 → 上下拉开）
   ============================================================ */
.intro {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.intro-panel {
  position: absolute;
  left: 0;
  width: 100%;
  height: 50.5%;
  background: var(--bg);
  transition: transform 1s var(--ease-expo);
}

.intro-panel.top { top: 0; }
.intro-panel.bottom { bottom: 0; }

.intro.done .intro-panel.top { transform: translateY(-101%); }
.intro.done .intro-panel.bottom { transform: translateY(101%); }
.intro.done { pointer-events: none; }

.intro-core {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  opacity: 1;
  transition: opacity .45s ease;
}

.intro.done .intro-core { opacity: 0; }

.intro-grid {
  display: grid;
  grid-template-columns: repeat(14, 9px);
  grid-template-rows: repeat(14, 9px);
  gap: 4px;
}

.intro-grid i {
  border-radius: 50%;
  background: var(--fg);
  transform: scale(0);
  transition: transform .28s var(--ease-expo);
}

.intro-grid i.on { transform: scale(1); }

.intro-name {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: .4em;
  text-indent: .4em;
  color: var(--fg-soft);
  animation: intro-blink 1.2s steps(2, start) infinite;
}

@keyframes intro-blink { 50% { opacity: .25; } }

/* ============================================================
   顶部滚动进度条（虚线点阵填充）
   ============================================================ */
.progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 120;
  background: repeating-linear-gradient(90deg,
    var(--fg) 0 2px, transparent 2px 8px);
  background-size: 100% 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  pointer-events: none;
  opacity: .85;
}

/* ============================================================
   导航
   ============================================================ */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--nav-h);
  background: color-mix(in srgb, var(--bg) 80%, transparent);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
}

.nav-inner {
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-weight: 700;
  letter-spacing: .12em;
  font-size: 15px;
}

.brand-mark {
  width: 22px;
  height: 22px;
  flex: none;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(5, 1fr);
  gap: 2px;
}

.brand-mark i {
  background: var(--dot);
  border-radius: 50%;
  opacity: .18;
  animation: dot-blink 3.2s infinite;
}

.brand-mark i:nth-child(3)  { opacity: 1; animation-delay: 0s; }
.brand-mark i:nth-child(8)  { opacity: .75; animation-delay: .18s; }
.brand-mark i:nth-child(13) { opacity: 1; animation-delay: .36s; }
.brand-mark i:nth-child(18) { opacity: .7; animation-delay: .54s; }
.brand-mark i:nth-child(23) { opacity: .9; animation-delay: .72s; }
.brand-mark i:nth-child(7)  { opacity: .35; animation-delay: .1s; }
.brand-mark i:nth-child(11) { opacity: .45; animation-delay: .27s; }
.brand-mark i:nth-child(15) { opacity: .4; animation-delay: .44s; }
.brand-mark i:nth-child(19) { opacity: .5; animation-delay: .61s; }

@keyframes dot-blink {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.5); }
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links a {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  padding: 7px 15px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  color: var(--fg-soft);
  transition: color .2s, background .2s;
}

.nav-links .nav-idx {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .08em;
  color: var(--fg-faint);
  transform: translateY(-1px);
}

.nav-links a:hover { color: var(--fg); background: var(--bg-soft); }

.nav-links a.active {
  color: var(--fg);
  background: var(--bg-soft);
  font-weight: 600;
}

.nav-links a.active .nav-idx { color: var(--fg); }

.nav-links a.active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 2px;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--fg);
}

.nav-right { display: flex; align-items: center; gap: 8px; }

.theme-toggle {
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  color: var(--fg);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: border-color .2s, transform .25s;
}

.theme-toggle:hover { border-color: var(--line-strong); transform: rotate(14deg); }
.theme-toggle:active { transform: scale(.92); }
.theme-toggle.spin { animation: toggle-spin .3s var(--ease); }
.theme-toggle svg { width: 17px; height: 17px; }

@keyframes toggle-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(120deg); }
}

html[data-theme="dark"] .icon-sun { display: block; }
html[data-theme="dark"] .icon-moon { display: none; }
.icon-sun { display: none; }
.icon-moon { display: block; }

/* ============================================================
   Hero
   ============================================================ */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;   /* 移动端地址栏收展不跳动 */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;  /* 文字靠上，右下半屏留给球体 */
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}

/* 巨型背景字已移除（球体成为 Hero 唯一焦点） */

.hero canvas,
.dot-band canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.hero canvas { z-index: 1; }

/* 移动端球体降为背景装饰 */
@media (max-width: 860px) {
  .hero canvas.hero-sphere { opacity: .5; }
}

.hero-content {
  position: relative;
  z-index: 2;
  padding: calc(var(--nav-h) + 72px) 0 40px;
}

.hero-eyebrow {
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--fg-soft);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}

.hero-eyebrow em {
  font-style: normal;
  color: var(--fg-faint);
  letter-spacing: .14em;
}

.hero-eyebrow::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--fg);
  animation: pulse-dot 2s ease-in-out infinite;
}

@keyframes pulse-dot {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--fg) 35%, transparent); }
  55% { box-shadow: 0 0 0 7px transparent; }
}

.hero-blog {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 900;
  font-size: clamp(88px, 16.5vw, 268px);
  letter-spacing: 0.005em;
  line-height: 1.12;
  color: var(--fg);
  user-select: none;
  position: relative;
  z-index: 2;
  text-wrap: nowrap;
}

/* 斜体花体的字形延伸，避免被逐字拆分容器裁剪 */
.hero .split-ch {
  padding-top: 0.08em;
  margin-top: -0.08em;
  padding-bottom: 0.1em;
  margin-bottom: -0.1em;
}

/* ---- 左侧坐标刻度尺（编辑部式装饰） ---- */
.hero-ruler {
  position: absolute;
  left: 24px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  font-family: var(--mono);
  color: var(--fg-faint);
  pointer-events: none;
  user-select: none;
}

.hero-ruler .hr-coord {
  font-size: 9px;
  letter-spacing: .22em;
  writing-mode: vertical-rl;
  opacity: .75;
}

.hero-ruler .hr-dash {
  width: 1px;
  flex: 1;
  min-height: 46px;
  background: repeating-linear-gradient(180deg, var(--fg-faint) 0 1px, transparent 1px 7px);
  opacity: .5;
}

.hero-ruler .hr-ticks {
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.hero-ruler .hr-ticks i {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--fg-faint);
  opacity: .55;
}

/* ---- Hero 文案层级 ---- */
.hero-tagline {
  margin: 22px 0 0;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(19px, 2.2vw, 26px);
  line-height: 1.5;
  color: var(--fg);
  letter-spacing: .01em;
}

.hero-sub {
  margin: 14px 0 0;
  max-width: 380px;
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.8;
  letter-spacing: .04em;
  color: var(--fg-soft);
}

.hero-actions { margin-top: 30px; }

/* ---- Hero 统计条 ---- */
.hero-stats {
  margin-top: 36px;
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: .05em;
  color: var(--fg-soft);
}

.hero-stats span { display: inline-flex; align-items: baseline; gap: 7px; }

.hero-stats b {
  font-size: 17px;
  font-weight: 700;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}

.hero-stats > i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--fg);
  opacity: .35;
  flex: none;
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* 按钮（磁力） */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 22px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
  overflow: hidden;
  transition: all .22s var(--ease);
}

.btn-solid { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.btn-solid:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -14px color-mix(in srgb, var(--fg) 60%, transparent);
}

/* 实心按钮：点阵填充扫入 */
.btn-solid::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(color-mix(in srgb, var(--bg) 22%, transparent) 1px, transparent 1.4px);
  background-size: 9px 9px;
  transform: translateY(101%);
  transition: transform .45s var(--ease-expo);
  pointer-events: none;
}

.btn-solid:hover::before { transform: translateY(0); }

.btn-ghost { background: transparent; color: var(--fg); }
.btn-ghost:hover { background: var(--fg); color: var(--bg); border-color: var(--fg); }

.btn .lucide { width: 15px; height: 15px; }
.btn .arrow { font-family: var(--mono); font-size: 15px; }

/* ---- 终端卡片（首页已移除，保留 .t-cursor 供 404 使用） ---- */
.t-cursor {
  display: inline-block;
  width: .62em;
  height: 1.15em;
  background: #e8e8e2;
  vertical-align: text-bottom;
  margin-left: 3px;
  animation: blink 1.1s steps(2, start) infinite;
}

@keyframes blink { 50% { opacity: 0; } }

/* ---- 滚动提示 ---- */
.scroll-hint {
  position: absolute;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .3em;
  color: var(--fg-faint);
  transition: opacity .4s;
}

.scroll-hint.gone { opacity: 0; pointer-events: none; }

.scroll-hint .s-dots { display: flex; gap: 5px; }

.scroll-hint .s-dots i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--fg);
  animation: s-fall 1.6s ease-in-out infinite;
}

.scroll-hint .s-dots i:nth-child(2) { animation-delay: .2s; }
.scroll-hint .s-dots i:nth-child(3) { animation-delay: .4s; }

@keyframes s-fall {
  0% { transform: translateY(0); opacity: 1; }
  70% { transform: translateY(9px); opacity: 0; }
  100% { transform: translateY(0); opacity: 0; }
}

/* ============================================================
   点阵跑马灯（Hero 与文章区之间的过渡带）
   ============================================================ */
.ticker {
  position: relative;
  height: 74px;
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--bg-soft);
}

/* 底纹：稀疏点阵 */
.ticker::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(var(--dot) 1px, transparent 1.4px);
  background-size: 19px 19px;
  opacity: .045;
  pointer-events: none;
}

/* 倾斜包裹层（静态），内层跑动 */
.ticker-rot {
  position: absolute;
  left: -4%;
  top: 50%;
  width: 108%;
  transform: translateY(-50%) rotate(-1.5deg);
}

.ticker-track {
  display: flex;
  width: max-content;
  animation: tk-move 34s linear infinite;
}

.tk-grp {
  display: flex;
  align-items: center;
  flex: none;
}

.tk-grp em {
  font-family: var(--mono);
  font-style: normal;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: .34em;
  text-indent: .34em;
  color: color-mix(in srgb, var(--fg) 62%, transparent);
  padding: 0 26px;
  white-space: nowrap;
}

.tk-grp i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--fg);
  opacity: .65;
  flex: none;
}

.ticker:hover .ticker-track { animation-play-state: paused; }

@keyframes tk-move {
  to { transform: translateX(-50%); }
}

/* ============================================================
   通用区块
   ============================================================ */
.section { padding: 96px 0 104px; position: relative; }
.section.soft { background: var(--bg-soft); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 44px;
}

.head-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}

/* 区块标题右侧的 5×7 点阵字（POSTS） */
.head-dotfont { --cell: 3px; }

.head-dotfont .dchar i { border-radius: 50%; }

.head-dotfont .dchar .on {
  background: var(--fg);
  animation: led 2.8s ease-in-out infinite;
}

.head-dotfont .dchar .off { background: color-mix(in srgb, var(--fg) 13%, transparent); }

.head-dotfont .dchar .on:nth-child(8n) { animation-delay: .4s; }
.head-dotfont .dchar .on:nth-child(12n) { animation-delay: .9s; }
.head-dotfont .dchar .on:nth-child(17n) { animation-delay: 1.4s; }

.section-index {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--fg-faint);
  letter-spacing: .14em;
}

.section-title {
  margin: 8px 0 0;
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 800;
  letter-spacing: -0.02em;
  text-wrap: balance;
  display: flex;
  align-items: center;
  gap: 16px;
}

.section-title::after {
  content: "";
  height: 1px;
  flex: 1;
  max-width: 140px;
  background: repeating-linear-gradient(90deg, var(--fg-faint) 0 4px, transparent 4px 9px);
  opacity: .6;
}

/* 精简的关于区（一句话 + 入口） */
/* 首页当前不使用，保留样式备用于未来区块 */

/* ============================================================
   文章区：搜索 + 标签筛选
   ============================================================ */
#posts { scroll-margin-top: calc(var(--nav-h) + 10px); }

/* ---- 搜索框 ---- */
.search-box {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 460px;
  margin: 0 0 14px;
  padding: 0 14px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg-raise);
  transition: border-color .25s, box-shadow .25s;
}

.search-box:focus-within {
  border-color: var(--line-strong);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--fg) 7%, transparent);
}

.search-box > .lucide {
  width: 15px;
  height: 15px;
  color: var(--fg-faint);
  flex: none;
  transition: color .2s;
}

.search-box:focus-within > .lucide { color: var(--fg); }

.search-box input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--fg);
  font-family: inherit;
  font-size: 14px;
  letter-spacing: .02em;
}

.search-box input::placeholder { color: var(--fg-faint); }

/* 隐藏 webkit 自带的清除按钮（用自定义的） */
.search-box input::-webkit-search-cancel-button { display: none; }

.search-kbd {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--fg-faint);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 1px 7px;
  flex: none;
}

.search-clear {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--fg-faint);
  cursor: pointer;
  flex: none;
  transition: background .2s, color .2s;
}

.search-clear:hover { background: var(--bg-soft); color: var(--fg); }
.search-clear .lucide { width: 13px; height: 13px; }

/* ---- 关键词高亮 ---- */
mark {
  background: transparent;
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--fg);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  font-weight: 700;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: -8px 0 36px;
}

.chip {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .05em;
  padding: 6px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--fg-soft);
  cursor: pointer;
  transition: all .2s var(--ease);
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.chip:hover { border-color: var(--line-strong); color: var(--fg); transform: translateY(-1px); }
.chip.active { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.chip em {
  font-style: normal;
  font-size: 10px;
  opacity: .55;
  padding: 1px 6px;
  border: 1px solid currentColor;
  border-radius: 999px;
}

/* ============================================================
   文章列表
   ============================================================ */
.post-list { display: flex; flex-direction: column; }

/* ---- 置顶文章（大卡片） ---- */
.post-feature {
  position: relative;
  display: grid;
  grid-template-columns: 168px 1fr auto;
  align-items: center;
  gap: 28px;
  padding: 28px;
  margin-bottom: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-raise);
  overflow: hidden;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
}

.post-feature::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(var(--dot) 1px, transparent 1.3px);
  background-size: 16px 16px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s;
  mask-image: linear-gradient(90deg, transparent 40%, black);
  -webkit-mask-image: linear-gradient(90deg, transparent 40%, black);
}

.post-feature:hover {
  transform: translateY(-4px);
  border-color: var(--line-strong);
  box-shadow: var(--shadow);
}

.post-feature:hover::before { opacity: .05; }

/* 置顶卡右下角的大号编号水印 */
.pf-num {
  position: absolute;
  right: 18px;
  bottom: 2px;
  font-size: 74px;
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.2px var(--fg);
  opacity: .13;
  pointer-events: none;
  user-select: none;
  transition: opacity .35s, transform .35s var(--ease-expo);
  z-index: 0;
}

.post-feature:hover .pf-num {
  opacity: .28;
  transform: translateY(-4px);
}

/* 置顶卡：日期 + 阅读时长（mono 小字） */
.pf-meta {
  position: absolute;
  right: 76px;
  top: 22px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--fg-faint);
  white-space: nowrap;
}

.pf-meta b { font-weight: 600; color: var(--fg-soft); font-size: 12px; }

.pf-meta span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.pf-meta .lucide { width: 11px; height: 11px; }

/* 点阵缩略图：由文章 slug 哈希生成，每篇唯一 */
.post-dots {
  width: 132px;
  height: 132px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background:
    radial-gradient(circle at 20% 20%, var(--line) 0 1px, transparent 1.5px),
    radial-gradient(circle at 80% 80%, var(--line) 0 1px, transparent 1.5px),
    var(--bg-soft);
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);
  gap: 5px;
  align-content: center;
  justify-content: center;
  flex: none;
}

.post-dots i { border-radius: 50%; }
.post-dots i.on {
  background: var(--dot);
  transition: transform .3s var(--ease);
}
.post-dots i.off { background: color-mix(in srgb, var(--dot) 10%, transparent); }

.post-feature:hover .post-dots i.on {
  animation: dots-breathe 1.6s ease-in-out infinite;
}
.post-feature:hover .post-dots i.on:nth-child(3n) { animation-delay: .3s; }
.post-feature:hover .post-dots i.on:nth-child(4n) { animation-delay: .6s; }

@keyframes dots-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.35); }
}

.pf-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
  color: var(--fg-faint);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.pf-label::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--fg);
  animation: pulse-dot 2s ease-in-out infinite;
}

.post-feature h2 {
  margin: 0 0 10px;
  font-size: clamp(22px, 2.6vw, 28px);
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.25;
}

.post-feature .post-desc { margin: 0 0 16px; max-width: 560px; }

.post-feature .go {
  align-self: center;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--fg-faint);
  transition: transform .25s var(--ease), color .25s, border-color .25s, background .25s;
}

.post-feature .go .lucide { width: 18px; height: 18px; }

.post-feature:hover .go {
  transform: translate(4px, -4px) rotate(8deg);
  color: var(--bg);
  background: var(--fg);
  border-color: var(--fg);
}

/* ---- 常规列表行 ---- */
.post-card {
  position: relative;
  display: grid;
  grid-template-columns: 44px 1fr auto 26px;
  align-items: baseline;
  gap: 20px;
  padding: 26px 12px;
  border-top: 1px solid var(--line);
  transition: background .25s, padding-left .25s var(--ease);
}

.post-card:last-child { border-bottom: 1px solid var(--line); }

.post-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--fg);
  opacity: 0;
  transform: translate(-16px, -50%) scale(.4);
  transition: opacity .25s, transform .25s var(--ease);
}

.post-card:hover::before { opacity: 1; transform: translate(0, -50%) scale(1); }
.post-card:hover { padding-left: 22px; background: color-mix(in srgb, var(--bg-soft) 55%, transparent); }

.post-num {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--fg-faint);
  transform: translateY(1px);
  font-variant-numeric: tabular-nums;
}

.post-card h3 {
  margin: 0 0 6px;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.post-card h3 span { position: relative; }

.post-card h3 span::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 1px;
  width: 100%;
  height: 1.5px;
  background: var(--fg);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .28s var(--ease);
}

.post-card:hover h3 span::after { transform: scaleX(1); }

.post-desc { margin: 0; color: var(--fg-soft); font-size: 14.5px; max-width: 620px; }

.post-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

.tag {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .06em;
  padding: 3px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--fg-soft);
  transition: all .2s;
}

.tag[data-tag-link] { cursor: pointer; }

.tag:hover { background: var(--fg); color: var(--bg); border-color: var(--fg); }

.post-card .post-side {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--fg-faint);
  text-align: right;
  white-space: nowrap;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transform: translateY(2px);
}

.post-card .post-side b { font-weight: 600; color: var(--fg-soft); font-size: 12.5px; }

.post-card .post-side .side-min {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  justify-content: flex-end;
}

.post-card .post-side .side-min .lucide { width: 11px; height: 11px; }

.post-card .go {
  align-self: center;
  color: var(--fg-faint);
  transition: transform .25s var(--ease), color .25s;
}

.post-card .go .lucide { width: 17px; height: 17px; }

.post-card:hover .go { transform: translateX(6px); color: var(--fg); }

/* ============================================================
   点阵装饰带
   ============================================================ */
.dot-band {
  position: relative;
  height: 220px;
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--bg-soft);
}

.dot-band .band-caption {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--fg-soft);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 18px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.band-caption .b-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--fg);
  animation: pulse-dot 2s ease-in-out infinite;
}

/* ============================================================
   特性卡片
   ============================================================ */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 48px;
}

.feature-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }

.section.soft .feature-card { background: var(--bg-raise); }

.feature-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px 26px;
  background: var(--card-bg, var(--bg));
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
  position: relative;
  overflow: hidden;
}

.feature-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(var(--dot) 1px, transparent 1.3px);
  background-size: 14px 14px;
  opacity: .05;
  pointer-events: none;
  transition: opacity .35s;
}

.feature-card:hover {
  transform: translateY(-4px);
  border-color: var(--line-strong);
  box-shadow: var(--shadow);
}

.feature-card:hover::after { opacity: .08; }

.feature-card .f-num {
  position: absolute;
  top: 14px;
  right: 18px;
  font-family: var(--sans);
  font-size: 46px;
  font-weight: 900;
  letter-spacing: -0.03em;
  color: transparent;
  -webkit-text-stroke: 1.2px var(--fg);
  opacity: .3;
  transition: opacity .3s, color .3s;
  line-height: 1;
}

.feature-card:hover .f-num {
  opacity: .9;
  color: var(--fg);
  -webkit-text-stroke: 0;
}

.feature-card .f-rule {
  display: block;
  width: 34px;
  height: 3px;
  margin: 16px 0 14px;
  background: repeating-linear-gradient(90deg, var(--fg) 0 5px, transparent 5px 9px);
}

.feature-card h3 { margin: 0 0 8px; font-size: 17.5px; font-weight: 700; }
.feature-card p { margin: 0; font-size: 14.5px; color: var(--fg-soft); }

/* ============================================================
   文章正文页
   ============================================================ */
.post-hero {
  position: relative;
  padding: calc(var(--nav-h) + 56px) 0 44px;
  border-bottom: 1px solid var(--line);
}

/* 顶部点线：呼应点阵语言，克制地分隔导航与标题 */
.post-hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: repeating-linear-gradient(90deg, var(--fg-faint) 0 3px, transparent 3px 7px);
  opacity: .45;
  pointer-events: none;
}

/* 标题行：文章指纹点阵 + POST 编号（与首页卡片缩略图同源） */
.post-hero-top {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}

.post-hero-dots {
  display: inline-flex;
}

.post-hero .post-dots {
  width: 44px;
  height: 44px;
  padding: 6px;
  gap: 2px;
  border-radius: 8px;
}

.post-hero .post-dots i.on {
  background: var(--dot);
  animation: dots-breathe 2.8s ease-in-out infinite;
}

.post-hero .post-dots i.off {
  background: color-mix(in srgb, var(--dot) 9%, transparent);
}

.post-hero .post-dots i.on:nth-child(3n) { animation-delay: .5s; }
.post-hero .post-dots i.on:nth-child(4n) { animation-delay: 1.1s; }

.post-hero h1 {
  font-size: clamp(32px, 5.4vw, 54px);
  letter-spacing: -0.025em;
  line-height: 1.18;
  margin: 16px 0 22px;
  text-wrap: balance;
}

.post-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 0;
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--fg-soft);
}

.post-hero-meta span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 18px;
  border-left: 1px solid var(--line);
}

.post-hero-meta span:first-child { border-left: 0; padding-left: 0; }

.post-hero-meta .lucide { width: 13px; height: 13px; color: var(--fg-faint); }

.post-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: 56px;
  align-items: start;
}

/* ---- 目录 ---- */
.toc {
  position: sticky;
  top: calc(var(--nav-h) + 32px);
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 62px;
  max-height: calc(100vh - var(--nav-h) - 64px);
  overflow-y: auto;
}

.toc-title {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .22em;
  color: var(--fg-faint);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.toc-title::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--fg);
}

.toc a {
  position: relative;
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--fg-faint);
  padding: 4px 0 4px 18px;
  border-left: 1px solid var(--line);
  transition: color .2s, border-color .2s;
}

.toc a::before {
  content: "";
  position: absolute;
  left: -3.5px;
  top: 50%;
  transform: translateY(-50%) scale(0);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--fg);
  transition: transform .2s var(--ease);
}

.toc a:hover { color: var(--fg-soft); }
.toc a.sub { padding-left: 34px; font-size: 11.5px; }
.toc a.active { color: var(--fg); border-left-color: var(--fg); }
.toc a.active::before { transform: translateY(-50%) scale(1); }

/* ---- 正文排版 ---- */
.prose {
  max-width: 720px;
  padding: 56px 0 80px;
  font-size: 16.5px;
}

.prose h2 {
  font-size: 26px;
  margin: 52px 0 16px;
  padding-top: 18px;
  position: relative;
  letter-spacing: -0.015em;
  scroll-margin-top: calc(var(--nav-h) + 20px);
}

.prose h2::before {
  content: attr(data-index);
  position: absolute;
  top: -6px;
  left: 0;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--fg-faint);
}

.prose h3 { font-size: 20px; margin: 36px 0 12px; scroll-margin-top: calc(var(--nav-h) + 20px); }

.prose p { margin: 0 0 20px; color: color-mix(in srgb, var(--fg) 88%, var(--fg-soft)); }

.prose a {
  border-bottom: 1.5px solid var(--line-strong);
  padding-bottom: 1px;
  font-weight: 500;
  transition: color .18s, border-color .18s;
}

.prose a:hover { color: var(--fg-soft); border-color: var(--fg-faint); }

.prose strong { font-weight: 700; }

.prose code {
  font-family: var(--mono);
  font-size: .86em;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 2px 6px;
}

.prose pre {
  position: relative;
  background: var(--code-bg);
  color: var(--code-fg);
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 12px;
  padding: 20px 22px;
  overflow-x: auto;
  font-size: 13.5px;
  line-height: 1.65;
  margin: 26px 0;
}

.prose pre::before {
  content: attr(data-lang);
  position: absolute;
  top: 10px;
  right: 44px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(232, 232, 226, .34);
  pointer-events: none;
}

.prose pre:not([data-lang])::before { content: "```"; }

.prose pre code { background: none; border: 0; padding: 0; font-size: inherit; color: inherit; }

/* 复制按钮：触屏设备常显（hover 态只在精确指针下生效） */
.prose pre .copy-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 8px;
  background: rgba(255, 255, 255, .05);
  color: rgba(232, 232, 226, .6);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: opacity .2s, background .2s, color .2s;
}

@media (pointer: fine) {
  .prose pre .copy-btn { opacity: 0; }
  .prose pre:hover .copy-btn { opacity: 1; }
}

.prose pre .copy-btn:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.prose pre .copy-btn.ok { color: #7ce38b; border-color: rgba(124, 227, 139, .4); }
.prose pre .copy-btn .lucide { width: 13px; height: 13px; }

/* ---- 正文图片 ---- */
.md-img {
  margin: 30px 0;
}

.md-img img {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-soft);
}

.md-img figcaption {
  margin-top: 10px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--fg-faint);
  text-align: center;
}

.prose blockquote {
  margin: 30px 0;
  padding: 6px 0 6px 22px;
  border-left: 2.5px solid var(--fg);
  color: var(--fg-soft);
  font-style: italic;
}

.prose ul, .prose ol { margin: 0 0 22px; padding-left: 24px; }
.prose li { margin: 6px 0; }
.prose li::marker { color: var(--fg-faint); font-family: var(--mono); font-size: .9em; }

.prose hr {
  border: 0;
  border-top: 1px dashed var(--line);
  margin: 44px 0;
}

.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
  margin: 26px 0;
}

.prose th, .prose td {
  border: 1px solid var(--line);
  padding: 9px 14px;
  text-align: left;
}

.prose th { background: var(--bg-soft); font-family: var(--mono); font-size: 13px; }

/* ---- 上一篇 / 下一篇 ---- */
.post-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  max-width: 720px;
  margin: 0 auto 48px;
  padding: 26px 0 0;
  border-top: 1px solid var(--line);
}

.pn-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg-raise);
  overflow: hidden;
  transition: border-color .25s, transform .25s var(--ease), box-shadow .25s var(--ease);
}

.pn-card:hover {
  border-color: var(--line-strong);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.pn-card.pn-next { text-align: right; }

.pn-card .pn-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
  color: var(--fg-faint);
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.pn-card .pn-label .lucide { width: 13px; height: 13px; }

.pn-card .pn-title {
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.45;
}

.pn-card .pn-date { font-family: var(--mono); font-size: 11.5px; color: var(--fg-faint); }

.pn-card.pn-empty {
  border-style: dashed;
  color: var(--fg-faint);
  justify-content: center;
  font-family: var(--mono);
  font-size: 12.5px;
  opacity: .7;
}

/* ============================================================
   首页「关于」区块（Posts 与 Footer 之间）
   ============================================================ */
.about-band {
  border-top: 1px solid var(--line);
  background: var(--bg-soft);
  overflow: hidden;
}

.about-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 56px;
}

.about-copy { max-width: 560px; }

.about-title {
  margin: 10px 0 0;
  font-size: clamp(30px, 4.6vw, 48px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.24;
  text-wrap: balance;
}

.about-desc {
  margin: 18px 0 0;
  max-width: 480px;
  color: var(--fg-soft);
  font-size: 15px;
  line-height: 1.85;
}

.about-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

/* 旋转文字徽章 */
.about-badge {
  position: relative;
  width: 190px;
  height: 190px;
  flex: none;
  margin-right: 6vw;
}

.badge-ring {
  position: absolute;
  inset: 0;
  animation: badge-spin 16s linear infinite;
  overflow: visible;
}

.badge-ring text {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .24em;
  fill: var(--fg-soft);
  text-transform: uppercase;
}

.badge-core {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 58px;
  height: 58px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--bg);
  display: grid;
  place-items: center;
  color: var(--fg);
  transition: background .25s, color .25s, transform .3s var(--ease);
}

.badge-core .lucide { width: 19px; height: 19px; }

.about-badge:hover .badge-core {
  background: var(--fg);
  color: var(--bg);
  transform: translate(-50%, -50%) scale(1.08);
}

.about-badge:hover .badge-ring { animation-play-state: paused; }

@keyframes badge-spin {
  to { transform: rotate(360deg); }
}

/* ============================================================
   页脚（含巨型品牌字）
   ============================================================ */
.footer {
  border-top: 1px solid var(--line);
  padding: 60px 0 34px;
  background: var(--bg-soft);
  position: relative;
  overflow: hidden;
}

.footer-giant {
  position: absolute;
  left: 50%;
  bottom: -0.24em;
  transform: translateX(-50%);
  font-family: var(--sans);
  font-weight: 900;
  font-size: clamp(120px, 22vw, 360px);
  letter-spacing: -0.05em;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--fg);
  opacity: .1;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}

.footer-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 44px;
  border-bottom: 1px dashed var(--line);
}

.footer-brand p {
  margin: 14px 0 0;
  color: var(--fg-soft);
  font-size: 14px;
  max-width: 340px;
}

.footer-label {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .22em;
  color: var(--fg-faint);
  margin-bottom: 16px;
}

.footer-links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 11px;
}

.footer-links a {
  font-size: 14px;
  color: var(--fg-soft);
  transition: color .2s, transform .2s var(--ease);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.footer-links a::before {
  content: "·";
  font-family: var(--mono);
  color: var(--fg-faint);
  transition: transform .2s var(--ease);
}

.footer-links a:hover { color: var(--fg); transform: translateX(3px); }
.footer-links a:hover::before { transform: scale(1.6); }

.footer-stack {
  display: flex;
  flex-direction: column;
  gap: 11px;
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--fg-soft);
}

.footer-stack .fs-line {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.footer-stack .lucide { width: 12px; height: 12px; color: var(--fg-faint); }

.footer-bottom {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 24px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--fg-faint);
  letter-spacing: .06em;
}

.footer-bottom .footer-dots { display: inline-flex; gap: 5px; margin-right: 10px; vertical-align: 1px; }
.footer-bottom .footer-dots i { width: 4px; height: 4px; border-radius: 50%; background: var(--fg-faint); }
.footer-bottom .footer-dots i:nth-child(2) { opacity: .6; }
.footer-bottom .footer-dots i:nth-child(3) { opacity: .3; }

/* ============================================================
   回到顶部
   ============================================================ */
.back-top {
  position: fixed;
  right: 26px;
  bottom: 26px;
  z-index: 90;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--fg);
  cursor: pointer;
  display: grid;
  place-items: center;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity .3s, transform .3s var(--ease), background .2s, color .2s;
}

.back-top .lucide { width: 17px; height: 17px; }

.back-top.show { opacity: 1; transform: none; pointer-events: auto; }
.back-top:hover { background: var(--fg); color: var(--bg); }
.back-top:active { transform: scale(.9); }

/* ============================================================
   自定义光标（点 + 延迟环，mix-blend difference）
   注意：前景必须用白色 —— difference 模式下
   白底 → 黑点可见；黑底 → 白点可见；用 var(--fg) 会在白底上隐形
   ============================================================ */
.cursor-dot,
.cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 400;
  pointer-events: none;
  border-radius: 50%;
  will-change: transform;
}

.cursor-dot {
  width: 6px;
  height: 6px;
  background: #ffffff;
  mix-blend-mode: difference;
}

.cursor-ring {
  width: 36px;
  height: 36px;
  border: 1.5px solid #ffffff;
  mix-blend-mode: difference;
  opacity: .6;
  transition: width .28s var(--ease-expo), height .28s var(--ease-expo), opacity .28s;
}

.cursor-ring.is-hover {
  width: 56px;
  height: 56px;
  opacity: 1;
}

.cursor-ring.is-down {
  width: 24px;
  height: 24px;
  opacity: .9;
}

/* ============================================================
   404
   ============================================================ */
.err-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 24px;
  position: relative;
  z-index: 2;
}

.err-page .err-giant {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: clamp(200px, 46vw, 760px);
  font-weight: 900;
  letter-spacing: -0.05em;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--fg);
  opacity: .08;
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}

.err-msg {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: .18em;
  color: var(--fg-soft);
  margin: 34px 0 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
}

.err-msg .t-cursor { background: var(--fg); height: 1em; width: .55em; }

.err-page .hero-actions { justify-content: center; margin-top: 30px; }

/* ---- 点阵字体（5×7） ---- */
.dotfont {
  display: flex;
  justify-content: center;
  gap: calc(var(--cell, 12px) * 0.9);
  --cell: 16px;
}

.dotfont .dchar {
  display: grid;
  grid-template-columns: repeat(5, var(--cell));
  grid-template-rows: repeat(7, var(--cell));
  gap: calc(var(--cell) * 0.16);
}

.dotfont .dchar i { border-radius: 50%; }
.dotfont .dchar .on { background: var(--fg); }
.dotfont .dchar .off { background: color-mix(in srgb, var(--fg) 11%, transparent); }

.dotfont .dchar .on.blink { animation: led 2.1s steps(2, start) infinite; }

@keyframes led {
  0%, 100% { opacity: 1; }
  50% { opacity: .2; }
}

/* ============================================================
   入场动画（IntersectionObserver 驱动）
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  /* 统一过渡：入场动画 + 卡片 hover 的常见属性都走同一缓动曲线，
     避免 .reveal 覆盖各卡片自身的 transition 导致 box-shadow 等突变 */
  transition:
    opacity .65s var(--ease),
    transform .65s var(--ease),
    box-shadow .3s var(--ease),
    border-color .3s var(--ease),
    background .25s,
    padding-left .25s var(--ease),
    color .2s;
  will-change: opacity, transform;
}

.reveal.in { opacity: 1; transform: none; }

/* 首屏 hero 的错落延迟（intro 结束后由 JS 触发） */
.hero .reveal:nth-child(1) { transition-delay: 0s; }
.hero .reveal:nth-child(2) { transition-delay: .08s; }
.hero .reveal:nth-child(3) { transition-delay: .16s; }
.hero .reveal:nth-child(4) { transition-delay: .24s; }
.hero .reveal:nth-child(5) { transition-delay: .32s; }

/* ---- 逐字拆分显现 ---- */
.split-ch {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: 0.06em;
  margin-bottom: -0.06em;
}

.split-ch > i {
  display: inline-block;
  font-style: normal;
  transform: translateY(115%);
  transition: transform .85s var(--ease-expo);
  transition-delay: calc(var(--i, 0) * 24ms);
}

.split-sp {
  display: inline-block;
  width: .26em;
}

.in .split-ch > i,
.split-ch.in > i { transform: translateY(0); }

/* ---- 磁性按钮位移 ---- */
.btn.magnetizing {
  transition: background .22s var(--ease), color .22s var(--ease), border-color .22s var(--ease), box-shadow .22s var(--ease);
}

/* ============================================================
   响应式
   ============================================================ */
@media (max-width: 1020px) {
  .hero-ruler { display: none; }
  .post-layout { grid-template-columns: minmax(0, 1fr); }
  /* 目录改为文章上方的横向胶囊条 */
  .toc {
    position: static;
    flex-direction: row;
    order: -1;
    gap: 8px;
    padding: 14px 0;
    max-height: none;
    min-width: 0;
    overflow-x: auto;
    border-bottom: 1px solid var(--line);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .toc::-webkit-scrollbar { display: none; }
  .toc-title { flex: none; margin: 0 4px 0 0; }
  .toc a {
    flex: none;
    padding: 6px 13px;
    border: 1px solid var(--line);
    border-radius: 999px;
    white-space: nowrap;
  }
  .toc a.sub { padding-left: 13px; font-size: 12.5px; }
  .toc a::before { display: none; }
  .toc a.active { background: var(--fg); color: var(--bg); border-color: var(--fg); }
}

@media (max-width: 860px) {
  .feature-grid { grid-template-columns: 1fr; }
  .feature-grid.cols-2 { grid-template-columns: 1fr; }
  .about-inner { flex-direction: column; align-items: flex-start; gap: 36px; }
  .about-badge { margin-right: 0; align-self: center; }
  .pf-meta { display: none; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .post-feature { grid-template-columns: 96px 1fr; padding: 22px; }
  .post-dots { width: 84px; height: 84px; padding: 8px; gap: 3px; }
  .post-feature .go { display: none; }
  .post-card { grid-template-columns: 30px 1fr auto; gap: 12px; }
  .post-card .post-side { display: none; }
  .section { padding: 68px 0 76px; }
  .nav-links a { padding: 7px 10px; font-size: 13px; }
  .nav-links .nav-idx { display: none; }
  .post-nav { grid-template-columns: 1fr; }
  .pn-card.pn-next { text-align: left; }
  .dotfont { --cell: 12px; }
}

@media (max-width: 520px) {
  .container { width: min(var(--maxw), 100% - 32px); }
  .hero-blog { font-size: clamp(64px, 20vw, 110px); }
  .hero-content { padding-top: calc(var(--nav-h) + 48px); }
  .hero-stats { gap: 12px; flex-wrap: wrap; }
  .scroll-hint { display: none; }
  .search-kbd { display: none; }
  .head-dotfont { display: none; }
  .post-feature { grid-template-columns: 1fr; }
  .post-dots { width: 120px; height: 120px; }
  .dotfont { --cell: 10px; gap: calc(var(--cell) * 0.7); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
  .split-ch > i { transform: none; }
  .cursor-dot, .cursor-ring { display: none; }
}

/* ============================================================
   v5 · 个人博客页：通用页头 / 归档 / 标签 / 关于页写作流程
   ============================================================ */
.page-main { padding: 116px 0 130px; }

.page-head { margin-bottom: 60px; }

.page-title {
  margin: 16px 0 12px;
  font-size: clamp(36px, 5.5vw, 60px);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.14;
  text-wrap: balance;
}

.page-head::after {
  content: "";
  display: block;
  margin-top: 30px;
  height: 1px;
  background: repeating-linear-gradient(90deg, var(--line-strong) 0 6px, transparent 6px 14px);
  opacity: .45;
}

.page-sub {
  margin: 0;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: .1em;
  color: var(--fg-faint);
}

.page-sub b { color: var(--fg-soft); font-weight: 600; }

/* ============================================================
   归档页
   ============================================================ */
.archive {
  display: flex;
  flex-direction: column;
  gap: 76px;
}

.ay-head {
  display: flex;
  align-items: baseline;
  gap: 20px;
  margin-bottom: 26px;
}

.ay-num {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 900;
  font-size: clamp(46px, 6.5vw, 72px);
  line-height: 1;
  letter-spacing: .005em;
  color: var(--fg);
}

.ay-count {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .2em;
  color: var(--fg-faint);
}

.ay-rule {
  flex: 1;
  height: 1px;
  background: repeating-linear-gradient(90deg, var(--line-strong) 0 5px, transparent 5px 11px);
  opacity: .4;
  transform: translateY(-8px);
}

.ay-list { border-top: 1px solid var(--line); }

.archive-row {
  display: grid;
  grid-template-columns: 84px 1fr auto 72px 26px;
  align-items: center;
  gap: 20px;
  padding: 20px 12px;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: var(--fg);
  transition: background .25s, padding-left .25s var(--ease);
}

.archive-row:hover { background: var(--bg-soft); padding-left: 22px; }

.ar-date {
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: .08em;
  color: var(--fg-faint);
}

.ar-title {
  font-size: 16.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ar-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.ar-tags span {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .05em;
  color: var(--fg-faint);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px 9px;
  white-space: nowrap;
}

.ar-min {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--fg-faint);
  text-align: right;
  white-space: nowrap;
}

.archive-row .go {
  display: grid;
  place-items: center;
  color: var(--fg-soft);
  opacity: 0;
  transform: translate(-8px, 8px);
  transition: opacity .25s, transform .25s var(--ease);
}

.archive-row:hover .go { opacity: 1; transform: none; }

/* 归档行：移动端折叠为两行 */
@media (max-width: 760px) {
  .archive-row {
    grid-template-columns: 1fr auto;
    grid-template-areas: "date go" "title title" "tags min";
    gap: 6px 14px;
    padding: 18px 4px;
  }
  .archive-row:hover { padding-left: 4px; }
  .ar-date { grid-area: date; }
  .ar-title { grid-area: title; white-space: normal; }
  .ar-tags { grid-area: tags; justify-content: flex-start; }
  .ar-min { grid-area: min; text-align: left; }
  .archive-row .go { grid-area: go; opacity: 1; transform: none; }
}

/* ============================================================
   标签页
   ============================================================ */
.tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  max-width: 900px;
}

.tag-cloud .chip {
  font-size: 14px;
  padding: 11px 22px;
  text-decoration: none;
}

.tag-cloud .chip em { font-size: 11px; }

.tag-cloud .chip.single { opacity: .72; }

.tag-hint {
  margin-top: 44px;
  font-size: 12px;
  letter-spacing: .14em;
  color: var(--fg-faint);
}

/* ============================================================
   关于页：自我介绍 / 写作流程
   ============================================================ */
.about-prose p:first-child { font-size: 18.5px; color: var(--fg); }

.about-h2 {
  margin: 92px 0 28px;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.015em;
  position: relative;
  scroll-margin-top: calc(var(--nav-h) + 20px);
}

.about-h2::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -11px;
  width: 46px;
  height: 3px;
  background: var(--fg);
  opacity: .85;
}

.w-steps {
  display: grid;
  gap: 14px;
}

.w-step {
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 24px;
  align-items: start;
  padding: 28px 30px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card-bg, var(--bg));
  transition: border-color .25s, transform .25s var(--ease), box-shadow .25s var(--ease);
}

.w-step:hover {
  border-color: var(--line-strong);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.w-num {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 900;
  font-size: 36px;
  line-height: 1;
  color: var(--fg);
}

.w-body h3 {
  margin: 0 0 8px;
  font-size: 17.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.w-body p {
  margin: 0 0 16px;
  color: var(--fg-soft);
  font-size: 14.5px;
  max-width: 640px;
}

.w-cmd {
  display: inline-block;
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: .04em;
  color: var(--fg);
  background: var(--bg-soft);
  border: 1px dashed var(--line-strong);
  border-radius: 8px;
  padding: 7px 14px;
}

/* 404：补充说明行 */
.err-sub {
  margin: 0;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: .08em;
  color: var(--fg-faint);
  text-align: center;
}

@media (max-width: 640px) {
  .w-step { grid-template-columns: 1fr; gap: 14px; padding: 22px 20px; }
  .w-num { font-size: 28px; }
}

/* ============================================================
   v5.1 · 移动端硬化
   防内容撑破布局 / 触控目标 / sticky-hover 残留 / safe-area
   ============================================================ */
html { overflow-x: hidden; }

/* ---- 防溢出：grid/flex 子项与长内容统一可收缩 ---- */
.post-layout { min-width: 0; }
.prose > * { min-width: 0; max-width: 100%; }

.table-wrap {
  overflow-x: auto;
  max-width: 100%;
  margin: 26px 0;
  -webkit-overflow-scrolling: touch;
}
.table-wrap table { margin: 0; }

/* ---- 触控设备：禁用 sticky hover 残留（点击后背景/位移粘住） ---- */
@media (hover: none) {
  .post-card:hover, .post-feature:hover, .archive-row:hover,
  .feature-card:hover, .w-step:hover, .pn-card:hover,
  .btn:hover, .copy-btn:hover {
    transform: none !important;
    box-shadow: none !important;
  }
  .feature-card:hover, .w-step:hover, .pn-card:hover { border-color: var(--line); }
  .chip:hover, .tag:hover {
    background: transparent;
    color: var(--fg-soft);
    border-color: var(--line);
    transform: none;
  }
  .nav-links a:hover { color: var(--fg-soft); background: transparent; }
  .archive-row:hover { background: transparent; padding-left: 12px; }
  .archive-row:hover .go { opacity: 0; transform: translate(-8px, 8px); }
  .toc a:hover { background: transparent; color: var(--fg-soft); }
}

/* ---- 触控目标放大 ---- */
@media (max-width: 860px) {
  .chip { padding: 9px 16px; font-size: 12.5px; }
  .chip em { font-size: 10.5px; }
  .tag { padding: 5px 12px; }
  .nav-links a { padding: 9px 11px; }
}

/* ---- iPhone 刘海 / 底部横条安全区 ---- */
@supports (padding: env(safe-area-inset-top)) {
  .nav { height: calc(var(--nav-h) + env(safe-area-inset-top)); }
  .nav-inner { height: calc(var(--nav-h) + env(safe-area-inset-top)); padding-top: env(safe-area-inset-top); }
  .footer-bottom { padding-bottom: max(16px, env(safe-area-inset-bottom)); }
  .back-top { bottom: calc(24px + env(safe-area-inset-bottom)); }
}

/* ---- 小屏（≤520px）导航收紧：360px 设备也放得下 ---- */
@media (max-width: 520px) {
  .brand { gap: 7px; font-size: 13.5px; }
  .brand-mark { width: 19px; height: 19px; }
  .nav-links { gap: 0; }
  .nav-links a { padding: 8px 9px; font-size: 12.5px; }
  .post-hero h1 { font-size: clamp(28px, 7.5vw, 38px); }
  .post-hero { padding-top: calc(var(--nav-h) + 40px); }
  .hero-tagline { font-size: 18px; }
  .hero-stats b { font-size: 15.5px; }
  .section-head { align-items: flex-start; flex-direction: column; gap: 10px; }
  .head-meta { align-items: flex-start; }
}