/* The demo's one stylesheet: system fonts, light and dark, nothing else. */
:root { color-scheme: light dark }
body { font: 16px/1.5 system-ui, sans-serif; max-width: 40rem;
       margin: 3rem auto; padding: 0 1rem }
header h1 { margin: 0 }
header h1 a { color: inherit; text-decoration: none }
.lede { margin: .25rem 0 1rem; opacity: .8 }
nav { display: flex; gap: 1rem; align-items: center; font-size: .9rem }
nav form { margin: 0 }
h2 { margin-top: 2rem }
.qr { width: 16rem; max-width: 80vw; margin: 1rem 0 }
.qr svg { width: 100%; height: auto; display: block;
          background: #fff; border-radius: 8px }
code { user-select: all }
form.row { display: flex; gap: .5rem; margin: 1rem 0; align-items: center }
input { font: inherit; padding: .5rem .75rem; width: 16ch;
        letter-spacing: .1ch }
button { font: inherit; padding: .5rem 1rem }
ul.status { list-style: none; padding: 0 }
li, .notice { padding: .35rem .6rem; border-radius: 6px; margin: .25rem 0 }
.ok    { background: #1a7f3722 }
.bad   { background: #b3261e22 }
.quiet, .error { opacity: .7 }
small { opacity: .6 }
footer { margin-top: 3rem }
