:root{font-family:Arial,sans-serif;color:#30263d;background:#f7f5fa;color-scheme:light}*{box-sizing:border-box}body{margin:0}main{max-width:640px;margin:auto;padding:32px 20px 60px}a{color:#6743a5}h1{font-size:36px;margin:10px 0}p{line-height:1.55}.eyebrow{font-size:12px;letter-spacing:.15em;margin-top:32px}label{display:block;font-weight:600;margin:18px 0 8px}select,input,button{font:inherit;border:1px solid #ccc2d9;border-radius:10px;padding:12px}select,input{width:100%;background:white;color:inherit}button{cursor:pointer;background:#6743a5;color:white;font-weight:600}button:disabled{opacity:.5;cursor:default}.actions{display:flex;gap:12px;margin-top:12px}.camera{margin-top:20px;background:#211b2b;border-radius:16px;overflow:hidden}video{width:100%;display:block;aspect-ratio:4/3;object-fit:cover}#result{margin:24px 0;padding:20px;border:2px solid #6743a5;background:white;border-radius:12px}#result[data-success="true"]{border-color:#24814f}#result[data-success="false"]{border-color:#b94040}#result h2{margin-top:0}details{margin-top:24px}summary{cursor:pointer}form button{margin-top:12px}#camera-status{font-size:14px}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #a786db;outline-offset:3px}[hidden]{display:none!important}

/* Keep the outcome in the camera area where the operator is looking. */
.camera{display:grid;isolation:isolate}.camera video,.camera #result{grid-area:1/1}
#result{z-index:1;margin:0;border:0;border-radius:0;padding:24px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;min-width:0;overflow-wrap:anywhere}
#result[data-success="true"]{background:#e3f7e9;color:#12562f;box-shadow:inset 0 0 0 5px #24814f}
#result[data-success="false"]{background:#fff0ef;color:#8b2727;box-shadow:inset 0 0 0 5px #b94040}
#result-icon{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;font-size:44px;font-weight:700;margin-bottom:12px;background:#24814f;color:white}
#result[data-success="false"] #result-icon{background:#b94040}
#result h2{font-size:28px;margin:0}#result-detail{margin:12px 0 20px}#next{background:#30263d}#sound{margin-top:12px;background:white;color:#30263d}
@media(max-width:420px){#result{padding:20px 16px}#result h2{font-size:25px}#result-icon{width:52px;height:52px;font-size:36px}}