:root {
  --font-fallback: BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu",
    "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-sans;
  --font-body: Inter, var(--font-fallback);
  --font-code: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console,
    monospace;
  --type-body-l: 400 1rem/1.1876 var(--font-body); /* 16px/19px */
  --type-emphasis-m: 600 0.8125rem/1.23 var(--font-body); /* 13px/16px */
  --font-heading: var(--font-body);
  --type-label-s: 600 0.625rem/1.2 var(--font-heading); /* 10px/12px */
  --type-code-regular: 400 0.875rem/1.5 var(--font-code); /* 14px/21px */

  --elem-radius: 0.25rem;
  --button-height: 2rem;
  --button-radius: var(--elem-radius);
}

:root,
.theme-light {
  /* Everything below here needs to be duplicated in .dark below for themeing */
  --text-primary: #1b1b1b;
  --text-secondary: #4e4e4e;
  --text-inactive: #9e9e9ea6;
  --text-link: #0069c2;
  --text-invert: #fff;
  --background-primary: #fff;
  --background-secondary: #f9f9fb;
  --background-tertiary: #fff;
  --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: 0px 1px 2px rgba(43, 42, 51, 0.05);
  --shadow-02: 0px 1px 6px rgba(43, 42, 51, 0.1);
  --focus-01: 0px 0px 0px 3px rgba(0, 144, 237, 0.4);
  --field-focus-border: #0085f2;
  --code-token-tag: #0069c2;
  --code-token-punctuation: #9e9e9e;
  --code-token-attribute-name: #d30038;
  --code-token-attribute-value: #007936;
  --code-token-comment: #757575;
  --code-token-default: #1b1b1b;
  --code-token-selector: #872bff;
  --code-token-class-selector: #1c4482;
  --code-token-pseudo-class: #085;
  --code-token-variable-2: #8c6300;
  --code-token-at-rule: #8c6300;
  --code-token-meta: #555;
  --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;
  --selection-background-color: #d3e7ff;
  --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);
  --homepage-hero-bg: radial-gradient(
    114.42% 123.24% at 6.69% 13.67%,
    rgba(51, 178, 252, 0.2) 22.84%,
    rgba(152, 82, 250, 0.2) 47.63%,
    rgba(255, 230, 0, 0.2) 82.74%
  );
  --homepage-secondary-bg: linear-gradient(
    90deg,
    #8524ff -43.99%,
    #4d7fff 159.52%
  );
  --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;
  color-scheme: light;
}

.theme-dark {
  --text-primary: #fff;
  --text-secondary: #cdcdcd;
  --text-inactive: #cdcdcda6;
  --text-link: #8cb4ff;
  --text-invert: #1b1b1b;
  --background-primary: #1b1b1b;
  --background-secondary: #343434;
  --background-tertiary: #4e4e4e;
  --background-toc-active: #343434;
  --background-mark-yellow: rgba(199, 183, 0, 0.4);
  --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;
  --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;
  --shadow-01: 0px 1px 2px rgba(251, 251, 254, 0.2);
  --shadow-02: 0px 1px 6px rgba(251, 251, 254, 0.2);
  --focus-01: 0px 0px 0px 3px rgba(251, 251, 254, 0.5);
  --field-focus-border: #fff;
  --code-token-tag: #c1cff1;
  --code-token-punctuation: #9e9e9e;
  --code-token-attribute-name: #ffbb88;
  --code-token-attribute-value: #00d061;
  --code-token-comment: #9e9e9e;
  --code-token-default: #fff;
  --code-token-selector: #bea5ff;
  --code-token-class-selector: #5f9eff;
  --code-token-pseudo-class: #45bd90;
  --code-token-variable-2: #d2a740;
  --code-token-at-rule: #d2a740;
  --code-token-meta: #555;
  --code-background-inline: #343434;
  --code-background-block: #343434;
  --notecard-link-color: #e2e2e2;
  --scrollbar-color: rgba(255, 255, 255, 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-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);
  --selection-background-color: #233244;
  --blend-color: #00080;
  --text-primary-red: #ff97a0;
  --text-primary-green: #00d061;
  --text-primary-blue: #8cb4ff;
  --text-primary-yellow: #c7b700;
  color-scheme: dark;
}

@media (prefers-color-scheme: light) {
  :root {
    --text-primary: #1b1b1b;
    --text-secondary: #4e4e4e;
    --text-inactive: #9e9e9ea6;
    --text-link: #0069c2;
    --text-invert: #fff;
    --background-primary: #fff;
    --background-secondary: #f9f9fb;
    --background-tertiary: #fff;
    --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: 0px 1px 2px rgba(43, 42, 51, 0.05);
    --shadow-02: 0px 1px 6px rgba(43, 42, 51, 0.1);
    --focus-01: 0px 0px 0px 3px rgba(0, 144, 237, 0.4);
    --field-focus-border: #0085f2;
    --code-token-tag: #0069c2;
    --code-token-punctuation: #9e9e9e;
    --code-token-attribute-name: #d30038;
    --code-token-attribute-value: #007936;
    --code-token-comment: #757575;
    --code-token-default: #1b1b1b;
    --code-token-selector: #872bff;
    --code-token-class-selector: #1c4482;
    --code-token-pseudo-class: #085;
    --code-token-variable-2: #8c6300;
    --code-token-at-rule: #8c6300;
    --code-token-meta: #555;
    --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;
    --selection-background-color: #d3e7ff;
    --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);
    --homepage-hero-bg: radial-gradient(
      114.42% 123.24% at 6.69% 13.67%,
      rgba(51, 178, 252, 0.2) 22.84%,
      rgba(152, 82, 250, 0.2) 47.63%,
      rgba(255, 230, 0, 0.2) 82.74%
    );
    --homepage-secondary-bg: linear-gradient(
      90deg,
      #8524ff -43.99%,
      #4d7fff 159.52%
    );
    --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;
    color-scheme: light;
  }
}

/* This is duplicated from the .dark class above. */
@media (prefers-color-scheme: dark) {
  :root {
    --text-primary: #fff;
    --text-secondary: #cdcdcd;
    --text-inactive: #cdcdcda6;
    --text-link: #8cb4ff;
    --text-invert: #1b1b1b;
    --background-primary: #1b1b1b;
    --background-secondary: #343434;
    --background-tertiary: #4e4e4e;
    --background-toc-active: #343434;
    --background-mark-yellow: rgba(199, 183, 0, 0.4);
    --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;
    --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;
    --shadow-01: 0px 1px 2px rgba(251, 251, 254, 0.2);
    --shadow-02: 0px 1px 6px rgba(251, 251, 254, 0.2);
    --focus-01: 0px 0px 0px 3px rgba(251, 251, 254, 0.5);
    --field-focus-border: #fff;
    --code-token-tag: #c1cff1;
    --code-token-punctuation: #9e9e9e;
    --code-token-attribute-name: #ffbb88;
    --code-token-attribute-value: #00d061;
    --code-token-comment: #9e9e9e;
    --code-token-default: #fff;
    --code-token-selector: #bea5ff;
    --code-token-class-selector: #5f9eff;
    --code-token-pseudo-class: #45bd90;
    --code-token-variable-2: #d2a740;
    --code-token-at-rule: #d2a740;
    --code-token-meta: #555;
    --code-background-inline: #343434;
    --code-background-block: #343434;
    --notecard-link-color: #e2e2e2;
    --scrollbar-color: rgba(255, 255, 255, 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-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;
    --selection-background-color: #233244;
    color-scheme: dark;
  }
}

* {
  box-sizing: border-box;
}

body {
  color: var(--text-primary);
  background-color: var(--background-primary);
  margin: 0;
  padding: 0;
  height: 100%;
  font: var(--type-body-l);
}

.output-header {
  margin: 0;
  padding: 0.5rem 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.border-rounded-top {
  border: 1px solid var(--border-primary);
  border-radius: var(--button-radius) var(--button-radius) 0 0;
}

.border-rounded-top-no-bottom {
  border: solid var(--border-primary);
  border-width: 1px 1px 0;
  border-radius: var(--button-radius) var(--button-radius) 0 0;
}

.border-sides {
  border: solid var(--border-primary);
  border-width: 0 1px;
}

.border-rounded-bottom {
  border: solid var(--border-primary);
  border-width: 0 1px 1px;
  border-radius: 0 0 var(--button-radius) var(--button-radius);
}

.output-heading {
  margin: 0;
  font: var(--type-body-l);
}

.reset {
  background-color: transparent;
  color: var(--text-primary);
  font: var(--type-label-s);
  margin: 0;
  padding: 0.7em 0.9em;
  height: var(--button-height);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  border: none;
  max-width: 100px;
  cursor: pointer;
  border-radius: var(--button-radius);
}

.reset:hover {
  background-color: var(--button-secondary-hover);
}

.user-message {
  display: none;
  position: absolute;
  top: 30px;
  left: 50%;
  background-color: var(--text-secondary);
  color: var(--background-primary);
  padding: 0.5rem;
  border-radius: var(--elem-radius);
  font-size: 14px;
  opacity: 1;
  transition: opacity 0.5s;
  z-index: 4;
}

.warning-container {
  border: 1px solid var(--border-primary);
  border-top: 0;
  border-radius: 0 0 var(--button-radius) var(--button-radius);
  padding: 16px;
}

.warning {
  position: relative;
  padding: 1rem 1rem 1rem 3rem;
  background-color: var(--background-warning);
  border-radius: var(--elem-radius);
  border: 1px solid var(--border-secondary);
  border-left: 4px solid var(--icon-warning);
  color: var(--text-secondary);
}

.fade-in {
  animation: fadein 0.5s;
}

.fade-out {
  animation: fadeout 0.5s;
}

.hide {
  opacity: 0;
}

.hidden {
  display: none !important;
}

.show {
  display: block;
}

/* Hide visually, but not to screen readers */
.visually-hidden {
  position: absolute !important; /* stylelint-disable-line */
  height: 1px;
  width: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  padding: 0;
  border: 0;
}

/* mobile ends */
@media screen and (min-width: 47.9375em) {
  header h4 {
    font-size: 1.1rem;
  }
}

/* tablet ends */
@media screen and (min-width: 63.9375em) {
  header h4 {
    font-size: 1.4rem;
  }
}

@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeout {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}