:root {
  --bg:#fafafa;
  --text:#111111;
  --muted:#666666;
  --line:#e5e5e5;
  --max-width:1100px;
  --radius:18px;
  --accent:red;
  --hover-color:#1d4ed8;
}

*{box-sizing:border-box}

body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,sans-serif;
  font-size:16px;
  letter-spacing:-0.01em;
  background:var(--bg);
  color:var(--text);
  line-height:1.6
}

a{
  color:inherit;
  text-decoration:none;
  transition:color .2s ease
}

a:hover{color:var(--hover-color)}

.container{
  width:min(100% - 2rem,var(--max-width));
  margin:2rem auto;
  padding:2.2rem 1rem 2rem;
  background:#fff;
  border-radius:24px;
  box-shadow:0 10px 30px rgba(0,0,0,.04);
  border:1px solid #e5e7eb
}

.hero{
  display:grid;
  grid-template-columns:2.2fr .8fr;
  gap:1.5rem;
  align-items:center
}

.hero-text h1{
  margin:0 0 1.2rem;
  font-size:2.6rem;
  font-weight:600;
  line-height:1.1;
  margin-left:-3px
}

.hero-contact {
    margin-top: -0.8rem;
    margin-bottom: 1.4rem;
    font-size: 1.2rem;
    font-weight: 400;
    letter-spacing: 0.01em;
    color: #666;
}

.hero-contact a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

.hero-contact a:hover {
    color: #000;
}

.subtitle{margin:0 0 .8rem;color:var(--muted);font-size:1rem}

.bio{
  margin:0 0 1.2rem;
  width:100%;
  text-align:justify
}

.links,
.pub-links{
  display:flex;
  gap:.6rem;
  flex-wrap:wrap;
  margin-top: 0.5rem;
  margin-bottom: 0.7rem;
}

.links a{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  padding:0.4rem 0.9rem;
  border-radius:999px;
  background:#f9fafb;
  border:1px solid #e5e7eb;
  font-size:1rem;
  color:#111;
  transition:all .2s ease
}

.pub-links a{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  padding:0.1rem 0.7rem;
  border-radius:999px;
  background:#f9fafb;
  border:1px solid #e5e7eb;
  font-size:1rem;
  color:#111;
  transition:all .2s ease
}

.links a:hover,
.pub-links a:hover{
  background:#e5e7eb;
  border-color:#d1d5db;
  color:#1d4ed8
}

.links i,
.pub-links i{
  font-size:18px;
  opacity:1
}

.hero-image{
  display:flex;
  justify-content:flex-end;
  padding-right:0.8rem;
}

.hero-image img{
  width:250px;
  height:250px;
  object-fit:cover;
  border-radius:50%;
  border:1px solid #e5e7eb
}

.section h2{
  margin-bottom:1rem;
  font-size:1.5rem
}

.publication-list{
  display:flex;
  flex-direction:column;
  gap:.8rem
}

.publication{
  display:grid;
  grid-template-columns:260px 1fr;
  gap:1.2rem;
  align-items:stretch;
  padding:0.6rem;
  margin-right:1.2rem;
}

.publication:hover{
  transform:translateY(-2px);
  background:#fffbea;
  box-shadow:0 6px 20px rgba(0,0,0,.05)
}

.publication-thumbnail{
  position:relative;
  display:grid;
  place-items:center;
  width:100%;
  height:100%
}

.video-poster,
.hover-video{
  width:100%;
  height:auto;
  border-radius:12px;
  border:1px solid #e5e7eb;
  display:block
}

.video-poster{
  display:none;
}

.hover-video{
  position:absolute;
  top:50%;
  left:0;
  transform:translateY(-50%);
  opacity:1;
  transition:none
}

.publication-content h3{
  margin:0 0 .1rem;
  font-size:1.1rem;
  font-weight:600;
  color:var(--hover-color)
}

.authors{margin:.1rem 0;font-size:1rem}

.venue{margin:.15rem 0;font-size:1.2;font-style:italic;font-weight:400}

.description{
  margin:.4rem 0 .8rem;
  font-size:.95rem;
  text-align:left
}

.highlight{
  margin-left:.4rem;
  color:var(--accent);
  font-weight:600;
}

.colored-link{color:var(--hover-color)}

.site-footer{
  margin:2rem auto 1rem;
  text-align:center;
  font-size:.85rem;
  color:var(--muted);
  width:min(100% - 2rem,var(--max-width))
}

.site-footer a{color:var(--hover-color)}

.site-footer a:hover{text-decoration:underline}

.fa-file-pdf{color:#dc2626}
.ai-arxiv{color:#b91c1c}
.ai-google-scholar{color:#1d4ed8;}
.fa-github,.fa-code{color:#111827}
.fa-linkedin {color: #0A66C2;}

@media (max-width:700px){
  .container{
    padding:1.2rem .9rem 1.8rem
  }

  .hero{
    grid-template-columns:1fr;
    gap:1.2rem;
    text-align:center
  }

  .hero-text{
    order:2
  }

  .hero-text h1{
    font-size:1.8rem
  }

  .subtitle{
    font-size:.9rem
  }

  .bio{
    font-size:.95rem;
    text-align:left
  }

  .hero-image{
    order:1;
    margin-bottom:.3rem;
    justify-content:center;
    padding-right:0;
  }

  .hero-image img{
    width:140px;
    height:140px
  }

  .links{
    justify-content:center;
    gap:.4rem
  }

  .links a{
    padding:.35rem .7rem;
    font-size:.8rem
  }

  .publication{
    grid-template-columns:1fr;
    gap:.6rem
  }

  .publication-thumbnail{
    aspect-ratio:16/9;
    overflow:hidden;
    border-radius:10px
  }

  .video-poster,
  .hover-video{
    width:100%;
    height:100%;
    object-fit:cover
  }

  .hover-video{
    position:absolute;
    top:0;
    left:0;
    transform:none
  }

  .publication-content h3{
    font-size:1rem
  }

  .authors{
    font-size:.85rem
  }

  .venue{
    font-size:.9rem
  }

  .description{
    font-size:.9rem;
    text-align:left
  }

  .pub-links{
    gap:.4rem
  }

  .pub-links a{
    padding:.25rem .55rem;
    font-size:.8rem
  }
}