* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: #0d0d0d;
  color: #f2eee6;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* 顶部导航 */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px;
  background: linear-gradient(rgba(13,13,13,.9), rgba(13,13,13,0));
  pointer-events: none;
}
.nav-brand {
  font-size: 12px; letter-spacing: .16em; text-transform: uppercase; opacity: .65;
}
.nav-page {
  font-size: 12px; letter-spacing: .08em; font-variant-numeric: tabular-nums; opacity: .8;
}

/* 页面容器 */
#pages { padding: 64px 12px 24px; }

.page {
  max-width: 720px; margin: 0 auto 28px;
}
.page img {
  display: block; width: 100%; height: auto;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 8px 28px rgba(0,0,0,.5);
}
.page .page-num {
  margin-top: 12px; text-align: center; font-size: 11px;
  letter-spacing: .18em; opacity: .35; font-variant-numeric: tabular-nums;
}

footer { text-align: center; padding: 32px 20px 72px; font-size: 12px; letter-spacing: .16em; opacity: .35; }

@media (min-width: 768px) {
  #pages { padding-top: 76px; }
  .page { margin-bottom: 40px; }
}