/* A personal research page, with the original document structure and quieter spacing. */
:root { color-scheme: light; --text: #424242; --link: #584d4d; --muted: #686868; --red: #b92c24; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-padding-top: 20px; -webkit-text-size-adjust: 100%; }
body { margin: 0; color: var(--text); background: var(--surface); font: 15px/1.55 Arial, Helvetica, sans-serif; }
img { display: block; max-width: 100%; height: auto; }
p, figure, h1, h2, h3 { margin: 0; }
p + p { margin-top: 15px; }
a { color: var(--link); text-decoration: underline; }
a:hover { color: var(--hover-text); }
button { font: inherit; cursor: pointer; }
a:focus-visible, button:focus-visible, video:focus-visible, .memory-strip:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
.page { width: min(680px, calc(100% - 40px)); margin: 0 auto; }
.skip-link { position: absolute; top: -80px; left: 16px; padding: 8px 12px; background: var(--surface); z-index: 20; }
.skip-link:focus { top: 8px; }
.profile { display: grid; grid-template-columns: minmax(0, 1fr) 280px; grid-template-rows: auto 1fr; column-gap: 48px; align-items: start; padding-top: 32px; }
.profile-name { grid-column: 1; grid-row: 1; }
h1 { font-size: 36px; line-height: 1.15; font-weight: 700; letter-spacing: -.45px; }
.university { font-size: 15px; margin-top: 7px; }
.location { margin-top: 0; font-size: 15px; }
.profile-photo { grid-column: 2; grid-row: 1 / 3; }
.profile-photo img { width: 280px; aspect-ratio: 1; object-fit: cover; }
.contact { grid-column: 1; grid-row: 2; padding-top: 21px; font-size: 14px; line-height: 1.45; }
.contact-label { display: block; font-weight: 700; margin-bottom: 2px; }
.contact p + p { margin-top: 18px; }
.email { overflow-wrap: anywhere; }
.email-hint { color: var(--red); }
.site-nav { position: relative; display: flex; justify-content: center; align-items: center; gap: 25px; width: min(530px, 100%); margin: 26px auto 31px; padding: 7px 0; border-bottom: 1px solid #333; }
.site-nav::before { content: ''; position: absolute; top: 0; width: 78%; border-top: 1px solid #333; }
.site-nav a { font-size: 17px; line-height: 1.4; }
h2 { font-size: 21px; line-height: 1.3; font-weight: 700; }
.biography h2 { margin-bottom: 10px; }
.cv-link { display: flex; flex-direction: column; align-items: center; gap: 6px; width: max-content; max-width: 100%; margin: 20px auto 0; font-size: 14px; }
.cv-link img { width: 42px; height: auto; }
.cv-link small { display: none; }
.section { position: relative; margin-top: 37px; padding-top: 26px; }
.section::before { content: ''; position: absolute; top: 0; left: 4%; width: 92%; height: 3px; background: #242424; }
.section-heading { margin-bottom: 22px; }
h3 { font-size: 19px; line-height: 1.4; font-weight: 400; }
.publication-list { list-style: none; padding: 0; margin: 0; }
.publication { margin-bottom: 20px; }
.publication h3 { font-size: 15px; font-weight: 700; }
.publication h3 a { color: var(--text); text-decoration: none; }
.publication h3 a:hover, .publication h3 a:focus-visible { text-decoration: underline; }
.publication p { margin-top: 3px; font-size: 14px; line-height: 1.5; }
.resource-links { display: flex; align-items: baseline; flex-wrap: wrap; gap: 9px; font-size: 12.5px !important; margin-top: 4px !important; }
.citation-toggle { border: 0; background: none; padding: 2px 0; color: var(--link); font-size: inherit; text-decoration: underline; }
.citation { margin-top: 10px; padding: 12px; background: var(--citation-bg); border-left: 2px solid var(--citation-rule); }
.citation pre { white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; font: 12px/1.5 Consolas, Monaco, monospace; }
.other-item { margin-top: 20px; font-size: 14px; }
.work-label { display: block; font-weight: 700; }
.other-item h3 { font-size: 15px; font-weight: 700; }
.other-item p { margin-top: 3px; }
.project-heading { margin-bottom: 16px; }
.project + .project { position: relative; margin-top: 25px; padding-top: 29px; }
.project + .project::before { content: ''; position: absolute; top: 0; left: 23%; width: 54%; height: 1px; background: #333; }
.research-figure { margin: 16px auto 20px; }
.research-figure a { display: block; }
.research-figure img { width: 100%; margin: auto; }
.small-figure { max-width: 615px; }
figcaption { font-size: 13px; margin-top: 9px; }
.video-figure { width: min(620px, 100%); margin: 23px auto; }
.player { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border: 2px solid #222; background: black; }
.project-status, .pride { color: var(--red); }
.external-video { display: block; margin: 23px auto; }
.external-video iframe { display: block; width: 100%; height: auto; aspect-ratio: 621 / 360; border: 0; background: #111; }
.back { text-align: center; font-size: 11px; margin-top: 24px; }
.robotics-carousel { max-width: 600px; margin: 0 auto; }
.carousel-slide { margin-bottom: 10px; }
.carousel-slide a { display: block; }
.carousel-slide img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; }
.carousel-controls { display: flex; justify-content: center; align-items: center; gap: 17px; }
.carousel-controls button { border: 0; background: none; padding: 10px 6px; color: var(--link); text-decoration: underline; font-size: 12px; }
.carousel-count { font-size: 12px; font-variant-numeric: tabular-nums; color: var(--muted); min-width: 38px; text-align: center; }
.personal-columns h3 { margin-bottom: 11px; }
.personal-columns > div + div { margin-top: 27px; }
.memories { width: min(1100px, calc(100% - 40px)); margin: 37px auto 0; }
.memories-intro { font: 16px/1.5 Georgia, 'Times New Roman', serif; text-align: center; margin-bottom: 17px; }
.memory-strip { display: flex; align-items: center; justify-content: flex-start; gap: 10px; width: max-content; max-width: 100%; margin: auto; overflow-x: auto; padding: 4px 0 12px; }
.memory-strip a { flex: 0 0 auto; }
.memory-strip img { height: 100px; width: auto; max-width: none; }
.footer { width: min(680px, calc(100% - 40px)); margin: 24px auto 0; padding-bottom: 25px; text-align: center; font-size: 11px; }
.photo-viewer { padding: 50px 50px 24px; width: min(1000px, calc(100% - 40px)); max-height: calc(100dvh - 40px); border: 0; background: var(--surface); color: var(--text); overflow: auto; }
.photo-viewer::backdrop { background: rgb(0 0 0 / 80%); }
.photo-viewer figure img { width: auto; max-height: calc(100dvh - 160px); margin: auto; object-fit: contain; }
.photo-viewer figcaption { text-align: center; font-size: 13px; }
.photo-viewer button { position: absolute; width: 36px; height: 36px; border: 0; background: var(--surface); color: var(--text); }
.viewer-close { top: 7px; right: 7px; font-size: 30px; }
.viewer-prev, .viewer-next { top: calc(50% - 18px); font-size: 36px; }
.viewer-prev { left: 7px; }
.viewer-next { right: 7px; }
@media (max-width: 680px) {
  .profile { grid-template-columns: minmax(0, 1fr) 240px; column-gap: 30px; }
  .profile-photo img { width: 240px; }
  h1 { font-size: 32px; }
  .contact { padding-top: 18px; font-size: 13px; }
  .site-nav { gap: 21px; }
  .site-nav a { font-size: 16px; }
}
@media (max-width: 540px) {
  .profile { grid-template-columns: minmax(0, 1fr) 132px; gap: 0 18px; padding-top: 24px; }
  .profile-photo { grid-row: 1; }
  .profile-photo img { width: 132px; }
  h1 { font-size: 30px; }
  .university, .location { font-size: 13px; }
  .contact { grid-column: 1 / -1; grid-row: 2; display: flex; flex-wrap: wrap; gap: 15px 25px; padding-top: 18px; font-size: 13px; }
  .contact p + p { margin: 0; }
  .site-nav { gap: 16px; margin: 24px auto 26px; }
  .site-nav a { font-size: 14px; text-align: center; }
  .section { margin-top: 31px; padding-top: 24px; }
  .section-heading { margin-bottom: 19px; }
  .memories { margin-top: 31px; }
  .memory-strip img { height: 95px; }
  .photo-viewer { width: calc(100% - 20px); padding: 48px 34px 20px; }
  .photo-viewer button { width: 28px; }
  .viewer-prev { left: 1px; }
  .viewer-next { right: 1px; }
}
@media (max-width: 360px) {
  .profile { grid-template-columns: minmax(0, 1fr) 105px; gap: 0 12px; }
  .profile-photo img { width: 105px; }
  h1 { font-size: 27px; }
  .site-nav { gap: 11px; }
  .site-nav a { font-size: 12px; }
}
@media print {
  .page { width: 100%; }
  .site-nav, .back, .footer, .resource-links, .video-figure, .external-video, .skip-link, .photo-viewer, .carousel-controls { display: none; }
  .publication, .other-item, .carousel-slide { break-inside: avoid; }
  a { color: inherit; }
  .memory-strip { flex-wrap: wrap; overflow: visible; width: 100%; justify-content: center; }
}

/* Shared choices: a plain research document with all original project content. */
body { color: var(--text); font-size: 15.5px; line-height: 1.62; }
a { text-underline-offset: 2px; }
.section { position: static; border-top: 1px solid var(--rule); margin-top: 34px; padding-top: 23px; }
.section::before { content: none; }
.section-heading { margin-bottom: 22px; }
.project + .project { margin-top: 34px; padding-top: 27px; border-top: 1px solid var(--soft-rule); }
.project + .project::before { content: none; }
.publication { margin-bottom: 24px; }
.publication h3 { font-size: 15.5px; line-height: 1.5; }
.publication p { font-size: 14px; line-height: 1.55; }
.other-work { margin-top: 26px; }
.other-work .other-item { min-width: 0; margin-top: 0; }
.other-work .other-item + .other-item { margin-top: 24px; }
.other-work .work-label { margin-bottom: 5px; color: var(--text); font: 400 17px/1.4 Georgia, 'Times New Roman', serif; }
.other-work h3 { font-size: 15.5px; font-weight: 600; line-height: 1.5; }
.other-work p { margin-top: 3px; color: var(--secondary); font-size: 14px; line-height: 1.55; }
.other-work .detail { color: var(--muted); }
.project-heading h3 { font-size: 18px; line-height: 1.5; font-weight: 600; }
.research-figure { max-width: 680px; margin-top: 19px; }
.small-figure { max-width: 615px; }
.video-figure { max-width: 620px; }
.player { border: 0; }
.back { margin-top: 21px; font-size: 11px; }
.personal-columns > div + div { margin-top: 25px; }
.memories { max-width: 1080px; margin-top: 33px; }
.memories-intro { font-size: 15px; }
.memory-strip img { height: 95px; }
@media (max-width: 540px) {
  body { font-size: 15px; }
  .section { margin-top: 28px; padding-top: 21px; }
  .section-heading { margin-bottom: 19px; }
  .project + .project { margin-top: 28px; padding-top: 24px; }
  .project-heading h3 { font-size: 17px; }
  .publication h3 { font-size: 15px; }
  .publication p { font-size: 13.5px; }
}

/* Variant one: the integrated introduction of 8768, with a smaller reading width. */
:root { --text: #343434; --link: #2c5876; --muted: #686868; }
.page { width: min(780px, calc(100% - 48px)); }
.site-nav { justify-content: flex-start; width: 100%; margin: 27px 0 0; padding: 0 0 13px; gap: 26px; border-bottom: 1px solid var(--soft-rule); }
.site-nav::before { content: none; }
.site-nav a { font-size: 13.5px; line-height: 1.5; text-decoration: none; text-underline-offset: 3px; }
.site-nav a:hover, .site-nav a:focus-visible { text-decoration: underline; }
.profile { display: grid; grid-template-columns: minmax(0, 1fr) 280px; grid-template-rows: auto; gap: 42px; padding: 29px 0 0; }
.profile-intro, .profile-side { min-width: 0; }
.profile-name, .profile-photo, .contact { grid-column: auto; grid-row: auto; }
h1 { font: 400 36px/1.2 Georgia, 'Times New Roman', serif; letter-spacing: -.55px; }
.university, .location { font-size: 14px; }
.university { margin-top: 10px; }
.profile-photo img { width: 280px; }
.contact { padding: 18px 0 0; font-size: 13.5px; line-height: 1.55; }
.contact .email { font-size: 13px; }
.contact-label { display: inline; font-size: 13px; margin-right: 3px; margin-bottom: 0; }
.contact p + p { margin-top: 15px; }
.email-hint { color: var(--red); font-size: 11.5px; }
.biography { margin-top: 22px; }
.biography h2 { font: 400 20px/1.4 Georgia, 'Times New Roman', serif; margin-bottom: 10px; }
.bio p + p { margin-top: 14px; }
.cv-inline { color: var(--red); display: inline-flex; align-items: center; gap: 5px; font-weight: 600; white-space: nowrap; text-underline-offset: 2px; }
.cv-inline svg { display: block; width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
h2 { font: 400 25px/1.3 Georgia, 'Times New Roman', serif; }
.personal h3 { font-size: 17px; font-weight: 600; }
.work-experience { margin-top: 29px; }
.work-experience .section-heading { margin-bottom: 16px; }
.experience-list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 15px; padding: 0; margin: 0; list-style: none; }
.experience-list li { min-width: 0; text-align: center; }
.company-logo { display: flex; align-items: center; justify-content: center; height: 52px; }
.company-logo img { display: block; width: auto; height: auto; max-width: 100%; max-height: 40px; }
.company-logo .logo-apple { height: 40px; }
.company-logo .logo-oppo { width: 96px; }
.company-logo .logo-lg { width: 70px; }
.company-logo .logo-marquistech { width: 112px; }
.company-logo .logo-ai-retailer { width: 124px; }
.company-role { display: block; min-height: 2.8em; margin-top: 8px; color: var(--role-text); font-size: 12px; font-weight: 600; line-height: 1.4; }
.company-meta { display: block; margin-top: 4px; color: var(--fine-text); font-size: 12px; line-height: 1.5; }
.experience-note { margin-top: 18px; color: var(--fine-text); font-size: 12px; line-height: 1.5; }
.publications { margin-top: 29px; }
.footer { max-width: 780px; }
.copyright { margin-top: 12px; color: var(--fine-text); font-size: 12px; }
@media (max-width: 760px) {
  .profile { grid-template-columns: minmax(0, 1fr) 280px; gap: 30px; }
  .profile-photo img { width: 280px; }
  h1 { font-size: 33px; }
}
@media (max-width: 700px) {
  .experience-list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px 15px; }
  .experience-list li { grid-column: span 2; }
  .experience-list li:last-child { grid-column: 2 / span 2; }
}
@media (max-width: 620px) {
  .page { width: calc(100% - 40px); }
  .site-nav { gap: 14px; margin-top: 24px; }
  .site-nav a { font-size: 12px; }
  .profile { grid-template-columns: minmax(0, 1fr) 150px; gap: 0 19px; padding-top: 23px; }
  .profile-intro, .profile-side { display: contents; }
  .profile-name { grid-column: 1; grid-row: 1; }
  .profile-photo { grid-column: 2; grid-row: 1; margin: 0; }
  .profile-photo img { width: 150px; }
  .biography { grid-column: 1 / -1; grid-row: 2; margin-top: 24px; }
  .contact { grid-column: 1 / -1; grid-row: 3; display: flex; flex-wrap: wrap; gap: 13px 26px; padding-top: 19px; }
  .contact p + p { margin: 0; }
  h1 { font-size: 30px; }
  .university, .location { font-size: 12.5px; }
  h2 { font-size: 23px; }
}
@media (max-width: 360px) {
  .profile { grid-template-columns: minmax(0, 1fr) 125px; column-gap: 13px; }
  .profile-photo img { width: 125px; }
  h1 { font-size: 27px; }
  .site-nav { gap: 7px; }
  .site-nav a { font-size: 11.5px; }
}

@media print {
  .profile { padding-top: 0; }
  .site-nav { display: none; }
}

/* Independent projects retain the typography of the academic page. */
.project-role { margin-top: 3px; color: var(--muted); font-size: 13.5px; line-height: 1.5; }
.trace5g-figure { max-width: 600px; }
.trace5g-links { display: flex; flex-wrap: wrap; gap: 18px; width: min(600px, 100%); margin: 0 auto; font-size: 13px; line-height: 1.5; }

/* Give publication metadata a quieter hierarchy without changing its content. */
.publication-list .publication { margin-bottom: 30px; }
.publication-list .publication:last-child { margin-bottom: 0; }
.publication-list .authors { margin-top: 6px; color: var(--secondary); font-size: 13.5px; line-height: 1.55; }
.publication-list .venue { margin-top: 2px; color: var(--muted); font-size: 13.5px; line-height: 1.55; }
.publication-list .resource-links { margin-top: 6px !important; gap: 10px; }
.publication-list .resource-links a, .publication-list .citation-toggle { text-decoration: none; }
.publication-list .citation-toggle { padding: 0; }
.publication-list .resource-links a:hover, .publication-list .resource-links a:focus-visible,
.publication-list .citation-toggle:hover, .publication-list .citation-toggle:focus-visible { text-decoration: underline; }

/* Small theme control; the page retains the same typography and structure. */
:root { --surface: #fff; --secondary: #555; --role-text: #444; --fine-text: #707070; --rule: #c9ced1; --soft-rule: #d5d8da; --citation-bg: #f6f6f6; --citation-rule: #888; --hover-text: #111; --focus: #424242; --toggle-hover: #f1f3f4; }
:root[data-theme="dark"] { color-scheme: dark; --surface: #000000; --text: #f5f5f7; --link: #a9cce6; --muted: #a1a8b0; --red: #ff9287; --secondary: #bcc2c9; --role-text: #d5d9df; --fine-text: #a1a8b0; --rule: #41474d; --soft-rule: #343b42; --citation-bg: #23282e; --citation-rule: #68727d; --hover-text: #fff; --focus: #a9cce6; --toggle-hover: #2b3138; }
.site-nav { padding-right: 32px; }
.theme-toggle { position: absolute; top: -3px; right: 0; display: grid; place-items: center; width: 24px; height: 24px; padding: 3px; border: 0; border-radius: 3px; background: none; color: var(--muted); }
.theme-toggle:hover { color: var(--text); background: var(--toggle-hover); }
.theme-icon { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.theme-icon-sun { display: none; }
:root[data-theme="dark"] .theme-icon-moon { display: none; }
:root[data-theme="dark"] .theme-icon-sun { display: block; }
:root[data-theme="dark"] .logo-apple, :root[data-theme="dark"] .logo-oppo { filter: invert(1); }
@media (max-width: 360px) {
  .site-nav { margin-top: 52px; padding-right: 0; }
  .theme-toggle { top: -38px; }
}
@media print {
  :root[data-theme] { color-scheme: light; --surface: #fff; --text: #343434; --link: #2c5876; --muted: #686868; --red: #b92c24; --secondary: #555; --role-text: #444; --fine-text: #707070; --rule: #c9ced1; --soft-rule: #d5d8da; --citation-bg: #f6f6f6; --citation-rule: #888; }
  .theme-toggle { display: none; }
  :root[data-theme="dark"] .company-logo img { filter: none; mix-blend-mode: normal; }
  .logo-ai-retailer { content: url('../img/experience/ai-retailer.svg'); }
  .logo-lg { content: url('../img/experience/lg.jpg'); }
}