spring.css

:root {

    /********************************* Text alignment 文本对齐方式 *************************************
     **************************************************************************************************
     * - left:         Align Left         左对齐 
     * - right:        Align right        右对齐
     * - center:       Align center       居中对齐
     * - justify:      Align justify      两端对齐
     * - justify-all:  Align justify-all  全部两端对齐
     * - start:        Align start        行首对齐
     * - end:          Align end          行尾对齐
     **************************************************************************************************/
    --text-align: justify;

    /************************* Interactive animation configuration 交互动画配置 ************************
     **************************************************************************************************
     ** 1.To use interactive animations, first set --use-dynamic-effect` to 1, Then adjust other 
     **   configuration items as needed.
     ** 2.To turn off all interactive animations, set `--use-dynamic-effect` to 0
     **                                           set `--list-ol-text-style` to italic
     *
     ** 1.若要使用交互动画, 请先将 `--use-dynamic-effect` 设置为 1, 然后根据需要调整其他配置项
     ** 2.若要关闭全部交互动画, 请将 `--use-dynamic-effect` 设置为 0  
     **                            `--list-ol-text-style` 设置为 italic
     *
     * 其余配置项请根据需要自行配置
     * - 0: Close 关闭
     * - 1: Open 开启
     **************************************************************************************************/
    /* Use/Close interactive animations 使用/关闭交互动画 */
    --use-dynamic-effect: 1;

    /* H1 interactive effect 一级标题交互效果 */
    --h1-hover-effect: 1;

    /* H2 interactive effect 二级标题交互效果 */
    --h2-after-effect: 1;

    /* H3 H4 H5 H6 interactive effect 三,四,五,六级标题交互效果 */
    --h3-6-hover-effect: 1;

    /* Paragraph interactive effect 段落交互效果 */
    --p-hover-effect: 1;

    /* Image interactive effect 图片交互效果 */
    --img-hover-effect: 1;

    /* Blockquote interactive effect 引用块交互效果 */
    --blockquote-hover-effect: 1;

    /* Alert interactive effect 提示框交互效果 */
    --alert-hover-effect: 1;

    /* Strong text interactive effect 粗体文本交互效果 */
    --strong-hover-effect: 1;

    /* Italic text interactive effect 斜体文本交互效果 */
    --em-hover-effect: 1;

    /* Underline interactive effect 下划线交互效果 */
    --u-hover-effect: 1;

    /* Marked text interactive effect 高亮文本交互效果 */
    --mark-hover-effect: 1;

    /* Deleted text interactive effect 删除线交互效果 */
    --del-hover-effect: 1;

    /* Inline code block interactive effect 内联代码块交互效果 */
    --code-hover-effect: 1;

    /* Code block interactive effect 代码块交互效果 */
    --fence-hover-effect: 1;

    /* List interactive effect 列表交互效果
     * The following two values ​​need to be changed synchronously
     * 下面两个值需同步更改 0-italic or 1-normal */
    --list-marker-effect: 1;
    --list-ol-text-style: normal;

    /* Divider interactive effect 分割线交互效果 */
    --hr-hover-effect: 1;

    /* Table interactive effect 表格交互效果 */
    --table-hover-effect: 1;

    /*************************** Theme color configuration 主题颜色配置 ********************************
     **************************************************************************************************
     * - 
     **************************************************************************************************/
    --body-text-color: #282c34;
    --content-write-bg-color: #fefefe;
    --selection-color: #def2e8;

    --write-h1-before-bg: linear-gradient(90deg, rgba(152, 251, 152, 0), #e8f4ee, rgba(152, 251, 152, 0));

    --write-h2-after-bg: linear-gradient(90deg, rgba(69, 158, 106, 0), #3ea173a6, rgba(87, 158, 69, 0));

    --p-hover-bg-color: rgba(123, 181, 147, calc(0.1 * var(--p-hover-effect) * var(--use-dynamic-effect)));

    --ul-marker-color: #087725;
    --ulul-marker-color: #087725;
    --ululul-marker-color: #087725;

    --ol-hover-marker-color: rgb(0, calc(100 * var(--list-marker-effect) * var(--use-dynamic-effect)), 0);

    --blockquote-border-color: #54a12b;
    --blockquote-bg-color: #eef4e886;
    --blockquote-hover-border-color: #54a12b;
    --blockquote-thead-bg-color: #54a12bd4;
    --blockquote-thead-text-color: #3b3b3b4e;
    --blockquote-td-bg-color: #fafafa;

    --alert-tip-border-color: #1F883D;
    --alert-tip-bg-color: #e8f4eb90;
    --alert-tip-hover-border-color: #1F883D;
    --alert-tip-thead-bg-color: #3b9457;
    --alert-tip-thead-text-color: #fafbfa;

    --alert-caution-border-color: #CF222E;
    --alert-caution-bg-color: #f5ecec86;
    --alert-caution-hover-border-color: #CF222E;
    --alert-caution-hover-bg-color: #cf222d0a;
    --alter-caution-selection-bg-color: #cf222d17;
    --alert-caution-text-color: #CF222E;
    --alert-caution-thead-bg-color: #d83c46;
    --alert-caution-thead-text-color: #fafbfa;
    --alert-caution-td-hover-bg-color: #f5ecec;
    --alert-caution-list-item-marker-color: #CF222E;

    --alert-warning-border-color: #9A6700;
    --alert-warning-bg-color: #f4f1e97d;
    --alert-warning-hover-border-color: #9A6700;
    --alert-warning-hover-bg-color: #9a67000a;
    --alert-warning-selection-bg-color: #9a670017;
    --alert-warning-text-color: #9A6700;
    --alert-warning-thead-bg-color: #b7831c;
    --alert-warning-thead-text-color: #fafbfa;
    --alert-warning-list-item-marker-color: #9A6700;

    --alert-important-border-color: #8250DF;
    --alert-important-bg-color: #eae6f286;
    --alert-important-hover-border-color: #8250DF;
    --alert-important-hover-bg-color: #8250df0a;
    --alert-important-selection-bg-color: #8250df17;
    --alert-important-text-color: #8250DF;
    --alert-important-thead-bg-color: #8250DF;
    --alert-important-thead-text-color: #fafbfa;
    --alert-important-list-item-marker-color: #8250DF;

    --alert-note-border-color: #0969DA;
    --alert-note-bg-color: #e5ebf179;
    --alert-note-hover-border-color: #0969DA;
    --alert-note-hover-bg-color: #0969da0a;
    --alert-note-selection-bg-color: #0969da17;
    --alert-note-text-color: #0969DA;
    --alert-note-thead-bg-color: #0969DA;
    --alert-note-thead-text-color: #fafbfa;
    --alert-note-list-item-marker-color: #0969DA;

    --alert-code-bg-color: #67676716;
    --alert-code-3circle-1: #fc625d;
    --alert-code-3circle-2: #fdbc40;
    --alert-code-3circle-3: #34c759;
    --alert-td-bg-color: #fafafa;

    --hr-bg-image: linear-gradient(90deg, #5ea67c, #2f845e, #5ea67c);
    --hr-box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);

    --table-border-color: #02362215;
    --table-td-hover-bg: rgba(239, 245, 242, calc(0.7 * var(--table-hover-effect))) calc(var(--table-hover-effect) * 100%);
    --blockquote-td-hover-bg: rgba(239, 245, 242, calc(0.7 * var(--table-hover-effect))) calc(var(--table-hover-effect) * 100%);
    --alert-tip-td-hover-bg: rgba(239, 245, 242, calc(0.7 * var(--table-hover-effect))) calc(var(--table-hover-effect) * 100%);
    --alert-caution-td-hover-bg: rgba(245, 236, 236, calc(0.7 * var(--table-hover-effect))) calc(var(--table-hover-effect) * 100%);
    --alert-warning-td-hover-bg: rgba(245, 241, 236, calc(0.7 * var(--table-hover-effect))) calc(var(--table-hover-effect) * 100%);
    --alert-important-td-hover-bg: rgba(236, 236, 245, calc(0.7 * var(--table-hover-effect))) calc(var(--table-hover-effect) * 100%);
    --alert-note-td-hover-bg: rgba(236, 236, 245, calc(0.7 * var(--table-hover-effect))) calc(var(--table-hover-effect) * 100%);

    --table-thead-bg-color: #eff5f2;
    --table-thead-text-color: #06621e;

    --table-tbody-border-color: #e8f4ee;
    --table-edit-bg-color: #ffffff;
    --table-edit-hover-bg-color: #e8f4ee;

    --table-webkit-box-shadow-color1: rgba(0, 0, 0, 0.16);
    --table-webkit-box-shadow-color2: rgba(0, 0, 0, 0.12);

    --table-reset-bg-color: #ffffff;
    --table-reset-input-color: #282c34;
    --table-some-border-top-color: #eee;

    --table-meta-block-bg-color: #eaf3ec;
    --table-meta-block-color: #3f8a5f;

    --task-list-border-color: #737373;
    --task-list-bg-color: #ffffff;
    --task-list-input-after-border-color: #fff;
    --task-list-input-checked-bg-color: #399b6f;
    --task-list-done-color: #999;

    --math-html-webkit-box-shadow-color1: rgba(0, 0, 0, 0.16);
    --math-html-webkit-box-shadow-color2: rgba(0, 0, 0, 0.12);
    --math-html-rawblock-bg-color: #f5f6f7;
    --math-html-rawblock-control-bg-color: #f5f6f7;
    --math-html-rawblock-tooltip-bg-color: #f5f6f7;
    --math-html-rawblock-input-color: #282c34;
    --math-html-rawblock-gutter-bg-color: #f5f6f7;
    --math-html-rawblock-selected-bg-color: #bac6e9;
    --math-html-rawblock-selected-bg-color2: #def2e8;

    --strong-color: #06621e;
    --em-color: #000000;
    --em-hover-color: #006400;
    --u-border-color: rgb(9, 156, 70);

    --code-bg-color: rgba(221, 235, 213, 0.5);
    --code-color: #359d09;
    --code-hover-bg-color: rgba(221, 235, 213, calc(0.5 + 0.5 * var(--code-hover-effect) * var(--use-dynamic-effect)));

    --del-color: rgba(50, 100, 50, 0.5);
    --del-text-decoration-color: rgba(76, 175, 80, 0.7);
    --del-hover-color: rgba(50, 100, 50, calc(0.5 + 0.5 * var(--del-hover-effect) * var(--use-dynamic-effect)));
    --del-hover-text-decoration-color: rgba(76, 175, 80, calc(0.7 + 0.3 * var(--del-hover-effect) * var(--use-dynamic-effect)));

    --mark-bg-color: #aee6c3;
    --mark-hover-bg-color: rgba(174, 230, 195, calc(1 - 0.5 * var(--mark-hover-effect) * var(--use-dynamic-effect)));

    --a-color: #0c8f94;
    --a-hover-color: #02502a;

    --code-fences-color: #2f4f4f;
    --code-fences-bg-color: #ffffff;
    --code-fences-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    --code-fences-before-bg: #015e19;
    --code-fences-before-box-shadow: 20px 0 #068f28, 40px 0 rgb(116, 219, 38);
    --code-fences-3circle-1: #fc625d;
    --code-fences-3circle-2: #fdbc40;
    --code-fences-3circle-3: #34c759;

    --cm-s-inner-linenumber-color: #2f845e;

    --scrollbar-thumb-bg: linear-gradient(to top right, 
        rgba(74, 173, 35, 0.25), 
        rgba(27, 91, 62, 0.45)) !important;
    --scrollbar-thumb-hover-bg: linear-gradient(to top right, 
        rgba(74, 173, 35, 0.85), 
        rgba(27, 91, 62, 0.9));
    --scrollbar-thumb-active-bg: linear-gradient(to top right, 
        #4aad23, 
        #1b5b3e);
    
    --scrollbar-blur: blur(8px);
    --scrollbar-border: rgba(255, 255, 255, 0.2);
    --scrollbar-border-hover: rgba(255, 255, 255, 0.3);

    --quick-open-bg-color: #fff;
    --quick-open-color: #282c34;
    --quick-open-item-active-bg-color: #bac6e9;
    --quick-open-category-border-color: #eee;

    --modal-dialog-webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    --modal-dialog-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    --modal-dialog-bg-color: #f5f6f7;
    --modal-dialog-btn-default-hover-bg-color: #bac6e9;

    --preferences-color: #282c34;
    --preference-sidebar-nav-group-item-active-color: #efefef;
    --preference-sidebar-nav-group-item-active-bg-color: #2f845e;

    --html-for-mac-sidebar-webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    --html-for-mac-sidebar-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);

    --notification-bg-color: #fff;
    --notification-hover-bg-color: #bac6e9;
    --menu-sidebar-color: #282c34;
    --menu-sidebar-list-border-color: #2f353a;
    --menu-sidebar-list-bg-color: #2f353a;
    --menu-sidebar-li-a-color: #e3dede;
    --menu-sidebar-li-a-active-hover-color: #3e4249;
    --megamenu-content-color: #000;

    --sidebar-bg-color: #2f845e;
    --sidebar-content-file-list-item-border-color: #eee;
    --sidebar-content-file-list-item-active-bg-color: rgba(66, 185, 131, 0.1);
    --sidebar-content-file-list-item-active-border-color: #2f845e;
    --sidebar-content-file-list-item-search-pannel-border-color: #eee;
    --sidebar-content-file-list-item-search-pannel-search-option-btn-bg-color: #fff;
    --file-tree-node-hover-border-color: #2f845e;
    --file-tree-node-hover-bg-color: rgba(66, 185, 131, 0.1);
    --file-tree-node-active-border-color: #2f845e;
    --file-tree-node-active-bg-color: rgba(66, 185, 131, 0.1);
    --file-library-file-node-hover-border-color: #2f845e;
    --file-library-file-node-hover-bg-color: rgba(66, 185, 131, 0.1);

    --outline-item-hover-bg-color: #e8f4ee;
    --sidebar-footer-border-color: #eee;
    --sidebar-footer-hover-bg-color: #caebdb;
    --sidebar-files-menu-webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    --sidebar-files-menu-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);

    --dropdown-menu-border-color: #eee;
    --dropdown-menu-li-a-color: #282c34;
    --dropdown-menu-li-a-hover-color: #e8f4ee;
    --dropdown-menu-divider-border-color: #fff;

    --toc-bg-color: #fff;
    --toc-webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    --toc-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    --toc-hover-bg-color: #caebdb;

    --auto-suggest-container-bg-color: #d4eee1;

    --source-color: #6a6a6a;
    --source-cm-header-color: #428bca;
    --source-cm-atom-color: #777777;
}

content #write {
    background-color: var(--content-write-bg-color);
    max-width: 1200px;
    min-width: 800px;
    margin: 0 auto;
    padding-bottom: 7.5rem;
    overflow: overlay;
}

content #write p {
    word-spacing: 0.1rem;
    line-height: 1.9rem;
    margin: 3px;
}

content #write ol li {
    padding-left: 0.3rem;
}

content #write>h5.md-focus:before {
    top: 2px;
}

::-moz-selection {
    background-color: var(--selection-color);
}

::selection {
    background-color: var(--selection-color);
}

#context-menu {
    border-radius: 10px;
    padding: 12px 0 0 0;
    margin: 0;
}

#edit-menu,
#block-style-menu,
#inster-menu {
    border-radius: 10px;
    padding: 0;
    margin: 0;
}

/* h1-h3 */
#write h1,
#write h2,
#write h3 {
    font-style: normal;
}

#write h1,
#write h2 {
    text-align: center;
    margin-top: 1.5rem;
    margin-bottom: 1rem;
}

/* 由 @ji-ji 提供的 issue#13 修复代码  */
#write h1 {
    position: relative; 
}

#write h1:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--write-h1-before-bg);
    transition: transform 0.4s ease;
    transform: scaleX(0);
    transform-origin: center;
    z-index: -1;
    display: calc(var(--h1-hover-effect) * var(--use-dynamic-effect));
}

#write h1:hover {
    transform: scale(calc(1 + 0.1 * var(--h1-hover-effect) * var(--use-dynamic-effect)));
}

#write h1:hover:after {
    transform: scaleX(calc(var(--h1-hover-effect) * var(--use-dynamic-effect)));
}

#write h2 {
    font-size: 1.8rem;
    position: relative;
    padding-bottom: 0rem;
    font-weight: bold;
    margin-bottom: 0rem;
}

#write h2:after {
    content: "";
    display: block;
    width: 30rem;
    height: 2.5px;
    margin: 0.5rem auto 0.3rem;
    background: var(--write-h2-after-bg);
    border-radius: 10px;
    transform: scaleX(0);
    transition: transform 0.4s ease, background 0.4s ease;
}

#write h2:hover:after {
    transform: scaleX(calc(1 * var(--h2-after-effect) * var(--use-dynamic-effect)));
}

#write h3 {
    font-size: 1.6rem;
}

#write h4 {
    font-size: 1.4rem;
}

#write h5 {
    font-size: 1.2rem;
}

#write h6 {
    font-size: 1rem;
}

#write h3,
#write h4,
#write h5,
#write h6 {
    position: relative;
    margin-top: 1.0rem;
    margin-bottom: 0.5rem;
    transition: transform 0.3s ease;
}

#write h3:hover,
#write h4:hover,
#write h5:hover,
#write h6:hover {
    transform: scale(calc(1 + 0.01 * var(--h3-6-hover-effect) * var(--use-dynamic-effect)));
}

/* image */
img {
    border-radius: 10px;
    max-width: 100%;
    display: block;
    margin: 1em auto;
    transition: transform 0.15s ease, border-radius 0.15s ease;
}

img:hover {
    transform: scale(calc(1 + 0.01 * var(--img-hover-effect) * var(--use-dynamic-effect)));
    border-radius: calc(10px - 10px * var(--img-hover-effect) * var(--use-dynamic-effect));
}

/* paragraph */
p {
    font-size: 1rem;
    padding: 0 0.3rem;
    transition: all 0.25s ease;
}

p:not(:has(img)):hover {
    background-color: var(--p-hover-bg-color);
}

p.md-toc-content:hover {
    padding-left: 20px;
}

/* ul ol */
ul,
ol {
    margin: 0;
}

@keyframes bounce {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(calc(1 + 0.3 * var(--list-marker-effect) * var(--use-dynamic-effect)));
    }
}

ul .md-list-item::marker {
    list-style-type: disc;
    font-size: 27px !important;
    color: var(--ul-marker-color);
    transition: transform 0.3s;
}

ul .md-list-item:hover::marker {
    animation: bounce 0.6s ease-in-out;
}

ul ul .md-list-item::marker {
    list-style-type: circle;
    font-size: 27px;
    color: var(--ulul-marker-color);
    font-weight: bold;
    transition: transform 0.3s;
}

ul ul .md-list-item:hover::marker {
    animation: bounce 0.6s ease-in-out;
}

ul ul ul .md-list-item::marker {
    list-style-type: square;
    font-size: 27px;
    color: var(--ululul-marker-color);
    transition: transform 0.3s;
}

ul ul ul .md-list-item:hover::marker {
    animation: bounce 0.6s ease-in-out;
}

ol .md-list-item::marker {
    font-family: "Times New Roman", Times, serif;
    font-size: 20px;
    font-style: italic;
    transition: font-weight 0.2s ease, font-style 0.2s ease, color 0.2s ease, font-size 0.2s ease;
}

ol .md-list-item:hover::marker {
    font-style: var(--list-ol-text-style);
    font-weight: calc(500 + 100 * var(--list-marker-effect) * var(--use-dynamic-effect));
    font-size: calc(20px + 3px * var(--list-marker-effect) * var(--use-dynamic-effect));
    color: var(--ol-hover-marker-color);
}

/* blockquote */
blockquote {
    padding: 0.5rem 1rem;
    border-left: 8px solid var(--blockquote-border-color);
    background-color: var(--blockquote-bg-color);
    border-radius: 7px;
    transition: box-shadow 0.3s ease, border-radius 0.3s ease, border-left 0.3s ease;

    /* 增强版毛玻璃效果 */
        backdrop-filter: blur(15px) saturate(180%) brightness(110%);
        -webkit-backdrop-filter: blur(15px) saturate(180%) brightness(110%);
    
        /* 可选：添加边框增强毛玻璃质感 */
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        border-right: 1px solid rgba(255, 255, 255, 0.1);
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

blockquote p {
    margin: 0.1rem 0;
}

blockquote:hover {
    border-left: calc(8px + 1px * var(--blockquote-hover-effect) * var(--use-dynamic-effect)) solid var(--blockquote-hover-border-color);
    box-shadow: calc(0px + 1px * var(--blockquote-hover-effect) * var(--use-dynamic-effect)) calc(0px + 1px * var(--blockquote-hover-effect) * var(--use-dynamic-effect)) calc(1px + 1px * var(--blockquote-hover-effect) * var(--use-dynamic-effect)) rgba(0, 0, 0, calc(0.1 * var(--blockquote-hover-effect) * var(--use-dynamic-effect)));
    border-radius: calc(7px + 8px * var(--blockquote-hover-effect) * var(--use-dynamic-effect));
    
    /* hover 时增强效果 */
    backdrop-filter: blur(calc(25px + 15px * var(--blockquote-hover-effect) * var(--use-dynamic-effect))) 
                    saturate(calc(200% + 80% * var(--blockquote-hover-effect) * var(--use-dynamic-effect))) 
                    contrast(calc(115% + 15% * var(--blockquote-hover-effect) * var(--use-dynamic-effect))) 
                    brightness(calc(105% + 10% * var(--blockquote-hover-effect) * var(--use-dynamic-effect)));
    -webkit-backdrop-filter: blur(calc(25px + 15px * var(--blockquote-hover-effect) * var(--use-dynamic-effect))) 
                            saturate(calc(200% + 80% * var(--blockquote-hover-effect) * var(--use-dynamic-effect))) 
                            contrast(calc(115% + 15% * var(--blockquote-hover-effect) * var(--use-dynamic-effect))) 
                            brightness(calc(105% + 10% * var(--blockquote-hover-effect) * var(--use-dynamic-effect)));
}

blockquote table thead,
blockquote .md-table-fig .md-table thead {
    background-color: var(--blockquote-thead-bg-color);
    color: var(--blockquote-thead-text-color);
}

blockquote td {
    background-color: var(--blockquote-td-bg-color);
}

.md-alert.md-alert-tip {
    padding: 0.5rem 1rem;
    border-left: 8px solid var(--alert-tip-border-color);
    background-color: var(--alert-tip-bg-color);
    border-radius: 7px;
    transition: box-shadow 0.3s ease, border-radius 0.3s ease, border-left 0.3s ease;
}

.md-alert.md-alert-tip:hover {
    border-left: calc(8px + 1px * var(--alert-hover-effect) * var(--use-dynamic-effect)) solid var(--alert-tip-hover-border-color);
    box-shadow: calc(0px + 1px * var(--alert-hover-effect) * var(--use-dynamic-effect)) calc(0px + 1px * var(--alert-hover-effect) * var(--use-dynamic-effect)) calc(1px + 1px * var(--alert-hover-effect) * var(--use-dynamic-effect)) rgba(0, 0, 0, calc(0.1 * var(--alert-hover-effect) * var(--use-dynamic-effect)));
    border-radius: calc(7px + 8px * var(--alert-hover-effect) * var(--use-dynamic-effect));
}

.md-alert.md-alert-tip table thead,
.md-alert.md-alert-tip .md-table-fig .md-table thead {
    background-color: var(--alert-tip-thead-bg-color);
    color: var(--alert-tip-thead-text-color);
}

.md-alert.md-alert-caution {
    padding: 0.5rem 1rem;
    border-left: 8px solid var(--alert-caution-border-color);
    background-color: var(--alert-caution-bg-color);
    border-radius: 7px;
    transition: box-shadow 0.3s ease, border-radius 0.3s ease, border-left 0.3s ease;
}

.md-alert.md-alert-caution:hover {
    border-left: calc(8px + 1px * var(--alert-hover-effect) * var(--use-dynamic-effect)) solid var(--alert-caution-hover-border-color);
    box-shadow: calc(0px + 1px * var(--alert-hover-effect) * var(--use-dynamic-effect)) calc(0px + 1px * var(--alert-hover-effect) * var(--use-dynamic-effect)) calc(1px + 1px * var(--alert-hover-effect) * var(--use-dynamic-effect)) rgba(0, 0, 0, calc(0.1 * var(--alert-hover-effect) * var(--use-dynamic-effect)));
    border-radius: calc(7px + 8px * var(--alert-hover-effect) * var(--use-dynamic-effect));
}

.md-alert.md-alert-caution p:hover {
    background-color: var(--alert-caution-hover-bg-color);
}

.md-alert.md-alert-caution ::selection {
    background-color: var(--alter-caution-selection-bg-color);
}

.md-alert.md-alert-caution strong,
.md-alert.md-alert-caution em,
.md-alert.md-alert-caution code,
.md-alert.md-alert-caution a {
    color: var(--alert-caution-text-color);
}

.md-alert.md-alert-caution table thead,
.md-alert.md-alert-caution .md-table-fig .md-table thead {
    background-color: var(--alert-caution-thead-bg-color);
    color: var(--alert-caution-thead-text-color);
}

.md-alert.md-alert-caution td:hover {
    background-color: var(--alert-caution-td-hover-bg-color);
}

.md-alert.md-alert-caution ul .md-list-item::marker,
.md-alert.md-alert-caution ul ul .md-list-item::marker,
.md-alert.md-alert-caution ul ul .md-list-item::marker,
.md-alert.md-alert-caution ol .md-list-item:hover::marker {
    color: var(--alert-caution-list-item-marker-color);
}

.md-alert.md-alert-warning {
    padding: 0.5rem 1rem;
    border-left: 8px solid var(--alert-warning-border-color);
    background-color: var(--alert-warning-bg-color);
    border-radius: 7px;
    transition: box-shadow 0.3s ease, border-radius 0.3s ease, border-left 0.3s ease;
}

.md-alert.md-alert-warning:hover {
    border-left: calc(8px + 1px * var(--alert-hover-effect) * var(--use-dynamic-effect)) solid var(--alert-warning-hover-border-color);
    box-shadow: calc(0px + 1px * var(--alert-hover-effect) * var(--use-dynamic-effect)) calc(0px + 1px * var(--alert-hover-effect) * var(--use-dynamic-effect)) calc(1px + 1px * var(--alert-hover-effect) * var(--use-dynamic-effect)) rgba(0, 0, 0, calc(0.1 * var(--alert-hover-effect) * var(--use-dynamic-effect)));
    border-radius: calc(7px + 8px * var(--alert-hover-effect) * var(--use-dynamic-effect));
}

.md-alert.md-alert-warning p:hover {
    background-color: var(--alert-warning-hover-bg-color);
}

.md-alert.md-alert-warning ::selection {
    background-color: var(--alert-warning-selection-bg-color);
}

.md-alert.md-alert-warning strong,
.md-alert.md-alert-warning em,
.md-alert.md-alert-warning code,
.md-alert.md-alert-warning a {
    color: var(--alert-warning-text-color);
}

.md-alert.md-alert-warning table thead,
.md-alert.md-alert-warning .md-table-fig .md-table thead {
    background-color: var(--alert-warning-thead-bg-color);
    color: var(--alert-warning-thead-text-color);
}

.md-alert.md-alert-warning ul .md-list-item::marker,
.md-alert.md-alert-warning ul ul .md-list-item::marker,
.md-alert.md-alert-warning ul ul .md-list-item::marker,
.md-alert.md-alert-warning ol .md-list-item:hover::marker {
    color: var(--alert-warning-list-item-marker-color);
}

.md-alert.md-alert-important {
    padding: 0.5rem 1rem;
    border-left: 8px solid var(--alert-important-border-color);
    background-color: var(--alert-important-bg-color);
    border-radius: 7px;
    transition: box-shadow 0.3s ease, border-radius 0.3s ease, border-left 0.3s ease;
}

.md-alert.md-alert-important:hover {
    border-left: calc(8px + 1px * var(--alert-hover-effect) * var(--use-dynamic-effect)) solid var(--alert-important-hover-border-color);
    box-shadow: calc(0px + 1px * var(--alert-hover-effect) * var(--use-dynamic-effect)) calc(0px + 1px * var(--alert-hover-effect) * var(--use-dynamic-effect)) calc(1px + 1px * var(--alert-hover-effect) * var(--use-dynamic-effect)) rgba(0, 0, 0, calc(0.1 * var(--alert-hover-effect) * var(--use-dynamic-effect)));
    border-radius: calc(7px + 8px * var(--alert-hover-effect) * var(--use-dynamic-effect));
}

.md-alert.md-alert-important p:hover {
    background-color: var(--alert-important-hover-bg-color);
}

.md-alert.md-alert-important ::selection {
    background-color: var(--alert-important-selection-bg-color);
}

.md-alert.md-alert-important strong,
.md-alert.md-alert-important em,
.md-alert.md-alert-important code,
.md-alert.md-alert-important a {
    color: var(--alert-important-text-color);
}

.md-alert.md-alert-important table thead,
.md-alert.md-alert-important .md-table-fig .md-table thead {
    background-color: var(--alert-important-thead-bg-color);
    color: var(--alert-important-thead-text-color);
}

.md-alert.md-alert-important ul .md-list-item::marker,
.md-alert.md-alert-important ul ul .md-list-item::marker,
.md-alert.md-alert-important ul ul .md-list-item::marker,
.md-alert.md-alert-important ol .md-list-item:hover::marker {
    color: var(--alert-important-list-item-marker-color);
}

.md-alert.md-alert-note {
    padding: 0.5rem 1rem;
    border-left: 8px solid var(--alert-note-border-color);
    background-color: var(--alert-note-bg-color);
    border-radius: 7px;
    transition: box-shadow 0.3s ease, border-radius 0.3s ease, border-left 0.3s ease;
}

.md-alert.md-alert-note:hover {
    border-left: calc(8px + 1px * var(--alert-hover-effect) * var(--use-dynamic-effect)) solid var(--alert-note-hover-border-color);
    box-shadow: calc(0px + 1px * var(--alert-hover-effect) * var(--use-dynamic-effect)) calc(0px + 1px * var(--alert-hover-effect) * var(--use-dynamic-effect)) calc(1px + 1px * var(--alert-hover-effect) * var(--use-dynamic-effect)) rgba(0, 0, 0, calc(0.1 * var(--alert-hover-effect) * var(--use-dynamic-effect)));
    border-radius: calc(7px + 8px * var(--alert-hover-effect) * var(--use-dynamic-effect));
}

.md-alert.md-alert-note p:hover {
    background-color: var(--alert-note-hover-bg-color);
}

.md-alert.md-alert-note ::selection {
    background-color: var(--alert-note-selection-bg-color);
}

.md-alert.md-alert-note strong,
.md-alert.md-alert-note em,
.md-alert.md-alert-note code,
.md-alert.md-alert-note a {
    color: var(--alert-note-text-color);
}

.md-alert.md-alert-note table thead,
.md-alert.md-alert-note .md-table-fig .md-table thead {
    background-color: var(--alert-note-thead-bg-color);
    color: var(--alert-note-thead-text-color);
}

.md-alert.md-alert-note ul .md-list-item::marker,
.md-alert.md-alert-note ul ul .md-list-item::marker,
.md-alert.md-alert-note ul ul .md-list-item::marker,
.md-alert.md-alert-note ol .md-list-item:hover::marker {
    color: var(--alert-note-list-item-marker-color);
}

.md-alert p {
    margin: 0.1rem 0;
}

blockquote code,
.md-alert.md-alert-tip code,
.md-alert.md-alert-caution code,
.md-alert.md-alert-warning code,
.md-alert.md-alert-important code,
.md-alert.md-alert-note code {
    background-color: var(--alert-code-bg-color);
}

.md-alert.md-alert-tip .md-fences::before,
.md-alert.md-alert-caution .md-fences::before,
.md-alert.md-alert-warning .md-fences::before,
.md-alert.md-alert-important .md-fences::before,
.md-alert.md-alert-note .md-fences::before {
    background: var(--alert-code-3circle-1);
    box-shadow: 20px 0 var(--alert-code-3circle-2), 40px 0 var(--alert-code-3circle-3);
}

blockquote td,
.md-alert.md-alert-tip td,
.md-alert.md-alert-caution td,
.md-alert.md-alert-warning td,
.md-alert.md-alert-important td,
.md-alert.md-alert-note td {
    background-color: var(--alert-td-bg-color);
}

.md-alert-text-container {
    font-size: 20px;
}

/* horizontal line */
hr {
    position: relative;
    margin-top: 2rem;
    margin-bottom: 2rem;
    border: none;
    border-top: 2px solid transparent;
    background-image: var(--hr-bg-image);
    height: 1.5px;
    overflow: visible;
    color: #abb2bf;
    opacity: 0.8;
    border-radius: 5px;
    box-shadow: var(--hr-box-shadow);
    animation: dashAnimation 0.5s ease-in-out;

    transition: transform 0.3s ease, background-position 0.3s ease, height 0.3s ease;
    background-size: 200% 100%;
    background-position: 0 0;
}

hr:hover {
    background-position: calc(100% * var(--hr-hover-effect) * var(--use-dynamic-effect)), 0;
    transform: scale(calc(1 + 0.02 * var(--hr-hover-effect) * var(--use-dynamic-effect)));
    height: calc(1.5px + 1px * var(--hr-hover-effect) * var(--use-dynamic-effect));
}

@keyframes dashAnimation {
    0% {
        width: calc(100% - 100% * var(--hr-hover-effect) * var(--use-dynamic-effect));
        opacity: calc(1 - 1 * var(--hr-hover-effect) * var(--use-dynamic-effect));
    }

    100% {
        width: 100%;
        opacity: 1;
    }
}

/* table */
table,
.md-table-fig .md-table {
    border: 1px solid var(--table-border-color);
    border-radius: 10px;
    border-collapse: separate;
    overflow: hidden;
}

table th,
table td,
.md-table-fig .md-table th,
.md-table-fig .md-table td {
    padding: 10px 16px;
    border-top: 1px solid var(--table-border-color);
    border: 0.5px solid var(--table-border-color);
    transition: all 0.3s ease;
}

table th,
.md-table-fig .md-table th {
    border-bottom: 1px solid var(--table-border-color);
    border-top: 0;
}

table td:hover,
.md-table-fig .md-table td:hover {
    background: var(--table-td-hover-bg);
    transition: all calc(0.3s * var(--table-hover-effect)) ease;
}

blockquote td:hover {
    background: var(--blockquote-td-hover-bg);
}

.md-alert.md-alert-tip td:hover {
    background: var(--alert-tip-td-hover-bg);
}

.md-alert.md-alert-caution td:hover {
    background: var(--alert-caution-td-hover-bg);
}

.md-alert.md-alert-warning td:hover {
    background: var(--alert-warning-td-hover-bg);
}

.md-alert.md-alert-important td:hover {
    background: var(--alert-important-td-hover-bg);
}

.md-alert.md-alert-note td:hover {
    background: var(--alert-note-td-hover-bg);
}

table thead,
.md-table-fig .md-table thead {
    background-color: var(--table-thead-bg-color);
    color: var(--table-thead-text-color);
}

table tbody+tbody,
.md-table-fig .md-table tbody+tbody {
    border-top: 2px solid var(--table-tbody-border-color);
}

.md-table-fig .md-table-edit {
    background-color: var(--table-edit-bg-color);
}

.md-table-fig .md-table-edit .btn-default:hover {
    background-color: var(--table-edit-hover-bg-color);
}

.md-table-fig .md-table-edit .md-table-resize-popover {
    -webkit-box-shadow: 0 2px 5px 0 var(--table-webkit-box-shadow-color1), 0 2px 10px 0 var(--table-webkit-box-shadow-color2);
    box-shadow: 0 2px 5px 0 var(--table-webkit-box-shadow-color1), 0 2px 10px 0 var(--table-webkit-box-shadow-color2);
    border: none;
    padding: 0;
    background-color: transparent;
}

.md-table-fig .md-table-edit .md-table-resize-popover .arrow {
    top: -10px;
}

.md-table-fig .md-table-edit .md-table-resize-popover .arrow::after {
    border-bottom-color: var(--table-border-color);
}

.md-table-fig .md-table-edit .md-table-resize-popover .md-reset {
    border-radius: 10px;
    background-color: var(--table-reset-bg-color);
}

.md-table-fig .md-table-edit .md-table-resize-popover .md-reset input {
    color: var(--table-reset-input-color) !important;
}

.md-table-fig .md-table-edit .md-table-resize-popover .md-reset input#md-grid-width,
.md-table-fig .md-table-edit .md-table-resize-popover .md-reset input#md-grid-height {
    text-align: center;
}

.md-table-fig .md-table-edit .md-table-resize-popover .popover-title {
    border-top: 1px solid var(--table-some-border-top-color);
}

/* yaml front matter */
#write pre.md-meta-block {
    background: var(--table-meta-block-bg-color);
    color: var(--table-meta-block-color);
    border: 0;
    border-radius: 6px;
    line-height: 1.3rem;
    padding: 0.5rem 1.5rem;
    margin-top: -1rem;
    margin-bottom: 2rem;
    backdrop-filter: blur(15px) saturate(180%) brightness(110%);
    -webkit-backdrop-filter: blur(15px) saturate(180%) brightness(110%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

/* table of contents */
.md-toc {
    margin-bottom: 1.25rem;
}

/* task list */
.md-task-list-item>input::before {
    content: "";
    position: absolute;
    top: -1.5px;
    left: -3.5px;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    border: 1px solid var(--task-list-border-color);
    background: var(--task-list-bg-color);
    -webkit-transition: background-color 200ms ease-in-out;
    transition: background-color 200ms ease-in-out;
}

.md-task-list-item>input::after {
    content: "";
    position: absolute;
    top: 5px;
    left: 1px;
    width: 0.6rem;
    height: 0.3rem;
    border: 2px solid var(--task-list-input-after-border-color);
    border-top: 0;
    border-right: 0;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    opacity: 0;
    -webkit-transition: opacity 200ms ease-in-out;
    transition: opacity 200ms ease-in-out;
}

.md-task-list-item>input:checked::before {
    background-color: var(--task-list-input-checked-bg-color);
    border: none;
}

.md-task-list-item>input:checked::after {
    opacity: 1;
}

.md-task-list-item.task-list-done {
    text-decoration: line-through;
    color: var(--task-list-done-color);
}

/* footnote */
.footnotes {
    font-size: 1rem;
}

/* math,html block common */
.mathjax-block[contenteditable="false"]:active,
.mathjax-block[contenteditable="false"]:focus,
.md-htmlblock[contenteditable="false"]:active,
.md-htmlblock[contenteditable="false"]:focus {
    -webkit-box-shadow: 0 2px 5px 0 var(--math-html-webkit-box-shadow-color1), 0 2px 10px 0 var(--math-html-webkit-box-shadow-color2);
    box-shadow: 0 2px 5px 0 var(--math-html-webkit-box-shadow-color1), 0 2px 10px 0 var(--math-html-webkit-box-shadow-color2);
}

.mathjax-block:hover .md-rawblock-container,
.mathjax-block:hover .md-rawblock-tooltip,
.md-htmlblock:hover .md-rawblock-container,
.md-htmlblock:hover .md-rawblock-tooltip {
    background-color: var(--math-html-rawblock-bg-color);
    -webkit-animation: showRawBlockTooltip 0s linear;
    animation: showRawBlockTooltip 0s linear;
}

.mathjax-block:hover .md-rawblock-container,
.md-htmlblock:hover .md-rawblock-container {
    border-radius: 6px 0 6px 6px;
}

.mathjax-block .md-rawblock-control,
.md-htmlblock .md-rawblock-control {
    background-color: var(--math-html-rawblock-control-bg-color);
}

.mathjax-block .md-rawblock-tooltip,
.md-htmlblock .md-rawblock-tooltip {
    background-color: var(--math-html-rawblock-tooltip-bg-color);
    -webkit-animation: showRawBlockTooltip 0s linear;
    animation: showRawBlockTooltip 0s linear;
    border-radius: 4px 4px 0 0;
}

/* math block */
.mathjax-block .md-mathblock-panel .code-tooltip[contenteditable="false"] {
    -webkit-box-shadow: none;
    box-shadow: none;
}

.mathjax-block .md-mathblock-panel .md-rawblock-before {
    padding-top: 6px;
    border-top-left-radius: 6px;
}

.mathjax-block .md-mathblock-panel .md-rawblock-after {
    padding-bottom: 6px;
}

.mathjax-block .md-mathblock-panel .md-rawblock-input .cm-s-inner {
    color: var(--math-html-rawblock-input-color);
}

.mathjax-block .md-mathblock-panel .md-rawblock-input .cm-s-inner .CodeMirror-lines {
    color: var(--math-html-rawblock-input-color);
}

.mathjax-block .md-mathblock-panel .md-rawblock-input .cm-s-inner .CodeMirror-gutters {
    background-color: var(--math-html-rawblock-gutter-bg-color);
}

.mathjax-block .md-mathblock-panel .md-rawblock-input .cm-s-inner .CodeMirror-selected,
.mathjax-block .md-mathblock-panel .md-rawblock-input .cm-s-inner .CodeMirror-selectedtext {
    background-color: var(--math-html-rawblock-selected-bg-color) !important;
}

.mathjax-block .md-math-container {
    padding-top: 10px;
    padding-bottom: 10px;
}

/* html block */
.md-htmlblock .md-htmlblock-panel {
    border-radius: 10px;
    border-top-right-radius: 0;
    padding-left: 6px;
    padding-right: 6px;
}

.md-htmlblock .md-htmlblock-panel .md-rawblock-input {
    padding-top: 14px;
    padding-bottom: 10px;
}

.md-htmlblock .md-htmlblock-panel .md-rawblock-input .cm-s-inner .CodeMirror-selected,
.md-htmlblock .md-htmlblock-panel .md-rawblock-input .cm-s-inner .CodeMirror-selectedtext {
    background-color: var(--math-html-rawblock-selected-bg-color2) !important;
}

/* strong */
strong {
    font-weight: bold;
    color: var(--strong-color);
    font-size: 1.05rem;
    transition: font-size 0.3s ease, padding 0.3s ease;
    display: inline-block;
    margin: 0 2px;
}

strong:hover {
    font-size: calc(1.05rem + 0.05rem * var(--strong-hover-effect) * var(--use-dynamic-effect));
    padding: calc(0px + 3px * var(--strong-hover-effect) * var(--use-dynamic-effect));
}

/* emphasis */
em {
    background-color: inherit;
    color: var(--em-color);
    transition: all 0.3s ease;
    padding-left: 1px;
    padding-right: 1px;
}

em:hover {
    color: var(--em-hover-color);
    font-weight: calc(500 + 100 * var(--em-hover-effect) * var(--use-dynamic-effect));
    padding-left: calc(1px + 2px * var(--em-hover-effect) * var(--use-dynamic-effect));
    padding-right: calc(1px + 2px * var(--em-hover-effect) * var(--use-dynamic-effect));
}

/* underline */
u {
    background-color: inherit;
    color: inherit;
    text-decoration: none;
    border-bottom: 2px solid var(--u-border-color);
    padding-bottom: 2.5px;
    transition: all 0.3s ease;
}

u:hover {
    border: calc(2px * var(--u-hover-effect) * var(--use-dynamic-effect)) solid var(--u-border-color);
    padding: calc(0px + 4px * var(--u-hover-effect) * var(--use-dynamic-effect));
    margin: calc(0px + 4px * var(--u-hover-effect) * var(--use-dynamic-effect));
    border-radius: calc(0px + 7px * var(--u-hover-effect) * var(--use-dynamic-effect));
    border-bottom: 2px solid var(--u-border-color);
    padding-bottom: 2.5px;
}

/* code */
h1 code,
h2 code,
h3 code,
h4 code,
h5 code,
h6 code {
    font-size: inherit;
}

code {
    background-color: var(--code-bg-color);
    color: var(--code-color);
    font-family: "Fira Code", Consolas, "Lucida Console", "Courier", monospace, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 1rem;
    font-weight: 550;
    margin: 0 2px;
    padding: 3px 3px 1px;
    border-radius: 7px;
    transition: all 0.3s ease;
    z-index: -1;
}

code:hover {
    background-color: var(--code-hover-bg-color);
    font-weight: calc(550 + 150 * var(--code-hover-effect) * var(--use-dynamic-effect));
    padding: 3px 3px calc(1px + 2px * var(--code-hover-effect) * var(--use-dynamic-effect));
}

/* strike */
del {
    color: var(--del-color);
    text-decoration: line-through;
    text-decoration-color: var(--del-text-decoration-color);
    text-decoration-thickness: 1.5px;
    font-style: italic;
    opacity: 0.8;
    transition: color 0.3s ease, opacity 0.3s ease;
}

del:hover {
    color: var(--del-hover-color);
    opacity: calc(0.8 + 0.2 * var(--del-hover-effect) * var(--use-dynamic-effect));
    text-decoration-color: var(--del-hover-text-decoration-color);
}

/* hightlight */
mark {
    font-weight: 500;
    background-color: var(--mark-bg-color);
    color: inherit;
    margin: 0 2px;
    padding: 3px 3px 2.5px;
    border-radius: 0px;
    transition: all 0.3s ease
}

mark:hover {
    border-radius: calc(0px + 7px * var(--mark-hover-effect) * var(--use-dynamic-effect));
    background-color: var(--mark-hover-bg-color);
    padding: 3px 3px calc(2.5px + 1.5px * var(--mark-hover-effect) * var(--use-dynamic-effect));
}

/* hyperlink */
a {
    background-color: inherit;
    color: var(--a-color);
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    text-decoration: underline;
    color: var(--a-hover-color);
}

a img {
    border: none;
}

/* code fences */
.md-fences {
    font-family: "Fira Code", Consolas, "Lucida Console", "Courier", monospace, "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: var(--code-fences-color);
    background-color: var(--code-fences-bg-color);
    padding: 17px;
    padding-top: 32px;
    border-radius: 10px;
    box-shadow: var(--code-fences-box-shadow);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
}

.md-fences::before {
    background: var(--code-fences-before-bg);
    border-radius: 50%;
    box-shadow: var(--code-fences-before-box-shadow);
    content: ' ';
    height: 12px;
    width: 12px;
    position: absolute;
    left: 13px;
    top: 12px;
    transition: all 0.3s ease;
}

/* 1. Scale animation */
/* @keyframes bounce-code {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.01); 
    }
} */

/* 2. Displacement Animation */
@keyframes bounce-code {

    0%,
    100% {
        width: 100%;
        height: 100%;
        transform: translate(0, 0);
    }

    50% {
        transform: translate(calc(-3px * var(--fence-hover-effect) * var(--use-dynamic-effect)), calc(-3px * var(--fence-hover-effect) * var(--use-dynamic-effect)));
    }
}

.md-fences:hover {
    animation: bounce-code 0.5s ease-in-out;
    box-shadow: 0 calc(1px + 1px * var(--fence-hover-effect) * var(--use-dynamic-effect)) calc(3px + 1px * var(--fence-hover-effect) * var(--use-dynamic-effect)) rgba(0, 0, 0, calc(0.15 + 0.05 * var(--fence-hover-effect) * var(--use-dynamic-effect)));
}

.md-fences:hover::before {
    background: var(--code-fences-3circle-1);
    box-shadow: 20px 0 var(--code-fences-3circle-2), 40px 0 var(--code-fences-3circle-3);
}

.code-tooltip {
    border-radius: 6px;
    opacity: 0.7;
    box-shadow: 0 0.5px 0.5px 0 rgba(0, 28, 36, .2);
}

.cm-s-inner .CodeMirror-linenumber {
    margin-left: 7px;
    margin-right: 3px;
    color: var(--cm-s-inner-linenumber-color);
}

/* 关键字 */
.cm-s-inner .cm-keyword {
    color: #222fa7;
    font-weight: bold;
}

/* 操作符 */
.cm-s-inner .cm-operator {
    color: #006400;
}

/* 变量 */
.cm-s-inner .cm-variable {
    color: #239d37;
    font-weight: bold;
}

/* 函数参数 */
.cm-s-inner .cm-variable-2 {
    color: #108979;
}

/* 类名 */
.cm-s-inner .cm-variable-3 {
    color: #183da2;
    font-weight: bold;
    font-style: italic;
}

/* 内建函数 */
.cm-s-inner .cm-builtin {
    color: #006400;
    font-style: italic;
}

/* 常量 */
.cm-s-inner .cm-atom {
    color: #3b8f8f;
}

/* 数字 */
.cm-s-inner .cm-number {
    color: #3e19cf;
}

/* 函数定义 */
.cm-s-inner .cm-def {
    color: #10623e;
    font-weight: bold;
}

/* 字符串 */
.cm-s-inner .cm-string {
    color: #0264bf;
    font-style: italic;
}

/* 模板字符串 */
.cm-s-inner .cm-string-2 {
    color: #6b8e23;
}

/* 注释 */
.cm-s-inner .cm-comment {
    color: #6a737d;
    font-style: italic;
}

/* HTML 标签 */
.cm-s-inner .cm-tag {
    color: #042c99;
}

/* HTML 标签属性 */
.cm-s-inner .cm-attribute {
    color: #2b34e3;
}

/* CSS 属性 */
.cm-s-inner .cm-property {
    color: #2e8b57;
}

/* 选择器 */
.cm-s-inner .cm-qualifier {
    color: #2e8b57;
}

/* 元信息 */
.cm-s-inner .cm-meta {
    color: #099f8b;
    font-weight: bold;
    font-style: italic;
}

/* 链接 */
.cm-s-inner .cm-link {
    color: #1565c0;
    text-decoration: underline;
}

/* 错误信息 */
.cm-s-inner .cm-error {
    color: #d32f2f;
    background-color: #fdd;
}

/* 布尔值 */
.cm-s-inner .cm-boolean {
    color: #228b22;
    font-weight: bold;
}

/* 类型 */
.cm-s-inner .cm-type {
    color: #1565c0;
    font-weight: bold;
}

/* 标题 */
.cm-s-inner .cm-header {
    color: #2e8b57;
    font-weight: bold;
}

/* 引用 */
.cm-s-inner .cm-quote {
    color: #3503a8;
    font-style: italic;
}

/* scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    background-color: transparent;
}

::-webkit-scrollbar:hover {
    background-color: transparent;
}

::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 0;
}

::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb-bg);
    border-radius: 1px;
    border: 1.5px solid var(--scrollbar-border);
    backdrop-filter: var(--scrollbar-blur);
    -webkit-backdrop-filter: var(--scrollbar-blur);
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    min-height: 30px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover-bg);
    border-color: var(--scrollbar-border-hover);
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    transform: scale(1.02);
}

::-webkit-scrollbar-thumb:active {
    background: var(--scrollbar-thumb-active-bg);
    transform: scale(0.98);
    box-shadow:
        0 1px 4px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

/* find dialog */
#typora-quick-open {
    background-color: var(--quick-open-bg-color);
    color: var(--quick-open-color);
}

#typora-quick-open .typora-quick-open-item.active {
    background-color: var(--quick-open-item-active-bg-color) !important;
}

#typora-quick-open .ty-quick-open-category-title {
    border-top: 1px solid var(--quick-open-category-border-color) !important;
}

/* modal dialog */
#common-dialog .modal-dialog .modal-content {
    -webkit-box-shadow: var(--modal-dialog-webkit-box-shadow);
    box-shadow: var(--modal-dialog-box-shadow);
    background-color: var(--modal-dialog-bg-color);
    border: none;
    border-radius: 6px;
}

#common-dialog .modal-dialog .modal-content .modal-footer .btn-default:hover {
    background-color: var(--modal-dialog-btn-default-hover-bg-color) !important;
}

/* preferences */
.ty-preferences {
    font-family: "Fira Code", Consolas, "Lucida Console", "Courier", monospace, "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: var(--preferences-color);
}

.ty-preferences .window-header h2 {
    font-size: 1.6rem;
}

.ty-preferences .sidebar {
    font-size: 1.4rem;
}

.ty-preferences .sidebar .nav-group-item.active,
.ty-preferences .sidebar .nav-group-item:active {
    color: var(--preference-sidebar-nav-group-item-active-color);
    background-color: var(--preference-sidebar-nav-group-item-active-bg-color);
}

/* sidebar includes file-tree,articles and outline*/
.html-for-mac #typora-sidebar {
    -webkit-box-shadow: var(--html-for-mac-sidebar-webkit-box-shadow);
    box-shadow: var(--html-for-mac-sidebar-box-shadow);
}

/* focus mode/typewriter mode notification  */
#md-notification {
    background-color: var(--notification-bg-color) !important;
}

#md-notification #ty-surpress-mode-warning-close-btn:hover {
    background-color: var(--notification-hover-bg-color) !important;
}

/* Unibody sidebar */
#megamenu-menu-sidebar {
    color: var(--menu-sidebar-color);
    font-size: 1rem;
}

#megamenu-menu-sidebar #megamenu-menu-list {
    border-top-color: var(--menu-sidebar-list-border-color);
    background-color: var(--menu-sidebar-list-bg-color);
}

#megamenu-menu-sidebar #megamenu-menu-list li a {
    color: var(--menu-sidebar-li-a-color) !important;
}

#megamenu-menu-sidebar #megamenu-menu-list li a.active,
#megamenu-menu-sidebar #megamenu-menu-list li a:hover {
    background-color: var(--menu-sidebar-li-a-active-hover-color) !important;
}

#megamenu-menu-sidebar #megamenu-menu-list li a#m-saved {
    background-color: transparent !important;
}

.megamenu-opened .megamenu-menu {
    left: 0;
}

#megamenu-content {
    color: var(--megamenu-content-color);
}

/* sidebar */
#typora-sidebar .info-panel-tab-wrapper .info-panel-tab .info-panel-tab-border {
    background-color: var(--sidebar-bg-color);
    border-radius: 4px;
}

#typora-sidebar .sidebar-osx-tab .sidebar-tabs {
    border-bottom-color: transparent;
}

#typora-sidebar #sidebar-content .file-list-item {
    border-bottom: 1px solid var(--sidebar-content-file-list-item-border-color);
}

#typora-sidebar #sidebar-content .file-list-item.active {
    background-color: var(--sidebar-content-file-list-item-active-bg-color);
    border-left: 4px solid var(--sidebar-content-file-list-item-active-border-color);
}

#typora-sidebar #sidebar-content .ty-sidebar-search-panel {
    border-bottom: 1px solid var(--sidebar-content-file-list-item-search-pannel-border-color);
}

#typora-sidebar #sidebar-content .ty-sidebar-search-panel .searchpanel-search-option-btn {
    background-color: var(--sidebar-content-file-list-item-search-pannel-search-option-btn-bg-color);
}

#typora-sidebar #sidebar-content .sidebar-content-content .file-tree-node:not(.file-node-root):hover>.file-node-background {
    border-left: 4px solid var(--file-tree-node-hover-border-color);
    background-color: var(--file-tree-node-hover-bg-color);
}

#typora-sidebar #sidebar-content .sidebar-content-content .file-tree-node.active>.file-node-background {
    border-color: var(--file-tree-node-active-border-color);
    background-color: var(--file-tree-node-active-bg-color);
}

#typora-sidebar #sidebar-content .sidebar-content-content #file-library-list-children .file-library-file-node:hover {
    border-left: 4px solid var(--file-library-file-node-hover-border-color);
    background-color: var(--file-library-file-node-hover-bg-color);
}

#typora-sidebar #sidebar-content #outline-content .no-collapse-outline .outline-item {
    line-height: 1.375rem;
    font-size: 1rem;
}

#typora-sidebar #sidebar-content #outline-content .outline-expander:before {
    color: inherit;
    font-size: 14px;
    top: auto;
    content: "\f0da";
    font-family: FontAwesome;
}

#typora-sidebar #sidebar-content #outline-content .outline-expander:hover:before,
#typora-sidebar #sidebar-content #outline-content .outline-item-open>.outline-item>.outline-expander:before {
    content: "\f0d7";
}

#typora-sidebar #sidebar-content #outline-content .outline-item:hover {
    background-color: var(--outline-item-hover-bg-color) !important;
}

#typora-sidebar #ty-sidebar-footer {
    border-top: 1px solid var(--sidebar-footer-border-color);
}

#typora-sidebar #ty-sidebar-footer .sidebar-footer-item:hover {
    background-color: var(--sidebar-footer-hover-bg-color) !important;
}

#typora-sidebar #ty-sidebar-footer #sidebar-files-menu {
    -webkit-box-shadow: var(--sidebar-files-menu-webkit-box-shadow);
    box-shadow: var(--sidebar-files-menu-box-shadow);
}

/* dropdown menu */
.dropdown-menu>.show+.menuitem-group-label.show {
    border-top: 1px solid var(--dropdown-menu-border-color) !important;
}

.dropdown-menu li a {
    color: var(--dropdown-menu-li-a-color) !important;
}

.dropdown-menu li a:hover {
    background-color: var(--dropdown-menu-li-a-hover-color) !important;
}

.dropdown-menu .divider {
    border-color: var(--dropdown-menu-divider-border-color);
}

/* sidebar-files-menu,toc-dropmenu,suggest common */
#sidebar-files-menu,
#toc-dropmenu,
.auto-suggest-container {
    background-color: var(--toc-bg-color);
    -webkit-box-shadow: var(--toc-webkit-box-shadow);
    box-shadow: var(--toc-box-shadow);
    border: none;
}

#toc-dropmenu .outline-item:hover {
    background-color: var(--toc-hover-bg-color) !important;
}

/* emoji,fences,word suggest */
.auto-suggest-container {
    padding-top: 4px;
    padding-bottom: 4px;
}

.auto-suggest-container li.active,
.auto-suggest-container li:hover {
    background-color: var(--auto-suggest-container-bg-color) !important;
}

/* source code mode */
#typora-source {
    font-family: "Fira Code", Consolas, "Lucida Console", "Courier", monospace, "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: var(--source-color);
}

#typora-source .cm-s-typora-default .cm-header,
#typora-source .cm-s-typora-default .cm-property,
#typora-source .CodeMirror.cm-s-typora-default div.CodeMirror-cursor {
    color: var(--source-cm-header-color);
}

#typora-source .cm-s-typora-default .cm-atom,
#typora-source .cm-s-typora-default .cm-number {
    color: var(--source-cm-atom-color);
}

#typora-source .CodeMirror-selectedtext {
    background-color: transparent !important;
}

.typora-node .file-list-item-parent-loc,
.typora-node .file-list-item-time,
.typora-node .file-list-item-summary {
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "PingFang SC", "Microsoft YaHei", sans-serif;
}

@media print {
    body {
        zoom: 70%;
        margin: 0rem 1rem;
        padding: 1rem;
    }

    table,
    .md-table-fig .md-table {
        border: none;
        border-radius: 10px;
        border-collapse: separate;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    }

    table th,
    table td,
    .md-table-fig .md-table th,
    .md-table-fig .md-table td {
        padding: 10px 16px;
        border-top: none;
        border: none;
    }

    table th,
    .md-table-fig .md-table th {
        background-color: var(--table-thead-bg-color);
        color: var(--table-thead-text-color);
    }

    blockquote table th,
    blockquote .md-table-fig .md-table th {
        background-color: var(--blockquote-thead-bg-color);
        color: var(--blockquote-thead-text-color);
    }

    .md-alert.md-alert-tip table th,
    .md-alert.md-alert-tip .md-table-fig .md-table th {
        background-color: var(--alert-tip-thead-bg-color);
        color: var(--alert-tip-thead-text-color);
    }

    .md-alert.md-alert-caution table th,
    .md-alert.md-alert-caution .md-table-fig .md-table th {
        background-color: var(--alert-caution-thead-bg-color);
        color: var(--alert-caution-thead-text-color);
    }

    .md-alert.md-alert-warning table th,
    .md-alert.md-alert-warning .md-table-fig .md-table th {
        background-color: var(--alert-warning-thead-bg-color);
        color: var(--alert-warning-thead-text-color);
    }

    .md-alert.md-alert-important table th,
    .md-alert.md-alert-important .md-table-fig .md-table th {
        background-color: var(--alert-important-thead-bg-color);
        color: var(--alert-important-thead-text-color);
    }

    .md-alert.md-alert-note table th,
    .md-alert.md-alert-note .md-table-fig .md-table th {
        background-color: var(--alert-note-thead-bg-color);
        color: var(--alert-note-thead-text-color);
    }

    :where(table, .md-table-fig .md-table) {
        & tr:nth-child(even) {
            background-color: var(--table-row-even-bg-color, #eff5f262);
        }

        & tr:nth-child(odd) {
            background-color: var(--table-row-odd-bg-color, #ffffff);
        }
    }

    hr {
        position: relative;
        margin: 1.2rem auto;
        border: none;
        background-color: #2f845e;
        height: 2.5px;
        width: 1024px !important;
        opacity: 0.8;
        border-radius: 1.75px;
    }
}

@media only screen and (min-width: 1400px) {
    #write {
        max-width: 1024px;
    }

    hr {
        position: relative;
        margin: 2rem auto;
        border: none;
        background-color: #2f845e;
        height: 3px;
        opacity: 0.8;
        border-radius: 1.5px;
    }

    .md-fences:hover {
        animation: none;
    }
}

@media only screen and (min-width: 1800px) {
    #write {
        max-width: 1200px;
    }

    hr {
        position: relative;
        margin: 2rem auto;
        border: none;
        background-color: #2f845e;
        height: 3px;
        opacity: 0.8;
        border-radius: 1.5px;
    }

    .md-fences:hover {
        animation: none;
    }
}

html {
    font-size: 17px;
}