<style>
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 1.5rem;
  margin: 2rem 0;
}
.team-member {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s;
}
.team-member:hover {
  transform: translateY(-4px);
}
.team-member img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 3px solid #e5e7eb;
  transition: border-color 0.2s;
}
.team-member:hover img {
  border-color: #f97316;
}
.team-member .name {
  font-size: 0.85rem;
  font-weight: 600;
  margin-top: 0.75rem;
  text-align: center;
}
.team-member .roles {
  font-size: 0.75rem;
  margin-top: 0.25rem;
  opacity: 0.8;
}
.team-lead {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 1.5rem 2rem;
  background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
  border: 2px solid #fed7aa;
  border-radius: 1rem;
  margin-bottom: 1rem;
}
.team-lead img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 4px solid #f97316;
  flex-shrink: 0;
}
.team-lead .info {
  flex: 1;
}
.team-lead .name {
  font-size: 1.35rem;
  font-weight: 700;
  color: #1f2937;
}
.team-lead .role {
  font-size: 1rem;
  color: #c2410c;
  margin-top: 0.25rem;
  font-weight: 500;
}
.team-lead .bio {
  font-size: 0.9rem;
  color: #57534e;
  margin-top: 0.5rem;
  line-height: 1.5;
}
.team-lead .roles {
  font-size: 0.85rem;
  margin-top: 0.5rem;
}
.role-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  margin: 1.5rem 0;
  padding: 1rem 1.25rem;
  background: #f8fafc;
  border-radius: 0.75rem;
  font-size: 0.8rem;
}
.role-legend span {
  white-space: nowrap;
}
.staff-row {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  gap: 2.5rem;
  padding: 1rem 0;
}
.team-staff {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s;
}
.team-staff:hover {
  transform: translateY(-3px);
}
.team-staff img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 2px solid #94a3b8;
  transition: border-color 0.15s;
}
.team-staff:hover img {
  border-color: #f97316;
}
.team-staff .name {
  font-size: 0.85rem;
  font-weight: 600;
  margin-top: 0.5rem;
  text-align: center;
}
.team-staff .role {
  font-size: 0.7rem;
  color: #64748b;
  margin-top: 0.125rem;
  text-align: center;
}
.section-label {
  grid-column: 1 / -1;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #94a3b8;
  margin-top: 1rem;
  margin-bottom: -0.5rem;
}
@media (max-width: 600px) {
  .team-lead {
    flex-direction: column;
    text-align: center;
    padding: 1.25rem;
  }
  .team-lead img {
    width: 90px;
    height: 90px;
  }
  .team-staff {
    padding: 0.75rem 1rem;
  }
}
</style>

<div class="role-legend">
  <span>🪲 Bug Hunter</span>
  <span>🧑‍💻 Code Warrior</span>
  <span>✍️ Documentation</span>
  <span>🎨 Design</span>
  <span>🧠 Ideas</span>
  <span>🔎 Reviewer</span>
  <span>🧪 Testing</span>
  <span>🛠️ Tooling</span>
</div>

<div class="team-grid">
  <div class="team-lead">
    <a href="https://github.com/profvjreddi">
      
    </a>
    <div class="info">
      <div class="name">Vijay Janapa Reddi</div>
      <div class="role">🤓 Nerdy Professor · Harvard University</div>
      <div class="bio">Gordon McKay Professor of Electrical Engineering at Harvard. Passionate about creating the next generation of AI engineers.</div>
      <div class="roles">🪲 🧑‍💻 🎨 ✍️ 🧠 🔎 🧪 🛠️</div>
    </div>
  </div>

  <div class="section-label">Community Staff</div>

  <div class="staff-row">
    <a href="https://github.com/kai4avaya" class="team-staff">
      
      <div class="name">kai</div>
      <div class="role">🌐 Web Wizard</div>
    </a>

    <a href="https://github.com/AndreaMattiaGaravagno" class="team-staff">
      
      <div class="name">AndreaMattiaGaravagno</div>
      <div class="role">🧭 Tech Lead</div>
    </a>

    <a href="#" class="team-staff">
      
      <div class="name">Kari Janapareddi</div>
      <div class="role">👑 Chief of Staff</div>
    </a>

  </div>

  <div class="section-label">Contributors</div>
  <a href="https://github.com/minhdang26403" class="team-member">
    
    <span class="name">Dang Truong</span>
    <span class="roles">🪲 🧑‍💻 ✍️ 🧪</span>
  </a>
  <a href="https://github.com/didier-durand" class="team-member">
    
    <span class="name">Didier Durand</span>
    <span class="roles">🪲 🧑‍💻 ✍️</span>
  </a>
  <a href="https://github.com/karthikdani" class="team-member">
    
    <span class="name">Karthik Dani</span>
    <span class="roles">🪲 🧑‍💻</span>
  </a>
  <a href="https://github.com/avikde" class="team-member">
    
    <span class="name">Avik De</span>
    <span class="roles">🪲 🧪</span>
  </a>
  <a href="https://github.com/rnjema" class="team-member">
    
    <span class="name">rnjema</span>
    <span class="roles">🧑‍💻 🛠️</span>
  </a>
  <a href="https://github.com/joeswagson" class="team-member">
    
    <span class="name">joeswagson</span>
    <span class="roles">🧑‍💻 🛠️</span>
  </a>
  <a href="https://github.com/AmirAlasady" class="team-member">
    
    <span class="name">Amir Alasady</span>
    <span class="roles">🪲</span>
  </a>
  <a href="https://github.com/jettythek" class="team-member">
    
    <span class="name">jettythek</span>
    <span class="roles">🧑‍💻</span>
  </a>
  <a href="https://github.com/Takosaga" class="team-member">
    
    <span class="name">Takosaga</span>
    <span class="roles">🪲</span>
  </a>
  <a href="https://github.com/wz1114841863" class="team-member">
    
    <span class="name">wzz</span>
    <span class="roles">🪲</span>
  </a>
  <a href="https://github.com/ngbolin" class="team-member">
    
    <span class="name">Ng Bo Lin</span>
    <span class="roles">✍️</span>
  </a>
  <a href="https://github.com/keo-dara" class="team-member">
    
    <span class="name">keo-dara</span>
    <span class="roles">🪲</span>
  </a>
  <a href="https://github.com/Kobra299" class="team-member">
    
    <span class="name">Wayne Norman</span>
    <span class="roles">🪲</span>
  </a>
  <a href="https://github.com/lalalostcode" class="team-member">
    
    <span class="name">Ilham Rafiqin</span>
    <span class="roles">🪲</span>
  </a>
</div>