* {box-sizing:border-box}
[hidden] {display:none!important}
:root {color-scheme:light; font-family:"Helvetica Neue",Arial,sans-serif; color:#21221e; background:#f6f5ef}
body {margin:0}
header {max-width:62rem; margin:auto; padding:1.25rem clamp(1.2rem,4vw,3rem); display:flex; align-items:baseline; gap:1rem; border-bottom:1px solid #b7b7ab}
.brand {font-size:1.85rem; font-weight:750; letter-spacing:-.07em}
.brand-sub {font-size:.83rem}
main {max-width:34rem; margin:clamp(2rem,7vh,5rem) auto; padding:0 1.2rem}
h1 {font-size:clamp(2.2rem,7vw,3.2rem); line-height:1; letter-spacing:-.055em; font-weight:600; margin:0 0 2rem}
label,summary {font-size:.93rem; font-weight:600}
input, select, button {font:inherit; width:100%; padding:.8rem 1rem; border:1px solid #99998d; background:#fff; color:inherit; border-radius:.35rem; min-height:46px}
select {margin-top:.55rem; white-space:normal}
button {background:#252621; color:white; cursor:pointer; font-weight:600; border-color:#252621}
button:disabled {opacity:.45; cursor:default}
button.subtle {margin-top:.6rem; background:transparent; color:inherit}
:focus-visible {outline:3px solid #6953d3; outline-offset:2px}
.stack {display:grid; gap:.65rem}
.stack button,.stack input+label {margin-top:.5rem}
.reader {padding:1rem 0}
#feedback,.brand-sub,#time {color:#525447; line-height:1.45}
#result {border:2px solid #99542b; background:#fff2df; padding:1rem; margin-bottom:1rem; border-radius:.35rem}
#result[data-state=accepted] {border-color:#397943; background:#e5f4de}
#result[data-state=void], #result[data-state=unknown] {border-color:#983b3b; background:#fce6e1}
#outcome {font-size:1.55rem; letter-spacing:-.035em}
#time {display:block; font-size:.88rem}
#viewfinder {aspect-ratio:4 / 3; position:relative; overflow:hidden; border-radius:.35rem; background:#141510}
video {width:100%;height:100%;object-fit:contain}
.target {position:absolute; width:43%; aspect-ratio:1; border:2px solid #fff9; left:50%; top:50%; transform:translate(-50%,-50%);border-radius:.35rem}
details {border-block:1px solid #c3c3b7; padding:1rem 0}
details .stack {margin-top:1rem}
summary {cursor:pointer}
footer {display:flex; align-items:center; justify-content:space-between; margin-top:2rem}
footer a,.link {font:inherit; color:#37392e; text-decoration:underline}
.link {border:none; padding:0; background:transparent; width:auto}