/* 2 root: color, light, dark */
:root,
body {
  --mdn-color-white: #fff;
  --mdn-color-black: #000;
  --mdn-color-ads: #00d0aa;
  --mdn-color-background-highlight: #f0e498;
  --mdn-color-dark-grey: #4e4e4e;
  --mdn-background-dark: #1b1b1b;
  --mdn-background-light: #fff;
  --mdn-background-light-grey: #e2e2e2;
  --color-announcement-banner-accent: #ff6d91;
}

/* color theme */

.light {
  --text-primary: #1b1b1b;
  --text-secondary: #4e4e4e;
  --text-active: #858585;
  --text-inactive: #9e9e9ea6;
  --text-link: #0069c2;
  --text-visited: #551a8b;
  --text-invert: #fff;
  --text-muted: #6f6f6f;
  --background-primary: #fff;
  --background-secondary: #f9f9fb;
  --background-tertiary: #ebeaea;
  --background-toc-active: #ebeaea;
  --background-mark-yellow: rgba(199, 183, 0, 0.4);
  --background-mark-green: rgba(0, 208, 97, 0.4);
  --background-information: rgba(0, 133, 242, 0.1);
  --background-warning: rgba(255, 42, 81, 0.1);
  --background-critical: rgba(211, 0, 56, 0.1);
  --background-success: rgba(0, 121, 54, 0.1);
  --border-primary: #cdcdcd;
  --border-secondary: #cdcdcd;
  --button-primary-default: #1b1b1b;
  --button-primary-hover: #696969;
  --button-primary-active: #9e9e9e;
  --button-primary-inactive: #1b1b1b;
  --button-secondary-default: #fff;
  --button-secondary-hover: #cdcdcd;
  --button-secondary-active: #cdcdcd;
  --button-secondary-inactive: #f9f9fb;
  --button-secondary-border-focus: #0085f2;
  --button-secondary-border-red: #ff97a0;
  --button-secondary-border-red-focus: #ffd9dc;
  --icon-primary: #696969;
  --icon-secondary: #b3b3b3;
  --icon-information: #0085f2;
  --icon-warning: #ff2a51;
  --icon-critical: #d30038;
  --icon-success: #007936;
  --accent-primary: #0085f2;
  --accent-primary-engage: rgba(0, 133, 242, 0.1);
  --accent-secondary: #0085f2;
  --accent-tertiary: rgba(0, 133, 242, 0.1);
  --shadow-01: 0 1px 2px rgba(43, 42, 51, 0.05);
  --shadow-02: 0 1px 6px rgba(43, 42, 51, 0.1);
  --focus-01: 0 0 0 3px rgba(0, 144, 237, 0.4);
  --field-focus-border: #0085f2;
  --code-token-tag: #0069c2;
  --code-token-punctuation: #858585;
  --code-token-attribute-name: #d30038;
  --code-token-attribute-value: #007936;
  --code-token-comment: #858585;
  --code-token-default: #1b1b1b;
  --code-token-selector: #872bff;
  --code-background-inline: #f2f1f1;
  --code-background-block: #f2f1f1;
  --notecard-link-color: #343434;
  --scrollbar-bg: transparent;
  --scrollbar-color: rgba(0, 0, 0, 0.25);
  --category-color: #0085f2;
  --category-color-background: #0085f210;
  --code-color: #5e9eff;
  --mark-color: #dce2f2;
  --plus-accent-color: #d30038;
  --html-accent-color: #d30038;
  --css-accent-color: #0069c2;
  --js-accent-color: #afa100;
  --http-accent-color: #007936;
  --apis-accent-color: #872bff;
  --learn-accent-color: #d00058;
  --plus-code-color: #0069c2;
  --html-code-color: #9e0027;
  --css-code-color: #0069c2;
  --js-code-color: #746a00;
  --http-code-color: #007936;
  --apis-code-color: #872bff;
  --learn-code-color: #d00058;
  --plus-mark-color: #ffd9dc;
  --html-mark-color: #ffd9dc;
  --css-mark-color: #dce2f2;
  --js-mark-color: #f0e498;
  --http-mark-color: #a9f3ba;
  --apis-mark-color: #e6deff;
  --learn-mark-color: #ffd9df;
  --plus-accent-background-color: #ff2a5130;
  --html-accent-background-color: #ff2a5130;
  --css-accent-background-color: #0085f230;
  --js-accent-background-color: #93870030;
  --http-accent-background-color: #009a4630;
  --apis-accent-background-color: #9b65ff30;
  --learn-accent-background-color: #ff1f7230;
  --plus-accent-engage: rgba(255, 42, 81, 0.7);
  --html-accent-engage: rgba(255, 42, 81, 0.7);
  --css-accent-engage: rgba(0, 133, 242, 0.7);
  --js-accent-engage: rgba(147, 135, 0, 0.7);
  --http-accent-engage: rgba(0, 154, 70, 0.7);
  --apis-accent-engage: rgba(155, 101, 255, 0.7);
  --learn-accent-engage: rgba(255, 31, 114, 0.7);
  --modal-backdrop-color: rgba(27, 27, 27, 0.1);
  --blend-color: #fff80;
  --text-primary-red: #d30038;
  --text-primary-green: #007936;
  --text-primary-blue: #0069c2;
  --text-primary-yellow: #746a00;
  --collections-link: #9e0027;
  --collections-header: #ffd9dc;
  --collections-icon: #ff2a51;
  --updates-link: #0069c2;
  --updates-header: #f9f9fb;
  --updates-icon: #0085f2;
  --ai-help-link: #007936;
  --ai-help-header: #f9f9fb;
  --ai-help-icon: #009a46;
  --ai-help-accent-background-color: #009a4610;
  --form-limit-color: #696969;
  --form-limit-color-emphasis: #4e4e4e;
  --form-invalid-color: #d30038;
  --form-invalid-focus-color: #ff2a51;
  --form-invalid-focus-effect-color: rgba(255, 42, 81, 0.2);
  --baseline-high-bg: #e6f4ea;
  --baseline-high-engine-bg: #ceead6;
  --baseline-high-img: url(/static/media/high.1cadd1dd8633aafe4118.svg);
  --baseline-high-check: #099949;
  --baseline-low-bg: #e8f0fe;
  --baseline-low-engine-bg: #d2e3fc;
  --baseline-low-check: #1a73e8;
  --baseline-low-img: url(/static/media/low.f0f04252a312a99f0354.svg);
  --baseline-low-pill-bg: #3367d6;
  --baseline-low-pill-color: #f1f3f4;
  --baseline-limited-bg: #f1f3f4;
  --baseline-limited-engine-bg: #e3e6e8;
  --baseline-limited-img: url(/static/media/limited.33014e3dcdb86f37e0c8.svg);
  --baseline-limited-check: #1e8e3e;
  --baseline-limited-cross: #ea8600;
  --curriculum-bg-color: #fcefe2;
  --curriculum-bg-color-note: hsla(30, 81%, 94%, 0.5);
  --curriculum-bg-large-color: #fcefe2;
  --curriculum-bg-color-topic-standards: #ff2a5130;
  --curriculum-bg-color-topic-styling: #0085f230;
  --curriculum-bg-color-topic-scripting: #93870030;
  --curriculum-bg-color-topic-tooling: #009a4630;
  --curriculum-bg-color-topic-practices: #9b65ff30;
  --curriculum-bg-color-landing: #fff;
  --curriculum-bg-color-landing-about-ul: #fff;
  --curriculum-bg-color-landing-top-icon: #fcefe2;
  --curriculum-bg-color-landing-stairway-floor: #fcefe2;
  --curriculum-category-color: #e3642a;
  --curriculum-color: #d47d55;
  --curriculum-color-topic-standards: #d30038;
  --curriculum-color-topic-styling: #0069c2;
  --curriculum-color-topic-scripting: #746a00;
  --curriculum-color-topic-tooling: #007936;
  --curriculum-color-topic-practices: #872bff;
  --curriculum-color-landing-laptop: #e3642a;
  --curriculum-border-color-list-item: #f2f1f1;
  --curriculum-border-color-list-item-hover: rgba(227, 100, 42, 0.7);
  --curriculum-bg-color-list-item-body: #fff;
  --curriculum-color-list-item-icon-topic-standards: #d30038;
  --curriculum-color-list-item-icon-topic-styling: #0069c2;
  --curriculum-color-list-item-icon-topic-scripting: #746a00;
  --curriculum-color-list-item-icon-topic-tooling: #007936;
  --curriculum-color-list-item-icon-topic-practices: #872bff;
  --curriculum-bg-color-list-item-icon-topic-standards: #fff;
  --curriculum-bg-color-list-item-icon-topic-styling: #fff;
  --curriculum-bg-color-list-item-icon-topic-scripting: #fff;
  --curriculum-bg-color-list-item-icon-topic-tooling: #fff;
  --curriculum-bg-color-list-item-icon-topic-practices: #fff;
  --curriculum-bg-color-list-item-topic-standards: #ff2a5130;
  --curriculum-bg-color-list-item-topic-styling: #0085f230;
  --curriculum-bg-color-list-item-topic-scripting: #93870030;
  --curriculum-bg-color-list-item-topic-tooling: #009a4630;
  --curriculum-bg-color-list-item-topic-practices: #9b65ff30;
  --curriculum-shadow: 4px 4px 8px 0 hsla(0, 0%, 70%, 0.18),
    -4px 4px 8px 0 hsla(0, 0%, 70%, 0.15);
  --curriculum-shadow-landing-about-ul: 0 4px 10px 0 rgba(227, 100, 42, 0.06),
    0 -2px 4px 0 rgba(178, 92, 53, 0.06);
  --curriculum-landing-about-beginner: url(/static/media/curriculum-landing-about-beginner.adfe1ead579191b87263.svg#light);
  --curriculum-landing-about-pace: url(/static/media/curriculum-landing-about-pace.a7be02a84427bcd06b31.svg#light);
  --curriculum-landing-about-free: url(/static/media/curriculum-landing-about-free.a87aac27874151783974.svg#light);
  --curriculum-landing-about-bullet: url(/static/media/curriculum-landing-about-bullet.6ddad7f362afafb9f1d2.svg#light);
  --curriculum-landing-started-beginner: url(/static/media/curriculum-landing-started-beginner.98498a537d7bc0081455.svg#small-light);
  --curriculum-landing-started-advanced: url(/static/media/curriculum-landing-started-advanced.f1ff5aabbd25eb7c84b9.svg#small-light);
  --curriculum-landing-started-employment: url(/static/media/curriculum-landing-started-employment.6dfff83343aff136eed6.svg#small-light);
  --curriculum-landing-started-educator: url(/static/media/curriculum-landing-started-educator.2b1973dd359c46918e58.svg#small-light);
  color-scheme: light;
}

@media screen and (min-width: 769px) {
  .light {
    --curriculum-landing-started-beginner: url(/static/media/curriculum-landing-started-beginner.98498a537d7bc0081455.svg#light);
    --curriculum-landing-started-advanced: url(/static/media/curriculum-landing-started-advanced.f1ff5aabbd25eb7c84b9.svg#light);
    --curriculum-landing-started-employment: url(/static/media/curriculum-landing-started-employment.6dfff83343aff136eed6.svg#light);
    --curriculum-landing-started-educator: url(/static/media/curriculum-landing-started-educator.2b1973dd359c46918e58.svg#light);
    --curriculum-module-mdn-resource: url(/static/media/curriculum-mdn-resource.ad82b0efe13bfb85ad73.svg#light);
    --curriculum-bullet: url(/static/media/curriculum-bullet.27dbb2bc7a67dfbd4667.svg#light);
    --curriculum-about-covered: url(/static/media/curriculum-about-covered.8d89f3efba7db9e9b0a3.svg#light);
    --curriculum-about-detail: url(/static/media/curriculum-about-detail.1cda4d4ead5d55f07fec.svg#light);
    --curriculum-about-educators: url(/static/media/curriculum-about-educators.be34d13336e97cff607d.svg#light);
    --curriculum-about-not: url(/static/media/curriculum-about-not.2d121a1b4c51086f9a45.svg#light);
    --curriculum-about-students: url(/static/media/curriculum-about-students.78fad6876ac31e77ddd0.svg#light);
  }
}

.dark {
  --text-primary: #fff;
  --text-secondary: #cdcdcd;
  --text-active: #858585;
  --text-inactive: #cdcdcda6;
  --text-link: #8cb4ff;
  --text-visited: #ffadff;
  --text-invert: #1b1b1b;
  --text-muted: #858585;
  --background-primary: #1b1b1b;
  --background-secondary: #313131;
  --background-tertiary: #858585;
  --background-toc-active: #343434;
  --background-mark-yellow: rgba(199, 183, 0, 0.4);
  --background-mark-green: rgba(0, 208, 97, 0.4);
  --background-information: rgba(0, 133, 242, 0.1);
  --background-warning: rgba(255, 42, 81, 0.1);
  --background-critical: rgba(211, 0, 56, 0.1);
  --background-success: rgba(0, 121, 54, 0.1);
  --border-primary: #858585;
  --border-secondary: #696969;
  --button-primary-default: #fff;
  --button-primary-hover: #cdcdcd;
  --button-primary-active: #9e9e9e;
  --button-primary-inactive: #fff;
  --button-secondary-default: #4e4e4e;
  --button-secondary-hover: #858585;
  --button-secondary-active: #9e9e9e;
  --button-secondary-inactive: #4e4e4e;
  --button-secondary-border-focus: #0085f2;
  --button-secondary-border-red: #ff97a0;
  --button-secondary-border-red-focus: #ffd9dc;
  --icon-primary: #fff;
  --icon-secondary: #b3b3b3;
  --icon-information: #5e9eff;
  --icon-warning: #afa100;
  --icon-critical: #ff707f;
  --icon-success: #00b755;
  --accent-primary: #5e9eff;
  --accent-primary-engage: rgba(94, 158, 255, 0.1);
  --accent-secondary: #5e9eff;
  --accent-tertiary: rgba(0, 133, 242, 0.1);
  --shadow-01: 0 1px 2px rgba(251, 251, 254, 0.2);
  --shadow-02: 0 1px 6px rgba(251, 251, 254, 0.2);
  --focus-01: 0 0 0 3px rgba(251, 251, 254, 0.5);
  --field-focus-border: #fff;
  --code-token-tag: #c1cff1;
  --code-token-punctuation: #b3b3b3;
  --code-token-attribute-name: #ff97a0;
  --code-token-attribute-value: #00d061;
  --code-token-comment: #b3b3b3;
  --code-token-default: #fff;
  --code-token-selector: #bea5ff;
  --code-background-inline: #343434;
  --code-background-block: #343434;
  --notecard-link-color: #e2e2e2;
  --scrollbar-bg: transparent;
  --scrollbar-color: hsla(0, 0%, 100%, 0.25);
  --category-color: #8cb4ff;
  --category-color-background: #8cb4ff70;
  --code-color: #c1cff1;
  --mark-color: #004d92;
  --plus-accent-color: #ff97a0;
  --html-accent-color: #ff707f;
  --css-accent-color: #8cb4ff;
  --js-accent-color: #afa100;
  --http-accent-color: #00b755;
  --apis-accent-color: #ae8aff;
  --learn-accent-color: #ff6d91;
  --plus-code-color: #c1cff1;
  --html-code-color: #f9f9fb;
  --css-code-color: #c1cff1;
  --js-code-color: #c7b700;
  --http-code-color: #00d061;
  --apis-code-color: #bea5ff;
  --learn-code-color: #ff93aa;
  --plus-mark-color: #9e0027;
  --html-mark-color: #9e0027;
  --css-mark-color: #004d92;
  --js-mark-color: #564e00;
  --http-mark-color: #005a26;
  --apis-mark-color: #6800cf;
  --learn-mark-color: #9e0041;
  --plus-accent-background-color: #ff2a5130;
  --html-accent-background-color: #ff2a5130;
  --css-accent-background-color: #0085f230;
  --js-accent-background-color: #93870030;
  --http-accent-background-color: #009a4630;
  --apis-accent-background-color: #9b65ff30;
  --learn-accent-background-color: #ff1f7230;
  --plus-accent-engage: rgba(255, 112, 127, 0.7);
  --html-accent-engage: rgba(255, 112, 127, 0.7);
  --css-accent-engage: rgba(140, 180, 255, 0.7);
  --js-accent-engage: rgba(175, 161, 0, 0.7);
  --http-accent-engage: rgba(0, 183, 85, 0.7);
  --apis-accent-engage: rgba(174, 138, 255, 0.7);
  --learn-accent-engage: rgba(255, 109, 145, 0.7);
  --modal-backdrop-color: rgba(27, 27, 27, 0.7);
  --blend-color: #00080;
  --text-primary-red: #ff97a0;
  --text-primary-green: #00d061;
  --text-primary-blue: #8cb4ff;
  --text-primary-yellow: #c7b700;
  --collections-link: #ff97a0;
  --collections-header: #40000a;
  --collections-icon: #d30038;
  --updates-link: #8cb4ff;
  --updates-header: #000;
  --updates-icon: #8cb4ff;
  --ai-help-link: #00d061;
  --ai-help-header: #000;
  --ai-help-icon: #00d061;
  --ai-help-accent-background-color: #009a4630;
  --form-limit-color: #9e9e9e;
  --form-limit-color-emphasis: #b3b3b3;
  --form-invalid-color: #ff97a0;
  --form-invalid-focus-color: #ff707f;
  --form-invalid-focus-effect-color: rgba(255, 112, 127, 0.2);
  --baseline-high-bg: #0e2a10;
  --baseline-high-engine-bg: #031b05;
  --baseline-high-img: url(/static/media/high-dark.b34312d314ead604bfbd.svg);
  --baseline-high-check: #099949;
  --baseline-low-bg: #041e49;
  --baseline-low-engine-bg: #020d20;
  --baseline-low-check: #1a73e8;
  --baseline-low-img: url(/static/media/low-dark.4ed53864ce1653e32eaa.svg);
  --baseline-low-pill-bg: #3367d6;
  --baseline-low-pill-color: #f1f3f4;
  --baseline-limited-bg: #282a2c;
  --baseline-limited-engine-bg: #1d1e1f;
  --baseline-limited-img: url(/static/media/limited-dark.407e5f7602b35f7d9bc8.svg);
  --baseline-limited-check: #1e8e3e;
  --baseline-limited-cross: #ea8600;
  --curriculum-color: #e3642a;
  --curriculum-color-topic-standards: #f2919c;
  --curriculum-color-topic-styling: #91a6f2;
  --curriculum-color-topic-scripting: #f2cf8f;
  --curriculum-color-topic-tooling: #8ff2a4;
  --curriculum-color-topic-practices: #c891f2;
  --curriculum-bg-color: #664b33;
  --curriculum-bg-color-note: #332e2b;
  --curriculum-bg-large-color: #343434;
  --curriculum-bg-color-topic-standards: #994b53;
  --curriculum-bg-color-topic-styling: #4e609e;
  --curriculum-bg-color-topic-scripting: #7d683d;
  --curriculum-bg-color-topic-tooling: #3d7c4b;
  --curriculum-bg-color-topic-practices: #584280;
  --curriculum-bg-color-landing: #0e0b0a;
  --curriculum-bg-color-landing-about-ul: #000;
  --curriculum-bg-color-landing-top-icon: rgba(178, 92, 53, 0.3);
  --curriculum-bg-color-landing-stairway-floor: #895b33;
  --curriculum-category-color: #e3642a;
  --curriculum-bg-color-grey: #1f1c1a;
  --curriculum-bg-color-orange: #b25c35;
  --curriculum-color-landing-laptop: #b25c35;
  --curriculum-bg-color-list-item-body: #000;
  --curriculum-border-color-list-item: #4e4e4e;
  --curriculum-border-color-list-item-hover: rgba(227, 100, 42, 0.7);
  --curriculum-bg-color-list-item-topic-standards: #343434;
  --curriculum-bg-color-list-item-topic-styling: #343434;
  --curriculum-bg-color-list-item-topic-scripting: #343434;
  --curriculum-bg-color-list-item-topic-tooling: #343434;
  --curriculum-bg-color-list-item-topic-practices: #343434;
  --curriculum-color-list-item-icon-topic-standards: #f2919c;
  --curriculum-color-list-item-icon-topic-styling: #91a6f2;
  --curriculum-color-list-item-icon-topic-scripting: #f2cf8f;
  --curriculum-color-list-item-icon-topic-tooling: #8ff2a4;
  --curriculum-color-list-item-icon-topic-practices: #c891f2;
  --curriculum-bg-color-list-item-icon-topic-standards: #804248;
  --curriculum-bg-color-list-item-icon-topic-styling: #425080;
  --curriculum-bg-color-list-item-icon-topic-scripting: #806a42;
  --curriculum-bg-color-list-item-icon-topic-tooling: #428050;
  --curriculum-bg-color-list-item-icon-topic-practices: #584280;
  --curriculum-shadow: 2px 2px 5px 0 rgba(36, 36, 36, 0.15),
    -2px 2px 8px 0 rgba(87, 87, 87, 0.15);
  --curriculum-shadow-landing-about-ul: 0 4px 10px 0 rgba(227, 100, 42, 0.06),
    0 -2px 4px 0 rgba(178, 92, 53, 0.06);
  --curriculum-landing-about-beginner: url(/static/media/curriculum-landing-about-beginner.adfe1ead579191b87263.svg#dark);
  --curriculum-landing-about-pace: url(/static/media/curriculum-landing-about-pace.a7be02a84427bcd06b31.svg#dark);
  --curriculum-landing-about-free: url(/static/media/curriculum-landing-about-free.a87aac27874151783974.svg#dark);
  --curriculum-landing-about-bullet: url(/static/media/curriculum-landing-about-bullet.6ddad7f362afafb9f1d2.svg#dark);
  --curriculum-landing-started-beginner: url(/static/media/curriculum-landing-started-beginner.98498a537d7bc0081455.svg#small-dark);
  --curriculum-landing-started-advanced: url(/static/media/curriculum-landing-started-advanced.f1ff5aabbd25eb7c84b9.svg#small-dark);
  --curriculum-landing-started-employment: url(/static/media/curriculum-landing-started-employment.6dfff83343aff136eed6.svg#small-dark);
  --curriculum-landing-started-educator: url(/static/media/curriculum-landing-started-educator.2b1973dd359c46918e58.svg#small-dark);
  color-scheme: dark;
}

@media screen and (min-width: 769px) {
  .dark {
    --curriculum-landing-started-beginner: url(/static/media/curriculum-landing-started-beginner.98498a537d7bc0081455.svg#dark);
    --curriculum-landing-started-advanced: url(/static/media/curriculum-landing-started-advanced.f1ff5aabbd25eb7c84b9.svg#dark);
    --curriculum-landing-started-employment: url(/static/media/curriculum-landing-started-employment.6dfff83343aff136eed6.svg#dark);
    --curriculum-landing-started-educator: url(/static/media/curriculum-landing-started-educator.2b1973dd359c46918e58.svg#dark);
    --curriculum-module-mdn-resource: url(/static/media/curriculum-mdn-resource.ad82b0efe13bfb85ad73.svg#dark);
    --curriculum-bullet: url(/static/media/curriculum-bullet.27dbb2bc7a67dfbd4667.svg#dark);
    --curriculum-about-covered: url(/static/media/curriculum-about-covered.8d89f3efba7db9e9b0a3.svg#dark);
    --curriculum-about-detail: url(/static/media/curriculum-about-detail.1cda4d4ead5d55f07fec.svg#dark);
    --curriculum-about-educators: url(/static/media/curriculum-about-educators.be34d13336e97cff607d.svg#dark);
    --curriculum-about-not: url(/static/media/curriculum-about-not.2d121a1b4c51086f9a45.svg#dark);
    --curriculum-about-students: url(/static/media/curriculum-about-students.78fad6876ac31e77ddd0.svg#dark);
  }
}

@media (prefers-color-scheme: light) {
  :root:not(.light):not(.dark) {
    --text-primary: #1b1b1b;
    --text-secondary: #4e4e4e;
    --text-active: #858585;
    --text-inactive: #9e9e9ea6;
    --text-link: #0069c2;
    --text-visited: #551a8b;
    --text-invert: #fff;
    --text-muted: #6f6f6f;
    --background-primary: #fff;
    --background-secondary: #f9f9fb;
    --background-tertiary: #ebeaea;
    --background-toc-active: #ebeaea;
    --background-mark-yellow: rgba(199, 183, 0, 0.4);
    --background-mark-green: rgba(0, 208, 97, 0.4);
    --background-information: rgba(0, 133, 242, 0.1);
    --background-warning: rgba(255, 42, 81, 0.1);
    --background-critical: rgba(211, 0, 56, 0.1);
    --background-success: rgba(0, 121, 54, 0.1);
    --border-primary: #cdcdcd;
    --border-secondary: #cdcdcd;
    --button-primary-default: #1b1b1b;
    --button-primary-hover: #696969;
    --button-primary-active: #9e9e9e;
    --button-primary-inactive: #1b1b1b;
    --button-secondary-default: #fff;
    --button-secondary-hover: #cdcdcd;
    --button-secondary-active: #cdcdcd;
    --button-secondary-inactive: #f9f9fb;
    --button-secondary-border-focus: #0085f2;
    --button-secondary-border-red: #ff97a0;
    --button-secondary-border-red-focus: #ffd9dc;
    --icon-primary: #696969;
    --icon-secondary: #b3b3b3;
    --icon-information: #0085f2;
    --icon-warning: #ff2a51;
    --icon-critical: #d30038;
    --icon-success: #007936;
    --accent-primary: #0085f2;
    --accent-primary-engage: rgba(0, 133, 242, 0.1);
    --accent-secondary: #0085f2;
    --accent-tertiary: rgba(0, 133, 242, 0.1);
    --shadow-01: 0 1px 2px rgba(43, 42, 51, 0.05);
    --shadow-02: 0 1px 6px rgba(43, 42, 51, 0.1);
    --focus-01: 0 0 0 3px rgba(0, 144, 237, 0.4);
    --field-focus-border: #0085f2;
    --code-token-tag: #0069c2;
    --code-token-punctuation: #858585;
    --code-token-attribute-name: #d30038;
    --code-token-attribute-value: #007936;
    --code-token-comment: #858585;
    --code-token-default: #1b1b1b;
    --code-token-selector: #872bff;
    --code-background-inline: #f2f1f1;
    --code-background-block: #f2f1f1;
    --notecard-link-color: #343434;
    --scrollbar-bg: transparent;
    --scrollbar-color: rgba(0, 0, 0, 0.25);
    --category-color: #0085f2;
    --category-color-background: #0085f210;
    --code-color: #5e9eff;
    --mark-color: #dce2f2;
    --plus-accent-color: #d30038;
    --html-accent-color: #d30038;
    --css-accent-color: #0069c2;
    --js-accent-color: #afa100;
    --http-accent-color: #007936;
    --apis-accent-color: #872bff;
    --learn-accent-color: #d00058;
    --plus-code-color: #0069c2;
    --html-code-color: #9e0027;
    --css-code-color: #0069c2;
    --js-code-color: #746a00;
    --http-code-color: #007936;
    --apis-code-color: #872bff;
    --learn-code-color: #d00058;
    --plus-mark-color: #ffd9dc;
    --html-mark-color: #ffd9dc;
    --css-mark-color: #dce2f2;
    --js-mark-color: #f0e498;
    --http-mark-color: #a9f3ba;
    --apis-mark-color: #e6deff;
    --learn-mark-color: #ffd9df;
    --plus-accent-background-color: #ff2a5130;
    --html-accent-background-color: #ff2a5130;
    --css-accent-background-color: #0085f230;
    --js-accent-background-color: #93870030;
    --http-accent-background-color: #009a4630;
    --apis-accent-background-color: #9b65ff30;
    --learn-accent-background-color: #ff1f7230;
    --plus-accent-engage: rgba(255, 42, 81, 0.7);
    --html-accent-engage: rgba(255, 42, 81, 0.7);
    --css-accent-engage: rgba(0, 133, 242, 0.7);
    --js-accent-engage: rgba(147, 135, 0, 0.7);
    --http-accent-engage: rgba(0, 154, 70, 0.7);
    --apis-accent-engage: rgba(155, 101, 255, 0.7);
    --learn-accent-engage: rgba(255, 31, 114, 0.7);
    --modal-backdrop-color: rgba(27, 27, 27, 0.1);
    --blend-color: #fff80;
    --text-primary-red: #d30038;
    --text-primary-green: #007936;
    --text-primary-blue: #0069c2;
    --text-primary-yellow: #746a00;
    --collections-link: #9e0027;
    --collections-header: #ffd9dc;
    --collections-icon: #ff2a51;
    --updates-link: #0069c2;
    --updates-header: #f9f9fb;
    --updates-icon: #0085f2;
    --ai-help-link: #007936;
    --ai-help-header: #f9f9fb;
    --ai-help-icon: #009a46;
    --ai-help-accent-background-color: #009a4610;
    --form-limit-color: #696969;
    --form-limit-color-emphasis: #4e4e4e;
    --form-invalid-color: #d30038;
    --form-invalid-focus-color: #ff2a51;
    --form-invalid-focus-effect-color: rgba(255, 42, 81, 0.2);
    --baseline-high-bg: #e6f4ea;
    --baseline-high-engine-bg: #ceead6;
    --baseline-high-img: url(/static/media/high.1cadd1dd8633aafe4118.svg);
    --baseline-high-check: #099949;
    --baseline-low-bg: #e8f0fe;
    --baseline-low-engine-bg: #d2e3fc;
    --baseline-low-check: #1a73e8;
    --baseline-low-img: url(/static/media/low.f0f04252a312a99f0354.svg);
    --baseline-low-pill-bg: #3367d6;
    --baseline-low-pill-color: #f1f3f4;
    --baseline-limited-bg: #f1f3f4;
    --baseline-limited-engine-bg: #e3e6e8;
    --baseline-limited-img: url(/static/media/limited.33014e3dcdb86f37e0c8.svg);
    --baseline-limited-check: #1e8e3e;
    --baseline-limited-cross: #ea8600;
    --curriculum-bg-color: #fcefe2;
    --curriculum-bg-color-note: hsla(30, 81%, 94%, 0.5);
    --curriculum-bg-large-color: #fcefe2;
    --curriculum-bg-color-topic-standards: #ff2a5130;
    --curriculum-bg-color-topic-styling: #0085f230;
    --curriculum-bg-color-topic-scripting: #93870030;
    --curriculum-bg-color-topic-tooling: #009a4630;
    --curriculum-bg-color-topic-practices: #9b65ff30;
    --curriculum-bg-color-landing: #fff;
    --curriculum-bg-color-landing-about-ul: #fff;
    --curriculum-bg-color-landing-top-icon: #fcefe2;
    --curriculum-bg-color-landing-stairway-floor: #fcefe2;
    --curriculum-category-color: #e3642a;
    --curriculum-color: #d47d55;
    --curriculum-color-topic-standards: #d30038;
    --curriculum-color-topic-styling: #0069c2;
    --curriculum-color-topic-scripting: #746a00;
    --curriculum-color-topic-tooling: #007936;
    --curriculum-color-topic-practices: #872bff;
    --curriculum-color-landing-laptop: #e3642a;
    --curriculum-border-color-list-item: #f2f1f1;
    --curriculum-border-color-list-item-hover: rgba(227, 100, 42, 0.7);
    --curriculum-bg-color-list-item-body: #fff;
    --curriculum-color-list-item-icon-topic-standards: #d30038;
    --curriculum-color-list-item-icon-topic-styling: #0069c2;
    --curriculum-color-list-item-icon-topic-scripting: #746a00;
    --curriculum-color-list-item-icon-topic-tooling: #007936;
    --curriculum-color-list-item-icon-topic-practices: #872bff;
    --curriculum-bg-color-list-item-icon-topic-standards: #fff;
    --curriculum-bg-color-list-item-icon-topic-styling: #fff;
    --curriculum-bg-color-list-item-icon-topic-scripting: #fff;
    --curriculum-bg-color-list-item-icon-topic-tooling: #fff;
    --curriculum-bg-color-list-item-icon-topic-practices: #fff;
    --curriculum-bg-color-list-item-topic-standards: #ff2a5130;
    --curriculum-bg-color-list-item-topic-styling: #0085f230;
    --curriculum-bg-color-list-item-topic-scripting: #93870030;
    --curriculum-bg-color-list-item-topic-tooling: #009a4630;
    --curriculum-bg-color-list-item-topic-practices: #9b65ff30;
    --curriculum-shadow: 4px 4px 8px 0 hsla(0, 0%, 70%, 0.18),
      -4px 4px 8px 0 hsla(0, 0%, 70%, 0.15);
    --curriculum-shadow-landing-about-ul: 0 4px 10px 0 rgba(227, 100, 42, 0.06),
      0 -2px 4px 0 rgba(178, 92, 53, 0.06);
    --curriculum-landing-about-beginner: url(/static/media/curriculum-landing-about-beginner.adfe1ead579191b87263.svg#light);
    --curriculum-landing-about-pace: url(/static/media/curriculum-landing-about-pace.a7be02a84427bcd06b31.svg#light);
    --curriculum-landing-about-free: url(/static/media/curriculum-landing-about-free.a87aac27874151783974.svg#light);
    --curriculum-landing-about-bullet: url(/static/media/curriculum-landing-about-bullet.6ddad7f362afafb9f1d2.svg#light);
    --curriculum-landing-started-beginner: url(/static/media/curriculum-landing-started-beginner.98498a537d7bc0081455.svg#small-light);
    --curriculum-landing-started-advanced: url(/static/media/curriculum-landing-started-advanced.f1ff5aabbd25eb7c84b9.svg#small-light);
    --curriculum-landing-started-employment: url(/static/media/curriculum-landing-started-employment.6dfff83343aff136eed6.svg#small-light);
    --curriculum-landing-started-educator: url(/static/media/curriculum-landing-started-educator.2b1973dd359c46918e58.svg#small-light);
    color-scheme: light;
  }
}

@media screen and (prefers-color-scheme: light) and (min-width: 769px) {
  :root:not(.light):not(.dark) {
    --curriculum-landing-started-beginner: url(/static/media/curriculum-landing-started-beginner.98498a537d7bc0081455.svg#light);
    --curriculum-landing-started-advanced: url(/static/media/curriculum-landing-started-advanced.f1ff5aabbd25eb7c84b9.svg#light);
    --curriculum-landing-started-employment: url(/static/media/curriculum-landing-started-employment.6dfff83343aff136eed6.svg#light);
    --curriculum-landing-started-educator: url(/static/media/curriculum-landing-started-educator.2b1973dd359c46918e58.svg#light);
    --curriculum-module-mdn-resource: url(/static/media/curriculum-mdn-resource.ad82b0efe13bfb85ad73.svg#light);
    --curriculum-bullet: url(/static/media/curriculum-bullet.27dbb2bc7a67dfbd4667.svg#light);
    --curriculum-about-covered: url(/static/media/curriculum-about-covered.8d89f3efba7db9e9b0a3.svg#light);
    --curriculum-about-detail: url(/static/media/curriculum-about-detail.1cda4d4ead5d55f07fec.svg#light);
    --curriculum-about-educators: url(/static/media/curriculum-about-educators.be34d13336e97cff607d.svg#light);
    --curriculum-about-not: url(/static/media/curriculum-about-not.2d121a1b4c51086f9a45.svg#light);
    --curriculum-about-students: url(/static/media/curriculum-about-students.78fad6876ac31e77ddd0.svg#light);
  }
}

@media (prefers-color-scheme: dark) {
  :root:not(.light):not(.dark) {
    --text-primary: #fff;
    --text-secondary: #cdcdcd;
    --text-active: #858585;
    --text-inactive: #cdcdcda6;
    --text-link: #8cb4ff;
    --text-visited: #ffadff;
    --text-invert: #1b1b1b;
    --text-muted: #858585;
    --background-primary: #1b1b1b;
    --background-secondary: #313131;
    --background-tertiary: #858585;
    --background-toc-active: #343434;
    --background-mark-yellow: rgba(199, 183, 0, 0.4);
    --background-mark-green: rgba(0, 208, 97, 0.4);
    --background-information: rgba(0, 133, 242, 0.1);
    --background-warning: rgba(255, 42, 81, 0.1);
    --background-critical: rgba(211, 0, 56, 0.1);
    --background-success: rgba(0, 121, 54, 0.1);
    --border-primary: #858585;
    --border-secondary: #696969;
    --button-primary-default: #fff;
    --button-primary-hover: #cdcdcd;
    --button-primary-active: #9e9e9e;
    --button-primary-inactive: #fff;
    --button-secondary-default: #4e4e4e;
    --button-secondary-hover: #858585;
    --button-secondary-active: #9e9e9e;
    --button-secondary-inactive: #4e4e4e;
    --button-secondary-border-focus: #0085f2;
    --button-secondary-border-red: #ff97a0;
    --button-secondary-border-red-focus: #ffd9dc;
    --icon-primary: #fff;
    --icon-secondary: #b3b3b3;
    --icon-information: #5e9eff;
    --icon-warning: #afa100;
    --icon-critical: #ff707f;
    --icon-success: #00b755;
    --accent-primary: #5e9eff;
    --accent-primary-engage: rgba(94, 158, 255, 0.1);
    --accent-secondary: #5e9eff;
    --accent-tertiary: rgba(0, 133, 242, 0.1);
    --shadow-01: 0 1px 2px rgba(251, 251, 254, 0.2);
    --shadow-02: 0 1px 6px rgba(251, 251, 254, 0.2);
    --focus-01: 0 0 0 3px rgba(251, 251, 254, 0.5);
    --field-focus-border: #fff;
    --code-token-tag: #c1cff1;
    --code-token-punctuation: #b3b3b3;
    --code-token-attribute-name: #ff97a0;
    --code-token-attribute-value: #00d061;
    --code-token-comment: #b3b3b3;
    --code-token-default: #fff;
    --code-token-selector: #bea5ff;
    --code-background-inline: #343434;
    --code-background-block: #343434;
    --notecard-link-color: #e2e2e2;
    --scrollbar-bg: transparent;
    --scrollbar-color: hsla(0, 0%, 100%, 0.25);
    --category-color: #8cb4ff;
    --category-color-background: #8cb4ff70;
    --code-color: #c1cff1;
    --mark-color: #004d92;
    --plus-accent-color: #ff97a0;
    --html-accent-color: #ff707f;
    --css-accent-color: #8cb4ff;
    --js-accent-color: #afa100;
    --http-accent-color: #00b755;
    --apis-accent-color: #ae8aff;
    --learn-accent-color: #ff6d91;
    --plus-code-color: #c1cff1;
    --html-code-color: #f9f9fb;
    --css-code-color: #c1cff1;
    --js-code-color: #c7b700;
    --http-code-color: #00d061;
    --apis-code-color: #bea5ff;
    --learn-code-color: #ff93aa;
    --plus-mark-color: #9e0027;
    --html-mark-color: #9e0027;
    --css-mark-color: #004d92;
    --js-mark-color: #564e00;
    --http-mark-color: #005a26;
    --apis-mark-color: #6800cf;
    --learn-mark-color: #9e0041;
    --plus-accent-background-color: #ff2a5130;
    --html-accent-background-color: #ff2a5130;
    --css-accent-background-color: #0085f230;
    --js-accent-background-color: #93870030;
    --http-accent-background-color: #009a4630;
    --apis-accent-background-color: #9b65ff30;
    --learn-accent-background-color: #ff1f7230;
    --plus-accent-engage: rgba(255, 112, 127, 0.7);
    --html-accent-engage: rgba(255, 112, 127, 0.7);
    --css-accent-engage: rgba(140, 180, 255, 0.7);
    --js-accent-engage: rgba(175, 161, 0, 0.7);
    --http-accent-engage: rgba(0, 183, 85, 0.7);
    --apis-accent-engage: rgba(174, 138, 255, 0.7);
    --learn-accent-engage: rgba(255, 109, 145, 0.7);
    --modal-backdrop-color: rgba(27, 27, 27, 0.7);
    --blend-color: #00080;
    --text-primary-red: #ff97a0;
    --text-primary-green: #00d061;
    --text-primary-blue: #8cb4ff;
    --text-primary-yellow: #c7b700;
    --collections-link: #ff97a0;
    --collections-header: #40000a;
    --collections-icon: #d30038;
    --updates-link: #8cb4ff;
    --updates-header: #000;
    --updates-icon: #8cb4ff;
    --ai-help-link: #00d061;
    --ai-help-header: #000;
    --ai-help-icon: #00d061;
    --ai-help-accent-background-color: #009a4630;
    --form-limit-color: #9e9e9e;
    --form-limit-color-emphasis: #b3b3b3;
    --form-invalid-color: #ff97a0;
    --form-invalid-focus-color: #ff707f;
    --form-invalid-focus-effect-color: rgba(255, 112, 127, 0.2);
    --baseline-high-bg: #0e2a10;
    --baseline-high-engine-bg: #031b05;
    --baseline-high-img: url(/static/media/high-dark.b34312d314ead604bfbd.svg);
    --baseline-high-check: #099949;
    --baseline-low-bg: #041e49;
    --baseline-low-engine-bg: #020d20;
    --baseline-low-check: #1a73e8;
    --baseline-low-img: url(/static/media/low-dark.4ed53864ce1653e32eaa.svg);
    --baseline-low-pill-bg: #3367d6;
    --baseline-low-pill-color: #f1f3f4;
    --baseline-limited-bg: #282a2c;
    --baseline-limited-engine-bg: #1d1e1f;
    --baseline-limited-img: url(/static/media/limited-dark.407e5f7602b35f7d9bc8.svg);
    --baseline-limited-check: #1e8e3e;
    --baseline-limited-cross: #ea8600;
    --curriculum-color: #e3642a;
    --curriculum-color-topic-standards: #f2919c;
    --curriculum-color-topic-styling: #91a6f2;
    --curriculum-color-topic-scripting: #f2cf8f;
    --curriculum-color-topic-tooling: #8ff2a4;
    --curriculum-color-topic-practices: #c891f2;
    --curriculum-bg-color: #664b33;
    --curriculum-bg-color-note: #332e2b;
    --curriculum-bg-large-color: #343434;
    --curriculum-bg-color-topic-standards: #994b53;
    --curriculum-bg-color-topic-styling: #4e609e;
    --curriculum-bg-color-topic-scripting: #7d683d;
    --curriculum-bg-color-topic-tooling: #3d7c4b;
    --curriculum-bg-color-topic-practices: #584280;
    --curriculum-bg-color-landing: #0e0b0a;
    --curriculum-bg-color-landing-about-ul: #000;
    --curriculum-bg-color-landing-top-icon: rgba(178, 92, 53, 0.3);
    --curriculum-bg-color-landing-stairway-floor: #895b33;
    --curriculum-category-color: #e3642a;
    --curriculum-bg-color-grey: #1f1c1a;
    --curriculum-bg-color-orange: #b25c35;
    --curriculum-color-landing-laptop: #b25c35;
    --curriculum-bg-color-list-item-body: #000;
    --curriculum-border-color-list-item: #4e4e4e;
    --curriculum-border-color-list-item-hover: rgba(227, 100, 42, 0.7);
    --curriculum-bg-color-list-item-topic-standards: #343434;
    --curriculum-bg-color-list-item-topic-styling: #343434;
    --curriculum-bg-color-list-item-topic-scripting: #343434;
    --curriculum-bg-color-list-item-topic-tooling: #343434;
    --curriculum-bg-color-list-item-topic-practices: #343434;
    --curriculum-color-list-item-icon-topic-standards: #f2919c;
    --curriculum-color-list-item-icon-topic-styling: #91a6f2;
    --curriculum-color-list-item-icon-topic-scripting: #f2cf8f;
    --curriculum-color-list-item-icon-topic-tooling: #8ff2a4;
    --curriculum-color-list-item-icon-topic-practices: #c891f2;
    --curriculum-bg-color-list-item-icon-topic-standards: #804248;
    --curriculum-bg-color-list-item-icon-topic-styling: #425080;
    --curriculum-bg-color-list-item-icon-topic-scripting: #806a42;
    --curriculum-bg-color-list-item-icon-topic-tooling: #428050;
    --curriculum-bg-color-list-item-icon-topic-practices: #584280;
    --curriculum-shadow: 2px 2px 5px 0 rgba(36, 36, 36, 0.15),
      -2px 2px 8px 0 rgba(87, 87, 87, 0.15);
    --curriculum-shadow-landing-about-ul: 0 4px 10px 0 rgba(227, 100, 42, 0.06),
      0 -2px 4px 0 rgba(178, 92, 53, 0.06);
    --curriculum-landing-about-beginner: url(/static/media/curriculum-landing-about-beginner.adfe1ead579191b87263.svg#dark);
    --curriculum-landing-about-pace: url(/static/media/curriculum-landing-about-pace.a7be02a84427bcd06b31.svg#dark);
    --curriculum-landing-about-free: url(/static/media/curriculum-landing-about-free.a87aac27874151783974.svg#dark);
    --curriculum-landing-about-bullet: url(/static/media/curriculum-landing-about-bullet.6ddad7f362afafb9f1d2.svg#dark);
    --curriculum-landing-started-beginner: url(/static/media/curriculum-landing-started-beginner.98498a537d7bc0081455.svg#small-dark);
    --curriculum-landing-started-advanced: url(/static/media/curriculum-landing-started-advanced.f1ff5aabbd25eb7c84b9.svg#small-dark);
    --curriculum-landing-started-employment: url(/static/media/curriculum-landing-started-employment.6dfff83343aff136eed6.svg#small-dark);
    --curriculum-landing-started-educator: url(/static/media/curriculum-landing-started-educator.2b1973dd359c46918e58.svg#small-dark);
    color-scheme: dark;
  }
}

@media screen and (prefers-color-scheme: dark) and (min-width: 769px) {
  :root:not(.light):not(.dark) {
    --curriculum-landing-started-beginner: url(/static/media/curriculum-landing-started-beginner.98498a537d7bc0081455.svg#dark);
    --curriculum-landing-started-advanced: url(/static/media/curriculum-landing-started-advanced.f1ff5aabbd25eb7c84b9.svg#dark);
    --curriculum-landing-started-employment: url(/static/media/curriculum-landing-started-employment.6dfff83343aff136eed6.svg#dark);
    --curriculum-landing-started-educator: url(/static/media/curriculum-landing-started-educator.2b1973dd359c46918e58.svg#dark);
    --curriculum-module-mdn-resource: url(/static/media/curriculum-mdn-resource.ad82b0efe13bfb85ad73.svg#dark);
    --curriculum-bullet: url(/static/media/curriculum-bullet.27dbb2bc7a67dfbd4667.svg#dark);
    --curriculum-about-covered: url(/static/media/curriculum-about-covered.8d89f3efba7db9e9b0a3.svg#dark);
    --curriculum-about-detail: url(/static/media/curriculum-about-detail.1cda4d4ead5d55f07fec.svg#dark);
    --curriculum-about-educators: url(/static/media/curriculum-about-educators.be34d13336e97cff607d.svg#dark);
    --curriculum-about-not: url(/static/media/curriculum-about-not.2d121a1b4c51086f9a45.svg#dark);
    --curriculum-about-students: url(/static/media/curriculum-about-students.78fad6876ac31e77ddd0.svg#dark);
  }
}