* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; }
body { display: grid; grid-template-rows: minmax(0, 1fr) auto; height: 100vh; height: 100dvh; background: #eceeef; color: #202322; font: 15px system-ui, sans-serif; }
main { min-height: 0; }
iframe { display: block; width: 100%; height: 100%; border: 0; }
nav { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 8px 8px max(8px, env(safe-area-inset-bottom)); background: white; border-top: 1px solid #d5d9d6; }
button, select { min-height: 44px; border: 1px solid #b8c0ba; border-radius: 6px; background: #fff; color: inherit; font: inherit; padding: 8px 12px; }
button { cursor: pointer; }
button:hover:not(:disabled) { background: #eef5ed; }
button:disabled { opacity: .35; cursor: default; }
:focus-visible { outline: 3px solid #267822; outline-offset: 2px; }
.page-label { display: flex; align-items: center; gap: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
@media (max-width: 380px) { nav { gap: 5px; } button, select { padding: 8px; } .page-label { gap: 3px; } }