:root{color-scheme:dark;--ink:#f5efda;--jade:#b5d1b8;--muted:#bec9bd;--sand:#102620;--pearl:#19332b;--brown:#dfc3a1;--line:#4b6051}
body{background:radial-gradient(ellipse at 85% 8%,#26483a66,transparent 45%),#102620;color:var(--ink)}
body::before{content:"";position:fixed;inset:0;background:url('/contours.svg') repeat;background-size:520px 520px;opacity:.22;pointer-events:none;z-index:-1}body{isolation:isolate}
header{border-bottom-color:#afba9755}.brand{color:#f5efda}.brand small,.name-en{color:#b5c5b6}.brand .mini-logo{border-color:#a4b39488;box-shadow:0 0 0 3px #142b24}
.main-nav{color:#d2d8c7}.main-nav a:hover,.text-link,.back,.nav{color:#efc3c6}.resume-hero{position:relative;padding:65px 0}.resume-hero::after{content:"///";position:absolute;bottom:22px;right:0;color:#cfd6b2;font-size:24px;letter-spacing:3px;font-weight:800;transform:skew(-12deg)}
.resume-hero h1{color:#fff5db}.resume-hero h1 span,h1 em{color:#d3ddbe}.label{color:#d9c8a8}.hero-actions a:first-child{background:#eee8cf;color:#18362b;border:1px solid #eee8cf;border-radius:3px}.hero-actions a:first-child:hover{background:#fff8df}.hero-actions a:last-child{color:#d5ddcc}
.profile-note{background:linear-gradient(145deg,#1b352d,#10231e);border:1px solid #97a18188;border-radius:3px 22px 3px 3px;box-shadow:0 14px 35px #0002}.personal-logo{background-image:url('/brand-dark.png');background-size:100% auto;background-position:center 30%;aspect-ratio:1.72;border-radius:2px;border:1px solid #83917733}.stats{border-color:#89967955}.stats strong{color:#f5eac9;font-family:system-ui,"Microsoft YaHei",sans-serif;font-variant-numeric:lining-nums tabular-nums}.stats span,.profile-note p{color:#c3cebf}
.section-head{border-color:#97a18166}.section-head h2{color:#f3ecd6}.section-head::after{content:"";height:3px;width:50px;display:block;background:repeating-linear-gradient(125deg,#c5ccab 0 7px,transparent 7px 11px);margin-left:15px}.section-head>.label{margin-left:auto}.card,.project-grid>.card{background:#173028;border-color:#71826677;border-radius:3px 18px 3px 3px;box-shadow:none}.card:hover{border-color:#c6cba6;box-shadow:0 12px 28px #0003}.card-body h2{color:#f3edd9}.card-body p:not(.label){color:#bdcbbd}.card .arrow{background:#d7c9aa;color:#1c342a;border-color:#d7c9aa;border-radius:3px}.cover{background:linear-gradient(135deg,#e0e4d2,#bccbb9);border-bottom:1px solid #7c8e7466}.cover.wardrobe{background:linear-gradient(135deg,#ded9c7,#b9c5b5)}.cover span{color:#334b3c}.cover img{mix-blend-mode:multiply}
.filters button{background:#183129;border-color:#687b6388;color:#d0d8c8}.filters button[aria-pressed=true]{background:#e8e4ca;color:#1c362a;border-color:#e8e4ca}.pending-cover{background:linear-gradient(145deg,#1b362d,#10271f);border-bottom-color:#87937966;color:#c1c9b3}.pending-cover .pending-symbol{color:#dfc7ab}.status{background:#293b30;border-color:#788268;color:#e1d4b7}.pending:hover{border-color:#71826677}.role{color:#e4b8bd!important}
.info-grid article{background:#173028;border-color:#6b7e6477;border-radius:3px 15px 3px 3px}.experience-list article,.awards p{border-color:#6b7e6455}.awards b{color:#ded8b5}.contact{background:linear-gradient(110deg,#203c30,#142b25);border-color:#89957688;border-radius:3px 20px 3px 3px}.contact a{color:#e7d9b9}.contact h2{color:#f4ecd5}footer{color:#bac4b3;border-color:#73826766}
.toc a{background:#213b30;border-color:#7c8c6b77;color:#d7dfc8}.toc a:hover{background:#2d4b3b}.project-top .cover{border-radius:3px 22px 3px 3px;box-shadow:none}.step{border-color:#81917455}.step-copy p,figcaption{color:#c0cbbd}.zoom{background:#e9e7d8;border-color:#8b987b88;border-radius:3px}.zoom:hover{border-color:#e5dabb}.next{background:#d9dec2;color:#1e392c;border-radius:3px}.next:hover{background:#e7ead5}details{background:#193329;border-color:#6b7e64;border-radius:3px}summary{color:#ded8bd}summary span{color:#e7bac0}dialog{background:#182f26;border:1px solid #819174;color:#f3edd8}dialog button{background:#e7ddc2;color:#203c2e}dialog::backdrop{background:#06150ee8}
button:focus-visible,a:focus-visible,summary:focus-visible{outline-color:#efbac5}
@media(max-width:760px){.resume-hero{padding:35px 0 45px}.resume-hero::after{bottom:10px;font-size:19px}.personal-logo{width:175px}.section-head::after{width:30px}.profile-note .label{line-height:1.8}.main-nav{gap:15px}}

/* Mirror the brick system rendering wherever it is displayed. */
img[src$='/media/brick/image2.webp'] {
  transform: scaleX(-1);
}

/* Three projects per row, with a single column on phones. */
.project-grid > .card { grid-column: span 2; }
.cover.propeller { background: linear-gradient(135deg, #e2e7d6, #c6d5c4); }
@media (max-width: 760px) {
  .project-grid { grid-template-columns: minmax(0, 1fr); }
  .project-grid > .card { grid-column: 1; }
}

.pdf-preview .pdf-pages {
  display: grid;
  gap: 16px;
  margin-top: 14px;
}
.pdf-preview .pdf-pages img {
  display: block;
  width: 100%;
  height: auto;
}
.pdf-preview .pdf-pages figcaption {
  text-align: center;
}

.pdf-teaser {
  aspect-ratio: 100 / 46;
  overflow: hidden;
  margin-top: 14px;
}
.pdf-teaser img {
  display: block;
  width: 100%;
  height: auto;
}
.pdf-preview:has(.pdf-full[open]) .pdf-teaser,
.pdf-full[open] .pdf-expand,
.pdf-full:not([open]) .pdf-collapse {
  display: none;
}
.pdf-full > summary > span {
  float: none;
  color: inherit;
  font-size: inherit;
}

.pdf-close {
  display: block;
  margin: 16px auto 0;
  padding: 9px 15px;
  border: 1px solid currentColor;
  border-radius: 3px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  cursor: pointer;
}
.pdf-close:hover {
  background: var(--line);
}

/* Use the same matte and image area across the home project cards. */
.project-grid .cover {
  height: clamp(238px, 22vw, 300px);
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  padding: 38px 22px 21px;
  background: radial-gradient(ellipse at 50% 40%, #e4e8d9, #c9d3c0);
}
.project-grid .cover > span {
  top: 14px;
  left: 22px;
}
.project-grid .cover img {
  filter: saturate(.88);
}
.project-grid .cover:not(.brick) img {
  mix-blend-mode: normal;
}
.robot-crop {
  position: relative;
  height: 100%;
  max-width: 100%;
  aspect-ratio: var(--crop-ratio);
  overflow: hidden;
}
.cover.robot-photo img {
  position: absolute;
  top: var(--crop-top);
  left: var(--crop-left);
  width: var(--crop-width);
  height: auto;
  mix-blend-mode: normal;
}
.hero-photo {
  --crop-ratio: 880 / 920;
  --crop-top: -40.76%;
  --crop-left: -45.45%;
  --crop-width: 145.45%;
}
.infantry-photo {
  --crop-ratio: 1120 / 1130;
  --crop-top: -33.63%;
  --crop-left: -10.71%;
  --crop-width: 114.29%;
}

/* Round the visible image edges rather than the full cover area. */
.project-grid .cover > img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  border-radius: 8px;
}
.project-grid .robot-crop {
  border-radius: 8px;
}

.experience-list .resume-quote {
  grid-column: 2;
  max-width: 960px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.9;
}
.resume-quote p {
  margin: 0;
  text-wrap: pretty;
}
.resume-quote p + p {
  margin-top: 12px;
}
.resume-quote strong {
  color: var(--ink);
  font-weight: 750;
}

#competitions .experience-list {
  background: #102620e8;
  border: 1px solid #4b6051;
  border-radius: 10px;
  padding-inline: clamp(16px, 3vw, 32px);
}
#competitions .experience-list article {
  grid-template-columns: minmax(190px, 1fr) minmax(0, 3fr);
  grid-template-rows: auto auto;
  gap: 10px 30px;
}
#competitions .experience-list article:last-child {
  border-bottom: 0;
}
#competitions .experience-title {
  grid-row: 1 / 3;
}
.experience-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  font-size: 12px;
  color: var(--muted);
}
.experience-role {
  color: #efc3c6;
}
#competitions .experience-list .text-link {
  margin-top: 0;
}
@media (max-width: 760px) {
  #competitions .resume-quote {
    margin-top: 12px;
  }
}

.resume-entry {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 136px;
  min-height: 44px;
  margin-top: 12px;
  padding: 10px 20px;
  border: 1px solid #eee8cf;
  border-radius: 3px;
  background: #eee8cf;
  color: #18362b;
  font-size: 13px;
}
.resume-entry:hover {
  background: #fff8df;
}
.resume-dialog {
  width: min(850px, 94vw);
  max-height: 90dvh;
  padding: 0;
  overflow: hidden;
}
.resume-dialog[open] {
  display: flex;
  flex-direction: column;
}
.resume-dialog-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
}
.resume-dialog-bar h2 {
  margin: 0 auto 0 0;
  font-size: 17px;
}
.resume-dialog-bar a {
  font-size: 12px;
  text-decoration: underline;
}
.resume-dialog-bar form {
  margin: 0;
}
.resume-dialog-pages {
  overflow: auto;
  min-height: 0;
  overscroll-behavior: contain;
  display: grid;
  gap: 12px;
  padding: 12px;
}
.resume-dialog-pages img {
  width: 100%;
  max-width: none;
  max-height: none;
  height: auto;
}

.contact-links {
  display: grid;
  gap: 8px;
  text-align: end;
}
.contact-links a {
  margin: 0;
}
@media (max-width: 760px) {
  .contact-links {
    margin-top: 16px;
    text-align: start;
  }
}

.step-copy p,
.project-top .lede {
  text-wrap: pretty;
}
.step-ending {
  display: inline-block;
  white-space: nowrap;
}