body {
  font-family: sans-serif;
  margin: 0;
  background: #f4f4f4;
}
header {
  background: #003366;
  color: white;
  padding: 10px;
  text-align: left;
  display: flex;
  align-items: center;
}
.logo {
  height: 50px;
  margin-right: 10px;
}
.controls, .frame-controls {
  margin: 10px;
  text-align: center;
}
button {
  margin: 5px;
  padding: 8px 12px;
}
.video-container {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin: auto;
  max-height: 80vh;
}
video, canvas {
  width: 100%;
  height: auto;
  max-height: 80vh;
}
canvas {
  position: absolute;
  top: 0;
  left: 0;
}

#video {
  width: 100%
  height: auto
  z-index: 1
  pointer-events: none
  display: block
  transform: none !important
}

#canvas {
  position: absolute
  top: 0
  left: 0
  width: 100%
  height: 100%
  z-index: 2
  pointer-events: auto
}

html, body {
  touch-action: none
}