/* ==========================================================================
   PRISM — wecanar.com (我看AR) 前端主题
   主题英文名: Prism / 棱镜
   设计意图: AR 与 VR 的本质都是「光」——棱镜把一束白光折射成光谱，
             隐喻「现实 → 虚拟」的折射过程。
   版本: 1.0.0
   作者: 前端实现 / 唯快
   --------------------------------------------------------------------------
   目录
   00 设计令牌 (Design Tokens)
   01 基础重置与排版
   02 布局骨架 (Container / Grid / Section)
   03 品牌标识与导航
   04 通用组件 (Button / Pill / Badge / Card / Divider)
   05 图片封面系统 (Cover)
   06 首页模块 (Hero / Ticker / Filter / Feed / Sidebar)
   07 文章详情模块 (Article / TOC / Prose / Related)
   08 归档与列表页模块
   09 商业化容器 (Ad Slot / Sponsor)
   10 页脚
   11 反馈态 (Skeleton / Empty / 404)
   12 动效与滚动进场
   13 响应式断点
   14 可访问性与偏好降级
   ========================================================================== */

/* ==========================================================================
   00 设计令牌
   ========================================================================== */

:root {
  /* --- 品牌光谱 (Brand Spectrum) --- */
  --brand-teal:   #2DE2C5;   /* 极光青 — AR 指向 */
  --brand-sky:    #38BDF8;   /* 天蓝   — XR 临界 */
  --brand-violet: #7B61FF;   /* 电紫   — VR 指向 */
  --brand-rose:   #FF5F8F;   /* 玫红   — 数据/情绪强调 */
  --gold:         #F5C462;   /* 琥珀金 — 编辑部精选 / 商业合作，稀缺使用 */
  --gold-deep:    #C9963A;

  --grad-spectrum: linear-gradient(120deg, var(--brand-teal) 0%, var(--brand-sky) 42%, var(--brand-violet) 100%);
  --grad-spectrum-soft: linear-gradient(120deg, rgba(45,226,197,.16), rgba(123,97,255,.16));
  --grad-gold: linear-gradient(120deg, #F5C462 0%, #E0A93C 60%, #C9963A 100%);

  /* --- 深色模式（默认） --- */
  --bg:            #070A12;
  --bg-deep:       #04060C;
  --bg-elev:       #0C1120;
  --surface:       rgba(255, 255, 255, 0.038);
  --surface-hover: rgba(255, 255, 255, 0.062);
  --surface-solid: #0E1424;
  --line:          rgba(255, 255, 255, 0.080);
  --line-strong:   rgba(255, 255, 255, 0.160);
  --line-glow:     rgba(45, 226, 197, 0.42);

  --text:          #E9EEF8;
  --text-2:        #9BA6BC;
  --text-3:        #626D84;
  --text-invert:   #070A12;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .55);
  --shadow:    0 18px 40px -22px rgba(0, 0, 0, .92);
  --shadow-lg: 0 40px 80px -40px rgba(0, 0, 0, .96);
  --glow-teal:   0 0 0 1px rgba(45,226,197,.28), 0 18px 46px -22px rgba(45,226,197,.45);
  --glow-violet: 0 0 0 1px rgba(123,97,255,.30), 0 18px 46px -22px rgba(123,97,255,.50);

  /* 导航毛玻璃 */
  --nav-bg:     rgba(7, 10, 18, 0.72);
  --overlay-bg: rgba(4, 6, 12, 0.78);

  /* --- 字体 ---
     中文优先取各平台最优字体：macOS/iOS 命中 PingFang，鸿蒙/部分国产 ROM 命中
     HarmonyOS Sans，Windows 若装了思源黑体也能命中，最后才落到微软雅黑。
     Inter 只负责拉丁字母与数字，靠 unicode-range 自然分工。 */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
               "PingFang SC", "HarmonyOS Sans SC", "HarmonyOS Sans",
               "Source Han Sans SC", "Noto Sans CJK SC", "MiSans",
               "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono",
               Menlo, Consolas, monospace;
  /* 正文专用字体栈：把 Inter 放后面，避免中文段落里的拉丁字母过于抢眼 */
  --font-read: "PingFang SC", "HarmonyOS Sans SC", "Source Han Sans SC",
               "Noto Sans CJK SC", "MiSans", "Hiragino Sans GB",
               "Microsoft YaHei", -apple-system, BlinkMacSystemFont, sans-serif;

  /* 流体字阶 */
  --fs-display: clamp(2.25rem, 5.4vw, 3.75rem);
  --fs-h1:      clamp(1.875rem, 3.6vw, 2.75rem);
  --fs-h2:      clamp(1.375rem, 2.3vw, 1.875rem);
  --fs-h3:      clamp(1.125rem, 1.5vw, 1.375rem);
  --fs-h4:      1.0625rem;
  --fs-body:    1.0625rem;   /* 17px — 中文长文最佳阅读字号 */
  --fs-sm:      0.9375rem;   /* 15px */
  --fs-xs:      0.8125rem;   /* 13px */
  --fs-2xs:     0.6875rem;   /* 11px — 仅用于全大写标签 */

  --lh-tight: 1.18;
  --lh-snug:  1.38;
  --lh-body:  1.62;
  --lh-prose: 1.85;          /* 阅读区行高：正文段落 */
  --lh-loose: 1.95;          /* 阅读区行高：长段落 / 引用，给密排汉字更多呼吸 */
  --lh-tight-text: 1.7;      /* 阅读区行高：列表 / 表格 / 图注等短行文本 */

  --ls-tight: -0.022em;
  --ls-normal: 0;
  --ls-wide: 0.14em;         /* 全大写小标签 */
  --ls-cjk: 0.012em;         /* 中文正文微字距，密排汉字更透气 */

  /* --- 空间与形状 --- */
  --sp-1: 4px;  --sp-2: 8px;   --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px;  --sp-8: 32px; --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px;

  --r-xs: 6px;  --r-sm: 10px; --r-md: 14px;
  --r-lg: 20px; --r-xl: 28px; --r-full: 999px;

  --container: 1280px;
  --prose-width: 44rem;      /* 阅读区最佳行长 ≈ 704px，中文单行 38–42 字 */
  --prose-wide: 54rem;       /* 宽幅图可以突破到此宽度 */
  --prose-pad: var(--sp-6);  /* 正文区左右留白，移动端会收窄 */

  /* 文章页右侧目录栏宽度，以及全幅图向右出血的距离。
     全幅图靠这个值撑到与文章封面同宽，避免出现「封面比正文图片宽一截」的不一致。 */
  --toc-w: 260px;
  --article-bleed: calc(var(--toc-w) + var(--sp-12));

  /* 阅读区垂直节奏：用 em 跟随字号缩放，读者调大字号后节奏仍成比例 */
  --prose-para-gap: 1.15em;  /* 段间距 */
  --prose-fig-gap: 2.4rem;   /* 图片 / 表格 / 代码块上下间距 */
  --prose-cap-gap: 0.7rem;   /* 图注与图片的间距 */

  --ease: cubic-bezier(.22, .68, .26, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dur-fast: 140ms;
  --dur: 240ms;
  --dur-slow: 520ms;

  --nav-h: 68px;

  /* 阅读区文字色：深色模式下纯白刺眼，降到 88% 更耐读 */
  --prose-text: #D8DEE9;
  --prose-strong: #F4F7FC;
  --prose-dim: #98A3B8;
}

/* --- 浅色模式（阅读优先，走 Stripe 式克制白底） --- */
[data-theme="light"] {
  --bg:            #FFFFFF;
  --bg-deep:       #F5F7FB;
  --bg-elev:       #FFFFFF;
  --surface:       #FFFFFF;
  --surface-hover: #F7F9FC;
  --surface-solid: #FFFFFF;
  --line:          #E5E9F0;
  --line-strong:   #CFD6E2;
  --line-glow:     rgba(15, 138, 122, 0.42);

  --text:          #0B0E14;
  --text-2:        #5A6479;
  --text-3:        #8A93A6;
  --text-invert:   #FFFFFF;

  /* 浅底下降饱和，避免霓虹刺眼 */
  --brand-teal:    #0F8A7A;
  --brand-sky:     #0E7FC4;
  --brand-violet:  #5A44D6;
  --gold:          #A9741A;
  --gold-deep:     #8A5E12;
  --grad-spectrum: linear-gradient(120deg, #0F8A7A 0%, #0E7FC4 42%, #5A44D6 100%);
  --grad-spectrum-soft: linear-gradient(120deg, rgba(15,138,122,.10), rgba(90,68,214,.10));
  --grad-gold: linear-gradient(120deg, #C08A22, #A9741A);

  --shadow-sm: 0 1px 2px rgba(16, 24, 40, .05);
  --shadow:    0 2px 4px rgba(16, 24, 40, .04), 0 14px 34px -16px rgba(16, 24, 40, .14);
  --shadow-lg: 0 4px 8px rgba(16, 24, 40, .05), 0 32px 64px -28px rgba(16, 24, 40, .18);
  --glow-teal:   0 0 0 1px rgba(15,138,122,.25), 0 16px 34px -20px rgba(15,138,122,.4);
  --glow-violet: 0 0 0 1px rgba(90,68,214,.25), 0 16px 34px -20px rgba(90,68,214,.4);

  --nav-bg:     rgba(255, 255, 255, 0.82);
  --overlay-bg: rgba(255, 255, 255, 0.86);

  /* 浅色底上不追求极黑，1F2733 在纯白上约 13:1，长时间阅读不刺眼 */
  --prose-text:   #222A36;
  --prose-strong: #0B0E14;
  --prose-dim:    #616B7E;
}

/* ==========================================================================
   01 基础重置与排版
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 20px);
}

body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-feature-settings: "kern" 1, "liga" 1, "cv11" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

/* 深色模式的环境光：两处极光光晕 + 细网格，营造空间纵深 */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(58rem 34rem at 8% -6%,  rgba(45, 226, 197, 0.13), transparent 62%),
    radial-gradient(52rem 34rem at 96% 4%,  rgba(123, 97, 255, 0.14), transparent 60%),
    radial-gradient(48rem 30rem at 50% 108%, rgba(56, 189, 248, 0.08), transparent 62%);
}
[data-theme="light"] body::before {
  background:
    radial-gradient(58rem 34rem at 8% -6%,  rgba(15, 138, 122, 0.07), transparent 62%),
    radial-gradient(52rem 34rem at 96% 4%,  rgba(90, 68, 214, 0.07), transparent 60%);
}

/* 极细噪点，消除大面积纯色的廉价感 */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .028;
  background-image: 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='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--text);
  text-wrap: balance;
}

p { margin: 0 0 var(--sp-4); }

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}

img, svg, video { display: block; max-width: 100%; }

ul, ol { margin: 0; padding: 0; list-style: none; }

/* 这几个标签浏览器默认带 margin（figure / blockquote 还带 40px 左右外边距），
   不清掉会在任何容器里造成难以定位的偏移 */
figure, blockquote, dl, dd, fieldset { margin: 0; }
figure { min-width: 0; }
blockquote, dd { margin-inline: 0; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
  margin: 0;
}
button { background: none; border: 0; cursor: pointer; }

hr { border: 0; border-top: 1px solid var(--line); margin: var(--sp-10) 0; }

::selection { background: rgba(45, 226, 197, .28); color: var(--text); }

/* 滚动条 */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border: 3px solid var(--bg);
  border-radius: var(--r-full);
}
::-webkit-scrollbar-thumb:hover { background: var(--brand-teal); }

/* 跳至主内容（键盘可访问） */
.skip-link {
  position: fixed;
  top: -100px; left: var(--sp-6);
  z-index: 200;
  padding: var(--sp-3) var(--sp-5);
  background: var(--brand-teal);
  color: #04120F;
  font-weight: 700;
  border-radius: var(--r-sm);
  transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: var(--sp-4); }

/* ==========================================================================
   02 布局骨架
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--sp-6);
}

.container--narrow { max-width: 1024px; }
.container--wide   { max-width: 1480px; }

.grid {
  display: grid;
  gap: var(--sp-6);
}
.grid--main   { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; }
.grid--2      { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3      { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4      { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--hero   { grid-template-columns: minmax(0, 1.72fr) minmax(0, 1fr); }

.stack > * + * { margin-top: var(--sp-6); }

.section { padding-block: var(--sp-16); }
.section--tight { padding-block: var(--sp-10); }

main { display: block; min-height: 60vh; }

/* 键盘焦点统一 */
:focus-visible {
  outline: 2px solid var(--brand-teal);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

/* ==========================================================================
   03 品牌标识与导航
   ========================================================================== */

.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--nav-h);
  background: var(--nav-bg);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--line);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.nav.is-scrolled { border-bottom-color: var(--line-strong); }

.nav__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  height: 100%;
}

/* 品牌 */
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  flex-shrink: 0;
}
.brand__mark {
  width: 32px; height: 32px;
  flex-shrink: 0;
  border-radius: 9px;
  background: var(--grad-spectrum);
  display: grid;
  place-items: center;
  box-shadow: var(--glow-teal);
  transition: transform var(--dur-slow) var(--ease-out);
}
.brand:hover .brand__mark { transform: rotate(-12deg) scale(1.06); }
.brand__mark svg { width: 18px; height: 18px; }
.brand__text {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}
.brand__name {
  font-size: 1.0625rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.brand__sub {
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-3);
}

/* --- 图形 Logo（沿用原站品牌图）---
   原图是「浅底设计」：蓝色图形标 + 深灰文字。直接放到深色导航上，
   文字会整片消失（实测深灰 #333 压在 #0B0F18 上对比度仅 1.1:1）。
   所以准备两份静态资源：浅色导航用原图，深色导航用反色版
   （文字提亮为浅色、图形标保留品牌蓝）。切换纯靠 CSS，
   不经过 JS，因此首屏渲染出来就是对的，不会闪。
   尺寸用 clamp 跟着视口走，不需要额外写媒体查询。 */
.brand__logo {
  display: block;
  height: clamp(34px, 3.4vw, 46px);
  width: auto;
  max-width: 100%;
  transition: opacity var(--dur-fast) var(--ease);
}
.brand:hover .brand__logo { opacity: .86; }
/* 默认（浅色）只显示原图 */
.brand__logo--onDark { display: none; }
[data-theme="dark"] .brand__logo--onLight { display: none; }
[data-theme="dark"] .brand__logo--onDark { display: block; }

/* 主导航 */
.nav__menu {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  margin-left: var(--sp-4);
}
.nav__link {
  position: relative;
  display: block;
  padding: var(--sp-2) var(--sp-4);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-2);
  border-radius: var(--r-sm);
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.nav__link:hover { color: var(--text); background: var(--surface-hover); }
.nav__link.is-active { color: var(--text); }
.nav__link.is-active::after {
  content: "";
  position: absolute;
  left: 50%; bottom: 2px;
  transform: translateX(-50%);
  width: 16px; height: 2px;
  border-radius: 2px;
  background: var(--grad-spectrum);
}

.nav__right {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-left: auto;
}

/* 图标按钮 */
.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 38px; height: 38px;
  border-radius: var(--r-sm);
  color: var(--text-2);
  border: 1px solid transparent;
  transition: all var(--dur-fast) var(--ease);
}
.icon-btn:hover {
  color: var(--text);
  background: var(--surface-hover);
  border-color: var(--line);
}
.icon-btn svg { width: 18px; height: 18px; }

.nav__toggle { display: none; }

/* 搜索抽屉 */
.search-panel {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: grid;
  place-items: start center;
  padding-top: 14vh;
  background: var(--overlay-bg);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur) var(--ease), visibility var(--dur);
}
.search-panel.is-open { opacity: 1; visibility: visible; }
.search-panel__box {
  width: min(680px, calc(100% - 48px));
  transform: translateY(-14px) scale(.985);
  transition: transform var(--dur-slow) var(--ease-out);
}
.search-panel.is-open .search-panel__box { transform: none; }

.search-field {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-6);
  background: var(--surface-solid);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
}
.search-field svg { width: 20px; height: 20px; color: var(--text-3); flex-shrink: 0; }
.search-field input {
  flex: 1;
  border: 0;
  background: none;
  outline: none;
  font-size: 1.125rem;
}
.search-field input::placeholder { color: var(--text-3); }
.search-hint {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-5);
  align-items: center;
}
.search-hint__label {
  font-size: var(--fs-xs);
  color: var(--text-3);
  margin-right: var(--sp-1);
}

/* 移动端抽屉 */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 160;
  pointer-events: none;
}
.drawer__scrim {
  position: absolute; inset: 0;
  background: var(--overlay-bg);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.drawer__panel {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: min(320px, 84vw);
  padding: var(--sp-6);
  background: var(--bg-elev);
  border-left: 1px solid var(--line);
  transform: translateX(100%);
  transition: transform var(--dur-slow) var(--ease-out);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.drawer.is-open { pointer-events: auto; }
.drawer.is-open .drawer__scrim { opacity: 1; }
.drawer.is-open .drawer__panel { transform: none; }
.drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-6);
}
.drawer__list { display: flex; flex-direction: column; gap: var(--sp-1); }
.drawer__list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-4) var(--sp-4);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--text-2);
  border-radius: var(--r-md);
  transition: all var(--dur-fast) var(--ease);
}
.drawer__list a:hover { color: var(--text); background: var(--surface-hover); }
.drawer__list a span { font-size: var(--fs-xs); color: var(--text-3); font-weight: 500; }

/* 阅读进度条 */
.progress {
  position: fixed;
  top: 0; left: 0;
  z-index: 120;
  height: 2px;
  width: 0;
  background: var(--grad-spectrum);
  box-shadow: 0 0 12px rgba(45, 226, 197, .65);
  transition: width 90ms linear;
}

/* ==========================================================================
   04 通用组件
   ========================================================================== */

/* --- 按钮 --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  height: 44px;
  padding: 0 var(--sp-6);
  font-size: var(--fs-sm);
  font-weight: 650;
  letter-spacing: -0.005em;
  border-radius: var(--r-full);
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--dur) var(--ease);
}
.btn svg { width: 17px; height: 17px; }

.btn--primary {
  background: var(--grad-spectrum);
  color: #04120F;
  box-shadow: var(--glow-teal);
}
.btn--primary:hover { transform: translateY(-1px); box-shadow: 0 0 0 1px rgba(45,226,197,.4), 0 22px 48px -20px rgba(45,226,197,.6); }

.btn--ghost {
  background: var(--surface);
  color: var(--text);
  border-color: var(--line);
  backdrop-filter: blur(10px);
}
.btn--ghost:hover { background: var(--surface-hover); border-color: var(--line-strong); transform: translateY(-1px); }

.btn--outline {
  background: transparent;
  color: var(--brand-teal);
  border-color: color-mix(in srgb, var(--brand-teal) 40%, transparent);
}
[data-theme="light"] .btn--outline { color: var(--brand-teal); }
.btn--outline:hover { background: color-mix(in srgb, var(--brand-teal) 10%, transparent); }

.btn--gold {
  background: var(--grad-gold);
  color: #241703;
  box-shadow: 0 14px 34px -18px rgba(245, 196, 98, .6);
}

.btn--sm { height: 36px; padding: 0 var(--sp-4); font-size: var(--fs-xs); }
.btn--lg { height: 52px; padding: 0 var(--sp-8); font-size: var(--fs-body); }
.btn--block { width: 100%; }

/* --- 分类胶囊 --- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 var(--sp-3);
  font-size: var(--fs-xs);
  font-weight: 650;
  border-radius: var(--r-full);
  color: var(--text-2);
  background: var(--surface);
  border: 1px solid var(--line);
  backdrop-filter: blur(8px);
  white-space: nowrap;
  transition: all var(--dur-fast) var(--ease);
}
.pill:hover { color: var(--text); border-color: var(--line-strong); }

.pill--teal   { color: var(--brand-teal);   border-color: color-mix(in srgb, var(--brand-teal) 34%, transparent);   background: color-mix(in srgb, var(--brand-teal) 12%, transparent); }
.pill--violet { color: var(--brand-violet); border-color: color-mix(in srgb, var(--brand-violet) 34%, transparent); background: color-mix(in srgb, var(--brand-violet) 12%, transparent); }
.pill--sky    { color: var(--brand-sky);    border-color: color-mix(in srgb, var(--brand-sky) 34%, transparent);    background: color-mix(in srgb, var(--brand-sky) 12%, transparent); }
.pill--rose   { color: var(--brand-rose);   border-color: color-mix(in srgb, var(--brand-rose) 34%, transparent);   background: color-mix(in srgb, var(--brand-rose) 12%, transparent); }
.pill--gold   { color: var(--gold);         border-color: color-mix(in srgb, var(--gold) 40%, transparent);         background: color-mix(in srgb, var(--gold) 13%, transparent); }

/* 小圆点 */
.dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.dot--live {
  background: var(--brand-rose);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-rose) 22%, transparent);
  animation: pulse 2.1s var(--ease) infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-rose) 22%, transparent); }
  50%      { box-shadow: 0 0 0 7px color-mix(in srgb, var(--brand-rose) 0%, transparent); }
}

/* --- 区块标题 --- */
.sec-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-6);
  margin-bottom: var(--sp-8);
}
.sec-head__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--brand-teal);
  margin-bottom: var(--sp-3);
}
.sec-head__title {
  font-size: var(--fs-h2);
  font-weight: 800;
}
.sec-head__desc {
  margin-top: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--text-2);
  max-width: 46ch;
}
.sec-head__more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-2);
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease), gap var(--dur-fast) var(--ease);
}
.sec-head__more:hover { color: var(--brand-teal); gap: 10px; }
.sec-head__more svg { width: 15px; height: 15px; }

/* --- 通用卡片容器 --- */
.card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease),
              transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
[data-theme="light"] .card { box-shadow: var(--shadow-sm); }

.card--pad { padding: var(--sp-6); }

/* 悬停态：上浮 2px + 边框点亮 + 阴影加深 */
.card--hover:hover {
  transform: translateY(-2px);
  border-color: var(--line-strong);
  background: var(--surface-hover);
  box-shadow: var(--shadow);
}

/* 顶部 1px 高光，玻璃质感的关键 */
.card--glass::before {
  content: "";
  position: absolute;
  top: 0; left: var(--r-lg); right: var(--r-lg);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);
  border-radius: var(--r-full);
  pointer-events: none;
}
[data-theme="light"] .card--glass::before { display: none; }

/* 元信息行 */
.meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--text-3);
}
.meta__sep { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .55; }

/* 头像 */
.avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--line-strong);
  background: var(--grad-spectrum-soft);
  flex-shrink: 0;
}
.avatar--lg { width: 56px; height: 56px; }
.avatar--xl { width: 76px; height: 76px; border-width: 2px; }

/* 作者行 */
.author {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.author__name { font-size: var(--fs-sm); font-weight: 650; }
.author__meta { font-size: var(--fs-xs); color: var(--text-3); }

/* 数据统计 */
.stat { text-align: center; }
.stat__num {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  background: var(--grad-spectrum);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.stat__label { font-size: var(--fs-xs); color: var(--text-3); margin-top: 2px; }

/* ==========================================================================
   05 图片封面系统
   原型用 CSS 网格渐变模拟「全息质感」封面，正式环境替换为 <img> 即可
   ========================================================================== */

.cover {
  position: relative;
  overflow: hidden;
  background: #080B14;
  isolation: isolate;
}
.cover__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}
/* 底面全息网格 */
.cover__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.058) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.058) 1px, transparent 1px);
  background-size: 32px 32px, 32px 32px;
  -webkit-mask-image: radial-gradient(118% 118% at 50% 36%, #000 10%, transparent 80%);
  mask-image: radial-gradient(118% 118% at 50% 36%, #000 10%, transparent 80%);
  transition: transform var(--dur-slow) var(--ease-out);
}
/* 暗角：把视觉焦点收回中心，并压掉四角的廉价感 */
.cover::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  /* 收得更紧：封面四角露出的渐变最亮，是「黑字白字都难读」的元凶 */
  background: radial-gradient(126% 112% at 50% 42%, transparent 46%, rgba(4, 6, 12, .58) 100%);
}
/* 底部渐隐，保证叠字可读。
   渐变压暗必须从标题区就开始（原来 34% 之前完全透明，
   而 banner 标题的顶部正好落在这一区间，只能靠渐变最亮的粉色/蓝色兜底）。 */
.cover__scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(
    180deg,
    rgba(7, 10, 18, 0)    0%,
    rgba(7, 10, 18, .20) 22%,
    rgba(7, 10, 18, .52) 52%,
    rgba(7, 10, 18, .78) 80%,
    rgba(7, 10, 18, .93) 100%
  );
}
.cover__scrim--soft {
  background: linear-gradient(180deg, rgba(7,10,18,0) 46%, rgba(7,10,18,.44) 78%, rgba(7,10,18,.62) 100%);
}

/* 大面积封面叠加「全息 HUD」：同心轨道 + 扫描线 + 斜向光带
   小尺寸列表缩略图不叠加，避免噪声 */
.hero-card::after,
.hero-mini::after,
.post-feature__cover::after,
.post-card__cover::after,
.article-cover .cover::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 76% 28%, transparent 0 15%, rgba(255,255,255,.15) 15.2% 15.55%, transparent 15.75% 25.5%, rgba(255,255,255,.10) 25.7% 25.95%, transparent 26.2% 37%, rgba(255,255,255,.055) 37.2% 37.4%, transparent 37.6%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.032) 0 1px, transparent 1px 6px),
    linear-gradient(116deg, transparent 30%, rgba(255,255,255,.075) 46%, transparent 60%);
  -webkit-mask-image: radial-gradient(126% 126% at 62% 34%, #000 6%, transparent 76%);
  mask-image: radial-gradient(126% 126% at 62% 34%, #000 6%, transparent 76%);
}

/* 8 套全息光谱变体（降低不透明度，让网格与 HUD 透出来） */
.cover--1 { background: radial-gradient(96% 96% at 12% 8%,  rgba(45,226,197,.60) 0%, transparent 56%), radial-gradient(92% 92% at 88% 94%, rgba(123,97,255,.64) 0%, transparent 58%), radial-gradient(120% 120% at 50% 50%, rgba(56,189,248,.16) 0%, transparent 72%), linear-gradient(140deg, #0A1424, #07090F); }
.cover--2 { background: radial-gradient(96% 96% at 84% 10%, rgba(56,189,248,.58) 0%, transparent 56%), radial-gradient(92% 92% at 10% 92%, rgba(255,95,143,.55) 0%, transparent 58%), radial-gradient(120% 120% at 50% 50%, rgba(123,97,255,.14) 0%, transparent 72%), linear-gradient(140deg, #0B1224, #07090F); }
.cover--3 { background: radial-gradient(96% 96% at 20% 88%, rgba(123,97,255,.62) 0%, transparent 58%), radial-gradient(92% 92% at 86% 8%,  rgba(45,226,197,.56) 0%, transparent 56%), radial-gradient(120% 120% at 50% 50%, rgba(56,189,248,.13) 0%, transparent 72%), linear-gradient(140deg, #0D1024, #07090F); }
.cover--4 { background: radial-gradient(96% 96% at 50% 2%,  rgba(245,196,98,.50) 0%, transparent 54%), radial-gradient(96% 96% at 20% 100%, rgba(123,97,255,.60) 0%, transparent 60%), radial-gradient(120% 120% at 50% 50%, rgba(255,95,143,.12) 0%, transparent 72%), linear-gradient(140deg, #141022, #07090F); }
.cover--5 { background: radial-gradient(96% 96% at 8% 40%,  rgba(255,95,143,.56) 0%, transparent 56%), radial-gradient(96% 96% at 92% 60%, rgba(56,189,248,.56) 0%, transparent 58%), radial-gradient(120% 120% at 50% 50%, rgba(123,97,255,.13) 0%, transparent 72%), linear-gradient(140deg, #160E1E, #07090F); }
.cover--6 { background: radial-gradient(100% 96% at 70% 6%,  rgba(45,226,197,.54) 0%, transparent 52%), radial-gradient(96% 96% at 16% 96%, rgba(90,68,214,.62) 0%, transparent 60%), radial-gradient(120% 120% at 50% 50%, rgba(56,189,248,.14) 0%, transparent 72%), linear-gradient(140deg, #08171C, #07090F); }
.cover--7 { background: radial-gradient(100% 96% at 30% 4%,  rgba(56,189,248,.56) 0%, transparent 54%), radial-gradient(96% 96% at 88% 92%, rgba(123,97,255,.62) 0%, transparent 60%), radial-gradient(120% 120% at 50% 50%, rgba(45,226,197,.13) 0%, transparent 72%), linear-gradient(140deg, #0A1624, #07090F); }
.cover--8 { background: radial-gradient(100% 96% at 78% 90%, rgba(45,226,197,.56) 0%, transparent 54%), radial-gradient(96% 96% at 22% 12%, rgba(245,196,98,.48) 0%, transparent 58%), radial-gradient(120% 120% at 50% 50%, rgba(123,97,255,.13) 0%, transparent 72%), linear-gradient(140deg, #0F1511, #07090F); }

/* 小尺寸列表缩略图：不叠 HUD，且减弱压暗，避免糊成一团黑 */
.post-row__cover::before {
  background: radial-gradient(132% 116% at 50% 44%, transparent 64%, rgba(4, 6, 12, .34) 100%);
}
.post-row__cover .cover__scrim {
  background: linear-gradient(180deg, rgba(7,10,18,0) 42%, rgba(7,10,18,.44) 100%);
}

/* 悬停时封面缓慢放大 */
.card--hover:hover .cover__img,
.card--hover:hover .cover__grid { transform: scale(1.045); }
.cover__grid { transition: transform var(--dur-slow) var(--ease-out); }

/* 比例容器 */
.ratio { position: relative; width: 100%; }
.ratio--16x9 { aspect-ratio: 16 / 9; }
.ratio--21x9 { aspect-ratio: 21 / 9; }
.ratio--3x2  { aspect-ratio: 3 / 2; }
.ratio--4x3  { aspect-ratio: 4 / 3; }
.ratio--1x1  { aspect-ratio: 1 / 1; }

/* 分类角标 */
.cover__tag {
  position: absolute;
  top: var(--sp-4); left: var(--sp-4);
  z-index: 3;
}

/* ==========================================================================
   06 首页模块
   ========================================================================== */

/* --- Hero 精选 --- */
.hero { padding-top: var(--sp-10); padding-bottom: var(--sp-8); }

.hero-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 460px;
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
}
.hero-card__body {
  position: relative;
  z-index: 3;
  padding: var(--sp-8);
}
.hero-card__pills { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-5); }
.hero-card__title {
  font-size: var(--fs-display);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.12;
  max-width: 20ch;
  /* 封面内文字恒为浅色，不跟随主题翻转。
     浅色主题下 body 文字是深色 #0B0E14，若被标题继承，
     就变成「黑字压深底」——实测对比度仅 2.54:1，正文标准要求 4.5:1。
     钉死浅色后为 11.05:1，达到 WCAG AAA。 */
  color: #fff;
  /* 渐变的局部高光会让单纯的纯色无法覆盖，加一层阴影兜底 */
  text-shadow: 0 1px 2px rgba(4, 8, 16, .42), 0 6px 26px rgba(4, 8, 16, .34);
}
.hero-card__title a { color: inherit; }
.hero-card__title a:hover { color: var(--brand-teal); }
.hero-card__desc {
  margin-top: var(--sp-5);
  font-size: 1.0625rem;
  line-height: 1.66;
  color: rgba(235, 241, 250, .88);
  text-shadow: 0 1px 2px rgba(4, 8, 16, .40);
  max-width: 56ch;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hero-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-4);
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid rgba(255,255,255,.12);
}
[data-theme="light"] .hero-card__foot { border-top-color: rgba(255,255,255,.16); }
/* 封面在浅色模式下仍是深色影像，因此封面内的文字恒为浅色，不做主题翻转 */
.hero-card__foot .author__name { color: #fff; }
.hero-card__foot .author__meta { color: rgba(255,255,255,.60); }
.hero-card__foot .meta { color: rgba(255,255,255,.64); }

/* Hero 侧栏次级精选 */
.hero-side { display: grid; gap: var(--sp-6); grid-template-rows: repeat(2, 1fr); }
.hero-mini {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 216px;
  padding: var(--sp-5);
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.hero-mini:hover { transform: translateY(-2px); border-color: var(--line-strong); }
.hero-mini__title {
  position: relative;
  z-index: 3;
  font-size: var(--fs-h4);
  font-weight: 700;
  line-height: 1.38;
  /* 与主视觉同理：封面上的文字恒为浅色，并加阴影覆盖渐变最亮的局部 */
  color: #fff;
  text-shadow: 0 1px 2px rgba(4, 8, 16, .45), 0 4px 18px rgba(4, 8, 16, .30);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hero-mini__meta {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
  font-size: var(--fs-xs);
  color: rgba(255,255,255,.62);
}

/* --- 快讯 Ticker --- */
.ticker {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  padding: var(--sp-4) var(--sp-6);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  backdrop-filter: blur(14px);
  overflow: hidden;
}
.ticker__label {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--brand-rose);
  white-space: nowrap;
  flex-shrink: 0;
}
/* 视口负责裁切与两侧渐隐，滚动轨道在其内部平移 */
.ticker__viewport {
  position: relative;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 44px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 44px), transparent 100%);
}
.ticker__track {
  display: flex;
  width: max-content;
  white-space: nowrap;
  animation: ticker-scroll 48s linear infinite;
  will-change: transform;
}
.ticker:hover .ticker__track { animation-play-state: paused; }
.ticker__item {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  margin-right: var(--sp-10);
  font-size: var(--fs-sm);
  color: var(--text-2);
  transition: color var(--dur-fast) var(--ease);
}
.ticker__item:hover { color: var(--brand-teal); }
.ticker__item time { font-size: var(--fs-xs); color: var(--text-3); font-variant-numeric: tabular-nums; }
@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* --- 筛选条 --- */
.filter {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding-bottom: var(--sp-5);
  margin-bottom: var(--sp-2);
  border-bottom: 1px solid var(--line);
}
.filter__tabs {
  display: flex;
  gap: var(--sp-1);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.filter__tabs::-webkit-scrollbar { display: none; }
.filter__tab {
  padding: var(--sp-2) var(--sp-4);
  font-size: var(--fs-sm);
  font-weight: 650;
  color: var(--text-2);
  border-radius: var(--r-full);
  white-space: nowrap;
  transition: all var(--dur-fast) var(--ease);
}
.filter__tab:hover { color: var(--text); background: var(--surface-hover); }
.filter__tab.is-active {
  color: #04120F;
  background: var(--grad-spectrum);
}
.filter__sort {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--text-3);
  flex-shrink: 0;
}
.filter__sort select {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 6px var(--sp-3);
  font-size: var(--fs-xs);
  color: var(--text-2);
  outline: none;
  cursor: pointer;
}

/* --- 信息流 --- */
.feed { display: flex; flex-direction: column; gap: var(--sp-4); }

/* 横向列表卡（默认形态） */
.post-row {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: var(--sp-6);
  padding: var(--sp-5);
  align-items: stretch;
}
.post-row__cover {
  border-radius: var(--r-md);
  overflow: hidden;
  height: 100%;
  min-height: 132px;
}
.post-row__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}
.post-row__title {
  font-size: 1.1875rem;
  font-weight: 700;
  line-height: 1.42;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.post-row__title a:hover { color: var(--brand-teal); }
.post-row__desc {
  margin-top: var(--sp-3);
  font-size: var(--fs-sm);
  line-height: 1.62;
  color: var(--text-2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.post-row__foot {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
  flex-wrap: wrap;
}
.post-row__tags { display: flex; gap: var(--sp-2); flex-wrap: wrap; }

/* 强调头条卡（每 6 条插 1 条，制造节奏） */
.post-feature {
  padding: var(--sp-6);
}
.post-feature__cover {
  border-radius: var(--r-md);
  overflow: hidden;
  margin-bottom: var(--sp-5);
}
.post-feature__title {
  font-size: var(--fs-h2);
  font-weight: 800;
  line-height: 1.26;
  margin-bottom: var(--sp-4);
}
.post-feature__title a:hover { color: var(--brand-teal); }
.post-feature__desc {
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--text-2);
  max-width: 62ch;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.post-feature__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-4);
  margin-top: var(--sp-5);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
}

/* 网格卡（用于「本周精选」等） */
.post-card { overflow: hidden; display: flex; flex-direction: column; height: 100%; }
.post-card__cover { border-bottom: 1px solid var(--line); }
.post-card__body { padding: var(--sp-5); display: flex; flex-direction: column; flex: 1; }
.post-card__title {
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.44;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.post-card__title a:hover { color: var(--brand-teal); }
.post-card__desc {
  margin-top: var(--sp-3);
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--text-2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.post-card__foot {
  margin-top: auto;
  padding-top: var(--sp-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}

/* 加载更多 */
.load-more { display: grid; place-items: center; padding-block: var(--sp-10); }
.load-more__hint { margin-top: var(--sp-3); font-size: var(--fs-xs); color: var(--text-3); }

/* --- 侧栏 --- */
.sidebar { position: sticky; top: calc(var(--nav-h) + var(--sp-6)); display: flex; flex-direction: column; gap: var(--sp-6); }

.widget { overflow: hidden; }
.widget__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-5) var(--sp-5) var(--sp-4);
  border-bottom: 1px solid var(--line);
}
.widget__title {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: -0.01em;
}
.widget__title::before {
  content: "";
  width: 3px; height: 14px;
  border-radius: 2px;
  background: var(--grad-spectrum);
}
.widget__body { padding: var(--sp-5); }

/* 作者卡 */
.author-card {
  position: relative;
  text-align: center;
  padding: var(--sp-8) var(--sp-5) var(--sp-5);
  overflow: hidden;
}
.author-card::before {
  content: "";
  position: absolute;
  top: -60%; left: 50%;
  transform: translateX(-50%);
  width: 220px; height: 220px;
  border-radius: 50%;
  background: var(--grad-spectrum);
  opacity: .16;
  filter: blur(46px);
}
.author-card__avatar {
  position: relative;
  margin: 0 auto var(--sp-4);
  display: block;
}
.author-card__name { font-size: 1.0625rem; font-weight: 700; }
.author-card__bio { margin-top: var(--sp-3); font-size: var(--fs-xs); color: var(--text-2); line-height: 1.65; }
.author-card__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-2);
  margin-top: var(--sp-5);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
}

/* 热门榜 */
.rank-list { display: flex; flex-direction: column; }
.rank-item {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: var(--sp-4);
  padding: var(--sp-4) 0;
  border-bottom: 1px dashed var(--line);
  transition: all var(--dur-fast) var(--ease);
}
.rank-item:last-child { border-bottom: 0; padding-bottom: 0; }
.rank-item:first-child { padding-top: 0; }
.rank-item:hover .rank-item__title { color: var(--brand-teal); }
.rank-item__num {
  font-size: 1.375rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--text-3);
}
.rank-item:nth-child(1) .rank-item__num { background: var(--grad-gold); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.rank-item:nth-child(2) .rank-item__num,
.rank-item:nth-child(3) .rank-item__num { color: var(--brand-teal); }
.rank-item__title {
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.5;
  transition: color var(--dur-fast) var(--ease);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.rank-item__meta { margin-top: 6px; font-size: var(--fs-xs); color: var(--text-3); }

/* 标签云 */
.tag-cloud { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.tag-cloud .pill { height: 30px; }
.tag-cloud .pill[data-weight="3"] { font-size: var(--fs-sm); }

/* 栏目导航卡 */
.cat-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.cat-item {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4);
  border-radius: var(--r-md);
  border: 1px solid transparent;
  transition: all var(--dur-fast) var(--ease);
}
.cat-item:hover { background: var(--surface-hover); border-color: var(--line); }
.cat-item__ico {
  width: 38px; height: 38px;
  flex-shrink: 0;
  border-radius: var(--r-sm);
  display: grid;
  place-items: center;
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #04120F;
}
.cat-item__ico--a { background: linear-gradient(135deg, #2DE2C5, #38BDF8); }
.cat-item__ico--b { background: linear-gradient(135deg, #7B61FF, #B08CFF); color: #fff; }
.cat-item__ico--c { background: linear-gradient(135deg, #38BDF8, #7B61FF); color: #fff; }
.cat-item__ico--d { background: linear-gradient(135deg, #FF5F8F, #FF9A76); color: #fff; }
.cat-item__ico--e { background: linear-gradient(135deg, #F5C462, #E0A93C); }
.cat-item__name { font-size: var(--fs-sm); font-weight: 650; }
.cat-item__desc { font-size: var(--fs-xs); color: var(--text-3); margin-top: 2px; }
.cat-item__count {
  margin-left: auto;
  font-size: var(--fs-xs);
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

/* 归档年份时间线（侧栏用） */
.timeline { display: flex; flex-direction: column; }
.timeline__item {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-3) 0;
  font-size: var(--fs-sm);
  color: var(--text-2);
  transition: color var(--dur-fast) var(--ease);
}
.timeline__item:hover { color: var(--brand-teal); }
.timeline__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--line-strong);
  flex-shrink: 0;
  transition: background var(--dur-fast) var(--ease);
}
.timeline__item:hover .timeline__dot { background: var(--brand-teal); box-shadow: 0 0 10px var(--brand-teal); }
.timeline__count { margin-left: auto; font-size: var(--fs-xs); color: var(--text-3); }

/* ==========================================================================
   07 文章详情
   ========================================================================== */

.article-head { padding-top: var(--sp-10); }
.article-head__inner { max-width: 56rem; }

.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--text-3);
  margin-bottom: var(--sp-6);
  flex-wrap: wrap;
}
.breadcrumb a:hover { color: var(--brand-teal); }
.breadcrumb__sep { opacity: .5; }

.article-title {
  font-size: var(--fs-h1);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.028em;
  margin-bottom: var(--sp-5);
}
.article-lead {
  font-size: 1.1875rem;
  line-height: 1.72;
  color: var(--text-2);
  margin-bottom: var(--sp-6);
  padding-left: var(--sp-5);
  border-left: 2px solid;
  border-image: var(--grad-spectrum) 1;
}
.article-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-5);
  padding-bottom: var(--sp-6);
  border-bottom: 1px solid var(--line);
}
.article-meta__left { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }
.article-meta__right { display: flex; align-items: center; gap: var(--sp-2); }

.article-cover {
  margin-top: var(--sp-8);
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
}
.article-cover figcaption {
  padding: var(--sp-3) var(--sp-5);
  font-size: var(--fs-xs);
  color: var(--text-3);
  border-top: 1px solid var(--line);
  background: var(--surface);
}

.article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--toc-w);
  gap: var(--sp-12);
  align-items: start;
  padding-top: var(--sp-12);
}

/* --- 正文排版 ---
   中文长文的三条底线：
   1) 字号 17px 起、行高 1.85，段间用「空行」不用首行缩进（网页上缩进容易与换行
      混淆，复制粘贴还会带出多余空格）；
   2) 行长锁 44rem（≈704px，单行 38–42 个汉字），超过 46rem 回扫就吃力；
   3) 段间距用 em 而不是 px，读者调大字号后垂直节奏按比例一起放大。 */
.prose {
  /* 正文区用 6 轨网格，而不是单纯的 max-width。
     好处是「宽幅图 / 全幅图」可以直接用 grid-column 跨越轨道突破正文宽度，
     不需要任何负边距魔法，也不会在窄屏产生横向滚动条。
     轨道最小值全部为 0，容器变窄时自动坍缩，无需媒体查询。 */
  display: grid;
  /* 正文主轨的最小值写成 min(正文宽, 100%)：容器够宽时正文锁定 44rem，
     容器变窄时正文优先占用全部可用宽度，两侧出血轨自动归零。
     如果这里写 0，窄屏下网格会先把两侧出血轨喂到 5rem，正文被压到 187px
     （一行只能放 11 个汉字）—— 实测踩过这个坑。 */
  grid-template-columns:
    [full-start] minmax(0, 1fr)
    [wide-start] minmax(0, calc((var(--prose-wide) - var(--prose-width)) / 2))
    [main-start] minmax(min(var(--prose-width), 100%), var(--prose-width))
    [main-end]   minmax(0, calc((var(--prose-wide) - var(--prose-width)) / 2))
    [wide-end]   minmax(0, 1fr)
    [full-end];
  font-family: var(--font-read);
  font-size: var(--fs-body);
  line-height: var(--lh-prose);
  letter-spacing: var(--ls-cjk);
  color: var(--prose-text);
  text-align: start;
  /* 长 URL / 英文长词不撑破容器，但不干扰中文正常断行 */
  overflow-wrap: break-word;
  word-break: normal;
  /* 中文标点挤压 + 中英之间自动留白。Chrome 123+ / Safari 17.4+ 生效，
     不支持的浏览器静默忽略，不影响布局 */
  text-spacing-trim: space-first;
  text-autospace: normal;
  hanging-punctuation: allow-end;
  font-kerning: normal;
  font-optical-sizing: auto;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

/* 所有直接子元素默认落在正文主轨 */
.prose > * { grid-column: main; }

/* 归零所有直接子元素的外边距。用 :where() 保持零特异性，
   这样后面的间距规则可以毫无阻力地覆盖它，不会出现「设了不生效」。
   必须写 margin 而不是 margin-block：浏览器默认样式给 figure / blockquote
   加了 margin-inline: 40px，只清 block 方向会让图片比轨道窄 80px 并居中。
   注意：网格项的外边距不会像常规流那样合并，所以间距必须只用 margin-top 控制。 */
:where(.prose) > * { margin: 0; }

/* 基础节奏：块与块之间默认一个段间距 */
.prose > * + * { margin-top: var(--prose-para-gap); }

/* 段落之间行高再放宽一档：中文长段落密排时 1.85 偏紧，1.95 更耐读 */
.prose > p + p { line-height: var(--lh-loose); }

/* 首段轻微强调，给读者一个进入点 */
.prose > p:first-of-type {
  font-size: 1.1176em;      /* 17px → 19px */
  line-height: 1.8;
  color: var(--prose-strong);
}

.prose p { margin: 0; }
.prose strong { font-weight: 600; color: var(--prose-strong); }
.prose em { font-style: normal; color: var(--prose-dim); }
.prose del { color: var(--prose-dim); text-decoration-thickness: 1px; }
.prose small { font-size: var(--fs-xs); color: var(--prose-dim); }
.prose mark {
  background: color-mix(in srgb, var(--gold) 26%, transparent);
  color: var(--prose-strong);
  padding: .08em .3em;
  border-radius: var(--r-xs);
}

/* 标题：字号、字距、上下留白都收紧，中文标题不需要负字距那么狠 */
.prose h2 {
  font-size: 1.4688rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.012em;
  margin-top: 2.6em;
  margin-bottom: .8em;
  padding-left: var(--sp-4);
  border-left: 3px solid;
  border-image: var(--grad-spectrum) 1;
  color: var(--text);
  text-wrap: balance;
  scroll-margin-top: calc(var(--nav-h) + 24px);
}
.prose h3 {
  font-size: 1.1563rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -0.006em;
  margin-top: 2em;
  margin-bottom: .65em;
  color: var(--text);
  text-wrap: balance;
  scroll-margin-top: calc(var(--nav-h) + 24px);
}
.prose h3::before {
  content: "#";
  margin-right: var(--sp-2);
  font-weight: 800;
  background: var(--grad-spectrum);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.prose h4 {
  font-size: 1.0313rem;
  font-weight: 600;
  line-height: 1.55;
  margin-top: 1.8em;
  margin-bottom: .55em;
  color: var(--text);
}
/* 标题后面紧跟的块不再额外加上边距，避免「标题被推远」 */
.prose h2 + *, .prose h3 + *, .prose h4 + * { margin-top: 0; }

/* 链接：下划线用 em 偏移，随字号缩放；skip-ink 让下划线避开汉字笔画，
   否则中文链接的下划线会和横画粘连，非常糊 */
.prose a {
  color: var(--brand-teal);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--brand-teal) 40%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
  text-decoration-skip-ink: auto;
  transition: color var(--dur-fast) var(--ease), text-decoration-color var(--dur-fast) var(--ease);
}
.prose a:hover {
  text-decoration-color: var(--brand-teal);
  text-decoration-thickness: 2px;
}
/* 外链补一个小箭头，读者不用点开就知道会跳走 */
.prose a[target="_blank"]::after {
  content: "↗";
  font-size: .78em;
  margin-left: .18em;
  opacity: .6;
  text-decoration: none;
}

/* --- 列表 ---
   列表行短、顿挫多，用比正文更紧的行高（1.7）才不会显得松散。
   缩进统一走「悬挂缩进」：条目文字左边界对齐，符号挂在左侧留白里。 */
.prose ul,
.prose ol {
  line-height: var(--lh-tight-text);
  padding-left: 1.7em;
}
.prose li { margin-top: .55em; }
.prose li:first-child { margin-top: 0; }

.prose ul { list-style: none; padding-left: .2em; }
.prose ul > li {
  position: relative;
  padding-left: 1.5em;
}
.prose ul > li::before {
  content: "";
  position: absolute;
  left: .15em;
  top: .76em;
  width: 5px;
  height: 5px;
  border-radius: 1.5px;
  background: var(--grad-spectrum);
}
.prose ol { list-style: decimal; }
.prose ol > li::marker {
  color: var(--brand-teal);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* 嵌套列表：收紧上间距，并给一层弱化的符号做层级区分 */
.prose li > ul,
.prose li > ol { margin-top: .55em; }
.prose ul ul > li::before { background: var(--text-3); }
.prose li > p { margin: 0; }
.prose li > p + p { margin-top: .55em; }

/* 定义列表（术语表常用） */
.prose dt { font-weight: 600; color: var(--prose-strong); margin-top: 1em; }
.prose dd { margin: .35em 0 0; padding-left: 1.2em; color: var(--prose-dim); }

/* --- 重元素（图 / 表 / 代码 / 提示框）的上下留白 ---
   网格项的外边距不合并，所以统一只用「额外上边距」表达：
   实际间距 = 基础段间距 + 额外值，不会和谁叠加成双倍空白。 */
.prose > figure,
.prose > .figure,
.prose > .prose-gallery,
.prose > pre,
.prose > .table-wrap,
.prose > .callout {
  margin-top: var(--prose-fig-gap);
}
.prose > hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin-top: var(--prose-fig-gap);
}

/* --- 引用 --- */
.prose blockquote {
  padding: var(--sp-5) var(--sp-6);
  background: var(--surface);
  border-left: 3px solid var(--brand-violet);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  color: var(--text-2);
  font-size: 1.0313rem;
  line-height: var(--lh-prose);
  letter-spacing: var(--ls-cjk);
}
.prose blockquote > * + * { margin-top: .8em; }
.prose blockquote p:last-child { margin-bottom: 0; }
/* 引用出处 */
.prose blockquote cite,
.prose blockquote footer {
  display: block;
  margin-top: var(--sp-4);
  font-size: var(--fs-xs);
  font-style: normal;
  color: var(--prose-dim);
}
.prose blockquote cite::before,
.prose blockquote footer::before { content: "—— "; }

/* ==========================================================================
   图片系统
   --------------------------------------------------------------------------
   三种宽度档位，通过跨越网格轨道实现，不需要任何负边距：
     .figure          跟随正文      44rem
     .figure--wide    突破到        54rem，适合宽幅数据图 / 界面截图
     .figure--full    突破到容器全宽         ，适合主视觉级横构图
   两条对齐原则：
     1) 单图不强制 100% 拉伸。低分辨率截图被放大只会更糊，所以默认按原始
        尺寸居中，只有明确标了宽幅档位的图才铺满轨道；
     2) 图注左对齐并与图片左边界对齐，不居中。中文长图注居中后每行起点都在
        变，读者的眼睛每次都要重新找位置。
   ========================================================================== */

.prose img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--bg-deep);
}

/* Typecho 正文里的裸 <img> 没有 figure 包裹，给出安全默认：
   不放大、居中、保留圆角 */
.prose > img {
  width: auto;
  justify-self: center;
}

.figure { position: relative; }

/* 图片容器：图片未加载完时先占住位置，CLS 归零 */
.figure__media {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--bg-deep);
  border: 1px solid var(--line);
  cursor: zoom-in;
}
/* 加载骨架，图片 onload 后由 prism.js 加 .is-loaded 淡出 */
.figure__media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(100deg, var(--surface) 30%, var(--surface-hover) 50%, var(--surface) 70%);
  background-size: 240% 100%;
  animation: shimmer 1.5s var(--ease) infinite;
  transition: opacity var(--dur) var(--ease);
}
.figure__media.is-loaded::before { opacity: 0; animation: none; }
.figure__media img {
  position: relative;
  z-index: 1;
  width: 100%;
  border: 0;
  border-radius: 0;
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-out);
}
.figure__media.is-loaded img { opacity: 1; }
/* 不需要放大的图（小图标 / 示意图）不该出现放大镜光标 */
.figure--static .figure__media { cursor: default; }

/* 图注：左对齐、与图片左边界对齐、序号悬挂在左侧 */
.figure__cap {
  display: flex;
  gap: var(--sp-3);
  margin-top: var(--prose-cap-gap);
  font-size: var(--fs-xs);
  line-height: 1.65;
  color: var(--prose-dim);
  letter-spacing: 0;
  text-align: left;
}
.figure__cap b {
  flex-shrink: 0;
  font-weight: 600;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
.figure__cap span { flex: 1; min-width: 0; }
.figure__cap em { font-style: normal; color: var(--text-3); }

/* 宽度档位
   · .figure           正文宽（704px）
   · .figure--wide     左右各出 80px（864px）—— 宽幅图表、界面截图
   · .figure--full     向右出血到与文章封面同宽（1232px）—— 主视觉级横构图
   三档之间差距足够大，不会出现「看起来差不多但没对齐」的观感。 */
.prose > .figure--wide { grid-column: wide; }
.prose > .figure--full {
  grid-column: full;
  /* 跨越右侧的目录留白，撑到容器内容右边缘，与 .article-cover 完全对齐 */
  margin-right: calc(-1 * var(--article-bleed));
}

/* 并排图组：两张或三张共用一段图注。
   并排时默认走宽幅轨道，否则每张只剩 344px，技术图表的坐标轴就看不清了。 */
.prose > .prose-gallery { grid-column: wide; }
.prose-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;          /* 各图保持自身比例，顶部对齐 */
  gap: var(--sp-4);
}
.prose-gallery--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.prose-gallery .figure { position: relative; }
.prose-gallery__cap {
  grid-column: 1 / -1;
  display: flex;
  gap: var(--sp-3);
  font-size: var(--fs-xs);
  line-height: 1.65;
  color: var(--prose-dim);
  text-align: left;
}
.prose-gallery__cap b { flex-shrink: 0; font-weight: 600; color: var(--text-2); }
/* 照片墙才需要统一裁切；技术图表绝不裁切，否则坐标轴和图例会被切掉。
   需要裁切时显式加 .prose-gallery--crop。 */
.prose-gallery--crop .figure__media { height: 100%; }
.prose-gallery--crop .figure__media img { height: 100%; object-fit: cover; }

/* 图片加载失败：不显示裂图，改为一枚低调的说明 */
.figure__media.is-broken {
  display: grid;
  place-items: center;
  min-height: 180px;
  cursor: default;
}
.figure__media.is-broken::after {
  content: "图片加载失败";
  position: relative;
  z-index: 2;
  font-size: var(--fs-xs);
  color: var(--prose-dim);
}
.figure__media.is-broken img { display: none; }

/* --- 行内代码 --- */
.prose code {
  font-family: var(--font-mono);
  font-size: .88em;
  padding: .16em .42em;
  border-radius: var(--r-xs);
  background: var(--surface-hover);
  border: 1px solid var(--line);
  color: var(--brand-teal);
  overflow-wrap: break-word;
}

/* --- 代码块 --- */
.prose pre {
  position: relative;
  padding: var(--sp-5);
  border-radius: var(--r-md);
  background: var(--bg-deep);
  border: 1px solid var(--line);
  overflow-x: auto;
  font-size: var(--fs-sm);
  line-height: 1.72;
  tab-size: 2;
  -webkit-overflow-scrolling: touch;
}
[data-theme="light"] .prose pre { background: #F7F9FC; }
.prose pre code {
  background: none;
  border: 0;
  padding: 0;
  color: var(--prose-text);
  font-size: 1em;
  white-space: pre;
}

/* --- 表格 ---
   表格要能横向滚动，但滚动容器必须包在外层（.table-wrap）。
   直接给 table 加 display:block 会强制单元格不换行，文案一长就撑爆。 */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  -webkit-overflow-scrolling: touch;
}
.table-wrap::-webkit-scrollbar { height: 8px; }
.table-wrap::-webkit-scrollbar-track { background: transparent; }
.table-wrap::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border: 0;
  border-radius: var(--r-full);
}
.table-wrap::-webkit-scrollbar-thumb:hover { background: var(--brand-teal); }

/* 横向可滚动时由 JS 插到表格下方的提示 */
.table-hint {
  margin-top: var(--sp-2);
  font-size: var(--fs-2xs);
  letter-spacing: .05em;
  color: var(--prose-dim);
  display: none;
}
.table-hint.is-visible { display: block; }

.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
  line-height: var(--lh-tight-text);
}
.prose caption {
  padding: var(--sp-3) var(--sp-4);
  text-align: left;
  font-size: var(--fs-xs);
  color: var(--prose-dim);
}
.prose th {
  text-align: left;
  font-weight: 600;
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface-hover);
  color: var(--prose-strong);
  border-bottom: 1px solid var(--line-strong);
  white-space: nowrap;
}
.prose td {
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--line);
  color: var(--text-2);
  vertical-align: top;
}
/* 数字列右对齐 + 等宽数字，便于纵向比对 */
.prose td[align="right"],
.prose th[align="right"] { text-align: right; font-variant-numeric: tabular-nums; }
.prose tbody tr:last-child td { border-bottom: 0; }
.prose tbody tr:hover td { background: var(--surface); }

/* 提示框 */
.callout {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--sp-4);
  margin: var(--sp-8) 0;
  padding: var(--sp-5);
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: var(--fs-sm);
  line-height: 1.72;
}
.callout__ico {
  width: 28px; height: 28px;
  border-radius: var(--r-xs);
  display: grid;
  place-items: center;
  font-size: var(--fs-sm);
  font-weight: 800;
  flex-shrink: 0;
}
.callout--info { border-left: 3px solid var(--brand-sky); }
.callout--info .callout__ico { background: color-mix(in srgb, var(--brand-sky) 16%, transparent); color: var(--brand-sky); }
.callout--tip { border-left: 3px solid var(--brand-teal); }
.callout--tip .callout__ico { background: color-mix(in srgb, var(--brand-teal) 16%, transparent); color: var(--brand-teal); }
.callout--warn { border-left: 3px solid var(--gold); }
.callout--warn .callout__ico { background: color-mix(in srgb, var(--gold) 18%, transparent); color: var(--gold); }
.callout strong { display: block; margin-bottom: var(--sp-1); color: var(--text); }

/* --- 目录 TOC --- */
.toc {
  position: sticky;
  top: calc(var(--nav-h) + var(--sp-6));
  max-height: calc(100vh - var(--nav-h) - 64px);
  overflow-y: auto;
}
.toc__title {
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: var(--sp-4);
}
.toc__list { border-left: 1px solid var(--line); }
.toc__link {
  display: block;
  padding: var(--sp-2) 0 var(--sp-2) var(--sp-4);
  margin-left: -1px;
  border-left: 2px solid transparent;
  font-size: var(--fs-xs);
  line-height: 1.55;
  color: var(--text-3);
  transition: all var(--dur-fast) var(--ease);
}
.toc__link:hover { color: var(--text); border-left-color: var(--line-strong); }
.toc__link.is-active {
  color: var(--brand-teal);
  border-left-color: var(--brand-teal);
  font-weight: 650;
}
.toc__link--sub { padding-left: var(--sp-8); font-size: var(--fs-2xs); }

/* 阅读工具条（右侧浮动） */
.read-actions {
  position: sticky;
  top: calc(var(--nav-h) + var(--sp-6) + 120px);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  align-items: center;
  margin-top: var(--sp-6);
}
.read-actions__btn {
  width: 40px; height: 40px;
  border-radius: var(--r-sm);
  display: grid;
  place-items: center;
  color: var(--text-3);
  border: 1px solid var(--line);
  background: var(--surface);
  transition: all var(--dur-fast) var(--ease);
}
.read-actions__btn:hover { color: var(--brand-teal); border-color: var(--line-glow); }
.read-actions__btn.is-active { color: var(--brand-rose); border-color: color-mix(in srgb, var(--brand-rose) 40%, transparent); }
.read-actions__btn svg { width: 17px; height: 17px; }
.read-actions__num { font-size: var(--fs-2xs); color: var(--text-3); font-variant-numeric: tabular-nums; }
.read-actions__divider {
  width: 20px; height: 1px;
  background: var(--line);
  margin: var(--sp-2) 0;
}

/* ==========================================================================
   阅读辅助：字号档位 + 专注模式
   ========================================================================== */

/* 字号档位。刻意只在 .prose 上生效，不影响导航、卡片等界面文字，
   避免读者调大字号后整站布局错位。 */
.prose { font-size: var(--prose-fs, var(--fs-body)); }

html[data-reading="lg"] { --prose-fs: 1.1875rem; --prose-width: 46rem; }  /* 19px */
html[data-reading="xl"] { --prose-fs: 1.3125rem; --prose-width: 48rem; }  /* 21px */

/* 专注模式：隐藏所有与阅读无关的外壳，正文放宽一档 */
.is-focus .nav,
.is-focus > .footer,
.is-focus .footer,
.is-focus .sidebar,
.is-focus .to-top,
.is-focus .ad-slot,
.is-focus .ad-box,
.is-focus .ticker,
.is-focus .hero,
.is-focus .read-actions,
.is-focus .article-head .breadcrumb { display: none !important; }

.is-focus .article-layout { grid-template-columns: minmax(0, 1fr); padding-top: var(--sp-6); }
.is-focus .prose { --prose-width: 46rem; --prose-wide: 56rem; }

/* 专注模式下的浮动工具条：字号 + 退出，两个按钮就够 */
.focus-bar {
  position: fixed;
  top: var(--sp-5);
  right: var(--sp-5);
  z-index: 130;
  display: none;
  align-items: center;
  gap: 2px;
  padding: 4px;
  background: var(--nav-bg);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-full);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--shadow);
}
.is-focus .focus-bar { display: inline-flex; }
.focus-bar__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 36px;
  min-width: 36px;
  padding: 0 10px;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-2);
  border-radius: var(--r-full);
  transition: all var(--dur-fast) var(--ease);
}
.focus-bar__btn:hover { color: var(--brand-teal); background: var(--surface-hover); }
.focus-bar__btn svg { width: 15px; height: 15px; }
.focus-bar__size {
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}

/* 字号按钮上显示当前档位：A / A+ / A++ */
[data-reading-size]::after { content: "A"; }
html[data-reading="lg"] [data-reading-size]::after { content: "A+"; }
html[data-reading="xl"] [data-reading-size]::after { content: "A++"; }

/* ==========================================================================
   图片灯箱（原生 dialog，零第三方依赖）
   ========================================================================== */

.lightbox {
  width: 100vw;
  max-width: 100vw;
  height: 100vh;
  max-height: 100vh;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: hidden;
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.lightbox[open] { opacity: 1; display: grid; place-items: center; }
.lightbox::backdrop {
  background: rgba(3, 5, 10, .92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
[data-theme="light"] .lightbox::backdrop { background: rgba(10, 12, 18, .88); }

.lightbox__stage {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  padding: clamp(16px, 4vw, 56px);
  cursor: zoom-out;
}
.lightbox__img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--r-md);
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-lg);
  transform: scale(.97);
  opacity: 0;
  transition: transform var(--dur-slow) var(--ease-out), opacity var(--dur) var(--ease);
}
.lightbox.is-ready .lightbox__img { transform: none; opacity: 1; }

.lightbox__cap {
  position: absolute;
  left: 50%;
  bottom: clamp(14px, 3vh, 28px);
  transform: translateX(-50%);
  max-width: min(76ch, 88vw);
  padding: 8px 16px;
  text-align: center;
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: rgba(255, 255, 255, .76);
  background: rgba(8, 11, 18, .72);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--r-full);
  backdrop-filter: blur(10px);
}
.lightbox__close {
  position: absolute;
  top: clamp(12px, 2.4vh, 22px);
  right: clamp(12px, 2.4vw, 22px);
  width: 42px; height: 42px;
  display: grid;
  place-items: center;
  color: #fff;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: var(--r-full);
  transition: background var(--dur-fast) var(--ease);
}
.lightbox__close:hover { background: rgba(255, 255, 255, .2); }
.lightbox__close svg { width: 18px; height: 18px; }

/* 灯箱打开时锁滚动，防止背景跟着滑 */
body.is-lightbox-open { overflow: hidden; }

/* 文章尾部 */
.article-foot { max-width: var(--prose-width); margin-top: var(--sp-12); }
.tag-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); padding-block: var(--sp-6); border-top: 1px solid var(--line); }

.author-box {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--sp-5);
  align-items: center;
  margin-top: var(--sp-8);
  padding: var(--sp-6);
}
.author-box__name { font-size: 1.0625rem; font-weight: 700; }
.author-box__bio { margin-top: 6px; font-size: var(--fs-xs); color: var(--text-2); line-height: 1.65; }

.pager {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4);
  margin-top: var(--sp-8);
}
.pager__item {
  padding: var(--sp-5);
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--surface);
  transition: all var(--dur) var(--ease);
}
.pager__item:hover { border-color: var(--line-strong); background: var(--surface-hover); transform: translateY(-2px); }
.pager__label { font-size: var(--fs-xs); color: var(--text-3); display: flex; align-items: center; gap: 6px; }
.pager__title { margin-top: var(--sp-3); font-size: var(--fs-sm); font-weight: 650; line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pager__item--next { text-align: right; }
.pager__item--next .pager__label { justify-content: flex-end; }

/* --- 评论 --- */
.comments {
  max-width: var(--prose-width);
  margin-top: var(--sp-12);
  padding-top: var(--sp-10);
  border-top: 1px solid var(--line);
}
.comments__head {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  margin-bottom: var(--sp-6);
}
.comments__title { font-size: var(--fs-h3); font-weight: 750; }
.comments__count { font-size: var(--fs-sm); color: var(--text-3); }

.comment-list { display: flex; flex-direction: column; gap: var(--sp-6); }
.comment-list .comment-list { margin-top: var(--sp-6); padding-left: var(--sp-6); border-left: 1px solid var(--line); }

.comment { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: var(--sp-4); }
.comment__avatar .avatar { width: 44px; height: 44px; }
.comment__head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
}
.comment__name { font-size: var(--fs-sm); font-weight: 700; }
.comment--owner .comment__name::after {
  content: "作者";
  margin-left: var(--sp-2);
  padding: 1px 7px;
  font-size: var(--fs-2xs);
  border-radius: var(--r-full);
  color: var(--brand-teal);
  background: color-mix(in srgb, var(--brand-teal) 14%, transparent);
}
.comment__time { font-size: var(--fs-xs); color: var(--text-3); }
.comment__reply { font-size: var(--fs-xs); margin-left: auto; }
.comment__reply a { color: var(--text-3); }
.comment__reply a:hover { color: var(--brand-teal); }
.comment__body {
  margin-top: var(--sp-3);
  font-size: var(--fs-sm);
  line-height: 1.78;
  color: var(--text-2);
}
.comment__body p:last-child { margin-bottom: 0; }

.comment-form { margin-top: var(--sp-10); }
.comment-form .field { margin-bottom: var(--sp-4); }
.comment-form label {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-2);
  margin-bottom: var(--sp-2);
}
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
  width: 100%;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  outline: none;
  font-size: var(--fs-sm);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.comment-form textarea { min-height: 130px; resize: vertical; line-height: 1.7; }
.comment-form input:focus,
.comment-form textarea:focus {
  border-color: var(--line-glow);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-teal) 14%, transparent);
}
.comment-form__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); }

.comments__closed {
  padding: var(--sp-5) var(--sp-6);
  border-radius: var(--r-md);
  border: 1px dashed var(--line-strong);
  background: var(--surface);
  font-size: var(--fs-sm);
  color: var(--text-2);
}

@media (max-width: 768px) {
  .comment-form__row { grid-template-columns: minmax(0, 1fr); }
  .comment { grid-template-columns: 36px minmax(0, 1fr); gap: var(--sp-3); }
  .comment__avatar .avatar { width: 36px; height: 36px; }
}

/* ==========================================================================
   08 归档与列表页
   ========================================================================== */

.archive-hero {
  position: relative;
  padding: var(--sp-16) 0 var(--sp-12);
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.archive-hero::before {
  content: "";
  position: absolute;
  top: -220px; left: 50%;
  transform: translateX(-50%);
  width: 900px; height: 460px;
  border-radius: 50%;
  background: var(--grad-spectrum);
  opacity: .13;
  filter: blur(90px);
  pointer-events: none;
}
.archive-hero__inner { position: relative; max-width: 62ch; }
.archive-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--brand-teal);
  margin-bottom: var(--sp-4);
}
.archive-hero__title {
  font-size: var(--fs-display);
  font-weight: 800;
  letter-spacing: -0.032em;
  line-height: 1.08;
}
.archive-hero__desc {
  margin-top: var(--sp-5);
  font-size: 1.0625rem;
  line-height: 1.72;
  color: var(--text-2);
}
.archive-hero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-8);
  margin-top: var(--sp-8);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--line);
}
.archive-hero__stat-num {
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.archive-hero__stat-label { font-size: var(--fs-xs); color: var(--text-3); margin-top: 2px; }

/* 分页 */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
  padding-block: var(--sp-12);
}
/* Typecho 的 pageNav() 外层再包一个容器，与直接排列保持一致 */
.pagination__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
/* Typecho 的 Box 分页器把每一项包成 <span><a href>N</a></span>，
   只有「当前页 / 上一页 / 下一页」的 span 带 class，普通页码的 span 没有 class。
   所以外观必须挂在 span > a 上，不能挂在 .page-btn 上（否则只有当前页有样式）。 */
.pagination__inner > span > a,
.pagination__inner > a {
  min-width: 40px;
  height: 40px;
  padding: 0 var(--sp-3);
  display: inline-grid;
  place-items: center;
  font-size: var(--fs-sm);
  font-weight: 650;
  color: var(--text-2);
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: var(--r-sm);
  font-variant-numeric: tabular-nums;
  transition: all var(--dur-fast) var(--ease);
}
.pagination__inner > span > a:hover,
.pagination__inner > a:hover {
  color: var(--text);
  border-color: var(--line-strong);
  background: var(--surface-hover);
}
.pagination__inner > .is-active > a {
  color: #04120F;
  background: var(--grad-spectrum);
  border-color: transparent;
}
/* 省略号是「没有 href 的 a」，不该长得像按钮 */
.pagination__inner > span > a:not([href]) {
  border-color: transparent;
  background: none;
  color: var(--text-3);
  min-width: 28px;
  padding: 0;
}
.page-btn {
  min-width: 40px; height: 40px;
  padding: 0 var(--sp-3);
  display: inline-grid;
  place-items: center;
  font-size: var(--fs-sm);
  font-weight: 650;
  color: var(--text-2);
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: var(--r-sm);
  font-variant-numeric: tabular-nums;
  transition: all var(--dur-fast) var(--ease);
}
.page-btn:hover { color: var(--text); border-color: var(--line-strong); background: var(--surface-hover); }
.page-btn.is-active { color: #04120F; background: var(--grad-spectrum); border-color: transparent; }
.page-btn--dots { border: 0; background: none; }

/* ==========================================================================
   09 商业化容器
   ========================================================================== */

/* 信息流原生广告位 —— 与内容卡同尺寸，但明确标注，符合广告法标识要求 */
.ad-slot {
  position: relative;
  padding: var(--sp-5);
  border-radius: var(--r-lg);
  border: 1px dashed color-mix(in srgb, var(--gold) 34%, transparent);
  background: linear-gradient(120deg, color-mix(in srgb, var(--gold) 6%, transparent), transparent 62%);
}
.ad-slot__tag {
  position: absolute;
  top: var(--sp-3); right: var(--sp-3);
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--gold);
  opacity: .78;
}
.ad-slot__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-6);
  flex-wrap: wrap;
}
.ad-slot__title { font-size: var(--fs-sm); font-weight: 700; }
.ad-slot__desc { margin-top: 6px; font-size: var(--fs-xs); color: var(--text-2); }

/* 侧栏竖版广告位 */
.ad-box {
  display: grid;
  place-items: center;
  gap: var(--sp-3);
  min-height: 200px;
  padding: var(--sp-6);
  text-align: center;
  border-radius: var(--r-lg);
  border: 1px dashed var(--line-strong);
  background: var(--surface);
}
.ad-box__label {
  font-size: var(--fs-2xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-3);
}
.ad-box__note { font-size: var(--fs-xs); color: var(--text-3); line-height: 1.6; }

/* 赞助 / 合作条 */
.sponsor-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  flex-wrap: wrap;
  padding: var(--sp-5) var(--sp-6);
  border-radius: var(--r-lg);
  border: 1px solid color-mix(in srgb, var(--gold) 26%, transparent);
  background: linear-gradient(120deg, color-mix(in srgb, var(--gold) 8%, transparent), transparent 60%);
}
.sponsor-bar__text { font-size: var(--fs-sm); color: var(--text-2); }
.sponsor-bar__text strong { color: var(--text); }

/* ==========================================================================
   10 页脚
   ========================================================================== */

.footer {
  margin-top: var(--sp-24);
  padding-top: var(--sp-16);
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, transparent, var(--bg-deep));
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: var(--sp-10);
  padding-bottom: var(--sp-12);
}
.footer__brand-desc {
  margin-top: var(--sp-5);
  font-size: var(--fs-sm);
  line-height: 1.72;
  color: var(--text-2);
  max-width: 34ch;
}
.footer__social { display: flex; gap: var(--sp-2); margin-top: var(--sp-5); }
.footer__col-title {
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: var(--sp-5);
}
.footer__links { display: flex; flex-direction: column; gap: var(--sp-3); }
.footer__links a {
  font-size: var(--fs-sm);
  color: var(--text-2);
  transition: color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
  display: inline-block;
}
.footer__links a:hover { color: var(--brand-teal); transform: translateX(3px); }

.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-4);
  padding: var(--sp-6) 0;
  border-top: 1px solid var(--line);
  font-size: var(--fs-xs);
  color: var(--text-3);
}
.footer__bottom a:hover { color: var(--text-2); }

/* 回顶 */
.to-top {
  position: fixed;
  right: var(--sp-6);
  bottom: var(--sp-6);
  z-index: 90;
  width: 44px; height: 44px;
  border-radius: var(--r-full);
  display: grid;
  place-items: center;
  color: var(--text-2);
  background: var(--nav-bg);
  border: 1px solid var(--line-strong);
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all var(--dur) var(--ease);
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { color: var(--brand-teal); border-color: var(--line-glow); }
.to-top svg { width: 18px; height: 18px; }

/* ==========================================================================
   11 反馈态
   ========================================================================== */

.empty {
  display: grid;
  place-items: center;
  gap: var(--sp-4);
  padding: var(--sp-24) var(--sp-6);
  text-align: center;
}
.empty__code {
  font-size: clamp(4rem, 14vw, 8rem);
  font-weight: 900;
  letter-spacing: -0.05em;
  line-height: 1;
  background: var(--grad-spectrum);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.empty__title { font-size: var(--fs-h2); font-weight: 800; }
.empty__desc { font-size: var(--fs-sm); color: var(--text-2); max-width: 44ch; }

/* 骨架屏 */
.skeleton {
  border-radius: var(--r-sm);
  background: linear-gradient(100deg, var(--surface) 30%, var(--surface-hover) 50%, var(--surface) 70%);
  background-size: 240% 100%;
  animation: shimmer 1.5s var(--ease) infinite;
}
@keyframes shimmer {
  from { background-position: 180% 0; }
  to   { background-position: -60% 0; }
}

/* ==========================================================================
   12 动效与滚动进场
   ========================================================================== */

[data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
[data-reveal].is-in { opacity: 1; transform: none; }

/* 交错延迟 */
[data-reveal][data-delay="1"] { transition-delay: 60ms; }
[data-reveal][data-delay="2"] { transition-delay: 120ms; }
[data-reveal][data-delay="3"] { transition-delay: 180ms; }
[data-reveal][data-delay="4"] { transition-delay: 240ms; }

/* ==========================================================================
   13 响应式断点
   ========================================================================== */

/* --- ≤1200px：主栅格右栏收窄，Hero 侧栏降到下方 --- */
@media (max-width: 1200px) {
  :root {
    --toc-w: 220px;
    --article-bleed: calc(var(--toc-w) + var(--sp-8));
  }
  .grid--main { grid-template-columns: minmax(0, 1fr) 300px; }
  .article-layout { grid-template-columns: minmax(0, 1fr) var(--toc-w); gap: var(--sp-8); }
  .grid--hero { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
  .hero-card { min-height: 420px; }
}

/* --- ≤1024px：平板横屏，侧栏移至正文下方成两列 --- */
@media (max-width: 1024px) {
  :root { --nav-h: 62px; }

  .grid--main { grid-template-columns: minmax(0, 1fr); }
  .sidebar {
    position: static;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: var(--sp-5);
    margin-top: var(--sp-6);
  }
  .article-layout { grid-template-columns: minmax(0, 1fr); }
  .toc { display: none; }
  /* 目录栏消失后，全幅图不再需要向右出血 */
  :root { --article-bleed: 0px; }

  .grid--hero { grid-template-columns: minmax(0, 1fr); }
  .hero-side { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; }
  .hero-mini { min-height: 190px; }

  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .footer__grid { grid-template-columns: 1fr 1fr; gap: var(--sp-10) var(--sp-8); }

  .nav__menu { display: none; }
  .nav__toggle { display: inline-grid; }
  .nav__right .nav__login { display: none; }
}

/* --- ≤768px：平板竖屏 / 大屏手机 --- */
@media (max-width: 768px) {
  :root {
    --fs-body: 1rem;
    --nav-h: 58px;
    --sp-16: 48px;
    --sp-24: 64px;
    /* 与 .container 的左右内边距保持一致，代码块 / 表格出血才不会错位 */
    --prose-pad: var(--sp-5);
    --prose-fig-gap: 1.9rem;
  }
  .container { padding-inline: var(--sp-5); }
  .section { padding-block: var(--sp-12); }

  .brand__sub { display: none; }
  .hero { padding-top: var(--sp-6); }
  .hero-card { min-height: 380px; border-radius: var(--r-lg); }
  .hero-card__body { padding: var(--sp-6); }
  .hero-card__desc { display: none; }

  .post-row { grid-template-columns: 132px minmax(0, 1fr); gap: var(--sp-4); padding: var(--sp-4); }
  .post-row__cover { min-height: 92px; }
  .post-row__title { font-size: 1rem; -webkit-line-clamp: 3; }
  .post-row__desc { display: none; }
  .post-row__foot { margin-top: var(--sp-3); }
  .post-row__tags { display: none; }

  .post-feature { padding: var(--sp-4); }
  .post-feature__desc { -webkit-line-clamp: 2; }

  .grid--2, .grid--3, .grid--4 { grid-template-columns: minmax(0, 1fr); }

  .sidebar { grid-template-columns: minmax(0, 1fr); }

  .sec-head { flex-direction: column; align-items: flex-start; gap: var(--sp-3); margin-bottom: var(--sp-6); }

  .article-head { padding-top: var(--sp-6); }
  .article-lead { font-size: 1.0625rem; padding-left: var(--sp-4); }
  .article-cover { margin-top: var(--sp-6); border-radius: var(--r-lg); }
  .article-layout { padding-top: var(--sp-8); }
  .article-meta { gap: var(--sp-4); }
  .article-meta__right { width: 100%; }

  /* 移动端正文：左右留白收窄到 20px，行高略降（屏幕窄、回扫距离短，
     1.85 在小屏会显得过于松散），标点挤压在窄栏里收益更大 */
  .prose {
    line-height: 1.82;
    letter-spacing: .01em;
  }
  .prose > p + p { line-height: 1.9; }
  .prose > p:first-of-type { font-size: 1.125em; }

  .prose h2 { font-size: 1.3125rem; margin-top: 2.2em; margin-bottom: .7em; }
  .prose h3 { font-size: 1.125rem; margin-top: 1.8em; }
  .prose h4 { font-size: 1rem; }

  /* 代码块与表格出血到屏幕边缘，换取真实可用宽度 */
  .prose pre,
  .prose > .table-wrap {
    margin-inline: calc(var(--prose-pad) * -1);
    border-radius: 0;
    border-inline: 0;
  }
  .prose pre { padding-inline: var(--prose-pad); }
  .prose th, .prose td { padding: var(--sp-3) var(--sp-4); }
  .prose th { white-space: normal; }   /* 窄屏表头允许换行，避免单列撑爆 */

  /* 图注在小屏降到 12px（不再往下降到 11px，小屏上会看不清） */
  .figure__cap,
  .prose-gallery__cap { font-size: .75rem; line-height: 1.62; }
  /* 三图并排在手机上压成 1 列，否则每张只剩 100px 宽，看不出内容 */
  .prose-gallery--3 { grid-template-columns: minmax(0, 1fr); }
  .prose-gallery--crop .figure__media img { height: auto; }

  .author-box { grid-template-columns: auto minmax(0, 1fr); text-align: left; }
  .author-box .btn { grid-column: 1 / -1; width: 100%; }

  .pager { grid-template-columns: minmax(0, 1fr); }

  .archive-hero { padding: var(--sp-12) 0 var(--sp-8); }
  .archive-hero__stats { gap: var(--sp-6); }

  .footer__grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-8); }
  .footer { margin-top: var(--sp-16); padding-top: var(--sp-12); }
  .footer__bottom { flex-direction: column; align-items: flex-start; }

  .ticker { padding: var(--sp-3) var(--sp-4); }
  .filter { gap: var(--sp-3); }
  .filter__sort { display: none; }

  .ad-slot__inner { flex-direction: column; align-items: flex-start; }
  .sponsor-bar { flex-direction: column; align-items: flex-start; }

  .to-top { right: var(--sp-4); bottom: var(--sp-4); }
}

/* --- ≤480px：小屏手机 --- */
@media (max-width: 480px) {
  :root { --prose-pad: var(--sp-4); }
  .container { padding-inline: var(--sp-4); }
  .hero-card__title { font-size: 1.625rem; }
  .hero-side { grid-template-columns: minmax(0, 1fr); }
  .hero-mini { min-height: 160px; }
  .nav__right .icon-btn--theme { display: none; }
  .post-row { grid-template-columns: 104px minmax(0, 1fr); }
  .post-row__cover { min-height: 76px; }
  .archive-hero__title { font-size: 2rem; }
  .btn { height: 42px; padding: 0 var(--sp-5); }

  /* 小屏上两张并排的图每张只剩约 160px，信息量过低，直接压成单列 */
  .prose-gallery { grid-template-columns: minmax(0, 1fr); }
  .prose th, .prose td { padding: var(--sp-3); }
  .prose blockquote { padding: var(--sp-4) var(--sp-5); border-radius: 0 var(--r-sm) var(--r-sm) 0; }
  .lightbox__cap { display: none; }
}

/* 超宽屏：正文与主容器不过度拉长 */
@media (min-width: 1600px) {
  :root { --container: 1360px; }
}

/* ==========================================================================
   14 可访问性与偏好降级
   ========================================================================== */

/* 尊重系统「减弱动态效果」 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1; transform: none; }

  /* 关闭动态效果时，图片直接显示，骨架屏不再闪动 */
  .figure__media::before { animation: none; opacity: 0; }
  .figure__media img { opacity: 1; }
  .lightbox__img { transform: none; opacity: 1; }
}

/* 高对比度偏好 */
@media (prefers-contrast: more) {
  :root { --line: rgba(255,255,255,.24); --text-2: #C6CEDD; }
  [data-theme="light"] { --line: #B4BECC; --text-2: #3A4252; }
}

/* 不支持 backdrop-filter 时降级为实色 */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav, .search-panel, .drawer__scrim { background: var(--bg-elev); }
  .card { background: var(--surface-solid); }
}

/* 打印 */
@media print {
  .nav, .footer, .sidebar, .to-top, .ad-slot, .ad-box, .ticker, .sponsor-bar,
  .read-actions, .focus-bar, .lightbox, .table-hint, .article-head__actions { display: none !important; }
  body, .prose { background: #fff !important; color: #000 !important; }

  /* 打印时正文必须收成单列，且宽幅 / 全幅图回归正文宽度 */
  .prose {
    display: block;
    font-size: 11.5pt;
    line-height: 1.7;
    letter-spacing: 0;
  }
  .prose > .figure--wide,
  .prose > .figure--full { width: 100%; margin-right: 0; }
  .grid--main, .article-layout { grid-template-columns: minmax(0, 1fr) !important; }

  /* 图片与图表不跨页断开 */
  .figure, .prose pre, .prose table, .callout, .prose blockquote { break-inside: avoid; page-break-inside: avoid; }
  .prose h2, .prose h3 { break-after: avoid; page-break-after: avoid; }
  .figure__media::before { display: none; }
  .figure__media img { opacity: 1 !important; }
  .prose a { text-decoration: none; color: #000; }
  .prose a[target="_blank"]::after { content: ""; }
}