body {
  margin:0;
  background:#0b1020;
  display:flex;
  justify-content:center;
  align-items:center;
  min-height:100vh;
  color:white;
  font-family:sans-serif;
}
.app {
  max-width:800px; width:100%;
  display:flex; flex-direction:column; gap:12px;
}
h1 { text-align:center; font-weight:600; }
.controls {
  display:flex; flex-wrap:wrap; gap:8px; align-items:center; justify-content:center;
}
.top-controls { gap:12px; }
button {
  padding:6px 12px; border-radius:6px;
  cursor:pointer; border:none; background:#60a5fa; color:#07203b; font-weight:600;
  transition:0.2s;
}
button:hover { background:#3b82f6; }
.secondary { background:#333; color:#ccc; }
label { display:flex; align-items:center; gap:6px; font-size:14px; }
select,input[type=range] {
  background:#0f1724; border:1px solid rgba(255,255,255,0.05);
  padding:4px 6px; border-radius:6px; color:white;
}
.stack {
  position:relative; width:100%; max-width:640px; aspect-ratio:4/3;
  margin:auto; border-radius:8px; overflow:hidden; background:black;
}
video, canvas {
  position:absolute; top:0; left:0; width:100%; height:100%;
  object-fit:cover;
}
#resultCanvas, #lineCanvas { pointer-events:none; }