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

/*! tw-utilities */

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

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

:where(.cmt) .\[\&\#st-more\]\:tw-ml-\[6px\]#st-more {
  margin-left: 6px
}

:where(.cmt) .\[\&\#st-more\]\:tw-font-medium#st-more {
  font-weight: 500
}

:where(.cmt) .\[\&\#st-more\]\:tw-css-text-decoration-\[underline\]#st-more {
  text-decoration: underline
}

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

:where(.cmt) .\[\&\#st-more\]\:tw-css-text-underline-offset-\[2px\]#st-more {
  text-underline-offset: 2px
}

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

: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) .\[\&_img\]\:tw-css-transition-\[box-shadow_\.15s\] img {
  transition: box-shadow .15s
}

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

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

@keyframes stDream {
  from {
    background: radial-gradient(circle at 30% 30%, #A5B4FC, transparent 55%);
  }

  to {
    background: radial-gradient(circle at 70% 60%, #FDE68A, transparent 55%);
  }
}

@keyframes stOrbit {
  from {
    transform: translate(0, 0) scale(1);
  }

  to {
    transform: translate(25%, 20%) scale(1.2);
  }
}

:where(.cmt) .st {
  min-height: 70vh;
  background: var(--cm-bg-subtle);
}

:where(.cmt) .st [hidden] {
  display: none !important;
}

:where(.cmt) #st .st-pill.is-open {
  background: var(--hairline, rgba(0, 0, 0, .08));
}

:where(.cmt) .st-ratio-icon {
  display: inline-block;
  border: 2px solid currentColor;
  border-radius: 3px;
}

:where(.cmt) .st-pop {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 30;
  border-radius: var(--r-md, 14px);
  padding: 8px;
  background: var(--surface, #fff);
  cursor: default;
  border: 1px solid var(--hairline, rgba(0, 0, 0, .08));
  box-shadow: 0 1px 2px rgba(17, 19, 21, .06), 0 18px 40px -16px rgba(17, 19, 21, .28);
}

:where(.cmt) .st-option {
  border: 0;
  background: var(--inset, #F5F5F7);
  border-radius: 12px;
  padding: 6px;
  text-align: center;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-2, #6E6E73);
}

:where(.cmt) .st-option:hover {
  background: var(--hairline, rgba(0, 0, 0, .08));
}

:where(.cmt) .st-option.active {
  background: var(--ink, #1D1D1F);
  color: var(--surface, #fff);
}

:where(.cmt) .st-feed {
  margin-top: 48px;
}

:where(.cmt) .st-feed:empty {
  margin-top: 0;
}

/*! tw-utilities */

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

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

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

:where(.cmt) .tw-inset-\[-20\%\] {
  inset: -20%;
}

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

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

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

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

:where(.cmt) .tw-left-\[12px\] {
  left: 12px;
}

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

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

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

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

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

:where(.cmt) .tw-top-\[50\%\] {
  top: 50%;
}

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

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

:where(.cmt) .tw-mb-\[12px\] {
  margin-bottom: 12px;
}

:where(.cmt) .tw-mb-\[40px\] {
  margin-bottom: 40px;
}

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

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

: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-\[32px\] {
  height: 32px;
}

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

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

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

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

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

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

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

:where(.cmt) .tw-shrink-0 {
  flex-shrink: 0;
}

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

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

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

:where(.cmt) .tw-items-start {
  align-items: flex-start;
}

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

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

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

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

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

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

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

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

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

:where(.cmt) .tw-whitespace-nowrap {
  white-space: nowrap;
}

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

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

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

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

:where(.cmt) .tw-rounded-\[var\(--r-md\,_14px\)\] {
  border-radius: var(--r-md, 14px);
}

:where(.cmt) .tw-object-cover {
  object-fit: cover;
}

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

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

:where(.cmt) .tw-p-\[20px_64px\] {
  padding: 20px 64px;
}

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

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

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

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

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

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

:where(.cmt) .tw-opacity-\[\.9\] {
  opacity: .9;
}

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

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

:where(.cmt) .tw-css-animation-\[stDream_6s_ease-in-out_infinite_alternate\] {
  animation: stDream 6s ease-in-out infinite alternate;
}

:where(.cmt) .tw-css-animation-\[stIn_\.35s_ease-out\] {
  animation: stIn .35s ease-out;
}

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

:where(.cmt) .tw-css-background-\[rgba\(255\,_255\,_255\,_\.14\)\] {
  background: rgba(255, 255, 255, .14);
}

:where(.cmt) .tw-css-background-\[rgba\(255\,_255\,_255\,_\.6\)\] {
  background: rgba(255, 255, 255, .6);
}

:where(.cmt) .tw-css-background-\[rgba\(255\,_255\,_255\,_\.9\)\] {
  background: rgba(255, 255, 255, .9);
}

:where(.cmt) .tw-css-background-\[rgba\(9\,_12\,_20\,_\.96\)\] {
  background: rgba(9, 12, 20, .96);
}

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

:where(.cmt) .tw-css-transition-\[opacity_\.15s\] {
  transition: opacity .15s;
}

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

:where(.cmt) .tw-css--webkit-box-orient-\[vertical\] {
  -webkit-box-orient: vertical;
}

:where(.cmt) .tw-css--webkit-line-clamp-\[2\] {
  -webkit-line-clamp: 2;
}

:where(.cmt) .tw-css-color-\[\#1D1D1F\] {
  color: #1D1D1F;
}

:where(.cmt) .tw-css-color-\[\#D0D5DD\] {
  color: #D0D5DD;
}

:where(.cmt) .tw-css-color-\[\#fff\] {
  color: #fff;
}

:where(.cmt) .tw-css-color-\[var\(--cm-danger\,_\#D92D20\)\] {
  color: var(--cm-danger, #D92D20);
}

: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-display-\[-webkit-box\] {
  display: -webkit-box;
}

:where(.cmt) .tw-css-filter-\[blur\(28px\)\] {
  filter: blur(28px);
}

:where(.cmt) .tw-css-transform-\[translateY\(-50\%\)\] {
  transform: translateY(-50%);
}

@media (max-width: 767.98px) {
  :where(.cmt) .mq1-max-767-98\:tw-grid-cols-\[repeat\(2\2c _minmax\(0\2c _1fr\)\)\] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (hover: none) {
  :where(.cmt) .mq2-hover-none\:tw-opacity-\[1\] {
    opacity: 1;
  }
}

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

:where(.cmt) .\[\&\.n1\]\:tw-grid-cols-\[minmax\(0\2c _420px\)\].n1 {
  grid-template-columns: minmax(0, 420px);
}

@media (max-width: 767.98px) {
  :where(.cmt) .mq1-max-767-98\:\[\&\.n1\]\:tw-grid-cols-\[minmax\(0\2c _1fr\)\].n1 {
    grid-template-columns: minmax(0, 1fr);
  }
}

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

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

:where(.cmt) .\[\&\:\:after\]\:tw-bottom-\[5\%\]::after {
  bottom: 5%;
}

:where(.cmt) .\[\&\:\:after\]\:tw-right-\[5\%\]::after {
  right: 5%;
}

:where(.cmt) .\[\&\:\:after\]\:tw-h-\[60\%\]::after {
  height: 60%;
}

:where(.cmt) .\[\&\:\:after\]\:tw-w-\[60\%\]::after {
  width: 60%;
}

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

:where(.cmt) .\[\&\:\:after\]\:tw-css-animation-\[stOrbit_5s_ease-in-out_infinite_alternate\]::after {
  animation: stOrbit 5s ease-in-out infinite alternate;
}

:where(.cmt) .\[\&\:\:after\]\:tw-css-content-\[\'\'\]::after {
  content: '';
}

@media (prefers-reduced-motion: reduce) {
  :where(.cmt) .mq3-motion-reduce\:\[\&\:\:after\]\:\!tw-css-animation-\[none\]::after {
    animation: none !important;
  }
}

:where(.cmt) .\[\&\:\:after\]\:\[\&\&\]\:tw-css-background-\[\#F9A8D4\].\[\&\:\:after\]\:\[\&\&\]\:tw-css-background-\[\#F9A8D4\]::after {
  background: #F9A8D4;
}

:where(.cmt) .\[\&\:\:after\]\:\[\&\&\]\:tw-css-animation-delay-\[-2\.5s\].\[\&\:\:after\]\:\[\&\&\]\:tw-css-animation-delay-\[-2\.5s\]::after {
  animation-delay: -2.5s;
}

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

:where(.cmt) .\[\&\:\:before\]\:tw-left-\[5\%\]::before {
  left: 5%;
}

:where(.cmt) .\[\&\:\:before\]\:tw-top-\[10\%\]::before {
  top: 10%;
}

:where(.cmt) .\[\&\:\:before\]\:tw-h-\[60\%\]::before {
  height: 60%;
}

:where(.cmt) .\[\&\:\:before\]\:tw-w-\[60\%\]::before {
  width: 60%;
}

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

:where(.cmt) .\[\&\:\:before\]\:tw-css-animation-\[stOrbit_5s_ease-in-out_infinite_alternate\]::before {
  animation: stOrbit 5s ease-in-out infinite alternate;
}

:where(.cmt) .\[\&\:\:before\]\:tw-css-background-\[\#C4B5FD\]::before {
  background: #C4B5FD;
}

:where(.cmt) .\[\&\:\:before\]\:tw-css-content-\[\'\'\]::before {
  content: '';
}

@media (prefers-reduced-motion: reduce) {
  :where(.cmt) .mq3-motion-reduce\:\[\&\:\:before\]\:\!tw-css-animation-\[none\]::before {
    animation: none !important;
  }
}

:where(.cmt) .\[\&\:hover\]\:tw-css-background-\[rgba\(255\2c _255\2c _255\2c _\.26\)\]:hover {
  background: rgba(255, 255, 255, .26);
}

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

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

:where(.cmt) .\[\&_\>_div\]\:tw-h-full > div {
  height: 100%;
}

:where(.cmt) .\[\&_\>_div\]\:tw-w-\[0\] > div {
  width: 0;
}

:where(.cmt) .\[\&_\>_div\]\:tw-css-background-\[\#1D1D1F\] > div {
  background: #1D1D1F;
}

:where(.cmt) .\[\&_\>_div\]\:tw-css-transition-\[width_\.8s_ease\] > div {
  transition: width .8s ease;
}

:where(.cmt) .\[\&_button\:hover\]\:tw-css-background-\[\#fff\] button:hover {
  background: #fff;
}

:where(.cmt) .\[\&_button\:hover\]\:tw-css-background-\[rgba\(255\2c _255\2c _255\2c _\.22\)\] button:hover {
  background: rgba(255, 255, 255, .22);
}

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

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

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

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

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

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

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

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

:where(.cmt) .\[\&_button\]\:tw-p-\[0_16px\] button {
  padding: 0 16px;
}

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

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

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

: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-\[rgba\(255\2c _255\2c _255\2c _\.12\)\] button {
  background: rgba(255, 255, 255, .12);
}

:where(.cmt) .\[\&_button\]\:tw-css-background-\[rgba\(255\2c _255\2c _255\2c _\.95\)\] button {
  background: rgba(255, 255, 255, .95);
}

:where(.cmt) .\[\&_button\]\:tw-css-color-\[\#1D1D1F\] button {
  color: #1D1D1F;
}

:where(.cmt) .\[\&_button\]\:tw-css-color-\[\#fff\] button {
  color: #fff;
}

:where(.cmt) .\[\&_img\.is-developing\]\:tw-opacity-\[\.5\] img.is-developing {
  opacity: .5;
}

:where(.cmt) .\[\&_img\.is-developing\]\:tw-css-filter-\[blur\(22px\)_saturate\(1\.4\)\] img.is-developing {
  filter: blur(22px) saturate(1.4);
}

:where(.cmt) .\[\&_img\.is-developing\]\:tw-css-transform-\[scale\(1\.06\)\] img.is-developing {
  transform: scale(1.06);
}

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

:where(.cmt) .\[\&_img\]\:tw-h-full img {
  height: 100%;
}

:where(.cmt) .\[\&_img\]\:tw-max-h-\[76vh\] img {
  max-height: 76vh;
}

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

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

:where(.cmt) .\[\&_img\]\:tw-cursor-zoom-in img {
  cursor: zoom-in;
}

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

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

:where(.cmt) .\[\&_img\]\:tw-css-transition-\[filter_\.9s_ease\2c _transform_\.9s_ease\2c _opacity_\.6s_ease\] img {
  transition: filter .9s ease, transform .9s ease, opacity .6s ease;
}

@media (prefers-reduced-motion: reduce) {
  :where(.cmt) .mq3-motion-reduce\:\[\&_img\]\:\!tw-css-transition-\[none\] img {
    transition: none !important;
  }
}

:where(.cmt) .st-cell:focus-within .\[\.st-cell\:focus-within_\&\]\:tw-opacity-\[1\] {
  opacity: 1;
}

:where(.cmt) .st-cell:hover .\[\.st-cell\:hover_\&\]\:tw-opacity-\[1\] {
  opacity: 1;
}

:where(.cmt) .st-lb-bar .\[\.st-lb-bar_\&\:is\(button\)\]\:tw-css-background-\[\#fff\]:is(button) {
  background: #fff;
}

:where(.cmt) .st-lb-bar .\[\.st-lb-bar_\&\:is\(button\)\]\:tw-css-color-\[\#1D1D1F\]:is(button) {
  color: #1D1D1F;
}