:root {
  color: #101416;
  background: #f7f7f3;
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
}
body { margin: 0; }
.book-layout {
  display: grid;
  grid-template-columns: 180px minmax(0, 760px);
  gap: clamp(24px, 5vw, 72px);
  justify-content: center;
  padding: clamp(20px, 5vw, 60px);
  line-height: 1.75;
}
.book-layout aside {
  align-self: start;
  border-inline-end: 1px solid #d5d9d5;
}
.book-layout aside a { display: block; padding: 5px 0; }
.book-layout a { color: #0b7465; text-underline-offset: 4px; }
.book-label { color: #0b7465; font-size: 0.875rem; }
.book-layout h1 { font-size: clamp(2rem, 5vw, 3rem); line-height: 1.3; margin: 0; }
.book-layout section, .chapter-list li { scroll-margin-top: 95px; }
.book-layout section { margin-block: 38px; }
.book-start { font-weight: 700; }
.chapter-list { padding: 0; list-style: none; }
.chapter-list li {
  display: grid;
  grid-template-columns: 2em minmax(0, 1fr) auto;
  gap: 8px;
  align-items: baseline;
  padding: 10px 0;
  border-top: 1px solid #d5d9d5;
}
.chapter-list li small, .chapter-list li span { color: #56625e; }
@media (max-width: 640px) {
  .book-layout { grid-template-columns: minmax(0, 1fr); }
  .book-layout aside {
    display: flex;
    flex-wrap: wrap;
    gap: 0 16px;
    border: 0;
    border-bottom: 1px solid #d5d9d5;
  }
}
.book-layout h1 {
  display: flex;
  align-items: center;
  gap: 12px;
}
.book-layout h1 img {
  flex: none;
  width: clamp(40px, 9vw, 56px);
  height: auto;
}