/* Empty guidance only; the existing canvas background remains independent. */
.jmc-editor .jmc-empty.jmc-empty-reference {
  position: absolute;
  top: 50%;
  left: calc(50% - 0.5px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  width: max-content;
  max-width: none;
  margin: 0;
  padding: 0;
  transform: translate(-50%, -50%);
  opacity: 1;
  font: 400 16px/1.4 Montserrat, sans-serif;
  white-space: nowrap;
  pointer-events: none;
  transition: opacity 280ms cubic-bezier(.2, .8, .2, 1);
}
.jmc-editor .jmc-empty-reference .jmc-empty-copy {
  flex: 0 0 112px;
  width: 112px;
}
.jmc-editor .jmc-empty-reference .jmc-empty-copy-before { text-align: right; }
.jmc-editor .jmc-empty-reference .jmc-empty-copy-after { text-align: left; }
.jmc-editor .jmc-empty-reference .jmc-empty-cursor {
  position: relative;
  display: block;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  opacity: 1;
  transform: scale(1);
  transition: width 460ms cubic-bezier(.2, .8, .2, 1), flex-basis 460ms cubic-bezier(.2, .8, .2, 1), opacity 180ms ease, transform 240ms ease;
}
.jmc-editor .jmc-empty-reference .jmc-empty-ring {
  position: absolute;
  box-sizing: border-box;
  display: block;
  border-radius: 50%;
  animation: jmc-empty-ring 1600ms ease-out infinite;
}
.jmc-editor .jmc-empty-reference .jmc-empty-ring-outer {
  top: -1px;
  left: -1px;
  width: 30px;
  height: 30px;
  border: 2px solid rgba(255, 255, 255, .2);
}
.jmc-editor .jmc-empty-reference .jmc-empty-ring-inner {
  top: 6px;
  left: 6px;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, .35);
  animation-delay: 220ms;
}
.jmc-editor .jmc-empty-reference .jmc-empty-pointer {
  position: absolute;
  top: 14.25px;
  left: 16.3px;
  display: block;
  width: 23.7px;
  height: 25.24px;
  transform-origin: 28% 26%;
  animation: jmc-empty-pointer 1600ms ease-in-out infinite;
}
.jmc-editor .jmc-empty-reference[data-opening-state="centerMenu"] .jmc-empty-copy {
  flex-basis: 110px;
  width: 110px;
}
.jmc-editor .jmc-empty-reference[data-opening-state="centerMenu"] .jmc-empty-cursor {
  flex-basis: 200px;
  width: 200px;
  opacity: 0;
  transform: scale(.82);
}
.jmc-editor .jmc-empty-reference[data-opening-state="floatingMenu"] { opacity: 0; }
.jmc-editor .jmc-empty-reference:is([data-opening-state="centerMenu"], [data-opening-state="floatingMenu"]) .jmc-empty-cursor > *,
.jmc-editor[hidden] .jmc-empty-reference .jmc-empty-cursor > *,
.jmc-editor .jmc-empty-reference[hidden] .jmc-empty-cursor > * { animation-play-state: paused; }
@keyframes jmc-empty-ring {
  0% { opacity: .92; transform: scale(.65); }
  58%, 100% { opacity: 0; transform: scale(1.58); }
}
@keyframes jmc-empty-pointer {
  0%, 16%, 32%, 100% { transform: scale(1); }
  8%, 24% { transform: scale(.86); }
}
@media (prefers-reduced-motion: reduce) {
  .jmc-editor .jmc-empty.jmc-empty-reference,
  .jmc-editor .jmc-empty-reference .jmc-empty-cursor,
  .jmc-editor .jmc-empty-reference .jmc-empty-cursor > * { animation: none !important; transition: none !important; }
}

.jmc-editor .jmc-empty.jmc-empty-reference::before {
  background-image: radial-gradient(ellipse at 25% 5%, #adc56c 0%, transparent 55%), radial-gradient(ellipse at 70% 80%, #4582b9 0%, transparent 65%), linear-gradient(150deg, #4bc4cb, #448cd0);
  background-size: 100% 100%;
  background-position: center;
  mask-image: radial-gradient(circle, #000 0%, #0009 50%, transparent 100%), radial-gradient(circle at 1px 1px, #000 .8px, transparent 1px);
  mask-size: 100% 100%, 18px 18px;
  mask-position: center, center;
  mask-repeat: no-repeat, repeat;
  mask-composite: intersect;
}