body {
    --animation-duration: 600ms;
    --nav-indentation-guide-width: 0px;
    --indentation-guide-width: 0px;
    --indentation-guide-color: var(--background-modifier-border);
}

body.anim-instant  { --animation-duration: 0ms; }
body.anim-faster     { --animation-duration: 50ms; }
body.anim-fast     { --animation-duration: 200ms; }
body.anim-normal   { --animation-duration: 600ms; }
body.anim-slow     { --animation-duration: 900ms; }
body.anim-slower   { --animation-duration: 1400ms; }

body:not(.disable-extra-animations) {

/* anims */
.modal, .prompt {
    animation-name: bottom-slide-in;
    animation-duration: calc(var(--animation-duration) * 0.3);
    animation-timing-function: cubic-bezier(0.17, 0.86, 0.17, 1);
    animation-fill-mode: both;
}

.prompt-results {
    animation-name: bottom-slide-in;
    animation-duration: calc(var(--animation-duration) * 1.667);
    animation-timing-function: cubic-bezier(0.17, 0.86, 0.17, 1);
    animation-fill-mode: both;
}

.prompt-results .suggestion-item.is-selected {
    animation-name: bottom-slide-in-small;
    animation-duration: calc(var(--animation-duration) * 1.667);
    animation-timing-function: cubic-bezier(0.17, 0.86, 0.17, 1);
    animation-fill-mode: both;
}



.menu {
    animation-name: bottom-slide-in;
    animation-duration: calc(var(--animation-duration) * 0.4667);
    animation-timing-function: cubic-bezier(0.17, 0.86, 0.17, 1.2);
    animation-fill-mode: both;
}

.menu-group, .menu-separator {
    animation-name: bottom-slide-in;
    animation-duration: calc(var(--animation-duration) * 0.6667);
    animation-timing-function: cubic-bezier(0.17, 0.86, 0.17, 1.1);
    animation-fill-mode: both;
}



.modal-close-button.mod-raised.clickable-icon {
    z-index: 2000;
}

.modal-content {
    animation-name: bottom-slide-in;
    animation-duration: calc(var(--animation-duration) * 2.6667);
    animation-timing-function: cubic-bezier(0.17, 0.86, 0.17, 1.2);
    animation-fill-mode: both;
}

body:not(.is-phone) {
    .vertical-tab-header, .vertical-tab-content-container {
        animation-name: bottom-slide-in;
        animation-duration: calc(var(--animation-duration) * 2.6667);
        animation-timing-function: cubic-bezier(0.17, 0.86, 0.17, 1);
        animation-fill-mode: both;
    }

    .vertical-tab-header-group-items {
        animation-name: bottom-slide-in;
        animation-duration: calc(var(--animation-duration) * 2.6667);
        animation-timing-function: cubic-bezier(0.17, 0.86, 0.17, 1);
        animation-fill-mode: both;
    }

    .vertical-tab-header-group-title {
        animation-name: bottom-slide-in;
        animation-duration: calc(var(--animation-duration) * 2.3);
        animation-timing-function: cubic-bezier(0.17, 0.86, 0.17, 1);
        animation-fill-mode: both;
    }

    .cm-sizer, .markdown-preview-sizer.markdown-preview-section {
        animation-name: bottom-slide-in;
        animation-duration: calc(var(--animation-duration) * 2.6667);
        animation-timing-function: cubic-bezier(0.17, 0.86, 0.17, 1.2);
        animation-fill-mode: both;
    }
}


.workspace-split.mod-horizontal.mod-sidedock.mod-left-split .tree-item-self,
.workspace-split.mod-horizontal.mod-sidedock.mod-left-split .nav-folder,
.workspace-split.mod-horizontal.mod-sidedock.mod-left-split .nav-buttons-container,
.workspace-split.mod-horizontal.mod-sidedock.mod-left-split .workspace-drawer-vault-switcher,
.workspace-split.mod-horizontal.mod-sidedock.mod-left-split .workspace-leaf-content {
    animation-name: left-slide-in;
    animation-duration: calc(var(--animation-duration) * 1.6667);
    animation-timing-function: cubic-bezier(0.17, 0.86, 0.17, 1);
    animation-fill-mode: both;
}

.workspace-split.mod-horizontal.mod-sidedock.mod-left-split .nav-file {
    animation-name: left-slide-in;
    animation-duration: calc(var(--animation-duration) * 2);
    animation-timing-function: cubic-bezier(0.17, 0.86, 0.17, 1);
    animation-fill-mode: both;
}




.workspace-split.mod-horizontal.mod-sidedock.mod-right-split .tree-item-self,
.workspace-split.mod-horizontal.mod-sidedock.mod-right-split .nav-folder,
.workspace-split.mod-horizontal.mod-sidedock.mod-right-split .nav-buttons-container,
.workspace-split.mod-horizontal.mod-sidedock.mod-right-split .view-content {
    animation-name: right-slide-in;
    animation-duration: calc(var(--animation-duration) * 1.6667);
    animation-timing-function: cubic-bezier(0.17, 0.86, 0.17, 1);
    animation-fill-mode: both;
}

}

@keyframes bottom-slide-in {
    0% {
        opacity: 0;

        transform: translateY(100px);
    }

    25% {
        opacity: 1;
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes bottom-slide-in-small {
    0% {
        opacity: 0;

        transform: translateY(10px);
    }

    25% {
        opacity: 1;
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes left-scale-slide-in {
    0% {
        opacity: 0;

        transform: translateX(-100px) scale(1.2);
    }

    25% {
        opacity: 1;
    }

    100% {
        transform: translateX(0) scale(1);
    }
}

@keyframes left-slide-in {
    0% {
        opacity: 0;

        transform: translateX(-100px);
    }

    25% {
        opacity: 1;
    }

    100% {
        transform: translateX(0);
    }
}

@keyframes right-scale-slide-in {
    0% {
        opacity: 0;

        transform: translateX(100px) scale(1.2);
    }

    25% {
        opacity: 1;
    }

    100% {
        transform: translateX(0) scale(1);
    }
}

@keyframes right-slide-in {
    0% {
        opacity: 0;

        transform: translateX(100px);
    }

    25% {
        opacity: 1;
    }

    100% {
        transform: translateX(0) scale(1);
    }
}







:root {
    --button-radius: 4px;
    --input-radius: 4px;
    --modal-radius: 8px;
    --nav-item-radius: 4px;
    --tag-radius: 4px;
    --corner-shape: initial;
    --tab-sidebar-radius: clamp(8px, var(--button-radius, 8px), 20px);
}






body.circular-tiptip {
    --button-radius: 16px;
    --input-radius: 50px;
    --modal-radius: 24px;
    --nav-item-radius: 50px;
    --tag-radius: 50px;
}

body.rounded-tiptip {
    --button-radius: 12px;
    --input-radius: 12px;
    --modal-radius: 16px;
    --nav-item-radius: 12px;
    --tag-radius: 12px;
}

body.round-tiptip {
    --button-radius: 6px;
    --input-radius: 6px;
    --modal-radius: 8px;
    --nav-item-radius: 6px;
    --tag-radius: 6px;
}

body.sharp-tiptip {
    --button-radius: 0px;
    --input-radius: 0px;
    --modal-radius: 0px;
    --nav-item-radius: 0px;
    --tag-radius: 0px;
}


body.squircle-tiptip {
    --corner-shape: squircle;
    --button-radius: 12px;
    --input-radius: 12px;
    --modal-radius: 18px;
    --nav-item-radius: 12px;
    --tag-radius: 12px;
}

body.scoop-tiptip {
    --corner-shape: scoop;
    --button-radius: 8px;
    --input-radius: 8px;
    --modal-radius: 12px;
    --nav-item-radius: 8px;
    --tag-radius: 8px;
}

body.hexagon-tiptip {
    --corner-shape: bevel;
    --button-radius: 6px;
    --input-radius: 6px;
    --modal-radius: 10px;
    --nav-item-radius: 6px;
    --tag-radius: 6px;
}

body.sock-tiptip {
    --corner-shape: initial;
    --button-radius: 30% / 50%;
    --input-radius: 30% / 50%;
    --modal-radius: 4%;
    --nav-item-radius: 30% / 50%;
    --tag-radius: 30% / 50%;
}

body.eye-tiptip {
    --corner-shape: initial;
    --button-radius: 40% / 60%;
    --input-radius: 40% / 60%;
    --modal-radius: 20px / 30px;
    --nav-item-radius: 40% / 60%;
    --tag-radius: 40% / 60%;
}


button,
.mod-cta,
.setting-item-control button,
.menu-item,
.vertical-tab-nav-item,
.suggestion-item,
.suggestion-hotkey,
.setting-hotkey,
.kanban-plugin__item,
.workspace-tab-header,
input,
textarea,
select,
.tag {
    border-radius: var(--button-radius);
    corner-shape: var(--corner-shape);
}

.modal,
.prompt,
.menu,
.notice,
.popover,
.kanban-plugin__lane,
.metadata-container {
    border-radius: var(--modal-radius);
    corner-shape: var(--corner-shape);
}





















.theme-dark {
    --button-shadow: #00000050;
    --blockquote-border-thickness: 4px;
    --toggle-thumb-color: var(--text-normal);
    --caret-color: var(--color-accent);
    --checkbox-color: var(--color-tang);
    --text-error: rgb(255, 138, 138);
    --background-primary: #1e1f22;
    --background-primary-alt: #26272b;
    --background-secondary: #1e1f22;
    --background-secondary-alt: #36393d;
    --titlebar-background: #1b1b1f;
    --titlebar-background-focused: var(---titlebar-background);
    --tab-container-background: var(--titlebar-background);
    --code-background: #19191d;
    --code-border-color: var(--background-secondary-alt);
    --code-border-width: 3px;
    --code-radius: var(--button-radius);
    --interactive-normal: var(--button-background);
    --interactive-hover: var(--button-background-hover);
    --background-modifier-form-field: #303439;
    --background-modifier-form-field-hover: #29292d;
    --dropdown-background: #303439;
    --dropdown-background-hover: #3c4048;
    --button-background: #303439;
    --button-background-hover: #3c4048;
    --background-modifier-border: #31353e;
    --background-modifier-border-hover: #46494e;
    --background-modifier-border-focus: #565d68;
    --accent-red: var(--color-red);
    --accent-orange: var(--color-orange);
    --accent-yellow: var(--color-yellow);
    --accent-green: var(--color-green);
    --accent-cyan: var(--color-cyan);
    --accent-blue: var(--color-blue);
    --accent-purple: var(--color-purple);
    --accent-pink: var(--color-pink);
    --accent-brown: var(--color-brown);
    --accent-gray: var(--text-normal);
    --color-red: #da4b4b;
    --color-orange: #cc692a;
    --color-yellow: #e8b05a;
    --color-green: #a3bd6a;
    --color-cyan: #42adbbff;
    --color-blue: #4281bb;
    --color-purple: #965daf;
    --color-pink: #c85b92;
    --color-brown: #9b674b;
    --color-gray: #a6a6a6;
    --text-normal: #bababa;
    --text-muted: #80807c;
    --text-faint: var(--text-muted);
    --hr-color: var(--background-modifier-border-focus);
    --text-highlight-bg: hsl(var(--interactive-accent-hsl), 0.5);
}



.theme-dark.neutral-gray {
    --toggle-thumb-color: white;
}

.theme-dark.darker-gray {
    --background-primary: #171717;
    --background-primary-alt: #202020;
    --background-secondary: #171717;
    --background-secondary-alt: #2a2a2a;
    --titlebar-background: #141414;
    --titlebar-background-focused: #111;
    --code-background: #191919;
    --text-normal: #bababa;
    --text-muted: #888;
    --text-error: #ff8a8a;
    --background-modifier-form-field: #2a2a2a;
    --background-modifier-form-field-hover: #2e2e2e;
    --dropdown-background: #363636;
    --dropdown-background-hover: #404040;
    --button-background: #363636;
    --button-background-hover: #404040;
    --background-modifier-border: #353535;
    --background-modifier-border-focus: #505050;
    --background-modifier-border-hover: #404040;
}

.theme-dark.dark-night {
    --background-primary: #0b0e16;
    --background-primary-alt: #161b2a;
    --background-secondary: #0e1220;
    --background-secondary-alt: #1f2438;
    --titlebar-background: #070a14;
    --titlebar-background-focused: #05070f;
    --code-background: #0f1424;
    --text-normal: #b4c2d2;
    --text-muted: #7d8593;
    --text-error: #ff8a8a;
    --background-modifier-form-field: #1c2135;
    --background-modifier-form-field-hover: #262d46;
    --dropdown-background: #1c2135;
    --dropdown-background-hover: #242a42;
    --button-background: #1c2135;
    --button-background-hover: #242a42;
    --background-modifier-border: #1c2135;
    --background-modifier-border-hover: #242a42;
    --background-modifier-border-focus: #2a3150;
}

.theme-dark.cold-memory {
    --background-primary: #14161b;
    --background-primary-alt: #1b202a;
    --background-secondary: #1e222f;
    --background-secondary-alt: #293042;
    --titlebar-background: #1e222f;
    --titlebar-background-focused: #1e222f;
    --code-background: #15171b;
    --text-normal: #b7c4d6;
    --text-muted: #7c8aa3;
    --text-error: #ff8a8a;
    --background-modifier-form-field: #293042;
    --background-modifier-form-field-hover: #374057;
    --dropdown-background: #293042;
    --dropdown-background-hover: #374057;
    --button-background: #293042;
    --button-background-hover: #374057;
    --background-modifier-border: #293045;
    --background-modifier-border-hover: #303950;
    --background-modifier-border-focus: #3a4661;
}

.theme-dark.amoled {
    --background-primary: #000;
    --background-primary-alt: #111;
    --background-secondary: #000;
    --background-secondary-alt: #1a1a1a;
    --titlebar-background: #000;
    --titlebar-background-focused: #000;
    --tab-container-background: #050505;
    --code-background: #0a0a0a;
    --text-normal: #e0e0e0;
    --text-muted: #808080;
    --text-error: #ff8a8a;
    --background-modifier-form-field: #0d0d0d;
    --background-modifier-form-field-hover: #111;
    --dropdown-background: #1a1a1a;
    --dropdown-background-hover: #222;
    --button-background: #1a1a1a;
    --button-background-hover: #222;
    --background-modifier-border: #0d0d0d;
    --background-modifier-border-hover: #1a1a1a;
    --background-modifier-border-focus: #2a2a2a;
}

.theme-dark.noble-blue {
    --background-primary: #0d1b2a;
    --background-primary-alt: #1b263b;
    --background-secondary: #0d1b2a;
    --background-secondary-alt: #23314d;
    --titlebar-background: #0a1522;
    --titlebar-background-focused: #08111c;
    --code-background: #0f1a29;
    --text-normal: #e2e8f0;
    --text-muted: #94a3b8;
    --text-error: #ff8a8a;
    --background-modifier-form-field: #141d2c;
    --background-modifier-form-field-hover: #1e293b;
    --dropdown-background: #253147;
    --dropdown-background-hover: #2d3b5a;
    --button-background: #253147;
    --button-background-hover: #2d3b5a;
    --background-modifier-border: #33445b;
    --background-modifier-border-hover: #425270;
    --background-modifier-border-focus: #324369;
}

.theme-dark.magic-purply {
    --background-primary: #1a1034;
    --background-primary-alt: #2c1f56;
    --background-secondary: #1a1034;
    --background-secondary-alt: #3d2a6a;
    --titlebar-background: #150d2c;
    --titlebar-background-focused: #120a25;
    --code-background: #1f153d;
    --text-normal: #e9d5ff;
    --text-muted: #8e81b6;
    --text-error: #ff8a8a;
    --background-modifier-form-field: #251a45;
    --background-modifier-form-field-hover: #2a1f4d;
    --dropdown-background: #35255e;
    --dropdown-background-hover: #3f2c70;
    --button-background: #35255e;
    --button-background-hover: #3f2c70;
    --background-modifier-border: #3d3263;
    --background-modifier-border-hover: #35255e;
    --background-modifier-border-focus: #4a3482;
}

.theme-dark.nocturne {
    --background-primary: #0f1327;
    --background-primary-alt: #2A2647;
    --background-secondary: #0f1327;
    --background-secondary-alt: #262050;
    --titlebar-background: #0a0d1f;
    --titlebar-background-focused: #0f1327;
    --code-background: #1c183e;
    --text-normal: #e5dac2;
    --text-muted: #9a7ca7;
    --text-error: #ffb0a4;
    --text-accent: #c5aedb;
    --text-accent-hover: #e5dac2;
    --background-modifier-form-field: #16133a;
    --background-modifier-form-field-hover: #201c47;
    --dropdown-background: #443c6a;
    --dropdown-background-hover: #514783;
    --button-background: #3d3964;
    --button-background-hover: #47417d;
    --background-modifier-border: #3d3964;
    --background-modifier-border-hover: #7a6097;
    --background-modifier-border-focus: #9e82bb;
    --interactive-accent: #8e6d9e;
    --interactive-accent-hover: #a885bc;
    --tag-background: #282152;
    --tag-background-hover: #3b2e6b;
}

.theme-dark.urban {
    --background-primary: #1a0f0a;
    --background-primary-alt: #2a1a12;
    --background-secondary: #1a0f0a;
    --background-secondary-alt: #332018;
    --titlebar-background: #140c08;
    --text-normal: #ffdec2;
    --text-muted: #b95c33;
    --text-error: #b95c33;
    --background-modifier-form-field: #241610;
    --background-modifier-form-field-hover: #2e1d15;
    --dropdown-background: #241610;
    --dropdown-background-hover: #2e1d15;
    --button-background: #332018;
    --button-background-hover: #b95c33;
    --background-modifier-border: #3b251b;
    --background-modifier-border-hover: #92492a;
    --background-modifier-border-focus: #b95c33;
    --toggle-thumb-color: var(--background-primary);
}

.theme-dark.midnight-emerald {
    --background-primary: #0c2d2a;
    --background-primary-alt: #17403c;
    --background-secondary: #0c2d2a;
    --background-secondary-alt: #235750;
    --titlebar-background: #092421;
    --titlebar-background-focused: #071d1a;
    --code-background: #0e3531;
    --text-normal: #d1fae5;
    --text-muted: #6ee7b7;
    --text-error: #ff8a8a;
    --background-modifier-form-field: #153934;
    --background-modifier-form-field-hover: #19433e;
    --dropdown-background: #1f4e48;
    --dropdown-background-hover: #255a53;
    --button-background: #1f4e48;
    --button-background-hover: #255a53;
    --background-modifier-border: #1c3f3a;
    --background-modifier-border-hover: #235750;
    --background-modifier-border-focus: #2d6c63;
}

.theme-dark.greenwood {
    --background-primary: #111412;
    --background-primary-alt: #171c18;
    --background-secondary: #1c231d;
    --background-secondary-alt: #242d25;
    --titlebar-background: #1c231d;
    --titlebar-background-focused: #1c231d;
    --text-normal: #c4d7b6;
    --text-muted: #8da086;
    --text-error: #d96b96;
    --background-modifier-form-field: #252b25;
    --background-modifier-form-field-hover: #2f3830;
    --dropdown-background: #252b25;
    --dropdown-background-hover: #2f3830;
    --button-background: #563b68;
    --button-background-hover: #6a4a82;
    --background-modifier-border: #55744d;
    --background-modifier-border-hover: #6c9860;
    --toggle-thumb-color: #b0d49e;
}

.theme-dark.deep-ocean {
    --background-primary: #0f172a;
    --background-primary-alt: #1e293b;
    --background-secondary: #0f172a;
    --background-secondary-alt: #334155;
    --titlebar-background: #0c1424;
    --titlebar-background-focused: #0a1120;
    --code-background: #131c30;
    --text-normal: #b7cae1;
    --text-muted: #94a3b8;
    --text-error: #ff8a8a;
    --toggle-thumb-color: #cfd9e7;
    --background-modifier-form-field: #1a2536;
    --background-modifier-form-field-hover: #1e293b;
    --dropdown-background: #253147;
    --dropdown-background-hover: #2d3b5a;
    --button-background: #253147;
    --button-background-hover: #2d3b5a;
    --background-modifier-border: #1e293b;
    --background-modifier-border-hover: #253147;
    --background-modifier-border-focus: #344664;
}

.theme-dark.crimson-twilight {
    --background-primary: #1f0a1a;
    --background-primary-alt: #3d142f;
    --background-secondary: #1f0a1a;
    --background-secondary-alt: #5a1f44;
    --titlebar-background: #1a0715;
    --titlebar-background-focused: #150511;
    --code-background: #240f1e;
    --text-normal: #fecdd3;
    --text-muted: #cc9aa0;
    --text-error: #ff8a8a;
    --background-modifier-form-field: #2d1426;
    --background-modifier-form-field-hover: #34182c;
    --dropdown-background: #422033;
    --dropdown-background-hover: #4d263c;
    --button-background: #422033;
    --button-background-hover: #4d263c;
    --background-modifier-border: #542848;
    --background-modifier-border-hover: #422033;
    --background-modifier-border-focus: #5a2c46;
}

.theme-dark.golden-hour {
    --background-primary: #2c1a0d;
    --background-primary-alt: #4a2c1a;
    --background-secondary: #2c1a0d;
    --background-secondary-alt: #6b3f22;
    --titlebar-background: #241508;
    --titlebar-background-focused: #1d1106;
    --code-background: #311e10;
    --text-normal: #fde68a;
    --text-muted: #fbbf24;
    --text-error: #ff8a8a;
    --background-modifier-form-field: #3a2414;
    --background-modifier-form-field-hover: #422a18;
    --dropdown-background: #52331d;
    --dropdown-background-hover: #5e3b22;
    --button-background: #52331d;
    --button-background-hover: #5e3b22;
    --background-modifier-border: #523520;
    --background-modifier-border-hover: #48301c;
    --background-modifier-border-focus: #6d4629;
}

.theme-dark.violet-dream {
    --background-primary: #1e0f33;
    --background-primary-alt: #341c5c;
    --background-secondary: #1e0f33;
    --background-secondary-alt: #4a2a7d;
    --titlebar-background: #180c2b;
    --titlebar-background-focused: #140a24;
    --code-background: #23133c;
    --text-normal: #f3e8ff;
    --text-muted: #d8b4fe;
    --text-error: #ff8a8a;
    --background-modifier-form-field: #2a1a4a;
    --background-modifier-form-field-hover: #301e55;
    --dropdown-background: #3b256e;
    --dropdown-background-hover: #452b81;
    --button-background: #3b256e;
    --button-background-hover: #452b81;
    --background-modifier-border: #3e2d61;
    --background-modifier-border-hover: #362059;
    --background-modifier-border-focus: #4c2f8c;
}

.theme-dark.slate-smoke {
    --background-primary: #1a202c;
    --background-primary-alt: #2d3748;
    --background-secondary: #1a202c;
    --background-secondary-alt: #4a5568;
    --titlebar-background: #171d28;
    --titlebar-background-focused: #141a24;
    --code-background: #1f2532;
    --text-normal: #edf2f7;
    --text-muted: #a0aec0;
    --text-error: #ff8a8a;
    --background-modifier-form-field: #252c3b;
    --background-modifier-form-field-hover: #293241;
    --dropdown-background: #343e52;
    --dropdown-background-hover: #3d4960;
    --button-background: #343e52;
    --button-background-hover: #3d4960;
    --background-modifier-border: #455167;
    --background-modifier-border-hover: #475872;
    --background-modifier-border-focus: #546581;
}

.theme-dark.chocolate {
    --background-primary: #2a1a0f;
    --background-primary-alt: #3d2818;
    --background-secondary: #2a1a0f;
    --background-secondary-alt: #553723;
    --titlebar-background: #23150c;
    --titlebar-background-focused: #1d1209;
    --code-background: #2f1e12;
    --text-normal: #f5e6d3;
    --text-muted: #d4a574;
    --text-error: #ff8a8a;
    --background-modifier-form-field: #311f11;
    --background-modifier-form-field-hover: #3d2818;
    --dropdown-background: #45321f;
    --dropdown-background-hover: #513a25;
    --button-background: #45321f;
    --button-background-hover: #513a25;
    --background-modifier-border: #4a3220;
    --background-modifier-border-hover: #5a3d28;
    --background-modifier-border-focus: #7a5838;
}

.theme-dark.dark-chocolate {
    --background-primary: #1b0f08;
    --background-primary-alt: #2a170d;
    --background-secondary: #1b0f08;
    --background-secondary-alt: #3a2214;
    --titlebar-background: #150b06;
    --titlebar-background-focused: #110804;
    --code-background: #21120a;
    --text-normal: #f1dcc6;
    --text-muted: #c39a6b;
    --text-error: #ff8a8a;
    --background-modifier-form-field: #1e0f08;
    --background-modifier-form-field-hover: #2a170d;
    --dropdown-background: #332013;
    --dropdown-background-hover: #3b2617;
    --button-background: #332013;
    --button-background-hover: #3b2617;
    --background-modifier-border: #3a2214;
    --background-modifier-border-hover: #4a2c1c;
    --background-modifier-border-focus: #63402a;
}

.theme-dark.rose-gold {
    --background-primary: #2a1a1f;
    --background-primary-alt: #3d252c;
    --background-secondary: #2a1a1f;
    --background-secondary-alt: #52303a;
    --titlebar-background: #23151a;
    --titlebar-background-focused: #1d1215;
    --code-background: #2f1e23;
    --text-normal: #f4e0e9;
    --text-muted: #e0b4c2;
    --text-error: #ff8a8a;
    --background-modifier-form-field: #311e24;
    --background-modifier-form-field-hover: #3d252c;
    --dropdown-background: #453036;
    --dropdown-background-hover: #503740;
    --button-background: #453036;
    --button-background-hover: #503740;
    --background-modifier-border: #3d252c;
    --background-modifier-border-hover: #453036;
    --background-modifier-border-focus: #9c647a;
}

.theme-dark.arctic-ice {
    --background-primary: #0f1a2a;
    --background-primary-alt: #1a2840;
    --background-secondary: #0f1a2a;
    --background-secondary-alt: #24365a;
    --titlebar-background: #0c1524;
    --titlebar-background-focused: #0a1120;
    --code-background: #131e32;
    --text-normal: #e0f2fe;
    --text-muted: #a5d8ff;
    --text-error: #ff8a8a;
    --background-modifier-form-field: #253654;
    --background-modifier-form-field-hover: #1f2e4a;
    --dropdown-background: #24365a;
    --dropdown-background-hover: #2a3e68;
    --button-background: #24365a;
    --button-background-hover: #2a3e68;
    --background-modifier-border: #1f2e4a;
    --background-modifier-border-hover: #24365a;
    --background-modifier-border-focus: #587598;
}

.theme-dark.comfort-choco {
    --background-primary: #261e17;
    --background-primary-alt: #372d23;
    --background-secondary: #261e17;
    --background-secondary-alt: #483c2f;
    --titlebar-background: #201912;
    --titlebar-background-focused: #1a140e;
    --code-background: #2b231a;
    --text-normal: #f0e6d6;
    --text-muted: #d4c4a8;
    --text-error: #ff8a8a;
    --background-modifier-form-field: #31271e;
    --background-modifier-form-field-hover: #372d23;
    --dropdown-background: #3d3328;
    --dropdown-background-hover: #473c30;
    --button-background: #3d3328;
    --button-background-hover: #473c30;
    --background-modifier-border: #4d4030;
    --background-modifier-border-hover: #5a4c3a;
    --background-modifier-border-focus: #7a6650;
}

.theme-dark.lavendar {
    --background-primary: #1c1a2e;
    --background-primary-alt: #2a2744;
    --background-secondary: #1c1a2e;
    --background-secondary-alt: #38355c;
    --titlebar-background: #171526;
    --titlebar-background-focused: #131120;
    --code-background: #211e36;
    --text-normal: #e6e4f2;
    --text-muted: #b8b4d9;
    --text-error: #ff8a8a;
    --background-modifier-form-field: #23203c;
    --background-modifier-form-field-hover: #2a2744;
    --dropdown-background: #302d50;
    --dropdown-background-hover: #38355c;
    --button-background: #302d50;
    --button-background-hover: #38355c;
    --background-modifier-border: #2a2744;
    --background-modifier-border-hover: #302d50;
    --background-modifier-border-focus: #5b5496;
}

.theme-dark.more-olives {
    --background-primary: #181c18;
    --background-primary-alt: #232823;
    --background-secondary: #181c18;
    --background-secondary-alt: #2f352f;
    --titlebar-background: #141714;
    --titlebar-background-focused: #101210;
    --code-background: #1c201c;
    --text-normal: #eaf3ea;
    --text-muted: #a4b9a4;
    --text-error: #ff8a8a;
    --background-modifier-form-field: #1b1f1b;
    --background-modifier-form-field-hover: #262b26;
    --dropdown-background: #2a302a;
    --dropdown-background-hover: #333a33;
    --button-background: #2a302a;
    --button-background-hover: #333a33;
    --background-modifier-border: #232823;
    --background-modifier-border-hover: #2a302a;
    --background-modifier-border-focus: #404c40;
}

.theme-dark.caramel {
    --background-primary: #261a0f;
    --background-primary-alt: #382513;
    --background-secondary: #261a0f;
    --background-secondary-alt: #4a3019;
    --titlebar-background: #1f140a;
    --titlebar-background-focused: #191008;
    --code-background: #2d1e11;
    --text-normal: #ffeccc;
    --text-muted: #e0b879;
    --text-error: #f96;
    --background-modifier-form-field: #473017;
    --background-modifier-form-field-hover: #432b15;
    --dropdown-background: #4a3019;
    --dropdown-background-hover: #55361d;
    --button-background: #4a3019;
    --button-background-hover: #55361d;
    --background-modifier-border: #503520;
    --background-modifier-border-hover: #60402a;
    --background-modifier-border-focus: #7a5535;
}

.theme-dark.mafia-red {
    --background-primary: #0a0a0a;
    --background-primary-alt: #111;
    --background-secondary: #0a0a0a;
    --background-secondary-alt: #1a1a1a;
    --titlebar-background: #050505;
    --titlebar-background-focused: #000;
    --code-background: #101010;
    --text-normal: #dbd7d1;
    --text-muted: #aaa;
    --text-error: #ff7070;
    --background-modifier-form-field: #151515;
    --background-modifier-form-field-hover: #1a1a1a;
    --dropdown-background: #1a1a1a;
    --dropdown-background-hover: #222;
    --button-background: #1a1a1a;
    --button-background-hover: #222;
    --background-modifier-border: #222;
    --background-modifier-border-hover: #2a2a2a;
    --background-modifier-border-focus: #333;
    --color-accent-hsl: 0, 100%, 50%;
    --color-accent: #c51e1e;
    --color-accent-1: #da3232;
    --color-accent-2: #ff5151;
    --interactive-accent: #b32626;
    --text-on-accent: #fff;
    --link-color: #be3a3a;
    --link-unresolved-color: #a22525;
    --link-color-hover: #8b0000;
    --toggle-thumb-color: #b32626;
}

.theme-dark.golden-earth {
    --background-primary: #18140a;
    --background-primary-alt: #221c0f;
    --background-secondary: #1e180c;
    --background-secondary-alt: #2a2212;
    --titlebar-background: #141108;
    --titlebar-background-focused: #100d06;
    --code-background: #211b0e;
    --background-modifier-form-field: #302615;
    --background-modifier-form-field-hover: #2c2313;
    --dropdown-background: #2a2212;
    --dropdown-background-hover: #342a17;
    --button-background: #3a2f18;
    --button-background-hover: #4a3b1d;
    --background-modifier-border: #4a3a1c;
    --background-modifier-border-hover: #5c4822;
    --background-modifier-border-focus: #7a5f2c;
    --text-normal: #d6a967;
    --text-muted: #cc9a3a;
    --text-error: #ff7043;
    --toggle-thumb-color: var(--background-primary);
}

.theme-dark.muted-green {
    --background-primary: #1b2a20;
    --background-primary-alt: #213328;
    --background-secondary: #24382c;
    --background-secondary-alt: #2a4234;
    --titlebar-background: #16241b;
    --titlebar-background-focused: #142018;
    --code-background: #1f3126;
    --background-modifier-form-field: #2a4033;
    --background-modifier-form-field-hover: #335244;
    --dropdown-background: #24382c;
    --dropdown-background-hover: #2f4a3b;
    --button-background: #355c46;
    --button-background-hover: #3f6f55;
    --background-modifier-border: #3e5f4b;
    --background-modifier-border-hover: #3d5f4a;
    --background-modifier-border-focus: #497356;
    --text-normal: #e6f2e9;
    --text-muted: #a7c0b1;
    --text-error: #d46a5f;
    --toggle-thumb-color: var(--background-primary);
}

.theme-dark.forest-green {
    --background-primary: #0d1710;
    --background-primary-alt: #111c14;
    --background-secondary: #142117;
    --background-secondary-alt: #18261c;
    --titlebar-background: #0b140e;
    --titlebar-background-focused: #0a120d;
    --code-background: #0f1a13;
    --background-modifier-form-field: #132016;
    --background-modifier-form-field-hover: #1a2b20;
    --dropdown-background: #142117;
    --dropdown-background-hover: #1e3527;
    --button-background: #1a2f22;
    --button-background-hover: #23482f;
    --button-background-active: #2a5a3a;
    --background-modifier-border: #2a5c38;
    --background-modifier-border-hover: #38754c;
    --background-modifier-border-focus: #4a8f62;
    --text-normal: #bddec8;
    --text-muted: #8ac99f;
    --text-faint: #5e9a7a;
    --text-accent: #a8e0b9;
    --text-error: #ff9a85;
    --toggle-thumb-color: var(--background-primary);
    --toggle-track-color: #2a5c38;
    --toggle-track-color-hover: #38754c;
}

.theme-dark.deep-purple {
    --background-primary: #120d17;
    --background-primary-alt: #18112b;
    --background-secondary: #1a1429;
    --background-secondary-alt: #231b35;
    --titlebar-background: #0f0b1a;
    --titlebar-background-focused: #0c0916;
    --code-background: #161128;
    --background-modifier-form-field: #1d1530;
    --background-modifier-form-field-hover: #2a1f40;
    --dropdown-background: #1e1633;
    --dropdown-background-hover: #2f2350;
    --button-background: #36296b;
    --button-background-hover: #4a3890;
    --button-background-active: #5f47b5;
    --background-modifier-border: #4a3a8a;
    --background-modifier-border-hover: #624daa;
    --background-modifier-border-focus: #7d63cf;
    --text-normal: #d5c6f2;
    --text-muted: #b29ae0;
    --text-faint: #8a71b5;
    --text-accent: #c7afff;
    --text-error: #ffa58e;
    --toggle-thumb-color: var(--background-primary);
    --toggle-track-color: #4a3a8a;
    --toggle-track-color-hover: #624daa;
}

.theme-dark.deep-red {
    --background-primary: #170d0d;
    --background-primary-alt: #2b1111;
    --background-secondary: #291414;
    --background-secondary-alt: #351b1b;
    --titlebar-background: #1a0f0f;
    --titlebar-background-focused: #160c0c;
    --code-background: #281212;
    --background-modifier-form-field: #301616;
    --background-modifier-form-field-hover: #402020;
    --dropdown-background: #331717;
    --dropdown-background-hover: #502727;
    --button-background: #6b2a2a;
    --button-background-hover: #903737;
    --button-background-active: #b54545;
    --background-modifier-border: #8a3a3a;
    --background-modifier-border-hover: #aa4d4d;
    --background-modifier-border-focus: #cf6363;
    --text-normal: #f2cfcf;
    --text-muted: #e0a1a1;
    --text-faint: #b56f6f;
    --text-accent: #ffb8b8;
    --text-error: #ffb0a0;
    --toggle-thumb-color: var(--background-primary);
    --toggle-track-color: #8a3a3a;
    --toggle-track-color-hover: #aa4d4d;
}

.theme-dark.deep-blue {
    --background-primary: #0d1117;
    --background-primary-alt: #11172b;
    --background-secondary: #141c29;
    --background-secondary-alt: #1b2635;
    --titlebar-background: #0b0f1a;
    --titlebar-background-focused: #090d16;
    --code-background: #0f1728;
    --background-modifier-form-field: #162030;
    --background-modifier-form-field-hover: #202e40;
    --dropdown-background: #172133;
    --dropdown-background-hover: #253950;
    --button-background: #2a3f6b;
    --button-background-hover: #355590;
    --button-background-active: #426bb5;
    --background-modifier-border: #3a558a;
    --background-modifier-border-hover: #4d6daa;
    --background-modifier-border-focus: #6389cf;
    --text-normal: #c6dcf2;
    --text-muted: #9abce0;
    --text-faint: #7192b5;
    --text-accent: #afd4ff;
    --text-error: #ffa58e;
    --toggle-thumb-color: var(--background-primary);
    --toggle-track-color: #3a558a;
    --toggle-track-color-hover: #4d6daa;
}

.theme-dark.deep-magenta {
    --background-primary: #170d14;
    --background-primary-alt: #281120;
    --background-secondary: #25131e;
    --background-secondary-alt: #311928;
    --titlebar-background: #130b11;
    --titlebar-background-focused: #10090e;
    --code-background: #22121b;
    --background-modifier-form-field: #2b1521;
    --background-modifier-form-field-hover: #381c2b;
    --dropdown-background: #2e1723;
    --dropdown-background-hover: #452133;
    --button-background: #632652;
    --button-background-hover: #82306b;
    --button-background-active: #a13d84;
    --background-modifier-border: #7a3365;
    --background-modifier-border-hover: #94417e;
    --background-modifier-border-focus: #b3549f;
    --text-normal: #f2c6e6;
    --text-muted: #e09ad0;
    --text-faint: #b571a6;
    --text-accent: #ffafe9;
    --text-error: #ffa58e;
    --toggle-thumb-color: var(--background-primary);
    --toggle-track-color: #7a3365;
    --toggle-track-color-hover: #94417e;
}

.theme-dark.deep-hotpink {
    --background-primary: #1a0d12;
    --background-primary-alt: #24111a;
    --background-secondary: #20131b;
    --background-secondary-alt: #2c1925;
    --titlebar-background: #160b10;
    --titlebar-background-focused: #12090e;
    --code-background: #23121b;
    --background-modifier-form-field: #271520;
    --background-modifier-form-field-hover: #301a27;
    --dropdown-background: #2c1925;
    --dropdown-background-hover: #3a202a;
    --button-background: #4a2636;
    --button-background-hover: #612f46;
    --background-modifier-border: #68374b;
    --background-modifier-border-hover: #804460;
    --background-modifier-border-focus: #a8597a;
    --text-normal: #ffb8dd;
    --text-muted: #ff85c0;
    --text-error: #ff7b6b;
    --toggle-thumb-color: var(--background-primary);
}

.theme-dark.wine {
    --background-primary: #1a050f;
    --background-primary-alt: #2d0b1c;
    --background-secondary: #1a050f;
    --background-secondary-alt: #3c1028;
    --titlebar-background: #16040d;
    --titlebar-background-focused: #13030b;
    --code-background: #1f0714;
    --text-normal: #f0d9e6;
    --text-muted: #d4b0c9;
    --text-error: #ff8a8a;
    --background-modifier-form-field: #3d0d25;
    --background-modifier-form-field-hover: #350e22;
    --dropdown-background: #3c1028;
    --dropdown-background-hover: #481332;
    --button-background: #3c1028;
    --button-background-hover: #481332;
    --background-modifier-border: #44162d;
    --background-modifier-border-hover: #3c1028;
    --background-modifier-border-focus: #5c1a40;
    --link-color: #cc338a;
    --link-unresolved-color: #b32d7a;
    --link-color-hover: #b32670;
}

.theme-dark.tasty-chocolate {
    --background-primary: #1a140d;
    --background-primary-alt: #2c1f14;
    --background-secondary: #1a140d;
    --background-secondary-alt: #3a2a20;
    --titlebar-background: #16110c;
    --titlebar-background-focused: #140f0a;
    --code-background: #1e1810;
    --text-normal: #e6d8c9;
    --text-muted: #b8a58e;
    --text-error: #d46b5f;
    --background-modifier-form-field: #241a12;
    --background-modifier-form-field-hover: #352618;
    --dropdown-background: #3a2a20;
    --dropdown-background-hover: #453323;
    --button-background: #3a2a20;
    --button-background-hover: #453323;
    --background-modifier-border: #423020;
    --background-modifier-border-hover: #503c2a;
    --background-modifier-border-focus: #6a5040;
}

.theme-dark.tasty-chocolate-2 {
    --background-primary: #1f1810;
    --background-primary-alt: #312619;
    --background-secondary: #1f1810;
    --background-secondary-alt: #433421;
    --titlebar-background: #1b150e;
    --titlebar-background-focused: #18120c;
    --code-background: #241d14;
    --text-normal: #f0e6d6;
    --text-muted: #d4c4a8;
    --text-error: #d46b5f;
    --background-modifier-form-field: #453522;
    --background-modifier-form-field-hover: #392c1f;
    --dropdown-background: #433421;
    --dropdown-background-hover: #4e3c26;
    --button-background: #433421;
    --button-background-hover: #4e3c26;
    --background-modifier-border: #4a3828;
    --background-modifier-border-hover: #584432;
    --background-modifier-border-focus: #705840;
}

.theme-dark.velvet {
    --background-primary: #1a0f0f;
    --background-primary-alt: #2c1818;
    --background-secondary: #1a0f0f;
    --background-secondary-alt: #3a2222;
    --titlebar-background: #160d0d;
    --titlebar-background-focused: #130b0b;
    --code-background: #1e1313;
    --text-normal: #f2cfcf;
    --text-muted: #d4a8a8;
    --text-error: #d46b5f;
    --background-modifier-form-field: #3e2424;
    --background-modifier-form-field-hover: #351d1d;
    --dropdown-background: #3a2222;
    --dropdown-background-hover: #462828;
    --button-background: #3a2222;
    --button-background-hover: #462828;
    --background-modifier-border: #3d2828;
    --background-modifier-border-hover: #4c3232;
    --background-modifier-border-focus: #644;
}

.theme-dark.leather {
    --background-primary: #201a14;
    --background-primary-alt: #332a20;
    --background-secondary: #201a14;
    --background-secondary-alt: #443829;
    --titlebar-background: #1c1712;
    --titlebar-background-focused: #191410;
    --code-background: #251e18;
    --text-normal: #f2e8dc;
    --text-muted: #d4c8b8;
    --text-error: #d46b5f;
    --background-modifier-form-field: #3e3326;
    --background-modifier-form-field-hover: #3b3025;
    --dropdown-background: #443829;
    --dropdown-background-hover: #504330;
    --button-background: #443829;
    --button-background-hover: #504330;
    --background-modifier-border: #4a3c2c;
    --background-modifier-border-hover: #5a4a38;
    --background-modifier-border-focus: #706050;
}

.theme-dark.green-road {
    --background-primary: #161a20;
    --background-primary-alt: #222831;
    --background-secondary: #15181d;
    --background-secondary-alt: #353d42;
    --titlebar-background: #12151a;
    --titlebar-background-focused: #101318;
    --code-background: #1b1f26;
    --text-normal: #e6e9e3;
    --text-muted: #b8beb6;
    --background-modifier-form-field: #333743;
    --background-modifier-form-field-hover: #2f3833;
    --dropdown-background: #2b3236;
    --dropdown-background-hover: #353d42;
    --button-background: #474f27;
    --button-background-hover: #464f1d;
    --background-modifier-border: #404d58;
    --background-modifier-border-hover: #3a4248;
    --background-modifier-border-focus: #5e6b52;
    --color-accent-hsl: 75, 28%, 38%;
    --color-accent: #7f8d42;
    --color-accent-1: #6f7a42;
    --color-accent-2: #8f9f4f;
    --interactive-accent: #60a590;
    --text-on-accent: #fff;
    --link-color: #6f8a5a;
    --link-unresolved-color: #5f7a5f;
    --link-color-hover: #7f8d42;
    --toggle-thumb-color: #6f7a42;
}

.theme-dark.red-forest {
    --background-primary: #2f2f2f;
    --background-primary-alt: #262626;
    --background-secondary: #262626;
    --background-secondary-alt: #333;
    --titlebar-background: #242424;
    --titlebar-background-focused: #1f1f1f;
    --code-background: #1f1f1f;
    --text-normal: #e6e9e3;
    --text-muted: #b8beb6;
    --text-error: #b54a45;
    --background-modifier-form-field: #383838;
    --background-modifier-form-field-hover: #444;
    --dropdown-background: #353535;
    --dropdown-background-hover: #404040;
    --button-background: #944b4b;
    --button-background-hover: #b34949;
    --background-modifier-border: #4a2a2a;
    --background-modifier-border-hover: #5a3333;
    --background-modifier-border-focus: #7a3f3f;
    --color-accent-hsl: 0, 45%, 40%;
    --color-accent: #b34949;
    --color-accent-1: #a04646;
    --color-accent-2: #b85656;
    --interactive-accent: #944b4b;
    --interactive-accent-hover: #944b4b;
    --interactive-normal: #6f7a42;
    --interactive-hover: #7f8d42;
    --text-on-accent: #fff;
    --link-color: #6f8a5a;
    --link-unresolved-color: #7a3f3f;
    --link-color-hover: #7f8d42;
    --toggle-thumb-color: #6f7a42;
}


.theme-dark.dark-lime {
    --background-primary: #12140c;
    --background-primary-alt: #1a1d12;
    --background-secondary: #12140c;
    --background-secondary-alt: #222618;
    --titlebar-background: #0d0f09;
    --titlebar-background-focused: #12140c;
    --code-background: #1a1d12;
    --text-normal: #e8e5d8;
    --text-muted: #9faa30;
    --text-error: #e06c6c;
    --text-accent: #9faa30;
    --text-accent-hover: #b8c54a;
    --background-modifier-form-field: #1a1d12;
    --background-modifier-form-field-hover: #222618;
    --dropdown-background: #1a1d12;
    --dropdown-background-hover: #222618;
    --button-background: #2a2e1c;
    --button-background-hover: #9faa30;
    --background-modifier-border: #2a2e1c;
    --background-modifier-border-hover: #7a8225;
    --background-modifier-border-focus: #9faa30;
    --interactive-accent: #9faa30;
    --interactive-accent-hover: #b8c54a;
    --tag-background: #222618;
    --tag-background-hover: #9faa30;
    --toggle-thumb-color: var(--background-primary);
}


.theme-dark.citrine {
    --background-primary: #140f08;
    --background-primary-alt: #1f180e;
    --background-secondary: #140f08;
    --background-secondary-alt: #2a1f12;
    --titlebar-background: #0e0a05;
    --titlebar-background-focused: #140f08;
    --code-background: #1f180e;
    --text-normal: #f2ede4;
    --text-muted: #e89d2d;
    --text-error: #e06c6c;
    --text-accent: #e89d2d;
    --text-accent-hover: #f0b85a;
    --background-modifier-form-field: #1f180e;
    --background-modifier-form-field-hover: #2a1f12;
    --dropdown-background: #1f180e;
    --dropdown-background-hover: #2a1f12;
    --button-background: #332617;
    --button-background-hover: #e89d2d;
    --background-modifier-border: #332617;
    --background-modifier-border-hover: #8a6321;
    --background-modifier-border-focus: #b2812b;
    --interactive-accent: #e89d2d;
    --interactive-accent-hover: #f0b85a;
    --tag-background: #2a1f12;
    --tag-background-hover: #e89d2d;
    --toggle-thumb-color: var(--background-primary);
}





.theme-dark.viridian-regalia {
    --background-primary: #1a241c;
    --background-primary-alt: #273325;
    --background-secondary: #1a241c;
    --background-secondary-alt: #3b4a2e;
    --titlebar-background: #0f1510;
    --titlebar-background-focused: #1a241c;
    --code-background: #273325;
    --text-normal: #b8b2a6;
    --text-muted: #ab7832;
    --text-error: #d9753e;
    --text-accent: #ad9960;
    --text-accent-hover: #c9b87a;
    --background-modifier-form-field: #1e2a1d;
    --background-modifier-form-field-hover: #2a3a24;
    --dropdown-background: #1e2a1d;
    --dropdown-background-hover: #2a3a24;
    --button-background: #6d360d;
    --button-background-hover: #855a3c;
    --background-modifier-border: #3b2f22;
    --background-modifier-border-hover: #ad9960;
    --background-modifier-border-focus: #ab7832;
    --interactive-accent: #ab7832;
    --interactive-accent-hover: #c49b4a;
    --tag-background: #3b2a1a;
    --tag-background-hover: #6d360d;
}



.theme-dark ::selection,
.theme-light ::selection {
    background-color: hsl(var(--interactive-accent-hsl), 0.3) !important;
}

.cm-s-obsidian span.cm-highlight, mark,
body .cm-s-obsidian span.cm-highlight,
body mark {
    border-radius: 6px;
    padding: 2px 4px;
    background-color: hsl(var(--interactive-accent-hsl), 0.4) !important;
    border: none;
    border-bottom: none;
}

.underlined-highlight .cm-s-obsidian span.cm-highlight,
.underlined-highlight mark {
    background-color: hsl(var(--interactive-accent-hsl), 0.3) !important;
    border-bottom: 2px solid hsl(var(--interactive-accent-hsl), 0.6) !important;
    padding: 2px 4px;
    border-radius: 0;
}

.bordered-highlight .cm-s-obsidian span.cm-highlight,
.bordered-highlight mark {
    background-color: hsl(var(--interactive-accent-hsl), 0.4) !important;
    border: 2px solid hsl(var(--interactive-accent-hsl), 0.6) !important;
    padding: 0 4px;
    padding-top: 2px;
    border-radius: 7px;
}

.only-underline .cm-s-obsidian span.cm-highlight,
.only-underline mark {
    background-color: transparent !important;
    border-bottom: 2px solid hsl(var(--interactive-accent-hsl), 0.6) !important;
    padding: 2px 4px;
    border-radius: 0;
}

.only-border .cm-s-obsidian span.cm-highlight,
.only-border mark {
    background-color: transparent !important;
    border: 2px solid hsl(var(--interactive-accent-hsl), 0.6) !important;
    padding: 0 4px;
    padding-top: 2px;
    border-radius: 7px;
}


.theme-light {
    --tag-radius: var(--button-radius) !important;
    --ribbon-background: var(--titlebar-background-focused);
    --button-shadow: #00000025;
    --blockquote-border-thickness: 4px;
    --toggle-thumb-color: var(--text-normal);
    --caret-color: var(--color-accent);
    --checkbox-color: var(--color-blue);
    --text-error: rgb(220, 80, 80);
    --background-primary: #f8f9fa;
    --background-primary-alt: #e9ecef;
    --background-secondary: #f1f3f5;
    --background-secondary-alt: #e9ecef;
    --titlebar-background: #f1f3f5;
    --titlebar-background-focused: var(--titlebar-background);
    --tab-container-background: var(--titlebar-background);
    --code-background: var(--background-secondary);
    --code-border-color: var(--background-secondary-alt);
    --code-border-width: 2px;
    --code-radius: var(--button-radius);
    --interactive-normal: var(--button-background);
    --interactive-hover: var(--button-background-hover);
    --background-modifier-form-field: #dee2e6;
    --background-modifier-form-field-hover: #ced4da;
    --dropdown-background: #dee2e6;
    --dropdown-background-hover: #ced4da;
    --button-background: #ced4da;
    --button-background-hover: #bdc3cb;
    --background-modifier-border: #dee2e6;
    --background-modifier-border-hover: #ced4da;
    --background-modifier-border-focus: var(--background-modifier-border-hover);
    --accent-red: var(--color-red);
    --accent-orange: var(--color-orange);
    --accent-yellow: var(--color-yellow);
    --accent-green: var(--color-green);
    --accent-cyan: var(--color-cyan);
    --accent-blue: var(--color-blue);
    --accent-purple: var(--color-purple);
    --accent-pink: var(--color-pink);
    --accent-brown: var(--color-brown);
    --accent-gray: var(--text-muted);
    --color-red: #e03131;
    --color-orange: #e8590c;
    --color-yellow: #f08c00;
    --color-green: #2f9e44;
    --color-cyan: #0c8599;
    --color-blue: #1971c2;
    --color-purple: #5f3dc4;
    --color-pink: #c2255c;
    --color-brown: #7b4b11;
    --color-gray: #868e96;
    --text-normal: #212529;
    --text-muted: #495057;
    --text-faint: #6c757d;
    --hr-color: var(--background-modifier-border);
    --text-highlight-bg: rgb(255, 224, 130, 0.5);
    --button-radius: 20px;
}



.theme-light.paper-white {
    --background-primary: #fff;
    --background-primary-alt: #f8f9fa;
    --background-secondary: #f8f9fa;
    --background-secondary-alt: #e9ecef;
    --titlebar-background: #f8f9fa;
    --text-normal: #212529;
    --text-muted: #495057;
    --text-error: #e03131;
    --background-modifier-form-field: #e9ecef;
    --background-modifier-form-field-hover: #dee2e6;
    --dropdown-background: #e9ecef;
    --dropdown-background-hover: #dee2e6;
    --button-background: #dee2e6;
    --button-background-hover: #ced4da;
    --background-modifier-border: #dee2e6;
    --background-modifier-border-hover: #ced4da;
    --toggle-thumb-color: var(--background-primary);
}

.theme-light.light-gray {
    --background-primary: #f0f2f5;
    --background-primary-alt: #e6e8eb;
    --background-secondary: #e6e8eb;
    --background-secondary-alt: #d8dbdf;
    --titlebar-background: #e6e8eb;
    --text-normal: #2d3748;
    --text-muted: #4a5568;
    --text-error: #c53030;
    --background-modifier-form-field: #d8dbdf;
    --background-modifier-form-field-hover: #cbd0d6;
    --dropdown-background: #d8dbdf;
    --dropdown-background-hover: #cbd0d6;
    --button-background: #cbd0d6;
    --button-background-hover: #bcc2c9;
    --background-modifier-border: #e2e8f0;
    --background-modifier-border-hover: #cbd5e0;
    --toggle-thumb-color: var(--background-primary);
}

.theme-light.soft-sand {
    --background-primary: #e8dfcc;
    --background-primary-alt: #dcccb3;
    --background-secondary: #dcccb3;
    --background-secondary-alt: #cdb996;
    --titlebar-background: #dcccb3;
    --code-background: #f5efe6;
    --text-normal: #4a3e2e;
    --text-muted: #7a6b55;
    --text-error: #b03a3a;
    --background-modifier-form-field: #cdb996;
    --background-modifier-form-field-hover: #bca37c;
    --dropdown-background: #cdb996;
    --dropdown-background-hover: #bca37c;
    --button-background: #bca37c;
    --button-background-hover: #a88f68;
    --background-modifier-border: #d1bd9a;
    --background-modifier-border-hover: #bca37c;
    --toggle-thumb-color: var(--background-primary);
}

.theme-light.green {
    --background-primary: #e2f0e4;
    --background-primary-alt: #cbe3d0;
    --background-secondary: #cbe3d0;
    --background-secondary-alt: #aad0b3;
    --titlebar-background: #cbe3d0;
    --text-normal: #1f4d2e;
    --text-muted: #2c6e41;
    --text-error: #bc3a2a;
    --background-modifier-form-field: #aad0b3;
    --background-modifier-form-field-hover: #8bc89a;
    --dropdown-background: #aad0b3;
    --dropdown-background-hover: #8bc89a;
    --button-background: #8bc89a;
    --button-background-hover: #6eb87e;
    --background-modifier-border: #8bc89a;
    --background-modifier-border-hover: #5eb473;
    --toggle-thumb-color: var(--background-primary);
}

.theme-light.purple {
    --background-primary: #ece3f5;
    --background-primary-alt: #ddd0ec;
    --background-secondary: #ddd0ec;
    --background-secondary-alt: #c9b6e0;
    --titlebar-background: #ddd0ec;
    --text-normal: #3e2860;
    --text-muted: #5d3e8c;
    --text-error: #a6325a;
    --background-modifier-form-field: #c9b6e0;
    --background-modifier-form-field-hover: #b89bd4;
    --dropdown-background: #c9b6e0;
    --dropdown-background-hover: #b89bd4;
    --button-background: #b89bd4;
    --button-background-hover: #a27cc2;
    --background-modifier-border: #b89bd4;
    --background-modifier-border-hover: #9c78c2;
    --toggle-thumb-color: var(--background-primary);
}

.theme-light.blue {
    --background-primary: #e0edf7;
    --background-primary-alt: #ccdfef;
    --background-secondary: #ccdfef;
    --background-secondary-alt: #aacbe2;
    --titlebar-background: #ccdfef;
    --text-normal: #1d4462;
    --text-muted: #2b628b;
    --text-error: #a83048;
    --background-modifier-form-field: #aacbe2;
    --background-modifier-form-field-hover: #8bb7d6;
    --dropdown-background: #aacbe2;
    --dropdown-background-hover: #8bb7d6;
    --button-background: #8bb7d6;
    --button-background-hover: #6ea0c4;
    --background-modifier-border: #8bb7d6;
    --background-modifier-border-hover: #5e9bc4;
    --toggle-thumb-color: var(--background-primary);
}

.theme-light.peach {
    --background-primary: #f2e6db;
    --background-primary-alt: #e8d5c4;
    --background-secondary: #e8d5c4;
    --background-secondary-alt: #dbbc9f;
    --titlebar-background: #e8d5c4;
    --text-normal: #5e2c14;
    --text-muted: #8a4624;
    --text-error: #a83228;
    --background-modifier-form-field: #dbbc9f;
    --background-modifier-form-field-hover: #cea67f;
    --dropdown-background: #dbbc9f;
    --dropdown-background-hover: #cea67f;
    --button-background: #cea67f;
    --button-background-hover: #b88858;
    --background-modifier-border: #cea67f;
    --background-modifier-border-hover: #b88858;
    --toggle-thumb-color: var(--background-primary);
}

.theme-light.pink {
    --background-primary: #f5e4e8;
    --background-primary-alt: #eed2da;
    --background-secondary: #eed2da;
    --background-secondary-alt: #e2b8c4;
    --titlebar-background: #eed2da;
    --text-normal: #6e1f38;
    --text-muted: #993c58;
    --text-error: #a83038;
    --background-modifier-form-field: #e2b8c4;
    --background-modifier-form-field-hover: #d69cac;
    --dropdown-background: #e2b8c4;
    --dropdown-background-hover: #d69cac;
    --button-background: #d69cac;
    --button-background-hover: #c2748a;
    --background-modifier-border: #d69cac;
    --background-modifier-border-hover: #c2748a;
    --toggle-thumb-color: var(--background-primary);
}

.theme-light.cyan {
    --background-primary: #ddf0ee;
    --background-primary-alt: #c8e5e0;
    --background-secondary: #c8e5e0;
    --background-secondary-alt: #aad4cc;
    --titlebar-background: #c8e5e0;
    --text-normal: #1d4945;
    --text-muted: #2c6e66;
    --text-error: #bc3a32;
    --background-modifier-form-field: #aad4cc;
    --background-modifier-form-field-hover: #8bc4b9;
    --dropdown-background: #aad4cc;
    --dropdown-background-hover: #8bc4b9;
    --button-background: #8bc4b9;
    --button-background-hover: #6eab9f;
    --background-modifier-border: #8bc4b9;
    --background-modifier-border-hover: #5eab9f;
    --toggle-thumb-color: var(--background-primary);
}

.theme-light.yellow {
    --background-primary: #faf2cf;
    --background-primary-alt: #f5e9b5;
    --background-secondary: #f5e9b5;
    --background-secondary-alt: #ecdc93;
    --titlebar-background: #f5e9b5;
    --text-normal: #6b4a14;
    --text-muted: #9b6e24;
    --text-error: #bc3a28;
    --background-modifier-form-field: #ecdc93;
    --background-modifier-form-field-hover: #e2cf78;
    --dropdown-background: #ecdc93;
    --dropdown-background-hover: #e2cf78;
    --button-background: #e2cf78;
    --button-background-hover: #ceb55a;
    --background-modifier-border: #e2cf78;
    --background-modifier-border-hover: #ceb55a;
    --toggle-thumb-color: var(--background-primary);
}

.theme-light.azure {
    --background-primary: #e3ecf5;
    --background-primary-alt: #d1dfef;
    --background-secondary: #d1dfef;
    --background-secondary-alt: #b8cce6;
    --titlebar-background: #d1dfef;
    --text-normal: #1e3a6b;
    --text-muted: #2b5396;
    --text-error: #bc3038;
    --background-modifier-form-field: #b8cce6;
    --background-modifier-form-field-hover: #9eb6db;
    --dropdown-background: #b8cce6;
    --dropdown-background-hover: #9eb6db;
    --button-background: #9eb6db;
    --button-background-hover: #7896cc;
    --background-modifier-border: #9eb6db;
    --background-modifier-border-hover: #7896cc;
    --toggle-thumb-color: var(--background-primary);
}

.theme-light.brinjal {
    --background-primary: #e8dcec;
    --background-primary-alt: #d8c7e0;
    --background-secondary: #d8c7e0;
    --background-secondary-alt: #c2abce;
    --titlebar-background: #d1b7dc;
    --text-normal: #2e1c35;
    --text-muted: #4a2e55;
    --text-error: #942a42;
    --background-modifier-form-field: #c2abce;
    --background-modifier-form-field-hover: #a27cb5;
    --dropdown-background: #c2abce;
    --dropdown-background-hover: #a27cb5;
    --button-background: #a27cb5;
    --button-background-hover: #8c68a2;
    --background-modifier-border: #8c68a2;
    --background-modifier-border-hover: #73558a;
    --toggle-thumb-color: var(--background-primary);
}

.theme-light.joy {
    --background-primary: #f5e8dd;
    --background-primary-alt: #ecdbc9;
    --background-secondary: #ecdbc9;
    --background-secondary-alt: #e0c4a8;
    --titlebar-background: #e8cdb5;
    --text-normal: #4a2a16;
    --text-muted: #6a4024;
    --text-error: #a83028;
    --background-modifier-form-field: #e0c4a8;
    --background-modifier-form-field-hover: #ce8a58;
    --dropdown-background: #e0c4a8;
    --dropdown-background-hover: #ce8a58;
    --button-background: #ce8a58;
    --button-background-hover: #bb7444;
    --background-modifier-border: #ce8a58;
    --background-modifier-border-hover: #bb7444;
    --toggle-thumb-color: var(--background-primary);
}

.theme-light.choco {
    --background-primary: #ece2d6;
    --background-primary-alt: #dfcfbf;
    --background-secondary: #dfcfbf;
    --background-secondary-alt: #ccb59b;
    --titlebar-background: #ddc5aa;
    --text-normal: #312218;
    --text-muted: #523a28;
    --text-error: #942e22;
    --background-modifier-form-field: #ccb59b;
    --background-modifier-form-field-hover: #b89170;
    --dropdown-background: #ccb59b;
    --dropdown-background-hover: #b89170;
    --button-background: #b89170;
    --button-background-hover: #a37d5c;
    --background-modifier-border: #8c684a;
    --background-modifier-border-hover: #735536;
    --toggle-thumb-color: var(--background-primary);
}

.theme-light.cloud-white {
    --background-primary: #f8fafc;
    --background-primary-alt: #f1f5f9;
    --background-secondary: #f1f5f9;
    --background-secondary-alt: #e2e8f0;
    --titlebar-background: #f1f5f9;
    --text-normal: #1e293b;
    --text-muted: #475569;
    --text-error: #dc2626;
    --background-modifier-form-field: #e2e8f0;
    --background-modifier-form-field-hover: #cbd5e1;
    --dropdown-background: #e2e8f0;
    --dropdown-background-hover: #cbd5e1;
    --button-background: #cbd5e1;
    --button-background-hover: #b9c4d3;
    --background-modifier-border: #cbd5e1;
    --background-modifier-border-hover: #94a3b8;
    --toggle-thumb-color: var(--background-primary);
}

.theme-light.herb {
    --background-primary: #f1f8e9;
    --background-primary-alt: #e1f2da;
    --background-secondary: #e8f5e9;
    --background-secondary-alt: #c8e6c9;
    --titlebar-background: #e8f5e9;
    --text-normal: #2e7d32;
    --text-muted: #4caf50;
    --text-error: #c62828;
    --background-modifier-form-field: #c8e6c9;
    --background-modifier-form-field-hover: #a5d6a7;
    --dropdown-background: #c8e6c9;
    --dropdown-background-hover: #a5d6a7;
    --button-background: #a5d6a7;
    --button-background-hover: #81c784;
    --background-modifier-border: #a5d6a7;
    --background-modifier-border-hover: #81c784;
    --toggle-thumb-color: var(--background-primary);
}

.theme-light.toothpaste {
    --background-primary: #d0f7ff;
    --background-primary-alt: #a8f0ff;
    --background-secondary: #a8f0ff;
    --background-secondary-alt: #70e0ff;
    --titlebar-background: #a8f0ff;
    --text-normal: #004f63;
    --text-muted: #007a8f;
    --text-error: #c62828;
    --background-modifier-form-field: #70e0ff;
    --background-modifier-form-field-hover: #3fd4ff;
    --dropdown-background: #70e0ff;
    --dropdown-background-hover: #3fd4ff;
    --button-background: #3fd4ff;
    --button-background-hover: #1fc6f0;
    --background-modifier-border: #33c7e0;
    --background-modifier-border-hover: #00b4d9;
    --toggle-thumb-color: var(--background-primary);
}

.theme-light.rose {
    --background-primary: #f6d6df;
    --background-primary-alt: #efb9c8;
    --background-secondary: #efb9c8;
    --background-secondary-alt: #e79aad;
    --titlebar-background: #efb9c8;
    --text-normal: #6b1238;
    --text-muted: #8c2a52;
    --text-error: #a61d2d;
    --background-modifier-form-field: #e79aad;
    --background-modifier-form-field-hover: #dc7f99;
    --dropdown-background: #e79aad;
    --dropdown-background-hover: #dc7f99;
    --button-background: #dc7f99;
    --button-background-hover: #c95678;
    --background-modifier-border: #d86c8a;
    --background-modifier-border-hover: #c95678;
    --toggle-thumb-color: var(--background-primary);
}

.theme-light.yellow-teeth {
    --background-primary: #f5f2d8;
    --background-primary-alt: #ece6b8;
    --background-secondary: #ece6b8;
    --background-secondary-alt: #e0d68f;
    --titlebar-background: #ece6b8;
    --code-background: #fffef8;
    --text-normal: #6f6400;
    --text-muted: #8a7f1a;
    --text-error: #9e2a2b;
    --background-modifier-form-field: #e0d68f;
    --background-modifier-form-field-hover: #d4c96a;
    --dropdown-background: #e0d68f;
    --dropdown-background-hover: #d4c96a;
    --button-background: #d4c96a;
    --button-background-hover: #c2b83f;
    --background-modifier-border: #c2b83f;
    --background-modifier-border-hover: #b0a62c;
    --toggle-thumb-color: var(--background-primary);
}

.theme-light.blood {
    --background-primary: #f2d6d9;
    --background-primary-alt: #e6b3b8;
    --background-secondary: #e6b3b8;
    --background-secondary-alt: #d48a92;
    --titlebar-background: #e6b3b8;
    --text-normal: #6f0f14;
    --text-muted: #8a2a2f;
    --text-error: #4d0000;
    --background-modifier-form-field: #d48a92;
    --background-modifier-form-field-hover: #c46b74;
    --dropdown-background: #d48a92;
    --dropdown-background-hover: #c46b74;
    --button-background: #c46b74;
    --button-background-hover: #b94a52;
    --background-modifier-border: #b94a52;
    --background-modifier-border-hover: #a33239;
    --toggle-thumb-color: var(--background-secondary-alt);
    --color-accent: #c51e1e;
    --color-accent-1: #da3232;
    --color-accent-2: #ff5151;
    --interactive-accent: #b32626;
}

.theme-light.corporate {
    --background-primary: #e7ebef;
    --background-primary-alt: #d6dde5;
    --background-secondary: #d6dde5;
    --background-secondary-alt: #c1ccd8;
    --titlebar-background: #d6dde5;
    --text-normal: #1f2a37;
    --text-muted: #3a4a5e;
    --text-error: #8b1d1d;
    --background-modifier-form-field: #c1ccd8;
    --background-modifier-form-field-hover: #aebccc;
    --dropdown-background: #c1ccd8;
    --dropdown-background-hover: #aebccc;
    --button-background: #aebccc;
    --button-background-hover: #8fa3b8;
    --background-modifier-border: #8fa3b8;
    --background-modifier-border-hover: #738aa3;
}

.theme-light.payesh {
    --background-primary: #e7e7de;
    --background-primary-alt: #d8d8c9;
    --background-secondary: #d8d8c9;
    --background-secondary-alt: #c9c9b5;
    --titlebar-background: #d8d8c9;
    --text-normal: #5d5c5a;
    --text-muted: #7a7976;
    --text-error: #c62828;
    --background-modifier-form-field: #c9c9b5;
    --background-modifier-form-field-hover: #b8b8a0;
    --dropdown-background: #c9c9b5;
    --dropdown-background-hover: #b8b8a0;
    --button-background: #b8b8a0;
    --button-background-hover: #a9a98c;
    --background-modifier-border: #a9a98c;
    --background-modifier-border-hover: #989876;
    --toggle-thumb-color: var(--background-primary);
}

.theme-light.chicken {
    --background-primary: #fff8e1;
    --background-primary-alt: #ffecb3;
    --background-secondary: #ffecb3;
    --background-secondary-alt: #ffe082;
    --titlebar-background: #ffecb3;
    --text-normal: #eb8502;
    --text-muted: #ffa000;
    --text-error: #c62828;
    --background-modifier-form-field: #ffe082;
    --background-modifier-form-field-hover: #ffd54f;
    --dropdown-background: #ffe082;
    --dropdown-background-hover: #ffd54f;
    --button-background: #ffd54f;
    --button-background-hover: #ffca28;
    --background-modifier-border: #ffca28;
    --background-modifier-border-hover: #ffb300;
    --toggle-thumb-color: var(--background-primary);
}

.theme-light.disgust {
    --toggle-thumb-color: white;
    --background-primary: #f2f4e6;
    --background-primary-alt: #e1e5c0;
    --background-secondary: #e1e5c0;
    --background-secondary-alt: #c8d197;
    --titlebar-background: #e1e5c0;
    --code-background: #f9f9f2;
    --text-normal: #7a7015;
    --text-muted: #9c9a3c;
    --text-error: #9e2a2b;
    --background-modifier-form-field: #c8d197;
    --background-modifier-form-field-hover: #aeb761;
    --dropdown-background: #c8d197;
    --dropdown-background-hover: #aeb761;
    --button-background: #aeb761;
    --button-background-hover: #8e944c;
    --background-modifier-border: #aeb761;
    --background-modifier-border-hover: #8e944c;
}

.theme-light.gray {
    --toggle-thumb-color: var(--background-primary);
    --caret-color: black;
    --background-primary: #808080;
    --background-primary-alt: #7a7a7a;
    --background-secondary: #7a7a7a;
    --background-secondary-alt: #737373;
    --titlebar-background: #7a7a7a;
    --code-background: #dcdcdc;
    --text-normal: #000;
    --text-muted: #333;
    --text-error: #c62828;
    --background-modifier-form-field: #737373;
    --background-modifier-form-field-hover: #6a6a6a;
    --dropdown-background: #737373;
    --dropdown-background-hover: #6a6a6a;
    --button-background: #6a6a6a;
    --button-background-hover: #5c5c5c;
    --background-modifier-border: #666;
    --background-modifier-border-hover: #5c5c5c;
}

.theme-light.jade {
    --background-primary: #dcedc8;
    --background-primary-alt: #c5e1a5;
    --background-secondary: #c8e6c9;
    --background-secondary-alt: #a5d6a7;
    --titlebar-background: #c8e6c9;
    --code-background: #e8f5e9;
    --text-normal: #1b5e20;
    --text-muted: #2e7d32;
    --text-error: #b71c1c;
    --background-modifier-form-field: #a5d6a7;
    --background-modifier-form-field-hover: #81c784;
    --dropdown-background: #a5d6a7;
    --dropdown-background-hover: #81c784;
    --button-background: #81c784;
    --button-background-hover: #66bb6a;
    --background-modifier-border: #81c784;
    --background-modifier-border-hover: #66bb6a;
    --toggle-thumb-color: var(--background-primary);
}

.theme-light.olive {
    --olive-base: #636b2f;
    --background-primary: #e3e7d6;
    --background-primary-alt: #d3d9bf;
    --background-secondary: #d0d6ba;
    --background-secondary-alt: #bfc7a1;
    --titlebar-background: #d0d6ba;
    --code-background: #f0f3e8;
    --text-normal: #2f3316;
    --text-muted: #4a5030;
    --text-error: #8b1d1d;
    --background-modifier-form-field: #bfc7a1;
    --background-modifier-form-field-hover: #aeb88c;
    --dropdown-background: #bfc7a1;
    --dropdown-background-hover: #aeb88c;
    --button-background: #aeb88c;
    --button-background-hover: #9aa56f;
    --background-modifier-border: #aeb88c;
    --background-modifier-border-hover: #9aa56f;
    --toggle-thumb-color: var(--background-primary);
    --color-accent: #636b2f;
    --color-accent-1: #747d38;
    --color-accent-2: #8a9446;
}

.theme-light.cream-blue {
    --cream-base: #f6f1e7;
    --red-accent: #e53935;
    --cyan-accent: #00acc1;
    --background-primary: #f6f1e7;
    --background-primary-alt: #efe7d8;
    --background-secondary: #efe7d8;
    --background-secondary-alt: #e5dcc8;
    --titlebar-background: #efe7d8;
    --code-background: #fbf8f2;
    --text-normal: #3b3328;
    --text-muted: #6b6256;
    --text-error: var(--red-accent);
    --background-modifier-form-field: #e5dcc8;
    --background-modifier-form-field-hover: #d9cfb8;
    --dropdown-background: #e5dcc8;
    --dropdown-background-hover: #d9cfb8;
    --button-background: #d9cfb8;
    --button-background-hover: #cbbf9f;
    --background-modifier-border: #d9cfb8;
    --background-modifier-border-hover: #cbbf9f;
    --toggle-thumb-color: var(--background-primary);
    --color-accent: #007f8f;
    --color-accent-1: #26c6da;
    --color-accent-2: #4dd0e1;
    --interactive-accent: #26c6da;
    --interactive-accent-hsl: 187, 71%, 50%;
    --accent-red: var(--red-accent);
}

.theme-light.cream {
    --cream-base: #f6f1e7;
    --red-accent: #e53935;
    --cyan-accent: #00acc1;
    --background-primary: #f6f1e7;
    --background-primary-alt: #efe7d8;
    --background-secondary: #efe7d8;
    --background-secondary-alt: #e5dcc8;
    --titlebar-background: #efe7d8;
    --code-background: #fbf8f2;
    --text-normal: #3b3328;
    --text-muted: #6b6256;
    --text-error: var(--red-accent);
    --background-modifier-form-field: #e5dcc8;
    --background-modifier-form-field-hover: #d9cfb8;
    --dropdown-background: #e5dcc8;
    --dropdown-background-hover: #d9cfb8;
    --button-background: #d9cfb8;
    --button-background-hover: #cbbf9f;
    --background-modifier-border: #d9cfb8;
    --background-modifier-border-hover: #cbbf9f;
    --toggle-thumb-color: var(--background-primary);
    --accent-red: var(--red-accent);
}


.theme-light.delta {
    --background-primary: #f5e8dc;
    --background-primary-alt: #e3bc2e;
    --background-secondary: #e3bc2e;
    --background-secondary-alt: #376f85;
    --titlebar-background: #31241c;
    --text-normal: #2c221b;
    --text-muted: #a9422b;
    --text-error: #d65c41;
    --background-modifier-form-field: #fff;
    --background-modifier-form-field-hover: #eaded3;
    --dropdown-background: #fff;
    --dropdown-background-hover: #eaded3;
    --button-background: #e3bc2e;
    --button-background-hover: #d65c41;
    --background-modifier-border: #e3bc2e;
    --background-modifier-border-hover: #d65c41;
    --toggle-thumb-color: var(--background-primary);
}









.button-scale button,
.button-scale .clickable-icon {
    transition:
        all calc(var(--animation-duration) * 1) cubic-bezier(0.175, 0.885, 0.32, 2),
        background-color calc(var(--animation-duration) * 0.6667) ease;
    transform: scale(1);
    outline: 0 solid var(--background-modifier-border);
}

.button-scale button:hover,
.button-scale .clickable-icon:hover {
    transform: scale(1.06);
    z-index: 1000;
}

.button-scale button:active {
    transform: scale(0.9);
    transition: all calc(var(--animation-duration) * 1) cubic-bezier(0.175, 0.885, 0.32, 2);
    outline: 0 solid var(--background-modifier-border);
}


.button-shrink button,
.button-shrink .clickable-icon {
    transition:
        all calc(var(--animation-duration) * 1) cubic-bezier(0.175, 0.885, 0.32, 2),
        background-color calc(var(--animation-duration) * 0.6667) ease;
    transform: scale(1);
    outline: 0 solid var(--background-modifier-border);
}

.button-shrink button:hover,
.button-shrink .clickable-icon:hover {
    transform: scale(0.9);
    z-index: 1000;
}

.button-shrink button:active,
.button-shrink .clickable-icon:active,
.button-shrink .clickable-icon:focus-visible {
    transform: scale(0.7);
    opacity: 0.7;
    transition: all calc(var(--animation-duration) * 1) cubic-bezier(0.175, 0.885, 0.32, 2);
    outline: 0 solid var(--background-modifier-border);
}


.button-tilt button,
.button-tilt .clickable-icon {
    transition: 
        transform 0.25s cubic-bezier(0.34, 1.2, 0.64, 1),
        background-color 0.15s ease,
        opacity 0.1s ease;
    
    transform: rotate(0deg);
    will-change: transform;
}

.button-tilt button:hover, 
.button-tilt .clickable-icon:hover {
    transform: rotate(3deg);
    z-index: 1;
}

.button-tilt button:active, 
.button-tilt .clickable-icon:active,
.button-tilt .clickable-icon:focus-visible {
    transform: rotate(-4deg) scale(0.9);
    opacity: 0.85;
    transition: transform 0.08s cubic-bezier(0.2, 0.9, 0.4, 1.1);
}

.button-tilt button:focus-visible,
.button-tilt .clickable-icon:focus-visible {
    outline: 2px solid var(--background-modifier-border);
    outline-offset: 2px;
}


.button-bounce button,
.button-bounce .clickable-icon {
    transform: scale(1);
    transition: transform 0.08s cubic-bezier(0.2, 0.9, 0.4, 1.1);
}

.button-bounce button:hover,
.button-bounce .clickable-icon:hover {
    animation: bounceIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes bounceIn {
    0%   { transform: scale(1); }
    30%  { transform: scale(1.12); }
    50%  { transform: scale(0.95); }
    70%  { transform: scale(1.05); }
    100% { transform: scale(1); }
}

.button-bounce button:active,
.button-bounce .clickable-icon:active,
.button-bounce .clickable-icon:focus-visible {
    animation: clickBounce 0.35s ease;
}

@keyframes clickBounce {
    0%   { transform: scale(1, 1); }
    30%  { transform: scale(1.1, 0.85); }
    60%  { transform: scale(0.95, 1.05); }
    100% { transform: scale(1); }
}

@keyframes softBounce {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.02); }
}





.button-scale .sidebar-toggle-button.mod-right .clickable-icon:hover {
    transform: scale(-1.06, 1.06);
    z-index: 1000;
}

.button-scale .sidebar-toggle-button.mod-right .clickable-icon:active {
    transform: scale(-0.9 ,0.9);
    opacity: 0.7;
    transition: all calc(var(--animation-duration) * 1) cubic-bezier(0.175, 0.885, 0.32, 2);
    outline: 0 solid var(--background-modifier-border);
}


.button-shrink .sidebar-toggle-button.mod-right .clickable-icon:hover {
    transform: scale(-0.9, 0.9);
    z-index: 1000;
}

.button-shrink .sidebar-toggle-button.mod-right .clickable-icon:active {
    transform: scale(-0.7, 0.7);
    opacity: 0.7;
    transition: all calc(var(--animation-duration) * 1) cubic-bezier(0.175, 0.885, 0.32, 2);
    outline: 0 solid var(--background-modifier-border);
}


.button-tilt .sidebar-toggle-button.mod-right .clickable-icon:hover {
    transform: scale(-1, 1)rotate(-3deg);
    z-index: 1000;
}

.button-tilt .sidebar-toggle-button.mod-right .clickable-icon:active {
    transform: scale(-0.9, 0.9) rotate(4deg);
    opacity: 0.7;
    transition: all calc(var(--animation-duration) * 1) cubic-bezier(0.175, 0.885, 0.32, 2);
    outline: 0 solid var(--background-modifier-border);
}


.button-tilt .sidebar-toggle-button.mod-left .clickable-icon:hover {
    transform: scale(1) rotate(-3deg);
    z-index: 1000;
}

.button-tilt .sidebar-toggle-button.mod-left .clickable-icon:active {
    transform: scale(0.9) rotate(4deg);
    opacity: 0.7;
    transition: all calc(var(--animation-duration) * 1) cubic-bezier(0.175, 0.885, 0.32, 2);
    outline: 0 solid var(--background-modifier-border);
}





button, button:hover, button:active {
    transition: background-color 0.2s ease,
                transform calc(var(--animation-duration) * 1) cubic-bezier(0.175, 0.885, 0.32, 1.5);
}



body:not(.view-header) .button-bordered button,
.button-bordered .setting-item-control button,
.button-bordered select {
    border: 2px solid var(--background-modifier-border-focus);
}

.button-bordered button.mod-cta {
    border: 2px solid var(--color-accent-1);
}

.button-bordered .clickable-icon:active {
    transform: scale(0.8);
    border: 2px solid currentcolor;
    color: var(--color-accent-1);
    background-color: hsl(var(--interactive-accent-hsl), 0.2);
}


body:not(.view-header) .button-3d button,
.button-3d .mod-cta,
.button-3d select,
.button-3d .setting-item-control button {
    border-bottom: 3px solid var(--button-shadow);
    transition: border-bottom 0.1s ease, transform 0.1s ease;
}

body:not(.view-header) .button-3d button:hover,
.button-3d .mod-cta:hover,
.button-3d select:hover,
.button-3d .setting-item-control button:hover {
    border-bottom: 5px solid var(--button-shadow);
    transform: translateY(-2px);
}

body:not(.view-header) .button-3d button:active,
.button-3d .mod-cta:active,
.button-3d select:active,
.button-3d .setting-item-control button:active {
    border-bottom: 0 solid var(--button-shadow);
    transform: translateY(2px);
}


body:not(.view-header) .button-bordered-3d button,
.button-bordered-3d .mod-cta,
.button-bordered-3d select,
.button-bordered-3d .setting-item-control button {
    border: 2px solid var(--background-modifier-border-focus);
    border-bottom: 3px solid var(--button-shadow);
    transition: border-bottom 0.1s ease, transform 0.1s ease;
}

body:not(.view-header) .button-bordered-3d button:hover,
.button-bordered-3d .mod-cta:hover,
.button-bordered-3d select:hover,
.button-bordered-3d .setting-item-control button:hover {
    border: 2px solid var(--background-modifier-border-focus);
    border-bottom: 5px solid var(--button-shadow);
    transform: translateY(-2px);
}


body:not(.view-header) .button-bordered-3d button:active,
.button-bordered-3d .mod-cta:active,
.button-bordered-3d select:active,
.button-bordered-3d .setting-item-control button:active {
    border: 2px solid var(--background-modifier-border-focus);
    border-bottom: 0 solid var(--button-shadow);
    transform: translateY(0);
}


.button-glow button,
.button-glow .mod-cta,
.button-glow select,
.button-glow .setting-item-control button {
    box-shadow: 0 0 0 var(--color-accent);
    transition: box-shadow 0.2s ease;
}

.button-glow button:hover,
.button-glow .mod-cta:hover,
.button-glow select:hover,
.button-glow .setting-item-control button:hover {
    box-shadow: 0 0 8px var(--text-normal);
}






.filled svg {
    fill: currentcolor;
    fill-opacity: 0.25;
}

.big svg,
.big svg.svg-icon,
.big .clickable-icon {
    --icon-size: 22px !important;
}

.big-filled svg,
.big-filled svg.svg-icon,
.big-filled .clickable-icon {
    --icon-size: 22px !important;
    fill: currentcolor;
    fill-opacity: 0.25;
}

.big-filled .workspace-tab-header .workspace-tab-header-inner-icon,
.big .workspace-tab-header .workspace-tab-header-inner-icon {
    --icon-size: 18px !important;
    width: 22px;
}



.clickable-icon.extra-setting-button[aria-label*="donate to support" i]:hover {
    color: var(--color-pink);
    background-color: rgb(var(--color-pink-rgb), 0.1);
}

.clickable-icon.extra-setting-button[aria-label*="uninstall" i]:hover,
.clickable-icon.extra-setting-button[aria-label*="delete" i]:hover {
    color: var(--text-error);
    background-color: rgb(var(--color-red-rgb), 0.2);
}

.clickable-icon.extra-setting-button[aria-label*="remove" i]:hover {
    color: var(--text-error);
    background-color: rgb(var(--color-red-rgb), 0.2);
}

.modal-close-button.clickable-icon:hover {
    color: var(--text-error);
    background-color: rgb(var(--color-red-rgb), 0.2);
    transition: calc(var(--animation-duration) * 0.6667) ease;
}

.workspace-tab-header-new-tab .clickable-icon:hover {
    color: var(--color-accent);
    background-color: hsl(var(--interactive-accent-hsl), 0.2);
    transition: calc(var(--animation-duration) * 0.6667) ease;
}

.workspace-tab-header-new-tab .clickable-icon:active {
    color: var(--color-accent);
    background-color: hsl(var(--interactive-accent-hsl), 0.2);
    transition: calc(var(--animation-duration) * 0.6667) ease;
}



:is(.button-scale, .button-shrink, .button-tilt, .button-bounce) .sidebar-toggle-button .clickable-icon {
    
}

body:not(.button-scale, .button-shrink, .button-tilt, .button-bounce) .sidebar-toggle-button .clickable-icon {
    transition: all 0.2s ease;
}

.sidebar-toggle-button .clickable-icon:hover {
    background-color: hsl(var(--interactive-accent-hsl), 0.2);
    color: var(--interactive-accent);
    border-radius: var(--button-radius);
    corner-shape: var(--corner-shape);
    
    padding: 6px 8px;

    
    margin-top: -4px;
    margin-bottom: -4px;
}























































select {
  padding: 6px;
  appearance: base-select !important;
  background-color: var(--dropdown-background);
  text-align: center;
  line-height: 1.5;
  display: flex;
  align-items: center;
  corner-shape: var(--corner-shape);
  transition: background-color 0.2s ease, 
              all calc(var(--animation-duration) * 1) cubic-bezier(0.175, 0.885, 0.32, 2);
        
}

select:hover {
  transform: scale(1.02);
  background-color: var(--dropdown-background-hover);
}

select:active {
    transform: scale(1);
}

select:open {
  background-color: var(--dropdown-background-hover);
}

select:open:hover {
  transform: scale(1);
  background-color: var(--dropdown-background-hover);
}


::picker(select) {
  appearance: base-select !important;
  color: var(--background-modifier-border-focus);
  border-radius: var(--button-radius);
  corner-shape: var(--corner-shape) !important;
  margin-top: 4px;
  margin-bottom: 4px;
  background-color: var(--dropdown-background-hover);

  
  box-shadow: 0 2px 4px #00000070;
}


select::picker-icon {
  display: none !important;
}


select option::checkmark {
  content: "★";
}


select option {
  height: 30px;
  margin: 4px;
  border-radius: calc(var(--button-radius) - 2px);
  corner-shape: var(--corner-shape) !important;
  color: var(--text-normal);
  background-color: var(--dropdown-background-hover) !important;
  transition: all 0.15s ease;
}

select option:hover {
  transform: scale(0.98);
  filter: brightness(1) contrast(1.2);
  background-color: var(--dropdown-background) !important;
}

select option:active {
  transform: scale(0.9);
}

select option:checked {
  background-color: hsl(var(--interactive-accent-hsl), 0.3) !important;
  color: var(--text-accent) !important;
}

select option:checked:hover {
  background-color: hsl(var(--interactive-accent-hsl), 0.3) !important;
  color: var(--text-accent) !important;
  filter: brightness(1) contrast(1);
  transform: scale(1);
}



::picker(select) {
  scrollbar-color: hsl(var(--interactive-accent-hsl), 0.3) var(--dropdown-background-hover);
  scrollbar-width: 10px;
}


.is-phone select option {
  padding: 20px;
}






.checkbox-container {
    border-radius: 10px;
    transition: all calc(var(--animation-duration) * 0.3333) cubic-bezier(0.175, 0.885, 0.32, 2);
}


.checkbox-container:not(.is-enabled)::after {
    border-radius: 10px;
    transition: all calc(var(--animation-duration) * 0.3333) cubic-bezier(0.175, 0.885, 0.32, 2);
}


.checkbox-container.is-enabled {
    border-radius: 6px;
    transition: all calc(var(--animation-duration) * 0.3333) ease-out;
}


.checkbox-container.is-enabled::after {
    border-radius: 6px;
    transition:
        transform calc(var(--animation-duration) * 0.3333) cubic-bezier(0.175, 0.885, 0.32, 2),
        border-radius calc(var(--animation-duration) * 1) cubic-bezier(0.175, 0.885, 0.32, 2);
}

.checkbox-container::after {
    background-repeat: no-repeat;
    background-position: center;
    background-size: 70%;
}

.checkbox-container.is-enabled::after {
    background-repeat: no-repeat;
    background-position: center;
    background-size: 70%;
    transition:
        background-size calc(var(--animation-duration) * 0.3333) cubic-bezier(0.175, 0.885, 0.32, 2),
        transform calc(var(--animation-duration) * 0.3333) cubic-bezier(0.175, 0.885, 0.32, 1.5);
}


.theme-light .checkbox-container:not(.is-enabled):hover::after {
    border: 1px solid var(--background-modifier-border);
}

.theme-light .checkbox-container.is-enabled:hover::after {
    border: 1px solid var(--background-modifier-border) !important;
    transition:
        transform calc(var(--animation-duration) * 0.3333) cubic-bezier(0.175, 0.885, 0.32, 2),
        border calc(var(--animation-duration) * 0.3333) ease;
}


.checkbox-container:not(.is-enabled):hover::after {
    transform: scale(1.5);
    background-image: url("data:image/svg+xml;utf8,\
    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'>\
    <circle cx='35' cy='40' r='6' fill='black'/>\
    <circle cx='65' cy='40' r='6' fill='black'/>\
    <path d='M30 60 Q50 72 70 60' stroke='black' stroke-width='10' fill='none' stroke-linecap='round'/>\
    </svg>");
}

.checkbox-container.is-enabled:hover::after {
    background-size: 100%;
    background-image: url("data:image/svg+xml;utf8,\
    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'>\
    \3c !-- Angry eyes flipped \\/ -->\
    <line x1='28' y1='34' x2='42' y2='38' stroke='black' stroke-width='8' stroke-linecap='round'/>\
    <line x1='58' y1='38' x2='72' y2='34' stroke='black' stroke-width='8' stroke-linecap='round'/>\
    \3c !-- Straight mouth -->\
    <line x1='40' y1='55' x2='60' y2='55' stroke='black' stroke-width='6' stroke-linecap='round'/>\
    </svg>");
    transform: scale(1.5) translateX(1em);
    transition:
        transform calc(var(--animation-duration) * 0.3333) cubic-bezier(0.175, 0.885, 0.32, 2),
        border calc(var(--animation-duration) * 0.3333) ease;
}

input[type="checkbox"] {
    transform: scale(1);
    transition: transform calc(var(--animation-duration) * 0.3333) ease !important;
}

input[type="checkbox"]:checked:hover {
    background-color: var(--checkbox-color);
    border-color: var(--checkbox-color);
    transform: scale(1.2);
}





body.active-line-highlight-color-mono {
   --active-line-highlight-color: var(--background-secondary-alt);
   --active-line-border-color: var(--background-modifier-border);
   --active-line-text-color: var(--text-normal);
}

body.active-line-highlight-color-mono-2 {
   --active-line-highlight-color: var(--background-primary-alt);
   --active-line-border-color: var(--background-modifier-border);
   --active-line-text-color: var(--text-normal);
}

body.active-line-highlight-color-accent {
   --active-line-highlight-color: hsl(var(--interactive-accent-hsl), 0.3);
   --active-line-border-color: hsl(var(--interactive-accent-hsl), 0.9);
   --active-line-text-color: var(--text-normal);
}

body.active-line-highlight-color-accent-full {
   --active-line-highlight-color: hsl(var(--interactive-accent-hsl), 0.3);
   --active-line-border-color: hsl(var(--interactive-accent-hsl), 0.9);
   --active-line-text-color: var(--color-accent);
}

body.active-line-highlight-color-accent-solid {
   --active-line-highlight-color: hsl(var(--interactive-accent-hsl), 0.8);
   --active-line-border-color: hsl(var(--interactive-accent-hsl), 0.9);
   --active-line-text-color: var(--text-on-accent);
}

.cm-line.cm-active { color: var(--active-line-text-color); }


body.active-line-highlight .cm-line.cm-active:not(.cm-gutterElement,.HyperMD-codeblock-bg,.HyperMD-callout,.HyperMD-quote)::before {
  position: absolute;
  inset: -2px -10px;
  background: var(--active-line-highlight-color);
  color: var(--active-line-text-color);
  content: "";
  z-index: -2;
  border-radius: var(--button-radius);
  corner-shape: var(--corner-shape);
}

body.active-line-highlight .view-content>.markdown-source-view .cm-line.cm-active:is(.HyperMD-codeblock-bg,.HyperMD-callout,.HyperMD-quote) {
  background-color: var(--active-line-highlight-color) !important;
}


body.active-line-highlight-beyond .cm-line.cm-active:not(.cm-gutterElement,.HyperMD-codeblock-bg,.HyperMD-callout,.HyperMD-quote)::before {
  position: absolute;
  inset: -2px -100%;
  background: var(--active-line-highlight-color);
  content: "";
  z-index: -2;
  border-radius: var(--button-radius);
  corner-shape: var(--corner-shape);
}

body.active-line-highlight-beyond .view-content>.markdown-source-view .cm-line.cm-active:is(.HyperMD-codeblock-bg,.HyperMD-callout,.HyperMD-quote) {
  background-color: var(--active-line-highlight-color) !important;
}


body.active-line-highlight-focused .cm-line.cm-active:not(.cm-gutterElement,.HyperMD-codeblock-bg,.HyperMD-callout,.HyperMD-quote)::before {
  position: absolute;
  inset: -2px -10px;
  background: var(--active-line-highlight-color);
  outline: 2px solid var(--active-line-border-color);
  content: "";
  z-index: -2;
  border-radius: var(--button-radius);
  corner-shape: var(--corner-shape);
}

body.active-line-highlight-focused .view-content>.markdown-source-view .cm-line.cm-active:is(.HyperMD-codeblock-bg,.HyperMD-callout,.HyperMD-quote) {
  background-color: var(--active-line-highlight-color) !important;
  outline: 2px solid var(--active-line-border-color);
}


body.active-line-underline .cm-line {
  border-bottom: 2px solid transparent !important;
  background-color: transparent !important;
}

body.active-line-underline .cm-line.cm-active {
  border-bottom: 2px solid var(--active-line-border-color) !important;
  background-color: transparent !important;
}

body.active-line-underline .view-content>.markdown-source-view .cm-line.cm-active:is(.HyperMD-codeblock-bg,.HyperMD-callout,.HyperMD-quote) {
  background-color: transparent !important;
  border-bottom: 2px solid var(--active-line-border-color) !important;
}


body.active-line-highlight-imperfect
  .cm-line.cm-active:not(
    .cm-gutterElement,
    .HyperMD-codeblock-bg,
    .HyperMD-callout,
    .HyperMD-quote
  )::before {
  position: absolute;
  inset: -70% -6px;
  content: "";
  background: var(--active-line-highlight-color);
  z-index: -2;
  mask: center / 100% 100% no-repeat;

mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20' preserveAspectRatio='none'%3E%3Cpath fill='white' d='M0 5.6 C3 5.4 6 5.9 9 5.5 S15 6.0 18 5.7 S23 5.3 27 5.7 S33 6.0 37 5.5 S42 5.9 46 5.7 S51 5.4 55 5.8 S60 6.0 64 5.5 S69 5.9 73 5.7 S78 5.3 82 5.8 S87 5.9 91 5.5 S96 5.8 100 5.6 C99.3 8.0 100.8 11.5 99.5 14.4 C97 14.6 94 14.1 90 14.5 S84 14.0 80 14.4 S74 14.7 70 14.3 S64 14.1 60 14.5 S54 14.0 50 14.4 S44 14.7 40 14.2 S34 14.1 30 14.5 S24 14.0 20 14.4 S14 14.6 10 14.2 S5 14.1 0 14.4 C0.8 11.0 -0.6 8.5 0 5.6 Z'/%3E%3C/svg%3E");
  mask: center / 100% 100% no-repeat;
}





.float-inactive
    .cm-line:not(.cm-active, .HyperMD-codeblock, .HyperMD-codeblock-bg, .HyperMD-codeblock-end, .HyperMD-codeblock-end-bg) {
    animation-name: float-up-down;
    animation-duration: calc(var(--animation-duration) * 10);
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

.float-inactive
    .cm-line:not(.cm-active, .HyperMD-codeblock, .HyperMD-codeblock-bg, .HyperMD-codeblock-end, .HyperMD-codeblock-end-bg):nth-child(
        8n + 1
    ) {
    animation-delay: 0s;
}

.float-inactive
    .cm-line:not(.cm-active, .HyperMD-codeblock, .HyperMD-codeblock-bg, .HyperMD-codeblock-end, .HyperMD-codeblock-end-bg):nth-child(
        8n + 2
    ) {
    animation-delay: 0.15s;
}

.float-inactive
    .cm-line:not(.cm-active, .HyperMD-codeblock, .HyperMD-codeblock-bg, .HyperMD-codeblock-end, .HyperMD-codeblock-end-bg):nth-child(
        8n + 3
    ) {
    animation-delay: 0.3s;
}

.float-inactive
    .cm-line:not(.cm-active, .HyperMD-codeblock, .HyperMD-codeblock-bg, .HyperMD-codeblock-end, .HyperMD-codeblock-end-bg):nth-child(
        8n + 4
    ) {
    animation-delay: 0.45s;
}

.float-inactive
    .cm-line:not(.cm-active, .HyperMD-codeblock, .HyperMD-codeblock-bg, .HyperMD-codeblock-end, .HyperMD-codeblock-end-bg):nth-child(
        8n + 5
    ) {
    animation-delay: 0.6s;
}

.float-inactive
    .cm-line:not(.cm-active, .HyperMD-codeblock, .HyperMD-codeblock-bg, .HyperMD-codeblock-end, .HyperMD-codeblock-end-bg):nth-child(
        8n + 6
    ) {
    animation-delay: 0.75s;
}

.float-inactive
    .cm-line:not(.cm-active, .HyperMD-codeblock, .HyperMD-codeblock-bg, .HyperMD-codeblock-end, .HyperMD-codeblock-end-bg):nth-child(
        8n + 7
    ) {
    animation-delay: 0.9s;
}

.float-inactive
    .cm-line:not(.cm-active, .HyperMD-codeblock, .HyperMD-codeblock-bg, .HyperMD-codeblock-end, .HyperMD-codeblock-end-bg):nth-child(
        8n + 8
    ) {
    animation-delay: 1.05s;
}

@keyframes float-up-down {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}


.dim-inactive .cm-line:not(.cm-active) {
    opacity: 0.6;
}

.blur-inactive .markdown-source-view.mod-cm6.is-readable-line-width .cm-line:not(.cm-active) {
    filter: blur(var(--blur-inactive-strength));
}

.center-active-line .cm-active.cm-line {
    text-align: center;
}

.huge-text-active-line .cm-active {
    font-size: larger;
}



.center-all-lines h1,
.center-all-lines h2,
.center-all-lines h3,
.center-all-lines h4,
.center-all-lines h5,
.center-all-lines h6,
.center-all-lines p,
.center-all-lines img,
.center-all-lines video,
.center-all-lines audio,
.center-all-lines iframe,
.center-all-lines .cm-image,
.center-all-lines .internal-embed,
.center-all-lines .internal-embed.image-embed,
.center-all-lines .internal-embed.image-embed img,
.center-all-lines .media-embed,
.center-all-lines .image-embed,
.center-all-lines .cm-line:not(.HyperMD-codeblock),
.center-all-lines .cm-header-1,
.center-all-lines .cm-header-2,
.center-all-lines .cm-header-3,
.center-all-lines .cm-header-4,
.center-all-lines .cm-header-5,
.center-all-lines .cm-header-6 {
  text-align: center;
}



.centerall h1,
.centerall h2,
.centerall h3,
.centerall h4,
.centerall h5,
.centerall h6,
.centerall p,
.centerall img,
.centerall video,
.centerall audio,
.centerall iframe,
.centerall .cm-image,
.centerall .internal-embed,
.centerall .internal-embed.image-embed,
.centerall .internal-embed.image-embed img,
.centerall .media-embed,
.centerall .image-embed,
.centerall .cm-line:not(.HyperMD-codeblock),
.centerall .cm-header-1,
.centerall .cm-header-2,
.centerall .cm-header-3,
.centerall .cm-header-4,
.centerall .cm-header-5,
.centerall .cm-header-6 {
  text-align: center;
}






.center-inline-title .inline-title {
    position: relative;
    text-align: center;
    display: inline-block;
    padding: 20px;
    transition: all calc(var(--animation-duration) * 0.6667) ease;
    width: 100%;
    justify-content: space-between;
    margin-bottom: 15px;
}

.left-inline-title .inline-title {
    position: relative;
    text-align: left;
    display: inline-block;
    padding: 20px;
    transition: all calc(var(--animation-duration) * 0.6667) ease;
    width: 100%;
    justify-content: space-between;
    margin-bottom: 15px;
}

.right-inline-title .inline-title {
    position: relative;
    text-align: right;
    display: inline-block;
    padding: 20px;
    transition: all calc(var(--animation-duration) * 0.6667) ease;
    width: 100%;
    justify-content: space-between;
    margin-bottom: 15px;
}

.special-inline-title .inline-title {
    text-align: center;
    position: relative;
    padding: 0;
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    width: 100%;
    transition: 0.3s all ease;
    color: var(--h3-color);
    text-transform: none !important;
}

.special-inline-title .inline-title::before,
.special-inline-title .inline-title::after {
    content: "";
    flex-grow: 1;
    height: 3px;
    background-color: var(--interactive-accent);

    
    margin: 0;

    
    border-radius: 0;
    transition: all 0.3s ease;
}

.special-wide-inline-title .inline-title {
    text-align: center;
    position: relative;
    padding: 0;
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    width: 100%;
    transition: 0.3s all ease;
    color: var(--h3-color);
    text-transform: none !important;
}

.special-wide-inline-title .inline-title::before,
.special-wide-inline-title .inline-title::after {
    content: "";
    flex-grow: 1;
    height: 30px;
    background-color: var(--interactive-accent);
    margin: 0;
    border-radius: 0;
    transition: all 0.3s ease;
}







a {
    font-weight: var(--link-weight);
    outline: none;
    text-decoration: none;
    border-radius: 6px;
    padding: 2px 5px;
}

.cm-s-obsidian span.cm-underline,
.markdown-preview-view u,
u {
    text-decoration: none !important;
}




a.external-link,
.external-link {
    background-color: transparent;
    text-decoration: underline !important;
    text-decoration-thickness: 2px;
    text-underline-offset: 2px;
    background-image: none;
    margin-right: 0;
    padding: 2px 0;
    transition: all calc(var(--animation-duration) * 0.6667) ease;
}

a.external-link {
    color: var(--text-normal);
}

.external-link {
    color: var(--color-accent);
}

a.external-link:hover {
    background-color: var(--background-secondary-alt);
    border-radius: 8px;
    font-weight: 600;
    text-decoration-thickness: 2px;
    padding: 2px 6px;
}

.external-link:hover {
    background-color: var(--background-secondary-alt);
}



.markdown-source-view.mod-cm6 .cm-link .cm-underline,
.markdown-source-view.mod-cm6 .cm-url .cm-underline {
    background-color: transparent;
    color: var(--text-normal);
    text-decoration: underline !important;
    padding: 2px 0;
    transition: all calc(var(--animation-duration) * 0.5) ease;
}

.markdown-source-view.mod-cm6 .cm-link .cm-underline:hover,
.markdown-source-view.mod-cm6 .cm-url .cm-underline:hover {
    background-color: var(--background-secondary-alt);
    border-radius: 8px;
    text-decoration-thickness: 2px;
    padding: 2px 6px;
    transition: all calc(var(--animation-duration) * 0.5) ease;
}



.markdown-source-view.mod-cm6 .cm-hmd-internal-link,
.markdown-rendered .internal-link {
    color: var(--link-color);
    background-color: hsl(var(--interactive-accent-hsl), 0.2);
    border-radius: 6px;
    padding: 0 5px;
    box-decoration-break: clone;
    transition: background-color calc(var(--animation-duration) * 1.6667) ease;
}

.markdown-source-view.mod-cm6 .cm-hmd-internal-link:hover,
.markdown-rendered .internal-link:hover {
    color: var(--link-color);
}


a:active,
.external-link:active,
.markdown-source-view.mod-cm6 .cm-hmd-internal-link:active,
.markdown-rendered .internal-link:active,
.markdown-source-view.mod-cm6 .cm-link .cm-underline:active,
.markdown-source-view.mod-cm6 .cm-url .cm-underline:active {
    outline: 2px solid hsl(var(--interactive-accent-hsl), 0.7);
}





:root {
    --italic-color: var(--color-normal);
    --bold-color: var(--color-normal);
    --bolditalic-color: var(--color-normal);
}



em {
    color: var(--italic-color) !important;
}

strong {
    color: var(--bold-color) !important;
}

strong em,
em strong {
    color: var(--bolditalic-color) !important;
}

.cm-em {
    color: var(--italic-color) !important;
}

.cm-strong {
    color: var(--bold-color) !important;
}

.cm-strong.cm-em {
    color: var(--bolditalic-color) !important;
}



body.italic-color-normal {
    --italic-color: var(--color-normal);
}

body.italic-color-muted {
    --italic-color: var(--color-muted);
}

body.italic-color-accent {
    --italic-color: var(--color-accent);
}

body.italic-color-red {
    --italic-color: var(--color-red);
}

body.italic-color-orange {
    --italic-color: var(--color-orange);
}

body.italic-color-yellow {
    --italic-color: var(--color-yellow);
}

body.italic-color-green {
    --italic-color: var(--color-green);
}

body.italic-color-cyan {
    --italic-color: var(--color-cyan);
}

body.italic-color-blue {
    --italic-color: var(--color-blue);
}

body.italic-color-purple {
    --italic-color: var(--color-purple);
}

body.italic-color-pink {
    --italic-color: var(--color-pink);
}

body.italic-color-gray {
    --italic-color: var(--color-gray);
}

body.italic-color-brown {
    --italic-color: var(--color-brown);
}

body.bold-color-normal {
    --bold-color: var(--color-normal);
}

body.bold-color-muted {
    --bold-color: var(--color-muted);
}

body.bold-color-accent {
    --bold-color: var(--color-accent);
}

body.bold-color-red {
    --bold-color: var(--color-red);
}

body.bold-color-orange {
    --bold-color: var(--color-orange);
}

body.bold-color-yellow {
    --bold-color: var(--color-yellow);
}

body.bold-color-green {
    --bold-color: var(--color-green);
}

body.bold-color-cyan {
    --bold-color: var(--color-cyan);
}

body.bold-color-blue {
    --bold-color: var(--color-blue);
}

body.bold-color-purple {
    --bold-color: var(--color-purple);
}

body.bold-color-pink {
    --bold-color: var(--color-pink);
}

body.bold-color-gray {
    --bold-color: var(--color-gray);
}

body.bold-color-brown {
    --bold-color: var(--color-brown);
}

body.bolditalic-color-normal {
    --bolditalic-color: var(--color-normal);
}

body.bolditalic-color-muted {
    --bolditalic-color: var(--color-muted);
}

body.bolditalic-color-accent {
    --bolditalic-color: var(--color-accent);
}

body.bolditalic-color-red {
    --bolditalic-color: var(--color-red);
}

body.bolditalic-color-orange {
    --bolditalic-color: var(--color-orange);
}

body.bolditalic-color-yellow {
    --bolditalic-color: var(--color-yellow);
}

body.bolditalic-color-green {
    --bolditalic-color: var(--color-green);
}

body.bolditalic-color-cyan {
    --bolditalic-color: var(--color-cyan);
}

body.bolditalic-color-blue {
    --bolditalic-color: var(--color-blue);
}

body.bolditalic-color-purple {
    --bolditalic-color: var(--color-purple);
}

body.bolditalic-color-pink {
    --bolditalic-color: var(--color-pink);
}

body.bolditalic-color-gray {
    --bolditalic-color: var(--color-gray);
}

body.bolditalic-color-brown {
    --bolditalic-color: var(--color-brown);
}




body:not(.per-heading-colors-toggle).heading-color-normal .cm-header,
body:not(.per-heading-colors-toggle).heading-color-normal h1,
body:not(.per-heading-colors-toggle).heading-color-normal h2,
body:not(.per-heading-colors-toggle).heading-color-normal h3,
body:not(.per-heading-colors-toggle).heading-color-normal h4,
body:not(.per-heading-colors-toggle).heading-color-normal h5,
body:not(.per-heading-colors-toggle).heading-color-normal h6 {
    color: var(--text-normal) !important;
}

body:not(.per-heading-colors-toggle).heading-color-accent .cm-header,
body:not(.per-heading-colors-toggle).heading-color-accent h1,
body:not(.per-heading-colors-toggle).heading-color-accent h2,
body:not(.per-heading-colors-toggle).heading-color-accent h3,
body:not(.per-heading-colors-toggle).heading-color-accent h4,
body:not(.per-heading-colors-toggle).heading-color-accent h5,
body:not(.per-heading-colors-toggle).heading-color-accent h6 {
    color: var(--interactive-accent) !important;
}

body:not(.per-heading-colors-toggle).heading-color-red .cm-header,
body:not(.per-heading-colors-toggle).heading-color-red h1,
body:not(.per-heading-colors-toggle).heading-color-red h2,
body:not(.per-heading-colors-toggle).heading-color-red h3,
body:not(.per-heading-colors-toggle).heading-color-red h4,
body:not(.per-heading-colors-toggle).heading-color-red h5,
body:not(.per-heading-colors-toggle).heading-color-red h6 {
    color: var(--color-red) !important;
}

body:not(.per-heading-colors-toggle).heading-color-orange .cm-header,
body:not(.per-heading-colors-toggle).heading-color-orange h1,
body:not(.per-heading-colors-toggle).heading-color-orange h2,
body:not(.per-heading-colors-toggle).heading-color-orange h3,
body:not(.per-heading-colors-toggle).heading-color-orange h4,
body:not(.per-heading-colors-toggle).heading-color-orange h5,
body:not(.per-heading-colors-toggle).heading-color-orange h6 {
    color: var(--color-orange) !important;
}

body:not(.per-heading-colors-toggle).heading-color-yellow .cm-header,
body:not(.per-heading-colors-toggle).heading-color-yellow h1,
body:not(.per-heading-colors-toggle).heading-color-yellow h2,
body:not(.per-heading-colors-toggle).heading-color-yellow h3,
body:not(.per-heading-colors-toggle).heading-color-yellow h4,
body:not(.per-heading-colors-toggle).heading-color-yellow h5,
body:not(.per-heading-colors-toggle).heading-color-yellow h6 {
    color: var(--color-yellow) !important;
}

body:not(.per-heading-colors-toggle).heading-color-green .cm-header,
body:not(.per-heading-colors-toggle).heading-color-green h1,
body:not(.per-heading-colors-toggle).heading-color-green h2,
body:not(.per-heading-colors-toggle).heading-color-green h3,
body:not(.per-heading-colors-toggle).heading-color-green h4,
body:not(.per-heading-colors-toggle).heading-color-green h5,
body:not(.per-heading-colors-toggle).heading-color-green h6 {
    color: var(--color-green) !important;
}

body:not(.per-heading-colors-toggle).heading-color-cyan .cm-header,
body:not(.per-heading-colors-toggle).heading-color-cyan h1,
body:not(.per-heading-colors-toggle).heading-color-cyan h2,
body:not(.per-heading-colors-toggle).heading-color-cyan h3,
body:not(.per-heading-colors-toggle).heading-color-cyan h4,
body:not(.per-heading-colors-toggle).heading-color-cyan h5,
body:not(.per-heading-colors-toggle).heading-color-cyan h6 {
    color: var(--color-cyan) !important;
}

body:not(.per-heading-colors-toggle).heading-color-blue .cm-header,
body:not(.per-heading-colors-toggle).heading-color-blue h1,
body:not(.per-heading-colors-toggle).heading-color-blue h2,
body:not(.per-heading-colors-toggle).heading-color-blue h3,
body:not(.per-heading-colors-toggle).heading-color-blue h4,
body:not(.per-heading-colors-toggle).heading-color-blue h5,
body:not(.per-heading-colors-toggle).heading-color-blue h6 {
    color: var(--color-blue) !important;
}

body:not(.per-heading-colors-toggle).heading-color-purple .cm-header,
body:not(.per-heading-colors-toggle).heading-color-purple h1,
body:not(.per-heading-colors-toggle).heading-color-purple h2,
body:not(.per-heading-colors-toggle).heading-color-purple h3,
body:not(.per-heading-colors-toggle).heading-color-purple h4,
body:not(.per-heading-colors-toggle).heading-color-purple h5,
body:not(.per-heading-colors-toggle).heading-color-purple h6 {
    color: var(--color-purple) !important;
}

body:not(.per-heading-colors-toggle).heading-color-pink .cm-header,
body:not(.per-heading-colors-toggle).heading-color-pink h1,
body:not(.per-heading-colors-toggle).heading-color-pink h2,
body:not(.per-heading-colors-toggle).heading-color-pink h3,
body:not(.per-heading-colors-toggle).heading-color-pink h4,
body:not(.per-heading-colors-toggle).heading-color-pink h5,
body:not(.per-heading-colors-toggle).heading-color-pink h6 {
    color: var(--color-pink) !important;
}

body:not(.per-heading-colors-toggle).heading-color-gray .cm-header,
body:not(.per-heading-colors-toggle).heading-color-gray h1,
body:not(.per-heading-colors-toggle).heading-color-gray h2,
body:not(.per-heading-colors-toggle).heading-color-gray h3,
body:not(.per-heading-colors-toggle).heading-color-gray h4,
body:not(.per-heading-colors-toggle).heading-color-gray h5,
body:not(.per-heading-colors-toggle).heading-color-gray h6 {
    color: var(--text-muted) !important;
}

body:not(.per-heading-colors-toggle).heading-color-brown .cm-header,
body:not(.per-heading-colors-toggle).heading-color-brown h1,
body:not(.per-heading-colors-toggle).heading-color-brown h2,
body:not(.per-heading-colors-toggle).heading-color-brown h3,
body:not(.per-heading-colors-toggle).heading-color-brown h4,
body:not(.per-heading-colors-toggle).heading-color-brown h5,
body:not(.per-heading-colors-toggle).heading-color-brown h6 {
    color: var(--color-brown) !important;
}




body.per-heading-colors-toggle.h1-color-normal .cm-header-1,
body.per-heading-colors-toggle.h1-color-normal h1 {
    color: var(--text-normal) !important;
}

body.per-heading-colors-toggle.h1-color-accent .cm-header-1,
body.per-heading-colors-toggle.h1-color-accent h1 {
    color: var(--interactive-accent) !important;
}

body.per-heading-colors-toggle.h1-color-red .cm-header-1,
body.per-heading-colors-toggle.h1-color-red h1 {
    color: var(--color-red) !important;
}

body.per-heading-colors-toggle.h1-color-orange .cm-header-1,
body.per-heading-colors-toggle.h1-color-orange h1 {
    color: var(--color-orange) !important;
}

body.per-heading-colors-toggle.h1-color-yellow .cm-header-1,
body.per-heading-colors-toggle.h1-color-yellow h1 {
    color: var(--color-yellow) !important;
}

body.per-heading-colors-toggle.h1-color-green .cm-header-1,
body.per-heading-colors-toggle.h1-color-green h1 {
    color: var(--color-green) !important;
}

body.per-heading-colors-toggle.h1-color-cyan .cm-header-1,
body.per-heading-colors-toggle.h1-color-cyan h1 {
    color: var(--color-cyan) !important;
}

body.per-heading-colors-toggle.h1-color-blue .cm-header-1,
body.per-heading-colors-toggle.h1-color-blue h1 {
    color: var(--color-blue) !important;
}

body.per-heading-colors-toggle.h1-color-purple .cm-header-1,
body.per-heading-colors-toggle.h1-color-purple h1 {
    color: var(--color-purple) !important;
}

body.per-heading-colors-toggle.h1-color-pink .cm-header-1,
body.per-heading-colors-toggle.h1-color-pink h1 {
    color: var(--color-pink) !important;
}

body.per-heading-colors-toggle.h1-color-gray .cm-header-1,
body.per-heading-colors-toggle.h1-color-gray h1 {
    color: var(--text-muted) !important;
}

body.per-heading-colors-toggle.h1-color-brown .cm-header-1,
body.per-heading-colors-toggle.h1-color-brown h1 {
    color: var(--color-brown) !important;
}


body.per-heading-colors-toggle.h2-color-normal .cm-header-2,
body.per-heading-colors-toggle.h2-color-normal h2 {
    color: var(--text-normal) !important;
}

body.per-heading-colors-toggle.h2-color-accent .cm-header-2,
body.per-heading-colors-toggle.h2-color-accent h2 {
    color: var(--interactive-accent) !important;
}

body.per-heading-colors-toggle.h2-color-red .cm-header-2,
body.per-heading-colors-toggle.h2-color-red h2 {
    color: var(--color-red) !important;
}

body.per-heading-colors-toggle.h2-color-orange .cm-header-2,
body.per-heading-colors-toggle.h2-color-orange h2 {
    color: var(--color-orange) !important;
}

body.per-heading-colors-toggle.h2-color-yellow .cm-header-2,
body.per-heading-colors-toggle.h2-color-yellow h2 {
    color: var(--color-yellow) !important;
}

body.per-heading-colors-toggle.h2-color-green .cm-header-2,
body.per-heading-colors-toggle.h2-color-green h2 {
    color: var(--color-green) !important;
}

body.per-heading-colors-toggle.h2-color-cyan .cm-header-2,
body.per-heading-colors-toggle.h2-color-cyan h2 {
    color: var(--color-cyan) !important;
}

body.per-heading-colors-toggle.h2-color-blue .cm-header-2,
body.per-heading-colors-toggle.h2-color-blue h2 {
    color: var(--color-blue) !important;
}

body.per-heading-colors-toggle.h2-color-purple .cm-header-2,
body.per-heading-colors-toggle.h2-color-purple h2 {
    color: var(--color-purple) !important;
}

body.per-heading-colors-toggle.h2-color-pink .cm-header-2,
body.per-heading-colors-toggle.h2-color-pink h2 {
    color: var(--color-pink) !important;
}

body.per-heading-colors-toggle.h2-color-gray .cm-header-2,
body.per-heading-colors-toggle.h2-color-gray h2 {
    color: var(--text-muted) !important;
}

body.per-heading-colors-toggle.h2-color-brown .cm-header-2,
body.per-heading-colors-toggle.h2-color-brown h2 {
    color: var(--color-brown) !important;
}


body.per-heading-colors-toggle.h3-color-normal .cm-header-3,
body.per-heading-colors-toggle.h3-color-normal h3 {
    color: var(--text-normal) !important;
}

body.per-heading-colors-toggle.h3-color-accent .cm-header-3,
body.per-heading-colors-toggle.h3-color-accent h3 {
    color: var(--interactive-accent) !important;
}

body.per-heading-colors-toggle.h3-color-red .cm-header-3,
body.per-heading-colors-toggle.h3-color-red h3 {
    color: var(--color-red) !important;
}

body.per-heading-colors-toggle.h3-color-orange .cm-header-3,
body.per-heading-colors-toggle.h3-color-orange h3 {
    color: var(--color-orange) !important;
}

body.per-heading-colors-toggle.h3-color-yellow .cm-header-3,
body.per-heading-colors-toggle.h3-color-yellow h3 {
    color: var(--color-yellow) !important;
}

body.per-heading-colors-toggle.h3-color-green .cm-header-3,
body.per-heading-colors-toggle.h3-color-green h3 {
    color: var(--color-green) !important;
}

body.per-heading-colors-toggle.h3-color-cyan .cm-header-3,
body.per-heading-colors-toggle.h3-color-cyan h3 {
    color: var(--color-cyan) !important;
}

body.per-heading-colors-toggle.h3-color-blue .cm-header-3,
body.per-heading-colors-toggle.h3-color-blue h3 {
    color: var(--color-blue) !important;
}

body.per-heading-colors-toggle.h3-color-purple .cm-header-3,
body.per-heading-colors-toggle.h3-color-purple h3 {
    color: var(--color-purple) !important;
}

body.per-heading-colors-toggle.h3-color-pink .cm-header-3,
body.per-heading-colors-toggle.h3-color-pink h3 {
    color: var(--color-pink) !important;
}

body.per-heading-colors-toggle.h3-color-gray .cm-header-3,
body.per-heading-colors-toggle.h3-color-gray h3 {
    color: var(--text-muted) !important;
}

body.per-heading-colors-toggle.h3-color-brown .cm-header-3,
body.per-heading-colors-toggle.h3-color-brown h3 {
    color: var(--color-brown) !important;
}


body.per-heading-colors-toggle.h4-color-normal .cm-header-4,
body.per-heading-colors-toggle.h4-color-normal h4 {
    color: var(--text-normal) !important;
}

body.per-heading-colors-toggle.h4-color-accent .cm-header-4,
body.per-heading-colors-toggle.h4-color-accent h4 {
    color: var(--interactive-accent) !important;
}

body.per-heading-colors-toggle.h4-color-red .cm-header-4,
body.per-heading-colors-toggle.h4-color-red h4 {
    color: var(--color-red) !important;
}

body.per-heading-colors-toggle.h4-color-orange .cm-header-4,
body.per-heading-colors-toggle.h4-color-orange h4 {
    color: var(--color-orange) !important;
}

body.per-heading-colors-toggle.h4-color-yellow .cm-header-4,
body.per-heading-colors-toggle.h4-color-yellow h4 {
    color: var(--color-yellow) !important;
}

body.per-heading-colors-toggle.h4-color-green .cm-header-4,
body.per-heading-colors-toggle.h4-color-green h4 {
    color: var(--color-green) !important;
}

body.per-heading-colors-toggle.h4-color-cyan .cm-header-4,
body.per-heading-colors-toggle.h4-color-cyan h4 {
    color: var(--color-cyan) !important;
}

body.per-heading-colors-toggle.h4-color-blue .cm-header-4,
body.per-heading-colors-toggle.h4-color-blue h4 {
    color: var(--color-blue) !important;
}

body.per-heading-colors-toggle.h4-color-purple .cm-header-4,
body.per-heading-colors-toggle.h4-color-purple h4 {
    color: var(--color-purple) !important;
}

body.per-heading-colors-toggle.h4-color-pink .cm-header-4,
body.per-heading-colors-toggle.h4-color-pink h4 {
    color: var(--color-pink) !important;
}

body.per-heading-colors-toggle.h4-color-gray .cm-header-4,
body.per-heading-colors-toggle.h4-color-gray h4 {
    color: var(--text-muted) !important;
}

body.per-heading-colors-toggle.h4-color-brown .cm-header-4,
body.per-heading-colors-toggle.h4-color-brown h4 {
    color: var(--color-brown) !important;
}


body.per-heading-colors-toggle.h5-color-normal .cm-header-5,
body.per-heading-colors-toggle.h5-color-normal h5 {
    color: var(--text-normal) !important;
}

body.per-heading-colors-toggle.h5-color-accent .cm-header-5,
body.per-heading-colors-toggle.h5-color-accent h5 {
    color: var(--interactive-accent) !important;
}

body.per-heading-colors-toggle.h5-color-red .cm-header-5,
body.per-heading-colors-toggle.h5-color-red h5 {
    color: var(--color-red) !important;
}

body.per-heading-colors-toggle.h5-color-orange .cm-header-5,
body.per-heading-colors-toggle.h5-color-orange h5 {
    color: var(--color-orange) !important;
}

body.per-heading-colors-toggle.h5-color-yellow .cm-header-5,
body.per-heading-colors-toggle.h5-color-yellow h5 {
    color: var(--color-yellow) !important;
}

body.per-heading-colors-toggle.h5-color-green .cm-header-5,
body.per-heading-colors-toggle.h5-color-green h5 {
    color: var(--color-green) !important;
}

body.per-heading-colors-toggle.h5-color-cyan .cm-header-5,
body.per-heading-colors-toggle.h5-color-cyan h5 {
    color: var(--color-cyan) !important;
}

body.per-heading-colors-toggle.h5-color-blue .cm-header-5,
body.per-heading-colors-toggle.h5-color-blue h5 {
    color: var(--color-blue) !important;
}

body.per-heading-colors-toggle.h5-color-purple .cm-header-5,
body.per-heading-colors-toggle.h5-color-purple h5 {
    color: var(--color-purple) !important;
}

body.per-heading-colors-toggle.h5-color-pink .cm-header-5,
body.per-heading-colors-toggle.h5-color-pink h5 {
    color: var(--color-pink) !important;
}

body.per-heading-colors-toggle.h5-color-gray .cm-header-5,
body.per-heading-colors-toggle.h5-color-gray h5 {
    color: var(--text-muted) !important;
}

body.per-heading-colors-toggle.h5-color-brown .cm-header-5,
body.per-heading-colors-toggle.h5-color-brown h5 {
    color: var(--color-brown) !important;
}


body.per-heading-colors-toggle.h6-color-normal .cm-header-6,
body.per-heading-colors-toggle.h6-color-normal h6 {
    color: var(--text-normal) !important;
}

body.per-heading-colors-toggle.h6-color-accent .cm-header-6,
body.per-heading-colors-toggle.h6-color-accent h6 {
    color: var(--interactive-accent) !important;
}

body.per-heading-colors-toggle.h6-color-red .cm-header-6,
body.per-heading-colors-toggle.h6-color-red h6 {
    color: var(--color-red) !important;
}

body.per-heading-colors-toggle.h6-color-orange .cm-header-6,
body.per-heading-colors-toggle.h6-color-orange h6 {
    color: var(--color-orange) !important;
}

body.per-heading-colors-toggle.h6-color-yellow .cm-header-6,
body.per-heading-colors-toggle.h6-color-yellow h6 {
    color: var(--color-yellow) !important;
}

body.per-heading-colors-toggle.h6-color-green .cm-header-6,
body.per-heading-colors-toggle.h6-color-green h6 {
    color: var(--color-green) !important;
}

body.per-heading-colors-toggle.h6-color-cyan .cm-header-6,
body.per-heading-colors-toggle.h6-color-cyan h6 {
    color: var(--color-cyan) !important;
}

body.per-heading-colors-toggle.h6-color-blue .cm-header-6,
body.per-heading-colors-toggle.h6-color-blue h6 {
    color: var(--color-blue) !important;
}

body.per-heading-colors-toggle.h6-color-purple .cm-header-6,
body.per-heading-colors-toggle.h6-color-purple h6 {
    color: var(--color-purple) !important;
}

body.per-heading-colors-toggle.h6-color-pink .cm-header-6,
body.per-heading-colors-toggle.h6-color-pink h6 {
    color: var(--color-pink) !important;
}

body.per-heading-colors-toggle.h6-color-gray .cm-header-6,
body.per-heading-colors-toggle.h6-color-gray h6 {
    color: var(--text-muted) !important;
}

body.per-heading-colors-toggle.h6-color-brown .cm-header-6,
body.per-heading-colors-toggle.h6-color-brown h6 {
    color: var(--color-brown) !important;
}


.per-heading-colors-toggle.h6-color-normal h6 {
    color: var(--text-normal) !important;
}

.per-heading-colors-toggle.h6-color-accent h6 {
    color: var(--interactive-accent) !important;
}

.per-heading-colors-toggle.h6-color-red h6 {
    color: var(--color-red) !important;
}

.per-heading-colors-toggle.h6-color-orange h6 {
    color: var(--color-orange) !important;
}

.per-heading-colors-toggle.h6-color-yellow h6 {
    color: var(--color-yellow) !important;
}

.per-heading-colors-toggle.h6-color-green h6 {
    color: var(--color-green) !important;
}

.per-heading-colors-toggle.h6-color-cyan h6 {
    color: var(--color-cyan) !important;
}

.per-heading-colors-toggle.h6-color-blue h6 {
    color: var(--color-blue) !important;
}

.per-heading-colors-toggle.h6-color-purple h6 {
    color: var(--color-purple) !important;
}

.per-heading-colors-toggle.h6-color-pink h6 {
    color: var(--color-pink) !important;
}

.per-heading-colors-toggle.h6-color-gray h6 {
    color: var(--text-muted) !important;
}

.per-heading-colors-toggle.h6-color-brown h6 {
    color: var(--color-brown) !important;
}


a {
    

    
    font-weight: var(--link-weight);
    outline: none;
    text-decoration: none !important;

    
    border-radius: 6px !important;
    padding: 2px 5px;
}

.cm-s-obsidian span.cm-underline, .markdown-preview-view u, u {
    text-decoration: none !important;
}




a.external-link {
    background-color: transparent !important;
    color: var(--text-normal) !important;
    text-decoration: underline !important;
    text-decoration-thickness: 1px !important;
    text-underline-offset: 2px !important;
    transition: all calc(var(--animation-duration) * 0.6667) ease !important;
    padding: 2px 0 !important;
}

a.external-link:hover {
    text-decoration-thickness: 2px !important;
    background-color: var(--background-secondary-alt) !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    transition: all calc(var(--animation-duration) * 0.6667) ease !important;
    padding: 2px 6px !important;
}

.external-link {
    

    
    background-color: transparent !important;
    text-decoration: underline !important;
    color: var(--color-accent) !important;
    background-image: none;
    margin-right: 0;
    transition: all calc(var(--animation-duration) * 0.6667) ease !important;
    padding: 2px 0 !important;
}

.external-link:hover {
    background-color: var(--background-secondary-alt) !important;
    margin-right: 0;
    transition: all calc(var(--animation-duration) * 0.6667) ease !important;
    padding: 2px 0 !important;
}

.markdown-source-view.mod-cm6 .cm-link .cm-underline,
.markdown-source-view.mod-cm6 .cm-url .cm-underline {
    background-color: transparent !important;
    text-decoration: underline !important;
    color: var(--text-normal) !important;
    transition: all calc(var(--animation-duration) * 0.5) ease !important;
    padding: 2px 0 !important;
}

.markdown-source-view.mod-cm6 .cm-link .cm-underline:hover,
.markdown-source-view.mod-cm6 .cm-url .cm-underline:hover {
    background-color: var(--background-secondary-alt) !important;
    text-decoration-thickness: 2px !important;
    border-radius: 8px !important;
    transition: all calc(var(--animation-duration) * 0.5) ease !important;
    padding: 2px 6px !important;
}

.markdown-source-view.mod-cm6 .cm-hmd-internal-link,
.markdown-rendered .internal-link {
    color: var(--link-color) !important;
    background-color: hsl(var(--interactive-accent-hsl), 0.2) !important;
    border-radius: 6px;
    padding-left: 5px;
    padding-right: 5px;
    transition: background-color calc(var(--animation-duration) * 1.6667) ease;
    box-decoration-break: clone;

    &:hover {
        color: var(--link-color);
    }
}






.focus-mode .titlebar-button-container {
    display: none !important;
}

.focus-mode .workspace-tab-header-container,

.focus-mode .metadata-container,
.focus-mode ::-webkit-scrollbar {
    display: none !important;
}

body:not(.tab-float) .focus-mode .workspace-tab-container:has(.cm-scroller) {
    padding-bottom: 14px;
    padding-top: 4px !important;
}


.tab-joined.focus-mode {
    .workspace-ribbon.mod-left::before,
    .workspace-ribbon.mod-left::after {
        border-bottom: 1px solid var(--background-modifier-border);
        border-right: 1px solid var(--background-modifier-border);
    }

    .sidebar-toggle-button.mod-left::before {
        height: var(--header-height);
    }

    .workspace-ribbon.side-dock-ribbon.mod-left {
        transform: translateY(-4.1%);
    }

    .side-dock-actions {
        transform: translateY(15%);
    }
}


.lined .cm-line {
    border-bottom: 1.5px solid rgb(128, 128, 128, 0.178) !important;
}



.view-header-title {
    color: var(--text-muted);
    letter-spacing: 2px;
}


.view-title-case-none .view-header-title  { text-transform: none; letter-spacing: normal; }
.view-title-case-capi .view-header-title { text-transform: capitalize; }
.view-title-case-upper .view-header-title { text-transform: uppercase; }
.view-title-case-lower .view-header-title { text-transform: lowercase; }






.svg-icon.help {
    display: none;
}


.hide-tab-list .workspace-tab-header-tab-list {
    display: none;
}


.hide-tab-close-btn
    .workspace
    .mod-root
    .workspace-tab-header
    .workspace-tab-header-inner-close-button {
    margin-right: 6px;
    display: none;
}


body.hide-sidebar-toggle-left .sidebar-toggle-button.mod-left {
    display: none;
}

body.hide-sidebar-toggle-right .sidebar-toggle-button.mod-right {
    display: none;
}


.hide-breadcrumbs .view-header-breadcrumb {
    display: none;
}

.hide-breadcrumbs .view-header-breadcrumb-separator {
    display: none;
}


.hide-strikethrough .markdown-preview-view .task-list-item.is-checked,
.hide-strikethrough .markdown-source-view.mod-cm6 .HyperMD-task-line[data-task="x"],
.hide-strikethrough .markdown-source-view.mod-cm6 .HyperMD-task-line[data-task="X"] {
    text-decoration: none !important;
}


.hide-properties-arrow
    .metadata-container
    .metadata-properties-heading
    .collapse-indicator.collapse-icon {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}



body.hide-folder-arrow .nav-folder-title .collapse-icon {
    --nav-collapse-icon-color: transparent;
    --nav-collapse-icon-color-collapsed: transparent;
}

body.hide-folder-arrow .nav-folder-title .tree-item-icon {
    display: none;
}







.input-right-decorator {
    position: absolute;
    transform: translateY(-50%) !important;
    top: 50%;
}

img {
    border-radius: var(--button-radius);
    corner-shape: var(--corner-shape);
}

.popover .markdown-embed-link {
    margin: 10px 4px;
}






.kanban-styling {

.kanban-plugin__lane {
  border-radius: var(--button-radius);
  border: 2.5px solid var(--background-modifier-border);
  box-shadow: 0 2px 0 var(--background-modifier-border);
}




.kanban-plugin__item {
  border-radius: var(--button-radius);
  border: 2px solid var(--background-modifier-border);
  box-shadow: 0 2px 0 var(--background-modifier-border);
  margin-bottom: 4px;
}

.kanban-plugin__item-title-wrapper {
  background-color: var(--background-primary) !important;
  padding: 12px;
}

.kanban-plugin__item p {
  font-size: 16px !important;
  transition: font-size 0.2s ease-out;
}


.kanban-plugin__item .kanban-plugin__icon {
  opacity: 0;
}

.kanban-plugin__item .kanban-plugin__icon:hover {
  opacity: 1;
}

.kanban-plugin__item .kanban-plugin__icon svg {
  --icon-size: 12px !important;
}

.kanban-plugin__item-title-wrapper .tag {
  padding: 3px 5px !important;
  margin-left: 1px;
  border-radius: 8px !important;
}

.kanban-plugin__item-title-wrapper p {
    line-height: 1.6 !important;
}

.kanban-plugin__item-title-wrapper {
  background-color: var(--background-primary) !important;
  padding: 8px 10px !important;
}

.kanban-plugin__item-metadata-date-relative {
    margin-top: -3px;
}

.kanban-plugin__date, .cm-kanban-time-wrapper, .cm-kanban-date-wrapper {
    display: inline;
}



button.kanban-plugin__new-item-button {
  width: 100%;
  background-color: var(--button-background);
  color: var(--surface);
  box-shadow: none;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1.5);
}

button.kanban-plugin__new-item-button:hover {
  background-color: var(--button-background-hover);
  color: var(--surface);
  transform: scale(1);
  opacity: 1;
  box-shadow: none;
}


.kanban-plugin__item-button-plus {
  margin-inline-end: 4px;
}

.kanban-plugin__item-input-wrapper {
  border-radius: 0 !important;
}

}



body.kanban-full .kanban-plugin__board {
  display: flex !important;
}

body.kanban-full .kanban-plugin__lane-wrapper:not(.collapse-horizontal) {
  flex: 100% !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 100%;
}

body.kanban-full .kanban-plugin__board > div {
  width: 100% !important;
  margin-left: 20px !important;
}





body.kanban-prepend-hover-expand 
.kanban-plugin__item-button-wrapper {
  max-height: 0;
  overflow: hidden;
}

body.kanban-prepend-hover-expand 
.kanban-plugin__item-button-wrapper:hover {
  max-height: 60px;
  transition: max-height 0.3s ease,
              opacity 0.15s ease,
              all 0.2s ease;
}

body.kanban-prepend-hover-expand 
button.kanban-plugin__new-item-button {
  transform: scale(1.2) translateY(2px);
  transition: max-height 0.3s ease,
              opacity 0.15s ease,
              all 0.2s ease;
}

body.kanban-prepend-hover-expand 
.kanban-plugin__item-button-wrapper:hover 
button.kanban-plugin__new-item-button {
  transform: scale(1);
}


body.kanban-hover-biggen 
.kanban-plugin__item:hover p {
  font-size: 20px !important;
}

.kanban-redden-metadata .kanban-plugin__item-metadata {
  color: var(--color-red);
}



body.image-captions-styling {
.image-captions-figure, .theme-dark .image-captions-caption {
    background-color: var(--background-secondary-alt);
    color: var(--text-normal);

    
    margin-bottom: 2px;
}

.image-captions-caption {
    background-color: var(--background-secondary-alt);
    border-radius: 0 0 14px 14px;
    padding-bottom: 8px;
}

.image-captions-figure {
    border-radius: 12px 12px 0 0;
}


.image-captions-figure img {
    border-radius: 8px !important;
    transform: scale(0.99);
    corner-shape: squircle !important;
}


.image-captions-figure, .image-captions-caption {
    border: 2.5px solid var(--background-modifier-border);
    corner-shape: squircle;
}

.image-captions-caption {
    border: 2.5px solid var(--background-modifier-border);
    border-top: none !important;
    border-bottom: 6px solid var(--background-modifier-border) !important;
}
}



.workspace-leaf.obsidian-vertical-tabs-tab-content .tree-item-self.is-active {
    padding: 0;
}

.workspace-leaf.obsidian-vertical-tabs-tab-content
    .tree-item-self.is-active
    .tree-item-icon,
.workspace-leaf.obsidian-vertical-tabs-tab-content
    .tree-item-self.is-active
    .tree-item-inner {
    margin: 8px 2px;
    margin-inline: 6px -4px;
    color: var(--color-accent-1);
    font-weight: 500;
}





.progress-bar-message::before {
    padding: 10px;
    content: "";
    display: inline-block;
    width: 32px;
    height: 32px;
    margin-right: 6px;
    border-radius: 50%;
    background-color: var(--color-yellow);
    background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'>\
  <circle cx='13' cy='60' r='16' fill='orange'/>\
  <circle cx='87' cy='58' r='16' fill='orange'/>\
  <path d='M15 40 Q25 65 40 40' stroke='black' stroke-width='10' fill='none' stroke-linecap='round'/>\
  <path d='M60 40 Q65 65 85 40' stroke='black' stroke-width='10' fill='none' stroke-linecap='round'/>\
  <ellipse cx='50' cy='78' rx='15' ry='18' fill='maroon'/>\
</svg>");
    background-size: 70% 70%;
    background-position: center;
    background-repeat: no-repeat;
    vertical-align: middle;

    animation-name: float;
    animation-duration: calc(var(--animation-duration) * 6.6667);
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

@keyframes float {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(8px);
    }
}

.progress-bar-message {
    font-size: 0;
}





.bases-toolbar-menu-container 
.bases-toolbar-menu-item.is-selected {
  margin: 0 !important;
  animation: none;
}


body:not(.disable-bases-undim) {
    .bases-header {
        opacity: 0.5;
        transition: all 0.2s ease;
    }

    .bases-header:hover {
        opacity: 1;
    }
}


.hide-bases-labels .bases-toolbar-item:not(.bases-toolbar-views-menu) .text-icon-button .text-button-label {
    display: none !important;
}

body {
    --bases-table-row-height: 40px;
    
    --bases-table-font-size: var(--font-ui-medium);
    --bases-cards-radius: var(--touch-radius-xs);
    --bases-cards-corner-shape: var(--corner-shape);
}



.markdown-source-view.mod-cm6 .cm-hmd-internal-link, .markdown-rendered .internal-link {
    text-decoration: none;
}


.suggestion-item.bases-toolbar-menu-item.is-selected {
    color: var(--interactive-accent);
    --checkbox-border-color: var(--interactive-accent);
}

.suggestion-item.bases-toolbar-menu-item.is-selected svg {
    color: var(--interactive-accent);
}

.suggestion-item.bases-toolbar-menu-item.is-selected input[type="checkbox"] {
    accent-color: var(--interactive-accent);
    border: 1.5px solid var(--interactive-accent);
    box-shadow: 0px 0px 2px 2px hsla(var(--interactive-accent-hsl), 0.2);
}

.suggestion-item.bases-toolbar-menu-item.is-selected input[type="checkbox"]:focus,
.suggestion-item.bases-toolbar-menu-item.is-selected input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--interactive-accent);
    outline-offset: 1px;
}



.bases-cards-item {
    gap: 2px;
    padding-bottom: 8px;
}

.hide-bases-cards-label .bases-cards-label {
    display: none;
}

.center-bases-property .bases-cards-property {
    display: flex;
    align-items: center;
    justify-content: center;
}

:root {
    --nav-folder-radius: var(--button-radius);
    --nav-file-radius: var(--button-radius);
    --nav-hide-text: "My Vault";
}

.tree-item-children {
    width: 100%;
    margin-top: 6px;
    margin-bottom: 5px;
    margin-inline-start: 8px;
    padding-inline-start: 0;
    padding-right: 15.5px;
    padding-bottom: 1px;
}


.tree-item-self:not(.nav-folder-title) .tree-item-icon {
  margin-left: -10px !important;
}

.tree-item-self:not(.nav-folder-title) .tree-item-inner {
  margin-left: 12px !important;
}


body:not(.verti-folder) .tree-item-self:is(.nav-folder-title) .tree-item-icon {
  margin-left: -16px !important;
}

body:not(.verti-folder) .tree-item-self:is(.nav-folder-title) .tree-item-inner {
  margin-left: 6px !important;
}


.center-folder-title .nav-folder-title {
    display: flex;
    justify-content: center;
    align-items: center;
}

.center-folder-title .tree-item-self:is(.nav-folder-title) .tree-item-inner {
  margin-left: -22px !important;
}

.center-folder-title .tree-item-self:is(.nav-folder-title) .tree-item-icon {
  margin-left: -98% !important;
}



.tree-item-self {
    border-radius: var(--button-radius) !important;
    margin-inline-start: 0 !important;
    padding-inline-start: 20px !important;
    transition: font-weight 0.2s ease, background-color 0.2s ease, color 0.2s ease, filter 0.2s ease;
}

.nav-file-title {
    border-radius: var(--button-radius) !important;
    margin-inline-start: 0 !important;
    padding-inline-start: 20px !important;
}

.nav-folder-title {
    margin-inline-start: 0 !important;
    padding-inline-start: 30px !important;
}

.tree-item-self:hover {
    filter: brightness(1.1);
    color: var(--color-accent-2) !important;
}

.tree-item-self.is-active {
    border-radius: var(--button-radius) !important;
    font-weight: bold !important;
    background-color: hsl(var(--interactive-accent-hsl), 0.2) !important;
    color: var(--color-accent-1) !important;
}

.tree-item-self.is-active:hover {
    font-weight: bold !important;
    background-color: hsl(var(--interactive-accent-hsl), 0.3) !important;
    color: var(--color-accent-2) !important;
}


.bigger-active-file .tree-item-self.is-active {
    padding: 10px 0 !important;
}


.tree-item-self:has(.nav-file-title),
.nav-file-title {
    border-radius: var(--button-radius) !important;
}

.nav-folder,
.nav-folder-title {
    border-radius: var(--nav-folder-radius) !important;
}

.tree-item.nav-folder,
.tree-item {
    margin-bottom: 4px;
}


.center-active-file-title .nav-file-title.is-active .tree-item-icon {
    margin-inline-start: -20px !important;
}

.center-active-file-title .tree-item-self.is-active {
    transition: font-weight 0.2s ease, background-color 0.2s ease, color 0.2s ease, filter 0.2s ease !important;
    margin-inline-start: 0 !important;
    padding-inline-start: 0 !important;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
}

.center-active-file-title .tree-item-self.is-active .tree-item-icon {
    position: static !important;
    margin-right: 2px;
}






body:not(.is-tablet) {
@media (width >= 600px) {
    .nav-header {
        
        transition: all calc(var(--animation-duration) * 1) cubic-bezier(0.175, 0.885, 0.32, 1.2);
        border-bottom: 1.5px solid var(--background-modifier-border);
    }

    .nav-buttons-container {
        position: relative;
        transition: all calc(var(--animation-duration) * 1) cubic-bezier(0.175, 0.885, 0.32, 1.6);
        margin: -2.2px;
    }

    
    .workspace-leaf-content[data-type="file-explorer"]
        .nav-buttons-container::after {
        content: var(--nav-hide-text) !important;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: var(--text-muted);
        opacity: 1;
        pointer-events: none;
        transition: opacity 0s ease;
        width: 100%;
        text-align: center;
    }

    
    .workspace-leaf-content[data-type="file-explorer"]
        .nav-buttons-container:hover {
        opacity: 1;
        padding: 10px 0 !important;
    }

    .workspace-leaf-content[data-type="file-explorer"]
        .nav-buttons-container:hover::after {
        opacity: 0;
    }

    
    .workspace-leaf-content[data-type="file-explorer"]
        .nav-buttons-container:not(:hover)
        > * {
        opacity: 0;
        transition: opacity 0ms ease;
        margin: auto !important;
    }

    .workspace-leaf-content[data-type="file-explorer"] .nav-files-container {
        padding-top: 10px;
    }
}
}






.nav-folder-title {
  border-radius: var(--nav-folder-radius) !important;
  corner-shape: var(--corner-shape) !important;
  margin-bottom: 0 !important;

  padding-top: 10px !important;
  padding-bottom: 10px !important;
}






body:not(.disable-foldy-basic-bordered) {
    .nav-folder {
    background-color: var(--interactive-normal);
    border: 2px solid var(--background-modifier-border-focus);
    margin-bottom: 6px !important;
    transition: all 0.2s ease;
    }

    .nav-folder-title {
        transition: all 0.2s ease !important;
    }

    .nav-folder:not(.is-collapsed) .nav-folder-title {
    
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;

    
    transition: all 0.2s ease;
    }

    .nav-files-container > div > .nav-folder:not(.is-collapsed) > .nav-folder-title {
        border-bottom: 2px solid var(--background-modifier-border-focus) !important;
    }

}

.nav-folder-title {
  

  border-radius: var(--nav-folder-radius) !important;
  corner-shape: var(--corner-shape) !important;
  margin-bottom: 0 !important;
  border-bottom: 0 solid var(--background-modifier-border);

  transition: border-radius 0.2s ease, background-color 0.2s ease;
}

.nav-folder {
  --nav-folder-radius: var(--button-radius);
  
  border-radius: var(--nav-folder-radius) !important;
  corner-shape: var(--corner-shape) !important;

  transition: border-radius 0.2s ease;
}

.nav-folder:not(.is-collapsed) {
  --nav-folder-radius: calc(var(--button-radius) - 4px);
  
  border-radius: var(--nav-folder-radius) !important;
  corner-shape: var(--corner-shape) !important;

  transition: border-radius 0.2s ease;
}







.scoop-tiptip .nav-folder, .scoop-tiptip .tree-item-self { --button-radius: 6px; --nav-folder-radius: 8px; corner-shape: scoop !important; }
.hexagon-tiptip .nav-folder, .hexagon-tiptip .tree-item-self { --button-radius: 6px; --nav-folder-radius: 8px; corner-shape: bevel !important; }
.round-tiptip .nav-folder, .round-tiptip .tree-item-self { --nav-folder-radius: 7px; }
.rounded-tiptip .nav-folder, .rounded-tiptip .tree-item-self { --nav-folder-radius: 11px; }


body.bouncy-folders.circular-tiptip .nav-folder:not(.is-collapsed):hover {
    border-top-left-radius: 20px !important;
    border-top-right-radius: 20px !important;
}



body.bouncy-folders .nav-folder-title {
    transition:
        border calc(var(--animation-duration) * 0.6667) ease,
        padding calc(var(--animation-duration) * 0.6667) ease-out,
        padding-left 0s ease,
        margin calc(var(--animation-duration) * 0.6667) ease,
        border-radius calc(var(--animation-duration) * 0.6667),
        box-shadow calc(var(--animation-duration) * 0.6667) ease !important;

    &:hover {
        padding-top: 14px !important;
        padding-bottom: 14px !important;
        transition:
            border calc(var(--animation-duration) * 0.6667) ease,
            padding calc(var(--animation-duration) * 0.6667) cubic-bezier(0.175, 0.885, 0.32, 1.275),
            padding-left 0s ease,
            margin calc(var(--animation-duration) * 0.6667) ease,
            border-radius calc(var(--animation-duration) * 0.6667),
            box-shadow calc(var(--animation-duration) * 0.6667) ease !important;
    }

    &:active {
        padding-top: 6px !important;
        padding-bottom: 6px !important;
    }
}




body.bold-folders .nav-folder-title {
    font-weight: 700 !important;
}



body:is(.verti-folder):not(.bb-mobile-disable-verti) {
    .tree-item-self.nav-folder-title {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        padding-inline-start: 0 !important;
        margin-inline-start: 0 !important;
        gap: 16px;
    }

    .tree-item-self.nav-folder-title.is-active .nav-folder-title-content,
    .tree-item-self.nav-folder-title:active .nav-folder-title-content,
    .tree-item-self.nav-folder-title:hover .nav-folder-title-content {
        height: 100%;
        overflow: visible !important;
    }

    .nav-folder-title .tree-item-icon {
        display: flex !important;
        align-items: center;
        justify-content: center;
        transform: none !important;
        margin: 0 !important;
        width: 30px !important;
        height: 30px !important;
        margin-top: -20px !important;
    }

    .nav-folder-title .tree-item-icon,
    .nav-folder-title .tree-item-icon svg,
    .nav-folder-title .tree-item-icon svg * {
        max-width: unset !important;
        max-height: unset !important;
    }

    .nav-folder-title .tree-item-icon svg {
        width: 100% !important;
        height: 100% !important;
        min-width: 100px !important;
        max-width: 100px !important;
    }

    
}



body:is(.is-mobile):not(.bb-mobile-disable-verti) {
    .nav-folder {
        padding: 10px auto;
    }

    .nav-folder-title {
        height: 100px;
    }

    .nav-folder-title-content {
        overflow: visible !important;
    }

    .nav-folder-title .tree-item-icon svg {
        width: 120% !important;
        height: 120% !important;
        min-width: 200px !important;
        margin-top: -10px !important;
    }
}











body:is(.folder-dot-rainbow, .folder-frame-rainbow, .folder-subtle-rainbow, .folder-solid-rainbow)
    .nav-files-container > div > .nav-folder:nth-child(8n+2) { --folder-color: var(--color-red); --folder-color-rgb: var(--color-red-rgb); }

body:is(.folder-dot-rainbow, .folder-frame-rainbow, .folder-subtle-rainbow, .folder-solid-rainbow)
    .nav-files-container > div > .nav-folder:nth-child(8n+3) { --folder-color: var(--color-orange); --folder-color-rgb: var(--color-orange-rgb); }

body:is(.folder-dot-rainbow, .folder-frame-rainbow, .folder-subtle-rainbow, .folder-solid-rainbow)
    .nav-files-container > div > .nav-folder:nth-child(8n+4) { --folder-color: var(--color-yellow); --folder-color-rgb: var(--color-yellow-rgb); }

body:is(.folder-dot-rainbow, .folder-frame-rainbow, .folder-subtle-rainbow, .folder-solid-rainbow)
    .nav-files-container > div > .nav-folder:nth-child(8n+5) { --folder-color: var(--color-green); --folder-color-rgb: var(--color-green-rgb); }

body:is(.folder-dot-rainbow, .folder-frame-rainbow, .folder-subtle-rainbow, .folder-solid-rainbow)
    .nav-files-container > div > .nav-folder:nth-child(8n+6) { --folder-color: var(--color-cyan); --folder-color-rgb: var(--color-cyan-rgb); }

body:is(.folder-dot-rainbow, .folder-frame-rainbow, .folder-subtle-rainbow, .folder-solid-rainbow)
    .nav-files-container > div > .nav-folder:nth-child(8n+7) { --folder-color: var(--color-blue); --folder-color-rgb: var(--color-blue-rgb); }

body:is(.folder-dot-rainbow, .folder-frame-rainbow, .folder-subtle-rainbow, .folder-solid-rainbow)
    .nav-files-container > div > .nav-folder:nth-child(8n+8) { --folder-color: var(--color-purple); --folder-color-rgb: var(--color-purple-rgb); }

body:is(.folder-dot-rainbow, .folder-frame-rainbow, .folder-subtle-rainbow, .folder-solid-rainbow)
    .nav-files-container > div > .nav-folder:nth-child(8n+9) { --folder-color: var(--color-pink); --folder-color-rgb: var(--color-pink-rgb); }


body:is(.folder-dot-accent, .folder-dot-rainbow,
        .folder-frame-accent, .folder-frame-rainbow,
        .folder-subtle-accent, .folder-subtle-rainbow,
        .folder-solid-accent, .folder-solid-rainbow,
        .folder-gradient-hue)
    .nav-files-container > div > .nav-folder > .nav-folder-title {
    background-color: transparent !important;
    background-image: none !important;
}


body:is(.folder-dot-accent, .folder-dot-rainbow)
    .nav-files-container > div > .nav-folder > .nav-folder-title > .collapse-icon svg {
    display: none;
}



body:is(.folder-dot-accent, .folder-dot-rainbow)
    .nav-files-container > div > .nav-folder > .nav-folder-title > .collapse-icon {
    position: relative;
}

body:is(.folder-dot-accent, .folder-dot-rainbow)
    .nav-files-container > div > .nav-folder > .nav-folder-title > .collapse-icon::before {
    position: absolute;
    transform: translate(-50%, -50%);
    width: 8px !important;
    height: 8px !important;
    border-radius: 50%;
    content: "";
    margin-left: 10px;
}


body.folder-dot-accent
    .nav-files-container > div > .nav-folder > .nav-folder-title > .collapse-icon::before {
    background-color: var(--color-accent) !important;
}

body.folder-dot-accent
    .nav-files-container > div > .nav-folder > .nav-folder-title {
    color: var(--color-accent) !important;

    --nav-collapse-icon-color: var(--color-accent);
    --icon-color: var(--color-accent);
}


body.folder-dot-rainbow
    .nav-files-container > div > .nav-folder > .nav-folder-title > .collapse-icon::before {
    background-color: var(--folder-color, var(--text-muted)) !important;
}

body.folder-dot-rainbow
    .nav-files-container > div > .nav-folder {
    background-color: rgb(var(--folder-color-rgb, var(--color-red-rgb)), 0.15) !important;
    border: 0 solid var(--folder-color, var(--text-normal)) !important;
    color: var(--folder-color, var(--text-normal)) !important;

    --nav-collapse-icon-color: var(--folder-color, var(--text-muted));
    --icon-color: var(--folder-color, var(--text-muted));
}

body.folder-dot-rainbow
    .nav-folder {
    background-color: rgb(var(--folder-color-rgb, var(--color-red-rgb)), 0.15) !important;
    border: 0 solid var(--folder-color, var(--text-normal)) !important;
    color: var(--folder-color, var(--text-normal)) !important;

    --nav-collapse-icon-color: var(--folder-color, var(--text-muted));
    --icon-color: var(--folder-color, var(--text-muted));
}

body.folder-dot-rainbow
    .nav-files-container > div > .nav-folder > .nav-folder-title {
    background-color: rgb(var(--folder-color-rgb, var(--color-red-rgb)), 0.15) !important;
    color: var(--folder-color, var(--text-normal)) !important;

    --nav-collapse-icon-color: var(--folder-color, var(--text-muted));
    --icon-color: var(--folder-color, var(--text-muted));
}

body.folder-dot-rainbow
.nav-files-container > div > .nav-folder:not(.is-collapsed) > .nav-folder-title {
    border-bottom: 2px solid rgb(var(--folder-color-rgb), 0.2) !important;
}


body.folder-frame-accent
    .nav-files-container > div > .nav-folder {
    background-color: hsl(var(--interactive-accent-hsl), 0.1) !important;
    border: 2px solid hsl(var(--interactive-accent-hsl), 0.8) !important;
    color: var(--color-accent) !important;

    --nav-collapse-icon-color: var(--color-accent);
    --icon-color: var(--color-accent);
}

body.folder-frame-accent .nav-folder-title {
    color: var(--folder-color, var(--text-normal)) !important;

    --nav-collapse-icon-color: var(--folder-color, var(--text-muted));
    --icon-color: var(--folder-color, var(--text-muted));
}

body.folder-frame-accent
.nav-files-container > div > .nav-folder:not(.is-collapsed) > .nav-folder-title {
    border-bottom: 2px solid hsl(var(--interactive-accent-hsl), 0.3) !important;
}



body.folder-frame-rainbow 
    .nav-files-container > div > .nav-folder {
    background-color: rgb(var(--folder-color-rgb, var(--color-red-rgb)), 0.15) !important;
    border: 2px solid var(--folder-color, var(--text-muted)) !important;
}

body.folder-frame-rainbow 
    .nav-folder {
    background-color: rgb(var(--folder-color-rgb, var(--color-red-rgb)), 0.15) !important;
    border: 0 solid var(--folder-color, var(--text-muted)) !important;
}

body.folder-frame-rainbow .nav-folder-title {
    color: var(--folder-color, var(--text-normal)) !important;

    --nav-collapse-icon-color: var(--folder-color, var(--text-muted));
    --icon-color: var(--folder-color, var(--text-muted));
}

body.folder-frame-rainbow
.nav-files-container > div > .nav-folder:not(.is-collapsed) > .nav-folder-title {
    border-bottom: 2px solid rgb(var(--folder-color-rgb), 0.3) !important;
}



body.folder-subtle-accent
    .nav-files-container > div > .nav-folder {
    background-color: hsl(var(--interactive-accent-hsl), 0.2) !important;
    color: var(--color-accent) !important;
    border: 2px solid hsl(var(--interactive-accent-hsl), 0.4) !important;

    --nav-collapse-icon-color: var(--color-accent);
    --icon-color: var(--color-accent);
}

body.folder-subtle-accent
    .nav-files-container > div > .nav-folder:not(.is-collapsed) > .nav-folder-title {
    color: var(--color-accent) !important;
    border-bottom: 2px solid hsl(var(--interactive-accent-hsl), 0.2) !important;

    --nav-collapse-icon-color: var(--color-accent);
    --icon-color: var(--color-accent);
}

body.folder-subtle-accent
    .nav-folder {
    background-color: hsl(var(--interactive-accent-hsl), 0.15) !important;
    color: var(--color-accent) !important;
    border: 0 solid transparent;

    --nav-collapse-icon-color: var(--color-accent);
    --icon-color: var(--color-accent);
}


body.folder-subtle-rainbow
    .nav-files-container > div > .nav-folder > .nav-folder-title, .nav-folder-title  {
    color: var(--folder-color, var(--text-normal)) !important;
}

body.folder-subtle-rainbow
    .nav-files-container > div > .nav-folder {
    background-color: rgb(var(--folder-color-rgb, var(--color-red-rgb)), 0.2) !important;
    color: var(--folder-color, var(--text-normal)) !important;

    --nav-collapse-icon-color: var(--folder-color, var(--text-muted));
    --icon-color: var(--folder-color, var(--text-muted));
}

body.folder-subtle-rainbow
    .nav-folder {
    background-color: rgb(var(--folder-color-rgb, var(--color-red-rgb)), 0.15) !important;
    border: 0 solid transparent;
    color: var(--folder-color, var(--text-normal)) !important;

    --nav-collapse-icon-color: var(--folder-color, var(--text-muted));
    --icon-color: var(--folder-color, var(--text-muted));
}

body.folder-subtle-rainbow
    .nav-files-container > div > .nav-folder:not(.is-collapsed) > .nav-folder-title {
    border-bottom: 2px solid rgb(var(--folder-color-rgb), 0.2) !important;
}





body.folder-solid-accent {
    .nav-files-container > div > .nav-folder > .nav-folder-title {
    background-color: var(--color-accent) !important;
    color: var(--text-on-accent) !important;

    --nav-collapse-icon-color: var(--text-on-accent);
    --icon-color: var(--text-on-accent);
    }

    .nav-files-container > div > .nav-folder {
    background-color: var(--color-accent) !important;
    border: 2px solid var(--text-on-accent) !important;

    --nav-collapse-icon-color: var(--text-on-accent);
    --icon-color: var(--text-on-accent);
    }
}


body.folder-solid-rainbow {
    .nav-files-container > div > .nav-folder > .nav-folder-title {
    background-color: var(--folder-color, var(--text-muted)) !important;
    color: white !important;

    --nav-collapse-icon-color: white;
    --icon-color: white;
    }

    .nav-files-container > div > .nav-folder {
    background-color: var(--folder-color, var(--text-muted)) !important;
    border: 2px solid var(--text-on-accent) !important;

    --nav-collapse-icon-color: var(--text-on-accent);
    --icon-color: var(--text-on-accent);
    }

    .nav-files-container > div > .nav-folder:not(.is-collapsed) > .nav-folder-title {
        border-bottom: 2px solid rgb(var(--folder-color-rgb), 0.9) !important;
    }

}


body.folder-gradient-hue .nav-folder {
    animation: colorShift 8s linear infinite !important;
}

@keyframes colorShift {
    0%   { filter: hue-rotate(0deg); }
    100% { filter: hue-rotate(360deg); }
}


body.folder-gradient-hue .nav-files-container > div > .nav-folder:nth-child(8n+2) {
    background-color: hsl(var(--interactive-accent-hsl), 0.24) !important;
}

body.folder-gradient-hue .nav-files-container > div > .nav-folder:nth-child(8n+3) {
    background-color: hsl(var(--interactive-accent-hsl), 0.21) !important;
}

body.folder-gradient-hue .nav-files-container > div > .nav-folder:nth-child(8n+4) {
    background-color: hsl(var(--interactive-accent-hsl), 0.19) !important;
}

body.folder-gradient-hue .nav-files-container > div > .nav-folder:nth-child(8n+5) {
    background-color: hsl(var(--interactive-accent-hsl), 0.17) !important;
}

body.folder-gradient-hue .nav-files-container > div > .nav-folder:nth-child(8n+6) {
    background-color: hsl(var(--interactive-accent-hsl), 0.15) !important;
}

body.folder-gradient-hue .nav-files-container > div > .nav-folder:nth-child(8n+7) {
    background-color: hsl(var(--interactive-accent-hsl), 0.13) !important;
}

body.folder-gradient-hue .nav-files-container > div > .nav-folder:nth-child(8n+8) {
    background-color: hsl(var(--interactive-accent-hsl), 0.11) !important;
}

body.folder-gradient-hue .nav-files-container > div > .nav-folder:nth-child(8n+9) {
    background-color: hsl(var(--interactive-accent-hsl), 0.09) !important;
}


body.folder-gradient-hue .nav-files-container > div > .nav-folder:nth-child(8n+2) .nav-folder-title,
body.folder-gradient-hue .nav-files-container > div > .nav-folder:nth-child(8n+2) .nav-file-title {
    color: hsl(var(--interactive-accent-hsl), 1) !important;

    --icon-color: hsl(var(--interactive-accent-hsl), 1) !important;
    --nav-collapse-icon-color: hsl(var(--interactive-accent-hsl), 1) !important;
}

body.folder-gradient-hue .nav-files-container > div > .nav-folder:nth-child(8n+3) .nav-folder-title,
body.folder-gradient-hue .nav-files-container > div > .nav-folder:nth-child(8n+3) .nav-file-title {
    color: hsl(var(--interactive-accent-hsl), 0.9) !important;

    --icon-color: hsl(var(--interactive-accent-hsl), 0.9) !important;
    --nav-collapse-icon-color: hsl(var(--interactive-accent-hsl), 0.9) !important;
}

body.folder-gradient-hue .nav-files-container > div > .nav-folder:nth-child(8n+4) .nav-folder-title,
body.folder-gradient-hue .nav-files-container > div > .nav-folder:nth-child(8n+4) .nav-file-title {
    color: hsl(var(--interactive-accent-hsl), 0.85) !important;

    --icon-color: hsl(var(--interactive-accent-hsl), 0.85) !important;
    --nav-collapse-icon-color: hsl(var(--interactive-accent-hsl), 0.85) !important;
}

body.folder-gradient-hue .nav-files-container > div > .nav-folder:nth-child(8n+5) .nav-folder-title,
body.folder-gradient-hue .nav-files-container > div > .nav-folder:nth-child(8n+5) .nav-file-title {
    color: hsl(var(--interactive-accent-hsl), 0.8) !important;

    --icon-color: hsl(var(--interactive-accent-hsl), 0.8) !important;
    --nav-collapse-icon-color: hsl(var(--interactive-accent-hsl), 0.8) !important;
}

body.folder-gradient-hue .nav-files-container > div > .nav-folder:nth-child(8n+6) .nav-folder-title,
body.folder-gradient-hue .nav-files-container > div > .nav-folder:nth-child(8n+6) .nav-file-title {
    color: hsl(var(--interactive-accent-hsl), 0.75) !important;

    --icon-color: hsl(var(--interactive-accent-hsl), 0.75) !important;
    --nav-collapse-icon-color: hsl(var(--interactive-accent-hsl), 0.75) !important;
}

body.folder-gradient-hue .nav-files-container > div > .nav-folder:nth-child(8n+7) .nav-folder-title,
body.folder-gradient-hue .nav-files-container > div > .nav-folder:nth-child(8n+7) .nav-file-title {
    color: hsl(var(--interactive-accent-hsl), 0.7) !important;

    --icon-color: hsl(var(--interactive-accent-hsl), 0.7) !important;
    --nav-collapse-icon-color: hsl(var(--interactive-accent-hsl), 0.7) !important;
}

body.folder-gradient-hue .nav-files-container > div > .nav-folder:nth-child(8n+8) .nav-folder-title,
body.folder-gradient-hue .nav-files-container > div > .nav-folder:nth-child(8n+8) .nav-file-title {
    color: hsl(var(--interactive-accent-hsl), 0.65) !important;

    --icon-color: hsl(var(--interactive-accent-hsl), 0.65) !important;
    --nav-collapse-icon-color: hsl(var(--interactive-accent-hsl), 0.65) !important;
}

body.folder-gradient-hue .nav-files-container > div > .nav-folder:nth-child(8n+9) .nav-folder-title,
body.folder-gradient-hue .nav-files-container > div > .nav-folder:nth-child(8n+9) .nav-file-title {
    color: hsl(var(--interactive-accent-hsl), 0.6) !important;

    --icon-color: hsl(var(--interactive-accent-hsl), 0.6) !important;
    --nav-collapse-icon-color: hsl(var(--interactive-accent-hsl), 0.6) !important;
}


.mechanical .nav-folder-title {
    --icon-color: var(--text-normal) !important;
    --nav-collapse-icon-color: var(--text-normal);
    --nav-collapse-icon-color-collapsed: var(--text-normal);

    border-radius: var(--nav-folder-radius);
    padding-top: 6px !important;
    padding-bottom: 6px !important;

    background-color: var(--background-primary-alt);
    background-image: linear-gradient(
        180deg,
        var(--background-primary-alt),
        var(--background-secondary-alt)
    ) !important;
    color: var(--text-normal) !important;
    border: 2px solid var(--background-modifier-border);
    box-shadow: none;
}



.tree-item-children .nav-folder-title:hover {
  background-color: transparent !important;
}



body:not(.is-phone) .workspace-leaf.mod-active .tree-item-self.has-focus {
    box-shadow: 0px 0px 0px 2px #00000000;
}

body:not(.is-phone) .workspace-leaf.mod-active .nav-folder:has(> .tree-item-self.has-focus) {
    border: 2px dashed var(--interactive-accent) !important;
}




.menu {
    border-radius: calc(var(--button-radius) + 2px);
    corner-shape: var(--corner-shape);
    overflow: auto;
    opacity: 1;
    transition: all calc(var(--animation-duration) * 0.6667) cubic-bezier(0.175, 0.885, 0.32, 2);
}

.menu-item.tappable {
    border-radius: var(--button-radius);
    corner-shape: var(--corner-shape);
    padding: 6px 8px;
    transition: all 0.2s ease;
}

.menu-item.tappable.selected {
    color: var(--color-accent);
    background-color: hsl(var(--interactive-accent-hsl), 0.2);
}

.menu-item.tappable.selected .menu-item-icon {
    color: var(--color-accent);
}

.menu-item.tappable.selected:active {
    transform: scale(0.9);
    transition: all 0.2s ease;
}




.menu-item.tappable:is([data-section*="delete"], [data-section*="Delete"], [data-section*="DELETE"],
                         [data-section*="remove"], [data-section*="Remove"], [data-section*="REMOVE"]):not(.is-disabled),
.menu-item.tappable.is-warning {
    color: var(--text-error);
}

.menu-item.tappable:is([data-section*="delete"], [data-section*="Delete"], [data-section*="DELETE"],
                         [data-section*="remove"], [data-section*="Remove"], [data-section*="REMOVE"]):not(.is-disabled),
.menu-item.tappable.is-warning.selected {
    background-color: rgb(var(--color-red-rgb), 0.3);
}

.menu-item.tappable:is([data-section*="delete"], [data-section*="Delete"], [data-section*="DELETE"],
                         [data-section*="remove"], [data-section*="Remove"], [data-section*="REMOVE"]):not(.is-disabled) .menu-item-icon,
.menu-item.tappable.is-warning .menu-item-icon {
    color: var(--text-error);
}



.is-mobile .menu-item.tappable:not(.menu-group .menu-item.tappable) {
    border-radius: var(--touch-radius-xs);
}

.is-mobile .menu-group:has(.menu-item.tappable) {
    border-radius: var(--touch-radius-xs);
}

.is-mobile .menu-group:has(.menu-item.tappable) .menu-item.tappable {
    border-radius: 0;
}

.is-mobile .menu-group:has(.menu-item.tappable) .menu-item.tappable:first-child {
    border-top-left-radius: var(--touch-radius-xs);
    border-top-right-radius: var(--touch-radius-xs);
}

.is-mobile .menu-group:has(.menu-item.tappable) .menu-item.tappable:last-child {
    border-bottom-left-radius: var(--touch-radius-xs);
    border-bottom-right-radius: var(--touch-radius-xs);
}


.is-mobile .menu-item {
    padding: 10px 16px;
}

.is-mobile .menu-separator {
    margin: 4px 0;
}

.is-mobile .menu-group {
    border: 2px solid var(--background-modifier-border-focus);
    corner-shape: var(--corner-shape);
}


.is-mobile .menu-group {
    border-radius: var(--touch-radius-xs);
    corner-shape: var(--corner-shape);
}


.is-mobile.is-tablet .menu-item {
    background-color: var(--interactive-normal);
    padding: 6px 12px;
}




.bb-mobile-hide-arrows {
    .mobile-navbar-actions > .mobile-navbar-action:nth-child(1),
    .mobile-navbar-actions > .mobile-navbar-action:nth-child(2) {
        display: none;
    }
}

.bb-mobile-hide-searchnote {
    .mobile-navbar-actions > .mobile-navbar-action:nth-child(3) {
        display: none;
    }
}

.bb-mobile-hide-newtab {
    .mobile-navbar-actions > .mobile-navbar-action:nth-child(4) {
        display: none;
    }
}

.bb-mobile-hide-tabs {
    .mobile-navbar-actions > .mobile-navbar-action:nth-child(5) {
        display: none;
    }
}


.bb-hide-toolbar {
    .mobile-toolbar,
    .mobile-toolbar-spacer,
    .mobile-toolbar-options-list,
    .mobile-toolbar-options-list-container {
        display: none !important;
    }
}


body.is-mobile, .body.is-phone {


.mobile-tab-switcher-menubar {
    border-top: 2px solid var(--background-modifier-border-hover);
    padding-top: 20px;
}

.mobile-tab-switcher-inner-scroll {
    padding-bottom: 10px;
}


.mobile-tab .mobile-tab-preview,
.mobile-tab .mobile-tab-preview *,
.mobile-tab .mobile-tab-preview::before,
.mobile-tab .mobile-tab-preview::after {
  box-shadow: none !important;
  filter: drop-shadow(0 0 0 transparent) !important;
  text-shadow: none !important;
}


.mobile-tab .mobile-tab-preview,
.mobile-tab.is-active .mobile-tab-preview,
.mobile-tab .mobile-tab-preview-empty,
.mobile-tab.is-active .mobile-tab-preview-empty {
    --tab-switcher-preview-radius: var(--touch-radius-xs);
    corner-shape: var(--corner-shape);

    
}


.mobile-tab {
    padding: 10px;
    border: 2px solid var(--background-modifier-border-hover);
    border-radius: var(--touch-radius-xs);
    corner-shape: var(--corner-shape);
}

.mobile-tab .mobile-tab-preview {
    border-radius: var(--touch-radius-xxs);
    corner-shape: var(--corner-shape) !important;
    border: 2px solid var(--background-modifier-border);
}

.mobile-tab-title {
    padding-top: 4px;
}


.mobile-tab.is-active {
    border: 2px solid var(--color-accent);
    background-color: hsl(var(--interactive-accent-hsl), 0.2);
    corner-shape: var(--corner-shape);
}

.mobile-tab.is-active .mobile-tab-preview {
    border: 2px solid hsl(var(--interactive-accent-hsl), 0.7) !important;
}

.mobile-tab.is-active .mobile-tab-preview svg {
    color: var(--color-accent);
}




.mobile-tab-group-container {
    display: flex !important;
    flex-flow: column nowrap !important;
    gap: 4px !important;
}

.mobile-tab-wrapper {
    width: 100% !important;
    flex: none !important;
    margin-bottom: 10px;
}
}

body.mob-tab-list-compact {
    .mobile-tab .mobile-tab-preview,
    .mobile-tab.is-active .mobile-tab-preview,
    .mobile-tab .mobile-tab-preview-empty,
    .mobile-tab.is-active .mobile-tab-preview-empty {
        --tab-switcher-preview-radius: var(--touch-radius-xs);
        corner-shape: var(--corner-shape) !important;
        background: none;

        --icon-size: 22px;
    }

    
    
    .mobile-tab .mobile-tab-preview {
        border: none;
    }

    .mobile-tab.is-active .mobile-tab-preview {
        border: none !important;
    }

    .mobile-tab-switcher-scroll .mobile-tab-group-container .mobile-tab-wrapper .mobile-tab {
        height: 48px !important;
        min-height: 48px !important;
        padding: 0 12px !important;
        flex-direction: row !important;
        align-items: center !important;
    }

    .mobile-tab-switcher-scroll .mobile-tab-group-container .mobile-tab-wrapper .mobile-tab .mobile-tab-preview {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        min-height: 32px !important;
        margin: 0 !important;
        flex-shrink: 0 !important;
        order: 1 !important;
    }

    .mobile-tab-switcher-scroll .mobile-tab-group-container .mobile-tab-wrapper .mobile-tab .mobile-tab-title {
        margin-top: 2px;
        font-weight: 500 !important;
        order: 2 !important;
        flex: 1 !important;
        text-align: left !important;
    }

    
    .mobile-tab-switcher-scroll .close-button,
    .mobile-tab-switcher-scroll .mobile-tab-pin {
        display: none !important;
    }
}




.is-mobile .menu-group:has(.menu-item.tappable) .menu-item.tappable:first-child {
    border-top-left-radius: var(--touch-radius-xxs);
    border-top-right-radius: var(--touch-radius-xxs);
}

.is-mobile .menu-group:has(.menu-item.tappable) .menu-item.tappable:last-child {
    border-bottom-left-radius: var(--touch-radius-xxs);
    border-bottom-right-radius: var(--touch-radius-xxs);
}


body.is-mobile, .body.is-phone {
    .mobile-tab.is-active .mobile-tab-preview {
        border: 0 solid hsl(var(--interactive-accent-hsl), 0.7) !important;
    }

    .mobile-tab .mobile-tab-preview {
        border: none;
    }
}




.multi-select-container {
    padding: 6px;
}


.workspace-leaf-content[data-type="file-properties"] .metadata-container {
    background-color: var(--background-primary-alt);
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    margin: 0;
    transform: none;
    opacity: 1;
    animation: none;
    transition: none;
    width: auto;
    justify-content: normal;
}

.workspace-leaf-content[data-type="file-properties"] .metadata-property {
    padding: 8px;
}


.workspace-leaf-content[data-type="file-properties"] .metadata-container,
.workspace-leaf-content[data-type="file-properties"] .metadata-content {
    background-color: var(--background-secondary-alt);
    border-radius: var(--button-radius);
    corner-shape: var(--corner-shape);
    padding: 8px;
}

.workspace-leaf-content[data-type="file-properties"] .metadata-property {
    border-bottom: 1.8px solid var(--background-modifier-border-focus);
}


.cm-scroller {
  container-type: inline-size;
}


@container (max-width: 500px) {
  
  .workspace-leaf-content:not([data-type="file-properties"]) {
    .metadata-property {
      display: flex !important;
      flex-direction: column !important;
      align-items: stretch !important;
      margin-bottom: 4px !important;
    }

    .is-mobile .metadata-property-icon {
      --icon-size: var(--mobile-font-size);
    }

    .metadata-property-key {
      width: 100% !important;
      margin-bottom: 0 !important;
      padding: 0 !important;
      height: 40px !important;
    }

    .metadata-property-value {
      width: 100% !important;
      margin-left: 0 !important;
      padding-left: 0 !important;
    }

    .multi-select-container {
      flex-wrap: wrap !important;
    }

    .is-mobile .metadata-container {
      padding: 0 !important;
      padding-right: 24px !important;
      padding-top: 8px !important;
    }
  }
}




.is-mobile .metadata-content {
    background-color: var(--background-secondary-alt);
}

.is-mobile .metadata-properties-heading {
    width: 100%;
}

@container (max-width: 800px) {
    .is-mobile .metadata-container {
        padding-right: 0 !important;
    }

    .is-mobile .metadata-content {
        transform: translateX(-12px);
        width: 100%;
    }
}



.metadata-add-button.text-icon-button {
    margin-top: 10px;
}


.properties-add-btn-accented .metadata-add-button.text-icon-button {
    background-color: hsla(var(--interactive-accent-hsl), 0.2) !important;
    color: var(--color-accent);
    padding: 6px 8px;
    
    border-radius: var(--button-radius);
    corner-shape: var(--corner-shape);

    transition: 0.2s ease background-color;
}

.properties-add-btn-accented .metadata-add-button.text-icon-button:hover {
    background-color: hsla(var(--interactive-accent-hsl), 0.3) !important;
    color: var(--color-accent);
}

.properties-add-btn-accented .metadata-add-button.text-icon-button:hover .text-button-icon {
    color: var(--color-accent);
}



.properties-add-btn-fullwidth .metadata-add-button.text-icon-button {
    width: 100%;
    padding: 6px 8px;

    display: flex;
    align-items: center;
    justify-content: center;
}



.properties-add-btn-accented-fullwidth .metadata-add-button.text-icon-button {
    background-color: hsla(var(--interactive-accent-hsl), 0.2) !important;
    color: var(--color-accent);

    width: 100%;
    padding: 6px 8px;

    display: flex;
    align-items: center;
    justify-content: center;
    
    border-radius: var(--button-radius);
    corner-shape: var(--corner-shape);

    transition: 0.2s ease background-color;
}

.properties-add-btn-accented-fullwidth .metadata-add-button.text-icon-button:hover {
    background-color: hsla(var(--interactive-accent-hsl), 0.3) !important;
    color: var(--color-accent);
}

.properties-add-btn-accented-fullwidth .metadata-add-button.text-icon-button:hover .text-button-icon {
    color: var(--color-accent);
}



.properties-add-btn-hidden .metadata-add-button.text-icon-button {
    display: none;
}



.workspace-leaf-content[data-type="file-properties"] .metadata-add-button.text-icon-button {
    background-color: hsla(var(--interactive-accent-hsl), 0.2) !important;
    color: var(--color-accent);

    width: 100%;
    padding: 6px 8px;

    display: flex;
    align-items: center;
    justify-content: center;
    
    border-radius: var(--button-radius);
    corner-shape: var(--corner-shape);

    transition: 0.2s ease background-color;
}

.workspace-leaf-content[data-type="file-properties"] .metadata-add-button.text-icon-button:hover {
    background-color: hsla(var(--interactive-accent-hsl), 0.3) !important;
    color: var(--color-accent);
}

.workspace-leaf-content[data-type="file-properties"] .metadata-add-button.text-icon-button:hover .text-button-icon {
    color: var(--color-accent);
}

.is-tablet .workspace-drawer .clickable-icon:not(.nav-action-button) {
    background-color: var(--background-secondary-alt);
    color: var(--text-normal);
}

.is-tablet .nav-buttons-container {
    margin-top: 10px;
}

.is-tablet .workspace-drawer {
    border-radius: var(--touch-radius-xl) !important;
    corner-shape: var(--corner-shape);
    border: 2px solid var(--background-modifier-border-focus) !important;
}

body {
    --mobile-font-size: "14px";
}

body.cm-sizer {
    font-size: var(--mobile-font-size) !important;
}

body {
    --clickable-icon-radius: var(--button-radius);
    --touch-radius-xxs: calc(var(--button-radius) * 1.25);
    --touch-radius-xs: calc(var(--button-radius) * 1.5);
    --touch-radius-s: calc(var(--button-radius) * 1.75);
    --touch-radius-m: calc(var(--button-radius) * 2);
    --touch-radius-l: calc(var(--button-radius) * 2.5);
    --touch-radius-xl: calc(var(--button-radius) * 3);
    --view-header-action-radius: var(--button-radius);
    --tab-switcher-preview-shadow: 0 0 0 0 #0000;
    --tab-switcher-preview-shadow-active: 0 0 0 0 #0000;
}

body.is-mobile, .body.is-phone {

.workspace-drawer-header {
    order: -1;
    margin-bottom: 10px;
}


.workspace-drawer-header,
.workspace-tab-header-inner,
.workspace-drawer-tab-options,
.workspace-drawer-tab-options-list {
    transition: all 0.2s ease;
}


.workspace-drawer-tab-options-list {
    border-radius: calc(var(--button-radius) + 8px) !important;
    corner-shape: var(--corner-shape) !important;

    

    margin-top: 6px; margin-bottom: 6px;

    transition: all 0.2s ease;
}

.workspace-drawer-tab-options .workspace-tab-header.is-active .workspace-tab-header-inner {
    border: 2px solid var(--text-faint);
}


.workspace-drawer-tab-options.is-collapsed
> .workspace-tab-header.workspace-drawer-tab-select
> .workspace-tab-header-inner {
    border: 2px solid var(--background-modifier-border-focus);
}


.workspace-drawer-tab-options:not(.is-collapsed)
> .workspace-tab-header
> .workspace-tab-header-inner {
    border: 2px solid var(--background-modifier-border-focus);
}

body.is-mobile .workspace-drawer-tab-options:not(.is-collapsed)
> .workspace-tab-header
> .workspace-tab-header-inner {
    border-top-left-radius: 0;
    border-top-right-radius: 0;

    border: 2px solid var(--background-modifier-border-focus);
}


.workspace-drawer-tab-options-list:not(.is-collapsed) {
    border: 2px solid var(--background-modifier-border-focus);
}
}


.is-tablet .view-actions {
    height: 45px;
}

.is-tablet .view-action.clickable-icon {
    margin: 0 !important;
    padding: 0;
}










.is-mobile .view-header {
    border-bottom: 0;
}

.is-mobile .view-actions {
    border-radius: var(--button-radius) !important;
    corner-shape: var(--corner-shape) !important;
    border: 2px solid var(--background-modifier-border-focus) !important;
}

.is-mobile .clickable-icon {
    border-radius: var(--button-radius) !important;
    corner-shape: var(--corner-shape) !important;
}

.is-mobile .view-action.clickable-icon {
    border: 2px solid var(--background-modifier-border-focus);
    width: 48px;
}

.is-mobile .view-actions .clickable-icon.view-action {
    border: none !important;
}

.is-mobile .view-actions {
    background-color: var(--interactive-normal) !important;
}

.is-tablet .view-actions {
    margin-top: 3px;
}

.is-mobile .view-header {
    background-color: transparent;
    background: transparent;
}

.is-tablet .clickable-icon.view-action {
    height: 100%;
}

.is-mobile .view-actions {
    padding: 0 !important;
}


.is-mobile .view-actions button:nth-child(3),
.is-tablet .view-actions button:nth-child(3) {
    box-shadow: -2px 0 0 var(--shadow-color);
    border-radius: 0 !important;
    max-width: 30px;
    border-left: 2px solid var(--shadow-color);
}


.is-mobile {
    --shadow-color: var(--background-modifier-border-focus);
}

.is-tablet {
    --shadow-color: var(--tab-float-border-color);
}


.is-mobile .view-actions button:hover:nth-child(3),
.is-tablet .view-actions button:hover:nth-child(3) {
    border-radius: var(--button-radius) !important;
    box-shadow: 0 0 0 var(--shadow-color);
}


.is-mobile .view-actions button:nth-child(2):hover + button:nth-child(3),
.is-tablet .view-actions button:nth-child(2):hover + button:nth-child(3) {
    box-shadow: 0 0 0 var(--shadow-color);
    border-radius: var(--button-radius) !important;
    border-left: 0;
}




.is-mobile .mobile-navbar {
    background-color: var(--background-secondary-alt);
    border-top: 2px solid var(--background-modifier-border-focus) !important;
    border-radius: 0 !important;
    corner-shape: sharp !important;
    min-width: 100%;
    bottom: 0% !important;
    padding: 0 10px;
}

.is-floating-nav .mobile-navbar {
    margin-bottom: 0;
}



.mobile-toolbar-options-list-container {
    bottom: 0;
    margin: 0;
    padding: 0;
    border-radius: calc(var(--button-radius) + 4px) !important;
    corner-shape: var(--corner-shape);
}

.mobile-toolbar-options-list {
    background-color: var(--interactive-normal) !important;
    border-radius: calc(var(--button-radius) + 4px) !important;
    corner-shape: var(--corner-shape);
    border: 2px solid var(--background-modifier-border-focus);
}






.is-tablet .mobile-toolbar {
    margin-top: -10px;
}

.is-tablet .view-actions {
    margin-top: 2.5px;
}

.mobile-tab-switcher-menubar {
    background-color: var(--background-primary);
}



.calendar-hide-nav .right-nav {
    opacity: 0;
    transition: opacity 0.2s ease;
}
.calendar-hide-nav .right-nav:hover {
    opacity: 1;
}


.calendar-today-mono .day.today.svelte-q3wqg9 {
    background-color: var(--background-secondary-alt);
    color: var(--text-normal);
}
.calendar-today-accent .day.today.svelte-q3wqg9 {
    background-color: hsla(var(--interactive-accent-hsl), 0.2);
    color: var(--interactive-accent);
}
.calendar-today-mono-border .day.today.svelte-q3wqg9 {
    background-color: var(--background-secondary-alt);
    border: 1.5px solid var(--background-modifier-border-focus) !important;
    color: var(--text-normal);
}
.calendar-today-accent-border .day.today.svelte-q3wqg9 {
    background-color: hsla(var(--interactive-accent-hsl), 0.2);
    border: 1.5px solid hsla(var(--interactive-accent-hsl), 0.4) !important;
    color: var(--interactive-accent);
}
.calendar-today-solid .day.today.svelte-q3wqg9 {
    background-color: hsla(var(--interactive-accent-hsl), 1);
    border: 1.5px solid hsla(var(--interactive-accent-hsl), 1) !important;
    color: var(--text-on-accent);
    font-weight: 900;
}



.calendar-no-lines .workspace-leaf-content[data-type="calendar"] .view-content {
    thead,
    tbody {
        background-color: transparent !important;
    }
}

.calendar-poster .workspace-leaf-content[data-type="calendar"] .view-content,
.calendar-hor-lined .workspace-leaf-content[data-type="calendar"] .view-content,
.calendar-ver-lined .workspace-leaf-content[data-type="calendar"] .view-content,
.calendar-no-lines .workspace-leaf-content[data-type="calendar"] .view-content {
    thead,
    tbody {
        background-color: var(--background-secondary);
        border: 1.5px solid var(--background-modifier-border-hover);
    }
    th,
    td {
        border: 1px solid var(--background-modifier-border-hover);
        outline: none;
    }
    .day.svelte-q3wqg9 {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border-radius: 0px;
        border: 2px solid transparent;
        transition: all 0.2s ease;
    }
    .day.svelte-q3wqg9:hover:not(.adjacent-month) {
        background-color: hsla(var(--interactive-accent-hsl), 0.2);
        border: 1.5px solid hsla(var(--interactive-accent-hsl), 0.4);
        color: var(--interactive-accent);
    }
    .nav .right-nav {
        align-self: flex-end;
        margin-bottom: 3px;
    }
    .reset-button.svelte-1vwr9dd {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .arrow.svelte-156w7na svg {
        color: var(--text-normal);
    }
}


.calendar-hor-lined .workspace-leaf-content[data-type="calendar"] .view-content {
    th,
    td {
        border: none;
        border-bottom: 1.5px solid var(--background-modifier-border-hover);
    }
}
    .calendar-ver-lined .workspace-leaf-content[data-type="calendar"] .view-content {
    th,
    td {
        border: none;
        border-left: 1.5px solid var(--background-modifier-border-hover);
    }
}
.calendar-no-lines .workspace-leaf-content[data-type="calendar"] .view-content {
    thead,
    tbody {
        border: none;
    }
    th,
    td {
        border: none;
    }
    .day.svelte-q3wqg9 {
        border-radius: var(--button-radius);
        corner-shape: var(--corner-shape);
    }
}



.calendar-none {
    th,
    td {
        border: 0px solid transparent;
        outline: none;
    }
}




.calendar-full-height {
    .workspace-leaf-content[data-type="calendar"] .container.svelte-pcimu8 {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        min-height: 0;
        height: 100%;
        box-sizing: border-box;
    }
    .workspace-leaf-content[data-type="calendar"] .container.svelte-pcimu8 table {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        min-height: 0;
        width: 100%;
        height: 100%;
        table-layout: fixed;
    }
    .workspace-leaf-content[data-type="calendar"] .container.svelte-pcimu8 thead tr {
        display: flex;
        width: 100%;
    }
    .workspace-leaf-content[data-type="calendar"] .container.svelte-pcimu8 thead th {
        flex: 1 1 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .workspace-leaf-content[data-type="calendar"] .container.svelte-pcimu8 tbody {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        min-height: 0;
        width: 100%;
    }
    .workspace-leaf-content[data-type="calendar"] .container.svelte-pcimu8 tbody tr {
        flex: 1 1 0;
        display: flex;
        min-height: 0;
        width: 100%;
    }
    .workspace-leaf-content[data-type="calendar"] .container.svelte-pcimu8 tbody td {
        flex: 1 1 0;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 0;
    }
    .workspace-leaf-content[data-type="calendar"] .container.svelte-pcimu8 tbody td .day.svelte-q3wqg9 {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
    }
}



.popover {
    border-radius: var(--button-radius);
    border: 2px solid var(--background-modifier-border-focus)
}



.notice {
    background-color: var(--background-primary);
    color: var(--text-accent);
    border: 2px solid var(--background-modifier-border);
    border-radius: var(--button-radius);
    padding: 20px;
}

.notice-message::before {
    content: "Notice: ";
    color: var(--color-red);
}

.notice,
.notice-container {
    animation-name: notice-in;
    animation-duration: calc(var(--animation-duration) * 1.1667);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 2);
    transform-origin: top center;
    z-index: 2000;
}

@keyframes notice-in {
    0% {
        opacity: 0;
        transform: translateY(-8px) scale(0.96);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}


.modal {
    border-radius: 20px !important;
    border: 2px solid var(--background-modifier-border) !important;
    z-index: 1005;
}





.modal-container {
    transform-origin: center;
    animation-name: modal-open;
    animation-duration: calc(var(--animation-duration) * 0.8333);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.7);
}

@keyframes modal-open {
    0% {
        transform: translateY(18px) scale(0.99);
    }

    65% {
        transform: translateY(-1px) scale(1.01);
    }

    100% {
        transform: translateY(0) scale(1);
    }
}



.prompt {
    border-radius: 20px;
    border: 2px solid var(--background-modifier-border) !important;
}

.suggestion-item {
    border-radius: var(--button-radius);
    corner-shape: var(--corner-shape);
    transition: all 0.2s ease;
}

.suggestion-item.is-selected {
    border-radius: var(--button-radius);
    corner-shape: var(--corner-shape);
    color: var(--color-accent-1);
    background-color: hsl(var(--interactive-accent-hsl), 0.2) !important;
}

.suggestion-item .suggestion-content {
    margin-left: 0;
    transition: margin 0.2s ease;
    transition-delay: margin 0.1s ease;
}

.suggestion-item.is-selected {
    margin: 4px;
    margin-right: 0;
}



input.prompt-input {
    border-radius: 0 !important;
    border-bottom: 2px solid var(--background-modifier-border);
}

input.prompt-input:focus {
    border-radius: 0 !important;
    border-bottom: 2px solid var(--background-modifier-border);
}



.hide-prompt-instructions .prompt-instructions {
    display: none;
}

.hide-prompt-instructions .prompt::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -10px;
    height: 34px;
    pointer-events: none;
    background: linear-gradient(
        to bottom,
        rgb(0, 0, 0, 0),
        var(--background-primary)
    );
}


.horizontal-tab-content, .vertical-tab-content {
    border-radius: var(--button-radius);
}



.tab-float:not(.is-mobile) {
    .sidebar-toggle-button.mod-left {
        background-color: var(--background-primary);
        border-bottom: none;
    }
    
    .workspace-ribbon.side-dock-ribbon.mod-left {
        background-color: var(--background-primary);
        border: none;
    }

    
    .workspace-ribbon.mod-left::before,
    .workspace-ribbon.mod-left::after {
        display: none !important;
        content: none !important;
    }

    .side-dock-actions {
        margin-top: -6px;
    }

}




.side-dock-actions {
    gap: 4px;
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

.side-dock-actions .clickable-icon {
    padding: 6px !important;
}

.workspace-ribbon.side-dock-ribbon:hover .side-dock-actions {
    opacity: 1;
}

.workspace-ribbon.side-dock-ribbon .clickable-icon {
    background-color: transparent;
    transform: scale(0.9);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), background-color 0.2s ease;
}

.workspace-ribbon.side-dock-ribbon .clickable-icon:hover {
    background-color: hsl(var(--interactive-accent-hsl), 0.2) !important;
    color: var(--interactive-accent);
    transform: scale(1);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), background-color 0.2s ease;
}
















.horizontal-tab-nav-item.is-active .vertical-tab-nav-item-icon,
.vertical-tab-nav-item.is-active .vertical-tab-nav-item-icon {
    color: var(--text-on-accent);
    transition: color 0s;
}

body:not(.is-phone) {
    .vertical-tab-nav-item.is-active {
        border-radius: var(--button-radius);
        transition: transform calc(var(--animation-duration) * 0.3333) cubic-bezier(0.175, 0.885, 0.32, 1.5);
        padding: 6px 8px !important;
        text-align: center;
        color: var(--text-on-accent);
        background-color: var(--interactive-accent) !important;
        font-weight: bolder;
        flex-direction: column;
        gap: 3px;
        transform: scaleX(1) translateX(0);
    }

    .vertical-tab-nav-item {
        border-radius: 20px;
        transition: all calc(var(--animation-duration) * 0.3333) ease-out;
    }

    .vertical-tab-nav-item:not(.is-active):hover {
        border-radius: var(--button-radius);
        transform: translateX(6px);
        padding: 8px;
        transition: all calc(var(--animation-duration) * 0.3333) ease-out;
        transition-delay: text-center 4s ease, background-color 2s ease !important;
        background: none !important;
    }

    .vertical-tab-nav-item:not(.is-active) {
        border-radius: var(--button-radius);
        padding: 8px;
    }

    .vertical-tab-nav-item:not(.is-active):active {
        background-color: transparent;
        transform: translateX(30px) !important;
        padding: 10px 8px;
        transition: all calc(var(--animation-duration) * 0.1667);
        flex-direction: row;
    }
}


body.is-phone .vertical-tab-nav-item {
        background-color: var(--interactive-normal);
}

.vertical-tab-group-items {
    border-radius: var(--button-radius);
    corner-shape: var(--corner-shape);
}





.hide-status-bar .status-bar {
    display: none !important;
}

.status-bar {
    border-radius: 14px !important;
    transition: all calc(var(--animation-duration) * 0.6667) cubic-bezier(0.175, 0.885, 0.32, 1.5) !important;

    
    overflow: auto !important;
    opacity: 1;

    

    
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-top-right-radius: 0 !important;
}

.status-bar:hover {
    border-radius: 10px !important;
    padding: 10px 8px !important;
    transition: all calc(var(--animation-duration) * 0.3333) cubic-bezier(0.175, 0.885, 0.32, 1.5);

    
    transform: translateX(0);
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-top-right-radius: 0 !important;
    color: var(--text-normal) !important;
}

.dim-status-bar .status-bar {
    opacity: 0 !important;
}

.dim-status-bar .status-bar:hover {
    opacity: 1 !important;
}


.centered-statusbar {
    .status-bar {
        position: fixed;
        bottom: 0;
        backdrop-filter: blur(15px);
        border-top: 1px solid var(--shade-plus-darker);
        border-left: 1px solid var(--shade-plus-darker);
        border-radius: 5px;
        line-height: 1;
        opacity: 0.5;
        transition: calc(var(--animation-duration) * 0.6667);
        background-color: transparent;
        border: none;
        padding: 8px !important;
        font-size: smaller;

        transform: translate(-50%, 0%) !important;
    }

    .status-bar:hover {
        opacity: 1 !important;
    }

    .workspace-tab-container:has(.cm-scroller) {
        padding-bottom: 34px !important;
    }
}



.setting-item {
    border-radius: var(--touch-radius-xs);
    corner-shape: var(--corner-shape);
}


.setting-item-heading[data-level="1"] .style-settings-collapse-indicator,
.setting-item-heading[data-level="2"] .style-settings-collapse-indicator,
.setting-item-heading[data-level="3"] .style-settings-collapse-indicator,
.setting-item-heading[data-level="4"] .style-settings-collapse-indicator,
.setting-item-heading[data-level="5"] .style-settings-collapse-indicator {
    display: none;

    --icon-color: transparent;
    --icon-size: 0;
}

.style-settings-collapse-indicator {
  display: none;
}


.style-settings-heading {
    border-radius: var(--button-radius);
    corner-shape: var(--corner-shape);
    background-color: var(--background-primary-alt);
    padding: 10px 20px;
    border: 2px solid var(--background-modifier-border);
    margin: 16px 0;
    box-shadow: 0 2px 4px var(--background-modifier-border);
    transition: background-color 0.2s ease, 
                transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 2.275),
                padding 0.2s cubic-bezier(0.175, 0.885, 0.32, 2.275);
    filter: brightness(1.3);
}

.style-settings-heading.is-collapsed {
    padding: 8px 20px;
    box-shadow: 0 2px 2px var(--background-modifier-border);
    filter: brightness(1);
}


.setting-item-heading[data-level="1"] .setting-item-name {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    white-space: nowrap;
    padding-top: 0;
}


.setting-item-heading[data-level="2"] {
    background-color: var(--background-secondary);

    
    border-radius: var(--button-radius);
    corner-shape: var(--corner-shape);
    padding: 8px 16px;
    margin-left: 16px;
    width: calc(100% - 16px);
    filter: brightness(1);
}


.setting-item-heading .setting-item-name::before {
    letter-spacing: 0.1em;
}

.setting-item-heading[data-level="1"] .setting-item-name::before {
    content: "#1 ";
    color: var(--color-red);
}

.setting-item-heading[data-level="2"] .setting-item-name::before {
    content: "#2 ";
    color: var(--color-orange);
}

.setting-item-heading[data-level="3"] .setting-item-name::before {
    content: "#3 ";
    color: var(--color-yellow);
}

.setting-item-heading[data-level="4"] .setting-item-name::before {
    content: "#4 ";
    color: var(--color-green);
}

.setting-item-heading[data-level="5"] .setting-item-name::before {
    content: "#5 ";
    color: var(--color-blue);
}


.setting-item-heading[data-level="3"] {
    background-color: var(--background-primary);
    border-bottom: 2px dotted var(--background-modifier-border);
    border-radius: var(--button-radius);
    corner-shape: var(--corner-shape);
    padding: 6px 12px;
    margin-left: 32px;
    width: calc(100% - 32px);
    font-size: 0.9em;
    filter: brightness(1);
    box-shadow: none;
}


.setting-item-heading[data-level="4"] {
    background: transparent;
    border: none;
    padding: 4px 8px;
    margin-left: 48px;
    width: calc(100% - 48px);
    font-size: 0.85em;
    font-weight: normal;
    box-shadow: none;
    filter: brightness(1);
}


.setting-item-heading[data-level="5"] {
    background: transparent;
    border: none;
    padding: 2px 4px;
    margin-left: 64px;
    width: calc(100% - 64px);
    font-size: 0.8em;
    font-weight: lighter;
    opacity: 0.8;
    box-shadow: none;
    filter: brightness(1);
}






.pickr .pcr-button::after,
.pickr .pcr-button::before,
.pickr,
button.pcr-button {
    border-radius: 50%;
    border: none;
}

.pcr-app {
    background: var(--background-primary);
    border: 3px solid var(--background-modifier-border);
    border-radius: 10px;
}

.pcr-palette,
.pcr-palette::before,
.pcr-palette::after {
    border-radius: 8px;
}

.pcr-result {
    background-color: var(--background-modifier-form-field);
}

.pcr-swatches button {
    border-radius: 50%;
}

.button-bordered .pickr button {
    border: none;
    background-color: none;
    background: none;
    box-shadow: none;
}







.is-mobile .workspace .mod-root .workspace-tab-header .workspace-tab-header-inner-close-button {
    border-radius: var(--button-radius);
    corner-shape: var(--corner-shape);
    padding: 4px;
} 

body:not(.is-mobile) .workspace .mod-root .workspace-tab-header .workspace-tab-header-inner-close-button {
    border-radius: var(--button-radius);
    corner-shape: var(--corner-shape);
    display: flex !important;
    z-index: 1001 !important;
    
    transform: scale(0.1);
    opacity: 0;
    width: 0;
    order: -1;

    margin-left: -8px;
    margin-right: 2px;
    
    transition:
        transform calc(var(--animation-duration) * 0.6667) cubic-bezier(0.34, 1.56, 0.64, 1),
        opacity calc(var(--animation-duration) * 0.6667) ease-out,
        width calc(var(--animation-duration) * 0.6667) ease-out,
        margin-left calc(var(--animation-duration) * 0.6667) ease-out !important;
    pointer-events: none;
    border: 2px solid transparent;
} 


.workspace-tab-header-inner-close-button {
    transform: scale(0.9) !important;
}

.workspace-tab-header-inner-close-button:hover {
    background-color: var(--background-modifier-hover) !important;
    border-radius: calc(var(--button-radius) + 2px) !important;
    corner-shape: var(--corner-shape);
}


.workspace .mod-root .workspace-tab-header.is-active:hover .workspace-tab-header-inner-close-button {
    transform: scale(0.9);
    opacity: 1;
    width: auto;
    margin-left: -4px !important;
    margin-top: 1px;
    margin-bottom: 1px;
    pointer-events: auto;
}


.workspace .mod-root .workspace-tab-header:hover .workspace-tab-header-inner-close-button {
    transform: scale(0.9);
    opacity: 1;
    width: auto;
    margin-left: -2px !important;
    pointer-events: auto;
}

.workspace-tab-header:not(.is-active) .workspace-tab-header-inner-close-button {
    margin-left: -2px !important;
}



body.tab-full-width .mod-root .workspace-tabs:not(.mod-stacked) .workspace-tab-header-container-inner { 
    flex:100%;
}

body.tab-width {
    --tab-width: 200px;
}

   
.tab-title-center .workspace-tab-header-inner-title {
   text-align: center;
}


.hide-tab-close-button .workspace-tab-header-inner-close-button {
   display: none;
}


.tab-float-border-none {
    --tab-float-border-color: none;
}

.tab-float-border-less {
    --tab-float-border-color: var(--background-modifier-border);
}

.tab-float-border-hover {
    --tab-float-border-color: var(--background-modifier-border-hover);
}

.tab-float-border-focus {
    --tab-float-border-color: var(--background-modifier-border-focus);
}




body:is(.is-mobile):not(.is-tablet) .prompt, .modal {
    border-radius: calc(var(--touch-radius-m) + 2px) !important;
    corner-shape: var(--corner-shape);
}

body:is(.is-mobile):not(.is-tablet) .prompt-input-container {
    border-radius: var(--touch-radius-m);
    corner-shape: var(--corner-shape);
    border: 2px solid var(--background-modifier-border-focus) !important;
}

body:is(.is-mobile):not(.is-tablet) .prompt-input {
    border-radius: var(--touch-radius-m) !important;
    corner-shape: var(--corner-shape);
    border: none !important;
}


body {
    --titlebar-background-focused: var(--titlebar-background) !important;
}


.workspace .mod-root .workspace-tab-header-inner::after { display: none; }


.workspace-tab-header .workspace-tab-header-inner-close-button {
  border-radius: var(--button-radius) !important;
  corner-shape: var(--corner-shape);
}



body.tab-joined,
body:not(.tab-none, .tab-float, .tab-lined, .tab-contained) {
  --system-status-background: var(--titlebar-background);

  
  .workspace .mod-root .workspace-tab-header-container .workspace-tab-header.is-active:hover .workspace-tab-header-inner-close-button {
    transform: scale(0.9);
    opacity: 1;
    width: auto;
    margin-left: -4px !important;
    margin-bottom: 4px;
    pointer-events: auto;
  }

  
  .workspace-tab-header-container {
    border-bottom: none;
    background-color: var(--tab-container-background);
    box-shadow: inset 0 -1px 0 var(--tab-outline-color);
  }

  
  .workspace-tab-header-container .workspace-tab-header {
    margin: 0;

    --tab-curve: 0px;
    border-radius: var(--button-radius) var(--button-radius) 0 0;
    padding-left: 0;
    box-shadow: 0 0 0 1px transparent;
    transition: background-color 0.2s ease, transform 0.4s cubic-bezier(0.2, 0.9, 0.4, 1.2),
                padding 0.4s cubic-bezier(0.2, 0.9, 0.4, 2.1), margin 0.4s cubic-bezier(0.2, 0.9, 0.4, 1.6);
  }

  
  .workspace-tab-header-container .workspace-tab-header:active {
    background-color: var(--background-primary);
    border: 2px solid var(--background-modifier-border);
    transform: scale(0.8) !important;
    border-radius: calc(var(--button-radius) + 2px) !important;
    corner-shape: var(--corner-shape);
  }

  
  .mod-left-split .workspace-tab-header-container .workspace-tab-header.is-active,
  .mod-right-split .workspace-tab-header-container .workspace-tab-header.is-active,
  .mod-root .workspace-tab-header-container .workspace-tab-header.is-active {
    margin: 5px 5px -10px;
    padding: 2px 2px 4px;
    border-radius: var(--button-radius) var(--button-radius) 0 0;
    corner-shape: var(--corner-shape);
    border: 1.5px solid var(--background-modifier-border);
    transition: background-color 0.2s ease, transform 0.4s cubic-bezier(0.2, 0.9, 0.4, 2.1),
                padding 0.4s cubic-bezier(0.2, 0.9, 0.4, 2.1), margin 0.4s cubic-bezier(0.2, 0.9, 0.4, 1.6);
  }

  .workspace-tab-header-container-inner {
    margin-top: 8px;
  }

  
  .workspace-tab-header-container .workspace-tab-header:not(.is-active):hover {
    transform: translateY(0);
    opacity: 1;
  }

  .workspace-tab-header-container .workspace-tab-header:not(.is-active) {
    transform: translateY(8px);
    opacity: 0.6;
  }

  
  .workspace .mod-left-split .workspace-tab-header-container .workspace-tab-header:active {
    z-index: 1001 !important;
  }

  
  .workspace .mod-left-split .workspace-tab-header-container .workspace-tab-header:not(.is-active) .workspace-tab-header-inner,
  .workspace .mod-right-split .workspace-tab-header-container .workspace-tab-header:not(.is-active) .workspace-tab-header-inner {
    transform: translateY(4px);
  }

  
  .workspace-tab-header-container .workspace-tab-header:not(.is-active) .workspace-tab-header-inner {
    transform: translateY(0);
    height: 100%;
    margin-right: 2px;
    margin-left: 2px;
    margin-top: -2px;
    transition: all calc(var(--animation-duration) * 1.2) cubic-bezier(0.2, 0.9, 0.4, 1.1), background-color 0s ease;
  }

  .workspace-tab-header-container .workspace-tab-header:not(.is-active) .workspace-tab-header-inner:hover {
    background-color: var(--background-primary-alt);
    transition: all calc(var(--animation-duration) * 1.2) ease-out;
    border-radius: var(--button-radius);
    corner-shape: var(--corner-shape);
  }

  .workspace-tab-header-container .workspace-tab-header:not(.is-active) .workspace-tab-header-inner:active {
    background-color: var(--background-primary);
    border-radius: var(--button-radius);
    corner-shape: var(--corner-shape);
    padding: 10px 6px;
    padding-top: -10px;
    transform: scale(0.9) translateY(4px);
    transition: all 0.2s cubic-bezier(0.2, 0.9, 0.4, 1.1);
  }

  .workspace-split.mod-vertical.mod-root .workspace-tab-header-container .workspace-tab-header:not(.is-active, :has(.mod-pinned)) {
    margin-left: 0;
    margin-right: -3px;
  }

  
  .workspace-split:not(.mod-vertical.mod-root) .workspace-tab-header-container .workspace-tab-header.is-active {
    padding-top: 5px !important;
  }

  
  .workspace-split.mod-vertical.mod-root .workspace-tab-header-container .workspace-tab-header.is-active {
    padding-top: 0 !important;
  }

  .workspace-tab-header-container .workspace-tab-header .workspace-tab-header-inner {
    transition: all calc(var(--animation-duration) * 1.2) cubic-bezier(0.2, 0.9, 0.4, 1.1);
  }

  
  .workspace-split.mod-left-split .workspace-tab-header-container .workspace-tab-header.is-active,
  .workspace-split.mod-right-split .workspace-tab-header-container .workspace-tab-header.is-active {
    background-color: var(--background-secondary);
  }
}



.tab-float {
  --system-status-background: var(--background-primary);

  .workspace-leaf-content {
    border-radius: var(--touch-radius-s);
    corner-shape: var(--corner-shape)
  }

  
  .workspace .mod-root .workspace-tab-header-container .workspace-tab-header:hover .workspace-tab-header-inner-close-button {
    margin-left: -6px !important;
  }

  
  .workspace-tab-header-container .workspace-tab-header-inner {
    background-color: transparent !important;
  }

  .workspace-tab-header-container .workspace-tab-header {
    --tab-curve: 0px;
    border-radius: var(--button-radius);
    corner-shape: var(--corner-shape);
    filter: brightness(1);
    margin-top: 1px;
    margin-bottom: 8px;
    margin-right: 4px;
    padding: 2px 3px;
    transform: translateY(0) scale(0.98);
    transition: background-color 0.2s ease, box-shadow 0.2s ease,
                transform 0.4s cubic-bezier(0.2, 0.9, 0.4, 1.4),
                padding 0.4s cubic-bezier(0.2, 0.9, 0.4, 2.1),
                margin 0.4s cubic-bezier(0.2, 0.9, 0.4, 1.6);
  }

  .workspace-tab-header-container .workspace-tab-header.is-active {
    min-height: 24px;
    background-color: var(--background-primary-alt);
    box-shadow: 0 0 0 1.6px var(--tab-float-border-color);
    margin: 1px 10px 8px;
    padding: 2px 3px;
    transform: translateY(1px) scale(1);
  }

  .workspace .mod-left-split .workspace-tab-header-container .workspace-tab-header.is-active {
    margin: 0 3px;
    padding: 2px 3px;
    margin-left: 10px !important;
  }

  .workspace-tab-header-container .workspace-tab-header:not(.is-active) {
    transform: translateY(4px);
  }

  .workspace-tab-header-container .workspace-tab-header:not(.is-active):hover {
    background-color: var(--background-primary-alt);
    box-shadow: 0 0 0 1.6px var(--tab-float-border-color);
    padding: 2px;
    transform: translateY(1px) scale(0.9);
  }

  .workspace-tab-header-container .workspace-tab-header:not(.is-active):active {
    background-color: var(--background-primary-alt);
    box-shadow: 0 0 0 1.6px var(--tab-float-border-color);
    transform: translateY(1px) scale(0.8);
  }

  
  &.theme-dark .workspace-tab-header-container .workspace-tab-header:not(.is-active):hover,
  &.theme-dark .workspace-tab-header-container .workspace-tab-header:not(.is-active):active {
    filter: brightness(1.4);
  }

  &.theme-light .workspace-tab-header-container .workspace-tab-header:not(.is-active):hover,
  &.theme-light .workspace-tab-header-container .workspace-tab-header:not(.is-active):active {
    filter: brightness(1.1);
  }

  
  .workspace-split.mod-left-split .workspace-tab-header-container .workspace-tab-header,
  .workspace-split.mod-right-split .workspace-tab-header-container .workspace-tab-header,
  .workspace-split.mod-left-split,
  .workspace-split.mod-left-split .workspace-tab-header-container .workspace-tab-header:not(.is-active):hover,
  .workspace-split.mod-right-split .workspace-tab-header-container .workspace-tab-header:not(.is-active):hover {
    border-radius: var(--button-radius);
    corner-shape: var(--corner-shape);
    height: 100%;
  }

  
  .workspace-split.mod-root .workspace-tab-header-container .workspace-tab-header {
    margin-left: 0 !important;
  }

  
  .workspace-tab-header-container .workspace-tab-header.is-active,
  .workspace-split.mod-left-split .workspace-tab-header-container .workspace-tab-header.is-active,
  .workspace-split.mod-right-split .workspace-tab-header-container .workspace-tab-header.is-active {
    border-radius: var(--button-radius);
    corner-shape: var(--corner-shape);
    background-color: var(--background-primary-alt) !important;
  }

  
  .workspace-tab-header-container {
    border: none;
    background-color: var(--background-primary);
    margin-bottom: -4px;
  }

  .workspace-tab-container {
    margin: 6px;
    border: 2px solid var(--tab-float-border-color);
    border-radius: var(--modal-radius);
    corner-shape: var(--corner-shape);
  }

  .workspace-tabs {
    background-color: var(--background-primary);
  }

  
  .workspace-leaf, .workspace-leaf-content, .cm-scroller, .workspace-leaf-content .view-header, .empty-state {
    --file-header-background-focused: var(--background-primary-alt);
    background-color: var(--background-primary-alt);
  }

  
  .markdown-reading-view .markdown-preview-view {
    --file-header-background-focused: var(--background-primary-alt);
    background-color: var(--background-primary-alt);
  }

  .titlebar-button-container {
    background-color: var(--background-primary) !important;
  }

  .workspace-sidedock-vault-profile {
    border-top: 0;
    background-color: var(--background-primary) !important;
    margin-top: -8px;
  }

  
  .workspace-split:not(.mod-vertical.mod-root) .workspace-tab-header-container .workspace-tab-header {
    margin-top: 2px !important;
    margin-left: 0;
    margin-right: 0;
    transition: background-color 0.2s ease, transform 0.4s cubic-bezier(0.2, 0.9, 0.4, 1.2),
                padding 0.4s cubic-bezier(0.2, 0.9, 0.4, 2.1), margin 0.4s cubic-bezier(0.2, 0.9, 0.4, 1.6) !important;
  }

  .workspace-split:not(.mod-vertical.mod-root) .workspace-tab-header-container .workspace-tab-header:not(.is-active):hover {
    transform: translateY(-2px) scale(0.9) !important;
    margin-left: 4px;
    margin-right: 4px;
  }

  .workspace-split:not(.mod-vertical.mod-root) .workspace-tab-header-container .workspace-tab-header:not(.is-active):active {
    transform: translateY(1px) scale(0.8) !important;
  }

  .workspace-split:not(.mod-vertical.mod-root) .workspace-tab-header-container .workspace-tab-header.is-active {
    margin-top: 2px !important;
    margin-left: 4px !important;
    margin-right: 4px !important;
    transform: translateY(1px) scale(1) !important;
    transition: background-color 0.2s ease, transform 0.4s cubic-bezier(0.2, 0.9, 0.4, 1.2),
                padding 0.4s cubic-bezier(0.2, 0.9, 0.4, 2.1), margin 0.4s cubic-bezier(0.2, 0.9, 0.4, 1.6) !important;
  }

  
  .workspace-split.mod-left-split .workspace-tab-header-container-inner {
    width: 100%;
    padding-left: 4px;
  }
}


.is-mobile .workspace-drawer-active-tab-content .workspace-leaf,
.is-mobile .workspace-drawer-active-tab-content .workspace-leaf-content,
.is-mobile .workspace-drawer-active-tab-content .cm-scroller,
.is-mobile .workspace-drawer-active-tab-content .view-header,
.is-mobile .workspace-drawer-active-tab-content .empty-state {
  --file-header-background-focused: var(--background-secondary);
  background-color: var(--background-secondary) !important;
}



body:is(.is-tablet):is(.tab-joined) .workspace-tab-header.is-active,
body:is(.is-tablet):is(.tab-joined) .view-header:not(.is-mobile) {
  background-color: var(--background-primary) !important;
}


body:is(.is-tablet):not(.compact-tabs, .tab-none) .workspace-tab-header-container {
  height: 50px;
}


body:is(.is-tablet):not(.compact-tabs, .tab-none) .workspace-tab-header.is-active .workspace-tab-header-inner {
  margin: auto 5px;
}


body:is(.is-tablet):is(.tab-float) .view-header {
  background-color: var(--background-primary-alt) !important;
  border-bottom: 2px solid var(--tab-float-border-color);
}


body:is(.is-tablet):is(.tab-joined) .view-header {
  border-bottom: 2px solid var(--background-modifier-border-hover);
}


body:is(.tab-float):not(.is-mobile) .view-header {
  background-color: var(--background-primary-alt) !important;
  border-bottom: 2px solid var(--background-modifier-border);
}


body:is(.tab-joined):not(.is-mobile) .view-header {
  border-bottom: 2px solid var(--background-modifier-border-hover);
}







body.tab-lined {
    

    

    
    .workspace-tab-header.is-active
        .workspace-tab-header-inner-icon,
    .workspace-tab-header:active
        .workspace-tab-header-inner-icon {
        filter: brightness(1);

        --icon-color: var(--text-normal);
        color: var(--text-normal);
    }

    
    .workspace-tab-header-container .workspace-tab-header,
    .workspace-tab-header-container .workspace-tab-header.is-active {
        --tab-curve: 0px;
        background-color: transparent;
        box-shadow: none;
        transition: background-color 0.2s ease-out, box-shadow 0.2s ease-out,
                transform 0.4s cubic-bezier(0.2, 0.9, 0.4, 1.4),
                padding 0.4s cubic-bezier(0.2, 0.9, 0.4, 2.1),
                margin 0.4s cubic-bezier(0.2, 0.9, 0.4, 1.6);
    }

    .workspace-tab-header-container .workspace-tab-header.is-active {
        border-bottom: 2px solid var(--color-accent);
        background: 
            linear-gradient(to bottom, 
            var(--titlebar-background), 
            hsl(var(--interactive-accent-hsl), 0.2));
            
        padding-bottom: 0;
        border-radius: 0;
    }

    body:is(.compact-tabs) .workspace-tab-header-container .workspace-tab-header.is-active .workspace-tab-header-inner {
        padding-bottom: 4px;
    }

    .workspace-tab-header-container 
    .workspace-tab-header:not(.is-active) .workspace-tab-header-inner {
        border-radius: 0;
        background: 
            linear-gradient(to bottom, 
            var(--titlebar-background), 
            var(--titlebar-background));

        border-bottom: 2px solid hsl(var(--interactive-accent-hsl), 0);
        transform: translateY(2px);
        transition: all 0.2s ease-out;
    }

    .workspace-tab-header-container 
    .workspace-tab-header:not(.is-active):hover .workspace-tab-header-inner {
        background: 
            linear-gradient(to bottom, 
            var(--titlebar-background), 
            hsl(var(--interactive-accent-hsl), 0.1));
        border-bottom: 2px solid hsl(var(--interactive-accent-hsl), 0.1);
        transform: translateY(-2px);
    }

    .workspace-tab-header-container 
    .workspace-tab-header:not(.is-active):active .workspace-tab-header-inner {
        background: 
            linear-gradient(to bottom, 
            var(--titlebar-background), 
            hsl(var(--interactive-accent-hsl), 0.2));
        color: var(--text-normal);

        --icon-color: ar(--text-normal) !important;
        border-bottom: 2px solid hsl(var(--interactive-accent-hsl), 1);
        transform: translateY(4px);
    }

    
    .workspace-split:not(.mod-vertical.mod-root) 
    .workspace-tab-header-container-inner .workspace-tab-header {
        margin-bottom: -7px;
    }

    .workspace-split:not(.mod-vertical.mod-root) 
    .workspace-tab-header-container 
    .workspace-tab-header:not(.is-active):hover .workspace-tab-header-inner {
        transform: translateY(-4px);
    }

    .workspace-split:not(.mod-vertical.mod-root) 
    .workspace-tab-header-container 
    .workspace-tab-header:not(.is-active):active .workspace-tab-header-inner {
        transform: translateY(0);
    }
}









.tab-contained {
    .workspace-tab-header-container .workspace-tab-header,
    .workspace-tab-header-container .workspace-tab-header.is-active {
        --tab-curve: 0px;

        
    }

    .workspace-tab-header-container {
        padding: 4px;
        height: 50px;
    }

    .workspace-tab-header-container-inner {
        margin-top: 0;
        margin-left: 5px;
        padding-left: 0 !important;

        margin-right: 10px;
        padding-right: 0 !important;

        border-radius: var(--touch-radius-xs);
        corner-shape: var(--corner-shape);
        background-color: var(--background-secondary-alt);

        transition: background-color 0.2s ease-out, box-shadow 0.2s ease-out,
                transform 0.4s cubic-bezier(0.2, 0.9, 0.4, 1.4),
                padding 0.4s cubic-bezier(0.2, 0.9, 0.4, 2.1),
                margin 0.4s cubic-bezier(0.2, 0.9, 0.4, 1.6);
    }

    .workspace-tab-header-container .workspace-tab-header.is-active {
        margin-top: 2px !important;
        margin-bottom: 3px !important;
        margin-left: 4px;
        margin-right: 4px;
        border-radius: var(--touch-radius-xxs);

        transition: background-color 0.2s ease-out, box-shadow 0.2s ease-out,
                transform 0.4s cubic-bezier(0.2, 0.9, 0.4, 1.4),
                padding 0.4s cubic-bezier(0.2, 0.9, 0.4, 2.1),
                margin 0.4s cubic-bezier(0.2, 0.9, 0.4, 1.6);
    }

    .workspace-tab-header-container .workspace-tab-header-inner {
        border-radius: var(--touch-radius-xxs);
    }
}


body:is(.tab-contained):is(.compact-tabs) {
    --header-height: 25px;
    
    .workspace-tab-header-container {
        padding: 4px;
        height: 32px;
    }

    .workspace-tab-header-container .workspace-tab-header.is-active .workspace-tab-header-inner {
        margin-top: -2px;
    }

    .workspace-tab-header-container .workspace-tab-header .workspace-tab-header-inner {
        margin-top: 1px;
    }

    
    .workspace-split:not(.mod-vertical.mod-root) 
    .workspace-tab-header-container-inner {
        padding-left: 4px !important;
        padding-right: 4px !important;    
    }

    .workspace-split:not(.mod-vertical.mod-root) 
    .workspace-tab-header-container .workspace-tab-header:not(.is-active) .workspace-tab-header-inner {
        margin-top: 2px !important;
        transition: background-color 0.2s ease, transform 0.4s cubic-bezier(0.2, 0.9, 0.4, 1.2),
                    padding 0.4s cubic-bezier(0.2, 0.9, 0.4, 2.1), margin 0.4s cubic-bezier(0.2, 0.9, 0.4, 1.6) !important;
    }

    .workspace-split:not(.mod-vertical.mod-root) 
    .workspace-tab-header-container .workspace-tab-header.is-active {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .workspace-split.mod-left-split .workspace-tab-header,
    .workspace-split.mod-right-split .workspace-tab-header,
    .workspace-split.mod-left-split .workspace-tab-header.is-active,
    .workspace-split.mod-right-split .workspace-tab-header.is-active,
    .workspace-split.mod-left-split .workspace-tab-header:not(.is-active):hover,
    .workspace-split.mod-right-split .workspace-tab-header:not(.is-active):hover {
        height: 18.5px !important;
        width: 30px;
        padding: auto;
        overflow: visible !important;
    }
}











.workspace-tab-header-status-container {
    z-index: 1001 !important;
}


body.pin-icon-only .workspace-tab-header:has(.mod-pinned) {
    --tab-max-width: 40px !important;

        

    
}

.pin-icon-only .workspace-tab-header:has(.mod-pinned) .workspace-tab-header-inner-title {
    display: none;
}

.pin-icon-only .workspace-tab-header:has(.mod-pinned) .workspace-tab-header-inner-close-button {
    display: none !important;
}

.pin-icon-only .workspace-tab-header:has(.mod-pinned) .workspace-tab-header-status-icon {
    margin-right: 3.5px;
    pointer-events: none;
}

.pin-icon-only .workspace-tab-header.is-active:has(.mod-pinned) .workspace-tab-header-status-icon {
    margin-right: 2.5px;
}


body.pin-icon-only .workspace-tab-header:has(.mod-pinned) 
.workspace-tab-header-inner-close-button,
body.pin-icon-only .workspace-tab-header:has(.mod-pinned):hover 
.workspace-tab-header-inner-close-button {
    display: none !important;
}


.workspace-tab-header-status-container { z-index: 1001 !important; }

.pin-icon-only .workspace .mod-root .workspace-tab-header:has(.mod-pinned) .workspace-tab-header-inner-close-button {
    display: none !important;
}

.pin-icon-only .workspace-tab-header:has(.mod-pinned) .workspace-tab-header-inner {
    transition: transform calc(var(--animation-duration) * 1) cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;
}

.pin-icon-only .workspace-tab-header:has(.mod-pinned) .workspace-tab-header-inner .workspace-tab-header-inner-icon {
    transform: scale(1) rotate(0deg);
    transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;
}

.pin-icon-only .workspace-tab-header:has(.mod-pinned) .workspace-tab-header-inner:hover .workspace-tab-header-inner-icon {
    transform: scale(1.1) rotate(5deg);
    transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;
}

.pin-icon-only .workspace-tab-header-inner:has(.mod-pinned):has(.workspace-tab-header-inner-icon.iconic-icon) .workspace-tab-header-status-container {
    z-index: 1001 !important;
    display: none;
}





.workspace-tab-header-tab-list {
    order: -1;
    margin-left: 0;
    margin-right: 0;
    gap: 4px;
}

body:not(.disable-fixed-newtab) {
    
    .workspace-tab-header-new-tab {
        
        margin-right: 6px;
        background: transparent;
        order: 999; 

        
        flex: 0 0 auto;
    }

    
    .sidebar-toggle-button.mod-right {
        order: 1000;
        flex: 0 0 auto;
        align-self: center;
        background: transparent;
        box-shadow: none;
        height: 24px;
        width: 24px;
        padding: 0;
    }
}


body.fixed-left-sidebar-button .sidebar-toggle-button.mod-left {
    order: -1;
    margin-right: 8px;
}




body.tab-top-left-labels .mod-sidedock.mod-left-split .workspace-tabs.mod-top-left-space {
    --sidebar-tab-text-display: inline-block;
}

body.tab-top-left-labels .mod-sidedock.mod-left-split .workspace-tabs.mod-top-left-space .workspace-tab-header-inner-icon {
    display: none;
}

body.tab-top-left-labels .mod-sidedock.mod-left-split .workspace-tabs.mod-top-left-space .workspace-tab-header-inner-title {
    display: inline-block !important;
}

body.tab-top-left-labels .mod-sidedock.mod-left-split .workspace-tabs.mod-top-left-space .workspace-tab-header-inner {
    width: auto !important;
}


body.tab-top-left-icons-labels .mod-sidedock.mod-left-split .workspace-tabs.mod-top-left-space {
    --sidebar-tab-text-display: inline-block;
}

body.tab-top-left-icons-labels .mod-sidedock.mod-left-split .workspace-tabs.mod-top-left-space .workspace-tab-header-inner-title {
    display: inline-block !important;
}

body.tab-top-left-icons-labels .mod-sidedock.mod-left-split .workspace-tabs.mod-top-left-space .workspace-tab-header-inner {
    width: auto !important;
    gap: 6px;
}


body.tab-top-left-icons .mod-sidedock.mod-left-split .workspace-tabs.mod-top-left-space .workspace-tab-header-inner-title {
    display: none !important;
}




body.tab-top-right-labels .mod-sidedock.mod-right-split .workspace-tabs.mod-top-right-space {
    --sidebar-tab-text-display: inline-block;
}

body.tab-top-right-labels .mod-sidedock.mod-right-split .workspace-tabs.mod-top-right-space .workspace-tab-header-inner-icon {
    display: none;
}

body.tab-top-right-labels .mod-sidedock.mod-right-split .workspace-tabs.mod-top-right-space .workspace-tab-header-inner-title {
    display: inline-block !important;
}

body.tab-top-right-labels .mod-sidedock.mod-right-split .workspace-tabs.mod-top-right-space .workspace-tab-header-inner {
    width: auto !important;
}


body.tab-top-right-icons-labels .mod-sidedock.mod-right-split .workspace-tabs.mod-top-right-space {
    --sidebar-tab-text-display: inline-block;
}

body.tab-top-right-icons-labels .mod-sidedock.mod-right-split .workspace-tabs.mod-top-right-space .workspace-tab-header-inner-title {
    display: inline-block !important;
}

body.tab-top-right-icons-labels .mod-sidedock.mod-right-split .workspace-tabs.mod-top-right-space .workspace-tab-header-inner {
    width: auto !important;
    gap: 6px;
}


body.tab-top-right-icons .mod-sidedock.mod-right-split .workspace-tabs.mod-top-right-space .workspace-tab-header-inner-title {
    display: none !important;
}




body.tab-left-labels .mod-sidedock.mod-left-split .workspace-tabs:not(.mod-top) {
    --sidebar-tab-text-display: inline-block;
}

body.tab-left-labels .mod-sidedock.mod-left-split .workspace-tabs:not(.mod-top) .workspace-tab-header-inner-icon {
    display: none;
}

body.tab-left-labels .mod-sidedock.mod-left-split .workspace-tabs:not(.mod-top) .workspace-tab-header-inner-title {
    display: inline-block !important;
}

body.tab-left-labels .mod-sidedock.mod-left-split .workspace-tabs:not(.mod-top) .workspace-tab-header-inner {
    width: auto !important;
}


body.tab-left-icons-labels .mod-sidedock.mod-left-split .workspace-tabs:not(.mod-top) {
    --sidebar-tab-text-display: inline-block;
}

body.tab-left-icons-labels .mod-sidedock.mod-left-split .workspace-tabs:not(.mod-top) .workspace-tab-header-inner-title {
    display: inline-block !important;
}

body.tab-left-icons-labels .mod-sidedock.mod-left-split .workspace-tabs:not(.mod-top) .workspace-tab-header-inner {
    width: auto !important;
    gap: 6px;
}


body.tab-left-icons .mod-sidedock.mod-left-split .workspace-tabs:not(.mod-top) .workspace-tab-header-inner-title {
    display: none !important;
}




body.tab-right-labels .mod-sidedock.mod-right-split .workspace-tabs:not(.mod-top) {
    --sidebar-tab-text-display: inline-block;
}

body.tab-right-labels .mod-sidedock.mod-right-split .workspace-tabs:not(.mod-top) .workspace-tab-header-inner-icon {
    display: none;
}

body.tab-right-labels .mod-sidedock.mod-right-split .workspace-tabs:not(.mod-top) .workspace-tab-header-inner-title {
    display: inline-block !important;
}

body.tab-right-labels .mod-sidedock.mod-right-split .workspace-tabs:not(.mod-top) .workspace-tab-header-inner {
    width: auto !important;
}


body.tab-right-icons-labels .mod-sidedock.mod-right-split .workspace-tabs:not(.mod-top) {
    --sidebar-tab-text-display: inline-block;
}

body.tab-right-icons-labels .mod-sidedock.mod-right-split .workspace-tabs:not(.mod-top) .workspace-tab-header-inner-title {
    display: inline-block !important;
}

body.tab-right-icons-labels .mod-sidedock.mod-right-split .workspace-tabs:not(.mod-top) .workspace-tab-header-inner {
    width: auto !important;
    gap: 6px;
}


body.tab-right-icons .mod-sidedock.mod-right-split .workspace-tabs:not(.mod-top) .workspace-tab-header-inner-title {
    display: none !important;
}





body.tab-joined.compact-tabs { --header-height: 25px; }
body.tab-float.compact-tabs { --header-height: 30px; }
body.tab-none.compact-tabs { --header-height: 25px; }


.compact-tabs .workspace-tab-header-container {
    --tab-curve: 10px;
    padding-top: 2px !important;
    align-items: stretch !important;
}

.compact-tabs .workspace-tab-header-container-inner,
.compact-tabs .workspace-tab-header-container-inner {
    margin-top: 0 !important;
}


.compact-tabs .workspace-tab-header.is-active,
.compact-tabs .workspace-tab-header {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}


.compact-tabs.tab-float .workspace-tab-header {
    margin-top: 3px !important;
    margin-bottom: 3px !important;
}

.compact-tabs.tab-float .workspace-tab-header.is-active {
    min-height: 20px;
    margin-top: 3px !important;
    margin-bottom: 6px !important;
}


body.compact-tabs .workspace-tab-header.is-active .workspace-tab-header-inner {
  padding-top: 8px !important;
}


body.tab-float.compact-tabs .workspace-tab-header.is-active .workspace-tab-header-inner {
  padding-top: 0 !important;
}


body.tab-joined.compact-tabs .workspace-tab-header:not(.is-active) {
  transform: translateY(2px) !important;
}


body.compact-tabs .workspace-tab-header.is-active .workspace-tab-header-inner {
    overflow: visible !important;
}






.compact-tabs .workspace-tab-header-inner-title,
.compact-tabs .workspace-tab-header-inner-icon {
    line-height: 1 !important;
    vertical-align: middle !important;
}


body.compact-tabs.focus-mode .view-header {
    --header-height: 25px;
    height: var(--header-height);
    margin-top: -4px !important;
}



body.tab-float.compact-tabs {
    .workspace-split.mod-left-split .workspace-tab-header,
    .workspace-split.mod-right-split .workspace-tab-header,
    .workspace-split.mod-left-split .workspace-tab-header.is-active,
    .workspace-split.mod-right-split .workspace-tab-header.is-active,
    .workspace-split.mod-left-split .workspace-tab-header:not(.is-active):hover,
    .workspace-split.mod-right-split .workspace-tab-header:not(.is-active):hover {
        
        height: 22px;
        width: 30px;
        padding: auto;
        overflow: visible !important;
    }

    .workspace-split.mod-left-split .workspace-tab-header:not(.is-active),
    .workspace-split.mod-right-split .workspace-tab-header:not(.is-active) {
        padding-bottom: 4px !important;
    }
}

body.tab-joined.compact-tabs {
    .workspace-split.mod-left-split .workspace-tab-header.is-active,
    .workspace-split.mod-right-split .workspace-tab-header.is-active {
        padding: 11px 0 !important;
        height: 24px;
    }

    .workspace-split.mod-left-split .workspace-tab-header:not(.is-active),
    .workspace-split.mod-right-split .workspace-tab-headre:not(.is-active) {
        height: 20px;
    }

    .workspace-split.mod-left-split .workspace-tab-header-inner:active,
    .workspace-split.mod-right-split .workspace-tab-header-inner:active {
        height: 20px;
        box-shadow: none !important;
        background-color: var(--background-primary) !important;
    }
}

body.tab-none.compact-tabs {
    .workspace-split.mod-left-split .workspace-tab-header,
    .workspace-split.mod-right-split .workspace-tab-header,
    .workspace-split.mod-left-split .workspace-tab-header.is-active,
    .workspace-split.mod-right-split .workspace-tab-header.is-active,
    .workspace-split.mod-left-split .workspace-tab-header:not(.is-active):hover,
    .workspace-split.mod-right-split .workspace-tab-header:not(.is-active):hover {
        
        height: 19px;
        width: 34px;
        padding: auto;
        overflow: visible !important;
    }

    .workspace-split.mod-left-split .workspace-tab-header.is-active .workspace-tab-header-inner-icon {
        padding-bottom: 8px !important;
    }
}





.tab-float {
    .titlebar-button {
        border-radius: 8px;
        margin: 5px 2px;
    }

    .titlebar-button-container {
        margin-right: 6px;
        margin-top: 1px;
    }
}



.titlebar-button {
    position: relative;
    background-color: transparent;
    color: var(--text-faint);
}


.titlebar-button svg {
    display: none;
}


.titlebar-button::before {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 14px;
    height: 14px;
    background-color: currentcolor;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    pointer-events: none;
    transition: transform calc(var(--animation-duration) * 0.5) cubic-bezier(0.175, 0.885, 0.32, 1.2);
}

.titlebar-button.mod-close:hover {
    color: var(--text-error);
    background-color: rgb(var(--color-red-rgb), 0.2) !important;
}

.titlebar-button:hover::before {
    transform: scale(1.15);
}


.g-min-y-max {
    .titlebar-button.mod-maximize:hover {
        color: var(--color-yellow);
        background-color: rgb(var(--color-yellow-rgb), 0.2) !important;
    }

    .titlebar-button.mod-minimize:hover {
        color: var(--color-green);
        background-color: rgb(var(--color-green-rgb), 0.2) !important;
    }
}

.y-min-g-max {
    .titlebar-button.mod-maximize:hover {
        color: var(--color-green);
        background-color: rgb(var(--color-green-rgb), 0.2) !important;
    }

    .titlebar-button.mod-minimize:hover {
        color: var(--color-yellow);
        background-color: rgb(var(--color-yellow-rgb), 0.2) !important;
    }
}



.titlebar-button.mod-close::before {
    mask-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'>\
<circle cx='50' cy='50' r='42' stroke='black' stroke-width='8' fill='none'/>\
<line x1='32' y1='32' x2='68' y2='68' stroke='black' stroke-width='8' stroke-linecap='round'/>\
<line x1='68' y1='32' x2='32' y2='68' stroke='black' stroke-width='8' stroke-linecap='round'/>\
</svg>");
}


.titlebar-button.mod-minimize::before {
    mask-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'>\
<circle cx='50' cy='50' r='10' fill='black'/>\
</svg>");
}


.titlebar-button.mod-maximize::before {
    mask-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'>\
<rect x='28' y='28' width='44' height='44' rx='4' fill='none' stroke='black' stroke-width='8'/>\
</svg>");
}


.titlebar-button:hover {
    color: var(--text-normal);
}



input.slider {
    height: 10px !important;
    border-radius: 10px;
}

input.slider::-webkit-slider-thumb {
    appearance: none;
    border-radius: 4px !important;
    background-color: var(--interactive-accent);
    cursor: pointer;
    width: 20px !important;
    transition: all calc(var(--animation-duration) * 0.3333) cubic-bezier(0.175, 0.885, 0.32, 1.5);
    background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'>\
\3c !-- Angry eyes \\/ -->\
<line x1='28' y1='34' x2='42' y2='38' stroke='black' stroke-width='7' stroke-linecap='round'/>\
<line x1='58' y1='38' x2='72' y2='34' stroke='black' stroke-width='7' stroke-linecap='round'/>\
\3c !-- Straight mouth -->\
<line x1='40' y1='55' x2='60' y2='55' stroke='black' stroke-width='7' stroke-linecap='round'/>\
</svg>");
}

input.slider::-webkit-slider-thumb:hover {
    transform: scale(1.2);
    appearance: none;
    border-radius: 20px !important;
    width: 18px !important;
    transition: all calc(var(--animation-duration) * 0.3333) cubic-bezier(0.175, 0.885, 0.32, 2);
    background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'>\
<circle cx='35' cy='40' r='5' fill='black'/>\
<circle cx='65' cy='40' r='5' fill='black'/>\
<path d='M30 60 Q50 72 70 60' stroke='black' stroke-width='6' fill='none' stroke-linecap='round'/>\
</svg>");
}







.markdown-preview-view blockquote {
    border-left: 4px solid var(--color-accent);
    padding: 0.6em 1em;
    margin: 0.8em 0;
    background-color: var(--background-secondary);
    border-radius: 8px;
}


.markdown-source-view.is-live-preview .cm-line.HyperMD-quote {
    
    background-color: var(--background-secondary);
    border-radius: 8px !important;
}

.markdown-source-view.mod-cm6.is-live-preview .HyperMD-quote::before,
.markdown-source-view.mod-cm6 .cm-blockquote-border::before {
    content: "\200b";
    display: block;
    width: 1px;
    border-inline-start: var(--blockquote-border-thickness) solid
        var(--blockquote-border-color);
    color: transparent;
    position: absolute;
    top: 0;
    bottom: 0;
    pointer-events: none;
}

.HyperMD-quote.HyperMD-quote-1.cm-line {
    border-radius: 200px !important;
}



.theme-dark,
.theme-light {
  --bullet-1: "–";
  --bullet-2: "•";
  --bullet-3: "◦";
  --bullet-font: monospace;
  --list-marker-color: var(--accent);
  --list-numbered-color: var(--headers);
  --list-spacing: 1px;
  --root-list-spacing: 10px;
}


body:not(.list-default-bullet) .list-bullet {
  display: none;
}


body:not(.list-default-bullet) .is-live-preview .cm-formatting-list-ul::before {
  font-family: var(--bullet-font);
  font-size: var(--font-text-size);
  font-weight: normal;
  color: var(--list-marker-color);
  display: inline-block;
  width: auto;
  height: auto;
  margin-inline-end: 10px;
}


body:not(.list-default-bullet) .is-live-preview .cm-list-1.cm-formatting-list-ul::before {
  content: var(--bullet-1) !important;
}


body:not(.list-default-bullet) .is-live-preview .cm-list-2.cm-formatting-list-ul::before {
  content: var(--bullet-2) !important;
}


body:not(.list-default-bullet) .is-live-preview .cm-list-3.cm-formatting-list-ul::before {
  content: var(--bullet-3) !important;
}


body:not(.list-default-bullet) ul > li:not(.task-list-item)::before {
  content: var(--bullet-1);
  font-family: var(--bullet-font);
  font-size: var(--font-text-size);
  font-weight: normal;
  color: var(--list-marker-color);
  display: inline-block;
  width: auto;
  height: auto;
  float: inline-start;
}


body:not(.list-default-bullet) ul ul > li:not(.task-list-item)::before {
  content: var(--bullet-2);
}


body:not(.list-default-bullet) ul ul ul > li:not(.task-list-item)::before {
  content: var(--bullet-3);
}


body:not(.list-default-bullet) ul > li:not(.task-list-item)::marker {
  color: transparent;
}


body:not(.list-default-bullet) .is-live-preview .cm-formatting-list-ul {
  font-size: 0;
}



ul > li:not(.task-list-item)::before {
  float: inline-start;
  margin-inline: -18px 4px;
}

li::before {
  margin-inline-end: 10px !important;
}


ol > li::marker,
.cm-line .cm-formatting-list-ol {
  color: var(--list-numbered-color);
}


.list-default-bullet {
  --list-marker-color: var(--text-faint);
  --list-marker-color-hover: var(--text-muted);
  --list-marker-color-collapsed: var(--inactive);
  --list-bullet-border: none;
  --list-bullet-radius: 50%;

  
  --list-bullet-transform: none;
}





.callout {
    --callout-border-width: 3px;
    --callout-radius: var(--touch-radius-s);
    --callout-padding: 0px;
    border: var(--callout-border-width) solid
        rgb(var(--callout-color), var(--callout-border-opacity));
    border-radius: var(--callout-radius);
    corner-shape: var(--corner-shape) !important;
    margin: 1em 0;
    mix-blend-mode: var(--callout-blend-mode);
    background-color: rgb(var(--callout-color), 0.1);
    padding: var(--callout-padding);
}

.callout-title {
    --callout-title-padding: 10px 14px;
    padding: var(--callout-title-padding);
    display: flex;
    gap: var(--size-4-1);
    font-size: var(--callout-title-size);
    color: rgb(var(--callout-color));
    line-height: var(--line-height-tight);
    align-items: flex-start;
    border-bottom: 2px solid
        rgb(var(--callout-color), var(--callout-border-opacity));
    transition: border-bottom-width calc(var(--animation-duration) * 0.3333) ease;
}

.callout.is-collapsed > .callout-title {
    border-bottom-width: 0;
    transition-delay: 0.1s;
}

.callout-content {
    padding-inline: 24px;
}

.callout-content img {
    border-radius: var(--radius-m);
    margin: 6px 0;
    margin-top: 10px;
}

.callout-content table {
    width: 100%;
}



.callout {
    transform-origin: top;
    transition:
        transform calc(var(--animation-duration) * 1.5) cubic-bezier(0.175, 0.885, 0.32, 2.2),
        max-height calc(var(--animation-duration) * 1.5) ease,
        padding calc(var(--animation-duration) * 1) ease,
        opacity calc(var(--animation-duration) * 1) ease;
    overflow: hidden;
    opacity: 1;
}


.callout:not(.is-collapsed) {
    transform: scaleY(1);
    opacity: 1;
}


.callout.is-collapsed {
    transform: scaleY(0.95);
    opacity: 1;
    padding-top: 0;
    padding-bottom: 0;
}


@keyframes callout-open-settle {
    0% {
        transform: scaleY(0.9);
    }

    60% {
        transform: scaleY(1.03);
    }

    100% {
        transform: scaleY(1);
    }
}


@keyframes callout-close-bounce {
    0% {
        transform: scaleY(1);
    }

    40% {
        transform: scaleY(1.05);
    }

    100% {
        transform: scaleY(0.95);
    }
}

.callout-title {
    transition: border-bottom-width calc(var(--animation-duration) * 0.5) ease;
    gap: 10px;
}

.callout.is-collapsed > .callout-title {
    border-bottom-width: 0;
}





 

.canvas-node[data-shape="pill"] .canvas-node-container {
    border-radius: 30px;
}

.canvas-sharp-cards .canvas-node-container {
    border: 2.5px solid rgb(var(--canvas-color)) !important;
    border-radius: 0;
}

.canvas-control-group {
    border-radius: 0;
    border-top-left-radius: var(--radius-l) !important;
    border-bottom-left-radius: var(--radius-l) !important;
    margin-right: -8px;
    border: 2px solid var(--background-modifier-border);
}

.canvas-control-item {
    transition: all calc(var(--animation-duration) * 1) cubic-bezier(0.175, 0.885, 0.32, 1.275);
    padding: 8px 10px;
    background-color: var(--titlebar-background) !important;
}

.canvas-control-item:hover {
    transform: scale(1.2);
    color: var(--color-accent-1) !important;
    background-color: var(--background-secondary-alt) !important;
}

.canvas-control-item:active {
    transform: scale(1);
    color: var(--color-accent-1) !important;
    background-color: hsl(var(--interactive-accent-hsl), 0.2);
}

.canvas-card-menu-button.mod-draggable:hover {
    transition: all calc(var(--animation-duration) * 1) ease-out !important;
    transform: scale(1.2) translateY(0) !important;
}

.canvas-card-menu {
    padding: 6px 10px;
    border-radius: var(--touch-radius-m);
    corner-shape: var(--corner-shape);
    opacity: 0.6;
    margin-bottom: -10px;

    transition: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.canvas-card-menu:hover {
    padding: 6px 10px;
    border-radius: var(--touch-radius-m);
    corner-shape: var(--corner-shape);
    opacity: 1;
    margin-bottom: 0;
}


.theme-light,
.theme-dark {
    --canvas-color-6: 172, 124, 196;
    --canvas-color-5: 105, 147, 194;
    --canvas-color-4: 87, 147, 100;
    --canvas-color-3: 255, 221, 140;
    --canvas-color-2: 229, 156, 88;
    --canvas-color-1: 215, 97, 76;
}

.canvas-node:not(.is-themed) .canvas-node-container {
    border-color: var(--background-modifier-border) !important;
}

.canvas-edges > g:not(.is-themed) path.canvas-display-path {
    stroke: var(--background-modifier-border) !important;
}



body.theme-dark {
    --canvas-color: 62, 70, 83 !important;
}

.canvas-node-container {
    border: 2.5px solid rgb(var(--canvas-color)) !important;
    border-radius: 10px;
}

.canvas-node-content.markdown-embed
    > .markdown-embed-content
    > .markdown-preview-view {
    font-size: 1.5em !important;
}

.canvas-node.is-themed .canvas-node-content {
    background-color: rgb(var(--canvas-color), 0.26) !important;
}





.canvas-animation {
    .canvas-node .canvas-node-container {
        transform: scale(1);
        transition: all 0.2s ease-out;
    }

    .canvas-node:hover .canvas-node-container {
        transform: scale(1.05);
    }

    .canvas-node:active .canvas-node-container {
        transform: scale(1);
    }


    .canvas-node.is-focused .canvas-node-container {
    animation: scale-bounce 0.4s ease-out both;
    }
}

@keyframes scale-bounce {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.05);
  }

  75% {
    transform: scale(0.98);
  }

  100% {
    transform: scale(1);
  }
}





.canvas-node-content.media-embed {
    padding: 4px !important;
}


.canvas-hide-img-border 
.canvas-node:has(> .canvas-node-container > .canvas-node-content.image-embed):not(.is-focused):not(.is-selected) .canvas-node-container,
.canvas-hide-img-border 
.canvas-node:has(> .canvas-node-container > .canvas-node-content.image-embed):not(.is-focused):not(.is-selected) .canvas-node-content,
.canvas-hide-img-border 
.canvas-node:has(> .canvas-node-container > .canvas-node-content.image-embed):not(.is-focused):not(.is-selected) img {
    border: 1px solid transparent !important;
    outline: none !important;
    box-shadow: none !important;
}



.canvas-hide-img-bg 
.canvas-node:has(> .canvas-node-container > .canvas-node-content.image-embed):not(.is-focused):not(.is-selected) .canvas-node-container,
.canvas-hide-img-bg 
.canvas-node:has(> .canvas-node-container > .canvas-node-content.image-embed):not(.is-focused):not(.is-selected) .canvas-node-content.image-embed,
.canvas-hide-img-bg 
.canvas-node:has(> .canvas-node-container > .canvas-node-content.image-embed):not(.is-focused):not(.is-selected) img {
    background: none !important;
    border: 1px solid transparent !important;
    outline: none !important;
    box-shadow: none !important;
}


.canvas-hide-img-bg 
.canvas-node:has(> .canvas-node-container > .canvas-node-content.image-embed) .canvas-node-container,
.canvas-hide-img-bg 
.canvas-node:has(> .canvas-node-container > .canvas-node-content.image-embed) .canvas-node-content.image-embed,
.canvas-hide-img-bg 
.canvas-node:has(> .canvas-node-container > .canvas-node-content.image-embed) img {
    background: none !important;
}


.canvas-hide-img-label .canvas-node:has(> .canvas-node-container > .canvas-node-content.image-embed) .canvas-node-label {
    display: none !important;
}



.theme-dark {
   --canvas-background: #00000080;
}

.theme-light {
   --canvas-background: #ffffff4f;
}





:root {
    --color-tang: #e59c58;
}


body.blur-checked .HyperMD-task-line[data-task="x"],
body.blur-checked .HyperMD-task-line[data-task="X"],
body.blur-checked .task-list-item.is-checked {
    filter: blur(2px) !important;
    transition: filter 0.1s ease;
}


body.blur-checked .HyperMD-task-line[data-task="x"].cm-active,
body.blur-checked .HyperMD-task-line[data-task="X"].cm-active,
body.blur-checked .task-list-item.is-checked.cm-active {
    filter: blur(0) !important;
}



body:not(.disable-checkboxes) {
    --color-tang: #e59c58;
    
    
    .task-list-item-checkbox,
    input[data-task] {
        corner-shape: initial !important;
    }

    
    .task-list-item-checkbox {
        
        color: #bababa;
        border-color: currentcolor !important;
        border-radius: 8px !important;
        corner-shape: initial !important;
        border-width: 2px !important;
        width: 23px !important;
        height: 23px !important;
        background-color: #bababa;
        position: relative;
        appearance: none;

        cursor: pointer;
        transition:
            all calc(var(--animation-duration) * 1) cubic-bezier(0.175, 0.885, 0.32, 2),
            padding calc(var(--animation-duration) * 0.3333) ease,
            border-radius calc(var(--animation-duration) * 0.6667) ease !important;
    }

    
    .task-list-item-checkbox::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 20px;
        height: 20px;
        transform: translate(-50%, -50%);
        background: none !important;
    }

    
    .task-list-item-checkbox:checked {
        color: var(--color-tang);
        border-color: currentcolor !important;

        background-color: var(--color-yellow);
        border-radius: 20px !important;
        transform: scale(0.96) !important;
        transition:
            transform calc(var(--animation-duration) * 1) cubic-bezier(0.175, 0.885, 0.32, 2),
            padding calc(var(--animation-duration) * 0.3333) ease,
            border-radius calc(var(--animation-duration) * 0.6667) ease !important;
    }

    
    .task-list-item-checkbox::before {
        
        padding: 2px !important;
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 20px;
        height: 20px;
        transform: translate(-50%, -40%); 
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><line x1='28' y1='38' x2='42' y2='34' stroke='black' stroke-width='8' stroke-linecap='round'/><line x1='58' y1='34' x2='72' y2='38' stroke='black' stroke-width='8' stroke-linecap='round'/><line x1='40' y1='55' x2='60' y2='55' stroke='black' stroke-width='8' stroke-linecap='round'/></svg>");
        background-size: contain;
        background-repeat: no-repeat;
        pointer-events: none;
        z-index: 1;
    }

    
    .task-list-item-checkbox:checked::before,
    li > .task-list-item-checkbox:checked::before {
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M25 40 Q35 35 40 40' stroke='black' stroke-width='7' fill='none' stroke-linecap='round'/><path d='M60 40 Q65 35 75 40' stroke='black' stroke-width='7' fill='none' stroke-linecap='round'/><path d='M35 55 Q50 65 65 55' stroke='black' stroke-width='8' fill='none' stroke-linecap='round'/></svg>");
        transform: translate(-50%, -47%);
    }

    .task-list-item-checkbox:not(:checked):hover {
        transform: scale(1.25) !important;
        border-radius: 6px !important;
        box-shadow: none !important;
    }

    .task-list-item-checkbox:not(:checked) {
        box-shadow: 0 1px 2px var(--checkbox-border-color) !important;
        transform: translateY(0) scale(1.1) !important;
    }

    .task-list-item-checkbox:checked:hover {
        transform: scale(1.05) !important;
        box-shadow: none !important;
        background: currentcolor !important;
        filter: brightness(1.2);
    }

    :root {
        --checklist-done-decoration: none;
    }

    
    .markdown-source-view.mod-cm6 .HyperMD-task-line[data-task="x"],
    .markdown-source-view.mod-cm6 .HyperMD-task-line[data-task="X"],
    .task-list-item.is-checked {
        text-decoration: none !important;
        color: var(--checklist-done-color);
    }

    
    input[data-task="x"]:checked,
    li[data-task="x"] > input:checked,
    li[data-task="x"] > p > input:checked {
        color: var(--color-tang);
        background-color: currentcolor;
        border-color: var(--color-tang) !important;
    }

    
    input[data-task="/"]:checked,
    li[data-task="/"] > input:checked,
    li[data-task="/"] > p > input:checked {
        color: var(--color-yellow);
        background-color: currentcolor;
        border: none;
        border-radius: 10px !important;
        width: 23px;
        height: 23px;
        mask-position: 0 -2px;
    }

    
    .task-list-item-checkbox[data-task="/"]:checked::before,
    li[data-task="/"] > .task-list-item-checkbox:checked::before {
        background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'>\
  <circle cx='13' cy='60' r='16' fill='orange'/>\
  <circle cx='87' cy='58' r='16' fill='orange'/>\
  \
<path d='M15 40 Q25 65 40 40' stroke='black' stroke-width='10' fill='none' stroke-linecap='round'/>\
<path d='M60 40 Q65 65 85 40' stroke='black' stroke-width='10' fill='none' stroke-linecap='round'/>\
<ellipse cx='50' cy='78' rx='15' ry='18' fill='maroon'/>\
</svg>");

        background-size:
            60% 70%,
            cover;
        background-position:
            center center,
            center center;
        background-repeat: no-repeat, no-repeat;
    }

    
    input[data-task="-"]:checked,
    li[data-task="-"] > input:checked,
    li[data-task="-"] > p > input:checked {
        color: var(--color-orange);
        background-color: currentcolor;
        border: none;
        border-radius: 2px !important;
        width: 20px !important;
        height: 20px;
        mask-size: cover !important;
    }

    
    .task-list-item-checkbox[data-task="-"]:checked::before,
    li[data-task="-"] > .task-list-item-checkbox:checked::before {
        background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'>\
<line x1='18' y1='19' x2='42' y2='18' stroke='black' stroke-width='10' stroke-linecap='round'/>\
<line x1='65' y1='24' x2='85' y2='34' stroke='black' stroke-width='10' stroke-linecap='round'/>\
\
<line x1='28' y1='64' x2='79' y2='64' stroke='black' stroke-width='10' stroke-linecap='round'/>\
</svg>");

        background-size:
            60% 70%,
            cover;
        background-position:
            center center,
            center center;
        background-repeat: no-repeat, no-repeat;
    }

    
    input[data-task="?"]:checked,
    li[data-task="?"] > input:checked,
    li[data-task="?"] > p > input:checked {
        color: var(--color-orange);
        background-color: currentcolor;
        border: none;
        border-radius: 0 !important;
        width: 23px;
        height: 23px;
        mask-size: cover !important;
        mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='.5 0 16 16'><path d='M8 1.25a2.1 2.1 0 00-1.55.68L1.14 11.44a2.06 2.06 0 00.77 2.81c.3.17.65.26 1 .26h11.38a2.1 2.1 0 001.85-1.1 2.06 2.06 0 00-.16-2.1L9.55 1.93A2.08 2.08 0 008 1.25z'/></svg>");
    }

    
    .task-list-item-checkbox[data-task="?"]:checked::before,
    li[data-task="?"] > .task-list-item-checkbox:checked::before {
        background-position: 3.5px 4px !important;
        background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'>\
<line x1='18' y1='19' x2='42' y2='18' stroke='black' stroke-width='10' stroke-linecap='round'/>\
<line x1='58' y1='24' x2='79' y2='34' stroke='black' stroke-width='10' stroke-linecap='round'/>\
\
<circle cx='35' cy='30' r='9' fill='black'/>\
<circle cx='70' cy='35' r='10' fill='black'/>\
<ellipse cx='52' cy='65' rx='15' ry='18' fill='black'/>\
</svg>");

        background-size:
            60% 70%,
            cover;
        background-repeat: no-repeat, no-repeat;
    }

    
    input[data-task="h"]:checked,
    li[data-task="h"] > input:checked,
    li[data-task="h"] > p > input:checked {
        color: var(--color-pink);
        background-color: currentcolor;
        border: none;
        border-radius: 0 !important;
        width: 23px;
        height: 23px;
        mask-position: calc(50% - -1px) 50%;
        mask-size: 24px;

        mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="1.8 1 20 21"><path d="M12 22q-.4 0-.7-.2l-2.3-2.4C3.8 15.8 2 12.9 2 9.5 2 6.5 4.5 4 7.5 4c1.3 0 2.6.6 3.5 1.5C11.9 4.6 13.2 4 14.5 4 17.5 4 20 6.5 20 9.5c0 3.4-2.8 6.3-6.3 9.9l-0.7 0.8z" fill="black"/></svg>');
    }

    
    input[data-task="T"]:checked,
    li[data-task="T"] > input:checked,
    li[data-task="T"] > p > input:checked {
        color: var(--color-orange);
        background-color: currentcolor;
        border: none;
        border-radius: 0 !important;
        width: 23px;
        height: 23px;
        mask-size: cover !important;
        mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='.5 0 16 16'><path d='M8 1.25a2.1 2.1 0 00-1.55.68L1.14 11.44a2.06 2.06 0 00.77 2.81c.3.17.65.26 1 .26h11.38a2.1 2.1 0 001.85-1.1 2.06 2.06 0 00-.16-2.1L9.55 1.93A2.08 2.08 0 008 1.25z'/></svg>");
    }

    
    .task-list-item-checkbox[data-task="T"]:checked::before,
    li[data-task="T"] > .task-list-item-checkbox:checked::before {
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><circle cx='35' cy='30' r='10' fill='black'/><circle cx='70' cy='35' r='10' fill='black'/><path d='M20 60 Q60 95 80 60' stroke='black' stroke-width='16' fill='none' stroke-linecap='round'/></svg>");
        background-size:
            50% 50%,
            cover;
        background-position:
            center center,
            center center;
        background-repeat: no-repeat, no-repeat;
    }

    
    input[data-task="t"]:checked,
    li[data-task="t"] > input:checked,
    li[data-task="t"] > p > input:checked {
        color: var(--color-cyan);
        background-color: currentcolor;
        border: none;
        border-radius: 0 !important;
        width: 23px;
        height: 23px;
        mask-position: 0 -2px;
        mask-image: url("data:image/svg+xml;utf8,\
<svg fill='black' viewBox='-32 0 512 512' xmlns='http://www.w3.org/2000/svg'>\
<path d='M432 304c0 114.9-93.1 208-208 208S16 418.9 16 304c0-104 76.3-190.2 176-205.5V64h-28c-6.6 0-12-5.4-12-12V12c0-6.6 5.4-12 12-12h120c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-28v34.5c37.5 5.8 71.7 21.6 99.7 44.6l27.5-27.5c4.7-4.7 12.3-4.7 17 0l28.3 28.3c4.7 4.7 4.7 12.3 0 17l-29.4 29.4-.6.6C419.7 223.3 432 262.2 432 304zm-176 36V188.5c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12V340c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12z'/>\
</svg>");
    }

    
    .task-list-item-checkbox[data-task="t"]:checked::before,
    li[data-task="t"] > .task-list-item-checkbox:checked::before {
        background-image: none;
    }

    
    input[data-task="s"]:checked,
    li[data-task="s"] > input:checked,
    li[data-task="s"] > p > input:checked {
        color: var(--color-yellow) !important;
        border: none;
        border-radius: 0 !important;
        width: 23px !important;
        height: 23px;
        mask-position: center center;
        mask-size:
            100% 100%,
            contain;
        mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="1 2 22 22"><path d="M9.15316 5.40838C10.4198 3.13613 11.0531 2 12 2C12.9469 2 13.5802 3.13612 14.8468 5.40837L15.1745 5.99623C15.5345 6.64193 15.7144 6.96479 15.9951 7.17781C16.2757 7.39083 16.6251 7.4699 17.3241 7.62805L17.9605 7.77203C20.4201 8.32856 21.65 8.60682 21.9426 9.54773C22.2352 10.4886 21.3968 11.4691 19.7199 13.4299L19.2861 13.9372C18.8096 14.4944 18.5713 14.773 18.4641 15.1177C18.357 15.4624 18.393 15.8341 18.465 16.5776L18.5306 17.2544C18.7841 19.8706 18.9109 21.1787 18.1449 21.7602C17.3788 22.3417 16.2273 21.8115 13.9243 20.7512L13.3285 20.4768C12.6741 20.1755 12.3469 20.0248 12 20.0248C11.6531 20.0248 11.3259 20.1755 10.6715 20.4768L10.0757 20.7512C7.77268 21.8115 6.62118 22.3417 5.85515 21.7602C5.08912 21.1787 5.21588 19.8706 5.4694 17.2544L5.53498 16.5776C5.60703 15.8341 5.64305 15.4624 5.53586 15.1177C5.42868 14.773 5.19043 14.4944 4.71392 13.9372L4.2801 13.4299C2.60325 11.4691 1.76482 10.4886 2.05742 9.54773C2.35002 8.60682 3.57986 8.32856 6.03954 7.77203L6.67589 7.62805C7.37485 7.4699 7.72433 7.39083 8.00494 7.17781C8.28555 6.96479 8.46553 6.64194 8.82547 5.99623L9.15316 5.40838Z" fill="black"/></svg>');

        background-color: none !important;
        background-size:
            50% 50%,
            cover !important;
        background-position: center center;
        background-repeat: no-repeat;
    }

    
    .task-list-item-checkbox[data-task="s"]:checked::before,
    li[data-task="s"] > .task-list-item-checkbox:checked::before {
        background-size:
            70% 70%,
            cover !important;
        background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'>\
  <circle cx='23' cy='50' r='10' fill='orange'/>\
  <circle cx='77' cy='50' r='10' fill='orange'/>\
  <path d='M25 40 Q35 35 40 35' stroke='maroon' stroke-width='10' fill='none' stroke-linecap='round'/>\
  <path d='M60 40 Q65 35 75 40' stroke='maroon' stroke-width='10' fill='none' stroke-linecap='round'/>\
  <ellipse cx='52' cy='65' rx='10' ry='12' fill='maroon'/>\
</svg>");
        background-position:
            center center,
            center center;
        background-repeat: no-repeat, no-repeat;
    }

    
    input[data-task="i"]:checked,
    li[data-task="i"] > input:checked,
    li[data-task="i"] > p > input:checked {
        color: var(--color-blue);
        background-color: currentcolor;
        border: none;
        border-radius: 0 !important;
        width: 23px;
        height: 23px;
        mask-position: center center;

        mask-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
<path d='M14 3.072a8 8 0 0 1 2.32 11.834l5.387 5.387a1 1 0 0 1 -1.414 1.414l-5.388 -5.387a8 8 0 0 1 -12.905 -6.32l.005 -.285a8 8 0 0 1 11.995 -6.643m-4 8.928a1 1 0 0 0 -1 1l.007 .127a1 1 0 0 0 1.993 -.117l-.007 -.127a1 1 0 0 0 -.993 -.883m0 -6a1 1 0 0 0 -1 1v3a1 1 0 0 0 2 0v-3a1 1 0 0 0 -1 -1'/>\
</svg>");
    }

    
    .task-list-item-checkbox[data-task="i"]:checked::before,
    li[data-task="i"] > .task-list-item-checkbox:checked::before {
        background-image: none;
    }

    
    input[data-task="A"]:checked,
    li[data-task="A"] > input:checked,
    li[data-task="A"] > p > input:checked {
        color: var(--color-yellow);
        background-color: currentcolor;
        border: none;
        border-radius: 0 !important;
        width: 23px;
        height: 23px;
        mask-position: center center;
        mask-size: 100% 100% !important;
        mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M7 6l-.112 .006a1 1 0 0 0 -.669 1.619l3.501 4.375l-3.5 4.375a1 1 0 0 0 .78 1.625h6a1 1 0 0 0 .78 -.375l4 -5a1 1 0 0 0 0 -1.25l-4 -5a1 1 0 0 0 -.78 -.375h-6z" /></svg>');
    }

    
    .task-list-item-checkbox[data-task="A"]:checked::before,
    li[data-task="A"] > .task-list-item-checkbox:checked::before {
        background-image: none;
    }

    
    input[data-task="S"]:checked,
    li[data-task="S"] > input:checked,
    li[data-task="S"] > p > input:checked {
        background-color: currentcolor;
        border: none;
        border-radius: 0 !important;
        width: 23px;
        height: 23px;
        mask-position: center center;
        mask-size: 100% 100% !important;
        color: var(--color-brown);
        mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M22 13.478v4.522a3 3 0 0 1 -3 3h-14a3 3 0 0 1 -3 -3v-4.522l.553 .277a20.999 20.999 0 0 0 18.897 -.002l.55 -.275zm-8 -11.478a3 3 0 0 1 3 3v1h2a3 3 0 0 1 3 3v2.242l-1.447 .724a19.002 19.002 0 0 1 -16.726 .186l-.647 -.32l-1.18 -.59v-2.242a3 3 0 0 1 3 -3h2v-1a3 3 0 0 1 3 -3h4zm-2 8a1 1 0 0 0 -1 1a1 1 0 1 0 2 .01c0 -.562 -.448 -1.01 -1 -1.01zm2 -6h-4a1 1 0 0 0 -1 1v1h6v-1a1 1 0 0 0 -1 -1z" /></svg>');
    }

    
    .task-list-item-checkbox[data-task="S"]:checked::before,
    li[data-task="S"] > .task-list-item-checkbox:checked::before {
        background-image: none;
    }

    
    input[data-task="o"]:checked,
    li[data-task="o"] > input:checked,
    li[data-task="o"] > p > input:checked {
        color: var(--color-gray);
        background-color: currentcolor;
        border: none;
        border-radius: 50px !important;
        width: 23px;
        height: 23px;
    }

    
    .task-list-item-checkbox[data-task="o"]:checked::before,
    li[data-task="o"] > .task-list-item-checkbox:checked::before {
        background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'>\
  <circle cx='23' cy='40' r='7' fill='gray'/>\
  <circle cx='77' cy='50' r='7' fill='gray'/>\
  <circle cx='35' cy='30' r='10' fill='black'/>\
  <circle cx='70' cy='35' r='10' fill='black'/>\
  <ellipse cx='52' cy='65' rx='15' ry='18' fill='black'/>\
</svg>");
    }

    
    input[data-task="c"]:checked,
    li[data-task="c"] > input:checked,
    li[data-task="c"] > p > input:checked {
        color: var(--color-yellow);
        background-color: currentcolor;
        border: none;
        border-radius: 10px !important;
        width: 23px;
        height: 23px;
    }

    
    .task-list-item-checkbox[data-task="c"]:checked::before,
    li[data-task="c"] > .task-list-item-checkbox:checked::before {
        background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'>\
  <rect x='20' y='43' width='14' height='70' rx='3' ry='3' fill='%235aa8e5'/>\
  <rect x='70' y='43' width='14' height='70' rx='3' ry='3' fill='%235aa8e5'/>\
  <path d='M25 40 Q35 35 40 40' stroke='black' stroke-width='7' fill='none' stroke-linecap='round'/>\
  <path d='M60 40 Q65 35 75 40' stroke='black' stroke-width='7' fill='none' stroke-linecap='round'/>\
  <ellipse cx='52' cy='65' rx='12' ry='15' fill='brown'/>\
  <ellipse cx='23' cy='105' rx='12' ry='15' fill='%235aa8e5'/>\
</svg>");
    }

    
    input[data-task="r"]:checked,
    li[data-task="r"] > input:checked,
    li[data-task="r"] > p > input:checked {
        color: var(--color-orange);
        background-color: currentcolor;
        border: none;
        border-radius: 0 !important;
        width: 26px;
        height: 26px;
        mask-position: center center;
        mask-size: 26px;
        mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 56 56"><path d="M9.4257 43.2461L46.5742 43.2461C48.8005 43.2461 50.1133 42.0977 50.1133 40.4102C50.1133 38.0664 47.746 35.957 45.707 33.8711C44.1601 32.2539 43.7382 28.9258 43.5742 26.2305C43.3867 17.2305 41.0195 11.0195 34.7617 8.7695C33.8945 5.7226 31.457 3.2852 28.0117 3.2852C24.5429 3.2852 22.1289 5.7226 21.2382 8.7695C15.0039 11.0195 12.6132 17.2305 12.4492 26.2305C12.2617 28.9258 11.8632 32.2539 10.2929 33.8711C8.2773 35.957 5.8867 38.0664 5.8867 40.4102C5.8867 42.0977 7.2226 43.2461 9.4257 43.2461ZM20.8632 46.4336C21.1445 49.8555 24.0273 52.7148 28.0117 52.7148C31.9726 52.7148 34.8554 49.8555 35.1601 46.4336Z" fill="black"/></svg>');
    }

    
    .task-list-item-checkbox[data-task="r"]:checked::before,
    li[data-task="r"] > .task-list-item-checkbox:checked::before {
        background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'>\
\3c !-- Angry eyes \\/ -->\
<line x1='28' y1='39' x2='42' y2='38' stroke='black' stroke-width='7' stroke-linecap='round'/>\
<line x1='58' y1='24' x2='72' y2='34' stroke='black' stroke-width='7' stroke-linecap='round'/>\
<circle cx='40' cy='30' r='6' fill='black'/>\
  <circle cx='60' cy='35' r='6' fill='black'/>\
\3c !-- Straight mouth -->\
<line x1='40' y1='55' x2='60' y2='55' stroke='black' stroke-width='7' stroke-linecap='round'/>\
</svg>");
    }

    
    input[data-task="g"]:checked,
    li[data-task="g"] > input:checked,
    li[data-task="g"] > p > input:checked {
        color: var(--color-tang);
        background-color: currentcolor;
        border-radius: 0 !important;
        mask-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%20369.793%20369.792%27%3E%3Cpath%20d=%27M320.83,140.434l-1.759-0.627l-6.87-16.399l0.745-1.685c20.812-47.201,19.377-48.609,15.925-52.031L301.11,42.61c-1.135-1.126-3.128-1.918-4.846-1.918c-1.562,0-6.293,0-47.294,18.57L247.326,60l-16.916-6.812l-0.679-1.684C210.45,3.762,208.475,3.762,203.677,3.762h-39.205c-4.78,0-6.957,0-24.836,47.825l-0.673,1.741l-16.828,6.86l-1.609-0.669C92.774,47.819,76.57,41.886,72.346,41.886c-1.714,0-3.714,0.769-4.854,1.892l-27.787,27.16c-3.525,3.477-4.987,4.933,16.915,51.149l0.805,1.714l-6.881,16.381l-1.684,0.651C0,159.715,0,161.556,0,166.474v38.418c0,4.931,0,6.979,48.957,24.524l1.75,0.618l6.882,16.333l-0.739,1.669c-20.812,47.223-19.492,48.501-15.949,52.025L68.62,327.18c1.162,1.117,3.173,1.915,4.888,1.915c1.552,0,6.272,0,47.3-18.561l1.643-0.769l16.927,6.846l0.658,1.693c19.293,47.726,21.275,47.726,26.076,47.726h39.217c4.924,0,6.966,0,24.859-47.857l0.667-1.742l16.855-6.814l1.604,0.654c27.729,11.733,43.925,17.654,48.122,17.654c1.699,0,3.717-0.745,4.876-1.893l27.832-27.219c3.501-3.495,4.96-4.924-16.981-51.096l-0.816-1.734l6.869-16.31l1.64-0.643c48.938-18.981,48.938-20.831,48.938-25.755v-38.395C369.793,159.95,369.793,157.914,320.83,140.434z%20M184.896,247.203c-35.038,0-63.542-27.959-63.542-62.3c0-34.342,28.505-62.264,63.542-62.264c35.023,0,63.522,27.928,63.522,62.264C248.419,219.238,219.92,247.203,184.896,247.203z%27/%3E%3C/svg%3E");
    }

    
    .task-list-item-checkbox[data-task="g"]:checked::before,
    li[data-task="g"] > .task-list-item-checkbox:checked::before {
        background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'>\
\3c !-- Angry eyes \\/ -->\
<circle cx='70' cy='30' r='5' fill='black'/>\
  <circle cx='30' cy='25' r='5' fill='black'/>\
</svg>");
    }

    

    

    input[data-task="D"]:checked,
    li[data-task="D"] > input:checked {
        --checkbox-marker-color: transparent;
        border: none;
        border-radius: 0 !important;
        background-color: currentcolor;
        background-image: none;
        mask-size: 100%;
        mask-position: 50% 50%;
        width: 26px !important;
        height: 24px;

        
        color: var(--color-red);
    }

    input[data-task="D"]:checked,
    li[data-task="D"] > input:checked,
    li[data-task="D"] > p > input:checked {
        color: var(--color-yellow);
        background-color: currentcolor;
        mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" clip-rule="evenodd" d="M11 13C11 13.5523 11.4477 14 12 14C12.5523 14 13 13.5523 13 13V10C13 9.44772 12.5523 9 12 9C11.4477 9 11 9.44772 11 10V13ZM13 15.9888C13 15.4365 12.5523 14.9888 12 14.9888C11.4477 14.9888 11 15.4365 11 15.9888V16C11 16.5523 11.4477 17 12 17C12.5523 17 13 16.5523 13 16V15.9888ZM9.37735 4.66136C10.5204 2.60393 13.4793 2.60393 14.6223 4.66136L21.2233 16.5431C22.3341 18.5427 20.8882 21 18.6008 21H5.39885C3.11139 21 1.66549 18.5427 2.77637 16.5431L9.37735 4.66136Z" fill="black"/></svg>');
    }

    
    .task-list-item-checkbox[data-task="D"]:checked::before,
    li[data-task="D"] > .task-list-item-checkbox:checked::before {
        background-image: none;
    }

    input[data-task="I"]:checked,
    li[data-task="I"] > input:checked,
    li[data-task="I"] > p > input:checked {
        color: var(--color-yellow);
        border-radius: 0 !important;
        mask-size: 26px;
        mask-position: center center;
        mask-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>\
<path d='M0 0h24v24H0z' fill='none'/>\
<path d='M9 20h6'/>\
<path d='M12 20v-8'/>\
<path d='M5 12h14l-4 -8h-6z'/>\
</svg>");
    }

    
    .task-list-item-checkbox[data-task="I"]:checked::before,
    li[data-task="I"] > .task-list-item-checkbox:checked::before {
        background-image: none;
    }

    input[data-task="!"]:checked,
    li[data-task="!"] > input:checked,
    li[data-task="!"] > p > input:checked {
        color: var(--color-pink);
        background-color: currentcolor;
        border-radius: 0 !important;
        mask-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224px%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2224px%22%20fill%3D%22%235f6368%22%3E%3Cpath%20d%3D%22M479.72-58.43q-47.34%200-80.77-33.67-33.43-33.66-33.43-80.93%200-47.27%2033.71-80.82%2033.71-33.54%2081.05-33.54%2047.34%200%2080.77%2033.78%2033.43%2033.78%2033.43%2081.22%200%2047.43-33.71%2080.69-33.71%2033.27-81.05%2033.27Zm.56-312.7q-45.58%200-77.52-31.88-31.93-31.88-31.93-77.29v-306.14q0-46.06%2031.65-77.9%2031.65-31.83%2077.24-31.83%2045.58%200%2077.52%2031.83%2031.93%2031.84%2031.93%2077.9v306.14q0%2045.41-31.65%2077.29-31.65%2031.88-77.24%2031.88Z%22%2F%3E%3C%2Fsvg%3E");
    }

    
    .task-list-item-checkbox[data-task="!"]:checked::before,
    li[data-task="!"] > .task-list-item-checkbox:checked::before {
        background-image: none;
    }

    input[data-task="b"]:checked,
    li[data-task="b"] > input:checked,
    li[data-task="b"] > p > input:checked {
        color: white;
        background-color: currentcolor;
        border-radius: 0 !important;
        mask-size: 26px;
        mask-position: center center;
        border: 4px solid white;

        background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'>\
<circle cx='23' cy='50' r='7' fill='pink'/>\
<circle cx='77' cy='50' r='7' fill='pink'/>\
<circle cx='35' cy='40' r='7' fill='black'/>\
<circle cx='65' cy='40' r='7' fill='black'/>\
<path d='M40 57 Q50 70 60 57' stroke='black' stroke-width='10' fill='none' stroke-linecap='round'/>\
</svg>");

        mask-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'>\
<path d='M0 0h24v24H0z' fill='none'/>\
<path d='M12 3c2.779 0 5.349 1.556 7.243 4.082c1.728 2.306 2.757 5.259 2.757 8.016c0 1.47-.293 2.718-.903 3.745c-.603 1.014-1.479 1.758-2.582 2.257c-1.593.718-3.335.9-6.515.9c-3.175 0-4.92-.183-6.514-.9c-1.012-.457-1.833-1.12-2.426-2.01l-.157-.247c-.61-1.028-.903-2.274-.903-3.745c0-2.757 1.03-5.71 2.757-8.016c1.893-2.526 4.463-4.082 7.243-4.082'/>\
</svg>");
    }

    
    .task-list-item-checkbox[data-task="b"]:checked::before,
    li[data-task="b"] > .task-list-item-checkbox:checked::before {
        border: 2px solid white !important;
        background-color: currentcolor;
        background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'>\
<circle cx='27' cy='50' r='7' fill='pink'/>\
<circle cx='73' cy='50' r='7' fill='pink'/>\
<circle cx='37' cy='40' r='6' fill='black'/>\
<circle cx='63' cy='40' r='6' fill='black'/>\
<path d='M40 55 Q50 65 60 55' stroke='black' stroke-width='8' fill='none' stroke-linecap='round'/>\
</svg>");
    }

    
    input[data-task="B"]:checked,
    li[data-task="B"] > input:checked,
    li[data-task="B"] > p > input:checked {
        color: var(--color-blue);
        background-color: currentcolor;
        border: none;
        border-radius: 0 !important;
        width: 26px;
        height: 26px;
        mask-position: center center;
        mask-size: 100% 100% !important;
        mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path d="M480 576L192 576C139 576 96 533 96 480L96 160C96 107 139 64 192 64L496 64C522.5 64 544 85.5 544 112L544 400C544 420.9 530.6 438.7 512 445.3L512 512C529.7 512 544 526.3 544 544C544 561.7 529.7 576 512 576L480 576zM192 448C174.3 448 160 462.3 160 480C160 497.7 174.3 512 192 512L448 512L448 448L192 448zM224 216C224 229.3 234.7 240 248 240L424 240C437.3 240 448 229.3 448 216C448 202.7 437.3 192 424 192L248 192C234.7 192 224 202.7 224 216zM248 288C234.7 288 224 298.7 224 312C224 325.3 234.7 336 248 336L424 336C437.3 336 448 325.3 448 312C448 298.7 437.3 288 424 288L248 288z"/></svg>');
    }

    
    .task-list-item-checkbox[data-task="B"]:checked::before,
    li[data-task="B"] > .task-list-item-checkbox:checked::before {
        background-image: none;
    }

    input[data-task="B"]:checked:hover,
    li[data-task="B"] > input:checked:hover {
        transform: translateX(0) !important;
        color: var(--color-blue) !important;
        background-color: currentcolor;
    }

    
    input[data-task="C"]:checked,
    li[data-task="C"] > input:checked,
    li[data-task="C"] > p > input:checked {
        color: var(--color-gray);
        background-color: currentcolor;
        border: none;
        border-radius: 10px !important;
        corner-shape: squircle;
        width: 23px;
        height: 23px;
    }

    
    .task-list-item-checkbox[data-task="C"]:checked::before,
    li[data-task="C"] > .task-list-item-checkbox:checked::before {
        background-image: url("data:image/svg+xml;utf8,\
    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'>\
    <circle cx='23' cy='40' r='15' fill='orange'/>\
    <circle cx='77' cy='50' r='15' fill='orange'/>\
    <circle cx='35' cy='30' r='15' fill='black'/>\
    <circle cx='70' cy='35' r='15' fill='black'/>\
    <circle cx='30' cy='22' r='4' fill='white'/>\
    <circle cx='64' cy='29' r='4' fill='white'/>\
    <circle cx='40' cy='40' r='3' fill='white'/>\
    <circle cx='76' cy='45' r='3' fill='white'/>\
    <ellipse cx='52' cy='65' rx='10' ry='14' fill='black'/>\
    </svg>");
    }

    
    input[data-task="X"]:checked,
    li[data-task="X"] > input:checked,
    li[data-task="X"] > p > input:checked {
        color: var(--color-red);
        background-color: currentcolor;
        border: none;
        border-radius: 0 !important;
        width: 26px;
        height: 26px;
        mask-position: center center;
        mask-size: 100% 100% !important;
        mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path d="M195.2 195.2a64 64 0 0 1 90.496 0L512 421.504 738.304 195.2a64 64 0 0 1 90.496 90.496L602.496 512 828.8 738.304a64 64 0 0 1-90.496 90.496L512 602.496 285.696 828.8a64 64 0 0 1-90.496-90.496L421.504 512 195.2 285.696a64 64 0 0 1 0-90.496z"/></svg>');
    }

    
    .task-list-item-checkbox[data-task="X"]:checked::before,
    li[data-task="X"] > .task-list-item-checkbox:checked::before {
        background-image: none;
    }

    input[data-task="X"]:checked:hover,
    li[data-task="X"] > input:checked:hover {
        transform: translateX(0) !important;
        color: var(--color-red) !important;
        background-color: currentcolor;
    }

    
    input[data-task="d"]:checked,
    li[data-task="d"] > input:checked,
    li[data-task="d"] > p > input:checked {
        color: var(--color-green);
        background-color: currentcolor;
        border: none;
        border-radius: 0 !important;
        width: 26px;
        height: 26px;
        mask-position: center center;
        mask-size: 100% 100% !important;
        mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M4 13l5 5L20 7"/></svg>');
    }

    
    .task-list-item-checkbox[data-task="d"]:checked::before,
    li[data-task="d"] > .task-list-item-checkbox:checked::before {
        background-image: none;
    }

    input[data-task="d"]:checked:hover,
    li[data-task="d"] > input:checked:hover {
        transform: translateX(0) !important;
        color: var(--color-green) !important;
        background-color: currentcolor;
    }
}





:root {
    --code-border-color: var(--background-modifier-border);
}


.markdown-rendered pre {
    background-color: var(--code-background);
    border-radius: var(--touch-radius-s);
    border: 3px solid var(--background-modifier-border);
    corner-shape: var(--corner-shape);
}

.markdown-rendered code {
    background-color: var(--code-background);
}



.markdown-source-view.mod-cm6 .cm-line.HyperMD-codeblock {
    background-color: var(--code-background);
    font-family: var(--font-monospace);
    font-size: 0.9em;
    color: var(--text-normal);
    padding: 0 16px;
    border-left: 3px solid var(--background-modifier-border);
    border-right: 3px solid var(--background-modifier-border);
}


.markdown-source-view.mod-cm6 .HyperMD-codeblock-begin {
    border-top: 3px solid var(--background-modifier-border);
    border-top-left-radius: var(--touch-radius-s);
    border-top-right-radius: var(--touch-radius-s);
    corner-shape: var(--corner-shape);
}


.markdown-source-view.mod-cm6 .HyperMD-codeblock-end {
    border-bottom: 3px solid var(--background-modifier-border);
    border-bottom-left-radius: var(--touch-radius-s);
    border-bottom-right-radius: var(--touch-radius-s);
    corner-shape: var(--corner-shape);
}




.markdown-source-view.mod-cm6 .code-block-flair {
    transform: scale(1);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 2.275);
}

.markdown-source-view.mod-cm6 .code-block-flair:hover {
    transform: scale(1.05);
}

.markdown-source-view.mod-cm6 .code-block-flair:active {
    transform: scale(0.9);
}




.multi-select-pill {
    background-color: var(--tag-background);
    color: var(--tag-color);
    border-radius: var(--button-radius);
    corner-shape: var(--corner-shape);

    padding: 2px 10px;
}

.multi-select-pill:hover {
    background-color: var(--tag-background-hover);
    color: var(--tag-color);
    padding-right: 8px;
}


.metadata-property[data-property-key="cssclasses"] .multi-select-pill {
    background-color: var(--tag-background);
    color: var(--tag-color);
    border-radius: var(--button-radius);
    corner-shape: var(--corner-shape);

    padding: 2px 10px;
}

.metadata-property[data-property-key="cssclasses"] .multi-select-pill:hover {
    background-color: var(--tag-background-hover);
    padding-right: 8px;
}


.metadata-property[data-property-key="tags"] .multi-select-pill {
    padding: 4px 2px;
    padding-right: 10px;
}

.metadata-property[data-property-key="tags"] .multi-select-pill:hover {
    padding-right: 8px;
}


.multi-select-pill .multi-select-pill-remove-button {
    color: var(--tag-color);
    display: none;
    padding-right: 0;
    
    place-content: center center;
}

.multi-select-pill:hover .multi-select-pill-remove-button {
    display: block;
}


.workspace-leaf-content[data-type="file-properties"] .multi-select-pill {
    display: flex !important;
    align-items: center !important;
    gap: 4px;
}

.workspace-leaf-content[data-type="file-properties"] .multi-select-pill-remove-button {
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    padding: 0 !important;
    margin: 0 !important;
}

.workspace-leaf-content[data-type="file-properties"] .multi-select-pill-remove-button svg {
    display: block !important;
    width: 1em;
    height: 1em;
}


.msp-1 .multi-select-pill {
    border: 2px solid var(--tag-border-color);
}

.msp-2 .multi-select-pill {
    border: 2px solid var(--tag-color);
}

.msp-3 .multi-select-pill,
.msp-3 .metadata-property[data-property-key="cssclasses"] .multi-select-pill,
.msp-3 .metadata-property[data-property-key="tags"] .multi-select-pill {
    background: none;
    border: none;

    padding: 2px;
}

.msp-3 .metadata-property[data-property-key="tags"] .multi-select-pill {
    margin-left: -13px;
}

.msp-3 .workspace-leaf-content[data-type="file-properties"] .metadata-property[data-property-key="tags"] .multi-select-pill {
    margin-left: -9px;
}





.mpk-accent-color .metadata-property-key-input {
    border-radius: var(--button-radius) !important;
    corner-shape: var(--corner-shape) !important;
    padding: 4px 10px !important;
    letter-spacing: 0.09em;
    background-color: transparent;
    color: var(--color-accent-1) !important;
    font-size: 0.8em;
}

.mpk-accent-color .metadata-property-icon {
    color: var(--color-accent-1) !important;
}


.mpk-accent-color-hidden .metadata-property-key-input {
    border-radius: var(--button-radius) !important;
    corner-shape: var(--corner-shape) !important;
    letter-spacing: 0.09em;
    background-color: transparent;
    color: var(--color-accent-1) !important;
    font-size: 0.8em;
}

.mpk-accent-color-hidden .metadata-property-icon {
    color: var(--color-accent-1) !important;
    display: none;
}


.mpk-normal-color .metadata-property-key-input {
    border-radius: var(--button-radius) !important;
    corner-shape: var(--corner-shape) !important;
    padding: 4px 12px !important;
    letter-spacing: 0.09em;
    background-color: transparent;
    color: var(--text-normal) !important;
}

.mpk-normal-color .metadata-property-icon {
    color: var(--text-normal) !important;
}


.mpk-muted-color .metadata-property-key-input {
    border-radius: var(--button-radius) !important;
    corner-shape: var(--corner-shape) !important;   
    padding: 4px 12px !important;
    letter-spacing: 0.09em;
    background-color: transparent;
    color: var(--text-muted) !important;
}

.mpk-key-only .metadata-property-icon {
    color: var(--text-muted) !important;
}


.mpk-key-only .metadata-property-key-input {
    border-radius: var(--button-radius) !important;
    corner-shape: var(--corner-shape) !important;   
    padding: 4px 12px !important;
    letter-spacing: 0.09em;
    background-color: transparent;
    color: var(--text-muted) !important;
}

.mpk-key-only .metadata-property-icon {
    color: var(--text-muted) !important;
    display: none !important;
}



.inline-embed > .markdown-embed-content > .markdown-source-view,
.inline-embed > .markdown-embed-content > .markdown-preview-view {
    background-color: var(--background-primary);
    border: 2px solid var(--interactive-accent) !important;
    padding: 20px 0 !important;
    border-radius: 12px !important;
    border-bottom: 4px solid var(--interactive-accent) !important;
    padding-inline-start: 12px !important;
}

.markdown-embed {
    
    border-bottom: var(--embed-border-bottom);
    border-inline-start: none;
}


.special-inline-title .markdown-preview-section .inline-title {
    text-align: center;
    position: relative;
    display: inline-block;
    padding: 0 10px;
}


.markdown-embed-link {
    border-radius: 20px !important;
    transition: all calc(var(--animation-duration) * 0.3333) cubic-bezier(0.175, 0.885, 0.32, 2);
    z-index: 1000 !important;
    top: -4px;
    transform: scale(0.8);
}

.markdown-embed-link:hover {
    transform: scale(0.9);
    transition: all calc(var(--animation-duration) * 0.3333) cubic-bezier(0.175, 0.885, 0.32, 2);
}

.markdown-embed-link:active {
    border-radius: 10px !important;
    transform: scale(0.7);
    color: var(--color-accent-1);
    background-color: hsl(var(--interactive-accent-hsl), 0.2) !important;
}


.metadata-container {
    border-radius: var(--touch-radius-s);
    corner-shape: var(--corner-shape);
}


.dim-properties .metadata-container {
    opacity: 0.6;
    transition: opacity calc(var(--animation-duration) * 1) ease;
}

.dim-properties .metadata-container:hover {
    opacity: 1;
}


.properties-1 .metadata-container,
.properties-2 .metadata-container,
.properties-3 .metadata-container,
.properties-4 .metadata-container,
.properties-5 .metadata-container,
.properties-6 .metadata-container {
    --input-height: var(--metadata-input-height);
    width: 100%;
    background-color: var(--background-secondary-alt);
    justify-content: space-between;
}

.properties-1 .metadata-container,
.properties-2 .metadata-container,
.properties-4 .metadata-container,
.properties-6 .metadata-container {
    border: 2px solid var(--background-modifier-border-focus);
    box-shadow: 0 3px 0 0 var(--background-modifier-border-focus);
}

.properties-3 .metadata-container {
    border-top: 3.5px solid var(--color-accent);
    border-bottom: 3.5px solid var(--color-accent);
}

.properties-5 .metadata-container {
    border-top: 2px solid var(--background-modifier-border-focus);
    border-bottom: 2px solid var(--background-modifier-border-focus);
}


.properties-1 .metadata-container {
    background-color: var(--background-secondary-alt);
    transform-origin: top;
    transition:
        transform calc(var(--animation-duration) * 1.3333) cubic-bezier(0.175, 0.885, 0.32, 2),
        padding calc(var(--animation-duration) * 1.3333) ease,
        opacity calc(var(--animation-duration) * 1.3333) ease;
}

.properties-1 .metadata-container.is-collapsed {
    opacity: 0.6;
    animation-name: collapse-bounce;
    animation-duration: calc(var(--animation-duration) * 1.5);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 2);
    animation-fill-mode: forwards;
}

.properties-1 .metadata-container:not(.is-collapsed) {
    opacity: 1;
    animation-name: settle-container;
    animation-duration: calc(var(--animation-duration) * 1.6667);
    animation-fill-mode: forwards;
}

.properties-1 .metadata-properties-heading {
    border-bottom: 2px solid var(--background-modifier-border-focus);
    width: 100%;
    padding: 0.5em 1.4em 16px;
    transition: border-bottom 0s ease;
    transition-delay: border-bottom 0.2s;
}

.properties-1 .metadata-content {
    padding: 10px 20px;
}

.properties-1 .metadata-container.is-collapsed .metadata-properties-heading {
    padding-top: 6px;
    border-bottom: 0;
    padding-bottom: 0;
}


.properties-2 .metadata-container {
    margin-bottom: 1.3rem;
    padding: 1rem 1.5rem;
    transform-origin: top;
    transition: opacity calc(var(--animation-duration) * 0.3) ease;
}

.properties-2 .metadata-container.is-collapsed {
    opacity: 0.6;
    padding-top: 0.5em;
    padding-bottom: 0.2em;
    animation: bounce-scale-translate 0.35s cubic-bezier(0.34, 1.2, 0.64, 1) forwards;
}

.properties-2 .metadata-container:not(.is-collapsed) {
    opacity: 1;
    animation: bounce-back-scale-translate 0.4s cubic-bezier(0.34, 1.2, 0.64, 1) forwards;
}


.properties-3 .metadata-container {
    margin-bottom: 1.3rem;
    margin-top: -10px;
    border-radius: 0 0 var(--touch-radius-s) var(--touch-radius-s);
    padding: 1rem 1.3rem;
    transform-origin: top;
    transition: opacity calc(var(--animation-duration) * 0.3) ease;
}

.properties-3 .metadata-container.is-collapsed {
    opacity: 0.6;
    padding-top: 0.3rem;
    padding-bottom: 0.2rem;
    animation: bounce-scale-translate 0.35s cubic-bezier(0.34, 1.2, 0.64, 1) forwards;
}

.properties-3 .metadata-container:not(.is-collapsed) {
    opacity: 1;
    animation: bounce-back-scale-translate 0.4s cubic-bezier(0.34, 1.2, 0.64, 1) forwards;
}


.properties-4 .metadata-container {
    margin: -15px 0 1.3rem 4px;
    border-radius: 0 0 8px 8px;
    padding: 1rem;
    background: var(--background-secondary-alt);
    transform-origin: top;
    transition: opacity calc(var(--animation-duration) * 0.3) ease;
}

.properties-4 .metadata-container.is-collapsed {
    padding: 0.3rem !important;
    opacity: 0.6;
    animation: bounce-scale-translate 0.35s cubic-bezier(0.34, 1.2, 0.64, 1) forwards;
}

.properties-4 .metadata-container:not(.is-collapsed) {
    opacity: 1;
    animation: bounce-back-scale-translate 0.4s cubic-bezier(0.34, 1.2, 0.64, 1) forwards;
}


.properties-5 .metadata-container {
    border: 0;
    margin-bottom: 1.3rem;
    padding: 0.9rem 1.5rem;
    transform-origin: top;
    transition: opacity calc(var(--animation-duration) * 0.3) ease;
}

.properties-5 .metadata-container.is-collapsed {
    opacity: 0.6;
    padding-top: 0.3rem;
    padding-bottom: 0.2rem;
    animation: bounce-scale-translate 0.35s cubic-bezier(0.34, 1.2, 0.64, 1) forwards;
}

.properties-5 .metadata-container:not(.is-collapsed) {
    opacity: 1;
    animation: bounce-back-scale-translate 0.4s cubic-bezier(0.34, 1.2, 0.64, 1) forwards;
}


@keyframes bounce-scale-translate {
    0% {
        transform: scale(1) translateY(0);
    }

    45% {
        transform: scale(0.97) translateY(4px);
    }

    100% {
        transform: scale(1) translateY(0);
    }
}

@keyframes bounce-back-scale-translate {
    0% {
        transform: scale(1) translateY(0);
    }

    40% {
        transform: scale(0.98) translateY(-2px);
    }

    100% {
        transform: scale(1) translateY(0);
    }
}


@keyframes settle-container {
    0% { transform: scaleY(1); }
    40% { transform: scaleY(1.025); }
    100% { transform: scaleY(1); }
}

@keyframes collapse-bounce {
    0% { transform: scaleY(1); }
    60% { transform: scaleY(0.94); }
    100% { transform: scaleY(1); }
}


.metadata-container .metadata-properties-heading .collapse-indicator.collapse-icon {
    opacity: 0;
    transition: opacity calc(var(--animation-duration) * 0.6667) ease;
}

.metadata-container.is-collapsed .metadata-properties-heading:hover .collapse-indicator.collapse-icon,
.metadata-container:not(.is-collapsed) .metadata-properties-heading .collapse-indicator.collapse-icon {
    opacity: 1;
}


.hide-properties-arrow
.metadata-container
.metadata-properties-heading
.collapse-indicator.collapse-icon {
    display: none;
}


.center-properties-heading .metadata-container .metadata-properties-heading {
    width: 100%;
    justify-content: center;
    text-align: center;
}


.properties-1 .metadata-container .metadata-content,
.properties-2 .metadata-container .metadata-content,
.properties-3 .metadata-container .metadata-content,
.properties-4 .metadata-container .metadata-content,
.properties-5 .metadata-container .metadata-content {
    transform-origin: top;
    transition:
        transform calc(var(--animation-duration) * 1.3333) cubic-bezier(0.175, 0.885, 0.32, 2),
        opacity calc(var(--animation-duration) * 1.3333) ease;
}

.metadata-container.is-collapsed .metadata-content {
    transform: scaleY(0.9);
    opacity: 0;
}

.metadata-container:not(.is-collapsed) .metadata-content {
    animation-name: settle-bounce;
    animation-duration: calc(var(--animation-duration) * 1.3333);
    animation-fill-mode: forwards;
}

@keyframes settle-bounce {
    0% { transform: scaleY(1.05); }
    60% { transform: scaleY(0.98); }
    100% { transform: scaleY(1); }
}



.meta-key-case-capi .metadata-property-key-input { text-transform: capitalize; }
.meta-key-case-upper .metadata-property-key-input { text-transform: uppercase; }
.meta-key-case-lower .metadata-property-key-input { text-transform: lowercase; }
.meta-key-case-none  .metadata-property-key-input { text-transform: none; }







.markdown-source-view.mod-cm6 .table-wrapper {
    width: 95% !important;
    max-height: none !important;
    outline: 3px solid var(--table-border-color);
}

.markdown-preview-view table {
    border: 3px solid var(--table-border-color);
}

td,
th {
    outline: 1px solid var(--table-border-color);
}


.table-equal.markdown-preview-view table,
.table-equal.markdown-source-view.mod-cm6 .cm-table-widget table {
    width: 100% !important;
    table-layout: fixed !important; 
    border-collapse: collapse;
}

.table-equal.markdown-preview-view table td,
.table-equal.markdown-preview-view table th,
.table-equal.markdown-source-view.mod-cm6 .cm-table-widget td,
.table-equal.markdown-source-view.mod-cm6 .cm-table-widget th {
    white-space: normal !important;
    word-break: break-word;
    padding: 6px;
}


.markdown-preview-view table,
.markdown-source-view.mod-cm6 .cm-table-widget table {
    width: 100% !important;
    table-layout: auto !important; 

    
}

.markdown-preview-view table td,
.markdown-preview-view table th,
.markdown-source-view.mod-cm6 .cm-table-widget td,
.markdown-source-view.mod-cm6 .cm-table-widget th {
    white-space: normal !important;
    word-break: break-word;
}




.markdown-source-view.mod-cm6 .table-cell-wrapper {
    margin: 4px 6px;
}

.cm-html-embed thead > tr > th,
.markdown-rendered thead > tr > th,
.cm-html-embed tbody > tr > td,
.markdown-rendered tbody > tr > td {
    border-radius: 0;
}

.cm-html-embed thead > tr > th,
.markdown-rendered thead > tr > th,
.cm-html-embed tbody > tr > td,
.markdown-rendered tbody > tr > td {
    border-radius: 0;
}


.markdown-preview-view table {
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 0;
    outline: 1px solid var(--table-border-color);
    overflow: hidden;
    margin: 1em 0;
}

.markdown-preview-view th,
.markdown-preview-view td {
    padding: 8px 12px;
}


.markdown-preview-view table th,
.markdown-source-view.mod-cm6 .cm-table-widget th {
    --titlebar-background-focused: var(--titlebar-background);
    color: var(--text-normal);
    border-bottom: 1px solid var(--background-modifier-border);
}



.table-hor-lines-only.markdown-preview-view table td,
.table-hor-lines-only.markdown-preview-view table th,
.table-hor-lines-only.markdown-source-view.mod-cm6 .cm-table-widget td,
.table-hor-lines-only.markdown-source-view.mod-cm6 .cm-table-widget th {
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
}

.table-hor-lines-only.markdown-preview-view table tr + tr td,
.table-hor-lines-only.markdown-source-view.mod-cm6 .cm-table-widget tr + tr td {
    border-top: 1.5px solid var(--background-modifier-border) !important;
}

.table-hor-lines-only.markdown-preview-view table th,
.table-hor-lines-only.markdown-source-view.mod-cm6 .cm-table-widget th {
    border-bottom: 2px solid var(--background-modifier-border) !important;
}

.table-hor-lines-only td,
.table-hor-lines-only th {
    outline: none !important;
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
}



.table-ver-lines-only.markdown-preview-view table td,
.table-ver-lines-only.markdown-preview-view table th,
.table-ver-lines-only.markdown-source-view.mod-cm6 .cm-table-widget td,
.table-ver-lines-only.markdown-source-view.mod-cm6 .cm-table-widget th {
    border-top: none !important;
    border-bottom: none !important;
}

.table-ver-lines-only.markdown-preview-view table td,
.table-ver-lines-only.markdown-preview-view table th,
.table-ver-lines-only.markdown-source-view.mod-cm6 .cm-table-widget td,
.table-ver-lines-only.markdown-source-view.mod-cm6 .cm-table-widget th {
    border-left: 1.5px solid var(--background-modifier-border) !important;
    border-right: 1.5px solid var(--background-modifier-border) !important;
}

.table-ver-lines-only td,
.table-ver-lines-only th {
    outline: none !important;
    border-top: none !important;
    border-bottom: none !important;
}



body {
    --tag-background: hsl(var(--interactive-accent-hsl), 0.13);
    --tag-background-hover: hsl(var(--interactive-accent-hsl), 0.25);
}


.hide-hash .cm-hashtag.cm-hashtag-begin { display: none; }

.hide-hash .cm-hashtag.cm-hashtag-end {
    border-radius: var(--button-radius);
    corner-shape: var(--corner-shape);
    padding: 5px 12px;
}


.cm-hashtag.cm-hashtag-begin {
    border-radius: var(--button-radius) 0 0 var(--button-radius);
    corner-shape: var(--corner-shape);
}

.cm-hashtag.cm-hashtag-end {
    border-radius: 0 var(--button-radius) var(--button-radius) 0;
    corner-shape: var(--corner-shape);
}



.cm-hashtag.cm-hashtag-begin, .cm-hashtag.cm-hashtag-end {
    background-color: var(--tag-background);

    transition: background-color 0.15s ease, transform calc(var(--animation-duration) * 0.6)  cubic-bezier(0.17, 0.86, 0.17, 1.2);
}

.cm-hashtag.cm-hashtag-begin:hover, .cm-hashtag.cm-hashtag-end:hover {
    background-color: var(--tag-background-hover);
    transform: scale(1.2);
}

