:root {
  --viewer-bg: #090f2d;
  --control-bg: rgba(3, 9, 31, .78);
  --control-border: rgba(255, 255, 255, .24);
  --control-text: #fff;
  --accent: #ffda54;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { background: var(--viewer-bg); color: white; overflow: hidden; }
button, a { -webkit-tap-highlight-color: transparent; }

.viewer { height: 100svh; min-height: 100%; overflow: hidden; position: relative; width: 100vw; }
.page-viewport { align-items: center; display: flex; height: 100%; justify-content: center; overflow: hidden; width: 100%; }
.page-image { display: block; height: auto; max-height: 100svh; max-width: 100vw; object-fit: contain; user-select: none; width: auto; -webkit-user-drag: none; }

.nav-button, .download-button { align-items: center; backdrop-filter: blur(12px); background: var(--control-bg); border: 1px solid var(--control-border); color: var(--control-text); cursor: pointer; display: inline-flex; justify-content: center; position: fixed; z-index: 2; }
.nav-button { border-radius: 50%; font-family: Arial, sans-serif; font-size: 38px; font-weight: 300; height: 58px; line-height: 1; padding: 0 0 4px; top: 50%; transform: translateY(-50%); transition: opacity .2s ease, background .2s ease; width: 58px; }
.nav-button:hover:not(:disabled), .nav-button:focus-visible, .download-button:hover, .download-button:focus-visible { background: rgba(3, 9, 31, .94); outline: none; }
.nav-button:disabled { cursor: default; opacity: .22; }
.nav-prev { left: max(18px, env(safe-area-inset-left)); }
.nav-next { right: max(18px, env(safe-area-inset-right)); }
.download-button { border-radius: 999px; font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 13px; font-weight: 700; padding: 11px 16px; right: max(18px, env(safe-area-inset-right)); text-decoration: none; top: max(18px, env(safe-area-inset-top)); transition: background .2s ease; }
.download-button::after { color: var(--accent); content: "↓"; font-size: 17px; margin-left: 9px; }
.sr-only { height: 1px; margin: -1px; overflow: hidden; position: absolute; width: 1px; clip: rect(0, 0, 0, 0); }

@media (max-width: 640px) {
  .nav-button { bottom: max(20px, calc(env(safe-area-inset-bottom) + 14px)); font-size: 32px; height: 50px; top: auto; transform: none; width: 50px; }
  .nav-prev { left: max(18px, env(safe-area-inset-left)); }
  .nav-next { right: max(18px, env(safe-area-inset-right)); }
  .download-button { font-size: 12px; padding: 10px 13px; top: max(16px, calc(env(safe-area-inset-top) + 10px)); }
}

@media (prefers-reduced-motion: reduce) {
  .nav-button, .download-button { transition: none; }
}