/* styles.css */
:root {
  --primary-color: #6366f1;
  --primary-dark: #4f46e5;
  --secondary-color: #ec4899;
  --accent-color: #06b6d4;
  --accent-primary-rgb: 99, 102, 241;
  --accent-secondary-rgb: 236, 72, 153;
  --accent-tertiary-rgb: 6, 182, 212;
  --text-primary: #1f2937;
  --text-secondary: #6b7280;
  --text-light: #9ca3af;
  --bg-primary: #ffffff;
  --bg-secondary: #f9fafb;
  --bg-dark: #111827;
  --border-color: #e5e7eb;
  --shadow-light: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --shadow-medium: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-large: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --font-primary: 'Product Sans', 'Inter', sans-serif;
  --font-secondary: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --section-padding: 5rem 0;
  --container-padding: 0 1rem;
  --border-radius: 0.75rem;
  --transition-fast: 0.2s ease;
  --transition-medium: 0.3s ease;
  --transition-slow: 0.5s ease;
  --safe-area-inset-top: env(safe-area-inset-top);
  --safe-area-inset-bottom: env(safe-area-inset-bottom);
  --safe-area-inset-left: env(safe-area-inset-left);
  --safe-area-inset-right: env(safe-area-inset-right);
}
[data-theme="dark"] {
  --text-primary: #f8fafc;
  --text-secondary: #e2e8f0;
  --text-light: #cbd5e1;
  --bg-primary: #0f172a;
  --bg-secondary: #1e293b;
  --bg-dark: #020617;
  --border-color: #475569;
  --shadow-light: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 1px 2px 0 rgba(0, 0, 0, 0.2);
  --shadow-medium: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
  --shadow-large: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
}
[data-theme="dark"] .navbar {
  background: rgba(15, 23, 42, 0.95);
  border-bottom: 1px solid var(--border-color);
}
[data-theme="dark"] #particles-js {
  opacity: 0.25;
}
[data-theme="dark"] .timeline-date {
  background: var(--bg-primary);
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
}
[data-theme="dark"] .publication-venue {
  color: var(--text-secondary);
}
[data-theme="dark"] .tag {
  background: var(--bg-primary);
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
}
[data-theme="dark"] .feature {
  background: var(--bg-primary);
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
}
[data-theme="dark"] .tech-tag {
  background: var(--bg-primary);
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
}
[data-theme="dark"] .achievement {
  background: var(--primary-color);
  color: white;
}
[data-theme="dark"] .gpa {
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  color: white;
}
[data-theme="dark"] h1 {
  background: linear-gradient(135deg, var(--text-primary), var(--primary-color));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
[data-theme="dark"] .hero-subtitle {
  color: var(--text-secondary);
}
[data-theme="dark"] .hero-description {
  color: var(--text-secondary);
}
[data-theme="dark"] .section-subtitle {
  color: var(--text-secondary);
}
[data-theme="dark"] .timeline-content h4 {
  color: var(--text-secondary);
}
[data-theme="dark"] .contact-details a {
  color: var(--text-secondary);
}
[data-theme="dark"] .contact-details a:hover {
  color: var(--primary-color);
}
[data-theme="dark"] .profile-card {
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
}
[data-theme="dark"] .stat-item {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-color);
}
[data-theme="dark"] .stat-item:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--primary-color);
}
[data-theme="dark"] .skill-category-card {
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
}
[data-theme="dark"] .skill-category-card:hover {
  border-color: var(--primary-color);
}
[data-theme="dark"] .skill-item {
  border-bottom: 1px solid var(--border-color);
}
[data-theme="dark"] .education-card-modern {
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
}
[data-theme="dark"] .education-card-modern:hover {
  border-color: var(--primary-color);
}
[data-theme="dark"] .experience-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-color);
}
[data-theme="dark"] .experience-card:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--primary-color);
}
[data-theme="dark"] .highlight-item {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-color);
}
[data-theme="dark"] .highlight-item:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--primary-color);
}
[data-theme="dark"] .stat-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-color);
}
[data-theme="dark"] .stat-card:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--primary-color);
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
@media (hover: hover) and (pointer: fine) {
  body {
    cursor: none;
  }
  a, button, [role="button"], label, input, select, textarea,
  .btn, .nav-link, .social-link, .project-link, .floating-icon,
  .skill-category-card, .project-card, .experience-card, .cultural-card,
  .stat-card, .metric-card, .cert-card, .gallery-item, .clickable-image {
    cursor: none;
  }
}
.custom-cursor {
  position: fixed;
  width: 36px;
  height: 36px;
  border: 2px solid var(--primary-color);
  border-radius: 50%;
  pointer-events: none;
  z-index: 99999;
  transform: translate(-50%, -50%);
  transition: width 0.25s ease, height 0.25s ease, border-color 0.25s ease, opacity 0.25s ease;
  mix-blend-mode: normal;
  will-change: transform;
  display: none;
}
.cursor-dot {
  position: fixed;
  width: 6px;
  height: 6px;
  background: var(--primary-color);
  border-radius: 50%;
  pointer-events: none;
  z-index: 99999;
  transform: translate(-50%, -50%);
  will-change: transform;
  transition: width 0.2s ease, height 0.2s ease, background 0.2s ease;
  display: none;
}
@media (hover: hover) and (pointer: fine) {
  .custom-cursor,
  .cursor-dot {
    display: block;
  }
}
.custom-cursor.cursor-hover {
  width: 56px;
  height: 56px;
  border-color: var(--secondary-color);
  background: rgba(var(--accent-primary-rgb), 0.08);
}
.cursor-dot.cursor-hover {
  width: 4px;
  height: 4px;
  background: var(--secondary-color);
}
.custom-cursor.cursor-click {
  width: 28px;
  height: 28px;
  background: rgba(var(--accent-primary-rgb), 0.15);
}
.scroll-progress-ring {
  position: fixed;
  bottom: 88px;
  left: 20px;
  width: 48px;
  height: 48px;
  z-index: 1002;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--bg-primary);
  box-shadow: var(--shadow-large);
  border: 1px solid var(--border-color);
  transition: transform var(--transition-medium), box-shadow var(--transition-medium);
}
.scroll-progress-ring:hover {
  transform: scale(1.1);
  box-shadow: 0 12px 30px rgba(var(--accent-primary-rgb), 0.3);
}
.scroll-progress-ring svg {
  position: absolute;
  top: 0;
  left: 0;
  transform: rotate(-90deg);
}
.spr-bg {
  fill: none;
  stroke: var(--border-color);
  stroke-width: 3;
}
.spr-fill {
  fill: none;
  stroke: url(#spr-gradient);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 125.66;
  stroke-dashoffset: 125.66;
  transition: stroke-dashoffset 0.1s linear;
  stroke: var(--primary-color);
}
.spr-icon {
  position: relative;
  z-index: 1;
  color: var(--primary-color);
  font-size: 0.8rem;
  transition: transform var(--transition-medium);
}
.scroll-progress-ring:hover .spr-icon {
  transform: translateY(-2px);
}
@media (max-width: 768px) {
  .scroll-progress-ring {
    bottom: 20px;
    left: 15px;
    width: 42px;
    height: 42px;
  }
}
.hero-blob {
  position: absolute;
  border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  filter: blur(60px);
  opacity: 0.12;
  pointer-events: none;
  z-index: 0;
  will-change: transform, border-radius;
}
.hero-blob-1 {
  width: 500px;
  height: 500px;
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  top: -100px;
  right: -80px;
  animation: blobMorph1 14s ease-in-out infinite;
}
.hero-blob-2 {
  width: 400px;
  height: 400px;
  background: linear-gradient(135deg, var(--accent-color), var(--primary-color));
  bottom: -80px;
  left: -60px;
  animation: blobMorph2 18s ease-in-out infinite;
}
@keyframes blobMorph1 {
  0%, 100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; transform: translate(0, 0) scale(1); }
  25% { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; transform: translate(-20px, 20px) scale(1.05); }
  50% { border-radius: 50% 60% 40% 70% / 40% 50% 60% 50%; transform: translate(10px, -15px) scale(0.95); }
  75% { border-radius: 70% 30% 60% 40% / 60% 40% 60% 30%; transform: translate(-10px, 10px) scale(1.02); }
}
@keyframes blobMorph2 {
  0%, 100% { border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; transform: translate(0, 0) scale(1); }
  33% { border-radius: 70% 30% 40% 60% / 60% 40% 50% 60%; transform: translate(15px, -20px) scale(1.08); }
  66% { border-radius: 30% 70% 60% 40% / 50% 60% 40% 70%; transform: translate(-10px, 15px) scale(0.92); }
}
[data-theme="dark"] .hero-blob {
  opacity: 0.2;
}
.section-divider {
  position: relative;
  height: 80px;
  overflow: hidden;
  z-index: 2;
  pointer-events: none;
}
.divider-wave {
  background: linear-gradient(135deg, var(--bg-secondary) 0%, transparent 100%);
}
.divider-wave::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80'%3E%3Cpath fill='%236366f1' fill-opacity='0.06' d='M0,40 C360,80 720,0 1080,40 C1260,60 1380,30 1440,40 L1440,80 L0,80 Z'/%3E%3Cpath fill='%23ec4899' fill-opacity='0.04' d='M0,60 C240,20 480,70 720,50 C960,30 1200,70 1440,55 L1440,80 L0,80 Z'/%3E%3C/svg%3E") no-repeat center/cover;
}
.divider-diagonal::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80'%3E%3Cpolygon fill='%236366f1' fill-opacity='0.05' points='0,0 1440,0 1440,80'/%3E%3Cpolygon fill='%2306b6d4' fill-opacity='0.04' points='0,80 1440,0 1440,80'/%3E%3C/svg%3E") no-repeat center/cover;
}
.hero-text {
  will-change: transform;
  transition: none;
}
.hero-image {
  will-change: transform;
  transition: none;
}
.skill-category-card.scroll-revealed .skills-list {
  max-height: 350px !important;
  opacity: 1 !important;
}
.skill-category-card.scroll-revealed .skill-fill {
  width: var(--width) !important;
}
.skill-category-card.scroll-revealed .progress-circle {
  stroke-dashoffset: 0;
}
.section-header {
  text-align: center;
  margin-bottom: clamp(3rem, 6vw, 5rem);
  padding: 0 1rem;
  perspective: 800px;
}
.section-header.aos-animate .section-title {
  animation: headerReveal 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes headerReveal {
  from {
    opacity: 0;
    transform: rotateX(20deg) translateY(20px);
  }
  to {
    opacity: 1;
    transform: rotateX(0deg) translateY(0);
  }
}
.projects-grid,
.experience-grid,
.cultural-grid,
.research-metrics,
.research-areas-grid,
.skills-container {
  perspective: 1200px;
}
.skill-category-card,
.stat-card,
.cert-card {
  transform-style: preserve-3d;
}
.btn {
  transition: var(--transition-medium), box-shadow var(--transition-medium);
}
@media (max-width: 768px) {
  .theme-toggle {
    bottom: 80px !important;
  }
}
html {
  scroll-behavior: smooth;
  font-size: 16px;
  overflow-x: hidden;
  width: 100%;
  height: 100%;
}
body {
  font-family: var(--font-primary);
  line-height: 1.6;
  color: var(--text-primary);
  background-color: var(--bg-primary);
  overflow-x: hidden;
  width: 100%;
  min-height: 100vh;
  position: relative;
  -webkit-overflow-scrolling: touch;
  margin: 0;
  padding: 0;
  padding-top: var(--safe-area-inset-top);
  padding-bottom: var(--safe-area-inset-bottom);
  padding-left: var(--safe-area-inset-left);
  padding-right: var(--safe-area-inset-right);
}
#particles-js {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  opacity: 0.6;
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-primary);
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: 1rem;
  letter-spacing: -0.02em;
}
h1 { 
  font-size: clamp(2.5rem, 5vw, 4rem); 
  font-weight: 700;
  background: linear-gradient(135deg, var(--text-primary), var(--primary-color));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
h2 { 
  font-size: clamp(2rem, 4vw, 3rem); 
  font-weight: 600;
  position: relative;
}
h2::after {
  content: '';
  position: absolute;
  bottom: -0.5rem;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  border-radius: 2px;
}
h3 { 
  font-size: clamp(1.5rem, 3vw, 2rem); 
  color: var(--primary-color);
}
h4 { 
  font-size: clamp(1.25rem, 2.5vw, 1.5rem); 
  font-family: var(--font-secondary);
}
p {
  margin-bottom: 1rem;
  color: var(--text-secondary);
}
a {
  text-decoration: none;
  color: inherit;
  transition: var(--transition-fast);
}
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--container-padding);
}
@media (hover: none) and (pointer: coarse) {
  .btn,
  .social-link,
  .project-link,
  .nav-link {
    min-height: 44px;
    min-width: 44px;
  }
  .skill-tag:hover,
  .btn:hover,
  .social-link:hover {
    transform: none;
  }
  .skill-tag:active,
  .btn:active,
  .social-link:active {
    transform: scale(0.95);
  }
}
.gradient-text {
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  line-height: 1.1;
}
.name-first,
.name-last {
  white-space: nowrap;
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: clamp(0.625rem, 2vw, 0.875rem) clamp(1.25rem, 3vw, 1.75rem);
  border-radius: var(--border-radius);
  font-weight: 500;
  text-decoration: none;
  transition: var(--transition-medium);
  cursor: pointer;
  border: none;
  font-family: inherit;
  font-size: clamp(0.875rem, 2vw, 1rem);
  min-height: 44px; 
  position: relative;
  overflow: hidden;
}
.btn-primary {
  background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
  color: white;
  box-shadow: var(--shadow-medium);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-large);
}
.btn-secondary {
  background: transparent;
  color: var(--primary-color);
  border: 2px solid var(--primary-color);
}
.btn-secondary:hover {
  background: var(--primary-color);
  color: white;
  transform: translateY(-2px);
}
.btn-accent {
  background: linear-gradient(135deg, var(--secondary-color) 0%, #d63384 100%);
  border: 2px solid var(--secondary-color);
  color: white;
  font-weight: 600;
  transition: all 0.3s ease;
}
.btn-accent:hover {
  background: linear-gradient(135deg, #d63384 0%, #b02a5b 100%);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(var(--accent-secondary-rgb), 0.4);
  color: white;
}
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-color);
  z-index: 1000;
  transition: var(--transition-medium);
}
.nav-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 4rem;
}
.nav-logo a {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--primary-color);
}
.nav-menu {
  display: flex;
  gap: 2rem;
}
.nav-link {
  color: var(--text-primary);
  font-weight: 500;
  position: relative;
  transition: var(--transition-fast);
}
.nav-link:hover {
  color: var(--primary-color);
}
.nav-link::after {
  content: '';
  position: absolute;
  bottom: -0.5rem;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--primary-color);
  transition: var(--transition-fast);
}
.nav-link:hover::after,
.nav-link.active::after {
  width: 100%;
}
.nav-link.active {
  color: var(--primary-color);
}
.hamburger {
  display: none;
  flex-direction: column;
  cursor: pointer;
  gap: 0.25rem;
}
.hamburger span {
  width: 1.5rem;
  height: 2px;
  background: var(--text-primary);
  transition: var(--transition-fast);
}
.hero {
  min-height: 100vh;
  min-height: 100dvh; 
  display: flex;
  align-items: center;
  position: relative;
  padding: max(2rem, calc(4rem + var(--safe-area-inset-top))) 0 2rem 0;
  background: 
    linear-gradient(135deg, rgba(var(--accent-primary-rgb), 0.08), rgba(var(--accent-secondary-rgb), 0.08)),
    radial-gradient(circle at 20% 80%, rgba(var(--accent-tertiary-rgb), 0.1) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(var(--accent-primary-rgb), 0.1) 0%, transparent 50%);
  will-change: transform;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="rgba(99,102,241,0.1)" stroke-width="0.5"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
  animation: heroGridMove 30s linear infinite;
  opacity: 0.3;
  z-index: 0;
}
@keyframes heroGridMove {
  0% { transform: translate(0, 0); }
  100% { transform: translate(100px, 100px); }
}
.hero-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--container-padding);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}
.hero-title {
  margin-bottom: 1rem;
}
.hero-subtitle {
  font-size: 1.5rem;
  color: var(--text-secondary);
  margin-bottom: 1rem;
}
.hero-description {
  font-size: 1.125rem;
  margin-bottom: 2rem;
  max-width: 500px;
}
.hero-stats {
  display: flex;
  gap: 2rem;
  margin-bottom: 2rem;
}
.stat {
  text-align: center;
}
.stat-number {
  display: block;
  font-size: 2rem;
  font-weight: 700;
  color: var(--primary-color);
}
.stat-label {
  font-size: 0.875rem;
  color: var(--text-light);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.hero-buttons {
  display: flex;
  gap: clamp(0.75rem, 2vw, 1.5rem);
  flex-wrap: wrap;
  margin-top: 2rem;
}
.hero-image {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.hero-image-parallax {
  display: flex;
  justify-content: center;
  align-items: center;
  will-change: transform;
}
.hero-text-parallax {
  will-change: transform;
}
.image-container {
  width: 350px;
  height: 350px;
  border-radius: 20px;
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 
    0 20px 40px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.tech-grid {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    linear-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
  background-size: 20px 20px;
  animation: gridMove 20s linear infinite;
  opacity: 0.3;
}
@keyframes gridMove {
  0% { transform: translate(0, 0); }
  100% { transform: translate(20px, 20px); }
}
.code-animation {
  position: absolute;
  top: 10%;
  left: 10%;
  width: 80%;
  height: 30%;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.8);
  z-index: 2;
}
.code-line {
  opacity: 0;
  transform: translateX(-20px);
  animation: codeType 2s ease-out infinite;
  animation-delay: var(--delay);
  margin-bottom: 0.3rem;
  background: rgba(0, 0, 0, 0.2);
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  border-left: 2px solid var(--accent-color);
}
@keyframes codeType {
  0%, 20% { opacity: 0; transform: translateX(-20px); }
  25%, 75% { opacity: 1; transform: translateX(0); }
  80%, 100% { opacity: 0; transform: translateX(20px); }
}
.floating-elements {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 3;
}
.floating-icon {
  position: absolute;
  width: 50px;
  height: 50px;
  background: rgba(255, 255, 255, 0.22);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.2rem;
  animation: techFloat 4s ease-in-out infinite;
  animation-delay: var(--delay);
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
  cursor: pointer;
}
.tech-icon {
  flex-direction: column;
  gap: 0.2rem;
}
.tech-label {
  font-size: 0.6rem;
  font-weight: 600;
  opacity: 0.8;
  font-family: var(--font-mono);
}
.floating-icon:hover {
  transform: scale(1.1);
  background: rgba(255, 255, 255, 0.25);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}
.floating-icon:nth-child(1) { top: 15%; left: 15%; }
.floating-icon:nth-child(2) { top: 25%; right: 10%; }
.floating-icon:nth-child(3) { bottom: 30%; left: 10%; }
.floating-icon:nth-child(4) { bottom: 15%; right: 20%; }
.floating-icon:nth-child(5) { top: 50%; left: 5%; }
@keyframes techFloat {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  25% { transform: translateY(-15px) rotate(2deg); }
  50% { transform: translateY(-10px) rotate(-1deg); }
  75% { transform: translateY(-20px) rotate(1deg); }
}
.avatar-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 80px;
  z-index: 4;
}
.avatar-content {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--accent-color), var(--primary-color));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 2rem;
  position: relative;
  z-index: 2;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}
.avatar-ring {
  position: absolute;
  top: -10px;
  left: -10px;
  width: calc(100% + 20px);
  height: calc(100% + 20px);
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  animation: avatarRotate 10s linear infinite;
}
.pulse-ring {
  position: absolute;
  top: -20px;
  left: -20px;
  width: calc(100% + 40px);
  height: calc(100% + 40px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  animation: pulse 2s ease-in-out infinite;
}
@keyframes avatarRotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 0.3; }
  50% { transform: scale(1.1); opacity: 0.1; }
}
.data-viz {
  position: absolute;
  bottom: 10%;
  right: 10%;
  display: flex;
  align-items: end;
  gap: 3px;
  height: 40px;
  z-index: 2;
}
.chart-bar {
  width: 4px;
  height: var(--height);
  background: linear-gradient(to top, var(--accent-color), rgba(255, 255, 255, 0.8));
  border-radius: 2px;
  animation: chartGrow 2s ease-out infinite;
  animation-delay: var(--delay);
}
@keyframes chartGrow {
  0%, 20% { transform: scaleY(0.1); }
  25%, 75% { transform: scaleY(1); }
  80%, 100% { transform: scaleY(0.3); }
}
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-20px); }
}
.scroll-indicator {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  animation: bounce 2s infinite;
}
.scroll-arrow {
  width: 2px;
  height: 30px;
  background: var(--primary-color);
  position: relative;
}
.scroll-arrow::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: -4px;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--primary-color);
  border-bottom: 2px solid var(--primary-color);
  transform: rotate(45deg);
}
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateX(-50%) translateY(0); }
  40% { transform: translateX(-50%) translateY(-10px); }
  60% { transform: translateX(-50%) translateY(-5px); }
}
section {
  position: relative;
  z-index: 1;
  margin-bottom: 2rem;
}
.section-title {
  margin-bottom: 1rem;
}
.section-subtitle {
  font-size: clamp(1rem, 2.5vw, 1.125rem);
  color: var(--text-light);
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.6;
}
.about {
  padding: clamp(3rem, 8vw, 6rem) 0;
  background: 
    linear-gradient(135deg, var(--bg-secondary) 0%, rgba(var(--accent-primary-rgb), 0.02) 100%),
    radial-gradient(circle at 70% 30%, rgba(var(--accent-tertiary-rgb), 0.05) 0%, transparent 50%);
  margin-top: -2rem;
  position: relative;
  overflow: hidden;
}
.about::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60"><circle cx="30" cy="30" r="1" fill="rgba(99,102,241,0.1)"/></svg>');
  background-size: 60px 60px;
  animation: dotPattern 25s linear infinite;
  opacity: 0.4;
  z-index: 0;
}
@keyframes dotPattern {
  0% { transform: translate(0, 0); }
  100% { transform: translate(60px, 60px); }
}
.about-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: start;
  position: relative;
  z-index: 1;
}
.profile-card {
  background: var(--bg-primary);
  border-radius: 24px;
  padding: 2.5rem;
  box-shadow: 
    0 20px 40px rgba(0, 0, 0, 0.1),
    0 0 0 1px rgba(255, 255, 255, 0.1);
  border: 1px solid var(--border-color);
  position: relative;
  overflow: hidden;
  transition: all var(--transition-medium);
}
.profile-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(var(--accent-primary-rgb), 0.03), rgba(var(--accent-secondary-rgb), 0.03));
  pointer-events: none;
}
.profile-card:hover {
  transform: translateY(-8px);
  box-shadow: 
    0 30px 60px rgba(0, 0, 0, 0.15),
    0 0 0 1px rgba(var(--accent-primary-rgb), 0.1);
}
.profile-header {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 2rem;
  position: relative;
  z-index: 2;
}
.profile-avatar {
  position: relative;
  flex-shrink: 0;
}
.avatar-ring {
  position: absolute;
  top: -8px;
  left: -8px;
  right: -8px;
  bottom: -8px;
  border: 2px solid var(--primary-color);
  border-radius: 50%;
  animation: avatarRotate 10s linear infinite;
  opacity: 0.6;
}
.avatar-pulse {
  position: absolute;
  top: -12px;
  left: -12px;
  right: -12px;
  bottom: -12px;
  border: 1px solid rgba(var(--accent-primary-rgb), 0.3);
  border-radius: 50%;
  animation: avatarPulse 3s ease-in-out infinite;
}
.profile-avatar > picture {
  display: block;
  line-height: 0;
}
.avatar-image {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
  border: 3px solid var(--bg-primary);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  filter: brightness(1.1) contrast(1.05);
}
.profile-avatar:hover .avatar-image {
  transform: scale(1.08);
  filter: brightness(1.2) contrast(1.1);
  box-shadow: 
    0 0 30px rgba(var(--accent-primary-rgb), 0.4),
    0 0 60px rgba(var(--accent-primary-rgb), 0.2),
    0 0 90px rgba(var(--accent-primary-rgb), 0.1),
    0 8px 25px rgba(0, 0, 0, 0.15);
}
@keyframes avatarRotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes avatarPulse {
  0%, 100% { transform: scale(1); opacity: 0.3; }
  50% { transform: scale(1.05); opacity: 0.1; }
}
.profile-info {
  flex: 1;
}
.profile-name {
  margin: 0 0 0.25rem 0;
  font-size: 1.5rem;
  font-weight: 700;
  background: linear-gradient(135deg, var(--text-primary), var(--primary-color));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.profile-title {
  margin: 0 0 1rem 0;
  color: var(--text-secondary);
  font-size: 1rem;
  font-weight: 500;
}
.profile-badges {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
  transition: all var(--transition-medium);
  cursor: pointer;
}
.badge-primary {
  background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
  color: white;
  box-shadow: 0 4px 12px rgba(var(--accent-primary-rgb), 0.3);
}
.badge-secondary {
  background: linear-gradient(135deg, var(--secondary-color), var(--primary-color));
  color: white;
  box-shadow: 0 4px 12px rgba(var(--accent-secondary-rgb), 0.3);
}
.badge:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 8px 20px rgba(var(--accent-primary-rgb), 0.4);
}
.profile-description {
  margin-bottom: 2rem;
  position: relative;
  z-index: 2;
}
.profile-description p {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text-secondary);
  margin: 0;
}
.profile-actions {
  display: flex;
  gap: 1rem;
  margin-bottom: 2rem;
  position: relative;
  z-index: 2;
}
.profile-actions .btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.875rem 1.5rem;
  font-weight: 600;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}
.profile-actions .btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.6s ease;
}
.profile-actions .btn:hover::before {
  left: 100%;
}
.profile-actions .btn i {
  font-size: 1rem;
  transition: transform 0.3s ease;
}
.profile-actions .btn:hover i {
  transform: scale(1.1);
}
.profile-actions .btn span {
  font-size: 0.95rem;
}
.profile-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  position: relative;
  z-index: 2;
}
.stat-item {
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 1.25rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  transition: all var(--transition-medium);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.stat-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(var(--accent-primary-rgb), 0.1), transparent);
  transition: left 0.6s ease;
}
.stat-item:hover::before {
  left: 100%;
}
.stat-item:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 12px 30px rgba(var(--accent-primary-rgb), 0.2);
  border-color: var(--primary-color);
  background: rgba(255, 255, 255, 0.8);
}
.stat-icon {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.125rem;
  flex-shrink: 0;
  transition: all var(--transition-medium);
}
.stat-item:hover .stat-icon {
  transform: scale(1.1) rotate(5deg);
  box-shadow: 0 8px 20px rgba(var(--accent-primary-rgb), 0.4);
}
.stat-content {
  flex: 1;
}
.stat-number {
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--primary-color);
  margin-bottom: 0.125rem;
  transition: all var(--transition-medium);
}
.stat-item:hover .stat-number {
  transform: scale(1.05);
}
.stat-label {
  font-size: 0.875rem;
  color: var(--text-secondary);
  font-weight: 500;
  margin: 0;
}
.skills-section {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.skills-header {
  text-align: center;
  margin-bottom: 1rem;
}
.skills-header h3 {
  margin: 0 0 0.5rem 0;
  font-size: 1.75rem;
  font-weight: 700;
  background: linear-gradient(135deg, var(--text-primary), var(--primary-color));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.skills-header p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.95rem;
}
.skills-container {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.skill-category-card {
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  padding: 1.5rem;
  transition: all var(--transition-medium);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.skill-category-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(var(--accent-primary-rgb), 0.02), rgba(var(--accent-secondary-rgb), 0.02));
  opacity: 0;
  transition: opacity var(--transition-medium);
}
.skill-category-card:hover::before {
  opacity: 1;
}
.skill-category-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  border-color: var(--primary-color);
}
.skill-category-card:hover .skills-list {
  max-height: 300px;
  opacity: 1;
}
.category-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  position: relative;
  z-index: 2;
}
.category-icon {
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.25rem;
  flex-shrink: 0;
  transition: all var(--transition-medium);
}
.skill-category-card:hover .category-icon {
  transform: scale(1.1) rotate(5deg);
  box-shadow: 0 8px 20px rgba(var(--accent-primary-rgb), 0.4);
}
.category-info {
  flex: 1;
}
.category-info h4 {
  margin: 0 0 0.25rem 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-primary);
}
.skill-count {
  font-size: 0.875rem;
  color: var(--text-secondary);
  font-weight: 500;
}
.category-progress {
  position: relative;
}
.progress-ring {
  position: relative;
  width: 60px;
  height: 60px;
}
.progress-svg {
  transform: rotate(-90deg);
}
.progress-circle-bg {
  fill: none;
  stroke: var(--border-color);
  stroke-width: 3;
}
.progress-circle {
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 157;
  stroke-dashoffset: 157;
  transition: stroke-dashoffset 1s ease-in-out;
}
.skill-category-card:hover .progress-circle {
  stroke-dashoffset: calc(157 - (157 * var(--progress)) / 100);
}
.progress-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--primary-color);
  text-align: center;
  line-height: 1;
  white-space: nowrap;
}
.skills-list {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: all 0.4s ease;
  margin-top: 1rem;
  position: relative;
  z-index: 2;
}
.skill-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--border-color);
}
.skill-item:last-child {
  border-bottom: none;
}
.skill-name {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-primary);
}
.skill-bar {
  width: 100px;
  height: 6px;
  background: var(--border-color);
  border-radius: 3px;
  overflow: hidden;
  position: relative;
}
.skill-fill {
  height: 100%;
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  border-radius: 3px;
  width: 0;
  transition: width 1s ease-in-out 0.2s;
  position: relative;
}
.skill-category-card:hover .skill-fill {
  width: var(--width);
}
.skill-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  animation: skillShimmer 2s ease-in-out infinite;
}
@keyframes skillShimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
.education-card-modern {
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  padding: 2rem;
  margin-top: 2rem;
  transition: all var(--transition-medium);
  position: relative;
  overflow: hidden;
}
.education-card-modern::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(var(--accent-primary-rgb), 0.03), rgba(var(--accent-tertiary-rgb), 0.03));
  opacity: 0;
  transition: opacity var(--transition-medium);
}
.education-card-modern:hover::before {
  opacity: 1;
}
.education-card-modern:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  border-color: var(--primary-color);
}
.education-header {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  position: relative;
  z-index: 2;
}
.education-icon {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, var(--accent-color), var(--primary-color));
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.5rem;
  flex-shrink: 0;
  transition: all var(--transition-medium);
}
.education-card-modern:hover .education-icon {
  transform: scale(1.05) rotate(5deg);
  box-shadow: 0 8px 20px rgba(var(--accent-tertiary-rgb), 0.4);
}
.education-content {
  flex: 1;
}
.education-content h4 {
  margin: 0 0 0.5rem 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-primary);
}
.education-content p {
  margin: 0 0 1.5rem 0;
  color: var(--text-secondary);
  font-size: 0.95rem;
}
.education-achievements {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.achievement-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem;
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  border-radius: 16px;
  color: white;
  min-width: 80px;
  transition: all var(--transition-medium);
}
.achievement-badge:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 20px rgba(var(--accent-primary-rgb), 0.4);
}
.gpa-score {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
}
.gpa-label {
  font-size: 0.75rem;
  font-weight: 500;
  opacity: 0.9;
}
.honor-badges {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.honor-badge {
  background: var(--accent-color);
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 600;
  transition: all var(--transition-medium);
}
.honor-badge:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(var(--accent-tertiary-rgb), 0.3);
}
.profile-image-container {
  position: relative;
  width: 200px;
  height: 200px;
  margin: 0 auto 2rem;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: var(--shadow-large);
  border: 3px solid var(--primary-color);
}
.profile-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform var(--transition-medium);
  position: relative;
  z-index: 1;
}
.profile-image-container:hover .profile-image {
  transform: scale(1.05);
}
.profile-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 3rem;
  position: relative;
  z-index: 1;
}
.profile-placeholder span {
  font-size: 0.8rem;
  font-weight: 500;
  margin-top: 0.5rem;
  text-align: center;
  opacity: 0.9;
}
.profile-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(var(--accent-primary-rgb), 0.9), rgba(var(--accent-secondary-rgb), 0.9));
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--transition-medium);
  z-index: 2;
  backdrop-filter: blur(2px);
}
.profile-overlay p {
  color: white;
  font-size: 0.9rem;
  text-align: center;
  padding: 1rem;
  margin: 0;
  font-weight: 600;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  line-height: 1.4;
}
.profile-image-container:hover .profile-overlay {
  opacity: 1;
}
.education-card {
  background: var(--bg-primary);
  padding: 2rem;
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-medium);
  border: 1px solid var(--border-color);
}
.card-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
  color: var(--primary-color);
}
.card-header i {
  font-size: 1.5rem;
}
.education-item h5 {
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}
.education-item p {
  margin-bottom: 1rem;
}
.gpa {
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  color: white;
  padding: 0.25rem 0.75rem;
  border-radius: 1rem;
  font-size: 0.875rem;
  font-weight: 600;
}
.achievements {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}
.achievement {
  background: var(--accent-color);
  color: white;
  padding: 0.25rem 0.75rem;
  border-radius: 1rem;
  font-size: 0.75rem;
  font-weight: 500;
}
.experience {
  padding: var(--section-padding) 0;
  position: relative;
  background: linear-gradient(135deg, rgba(var(--accent-primary-rgb), 0.02), rgba(var(--accent-secondary-rgb), 0.02));
}
.experience::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    radial-gradient(circle at 25% 25%, rgba(var(--accent-primary-rgb), 0.1) 0%, transparent 50%),
    radial-gradient(circle at 75% 75%, rgba(var(--accent-secondary-rgb), 0.1) 0%, transparent 50%);
  pointer-events: none;
}
.experience-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin-bottom: 4rem;
  position: relative;
  z-index: 2;
}
.experience-card {
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  padding: 2rem;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}
.experience-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(var(--accent-primary-rgb), 0.1), transparent);
  transition: left 0.6s ease;
}
.experience-card:hover::before {
  left: 100%;
}
.experience-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(var(--accent-primary-rgb), 0.15);
  border-color: var(--primary-color);
}
.experience-card.featured {
  background: linear-gradient(135deg, rgba(var(--accent-primary-rgb), 0.05), rgba(var(--accent-secondary-rgb), 0.05));
  border: 2px solid var(--primary-color);
}
.experience-card.featured::after {
  content: 'Featured';
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  color: white;
  padding: 0.25rem 0.75rem;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
}
.experience-header {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}
.company-logo {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.5rem;
  flex-shrink: 0;
  transition: all 0.3s ease;
}
.experience-card:hover .company-logo {
  transform: scale(1.1) rotate(5deg);
  box-shadow: 0 8px 20px rgba(var(--accent-primary-rgb), 0.3);
}
.experience-meta {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}
.company-info h3 {
  margin: 0 0 0.25rem 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-primary);
}
.company-name {
  font-size: 0.9rem;
  color: var(--text-secondary);
  font-weight: 500;
}
.experience-duration {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.25rem;
}
.duration-badge {
  padding: 0.375rem 0.75rem;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}
.duration-badge.current {
  background: linear-gradient(135deg, #10b981, #059669);
  color: white;
}
.duration-badge.past {
  background: rgba(107, 114, 128, 0.1);
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
}
.duration-length {
  font-size: 0.75rem;
  color: var(--text-light);
  font-weight: 500;
}
.role-title {
  margin-bottom: 1.5rem;
}
.role-title h4 {
  margin: 0 0 0.75rem 0;
  color: var(--text-primary);
  font-size: 1.125rem;
  font-weight: 600;
}
.role-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.role-tag {
  background: var(--bg-secondary);
  color: var(--text-secondary);
  padding: 0.25rem 0.75rem;
  border-radius: 1rem;
  font-size: 0.75rem;
  font-weight: 500;
  border: 1px solid var(--border-color);
}
.cultural-highlights {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.highlight-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem;
  background: var(--bg-secondary);
  border-radius: 12px;
  border: 1px solid var(--border-color);
  transition: all 0.3s ease;
}
.highlight-item:hover {
  transform: translateX(5px);
  background: var(--primary-color);
  color: white;
  border-color: var(--primary-color);
}
.highlight-icon {
  width: 40px;
  height: 40px;
  background: var(--primary-color);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.125rem;
  flex-shrink: 0;
  transition: all 0.3s ease;
}
.highlight-item:hover .highlight-icon {
  background: white;
  color: var(--primary-color);
  transform: scale(1.1);
}
.highlight-content h5 {
  margin: 0 0 0.25rem 0;
  color: var(--text-primary);
  font-size: 0.875rem;
  font-weight: 600;
}
.highlight-content p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.875rem;
  line-height: 1.4;
}
.highlight-item:hover .highlight-content h5,
.highlight-item:hover .highlight-content p {
  color: white;
}
.project-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}
.gallery-item {
  position: relative;
  aspect-ratio: 1;
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg-secondary);
  transition: all 0.3s ease;
  cursor: pointer;
}
.gallery-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}
.gallery-item > picture {
  display: block;
  width: 100%;
  height: 100%;
}
.gallery-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.3s ease;
}
.gallery-item:hover .gallery-image {
  transform: scale(1.1);
}
.gallery-label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
  color: white;
  padding: 1rem 0.75rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-align: center;
  transform: translateY(100%);
  transition: all 0.3s ease;
}
.gallery-item:hover .gallery-label {
  transform: translateY(0);
}
.gallery-link {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: inherit;
  position: relative;
}
.gallery-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: all 0.3s ease;
  border-radius: 12px;
}
.gallery-overlay i {
  font-size: 2rem;
  color: white;
}
.gallery-item:hover .gallery-overlay {
  opacity: 1;
}
.certifications-row {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  padding: 0.5rem 0;
  scroll-snap-type: x mandatory;
}
.certifications-row::-webkit-scrollbar {
  height: 8px;
}
.certifications-row::-webkit-scrollbar-thumb {
  background: var(--bg-tertiary);
  border-radius: 8px;
}
.cert-card {
  min-width: 320px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  scroll-snap-align: start;
}
.cert-title {
  margin: 0 0 0.25rem 0;
  font-size: 1rem;
}
.cert-meta {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.875rem;
}
.cert-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.75rem;
}
.certificate-thumbnail::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, transparent 30%, rgba(var(--accent-primary-rgb), 0.1) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform 0.6s ease;
}
.gallery-item:hover .certificate-thumbnail::before {
  transform: translateX(100%);
}
.certificate-icon {
  margin-bottom: 0.75rem;
  position: relative;
  z-index: 1;
}
.certificate-icon i {
  font-size: 2.5rem;
  color: var(--primary-color);
  filter: drop-shadow(0 2px 4px rgba(var(--accent-primary-rgb), 0.3));
  transition: all 0.3s ease;
}
.certificate-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 1;
}
.certificate-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.25rem;
  text-align: center;
  line-height: 1.2;
}
.certificate-subtitle {
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--text-secondary);
  text-align: center;
  line-height: 1.2;
}
.gallery-item:hover .certificate-thumbnail {
  background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
  border-color: var(--primary-dark);
  transform: scale(1.05);
  box-shadow: 0 8px 25px rgba(var(--accent-primary-rgb), 0.3);
}
.gallery-item:hover .certificate-icon i {
  color: white;
  transform: scale(1.1);
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}
.gallery-item:hover .certificate-title,
.gallery-item:hover .certificate-subtitle {
  color: white;
}
.certificate-item {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-secondary);
  border: 2px solid var(--border-color);
  border-radius: 12px;
  transition: all 0.3s ease;
  padding: 1rem;
}
.certificate-item:hover {
  border-color: var(--primary-color);
  box-shadow: 0 8px 20px rgba(var(--accent-primary-rgb), 0.15);
  transform: translateY(-2px);
}
.certificate-button-container {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
  max-width: 200px;
}
.certificate-button-container .btn {
  width: 100%;
  justify-content: center;
  font-size: 0.8rem;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  transition: all 0.3s ease;
}
.certificate-button-container .btn i {
  margin-right: 0.5rem;
  font-size: 0.9rem;
}
.certificate-button-container .btn-primary {
  background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
  border: none;
  color: white;
  font-weight: 600;
}
.certificate-button-container .btn-primary:hover {
  background: linear-gradient(135deg, var(--primary-dark) 0%, #3730a3 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(var(--accent-primary-rgb), 0.4);
}
.certificate-button-container .btn-secondary {
  background: transparent;
  border: 2px solid var(--primary-color);
  color: var(--primary-color);
  font-weight: 500;
}
.certificate-button-container .btn-secondary:hover {
  background: var(--primary-color);
  color: white;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(var(--accent-primary-rgb), 0.2);
}
[data-theme="dark"] .certificate-item {
  background: var(--bg-secondary);
  border-color: var(--border-color);
}
[data-theme="dark"] .certificate-item:hover {
  border-color: var(--primary-color);
  box-shadow: 0 8px 20px rgba(var(--accent-primary-rgb), 0.25);
}
[data-theme="dark"] .certificate-button-container .btn-secondary {
  color: var(--primary-color);
  border-color: var(--primary-color);
}
[data-theme="dark"] .certificate-button-container .btn-secondary:hover {
  background: var(--primary-color);
  color: white;
}
.experience-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
  position: relative;
  z-index: 2;
}
.stat-card {
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 2rem;
  text-align: center;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}
.stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(var(--accent-primary-rgb), 0.1), transparent);
  transition: left 0.6s ease;
}
.stat-card:hover::before {
  left: 100%;
}
.stat-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 30px rgba(var(--accent-primary-rgb), 0.15);
  border-color: var(--primary-color);
}
.stat-card .stat-icon {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.5rem;
  margin: 0 auto 1rem;
  transition: all 0.3s ease;
}
.stat-card:hover .stat-icon {
  transform: scale(1.1) rotate(5deg);
}
.stat-card .stat-content h4 {
  margin: 0 0 0.5rem 0;
  font-size: 2rem;
  font-weight: 700;
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.stat-card .stat-content p {
  margin: 0;
  color: var(--text-secondary);
  font-weight: 500;
}
.cultural {
  padding: clamp(4rem, 8vw, 8rem) 0;
  background: 
    linear-gradient(135deg, rgba(var(--accent-primary-rgb), 0.02), rgba(var(--accent-secondary-rgb), 0.02)),
    radial-gradient(circle at 30% 70%, rgba(var(--accent-tertiary-rgb), 0.03) 0%, transparent 50%),
    radial-gradient(circle at 70% 30%, rgba(var(--accent-primary-rgb), 0.03) 0%, transparent 50%);
  position: relative;
  overflow: hidden;
}
.cultural::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="cultural-grid" width="40" height="40" patternUnits="userSpaceOnUse"><path d="M20,0 L20,40 M0,20 L40,20" fill="none" stroke="rgba(99,102,241,0.06)" stroke-width="0.5"/><circle cx="20" cy="20" r="1.5" fill="rgba(236,72,153,0.08)"/></pattern></defs><rect width="100" height="100" fill="url(%23cultural-grid)"/></svg>');
  animation: dotPattern 50s linear infinite;
  opacity: 0.7;
  z-index: 0;
}
.cultural-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin-bottom: 4rem;
}
.cultural-card {
  background: var(--bg-primary);
  border-radius: 20px;
  padding: 2rem;
  box-shadow: var(--shadow-medium);
  border: 1px solid var(--border-color);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}
.cultural-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  border-radius: 20px 20px 0 0;
}
.cultural-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-large);
}
.cultural-card.featured {
  border-color: var(--primary-color);
}
.cultural-card.featured::after {
  content: 'Featured';
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: var(--primary-color);
  color: white;
  padding: 0.25rem 0.75rem;
  border-radius: 1rem;
  font-size: 0.75rem;
  font-weight: 600;
}
.cultural-header {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.organization-logo {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.5rem;
  flex-shrink: 0;
  transition: all 0.3s ease;
}
.cultural-card:hover .organization-logo {
  transform: scale(1.1) rotate(5deg);
}
.cultural-meta {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}
.organization-info h3 {
  margin: 0 0 0.25rem 0;
  color: var(--text-primary);
  font-size: 1.25rem;
  font-weight: 700;
}
.organization-name {
  color: var(--text-secondary);
  font-size: 0.875rem;
  font-weight: 500;
}
.cultural-duration {
  text-align: right;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.duration-badge {
  padding: 0.25rem 0.75rem;
  border-radius: 1rem;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}
.duration-badge.current {
  background: linear-gradient(135deg, #10b981, #059669);
  color: white;
}
.duration-badge.past {
  background: var(--bg-secondary);
  color: var(--text-secondary);
}
.duration-length {
  font-size: 0.75rem;
  color: var(--text-light);
  font-weight: 500;
}
.leadership-card {
  background: var(--bg-primary);
  padding: 2.5rem;
  border-radius: 20px;
  box-shadow: 
    0 20px 40px rgba(0, 0, 0, 0.08),
    0 8px 16px rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 2rem;
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.leadership-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color), var(--accent-color));
  border-radius: 20px 20px 0 0;
}
.leadership-card:hover {
  transform: translateY(-8px);
  box-shadow: 
    0 32px 64px rgba(0, 0, 0, 0.12),
    0 16px 32px rgba(0, 0, 0, 0.08);
}
.leadership-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}
.leadership-header i {
  font-size: 2rem;
  color: var(--primary-color);
}
.leadership-header h3 {
  margin: 0;
  color: var(--text-primary);
  flex: 1;
}
.leadership-period {
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  color: white;
  padding: 0.25rem 0.75rem;
  border-radius: 1rem;
  font-size: 0.875rem;
  font-weight: 600;
}
.leadership-header h4 {
  margin: 0.5rem 0 1.5rem 0;
  color: var(--text-secondary);
  font-weight: 500;
}
.leadership-achievements {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.achievement-item {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.25rem;
  background:
    linear-gradient(135deg, rgba(var(--accent-primary-rgb), 0.08), rgba(var(--accent-secondary-rgb), 0.04)),
    rgba(255, 255, 255, 0.85);
  border-radius: 16px;
  border: 1px solid rgba(var(--accent-primary-rgb), 0.1);
  position: relative;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.achievement-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  border-radius: 16px 0 0 16px;
}
.achievement-item:hover {
  transform: translateX(8px);
  background: 
    linear-gradient(135deg, rgba(var(--accent-primary-rgb), 0.12), rgba(var(--accent-secondary-rgb), 0.06)),
    rgba(255, 255, 255, 0.7);
  box-shadow: 0 8px 24px rgba(var(--accent-primary-rgb), 0.15);
}
.achievement-item i {
  color: var(--primary-color);
  font-size: 1.4rem;
  min-width: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: rgba(var(--accent-primary-rgb), 0.1);
  border-radius: 12px;
  transition: all 0.3s ease;
}
.achievement-item:hover i {
  background: var(--primary-color);
  color: white;
  transform: scale(1.1);
}
.achievement-item span {
  color: var(--text-primary);
  font-size: 1rem;
  line-height: 1.5;
  font-weight: 500;
  flex: 1;
}
.current-role {
  background: 
    linear-gradient(135deg, rgba(var(--accent-primary-rgb), 0.05), rgba(var(--accent-secondary-rgb), 0.03)),
    var(--bg-primary);
  padding: 2rem;
  border-radius: 20px;
  box-shadow: 
    0 16px 32px rgba(0, 0, 0, 0.06),
    0 4px 8px rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(var(--accent-primary-rgb), 0.1);
  position: relative;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.current-role::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="role-pattern" width="20" height="20" patternUnits="userSpaceOnUse"><circle cx="10" cy="10" r="0.8" fill="rgba(99,102,241,0.05)"/></pattern></defs><rect width="100" height="100" fill="url(%23role-pattern)"/></svg>');
  opacity: 0.6;
  z-index: 0;
}
.current-role > * {
  position: relative;
  z-index: 1;
}
.current-role:hover {
  transform: translateY(-4px);
  box-shadow: 
    0 24px 48px rgba(0, 0, 0, 0.1),
    0 8px 16px rgba(0, 0, 0, 0.06);
}
.current-role h4 {
  color: var(--primary-color);
  margin-bottom: 1rem;
}
.current-role p {
  margin: 0;
  color: var(--text-primary);
  line-height: 1.6;
}
.cultural-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-top: 1rem;
}
.gallery-item {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 
    0 12px 24px rgba(0, 0, 0, 0.08),
    0 4px 8px rgba(0, 0, 0, 0.04);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  aspect-ratio: 16/10;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
}
.gallery-item:hover {
  transform: translateY(-8px);
  box-shadow: 
    0 20px 40px rgba(0, 0, 0, 0.12),
    0 8px 16px rgba(0, 0, 0, 0.08);
}
.gallery-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}
.gallery-item:hover .gallery-image {
  transform: scale(1.05);
}
.cultural-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 3rem;
  position: relative;
  overflow: hidden;
}
.cultural-placeholder::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60"><circle cx="30" cy="30" r="2" fill="rgba(255,255,255,0.1)"/><circle cx="10" cy="10" r="1" fill="rgba(255,255,255,0.05)"/><circle cx="50" cy="20" r="1.5" fill="rgba(255,255,255,0.08)"/><circle cx="20" cy="50" r="1" fill="rgba(255,255,255,0.06)"/></svg>');
  background-size: 60px 60px;
  animation: culturalPattern 20s linear infinite;
  opacity: 0.3;
}
@keyframes culturalPattern {
  0% { transform: translate(0, 0) rotate(0deg); }
  100% { transform: translate(60px, 60px) rotate(360deg); }
}
.cultural-placeholder i {
  margin-bottom: 1rem;
  opacity: 0.9;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
  position: relative;
  z-index: 2;
}
.cultural-placeholder span {
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  opacity: 0.8;
  text-align: center;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  position: relative;
  z-index: 2;
}
.gallery-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
  color: white;
  padding: 1.5rem;
  transform: translateY(100%);
  transition: transform 0.3s ease;
}
.gallery-item:hover .gallery-overlay {
  transform: translateY(0);
}
.gallery-overlay h5 {
  margin: 0 0 0.5rem 0;
  font-size: 1.1rem;
  font-weight: 600;
}
.gallery-overlay p {
  margin: 0;
  font-size: 0.9rem;
  opacity: 0.9;
}
.cultural-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  margin-top: 2rem;
}
.cultural-stats .stat-card {
  text-align: center;
  padding: 2rem 1.5rem;
  background: var(--bg-primary);
  border-radius: 20px;
  box-shadow: 
    0 10px 30px rgba(0, 0, 0, 0.08),
    0 4px 12px rgba(0, 0, 0, 0.04);
  border: 1px solid var(--border-color);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}
.cultural-stats .stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(var(--accent-primary-rgb), 0.02), rgba(var(--accent-secondary-rgb), 0.02));
  opacity: 0;
  transition: opacity 0.3s ease;
}
.cultural-stats .stat-card:hover::before {
  opacity: 1;
}
.cultural-stats .stat-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 
    0 20px 40px rgba(0, 0, 0, 0.12),
    0 8px 16px rgba(0, 0, 0, 0.06);
}
.cultural-stats .stat-card .stat-icon {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
  color: white;
  font-size: 1.5rem;
  transition: all 0.3s ease;
  position: relative;
  z-index: 1;
}
.cultural-stats .stat-card:hover .stat-icon {
  transform: scale(1.1) rotate(5deg);
  box-shadow: 0 8px 20px rgba(var(--accent-primary-rgb), 0.3);
}
.cultural-stats .stat-card .stat-content h4 {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--primary-color);
  margin-bottom: 0.5rem;
  line-height: 1;
  position: relative;
  z-index: 1;
}
.cultural-stats .stat-card .stat-content p {
  color: var(--text-secondary);
  font-weight: 500;
  font-size: 0.95rem;
  margin: 0;
  position: relative;
  z-index: 1;
}
.timeline {
  position: relative;
  max-width: 800px;
  margin: 0 auto;
}
.timeline::before {
  content: '';
  position: absolute;
  left: 2rem;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--border-color);
}
.timeline-item {
  position: relative;
  margin-bottom: 3rem;
  padding-left: 5rem;
}
.timeline-marker {
  position: absolute;
  left: 1.25rem;
  top: 0.5rem;
  width: 1.5rem;
  height: 1.5rem;
  background: var(--primary-color);
  border-radius: 50%;
  border: 4px solid var(--bg-primary);
  box-shadow: var(--shadow-medium);
}
.timeline-content {
  background: var(--bg-primary);
  padding: 2rem;
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-medium);
  border: 1px solid var(--border-color);
}
.timeline-header {
  display: flex;
  justify-content: space-between;
  align-items: start;
  margin-bottom: 0.5rem;
  flex-wrap: wrap;
  gap: 1rem;
}
.timeline-header h3 {
  color: var(--primary-color);
  margin-bottom: 0;
}
.timeline-date {
  background: var(--bg-secondary);
  color: var(--text-secondary);
  padding: 0.25rem 0.75rem;
  border-radius: 1rem;
  font-size: 0.875rem;
  font-weight: 500;
}
.timeline-content h4 {
  color: var(--text-secondary);
  font-weight: 500;
  margin-bottom: 1rem;
}
.timeline-achievements {
  list-style: none;
  padding: 0;
}
.timeline-achievements li {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border-color);
}
.timeline-achievements li:last-child {
  border-bottom: none;
}
.projects {
  padding: clamp(3rem, 8vw, 6rem) 0;
  background: 
    linear-gradient(135deg, var(--bg-secondary) 0%, rgba(var(--accent-secondary-rgb), 0.02) 100%),
    radial-gradient(circle at 30% 70%, rgba(var(--accent-primary-rgb), 0.05) 0%, transparent 50%);
  margin-top: -2rem;
  position: relative;
}
.projects::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"><polygon points="20,5 35,15 35,25 20,35 5,25 5,15" fill="none" stroke="rgba(236,72,153,0.1)" stroke-width="0.5"/></svg>');
  background-size: 40px 40px;
  animation: hexPattern 20s linear infinite;
  opacity: 0.3;
  z-index: 0;
}
@keyframes hexPattern {
  0% { transform: translate(0, 0) rotate(0deg); }
  100% { transform: translate(40px, 40px) rotate(360deg); }
}
.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 2rem;
}
.project-card {
  background: var(--bg-primary);
  border-radius: var(--border-radius);
  overflow: hidden;
  box-shadow: var(--shadow-medium);
  border: 1px solid var(--border-color);
  transition: all var(--transition-medium);
  position: relative;
}
.project-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(var(--accent-primary-rgb), 0.05), rgba(var(--accent-secondary-rgb), 0.05));
  opacity: 0;
  transition: opacity var(--transition-medium);
  z-index: 1;
}
.project-card:hover::before {
  opacity: 1;
}
.project-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 
    0 25px 50px rgba(0, 0, 0, 0.15),
    0 0 0 1px rgba(var(--accent-primary-rgb), 0.1);
  border-color: rgba(var(--accent-primary-rgb), 0.2);
}
.project-card * {
  position: relative;
  z-index: 2;
}
.project-image {
  position: relative;
  height: 200px;
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.youtube-preview {
  position: relative;
  width: 100%;
  height: 100%;
  cursor: pointer;
  overflow: hidden;
}
.youtube-thumbnail {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-medium);
}
.youtube-preview:hover .youtube-thumbnail {
  transform: scale(1.05);
}
.youtube-play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 60px;
  background: rgba(255, 0, 0, 0.9);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.5rem;
  transition: all var(--transition-medium);
  box-shadow: 0 4px 15px rgba(255, 0, 0, 0.3);
}
.youtube-preview:hover .youtube-play-button {
  transform: translate(-50%, -50%) scale(1.1);
  box-shadow: 0 6px 20px rgba(255, 0, 0, 0.4);
}
.youtube-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
  padding: 1rem;
  color: white;
}
.youtube-duration {
  font-size: 0.8rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.youtube-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
  z-index: 10000;
  backdrop-filter: blur(10px);
}
.youtube-modal.active {
  display: flex;
  align-items: center;
  justify-content: center;
  animation: modalFadeIn 0.3s ease;
}
.youtube-modal-content {
  position: relative;
  width: 90%;
  max-width: 800px;
  aspect-ratio: 16/9;
  background: var(--bg-primary);
  border-radius: var(--border-radius);
  overflow: hidden;
  box-shadow: var(--shadow-large);
}
.youtube-modal-close {
  position: absolute;
  top: -40px;
  right: 0;
  background: none;
  border: none;
  color: white;
  font-size: 2rem;
  cursor: pointer;
  z-index: 10001;
  transition: color var(--transition-fast);
}
.youtube-modal-close:hover {
  color: var(--primary-color);
}
.youtube-video-container {
  width: 100%;
  height: 100%;
  position: relative;
}
.youtube-video-container iframe {
  width: 100%;
  height: 100%;
  border: none;
}
@keyframes modalFadeIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
.image-modal {
  display: none;
  position: fixed;
  z-index: 10000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.95);
  backdrop-filter: blur(10px);
}
.image-modal.active {
  display: flex;
  align-items: center;
  justify-content: center;
  animation: modalFadeIn 0.3s ease-out;
}
.image-modal-content {
  position: relative;
  background: var(--card-bg);
  border-radius: 20px;
  max-width: 95vw;
  max-height: 95vh;
  overflow: hidden;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.image-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  background: rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
}
.image-modal-header h3 {
  margin: 0;
  color: var(--text-primary);
  font-size: 1.2rem;
  font-weight: 600;
}
.image-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.image-control-btn {
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: var(--text-primary);
  padding: 0.5rem;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 0.9rem;
  min-width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.image-control-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
}
.image-control-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.image-control-btn:disabled:hover {
  transform: none;
  background: rgba(255, 255, 255, 0.1);
}
#image-zoom-level {
  color: var(--text-secondary);
  font-size: 0.9rem;
  min-width: 50px;
  text-align: center;
  font-family: 'JetBrains Mono', monospace;
}
.image-modal-close {
  background: none;
  border: none;
  color: var(--text-primary);
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 8px;
  transition: all 0.3s ease;
  margin-left: 1rem;
}
.image-modal-close:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: rotate(90deg);
}
.image-viewer-container {
  position: relative;
  max-width: 90vw;
  max-height: 80vh;
  overflow: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.3);
}
[data-theme="dark"] .image-viewer-container {
  background: rgba(0, 0, 0, 0.5);
}
.modal-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transition: transform 0.3s ease;
  cursor: grab;
}
.modal-image:active {
  cursor: grabbing;
}
.image-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem;
  color: var(--text-secondary);
}
.image-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(255, 255, 255, 0.1);
  border-top: 3px solid var(--primary-color);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 1rem;
}
.image-loading p {
  margin: 0;
  font-size: 0.9rem;
}
.clickable-image {
  cursor: pointer;
  transition: all 0.3s ease;
}
.clickable-image:hover {
  transform: scale(1.02);
  filter: brightness(1.1);
}
.floating-nav {
  position: fixed;
  top: 5rem;
  right: 2rem;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.auto-scroll-btn {
  position: relative;
  width: 60px;
  height: 60px;
  border: none;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 32px rgba(var(--accent-primary-rgb), 0.3);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}
.auto-scroll-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  transform: scale(0);
  transition: transform 0.3s ease;
}
.auto-scroll-btn:hover::before {
  transform: scale(1);
}
.auto-scroll-btn:hover {
  transform: translateY(-4px) scale(1.05);
  box-shadow: 0 12px 40px rgba(var(--accent-primary-rgb), 0.4);
}
.auto-scroll-btn:active {
  transform: translateY(-2px) scale(0.98);
}
.auto-scroll-btn.scrolling {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  animation: pulse-scroll 2s infinite;
}
.auto-scroll-btn.scrolling .btn-icon i {
  transform: rotate(0deg);
}
.auto-scroll-btn.scrolling .btn-icon i::before {
  content: '\f04c'; 
}
@keyframes pulse-scroll {
  0%, 100% {
    box-shadow: 0 8px 32px rgba(239, 68, 68, 0.3);
  }
  50% {
    box-shadow: 0 12px 40px rgba(239, 68, 68, 0.5);
  }
}
.btn-icon {
  position: relative;
  z-index: 2;
  font-size: 1.2rem;
  transition: all 0.3s ease;
}
.btn-icon i {
  transition: all 0.3s ease;
}
.btn-progress {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.progress-ring {
  transform: rotate(-90deg);
  width: 100%;
  height: 100%;
}
.progress-ring-bg {
  fill: none;
  stroke: rgba(255, 255, 255, 0.2);
  stroke-width: 2;
}
.progress-ring-fill {
  fill: none;
  stroke: rgba(255, 255, 255, 0.8);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 163.36; 
  stroke-dashoffset: 163.36;
  transition: stroke-dashoffset 0.3s ease;
}
.auto-scroll-btn.scrolling .progress-ring-fill {
  stroke: rgba(255, 255, 255, 1);
  animation: progress-fill 4s linear infinite;
}
@keyframes progress-fill {
  0% {
    stroke-dashoffset: 163.36;
  }
  100% {
    stroke-dashoffset: 0;
  }
}
.btn-tooltip {
  position: absolute;
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  margin-right: 1rem;
  background: var(--card-bg);
  color: var(--text-primary);
  padding: 0.75rem 1rem;
  border-radius: 12px;
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  border: 1px solid var(--border-color);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-50%) translateX(-10px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(10px);
}
.tooltip-arrow {
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 6px solid var(--card-bg);
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
}
.auto-scroll-btn:hover .btn-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) translateX(0);
}
.section-indicator {
  background: var(--card-bg);
  border-radius: 20px;
  padding: 0.75rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  border: 1px solid var(--border-color);
  backdrop-filter: blur(10px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.floating-nav:hover .section-indicator,
.auto-scroll-btn.scrolling + .section-indicator {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.indicator-dots {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-secondary);
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
}
.dot::before {
  content: attr(title);
  position: absolute;
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  margin-right: 0.75rem;
  background: var(--card-bg);
  color: var(--text-primary);
  padding: 0.4rem 0.75rem;
  border-radius: 8px;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  border: 1px solid var(--border-color);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-50%) translateX(-5px);
  transition: all 0.3s ease;
  pointer-events: none;
}
.dot:hover::before {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) translateX(0);
}
.dot:hover {
  background: var(--primary-color);
  transform: scale(1.3);
}
.dot.active {
  background: var(--primary-color);
  transform: scale(1.2);
  box-shadow: 0 0 0 3px rgba(var(--accent-primary-rgb), 0.3);
}
.dot.visited {
  background: var(--secondary-color);
}
@keyframes float-bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}
.floating-nav {
  animation: float-bounce 3s ease-in-out infinite;
}
.auto-scroll-btn:hover {
  animation: none;
}
@media (max-width: 768px) {
  .floating-nav {
    top: 4rem;
    right: 1rem;
  }
  .auto-scroll-btn {
    width: 50px;
    height: 50px;
  }
  .btn-icon {
    font-size: 1rem;
  }
  .progress-ring {
    width: 50px;
    height: 50px;
  }
  .progress-ring-bg,
  .progress-ring-fill {
    r: 21;
    stroke-dasharray: 131.95; 
  }
  .progress-ring-fill {
    stroke-dashoffset: 131.95;
  }
  .btn-tooltip {
    display: none; 
  }
  .section-indicator {
    padding: 0.5rem;
  }
  .dot {
    width: 6px;
    height: 6px;
  }
  .dot::before {
    display: none; 
  }
}
@media (max-width: 480px) {
  .floating-nav {
    top: 3.5rem;
    right: 0.75rem;
  }
  .auto-scroll-btn {
    width: 45px;
    height: 45px;
  }
  .btn-icon {
    font-size: 0.9rem;
  }
}
.pdf-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.95);
  z-index: 10000;
  backdrop-filter: blur(10px);
}
.pdf-modal.active {
  display: flex;
  align-items: center;
  justify-content: center;
  animation: modalFadeIn 0.3s ease;
}
.pdf-modal-content {
  position: relative;
  width: 95%;
  height: 95%;
  max-width: 1200px;
  background: var(--bg-primary);
  border-radius: var(--border-radius);
  overflow: hidden;
  box-shadow: var(--shadow-large);
  display: flex;
  flex-direction: column;
}
.pdf-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
}
.pdf-modal-header h3 {
  color: var(--text-primary);
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
}
.pdf-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.pdf-control-btn {
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  padding: 0.5rem;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all var(--transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
}
.pdf-control-btn:hover {
  background: var(--primary-color);
  color: white;
  border-color: var(--primary-color);
}
.pdf-control-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.pdf-control-btn:disabled:hover {
  background: var(--bg-primary);
  color: var(--text-primary);
  border-color: var(--border-color);
}
#pdf-page-info,
#pdf-zoom-level {
  font-size: 0.875rem;
  color: var(--text-secondary);
  font-weight: 500;
  min-width: 60px;
  text-align: center;
}
.pdf-modal-close {
  background: none;
  border: none;
  color: var(--text-primary);
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0.5rem;
  transition: color var(--transition-fast);
  margin-left: 1rem;
}
.pdf-modal-close:hover {
  color: var(--primary-color);
}
.pdf-viewer-container {
  flex: 1;
  position: relative;
  overflow: auto;
  background: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
}
[data-theme="dark"] .pdf-viewer-container {
  background: #2a2a2a;
}
#pdf-canvas {
  max-width: 100%;
  max-height: 100%;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  background: white;
  cursor: grab;
}
#pdf-canvas:active {
  cursor: grabbing;
}
.pdf-loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: var(--text-secondary);
}
.pdf-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--border-color);
  border-top: 3px solid var(--primary-color);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto 1rem;
}
.pdf-loading p {
  margin: 0;
  font-size: 0.875rem;
}
.publication-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}
.pdf-viewer-btn {
  background: rgba(220, 38, 38, 0.1);
  border: 1px solid rgba(220, 38, 38, 0.3);
  color: #dc2626;
}
.pdf-viewer-btn:hover {
  background: #dc2626;
  color: white;
  border-color: #dc2626;
}
.project-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  color: rgba(255, 255, 255, 0.8);
  font-size: 3rem;
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
}
.project-placeholder i {
  margin-bottom: 0.5rem;
  opacity: 0.7;
}
.project-placeholder span {
  font-size: 0.875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  opacity: 0.6;
}
.project-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: var(--transition-medium);
}
.project-card:hover .project-overlay {
  opacity: 1;
}
.project-links {
  display: flex;
  gap: 1rem;
}
.project-link {
  width: 3rem;
  height: 3rem;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.25rem;
  transition: var(--transition-fast);
}
.project-link:hover {
  background: var(--primary-color);
  transform: scale(1.1);
}
.youtube-modal-btn {
  background: rgba(255, 0, 0, 0.2);
  border: none;
  cursor: pointer;
}
.youtube-modal-btn:hover {
  background: rgba(255, 0, 0, 0.9) !important;
}
.project-tech-stack {
  position: absolute;
  top: 1rem;
  left: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.tech-tag {
  background: rgba(255, 255, 255, 0.9);
  color: var(--text-primary);
  padding: 0.25rem 0.75rem;
  border-radius: 1rem;
  font-size: 0.75rem;
  font-weight: 500;
}
.project-content {
  padding: 1.5rem;
}
.project-content h3 {
  color: var(--primary-color);
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.project-badge {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.35rem 0.75rem;
  border-radius: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  animation: badgePulse 2s ease-in-out infinite;
}
.project-badge.ongoing {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: white;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
}
@keyframes badgePulse {
  0%, 100% { 
    transform: scale(1);
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
  }
  50% { 
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.5);
  }
}
.project-content p {
  margin-bottom: 1rem;
  font-size: 0.9rem;
}
.project-features {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.feature {
  background: var(--bg-secondary);
  color: var(--text-secondary);
  padding: 0.25rem 0.75rem;
  border-radius: 1rem;
  font-size: 0.75rem;
  font-weight: 500;
}
.research {
  padding: 6rem 0;
  background: var(--bg-secondary);
  position: relative;
  overflow: hidden;
}
.research::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 20% 80%, rgba(var(--accent-primary-rgb), 0.1) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(var(--accent-secondary-rgb), 0.1) 0%, transparent 50%);
  pointer-events: none;
}
.research-overview {
  margin: 3rem 0;
}
.research-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  margin-bottom: 4rem;
}
.metric-card {
  background: var(--card-bg);
  padding: 2rem;
  border-radius: 20px;
  border: 1px solid var(--border-color);
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.metric-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1;
}
.metric-card:hover::before {
  opacity: 0.05;
}
.metric-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  border-color: var(--primary-color);
}
.metric-icon {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.5rem;
  margin-bottom: 1.5rem;
  position: relative;
  z-index: 2;
}
.metric-content {
  position: relative;
  z-index: 2;
}
.metric-number {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.metric-label {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}
.metric-description {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.4;
}
.research-areas {
  margin: 4rem 0;
}
.research-areas-title {
  font-size: 2rem;
  font-weight: 700;
  color: var(--text-primary);
  text-align: center;
  margin-bottom: 3rem;
  position: relative;
}
.research-areas-title::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 4px;
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  border-radius: 2px;
}
.research-areas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}
.research-area-card {
  background: var(--card-bg);
  padding: 2.5rem;
  border-radius: 20px;
  border: 1px solid var(--border-color);
  text-align: center;
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.research-area-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  opacity: 0;
  transition: opacity 0.3s ease;
}
.research-area-card:hover::before {
  opacity: 0.05;
}
.research-area-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
}
.area-icon {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 2rem;
  margin: 0 auto 1.5rem;
  position: relative;
  z-index: 2;
}
.research-area-card h4 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 1rem;
  position: relative;
  z-index: 2;
}
.research-area-card p {
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 1.5rem;
  position: relative;
  z-index: 2;
}
.area-technologies {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  position: relative;
  z-index: 2;
}
.tech-badge {
  background: rgba(var(--accent-primary-rgb), 0.1);
  color: var(--primary-color);
  padding: 0.4rem 0.8rem;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 600;
  border: 1px solid rgba(var(--accent-primary-rgb), 0.2);
  transition: all 0.3s ease;
}
.tech-badge:hover {
  background: var(--primary-color);
  color: white;
  transform: translateY(-2px);
}
.publications-timeline {
  margin: 4rem 0;
}
.timeline-title {
  font-size: 2rem;
  font-weight: 700;
  color: var(--text-primary);
  text-align: center;
  margin-bottom: 3rem;
  position: relative;
}
.timeline-title::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 4px;
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  border-radius: 2px;
}
.publication-item {
  background: var(--card-bg);
  border-radius: 24px;
  border: 1px solid var(--border-color);
  margin-bottom: 2rem;
  overflow: hidden;
  position: relative;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.publication-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  opacity: 0;
  transition: opacity 0.3s ease;
}
.publication-item:hover::before {
  opacity: 0.02;
}
.publication-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  border-color: var(--primary-color);
}
.publication-item.featured {
  border: 2px solid var(--primary-color);
  background: linear-gradient(135deg, rgba(var(--accent-primary-rgb), 0.05), rgba(var(--accent-secondary-rgb), 0.05));
}
.publication-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem 2rem;
  background: rgba(255, 255, 255, 0.85);
  border-bottom: 1px solid var(--border-color);
  position: relative;
  z-index: 2;
}
.publication-type-badge {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.2rem;
  border-radius: 20px;
  font-weight: 600;
  font-size: 0.9rem;
}
.publication-type-badge.journal {
  background: linear-gradient(135deg, #10b981, #059669);
  color: white;
}
.publication-type-badge.conference {
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  color: white;
}
.publication-date {
  color: var(--text-secondary);
  font-weight: 600;
  font-size: 0.9rem;
}
.publication-content {
  padding: 2rem;
  position: relative;
  z-index: 2;
}
.publication-title {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.4;
  margin-bottom: 1.5rem;
}
.publication-details {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}
.venue-info, .doi-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
}
.venue-name {
  font-weight: 700;
  color: var(--text-primary);
}
.impact-factor, .conference-location {
  color: var(--text-secondary);
  font-size: 0.8rem;
  margin-left: 0.5rem;
}
.doi-info span {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.8rem;
  color: var(--text-secondary);
}
.publication-abstract {
  margin: 1.5rem 0;
  padding: 1.5rem;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 12px;
  border-left: 4px solid var(--primary-color);
}
.publication-abstract p {
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0;
  font-style: italic;
}
.publication-media {
  margin: 1.5rem 0;
  border-radius: 16px;
  overflow: hidden;
}
.media-preview {
  position: relative;
  width: 100%;
  height: 250px;
  cursor: pointer;
  border-radius: 16px;
  overflow: hidden;
}
.media-thumbnail {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.media-preview:hover .media-thumbnail {
  transform: scale(1.05);
}
.media-play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 70px;
  height: 70px;
  background: rgba(255, 0, 0, 0.9);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.8rem;
  transition: all 0.3s ease;
  border: none;
  cursor: pointer;
}
.media-preview:hover .media-play-button {
  background: #ff0000;
  transform: translate(-50%, -50%) scale(1.1);
}
.media-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
  padding: 1.5rem;
  color: white;
}
.media-duration {
  font-size: 1rem;
  font-weight: 700;
  display: block;
  margin-bottom: 0.25rem;
}
.media-type {
  font-size: 0.8rem;
  opacity: 0.8;
}
.publication-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 1.5rem 0;
}
.research-tag {
  padding: 0.5rem 1rem;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 600;
  transition: all 0.3s ease;
}
.research-tag.primary {
  background: linear-gradient(135deg, rgba(var(--accent-primary-rgb), 0.15), rgba(var(--accent-primary-rgb), 0.1));
  color: var(--primary-color);
  border: 1px solid rgba(var(--accent-primary-rgb), 0.3);
}
.research-tag.secondary {
  background: linear-gradient(135deg, rgba(var(--accent-secondary-rgb), 0.15), rgba(var(--accent-secondary-rgb), 0.1));
  color: var(--secondary-color);
  border: 1px solid rgba(var(--accent-secondary-rgb), 0.3);
}
.research-tag.accent {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(16, 185, 129, 0.1));
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.3);
}
.research-tag.neutral {
  background: linear-gradient(135deg, rgba(107, 114, 128, 0.15), rgba(107, 114, 128, 0.1));
  color: #6b7280;
  border: 1px solid rgba(107, 114, 128, 0.3);
}
.research-tag:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.publication-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2rem;
}
.action-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border-radius: 12px;
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}
.action-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s ease;
}
.action-btn:hover::before {
  left: 100%;
}
.action-btn.primary {
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  color: white;
}
.action-btn.primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(var(--accent-primary-rgb), 0.3);
}
.action-btn.secondary {
  background: rgba(var(--accent-primary-rgb), 0.1);
  color: var(--primary-color);
  border: 1px solid rgba(var(--accent-primary-rgb), 0.3);
}
.action-btn.secondary:hover {
  background: var(--primary-color);
  color: white;
  transform: translateY(-2px);
}
.action-btn.tertiary {
  background: rgba(107, 114, 128, 0.1);
  color: var(--text-secondary);
  border: 1px solid rgba(107, 114, 128, 0.3);
}
.action-btn.tertiary:hover {
  background: #6b7280;
  color: white;
  transform: translateY(-2px);
}
.research-impact {
  margin: 4rem 0;
}
.impact-title {
  font-size: 2rem;
  font-weight: 700;
  color: var(--text-primary);
  text-align: center;
  margin-bottom: 3rem;
  position: relative;
}
.impact-title::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 4px;
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  border-radius: 2px;
}
.impact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}
.impact-card {
  background: var(--card-bg);
  padding: 2.5rem;
  border-radius: 20px;
  border: 1px solid var(--border-color);
  text-align: center;
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.impact-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  opacity: 0;
  transition: opacity 0.3s ease;
}
.impact-card:hover::before {
  opacity: 0.05;
}
.impact-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
}
.impact-icon {
  width: 70px;
  height: 70px;
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.8rem;
  margin: 0 auto 1.5rem;
  position: relative;
  z-index: 2;
}
.impact-card h4 {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 1rem;
  position: relative;
  z-index: 2;
}
.impact-card p {
  color: var(--text-secondary);
  line-height: 1.6;
  position: relative;
  z-index: 2;
}
.publication-video {
  margin: 1rem 0;
  border-radius: var(--border-radius);
  overflow: hidden;
  box-shadow: var(--shadow-medium);
}
.publication-video .youtube-preview {
  height: 200px;
  position: relative;
  cursor: pointer;
  overflow: hidden;
}
.publication-video .youtube-thumbnail {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-medium);
}
.publication-video .youtube-preview:hover .youtube-thumbnail {
  transform: scale(1.05);
}
.publication-video .youtube-play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50px;
  height: 50px;
  background: rgba(255, 0, 0, 0.9);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.25rem;
  transition: all var(--transition-medium);
  box-shadow: 0 4px 15px rgba(255, 0, 0, 0.3);
}
.publication-video .youtube-preview:hover .youtube-play-button {
  transform: translate(-50%, -50%) scale(1.1);
  box-shadow: 0 6px 20px rgba(255, 0, 0, 0.4);
}
.publication-video .youtube-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
  padding: 0.75rem;
  color: white;
}
.publication-video .youtube-duration {
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.contact {
  padding: clamp(3rem, 8vw, 6rem) 0;
  background: 
    linear-gradient(135deg, var(--bg-secondary) 0%, rgba(var(--accent-tertiary-rgb), 0.02) 100%),
    radial-gradient(circle at 50% 50%, rgba(var(--accent-primary-rgb), 0.05) 0%, transparent 50%);
  margin-top: -2rem;
  position: relative;
}
.contact::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50"><path d="M25,5 L45,25 L25,45 L5,25 Z" fill="none" stroke="rgba(6,182,212,0.1)" stroke-width="0.5"/></svg>');
  background-size: 50px 50px;
  animation: diamondPattern 18s linear infinite;
  opacity: 0.3;
  z-index: 0;
}
@keyframes diamondPattern {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(25px, 25px) scale(1.1); }
  100% { transform: translate(50px, 50px) scale(1); }
}
.contact-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  margin-bottom: 3rem;
}
.contact-info {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.contact-item {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.contact-icon {
  width: 3rem;
  height: 3rem;
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.25rem;
}
.contact-details h4 {
  color: var(--primary-color);
  margin-bottom: 0.25rem;
}
.contact-details a {
  color: var(--text-secondary);
  transition: var(--transition-fast);
}
.contact-details a:hover {
  color: var(--primary-color);
}
.contact-form {
  background: var(--bg-primary);
  padding: 2rem;
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-medium);
  border: 1px solid var(--border-color);
}
.form-group {
  margin-bottom: 1.5rem;
}
.form-honeypot {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.form-group input,
.form-group textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  font-family: inherit;
  font-size: 1rem;
  transition: var(--transition-fast);
  background: var(--bg-primary);
  color: var(--text-primary);
}
.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(var(--accent-primary-rgb), 0.1);
}
.form-group textarea {
  resize: vertical;
  min-height: 120px;
}
.social-links {
  display: flex;
  justify-content: center;
  gap: 1rem;
}
.social-link {
  width: 3rem;
  height: 3rem;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  font-size: 1.25rem;
  transition: var(--transition-medium);
}
.social-link:hover {
  background: var(--primary-color);
  color: white;
  transform: translateY(-2px);
  box-shadow: var(--shadow-medium);
}
.footer {
  background: var(--bg-dark);
  color: var(--text-light);
  padding: 2rem 0;
  text-align: center;
}
.footer-content p {
  margin-bottom: 0.5rem;
}
.footer-content p:last-child {
  margin-bottom: 0;
  font-style: italic;
}
@media (max-width: 1024px) {
  .hero-content {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 3rem;
    padding: 0 1rem;
  }
  .about-content {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  .research-content {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  .contact-content {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  .timeline-item {
    padding-left: 4rem;
  }
  .timeline-marker {
    left: 0.75rem;
  }
  .timeline::before {
    left: 1.5rem;
  }
}
@media (max-width: 768px) {
  .container {
    padding: 0 1.5rem;
    max-width: 100%;
  }
  section {
    margin-bottom: 0.5rem;
  }
  .hero {
    padding: max(calc(4rem + var(--safe-area-inset-top)), 6rem) 0 clamp(1.5rem, 8vw, 3rem) 0;
    min-height: 100vh;
    min-height: 100dvh;
    overflow-x: hidden;
    display: flex;
    align-items: center;
  }
  .about,
  .experience,
  .projects,
  .research,
  .contact {
    padding: clamp(2.5rem, 8vw, 4rem) 0;
    margin-top: -0.5rem;
  }
  .nav-menu {
    position: fixed;
    top: 4rem;
    left: -100%;
    width: 100%;
    height: calc(100vh - 4rem);
    background: var(--bg-primary);
    flex-direction: column;
    justify-content: start;
    align-items: center;
    padding-top: 3rem;
    transition: var(--transition-medium);
    border-top: 1px solid var(--border-color);
    backdrop-filter: blur(10px);
    z-index: 999;
  }
  .nav-menu.active {
    left: 0;
  }
  .nav-link {
    padding: 1rem 2rem;
    font-size: 1.125rem;
    width: 100%;
    text-align: center;
    border-bottom: 1px solid var(--border-color);
  }
  .nav-link:last-child {
    border-bottom: none;
  }
  .hamburger {
    display: flex;
    z-index: 1001;
  }
  .hamburger.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
  }
  .hamburger.active span:nth-child(2) {
    opacity: 0;
  }
  .hamburger.active span:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -6px);
  }
  .hero-content {
    grid-template-columns: 1fr;
    gap: 2rem;
    padding: 0 1rem;
    text-align: center;
    max-width: 100%;
    overflow: hidden;
    align-items: center;
    justify-items: center;
  }
  .hero-text {
    width: 100%;
    max-width: 100%;
    text-align: center;
  }
  .hero-title {
    font-size: clamp(2.5rem, 8vw, 3.5rem);
    line-height: 1.1;
    margin-bottom: 0.5rem;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
  }
  .hero-title .gradient-text {
    display: inline-block;
    max-width: 100%;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
  .hero-subtitle {
    font-size: clamp(1.25rem, 5vw, 1.5rem);
    line-height: 1.3;
    margin-bottom: 1rem;
  }
  .hero-description {
    font-size: clamp(1rem, 3.5vw, 1.125rem);
    line-height: 1.5;
    margin-bottom: 2rem;
    max-width: 100%;
  }
  .hero-stats {
    justify-content: center;
    flex-wrap: wrap;
    gap: 1.5rem;
  }
  .stat {
    min-width: 120px;
  }
  .hero-buttons {
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
  }
  .hero-image {
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
  }
  .image-container {
    width: 280px;
    height: 280px;
    border-radius: 16px;
    margin: 0 auto;
  }
  .floating-icon {
    width: 40px;
    height: 40px;
    font-size: 1rem;
  }
  .tech-label {
    font-size: 0.5rem;
  }
  .avatar-container {
    width: 60px;
    height: 60px;
  }
  .avatar-content {
    font-size: 1.5rem;
  }
  .code-animation {
    font-size: 0.6rem;
  }
  .data-viz {
    height: 30px;
  }
  .team-image-container {
    width: 380px;
    height: 250px;
  }
  .team-placeholder {
    font-size: 2rem;
  }
  .team-placeholder span {
    font-size: 0.8rem;
  }
  .timeline::before {
    left: 1rem;
  }
  .timeline-item {
    padding-left: 3rem;
    margin-bottom: 2rem;
  }
  .timeline-marker {
    left: 0.25rem;
    width: 1rem;
    height: 1rem;
  }
  .timeline-header {
    flex-direction: column;
    align-items: start;
    gap: 0.5rem;
  }
  .timeline-content {
    padding: 1.5rem;
  }
  .projects-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .project-card {
    margin: 0 0.5rem;
  }
  .featured-banner {
    margin-bottom: 2rem;
  }
  .banner-content {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding: 1.5rem;
  }
  .banner-title {
    font-size: 1.5rem;
  }
  .banner-description {
    font-size: 1rem;
  }
  .btn-banner {
    width: 100%;
    justify-content: center;
    font-size: 1rem;
    padding: 0.875rem 1.5rem;
  }
  .banner-buttons {
    flex-direction: column;
    width: 100%;
  }
  .preview-container {
    min-height: 200px;
  }
  .research-metrics {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
  }
  .metric-card {
    padding: 1.5rem;
  }
  .metric-number {
    font-size: 2rem;
  }
  .research-areas-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .research-area-card {
    padding: 2rem;
  }
  .area-icon {
    width: 60px;
    height: 60px;
    font-size: 1.5rem;
  }
  .publication-item {
    border-radius: 16px;
  }
  .publication-header {
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
    text-align: center;
  }
  .publication-content {
    padding: 1.5rem;
  }
  .publication-title {
    font-size: 1.2rem;
  }
  .publication-details {
    padding: 0.75rem;
  }
  .publication-abstract {
    padding: 1rem;
  }
  .media-preview {
    height: 200px;
  }
  .media-play-button {
    width: 50px;
    height: 50px;
    font-size: 1.2rem;
  }
  .publication-actions {
    flex-direction: column;
    gap: 0.75rem;
  }
  .action-btn {
    justify-content: center;
    padding: 0.75rem 1rem;
  }
  .impact-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .impact-card {
    padding: 2rem;
  }
  .impact-icon {
    width: 60px;
    height: 60px;
    font-size: 1.5rem;
  }
  .about-content {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  .profile-card {
    padding: 2rem;
  }
  .profile-header {
    flex-direction: column;
    text-align: center;
    gap: 1rem;
  }
  .profile-actions {
    flex-direction: column;
    gap: 0.75rem;
  }
  .profile-actions .btn {
    padding: 0.75rem 1.25rem;
  }
  .profile-stats {
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
  }
  .stat-item {
    padding: 1rem;
    flex-direction: column;
    text-align: center;
    gap: 0.5rem;
  }
  .stat-icon {
    width: 35px;
    height: 35px;
    font-size: 1rem;
  }
  .stat-number {
    font-size: 1.25rem;
  }
  .skills-container {
    gap: 1rem;
  }
  .skill-category-card {
    padding: 1.25rem;
  }
  .category-header {
    gap: 0.75rem;
  }
  .category-icon {
    width: 45px;
    height: 45px;
    font-size: 1.125rem;
  }
  .progress-ring {
    width: 50px;
    height: 50px;
  }
  .education-card-modern {
    padding: 1.5rem;
  }
  .education-header {
    gap: 1rem;
  }
  .education-icon {
    width: 50px;
    height: 50px;
    font-size: 1.25rem;
  }
  .education-achievements {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
  }
  .achievement-badge {
    padding: 0.75rem;
    min-width: auto;
  }
  .honor-badges {
    justify-content: center;
  }
  .profile-image-container {
    width: 150px;
    height: 150px;
    margin: 0 auto 1.5rem;
  }
  .profile-overlay p {
    font-size: 0.8rem;
    padding: 0.75rem;
  }
  .profile-placeholder {
    font-size: 2.5rem;
  }
  .profile-placeholder span {
    font-size: 0.7rem;
  }
  .youtube-modal-content {
    width: 95%;
    margin: 0 1rem;
  }
  .youtube-modal-close {
    top: -35px;
    font-size: 1.5rem;
  }
  .youtube-play-button {
    width: 50px;
    height: 50px;
    font-size: 1.25rem;
  }
  .pdf-modal-content {
    width: 98%;
    height: 98%;
  }
  .pdf-modal-header {
    padding: 0.75rem 1rem;
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  .pdf-modal-header h3 {
    font-size: 1rem;
    order: 1;
    width: 100%;
  }
  .pdf-controls {
    order: 2;
    gap: 0.25rem;
    flex-wrap: wrap;
  }
  .pdf-control-btn {
    min-width: 32px;
    height: 32px;
    padding: 0.375rem;
  }
  .pdf-modal-close {
    order: 3;
    margin-left: 0;
  }
  #pdf-page-info,
  #pdf-zoom-level {
    font-size: 0.75rem;
    min-width: 50px;
  }
  .publication-actions {
    flex-direction: column;
    gap: 0.5rem;
  }
  .publication-link {
    width: 100%;
    justify-content: center;
  }
  .publication-video .youtube-preview {
    height: 150px;
  }
  .publication-video .youtube-play-button {
    width: 40px;
    height: 40px;
    font-size: 1rem;
  }
  .image-modal-content {
    max-width: 98vw;
    max-height: 98vh;
    border-radius: 15px;
  }
  .image-modal-header {
    padding: 0.75rem 1rem;
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  .image-modal-header h3 {
    font-size: 1rem;
    order: 1;
    width: 100%;
  }
  .image-controls {
    gap: 0.25rem;
    order: 2;
  }
  .image-control-btn {
    padding: 0.4rem;
    min-width: 32px;
    height: 32px;
    font-size: 0.8rem;
  }
  .image-modal-close {
    font-size: 1.2rem;
    padding: 0.4rem;
    order: 3;
    margin-left: 0;
  }
  #image-zoom-level {
    font-size: 0.8rem;
    min-width: 45px;
  }
  .image-viewer-container {
    max-width: 95vw;
    max-height: 75vh;
  }
  .education-card {
    padding: 1.5rem;
    margin: 0 0.5rem;
  }
  .contact-content {
    gap: 2rem;
  }
  .contact-form {
    padding: 1.5rem;
    margin: 0 0.5rem;
  }
  .social-links {
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
  }
  .experience-grid {
    gap: 1.5rem;
  }
  .experience-card {
    padding: 1.5rem;
  }
  .experience-header {
    flex-direction: column;
    gap: 1rem;
  }
  .experience-meta {
    flex-direction: column;
    gap: 0.75rem;
  }
  .company-logo {
    width: 50px;
    height: 50px;
    font-size: 1.25rem;
  }
  .project-gallery {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }
  .experience-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
  .stat-card {
    padding: 1.5rem;
  }
  .stat-card .stat-icon {
    width: 50px;
    height: 50px;
    font-size: 1.25rem;
  }
  .stat-card .stat-content h4 {
    font-size: 1.5rem;
  }
  .cultural-content {
    grid-template-columns: 1fr;
    gap: 3rem;
    padding: 0 1rem;
  }
  .gallery-grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
    margin-bottom: 1.5rem;
  }
  .cultural-placeholder {
    font-size: 2.5rem;
  }
  .cultural-placeholder span {
    font-size: 0.9rem;
  }
  .cultural-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
  .cultural-stats .stat-card {
    padding: 1.5rem;
  }
  .cultural-stats .stat-card .stat-icon {
    width: 50px;
    height: 50px;
    font-size: 1.25rem;
  }
  .cultural-stats .stat-card .stat-content h4 {
    font-size: 1.5rem;
  }
  .leadership-card {
    padding: 2rem 1.5rem;
    margin-bottom: 1.5rem;
  }
  .achievement-item {
    padding: 1rem;
    gap: 1rem;
  }
  .achievement-item i {
    width: 36px;
    height: 36px;
    font-size: 1.2rem;
  }
  .current-role {
    padding: 1.5rem;
  }
  .gallery-image {
    height: 250px;
  }
  .leadership-header {
    flex-direction: column;
    align-items: start;
    gap: 0.5rem;
  }
  .achievement-item {
    flex-direction: column;
    align-items: start;
    gap: 0.5rem;
    text-align: left;
  }
}
@media (max-width: 480px) {
  .container {
    padding: 0 1rem;
  }
  .hero {
    padding: clamp(1rem, 6vw, 2rem) 0;
    min-height: 85vh;
  }
  .hero-content {
    gap: 1.5rem;
    padding: 0 0.5rem;
  }
  .hero-title {
    font-size: clamp(2rem, 8vw, 2.5rem);
    line-height: 1.1;
  }
  .hero-subtitle {
    font-size: clamp(1.125rem, 4vw, 1.25rem);
  }
  .hero-description {
    font-size: 1rem;
    margin-bottom: 1.5rem;
  }
  .hero-stats {
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1.5rem;
  }
  .stat {
    min-width: 100px;
  }
  .stat-number {
    font-size: 1.5rem;
  }
  .hero-buttons {
    flex-direction: column;
    width: 100%;
    gap: 0.75rem;
  }
  .btn {
    width: 100%;
    justify-content: center;
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
  }
  .image-container {
    width: 220px;
    height: 220px;
    border-radius: 12px;
  }
  .floating-icon {
    width: 35px;
    height: 35px;
    font-size: 0.9rem;
  }
  .tech-label {
    font-size: 0.45rem;
  }
  .avatar-container {
    width: 50px;
    height: 50px;
  }
  .avatar-content {
    font-size: 1.25rem;
  }
  .code-animation {
    font-size: 0.55rem;
    top: 15%;
    left: 5%;
    width: 90%;
  }
  .data-viz {
    height: 25px;
    bottom: 15%;
    right: 5%;
  }
  .nav-container {
    padding: 0 1rem;
  }
  .nav-logo a {
    font-size: 1.25rem;
  }
  .nav-menu {
    padding-top: 2rem;
  }
  .nav-link {
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
  }
  .about,
  .experience,
  .projects,
  .research,
  .contact {
    padding: clamp(2rem, 6vw, 3rem) 0;
  }
  .section-header {
    margin-bottom: clamp(2rem, 5vw, 3rem);
    padding: 0 0.5rem;
  }
  .section-title {
    font-size: clamp(1.75rem, 6vw, 2.25rem);
  }
  .section-subtitle {
    font-size: 0.95rem;
  }
  .team-image-container {
    width: 320px;
    height: 210px;
  }
  .team-placeholder {
    font-size: 1.75rem;
  }
  .team-placeholder span {
    font-size: 0.7rem;
  }
  .timeline-item {
    padding-left: 2.5rem;
    margin-bottom: 1.5rem;
  }
  .timeline-marker {
    left: 0rem;
    width: 0.75rem;
    height: 0.75rem;
  }
  .timeline::before {
    left: 0.375rem;
    width: 1px;
  }
  .timeline-content {
    padding: 1rem;
  }
  .timeline-header h3 {
    font-size: 1.125rem;
  }
  .timeline-date {
    font-size: 0.8rem;
    padding: 0.2rem 0.6rem;
  }
  .project-card {
    margin: 0;
  }
  .project-content {
    padding: 1.25rem;
  }
  .project-content h3 {
    font-size: 1.125rem;
  }
  .project-content p {
    font-size: 0.875rem;
  }
  .tech-tag {
    font-size: 0.7rem;
    padding: 0.2rem 0.6rem;
  }
  .feature {
    font-size: 0.7rem;
    padding: 0.2rem 0.6rem;
  }
  .profile-card {
    padding: 1.5rem;
    margin: 0 0.5rem;
  }
  .avatar-image {
    width: 70px;
    height: 70px;
  }
  .profile-name {
    font-size: 1.25rem;
  }
  .profile-title {
    font-size: 0.9rem;
  }
  .badge {
    font-size: 0.7rem;
    padding: 0.3rem 0.6rem;
  }
  .profile-actions {
    gap: 0.5rem;
  }
  .profile-actions .btn {
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
  }
  .profile-stats {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
  .stat-item {
    padding: 0.75rem;
    flex-direction: row;
    text-align: left;
    gap: 0.75rem;
  }
  .stat-icon {
    width: 30px;
    height: 30px;
    font-size: 0.9rem;
  }
  .stat-number {
    font-size: 1.125rem;
  }
  .skills-header h3 {
    font-size: 1.5rem;
  }
  .skills-header p {
    font-size: 0.875rem;
  }
  .skill-category-card {
    padding: 1rem;
    margin: 0 0.5rem;
  }
  .category-header {
    gap: 0.5rem;
  }
  .category-icon {
    width: 40px;
    height: 40px;
    font-size: 1rem;
  }
  .category-info h4 {
    font-size: 1.125rem;
  }
  .skill-count {
    font-size: 0.8rem;
  }
  .progress-ring {
    width: 45px;
    height: 45px;
  }
  .progress-text {
    font-size: 0.7rem;
  }
  .skill-bar {
    width: 80px;
  }
  .education-card-modern {
    padding: 1.25rem;
    margin: 0 0.5rem;
  }
  .education-header {
    flex-direction: column;
    text-align: center;
    gap: 1rem;
  }
  .education-icon {
    width: 45px;
    height: 45px;
    font-size: 1.125rem;
    align-self: center;
  }
  .education-content h4 {
    font-size: 1.125rem;
  }
  .education-content p {
    font-size: 0.875rem;
  }
  .achievement-badge {
    padding: 0.625rem;
  }
  .gpa-score {
    font-size: 1.125rem;
  }
  .honor-badge {
    font-size: 0.75rem;
    padding: 0.4rem 0.8rem;
  }
  .profile-image-container {
    width: 120px;
    height: 120px;
    margin: 0 auto 1rem;
  }
  .profile-overlay p {
    font-size: 0.7rem;
    padding: 0.5rem;
  }
  .profile-placeholder {
    font-size: 2rem;
  }
  .profile-placeholder span {
    font-size: 0.6rem;
  }
  .youtube-modal-content {
    width: 98%;
    margin: 0 0.5rem;
  }
  .youtube-modal-close {
    top: -30px;
    font-size: 1.25rem;
  }
  .youtube-play-button {
    width: 45px;
    height: 45px;
    font-size: 1.1rem;
  }
  .pdf-modal-content {
    width: 100%;
    height: 100%;
    border-radius: 0;
  }
  .pdf-modal-header {
    padding: 0.5rem 0.75rem;
  }
  .pdf-modal-header h3 {
    font-size: 0.9rem;
  }
  .pdf-controls {
    gap: 0.125rem;
  }
  .pdf-control-btn {
    min-width: 28px;
    height: 28px;
    padding: 0.25rem;
    font-size: 0.8rem;
  }
  #pdf-page-info,
  #pdf-zoom-level {
    font-size: 0.7rem;
    min-width: 40px;
  }
  .education-card {
    padding: 1.25rem;
    margin: 0;
  }
  .card-header {
    gap: 0.75rem;
    margin-bottom: 1rem;
  }
  .card-header i {
    font-size: 1.25rem;
  }
  .education-item h5 {
    font-size: 1rem;
  }
  .publication-card {
    padding: 1.25rem;
    margin: 0 0.5rem;
  }
  .publication-card h4 {
    font-size: 1rem;
    line-height: 1.4;
  }
  .publication-venue {
    font-size: 0.8rem;
  }
  .tag {
    font-size: 0.7rem;
    padding: 0.2rem 0.6rem;
  }
  .publication-video .youtube-preview {
    height: 120px;
  }
  .publication-video .youtube-play-button {
    width: 35px;
    height: 35px;
    font-size: 0.9rem;
  }
  .contact-item {
    flex-direction: column;
    text-align: center;
    gap: 0.75rem;
  }
  .contact-icon {
    width: 2.5rem;
    height: 2.5rem;
    font-size: 1.125rem;
  }
  .contact-details h4 {
    font-size: 1rem;
  }
  .contact-form {
    padding: 1.25rem;
    margin: 0;
  }
  .form-group input,
  .form-group textarea {
    padding: 0.625rem 0.875rem;
    font-size: 0.9rem;
  }
  .social-links {
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: center;
  }
  .social-link {
    width: 2.5rem;
    height: 2.5rem;
    font-size: 1.125rem;
  }
  .theme-toggle {
    bottom: 15px !important;
    right: 15px !important;
    width: 45px !important;
    height: 45px !important;
    font-size: 1rem !important;
  }
  .work-image,
  .rover-image {
    height: 180px;
  }
  .rover-image {
    padding: 0;
  }
  .gallery-image {
    height: 200px;
  }
  .cultural-stat {
    padding: 1.5rem 1rem;
    border-radius: 16px;
  }
  .cultural-stat .stat-number {
    font-size: 1.5rem;
  }
  .leadership-card,
  .current-role {
    padding: 1.5rem;
    margin: 0 0.5rem;
    border-radius: 16px;
  }
  .achievement-item {
    padding: 1rem;
    border-radius: 12px;
  }
  .achievement-item i {
    width: 32px;
    height: 32px;
    font-size: 1.1rem;
  }
  .cultural-content {
    gap: 2rem;
  }
  .gallery-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
  }
  .cultural-placeholder {
    font-size: 2rem;
  }
  .cultural-placeholder span {
    font-size: 0.8rem;
  }
  .cultural-stats {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .cultural-stats .stat-card {
    padding: 1.25rem;
  }
  .cultural-stats .stat-card .stat-icon {
    width: 45px;
    height: 45px;
    font-size: 1.1rem;
  }
  .cultural-stats .stat-card .stat-content h4 {
    font-size: 1.25rem;
  }
  .floating-icon {
    width: 45px;
    height: 45px;
    font-size: 1.25rem;
  }
}
@media (max-width: 360px) {
  .container {
    padding: 0 0.75rem;
  }
  .hero {
    padding: clamp(0.75rem, 5vw, 1.5rem) 0;
    min-height: 80vh;
  }
  .hero-content {
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 0 0.25rem;
    text-align: center;
    justify-items: center;
  }
  .hero-text {
    width: 100%;
    max-width: 100%;
  }
  .hero-title {
    font-size: clamp(1.75rem, 7vw, 2rem);
    line-height: 1.1;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
  }
  .hero-title .gradient-text {
    display: inline-block;
    max-width: 100%;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
  .hero-subtitle {
    font-size: clamp(1rem, 3.5vw, 1.125rem);
    line-height: 1.3;
  }
  .hero-description {
    font-size: 0.9rem;
    line-height: 1.4;
  }
  .hero-stats {
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
  }
  .stat-number {
    font-size: 1.25rem;
  }
  .stat-label {
    font-size: 0.75rem;
  }
  .image-container {
    width: 180px;
    height: 180px;
  }
  .floating-icon {
    width: 35px;
    height: 35px;
    font-size: 1rem;
  }
  .section-title {
    font-size: clamp(1.5rem, 5vw, 1.875rem);
  }
  .section-subtitle {
    font-size: 0.875rem;
  }
  .timeline-item {
    padding-left: 2rem;
  }
  .timeline-marker {
    left: -0.25rem;
  }
  .timeline::before {
    left: 0.125rem;
  }
  .nav-container {
    padding: 0 0.75rem;
  }
  .nav-logo a {
    font-size: 1.125rem;
  }
  .theme-toggle {
    bottom: 10px !important;
    right: 10px !important;
    width: 40px !important;
    height: 40px !important;
    font-size: 0.9rem !important;
  }
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
.fade-in {
  opacity: 0;
  transform: translateY(30px);
  transition: var(--transition-slow);
}
.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}
.parallax {
  transform: translateY(0);
  will-change: transform;
}
.hero-content,
.project-card,
.timeline-item,
.stat-card {
  will-change: transform;
}
@media (max-width: 768px) {
  .parallax {
    will-change: auto;
  }
  .floating-icon {
    will-change: auto;
  }
  @media (prefers-reduced-motion: no-preference) {
    .hero,
    .floating-icon {
      animation-duration: 0.5s;
    }
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .parallax {
    transform: none !important;
  }
}
.loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--bg-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 1;
  transition: opacity 0.5s ease;
}
.loading.hidden {
  opacity: 0;
  pointer-events: none;
}
.spinner {
  width: 50px;
  height: 50px;
  border: 3px solid var(--border-color);
  border-top: 3px solid var(--primary-color);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: var(--bg-secondary);
}
::-webkit-scrollbar-thumb {
  background: var(--primary-color);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--primary-dark);
}
::selection {
  background: var(--primary-color);
  color: white;
}
::-moz-selection {
  background: var(--primary-color);
  color: white;
}
.grain-svg {
  display: none;
}
.grain-overlay {
  display: none;
}
.project-card {
  background: rgba(var(--bg-primary-rgb, 255, 255, 255), 0.9) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
}
[data-theme="dark"] .project-card {
  background: rgba(15, 15, 30, 0.88) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
}
[data-theme="dark"] .experience-card {
  background: rgba(15, 15, 30, 0.6) !important;
  border-color: rgba(var(--accent-primary-rgb), 0.12) !important;
}
.project-card,
.research-area-card,
.metric-card,
.cert-card {
  --sx: -200px;
  --sy: -200px;
}
.project-card::after,
.research-area-card::after,
.metric-card::after,
.cert-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    260px circle at var(--sx) var(--sy),
    rgba(var(--accent-primary-rgb), 0.1),
    transparent 65%
  );
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  z-index: 1;
}
.project-card:hover::after,
.research-area-card:hover::after,
.metric-card:hover::after,
.cert-card:hover::after {
  opacity: 1;
}
.experience-card.featured,
.publication-item.featured {
  will-change: box-shadow;
  animation: borderGlow 5s ease-in-out infinite;
}
@keyframes borderGlow {
  0%, 100% {
    box-shadow:
      0 0 0 1px rgba(var(--accent-primary-rgb), 0.35),
      0 0 18px rgba(var(--accent-primary-rgb), 0.12),
      0 20px 44px rgba(0, 0, 0, 0.14);
  }
  50% {
    box-shadow:
      0 0 0 1px rgba(var(--accent-secondary-rgb), 0.35),
      0 0 18px rgba(var(--accent-secondary-rgb), 0.12),
      0 20px 44px rgba(0, 0, 0, 0.14);
  }
}
.hero-content {
  will-change: opacity, filter;
}
.hero-title {
  position: relative;
}
.section-title {
  overflow: hidden;
  display: inline-block;
}
[data-aos="fade-up"].aos-animate .section-title,
.section-header[data-aos="fade-up"].aos-animate .section-title {
  animation: clipReveal 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes clipReveal {
  from {
    clip-path: inset(0 100% 0 0);
    opacity: 0.8;
  }
  to {
    clip-path: inset(0 0% 0 0);
    opacity: 1;
  }
}
.hero::before {
  content: '';
  position: absolute;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(var(--accent-primary-rgb), 0.18) 0%, transparent 70%);
  top: 20%;
  left: 10%;
  pointer-events: none;
  z-index: 0;
  animation: orbPulse 6s ease-in-out infinite;
}
.hero::after {
  content: '';
  position: absolute;
  width: 250px;
  height: 250px;
  background: radial-gradient(circle, rgba(var(--accent-tertiary-rgb), 0.15) 0%, transparent 70%);
  bottom: 15%;
  right: 15%;
  pointer-events: none;
  z-index: 0;
  animation: orbPulse 8s ease-in-out infinite reverse;
}
@keyframes orbPulse {
  0%, 100% { transform: scale(1) translate(0, 0); opacity: 0.7; }
  50%       { transform: scale(1.3) translate(10px, -10px); opacity: 1; }
}
.stat-item.animated .stat-number {
  animation: numberPulse 0.4s ease-out;
}
@keyframes numberPulse {
  0%    { transform: scale(1.3); color: var(--primary-color); }
  100%  { transform: scale(1);   color: inherit; }
}
.btn-primary {
  position: relative;
  overflow: hidden;
}
.btn-primary::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.25),
    transparent
  );
  transform: skewX(-20deg);
  transition: none;
  pointer-events: none;
}
.btn-primary:hover::before {
  animation: btnShimmer 0.65s ease forwards;
}
@keyframes btnShimmer {
  0%   { left: -100%; }
  100% { left: 160%;  }
}
html.lenis,
html.lenis body {
  height: auto;
}
.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}
.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}
.navbar.scrolled {
  backdrop-filter: blur(20px) saturate(1.6);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  background: rgba(var(--bg-primary-rgb, 255, 255, 255), 0.78) !important;
}
[data-theme="dark"] .navbar.scrolled {
  background: rgba(10, 10, 20, 0.82) !important;
}
.tech-tag,
.tech-badge {
  transition: all var(--transition-fast);
}
.tech-tag:hover,
.tech-badge:hover {
  background: var(--primary-color) !important;
  color: white !important;
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 4px 12px rgba(var(--accent-primary-rgb), 0.4);
}
.project-placeholder i {
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.project-card:hover .project-placeholder i {
  transform: scale(1.25) rotate(-8deg);
  filter: drop-shadow(0 0 12px var(--primary-color));
}
.social-link {
  position: relative;
}
.social-link::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid var(--primary-color);
  opacity: 0;
  transform: scale(0.8);
  transition: all 0.4s ease;
}
.social-link:hover::after {
  opacity: 0.5;
  transform: scale(1.2);
}
.project-card,
.experience-card,
.metric-card,
.stat-card,
.cultural-card,
.research-area-card {
  transition-property: opacity, transform, box-shadow;
  transition-duration: 0.65s;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}
@media (max-width: 768px) {
  .grain-overlay {
    display: none;
  }
  .project-card::after,
  .experience-card::after,
  .research-area-card::after,
  .metric-card::after,
  .cert-card::after {
    display: none;
  }
  .hero::before,
  .hero::after {
    display: none;
  }
  .experience-card.featured,
  .publication-item.featured {
    animation: none;
    box-shadow:
      0 0 0 1px rgba(var(--accent-primary-rgb), 0.3),
      0 12px 30px rgba(0, 0, 0, 0.12);
    will-change: auto;
  }
  .hero-content {
    will-change: auto;
  }
  .hero-title:hover .gradient-text {
    animation: none;
  }
  .custom-cursor,
  .cursor-dot {
    display: none !important;
  }
  .social-link::after {
    display: none;
  }
  .scroll-progress-ring {
    bottom: calc(20px + env(safe-area-inset-bottom));
    left: calc(15px + env(safe-area-inset-left));
  }
  .hero-text,
  .hero-image,
  .hero-text-parallax,
  .hero-image-parallax {
    transform: none !important;
    will-change: auto;
  }
}
@media (max-width: 480px) {
  .hero-blob-1,
  .hero-blob-2 {
    width: 250px;
    height: 250px;
    filter: blur(40px);
  }
  .section-divider {
    height: 40px;
  }
}
.about-content {
  grid-template-columns: 360px 1fr;
  gap: 2.5rem;
  align-items: start;
}
.skills-section {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.skills-container {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  flex-direction: unset;
}
.skills-container .skill-category-card:nth-child(3) {
  grid-column: 1 / -1;
}
.skills-container .skill-category-card:nth-child(3)[data-scroll-revealed] .skills-list {
  max-height: 350px !important;
  opacity: 1 !important;
}
.education-card-modern {
  margin-top: 0.25rem;
  width: 100%;
}
.skills-header {
  margin-bottom: 0.5rem;
}
@media (max-width: 1200px) {
  .about-content {
    grid-template-columns: 320px 1fr;
    gap: 2rem;
  }
}
@media (max-width: 1024px) {
  .about-content {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .skills-container {
    grid-template-columns: 1fr 1fr !important;
  }
  .skills-container .skill-category-card:nth-child(3) {
    grid-column: span 1;
  }
}
@media (max-width: 640px) {
  .skills-container {
    grid-template-columns: 1fr !important;
  }
  .skills-container .skill-category-card:nth-child(3) {
    grid-column: span 1;
  }
}
/* reveal-motion.css */
.reveal-clip {
    clip-path: inset(0 100% 0 0);
    will-change: clip-path;
}
html.rm-ready [data-rm-hide] {
    opacity: 0;
}
.rm-animating {
    will-change: transform, opacity, clip-path;
}
.rm-anim-done {
    will-change: auto;
}
@media (prefers-reduced-motion: reduce) {
    html.rm-ready [data-rm-hide],
    .reveal-clip,
    [data-rm-hide] {
        opacity: 1 !important;
        transform: none !important;
        clip-path: none !important;
        will-change: auto !important;
    }
}
html.rm-failsafe [data-rm-hide],
html.rm-failsafe .reveal-clip {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    will-change: auto !important;
}
/* morph-motion.css */
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}
html.vt-crossfade::view-transition-old(root) {
  animation: vt-fade-out 0.35s ease both;
}
html.vt-crossfade::view-transition-new(root) {
  animation: vt-fade-in 0.35s ease both;
}
@keyframes vt-fade-out {
  to { opacity: 0; }
}
@keyframes vt-fade-in {
  from { opacity: 0; }
}
.morph-flip-proxy {
  position: fixed;
  margin: 0;
  z-index: 100000;
  overflow: hidden;
  border-radius: 16px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
  pointer-events: none;
  background: #000;
  will-change: transform, width, height;
}
.morph-flip-proxy img,
.morph-flip-proxy .morph-proxy-fill {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.morph-modal-content-hidden {
  opacity: 0 !important;
}
.cursor-media-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.6);
  font-family: inherit;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  opacity: 0;
  white-space: nowrap;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.custom-cursor.cursor-media {
  width: 74px;
  height: 74px;
  background: var(--primary-color, #6366f1);
  border-color: var(--primary-color, #6366f1);
  mix-blend-mode: normal;
}
.custom-cursor.cursor-media .cursor-media-label {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.cursor-dot.cursor-media {
  opacity: 0;
}
.divider-morph-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}
.divider-morph-svg path {
  will-change: d, transform;
}
.divider-sweep {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    transparent 0%,
    rgba(var(--accent-primary-rgb), 0.18) 45%,
    rgba(var(--accent-secondary-rgb), 0.16) 55%,
    transparent 100%
  );
  background-size: 220% 100%;
  background-position: calc((1 - var(--sweep, 0)) * 100%) 0;
  opacity: 0.9;
  mix-blend-mode: screen;
}
@media (max-width: 768px), (hover: none), (pointer: coarse) {
  .custom-cursor.cursor-media,
  .cursor-dot.cursor-media {
    width: 36px;
    height: 36px;
    background: transparent;
  }
  .cursor-media-label { display: none; }
  .divider-sweep { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none !important;
  }
  .divider-sweep { display: none; }
  .cursor-media-label { display: none; }
  .custom-cursor.cursor-media,
  .cursor-dot.cursor-media {
    width: 36px;
    height: 36px;
    background: transparent;
  }
  .morph-flip-proxy { display: none !important; }
}
/* positioning.css */
.hero-research-tag {
    display: inline-block;
    margin: 0 0 0.5rem;
    padding: 0.35rem 0.9rem;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--text-primary);
    background: linear-gradient(135deg, rgba(var(--accent-primary-rgb), 0.14), rgba(var(--accent-secondary-rgb), 0.14));
    border: 1px solid var(--border-color);
    border-radius: 999px;
}
.hero-buttons.hero-buttons-research {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}
.hero-buttons-research .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.research-statement {
    position: relative;
    max-width: 920px;
    margin: 0 auto 3rem;
    padding: 2rem 2.25rem;
    background: var(--card-bg, var(--bg-secondary));
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--primary-color);
    border-radius: var(--border-radius, 16px);
    box-shadow: var(--shadow-medium, 0 8px 24px rgba(0, 0, 0, 0.08));
}
.research-statement-icon {
    position: absolute;
    top: -14px;
    left: 24px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    font-size: 0.85rem;
}
.research-statement-text {
    margin: 0;
    font-size: 1.08rem;
    line-height: 1.75;
    color: var(--text-secondary);
}
.research-statement-text strong {
    color: var(--text-primary);
    font-weight: 600;
}
.research-interests {
    max-width: 960px;
    margin: 0 auto 2.5rem;
    text-align: center;
}
.research-interests-title {
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 1.25rem;
}
.research-interests-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    margin-bottom: 1.75rem;
}
.research-interest-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.1rem;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-primary);
    background: var(--card-bg, var(--bg-secondary));
    border: 1px solid var(--border-color);
    border-radius: 999px;
    transition: var(--transition-fast, all 0.2s ease);
}
.research-interest-pill i {
    color: var(--primary-color);
}
.research-interest-pill:hover {
    border-color: var(--primary-color);
    transform: translateY(-2px);
}
.research-cta-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
}
.research-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 1.3rem;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    color: #fff;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    border: none;
    border-radius: 999px;
    transition: var(--transition-fast, all 0.2s ease);
}
.research-cta-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-medium, 0 8px 20px rgba(var(--accent-primary-rgb), 0.3));
}
.publication-authors {
    margin: 0.25rem 0 0.75rem;
    font-size: 0.95rem;
    color: var(--text-secondary);
    font-family: var(--font-mono, monospace);
}
.publication-authors strong {
    color: var(--primary-color);
    font-weight: 700;
}
.publication-contribution {
    margin: 0;
    color: var(--text-secondary);
    line-height: 1.7;
}
.publication-contribution strong {
    color: var(--text-primary);
}
.doi-info a {
    color: var(--primary-color);
    text-decoration: none;
    word-break: break-word;
}
.doi-info a:hover {
    text-decoration: underline;
}
.footer-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    margin-top: 0.5rem;
}
.footer-links a {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 600;
}
.footer-links a:hover {
    text-decoration: underline;
}
.research-cta-btn:focus-visible,
.hero-buttons-research .btn:focus-visible,
.research-interest-pill:focus-visible,
.footer-links a:focus-visible,
.doi-info a:focus-visible {
    outline: 3px solid var(--primary-color, #6366f1);
    outline-offset: 3px;
    border-radius: 6px;
}
.research-cta-btn:focus-visible,
.hero-buttons-research .btn:focus-visible {
    border-radius: 999px;
}
@media (max-width: 768px) {
    .research-statement {
        padding: 1.6rem 1.4rem;
        margin-bottom: 2.25rem;
    }
    .research-statement-text {
        font-size: 1rem;
        line-height: 1.7;
    }
    .research-interests-title {
        font-size: 1.2rem;
    }
    .hero-buttons.hero-buttons-research .btn {
        flex: 1 1 calc(50% - 0.75rem);
        justify-content: center;
    }
}
@media (max-width: 480px) {
    .hero-research-tag {
        font-size: 0.82rem;
        padding: 0.3rem 0.7rem;
    }
    .research-statement {
        padding: 1.4rem 1.1rem;
    }
    .research-statement-icon {
        left: 16px;
    }
    .research-interest-pill {
        font-size: 0.85rem;
        padding: 0.5rem 0.85rem;
    }
    .research-cta-btn {
        font-size: 0.88rem;
        padding: 0.6rem 1rem;
    }
    .hero-buttons.hero-buttons-research .btn {
        flex: 1 1 100%;
    }
    .publication-authors {
        font-size: 0.85rem;
    }
}
/* accent-theme.css */
html[data-accent="blue"] {
  --primary-color:   #6366f1;
  --primary-dark:    #4f46e5;
  --secondary-color: #ec4899;
  --accent-color:    #06b6d4;
  --accent-primary-rgb:   99, 102, 241;  
  --accent-secondary-rgb: 236, 72, 153;  
  --accent-tertiary-rgb:  6, 182, 212;   
}
html[data-accent="teal"] {
  --primary-color:   #0B5D56;
  --primary-dark:    #094D47;
  --secondary-color: #14B8A6;
  --accent-color:    #D8B98B;
  --accent-primary-rgb:   11, 93, 86;
  --accent-secondary-rgb: 20, 184, 166;
  --accent-tertiary-rgb:  216, 185, 139;
}
html[data-accent="red"] {
  --primary-color:   #e11d48;
  --primary-dark:    #be123c;
  --secondary-color: #fb7185;
  --accent-color:    #f59e0b;
  --accent-primary-rgb:   225, 29, 72;
  --accent-secondary-rgb: 251, 113, 133;
  --accent-tertiary-rgb:  245, 158, 11;
}
html[data-accent="orange"] {
  --primary-color:   #ea580c;
  --primary-dark:    #c2410c;
  --secondary-color: #f59e0b;
  --accent-color:    #fb923c;
  --accent-primary-rgb:   234, 88, 12;
  --accent-secondary-rgb: 245, 158, 11;
  --accent-tertiary-rgb:  251, 146, 60;
}
html[data-accent="mono"] {
  --primary-color:   #0a0a0a;
  --primary-dark:    #000000;
  --secondary-color: #595959;
  --accent-color:    #1f1f1f;
  --accent-primary-rgb:   10, 10, 10;
  --accent-secondary-rgb: 89, 89, 89;
  --accent-tertiary-rgb:  31, 31, 31;
}
html[data-accent="mono"][data-theme="dark"] {
  --primary-color:   #fafafa;
  --primary-dark:    #d4d4d4;
  --secondary-color: #9e9e9e;
  --accent-color:    #ededed;
  --accent-primary-rgb:   250, 250, 250;
  --accent-secondary-rgb: 158, 158, 158;
  --accent-tertiary-rgb:  237, 237, 237;
}
html[data-accent="graphite"] {
  --primary-color:   #4B5563;
  --primary-dark:    #374151;
  --secondary-color: #9AA3AE;
  --accent-color:    #C8CDD3;
  --accent-primary-rgb:   75, 85, 99;
  --accent-secondary-rgb: 154, 163, 174;
  --accent-tertiary-rgb:  200, 205, 211;
}
html[data-accent="stone"] {
  --primary-color:   #6B6157;
  --primary-dark:    #544B43;
  --secondary-color: #B2A595;
  --accent-color:    #D9D0C3;
  --accent-primary-rgb:   107, 97, 87;
  --accent-secondary-rgb: 178, 165, 149;
  --accent-tertiary-rgb:  217, 208, 195;
}
html[data-accent="sand"] {
  --primary-color:   #7A6440;
  --primary-dark:    #5F4D31;
  --secondary-color: #C2AA7C;
  --accent-color:    #E2CFA6;
  --accent-primary-rgb:   122, 100, 64;
  --accent-secondary-rgb: 194, 170, 124;
  --accent-tertiary-rgb:  226, 207, 166;
}
html[data-accent="sage"] {
  --primary-color:   #4F6249;
  --primary-dark:    #3D4C38;
  --secondary-color: #94A88E;
  --accent-color:    #BCCBB8;
  --accent-primary-rgb:   79, 98, 73;
  --accent-secondary-rgb: 148, 168, 142;
  --accent-tertiary-rgb:  188, 203, 184;
}
html[data-accent="slate"] {
  --primary-color:   #475569;
  --primary-dark:    #334155;
  --secondary-color: #94A3B8;
  --accent-color:    #B4C2D4;
  --accent-primary-rgb:   71, 85, 105;
  --accent-secondary-rgb: 148, 163, 184;
  --accent-tertiary-rgb:  180, 194, 212;
}
html[data-accent="violet"] {
  --primary-color: #6D28D9; --primary-dark: #5B21B6; --secondary-color: #A78BFA; --accent-color: #F0ABFC;
  --accent-primary-rgb: 109, 40, 217; --accent-secondary-rgb: 167, 139, 250; --accent-tertiary-rgb: 240, 171, 252;
}
html[data-accent="sky"] {
  --primary-color: #0369A1; --primary-dark: #075985; --secondary-color: #38BDF8; --accent-color: #FDA4AF;
  --accent-primary-rgb: 3, 105, 161; --accent-secondary-rgb: 56, 189, 248; --accent-tertiary-rgb: 253, 164, 175;
}
html[data-accent="emerald"] {
  --primary-color: #047857; --primary-dark: #065F46; --secondary-color: #34D399; --accent-color: #FCD34D;
  --accent-primary-rgb: 4, 120, 87; --accent-secondary-rgb: 52, 211, 153; --accent-tertiary-rgb: 252, 211, 77;
}
html[data-accent="onyx"] {
  --primary-color: #52525B; --primary-dark: #3F3F46; --secondary-color: #A1A1AA; --accent-color: #D4D4D8;
  --accent-primary-rgb: 82, 82, 91; --accent-secondary-rgb: 161, 161, 170; --accent-tertiary-rgb: 212, 212, 216;
}
html[data-accent="midnight"] {
  --primary-color: #3B4A7A; --primary-dark: #2E3A61; --secondary-color: #7E8DB8; --accent-color: #A9B8E8;
  --accent-primary-rgb: 59, 74, 122; --accent-secondary-rgb: 126, 141, 184; --accent-tertiary-rgb: 169, 184, 232;
}
html[data-accent="plum"] {
  --primary-color: #6B4A73; --primary-dark: #553A5C; --secondary-color: #A98BB0; --accent-color: #D9C2DE;
  --accent-primary-rgb: 107, 74, 115; --accent-secondary-rgb: 169, 139, 176; --accent-tertiary-rgb: 217, 194, 222;
}
html[data-accent="mono"][data-theme="dark"] [data-theme="dark"] .achievement,
html[data-accent="mono"][data-theme="dark"] [data-theme="dark"] .gpa,
html[data-accent="mono"][data-theme="dark"] .btn-primary,
html[data-accent="mono"][data-theme="dark"] .btn-secondary:hover,
html[data-accent="mono"][data-theme="dark"] .btn-accent,
html[data-accent="mono"][data-theme="dark"] .avatar-content,
html[data-accent="mono"][data-theme="dark"] .badge-primary,
html[data-accent="mono"][data-theme="dark"] .badge-secondary,
html[data-accent="mono"][data-theme="dark"] .stat-icon,
html[data-accent="mono"][data-theme="dark"] .category-icon,
html[data-accent="mono"][data-theme="dark"] .education-icon,
html[data-accent="mono"][data-theme="dark"] .achievement-badge,
html[data-accent="mono"][data-theme="dark"] .honor-badge,
html[data-accent="mono"][data-theme="dark"] .profile-placeholder,
html[data-accent="mono"][data-theme="dark"] .gpa,
html[data-accent="mono"][data-theme="dark"] .achievement,
html[data-accent="mono"][data-theme="dark"] .experience-card.featured::after,
html[data-accent="mono"][data-theme="dark"] .company-logo,
html[data-accent="mono"][data-theme="dark"] .highlight-item:hover,
html[data-accent="mono"][data-theme="dark"] .highlight-icon,
html[data-accent="mono"][data-theme="dark"] .certificate-button-container .btn-primary,
html[data-accent="mono"][data-theme="dark"] .certificate-button-container .btn-secondary:hover,
html[data-accent="mono"][data-theme="dark"] [data-theme="dark"] .certificate-button-container .btn-secondary:hover,
html[data-accent="mono"][data-theme="dark"] .stat-card .stat-icon,
html[data-accent="mono"][data-theme="dark"] .cultural-card.featured::after,
html[data-accent="mono"][data-theme="dark"] .organization-logo,
html[data-accent="mono"][data-theme="dark"] .leadership-period,
html[data-accent="mono"][data-theme="dark"] .achievement-item:hover i,
html[data-accent="mono"][data-theme="dark"] .cultural-placeholder,
html[data-accent="mono"][data-theme="dark"] .cultural-stats .stat-card .stat-icon,
html[data-accent="mono"][data-theme="dark"] .banner-badge,
html[data-accent="mono"][data-theme="dark"] .btn-banner,
html[data-accent="mono"][data-theme="dark"] .auto-scroll-btn,
html[data-accent="mono"][data-theme="dark"] .pdf-control-btn:hover,
html[data-accent="mono"][data-theme="dark"] .metric-icon,
html[data-accent="mono"][data-theme="dark"] .area-icon,
html[data-accent="mono"][data-theme="dark"] .tech-badge:hover,
html[data-accent="mono"][data-theme="dark"] .action-btn.primary,
html[data-accent="mono"][data-theme="dark"] .action-btn.secondary:hover,
html[data-accent="mono"][data-theme="dark"] .impact-icon,
html[data-accent="mono"][data-theme="dark"] .contact-icon,
html[data-accent="mono"][data-theme="dark"] .social-link:hover,
html[data-accent="mono"][data-theme="dark"] .tech-tag:hover,
html[data-accent="mono"][data-theme="dark"] .scholar-citations,
html[data-accent="mono"][data-theme="dark"] .pub-status-pill,
html[data-accent="mono"][data-theme="dark"] .award-icon,
html[data-accent="mono"][data-theme="dark"] .research-statement-icon,
html[data-accent="mono"][data-theme="dark"] .research-cta-btn,
html[data-accent="mono"][data-theme="dark"] .btn.btn-icon:hover,
html[data-accent="mono"][data-theme="dark"] .award-card-v2[data-rank="finalist"].award-card-v2 .award-rank,
html[data-accent="mono"][data-theme="dark"] .award-cert-btn:not(.award-cert-btn--pending) {
  color: #0a0a0a;
}
html[data-accent="teal"] .auto-scroll-btn,
html[data-accent="red"]  .auto-scroll-btn,
html[data-accent="orange"] .auto-scroll-btn,
html[data-accent="mono"] .auto-scroll-btn {
  box-shadow: 0 8px 32px rgba(var(--accent-primary-rgb), 0.3);
}
html[data-accent="teal"] .hero,
html[data-accent="red"]  .hero,
html[data-accent="orange"] .hero,
html[data-accent="mono"] .hero {
  background-image:
    linear-gradient(135deg, rgba(var(--accent-primary-rgb), 0.08), rgba(var(--accent-secondary-rgb), 0.08)),
    radial-gradient(circle at 20% 80%, rgba(var(--accent-tertiary-rgb), 0.10) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(var(--accent-primary-rgb), 0.10) 0%, transparent 50%);
}
html[data-accent="mono"] .hero::before {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="rgba(140,140,140,0.1)" stroke-width="0.5"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
}
html[data-accent="mono"] .about::before {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60"><circle cx="30" cy="30" r="1" fill="rgba(140,140,140,0.1)"/></svg>');
}
html[data-accent="mono"] .cultural::before {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="cultural-grid" width="40" height="40" patternUnits="userSpaceOnUse"><path d="M20,0 L20,40 M0,20 L40,20" fill="none" stroke="rgba(140,140,140,0.06)" stroke-width="0.5"/><circle cx="20" cy="20" r="1.5" fill="rgba(170,170,170,0.08)"/></pattern></defs><rect width="100" height="100" fill="url(%23cultural-grid)"/></svg>');
}
html[data-accent="mono"] .current-role::before {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="role-pattern" width="20" height="20" patternUnits="userSpaceOnUse"><circle cx="10" cy="10" r="0.8" fill="rgba(140,140,140,0.05)"/></pattern></defs><rect width="100" height="100" fill="url(%23role-pattern)"/></svg>');
}
html[data-accent="mono"] .projects::before {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"><polygon points="20,5 35,15 35,25 20,35 5,25 5,15" fill="none" stroke="rgba(140,140,140,0.1)" stroke-width="0.5"/></svg>');
}
html[data-accent="mono"] .contact::before {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50"><path d="M25,5 L45,25 L25,45 L5,25 Z" fill="none" stroke="rgba(140,140,140,0.1)" stroke-width="0.5"/></svg>');
}
html[data-accent="mono"] .publication-type-badge.journal,
html[data-accent="mono"] .publication-type-badge.conference {
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
}
html[data-accent="mono"][data-theme="dark"] .publication-type-badge.journal,
html[data-accent="mono"][data-theme="dark"] .publication-type-badge.conference {
  color: #0a0a0a;
}
#accent-switcher {
  position: fixed;
  right: 20px;
  bottom: 84px; 
  z-index: 1001;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
#accent-switcher .accent-trigger {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  color: #fff;
  font-size: 1.15rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-large, 0 10px 30px rgba(0, 0, 0, 0.25));
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.25s ease;
}
#accent-switcher .accent-trigger:hover {
  transform: scale(1.1);
}
#accent-switcher .accent-trigger:active {
  transform: scale(0.92);
}
#accent-switcher .accent-tray {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: 28px;
  background: rgba(20, 20, 35, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.18);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.22);
  order: -1; 
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px) scale(0.85);
  transform-origin: bottom center;
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1), visibility 0s linear 0.28s;
}
html[data-theme="light"] #accent-switcher .accent-tray {
  background: rgba(255, 255, 255, 0.6);
  border-color: rgba(0, 0, 0, 0.06);
}
#accent-switcher { align-items: flex-end; } 
#accent-switcher .accent-tray { flex-direction: row; align-items: flex-end; transform-origin: bottom right; }
#accent-switcher .accent-group { display: grid; grid-template-columns: repeat(2, 30px); gap: 10px; }
#accent-switcher .accent-group--neutral {
  padding-left: 10px;
  border-left: 1px solid rgba(255, 255, 255, 0.14);
}
#accent-switcher.open .accent-tray {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
  transition-delay: 0s;
}
#accent-switcher .accent-swatch {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.7);
  cursor: pointer;
  padding: 0;
  position: relative;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}
#accent-switcher .accent-swatch[data-swatch="teal"]   { background: linear-gradient(135deg, #0B5D56, #8CF0D3); }
#accent-switcher .accent-swatch[data-swatch="blue"]   { background: linear-gradient(135deg, #6366f1, #ec4899); }
#accent-switcher .accent-swatch[data-swatch="red"]    { background: linear-gradient(135deg, #e11d48, #fb7185); }
#accent-switcher .accent-swatch[data-swatch="orange"] { background: linear-gradient(135deg, #ea580c, #f59e0b); }
#accent-switcher .accent-swatch[data-swatch="mono"]   { background: linear-gradient(135deg, #111111, #f5f5f5); }
#accent-switcher .accent-swatch[data-swatch="graphite"] { background: linear-gradient(135deg, #121417, #C8CDD3); }
#accent-switcher .accent-swatch[data-swatch="graphite"].active { color: #C8CDD3; }
#accent-switcher .accent-swatch[data-swatch="stone"] { background: linear-gradient(135deg, #151312, #D9D0C3); }
#accent-switcher .accent-swatch[data-swatch="stone"].active { color: #D9D0C3; }
#accent-switcher .accent-swatch[data-swatch="sand"] { background: linear-gradient(135deg, #16130F, #E2CFA6); }
#accent-switcher .accent-swatch[data-swatch="sand"].active { color: #E2CFA6; }
#accent-switcher .accent-swatch[data-swatch="sage"] { background: linear-gradient(135deg, #121512, #BCCBB8); }
#accent-switcher .accent-swatch[data-swatch="sage"].active { color: #BCCBB8; }
#accent-switcher .accent-swatch[data-swatch="slate"] { background: linear-gradient(135deg, #11151A, #B4C2D4); }
#accent-switcher .accent-swatch[data-swatch="slate"].active { color: #B4C2D4; }
#accent-switcher .accent-swatch[data-swatch="violet"]  { background: linear-gradient(135deg, #6D28D9, #F0ABFC); }
#accent-switcher .accent-swatch[data-swatch="violet"].active { color: #A78BFA; }
#accent-switcher .accent-swatch[data-swatch="sky"]     { background: linear-gradient(135deg, #0369A1, #7DD3FC); }
#accent-switcher .accent-swatch[data-swatch="sky"].active { color: #38BDF8; }
#accent-switcher .accent-swatch[data-swatch="emerald"] { background: linear-gradient(135deg, #047857, #6EE7B7); }
#accent-switcher .accent-swatch[data-swatch="emerald"].active { color: #34D399; }
#accent-switcher .accent-swatch[data-swatch="onyx"]    { background: linear-gradient(135deg, #000000, #D4D4D8); }
#accent-switcher .accent-swatch[data-swatch="onyx"].active { color: #D4D4D8; }
#accent-switcher .accent-swatch[data-swatch="midnight"] { background: linear-gradient(135deg, #0D1220, #A9B8E8); }
#accent-switcher .accent-swatch[data-swatch="midnight"].active { color: #A9B8E8; }
#accent-switcher .accent-swatch[data-swatch="plum"]    { background: linear-gradient(135deg, #150F17, #D9C2DE); }
#accent-switcher .accent-swatch[data-swatch="plum"].active { color: #D9C2DE; }
#accent-switcher .accent-swatch:hover {
  transform: scale(1.18);
}
#accent-switcher .accent-swatch.active {
  box-shadow: 0 0 0 3px var(--bg-primary, #fff), 0 0 0 5px currentColor, 0 2px 8px rgba(0, 0, 0, 0.3);
}
#accent-switcher .accent-swatch[data-swatch="teal"].active   { color: #0B5D56; }
#accent-switcher .accent-swatch[data-swatch="blue"].active   { color: #6366f1; }
#accent-switcher .accent-swatch[data-swatch="red"].active    { color: #e11d48; }
#accent-switcher .accent-swatch[data-swatch="orange"].active { color: #ea580c; }
#accent-switcher .accent-swatch[data-swatch="mono"].active   { color: #9e9e9e; }
#accent-switcher .accent-trigger:focus-visible,
#accent-switcher .accent-swatch:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 3px;
}
@media (max-width: 768px) {
  #accent-switcher {
    right: 15px;
    bottom: 198px; 
  }
  #accent-switcher .accent-trigger {
    width: 45px;
    height: 45px;
    font-size: 1.05rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  #accent-switcher .accent-trigger,
  #accent-switcher .accent-tray,
  #accent-switcher .accent-swatch {
    transition: none !important;
  }
}
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.45s;
}
@media (max-width: 600px) {
  html .ask-fab { right: max(12px, env(safe-area-inset-right, 0px)); bottom: max(14px, env(safe-area-inset-bottom, 0px)); width: 48px; height: 48px; }
  html .theme-toggle { right: max(16px, env(safe-area-inset-right, 0px)) !important; bottom: calc(max(14px, env(safe-area-inset-bottom, 0px)) + 58px) !important; width: 40px !important; height: 40px !important; font-size: 1rem !important; }
  html #accent-switcher { right: max(16px, env(safe-area-inset-right, 0px)) !important; bottom: calc(max(14px, env(safe-area-inset-bottom, 0px)) + 106px) !important; }
  html #accent-switcher .accent-trigger { width: 40px; height: 40px; font-size: 0.98rem; }
  html .ask-fab-tooltip { right: 70px; bottom: 26px; }
}
/* projects-motion.css */
.flagship-reel {
  position: relative;
  margin: 0 0 clamp(2rem, 5vw, 3.5rem);
}
.flagship-reel-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1.1rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.flagship-reel-head::before {
  content: "";
  width: 26px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
}
.flagship-hint {
  display: none;            
  margin-left: auto;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--text-light);
}
.flagship-hint i { animation: fpHintNudge 1.4s ease-in-out infinite; }
@keyframes fpHintNudge { 0%,100%{transform:translateX(0);} 50%{transform:translateX(5px);} }
.flagship-viewport { position: relative; }
.flagship-track {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.1rem, 2.4vw, 1.75rem);
}
@media (max-width: 760px) {
  .flagship-track { grid-template-columns: 1fr; }
}
.flagship-panel {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  min-height: clamp(340px, 30vw, 420px);
  border: 1px solid var(--border-color);
  background: var(--bg-secondary);
  box-shadow: var(--shadow-medium);
  isolation: isolate;
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.4s ease, border-color 0.4s ease;
}
.flagship-panel.fp-in { opacity: 1; transform: none; }
.flagship-panel:hover {
  box-shadow: 0 26px 60px -24px color-mix(in srgb, var(--primary-color) 45%, transparent),
              var(--shadow-large);
  border-color: color-mix(in srgb, var(--primary-color) 45%, transparent);
}
@media (prefers-reduced-motion: reduce) {
  .flagship-panel { opacity: 1; transform: none; transition: none; }
}
.flagship-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  margin: 0;
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  text-decoration: none;
  -webkit-appearance: none;
          appearance: none;
}
a.flagship-media, button.flagship-media { cursor: pointer; }
.flagship-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.08);
  will-change: transform;
}
.flagship-media--placeholder {
  display: grid;
  place-items: center;
  background:
    radial-gradient(120% 120% at 20% 0%, rgba(var(--accent-primary-rgb), 0.40), transparent 60%),
    linear-gradient(135deg,
      color-mix(in srgb, var(--primary-color) 36%, var(--bg-dark)),
      color-mix(in srgb, var(--secondary-color) 30%, var(--bg-dark)));
}
.flagship-media--placeholder i {
  font-size: clamp(3rem, 8vw, 5.5rem);
  color: rgba(255, 255, 255, 0.85);
  filter: drop-shadow(0 8px 30px rgba(0, 0, 0, 0.4));
}
.flagship-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8, 10, 24, 0.15) 0%, rgba(8, 10, 24, 0.55) 55%, rgba(8, 10, 24, 0.88) 100%);
  z-index: 1;
}
.flagship-content {
  position: relative;
  z-index: 2;
  margin-top: auto;
  padding: clamp(1.4rem, 3vw, 2.4rem);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  color: #fff;
}
.flagship-panel { display: flex; flex-direction: column; }
.flagship-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  width: fit-content;
  padding: 0.32rem 0.8rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
}
.flagship-badge.is-ongoing {
  background: color-mix(in srgb, var(--accent-color) 30%, transparent);
  border: 1px solid var(--accent-color);
}
.flagship-title {
  margin: 0;
  font-size: clamp(1.4rem, 3.2vw, 2.3rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.02em;
}
.flagship-desc {
  margin: 0;
  max-width: 60ch;
  font-size: clamp(0.92rem, 1.5vw, 1.05rem);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.84);
}
.flagship-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem;
  margin: 0.3rem 0 0.2rem;
}
.flagship-metric { display: flex; flex-direction: column; }
.flagship-metric-num {
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  font-weight: 800;
  line-height: 1;
  background: linear-gradient(135deg, #fff, var(--accent-color));
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}
.flagship-metric-label {
  margin-top: 0.25rem;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.66);
}
.flagship-tech {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}
.flagship-tech span {
  padding: 0.28rem 0.7rem;
  font-size: 0.74rem;
  font-weight: 600;
  border-radius: 999px;
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.18);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
}
.flagship-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 0.4rem;
}
.flagship-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.6rem 1.05rem;
  font-size: 0.85rem;
  font-weight: 600;
  font-family: inherit;
  border-radius: 12px;
  cursor: pointer;
  text-decoration: none;
  color: #0b0e1a;
  background: #fff;
  border: 1px solid transparent;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, color 0.25s ease;
}
.flagship-link:hover { transform: translateY(-2px); box-shadow: 0 12px 26px -12px rgba(0,0,0,0.5); }
.flagship-link.is-ghost {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.35);
}
.flagship-progress {
  display: none;
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  gap: 8px;
  z-index: 6;
}
.flagship-progress span {
  width: 26px;
  height: 4px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--text-primary) 22%, transparent);
  transition: background 0.3s ease, transform 0.3s ease;
}
.flagship-progress span.is-active {
  background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
  transform: scaleY(1.5);
}
.flagship-reel.is-horizontal .flagship-viewport {
  height: 100vh;
  overflow: hidden;
}
.flagship-reel.is-horizontal .flagship-track {
  flex-direction: row;
  flex-wrap: nowrap;
  width: max-content;
  height: 100%;
  align-items: center;
  gap: clamp(1.5rem, 2.5vw, 2.5rem);
  padding: 0 clamp(1.5rem, 4vw, 4rem);
  will-change: transform;
}
.flagship-reel.is-horizontal .flagship-panel {
  width: min(72vw, 980px);
  height: 76vh;
  min-height: 0;
}
.flagship-reel.is-horizontal .flagship-hint { display: inline-flex; }
.flagship-reel.is-horizontal .flagship-progress { display: flex; }
.mg-cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99999;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  border: 1.5px solid var(--primary-color);
  background: color-mix(in srgb, var(--primary-color) 12%, transparent);
  transform: translate3d(-50%, -50%, 0);
  transition: width 0.25s ease, height 0.25s ease, background 0.25s ease,
              border-color 0.25s ease, opacity 0.25s ease;
  opacity: 0;
  mix-blend-mode: difference;
}
.mg-cursor.is-visible { opacity: 1; }
.mg-cursor-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.2s ease, transform 0.2s ease;
  white-space: nowrap;
}
.mg-cursor.is-active {
  width: 84px;
  height: 84px;
  background: var(--primary-color);
  border-color: transparent;
  mix-blend-mode: normal;
}
.mg-cursor.is-active .mg-cursor-label { opacity: 1; transform: scale(1); }
@media (max-width: 768px) {
  .flagship-panel { min-height: 280px; }
  .flagship-content { padding: 1.25rem; }
}
@media (hover: none), (pointer: coarse) {
  .mg-cursor { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .flagship-media img { transform: none; }
  .flagship-hint i { animation: none; }
  .mg-cursor { transition: opacity 0.2s ease; }
}
.tech-marquee {
  position: relative;
  overflow: hidden;
  margin: 0 0 clamp(1.5rem, 4vw, 2.5rem);
  padding: 0.65rem 0;
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.tech-marquee-track {
  display: flex;
  width: max-content;
  animation: techMarquee 38s linear infinite;
}
.tech-marquee:hover .tech-marquee-track { animation-play-state: paused; }
.tech-marquee-group {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}
.tech-marquee-group span {
  display: inline-flex;
  align-items: center;
  padding: 0 1.5rem;
  font-size: clamp(1rem, 2.4vw, 1.5rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: transparent;
  -webkit-text-stroke: 1px color-mix(in srgb, var(--text-primary) 45%, transparent);
  text-transform: uppercase;
  white-space: nowrap;
  transition: color 0.3s ease, -webkit-text-stroke-color 0.3s ease;
}
.tech-marquee-group span:hover {
  color: var(--primary-color);
  -webkit-text-stroke-color: transparent;
}
.tech-marquee-group span::after {
  content: "";
  width: 6px;
  height: 6px;
  margin-left: 3rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--primary-color) 60%, transparent);
  -webkit-text-stroke: 0;
}
@keyframes techMarquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .tech-marquee-track { animation: none; transform: translateX(-12%); }
}
.project-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: center;
  margin: 0 0 clamp(1.5rem, 4vw, 2.25rem);
}
.project-filter {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.5rem 1.05rem;
  border-radius: 999px;
  color: var(--text-secondary);
  background: color-mix(in srgb, var(--bg-secondary) 60%, transparent);
  border: 1px solid var(--border-color);
  transition: transform 0.2s ease, color 0.2s ease, border-color 0.2s ease,
              background 0.2s ease, box-shadow 0.2s ease;
}
.project-filter:hover { transform: translateY(-2px); color: var(--text-primary); }
.project-filter.is-active {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  box-shadow: 0 10px 22px -10px color-mix(in srgb, var(--primary-color) 70%, transparent);
}
.project-filter .pf-count {
  margin-left: 0.4rem;
  font-size: 0.72rem;
  opacity: 0.7;
}
.youtube-preview { position: relative; }
.youtube-preview .yt-hover-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.youtube-preview .yt-hover-frame.is-in { opacity: 1; }
.youtube-preview.is-previewing .youtube-overlay { opacity: 0; }
.project-image .project-thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 0;
  transition: transform var(--transition-medium, 0.3s ease);
}
.project-image:has(.project-thumb) .project-placeholder {
  display: none;
}
.project-image .project-overlay {
  z-index: 2;
}
.project-image .project-tech-stack {
  z-index: 2;
}
.project-card:hover .project-thumb {
  transform: scale(1.05);
}
.project-detail-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 1rem;
  padding: 0.5rem 1.05rem;
  border: 1.5px solid color-mix(in srgb, var(--primary-color) 42%, var(--border-color));
  border-radius: 10px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--primary-color);
  background: transparent;
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.project-detail-link i { transition: transform 0.2s ease; }
.project-detail-link:hover {
  background: color-mix(in srgb, var(--primary-color) 12%, transparent);
  border-color: var(--primary-color);
  transform: translateY(-1px);
}
.project-detail-link:hover i { transform: translateX(3px); }
.project-card.has-detail { cursor: default; }
/* fixes.css */
.profile-actions {
  flex-wrap: wrap;          
}
.profile-actions .btn {
  min-width: 0;             
  flex: 1 1 8.5rem;
  text-align: center;
  white-space: normal;      
  height: auto;             
}
.profile-actions .btn span {
  min-width: 0;
  white-space: normal;      
  overflow-wrap: break-word;
  line-height: 1.25;
}
.profile-stats .stat-item {
  padding: 0.95rem;         
  gap: 0.7rem;              
}
.profile-stats .stat-icon {
  width: 34px;              
  height: 34px;
  font-size: 1rem;
}
.stat-content {
  min-width: 0;             
}
.stat-label {
  white-space: normal;      
  overflow-wrap: break-word;
  word-break: normal;       
  hyphens: none;
  line-height: 1.25;
}
.profile-stats .stat-label {
  font-size: 0.78rem;
  letter-spacing: 0.01em;
}
.profile-stats .stat-number {
  font-size: 1.3rem;        
}
.stat-number {
  overflow-wrap: normal;
}
@media (min-width: 1024px) {
  .publications-timeline {
    max-width: 920px;
    margin-left: auto;
    margin-right: auto;
  }
  .publication-item {
    margin-bottom: 1.5rem;   
  }
  .publication-header {
    padding: 1.15rem 1.6rem; 
  }
  .publication-content {
    padding: 1.5rem 1.6rem;  
  }
  .experience-card {
    padding: 1.6rem;
  }
  .research-area-card {
    padding: 1.6rem;
  }
}
@media (min-width: 1400px) {
  .publications-timeline {
    max-width: 980px;
  }
}
.hero-subtitle {
  position: relative;
}
.hero-subtitle::after {
  content: '';
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 3px;
  vertical-align: -0.12em;
  background: var(--primary-color);
  animation: heroCaretBlink 1s steps(1) infinite;
  border-radius: 1px;
}
@keyframes heroCaretBlink { 0%,49%{opacity:1;} 50%,100%{opacity:0;} }
@media (prefers-reduced-motion: reduce) {
  .hero-subtitle::after { animation: none; opacity: 0.85; }
}
.academic-profiles {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.25rem;
  position: relative;
  z-index: 2;
}
.academic-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.9rem;
  border-radius: 12px;
  border: 1px solid var(--border-color);
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast),
              border-color var(--transition-fast), background var(--transition-fast);
}
.academic-btn i { font-size: 1rem; color: var(--primary-color); }
.academic-btn.scholar i  { color: var(--primary-color); }
.academic-btn.researchgate i { color: #00ccbb; }
.academic-btn.orcid i { color: #a6ce39; }
.academic-btn:hover {
  transform: translateY(-2px);
  border-color: var(--primary-color);
  box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}
.academic-btn:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 2px; }
.academic-btn-label { white-space: nowrap; }
.scholar-citations {
  display: none;
  align-items: center;
  gap: 4px;
  margin-left: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.4;
}
.scholar-citations.has-count { display: inline-flex; }
.scholar-cite-label { opacity: 0.9; font-weight: 600; }
.scholar-live-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 0 0 rgba(74,222,128,0.7);
  animation: scholarLivePulse 1.8s infinite;
}
@keyframes scholarLivePulse {
  0%   { box-shadow: 0 0 0 0 rgba(74,222,128,0.6); }
  70%  { box-shadow: 0 0 0 6px rgba(74,222,128,0); }
  100% { box-shadow: 0 0 0 0 rgba(74,222,128,0); }
}
@media (prefers-reduced-motion: reduce) { .scholar-live-dot { animation: none; } }
.publication-item.upcoming { border-left: 3px solid var(--accent-color); }
.pub-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  margin-right: 8px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent-color), var(--primary-color));
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  vertical-align: middle;
}
.action-btn.upcoming-btn {
  opacity: 0.85;
  cursor: default;
}
.action-btn.upcoming-btn:hover { transform: none; }
.hero-stats .stat-link { text-decoration: none; cursor: pointer; transition: transform var(--transition-fast); }
.hero-stats .stat-link:hover { transform: translateY(-3px); }
.hero-stats .stat-link:hover .stat-number { filter: drop-shadow(0 0 10px var(--primary-color)); }
.stat-live-dot {
  display: inline-block;
  width: 7px; height: 7px; margin-left: 4px;
  border-radius: 50%;
  background: #4ade80;
  vertical-align: middle;
  box-shadow: 0 0 0 0 rgba(74,222,128,0.7);
  animation: statLivePulse 1.8s infinite;
}
@keyframes statLivePulse {
  0% { box-shadow: 0 0 0 0 rgba(74,222,128,0.6); }
  70% { box-shadow: 0 0 0 7px rgba(74,222,128,0); }
  100% { box-shadow: 0 0 0 0 rgba(74,222,128,0); }
}
@media (prefers-reduced-motion: reduce) { .stat-live-dot { animation: none; } }
.custom-cursor {
  width: 34px; height: 34px;
  border: none !important;
  border-radius: 50%;
  background: conic-gradient(from 0deg, var(--primary-color), var(--secondary-color), var(--accent-color), var(--primary-color));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--primary-color) 55%, transparent));
  animation: cursorSpin 4s linear infinite;
  transition: width 0.25s cubic-bezier(.2,.8,.2,1), height 0.25s cubic-bezier(.2,.8,.2,1),
              background 0.3s ease, opacity 0.25s ease, backdrop-filter 0.25s ease;
  mix-blend-mode: normal;
}
@keyframes cursorSpin { to { transform: translate(-50%, -50%) rotate(360deg); } }
.cursor-dot {
  width: 7px; height: 7px;
  background: var(--primary-color);
  box-shadow: 0 0 8px var(--primary-color);
  transition: width 0.2s ease, height 0.2s ease, opacity 0.2s ease;
}
.custom-cursor.cursor-hover {
  width: 60px; height: 60px;
  background: transparent;
  -webkit-mask: none; mask: none;
  border: 2px solid var(--primary-color) !important;
  backdrop-filter: invert(1) hue-rotate(25deg);
  -webkit-backdrop-filter: invert(1) hue-rotate(25deg);
  animation: none;
  transform: translate(-50%, -50%);
}
.cursor-dot.cursor-hover { width: 0; height: 0; opacity: 0; }
.custom-cursor.cursor-click { transform: translate(-50%, -50%) scale(0.8); }
@media (prefers-reduced-motion: reduce) {
  .custom-cursor { animation: none; }
.awards {
  padding: clamp(3rem, 8vw, 6rem) 0;
  background:
    linear-gradient(135deg, var(--bg-secondary) 0%, rgba(var(--accent-primary-rgb), 0.03) 100%),
    radial-gradient(circle at 70% 30%, rgba(var(--accent-tertiary-rgb), 0.05) 0%, transparent 55%);
  position: relative;
}
.awards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: clamp(1rem, 2.5vw, 1.75rem);
  margin-top: clamp(1.5rem, 4vw, 2.5rem);
}
.award-card {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  min-width: 0;                       
  padding: clamp(1.1rem, 3vw, 1.6rem);
  border-radius: 18px;
  border: 1px solid var(--border-color);
  background: color-mix(in srgb, var(--bg-primary) 78%, transparent);
  backdrop-filter: blur(12px) saturate(120%);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  box-shadow: var(--shadow-light);
  position: relative;
  overflow: hidden;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.35s ease,
              border-color 0.35s ease;
}
.award-card::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, var(--primary-color), var(--accent-color));
  opacity: 0.9;
}
.award-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-large);
  border-color: var(--primary-color);
}
.award-icon {
  flex: 0 0 auto;
  width: 3rem;
  height: 3rem;
  display: grid;
  place-items: center;
  border-radius: 14px;
  font-size: 1.35rem;
  color: #fff;
  background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
  box-shadow: 0 6px 16px -6px var(--primary-color);
}
.award-body {
  min-width: 0;                       
  flex: 1 1 auto;
}
.award-title {
  margin: 0 0 0.3rem;
  font-size: clamp(1rem, 2.4vw, 1.15rem);
  font-weight: 700;
  line-height: 1.3;
  color: var(--text-primary);
  overflow-wrap: anywhere;
}
.award-org {
  margin: 0 0 0.55rem;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--text-secondary);
  overflow-wrap: anywhere;
}
.award-date {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  color: var(--primary-color);
  background: color-mix(in srgb, var(--primary-color) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary-color) 30%, transparent);
}
@media (max-width: 480px) {
  .award-card {
    gap: 0.85rem;
    padding: 1.1rem;
  }
  .award-icon {
    width: 2.6rem;
    height: 2.6rem;
    font-size: 1.15rem;
  }
}
#experience .experience-card .highlight-content p {
  overflow-wrap: anywhere;          
}
}
/* modern-ui.css */
.hero--immersive {
  text-align: center;
}
#hero-3d.hero-3d--bg {
  position: absolute;
  inset: 0;
  width: 100%;
  max-width: none;
  min-height: 0;
  margin: 0;
  aspect-ratio: auto;
  display: block;
  z-index: 0;
  pointer-events: none;
}
.hero-3d--bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 48%,
    transparent 30%,
    color-mix(in srgb, var(--bg-primary) 55%, transparent) 72%,
    var(--bg-primary) 100%);
  pointer-events: none;
  z-index: 2;
}
.hero-3d--bg .hero-3d-fallback {
  inset: 22% 30%;
  filter: blur(46px);
  opacity: 0.55;
}
@media (max-width: 768px) {
  .hero-3d--bg .hero-3d-fallback { inset: 18% 18%; filter: blur(38px); }
}
.hero-content.hero-content--center {
  display: flex;
  align-items: center;
  justify-content: center;
  grid-template-columns: none;   
  position: relative;
  z-index: 2;
  width: 100%;
}
.hero-panel {
  position: relative;
  width: min(94vw, 780px);
  text-align: center;
  padding: clamp(1.75rem, 4vw, 3.25rem) clamp(1.5rem, 4vw, 3.25rem);
  border-radius: 30px;
  background: color-mix(in srgb, var(--bg-primary) 62%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary-color) 22%, var(--border-color));
  -webkit-backdrop-filter: blur(20px) saturate(150%);
          backdrop-filter: blur(20px) saturate(150%);
  box-shadow:
    0 40px 90px -30px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(255, 255, 255, 0.04) inset,
    0 1px 0 rgba(255, 255, 255, 0.08) inset;
  overflow: hidden;
}
[data-theme="dark"] .hero-panel {
  background: color-mix(in srgb, var(--bg-primary) 58%, transparent);
  box-shadow:
    0 50px 110px -35px rgba(0, 0, 0, 0.75),
    0 0 0 1px rgba(255, 255, 255, 0.05) inset,
    0 1px 0 rgba(255, 255, 255, 0.07) inset;
}
.hero-panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent,
    var(--primary-color),
    var(--secondary-color),
    var(--accent-color),
    transparent);
  background-size: 200% 100%;
  animation: heroPanelSweep 6s linear infinite;
  opacity: 0.9;
}
@keyframes heroPanelSweep {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-panel::before { animation: none; }
}
.hero-status {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 1.4rem;
  padding: 0.4rem 0.95rem;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text-secondary, var(--text-primary));
  background: color-mix(in srgb, var(--accent-color) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent-color) 35%, transparent);
  border-radius: 999px;
}
.hero-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.6);
  animation: heroStatusPulse 2s ease-out infinite;
}
@keyframes heroStatusPulse {
  0%   { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55); }
  70%  { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); }
  100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-status-dot { animation: none; }
}
.hero--immersive .hero-title { margin-bottom: 1rem; }
.hero--immersive .hero-title .gradient-text {
  font-size: clamp(2.6rem, 7vw, 5rem);
  line-height: 1.02;
}
.hero--immersive .name-first,
.hero--immersive .name-last { display: inline-block; }
.hero--immersive .hero-research-tag {
  margin: 0 auto 1rem;
}
.hero--immersive .hero-subtitle {
  font-size: clamp(1.15rem, 2.4vw, 1.6rem);
  margin: 0 auto 1rem;
}
.hero--immersive .hero-description {
  max-width: 56ch;
  margin: 0 auto 2rem;
}
.hero--immersive .hero-stats {
  justify-content: center;
  gap: 1rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}
.hero--immersive .hero-stats .stat {
  min-width: 104px;
  padding: 0.85rem 1.1rem;
  border-radius: 16px;
  background: color-mix(in srgb, var(--bg-secondary) 55%, transparent);
  border: 1px solid var(--border-color);
  transition: transform var(--transition-fast, 0.2s ease),
              border-color var(--transition-fast, 0.2s ease),
              box-shadow var(--transition-fast, 0.2s ease);
}
.hero--immersive .hero-stats .stat:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--primary-color) 50%, transparent);
  box-shadow: 0 12px 30px -12px color-mix(in srgb, var(--primary-color) 60%, transparent);
}
.hero--immersive .hero-stats .stat-number {
  font-size: 1.9rem;
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero--immersive .hero-buttons.hero-buttons-research {
  justify-content: center;
  align-items: center;
}
.hero-social-group {
  display: inline-flex;
  align-items: center;
  gap: clamp(0.75rem, 2vw, 1.5rem);
}
.btn.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border-radius: 50%;
  font-size: 1.1rem;
  color: var(--text-primary);
  background: color-mix(in srgb, var(--bg-secondary) 60%, transparent);
  border: 1px solid var(--border-color);
  transition: transform var(--transition-fast, 0.2s ease),
              color var(--transition-fast, 0.2s ease),
              border-color var(--transition-fast, 0.2s ease),
              box-shadow var(--transition-fast, 0.2s ease);
}
.btn.btn-icon:hover {
  transform: translateY(-3px);
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  box-shadow: 0 12px 26px -10px color-mix(in srgb, var(--primary-color) 70%, transparent);
}
.section-header { position: relative; }
.section-title {
  letter-spacing: -0.02em;
}
.section-header .section-title::after {
  content: "";
  display: block;
  width: 64px;
  height: 4px;
  margin: 0.9rem auto 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--primary-color), var(--secondary-color), var(--accent-color));
  background-size: 200% 100%;
  animation: heroPanelSweep 5s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .section-header .section-title::after { animation: none; }
}
.stat-live-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22c55e;
  vertical-align: middle;
  animation: heroStatusPulse 2.4s ease-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .stat-live-dot { animation: none; }
}
.awards-grid-v2 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr));
  gap: clamp(1.25rem, 2.6vw, 1.9rem);
  margin-top: clamp(1.75rem, 4vw, 2.75rem);
}
.award-card-v2 {
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;
  border-radius: 20px;
  overflow: hidden;
  background: color-mix(in srgb, var(--bg-primary) 80%, transparent);
  border: 1px solid var(--border-color);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
          backdrop-filter: blur(12px) saturate(120%);
  box-shadow: var(--shadow-light);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.4s ease,
              border-color 0.4s ease;
}
.award-card-v2:hover {
  transform: translateY(-7px);
  box-shadow: 0 26px 60px -24px color-mix(in srgb, var(--primary-color) 55%, transparent),
              var(--shadow-large);
  border-color: color-mix(in srgb, var(--primary-color) 55%, transparent);
}
.award-photo {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background:
    radial-gradient(120% 120% at 20% 0%, color-mix(in srgb, var(--primary-color) 32%, transparent), transparent 60%),
    linear-gradient(135deg,
      color-mix(in srgb, var(--primary-color) 26%, var(--bg-secondary)),
      color-mix(in srgb, var(--secondary-color) 26%, var(--bg-secondary)));
  border-bottom: 1px solid var(--border-color);
}
.award-photo-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 1;
}
.award-photo-fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: clamp(2.4rem, 6vw, 3.2rem);
  color: color-mix(in srgb, var(--text-primary) 28%, transparent);
  text-shadow: 0 4px 18px color-mix(in srgb, var(--primary-color) 40%, transparent);
}
.award-photo:has(.award-photo-img) .award-photo-fallback { display: none; }
.award-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.14) 50%, transparent 65%);
  transform: translateX(-120%);
  transition: transform 0.7s ease;
  z-index: 2;
  pointer-events: none;
}
.award-card-v2:hover .award-photo::after { transform: translateX(120%); }
.award-rank {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 3;
  padding: 0.3rem 0.7rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border-radius: 999px;
  color: #1f2937;
  background: linear-gradient(135deg, #e2e8f0, #cbd5e1);
  box-shadow: 0 4px 14px -4px rgba(0, 0, 0, 0.4);
}
.award-card-v2[data-rank="honor"]   .award-rank { background: linear-gradient(135deg, #fcd34d, #f59e0b); color: #422006; }
.award-card-v2[data-rank="bronze"]  .award-rank { background: linear-gradient(135deg, #f0a868, #c2682b); color: #2a1505; }
.award-card-v2[data-rank="finalist"].award-card-v2 .award-rank {
  background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
  color: #fff;
}
.award-content {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.15rem 1.25rem 0.75rem;
  flex: 1 1 auto;
}
.award-card-v2 .award-title {
  margin: 0;
  font-size: clamp(1.02rem, 2.3vw, 1.18rem);
  font-weight: 700;
  line-height: 1.3;
  color: var(--text-primary);
  overflow-wrap: anywhere;
}
.award-card-v2 .award-org {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--text-secondary);
  overflow-wrap: anywhere;
}
.award-card-v2 .award-date {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: auto;
  width: fit-content;
  padding: 0.3rem 0.7rem;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: 999px;
  color: var(--primary-color);
  background: color-mix(in srgb, var(--primary-color) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary-color) 28%, transparent);
}
.award-card-v2 .award-date i { font-size: 0.72rem; opacity: 0.85; }
.award-actions {
  padding: 0.5rem 1.25rem 1.25rem;
}
.award-cert-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.7rem 1rem;
  font-size: 0.9rem;
  font-weight: 600;
  font-family: inherit;
  border-radius: 12px;
  cursor: pointer;
  text-decoration: none;
  color: #fff;
  border: 1px solid transparent;
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  box-shadow: 0 10px 24px -12px color-mix(in srgb, var(--primary-color) 70%, transparent);
  transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
}
.award-cert-btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.05);
  box-shadow: 0 16px 30px -12px color-mix(in srgb, var(--primary-color) 80%, transparent);
}
.award-cert-btn:active { transform: translateY(0); }
.award-cert-btn .award-cert-ext { font-size: 0.72rem; opacity: 0.85; }
.award-cert-btn--pending {
  cursor: not-allowed;
  color: var(--text-secondary);
  background: color-mix(in srgb, var(--bg-secondary) 70%, transparent);
  border: 1px dashed color-mix(in srgb, var(--primary-color) 35%, var(--border-color));
  box-shadow: none;
}
.award-cert-btn--pending:hover { transform: none; filter: none; box-shadow: none; }
.award-cert-soon {
  margin-left: 0.15rem;
  padding: 0.05rem 0.45rem;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 999px;
  color: var(--primary-color);
  background: color-mix(in srgb, var(--primary-color) 16%, transparent);
}
@media (prefers-reduced-motion: reduce) {
  .award-card-v2, .award-photo::after, .award-cert-btn { transition: none; }
}
.publication-header {
  background: color-mix(in srgb, var(--bg-primary) 88%, transparent);
}
[data-theme="dark"] .publication-header {
  background: color-mix(in srgb, var(--bg-secondary) 78%, transparent);
}
.publication-abstract {
  background: color-mix(in srgb, var(--bg-secondary) 55%, transparent);
}
.research-tag.accent {
  background: linear-gradient(135deg,
    rgba(var(--accent-tertiary-rgb), 0.15), rgba(var(--accent-tertiary-rgb), 0.1));
  color: var(--accent-color);
  border: 1px solid rgba(var(--accent-tertiary-rgb), 0.3);
}
@media (max-width: 768px) {
  .hero-panel {
    width: min(96vw, 560px);
    padding: 1.5rem 1.25rem;
    border-radius: 22px;
  }
  .hero--immersive .hero-stats .stat { min-width: 88px; padding: 0.7rem 0.8rem; }
  .hero-status { font-size: 0.74rem; }
}
@media (max-width: 480px) {
  .awards-grid-v2 { grid-template-columns: 1fr; }
}
.skills-container {
  align-items: stretch;                 
}
.skills-container .skill-category-card:nth-child(3) {
  grid-column: auto;                    
}
.skills-container .skill-category-card {
  height: 100%;                         
}
/* multipage.css */
.mp-domain-header {
  grid-column: 1 / -1;               
  display: flex;
  align-items: center;
  gap: clamp(0.85rem, 2vw, 1.15rem);
  margin: clamp(1.25rem, 3vw, 2.25rem) 0 0.35rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--border-color);
}
.mp-grid > .mp-domain-header:first-child { margin-top: 0; }
.mp-domain-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: clamp(42px, 6vw, 54px);
  height: clamp(42px, 6vw, 54px);
  border-radius: 16px;
  font-size: clamp(1.1rem, 2.4vw, 1.45rem);
  color: #fff;
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  box-shadow: 0 10px 24px -12px color-mix(in srgb, var(--primary-color) 75%, transparent);
}
.mp-domain-heading { min-width: 0; }
.mp-domain-title {
  margin: 0;
  font-size: clamp(1.25rem, 3vw, 1.7rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}
.mp-domain-blurb {
  margin: 0.3rem 0 0;
  font-size: clamp(0.85rem, 1.6vw, 0.95rem);
  line-height: 1.5;
  color: var(--text-secondary);
  max-width: 66ch;
}
.mp-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: center;
  margin: 0 0 clamp(1.75rem, 4vw, 2.5rem);
}
.mp-chip {
  -webkit-appearance: none;
          appearance: none;
  cursor: pointer;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 1.05rem;
  border-radius: 999px;
  color: var(--text-secondary);
  background: color-mix(in srgb, var(--bg-secondary) 60%, transparent);
  border: 1px solid var(--border-color);
  transition: transform var(--transition-fast, 0.2s ease),
              color var(--transition-fast, 0.2s ease),
              border-color var(--transition-fast, 0.2s ease),
              background var(--transition-fast, 0.2s ease),
              box-shadow var(--transition-fast, 0.2s ease);
}
.mp-chip i { font-size: 0.82em; opacity: 0.85; }
.mp-chip:hover { transform: translateY(-2px); color: var(--text-primary); }
.mp-chip:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}
.mp-chip.is-active {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  box-shadow: 0 10px 22px -10px color-mix(in srgb, var(--primary-color) 70%, transparent);
}
.mp-chip.is-active i { opacity: 1; }
.mp-chip-count {
  font-size: 0.72rem;
  font-weight: 700;
  opacity: 0.7;
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text-primary) 10%, transparent);
}
.mp-chip.is-active .mp-chip-count {
  opacity: 0.95;
  background: rgba(255, 255, 255, 0.22);
}
.mp-hidden { display: none !important; }
.mp-reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.mp-reveal.mp-in {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .mp-reveal { opacity: 1; transform: none; transition: none; }
}
.mp-card-cta {
  margin-top: 1.1rem;
  padding-top: 0.9rem;
  border-top: 1px solid color-mix(in srgb, var(--border-color) 70%, transparent);
}
.mp-view-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 1.05rem;
  border: 1.5px solid color-mix(in srgb, var(--primary-color) 42%, var(--border-color));
  border-radius: 10px;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  color: var(--primary-color);
  background: transparent;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.mp-view-link i { transition: transform var(--transition-fast, 0.2s ease); }
.mp-view-link:hover {
  background: color-mix(in srgb, var(--primary-color) 12%, transparent);
  border-color: var(--primary-color);
  transform: translateY(-1px);
}
.mp-view-link:hover i { transform: translateX(3px); }
.mp-view-link:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 3px;
  border-radius: 4px;
}
.mp-soon-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.32rem 0.75rem;
  border-radius: 999px;
  color: var(--text-secondary);
  background: color-mix(in srgb, var(--bg-secondary) 70%, transparent);
  border: 1px dashed color-mix(in srgb, var(--primary-color) 35%, var(--border-color));
}
.mp-soon-badge i { font-size: 0.9em; opacity: 0.8; }
.mp-pub-group { margin-bottom: clamp(1.5rem, 4vw, 2.5rem); }
.mp-pub-group-head {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin: clamp(1rem, 3vw, 2rem) 0 1.4rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--border-color);
}
.mp-pub-group:first-child .mp-pub-group-head { margin-top: 0; }
.mp-pub-group-title {
  margin: 0;
  font-size: clamp(1.2rem, 2.8vw, 1.55rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}
.mp-pub-group-count {
  margin-left: auto;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-secondary);
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg-secondary) 65%, transparent);
  border: 1px solid var(--border-color);
}
.detail-page {
  padding-top: calc(4rem + var(--safe-area-inset-top, 0px));
  padding-bottom: clamp(3rem, 8vw, 6rem);
  min-height: 100vh;
  overflow-x: hidden;            
  background:
    linear-gradient(135deg, var(--bg-secondary) 0%, rgba(var(--accent-primary-rgb), 0.02) 100%),
    radial-gradient(circle at 78% 8%, rgba(var(--accent-tertiary-rgb), 0.05) 0%, transparent 45%);
}
.detail-article {
  width: 100%;
  max-width: 780px;
  margin: 0 auto;
  padding-inline: clamp(1.15rem, 5vw, 1.75rem);
}
.detail-back {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  width: fit-content;
  margin: 0 0 clamp(1.25rem, 3vw, 1.75rem);
  padding: 0.5rem 1rem;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  font-size: 0.84rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--text-secondary);
  background: color-mix(in srgb, var(--bg-secondary) 45%, transparent);
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease, gap 0.2s ease;
}
.detail-back:hover {
  color: var(--primary-color);
  border-color: color-mix(in srgb, var(--primary-color) 50%, var(--border-color));
  background: color-mix(in srgb, var(--primary-color) 8%, transparent);
}
.detail-related .detail-back { margin-bottom: 0; }
.detail-back i { transition: transform var(--transition-fast, 0.2s ease); }
.detail-back:hover i { transform: translateX(-3px); }
.detail-back:hover { color: var(--primary-color); gap: 0.7rem; }
.detail-back:hover i { transform: translateX(-3px); }
.detail-hero {
  margin-bottom: clamp(1.75rem, 4vw, 2.75rem);
}
.detail-domain-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.detail-domain-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.32rem 0.8rem;
  border-radius: 999px;
  text-decoration: none;
  color: var(--primary-color);
  background: color-mix(in srgb, var(--primary-color) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary-color) 26%, transparent);
  transition: transform var(--transition-fast, 0.2s ease), background var(--transition-fast, 0.2s ease);
}
a.detail-domain-tag:hover {
  transform: translateY(-2px);
  background: color-mix(in srgb, var(--primary-color) 18%, transparent);
}
.detail-title {
  margin: 0 0 0.9rem;
  font-size: clamp(1.7rem, 5vw, 3rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--text-primary);
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
}
.detail-status {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.2rem;
  padding: 0.38rem 0.9rem;
  font-size: 0.8rem;
  font-weight: 600;
  border-radius: 999px;
  color: var(--text-secondary);
  background: color-mix(in srgb, var(--accent-color) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent-color) 35%, transparent);
}
.detail-status.is-ongoing {
  color: #b45309;
  background: color-mix(in srgb, #f59e0b 14%, transparent);
  border-color: color-mix(in srgb, #f59e0b 40%, transparent);
}
[data-theme="dark"] .detail-status.is-ongoing { color: #fbbf24; }
.detail-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
}
.detail-status.is-ongoing .detail-status-dot { background: #f59e0b; }
.detail-lead {
  margin: 0 0 1.6rem;
  font-size: clamp(1.05rem, 2.2vw, 1.2rem);
  line-height: 1.65;
  color: var(--text-secondary);
}
.detail-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
}
.detail-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.15rem;
  font-size: 0.9rem;
  font-weight: 600;
  font-family: inherit;
  border-radius: 12px;
  cursor: pointer;
  text-decoration: none;
  color: var(--text-primary);
  background: color-mix(in srgb, var(--bg-primary) 80%, transparent);
  border: 1px solid var(--border-color);
  transition: transform 0.25s ease, box-shadow 0.25s ease,
              color 0.25s ease, background 0.25s ease, border-color 0.25s ease;
}
.detail-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px -14px color-mix(in srgb, var(--primary-color) 70%, transparent);
  border-color: color-mix(in srgb, var(--primary-color) 45%, transparent);
}
.detail-link.is-primary {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  box-shadow: 0 10px 24px -12px color-mix(in srgb, var(--primary-color) 70%, transparent);
}
.detail-link.is-primary:hover { filter: brightness(1.05); }
.detail-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1rem, 3vw, 2rem);
  margin: clamp(1.75rem, 4vw, 2.5rem) 0;
  padding: clamp(1.25rem, 3vw, 1.75rem);
  border-radius: 20px;
  background: color-mix(in srgb, var(--bg-primary) 78%, transparent);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-light);
}
.detail-metric {
  flex: 1 1 120px;
  min-width: 110px;
}
.detail-metric-num {
  font-size: clamp(1.7rem, 4vw, 2.4rem);
  font-weight: 800;
  line-height: 1;
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}
.detail-metric-label {
  margin-top: 0.4rem;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.detail-body { margin-top: clamp(1.5rem, 4vw, 2.5rem); }
.detail-section { margin-bottom: clamp(1.75rem, 4vw, 2.75rem); }
.detail-section-title {
  margin: 0 0 0.9rem;
  font-size: clamp(1.25rem, 3vw, 1.6rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}
.detail-section-title::before {
  content: "";
  display: inline-block;
  width: 22px;
  height: 3px;
  margin-right: 0.6rem;
  vertical-align: middle;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
}
.detail-prose { color: var(--text-secondary); }
.detail-prose p {
  margin: 0 0 1.1rem;
  font-size: 1rem;
  line-height: 1.75;
}
.detail-prose strong { color: var(--text-primary); font-weight: 700; }
.detail-prose a {
  color: var(--primary-color);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--primary-color) 40%, transparent);
  text-underline-offset: 2px;
}
.detail-prose a:hover { text-decoration-color: var(--primary-color); }
.detail-prose ul,
.detail-prose ol {
  margin: 0 0 1.2rem;
  padding-left: 1.35rem;
  line-height: 1.7;
}
.detail-prose li { margin-bottom: 0.5rem; }
.detail-prose ul li::marker { color: var(--primary-color); }
.detail-prose code {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.88em;
  padding: 0.12em 0.4em;
  border-radius: 6px;
  background: color-mix(in srgb, var(--bg-secondary) 80%, transparent);
  border: 1px solid var(--border-color);
}
.detail-prose blockquote {
  margin: 0 0 1.2rem;
  padding: 0.6rem 0 0.6rem 1.1rem;
  border-left: 3px solid var(--primary-color);
  color: var(--text-secondary);
  font-style: italic;
}
.detail-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.5rem 0 1.5rem;
}
.detail-related {
  margin-top: clamp(2rem, 5vw, 3rem);
  padding-top: clamp(1.5rem, 4vw, 2.25rem);
  border-top: 1px solid var(--border-color);
}
.detail-related-title {
  margin: 0 0 1.2rem;
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}
.mp-related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: 1rem;
}
.mp-related-card {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 1.1rem 1.2rem;
  border-radius: 16px;
  text-decoration: none;
  color: inherit;
  background: color-mix(in srgb, var(--bg-primary) 80%, transparent);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-light);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.3s ease, border-color 0.3s ease;
}
.mp-related-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px -20px color-mix(in srgb, var(--primary-color) 55%, transparent);
  border-color: color-mix(in srgb, var(--primary-color) 45%, transparent);
}
.mp-related-kicker {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--primary-color);
}
.mp-related-name {
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text-primary);
}
.mp-related-meta {
  font-size: 0.82rem;
  color: var(--text-secondary);
}
@media (max-width: 640px) {
  .mp-domain-header { gap: 0.75rem; }
  .mp-filters { justify-content: flex-start; }
  .detail-links { gap: 0.55rem; }
  .detail-link { flex: 1 1 auto; justify-content: center; }
  .detail-metrics { padding: 1.1rem; gap: 0.9rem 1.1rem; }
  .detail-metric { flex: 1 1 42%; min-width: 0; }
  .detail-metric-num { font-size: clamp(1.5rem, 8vw, 2rem); }
  .detail-metric-label { overflow-wrap: break-word; }
  .detail-cover { max-height: 300px; border-radius: 14px; }
  .detail-figure img { border-radius: 10px; }
  .detail-domain-tag { font-size: 0.7rem; padding: 0.28rem 0.65rem; }
  .detail-prose p, .detail-prose li { font-size: 0.96rem; line-height: 1.7; }
  .detail-section-title { font-size: clamp(1.2rem, 5.5vw, 1.5rem); }
}
@media (max-width: 380px) {
  .detail-title { font-size: 1.55rem; }
}
.detail-cover {
  display: block;
  width: 100%;
  max-height: 420px;
  object-fit: cover;
  border-radius: 18px;
  margin: 0 0 clamp(1.5rem, 4vw, 2.25rem);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-medium, 0 8px 24px rgba(0,0,0,.12));
}
.detail-figure { margin: 0 0 1.25rem; }
.detail-figure img {
  display: block;
  width: 100%;
  border-radius: 14px;
  border: 1px solid var(--border-color);
  background: var(--bg-secondary);
  box-shadow: var(--shadow-light);
}
.detail-figure figcaption {
  margin-top: 0.6rem;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--text-secondary);
}
/* assistant-widget.css */
:root {
  --ask-glow-1-rgb: var(--accent-primary-rgb);
  --ask-glow-2-rgb: var(--accent-tertiary-rgb);
  --ask-glow-3-rgb: var(--accent-secondary-rgb);
}
.ask-fab {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 1200;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.55);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  backdrop-filter: blur(18px) saturate(180%);
  color: #fff;
  font-size: 1.35rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.7),
    inset 0 -6px 10px rgba(255, 255, 255, 0.08),
    0 8px 28px rgba(var(--ask-glow-1-rgb), 0.45),
    0 2px 14px rgba(var(--ask-glow-2-rgb), 0.3);
  animation: askFabBob 5s ease-in-out infinite;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease;
}
.ask-fab i {
  background: linear-gradient(135deg, rgb(var(--ask-glow-1-rgb)), rgb(var(--ask-glow-2-rgb)));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.2));
}
.ask-fab::before {
  content: '';
  position: absolute;
  top: 8%;
  left: 14%;
  width: 55%;
  height: 40%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 30% 30%, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0) 72%);
  mix-blend-mode: screen;
  pointer-events: none;
  animation: askFabGlare 5s ease-in-out infinite;
}
.ask-fab::after {
  content: '';
  position: absolute;
  inset: -8px;
  z-index: -1;
  border-radius: 50%;
  background: conic-gradient(from 0deg, rgb(var(--ask-glow-1-rgb)), rgb(var(--ask-glow-2-rgb)), rgb(var(--ask-glow-3-rgb)), rgb(var(--ask-glow-1-rgb)));
  filter: blur(11px);
  opacity: 0.5;
  animation: askFabHaloSpin 7s linear infinite;
}
@keyframes askFabBob {
  0%, 100% { transform: translateY(0) scale(1, 1) rotate(0deg); }
  22%      { transform: translateY(-4px) scale(1.045, 0.955) rotate(-4deg); }
  50%      { transform: translateY(1px) scale(0.97, 1.04) rotate(2deg); }
  76%      { transform: translateY(-2px) scale(1.02, 0.98) rotate(-2deg); }
}
@keyframes askFabGlare {
  0%, 100% { opacity: 0.6; transform: translate(0, 0) scale(1); }
  50%      { opacity: 0.95; transform: translate(3px, -2px) scale(1.12); }
}
@keyframes askFabHaloSpin {
  to { transform: rotate(360deg); }
}
.ask-fab:hover,
.ask-fab:focus-visible {
  animation-play-state: paused;
  transform: scale(1.1);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.8),
    inset 0 -6px 10px rgba(255, 255, 255, 0.1),
    0 10px 36px rgba(var(--ask-glow-1-rgb), 0.6),
    0 4px 18px rgba(var(--ask-glow-2-rgb), 0.45);
}
.ask-fab:active {
  transform: scale(0.94);
}
[data-theme="dark"] .ask-fab {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.02));
  border-color: rgba(255, 255, 255, 0.3);
}
.ask-fab-tooltip {
  position: fixed;
  right: 84px;
  bottom: 34px;
  z-index: 1200;
  max-width: 190px;
  padding: 0.5rem 0.85rem;
  background: var(--bg-primary);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-medium);
  font-family: var(--font-secondary);
  font-size: 0.85rem;
  opacity: 0;
  transform: translateX(6px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}
.ask-fab-tooltip--visible {
  opacity: 1;
  transform: translateX(0);
}
.ask-fab-tooltip--left {
  right: auto;
  left: 84px;
  transform: translateX(-6px);
}
.ask-fab-tooltip--left.ask-fab-tooltip--visible {
  transform: translateX(0);
}
.ask-hover-popover {
  border-color: rgba(var(--ask-glow-1-rgb), 0.4);
}
.ask-fab {
  touch-action: none; 
}
.ask-fab--dragging {
  animation-play-state: paused !important;
  cursor: grabbing;
  transition: none;
  transform: scale(1.06);
}
.theme-toggle {
  bottom: 86px !important;
}
#accent-switcher {
  bottom: 150px !important;
}
.ask-panel {
  position: fixed;
  right: 20px;
  bottom: 86px;
  z-index: 1199;
}
.ask-panel--left {
  right: auto;
  left: 20px;
}
.ask-panel {
  width: min(380px, calc(100vw - 40px));
  max-height: min(600px, calc(100vh - 120px));
  display: flex;
  flex-direction: column;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-large);
  overflow: hidden;
  opacity: 0;
  transform: translateY(12px) scale(0.98);
  transition: opacity 0.22s ease, transform 0.22s ease;
}
.ask-panel[hidden] {
  display: none;
}
.ask-panel--open {
  opacity: 1;
  transform: translateY(0) scale(1);
}
@media (prefers-reduced-motion: reduce) {
  .ask-panel,
  .ask-fab,
  .ask-fab-tooltip {
    transition: none !important;
  }
  .ask-fab,
  .ask-fab::before,
  .ask-fab::after {
    animation: none !important;
  }
}
.ask-panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.9rem 1rem;
  border-bottom: 1px solid var(--border-color);
  background: linear-gradient(135deg, rgba(var(--ask-glow-1-rgb), 0.1), rgba(var(--ask-glow-2-rgb), 0.08));
}
.ask-panel-heading {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.ask-panel-title {
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 1rem;
  color: var(--text-primary);
}
.ask-panel-actions {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  flex-shrink: 0;
}
.ask-panel-clear,
.ask-panel-close {
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: 1rem;
  cursor: pointer;
  padding: 0.25rem;
  line-height: 1;
  border-radius: 50%;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.ask-panel-clear {
  font-size: 0.85rem;
}
.ask-panel-clear:hover,
.ask-panel-close:hover {
  background: var(--bg-secondary);
  color: var(--text-primary);
}
.ask-messages {
  flex: 1;
  min-height: 160px;
  max-height: 380px;
  overflow-y: auto;
  padding: 0.9rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.ask-message {
  display: flex;
  flex-direction: column;
}
.ask-message--user {
  align-items: flex-end;
}
.ask-message--assistant {
  align-items: flex-start;
}
.ask-bubble {
  max-width: 88%;
  padding: 0.55rem 0.8rem;
  border-radius: 0.9rem;
  font-family: var(--font-secondary);
  font-size: 0.88rem;
  line-height: 1.45;
  word-break: break-word;
}
.ask-bubble p {
  margin: 0 0 0.5em;
}
.ask-bubble p:last-child {
  margin-bottom: 0;
}
.ask-bubble strong {
  font-weight: 700;
}
.ask-bubble code {
  font-family: var(--font-mono);
  background: rgba(0, 0, 0, 0.06);
  padding: 0.1em 0.35em;
  border-radius: 0.3em;
  font-size: 0.85em;
}
[data-theme="dark"] .ask-bubble code {
  background: rgba(255, 255, 255, 0.14);
}
.ask-message--assistant .ask-bubble a {
  color: rgb(var(--ask-glow-1-rgb));
  text-decoration: underline;
}
.ask-message--user .ask-bubble a {
  color: #fff;
  text-decoration: underline;
}
.ask-message--user .ask-bubble {
  background: linear-gradient(135deg, rgb(var(--ask-glow-1-rgb)), rgb(var(--ask-glow-2-rgb)));
  color: #fff;
  border-bottom-right-radius: 0.25rem;
}
.ask-message--assistant .ask-bubble {
  background: var(--bg-secondary);
  color: var(--text-primary);
  border-bottom-left-radius: 0.25rem;
}
.ask-message--typing .ask-bubble {
  background: linear-gradient(
    100deg,
    var(--bg-secondary) 0%,
    rgba(var(--ask-glow-1-rgb), 0.14) 45%,
    rgba(var(--ask-glow-2-rgb), 0.14) 55%,
    var(--bg-secondary) 100%
  );
  background-size: 220% 100%;
  animation: askShimmerSweep 1.9s ease-in-out infinite;
}
@keyframes askShimmerSweep {
  0%   { background-position: 160% 0; }
  100% { background-position: -60% 0; }
}
.ask-typing-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
}
.ask-cold-start-label {
  font-family: var(--font-secondary);
  font-size: 0.74rem;
  color: var(--text-secondary);
  animation: askFadeIn 0.4s ease both;
}
@keyframes askFadeIn {
  from { opacity: 0; transform: translateY(2px); }
  to   { opacity: 1; transform: translateY(0); }
}
.ask-typing-dots {
  display: flex;
  gap: 6px;
  align-items: center;
  padding: 0.7rem 0.9rem 0.2rem;
}
.ask-typing-wrap .ask-cold-start-label {
  padding: 0 0.9rem 0.6rem;
}
.ask-typing-dots span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgb(var(--ask-glow-1-rgb)), rgb(var(--ask-glow-2-rgb)));
  box-shadow: 0 0 6px rgba(var(--ask-glow-1-rgb), 0.6);
  animation: askTypingPulse 1.2s ease-in-out infinite;
}
.ask-typing-dots span:nth-child(2) { animation-delay: 0.15s; }
.ask-typing-dots span:nth-child(3) { animation-delay: 0.3s; }
@keyframes askTypingPulse {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.45; }
  40%           { transform: scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .ask-typing-dots span,
  .ask-message--typing .ask-bubble {
    animation: none;
    opacity: 0.85;
  }
}
.ask-citations {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.4rem;
  max-width: 88%;
}
.ask-citation-chip {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  padding: 0.2rem 0.5rem;
  border-radius: 1rem;
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  background: var(--bg-primary);
  text-decoration: none;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}
a.ask-citation-chip:hover {
  border-color: rgb(var(--ask-glow-1-rgb));
  color: rgb(var(--ask-glow-1-rgb));
}
.ask-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0 1rem 0.6rem;
}
.ask-chips[hidden] {
  display: none;
}
.ask-chip {
  font-family: var(--font-secondary);
  font-size: 0.76rem;
  padding: 0.4rem 0.7rem;
  border-radius: 1rem;
  border: 1px solid var(--border-color);
  background: var(--bg-secondary);
  color: var(--text-primary);
  cursor: pointer;
  transition: border-color var(--transition-fast), transform var(--transition-fast);
}
.ask-chip:hover {
  border-color: rgb(var(--ask-glow-1-rgb));
  transform: translateY(-1px);
}
.ask-form {
  display: flex;
  gap: 0.5rem;
  padding: 0.7rem;
  border-top: 1px solid var(--border-color);
}
.ask-input {
  flex: 1;
  border: 1px solid var(--border-color);
  background: var(--bg-secondary);
  color: var(--text-primary);
  border-radius: 1.2rem;
  padding: 0.55rem 0.9rem;
  font-family: var(--font-secondary);
  font-size: 0.86rem;
  outline: none;
}
.ask-input:focus {
  border-color: var(--primary-color);
}
.ask-send {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 50%;
  border: none;
  background: var(--primary-color);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--transition-fast);
}
.ask-send:hover {
  transform: scale(1.06);
}
.ask-booking-card {
  margin-top: 0.6rem;
  width: 100%;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.8rem;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  background: var(--bg-primary);
}
.ask-booking-title {
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--text-primary);
  margin: 0 0 0.2rem;
}
.ask-booking-hint {
  font-family: var(--font-secondary);
  font-size: 0.74rem;
  color: var(--text-secondary);
  margin: 0 0 0.1rem;
}
.ask-booking-card label {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-family: var(--font-secondary);
  font-size: 0.74rem;
  color: var(--text-secondary);
}
.ask-booking-card input,
.ask-booking-card textarea {
  border: 1px solid var(--border-color);
  background: var(--bg-secondary);
  color: var(--text-primary);
  border-radius: 0.5rem;
  padding: 0.4rem 0.6rem;
  font-family: var(--font-secondary);
  font-size: 0.82rem;
  resize: vertical;
}
.ask-booking-honeypot {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.ask-booking-submit {
  align-self: flex-start;
  border: none;
  border-radius: 1rem;
  padding: 0.45rem 1rem;
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  color: #fff;
  font-family: var(--font-secondary);
  font-size: 0.8rem;
  cursor: pointer;
}
.ask-booking-submit:disabled {
  opacity: 0.6;
  cursor: default;
}
.ask-booking-actions {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}
.ask-booking-dismiss {
  background: none;
  border: none;
  padding: 0.2rem 0.1rem;
  color: var(--text-secondary);
  font-family: var(--font-secondary);
  font-size: 0.76rem;
  text-decoration: underline;
  cursor: pointer;
}
.ask-booking-dismiss:hover,
.ask-booking-dismiss:focus-visible {
  color: var(--text-primary);
}
.ask-bubble .ask-fresh {
  animation: ask-fresh-in 280ms ease-out both;
}
@keyframes ask-fresh-in {
  from { opacity: 0; transform: translateY(3px); }
  to { opacity: 1; transform: none; }
}
.ask-bubble--streaming p:last-child::after {
  content: '';
  display: inline-block;
  width: 0.45em;
  height: 1em;
  margin-left: 0.15em;
  vertical-align: -0.12em;
  border-radius: 1px;
  background: rgb(var(--ask-glow-1-rgb));
  animation: ask-caret 1s steps(1) infinite;
}
@keyframes ask-caret {
  50% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .ask-bubble .ask-fresh,
  .ask-bubble--streaming p:last-child::after {
    animation: none;
  }
}
.ask-offer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.55rem;
}
.ask-offer-btn {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border-color);
  background: var(--bg-primary);
  color: var(--text-primary);
  border-radius: 1rem;
  padding: 0.35rem 0.8rem;
  font-family: var(--font-secondary);
  font-size: 0.78rem;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
}
.ask-offer-btn:hover,
.ask-offer-btn:focus-visible {
  border-color: var(--primary-color);
  color: var(--primary-color);
}
.ask-offer-btn--primary {
  border-color: transparent;
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  color: #fff;
}
.ask-offer-btn--primary:hover,
.ask-offer-btn--primary:focus-visible {
  color: #fff;
  opacity: 0.92;
}
.ask-booking-status {
  font-size: 0.72rem;
  color: var(--text-secondary);
  margin: 0;
  min-height: 1em;
}
@media (max-width: 768px) {
  .ask-fab {
    right: 15px;
    bottom: 20px;
    width: 52px;
    height: 52px;
  }
  .theme-toggle {
    bottom: 86px !important;
  }
  #accent-switcher {
    bottom: 150px !important;
  }
  .ask-fab-tooltip {
    right: 74px;
    bottom: 30px;
  }
  .ask-panel {
    right: 8px;
    left: 8px;
    bottom: 80px;
    width: auto;
    max-height: min(70vh, 560px);
  }
}
[data-accent="mono"][data-theme="dark"] .ask-send,
[data-accent="mono"][data-theme="dark"] .ask-message--user .ask-bubble,
[data-accent="mono"][data-theme="dark"] .ask-booking-submit,
[data-accent="mono"][data-theme="dark"] .ask-offer-btn--primary,
[data-accent="mono"][data-theme="dark"] .ask-offer-btn--primary:hover {
  color: #0a0a0a;
}
[data-accent="mono"][data-theme="dark"] .ask-message--user .ask-bubble a {
  color: #0a0a0a;
  text-decoration-color: rgba(10, 10, 10, 0.5);
}
[data-booking-item][hidden] {
  display: none !important;
}
/* tokens.css */
:root,
html[data-accent="teal"] {
  --primary: #0B5D56; --primary-rgb: 11, 93, 86;
  --primary-hover: #094D47;
  --primary-ink: #FFFFFF;
  --hl: #8CF0D3; --hl-rgb: 140, 240, 211;
  --hl-hover: #B5F6E3;
  --on-hl: #0C2120;
  --decor: #D8B98B; --decor-rgb: 216, 185, 139;
  --decor-soft: #F1E6D3;
  --decor-ink: #6B4E22;
  --hero: #102525; --hero-rgb: 16, 37, 37;
  --hero-deep: #0C1F1F; --hero-deep-rgb: 8, 20, 20;
  --hero-2: #0F2524;
  --hero-top: #183B39;
  --glow-rgb: 48, 128, 116;
  --glow2-rgb: 29, 74, 69;
  --glow3-rgb: 24, 59, 57;
  --hero-ink: #EAF3EE; --hero-ink-rgb: 234, 243, 238;
  --hero-ink-2: #ABCCC2;
  --mark-mid: #3FB7A0;
  --tint-light: #E9EFEA;
}
html[data-accent="blue"] {
  --primary: #4F46E5; --primary-rgb: 79, 70, 229;
  --primary-hover: #4338CA;
  --hl: #A5B4FC; --hl-rgb: 165, 180, 252;
  --hl-hover: #C7D2FE;
  --on-hl: #1E1B4B;
  --decor: #F472B6; --decor-rgb: 244, 114, 182;
  --decor-soft: #FCE7F3;
  --decor-ink: #9D174D;
  --hero: #15142E; --hero-rgb: 21, 20, 46;
  --hero-deep: #0E0D22; --hero-deep-rgb: 14, 13, 34;
  --hero-2: #141331;
  --hero-top: #26245A;
  --glow-rgb: 99, 102, 241;
  --glow2-rgb: 70, 40, 120;
  --glow3-rgb: 50, 40, 100;
  --hero-ink: #EEF0FF; --hero-ink-rgb: 238, 240, 255;
  --hero-ink-2: #B9BEEA;
  --mark-mid: #818CF8;
  --tint-light: #ECEEFE;
}
html[data-accent="red"] {
  --primary: #BE123C; --primary-rgb: 190, 18, 60;
  --primary-hover: #9F1239;
  --hl: #FDA4AF; --hl-rgb: 253, 164, 175;
  --hl-hover: #FECDD3;
  --on-hl: #4C0519;
  --decor: #F59E0B; --decor-rgb: 245, 158, 11;
  --decor-soft: #FEF3C7;
  --decor-ink: #92400E;
  --hero: #2A0E16; --hero-rgb: 42, 14, 22;
  --hero-deep: #1C090F; --hero-deep-rgb: 28, 9, 15;
  --hero-2: #2A0E17;
  --hero-top: #4A1626;
  --glow-rgb: 225, 29, 72;
  --glow2-rgb: 110, 25, 45;
  --glow3-rgb: 90, 22, 38;
  --hero-ink: #FFF1F3; --hero-ink-rgb: 255, 241, 243;
  --hero-ink-2: #EDB8C1;
  --mark-mid: #FB7185;
  --tint-light: #FDECEF;
}
html[data-accent="orange"] {
  --primary: #C2410C; --primary-rgb: 194, 65, 12;
  --primary-hover: #9A3412;
  --hl: #FDBA74; --hl-rgb: 253, 186, 116;
  --hl-hover: #FED7AA;
  --on-hl: #431407;
  --decor: #FBBF24; --decor-rgb: 251, 191, 36;
  --decor-soft: #FEF3C7;
  --decor-ink: #92400E;
  --hero: #26150A; --hero-rgb: 38, 21, 10;
  --hero-deep: #1A0E06; --hero-deep-rgb: 26, 14, 6;
  --hero-2: #27160B;
  --hero-top: #4A2A12;
  --glow-rgb: 234, 88, 12;
  --glow2-rgb: 110, 50, 15;
  --glow3-rgb: 90, 45, 15;
  --hero-ink: #FFF5EB; --hero-ink-rgb: 255, 245, 235;
  --hero-ink-2: #EBC9A8;
  --mark-mid: #FB923C;
  --tint-light: #FCEFE4;
}
html[data-accent="violet"] {
  --primary: #6D28D9; --primary-rgb: 109, 40, 217;
  --primary-hover: #5B21B6;
  --hl: #C4B5FD; --hl-rgb: 196, 181, 253;
  --hl-hover: #DDD6FE;
  --on-hl: #2E1065;
  --decor: #F0ABFC; --decor-rgb: 240, 171, 252;
  --decor-soft: #FAE8FF;
  --decor-ink: #86198F;
  --hero: #1A1230; --hero-rgb: 26, 18, 48;
  --hero-deep: #110B22; --hero-deep-rgb: 17, 11, 34;
  --hero-2: #1B1333;
  --hero-top: #2E2257;
  --glow-rgb: 124, 58, 237;
  --glow2-rgb: 70, 35, 120;
  --glow3-rgb: 50, 30, 95;
  --hero-ink: #F3EFFF; --hero-ink-rgb: 243, 239, 255;
  --hero-ink-2: #C9BEEB;
  --mark-mid: #A78BFA;
  --tint-light: #F1ECFE;
}
html[data-accent="sky"] {
  --primary: #0369A1; --primary-rgb: 3, 105, 161;
  --primary-hover: #075985;
  --hl: #7DD3FC; --hl-rgb: 125, 211, 252;
  --hl-hover: #BAE6FD;
  --on-hl: #082F49;
  --decor: #FDA4AF; --decor-rgb: 253, 164, 175;
  --decor-soft: #FFE4E6;
  --decor-ink: #9F1239;
  --hero: #0B1A26; --hero-rgb: 11, 26, 38;
  --hero-deep: #07111A; --hero-deep-rgb: 7, 17, 26;
  --hero-2: #0C1C29;
  --hero-top: #153349;
  --glow-rgb: 14, 165, 233;
  --glow2-rgb: 20, 70, 110;
  --glow3-rgb: 18, 55, 85;
  --hero-ink: #F0F9FF; --hero-ink-rgb: 240, 249, 255;
  --hero-ink-2: #AFCBE0;
  --mark-mid: #38BDF8;
  --tint-light: #E8F3FA;
}
html[data-accent="emerald"] {
  --primary: #047857; --primary-rgb: 4, 120, 87;
  --primary-hover: #065F46;
  --hl: #6EE7B7; --hl-rgb: 110, 231, 183;
  --hl-hover: #A7F3D0;
  --on-hl: #022C22;
  --decor: #FCD34D; --decor-rgb: 252, 211, 77;
  --decor-soft: #FEF3C7;
  --decor-ink: #92400E;
  --hero: #0B1F18; --hero-rgb: 11, 31, 24;
  --hero-deep: #07150F; --hero-deep-rgb: 7, 21, 15;
  --hero-2: #0C2119;
  --hero-top: #153A2C;
  --glow-rgb: 16, 185, 129;
  --glow2-rgb: 20, 80, 60;
  --glow3-rgb: 18, 60, 45;
  --hero-ink: #ECFDF5; --hero-ink-rgb: 236, 253, 245;
  --hero-ink-2: #A7D7C3;
  --mark-mid: #34D399;
  --tint-light: #E7F6EF;
}
html[data-accent="mono"] {
  --primary: #171717; --primary-rgb: 23, 23, 23;
  --primary-hover: #000000;
  --hl: #F5F5F5; --hl-rgb: 245, 245, 245;
  --hl-hover: #FFFFFF;
  --on-hl: #0A0A0A;
  --decor: #A3A3A3; --decor-rgb: 163, 163, 163;
  --decor-soft: #EDEDED;
  --decor-ink: #404040;
  --hero: #141414; --hero-rgb: 20, 20, 20;
  --hero-deep: #0A0A0A; --hero-deep-rgb: 10, 10, 10;
  --hero-2: #151515;
  --hero-top: #2A2A2A;
  --glow-rgb: 140, 140, 140;
  --glow2-rgb: 60, 60, 60;
  --glow3-rgb: 50, 50, 50;
  --hero-ink: #F5F5F5; --hero-ink-rgb: 245, 245, 245;
  --hero-ink-2: #BDBDBD;
  --mark-mid: #737373;
  --tint-light: #ECECEC;
}
html[data-accent="graphite"] {
  --primary: #4B5563; --primary-rgb: 75, 85, 99;
  --primary-hover: #374151;
  --primary-ink: #FFFFFF;
  --hl: #C8CDD3; --hl-rgb: 200, 205, 211;
  --hl-hover: #E1E4E8;
  --on-hl: #15171A;
  --decor: #8E99A6; --decor-rgb: 142, 153, 166;
  --decor-soft: color-mix(in srgb, #8E99A6 18%, #17191C);
  --decor-ink: #8E99A6;
  --hero: #121417; --hero-rgb: 18, 20, 23;
  --hero-deep: #0A0B0D; --hero-deep-rgb: 10, 11, 13;
  --hero-2: #14161A;
  --hero-top: #1F2328;
  --glow-rgb: 120, 130, 142;
  --glow2-rgb: 40, 43, 48;
  --glow3-rgb: 31, 34, 38;
  --hero-ink: #ECEEF0; --hero-ink-rgb: 236, 238, 240;
  --hero-ink-2: #A6ADB5;
  --mark-mid: #6B7480;
  --tint-light: #ECEEF0;
}
html[data-theme="dark"][data-accent="graphite"] {
  --page: #0C0D0F;
  --card: #17191C;
  --card-tint: color-mix(in srgb, var(--hl) 7%, #17191C);
  --card-warm: color-mix(in srgb, var(--decor) 7%, #17191C);
  --ink: #ECEEF0; --ink-rgb: 236, 238, 240;
  --ink-2: #A6ADB5;
  --tint: color-mix(in srgb, var(--hl) 11%, #17191C);
  --hero: #121417; --hero-rgb: 18, 20, 23;
  --hero-deep: #0A0B0D; --hero-deep-rgb: 10, 11, 13;
  --hero-2: #14161A;
  --hero-top: #1F2328;
  --glow2-rgb: 40, 43, 48;
  --glow3-rgb: 31, 34, 38;
  --hero-ink: #ECEEF0; --hero-ink-rgb: 236, 238, 240;
  --hero-ink-2: #A6ADB5;
  --glass-light: rgba(23, 25, 28, 0.62);
  --glass-light-solid: rgba(23, 25, 28, 0.95);
  --glass-light-panel: rgba(23, 25, 28, 0.9);
}
html[data-accent="stone"] {
  --primary: #6B6157; --primary-rgb: 107, 97, 87;
  --primary-hover: #544B43;
  --primary-ink: #FFFFFF;
  --hl: #D9D0C3; --hl-rgb: 217, 208, 195;
  --hl-hover: #EAE3D8;
  --on-hl: #1C1915;
  --decor: #A89B8A; --decor-rgb: 168, 155, 138;
  --decor-soft: color-mix(in srgb, #A89B8A 18%, #1A1817);
  --decor-ink: #A89B8A;
  --hero: #151312; --hero-rgb: 21, 19, 18;
  --hero-deep: #0C0B0A; --hero-deep-rgb: 12, 11, 10;
  --hero-2: #171514;
  --hero-top: #24211F;
  --glow-rgb: 150, 138, 122;
  --glow2-rgb: 46, 42, 39;
  --glow3-rgb: 36, 33, 31;
  --hero-ink: #EFECE8; --hero-ink-rgb: 239, 236, 232;
  --hero-ink-2: #B2ABA2;
  --mark-mid: #857868;
  --tint-light: #EFECE8;
}
html[data-theme="dark"][data-accent="stone"] {
  --page: #0F0E0D;
  --card: #1A1817;
  --card-tint: color-mix(in srgb, var(--hl) 7%, #1A1817);
  --card-warm: color-mix(in srgb, var(--decor) 7%, #1A1817);
  --ink: #EFECE8; --ink-rgb: 239, 236, 232;
  --ink-2: #B2ABA2;
  --tint: color-mix(in srgb, var(--hl) 11%, #1A1817);
  --hero: #151312; --hero-rgb: 21, 19, 18;
  --hero-deep: #0C0B0A; --hero-deep-rgb: 12, 11, 10;
  --hero-2: #171514;
  --hero-top: #24211F;
  --glow2-rgb: 46, 42, 39;
  --glow3-rgb: 36, 33, 31;
  --hero-ink: #EFECE8; --hero-ink-rgb: 239, 236, 232;
  --hero-ink-2: #B2ABA2;
  --glass-light: rgba(26, 24, 23, 0.62);
  --glass-light-solid: rgba(26, 24, 23, 0.95);
  --glass-light-panel: rgba(26, 24, 23, 0.9);
}
html[data-accent="sand"] {
  --primary: #7A6440; --primary-rgb: 122, 100, 64;
  --primary-hover: #5F4D31;
  --primary-ink: #FFFFFF;
  --hl: #E2CFA6; --hl-rgb: 226, 207, 166;
  --hl-hover: #EEDFC0;
  --on-hl: #221B0E;
  --decor: #B9A57E; --decor-rgb: 185, 165, 126;
  --decor-soft: color-mix(in srgb, #B9A57E 18%, #1B1814);
  --decor-ink: #B9A57E;
  --hero: #16130F; --hero-rgb: 22, 19, 15;
  --hero-deep: #0D0B08; --hero-deep-rgb: 13, 11, 8;
  --hero-2: #181511;
  --hero-top: #27221A;
  --glow-rgb: 170, 150, 110;
  --glow2-rgb: 48, 42, 33;
  --glow3-rgb: 38, 33, 26;
  --hero-ink: #F1ECE2; --hero-ink-rgb: 241, 236, 226;
  --hero-ink-2: #B8AE9C;
  --mark-mid: #9A845C;
  --tint-light: #F1ECE2;
}
html[data-theme="dark"][data-accent="sand"] {
  --page: #100E0B;
  --card: #1B1814;
  --card-tint: color-mix(in srgb, var(--hl) 7%, #1B1814);
  --card-warm: color-mix(in srgb, var(--decor) 7%, #1B1814);
  --ink: #F1ECE2; --ink-rgb: 241, 236, 226;
  --ink-2: #B8AE9C;
  --tint: color-mix(in srgb, var(--hl) 11%, #1B1814);
  --hero: #16130F; --hero-rgb: 22, 19, 15;
  --hero-deep: #0D0B08; --hero-deep-rgb: 13, 11, 8;
  --hero-2: #181511;
  --hero-top: #27221A;
  --glow2-rgb: 48, 42, 33;
  --glow3-rgb: 38, 33, 26;
  --hero-ink: #F1ECE2; --hero-ink-rgb: 241, 236, 226;
  --hero-ink-2: #B8AE9C;
  --glass-light: rgba(27, 24, 20, 0.62);
  --glass-light-solid: rgba(27, 24, 20, 0.95);
  --glass-light-panel: rgba(27, 24, 20, 0.9);
}
html[data-accent="sage"] {
  --primary: #4F6249; --primary-rgb: 79, 98, 73;
  --primary-hover: #3D4C38;
  --primary-ink: #FFFFFF;
  --hl: #BCCBB8; --hl-rgb: 188, 203, 184;
  --hl-hover: #D3DECF;
  --on-hl: #141A13;
  --decor: #8FA08A; --decor-rgb: 143, 160, 138;
  --decor-soft: color-mix(in srgb, #8FA08A 18%, #171A17);
  --decor-ink: #8FA08A;
  --hero: #121512; --hero-rgb: 18, 21, 18;
  --hero-deep: #0A0C0A; --hero-deep-rgb: 10, 12, 10;
  --hero-2: #141714;
  --hero-top: #202620;
  --glow-rgb: 120, 140, 115;
  --glow2-rgb: 38, 44, 37;
  --glow3-rgb: 30, 35, 29;
  --hero-ink: #EBEFEA; --hero-ink-rgb: 235, 239, 234;
  --hero-ink-2: #A7B0A5;
  --mark-mid: #6E8268;
  --tint-light: #EBEFEA;
}
html[data-theme="dark"][data-accent="sage"] {
  --page: #0C0E0C;
  --card: #171A17;
  --card-tint: color-mix(in srgb, var(--hl) 7%, #171A17);
  --card-warm: color-mix(in srgb, var(--decor) 7%, #171A17);
  --ink: #EBEFEA; --ink-rgb: 235, 239, 234;
  --ink-2: #A7B0A5;
  --tint: color-mix(in srgb, var(--hl) 11%, #171A17);
  --hero: #121512; --hero-rgb: 18, 21, 18;
  --hero-deep: #0A0C0A; --hero-deep-rgb: 10, 12, 10;
  --hero-2: #141714;
  --hero-top: #202620;
  --glow2-rgb: 38, 44, 37;
  --glow3-rgb: 30, 35, 29;
  --hero-ink: #EBEFEA; --hero-ink-rgb: 235, 239, 234;
  --hero-ink-2: #A7B0A5;
  --glass-light: rgba(23, 26, 23, 0.62);
  --glass-light-solid: rgba(23, 26, 23, 0.95);
  --glass-light-panel: rgba(23, 26, 23, 0.9);
}
html[data-accent="slate"] {
  --primary: #475569; --primary-rgb: 71, 85, 105;
  --primary-hover: #334155;
  --primary-ink: #FFFFFF;
  --hl: #B4C2D4; --hl-rgb: 180, 194, 212;
  --hl-hover: #CDD7E4;
  --on-hl: #121821;
  --decor: #8796AA; --decor-rgb: 135, 150, 170;
  --decor-soft: color-mix(in srgb, #8796AA 18%, #161A1F);
  --decor-ink: #8796AA;
  --hero: #11151A; --hero-rgb: 17, 21, 26;
  --hero-deep: #090B0E; --hero-deep-rgb: 9, 11, 14;
  --hero-2: #13171C;
  --hero-top: #1E242C;
  --glow-rgb: 110, 128, 150;
  --glow2-rgb: 36, 41, 49;
  --glow3-rgb: 28, 32, 38;
  --hero-ink: #EAEEF3; --hero-ink-rgb: 234, 238, 243;
  --hero-ink-2: #A4AEBB;
  --mark-mid: #64748B;
  --tint-light: #EAEEF3;
}
html[data-theme="dark"][data-accent="slate"] {
  --page: #0B0D10;
  --card: #161A1F;
  --card-tint: color-mix(in srgb, var(--hl) 7%, #161A1F);
  --card-warm: color-mix(in srgb, var(--decor) 7%, #161A1F);
  --ink: #EAEEF3; --ink-rgb: 234, 238, 243;
  --ink-2: #A4AEBB;
  --tint: color-mix(in srgb, var(--hl) 11%, #161A1F);
  --hero: #11151A; --hero-rgb: 17, 21, 26;
  --hero-deep: #090B0E; --hero-deep-rgb: 9, 11, 14;
  --hero-2: #13171C;
  --hero-top: #1E242C;
  --glow2-rgb: 36, 41, 49;
  --glow3-rgb: 28, 32, 38;
  --hero-ink: #EAEEF3; --hero-ink-rgb: 234, 238, 243;
  --hero-ink-2: #A4AEBB;
  --glass-light: rgba(22, 26, 31, 0.62);
  --glass-light-solid: rgba(22, 26, 31, 0.95);
  --glass-light-panel: rgba(22, 26, 31, 0.9);
}
html[data-accent="onyx"] {
  --primary: #52525B; --primary-rgb: 82, 82, 91;
  --primary-hover: #3F3F46;
  --primary-ink: #FFFFFF;
  --hl: #D4D4D8; --hl-rgb: 212, 212, 216;
  --hl-hover: #E4E4E7;
  --on-hl: #09090B;
  --decor: #A1A1AA; --decor-rgb: 161, 161, 170;
  --decor-soft: color-mix(in srgb, #A1A1AA 18%, #0E0E10);
  --decor-ink: #A1A1AA;
  --hero: #050505; --hero-rgb: 5, 5, 5;
  --hero-deep: #000000; --hero-deep-rgb: 0, 0, 0;
  --hero-2: #070708;
  --hero-top: #141416;
  --glow-rgb: 120, 120, 128;
  --glow2-rgb: 30, 30, 32;
  --glow3-rgb: 22, 22, 24;
  --hero-ink: #F4F4F5; --hero-ink-rgb: 244, 244, 245;
  --hero-ink-2: #A1A1AA;
  --mark-mid: #71717A;
  --tint-light: #F4F4F5;
}
html[data-theme="dark"][data-accent="onyx"] {
  --page: #000000;
  --card: #0E0E10;
  --card-tint: color-mix(in srgb, var(--hl) 7%, #0E0E10);
  --card-warm: color-mix(in srgb, var(--decor) 7%, #0E0E10);
  --ink: #F4F4F5; --ink-rgb: 244, 244, 245;
  --ink-2: #A1A1AA;
  --tint: color-mix(in srgb, var(--hl) 11%, #0E0E10);
  --hero: #050505; --hero-rgb: 5, 5, 5;
  --hero-deep: #000000; --hero-deep-rgb: 0, 0, 0;
  --hero-2: #070708;
  --hero-top: #141416;
  --glow2-rgb: 30, 30, 32;
  --glow3-rgb: 22, 22, 24;
  --hero-ink: #F4F4F5; --hero-ink-rgb: 244, 244, 245;
  --hero-ink-2: #A1A1AA;
  --glass-light: rgba(14, 14, 16, 0.62);
  --glass-light-solid: rgba(14, 14, 16, 0.95);
  --glass-light-panel: rgba(14, 14, 16, 0.9);
}
html[data-accent="midnight"] {
  --primary: #3B4A7A; --primary-rgb: 59, 74, 122;
  --primary-hover: #2E3A61;
  --primary-ink: #FFFFFF;
  --hl: #A9B8E8; --hl-rgb: 169, 184, 232;
  --hl-hover: #C7D1F1;
  --on-hl: #0B1020;
  --decor: #7E8DB8; --decor-rgb: 126, 141, 184;
  --decor-soft: color-mix(in srgb, #7E8DB8 18%, #111726);
  --decor-ink: #7E8DB8;
  --hero: #0D1220; --hero-rgb: 13, 18, 32;
  --hero-deep: #070A13; --hero-deep-rgb: 7, 10, 19;
  --hero-2: #0F1424;
  --hero-top: #1A2238;
  --glow-rgb: 90, 110, 170;
  --glow2-rgb: 30, 38, 60;
  --glow3-rgb: 24, 30, 48;
  --hero-ink: #E9EDF7; --hero-ink-rgb: 233, 237, 247;
  --hero-ink-2: #A3ADC6;
  --mark-mid: #5B6B99;
  --tint-light: #E9EDF7;
}
html[data-theme="dark"][data-accent="midnight"] {
  --page: #080B14;
  --card: #111726;
  --card-tint: color-mix(in srgb, var(--hl) 7%, #111726);
  --card-warm: color-mix(in srgb, var(--decor) 7%, #111726);
  --ink: #E9EDF7; --ink-rgb: 233, 237, 247;
  --ink-2: #A3ADC6;
  --tint: color-mix(in srgb, var(--hl) 11%, #111726);
  --hero: #0D1220; --hero-rgb: 13, 18, 32;
  --hero-deep: #070A13; --hero-deep-rgb: 7, 10, 19;
  --hero-2: #0F1424;
  --hero-top: #1A2238;
  --glow2-rgb: 30, 38, 60;
  --glow3-rgb: 24, 30, 48;
  --hero-ink: #E9EDF7; --hero-ink-rgb: 233, 237, 247;
  --hero-ink-2: #A3ADC6;
  --glass-light: rgba(17, 23, 38, 0.62);
  --glass-light-solid: rgba(17, 23, 38, 0.95);
  --glass-light-panel: rgba(17, 23, 38, 0.9);
}
html[data-accent="plum"] {
  --primary: #6B4A73; --primary-rgb: 107, 74, 115;
  --primary-hover: #553A5C;
  --primary-ink: #FFFFFF;
  --hl: #D9C2DE; --hl-rgb: 217, 194, 222;
  --hl-hover: #E9DAEC;
  --on-hl: #1A1020;
  --decor: #A98BB0; --decor-rgb: 169, 139, 176;
  --decor-soft: color-mix(in srgb, #A98BB0 18%, #1A141C);
  --decor-ink: #A98BB0;
  --hero: #150F17; --hero-rgb: 21, 15, 23;
  --hero-deep: #0B080C; --hero-deep-rgb: 11, 8, 12;
  --hero-2: #171119;
  --hero-top: #251B28;
  --glow-rgb: 140, 110, 150;
  --glow2-rgb: 45, 34, 48;
  --glow3-rgb: 34, 26, 37;
  --hero-ink: #F1EAF2; --hero-ink-rgb: 241, 234, 242;
  --hero-ink-2: #B6A6BA;
  --mark-mid: #86688E;
  --tint-light: #F1EAF2;
}
html[data-theme="dark"][data-accent="plum"] {
  --page: #0E0A0F;
  --card: #1A141C;
  --card-tint: color-mix(in srgb, var(--hl) 7%, #1A141C);
  --card-warm: color-mix(in srgb, var(--decor) 7%, #1A141C);
  --ink: #F1EAF2; --ink-rgb: 241, 234, 242;
  --ink-2: #B6A6BA;
  --tint: color-mix(in srgb, var(--hl) 11%, #1A141C);
  --hero: #150F17; --hero-rgb: 21, 15, 23;
  --hero-deep: #0B080C; --hero-deep-rgb: 11, 8, 12;
  --hero-2: #171119;
  --hero-top: #251B28;
  --glow2-rgb: 45, 34, 48;
  --glow3-rgb: 34, 26, 37;
  --hero-ink: #F1EAF2; --hero-ink-rgb: 241, 234, 242;
  --hero-ink-2: #B6A6BA;
  --glass-light: rgba(26, 20, 28, 0.62);
  --glass-light-solid: rgba(26, 20, 28, 0.95);
  --glass-light-panel: rgba(26, 20, 28, 0.9);
}
:root {
  --page: #F4F3EE;
  --card: #FFFFFF;
  --card-tint: color-mix(in srgb, var(--tint-light) 70%, #FFFFFF);
  --card-warm: color-mix(in srgb, var(--decor-soft) 35%, #FFFFFF);
  --ink: #152526; --ink-rgb: 21, 37, 38;
  --ink-2: #425B58;
  --line: rgba(var(--ink-rgb), 0.11);
  --line-strong: rgba(var(--ink-rgb), 0.2);
  --tint: var(--tint-light);
  --hero-line: rgba(var(--hero-ink-rgb), 0.16);
  --link: var(--primary); --link-rgb: var(--primary-rgb);
  --action-bg: var(--primary);
  --action-hover: var(--primary-hover);
  --action-ink: var(--primary-ink);
  --glass-light: rgba(255, 255, 255, 0.68);
  --glass-light-solid: rgba(255, 255, 255, 0.95);
  --glass-light-panel: rgba(255, 255, 255, 0.93);
  --glass-light-hi: rgba(255, 255, 255, 0.9);
  color-scheme: light;
}
html[data-theme="dark"] {
  --page: #0D0E10;
  --card: #16171A;
  --card-tint: color-mix(in srgb, var(--hl) 6%, #16171A);
  --card-warm: color-mix(in srgb, var(--decor) 6%, #16171A);
  --ink: #ECEDEE; --ink-rgb: 236, 237, 238;
  --ink-2: #A8ACB1;
  --tint: color-mix(in srgb, var(--hl) 11%, #16171A);
  --decor-soft: color-mix(in srgb, var(--decor) 18%, #16171A);
  --hero: #111214; --hero-rgb: 17, 18, 20;
  --hero-deep: #0A0B0C; --hero-deep-rgb: 10, 11, 12;
  --hero-2: #131416;
  --hero-top: #1E2023;
  --glow2-rgb: 38, 40, 44;
  --glow3-rgb: 30, 32, 35;
  --hero-ink: #EEEFF0; --hero-ink-rgb: 238, 239, 240;
  --hero-ink-2: #AEB2B6;
  --decor-ink: var(--decor);
  --link: var(--hl); --link-rgb: var(--hl-rgb);
  --action-bg: var(--hl);
  --action-hover: var(--hl-hover);
  --action-ink: var(--on-hl);
  --glass-light: rgba(22, 23, 26, 0.62);
  --glass-light-solid: rgba(22, 23, 26, 0.95);
  --glass-light-panel: rgba(22, 23, 26, 0.9);
  --glass-light-hi: rgba(255, 255, 255, 0.06);
  color-scheme: dark;
}
:root {
  --surface-fill: var(--card);
  --surface-line: rgba(var(--ink-rgb), 0.1);
  --surface-edge: inset 0 1px 0 rgba(255, 255, 255, 0.9);
  --surface-shadow: 0 1px 2px rgba(var(--hero-rgb), 0.05), 0 10px 26px -18px rgba(var(--hero-rgb), 0.22);
}
html[data-theme="dark"] {
  --surface-fill: linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0) 42%) var(--card);
  --surface-line: rgba(var(--ink-rgb), 0.085);
  --surface-edge: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  --surface-shadow: 0 18px 36px -26px rgba(0, 0, 0, 0.8);
}
:root {
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --step--1: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
  --step-0: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --step-1: clamp(1.125rem, 1.06rem + 0.35vw, 1.3125rem);
  --step-2: clamp(1.375rem, 1.22rem + 0.75vw, 1.75rem);
  --step-3: clamp(1.875rem, 1.5rem + 1.8vw, 3rem);
  --step-4: clamp(2.625rem, 1.75rem + 4.2vw, 5.25rem);
  --gutter: clamp(16px, 4.5vw, 44px);
  --maxw: 1240px;
  --section: clamp(4rem, 2.6rem + 5vw, 7.25rem);
  --header-h: 64px;
  --r-s: 12px;
  --r: 18px;
  --r-l: 26px;
  --capsule: 999px;
  --shadow-1: 0 1px 2px rgba(var(--hero-rgb), 0.05), 0 4px 14px -6px rgba(var(--hero-rgb), 0.1);
  --shadow-2: 0 18px 40px -22px rgba(var(--hero-rgb), 0.35);
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur: 180ms;
}
html[data-theme="dark"] {
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 14px -6px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 18px 40px -22px rgba(0, 0, 0, 0.7);
}
:root {
  --text-primary: #1f2937;
  --text-secondary: #6b7280;
  --text-light: #9ca3af;
  --bg-primary: #ffffff;
  --bg-secondary: #f9fafb;
  --bg-dark: #111827;
  --border-color: #e5e7eb;
  --shadow-light: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --shadow-medium: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-large: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --font-primary: 'Product Sans', 'Inter', sans-serif;
  --font-secondary: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --border-radius: 0.75rem;
  --transition-fast: 0.2s ease;
  --transition-medium: 0.3s ease;
  --transition-slow: 0.5s ease;
}
[data-theme="dark"] {
  --text-primary: #f8fafc;
  --text-secondary: #e2e8f0;
  --text-light: #cbd5e1;
  --bg-primary: #0f172a;
  --bg-secondary: #1e293b;
  --bg-dark: #020617;
  --border-color: #475569;
  --shadow-light: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 1px 2px 0 rgba(0, 0, 0, 0.2);
  --shadow-medium: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
  --shadow-large: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
}
/* pages.css */
html[data-v2] { background: var(--page); color-scheme: light dark; }
html[data-v2] body {
  background: transparent !important; 
  color: var(--ink);
  font-family: var(--font) !important;
  -webkit-font-smoothing: antialiased;
}
html[data-v2] :is(h1, h2, h3, h4, .section-title, .detail-title, .notfound__title) {
  font-family: var(--font-display) !important;
  color: var(--ink);
  letter-spacing: -0.02em;
}
html[data-v2] ::selection { background: rgba(var(--hl-rgb), 0.5); color: inherit; }
html[data-v2] :focus-visible { outline: 2.5px solid var(--link) !important; outline-offset: 3px; border-radius: 8px; }
html[data-v2] :is(.grain-overlay, .grain-svg, .custom-cursor, .cursor-dot, #particles-js) { display: none !important; }
html[data-v2] body, html[data-v2] body * { cursor: auto; }
html[data-v2] :is(a, button, [role="button"], summary, label[for]) { cursor: pointer !important; }
html[data-v2] .navbar,
html[data-v2] .navbar.scrolled {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  padding: calc(env(safe-area-inset-top, 0px) + 10px) 12px 0 !important;
  height: auto !important;
  pointer-events: none;
  transform: none !important; 
}
html[data-v2] .navbar .nav-container {
  pointer-events: auto;
  max-width: calc(var(--maxw) + 16px);
  margin: 0 auto;
  min-height: 56px;
  padding: 6px 8px 6px 18px !important;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  border-radius: 999px;
  background: var(--glass-light-solid);
  border: 1px solid var(--line);
  box-shadow: inset 0 1px 0 var(--glass-light-hi), 0 10px 30px -16px rgba(0, 0, 0, 0.45);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  html[data-v2] .navbar .nav-container { background: var(--glass-light); -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%); }
}
html[data-v2] .nav-logo a {
  font-family: var(--font-display) !important; font-weight: 800 !important; font-size: 1rem !important;
  background: none !important; -webkit-text-fill-color: currentColor !important; color: var(--ink) !important;
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; text-decoration: none;
}
html[data-v2] .nav-logo a::before {
  content: ""; width: 32px; height: 32px; border-radius: 50%; flex: none;
  background: url("assets/brand/avatar-96.webp?v=2") center / cover;
  box-shadow: 0 0 0 1.5px rgba(var(--hl-rgb), 0.55);
}
html[data-v2] .nav-link {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 13px !important;
  border-radius: 999px; color: var(--ink-2) !important; font-weight: 500 !important; font-size: 0.93rem !important;
  text-decoration: none; transition: background-color 0.18s ease, color 0.18s ease;
}
html[data-v2] .nav-link::after { display: none !important; }
html[data-v2] .nav-link:hover, html[data-v2] .nav-link.active { background: rgba(var(--link-rgb), 0.12); color: var(--ink) !important; }
html[data-v2] .hamburger {
  display: none; align-items: center; justify-content: center; flex-direction: column; gap: 5px;
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: transparent; padding: 0;
}
html[data-v2] .hamburger span { width: 18px; height: 1.8px; margin: 0 !important; background: var(--ink) !important; border-radius: 2px; }
@media (max-width: 900px) {
  html[data-v2] .hamburger { display: inline-flex; }
  html[data-v2] .nav-menu {
    position: fixed !important; left: 12px !important; right: 12px !important; width: auto !important;
    top: calc(env(safe-area-inset-top, 0px) + 74px) !important; height: auto !important;
    flex-direction: column; align-items: stretch !important; gap: 2px !important; padding: 8px !important;
    border-radius: 24px; background: var(--glass-light-panel) !important; border: 1px solid var(--line);
    box-shadow: 0 24px 50px -20px rgba(0, 0, 0, 0.6) !important;
    transform: translateY(-8px); opacity: 0; visibility: hidden; transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  }
  html[data-v2] .nav-menu.active { opacity: 1; visibility: visible; transform: none; }
  html[data-v2] .nav-menu .nav-link { min-height: 50px; border-radius: 16px; font-size: 1.02rem !important; }
}
html[data-v2] :is(.btn-primary, .action-btn.primary) {
  background: var(--action-bg) !important; color: var(--action-ink) !important; border: 1px solid transparent !important;
  border-radius: 999px !important; box-shadow: none !important; font-weight: 600 !important;
}
html[data-v2] :is(.btn-secondary, .action-btn.secondary, .action-btn.tertiary, .detail-link) {
  background: transparent !important; color: var(--ink) !important; border: 1px solid var(--line-strong) !important;
  border-radius: 999px !important; box-shadow: none !important; font-weight: 600 !important;
}
html[data-v2] :is(.btn-primary, .btn-secondary, .action-btn, .detail-link) { min-height: 44px; transition: transform 0.16s ease, background-color 0.16s ease, border-color 0.16s ease; }
html[data-v2] :is(.btn-primary, .btn-secondary, .action-btn, .detail-link):active { transform: scale(0.97); }
html[data-v2] :is(.btn-secondary, .action-btn.secondary, .action-btn.tertiary, .detail-link):hover { border-color: var(--link) !important; background: rgba(var(--link-rgb), 0.08) !important; }
html[data-v2] :is(.tech-tag, .feature, .research-tag, .detail-domain-tag) {
  background: var(--card) !important; color: var(--ink-2) !important; border: 1px solid var(--line) !important;
  border-radius: 999px !important; box-shadow: none !important; font-weight: 500;
}
html[data-v2] .detail-domain-tag.is-primary { color: var(--link) !important; border-color: rgba(var(--link-rgb), 0.45) !important; }
html[data-v2] .section-title { -webkit-text-fill-color: currentColor !important; background: none !important; }
html[data-v2] .section-title::after, html[data-v2] .detail-section-title::before, html[data-v2] .detail-section-title::after { background: var(--decor) !important; }
html[data-v2] :is(.section-subtitle, .detail-lead, .detail-prose, .publication-authors, .notfound__text) { color: var(--ink-2) !important; }
html[data-v2] :is(section, .container) { background: transparent !important; }
html[data-v2] .mp-filters button, html[data-v2] .mp-filters [role="tab"], html[data-v2] .mp-filters a {
  border-radius: 999px !important; border: 1px solid var(--line-strong) !important; background: var(--card) !important;
  color: var(--ink-2) !important; box-shadow: none !important; min-height: 40px;
}
html[data-v2] .mp-filters :is(.active, [aria-pressed="true"], [aria-selected="true"]) { background: var(--action-bg) !important; color: var(--action-ink) !important; border-color: transparent !important; }
html[data-v2] :is(.project-card, .publication-item, .detail-metric) {
  background: var(--card) !important; border: 1px solid var(--line) !important; border-radius: var(--r-l) !important;
  box-shadow: var(--shadow-1) !important; color: var(--ink);
}
html[data-v2] .project-card { overflow: hidden; transform: none; transition: box-shadow 0.22s ease, transform 0.22s ease; }
@media (hover: hover) and (pointer: fine) { html[data-v2] .project-card:hover { box-shadow: var(--shadow-2) !important; transform: translateY(-2px); } }
html[data-v2] .project-card :is(h3, .publication-title) { color: var(--ink) !important; }
html[data-v2] .project-card p, html[data-v2] .project-content p { color: var(--ink-2) !important; }
html[data-v2] .project-image, html[data-v2] .project-placeholder { background: var(--tint) !important; }
html[data-v2] .project-placeholder { color: var(--link) !important; }
html[data-v2] .project-link { background: rgba(var(--hero-rgb), 0.75) !important; color: #fff !important; border-radius: 999px !important; }
html[data-v2] :is(.project-badge, .pub-status-pill, .mp-soon-badge, .publication-type-badge) {
  background: var(--tint) !important; color: var(--link) !important; border: 0 !important; border-radius: 999px !important;
}
html[data-v2] .project-badge.ongoing { background: var(--decor-soft) !important; color: var(--decor-ink) !important; }
html[data-v2] .mp-domain-icon { background: var(--tint) !important; color: var(--link) !important; border-radius: 14px !important; box-shadow: none !important; }
html[data-v2] :is(.mp-pub-group-title, .mp-pub-group-head) { color: var(--ink) !important; border-color: var(--line) !important; }
html[data-v2] :is(.venue-name, .publication-date, .doi-info a, .mp-view-link) { color: var(--link) !important; }
html[data-v2] .detail-page { padding-top: calc(env(safe-area-inset-top, 0px) + 96px) !important; background: transparent !important; }
html[data-v2] .detail-article { max-width: 920px; }
html[data-v2] .detail-back { color: var(--link) !important; font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }
html[data-v2] .detail-hero { background: transparent !important; border: 0 !important; box-shadow: none !important; padding-left: 0 !important; padding-right: 0 !important; }
html[data-v2] .detail-title { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.25rem) !important; line-height: 1.06 !important; -webkit-text-fill-color: currentColor !important; background: none !important; text-wrap: balance; }
html[data-v2] .detail-lead { font-size: clamp(1.08rem, 1rem + 0.4vw, 1.3rem) !important; line-height: 1.5; max-width: 62ch; }
html[data-v2] .detail-status { color: var(--ink-2) !important; }
html[data-v2] .detail-status-dot { background: var(--hl) !important; box-shadow: 0 0 0 4px rgba(var(--hl-rgb), 0.18) !important; }
html[data-v2] .detail-cover { border-radius: 26px !important; box-shadow: var(--shadow-2) !important; border: 1px solid var(--line); }
html[data-v2] .detail-section { background: transparent !important; border: 0 !important; box-shadow: none !important; padding-left: 0 !important; padding-right: 0 !important; border-top: 1px solid var(--line) !important; }
html[data-v2] .detail-section-title { font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.75rem) !important; color: var(--ink) !important; }
html[data-v2] .detail-prose { font-size: 1.05rem; line-height: 1.7; max-width: 68ch; }
html[data-v2] .detail-prose a { color: var(--link) !important; }
html[data-v2] .detail-metric-num { color: var(--ink) !important; -webkit-text-fill-color: currentColor !important; background: none !important; font-family: var(--font-display) !important; }
html[data-v2] .detail-metric-label { color: var(--ink-2) !important; }
html[data-v2] .notfound__code { -webkit-text-fill-color: currentColor !important; background: none !important; color: var(--link) !important; }
@media (prefers-reduced-motion: reduce) {
  html[data-v2] * { transition-duration: 1ms !important; animation-duration: 1ms !important; }
}
@media (forced-colors: active) {
  html[data-v2] .navbar .nav-container, html[data-v2] .nav-menu { background: Canvas !important; border: 1px solid CanvasText; backdrop-filter: none !important; }
}
html[data-v2] :is(.footer, .site-footer, footer) a { color: var(--link) !important; }
html[data-v2] :is(.project-card, .publication-item, .detail-metric) {
  background: var(--surface-fill) !important; border: 1px solid var(--surface-line) !important;
  box-shadow: var(--surface-edge), var(--surface-shadow) !important;
}
html[data-v2] .visually-hidden {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
html[data-v2] [hidden] { display: none !important; }
html[data-v2] .mp-index .container { max-width: 1240px; padding-inline: clamp(16px, 4vw, 40px); }
.px-toolbar {
  display: grid; gap: 12px;
  margin: 0 0 clamp(26px, 3.4vw, 40px);
  padding: 14px;
  border-radius: 24px;
  background: var(--surface-fill); border: 1px solid var(--surface-line);
  box-shadow: var(--surface-edge), var(--surface-shadow);
}
.px-toolbar__row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.px-search { position: relative; flex: 1 1 280px; display: flex; align-items: center; }
.px-search i { position: absolute; left: 15px; color: var(--ink-2); font-size: 0.9rem; pointer-events: none; }
.px-search input {
  width: 100%; min-height: 46px; padding: 0 16px 0 42px;
  border-radius: 999px; border: 1px solid var(--line-strong);
  background: var(--page); color: var(--ink); font: inherit; font-size: 1rem;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.px-search input::placeholder { color: var(--ink-2); opacity: 0.85; }
.px-search input:focus-visible { outline: none; border-color: var(--link); box-shadow: 0 0 0 3px rgba(var(--link-rgb), 0.24); }
.px-select { display: none; flex: 1 1 200px; }
.px-select select {
  width: 100%; min-height: 46px; padding: 0 38px 0 16px;
  border-radius: 999px; border: 1px solid var(--line-strong); background: var(--page); color: var(--ink);
  font: inherit; font-size: 0.97rem; appearance: none; -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat;
}
.px-view { display: inline-flex; padding: 3px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line-strong); }
.px-view button, .px-chip, .px-reset, .px-reset-inline {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 40px; padding: 0 14px; border: 0; border-radius: 999px;
  background: transparent; color: var(--ink-2); font: inherit; font-size: 0.88rem; font-weight: 600; cursor: pointer;
  transition: background-color 0.16s ease, color 0.16s ease;
}
.px-view button[aria-pressed="true"] { background: rgba(var(--link-rgb), 0.14); color: var(--ink); }
.px-view button:hover, .px-chip:hover { color: var(--ink); background: rgba(var(--link-rgb), 0.08); }
.px-areas { display: flex; flex-wrap: wrap; gap: 6px; }
.px-chip { min-height: 36px; padding: 0 12px; font-size: 0.84rem; box-shadow: inset 0 0 0 1px var(--line); }
.px-chip[aria-pressed="true"] { background: var(--action-bg); color: var(--action-ink); box-shadow: none; }
.px-chip[data-empty] { opacity: 0.5; }
.px-chip__n { font-variant-numeric: tabular-nums; font-size: 0.78rem; opacity: 0.75; }
.px-toolbar__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; padding: 0 4px; }
.px-status-line { margin: 0; font-size: 0.9rem; font-weight: 600; color: var(--ink); }
.px-reset, .px-reset-inline { min-height: 36px; padding: 0 12px; color: var(--link); box-shadow: inset 0 0 0 1px rgba(var(--link-rgb), 0.4); }
.px-note { margin: 0 0 0 auto; font-size: 0.8rem; color: var(--ink-2); }
@media (max-width: 720px) {
  .px-areas { display: none; }
  .px-select { display: block; }
  .px-note { margin-left: 0; }
}
.px-section + .px-section, .px-group + .px-group { margin-top: clamp(30px, 4vw, 52px); }
.px-h2 {
  display: flex; align-items: baseline; gap: 10px; margin: 0 0 16px;
  font-family: var(--font-display) !important; font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.6rem) !important;
  font-weight: 700; letter-spacing: -0.02em; color: var(--ink) !important;
}
.px-h2::before, .px-h2::after { content: none !important; }
.px-h2__n { font-size: 0.85rem; font-weight: 650; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.px-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.px-grid--featured { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1100px) { .px-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) { .px-grid, .px-grid--featured { grid-template-columns: minmax(0, 1fr); } }
.px-card {
  display: grid; grid-template-rows: auto 1fr; min-width: 0; overflow: hidden;
  border-radius: 22px;
  background: var(--surface-fill); border: 1px solid var(--surface-line);
  box-shadow: var(--surface-edge), var(--surface-shadow);
  transition: border-color 0.2s ease;
}
.px-card:hover, .px-card:focus-within { border-color: rgba(var(--hl-rgb), 0.32); }
.px-card__media { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--tint); }
.px-card--featured .px-card__media { aspect-ratio: 2 / 1; }
.px-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
@media (hover: hover) and (pointer: fine) { .px-card:hover .px-card__media img { transform: scale(1.03); } }
.px-flag {
  position: absolute; left: 12px; top: 12px; display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 999px; background: rgba(var(--hero-deep-rgb), 0.8); color: #fff;
  font-size: 0.72rem; font-weight: 650;
}
.px-flag i { font-size: 0.6rem; }
.px-placeholder {
  position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 10px; padding: 16px;
  text-align: center; color: var(--link); font-weight: 650; font-size: 0.92rem;
  background:
    radial-gradient(90% 80% at 50% 110%, rgba(var(--hl-rgb), 0.2), transparent 60%),
    repeating-linear-gradient(0deg, transparent 0 15px, rgba(var(--ink-rgb), 0.05) 15px 16px),
    repeating-linear-gradient(90deg, transparent 0 15px, rgba(var(--ink-rgb), 0.05) 15px 16px),
    var(--card-tint);
}
.px-placeholder i { font-size: 1.9rem; opacity: 0.9; }
.px-card__body { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px 12px; min-width: 0; }
.px-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; min-height: 24px; }
.px-status, .px-badge {
  display: inline-flex; align-items: center; gap: 6px; min-height: 24px; padding: 2px 10px;
  border-radius: 999px; font-size: 0.74rem; font-weight: 650; letter-spacing: 0.01em;
  color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line);
}
.px-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.px-status.is-ongoing { color: var(--decor-ink); box-shadow: inset 0 0 0 1px rgba(var(--decor-rgb), 0.45); }
.px-status.is-completed { color: var(--link); box-shadow: inset 0 0 0 1px rgba(var(--link-rgb), 0.35); }
.px-badge.is-featured { color: var(--ink); background: rgba(var(--hl-rgb), 0.12); box-shadow: inset 0 0 0 1px rgba(var(--hl-rgb), 0.3); }
.px-card__title { margin: 2px 0 0; font-family: var(--font-display) !important; font-size: 1.08rem !important; line-height: 1.3 !important; font-weight: 680; letter-spacing: -0.012em; color: var(--ink) !important; text-wrap: balance; }
.px-card--featured .px-card__title { font-size: 1.25rem !important; }
.px-card__title a { color: inherit !important; text-decoration: none; }
.px-card__title a:hover { text-decoration: underline; text-decoration-color: var(--decor); text-decoration-thickness: 2px; text-underline-offset: 0.18em; }
.px-card__area { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 0; font-size: 0.78rem; font-weight: 600; color: var(--ink-2); }
.px-card__area span + span::before { content: "\00b7"; margin-right: 10px; opacity: 0.7; }
.px-card__desc {
  margin: 0; color: var(--ink-2) !important; font-size: 0.93rem; line-height: 1.55;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden;
}
.px-tags { display: flex; flex-wrap: wrap; gap: 5px; margin: 2px 0 0; padding: 0; list-style: none; }
.px-tags li { padding: 2px 9px; border-radius: 999px; font-size: 0.74rem; font-weight: 500; color: var(--ink-2); background: rgba(var(--ink-rgb), 0.04); box-shadow: inset 0 0 0 1px var(--line); }
.px-card__actions {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px;
  margin-top: auto; padding-top: 10px; border-top: 1px solid var(--line);
}
.px-cta { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; font-weight: 650; font-size: 0.9rem; color: var(--link) !important; text-decoration: none; }
.px-cta i { font-size: 0.78rem; transition: transform 0.18s ease; }
.px-cta:hover i { transform: translateX(3px); }
.px-soon { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; font-size: 0.86rem; color: var(--ink-2); }
.px-icons { display: inline-flex; gap: 4px; }
.px-icon {
  display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: var(--ink-2) !important; box-shadow: inset 0 0 0 1px var(--line); cursor: pointer;
  transition: color 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease;
}
.px-icon:hover { color: var(--ink) !important; background: rgba(var(--link-rgb), 0.08); box-shadow: inset 0 0 0 1px rgba(var(--link-rgb), 0.45); }
.px-group__head { margin-bottom: 12px; }
.px-group__head .px-h2 { margin-bottom: 4px; }
.px-group__head p { margin: 0; color: var(--ink-2); font-size: 0.94rem; }
.px-rows { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.px-row {
  display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 14px; align-items: center;
  padding: 10px; border-radius: 18px;
  background: var(--surface-fill); border: 1px solid var(--surface-line); box-shadow: var(--surface-edge);
}
.px-row:focus-within, .px-row:hover { border-color: rgba(var(--hl-rgb), 0.3); }
.px-row__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 12px; background: var(--tint); }
.px-row__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.px-row__media .px-flag { left: 6px; top: 6px; padding: 1px 7px; font-size: 0.66rem; }
.px-row__media .px-placeholder span { display: none; }
.px-row__media .px-placeholder i { font-size: 1.2rem; }
.px-row__body { display: grid; gap: 4px; min-width: 0; }
.px-row .px-card__desc { -webkit-line-clamp: 2; line-clamp: 2; font-size: 0.9rem; }
.px-row__year { font-size: 0.78rem; font-weight: 600; color: var(--ink-2); }
@media (max-width: 520px) {
  .px-row { grid-template-columns: 84px minmax(0, 1fr); gap: 12px; }
}
.px-empty {
  display: grid; justify-items: start; gap: 8px; padding: clamp(22px, 3vw, 36px);
  border-radius: 22px; border: 1px dashed var(--line-strong); color: var(--ink-2);
}
.px-empty p { margin: 0; }
.px-empty__title { color: var(--ink); font-weight: 650; font-size: 1.1rem; }
@media (forced-colors: active) {
  .px-chip[aria-pressed="true"], .px-view button[aria-pressed="true"] { outline: 2px solid Highlight; }
}
/* liquid-glass.css */
:root {
  --lg-frost: hsl(0 0% 100% / 0.12);
  --lg-line: color-mix(in oklch, black, transparent 85%);
  --lg-glow: color-mix(in oklch, black, transparent 90%);
  --lg-line-soft: color-mix(in oklch, black, transparent 88%);
  --lg-glow-soft: color-mix(in oklch, white, transparent 72%);
  --lg-lip: hsl(0 0% 100% / 0.85);
  --lg-lip-low: hsl(0 0% 100% / 0.35);
  --lg-sheen-a: hsl(0 0% 100% / 0.42);
  --lg-sheen-b: hsl(0 0% 100% / 0.18);
  --lg-rim-a: hsl(0 0% 100% / 0.7);
  --lg-rim-b: hsl(0 0% 100% / 0.1);
  --lg-rim-c: hsl(0 0% 100% / 0.08);
  --lg-rim-d: hsl(0 0% 100% / 0.42);
  --lg-drop: 0 4px 16px rgba(17, 17, 26, 0.06), 0 8px 24px rgba(17, 17, 26, 0.06), 0 16px 56px rgba(17, 17, 26, 0.06);
}
html[data-theme="dark"] {
  --lg-frost: hsl(0 0% 100% / 0.04);
  --lg-line: color-mix(in oklch, white, transparent 65%);
  --lg-glow: color-mix(in oklch, white, transparent 85%);
  --lg-line-soft: color-mix(in oklch, white, transparent 72%);
  --lg-glow-soft: color-mix(in oklch, white, transparent 90%);
  --lg-lip: hsl(0 0% 100% / 0.3);
  --lg-lip-low: hsl(0 0% 100% / 0.08);
  --lg-sheen-a: hsl(0 0% 100% / 0.14);
  --lg-sheen-b: hsl(0 0% 100% / 0.05);
  --lg-rim-a: hsl(0 0% 100% / 0.34);
  --lg-rim-b: hsl(0 0% 100% / 0.03);
  --lg-rim-c: hsl(0 0% 100% / 0.02);
  --lg-rim-d: hsl(0 0% 100% / 0.18);
  --lg-drop: 0 4px 16px rgba(0, 0, 0, 0.18), 0 8px 24px rgba(0, 0, 0, 0.14), 0 16px 56px rgba(0, 0, 0, 0.12);
}
@property --lx { syntax: '<percentage>'; inherits: true; initial-value: 28%; }
@property --ly { syntax: '<percentage>'; inherits: true; initial-value: 0%; }
:where(.lg) { position: relative; } 
.lg {
  isolation: isolate;
  background: var(--lg-frost) !important;
  border-color: transparent !important;
  box-shadow:
    inset 0 1px 0 0 var(--lg-lip),
    inset 0 -1px 0 0 var(--lg-lip-low),
    inset 0 0 2px 1px var(--lg-line-soft),
    inset 0 0 12px 3px var(--lg-glow-soft),
    var(--lg-drop) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.4) brightness(1.04);
  backdrop-filter: blur(12px) saturate(1.4) brightness(1.04);
  transform-origin: 50% 50%;
}
html.lg-refract .lg.lg--refract {
  -webkit-backdrop-filter: var(--lg-filter) saturate(1.1);
  backdrop-filter: var(--lg-filter) saturate(1.1);
  box-shadow:
    inset 0 0 2px 1px var(--lg-line),
    inset 0 0 10px 4px var(--lg-glow),
    var(--lg-drop),
    inset 0 4px 16px rgba(17, 17, 26, 0.05),
    inset 0 8px 24px rgba(17, 17, 26, 0.05),
    inset 0 16px 56px rgba(17, 17, 26, 0.05) !important;
}
.lg > .lg-sheen {
  position: absolute !important;
  inset: 0;
  z-index: 0 !important;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(circle at var(--lx, 28%) calc(var(--ly, 0%) - var(--scroll-v, 0) * 40%), rgba(255, 255, 255, 0.14), transparent 46%),
    linear-gradient(135deg, var(--lg-sheen-a) 0%, transparent 42%, transparent 64%, var(--lg-sheen-b) 100%);
  -webkit-mask: linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0);
  overflow: hidden;
  transition: --lx 900ms cubic-bezier(0.22, 1, 0.36, 1), --ly 900ms cubic-bezier(0.22, 1, 0.36, 1);
}
.lg > .lg-sheen::before {
  content: "";
  position: absolute; inset: -20% -60%;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.16) 47%, rgba(255, 255, 255, 0.05) 53%, transparent 62%);
  transform: translateX(-60%);
  opacity: 0;
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .lg:hover > .lg-sheen::before { animation: lg-shine 1600ms cubic-bezier(0.33, 0, 0.2, 1) 1 both; }
}
@keyframes lg-shine {
  0% { transform: translateX(-60%); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translateX(60%); opacity: 0; }
}
.lg > .lg-sheen::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 3px;
  background: linear-gradient(calc(150deg + var(--scroll-v, 0) * 30deg), var(--lg-rim-a), var(--lg-rim-b) 45%, var(--lg-rim-c) 60%, var(--lg-rim-d));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
html.lg-refract .lg.lg--refract > .lg-sheen { background: radial-gradient(circle at var(--lx, 28%) calc(var(--ly, 0%) - var(--scroll-v, 0) * 40%), rgba(255, 255, 255, 0.12), transparent 46%); }
html.lg-refract .lg.lg--refract > .lg-sheen::after { opacity: 0; }
.lg > :where(:not(.lg-sheen)) { position: relative; z-index: 1; }
.lg:is(.btn:not(.btn--ghost), .nav__cta, .btn-primary, .action-btn.primary, .xp-seg button[aria-pressed="true"]) { background: var(--btn-bg, var(--action-bg)) !important; }
.site-header:not([data-surface="light"]) .lg.nav { background: rgba(var(--hero-rgb), 0.26) !important; }
.site-header[data-surface="light"] .lg.nav { background: rgba(var(--card-rgb, 255, 255, 255), 0.42) !important; }
html[data-theme="dark"] .site-header[data-surface="light"] .lg.nav { background: rgba(22, 23, 26, 0.42) !important; }
.site-header .lg.nav { transition: background-color 500ms cubic-bezier(0.22, 1, 0.36, 1), color 500ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 500ms cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes lg-glitch {
  0%, 100% { filter: none; }
  18% { filter: blur(0.8px) drop-shadow(1.5px 0 rgba(255, 40, 90, 0.5)) drop-shadow(-1.5px 0 rgba(0, 240, 220, 0.5)); }
  36% { filter: blur(0.4px) drop-shadow(-1px 0 rgba(255, 40, 90, 0.4)) drop-shadow(1px 0 rgba(0, 240, 220, 0.4)); }
  60% { filter: blur(0.2px); }
}
@keyframes lg-ripple {
  0%, 100% { filter: none; }
  30% { filter: blur(0.6px) drop-shadow(0.8px 0 rgba(255, 40, 90, 0.3)) drop-shadow(-0.8px 0 rgba(0, 240, 220, 0.3)); }
  65% { filter: blur(0.2px); }
}
@keyframes lg-split {
  0%, 100% { opacity: 0; }
  20% { opacity: 1; }
}
.lg > .lg-sheen > .lg-split {
  position: absolute; inset: 0; border-radius: inherit; opacity: 0; pointer-events: none;
  box-shadow: inset 1.5px 0 0 rgba(255, 40, 90, 0.45), inset -1.5px 0 0 rgba(0, 240, 220, 0.45);
}
.lg.lg-glitch > :where(:not(.lg-sheen)) { animation: lg-glitch 500ms ease-out 1; }
.lg.lg-ripple > :where(:not(.lg-sheen)) { animation: lg-ripple 700ms ease-out 1; }
.lg.lg-glitch > .lg-sheen > .lg-split { animation: lg-split 500ms ease-out 1; }
.lg.lg-ripple > .lg-sheen > .lg-split { animation: lg-split 700ms ease-out 1; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .hero__title:hover .hero__title-accent { animation: name-glitch 420ms steps(6, end) 1; }
}
@media (prefers-reduced-motion: no-preference) {
  .hero__title.lg-name-glitch .hero__title-accent { animation: name-glitch 520ms steps(7, end) 1; }
  .lg.lg-shine > .lg-sheen::before { animation: lg-shine 1400ms cubic-bezier(0.33, 0, 0.2, 1) 1 both; }
  .lg.lg-glint > .lg-sheen > .lg-split { animation: lg-glint 900ms cubic-bezier(0.22, 1, 0.36, 1) 1; }
}
@keyframes lg-glint {
  0% { opacity: 1; }
  45% { opacity: 0.5; }
  100% { opacity: 0; }
}
@keyframes lg-frost-pulse {
  0% { -webkit-backdrop-filter: blur(22px) saturate(2.1) brightness(1.08); backdrop-filter: blur(22px) saturate(2.1) brightness(1.08); }
  100% { -webkit-backdrop-filter: blur(7px) saturate(1.6) brightness(1.05); backdrop-filter: blur(7px) saturate(1.6) brightness(1.05); }
}
@media (hover: none), (pointer: coarse) {
  html:not(.lg-refract) .lg {
    -webkit-backdrop-filter: blur(7px) saturate(1.6) brightness(1.05);
    backdrop-filter: blur(7px) saturate(1.6) brightness(1.05);
    box-shadow:
      inset 0 0 2px 1px var(--lg-line),
      inset 0 0 10px 4px var(--lg-glow),
      inset 0 1px 0 0 var(--lg-lip),
      var(--lg-drop) !important;
  }
  .lg > .lg-sheen > .lg-split { box-shadow: inset 2.5px 0 1px 0 rgba(255, 40, 90, 0.7), inset -2.5px 0 1px 0 rgba(0, 240, 220, 0.7); }
  @media (prefers-reduced-motion: no-preference) {
    html:not(.lg-refract) .lg.lg-glitch, html:not(.lg-refract) .lg.lg-ripple { animation: lg-frost-pulse 900ms cubic-bezier(0.22, 1, 0.36, 1) 1; } 
  }
}
@keyframes name-glitch {
  0%, 100% { text-shadow: none; transform: none; }
  20% { text-shadow: 2px 0 rgba(255, 40, 90, 0.7), -2px 0 rgba(0, 240, 220, 0.7); transform: translateX(-1px); }
  40% { text-shadow: -3px 0 rgba(255, 40, 90, 0.6), 3px 0 rgba(0, 240, 220, 0.6); transform: translateX(2px) skewX(-4deg); }
  60% { text-shadow: 1px 0 rgba(255, 40, 90, 0.7), -1px 0 rgba(0, 240, 220, 0.7); transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .lg.lg-glitch > *, .lg.lg-ripple > *, .lg .lg-split { animation: none !important; }
  .lg > .lg-sheen { transition: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .lg { background: var(--card, #16171a) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  .lg > .lg-sheen { display: none; }
}
@media (forced-colors: active) {
  .lg { background: Canvas !important; border: 1px solid CanvasText !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; box-shadow: none !important; }
  .lg > .lg-sheen { display: none; }
}
html.perf-lite .lg,
html.perf-lite.lg-refract .lg,
html.perf-lite.lg-refract .lg.lg--refract {
  -webkit-backdrop-filter: blur(10px) saturate(150%) !important;
  backdrop-filter: blur(10px) saturate(150%) !important;
}
html.perf-lite :is(.lg.lg-glint, .lg.lg-glitch, .lg.lg-ripple) { animation: none !important; }
html.perf-lite :is(.ph-glass, .ph-hero__card, .ph-section, .story__stage, .story__beat, .detail-metric, .tilt-toggle) {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
html.perf-lite .gi--clear, html.perf-lite .eyebrow, html.perf-lite .hero__status--phd, html.perf-lite .phd-pill { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
html.perf-lite .lg > .lg-sheen::before { animation: none !important; }
html.perf-lite :is(#ask-reshad-fab, #ask-reshad-fab::before, #ask-reshad-fab::after) { animation: none !important; }
html.perf-lite #ask-reshad-fab::after { filter: none !important; }
html.perf-lite .story__beat { filter: none !important; }