.hm-crafting-loader {
  --hm-loader-deep: #43206b;
  --hm-loader-mid: #6b35a1;
  --hm-loader-soft: #b785e8;
  --hm-loader-ink: #5a2c84;
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(62, 30, 92, .18);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 180ms ease, visibility 180ms ease;
}

.hm-crafting-loader.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.hm-crafting-loader__panel {
  position: relative;
  width: min(90vw, 260px);
  min-height: 182px;
  padding: 24px 22px 20px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .48);
  border-radius: 26px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .93), rgba(250, 247, 253, .96));
  box-shadow: 0 18px 45px rgba(46, 20, 68, .24), inset 0 1px 0 rgba(255, 255, 255, .72);
  text-align: center;
}

.hm-crafting-loader__panel::before {
  position: absolute;
  inset: 0;
  pointer-events: none;
  content: "";
  opacity: .12;
  background: radial-gradient(circle at 22% 16%, rgba(183, 133, 232, .40) 0 1.5px, transparent 2px) 0 0 / 18px 18px, linear-gradient(135deg, rgba(183, 133, 232, .18), transparent 42%);
}

.hm-crafting-loader__art {
  position: relative;
  display: grid;
  width: 150px;
  height: 112px;
  margin: 2px auto 0;
  place-items: center;
}

.hm-crafting-loader__icon {
  position: relative;
  z-index: 1;
  display: grid;
  width: 86px;
  height: 86px;
  place-items: center;
  animation: hm-loader-float 1s ease-in-out infinite;
  filter: drop-shadow(0 10px 18px rgba(65, 32, 98, .14));
}

.hm-crafting-loader__icon img { display: block; width: 100%; height: 100%; object-fit: contain; }

.hm-crafting-loader__strand { position: absolute; bottom: 7px; left: 8px; width: 138px; height: 30px; overflow: visible; }
.hm-crafting-loader__strand path { fill: none; stroke: url(#hm-crafting-loader-gradient); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 190; stroke-dashoffset: 190; animation: hm-loader-draw 1s cubic-bezier(.4, 0, .2, 1) infinite; }

.hm-crafting-loader__spark { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: rgba(190, 137, 235, .8); animation: hm-loader-spark 1s ease-in-out infinite; }
.hm-crafting-loader__spark--one { top: 16px; left: 18px; }
.hm-crafting-loader__spark--two { top: 18px; right: 12px; animation-delay: .18s; }
.hm-crafting-loader__spark--three { bottom: 18px; left: 28px; animation-delay: .34s; }

.hm-crafting-loader__label { margin: 10px 0 0; color: var(--hm-loader-ink); font: 600 12px/1.2 Georgia, "Times New Roman", serif; letter-spacing: .26em; text-transform: uppercase; }
.hm-crafting-loader__dots { display: inline-flex; gap: 5px; margin-top: 9px; align-items: center; }
.hm-crafting-loader__dots span { width: 5px; height: 5px; border-radius: 50%; background: linear-gradient(180deg, #d8b8f8, #ab72e0); animation: hm-loader-dots 1s ease-in-out infinite; }
.hm-crafting-loader__dots span:nth-child(2) { animation-delay: .14s; }
.hm-crafting-loader__dots span:nth-child(3) { animation-delay: .28s; }

@keyframes hm-loader-float { 0%, 100% { transform: translateY(0) rotate(-2deg) scale(1); } 50% { transform: translateY(-3px) rotate(3deg) scale(1.025); } }
@keyframes hm-loader-draw { 0%, 18% { stroke-dashoffset: 190; opacity: .45; } 72%, 100% { stroke-dashoffset: 0; opacity: 1; } }
@keyframes hm-loader-spark { 0%, 100% { opacity: .15; transform: scale(.75); } 48% { opacity: .72; transform: scale(1); } }
@keyframes hm-loader-dots { 0%, 100% { opacity: .22; transform: translateY(0); } 45% { opacity: 1; transform: translateY(-1px); } }

html[data-theme="dark"] .hm-crafting-loader { background: rgba(10, 7, 13, .68); }
html[data-theme="dark"] .hm-crafting-loader__panel { border-color: #58446a; background: linear-gradient(180deg, #2d2238, #211927); box-shadow: 0 18px 45px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255, 255, 255, .06); }
html[data-theme="dark"] .hm-crafting-loader__panel::before { opacity: .16; }
html[data-theme="dark"] .hm-crafting-loader__label { color: #eadcf9; }

@media (prefers-reduced-motion: reduce) {
  .hm-crafting-loader, .hm-crafting-loader * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}