*{box-sizing:border-box}
:root{font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif;background:#070b12;color:#edf2ff}
body{margin:0;min-height:100vh;background:radial-gradient(circle at 50% 0,#17233d,#070b12 48%);padding:14px}
.app{max-width:760px;margin:auto}.top{display:flex;justify-content:space-between;gap:14px;align-items:flex-start;margin-bottom:14px}
.eyebrow{font-size:10px;letter-spacing:.16em;color:#8da5d6;font-weight:800}h1{font-size:clamp(27px,7vw,42px);margin:6px 0}
p{color:#99a6bc;margin:0;line-height:1.5}.pill{border:1px solid #273653;border-radius:999px;padding:8px 10px;font-size:11px;white-space:nowrap;color:#aebbd4}
.panel{background:rgba(13,19,31,.94);border:1px solid #202b42;border-radius:20px;padding:13px;margin-bottom:13px;box-shadow:0 18px 50px #0005}
.camera{position:relative;width:min(100%,520px);aspect-ratio:3/4;margin:auto;background:#000;border-radius:16px;overflow:hidden}
video,.camera canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}
.face-guide{position:absolute;left:13%;right:13%;top:12%;bottom:12%;border:2px dashed #ffffff77;border-radius:48%;pointer-events:none}
.camera-status{position:absolute;left:10px;bottom:10px;background:#0009;border:1px solid #ffffff22;border-radius:9px;padding:6px 8px;font-size:11px}
.challenge{width:min(100%,520px);margin:14px auto 0}.row{display:flex;justify-content:space-between}.bar{height:7px;background:#202a3c;border-radius:99px;overflow:hidden;margin:9px 0}.bar i{display:block;height:100%;width:0;background:#65a3ff;transition:width .2s}
#instruction{min-height:43px;color:#c2cce0}.buttons{width:min(100%,520px);display:flex;gap:9px;margin:12px auto 0}
button{flex:1;border:0;border-radius:11px;padding:13px;background:#5e91ef;color:#fff;font-weight:800}button.secondary{background:#202a3c;color:#cbd4e5}button:disabled{opacity:.4}
.result{width:min(100%,520px);margin:12px auto 0;padding:13px;border-radius:11px;background:#101b2c;border:1px solid #2b3a58;line-height:1.5}.result.good{border-color:#247a59}.result.bad{border-color:#874152}.hidden{display:none}
.details h2{font-size:18px;margin:0 0 10px}.grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.grid div{background:#101725;border:1px solid #202c42;border-radius:11px;padding:10px}.grid span{display:block;color:#8390a8;font-size:11px}.grid b{display:block;margin-top:4px}.note{margin-top:12px;font-size:12px}
@media(max-width:560px){body{padding:9px}.top{display:block}.pill{display:inline-block;margin-top:10px}}