:root {
  color-scheme:light;
  --ink:#233344;
  --muted:#667788;
  --blue:#217298;
  --line:#e3eaf0;
  --pale:#f2f8fc;
  --sans:"ChillRoundF",-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",Arial,sans-serif;
}

* {
  box-sizing:border-box;
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:28px;
}

body {
  margin:0;
  background:#f0f3f5;
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  padding:48px 28px;
}

a {
  color:var(--blue);
  text-decoration:none;
}

a:hover {
  text-decoration:underline;
  text-underline-offset:4px;
}

a:focus-visible {
  outline:2px solid var(--blue);
  outline-offset:5px;
  border-radius:2px;
}

p,h1,h2,h3,dl,dd {
  margin:0;
}

h2 {
  font-size:23px;
  letter-spacing:-.55px;
  line-height:1.3;
  font-weight:650;
}

h3 {
  font-size:18px;
  line-height:1.4;
  font-weight:650;
  letter-spacing:-.25px;
}

.sheet {
  max-width:1160px;
  margin:auto;
  background:#fff;
  border:1px solid #e2e8ed;
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 16px 60px #253d5110,0 2px 5px #253d5104;
}

.masthead {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
  padding:32px 38px;
  border-bottom:1px solid var(--line);
}

.eyebrow,.project-kind,.tool-label,dt,.timeline-date {
  font:12px/1.6 var(--sans);
  letter-spacing:1.25px;
}

.eyebrow {
  color:var(--blue);
}

h1 {
  font-size:37px;
  line-height:1.3;
  letter-spacing:-1.5px;
  font-weight:650;
  margin-top:7px;
}

.alias {
  font-size:25px;
  font-weight:400;
  color:#8b9aa7;
  white-space:nowrap;
  letter-spacing:-.8px;
}

.masthead-note {
  text-align:right;
  font-size:15px;
  flex-shrink:0;
  color:#526778;
}


.layout {
  display:grid;
  grid-template-columns:242px minmax(0,1fr);
}

.sidebar {
  padding:34px 30px 28px;
  border-right:1px solid var(--line);
  display:flex;
  flex-direction:column;
  background:linear-gradient(180deg,#fbfcfd 0%,#fff 75%);
}

.avatar {
  display:block;
  border-radius:18px;
  border:1px solid var(--line);
  object-fit:cover;
}

.status {
  margin-top:17px;
  font-size:13px;
  color:#536d64;
  display:flex;
  align-items:center;
  gap:7px;
}

.status > span[aria-hidden] {
  display:inline-block;
  width:6px;
  height:6px;
  border-radius:50%;
  background:#70a18a;
  flex-shrink:0;
}

.profile-details {
  margin-top:26px;
}

.profile-details>div+div {
  margin-top:19px;
}

dt {
  color:var(--muted);
  margin-bottom:4px;
}

dd {
  font-size:15px;
  line-height:1.65;
}

.section-nav {
  border-top:1px solid var(--line);
  margin-top:30px;
  padding-top:24px;
}

.section-nav .eyebrow {
  color:var(--muted);
  margin-bottom:9px;
}

.section-nav a {
  display:flex;
  align-items:center;
  gap:12px;
  font:12px/1.6 var(--sans);
  color:#8e9daa;
  padding:7px 0;
}

.section-nav a span {
  font:15px/1.6 var(--sans);
  color:#536778;
}

.section-nav a:hover span {
  color:var(--blue);
}

.contact {
  margin-top:32px;
}

.contact h2 {
  font-size:18px;
  margin-bottom:13px;
}

.contact a {
  display:flex;
  justify-content:space-between;
  padding:7px 0;
  border-bottom:1px solid var(--line);
  font-size:15px;
}




main {
  padding:34px 38px 38px;
  min-width:0;
}

main>section+section {
  margin-top:32px;
}

.section-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-bottom:16px;
}


.intro .lede {
  font-size:20px;
  line-height:1.5;
  letter-spacing:-.3px;
  color:#345064;
  margin-bottom:13px;
  max-width:570px;
}

.intro>p:not(.lede) {
  font-size:15px;
  color:#5b6d7c;
  margin-top:8px;
  max-width:625px;
}

.interest-line {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:18px;
  color:var(--blue);
  font-size:13px;
}

.interest-line i {
  color:#b8cbd6;
  font-style:normal;
}

.projects-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:24px 26px;
}

.project {
  border-left:2px solid #bcdce9;
  padding-left:16px;
  min-width:0;
}

.project-kind {
  font-size:11px;
  color:var(--blue);
  letter-spacing:.7px;
  margin-bottom:7px;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  align-items:center;
}

.wip {
  font:11px/1.7 var(--sans);
  letter-spacing:0;
  background:#edf5f1;
  color:#507966;
  padding:0 5px;
  border-radius:3px;
}

.project h3 {
  margin-bottom:8px;
}

.project h3 a {
  color:var(--ink);
}

.project h3 a span[aria-hidden] {
  color:#6591aa;
  font-size:17px;
  margin-left:3px;
}

.project>p:not(.project-kind),.project-wide p:not(.project-kind) {
  font-size:14px;
  line-height:1.75;
  color:#536778;
}

.project .project-detail {
  color:var(--muted)!important;
  font-size:13px!important;
  margin-top:8px;
}

.result {
  margin:14px 0;
  display:flex;
  align-items:baseline;
  gap:8px;
  flex-wrap:wrap;
}

.result strong {
  font-size:24px;
  line-height:1;
  color:var(--blue);
  font-weight:550;
  letter-spacing:-.8px;
}

.result span {
  font-size:11px;
  color:var(--muted);
}

.tags {
  display:flex;
  flex-wrap:wrap;
  gap:5px;
}

.tags span {
  border:1px solid #deebf2;
  background:var(--pale);
  border-radius:4px;
  padding:2px 7px;
  color:#527087;
  font-size:12px;
  line-height:1.6;
}

.project-wide {
  grid-column:1/-1;
  display:grid;
  grid-template-columns:1fr 148px;
  gap:22px;
  border-top:1px solid var(--line);
  border-left:0;
  padding:20px 0 0;
}

.project-wide h3 {
  margin-bottom:5px;
}

.transit-result {
  border-left:1px solid var(--line);
  padding-left:22px;
  align-self:center;
}

.transit-result strong {
  font-size:31px;
  line-height:1.3;
  letter-spacing:-1px;
  color:var(--blue);
  font-weight:500;
}

.transit-result strong span {
  font-size:19px;
}

.transit-result p {
  font-size:12px!important;
  line-height:1.5!important;
  color:var(--muted)!important;
}

.timeline {
  display:grid;
  gap:19px;
}

.timeline-item {
  display:grid;
  grid-template-columns:126px 1fr;
  gap:16px;
}

.timeline-date {
  font-size:11px;
  color:#788b9b;
  letter-spacing:.5px;
  padding-top:3px;
}

.timeline-item h3 {
  font-size:15px;
}

.timeline-item p {
  font-size:14px;
  line-height:1.65;
  color:var(--muted);
  margin-top:4px;
}

.role {
  display:block;
  color:var(--blue);
  font-size:13px;
  letter-spacing:0;
  font-weight:400;
  margin-top:3px;
}

.bottom-grid {
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:32px;
  border-top:1px solid var(--line);
  padding-top:25px;
}

.bottom-grid h2 {
  font-size:20px;
}

.tool-label {
  font-size:11px;
  color:var(--muted);
  letter-spacing:.7px;
  margin:14px 0 7px;
}

.beyond {
  border-left:1px solid var(--line);
  padding-left:26px;
}

.beyond>p {
  font-size:14px;
  color:#607483;
  line-height:1.8;
  margin-top:13px;
}

.photo-link {
  display:inline-block;
  font-size:13px;
  margin-top:12px;
}

.beyond .languages {
  font-size:12px;
  color:var(--muted);
  margin-top:12px;
}


footer {
  border-top:1px solid var(--line);
  padding:17px 30px;
  display:flex;
  justify-content:space-between;
  gap:16px;
  font-size:12px;
  color:var(--muted);
  background:#fcfdfe;
}


footer a {
  color:#617f92;
}

.skip-link {
  position:absolute;
  top:-70px;
  left:20px;
  padding:10px 15px;
  background:#fff;
  z-index:10;
}

.skip-link:focus {
  top:10px;
}

@media(min-width:1500px) {
  body {
    padding-top:64px;
  }
}

@media(max-width:1000px) {
  body {
    padding:24px 18px;
  }
  .masthead {
    padding:27px;
  }
  .masthead-note {
    font-size:13px;
  }
  h1 {
    font-size:31px;
  }
  .alias {
    font-size:21px;
  }
  .layout {
    grid-template-columns:210px minmax(0,1fr);
  }
  .sidebar {
    padding:28px 23px;
  }
  main {
    padding:28px;
  }
  .timeline-item {
    grid-template-columns:106px 1fr;
    gap:10px;
  }
  .result {
    gap:6px;
  }
  .result span {
    max-width:135px;
  }
}

@media(max-width:760px) {
  body {
    padding:0;
  }
  .sheet {
    border:0;
    border-radius:0;
    box-shadow:none;
  }
  .masthead {
    padding:27px 24px 22px;
    align-items:flex-start;
    flex-direction:column;
    gap:12px;
  }
  .masthead-note {
    text-align:left;
    font-size:14px;
  }
  h1 {
    font-size:34px;
  }
  .layout {
    grid-template-columns:1fr;
  }
  .sidebar {
    padding:24px;
    border-right:0;
    border-bottom:1px solid var(--line);
    display:block;
  }
  .profile {
    display:grid;
    grid-template-columns:76px 1fr;
    column-gap:20px;
  }
  .avatar {
    width:76px;
    height:76px;
    border-radius:14px;
    grid-row:1/3;
  }
  .status {
    margin:0;
    align-self:start;
  }
  .profile-details {
    margin-top:11px;
    display:flex;
    flex-wrap:wrap;
    gap:14px 26px;
    grid-column:2;
  }
  .profile-details>div+div {
    margin:0;
  }
  .profile-details>div:last-child {
    display:none;
  }
  dt {
    font-size:10px;
  }
  dd {
    font-size:13px;
  }
  .section-nav {
    display:flex;
    flex-wrap:wrap;
    gap:6px 19px;
    margin-top:21px;
    padding-top:15px;
  }
  .section-nav .eyebrow {
    display:none;
  }
  .section-nav a {
    gap:6px;
    padding:3px 0;
  }
  .section-nav a span {
    font-size:13px;
  }
  .contact {
    display:flex;
    align-items:center;
    gap:22px;
    margin-top:16px;
  }
  .contact h2 {
    display:none;
  }
  .contact a {
    border:0;
    gap:14px;
    font-size:13px;
    padding:0;
  }
  main {
    padding:28px 24px 32px;
  }
  .section-heading h2 {
    font-size:22px;
  }
  .intro .lede {
    font-size:20px;
  }
  .timeline-item {
    grid-template-columns:112px 1fr;
  }
  .bottom-grid h2 {
    font-size:19px;
  }
  footer {
    padding:17px 24px;
  }
}

@media(max-width:480px) {
  .projects-grid {
    grid-template-columns:1fr;
    gap:24px;
  }
  .project {
    padding-left:15px;
  }
  .project h3 {
    font-size:19px;
  }
  .project>p:not(.project-kind) {
    font-size:15px;
  }
  .project .project-detail {
    font-size:14px!important;
  }
  .result span {
    max-width:none;
    font-size:12px;
  }
  .project-wide {
    grid-column:auto;
    grid-template-columns:1fr;
    gap:13px;
    padding-left:0;
  }
  .transit-result {
    border-left:0;
    padding-left:0;
    display:flex;
    align-items:center;
    gap:14px;
  }
  .transit-result p br {
    display:none;
  }
  .timeline-item {
    grid-template-columns:1fr;
    gap:4px;
  }
  .timeline {
    gap:22px;
  }
  .bottom-grid {
    grid-template-columns:1fr;
    gap:25px;
  }
  .beyond {
    border-left:0;
    border-top:1px solid var(--line);
    padding:23px 0 0;
  }
  .interest-line {
    gap:7px;
    font-size:12px;
  }
  h1 {
    font-size:31px;
  }
  .alias {
    font-size:20px;
  }
  .profile-details {
    gap:12px;
  }
  .section-nav {
    gap:6px 13px;
  }
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto;
  }
}

@media print {
  body {
    padding:0;
    background:#fff;
  }
  .sheet {
    border:0;
    box-shadow:none;
    border-radius:0;
  }
  .section-nav,footer a,.skip-link {
    display:none;
  }
  .layout {
    grid-template-columns:190px 1fr;
  }
  .sidebar {
    padding:24px 18px;
  }
  main {
    padding:24px;
  }
  .masthead {
    padding:20px;
  }
  .project,.timeline-item {
    break-inside:avoid;
  }
  a {
    color:inherit;
  }
  .contact {
    margin-top:24px;
  }
}

/* A single language control; English content remains available without JS. */
.language-toggle {
  margin-top:8px;
  padding:2px 0;
  border:0;
  background:none;
  color:var(--blue);
  font:inherit;
  cursor:pointer;
}
.language-toggle:hover {
  text-decoration:underline;
  text-underline-offset:4px;
}
.language-toggle:focus-visible {
  outline:2px solid var(--blue);
  outline-offset:4px;
}
[data-zh] {
  white-space:pre-line;
}
html:lang(zh-CN) body {
  font-family:var(--sans);
}
html:lang(zh-CN) .eyebrow,
html:lang(zh-CN) .project-kind {
  letter-spacing:.5px;
}
@media print {
  .language-toggle {
    display:none;
  }
}

.research-link {
  display:inline-block;
  margin-top:8px;
  font-size:14px;
}