:root{
  --bg:#090b0e;--card:#11141a;--card-hover:#161a22;--text:#e2e8f0;--muted:#8892a4;--primary:#5b9cf5;--accent:#3dc9b0;--accent2:#6bb8e0;--border:#1e2533;--border-hover:#2a3348;--space-1:.5rem;--space-2:1rem;--space-3:1.5rem;--space-4:2rem;--radius:.625rem;--header-bg:rgba(9,11,14,.88);--pill-bg:rgba(30,37,51,.6);--pill-fg:#a0aab8;--pill-border:#1e2533;color-scheme:dark;
  --ease-smooth:cubic-bezier(0.4,0,0.2,1);
  --ease-out-expo:cubic-bezier(0.16,1,0.3,1);
  --ease-out-back:cubic-bezier(0.34,1.56,0.64,1);
  --ease-in-out-smooth:cubic-bezier(0.4,0,0.1,1);
  --ease-spring:cubic-bezier(0.175,0.885,0.32,1.275);
  --duration-fast:150ms;
  --duration-normal:300ms;
  --duration-slow:500ms;
  --duration-slower:700ms;
  --font-heading:'Newsreader',Georgia,'Times New Roman',serif;
  --font-body:'Outfit','Helvetica Neue',Arial,sans-serif;
  --font-mono:'JetBrains Mono','Fira Code',monospace
}
*{box-sizing:border-box}
html{height:100%;font-size:clamp(15px,1.2vw,18px);background-color:#090b0e}
body{min-height:100%;margin:0;background-color:#090b0e;color:var(--text);font:1rem/1.75 var(--font-body);display:grid;grid-template-rows:auto 1fr auto}
main{min-height:0}
@keyframes pageIn{from{opacity:0}to{opacity:1}}
html{scroll-behavior:smooth}
a{color:var(--primary);text-decoration:none;transition:color var(--duration-fast) var(--ease-smooth)}
a:hover{color:var(--accent)}
.container{max-width:72rem;margin:0 auto;padding:0 var(--space-3)}
.site-header{position:sticky;top:0;z-index:10;background:var(--header-bg);backdrop-filter:saturate(140%) blur(16px);border-bottom:1px solid var(--border);transition:transform var(--duration-normal) var(--ease-smooth)}
.site-header .container{display:flex;align-items:center;justify-content:space-between;min-height:3.75rem}
.brand{font-family:var(--font-heading);font-weight:600;font-size:1.35rem;letter-spacing:-.01em;color:#0099ff;background:linear-gradient(135deg,#00ffaa 0%,#0099ff 50%,#00ccee 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.nav{display:flex;gap:4px;align-items:center}
.nav a{padding:.5rem .75rem;color:var(--muted);position:relative;font-size:.9rem;font-weight:500;letter-spacing:.01em;border-radius:var(--radius);transition:color var(--duration-fast) var(--ease-smooth),background-color var(--duration-fast) var(--ease-smooth)}
.nav a::after{content:'';position:absolute;bottom:.25rem;left:50%;width:0;height:2px;background:var(--accent);border-radius:1px;transform:translateX(-50%);transition:width var(--duration-normal) var(--ease-out-expo)}
.nav a:hover{color:var(--text);background:rgba(255,255,255,.04)}
.nav a:hover::after,.nav a.active::after{width:calc(100% - 1.5rem)}
.nav a.active{color:var(--accent)}
.site-footer{border-top:1px solid var(--border);margin-top:4rem;padding:2rem 0;color:var(--muted);font-size:.9rem}
.site-footer .container{display:flex;flex-direction:column;align-items:center;gap:.5rem;text-align:center}
.hero{padding:5rem 0 3rem;max-width:48rem}
.hero h1{margin:0 0 .75rem;font-family:var(--font-heading);font-weight:600;font-size:clamp(2.5rem,5vw,3.75rem);letter-spacing:-.02em;line-height:1.15;animation:fadeUp var(--duration-slow) var(--ease-out-expo)}
.hero p{font-size:1.15rem;color:var(--muted);line-height:1.7;max-width:36rem;animation:fadeUp var(--duration-slow) var(--ease-out-expo) 100ms backwards}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
.list{display:flex;flex-direction:column;gap:1rem}
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:1.25rem;transition:transform var(--duration-normal) var(--ease-out-expo),box-shadow var(--duration-normal) var(--ease-smooth),background-color var(--duration-slow) var(--ease-smooth),border-color var(--duration-normal) var(--ease-smooth);will-change:transform}
.card:hover{transform:translateY(-3px);background:var(--card-hover);border-color:var(--border-hover);box-shadow:0 16px 40px rgba(0,0,0,.25),0 4px 12px rgba(0,0,0,.15)}
.card:active{transform:translateY(-1px);transition-duration:var(--duration-fast)}
.card h3{margin:0 0 .5rem;font-family:var(--font-heading);font-weight:600;font-size:1.1rem;letter-spacing:-.01em}
.card h3 a{color:var(--text)}
.card h3 a:hover{color:var(--primary)}
.muted{color:var(--muted)}
.pill{display:inline-block;padding:.15rem .6rem;border-radius:999px;background:var(--pill-bg);color:var(--pill-fg);font-size:.78rem;font-weight:500;letter-spacing:.02em;border:1px solid var(--pill-border);margin-right:.35rem;margin-bottom:.25rem;transition:background-color var(--duration-normal) var(--ease-smooth),border-color var(--duration-normal) var(--ease-smooth),transform var(--duration-fast) var(--ease-out-expo)}
.pill:hover{transform:translateY(-1px);border-color:var(--border-hover)}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.gallery img{width:100%;height:clamp(14rem,20vw,18rem);object-fit:cover;border-radius:var(--radius);border:1px solid var(--border);cursor:zoom-in;transition:transform var(--duration-normal) var(--ease-out-expo),box-shadow var(--duration-normal) var(--ease-smooth),border-color var(--duration-normal) var(--ease-smooth);will-change:transform}
.gallery img:hover{transform:scale(1.02);border-color:var(--border-hover);box-shadow:0 12px 32px rgba(0,0,0,.3)}
article{max-width:48rem}
article h1{margin:0 0 .75rem;font-family:var(--font-heading);font-weight:600;letter-spacing:-.01em}
article{animation:fadeUp var(--duration-slow) var(--ease-out-expo)}
.motto{font-family:var(--font-heading);font-style:italic;font-size:1rem;letter-spacing:.01em;line-height:1.6;max-width:28rem;color:#ffd700;background:linear-gradient(90deg,#b700ff 0%,#9d00ff 30%,#ffd700 70%,#ffed4e 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,0);display:none;align-items:center;justify-content:center;z-index:100;backdrop-filter:blur(0px);transition:background var(--duration-normal) var(--ease-smooth),backdrop-filter var(--duration-normal) var(--ease-smooth)}
.lightbox.open{display:flex;background:rgba(0,0,0,.88);backdrop-filter:blur(12px);animation:fadeIn var(--duration-normal) var(--ease-smooth)}
.lightbox img{max-width:90vw;max-height:85vh;border-radius:10px;box-shadow:0 24px 48px rgba(0,0,0,.4);transform:scale(.85) translateY(20px);opacity:0;transition:transform var(--duration-slow) var(--ease-out-expo),opacity var(--duration-normal) var(--ease-smooth);will-change:transform,opacity}
.lightbox.open img{transform:scale(1) translateY(0);opacity:1}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeScale{from{opacity:0;transform:scale(0.95)}to{opacity:1;transform:scale(1)}}
@keyframes slideInLeft{from{opacity:0;transform:translateX(-20px)}to{opacity:1;transform:translateX(0)}}
@keyframes slideInRight{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.6}}
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
.card-reveal{opacity:0;transform:translateY(20px);transition:opacity var(--duration-slow) var(--ease-out-expo),transform var(--duration-slow) var(--ease-out-expo)}
.card-reveal.revealed{opacity:1;transform:translateY(0)}
.card.active-scale{transform:scale(0.97);transition-duration:var(--duration-fast)}
@keyframes reveal{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
@keyframes floatUp{0%{opacity:1;transform:translate(-50%,-50%) translateY(0) rotateZ(0deg)}100%{opacity:0;transform:translate(-50%,-50%) translateY(-100px) rotateZ(20deg)}}
.click-emoji{position:fixed;font-size:2rem;pointer-events:none;user-select:none;animation:floatUp 1.5s ease-out forwards;z-index:9999}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important}
  .card-reveal{opacity:1;transform:none}
}
@media (prefers-color-scheme: light){:root{
  --bg:#f8f9fc;--card:#ffffff;--card-hover:#f0f2f7;--text:#111827;--muted:#5b6578;--primary:#2d6bc4;--accent:#1a9e82;--accent2:#3a8ab5;--border:#e2e6ee;--border-hover:#cdd3de;--header-bg:rgba(248,249,252,.88);--pill-bg:rgba(226,230,238,.5);--pill-fg:#4a5568;--pill-border:#e2e6ee;color-scheme:light}html{background-color:#f8f9fc}body{background-color:#f8f9fc}}
@media(max-width:900px){.grid{grid-template-columns:repeat(2,1fr)}.gallery{grid-template-columns:repeat(2,1fr)}.hero{padding:3rem 0 2rem}}
@media(max-width:600px){.grid{grid-template-columns:1fr}.gallery{grid-template-columns:1fr}.nav{flex-wrap:wrap;gap:2px}.card-reveal{animation-delay:0 !important}.research-item{animation-delay:0 !important}.project-line{animation-delay:0 !important}.site-header .container{flex-wrap:wrap;gap:.5rem}.hero h1{font-size:2rem}}
.research{display:flex;flex-direction:column;gap:var(--space-3)}
.research-item{padding:1.25rem;border:1px solid var(--border);border-radius:var(--radius);background:var(--card);transition:transform var(--duration-normal) var(--ease-out-expo),box-shadow var(--duration-normal) var(--ease-smooth),border-color var(--duration-normal) var(--ease-smooth)}
.research-item:hover{transform:translateX(4px);border-color:var(--border-hover);box-shadow:0 8px 24px rgba(0,0,0,.15)}
.research-item h3{margin:0 0 .5rem;font-family:var(--font-heading);font-weight:600;font-size:1.1rem;letter-spacing:-.01em}
.research-item .meta-line{display:flex;flex-wrap:wrap;gap:1rem;margin:.25rem 0;font-size:.9rem}
.research-item .label{color:var(--muted);margin-right:.35rem;font-weight:500}
.research-item .value{color:var(--accent2)}
.projects-lines{display:flex;flex-direction:column;gap:.5rem}
.project-line{padding:.6rem 1rem;border:1px dashed var(--border);border-radius:999px;font-size:.9rem;transition:background-color var(--duration-normal) var(--ease-smooth),border-color var(--duration-normal) var(--ease-smooth),transform var(--duration-normal) var(--ease-out-expo)}
.project-line:hover{background:var(--card);border-color:var(--accent);transform:translateX(4px)}
.project-line .name{font-weight:600}
.project-line .tech{color:var(--muted)}
.two-col{display:grid;grid-template-columns:10rem 1fr;gap:var(--space-4)}
.timeline{position:sticky;top:80px;align-self:start}
.timeline a{display:block;padding:.4rem .6rem;border-radius:var(--radius);color:var(--muted);border:1px solid var(--border);margin-bottom:.5rem;text-align:center;font-size:.85rem;font-weight:500;background:var(--card);transition:all var(--duration-normal) var(--ease-out-expo)}
.timeline a:hover{color:var(--text);border-color:var(--accent2);transform:translateX(3px)}
.timeline a.active{color:var(--text);border-color:var(--accent2);box-shadow:0 0 0 1px var(--accent2) inset,0 4px 12px rgba(0,0,0,.1)}
.year-heading{font-family:var(--font-heading);margin:1.5rem 0 .75rem;font-weight:600;font-size:1.3rem;letter-spacing:-.01em}
@media(max-width:900px){.two-col{grid-template-columns:1fr}.timeline{position:relative;display:flex;gap:.5rem;flex-wrap:wrap;top:auto;margin-bottom:1rem}.timeline a{flex:0 0 auto}}
.about-header{max-width:48rem;margin:2.5rem auto 1rem}
.about-name{font-family:var(--font-heading);font-weight:600;font-size:clamp(2rem,4vw,3rem);letter-spacing:-.02em;margin:0;line-height:1.2}
.about-contact{color:var(--muted);margin-top:.5rem;font-size:.95rem}
.about-social{margin-top:.75rem;display:flex;gap:.75rem}
.about-social a{color:var(--muted);display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:var(--radius);border:1px solid var(--border);background:var(--card);transition:color var(--duration-fast) var(--ease-smooth),background-color var(--duration-fast) var(--ease-smooth),border-color var(--duration-fast) var(--ease-smooth),transform var(--duration-fast) var(--ease-out-expo)}
.about-social a:hover{color:var(--text);background:var(--card-hover);border-color:var(--border-hover);transform:translateY(-2px)}
.cv-section{max-width:48rem;margin:1.5rem auto}
.cv-heading{font-family:var(--font-heading);font-variant-caps:small-caps;letter-spacing:.06em;margin:0 0 .75rem;font-weight:600;font-size:1.1rem;color:var(--muted)}
.cv-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:1.25rem 1.5rem;transition:transform var(--duration-normal) var(--ease-out-expo),box-shadow var(--duration-normal) var(--ease-smooth),border-color var(--duration-normal) var(--ease-smooth)}
.cv-card:hover{transform:translateY(-2px);border-color:var(--border-hover);box-shadow:0 8px 24px rgba(0,0,0,.15)}
.cv-title{font-family:var(--font-heading);font-weight:600;font-size:1.1rem;margin:0 0 .35rem;letter-spacing:-.01em}
.cv-meta{color:var(--muted);font-size:.9rem;line-height:1.6}
.github-repo{display:flex;flex-direction:column}
.github-repo h3 a{display:flex;align-items:center;gap:.5rem}
.github-repo h3 a::before{content:'';display:inline-block;width:16px;height:16px;background:url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 2.5A2.5 2.5 0 014.5 0h8.75a.75.75 0 01.75.75v12.5a.75.75 0 01-.75.75h-2.5a.75.75 0 110-1.5h1.75v-2h-8a1 1 0 00-.714 1.7.75.75 0 01-1.072 1.05A2.495 2.495 0 012 11.5v-9zm10.5-1V9h-8c-.356 0-.694.074-1 .208V2.5a1 1 0 011-1h8zM5 12.25v3.25a.25.25 0 00.4.2l1.45-1.087a.25.25 0 01.3 0L8.6 15.7a.25.25 0 00.4-.2v-3.25a.25.25 0 00-.25-.25h-3.5a.25.25 0 00-.25.25z' fill='%238b949e'/%3E%3C/svg%3E") center/contain no-repeat;opacity:.6}
.repo-desc{flex:1;margin:.5rem 0;color:var(--muted);font-size:.88rem;line-height:1.6}
.repo-meta{display:flex;align-items:center;gap:1rem;font-size:.82rem;color:var(--muted);margin-top:auto}
.repo-lang{display:flex;align-items:center;gap:.35rem}
.lang-dot{width:10px;height:10px;border-radius:50%;background:var(--accent)}
.lang-dot[data-lang="Python"]{background:#3572A5}
.lang-dot[data-lang="JavaScript"]{background:#f1e05a}
.lang-dot[data-lang="TypeScript"]{background:#2b7489}
.lang-dot[data-lang="HTML"]{background:#e34c26}
.lang-dot[data-lang="CSS"]{background:#563d7c}
.lang-dot[data-lang="Jupyter Notebook"]{background:#DA5B0B}
.lang-dot[data-lang="MATLAB"]{background:#e16737}
.lang-dot[data-lang="C++"]{background:#f34b7d}
.lang-dot[data-lang="C"]{background:#555555}
.lang-dot[data-lang="Java"]{background:#b07219}
.lang-dot[data-lang="Go"]{background:#00ADD8}
.lang-dot[data-lang="Rust"]{background:#dea584}
.lang-dot[data-lang="Shell"]{background:#89e051}
.repo-stat{display:flex;align-items:center;gap:.25rem}
.repo-stat svg{opacity:.6}
.repo-topics{margin-top:.5rem}
.loading{display:flex;align-items:center;justify-content:center;gap:.75rem;padding:2rem;color:var(--muted)}
.loading-spinner{width:20px;height:20px;border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
section h2{font-family:var(--font-heading);font-weight:600;font-size:1.4rem;letter-spacing:-.01em;margin:2rem 0 1rem}