:root{
    --bg:#0B1119;
    --panel:#141D28;
    --panel-2:#1A2531;
    --border:#263140;
    --text:#E8ECF1;
    --text-dim:#8C9BAD;
    --text-faint:#57687B;
    --amber:#F0A93C;
    --teal:#3FCCB0;
    --red:#E5606A;
    --mono:'IBM Plex Mono', monospace;
    --sans:'IBM Plex Sans', sans-serif;
  }
  :root[data-theme="light"]{
    --bg:#F5F8FA;
    --panel:#FFFFFF;
    --panel-2:#EEF3F6;
    --border:#CFDAE2;
    --text:#14202B;
    --text-dim:#526779;
    --text-faint:#728595;
    --amber:#C57A09;
    --teal:#087F71;
    --red:#C5424B;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth; scroll-padding-top:84px;}
  body{background:var(--bg); color:var(--text); font-family:var(--sans); line-height:1.6; -webkit-font-smoothing:antialiased;}
  a{color:inherit; text-decoration:none;}
  .wrap{max-width:1080px; margin:0 auto; padding:0 32px;}
  ::selection{background:var(--amber); color:#12161C;}
  :focus-visible{outline:2px solid var(--teal); outline-offset:3px;}

  header{position:sticky; top:12px; z-index:50; background:transparent;}
  :root[data-theme="light"] header{background:transparent;}
  .scroll-progress{display:none;}
  nav{display:flex; align-items:center; justify-content:space-between; padding:10px 18px; max-width:1040px; margin:0 auto; background:rgba(20,29,40,0.9); backdrop-filter:blur(18px); border:1px solid rgba(140,155,173,0.24); border-radius:22px; box-shadow:0 14px 32px -22px rgba(0,0,0,0.85);}
  :root[data-theme="light"] nav{background:rgba(255,255,255,0.88); border-color:rgba(20,32,43,0.13); box-shadow:0 14px 32px -22px rgba(25,42,58,0.32);}
  .brand{font-family:var(--mono); font-weight:600; font-size:14px; display:flex; align-items:center; gap:10px; letter-spacing:-0.03em;}
  .brand b{color:var(--amber);}
  .brand-photo{width:38px; height:38px; object-fit:cover; border-radius:50%; border:1px solid rgba(63,204,176,0.7); box-shadow:0 0 0 3px rgba(63,204,176,0.1);}
  .navlinks{display:flex; gap:26px; font-family:var(--mono); font-size:12.5px; color:var(--text-dim);}
  .navlinks a:hover{color:var(--amber);}
  .theme-toggle{width:36px; height:36px; display:grid; place-items:center; margin-left:20px; color:var(--amber); background:transparent; border:1px solid var(--border); border-radius:50%; cursor:pointer; font-size:18px; line-height:1; transition:transform .2s ease,background .2s ease,border-color .2s ease;}
  .theme-toggle:hover{transform:rotate(18deg) scale(1.08); border-color:var(--amber);}
  @media (max-width:720px){ .navlinks{display:none;} .theme-toggle{margin-left:auto;} }

  .hero{position:relative; padding:56px 0 70px; overflow:hidden;}
  .hero::before{content:""; position:absolute; width:520px; height:520px; top:-230px; right:-190px; border-radius:50%; background:radial-gradient(circle,rgba(63,204,176,0.12),transparent 67%); pointer-events:none; animation:drift 8s ease-in-out infinite alternate;}
  @keyframes drift{to{transform:translate(-45px,55px) scale(1.13);}}
  .hero-intro{display:grid; grid-template-columns:minmax(0,1fr) 350px; gap:42px; align-items:center; position:relative; z-index:1;}
  .eyebrow{display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:12px; color:var(--teal); margin-bottom:20px;}
  .eyebrow .dot{width:7px; height:7px; border-radius:50%; background:var(--teal); box-shadow:0 0 8px var(--teal); animation:blink 2.2s ease-in-out infinite;}
  @keyframes blink{0%,100%{opacity:1;} 50%{opacity:0.25;}}
  h1{font-family:var(--sans); font-weight:700; font-size:clamp(34px,6vw,54px); line-height:1.12; letter-spacing:-0.01em;}
  h1 .role{color:var(--amber);}
  .lede{color:var(--text-dim); font-size:16.5px; max-width:52ch; margin-top:20px;}

  .stat-strip{display:flex; gap:48px; margin-top:38px; flex-wrap:wrap;}
  .stat-strip b{display:block; font-size:32px; font-weight:700; font-family:var(--mono);}
  .stat-strip span{font-family:var(--mono); font-size:11.5px; color:var(--text-dim); letter-spacing:0.03em;}

  .hero-actions{display:flex; gap:14px; margin-top:36px; flex-wrap:wrap;}
  .btn{font-family:var(--mono); font-size:13px; padding:13px 22px; border-radius:6px; border:1px solid var(--border); transition:all .15s ease;}
  .btn-primary{background:var(--amber); color:#141018; border-color:var(--amber); font-weight:600;}
  .btn-primary:hover{background:#f5bb5e;}
  .btn-ghost:hover{border-color:var(--text-dim);}

  .avatar-wrap{display:flex; justify-content:center; margin:0; position:relative; z-index:1;}
  .avatar{
    width:320px; height:320px; border-radius:50%;
    background:radial-gradient(circle at 35% 30%, #2B3B4C, #0F1620);
    border:2px solid var(--border);
    display:flex; align-items:center; justify-content:center;
    font-family:var(--mono); font-size:44px; font-weight:700; color:var(--teal);
    box-shadow:0 20px 60px -20px rgba(0,0,0,0.7);
    overflow:hidden;
  }
  .avatar img{width:100%; height:100%; object-fit:cover; object-position:center;}
  .hero .avatar{animation:portrait-float 5s ease-in-out infinite;}
  @keyframes portrait-float{50%{transform:translateY(-9px); box-shadow:0 28px 70px -20px rgba(0,0,0,0.8);}}
  @media (max-width:720px){
    .wrap{padding-left:20px; padding-right:20px;}
    .hero{padding-top:46px; padding-bottom:56px;}
    .hero-intro{grid-template-columns:1fr; gap:34px; text-align:center;}
    .hero-copy{display:flex; flex-direction:column; align-items:center;}
    .eyebrow{justify-content:center; line-height:1.5;}
    .lede{margin-left:auto; margin-right:auto;}
    .stat-strip{justify-content:center; gap:24px 36px; margin-top:32px;}
    .hero-actions{justify-content:center; margin-top:30px;}
    .avatar-wrap{justify-content:center;}
    .avatar{width:210px; height:210px;}

    section{padding:58px 0;}
    .sec-head{margin-left:auto; margin-right:auto; text-align:center;}
    .sec-tag{justify-content:center;}
    .about-body{text-align:center;}
    .about-body p{margin-left:auto; margin-right:auto;}
    .skill-card{text-align:center; padding:22px 18px;}
    .skill-card h3{justify-content:center;}
    .skill-item{gap:12px; text-align:left;}
    .tl-item{text-align:center; padding:22px 18px;}
    .contact-card{text-align:center; padding:28px 18px;}
    .contact-card > p{margin-left:auto; margin-right:auto;}
    .contact-row{justify-content:center; text-align:left;}
    .contact-card .hero-actions{justify-content:center;}
    .form-grid{margin-left:auto; margin-right:auto; text-align:left;}
    .form-grid button{align-self:center;}
  }

  .topo{max-width:900px; margin:56px auto 0;}
  .topo svg{width:100%; height:auto; display:block;}
  .topo-label{font-family:var(--mono); font-size:11px; fill:var(--text-faint); text-anchor:middle;}
  .topo-node{fill:#101821; stroke:var(--border); stroke-width:1.5;}
  .topo-node-core{stroke:var(--amber);}
  .topo-line{stroke:#2B394A; stroke-width:1.5; fill:none;}
  .topo-icon{fill:none; stroke:var(--teal); stroke-width:1.4;}
  :root[data-theme="light"] .topo-node{fill:#F9FBFC;}
  :root[data-theme="light"] .topo-line{stroke:#AEBFCA;}

  section{padding:80px 0;}
  .reveal{opacity:0; transform:translateY(28px); transition:opacity .7s ease,transform .7s cubic-bezier(.2,.75,.25,1); transition-delay:var(--reveal-delay,0ms);}
  .reveal.is-visible{opacity:1; transform:translateY(0);}
  .sec-head{margin-bottom:42px; max-width:60ch;}
  .sec-tag{font-family:var(--mono); font-size:12px; color:var(--teal); letter-spacing:0.06em; margin-bottom:10px; display:flex; align-items:center; gap:8px;}
  .sec-tag .dot{width:7px; height:7px; border-radius:50%; background:var(--teal);}
  .sec-head h2{font-family:var(--sans); font-size:clamp(24px,3.4vw,32px); font-weight:700; margin-bottom:12px;}
  .sec-head p{color:var(--text-dim); font-size:15.5px;}

  .about-body{display:grid; gap:22px;}
  .about-body p{color:var(--text-dim); font-size:15.5px; margin:0; max-width:70ch;}
  .about-body b{color:var(--text);}

  .skill-flow{display:grid; grid-template-columns:minmax(0,1fr) 100px minmax(0,1fr); gap:22px; margin-top:36px; align-items:start;}
  .skill-column{display:grid; gap:126px;}
  .skill-column-left{padding-bottom:0;}
  .skill-column-right{padding-top:82px;}
  .skill-connector{position:relative; align-self:stretch; min-height:100%;}
  .skill-connector::before{content:""; position:absolute; top:0; bottom:0; left:50%; width:3px; border-radius:4px; background:var(--teal); box-shadow:0 0 12px rgba(63,204,176,0.25);}
  .skill-branch{position:absolute; height:3px; width:50%; border-radius:4px; background:var(--teal); box-shadow:0 0 12px rgba(63,204,176,0.2);}
  .branch-left{right:50%;}
  .branch-right{left:50%;}
  .branch-top{top:13%;}
  .branch-top-right{top:21%;}
  .branch-bottom{top:49%;}
  .branch-bottom-right{top:59%;}
  .branch-programming{top:85%;}
  @media (max-width:700px){.skill-flow{grid-template-columns:1fr; gap:18px;}.skill-connector{display:none;}.skill-column{gap:18px;}.programming-grid{grid-template-columns:1fr;}}
  .skill-card{background:var(--panel); border:1px solid var(--border); border-radius:10px; padding:26px; transition:border-color .25s ease,transform .25s ease,box-shadow .25s ease;}
  .skill-card:hover{transform:translateY(-5px); border-color:rgba(63,204,176,0.55); box-shadow:0 16px 36px -24px rgba(0,0,0,0.9);}
  .programming-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:28px;}
  @media (max-width:700px){.programming-grid{grid-template-columns:1fr;}}
  .skill-card h3{font-family:var(--mono); font-size:12.5px; color:var(--amber); letter-spacing:0.06em; margin-bottom:18px; display:flex; align-items:center; gap:8px;}
  .skill-item{display:flex; justify-content:space-between; align-items:center; padding:11px 0; border-top:1px dashed var(--border); font-size:14.5px;}
  .skill-item:first-of-type{border-top:none;}
  .lvl{font-family:var(--mono); font-size:11px; color:var(--text-faint);}

  .tl{position:relative;}
  .tl-item{background:var(--panel); border:1px solid var(--border); border-radius:10px; padding:26px; margin-bottom:32px; transition:border-color .25s ease,transform .25s ease;}
  .tl-item:hover{transform:translateX(6px); border-color:rgba(240,169,60,0.5);}
  .tl-date{display:inline-block; font-family:var(--mono); font-size:11.5px; color:var(--teal); border:1px solid rgba(63,204,176,0.35); padding:5px 12px; border-radius:20px; margin-bottom:16px;}
  .tl-role{font-size:20px; font-weight:700;}
  .tl-org{color:var(--text-dim); font-size:14px; margin:4px 0 16px;}
  .tl-tag{font-family:var(--mono); font-size:13px; color:var(--amber); margin-bottom:16px;}
  .tl-tag::before{content:"↳ "; color:var(--amber);}
  .tl-item hr{border:none; border-top:1px solid var(--border); margin-bottom:16px;}
  .tl-item p{color:var(--text-dim); font-size:14.5px; margin-bottom:10px;}
  .tl-item p b{color:var(--text);}

  .edu-path{display:flex; flex-direction:column; align-items:center; gap:14px; margin-top:20px;}
  .edu-node{display:flex; flex-direction:column; align-items:center; text-align:center; padding:18px 0;}
  .edu-circle{width:76px; height:76px; border-radius:50%; border:1.5px solid var(--teal); display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:13px; color:var(--teal); margin-bottom:14px; transition:background .25s ease,color .25s ease,transform .25s ease;}
  .edu-node:hover .edu-circle{background:var(--teal); color:var(--bg); transform:scale(1.08);}
  .edu-node h4{font-size:16px; font-weight:700; margin-bottom:4px;}
  .edu-node span{color:var(--text-dim); font-size:13.5px;}
  .edu-year{font-family:var(--mono); font-size:12px; color:var(--amber); margin-top:6px;}
  .edu-connector{width:1.5px; height:40px; background:var(--border);}

  .contact-card{background:var(--panel); border:1px solid var(--border); border-radius:14px; padding:40px; margin-top:12px;}
  .contact-card h3{font-size:22px; font-weight:700; margin-bottom:14px;}
  .contact-card > p{color:var(--text-dim); font-size:15px; max-width:50ch; margin-bottom:26px;}
  .contact-row{display:flex; align-items:center; gap:10px; font-family:var(--mono); font-size:14.5px; margin-bottom:18px;}
  .contact-row .dot{width:7px; height:7px; border-radius:50%; background:var(--teal); flex-shrink:0;}
  .contact-card .hero-actions{margin-top:24px; margin-bottom:36px;}
  .form-grid{display:grid; gap:20px; max-width:480px;}
  .form-grid label{font-family:var(--mono); font-size:11px; color:var(--text-dim); letter-spacing:0.05em; margin-bottom:6px; display:block;}
  .form-grid input, .form-grid textarea{
    width:100%; background:var(--panel-2); border:1px solid var(--border); border-radius:6px;
    padding:12px 14px; color:var(--text); font-family:var(--sans); font-size:14px;
  }
  .form-grid textarea{resize:vertical; min-height:90px;}
  .form-grid button{margin-top:4px; align-self:flex-start;}
  .form-status{min-height:1.3em; color:var(--teal); font-family:var(--mono); font-size:12px;}

  footer{padding:30px 0; text-align:center; font-family:var(--mono); font-size:12px; color:var(--text-faint); border-top:1px solid var(--border);}
  @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;} *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important;} .reveal{opacity:1; transform:none;}}