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

@keyframes hwIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

/*! tw-utilities */

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

:where(.cmt) .tw-max-w-\[100\%\] {
  max-width: 100%;
}

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

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

:where(.cmt) .tw-leading-\[0\] {
  line-height: 0;
}

:where(.cmt) .tw-css-animation-\[hwIn_\.5s_cubic-bezier\(\.2\,_\.8\,_\.2\,_1\)_both\] {
  animation: hwIn .5s cubic-bezier(.2, .8, .2, 1) both;
}

:where(.cmt) .tw-css-animation-delay-\[var\(--d\,_0ms\)\] {
  animation-delay: var(--d, 0ms);
}

@media (prefers-reduced-motion: reduce) {
  :where(.cmt) .mq2-motion-reduce\:tw-css-animation-\[none\] {
    animation: none;
  }
}

:where(.cmt) .\[\&\#hw-drop\.is-dragover\]\:tw-css-box-shadow-\[inset_0_0_0_1\.5px_var\(--ink\2c _\#1D1D1F\)\]#hw-drop.is-dragover {
  box-shadow: inset 0 0 0 1.5px var(--ink, #1D1D1F);
}

:where(.cmt) .\[\&_\:is\(i\2c \.icon\)\]\:tw-mt-\[3px\] :is(i,.icon) {
  margin-top: 3px;
}

:where(.cmt) .\[\&_\:is\(i\2c \.icon\)\]\:tw-shrink-0 :is(i,.icon) {
  flex-shrink: 0;
}

:where(.cmt) .\[\&_\:is\(i\2c \.icon\)\]\:tw-text-\[12px\] :is(i,.icon) {
  font-size: 12px;
}

: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) .\[\&_i\.on\]\:tw-opacity-\[1\] i.on {
  opacity: 1;
}

:where(.cmt) .\[\&_i\.on\]\:tw-css-background-\[var\(--ink\2c _\#1D1D1F\)\] i.on {
  background: var(--ink, #1D1D1F);
}

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

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

:where(.cmt) .\[\&_i\]\:tw-w-\[7px\] i {
  width: 7px;
}

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

:where(.cmt) .\[\&_i\]\:tw-opacity-\[\.5\] i {
  opacity: .5;
}

:where(.cmt) .\[\&_i\]\:tw-css-background-\[var\(--ink-3\2c _\#A1A1A6\)\] i {
  background: var(--ink-3, #A1A1A6);
}

@media (prefers-reduced-motion: reduce) {
  :where(.cmt) .mq2-motion-reduce\:\[\&_i\]\:tw-css-animation-\[none\] i {
    animation: none;
  }
}

:where(.cmt) .\[\&_img\]\:tw-block img {
  display: block;
}

:where(.cmt) .\[\&_img\]\:tw-max-h-\[calc\(100vh_-_200px\)\] img {
  max-height: calc(100vh - 200px);
}

:where(.cmt) .\[\&_img\]\:tw-max-w-\[100\%\] img {
  max-width: 100%;
}

:where(.cmt) .\[\&_img\]\:tw-object-contain img {
  object-fit: contain;
}

@media (max-width: 767.98px) {
  :where(.cmt) .mq1-max-767-98\:\[\&_img\]\:tw-max-h-\[60vh\] img {
    max-height: 60vh;
  }
}

:where(.cmt) .hw-stage .\[\.hw-stage_\&\]\:tw-absolute {
  position: absolute;
}

:where(.cmt) .hw-stage .\[\.hw-stage_\&\]\:tw-bottom-\[16px\] {
  bottom: 16px;
}

:where(.cmt) .hw-stage .\[\.hw-stage_\&\]\:tw-left-\[50\%\] {
  left: 50%;
}

:where(.cmt) .hw-stage .\[\.hw-stage_\&\]\:tw-z-\[6\] {
  z-index: 6;
}

:where(.cmt) .hw-stage .\[\.hw-stage_\&\]\:tw-leading-\[normal\] {
  line-height: normal;
}

:where(.cmt) .hw-stage .\[\.hw-stage_\&\]\:tw-css-transform-\[translateX\(-50\%\)\] {
  transform: translateX(-50%);
}