html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: scroll;
}

.container {
  width: 100%;
  min-height: 100vh;
  min-height: 100svh; /* safe viewport height for mobile browsers */
  box-sizing: border-box;
  background: url('images/bg.png') no-repeat center center;
  background-size: cover;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start; /* 垂直居中整个内容组 */
  gap: 10px;
}
.top{
  width: 100%;
  margin-top: 3%;
}
.top-logo{
  width: 40%;
  margin: 0 auto;
  img{
    width: 100%;
  }
}

.center{
  width: 76%;
  /* 视口高度 70%：vh 通用，dvh 在移动端更贴近「可见视口」 */
  height: 70vh;
  height: 70dvh;
  flex-shrink: 0; /* 在 .container 的 flex 列里避免被压扁 */
  min-height: 0; /* 允许内部在极端情况下收束；高度仍由上面的 height 主导 */
  display: flex;
  justify-content: center;
  align-items: center;
  /* margin-bottom: 16%; */
  /* 禁止长按时选中文字，避免和“保存图片”冲突 */
  user-select: none;
  position: relative;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  overflow: hidden;
  box-sizing: border-box;
}

.center .demo{
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  flex-shrink: 1;
}



.bottom{
  width: 100%;
  /* 随视口高度变化（与 .center 的 vh/dvh 一致，避免 fixed 下 height 百分比歧义） */
  height: 22vh;
  height: 22dvh;
  min-height: 0;
  box-sizing: border-box;

}
.bottom-btn{
  width: 9%;
  margin: 0 auto;
  img{
    width: 100%;
  }
}
.bottom-text{
  width: 40%;
  margin: 0 auto;
  img{
    width: 100%;
  }
}