.prose {
  max-width: 44rem;
}

.prose h2 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 1rem;
  margin-top: 2rem;
}

.prose h3 {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  margin-top: 1.5rem;
}

.prose p {
  color: var(--color-text-secondary);
  margin-bottom: 1rem;
  line-height: 1.7;
}

.prose strong {
  color: var(--color-text-primary);
}

.prose ul, .prose ol {
  color: var(--color-text-secondary);
  margin-bottom: 1rem;
  padding-inline-start: 1.25rem;
  line-height: 1.7;
}

.prose li {
  margin-bottom: 0.375rem;
}

.prose a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.prose blockquote {
  border-inline-start: 3px solid var(--color-primary);
  padding-inline-start: 1rem;
  margin: 1rem 0;
  font-style: italic;
  color: var(--color-text-secondary);
}

.prose blockquote cite {
  display: block;
  font-style: normal;
  font-size: 0.875rem;
  color: var(--color-text-tertiary);
  margin-top: 0.5rem;
}

.prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  font-size: 0.9375rem;
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.prose th,
.prose td {
  padding: 0.625rem 0.875rem;
  text-align: start;
  border-bottom: 1px solid var(--color-border);
}

.prose th {
  font-weight: 600;
  color: var(--color-text-primary);
  background: var(--color-surface);
}

.prose td {
  color: var(--color-text-secondary);
}

.code-snippet {
  background: var(--color-code-bg);
  color: var(--color-code-text);
  border-radius: var(--radius-md);
  padding: 0.75rem;
  margin-bottom: 1rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  font-family: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, monospace;
  font-size: 0.75rem;
  line-height: 1.6;
  tab-size: 4;
}

.code-snippet code {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  background: none;
  white-space: pre;
}

.prose .inline-code {
  background: var(--color-surface-alt);
  padding: 0.125rem 0.375rem;
  border-radius: 4px;
  font-family: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, monospace;
  font-size: 0.875em;
  color: var(--color-accent);
}

.prose .highlight-box {
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1rem;
  margin: 1.5rem 0;
}

.prose .highlight-box h4 {
  font-size: 0.9375rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: var(--color-primary);
}

.prose .highlight-box p,
.prose .highlight-box ul,
.prose .highlight-box ol {
  margin-bottom: 0;
}

.prose .footnote {
  font-size: 0.8125rem;
  color: var(--color-text-tertiary);
  border-top: 1px solid var(--color-border);
  padding-top: 0.75rem;
  margin-top: 2rem;
}

.callout {
  border-radius: var(--radius-md);
  padding: 1rem 1.25rem;
  margin: 1.5rem 0;
  border-inline-start: 4px solid;
}

.callout-warning {
  background: var(--color-warning-light);
  border-color: var(--color-warning);
}

.callout-danger {
  background: var(--color-danger-light);
  border-color: var(--color-error);
}

.callout-tip {
  background: var(--color-primary-light);
  border-color: var(--color-primary);
}

.callout-success {
  background: var(--color-success-light);
  border-color: var(--color-success);
}

.callout-title {
  font-weight: 700;
  font-size: 0.9375rem;
  margin-bottom: 0.375rem;
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.callout-warning .callout-title { color: var(--color-warning); }
.callout-danger .callout-title { color: var(--color-error); }
.callout-tip .callout-title { color: var(--color-primary); }
.callout-success .callout-title { color: var(--color-success); }

.callout p {
  font-size: 0.9375rem;
  line-height: 1.6;
  margin: 0;
  color: var(--color-text-secondary);
}

.callout p + p {
  margin-top: 0.5rem;
}

.wechat-inline {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--color-primary);
  font-weight: 600;
  border-bottom: 1px dashed var(--color-primary);
  cursor: help;
}

.wechat-inline:hover {
  color: var(--color-primary-dark);
}

.timeline {
  list-style: none;
}

.timeline-item {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.25rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--color-border);
}

.timeline-item:last-child {
  border-bottom: none;
}

.timeline-item dt {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-primary);
}

.timeline-item dd {
  font-size: 0.9375rem;
  color: var(--color-text-secondary);
  line-height: 1.6;
}

.definition-list dt {
  font-weight: 700;
  color: var(--color-text-primary);
  margin-top: 1rem;
  font-size: 0.9375rem;
}

.definition-list dd {
  color: var(--color-text-secondary);
  font-size: 0.9375rem;
  line-height: 1.6;
  margin-inline-start: 1.5rem;
  margin-bottom: 0.5rem;
}

@media (min-width: 48rem) {
  .prose h2 {
    font-size: 1.5rem;
  }

  .prose h3 {
    font-size: 1.125rem;
  }

  .prose ul,
  .prose ol {
    padding-inline-start: 1.5rem;
  }

  .prose blockquote {
    padding-inline-start: 1.25rem;
    margin: 1.5rem 0;
  }

  .prose table {
    display: table;
    overflow-x: visible;
  }

  .prose .code-snippet {
    font-size: 0.8125rem;
    padding: 1rem 1.25rem;
  }

  .prose .highlight-box {
    padding: 1.25rem 1.5rem;
  }

  .callout {
    padding: 1.25rem 1.5rem;
  }

  .timeline-item {
    grid-template-columns: 8rem 1fr;
    gap: 1rem;
  }

  .timeline-item dt {
    font-size: 0.875rem;
  }
}

.book-hero{padding-top:5rem;padding-bottom:2rem;background:var(--color-surface);border-bottom:1px solid var(--color-border)}
.book-hero .container{max-width:44rem}
.book-meta{display:flex;flex-wrap:wrap;gap:0.5rem;margin-bottom:1rem}
.book-meta-item{font-size:0.8125rem;font-weight:600;padding:0.1875rem 0.625rem;border-radius:var(--radius-full);background:var(--color-warning-light);color:var(--color-reading-text)}
.book-desc{font-size:1rem;color:var(--color-text-secondary);line-height:1.7;margin-bottom:1.5rem}
.formula-box{background:var(--color-primary-light);border:1px solid var(--color-primary);border-radius:var(--radius-lg);padding:1.25rem;text-align:center;margin-bottom:1.5rem}
.formula-label{font-size:0.8125rem;font-weight:600;color:var(--color-primary);margin-bottom:0.5rem}
.formula{font-size:1.25rem;font-weight:800;color:var(--color-text-primary);letter-spacing:0.02em}
.formula var{font-style:normal;color:var(--color-primary)}
.chapter-grid{display:grid;gap:1rem;counter-reset:chapter}
.chapter-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:1rem 1.25rem;transition:transform var(--transition),box-shadow var(--transition);display:grid;grid-template-columns:auto 1fr;gap:0.75rem;align-items:start}
.chapter-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.chapter-num{width:2.25rem;height:2.25rem;border-radius:var(--radius-full);background:var(--color-primary);color:var(--color-on-primary);display:flex;align-items:center;justify-content:center;font-size:0.875rem;font-weight:700;flex-shrink:0}
.chapter-body h3{font-size:1rem;font-weight:700;margin-bottom:0.25rem}
.chapter-body h3 a{color:var(--color-text-primary)}
.chapter-body h3 a:hover{color:var(--color-primary)}
.chapter-question{font-size:0.8125rem;color:var(--color-primary);font-weight:500;margin-bottom:0.25rem}
.chapter-desc{font-size:0.875rem;color:var(--color-text-secondary);line-height:1.5}
.checklist{list-style:none;padding:0;margin:0}
.checklist li{padding:0.375rem 0 0.375rem 1.5rem;position:relative;font-size:0.9375rem;color:var(--color-text-secondary);line-height:1.6}
.checklist li::before{content:"";position:absolute;left:0;top:0.75rem;width:0.75rem;height:0.75rem;border:2px solid var(--color-border);border-radius:3px}

@media(min-width:48rem){
  .book-hero{padding-top:6rem;padding-bottom:2.5rem}
  .book-hero h1{font-size:clamp(1.75rem,1.3rem + 2.5vw,2.75rem)}
  .formula{font-size:1.5rem}
  .chapter-grid{grid-template-columns:repeat(2,1fr)}
  .chapter-card{padding:1.25rem 1.5rem}
}

@media(min-width:64rem){
  .chapter-grid{grid-template-columns:repeat(3,1fr)}
}
