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

:root{
  --ink:#000000;
  --paper:#ffffff;
  --mute:#5c5c5c;
  --soft:#f3f3f3;
  --u:8px;
  --shadow:0 12px 34px rgba(0,0,0,.14);
  --ring:0 0 0 2px #fff, 0 0 0 4px #000;
}

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

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

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Figtree","Noto Sans",Helvetica,Arial,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  font-size:17px;
  line-height:1.62;
  font-weight:400;
  padding-bottom:110px;
  -webkit-font-smoothing:antialiased;
}

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

a{color:inherit}

h1,h2,h3,h4{
  margin:0;
  font-weight:700;
  letter-spacing:-.03em;
  line-height:1.06;
}

p{margin:0 0 1em}

ul,ol{margin:0 0 1em;padding-left:1.2em}

li{margin:.28em 0}

::-moz-selection{background:#000;color:#fff}
::selection{background:#000;color:#fff}

:focus-visible{outline:2px solid #000;outline-offset:3px}

/* ---------- 底部导航条 ---------- */
.dock{
  position:fixed;
  left:0;right:0;bottom:0;
  z-index:60;
  background:#fff;
  border-top:1px solid #000;
}

.dock__nav{
  max-width:1180px;
  margin:0 auto;
  padding:10px 24px;
  display:grid;
  grid-template-columns:1fr auto 1fr auto;
  align-items:center;
  gap:10px;
}

.dock__brand{grid-column:2;grid-row:1;display:flex;justify-content:center}

.dock__brand a{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:40px;
  padding:0 18px;
  font-weight:700;
  font-size:1.02rem;
  letter-spacing:-.02em;
  text-decoration:none;
  white-space:nowrap;
}

.dock__list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  gap:8px;
  flex-wrap:nowrap;
}

.dock__list--l{grid-column:1;grid-row:1;justify-content:flex-end}
.dock__list--r{grid-column:3;grid-row:1;justify-content:flex-start}

.dock__list li{margin:0;display:flex}

.dock__list a{
  display:flex;
  align-items:center;
  min-height:40px;
  padding:0 14px;
  border:1px solid #000;
  border-radius:999px;
  font-size:16px;
  line-height:1.2;
  text-decoration:none;
  white-space:nowrap;
  background:#fff;
  transition:background .18s ease,color .18s ease,transform .18s ease;
}

.dock__list a:hover,
.dock__list a:focus-visible{
  background:#000;
  color:#fff;
  transform:translateY(-2px);
}

.dock__cta{
  grid-column:4;grid-row:1;
  display:flex;
  align-items:center;
  min-height:44px;
  padding:0 22px;
  border-radius:999px;
  background:#000;
  color:#fff;
  font-weight:600;
  font-size:16px;
  text-decoration:none;
  white-space:nowrap;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
}

.dock__cta:hover,
.dock__cta:focus-visible{
  transform:translateY(-2px);
  box-shadow:var(--shadow);
}

/* ---------- 主容器 ---------- */
main{padding-top:calc(var(--u) * 4)}

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

/* ---------- 头图 ---------- */
.hero{
  position:relative;
  min-height:62vh;
  display:grid;
  align-content:end;
  padding:calc(var(--u) * 6) 0 calc(var(--u) * 5);
  overflow:hidden;
}

.hero__media{
  position:absolute;
  inset:0 0 0 44%;
  z-index:0;
  clip-path:polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 96px));
}

.hero__media img{
  width:100%;
  height:100%;
  object-fit:cover;
  filter:grayscale(1) contrast(1.1);
}

.hero__text{
  position:relative;
  z-index:1;
  max-width:54%;
}

.hero h1{
  font-size:clamp(2.2rem,5.6vw,4.4rem);
  letter-spacing:-.045em;
  line-height:1.02;
  margin-bottom:calc(var(--u) * 2);
}

.hero__lede{
  max-width:36ch;
  margin:0;
  color:#111;
  font-weight:400;
  font-size:1.02rem;
}

/* ---------- 正文区块 ---------- */
div > section{
  padding:calc(var(--u) * 7) 0;
  border-top:1px solid #000;
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:16px;
  scroll-margin-top:24px;
}

div > section > *{
  grid-column:1 / 10;
  min-width:0;
}

div > section > h2,
div > section > h3{
  grid-column:1 / 12;
}

div > section > h2{
  font-size:clamp(1.55rem,3.2vw,2.5rem);
  margin-bottom:calc(var(--u));
}

div > section > h3{
  font-size:clamp(1.2rem,2.2vw,1.55rem);
  margin-top:calc(var(--u) * 2);
}

div > section > p{
  font-size:1.03rem;
  max-width:64ch;
}

div > section > ul,
div > section > ol{
  max-width:60ch;
}

div > section > blockquote{
  margin:0;
  padding-left:20px;
  border-left:3px solid #000;
  font-weight:500;
}

div > section img,
div > section figure{
  border-radius:10px;
}

div > section figure{margin:0}
div > section figure figcaption{font-size:.95rem;color:var(--mute);margin-top:.5em}

div > section a{
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-thickness:1px;
}

div > section a:hover{background:#000;color:#fff;text-decoration:none}

/* 眉题 */
small{
  display:block;
  grid-column:1 / 13;
  font-size:.78rem;
  font-weight:500;
  letter-spacing:.22em;
  color:var(--mute);
  margin-bottom:calc(var(--u) * .75);
}

small + h2,
small + h3{margin-top:0}

/* 滚动显现 */
.js div > section{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .55s ease,transform .55s ease;
}

.js div > section.is-in{
  opacity:1;
  transform:none;
}

/* ---------- 页脚 ---------- */
.foot{
  max-width:1180px;
  margin:calc(var(--u) * 10) auto 0;
  padding:calc(var(--u) * 5) 24px 24px;
  border-top:2px solid #000;
}

.foot__mark{
  font-size:clamp(2.6rem,11vw,7.5rem);
  font-weight:700;
  letter-spacing:-.05em;
  line-height:.86;
  word-break:keep-all;
  margin-bottom:calc(var(--u) * 5);
}

.foot__cols{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
  padding-bottom:calc(var(--u) * 4);
}

.foot__addr{
  font-style:normal;
  display:flex;
  flex-direction:column;
  gap:6px;
}

.foot__name{font-weight:700;font-size:1.05rem}
.foot__host{font-size:1rem;color:var(--mute);word-break:break-all}

.foot__col small{grid-column:auto;margin-bottom:6px}
.foot__col h2{font-size:1.05rem;letter-spacing:.01em;margin-bottom:12px}

.foot__list{list-style:none;margin:0;padding:0}
.foot__list li{margin:0;display:flex}

.foot__list a{
  display:flex;
  align-items:center;
  min-height:40px;
  text-decoration:none;
  font-size:1rem;
  border-bottom:1px solid transparent;
}

.foot__list a:hover,
.foot__list a:focus-visible{border-bottom-color:#000}

.foot__top{margin:0}
.foot__top a{
  display:inline-flex;
  align-items:center;
  min-height:40px;
  padding:0 16px;
  border:1px solid #000;
  border-radius:999px;
  text-decoration:none;
  font-size:1rem;
  transition:background .18s ease,color .18s ease;
}
.foot__top a:hover{background:#000;color:#fff}

.foot__base{
  border-top:1px solid #000;
  padding-top:16px;
  font-size:1rem;
  color:#111;
}

/* ---------- 中屏 ---------- */
@media (max-width:1180px){
  .dock__list a{padding:0 10px;font-size:16px}
  .dock__cta{padding:0 16px}
  .dock__brand a{padding:0 12px}
}

/* ---------- 移动端 ---------- */
@media (max-width:899px){
  body{padding-bottom:172px}

  main{padding-top:calc(var(--u) * 2)}

  .sheet,.foot{padding-left:16px;padding-right:16px}

  .dock__nav{
    grid-template-columns:repeat(4,1fr);
    gap:6px;
    padding:8px 10px 10px;
  }

  .dock__brand{grid-column:1 / 4;grid-row:1}
  .dock__brand a{width:100%;padding:0 8px}

  .dock__cta{
    grid-column:4 / 5;
    grid-row:1;
    justify-self:end;
    min-height:40px;
    padding:0 14px;
  }

  .dock__list{display:contents}

  .dock__list li{display:block;margin:0}

  .dock__list a{
    justify-content:center;
    width:100%;
    min-height:40px;
    padding:0 4px;
    font-size:16px;
    text-align:center;
  }

  .hero{
    min-height:64vh;
    padding:calc(var(--u) * 20) 0 calc(var(--u) * 5);
  }

  .hero__media{
    inset:0;
    clip-path:polygon(0 0, 100% 0, 100% calc(100% - 52px), 0 100%);
  }

  .hero__text{
    max-width:none;
    background:#fff;
    border-radius:10px;
    padding:18px 16px;
    box-shadow:var(--shadow);
  }

  .hero h1{letter-spacing:-.04em}

  div > section{
    padding:calc(var(--u) * 5) 0;
  }

  div > section > *,
  div > section > h2,
  div > section > h3{
    grid-column:1 / -1;
  }

  small{grid-column:1 / -1}

  .foot{margin-top:calc(var(--u) * 7)}

  .foot__mark{margin-bottom:calc(var(--u) * 3)}

  .foot__cols{grid-template-columns:1fr 1fr;gap:20px}
}

@media (max-width:420px){
  .foot__cols{grid-template-columns:1fr}
  .foot__col--end{order:-1}
}
</｜DSML｜ parameter>
</｜DSML｜ invoke>
</｜DSML｜ calls>

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