* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #000; color: #fff; font: 13px monospace; }
header, footer { position: fixed; z-index: 2; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; padding: 12px max(16px, env(safe-area-inset-right)) 12px max(16px, env(safe-area-inset-left)); background: #000c; }
header { top: 0; padding-top: max(12px, env(safe-area-inset-top)); }
header a { color: #fff; display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; text-underline-offset: 4px; }
footer { bottom: 0; justify-content: center; padding-bottom: max(12px, env(safe-area-inset-bottom)); pointer-events: none; text-align: center; }
main { height: 100vh; height: 100dvh; overflow-y: auto; scroll-snap-type: y mandatory; overscroll-behavior-y: contain; }
figure { margin: 0; height: 100%; width: 100%; scroll-snap-align: start; scroll-snap-stop: always; display: flex; align-items: center; justify-content: center; padding: max(80px, calc(env(safe-area-inset-top) + 68px)) 8px max(52px, calc(env(safe-area-inset-bottom) + 40px)); }
img { display: block; width: 100%; height: 100%; object-fit: contain; }
.error { padding: 90px 24px; text-align: center; }