:root{color-scheme:dark;--bg:#0f172a;--text:#98a6bd;--bright:#e2e8f0;--muted:#798ba5;--accent:#6ee7cf;--line:rgba(148,163,184,.15);font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;font-synthesis:none}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:88px}body{margin:0;background:var(--bg);color:var(--text);font-size:15px;line-height:1.75;-webkit-font-smoothing:antialiased}::selection{background:#5eead4;color:#0f172a}a{color:inherit;text-decoration:none}button{font:inherit}a,button,summary{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:7px;border-radius:3px}button,summary{touch-action:manipulation}svg{display:block}p,h1,h2,h3,h4{margin:0}strong{color:#cbd5e1;font-weight:500}.ambient{pointer-events:none;position:fixed;inset:0;background:radial-gradient(700px circle at var(--mouse-x,15%) var(--mouse-y,10%),rgba(29,78,216,.16),transparent 80%);z-index:-1}.layout{--bottom-space:88px;max-width:1184px;margin:0 auto;display:grid;grid-template-columns:44% 56%;gap:0;padding:0 48px}.sidebar{position:sticky;top:0;align-self:start;height:100svh;min-height:590px;padding:60px 28px var(--bottom-space) 0;display:flex;flex-direction:column;justify-content:space-between}.sidebar h1{color:var(--bright);font-size:clamp(36px,3.8vw,48px);font-weight:650;letter-spacing:-.8px;line-height:1.2}.chinese-name{display:inline-block;font-size:19px;letter-spacing:2px;font-weight:500;margin-left:16px;vertical-align:baseline}.role{margin-top:16px;color:#c7d2e4;font-size:17px;font-weight:500;letter-spacing:.7px}.role>span{padding:0 8px;color:var(--muted)}.intro{margin-top:12px;font-size:14px;line-height:1.75;letter-spacing:.5px}.navigation{display:flex;flex-direction:column;align-items:flex-start;gap:2px;margin-top:30px}.nav-link{display:flex;align-items:center;gap:15px;min-height:38px;font-size:12px;font-weight:600;letter-spacing:2px;transition:color .2s}.nav-line{height:1px;background:#465772;width:58px;flex-shrink:0;transition:background .25s}.nav-en{font-size:9px;letter-spacing:1.8px;opacity:0;transition:opacity .2s}.nav-link.active,.nav-link:hover{color:var(--bright)}.nav-link.active .nav-line,.nav-link:hover .nav-line{background:var(--accent)}.nav-link.active .nav-en,.nav-link:hover .nav-en{opacity:.65}.sidebar-bottom{margin-top:42px}main{min-width:0;padding:64px 0 var(--bottom-space) 26px}main:focus{outline:none}.section{margin-bottom:136px;scroll-margin-top:0}.about p{margin-bottom:12px;line-height:1.75}.principles{display:flex;gap:20px;flex-wrap:wrap;margin-top:18px;font-size:10px;letter-spacing:1px;color:#9bacbf}.principles span{display:flex;align-items:center;gap:8px}.principles span:before{content:"";width:3px;height:3px;background:var(--accent);border-radius:50%}.experience-list{display:grid;gap:25px}.experience-card{display:grid;grid-template-columns:minmax(108px,1fr) minmax(0,3fr);gap:16px;align-items:start;border-radius:6px;padding:17px 15px;margin:-17px -15px 0;transition:background .2s,box-shadow .2s}.experience-card:hover{background:rgba(148,163,184,.075);box-shadow:inset 0 1px rgba(148,163,184,.14)}.experience-card:hover h3{color:var(--accent)}.date{font-size:12px;line-height:20px;font-weight:500;font-variant-numeric:tabular-nums;letter-spacing:.3px;color:var(--muted);white-space:nowrap;padding-top:3px}.experience-card h3,.education-row h3{font-size:14px;color:#d8e2ef;font-weight:500;line-height:1.7}.title-separator{color:var(--muted);padding:0 3px}.entry-description{font-size:13px;line-height:1.75;margin-top:7px}.position{font-size:12px;line-height:1.75;color:#b0bdd0;margin-top:6px}.tags{list-style:none;margin:9px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:7px}.tags li,.tags>span{font-size:10px;line-height:1.6;padding:3px 9px;border-radius:20px;background:rgba(45,212,191,.09);color:#78d9ca;font-weight:500;letter-spacing:.2px}.education{border-top:1px solid var(--line);margin-top:24px;padding-top:18px}.subheading{font-size:11px;color:#becadc;letter-spacing:1px;margin-bottom:15px}.subheading span{font-size:8px;color:var(--muted);letter-spacing:1.5px;margin-left:10px}.education-row{display:grid;grid-template-columns:99px 1fr auto;gap:16px;margin-top:14px;align-items:start}.education-row h3{font-size:13px}.education-row div p{font-size:12px;margin-top:3px}.studying{font-size:9px;letter-spacing:1px;color:var(--accent);border:1px solid #6ee7cf2b;border-radius:3px;padding:0 6px}.project{margin:0 -16px 10px;padding:14px 16px;border-radius:7px;border:1px solid transparent;transition:background .2s,border-color .2s}.project:hover,.project[open]{background:rgba(148,163,184,.075);border-color:rgba(148,163,184,.14);box-shadow:inset 0 1px rgba(148,163,184,.07)}.project summary{display:grid;grid-template-columns:130px 1fr;gap:21px;list-style:none;cursor:pointer}.project summary::-webkit-details-marker{display:none}.project-art{height:96px;border:1px solid #657e8a35;border-radius:5px;overflow:hidden;margin-top:5px;background:linear-gradient(135deg,#152a34,#14212e);display:flex;align-items:center;justify-content:center}.project-art svg{width:115px;stroke:#6ba699;stroke-width:1}.knowledge{background:linear-gradient(135deg,#252541,#172033);border-color:#9285b930}.knowledge svg{stroke:#a69bc8}.research{background:linear-gradient(135deg,#192b43,#152135);border-color:#78a1c130}.research svg{stroke:#7b9fbc}.project-info{display:block}.project-status{display:block;font-size:9px;letter-spacing:1.2px;color:var(--muted);margin-bottom:4px}.project-title{display:flex;gap:8px;align-items:center;justify-content:space-between;color:var(--bright);font-weight:500;font-size:14px;transition:color .2s}.project:hover .project-title,.project[open] .project-title{color:var(--accent)}.expand-icon{font-size:18px;font-weight:300;line-height:1;transition:transform .2s}.project[open] .expand-icon{transform:rotate(45deg)}.project-description{display:block;font-size:12px;line-height:1.75;margin-top:6px}.project .tags{margin-top:8px}.project-detail{padding:16px 0 0 151px;font-size:12px;line-height:1.75}.project-detail h4{font-size:11px;color:var(--bright);font-weight:500;margin-bottom:8px}.project-detail p+p{margin-top:10px}.footer{font-size:11px;line-height:1.9;color:var(--muted);border-top:1px solid var(--line);padding-top:7px}.footer>div{line-height:24px;display:flex;justify-content:space-between;gap:12px;font-size:10px;letter-spacing:.3px;margin-top:0}.footer a:hover{color:var(--accent)}.projects{margin-bottom:42px}.skip-link{position:fixed;top:12px;left:12px;transform:translateY(-200%);z-index:50;background:var(--accent);color:var(--bg);padding:8px 16px;border-radius:4px}.skip-link:focus{transform:translateY(0)}
@media(min-width:1400px){.layout{--bottom-space:96px;max-width:1232px;grid-template-columns:46% 54%}.sidebar{padding-top:76px}main{padding-top:80px}}
@media(max-width:1000px) and (min-width:761px){.layout{padding:0 30px;grid-template-columns:42% 58%}.sidebar h1{font-size:36px}.chinese-name{font-size:17px;margin-left:10px}.sidebar{padding-right:18px}.role{font-size:14px}.role>span{padding:0 4px}main{padding-left:16px}.experience-card{grid-template-columns:108px minmax(0,1fr);gap:16px}.education-row{grid-template-columns:80px 1fr;gap:12px}.studying{display:none}.project summary{grid-template-columns:102px 1fr;gap:15px}.project-art{height:80px}.project-detail{padding-left:117px}}
@media(max-width:760px){html{scroll-padding-top:82px}.layout{display:block;padding:0 25px;max-width:620px}.sidebar{position:relative;height:auto;min-height:0;padding:32px 0 0;display:block}.sidebar h1{font-size:39px}.chinese-name{font-size:18px;margin-left:12px}.role{font-size:15px;margin-top:14px}.intro{font-size:14px;margin-top:10px}.navigation{flex-direction:row;gap:25px;margin-top:20px;padding:8px 0 10px;border-bottom:1px solid var(--line)}.nav-link{font-size:12px;letter-spacing:1px;min-height:30px;gap:7px}.nav-line{display:none}.nav-link.active{color:var(--accent)}.nav-en{display:none}.sidebar-bottom{margin-top:15px;display:flex;justify-content:space-between;align-items:center;gap:12px}main{padding:32px 0 24px}.section{margin-bottom:96px}.about p{font-size:14px}.principles{gap:15px;font-size:9px}.experience-card{grid-template-columns:1fr;gap:6px;margin:0;padding:0}.experience-list{gap:24px}.experience-card:hover{background:none;box-shadow:none}.date{font-size:12px;padding-top:0}.entry-description{font-size:13px}.education-row{grid-template-columns:88px 1fr auto;gap:10px}.project{margin:0 -10px 8px;padding:12px 10px}.project summary{grid-template-columns:94px 1fr;gap:15px}.project-art{height:77px}.project-art svg{width:92px}.project-title{font-size:14px}.project-description{font-size:12px}.project-detail{padding-left:109px}.projects{margin-bottom:36px}}
@media(max-width:370px){.layout{padding:0 20px}.sidebar h1{font-size:34px}.chinese-name{font-size:16px;margin-left:10px}.navigation{gap:18px}.project summary{grid-template-columns:1fr}.project-art{display:none}.project-detail{padding-left:0}.principles{gap:11px}.education-row{grid-template-columns:80px 1fr}.studying{display:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}.ambient{background:radial-gradient(700px circle at 15% 10%,rgba(29,78,216,.16),transparent 80%)}}

/* Keep section labels accessible without adding visible title rows. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.social-links {
  display: flex;
  align-items: center;
  gap: 16px;
  list-style: none;
  margin: 0 0 0 -4px;
  padding: 0;
}
.social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 4px;
  border: 0;
  background: transparent;
  color: var(--text);
  transition: color .2s, transform .2s;
}
.social-icon svg { width: 24px; height: 24px; }
.social-xhs svg { width: 32px; flex-shrink: 0; }
a.social-icon:hover { color: var(--accent); transform: translateY(-2px); }
button.social-icon:hover, button.social-icon[aria-expanded="true"] { color: var(--accent); transform: translateY(-2px); }
button.social-icon { cursor: pointer; }

/* Popover cards for accounts that have no stable profile URL. */
.social-pop { position: relative; }
.social-popover {
  position: absolute;
  bottom: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 30;
  width: max-content;
  max-width: min(240px, calc(100vw - 40px));
  padding: 14px 16px;
  border: 1px solid rgba(148,163,184,.22);
  border-radius: 10px;
  background: #17233c;
  box-shadow: 0 12px 32px rgba(2,6,23,.55);
  text-align: center;
}
.social-popover img { width: 180px; height: auto; border-radius: 6px; margin: 0 auto 10px; }
.pop-account { font-size: 12px; color: var(--bright); letter-spacing: .3px; }
.copy-btn {
  border: 0;
  padding: 1px 7px;
  border-radius: 4px;
  background: rgba(45,212,191,.12);
  color: var(--accent);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background .2s;
}
.copy-btn:hover { background: rgba(45,212,191,.22); }
.pop-hint { font-size: 10px; color: var(--muted); margin-top: 6px; letter-spacing: .3px; }
.pop-hint.copied { color: var(--accent); }

@media (max-width: 760px) {
  .sidebar-bottom { margin-top: 24px; }
  .social-links { gap: 8px; margin-left: -10px; }
  .social-icon { width: 44px; height: 44px; padding: 10px; }
  /* Sidebar sits at the top on mobile, so popovers open downward. */
  .social-popover { bottom: auto; top: calc(100% + 10px); left: 0; transform: none; }
}

.writing{background:linear-gradient(135deg,#1b2745,#172039);border-color:#718ac038}
.writing svg{stroke:#718ac0;stroke-linecap:round;stroke-linejoin:round}

.experience-card > div{min-width:0}

/* One accessible link makes the full experience card clickable. */
.experience-card { position: relative; }
.experience-link::after { content: ""; position: absolute; inset: 0; border-radius: 6px; }
.experience-link .external-arrow {
  display: inline-block;
  width: 15px;
  height: 15px;
  margin-left: 5px;
  vertical-align: -2px;
  transition: transform .2s ease;
}
.experience-card:hover .external-arrow,
.experience-card:has(.experience-link:focus-visible) .external-arrow { transform: translate(3px, -3px); }
.experience-card:has(.experience-link:focus-visible) {
  background: rgba(148,163,184,.075);
  box-shadow: inset 0 1px rgba(148,163,184,.14);
  border-radius: 6px;
}
.experience-card:has(.experience-link:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}
.experience-card:has(.experience-link:focus-visible) h3 { color: var(--accent); }
.experience-link:focus-visible { outline: none; }

.position-list{list-style:disc;padding-left:15px;margin-bottom:0}
.position-list li{padding-left:2px}
.position-list li::marker{color:var(--muted);font-size:9px}