:root {
  --accent: #34d399;
  --accent-light: #6ee7b7;
  --accent-dark: #10b981;
  --accent-glow: rgba(52, 211, 153, 0.45);
  --accent-glow-soft: rgba(52, 211, 153, 0.35);
}

html { scroll-behavior: smooth; }
body { background: #05070d; font-feature-settings: 'tnum'; }
.glass { background: rgba(15, 23, 42, 0.55); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); }
.glass-strong { background: rgba(5, 7, 13, 0.78); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); }
.hairline { border: 1px solid rgba(255,255,255,0.12); }
.hairline-strong { border: 1px solid rgba(255,255,255,0.22); }
.edge-cut { clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px); }
.edge-cut-sm { clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); }
.btn-shine { position: relative; overflow: hidden; isolation: isolate; }
.btn-shine::before { content:''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,0.55) 50%, transparent 65%); transform: translateX(-120%); animation: shine 3.2s linear infinite; }
.btn-shine:hover::before { animation-duration: 1.6s; }
@keyframes shine { to { transform: translateX(120%); } }
.pulse-ring { animation: pulse-ring-accent 2.4s ease-in-out infinite; }
@keyframes pulse-ring-accent { 0%,100% { box-shadow: 0 0 0 0 rgba(52,211,153,.55), 0 0 30px rgba(52,211,153,.35);} 50% { box-shadow: 0 0 0 10px rgba(52,211,153,0), 0 0 60px rgba(52,211,153,.55);} }
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .8s ease, transform .8s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.nav-link { position: relative; }
.nav-link::after { content:''; position: absolute; left: 0; bottom: -6px; height: 2px; width: 0; background: linear-gradient(90deg, var(--accent), transparent); transition: width .3s ease; }
.nav-link:hover::after, .nav-link.is-active::after { width: 100%; }
.grid-bg { background-image: linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(ellipse at top, black 30%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse at top, black 30%, transparent 75%); }
.ticker { animation: ticker 28s linear infinite; }
@keyframes ticker { from { transform: translateX(0);} to { transform: translateX(-50%);} }
.timeline-dot { width: 14px; height: 14px; border-radius: 999px; background: var(--accent); box-shadow: 0 0 0 4px rgba(52,211,153,0.25), 0 0 24px rgba(52,211,153,0.55); }
.star { color: var(--accent); }
.toc-link.is-active { color: var(--accent); }
.toc-link.is-active::before { background: var(--accent); }
.toc-link::before { content:''; display: inline-block; width: 6px; height: 6px; margin-right: 8px; background: rgba(255,255,255,.3); border-radius: 999px; vertical-align: middle; }

/* Hero 首屏：浅色背景图上的标题可读性（全子项目统一） */
.hero-scrim-radial {
  background: radial-gradient(ellipse 85% 75% at 18% 42%, rgba(5, 7, 13, 0.82) 0%, rgba(5, 7, 13, 0.45) 48%, transparent 72%);
}
.hero-scrim-side {
  background: linear-gradient(105deg, rgba(5, 7, 13, 0.88) 0%, rgba(5, 7, 13, 0.62) 38%, rgba(5, 7, 13, 0.18) 68%, transparent 88%);
}
.hero-title-panel {
  position: relative;
  display: inline-block;
  max-width: 100%;
  padding: 0.15rem 0;
}
.hero-title-panel::before {
  content: '';
  position: absolute;
  inset: -1.25rem -1.5rem -1.75rem -1.25rem;
  border-radius: 4px;
  background: linear-gradient(135deg, rgba(5, 7, 13, 0.72) 0%, rgba(5, 7, 13, 0.48) 55%, rgba(5, 7, 13, 0.12) 100%);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 24px 64px rgba(5, 7, 13, 0.55);
  pointer-events: none;
  z-index: -1;
}
.hero-title-cn {
  color: #f8fafc;
  text-shadow:
    0 0 40px rgba(5, 7, 13, 0.95),
    0 4px 28px rgba(5, 7, 13, 0.85),
    0 2px 8px rgba(5, 7, 13, 0.9),
    0 1px 0 rgba(15, 23, 42, 0.8);
}
.hero-title-en {
  filter: drop-shadow(0 2px 12px rgba(5, 7, 13, 0.95)) drop-shadow(0 0 28px rgba(5, 7, 13, 0.75));
}