.article-body .code-frame { margin: 1em 0; background: #fff8e5; border-radius: 4px; overflow: hidden; }
.article-body .code-frame pre { margin: 0; padding: 16px 18px 10px; border-radius: 0; }
.article-body pre, .article-body pre code { font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace; font-size: 14px; line-height: 21px; }
.code-toolbar { display: flex; justify-content: flex-end; padding: 0 12px 10px; }
.code-toolbar .copy-code { margin: 0; padding: 4px 10px; border: 1px solid #d7cba8; border-radius: 3px; background: #fffcf3; color: #5b624c; font-size: 12px; }
.code-toolbar .copy-code:hover { background: #f2ead5; }
.code-toolbar .copy-code:focus-visible { outline: 2px solid #288865; outline-offset: 2px; }
.article-body pre .c, .article-body pre .ch, .article-body pre .cm, .article-body pre .cp, .article-body pre .cpf, .article-body pre .c1, .article-body pre .cs { color: #6f795f; font-style: italic; }
.article-body pre .k, .article-body pre .kc, .article-body pre .kd, .article-body pre .kn, .article-body pre .kp, .article-body pre .kr, .article-body pre .kt, .article-body pre .nb { color: #a76500; }
.article-body pre .s, .article-body pre .sa, .article-body pre .sb, .article-body pre .sc, .article-body pre .dl, .article-body pre .sd, .article-body pre .s2, .article-body pre .se, .article-body pre .sh, .article-body pre .si, .article-body pre .sx, .article-body pre .sr, .article-body pre .s1, .article-body pre .ss { color: #477634; }
.article-body pre .nv, .article-body pre .vc, .article-body pre .vg, .article-body pre .vi, .article-body pre .vm, .article-body pre .na, .article-body pre .nf, .article-body pre .fm { color: #267b9b; }
.article-body pre .m, .article-body pre .mb, .article-body pre .mf, .article-body pre .mh, .article-body pre .mi, .article-body pre .il, .article-body pre .mo, .article-body pre .o, .article-body pre .ow { color: #97629a; }