/*
 * Animal Island Theme for Typora
 * Inspired by animal-island-ui (https://github.com/guokaigdg/animal-island-ui)
 * Aesthetic: Animal Crossing — warm cream paper, mint accents, 3D pillow shadows
 */

:root {


    /* === Primary (mint / leaf) === */
    --ai-primary:          #19c8b9;
    --ai-primary-hover:    #3dd4c6;
    --ai-primary-active:   #11a89b;
    --ai-primary-bg:       #e6f9f6;

    /* === Text (warm brown) === */
    --ai-text-main:        #000000;
    --ai-text-body:        #000000;
    --ai-text-secondary:   #333333;
    --ai-text-muted:       #555555;
    --ai-text-disabled:    #888888;

    /* === Surfaces (white paper, almost-white desk) === */
    --ai-bg-app:           #faf9f3;   /* desk: near-white with a hint of warmth */
    --ai-bg-paper:         #ffffff;   /* paper: pure white */
    --ai-bg-soft:          #efe9d6;   /* callout / code bg (kept warm to stand out) */
    --ai-bg-input:         #f7f5ec;

    /* === Borders === */
    --ai-border:           #a89c83;
    --ai-border-light:     #c9bea4;
    --ai-border-soft:      #d8cdb2;

    /* === Status === */
    --ai-success:          #6fba2c;
    --ai-warning:          #f5c31c;
    --ai-error:            #e05a5a;
    --ai-focus-yellow:     #ffcc00;

    /* === 3D Shadows === */
    --ai-shadow-button:    #bdaea0;
    --ai-shadow-input:     #d4c9b4;
    --ai-shadow-card:      0 3px 10px 0 rgba(61, 52, 40, 0.10);
    --ai-shadow-large:     0 8px 24px 0 rgba(61, 52, 40, 0.14);
    --ai-shadow-deep:      0 4px 10px rgba(107, 92, 67, 0.32);

    /* === Radius === */
    --ai-radius-sm:        12px;
    --ai-radius:           18px;
    --ai-radius-lg:        24px;
    --ai-radius-pill:      999px;

    /* === Type === */
    --ai-font:             -apple-system, BlinkMacSystemFont,
                           "Hiragino Sans", "Hiragino Kaku Gothic ProN",
                           "PingFang SC", "Noto Sans SC", "Noto Sans JP",
                           "Microsoft YaHei", "Helvetica Neue", sans-serif;
    --ai-mono:             "JetBrains Mono", "Fira Code", "Cascadia Code",
                           "SF Mono", Consolas, Menlo, monospace;


}

/* =========================================================
   App canvas
   ========================================================= */
.markdown-body, .page-content  {


    font-size: 16px;


}

.markdown-body, .page-content  {


    font-family: var(--ai-font);
    color: var(--ai-text-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: 0.01em;


}

.markdown-body, .page-content  {


    line-height: 1.75;
    font-size: 16px;
    color: var(--ai-text-body);


}

.markdown-body > *:first-child, .page-content > *:first-child  {


    margin-top: 0 !important;


}

/* =========================================================
   Headings
   ========================================================= */
.markdown-body h1, .page-content h1, .markdown-body h2, .page-content h2, .markdown-body h3, .page-content h3, .markdown-body h4, .page-content h4, .markdown-body h5, .page-content h5, .markdown-body h6, .page-content h6  {


    color: var(--ai-text-main);
    font-family: var(--ai-font);
    font-weight: 800;
    letter-spacing: 0.02em;
    line-height: 1.35;


}

/* H1 — 居中勋章 · 三色胶囊下划线 */
.markdown-body h1, .page-content h1  {


    font-size: 2.25em;
    font-weight: 900;
    text-align: center;
    color: var(--ai-text-main);
    margin: 1.3em 0 1.1em;
    padding-bottom: 0.5em;
    line-height: 1.3;


}

.markdown-body h1::after, .page-content h1::after  {


    content: "";
    display: block;
    width: 110px;
    height: 8px;
    margin: 0.55em auto 0;
    border-radius: var(--ai-radius-pill);
    background: linear-gradient(to right,
        var(--ai-primary)   0%, var(--ai-primary)   40%,
        var(--ai-warning)   40%, var(--ai-warning)  60%,
        var(--ai-primary)   60%, var(--ai-primary)  100%);
    box-shadow: 0 2px 0 0 var(--ai-shadow-input);


}

/* H2 — 卡片便签 · 薄荷渐变 + 左厚竖块 */
.markdown-body h2, .page-content h2  {


    font-size: 1.7em;
    font-weight: 800;
    color: var(--ai-text-main);
    margin: 1.8em 0 0.9em;
    padding: 12px 20px 12px 22px;
    background: linear-gradient(
        to right,
        var(--ai-primary-bg) 0%,
        var(--ai-bg-soft) 55%,
        transparent 100%
    );
    border-left: 8px solid var(--ai-primary);
    border-radius: 0 var(--ai-radius) var(--ai-radius) 0;
    box-shadow: 0 2px 0 0 var(--ai-shadow-input);


}

/* H3 — 小节 · 左竖线 + 底部虚线 */
.markdown-body h3, .page-content h3  {


    font-size: 1.32em;
    font-weight: 700;
    color: var(--ai-text-main);
    margin: 1.5em 0 0.7em;
    padding: 4px 0 8px 14px;
    border-left: 5px solid var(--ai-primary);
    border-bottom: 2px dashed var(--ai-border-soft);


}

/* H4 — 薄荷文字 + 短"记号笔"下划线 */
.markdown-body h4, .page-content h4  {


    font-size: 1.15em;
    font-weight: 800;
    color: var(--ai-primary-active);
    margin: 1.3em 0 0.5em;
    padding-bottom: 6px;
    background-image: linear-gradient(
        to right,
        var(--ai-primary) 0,
        var(--ai-primary) 36px,
        transparent 36px
    );
    background-position: 0 100%;
    background-repeat: no-repeat;
    background-size: 100% 3px;


}

/* H5 — 米色胶囊贴纸 (inline-block) */
.markdown-body h5, .page-content h5  {


    font-size: 0.98em;
    font-weight: 800;
    color: var(--ai-text-main);
    margin: 1.1em 0 0.4em;
    display: inline-block;
    padding: 3px 14px;
    background: var(--ai-bg-soft);
    border: 1.5px solid var(--ai-border-soft);
    border-radius: var(--ai-radius-pill);


}

/* H6 — 大写微标签 */
.markdown-body h6, .page-content h6  {


    font-size: 0.82em;
    font-weight: 800;
    color: var(--ai-text-muted);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: 1em 0 0.3em;


}

/* =========================================================
   Paragraph / inline
   ========================================================= */
.markdown-body p, .page-content p  {


    margin: 0.8em 0;
    line-height: 1.8;


}

.markdown-body strong, .page-content strong, .markdown-body b, .page-content b  {


    color: var(--ai-text-main);
    font-weight: 800;


}

.markdown-body em, .page-content em, .markdown-body i, .page-content i  {


    color: var(--ai-text-main);


}

.markdown-body mark, .page-content mark  {


    background: var(--ai-focus-yellow);
    color: var(--ai-text-main);
    padding: 0 4px;
    border-radius: 4px;


}

.markdown-body del, .page-content del, .markdown-body s, .page-content s  {


    color: var(--ai-text-disabled);


}

/* =========================================================
   Links
   ========================================================= */
.markdown-body a, .page-content a  {


    color: var(--ai-primary-active);
    text-decoration: none;
    border-bottom: 2px dotted var(--ai-primary);
    padding: 0 2px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);


}

.markdown-body a:hover, .page-content a:hover  {


    color: white;
    background: var(--ai-primary);
    border-bottom-color: transparent;
    border-radius: 5px;


}

/* =========================================================
   Lists
   ========================================================= */
.markdown-body ul, .page-content ul, .markdown-body ol, .page-content ol  {


    padding-left: 1.8em;
    margin: 0.7em 0;


}

.markdown-body li, .page-content li  {


    margin: 0.25em 0;


}

.markdown-body ul > li::marker, .page-content ul > li::marker  {


    color: var(--ai-primary);


}

.markdown-body ol > li::marker, .page-content ol > li::marker  {


    color: var(--ai-primary-active);
    font-weight: 800;


}

/* Task list — soft 3D checkbox */
.markdown-body .md-task-list-item > input, .page-content .md-task-list-item > input  {


    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    margin-right: 8px;
    vertical-align: -3px;
    background: var(--ai-bg-input);
    border: 2.5px solid var(--ai-border-light);
    border-radius: 6px;
    box-shadow: 0 2px 0 0 var(--ai-shadow-input);
    cursor: pointer;
    transition: all 0.15s;
    position: relative;


}

.markdown-body .md-task-list-item > input:checked, .page-content .md-task-list-item > input:checked  {


    background: var(--ai-success);
    border-color: var(--ai-success);
    box-shadow: 0 2px 0 0 #5a9e1e;


}

.markdown-body .md-task-list-item > input:checked::after, .page-content .md-task-list-item > input:checked::after  {


    content: "";
    position: absolute;
    left: 4px;
    top: 0px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 2.5px 2.5px 0;
    transform: rotate(45deg);


}

/* =========================================================
   Blockquote — pillow card
   ========================================================= */
.markdown-body blockquote, .page-content blockquote  {


    margin: 1em 0;
    padding: 12px 20px;
    background: var(--ai-bg-soft);
    border-left: 6px solid var(--ai-primary);
    border-radius: var(--ai-radius);
    color: var(--ai-text-body);
    box-shadow: 0 3px 0 0 var(--ai-shadow-input);


}

.markdown-body blockquote p, .page-content blockquote p  {


    margin: 0.4em 0;


}

.markdown-body blockquote blockquote, .page-content blockquote blockquote  {


    background: rgba(255, 255, 255, 0.45);
    border-left-color: var(--ai-warning);
    box-shadow: none;


}









































/* Inline KaTeX/MathJax */
.markdown-body .MathJax, .page-content .MathJax, .markdown-body mjx-container, .page-content mjx-container  {


    color: var(--ai-text-main);


}

/* =========================================================
   Horizontal rule — dashed paw-print path
   ========================================================= */
.markdown-body hr, .page-content hr  {


    border: none;
    height: 18px;
    width: 70%;
    margin: 2.4em auto;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 18'><ellipse cx='16' cy='13' rx='5' ry='3.8' fill='%2319c8b9'/><circle cx='9' cy='6' r='2.3' fill='%2319c8b9'/><circle cx='14' cy='3' r='2.3' fill='%2319c8b9'/><circle cx='19' cy='3' r='2.3' fill='%2319c8b9'/><circle cx='24' cy='6' r='2.3' fill='%2319c8b9'/></svg>");
    background-size: 80px 18px;
    background-repeat: repeat-x;
    background-position: center;


}

/* =========================================================
   Tables
   ========================================================= */
.markdown-body table, .page-content table  {


    border-collapse: separate;
    border-spacing: 0;
    margin: 1.2em auto;
    border: 2px solid var(--ai-border-light);
    border-radius: var(--ai-radius);
    overflow: hidden;
    box-shadow: var(--ai-shadow-card);


}

.markdown-body thead, .page-content thead  {


    background: var(--ai-primary);


}

.markdown-body th, .page-content th  {


    color: white;
    font-weight: 800;
    letter-spacing: 0.02em;
    padding: 10px 16px;
    text-align: left;
    border: none;


}

.markdown-body td, .page-content td  {


    padding: 10px 16px;
    border-top: 1.5px dashed var(--ai-border-soft);
    color: var(--ai-text-body);


}

.markdown-body tbody tr:nth-child(even) td, .page-content tbody tr:nth-child(even) td  {


    background: var(--ai-bg-soft);


}

.markdown-body tbody tr:hover td, .page-content tbody tr:hover td  {


    background: var(--ai-primary-bg);


}

/* =========================================================
   Images
   ========================================================= */
.markdown-body img, .page-content img  {


    max-width: 100%;
    border-radius: var(--ai-radius);
    box-shadow: var(--ai-shadow-deep);


}

.markdown-body p > img:only-child, .page-content p > img:only-child  {


    display: block;
    margin: 1em auto;


}

/* =========================================================
   Footnotes
   ========================================================= */
.markdown-body .md-footnote, .page-content .md-footnote  {


    background: var(--ai-primary-bg);
    color: var(--ai-primary-active);
    border-radius: 6px;
    padding: 1px 6px;
    font-weight: 700;


}

/* =========================================================
   Selection / focus
   ========================================================= */
.markdown-body ::selection, .page-content ::selection  {


    background: var(--ai-focus-yellow);
    color: var(--ai-text-main);


}

.markdown-body .md-focus-container, .page-content .md-focus-container  {


    outline: none;


}

/* =========================================================
   Sidebar
   ========================================================= */
.markdown-body .sidebar, .page-content .sidebar, .markdown-body #typora-sidebar, .page-content #typora-sidebar, .markdown-body .sidebar-content, .page-content .sidebar-content, .markdown-body .sidebar-content-content, .page-content .sidebar-content-content, .markdown-body .sidebar-tabs, .page-content .sidebar-tabs  {


    background-color: var(--ai-bg-app) !important;
    color: var(--ai-text-body) !important;
    font-family: var(--ai-font);
    border-right: 1.5px solid var(--ai-border-soft);


}

.markdown-body .sidebar-tabs .sidebar-tab, .page-content .sidebar-tabs .sidebar-tab  {


    color: var(--ai-text-secondary);


}

.markdown-body .sidebar-tabs .sidebar-tab.active, .page-content .sidebar-tabs .sidebar-tab.active  {


    color: var(--ai-primary-active);
    border-bottom: 3px solid var(--ai-primary);


}

.markdown-body .outline-item, .page-content .outline-item, .markdown-body .file-list-item, .page-content .file-list-item  {


    border-radius: var(--ai-radius-sm);
    margin: 2px 6px;
    padding: 6px 10px;
    color: var(--ai-text-body);


}

.markdown-body .outline-item:hover, .page-content .outline-item:hover, .markdown-body .file-list-item:hover, .page-content .file-list-item:hover  {


    background: var(--ai-bg-soft) !important;
    color: var(--ai-text-main) !important;


}

.markdown-body .outline-active, .page-content .outline-active, .markdown-body .file-list-item-selected, .page-content .file-list-item-selected  {


    background: var(--ai-primary-bg) !important;
    color: var(--ai-primary-active) !important;
    font-weight: 700;


}

/* Search */
.markdown-body .searchpanel-search-option-btn, .page-content .searchpanel-search-option-btn  {


    background: var(--ai-bg-input);
    border: 2px solid var(--ai-border-light);
    border-radius: var(--ai-radius-sm);


}

/* =========================================================
   Quick open / find bar
   ========================================================= */
.markdown-body #typora-quick-open, .page-content #typora-quick-open  {


    background: var(--ai-bg-app) !important;


}

.markdown-body #typora-quick-open-input, .page-content #typora-quick-open-input, .markdown-body .searchpanel-search-input, .page-content .searchpanel-search-input, .markdown-body input[type=], .page-content input[type=]  {


    background: var(--ai-bg-input);
    border: 2.5px solid var(--ai-border-light) !important;
    border-radius: var(--ai-radius);
    box-shadow: 0 3px 0 0 var(--ai-shadow-input);
    color: var(--ai-text-body);
    padding: 6px 12px;
    transition: all 0.15s;


}

.markdown-body #typora-quick-open-input:focus, .page-content #typora-quick-open-input:focus, .markdown-body input[type=]:focus, .page-content input[type=]:focus  {


    border-color: var(--ai-primary) !important;
    box-shadow: 0 3px 0 0 var(--ai-primary-active);
    outline: none;


}

.markdown-body .btn, .page-content .btn, .markdown-body .export-item, .page-content .export-item {


    background: white;
    border: 2px solid var(--ai-border-light);
    border-radius: var(--ai-radius-sm);
    box-shadow: 0 3px 0 0 var(--ai-shadow-button);
    color: var(--ai-text-main);
    font-weight: 700;
    padding: 4px 12px;
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);


}





.markdown-body .btn-primary, .page-content .btn-primary {


    background: var(--ai-primary);
    color: white;
    border-color: var(--ai-primary-active);
    box-shadow: 0 3px 0 0 var(--ai-primary-active);


}



/* =========================================================
   Footer / status bar
   ========================================================= */
.markdown-body footer, .page-content footer, .markdown-body #footer, .page-content #footer  {


    background: var(--ai-bg-app);
    color: var(--ai-text-secondary);
    border-top: 2px dashed var(--ai-border-soft);
    font-family: var(--ai-font);


}

.markdown-body .footer-item-info, .page-content .footer-item-info  {


    color: var(--ai-text-muted);


}





































/* =========================================================
   Misc UI
   ========================================================= */
.markdown-body .popover-title, .page-content .popover-title  {


    background: var(--ai-primary-bg);
    color: var(--ai-primary-active);
    border-radius: var(--ai-radius-sm) var(--ai-radius-sm) 0 0;
    font-weight: 800;


}

.markdown-body .popover, .page-content .popover  {


    background: var(--ai-bg-paper);
    border: 2px solid var(--ai-border-light);
    border-radius: var(--ai-radius);
    box-shadow: var(--ai-shadow-large);
    color: var(--ai-text-body);


}


.markdown-body .popover.top    > .arrow:after, .page-content .popover.top    > .arrow:after  {

 border-top-color: var(--ai-bg-paper); 

}
.markdown-body .popover.left   > .arrow:after, .page-content .popover.left   > .arrow:after  {

 border-left-color: var(--ai-bg-paper); 

}
.markdown-body .popover.right  > .arrow:after, .page-content .popover.right  > .arrow:after  {

 border-right-color: var(--ai-bg-paper); 

}

.markdown-body .tip, .page-content .tip, .markdown-body .tooltip, .page-content .tooltip  {


    background: var(--ai-text-main);
    color: white;
    border-radius: var(--ai-radius-sm);
    box-shadow: var(--ai-shadow-card);
    font-family: var(--ai-font);


}

/* Auto-suggest / dropdown */
.markdown-body .auto-suggest-container, .page-content .auto-suggest-container, .markdown-body .dropdown-menu, .page-content .dropdown-menu  {


    background: var(--ai-bg-paper);
    border: 2px solid var(--ai-border-light);
    border-radius: var(--ai-radius);
    box-shadow: var(--ai-shadow-large);


}

.markdown-body .dropdown-menu > li > a, .page-content .dropdown-menu > li > a  {


    color: var(--ai-text-body);


}

.markdown-body .dropdown-menu > li > a:hover, .page-content .dropdown-menu > li > a:hover  {


    background: var(--ai-primary-bg);
    color: var(--ai-primary-active);


}

/* Modal */
.markdown-body .modal-content, .page-content .modal-content  {


    background: var(--ai-bg-paper);
    border: 2px solid var(--ai-border-light);
    border-radius: var(--ai-radius-lg);
    box-shadow: var(--ai-shadow-large);
    color: var(--ai-text-body);


}

/* Scrollbar */
.markdown-body ::-webkit-scrollbar, .page-content ::-webkit-scrollbar  {


    width: 10px;
    height: 10px;


}

.markdown-body ::-webkit-scrollbar-track, .page-content ::-webkit-scrollbar-track  {


    background: var(--ai-bg-app);


}

.markdown-body ::-webkit-scrollbar-thumb, .page-content ::-webkit-scrollbar-thumb  {


    background: var(--ai-border-light);
    border-radius: var(--ai-radius-pill);
    border: 2px solid var(--ai-bg-app);


}

.markdown-body ::-webkit-scrollbar-thumb:hover, .page-content ::-webkit-scrollbar-thumb:hover  {


    background: var(--ai-primary);


}

/* =========================================================
   Print
   ========================================================= */
@media print  {
    .markdown-body blockquote, .page-content blockquote, .markdown-body table, .page-content table {

        box-shadow: none;
    
}


}