:root {
  --输入元素宽度: 250px;
  --拇指宽度: 16px;
  --球直径: 50px;
  --动画延迟: 0s;
  --动画方向: normal;
  --动画持续时间: 0s;
  --动画填充模式: none;
  --动画迭代计数: 1;
  --动画名称: 模拟动画;
  --动画播放状态: running;
  --动画时间函数: ease;
  --动画持续时间渐变位置: 0%;
  --动画延迟渐变位置: 0%;
  --动画迭代计数渐变位置: 0%;
  --动画迭代计数渐变色: #999;
}

span, label {
  text-wrap: nowrap;
}

.CSS动画总区 {
  min-height: 600px;
  padding: 165px 5vh 1.5vh;
  display: grid;
  grid-template-columns: repeat(20, minmax(50px, 1fr));
  grid-template-rows: repeat(20, minmax(3vh, 1fr));
  gap: 10px;
  /*background: #111;*/
}

.分区 {
  width: 100%;
  height: 100%;
}

.动画区 {
  position: relative;
  display: flex;
  grid-area: 1 / 1 / 12 / 12;
  background-color: rgba(255, 255, 255, 0.03);
}

.调用区 {
  grid-area: 1 / 12 / 15 / -1;
  box-shadow: inset 0 0 0 1px #fff2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  padding: 1.25vh 10px;
  min-width: 625px;
}

.定义区 {
  grid-area: 12 / 1 / -1 / 12;
  box-shadow: inset 0 0 0 1px #fed2;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  padding: 0 10px;
}

.代码区 {
  grid-area: 15 / 12 / -1 / -1;
  box-shadow: inset 0 0 0 1px #def2;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  padding: 15px 10px;
}

.球 {
  position: absolute;
  width: var(--球直径);
  height: var(--球直径);
  border-radius: 999px;
  top: 0;
  left: 0;
}

.球 > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.球.球动画 {
  animation: var(--动画名称) var(--动画持续时间) var(--动画时间函数) var(--动画延迟) var(--动画迭代计数) var(--动画方向) var(--动画填充模式);
  animation-play-state: var(--动画播放状态);
}

@keyframes 模拟动画 {
  from {
    top: 0;
    left: 0;
  }
  20% {
    top: calc(100% - var(--球直径));
    left: calc((100% - var(--球直径)) / 5);
  }
  40% {
    top: 0;
    left: calc((100% - var(--球直径)) / 5 * 2);
  }
  60% {
    top: calc(100% - var(--球直径));
    left: calc((100% - var(--球直径)) / 5 * 3);
  }
  80% {
    top: 0;
    left: calc((100% - var(--球直径)) / 5 * 4);
  }
  to {
    top: calc(100% - var(--球直径));
    left: calc(100% - var(--球直径));
  }
}

#刷新动画 {
  position: absolute;
  top: 15px;
  right: 15px;
  padding: 10px 20px;
  border-radius: 999px;
  background-color: #fff9;
  color: black;
  transition: 75ms;
}

#刷新动画:hover {
  background-color: #fffb;
}

#刷新动画:active {
  background-color: #fffd;
}

.区标题 {
  text-align: center;
  width: fit-content;
  padding: 0.75vh 1vh;
  border-radius: 5px;
  background-image: linear-gradient(silver 40%, gray 100%);
  color: black;
  box-shadow: inset 0 0 2px 1px #fffa;
  font-weight: 550;
  font-size: max(14px, 1.25vh);
}

.参数区 {
  width: min(700px, 100%);
  display: flex;
  align-items: center;
  gap: 15px;
  border-radius: 10px;
  font-size: max(14px, 1.2vh);
}

.参数区:hover .参数标题 {
  color: #def;
}

.参数标签 {
  display: flex;
  align-items: center;
  gap: 15px;
  font-family: "JetBrains Mono", "Noto Sans SC", Consolas, monospace;
}

.参数标题 {
  width: calc(24ch);
  color: #cde;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-family: "JetBrains Mono", "Noto Sans SC", Consolas, monospace;
}

.参数代码 {
  color: #678;
}

input[type="text"] {
  font-family: "JetBrains Mono", "Noto Sans SC", Consolas, monospace;
  width: calc(var(--输入元素宽度) + 45px);
  height: 4ch;
  padding: 0 8px;
  border-radius: 5px;
  background-color: #222;
  font-size: 1.0125em;
  color: white;
  border: none;
  outline: solid 2px #def3;
  transition: 125ms;
}

input[type="text"]::placeholder {
  color: #def3;
}

input[type="text"]:hover {
  outline: solid 2px #def5;
}

input[type="text"]:focus {
  outline: solid 2px #def8;
  background-color: #1a1a1a;
}

#动画持续时间 {
  background-image: linear-gradient(
    90deg,
    #999 var(--动画持续时间渐变位置),
    #2a2a2a var(--动画持续时间渐变位置)
  );
}

#动画延迟 {
  background-image: linear-gradient(
    90deg,
    #999 var(--动画延迟渐变位置),
    #2a2a2a var(--动画延迟渐变位置)
  );
}

#动画迭代计数 {
  background-image: linear-gradient(
    90deg,
    var(--动画迭代计数渐变色) var(--动画迭代计数渐变位置),
    #2a2a2a var(--动画迭代计数渐变位置)
  );
}

input[type="range"] {
  appearance: none;
  width: var(--输入元素宽度);
  height: 10px;
  border-radius: 999px;
}

input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background-color: #999;
}

input[type="range"]::-moz-range-thumb {
  appearance: none;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background-color: #999;
}

input[type="radio"] {
  appearance: none;
}

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

#动画迭代计数-无限 + .参数标签 {
  border-radius: 5px;
}

.参数值 {
  width: 50px;
  display: flex;
  align-items: center;
}

.参数值数字 {
  font-family: "JetBrains Mono", "Noto Sans SC", Consolas, monospace;
  color: goldenrod;
}

.参数值单位 {
  margin-left: 5px;
  color: lightskyblue;
  translate: 0 -0.1em;
}

.单选容器组 {
  border-radius: 5px;
  overflow: hidden;
}

.单选容器 {
  position: relative;
  display: flex;
  align-items: center;
}

.单选容器 > input[type="radio"] {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

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

.单选容器:has(input[type="radio"]:hover) .参数标签 {
  background-color: #4a4a4a;
}

.单选容器:has(input[type="radio"]:checked) > .参数标签 {
  background: linear-gradient(silver 40%, gray 100%);
  color: black;
  font-weight: 550;
}

.单选容器:has(input[type="radio"]:checked) *[class*="代码"] {
  color: #021;
}

.单选容器 .参数标签 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0;
  text-align: center;
  pointer-events: none;
  padding: 5px 15px;
  background-color: #222;
}

.属性值中文 {
  width: 100%;
  height: 50%;
}

.单选容器组 {
  display: flex;
}

.无效 {
  opacity: 25%;
}

*[class*="代码"] {
  font-size: 0.85em;
}

.单选容器 *[class*="代码"] {
  color: #9ba;
}

.速写代码区 {
  font-family: "JetBrains Mono", "Noto Sans SC", Consolas, monospace;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  width: max(250px, 97.5%);
  font-size: max(14px, 1.15vh);
}

.速写代码区 > span {
  position: relative;
  border-radius: 5px;
  padding: 0.75ch 1ch;
}

.速写代码区 > span:not(:first-of-type):hover {
  background-color: #bdf2;
  box-shadow: inset 0 0 0 1px #555;
  cursor: url("/Images/Common/鼠标-指向.cur"), pointer;
}

.速写标题 {
  color: goldenrod;
}

.速写动画名称 {
  translate: 0 -0.1em;
}

.速写动画持续时间 {
  color: lightsteelblue;
}

.速写动画时间函数 {
  color: lightsalmon;
}

.速写动画延迟 {
  color: #90c6f8;
}

.速写动画迭代计数 {
  color: lightpink;
}

.速写动画方向 {
  color: lightgreen;
}

.速写动画填充模式 {
  color: lightseagreen;
}

.速写动画播放状态 {
  color: #ad8def;
}

.速写结尾分号 {
  color: gray;
}

.速写代码区 span[class*="代码"]:not(.代码提示) {
  font-size: 1em;
}

.代码提示 {
  position: absolute;
  bottom: calc(100% + 16px);
  left: 50%;
  translate: -50% 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  opacity: 0;
  pointer-events: none;
  outline: solid 2px #345;
  backdrop-filter: blur(10px);
  padding: 5px 8px;
  border-radius: 5px;
}

.提示中文 {
  color: #a0cdea;
  font-size: 1.15em;
}

.提示代码 {
  color: #c0ddea;
  width: fit-content;
  text-wrap: nowrap;
}

.速写代码区 > span:not(:first-of-type):hover .代码提示 {
  opacity: 1;
}

.总区:has(.名称参数区:hover) .速写动画名称 .代码提示,
.总区:has(.持续时间参数区:hover) .速写动画持续时间 .代码提示,
.总区:has(.时间函数参数区:hover) .速写动画时间函数 .代码提示,
.总区:has(.延迟参数区:hover) .速写动画延迟 .代码提示,
.总区:has(.迭代计数参数区:hover) .速写动画迭代计数 .代码提示,
.总区:has(.方向参数区:hover) .速写动画方向 .代码提示,
.总区:has(.填充模式参数区:hover) .速写动画填充模式 .代码提示,
.总区:has(.播放状态参数区:hover) .速写动画播放状态 .代码提示 {
  opacity: 1;
}

.总区:has(.名称参数区:hover) .速写动画名称,
.总区:has(.持续时间参数区:hover) .速写动画持续时间,
.总区:has(.时间函数参数区:hover) .速写动画时间函数,
.总区:has(.延迟参数区:hover) .速写动画延迟,
.总区:has(.迭代计数参数区:hover) .速写动画迭代计数,
.总区:has(.方向参数区:hover) .速写动画方向,
.总区:has(.填充模式参数区:hover) .速写动画填充模式,
.总区:has(.播放状态参数区:hover) .速写动画播放状态 {
  background-color: #bdf2;
  box-shadow: inset 0 0 0 1px #555;
}

.提示装饰 {
  position: absolute;
  top: 100%;
  left: 50%;
  translate: -50% -51%;
  width: 15px;
  height: 15px;
  background-color: #345;
  rotate: z 45deg;
  clip-path: polygon(0% 100%, 100% 0%, 100% 100%);
}

/* --------------------- ⬇️ 定义区 --------------------- */
.定义区-内部 {
  width: 100%;
  display: flex;
  font-family: "JetBrains Mono", "Noto Sans SC", Consolas, monospace;
}

.关键帧序列标识符区 {
  font-size: max(12px, 1.2vh);
  display: flex;
  align-items: center;
}

.关键帧序列标识符标签 {
  font-size: max(14px, 1.25vh);
  color: lightskyblue;
  padding-right: 10px;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
}

.关键帧序列标识符标签代码 {
  font-family: "JetBrains Mono", "Noto Sans SC", Consolas, monospace;
  color: #5c8eac;
}

.标识符前缀 {
  color: goldenrod;
  margin-right: 2px;
}

#关键帧序列标识符 {
  font-size: 1.0125em;
}

.关键帧区, .关键帧属性区 {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.关键帧区 {
  align-items: center;
}

.关键帧属性区 {
  align-items: flex-start;
  pointer-events: none;
  filter: brightness(25%);
}

.关键帧分区 {
  display: flex;
  align-items: center;
  padding: 5px 15px;
  border-radius: 5px;
  font-size: max(14px, 1.2vh);
}

.关键帧分区:hover {
  background-color: #13181d;
  box-shadow: inset 0 0 0 1px #345;
}

.关键帧时间点标题 {
  margin-bottom: 1vh;
  font-size: max(14px, 1.35vh);
  color: #8da0b4;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="number"] {
  -moz-appearance: textfield;
}

.关键帧复选框, .关键帧属性复选框 {
  appearance: none;
  width: max(12px, 1.25vh);
  height: max(12px, 1.25vh);
  border-radius: 2px;
  outline: solid 1px #b0c4de88;
  border: solid 3px transparent;
}

.关键帧复选框:hover, .关键帧属性复选框:hover {
  cursor: url("/Images/Common/鼠标-指向.cur"), pointer;
  outline: solid 1px #b0c4de;
}

.关键帧复选框:checked, .关键帧属性复选框:checked {
  outline: solid 1px #b0c4de;
  background: linear-gradient(lightsteelblue 0%, lightsteelblue 100%) padding-box, linear-gradient(transparent 0%, transparent 100%) border-box;
}

.关键帧标签 {
  padding-left: 15px;
  user-select: none;
  display: flex;
  align-items: center;
  color: lightslategray;
}

.关键帧标签:hover {
  cursor: url("/Images/Common/鼠标-指向.cur"), pointer;
}

.关键帧计数 {
  color: palegoldenrod;
  width: 25px;
  text-align: center;
  translate: 0 2.5%;
}

.箭头 {
  color: gray;
}

.关键帧时间点 {
  background-color: #222;
  color: #98adc2;
  border: none;
  outline: solid 1px #fff2;
  width: 4.5ch;
  margin-left: 3ch;
  padding: 2px 5px;
  font-size: 1em;
  font-family: "JetBrains Mono", "Noto Sans SC", Consolas, monospace;
  text-align: right;
}

.关键帧时间点:hover {
  outline: solid 1px #fff5;
}

.关键帧时间点:focus {
  outline: solid 1px #fffa;
}

.关键帧分区:has(.关键帧复选框:not(:checked)) .关键帧标签 {
  filter: brightness(50%);
}

.关键帧分区:has(.关键帧复选框:not(:checked)) .关键帧时间点 {
  pointer-events: none;
  filter: brightness(25%);
}

.关键帧分区:has(.关键帧复选框:not(:checked)) ~ .关键帧分区 {
  pointer-events: none;
  filter: brightness(50%);
}

.关键帧百分号 {
  margin-left: 8px;
  color: #ac9573;
}

.关键帧属性标签 {
  padding-right: 15px;
  user-select: none;
  width: 63px;
  text-align: right;
}

.关键帧属性标签:hover {
  cursor: url("/Images/Common/鼠标-指向.cur"), pointer;
}

.关键帧属性分区 {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: absolute;
  font-size: max(12px, 1.2vh);
}

.关键帧属性分区:not(:first-of-type) {
  opacity: 0;
  pointer-events: none;
}

.关键帧属性标题 {
  padding: 0 0 1.25vh 0;
  font-family: "JetBrains Mono", "Noto Sans SC", Consolas, monospace;
}

.关键帧标题文本 {
  color: #8da0b4;;
  margin-right: 15px;
}

.百分比数字 {
  color: lightsteelblue;
}

.百分比符号 {
  color: #ac9573;
  margin-left: 5px;
}

.关键帧属性容器 {
  padding: 5px 15px;
  display: flex;
  align-items: center;
  border-radius: 5px;
}

.关键帧属性容器:hover {
  background-color: #abc2;
}

/* --------------------- ⬆️ 定义区 --------------------- */