:root{
  --ink:#171f26;
  --ink-soft:#42505c;
  --blue:#c8e0f4;
  --pink:#f5e0e8;
  --surface:#eaf1f7;
  --surface-hi:#f4f8fb;
  --white:#ffffff;
  --shadow-out:-6px -6px 14px rgba(255,255,255,.95), 7px 7px 18px rgba(23,31,38,.14);
  --shadow-soft:-4px -4px 10px rgba(255,255,255,.9), 5px 5px 14px rgba(23,31,38,.10);
  --shadow-in:inset -3px -3px 7px rgba(255,255,255,.95), inset 3px 3px 8px rgba(23,31,38,.12);
  --r:16px;
  --r-lg:22px;
}

*{box-sizing:border-box}

html{
  scroll-behavior:smooth;
  scroll-padding-top:96px;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  padding-bottom:112px;
  font-family:'Nunito Sans','PingFang SC','Hiragino Sans GB','Microsoft YaHei',system-ui,sans-serif;
  font-size:17px;
  line-height:1.8;
  color:var(--ink);
  background-color:#edf3f9;
  background-image:
    radial-gradient(rgba(23,31,38,.065) 1px, transparent 1px),
    linear-gradient(158deg,#f6f9fc 0%,#e8f0f7 42%,#f8eff3 100%);
  background-size:22px 22px, 100% 100%;
  background-attachment:fixed, fixed;
}

img{max-width:100%;height:auto;display:block}

a{color:var(--ink)}

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

/* ---------- 底部固定条 ---------- */
.dock{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:60;
  padding:8px 12px calc(8px + env(safe-area-inset-bottom,0px));
  background:rgba(237,243,249,.9);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  box-shadow:0 -8px 22px rgba(23,31,38,.12);
  border-radius:22px 22px 0 0;
}

.dock nav{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:10px;
  max-width:1140px;
  margin:0 auto;
}

.side{
  display:flex;
  flex-wrap:wrap;
  gap:2px;
  margin:0;
  align-items:center;
}

.side-l{justify-content:flex-start}
.side-r{justify-content:flex-end}

.side a{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:6px 11px;
  font-size:15px;
  line-height:1.3;
  color:var(--ink-soft);
  text-decoration:none;
  border-radius:12px;
  transition:box-shadow .15s ease, transform .15s ease, color .15s ease;
}

.side a:hover{
  color:var(--ink);
  box-shadow:var(--shadow-soft);
  background:linear-gradient(145deg,var(--surface-hi),var(--surface));
}

.side a:active{transform:scale(.96); box-shadow:var(--shadow-in)}

.side a.contact{
  color:var(--ink);
  font-weight:600;
  background:linear-gradient(145deg,#f9eef2,#f0dde6);
  box-shadow:var(--shadow-soft);
  margin-left:4px;
}

.brand{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:44px;
  padding:6px 16px;
  border-radius:16px;
  text-decoration:none;
  color:var(--ink);
  font-family:'Varela Round','Nunito Sans',system-ui,sans-serif;
  font-size:16px;
  letter-spacing:.02em;
  background:linear-gradient(145deg,#dcecf9,#c8e0f4);
  box-shadow:var(--shadow-out);
  transition:transform .15s ease;
}

.brand:active{transform:scale(.96); box-shadow:var(--shadow-in)}

.brand .mark{
  font-size:13px;
  line-height:1;
  color:var(--ink);
  opacity:.65;
}

/* ---------- 主体骨架 ---------- */
.shell{
  display:grid;
  grid-template-columns:minmax(0,1fr) 300px;
  grid-template-areas:
    "hero hero"
    "prose rail";
  gap:26px;
  max-width:1140px;
  margin:0 auto;
  padding:26px 20px 40px;
}

/* ---------- 首屏 ---------- */
.hero{
  grid-area:hero;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  align-items:center;
  gap:28px;
  min-height:70vh;
  padding:38px 34px;
  border-radius:28px;
  background-color:var(--surface-hi);
  background-image:
    radial-gradient(rgba(23,31,38,.08) 1px, transparent 1px),
    linear-gradient(150deg,#f8fbfd 0%,#e6eff7 60%,#f7eef3 100%);
  background-size:16px 16px, 100% 100%;
  box-shadow:var(--shadow-out);
  overflow:hidden;
}

.hero-txt{text-align:center}

.hero h1{
  margin:0 0 14px;
  font-family:'Varela Round','Nunito Sans',system-ui,sans-serif;
  font-size:clamp(28px,4.4vw,44px);
  line-height:1.25;
  letter-spacing:-.01em;
  color:var(--ink);
}

.lede{
  margin:0 auto 22px;
  max-width:32em;
  font-size:17px;
  line-height:1.8;
  color:var(--ink-soft);
}

.hero-act{margin:0}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:10px 30px;
  border-radius:16px;
  font-family:'Varela Round','Nunito Sans',sans-serif;
  font-size:16px;
  text-decoration:none;
  color:var(--ink);
  background:linear-gradient(145deg,#fbeff4,#f2dfe8);
  box-shadow:var(--shadow-out);
  transition:transform .15s ease, box-shadow .15s ease;
}

.btn:hover{transform:translateY(-1px)}
.btn:active{transform:scale(.95); box-shadow:var(--shadow-in)}

.hero-art{
  border-radius:var(--r-lg);
  overflow:hidden;
  background:linear-gradient(145deg,#ffffff,#e3edf6);
  box-shadow:var(--shadow-out);
  padding:8px;
}

.hero-art img{
  width:100%;
  border-radius:var(--r);
  object-fit:cover;
  aspect-ratio:4/3;
}

.hero-art:empty{display:none}

/* ---------- 正文 ---------- */
.prose{grid-area:prose; min-width:0}

.paper{
  display:block;
  padding:30px 32px 40px;
  border-radius:var(--r-lg);
  background:linear-gradient(150deg,#fdfefe 0%,#f0f5fa 100%);
  box-shadow:var(--shadow-out);
}

.paper > div{
  padding:26px 0;
  scroll-margin-top:96px;
  border-bottom:1px solid rgba(23,31,38,.07);
}

.paper > div:last-child{border-bottom:0; padding-bottom:0}
.paper > div:first-child{padding-top:0}

.paper h2,
.paper h3{
  font-family:'Varela Round','Nunito Sans',sans-serif;
  line-height:1.4;
  color:var(--ink);
  letter-spacing:-.005em;
}

.paper h2{
  font-size:clamp(21px,2.6vw,26px);
  margin:0 0 12px;
}

.paper h3{
  font-size:19px;
  margin:22px 0 8px;
}

.paper h2 > span,
.paper h3 > span,
.rail-card h2 > span{
  position:relative;
  display:inline-block;
  padding-left:16px;
}

.paper h2 > span::before,
.paper h3 > span::before,
.rail-card h2 > span::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  width:8px;
  height:8px;
  margin-top:-4px;
  border-radius:50%;
  background:var(--pink);
  box-shadow:0 0 0 3px rgba(245,224,232,.65);
}

.paper p{margin:0 0 14px;color:var(--ink-soft)}

.paper a{
  color:var(--ink);
  text-decoration:none;
  border-bottom:2px solid var(--blue);
  transition:border-color .15s ease, background .15s ease;
}

.paper a:hover{background:rgba(200,224,244,.4); border-bottom-color:var(--ink)}

.paper strong{color:var(--ink)}

.paper ul,
.paper ol{
  margin:0 0 16px;
  padding-left:22px;
  color:var(--ink-soft);
}

.paper li{margin:0 0 8px}

.paper blockquote{
  margin:0 0 18px;
  padding:16px 20px;
  border-radius:var(--r);
  background:linear-gradient(145deg,#f7f2f5,#f0e6ec);
  box-shadow:var(--shadow-in);
}

.paper blockquote p:last-child{margin:0}

/* ---------- 右侧栏 ---------- */
.rail{
  grid-area:rail;
  display:flex;
  flex-direction:column;
  gap:16px;
  min-width:0;
}

.rail-card{
  padding:18px 18px 20px;
  border-radius:18px;
  background:linear-gradient(150deg,#fbfdfe,#eaf1f7);
  box-shadow:var(--shadow-soft);
}

.rail-card h2{
  margin:0 0 10px;
  font-family:'Varela Round','Nunito Sans',sans-serif;
  font-size:16px;
  letter-spacing:.02em;
  color:var(--ink);
}

.rail-card p{
  display:flex;
  flex-direction:column;
  gap:2px;
  margin:0;
}

.rail-card a{
  display:inline-flex;
  align-items:center;
  min-height:40px;
  padding:4px 10px;
  font-size:15px;
  color:var(--ink-soft);
  text-decoration:none;
  border-radius:12px;
  transition:box-shadow .15s ease, transform .15s ease, color .15s ease;
}

.rail-card a:hover{
  color:var(--ink);
  background:linear-gradient(145deg,#ffffff,var(--surface));
  box-shadow:var(--shadow-soft);
}

.rail-card a:active{transform:scale(.97); box-shadow:var(--shadow-in)}

/* ---------- 页脚 ---------- */
footer{
  max-width:1140px;
  margin:0 auto;
  padding:28px 20px 34px;
  text-align:center;
}

.foot-brand{
  margin:0 0 6px;
  font-family:'Varela Round','Nunito Sans',sans-serif;
  font-size:17px;
  letter-spacing:.03em;
}

.foot-brand a{text-decoration:none;color:var(--ink)}

.foot-links{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:4px;
  margin:0 0 14px;
}

.foot-links a{
  display:inline-flex;
  align-items:center;
  min-height:40px;
  padding:4px 12px;
  font-size:15px;
  color:var(--ink-soft);
  text-decoration:none;
  border-radius:12px;
  transition:box-shadow .15s ease, color .15s ease;
}

.foot-links a:hover{color:var(--ink); box-shadow:var(--shadow-soft)}

footer small{
  display:block;
  font-size:14px;
  line-height:1.7;
  color:var(--ink-soft);
}

.foot-note{margin-top:4px}
.foot-note a{display:inline-flex; align-items:center; min-height:40px; padding:0 12px; text-decoration:none; color:var(--ink-soft); border-radius:12px}
.foot-note a:hover{color:var(--ink); box-shadow:var(--shadow-soft)}

/* ---------- 断点 ---------- */
@media (max-width:900px){
  .shell{
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:
      "hero"
      "prose"
      "rail";
    padding:18px 14px 32px;
    gap:20px;
  }

  .rail{flex-direction:row; flex-wrap:wrap}
  .rail-card{flex:1 1 220px}

  .hero{
    grid-template-columns:1fr;
    min-height:0;
    padding:28px 18px;
    gap:18px;
  }

  .hero-art{order:2}
  .paper{padding:22px 18px 30px}
}

@media (max-width:720px){
  body{padding-bottom:150px; font-size:16px}

  .dock{border-radius:20px 20px 0 0; padding:8px 10px calc(8px + env(safe-area-inset-bottom,0px))}

  .dock nav{
    display:flex;
    flex-direction:column;
    gap:2px;
  }

  .brand{order:1; align-self:center; min-height:40px}
  .side{order:2; justify-content:center; width:100%; gap:0}
  .side a{min-height:40px; padding:4px 8px; font-size:14px}
  .side a.contact{margin-left:0}
  .contact{display:none}

  .paper h2{font-size:21px}
}

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

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