:root{
  --bg:#0A0E1A;
  --bg-2:#0F1524;
  --surface:rgba(255,255,255,.04);
  --surface-2:rgba(255,255,255,.07);
  --border:rgba(255,255,255,.08);
  --border-2:rgba(255,255,255,.14);
  --text:#E6E9F2;
  --text-2:#9BA3B8;
  --text-3:#5F6980;
  --cyan:#00E5FF;
  --cyan-soft:rgba(0,229,255,.15);
  --violet:#A855F7;
  --violet-soft:rgba(168,85,247,.15);
  --amber:#F59E0B;
  --amber-soft:rgba(245,158,11,.15);
  --pink:#F472B6;
  --maxw:1366px;
  --font-h:"Space Grotesk","Noto Sans SC",system-ui,sans-serif;
  --font-b:"Inter","Noto Sans SC",system-ui,sans-serif;
  --font-m:"JetBrains Mono",ui-monospace,monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-b);
  font-size:16px;
  line-height:1.6;
  overflow-x:hidden;
  min-height:100vh;
}

/* ===== Animated background ===== */
.bg-wrap{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.bg-wrap .grid-bg{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(0,229,255,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,229,255,.05) 1px,transparent 1px);
  background-size:60px 60px;
  mask-image:radial-gradient(ellipse at 50% 0%,#000 30%,transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse at 50% 0%,#000 30%,transparent 75%);
}
.bg-wrap .orb{
  position:absolute;border-radius:50%;filter:blur(80px);opacity:.5;
  animation:float 18s ease-in-out infinite;
}
.bg-wrap .orb.c1{width:420px;height:420px;background:radial-gradient(circle,var(--cyan),transparent 70%);top:-120px;left:-80px;animation-delay:0s}
.bg-wrap .orb.c2{width:380px;height:380px;background:radial-gradient(circle,var(--violet),transparent 70%);top:30%;right:-100px;animation-delay:-6s}
.bg-wrap .orb.c3{width:340px;height:340px;background:radial-gradient(circle,var(--amber),transparent 70%);bottom:-100px;left:30%;animation-delay:-12s;opacity:.35}
@keyframes float{
  0%,100%{transform:translate(0,0) scale(1)}
  33%{transform:translate(40px,-30px) scale(1.1)}
  66%{transform:translate(-30px,40px) scale(.95)}
}
.noise{
  position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.04;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence baseFrequency='0.85' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.6'/></svg>");
}

a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px;position:relative;z-index:2}

/* ===== Nav ===== */
nav{
  position:fixed;top:16px;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:center;
}
.nav-in{
  max-width:var(--maxw);width:calc(100% - 64px);
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 14px 10px 18px;
  background:rgba(10,14,26,.6);
  backdrop-filter:blur(20px) saturate(160%);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
  border:1px solid var(--border);
  border-radius:999px;
  box-shadow:0 8px 32px -10px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.06);
}
.logo{font-family:var(--font-m);font-size:13px;font-weight:500;display:flex;align-items:center;gap:10px}
.logo .dot{
  width:8px;height:8px;border-radius:50%;
  background:var(--cyan);
  box-shadow:0 0 12px var(--cyan),0 0 24px rgba(0,229,255,.5);
  animation:pulse 2.4s ease-in-out infinite;
}
@keyframes pulse{50%{box-shadow:0 0 16px var(--cyan),0 0 40px rgba(0,229,255,.7);opacity:.8}}
.nav-links{display:flex;gap:6px;align-items:center;font-size:13.5px;font-weight:500}
.nav-links a{
  padding:7px 14px;border-radius:999px;
  color:var(--text-2);transition:all .25s ease;
  position:relative;
}
.nav-links a:hover{color:var(--text);background:var(--surface-2)}
.nav-right{display:flex;align-items:center;gap:8px}
.lang-btn{
  font-family:var(--font-m);font-size:11px;
  padding:6px 12px;border-radius:999px;
  background:var(--surface);border:1px solid var(--border);
  color:var(--text-2);cursor:pointer;transition:all .25s;
  letter-spacing:.04em;
}
.lang-btn:hover{color:var(--cyan);border-color:var(--cyan-soft);background:var(--cyan-soft)}
.menu-btn{display:none;background:none;border:none;cursor:pointer;font-size:20px;color:var(--text)}

/* ===== Hero ===== */
header.hero{padding:160px 0 100px;position:relative}
.hero-tag{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-m);font-size:12.5px;letter-spacing:.04em;
  color:var(--cyan);
  padding:7px 16px 7px 12px;
  background:var(--cyan-soft);
  border:1px solid rgba(0,229,255,.2);
  border-radius:999px;
  margin-bottom:28px;
}
.hero-tag::before{
  content:"";width:6px;height:6px;border-radius:50%;
  background:var(--cyan);box-shadow:0 0 8px var(--cyan);
}
.hero h1{
  font-family:var(--font-h);
  font-weight:700;
  font-size:clamp(44px,7.5vw,84px);
  line-height:1;
  letter-spacing:-.025em;
  margin-bottom:18px;
  position:relative;
}
.hero h1 .grad{
  background:linear-gradient(135deg,var(--cyan) 0%,var(--violet) 50%,var(--pink) 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  background-size:200% 200%;
  animation:gradShift 8s ease infinite;
}
@keyframes gradShift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.hero .role{
  font-family:var(--font-h);font-weight:500;
  font-size:clamp(18px,2.4vw,24px);
  color:var(--text-2);margin-bottom:22px;
}
.hero .role b{color:var(--text);font-weight:600}
.hero p.lead{max-width:580px;color:var(--text-2);font-size:16.5px;margin-bottom:36px;line-height:1.7}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.btn{
  display:inline-flex;align-items:center;gap:9px;
  padding:13px 24px;border-radius:12px;
  font-size:14px;font-weight:600;font-family:var(--font-b);
  transition:all .25s cubic-bezier(.2,.7,.2,1);
  cursor:pointer;border:none;position:relative;overflow:hidden;
}
.btn-primary{
  background:linear-gradient(135deg,var(--cyan),var(--violet));
  color:#0A0E1A;
  box-shadow:0 8px 24px -6px rgba(0,229,255,.4),0 0 0 1px rgba(255,255,255,.1) inset;
}
.btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 36px -8px rgba(168,85,247,.5),0 0 0 1px rgba(255,255,255,.2) inset;
}
.btn-ghost{
  background:var(--surface);
  color:var(--text);
  border:1px solid var(--border-2);
  backdrop-filter:blur(10px);
}
.btn-ghost:hover{
  border-color:var(--cyan);
  color:var(--cyan);
  background:var(--cyan-soft);
  transform:translateY(-2px);
}
.arrow{transition:transform .3s}
.btn:hover .arrow{transform:translateX(4px)}

/* Hero layout: text + terminal */
.hero-grid{
  display:grid;grid-template-columns:1.15fr 1fr;gap:60px;align-items:center;
}

/* terminal card */
.terminal{
  background:linear-gradient(180deg,#111827 0%,#0A0E1A 100%);
  border-radius:16px;
  border:1px solid var(--border-2);
  box-shadow:
    0 40px 80px -20px rgba(0,0,0,.6),
    0 0 0 1px rgba(0,229,255,.1) inset,
    0 1px 0 rgba(255,255,255,.06) inset;
  overflow:hidden;
  font-family:var(--font-m);font-size:13px;
  position:relative;
  transform:perspective(1000px) rotateY(-6deg) rotateX(3deg);
  transition:transform .6s cubic-bezier(.2,.7,.2,1);
}
.terminal:hover{transform:perspective(1000px) rotateY(-2deg) rotateX(1deg) translateY(-4px)}
.terminal::before{
  content:"";position:absolute;top:-1px;left:30%;right:30%;height:1px;
  background:linear-gradient(90deg,transparent,var(--cyan),transparent);
  opacity:.6;
}
.terminal .bar{
  display:flex;align-items:center;gap:7px;
  padding:12px 16px;
  background:rgba(255,255,255,.02);
  border-bottom:1px solid var(--border);
}
.terminal .bar i{width:11px;height:11px;border-radius:50%;display:block}
.terminal .bar .r{background:#FF5F57}.terminal .bar .y{background:#FEBC2E}.terminal .bar .g{background:#28C840}
.terminal .bar span{margin-left:12px;color:var(--text-3);font-size:11px}
.terminal .body{padding:20px;color:var(--text-2);line-height:1.9;min-height:260px}
.terminal .body .pr{color:var(--cyan)}
.terminal .body .ac{color:var(--amber)}
.terminal .body .cm{color:var(--text-3)}
.terminal .body .ky{color:var(--violet)}
.terminal .body .ok{color:#34D399}
.terminal .body .line{opacity:0;animation:lineIn .4s forwards}
.terminal .body .line:nth-child(1){animation-delay:.3s}
.terminal .body .line:nth-child(2){animation-delay:.7s}
.terminal .body .line:nth-child(3){animation-delay:1.1s}
.terminal .body .line:nth-child(4){animation-delay:1.5s}
.terminal .body .line:nth-child(5){animation-delay:1.9s}
.terminal .body .line:nth-child(6){animation-delay:2.3s}
.terminal .body .line:nth-child(7){animation-delay:2.7s}
@keyframes lineIn{to{opacity:1}}
.cursor{display:inline-block;width:7px;height:13px;background:var(--cyan);vertical-align:-1px;animation:blink 1.1s steps(2) infinite;margin-left:2px;box-shadow:0 0 6px var(--cyan)}
@keyframes blink{50%{opacity:0}}

/* stats */
.stats{display:flex;gap:48px;margin-top:56px;flex-wrap:wrap}
.stat{position:relative}
.stat::before{
  content:"";position:absolute;top:4px;left:-16px;width:1px;height:40px;
  background:linear-gradient(180deg,var(--cyan),transparent);
}
.stat:first-child::before{display:none}
.stat .n{
  font-family:var(--font-h);font-weight:700;font-size:32px;
  background:linear-gradient(135deg,var(--text),var(--cyan));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.stat .n small{font-size:18px;-webkit-text-fill-color:var(--amber);background:none}
.stat .l{font-family:var(--font-m);font-size:12px;color:var(--text-3);margin-top:4px;letter-spacing:.03em}

/* ===== Section ===== */
section{padding:100px 0;position:relative}
.sec-head{display:flex;align-items:baseline;gap:18px;margin-bottom:50px;flex-wrap:wrap}
.sec-no{font-family:var(--font-m);font-size:13px;color:var(--cyan);letter-spacing:.06em}
.sec-title{
  font-family:var(--font-h);font-weight:700;
  font-size:clamp(28px,4vw,42px);
  letter-spacing:-.02em;
}
.sec-sub{color:var(--text-3);font-size:13px;margin-left:auto;font-family:var(--font-m);letter-spacing:.05em}

/* works */
.works-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.work{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:18px;
  padding:28px;
  transition:all .4s cubic-bezier(.2,.7,.2,1);
  display:flex;flex-direction:column;
  position:relative;overflow:hidden;
  backdrop-filter:blur(10px);
}
.work::before{
  content:"";position:absolute;inset:0;border-radius:18px;padding:1px;
  background:linear-gradient(135deg,transparent 30%,rgba(0,229,255,.3) 50%,rgba(168,85,247,.3) 70%,transparent 90%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;transition:opacity .4s;pointer-events:none;
}
.work:hover{
  transform:translateY(-6px);
  border-color:transparent;
  background:var(--surface-2);
  box-shadow:
    0 30px 60px -20px rgba(0,0,0,.5),
    0 0 40px -10px rgba(0,229,255,.15);
}
.work:hover::before{opacity:1}
.work .tag{
  font-family:var(--font-m);font-size:11px;
  color:var(--cyan);background:var(--cyan-soft);
  padding:5px 12px;border-radius:999px;
  align-self:flex-start;margin-bottom:18px;
  letter-spacing:.04em;
}
.work h3{font-family:var(--font-h);font-weight:600;font-size:22px;margin-bottom:10px}
.work p{color:var(--text-2);font-size:14.5px;margin-bottom:22px;flex:1;line-height:1.7;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.work .meta{display:flex;justify-content:space-between;align-items:center;font-family:var(--font-m);font-size:11.5px;color:var(--text-3);letter-spacing:.03em}
.work .meta a{color:var(--text);font-weight:500;display:inline-flex;align-items:center;gap:6px;transition:all .25s}
.work .meta a:hover{color:var(--cyan);gap:10px}
.work-icon{
  position:absolute;top:20px;right:20px;
  width:44px;height:44px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  font-size:22px;
  background:var(--surface-2);
  border:1px solid var(--border);
  transition:all .3s;
}
.work:hover .work-icon{
  background:var(--cyan-soft);
  border-color:var(--cyan);
  transform:scale(1.1) rotate(-6deg);
}

/* writing */
.posts{display:flex;flex-direction:column;gap:2px}
.post{
  display:grid;grid-template-columns:130px 1fr auto;gap:28px;align-items:center;
  padding:22px 20px;border-radius:12px;
  border:1px solid transparent;
  transition:all .3s;
}
.post:hover{background:var(--surface);border-color:var(--border)}
.post .date{font-family:var(--font-m);font-size:13px;color:var(--text-3);letter-spacing:.02em}
.post .info h3{font-family:var(--font-h);font-weight:500;font-size:17px;margin-bottom:5px;transition:color .25s;color:var(--text)}
.post:hover .info h3{color:var(--cyan)}
.post .info p{color:var(--text-3);font-size:13.5px}
.post .cat{
  font-family:var(--font-m);font-size:11px;
  color:var(--violet);background:var(--violet-soft);
  padding:5px 12px;border-radius:999px;white-space:nowrap;
  letter-spacing:.04em;
}

/* ===== Skills ===== */
.skills-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:56px}
.skill-tag{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:14px 18px;transition:all .3s;cursor:default}
.skill-tag:hover{border-color:var(--cyan);background:var(--cyan-soft);transform:translateY(-2px)}
.skill-tag .s-icon{font-size:22px;flex-shrink:0}
.skill-tag .s-info{min-width:0}
.skill-tag .s-name{font-family:var(--font-m);font-size:13px;font-weight:500;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.skill-tag .s-desc{font-size:11.5px;color:var(--text-3);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* lab */
.lab-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.lab-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:16px;
  padding:22px;
  transition:all .35s cubic-bezier(.2,.7,.2,1);
  position:relative;overflow:hidden;
  backdrop-filter:blur(8px);
}
.lab-card:hover{
  transform:translateY(-5px) scale(1.02);
  border-color:var(--border-2);
  background:var(--surface-2);
  box-shadow:0 20px 40px -15px rgba(0,0,0,.4);
}
.lab-card .emoji{
  font-size:28px;margin-bottom:14px;
  filter:drop-shadow(0 0 10px rgba(0,229,255,.3));
  transition:transform .3s;
}
.lab-card:hover .emoji{transform:scale(1.15) rotate(8deg)}
.lab-card h4{font-family:var(--font-h);font-weight:600;font-size:15.5px;margin-bottom:7px}
.lab-card p{font-size:13px;color:var(--text-3);line-height:1.6}
.lab-card .status{
  font-family:var(--font-m);font-size:11px;
  color:var(--amber);margin-top:16px;display:inline-block;
  letter-spacing:.04em;
}

/* connect */
.connect{
  position:relative;
  background:linear-gradient(135deg,rgba(0,229,255,.08),rgba(168,85,247,.08));
  border:1px solid var(--border-2);
  border-radius:24px;
  padding:60px 50px;
  text-align:center;
  overflow:hidden;
  backdrop-filter:blur(20px);
}
.connect::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 50% 0%,rgba(0,229,255,.15),transparent 60%);
  pointer-events:none;
}
.connect h2{
  font-family:var(--font-h);font-weight:700;
  font-size:clamp(26px,3.5vw,38px);
  margin-bottom:14px;position:relative;
  letter-spacing:-.02em;
}
.connect h2 .grad{
  background:linear-gradient(135deg,var(--cyan),var(--violet));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.connect p{color:var(--text-2);max-width:500px;margin:0 auto 32px;position:relative}
.socials{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;position:relative}
.soc{
  display:inline-flex;align-items:center;gap:8px;
  padding:11px 20px;
  background:var(--surface);
  border:1px solid var(--border-2);
  border-radius:12px;
  font-size:13.5px;font-weight:500;
  transition:all .3s cubic-bezier(.2,.7,.2,1);
  backdrop-filter:blur(10px);
}
.soc:hover{
  border-color:var(--cyan);
  color:var(--cyan);
  background:var(--cyan-soft);
  transform:translateY(-3px);
  box-shadow:0 10px 24px -10px rgba(0,229,255,.4);
}

/* footer */
footer{border-top:1px solid var(--border);padding:40px 0 50px;margin-top:60px;position:relative}
.foot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px}
.foot p{font-family:var(--font-m);font-size:12px;color:var(--text-3);letter-spacing:.03em}
.foot .top{
  font-family:var(--font-m);font-size:12px;color:var(--text-2);
  display:inline-flex;align-items:center;gap:6px;
  transition:color .2s;letter-spacing:.03em;
}
.foot .top:hover{color:var(--cyan)}

/* reveal */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}

/* lang toggle */
[data-lang="en"] .zh-only{display:none!important}
[data-lang="zh"] .en-only{display:none!important}

/* responsive */
@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr;gap:40px}
  .terminal{transform:none}
  .terminal:hover{transform:translateY(-4px)}
  .works-grid{grid-template-columns:1fr}
  .lab-grid{grid-template-columns:1fr 1fr}
  .skills-grid{grid-template-columns:repeat(2,1fr)}
  .post{grid-template-columns:1fr;gap:10px;padding:18px 16px}
  .post .cat{justify-self:start}
  .stats{gap:32px}
  .stat::before{display:none}
  .sec-sub{margin-left:0;width:100%}
  header.hero{padding:130px 0 70px}
  .hero h1{font-size:clamp(34px,10vw,52px)}
  .hero .role{font-size:17px}
  .hero p.lead{font-size:15px}
  .hero-tag{font-size:11.5px;margin-bottom:22px}
  .sec-title{font-size:clamp(22px,6vw,30px)}
  .sec-no{font-size:11.5px}
  .stat .n{font-size:26px}
  .stat .n small{font-size:14px}
  .stat .l{font-size:11px}
  .work h3{font-size:19px}
  .work p{font-size:13.5px}
  .post .info h3{font-size:14.5px}
  .post .info p{font-size:12px}
  .post .date{font-size:11.5px}
  .post .cat{font-size:11px}
  .lab-card h4{font-size:14px}
  .lab-card p{font-size:12px}
  .connect{padding:40px 28px}
  .nav-links{display:none}
  .menu-btn{display:block}
  .nav-links.open{
    display:flex;flex-direction:column;gap:4px;
    position:absolute;top:64px;left:16px;right:16px;
    background:rgba(10,14,26,.95);
    backdrop-filter:blur(20px);
    padding:16px;border-radius:16px;
    border:1px solid var(--border);
  }
  .wrap{padding:0 22px}
  .nav-in{width:calc(100% - 44px);padding:8px 10px 8px 14px}
  .logo{font-size:12px}
  .lang-btn{font-size:10px;padding:5px 10px}
  section{padding:70px 0}
  .sec-head{margin-bottom:36px}
  .btn{padding:11px 20px;font-size:13px}
  .terminal .body{font-size:12px;min-height:220px;padding:16px}
  .terminal .bar{padding:10px 14px}
  .soc{padding:9px 16px;font-size:12.5px}
}
@media(max-width:500px){
  .lab-grid{grid-template-columns:1fr}
  .skills-grid{grid-template-columns:repeat(2,1fr)}
  .hero h1{font-size:clamp(28px,8.5vw,38px)}
  .hero-tag{font-size:10px}
  .hero .role{font-size:15px}
  .hero p.lead{font-size:13.5px}
  .stats{gap:20px}
  .stat .n{font-size:20px}
  .stat .n small{font-size:12px}
  .stat .l{font-size:10.5px}
  .work h3{font-size:17px}
  .work p{font-size:12.5px}
  .post .info h3{font-size:13.5px}
  .post .info p{font-size:11px}
  .post .date{font-size:10.5px}
  .post .cat{font-size:10px}
  .btn{padding:10px 18px;font-size:12.5px}
  section{padding:60px 0}
  .connect{padding:32px 22px;border-radius:18px}
  .connect h2{font-size:22px}
  .connect p{font-size:13.5px}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}