:root {
  --拇指宽度: 16px;
  --比例-背景尺寸: calc(100% * 3 / 7);
  --填充颜色: seagreen;
  --未填充颜色: rgb(224, 224, 224);
  --内容容器宽度: 100%;
  --内容容器高度: 100%;
  --宽度滑块位置: 42.857%;
  --高度滑块位置: 20%;
  --背景宽: 100%;
  --背景高: 100%;
  --范围滑块长度: 400px;
  --背景位置-X轴: 0%;
  --背景位置-Y轴: 0%;
  --位置轴宽度: 350px;
  --填充比例-X轴: 50%;
  --填充比例-Y轴: 50%;
  --x轴数字位移: 0px;
  --y轴数字位移: 0px;
  --背景尺寸标记偏移: calc(165px - 2.4px);
  --背景尺寸下划线宽度: calc(24px * 1.2);
}

.背景总区 {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 200px;
  height: calc(100vh - 50px);
  padding: 0;
  top: 50px;
}

.背景-展示区 {
  width: 750px;
  height: 750px;
  /*position: relative;*/
}

.背景-容器 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /*background: url("./背景.jpg") var(--背景位置-X轴) var(--背景位置-Y轴);*/
  /*outline: solid 5px #fff2;*/
  transition: background-size 0.5s;
  overflow: auto;
}

.背景-容器::-webkit-scrollbar {
  width: 10px;
}

.背景-容器::-webkit-scrollbar-thumb {
  background: darkolivegreen;
  border-radius: 30px;
}

.背景-容器::-webkit-scrollbar-thumb:hover {
  background: darkseagreen;
}

.内容容器 {
  width: var(--内容容器宽度);
  height: var(--内容容器高度);
  background: url("./背景.jpg") var(--背景位置-X轴) var(--背景位置-Y轴);
  border: solid 1px orangered;
}

.背景-操作区 {
  position: absolute;
  left: 60%;
  top: calc(50% - 847.33px / 2);
  backdrop-filter: blur(5px) brightness(50%);
  box-shadow: 0 0 5px 2px #000a;
  border-radius: 10px;
  /*clip-path: inset(-10px -10px -10px -10px);*/
  transition: 500ms;
}

.背景-操作区.已折叠 .属性区:not(.拖拽区) {
  /*clip-path: inset(-10px -10px calc(100% - 25px) -10px);*/
  height: 0;
  opacity: 0;
  visibility: hidden;
  background: none;
}

.拖拽区 {
  position: relative;
  background: linear-gradient(to top, #222c, #444c);
  height: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
  outline: none;
}

.属性区.拖拽区:hover {
  cursor: url("/Images/Common/鼠标-横向缩放.png"), ew-resize;
  outline: none;
  background: linear-gradient(to top, #ddd, #b2b2b2);
  color: black;
}

.拖拽区.拖拽中 {
  background: linear-gradient(to top, #eee, silver);
}

.拖拽图标 {
  width: 25px;
  height: 65%;
  filter: invert(1);
}

.拖拽图标 > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.属性区.拖拽区:not(.拖拽中):hover .拖拽图标 {
  filter: invert(0);
}

.折叠标签 {
  position: absolute;
  display: flex;
  height: 100%;
  width: 25px;
  top: 50%;
  right: 5px;
  translate: 0 -50%;
}

.折叠标签 .复选框 {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  appearance: none;
}

.折叠图标 {
  height: 100%;
  width: 100%;
  text-align: center;
  align-content: center;
}

.属性区.拖拽区:not(.拖拽中) :where(.折叠标签:hover, #folding:hover) .折叠图标 {
  font-weight: bold;
}

.折叠标签:has(#folding:checked) .折叠图标 {
  scale: 1 0.25;
}

.属性区.拖拽区.拖拽中 .折叠图标 {
  color: black;
}

.拖拽区:not(.拖拽中) :where(.折叠标签, .折叠标签 .复选框):hover {
  cursor: url("/Images/Common/鼠标-指向.cur"), pointer;
}

.属性区:first-child {
  border-radius: 10px 10px 0 0;
}

.属性区:last-child {
  border-radius: 0 0 10px 10px;
}

#宽度 {
  background-image: linear-gradient(90deg, var(--填充颜色) var(--宽度滑块位置), var(--未填充颜色) var(--宽度滑块位置));
}

#高度 {
  background-image: linear-gradient(90deg, var(--填充颜色) var(--高度滑块位置), var(--未填充颜色) var(--高度滑块位置));
}

.尺寸-宽度 .轴数字 {
  transform: translateY(100%)
    translateX(calc(((var(--位置轴宽度) - var(--拇指宽度)) * 0.42857) - var(--位置轴宽度) / 2 + var(--拇指宽度) / 2));
}

.尺寸-高度 .轴数字 {
  transform: translateY(100%)
    translateX(calc(((var(--位置轴宽度) - var(--拇指宽度)) * 0.2) - var(--位置轴宽度) / 2 + var(--拇指宽度) / 2));
}

#bg-size-marks {
  width: calc(100% + 8px);
  translate: -4px 0;
  position: relative;
  margin-top: 7px;
  display: flex;
  justify-content: space-between;
  font-size: 12px;
}

#bg-size-marks > option {
  width: 24px;
  text-align: center;
  position: relative;
  font-family: "JetBrains Mono", Consolas, monospace;
}

#bg-size-marks::after {
  position: absolute;
  content: "";
  width: var(--背景尺寸下划线宽度);
  height: 1px;
  top: 110%;
  left: var(--背景尺寸标记偏移);
  background-color: goldenrod;
  transform: scaleY(1.25);
  transition: left 0.25s;
}

.标签 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  margin: 20px 0;
  padding: 0 10px 0 0;
  font-family: "JetBrains Mono", Consolas, "Noto Sans SC", sans-serif, "Noto Sans Mono", monospace;
  text-wrap: nowrap;
}

.标签:has(+ input[type="radio"]) {
  filter: brightness(50%);
}

.背景-操作区:not(:has(.拖拽区.拖拽中)) .标签:has(+ input[type="radio"]):hover,
.背景-操作区:not(:has(.拖拽区.拖拽中)) .标签:has(+ input[type="radio"]:hover) {
  filter: brightness(75%);
}

.标签:has(+ input[type="radio"]:checked) {
  filter: brightness(100%);
}

label[for="bg-size"] {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0;
}

.属性中文 {
  font-size: 1.15rem;
  color: gold;
  user-select: none;
}

.属性代码 {
  font-size: 0.9rem;
  font-family: "JetBrains Mono", Consolas, monospace;
  color: goldenrod;
  user-select: none;
}

.范围滑块 {
  position: relative;
  -webkit-appearance: none;
  appearance: none;
  width: var(--范围滑块长度);
  height: 5px;
  border-radius: 10px;
}

#bg-size,
#bg-size-marks {
  filter: opacity(50%);
}

#bg-size {
  background-image: linear-gradient(
    90deg,
    var(--填充颜色) var(--比例-背景尺寸),
    var(--未填充颜色) var(--比例-背景尺寸)
  );
}

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

.范围滑块:focus {
  outline: none;
}

.范围滑块::-moz-range-thumb {
  position: relative;
  z-index: 1;
  -webkit-appearance: none;
  appearance: none;
  width: var(--拇指宽度);
  height: var(--拇指宽度);
  border-radius: 50px;
  background: no-repeat center/contain url(/Images/Interactive-Hub/进度条拇指/闪电球.png);
  transform: translateY(-5%) scale(1.5);
  filter: drop-shadow(0 0 2px black);
  border: none;
}

.范围滑块::-webkit-slider-thumb {
  position: relative;
  z-index: 1;
  -webkit-appearance: none;
  appearance: none;
  width: var(--拇指宽度);
  aspect-ratio: 1;
  border-radius: 50px;
  background: no-repeat center/contain url(/Images/Interactive-Hub/进度条拇指/闪电球.png);
  transform: translateY(-50%) scale(1.5);
  filter: drop-shadow(0 0 2px black);
}

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

.属性区 {
  position: relative;
  width: 450px;
  padding: 0 25px;
  display: flex;
  flex-direction: column;
  outline: solid 2px transparent;
  background: linear-gradient(to top, #222c, #444c);
  transition: 125ms;
}

.背景-操作区:not(:has(.拖拽区.拖拽中)) .属性区:not(.拖拽区):hover {
  z-index: 1;
  outline: solid 2px lightsteelblue;
  background: linear-gradient(to top, #181818cc, #282828cc);
}

.尺寸区 {
  height: 200px;
}

.背景附着选项区,
.尺寸-等比缩放 {
  display: flex;
  justify-content: center;
  align-items: center;
}

.值中文 {
  color: rgb(230, 131, 64);
  user-select: none;
}

.值代码 {
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.9rem;
  color: rgb(190, 107, 39);
  user-select: none;
}

:where(.背景附着选项区, .尺寸-等比缩放) input[type="radio"] {
  margin-right: 15px;
}

:where(.背景附着选项区, .尺寸-等比缩放) .标签 {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-left: 15px;
}

:where(.背景附着选项区, .尺寸-等比缩放) .标签:hover,
label[for="bg-repeat"]:hover {
  cursor: url("/Images/Common/鼠标-指向.cur"), pointer;
}

input[type="radio"],
#bg-repeat {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 12px;
  outline: 2px solid gray;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: outline-color 0.15s;
}

#bg-repeat {
  position: absolute;
  translate: 90px 0;
}

input[type="radio"]::after,
#bg-repeat::after {
  width: 70%;
  height: 70%;
  content: "";
  background-color: gold;
  clip-path: polygon(12% 50%, 43% 75%, 90% 5%, 100% 12%, 47% 95%, 5% 61%);
  visibility: hidden;
  pointer-events: none;
  transform: translate(-5%, 5%);
  transition: 0.05s;
}

input[type="radio"]:checked,
#bg-repeat:checked {
  background-color: rgb(47, 47, 47);
}

input[type="radio"]:checked::after,
#bg-repeat:checked::after {
  visibility: visible;
}

.背景-操作区:not(:has(.拖拽区.拖拽中)) input[type="radio"]:hover,
.背景-操作区:not(:has(.拖拽区.拖拽中)) #bg-repeat:hover {
  cursor: url("/Images/Common/鼠标-指向.cur"), pointer;
  animation: 单选框呼吸 0.5s ease-in-out infinite alternate;
}

.背景-操作区:not(:has(.拖拽区.拖拽中)) .尺寸-等比缩放 .标签:hover input[type="radio"] {
  animation: 单选框呼吸 0.5s ease-in-out infinite;
}

@keyframes 单选框呼吸 {
  from {
    outline-color: gray;
  }
  to {
    outline-color: white;
  }
}

.内容尺寸区,
.位置区 {
  height: 200px;
}

.尺寸,
.位置 {
  display: flex;
  justify-content: center;
  align-items: center;
}

.附着标题,
.位置标题 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 15px 0 0 0;
}

:where(.尺寸, .位置) .范围滑块 {
  width: var(--位置轴宽度);
}

#x-axis {
  background-image: linear-gradient(90deg, var(--填充颜色) var(--填充比例-X轴), var(--未填充颜色) var(--填充比例-X轴));
}

#y-axis {
  background-image: linear-gradient(90deg, var(--填充颜色) var(--填充比例-Y轴), var(--未填充颜色) var(--填充比例-Y轴));
}

.背景-操作区:not(:has(.拖拽区.拖拽中)) :where(.尺寸, .位置) input[type="range"]:hover + .轴数字 {
  background-color: #3d6464;
  /*color: black;*/
}

.轴数字 {
  background-color: black;
  color: white;
  font-size: 0.85rem;
  text-align: center;
  position: absolute;
  padding: 4px 5px 1px 5px;
  clip-path: polygon(0% 15%, 44% 15%, 50% 0%, 55% 15%, 100% 15%, 100% 100%, 0% 100%);
  width: 50px;
  left: calc(50% - 4px);
  transition: color 0.1s, background-color 0.1s;
}

.宽度数字,
.高度数字,
.x轴数字,
.y轴数字 {
  transform: translateY(100%);
  font-family: "JetBrains Mono", Consolas, monospace;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1px;
}

.单位 {
  color: silver;
}

.重复区 {
  height: 80px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

label[for="bg-repeat"] {
  display: flex;
  flex-direction: column;
  align-items: center;
}

@media screen and (height <= 1080px) {
  .背景-展示区 {
    width: 500px;
    height: 500px;
  }
}