/* ==========================================================================
   海浪志 · Retro-Futurism 视觉系统  (part 1/3  基础层)
   深空底色 + 霓虹光谱 + CRT 扫描线 + 网格地平线 + 金属渐变字
   ========================================================================== */

/* ---------- 1. 令牌 ---------- */
:root {
  --bg: #05070f;
  --bg-2: #080d1b;
  --bg-3: #0b1224;
  --panel: rgba(13, 21, 38, 0.86);
  --panel-2: rgba(9, 15, 28, 0.94);
  --line: rgba(122, 190, 255, 0.16);
  --line-2: rgba(122, 190, 255, 0.3);
  --ink: #e9f3ff;
  --ink-2: #a9bdd8;
  --ink-3: #6f86a6;
  --accent: #22d3ee;
  --accent-2: #ff2e88;
  --amber: #ffc247;
  --lime: #8ef04b;

  --font-cjk: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Source Han Sans SC", "Noto Sans CJK SC", sans-serif;
  --font-disp: "Bahnschrift", "DIN Alternate", "Arial Narrow", "Haettenschweiler", "Impact", sans-serif;
  --font-mono: "Cascadia Mono", "JetBrains Mono", "Consolas", "SFMono-Regular", "Courier New", monospace;

  --shadow: 0 18px 40px -22px rgba(0, 0, 0, 0.95);
  --glow: 0 0 0 1px rgba(120, 200, 255, 0.18), 0 0 26px -8px var(--accent);
  --wrap: 1240px;
  --chamfer: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
}

/* ---------- 2. 基础 ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background-color: var(--bg);
  background-image:
    radial-gradient(1200px 620px at 12% -8%, rgba(34, 211, 238, 0.13), transparent 62%),
    radial-gradient(1000px 560px at 92% 4%, rgba(255, 46, 136, 0.1), transparent 60%),
    linear-gradient(180deg, var(--bg-2), var(--bg) 46%, #04060d);
  color: var(--ink);
  font-family: var(--font-cjk);
  font-size: 16px;
  line-height: 1.85;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body::before {
  content: ""; position: fixed; inset: 0; z-index: 9998; pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(255,255,255,.028) 0 1px, transparent 1px 3px);
  mix-blend-mode: overlay;
}
body::after {
  content: ""; position: fixed; inset: 0; z-index: 9997; pointer-events: none; opacity: .5;
  background-image:
    radial-gradient(ellipse at center, transparent 52%, rgba(0,0,0,.55) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.22'/%3E%3C/svg%3E");
}

a { color: var(--accent); text-decoration: none; transition: color .18s ease; }
a:hover { color: #fff; }
img, svg { max-width: 100%; }
p { margin: 0 0 1.05em; }
strong { color: #fff; font-weight: 700; }
ul, ol { margin: 0 0 1.1em; padding-left: 1.35em; }
li { margin-bottom: .42em; }
li::marker { color: var(--accent); }
hr { border: 0; border-top: 1px dashed var(--line); margin: 2.2em 0; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 22px; }
.mono { font-family: var(--font-mono); }
.disp { font-family: var(--font-disp); letter-spacing: .08em; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }

.chrome {
  background: linear-gradient(180deg, #fff 4%, #cdf1ff 32%, #4fa8de 46%, #0a2745 51%, #7ff0ff 60%, #fff 96%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 10px 34px rgba(34, 211, 238, .24);
}

/* ---------- 3. 进度条 / 回顶 ---------- */
.read-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 9999; background: rgba(255,255,255,.06); }
.read-progress > i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), var(--accent-2) 60%, var(--amber)); box-shadow: 0 0 12px var(--accent); }

.to-top {
  position: fixed; right: 20px; bottom: 24px; z-index: 900;
  width: 46px; height: 46px; border: 1px solid var(--line-2); background: var(--panel-2); color: var(--ink);
  font-family: var(--font-mono); font-size: 18px; cursor: pointer;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  opacity: 0; transform: translateY(12px); transition: all .24s ease;
}
.to-top.is-show { opacity: 1; transform: none; }
.to-top:hover { color: var(--accent); box-shadow: var(--glow); }

/* ---------- 4. 顶栏 ---------- */
.site-header {
  position: sticky; top: 0; z-index: 950;
  backdrop-filter: blur(14px);
  background: linear-gradient(180deg, rgba(5,8,16,.94), rgba(5,8,16,.74));
  border-bottom: 1px solid var(--line);
}
.site-header::after { content: ""; display: block; height: 1px; opacity: .55;
  background: linear-gradient(90deg, transparent, var(--accent), var(--accent-2), transparent); }
.header-inner { max-width: var(--wrap); margin: 0 auto; padding: 10px 22px; display: flex; align-items: center; gap: 18px; }
.brand { display: flex; align-items: center; gap: 11px; flex: none; }
.brand-logo { width: 44px; height: 44px; display: block; }
.brand-text { display: flex; flex-direction: column; line-height: 1.12; }
.brand-name {
  font-size: 21px; font-weight: 800; letter-spacing: .16em;
  background: linear-gradient(180deg, #fff, #a6e9ff 46%, #2f7fb5 52%, #d8fbff);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.brand-slogan { font-family: var(--font-disp); font-size: 10.5px; letter-spacing: .28em; color: var(--ink-3); }

.nav-toggle { display: none; margin-left: auto; width: 42px; height: 38px; background: transparent;
  border: 1px solid var(--line-2); color: var(--ink); font-family: var(--font-mono); font-size: 16px; cursor: pointer; }
.nav-links { display: flex; align-items: center; gap: 2px; margin-left: auto; overflow-x: auto; scrollbar-width: none; }
.nav-links::-webkit-scrollbar { display: none; }
.nav-link {
  flex: none; padding: 7px 11px; font-size: 14px; color: var(--ink-2);
  border: 1px solid transparent; letter-spacing: .04em; position: relative;
}
.nav-link::after {
  content: ""; position: absolute; left: 11px; right: 11px; bottom: 3px; height: 2px;
  background: var(--c, var(--accent)); transform: scaleX(0); transform-origin: left; transition: transform .22s ease;
}
.nav-link:hover { color: #fff; }
.nav-link:hover::after, .nav-link.active::after { transform: scaleX(1); }
.nav-link.active { color: #fff; }
.nav-link.active { text-shadow: 0 0 14px var(--c, var(--accent)); }
.nav-home { color: var(--amber); }

/* ---------- 5. 走马灯 ---------- */
.ticker { border-bottom: 1px solid var(--line); background: rgba(6,10,20,.7); overflow: hidden; }
.ticker-track { display: flex; gap: 42px; padding: 7px 0; width: max-content; animation: slide 42s linear infinite; }
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker-item { font-family: var(--font-mono); font-size: 12px; letter-spacing: .12em; color: var(--ink-3); white-space: nowrap; }
.ticker-item b { color: var(--accent); font-weight: 600; }
.ticker-item i { color: var(--accent-2); font-style: normal; }
@keyframes slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- 6. 按钮 / 徽标 / 标签 ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 12px 22px; font-size: 14.5px; font-weight: 600; letter-spacing: .1em;
  color: #04121c; background: linear-gradient(180deg, #b9f4ff, var(--accent) 60%, #0e9fc4);
  border: 1px solid rgba(255,255,255,.34); cursor: pointer;
  clip-path: var(--chamfer);
  box-shadow: 0 10px 26px -12px var(--accent), inset 0 1px 0 rgba(255,255,255,.6);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.btn:hover { transform: translateY(-2px); filter: brightness(1.08); color: #04121c; box-shadow: 0 14px 32px -12px var(--accent); }
.btn-ghost {
  background: rgba(10,18,33,.7); color: var(--ink); border: 1px solid var(--line-2);
  box-shadow: none; clip-path: var(--chamfer);
}
.btn-ghost:hover { color: var(--accent); border-color: var(--accent); box-shadow: var(--glow); }
.btn-sm { padding: 8px 14px; font-size: 13px; }

.badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 12px; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .16em;
  color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 46%, transparent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}
.badge-amber { color: var(--amber); border-color: rgba(255,194,71,.46); background: rgba(255,194,71,.1); }
.badge-pink { color: var(--accent-2); border-color: rgba(255,46,136,.46); background: rgba(255,46,136,.1); }

.tag {
  display: inline-block; padding: 3px 10px; margin: 0 6px 6px 0;
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .08em;
  color: var(--ink-2); border: 1px solid var(--line); background: rgba(255,255,255,.03);
}
.tag:hover { color: #04121c; background: var(--accent); border-color: var(--accent); }
.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; cursor: pointer;
  font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-2);
  border: 1px dashed var(--line-2); background: rgba(255,255,255,.02);
}
.chip:hover, .chip.is-on { color: #04121c; background: var(--accent); border-style: solid; border-color: var(--accent); }

/* 条纹分隔条 */
.rule { height: 10px; margin: 42px 0; opacity: .5;
  background: repeating-linear-gradient(115deg, var(--accent) 0 2px, transparent 2px 11px);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }

/* ---------- 7. 区块标题 ---------- */
.section { padding: 62px 0; position: relative; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 32px; }
.section-title { margin: 0; font-size: clamp(23px, 3.1vw, 33px); font-weight: 800; letter-spacing: .06em; line-height: 1.25; }
.section-title .idx { font-family: var(--font-mono); font-size: 13px; color: var(--accent); margin-right: 10px; letter-spacing: .2em; }
.section-note { margin: 8px 0 0; color: var(--ink-3); font-size: 13.5px; max-width: 62ch; }
.section-more { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .12em; color: var(--accent); }

/* 渐入 */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); }
.reveal.is-in { opacity: 1; transform: none; }

/* ==========================================================================
   part 2/3  首页 / 栏目页组件
   ========================================================================== */

/* ---------- 8. 首屏 ---------- */
.hero { position: relative; padding: 76px 0 58px; overflow: hidden; }
.hero-grid { position: absolute; left: 50%; bottom: -46%; width: 190%; height: 92%; transform: translateX(-50%) perspective(520px) rotateX(66deg); opacity: .5;
  background-image:
    linear-gradient(to right, rgba(122,190,255,.22) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(122,190,255,.22) 1px, transparent 1px);
  background-size: 62px 62px;
  mask-image: linear-gradient(180deg, transparent, #000 42%, transparent 96%);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 42%, transparent 96%);
  pointer-events: none;
}
.hero-sun { position: absolute; right: -60px; top: -40px; width: 420px; height: 420px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 50% 60%, color-mix(in srgb, var(--accent) 55%, transparent), transparent 62%);
  filter: blur(6px); opacity: .5; }
.hero-inner { position: relative; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 46px; align-items: center; }
.hero-title { margin: 18px 0 0; font-size: clamp(52px, 9.6vw, 108px); font-weight: 900; letter-spacing: .14em; line-height: .98; }
.hero-title small { display: block; font-family: var(--font-disp); font-size: clamp(12px, 1.5vw, 17px); letter-spacing: .48em; color: var(--ink-3); font-weight: 400; margin-top: 16px; }
.hero-sub { margin: 22px 0 0; max-width: 56ch; color: var(--ink-2); font-size: 16.5px; }
.hero-sub em { font-style: normal; color: var(--accent); border-bottom: 1px dashed var(--accent); }
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 30px; }
.hero-term { margin-top: 26px; font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-3); }
.hero-term .caret { color: var(--accent); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.hero-art { position: relative; border: 1px solid var(--line-2); background: var(--panel-2); padding: 16px; box-shadow: var(--shadow); }
.hero-art-head { display: flex; align-items: center; gap: 8px; padding-bottom: 12px; border-bottom: 1px dashed var(--line); margin-bottom: 12px; }
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--line-2); }
.dot.a { background: var(--accent-2); } .dot.b { background: var(--amber); } .dot.c { background: var(--lime); }
.hero-art-title { margin-left: auto; font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em; color: var(--ink-3); }
.hero-art svg { display: block; width: 100%; height: auto; }
.hero-art-cap { margin-top: 12px; font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-3); display: flex; justify-content: space-between; gap: 10px; }

/* 数据条 */
.stat-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin-top: 46px;
  background: var(--line); border: 1px solid var(--line); }
.stat { background: linear-gradient(180deg, rgba(12,20,38,.9), rgba(7,12,24,.9)); padding: 18px 20px; }
.stat b { display: block; font-family: var(--font-disp); font-size: 30px; letter-spacing: .06em; color: #fff; line-height: 1.1; }
.stat b i { font-style: normal; font-size: 13px; color: var(--accent); margin-left: 4px; letter-spacing: .1em; }
.stat span { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .14em; color: var(--ink-3); }

/* ---------- 9. 栏目矩阵 ---------- */
.cat-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.cat-card {
  position: relative; display: flex; flex-direction: column; padding: 18px 16px 16px;
  background: linear-gradient(180deg, rgba(13,21,38,.92), rgba(7,12,24,.94));
  border: 1px solid var(--line); overflow: hidden; transition: transform .26s ease, border-color .26s ease, box-shadow .26s ease;
}
.cat-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--accent); opacity: .85; }
.cat-card::after { content: ""; position: absolute; right: -30%; bottom: -30%; width: 150px; height: 150px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 40%, transparent), transparent 68%); opacity: .35; transition: opacity .26s ease; }
.cat-card:hover { transform: translateY(-6px); border-color: color-mix(in srgb, var(--accent) 55%, transparent); box-shadow: 0 22px 40px -26px var(--accent); }
.cat-card:hover::after { opacity: .7; }
.cat-card-art { height: 74px; margin: 4px 0 14px; opacity: .95; }
.cat-card-art svg { width: 100%; height: 100%; display: block; }
.cat-card-en { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .2em; color: var(--accent); }
.cat-card-name { margin: 4px 0 6px; font-size: 19px; font-weight: 800; letter-spacing: .1em; }
.cat-card-tag { color: var(--ink-3); font-size: 12.5px; line-height: 1.7; min-height: 42px; }
.cat-card-links { margin: 12px 0 0; padding: 12px 0 0; border-top: 1px dashed var(--line); list-style: none; padding-left: 0; }
.cat-card-links li { margin-bottom: 6px; font-size: 12.8px; color: var(--ink-2); display: flex; gap: 7px; }
.cat-card-links li::before { content: "▸"; color: var(--accent); flex: none; }
.cat-card-links a { color: var(--ink-2); }
.cat-card-links a:hover { color: #fff; }
.cat-card-foot { margin-top: auto; padding-top: 12px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; color: var(--ink-3); display: flex; justify-content: space-between; }

/* ---------- 10. 编辑精选列表 ---------- */
.ed-list { border-top: 1px solid var(--line); }
.ed-item { display: grid; grid-template-columns: 74px minmax(0,1fr) auto; gap: 20px; align-items: start;
  padding: 22px 4px; border-bottom: 1px solid var(--line); transition: background .2s ease, padding-left .2s ease; }
.ed-item:hover { background: rgba(34,211,238,.04); padding-left: 12px; }
.ed-num { font-family: var(--font-disp); font-size: 40px; line-height: 1; color: transparent; -webkit-text-stroke: 1px var(--line-2); letter-spacing: .02em; }
.ed-item:hover .ed-num { -webkit-text-stroke-color: var(--accent); color: transparent; }
.ed-title { margin: 0 0 7px; font-size: 19.5px; font-weight: 700; letter-spacing: .02em; }
.ed-title a { color: var(--ink); }
.ed-title a:hover { color: var(--accent); }
.ed-dek { margin: 0; color: var(--ink-3); font-size: 13.6px; line-height: 1.75; max-width: 82ch; }
.ed-meta { margin-top: 9px; display: flex; gap: 14px; flex-wrap: wrap; font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-3); }
.ed-cat { padding: 4px 9px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; color: var(--c, var(--accent)); border: 1px solid color-mix(in srgb, var(--c, var(--accent)) 42%, transparent); background: rgba(255,255,255,.02); }

/* ---------- 11. 时间线（最新更新） ---------- */
.tl { position: relative; margin: 0; padding: 0 0 0 24px; list-style: none; }
.tl::before { content: ""; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 1px;
  background: linear-gradient(180deg, var(--accent), var(--accent-2) 50%, transparent); }
.tl-item { position: relative; padding: 0 0 18px; }
.tl-item::before { content: ""; position: absolute; left: -23px; top: 11px; width: 9px; height: 9px; border-radius: 50%;
  background: var(--bg); border: 2px solid var(--c, var(--accent)); }
.tl-date { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-3); letter-spacing: .1em; }
.tl-title { font-size: 15.5px; color: var(--ink-2); }
.tl-title a { color: var(--ink); }
.tl-title a:hover { color: var(--accent); }
.tl-cat { font-family: var(--font-mono); font-size: 11px; color: var(--c, var(--accent)); margin-left: 10px; }

/* ---------- 12. 学习台 / 步骤 / FAQ ---------- */
.spot-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
.spot { border: 1px solid var(--line); background: linear-gradient(180deg, rgba(13,21,38,.9), rgba(7,12,24,.92)); padding: 22px 20px; position: relative; overflow: hidden; }
.spot::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.spot-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.spot-k { font-family: var(--font-mono); font-size: 11px; letter-spacing: .18em; color: var(--accent); }
.spot h3 { margin: 0; font-size: 18px; letter-spacing: .06em; }
.spot-list { margin: 0; padding: 0; list-style: none; }
.spot-list li { padding: 9px 0; border-bottom: 1px dashed var(--line); font-size: 14px; color: var(--ink-2); display: flex; gap: 9px; }
.spot-list li:last-child { border-bottom: 0; }
.spot-list b { font-family: var(--font-mono); font-size: 11px; color: var(--accent); flex: none; padding-top: 3px; }
.spot-list a { color: var(--ink-2); } .spot-list a:hover { color: #fff; }

.steps { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; counter-reset: s; }
.step { border: 1px solid var(--line); background: rgba(9,15,28,.8); padding: 20px 18px; position: relative; }
.step::before { counter-increment: s; content: "0" counter(s); font-family: var(--font-disp); font-size: 34px; color: transparent;
  -webkit-text-stroke: 1px var(--accent); display: block; margin-bottom: 8px; opacity: .85; }
.step h4 { margin: 0 0 7px; font-size: 16px; letter-spacing: .05em; }
.step p { margin: 0; color: var(--ink-3); font-size: 13.4px; line-height: 1.75; }

.faq { border: 1px solid var(--line); background: rgba(9,15,28,.72); }
.faq-item { border-bottom: 1px solid var(--line); padding: 18px 22px; }
.faq-item:last-child { border-bottom: 0; }
.faq-q { margin: 0 0 8px; font-size: 16.5px; font-weight: 700; display: flex; gap: 10px; }
.faq-q span { font-family: var(--font-mono); color: var(--accent); flex: none; }
.faq-a { margin: 0; color: var(--ink-2); font-size: 14.4px; }

/* ---------- 13. 页脚 ---------- */
.site-footer { margin-top: 70px; border-top: 1px solid var(--line); background: linear-gradient(180deg, rgba(6,10,20,.6), rgba(3,5,11,.95)); }
.footer-grid { display: grid; grid-template-columns: 1.3fr repeat(3, minmax(0,1fr)); gap: 30px; padding: 48px 0 30px; }
.footer-col h4 { margin: 0 0 14px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .2em; color: var(--accent); }
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: 9px; font-size: 13.6px; }
.footer-col a { color: var(--ink-2); } .footer-col a:hover { color: #fff; }
.footer-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.footer-brand img { width: 46px; height: 46px; }
.footer-about { color: var(--ink-3); font-size: 13.4px; max-width: 42ch; line-height: 1.8; }
.footer-bottom { border-top: 1px solid var(--line); padding: 18px 0 30px; display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); letter-spacing: .06em; }
.icp { color: var(--ink-3); }
.icp a { color: var(--ink-2); }
.icp a:hover { color: var(--accent); }

/* ==========================================================================
   part 3/3  栏目页与文章页
   ========================================================================== */

/* ---------- 14. 栏目头 ---------- */
.cat-hero { position: relative; padding: 54px 0 40px; border-bottom: 1px solid var(--line); overflow: hidden; }
.cat-hero::before { content: ""; position: absolute; inset: 0; opacity: .4; pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(122,190,255,.13) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(122,190,255,.13) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(120% 90% at 88% 0%, #000, transparent 72%);
  -webkit-mask-image: radial-gradient(120% 90% at 88% 0%, #000, transparent 72%); }
.cat-hero-inner { position: relative; display: grid; grid-template-columns: minmax(0,1.5fr) minmax(0,.9fr); gap: 40px; align-items: center; }
.cat-eyebrow { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .2em; color: var(--ink-3); }
.cat-title { margin: 14px 0 0; font-size: clamp(38px, 6vw, 66px); font-weight: 900; letter-spacing: .16em; line-height: 1.06; }
.cat-en { font-family: var(--font-disp); font-size: clamp(12px, 1.4vw, 15px); letter-spacing: .5em; color: var(--accent); margin-top: 12px; }
.cat-tagline { margin: 16px 0 0; font-size: 17px; color: var(--ink-2); max-width: 60ch; }
.cat-intro { margin: 14px 0 0; color: var(--ink-3); font-size: 14px; max-width: 70ch; line-height: 1.85; }
.cat-art { border: 1px solid var(--line-2); background: var(--panel-2); padding: 14px; }
.cat-art svg { display: block; width: 100%; height: auto; }
.tag-cloud { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 20px; }

/* 栏目统计条 */
.cat-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin-top: 30px;
  background: var(--line); border: 1px solid var(--line); }
.cat-stats div { background: rgba(8,13,26,.9); padding: 14px 18px; }
.cat-stats b { display: block; font-family: var(--font-disp); font-size: 24px; color: #fff; letter-spacing: .05em; }
.cat-stats span { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; color: var(--ink-3); }

/* ---------- 15. 工具条 ---------- */
.toolbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 16px 18px; border: 1px solid var(--line);
  background: rgba(8,13,26,.78); margin-bottom: 26px; }
.toolbar input[type="search"] { flex: 1 1 240px; min-width: 180px; padding: 9px 12px; color: var(--ink);
  background: rgba(4,7,15,.9); border: 1px solid var(--line-2); font-family: var(--font-mono); font-size: 13px; outline: none; }
.toolbar input[type="search"]:focus { border-color: var(--accent); box-shadow: var(--glow); }
.toolbar-label { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .14em; color: var(--ink-3); }
.toolbar-count { font-family: var(--font-mono); font-size: 12px; color: var(--accent); margin-left: auto; }
.filter-empty { padding: 40px 0; text-align: center; color: var(--ink-3); font-family: var(--font-mono); }

/* ---------- 16. 文章列表三种版式 ---------- */
.list-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
.list-grid > [data-article] { display: flex; flex-direction: column; height: 100%; }
.lg-card { display: flex; flex-direction: column; border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(13,21,38,.9), rgba(7,12,24,.94)); padding: 20px 18px; transition: transform .24s ease, border-color .24s ease; }
.lg-card:hover { transform: translateY(-5px); border-color: color-mix(in srgb, var(--accent) 52%, transparent); }
.lg-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.lg-no { font-family: var(--font-disp); font-size: 22px; color: transparent; -webkit-text-stroke: 1px color-mix(in srgb, var(--accent) 70%, transparent); }
.lg-title { margin: 0 0 9px; font-size: 17.5px; font-weight: 700; line-height: 1.5; }
.lg-title a { color: var(--ink); } .lg-title a:hover { color: var(--accent); }
.lg-dek { margin: 0; color: var(--ink-3); font-size: 13.3px; line-height: 1.72; flex: 1; }
.lg-foot { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line); display: flex; justify-content: space-between; gap: 10px;
  font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); }

.list-ed[data-article] { display: flex; flex-direction: column; }
.list-ed { border-top: 1px solid var(--line); }
.le-row { display: grid; grid-template-columns: 62px minmax(0,1fr) 190px; gap: 18px; padding: 20px 4px; border-bottom: 1px solid var(--line); transition: padding-left .2s ease, background .2s ease; }
.le-row:hover { background: rgba(34,211,238,.04); padding-left: 12px; }
.le-no { font-family: var(--font-disp); font-size: 30px; line-height: 1.1; color: transparent; -webkit-text-stroke: 1px var(--line-2); }
.le-row:hover .le-no { -webkit-text-stroke-color: var(--accent); }
.le-title { margin: 0 0 6px; font-size: 18.5px; font-weight: 700; }
.le-title a { color: var(--ink); } .le-title a:hover { color: var(--accent); }
.le-dek { margin: 0; color: var(--ink-3); font-size: 13.4px; }
.le-side { text-align: right; font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-3); }
.le-side .tag { margin-bottom: 4px; }

.list-idx { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0 32px; border-top: 1px solid var(--line); }
.li-row { display: flex; gap: 12px; align-items: baseline; padding: 12px 0; border-bottom: 1px dashed var(--line); }
.li-no { font-family: var(--font-mono); font-size: 11.5px; color: var(--accent); flex: none; letter-spacing: .08em; padding-top: 2px; }
.li-main { min-width: 0; }
.li-title { font-size: 15.6px; font-weight: 600; }
.li-title a { color: var(--ink); } .li-title a:hover { color: var(--accent); }
.li-dek { color: var(--ink-3); font-size: 12.6px; margin-top: 3px; display: block; }
.list-idx .li-row[data-article] { display: flex; }

/* ---------- 17. 文章页 ---------- */
.art-hero { position: relative; padding: 40px 0 30px; border-bottom: 1px solid var(--line); overflow: hidden; }
.art-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .35;
  background: radial-gradient(900px 300px at 12% 0%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%); }
.crumb { position: relative; display: flex; gap: 9px; flex-wrap: wrap; align-items: center;
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .1em; color: var(--ink-3); }
.crumb a { color: var(--ink-2); } .crumb a:hover { color: var(--accent); }
.crumb i { font-style: normal; opacity: .5; }
.art-title { position: relative; margin: 16px 0 0; font-size: clamp(28px, 4.4vw, 46px); font-weight: 900; line-height: 1.24; letter-spacing: .02em; max-width: 30ch; }
.art-dek { position: relative; margin: 16px 0 0; max-width: 74ch; color: var(--ink-2); font-size: 16px; line-height: 1.85;
  padding-left: 16px; border-left: 2px solid var(--accent); }
.art-meta { position: relative; display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 22px; font-family: var(--font-mono); font-size: 11.8px; color: var(--ink-3); letter-spacing: .06em; }
.art-meta b { color: var(--ink-2); font-weight: 500; }

.art-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 44px; padding: 44px 0 20px; align-items: start; }
.art-main { min-width: 0; }
.art-side { position: sticky; top: 88px; display: flex; flex-direction: column; gap: 16px; }
.side-card { border: 1px solid var(--line); background: rgba(9,15,28,.82); padding: 18px; }
.side-card h4 { margin: 0 0 12px; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .18em; color: var(--accent); }
.side-card p { margin: 0; color: var(--ink-3); font-size: 13.2px; line-height: 1.8; }
.side-art { border: 1px solid var(--line-2); background: var(--panel-2); padding: 10px; }
.side-art svg { display: block; width: 100%; height: auto; }
.side-meta { list-style: none; margin: 0; padding: 0; }
.side-meta li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px dashed var(--line); font-size: 13px; color: var(--ink-3); }
.side-meta li:last-child { border-bottom: 0; }
.side-meta b { color: var(--ink-2); font-weight: 500; font-family: var(--font-mono); font-size: 12.4px; }
.side-note { border-left: 2px solid var(--amber); }

/* 目录 */
.toc { border: 1px solid var(--line); background: rgba(9,15,28,.82); padding: 18px 20px; margin-bottom: 34px; }
.toc h4 { margin: 0 0 12px; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .18em; color: var(--accent); }
.toc-list { list-style: none; margin: 0; padding: 0; counter-reset: t; }
.toc-list li { margin-bottom: 7px; counter-increment: t; }
.toc-list a { color: var(--ink-2); font-size: 14px; display: flex; gap: 10px; }
.toc-list a::before { content: counter(t, decimal-leading-zero); font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); padding-top: 3px; }
.toc-list a:hover, .toc-list a.is-active { color: var(--accent); }

/* 正文 */
.art-body { font-size: 16.4px; line-height: 1.95; }
.art-body h2, .art-main > section > h2 { margin: 46px 0 16px; font-size: clamp(21px, 2.5vw, 27px); font-weight: 800; letter-spacing: .03em;
  padding-left: 16px; position: relative; line-height: 1.45; }
.art-body h2::before, .art-main > section > h2::before { content: ""; position: absolute; left: 0; top: .18em; bottom: .18em; width: 4px; background: linear-gradient(180deg, var(--accent), var(--accent-2)); }
.art-main > section > .faq { margin-top: 4px; }
.art-body h2 .h-num { font-family: var(--font-disp); font-size: .78em; color: var(--accent); margin-right: 10px; letter-spacing: .05em; }
.art-body h3 { margin: 30px 0 12px; font-size: 18px; letter-spacing: .04em; }
.art-body > section > p:first-of-type::first-letter { }
.art-body .lead { font-size: 17px; color: var(--ink); }

.box { border: 1px solid var(--line); border-left: 3px solid var(--accent); background: rgba(11,18,34,.8); padding: 18px 20px; margin: 26px 0; }
.box h5 { margin: 0 0 10px; font-size: 14.5px; letter-spacing: .06em; color: var(--accent); }
.box ul { margin: 0; padding-left: 1.2em; }
.box li { font-size: 14.6px; color: var(--ink-2); }
.box-tip { border-left-color: var(--amber); } .box-tip h5 { color: var(--amber); }
.box-pink { border-left-color: var(--accent-2); } .box-pink h5 { color: var(--accent-2); }

.check-list { list-style: none; margin: 22px 0; padding: 0; }
.check-list li { position: relative; padding-left: 28px; margin-bottom: 10px; color: var(--ink-2); }
.check-list li::before { content: "◇"; position: absolute; left: 0; top: 0; color: var(--accent); }

.kv-table { width: 100%; border-collapse: collapse; margin: 26px 0; font-size: 14.4px; }
.kv-table caption { caption-side: top; text-align: left; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .16em; color: var(--ink-3); padding-bottom: 10px; }
.kv-table th, .kv-table td { border: 1px solid var(--line); padding: 11px 13px; text-align: left; vertical-align: top; }
.kv-table th { background: rgba(34,211,238,.07); color: var(--ink); font-weight: 600; font-family: var(--font-mono); font-size: 12.6px; letter-spacing: .08em; }
.kv-table td { color: var(--ink-2); }
.kv-table tr:hover td { background: rgba(255,255,255,.02); }

.pull { margin: 30px 0; padding: 22px 24px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  font-size: 18px; line-height: 1.8; color: var(--ink); position: relative; }
.pull::before { content: "“"; position: absolute; left: -4px; top: -22px; font-size: 64px; color: color-mix(in srgb, var(--accent) 40%, transparent); font-family: Georgia, serif; }

.term-block { border: 1px solid var(--line-2); background: rgba(4,7,14,.92); margin: 24px 0; }
.term-block .tb-head { display: flex; align-items: center; gap: 8px; padding: 9px 13px; border-bottom: 1px dashed var(--line);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; color: var(--ink-3); }
.term-block pre { margin: 0; padding: 14px; overflow-x: auto; font-family: var(--font-mono); font-size: 12.8px; line-height: 1.85; color: var(--lime); }
.ascii-rule { font-family: var(--font-mono); font-size: 12px; color: var(--line-2); letter-spacing: 0; overflow: hidden; white-space: nowrap; margin: 30px 0; }

/* 文末 */
.art-foot { margin-top: 46px; padding-top: 24px; border-top: 1px solid var(--line); }
.art-foot-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 22px; }
.author-box { display: flex; gap: 16px; align-items: flex-start; border: 1px solid var(--line); background: rgba(9,15,28,.8); padding: 20px; }
.author-avatar { width: 52px; height: 52px; flex: none; display: grid; place-items: center; font-family: var(--font-disp); font-size: 20px; color: #04121c;
  background: linear-gradient(180deg, #b9f4ff, var(--accent)); clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); }
.author-box h5 { margin: 0 0 6px; font-size: 15.5px; }
.author-box p { margin: 0; color: var(--ink-3); font-size: 13.4px; }

.pn { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; margin: 26px 0; }
.pn a { display: block; border: 1px solid var(--line); background: rgba(9,15,28,.8); padding: 16px 18px; color: var(--ink-2); transition: border-color .2s ease, transform .2s ease; }
.pn a:hover { border-color: var(--accent); transform: translateY(-3px); color: #fff; }
.pn .pn-k { font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em; color: var(--ink-3); display: block; margin-bottom: 7px; }
.pn .pn-t { font-size: 15px; color: var(--ink); }
.pn .pn-next { text-align: right; }

.related-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; }
.related-grid .lg-card { height: 100%; }

/* ---------- 18. 版式变体 ---------- */
/* magazine：大号章节序号 + 金属首字 */
.layout-magazine .art-body h2 .h-num { font-size: 1.1em; -webkit-text-stroke: 0; display: inline-block; }
.layout-magazine .art-body > section:first-child > p:first-of-type::first-letter {
  float: left; font-size: 62px; line-height: .9; padding: 4px 12px 0 0; font-family: var(--font-disp); color: var(--accent); }

/* terminal：整体等宽化 + 终端框 */
.layout-terminal .art-body { font-family: var(--font-mono); font-size: 14.6px; line-height: 1.95; }
.layout-terminal .art-body h2 { font-family: var(--font-mono); font-size: 20px; letter-spacing: .04em; }
.layout-terminal .art-title { font-family: var(--font-mono); letter-spacing: 0; }
.layout-terminal .art-dek { font-family: var(--font-mono); font-size: 14.4px; }

/* wide：正文变宽 + 侧栏下沉 */
.layout-wide .art-layout { grid-template-columns: minmax(0,1fr); }
.layout-wide .art-side { position: static; flex-direction: row; flex-wrap: wrap; }
.layout-wide .art-side > * { flex: 1 1 260px; }
.layout-wide .art-body { font-size: 17px; }

/* split：左侧留白 + 强调线 */
.layout-split .art-layout { grid-template-columns: 232px minmax(0,1fr) 300px; }
.layout-split .art-side:first-child { position: sticky; top: 88px; }
.layout-split .art-body h2 { border-left: 0; padding-left: 0; }
.layout-split .art-body h2::before { display: none; }
.layout-split .art-body h2 { border-bottom: 1px solid var(--line); padding-bottom: 10px; }

/* 筛选隐藏 */
[hidden] { display: none !important; }

/* ---------- 19. 响应式 ---------- */
@media (max-width: 1120px) {
  .cat-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .art-layout, .layout-split .art-layout { grid-template-columns: minmax(0,1fr); }
  .art-side { position: static; flex-direction: row; flex-wrap: wrap; }
  .art-side > * { flex: 1 1 260px; }
  .hero-inner, .cat-hero-inner { grid-template-columns: minmax(0,1fr); }
  .hero-sun { opacity: .32; }
}
@media (max-width: 860px) {
  .nav-toggle { display: block; }
  .nav-links {
    position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 0;
    background: rgba(5,8,16,.985); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
    padding: 8px 12px 16px; max-height: 70vh; overflow: auto; display: none;
  }
  .site-header.nav-open .nav-links { display: flex; }
  .nav-link { padding: 11px 8px; border-bottom: 1px dashed var(--line); }
  .list-grid, .related-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .spot-grid { grid-template-columns: minmax(0,1fr); }
  .steps { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .stat-strip, .cat-stats { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .ed-item { grid-template-columns: 52px minmax(0,1fr); }
  .ed-item .ed-side { grid-column: 2; }
  .le-row { grid-template-columns: 44px minmax(0,1fr); }
  .le-side { grid-column: 2; text-align: left; }
  .list-idx { grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 560px) {
  body { font-size: 15.4px; }
  .cat-grid, .list-grid, .related-grid, .steps { grid-template-columns: minmax(0,1fr); }
  .pn { grid-template-columns: minmax(0,1fr); }
  .pn .pn-next { text-align: left; }
  .brand-slogan { display: none; }
  .section { padding: 42px 0; }
  .hero { padding: 46px 0 36px; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
}