:root {
  --bg:#0b0c0e; --fg:#e8e8ea; --muted:#a0a3a9; --card:#111317; --ring:#23272f; --accent:#7aa2ff; --chip:#141a22;
  --shadow: 0 10px 30px rgba(0,0,0,.25);
}

@media (prefers-color-scheme: light) {
  :root { --bg:#f6f7fb; --fg:#0b0c0f; --muted:#5b6472; --card:#ffffff; --ring:#e5e7eb; --accent:#2563eb; --chip:#eef2ff; }
}

* { box-sizing: border-box; }
html, body { height: 100%; scroll-behavior: smooth; }

body {
  margin: 0; 
  background: radial-gradient(1200px 600px at 20% -10%, rgba(127,170,255,.18), transparent 60%), radial-gradient(1200px 700px at 120% 10%, rgba(127,170,255,.12), transparent 60%), url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><circle cx='5' cy='5' r='1' fill='white'/><circle cx='150' cy='30' r='1' fill='white'/><circle cx='80' cy='150' r='1' fill='white'/><circle cx='180' cy='100' r='1' fill='white'/><circle cx='50' cy='80' r='1' fill='white'/></svg>") repeat, var(--bg);
  color: var(--fg); 
  font: 16px/1.6 ui-sans-serif, system-ui, -apple-system;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 980px; margin: auto; padding: 28px; }
.card { background: linear-gradient(180deg, color-mix(in oklab, var(--card), transparent 5%), var(--card)); border: 1px solid var(--ring); border-radius: 18px; box-shadow: var(--shadow); overflow: hidden; }
header { padding: 28px 24px 16px; display: grid; gap: 14px; }
.top { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.avatar { width: 88px; height: 88px; border-radius: 50%; overflow: hidden; border: 1px solid var(--ring); }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
h1 { font-size: clamp(26px, 4.2vw, 40px); margin: 0; }
.meta { color: var(--muted); margin-top: -6px; }
.actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }

.btn { 
  display: inline-flex; 
  align-items: center; 
  gap: 8px; 
  padding: 10px 14px; 
  border-radius: 12px; 
  border: 1px solid var(--ring); 
  background: var(--chip); 
  text-decoration: none; 
  color: var(--fg); 
  font-weight: 600; 
  transition: all .2s ease; 
}

.btn:hover { border-color: var(--accent); background: rgba(122, 162, 255, 0.1); }
.btn.primary { background: var(--accent); color: white; border-color: var(--accent); }

section { padding: 18px 24px; border-top: 1px solid var(--ring); }
section h2 { margin: 0 0 12px 0; font-size: 18px; letter-spacing: .2px; color: var(--accent); }

/* Unified item styling for both Experience and Projects */
.item { padding: 20px; border: 1px solid var(--ring); border-radius: 12px; background: rgba(255,255,255,0.02); margin-bottom: 20px; }
.item:last-child { margin-bottom: 0; }

.project-content { flex: 1; }
.small-margin { margin-bottom: 10px; font-size: 0.85rem; }

.row { display: flex; gap: 10px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; }
.where { font-weight: 700; }
.muted { color: var(--muted); }
ul.clean { list-style: none; margin: 8px 0 0 0; padding: 0; }
ul.clean li { margin: 6px 0; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { padding: 6px 10px; background: var(--chip); border: 1px solid var(--ring); border-radius: 999px; font-size: 13px; }
.cols { columns: 2; column-gap: 18px; }

footer { padding: 22px; text-align: center; color: var(--muted); }
a { color: var(--accent); text-decoration: none; }

@media print {
  body { background: white; }
  .wrap { padding: 0; }
  .card { box-shadow: none; border: 0; }
  .btn { display: none; }
}