:root {
  --进度条颜色-已填充: rgb(41, 126, 78);
  --进度条颜色-未填充: rgba(224, 224, 224, 0.85);
  --拇指宽度: 16px;
  --进度-X轴: 50%;
  --进度-Y轴: 50%;
  --进度-容器比例: 33.3333333%;
  --容器宽度: 90%;
  --容器比例: 1;
}

.总区 {
  gap: 6.5vw;
}

.对象匹配-图像区 {
  width: 600px;
  height: 600px;
  position: relative;
  z-index: 0;
}

.图像容器 {
  width: var(--容器宽度);
  height: calc(var(--容器宽度) / var(--容器比例));
  /*height: var(--容器高度);*/
  /*aspect-ratio: var(--容器比例);*/
  outline: solid 5px rgb(183, 49, 49);
}

.图像容器 > img {
  opacity: 0.75;
  pointer-events: none;
  position: relative;
  z-index: -1;
  transition:
    width 0.5s,
    height 0.5s,
    opacity 0.25s;
}

.选项区 {
  position: relative;
  z-index: 0;
  border-radius: 10px;
  outline: solid 1px #cde6;
  backdrop-filter: blur(10px);
  background-color: #182a38c0;
}

.选项分隔区 {
  width: 5px;
}

.选项类型 {
  /*outline: 1px solid rgb(177, 177, 177);*/
  /*padding: 15px;*/
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.盒子选项 {
  border-bottom: solid 5px #cde6;
  padding: 15px 15px 0 15px;
}

.图像选项 {
  /*padding-bottom: 30px;*/
  padding: 15px 15px 0 15px;
}

.盒子控件组 {
  display: flex;
  flex-direction: column;
  /*gap: 50px;*/
}

#容器比例 {
  background-image: linear-gradient(
    90deg,
    var(--进度条颜色-已填充) var(--进度-容器比例),
    transparent var(--进度-容器比例)
  );
}

.范围条数字区.容器比例数字区 {
  left: calc(var(--进度-容器比例) + var(--拇指宽度) * (0.5 - 0.3333333333333));
}

.控件-溢出 {
  padding: 15px 0;
  border-top: solid 1px #cde3;
}

/*.图像-控件组 .控件-图像源 {
  padding-top: 0;
}*/

.控件-图像源 .控件子组 {
  position: relative;
}

.控件-图像源 .标签 {
  width: 100px;
  height: 100px;
  padding: 0;
}

.控件-图像源 .标签 img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: brightness(25%) drop-shadow(2px 2px 2px #0005);
  transition: 125ms;
}

.控件-图像源 .控件子组:hover .标签 img {
  filter: brightness(40%) drop-shadow(2px 2px 2px #0005);
}

.控件-图像源 .控件子组:has(.单选框:checked) .标签 img {
  filter: brightness(100%) drop-shadow(2px 2px 2px #0005);
}

.控件-图像源 .单选框 {
  position: absolute;
  width: 100%;
  height: 100%;
  appearance: none;
  top: 0;
  left: 0;
  outline: none;
}

.控件-图像源 .单选框::after {
  display: none;
}

.图像-控件组 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

.图像-控件组 > div:nth-child(2) {
  border-top: solid 1px #cde3;
  width: 100%;
}

.图像-控件组 > div:nth-child(2),
.图像-控件组 > div:nth-child(3) {
  border-bottom: solid 1px #cde3;
}

.选项标题 {
  font-weight: bolder;
  font-size: 1.25rem;
  /*color: rgb(77, 196, 128);*/
  color: yellowgreen;
  padding: 5px 0;
  text-align: center;
}

.控件子组 {
  display: flex;
  align-items: center;
}

.控件子组:hover .中文 {
  color: #75b0e2;
}

.控件子组:hover .代码 {
  color: silver;
}

.控件子组:has(.单选框:checked) .中文 {
  color: lightblue;
}

.控件子组:has(.单选框:checked) .代码 {
  color: white;
}

.盒子选项 .控件子组 {
  justify-content: center;
}

.控件类型区 {
  width: 100%;
  display: flex;
  gap: 10px;
  padding: 15px 0;
}

.控件类型区:hover {
  background-image: linear-gradient(
    90deg,
    transparent 0%,
    #fff1 25%,
    #fff1 75%,
    transparent 100%
  );
}

.控件-容器尺寸 {
  padding: 15px 0 45px 0;
}

.控件-对象位置 {
  padding: 15px 0 45px;
}

.控件类型区 > p {
  width: 120px;
}

.属性中文 {
  color: orange;
  text-align: right;
  align-content: center;
}

.属性中文:not(:has(+ .属性代码)) {
  position: relative;
  margin-right: 20px;
}

.值中文 {
  color: steelblue;
  text-align: center;
  text-wrap: nowrap;
}

.属性名称 {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-right: 20px;
}

.属性名称::before,
  /*.属性名称:not(:has(.属性代码)) .属性中文::before,*/
.属性中文:not(:has(+ .属性代码))::before {
  position: absolute;
  content: "";
  width: 1px;
  height: 100%;
  right: -15px;
  top: 0;
  background-color: #fff1;
}

.属性名称:not(:has(.属性代码)) .属性中文 {
  margin-right: 0;
}

.属性名称:not(:has(.属性代码)) .属性中文::before {
  display: none;
}

.属性代码 {
  font-size: 0.8rem;
  font-family: "JetBrains Mono", Consolas, monospace;
  text-align: right;
  color: tomato;
}

.控件类型操作区 {
  /*display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px 25px;
  place-content: center start;*/
  display: flex;
  align-content: center;
  gap: 25px;
}

.容器尺寸操作区,
.对象位置操作区 {
  display: flex;
  flex-direction: column;
  gap: 45px;
}

.范围条数字区 {
  display: flex;
  justify-content: center;
  gap: 1px;
}

.范围条数字区 .单位 {
  color: lightskyblue;
}

.代码 {
  font-family: "JetBrains Mono", Consolas, monospace;
}

.控件子组 label:hover,
.控件子组 input:hover {
  cursor: url("/Images/Common/鼠标-指向.cur"), pointer;
}

label > .代码 {
  font-size: 0.8rem;
  color: gray;
}

.对象位置操作区 > .控件子组 {
  position: relative;
}

.盒子选项 .控件子组 > label,
.控件-图像尺寸 .控件子组 > label,
.控件-对象匹配 .控件子组 > label {
  padding: 0 8px 0 0;
  display: flex;
  flex-direction: column;
}

.控件子组 > label.label-x轴 {
  padding: 0;
}

.label-x轴,
.label-y轴 {
  /*width: 50px;*/
  margin-right: 5px;
  text-align: right;
}

input[type="radio"] /*,
input[type="checkbox"] */ {
  /* background-color: rgb(111, 182, 142); */
  appearance: none;
  width: 15px;
  height: 15px;
  position: relative;
  outline: solid 1px gray;
  display: flex;
  justify-content: center;
  align-items: center;
}

/*input[type="checkbox"]::after {
  width: 15px;
  height: 15px;
  content: "";
  background-color: gold;
  clip-path: polygon(12% 50%, 43% 75%, 90% 5%, 100% 12%, 47% 95%, 5% 61%);
  transform: scale(0);
  transition: 0.05s;
}

input[type="checkbox"]:checked::after {
  transform: scale(0.8);
}*/

input[type="radio"]::after {
  width: 60%;
  height: 60%;
  /* position: absolute; */
  content: "";
  box-shadow: inset 15px 15px gold;
  transform: scale(0);
  transition: 0.05s;
}

input[type="radio"]:checked::after {
  transform: scale(1);
}

label,
input {
  -webkit-user-drag: none;
  -webkit-user-select: none;
  user-select: none;
}

.滑块区 {
  width: 300px;
  position: relative;
  display: flex;
  align-items: center;
  margin-left: 10px;
}

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 300px;
  height: 5px;
  position: relative;
  border-radius: 5px;
}

input[type="range"]:focus {
  outline: none;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: var(--拇指宽度);
  aspect-ratio: 1;
  background: no-repeat center/contain
    url(/Images/Interactive-Hub/进度条拇指/闪电球.png);
  filter: drop-shadow(0 0 2px black);
  transform: translateY(-50%) scale(1.25);
  position: relative;
  z-index: 1;
}

input[type="range"]::-moz-range-thumb {
  appearance: none;
  width: var(--拇指宽度);
  aspect-ratio: 1;
  background: no-repeat center/contain
    url(/Images/Interactive-Hub/进度条拇指/闪电球.png);
  filter: drop-shadow(0 0 2px black);
  transform: translateY(-5%) scale(1.25);
  position: relative;
  z-index: 1;
  border: none;
}

input[type="range"]::-webkit-slider-thumb:hover {
  cursor:
    url(/Images/Common/鼠标-横向缩放.png) 16 6,
    ew-resize;
}

#对象位置-X轴 {
  background-image: linear-gradient(
    90deg,
    var(--进度条颜色-已填充) var(--进度-X轴),
    var(--进度条颜色-未填充) var(--进度-X轴)
  );
}

#对象位置-Y轴 {
  background-image: linear-gradient(
    90deg,
    var(--进度条颜色-已填充) var(--进度-Y轴),
    var(--进度条颜色-未填充) var(--进度-Y轴)
  );
}

.范围条数字区 {
  position: absolute;
  width: 50px;
  height: 30px;
  border-radius: 3px;
  background: rgb(41, 126, 78);
  top: 300%;
  left: 50%;
  transform: translateX(-50%);
  clip-path: polygon(
    0% 15%,
    40% 15%,
    50% 0%,
    60% 15%,
    100% 15%,
    100% 100%,
    0% 100%
  );
  display: flex;
  align-items: flex-end;
  justify-content: center;
  color: white;
  font-size: 0.8rem;
  font-family: "JetBrains Mono", Consolas, monospace;
  padding: 0 0 4px;
  transition: background-color 0.1s;
}

.控件子组:hover input[type="radio"] /*,
.控件子组:hover input[type="checkbox"]*/ {
  animation: 控件子组鼠标悬挂时动画 1s ease-in-out infinite alternate;
}

@keyframes 控件子组鼠标悬挂时动画 {
  from {
    outline-color: gray;
    outline-width: 1px;
  }
  50% {
    outline-color: white;
    outline-width: 2px;
  }
  to {
    outline-color: gray;
    outline-width: 1px;
  }
}

.控件子组:hover .范围条数字区,
input[type="range"]:focus-visible ~ .范围条数字区 {
  background-color: rgb(177, 58, 58);
  color: white;
}