:root{
  --bg:#070b14; --bg2:#0a1120;
  --card:rgba(255,255,255,.032); --card-hover:rgba(255,255,255,.05);
  --line:rgba(148,178,255,.14); --line-soft:rgba(148,178,255,.09);
  --txt:#eef2f8; --sub:#9fb0c9; --dim:#6d7f9c;
  --blue:#5ea3f7; --cyan:#4fd8e8; --violet:#a78bfa;
  --green:#5ed19a; --amber:#f5be50;
  --grad:linear-gradient(92deg,#5ea3f7 0%,#4fd8e8 52%,#a78bfa 100%);
  --header:rgba(7,11,20,.72); --chip:rgba(255,255,255,.03);
  --glow1:rgba(94,163,247,.16); --glow2:rgba(167,139,250,.10); --glow3:rgba(79,216,232,.06);
  --shadow:0 14px 34px -18px rgba(38,92,180,.45);
}
[data-theme="light"]{
  --bg:#f4f7fc; --bg2:#edf2f9;
  --card:rgba(255,255,255,.78); --card-hover:#ffffff;
  --line:rgba(30,64,140,.18); --line-soft:rgba(30,64,140,.11);
  --txt:#152238; --sub:#4d6079; --dim:#7d8ea9;
  --header:rgba(244,247,252,.85); --chip:rgba(255,255,255,.6);
  --glow1:rgba(94,163,247,.13); --glow2:rgba(167,139,250,.09); --glow3:rgba(79,216,232,.07);
  --shadow:0 14px 30px -18px rgba(60,100,180,.28);
}
html{background:#070b14}
html[data-theme="light"]{background:#f4f7fc}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bg); color:var(--txt);
  font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC",sans-serif;
  line-height:1.75; -webkit-font-smoothing:antialiased; overflow-x:hidden;
  transition:background-color .3s ease, color .3s ease;
}
body::before{
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(720px 420px at 18% -6%, var(--glow1), transparent 62%),
    radial-gradient(680px 460px at 88% 4%, var(--glow2), transparent 60%),
    radial-gradient(900px 700px at 50% 115%, var(--glow3), transparent 65%),
    linear-gradient(180deg, var(--bg2), var(--bg) 340px);
}
::selection{background:rgba(94,163,247,.35)}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:880px;margin:0 auto;padding:0 22px}

/* ---------- header ---------- */
header{
  position:sticky; top:0; z-index:50;
  background:var(--header); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-soft); padding:15px 0;
}
.theme-toggle{
  margin-left:20px; font-family:inherit; font-size:13.5px; cursor:pointer;
  color:var(--sub); background:var(--chip);
  border:1px solid var(--line); border-radius:999px; padding:5px 14px;
  transition:color .25s ease, border-color .25s ease;
}
.theme-toggle:hover{color:var(--txt);border-color:rgba(94,163,247,.5)}
header .wrap{display:flex;justify-content:space-between;align-items:center}
.logo{font-size:20px;font-weight:800;letter-spacing:.2px;color:var(--txt)}
.logo span{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
nav a{color:var(--sub);margin-left:24px;font-size:15px;position:relative;padding:2px 0}
nav a::after{content:"";position:absolute;left:0;bottom:-2px;height:2px;width:0;background:var(--grad);border-radius:2px;transition:width .25s ease}
nav a:hover{color:var(--txt);text-decoration:none}
nav a:hover::after{width:100%}
@media (max-width:560px){
  header .wrap{flex-wrap:wrap;gap:8px}
  nav a{margin-left:0;margin-right:16px;font-size:14px;white-space:nowrap}
  .theme-toggle{margin-left:0}
  .logo{font-size:19px}
}

/* ---------- hero ---------- */
.hero{padding:78px 0 8px;position:relative}
.hero::before{
  content:""; position:absolute; inset:-30px -40px auto -40px; height:340px; z-index:-1;
  background-image:linear-gradient(rgba(148,178,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(148,178,255,.05) 1px,transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(70% 90% at 30% 20%, #000 30%, transparent 75%);
          mask-image:radial-gradient(70% 90% at 30% 20%, #000 30%, transparent 75%);
}
.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-family:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  font-size:12px; letter-spacing:1.8px; color:var(--sub);
  border:1px solid var(--line); border-radius:999px; padding:5px 14px 5px 11px;
  background:var(--chip); margin-bottom:26px;
}
.eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 0 rgba(94,209,154,.5);animation:pulse 2.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(94,209,154,.45)}70%{box-shadow:0 0 0 8px rgba(94,209,154,0)}100%{box-shadow:0 0 0 0 rgba(94,209,154,0)}}
.hero h1{font-size:clamp(30px,4.5vw,42px);font-weight:700;line-height:1.3;letter-spacing:-.5px;margin-bottom:18px}
.hero h1 .grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p.lead{font-size:17.5px;line-height:1.95;color:var(--sub);max-width:720px}
.hero p.lead .lead-line{display:block}
.hero p.lead .l1{font-size:19.5px;color:var(--txt);font-weight:600;margin-bottom:8px}
.hero p.lead .hl{color:var(--txt);font-weight:600;background:linear-gradient(transparent 70%,rgba(94,163,247,.38) 70%)}
.hero p.lead b, .hero p.lead strong{color:var(--txt);font-weight:600}
.pillars{display:flex;gap:10px;flex-wrap:wrap;margin:28px 0 4px}
.pillar{
  display:inline-flex;align-items:center;gap:8px;
  border:1px solid var(--line);border-radius:999px;padding:7px 16px;
  font-size:14px;color:var(--sub);background:var(--chip);
  transition:border-color .25s ease, transform .25s ease, background .25s ease;
}
.pillar:hover{transform:translateY(-2px);border-color:rgba(94,163,247,.5);background:var(--card-hover)}
.pillar::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--blue);flex:none}
.pillar:nth-child(2)::before{background:var(--green)}
.pillar:nth-child(3)::before{background:var(--amber)}
.pillar:nth-child(4)::before{background:var(--violet)}
.pillar b{color:var(--txt);font-weight:600}

/* ---------- stats ---------- */
.stats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:14px;
  margin:38px 0 6px;padding:22px 4px;
  border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);
}
.stat .n{font-size:29px;font-weight:800;letter-spacing:.3px;line-height:1.2}
.stat .n em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat .t{color:var(--dim);font-size:13px;margin-top:3px;letter-spacing:.4px}
@media (max-width:640px){.stats{grid-template-columns:repeat(2,1fr)}}

/* ---------- sections & cards ---------- */
section{padding:38px 0 4px}
h2{font-size:23px;font-weight:800;letter-spacing:.4px;margin-bottom:18px;display:flex;align-items:center;gap:12px}
h2::before{content:"";width:4px;height:20px;border-radius:3px;background:var(--grad);flex:none}
.card{
  background:var(--card);border:1px solid var(--line-soft);border-radius:18px;
  padding:22px 24px;margin-bottom:14px;
  transition:transform .25s ease, border-color .25s ease, background .25s ease, box-shadow .25s ease;
}
.card:hover{transform:translateY(-3px);background:var(--card-hover);border-color:rgba(94,163,247,.38);box-shadow:var(--shadow)}
.card h3{font-size:17.5px;font-weight:700;margin-bottom:6px}
.card h3 a{color:var(--txt)}
.card h3 a:hover{color:var(--blue);text-decoration:none}
.card p{color:var(--sub);font-size:15px}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.fact{
  background:var(--card);border:1px solid var(--line-soft);border-radius:16px;padding:17px 19px;
  transition:border-color .25s ease, background .25s ease;
}
.fact:hover{border-color:rgba(94,163,247,.35);background:var(--card-hover)}
.fact .k{color:var(--dim);font-size:12px;letter-spacing:2px;margin-bottom:4px}
.fact .v{font-size:16.5px;font-weight:600}
.tag{
  display:inline-block;font-size:11.5px;letter-spacing:1.6px;color:var(--green);
  border:1px solid rgba(94,209,154,.4);border-radius:999px;padding:2px 10px;margin-left:10px;vertical-align:2px;
}
table{width:100%;border-collapse:collapse;font-size:15px}
th,td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--line-soft)}
th{color:var(--dim);font-weight:600;font-size:13px;letter-spacing:1.2px;border-bottom:1px solid var(--line)}
tr:last-child td{border-bottom:none}
.zero{color:var(--amber);font-weight:700}
.note{color:var(--sub);font-size:14px}

/* ---------- article ---------- */
article{padding:52px 0 10px}
article h1{font-size:28px;font-weight:700;line-height:1.45;margin-bottom:12px}
.meta{color:var(--dim);font-size:14px;margin-bottom:28px;letter-spacing:.4px}
article p{margin-bottom:16px;font-size:16.5px;line-height:1.85}
article h2{margin-top:34px}
article ul{margin:0 0 16px 22px}
article li{margin-bottom:8px}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line-soft);margin-top:56px;padding:28px 0 44px;color:var(--dim);font-size:14px}
footer .wrap{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px}
footer a{color:var(--sub);margin-right:18px}
footer a:hover{color:var(--txt);text-decoration:none}
footer p{margin:0}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .eyebrow .dot{animation:none}
  .card,.pillar,nav a::after{transition:none}
}

/* ---------- v3: depth & interaction ---------- */
#works,#records{scroll-margin-top:96px}
.hero-grid{display:grid;grid-template-columns:1fr 300px;gap:34px;align-items:start}
@media (max-width:760px){.hero-grid{grid-template-columns:1fr}}
.profile-card{
  position:relative;border-radius:20px;padding:22px 22px 14px;
  background:var(--card);border:1px solid var(--line);
  box-shadow:0 24px 48px -24px rgba(10,30,70,.55);
  backdrop-filter:blur(6px);
}
.profile-card::before{
  content:"";position:absolute;inset:-1px;border-radius:20px;padding:1px;pointer-events:none;
  background:linear-gradient(150deg,rgba(94,163,247,.55),transparent 40%,transparent 65%,rgba(167,139,250,.45));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
}
.pc-head{display:flex;gap:14px;align-items:center;padding-bottom:16px;border-bottom:1px solid var(--line-soft)}
.avatar{
  width:52px;height:52px;border-radius:16px;flex:none;display:flex;align-items:center;justify-content:center;
  font-size:24px;font-weight:800;color:#fff;background:linear-gradient(135deg,#2f6fd0,#4fd8e8 60%,#a78bfa);
  box-shadow:0 10px 22px -10px rgba(79,160,255,.65);
}
.pc-name{font-size:17.5px;font-weight:700;line-height:1.3}
.pc-role{color:var(--sub);font-size:13.5px}
.pc-rows{padding-top:8px}
.pc-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px dashed var(--line-soft);font-size:14.5px}
.pc-row:last-child{border-bottom:none}
.pc-row span{color:var(--dim);font-size:12px;letter-spacing:1.6px}
.pc-row b{font-weight:600}
.pc-live{color:var(--green);display:inline-flex;align-items:center;gap:7px}
.pc-live i{width:7px;height:7px;border-radius:50%;background:var(--green);animation:pulse 2.4s infinite}
.sec-label{
  font-family:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
  font-size:11.5px;letter-spacing:2.6px;color:var(--dim);margin-bottom:8px;
}
section h2{margin-bottom:18px}
.card{position:relative;overflow:hidden}
.card::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s ease;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),rgba(94,163,247,.13),transparent 65%);
}
.card:hover::before{opacity:1}
.card.work{padding-left:64px}
.card .idx{
  position:absolute;left:22px;top:20px;
  font-family:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
  font-size:13px;color:var(--dim);letter-spacing:1px;
}
.card.work h3 a::after{content:" →";display:inline-block;color:var(--blue);transition:transform .25s ease}
.card.work:hover h3 a::after{transform:translateX(5px)}
nav a.active{color:var(--txt)}
nav a.active::after{width:100%}
#progress{
  position:fixed;top:0;left:0;height:3px;width:0;z-index:60;
  background:var(--grad);border-radius:0 3px 3px 0;
}
#toTop{
  position:fixed;right:22px;bottom:22px;z-index:60;width:42px;height:42px;border-radius:50%;
  border:1px solid var(--line);background:var(--header);color:var(--sub);font-size:17px;cursor:pointer;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  opacity:0;pointer-events:none;transform:translateY(8px);transition:all .3s ease;font-family:inherit;
}
#toTop.show{opacity:1;pointer-events:auto;transform:none}
#toTop:hover{color:var(--txt);border-color:rgba(94,163,247,.5)}
.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){.reveal{opacity:1;transform:none;transition:none}.pc-live i{animation:none}}