:root{
      --bg:#0b0b10;--ink:#e9eef3;--muted:#adb7c0;--accent:#60f;--accent2:#26ffe6;
      --card:#131520;--line:#23263a;--radius:16px;--shadow:0 10px 30px rgba(0,0,0,.35);
      --w:1100px;
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0; font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
      color:var(--ink); background:radial-gradient(1000px 600px at 80% -200px,rgba(38,255,230,.08),transparent),
                         radial-gradient(900px 500px at 0% -150px,rgba(96,0,255,.08),transparent),
                         var(--bg);
    }
    a{color:var(--accent2); text-decoration:none}
    a:hover{text-decoration:underline}
    .wrap{max-width:var(--w); margin:0 auto; padding:24px}
    header.site{
      position:sticky; top:0; z-index:5; backdrop-filter:saturate(120%) blur(10px);
      background:linear-gradient(120deg, rgba(96,0,255,.10), rgba(38,255,230,.05));
      border-bottom:1px solid var(--line);
    }
    .brand{display:flex; align-items:center; gap:.75rem; font-weight:700; letter-spacing:.2px}
    .brand .dot{width:10px;height:10px;border-radius:50%;background:var(--accent2); box-shadow:0 0 12px var(--accent2)}
    .grid{display:grid; gap:18px}
    @media(min-width:900px){ .grid-2{grid-template-columns:1.2fr .8fr} }
    .card{
      background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
      border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:22px;
    }
    h1{font-size:2.2rem; line-height:1.2; margin:0 0 8px}
    h2{font-size:1.4rem; margin:0 0 8px}
    .muted{color:var(--muted)}
    .pill{display:inline-flex; gap:.5rem; align-items:center; padding:.35rem .7rem;
      border:1px solid var(--line); border-radius:999px; background:rgba(255,255,255,.04); font-size:.9rem}
    .list{margin:0; padding:0; list-style:none}
    .list li{padding:10px 0; border-top:1px solid var(--line)}
    .list li:first-child{border-top:0}
    .row{display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap}
    .when{color:var(--muted); font-size:.95rem}
    .skills{display:flex; flex-wrap:wrap; gap:.5rem}
    .tag{border:1px solid var(--line); background:#0f1220; padding:.35rem .6rem; border-radius:8px; color:#cfe3ff; font-size:.9rem}
    .cta{display:inline-flex; align-items:center; gap:.6rem; padding:.7rem 1rem; border-radius:10px; font-weight:600;
         background:linear-gradient(135deg, var(--accent), #7a5cff); color:#fff; border:0}
    .cta:hover{filter:brightness(1.05); text-decoration:none}
    footer{border-top:1px solid var(--line); color:var(--muted); font-size:.95rem}
    .visually-hidden{position:absolute!important; height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}