/* === GitHub Dark theme for code blocks === */

pre,
code {
    color: #c9d1d9;
    background: #000000;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
    font-size: 14px;
    line-height: 1.5;
    border-radius: 4px;
    border: 1px solid #30363d;
    padding: 1em;
    overflow-x: auto;
    position: relative;
    /* for positioning copy button */
}

/* Inline code (optional) */
:not(pre)>code {
    padding: 0.2em 0.4em;
    border-radius: 4px;
    background: #161b22;
    color: #c9d1d9;
}

/* === Tokens === */
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
    color: #8b949e;
    font-style: italic;
}

.token.punctuation {
    color: #c9d1d9;
}

.token.keyword {
    color: #ff7b72;
}

.token.operator {
    color: #ff7b72;
}

.token.function {
    color: #d2a8ff;
}

.token.variable {
    color: #79c0ff;
}

.token.string {
    color: #a5d6ff;
}

.token.number,
.token.boolean {
    color: #79c0ff;
}

.token.constant {
    color: #79c0ff;
}

.token.property {
    color: #79c0ff;
}

.token.class-name {
    color: #ffa657;
}

.token.type {
    color: #ff7b72;
}

.token.tag {
    color: #7ee787;
}

.token.attr-name {
    color: #d2a8ff;
}

.token.attr-value {
    color: #a5d6ff;
}

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

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

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

.token.entity,
.token.url {
    color: #79c0ff;
}

/* === Selection === */
pre ::selection,
code ::selection {
    background: #264f78;
    color: #ffffff;
}

/* === Optional scrollbar === */
pre::-webkit-scrollbar {
    height: 8px;
}

pre::-webkit-scrollbar-thumb {
    background: #30363d;
    border-radius: 4px;
}

/* === Copy button === */
/* === GitHub Dark: Code Toolbar === */

/* === GitHub Dark: Code Toolbar === */

div.code-toolbar {
    position: relative;
    margin-bottom: 1rem;
}

div.code-toolbar>.toolbar {
    position: absolute;
    top: 0.5em;
    right: 0.5em;
    z-index: 10;
    user-select: none;
}

div.code-toolbar:hover>.toolbar,
div.code-toolbar:focus-within>.toolbar {
    opacity: 1;
}

div.code-toolbar>.toolbar>.toolbar-item {
    display: inline-block;
}

div.code-toolbar>.toolbar>.toolbar-item>button,
div.code-toolbar>.toolbar>.toolbar-item>a,
div.code-toolbar>.toolbar>.toolbar-item>span {
    color: #c9d1d9;
    /* GitHub text color */
    font-size: 12px;
    background: #000000;
    /* GitHub Dark button bg */
    border: 1px solid #30363d;
    /* subtle border */
    border-radius: 4px;
    padding: 4px 8px;
    cursor: pointer;
    transition: background 0.2s ease, border 0.2s ease;
}

div.code-toolbar>.toolbar>.toolbar-item>button:hover,
div.code-toolbar>.toolbar>.toolbar-item>button:focus,
div.code-toolbar>.toolbar>.toolbar-item>a:hover,
div.code-toolbar>.toolbar>.toolbar-item>a:focus,
div.code-toolbar>.toolbar>.toolbar-item>span:hover,
div.code-toolbar>.toolbar>.toolbar-item>span:focus {
    background: #161b22;
    border-color: #30363d;
    color: #c9d1d9;
    text-decoration: none;
}