body {
  font-family: sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh; /* 确保 body 至少占据整个视口高度 */
  margin: 0; /* 移除 body 默认 margin，避免留白 */
  background-color: #f0f0f0;
}

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 20px;
  border-radius: 10px;
  background-color: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  width: 95vw; /* 容器宽度设置为视口宽度的 95%，留出一些边距 */
  max-width: 2000px; /* 容器最大宽度，防止在超大屏幕上过宽 */
}

.slider-container {
  position: relative;
  width: 100%; /* 宽度继承父容器 */
  height: 80vh; /* 高度设置为视口高度的 80%，可以根据需要调整 */
  /* max-width: 800px;  移除最大宽度限制 */
  overflow: hidden;
  border: 1px solid #ccc;
  touch-action: none;
}

.image-container {
  position: relative;
  width: 100%;
  height: 100%;
}

#originalImage, #processedImage {
  width: 100%;
  height: 100%;
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  object-fit: contain; /* 使用 contain 确保图片完整显示，不裁剪 */
}

#processedImage{
  background-size: contain; /* 使用 contain 确保背景图片完整显示，不裁剪 */
  background-repeat: no-repeat;
  background-position: center;
}

.slider {
  position: absolute;
  top: 0;
  left: 50%;
  width: 4px;
  height: 100%;
  background-color: #ccc;
  cursor: ew-resize;
  transform: translateX(-50%);
}

.slider::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  background-color: #999;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.controls {
  display: flex;
  gap: 10px;
}
.controls > button {
  padding: 8px 16px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.controls > button:disabled {
  background-color: #cccccc;
  cursor: default;
}