figure.code {
  margin: 22px 0;
  border: 1px solid var(--rule);
  border-radius: 9px;
  background: var(--panel);
  overflow: hidden;
}

figure.code .bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--hair);
  background: var(--sunk);
  font: 400 11.5px/1 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

figure.code .bar .lang {
  margin-left: 0;
  opacity: 0.62;
}

figure.code .bar .copy {
  margin-left: auto;
  font: inherit;
  color: var(--muted);
  border: 1px solid var(--rule);
  border-radius: 5px;
  padding: 5px 8px;
}

figure.code .bar .copy:hover {
  color: var(--accent);
  border-color: var(--accent);
}

pre.twinkleplop {
  margin: 0;
  padding: 15px 16px;
  overflow-x: auto;
  font-size: 12.9px;
  line-height: 1.62;
  color: var(--ink);
  tab-size: 2;
}

pre.twinkleplop code {
  display: block;
  width: max-content;
  min-width: 100%;
  font: inherit;
}

/* twinkleplop wraps each line in `.l` and separates them with a real newline,
   which `pre` already renders: making `.l` a block would double every gap. */

.tok.keyword {
  color: var(--t-key);
}
.tok.string {
  color: var(--t-str);
}
.tok.number,
.tok.unit,
.tok.boolean,
.tok.constant {
  color: var(--t-num);
}
.tok.comment {
  color: var(--t-com);
  font-style: italic;
}
.tok.function,
.tok.builtin {
  color: var(--t-fn);
}
.tok.type,
.tok.class {
  color: var(--t-type);
}
.tok.property,
.tok.attr {
  color: var(--t-prop);
}
.tok.operator,
.tok.punctuation {
  color: var(--t-pun);
}
.tok.tag {
  color: var(--t-key);
}
.tok.selector,
.tok.css {
  color: var(--t-fn);
}
.tok.identifier,
.tok.parameter {
  color: var(--t-id);
}

/* an inline `code` span, in prose and in tables */
:not(pre) > code {
  font-size: 0.88em;
  color: var(--ink);
  background: var(--sunk);
  border: 1px solid var(--hair);
  border-radius: 5px;
  padding: 0.1em 0.34em;
}

code.short {
  white-space: nowrap;
}

a > code {
  color: inherit;
  border-color: currentColor;
}

/* a path reads as a path, not as a label */
figure.code .bar .file {
  text-transform: none;
  letter-spacing: 0;
  font-size: 12px;
}