/**
 * Hallmark · pre-emit critique: P4 H4 E4 S4 R4 V4
 * Hallmark · genre: atmospheric · macrostructure: Catalogue · theme: Terminal
 * nav: N5 floating glass · footer: Ft5 statement · enrichment: real-hero
 * audience: 中文 Gal/AVG 玩家 · use: 下载中文版 · tone: atmospheric
 * Cyber Dark skeleton preserved (ink-950 / glass / CHAPTER / ticker / hero-scrim)
 * accent tokens only — no circlemategame CSS clone
 */
:root {
  --accent: #f472b6;
  --accent-light: #f9a8d4;
  --accent-dark: #db2777;
  --accent-glow: rgba(244, 114, 182, 0.45);
  --accent-glow-soft: rgba(244, 114, 182, 0.35);
  --color-paper: #05070d;
  --color-accent: #f472b6;
  --font-display: "Noto Sans SC", system-ui, sans-serif;
  --font-body: "Noto Sans SC", system-ui, sans-serif;
}

html { scroll-behavior: smooth; overflow-x: clip; }
body {
  background: #05070d;
  font-family: var(--font-body);
  font-feature-settings: 'tnum';
  overflow-x: clip;
}
h1, h2, h3 { font-family: var(--font-display); font-style: normal; }
.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(244,114,182,.55), 0 0 30px rgba(244,114,182,.35);}
  50% { box-shadow: 0 0 0 10px rgba(244,114,182,0), 0 0 60px rgba(244,114,182,.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(244,114,182,0.25), 0 0 24px rgba(244,114,182,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-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);
}
.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)); }
.hl-article { max-width: 48rem; margin: 0 auto; }
.hl-article h2 { margin-top: 2rem; font-size: 1.35rem; font-weight: 800; color: #f1f5f9; }
.hl-article p, .hl-article li { color: #cbd5e1; line-height: 1.85; }
.hl-article ul, .hl-article ol { margin: 1rem 0 1rem 1.25rem; }
.hl-article table { width: 100%; border-collapse: collapse; margin: 1.25rem 0; font-size: 0.9rem; }
.hl-article th, .hl-article td { border: 1px solid rgba(255,255,255,0.12); padding: 0.65rem 0.75rem; text-align: left; }
.hl-article th { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.hl-article a { color: var(--accent); }