/* ========== 字体：Latin Modern Sans（即 LaTeX 的 \textsf） ========== */
@font-face { font-family: "LM Sans"; src: url("fonts/lmsans10-regular.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "LM Sans"; src: url("fonts/lmsans10-oblique.woff") format("woff"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "LM Sans"; src: url("fonts/lmsans10-bold.woff") format("woff"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "LM Sans"; src: url("fonts/lmsans10-boldoblique.woff") format("woff"); font-weight: 700; font-style: italic; font-display: swap; }

/* ========== 两套主题 ==========
   夜晚：库因吉《第聂伯河上的月夜》(1880)
   白天：透纳《被拖去解体的战舰无畏号》(1839)
   <html data-theme="night|day">，由 theme.js 设置 */
:root, [data-theme="night"] {
  --bg: #0e0f0b;                        /* 画中夜空最深处 */
  --panel: rgba(12, 13, 9, 0.80);       /* 内容面板：半透明夜色 */
  --text: #e9ebdc;                      /* 月光下的灰白 */
  --muted: #a8ad98;
  --line: rgba(193, 222, 149, 0.28);
  --accent: #c1de95;                    /* 画中月亮的颜色 */
  --accent-soft: rgba(193, 222, 149, 0.12);
  --card: rgba(255, 255, 255, 0.035);
  --plot1: #c1de95;                     /* 图中第一条线：月光色 */
  --plot2: #dba15a;                     /* 图中第二条线：暖琥珀色 */
  --header-bg: rgba(10, 11, 8, 0.55);
  --chip-bg: rgba(10, 11, 8, 0.55);
  --tip-bg: rgba(10, 11, 8, 0.85);
  --hero-shadow: 0 2px 18px rgba(0, 0, 0, .9);
  --shadow: rgba(0, 0, 0, .35);
  --placeholder: rgba(242, 201, 76, .2);
  --selection: rgba(193, 222, 149, .3);
  --night-opacity: 1;
  color-scheme: dark;
}
[data-theme="day"] {
  --bg: #e9dcc6;
  --panel: rgba(250, 244, 233, 0.86);   /* 暖白面板 */
  --text: #2a2119;                      /* 船身的深褐 */
  --muted: #75685a;
  --line: rgba(110, 72, 36, 0.32);
  --accent: #a8461f;                    /* 落日的赭红 */
  --accent-soft: rgba(200, 110, 50, 0.13);
  --card: rgba(255, 255, 255, 0.45);
  --plot1: #2e5f86;                     /* 画中天空的蓝 */
  --plot2: #c0552a;                     /* 落日的橙红 */
  --header-bg: rgba(250, 244, 233, 0.62);
  --chip-bg: rgba(250, 244, 233, 0.62);
  --tip-bg: rgba(250, 244, 233, 0.94);
  --hero-shadow: 0 0 22px rgba(255, 246, 228, .95), 0 0 6px rgba(255, 246, 228, .8);
  --shadow: rgba(70, 45, 20, .2);
  --placeholder: rgba(235, 170, 60, .3);
  --selection: rgba(200, 110, 50, .25);
  --night-opacity: 0;
  color-scheme: light;
}
:root {
  /* 全站线条粗细：与图中 pgfplots 的 thick (0.8pt) 一致。正文 1em = 10pt ≈ 19px，0.8pt ≈ 1.5px */
  --rule: 1.5px;
  --sans: "LM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif; --serif: var(--sans); }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; background: var(--bg); transition: background-color .6s; }  /* 页面长短不同也不会因滚动条出现/消失而左右跳动 */
/* 页面加载时不播放任何过渡动画，避免切换页面时颜色和背景“闪一下” */
.no-anim, .no-anim *, .no-anim *::before, .no-anim *::after { transition: none !important; }
body {
  margin: 0;  /* 底色放在 html 上，body 透明，背景画才能透出来 */
  color: var(--text);
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.7;
  transition: color .6s;
}
/* ========== 背景画 ==========
   固定在导航栏下方（不会被导航栏挡住），两幅画叠在一起，切换主题时淡入淡出。
   两幅图都是 2400×1742（宽高比 1.378），月亮约在 15% 高度，河面/地平线约在 70–80% 高度。
   - 普通屏幕：铺满（cover），竖直方向按 33% 位置裁切，月亮和河面都保留；
   - 特别宽的屏幕（宽高比 > 7:4）：铺满会把月亮或河面裁掉，改为按高度完整显示整幅画，
     两侧用同一幅画的模糊放大版填充，并柔和过渡。 */
:root { --header-h: 61.5px; }
.backdrop { position: fixed; left: 0; right: 0; top: var(--header-h); bottom: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.backdrop .bd { position: absolute; inset: 0; transition: opacity .8s ease; }
.backdrop .bd::before, .backdrop .bd::after { content: ""; position: absolute; inset: 0; background-repeat: no-repeat; }
.bd::before { background-size: cover; background-position: center; filter: blur(36px) saturate(1.05); transform: scale(1.15); }
.bd::after  { background-size: 100% 100%, cover; background-position: center, 46% 33%; }
.bd-day::before { background-image: url("bg-day.jpg"); background-color: #b49c80; }
.bd-day::after  { background-image: linear-gradient(180deg, rgba(255, 248, 236, .04) 0%, rgba(255, 248, 236, .12) 50%, rgba(255, 248, 236, .3) 100%), url("bg-day.jpg"); }
.bd-night { opacity: var(--night-opacity); }
.bd-night::before { background-image: url("bg-night.jpg"); background-color: #0f0f0b; }
.bd-night::after  { background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .1) 50%, rgba(0, 0, 0, .35) 100%), url("bg-night.jpg"); }
@media (min-aspect-ratio: 7/4) {
  .backdrop .bd::after {
    --w: calc((100vh - var(--header-h)) * 1.378);
    left: calc(50% - var(--w) / 2); right: auto; width: var(--w);
    background-size: 100% 100%, 100% 100%; background-position: center, center;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
  }
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
img { max-width: 100%; }
::selection { background: var(--selection); }

/* 主题切换按钮 */
.theme-toggle {
  width: 34px; height: 34px; border-radius: 50%; padding: 0; margin-left: 4px;
  display: grid; place-items: center; cursor: pointer;
  color: var(--muted); background: transparent; border: var(--rule) solid var(--line);
  transition: color .2s, border-color .2s;
}
.theme-toggle:hover { color: var(--accent); border-color: var(--accent); }
.theme-toggle svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.theme-toggle .i-moon, [data-theme="day"] .theme-toggle .i-sun { display: none; }
[data-theme="day"] .theme-toggle .i-moon { display: block; }
.nav-group { display: flex; align-items: center; gap: 18px; }

/* 页脚的画作出处，按主题显示对应那幅 */
.credit-day, [data-theme="day"] .credit-night { display: none; }
[data-theme="day"] .credit-day { display: inline; }

.wrap { max-width: 780px; margin: 0 auto; padding: 0 24px; }

/* ========== 顶部导航 ========== */
.site-header {
  border-bottom: var(--rule) solid var(--line);
  position: sticky; top: 0; z-index: 10;
  background: var(--header-bg);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  height: 60px; gap: 16px;
}
.site-title { font-family: var(--serif); font-size: 19px; color: var(--text); font-weight: 700; white-space: nowrap; }
.site-title:hover { text-decoration: none; }
.nav { display: flex; gap: 22px; font-size: 15px; }
.nav a { color: var(--muted); }
.nav a.active, .nav a:hover { color: var(--text); text-decoration: none; }
.nav a.active { border-bottom: 2px solid var(--accent); padding-bottom: 2px; }

/* 内容放在半透明面板上，画作从四周透出来 */
main.wrap {
  max-width: 828px;
  margin: 40px auto 56px; padding: 44px 48px 56px;
  background: var(--panel); border: var(--rule) solid var(--line); border-radius: 16px;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 20px 60px var(--shadow);
  transition: background-color .6s, border-color .6s;
}
/* 首页第一屏：整幅画露出来（上方月亮、下方河面），名字放在中间的夜空里 */
html { scroll-behavior: smooth; }
.landing {
  min-height: calc(100vh - 61px); min-height: calc(100svh - 61px);
  display: flex; align-items: center; justify-content: center;
  padding: 0 24px; text-align: center;
}
.landing .hero { flex-direction: column; align-items: center; gap: 0; margin: 0; transform: translateY(-2vh); }
.landing h1 { font-size: 40px; text-shadow: var(--hero-shadow); }
.icon-links { display: flex; justify-content: center; gap: 14px; margin-top: 20px; }
.icon-links a {
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  color: var(--text); border: var(--rule) solid var(--line);
  background: var(--chip-bg); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  transition: color .2s, border-color .2s, transform .2s;
}
.icon-links a { position: relative; }
.icon-links a:hover, .icon-links a:focus-visible { color: var(--accent); border-color: var(--accent); transform: translateY(-2px); text-decoration: none; }
/* 悬停时在图标下方显示名称 */
.icon-links a::after {
  content: attr(data-label);
  position: absolute; top: calc(100% + 10px); left: 50%;
  transform: translate(-50%, -4px);
  padding: 3px 10px; border-radius: 6px; white-space: nowrap;
  font-size: 13px; line-height: 1.5; color: var(--text);
  background: var(--tip-bg); border: var(--rule) solid var(--line);
  opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s;
}
.icon-links a:hover::after, .icon-links a:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
.icon-links svg { width: 21px; height: 21px; }
.icon-links svg.fill { fill: currentColor; }
.icon-links svg.stroke { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; stroke-linecap: round; }

/* About Me 里的照片：宽:高 = 3:4，靠右，文字环绕 */
.portrait {
  float: right; width: 150px; aspect-ratio: 3 / 4; object-fit: cover;
  margin: 6px 0 12px 28px; border-radius: 6px; border: var(--rule) solid var(--line);
  box-shadow: 0 8px 24px var(--shadow); shape-outside: margin-box;
}
.scroll-cue { display: inline-block; margin-top: 46px; color: var(--muted); opacity: .8; animation: cue 2.4s ease-in-out infinite; }
.scroll-cue:hover { color: var(--accent); opacity: 1; }
.scroll-cue svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
@keyframes cue { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
@media (prefers-reduced-motion: reduce) { .scroll-cue { animation: none; } html { scroll-behavior: auto; } }
main.wrap.home { margin-top: 0; scroll-margin-top: 76px; }

/* ========== 首页头部 ========== */
.hero { display: flex; gap: 36px; align-items: center; margin-bottom: 40px; }
.avatar {
  width: 150px; height: 150px; border-radius: 50%; flex-shrink: 0;
  object-fit: cover; border: var(--rule) solid var(--line); background: var(--accent-soft);
}
.hero h1 { font-family: var(--serif); font-size: 34px; line-height: 1.3; margin: 0; font-weight: 700; }
.hero .en-name { color: var(--muted); font-size: 17px; margin: 2px 0 10px; letter-spacing: .02em; }
.hero .role { margin: 6px 0 14px; color: var(--muted); }
.links { display: flex; flex-wrap: wrap; gap: 8px; }
.links a {
  font-size: 14px; padding: 3px 12px; border: var(--rule) solid var(--line); border-radius: 999px;
  color: var(--muted); background: var(--card);
}
.links a:hover { color: var(--accent); border-color: var(--accent); text-decoration: none; }

/* ========== 通用段落样式 ========== */
h2 {
  clear: both;
  font-family: var(--serif); font-size: 22px; font-weight: 700;
  margin: 44px 0 14px; padding-bottom: 6px; border-bottom: var(--rule) solid var(--line);
}
.page-title { font-family: var(--serif); font-size: 32px; font-weight: 700; margin: 0 0 8px; }
.page-intro { color: var(--muted); margin: 0 0 32px; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; list-style: none; }
.tags li { background: var(--accent-soft); color: var(--accent); padding: 2px 12px; border-radius: 6px; font-size: 15px; }
.placeholder { background: var(--placeholder); border-radius: 3px; padding: 0 3px; }

/* 动态 */
.news { list-style: none; padding: 0; margin: 0; }
.news li { display: flex; gap: 18px; padding: 6px 0; }
.news time { color: var(--muted); font-variant-numeric: tabular-nums; min-width: 72px; font-size: 15px; padding-top: 1px; }

/* 文章列表 */
.post-list { list-style: none; padding: 0; margin: 0; }
.post-list li { padding: 14px 0; border-bottom: var(--rule) dashed var(--line); }
.post-list li:last-child { border-bottom: none; }
.post-list .title { font-size: 18px; font-weight: 700; }
.post-list .meta { color: var(--muted); font-size: 14px; }
.meta.dates { font-variant-numeric: tabular-nums; }
.article-head .meta.dates { margin-bottom: 2px; }
.post-list .summary { margin: 4px 0 0; color: var(--text); font-size: 16px; }
.year { font-family: var(--serif); color: var(--muted); font-size: 20px; margin: 28px 0 4px; }

/* 足迹：竖向时间线，最新的在上 */
.timeline { list-style: none; padding: 0; margin: 4px 0 0; }
.timeline li { position: relative; padding: 0 0 24px 32px; }
.timeline li:last-child { padding-bottom: 4px; }
.timeline li::before {                 /* 节点圆圈：边框与标题下划线同色，不填充 */
  content: ""; position: absolute; left: 0; top: 7px;
  width: 13px; height: 13px; border-radius: 50%; box-sizing: border-box;
  border: var(--rule) solid var(--line); background: transparent;
}
.timeline li.now::before { background: var(--line); background-clip: padding-box; }   /* 当前这一段：同色实心（不与边框重叠，颜色均匀） */
.timeline li:not(:last-child)::after { /* 连线：从本圆圈底边一直连到下一个圆圈顶边，不留缝 */
  content: ""; position: absolute; left: calc(6.5px - var(--rule) / 2);
  top: 20px; bottom: -7px;
  width: var(--rule); background: var(--line);
}
.tl-date { font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.tl-place { font-size: 18px; font-weight: 700; line-height: 1.45; margin-top: 1px; }
.tl-detail { font-size: 16px; }
.tl-note { color: var(--muted); }

/* 首页论文列表：期刊与日期 / 标题 / 作者 / 简介 */
.pub-list { list-style: none; padding: 0; margin: 0; }
.pub-list li { padding: 18px 0; border-bottom: var(--rule) solid var(--line); }
.pub-list li:first-child { padding-top: 4px; }
.pub-list li:last-child { border-bottom: none; }
.pub-venue { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; font-size: 14px; letter-spacing: .02em; }
.pub-journal { color: var(--text); font-style: italic; text-align: right; }
.pub-venue time { color: var(--muted); }
.pub-title { font-size: 18px; font-weight: 700; line-height: 1.45; margin: 4px 0 2px; }
.pub-title a { color: var(--text); }
.pub-title a:hover { color: var(--accent); }
.pub-authors { color: var(--muted); font-size: 15px; }
.pub-authors strong { color: var(--text); }
.pub-summary { margin: 6px 0 0; font-size: 16px; line-height: 1.7; }

/* 研究方向 */
.project {
  background: var(--card); border: var(--rule) solid var(--line); border-radius: 12px;
  padding: 22px 24px; margin-bottom: 18px;
}
.project h3 { margin: 0 0 6px; font-size: 19px; }
.project p { margin: 0; }
.project .figure {
  margin-top: 14px; height: 150px; border-radius: 8px; background: var(--accent-soft);
  display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 14px;
}

/* 论文 */
.pubs { padding-left: 0; list-style: none; counter-reset: pub; }
.pubs li { counter-increment: pub; position: relative; padding: 10px 0 10px 36px; }
.pubs li::before { content: "[" counter(pub) "]"; position: absolute; left: 0; color: var(--muted); font-size: 15px; top: 11px; }
.pubs .ptitle { font-weight: 700; }
.pubs .venue { font-style: italic; color: var(--muted); }
.pubs .btns a { font-size: 13px; border: var(--rule) solid var(--line); border-radius: 4px; padding: 0 8px; margin-right: 6px; }

/* ========== 文章正文 ========== */
.article-head { margin-bottom: 32px; }
.article-head h1 { font-family: var(--serif); font-size: 32px; line-height: 1.35; margin: 0 0 8px; font-weight: 700; }
.article-head .meta { color: var(--muted); font-size: 15px; }
.prose { font-size: 19px; line-height: 1.75; }
.prose p { margin: 0 0 1.1em; text-align: justify; hyphens: auto; -webkit-hyphens: auto; }
.prose h2 { font-size: 21px; margin-top: 40px; }
.prose blockquote {
  margin: 1.4em 0; padding: 4px 20px; border-left: 3px solid var(--accent);
  color: var(--muted); background: var(--accent-soft); border-radius: 0 8px 8px 0;
}
.prose .math-block { overflow-x: auto; overflow-y: hidden; margin: 1.2em 0; text-align: center; }
/* 公式与图：由 LaTeX 预先渲染成 SVG，1em = 10pt */
svg.tex-inline { display: inline; overflow: visible; }
svg.tex-display { display: block; margin: 0 auto; overflow: visible; }
svg.fig { display: block; margin: 0 auto; max-width: 100%; height: auto !important; }
svg.fig [fill="rgb(100%, 100%, 100%)"] { fill: var(--bg); }
svg.fig [stroke="rgb(0%, 0%, 100%)"] { stroke: var(--plot1); }
svg.fig [stroke="rgb(100%, 0%, 0%)"] { stroke: var(--plot2); }

/* 动画图下方的播放控件 */
.anim-controls {
  display: flex; align-items: center; gap: 14px;
  max-width: 520px; margin: 10px auto 0; font-size: 15px;
}
.anim-play {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%;
  border: var(--rule) solid var(--text); background: transparent; color: var(--text);
  display: grid; place-items: center; cursor: pointer; padding: 0;
}
.anim-play:hover { background: var(--accent-soft); }
.anim-play svg { width: 14px; height: 14px; fill: currentColor; }
.anim-play .i-pause { display: none; }
.anim.is-playing .anim-play .i-pause { display: block; }
.anim.is-playing .anim-play .i-play { display: none; }
.anim-range { flex: 1; accent-color: var(--accent); cursor: pointer; }
.anim-time { min-width: 4.6em; color: var(--muted); font-variant-numeric: tabular-nums; } /* 图例底色跟随页面背景（深色模式） */
.prose figure { margin: 1.6em 0; text-align: center; }
.prose figcaption { color: var(--muted); font-size: 14px; margin-top: 6px; }
.back { display: inline-block; margin-top: 40px; font-size: 15px; }

/* ========== 页脚 ========== */
.site-footer { color: var(--muted); font-size: 13px; padding: 0 0 40px; text-align: center; line-height: 1.6; }
.site-footer .credit { opacity: .8; }

/* ========== 手机适配 ========== */
@media (max-width: 640px) {
  body { font-size: 16px; }
  .hero { flex-direction: column; align-items: flex-start; gap: 20px; }
  .avatar { width: 112px; height: 112px; }
  .hero h1 { font-size: 28px; }
  .nav { gap: 14px; font-size: 14px; }
  .site-title { font-size: 17px; }
  main.wrap { margin: 20px 10px 32px; padding: 28px 20px 36px; border-radius: 12px; }
  main.wrap.home { margin-top: 0; }
  .landing h1 { font-size: 32px; }
  .portrait { width: 112px; margin-left: 18px; }
  .prose { font-size: 17px; }
}

main.wrap > :first-child { margin-top: 0; }

/* 竖屏（手机）：白天的画以无畏号战舰为中心 */
@media (max-aspect-ratio: 1/1) { .bd-day::after { background-position: center, 24% 33%; } }