header strong {font-size:1.2rem; letter-spacing:.025em}
.tag {border:1px solid #53697d; border-radius:999px; color:#b7c7d5; font-size:.8rem; padding:.15rem .55rem; text-align:center}
.language {margin:.8rem 0}
.language select {min-height:2.75rem}
h1 {margin:1.15rem 0 .65rem; font-size:clamp(1.6rem,6vw,2.3rem)}
h2 {margin:.35rem 0 .7rem; font-size:1.3rem; line-height:1.25}
.intro,.scanner-note {color:#b7c7d5}
.steps {display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.35rem .85rem; margin:1.1rem 0; padding:0; list-style:none; counter-reset:step}
.steps li {display:flex; align-items:baseline; gap:.3rem; border-top:2px solid #53697d; color:#b7c7d5; padding-top:.35rem; overflow-wrap:anywhere; counter-increment:step}
.steps li::before {content:counter(step); font-variant-numeric:tabular-nums}
.steps li[aria-current] {border-color:#9ccaff; color:#e8eff4; font-weight:700}
section {border-top:1px solid #334252; padding-top:.85rem}
section button {min-height:2.75rem}
.secondary {background:#101922}
.secondary:hover:not(:disabled) {background:#203447}
#viewfinder {border:1px solid #53697d; border-radius:.65rem; padding:.55rem; margin:.65rem 0}
#video {display:block; width:100%; max-height:45vh; min-height:4rem; background:#0e1116; object-fit:contain; border-radius:.35rem}
#frame-count {margin:.5rem 0 0; font-variant-numeric:tabular-nums}
progress {display:block; width:100%; height:.75rem; margin:.5rem 0; accent-color:#9ccaff}
.upload {border-top:1px solid #334252; padding-top:.7rem}
.upload input {margin-top:.35rem}
.identity {background:#101922; border:1px solid #334252; border-radius:.5rem; padding:.6rem .85rem}
.identity dt {color:#b7c7d5; font-size:.87rem}
.identity dd {margin:0 0 .45rem; overflow-wrap:anywhere; unicode-bidi:plaintext}
#code {letter-spacing:.12em; font-variant-numeric:tabular-nums}
#status:empty {margin:0}
.form-error {margin:.65rem 0; padding:.8rem; border:2px solid #ff8e98; border-radius:.5rem; background:#351a21; color:#ffe5e8; font-weight:600; overflow-wrap:anywhere; scroll-margin:.75rem}
.form-error:not([hidden]) {display:flex; align-items:flex-start; gap:.65rem}
.form-error:focus {outline:2px solid #ffe5e8; outline-offset:3px}
.error-icon {display:inline-flex; align-items:center; justify-content:center; flex:0 0 1.4em; width:1.4em; height:1.4em; border:2px solid currentColor; border-radius:50%; line-height:1; font-weight:800}
@media (min-width:36rem) {.steps {grid-template-columns:repeat(4,minmax(0,1fr))}}