@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;700;900&display=swap');

:root{
  --ink:#1f1f1f;
  --paper:#ffffff;
  --mist:#f5f5f5;
  --soft:#ececec;
  --dim:#63636a;
  --r:18px;
  --dock:92px;
}

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

html{scroll-behavior:smooth}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Outfit","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  font-size:17px;
  line-height:1.8;
  -webkit-font-smoothing:antialiased;
  padding-bottom:calc(var(--dock) + 44px);
}

img{max-width:100%;height:auto}
a{color:inherit}

.shell{max-width:1180px;margin:0 auto;padding:24px 20px 0}

.stage{
  display:grid;
  grid-template-columns:236px minmax(0,1fr);
  gap:20px;
  align-items:start;
}

/* ---------- 左侧目录 ---------- */
.side{
  position:sticky;
  top:24px;
  display:flex;
  flex-direction:column;
  gap:14px;
}

.side-card{
  background:var(--mist);
  border-radius:var(--r);
  padding:16px 14px;
}

.side-title{
  margin:0 0 10px;
  font-size:16px;
  font-weight:900;
  line-height:1.3;
  letter-spacing:.02em;
}

.side-title > span{display:inline-block}

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

.side-toc li a{
  display:flex;
  align-items:center;
  min-height:40px;
  padding:8px 12px;
  border-radius:999px;
  color:var(--ink);
  text-decoration:none;
  font-size:16px;
  font-weight:500;
  transition:background .18s ease,transform .18s ease;
}

.side-toc li a:hover{
  background:#e3e3e3;
  transform:translateX(2px);
}

.side-up{
  display:inline-flex;
  align-items:center;
  min-height:40px;
  padding:0 14px;
  border-radius:999px;
  background:#e3e3e3;
  color:var(--ink);
  text-decoration:none;
  font-size:16px;
  font-weight:700;
  transition:background .18s ease;
}

.side-up:hover{background:var(--ink);color:#fff}

/* ---------- 主内容 ---------- */
.sheet{min-width:0}

.hero{
  position:relative;
  overflow:hidden;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:28px;
  align-items:center;
  min-height:70vh;
  padding:48px 40px;
  border-radius:24px;
  background:var(--mist);
  margin-bottom:20px;
}

.hero-ghost{
  position:absolute;
  right:-10px;
  bottom:-8px;
  font-size:clamp(64px,14vw,176px);
  font-weight:900;
  line-height:.78;
  letter-spacing:-.05em;
  color:rgba(31,31,31,.06);
  white-space:nowrap;
  pointer-events:none;
  user-select:none;
}

.hero-main{position:relative;z-index:1}

.hero-title{
  margin:0 0 18px;
  font-size:clamp(34px,6vw,66px);
  font-weight:900;
  line-height:1.05;
  letter-spacing:-.025em;
}

.hero-desc{
  max-width:36ch;
  margin:0 0 26px;
  color:var(--dim);
  font-size:17.5px;
  line-height:1.7;
}

.hero-go{
  display:inline-flex;
  align-items:center;
  min-height:46px;
  padding:0 26px;
  border-radius:999px;
  background:var(--ink);
  color:#fff;
  text-decoration:none;
  font-size:16px;
  font-weight:700;
  transition:transform .2s ease;
}

.hero-go:hover{transform:translateY(-2px)}

.hero-art{
  position:relative;
  z-index:1;
  flex:none;
  width:120px;
  height:120px;
  border-radius:24px;
  background:var(--ink);
  color:#fff;
  display:grid;
  place-items:center;
  overflow:hidden;
}

.hero-glyph{width:52px;height:52px}
.hero-img{width:100%;height:100%;object-fit:cover;border-radius:24px}

.sheet > article{
  background:var(--mist);
  border-radius:var(--r);
  padding:32px 32px 26px;
  margin-bottom:18px;
  scroll-margin-top:24px;
  scroll-margin-bottom:var(--dock);
}

.sheet > article:nth-of-type(3n+1){border-radius:24px 24px 24px 6px}
.sheet > article:nth-of-type(3n+2){border-radius:24px 6px 24px 24px}
.sheet > article:nth-of-type(3n){border-radius:6px 24px 24px 24px}

.sheet > article h2{
  margin:0 0 14px;
  font-size:clamp(23px,3vw,31px);
  font-weight:900;
  line-height:1.22;
  letter-spacing:-.015em;
}

.sheet > article h2 > span{display:inline-block}

.sheet > article h3{
  margin:1.5em 0 .6em;
  font-size:20px;
  font-weight:700;
  line-height:1.35;
}

.sheet > article p{margin:0 0 1em;color:#333336}
.sheet > article ul,
.sheet > article ol{margin:0 0 1em;padding-left:1.35em}
.sheet > article li{margin:.4em 0;color:#333336}
.sheet > article a{color:var(--ink);text-underline-offset:3px}
.sheet > article img{border-radius:14px;margin:.4em 0}

/* ---------- 页脚 ---------- */
.foot{
  max-width:1180px;
  margin:34px auto 0;
  padding:26px 20px 0;
  border-top:1px solid var(--soft);
}

.foot-main{
  display:grid;
  grid-template-columns:1.5fr 1fr;
  gap:6px 28px;
  margin:0 0 22px;
}

.foot-brand{grid-column:1;font-size:20px;font-weight:900;letter-spacing:.01em}
.foot-note{grid-column:1;color:var(--dim);font-size:16px;margin:0;line-height:1.7}

.foot-jump{
  grid-column:2;
  grid-row:1 / span 2;
  display:flex;
  flex-wrap:wrap;
  gap:0 16px;
  align-content:start;
}

.foot-jump a{
  display:inline-flex;
  align-items:center;
  min-height:40px;
  color:var(--ink);
  text-decoration:none;
  font-size:16px;
  border-bottom:1px solid transparent;
  transition:border-color .18s ease;
}

.foot-jump a:hover{border-color:var(--ink)}

.foot-sub{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  margin:0 0 18px;
}

.foot-input{
  flex:1 1 200px;
  min-width:0;
  height:46px;
  padding:0 18px;
  border:0;
  border-radius:999px;
  background:var(--mist);
  color:var(--ink);
  font-family:inherit;
  font-size:16px;
  outline:none;
}

.foot-input:focus{background:var(--soft)}

.foot-btn{
  height:46px;
  padding:0 26px;
  border:0;
  border-radius:999px;
  background:var(--ink);
  color:#fff;
  font-family:inherit;
  font-size:16px;
  font-weight:700;
  cursor:pointer;
  transition:transform .2s ease;
}

.foot-btn:hover{transform:translateY(-2px)}

.foot-legal{
  display:block;
  text-align:center;
  padding:8px 0 6px;
  color:var(--dim);
  font-size:16px;
}

/* ---------- 底部固定条 ---------- */
.dock{
  position:fixed;
  left:16px;
  right:16px;
  bottom:16px;
  z-index:30;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:12px;
  max-width:1180px;
  margin:0 auto;
  padding:10px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.94);
  box-shadow:0 12px 34px rgba(0,0,0,.14);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}

.dock-logo{
  flex:none;
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--ink);
  color:#fff;
  font-size:17px;
  font-weight:900;
  text-decoration:none;
  transition:transform .2s ease;
}

.dock-logo:hover{transform:scale(1.06)}

.dock-list{
  list-style:none;
  display:flex;
  align-items:center;
  gap:6px;
  margin:0;
  padding:2px;
  min-width:0;
  overflow-x:auto;
  scrollbar-width:none;
}

.dock-list::-webkit-scrollbar{display:none}
.dock-list li{flex:none}

.dock-list a{
  display:flex;
  align-items:center;
  min-height:44px;
  padding:0 16px;
  border-radius:999px;
  color:var(--ink);
  text-decoration:none;
  font-size:16px;
  font-weight:500;
  white-space:nowrap;
  transition:background .18s ease,color .18s ease;
}

.dock-list a:hover{background:var(--ink);color:#fff}

.dock-search{position:relative;flex:none}

.dock-search input{
  width:152px;
  height:42px;
  padding:0 16px;
  border:0;
  border-radius:999px;
  background:var(--soft);
  color:var(--ink);
  font-family:inherit;
  font-size:16px;
  outline:none;
  transition:background .18s ease;
}

.dock-search input:focus{background:#e0e0e0}

.dock-hits{
  position:absolute;
  right:0;
  bottom:calc(100% + 10px);
  width:262px;
  padding:8px;
  border-radius:16px;
  background:#fff;
  box-shadow:0 14px 36px rgba(0,0,0,.18);
  display:none;
}

.dock-hits.on{display:block}

.dock-hit{
  display:flex;
  align-items:center;
  min-height:40px;
  padding:6px 12px;
  border-radius:10px;
  color:var(--ink);
  text-decoration:none;
  font-size:16px;
  line-height:1.4;
}

.dock-hit:hover{background:var(--mist)}

/* ---------- 断点 ---------- */
@media (max-width:900px){
  .stage{grid-template-columns:minmax(0,1fr)}
  .side{
    order:2;
    position:static;
    flex-direction:row;
    flex-wrap:wrap;
  }
  .side-card{flex:1 1 240px}
}

@media (max-width:760px){
  body{font-size:16px}
  .shell{padding:16px 14px 0}
  .hero{
    grid-template-columns:minmax(0,1fr);
    min-height:0;
    padding:26px 22px 30px;
    gap:16px;
  }
  .hero-art{order:-1;width:64px;height:64px;border-radius:18px}
  .hero-glyph{width:32px;height:32px}
  .hero-title{font-size:clamp(30px,9vw,44px)}
  .hero-desc{font-size:16px}
  .hero-ghost{font-size:clamp(52px,20vw,110px)}
  .sheet > article{padding:22px 18px 18px}
  .foot{padding:24px 14px 0}
  .foot-main{grid-template-columns:1fr}
  .foot-jump{grid-column:1;grid-row:auto}
  .foot-note{grid-column:1}
  .foot-sub{gap:8px}
  .foot-btn{padding:0 22px}
  .dock{
    grid-template-columns:auto minmax(0,1fr);
    grid-template-areas:"list list" "logo search";
    border-radius:22px;
    padding:10px;
    left:12px;
    right:12px;
    bottom:12px;
  }
  .dock-list{grid-area:list}
  .dock-logo{grid-area:logo}
  .dock-search{grid-area:search;justify-self:stretch}
  .dock-search input{width:100%}
  .dock-hits{width:min(262px,78vw);right:0}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important;animation:none!important}
}

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