:root { color-scheme: light; font: 15px/1.5 Arial, "Noto Sans TC", sans-serif; color: #263f35; }
* { box-sizing: border-box; }
body { margin: 0; height: 100dvh; display: flex; flex-direction: column; background: #edf1ef; }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 24px; padding: 12px; background: #f4faf6; border-bottom: 1px solid #d5e2db; }
.page-controls, .zoom-controls { display: flex; align-items: center; gap: 8px; }
button, .toolbar a { font: inherit; color: #087443; background: white; border: 1px solid #b4d0bf; border-radius: 4px; min-height: 42px; min-width: 42px; padding: 5px 10px; cursor: pointer; text-decoration: none; }
button:disabled { opacity: .45; cursor: default; }
button:not(:disabled):hover, .toolbar a:hover { background: #e3f3e9; }
button:focus-visible, a:focus-visible, input:focus-visible, main:focus-visible { outline: 3px solid #087443; outline-offset: 2px; }
#page-number { font: inherit; width: 58px; min-height: 38px; border: 1px solid #b4d0bf; border-radius: 4px; text-align: center; }
#zoom { width: 48px; text-align: center; }
#status { margin: 0; padding: 5px 12px; text-align: center; font-size: 13px; background: #fff; }
#pages { flex: 1; min-height: 0; overflow: auto; padding: 16px; overscroll-behavior: contain; }
#paper { position: relative; margin: 0 auto; background: white; box-shadow: 0 2px 8px #0002; }
canvas { display: block; }
#fallback { margin: 18px; text-align: center; }
a { color: #087443; }
[hidden] { display: none !important; }
@media (max-width: 520px) { .toolbar { gap: 8px; padding: 8px; } .toolbar > a { margin-left: 8px; } .toolbar span[lang] { display: block; font-size: 12px; } }
/* TextLayer positioning follows the PDF.js text-layer contract. */
.textLayer { position: absolute; inset: 0; overflow: clip; opacity: 1; line-height: 1; text-align: initial; text-size-adjust: none; forced-color-adjust: none; transform-origin: 0 0; caret-color: CanvasText; z-index: 1; }
.textLayer :is(span, br) { color: transparent; position: absolute; white-space: pre; cursor: text; transform-origin: 0 0; }
.textLayer { --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 > :not(.markedContent), .textLayer .markedContent span:not(.markedContent) { z-index: 1; --font-height: 0; font-size: calc(var(--text-scale-factor) * var(--font-height)); --scale-x: 1; --rotate: 0deg; transform: rotate(var(--rotate)) scaleX(var(--scale-x)) scale(var(--min-font-size-inv)); }
.textLayer .markedContent { display: contents; }
.textLayer span[role="img"] { user-select: none; cursor: default; }
.textLayer ::selection { background: rgb(0 110 255 / .25); }