/* Li&Blog 公开站样式：全量对齐 Li&Chat/Li&Pass 落地视觉（实例化自 Li-Design V1.5，页脚组件按 V1.5 规格）
 * 只使用 --liblog-* 令牌；动效仅 transform/opacity/background-position。
 */

* { box-sizing: border-box; }
/* 移动端无横向滚动：装饰层（hero 光晕/氛围光束）允许越界绘制但禁止产生页面横向滚动 */
html { overflow-x: clip; scroll-behavior: smooth; }
html { -webkit-text-size-adjust: 100%; }
body {
  min-height: 100vh;
  margin: 0;
  display: flex;
  flex-direction: column;
  background: var(--liblog-bg);
  color: var(--liblog-fg);
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", sans-serif;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  transition: background-color var(--liblog-motion-base) var(--liblog-ease-out),
    color var(--liblog-motion-base) var(--liblog-ease-out);
}

h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
  text-wrap: balance;
}
img { max-width: 100%; }
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

a {
  color: var(--liblog-primary);
  text-decoration: none;
  transition: color var(--liblog-motion-fast) var(--liblog-ease-out);
}
a:hover { color: var(--liblog-primary-hover); }
:focus-visible {
  outline: 2px solid var(--liblog-ring);
  outline-offset: 2px;
  border-radius: 4px;
}
main:focus { outline: none; }
::selection { background: var(--liblog-primary); color: var(--liblog-primary-fg); }
[id] { scroll-margin-top: calc(var(--header-h) + 12px); }

/* ---------- 跳转链接 ---------- */
.skip-link {
  position: absolute;
  left: 16px;
  top: -80px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: 8px;
  background: var(--liblog-primary);
  color: var(--liblog-primary-fg);
  transition: top var(--liblog-motion-fast) var(--liblog-ease-out);
}
.skip-link:focus { top: 12px; }

/* ---------- 页头（sticky + 品牌流动线） ---------- */
:root { --header-h: 64px; } /* h-16，与 Li&Panel AppHeader 一致 */

/* 页头组件类（Li&Panel AppHeader 同款）：布局/配色由 Tailwind utility 承担，
   本层仅保留组件行为与装饰；置于 @layer components，保证 utility 优先。 */
@layer components {
  /* 品牌名 ShinyText 扫光（与 Li&Panel ShinyText 同款，6s；字体参数走 utility） */
  .brand-name-text {
    display: inline-block;
    background-image: linear-gradient(
      90deg,
      var(--liblog-fg) 0%,
      var(--liblog-fg) 38%,
      var(--liblog-primary) 50%,
      var(--liblog-fg) 62%,
      var(--liblog-fg) 100%
    );
    background-size: 200% auto;
    background-position: 150% center;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: brand-shine-flow 6s var(--liblog-ease-out) infinite;
  }
  @supports not ((-webkit-background-clip: text) or (background-clip: text)) {
    .brand-name-text {
      background: none;
      -webkit-text-fill-color: currentColor;
    }
  }
  .logo-fallback {
    display: inline-grid;
    place-items: center;
    height: 32px;
    width: 32px;
    border-radius: 8px;
    background: var(--liblog-primary-soft);
    color: var(--liblog-primary);
    font-size: 0.85rem;
    font-weight: 700;
  }
  /* 顶栏流光线（Panel flow-rule 组件：渐变 + 5s 位移；位置/尺寸由 utility 控制） */
  .flow-rule {
    display: block;
    height: 3px;
    border-radius: 9999px;
    background: var(--liblog-flow-gradient);
    background-size: 250% 100%;
    animation: flow-line-shift 5s linear infinite;
    will-change: background-position;
    pointer-events: none;
  }
  .nav-search-btn {
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
  }
  .site-nav-link[aria-current="page"] {
    color: var(--liblog-primary);
    font-weight: 600;
  }

  /* 移动端外露主导航：首页/关于/搜索常驻页眉，其余入口收进二级菜单 */
  .mobile-nav-primary {
    display: none;
  }
  .mobile-nav-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    min-width: 44px;
    padding: 0 10px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--liblog-muted);
    font: inherit;
    font-size: 0.95rem;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--liblog-motion-fast) var(--liblog-ease-out),
      color var(--liblog-motion-fast) var(--liblog-ease-out);
  }
  .mobile-nav-link:hover,
  .mobile-nav-link:focus-visible {
    background: var(--liblog-surface-2);
    color: var(--liblog-fg);
  }
  .mobile-nav-link[aria-current="page"] {
    color: var(--liblog-primary);
    font-weight: 600;
  }

  /* 移动端二级菜单：收起文章/项目/历程/资源/友情链接，桌面隐藏 */
  .mobile-menu {
    display: none;
    position: relative;
    margin-left: auto;
  }
  .site-menu-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0 10px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--liblog-muted);
    font: inherit;
    cursor: pointer;
    list-style: none;
    transition: background-color var(--liblog-motion-fast) var(--liblog-ease-out),
      color var(--liblog-motion-fast) var(--liblog-ease-out);
  }
  .site-menu-trigger::-webkit-details-marker { display: none; }
  .site-menu-trigger:hover,
  .site-menu[open] > .site-menu-trigger {
    background: var(--liblog-surface-2);
    color: var(--liblog-fg);
  }
  .site-menu-icon {
    display: inline-grid;
    place-items: center;
    width: 20px;
    height: 20px;
  }
  .site-menu-icon svg { width: 100%; height: 100%; }
  .site-menu-icon-close { display: none; }
  .site-menu[open] .site-menu-icon-open { display: none; }
  .site-menu[open] .site-menu-icon-close { display: inline-grid; }
  .site-menu-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 40;
    display: flex;
    min-width: 176px;
    flex-direction: column;
    gap: 2px;
    padding: 6px;
    border: 1px solid var(--liblog-border);
    border-radius: 14px;
    background: var(--liblog-surface);
    box-shadow: var(--liblog-shadow-lg);
    transform-origin: top right;
  }
  .site-menu[open] > .site-menu-panel {
    animation: mobile-menu-in var(--liblog-motion-fast) var(--liblog-ease-out) both;
  }
  .site-menu-item {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 12px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--liblog-muted);
    font: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--liblog-motion-fast) var(--liblog-ease-out),
      color var(--liblog-motion-fast) var(--liblog-ease-out);
  }
  .site-menu-item:hover,
  .site-menu-item:focus-visible {
    background: var(--liblog-surface-2);
    color: var(--liblog-fg);
  }
  .site-menu-item[aria-current="page"] {
    color: var(--liblog-primary);
    font-weight: 600;
  }
  .site-menu-sep {
    height: 1px;
    margin: 4px 8px;
    background: var(--liblog-border);
  }
}

@keyframes brand-shine-flow {
  0% { background-position: 150% center; }
  100% { background-position: -50% center; }
}
@keyframes flow-line-shift {
  to { background-position: -250% 0; }
}
@keyframes mobile-menu-in {
  from { opacity: 0; transform: translateY(-4px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---------- 主体与页脚锁底 ---------- */
.page-shell {
  flex: 1;
  width: min(960px, calc(100% - 32px));
  margin: 0 auto;
  padding: 0 0 96px;
}
.page-shell > *:first-child { margin-top: 32px; }
.site-footer { flex-shrink: 0; } /* 布局/配色由 Tailwind utility 承担 */

/* 页脚组件类（Li&Panel SiteFooter 同款）：布局/配色由 Tailwind utility 承担 */
@layer components {
  .beian-link { display: inline-flex; align-items: center; }
  .beian-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    flex: none;
    color: var(--liblog-muted);
  }
  .beian-icon svg { display: block; width: 14px; height: 14px; }
  .beian-icon-img {
    width: 14px;
    height: 14px;
    flex: none;
    object-fit: contain;
    border-radius: 4px;
  }
  .filing-icon-placeholder {
    display: inline-flex;
    width: 14px;
    height: 14px;
    flex: none;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    background: var(--liblog-surface-2);
    color: var(--liblog-muted);
    font-size: 9px;
    font-weight: 600;
    line-height: 1;
  }
  .filing-icon-placeholder[hidden] { display: none !important; }
  .beian-link:hover .beian-icon { color: var(--liblog-primary); }
  .beian-text { white-space: nowrap; }
}

/* 页脚链接跟随 muted 文字色（不被全局链接主色覆盖；对齐 Panel SiteFooter） */
.site-footer a {
  color: var(--liblog-muted);
}
.site-footer a:hover {
  color: var(--liblog-fg);
}

/* beacon 打点图：脱离文档流，避免在 footer 内产生额外行盒（保持 V1.5 单行 56px） */
.site-footer img[src*="beacon"] {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  pointer-events: none;
}

/* ---------- 按钮（子模块全规格） ---------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 18px;
  border: 1px solid transparent;
  border-radius: 8px;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  overflow: hidden;
  transition:
    color var(--liblog-motion-fast) var(--liblog-ease-out),
    background-color var(--liblog-motion-fast) var(--liblog-ease-out),
    border-color var(--liblog-motion-fast) var(--liblog-ease-out),
    box-shadow var(--liblog-motion-fast) var(--liblog-ease-out),
    transform var(--liblog-motion-base) var(--liblog-ease-spring);
}
.btn:disabled { pointer-events: none; opacity: 0.5; }
.btn:not(:disabled):hover { transform: translateY(-1px); text-decoration: none; }
.btn:not(:disabled):active { transform: translateY(0) scale(0.97); }
.btn-primary {
  overflow: hidden;
  color: var(--liblog-brand-fg);
  background-color: var(--liblog-btn-primary-bg);
  border-color: var(--liblog-btn-primary-border);
  box-shadow: var(--liblog-shadow-sm);
}
.btn-primary:not(:disabled):hover { background-color: var(--liblog-btn-primary-bg-hover); box-shadow: var(--liblog-shadow-md); }
.btn-primary::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 40%;
  background: linear-gradient(100deg, transparent, var(--liblog-btn-sweep) 45%, var(--liblog-btn-sweep) 55%, transparent);
  transform: translateX(0) skewX(-16deg);
  opacity: 0;
  pointer-events: none;
  animation: liblog-btn-sweep 4s var(--liblog-ease-out) infinite;
}
.btn-primary:disabled::after { animation: none; opacity: 0; }
@keyframes liblog-btn-sweep {
  0% { transform: translateX(0) skewX(-16deg); opacity: 0; }
  12% { opacity: 1; }
  48% { transform: translateX(280%) skewX(-16deg); opacity: 1; }
  62%, 100% { transform: translateX(280%) skewX(-16deg); opacity: 0; }
}
.btn-light {
  overflow: hidden;
  color: var(--liblog-btn-light-fg);
  background-color: var(--liblog-btn-light-bg);
  border-color: var(--liblog-btn-light-border);
  box-shadow: var(--liblog-shadow-md);
}
.btn-light:not(:disabled):hover {
  opacity: 0.92;
  box-shadow: var(--liblog-shadow-lg);
}
.btn-light::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 40%;
  background: linear-gradient(100deg, transparent, var(--liblog-btn-light-sweep) 45%, var(--liblog-btn-light-sweep) 55%, transparent);
  transform: translateX(0) skewX(-16deg);
  opacity: 0;
  pointer-events: none;
  animation: liblog-btn-sweep 4s var(--liblog-ease-out) infinite;
}
.btn-dark {
  color: var(--liblog-btn-dark-fg);
  background-color: var(--liblog-btn-dark-bg);
  border-color: var(--liblog-btn-dark-border);
  box-shadow: var(--liblog-shadow-sm);
}
.btn-dark:not(:disabled):hover {
  background-color: var(--liblog-primary-hover);
  box-shadow: var(--liblog-shadow-md);
}
.btn-secondary { border-color: var(--liblog-border); background: var(--liblog-surface); color: var(--liblog-fg); }
.btn-secondary:not(:disabled):hover { background: var(--liblog-surface-2); }
.btn-ghost { color: var(--liblog-muted); background: transparent; }
.btn-ghost:not(:disabled):hover { background: var(--liblog-surface-2); color: var(--liblog-fg); }
.btn-danger { color: var(--liblog-destructive-fg); background: var(--liblog-destructive); box-shadow: var(--liblog-shadow-sm); }
.btn-danger:not(:disabled):hover { opacity: 0.9; }
.btn-link {
  min-height: auto;
  padding: 0;
  border: 0;
  background: none;
  color: var(--liblog-primary);
  font: inherit;
  line-height: inherit;
  cursor: pointer;
  appearance: none;
}
.btn-link:hover { text-decoration: underline; }
.btn-sm { min-height: 36px; padding: 8px 14px; }

/* ---------- 徽章（子模块全规格 + 圆点） ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  min-height: 24px;
  border-radius: 999px;
  background: var(--liblog-surface-2);
  color: var(--liblog-fg);
  border: 1px solid var(--liblog-border);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
}
.badge-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.badge-dot-default { background-color: var(--liblog-primary); }
.badge a { color: var(--liblog-fg); }
.badge a:hover { color: var(--liblog-primary); }
.badge-readme {
  --badge-readme-bg: var(--liblog-primary);
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 3px 10px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: var(--badge-readme-bg);
  color: var(--liblog-badge-readme-fg);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.4;
  box-shadow: var(--liblog-shadow-sm);
}
.badge-readme a { color: inherit; }
.badge-readme a:hover { color: inherit; opacity: 0.9; }
.badge-readme-icon {
  width: 14px;
  height: 14px;
  flex: none;
  background: currentColor;
  -webkit-mask: var(--badge-icon) center / contain no-repeat;
  mask: var(--badge-icon) center / contain no-repeat;
}
.badge-readme-img {
  width: 14px;
  height: 14px;
  flex: none;
  object-fit: contain;
  border-radius: 3px;
}
.badge-success { background: var(--liblog-success-soft-solid, var(--liblog-success-soft)); color: var(--liblog-success-soft-fg, var(--liblog-success)); border-color: var(--liblog-success); }
.badge-warning { background: var(--liblog-warning-soft-solid, var(--liblog-warning-soft)); color: var(--liblog-warning-soft-fg, var(--liblog-warning)); border-color: var(--liblog-warning); }
.badge-danger { background: var(--liblog-destructive-soft-solid, var(--liblog-destructive-soft)); color: var(--liblog-destructive-soft-fg, var(--liblog-destructive)); border-color: var(--liblog-destructive); }
.badge-muted { background: var(--liblog-surface-2); color: var(--liblog-muted); }
.badge-primary { background: var(--liblog-primary-soft-solid, var(--liblog-primary-soft)); color: var(--liblog-primary-soft-fg, var(--liblog-primary)); border-color: var(--liblog-primary); }
.badge-pinned { background: var(--liblog-warning-soft-solid, var(--liblog-warning-soft)); color: var(--liblog-warning-soft-fg, var(--liblog-warning)); border-color: var(--liblog-warning); font-weight: 700; }
.badge-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

/* ---------- 卡片 ---------- */
.card {
  border: 1px solid var(--liblog-border);
  border-radius: 16px;
  background: var(--liblog-surface);
  box-shadow: var(--liblog-shadow-sm);
  transition: transform var(--liblog-motion-base) var(--liblog-ease-out),
    box-shadow var(--liblog-motion-base) var(--liblog-ease-out);
}
.card-interactive:hover { transform: translateY(-1px); box-shadow: var(--liblog-shadow-md); }
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; margin-top: 24px; }
.card-grid, .post-list, .journey-panel { contain: layout style; }
.project-card, .post-card { padding: 24px 28px; }
.post-card { min-width: 0; }
.post-cover-link {
  display: block;
  margin: -24px -28px 16px;
  border-radius: 20px 20px 0 0;
  overflow: hidden;
  transition: opacity var(--liblog-motion-fast) var(--liblog-ease-out);
}
.post-cover-link:hover {
  opacity: 0.92;
}
.post-cover {
  display: block;
  width: 100%;
  aspect-ratio: var(--cover-ratio, 16 / 9);
  height: auto;
  object-fit: cover;
  background: transparent;
}
.project-card { display: flex; flex-direction: column; }
.project-card h3, .project-card h2, .post-card h3, .post-card h2 { margin: 0 0 6px; font-size: 1.05rem; }
.post-card h3, .post-card h2, .post-card .meta, .post-summary { overflow-wrap: break-word; }
.post-card h3 a, .post-card h2 a { overflow-wrap: anywhere; }
.project-summary, .post-summary { margin: 8px 0; }
.post-summary {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.project-summary { flex: 1; }
.project-card .badge-row { margin-top: 12px; }
.project-card .meta {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--liblog-border);
}
.post-card + .post-card { margin-top: 12px; }

/* ---------- 表单 ---------- */
.label { display: block; margin-bottom: 6px; font-size: 0.875rem; font-weight: 500; }
input[type="text"],
input[type="password"],
input[type="search"],
select,
textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--liblog-border);
  border-radius: 8px;
  background: var(--liblog-surface);
  color: var(--liblog-fg);
  font: inherit;
  font-size: 0.9rem;
  box-shadow: var(--liblog-shadow-sm);
}
::placeholder { color: var(--liblog-muted); }
input:focus, select:focus, textarea:focus {
  border-color: var(--liblog-primary);
  outline: none;
  box-shadow: 0 0 0 3px var(--liblog-primary-soft);
}

/* ---------- 元信息 / 标签 / 时间线 ---------- */
.meta { color: var(--liblog-muted); font-size: 0.875rem; }
.meta-sep { margin: 0 6px; color: var(--liblog-border); }
.tag { margin-left: 8px; color: var(--liblog-secondary); font-size: 0.8rem; }
.tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 20px;
}
.tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 6px 14px;
  border: 1px solid var(--liblog-border);
  border-radius: 999px;
  background: var(--liblog-surface);
  color: var(--liblog-fg);
  font-size: 0.9rem;
  box-shadow: var(--liblog-shadow-sm);
}
.tag-chip:hover {
  border-color: var(--liblog-primary);
  color: var(--liblog-primary);
  text-decoration: none;
}
.tag-chip-count {
  color: var(--liblog-muted);
  font-size: 0.75rem;
  font-weight: 600;
}
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-bottom: 12px;
  color: var(--liblog-muted);
  font-size: 0.8rem;
}
.breadcrumb a { color: var(--liblog-muted); }
.breadcrumb a:hover { color: var(--liblog-primary); }
.breadcrumb [aria-current="page"] { color: var(--liblog-fg); font-weight: 600; }
.article-cover { margin: 0 0 16px; }
.article-cover img {
  display: block;
  width: 100%;
  max-height: 420px;
  object-fit: cover;
  border-radius: 16px;
  background: transparent;
}
.timeline { position: relative; margin-top: 16px; padding-left: 20px; border-left: 2px solid var(--liblog-border); }
.timeline-node { position: relative; padding: 0 0 20px 16px; }
.timeline-node::before {
  content: ""; position: absolute; left: -25px; top: 6px;
  width: 10px; height: 10px; border-radius: 50%; background: var(--liblog-primary);
}
.timeline-date { display: inline-block; color: var(--liblog-primary); font-weight: 600; font-size: 0.875rem; margin-bottom: 4px; }
.timeline-body h3, .timeline-body h2 { margin: 0 0 4px; font-size: 1rem; }
.timeline-preview .timeline-node { padding-bottom: 12px; }
.more-link { font-weight: 600; }

/* 首页历程速览：卡片式行列表（避免竖线时间线的突兀感） */
.journey-panel { max-width: 720px; margin: 16px auto 0; padding: 8px 24px; overflow: hidden; }
.journey-row {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 16px 0;
  border-bottom: 1px solid var(--liblog-border);
}
.journey-row:last-child { border-bottom: none; }
.journey-date {
  flex: none;
  min-width: 74px;
  padding-top: 2px;
  color: var(--liblog-primary);
  font-weight: 600;
  font-size: 0.9rem;
}
.journey-body { flex: 1; min-width: 0; }
.journey-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.journey-head h3 { margin: 0; font-size: 1rem; }
.journey-body p { margin: 6px 0 0; color: var(--liblog-muted); font-size: 0.9rem; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  overflow-x: clip; /* 裁切光晕伪元素越界绘制，移动端无横向滚动 */
  min-height: calc(100vh - var(--header-h));
  min-height: calc(100svh - var(--header-h));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 0;
  text-align: center;
  margin-top: 0 !important;
}
.hero > div {
  width: 100%;
  margin-top: calc(var(--header-h) * -1);
}
.hero-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  will-change: transform, opacity, filter;
}
.hero-inner::before {
  content: "";
  position: absolute;
  inset: -48px -72px;
  z-index: -1;
  border-radius: 40px;
  background: radial-gradient(
    ellipse 52% 62% at 50% 50%,
    var(--liblog-primary-soft),
    transparent 74%
  );
  opacity: 0.6;
  pointer-events: none;
}
.hero .badge-row { justify-content: center; }
.hero-kicker { color: var(--liblog-muted); margin: 0 0 10px; font-size: 0.95rem; }
.hero-title { margin: 0 0 10px; font-size: 2.5rem; line-height: 1.2; }
.hero-tagline { font-size: 1.25rem; color: var(--liblog-primary); font-weight: 600; margin: 0 0 14px; }
.hero-meta, .hero-goal { color: var(--liblog-muted); margin: 5px 0; font-size: 0.95rem; }
.hero-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 16px 0 4px;
}
.hero-actions .btn {
  min-height: 32px;
  padding: 4px 12px;
  font-size: 0.8rem;
}
.hero-inner > * { animation: liblog-fade-up 0.6s var(--liblog-ease-out) both; }
.hero-inner > *:nth-child(2) { animation-delay: 0.06s; }
.hero-inner > *:nth-child(3) { animation-delay: 0.12s; }
.hero-inner > *:nth-child(4) { animation-delay: 0.18s; }
.hero-inner > *:nth-child(5) { animation-delay: 0.24s; }
.hero-inner > *:nth-child(6) { animation-delay: 0.3s; }
.hero-inner > *:nth-child(7) { animation-delay: 0.36s; }
@keyframes liblog-fade-up {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

.page-shell, .site-footer { position: relative; z-index: 1; }

/* ---------- 全局氛围层（除扫掠光束外的子模块全量视觉） ---------- */
.ambient {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.ambient-none { display: none; }
.tech-ambience {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.tech-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, var(--liblog-tech-grid-accent) 1px, transparent 1px),
    linear-gradient(to bottom, var(--liblog-tech-grid-accent-2) 1px, transparent 1px),
    linear-gradient(to right, var(--liblog-tech-grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--liblog-tech-grid-line) 1px, transparent 1px);
  background-size: 336px 336px, 336px 336px, 56px 56px, 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 88% 76% at 50% 42%, #000 22%, transparent 80%);
  mask-image: radial-gradient(ellipse 88% 76% at 50% 42%, #000 22%, transparent 80%);
  animation: tech-grid-pan 12s linear infinite;
  will-change: background-position;
  pointer-events: none;
}
@keyframes tech-grid-pan {
  from { background-position: 0 0, 0 0, 0 0, 0 0; }
  to { background-position: 336px 336px, 336px 336px, 336px 336px, 336px 336px; }
}
.tech-beam {
  position: absolute;
  top: -15%;
  bottom: -15%;
  left: 0;
  width: 36%;
  background: linear-gradient(90deg, transparent 0%, var(--liblog-tech-beam) 45%, var(--liblog-tech-beam) 55%, transparent 100%);
  transform: translateX(-150%) skewX(-16deg);
  opacity: 0;
  animation: tech-beam-sweep 10s var(--liblog-ease-out) 0.8s infinite;
  will-change: transform, opacity;
  pointer-events: none;
}
.tech-beam--violet {
  background: linear-gradient(90deg, transparent 0%, var(--liblog-tech-beam-2) 45%, var(--liblog-tech-beam-2) 55%, transparent 100%);
  animation-delay: 4.2s;
}
.tech-beam--sage {
  background: linear-gradient(90deg, transparent 0%, var(--liblog-tech-beam-3) 45%, var(--liblog-tech-beam-3) 55%, transparent 100%);
  animation-delay: 7.5s;
}
@keyframes tech-beam-sweep {
  0% { transform: translateX(-150%) skewX(-16deg); opacity: 0; }
  8% { opacity: 1; }
  42% { transform: translateX(560%) skewX(-16deg); opacity: 0.7; }
  50%, 100% { transform: translateX(560%) skewX(-16deg); opacity: 0; }
}
.aurora {
  position: absolute;
  border-radius: 50%;
  opacity: 0.26;
  animation: liblog-aurora 28s ease-in-out infinite alternate;
  will-change: transform;
}
.aurora-1 { width: 520px; height: 520px; left: -120px; top: -80px; background: radial-gradient(circle, var(--liblog-aurora-1), transparent 65%); }
.aurora-2 { width: 460px; height: 460px; right: -100px; top: 18%; background: radial-gradient(circle, var(--liblog-aurora-2), transparent 65%); animation-delay: -6s; }
.aurora-3 { width: 380px; height: 380px; left: 16%; bottom: -140px; background: radial-gradient(circle, var(--liblog-aurora-3), transparent 65%); animation-delay: -12s; }
.aurora-4 { width: 320px; height: 320px; right: 20%; bottom: 6%; background: radial-gradient(circle, var(--liblog-aurora-4), transparent 65%); animation-delay: -16s; }
@keyframes liblog-aurora {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(40px, -30px, 0) scale(1.15); }
}
.ambient-soft .aurora { opacity: 0.2; }
.ambient-soft .aurora-3, .ambient-soft .aurora-4 { display: none; }
.tech-dot {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 9999px;
  background: var(--tech-dot-color, var(--liblog-secondary));
  box-shadow: 0 0 14px 3px var(--liblog-tech-dot-glow);
  opacity: 0.55;
  animation: tech-dot-pulse 6s ease-in-out infinite;
  will-change: transform, opacity;
  pointer-events: none;
}
@keyframes tech-dot-pulse {
  0%, 100% { opacity: 0.45; transform: translateY(0) scale(1); }
  50% { opacity: 1; transform: translateY(-7px) scale(1.45); }
}
.tech-ambience--soft .tech-grid { opacity: 0.45; }
.tech-ambience--soft .tech-beam,
.tech-ambience--soft .tech-dot { opacity: 0.35; }
.ambient-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

/* ---------- Hero 顶部辉光（静态、极淡） ---------- */
.hero::before {
  content: "";
  position: absolute;
  inset: -20% 0 0 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 72% 58% at 50% 36%, var(--liblog-primary-soft), transparent 72%);
  opacity: 0.75;
}

/* ---------- 统一卡片规格（液态玻璃 / 留白充足 / 悬浮微交互） ---------- */
.project-card, .post-card, .journey-panel {
  position: relative;
  border: 1px solid var(--liblog-glass-border-soft);
  border-radius: 20px;
  background:
    var(--liblog-glass-shine),
    var(--liblog-glass-bg);
  -webkit-backdrop-filter: blur(var(--liblog-glass-blur)) saturate(var(--liblog-glass-saturate));
  backdrop-filter: blur(var(--liblog-glass-blur)) saturate(var(--liblog-glass-saturate));
  box-shadow: var(--liblog-shadow-sm),
    inset 0 1px 0 var(--liblog-glass-highlight);
  transition: transform var(--liblog-motion-base) var(--liblog-ease-out),
    box-shadow var(--liblog-motion-base) var(--liblog-ease-out),
    border-color var(--liblog-motion-fast) var(--liblog-ease-out);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .project-card, .post-card, .journey-panel {
    background:
      var(--liblog-glass-shine),
      var(--liblog-glass-bg-strong);
  }
}
.project-card:hover, .post-card:hover, .journey-panel:hover {
  transform: translateY(-3px);
  box-shadow: var(--liblog-shadow-md),
    inset 0 1px 0 var(--liblog-glass-highlight);
}

/* ---------- 卡片聚焦（Spotlight Focus） ----------
 * 悬停/键盘聚焦时当前卡片提亮抬升，兄弟卡片淡出下沉；
 * 只使用 --liblog-* 令牌，动效仅 transform/opacity/background-position。 */
.post-card,
.project-card {
  position: relative;
}

/* ---------- 整卡可点击（Stretched Link） ----------
 * 标题链接拉伸覆盖整张卡片，点击卡片任意位置即可进入详情；
 * 卡内其他交互元素（封面链接/标签/仓库按钮）提升层级，保持原有点击行为。 */
.post-card > h2 a::after,
.post-card > h3 a::after,
.project-card > h2 a::after,
.project-card > h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
}
.post-card .post-cover-link,
.post-card .tag,
.project-card .project-repo a {
  position: relative;
  z-index: 1;
}
.post-card h2 a,
.post-card h3 a,
.project-card h2 a,
.project-card h3 a {
  transition: color var(--liblog-motion-fast) var(--liblog-ease-out);
}
.post-card::before,
.project-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 18px;
  right: 18px;
  height: 2px;
  border-radius: 0 0 2px 2px;
  background: var(--liblog-primary);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--liblog-motion-slow) var(--liblog-ease-out);
  pointer-events: none;
}
.post-card:hover::before,
.post-card:focus-within::before,
.project-card:hover::before,
.project-card:focus-within::before {
  transform: scaleX(1);
}
.card-grid > .post-card:hover,
.card-grid > .post-card:focus-within,
.card-grid > .project-card:hover,
.card-grid > .project-card:focus-within,
.post-list > .post-card:hover,
.post-list > .post-card:focus-within,
.masonry > .post-card:hover,
.masonry > .post-card:focus-within,
.masonry > .project-card:hover,
.masonry > .project-card:focus-within {
  transform: translateY(-5px) scale(1.006);
  box-shadow: var(--liblog-shadow-lg),
    inset 0 1px 0 var(--liblog-glass-highlight);
  border-color: var(--liblog-primary);
  transition: transform var(--liblog-motion-base) var(--liblog-ease-spring),
    box-shadow var(--liblog-motion-base) var(--liblog-ease-out),
    border-color var(--liblog-motion-fast) var(--liblog-ease-out);
}
.post-card:hover h2 a,
.post-card:hover h3 a,
.post-card:focus-within h2 a,
.post-card:focus-within h3 a,
.project-card:hover h2 a,
.project-card:hover h3 a,
.project-card:focus-within h2 a,
.project-card:focus-within h3 a {
  color: var(--liblog-primary-hover);
}
.post-cover {
  transition: transform var(--liblog-motion-slow) var(--liblog-ease-out);
}
.post-card:hover .post-cover,
.post-card:focus-within .post-cover {
  transform: scale(1.03);
}
@media (hover: hover) and (pointer: fine) {
  .card-grid:has(> .post-card:hover, > .post-card:focus-within, > .project-card:hover, > .project-card:focus-within) > :not(:hover, :focus-within),
  .post-list:has(> .post-card:hover, > .post-card:focus-within) > .post-card:not(:hover, :focus-within),
  .masonry:has(> .post-card:hover, > .post-card:focus-within, > .project-card:hover, > .project-card:focus-within) > :not(:hover, :focus-within) {
    opacity: 0.55;
    transform: scale(0.985);
  }
}

/* ---------- 瀑布流与卡片视觉块 ---------- */
.masonry {
  column-width: 288px;
  column-count: 3;
  column-gap: 24px;
  margin-top: 28px;
}
.masonry > * {
  break-inside: avoid;
  margin: 0 0 24px !important;
}
/* ---------- 文章 / 代码 / 提示块 / 目录 ---------- */
.section { margin-top: 72px; }
/* 离屏区块跳过渲染与布局（浏览器支持的场景自动生效） */
.section {
  content-visibility: auto;
  contain-intrinsic-size: auto 480px;
}
.section-title { font-size: 1.25rem; text-align: center; margin-bottom: 20px; }
.section-title::after {
  content: "";
  display: block;
  width: 48px;
  height: 3px;
  margin: 10px auto 0;
  border-radius: 2px;
  background: var(--liblog-primary);
}
.section > p { text-align: center; }
.section > .badge-row { justify-content: center; }
.post-list { max-width: 720px; margin: 0 auto; }
.page-title { text-align: center; }
.timeline { max-width: 720px; margin-left: auto; margin-right: auto; }
.article .page-title {
  margin-top: 8px;
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  line-height: 1.25;
}
.article-body { margin-top: 16px; }
.article-body h2 { margin-top: 32px; }
.article-body pre, .article-body .highlight {
  position: relative;
  background: var(--liblog-surface-2);
  border: 1px solid var(--liblog-border);
  border-radius: 8px;
  overflow-x: auto;
  font-size: 0.875rem;
}
/* 顶部留出复制按钮空间（仅最外层加一次，避免与内层 pre 叠加） */
.article-body pre {
  padding: 2.5rem 16px 12px;
}
.article-body .highlight {
  padding: 0;
}
.article-body .highlight pre {
  border: 0;
  border-radius: 0;
}
.article-body code { background: var(--liblog-surface-2); border-radius: 4px; padding: 2px 5px; font-size: 0.875em; }
/* 代码块一键复制按钮 */
.code-copy {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--liblog-muted);
  background: var(--liblog-surface);
  border: 1px solid var(--liblog-border);
  border-radius: 6px;
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--liblog-motion-base) var(--liblog-ease-out),
    color var(--liblog-motion-base) var(--liblog-ease-out),
    border-color var(--liblog-motion-base) var(--liblog-ease-out);
}
.article-body pre:hover .code-copy,
.code-copy:focus-visible {
  opacity: 1;
}
.code-copy:hover {
  color: var(--liblog-fg);
}
.code-copy[data-copied="true"] {
  color: var(--liblog-success);
  border-color: var(--liblog-success);
}
@media (hover: none) {
  .code-copy {
    opacity: 1;
  }
}
.article-body pre code, .article-body .highlight code { background: none; padding: 0; }
/* Chroma 自适应高亮（类名由 Hugo noClasses=false 输出） */
.chroma .c, .chroma .c1, .chroma .cm, .chroma .cs {
  color: var(--liblog-code-comment);
  font-style: italic;
}
.chroma .k, .chroma .kc, .chroma .kd, .chroma .kn, .chroma .kr, .chroma .kt {
  color: var(--liblog-code-keyword);
}
.chroma .s, .chroma .s1, .chroma .s2, .chroma .sb, .chroma .sc,
.chroma .sd, .chroma .se, .chroma .sh, .chroma .si, .chroma .sx {
  color: var(--liblog-code-string);
}
.chroma .m, .chroma .mf, .chroma .mh, .chroma .mi, .chroma .mo {
  color: var(--liblog-code-number);
}
.chroma .nf, .chroma .nx, .chroma .nb { color: var(--liblog-code-func); }
.chroma .na, .chroma .nc { color: var(--liblog-code-type); }
.chroma .ln {
  color: var(--liblog-code-lineno);
  user-select: none;
}
.article-body table { border-collapse: collapse; width: 100%; margin: 16px 0; contain: layout style; }
.article-body th, .article-body td { border: 1px solid var(--liblog-border); padding: 8px 12px; text-align: left; }
.article-body th { background: var(--liblog-surface-2); }
.article-body blockquote { margin: 16px 0; padding: 4px 16px; border-left: 3px solid var(--liblog-secondary); color: var(--liblog-muted); }
/* 文章正文 + 左侧固定目录（识别 Markdown h2/h3 标题）
 * 目录悬浮在内容区外侧的视口留白处，不占用正文空间；
 * 右缘与内容壳保持 24px 间距，绝不遮挡正文组件；
 * 屏幕不足够宽时（≤1504px，留白放不下 232px 目录）自动折回正文上方。 */
.article-layout {
  margin-top: 16px;
}
.article-layout > .article-body {
  margin-top: 0;
}
.toc {
  position: fixed;
  /* 内容壳宽 min(960px, 100% - 32px)：左缘 50vw - 480px；
     目录宽 232px + 右缘 24px 间距 → left = 50vw - 480 - 232 - 24 = 50vw - 736px */
  left: max(16px, calc(50vw - 736px));
  top: calc(var(--header-h) + 20px);
  z-index: 10;
  width: 232px;
  max-height: calc(100vh - var(--header-h) - 40px);
  overflow-y: auto;
  font-size: 0.85rem;
  border-left: 2px solid var(--liblog-border);
  padding-left: 14px;
  scrollbar-width: thin;
}
.toc-title {
  margin: 0 0 8px;
  font-weight: 600;
  color: var(--liblog-fg);
}
.toc ul { list-style: none; margin: 0; padding: 0; }
.toc ul ul { padding-left: 12px; }
.toc li { margin: 4px 0; line-height: 1.45; }
.toc a {
  display: block;
  padding: 2px 0;
  border-radius: 4px;
  color: var(--liblog-muted);
}
.toc a:hover { color: var(--liblog-primary-hover); }
.admonition, .notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--liblog-border);
  border-radius: 8px;
  font-size: 0.875rem;
  line-height: 1.5;
  margin: 16px 0;
}
.admonition-note { border-color: var(--liblog-secondary); background: var(--liblog-secondary-soft); }
.admonition-warning { border-color: var(--liblog-warning); background: var(--liblog-warning-soft); }
.admonition-danger { border-color: var(--liblog-destructive); background: var(--liblog-destructive-soft); }

/* ---------- 搜索 ---------- */
.search-label { display: block; margin-top: 12px; font-weight: 600; }
.search-input { width: 100%; max-width: 480px; margin-top: 8px; }
.search-results { list-style: none; padding: 0; margin-top: 16px; }
.search-results li { padding: 10px 0; border-bottom: 1px solid var(--liblog-border); }
.search-info { color: var(--liblog-muted); font-size: 0.85rem; margin-top: 12px; }
.search-snippet { margin: 4px 0 0; color: var(--liblog-muted); font-size: 0.85rem; }
.search-empty { color: var(--liblog-muted); }
.search-modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 12vh 16px 16px;
}
.search-modal[hidden] { display: none; }
.search-modal-backdrop {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--liblog-fg) 35%, transparent);
  animation: search-fade 0.15s var(--liblog-ease-out);
}
.search-modal-panel {
  position: relative;
  width: min(680px, 100%);
  background:
    var(--liblog-glass-shine),
    var(--liblog-glass-bg-strong);
  -webkit-backdrop-filter: blur(var(--liblog-glass-blur)) saturate(var(--liblog-glass-saturate));
  backdrop-filter: blur(var(--liblog-glass-blur)) saturate(var(--liblog-glass-saturate));
  border: 1px solid var(--liblog-glass-border);
  border-radius: 22px;
  box-shadow: var(--liblog-shadow-lg),
    inset 0 1px 0 var(--liblog-glass-highlight);
  overflow: hidden;
  animation: search-pop 0.18s var(--liblog-ease-out);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .search-modal-panel { background: var(--liblog-surface); }
}
.search-modal-head {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid var(--liblog-border);
  background: var(--liblog-surface-2);
}
.search-modal-icon { width: 20px; height: 20px; flex: none; color: var(--liblog-muted); }
.search-modal-input {
  flex: 1;
  min-height: 44px;
  padding: 10px 12px;
  border: 0;
  border-radius: 10px;
  background: var(--liblog-surface);
  font: inherit;
  font-size: 0.95rem;
  box-shadow: var(--liblog-shadow-sm);
  transition: box-shadow var(--liblog-motion-fast) var(--liblog-ease-out);
}
.search-modal-input:focus {
  outline: 2px solid var(--liblog-ring);
  outline-offset: 1px;
  box-shadow: var(--liblog-shadow-md),
    0 0 0 3px color-mix(in srgb, var(--liblog-primary) 18%, transparent);
}
.search-modal-close {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 10px;
  background: var(--liblog-surface);
  color: var(--liblog-muted);
  cursor: pointer;
}
.search-modal-close svg { width: 18px; height: 18px; }
.search-modal-close:hover { color: var(--liblog-fg); background: var(--liblog-surface-2); }
.search-modal-body { padding: 8px 12px 12px; }
.search-modal .search-info { padding: 10px 6px 4px; font-size: 0.8rem; }
.search-modal .search-results {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 44vh;
  overflow: auto;
}
.search-item + .search-item { border-top: 1px solid var(--liblog-border); }
.search-item a {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px 10px;
  border-radius: 10px;
  color: var(--liblog-fg);
}
.search-item.is-active a,
.search-item a:hover { background: var(--liblog-primary-soft); text-decoration: none; }
.search-item a:focus-visible {
  background: var(--liblog-primary-soft);
  outline: 2px solid var(--liblog-ring);
  outline-offset: -2px;
}
.search-item-title { font-weight: 600; }
.search-item-snippet {
  color: var(--liblog-muted);
  font-size: 0.82rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.search-item-meta {
  color: var(--liblog-muted);
  font-size: 0.75rem;
}
.search-skeleton {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 4px;
}
.search-skeleton[hidden] { display: none; }
.search-skeleton-item {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 14px 10px;
  border-radius: 12px;
}
.search-skeleton-item + .search-skeleton-item { border-top: 1px solid var(--liblog-border); }
.search-skeleton-bar {
  height: 12px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    var(--liblog-surface-2) 20%,
    var(--liblog-glass-highlight) 48%,
    var(--liblog-surface-2) 76%
  );
  background-size: 220% 100%;
  animation: skeleton-shimmer 1.35s var(--liblog-ease-out) infinite;
}
.search-skeleton-bar:first-child { width: 58%; }
.search-skeleton-bar:nth-child(2) { width: 88%; }
.search-skeleton-bar:last-child { width: 34%; }
@keyframes skeleton-shimmer {
  from { background-position: 120% 0; }
  to { background-position: -20% 0; }
}

.search-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 36px 16px;
  color: var(--liblog-muted);
  text-align: center;
}
.search-empty-state[hidden] { display: none; }
.search-empty-state svg { width: 36px; height: 36px; color: var(--liblog-primary); opacity: 0.6; }
.search-empty-state a { font-weight: 600; }
.search-modal-hints {
  display: flex;
  gap: 16px;
  padding: 10px 16px;
  border-top: 1px solid var(--liblog-border);
  background: var(--liblog-surface-2);
  color: var(--liblog-muted);
  font-size: 0.75rem;
}
.search-modal-hints span { display: inline-flex; align-items: center; gap: 4px; }
.search-modal-hints kbd {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border: 1px solid var(--liblog-border);
  border-bottom-width: 2px;
  border-radius: 5px;
  background: var(--liblog-surface);
  font-family: inherit;
  font-size: 0.7rem;
}
@keyframes search-pop {
  from { opacity: 0; transform: translateY(-10px) scale(0.98); }
  to { opacity: 1; transform: none; }
}
@keyframes search-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
body.search-modal-open { overflow: hidden; }
@media (max-width: 640px) {
  .search-modal-hints { display: none; }
  .search-modal { padding-top: 8vh; }
  .search-modal-close { width: 44px; height: 44px; }
}

/* ---------- 文章导航与 404 ---------- */
.post-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--liblog-border);
}
.post-nav-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  border: 1px solid var(--liblog-border);
  border-radius: 12px;
  background: var(--liblog-surface);
  color: var(--liblog-fg);
  font-weight: 600;
}
.post-nav-item span { color: var(--liblog-muted); font-size: 0.75rem; font-weight: 500; }
.post-nav-item:hover { border-color: var(--liblog-primary); text-decoration: none; }
.post-nav-next { text-align: right; }
.not-found { max-width: 640px; margin: 80px auto; text-align: center; }
.not-found-body { color: var(--liblog-muted); }

/* ---------- 阅读进度 / 相关文章 / 排版细节 ---------- */
.reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 50;
  height: 3px;
  width: 0;
  background: var(--liblog-primary);
}
.article-body {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
.article-body p { margin: 0 0 1em; }
.article-body a { overflow-wrap: anywhere; }
.related-posts { margin-top: 40px; }
.back-top { margin-top: 32px; text-align: center; }
.back-to-top {
  position: fixed;
  right: 20px;
  bottom: 24px;
  z-index: 55;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--liblog-glass-border-soft);
  border-radius: 14px;
  background:
    var(--liblog-glass-shine),
    var(--liblog-glass-bg-strong);
  -webkit-backdrop-filter: blur(var(--liblog-glass-blur)) saturate(var(--liblog-glass-saturate));
  backdrop-filter: blur(var(--liblog-glass-blur)) saturate(var(--liblog-glass-saturate));
  color: var(--liblog-muted);
  box-shadow: var(--liblog-shadow-md),
    inset 0 1px 0 var(--liblog-glass-highlight);
  text-decoration: none;
  transition: color var(--liblog-motion-fast) var(--liblog-ease-out),
    background-color var(--liblog-motion-fast) var(--liblog-ease-out),
    box-shadow var(--liblog-motion-base) var(--liblog-ease-out),
    transform var(--liblog-motion-base) var(--liblog-ease-spring);
}
.back-to-top svg { width: 20px; height: 20px; }
.back-to-top:hover,
.back-to-top:focus-visible {
  color: var(--liblog-primary-hover);
  background: var(--liblog-glass-bg-strong);
  box-shadow: var(--liblog-shadow-lg),
    inset 0 1px 0 var(--liblog-glass-highlight);
  transform: translateY(-2px);
}
.project-repo { margin: 12px 0 0; }
.hero-skills {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--liblog-border);
}
mark {
  background: var(--liblog-primary-soft);
  color: var(--liblog-brand-fg);
  padding: 0 2px;
  border-radius: 3px;
}
.search-tag-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }
.list-year-heading {
  margin: 24px 0 12px;
  font-size: 1.1rem;
  color: var(--liblog-brand-fg);
}
.list-year-heading:first-of-type { margin-top: 0; }

/* ---------- 分页 ---------- */
.pagination { display: flex; gap: 12px; margin-top: 24px; align-items: center; flex-wrap: wrap; }
.pagination-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  min-height: 36px;
  padding: 4px 12px;
  border: 1px solid var(--liblog-border);
  border-radius: 8px;
  color: var(--liblog-fg);
  text-decoration: none;
}
.pagination-link:hover { border-color: var(--liblog-primary); color: var(--liblog-primary); }
.pagination-current {
  background: var(--liblog-primary);
  border-color: var(--liblog-primary);
  color: var(--liblog-primary-fg);
  font-weight: 600;
}
.pagination-current:hover { color: var(--liblog-primary-fg); }
.pagination-ellipsis { color: var(--liblog-muted); padding: 0 2px; }

/* ---------- 归档页 ---------- */
.archive { display: grid; gap: 28px; }
.archive-year h2 { font-size: 1.15rem; color: var(--liblog-brand-fg); }
.archive-list {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.archive-item { display: flex; gap: 16px; align-items: baseline; }
.archive-item time {
  flex: none;
  min-width: 96px;
  color: var(--liblog-muted);
  font-variant-numeric: tabular-nums;
}
.archive-item a { color: var(--liblog-fg); text-decoration: none; }
.archive-item a:hover { color: var(--liblog-primary); text-decoration: underline; }

/* ---------- 时间线按年分组 ---------- */
.timeline-year + .timeline-year { margin-top: 32px; }
.timeline-year .timeline { margin-top: 12px; }

/* ---------- 图片 caption ---------- */
.article-figure { margin: 20px 0; }
.article-figure img { display: block; width: 100%; height: auto; border-radius: 8px; }
.article-figure figcaption {
  margin-top: 8px;
  text-align: center;
  font-size: 0.9rem;
  color: var(--liblog-muted);
}
.article-license {
  margin-top: 28px;
  padding-top: 14px;
  border-top: 1px solid var(--liblog-border);
  font-size: 0.9rem;
  color: var(--liblog-muted);
}

/* ---------- 友情链接与外链安全提醒 ---------- */
.friends-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}
.friend-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px;
  border: 1px solid var(--liblog-glass-border-soft);
  border-radius: 20px;
  background:
    var(--liblog-glass-shine),
    var(--liblog-glass-bg);
  -webkit-backdrop-filter: blur(var(--liblog-glass-blur)) saturate(var(--liblog-glass-saturate));
  backdrop-filter: blur(var(--liblog-glass-blur)) saturate(var(--liblog-glass-saturate));
  box-shadow: var(--liblog-shadow-sm),
    inset 0 1px 0 var(--liblog-glass-highlight);
  transition: transform var(--liblog-motion-base) var(--liblog-ease-out),
    box-shadow var(--liblog-motion-base) var(--liblog-ease-out);
}
.friend-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--liblog-shadow-md),
    inset 0 1px 0 var(--liblog-glass-highlight);
}
.friend-card-main { min-width: 0; }
.friend-card-title {
  margin: 0 0 6px;
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.4;
}
.friend-card-desc {
  margin: 0;
  color: var(--liblog-muted);
  font-size: 0.9rem;
  line-height: 1.65;
}
.friend-card-visit {
  align-self: flex-start;
  margin-top: auto;
  font-size: 0.9rem;
  font-weight: 600;
}
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 48px 24px;
  border: 1px dashed var(--liblog-glass-border-soft);
  border-radius: 22px;
  background:
    var(--liblog-glass-shine),
    var(--liblog-glass-bg-strong);
  -webkit-backdrop-filter: blur(var(--liblog-glass-blur)) saturate(var(--liblog-glass-saturate));
  backdrop-filter: blur(var(--liblog-glass-blur)) saturate(var(--liblog-glass-saturate));
  box-shadow: inset 0 1px 0 var(--liblog-glass-highlight);
  text-align: center;
}
.empty-state-art {
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  border-radius: 28px;
  background: var(--liblog-primary-soft);
  color: var(--liblog-primary);
  box-shadow: inset 0 1px 0 var(--liblog-glass-highlight);
}
.empty-state-art svg { width: 42px; height: 42px; }
.empty-state-text {
  max-width: 360px;
  margin: 0;
  color: var(--liblog-muted);
}
.empty-state-action { font-weight: 600; }
.friend-empty {
  padding: 20px;
  border: 1px dashed var(--liblog-border);
  border-radius: 12px;
  color: var(--liblog-muted);
  text-align: center;
}
.link-safety {
  max-width: 560px;
  padding: 22px;
  border: 1px solid var(--liblog-border);
  border-radius: 16px;
  background: var(--liblog-surface);
  box-shadow: var(--liblog-shadow-md);
}
.link-safety-lead {
  margin: 0 0 14px;
  font-size: 1rem;
}
.link-safety-target {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin: 0 0 14px;
  padding: 12px 14px;
  border: 1px solid var(--liblog-border);
  border-radius: 10px;
  background: var(--liblog-surface-2);
}
.link-safety-target dt {
  flex: none;
  color: var(--liblog-muted);
  font-size: 0.85rem;
}
.link-safety-target dd {
  display: inline-flex;
  min-width: 0;
  flex: 1 1 220px;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin: 0;
  overflow-wrap: anywhere;
}
.link-safety-name { font-weight: 600; }
.link-safety-host { color: var(--liblog-muted); }
.link-safety-tip {
  margin: 0 0 18px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--liblog-warning-soft);
  color: var(--liblog-warning);
  font-size: 0.9rem;
}
.link-safety-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.link-safety-continue,
.link-safety-cancel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 10px;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color var(--liblog-motion-fast) var(--liblog-ease-out),
    color var(--liblog-motion-fast) var(--liblog-ease-out),
    border-color var(--liblog-motion-fast) var(--liblog-ease-out);
}
.link-safety-continue {
  background: var(--liblog-primary);
  color: var(--liblog-primary-fg);
}
.link-safety-continue:hover { background: var(--liblog-primary-hover); color: var(--liblog-primary-fg); }
.link-safety-cancel {
  border: 1px solid var(--liblog-border);
  background: var(--liblog-surface);
  color: var(--liblog-fg);
}
.link-safety-cancel:hover { background: var(--liblog-surface-2); color: var(--liblog-fg); }

/* ---------- 响应式（1280 目录折叠 / 1024 / 768 / 640 断点） ---------- */
@media (max-width: 1504px) {
  /* 留白不足以容纳 232px 悬浮目录时，折叠为正文上方，避免遮挡正文组件 */
  .article-layout { display: block; }
  .toc {
    position: static;
    width: auto;
    max-height: 320px;
    margin-bottom: 18px;
  }
}
@media (max-width: 1024px) {
  .page-shell { width: min(880px, calc(100% - 28px)); }
  .card-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
  .masonry { column-width: 240px; column-gap: 20px; }
}
@media (max-width: 768px) {
  /* 移动端导航：首页/关于/搜索常驻，其余入口收进右上角二级菜单 */
  .site-nav { display: none; }
  .mobile-nav-primary {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: auto;
  }
  .mobile-menu {
    display: block;
    margin-left: 0;
  }
  .mobile-nav-link {
    min-height: 44px;
    padding: 0 9px;
  }
  .page-shell { width: min(720px, calc(100% - 28px)); padding-bottom: 64px; }
  .masonry { column-count: 2; column-width: auto; column-gap: 16px; }
  .masonry > * { margin-bottom: 16px !important; }
  .hero { padding: 32px 0 16px; }
  .hero { padding: 24px 0; }
  .hero-title { font-size: 1.8rem; }
  .hero-tagline { font-size: 1.08rem; }
  .hero-meta, .hero-goal { font-size: 0.9rem; }
  .hero-title { font-size: 1.6rem; }
  .hero-tagline { font-size: 1rem; }
  .hero-meta, .hero-goal { font-size: 0.85rem; }
  .section { margin-top: 56px; }
  .journey-row { flex-direction: column; gap: 6px; padding: 12px 0; }
  .journey-date { min-width: 0; }
  .project-card, .post-card { padding: 16px 18px; }
  .card-grid { gap: 12px; }
  .post-nav { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .back-to-top { right: 14px; bottom: 16px; }
  .masonry { column-count: 1; column-gap: 0; }
  .article-body { font-size: 0.95rem; }
  .article-body table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .page-shell { width: calc(100% - 24px); }
  .card-grid { grid-template-columns: 1fr; }
  .hero-title { font-size: 1.45rem; }
  .hero-goal, .hero-meta { font-size: 0.82rem; }
  .timeline { padding-left: 14px; }
  .timeline-node { padding-left: 10px; }
  .timeline-node::before { left: -19px; width: 8px; height: 8px; }
  .post-list, .journey-panel { max-width: 100%; }
  .badge-row { gap: 6px; }
  .search-input { max-width: 100%; }
}
@media (max-width: 360px) {
  /* 320px 级窄屏：隐藏品牌文字，仅保留 Logo，避免页眉横向溢出 */
  .site-header .brand-name-text { display: none; }
}
@media (max-width: 480px) {
  .post-cover { max-height: 260px; }
  .article-cover img { max-height: 240px; }
  .hero { min-height: calc(100svh - var(--header-h) - 24px); }
  .archive-item { flex-direction: column; gap: 2px; }
  .archive-item time { min-width: 0; }
  .article-license { font-size: 0.85rem; }
  .breadcrumb { flex-wrap: wrap; row-gap: 4px; }
  .search-modal-panel { inset: 8px; }
}
@media print {
  .breadcrumb,
  .archive-item time::after { display: none; }
}
/* ---------- 打印：正文干净排版，隐藏导航/氛围/打点 ---------- */
@media print {
  body {
    background: var(--liblog-print-bg);
    color: var(--liblog-print-fg);
  }
  .site-header,
  .site-footer,
  .search-modal,
  .reading-progress,
  .ambient,
  .back-top,
  .back-to-top,
  .to-top,
  .hero::before,
  .flow-rule,
  .site-footer img[src*="beacon"] {
    display: none !important;
  }
  .page-shell {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
  }
  .card,
  .project-card,
  .post-card,
  .journey-panel,
  .post-nav-item {
    border: 0;
    background: none;
    box-shadow: none;
  }
  .article-layout { display: block; }
  .toc { display: none; }
  .article-body {
    max-width: none;
  }
  .article-body pre,
  .article-body table,
  .article-body blockquote,
  .post-nav,
  .related-posts {
    break-inside: avoid;
  }
  .code-copy {
    display: none;
  }
  .article-body pre {
    padding-top: 12px;
  }
  a {
    color: var(--liblog-print-fg);
  }
  .article-body a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
    color: var(--liblog-muted);
  }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}