.token.keyword {
  color: #e34ba9;
}
.token.number,
.token.string {
  color: #f0c000;
}
.token.operator,
.token.punctuation {
  color: #697177;
}
.token.property,
.token.atrule,
.token.attr-value,
.token.function {
  color: #bf7af0;
}
.token.url,
.token.literal-property,
.token.property-access {
  color: #52a9ff;
}
.token.class-name,
.token.regex,
.token.important,
.token.tag {
  color: #ff8b3e;
}
.token.attr-name,
.token.boolean,
.token.function-name,
.token.constant,
.token.symbol,
.token.deleted {
  color: #ff6369;
}
.token.selector,
.token.char,
.token.builtin,
.token.script,
.token.inserted {
  color: #3cb179;
}
.token.comment,
.token.block-comment,
.token.prolog,
.token.doctype,
.token.cdata {
  color: #787f85;
}

/* Two token classes the palette above did not have, both emitted by
   state_code_highlight. `variable` covers $host in nginx and ${x} in shell;
   `address` keeps 10.240.0.10 as one blue thing instead of four numbers with
   plain dots between them. */
.token.variable {
  color: #52a9ff;
}
.token.address {
  color: #3cb179;
}

/* state_code_highlight container.

   The colours above are a dark palette, so the block brings its own dark
   ground rather than inheriting the page's — light text on a light card is
   the failure mode if it does not. */
.rual-code {
  margin: 0;
  padding: 12px 14px;
  overflow-x: auto;
  background: #1b1f23;
  color: #d6dbe1;
  border-radius: 4px;
  font-size: 13px;
  line-height: 1.55;
  tab-size: 4;
}
.rual-code code {
  display: block;
  background: none;
  color: inherit;
  padding: 0;
  font-family: inherit;
  font-size: inherit;
  white-space: pre;
}
.rual-code__line {
  display: block;
}
.rual-code__line--mark {
  /* Full-bleed despite the container padding, so an emphasised line reads as a
     band across the block rather than a floating rectangle. */
  background: rgba(82, 169, 255, 0.14);
  box-shadow: inset 2px 0 0 #52a9ff;
  margin: 0 -14px;
  padding: 0 12px;
}
.rual-code__number {
  display: inline-block;
  width: 3ch;
  margin-right: 1.5ch;
  text-align: right;
  color: #5c646d;
  /* The number is decoration; keep it out of the selection so copying the
     block yields runnable code rather than code with line numbers in it. */
  user-select: none;
}
.rual-code--numbered .rual-code__line--mark .rual-code__number {
  color: #93a1b0;
}