main { max-width: 800px; }
button { min-height: 48px; margin-bottom: .5rem; }
#payload { display: block; min-height: 2em; font: 700 clamp(2rem, 8vw, 4rem)/1.3 ui-monospace, monospace; white-space: pre-wrap; overflow-wrap: anywhere; unicode-bidi: plaintext; }
.scanscreen { position: fixed; inset: 0; z-index: 75; display: flex; flex-direction: column; background: #10251c; color: white; }
.scanscreen .topbar { display: flex; align-items: center; gap: 1rem; padding: max(.75rem, env(safe-area-inset-top)) 1rem .75rem; }
.scanwrap { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.scanwrap video, .scanfreeze { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.scanfreeze, .scanid { display: none; }
.scanbox { position: absolute; top: 50%; left: 50%; width: min(62vw, 260px); aspect-ratio: 1; transform: translate(-50%, -50%); border: 4px solid white; border-radius: 18px; }
.scantip { position: absolute; bottom: 1rem; width: 100%; padding: 0 1rem; text-align: center; text-shadow: 0 1px 3px black; }
.scanfoot { padding: 1rem 1rem max(1rem, env(safe-area-inset-bottom)); }
.scanhit, .scanid { overflow-wrap: anywhere; }