:root { color: #211f1a; background: #f3eee3; font-family: Georgia, serif; }
* { box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; margin: 0; }
body { display: grid; place-items: center; overflow: hidden; }
.viewer-shell { width: min(92vw, 520px); min-height: 100vh; display: grid; place-items: center; align-content: center; gap: 12px; padding: 18px; }
#viewer { width: 100%; min-height: min(76vh, 680px); display: grid; place-items: center; }
.viewer-status { margin: 0; min-height: 1.4em; font-size: 13px; letter-spacing: .04em; text-align: center; color: #655f54; }
.viewer-fallback { display: block; max-width: 100%; max-height: 76vh; object-fit: contain; border-radius: 8px; box-shadow: 0 22px 60px rgb(40 32 21 / 18%); }
@media (max-width: 540px) { .viewer-shell { width: 100vw; padding: 10px; } #viewer { min-height: 82vh; } }