/* Design-System */
/* Design-System: Reset */
:root {
  -webkit-font-smoothing: antialiased !important;
  box-sizing: border-box !important;
}

html, body, ul, ol, li, p, dl, dt, dd {
  margin: 0;
  padding: 0;
}
h1, h2, h3, h4, h5, h6 {
  font-size: 1em;
  font-weight: normal;
  margin: 0;
  padding: 0;
}
ul, ol {
  list-style: none;
}
svg {
  display: block;
}

/* Design-System: Fonts */
@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,700;1,9..40,400;1,9..40,500;1,9..40,700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=DM+Mono:ital,wght@0,400;0,500;1,400;1,500&display=swap");

:root {
  /* Display: Sans serif */
  --zenchef-font-sans_display_l: 700 48px/56px 'DM Sans', ui-sans-serif, sans-serif;
  --zenchef-font-sans_display_m: 700 40px/48px 'DM Sans', ui-sans-serif, sans-serif;
  --zenchef-font-sans_display_s: 700 32px/40px 'DM Sans', ui-sans-serif, sans-serif;

  /* Title: Sans serif */
  --zenchef-font-sans_title_xl: 700 24px/32px 'DM Sans', ui-sans-serif, sans-serif;
  --zenchef-letterSpacing-sans_title_xl: -2%;
  --zenchef-font-sans_title_l: 700 20px/28px 'DM Sans', ui-sans-serif, sans-serif;
  --zenchef-font-sans_title_m: 700 16px/20px 'DM Sans', ui-sans-serif, sans-serif;
  --zenchef-font-sans_title_s: 700 14px/20px 'DM Sans', ui-sans-serif, sans-serif;
  --zenchef-font-sans_title_xs: 700 12px/16px 'DM Sans', ui-sans-serif, sans-serif;
  --zenchef-letterSpacing-sans_title_xs: 4%;
  --zenchef-textTransform-sans_title_xs: uppercase;

  /* Text: Sans serif */
  --zenchef-font-sans_text_l_regular: 400 16px/20px 'DM Sans', ui-sans-serif, sans-serif;
  --zenchef-font-sans_text_l_bold: 700 16px/20px 'DM Sans', ui-sans-serif, sans-serif;
  --zenchef-font-sans_text_m_regular: 400 14px/20px 'DM Sans', ui-sans-serif, sans-serif;
  --zenchef-font-sans_text_m_bold: 700 14px/20px 'DM Sans', ui-sans-serif, sans-serif;
  --zenchef-font-sans_text_s_regular: 400 12px/16px 'DM Sans', ui-sans-serif, sans-serif;
  --zenchef-font-sans_text_s_bold: 700 12px/16px 'DM Sans', ui-sans-serif, sans-serif;

  /* Text: Monospace */
  --zenchef-font-mono_text_l_regular: 400 16px/20px 'DM Mono', monospace;
  --zenchef-font-mono_text_l_bold: 700 16px/20px 'DM Mono', monospace;
  --zenchef-font-mono_text_m_regular: 400 14px/20px 'DM Mono', monospace;
  --zenchef-font-mono_text_m_bold: 700 14px/20px 'DM Mono', monospace;
  --zenchef-font-mono_text_s_regular: 400 12px/16px 'DM Mono', monospace;
  --zenchef-font-mono_text_s_bold: 700 12px/16px 'DM Mono', monospace;

  /* Paragraph: Sans serif */
  --zenchef-font-sans_paragraph_l_regular: 400 16px/24px 'DM Sans', ui-sans-serif, sans-serif;
  --zenchef-font-sans_paragraph_l_bold: 700 16px/24px 'DM Sans', ui-sans-serif, sans-serif;
  --zenchef-font-sans_paragraph_m_regular: 400 14px/24px 'DM Sans', ui-sans-serif, sans-serif;
  --zenchef-font-sans_paragraph_m_bold: 700 14px/24px 'DM Sans', ui-sans-serif, sans-serif;
  --zenchef-font-sans_paragraph_s_regular: 400 12px/20px 'DM Sans', ui-sans-serif, sans-serif;
  --zenchef-font-sans_paragraph_s_bold: 700 12px/20px 'DM Sans', ui-sans-serif, sans-serif;

  /* Paragraph: Monospace */
  --zenchef-font-mono_paragraph_l_regular: 400 16px/24px 'DM Mono', monospace;
  --zenchef-font-mono_paragraph_l_bold: 700 16px/24px 'DM Mono', monospace;
  --zenchef-font-mono_paragraph_m_regular: 400 14px/24px 'DM Mono', monospace;
  --zenchef-font-mono_paragraph_m_bold: 700 14px/24px 'DM Mono', monospace;
  --zenchef-font-mono_paragraph_s_regular: 400 12px/20px 'DM Mono', monospace;
  --zenchef-font-mono_paragraph_s_bold: 700 12px/20px 'DM Mono', monospace;
}

/* Design-System: Colors */
:root {
  --zenchef-rgb-White: 255, 255, 255;
  --zenchef-rgb-Oat: 242, 232, 227;
  --zenchef-rgb-Cream: 237, 203, 171;
  --zenchef-rgb-Coffee: 90, 64, 39;
  --zenchef-rgb-BlueCheese: 206, 225, 249;
  --zenchef-rgb-Kale: 85, 95, 84;
  --zenchef-rgb-DigitalMatcha: 210, 252, 144;

  --zenchef-rgb-BlueTape50: 235, 240, 252;
  --zenchef-rgb-BlueTape100: 215, 226, 251;
  --zenchef-rgb-BlueTape200: 194, 209, 246;
  --zenchef-rgb-BlueTape300: 153, 179, 240;
  --zenchef-rgb-BlueTape400: 112, 149, 234;
  --zenchef-rgb-BlueTape500: 71, 118, 228;
  --zenchef-rgb-BlueTape600: 31, 88, 224;
  --zenchef-rgb-BlueTape700: 0, 65, 217;
  --zenchef-rgb-BlueTape800: 0, 39, 130;
  --zenchef-rgb-BlueTape900: 0, 26, 87;
  --zenchef-rgb-BlueTape: var(--zenchef-rgb-BlueTape700);

  --zenchef-rgb-Ink50: 245, 245, 247;
  --zenchef-rgb-Ink100: 240, 240, 242;
  --zenchef-rgb-Ink200: 229, 231, 234;
  --zenchef-rgb-Ink300: 209, 211, 217;
  --zenchef-rgb-Ink400: 179, 182, 192;
  --zenchef-rgb-Ink500: 102, 110, 128;
  --zenchef-rgb-Ink600: 71, 81, 103;
  --zenchef-rgb-Ink700: 51, 61, 86;
  --zenchef-rgb-Ink800: 20, 32, 61;
  --zenchef-rgb-Ink900: 0, 13, 44;
  --zenchef-rgb-Ink: var(--zenchef-rgb-Ink900);

  --zenchef-rgb-Olive50: 240, 240, 232;
  --zenchef-rgb-Olive100: 230, 230, 216;
  --zenchef-rgb-Olive200: 213, 213, 191;
  --zenchef-rgb-Olive300: 195, 195, 163;
  --zenchef-rgb-Olive400: 173, 173, 129;
  --zenchef-rgb-Olive500: 151, 151, 94;
  --zenchef-rgb-Olive600: 128, 128, 60;
  --zenchef-rgb-Olive700: 74, 74, 17;
  --zenchef-rgb-Olive800: 106, 106, 25;
  --zenchef-rgb-Olive900: 51, 51, 12;
  --zenchef-rgb-Olive: var(--zenchef-rgb-Olive700);

  --zenchef-rgb-Charcoal50: 246, 247, 247;
  --zenchef-rgb-Charcoal100: 239, 239, 239;
  --zenchef-rgb-Charcoal200: 217, 218, 218;
  --zenchef-rgb-Charcoal300: 201, 201, 201;
  --zenchef-rgb-Charcoal400: 167, 167, 167;
  --zenchef-rgb-Charcoal500: 97, 98, 98;
  --zenchef-rgb-Charcoal600: 76, 76, 76;
  --zenchef-rgb-Charcoal700: 36, 37, 37;
  --zenchef-rgb-Charcoal800: 22, 23, 23;
  --zenchef-rgb-Charcoal900: 9, 9, 9;
  --zenchef-rgb-Charcoal: var(--zenchef-rgb-Charcoal700);

  --zenchef-rgb-Red50: 254, 236, 237;
  --zenchef-rgb-Red100: 252, 221, 223;
  --zenchef-rgb-Red200: 254, 202, 204;
  --zenchef-rgb-Red300: 252, 165, 168;
  --zenchef-rgb-Red400: 247, 114, 119;
  --zenchef-rgb-Red500: 237, 56, 63;
  --zenchef-rgb-Red600: 204, 31, 37;
  --zenchef-rgb-Red700: 178, 23, 29;
  --zenchef-rgb-Red800: 150, 26, 31;
  --zenchef-rgb-Red900: 115, 18, 22;
  --zenchef-rgb-Red: var(--zenchef-rgb-Red500);

  --zenchef-rgb-Orange50: 254, 239, 221;
  --zenchef-rgb-Orange100: 254, 228, 195;
  --zenchef-rgb-Orange200: 253, 217, 170;
  --zenchef-rgb-Orange300: 251, 190, 116;
  --zenchef-rgb-Orange400: 248, 163, 63;
  --zenchef-rgb-Orange500: 253, 153, 2;
  --zenchef-rgb-Orange600: 231, 109, 15;
  --zenchef-rgb-Orange700: 191, 82, 15;
  --zenchef-rgb-Orange800: 140, 57, 14;
  --zenchef-rgb-Orange900: 104, 41, 9;
  --zenchef-rgb-Orange: var(--zenchef-rgb-Orange600);

  --zenchef-rgb-Yellow50: 255, 240, 205;
  --zenchef-rgb-Yellow100: 251, 229, 178;
  --zenchef-rgb-Yellow200: 244, 208, 120;
  --zenchef-rgb-Yellow300: 239, 192, 80;
  --zenchef-rgb-Yellow400: 233, 177, 41;
  --zenchef-rgb-Yellow500: 228, 162, 1;
  --zenchef-rgb-Yellow600: 191, 136, 1;
  --zenchef-rgb-Yellow700: 151, 107, 1;
  --zenchef-rgb-Yellow800: 93, 66, 0;
  --zenchef-rgb-Yellow900: 54, 39, 0;
  --zenchef-rgb-Yellow: var(--zenchef-rgb-Yellow500);

  --zenchef-rgb-Green50: 238, 248, 239;
  --zenchef-rgb-Green100: 220, 244, 224;
  --zenchef-rgb-Green200: 203, 234, 208;
  --zenchef-rgb-Green300: 168, 220, 177;
  --zenchef-rgb-Green400: 133, 206, 146;
  --zenchef-rgb-Green500: 38, 168, 60;
  --zenchef-rgb-Green600: 30, 134, 48;
  --zenchef-rgb-Green700: 23, 101, 36;
  --zenchef-rgb-Green800: 15, 67, 24;
  --zenchef-rgb-Green900: 11, 50, 18;
  --zenchef-rgb-Green: var(--zenchef-rgb-Green500);

  --zenchef-rgb-Blue50: 235, 240, 252;
  --zenchef-rgb-Blue100: 215, 226, 251;
  --zenchef-rgb-Blue200: 194, 209, 246;
  --zenchef-rgb-Blue300: 153, 179, 240;
  --zenchef-rgb-Blue400: 112, 149, 234;
  --zenchef-rgb-Blue500: 71, 118, 228;
  --zenchef-rgb-Blue600: 31, 88, 224;
  --zenchef-rgb-Blue700: 0, 65, 217;
  --zenchef-rgb-Blue800: 0, 39, 130;
  --zenchef-rgb-Blue900: 0, 26, 87;
  --zenchef-rgb-Blue: var(--zenchef-rgb-Blue600);

  --zenchef-rgb-Purple50: 241, 237, 255;
  --zenchef-rgb-Purple100: 230, 222, 255;
  --zenchef-rgb-Purple200: 225, 215, 253;
  --zenchef-rgb-Purple300: 179, 153, 253;
  --zenchef-rgb-Purple400: 139, 100, 251;
  --zenchef-rgb-Purple500: 106, 56, 251;
  --zenchef-rgb-Purple600: 82, 24, 250;
  --zenchef-rgb-Purple700: 61, 15, 193;
  --zenchef-rgb-Purple800: 51, 11, 165;
  --zenchef-rgb-Purple900: 40, 6, 136;
  --zenchef-rgb-Purple: var(--zenchef-rgb-Purple500);

  --zenchef-rgb-Pink50: 255, 238, 246;
  --zenchef-rgb-Pink100: 250, 223, 236;
  --zenchef-rgb-Pink200: 245, 198, 221;
  --zenchef-rgb-Pink300: 236, 149, 190;
  --zenchef-rgb-Pink400: 226, 99, 160;
  --zenchef-rgb-Pink500: 217, 50, 129;
  --zenchef-rgb-Pink600: 207, 0, 99;
  --zenchef-rgb-Pink700: 166, 0, 79;
  --zenchef-rgb-Pink800: 124, 0, 59;
  --zenchef-rgb-Pink900: 83, 0, 40;
  --zenchef-rgb-Pink: var(--zenchef-rgb-Pink500);
}

/* Design-System: Shadows */
:root {
  --zenchef-shadow-100:
    0px 3px 2px -1px rgba(var(--zenchef-rgb-Ink900), 0.08),
    0px 0px 0px 1px rgba(var(--zenchef-rgb-Ink300), 0.40) inset;
  --zenchef-shadow-200:
    0px 4px 8px -2px rgba(var(--zenchef-rgb-Ink900), 0.24),
    0px 0px 0px 1px rgba(var(--zenchef-rgb-Ink300), 0.40) inset;
  --zenchef-shadow-300:
    0px 20px 20px -8px rgba(var(--zenchef-rgb-Ink900), 0.24),
    0px 0px 0px 1px rgba(var(--zenchef-rgb-Ink300), 0.40) inset;
}

/* Design-System: Radius */
:root {
  --zenchef-radius-xs: 2px;
  --zenchef-radius-s: 4px;
  --zenchef-radius-m: 8px;
  --zenchef-radius-l: 16px;
  --zenchef-radius-pill: 200px;
}

/* Design-System: Selection */
::selection {
  --zenchef-a-selection: 0.64;
  --zenchef-rgb-selection: var(--zenchef-rgb-Cream);

  background: rgba(var(--zenchef-rgb-selection), var(--zenchef-a-selection));
}

/* Design-System: Focus */
.zenchefFocus:focus-visible {
  --zenchef-rgb-focus: var(--zenchef-rgb-BlueTape);
  --zenchef-a-focus: 0.24;

  outline: 4px solid rgba(var(--zenchef-rgb-focus), var(--zenchef-a-focus));
  outline-offset: 0px;
}

/* Design-System: Button */
:root {
  --zenchefButton-rgb-bg--primary__default: var(--zenchef-rgb-BlueTape);
  --zenchefButton-rgb-bg_hover--primary__default: var(--zenchef-rgb-BlueTape900);
  --zenchefButton-rgb-fg--primary__default: var(--zenchef-rgb-White);

  --zenchefButton-rgb-bg--secondary__default: var(--zenchef-rgb-White);
  --zenchefButton-rgb-bg_hover--secondary__default: var(--zenchef-rgb-White);
  --zenchefButton-a-bg--secondary__default: 0;
  --zenchefButton-a-bg_hover--secondary__default: 1;
  --zenchefButton-rgb-fg--secondary__default: var(--zenchef-rgb-Ink);
  --zenchefButton-rgb-border--secondary__default: var(--zenchef-rgb-Ink);
  --zenchefButton-rgb-border_hover--secondary__default: var(--zenchef-rgb-Ink);
  --zenchefButton-a-border--secondary__default: 1;
  --zenchefButton-a-border_hover--secondary__default: 1;

  --zenchefButton-rgb-bg--dark__default: var(--zenchef-rgb-Ink700);
  --zenchefButton-rgb-bg_hover--dark__default: var(--zenchef-rgb-Ink900);
  --zenchefButton-rgb-fg--dark__default: var(--zenchef-rgb-White);

  --zenchefButton-rgb-bg--ghost__default: var(--zenchef-rgb-Ink50);
  --zenchefButton-rgb-bg_hover--ghost__default: var(--zenchef-rgb-Ink50);
  --zenchefButton-a-bg--ghost__default: 0;
  --zenchefButton-a-bg_hover--ghost__default: 1;
  --zenchefButton-rgb-fg--ghost__default: var(--zenchef-rgb-Ink);
}
.zenchefButton {
  flex: 0 0 auto;
  border: 0;
  border-radius: var(--zenchef-radius-m);
  cursor: pointer;
  text-align: center;
  font: var(--zenchef-font-sans_text_m_bold);
  padding: 0;
  min-width: max-content;
  user-select: none;
  -webkit-appearance: none;

  background-color: rgba(var(--zenchefButton-rgb-bg, var(--zenchefButton-rgb-bg__default)), var(--zenchefButton-a-bg, var(--zenchefButton-a-bg__default, 1)));
  color: rgba(var(--zenchefButton-rgb-fg, var(--zenchefButton-rgb-fg__default)), var(--zenchefButton-a-fg, var(--zenchefButton-a-fg__default, 1)));
  box-shadow: inset 0 0 0 1px rgba(var(--zenchefButton-rgb-border, var(--zenchefButton-rgb-border__default)), var(--zenchefButton-a-border, var(--zenchefButton-a-border__default, 0)));
}
.zenchefButton:not([hidden]) {
  display: flex;
  place-items: center;
  place-content: center;
}
.zenchefButton:any-link,
.zenchefButton:any-link:hover {
  text-decoration: none;
}
.zenchefButton:hover,
.zenchefButton:active {
  --zenchefButton-rgb-bg__default: var(--zenchefButton-rgb-bg_hover, var(--zenchefButton-rgb-bg_hover__default));
  --zenchefButton-a-bg__default: var(--zenchefButton-a-bg_hover, var(--zenchefButton-a-bg_hover__default));
  --zenchefButton-rgb-border__default: var(--zenchefButton-rgb-border_hover, var(--zenchefButton-rgb-border_hover__default));
  --zenchefButton-a-border__default: var(--zenchefButton-a-border_hover, var(--zenchefButton-a-border_hover__default));
}
.zenchefButton:where([disabled]) {
  --zenchefButton-a-bg: 1;
  --zenchefButton-rgb-bg: var(--zenchef-rgb-Ink100);
  --zenchefButton-rgb-fg: var(--zenchef-rgb-Ink400);
  --zenchefButton-a-border: 0.4;

  cursor: auto;
}
/* Design-System: Button: Primary */
.zenchefButton:where(.zenchefButton--primary) {
  --zenchefButton-rgb-bg__default: var(--zenchefButton-rgb-bg--primary, var(--zenchefButton-rgb-bg--primary__default));
  --zenchefButton-rgb-bg_hover__default: var(--zenchefButton-rgb-bg_hover--primary, var(--zenchefButton-rgb-bg_hover--primary__default));
  --zenchefButton-rgb-fg__default: var(--zenchefButton-rgb-fg--primary, var(--zenchefButton-rgb-fg--primary__default));

  padding: 8px 12px;
}
@media (min-width: 1024px) {
  .zenchefButton:where(.zenchefButton--primary) {
    padding: 8px 16px;
  }
}
/* Design-System: Button: Secondary */
.zenchefButton:where(.zenchefButton--secondary) {
  --zenchefButton-rgb-bg__default: var(--zenchefButton-rgb-bg--secondary, var(--zenchefButton-rgb-bg--secondary__default));
  --zenchefButton-rgb-bg_hover__default: var(--zenchefButton-rgb-bg_hover--secondary, var(--zenchefButton-rgb-bg_hover--secondary__default));
  --zenchefButton-a-bg__default: var(--zenchefButton-a-bg--secondary, var(--zenchefButton-a-bg--secondary__default));
  --zenchefButton-a-bg_hover__default: var(--zenchefButton-a-bg_hover--secondary, var(--zenchefButton-a-bg_hover--secondary__default));
  --zenchefButton-rgb-fg__default: var(--zenchefButton-rgb-fg--secondary, var(--zenchefButton-rgb-fg--secondary__default));
  --zenchefButton-rgb-border__default: var(--zenchefButton-rgb-border--secondary, var(--zenchefButton-rgb-border--secondary__default));
  --zenchefButton-rgb-border_hover__default: var(--zenchefButton-rgb-border_hover--secondary, var(--zenchefButton-rgb-border_hover--secondary__default));
  --zenchefButton-a-border__default: var(--zenchefButton-a-border--secondary, var(--zenchefButton-a-border--secondary__default));
  --zenchefButton-a-border_hover__default: var(--zenchefButton-a-border_hover--secondary, var(--zenchefButton-a-border_hover--secondary__default));

  padding: 8px 12px;
}
@media (min-width: 1024px) {
  .zenchefButton:where(.zenchefButton--secondary) {
    padding: 8px 16px;
  }
}
/* Design-System: Button: Dark */
.zenchefButton:where(.zenchefButton--dark) {
  --zenchefButton-rgb-bg__default: var(--zenchefButton-rgb-bg--dark, var(--zenchefButton-rgb-bg--dark__default));
  --zenchefButton-rgb-bg_hover__default: var(--zenchefButton-rgb-bg_hover--dark, var(--zenchefButton-rgb-bg_hover--dark__default));
  --zenchefButton-rgb-fg__default: var(--zenchefButton-rgb-fg--dark, var(--zenchefButton-rgb-fg--dark__default));

  padding: 8px 12px;
}
@media (min-width: 1024px) {
  .zenchefButton:where(.zenchefButton--dark) {
    padding: 8px 16px;
  }
}
/* Design-System: Button: Ghost */
.zenchefButton:where(.zenchefButton--ghost) {
  --zenchefButton-rgb-bg__default: var(--zenchefButton-rgb-bg--ghost, var(--zenchefButton-rgb-bg--ghost__default));
  --zenchefButton-rgb-bg_hover__default: var(--zenchefButton-rgb-bg_hover--ghost, var(--zenchefButton-rgb-bg_hover--ghost__default));
  --zenchefButton-a-bg__default: var(--zenchefButton-a-bg--ghost, var(--zenchefButton-a-bg--ghost__default));
  --zenchefButton-a-bg_hover__default: var(--zenchefButton-a-bg_hover--ghost, var(--zenchefButton-a-bg_hover--ghost__default));
  --zenchefButton-rgb-fg__default: var(--zenchefButton-rgb-fg--ghost, var(--zenchefButton-rgb-fg--ghost__default));

  padding: 8px;
}

/* Design-System: CheckBox */
.zenchefCheckBox {
  flex: 0 0 auto;
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
  display: grid;
  place-items: center;
  place-content: center;
  background: rgb(var(--zenchef-rgb-White));
  accent-color: rgb(var(--zenchef-rgb-BlueTape));
  color: rgb(var(--zenchef-rgb-BlueTape));
  border: 2px solid rgb(var(--zenchef-rgb-BlueTape));
  width: 18px;
  height: 18px;
  border-radius: var(--zenchef-radius-s);
}
.zenchefCheckBox::before {
  content: "";
  width: 10px;
  height: 10px;
  transform: scale(0);
  transform-origin: center center;
  transition: 120ms transform ease-in-out;
  box-shadow: inset 12px 12px rgb(var(--zenchef-rgb-BlueTape));
}
.zenchefCheckBox:where(:checked)::before {
  transform: scale(1);
}