:root{
  --bg:#0b0f0d; --bg2:#0d1512; --text:#e8ecea; --muted:#a2afaa;
  --card:rgba(18,32,28,0.9); --border:#213a33; --accent:#0ea27f; --accent2:#0E5484;
  --shadow:0 16px 46px rgba(0,0,0,.45);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  color:var(--text);
  background:
    radial-gradient(1200px 700px at 10% -10%, rgba(14,84,132,.24) 0%, transparent 55%),
    radial-gradient(900px 520px at 95% -20%, rgba(24,162,123,.22) 0%, transparent 60%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg2) 100%);
  background-attachment: fixed,fixed,fixed; line-height:1.6;
}
body::after{content:""; position:fixed; inset:0;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2" stitchTiles="stitch"/></filter><rect width="120" height="120" filter="url(%23n)" opacity="0.02"/></svg>');
  pointer-events:none; z-index:0;
}
a{color:var(--accent2); text-decoration:none} a:hover{text-decoration:underline}
.container{width:min(1080px,calc(100% - 2rem)); margin:0 auto}
.progress{position:fixed;top:0;left:0;height:3px;background:linear-gradient(90deg,var(--accent2),var(--accent));width:0;z-index:50}

.site-header{position:sticky; top:0; z-index:40; backdrop-filter: blur(10px);
  background: rgba(8,12,11,.6); border-bottom:1px solid var(--border)}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:.7rem 0}
.brand{font-weight:800;color:var(--text);text-transform:lowercase;letter-spacing:.3px}
.brand .mono{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New"; color:#8cdcc5}
.nav a{margin-left:1rem;color:var(--muted);position:relative;white-space:nowrap}
.nav a.active{color:#fff}
.nav a.active::after{content:"";position:absolute;left:0;bottom:-10px;height:2px;width:100%;background:linear-gradient(90deg,var(--accent),var(--accent2));border-radius:2px}
#themeToggle{margin-left:1rem;background:transparent;border:1px solid var(--border);color:var(--muted);border-radius:8px;padding:.25rem .5rem;cursor:pointer}

.hero{position:relative; padding:3.4rem 0 2rem; overflow:hidden}
.bg-gradient{position:absolute; inset:0; background:
  radial-gradient(800px 280px at 15% 5%, rgba(14,84,132,.22), transparent 60%),
  radial-gradient(700px 260px at 90% 8%, rgba(24,162,123,.22), transparent 65%);
  filter: blur(12px); opacity:.7; z-index:0}
.hero-inner{position:relative;z-index:1; display:grid;grid-template-columns:1.25fr .75fr; gap:2rem;align-items:center}
.hero-text h1{margin:0 0 .4rem;font-size:clamp(1.7rem,3.2vw,2.6rem);color:#f7fcf9}
.lead{max-width:780px;color:var(--muted)}
.cta{margin-top:1rem;display:flex;gap:.6rem;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.58rem .85rem;border-radius:12px;background:linear-gradient(135deg,#0F4539,#0a6f59);color:white;border:none;box-shadow:var(--shadow)}
.btn svg{width:18px;height:18px}
.btn.ghost{background:transparent;border:1px solid var(--border);color:var(--text);box-shadow:none}
.stats{margin:1rem 0 0;padding:0;list-style:none;display:flex;gap:.45rem;flex-wrap:wrap;color:var(--muted)}
.chip{display:inline-flex;align-items:center;gap:.35rem;padding:.2rem .52rem;border:1px solid var(--border);border-radius:999px;color:var(--muted);font-size:.95rem;white-space:nowrap}
.chip svg{width:14px !important;height:14px !important;flex:0 0 14px !important;display:inline-block !important;vertical-align:-2px !important}

.portrait{display:grid;place-items:center;width:228px;height:228px;justify-self:end;border-radius:50%;position:relative;isolation:isolate}
.portrait::before{content:"";position:absolute;inset:-10px;border-radius:50%;background: conic-gradient(from 220deg at 50% 50%, #0F4539, #0E5484, #0F4539);filter: blur(12px); opacity:.55; z-index:-1}
.portrait img{display:block;width:100%;height:100%;object-fit:cover;border-radius:50%;border:2px solid rgba(255,255,255,.08);box-shadow:var(--shadow);background:#10201a}

.section{padding:2.1rem 0}
.section.alt{background: linear-gradient(180deg, rgba(22,53,45,.20), rgba(22,53,45,.05))}
.section-head{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.section h2{margin:0;font-size:1.22rem;color:#d6e4df}

.card{background:linear-gradient(180deg, rgba(22,53,45,.22), rgba(22,53,45,.08)); border:1px solid var(--border);border-radius:14px;padding:1.0rem 1.05rem;box-shadow:var(--shadow);margin:1rem 0; opacity:0; transform:translateY(10px); transition: all .45s ease}
.card.revealed{opacity:1; transform:none}
.pub h3{margin:0 0 .3rem;font-size:1.02rem;color:#f1f5f3}
.pub .authors,.pub .venue,.pub .links{margin:.25rem 0}
.pub .authors{color:var(--muted)} .pub .venue{color:#a9d2c6}

.grid{display:grid;gap:.9rem}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}

.timeline{position:relative;margin-left:.2rem}
.timeline::before{content:"";position:absolute;left:7px;top:0;bottom:0;width:2px;background:var(--border)}
.titem{position:relative;padding-left:1.8rem;margin:1.0rem 0}
.titem::before{content:"";position:absolute;left:1px;top:.35rem;width:10px;height:10px;background:var(--accent);border-radius:50%;box-shadow:0 0 0 3px rgba(24,162,123,.22)}
.thead{display:flex;align-items:baseline;justify-content:space-between;gap:.6rem;flex-wrap:wrap}
.titem h3{margin:0;color:#f1f5f3}
.titem .role{margin:.1rem 0;color:var(--muted)}
.titem ul{margin:.4rem 0 0 0;padding-left:1rem}
.titem li{margin:.22rem 0;color:var(--muted)}

.link-group{display:flex;flex-wrap:wrap;gap:.4rem .5rem}

.to-top{position:fixed;right:18px;bottom:18px;background:linear-gradient(135deg,#0F4539,#0a6f59);color:#fff;border:none;border-radius:11px;padding:.55rem .65rem;box-shadow:var(--shadow);cursor:pointer;display:flex;align-items:center;justify-content:center; opacity:0; pointer-events:none; transition:opacity .25s ease}
.to-top.show{opacity:1; pointer-events:auto}
.to-top svg{width:18px;height:18px}

:root.light{
  --bg:#fbfcfb; --bg2:#edf4f1; --text:#0f1916; --muted:#51665e;
  --card:#ffffff; --border:#cfded8; --accent:#0f7a60; --accent2:#0E5484; --shadow:0 12px 30px rgba(0,0,0,.08);
}
:root.light body{background:
  radial-gradient(1200px 700px at 12% -10%, rgba(14,84,132,.09) 0%, transparent 55%),
  radial-gradient(900px 520px at 90% -20%, rgba(24,162,123,.10) 0%, transparent 60%),
  linear-gradient(180deg, var(--bg) 0%, var(--bg2) 100%);}
:root.light .nav a.active{color:var(--text)}

/* Responsive tweaks */
@media(max-width:1024px){ .hero-inner{grid-template-columns:1fr; gap:1.2rem} .portrait{justify-self:start} }
@media(max-width:820px){ .stats{gap:.35rem} .chip{font-size:.92rem} .section{padding:1.8rem 0} }
@media(max-width:640px){ .hero-text h1{font-size:1.55rem} .portrait{width:200px;height:200px} .nav a{margin-left:.75rem} }