.article pre {
  position: relative;
  padding: 42px 18px 18px;
  border: 1px solid #cbbfae;
  border-left: 4px solid #9f674d;
  background: #e8e5dc;
  color: #343a36;
  box-shadow: 3px 3px 0 rgba(99, 83, 62, .1);
}
.article pre .code-label {
  position: absolute;
  top: 11px;
  left: 16px;
  margin: 0;
  color: #64786b;
  font-weight: 700;
}
.copy-code {
  position: absolute;
  top: 7px;
  right: 8px;
  min-width: 32px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 8px;
  border: 1px solid #c8bbaa;
  border-radius: 5px;
  background: rgba(255, 253, 248, .82);
  color: #665d54;
  cursor: pointer;
  font-size: 11px;
  line-height: 1;
}
.copy-code:hover { border-color: #9f674d; color: #8c5139; background: #fffaf3; }
.copy-code::before { content: ""; width: 12px; height: 12px; border: 1.5px solid currentColor; border-radius: 2px; box-shadow: 3px -3px 0 -1px #fffaf3, 3px -3px 0 0 currentColor; }
.copy-code.copied { color: #557660; border-color: #86a28e; background: #eef5ee; }
.copy-code.copied::before { content: "✓"; width: auto; height: auto; border: 0; box-shadow: none; font-weight: 800; }
[data-theme="dark"] .article pre { background: #343936; color: #eff0e9; border-color: #555d57; border-left-color: #d39472; }
[data-theme="dark"] .copy-code { background: #424843; border-color: #667068; color: #e8e8df; }
[data-theme="dark"] .copy-code::before { box-shadow: 3px -3px 0 -1px #424843, 3px -3px 0 0 currentColor; }
.content-editor pre { background: #e8e5dc !important; color: #343a36 !important; border: 1px solid #cbbfae; border-left: 4px solid #9f674d !important; box-shadow: 3px 3px 0 rgba(99,83,62,.1) !important; }
@media(max-width:600px){.article pre{padding:42px 13px 15px}.copy-code{right:7px}}