:root { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }

body {
  margin: 0;
  background: #0b0f14;
  color: #e6edf3;
}

.wrap {
  max-width: 980px;
  margin: 0 auto;
  padding: 20px;
}

h1 { margin: 0 0 12px 0; font-size: 20px; }

.row { display: flex; gap: 12px; align-items: center; margin: 10px 0 12px; }

button {
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid #2b3340;
  background: #121a24;
  color: #e6edf3;
  cursor: pointer;
}

button:disabled { opacity: 0.6; cursor: not-allowed; }

.status { font-size: 13px; opacity: 0.9; }

.stage {
  position: relative;
  width: min(960px, 100%);
  aspect-ratio: 4 / 3;
  min-height: 360px;
  border: 1px solid #2b3340;
  border-radius: 14px;
  overflow: hidden;
  background: #060a10;
}

video, canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Keep capturing from video, but don't show it */
video { opacity: 0; }

/* Make sure overlay is above */
#overlay { z-index: 2; }
video { z-index: 1; }

/* selfie mirror */
video { transform: scaleX(-1); }
#overlay { transform: scaleX(-1); pointer-events: none; }

.hidden { display: none; }