:root{
  --bg:#f7f7f2; /* eggshell */
  --panel:#ffffff;
  --ink:#0b0e12;
  --muted:#6b7280;
  --accent:#0ea5e9; /* electric blue hint */
  --grid:rgba(12,14,18,0.07);
  --card:rgba(255,255,255,0.6);
  --shadow: 0 10px 30px rgba(0,0,0,.08);
}
:root.dark{
  --bg:#0b0e12;
  --panel:#0f141a;
  --ink:#e5e7eb;
  --muted:#94a3b8;
  --accent:#22d3ee;
  --grid:rgba(255,255,255,0.06);
  --card:rgba(15,20,26,0.7);
  --shadow: 0 10px 25px rgba(0,0,0,.45);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:"Exo 2", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:radial-gradient(circle at 20% -10%, var(--panel), transparent 25%),
             radial-gradient(circle at 120% 10%, var(--panel), transparent 30%),
             var(--bg);
  color:var(--ink);
  overflow-x:hidden;
}
/* subtle ctOS grid */
body::before{
  content:"";
  position:fixed; inset:0;
  background-image: linear-gradient(to right, var(--grid) 1px, transparent 1px),
                    linear-gradient(to bottom, var(--grid) 1px, transparent 1px);
  background-size:48px 48px;
  pointer-events:none;
  z-index:-1;
}
#net{position:fixed; inset:0; z-index:0; pointer-events:none}
.topbar{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem;
  padding:12px 20px;
  backdrop-filter: blur(6px);
  background:linear-gradient(180deg, rgba(255,255,255,.65), rgba(255,255,255,.35));
  border-bottom:1px solid var(--grid);
}
:root.dark .topbar{ background: linear-gradient(180deg, rgba(15,20,26,.65), rgba(15,20,26,.35)); }
.brand{font-weight:800; letter-spacing:.12em; text-decoration:none; color:var(--ink)}
.brand span{font-family:"JetBrains Mono", monospace}
.brand .muted{color:var(--muted)}
.menu{display:flex; flex-wrap:wrap; gap:.6rem; align-items:center}
.menu a{color:var(--ink); text-decoration:none; padding:.35rem .6rem; border:1px solid transparent; border-radius:10px}
.menu a:hover{border-color:var(--grid)}
.toggle{
  margin-left:.5rem; border:1px solid var(--grid); background:transparent; color:var(--ink);
  border-radius:999px; padding:.35rem .65rem; cursor:pointer;
 font-size:16px; line-height:1; width:40px; height:34px; display:flex; align-items:center; justify-content:center; }
.container{padding:40px 20px; max-width:1100px; margin:0 auto; position:relative; z-index:1}
.hero{display:grid; grid-template-columns: 1.2fr .8fr; gap:24px; align-items:start}
.hero h1{font-size: clamp(32px, 5vw, 64px); margin:0}
.accent{color:var(--accent)}
.kicker{color:var(--muted); margin:.3rem 0 1rem}
.grid-cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; margin-top:6px}
.card{
  display:block; padding:16px; border:1px dashed var(--grid);
  background:var(--card); border-radius:16px; text-decoration:none; color:inherit;
  box-shadow:var(--shadow);
}
.card h3{margin-top:0}
.card:hover{outline:2px solid var(--accent); outline-offset:2px}
.cta{display:flex; gap:10px; margin-top:18px}
.btn{display:inline-block; text-decoration:none; padding:10px 14px; border-radius:12px; border:1px solid var(--grid); color:inherit}
.btn.primary{background:var(--accent); color:#001018; border-color:transparent; font-weight:700}
.profile .profile-box{border:1px solid var(--grid); border-radius:16px; padding:16px; background:var(--card); box-shadow:var(--shadow)}
.meta{list-style:none; padding:0; margin:0}
.meta li{margin:.35rem 0}
.section-title{font-size:clamp(24px,3.2vw,40px); margin-top:4px}
.entry{border-left:3px solid var(--accent); padding:12px 16px; margin:18px 0; background:var(--card); border-radius:12px; box-shadow:var(--shadow)}
.entry header{display:flex; flex-direction:column; gap:4px}
.entry .place{color:var(--muted)}
.entry .dates{color:var(--muted); font-family:"JetBrains Mono", monospace}
.bullets{margin:.3rem 0 .6rem 1rem}
.timeline{list-style:none; padding:0}
.timeline li{padding:12px 14px; margin:10px 0; background:var(--card); border-radius:12px; border:1px dashed var(--grid)}
.timeline .when{display:inline-block; width:210px; font-family:"JetBrains Mono", monospace; color:var(--muted)}
.two-col{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.taglist{display:flex; flex-wrap:wrap; gap:10px; padding-left:0; list-style:none}
.taglist li{border:1px solid var(--grid); padding:6px 10px; border-radius:999px; background:var(--card)}
.contact{display:grid; gap:10px}
.contact input, .contact textarea{width:100%; padding:10px; border-radius:10px; border:1px solid var(--grid); background:var(--panel); color:var(--ink)}
.footer{padding:30px 20px; color:var(--muted); text-align:center; border-top:1px solid var(--grid)}
@media (max-width: 900px){
  .hero{grid-template-columns:1fr}
  .timeline .when{width:auto; display:block}
}


/* === Responsive enhancements (non-destructive) === */
:root{
  --container-pad: clamp(12px, 2vw, 28px);
  --radius-card: 22px;
}
*,*::before,*::after{ box-sizing: border-box; }
img, video, canvas, svg{ max-width:100%; height:auto; }

.container, .wrap, .page{
  padding-left: var(--container-pad);
  padding-right: var(--container-pad);
}
.grid, .grid-cards{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(12px, 2.5vw, 24px);
}

h1{ font-size: clamp(2rem, 4vw + 1rem, 4.5rem); line-height:1.05; }
h2{ font-size: clamp(1.6rem, 2.5vw + 1rem, 3rem); line-height:1.15; }
h3{ font-size: clamp(1.1rem, 1.2vw + .9rem, 1.6rem); }

.menu, nav.menu { position: sticky; top:0; z-index:50; }
.menu .links, nav.menu .links{ display:flex; flex-wrap:wrap; gap:.75rem; }
@media (max-width: 880px){
  .menu .links, nav.menu .links{
    flex-wrap: nowrap; overflow-x: auto; white-space: nowrap;
    -webkit-overflow-scrolling: touch; scrollbar-width: thin;
  }
}

.hero, .hero-wrap, .intro{
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: clamp(16px, 3vw, 40px);
  align-items: start;
}
@media (max-width: 1024px){
  .hero, .hero-wrap, .intro{ grid-template-columns: 1fr; }
  .hero aside, .profile, .contact-card{ order: 2; }
}

.card, .panel, .tile{
  border-radius: var(--radius-card);
  min-width: 0;
}

.timeline, .edu-list, .experience{ display: grid; gap: 18px; }
@media (min-width: 900px){
  .timeline.item, .exp-item{ grid-template-columns: 220px 1fr; display:grid; gap:18px; }
}
@media (max-width: 899px){
  .timeline.item, .exp-item, .edu-item{ grid-template-columns: 1fr; }
}

.table-wrap{ overflow-x: auto; -webkit-overflow-scrolling: touch; }

@media (max-width: 520px){ .btn{ width: 100%; } }

footer{ padding-bottom: clamp(24px, 6vw, 48px); }

#cursor-canvas, canvas.particles{
  width: 100% !important; height: 100% !important;
  max-width: 100vw; max-height: 100vh;
}

a{ word-break: break-word; overflow-wrap: anywhere; }



/* Cursor network canvas */
#cursor-net{
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
body{ position: relative; }



/* Cursor cluster canvas */
#cursor-net{ position:fixed; inset:0; z-index:0; pointer-events:none }
body{ position:relative }