:root { color-scheme: dark; font-family: system-ui, sans-serif; background: #232628; color: #eee; }
* { box-sizing: border-box; }
body { margin: 0; height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
.toolbar, .controls { flex: none; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 8px 12px; background: #17191b; }
.toolbar { padding-top: max(8px, env(safe-area-inset-top)); }
h1 { font-size: 14px; font-weight: 500; margin: 0 auto 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a { color: #eee; text-decoration: none; white-space: nowrap; font-size: 13px; }
button, select, input { font: inherit; font-size: 13px; color: #eee; background: #303438; border: 1px solid #53585c; border-radius: 6px; min-height: 36px; padding: 5px 9px; }
button, select { cursor: pointer; }
button:disabled { opacity: .35; cursor: default; }
:focus-visible { outline: 2px solid #b6d4ff; outline-offset: 2px; }
label { font-size: 13px; white-space: nowrap; }
#reader { flex: 1; min-height: 0; overflow: auto; padding: 8px; overscroll-behavior: contain; }
#book { display: flex; align-items: flex-start; width: max-content; min-height: 100%; margin: 0 auto; }
.page { position: relative; flex: none; background: white; box-shadow: 0 2px 12px #0006; overflow: hidden; }
.page canvas { display: block; }
.page .textLayer { z-index: 1; }
.controls { padding-bottom: max(8px, env(safe-area-inset-bottom)); }
#jump { display: flex; align-items: center; gap: 8px; }
#page { width: 65px; text-align: center; }
#status { position: fixed; top: 65px; left: 50%; transform: translateX(-50%); margin: 0; padding: 10px 16px; border-radius: 8px; background: #17191bee; max-width: 90%; z-index: 3; font-size: 14px; }
#status:empty { display: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
@media (max-width: 700px) {
  .toolbar { flex-wrap: wrap; gap: 6px 8px; padding: 6px 8px; }
  h1 { flex: 1; }
  .toolbar > label:first-of-type { margin-left: auto; }
  #original { display: none; }
  #reader { padding: 2px; }
  .controls { gap: 8px; padding-top: 5px; }
}