* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { font: 16px system-ui, -apple-system, "Segoe UI", sans-serif; background: #e9ebee; color: #222; }
#viewer { display: flex; flex-direction: column; width: 100%; height: 100%; height: 100dvh; min-height: 0; }
#stage { position: relative; flex: 1 1 auto; min-height: 0; min-width: 0; display: flex; justify-content: center; align-items: center; overflow: hidden; padding: 12px; }
#page { display: none; max-width: 100%; max-height: 100%; background: white; box-shadow: 0 2px 12px #0003; }
#message { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; text-align: center; color: #555; }
#toolbar { flex: 0 0 58px; display: flex; justify-content: center; align-items: center; gap: 22px; background: #fff; border-top: 1px solid #d1d5db; }
#counter { min-width: 90px; text-align: center; font-variant-numeric: tabular-nums; }
button { border: 1px solid #c7cbd1; border-radius: 6px; padding: 9px 15px; background: #f8f9fa; color: #222; cursor: pointer; font: inherit; }
button:hover:not(:disabled) { background: #e7edf5; }
button:disabled { opacity: .35; cursor: default; }
@media (max-width: 420px) { #stage { padding: 6px; } #toolbar { gap: 8px; } button { padding: 8px; font-size: 14px; } #counter { min-width: 68px; } }

#download {
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    margin-left: 20px;

    border: 1px solid #cbd0d5;
    border-radius: 5px;
    background: #f8f9fa;

    color: #000 !important;
    text-decoration: none !important;
    font: inherit;
    cursor: pointer;
}

#download:hover {
    background: #e9ecef;
    color: #000 !important;
    text-decoration: none !important;
}

#download:visited {
    color: #000 !important;
    text-decoration: none !important;
}