* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
 }

 body {
   font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', sans-serif;
   background-color: #ffffff;
   color: #1d1d1f;
   transition: all 0.3s ease;
   font-weight: 400;
   line-height: 1.47059;
   letter-spacing: -0.022em;
 }

 body.dark-theme {
   background-color: #000000;
   color: #f5f5f7;
 }

 .container {
   max-width: 1200px;
   margin: 0 auto;
   padding: 0 20px;
 }

 /* Navigation */
 nav {
   padding: 20px 0;
   position: relative;
   border-bottom: 1px solid #d2d2d7;
 }

 .dark-theme nav {
   border-bottom: 1px solid #424245;
 }

 .nav-container {
   display: flex;
   justify-content: space-between;
   align-items: center;
 }

 .nav-links {
   display: flex;
   list-style: none;
   gap: 40px;
 }

 .nav-links a {
   text-decoration: none;
   color: #1d1d1f;
   font-weight: 400;
   font-size: 17px;
   transition: color 0.3s ease;
   letter-spacing: -0.022em;
 }

 .nav-links a:hover {
   color: #0071e3;
 }

 .dark-theme .nav-links a {
   color: #f5f5f7;
 }

 .dark-theme .nav-links a:hover {
   color: #2997ff;
 }

 /* Theme Toggle */
 .theme-toggle {
   display: flex;
   align-items: center;
   gap: 12px;
   font-weight: 400;
   font-size: 17px;
   color: #1d1d1f;
 }

 .dark-theme .theme-toggle {
   color: #f5f5f7;
 }

 .toggle-switch {
   position: relative;
   width: 51px;
   height: 31px;
   background-color: #e5e5ea;
   border-radius: 16px;
   cursor: pointer;
   transition: background-color 0.3s ease;
   border: none;
   outline: none;
 }

 .dark-theme .toggle-switch {
   background-color: #39393d;
 }

 .toggle-switch::before {
   content: '';
   position: absolute;
   width: 27px;
   height: 27px;
   border-radius: 50%;
   background-color: #ffffff;
   top: 2px;
   left: 2px;
   transition: transform 0.3s ease;
   box-shadow: 0 0 1px rgba(0, 0, 0, 0.1);
 }

 .toggle-switch.active {
   background-color: #34c759;
 }

 .toggle-switch.active::before {
   transform: translateX(20px);
 }

 /* Hero Section */
 .hero {
   padding: 80px 0;
   min-height: 70vh;
   display: flex;
   align-items: center;
 }

 .hero-content {
   display: flex;
   align-items: center;
   gap: 100px;
   width: 100%;
 }

 .hero-text {
   flex: 1;
 }

 .hero-text h1 {
   font-size: 56px;
   font-weight: 600;
   margin-bottom: 24px;
   line-height: 1.07143;
   letter-spacing: -0.005em;
   color: #1d1d1f;
 }

 .dark-theme .hero-text h1 {
   color: #f5f5f7;
 }

 .hero-text .subtitle {
   font-size: 21px;
   margin-bottom: 32px;
   color: #86868b;
   font-weight: 400;
   line-height: 1.381;
   letter-spacing: 0.011em;
 }

 .dark-theme .hero-text .subtitle {
   color: #a1a1a6;
 }

 .hero-text .description {
   font-size: 19px;
   line-height: 1.4211;
   color: #1d1d1f;
   letter-spacing: 0.012em;
 }

 .dark-theme .hero-text .description {
   color: #f5f5f7;
 }

 .hero-image {
   flex-shrink: 0;
 }

 .profile-image {
   width: 320px;
   height: 320px;
   border-radius: 50%;
   background: linear-gradient(135deg, #007aff, #5ac8fa);
   display: flex;
   align-items: center;
   justify-content: center;
   position: relative;
   overflow: hidden;
   box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
 }

 /* Fallback gradient if no image */
 .profile-image:not(:has(img)) {
   background: linear-gradient(135deg, #007aff, #5ac8fa);
   display: flex;
   align-items: center;
   justify-content: center;
 }

 .profile-image:not(:has(img))::before {
   content: '';
   position: absolute;
   width: 300px;
   height: 300px;
   border-radius: 50%;
   background-color: #ffffff;
   transition: background-color 0.3s ease;
 }

 .dark-theme .profile-image:not(:has(img))::before {
   background-color: #000000;
 }



 .profile-image img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center;
 }

 .cta-button {
   display: inline-block;
   background: #007aff;
   color: white;
   padding: 16px 32px;
   border-radius: 980px;
   text-decoration: none;
   font-weight: 400;
   font-size: 17px;
   margin-top: 40px;
   transition: all 0.3s ease;
   letter-spacing: -0.022em;
   border: none;
   cursor: pointer;
 }

 .cta-button:hover {
   background: #0051d5;
   transform: translateY(-1px);
   box-shadow: 0 8px 20px rgba(0, 122, 255, 0.3);
 }

 .dark-theme .cta-button {
   background: #0a84ff;
 }

 .dark-theme .cta-button:hover {
   background: #409cff;
 }

 /* Responsive Design */
 @media (max-width: 768px) {
   .hero-content {
     flex-direction: column;
     text-align: center;
     gap: 60px;
   }

   .hero-text h1 {
     font-size: 40px;
   }

   .hero-text .subtitle {
     font-size: 19px;
   }

   .nav-links {
     gap: 30px;
   }

   .nav-links a {
     font-size: 16px;
   }

   .profile-image {
     width: 240px;
     height: 240px;
   }

   .profile-image::before {
     width: 220px;
     height: 220px;
   }
 }

 @media (max-width: 480px) {
   .nav-container {
     flex-direction: column;
     gap: 20px;
   }

   .hero-text h1 {
     font-size: 32px;
   }

   .hero-text .subtitle {
     font-size: 17px;
   }

   .hero-text .description {
     font-size: 17px;
   }

   .nav-links {
     gap: 20px;
   }

   .nav-links a {
     font-size: 15px;
   }
 }

 /* Section Styles */


 .section-title {
   font-size: 48px;
   font-weight: 600;
   margin-bottom: 24px;
   text-align: center;
   color: #1d1d1f;
   letter-spacing: -0.005em;
 }

 .dark-theme .section-title {
   color: #f5f5f7;
 }

 .section-subtitle {
   font-size: 21px;
   color: #86868b;
   text-align: center;
   margin-bottom: 60px;
   max-width: 600px;
   margin-left: auto;
   margin-right: auto;
 }

 .dark-theme .section-subtitle {
   color: #a1a1a6;
 }

 /* Projects Section */
 .projects-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
   gap: 40px;
 }

 .project-card {
   background: #f5f5f7;
   border-radius: 16px;
   overflow: hidden;
   transition: transform 0.3s ease, box-shadow 0.3s ease;
   cursor: pointer;
   animation: slideInUp 0.6s ease forwards;
 }


 .dark-theme .project-card {
   background: #1c1c1e;
 }

 .project-card:hover {
   transform: translateY(-8px);
   box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
 }

 .project-image {
   width: 100%;
   height: 200px;
   background: linear-gradient(135deg, #007aff, #5ac8fa);
   display: flex;
   align-items: center;
   justify-content: center;
   color: white;
   font-size: 48px;
   font-weight: 300;
 }

 .project-image img {
   width: 100%;
   height: 200px;
 }

 .project-content {
   padding: 32px;
 }

 .project-title {
   font-size: 21px;
   font-weight: 600;
   margin-bottom: 12px;
   color: #1d1d1f;
 }

 .dark-theme .project-title {
   color: #f5f5f7;
 }

 .project-description {
   font-size: 17px;
   line-height: 1.4211;
   color: #86868b;
   margin-bottom: 20px;
 }

 .dark-theme .project-description {
   color: #a1a1a6;
 }

 .project-tech {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
   margin-bottom: 20px;
 }

 .tech-tag {
   background: #e5e5ea;
   color: #1d1d1f;
   padding: 6px 12px;
   border-radius: 20px;
   font-size: 13px;
   font-weight: 500;
 }

 .dark-theme .tech-tag {
   background: #39393d;
   color: #f5f5f7;
 }

 .project-links {
   display: flex;
   gap: 16px;
 }

 .project-link {
   color: #007aff;
   text-decoration: none;
   font-weight: 500;
   font-size: 17px;
   transition: color 0.3s ease;
 }

 .project-link:hover {
   color: #0051d5;
 }

 .dark-theme .project-link {
   color: #2997ff;
 }

 .dark-theme .project-link:hover {
   color: #409cff;
 }

 /* Research Section */
 .research-item {
   background: #f5f5f7;
   padding: 40px;
   border-radius: 16px;
   margin-bottom: 32px;
   transition: transform 0.3s ease;
   animation: slideInUp 0.6s ease forwards;
 }

 .research-item:nth-child(1) {
   animation-delay: 0.1s;
 }

 .research-item:nth-child(2) {
   animation-delay: 0.2s;
 }

 .research-item:nth-child(3) {
   animation-delay: 0.3s;
 }

 .dark-theme .research-item {
   background: #1c1c1e;
 }

 .research-item:hover {
   transform: translateY(-4px);
 }

 .research-title {
   font-size: 21px;
   font-weight: 600;
   color: #1d1d1f;
   margin-bottom: 12px;
 }

 .dark-theme .research-title {
   color: #f5f5f7;
 }

 .research-authors {
   font-size: 17px;
   color: #007aff;
   margin-bottom: 12px;
 }

 .research-venue {
   font-size: 15px;
   color: #86868b;
   margin-bottom: 16px;
 }

 .dark-theme .research-venue {
   color: #a1a1a6;
 }

 .research-description {
   font-size: 17px;
   line-height: 1.4211;
   color: #1d1d1f;
 }

 .dark-theme .research-description {
   color: #f5f5f7;
 }

 .research-links {
   display: flex;
   gap: 16px;
   margin-top: 16px;
 }

 @media (max-width: 768px) {
   .projects-grid {
     grid-template-columns: 1fr;
   }
 }


 .experience-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
   gap: 30px;
   margin-bottom: 60px;
 }

 .experience-card {
  background: #f5f5f7;
  border: 1px solid #d2d2d7;
  border-radius: 20px;
  padding: 30px;
  transition: all 0.3s ease;
  backdrop-filter: none;
}

 .experience-card:hover {
  transform: translateY(-5px);
  background: #ffffff;
  border-color: #c7c7cc;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

 .card-header {
   display: flex;
   align-items: center;
   margin-bottom: 20px;
 }

 .card-icon {
   width: 50px;
   height: 50px;
   border-radius: 12px;
   display: flex;
   align-items: center;
   justify-content: center;
   margin-right: 15px;
   font-size: 1.5rem;
 }

 .research-icon {
   background: linear-gradient(45deg, #4CAF50, #2196F3);
 }

 .project-icon {
   background: linear-gradient(45deg, #FF9800, #F44336);
 }

 .teaching-icon {
   background: linear-gradient(45deg, #9C27B0, #E91E63);
 }

 .fun-icon {
   background: linear-gradient(45deg, #00BCD4, #4CAF50);
 }

 .awards-icon {
   background: linear-gradient(45deg, #FFD700, #FFA500);
 }

 .card-title {
   font-size: 1.5rem;
   font-weight: 600;
   margin-bottom: 5px;
 }

 .card-subtitle {
  font-size: 0.9rem;
  color: #888;
  margin-bottom: 20px;
}

 .experience-list {
  list-style: none;
}

 .experience-item {
  margin-bottom: 15px;
  padding: 12px 0;
  border-bottom: 1px solid #e5e5ea;
}

 .experience-item:last-child {
  border-bottom: none;
}

 .item-title {
  font-weight: 600;
  margin-bottom: 5px;
  color: #1d1d1f;
}

 .item-subtitle {
  font-size: 0.85rem;
  color: #666;
}

 .awards-section {
   text-align: center;
   margin-top: 60px;
 }

 .awards-title {
   font-size: 2rem;
   font-weight: 600;
   margin-bottom: 30px;
   background: linear-gradient(45deg, #fff, #888);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
 }

 .awards-line {
   display: flex;
   justify-content: center;
   align-items: center;
   flex-wrap: wrap;
   gap: 20px;
   font-size: 1.1rem;
 }

 .award-item-inline {
   display: flex;
   align-items: center;
   gap: 8px;
   font-weight: 500;
 }

 .award-divider {
   color: #666;
   font-size: 1.2rem;
 }

 @media (max-width: 768px) {
  .section-title {
    font-size: 2.5rem;
  }

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

   .experience-card {
    padding: 20px;
  }
}

/* Dark theme overrides for Experience section */
.dark-theme .experience-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
}

.dark-theme .experience-card:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 20px 40px rgba(255, 255, 255, 0.1);
}

.dark-theme .experience-item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.dark-theme .item-title {
  color: #fff;
}

.dark-theme .item-subtitle {
  color: #aaa;
}