:root {
    --un-ring-offset-shadow: 0 0 transparent;
    --un-ring-shadow: 0 0 transparent
}

.custom-callout {
    border-left: 3px solid;
    border-radius: var(--callout-radius);
    box-shadow: var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);
    margin: 1rem 0;
    padding: 0 !important;
}

:root {
    --callout-note: 68, 138, 255;
    --callout-abstract: 0, 176, 255;
    --callout-info: 0, 184, 212;
    --callout-tip: 0, 191, 165;
    --callout-success: 8, 185, 78;
    --callout-question: 224, 172, 0;
    --callout-warning: 255, 145, 0;
    --callout-failure: 255, 82, 82;
    --callout-danger: 255, 23, 68;
    --callout-bug: 245, 0, 87;
    --callout-example: 124, 77, 255;
    --callout-quote: 158, 158, 158;
    --callout-radius: 0px;
    --callout-border-opacity: 0.5;
    --callout-title-bg-opacity: 0.08
}

.callout-fold:before {
    align-self: center;
    content: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="gray" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="chevron-down"><path d="m6 9 6 6 6-6"/></svg>')
}

.callout-fold {
    display: flex;
    transform: rotate(-90deg);
    transition: .5s cubic-bezier(.075, .82, .165, 1)
}

.custom-callout[open] > summary > .callout-fold {
    transform: rotate(0deg)
}

.custom-callout > summary {
    border-top-left-radius: var(--callout-radius);
    border-top-right-radius: var(--callout-radius);
    cursor: pointer;
    margin: 0;
    padding: 1rem
}

.custom-callout > summary::marker {
    content: ""
}

.custom-callout > summary:before {
    margin-right: .5rem
}

.custom-callout > summary::-webkit-details-marker {
    display: none
}

.callout-title {
    display: flex;
    justify-content: space-between
}

.custom-callout > .callout-body {
    background: transparent !important;
    border-left: none;
    margin: 0 !important;
    padding: .5rem 1rem;
    position: relative
}

.custom-callout > .callout-body > p {
    margin: 8px 0
}

.custom-callout > .callout-body > pre {
    margin: 1.25rem -1rem
}

.custom-callout > .callout-body > pre:first-child {
    margin-top: -.75rem
}

.custom-callout > .callout-body > pre:last-child {
    margin-bottom: -.75rem
}

.custom-callout.note, .custom-callout.seealso {
    border-color: rgba(var(--callout-note), var(--callout-border-opacity))
}

.custom-callout.note > summary, .custom-callout.seealso > summary {
    background-color: rgba(var(--callout-note), var(--callout-title-bg-opacity))
}

.custom-callout.abstract, .custom-callout.summary, .custom-callout.tldr {
    border-color: rgba(var(--callout-abstract), var(--callout-border-opacity))
}

.custom-callout.abstract > summary, .custom-callout.summary > summary, .custom-callout.tldr > summary {
    background-color: rgba(var(--callout-abstract), var(--callout-title-bg-opacity))
}

.custom-callout.info, .custom-callout.todo {
    border-color: rgba(var(--callout-info), var(--callout-border-opacity))
}

.custom-callout.info > summary, .custom-callout.todo > summary {
    background-color: rgba(var(--callout-info), var(--callout-title-bg-opacity))
}

.custom-callout.hint, .custom-callout.important, .custom-callout.tip {
    border-color: rgba(var(--callout-tip), var(--callout-border-opacity))
}

.custom-callout.hint > summary, .custom-callout.important > summary, .custom-callout.tip > summary {
    background-color: rgba(var(--callout-tip), var(--callout-title-bg-opacity))
}

.custom-callout.check, .custom-callout.done, .custom-callout.success {
    border-color: rgba(var(--callout-success), var(--callout-border-opacity))
}

.custom-callout.check > summary, .custom-callout.done > summary, .custom-callout.success > summary {
    background-color: rgba(var(--callout-success), var(--callout-title-bg-opacity))
}

.custom-callout.faq, .custom-callout.help, .custom-callout.question {
    border-color: rgba(var(--callout-question), var(--callout-border-opacity))
}

.custom-callout.faq > summary, .custom-callout.help > summary, .custom-callout.question > summary {
    background-color: rgba(var(--callout-question), var(--callout-title-bg-opacity))
}

.custom-callout.attention, .custom-callout.caution, .custom-callout.warning {
    border-color: rgba(var(--callout-warning), var(--callout-border-opacity))
}

.custom-callout.attention > summary, .custom-callout.caution > summary, .custom-callout.warning > summary {
    background-color: rgba(var(--callout-warning), var(--callout-title-bg-opacity))
}

.custom-callout.fail, .custom-callout.failure, .custom-callout.missing {
    border-color: rgba(var(--callout-failure), var(--callout-border-opacity))
}

.custom-callout.fail > summary, .custom-callout.failure > summary, .custom-callout.missing > summary {
    background-color: rgba(var(--callout-failure), var(--callout-title-bg-opacity))
}

.custom-callout.danger, .custom-callout.error {
    border-color: rgba(var(--callout-danger), var(--callout-border-opacity))
}

.custom-callout.danger > summary, .custom-callout.error > summary {
    background-color: rgba(var(--callout-danger), var(--callout-title-bg-opacity))
}

.custom-callout.bug {
    border-color: rgba(var(--callout-bug), var(--callout-border-opacity))
}

.custom-callout.bug > summary {
    background-color: rgba(var(--callout-bug), var(--callout-title-bg-opacity))
}

.custom-callout.example {
    border-color: rgba(var(--callout-example), var(--callout-border-opacity))
}

.custom-callout.example > summary {
    background-color: rgba(var(--callout-example), var(--callout-title-bg-opacity))
}

.custom-callout.cite, .custom-callout.quote {
    border-color: rgba(var(--callout-quote), var(--callout-border-opacity))
}

.custom-callout.cite > summary, .custom-callout.quote > summary {
    background-color: rgba(var(--callout-quote), var(--callout-title-bg-opacity))
}

/* 找不到关键字则提供默认样式 note 样式 */

.custom-callout > .callout-title > .callout-icon:before, .custom-callout.seealso > .callout-title > .callout-icon:before {
    content: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="%23448AFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svg-icon lucide-pencil"><path d="m18 2 4 4M7.5 20.5 19 9l-4-4L3.516.5 2 22z"/></svg>')
}

.custom-callout , .custom-callout.seealso {
    border-color: rgba(var(--callout-note), var(--callout-border-opacity)); /* 不起作用 */
}

.custom-callout > summary, .custom-callout.seealso > summary {
    background-color: rgba(var(--callout-note), var(--callout-title-bg-opacity))
}


/* 标题加粗并着色 */

.custom-callout .callout-title > .callout-icon + div{
    font-weight: bold;
    color: rgba(var(--callout-note)); /* 默认颜色 */
}

.custom-callout.abstract> .callout-title > .callout-icon + div ,
.custom-callout.summary> .callout-title > .callout-icon + div,
.custom-callout.tldr> .callout-title > .callout-icon + div{
    color: rgba(var(--callout-abstract));
}

.custom-callout.info> .callout-title > .callout-icon + div ,
.custom-callout.todo> .callout-title > .callout-icon + div{
    color: rgba(var(--callout-info));
}

.custom-callout.hint> .callout-title > .callout-icon + div ,
.custom-callout.important> .callout-title > .callout-icon + div,
.custom-callout.tip> .callout-title > .callout-icon + div{
    color: rgba(var(--callout-tip));
}

.custom-callout.check> .callout-title > .callout-icon + div ,
.custom-callout.done> .callout-title > .callout-icon + div,
.custom-callout.success> .callout-title > .callout-icon + div{
    color: rgba(var(--callout-success));
}

.custom-callout.question> .callout-title > .callout-icon + div ,
.custom-callout.faq> .callout-title > .callout-icon + div,
.custom-callout.help> .callout-title > .callout-icon + div{
    color: rgba(var(--callout-question));
}

.custom-callout.attention> .callout-title > .callout-icon + div ,
.custom-callout.caution> .callout-title > .callout-icon + div,
.custom-callout.warning> .callout-title > .callout-icon + div{
    color: rgba(var(--callout-warning));
}

.custom-callout.fail> .callout-title > .callout-icon + div,
.custom-callout.failure> .callout-title > .callout-icon + div,
.custom-callout.missing> .callout-title > .callout-icon + div{
    color: rgba(var(--callout-failure));
}

.custom-callout.error> .callout-title > .callout-icon + div ,
.custom-callout.danger> .callout-title > .callout-icon + div
{
    color: rgba(var(--callout-danger));
}

.custom-callout.bug> .callout-title > .callout-icon + div{
    color: rgba(var(--callout-bug));
}

.custom-callout.example> .callout-title > .callout-icon + div{
    color: rgba(var(--callout-example));
}

.custom-callout.cite> .callout-title > .callout-icon + div ,
.custom-callout.quote> .callout-title > .callout-icon + div
{
    color: rgba(var(--callout-quote));
}
/* 全局背景透明渐变
#recent-posts>.recent-post-item,.layout_page>div:first-child:not(.recent-posts),.layout_post>#page,.layout_post>#post,.read-mode .layout_post>#post {
    background: var(--light_bg_color)
}

#aside-content .card-widget {
    background: var(--light_bg_color)
}

#web_bg {
    background: linear-gradient(90deg,rgba(247,149,51,.1),rgba(243,112,85,.1) 15%,rgba(239,78,123,.1) 30%,rgba(161,102,171,.1) 44%,rgba(80,115,184,.1) 58%,rgba(16,152,173,.1) 72%,rgba(7,179,155,.1) 86%,rgba(109,186,130,.1))
} */