.hljs {
    background-color: unset !important;
}

code-block {
    *:only-child:is(&) {
        width: 100%;
        height: 100%;
    }
    display: block;
    margin: 0;
    padding: 1rem;
    position: relative;
    background-color: var(--code-bg);
    border-radius: 5pt;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px var(--shadow-rest);
    box-sizing: border-box;
    min-width: 240pt;

    &:hover {
        box-shadow: 0 8px 30px var(--shadow-hover);
    }

    :not(.container) > & {
        margin-block-start: 18pt;
        margin-block-end: 18pt;
    }

    code {
        padding: 0 !important;
        overflow-x: unset;
    }

    &::part(content) {
        padding: 0;
        margin: 0;
        overflow: auto;
    }

    pre {
        margin: 0;
        overflow-x: auto;
        font-size: 14px;
        line-height: 1.5;
    }

    &::part(header) {
        line-height: 0.8em;
        position: absolute;
        margin: 0;
        top: 4pt;
        right: 8pt;
        gap: 8pt;
        display: flex;
        align-items: stretch;
        transition: none;
        opacity: 0.2;
    }
    &::part(language-badge) {
        display: flex;
        align-items: center;
        gap: 0.25rem;
        margin: 0;
        background-color: var(--badge-bg);
        color: var(--badge-fg);
        padding: 0.25rem 0.5rem;
        border-radius: 4px;
        font-size: 12px;
        font-weight: 500;
    }
    &::part(copy) {
        margin: 0;
        background-color: var(--copy-bg);
        color: var(--copy-fg);
        border: none;
        border-radius: 4px;
        padding: 0.25rem 0.75rem;
        cursor: pointer;
        font-size: 12px;
        transition: all 0.2s ease;
        display: flex;
        align-items: center;
        gap: 0.25rem;
    }
    &::part(copy):hover {
        background-color: var(--copy-hover-bg);
        color: var(--copy-hover-fg);
    }
    &::part(copy).copied {
        background-color: var(--copied-bg);
        color: var(--copied-fg);
    }
    @media(hover: hover) {
        &::part(header) {
            max-height: 0;
            opacity: 0;
        }
    }
    &:hover::part(header) {
        max-height: none;
        opacity: unset;
    }
    &::part(header):has(::part(copy).copied) {
        max-height: none;
        opacity: unset;
    }
}

pre {
    display: inline;
}

code, code-block::part(code) {
    font-family: Menlo, Monaco, Consolas, "Cascadia Mono", "Ubuntu Mono", "DejaVu Sans Mono", "Liberation Mono", "JetBrains Mono", "Fira Code", Cousine, "Roboto Mono", "Courier New", Courier, sans-serif, system-ui;
}

code:not(pre > code) {
    margin-inline: 0;
    background-color: var(--code-inline-bg) !important;
    border-radius: 0.1em;
    padding-inline: 2pt;
}

code-block[lang="output"], code.language-output {
    background-color: black !important;
    color: white;
}
pre:has(code.language-output) {
    background-color: black;
}

/* Typst 的语法高亮是**内联**写在 <span style="color: #xxxxxx"> 上的
 * (style.typ 的 show text:只要 text.fill 不是默认值就写内联 color),
 * 内联样式压得过任何普通规则,token 层自己管不到 —— 深色下这套为暗底设计
 * 的浅色值压在深色代码底上大多读不出来(属性色 #301414 对 --code-inline-bg
 * 只有 1.13:1,注释色 #74747c 也只有 3.24:1)。
 *
 * 下面每条规则认**一个**色值,把它按回一个按角色命名的 token。只在深色
 * 下生效,浅色保持 Typst 原样 —— token 的浅色值就是 Typst 现在吐的那个,
 * 所以浅色渲染逐字节不变。
 *
 * 为什么不用一条 `span[style*="color"]` 通配:那会把十种 token 色全部
 * 刷成同一个颜色,高亮就没了。按色值逐条匹配才是「一种颜色 → 一个角色」。
 * 十个色值对应的角色见 theme.css 里 --code-syn-* 那段注释;深色值对
 * --code-inline-bg(#26262e)与 --code-bg(#1a1a1f)的实测对比度:
 *   inline-fg #ff8080 6.18 / 7.14  string   #7ec87e 7.47 / 8.63
 *   comment  #969aa6 5.34 / 6.17   literal  #e58ec0 6.41 / 7.40
 *   symbol   #82aaff 6.53 / 7.55   member   #c39ae8 6.51 / 7.52
 *   macro    #4fc4d4 7.28 / 8.40   markup   #3f9fa8 4.81 / 5.56
 *   attr     #dfa3ad 7.13 / 8.24   plain    #a8a8b0 6.36 / 7.34
 * 全部在 4.5 之上。
 *
 * code-block 虽带 shadow root,但 raw 里的 <code> 是 slot 出来的普通后代,
 * 留在 light DOM 里,所以这里的普通选择器够得着。 */

:root[data-theme="dark"] code span[style*="#d73948"] {
    color: var(--code-inline-fg) !important;
}
:root[data-theme="dark"] code span[style*="#74747c"] {
    color: var(--code-syn-comment) !important;
}
:root[data-theme="dark"] code span[style*="#198810"] {
    color: var(--code-syn-string) !important;
}
:root[data-theme="dark"] code span[style*="#b60157"] {
    color: var(--code-syn-literal) !important;
}
:root[data-theme="dark"] code span[style*="#4b69c6"] {
    color: var(--code-syn-symbol) !important;
}
:root[data-theme="dark"] code span[style*="#8b41b1"] {
    color: var(--code-syn-member) !important;
}
:root[data-theme="dark"] code span[style*="#16718d"] {
    color: var(--code-syn-macro) !important;
}
:root[data-theme="dark"] code span[style*="#1d6c76"] {
    color: var(--code-syn-markup) !important;
}
:root[data-theme="dark"] code span[style*="#301414"] {
    color: var(--code-syn-attribute) !important;
}
:root[data-theme="dark"] code span[style*="#6b6b6f"] {
    color: var(--code-syn-plain) !important;
}