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

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

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

/*! tw-utilities */

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

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

:where(.cmt) .tw-cursor-pointer {
  cursor: pointer
}

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

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

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

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

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

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

@media (max-width: 767.98px) {
  :where(.cmt) .mq1-max-767-98\:tw-grid {
    display: grid
  }

  :where(.cmt) .mq1-max-767-98\:tw-grid-cols-\[1fr\] {
    grid-template-columns: 1fr
  }

  :where(.cmt) .mq1-max-767-98\:tw-grid-cols-\[48px_44px_1fr_auto\] {
    grid-template-columns: 48px 44px 1fr auto
  }

  :where(.cmt) .mq1-max-767-98\:tw-items-center {
    align-items: center
  }

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

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

  :where(.cmt) .mq1-max-767-98\:tw-text-left {
    text-align: left
  }
}

:where(.cmt) .\[\&\.is-base_i\:\:after\]\:tw-absolute.is-base i::after {
  position: absolute
}

:where(.cmt) .\[\&\.is-base_i\:\:after\]\:tw-bottom-\[8px\].is-base i::after {
  bottom: 8px
}

:where(.cmt) .\[\&\.is-base_i\:\:after\]\:tw-left-\[50\%\].is-base i::after {
  left: 50%
}

:where(.cmt) .\[\&\.is-base_i\:\:after\]\:tw-ml-\[-3px\].is-base i::after {
  margin-left: -3px
}

:where(.cmt) .\[\&\.is-base_i\:\:after\]\:tw-h-\[6px\].is-base i::after {
  height: 6px
}

:where(.cmt) .\[\&\.is-base_i\:\:after\]\:tw-w-\[6px\].is-base i::after {
  width: 6px
}

:where(.cmt) .\[\&\.is-base_i\:\:after\]\:tw-rounded-\[50\%\].is-base i::after {
  border-radius: 50%
}

:where(.cmt) .\[\&\.is-base_i\:\:after\]\:tw-css-background-\[currentColor\].is-base i::after {
  background: currentColor
}

:where(.cmt) .\[\&\.is-base_i\:\:after\]\:tw-css-content-\[\'\'\].is-base i::after {
  content: ''
}

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

:where(.cmt) .\[\&_\.ck-code\]\:tw-text-left .ck-code {
  text-align: left
}

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

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

:where(.cmt) .\[\&_\.ck-code_pre\]\:tw-text-\[13px\] .ck-code pre {
  font-size: 13px
}

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

:where(.cmt) .\[\&_\.ck-colorfield\:focus-within\]\:tw-css-background-\[var\(--surface\2c _\#fff\)\] .ck-colorfield:focus-within {
  background: var(--surface, #fff)
}

:where(.cmt) .\[\&_\.ck-colorfield\:focus-within\]\:tw-css-box-shadow-\[0_0_0_1\.5px_var\(--ink\2c _\#1D1D1F\)\] .ck-colorfield:focus-within {
  box-shadow: 0 0 0 1.5px var(--ink, #1D1D1F)
}

:where(.cmt) .\[\&_\.ck-colorfield\]\:tw-rounded-\[var\(--r-md\2c _14px\)\] .ck-colorfield {
  border-radius: var(--r-md, 14px)
}

:where(.cmt) .\[\&_\.ck-colorfield\]\:tw-p-\[6px_12px_6px_6px\] .ck-colorfield {
  padding: 6px 12px 6px 6px
}

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

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

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

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

:where(.cmt) .\[\&_\.ck-copy\]\:tw-p-\[6px_12px\] .ck-copy {
  padding: 6px 12px
}

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

:where(.cmt) .\[\&_\.ck-copy\]\:tw-font-medium .ck-copy {
  font-weight: 500
}

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

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

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

:where(.cmt) .\[\&_\.ck-dot\]\:tw-rounded-\[10px\] .ck-dot {
  border-radius: 10px
}

:where(.cmt) .\[\&_b\]\:tw-mt-\[6px\] b {
  margin-top: 6px
}

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

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

: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)
}

@media (max-width: 767.98px) {
  :where(.cmt) .mq1-max-767-98\:\[\&_b\]\:tw-m-\[0\] b {
    margin: 0
  }
}

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

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

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

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

: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)
}

@media (max-width: 767.98px) {
  :where(.cmt) .mq1-max-767-98\:\[\&_i\]\:tw-h-\[36px\] i {
    height: 36px
  }
}

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

: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\]\:tw-block span {
  display: block
}

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

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

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

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

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

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

@media (max-width: 767.98px) {
  :where(.cmt) .mq1-max-767-98\:\[\&_span\]\:tw-m-\[0\] span {
    margin: 0
  }
}

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

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

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