:root{
  --bg:#0b0c10; --panel:#0e1118; --text:#f3f6ff; --muted:#c6cce1; --brand:#79a7ff; --brand-2:#7cf7d4; --border:#2a2e3d;
  --footer-offset: 88px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg); color:var(--text); font:16px/1.68 "Nunito Sans",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; padding-bottom:var(--footer-offset)}
.container{width:min(980px,92vw); margin:0 auto; padding:0 1rem}

.stars{position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden}
.star{position:absolute; color:#e8eeff; opacity:.45; text-shadow:0 0 3px rgba(232,238,255,.35), 0 0 8px rgba(127,197,255,.18)}
@keyframes twinkle{ 0%,100%{opacity:.15} 50%{opacity:.55} }

/* Ensure stars always animate via classes (avoid inline animation) */
.star{
  animation-name: twinkle;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  will-change: opacity;
}
.star.d3{ animation-duration:3s }
.star.d4{ animation-duration:4s }
.star.d5{ animation-duration:5s }
.star.d6{ animation-duration:6s }
.star.d7{ animation-duration:7s }
.star.delay0{ animation-delay:0s }
.star.delay1{ animation-delay:1s }
.star.delay2{ animation-delay:2s }
.star.delay3{ animation-delay:3s }

.site-header{position:sticky;top:0;background:rgba(11,12,16,.8); backdrop-filter:saturate(160%) blur(6px); border-bottom:1px solid var(--border); z-index:10}
.site-header .container{display:flex;align-items:center;justify-content:space-between; position:relative}
.site-title{font-size:1.1rem;font-weight:700;letter-spacing:.3px}
h1,h2,h3,h4,h5,h6,.site-title{font-family:"Outfit",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
.site-nav a{color:#e8ecff;text-decoration:none;margin-left:1rem;font-weight:700;letter-spacing:.2px;transition:color .2s ease, border-color .2s ease; border-bottom:2px solid transparent; padding-bottom:8px}
.site-nav a:hover{color:#ffffff; border-bottom-color: var(--brand-2)}
.site-nav a.active{color:#ffffff; border-bottom-color: var(--brand)}

/* Mobile-only Resume link in header */
.mobile-resume{ display:none }

.hero{position:relative; z-index:1; padding:64px 0 24px; border-bottom:1px solid var(--border); background:linear-gradient(180deg, rgba(79,140,255,.12), rgba(124,247,212,.05) 40%, transparent)}
.hero-container{display:grid; grid-template-columns:1.2fr .8fr; gap:24px; align-items:center}
.hero h1{font-size:2.2rem; margin:0 0 .5rem}
.hero p{font-size:1.12rem; color:var(--text)}
.hero-image{width:240px; height:240px; border-radius:24px; object-fit:cover; display:block; background:#141a24; border:1px solid var(--border); box-shadow:0 8px 30px rgba(0,0,0,.35)}

.section{padding:56px 0;border-top:1px solid var(--border); scroll-margin-top:72px}
.section .container{background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:24px; box-shadow:0 10px 32px rgba(0,0,0,.45)}
.section .container h2{color:#ffffff}
.section .container p{color:var(--text)}
.section .container a{color:var(--brand); text-underline-offset:2px}
.section h2{margin:0 0 16px;font-size:1.6rem}
.item{padding:14px 0}
.meta{color:var(--muted);font-size:.95rem;margin:.2rem 0 .5rem}

.tags{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:.6rem}
.tags li{position:relative; display:inline-flex; align-items:center; justify-content:center; text-align:center; background:linear-gradient(135deg,#151a24,#0f141e); border:1px solid var(--border); padding:.45rem .85rem; border-radius:999px; color:#e8ecff; font-weight:600; box-shadow:inset 0 0 0 1px rgba(255,255,255,.035), 0 2px 10px rgba(0,0,0,.2)}
.tags li::before{content:none}
.tags li:hover{border-color: var(--brand); box-shadow:inset 0 0 0 1px rgba(121,167,255,.25), 0 4px 16px rgba(121,167,255,.12)}

.pubs{list-style:disc; padding-left:1.2rem}
.pubs li{margin:.4rem 0}

.cta-row{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:1rem}
.button{background:var(--brand); color:#06121b; font-weight:700; padding:.6rem .9rem; border-radius:10px; text-decoration:none; box-shadow:0 0 0 1px #3a6ae0 inset}
.button:hover{filter:brightness(1.03)}
.button-secondary{background:#141a24;color:var(--text);box-shadow:0 0 0 1px var(--border) inset}

.site-footer{position:fixed; left:0; right:0; bottom:0; border-top:1px solid var(--border); padding:14px 0; color:var(--muted); background:rgba(11,12,16,.8); backdrop-filter:saturate(160%) blur(6px); z-index:9}
.site-footer .container{display:flex;flex-direction:column;align-items:center;text-align:center}
.site-footer .footer-links{margin-top:.4rem;display:flex;gap:.9rem;flex-wrap:wrap;justify-content:center}
.site-footer .footer-links a{color:var(--muted); text-decoration:none; display:inline-flex; align-items:center; gap:.4rem; font-weight:600}
.site-footer .footer-links a:hover{color:var(--text)}
.site-footer .footer-links .icon{width:16px;height:16px;display:inline-block;opacity:.9}

/* Hamburger toggle (hidden on desktop) */
.nav-toggle{ display:none; background:none; border:0; padding:8px; margin-left:auto; cursor:pointer }
.nav-toggle span{ display:block; width:22px; height:2px; background:#e8ecff; margin:5px 0; transition:transform .2s ease, opacity .2s ease }
.site-header.nav-open .nav-toggle span:nth-child(1){ transform:translateY(7px) rotate(45deg) }
.site-header.nav-open .nav-toggle span:nth-child(2){ opacity:0 }
.site-header.nav-open .nav-toggle span:nth-child(3){ transform:translateY(-7px) rotate(-45deg) }

@media (max-width:720px){
  .nav-toggle{ display:inline-block }
  .site-nav{display:none; position:absolute; top:100%; right:1rem; left:1rem; background:rgba(11,12,16,.95); border:1px solid var(--border); border-radius:10px; padding:10px; box-shadow:0 10px 30px rgba(0,0,0,.45); flex-direction:column}
  .site-header.nav-open .site-nav{ display:flex }
  .site-nav a{ display:block; margin:6px 8px; margin-left:0; padding:6px 0 2px; }
  .section{padding:40px 0}
  .mobile-resume{ display:inline-block; margin-left:auto; color:#e8ecff; text-decoration:none; font-weight:700; letter-spacing:.2px; border-bottom:2px solid transparent; padding-bottom:8px }
  .mobile-resume:hover{ color:#ffffff; border-bottom-color: var(--brand-2) }
  .section .container{padding:18px}
  .hero{padding:40px 0 16px}
  .hero-container{grid-template-columns:1fr; text-align:center; gap:16px}
  .hero .column-right{order:-1; display:flex; justify-content:center}
  .hero-image{width:180px; height:180px; margin:0 auto 8px}
  .hero h1{font-size:1.8rem}
}

/* Small avatar (about page) */
.avatar-sm{width:120px; height:120px; border-radius:50%; object-fit:cover; display:block; background:#141a24; border:1px solid var(--border); box-shadow:0 4px 18px rgba(0,0,0,.3)}