:root{
  --bg:#0b0e14;
  --fg:#e9edf5;
  --muted:#9aa4b8;
  --accent:#7c9cff;
  --accent2:#63e6be;
  --card:rgba(255,255,255,0.04);
  --card-border:rgba(255,255,255,0.09);
}

*{box-sizing:border-box;margin:0;padding:0;}

html{scroll-behavior:smooth;}

body{
  background:var(--bg);
  color:var(--fg);
  font-family:"Hiragino Sans","Yu Gothic",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  line-height:1.7;
  overflow-x:hidden;
  min-height:100vh;
}

.bg-blob{
  position:fixed;
  border-radius:50%;
  filter:blur(90px);
  opacity:0.35;
  z-index:0;
  pointer-events:none;
  animation:float 18s ease-in-out infinite;
}
.blob-1{width:420px;height:420px;background:var(--accent);top:-120px;left:-100px;animation-delay:0s;}
.blob-2{width:360px;height:360px;background:var(--accent2);bottom:-100px;right:-80px;animation-delay:-6s;}
.blob-3{width:280px;height:280px;background:#ff7ce0;top:40%;left:60%;animation-delay:-12s;opacity:0.2;}

@keyframes float{
  0%,100%{transform:translate(0,0) scale(1);}
  50%{transform:translate(30px,-40px) scale(1.08);}
}

header.hero{
  position:relative;
  z-index:1;
  max-width:760px;
  margin:0 auto;
  padding:120px 24px 60px;
  text-align:center;
}

.eyebrow{
  color:var(--accent2);
  letter-spacing:0.25em;
  font-size:0.75rem;
  text-transform:uppercase;
  margin-bottom:16px;
}

h1{
  font-size:clamp(2.2rem,6vw,3.4rem);
  font-weight:700;
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-bottom:12px;
}
h1 .en{
  font-size:0.42em;
  font-weight:400;
  color:var(--muted);
  letter-spacing:0.04em;
}

.role{
  display:inline-block;
  color:var(--accent);
  font-weight:600;
  font-size:1.05rem;
  margin-bottom:24px;
  padding:6px 18px;
  border:1px solid var(--card-border);
  border-radius:999px;
  background:var(--card);
}

.bio{
  color:var(--muted);
  font-size:1rem;
  max-width:560px;
  margin:0 auto;
}

main{
  position:relative;
  z-index:1;
  max-width:760px;
  margin:0 auto;
  padding:0 24px 80px;
  display:flex;
  flex-direction:column;
  gap:28px;
}

.card{
  background:var(--card);
  border:1px solid var(--card-border);
  border-radius:20px;
  padding:32px;
  backdrop-filter:blur(6px);
}

h2{
  font-size:1.3rem;
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:22px;
}
h2 .num{
  color:var(--accent);
  font-size:0.8rem;
  font-weight:600;
  border:1px solid var(--card-border);
  border-radius:8px;
  padding:3px 8px;
}

.tags{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.tags li{
  background:rgba(124,156,255,0.12);
  color:var(--accent);
  padding:8px 16px;
  border-radius:999px;
  font-size:0.9rem;
  font-weight:600;
}

.pub{
  padding:18px 0;
}
.pub + .pub{
  border-top:1px solid var(--card-border);
}
.pub h3{
  font-size:1.02rem;
  font-weight:600;
  margin-bottom:8px;
}
.pub-meta{
  color:var(--accent2);
  font-size:0.82rem;
  margin-bottom:8px;
}
.pub-desc{
  color:var(--muted);
  font-size:0.92rem;
  margin-bottom:10px;
}
.pub-link{
  color:var(--accent);
  text-decoration:none;
  font-size:0.9rem;
  font-weight:600;
}
.pub-link:hover{
  text-decoration:underline;
}

footer{
  position:relative;
  z-index:1;
  text-align:center;
  color:var(--muted);
  font-size:0.8rem;
  padding:30px 24px 60px;
}

.reveal{
  opacity:0;
  transform:translateY(24px);
  transition:opacity 0.7s ease, transform 0.7s ease;
}
.reveal.in{
  opacity:1;
  transform:translateY(0);
}

@media (max-width:520px){
  header.hero{padding:80px 20px 40px;}
  .card{padding:24px;}
}