:root { color-scheme: light; font-family: system-ui, sans-serif; background: #fff; color: #222; }
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; overscroll-behavior: none; }
#viewer { position: fixed; inset: 0; overflow: hidden; touch-action: none; outline: none; background: #fff; }
.page { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; background: #fff; }
.page img { display: block; flex: none; max-width: none; transform-origin: center; user-select: none; -webkit-user-select: none; -webkit-user-drag: none; pointer-events: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
#error { position: fixed; z-index: 3; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(90vw, 340px); padding: 24px; text-align: center; background: #fff; border: 1px solid #ddd; border-radius: 8px; }
#error[hidden] { display: none; }
#error p { margin: 0 0 16px; line-height: 1.6; }
button { font: inherit; padding: 8px 16px; border: 1px solid #aaa; border-radius: 4px; background: #fff; color: #222; cursor: pointer; }
button:focus-visible { outline: 2px solid #222; outline-offset: 3px; }
noscript { position: fixed; inset: 40% 10% auto; text-align: center; }