/* 配色只作用于代码块，浅色和深色页面使用同一套 Dracula 风格。 */
.container figure.highlight {
  --hl-color: #f8f8f2;
  --hl-bg: #282a36;
  --hltools-bg: #21222c;
  --hltools-color: #a3abc7;
  --hlnumber-bg: #282a36;
  --hlnumber-color: #757ea6;
  --hlscrollbar-bg: #6272a4;
  --hlexpand-bg: linear-gradient(180deg, #282a3699, #282a36ee);
  border: 1px solid #44475a;
  border-radius: 10px;
  box-shadow: 0 8px 20px #18253b14;
}

.container figure.highlight .highlight-tools {
  min-height: 38px;
  padding: 0 12px;
  border-bottom: 1px solid #44475a;
}

.container figure.highlight .highlight-tools .macStyle > div {
  width: 8px;
  height: 8px;
  margin-right: 6px;
}

.container figure.highlight .highlight-tools .code-lang {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
}

.container figure.highlight pre .comment,
.container figure.highlight pre .quote { color: #757ea6; }

.container figure.highlight pre .keyword,
.container figure.highlight pre .variable,
.container figure.highlight pre .tag .name,
.container figure.highlight pre .selector-tag,
.container figure.highlight pre .deletion { color: #ff79c6; }

.container figure.highlight pre .attr,
.container figure.highlight pre .attribute,
.container figure.highlight pre .params,
.container figure.highlight pre .built_in,
.container figure.highlight pre .type,
.container figure.highlight pre .selector-id,
.container figure.highlight pre .selector-class { color: #8be9fd; }

.container figure.highlight pre .literal,
.container figure.highlight pre .number,
.container figure.highlight.json pre .keyword,
.container figure.highlight pre .constant { color: #bd93f9; }

.container figure.highlight pre .string,
.container figure.highlight pre .regexp,
.container figure.highlight pre .value,
.container figure.highlight pre .symbol { color: #f1fa8c; }

.container figure.highlight pre .title,
.container figure.highlight pre .function,
.container figure.highlight pre .meta { color: #50fa7b; }

.container figure.highlight pre .addition { color: #50fa7b; }
.container figure.highlight pre .line.marked { background: #44475a; }
.container figure.highlight pre .emphasis { font-style: italic; }
.container figure.highlight pre .strong { font-weight: bold; }