body {
  font-family: -apple-system, system-ui, Segoe UI, Roboto, Arial;
  margin: 0;
  padding: 12px;
  background: #f5f5f5;
}

h1 { font-size: 18px; text-align: center; margin: 8px 0 12px; }

.previewWrap { position: relative; max-width: 520px; margin: 0 auto; }
video { width: 100%; border-radius: 12px; background: #000; }

#roi {
  position: absolute;
  left: 7%;
  top: 34%;
  width: 86%;
  height: 26%;
  border: 2px solid lime;
  box-shadow: 0 0 0 9999px rgba(0,0,0,.35);
  border-radius: 10px;
}

.row {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin: 12px 0;
  flex-wrap: wrap;
}

button {
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid #ccc;
  background: #fff;
  font-size: 14px;
}

button:disabled {
  opacity: 0.5;
}

pre {
  max-width: 520px;
  margin: 10px auto;
  background: #fff;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid #ddd;
  white-space: pre-wrap;
}

.dbgWrap { max-width: 520px; margin: 10px auto 20px; }
.dbgTitle { font-size: 12px; color: #444; margin: 10px 0 6px; }

#dbgRoi, #dbgMask {
  display: block;
  width: 100%;
  border: 1px solid #ccc;
  border-radius: 12px;
  background: #fff;
}