:root{color:#172029;background:#f4f7fa;font-family:system-ui,sans-serif}body{margin:0}main{max-width:760px;margin:0 auto;padding:24px}h1{font-size:clamp(1.5rem,4vw,2.2rem)}section{background:#fff;border:1px solid #cbd5df;border-radius:12px;gap:16px;padding:20px;display:grid}.scanner-controls{flex-wrap:wrap;align-items:end;gap:8px;display:flex}label{gap:5px;font-weight:600;display:grid}button,select,input{font:inherit;border:1px solid #687788;border-radius:6px;padding:9px 12px}button{color:#fff;cursor:pointer;background:#104f83}button:hover{background:#0d416c}button:focus-visible,select:focus-visible,input:focus-visible{outline-offset:2px;outline:3px solid #e19725}video{aspect-ratio:16/9;object-fit:contain;background:#111c29;border-radius:8px;width:100%}.scanner-result{border:2px solid #1f6b8c;border-radius:8px;padding:12px}.scanner-number{font-variant-numeric:tabular-nums;letter-spacing:.08em;overflow-wrap:anywhere;unicode-bidi:isolate}form{flex-wrap:wrap;align-items:end;gap:10px;display:flex}form input{min-width:min(80vw,320px)}.sample-note{color:#45556b}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important}}