/* color-mixer.blade.php: Tailwind step 2. Utilities live in the markup; built by work/tw/build-tools.sh (content: color-mixer.classes). */

:where(.cmt) :is(.tk, .mx-pop) .ck-colorfield {
  border: 0;
  margin-top: 8px;
  border-radius: var(--r-md, 14px);
  padding: 6px 12px 6px 6px;
  background: var(--inset, #F5F5F7)
}

:where(.cmt) :is(.tk, .mx-pop) .ck-colorfield:focus-within {
  background: var(--surface, #fff);
  box-shadow: 0 0 0 1.5px var(--ink, #1D1D1F)
}

:where(.cmt) :is(#mx-target, #mx-custom) input[type=text] {
  font-size: 15px;
  padding: 0;
  font-weight: 500;
  border: 0;
  color: var(--ink, #1D1D1F);
  border-radius: 0;
  background: transparent;
  box-shadow: none
}

:where(.cmt) :is(#mx-target, #mx-custom) input[type=text]:focus {
  font-size: 15px;
  padding: 0;
  font-weight: 500;
  border: 0;
  color: var(--ink, #1D1D1F);
  border-radius: 0;
  background: transparent;
  box-shadow: none
}

:where(.cmt) :is(.tk, .mx-pop) .ck-dot {
  border-radius: 10px
}

/*! tw-utilities */

:where(.cmt) .tw-fixed {
  position: fixed
}

:where(.cmt) .tw-absolute {
  position: absolute
}

:where(.cmt) .tw-relative {
  position: relative
}

:where(.cmt) .tw-left-\[0\] {
  left: 0
}

:where(.cmt) .tw-right-\[0\] {
  right: 0
}

:where(.cmt) .tw-right-\[8px\] {
  right: 8px
}

:where(.cmt) .tw-top-\[0\] {
  top: 0
}

:where(.cmt) .tw-top-\[8px\] {
  top: 8px
}

:where(.cmt) .tw-z-\[1060\] {
  z-index: 1060
}

:where(.cmt) .tw-mt-\[4px\] {
  margin-top: 4px
}

:where(.cmt) .tw-inline-block {
  display: inline-block
}

:where(.cmt) .tw-flex {
  display: flex
}

:where(.cmt) .tw-inline-flex {
  display: inline-flex
}

:where(.cmt) .tw-grid {
  display: grid
}

:where(.cmt) .tw-h-\[200px\] {
  height: 200px
}

:where(.cmt) .tw-h-\[22px\] {
  height: 22px
}

:where(.cmt) .tw-h-\[28px\] {
  height: 28px
}

:where(.cmt) .tw-h-\[60px\] {
  height: 60px
}

:where(.cmt) .tw-h-\[6px\] {
  height: 6px
}

:where(.cmt) .tw-max-h-\[300px\] {
  max-height: 300px
}

:where(.cmt) .tw-min-h-\[110px\] {
  min-height: 110px
}

:where(.cmt) .tw-min-h-\[44px\] {
  min-height: 44px
}

:where(.cmt) .tw-w-\[104px\] {
  width: 104px
}

:where(.cmt) .tw-w-\[112px\] {
  width: 112px
}

:where(.cmt) .tw-w-\[176px\] {
  width: 176px
}

:where(.cmt) .tw-w-\[22px\] {
  width: 22px
}

:where(.cmt) .tw-w-\[28px\] {
  width: 28px
}

:where(.cmt) .tw-w-\[min\(340px\,_calc\(100vw_-_24px\)\)\] {
  width: min(340px, calc(100vw - 24px))
}

:where(.cmt) .tw-w-full {
  width: 100%
}

:where(.cmt) .tw-min-w-\[0\] {
  min-width: 0
}

:where(.cmt) .tw-grid-cols-\[repeat\(2\,_minmax\(0\,_1fr\)\)\] {
  grid-template-columns: repeat(2, minmax(0, 1fr))
}

:where(.cmt) .tw-grid-cols-\[repeat\(9\,_minmax\(0\,_1fr\)\)\] {
  grid-template-columns: repeat(9, minmax(0, 1fr))
}

:where(.cmt) .tw-flex-col {
  flex-direction: column
}

:where(.cmt) .tw-flex-wrap {
  flex-wrap: wrap
}

:where(.cmt) .tw-items-center {
  align-items: center
}

:where(.cmt) .tw-items-stretch {
  align-items: stretch
}

:where(.cmt) .tw-justify-center {
  justify-content: center
}

:where(.cmt) .tw-justify-between {
  justify-content: space-between
}

:where(.cmt) .tw-gap-\[10px\] {
  gap: 10px
}

:where(.cmt) .tw-gap-\[14px\] {
  gap: 14px
}

:where(.cmt) .tw-gap-\[2px\] {
  gap: 2px
}

:where(.cmt) .tw-gap-\[4px\] {
  gap: 4px
}

:where(.cmt) .tw-gap-\[6px\] {
  gap: 6px
}

:where(.cmt) .tw-gap-\[6px_12px\] {
  gap: 6px 12px
}

:where(.cmt) .tw-gap-\[8px\] {
  gap: 8px
}

:where(.cmt) .tw-overflow-auto {
  overflow: auto
}

:where(.cmt) .tw-overflow-hidden {
  overflow: hidden
}

:where(.cmt) .tw-rounded-\[12px\] {
  border-radius: 12px
}

:where(.cmt) .tw-rounded-\[20px\] {
  border-radius: 20px
}

:where(.cmt) .tw-rounded-\[50\%\] {
  border-radius: 50%
}

:where(.cmt) .tw-rounded-\[9px\] {
  border-radius: 9px
}

:where(.cmt) .tw-p-\[0\] {
  padding: 0
}

:where(.cmt) .tw-p-\[12px\] {
  padding: 12px
}

:where(.cmt) .tw-p-\[12px_0\] {
  padding: 12px 0
}

:where(.cmt) .tw-p-\[2px_26px_2px_2px\] {
  padding: 2px 26px 2px 2px
}

:where(.cmt) .tw-p-\[3px\] {
  padding: 3px
}

:where(.cmt) .tw-p-\[8px\] {
  padding: 8px
}

:where(.cmt) .tw-text-left {
  text-align: left
}

:where(.cmt) .tw-text-\[13px\] {
  font-size: 13px
}

:where(.cmt) .tw-text-\[14px\] {
  font-size: 14px
}

:where(.cmt) .tw-text-\[28px\] {
  font-size: 28px
}

:where(.cmt) .tw-font-medium {
  font-weight: 500
}

:where(.cmt) .tw-font-semibold {
  font-weight: 600
}

:where(.cmt) .tw-tracking-\[\.02em\] {
  letter-spacing: .02em
}

:where(.cmt) .tw-css-border-\[0\] {
  border: 0
}

:where(.cmt) .tw-css-border-\[1px_solid_var\(--hairline\,_rgba\(0\,_0\,_0\,_\.08\)\)\] {
  border: 1px solid var(--hairline, rgba(0, 0, 0, .08))
}

:where(.cmt) .tw-css-background-\[none\] {
  background: none
}

:where(.cmt) .tw-css-background-\[var\(--inset\,_\#F5F5F7\)\] {
  background: var(--inset, #F5F5F7)
}

:where(.cmt) .tw-css-background-\[var\(--surface\,_\#fff\)\] {
  background: var(--surface, #fff)
}

:where(.cmt) .tw-css-transition-\[background-color_\.2s\] {
  transition: background-color .2s
}

:where(.cmt) .tw-css-border-bottom-\[1px_solid_var\(--hairline\,_rgba\(0\,_0\,_0\,_\.08\)\)\] {
  border-bottom: 1px solid var(--hairline, rgba(0, 0, 0, .08))
}

:where(.cmt) .tw-css-flex-\[1\] {
  flex: 1
}

:where(.cmt) .tw-css-flex-\[none\] {
  flex: none
}

:where(.cmt) .tw-css-box-shadow-\[0_16px_40px_-12px_rgba\(17\,_19\,_21\,_\.25\)\] {
  box-shadow: 0 16px 40px -12px rgba(17, 19, 21, .25)
}

:where(.cmt) .tw-css-box-shadow-\[inset_0_0_0_1px_rgba\(0\,_0\,_0\,_\.06\)\] {
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06)
}

:where(.cmt) .tw-css-box-shadow-\[inset_0_0_0_1px_rgba\(0\,_0\,_0\,_\.08\)\] {
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08)
}

:where(.cmt) .tw-css-box-shadow-\[inset_0_0_0_1px_rgba\(0\,_0\,_0\,_\.14\)\] {
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14)
}

:where(.cmt) .tw-css-color-\[var\(--ink\,_\#1D1D1F\)\] {
  color: var(--ink, #1D1D1F)
}

:where(.cmt) .tw-css-color-\[var\(--ink-2\,_\#6E6E73\)\] {
  color: var(--ink-2, #6E6E73)
}

:where(.cmt) .tw-css-font-family-\[ui-monospace\,_SFMono-Regular\,_Menlo\,_monospace\] {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace
}

:where(.cmt) .tw-css-font-variant-numeric-\[tabular-nums\] {
  font-variant-numeric: tabular-nums
}

@media (max-width: 575.98px) {
  :where(.cmt) .mq1-max-575-98\:tw-right-\[4px\] {
    right: 4px
  }

  :where(.cmt) .mq1-max-575-98\:tw-top-\[4px\] {
    top: 4px
  }

  :where(.cmt) .mq1-max-575-98\:tw-h-\[52px\] {
    height: 52px
  }

  :where(.cmt) .mq1-max-575-98\:tw-min-h-\[0\] {
    min-height: 0
  }

  :where(.cmt) .mq1-max-575-98\:tw-min-h-\[40px\] {
    min-height: 40px
  }

  :where(.cmt) .mq1-max-575-98\:tw-w-\[88px\] {
    width: 88px
  }

  :where(.cmt) .mq1-max-575-98\:tw-w-\[calc\(50\%_-_4px\)\] {
    width: calc(50% - 4px)
  }

  :where(.cmt) .mq1-max-575-98\:tw-grid-cols-\[repeat\(5\2c _minmax\(0\2c _1fr\)\)\] {
    grid-template-columns: repeat(5, minmax(0, 1fr))
  }

  :where(.cmt) .mq1-max-575-98\:tw-flex-row {
    flex-direction: row
  }

  :where(.cmt) .mq1-max-575-98\:tw-flex-wrap {
    flex-wrap: wrap
  }

  :where(.cmt) .mq1-max-575-98\:tw-gap-\[8px\] {
    gap: 8px
  }

  :where(.cmt) .mq1-max-575-98\:tw-p-\[12px\] {
    padding: 12px
  }

  :where(.cmt) .mq1-max-575-98\:tw-pr-\[22px\] {
    padding-right: 22px
  }
}

:where(.cmt) #mx-recipes .\[\#mx-recipes_\&\:hover\]\:tw-css-background-\[var\(--hairline\2c _rgba\(0\2c _0\2c _0\2c _\.08\)\)\]:hover {
  background: var(--hairline, rgba(0, 0, 0, .08))
}

:where(.cmt) #mx-recipes .\[\#mx-recipes_\&\]\:tw-h-\[40px\] {
  height: 40px
}

:where(.cmt) #mx-recipes .\[\#mx-recipes_\&\]\:tw-rounded-\[12px\] {
  border-radius: 12px
}

:where(.cmt) #mx-recipes .\[\#mx-recipes_\&\]\:tw-p-\[0_14px\] {
  padding: 0 14px
}

:where(.cmt) #mx-recipes .\[\#mx-recipes_\&\]\:tw-text-\[14px\] {
  font-size: 14px
}

:where(.cmt) #mx-recipes .\[\#mx-recipes_\&\]\:tw-font-medium {
  font-weight: 500
}

:where(.cmt) #mx-recipes .\[\#mx-recipes_\&\]\:tw-css-border-\[0\] {
  border: 0
}

:where(.cmt) #mx-recipes .\[\#mx-recipes_\&\]\:tw-css-background-\[var\(--inset\2c _\#F5F5F7\)\] {
  background: var(--inset, #F5F5F7)
}

:where(.cmt) #mx-recipes .\[\#mx-recipes_\&\]\:tw-css-flex-\[none\] {
  flex: none
}

:where(.cmt) #mx-recipes .\[\#mx-recipes_\&\]\:tw-css-color-\[var\(--ink\2c _\#1D1D1F\)\] {
  color: var(--ink, #1D1D1F)
}

@media (max-width: 575.98px) {
  :where(.cmt) #mx-recipes .mq1-max-575-98\:\[\#mx-recipes_\&\]\:tw-w-full {
    width: 100%
  }
}

:where(.cmt) .\[\&\.active\]\:tw-css-color-\[var\(--ink\2c _\#1D1D1F\)\].active {
  color: var(--ink, #1D1D1F)
}

:where(.cmt) .\[\&\.active_i\]\:tw-css-box-shadow-\[inset_0_0_0_1\.5px_var\(--ink\2c _\#1D1D1F\)\2c _inset_0_0_0_3px_var\(--surface\2c _\#fff\)\].active i {
  box-shadow: inset 0 0 0 1.5px var(--ink, #1D1D1F), inset 0 0 0 3px var(--surface, #fff)
}

:where(.cmt) .\[\&\.is-water\]\:\!tw-css-background-\[repeating-linear-gradient\(135deg\2c _\#EAF4FB_0_5px\2c _\#FFFFFF_5px_10px\)\].is-water {
  background: repeating-linear-gradient(135deg, #EAF4FB 0 5px, #FFFFFF 5px 10px) !important
}

:where(.cmt) .\[\&\.mx-strip\]\:tw-grid-cols-\[repeat\(6\2c _minmax\(0\2c _1fr\)\)\].mx-strip {
  grid-template-columns: repeat(6, minmax(0, 1fr))
}

@media (max-width: 575.98px) {
  :where(.cmt) .mq1-max-575-98\:\[\&\.mx-strip\]\:tw-grid-cols-\[repeat\(3\2c _minmax\(0\2c _1fr\)\)\].mx-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr))
  }
}

:where(.cmt) .\[\&\:hover\]\:tw-css-background-\[var\(--hairline\2c _rgba\(0\2c _0\2c _0\2c _\.08\)\)\]:hover {
  background: var(--hairline, rgba(0, 0, 0, .08))
}

:where(.cmt) .\[\&\:hover\]\:tw-css-color-\[var\(--ink\2c _\#1D1D1F\)\]:hover {
  color: var(--ink, #1D1D1F)
}

:where(.cmt) .\[\&\:last-child\]\:tw-css-border-bottom-\[0\]:last-child {
  border-bottom: 0
}

:where(.cmt) .\[\&_b\]\:tw-text-\[15px\] b {
  font-size: 15px
}

:where(.cmt) .\[\&_b\]\:tw-font-semibold b {
  font-weight: 600
}

:where(.cmt) .\[\&_b\]\:tw-css-color-\[var\(--ink\2c _\#1D1D1F\)\] b {
  color: var(--ink, #1D1D1F)
}

:where(.cmt) .\[\&_b\]\:tw-css-font-variant-numeric-\[tabular-nums\] b {
  font-variant-numeric: tabular-nums
}

:where(.cmt) .\[\&_button\.active\]\:tw-css-background-\[var\(--inset\2c _\#F5F5F7\)\] button.active {
  background: var(--inset, #F5F5F7)
}

:where(.cmt) .\[\&_button\.active\]\:tw-css-background-\[var\(--surface\2c _\#fff\)\] button.active {
  background: var(--surface, #fff)
}

:where(.cmt) .\[\&_button\.active\]\:tw-css-box-shadow-\[0_1px_2px_rgba\(17\2c _19\2c _21\2c _\.1\)\] button.active {
  box-shadow: 0 1px 2px rgba(17, 19, 21, .1)
}

:where(.cmt) .\[\&_button\.active\]\:tw-css-color-\[var\(--ink\2c _\#1D1D1F\)\] button.active {
  color: var(--ink, #1D1D1F)
}

:where(.cmt) .\[\&_button\:disabled\]\:tw-opacity-\[\.35\] button:disabled {
  opacity: .35
}

:where(.cmt) .\[\&_button\:disabled\]\:\[\&\&\]\:tw-css-background-\[none\].\[\&_button\:disabled\]\:\[\&\&\]\:tw-css-background-\[none\] button:disabled {
  background: none
}

:where(.cmt) .\[\&_button\:hover\]\:tw-css-background-\[var\(--inset\2c _\#F5F5F7\)\] button:hover {
  background: var(--inset, #F5F5F7)
}

:where(.cmt) .\[\&_button\]\:tw-flex button {
  display: flex
}

:where(.cmt) .\[\&_button\]\:tw-inline-flex button {
  display: inline-flex
}

:where(.cmt) .\[\&_button\]\:tw-h-\[34px\] button {
  height: 34px
}

:where(.cmt) .\[\&_button\]\:tw-min-h-\[38px\] button {
  min-height: 38px
}

:where(.cmt) .\[\&_button\]\:tw-w-\[34px\] button {
  width: 34px
}

:where(.cmt) .\[\&_button\]\:tw-items-center button {
  align-items: center
}

:where(.cmt) .\[\&_button\]\:tw-justify-center button {
  justify-content: center
}

:where(.cmt) .\[\&_button\]\:tw-gap-\[8px\] button {
  gap: 8px
}

:where(.cmt) .\[\&_button\]\:tw-rounded-\[10px\] button {
  border-radius: 10px
}

:where(.cmt) .\[\&_button\]\:tw-rounded-\[9px\] button {
  border-radius: 9px
}

:where(.cmt) .\[\&_button\]\:tw-p-\[6px_8px\] button {
  padding: 6px 8px
}

:where(.cmt) .\[\&_button\]\:tw-text-left button {
  text-align: left
}

:where(.cmt) .\[\&_button\]\:tw-text-\[13px\] button {
  font-size: 13px
}

:where(.cmt) .\[\&_button\]\:tw-font-medium button {
  font-weight: 500
}

:where(.cmt) .\[\&_button\]\:tw-css-border-\[0\] button {
  border: 0
}

:where(.cmt) .\[\&_button\]\:tw-css-background-\[none\] button {
  background: none
}

:where(.cmt) .\[\&_button\]\:tw-css-color-\[var\(--ink\2c _\#1D1D1F\)\] button {
  color: var(--ink, #1D1D1F)
}

:where(.cmt) .\[\&_i\]\:tw-block i {
  display: block
}

:where(.cmt) .\[\&_i\]\:tw-h-\[40px\] i {
  height: 40px
}

:where(.cmt) .\[\&_i\]\:tw-h-full i {
  height: 100%
}

:where(.cmt) .\[\&_i\]\:tw-rounded-\[10px\] i {
  border-radius: 10px
}

:where(.cmt) .\[\&_i\]\:tw-css-flex-\[1\] i {
  flex: 1
}

:where(.cmt) .\[\&_i\]\:tw-css-box-shadow-\[inset_0_0_0_1px_rgba\(0\2c _0\2c _0\2c _\.06\)\] i {
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06)
}

:where(.cmt) .\[\&_small\]\:tw-ml-\[4px\] small {
  margin-left: 4px
}

:where(.cmt) .\[\&_small\]\:tw-text-\[13px\] small {
  font-size: 13px
}

:where(.cmt) .\[\&_small\]\:tw-css-color-\[var\(--ink-2\2c _\#6E6E73\)\] small {
  color: var(--ink-2, #6E6E73)
}

:where(.cmt) .\[\&_span\:last-child\]\:tw-min-w-\[0\] span:last-child {
  min-width: 0
}

:where(.cmt) .\[\&_span\:last-child\]\:tw-overflow-hidden span:last-child {
  overflow: hidden
}

:where(.cmt) .\[\&_span\:last-child\]\:tw-text-ellipsis span:last-child {
  text-overflow: ellipsis
}

:where(.cmt) .\[\&_span\:last-child\]\:tw-whitespace-nowrap span:last-child {
  white-space: nowrap
}

@media (max-width: 575.98px) {
  :where(.cmt) .mq1-max-575-98\:\[\&_span\:last-child\]\:tw-whitespace-normal span:last-child {
    white-space: normal
  }

  :where(.cmt) .mq1-max-575-98\:\[\&_span\:last-child\]\:tw-leading-\[1\.25\] span:last-child {
    line-height: 1.25
  }
}

:where(.cmt) .\[\&_span\]\:tw-inline-flex span {
  display: inline-flex
}

:where(.cmt) .\[\&_span\]\:tw-items-center span {
  align-items: center
}

:where(.cmt) .\[\&_span\]\:tw-gap-\[6px\] span {
  gap: 6px
}

:where(.cmt) .mx-chip .\[\.mx-chip_\&\]\:tw-h-\[40px\] {
  height: 40px
}

:where(.cmt) .mx-chip .\[\.mx-chip_\&\]\:tw-w-\[40px\] {
  width: 40px
}

@media (max-width: 575.98px) {
  :where(.cmt) .mx-chip .mq1-max-575-98\:\[\.mx-chip_\&\]\:tw-h-\[30px\] {
    height: 30px
  }

  :where(.cmt) .mx-chip .mq1-max-575-98\:\[\.mx-chip_\&\]\:tw-w-\[30px\] {
    width: 30px
  }
}

:where(.cmt) .mx-pop .\[\.mx-pop_\&\]\:tw-text-\[13px\] {
  font-size: 13px
}

:where(.cmt) .mx-pop .\[\.mx-pop_\&\]\:tw-font-medium {
  font-weight: 500
}

:where(.cmt) .mx-pop .\[\.mx-pop_\&\]\:tw-css-color-\[var\(--ink-2\2c _\#6E6E73\)\] {
  color: var(--ink-2, #6E6E73)
}

@media (max-width: 575.98px) {
  :where(.cmt) .mx-strip.is-5 .mq1-max-575-98\:\[\.mx-strip\.is-5_\&\]\:\[\&\&\]\:tw-flex.mq1-max-575-98\:\[\.mx-strip\.is-5_\&\]\:\[\&\&\]\:tw-flex {
    display: flex
  }

  :where(.cmt) .mx-strip .mq1-max-575-98\:\[\.mx-strip_\&\:nth-child\(2\)\]\:tw-hidden:nth-child(2) {
    display: none
  }

  :where(.cmt) .mx-strip .mq1-max-575-98\:\[\.mx-strip_\&\:nth-child\(4\)\]\:tw-hidden:nth-child(4) {
    display: none
  }

  :where(.cmt) .mx-strip .mq1-max-575-98\:\[\.mx-strip_\&\:nth-child\(6\)\]\:tw-hidden:nth-child(6) {
    display: none
  }

  :where(.cmt) .mx-strip .mq1-max-575-98\:\[\.mx-strip_\&\:nth-child\(8\)\]\:tw-hidden:nth-child(8) {
    display: none
  }
}