@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root{
  --ink:#1f1f1f;
  --ink-2:#3d3d3d;
  --ink-3:#767676;
  --paper:#ffffff;
  --paper-2:#f5f5f5;
  --line:rgba(31,31,31,.1);
  --line-2:rgba(31,31,31,.055);
  --e1:0 1px 2px rgba(31,31,31,.05),0 2px 6px rgba(31,31,31,.05);
  --e2:0 4px 10px rgba(31,31,31,.06),0 12px 26px rgba(31,31,31,.07);
  --e3:0 10px 22px rgba(31,31,31,.08),0 26px 50px rgba(31,31,31,.08);
  --e4:0 18px 38px rgba(31,31,31,.12),0 40px 80px rgba(31,31,31,.1);
  --r:28px;
  --r-sm:14px;
  --font-d:'Space Grotesk','DM Sans',system-ui,-apple-system,'PingFang SC','Microsoft YaHei',sans-serif;
  --font-b:'DM Sans','Space Grotesk',system-ui,-apple-system,'PingFang SC','Microsoft YaHei',sans-serif;
}

*,*::before,*::after{box-sizing:border-box}

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  font-family:var(--font-b);
  font-size:17px;
  line-height:1.72;
  color:var(--ink);
  background-color:var(--paper-2);
  background-image:
    radial-gradient(1100px 560px at 84% -12%, #ffffff 0%, rgba(255,255,255,0) 62%),
    radial-gradient(900px 520px at 6% 106%, #ffffff 0%, rgba(255,255,255,0) 58%);
  background-attachment:fixed;
}

a{color:inherit}
img{max-width:100%}
p{margin:0}

:focus-visible{
  outline:2px solid var(--ink);
  outline-offset:3px;
  border-radius:6px;
}

.hg-sr{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
  border:0;
}

.hg-app{
  padding-bottom:280px;
  position:relative;
  z-index:1;
}

/* ---------- 顶部品牌 ---------- */
.hg-top{
  max-width:1080px;
  margin:0 auto;
  padding:22px 20px 0;
  display:flex;
  flex-direction:column;
  gap:6px;
  align-items:flex-start;
  position:relative;
  z-index:3;
}

.hg-brand{
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:44px;
  text-decoration:none;
  font-family:var(--font-d);
  font-weight:700;
  font-size:19px;
  letter-spacing:-.02em;
  color:var(--ink);
}

.hg-brand-sm{font-size:17px;min-height:40px}

.hg-logo{
  width:28px;height:28px;
  border-radius:9px;
  display:block;
  box-shadow:var(--e1);
}

.hg-top-note{
  font-size:14px;
  letter-spacing:.02em;
  color:var(--ink-3);
}

/* ---------- 布局栅格 ---------- */
.hg-main{position:relative;z-index:2}

.wrap{
  max-width:1080px;
  margin:0 auto;
  padding:0 20px;
  display:grid;
  grid-template-columns:232px minmax(0,1fr);
  gap:30px 32px;
}

/* ---------- 首屏 ---------- */
.hg-hero{
  grid-column:1 / -1;
  display:grid;
  grid-template-columns:minmax(0,220px) minmax(0,1fr);
  align-items:center;
  gap:30px;
  min-height:70vh;
  padding:34px 0 10px;
}

.hg-hero-art{
  position:relative;
  width:100%;
  aspect-ratio:1 / 1;
  border-radius:var(--r);
  background:var(--paper);
  box-shadow:var(--e4);
  display:flex;
  align-items:center;
  justify-content:center;
  isolation:isolate;
}

.hg-hero-art::before{
  content:"";
  position:absolute;
  inset:14px -12px -12px 14px;
  border-radius:var(--r);
  background:var(--paper);
  box-shadow:var(--e2);
  z-index:0;
}

.hg-art-img{
  position:relative;
  z-index:2;
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:var(--r);
  display:block;
}

.hg-art-mark{
  position:relative;
  z-index:2;
  font-family:var(--font-d);
  font-size:64px;
  font-weight:700;
  letter-spacing:-.05em;
  line-height:1;
}

.hg-chip{
  position:absolute;
  z-index:4;
  padding:6px 12px;
  border-radius:999px;
  font-size:14px;
  line-height:1.4;
  white-space:nowrap;
  color:var(--ink);
  background:rgba(255,255,255,.9);
  border:1px solid var(--line);
  box-shadow:var(--e3);
  backdrop-filter:blur(6px);
}

.hg-chip-a{top:-10px;right:-8px}
.hg-chip-b{bottom:-12px;left:-10px}

.hg-hero-copy{text-align:right}

.hg-eyebrow{
  font-family:var(--font-d);
  font-size:14px;
  letter-spacing:.14em;
  text-transform:none;
  color:var(--ink-3);
  margin-bottom:10px;
}

.hg-hero-copy h1{
  font-family:var(--font-d);
  font-size:clamp(28px,5.6vw,50px);
  line-height:1.14;
  letter-spacing:-.035em;
  margin:0 0 16px;
  font-weight:700;
}

.hg-lede{
  font-size:17px;
  line-height:1.75;
  color:var(--ink-2);
  max-width:44ch;
  margin-left:auto;
}

.hg-badges{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:flex-end;
  margin-top:18px;
}

.hg-badge{
  font-size:14px;
  line-height:1.4;
  padding:6px 12px;
  border-radius:999px;
  background:var(--paper);
  border:1px solid var(--line);
  box-shadow:var(--e1);
  color:var(--ink-2);
}

/* ---------- 侧栏 ---------- */
.hg-aside{
  grid-column:1;
  align-self:start;
  position:sticky;
  top:22px;
  z-index:3;
  padding:20px 18px;
  border-radius:var(--r);
  background:rgba(255,255,255,.72);
  border:1px solid var(--line-2);
  box-shadow:var(--e2);
  backdrop-filter:blur(10px);
}

.hg-aside-title{
  font-family:var(--font-d);
  font-size:16px;
  font-weight:600;
  letter-spacing:.02em;
  margin:0 0 12px;
}

.hg-aside-title > span{
  display:inline-block;
  position:relative;
  padding-left:14px;
}

.hg-aside-title > span::before{
  content:"";
  position:absolute;
  left:0;
  top:.55em;
  width:6px;
  height:6px;
  border-radius:2px;
  background:var(--ink);
}

.hg-toc{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:4px;
}

.hg-toc a{
  display:flex;
  align-items:center;
  min-height:40px;
  padding:8px 10px;
  border-radius:var(--r-sm);
  font-size:16px;
  line-height:1.5;
  text-decoration:none;
  color:var(--ink-2);
  border:1px solid transparent;
  transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease;
}

.hg-toc a:hover{
  background:var(--paper);
  border-color:var(--line);
  box-shadow:var(--e1);
  transform:translateY(-1px);
  color:var(--ink);
}

.hg-aside-note{
  margin-top:14px;
  padding-top:14px;
  border-top:1px dashed var(--line);
  font-size:14px;
  line-height:1.7;
  color:var(--ink-3);
}

/* ---------- 正文 ---------- */
.hg-content{grid-column:2;min-width:0}

.hg-article{
  display:flex;
  flex-direction:column;
  gap:22px;
}

.hg-article > section{
  position:relative;
  z-index:1;
  background:var(--paper);
  border-radius:var(--r);
  padding:26px 24px;
  box-shadow:var(--e2);
  scroll-margin-top:26px;
  scroll-margin-bottom:300px;
}

.hg-article > section:nth-child(even){
  z-index:2;
  box-shadow:var(--e3);
}

.hg-article h2{
  font-family:var(--font-d);
  font-size:clamp(21px,3.2vw,27px);
  line-height:1.32;
  letter-spacing:-.025em;
  margin:0 0 .62em;
  font-weight:700;
}

.hg-article h2 > span{
  display:inline-block;
  position:relative;
  padding-left:16px;
}

.hg-article h2 > span::before{
  content:"";
  position:absolute;
  left:0;
  top:.6em;
  width:8px;
  height:8px;
  border-radius:3px;
  background:var(--ink);
  box-shadow:var(--e1);
}

.hg-article h3{
  font-family:var(--font-d);
  font-size:19px;
  line-height:1.45;
  letter-spacing:-.01em;
  margin:1.3em 0 .5em;
}

.hg-article h3 > span{
  display:inline-block;
  position:relative;
  padding-left:14px;
}

.hg-article h3 > span::before{
  content:"";
  position:absolute;
  left:0;
  top:.62em;
  width:6px;
  height:6px;
  border-radius:2px;
  background:var(--ink-3);
}

.hg-article p{margin:0 0 1em;color:var(--ink-2)}

.hg-article ul,
.hg-article ol{
  margin:0 0 1em;
  padding-left:1.25em;
}

.hg-article li{margin:.4em 0;color:var(--ink-2)}
.hg-article li::marker{color:var(--ink-3)}

.hg-article strong{color:var(--ink)}

.hg-article a{
  color:var(--ink);
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-color:rgba(31,31,31,.32);
}

.hg-article a:hover{text-decoration-color:var(--ink)}

.hg-article img{
  display:block;
  width:100%;
  height:auto;
  border-radius:20px;
  box-shadow:var(--e1);
  margin:1em 0;
}

.hg-article blockquote{
  margin:1em 0;
  padding:14px 18px;
  border-left:3px solid var(--ink);
  border-radius:0 var(--r-sm) var(--r-sm) 0;
  background:var(--paper-2);
}

.hg-article blockquote p{margin:0}

.hg-article table{
  display:block;
  overflow-x:auto;
  width:100%;
  border-collapse:collapse;
  margin:1em 0;
  font-size:16px;
}

.hg-article th,
.hg-article td{
  border-bottom:1px solid var(--line);
  padding:10px 12px;
  text-align:left;
}

.hg-article > section > *:last-child{margin-bottom:0}

/* ---------- 页脚 ---------- */
.hg-footer{
  max-width:1080px;
  margin:70px auto 0;
  padding:0 20px;
  position:relative;
  z-index:2;
}

.hg-cta{
  position:relative;
  overflow:hidden;
  border-radius:var(--r);
  padding:34px 26px;
  background:var(--ink);
  color:#fff;
  box-shadow:var(--e4);
}

.hg-cta::after{
  content:"";
  position:absolute;
  right:-60px;
  bottom:-90px;
  width:240px;
  height:240px;
  border-radius:50%;
  background:rgba(255,255,255,.08);
}

.hg-cta h2{
  font-family:var(--font-d);
  font-size:clamp(21px,3.4vw,29px);
  line-height:1.3;
  letter-spacing:-.025em;
  margin:0 0 12px;
  position:relative;
  z-index:1;
}

.hg-cta h2 > span{
  display:inline-block;
  position:relative;
  padding-left:16px;
}

.hg-cta h2 > span::before{
  content:"";
  position:absolute;
  left:0;
  top:.6em;
  width:8px;
  height:8px;
  border-radius:3px;
  background:#fff;
}

.hg-cta p{
  color:rgba(255,255,255,.78);
  font-size:16px;
  max-width:52ch;
  position:relative;
  z-index:1;
}

.hg-cta-btns{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:20px;
  position:relative;
  z-index:1;
}

.hg-btn{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:10px 20px;
  border-radius:999px;
  font-size:16px;
  font-weight:500;
  text-decoration:none;
  background:#fff;
  color:var(--ink);
  box-shadow:var(--e2);
  transition:transform .18s ease, box-shadow .18s ease;
}

.hg-btn-ghost{
  background:transparent;
  color:#fff;
  border:1px solid rgba(255,255,255,.5);
  box-shadow:none;
}

.hg-btn:hover{transform:translateY(-2px);box-shadow:var(--e3)}

.hg-cols{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:24px;
  margin-top:38px;
  padding:24px 22px;
  border-radius:var(--r);
  background:var(--paper);
  box-shadow:var(--e2);
}

.hg-cols dl{margin:0}

.hg-cols dt{
  font-family:var(--font-d);
  font-size:14px;
  letter-spacing:.06em;
  color:var(--ink-3);
  margin-bottom:8px;
}

.hg-cols dd{margin:0}

.hg-cols dd a{
  display:inline-flex;
  align-items:center;
  min-height:40px;
  padding:4px 0;
  font-size:16px;
  text-decoration:none;
  color:var(--ink-2);
}

.hg-cols dd a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}

.hg-desc{
  font-size:16px;
  line-height:1.7;
  color:var(--ink-2);
  margin-bottom:8px;
}

.hg-copy{
  text-align:center;
  padding:26px 10px 8px;
  font-size:14px;
  color:var(--ink-3);
}

.hg-copy-note{
  margin-top:8px;
  line-height:1.7;
  color:var(--ink-3);
  max-width:56ch;
  margin-left:auto;
  margin-right:auto;
}

/* ---------- 底部固定导航 ---------- */
.hg-dock{
  position:fixed;
  left:16px;
  right:16px;
  bottom:14px;
  z-index:60;
  max-width:760px;
  margin:0 auto;
  padding:12px 14px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px 10px;
  border-radius:var(--r);
  background:rgba(255,255,255,.9);
  border:1px solid var(--line);
  box-shadow:var(--e4);
  backdrop-filter:blur(16px) saturate(1.15);
}

.hg-dock-head{
  flex:1 0 100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding-bottom:2px;
}

.hg-dock-label{
  flex:0 0 auto;
  font-family:var(--font-d);
  font-size:14px;
  letter-spacing:.1em;
  color:var(--ink-3);
}

.hg-dock-list{
  flex:1 1 220px;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  list-style:none;
  margin:0;
  padding:0;
}

.hg-dock-list a{
  display:inline-flex;
  align-items:center;
  min-height:40px;
  padding:8px 13px;
  border-radius:var(--r-sm);
  font-size:16px;
  line-height:1.5;
  text-decoration:none;
  color:var(--ink);
  background:var(--paper-2);
  border:1px solid transparent;
  transition:transform .16s ease, box-shadow .16s ease, background-color .16s ease, opacity .16s ease;
}

.hg-dock-list a:hover{
  background:var(--paper);
  border-color:var(--line);
  box-shadow:var(--e2);
  transform:translateY(-2px);
}

.hg-dock-list a.is-active{
  background:var(--ink);
  color:#fff;
  border-color:var(--ink);
  box-shadow:var(--e3);
}

.hg-dock-list a.is-dim{opacity:.36}

.hg-search{
  flex:1 0 100%;
  display:flex;
  gap:8px;
  align-items:center;
}

.hg-search input{
  flex:1 1 auto;
  min-width:0;
  min-height:44px;
  padding:0 14px;
  font-family:inherit;
  font-size:16px;
  color:var(--ink);
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  box-shadow:inset 0 1px 2px rgba(31,31,31,.04);
}

.hg-search input::placeholder{color:var(--ink-3)}

.hg-search button{
  flex:0 0 auto;
  min-height:44px;
  padding:0 18px;
  font-family:inherit;
  font-size:16px;
  font-weight:500;
  color:#fff;
  background:var(--ink);
  border:1px solid var(--ink);
  border-radius:var(--r-sm);
  cursor:pointer;
  transition:transform .16s ease, box-shadow .16s ease;
}

.hg-search button:hover{transform:translateY(-1px);box-shadow:var(--e2)}

/* ---------- 入场动画 ---------- */
@keyframes hg-rise{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:none}
}

.hg-toc li,
.hg-dock-list li{
  animation:hg-rise .5s cubic-bezier(.2,.7,.3,1) both;
}

.hg-toc li:nth-child(2),
.hg-dock-list li:nth-child(2){animation-delay:.05s}

.hg-toc li:nth-child(3),
.hg-dock-list li:nth-child(3){animation-delay:.1s}

.hg-toc li:nth-child(4),
.hg-dock-list li:nth-child(4){animation-delay:.15s}

.hg-toc li:nth-child(5),
.hg-dock-list li:nth-child(5){animation-delay:.2s}

.hg-toc li:nth-child(6),
.hg-dock-list li:nth-child(6){animation-delay:.25s}

.hg-toc li:nth-child(7),
.hg-dock-list li:nth-child(7){animation-delay:.3s}

/* ---------- 响应式 ---------- */
@media (max-width:900px){
  .wrap{
    grid-template-columns:minmax(0,1fr);
    gap:22px;
  }

  .hg-aside{
    grid-column:1;
    position:static;
    order:0;
  }

  .hg-content{grid-column:1}

  .hg-hero{
    grid-template-columns:minmax(0,1fr);
    justify-items:end;
    gap:20px;
    min-height:64vh;
    padding-top:22px;
  }

  .hg-hero-art{width:132px}

  .hg-article > section{padding:22px 18px;scroll-margin-bottom:340px}

  .hg-app{padding-bottom:330px}

  .hg-cols{padding:20px 16px;gap:18px}
}

@media (max-width:560px){
  .hg-dock{left:10px;right:10px;bottom:10px;padding:10px 11px;gap:7px 8px}

  .hg-dock-list{flex:1 1 100%}

  .hg-dock-label{display:none}

  .hg-dock-list a{padding:8px 11px;font-size:16px}

  .hg-hero-copy h1{letter-spacing:-.03em}

  .hg-top-note{font-size:13px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}

  *,
  *::before,
  *::after{
    animation-duration:.001s !important;
    animation-delay:0s !important;
    transition-duration:.001s !important;
  }
}

button[aria-expanded]{min-width:44px;min-height:44px}