:root { color-scheme: light; }
* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  background: #f6f7fb;
  color: #252b38;
  font-family: Arial, sans-serif;
}
main { max-width: 520px; margin: auto; padding: 20px 16px; }
h1 { margin: 0; color: #2C3E91; font-size: 22px; }
p { color: #5f6675; line-height: 1.45; }
.camera {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  background: #171b27;
  aspect-ratio: 1 / 1;
}
video { display: block; width: 100%; height: 100%; object-fit: cover; }
.guide {
  position: absolute;
  inset: 16%;
  border: 3px solid #ffffff;
  border-radius: 18px;
  box-shadow: 0 0 0 999px rgb(0 0 0 / 0.2);
  pointer-events: none;
}
.status { min-height: 22px; margin: 16px 0; text-align: center; font-size: 14px; }
.error { color: #ba3030; }
button {
  width: 100%; padding: 13px; border: 0; border-radius: 9px;
  background: #2C3E91; color: #fff; font: inherit; font-weight: bold;
}
button[hidden] { display: none; }