:root { color-scheme: light dark; font: 13px system-ui, sans-serif; background: #34373c; color: #eee; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { display: flex; flex-direction: column; }
header { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 7px; background: #25282c; border-bottom: 1px solid #555; }
button, input, select { font: inherit; color: #eee; background: #34383e; border: 1px solid #60656d; border-radius: 5px; padding: 5px 8px; }
button { cursor: pointer; min-width: 30px; }
button:disabled { opacity: .4; cursor: default; }
button:hover:enabled { background: #4b515b; }
:focus-visible { outline: 2px solid #8bbdff; outline-offset: 2px; }
input[type=number] { width: 65px; }
.separator { width: 1px; height: 20px; background: #555; }
#viewport { flex: 1; min-height: 0; overflow: auto; outline-offset: -3px; }
#pages { min-width: 100%; width: max-content; padding: 16px; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.page { position: relative; flex: none; background: white; color-scheme: only light; box-shadow: 0 2px 8px #0006; overflow: hidden; }
.page canvas { display: block; width: 100%; height: 100%; }
.page-error { color: #8b2020; padding: 16px; }
#status, #password-form { position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 16px; background: #34373cf5; text-align: center; }
#password-form { flex-direction: column; }
body.compact #pages { padding: 0; gap: 0; width: 100%; height: 100%; justify-content: center; }
body.compact .page { box-shadow: none; }
body.compact #viewport { overflow: hidden; }
.textLayer { position: absolute; inset: 0; overflow: clip; line-height: 1; text-align: initial; transform-origin: 0 0; forced-color-adjust: none; text-size-adjust: none;
  --min-font-size: 1; --text-scale-factor: calc(var(--total-scale-factor) * var(--min-font-size)); --min-font-size-inv: calc(1 / var(--min-font-size)); }
.textLayer :is(span, br) { position: absolute; color: transparent; white-space: pre; cursor: text; transform-origin: 0 0; user-select: text; }
.textLayer > :not(.markedContent), .textLayer .markedContent span:not(.markedContent) { z-index: 1; --font-height: 0; --scale-x: 1; --rotate: 0deg; font-size: calc(var(--text-scale-factor) * var(--font-height)); transform: rotate(var(--rotate)) scaleX(var(--scale-x)) scale(var(--min-font-size-inv)); }
.textLayer .markedContent { display: contents; }
.textLayer ::selection { background: #3388ff66; }
body.compact .textLayer { display: none; }