:root{
  --bg:#0b0f19;
  --card:rgba(255,255,255,.035);
  --text:#e8eefc;
  --muted:#a8b3cf;
  --line:rgba(255,255,255,.12);
  --accent:#7aa2ff;
  --accent2:#67e8f9;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial}
body{
  color:var(--text);
  background:
    radial-gradient(900px 420px at 10% 0%, rgba(122,162,255,.18), transparent 55%),
    radial-gradient(900px 420px at 90% 10%, rgba(103,232,249,.12), transparent 55%),
    linear-gradient(180deg,#070a12,var(--bg));
}

a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

.container{max-width:1050px;margin:0 auto;padding:24px}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{font-weight:800;letter-spacing:.2px}
.links{display:flex;gap:14px;flex-wrap:wrap}
.links a{color:var(--text);opacity:.92}

.hero{padding:44px 0 18px}
.hero-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:16px;align-items:start}
.hero h1{font-size:40px;line-height:1.12;margin:0 0 12px}
.subtitle{color:var(--muted);font-size:18px;max-width:820px;margin:0 0 16px}
.quick{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.pill{
  border:1px solid var(--line);
  background:rgba(255,255,255,.03);
  padding:8px 12px;border-radius:999px;
  font-size:13px;color:var(--muted)
}
.pill a{color:var(--text);opacity:.92}

.buttons{display:flex;gap:10px;flex-wrap:wrap}
.btn{
  border:1px solid var(--line);
  background:rgba(255,255,255,.04);
  padding:10px 14px;border-radius:14px;
  color:var(--text);
}
.btn.primary{
  border-color:rgba(122,162,255,.45);
  background:rgba(122,162,255,.18);
}

.section{padding:26px 0;border-top:1px solid var(--line)}
.section h2{margin:0 0 14px;font-size:22px}

.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:18px;
  padding:14px;
}

.hero-card .mini-title{color:var(--muted);font-size:13px;margin-bottom:8px}
.bullets{margin:0;padding-left:18px}
.bullets li{margin:8px 0;color:var(--muted);line-height:1.5}
.bullets li::marker{color:rgba(122,162,255,.85)}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
h3{margin:0 0 10px;font-size:16px}

.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips span{
  font-size:12px;color:var(--muted);
  border:1px solid var(--line);
  background:rgba(255,255,255,.02);
  padding:5px 9px;border-radius:999px
}

.timeline{display:flex;flex-direction:column;gap:14px}
.item{display:grid;grid-template-columns:150px 1fr;gap:14px}
.when{color:var(--muted);font-size:14px;white-space:nowrap}
.role{font-weight:800}
.org{color:var(--muted);margin-top:2px;margin-bottom:10px}

.list{margin:0;padding-left:18px;color:var(--muted)}
.list li{margin:10px 0;line-height:1.5}
.muted{color:var(--muted)}

.pub-top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.pub-metrics{color:var(--muted);margin-top:4px}

.columns{
  margin:0; padding-left:18px;
  column-count:2; column-gap:26px;
  color:var(--muted);
}
.columns li{break-inside:avoid; margin:9px 0; line-height:1.45}

.footer{
  border-top:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:center;
  padding:18px 24px;
}

@media (max-width: 980px){
  .hero-grid{grid-template-columns:1fr}
  .grid2{grid-template-columns:1fr}
  .item{grid-template-columns:1fr}
  .hero h1{font-size:34px}
  .columns{column-count:1}
}


.section-top{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}

.grid3{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:14px;
}

.profile-wrap{
  display:flex;
  justify-content:center;
  align-items:flex-start;
}

.profile-photo{
  width:220px;
  height:220px;
  object-fit:cover;
  border-radius:22px; /* rounded-square */
  border:1px solid var(--line);
  background:rgba(255,255,255,.04);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}

.project-card h3{margin:0}
.project-card h3 a{color:var(--text); text-decoration:none}
.project-card h3 a:hover{text-decoration:underline}
.proj-meta{
  display:flex; gap:10px; flex-wrap:wrap;
  color:var(--muted); font-size:12px; margin-top:6px;
}
.proj-desc{
  margin:10px 0; color:var(--muted);
  font-size:14px; line-height:1.45;
}
.cardlinks{display:flex; gap:12px; margin-top:10px; font-size:14px;}

@media (max-width: 980px){
  .grid3{grid-template-columns:1fr}
}