:root {
  --进度条颜色-已填充: rgb(41, 126, 78);
  --进度条颜色-未填充: rgba(224, 224, 224, 0.85);
  --拇指宽度: 16px;
}

.展示区 {
  width: 400px;
  display: flex;
  justify-content: center;
}

.控制区 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 15px;
}

input[data-coloris]::placeholder {
  font-size: 0.9rem;
}

input[type="text"] {
  width: calc(100% - 30px);
  background-color: #333;
  color: white;
  font-family: "JetBrains Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace;
  font-size: 1rem;
  padding: 4px 5px;
  border: none;
  border-radius: 3px;
}

input[type="text"]:focus {
  outline: solid 2px gray;
}

#颜色选择器 {
  border: solid 1px gray;
}

.clr-field {
  width: 350px;
}

.clr-picker {
  display: flex !important;
  width: 350px !important;
}

.clr-gradient {
  height: 150px !important;
}

.clr-alpha,
.clr-hue {
  height: 25px !important;
  margin: 10px 20px !important;
}

.clr-alpha input[type="range"],
.clr-hue input[type="range"] {
  top: 50% !important;
  translate: 0 -50% !important;
}

.clr-alpha div,
.clr-hue div {
  height: 35px !important;
  border-radius: 500px !important;
}

.clr-alpha div:before {
  border-radius: 500px !important;
}

.clr-hue div {
  box-shadow: inset 0 0 2px 1px black !important;
}

.clr-dark input.clr-color {
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 1rem;
}

.颜色区 {
  width: 420px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-family: "JetBrains Mono", Monaco, "Andale Mono", "Ubuntu Mono", monospace;
}

.颜色标题 {
  width: 185px;
  font-size: 1rem;
  color: #aaa;
  padding: 2px 0;
  text-align: right;
  font-weight: normal;
}

.颜色标题模式 {
  color: gold;
  margin-right: 3px;
}

.颜色值 {
  display: flex;
}

.hex前缀,
.rgba前缀 {
  color: lightcyan;
}

.hex前缀 {
  width: 10px;
  margin-right: 1px;
}

.颜色分值 {
  width: fit-content;
}

:where(.hex颜色值, .hex无透明颜色值, .hex简写颜色值, .hex简写无透明颜色值)
  .颜色分值 {
  margin: 0 1px;
}

.红值 {
  color: #ff5e9d;
}

.绿值 {
  color: lightgreen;
}

.蓝值 {
  color: #65c0ff;
}

.逗号 {
  margin-right: 5px;
  color: #aaa;
}

.括号 {
  color: #9e81d8;
}

.无透明度 {
  color: #a0bfdf;
}

.简写 {
  color: #7dc9c9;
}