/* Simple, clean portfolio styles */
:root{
  --bg:#f6f7fb;
  --muted:#6b7280;
  --accent:#2563eb;
  --card:#ffffff;
}
/* light theme overrides — apply for attribute or body class for robustness */
.theme-light, [data-theme="light"]{
  --bg-1: #f7fbff;
  --bg-2: #eef6ff;
  --surface: #ffffff;
  --muted: #5b6b7a;
  --accent: #ff6b6b;
  --accent-2: #7c5cff;
  --accent-3: #00a7c4;
  --glass: rgba(12,23,33,0.04);
  --text: #071428;
}
/* Ensure timeline badge variables are defined for light mode so date boxes match panels */
.theme-light, [data-theme="light"]{
  --timeline-panel-bg: var(--card, #ffffff);
  --timeline-panel-text: var(--text, #071428);
  /* keep the badges colorful in light mode as well */
  --timeline-badge-bg: linear-gradient(90deg,var(--accent-2,#7c5cff),var(--accent,#ff6b6b));
  /* date-pill text should be white in light mode per user request */
  --timeline-badge-color: #ffffff;
}

  /* Extra safety overrides: force commonly-white elements to dark in light mode */
  [data-theme="light"] .skill-badge, .theme-light .skill-badge { color: #071428 !important; background: linear-gradient(90deg,#7c3aed11,#06b6d411) !important; }
  [data-theme="light"] .badge, .theme-light .badge { color: #071428 !important; }
  [data-theme="light"] .project-card h3 a, .theme-light .project-card h3 a { color: #071428 !important; }
  [data-theme="light"] .hero-inner h1, .theme-light .hero-inner h1 { color: #071428 !important; }
  [data-theme="light"] .lead, .theme-light .lead { color: #071428 !important; }

  /* Dice pips explicit dark color in light mode */
  [data-theme="light"] .pip, .theme-light .pip { background: #071428 !important; }

  /* fallback: any element with inline white color get darkened */
  [data-theme="light"] [style*="color:rgba(255,255,255"], .theme-light [style*="color:rgba(255,255,255"] { color: #071428 !important; }

/* No-projects fallback styling */
.no-projects{color:var(--text);opacity:0.9}

/* Ensure skill badges readable in light mode (they used white text) */
[data-theme="light"] .skill-badge, .theme-light .skill-badge { background: linear-gradient(90deg,#7c3aed11,#06b6d411); color: #071428 !important; box-shadow:none }

/* About hero lead override */
[data-theme="light"] .about-hero .lead, .theme-light .about-hero .lead { color: var(--text) !important }

/* theme toggle button */
#theme-toggle{background:transparent;border:1px solid var(--glass);padding:8px;border-radius:8px;color:var(--text);cursor:pointer}
#theme-toggle:hover{transform:translateY(-2px)}
*{box-sizing:border-box}
body{
  margin:0;
  font-family: 'Segoe UI', Roboto, system-ui, -apple-system, sans-serif;
  background:var(--bg);
  color:#0f172a;
  line-height:1.5;
}
.container{max-width:1000px;margin:36px auto;padding:0 20px}
.site-header{
  /* sleek full-width header: flat, minimal, sticks to top */
  width:100%;
  left:0; right:0;
  background:transparent;
  padding:16px 0; /* increased for larger navbar height */
  position:sticky;
  top:0;
  z-index:60;
  border-bottom:1px solid rgba(255,255,255,0.04);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;max-width:1100px;margin:0 auto;padding:12px 20px}
.brand{font-weight:800;text-decoration:none;font-size:1.05rem;background:linear-gradient(90deg,var(--accent-2,#7c5cff),var(--accent,#ff6b6b));-webkit-background-clip:text;background-clip:text;color:transparent}
.nav{display:flex;align-items:center;position:relative;gap:8px}
.nav a{color:var(--muted);text-decoration:none;margin-left:6px;padding:8px 10px;border-radius:6px;transition:color .16s,opacity .12s,background .18s;position:relative;z-index:2;font-weight:600;text-transform:uppercase;letter-spacing:0.6px;font-size:0.86rem}
/* remove lifted pseudo-element — use simple color change and clean indicator */
.nav a::before{display:none}
.nav a:hover{color:var(--accent);opacity:1}
/* focus-visible for keyboard users */
.nav a:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(124,58,237,0.10);border-radius:6px}

/* Mobile nav toggle button */
.nav-toggle{display:none;background:transparent;border:1px solid rgba(255,255,255,0.04);padding:8px;border-radius:8px;color:inherit;cursor:pointer}
.nav-toggle .hamburger{display:block;width:20px;height:2px;background:currentColor;position:relative}
.nav-toggle .hamburger::after,.nav-toggle .hamburger::before{content:'';position:absolute;left:0;right:0;height:2px;background:currentColor}
.nav-toggle .hamburger::before{top:-6px}
.nav-toggle .hamburger::after{top:6px}

/* When header has nav-open, reveal nav on small screens */
.header-inner.nav-open .nav{display:flex;flex-direction:column;gap:6px;background:transparent;padding:12px;border-radius:8px;margin-top:8px}

/* Active link styling clearer for recruiters */
.nav a.active{color:var(--accent);box-shadow:inset 0 -3px 0 rgba(124,58,237,0.12)}

/* animated moving underline indicator */
.nav-indicator{position:absolute;bottom:0;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--accent-2,#7c5cff),var(--accent,#ff6b6b));transition:left .22s cubic-bezier(.2,.9,.3,1),width .22s cubic-bezier(.2,.9,.3,1),opacity .16s;opacity:0;pointer-events:none;z-index:4}
.nav a.active{color:var(--accent);}

/* shrink header when scrolling */
.site-header{transition:box-shadow .22s ease, transform .22s ease}
.site-header.scrolled{box-shadow:0 10px 30px rgba(2,6,23,0.42);transform:translateY(-2px)}

/* light-mode header adjustments */
.theme-light .site-header, [data-theme="light"] .site-header{
  background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,0.85));
  border:1px solid rgba(12,23,33,0.04);
  box-shadow:0 6px 18px rgba(12,23,33,0.04);
}
.theme-light .nav a, [data-theme="light"] .nav a{ color: var(--muted); }
.theme-light .nav a:hover, [data-theme="light"] .nav a:hover{ color: var(--accent); }

/* Make active nav link color match the brand color in light mode */
.theme-light .nav a.active, [data-theme="light"] .nav a.active{
  /* Use the same accent as hover in light mode (bright coral) */
  color: var(--accent) !important; /* #ff6b6b */
}
.theme-light .nav-indicator, [data-theme="light"] .nav-indicator{ background: linear-gradient(90deg,var(--accent-2,#7c5cff),var(--accent,#ff6b6b)); opacity:0.95 }

/* Fix: ensure mobile nav overlay links are dark/readable in light theme
   When the header is opened on small screens the overlay may inherit
   a lighter color; explicitly force a dark text color for links and
   the toggle so they're readable against the light background. */
.theme-light .header-inner.nav-open .nav a,
[data-theme="light"] .header-inner.nav-open .nav a{
  color: var(--text) !important;
}

.theme-light .nav-toggle, [data-theme="light"] .nav-toggle{
  color: var(--text) !important;
  border-color: rgba(12,23,33,0.06);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .nav a{transition:none !important}
  .nav-indicator{transition:none !important}
  .site-header{transition:none}
}

/* responsive: collapse nav into wrap on small screens and increase tap targets */
@media (max-width:720px){
  .header-inner{gap:12px}
  /* Hide nav by default on small screens and show toggle */
  .nav{display:none}
  .nav-toggle{display:inline-flex;align-items:center;justify-content:center}
  .nav a{padding:12px 14px;font-size:0.95rem}
  .nav-indicator{display:none}
}

/* Mobile-friendly adjustments: improve tap targets, stack controls, and enable horizontal table scroll */
@media (max-width:720px){
  /* Slightly smaller header padding on small screens for balance */
  .site-header{padding:10px 0}
  .header-inner{padding:10px 12px}
  .brand{font-size:1rem}

  /* Make the mobile nav overlay and easier to interact with */
  .nav{position:static;display:none;width:100%}
  .header-inner.nav-open .nav{display:flex;flex-direction:column;gap:6px;padding:10px 0}
  .header-inner.nav-open .nav{background:transparent}

  /* Ensure nav links are comfortable touch targets */
  .nav a{padding:12px 10px;font-size:1rem;border-radius:8px}

  /* When the nav is opened (overlay) make links larger and centered for easy tapping */
  .header-inner.nav-open .nav a{display:block;padding:18px 16px;font-size:1.06rem;text-align:center}

  /* Container padding reduced on small screens to maximize content width */
  .container{padding:0 14px;margin:18px auto}

  /* Hero and project spacing tuned for narrow viewports */
  .hero-inner{padding:18px}
  .hero-inner h1{font-size:1.6rem}

  /* Make interactive controls stack vertically on small screens */
  .filters, .project-controls, .timeline-toolbar{flex-direction:column;gap:8px}

  /* Tables: allow horizontal scroll rather than forcing cramped columns */
  .table-responsive{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .results-table{min-width:600px}

  /* Make input controls and buttons easier to tap */
  input[type="search"], select, button{font-size:1rem}
}

/* Backdrop styling (created/inserted by JS) */
#nav-backdrop{position:fixed;left:0;top:0;right:0;bottom:0;background:rgba(0,0,0,0.45);z-index:50}

/* Smooth open/close for mobile nav overlay */
.header-inner.nav-open .nav{transition:transform .22s ease,opacity .18s}
.header-inner.nav-open .nav{opacity:1}

/* Ensure nav overlay scrolls if content exceeds viewport */
.header-inner.nav-open .nav{overflow:auto}

/* Dark-mode: when scrolled, make header more opaque and remove heavy backdrop blur
   so page content doesn't show through as a distracting blur. This targets
   the default (dark) mode when body does NOT have the .theme-light class and
   when html/data-theme isn't set to light. */
/* Dark mode: make header fully opaque black and remove backdrop blur so nothing shows through */
body:not(.theme-light) .site-header,
html:not([data-theme="light"]) .site-header,
body:not(.theme-light) .site-header.scrolled,
html:not([data-theme="light"]) .site-header.scrolled {
  /* Use the site's dark palette variables so the header matches the
     overall dark theme (uses --bg-2 and --surface defined in :root). */
  background: linear-gradient(180deg, var(--bg-2) 0%, var(--surface) 100%);
  color: var(--text);
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid rgba(255,255,255,0.03);
  box-shadow: 0 10px 30px rgba(0,0,0,0.6);
}
/* Dark-mode: stronger navbar link colors and hover/active states for
   improved contrast and affordance. These rules target the non-light
   theme so they don't interfere with the light-mode overrides. */
body:not(.theme-light) .nav a,
html:not([data-theme="light"]) .nav a{
  color: var(--text); /* use site text color for maximum contrast */
  opacity: 0.95;
}

body:not(.theme-light) .nav a:hover,
html:not([data-theme="light"]) .nav a:hover{
  color: var(--accent-2);
  /* simpler hover: only change background/color to avoid translate/box-shadow
     which can cause repaints and visual flicker on some browsers */
  background: rgba(255,255,255,0.02);
}

body:not(.theme-light) .nav a.active,
html:not([data-theme="light"]) .nav a.active{
  /* Match the brand color (e.g. "Rounak Bastola") in dark mode */
  color: var(--accent-2) !important;
  box-shadow: inset 0 -3px 0 rgba(124,58,237,0.18);
}

/* When the mobile nav overlay is opened, ensure links remain readable */
body:not(.theme-light) .header-inner.nav-open .nav a,
html:not([data-theme="light"]) .header-inner.nav-open .nav a{
  color: var(--text) !important;
}

/* mobile nav toggle color in dark mode */
body:not(.theme-light) .nav-toggle,
html:not([data-theme="light"]) .nav-toggle{
  color: var(--text) !important;
  border-color: rgba(255,255,255,0.06) !important;
}
.hero{background:linear-gradient(180deg, rgba(37,99,235,0.08), rgba(255,255,255,0));padding:12px 0;text-align:center}

/* Make hero sit flush under the sticky header: remove any top margin
  coming from the shared .container class when it's used inside the hero. */
.hero{margin-top:0}
.hero .container{margin-top:0;margin-bottom:0}
.site-header + .hero,
body > .hero,
.hero{
  margin-top: 0 !important;
}
.hero-inner h1{font-size:2.2rem;margin:0}
.lead{color:var(--muted);margin-top:8px}
.cta{display:inline-block;margin-top:14px;background:var(--accent);color:#fff;padding:10px 16px;border-radius:6px;text-decoration:none}
.projects h2,.about h2,.contact h2{color:#0f172a;margin-bottom:14px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.project-card{background:var(--card);padding:18px;border-radius:10px;box-shadow:0 6px 18px rgba(12,15,30,0.06)}
.project-card h3{margin:0 0 6px}
.meta{color:var(--muted);font-size:0.9rem;margin-bottom:8px}
.link{color:var(--accent);text-decoration:none}
.about,.contact{background:#fff;padding:18px;border-radius:10px;margin-top:18px}
.site-footer{padding:24px 0;text-align:center;color:var(--muted);margin-top:32px}
@media (max-width:600px){.header-inner{padding:12px 0}.hero-inner h1{font-size:1.6rem}}

/* badges and filters */
.badge{display:inline-block;background:#eef2ff;color:#1e293b;padding:6px 10px;border-radius:999px;font-size:0.85rem;margin:4px}
.tech-badge{display:inline-block;background:#f1f5f9;color:#0f172a;padding:6px 10px;border-radius:20px;margin:6px;text-decoration:none;border:1px solid #e6eefb}
.tech-badge.clear{background:transparent;border-style:dashed}

.filters{margin:12px 0}

/* project detail */
.project-hero{padding:28px 0;background:linear-gradient(180deg, rgba(99,102,241,0.06), rgba(255,255,255,0));margin-bottom:10px}
.project-detail .grid{display:grid;grid-template-columns:1fr 320px;gap:20px;align-items:start}
@media (max-width:900px){.project-detail .grid{grid-template-columns:1fr}}

/* Colorful theme and animations */
:root{
  /* New brighter palette */
  --bg-1: #0f1724; /* deep */
  --bg-2: #07102a; /* darker */
  --surface: #071428;
  --muted: #9fb0c8;
  --accent: #ff6b6b; /* coral */
  --accent-2: #7c5cff; /* violet */
  --accent-3: #00d4ff; /* cyan */
  --glass: rgba(255,255,255,0.04);
  --text: #e9f0fb;
}
body{background:linear-gradient(180deg,var(--bg-1) 0%, var(--bg-2) 70%);color:var(--text);font-family: 'Inter', 'Segoe UI', Roboto, system-ui, -apple-system, sans-serif}
.site-header{background:transparent;border-bottom:1px solid rgba(255,255,255,0.04)}
.brand{color:var(--accent-2);font-weight:800;letter-spacing:0.2px}
.nav a{color:rgba(233,240,251,0.9);margin-left:14px;text-decoration:none;font-weight:600}
.socials a{margin-left:12px;color:var(--muted);text-decoration:none;font-size:0.95rem}
.hero{background:linear-gradient(135deg, rgba(124,92,255,0.08), rgba(0,212,255,0.04));padding:56px 0;text-align:left;border-radius:12px;margin-top:18px}
.hero-inner{background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent);padding:32px;border-radius:12px;display:flex;align-items:center;justify-content:space-between;gap:18px}
.hero-inner h1{font-size:2.4rem;color:#fff;margin:0}

/* Tighten hero spacing and improve responsive layout */
.hero-inner{padding:28px}
.hero-grid{gap:22px}
.hero-tagline{font-size:0.98rem;color:var(--muted);margin-bottom:8px}
.hero-left .hero-lead-first{margin-bottom:8px}
.hero-name{margin:6px 0 6px}
.hero-role{margin-bottom:6px}

/* Hero copy polish: make the role pill a subtle uppercase label */
.hero-role{display:inline-block;font-weight:800;text-transform:uppercase;letter-spacing:1px;padding:6px 10px;border-radius:999px;background:linear-gradient(90deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));color:#fff;font-size:0.85rem}
.hero-tagline{font-weight:600;opacity:0.95}

/* compact subskills shown under the role for quick scanning */
.hero-subskills{display:flex;gap:8px;margin-top:8px;align-items:center;justify-content:center}
.hero-subskills .skill-badge{padding:6px 10px;font-size:0.82rem;border-radius:999px;background:linear-gradient(90deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));color:var(--text);box-shadow:0 6px 18px rgba(2,6,23,0.08)}
.theme-light .hero-subskills .skill-badge, [data-theme="light"] .hero-subskills .skill-badge{background:linear-gradient(90deg,#f1f5f9,#fff);color:var(--text);border:1px solid rgba(12,23,33,0.04)}

/* Ensure the hero card/inner panel is visible in light theme by using a
  distinct card background, border and subtle shadow. This prevents the
  hero content from blending into the page background when the site is
  in light mode. */
.theme-light .hero-inner, [data-theme="light"] .hero-inner{
  background: var(--card) !important;
  color: var(--text) !important;
  border: 1px solid rgba(12,23,33,0.06) !important;
  box-shadow: 0 12px 30px rgba(12,23,33,0.06) !important;
  border-radius: 12px;
}

/* Slightly adjust the hero container spacing in light mode so the card
  breathes on small screens as well. */
.theme-light .hero-inner, [data-theme="light"] .hero-inner{padding:18px}

@media (max-width:700px){
  .hero-subskills{justify-content:center;flex-wrap:wrap}
}

/* Enhanced role styling: make the role prominent, recruiter-friendly, and
   readable in both light and dark themes. Uses gradient text with a soft
   translucent pill behind for contrast. */
.hero-role{
  position:relative;
  display:inline-block;
  font-size:1rem; /* slightly larger */
  padding:8px 14px;
  border-radius:999px;
  font-weight:800;
  letter-spacing:1.6px;
  text-transform:uppercase;
  z-index:2;
  background: linear-gradient(90deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  color: #fff;
  -webkit-font-smoothing:antialiased;
}

.hero-role::before{
  /* soft glow/pill behind the label for better separation from hero bg */
  content:"";
  position:absolute;left:0;right:0;top:0;bottom:0;border-radius:999px;
  background: linear-gradient(90deg, rgba(124,58,237,0.08), rgba(0,212,255,0.06));
  filter: blur(6px);opacity:0.55;z-index:-1;
}

/* Make the text itself gradient for emphasis while keeping contrast */
.hero-role span{
  background: linear-gradient(90deg,#7c5cff,#00d4ff);
  -webkit-background-clip:text;background-clip:text;color:transparent;font-weight:900
}

/* Light theme adjustments so gradients remain visible */
.theme-light .hero-role,
[data-theme="light"] .hero-role{
  background: linear-gradient(90deg, rgba(12,23,33,0.04), rgba(12,23,33,0.02));
  color: #071428;
}

@media (max-width:700px){
  .hero-role{font-size:0.95rem;padding:6px 10px}
}

/* Make the search and filters sit comfortably under the hero */
#project-search, #project-search[type="search"], input#project-search{padding:10px;border-radius:10px;border:1px solid rgba(255,255,255,0.06);background:linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));color:inherit;min-width:220px}
.filters{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-left:6px}

/* Projects section spacing adjustments */
.projects.container{padding-top:18px;padding-bottom:36px}
#projects-heading{margin:8px 0 12px}

/* Make project cards equal-height and improve content spacing */
.grid{align-items:start}
.project-card{display:flex;flex-direction:column;justify-content:space-between;padding:18px}
.project-card .project-image{margin-bottom:12px;border-radius:8px}
.project-card p:last-child{margin-top:12px}

/* Ensure badges and filters don't wrap awkwardly on narrow screens */
@media (max-width:900px){
  .hero-inner{padding:18px}
  #project-search{width:100%}
  .filters{margin-top:8px}
}


/* improve hero spacing (original stylesheet content retained) */
.title{color:#f6f9ff;margin-top:6px}
.subtitle{color:var(--muted);margin-top:6px}
.contact-info{color:#cbd5e1;margin-top:12px}
.hero-lead-first{font-size:1.05rem;color:rgba(233,240,251,0.94);margin-bottom:12px}
.hero-name{font-size:2.2rem;margin:6px 0 6px}
.hero-role{display:inline-block;font-weight:800;text-transform:uppercase;letter-spacing:1.4px;padding:6px 12px;border-radius:999px;background:linear-gradient(90deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));color:#fff;box-shadow:0 8px 30px rgba(124,58,237,0.12);font-size:0.9rem}

/* Gradient text accent for role when in light theme */
.hero-role{background:linear-gradient(90deg,#7c5cff,#00d4ff);-webkit-background-clip:text;background-clip:text;color:transparent;padding:0}
.hero-role::after{content:' —';color:rgba(233,240,251,0.6);margin-left:8px;font-weight:600}

/* animated shimmer under the role (subtle) */
.hero-role{
  position:relative;
}
.hero-role::before{
  content:'';position:absolute;left:0;right:0;bottom:-6px;height:6px;background:linear-gradient(90deg, rgba(124,58,237,0.12), rgba(0,212,255,0.08));border-radius:6px;opacity:0.9;transform:translateY(6px);transition:transform .36s cubic-bezier(.2,.9,.2,1),opacity .36s
}
.hero-role:hover::before{transform:translateY(0);opacity:1}

/* smaller screens: tighten font sizes */
@media (max-width:700px){
  .hero-lead-first{font-size:0.98rem}
  .hero-name{font-size:1.6rem}
  .hero-role{font-size:0.85rem}
}

/* Resume page specific summary card */
.resume-summary{background:linear-gradient(180deg, rgba(124,58,237,0.04), rgba(0,212,255,0.02));border:1px solid rgba(255,255,255,0.03);color:rgba(233,240,251,0.95)}
.cta{background:linear-gradient(90deg,var(--accent),var(--accent-3));box-shadow:0 8px 30px rgba(124,58,237,0.12);border:none}

.project-controls{display:flex;flex-direction:column;gap:12px;margin-bottom:14px}
#project-search{padding:12px;border-radius:12px;border:1px solid rgba(255,255,255,0.06);background:linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));color:inherit}

.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.project-card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:20px;border-radius:12px;box-shadow:0 18px 36px rgba(2,6,23,0.6);transition:transform .28s cubic-bezier(.2,.9,.3,1),box-shadow .28s;will-change:transform,box-shadow;position:relative}
.project-card:focus-within{transform:translateY(-12px) scale(1.03);box-shadow:0 30px 60px rgba(2,6,23,0.28);z-index:2}
.project-card h3 a{color:#fff;text-decoration:none}
.meta{color:var(--muted);margin-bottom:8px}
.project-image{width:100%;height:160px;object-fit:cover;border-radius:8px;margin-bottom:12px;display:block}
.badge{background:linear-gradient(90deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));color:#fff}
.tech-badge{background:linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));color:var(--text);border:1px solid rgba(255,255,255,0.04);padding:6px 10px;border-radius:999px}

/* animation */
.fade-in{animation:fadeInUp .45s ease both}
@keyframes fadeInUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* smaller screens tweaks */
@media (max-width:700px){.hero-inner{padding:20px}.hero-inner h1{font-size:1.6rem}} 
/* section reveal animation */
.animated-section{opacity:0;transform:translateY(14px);transition:transform .6s cubic-bezier(.2,.9,.2,1),opacity .6s}
.animated-section.is-visible{opacity:1;transform:none}

/* skill badge hover animation */
.skill-badge{display:inline-block;margin:6px;padding:8px 12px;border-radius:999px;background:linear-gradient(90deg,#7c3aed22,#06b6d422);color:#fff;cursor:default;transition:transform .22s,box-shadow .22s}
.skill-badge:hover{transform:translateY(-6px) scale(1.04);box-shadow:0 10px 30px rgba(0,0,0,0.4)}

/* tech-badge: behave like skill badges for hover and active (filters) */
.tech-badge{display:inline-block;background:linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));color:var(--text);padding:6px 10px;border-radius:20px;margin:6px;text-decoration:none;border:1px solid rgba(255,255,255,0.04);transition:transform .22s,box-shadow .22s,opacity .18s;cursor:pointer}
.tech-badge:hover{transform:translateY(-6px) scale(1.04);box-shadow:0 10px 30px rgba(0,0,0,0.28)}
.tech-badge.active, .tech-badge.selected{transform:translateY(-6px) scale(1.04);box-shadow:0 10px 30px rgba(0,0,0,0.32);opacity:1}

/* Light theme variants: softer shadows and ensure visibility */
.theme-light .tech-badge, [data-theme="light"] .tech-badge{background:#f1f5f9;color:#0f172a;border:1px solid #e6eefb}
.theme-light .tech-badge:hover, [data-theme="light"] .tech-badge:hover{box-shadow:0 8px 20px rgba(12,23,33,0.06);transform:translateY(-6px) scale(1.04)}
.theme-light .tech-badge.active, [data-theme="light"] .tech-badge.active{box-shadow:0 10px 28px rgba(12,23,33,0.08)}

/* Light-mode project-card hover: use a softer shadow so the pop looks natural */
.theme-light .project-card:hover, [data-theme="light"] .project-card:hover{box-shadow:0 18px 48px rgba(12,23,33,0.06);transform:translateY(-10px) scale(1.02)}

/* subtle animated background */
.animated-bg{background:radial-gradient( circle at 10% 20%, rgba(124,58,237,0.12), transparent 8%), radial-gradient( circle at 80% 80%, rgba(6,182,212,0.08), transparent 10% );animation:bgShift 12s linear infinite}
@keyframes bgShift{0%{background-position:0% 0%}50%{background-position:100% 100%}100%{background-position:0% 0%}}

/* contact form */
.contact-box{display:flex;gap:24px;flex-wrap:wrap}
.contact-pre{background:rgba(255,255,255,0.02);padding:12px;border-radius:10px}
form label{display:block;margin-top:8px}
form input, form textarea{width:100%;padding:10px;border-radius:8px;border:1px solid rgba(255,255,255,0.06);background:transparent;color:inherit}

/* Contact card and improved form controls */
.contact-card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:18px;border-radius:12px;box-shadow:0 18px 40px rgba(2,6,23,0.45);margin-top:12px}
.contact-form .form-row{margin-bottom:12px}
.contact-form label{font-weight:600;margin-bottom:6px;display:block}
.form-control{width:100%;padding:12px;border-radius:10px;border:1px solid rgba(255,255,255,0.06);background:transparent;color:inherit}
.form-control::placeholder{color:rgba(255,255,255,0.5)}
.contact-actions{display:flex;justify-content:flex-end;margin-top:10px}

/* Button with internal spinner */
.cta{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:8px;border:none;background:linear-gradient(90deg,var(--accent),var(--accent-3));color:#fff;cursor:pointer;font-weight:700}
.cta:disabled{opacity:0.6;cursor:default}
.cta .btn-text{display:inline-block}
.cta .spinner{margin-left:6px;width:16px;height:16px;border-width:2px}
.contact-form.is-loading .cta{pointer-events:none;opacity:0.95}

/* Light-theme overrides for contact card and inputs */
.theme-light .contact-card, [data-theme="light"] .contact-card{background:var(--card);box-shadow:0 8px 30px rgba(12,23,33,0.06)}
.theme-light .form-control, [data-theme="light"] .form-control{background:var(--card);color:var(--text);border:1px solid rgba(12,23,33,0.06)}
.theme-light .cta, [data-theme="light"] .cta{background:linear-gradient(90deg,var(--accent),var(--accent-3));color:#fff}

/* Timeline: styled to match provided example (alternating flex timeline) */
.timeline{padding:0 5%;max-width:1300px;margin:0 auto}
.timeline-item{display:flex;align-items:flex-start;margin-bottom:18px}
.timeline-item > div{flex:1;padding:20px 40px}
.timeline-item > .timeline-date{position:relative}
.timeline-item > .timeline-date > div{
  /* use CSS variables so badges match panel color in both light and dark themes */
  background: var(--timeline-badge-bg, linear-gradient(to right,var(--accent-2,#7c5cff),var(--accent)));
  box-shadow: 0 10px 15px rgba(124,58,237,0.25);
  border-radius:50px;
  color: var(--timeline-badge-color, #ffffff);
  text-align:center;
  max-width:max-content;margin:auto;padding:10px 30px;
}
.timeline-item > .timeline-date::after{display:none}
.timeline-item:nth-child(odd) > .timeline-date{order:1;text-align:right}
.timeline-item:nth-child(odd) > .timeline-content{order:2;text-align:left;border-left:2px solid rgba(0,0,0,0.06)}
 .timeline-item:nth-child(even) > .timeline-date{order:2;text-align:left}
 /* Ensure content on the left side is left-aligned (was right-aligned) so
   job descriptions and bullets read naturally from the left edge. */
 .timeline-item:nth-child(even) > .timeline-content{order:1;text-align:left;border-right:2px solid rgba(0,0,0,0.06)}
.timeline-item .timeline-content h2{color:var(--accent-2);margin:0;font-size:1.2em;font-weight:700}
.timeline-item .timeline-content h2 span{color:var(--accent);font-weight:700;font-size:0.8em;margin-left:8px}
.timeline-item .timeline-content p{font-size:0.95rem;padding:20px;background:#fff;border-radius:10px;box-shadow:0 10px 20px rgba(124,58,237,0.06);position:relative;line-height:1.5;min-height:80px}
.timeline-item .timeline-content p img{width:100px;opacity:0.05;position:absolute;right:0;bottom:0;transform-origin:bottom right;transform:scale(1.6)}
.timeline-card{background:#fff;border-radius:12px;box-shadow:0 18px 36px rgba(2,6,23,0.12);padding:16px}
/* Clickable header to toggle details for each timeline item */
.timeline-header{display:flex;align-items:center;gap:12px;margin-bottom:8px;cursor:pointer}
.timeline-header:focus{outline:none;box-shadow:0 0 0 4px rgba(124,58,237,0.08);border-radius:8px}

/* Collapsible card behavior: hide bullets when collapsed */
.timeline-card.collapsible .timeline-bullets{max-height:0;overflow:hidden;transition:max-height .28s ease;padding-top:0;margin-top:0}
.timeline-card.collapsible .timeline-card-text{transition:transform .28s ease}
.timeline-card.collapsible.collapsed{padding-bottom:12px}
.timeline-card.collapsible.expanded .timeline-bullets{max-height:500px}

/* small hint for interactive affordance (uses pseudo-element so no extra markup needed) */
.timeline-header::after{content:'Show details';margin-left:auto;color:var(--muted);font-weight:600;font-size:0.92rem}
.timeline-header[aria-expanded="true"]::after{content:'Hide details'}

/* Make visit button style irrelevant (buttons removed from markup) but keep safe style if reintroduced */
.timeline-item .visit{display:none}
.timeline-card-text{margin:0;color:var(--muted);line-height:1.5}
.timeline-bullets{margin:10px 0 0 18px;padding:0;color:var(--muted)}
.timeline-bullets li{margin:6px 0}
.timeline-item .visit{background:none;border:1px solid rgba(124,58,237,0.08);color:var(--accent-2);padding:8px 12px;border-radius:24px;cursor:pointer}

@media (max-width:767px){
  .timeline-item{flex-direction:column;border-left:2px solid rgba(0,0,0,0.06);padding-left:20px}
  .timeline-item > div{order:unset;padding:12px}
  .timeline-item > .timeline-date::after{left:0}
  .timeline-item .timeline-content h2{font-size:1.05em}
}

/* center-line dot for each timeline item (keeps dot on the vertical line) */
.timeline-item{position:relative}
.timeline-item::before{content:'';position:absolute;left:50%;transform:translateX(-50%);top:28px;width:12px;height:12px;border-radius:50%;background:var(--accent-2);box-shadow:0 0 0 6px rgba(124,58,237,0.08);z-index:6}

/* Dark-mode overrides for timeline readability */
/* no-op wrapper removed */

html:not([data-theme="light"]) .timeline.timeline-alt::before,
body:not(.theme-light) .timeline.timeline-alt::before{
  /* brighter, higher-contrast center line in dark mode */
  background:linear-gradient(180deg, rgba(124,58,237,0.60), rgba(0,212,255,0.45));
}

/* Make date badges on the center line clearly visible in dark mode */
html:not([data-theme="light"]) .timeline-item > .timeline-date > div,
body:not(.theme-light) .timeline-item > .timeline-date > div{
  box-shadow:0 10px 20px rgba(0,0,0,0.6);
  color:#fff;
}

/* Ensure timeline cards have sufficient contrast in dark mode
   (but render them like the light-mode panels so the resume is consistent) */
html:not([data-theme="light"]) .timeline-card,
body:not(.theme-light) .timeline-card{
  background: var(--timeline-panel-bg) !important;
  color: var(--timeline-panel-text) !important;
  /* lighter shadow and subtle border to match light-theme card appearance */
  box-shadow:0 18px 36px rgba(2,6,23,0.12);
  border:1px solid rgba(12,23,33,0.04);
}

/* Make card text and meta readable in dark mode */
html:not([data-theme="light"]) .timeline-card-text,
body:not(.theme-light) .timeline-card-text,
html:not([data-theme="light"]) .timeline-bullets li,
body:not(.theme-light) .timeline-bullets li{
  color:rgba(233,240,251,0.92);
}

/* Stronger, consolidated dark-mode timeline tweaks to ensure full visibility */
html:not([data-theme="light"]) .timeline,
body:not(.theme-light) .timeline{
  /* expose variables for quick tuning if needed */
  /* Use the colorful gradient for the center line (same as original design) */
  --timeline-line: linear-gradient(180deg,var(--accent-3,#00d4ff),var(--accent,#ff6b6b));
  /* Force panels to look like the light theme so resume content is consistent
     between themes (white panels + dark text). This keeps the timeline
     readable and recruiter-friendly in dark mode per user request. */
  /* Use a dark-panel variant (not pure white) so boxes read as dark cards
    in dark mode while keeping text light for contrast. Adjust these
    values if you want a lighter/darker shade. */
  --timeline-panel-bg: rgba(12,18,30,0.92);
  --timeline-panel-text: rgba(233,240,251,0.96);
  /* badges use the colorful gradient so date pills stay colorful in dark mode */
  --timeline-badge-bg: linear-gradient(90deg,var(--accent-2,#7c5cff),var(--accent,#ff6b6b));
  --timeline-badge-color: #ffffff;
}

/* Make center line stronger and ensure it sits behind markers */
html:not([data-theme="light"]) .timeline.timeline-alt::before,
body:not(.theme-light) .timeline.timeline-alt::before,
html:not([data-theme="light"]) .timeline2::before,
body:not(.theme-light) .timeline2::before{
  background: var(--timeline-line) !important;
  width:6px; /* slightly thicker for visibility */
  z-index:2;
  box-shadow: 0 0 18px rgba(0,0,0,0.6);
}

/* Dark-mode: ensure the panel edge bordering the center line has a visible gray border
   so the dividing line is clear where panels meet the center. Left border for
   right-facing content (odd items), right border for left-facing content (even items). */
html:not([data-theme="light"]) .timeline-item:nth-child(odd) > .timeline-content,
body:not(.theme-light) .timeline-item:nth-child(odd) > .timeline-content{
  border-left: 2px solid rgba(148,163,184,0.16); /* subtle slate-gray */
}
html:not([data-theme="light"]) .timeline-item:nth-child(even) > .timeline-content,
body:not(.theme-light) .timeline-item:nth-child(even) > .timeline-content{
  border-right: 2px solid rgba(148,163,184,0.16);
}

/* Same treatment for the timeline2 panels (alternate layout) */
html:not([data-theme="light"]) .timeline2 .timeline2__item.right .timeline2__panel,
body:not(.theme-light) .timeline2 .timeline2__item.right .timeline2__panel{
  border-left: 2px solid rgba(148,163,184,0.12);
}
html:not([data-theme="light"]) .timeline2 .timeline2__item.left .timeline2__panel,
body:not(.theme-light) .timeline2 .timeline2__item.left .timeline2__panel{
  border-right: 2px solid rgba(148,163,184,0.12);
}

/* Ensure the small center marker/dot and badges sit above the center line */
html:not([data-theme="light"]) .timeline-item::before,
body:not(.theme-light) .timeline-item::before,
html:not([data-theme="light"]) .timeline2 .timeline2__marker-wrapper,
body:not(.theme-light) .timeline2 .timeline2__marker-wrapper{
  z-index:12; /* above the center line */
}

/* Make the date badges and marker badges highly-contrasted */
html:not([data-theme="light"]) .marker-badge,
body:not(.theme-light) .marker-badge,
html:not([data-theme="light"]) .timeline-item > .timeline-date > div,
body:not(.theme-light) .timeline-item > .timeline-date > div{
  background: var(--timeline-badge-bg) !important;
  color: var(--timeline-badge-color) !important;
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 8px 20px rgba(0,0,0,0.6);
  z-index:14; /* ensure badges float above everything */
}

/* Panels/cards should be darker and more opaque in dark mode for legibility */
html:not([data-theme="light"]) .timeline-card,
body:not(.theme-light) .timeline-card,
html:not([data-theme="light"]) .timeline2__panel,
body:not(.theme-light) .timeline2__panel{
  background: var(--timeline-panel-bg) !important;
  color: var(--timeline-panel-text) !important;
  /* use a subtler border and lighter shadow so panels read like light-mode cards */
  border: 1px solid rgba(12,23,33,0.04);
  box-shadow: 0 18px 36px rgba(2,6,23,0.12) !important;
}

/* Ensure inner content paragraphs (which were white) become dark-panel readable */
html:not([data-theme="light"]) .timeline-item .timeline-content p,
body:not(.theme-light) .timeline-item .timeline-content p{
  /* Reverted: keep the paragraph interior transparent (like light mode
     box interior) while panel/card uses the light background. This keeps
     the inner text readable but preserves the original box interior. */
  background: transparent !important;
  color: var(--timeline-panel-text) !important;
}

/* Add a subtle lighter stripe on the panel edge that faces the center line in dark mode
   so the vertical timeline is visible where panels meet the center. This creates a
   visual separation without changing panel background. Hidden on small screens. */
html:not([data-theme="light"]) .timeline.timeline-alt .timeline-item .timeline-content,
body:not(.theme-light) .timeline.timeline-alt .timeline-item .timeline-content,
html:not([data-theme="light"]) .timeline2 .timeline2__panel,
body:not(.theme-light) .timeline2 .timeline2__panel{
  position:relative; /* allow pseudo-element positioning */
  z-index:6;
}

/* Right-side panels: draw a faint stripe on their left edge (next to center line) */
html:not([data-theme="light"]) .timeline.timeline-alt .timeline-item.right .timeline-content::before,
body:not(.theme-light) .timeline.timeline-alt .timeline-item.right .timeline-content::before,
html:not([data-theme="light"]) .timeline2 .timeline2__item.right .timeline2__panel::before,
body:not(.theme-light) .timeline2 .timeline2__item.right .timeline2__panel::before{
  content:'';position:absolute;top:0;bottom:0;left:-12px;width:12px;border-radius:6px 0 0 6px;
  /* stronger white stripe so the center line is visible where panels meet it */
  background: linear-gradient(90deg, rgba(255,255,255,0.12), rgba(255,255,255,0.00));
  pointer-events:none;z-index:8;
}

/* Left-side panels: draw a faint stripe on their right edge (next to center line) */
html:not([data-theme="light"]) .timeline.timeline-alt .timeline-item.left .timeline-content::before,
body:not(.theme-light) .timeline.timeline-alt .timeline-item.left .timeline-content::before,
html:not([data-theme="light"]) .timeline2 .timeline2__item.left .timeline2__panel::before,
body:not(.theme-light) .timeline2 .timeline2__item.left .timeline2__panel::before{
  content:'';position:absolute;top:0;bottom:0;right:-12px;width:12px;border-radius:0 6px 6px 0;
  /* stronger white stripe so the center line is visible where panels meet it */
  background: linear-gradient(270deg, rgba(255,255,255,0.12), rgba(255,255,255,0.00));
  pointer-events:none;z-index:8;
}

/* Hide the stripes on small screens for compact layout */
@media (max-width:900px){
  html:not([data-theme="light"]) .timeline.timeline-alt .timeline-item .timeline-content::before,
  body:not(.theme-light) .timeline.timeline-alt .timeline-item .timeline-content::before,
  html:not([data-theme="light"]) .timeline2 .timeline2__panel::before,
  body:not(.theme-light) .timeline2 .timeline2__panel::before{ display:none }
}


/* Slightly brighten the small date-range text in cards for contrast */
html:not([data-theme="light"]) .timeline-date-range,
body:not(.theme-light) .timeline-date-range{
  color:rgba(233,240,251,0.65);
}

/* Make the center-line marker dot more visible in dark mode */
html:not([data-theme="light"]) .timeline-item::before,
body:not(.theme-light) .timeline-item::before{
  background:var(--accent-2);
  box-shadow:0 0 0 8px rgba(124,58,237,0.12);
}

/* Compact mode: show tighter layout */
.timeline.compact .timeline-item{margin:10px 0}
.timeline.compact .timeline-body ul{max-height:3.2em;overflow:hidden}

/* Toolbar */
.timeline-toolbar{display:flex;gap:8px;align-items:center;margin-bottom:8px}
.timeline-toolbar label{font-weight:600;margin-right:6px}

/* Alternating timeline (desktop) similar to css3transition example */
.timeline.timeline-alt{position:relative;padding:40px 0}
.timeline.timeline-alt::before{content:'';position:absolute;left:50%;top:0;bottom:0;width:4px;background:linear-gradient(180deg,var(--accent-3),var(--accent));transform:translateX(-50%);}
.timeline.timeline-alt .timeline-item{width:50%;padding:12px 20px;box-sizing:border-box}
.timeline.timeline-alt .timeline-item.left{position:relative;left:0; text-align:right;}
.timeline.timeline-alt .timeline-item.right{position:relative;left:50%; text-align:left}
.timeline.timeline-alt .timeline-item .timeline-content{display:inline-block;max-width:92%;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:12px;border-radius:8px}
.timeline.timeline-alt .timeline-marker{position:absolute;left:50%;transform:translateX(-50%);top:20px;width:14px;height:14px;border-radius:50%;background:var(--accent);box-shadow:0 6px 18px rgba(124,58,237,0.18)}


/* adjust animation for alternate layout */
.timeline.timeline-alt .timeline-item{opacity:0;transform:translateY(18px);transition:opacity .45s ease, transform .45s ease}
.timeline.timeline-alt .timeline-item.visible{opacity:1;transform:none}

@media (max-width:900px){
  .timeline.timeline-alt::before{left:10px;}
  .timeline.timeline-alt .timeline-item{width:100%;left:0;padding-left:28px;text-align:left}
  .timeline.timeline-alt .timeline-item.right{left:0}
  .timeline.timeline-alt .timeline-marker{left:10px;transform:none}
  .timeline.timeline-alt .timeline-item .timeline-content{max-width:100%}
}

/* Map styles */
.map-wrap{width:100%;height:120px;margin-top:8px}
.world-map{width:100%;height:100%;display:block}
.map-pin{transform-origin:center center;animation:pinPulse 1.6s ease infinite}
@keyframes pinPulse{0%{transform:scale(1)}50%{transform:scale(1.4)}100%{transform:scale(1)}}

/* small responsive tweaks for resume */
@media (max-width:900px){
  .timeline{padding-left:12px}
  .contact-card, .about{margin-top:10px}
}

/* Make message textarea fixed size and non-resizable/draggable */
.contact-form textarea.form-control{
  resize: none !important;
  height: 160px; /* fixed height for consistent layout */
  overflow-y: auto;
}

/* On very small screens, make the textarea slightly shorter to fit */
@media (max-width:420px){
  .contact-form textarea.form-control{ height:120px }
}

/* Light-theme form refinements: make borders and backgrounds readable in light mode */
.theme-light form input, [data-theme="light"] form input,
.theme-light form textarea, [data-theme="light"] form textarea{
  background: var(--card);
  color: var(--text);
  border: 1px solid rgba(12,23,33,0.06);
}
.theme-light .contact-pre, [data-theme="light"] .contact-pre{
  background: var(--card);
  border: 1px solid rgba(12,23,33,0.06);
}

/* Dropzone / drag-box styling: used for file uploads or visual emphasis */
.dropzone, .drag-box{
  display:block;
  width:100%;
  padding:18px;
  border-radius:10px;
  border: 1px dashed rgba(255,255,255,0.06);
  background: linear-gradient(90deg, rgba(255,255,255,0.01), rgba(255,255,255,0.00));
  color:inherit;
  text-align:center;
  transition: border-color .18s, background .18s, box-shadow .18s;
}
.dropzone:hover, .drag-box:hover{ border-color: rgba(124,58,237,0.18); box-shadow: 0 6px 18px rgba(124,58,237,0.06); }
.theme-light .dropzone, [data-theme="light"] .dropzone,
.theme-light .drag-box, [data-theme="light"] .drag-box{
  border: 1px dashed rgba(12,23,33,0.08);
  background: linear-gradient(90deg, rgba(12,23,33,0.02), rgba(12,23,33,0.01));
}
.dropzone:focus-within, .drag-box:focus-within{ outline: none; box-shadow: 0 0 0 4px rgba(124,58,237,0.06); }

/* Contact status banners and spinner */
.contact-status{
  margin: 0.5rem 0 1rem 0;
  padding: 0.75rem 1rem;
  border-radius: 6px;
  font-weight: 600;
}
.contact-status.ok{
  background: #e6ffed;
  color: #0b6a2a;
  border: 1px solid #b7f0c2;
}
.contact-status.error{
  background: #fff1f0;
  color: #8a1d17;
  border: 1px solid #f3c2bf;
}
.spinner{
  display: inline-block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(0,0,0,0.12);
  border-top-color: rgba(0,0,0,0.5);
  animation: spin 800ms linear infinite;
  margin-left: 0.6rem;
}
@keyframes spin{ to { transform: rotate(360deg); } }

/* Ensure the spinner respects the hidden attribute and aria-hidden
   so it does not display before JS toggles it (some CSS rules set
   .spinner display explicitly which can override the native [hidden]). */
.spinner[hidden], .spinner[aria-hidden="true"]{ display: none !important; }

/* About stats */
.about-highlights{display:flex;gap:18px;margin:18px 0 6px}
.about-highlights .highlight{flex:1;background:linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:14px;border-radius:10px}
.about-highlights .highlight h3{margin:0 0 6px}
.skill-badge{display:inline-block;margin:6px;padding:8px 12px;border-radius:999px;background:linear-gradient(90deg,#7c3aed22,#06b6d422);color:#fff;cursor:default;transition:transform .22s,box-shadow .22s}
.skill-badge:hover{transform:translateY(-6px) scale(1.04);box-shadow:0 10px 30px rgba(0,0,0,0.4)}

/* small polish */
.about-hero .lead{color:rgba(230,238,248,0.88)}
#skills-cloud{display:flex;flex-wrap:wrap;gap:8px}

/* Make the about section more mobile-friendly: stack highlights, improve spacing and badge touch targets */
@media (max-width:600px){
  .about-highlights{flex-direction:column;align-items:stretch;gap:12px}
  .about-highlights .highlight{padding:12px;border-radius:10px}
  .about-hero h1{font-size:1.6rem;margin-bottom:6px}
  .about-hero .lead{font-size:1rem}
  #skills-cloud{justify-content:flex-start}
  .skill-badge{padding:10px 12px;font-size:0.95rem;margin:6px}
  .skills-list h2{font-size:1.1rem;margin-top:12px}
}

/* Resume: mobile-friendly tweaks */
@media (max-width:720px){
  /* Make the resume summary full-width and slightly larger for readability */
  .resume-summary{max-width:100% !important;margin:10px 8px 18px;padding:14px !important}
  .resume-summary p{font-size:1rem;line-height:1.5;color:var(--muted)}

  /* Timeline: stack items, increase spacing and improve tap targets */
  .timeline{padding:0 12px}
  .timeline-item{flex-direction:column;align-items:stretch;padding:10px 0}
  .timeline-date{margin-bottom:8px}
  .timeline-date > div{padding:8px 12px;border-radius:8px;font-size:0.95rem}

  /* Make header easier to tap and compress logo */
  .timeline-header{align-items:center;gap:12px;padding:6px 0}
  .company-logo{width:44px;height:44px;margin-right:10px}
  .timeline-header div > div{font-size:1rem}
  .timeline-header div > div + div{font-size:0.95rem}

  /* Timeline card: compact but readable; collapsed cards show short preview */
  .timeline-card{padding:12px;border-radius:10px}
  .timeline-card .timeline-date-range{font-size:0.95rem}
  .timeline-card-text{font-size:1rem;line-height:1.5;padding:12px;background:transparent;min-height:auto}
  .timeline-bullets li{font-size:1rem;margin:8px 0}

  /* When collapsed, show the full descriptive text but keep bullets hidden to reduce scrolling on phones */
  .timeline-card.collapsible.collapsed .timeline-card-text{max-height:none;overflow:visible;white-space:normal;word-break:break-word}
  .timeline-card.collapsible.collapsed .timeline-bullets{max-height:0;overflow:hidden}

  /* Ensure the interactive chevrons and headers are full-width touch targets */
  .timeline-header{width:100%;cursor:pointer}
}

/* Light-theme: make mobile nav overlay solid and high-contrast so links
   are readable over any background when opened. Position it under the
   header and ensure the backdrop and toggle remain visually distinct. */
@media (max-width:720px){
  .theme-light .header-inner.nav-open .nav,
  [data-theme="light"] .header-inner.nav-open .nav{
    position:fixed !important;
    left:0;right:0;
    /* place just under the header; adjust if your header height differs */
    top:56px;
    background: var(--card) !important;
    color: var(--text) !important;
    border-top: 1px solid rgba(12,23,33,0.04);
    box-shadow: 0 12px 30px rgba(12,23,33,0.06);
    padding:12px 16px; /* comfortable touch area */
    z-index:70;
    max-height: calc(100vh - 56px);
    overflow:auto;
  }

  /* ensure the backdrop remains slightly darker so there's clear separation */
  .theme-light #nav-backdrop, [data-theme="light"] #nav-backdrop{
    background: rgba(0,0,0,0.36) !important;
    z-index:65;
  }

  /* reaffirm link colors inside the overlay */
  .theme-light .header-inner.nav-open .nav a,
  [data-theme="light"] .header-inner.nav-open .nav a{
    color: var(--text) !important;
  }

  /* make the hamburger/toggle clearly visible on light overlays */
  .theme-light .nav-toggle, [data-theme="light"] .nav-toggle{
    color: var(--text) !important;
    border-color: rgba(12,23,33,0.06) !important;
  }
}

/* Strong overrides to ensure timeline becomes a clean single-column list on small screens */
@media (max-width:720px){
  /* hide decorative center line/dot used in wider layouts */
  .timeline::before, .timeline-item::before, .timeline.timeline-alt::before, .timeline2::before { display: none !important; }

  /* make each timeline item full-width and remove side borders */
  .timeline-item, .timeline.timeline-alt .timeline-item{width:100% !important; left:0 !important; padding-left:0 !important; padding-right:0 !important}
  .timeline-item > .timeline-content, .timeline.timeline-alt .timeline-item .timeline-content{border-left:none !important; border-right:none !important; box-shadow:none !important;}

  /* center the date badges and make them compact */
  .timeline-date{display:block;text-align:center;margin-bottom:8px}
  .timeline-date > div{display:inline-block;margin:0 auto;padding:6px 12px;border-radius:8px;font-size:0.95rem}

  /* ensure the card content stretches and has clear spacing */
  .timeline-content{width:100%;padding:0}
  .timeline-card{margin-top:8px}

  /* reduce left offsets used by timeline2/alt variants */
  .timeline2 .timeline2__item, .timeline.timeline-alt .timeline-item{padding-left:0;padding-right:0}

  /* remove floating markers or extra markers on small screens */
  .marker-badge, .timeline-marker, .timeline2__marker-wrapper { display:none !important; }
}

/* Dice widget styles */
.dice{width:72px;height:72px;background:linear-gradient(135deg,rgba(255,255,255,0.02),rgba(255,255,255,0.01));border-radius:12px;display:flex;align-items:center;justify-content:center;cursor:pointer;border:1px solid rgba(255,255,255,0.04);box-shadow:0 8px 20px rgba(2,6,23,0.5);user-select:none}
.dice-face{font-weight:800;font-size:1.6rem;color:var(--text)}
.dice.rolling{animation: diceRoll 1s cubic-bezier(.2,.9,.2,1)}
@keyframes diceRoll{0%{transform:rotate(0deg)}25%{transform:rotate(90deg) scale(.98)}50%{transform:rotate(200deg) scale(1.02)}75%{transform:rotate(270deg) scale(.99)}100%{transform:none}}

/* smaller version for very small screens */
@media (max-width:420px){.dice{width:56px;height:56px}.dice-face{font-size:1.2rem}}

/* Hero dice sizing and pip grid */
.hero-dice{width:220px;height:220px;border-radius:18px;display:flex;align-items:center;justify-content:center}
.dice-grid{width:72%;height:72%;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:8px;align-items:center;justify-items:center}
.pip{width:16px;height:16px;border-radius:50%;background:var(--pip-color,#ffffff);opacity:0;transform:scale(0.6);transition:opacity .18s ease, transform .18s cubic-bezier(.2,.9,.2,1);box-shadow:0 2px 6px rgba(0,0,0,0.45)}
.pip.visible{opacity:1;transform:scale(1)}

/* scale pip sizes for hero dice */
.hero-dice .pip{width:22px;height:22px}

/* smaller screens for hero dice */
@media (max-width:700px){.hero-dice{width:160px;height:160px}.hero-dice .pip{width:18px;height:18px}}

/* subtle dice hover */
.dice:hover{transform:translateY(-6px) scale(1.02)}

/* Projects heading: make white with animated gradient underline */
.projects h2{color:#ffffff;margin-bottom:12px;position:relative;padding-bottom:10px}
.projects h2::after{content:'';position:absolute;left:0;bottom:0;height:5px;width:80px;border-radius:6px;background:linear-gradient(90deg,var(--accent-2, #7c5cff),var(--accent, #ff6b6b));background-size:240% 100%;animation: underlineShift 4s linear infinite}
@keyframes underlineShift{0%{background-position:0% 0%}50%{background-position:100% 0%}100%{background-position:0% 0%}}

/*
  Place the project cards grid at the bottom of the .projects section when
  the viewport is tall enough (desktop/tablet). This keeps the visual focus
  higher on the page while ensuring projects appear visually anchored to
  the bottom of their section.

  Assumptions:
  - HTML uses a containing element with class `projects` and the grid has
    id `projects-grid` (matches markup you provided).
  - This is a visual/layout-only change; content order in the DOM is unchanged.

  To revert: remove this block.
*/
.projects{
  display:flex;
  flex-direction:column;
  gap:18px; /* preserve spacing between heading/controls and the grid */
}

/* push the grid to the bottom of the .projects container */
.projects > #projects-grid{
  margin-top: auto;
  align-self:stretch;
}

/* Desktop/tall view: ensure projects area can expand to fill available space
   so the grid sits near the page bottom (adjust offset as needed). */
@media (min-height:700px){
  .projects{ min-height: calc(100vh - 160px); /* reserve room for header/footer */ }
  .projects > #projects-grid{ margin-top: auto; }
}

/* Small screens: keep normal flow to avoid cramped layout */
@media (max-width:900px){
  .projects{ display:block; min-height:auto }
  .projects > #projects-grid{ margin-top:0 }
}


/* Project cards: staggered entrance when the section becomes visible */
.projects #projects-grid .project-card{opacity:0;transform:translateY(18px) scale(.995);transition:transform .32s ease,opacity .32s ease}
.projects.is-visible #projects-grid .project-card{animation:cardIn .48s cubic-bezier(.2,.9,.3,1) both}
@keyframes cardIn{from{opacity:0;transform:translateY(18px) scale(.995)}to{opacity:1;transform:none}}

/* Stagger delays for the first 12 cards */
.projects.is-visible #projects-grid .project-card:nth-child(1){animation-delay:0.05s}
.projects.is-visible #projects-grid .project-card:nth-child(2){animation-delay:0.10s}
.projects.is-visible #projects-grid .project-card:nth-child(3){animation-delay:0.15s}
.projects.is-visible #projects-grid .project-card:nth-child(4){animation-delay:0.20s}
.projects.is-visible #projects-grid .project-card:nth-child(5){animation-delay:0.25s}
.projects.is-visible #projects-grid .project-card:nth-child(6){animation-delay:0.30s}
.projects.is-visible #projects-grid .project-card:nth-child(7){animation-delay:0.35s}
.projects.is-visible #projects-grid .project-card:nth-child(8){animation-delay:0.40s}
.projects.is-visible #projects-grid .project-card:nth-child(9){animation-delay:0.45s}
.projects.is-visible #projects-grid .project-card:nth-child(10){animation-delay:0.50s}
.projects.is-visible #projects-grid .project-card:nth-child(11){animation-delay:0.55s}
.projects.is-visible #projects-grid .project-card:nth-child(12){animation-delay:0.60s}

/* Subtle highlight for project cards (no tilt) */
.project-card{transform-origin:center center}
.project-card::after{content:'';position:absolute;pointer-events:none;left:0;top:0;width:100%;height:100%;border-radius:inherit;background:linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.00));opacity:0;transition:opacity .35s ease;mix-blend-mode:overlay}
/* Use a clean pop (translate + scale) without 3D tilt to avoid odd light/shadow artifacts */
.project-card:hover{transform:translateY(-12px) scale(1.03);box-shadow:0 30px 60px rgba(2,6,23,0.28)}
.project-card:hover::after{opacity:1}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce){
  .project-card, .project-card:hover, .project-card:focus-within { transition: none !important; transform: none !important; }
  .project-card::after { display: none !important; }
}

/* gentle bob for hero dice to add motion */
.hero-dice{animation:bob 6s ease-in-out infinite}
@keyframes bob{0%{transform:translateY(0)}50%{transform:translateY(-8px)}100%{transform:translateY(0)}}

/* Light-theme element overrides to ensure text & controls are readable */
.theme-light body, [data-theme="light"] body {
  background: var(--bg-1);
  color: var(--text);
}
.theme-light .site-header, [data-theme="light"] .site-header {
  background: var(--surface);
  border-bottom: 1px solid rgba(12,23,33,0.04);
}
.theme-light .nav a, [data-theme="light"] .nav a{
  color: var(--muted);
}
.theme-light .brand, [data-theme="light"] .brand{ color: var(--accent); }
.theme-light .hero-inner h1, [data-theme="light"] .hero-inner h1{ color: var(--text); }
.theme-light .title, [data-theme="light"] .title{ color: var(--muted); }
.theme-light .subtitle, [data-theme="light"] .subtitle{ color: var(--muted); }
.theme-light .project-card, [data-theme="light"] .project-card{ background: var(--card); color: var(--text); box-shadow: 0 6px 18px rgba(12,15,30,0.06); }
.theme-light .project-card h3 a, [data-theme="light"] .project-card h3 a{ color: var(--text); }
.theme-light .projects h2, [data-theme="light"] .projects h2{ color: var(--text); }
.theme-light .badge, [data-theme="light"] .badge{ background:#eef2ff; color:#0f172a }
.theme-light .tech-badge, [data-theme="light"] .tech-badge{ background:#f1f5f9; color:#0f172a; border:1px solid #e6eefb }
.theme-light #project-search, [data-theme="light"] #project-search{ background: linear-gradient(90deg, rgba(12,18,36,0.02), rgba(12,18,36,0.01)); color:inherit; border:1px solid rgba(12,18,36,0.06); }
.theme-light .cta, [data-theme="light"] .cta{ color:#fff }

/* ensure the projects underline isn't white in light mode */
.theme-light .projects h2::after, [data-theme="light"] .projects h2::after{ background:linear-gradient(90deg,var(--accent-2,#7c5cff),var(--accent,#ff6b6b)); }

/* New timeline2 styles (inspired by css3transition demo) */
.timeline2{position:relative;padding:30px 0}
.timeline2::before{content:'';position:absolute;left:50%;top:0;bottom:0;width:4px;background:linear-gradient(180deg,var(--accent-3),var(--accent));transform:translateX(-50%);}
.timeline2__item{position:relative;width:50%;padding:18px 30px;box-sizing:border-box;opacity:0;transform:translateY(14px);transition:opacity .5s ease, transform .5s ease}
.timeline2__item.visible{opacity:1;transform:none}
.timeline2__item.left{left:0;text-align:right}
.timeline2__item.right{left:50%;text-align:left}
.timeline2__badge{display:none}
.timeline2__panel{display:inline-block;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:16px;border-radius:12px;box-shadow:0 14px 34px rgba(2,6,23,0.5);max-width:86%;position:relative;z-index:6;transition:transform .22s ease,box-shadow .22s}
.timeline2__item.left .timeline2__panel{margin-left:auto;margin-right:46px;padding-right:22px}
.timeline2__item.right .timeline2__panel{margin-right:auto;margin-left:46px;padding-left:22px}
.timeline2__panel h3{margin:6px 0 8px}
.timeline2__panel .muted{color:var(--muted);font-weight:600;margin-left:8px}
.timeline2__body ul{margin:6px 0 0 0;padding-left:18px}

.timeline-bullets{margin:8px 0 0 0;padding-left:18px;color:rgba(233,240,251,0.9)}
.timeline-bullets li{margin:6px 0;line-height:1.35;font-size:0.96rem}
.theme-light .timeline-bullets li, [data-theme="light"] .timeline-bullets li{ color: #374151 }

/* Make the timeline date badge text white in light mode so dates like
   "Jan 2025" remain readable when the site uses the light theme. */
.theme-light .timeline-date > div,
[data-theme="light"] .timeline-date > div,
.theme-light .timeline2__date-badge,
[data-theme="light"] .timeline2__date-badge{
  color: #ffffff !important;
}

/* concise summary shown in the panel for quick scanning */
.timeline-summary{margin:8px 0 10px;color:rgba(233,240,251,0.88);font-size:0.98rem;line-height:1.4}
.theme-light .timeline-summary, [data-theme="light"] .timeline-summary{ color: #374151 }

/* date inside panel */
.timeline2__meta{display:flex;justify-content:flex-end}
.timeline2__meta{display:flex;align-items:center;gap:8px}

/* center-line date badge placed on the timeline line, outside the panel */
.timeline2__item{position:relative;width:50%;padding:18px 0;box-sizing:border-box;opacity:0;transform:translateY(14px);transition:opacity .5s ease, transform .5s ease}
.timeline2__marker-wrapper{position:absolute;left:50%;top:18px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;z-index:8}
/* replace the centered circular dot with a rotated-square 'diamond' marker */
/* user requested: remove the dot entirely — hide marker-dot */
.marker-dot{display:none}

/* badge base (no hard left offset here) — offsets applied per-side below */
.marker-badge{position:relative;white-space:nowrap;background:linear-gradient(90deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));padding:6px 10px;border-radius:999px;font-size:0.86rem;color:var(--muted);box-shadow:0 6px 18px rgba(2,6,23,0.18)}

/* per-side badge offsets: right-side panels have badge on the left, left-side panels have badge on the right */
.timeline2__item.right .marker-badge{left:-60px;text-align:right}
.timeline2__item.left .marker-badge{left:60px;text-align:left}

/* panels for right-side items (default) — bring panels closer to center */
.timeline2__item.right .timeline2__panel{position:relative;margin-left:calc(50% + 12px);max-width:calc(50% - 48px);text-align:left}
.timeline2__item.right .timeline2__panel:after{content:'';position:absolute;left:-14px;top:18px;border-right:10px solid rgba(255,255,255,0.12);border-top:8px solid transparent;border-bottom:8px solid transparent}

/* panels for left-side items */
.timeline2__item.left .timeline2__panel{position:relative;margin-right:calc(50% + 12px);margin-left:0;max-width:calc(50% - 48px);text-align:right}
.timeline2__item.left .timeline2__panel:after{content:'';position:absolute;right:-14px;top:18px;border-left:10px solid rgba(255,255,255,0.12);border-top:8px solid transparent;border-bottom:8px solid transparent}
.theme-light .timeline2__date-badge, [data-theme="light"] .timeline2__date-badge{background:var(--card);color:var(--muted);box-shadow:0 6px 18px rgba(12,23,33,0.04)}

/* markers container that holds independent markers for each timeline item */
.timeline2{position:relative}
@media (max-width:900px){
  /* on small screens keep badges hidden for compactness */
  .marker-badge{display:none}
  .marker-dot{width:10px;height:10px}
}

/* hover/active polish */
.timeline2__panel:hover{transform:translateY(-6px);box-shadow:0 20px 48px rgba(2,6,23,0.6)}
.timeline2__panel .chev{float:right;transform:rotate(0);transition:transform .18s}
.timeline2__panel.expanded .chev{transform:rotate(180deg)}

/* company logo */
.company-logo{width:48px;height:48px;border-radius:8px;object-fit:cover;border:1px solid rgba(255,255,255,0.06);margin-right:12px;display:block}

/* ensure meta row stacks on small screens */
@media (max-width:900px){
  .timeline2__meta{flex-direction:row;gap:8px}
  .company-logo{width:40px;height:40px}
}
@media (max-width:600px){
  .company-logo{width:30px;height:30px}
}

/* reveal animation for date */
.timeline2__date{opacity:0;transform:translateY(-6px);transition:opacity .32s ease, transform .32s ease}
.timeline2__item.visible .timeline2__date{opacity:1;transform:none}

/* logo hover animation */
.company-logo{transition:transform .22s ease, box-shadow .22s ease}
.company-logo:hover{transform:scale(1.08);box-shadow:0 8px 20px rgba(0,0,0,0.28)}

/* small reveal for entire panel when visible */
.timeline2__item{opacity:0;transform:translateY(10px);transition:opacity .45s ease, transform .45s ease}
.timeline2__item.visible{opacity:1;transform:none}

/* small arrow connecting panel to center line */
.timeline2__panel:after{content:'';position:absolute;width:0;height:0}
.timeline2__item.left .timeline2__panel:after{right:-14px;top:18px;border-left:10px solid rgba(255,255,255,0.02);border-top:8px solid transparent;border-bottom:8px solid transparent}
.timeline2__item.right .timeline2__panel:after{left:-14px;top:18px;border-right:10px solid rgba(255,255,255,0.02);border-top:8px solid transparent;border-bottom:8px solid transparent}

/* compact mode reduces paddings and font-size */
.timeline2.compact .timeline2__panel{padding:8px;border-radius:8px}
.timeline2.compact .timeline2__item{padding:8px 12px}
.timeline2.compact .timeline2__body ul{font-size:0.95rem}

/* Collapsible panel behavior */
.timeline2__panel.collapsed .timeline2__body{max-height:3.6em;overflow:hidden}
.timeline2__panel.expanded .timeline2__body{max-height:1200px;transition:max-height .35s ease}

/* Also support the dedicated timeline-full container used in templates */
.timeline-full.collapsed{max-height:3.6em;overflow:hidden}
.timeline-full.expanded{max-height:1200px;transition:max-height .35s ease}
.timeline-full ul{margin:6px 0 0 0;padding-left:18px}
.show-more{margin-top:10px;background:transparent;border:1px solid rgba(255,255,255,0.06);padding:8px 10px;border-radius:8px;color:inherit;cursor:pointer}
.show-more:hover{background:rgba(255,255,255,0.02)}
.timeline2__panel h3{cursor:pointer}

/* Consolidated, authoritative layout rules for timeline2 (desktop alternating) */
.timeline2{position:relative;padding:30px 0}
.timeline2::before{content:'';position:absolute;left:50%;top:0;bottom:0;width:4px;background:linear-gradient(180deg,var(--accent-3),var(--accent));transform:translateX(-50%);}

/* Each item takes half the width on desktop and is positioned left or right */
.timeline2 .timeline2__item{position:relative;width:50%;box-sizing:border-box;padding:18px 0;opacity:0;transform:translateY(14px);transition:opacity .45s ease, transform .45s ease}
.timeline2 .timeline2__item.left{left:0;text-align:right}
.timeline2 .timeline2__item.right{left:50%;text-align:left}

/* Marker wrapper centered on the line */
.timeline2 .timeline2__marker-wrapper{position:absolute;left:50%;top:18px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:6px;z-index:8}

/* Badge offsets and panel spacing — tuned to sit just beside the center line */
.timeline2 .timeline2__item.right .marker-badge{left:-60px;text-align:right}
.timeline2 .timeline2__item.left .marker-badge{left:60px;text-align:left}

.timeline2 .timeline2__item.right .timeline2__panel{position:relative;margin-left:calc(50% + 12px);max-width:calc(50% - 48px);text-align:left}
.timeline2 .timeline2__item.left .timeline2__panel{position:relative;margin-right:calc(50% + 12px);margin-left:0;max-width:calc(50% - 48px);text-align:right}

.timeline2 .timeline2__panel:after{content:'';position:absolute;width:0;height:0}
.timeline2 .timeline2__item.left .timeline2__panel:after{right:-14px;top:18px;border-left:10px solid rgba(255,255,255,0.02);border-top:8px solid transparent;border-bottom:8px solid transparent}
.timeline2 .timeline2__item.right .timeline2__panel:after{left:-14px;top:18px;border-right:10px solid rgba(255,255,255,0.02);border-top:8px solid transparent;border-bottom:8px solid transparent}

/* Keep small-screen collapse behavior */
@media (max-width:900px){
  .timeline2::before{left:12px;transform:none}
  .timeline2 .timeline2__item{width:100%;left:0;padding-left:40px;text-align:left}
  .timeline2 .timeline2__item.right{left:0}
  .timeline2 .marker-badge{left:12px;transform:none;display:none}
  .timeline2 .timeline2__panel:after{display:none}
  .timeline2 .timeline2__panel{max-width:100%;margin-left:0;margin-right:0}
}

/* New display style for the role: bold headline appearance (no pill)
   - removes pill background
   - uses gradient-filled text with a subtle stroke and an accent underline
   - responsive */
.display-role{background:none;padding:0;border-radius:0;box-shadow:none}
.display-role .role-text{display:inline-block;font-weight:900;font-size:1.28rem;letter-spacing:2px;text-transform:uppercase;
  background: linear-gradient(90deg,#7c5cff,#00d4ff);-webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-text-stroke: 0.4px rgba(0,0,0,0.18);}
.display-role::after{content:'';display:block;margin-top:10px;height:4px;width:72px;border-radius:6px;background:linear-gradient(90deg,#7c5cff,#00d4ff);opacity:0.95}

/* light-mode adjustments keep the gradient visible */
.theme-light .display-role .role-text, [data-theme="light"] .display-role .role-text{
  background: linear-gradient(90deg,#7c5cff,#ff6b6b); -webkit-background-clip:text; background-clip:text; color:transparent;
}

@media (max-width:700px){
  .display-role .role-text{font-size:1.02rem;letter-spacing:1.2px}
  .display-role::after{width:48px;height:3px;margin-top:8px}
}

/* Final overrides: ensure the display-role has no unwanted pill or box in light mode
   and that the gradient text remains visible. This block deliberately uses
   !important where needed to override earlier, duplicated `.hero-role` rules
   present in the stylesheet. */
.display-role{background:none !important;padding:0 !important;border-radius:0 !important;box-shadow:none !important}
.display-role .role-text{ -webkit-text-stroke:0.2px rgba(0,0,0,0.12); }

/* Remove the pseudo-element glow/pill added earlier for `.hero-role` in light mode */
.theme-light .hero-role::before, [data-theme="light"] .hero-role::before{ display:none !important }

/* Ensure the role text gradient is visible on light backgrounds */
.theme-light .display-role .role-text, [data-theme="light"] .display-role .role-text{
  background: linear-gradient(90deg,#7c5cff,#ff6b6b) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  color:transparent !important;
}

/* MathJax / formula responsive rules (global) ----------------------------
   Constrain wide MathJax SVG output and provide a horizontal scroll
   fallback on small screens so long formulas do not break the layout.
*/
.formula{overflow-x:hidden;overflow-y:hidden; -webkit-overflow-scrolling:touch}
.formula svg,
.formula .MathJax,
.mjx-chtml,
.mjx-svg,
.MathJax_SVG{ max-width:100%; height:auto !important; width:auto !important; display:block }
.formula .MathJax_Display,
.MathJax_Display svg,
.MathJax_Display .mjx-svg{ width:100% !important; max-width:100% !important; height:auto !important }
.formula span,
.formula .mjx-chtml{ word-break:break-word; overflow-wrap:anywhere }

@media (max-width:420px){
  .formula{padding-bottom:6px}
  .formula svg{height:auto;max-width:100%}
}