:root { color-scheme: light dark; font: 16px/1.5 system-ui, sans-serif; }
body { margin: 0; padding: clamp(1rem, 4vw, 2rem); }
main { max-width: 56rem; margin: auto; }
header, section, article { margin: 0 0 1.5rem; }
button, input { box-sizing: border-box; max-width: 100%; font: inherit; padding: 0.65rem 0.75rem; margin: 0.35rem 0.75rem 0.5rem 0; min-height: 2.75rem; }
label { display: block; margin-top: 0.75rem; }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
article { border: 1px solid currentColor; border-radius: 0.4rem; padding: 1rem; }
article img { display: block; max-width: 100%; height: auto; margin: 0.75rem 0; }
#totp-uri { display: block; overflow-wrap: anywhere; padding: 0.75rem; }
#enrollment-code { border: 1px solid currentColor; border-radius: 0.4rem; padding: 1rem; }
#owner-code { display: block; width: 100%; min-height: 3.25rem; margin-right: 0; font-size: 1.2rem; }
.code-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.code-actions button { margin-right: 0; }
[hidden] { display: none !important; }