:root{
  --navy:#103c57;
  --navy2:#17667c;
  --blue:#176c86;
  --cyan:#60eddb;
  --ink:#172a36;
  --muted:#607580;
  --line:#dce6e9;
  --alt:#f0f5f6;
  --radius:18px;
  --container:1160px;
}


::selection{
  background:#99efdf;
  color:#081321;
}


a:focus-visible,
button:focus-visible{
  outline:3px solid #12a795;
  outline-offset:5px;
}


body{
  background:#fbfcfc;
}


button{
  font-family:inherit;
}


h1,
h2,
h3,
h4{
  overflow-wrap:anywhere;
}



/* ============================================================
   Reading progress
   ============================================================ */

.reading-progress{
  position:fixed;
  top:0;
  left:0;

  width:100%;
  height:3px;

  background:
    linear-gradient(
      90deg,
      #26cab8,
      #76b7ff
    );

  transform:scaleX(0);
  transform-origin:left;

  z-index:90;

  pointer-events:none;
}



/* ============================================================
   HERO
   ============================================================ */

.hero{
  background:
    radial-gradient(
      ellipse at 90% 50%,
      #123e50 0,
      transparent 52%
    ),
    linear-gradient(
      115deg,
      #070f1b,
      #0b2130
    );

  isolation:isolate;
}


.hero::before{
  width:700px;
  height:700px;

  top:-450px;
  right:5%;

  background:
    radial-gradient(
      circle,
      #71f3d5,
      transparent 65%
    );

  opacity:.16;

  pointer-events:none;
}


.hero::after{
  content:"";

  position:absolute;

  inset:auto 0 0;

  height:1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      #73e6d880,
      transparent
    );
}


.hero__pattern{
  opacity:.25;

  background-size:64px 64px;

  mask-image:
    linear-gradient(
      100deg,
      transparent,
      #000
    );

  pointer-events:none;
}



/* ============================================================
   Masthead
   ============================================================ */

.masthead{
  position:relative;
  z-index:3;

  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:16px;

  padding:25px 0;

  border-bottom:
    1px solid #ffffff18;
}


.wordmark{
  display:flex;
  align-items:center;

  gap:5px;

  font-size:19px;
  font-weight:850;
  letter-spacing:.04em;
}


.wordmark span{
  color:#60eddb;
  font-weight:400;
}


.wordmark b{
  margin-left:18px;
  padding-left:18px;

  border-left:
    1px solid #ffffff30;

  color:#a9becb;

  font-size:12px;
  font-weight:500;
  letter-spacing:.08em;
}


.masthead__link{
  color:#c5d9e3;

  font-size:12px;

  white-space:nowrap;
}


.masthead__link span{
  margin-left:12px;

  color:#6de3cf;

  font-size:19px;
}



/* ============================================================
   Hero layout
   ============================================================ */

.hero__layout{
  grid-template-columns:
    minmax(0,1fr)
    280px;

  grid-template-areas:
    "headline portrait"
    "details portrait";

  min-height:600px;

  column-gap:100px;
  row-gap:22px;

  padding:68px 0 62px;

  align-items:start;
}


.hero__headline{
  grid-area:headline;

  align-self:end;
}


.hero__details{
  grid-area:details;

  min-width:0;
}


.portrait-wrap{
  grid-area:portrait;

  align-self:center;

  position:relative;
}



/* ============================================================
   Hero text
   ============================================================ */

.eyebrow{
  display:flex;
  align-items:center;

  gap:9px;

  margin-bottom:27px;

  color:#98b9c7;

  font-size:10px;
  letter-spacing:.17em;

  opacity:1;
}


.status-dot{
  width:6px;
  height:6px;

  flex:0 0 6px;

  border-radius:50%;

  background:#65edcc;

  box-shadow:
    0 0 14px #65edcc80;
}


.hero h1{
  margin-bottom:22px;

  font-size:
    clamp(
      58px,
      6.5vw,
      82px
    );

  font-weight:800;

  letter-spacing:.1em;

  line-height:1.15;
}


.hero__role{
  max-width:650px;

  margin-bottom:0;

  color:#bce0e6;

  font-size:17px;
  font-weight:500;

  line-height:1.8;
}


.hero__summary{
  max-width:620px;

  margin-bottom:20px;

  color:#a7bdca;

  font-size:14px;

  line-height:1.95;
}


.project-tag{
  margin-bottom:26px;

  padding:7px 12px;

  border:
    1px solid #5aafa644;

  border-radius:6px;

  background:#123b3f66;

  color:#b0e5de;

  font-size:12px;
}



/* ============================================================
   Buttons
   ============================================================ */

.button{
  min-height:48px;

  gap:24px;

  border-radius:8px;

  font-size:13px;
}


.button--primary{
  background:#94f1df;

  color:#10252e;

  box-shadow:
    0 6px 30px #38e5c015;
}


.button--primary:hover{
  background:#b3ffed;

  box-shadow:
    0 8px 32px #38e5c02a;
}


.button--ghost{
  border-color:#ffffff30;

  background:#ffffff05;

  color:#d6e3e9;
}


.button--ghost:hover{
  background:#ffffff12;
}



/* ============================================================
   Stats
   ============================================================ */

.stats{
  margin:32px 0 0;

  gap:24px;

  padding-top:25px;

  border-top:
    1px solid #ffffff16;

  grid-template-columns:
    repeat(
      3,
      minmax(0,1fr)
    );
}


.stats div{
  padding-left:0;

  border-left:0;
}


.stats dt{
  color:#f0f8fa;

  font-size:28px;
  font-weight:650;

  letter-spacing:-.04em;
}


.stats dd{
  margin-top:8px;

  color:#8da8b9;

  font-size:11px;
}



/* ============================================================
   Portrait
   ============================================================ */

.portrait-card{
  position:relative;

  width:280px;

  padding:10px;

  border:
    1px solid #8ce5dc40;

  border-radius:14px;

  background:
    linear-gradient(
      135deg,
      #ffffff14,
      #ffffff04
    );

  box-shadow:
    0 25px 80px #0004;

  backdrop-filter:none;
}


.portrait-card img{
  height:auto;

  aspect-ratio:3/4;

  border-radius:7px;

  object-fit:cover;
}


.portrait-card__caption{
  padding:16px 5px 8px;
}


.portrait-card__caption strong:empty{
  display:none;
}


.portrait-card__caption span{
  color:#99bac6;

  font-size:9px;
}


.portrait-label{
  position:absolute;

  top:-27px;
  left:1px;

  color:#7da8b9;

  font:
    10px
    ui-monospace,
    monospace;

  letter-spacing:.14em;
}



/* ============================================================
   Hero orbit
   ============================================================ */

.hero-orbit{
  position:absolute;

  right:-30px;
  top:100px;

  width:600px;
  height:600px;

  pointer-events:none;

  opacity:.55;

  animation:
    orbit
    70s
    linear
    infinite;
}


.hero-orbit i{
  position:absolute;

  inset:0;

  border:
    1px solid #85cfcb24;

  border-radius:50%;
}


.hero-orbit i:nth-child(2){
  inset:55px;

  border-style:dashed;
}


.hero-orbit i:nth-child(3){
  inset:115px;
}


.hero-orbit::after{
  content:"";

  position:absolute;

  left:82px;
  top:80px;

  width:7px;
  height:7px;

  border-radius:50%;

  background:#7cf0d3;

  box-shadow:
    0 0 18px #7cf0d3;
}


@keyframes orbit{
  to{
    transform:rotate(360deg);
  }
}



/* ============================================================
   Navigation
   ============================================================ */

.section-nav{
  background:#fbfcfcf0;

  border-bottom-color:#dde7e9;
}


.section-nav__inner{
  justify-content:space-between;

  gap:16px;
}


.section-nav a{
  position:relative;

  padding:20px 12px;

  color:#637780;

  font-size:13px;

  letter-spacing:.04em;
}


.section-nav a::after{
  content:"";

  position:absolute;

  left:12px;
  right:12px;
  bottom:0;

  height:2px;

  background:#218c87;

  transform:scaleX(0);

  transition:
    transform .2s;
}


.section-nav a.is-active{
  color:#145968;
}


.section-nav a.is-active::after,
.section-nav a:hover::after{
  transform:scaleX(1);
}



/* ============================================================
   Sections
   ============================================================ */

.section{
  padding:78px 0;

  scroll-margin-top:76px;
}


.section-heading{
  margin-bottom:32px;

  gap:24px;
}


.section-heading h2{
  font-size:30px;

  letter-spacing:-.025em;
}


.section-heading > div{
  gap:15px;
}


.section-index{
  display:inline-grid;
  place-items:center;

  min-width:36px;
  height:36px;

  border:
    1px solid #176c86;

  border-radius:8px;

  background:#176c86;

  color:#fff;

  font:
    700
    12px
    ui-monospace,
    monospace;

  letter-spacing:.04em;

  box-shadow:
    0 7px 18px #176c8626;
}


.section-heading p{
  color:#75878e;

  font-size:10px;

  letter-spacing:.08em;

  text-align:right;
}



/* ============================================================
   Certificate filters
   ============================================================ */

.filter{
  padding:8px 18px;

  border-radius:6px;

  font-size:12px;
}


.filter.is-active{
  border-color:#133e4b;

  background:#133e4b;
}


.filter:hover{
  border-color:#207e81;
}



/* ============================================================
   Cards
   ============================================================ */

.certificate-card,
.media-card,
.paper-card,
.patent-card{
  border-color:#dae5e7;

  box-shadow:
    0 4px 18px #18364406;
}


.certificate-card:hover,
.media-card:hover,
.patent-card:hover{
  border-color:#99c3c6;

  box-shadow:
    0 16px 35px #18364412;
}



/* ============================================================
   Certificate cards
   ============================================================ */

.certificate-card .image-button{
  padding:16px;

  background:#eef2f3;
}


.certificate-card .image-button img{
  object-fit:contain;
}


.badge{
  left:12px;
  top:12px;

  border-radius:4px;

  background:#123e4bef;

  font-size:10px;

  box-shadow:
    0 3px 12px #0001;
}


.certificate-card__body{
  padding:20px;
}


.certificate-card h3,
.media-card h3{
  font-size:16px;

  line-height:1.65;
}


.certificate-card__meta{
  font-size:11px;
}


.certificate-card p{
  font-size:13px;
}



/* ============================================================
   Media cards
   ============================================================ */

.media-card__body{
  padding:20px;
}


.media-card__source{
  font-size:11px;
}


.media-card p{
  line-height:1.9;
}


.media-card .image-button{
  padding:12px;

  background:#eef2f3;
}


.media-card .image-button img{
  background:transparent;
}



/* ============================================================
   Research
   ============================================================ */

.research-stack{
  display:grid;

  gap:38px;
}


.research-panel{
  min-width:0;
}


.research-panel__header{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:16px;

  margin-bottom:20px;
}


.research-panel__eyebrow{
  color:#6c888d;

  font-size:10px;

  letter-spacing:.18em;
}


.research-panel__header h3{
  margin:4px 0 0;

  font-size:19px;
}


.research-count{
  padding:4px 10px;

  border:
    1px solid #cddfe1;

  border-radius:6px;

  color:#397078;

  font-size:11px;

  white-space:nowrap;
}


.paper-list{
  display:grid;

  gap:22px;
}



/* ============================================================
   Paper cards
   ============================================================ */

.paper-card{
  grid-template-columns:
    minmax(230px,.7fr)
    minmax(0,1.3fr);
}


.paper-card__media{
  display:flex;
  align-items:center;

  padding:20px;

  background:#e7eef0;
}


.paper-card .image-button{
  min-height:0;
  height:320px;
}


.paper-card .image-button img{
  background:#e7eef0;

  object-fit:contain;
}


.paper-card__body{
  min-width:0;

  padding:30px;
}


.paper-card__topline{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:12px;

  margin-bottom:16px;
}


.paper-card__number{
  color:#7a9199;

  font:
    12px
    ui-monospace,
    monospace;
}


.paper-card__label{
  margin:0;

  border-radius:4px;

  background:#e6f3ef;

  color:#236d60;

  font-size:10px;
}


.paper-card h3{
  font-size:20px;

  line-height:1.55;
}


.paper-card__citation{
  font-size:13px;

  overflow-wrap:anywhere;
}


.paper-card__meta span{
  border-radius:4px;

  background:#f0f5f6;

  font-size:11px;
}


.paper-card p{
  font-size:13px;

  line-height:1.9;
}



/* ============================================================
   Text actions
   ============================================================ */

.text-action{
  display:inline-flex;
  align-items:center;

  gap:25px;

  min-height:38px;

  margin-top:20px;

  padding:7px 0;

  border:0;
  border-bottom:
    1px solid #94bdbb;

  background:transparent;

  color:#176777;

  font-size:12px;

  cursor:pointer;
}


.text-action:disabled{
  opacity:.5;

  cursor:default;
}


.text-action span{
  font-size:16px;
}



/* ============================================================
   Patent cards
   ============================================================ */

.patent-grid{
  display:grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0,1fr)
    );

  gap:22px;
}


.patent-card__image{
  padding:16px;

  background:#e7eef0;
}


.patent-card__image img{
  background:transparent;
}


.patent-card__body{
  padding:22px;
}


.patent-card__topline{
  display:flex;
  justify-content:space-between;

  gap:12px;

  margin-bottom:12px;

  color:#277480;

  font-size:11px;
}


.patent-card__index{
  color:#7a9199;

  font-family:
    ui-monospace,
    monospace;
}


.patent-card__meta{
  display:flex;
  flex-wrap:wrap;

  gap:7px 14px;

  margin-bottom:18px;

  color:#6c7f88;

  font-size:12px;
}


.patent-card__number{
  padding:12px;

  border-radius:6px;

  background:#f1f6f6;

  overflow-wrap:anywhere;
}


.patent-card__number small{
  display:block;

  margin-bottom:4px;

  color:#768b91;

  font-size:10px;
}


.patent-card__number strong{
  font-size:12px;

  font-weight:550;
}



/* ============================================================
   Resume
   ============================================================ */

.section--dark{
  position:relative;

  background:
    radial-gradient(
      ellipse at 80% 120%,
      #18535e,
      transparent 65%
    ),
    #0a1d2b;
}


.resume-panel h2{
  font-size:38px;
}


.resume-panel p{
  font-size:14px;
}


.section-index--light{
  border-color:#a0efdf;

  background:#a0efdf;

  color:#10252e;

  box-shadow:
    0 7px 18px #0003;
}


.contact-line{
  font-size:13px;

  overflow-wrap:anywhere;
}


.contact-line span{
  min-width:0;
}


.button--light{
  background:#a0efdf;

  color:#15313a;
}



/* ============================================================
   Footer
   ============================================================ */

.footer{
  padding:25px 0;

  background:#081722;
}


.footer__inner{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;

  gap:12px 24px;

  font-size:12px;
}


.footer .icp-link{
  color:#c3d2d8;

  text-decoration:underline;

  text-underline-offset:4px;

  overflow-wrap:anywhere;
}


.footer a:hover{
  color:#a0efdf;
}



/* ============================================================
   Lightbox
   ============================================================ */

.lightbox{
  overscroll-behavior:contain;
}


.lightbox__close{
  width:44px;
  height:44px;
}


.lightbox img{
  max-height:
    calc(
      90dvh - 100px
    );
}


.lightbox figcaption{
  overflow-wrap:anywhere;
}


body:has(.lightbox[open]){
  overflow:hidden;
}



/* ============================================================
   Intro animation
   ============================================================ */

@media(hover:hover)
and
(prefers-reduced-motion:no-preference){

  .hero__headline{
    animation:
      enter
      .65s
      ease
      both;
  }

  .hero__details{
    animation:
      enter
      .8s
      ease
      both;
  }

  .portrait-wrap{
    animation:
      enter
      1s
      ease
      both;
  }

}


@keyframes enter{

  from{
    opacity:0;

    transform:
      translateY(15px);
  }

  to{
    opacity:1;

    transform:none;
  }

}



/* ============================================================
   Tablet
   ============================================================ */

@media(max-width:980px){

  .hero__layout{
    grid-template-columns:
      minmax(0,1fr)
      240px;

    column-gap:42px;

    min-height:560px;
  }


  .portrait-card{
    width:240px;
  }


  .hero h1{
    font-size:64px;
  }


  .hero__role{
    font-size:15px;
  }


  .section-heading p{
    max-width:220px;
  }


  .paper-card{
    grid-template-columns:
      minmax(220px,.75fr)
      minmax(0,1.25fr);
  }


  .paper-card__body{
    padding:24px;
  }

}



/* ============================================================
   Mobile base
   ============================================================ */

@media(max-width:720px){

  .container{
    width:
      calc(
        100% - 36px
      );
  }


  .masthead{
    padding:19px 0;
  }


  .wordmark{
    font-size:16px;
  }


  .wordmark b{
    margin-left:8px;
    padding-left:10px;

    font-size:10px;
  }


  .masthead__link{
    font-size:10px;
  }


  .masthead__link span{
    margin-left:3px;
  }


  .hero__layout{
    grid-template-columns:
      minmax(0,1fr)
      110px;

    grid-template-areas:
      "headline portrait"
      "details details";

    column-gap:18px;
    row-gap:26px;

    min-height:0;

    padding:40px 0 38px;
  }


  .hero__headline{
    align-self:center;
  }


  .portrait-wrap{
    order:0;

    align-self:center;
  }


  .portrait-card{
    width:110px;

    padding:5px;

    border-radius:9px;
  }


  .portrait-card img{
    border-radius:5px;
  }


  .portrait-label{
    display:none;
  }


  .portrait-card__caption{
    display:none;
  }


  .eyebrow{
    max-width:230px;

    margin-bottom:16px;

    gap:6px;

    font-size:8px;

    letter-spacing:.05em;

    line-height:1.8;
  }


  .hero h1{
    margin-bottom:14px;

    font-size:43px;

    letter-spacing:.06em;
  }


  .hero__role{
    margin:0;

    font-size:12px;

    line-height:1.85;
  }


  .hero__summary{
    margin-bottom:16px;

    font-size:13px;

    line-height:1.95;
  }


  .project-tag{
    margin-bottom:23px;

    border-radius:5px;

    font-size:11px;
  }


  .hero__actions{
    display:grid;

    grid-template-columns:
      1fr
      1fr;

    gap:10px;
  }


  .button{
    min-height:46px;

    padding:0 12px;

    gap:12px;

    font-size:12px;
  }


  .stats{
    margin-top:26px;

    padding-top:24px;

    gap:14px;
  }


  .stats dt{
    font-size:23px;
  }


  .stats dd{
    margin-top:6px;

    font-size:10px;

    line-height:1.55;
  }


  .hero-orbit{
    width:400px;
    height:400px;

    right:-170px;
    top:65px;

    animation:none;

    opacity:.35;
  }


  .section-nav__inner{
    justify-content:space-between;

    width:100%;

    gap:6px;

    padding-inline:12px;
  }


  .section-nav a{
    padding:16px 8px;

    font-size:12px;

    letter-spacing:0;
  }


  .section-nav a::after{
    left:8px;
    right:8px;
  }


  .section{
    padding:48px 0;

    scroll-margin-top:64px;
  }


  .section-heading{
    margin-bottom:24px;

    gap:11px;
  }


  .section-heading h2{
    font-size:25px;
  }


  .section-heading > div{
    gap:11px;
  }


  .section-heading p{
    max-width:none;

    padding-left:43px;

    font-size:9px;

    text-align:left;
  }


  .section-index{
    font-size:10px;
  }


  .filters{
    gap:8px;

    margin-bottom:20px;
  }


  .filter{
    min-height:40px;

    padding:8px 16px;

    font-size:12px;
  }


  .card-grid,
  .media-grid{
    gap:18px;
  }


  .paper-card{
    grid-template-columns:1fr;
  }


  .paper-card__media{
    padding:18px;
  }


  .paper-card .image-button{
    height:250px;

    aspect-ratio:auto;
  }


  .paper-card__body{
    padding:22px;
  }


  .paper-card h3{
    font-size:18px;
  }


  .research-stack{
    gap:30px;
  }


  .patent-grid{
    grid-template-columns:1fr;
  }


  .resume-panel{
    gap:22px;
  }


  .resume-panel h2{
    font-size:31px;
  }


  .contact-line{
    gap:9px;

    font-size:12px;
  }


  .footer__inner{
    flex-direction:column;

    gap:14px;

    text-align:center;
  }


  .lightbox{
    width:
      calc(
        100% - 20px
      );

    max-height:94dvh;
  }


  .lightbox figcaption{
    font-size:12px;
  }


  .lightbox img{
    max-height:
      calc(
        90dvh - 130px
      );
  }

}



/* ============================================================
   Very small mobile
   ============================================================ */

@media(max-width:360px){

  .wordmark b{
    display:none;
  }


  .hero__layout{
    grid-template-columns:
      minmax(0,1fr)
      94px;

    gap:22px 12px;
  }


  .portrait-card{
    width:94px;
  }


  .hero h1{
    font-size:36px;
  }


  .eyebrow{
    font-size:7px;
  }


  .section-nav a{
    padding-inline:7px;

    font-size:11px;
  }


  .section-heading h2{
    font-size:22px;
  }


  .stats{
    gap:8px;
  }


  .stats dt{
    font-size:21px;
  }

}



/* ============================================================
   Reduced motion
   ============================================================ */

@media(prefers-reduced-motion:reduce){

  html{
    scroll-behavior:auto;
  }


  *,
  *::before,
  *::after{
    animation:none !important;

    transition:none !important;
  }

}



/* ============================================================
   MOBILE CARD COLUMN SELECTOR

   修改内容：

   1. 不再放在页面最顶部。
   2. HTML 已移动到“竞赛与荣誉证书”标题下面。
   3. 去掉原来的深蓝整块背景。
   4. 改为透明外层。
   5. 单列 / 二列 / 三列使用浅灰青背景。
   6. 当前选项使用网站统一的深青色。
   ============================================================ */

.mobile-layout-toolbar{
  display:none;
}


@media(max-width:720px){


  /* ----------------------------------------------------------
     整个“卡片显示”区域
     ---------------------------------------------------------- */

  .mobile-layout-toolbar{
    display:block;

    margin:2px 0 18px;

    padding:0;

    border:0;

    border-radius:0;

    background:transparent;

    box-shadow:none;

    color:#172a36;
  }



  /* ----------------------------------------------------------
     横向排列
     ---------------------------------------------------------- */

  .mobile-layout-toolbar__inner{
    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:14px;

    min-height:42px;
  }



  /* ----------------------------------------------------------
     “卡片显示”文字
     ---------------------------------------------------------- */

  .mobile-layout-toolbar__label{
    flex:0 0 auto;

    color:#6f858b;

    font-size:11px;

    font-weight:750;

    letter-spacing:.08em;

    white-space:nowrap;
  }



  /* ----------------------------------------------------------
     单列 / 二列 / 三列 整体
     ---------------------------------------------------------- */

  .mobile-layout-control{
    --mobile-cols-index:0;

    position:relative;

    display:grid;

    grid-template-columns:
      repeat(
        3,
        1fr
      );

    width:
      min(
        238px,
        68vw
      );

    padding:3px;

    border:
      1px solid #d6e2e4;

    border-radius:9px;

    background:#f2f6f7;

    overflow:hidden;

    touch-action:pan-y;

    user-select:none;

    -webkit-user-select:none;
  }



  /* ----------------------------------------------------------
     当前选中的滑块
     ---------------------------------------------------------- */

  .mobile-layout-control::before{
    content:"";

    position:absolute;

    left:3px;
    top:3px;
    bottom:3px;

    width:
      calc(
        (100% - 6px) / 3
      );

    border-radius:6px;

    background:#133e4b;

    transform:
      translateX(
        calc(
          var(--mobile-cols-index)
          *
          100%
        )
      );

    transition:
      transform
      .22s
      ease;

    box-shadow:
      0
      3px
      10px
      rgba(
        19,
        62,
        75,
        .12
      );
  }



  /* ----------------------------------------------------------
     三个按钮
     ---------------------------------------------------------- */

  .mobile-layout-control button{
    position:relative;

    z-index:1;

    min-height:34px;

    padding:0 8px;

    border:0;

    background:transparent;

    color:#647980;

    font-family:inherit;

    font-size:11px;

    font-weight:750;

    cursor:pointer;
  }



  /* 当前选中的按钮文字 */

  .mobile-layout-control button[aria-pressed="true"]{
    color:#ffffff;
  }



  /* ----------------------------------------------------------
     滑块位置
     ---------------------------------------------------------- */

  body[data-mobile-columns="1"]
  .mobile-layout-control{
    --mobile-cols-index:0;
  }


  body[data-mobile-columns="2"]
  .mobile-layout-control{
    --mobile-cols-index:1;
  }


  body[data-mobile-columns="3"]
  .mobile-layout-control{
    --mobile-cols-index:2;
  }



  /* ==========================================================
     1 列
     ========================================================== */

  body[data-mobile-columns="1"] .card-grid,
  body[data-mobile-columns="1"] .patent-grid,
  body[data-mobile-columns="1"] .media-grid{
    grid-template-columns:1fr;
  }



  /* ==========================================================
     2 列
     ========================================================== */

  body[data-mobile-columns="2"] .card-grid,
  body[data-mobile-columns="2"] .patent-grid,
  body[data-mobile-columns="2"] .media-grid{
    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      );

    gap:12px;
  }


  body[data-mobile-columns="2"]
  .certificate-card
  .image-button,

  body[data-mobile-columns="2"]
  .media-card
  .image-button,

  body[data-mobile-columns="2"]
  .patent-card__image{
    padding:9px;
  }


  body[data-mobile-columns="2"]
  .certificate-card__body,

  body[data-mobile-columns="2"]
  .media-card__body,

  body[data-mobile-columns="2"]
  .patent-card__body{
    padding:12px;
  }


  body[data-mobile-columns="2"]
  .certificate-card h3,

  body[data-mobile-columns="2"]
  .media-card h3,

  body[data-mobile-columns="2"]
  .patent-card__body h4{
    font-size:13px;

    line-height:1.55;
  }


  body[data-mobile-columns="2"]
  .certificate-card p,

  body[data-mobile-columns="2"]
  .media-card p,

  body[data-mobile-columns="2"]
  .patent-card__meta,

  body[data-mobile-columns="2"]
  .patent-card__number{
    font-size:11px;
  }


  body[data-mobile-columns="2"]
  .certificate-card__meta,

  body[data-mobile-columns="2"]
  .media-card__source,

  body[data-mobile-columns="2"]
  .patent-card__topline{
    font-size:10px;
  }



  /* ==========================================================
     3 列
     ========================================================== */

  body[data-mobile-columns="3"] .card-grid,
  body[data-mobile-columns="3"] .patent-grid,
  body[data-mobile-columns="3"] .media-grid{
    grid-template-columns:
      repeat(
        3,
        minmax(0,1fr)
      );

    gap:8px;
  }


  body[data-mobile-columns="3"]
  .certificate-card,

  body[data-mobile-columns="3"]
  .media-card,

  body[data-mobile-columns="3"]
  .patent-card{
    border-radius:10px;
  }


  body[data-mobile-columns="3"]
  .certificate-card
  .image-button,

  body[data-mobile-columns="3"]
  .media-card
  .image-button,

  body[data-mobile-columns="3"]
  .patent-card__image{
    padding:6px;
  }


  body[data-mobile-columns="3"]
  .certificate-card__body,

  body[data-mobile-columns="3"]
  .media-card__body,

  body[data-mobile-columns="3"]
  .patent-card__body{
    padding:8px;
  }


  body[data-mobile-columns="3"]
  .certificate-card h3,

  body[data-mobile-columns="3"]
  .media-card h3,

  body[data-mobile-columns="3"]
  .patent-card__body h4{
    margin-bottom:5px;

    font-size:10.5px;

    line-height:1.5;
  }


  body[data-mobile-columns="3"]
  .certificate-card p,

  body[data-mobile-columns="3"]
  .media-card p,

  body[data-mobile-columns="3"]
  .patent-card__meta,

  body[data-mobile-columns="3"]
  .patent-card__number{
    font-size:9px;

    line-height:1.55;
  }


  body[data-mobile-columns="3"]
  .certificate-card__meta,

  body[data-mobile-columns="3"]
  .media-card__source,

  body[data-mobile-columns="3"]
  .patent-card__topline{
    gap:4px;

    font-size:8.5px;
  }


  body[data-mobile-columns="3"]
  .badge{
    left:6px;
    top:6px;

    padding:3px 5px;

    font-size:8px;
  }


  body[data-mobile-columns="3"]
  .text-action--compact{
    min-height:30px;

    margin-top:9px;

    gap:6px;

    font-size:9px;
  }


  body[data-mobile-columns="3"]
  .patent-card__number{
    padding:7px;
  }


  body[data-mobile-columns="3"]
  .patent-card__number small{
    font-size:8px;
  }


  body[data-mobile-columns="3"]
  .patent-card__number strong{
    font-size:9px;
  }


  .section-index{
    min-width:36px;
    height:36px;

    font-size:11px;
  }

}



/* ============================================================
   Section heading alignment refinement
   ============================================================ */

.section-heading > div{
  align-items:center;
}


.section-heading h2{
  margin:0;

  line-height:1.16;
}


.section-index{
  width:40px;
  min-width:40px;
  height:40px;

  flex:0 0 40px;

  line-height:1;

  border-radius:9px;

  box-shadow:
    0 5px 14px #176c8620;
}



@media(max-width:720px){

  .section-heading > div{
    gap:10px;
  }


  .section-heading h2{
    line-height:1.18;
  }


  .section-index{
    width:36px;
    min-width:36px;
    height:36px;

    flex-basis:36px;

    border-radius:8px;
  }


  .section-heading p{
    padding-left:46px;
  }

}



/* ============================================================
   Doctoral-application academic emphasis
   ============================================================ */

.research-focus{
  display:grid;

  gap:10px;

  margin:0 0 18px;

  padding:14px 15px;

  border:
    1px solid #ffffff18;

  border-radius:10px;

  background:#ffffff08;
}


.research-focus__row{
  display:grid;

  grid-template-columns:
    64px
    minmax(0,1fr);

  align-items:start;

  gap:12px;
}


.research-focus__label{
  padding-top:4px;

  color:#75e6d2;

  font-size:10px;

  font-weight:800;

  letter-spacing:.08em;

  white-space:nowrap;
}


.research-focus__interests,
.research-focus__methods{
  display:flex;

  flex-wrap:wrap;

  gap:7px;
}


.research-focus__interests span{
  color:#eef9fb;

  font-size:12px;

  font-weight:700;
}


.research-focus__interests
span:not(:last-child)::after{
  content:"/";

  margin-left:7px;

  color:#668792;

  font-weight:400;
}


.research-focus__methods span{
  padding:4px 8px;

  border:
    1px solid #75e6d22b;

  border-radius:5px;

  background:#75e6d20c;

  color:#bcd8df;

  font-size:10.5px;

  line-height:1.4;
}


.hero__actions .button--primary{
  font-weight:800;
}



/* ============================================================
   Research projects
   ============================================================ */

.section--research-focus
.section-heading{
  position:relative;
}


.research-focus-badge{
  display:inline-flex;
  align-items:center;

  min-height:24px;

  margin-left:2px;

  padding:0 8px;

  border:
    1px solid #8dcfc8;

  border-radius:999px;

  background:#e7f7f4;

  color:#176c68;

  font-size:10px;

  font-weight:800;

  letter-spacing:.05em;

  white-space:nowrap;
}


.project-card{
  border-color:#cfdfe2;
}


.project-card__source{
  align-items:flex-start;
}


.project-card__body{
  display:flex;

  flex-direction:column;
}


.project-card__role{
  display:flex;

  flex-wrap:wrap;

  gap:7px;

  margin:0 0 15px;
}


.project-card__role span{
  padding:4px 8px;

  border-radius:6px;

  background:#e9f4f5;

  color:#176c86;

  font-size:11px;

  font-weight:800;
}


.project-card__summary,
.project-card__detail,
.project-card__tech{
  padding-top:13px;

  border-top:
    1px solid #edf1f2;
}


.project-card__detail,
.project-card__tech{
  margin-top:13px;
}


.project-card__label{
  display:block;

  margin-bottom:6px;

  color:#294d5b;

  font-size:10px;

  font-weight:850;

  letter-spacing:.09em;
}


.project-card__summary p,
.project-card__detail p{
  margin:0;

  color:#607580;

  font-size:12.5px;

  line-height:1.85;
}


.project-card__result{
  margin-bottom:1px;
}


.tech-tags{
  display:flex;

  flex-wrap:wrap;

  gap:6px;
}


.tech-tags span{
  padding:5px 7px;

  border:
    1px solid #d8e6e7;

  border-radius:5px;

  background:#f4f8f8;

  color:#385965;

  font-size:10.5px;

  font-weight:700;

  line-height:1.2;
}



@media(max-width:720px){

  .research-focus{
    gap:9px;

    margin-bottom:15px;

    padding:12px;
  }


  .research-focus__row{
    grid-template-columns:
      54px
      minmax(0,1fr);

    gap:8px;
  }


  .research-focus__label{
    font-size:9px;
  }


  .research-focus__interests span{
    font-size:10.5px;
  }


  .research-focus__methods{
    gap:5px;
  }


  .research-focus__methods span{
    padding:4px 6px;

    font-size:9.5px;
  }


  .research-focus-badge{
    min-height:21px;

    padding-inline:7px;

    font-size:9px;
  }


  .project-card__summary p,
  .project-card__detail p{
    font-size:12px;

    line-height:1.75;
  }


  .tech-tags span{
    font-size:9.5px;
  }



  /* ----------------------------------------------------------
     两列项目模式
     ---------------------------------------------------------- */

  body[data-mobile-columns="2"]
  .project-card__role{
    margin-bottom:10px;
  }


  body[data-mobile-columns="2"]
  .project-card__summary,

  body[data-mobile-columns="2"]
  .project-card__detail,

  body[data-mobile-columns="2"]
  .project-card__tech{
    padding-top:9px;
  }


  body[data-mobile-columns="2"]
  .project-card__detail,

  body[data-mobile-columns="2"]
  .project-card__tech{
    margin-top:9px;
  }


  body[data-mobile-columns="2"]
  .project-card__label{
    margin-bottom:4px;

    font-size:8.5px;
  }


  body[data-mobile-columns="2"]
  .project-card__summary p,

  body[data-mobile-columns="2"]
  .project-card__detail p{
    font-size:10px;

    line-height:1.6;
  }


  body[data-mobile-columns="2"]
  .tech-tags{
    gap:4px;
  }


  body[data-mobile-columns="2"]
  .tech-tags span{
    padding:3px 5px;

    font-size:8px;
  }



  /* ----------------------------------------------------------
     三列项目模式
     ---------------------------------------------------------- */

  body[data-mobile-columns="3"]
  .project-card__role,

  body[data-mobile-columns="3"]
  .project-card__summary,

  body[data-mobile-columns="3"]
  .project-card__detail{
    display:none;
  }


  body[data-mobile-columns="3"]
  .project-card__tech{
    margin-top:7px;

    padding-top:7px;
  }


  body[data-mobile-columns="3"]
  .project-card__label{
    margin-bottom:4px;

    font-size:7.5px;
  }


  body[data-mobile-columns="3"]
  .tech-tags{
    gap:3px;
  }


  body[data-mobile-columns="3"]
  .tech-tags span{
    padding:3px 4px;

    font-size:7.5px;
  }


  body[data-mobile-columns="3"]
  .tech-tags span:nth-child(n+4){
    display:none;
  }

}



/* ============================================================
   Hero achievement summary
   ============================================================ */

.stats{
  grid-template-columns:
    minmax(235px,1.18fr)
    minmax(205px,1fr)
    minmax(190px,.92fr);

  align-items:start;

  column-gap:42px;

  row-gap:18px;

  margin-top:30px;

  padding-top:22px;
}


.stats__item{
  min-width:0;
}


.stats dt.stats__heading{
  display:flex;

  align-items:baseline;

  gap:6px;

  margin:0;

  color:#f0f8fa;

  font-size:21px;

  font-weight:760;

  line-height:1.24;

  letter-spacing:-.025em;

  white-space:nowrap;
}


.stats__name{
  min-width:0;
}


.stats__separator{
  flex:0 0 auto;

  color:#6b95a5;

  font-weight:500;

  transform:
    translateY(-1px);
}


.stats__value{
  flex:0 0 auto;

  color:#f0f8fa;

  font-weight:820;
}


.stats dd{
  display:block;

  margin:8px 0 0;
}


.stats__details{
  display:grid;

  gap:3px;

  margin:0;

  padding:0;

  list-style:none;

  color:#82a1af;

  font-size:9.5px;

  line-height:1.5;
}


.stats__details li{
  position:relative;

  padding-left:9px;
}


.stats__details li::before{
  content:"";

  position:absolute;

  left:0;
  top:.68em;

  width:3px;
  height:3px;

  border-radius:50%;

  background:#65d9c5;
}



@media(max-width:980px){

  .stats{
    grid-template-columns:
      minmax(210px,1.16fr)
      minmax(180px,1fr)
      minmax(170px,.9fr);

    column-gap:24px;
  }


  .stats dt.stats__heading{
    gap:5px;

    font-size:18px;
  }


  .stats__details{
    font-size:9px;
  }

}



@media(max-width:720px){

  .stats{
    grid-template-columns:
      repeat(
        3,
        minmax(0,1fr)
      );

    gap:10px;

    margin-top:25px;

    padding-top:20px;
  }


  .stats dt.stats__heading{
    display:block;

    font-size:13px;

    line-height:1.38;

    white-space:normal;
  }


  .stats__separator{
    margin:0 3px;

    transform:none;
  }


  .stats dd{
    margin-top:6px;
  }


  .stats__details{
    gap:3px;

    font-size:8px;

    line-height:1.45;
  }


  .stats__details li{
    padding-left:7px;
  }


  .stats__details li::before{
    width:2px;
    height:2px;

    top:.66em;
  }

}



@media(max-width:390px){

  .stats{
    grid-template-columns:1fr;

    gap:15px;
  }


  .stats__item{
    padding:0 0 13px;

    border-bottom:
      1px solid #ffffff14;
  }


  .stats__item:last-child{
    padding-bottom:0;

    border-bottom:0;
  }


  .stats dt.stats__heading{
    display:flex;

    font-size:17px;

    white-space:nowrap;
  }


  .stats__details{
    font-size:9px;
  }

}