:root {
  --进度条颜色-已填充: #99bfbf;
  --进度条颜色-未填充: rgba(224, 224, 224, 0.85);
  --投影按钮背景渐变-结束色: rgb(60, 131, 99);
  --投影颜色彩色背景修剪比例: 100%;
  --拇指宽度: 16px;
  --效果图滑块拇指宽度: 50px;
  --效果图滑块拇指x修正: 0px;
  --按钮宽度: 50px;
  --按钮背景色: #9ab;
  --滤镜拇指宽度: 15px;
  --按钮背景色-悬停: #bcd;
  --按钮背景色-激活: #def;
  --拇指偏移修正-棕褐色: 0;
  --拇指偏移修正-饱和度: 0;
  --拇指偏移修正-透明度: 0;
  --拇指偏移修正-反相: 0;
  --拇指偏移修正-色相: 0;
  --拇指偏移修正-灰度: 0;
  --拇指偏移修正-投影: 0;
  --拇指偏移修正-对比度: 0;
  --拇指偏移修正-亮度: 0;
  --拇指偏移修正-模糊: 0;
  --拇指偏移修正-投影-水平偏移: 0;
  --拇指偏移修正-投影-垂直偏移: 0;
  --拇指偏移修正-投影-模糊: 0;
  --拇指偏移修正-投影-颜色: 0;
  --默认值-棕褐色: 0;
  --默认值-饱和度: 100;
  --默认值-透明度: 100;
  --默认值-反相: 0;
  --默认值-色相: 0;
  --默认值-灰度: 0;
  --默认值-对比度: 100;
  --默认值-亮度: 100;
  --默认值-模糊: 0;
  --默认值-投影-水平偏移: 0;
  --默认值-投影-垂直偏移: 0;
  --默认值-投影-模糊: 0;
  --默认值-投影-颜色: 0;
}

body {
  width: 100dvw;
}

.总区 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

.展示区 {
  flex-shrink: 0;
  position: relative;
  height: max(650px, calc(100vh - 250px));
  aspect-ratio: calc(16 / 10);
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  outline: solid 4px black;
}

.图像区 {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.图容器 {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.效果图容器 {
  clip-path: inset(0 50% 0 0);
}

.图像 {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.投影图容器 {
  position: absolute;
  z-index: 2;
  width: 15%;
  aspect-ratio: 1;
  top: 2.5%;
  left: 5%;
  opacity: 0;
  pointer-events: none;
  transition: 125ms;
}

.投影图 {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

#效果图滑块 {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  appearance: none;
  background-color: transparent;
  transition: opacity 500ms;
}

#效果图滑块:hover {
  cursor: url("/Images/Common/鼠标-默认.cur"), auto;
}

#效果图滑块::-moz-range-thumb {
  appearance: none;
  width: var(--效果图滑块拇指宽度);
  height: var(--效果图滑块拇指宽度);
  border-radius: 999px;
  background-color: gray;
  border: solid 4px white;
  translate: var(--效果图滑块拇指x修正) 0;
}

#效果图滑块::-webkit-slider-thumb {
  appearance: none;
  width: var(--效果图滑块拇指宽度);
  height: var(--效果图滑块拇指宽度);
  border-radius: 999px;
  background-color: gray;
  border: solid 4px white;
  translate: var(--效果图滑块拇指x修正) 0;
}

#效果图滑块::-moz-range-thumb:hover {
  cursor: url("/Images/Common/鼠标-横向缩放.png"), ew-resize;
}

#效果图滑块::-webkit-slider-thumb:hover {
  cursor: url("/Images/Common/鼠标-横向缩放.png"), ew-resize;
}

.分割线 {
  position: absolute;
  top: 0;
  left: calc(50% - 2px);
  height: 100%;
  width: 4px;
  background-color: white;
  transition: opacity 500ms;
}

.控制区 {
  position: absolute;
  bottom: 25px;
  right: 25px;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  gap: 15px;
  pointer-events: none;
  transform-origin: 100% 100%;
}

:where(.滤镜区, .图像切换区) > button {
  background-color: var(--按钮背景色);
  transition: background-color 250ms;
  box-shadow: 2px 2px 4px 0 #111;
  font-size: 1.25rem;
  position: relative;
  z-index: 2;
}

:where(.滤镜区, .图像切换区) > button:hover {
  cursor: url("/Images/Common/鼠标-指向.cur"), pointer;
  background-color: var(--按钮背景色-悬停);
}

:where(.滤镜区, .图像切换区) > button:active {
  background-color: var(--按钮背景色-激活);
}

.图像切换区 {
  pointer-events: all;
}

#切换图像 {
  width: var(--按钮宽度);
  aspect-ratio: 1;
  border-radius: 999px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.图像序号列表 {
  position: absolute;
  z-index: 2;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.图像序号项 {
  position: absolute;
  bottom: 0;
  width: var(--按钮宽度);
  height: var(--按钮宽度);
  border-radius: 999px;
  overflow: hidden;
  background-color: lightslategrey;
  box-shadow: 2px 2px 4px 0 #111;
  opacity: 0;
  pointer-events: none;
  transition: 500ms;
}

.图像序号项:hover {
  cursor: url("/Images/Common/鼠标-指向.cur"), pointer;
}

.图像序号缩略图 {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(75%);
  transition: 250ms;
}

.图像序号缩略图:hover {
  filter: brightness(100%);
}

#滤镜开关 {
  width: var(--按钮宽度);
  aspect-ratio: 1;
  border-radius: 999px;
  flex-shrink: 0;
  pointer-events: all;
}

.滤镜区 {
  display: flex;
  align-items: flex-end;
  gap: 15px;
}

.滤镜列表 {
  width: calc(400px * 2 + 15px * 2);
  position: relative;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  justify-content: flex-end;
  gap: 25px;
  clip-path: inset(100% 0 0 100%);
  transition: 500ms;
}

.滤镜项 {
  position: relative;
  width: 400px;
  height: 100px;
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px #aaa;
  padding: 5px;
  background-color: #000a;
  transition: background-color 125ms;
}

.滤镜项:hover {
  /*background-color: #234d;*/
  background-color: #202a34dd;
}

.中文标签 {
  font-size: 1.05rem;
  padding: 0 5px;
  color: burlywood;
}

.英文标签 {
  padding: 0 5px;
  font-family: "Jetbrains Mono", Consolas, monospace;
  font-size: 0.95rem;
  color: #b2a090;
}

.重置 {
  position: absolute;
  top: 10px;
  right: 80px;
  width: 25px;
  height: 25px;
  background-color: #5e7735;
  color: white;
  border-radius: 999px;
  border: none;
  font-size: 0.8rem;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow:
    1px 1px 2px 0 #111,
    inset 0 0 0 1px transparent;
  transition: 50ms;
}

.重置:hover {
  box-shadow:
    1px 1px 2px 0 #111,
    inset 0 0 0 1px #ccc;
}

.重置:active {
  box-shadow:
    1px 1px 2px 0 #111,
    inset 0 0 0 2px #fff;
}

.开关容器 {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 60px;
  height: 27px;
}

.开关容器 > input[type="checkbox"] {
  appearance: none;
  width: 100%;
  height: 100%;
  border-radius: 999px;
  background-color: #9f1e2a;
  position: absolute;
  top: 0;
  left: 0;
}

.开关容器 > input[type="checkbox"]:hover {
  cursor: url("/Images/Common/鼠标-指向.cur"), pointer;
  outline: solid 2px #aaa;
}

.开关容器 > input[type="checkbox"]:checked {
  background-color: seagreen;
}

.off,
.on {
  pointer-events: none;
  color: #ddd;
  position: relative;
  height: 100%;
  font-size: 0.8rem;
  transition: 250ms;
  display: flex;
  justify-content: center;
  align-items: center;
}

.on {
  opacity: 0;
}

.指示球 {
  position: absolute;
  height: 20px;
  aspect-ratio: 1;
  border-radius: 999px;
  background-color: #ddd;
  top: 50%;
  left: 3px;
  translate: 0 -50%;
  pointer-events: none;
  transition: 250ms;
}

.开关容器:has(input[type="checkbox"]:checked) .on {
  opacity: 1;
}

.开关容器:has(input[type="checkbox"]:checked) .off {
  opacity: 0;
}

.开关容器:has(input[type="checkbox"]:checked) .指示球 {
  left: calc(100% - 20px - 3px);
}

.滑块区 {
  position: absolute;
  width: 90%;
  height: 50px;
  bottom: 10px;
  left: 50%;
  translate: -50% 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.滑块区:hover {
  cursor: url("/Images/Common/鼠标-默认.cur"), auto;
}

.滑块 {
  appearance: none;
  width: 100%;
  height: 10px;
  border-radius: 999px;
  background-color: #444;
  outline: solid 1px transparent;
  transition: outline 125ms;
}

#投影-颜色 {
  position: relative;
  background-image: linear-gradient(
    90deg,
    cornflowerblue 0%,
    hotpink calc((100% - var(--投影颜色彩色背景修剪比例)) / 4),
    #51bd66 calc((100% - var(--投影颜色彩色背景修剪比例)) / 2),
    darkcyan calc((100% - var(--投影颜色彩色背景修剪比例)) / 4 * 3),
    gold calc(100% - var(--投影颜色彩色背景修剪比例)),
    transparent calc(100% - var(--投影颜色彩色背景修剪比例))
  );
}

/*#投影-颜色::-webkit-slider-thumb {
  position: relative;
  z-index: 1;
}*/

.滤镜项:hover .滑块 {
  box-shadow: inset 0 0 0 1px var(--进度条颜色-已填充);
}

.滑块:hover {
  cursor: url("/Images/Common/鼠标-指向.cur"), pointer;
}

.滑块::-moz-range-thumb {
  appearance: none;
  width: var(--滤镜拇指宽度);
  height: 25px;
  background-image: linear-gradient(35deg, #678 20%, #abc 80%);
  clip-path: polygon(0% 0%, 100% 0%, 100% 66%, 50% 100%, 0% 66%);
  filter: drop-shadow(0 2px 2px #111);
  border: none;
}

.滑块::-webkit-slider-thumb {
  appearance: none;
  width: var(--滤镜拇指宽度);
  height: 25px;
  background-image: linear-gradient(35deg, #678 20%, #abc 80%);
  clip-path: polygon(0% 0%, 100% 0%, 100% 66%, 50% 100%, 0% 66%);
  filter: drop-shadow(0 2px 2px #111);
}

#棕褐色::-moz-range-thumb {
  translate: var(--拇指偏移修正-棕褐色) -8px;
}

#棕褐色::-webkit-slider-thumb {
  translate: var(--拇指偏移修正-棕褐色) -8px;
}

#饱和度::-moz-range-thumb {
  translate: var(--拇指偏移修正-饱和度) -8px;
}

#饱和度::-webkit-slider-thumb {
  translate: var(--拇指偏移修正-饱和度) -8px;
}

#透明度::-moz-range-thumb {
  translate: var(--拇指偏移修正-透明度) -8px;
}

#透明度::-webkit-slider-thumb {
  translate: var(--拇指偏移修正-透明度) -8px;
}

#反相::-moz-range-thumb {
  translate: var(--拇指偏移修正-反相) -8px;
}

#反相::-webkit-slider-thumb {
  translate: var(--拇指偏移修正-反相) -8px;
}

#色相::-moz-range-thumb {
  translate: var(--拇指偏移修正-色相) -8px;
}

#色相::-webkit-slider-thumb {
  translate: var(--拇指偏移修正-色相) -8px;
}

#灰度::-moz-range-thumb {
  translate: var(--拇指偏移修正-灰度) -8px;
}

#灰度::-webkit-slider-thumb {
  translate: var(--拇指偏移修正-灰度) -8px;
}

#投影::-moz-range-thumb {
  translate: var(--拇指偏移修正-投影) -8px;
}

#投影::-webkit-slider-thumb {
  translate: var(--拇指偏移修正-投影) -8px;
}

#对比度::-moz-range-thumb {
  translate: var(--拇指偏移修正-对比度) -8px;
}

#对比度::-webkit-slider-thumb {
  translate: var(--拇指偏移修正-对比度) -8px;
}

#亮度::-moz-range-thumb {
  translate: var(--拇指偏移修正-亮度) -8px;
}

#亮度::-webkit-slider-thumb {
  translate: var(--拇指偏移修正-亮度) -8px;
}

#模糊::-moz-range-thumb {
  translate: var(--拇指偏移修正-模糊) -8px;
}

#模糊::-webkit-slider-thumb {
  translate: var(--拇指偏移修正-模糊) -8px;
}

#投影-水平偏移::-moz-range-thumb {
  translate: var(--拇指偏移修正-投影-水平偏移) -8px;
}

#投影-水平偏移::-webkit-slider-thumb {
  translate: var(--拇指偏移修正-投影-水平偏移) -8px;
}

#投影-垂直偏移::-moz-range-thumb {
  translate: var(--拇指偏移修正-投影-垂直偏移) -8px;
}

#投影-垂直偏移::-webkit-slider-thumb {
  translate: var(--拇指偏移修正-投影-垂直偏移) -8px;
}

#投影-模糊::-moz-range-thumb {
  translate: var(--拇指偏移修正-投影-模糊) -8px;
}

#投影-模糊::-webkit-slider-thumb {
  translate: var(--拇指偏移修正-投影-模糊) -8px;
}

#投影-颜色::-moz-range-thumb {
  translate: var(--拇指偏移修正-投影-颜色) -8px;
}

#投影-颜色::-webkit-slider-thumb {
  translate: var(--拇指偏移修正-投影-颜色) -8px;
}

.投影项 .滑块区 {
  visibility: hidden;
}

.投影按钮区 {
  position: absolute;
  width: 100%;
  height: 50%;
  bottom: 5px;
  left: 0;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

.投影按钮 {
  position: relative;
  border: none;
  width: 20%;
  height: 33px;
  border-radius: 999px;
  background-color: transparent;
  background-image: linear-gradient(
    #345 50%,
    var(--投影按钮背景渐变-结束色) 50%
  );
  background-position: 100% 0;
  background-size: 100% 200%;
  color: #eee;
  font-family: 微软雅黑, sans-serif;
  overflow: hidden;
  user-select: none;
}

.投影项:hover .投影按钮 {
  background-image: linear-gradient(
    #357 50%,
    var(--投影按钮背景渐变-结束色) 50%
  );
}

.投影按钮.投影按钮重置 {
  animation: 投影按钮重置动画 500ms ease-out;
}

@keyframes 投影按钮重置动画 {
  from {
    background-position: 100% 0;
  }
  25% {
    background-position: 100% 100%;
  }
  75% {
    background-position: 100% 100%;
  }
  to {
    background-position: 100% 0;
  }
}

.投影项:hover .投影按钮:hover {
  background-image: linear-gradient(
    #579 50%,
    var(--投影按钮背景渐变-结束色) 50%
  );
  color: white;
}

.投影按钮:active {
  box-shadow: inset 0 0 0 1px #ddd;
}

.投影按钮 > span {
  padding-right: 2px;
  color: lightgreen;
  font-size: 1.1em;
  font-family: "Jetbrains Mono", Consolas, monospace;
}

.滑块值,
.最小值,
.最大值 {
  font-family: "Jetbrains Mono", Consolas, monospace;
}

.滑块值 {
  position: absolute;
  bottom: 0;
  left: 50%;
  translate: -50% 5px;
  color: lightskyblue;
  font-size: 0.9rem;
}

.最小值,
.最大值 {
  position: absolute;
  bottom: -5px;
  color: #888;
  font-size: 0.8rem;
}

.最小值 {
  left: 0;
}

.最大值 {
  right: 0;
}

.后缀 {
  font-family: "Jetbrains Mono", Consolas, monospace;
  padding-left: 2px;
}

.滑块值 > .后缀 {
  color: goldenrod;
}

.最小值 > .后缀,
.最大值 > .后缀 {
  color: darkgoldenrod;
}

@media screen and (height < 1150px) {
  .控制区 {
    scale: 0.95;
  }
}

@media screen and (height < 1050px) {
  .控制区 {
    scale: 0.85;
  }
}

@media screen and (height < 975px) {
  .控制区 {
    scale: 0.75;
  }
}