/* ═══════════════════════ 字体（本地子集，全站约 130KB） ═══════════════════════ */
/* 得意黑：中文标题展示字，斜体科技感 */
@font-face {
  font-family: "Smiley Sans";
  src: url("fonts/smiley-sans-oblique.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Smiley Sans";
  src: url("fonts/smiley-sans-oblique.woff2") format("woff2");
  font-style: oblique;
  font-weight: 100 900;
  font-display: swap;
}
/* JetBrains Mono：终端等宽字 */
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/jetbrains-mono-400.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/jetbrains-mono-500.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/jetbrains-mono-700.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}
/* Orbitron：星舰 HUD 风格的纯英文字形 */
@font-face {
  font-family: "Orbitron";
  src: url("fonts/orbitron-500.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Orbitron";
  src: url("fonts/orbitron-700.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Orbitron";
  src: url("fonts/orbitron-800.woff2") format("woff2");
  font-style: normal;
  font-weight: 800;
  font-display: swap;
}

/* ═══════════════════════ 基础 ═══════════════════════ */
:root {
  --bg: #05070d;
  --cyan: #22d3ee;
  --cyan-deep: #06b6d4;
  --violet: #a78bfa;
  --text: #e6e9f2;
  --text-dim: #9aa3b8;
  --text-faint: #5c6579;
  --glass: rgba(255, 255, 255, 0.045);
  --glass-border: rgba(255, 255, 255, 0.09);
  --mono: "JetBrains Mono", "SFMono-Regular", "Cascadia Code", Consolas, "Courier New", monospace;
  --display: "Smiley Sans", "Smiley Sans Oblique", -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --hud: "Orbitron", "Smiley Sans", -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  --sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* 平滑滚动由 JS lerp 接管（见 app.js），此处不再使用 CSS smooth */

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* 全局背景：循环视频 + 深色压暗罩 */
.bg-video {
  position: fixed;
  inset: 0;
  z-index: -3;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--bg);
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(ellipse 80% 60% at 50% 20%, rgba(5, 7, 13, 0.35), transparent 70%),
    linear-gradient(180deg, rgba(5, 7, 13, 0.52) 0%, rgba(5, 7, 13, 0.45) 45%, rgba(5, 7, 13, 0.58) 100%);
}

a { color: inherit; text-decoration: none; }

::selection { background: rgba(34, 211, 238, 0.28); }

/* 正常流内容（盖住底部固定的结束部分，滚动后向上揭开） */
.flow {
  position: relative;
  z-index: 1;
  margin-bottom: 100vh;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.55);
}

/* ═══════════════════════ 导航栏（滚动 → 悬浮胶囊） ═══════════════════════ */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 0 22px;
}
.nav-inner {
  height: 64px;
  display: flex;
  align-items: center;
  gap: 36px;
  padding: 0 14px 0 18px;
  border: 1px solid transparent;
  border-radius: 999px;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  transition: margin-top 0.45s cubic-bezier(0.22, 1, 0.36, 1),
              height 0.45s cubic-bezier(0.22, 1, 0.36, 1),
              max-width 0.55s cubic-bezier(0.22, 1, 0.36, 1),
              background 0.45s ease, border-color 0.45s ease,
              box-shadow 0.45s ease;
}
.nav--scrolled .nav-inner {
  margin-top: 12px;
  height: 54px;
  max-width: 1024px;
  background: rgba(16, 19, 26, 0.72);
  -webkit-backdrop-filter: blur(22px) saturate(1.35);
  backdrop-filter: blur(22px) saturate(1.35);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.45);
}

.nav-brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.nav-logo { width: 26px; height: 26px; }
.nav-title {
  font-family: var(--display); font-size: 16px; font-weight: 600; letter-spacing: 0.02em; }
.nav-badge {
  font-family: var(--hud);
  font-weight: 700;
  font-size: 9.5px;
  letter-spacing: 0.14em;
  color: var(--cyan);
  border: 1px solid rgba(34, 211, 238, 0.35);
  border-radius: 4px;
  padding: 2.5px 6px;
  background: rgba(34, 211, 238, 0.07);
}

.nav-links { display: flex; gap: 6px; margin-left: auto; }
.nav-link {
  position: relative;
  font-size: 13.5px;
  color: var(--text-dim);
  padding: 8px 14px;
  border-radius: 8px;
  transition: color 0.25s ease, background 0.25s ease;
}
.nav-link:hover { color: var(--text); background: rgba(255, 255, 255, 0.05); }
.nav-underline {
  position: absolute;
  left: 14px; right: 14px; bottom: 4px;
  height: 1.5px;
  background: linear-gradient(90deg, var(--cyan), var(--violet));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.nav-link:hover .nav-underline { transform: scaleX(1); }

.nav-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.nav-github {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.03);
  transition: border-color 0.25s ease;
}
/* 波纹：悬停时亮色从中心点生长、放大直至占满整个按钮 */
.nav-github::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: rgba(255, 255, 255, 0.13);
  transform: scale(0);
  transform-origin: 50% 50%;
  pointer-events: none;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.nav-github:hover { border-color: rgba(255, 255, 255, 0.32); }
.nav-github:hover::after { transform: scale(1); }
.nav-download {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 600;
  color: #0b0e14;
  background: #fff;
  border-radius: 999px;
  padding: 8px 18px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.nav-download:hover { transform: translateY(-1px); box-shadow: 0 6px 22px rgba(255, 255, 255, 0.22); }

/* ═══════════════════════ Hero ═══════════════════════ */
.hero {
  position: sticky;
  top: 0;
  z-index: 0;
  height: 100vh;
  min-height: 640px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  will-change: opacity;
}
.hero-stars { position: absolute; inset: 0; width: 100%; height: 100%; }

.hero-ring {
  position: absolute;
  left: 50%; top: 50%;
  border-radius: 50%;
  border: 1px solid rgba(34, 211, 238, 0.14);
  pointer-events: none;
}
.hero-ring--a {
  width: 130vmin; height: 130vmin;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 120px rgba(34, 211, 238, 0.06) inset;
  animation: ringSpin 90s linear infinite;
  border-style: dashed;
}
.hero-ring--b {
  width: 175vmin; height: 175vmin;
  transform: translate(-50%, -50%);
  border-color: rgba(167, 139, 250, 0.09);
  animation: ringSpin 140s linear infinite reverse;
}
@keyframes ringSpin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}

.hero-glow {
  position: absolute;
  left: 50%; top: 42%;
  width: 90vmin; height: 60vmin;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center,
    rgba(34, 211, 238, 0.13) 0%,
    rgba(167, 139, 250, 0.07) 45%,
    transparent 72%);
  filter: blur(30px);
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 0 24px;
  max-width: 1100px;
  margin-top: 3vh;
  will-change: transform, filter, opacity;
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--hud);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--text-dim);
  border: 1px solid var(--glass-border);
  background: rgba(5, 7, 13, 0.4);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-radius: 999px;
  padding: 8px 18px;
  margin-bottom: 30px;
}
.hero-eyebrow-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 10px var(--cyan);
  animation: pulse 2.2s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }

.hero-title {
  font-family: var(--display);
  font-size: clamp(40px, 6.4vw, 76px);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.15;
  margin-bottom: 26px;
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.6), 0 0 60px rgba(34, 211, 238, 0.25);
}
.hero-title em {
  font-style: normal;
  background: linear-gradient(100deg, var(--cyan) 10%, #67e8f9 40%, var(--violet) 90%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-sub {
  font-size: 15.5px;
  line-height: 2;
  color: var(--text-dim);
  margin-bottom: 44px;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.7);
}

.hero-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-bottom: 44px;
}
/* 星际 HUD 卡：斜切角 + 角标括线 + 扫描光 */
.stat-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(165deg, rgba(16, 23, 40, 0.62), rgba(7, 10, 18, 0.42));
  border: 1px solid rgba(148, 197, 255, 0.14);
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px));
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  backdrop-filter: blur(16px) saturate(1.2);
  padding: 20px 22px 18px;
  text-align: left;
  transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}
/* 四角括线 */
.stat-card::before {
  content: "";
  position: absolute;
  inset: 6px;
  pointer-events: none;
  background:
    linear-gradient(var(--cyan), var(--cyan)) left top / 13px 1.5px,
    linear-gradient(var(--cyan), var(--cyan)) left top / 1.5px 13px,
    linear-gradient(var(--cyan), var(--cyan)) right bottom / 13px 1.5px,
    linear-gradient(var(--cyan), var(--cyan)) right bottom / 1.5px 13px;
  background-repeat: no-repeat;
  opacity: 0.5;
  transition: opacity 0.35s ease;
}
.stat-card:hover {
  transform: translateY(-4px);
  border-color: rgba(34, 211, 238, 0.42);
  box-shadow: 0 14px 44px rgba(34, 211, 238, 0.12), 0 0 0 1px rgba(34, 211, 238, 0.08) inset;
}
.stat-card:hover::before { opacity: 1; }
/* 顶部扫描光线，错峰循环 */
.stat-scan {
  position: absolute;
  top: 0; left: -45%;
  width: 45%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(103, 232, 249, 0.95), transparent);
  animation: statScan 3.6s linear infinite;
  pointer-events: none;
}
.stat-card:nth-child(2) .stat-scan { animation-delay: 1.2s; }
.stat-card:nth-child(3) .stat-scan { animation-delay: 2.4s; }
@keyframes statScan { to { left: 112%; } }

.stat-label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  color: var(--cyan);
  margin-bottom: 12px;
  white-space: nowrap;
}
.stat-label-code { color: var(--text-faint); font-size: 9.5px; letter-spacing: 0.14em; }
.stat-value {
  font-family: var(--hud);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.1;
  text-shadow: 0 0 22px rgba(230, 233, 242, 0.28);
}
.stat-value--cyan { color: var(--cyan); text-shadow: 0 0 26px rgba(34, 211, 238, 0.55); }
.stat-value--sm { font-size: 16.5px; padding-top: 7px; }
.stat-unit {
  font-size: 12px;
  font-weight: 400;
  color: var(--text-faint);
  margin-left: 6px;
  letter-spacing: 0.08em;
}
.stat-desc {
  font-size: 11.5px;
  color: var(--text-faint);
  margin-top: 7px;
  letter-spacing: 0.04em;
}
.stat-desc::before { content: "▸ "; color: rgba(34, 211, 238, 0.7); }

.hero-cta { display: flex; gap: 16px; justify-content: center; }
.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  font-weight: 500;
  border-radius: 10px;
  padding: 14px 28px;
  transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}
.btn--primary {
  color: #04121a;
  background: linear-gradient(135deg, #67e8f9, var(--cyan-deep));
  box-shadow: 0 8px 30px rgba(6, 182, 212, 0.35);
}
.btn--primary:hover { transform: translateY(-3px); box-shadow: 0 14px 44px rgba(6, 182, 212, 0.5); }
.btn--ghost {
  color: var(--text-dim);
  background: rgba(10, 14, 24, 0.5);
  border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.btn--ghost:hover { color: var(--text); border-color: rgba(255, 255, 255, 0.22); transform: translateY(-3px); }

.hero-scrollhint {
  position: absolute;
  bottom: 26px; left: 40px;
  display: flex;
  align-items: center;
  gap: 14px;
  z-index: 2;
}
.hero-scrollhint-text {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  color: var(--cyan);
  opacity: 0.75;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.8);
}
.hero-scrollhint-line {
  width: 60px; height: 1px;
  background: linear-gradient(90deg, var(--cyan), transparent);
  animation: hintSlide 2.4s ease-in-out infinite;
}
@keyframes hintSlide {
  0%,100% { transform: scaleX(0.4); opacity: 0.4; }
  50% { transform: scaleX(1); opacity: 1; }
}

/* ═══════════════════════ 文章列表（连续单列 · 全屏通栏） ═══════════════════════ */
.articles {
  position: relative;
  z-index: 2;
  background: rgba(5, 7, 13, 0.42);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
  backdrop-filter: blur(10px) saturate(1.1);
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.stream-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  padding: 12vh 6vw 26px;
}
.sh-eyebrow {
  font-family: var(--hud);
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: 0.2em;
  color: var(--cyan);
  margin-bottom: 10px;
}
.sh-title {
  font-family: var(--display); font-size: clamp(26px, 3vw, 36px); font-weight: 700; letter-spacing: 0.02em; }
.sh-meta { font-size: 12.5px; color: var(--text-faint); white-space: nowrap; padding-bottom: 6px; }

.stream {
  display: flex;
  flex-direction: column;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  perspective: 1400px;
}

.post {
  position: relative;
  display: flex;
  align-items: center;
  gap: 30px;
  padding: 26px 6vw;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  overflow: hidden;
  transition: background 0.3s ease,
              translate 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.55s ease,
              filter 0.6s ease;
  transition-delay: 0s, var(--d, 0ms), var(--d, 0ms), var(--d, 0ms);
  cursor: pointer;
  transform-origin: 50% 50%;
  will-change: transform;
  /* 入场前状态：下沉 + 透明 + 轻微失焦 */
  translate: 0 46px;
  opacity: 0;
  filter: blur(6px);
}
.post.is-in {
  translate: 0 0;
  opacity: 1;
  filter: blur(0);
}
.post:last-child { border-bottom: none; }
.post::before {
  content: "";
  position: absolute;
  left: 0; top: 22%;
  width: 2px; height: 56%;
  background: linear-gradient(180deg, var(--cyan), var(--violet));
  border-radius: 2px;
  opacity: 0;
  transform: scaleY(0.4);
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 2;
}
.post:hover { background: rgba(255, 255, 255, 0.028); }
.post:hover::before { opacity: 1; transform: scaleY(1); }

/* 右侧封面：斜切 + 由实渐变到无，融入列表底色 */
.post-visual {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: min(44%, 540px);
  background-image: var(--thumb);
  background-size: cover;
  background-position: center;
  clip-path: polygon(14% 0, 100% 0, 100% 100%, 0 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 4%, rgba(0, 0, 0, 0.5) 42%, #000 76%);
  mask-image: linear-gradient(to right, transparent 4%, rgba(0, 0, 0, 0.5) 42%, #000 76%);
  opacity: 0.52;
  filter: saturate(1.08) brightness(0.88);
  transform-origin: right center;
  transition: opacity 0.45s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), filter 0.45s ease;
  pointer-events: none;
}
.post:hover .post-visual {
  opacity: 0.8;
  transform: scale(1.045);
  filter: saturate(1.2) brightness(0.98);
}

.post-body { position: relative; z-index: 1; flex: 1; min-width: 0; }

.post-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 9px;
}
/* 日志编号：等宽括号终端风 */
.post-index {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--text-faint);
  letter-spacing: 0.14em;
}
/* 分类标签：平行四边形斜切芯片 */
.post-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: #67e8f9;
  background: linear-gradient(100deg, rgba(34, 211, 238, 0.16), rgba(167, 139, 250, 0.1));
  border: 1px solid rgba(34, 211, 238, 0.32);
  clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
  padding: 3px 13px;
  transition: background 0.3s ease, color 0.3s ease;
}
.post-tag-notch {
  width: 4px; height: 4px;
  background: var(--cyan);
  box-shadow: 0 0 6px var(--cyan);
  transform: rotate(45deg);
  flex-shrink: 0;
}
.post:hover .post-tag {
  background: linear-gradient(100deg, rgba(34, 211, 238, 0.3), rgba(167, 139, 250, 0.18));
  color: #a5f3fc;
}
/* 日期：等宽小字 + 闪烁光标方块 */
.post-date {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--text-faint);
  letter-spacing: 0.1em;
  text-shadow: 0 1px 6px rgba(4, 6, 11, 0.8);
}
.post-date-sq {
  width: 5px; height: 9px;
  background: rgba(34, 211, 238, 0.75);
  animation: cursorBlink 1.6s steps(2, start) infinite;
}
@keyframes cursorBlink { 0%,100% { opacity: 1; } 50% { opacity: 0.15; } }
.post-title {
  font-family: var(--display);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.5;
  margin-bottom: 7px;
  transition: color 0.25s ease;
  text-shadow: 0 1px 10px rgba(4, 6, 11, 0.75), 0 0 2px rgba(4, 6, 11, 0.6);
}
.post:hover .post-title { color: var(--cyan); }
.post-excerpt {
  font-size: 13.5px;
  line-height: 1.8;
  color: #b9c1d4;
  max-width: 880px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-shadow: 0 1px 8px rgba(4, 6, 11, 0.8);
}
/* 元信息行：终端数据芯片 */
.post-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.pm-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: #9aa8c2;
  background: rgba(9, 13, 22, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-left: 2px solid rgba(34, 211, 238, 0.55);
  border-radius: 4px;
  padding: 3.5px 10px 3.5px 8px;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  text-shadow: 0 1px 6px rgba(4, 6, 11, 0.8);
  transition: border-color 0.3s ease, color 0.3s ease, background 0.3s ease;
}
.pm-chip svg { color: var(--cyan); opacity: 0.85; flex-shrink: 0; }
.pm-chip em {
  font-style: normal;
  font-size: 8.5px;
  letter-spacing: 0.16em;
  color: var(--text-faint);
  padding-right: 6px;
  margin-right: 1px;
  border-right: 1px solid rgba(255, 255, 255, 0.12);
}
.pm-chip--ok { border-left-color: rgba(52, 211, 153, 0.65); }
.pm-chip--ok svg { color: #34d399; }
.post:hover .pm-chip {
  border-color: rgba(255, 255, 255, 0.14);
  border-left-color: rgba(34, 211, 238, 0.9);
  color: #c3cde4;
  background: rgba(12, 18, 30, 0.6);
}
.post:hover .pm-chip--ok { border-left-color: rgba(52, 211, 153, 0.9); }
.post-index { text-shadow: 0 1px 6px rgba(4, 6, 11, 0.8); }

/* ═══════════════════════ 顶部 / 底部 14% 毛玻璃模糊带 ═══════════════════════ */
.edge-blur {
  position: fixed;
  left: 0; right: 0;
  height: 14vh;
  z-index: 60;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s ease;
  -webkit-backdrop-filter: blur(18px) saturate(0.9) brightness(0.9);
  backdrop-filter: blur(18px) saturate(0.9) brightness(0.9);
}
.edge-blur--top {
  top: 0;
  mask-image: linear-gradient(to bottom, black 10%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 10%, transparent 100%);
}
.edge-blur--bottom {
  bottom: 0;
  mask-image: linear-gradient(to top, black 10%, transparent 100%);
  -webkit-mask-image: linear-gradient(to top, black 10%, transparent 100%);
}
body.in-articles .edge-blur { opacity: 1; }

/* ═══════════════════════ 结束部分（固定底层 · 揭开式浮现） ═══════════════════════ */
.outro {
  position: fixed;
  inset: 0;
  z-index: -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(ellipse 60% 45% at 50% 42%, rgba(34, 211, 238, 0.14), transparent 70%),
    radial-gradient(ellipse 50% 40% at 60% 65%, rgba(167, 139, 250, 0.1), transparent 70%),
    rgba(4, 6, 11, 0.38);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0.5s ease;
  text-align: center;
  padding: 0 24px;
}
body.outro-on .outro { opacity: 1; visibility: visible; }

.outro-inner { will-change: transform; }

.outro-eyebrow {
  font-family: var(--hud);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--cyan);
  margin-bottom: 22px;
}
.outro-title {
  font-family: var(--display);
  font-size: clamp(38px, 5.6vw, 64px);
  font-weight: 700;
  letter-spacing: 0.03em;
  margin-bottom: 22px;
  background: linear-gradient(100deg, #fff 20%, var(--cyan) 60%, var(--violet) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.outro-sub {
  font-size: 14.5px;
  line-height: 2;
  color: var(--text-dim);
  margin-bottom: 40px;
}

.outro-bottom {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 22px 6vw;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--text-faint);
}

/* ═══════════════════════ 第二屏 · 星港调度台 ═══════════════════════ */
.hub {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  display: flex;
  align-items: center;
  background: rgba(5, 7, 13, 0.5);
  -webkit-backdrop-filter: blur(12px) saturate(1.1);
  backdrop-filter: blur(12px) saturate(1.1);
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.hub-inner {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 7.5vh 6vw 6.5vh;
}
.hub-head { margin-bottom: 34px; }
.hub-sub {
  margin-top: 12px;
  font-size: 13.5px;
  line-height: 1.85;
  color: var(--text-dim);
}

.hub-block { margin-top: 30px; }
.hb-head { margin-bottom: 14px; }
.hb-head--row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}
.hb-eyebrow {
  font-family: var(--hud);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--cyan);
}
.hb-title {
  font-family: var(--display);
  margin-top: 6px;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.03em;
}

/* 通用入场：进入视口时浮现（带 --d 级联延迟） */
.reveal {
  opacity: 0;
  translate: 0 42px;
  filter: blur(6px);
  transition: translate 0.75s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.6s ease, filter 0.65s ease;
  transition-delay: var(--d, 0ms);
}
.reveal.is-in { opacity: 1; translate: 0 0; filter: blur(0); }

/* 最新文章：三枚信号卡（封面图压底 + 底部信息） */
.latest-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.latest-card {
  position: relative;
  height: 232px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  background-image: var(--thumb);
  background-size: cover;
  background-position: center;
  cursor: pointer;
  isolation: isolate;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.3s ease, box-shadow 0.4s ease;
}
/* 压暗罩：上暗下更暗，保证文字可读 */
.latest-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg,
    rgba(4, 6, 11, 0.42) 0%,
    rgba(4, 6, 11, 0.18) 38%,
    rgba(4, 6, 11, 0.82) 100%);
  transition: opacity 0.4s ease;
}
.latest-card:hover {
  transform: translateY(-5px);
  border-color: rgba(34, 211, 238, 0.45);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(34, 211, 238, 0.1) inset;
}
.lc-top {
  position: absolute;
  top: 14px; left: 16px; right: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: rgba(230, 233, 242, 0.75);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.8);
}
.lc-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #67e8f9;
}
.lc-live::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 8px var(--cyan);
  animation: pulse 2s ease-in-out infinite;
}
.lc-bottom {
  position: absolute;
  left: 16px; right: 16px; bottom: 13px;
}
.lc-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  color: #67e8f9;
  background: rgba(9, 13, 22, 0.55);
  border: 1px solid rgba(34, 211, 238, 0.35);
  clip-path: polygon(7px 0, 100% 0, calc(100% - 7px) 100%, 0 100%);
  padding: 2.5px 11px;
  margin-bottom: 10px;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.lc-title {
  font-family: var(--display);
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.01em;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.85);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.25s ease;
}
.latest-card:hover .lc-title { color: #a5f3fc; }
.lc-meta {
  margin-top: 9px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  color: rgba(154, 163, 184, 0.9);
}
.lc-meta i { width: 3px; height: 3px; background: currentColor; transform: rotate(45deg); opacity: 0.7; }

/* 猜你想看：调度清单行 */
.batch-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  background: rgba(10, 14, 24, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  padding: 9px 14px;
  cursor: pointer;
  transition: color 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}
.batch-btn:hover {
  color: #a5f3fc;
  border-color: rgba(34, 211, 238, 0.45);
  background: rgba(34, 211, 238, 0.08);
}
.batch-btn svg { transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); }
.batch-btn:hover svg { transform: rotate(-180deg); }
.batch-ind {
  font-size: 9px;
  letter-spacing: 0.14em;
  color: var(--cyan);
  border-left: 1px solid rgba(255, 255, 255, 0.16);
  padding-left: 9px;
}
.rec-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rec-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 18px;
  background: rgba(10, 14, 24, 0.48);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.3s ease, background 0.3s ease,
              opacity 0.28s ease, translate 0.28s ease;
  transition-delay: 0s, 0s, 0s, var(--d, 0ms), var(--d, 0ms);
}
.rec-row:hover {
  transform: translateX(8px);
  border-color: rgba(34, 211, 238, 0.4);
  background: rgba(34, 211, 238, 0.06);
}
/* 换批切换时的淡出 */
.rec-list.switching .rec-row { opacity: 0; translate: 0 12px; }
.rec-idx {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--text-faint);
  flex-shrink: 0;
}
.rec-tag {
  flex-shrink: 0;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  color: #67e8f9;
  border: 1px solid rgba(34, 211, 238, 0.3);
  background: rgba(34, 211, 238, 0.07);
  clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
  padding: 2.5px 10px;
}
.rec-title {
  font-family: var(--display);
  flex: 1;
  min-width: 0;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.25s ease;
}
.rec-row:hover .rec-title { color: #a5f3fc; }
.rec-meta {
  flex-shrink: 0;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  color: var(--text-faint);
  display: flex;
  align-items: center;
  gap: 8px;
}
.rec-meta i { width: 3px; height: 3px; background: currentColor; transform: rotate(45deg); opacity: 0.7; }
.rec-arrow {
  flex-shrink: 0;
  color: var(--text-faint);
  transition: color 0.25s ease, transform 0.3s ease;
}
.rec-row:hover .rec-arrow { color: var(--cyan); transform: translateX(4px); }

/* ═══════════════════════ 跃迁加载覆盖层 ═══════════════════════ */
.warp {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: #020409;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}
.warp.on { opacity: 1; visibility: visible; }
.warp-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.warp-status {
  position: relative;
  z-index: 1;
  text-align: center;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.9);
}
.warp-title {
  font-family: var(--hud);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.26em;
  color: #67e8f9;
  margin-bottom: 12px;
  animation: pulse 1.4s ease-in-out infinite;
}
.warp-sub {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  color: var(--text-dim);
  margin-bottom: 22px;
}
.warp-bar {
  width: 240px;
  height: 2px;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 2px;
  overflow: hidden;
}
.warp-bar i {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--cyan), var(--violet));
  box-shadow: 0 0 12px rgba(34, 211, 238, 0.8);
}
.warp.on .warp-bar i {
  width: 100%;
  transition: width 1.15s cubic-bezier(0.3, 0.6, 0.4, 1);
}
/* 返航倒放：从满格退回零 */
.warp.reverse .warp-bar i { width: 100%; transition: none; }
.warp.reverse.on .warp-bar i {
  width: 0;
  transition: width 1.15s cubic-bezier(0.3, 0.6, 0.4, 1);
}

/* ═══════════════════════ 文章舱（正文留空） ═══════════════════════ */
.reader { display: none; }
body.reader-on .reader {
  display: flex;
  position: relative;
  z-index: 2;
  min-height: 100vh;
  align-items: center;
  justify-content: center;
  background: rgba(4, 6, 11, 0.55);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
body.reader-on .flow { display: none; }
body.reader-on .outro,
body.reader-on .edge-blur { display: none; }
.reader-back {
  position: absolute;
  top: 96px; left: 6vw;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  color: var(--text-dim);
  background: rgba(10, 14, 24, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  padding: 10px 18px;
  cursor: pointer;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: color 0.25s ease, border-color 0.25s ease;
}
.reader-back:hover { color: #a5f3fc; border-color: rgba(34, 211, 238, 0.45); }
.reader-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(880px, 78vw);
  height: 48vh;
  border: 1px dashed rgba(255, 255, 255, 0.18);
  border-radius: 14px;
  background: rgba(8, 11, 19, 0.35);
  font-family: var(--hud);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--text-faint);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.8);
}

/* 触屏 / 减动效设备：原生轻吸附（桌面端由 JS 接管，见 app.js） */
html.snap-native { scroll-snap-type: y proximity; }
html.snap-native .hub { scroll-snap-align: start; }

/* 低高度屏幕：调度台进一步压缩，保证一屏完整停靠 */
@media (max-height: 940px) and (min-width: 861px) {
  .hub-inner { padding: 5.5vh 6vw 5vh; }
  .hub-head { margin-bottom: 24px; }
  .hub-sub { display: none; }
  .hub-block { margin-top: 22px; }
  .latest-card { height: 196px; }
  .hb-head { margin-bottom: 10px; }
  .rec-row { padding: 8px 16px; }
  .rec-list { gap: 7px; }
}

/* ═══════════════════════ 响应式 ═══════════════════════ */
@media (max-width: 860px) {
  .nav { padding: 0 12px; }
  .nav-links { display: none; }
  .nav-inner { gap: 14px; }
  .nav-github { display: none; }
  .hero-stats { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .stat-card:last-child { grid-column: 1 / -1; }
  .stat-value { font-size: 24px; }
  .br-pc { display: none; }
  .stream-head { padding: 10vh 6vw 18px; }
  .sh-meta { display: none; }
  .post { padding: 18px 6vw; gap: 16px; }
  .post-visual {
    width: 100%;
    clip-path: none;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.32) 60%, rgba(0, 0, 0, 0.55) 100%);
    mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.32) 60%, rgba(0, 0, 0, 0.55) 100%);
    opacity: 0.34;
  }
  .latest-grid { grid-template-columns: 1fr; }
  .latest-card { height: 220px; }
  .hb-head--row { flex-direction: column; align-items: flex-start; gap: 14px; }
  .rec-row { gap: 10px; padding: 12px 14px; }
  .rec-meta, .rec-arrow { display: none; }
  .reader-back { top: 84px; left: 5vw; }
  .post-title { font-size: 15.5px; }
  .post-excerpt { -webkit-line-clamp: 1; }
  .pm-chip { font-size: 9px; padding: 3px 8px 3px 7px; }
  .hero-scrollhint { left: 20px; bottom: 18px; }
  .outro-bottom { justify-content: center; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-ring, .hero-eyebrow-dot, .hero-scrollhint-line,
  .stat-scan, .post-date-sq { animation: none; }
  .bg-video { display: none; }
}


/* 接入真实内容后的必要补充，不改参考布局与配色。 */
/* 静态背景独立于视频，减弱动效模式下仍保留风景底图。 */
.bg-image { position: fixed; inset: 0; z-index: -4; width: 100%; height: 100%; object-fit: cover; background: var(--bg); }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 5px; }
button:disabled { opacity: .45; cursor: not-allowed; }
.empty-state { color: var(--text-dim); padding: 24px 6vw; font-size: 13px; }
.cover-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.post-visual .cover-image { z-index: auto; }
.nav-title { max-width: 28vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 站点 Logo 等比缩放进品牌位，非正方形图标不被拉伸，也不参与收缩。 */
.nav-logo--image { object-fit: contain; flex-shrink: 0; }
.nav-actions { margin-left: auto; }
/* 顶部导航改由 Halo 菜单提供后的一级项与二级下拉，沿用导航玻璃、描边与青色高亮。 */
.nav-item { position: relative; display: flex; align-items: center; }
.nav-item > .nav-link { display: inline-flex; align-items: center; gap: 6px; }
.nav-caret { flex-shrink: 0; opacity: .65; transition: transform .28s cubic-bezier(.22, 1, .36, 1); }
.nav-item--branch:hover .nav-caret, .nav-item--branch:focus-within .nav-caret { transform: rotate(180deg); }
/* 链接与下拉之间的透明桥接，光标经过空隙时下拉保持展开。 */
.nav-item--branch::after { content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 12px; }
.nav-dropdown {
  position: absolute;
  top: calc(100% + 12px);
  left: 6px;
  min-width: 150px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 12px;
  background: rgba(16, 19, 26, .86);
  -webkit-backdrop-filter: blur(22px) saturate(1.35);
  backdrop-filter: blur(22px) saturate(1.35);
  box-shadow: 0 18px 46px rgba(0, 0, 0, .5);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .25s ease, transform .3s cubic-bezier(.22, 1, .36, 1), visibility .25s ease;
}
.nav-item--branch:hover .nav-dropdown, .nav-item--branch:focus-within .nav-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-dropdown-link {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-dim);
  padding: 8px 12px;
  border-radius: 8px;
  white-space: nowrap;
  transition: color .25s ease, background .25s ease;
}
.nav-dropdown-link:hover, .nav-dropdown-link:focus-visible { color: var(--text); background: rgba(255, 255, 255, .06); }
.hero-sub { white-space: pre-line; }
/* 正文舱灰阶与两侧留白集中为变量，便于统一调整阅读观感。 */
:root { --reader-text: #b9c1d4; --reader-text-strong: #ccd3e1; --reader-gutter: 15%; }
/* 文章星港的标题统一改用系统默认字体：文章列表卡片与正文舱 h1 同一套标题字，长标题更稳。 */
.post-title { font-family: var(--sans); }
/* 文章封面作为背景时高度模糊，并叠加深色罩，只营造气氛、不参与阅读对比。
   层级取 -1：压在参考 body::after 压暗罩之上，否则封面会被直接盖黑。 */
.post-cover { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: var(--bg); }
.post-cover img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.25); filter: blur(46px) saturate(1.2) brightness(.7); }
.post-cover::after { content: ""; position: absolute; inset: 0; background: radial-gradient(130% 100% at 50% 0%, rgba(5, 7, 13, .32) 0%, rgba(5, 7, 13, .58) 55%, rgba(5, 7, 13, .68) 100%); }
/* 有封面时舱体让出透明度，让模糊封面透出来；首页未启用的隐藏封面层不参与匹配。 */
body.reader-on:has(.post-cover:not([hidden])) .reader { background: rgba(4, 6, 11, .2); }
.post-cover[hidden] { display: none; }
.reader { padding: 160px 0 60px; }
/* 正文两侧各留一成半（--reader-gutter），窄屏放不下保底宽度时由媒体查询放宽。 */
.reader-empty.reader-body { height: auto; min-height: 48vh; display: block; width: max(880px, calc(100% - var(--reader-gutter) * 2)); padding: clamp(22px, 4vw, 50px); font-family: var(--sans); font-size: 16px; line-height: 1.9; letter-spacing: normal; text-align: left; color: var(--reader-text); overflow-wrap: anywhere; }
.reader-heading { margin-bottom: 32px; }
.reader-heading h1 { font-family: var(--sans); font-size: clamp(24px, 3.3vw, 38px); line-height: 1.4; margin-bottom: 16px; color: var(--reader-text-strong); }
.reader-content > * + * { margin-top: 1.2em; }
.reader-content h2, .reader-content h3, .reader-content h4 { margin-top: 1.8em; }
.reader-content img, .reader-content video, .reader-content iframe { max-width: 100%; }
.reader-content a { color: var(--cyan); text-decoration: underline; text-underline-offset: 3px; }
.reader-content pre { overflow-x: auto; padding: 20px; background: var(--bg); border: 1px solid var(--glass-border); border-radius: 8px; }
.reader-content code { font-family: var(--mono); }
.reader-content ul, .reader-content ol { padding-left: 1.5em; }
.reader-content blockquote { padding: 16px 20px; border: 1px solid var(--glass-border); color: var(--text-dim); }
.reader-content table { display: block; overflow-x: auto; border-collapse: collapse; }
.reader-content th, .reader-content td { padding: 8px 14px; border: 1px solid var(--glass-border); }
html { scrollbar-color: var(--text-faint) var(--bg); }
.stat-value { font-variant-numeric: tabular-nums; }
/* 资源等待期间按正文宽度布局，但藏在跃迁层后，禁用交互。 */
body.reader-preparing .reader { display: flex; position: absolute; inset: 0 0 auto; visibility: hidden; pointer-events: none; }
.warp.loading .warp-bar i { width: 0; transition: width .18s ease-out; }
/* 到上限立即撤下遮罩，避免淡出又额外占用等待时间。 */
.warp.expired { transition: none; }
.warp-status { max-width: min(92vw, 780px); }
.warp-title, .warp-sub { overflow-wrap: anywhere; line-height: 1.8; }
.reader-load-notice { color: var(--text-dim); font-size: 13px; line-height: 1.8; margin-bottom: 28px; padding: 14px 18px; border: 1px solid var(--glass-border); border-radius: 8px; }
/* 子页与首页共用跃迁层：正文舱展开时收起列表主体，与首页 .flow 同一口径，
   否则搬运来的正文下方仍会露出被覆盖的列表。 */
body.reader-on .subpage-main { display: none; }
/* 归档行与星图卡片同样支持整卡跃迁，脚本可用时给出可点提示（无脚本不做虚假提示）。 */
html.has-js .latest-card, html.has-js .pg-card, html.has-js .archive-row { cursor: pointer; }
/* 本舱航线图：正文右上方的目录面板，沿用导航下拉同款玻璃、描边与 HUD 字系。 */
.reader-toc { position: fixed; top: 96px; right: 22px; z-index: 40; display: none; flex-direction: column; width: 216px; max-height: calc(100vh - 150px); border: 1px solid rgba(255, 255, 255, .1); border-radius: 12px; background: rgba(16, 19, 26, .82); -webkit-backdrop-filter: blur(22px) saturate(1.35); backdrop-filter: blur(22px) saturate(1.35); box-shadow: 0 18px 46px rgba(0, 0, 0, .5); font-family: var(--mono); }
/* 目录只在正文舱展开且标题足够时升起；窄屏侧边留白不足，不出图。 */
@media (min-width: 1280px) { body.reader-on .reader-toc.toc-ready { display: flex; } }
.reader-toc-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 12px 10px 14px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.reader-toc-titles { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.reader-toc-hud { font-family: var(--hud); font-weight: 700; font-size: 9.5px; letter-spacing: .14em; color: var(--cyan); }
.reader-toc-sub { font-size: 10px; letter-spacing: .22em; color: var(--text-faint); }
.reader-toc-toggle { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; flex-shrink: 0; border: 1px solid rgba(255, 255, 255, .12); border-radius: 7px; background: transparent; color: var(--text-dim); cursor: pointer; transition: color .2s ease, border-color .2s ease; }
.reader-toc-toggle:hover { color: var(--cyan); border-color: rgba(34, 211, 238, .45); }
.reader-toc-toggle svg { transition: transform .28s cubic-bezier(.22, 1, .36, 1); }
.reader-toc.is-collapsed .reader-toc-toggle svg { transform: rotate(-90deg); }
.reader-toc-list { position: relative; display: flex; flex-direction: column; gap: 2px; min-height: 0; padding: 10px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--text-faint) transparent; }
.reader-toc.is-collapsed .reader-toc-list { display: none; }
.toc-link { display: block; padding: 5px 10px; border-left: 1px solid rgba(255, 255, 255, .1); border-radius: 0 8px 8px 0; font-size: 12px; line-height: 1.6; color: var(--text-dim); overflow-wrap: anywhere; transition: color .2s ease, background .2s ease, border-color .2s ease; }
.toc-link:hover { color: var(--text); background: rgba(255, 255, 255, .05); }
.toc-link.is-active { color: var(--cyan); border-left-color: var(--cyan); background: rgba(34, 211, 238, .07); }
.toc-level-2 { padding-left: 20px; }
.toc-level-3 { padding-left: 32px; font-size: 11.5px; }
.toc-level-4 { padding-left: 44px; font-size: 11.5px; }
/* 目录锚点跳转与平滑滚动都要避开固定导航的高度。 */
.reader-content :is(h1, h2, h3, h4) { scroll-margin-top: 96px; }
/* 备案使用页脚原有色系；长号码在小屏换行，不改变观测终点主体。 */
.footer-filing { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 8px 20px; font-size: 12px; line-height: 1.8; letter-spacing: .04em; color: var(--text-dim); }
.outro-bottom > .footer-filing { flex-basis: 100%; }
.filing-link { display: inline-flex; align-items: center; justify-content: center; gap: 6px; max-width: 100%; overflow-wrap: anywhere; transition: color .2s ease; }
.filing-link:hover { color: var(--cyan); }
.filing-icon { width: 18px; height: 18px; flex-shrink: 0; object-fit: contain; }
.reader-filing { display: none; }
body.reader-on .reader-filing, body.subpage .reader-filing { display: block; position: relative; z-index: 2; padding: 20px 6vw 32px; background: rgba(4, 6, 11, .55); }
/* 版权条：站点标识、徽标、年份与备案同行自适应换行，沿用页脚终端字系。 */
.colophon { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 8px 20px; font-family: var(--mono); font-size: 10px; letter-spacing: .14em; color: var(--text-faint); }
.colophon + .footer-filing { margin-top: 12px; }
.reader-filing:not(:has(.colophon)):not(:has(.filing-link)) { display: none; }
/* 禁用脚本时，正文和页脚仍然可见、可导航。 */
html:not(.js) .reveal, html:not(.js) .post { opacity: 1; translate: none; filter: none; }
html:not(.js) .hero { position: relative; }
html:not(.js) .flow { margin-bottom: 0; }
html:not(.js) .outro { position: relative; min-height: 100vh; opacity: 1; visibility: visible; }
@media (max-width: 520px) {
  .nav-inner { padding-inline: 8px; gap: 8px; }
  .nav-brand { gap: 7px; min-width: 0; }
  .nav-title { max-width: 36vw; font-size: 14px; }
  .nav-badge { max-width: 30vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 8px; }
  .nav-download { font-size: 11px; padding: 9px 12px; }
  .hero { min-height: 760px; height: max(100svh, 760px); }
  .hero-content { padding: 80px 18px 70px; width: 100%; }
  .hero-eyebrow { max-width: 100%; font-size: 8px; gap: 5px; letter-spacing: .06em; padding: 8px 10px; }
  .hero-title { overflow-wrap: anywhere; }
  .hero-sub { margin-bottom: 26px; }
  .stat-card { padding: 18px 12px; min-width: 0; }
  .stat-label { font-size: 10px; gap: 4px; letter-spacing: 0; }
  .stat-label-code { font-size: 8px; letter-spacing: 0; }
  .hero-stats { margin-bottom: 26px; }
  .hero-cta { gap: 10px; }
  .hero-cta .btn { padding: 12px 10px; font-size: 11px; min-height: 44px; }
  .rec-tag { max-width: 24vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .reader-empty.reader-body { width: 90vw; }
}
/* 视口放不下正文舱保底宽度时改用百分比，避免横向溢出；小屏维持原有更宽的占比，
   封面模糊半径同步收小，避免窄屏糊成一片。 */
@media (max-width: 900px) {
  .reader-empty.reader-body { width: 88%; }
  .post-cover img { filter: blur(28px) saturate(1.2) brightness(.72); }
}
@media (max-width: 520px) {
  .reader-empty.reader-body { width: 90vw; }
}
/* 移动端调度台吸附后，保留固定导航的安全区域。 */
@media (max-width: 860px) {
  .hub-inner { padding-top: max(96px, 7.5vh); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .post, .reveal { opacity: 1; translate: none; filter: none; }
}

/* ═══════════════════════ 面板色板（新增组件统一取用，浅色配色只改这里） ═══════════════════════ */
:root {
  --panel: rgba(16, 19, 26, .82);
  --panel-soft: rgba(255, 255, 255, .045);
  --panel-border: rgba(255, 255, 255, .1);
  --panel-shadow: 0 18px 46px rgba(0, 0, 0, .5);
  --chip-bg: rgba(9, 13, 22, .5);
  --hairline: rgba(255, 255, 255, .08);
  /* 星尘画布配色：跃迁层（reader-warp.js）与摆渡层（page-transit.js）共用这一份变量，
     两个脚本都从计算样式读取，昼夜口径只在这里改，避免亮底上糊出一块黑板。 */
  --stardust-trail: rgba(2, 4, 9, .3);
  --stardust-hue-a: 150, 222, 252;
  --stardust-hue-b: 196, 168, 255;
  /* 列表遮蔽口径：列表容器（.hub / .articles）的毛玻璃若真的抬到粒子之上，它那层
     blur(10px) 起步的背板滤镜会把直径两像素上下的星点摊平成一片透明，星尘直接消失。
     因此层级不动，改由画布按列表矩形的范围模拟「被盖住」：落在其中的星点乘这里的亮度
     系数压暗，并按这里的柔化量往外散开一圈柔光——看起来被毛玻璃压住，又不会彻底不见。
     柔化走的是普通填充而非画布滤镜：整屏遮蔽时滤镜要逐颗星点做离屏合成，帧率撑不住。 */
  --stardust-veil-dim: .5;
  --stardust-veil-blur: 1.6px;
}

/* ═══════════════════════ 无障碍：跳转链接与仅脚本控件 ═══════════════════════ */
.skip-link {
  position: fixed;
  top: 12px;
  left: 50%;
  z-index: 200;
  translate: -50% -220%;
  padding: 10px 18px;
  border: 1px solid var(--panel-border);
  border-radius: 999px;
  background: var(--panel);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: var(--panel-shadow);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--text);
  transition: translate .28s cubic-bezier(.22, 1, .36, 1);
}
.skip-link:focus-visible { translate: -50% 0; }
/* 检索、配色与音频面板都依赖脚本，未启用脚本时不显示，避免留下按不动的控件。 */
html:not(.has-js) [data-search-open],
html:not(.has-js) [data-scheme-toggle],
html:not(.has-js) [data-audio-toggle] { display: none; }
/* 读屏播报区：复制与检索状态变化需要被感知，但不出现在视觉布局里。 */
.sr-live {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ═══════════════════════ 导航动作区：检索 / 配色切换 / 声场开关 ═══════════════════════ */
.nav-search, .nav-scheme, .nav-sfx {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 34px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 999px;
  background: rgba(255, 255, 255, .04);
  color: var(--text-dim);
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .08em;
  cursor: pointer;
  transition: color .25s ease, border-color .25s ease, background .25s ease;
}
.nav-search:hover, .nav-scheme:hover, .nav-sfx:hover { color: var(--cyan); border-color: rgba(34, 211, 238, .45); background: rgba(34, 211, 238, .08); }
.nav-scheme, .nav-sfx { width: 34px; padding: 0; }
/* 图标随当前配色切换：星夜显示月亮，白昼显示太阳。 */
.scheme-icon--sun { display: none; }
[data-scheme="light"] .scheme-icon--sun { display: block; }
[data-scheme="light"] .scheme-icon--moon { display: none; }
/* 音频频道图标随汇总档切换：默认（含任何异常状态）只露出静默档，任一通道放行才显示声波。
   只改颜色不改描边，hover 的圈线反馈仍然保留；青色在深色与浅色下都可读。 */
html:not([data-audio="on"]) .sfx-icon--on { display: none; }
html[data-audio="on"] .sfx-icon--off { display: none; }
html[data-audio="on"] .nav-sfx { color: var(--cyan); }

/* ═══════════════════════ 音频面板：界面音效 + 全局背景音乐 ═══════════════════════ */
/* 导航动作区的喇叭按钮与移动抽屉里的入口打开同一个面板，桌面下拉、窄屏浮在导航下方。 */
.nav-audio { position: relative; display: inline-flex; }
.audio-panel {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  z-index: 140;
  width: 272px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  border: 1px solid var(--panel-border);
  border-radius: 14px;
  background: var(--panel);
  -webkit-backdrop-filter: blur(22px) saturate(1.35);
  backdrop-filter: blur(22px) saturate(1.35);
  box-shadow: var(--panel-shadow);
  animation: nav-panel-in .3s cubic-bezier(.22, 1, .36, 1) both;
}
/* display: flex 会盖掉 hidden 的 UA 规则，必须显式收口。 */
.audio-panel[hidden] { display: none; }
.ap-head { display: flex; flex-direction: column; gap: 5px; padding-bottom: 9px; border-bottom: 1px solid var(--hairline); }
.ap-eyebrow { font-family: var(--mono); font-size: 9.5px; letter-spacing: .16em; color: var(--text-faint); }
.ap-state { font-family: var(--mono); font-size: 11px; letter-spacing: .04em; color: var(--text-dim); }
html[data-audio-ready="yes"] .ap-state { color: var(--cyan); }
.ap-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--panel-border);
  border-radius: 10px;
  background: var(--panel-soft);
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .06em;
  color: var(--text-dim);
  text-align: left;
  cursor: pointer;
  transition: color .22s ease, border-color .22s ease;
}
.ap-row:hover, .ap-row:focus-visible { color: var(--cyan); border-color: rgba(34, 211, 238, .42); }
.ap-row[aria-checked="true"] { color: var(--cyan); border-color: rgba(34, 211, 238, .34); }
.ap-label { flex: 1; min-width: 0; }
/* 开关轨道用 currentColor：深浅两套配色下都取当前档位的颜色，不写死色值。 */
.ap-track { position: relative; flex-shrink: 0; width: 34px; height: 18px; border: 1px solid currentColor; border-radius: 999px; opacity: .7; }
.ap-track i { position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: currentColor; transition: translate .24s cubic-bezier(.22, 1, .36, 1); }
.ap-row[aria-checked="true"] .ap-track i { translate: 16px 0; }
.ap-value { flex-shrink: 0; font-size: 10.5px; letter-spacing: .1em; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.ap-row[aria-checked="true"] .ap-value { color: var(--cyan); }
/* 音量行整体是可拖的滑块：不做成按钮，避免键盘与读屏把它当成开关。 */
.ap-row--slider { cursor: default; }
.ap-row--slider:hover { border-color: var(--panel-border); color: var(--text-dim); }
.ap-range { flex: 1; min-width: 0; height: 18px; margin: 0; accent-color: var(--cyan); cursor: pointer; }
.ap-note { margin: 0; font-size: 10.5px; line-height: 1.75; color: var(--text-faint); }

/* ═══════════════════════ 移动导航抽屉（details 保证无脚本可用） ═══════════════════════ */
.nav-drawer { display: none; position: relative; }
.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 12px;
  background: rgba(255, 255, 255, .04);
  color: var(--text-dim);
  cursor: pointer;
  list-style: none;
  transition: color .25s ease, border-color .25s ease;
}
.nav-toggle::-webkit-details-marker { display: none; }
.nav-toggle:hover, .nav-drawer[open] .nav-toggle { color: var(--cyan); border-color: rgba(34, 211, 238, .45); }
.nav-panel {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  z-index: 120;
  width: min(320px, calc(100vw - 24px));
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--panel-border);
  border-radius: 14px;
  background: var(--panel);
  -webkit-backdrop-filter: blur(22px) saturate(1.35);
  backdrop-filter: blur(22px) saturate(1.35);
  box-shadow: var(--panel-shadow);
}
/* 抽屉内的菜单改为纵向铺陈，子级直接展开，不依赖悬停。 */
.nav-panel .nav-links { display: flex; flex-direction: column; gap: 2px; margin-left: 0; }
.nav-panel .nav-item { flex-direction: column; align-items: stretch; }
.nav-panel .nav-item > .nav-link { justify-content: space-between; padding: 10px 12px; border-radius: 9px; }
.nav-panel .nav-link:hover, .nav-panel .nav-link:focus-visible { background: var(--panel-soft); }
.nav-panel .nav-item--branch::after { display: none; }
.nav-panel .nav-caret { display: none; }
.nav-panel .nav-dropdown {
  position: static;
  display: flex;
  min-width: 0;
  margin: 2px 0 6px;
  padding: 0 0 0 12px;
  border: 0;
  border-left: 1px solid var(--hairline);
  border-radius: 0;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
  opacity: 1;
  visibility: visible;
  transform: none;
}
.nav-panel-actions { display: flex; flex-direction: column; gap: 2px; padding-top: 10px; border-top: 1px solid var(--hairline); }
.nav-panel-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 12px;
  border: 1px solid var(--panel-border);
  border-radius: 9px;
  background: var(--panel-soft);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--text-dim);
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease;
}
.nav-panel-link:hover { color: var(--cyan); border-color: rgba(34, 211, 238, .45); }
/* 抽屉面板与检索层同一缓动口径：展开时轻微下落淡入，收起由 details 原生行为直接落位。 */
.nav-drawer[open] .nav-panel { animation: nav-panel-in .3s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes nav-panel-in { from { opacity: 0; translate: 0 -10px; } to { opacity: 1; translate: 0 0; } }
@media (max-width: 860px) {
  .nav-drawer { display: block; }
  .nav-search span { display: none; }
  .nav-search { width: 34px; padding: 0; }
}

/* ═══════════════════════ 子页骨架 ═══════════════════════ */
.subpage-main { padding-bottom: 40px; min-height: calc(100vh - 96px); }
.subpage-main > .stream-head { padding-top: max(112px, 12vh); flex-wrap: wrap; }
.subpage-heading { min-width: 0; }
.subpage-summary { margin-top: 12px; max-width: 66ch; font-size: 13.5px; line-height: 1.95; color: var(--text-dim); overflow-wrap: anywhere; }
.subpage-meta { padding-bottom: 0; white-space: normal; }
/* 子页没有首页那套入场观察器，卡片必须直接可见，不依赖脚本。 */
body.subpage .post, body.subpage .pg-card { opacity: 1; translate: none; filter: none; }
/* 整卡点击由脚本提供，未启用脚本时不做虚假的可点提示。 */
.post { cursor: default; }
html.has-js .post { cursor: pointer; }
.post-body { z-index: 3; }

/* ═══════════════════════ 分页 ═══════════════════════ */
.pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 26px 6vw 10px;
  border-top: 1px solid var(--hairline);
}
.pager-count { display: flex; align-items: center; gap: 12px; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.pager-count i { width: 4px; height: 4px; background: var(--cyan); transform: rotate(45deg); box-shadow: 0 0 6px var(--cyan); }
.pager-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pager-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border: 1px solid var(--panel-border);
  border-radius: 999px;
  background: var(--panel-soft);
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .08em;
  color: var(--text-dim);
  transition: color .25s ease, border-color .25s ease, background .25s ease;
}
a.pager-btn:hover { color: var(--cyan); border-color: rgba(34, 211, 238, .45); background: rgba(34, 211, 238, .08); }
.pager-btn--off { opacity: .42; cursor: not-allowed; }
.pager-pages { display: flex; align-items: center; gap: 6px; list-style: none; }
.pager-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px; height: 34px;
  padding: 0 9px;
  border: 1px solid var(--panel-border);
  border-radius: 10px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
  transition: color .2s ease, border-color .2s ease;
}
a.pager-num:hover { color: var(--cyan); border-color: rgba(34, 211, 238, .45); }
.pager-num--current {
  color: #05070d;
  border-color: transparent;
  background: linear-gradient(100deg, var(--cyan), var(--violet));
  font-weight: 700;
}

/* ═══════════════════════ 星域索引 / 分类树 ═══════════════════════ */
.index-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 18px;
  padding: 8px 6vw 24px;
}
.index-card {
  padding: 20px;
  border: 1px solid var(--panel-border);
  border-radius: 14px;
  background: var(--panel-soft);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  transition: border-color .28s ease, background .28s ease, transform .28s ease;
}
.index-card:hover { border-color: rgba(34, 211, 238, .34); background: rgba(34, 211, 238, .05); transform: translateY(-2px); }
.ic-main { display: flex; flex-direction: column; gap: 8px; }
.ic-hud { font-family: var(--hud); font-weight: 700; font-size: 9.5px; letter-spacing: .16em; color: var(--cyan); }
.ic-name { font-family: var(--display); font-size: 20px; font-weight: 600; letter-spacing: .01em; color: var(--text); overflow-wrap: anywhere; }
.ic-main:hover .ic-name { color: var(--cyan); }
.ic-desc { font-size: 12.5px; line-height: 1.85; color: var(--text-dim); overflow-wrap: anywhere; }
.ic-count { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.cat-tree { list-style: none; margin: 16px 0 0; padding: 12px 0 0 14px; border-left: 1px solid var(--hairline); display: flex; flex-direction: column; gap: 10px; }
.cat-tree .cat-tree { margin-top: 8px; padding-top: 8px; }
.cat-node { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--text-dim); transition: color .2s ease; }
.cat-node:hover { color: var(--cyan); }
.cat-name { overflow-wrap: anywhere; }
.cat-count {
  flex-shrink: 0;
  padding: 1px 9px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}
.cat-desc { margin-top: 4px; font-size: 12px; line-height: 1.75; color: var(--text-faint); overflow-wrap: anywhere; }

/* ═══════════════════════ 信标矩阵 ═══════════════════════ */
.tag-cloud { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; padding: 8px 6vw 24px; }
.tag-cell {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 15px;
  border: 1px solid var(--panel-border);
  border-radius: 999px;
  background: var(--panel-soft);
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-dim);
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.tag-cell:hover { color: var(--cyan); border-color: rgba(34, 211, 238, .45); background: rgba(34, 211, 238, .08); }
.tc-hash { color: var(--cyan); opacity: .8; }
.tc-name { max-width: 46vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tc-count { padding-left: 8px; border-left: 1px solid var(--hairline); font-size: 10.5px; color: var(--text-faint); font-variant-numeric: tabular-nums; }

/* ═══════════════════════ 归档舱 ═══════════════════════ */
.archive-tree { display: flex; flex-direction: column; gap: 36px; padding: 8px 6vw 24px; }
.ay-title { display: flex; align-items: baseline; gap: 12px; }
.ay-num {
  font-family: var(--hud);
  font-weight: 800;
  font-size: clamp(30px, 4.6vw, 48px);
  line-height: 1;
  letter-spacing: .04em;
  background: linear-gradient(100deg, var(--text) 15%, var(--cyan) 60%, var(--violet) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-variant-numeric: tabular-nums;
}
.ay-label { font-family: var(--hud); font-size: 10px; letter-spacing: .2em; color: var(--text-faint); }
.archive-month { margin-top: 18px; padding-left: 16px; border-left: 1px solid var(--hairline); }
.am-title { display: flex; align-items: center; gap: 9px; font-family: var(--mono); font-size: 12px; letter-spacing: .1em; color: var(--text-dim); }
.am-month { font-family: var(--hud); font-weight: 700; font-size: 14px; letter-spacing: .12em; color: var(--cyan); }
.am-count { color: var(--text-faint); font-variant-numeric: tabular-nums; }
.archive-list { list-style: none; margin-top: 10px; display: flex; flex-direction: column; }
.archive-row { display: flex; align-items: center; gap: 14px; padding: 9px 12px; border-radius: 10px; transition: background .25s ease; }
.archive-row:hover { background: var(--panel-soft); }
.ar-main { display: flex; align-items: baseline; gap: 14px; flex: 1; min-width: 0; }
.ar-date { flex-shrink: 0; font-family: var(--mono); font-size: 11px; letter-spacing: .08em; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.ar-title { font-size: 14.5px; line-height: 1.7; color: var(--text); overflow-wrap: anywhere; }
.ar-main:hover .ar-title { color: var(--cyan); }
.ar-tag {
  flex-shrink: 0;
  max-width: 34vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 2px 11px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--text-dim);
  transition: color .2s ease, border-color .2s ease;
}
.ar-tag:hover { color: var(--cyan); border-color: rgba(34, 211, 238, .42); }

/* ═══════════════════════ 观测员档案 ═══════════════════════ */
.author-panel { display: flex; align-items: flex-start; gap: 22px; padding: max(112px, 12vh) 6vw 26px; }
.author-avatar {
  flex-shrink: 0;
  width: 76px; height: 76px;
  border: 1px solid var(--panel-border);
  border-radius: 50%;
  object-fit: cover;
  box-shadow: var(--panel-shadow);
  background: var(--chip-bg);
}
.author-panel .subpage-heading { flex: 1; min-width: 0; }
.author-panel .sh-title { overflow-wrap: anywhere; }

/* ═══════════════════════ 友情星港 ═══════════════════════ */
.link-groups { display: flex; flex-direction: column; gap: 32px; padding: 8px 6vw 24px; }
.lg-title { display: flex; align-items: center; gap: 12px; font-family: var(--display); font-size: 19px; font-weight: 600; color: var(--text); }
.lg-hud { font-family: var(--hud); font-weight: 700; font-size: 9.5px; letter-spacing: .16em; color: var(--cyan); }
.lg-count { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.link-grid {
  list-style: none;
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
  gap: 14px;
}
.link-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 16px;
  border: 1px solid var(--panel-border);
  border-radius: 14px;
  background: var(--panel-soft);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  transition: border-color .25s ease, background .25s ease, transform .25s ease;
}
.link-card:hover { border-color: rgba(34, 211, 238, .38); background: rgba(34, 211, 238, .06); transform: translateY(-2px); }
.lk-logo {
  position: relative;
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  flex-shrink: 0;
  overflow: hidden;
  border: 1px solid var(--panel-border);
  border-radius: 12px;
  background: var(--chip-bg);
}
.lk-logo img { width: 100%; height: 100%; object-fit: cover; }
.lk-monogram { font-family: var(--display); font-size: 18px; color: var(--cyan); }
.lk-body { flex: 1; min-width: 0; }
.lk-name { display: block; font-size: 14px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.link-card:hover .lk-name { color: var(--cyan); }
.lk-desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.75;
  color: var(--text-dim);
  overflow-wrap: anywhere;
}
.lk-arrow { flex-shrink: 0; color: var(--text-faint); transition: color .25s ease, transform .25s ease; }
.link-card:hover .lk-arrow { color: var(--cyan); transform: translate(2px, -2px); }

/* ═══════════════════════ 错误页 ═══════════════════════ */
.subpage--error .subpage-main { padding-top: max(96px, 10vh); }
.error-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  min-height: 46vh;
  justify-content: center;
  padding: 32px 6vw 48px;
}
.ec-hud { font-family: var(--hud); font-weight: 700; font-size: 10.5px; letter-spacing: .2em; color: var(--cyan); }
.ec-code {
  font-family: var(--hud);
  font-weight: 800;
  font-size: clamp(64px, 15vw, 138px);
  line-height: .95;
  letter-spacing: .02em;
  background: linear-gradient(115deg, var(--text) 12%, var(--cyan) 58%, var(--violet) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-variant-numeric: tabular-nums;
}
.ec-title { font-family: var(--display); font-size: clamp(22px, 3.4vw, 34px); font-weight: 700; line-height: 1.45; color: var(--text); }
.ec-sub { max-width: 64ch; font-size: 14px; line-height: 2; color: var(--text-dim); }
.ec-reason {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  padding: 5px 13px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-faint);
  overflow-wrap: anywhere;
}
.ec-reason-label { letter-spacing: .16em; color: var(--cyan); }
.ec-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }

/* ═══════════════════════ 正文舱增强：元信息 / 星域信标 / 封面 / 版权 / 分享 / 上下篇 ═══════════════════════ */
.reader-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-bottom: 18px; }
.rm-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  border: 1px solid var(--glass-border);
  border-left: 2px solid rgba(34, 211, 238, .5);
  border-radius: 5px;
  background: var(--chip-bg);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}
.rm-chip em {
  font-style: normal;
  font-size: 8.5px;
  letter-spacing: .16em;
  color: var(--text-faint);
  padding-right: 6px;
  margin-right: 2px;
  border-right: 1px solid rgba(255, 255, 255, .12);
}
.rm-chip svg { color: var(--cyan); opacity: .85; flex-shrink: 0; }
.rm-avatar { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.reader-taxonomy {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 26px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--glass-border);
}
.rt-group { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rt-group em { font-style: normal; font-family: var(--mono); font-size: 10px; letter-spacing: .16em; color: var(--text-faint); }
.rt-link {
  padding: 4px 12px;
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--text-dim);
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.rt-link:hover { color: var(--cyan); border-color: rgba(34, 211, 238, .45); background: rgba(34, 211, 238, .08); }
.reader-cover { margin: 0 0 28px; overflow: hidden; border: 1px solid var(--glass-border); border-radius: 12px; background: var(--bg); }
.reader-cover img { display: block; width: 100%; height: auto; max-height: 46vh; object-fit: cover; }
.reader-copyright {
  margin-top: 34px;
  padding: 16px 18px;
  border: 1px solid var(--glass-border);
  border-left: 2px solid rgba(167, 139, 250, .6);
  border-radius: 8px;
  background: var(--panel-soft);
}
.rc-hud { display: block; margin-bottom: 8px; font-family: var(--hud); font-weight: 700; font-size: 9.5px; letter-spacing: .16em; color: var(--violet); }
.reader-copyright p { font-size: 12.5px; line-height: 1.95; color: var(--text-dim); overflow-wrap: anywhere; }
.rc-line { margin-top: 6px; }
.rc-url { font-family: var(--mono); font-size: 11.5px; color: var(--cyan); }
.reader-share { margin-top: 22px; }
.rs-hud { display: block; margin-bottom: 10px; font-family: var(--hud); font-weight: 700; font-size: 9.5px; letter-spacing: .16em; color: var(--cyan); }
.rs-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.rs-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  background: var(--panel-soft);
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .06em;
  color: var(--text-dim);
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.rs-btn:hover { color: var(--cyan); border-color: rgba(34, 211, 238, .45); background: rgba(34, 211, 238, .08); }
/* display 会覆盖 hidden 属性的 UA 样式，不支持系统分享的环境必须真正隐藏按钮。 */
.rs-btn[hidden] { display: none; }
.rs-status { min-height: 1.5em; margin-top: 10px; font-family: var(--mono); font-size: 11px; line-height: 1.7; color: var(--text-faint); overflow-wrap: anywhere; }
.reader-cursor {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 12px;
  margin-top: 30px;
  padding-top: 26px;
  border-top: 1px solid var(--glass-border);
}
.rc-nav {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  background: var(--panel-soft);
  transition: border-color .25s ease, background .25s ease;
}
a.rc-nav:hover { border-color: rgba(34, 211, 238, .4); background: rgba(34, 211, 238, .06); }
.rc-nav--next { align-items: flex-end; text-align: right; }
.rc-nav--off { opacity: .45; cursor: not-allowed; }
.rc-dir { font-family: var(--mono); font-size: 10px; letter-spacing: .16em; color: var(--cyan); }
.rc-nav--off .rc-dir { color: var(--text-faint); }
.rc-name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--text);
  overflow-wrap: anywhere;
}

/* ═══════════════════════ 代码工具条（语言标记 + 复制） ═══════════════════════
   以胶囊工具条前置在代码块上方，不包裹原 pre：高亮插件会接管并给它不认识的
   外层容器加内联 display:none !important，包裹会导致整块代码不可见。 */
.code-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: fit-content;
  min-width: min(240px, 100%);
  max-width: 100%;
  margin: 0 0 8px;
  padding: 4px 5px 4px 12px;
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  background: var(--chip-bg);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.code-lang { font-family: var(--hud); font-weight: 700; font-size: 9px; letter-spacing: .18em; color: var(--text-faint); }
.code-copy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  background: transparent;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .06em;
  color: var(--text-dim);
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease;
}
.code-copy:hover { color: var(--cyan); border-color: rgba(34, 211, 238, .45); }
/* 推荐行改为 div 后，溢出行的 hidden 属性同样需要显式守卫（display 会覆盖 UA 样式）。 */
.rec-row[hidden] { display: none; }
/* 推荐行改为 div 后，无脚本时不做虚假可点提示。 */
.rec-row { cursor: default; }
html.has-js .rec-row { cursor: pointer; }

/* ═══════════════════════ 星图网格版式 ═══════════════════════ */
.post-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
  gap: 18px;
  padding: 20px 6vw 8px;
}
.pg-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--panel-border);
  border-radius: 14px;
  background: var(--panel-soft);
  transition: border-color .28s ease, background .28s ease, transform .28s ease;
}
.pg-card:hover { border-color: rgba(34, 211, 238, .36); background: rgba(34, 211, 238, .05); transform: translateY(-3px); }
.pg-cover { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--chip-bg); }
.pg-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.22, 1, .36, 1); }
.pg-card:hover .pg-cover img { transform: scale(1.04); }
.pg-index {
  position: absolute;
  top: 10px; left: 10px;
  padding: 2px 9px;
  border: 1px solid var(--panel-border);
  border-radius: 999px;
  background: rgba(4, 6, 11, .62);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
  color: var(--text-dim);
}
.pg-body { display: flex; flex-direction: column; gap: 9px; padding: 16px 18px 18px; }
.pg-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pg-tag {
  max-width: 62%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 2px 10px;
  border: 1px solid rgba(34, 211, 238, .3);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  color: #67e8f9;
}
a.pg-tag:hover { background: rgba(34, 211, 238, .12); }
.pg-date { font-family: var(--mono); font-size: 10.5px; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.pg-title { font-family: var(--sans); font-size: 16.5px; font-weight: 600; line-height: 1.55; }
.pg-card:hover .pg-title { color: var(--cyan); }
.pg-excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 12.5px;
  line-height: 1.85;
  color: var(--text-dim);
  overflow-wrap: anywhere;
}
.pg-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--hairline);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .1em;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}
.pg-meta i { width: 4px; height: 4px; background: var(--cyan); transform: rotate(45deg); opacity: .7; }

/* ═══════════════════════ 回到顶部 ═══════════════════════ */
.to-top {
  position: fixed;
  right: 22px; bottom: 26px;
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 16px;
  border: 1px solid var(--panel-border);
  border-radius: 999px;
  background: var(--panel);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: var(--panel-shadow);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--text-dim);
  cursor: pointer;
  transition: color .25s ease, border-color .25s ease, transform .25s ease;
}
.to-top:hover { color: var(--cyan); border-color: rgba(34, 211, 238, .45); transform: translateY(-2px); }
.to-top[hidden] { display: none; }

/* ═══════════════════════ 信号检索层 ═══════════════════════ */
.search-layer { position: fixed; inset: 0; z-index: 120; display: flex; align-items: flex-start; justify-content: center; padding: 12vh 20px 20px; }
.search-layer[hidden] { display: none; }
.search-backdrop { position: absolute; inset: 0; background: rgba(3, 5, 10, .66); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.search-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(680px, 100%);
  max-height: min(72vh, 620px);
  overflow: hidden;
  border: 1px solid var(--panel-border);
  border-radius: 16px;
  background: var(--panel);
  -webkit-backdrop-filter: blur(26px) saturate(1.35);
  backdrop-filter: blur(26px) saturate(1.35);
  box-shadow: var(--panel-shadow);
}
body.search-open { overflow: hidden; }
.search-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 18px 12px; }
.search-head-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.search-hud { font-family: var(--hud); font-weight: 700; font-size: 10px; letter-spacing: .16em; color: var(--cyan); }
.search-sub { font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; color: var(--text-faint); }
.search-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  flex-shrink: 0;
  border: 1px solid var(--panel-border);
  border-radius: 9px;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease;
}
.search-close:hover { color: var(--cyan); border-color: rgba(34, 211, 238, .45); }
.search-field {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 18px 12px;
  padding: 11px 14px;
  border: 1px solid var(--panel-border);
  border-radius: 12px;
  background: rgba(0, 0, 0, .22);
}
.search-field > svg { flex-shrink: 0; color: var(--cyan); }
.search-input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text); font-family: var(--sans); font-size: 14px; }
.search-input::placeholder { color: var(--text-faint); }
.search-input::-webkit-search-cancel-button { -webkit-appearance: none; }
.search-kbd { padding: 2px 6px; border: 1px solid var(--panel-border); border-radius: 5px; font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; color: var(--text-faint); }
.search-status { padding: 0 18px 10px; font-family: var(--mono); font-size: 11px; line-height: 1.75; color: var(--text-dim); overflow-wrap: anywhere; }
.search-results {
  display: flex;
  flex-direction: column;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0 10px 12px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--text-faint) transparent;
}
.search-link { display: flex; flex-direction: column; gap: 5px; padding: 11px 12px; border: 1px solid transparent; border-radius: 10px; transition: background .2s ease, border-color .2s ease; }
.search-link:hover, .search-link:focus-visible { background: rgba(34, 211, 238, .08); border-color: rgba(34, 211, 238, .28); }
.si-type { font-family: var(--hud); font-weight: 700; font-size: 9px; letter-spacing: .16em; color: var(--cyan); }
.si-title { font-size: 14px; line-height: 1.6; color: var(--text); overflow-wrap: anywhere; }
.si-desc { font-size: 12px; line-height: 1.75; color: var(--text-dim); overflow-wrap: anywhere; }
.search-mark { padding: 0 2px; border-radius: 3px; background: rgba(34, 211, 238, .22); color: inherit; }
/* 检索层开合与整页摆渡同一缓动口径：浮层升起时轻微上移淡入，收起由 hidden 直接落位。 */
.search-layer:not([hidden]) { animation: search-in .3s ease both; }
.search-layer:not([hidden]) .search-panel { animation: search-panel-in .38s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes search-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes search-panel-in { from { opacity: 0; translate: 0 18px; scale: .985; } to { opacity: 1; translate: 0 0; scale: 1; } }

/* ═══════════════════════ 页面摆渡过渡（整页导航统一动效） ═══════════════════════ */
/* 与 .warp 的分工：进入文章仍走跃迁层（reader-warp.js），这里只覆盖"换页"的离场与进场，
   标记全站只有 modules/transit.html 一份。覆盖层默认隐藏：离场由脚本挂 .on 淡入，
   进场由 head 内联脚本预挂 html.transit-arrive 让覆盖层自首帧全亮，再交给脚本显影。 */
.transit {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #020409;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
}
.transit.on { opacity: 1; visibility: visible; }
.transit-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.transit-status { position: relative; z-index: 1; max-width: min(92vw, 780px); text-align: center; text-shadow: 0 2px 18px rgba(0, 0, 0, .9); }
.transit-title { font-family: var(--hud); font-weight: 700; font-size: 12px; letter-spacing: .26em; color: #67e8f9; margin-bottom: 10px; overflow-wrap: anywhere; line-height: 1.8; animation: pulse 1.4s ease-in-out infinite; }
.transit-sub { font-family: var(--mono); font-size: 10.5px; letter-spacing: .18em; color: var(--text-dim); margin-bottom: 20px; overflow-wrap: anywhere; line-height: 1.8; }
.transit-bar { width: 200px; height: 2px; margin: 0 auto; background: rgba(255, 255, 255, .12); border-radius: 2px; overflow: hidden; }
.transit-bar i { display: block; width: 0; height: 100%; background: linear-gradient(90deg, var(--cyan), var(--violet)); box-shadow: 0 0 12px rgba(34, 211, 238, .8); }
/* 离场：摆渡条快速充能，比正文跃迁的门禁更轻快。 */
.transit.on .transit-bar i { width: 100%; transition: width .6s cubic-bezier(.3, .6, .4, 1); }
/* 进场预置：覆盖层无过渡全亮，进度条停在满格，导航与主体内容先隐去等待显影。 */
html.transit-arrive .transit { opacity: 1; visibility: visible; transition: none; }
html.transit-arrive .transit-bar i { width: 100%; transition: none; }
html.transit-arrive #nav, html.transit-arrive #main { opacity: 0; }
/* 显影阶段：覆盖层淡出、满格摆渡条随层一起退场，内容按各自关键帧浮出。
   进度条不再退回零：收尾若倒退，整段过渡看起来像被倒放了一遍。 */
html.transit-landed .transit { opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility .5s ease; }
html.transit-landed .transit-bar i { width: 100%; transition: none; }
@keyframes transit-land-nav { from { opacity: 0; translate: 0 -14px; } to { opacity: 1; translate: 0 0; } }
@keyframes transit-land-main { from { opacity: 0; translate: 0 26px; } to { opacity: 1; translate: 0 0; } }
html.transit-landed #nav { animation: transit-land-nav .5s cubic-bezier(.22, 1, .36, 1) both; }
html.transit-landed #main { animation: transit-land-main .62s cubic-bezier(.22, 1, .36, 1) .06s both; }

/* ═══════════════════════ 全局粒子流（全站缓慢流动的星尘） ═══════════════════════ */
/* 画布铺满视口，层级落在「背景之上、列表之下」这一档：底图、压暗罩与封面模糊层（-4 ~ -1）
   在它下面，带毛玻璃背板的列表区（.hub / .articles）在它上面，所以下滑进列表之后星点看起来
   是被列表的背板盖住的。列表的背板滤镜会摊平细小星点，观感因此由画布按列表矩形模拟，
   参数取 --stardust-veil-dim / --stardust-veil-blur（标记写在列表容器上的 data-particle-veil）。
   正文舱是另一套口径：内容容器抬到粒子之上、舱体底板留在粒子之下，文章页整页都能看见星尘
   （底板若在上面就整屏看不到），详见下面 reading 那几条。三套覆盖层仍在最上层：
   装载门禁 290，跃迁层与摆渡层 300。画布不接收指针事件。 */
.particle-field { position: fixed; inset: 0; z-index: 240; width: 100%; height: 100%; pointer-events: none; }
/* 正文舱底板留在粒子之下：文章页整页都是正文舱，底板若压在粒子之上就整屏看不到星尘。
   正文内容容器（.reader-body）抬到粒子之上——它是 .reader 的 flex item，z-index 无需定位即生效，
   因此不会成为新的包含块，正文里任何绝对定位元素仍按原样相对 .reader 定位。 */
body.reader-on .reader-body { z-index: 261; background: transparent; }
body.reader-on .reader-back { z-index: 262; }
body.reader-on .reader-toc { z-index: 265; }
/* 正文容器原来那层半透明底板搬到舱体上：阅读对比度不变，底板也不再压住粒子。
   数值按两层叠加的等效不透明度取（深色 .55 + .35 ≈ .71；有封面 .2 + .35 ≈ .48）。 */
body.reader-on .reader { background: rgba(4, 6, 11, .71); }
body.reader-on:has(.post-cover:not([hidden])) .reader { background: rgba(4, 6, 11, .48); }

/* ═══════════════════════ 全局装载门禁（刷新与直达进入的装载覆盖层） ═══════════════════════ */
/* 标记里同时带 warp 类：底色、HUD 字号与进度条直接复用跃迁层口径，白昼那套覆盖同样生效。
   这里只改层级与节奏——290 低于跃迁层与摆渡层，站内摆渡进场时摆渡层在上、淡出后由装载层接力；
   进度条由脚本按已落地信号数驱动，不套用跃迁层的 1.15s 满格充能。 */
.boot { z-index: 290; }
.boot .warp-bar i { transition: width .3s ease-out; }
html.boot-arrive .boot, .boot.boot-on { opacity: 1; visibility: visible; }
html.boot-arrive .boot { transition: none; }
.boot.boot-landed { opacity: 0; visibility: hidden; transition: opacity .45s ease, visibility .45s ease; }
/* 覆盖层元素解析出来之前先给根元素铺底色，首帧不会闪出一条亮带。 */
html.boot-arrive { background: var(--bg); }
/* 超时说明：顶部悬浮提示条，可手动关闭，时限在 site-boot.js 里（约 15 秒后自动退场）。 */
.boot-notice { position: fixed; top: 78px; left: 50%; z-index: 295; display: flex; align-items: center; gap: 10px; max-width: min(92vw, 760px); padding: 12px 14px 12px 16px; border: 1px solid var(--panel-border); border-radius: 12px; background: var(--panel); -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3); box-shadow: var(--panel-shadow); font-family: var(--mono); font-size: 12px; line-height: 1.7; color: var(--text-dim); transform: translateX(-50%); animation: boot-notice-in .4s cubic-bezier(.22, 1, .36, 1); }
.boot-notice.off { opacity: 0; transform: translateX(-50%) translateY(-8px); transition: opacity .45s ease, transform .45s ease; }
.boot-notice .bn-code { flex-shrink: 0; font-family: var(--hud); font-weight: 700; font-size: 10.5px; letter-spacing: .18em; color: var(--cyan); white-space: nowrap; }
.boot-notice .bn-text { min-width: 0; }
.boot-notice .bn-close { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border: 1px solid var(--panel-border); border-radius: 7px; background: transparent; color: var(--text-dim); font-size: 14px; line-height: 1; cursor: pointer; transition: color .2s ease, border-color .2s ease; }
.boot-notice .bn-close:hover { color: var(--cyan); border-color: rgba(34, 211, 238, .45); }
@keyframes boot-notice-in { from { opacity: 0; transform: translateX(-50%) translateY(-10px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }

/* ═══════════════════════ 白昼配色（追加覆盖，不改参考前缀） ═══════════════════════ */
[data-scheme="light"] {
  --bg: #eef1f7;
  --cyan: #0e7490;
  --cyan-deep: #155e75;
  --violet: #6d28d9;
  --text: #131a2a;
  --text-dim: #3d4759;
  --text-faint: #6b7488;
  --glass: rgba(255, 255, 255, .6);
  --glass-border: rgba(19, 26, 42, .14);
  --panel: rgba(255, 255, 255, .88);
  --panel-soft: rgba(255, 255, 255, .58);
  --panel-border: rgba(19, 26, 42, .14);
  --panel-shadow: 0 18px 46px rgba(19, 26, 42, .16);
  --chip-bg: rgba(255, 255, 255, .66);
  --hairline: rgba(19, 26, 42, .12);
  --reader-text: #2c3444;
  --reader-text-strong: #1b2231;
  /* 白昼星尘：浅雾拖尾配深蓝/紫星尘，压在浅色覆盖层上仍然看得见。 */
  --stardust-trail: rgba(228, 233, 242, .34);
  --stardust-hue-a: 37, 99, 235;
  --stardust-hue-b: 109, 74, 226;
  /* 白昼列表是浅色半透底，深色星点被浅底提亮后对比度只剩四成上下，因此压得比深夜轻一点、
     糊得更开一点：既看得出「被列表盖住了」，也不会在白底上留下一层洗不掉的灰点。 */
  --stardust-veil-dim: .55;
  --stardust-veil-blur: 2.4px;
}
[data-scheme="light"] body { background: #eef1f7; color: #131a2a; }
[data-scheme="light"] ::selection { background: rgba(14, 116, 144, .22); }
/* 底图与压暗罩改为提亮，保证浅色底上的正文对比度。 */
[data-scheme="light"] .bg-image { opacity: .34; }
[data-scheme="light"] body::after {
  background:
    radial-gradient(ellipse 80% 60% at 50% 20%, rgba(255, 255, 255, .55), transparent 70%),
    linear-gradient(180deg, rgba(238, 241, 247, .74) 0%, rgba(238, 241, 247, .66) 45%, rgba(238, 241, 247, .8) 100%);
}
[data-scheme="light"] .post-cover img { filter: blur(46px) saturate(1.05) brightness(1.28); }
[data-scheme="light"] .post-cover::after { background: radial-gradient(130% 100% at 50% 0%, rgba(238, 241, 247, .42) 0%, rgba(238, 241, 247, .7) 55%, rgba(238, 241, 247, .84) 100%); }
[data-scheme="light"] .nav--scrolled .nav-inner { background: rgba(255, 255, 255, .84); border-color: rgba(19, 26, 42, .12); box-shadow: 0 14px 44px rgba(19, 26, 42, .14); }
[data-scheme="light"] .nav-dropdown, [data-scheme="light"] .reader-toc { background: rgba(255, 255, 255, .94); border-color: rgba(19, 26, 42, .14); box-shadow: 0 18px 46px rgba(19, 26, 42, .18); }
[data-scheme="light"] .nav-dropdown-link:hover, [data-scheme="light"] .nav-dropdown-link:focus-visible { background: rgba(19, 26, 42, .06); }
[data-scheme="light"] .nav-github, [data-scheme="light"] .nav-download,
[data-scheme="light"] .nav-search, [data-scheme="light"] .nav-scheme, [data-scheme="light"] .nav-sfx,
[data-scheme="light"] .nav-toggle { border-color: rgba(19, 26, 42, .16); background: rgba(255, 255, 255, .6); }
[data-scheme="light"] .hero-eyebrow { background: rgba(255, 255, 255, .68); border-color: rgba(19, 26, 42, .12); color: #3d4759; }
[data-scheme="light"] .stat-card { background: rgba(255, 255, 255, .66); border-color: rgba(19, 26, 42, .12); box-shadow: 0 18px 40px rgba(19, 26, 42, .1); }
[data-scheme="light"] .articles, [data-scheme="light"] .hub { background: rgba(255, 255, 255, .6); }
[data-scheme="light"] .stream, [data-scheme="light"] .post, [data-scheme="light"] .hub-block { border-color: rgba(19, 26, 42, .1); }
[data-scheme="light"] .post:hover { background: rgba(19, 26, 42, .04); }
[data-scheme="light"] .post-title, [data-scheme="light"] .post-excerpt,
[data-scheme="light"] .sh-title, [data-scheme="light"] .hero-title, [data-scheme="light"] .hub-sub { text-shadow: none; }
[data-scheme="light"] .post-excerpt { color: #3d4759; }
[data-scheme="light"] .post-date, [data-scheme="light"] .post-index { color: #6b7488; text-shadow: none; }
[data-scheme="light"] .post-tag { color: #0e7490; background: linear-gradient(100deg, rgba(14, 116, 144, .14), rgba(109, 40, 217, .1)); border-color: rgba(14, 116, 144, .3); }
[data-scheme="light"] .post:hover .post-tag { color: #155e75; background: linear-gradient(100deg, rgba(14, 116, 144, .2), rgba(109, 40, 217, .14)); }
[data-scheme="light"] .pm-chip { background: rgba(255, 255, 255, .7); border-color: rgba(19, 26, 42, .12); color: #3d4759; text-shadow: none; }
[data-scheme="light"] .pm-chip em { border-right-color: rgba(19, 26, 42, .16); }
[data-scheme="light"] .latest-card { border-color: rgba(19, 26, 42, .12); background: rgba(255, 255, 255, .5); }
[data-scheme="light"] .rec-row { border-color: rgba(19, 26, 42, .1); }
[data-scheme="light"] .rec-row:hover { background: rgba(14, 116, 144, .08); }
[data-scheme="light"] .batch-btn { border-color: rgba(19, 26, 42, .16); background: rgba(255, 255, 255, .66); color: #3d4759; }
[data-scheme="light"] .btn--ghost { color: #131a2a; border-color: rgba(19, 26, 42, .22); background: rgba(255, 255, 255, .5); }
[data-scheme="light"] .btn--ghost:hover { border-color: rgba(14, 116, 144, .5); }
[data-scheme="light"] .outro {
  background:
    radial-gradient(ellipse 60% 45% at 50% 42%, rgba(14, 116, 144, .14), transparent 70%),
    radial-gradient(ellipse 50% 40% at 60% 65%, rgba(109, 40, 217, .1), transparent 70%),
    rgba(255, 255, 255, .56);
}
/* 渐变文字只能用 background-image 改色：background 简写会把 background-clip 重置回 border-box，
   标题会从文字渐变换成一块渐变实心方块。同族规则（归档年号、错误页代码）一起遵守。 */
[data-scheme="light"] .outro-title { background-image: linear-gradient(100deg, #131a2a 18%, #0e7490 60%, #6d28d9 100%); }
[data-scheme="light"] .outro-bottom { border-color: rgba(19, 26, 42, .12); color: #6b7488; }
[data-scheme="light"] .outro-sub, [data-scheme="light"] .footer-filing { color: #3d4759; }
/* 紧凑版权条与备案行同处一条页脚，浅色下取同一档正文深度。 */
[data-scheme="light"] .colophon { color: #3d4759; }
/* 正文舱与页脚底色必须带上 body.reader-on / body.subpage 前缀：参考里那两条基础规则特异性更高，
   只用 [data-scheme="light"] .reader / .reader-filing 会被它们压过，浅色站点仍露出一条深色底板。 */
[data-scheme="light"] body.reader-on .reader { background: rgba(255, 255, 255, .87); }
[data-scheme="light"] body.reader-on:has(.post-cover:not([hidden])) .reader { background: rgba(255, 255, 255, .8); }
[data-scheme="light"] .reader-empty { background: rgba(255, 255, 255, .7); border-color: rgba(19, 26, 42, .18); color: #6b7488; text-shadow: none; }
[data-scheme="light"] .reader-empty.reader-body { color: var(--reader-text); }
[data-scheme="light"] .reader-heading h1 { color: var(--reader-text-strong); }
[data-scheme="light"] .reader-back { background: rgba(255, 255, 255, .82); border-color: rgba(19, 26, 42, .16); color: #3d4759; }
[data-scheme="light"] .reader-content pre { background: #f7f9fc; border-color: rgba(19, 26, 42, .14); }
[data-scheme="light"] .code-bar { background: rgba(255, 255, 255, .72); border-color: rgba(19, 26, 42, .14); }
[data-scheme="light"] .reader-content blockquote { background: rgba(19, 26, 42, .03); color: #3d4759; }
/* 页脚底色同样要压过 body.subpage / body.reader-on 那条更高特异性的深色口径。 */
[data-scheme="light"] body.subpage .reader-filing,
[data-scheme="light"] body.reader-on .reader-filing { background: rgba(255, 255, 255, .6); }
[data-scheme="light"] .reader-content a { color: #0e7490; }
[data-scheme="light"] .toc-link { border-left-color: rgba(19, 26, 42, .14); }
[data-scheme="light"] .toc-link:hover { background: rgba(19, 26, 42, .05); }
[data-scheme="light"] .toc-link.is-active { background: rgba(14, 116, 144, .1); }
/* 顶/底毛玻璃带在浅色下减半，避免四周压出一圈灰边；基础规则带 body.in-articles 前缀，这里跟上。 */
[data-scheme="light"] body.in-articles .edge-blur { opacity: .5; }
[data-scheme="light"] .search-backdrop { background: rgba(19, 26, 42, .34); }
[data-scheme="light"] .search-field { background: rgba(255, 255, 255, .8); border-color: rgba(19, 26, 42, .14); }
[data-scheme="light"] .search-mark { background: rgba(14, 116, 144, .18); }
[data-scheme="light"] .pg-index { background: rgba(255, 255, 255, .8); color: #3d4759; }
[data-scheme="light"] .pg-tag { color: #0e7490; border-color: rgba(14, 116, 144, .3); }
[data-scheme="light"] .pager-num--current { color: #ffffff; }
[data-scheme="light"] .archive-row:hover { background: rgba(19, 26, 42, .05); }
[data-scheme="light"] .ay-num { background-image: linear-gradient(100deg, #131a2a 15%, #0e7490 60%, #6d28d9 100%); }
[data-scheme="light"] .ec-code { background-image: linear-gradient(115deg, #131a2a 12%, #0e7490 58%, #6d28d9 100%); }
[data-scheme="light"] .rm-chip { background: rgba(255, 255, 255, .7); }
[data-scheme="light"] .rm-chip em { border-right-color: rgba(19, 26, 42, .16); }
[data-scheme="light"] .warp { background: rgba(238, 241, 247, .96); }
[data-scheme="light"] .warp-title, [data-scheme="light"] .warp-sub { color: #131a2a; text-shadow: none; }
[data-scheme="light"] .warp-bar { background: rgba(19, 26, 42, .12); }
/* 摆渡层与跃迁层同款白昼口径；星尘画布取 --stardust-* 变量，昼夜口径与覆盖层同处一改。 */
[data-scheme="light"] .transit { background: rgba(238, 241, 247, .96); }
[data-scheme="light"] .transit-title, [data-scheme="light"] .transit-sub { color: #131a2a; text-shadow: none; }
[data-scheme="light"] .transit-bar { background: rgba(19, 26, 42, .12); }
/* 浅色底最容易看出灰点：粒子层压到六成，星尘仍在流动但不抢文字。 */
[data-scheme="light"] .particle-field { opacity: .6; }
[data-scheme="light"] .empty-state { color: #3d4759; }
html[data-scheme="light"] { scrollbar-color: #6b7488 #eef1f7; }

/* ═══════════════════════ 新增构件的响应式收口 ═══════════════════════ */
@media (max-width: 860px) {
  .subpage-main > .stream-head, .author-panel { padding-top: max(96px, 9vh); }
  .author-avatar { width: 60px; height: 60px; }
  .author-panel { gap: 16px; }
  .pager { padding-inline: 20px; }
  .index-grid, .post-grid, .link-grid, .tag-cloud, .archive-tree, .link-groups { padding-inline: 20px; }
  .error-card { padding-inline: 20px; }
  .search-layer { padding: 8vh 12px 12px; }
  .to-top span { display: none; }
  .to-top { padding: 12px; border-radius: 50%; }
  .reader-cursor { grid-template-columns: 1fr; }
  .rc-nav--next { align-items: flex-start; text-align: left; }
}
@media (max-width: 520px) {
  /* 窄屏把检索、配色与音频喇叭收进抽屉，保证品牌位与抽屉按钮不被挤出视口。
     喇叭按钮本身收起，音频面板改由抽屉里的入口打开并浮在导航下方：
     .nav-inner 滚动后带 backdrop-filter，会成为绝对定位后代的包含块，面板按包含块收口才不会跑偏。 */
  .nav-actions > .nav-search, .nav-actions > .nav-scheme, .nav-actions > .nav-audio > .nav-sfx { display: none; }
  .nav-audio { position: static; }
  .audio-panel { top: calc(100% + 10px); left: 8px; right: 8px; width: auto; }
  .nav-badge { max-width: 24vw; }
  .nav-actions { gap: 8px; }
  .index-grid, .post-grid, .link-grid, .tag-cloud, .archive-tree, .link-groups { padding-inline: 18px; }
  .pager { flex-direction: column; align-items: stretch; }
  .pager-count { justify-content: center; }
  .pager-controls { justify-content: space-between; }
  /* 窄屏只留上下段，数字页码换行后反而更难按。 */
  .pager-pages { display: none; }
  .ec-actions .btn { width: 100%; justify-content: center; }
  .archive-row { flex-wrap: wrap; gap: 8px; }
  .ar-tag { max-width: 100%; }
  .author-panel { flex-direction: column-reverse; }
  .lk-desc { -webkit-line-clamp: 3; }
  .search-layer { padding: 4vh 10px 10px; }
  .search-panel { max-height: 82vh; }
  /* 窄屏收紧摆渡层字号与进度条，避免 HUD 文案挤成一团。 */
  .transit-title { font-size: 10.5px; letter-spacing: .18em; }
  .transit-sub { font-size: 9.5px; letter-spacing: .12em; }
  .transit-bar { width: 160px; }
  /* 装载超时提示条在窄屏让出导航高度并收紧字号，长文案自动换行。 */
  .boot-notice { top: 70px; align-items: flex-start; font-size: 11.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .skip-link { transition: none; }
  .pg-card:hover, .index-card:hover, .link-card:hover, .to-top:hover { transform: none; }
  .pg-card:hover .pg-cover img { transform: none; }
  /* 兜底：减弱动效下脚本不会挂摆渡状态；万一预置态残留，内容与页面也必须直接可见。 */
  html.transit-arrive #nav, html.transit-arrive #main { opacity: 1; }
  html.transit-arrive .transit, .transit.on { opacity: 0; visibility: hidden; transition: none; }
  /* 装载层同理：脚本在减弱动效下不显示装载覆盖层，残留的预置态必须立刻撤下。 */
  html.boot-arrive .boot, .boot.boot-on, .boot.boot-landed { opacity: 0; visibility: hidden; transition: none; }
  .boot-notice { animation: none; }
  /* 减弱动效下粒子只留一帧静态星点，并再减淡一档。 */
  .particle-field { opacity: .55; }
}

/* ═══════════════════════ 银河时计：首页主表盘 + 全站导航表盘 ═══════════════════════ */
/* 时计完全由脚本驱动：无脚本时页面不留空壳，与检索等脚本门控控件同一口径。 */
html:not(.has-js) [data-galaxy-clock] { display: none; }
/* 数字小格：每位数字独占一个 overflow hidden 的格子，变化时旧数字上移出格、
   新数字自下方升入（见 galaxy-clock.js）。格宽取 1ch 并配 tabular-nums，翻动不推挤布局。 */
.gc-time { display: inline-flex; align-items: center; font-family: var(--hud); font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.15; }
.gc-slot { position: relative; display: inline-block; width: 1ch; overflow: hidden; text-align: center; }
.gc-digit { display: block; }
.gc-digit--in { position: absolute; inset: 0; }
.gc-colon { display: inline-block; margin-inline: .08em; color: var(--cyan); animation: gc-blink 2s ease-in-out infinite; }
@keyframes gc-blink { 0%, 100% { opacity: 1; } 50% { opacity: .28; } }
.gc-dot { width: 6px; height: 6px; flex-shrink: 0; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); animation: pulse 2.2s ease-in-out infinite; }

/* ── 首页主表盘：切角 HUD 面板，与状态卡同族 ── */
.hero-clock {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-bottom: 34px;
  padding: 18px 46px 16px;
  background: linear-gradient(165deg, rgba(16, 23, 40, .62), rgba(7, 10, 18, .42));
  border: 1px solid rgba(148, 197, 255, .14);
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px));
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  backdrop-filter: blur(16px) saturate(1.2);
}
/* 四角括线，与状态卡同一口径 */
.hero-clock::before {
  content: "";
  position: absolute;
  inset: 6px;
  pointer-events: none;
  background:
    linear-gradient(var(--cyan), var(--cyan)) left top / 13px 1.5px,
    linear-gradient(var(--cyan), var(--cyan)) left top / 1.5px 13px,
    linear-gradient(var(--cyan), var(--cyan)) right bottom / 13px 1.5px,
    linear-gradient(var(--cyan), var(--cyan)) right bottom / 1.5px 13px;
  background-repeat: no-repeat;
  opacity: .5;
}
/* 顶部扫描光，与状态卡错峰循环 */
.hc-scan {
  position: absolute;
  top: 0; left: -45%;
  width: 45%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(103, 232, 249, .95), transparent);
  animation: statScan 3.6s linear infinite;
  animation-delay: .6s;
  pointer-events: none;
}
.hc-head { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em; color: var(--cyan); white-space: nowrap; }
.hc-code { color: var(--text-faint); font-size: 9.5px; letter-spacing: .14em; }
.gc-time--hero { justify-content: center; min-width: 7.6ch; min-height: 1.15em; font-size: clamp(34px, 4.6vw, 48px); letter-spacing: .04em; color: var(--text); text-shadow: 0 0 26px rgba(34, 211, 238, .4); }
.hc-sub { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 12px; letter-spacing: .08em; color: var(--text-dim); white-space: nowrap; }
.gc-time--sub { min-width: 8ch; font-family: var(--mono); font-size: 13.5px; font-weight: 500; color: var(--text-dim); }
.hc-sub-note { color: var(--text-faint); font-size: 10px; letter-spacing: .12em; }

/* ── 导航表盘：品牌位左侧的 chronometer 芯片 ── */
.nav-left { display: flex; align-items: center; gap: 14px; min-width: 0; flex-shrink: 0; }
.nav-clock {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border: 1px solid rgba(34, 211, 238, .3);
  border-radius: 8px;
  background: rgba(34, 211, 238, .07);
  white-space: nowrap;
  transition: opacity .4s ease, transform .4s cubic-bezier(.22, 1, .36, 1), border-color .25s ease, background .25s ease;
}
.nav-clock .gc-dot { width: 5px; height: 5px; }
.gc-time--nav { min-width: 8ch; font-family: var(--mono); font-size: 11.5px; font-weight: 500; letter-spacing: .06em; color: var(--cyan); }
.gc-time--nav-bj { color: var(--text-dim); }
.nc-zone { font-family: var(--hud); font-size: 8.5px; font-weight: 700; letter-spacing: .14em; color: var(--text-faint); }
.nc-div { width: 1px; height: 14px; background: var(--hairline); }
/* 首页首屏由主表盘承担时计：导航表盘蛰伏（占位不闪移），滚动收拢为胶囊后随胶囊升起；
   子页与正文舱没有主表盘，导航表盘常亮。 */
body:not(.subpage):not(.reader-on) #nav:not(.nav--scrolled) .nav-clock { opacity: 0; transform: translateY(-8px); pointer-events: none; }
/* 胶囊为时计表盘让位：滚动后收拢宽度由 1024 扩到 1160。 */
.nav--scrolled .nav-inner { max-width: 1160px; }

/* ── 昼夜双色 ── */
[data-scheme="light"] .hero-clock { background: rgba(255, 255, 255, .66); border-color: rgba(19, 26, 42, .12); box-shadow: 0 18px 40px rgba(19, 26, 42, .1); }
[data-scheme="light"] .gc-time--hero { text-shadow: none; }
[data-scheme="light"] .nav-clock { background: rgba(14, 116, 144, .08); border-color: rgba(14, 116, 144, .32); }

/* ── 响应式收口 ── */
@media (max-width: 860px) {
  /* 中屏导航只留 UTC 主刻度，北京时让位给抽屉与品牌位。 */
  .nav-clock .nc-div, .nav-clock .gc-time--nav-bj, .nav-clock .nc-zone--bj { display: none; }
  .nav-clock { padding: 5px 10px; gap: 6px; }
  .hero-clock { margin-bottom: 26px; padding: 14px 30px 12px; }
  .hc-sub-note { display: none; }
}
@media (max-width: 520px) {
  /* 窄屏导航放不下时计芯片：整枚隐藏，首页主表盘仍承担时间显示。 */
  .nav-clock { display: none; }
  .hero-clock { gap: 7px; padding: 12px 22px 11px; }
  .hc-head { gap: 6px; font-size: 10px; }
  .hc-code { font-size: 8px; }
  .gc-time--hero { font-size: 30px; }
  .hc-sub { gap: 6px; font-size: 11px; }
  .gc-time--sub { font-size: 12px; }
}
/* 低高度屏幕：主表盘与上方间距一起压缩，保证首屏一屏放得下。 */
@media (max-height: 820px) and (min-width: 861px) {
  .hero-sub { margin-bottom: 28px; }
  .hero-stats { margin-bottom: 26px; }
  .hero-clock { gap: 7px; margin-bottom: 22px; padding: 12px 34px 11px; }
  .gc-time--hero { font-size: clamp(28px, 3.4vw, 36px); }
}