:root { color-scheme: light; font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #17231d; background: #fafaf8; }
* { box-sizing: border-box; }
html { -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; }
body { margin: 0; }
main { max-width: 420px; margin: auto; padding: max(32px, env(safe-area-inset-top)) 24px max(24px, env(safe-area-inset-bottom)); }
h1 { font-size: 24px; font-weight: 600; letter-spacing: -.04em; margin: 0 0 24px; }
.viewfinder { position: relative; isolation: isolate; width: 100%; aspect-ratio: 1; overflow: hidden; background: #eeefeb; border-radius: 12px; }
video { display: block; width: 100%; height: 100%; object-fit: cover; }
.camera-placeholder, .passed-overlay { position: absolute; inset: 0; display: grid; place-items: center; background: #eeefeb; color: #747c72; }
.camera-placeholder svg { width: 44px; height: 44px; }
.viewfinder.live .camera-placeholder { display: none; }
.passed-overlay { background: #e5eee4; color: #285b37; font-size: 64px; }
.result { margin: 24px 0; }
h2 { font-size: 17px; font-weight: 500; line-height: 1.4; margin: 0; }
#detail { color: #626a62; font-size: 14px; line-height: 1.5; margin: 8px 0 0; }
button { width: 100%; min-height: 52px; border: 0; border-radius: 10px; background: #285b37; color: #fff; font-family: inherit; font-size: 16px; font-weight: 600; cursor: pointer; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
button:disabled { opacity: .55; cursor: default; }
button:active:not(:disabled) { background: #1e482a; }
button:focus-visible { outline: 3px solid #285b37; outline-offset: 4px; }
.secondary { color: #17231d; background: #e5e8e1; }
.privacy { font-size: 12px; line-height: 1.5; text-align: center; color: #626a62; margin: 16px 0 0; }
[hidden] { display: none !important; }
@media (hover: hover) and (pointer: fine) { button:hover:not(:disabled) { filter: brightness(.95); } }