:root{
  --bg: 240 10% 6%;
  --fg: 0 0% 98%;
  --muted: 240 3.7% 15.9%;
  --accent: 262 83% 60%;
  --card: 0 0% 100% / 0.06;
  --glass-border: 255 255 255 / 0.18;
  --radius: 18px;
  --shadow: 0 30px 60px rgba(0,0,0,.35);
}
[data-theme="light"]{
  --bg: 210 20% 98%;
  --fg: 222 47% 11%;
  --muted: 214 32% 91%;
  --accent: 262 83% 58%;
  --card: 255 255 255 / 0.7;
  --glass-border: 255 255 255 / 0.7;
  --shadow: 0 20px 40px rgba(0,0,0,.12);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, "Helvetica Neue", Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:hsl(var(--fg));
  background:
    radial-gradient(1200px 800px at 20% -10%, rgba(124,58,237,.18), transparent 60%),
    radial-gradient(900px 700px at 120% 10%, rgba(56,189,248,.18), transparent 60%),
    hsl(var(--bg));
  line-height:1.6;
}
.container{width:min(1100px,92vw); margin:0 auto;}
header{
  position:sticky; top:0; z-index:50;
  backdrop-filter: saturate(160%) blur(16px);
  background: linear-gradient(180deg, rgba(0,0,0,.25), transparent);
  border-bottom:1px solid rgba(255,255,255,.08);
}
nav{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 0;}
.brand{font-weight:700; letter-spacing:.3px;}
.nav a{color:inherit; text-decoration:none; opacity:.86; padding:8px 10px; border-radius:10px;}
.nav a.active{background: rgba(255,255,255,.12);}
.nav a:hover{background: rgba(255,255,255,.08); opacity:1;}
.btn{display:inline-flex; align-items:center; gap:10px; padding:10px 14px; border-radius:12px; text-decoration:none; color:inherit; border:1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); box-shadow: var(--shadow);}
.btn:hover{transform: translateY(-1px);}
.grid{display:grid; gap:18px;}
.hero{padding:46px 0 26px;}
.headline{font-size: clamp(28px, 3.2vw, 40px); line-height:1.15; margin: 12px 0;}
.sub{opacity:.85; max-width:70ch;}
section{padding:28px 0;}
.kicker{font-size:13px; letter-spacing:.15em; text-transform:uppercase; opacity:.7;}
.card{background: rgba(var(--card)); border: 1px solid rgba(var(--glass-border)); border-radius: var(--radius); padding:18px; backdrop-filter: blur(14px) saturate(140%); box-shadow: var(--shadow);}
.chips{display:flex; flex-wrap:wrap; gap:8px;}
.chip{padding:6px 10px; border-radius:999px; font-size:12px; border:1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06);}
.skills{grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));}
.skill h3{margin:0 0 8px; font-size:16px;}
.skill ul{margin:0; padding:0 0 0 18px;}
.projects{grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));}
.project h3{margin:0 0 8px; font-size:18px;}
.project p{margin:0 0 12px;}
.tags{display:flex; flex-wrap:wrap; gap:6px;}
.tag{font-size:12px; padding:4px 8px; border-radius:999px; background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18);}
.timeline{position:relative; margin-left:6px; padding-left:16px;}
.timeline::before{content:""; position:absolute; left:0; top:0; bottom:0; width:2px; background: linear-gradient(180deg, rgba(255,255,255,.2), transparent);}
.tl-item{margin:0 0 18px;}
.tl-item h4{margin:0; font-size:16px;}
.tl-item .when{font-size:12px; opacity:.7; margin-bottom:6px;}
footer{padding:40px 0 56px; opacity:.8;}
.row{display:grid; grid-template-columns:1fr auto; gap:12px; align-items:center;}
.search{display:flex; gap:10px; flex-wrap:wrap;}
input[type="search"]{flex:1 1 260px; padding:10px 12px; border-radius:12px; border:1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); color:inherit;}
@media (max-width: 680px){
  .row{grid-template-columns:1fr;}
  nav{flex-wrap:wrap;}
}