:root{color-scheme:dark;--blue:#1677ff;--bg:#080a0d;--line:#222b38;--muted:#929eaf}*{box-sizing:border-box}html{touch-action:pan-y pinch-zoom}body{margin:0;background:var(--bg);color:#f2f5fa;font:14px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}main{max-width:660px;margin:auto;padding:30px 24px 40px}header{display:flex;justify-content:space-between;gap:20px;align-items:center;padding-bottom:40px}a{color:#6aabff;text-decoration:none}.brand{color:#f2f5fa;font-size:26px;letter-spacing:-1.5px;display:flex;align-items:center}.brand i{width:7px;height:7px;background:var(--blue);border-radius:50%;margin:12px 0 0 6px}.eyebrow{font-size:10px;letter-spacing:2px;color:var(--muted)}h1{font-size:clamp(30px,6vw,46px);letter-spacing:-1.7px;line-height:1.15;margin:20px 0}h1 span{color:#6aabff}.intro{color:var(--muted);max-width:480px}section{background:#10141b;border:1px solid var(--line);padding:24px;border-radius:16px;margin:24px 0}label{display:block;color:#bac4d2;margin-bottom:20px;font-size:13px}input,select,button{width:100%;padding:12px 14px;font:inherit;border:1px solid #293446;border-radius:9px;max-width:100%;background:#090d13;color:inherit}input,select{margin-top:8px}button{background:var(--blue);color:white;font-weight:600;font-size:13px;cursor:pointer;border-color:transparent}button:hover{background:#3892ff}button:disabled{opacity:.45;cursor:default}.secondary{background:transparent;border-color:var(--line);color:#b9c8de}.secondary:hover{background:#151b25}input:focus,select:focus{outline:2px solid var(--blue);outline-offset:2px}button:focus-visible,a:focus-visible{outline:2px solid #6aabff;outline-offset:4px}.scanner{position:relative;aspect-ratio:4/3;background:radial-gradient(ellipse,#1677ff12,#090d13 75%);border:1px solid #293446;border-radius:14px;overflow:hidden;margin:4px 0 16px}video,canvas{width:100%;height:100%;object-fit:cover;display:block}video:not([src]){min-height:100%}[hidden]{display:none!important}.scan-overlay{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}.scan-target{position:relative;width:62%;aspect-ratio:1;max-height:80%}.scan-target>i{position:absolute;width:26px;height:26px;border:3px solid #2684ff;border-radius:3px}.scan-target>i:nth-child(1){top:0;left:0;border-right:0;border-bottom:0}.scan-target>i:nth-child(2){top:0;right:0;border-left:0;border-bottom:0}.scan-target>i:nth-child(3){bottom:0;left:0;border-right:0;border-top:0}.scan-target>i:nth-child(4){bottom:0;right:0;border-left:0;border-top:0}.scan-line{display:none;position:absolute;left:5%;right:5%;height:2px;background:#55a5ff;box-shadow:0 0 14px #1677ff,0 0 30px #1677ff66;animation:scan 2.1s ease-in-out infinite}.scanner[data-state=scanning] .scan-line,.scanner[data-state=verifying] .scan-line{display:block}.scanner[data-state=verifying] .scan-line{animation-duration:1s}.scan-caption{position:absolute;left:16px;right:16px;bottom:16px;background:#080a0ddd;border:1px solid #293446;padding:9px 12px;border-radius:8px;font-size:11px;display:flex;align-items:center;gap:8px}.indicator{width:6px;height:6px;background:#64748b;border-radius:50%}.scanner[data-state=scanning] .indicator,.scanner[data-state=verifying] .indicator{background:#2684ff;box-shadow:0 0 12px #1677ff}.scanner[data-state=success] .indicator{background:#69d5a0}.scanner[data-state=error] .indicator{background:#ff8b9d}.camera-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px}.privacy{font-size:11px;color:var(--muted);margin:16px 0 24px}output{display:block;padding:16px 18px;border:1px solid var(--line);border-radius:10px;background:#10141b;overflow-wrap:anywhere}output[data-state=success]{border-color:#244f3a;color:#a3e5c1}output[data-state=error]{border-color:#64303b;color:#ffbcc6}footer{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:28px;font-size:11px}footer span{font-size:8px;letter-spacing:1px;color:var(--muted)}@keyframes scan{0%,100%{top:8%}50%{top:92%}}@media(max-width:440px){main{padding:24px 16px}section{padding:18px}.camera-actions{gap:8px}.scan-caption{left:10px;right:10px;bottom:10px}}@media(prefers-reduced-motion:reduce){.scan-line{animation:none;top:50%}}