:root{
  --bg:#f6f7fb;
  --panel:#ffffff;
  --text:#1f2328;
  --muted:#6b7280;
  --border:#e6e8eb;
  --brand:#2563eb;
  --brand-weak:#e9efff;
  --shadow:0 6px 20px rgba(0,0,0,.06);
  --radius:16px;
  /* 更宽的单栏容器：手机窄、桌面可到 1200px */
  --container: clamp(720px, 92vw, 1200px);
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0d1117; --panel:#161b22; --text:#e6edf3; --muted:#9aa4af;
    --border:#30363d; --brand:#60a5fa; --brand-weak:#0f172a;
    --shadow:0 8px 24px rgba(0,0,0,.4);
  }
}

/* —— 基础与全局收紧 —— */
html,body{max-width:100%;overflow-x:hidden}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font:14px/1.65 system-ui,-apple-system,Segoe UI,Roboto,Arial;
  color:var(--text);
  background:
    radial-gradient(1100px 600px at -10% -10%, #cfe1ff33 0, transparent 60%),
    radial-gradient(900px 520px at 110% -20%, #ffd6e533 0, transparent 60%),
    var(--bg);
}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{line-height:1.2;margin:0 0 .45em}
h1{font-size:clamp(26px, 2.2vw, 34px); letter-spacing:.2px}
h2{font-size:clamp(18px, 1.8vw, 24px)}
h3{font-size:clamp(15px, 1.2vw, 18px)}

/* —— 容器与区块间距收紧 —— */
.container{
  max-width:var(--container);
  width:100%;
  margin:0 auto;
  padding-inline:clamp(14px, 2.4vw, 28px);
}
.section{margin: clamp(20px, 4.5vw, 30px) auto}

/* —— 顶部导航更紧凑 —— */
.site-header{position:relative;padding-top:6px}
.nav{
  position:sticky; top:0; z-index:20;
  display:flex; gap:14px; align-items:center;
  padding:8px clamp(14px, 2.4vw, 28px);
  backdrop-filter:saturate(180%) blur(8px);
  background: color-mix(in oklab, var(--bg) 80%, transparent);
  border-bottom:1px solid var(--border);
}
.nav .brand{font-weight:700; font-size:clamp(14px, 1.3vw, 16px)}
.nav .nav-links{margin-left:auto; display:flex; gap:12px; flex-wrap:wrap}
.nav a{color:var(--text)}
.nav a:hover{color:var(--brand)}

/* —— Hero 收紧：头像更小、内边距更小 —— */
.hero{
  display:grid; grid-template-columns:auto 1fr; gap:18px; align-items:center;
  padding: clamp(18px, 4.2vw, 40px) clamp(14px, 2.4vw, 28px) 8px;
}
.avatar{
  width: clamp(88px, 9vw, 116px);
  height: clamp(88px, 9vw, 116px);
  border-radius:50%;
  border:2px solid var(--border);
  box-shadow:var(--shadow);
  object-fit:cover; background:var(--panel)
}
.lead{color:var(--muted); margin:6px 0 12px; font-size:clamp(13px,1.2vw,14px)}
.hero-actions{display:flex; gap:10px; flex-wrap:wrap}
.btn{
  display:inline-block; padding:8px 12px; border-radius:999px;
  border:1px solid var(--border); background:var(--panel); color:var(--text);
  box-shadow:var(--shadow); font-weight:600; font-size:13px;
}
.btn.primary{background:var(--brand); color:#fff; border-color:transparent}
.btn:hover{transform:translateY(-1px); transition:.15s ease-in-out}

.tags{display:flex; flex-wrap:wrap; gap:8px; list-style:none; padding:0; margin:10px 0 0}
.tags li{
  padding:3px 8px; border:1px solid var(--border); border-radius:999px;
  background:linear-gradient(180deg,#fff8,#fff0); font-size:11.5px
}

/* —— 单栏卡片更紧凑 —— */
.card{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding: clamp(12px, 1.8vw, 20px);
  box-shadow:var(--shadow);
  margin-bottom: clamp(10px, 1.4vw, 16px);
  width:100%;
}
.card-project .links a{margin-right:10px}
.card-head{display:flex; align-items:center; justify-content:space-between; gap:10px}
.badge{
  padding:3px 8px; border-radius:999px; font-size:11.5px;
  background:var(--brand-weak);
  color: color-mix(in oklab, var(--brand) 80%, black 20%);
  border:1px solid var(--border)
}

/* —— 列表 / 时间轴（去掉蓝点对齐） —— */
.list{margin:4px 0 0; padding-left:18px}
.list li{margin:4px 0}
.muted{color:var(--muted)}
.card, .list li{overflow-wrap:anywhere}  /* 长行不撑宽 */

.timeline{margin:0}
.tl-item{margin:10px 0}
.tl-card{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:12px;
  padding:10px 12px;
  box-shadow:var(--shadow)
}

/* —— 数据集统计条更紧凑 —— */
.stats-row{display:flex; gap:12px; flex-wrap:wrap; margin:10px 0 6px}
.stat{
  min-width:160px;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:12px;
  padding:10px 12px;
  box-shadow:var(--shadow)
}
.stat-label{font-size:11.5px; color:var(--muted); margin-bottom:3px}
.stat-value{font-size:clamp(16px, 1.8vw, 20px); font-weight:800}
.inline-badge{vertical-align:middle; height:18px; margin-left:8px}

/* —— 媒体元素适配 —— */
img, iframe{max-width:100%; height:auto; display:block}

/* —— 联系方式 & 页脚 —— */
.contact p{margin:4px 0}

.site-footer{
  margin-top: clamp(28px, 4.5vw, 48px);
  padding: 22px 0;
  border-top:1px solid var(--border);
  color:var(--muted); text-align:center
}

/* —— 回到顶部按钮略小 —— */
.to-top{
  position:fixed; right:16px; bottom:16px;
  width:40px; height:40px; display:grid; place-items:center;
  border-radius:999px; background:var(--panel); border:1px solid var(--border);
  box-shadow:var(--shadow); color:var(--text); text-decoration:none
}
.to-top:hover{transform:translateY(-2px)}

/* —— 顶部彩色模糊背景块 —— */
.bg-blur{
  position:absolute; inset:-10% -10% auto -10%; height:200px; z-index:-1;
  background:
    radial-gradient(480px 210px at 15% 40%, #a5b4fc40 0, transparent 60%),
    radial-gradient(400px 200px at 60% 10%, #fbcfe840 0, transparent 60%),
    radial-gradient(360px 220px at 90% 30%, #93c5fd40 0, transparent 60%);
  filter:blur(6px)
}