.mx-load {
  --mx-pct: 0;
  box-sizing: border-box;
  color: #202923;
  font-family: Inter, "PingFang SC", "Microsoft YaHei", sans-serif;
  text-align: center;
}

.mx-load *,
.mx-load *::before,
.mx-load *::after {
  box-sizing: border-box;
}

.mx-load--page {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483000 !important;
  display: grid !important;
  place-items: center !important;
  margin: 0 !important;
  padding: 24px !important;
  background: rgba(243, 245, 242, .94) !important;
  backdrop-filter: blur(6px);
  transition: opacity 180ms ease;
}

.mx-load--page.is-done {
  opacity: 0;
  pointer-events: none;
}

.mx-load--embed {
  width: min(360px, 100%);
  margin: 0 auto;
}

.mx-load-card {
  width: min(360px, 100%);
  padding: 22px 20px 18px;
}

.mx-load-ring-wrap {
  position: relative;
  width: 96px;
  height: 96px;
  margin: 0 auto 16px;
}

.mx-load-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(
    from -90deg,
    #ff3b5c,
    #ff9f1c,
    #ffd60a,
    #2ec4b6,
    #4cc9f0,
    #7b2cbf,
    #ff3b5c
  );
  animation: mx-load-spin 1.15s linear infinite;
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 9px), #000 0);
  mask: radial-gradient(farthest-side, transparent calc(100% - 9px), #000 0);
}

.mx-load-ring:not(.is-indeterminate) {
  animation: none;
  background: conic-gradient(
    from -90deg,
    #ff3b5c 0%,
    #ff9f1c 16%,
    #ffd60a 34%,
    #2ec4b6 52%,
    #4cc9f0 70%,
    #7b2cbf 86%,
    #ff3b5c calc(var(--mx-pct) * 1%),
    #e4e9e5 calc(var(--mx-pct) * 1%)
  );
}

.mx-load-pct {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 18px;
  font-weight: 750;
  letter-spacing: 0;
  line-height: 1;
}

.mx-load-status {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.45;
}

.mx-load-bytes {
  min-height: 18px;
  margin: 6px 0 0;
  color: #667069;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.mx-load-tip {
  max-width: 280px;
  margin: 12px auto 0;
  color: #667069;
  font-size: 12px;
  line-height: 1.55;
}

@keyframes mx-load-spin {
  to { transform: rotate(360deg); }
}