/* #region - Fonts */

/*
font-weight: 100            Inter-Thin
font-weight: 200
font-weight: 300            Inter-Light
font-weight: 400    normal  Inter-Regular
font-weight: 500            Inter-Medium
font-weight: 600
font-weight: 700    bold    Inter-Bold
font-weight: 800
font-weight: 900            Inter-Black
*/

@property --cx {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 0%;
}

@property --cy {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 0%;
}

@font-face {
    font-family: Inter;
    src: local(Inter Thin),
         local(InterThin),
         local(Inter-Thin),
         url(../font/Inter-Thin.woff2) format("woff2");
    font-weight: 100;
    font-style: normal;
    font-variant: normal;
    font-display: swap;
}

@font-face {
    font-family: Inter;
    src: local(Inter Light),
         local(InterLight),
         local(Inter-Light),
         url(../font/Inter-Light.woff2) format("woff2");
    font-weight: 300;
    font-style: normal;
    font-variant: normal;
    font-display: swap;
}

@font-face {
    font-family: Inter;
    src: local(Inter Regular),
         local(InterRegular),
         local(Inter-Regular),
         url(../font/Inter-Regular.woff2) format("woff2");
    font-weight: normal;
    font-style: normal;
    font-variant: normal;
    font-display: swap;
}

@font-face {
    font-family: Inter;
    src: local(Inter Medium),
         local(InterMedium),
         local(Inter-Medium),
         url(../font/Inter-Medium.woff2) format("woff2");
    font-weight: 500;
    font-style: normal;
    font-variant: normal;
    font-display: swap;
}

@font-face {
    font-family: Inter;
    src: local(Inter Bold),
         local(InterBold),
         local(Inter-Bold),
         url(../font/Inter-Bold.woff2) format("woff2");
    font-weight: 700;
    font-style: normal;
    font-variant: normal;
    font-display: swap;
}

@font-face {
    font-family: Inter;
    src: local(Inter Black),
         local(InterBlack),
         local(Inter-Black),
         url(../font/Inter-Black.woff2) format("woff2");
    font-weight: 900;
    font-style: normal;
    font-variant: normal;
    font-display: swap;
}

@font-face {
    font-family: Roboto Mono;
    src: local(RobotoMono Regular),
         local(RobotoMonoRegular),
         local(RobotoMono-Regular),
         url(../font/RobotoMono-Regular.woff2) format("woff2");
    font-weight: normal;
    font-style: normal;
    font-variant: normal;
    font-display: swap;
}

@font-face {
    font-family: Roboto Mono;
    src: local(RobotoMono Medium),
         local(RobotoMonoMedium),
         local(RobotoMono-Medium),
         url(../font/RobotoMono-Medium.woff2) format("woff2");
    font-weight: 500;
    font-style: normal;
    font-variant: normal;
    font-display: swap;
}

@font-face {
    font-family: Nanum;
    src: url(../font/NanumPenScript-Regular-v2.woff2) format("woff2");
    font-weight: normal;
    font-style: normal;
    font-variant: normal;
    font-display: swap;
}

:root {
    --font-family: -apple-system, system-ui, BlinkMacSystemFont, Helvetica, sans-serif;
    --font-family-mono: SF Mono, monospace;
    --font-family-konva: Inter, system-ui, sans-serif;
    --font-family-stripe: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}


/* #endregion */

/* #region - Legacy colors */

:root {
    --yellow: #fecf33;
    --yellow-15pc: rgba(254, 207, 51, 0.15);
    --yellow-20pc: rgba(254, 207, 51, 0.2);
    --yellow-30pc: rgba(254, 207, 51, 0.3);
    --yellow-99pc: rgba(254, 207, 51, 0.99);

    --pale-orange: #ffcb03;

    --light-orange: #fdbd39;
    --light-orange-10pc: rgba(253, 189, 57, 0.1);
    --light-orange-15pc: rgba(253, 189, 57, 0.15);
    --light-orange-20pc: rgba(253, 189, 57, 0.2);
    --light-orange-30pc: rgba(253, 189, 57, 0.3);
    --light-orange-35pc: rgba(253, 189, 57, 0.35);
    --light-orange-50pc: rgba(253, 189, 57, 0.5);
    --light-orange-99pc: rgba(253, 189, 57, 0.99);

    --orange: #f69833;
    --orange-15pc: rgba(246, 152, 51, 0.15);
    --orange-20pc: rgba(246, 152, 51, 0.2);
    --orange-30pc: rgba(246, 152, 51, 0.3);
    --orange-99pc: rgba(246, 152, 51, 0.99);

    --peach: #ee6723;
    --peach-10pc: rgba(238, 103, 35, 0.10);
    --peach-15pc: rgba(238, 103, 35, 0.15);
    --peach-20pc: rgba(238, 103, 35, 0.2);
    --peach-30pc: rgba(238, 103, 35, 0.3);
    --peach-35pc: rgba(238, 103, 35, 0.35);
    --peach-60pc: rgba(238, 103, 35, 0.6);
    --peach-70pc: rgba(238, 103, 35, 0.7);
    --peach-85pc: rgba(238, 103, 35, 0.85);
    --peach-99pc: rgba(238, 103, 35, 0.99);

    --grapefruit: #ff5500;

    --green: #c8cf2d;
    --green-15pc: rgba(200, 207, 45, 0.15);
    --green-20pc: rgba(200, 207, 45, 0.2);
    --green-30pc: rgba(200, 207, 45, 0.3);
    --green-50pc: rgba(200, 207, 45, 0.5);
    --green-60pc: rgba(200, 207, 45, 0.6);
    --green-99pc: rgba(200, 207, 45, 0.99);

    --turquoise: #0dcfda;
    --turquoise-15pc: rgba(13, 207, 218, 0.15);
    --turquoise-20pc: rgba(13, 207, 218, 0.2);
    --turquoise-30pc: rgba(13, 207, 218, 0.3);
    --turquoise-40pc: rgba(13, 207, 218, 0.4);
    --turquoise-60pc: rgba(13, 207, 218, 0.6);
    --turquoise-99pc: rgba(13, 207, 218, 0.99);

    --cornflower-blue: #419bf9;
    --cornflower-blue-10pc: rgba(65, 154, 249, 0.1);
    --cornflower-blue-15pc: rgba(65, 154, 249, 0.15);
    --cornflower-blue-20pc: rgba(65, 154, 249, 0.2);
    --cornflower-blue-30pc: rgba(65, 154, 249, 0.3);
    --cornflower-blue-40pc: rgba(65, 154, 249, 0.4);
    --cornflower-blue-50pc: rgba(65, 154, 249, 0.5);
    --cornflower-blue-60pc: rgba(65, 154, 249, 0.6);
    --cornflower-blue-90pc: rgba(65, 154, 249, 0.9);
    --cornflower-blue-99pc: rgba(65, 154, 249, 0.99);

    --whitey: #f7f7f7;
    --whitey-30pc: rgba(247, 247, 247, 0.3);
    --whitey-50pc: rgba(247, 247, 247, 0.5);
    --whitey-90pc: rgba(247, 247, 247, 0.9);

    --snowman: #fbfbfb;

    --white-1pc: rgba(255, 255, 255, 0.01);
    --white-20pc: rgba(255, 255, 255, 0.2);
    --white-30pc: rgba(255, 255, 255, 0.3);
    --white-40pc: rgba(255, 255, 255, 0.4);
    --white-50pc: rgba(255, 255, 255, 0.5);
    --white-60pc: rgba(255, 255, 255, 0.6);
    --white-70pc: rgba(255, 255, 255, 0.7);
    --white-80pc: rgba(255, 255, 255, 0.8);
    --white-90pc: rgba(255, 255, 255, 0.9);
    --white-95pc: rgba(255, 255, 255, 0.95);

    --karl: #edeced;

    --gandalf: #979197;
    --gandalf-15pc: rgba(151, 145, 151, 0.15);
    --gandalf-20pc: rgba(151, 145, 151, 0.2);
    --gandalf-25pc: rgba(151, 145, 151, 0.25);
    --gandalf-30pc: rgba(151, 145, 151, 0.3);
    --gandalf-50pc: rgba(151, 145, 151, 0.5);
    --gandalf-60pc: rgba(151, 145, 151, 0.6);

    --clooney: #c1bec1;
    --clooney-10pc: rgba(193, 190, 193, 0.1);
    --clooney-20pc: rgba(193, 190, 193, 0.2);
    --clooney-30pc: rgba(193, 190, 193, 0.3);
    --clooney-40pc: rgba(193, 190, 193, 0.4);
    --clooney-50pc: rgba(193, 190, 193, 0.5);

    --teflon: #554d56;
    --teflon-10pc: rgba(85, 77, 86, 0.1);
    --teflon-15pc: rgba(85, 77, 86, 0.15);
    --teflon-20pc: rgba(85, 77, 86, 0.2);
    --teflon-25pc: rgba(85, 77, 86, 0.25);
    --teflon-30pc: rgba(85, 77, 86, 0.3);
    --teflon-40pc: rgba(85, 77, 86, 0.4);
    --teflon-50pc: rgba(85, 77, 86, 0.5);
    --teflon-60pc: rgba(85, 77, 86, 0.6);
    --teflon-70pc: rgba(85, 77, 86, 0.7);

    --deep-purple: #db7cee;
    --deep-purple-15pc: rgba(219, 124, 238, 0.15);
    --deep-purple-20pc: rgba(219, 124, 238, 0.20);
    --deep-purple-30pc: rgba(219, 124, 238, 0.3);
    --deep-purple-99pc: rgba(219, 124, 238, 0.99);

    --jade: #24b36b;
    --jade-10pc: rgba(36, 179, 107, 0.1);
    --jade-35pc: rgba(36, 179, 107, 0.35);

    --code-bg: #474e5d;
    --code-bg-95pc: rgba(71, 78, 93, 0.95);

    --code-red: #ff7587;
    --code-green: #c3ff5b;
    --code-blue: #27f4ff;
    --code-yellow: #fdbd39;
    --code-gray: var(--warm-gray);

    /* legacy colors */
    --middle-gray: #eae8ea;

    --earth: #a2573a;

    --warm-gray: #bcb5b9;
    --warm-gray-70pc: rgba(188, 181, 185, 0.7);
    --warm-gray-60pc: rgba(188, 181, 185, 0.6);
    --warm-gray-50pc: rgba(188, 181, 185, 0.5);
    --warm-gray-30pc: rgba(188, 181, 185, 0.3);
    /* legacy colors */
}

/* #endregion */

/* #region - Light theme colors */

:root {
    --label-primary: #3f3f46;
    --label-primary-inverse: #ffffff;
    --label-primary-inverse-30pc: rgba(255, 255, 255, 0.30);
    --label-secondary: #71717a;
    --label-secondary-inverse: rgba(255, 255, 255, 0.5);
    --label-tertiary: #a1a1aa;
    --label-accent: #2865eb;
    --label-critical: #ee6723;
    --label-tooltip: #e6e7e7;
    --label-disabled: #a1a1aa;
    --label-disabled-inverse: #ffffff;

    --background-primary: #ffffff;
    --background-secondary: #fbfbfb;
    --background-tertiary: #f7f7f7;
    --background-editor: #363c44;
    --background-editor-card: #24282e;
    --background-info: #fffbef;
    --background-tooltip: #2d333b;

    --control-default: #edeced;
    --control-default-focus: #e1e0e1;
    --control-default-hover: #e1e0e1;
    --control-default-pressed: #d5d4d5;

    --control-light: rgba(255, 255, 255, 0);
    --control-light-focus: #f3f3f3;
    --control-light-hover: #f3f3f3;
    --control-light-pressed: #e1e0e1;

    --control-accent: #3989f9;
    --control-accent-hover: #337be0;
    --control-accent-pressed: #2e6ec7;
    --control-accent-disabled: #b0d0fd;

    --control-accent-light: #ebf7ff;
    --control-accent-light-focus: #ebf7ff;
    --control-accent-light-hover: #e6f2fe;
    --control-accent-light-pressed: #dceafd;

    --control-green: #24b36b;
    --control-green-pressed: #1d8f56;

    --border-primary: rgba(113, 113, 122, 0.15);
    --border-primary-inverse: rgba(70, 76, 87, 0.5);
    --border-secondary: #71717a;
    --border-tertiary: #e0dfe0;
    --border-accent: #3989f9;
    --border-accent-15pc: rgba(57, 137, 249, 0.15);
    --border-accent-40pc: rgba(57, 137, 249, 0.4);
    --border-popover: rgba(255, 255, 255, 0);

    --overlay-selected: rgba(57, 137, 249, 0.15);
    --overlay-highlighted: rgba(254, 207, 51, 0.15);
    --overlay-inactive: rgba(237, 236, 237, 0.15);
    --overlay-backdrop: rgba(63, 63, 70, 0.3);

    --editor-green: #c3ff5b;
    --editor-pink: #ff7587;
    --editor-cyan: #27f4ff;
    --editor-orange: #fecf33;
    --editor-white: #ffffff;

    --shadow-default: rgba(85, 77, 86, 0.15);
    --misc-text-selection: rgba(57, 137, 249, 0.20);
    --misc-dotgrid: rgba(161, 161, 170, 0.32);

    --marker-yellow: #fecf33;
    --marker-yellow-15pc: rgba(254, 207, 51, 0.15);
    --marker-yellow-20pc: rgba(254, 207, 51, 0.20);
    --marker-yellow-30pc: rgba(254, 207, 51, 0.30);

    --marker-light-orange: #fdbd39;
    --marker-light-orange-15pc: rgba(253, 189, 57, 0.15);
    --marker-light-orange-30pc: rgba(253, 189, 57, 0.30);
    --marker-light-orange-15sd: #fff5e1;

    --marker-orange: #f69833;
    --marker-orange-15pc: rgba(246, 152, 51, 0.15);
    --marker-orange-20pc: rgba(246, 152, 51, 0.20);
    --marker-orange-30pc: rgba(246, 152, 51, 0.30);

    --marker-peach: #ee6723;
    --marker-peach-5pc: rgba(238, 103, 35, 0.05);
    --marker-peach-15pc: rgba(238, 103, 35, 0.15);
    --marker-peach-20pc: rgba(238, 103, 35, 0.20);
    --marker-peach-30pc: rgba(238, 103, 35, 0.30);
    --marker-peach-45pc: rgba(238, 103, 35, 0.45);
    --marker-peach-15sd: #fce8de;

    --marker-blue: #3989f9;
    --marker-blue-15pc: rgba(57, 137, 249, 0.15);
    --marker-blue-20pc: rgba(57, 137, 249, 0.20);
    --marker-blue-30pc: rgba(57, 137, 249, 0.30);
    --marker-blue-50pc: rgba(57, 137, 249, 0.50);
    --marker-blue-60pc: rgba(57, 137, 249, 0.60);

    --marker-green: #c8cf2d;
    --marker-green-15pc: rgba(200, 207, 45, 0.15);
    --marker-green-30pc: rgba(200, 207, 45, 0.30);

    --marker-turquoise: #0dcfda;
    --marker-turquoise-15pc: rgba(13, 207, 218, 0.15);
    --marker-turquoise-20pc: rgba(13, 207, 218, 0.20);
    --marker-turquoise-30pc: rgba(13, 207, 218, 0.30);

    --marker-deep-purple: #db7cee;
    --marker-deep-purple-15pc: rgba(219, 124, 238, 0.15);
    --marker-deep-purple-20pc: rgba(219, 124, 238, 0.20);
    --marker-deep-purple-30pc: rgba(219, 124, 238, 0.30);

    --marker-jade: #24b36b;
    --marker-jade-5pc: rgba(36, 179, 107, 0.05);
    --marker-jade-15pc: rgba(36, 179, 107, 0.15);
    --marker-jade-20pc: rgba(36, 179, 107, 0.20);
    --marker-jade-30pc: rgba(36, 179, 107, 0.30);
    --marker-jade-15sd: #def4e9;

    --marker-teflon: #3f3f46;

    --marker-gandalf: #71717a;
    --marker-gandalf-15pc: rgba(113, 113, 122, 0.15);
    --marker-gandalf-20pc: rgba(113, 113, 122, 0.20);
    --marker-gandalf-30pc: rgba(113, 113, 122, 0.30);
    --marker-gandalf-60pc: rgba(113, 113, 122, 0.60);

    --marker-silverfish: #e1e0e1;
    --marker-silverfish-75pc: rgba(225, 224, 225, 0.75);
}

/* #endregion */

/* #region - Dark theme colors */

@media (prefers-color-scheme: dark) {
    body:not(.light-theme):not(.forced-light-theme) {
        color-scheme: dark;

        --label-primary: #e6e7e7;
        --label-primary-inverse: #ffffff;
        --label-primary-inverse-30pc: rgba(255, 255, 255, 0.30);
        --label-secondary: #b3b6b8;
        --label-secondary-inverse: rgba(45, 51, 59, 0.5);
        --label-tertiary: #767a81;
        --label-accent: #8dbbfc;
        --label-critical: #ff6d24;
        --label-tooltip: #3f3f46;
        --label-disabled: #767a81;
        --label-disabled-inverse: #767a81;

        --background-primary: #2d333b;
        --background-secondary: #353c45;
        --background-tertiary: #3e4651;
        --background-editor: #24282e;
        --background-info: #3e4651;
        --background-tooltip: #fffbef;

        --control-default: #47505c;
        --control-default-focus: #5c6678;
        --control-default-hover: #5c6678;
        --control-default-pressed: #737f99;

        --control-light: rgba(0, 0, 0, 0);
        --control-light-focus: #505a68;
        --control-light-hover: #505a68;
        --control-light-pressed: #3e4651;

        --control-accent: #3989f9;
        --control-accent-hover: #4c9eff;
        --control-accent-pressed: #66b0ff;
        --control-accent-disabled: #3e5c8e;

        --control-accent-light: #3a495f;
        --control-accent-light-focus: #5d7597;
        --control-accent-light-hover: #5d7597;
        --control-accent-light-pressed: #364558;

        --control-green: #24b36b;
        --control-green-pressed: #1d8f56;

        --border-primary: rgba(70, 76, 87, 0.5);
        --border-primary-inverse: rgba(113, 113, 122, 0.15);
        --border-secondary: #71717a;
        --border-tertiary: #505a68;
        --border-accent: #3989f9;
        --border-accent-15pc: rgba(57, 137, 249, 0.15);
        --border-popover: #333c47;

        --overlay-selected: rgba(57, 137, 249, 0.15);
        --overlay-highlighted: rgba(254, 207, 51, 0.15);
        --overlay-inactive: rgba(237, 236, 237, 0.15);
        --overlay-backdrop: rgba(0, 0, 0, 0.3);

        --editor-green: #b5e561;
        --editor-pink: #e56172;
        --editor-cyan: #22cad3;
        --editor-orange: #e5c761;
        --editor-white: #ffffff;

        --shadow-default: rgba(0, 0, 0, 0.48);
        --misc-text-selection: rgba(57, 137, 249, 0.20);
        --misc-dotgrid: rgba(118, 122, 129, 0.32);

        --marker-yellow: #fec60b;
        --marker-yellow-15pc: rgba(254, 198, 11, 0.15);
        --marker-yellow-20pc: rgba(254, 198, 11, 0.20);
        --marker-yellow-30pc: rgba(254, 198, 11, 0.30);

        --marker-light-orange: #fdb012;
        --marker-light-orange-15pc: rgba(253, 176, 18, 0.15);
        --marker-light-orange-30pc: rgba(253, 176, 18, 0.30);
        --marker-light-orange-15sd: #4c483d;

        --marker-orange: #f4840b;
        --marker-orange-15pc: rgba(244, 132, 11, 0.15);
        --marker-orange-20pc: rgba(244, 132, 11, 0.20);
        --marker-orange-30pc: rgba(244, 132, 11, 0.30);

        --marker-peach: #da5411;
        --marker-peach-15pc: rgba(218, 84, 17, 0.15);
        --marker-peach-20pc: rgba(218, 84, 17, 0.20);
        --marker-peach-30pc: rgba(218, 84, 17, 0.30);
        --marker-peach-15sd: #503f3e;

        --marker-blue: #3989f9;
        --marker-blue-15pc: rgba(57, 137, 249, 0.15);
        --marker-blue-20pc: rgba(57, 137, 249, 0.20);
        --marker-blue-30pc: rgba(57, 137, 249, 0.30);

        --marker-green: #cad12e;
        --marker-green-15pc: rgba(202, 209, 46, 0.15);
        --marker-green-30pc: rgba(202, 209, 46, 0.30);

        --marker-turquoise: #0ba9b2;
        --marker-turquoise-15pc: rgba(11, 169, 178, 0.15);
        --marker-turquoise-20pc: rgba(11, 169, 178, 0.20);
        --marker-turquoise-30pc: rgba(11, 169, 178, 0.30);

        --marker-deep-purple: #d158e9;
        --marker-deep-purple-15pc: rgba(209, 88, 233, 0.15);
        --marker-deep-purple-30pc: rgba(209, 88, 233, 0.30);

        --marker-jade: #1d9056;
        --marker-jade-15pc: rgba(29, 144, 86, 0.15);
        --marker-jade-20pc: rgba(29, 144, 86, 0.20);
        --marker-jade-30pc: rgba(29, 144, 86, 0.30);
        --marker-jade-15sd: #314948;

        --marker-teflon: #52525c;

        --marker-gandalf: #848490;
        --marker-gandalf-15pc: rgba(132, 132, 144, 0.15);
        --marker-gandalf-20pc: rgba(132, 132, 144, 0.20);
        --marker-gandalf-30pc: rgba(132, 132, 144, 0.30);
        --marker-gandalf-60pc: rgba(132, 132, 144, 0.60);

        --marker-silverfish: #979197;
        --marker-silverfish-75pc: rgba(151, 145, 151, 0.75);
    }
}

.dark-theme {
    color-scheme: dark;

    --label-primary: #e6e7e7;
    --label-primary-inverse: #ffffff;
    --label-primary-inverse-30pc: rgba(255, 255, 255, 0.30);
    --label-secondary: #b3b6b8;
    --label-secondary-inverse: rgba(45, 51, 59, 0.5);
    --label-tertiary: #767a81;
    --label-accent: #8dbbfc;
    --label-critical: #ff6d24;
    --label-tooltip: #3f3f46;
    --label-disabled: #767a81;
    --label-disabled-inverse: #767a81;

    --background-primary: #2d333b;
    --background-secondary: #353c45;
    --background-tertiary: #3e4651;
    --background-editor: #24282e;
    --background-editor-card: #363c44;
    --background-info: #3e4651;
    --background-tooltip: #fffbef;

    --control-default: #47505c;
    --control-default-focus: #5c6678;
    --control-default-hover: #5c6678;
    --control-default-pressed: #737f99;

    --control-light: rgba(0, 0, 0, 0);
    --control-light-focus: #505a68;
    --control-light-hover: #505a68;
    --control-light-pressed: #3e4651;

    --control-accent: #3989f9;
    --control-accent-hover: #4c9eff;
    --control-accent-pressed: #66b0ff;
    --control-accent-disabled: #3e5c8e;

    --control-accent-light: #3a495f;
    --control-accent-light-focus: #5d7597;
    --control-accent-light-hover: #5d7597;
    --control-accent-light-pressed: #364558;

    --control-green: #24b36b;
    --control-green-pressed: #1d8f56;

    --border-primary: rgba(70, 76, 87, 0.5);
    --border-primary-inverse: rgba(113, 113, 122, 0.15);
    --border-secondary: #71717a;
    --border-tertiary: #505a68;
    --border-accent: #3989f9;
    --border-accent-15pc: rgba(57, 137, 249, 0.15);
    --border-popover: #333c47;

    --overlay-selected: rgba(57, 137, 249, 0.15);
    --overlay-highlighted: rgba(254, 207, 51, 0.15);
    --overlay-inactive: rgba(237, 236, 237, 0.15);
    --overlay-backdrop: rgba(0, 0, 0, 0.3);

    --editor-green: #b5e561;
    --editor-pink: #e56172;
    --editor-cyan: #22cad3;
    --editor-orange: #e5c761;
    --editor-white: #ffffff;

    --shadow-default: rgba(0, 0, 0, 0.48);
    --misc-text-selection: rgba(57, 137, 249, 0.20);
    --misc-dotgrid: rgba(118, 122, 129, 0.32);

    --marker-yellow: #fec60b;
    --marker-yellow-15pc: rgba(254, 198, 11, 0.15);
    --marker-yellow-20pc: rgba(254, 198, 11, 0.20);
    --marker-yellow-30pc: rgba(254, 198, 11, 0.30);

    --marker-light-orange: #fdb012;
    --marker-light-orange-15pc: rgba(253, 176, 18, 0.15);
    --marker-light-orange-30pc: rgba(253, 176, 18, 0.30);
    --marker-light-orange-15sd: #4c483d;

    --marker-orange: #f4840b;
    --marker-orange-15pc: rgba(244, 132, 11, 0.15);
    --marker-orange-20pc: rgba(244, 132, 11, 0.20);
    --marker-orange-30pc: rgba(244, 132, 11, 0.30);

    --marker-peach: #da5411;
    --marker-peach-15pc: rgba(218, 84, 17, 0.15);
    --marker-peach-20pc: rgba(218, 84, 17, 0.20);
    --marker-peach-30pc: rgba(218, 84, 17, 0.30);
    --marker-peach-15sd: #503f3e;

    --marker-blue: #3989f9;
    --marker-blue-15pc: rgba(57, 137, 249, 0.15);
    --marker-blue-20pc: rgba(57, 137, 249, 0.20);
    --marker-blue-30pc: rgba(57, 137, 249, 0.30);

    --marker-green: #cad12e;
    --marker-green-15pc: rgba(202, 209, 46, 0.15);
    --marker-green-30pc: rgba(202, 209, 46, 0.30);

    --marker-turquoise: #0ba9b2;
    --marker-turquoise-15pc: rgba(11, 169, 178, 0.15);
    --marker-turquoise-20pc: rgba(11, 169, 178, 0.20);
    --marker-turquoise-30pc: rgba(11, 169, 178, 0.30);

    --marker-deep-purple: #d158e9;
    --marker-deep-purple-15pc: rgba(209, 88, 233, 0.15);
    --marker-deep-purple-30pc: rgba(209, 88, 233, 0.30);

    --marker-jade: #1d9056;
    --marker-jade-15pc: rgba(29, 144, 86, 0.15);
    --marker-jade-20pc: rgba(29, 144, 86, 0.20);
    --marker-jade-30pc: rgba(29, 144, 86, 0.30);
    --marker-jade-15sd: #314948;

    --marker-teflon: #52525c;

    --marker-gandalf: #848490;
    --marker-gandalf-15pc: rgba(132, 132, 144, 0.15);
    --marker-gandalf-20pc: rgba(132, 132, 144, 0.20);
    --marker-gandalf-30pc: rgba(132, 132, 144, 0.30);
    --marker-gandalf-60pc: rgba(132, 132, 144, 0.60);

    --marker-silverfish: #979197;
    --marker-silverfish-75pc: rgba(151, 145, 151, 0.75);
}


/* #endregion */

/* #region - Spacing and layout */

:root {
    --spacing-xxs: 4px;
    --spacing-xs: 6px;
    --spacing-s: 8px;
    --spacing-m: 16px;
    --spacing-l: 24px;
    --spacing-xl: 32px;
    --spacing-xxl: 40px;
    --spacing-xxl-2: 48px;

    --support-button-size: 48px;
}

/* #endregion */

/* #region - Text styles */

.heading-1 {
    font-size: 26px;
    font-weight: normal;
    line-height: var(--text-style-line-height);

    --text-style-line-height: 31px;
}

.heading-2 {
    font-size: 22px;
    font-weight: normal;
    line-height: var(--text-style-line-height);

    --text-style-line-height: 26px;
}

.heading-3 {
    font-size: 18px;
    font-weight: normal;
    line-height: var(--text-style-line-height);

    --text-style-line-height: 21px;
}

.heading-3.medium {
    font-weight: 500;
}

.heading-4 {
    font-size: 15px;
    font-weight: normal;
    line-height: var(--text-style-line-height);

    --text-style-line-height: 18px;
}

.heading-4.medium {
    font-weight: 500;
}

.body-1 {
    font-size: 13px;
    font-weight: normal;
    line-height: var(--text-style-line-height);

    --text-style-line-height: 16px;
}

.body-1.medium {
    font-weight: 500;
}

.caption-1 {
    font-size: 12px;
    font-weight: normal;
    line-height: var(--text-style-line-height);

    --text-style-line-height: 14px;
}

.caption-1.medium {
    font-weight: 500;
}

.caption-2 {
    font-size: 11px;
    font-weight: normal;
    line-height: var(--text-style-line-height);

    --text-style-line-height: 13px;
}

.caption-2.semibold {
    font-weight: 600;
}

.caption-3 {
    font-size: 10px;
    font-weight: normal;
    line-height: var(--text-style-line-height);

    --text-style-line-height: 12px;
}

.caption-3.semibold {
    font-weight: 600;
}

/* #endregion */

*,
::before,
::after {
    margin: 0;
    padding: 0;

    border: none;
    outline: none;
    box-shadow: none;
    border-radius: 0;

    font-family: var(--font-family);
    font-weight: inherit;

    box-sizing: border-box;
    flex-shrink: 0;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body.dragging * {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: grabbing;
}

body.selecting * {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

body:not(.mac) * {
    --font-family: Inter, system-ui, "Segoe UI", sans-serif;
    --font-family-mono: Roboto Mono, monospace;
}

::selection {
    -webkit-text-fill-color: currentColor;
    background-color: var(--misc-text-selection);
    text-shadow: none;
}

::-webkit-input-placeholder {
    color: #979197;
    /* color: var(--gandalf); */
    -webkit-text-fill-color: currentColor;
    opacity: 1;
}

::-moz-placeholder {
    color: var(--gandalf);
    opacity: 1;
}

:-webkit-autofill {
    box-shadow: 0 0 0 100px #fff inset;
    color: var(--teflon);
    -webkit-text-fill-color: currentColor;
}

:-moz-autofill {
    box-shadow: 0 0 0 100px #fff inset;
    color: var(--teflon);
    -moz-text-fill-color: currentColor;
}

:autofill {
    box-shadow: 0 0 0 100px #fff inset;
    color: var(--teflon);
    text-fill-color: currentColor;
}

a {
    text-decoration: none;
    font-weight: normal;
}

button {
    position: relative;
    background: transparent none;
    font-size: 18px;
    cursor: pointer;
}

button:disabled,
button.disabled {
    cursor: default;
}

/* Firefox has extra padding inside button */
button::-moz-focus-inner {
    padding: 0;
    border: 0;
}

.bttn {
    position: relative;
    width: 180px;
    height: 40px;
    box-shadow: 0 2px 6px 0 var(--teflon-20pc);
    text-align: center;
    font-size: 18px;
    cursor: pointer;
    transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

.bttn:enabled:not(.disabled):hover {
    box-shadow: 0 6px 10px 0 var(--teflon-20pc);
}

input {
    -webkit-text-fill-color: currentColor;
}

input[type="radio"] {
    display: none;
}

input[type="search"] {
    -webkit-appearance: textfield;
}

input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}

input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    display: block;
    width: 10px;
    height: 10px;
    background-image: url(../img/icSearchCancel.svg);
    background-repeat: no-repeat;
    background-size: contain;
}

.win input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    display: block;
    width: 8px;
    height: 8px;
    margin: 7px 0 3px;
    background-image: url(../img/icSearchCancel.svg);
}

.radio {
    width: 20px;
    height: 20px;
    border: solid 2px var(--gandalf);
    border-radius: 50%;
    padding: 3px;
    margin-right: 12px;
}

.radioInner {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: transparent;
}

label:focus input[type="radio"]:enabled ~ .radio > .radioInner,
label:active input[type="radio"]:enabled ~ .radio > .radioInner,
label:active input[type="radio"]:enabled ~ .radio:focus > .radioInner,
label:active input[type="radio"]:enabled ~ .radio:active > .radioInner {
    background-color: var(--gandalf);
}

input[type="radio"]:checked ~ .radio {
    border-color: var(--cornflower-blue);
}

input[type="radio"]:checked ~ .radio > .radioInner {
    background-color: var(--cornflower-blue);
}

input[type="radio"]:disabled {
    pointer-events: none;
}

input[type="radio"]:disabled:checked ~ .radio {
    border-color: var(--clooney);
}

input[type="radio"]:disabled:checked ~ .radio > .radioInner {
    background-color: var(--clooney);
}

textarea.copyContainer {
    position: fixed;
}

.menu {
    position: absolute;
    background-color: #fff;
    box-shadow: 0 2px 4px 0 var(--teflon-50pc);
    cursor: pointer;
    z-index: 2;
}

.menu.toLeft {
    transform: translateX(calc(-100% - 4px));
}

.menu.toTop {
    transform: translateY(calc(-100% - 4px));
}

.menu.toLeft.toTop {
    transform: translate(calc(-100% - 4px), calc(-100% - 4px));
}

.menu .menuitem {
    position: relative;
    display: block;
    width: 100%;
    height: 50px;
    padding: 0 48px 0 24px;

    line-height: 50px;
    font-size: 15px;
    text-align: left;
    color: var(--teflon);

    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.menu .menuitem.hidden {
    display: none;
}

.menu .menuitem:hover {
    background-color: var(--whitey);
}

.menu .menuitem:active {
    background-color: #dbd9db; /* blent color */
}

.menu .menuitem.warning {
    color: var(--peach);
}

.menu .menuitem.warning:hover {
    background-color: var(--peach-15pc);
}

.menu .menuitem.warning:active {
    background-color: #fbd4c1; /* blent color */
}

table {
    border-collapse: collapse;
}

ul {
    list-style: none;
}

main {
    display: block;
}

template {
    display: none;
}

code {
    font-family: var(--font-family-mono);
}

.hidden {
    display: none;
}

.invisible {
    visibility: hidden;
}

.noEvent {
    pointer-events: none;
}

.noSelect {
    /*
     * -webkit-user-select value is not overridden here on purpose.
     * Because why would a browser implement the specification behavior correctly, right?
     * The issue here is that when the value of this property is set to "text",
     * because of `all: initial` definition in markdown content, safari decides(‽) to select
     * the next couple of elements too.
     */
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.textSelect {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

@keyframes wiggle {
    33% {
        transform: rotateZ(1deg);
    }

    to {
        transform: rotateZ(-1deg);
    }
}

.wiggle {
    will-change: transform;
    animation-name: wiggle;
    animation-duration: 150ms;
    animation-iteration-count: 4;
}

.breathe {
    will-change: opacity;
    animation-name: breathe;
    animation-duration: 3s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-fill-mode: forwards;
}

@keyframes breathe {
    from {
        opacity: 1.0;
    }
    50% {
        opacity: 0.5;
    }
    to {
        opacity: 1.0;
    }
}

strong {
    font-weight: 500;
}

em {
    font-style: italic;
}

s {
    text-decoration: line-through;
}

.underline {
    text-decoration: underline;
}

@keyframes ripple {
    to {
        transform: scale(1);
    }
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes spin-reverse {
    to {
        transform: rotate(-360deg);
    }
}

.spinning {
    animation-name: spin;
    animation-duration: 1s;
    animation-timing-function: steps(8, end);
    animation-iteration-count: infinite;
}

#loading {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;

    background-color: var(--white-70pc);

    z-index: 10000;
}

#loading .ripple {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    position: absolute;
    top: calc(50% - 30px);
    left: calc(50% - 30px);

    animation-name: ripple;
    animation-duration: 1s;
    animation-timing-function: ease-in-out;
    animation-direction: alternate-reverse;
    animation-iteration-count: infinite;

    transform: scale(0);
    opacity: 0.6;
}

#loading .ripple1 {
    background-color: var(--yellow);
}

#loading .ripple2 {
    animation-delay: -250ms;
    background-color: var(--light-orange);
}

#loading .ripple3 {
    animation-delay: -500ms;
    background-color: var(--orange);
}

#loading .ripple4 {
    animation-delay: -750ms;
    background-color: var(--peach);
}

span.emoji {
    font-style: normal;
    font-weight: normal;
}

.ellipsis {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.lightOrangeRippleFallback:active {
    background-color: #fab036; /* blent color: peach-15pc and light-orange */
}

.toastContainer {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%) translateY(-100%);
    transition: transform 150ms ease-out;
    display: flex;
    justify-content: center;
    z-index: 2500;

    --toast-top-offset: 6px;
}

.toastContainer.show {
    transform: translateX(-50%) translateY(var(--toast-top-offset));
}

.toastContainer.clickable {
    cursor: pointer;
}