body {
  // background-image: url(/neos-assets/play-mat.png);
  background-repeat: no-repeat;
  background-size: cover;
}

section.mat {
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
  height: 100%;
  .camera {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    perspective: var(--perspective);
  }
  .camera,
  .camera * {
    // 所有元素加入同一个三维渲染上下文：https://acgtofe.com/posts/2013/09/css-3d-transform
    transform-style: preserve-3d;
  }
  .plane {
    transform: translateX(0) translateY(0) translateZ(0)
      rotateX(var(--plane-rotate-x));
    width: fit-content;
  }
}

.container {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}
