:root {
  color-scheme:light;
  --ink:#172d26;
  --pine:#102b22;
  --deep:#0d251d;
  --muted:#51625b;
  --paper:#f7f7f1;
  --line:#d8dfd4;
  --accent:#dcefaa;
  --font:"Inter","PingFang SC","Microsoft YaHei","Noto Sans CJK SC",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
}
*,*::before,*::after {box-sizing:border-box}
html {scroll-behavior:smooth;scroll-padding-top:84px}
body {margin:0;background:var(--paper);color:var(--ink);font:16px/1.7 var(--font);-webkit-font-smoothing:antialiased}
body,figure,ol,ul {margin:0}
img {display:block;max-width:100%;height:auto}
a {color:inherit;text-decoration:none}
button,summary {cursor:pointer}
a:focus-visible,summary:focus-visible {outline:2px solid #4c8764;outline-offset:5px}
.skip {position:fixed;top:8px;left:10px;transform:translateY(-160%);background:#fff;color:#111;padding:6px 14px;z-index:5}
.skip:focus {transform:none}
h1,h2,h3,p {margin:0}
.wrap {width:min(1150px,calc(100% - 88px));margin-inline:auto}
.top {position:sticky;top:0;z-index:4;background:#0d251df5;color:#f7f8ed;backdrop-filter:blur(14px);border-bottom:1px solid #b6ccae2c}
.nav {min-height:66px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand {display:inline-flex;align-items:center;gap:10px;font-weight:710;white-space:nowrap}
.brand-icon {display:grid;place-items:center;background:var(--accent);color:var(--deep);font:700 17px var(--mono);border-radius:8px;width:34px;height:34px}
.brand-en {color:#aebfb3;font:500 10px var(--mono);letter-spacing:.09em}
nav {display:flex;gap:clamp(16px,3vw,36px);color:#d5e0d6;font-size:14px}
nav a:hover,.nav-cta:hover {color:var(--accent)}
.nav-cta {font-size:13px;white-space:nowrap;border-bottom:1px solid #c7d8c271}
.hero {background:radial-gradient(ellipse at 90% 45%,#345947 0,#16372b 35%,var(--deep) 76%);color:#f9faef;overflow:hidden}
.hero-grid {min-height:min(635px,72vw);display:grid;grid-template-columns:1.14fr .86fr;align-items:center;gap:clamp(36px,6vw,94px);padding-block:72px}
.eyebrow {color:#426b52;font:650 12px/1.5 var(--mono);letter-spacing:.10em}
.hero-tag {display:flex;align-items:center;gap:9px;color:var(--accent);letter-spacing:.04em}
.hero-tag span {border-radius:50%;width:7px;height:7px;background:var(--accent);flex:none}
.hero h1 {display:block;margin-top:18px;font-size:clamp(60px,7.8vw,115px);font-weight:800;line-height:1.03;letter-spacing:-.052em}
.hero h1 span {display:block;margin-top:13px;font:400 clamp(18px,2.9vw,39px)/1 "Inter",system-ui,sans-serif;letter-spacing:-.03em;color:#b5cbb8}
.lead {margin-top:31px;font-size:clamp(23px,2.7vw,38px);font-weight:680;letter-spacing:-.045em}
.intro {margin-top:12px;color:#c5d3c8;font-size:clamp(15px,1.4vw,17px)}
.actions,.contact-actions {display:flex;flex-wrap:wrap;gap:11px;margin-top:28px}
.button {display:inline-flex;min-height:48px;align-items:center;justify-content:center;gap:13px;padding:9px 18px;border:1px solid transparent;border-radius:9px;white-space:nowrap;font-size:14px;font-weight:650;transition:background .2s ease,color .2s ease,border-color .2s ease}
.button-primary {background:var(--accent);color:var(--deep)}
.button-primary:hover {background:#eff8d5;border-color:#7d9c58}
.button-outline {border-color:#a3bcab;color:#f8faf0}
.button-outline:hover {background:#345347}
.button-muted {border-color:#b2c5b8;color:var(--ink)}
.button-muted:hover {background:#e5eee2}
.portrait-stage {background:#6e7371;border:1px solid #c5dbc37c;border-radius:18px;box-shadow:0 24px 68px #071a1470;position:relative;overflow:hidden;isolation:isolate}
.portrait-stage img {width:100%;aspect-ratio:1 / 1.1;object-fit:cover;object-position:50% 8%}
.portrait-stage figcaption {position:absolute;inset:auto 0 0;display:flex;justify-content:space-between;gap:12px;padding:55px 21px 17px;background:linear-gradient(transparent,#0a1f19d9);font-size:13px;color:#fff}
.portrait-stage figcaption span:last-child {color:#e6eddf}
.stats {background:#e9eee1;border-bottom:1px solid var(--line)}
.stats-grid {display:grid;grid-template-columns:repeat(4,1fr);padding-block:25px}
.stats-grid>div {padding:4px 24px;border-left:1px solid #c6d2c4;display:flex;flex-direction:column;gap:5px}
.stats-grid>div:first-child {border-left:0;padding-left:0}
.stats-grid strong {font:690 clamp(36px,4vw,55px)/1 var(--font);font-variant-numeric:tabular-nums;letter-spacing:-.06em}
.stats-grid strong span {font-size:.38em;letter-spacing:0}
.stats-grid>div>span {font-size:13px;color:#45594c}
.section {padding-block:88px}
.section-head {display:flex;align-items:flex-end;justify-content:space-between;gap:13px;margin-bottom:30px}
.section h2,.contact h2 {margin-top:5px;font-size:clamp(31px,4vw,53px);font-weight:790;line-height:1.18;letter-spacing:-.048em}
.case-grid,.course-grid,.practical-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.case {display:flex;flex-direction:column;justify-content:flex-start;border-radius:17px;padding:clamp(24px,3.4vw,44px);min-height:340px}
.case-dark {background:linear-gradient(140deg,#194533,#0f2c22 80%);color:#f3f8ee}
.case-dark .eyebrow {color:#cae7a8}
.case-light {background:#e8eee2;border:1px solid #d9e3d4}
.case h3 {font-size:clamp(24px,3.1vw,37px);margin-top:8px;line-height:1.35;font-weight:760;letter-spacing:-.04em}
.case>p:not(.eyebrow) {margin-top:13px;font-size:15px;color:var(--muted)}
.case-dark>p:not(.eyebrow),.case-dark footer>span {color:#c8d9ce}
.case footer {margin-top:auto;padding-top:28px;display:flex;gap:18px;align-items:center}
.case footer strong {font-size:clamp(52px,6.2vw,82px);line-height:1;letter-spacing:-.07em}
.case footer strong span {font-size:.45em}
.case footer>span {font-size:13px;color:#3c5848}
.teaching {background:#edf1e8;border-block:1px solid #dfe7db}
.topic-grid {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px}
.topic {background:#fbfcf7;border-radius:13px;overflow:hidden;border:1px solid #dce5d9}
.topic img {width:100%;height:auto;aspect-ratio:1.67;object-fit:cover}
.topic>div {padding:16px 15px 20px}
.topic h3 {font-size:17px;line-height:1.4}
.topic p,.course-group p {margin-top:7px;color:var(--muted);font-size:14px}
.subsection {margin-top:46px}
.subsection h3 {font-size:24px;letter-spacing:-.035em}
.course-grid {margin-top:14px;align-items:start}
.course-group {background:#fbfcf7;border:1px solid #dce5d9;border-radius:10px;overflow:hidden}
.course-group summary,.job-reference summary,.wechat summary {display:flex;align-items:center;gap:10px;min-height:52px;padding:10px 15px;list-style:none}
summary::-webkit-details-marker {display:none}
.course-group summary::after,.job-reference summary::after,.wechat summary::after {content:"+";margin-left:auto;font-size:20px;font-weight:400}
.course-group[open] summary::after,.job-reference[open] summary::after,.wechat[open] summary::after {content:"−"}
.course-group summary span {font-size:12px;color:#4f6758}
.course-group ul {padding:0 15px 8px;list-style:none}
.course-group li {display:flex;justify-content:space-between;align-items:start;gap:10px;border-top:1px solid var(--line);padding-block:12px;font-size:14px}
.course-group p {margin-top:2px}
.course-group li>span {white-space:nowrap;color:#506859;font-size:12px}
.sub-head {display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin-bottom:13px}
.sub-head a,.text-link {font-size:13px;color:#315e46;text-decoration:underline;text-underline-offset:4px}
.clip-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.clip {display:flex;align-items:center;gap:12px;min-height:100px;padding:17px 14px;border-radius:10px;background:#164232;color:#f3f8ef;border:1px solid transparent}
.clip:hover {background:#215541;border-color:#597f69}
.play {display:grid;place-items:center;width:29px;height:29px;border-radius:50%;background:var(--accent);color:#163529;font-size:9px;flex:none}
.clip div {display:grid;flex:1;font-size:14px}
.clip div span {color:#c4dbca;font-size:12px}
.clip>span:last-child {color:#c8dec9}
.timeline {padding:0;list-style:none}
.timeline-row {display:grid;grid-template-columns:minmax(125px,.29fr) 1fr;align-items:start;gap:20px;padding:22px 0;border-top:1px solid var(--line)}
.timeline-row:last-child {border-bottom:1px solid var(--line)}
.time {font:500 13px/1.6 var(--mono);color:#4c6256;white-space:nowrap}
.timeline-row>.time {padding-top:4px}
.timeline h3 {font-size:21px;line-height:1.35}
.timeline h3 span {display:inline-block;font-size:13px;color:#3d6450;font-weight:570;margin-left:13px}
.timeline p,.practical p {font-size:14px;color:var(--muted);margin-top:6px}
.practical {padding-top:0}
.practical-card {display:flex;align-items:center;justify-content:space-between;gap:10px;padding:24px;border:1px solid var(--line);border-radius:13px;background:#fff}
.practical-card:hover {border-color:#7b9c87;background:#fafcf8}
.contact {background:var(--deep);color:#f2f6ec;padding:66px 0 22px}
.contact .eyebrow {color:#c6ddaa}
.contact h2+p {margin-top:15px;color:#c3d4c8}
.contact .button-primary:nth-child(2) {background:none;border-color:#a3bcab;color:#f2f6ec}
.contact .button-primary:nth-child(2):hover {background:#264d3a}
.wechat {width:min(100%,225px);margin-top:16px}
.wechat summary {padding-left:0;color:#d9ebd9}
.wechat img {width:200px;border-radius:8px}
.footer-line {display:flex;justify-content:space-between;gap:12px;margin-top:34px;border-top:1px solid #a5c3ab3d;padding-top:17px;color:#b7cabe;font-size:12px}
.resume {max-width:900px;padding-bottom:60px}
.resume-intro {display:flex;gap:18px;align-items:center;justify-content:space-between;padding:48px 0 34px}
.resume-intro h1 {font-size:clamp(46px,7vw,84px);line-height:1.15;letter-spacing:-.05em}
.resume-intro img {width:clamp(88px,18vw,152px);border-radius:11px}
.resume-title {margin:10px 0 3px;font-size:clamp(17px,2.4vw,24px);font-weight:720}
.resume-section {padding-block:24px;border-top:1px solid var(--line)}
.resume-section h2 {font-size:27px;margin-bottom:13px}
.resume-section p,.detail-list {color:#40544a}
.tags {display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}
.tags span {background:#e5eee1;border-radius:6px;padding:3px 9px;color:#294a39;font-size:13px}
.resume-entry {padding:16px 0;border-top:1px solid #e3e7de}
.resume-entry header {display:flex;align-items:start;justify-content:space-between;gap:12px}
.resume-entry h3 {font-size:17px;line-height:1.45}
.resume-section .resume-role {font-size:13px;color:#3d6450;margin-top:4px;font-weight:670}
.detail-list {padding-left:22px;margin-block:10px}
.detail-list li + li {margin-top:6px}
.job-reference {padding:0 14px 0;background:#e9f0e5;border:1px solid #d9e6d8;border-radius:8px;margin:0 0 15px}
.job-reference summary {padding:8px 0;font-size:14px;font-weight:650}
.job-reference[open] {padding-bottom:14px}
.resume-bottom {display:flex;align-items:center;gap:18px}
@media (max-width:980px) {
  .wrap {width:calc(100% - 60px)}
  .hero-grid {min-height:0;padding-block:56px}
  .topic-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:680px) {
  .wrap {width:calc(100% - 32px)}
  .nav {min-height:59px;gap:11px}
  nav {display:none}
  .hero-grid {grid-template-columns:minmax(0,1fr);gap:32px;padding-block:33px 27px}
  .hero h1 {font-size:clamp(51px,13vw,78px);margin-top:13px}
  .hero h1 span {font-size:23px;margin-top:8px}
  .lead {margin-top:17px}
  .intro {font-size:14px}
  .desktop {display:none}
  .hero .actions {margin-top:18px}
  .portrait-stage {width:min(100%,425px)}
  .portrait-stage img {aspect-ratio:1.18;object-position:center 22%}
  .stats-grid {grid-template-columns:repeat(2,minmax(0,1fr));padding-block:15px;row-gap:11px}
  .stats-grid>div {padding-left:15px}
  .stats-grid>div:nth-child(3) {border-left:0;padding-left:0}
  .stats-grid>div>span {font-size:12px}
  .section {padding-block:55px}
  .section-head {margin-bottom:20px}
  .case-grid,.course-grid,.practical-grid,.clip-grid {grid-template-columns:minmax(0,1fr);gap:12px}
  .case {min-height:275px}
  .topic-grid {gap:9px}
  .topic>div {padding:10px}
  .topic h3 {font-size:15px}
  .topic p {font-size:12px}
  .subsection {margin-top:32px}
  .clip {min-height:64px;padding:9px 12px}
  .timeline-row {grid-template-columns:1fr;gap:4px;padding:16px 0}
  .timeline h3 {font-size:19px}
  .practical {padding-top:0}
  .contact {padding-top:43px}
  .resume-intro {position:relative;padding-block:24px}
  .resume-intro img {position:absolute;right:0;top:24px;width:75px}
  .resume-intro h1,.resume-title,.resume-intro p {padding-right:83px}
  .resume-intro h1 {margin-top:3px}
  .resume-intro .actions {gap:7px;margin-top:17px}
  .resume-entry header {display:grid;gap:2px}
}
@media (prefers-reduced-motion:reduce) {html {scroll-behavior:auto}.button {transition:none}}