:root{
  --bg:#0b0f12; --panel:#141a20; --ink:#d6e1ea; --muted:#9ab;
  --border:#2b3947; --accent:#58ffb2; --accent-ink:#0b1111;
  --radius:16px; --pad:20px; --base:18px; --lead:1.8;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size:var(--base); line-height:var(--lead);
}

/* Layout */
.header{
  position:sticky; top:0; z-index:10;
  backdrop-filter: blur(6px);
  background:rgba(11,15,18,.7);
  border-bottom:1px solid var(--border);
}
.nav{
  max-width:1100px; margin:auto; padding:10px 16px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.brand{
  font-weight:900; letter-spacing:.5px; text-decoration:none; color:var(--ink);
  display:inline-flex; align-items:center; gap:8px;
}
.brand:hover{outline:2px solid var(--accent); border-radius:10px; padding:2px 6px}
.pixel{font-family:'Press Start 2P', monospace; letter-spacing:1px}
.nav a{color:var(--ink); text-decoration:none}
.nav .links{display:flex; gap:16px; align-items:center}
.nav .links a{
  padding:8px 12px; border:1px solid var(--border); border-radius:999px;
}
.nav .links a:hover{outline:2px solid var(--accent)}

.container{max-width:1100px; margin:auto; padding:24px 16px}
.grid{display:grid; gap:24px}
.cards{display:grid; gap:24px}
@media (min-width: 900px){
  .grid.two{grid-template-columns:1fr 1fr}
  .cards.two{grid-template-columns:1fr 1fr; column-gap:24px}
}

/* Panels */
.panel{
  background:var(--panel); border:2px solid var(--border); border-radius:var(--radius);
  padding:var(--pad);
}
.h1{font-size:40px; font-weight:900; margin:.1em 0}
.h2{font-size:22px; margin:.2em 0 12px 0}
.muted{color:var(--muted)}
.badges{display:flex; flex-wrap:wrap; gap:12px}
.badge{border:1px solid var(--border); border-radius:999px; padding:6px 12px}

/* JRPG-ish flavor */
.section-title{font-family:'Press Start 2P', monospace; color:var(--accent); font-size:20px; margin-bottom:10px}
.menu{
  display:flex; gap:14px; flex-wrap:wrap; margin:14px 0 4px 0
}
.menu a{
  text-decoration:none; color:var(--ink);
  background:#0f1419; border:2px solid var(--border); border-radius:10px;
  padding:10px 12px; font-weight:800; display:inline-flex; gap:8px; align-items:center;
}
.menu a .caret{transform:translateX(0); transition:transform .18s ease}
.menu a:hover .caret{transform:translateX(4px)}
.menu a.active{outline:2px solid var(--accent)}

/* Cards */
.card{background:#0f1419; border:1.5px solid var(--border); border-radius:12px; padding:16px}
.card h3{margin:0 0 6px 0; font-weight:900}
.meta{color:var(--muted); font-size:.95rem; margin-bottom:8px}
.stack{display:flex; flex-wrap:wrap; gap:10px}
.tag{border:1px solid var(--border); padding:4px 10px; border-radius:999px; font-size:.9rem}

/* Animations */
.reveal{opacity:0; transform:translateY(10px); transition:opacity .5s ease, transform .5s ease}
.reveal.in{opacity:1; transform:translateY(0)}
.fade{animation:fade .5s ease both}
@keyframes fade{from{opacity:0} to{opacity:1}}

/* Buttons */
.cta{
  display:inline-block; text-decoration:none; background:var(--accent); color:var(--accent-ink);
  padding:12px 16px; border-radius:12px; font-weight:900; margin-right:12px
}

/* Interests shelf */
.shelf { display:grid; gap:18px; }
@media (min-width: 900px){
  .shelf { grid-template-columns: 1fr 1fr; }
}
.shelf .card h3 { margin-bottom:10px; }
.chips { display:flex; flex-wrap:wrap; gap:12px; }
.chip  { border:1px solid var(--border); border-radius:999px; padding:6px 12px; }