:root {
  color-scheme: light;
  font-family: system-ui, sans-serif;
  color: #292820;
  background: #fff;
  --accent: #23566c;
  --border: #d8d3c7;
}
* { box-sizing: border-box; }
body { margin: 0; font-size: 16px; }
[hidden] { display: none; }
a { color: var(--accent); text-underline-offset: 0.2em; }
button, select { font: inherit; min-height: 44px; border: 1px solid var(--border); border-radius: 6px; background: white; color: inherit; }
button { min-width: 44px; padding: 8px 12px; cursor: pointer; }
button:disabled { cursor: default; opacity: 0.5; }
button:not(:disabled):hover { border-color: var(--accent); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.library { max-width: 48rem; margin: auto; padding: clamp(24px, 8vw, 80px) 24px; }
.library h1 { font: 400 32px Georgia, serif; margin: 0 0 32px; }
#books { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
#books a { display: block; width: 100%; min-height: 44px; text-align: left; border-bottom: 1px solid var(--border); padding: 16px 0; font: 400 24px Georgia, serif; color: var(--accent); text-decoration: none; overflow-wrap: anywhere; }
.reader { position: fixed; inset: 0; background: white; }
#viewer { width: calc(100% - 112px); max-width: 60rem; height: 100dvh; margin: auto; overflow: hidden; }
.page-button { position: fixed; top: 50%; transform: translateY(-50%); z-index: 10; width: 44px; height: 44px; padding: 9px; color: var(--accent); border-color: var(--accent); }
.page-button svg { display: block; }
.previous-page { inset-inline-start: max(6px, calc((100vw - 60rem) / 2 - 50px)); }
.next-page { inset-inline-end: max(6px, calc((100vw - 60rem) / 2 - 50px)); }
.reader[dir="rtl"] .page-button svg { transform: scaleX(-1); }
.menu-button { position: fixed; top: 12px; right: 12px; z-index: 10; display: grid; place-items: center; padding: 10px; }
#reader-menu { position: fixed; inset: 12px 12px auto auto; margin: 0; padding: 20px; width: min(360px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow-y: auto; border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 8px 32px #0002; }
#reader-menu::backdrop { background: #0002; }
.menu-heading { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 20px; }
.menu-heading h2 { flex: 1; font: 400 22px Georgia, serif; margin: 8px 0 0; overflow-wrap: anywhere; }
#close-menu { border: 0; font-size: 24px; }
.font-size-control { display: flex; align-items: center; gap: 8px; margin-bottom: 20px; }
.font-size-control span { flex: 1; }
#font-size { min-width: 52px; text-align: center; font-variant-numeric: tabular-nums; }
#font-family, #reading-format { display: block; width: 100%; margin: 8px 0 20px; padding: 8px; }
#contents { border-block: 1px solid var(--border); padding-block: 8px; margin-bottom: 20px; }
#contents summary { min-height: 44px; padding-block: 12px; cursor: pointer; }
#chapters, #chapters ol { list-style: none; padding: 0; margin: 0; }
#chapters ol { padding-inline-start: 16px; }
#chapters a { display: block; padding-block: 12px; min-height: 44px; line-height: 1.5; overflow-wrap: anywhere; }
#return-home { width: 100%; }
#download-epub:not([hidden]) { display: block; min-height: 44px; margin-bottom: 12px; padding: 12px; border: 1px solid var(--border); border-radius: 6px; text-align: center; text-decoration: none; }
#status { max-width: 48rem; margin: 0 auto; padding: 16px 24px; line-height: 1.5; }
#status:empty { display: none; }
body.reading #status { position: fixed; top: 12px; left: 12px; right: 72px; z-index: 10; background: white; border-radius: 6px; }
#status.is-error { color: #a22a22; }
noscript { display: block; padding: 24px; }