:root {
  --进度条颜色-已填充: rgb(41, 126, 78);
  --进度条颜色-未填充: rgba(224, 224, 224, 0.85);
  --拇指宽度: 16px;
  --进度-X轴: 50%;
  --进度-Y轴: 50%;
  --数字宽度: 50px;
  --数字高度: 50px;
  --数字间隙: 20px;
  --数字过渡时长: 500ms;
}

input[type="range"] {
  height: 6px;
  border-radius: 999px;
  accent-color: greenyellow;
}

input[type="range"]::-webkit-slider-thumb {
  scale: 1.25;
}

.总区 {
  gap: 150px;
}

#排序区 {
  height: 500px;
  width: 900px;
}

.数字区 {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--数字间隙);
  height: 200px;
  width: calc(var(--数字宽度) * 10 + var(--数字间隙) * 9);
  position: relative;
  margin: 0 auto;
}

.数字 {
  width: var(--数字宽度);
  height: var(--数字高度);
  display: flex;
  justify-content: center;
  align-items: center;
  border: solid 2px #888;
  position: absolute;
  z-index: 1;
  left: 0;
  top: 50%;
  transition: var(--数字过渡时长);
}

.数字.比较对象数字 {
  border: solid 2px #c23671;
  background-color: rgb(42, 64, 91);
}

.数字.操作中数字 {
  border: solid 2px lightgreen;
  background-color: rgb(60, 87, 121);
}

.数字.已确定数字 {
  background-color: brown;
  color: white;
  border: gold;
}

.数字.交换中数字 {
  background-color: rgb(42, 64, 91);
  border: solid 2px deepskyblue;
}

.数字索引 {
  position: absolute;
  top: 25%;
  font-family: consolas, monospace;
  color: #888;
  font-size: 0.9em;
  transition: var(--数字过渡时长);
}

.i索引,
.j索引 {
  position: absolute;
  font-family: consolas, monospace;
  opacity: 0;
  transition: var(--数字过渡时长);
}

.i索引 {
  top: 10%;
  left: 0;
  translate: calc(var(--数字宽度) * 1.5 + var(--数字间隙) - 50%);
  color: white;
  width: 25px;
  height: 25px;
  border-radius: 500px;
  background-color: #456;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
}

.j索引 {
  font-size: 1.2rem;
  font-weight: bold;
  left: 0;
  top: 10%;
  translate: calc(var(--数字宽度) * 0.5 - 50%) 0;
  color: #a6ddff;
}

.数字记录框 {
  width: var(--数字宽度);
  height: var(--数字高度);
  position: absolute;
  left: 0;
  top: 50%;
  translate: calc(var(--数字宽度) * 1.5 + var(--数字间隙) - 50%) 45px;
  border: solid 2px transparent;
  background-color: #abc3;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: var(--数字过渡时长);
}

.数字记录框内数字 {
  position: relative;
  transition: var(--数字过渡时长);
  z-index: 10;
}

.数字记录框.操作中数字 {
  border: solid 2px lightgreen;
  background-color: rgb(60, 87, 121);
}

.数字记录框描述 {
  width: 100%;
  position: absolute;
  top: calc(100% + 7px);
  left: 0;
  font-size: 0.85em;
  text-wrap: nowrap;
  color: goldenrod;
  display: flex;
  justify-content: center;
  align-items: center;
}

.控制区 {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 50px;
  margin-top: 50px;
}

.设置区 {
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 15px;
}

label {
  user-select: none;
}

.动画速率标签 {
  display: flex;
  justify-content: center;
  align-items: center;
}

.标签文本 {
  padding: 5px 10px;
}

#动画速率:hover {
  cursor: url("/Images/Common/鼠标-横向缩放.png"), ew-resize;
}

#动画速率数值 {
  margin-left: 10px;
  width: 30px;
  height: fit-content;
  display: inline-flex;
  justify-content: flex-start;
  align-items: center;
  font-family: "Jetbrains Mono", Consolas, monospace;
}

.乘号 {
  color: #aaa;
  margin-right: 1px;
}

.动画速率数值文本 {
  color: lightcyan;
}

.复选区 {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
}

.复选区 > label {
  display: flex;
  align-items: center;
}

.复选区 > label:hover {
  cursor: url("/Images/Common/鼠标-指向.cur"), pointer;
}

input[type="checkbox"] {
  position: relative;
  appearance: none;
  width: 20px;
  height: 20px;
  border: solid 1px #888;
  background-color: #32435a;
  transition: 250ms;
}

label:hover > input[type="checkbox"] {
  background-color: #475b78;
  border: solid 1px #bbb;
}

input[type="checkbox"]:hover {
  cursor: url("/Images/Common/鼠标-指向.cur"), pointer;
}

input[type="checkbox"]:checked::before {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  content: "\f00c";
  font-family: "Font Awesome 6 Free", ui-rounded;
  font-weight: bolder;
  color: lightgreen;
}

#开始运行 {
  width: 110px;
  height: 40px;
  border-radius: 500px;
  background-color: rgb(83, 95, 107);
  color: white;
  font-size: 0.95rem;
  border: none;
  transition: 250ms;
  user-select: none;
}

#开始运行:hover {
  background-color: rgb(104, 122, 139);
  cursor: url("/Images/Common/鼠标-指向.cur"), pointer;
}

#开始运行:active {
  background-color: rgb(124, 141, 159);
}

.代码演示区 {
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.外循环区,
.内循环区 {
  display: flex;
  align-items: center;
}

.外循环区 {
  background-color: rgb(62, 137, 102);
  padding: 10px 20px;
  border-radius: 10px;
}

.内循环区 {
  font-size: 0.9rem;
}

.循环文本 {
  width: 75px;
  padding: 5px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #444;
  border-radius: 500px;
  margin-right: 10px;
}

.内循环区 .循环文本 {
  color: #ccc;
}

.等号 {
  width: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: lightblue;
}

.外循环索引,
.内循环索引,
.外循环索引数字,
.内循环索引数字 {
  width: 25px;
  height: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgb(117, 94, 61);
  border-radius: 5px;
  font-family: consolas, monospace;
}

.外循环索引,
.内循环索引 {
  color: #bbb;
}

.内循环索引,
.内循环索引数字 {
  background-color: #465d21;
}

.外循环区.外循环数字动画 {
  animation: 外循环数字动画 0.75s ease-out;
}

@keyframes 外循环数字动画 {
  0% {
    scale: 1;
  }
  50% {
    scale: 1.5;
  }
  100% {
    scale: 1;
  }
}

.外循环轮,
.内循环轮 {
  width: 75px;
  height: 30px;
  border-radius: 5px;
  margin-left: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: consolas, 微软雅黑, sans-serif;
}

.内循环轮 {
  color: #bbb;
}

.外循环轮数字,
.内循环轮数字 {
  width: 25px;
  height: 25px;
  border-radius: 5px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  color: rgb(118, 202, 105);
  background-color: rgb(44, 78, 141);
  margin: 0 5px;
}

.内循环轮数字 {
  color: gold;
  background-color: rgb(57, 94, 162);
}