:root {
  --进度条颜色-已填充: rgb(41, 126, 78);
  --进度条颜色-未填充: rgba(224, 224, 224, 0.85);
  --拇指宽度: 16px;
  --变量背景色: #cde2;
  --已占用颜色: rgba(154, 205, 50, 0.75);
  --抬头应用名称: "";
  --光标-默认: url("/Images/Common/鼠标-默认.cur"), auto;
  --光标-手指: url("/Images/Common/鼠标-指向.cur"), pointer;
  --中文字体: "Noto Sans SC", 微软雅黑，sans-serif;
  --代码字体: "JetBrains Mono", Consolas, monospace;
  --中文代码混合字体: "JetBrains Mono", Consolas, "Noto Sans SC", 微软雅黑, sans-serif;
}

.变量总区 {
  min-height: 100vh;
  height: fit-content;
  padding-bottom: 100px;
  flex-direction: column;
  justify-content: flex-start;
}

.内存分配区 {
  position: fixed;
  top: 50%;
  left: -1px;
  translate: -100% -50%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background-color: #cde1;
  border: solid 1px #888;
  z-index: 10;
  backdrop-filter: blur(20px);
  transition: 250ms;
}

.内存分配区.可见 {
  translate: 0 -50%;
}

.内存分配区.可见 #内存分配区开关 {
  top: 10px;
  right: 10px;
  font-size: 10px;
  width: 20px;
  height: 20px;
  translate: 0 0;
}

#内存分配区开关 {
  border-radius: 999px;
  border: none;
  background-color: rgb(81, 104, 45);
  color: white;
  position: absolute;
  top: 50%;
  right: 0;
  translate: 125% -50%;
  font-size: 20px;
  width: 40px;
  height: 40px;
  text-align: center;
  align-content: center;
}

#内存分配区开关:hover {
  background-color: rgb(104, 133, 58);
}

.内存分配分区 {
  font-size: 12px;
  display: flex;
  flex-direction: column;
  background-image: linear-gradient(rgba(211, 228, 256, 0.15) 0%, rgba(255, 255, 255, 0.025) 100%);
  padding: 5px 15px;
}

.内存分配分区:hover,
.内存分配分区.当前内存分配分区 {
  cursor: var(--光标-手指);
  /* background-image: linear-gradient(rgba(190, 215, 256, 0.3) 0%, rgba(255, 255, 255, 0.075) 100%); */
  background-image: none;
  background-color: #fff3;
  filter: brightness(135%);
}

.内存分配区标题 {
  color: #cdea;
  margin: 10px auto;
  font-size: 14px;
}

.内存分配颜色名称与容量 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  padding: 5px 0;
}

.内存分配颜色与名称 {
  display: flex;
  align-items: center;
  gap: 7px;
}

.内存分配容量 {
  color: lightgreen;
  padding: 2px 10px;
  border-radius: 999px;
  background-color: rgb(54, 61, 69);
  border: solid 1px #aaa;
  font-size: 12px;
  font-weight: normal;
}

.内存分配数据 {
  padding: 2px 0 5px;
  font-size: 13px;
}

.内存地址连接线 {
  color: gray;
}

.内存分配起始地址,
.内存分配结束地址 {
  color: silver;
}

.名称颜色 {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px #777;
}

.名称文本 {
  color: lightcyan;
  font-weight: normal;
  padding: 2px 10px;
  border-radius: 999px;
  background-color: rgb(54, 61, 69);
  border: solid 1px #aaa;
  font-size: 12px;
}

.内存分配分区:hover :where(.名称文本, .内存分配容量),
.内存分配分区.当前内存分配分区 :where(.名称文本, .内存分配容量) {
  background-color: rgb(13, 56, 99);
  color: lightcyan;
}

.名称文本,
.抬头文本,
.字节名称 {
  font-family: Noto Sans SC, sans-serif;
}

.内存分配地址 {
  display: flex;
  align-items: center;
  text-shadow: 1px 1px 1px #000a;
}

.内存地址连接线 {
  margin: 0 5px;
}

.设置区 {
  width: max(750px, 75%);
  margin: 0 auto;
  display: flex;
  gap: 50px;
}

.代码输入区 {
  display: flex;
  align-items: center;
  gap: 20px;
}

.代码输入分区 {
  width: 325px;
  padding: 0 0 10px;
  display: flex;
  flex-direction: column;
  font-size: 14px;
  background-color: #fff1;
  backdrop-filter: blur(5px);
  border: solid 1px #fff4;
}

.可变代码输入分区 .代码输入分区标题 {
  display: flex;
  justify-content: center;

  .标签 {
    display: flex;
    width: fit-content;
    position: relative;
    padding: 0;

    .标签文本 {
      width: fit-content;
      text-wrap: nowrap;
      padding: 3px 10px;
      position: relative;
      font-size: 0.9em;
      border: solid 1px transparent;
      color: rgb(155, 155, 155);
      background-color: #fff1;
      user-select: none;
      transition: 25ms;
    }

    .单选框 {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      appearance: none;
    }

    .单选框:checked + .标签文本 {
      border: solid 1px #fff6;
      color: gold;
      background-color: #def3;
      font-size: 1em;
    }

    &:hover {
      .标签文本 {
        background-color: #fff2;
        color: silver;
        cursor: var(--光标-手指);
      }
    }
  }
}

.可变代码输入分区:has(#作用-更改:checked) :where(.变量类型, .类型框) {
  visibility: hidden;
}

.代码输入分区标题 {
  width: 100%;
  height: 46px;
  text-align: center;
  align-content: center;
  color: gold;
  padding: 8px 0;
  background-color: #def1;
}

.代码含义区,
.代码区 {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 2px 10px;
}

.占位符 {
  opacity: 0;
  pointer-events: none;
}

.变量类型,
.类型框 {
  flex-grow: 1.2;
}

.变量标识符,
.标识符框 {
  flex-grow: 1.25;
}

.变量值,
.值框 {
  flex-grow: 1.75;
}

.等号,
.分号 {
  width: 0;
  flex-grow: 0.25;
  text-align: center;
  color: gray;
}

.标签 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 0;
  padding: 3px 4px;
  color: lightblue;
}

.文本框 {
  width: 0;
  font-family: "JetBrains Mono", Consolas, "Noto Sans SC", 微软雅黑， sans-serif;
  padding: 3px 4px;
  background-color: #20252a;
  outline: solid 1px #60656a;
  border: none;
  text-align: center;
}

.文本框:hover {
  background-color: #252a2f;
  outline: solid 1px #80858a;
}

.类型框 {
  color: palevioletred;
}

.标识符框 {
  color: rgb(204, 211, 216);
}

.标识符框.错误 {
  background-color: rgb(125, 30, 30) !important;
}

.值框 {
  color: darkgoldenrod;
}

.文本框:focus {
  background-color: #30353a;
  outline: solid 1px #a0a5aa;
}

.展示区 {
  width: 100%;
  margin: 0 auto;
}

.变量区 {
  margin: 0 auto;
  width: max(750px, 90%);
  backdrop-filter: blur(10px);
}

.变量容器区 {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
}

/* Canvas 相关样式 */
.内存Canvas {
  margin: 0 auto;
  width: 100%;
  height: auto;
  display: block;
  cursor: var(--光标-默认);
  border: 1px solid transparent;
  background-color: transparent;
}

.内存Canvas:hover {
  cursor: var(--光标-手指);
}

/* 悬停提示框样式 */
.字节描述提示框 {
  position: fixed;
  opacity: 0;
  pointer-events: none;
  border: solid 1px silver;
  background-color: #222;
  color: white;
  font-family: "Google Sans Code", Consolas, "Noto Sans SC", sans-serif;
  font-size: 14px;
  z-index: 1000;
  box-shadow: 2px 2px 2px 0 #111;
  transform-origin: 50% 100%;
  scale: 0.9;
  transition: opacity 0.2s ease;
}

.字节描述提示框.可见 {
  opacity: 1;
}

.字节描述提示框 .字节名称与顺位 {
  width: 100%;
  padding: 3px 0;
  background-color: #222;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: yellowgreen;
}

.字节描述提示框 .字节名称 {
  text-wrap: nowrap;
  padding: 0 10px 0 5px;
}

.字节描述提示框 .字节顺位 {
  color: gray;
  padding: 0 5px 0 10px;
}

.字节描述提示框 .字节地址 {
  width: 100%;
  background-color: #333;
  color: silver;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.字节描述提示框 .进制地址 {
  display: flex;
  align-items: center;
  padding-right: 5px;
}

.字节描述提示框 .进制 {
  height: 100%;
  text-wrap: nowrap;
  padding: 5px 7px;
  margin-right: 10px;
  background-color: #456;
  color: lightcyan;
  scale: 0.9;
}

.字节描述提示框 .地址代码 {
  flex-grow: 1;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.字节描述提示框 .地址前缀 {
  color: peru;
}

.字节描述提示框 .地址值 {
  text-align: right;
}

.变量容器 {
  width: 35px;
  height: 35px;
  background: linear-gradient(transparent 0%, transparent 100%) border-box,
    linear-gradient(var(--变量背景色) 0%, var(--变量背景色) 100%) padding-box;
  border: solid 1px transparent;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.本应用内存顺序 {
  position: relative;
  text-align: center;
  align-content: center;
  font-size: 12px;
  text-shadow: 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black;
  scale: 0.83333333;
}

.变量容器:not(:has(.应用抬头容器:hover)):hover,
.变量容器.当前应用 {
  box-shadow: inset 0 0 0 2px black;
  cursor: var(--光标-手指);
  filter: brightness(125%);
}

.变量容器:hover .应用抬头容器 {
  filter: brightness(80%);
}

.变量容器:not(:has(.应用抬头容器:hover)):hover {
  border: solid 1px silver;
}

.变量容器.当前应用 {
  border: solid 1px white;
}

.变量容器.预占用 {
  background-color: rgb(255, 255, 0, 0.5);
}

.字节描述 {
  position: absolute;
  bottom: 125%;
  left: 50%;
  translate: -50% 0;
  opacity: 0;
  font-size: 14px;
  pointer-events: none;
  border: solid 1px silver;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  transform-origin: 50% 100%;
  scale: 0.9;
  z-index: 10;
  box-shadow: 2px 2px 2px 0 #111;
}

.字节名称与顺位 {
  width: 100%;
  padding: 3px 0;
  background-color: #222;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: yellowgreen;
}

.字节名称 {
  text-wrap: nowrap;
  padding: 0 10px 0 5px;
}

.字节顺位 {
  color: gray;
  padding: 0 5px 0 10px;
}

.字节地址 {
  width: 100%;
  background-color: #333;
  color: silver;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.进制地址 {
  display: flex;
  align-items: center;
  padding-right: 5px;
}

.进制 {
  height: 100%;
  text-wrap: nowrap;
  padding: 5px 7px;
  margin-right: 10px;
  background-color: #456;
  color: lightcyan;
  scale: 0.9;
}

.地址代码 {
  flex-grow: 1;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.地址前缀 {
  color: peru;
}

.地址值 {
  text-align: right;
}

.变量容器.已占用:not(:has(.应用抬头容器:hover)):hover .字节描述 {
  translate: -50% 0;
  opacity: 1;
}

.应用抬头容器 {
  padding-right: 5px;
  position: absolute;
  top: -30%;
  right: 100%;
  scale: 0.8;
  transform-origin: 100% 50%;
}

.应用抬头容器:hover {
  cursor: var(--光标-手指);
}

.应用抬头 {
  padding: 5px 10px;
  outline: solid 1px #aaa;
  background-color: #111;
  font-size: 12px;
  box-shadow: 2px 2px 2px 0 #111;
}

.应用抬头:hover,
.应用抬头.当前应用抬头 {
  outline: solid 1px orange;
  background-color: #123;
}

.应用抬头:hover .抬头文本,
.应用抬头.当前应用抬头 .抬头文本 {
  color: #8fc;
}

.抬头文本 {
  text-wrap: nowrap;
  color: white;
}

.滑块标签 {
  width: fit-content;
  display: flex;
  align-items: center;
  font-family: "Google Sans Code", Consolas, "Noto Sans SC", 微软雅黑, sans-serif;
}

.滑块标签[for="内存容量"] {
  width: 370px;
}

.控件标题 {
  color: rgb(96, 138, 189);
  text-wrap: nowrap;
}

.滑块单位 {
  text-wrap: nowrap;
}

.滑块 {
  width: 150px;
  height: 6px;
  margin: 0 10px;
  accent-color: silver;
}

.滑块::-webkit-slider-thumb {
  scale: 1.4;
}

.滑块:hover {
  cursor: var(--光标-手指);
}

.滑块值 {
  font-size: 16px;
  color: lightskyblue;
  margin-right: 5px;
}

.单位中文,
.单位英文 {
  color: rgb(97, 165, 97);
  font-size: 14px;
}

.单位分隔符 {
  color: gray;
  margin: 0 2px;
  font-size: 12px;
}