:root { color-scheme: light dark; }

body { font: 16px/1.5 system-ui, sans-serif; max-width: 46rem;
       margin: 3rem auto; padding: 0 1rem; }

header { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap;
         border-bottom: 1px solid; padding-bottom: .5rem; }
header h1 { font-size: 1.2rem; margin: 0; }
header a { text-decoration: none; }
nav { display: flex; align-items: center; gap: 1rem; margin-left: auto; }
nav form { margin: 0; }

h2 { font-size: 1.4rem; }
h3 { font-size: 1.1rem; margin-top: 2rem; }

form.stack { display: flex; flex-direction: column; gap: .75rem;
             max-width: 22rem; }
form.row   { display: inline-flex; align-items: center; gap: .5rem;
             flex-wrap: wrap; }
label { display: flex; flex-direction: column; gap: .25rem; }
form.row label { flex-direction: row; align-items: center; }

button, .button { border-radius: 6px; border: 1px solid currentColor;
                  background: none; color: inherit; padding: .4rem .8rem;
                  font: inherit; cursor: pointer; text-decoration: none; }
button.bad, h3.bad { color: #b3261e; }

input, select { font: inherit; padding: .35rem; border-radius: 4px;
                border: 1px solid; background: none; color: inherit; }

.notice { padding: .6rem .8rem; border-radius: 6px; }
.ok    { background: #1a7f3722; }
.bad   { background: #b3261e22; }
.quiet { opacity: .7; }
small  { opacity: .7; }

ul.status { padding-left: 1.2rem; }

table { border-collapse: collapse; width: 100%; margin: 1rem 0; }
th, td { text-align: left; padding: .4rem .6rem; border-bottom: 1px solid;
         border-color: color-mix(in srgb, currentColor 20%, transparent);
         vertical-align: top; }
th { font-size: .85rem; text-transform: uppercase; letter-spacing: .03em;
     opacity: .7; }

code { font-size: .9em; }
.key { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
       padding: .6rem .8rem; border-radius: 6px; background: #1a7f3722; }
.key code { word-break: break-all; }

.qr { width: 16rem; background: #fff; padding: .5rem; border-radius: 6px; }
.qr svg { width: 100%; height: auto; display: block; }