:root {
    --code-bg:#f5f5f5;
    --code-fg:#333;
    --code-comment:#708090;
    --code-keyword:#07a;
    --code-string:#690;
    --code-number:#905;
    --code-function:#DD4A68;
    --code-operator:#9a6e3a;
    --code-punctuation:#999;
    --code-class:#DD4A68;
    --code-builtin:#e90;
    }

[data-theme="dark"] {
    --code-bg:#2d2d2d;
    --code-fg:#ccc;
    --code-comment:#999;
    --code-keyword:#cc99cd;
    --code-string:#7ec699;
    --code-number:#f08d49;
    --code-function:#f08d49;
    --code-operator:#67cdcc;
    --code-punctuation:#ccc;
    --code-class:#f8c555;
    --code-builtin:#f8c555;
    }

pre, code {
    font-family:Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
    font-size:0.95em;
    background:var(--code-bg);
    color:var(--code-fg);
    }

pre {
    padding:1em;
    overflow-x:auto;
    border:1px solid var(--code-comment);
    line-height:1.5;
    }

:not(pre) > code {
    padding:.1em .3em;
    border-radius:.3em;
    }

code[class*="language-"],
pre[class*="language-"] {
    color:var(--code-fg);
    font-family:Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
    font-size:0.95em;
    text-align:left;
    white-space:pre;
    word-spacing:normal;
    word-break:normal;
    word-wrap:normal;
    line-height:1.5;
    tab-size:4;
    }

pre[class*="language-"] {
    padding:1em;
    overflow-x:auto;
    background:var(--code-bg);
    border:1px solid var(--code-comment);
    }

:not(pre) > code[class*="language-"] {
    padding:.1em .3em;
    border-radius:.3em;
    background:var(--code-bg);
    }

.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
    color:var(--code-comment);
    }

.token.punctuation {
    color:var(--code-punctuation);
    }

.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol {
    color:var(--code-number);
    }

.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.inserted {
    color:var(--code-string);
    }

.token.operator,
.token.entity,
.token.url,
.language-css .token.string {
    color:var(--code-operator);
    }

.token.atrule,
.token.attr-value,
.token.keyword {
    color:var(--code-keyword);
    }

.token.function,
.token.deleted {
    color:var(--code-function);
    }

.token.class-name {
    color:var(--code-class);
    }

.token.builtin {
    color:var(--code-builtin);
    }

.token.important,
.token.bold {
    font-weight:bold;
    }

.token.italic {
    font-style:italic;
    }