:root{
  --deep:#08131d;
  --mid:#1e3446;
  --lift:#345063;
  --edge:#12212e;
  --ink:#c9dae5;
  --ink-dim:#7e95a5;
  --arc:#b8d0df;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--deep);
  color:var(--ink);
  font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:16px;
  line-height:1.85;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
a{color:var(--arc);text-decoration:none;border-bottom:1px solid rgba(184,208,223,.25);transition:border-color .3s,opacity .3s}
a:hover{border-bottom-color:var(--arc)}

/* 海面 */
.sea{
  position:fixed;inset:0;
  z-index:-1;
  background:
    radial-gradient(120% 90% at 50% 62%, var(--mid) 0%, transparent 62%),
    linear-gradient(180deg, var(--deep) 0%, var(--mid) 48%, var(--lift) 58%, var(--edge) 100%);
}
.sea svg{position:absolute;left:50%;bottom:-6vh;transform:translateX(-50%);width:150%;max-width:1600px;opacity:.5}
.sea::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(8,19,29,.55) 0%,transparent 28%,transparent 70%,rgba(8,19,29,.75) 100%);
}

header,main,footer{position:relative;z-index:1}
.wrap{width:100%;max-width:720px;margin:0 auto;padding:0 28px}

p{margin-bottom:1.1em;color:#b6c9d6}
p:last-child{margin-bottom:0}

/* 页脚 */
footer{
  flex:0 0 auto;
  padding:44px 0 52px;
  font-size:12.5px;
  line-height:2;
  color:#5f7889;
  letter-spacing:.04em;
  border-top:1px solid rgba(184,208,223,.07);
}
footer a{color:#738d9f;border-bottom-color:rgba(115,141,159,.3)}

@media (max-width:520px){
  .wrap{padding:0 22px}
  h1{letter-spacing:.26em;text-indent:.26em}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ---------- 首页 ---------- */
header{flex:0 0 auto;padding:clamp(90px,26vh,240px) 0 clamp(60px,10vh,110px)}
h1{
  font-size:clamp(30px,6vw,44px);
  font-weight:400;
  letter-spacing:.34em;
  text-indent:.34em;
  color:#e2eef6;
  margin-bottom:26px;
}
.sub{
  font-size:15px;
  color:var(--ink-dim);
  letter-spacing:.06em;
}
.rule{
  width:52px;height:1px;
  background:linear-gradient(90deg,var(--arc),transparent);
  margin:34px 0 0;
  opacity:.7;
}
main{flex:1 0 auto;padding-bottom:100px}
section{margin-bottom:clamp(64px,11vh,104px)}
h2{
  font-size:12px;
  font-weight:500;
  letter-spacing:.3em;
  color:var(--ink-dim);
  margin-bottom:26px;
  text-transform:uppercase;
}
.note{
  display:block;
  padding:20px 0;
  border-top:1px solid rgba(184,208,223,.09);
  color:inherit;
  border-bottom:none;
}
.note:last-of-type{border-bottom:1px solid rgba(184,208,223,.09)}
.note time{
  display:block;
  font-size:11.5px;
  letter-spacing:.16em;
  color:var(--ink-dim);
  margin-bottom:7px;
}
.note .t{
  font-size:17px;
  color:#dbe9f2;
  transition:color .3s;
}
.note:hover .t{color:#fff}
.note .d{
  font-size:14px;
  color:#8ea6b6;
  margin-top:5px;
  line-height:1.7;
}

/* ---------- 文章页 ---------- */
.article{flex:1 0 auto;padding:clamp(80px,16vh,150px) 0 90px}
.back{
  display:inline-block;
  font-size:12.5px;
  letter-spacing:.18em;
  color:var(--ink-dim);
  border-bottom:none;
  margin-bottom:44px;
}
.back:hover{color:var(--arc)}
.article h1{
  font-size:clamp(23px,4.4vw,31px);
  letter-spacing:.06em;
  text-indent:0;
  line-height:1.55;
  margin-bottom:18px;
  color:#e2eef6;
}
.meta{
  font-size:12px;
  letter-spacing:.18em;
  color:#6d8697;
  margin-bottom:44px;
}
.meta::after{
  content:"";
  display:block;
  width:40px;height:1px;
  background:linear-gradient(90deg,var(--arc),transparent);
  margin-top:26px;
  opacity:.6;
}
.article h2{
  font-size:14px;
  font-weight:500;
  letter-spacing:.14em;
  color:#a8c1d1;
  text-transform:none;
  margin:38px 0 14px;
}
.article ul{margin:0 0 1.1em 1.15em;color:#b6c9d6}
.article li{margin-bottom:.45em}
.article code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.9em;
  background:rgba(184,208,223,.08);
  padding:.12em .4em;
  border-radius:3px;
  color:#cfe0ea;
}
.article blockquote{
  border-left:2px solid rgba(184,208,223,.28);
  padding-left:18px;
  margin:22px 0;
  color:#9db4c4;
}
.article strong{color:#dbe9f2;font-weight:500}
.end{
  margin-top:56px;
  padding-top:26px;
  border-top:1px solid rgba(184,208,223,.09);
  font-size:13px;
  color:#6d8697;
}