:root {
  color-scheme: light;
  --ink: #172533;
  --heading: #18364f;
  --muted: #5d6b78;
  --prose: #415364;
  --paper: #fbfaf7;
  --surface: #ffffff;
  --surface-soft: #f4f1ea;
  --line: #d9dee3;
  --accent: #245f87;
  --accent-deep: #18364f;
  --accent-soft: #e6f0f6;
  --feature-bg: #18364f;
  --button-bg: #18364f;
  --button-hover: #102b40;
  --secondary-bg: rgba(255,255,255,.78);
  --header-bg: rgba(251,250,247,.94);
  --nav-panel: rgba(255,255,255,.99);
  --hero-start: rgba(230,240,246,.45);
  --hero-end: rgba(251,250,247,0);
  --shadow: 0 18px 45px rgba(24,54,79,.10);
  --serif: Georgia, "Times New Roman", Times, serif;
  --sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans SC", "Microsoft YaHei", sans-serif;
  --max: 1040px;
  --reading: 720px;
}
html[data-theme="dark"] {
  color-scheme: dark;
  --ink: #e7edf2;
  --heading: #dcecf6;
  --muted: #a8b5c0;
  --prose: #bdc9d2;
  --paper: #0d141a;
  --surface: #141e26;
  --surface-soft: #1a2630;
  --line: #2b3a46;
  --accent: #79bce4;
  --accent-deep: #cce6f5;
  --accent-soft: #193448;
  --feature-bg: #102f46;
  --button-bg: #2b6f9c;
  --button-hover: #3382b5;
  --secondary-bg: rgba(20,30,38,.9);
  --header-bg: rgba(13,20,26,.94);
  --nav-panel: rgba(20,30,38,.99);
  --hero-start: rgba(27,58,78,.36);
  --hero-end: rgba(13,20,26,0);
  --shadow: 0 18px 45px rgba(0,0,0,.36);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:var(--sans); font-size:16px; line-height:1.68; text-rendering:optimizeLegibility; transition:background-color .2s ease,color .2s ease; }
a { color:var(--accent); text-decoration-thickness:.08em; text-underline-offset:.18em; }
a:hover { color:var(--accent-deep); }
img { display:block; max-width:100%; }
.skip-link { position:fixed; top:-5rem; left:1rem; z-index:300; padding:.7rem 1rem; border:1px solid var(--line); border-radius:.45rem; background:var(--surface); }
.skip-link:focus { top:1rem; }
.site-header { position:sticky; top:0; z-index:100; border-bottom:1px solid var(--line); background:var(--header-bg); backdrop-filter:blur(14px); }
.nav-wrap { position:relative; width:min(var(--max),calc(100% - 3rem)); min-height:4.3rem; margin:0 auto; display:flex; align-items:center; gap:1rem; }
.brand { display:inline-flex; align-items:center; gap:.72rem; color:var(--ink); text-decoration:none; }
.brand-mark { display:grid; width:2.15rem; height:2.15rem; place-items:center; border-radius:.45rem; color:#fff; background:#18364f; font-family:var(--serif); font-weight:700; }
.brand-text { font-family:var(--serif); font-weight:700; letter-spacing:.01em; white-space:nowrap; }
.nav-links { display:flex; align-items:center; gap:.08rem; margin-left:auto; }
.nav-links a { padding:.5rem .58rem; border-radius:.4rem; color:var(--muted); font-size:.9rem; font-weight:650; text-decoration:none; }
.nav-links a:hover,.nav-links a[aria-current="page"] { color:var(--accent-deep); background:var(--accent-soft); }
.nav-controls { display:flex; align-items:center; gap:.42rem; }
.control-button,.menu-button { min-height:2.35rem; display:inline-flex; align-items:center; justify-content:center; gap:.38rem; padding:.45rem .65rem; border:1px solid var(--line); border-radius:.55rem; color:var(--ink); background:var(--surface); font:inherit; font-size:.84rem; font-weight:700; cursor:pointer; }
.control-button:hover,.menu-button:hover { background:var(--surface-soft); }
.control-icon { min-width:1rem; font-size:1rem; line-height:1; }
.menu-button { display:none; }
main { min-height:70vh; }
.container { width:min(var(--max),calc(100% - 3rem)); margin-inline:auto; }
.narrow { width:min(var(--reading),calc(100% - 3rem)); margin-inline:auto; }
.section { padding:4.75rem 0; }
.section.compact { padding:3.5rem 0; }
.section-rule { border-top:1px solid var(--line); }
h1,h2,h3 { color:var(--heading); font-family:var(--serif); line-height:1.16; }
h1,h2,h3,p { overflow-wrap:break-word; }
.eyebrow,.page-kicker { margin:0 0 .9rem; color:var(--accent); font-size:.76rem; font-weight:800; letter-spacing:.13em; text-transform:uppercase; }
html[data-lang="zh"] .eyebrow,html[data-lang="zh"] .page-kicker { letter-spacing:.08em; }
.hero { padding:5rem 0 4.7rem; background:linear-gradient(180deg,var(--hero-start),var(--hero-end)); }
.hero-grid { display:grid; grid-template-columns:minmax(0,1fr) 270px; align-items:center; gap:clamp(2.8rem,6vw,5rem); }
.hero-grid>div { min-width:0; }
.hero h1 { margin:0; font-size:clamp(3.35rem,7vw,5.4rem); letter-spacing:-.045em; }
.hero .role { margin:.7rem 0 1.25rem; color:var(--muted); font-family:var(--serif); font-size:clamp(1.3rem,2.25vw,1.7rem); }
.lede { max-width:41rem; margin:0; color:var(--prose); font-size:1.1rem; }
.hero-actions { display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.9rem; }
.button { display:inline-flex; min-height:2.75rem; align-items:center; justify-content:center; gap:.45rem; padding:.68rem .95rem; border:1px solid transparent; border-radius:.45rem; font-weight:750; text-decoration:none; }
.button.primary { color:#fff; background:var(--button-bg); }
.button.primary:hover { color:#fff; background:var(--button-hover); }
.button.secondary { color:var(--accent-deep); border-color:var(--line); background:var(--secondary-bg); }
.button.secondary:hover { background:var(--surface); }
.portrait-frame { width:270px; margin:0; justify-self:end; }
.portrait-frame img { width:270px; height:270px; max-width:none; object-fit:cover; object-position:center; border:1px solid var(--line); border-radius:1rem; box-shadow:var(--shadow); }
.portrait-caption { margin:.62rem 0 0; color:var(--muted); font-size:.78rem; text-align:left; }
.math-strip { padding:1.3rem 0; border-block:1px solid rgba(0,0,0,.18); color:#eaf2f7; background:#18364f; }
.math-strip .container { display:grid; grid-template-columns:minmax(260px,.85fr) minmax(0,1.15fr); align-items:center; gap:2.5rem; }
.math-strip .formula { font-family:var(--serif); font-size:clamp(1.08rem,2.1vw,1.42rem); white-space:nowrap; }
.math-strip p { margin:0; color:#c8d8e4; font-size:.9rem; }
.section-head { max-width:var(--reading); margin-bottom:2rem; }
.section-head h2,.page-hero h1 { margin:0; font-size:clamp(2.15rem,4.5vw,3.25rem); letter-spacing:-.035em; }
.section-head p { max-width:42rem; margin:.55rem 0 0; color:var(--muted); }
.cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }
.card { display:flex; min-width:0; flex-direction:column; padding:1.4rem; border:1px solid var(--line); border-radius:.7rem; background:var(--surface); box-shadow:0 8px 24px rgba(0,0,0,.05); }
.card h3 { margin:0 0 .58rem; font-size:1.32rem; }
.card p { margin:0; color:var(--muted); }
.card .meta { display:block; margin-bottom:.6rem; color:var(--accent); font-size:.75rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.card-link { margin-top:auto; padding-top:1rem; font-weight:750; }
.feature { display:grid; grid-template-columns:minmax(280px,.9fr) minmax(0,1.35fr); align-items:center; gap:clamp(1.7rem,4vw,3rem); padding:clamp(1.25rem,3vw,2rem); border:1px solid var(--line); border-radius:.8rem; background:var(--surface); box-shadow:0 10px 30px rgba(0,0,0,.055); }
.feature>div { min-width:0; }
.feature-math { position:relative; display:grid; min-height:230px; place-items:center; overflow:hidden; padding:1.7rem; border-radius:.6rem; color:#fff; background:var(--feature-bg); }
.feature-math::before,.feature-math::after { position:absolute; width:15rem; height:6.5rem; border:1px solid rgba(255,255,255,.15); border-radius:50%; content:""; transform:rotate(-12deg); }
.feature-math::after { width:11rem; height:4.7rem; transform:rotate(18deg); }
.feature-formula { position:relative; z-index:2; font-family:var(--serif); font-size:clamp(1.1rem,2.3vw,1.55rem); text-align:center; }
.feature h3 { margin:.15rem 0 .75rem; font-size:clamp(1.55rem,2.7vw,1.9rem); }
.feature p { color:var(--muted); }
.feature-links { display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1.25rem; }
.list-clean { margin:0; padding:0; list-style:none; }
.list-clean li { padding:1rem 0; border-bottom:1px solid var(--line); }
.list-clean li:first-child { border-top:1px solid var(--line); }
.item-title { color:var(--heading); font-family:var(--serif); font-size:1.15rem; font-weight:700; }
.item-meta { margin-top:.18rem; color:var(--muted); font-size:.9rem; }
.page-hero { padding:4.5rem 0 3.5rem; background:linear-gradient(180deg,var(--hero-start),var(--hero-end)); }
.page-hero .container>* { max-width:46rem; }
.page-hero p:last-child { margin:1rem 0 0; color:var(--muted); font-size:1.08rem; }
.prose h2 { margin:2.6rem 0 .75rem; font-size:2rem; }
.prose h2:first-child { margin-top:0; }
.prose h3 { margin-top:2rem; }
.prose p,.prose li { color:var(--prose); }
.note { margin-top:1.5rem; padding:1.15rem 1.3rem; border-left:4px solid var(--accent); border-radius:0 .55rem .55rem 0; background:var(--surface-soft); }
.timeline { position:relative; max-width:780px; margin-left:.35rem; padding-left:2rem; }
.timeline::before { position:absolute; top:.35rem; bottom:.35rem; left:.35rem; width:1px; background:var(--line); content:""; }
.timeline-item { position:relative; margin-bottom:2rem; }
.timeline-item:last-child { margin-bottom:0; }
.timeline-item::before { position:absolute; top:.45rem; left:-2rem; width:.72rem; height:.72rem; border-radius:50%; background:var(--accent); box-shadow:0 0 0 .32rem var(--accent-soft); content:""; }
.timeline-item h3 { margin:0 0 .3rem; }
.timeline-item p { margin:.3rem 0; color:var(--muted); }
.cv-layout { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(230px,.55fr); align-items:start; gap:2rem; }
.cv-aside { position:sticky; top:5.7rem; align-self:start; }
.cv-aside .card+.card { margin-top:1rem; }
.pdf-frame { width:100%; min-height:850px; border:1px solid var(--line); border-radius:.65rem; background:var(--surface); }
.gallery-entry { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(260px,.65fr); align-items:center; gap:clamp(1.5rem,4vw,3rem); padding:clamp(1rem,2.5vw,1.5rem); border:1px solid var(--line); border-radius:.85rem; background:var(--surface); box-shadow:0 12px 32px rgba(0,0,0,.06); }
.gallery-entry-wide { grid-template-columns:1fr; }
.gallery-media { display:block; overflow:hidden; border:1px solid var(--line); border-radius:.7rem; background:var(--surface-soft); }
.gallery-media img { width:100%; height:auto; transition:transform .25s ease; }
.gallery-media:hover img { transform:scale(1.012); }
.gallery-copy { padding:.25rem .5rem; }
.gallery-copy h3 { margin:0 0 .75rem; font-size:clamp(1.55rem,2.8vw,2rem); }
.gallery-copy p { color:var(--muted); }
.gallery-entry-wide .gallery-copy { max-width:var(--reading); padding:.5rem .25rem .25rem; }
.site-footer { padding:2.1rem 0; border-top:1px solid var(--line); color:var(--muted); font-size:.9rem; }
.footer-grid { display:flex; align-items:center; justify-content:space-between; gap:1.5rem; }
.footer-links { display:flex; flex-wrap:wrap; gap:1rem; }
.footer-links a { color:var(--muted); }
@media (max-width:940px) { .control-label { display:none; } .nav-links a { padding:.5rem .48rem; font-size:.87rem; } }
@media (max-width:860px) { .hero-grid,.feature,.cv-layout,.gallery-entry { grid-template-columns:1fr; } .feature-image-panel { aspect-ratio:16/9; min-height:0; } .hero-grid { gap:2.7rem; } .portrait-frame { width:240px; justify-self:start; } .portrait-frame img { width:240px; height:240px; } .cards { grid-template-columns:1fr 1fr; } .feature-math { min-height:205px; } .cv-aside { position:static; } .math-strip .container { grid-template-columns:1fr; gap:.4rem; } .gallery-copy { padding:.5rem .25rem; } }
@media (max-width:700px) {
  .container,.narrow,.nav-wrap { width:min(100% - 2rem,var(--max)); }
  .menu-button { display:inline-flex; }
  .nav-links { position:absolute; top:calc(100% + .4rem); right:0; left:0; display:none; flex-direction:column; align-items:stretch; padding:.6rem; border:1px solid var(--line); border-radius:.65rem; background:var(--nav-panel); box-shadow:var(--shadow); }
  .nav-links.open { display:flex; } .nav-links a { padding:.72rem .8rem; font-size:.94rem; }
  .nav-controls { margin-left:auto; } .control-button { width:2.35rem; padding:.45rem; }
  .hero { padding:3.7rem 0; } .hero h1 { font-size:clamp(3rem,16vw,4.25rem); } .hero-actions .button { flex:1 1 10rem; }
  .portrait-frame { width:220px; } .portrait-frame img { width:220px; height:220px; }
  .section { padding:3.7rem 0; } .section.compact { padding:3rem 0; } .cards { grid-template-columns:1fr; } .page-hero { padding:3.7rem 0 3rem; }
  .feature { padding:1rem; } .feature-math { min-height:185px; } .math-strip .formula { white-space:normal; }
  .footer-grid { flex-direction:column; align-items:flex-start; } .pdf-frame { min-height:560px; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; animation:none!important; } }
@media print { .site-header,.site-footer,.hero-actions,.menu-button,.nav-controls { display:none; } body { background:#fff; color:#000; } .section,.page-hero { padding:1.5rem 0; } }


/* TeX-rendered covers */
.math-tex { line-height: 1; }
.math-tex mjx-container { margin: 0 !important; max-width: 100%; }
.feature-formula mjx-container,
.course-formula mjx-container,
.math-strip .formula mjx-container { color: inherit; }
.feature-title { position:relative; z-index:2; font-family:var(--serif); font-size:clamp(1.1rem,2.3vw,1.55rem); text-align:center; }

/* Courses: the fixed cover and growing file collection are independent. */
.course-panel { padding:clamp(1.25rem,3vw,2rem); border:1px solid var(--line); border-radius:.8rem; background:var(--surface); box-shadow:0 10px 30px rgba(0,0,0,.055); }
.course-overview { display:grid; grid-template-columns:220px minmax(0,1fr); align-items:center; gap:clamp(1.7rem,4vw,3rem); }
.course-cover { position:relative; display:grid; width:220px; aspect-ratio:1/1; place-items:center; justify-self:start; overflow:hidden; padding:1.35rem; border-radius:.65rem; color:#fff; background:var(--feature-bg); }
.course-cover::before,.course-cover::after { position:absolute; width:14rem; height:6rem; border:1px solid rgba(255,255,255,.15); border-radius:50%; content:""; transform:rotate(-12deg); }
.course-cover::after { width:10rem; height:4.3rem; transform:rotate(18deg); }
.course-formula { position:relative; z-index:2; width:100%; font-family:var(--serif); font-size:clamp(1.45rem,3vw,2rem); text-align:center; }
.course-copy h3 { margin:.15rem 0 .75rem; font-size:clamp(1.55rem,2.7vw,1.9rem); }
.course-copy p { color:var(--muted); }
.course-materials { margin-top:1.5rem; padding-top:1.35rem; border-top:1px solid var(--line); }
.course-materials-head { display:flex; align-items:baseline; justify-content:space-between; gap:1rem; margin-bottom:1rem; }
.course-materials-head h4 { margin:0; font-family:var(--serif); font-size:1.2rem; }
.course-materials-head p { max-width:38rem; margin:0; color:var(--muted); font-size:.92rem; text-align:right; }
.material-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(235px,1fr)); gap:.85rem; }
.material-card { display:flex; min-height:150px; flex-direction:column; justify-content:space-between; gap:1rem; padding:1rem; border:1px solid var(--line); border-radius:.65rem; background:var(--surface-soft); }
.material-card h5 { margin:.38rem 0 .35rem; color:var(--text); font-family:var(--serif); font-size:1.08rem; }
.material-card p { margin:0; color:var(--muted); font-size:.88rem; }
.material-type { display:inline-block; color:var(--accent); font-size:.72rem; font-weight:800; letter-spacing:.11em; text-transform:uppercase; }
.material-actions { display:flex; gap:.8rem; padding-top:.8rem; border-top:1px solid var(--line); }
.material-actions a { font-size:.9rem; font-weight:750; text-decoration:none; }
.material-empty { padding:1.1rem; border:1px dashed var(--line); border-radius:.65rem; color:var(--muted); background:var(--surface-soft); }

@media (max-width:700px) {
  .course-overview { grid-template-columns:1fr; }
  .course-cover { width:min(220px,70vw); justify-self:start; }
  .course-materials-head { display:block; }
  .course-materials-head p { margin-top:.35rem; text-align:left; }
}


/* v25 online mathematics cover fix */
.feature-online { grid-template-columns:minmax(360px,1.15fr) minmax(0,1fr); }
.feature-image-panel { padding:0; min-height:0 !important; aspect-ratio:16/9; align-self:start; background:#000 center/contain no-repeat; }
.feature-image-panel::before,
.feature-image-panel::after { display:none !important; }
@media (max-width:860px) {
  .feature-online { grid-template-columns:1fr; }
  .feature-image-panel { aspect-ratio:16/9; }
}