body {
  background: #fffbe6;
  color: #000;
  font-family: "Times New Roman", Times, serif;
  margin: 1.5em auto;
  padding: 0 1em;
  max-width: 1100px;
  line-height: 1.5;
}

.viewer-header {
  text-align: center;
  margin-bottom: 1em;
}
.viewer-header h1 { margin: 0; font-size: 2em; }
.viewer-header .meta { font-style: italic; }
.viewer-header a { color: #0000ee; }

hr { border: 0; border-top: 1px dashed #000; margin: 1em 0; }

.book-shell {
  display: flex;
  gap: 4px;
  justify-content: center;
  align-items: stretch;
  margin: 0 auto;
  max-width: 1000px;
  border: 2px dashed #000;
  padding: 8px;
  background: #fff;
}
.page { flex: 1 1 0; min-width: 0; display: flex; }
.page img { width: 100%; height: auto; display: block; }
.left-page { cursor: w-resize; }
.right-page { cursor: e-resize; }

.book-shell.single-page .left-page { display: none; }
.book-shell.single-page { justify-content: center; }
.book-shell.single-page .right-page { flex: 0 1 50%; cursor: pointer; }

.controls {
  text-align: center;
  margin-top: 1em;
  font-family: "Times New Roman", Times, serif;
  font-size: 1.1em;
}
.controls button {
  font-family: inherit;
  font-size: 1em;
  padding: 4px 14px;
  margin: 0 8px;
  min-width: 110px;
  background: #fffbe6;
  border: 1px solid #000;
  cursor: pointer;
}
.controls button:disabled { color: #999; border-color: #999; cursor: default; }
.page-info {
  display: inline-block;
  margin: 0 8px;
  width: 200px;
  text-align: center;
}

.viewer-footer { text-align: center; margin-top: 1.5em; font-size: 0.9em; }
.viewer-footer a { color: #0000ee; }

@media (max-width: 767px) {
  body { margin: 1em auto; padding: 0 0.5em; }
  .book-shell,
  .book-shell.single-page { padding: 4px; }
  .book-shell .left-page,
  .book-shell.single-page .left-page { display: none; }
  .book-shell .right-page,
  .book-shell.single-page .right-page {
    flex: 1 1 100%;
    cursor: pointer;
  }
  .controls button { min-width: 90px; padding: 4px 8px; }
  .page-info { width: 130px; font-size: 0.95em; }
}