:root {
  --边框尺寸: 50px;
  --内边距尺寸: 50px;
  --外边距尺寸: 50px;
  /*--内容尺寸: 300px;
  --内容盒子宽度: 300px;
  --内容盒子高度: 300px;*/
  --盒子宽度: 300px;
  --盒子高度: 300px;
  --宽度修剪比例: 75%;
  --高度修剪比例: 75%;
  /*--内容修剪比例: 25%;*/
  --内边距修剪比例: 50%;
  --边框修剪比例: 50%;
  --外边距修剪比例: 50%;
  --拇指尺寸: 20px;
  --拇指背景色: darkgoldenrod;
  --滑块前缀文本宽度: 64px;
  --滑块区鼠标悬停背景色: #fff2;
  --滑块填充色: darkgoldenrod;
  --滑块未填充色: #555;
  --框线颜色: #defd;
}

.总区 span[class$="中文"] {
  color: lightskyblue;
}

.总区 span[class$="代码"] {
  color: lightcyan;
  font-size: 0.95em;
}

.总区 span[class$="文本"] {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.盒子模型总区 {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.展示区 {
  width: 1000px;
  height: calc(100vh - 200px);
  display: flex;
  justify-content: center;
  flex-shrink: 0;
}

.外边距盒子 {
  position: relative;
  background-color: #b08354;
  display: flex;
  justify-content: center;
  align-items: center;
  width: fit-content;
  height: fit-content;
}

.盒子外边距文本 {
  position: absolute;
  top: 5px;
  left: 5px;
}

.边框盒子 {
  position: relative;
  width: var(--盒子宽度);
  height: var(--盒子高度);
  border: solid var(--边框尺寸) #e4c482;
  padding: var(--内边距尺寸);
  box-sizing: content-box;
  /*background-color: #788053;*/
  background-color: #a4ae72;
  margin: var(--外边距尺寸);
}

.盒子边框文本 {
  position: absolute;
  top: calc(0px - var(--边框尺寸) + 5px);
  left: calc(0px - var(--边框尺寸) + 5px);
}

.盒子内边距文本 {
  position: absolute;
  top: 5px;
  left: 5px;
}

.内容盒子 {
  position: relative;
  width: 100%;
  height: 100%;
  /*background-color: #88b2bd;*/
  background-color: lightsteelblue;
  text-align: center;
  align-content: center;
}

.盒子内部文本-中文 {
  color: #012 !important;
  font-size: 13px;
}

.盒子内部文本-代码 {
  color: #b31 !important;
  font-size: 12px !important;
  mix-blend-mode: color-burn;
}

:where(.外边距盒子, .内容盒子) span[class$="中文"] {
  text-wrap: nowrap;
}

:where(.外边距盒子, .内容盒子) span[class$="代码"] {
  text-wrap: nowrap;
}

:where(.外边距盒子, .内容盒子) div[class$="值"] {
  display: flex;
  align-items: center;
  gap: 3px;
  text-wrap: nowrap;
}

:where(.内容盒子, .外边距盒子) span[class$="数字"]:not(.乘法数字) {
  color: gold;
}

.盒子宽度描述区,
.盒子高度描述区 {
  position: absolute;
}

.盒子宽度描述区 {
  width: 100%;
  height: calc(var(--外边距尺寸) + var(--内边距尺寸) + var(--边框尺寸) + 50px);
  top: 100%;
  left: 0;
  border-bottom: solid 1px var(--框线颜色);
  border-left: solid 1px var(--框线颜色);
  border-right: solid 1px var(--框线颜色);
  transition: height 500ms;
}

.外边距盒子 > .盒子宽度描述区 {
  width: calc(100% - var(--外边距尺寸) * 2);
  /*height: calc(var(--外边距尺寸) * 2 + 175px);*/
  height: calc(var(--外边距尺寸) + 200px);
  /*height: calc(50px + var(--内边距尺寸) + var(--边框尺寸) + 100px);*/
  top: calc(100% - var(--外边距尺寸));
  left: 50%;
  translate: -50% 0;
}

.外边距盒子 > .盒子宽度描述区.边框盒子宽度描述区 {
  height: calc(var(--外边距尺寸) + 75px);
}

.外边距盒子.已隐藏 > .盒子宽度描述区.边框盒子宽度描述区 {
  height: 75px;
}

/*.外边距盒子 > .盒子宽度描述区.边框盒子宽度描述区::before,
.外边距盒子 > .盒子宽度描述区.边框盒子宽度描述区::after {
  height: 100%;
}

.外边距盒子.已隐藏 > .盒子宽度描述区.边框盒子宽度描述区::before,
.外边距盒子.已隐藏 > .盒子宽度描述区.边框盒子宽度描述区::after {
  height: calc(100% - var(--外边距尺寸));
}

.盒子宽度描述区::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: calc(var(--外边距尺寸) + var(--内边距尺寸) + var(--边框尺寸) + 50px);
  background-color: white;
  transition: height 500ms;
  opacity: 0;
}

.外边距盒子.已隐藏 .内容盒子 .盒子宽度描述区::before {
  height: calc(var(--内边距尺寸) + var(--边框尺寸) + 50px);
}

.外边距盒子 > .盒子宽度描述区::before,
.外边距盒子 > .盒子宽度描述区::after {
  height: min(
    250px,
    calc(var(--外边距尺寸) + var(--内边距尺寸) + var(--边框尺寸) + 50px)
  );
  transition: height 500ms;
  opacity: 0;
}

.外边距盒子.已隐藏 > .盒子宽度描述区::before,
.外边距盒子.已隐藏 > .盒子宽度描述区::after {
  height: min(
    calc(250px - var(--外边距尺寸)),
    calc(var(--内边距尺寸) + var(--边框尺寸) + 50px)
  );
}

.盒子宽度描述区::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 1px;
  height: calc(var(--外边距尺寸) + var(--内边距尺寸) + var(--边框尺寸) + 50px);
  background-color: white;
  transition: 500ms;
  opacity: 0;
}

.外边距盒子.已隐藏 .内容盒子 .盒子宽度描述区::after {
  height: calc(var(--内边距尺寸) + var(--边框尺寸) + 50px);
}

.盒子宽度中线 {
  position: absolute;
  top: calc(var(--外边距尺寸) + var(--内边距尺寸) + var(--边框尺寸) + 50px);
  left: 0;
  width: 100%;
  height: 1px;
  background-color: white;
  transition: top 500ms;
  opacity: 0;
}

.外边距盒子.已隐藏 .内容盒子 .盒子宽度中线 {
  top: calc(var(--内边距尺寸) + var(--边框尺寸) + 50px);
}

.外边距盒子 > .盒子宽度描述区 .盒子宽度中线 {
  !*top: min(
    250px,
    calc(var(--外边距尺寸) + var(--内边距尺寸) + var(--边框尺寸) + 50px)
  );*!
  top: calc(var(--外边距尺寸) + 200px);
}

.外边距盒子.已隐藏 > .盒子宽度描述区 .盒子宽度中线 {
  top: min(
    calc(250px - var(--外边距尺寸)),
    calc(var(--内边距尺寸) + var(--边框尺寸) + 50px)
  );
}

.外边距盒子 > .盒子宽度描述区.边框盒子宽度描述区 .盒子宽度中线 {
  top: 100%;
}

.外边距盒子.已隐藏 > .盒子宽度描述区.边框盒子宽度描述区 .盒子宽度中线 {
  top: calc(100% - var(--外边距尺寸));
}*/

.宽度尺寸区 {
  display: flex;
  align-items: center;
  border-radius: 5px;
  overflow: hidden;
  background-color: #456;
  position: absolute;
  top: calc(var(--外边距尺寸) + var(--内边距尺寸) + var(--边框尺寸) + 25px);
  left: 50%;
  translate: -50% 0;
  font-size: 14px;
  transition: top 500ms;
}

.外边距盒子 > .盒子宽度描述区 .宽度尺寸区 {
  z-index: 1;
}

.外边距盒子.已隐藏 .内容盒子 .宽度尺寸区 {
  top: calc(var(--内边距尺寸) + var(--边框尺寸) + 25px);
}

.外边距盒子.已隐藏 .盒子宽度描述区 {
  height: calc(var(--内边距尺寸) + var(--边框尺寸) + 50px);
}

.外边距盒子.已隐藏 > .盒子宽度描述区 {
  height: 200px;
}

.外边距盒子 > .盒子宽度描述区 .宽度尺寸区 {
  top: calc(var(--外边距尺寸) + 100px);
  /*top: clamp(
    75px,
    50%,
    calc(var(--外边距尺寸) + var(--内边距尺寸) + var(--边框尺寸) + 25px)
  );*/
}

.外边距盒子.已隐藏 > .盒子宽度描述区 .宽度尺寸区 {
  /*top: clamp(
    calc(75px - var(--外边距尺寸)),
    calc(50% - var(--外边距尺寸)),
    calc(var(--内边距尺寸) + var(--边框尺寸) + 25px)
  );*/
  top: 100px;
}

.外边距盒子 > .盒子宽度描述区.边框盒子宽度描述区 .宽度尺寸区 {
  top: 100%;
  translate: -50% -50%;
}

.外边距盒子.已隐藏 > .盒子宽度描述区.边框盒子宽度描述区 .宽度尺寸区 {
  /*top: calc(100% - var(--外边距尺寸));*/
  translate: -50% -50%;
}

.实际宽度区,
.内容区,
.内边距区,
.边框区 {
  display: flex;
  align-items: center;
  overflow: hidden;
  background-color: #345;
}

.实际宽度区 {
  height: 100%;
}

.盒子宽度描述区 div[class$="属性"] {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 5px 8px;
  background-color: #567;
  width: 100px;
}

.宽度值 {
  padding: 5px 8px;
}

.内边距与边框区 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  /*align-items: center;*/
  background-color: #0008;
}

.内边距与边框区 div[class*="值"]:not(.乘法值) {
  height: 100%;
  padding: 0 8px;
  width: 61px;
  display: flex;
  justify-content: flex-end;
  align-content: center;
}

.等号区 {
  width: 24px;
  height: 24px;
  margin: 0 5px;
  text-align: center;
  align-content: center;
  border-radius: 999px;
  /*color: #bea5fa;*/
  color: black;
  font-weight: bold;
  font-size: 16px;
  background-color: #fff;
}

.加号区 {
  width: 100%;
  text-align: center;
  padding: 3px 0;
  color: #bea5fa;
  font-size: 16px;
}

.乘法值 {
  padding-right: 5px;
}

.乘法符号 {
  color: lightskyblue;
}

.乘法数字 {
  color: lightsteelblue;
}

.操作区 {
  min-width: 450px;
  border-radius: 10px;
  outline: solid 1px #cde6;
}

.盒子模型区 {
  display: flex;
  flex-direction: column;
  gap: 1vh;
  padding: 15px 20px;
  /*border: solid 1px #789;*/
}

.盒子模型标题 {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
}

.总区
  :where(.盒子模型标题, .盒子尺寸标题, .盒子模型属性标题)
  > span[class$="中文"] {
  color: lightseagreen;
}

:where(.盒子属性区, .辅助设置区) > div:not(:last-child) {
  border-bottom: solid 1px #cde6;
}

.盒子属性区 {
  font-size: 0.9em;
}

.盒子模型标题 > span[class$="代码"] {
  color: lightgreen;
}

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

.标签容器 {
  height: 55px;
  border-radius: 8px;
  align-content: center;
}

.标签容器:hover {
  background-color: var(--滑块区鼠标悬停背景色);
  cursor: url("/Images/Common/鼠标-默认.cur"), auto;
}

label .标签文本 {
  pointer-events: none;
}

label:has(input[type="radio"]) {
  position: relative;
  padding: 5px 10px;
  border-radius: 5px;
  overflow: hidden;
}

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

label:has(input[type="radio"]:checked) {
  background-color: #bcd;
  box-shadow: 1px 1px 2px 0 #000a;
}

label:has(input[type="radio"]:not(:checked)):hover {
  /*background-color: #202a32;*/
  background-color: #cde3;
}

label:has(input[type="radio"]:checked) .标签文本 {
  filter: invert(100%);
}

label > input[type="radio"] {
  appearance: none;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.盒子宽高区 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1vh;
  padding: 15px 20px;
  /*border: solid 1px #789;*/
}

.滑块区 {
  display: flex;
  flex-direction: column;
  /*gap: 15px;*/
  width: 100%;
}

.滑块区 > label:has(input[type="range"]) {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.滑块区 .标签文本 {
  width: var(--滑块前缀文本宽度);
}

input[type="range"] {
  width: 50%;
  height: 4px;
}

input[type="range"] {
  position: relative;
  appearance: none;
  border-radius: 999px;
  background-color: #777;
}

input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: var(--拇指尺寸);
  height: var(--拇指尺寸);
  border-radius: 999px;
  background-color: var(--拇指背景色);
  box-shadow: 2px 2px 2px 0 #0007;
  position: relative;
}

input[type="range"]::-moz-range-thumb {
  appearance: none;
  width: var(--拇指尺寸);
  height: var(--拇指尺寸);
  border-radius: 999px;
  background-color: var(--拇指背景色);
  box-shadow: 2px 2px 2px 0 #0007;
  border: none;
  position: relative;
}

.关联区 {
  position: absolute;
  width: 20px;
  height: 60%;
  top: 50%;
  left: 10px;
  translate: 0 -50%;
}

.关联区::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 20%;
  top: 0;
  left: 0;
  border-top: solid 1px var(--框线颜色);
  border-left: solid 1px var(--框线颜色);
}

.关联区::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 20%;
  bottom: 0;
  left: 0;
  border-bottom: solid 1px var(--框线颜色);
  border-left: solid 1px var(--框线颜色);
}

.关联区 > .关联标签,
.关联区 > .关联复选框 {
  object-fit: contain;
  position: absolute;
  top: 50%;
  left: 0;
  translate: -50% -50%;
}

.关联标签 {
  width: calc(100% + 5px);
  height: calc(40% + 5px);
  border-radius: 2px;
  padding: 2px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.关联区 > .关联标签 {
  font-size: 0.9em;
}

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

/*.关联区:has(.关联复选框:checked) .关联标签 > img {
  height: 65%;
}

.关联标签 > img {
  width: 100%;
  height: 45%;
  object-fit: contain;
  filter: invert(100%) brightness(150%);
}*/

.关联区 > .关联复选框 {
  height: 40%;
  appearance: none;
  width: 100%;
}

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

.关联区:has(.关联复选框:hover) .关联标签 {
  background-color: #fff3;
}

.模型设置区 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1vh;
  padding: 15px 20px;
  border-bottom: solid 1px #cde6;
  /*border: solid 1px #789;*/
}

#宽度 {
  background-image: linear-gradient(
    90deg,
    var(--滑块填充色) var(--宽度修剪比例),
    var(--滑块未填充色) var(--宽度修剪比例)
  );
}

#高度 {
  background-image: linear-gradient(
    90deg,
    var(--滑块填充色) var(--高度修剪比例),
    var(--滑块未填充色) var(--高度修剪比例)
  );
}

/*#内容 {
  background-image: linear-gradient(
    90deg,
    var(--滑块填充色) var(--内容修剪比例),
    var(--滑块未填充色) var(--内容修剪比例)
  );
}*/

#内边距 {
  background-image: linear-gradient(
    90deg,
    var(--滑块填充色) var(--内边距修剪比例),
    var(--滑块未填充色) var(--内边距修剪比例)
  );
}

#边框::before {
  clip-path: inset(0 var(--边框修剪比例) 0 0);
}

#边框 {
  background-image: linear-gradient(
    90deg,
    var(--滑块填充色) var(--边框修剪比例),
    var(--滑块未填充色) var(--边框修剪比例)
  );
}

#外边距 {
  background-image: linear-gradient(
    90deg,
    var(--滑块填充色) var(--外边距修剪比例),
    var(--滑块未填充色) var(--外边距修剪比例)
  );
}

.模型设置分区 {
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  height: 55px;
  border-radius: 8px;
}

.模型设置分区:hover {
  background-color: var(--滑块区鼠标悬停背景色);
}

.标签 {
  width: var(--滑块前缀文本宽度);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.滑块值 {
  width: 52px;
  display: flex;
  align-items: center;
  gap: 3px;
}

.数字,
.滑块数字 {
  color: lightskyblue;
}

.盒子模型属性信息区 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1vh;
  padding: 15px 20px;
  /*border: solid 1px #789;*/
  font-size: 0.9em;
}

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

.辅助设置区 .标签容器 {
  display: flex;
  justify-content: center;
  position: relative;
  height: fit-content;
  width: 84px;
  padding: 7px 0;
  border-radius: 5px;
}

.辅助设置区 .标签容器 .复选框 {
  appearance: none;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #fff2;
  border-radius: 5px;
}

.辅助设置区 .标签容器 .复选框:hover {
  box-shadow: inset 0 0 0 1px #999;
  cursor: url("/Images/Common/鼠标-指向.cur"), pointer;
}

.确认提示 {
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 20px;
  text-align: center;
  align-content: center;
  background-color: lightgreen;
  color: black;
  top: -7px;
  right: -7px;
  font-size: 12px;
  font-weight: bold;
  scale: 0.9;
}

.辅助设置区 .标签容器 .复选框:not(:checked) + .确认提示 {
  opacity: 0;
}

.效果单选区 {
  display: flex;
  align-items: center;
  gap: 10px;
}

.效果标题 {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-right: 5px;
  width: 58px;
}

.效果单选区 .标签容器 {
  background-color: #0005;
}

.效果单选区 .标签容器:has(.单选框:not(:checked):hover) {
  background-color: #0005;
  box-shadow: inset 0 0 0 1px #789;
}