.newton-loader {
  --newton-size: 1;
  color: #111;
  display: inline-block;
  flex: 0 0 auto;
  height: calc(48px * var(--newton-size));
  position: relative;
  width: calc(76px * var(--newton-size));
}

.newton-loader--compact { --newton-size: .62; }

.newton-loader__bar {
  background: currentColor;
  height: calc(3px * var(--newton-size));
  left: calc(5px * var(--newton-size));
  position: absolute;
  top: calc(3px * var(--newton-size));
  width: calc(66px * var(--newton-size));
}

.newton-loader__pendulum {
  height: calc(40px * var(--newton-size));
  left: calc((8px + (var(--newton-index) * 13px)) * var(--newton-size));
  position: absolute;
  top: calc(5px * var(--newton-size));
  transform-origin: 50% 0;
  width: calc(13px * var(--newton-size));
}

.newton-loader__pendulum::before {
  background: currentColor;
  content: "";
  height: calc(30px * var(--newton-size));
  left: 50%;
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  width: calc(1.5px * var(--newton-size));
}

.newton-loader__pendulum::after {
  background: currentColor;
  border-radius: 50%;
  bottom: 0;
  content: "";
  height: calc(13px * var(--newton-size));
  left: 0;
  position: absolute;
  width: calc(13px * var(--newton-size));
}

.newton-loader__pendulum--left {
  animation: newton-cycle-left 1.8s ease-in-out infinite;
}

.newton-loader__pendulum--right {
  animation: newton-cycle-right 1.8s ease-in-out infinite;
}

@keyframes newton-cycle-left {
  0%, 25% { transform: rotate(0deg); }
  50%, 55% { transform: rotate(34deg); }
  75%, 100% { transform: rotate(0deg); }
}

@keyframes newton-cycle-right {
  0%, 4% { transform: rotate(-34deg); }
  25%, 75% { transform: rotate(0deg); }
  96%, 100% { transform: rotate(-34deg); }
}

.with-newton-loader {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: center;
}

.with-newton-loader[hidden],
.with-newton-loader[aria-hidden="true"] {
  display: none !important;
}

.saving-indicator.with-newton-loader,
.auth-msg.with-newton-loader,
.form-message.with-newton-loader,
#registrationStatus.with-newton-loader,
#accountTierName.with-newton-loader,
#accountAiRemaining.with-newton-loader {
  display: inline-flex;
  flex-direction: row;
  gap: 7px;
}

.diagram-loading-placeholder {
  align-items: center;
  color: #111;
  display: flex;
  flex-direction: column;
  font: 500 .66rem "DM Mono", ui-monospace, monospace;
  gap: 7px;
  justify-content: center;
  letter-spacing: .09em;
  min-height: 138px;
  padding: 18px;
  text-align: center;
  text-transform: uppercase;
  width: 100%;
}

.diagram-loading-placeholder[hidden] { display: none !important; }
.exam-diagram.diagram-is-loading { display: none !important; }
.diagram-loading-placeholder.is-error { min-height: 64px; }

.route-newton-loader {
  align-items: center;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 10px;
  inset: 0;
  justify-content: center;
  position: fixed;
  z-index: 20;
}

.route-newton-loader__label {
  color: #555;
  font: .72rem "DM Mono", ui-monospace, monospace;
  letter-spacing: .09em;
  text-transform: uppercase;
}

@media (prefers-reduced-motion: reduce) {
  .newton-loader__pendulum--left,
  .newton-loader__pendulum--right {
    animation: newton-reduced 1.4s ease-in-out infinite alternate;
  }

  @keyframes newton-reduced {
    from { opacity: .35; }
    to { opacity: 1; }
  }
}