:root {
  --进度条颜色-已填充: rgb(41, 126, 78);
  --进度条颜色-未填充: rgba(224, 224, 224, 0.85);
  --拇指宽度: 16px;
  --多边形修剪序号刷新背景色: #577bab;
  --向内修剪比例-上: 0%;
  --向内修剪比例-右: 0%;
  --向内修剪比例-下: 0%;
  --向内修剪比例-左: 0%;
  --圆形半径: 0%;
  --椭圆水平半径: 0%;
  --椭圆垂直半径: 0%;
}

body {
  width: 100dvw;
}

.综合区 {
  position: relative;
  height: max(650px, calc(100vh - 250px));
  aspect-ratio: calc(16 / 10);
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.图像区,
.综合区 {
  position: relative;
}

.图像区 {
  width: 85%;
  height: 100%;
  border: solid 2px #aaa;
  box-shadow: 4px 4px 8px 0 #0008;
}

.操作区 {
  width: 15%;
  height: 100%;
}

.图像分区 {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  transition: 500ms;
}

.图像分区.未激活图像分区 {
  visibility: hidden;
  opacity: 0;
}

.图像容器 {
  position: relative;
  width: 100%;
  height: 100%;
  user-select: none;
}

/*.图像容器:has(.多边形修剪指示区) {
  filter: drop-shadow(0 0 1px white);
}*/

.多边形修剪图分区:not(.未激活图像分区) .图像容器:hover,
.圆形修剪图分区:not(.未激活图像分区) .图像容器:hover,
.椭圆修剪图分区:not(.未激活图像分区) .图像容器:hover {
  cursor: url("/Images/Common/鼠标-指向.cur"), pointer;
}

.图像容器 > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.圆形图像容器 > img,
.椭圆图像容器 > img {
  transition: clip-path 250ms;
}

.原图分区 .图像 {
  filter: brightness(30%);
}

.点击效果图容器 {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  width: 25%;
  aspect-ratio: 1;
  pointer-events: none;
  opacity: 0;
}

.点击效果图 {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.点击效果图.点击效果动画 {
  animation: 点击效果图动画 500ms ease-out 0ms 2;
}

@keyframes 点击效果图动画 {
  from {
    scale: 1;
  }
  50% {
    scale: 2;
  }
  to {
    scale: 1;
  }
}

.多边形修剪指示区 {
  position: absolute;
  translate: -50% -150%;
  width: 103px;
  height: 40px;
  display: flex;
  border-radius: 5px;
  background-color: #111c;
  box-shadow: inset 0 0 1px 1px silver;
}

.修剪指示区关闭按钮 {
  position: absolute;
  top: 0;
  left: 0;
  translate: -40% -60%;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background-color: #333;
  opacity: 0;
  outline: solid 2px #fff8;
  font-size: 0.75rem;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: outline 75ms;
  pointer-events: none;
}

.多边形修剪指示区:not(.拖拽中):hover .修剪指示区关闭按钮 {
  opacity: 1;
  pointer-events: auto;
}

.修剪指示区关闭按钮:hover {
  outline: solid 2px white;
  cursor: url("/Images/Common/鼠标-指向.cur"), pointer;
  background-color: #777;
}

.指示区三角箭头 {
  position: absolute;
  top: 100%;
  left: 50%;
  translate: -50% 0;
  width: 15px;
  height: 10px;
  background-image: linear-gradient(silver 0%, #a0a0a0 100%);
  clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
}

.修剪序号 {
  width: 25%;
  height: 100%;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  /*background-color: #111111d5;*/
  color: gold;
  font-family: "Jetbrains Mono", Consolas, monospace;
}

.修剪序号.修剪序号刷新中 {
  animation: 修剪序号刷新动画 0.5s ease-out;
}

@keyframes 修剪序号刷新动画 {
  from {
    box-shadow: inset 0 0 0 0 var(--多边形修剪序号刷新背景色);
  }
  35% {
    box-shadow: inset 0 0 0 20px var(--多边形修剪序号刷新背景色);
  }
  65% {
    box-shadow: inset 0 0 0 20px var(--多边形修剪序号刷新背景色);
  }
  to {
    box-shadow: inset 0 0 0 0 var(--多边形修剪序号刷新背景色);
  }
}

.修剪数据区 {
  width: 70%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.修剪数据分区 {
  width: 100%;
  height: 50%;
  font-size: 0.8rem;
  display: flex;
  font-family: Consolas, monospace;
  color: #aaa;
}

.修剪数据-坐标类 {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 45%;
  padding-right: 3px;
  color: lightgreen;
  text-wrap: no-wrap;
}

.修剪数据-坐标数据 {
  width: 55%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding-left: 3px;
  color: white;
}

.多边形修剪百分比符号 {
  color: lightskyblue;
  padding-left: 2px;
}

.代码容器 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  visibility: hidden;
  pointer-events: none;
  opacity: 0;
  transition: 250ms;
}

.代码容器.代码容器可见 {
  visibility: visible;
  opacity: 1;
}

pre[class*="language-"] {
  background-color: #345d;
  margin: 0;
}

code[class*="language-"],
pre[class*="language-"] {
  font-family: "Jetbrains Mono", Consolas, "Noto Sans SC", monospace;
}

div.code-toolbar > .toolbar {
  opacity: 1;
  pointer-events: all;
}

.toolbar-item {
  margin: 0 2px;
}

div.code-toolbar > .toolbar > .toolbar-item > button,
div.code-toolbar > .toolbar > .toolbar-item > span {
  color: white;
}

div.code-toolbar > .toolbar > .toolbar-item > button {
  transition: 125ms;
}

div.code-toolbar > .toolbar > .toolbar-item > button:hover {
  background-color: rgb(224, 224, 224, 0.85);
  color: #223644;
}

.token.space,
.token.cr:before,
.token.lf:before,
.token.space:before,
.token.tab:not(:empty):before {
  visibility: hidden;
}

.操作区 {
  display: flex;
  flex-direction: column;
}

.操作分区 {
  width: 100%;
  background-image: linear-gradient(#333943 0%, #535963 100%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
}

.操作分区.未激活操作分区:hover {
  filter: brightness(50%);
  box-shadow: inset 0 0 1px 2px white;
}

.多边形操作分区 {
  flex-grow: 2.5;
}

.向内操作分区 {
  flex-grow: 3.5;
}

.圆形操作分区 {
  flex-grow: 3;
}

.椭圆操作分区 {
  flex-grow: 3.5;
}

.操作分区.未激活操作分区 {
  cursor: url("/Images/Common/鼠标-指向.cur"), pointer;
  filter: brightness(35%);
}

.操作分区中文标题 {
  font-size: 22px;
  color: mediumseagreen;
}

.操作分区英文标题 {
  font-size: 15px;
  font-weight: normal;
  font-family: "Jetbrains Mono", Consolas, monospace;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.代码按钮 {
  width: 25px;
  height: 25px;
  border-radius: 999px;
  border: none;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #3d6262;
  color: #93c7ef;
  outline: solid 2px transparent;
  font-size: 12px;
  box-shadow: 1px 1px 2px 0 #0008;
  transition: 50ms;
}

.代码按钮:hover {
  outline: solid 2px #fff6;
  color: #b5d9f6;
}

.代码按钮:active {
  outline: solid 2px #fffd;
  color: #c9e2f6;
}

.修剪选项区 {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  padding: 5px 0;
}

.操作选项按钮 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: none;
  background-color: #aba;
  transition: 50ms;
}

.操作选项按钮:hover {
  background-color: #cdc;
}

.操作选项按钮:active {
  background-color: #efe;
}

.操作选项按钮 {
  filter: brightness(50%);
}

.操作分区 .重置按钮 {
  margin-top: min(2.5%, 3px);
  width: clamp(75px, 45%, 100px);
  height: 35px;
  border-radius: 999px;
  border: none;
  background-color: #54616f;
  color: white;
  font-size: 1rem;
  box-shadow: 1px 1px 4px 0 #0006;
  transition: 75ms;
  user-select: none;
}

.未激活操作分区 .重置按钮,
.未激活操作分区 .代码按钮,
.未激活操作分区 .操作选项按钮,
.未激活操作分区 input[type="range"] {
  pointer-events: none;
}

.操作分区 .重置按钮:hover {
  background-color: #6b7a89;
}

.操作分区 .重置按钮:active {
  background-color: #798999;
}

.向内修剪滑块区 {
  position: relative;
  width: 100%;
  height: 45px;
  display: flex;
  justify-content: center;
  align-items: center;
}

label:hover {
  cursor: url("/Images/Common/鼠标-默认.cur"), auto;
}

.向内修剪标签 {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
  visibility: hidden;
  opacity: 0;
}

.向内修剪标签 > * {
  flex-shrink: 0;
}

.滑块 {
  appearance: none;
  width: 90%;
  height: 10px;
  border-radius: 99px;
  background-color: #111;
  user-select: none;
}

#向内修剪滑块-上 {
  background-image: linear-gradient(90deg, #aba var(--向内修剪比例-上), transparent var(--向内修剪比例-上));
}

#向内修剪滑块-右 {
  background-image: linear-gradient(90deg, #aba var(--向内修剪比例-右), transparent var(--向内修剪比例-右));
}

#向内修剪滑块-下 {
  background-image: linear-gradient(90deg, #aba var(--向内修剪比例-下), transparent var(--向内修剪比例-下));
}

#向内修剪滑块-左 {
  background-image: linear-gradient(90deg, #aba var(--向内修剪比例-左), transparent var(--向内修剪比例-左));
}

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

.滑块::-moz-range-thumb {
  appearance: none;
  width: 25px;
  height: 25px;
  border-radius: 99px;
  background-color: #aba;
  box-shadow: 1px 1px 2px #555;
  border: none;
}

.滑块::-webkit-slider-thumb {
  appearance: none;
  width: 25px;
  height: 25px;
  border-radius: 99px;
  background-color: #aba;
  box-shadow: 1px 1px 2px #555;
}

.向内修剪数值-百分比符号 {
  margin-left: 2px;
  color: gold;
}

/* ------------------------------------------------------------- */

.圆心区 {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% calc(-100% + 8px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  transition: top 250ms, left 250ms;
}

.圆心区.圆心区可见 {
  visibility: visible;
  opacity: 1;
}

.圆心数据区 {
  width: 95px;
  height: 45px;
  padding-left: 15px;
  border-radius: 5px;
  background-color: #000c;
  font-family: "Jetbrains Mono", Consolas, monospace;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

.圆心标题 {
  color: lightgreen;
}

.圆心数值 {
  color: lightcyan;
}

.圆心数值后缀 {
  margin-left: 2px;
  color: orange;
}

.圆心点 {
  width: 16px;
  height: 16px;
  border-radius: 99px;
  background-color: linen;
  box-shadow: 0 0 3px 1px black;
}

.圆形滑块区,
.椭圆滑块区 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 100%;
  padding: 10px 0 5px 0;
}

#圆形半径滑块 {
  background-image: linear-gradient(90deg, #aba var(--圆形半径), transparent var(--圆形半径));
  user-select: none;
}

.滑块数据 {
  font-family: "Jetbrains Mono", Consolas, monospace;
  color: lightcyan;
}

.滑块数据后缀 {
  font-family: "Jetbrains Mono", Consolas, monospace;
  margin-left: 2px;
  color: gold;
}

.椭圆半径区 {
  width: 100%;
}

#椭圆水平半径滑块 {
  background-image: linear-gradient(90deg, #aba var(--椭圆水平半径), transparent var(--椭圆水平半径));
  user-select: none;
}

#椭圆垂直半径滑块 {
  background-image: linear-gradient(90deg, #aba var(--椭圆垂直半径), transparent var(--椭圆垂直半径));
  user-select: none;
}

@media screen and (height < 1000px) {
  .操作分区中文标题 {
    font-size: 18px;
  }

  .操作分区英文标题 {
    font-size: 13px;
  }

  .代码按钮 {
    width: 22px;
    height: 22px;
  }

  .滑块 {
    height: 6px;
  }

  .滑块::-webkit-slider-thumb {
    width: 18px;
    height: 18px;
  }

  .滑块标题,
  .滑块数据 {
    font-size: 0.75rem;
  }

  .操作选项按钮 {
    width: 25px;
    height: 25px;
  }

  .操作分区 .重置按钮 {
    height: 30px;
  }
}