:root {
  --ff-loading-pink: var(--ff-pink, #e83f82);
  --ff-loading-navy: var(--ff-navy, #001030);
  --ff-loading-lime: var(--ff-lime, #c9f31d);
  --ff-loading-warm: var(--ff-cream, #fffaf2);
  --ff-loading-soft: var(--ff-soft-pink, #fff0f5);
  --ff-loading-line: var(--ff-line, #e8dce1);
}

.ff-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.ff-navigation-rail {
  position: fixed;
  inset: 0 0 auto;
  z-index: 2147483000;
  height: 3px;
  pointer-events: none;
  opacity: 0;
  overflow: hidden;
  background: color-mix(in srgb, var(--ff-loading-pink) 20%, transparent);
  transition: opacity 90ms ease-out;
}

.ff-navigation-rail::after {
  content: "";
  display: block;
  width: 42%;
  height: 100%;
  background: var(--ff-loading-pink);
  transform: translateX(-110%);
}

.ff-navigation-rail.is-visible {
  opacity: 1;
}

.ff-navigation-rail.is-visible::after {
  animation: ff-navigation-rail 950ms ease-in-out infinite;
}

@keyframes ff-navigation-rail {
  0% { transform: translateX(-110%); }
  100% { transform: translateX(340%); }
}

.ff-control-pending {
  cursor: wait;
}

.ff-region-busy {
  position: relative;
}

.ff-inline-state,
.ff-process-panel,
.ff-media-error,
.ff-map-status {
  color: var(--ff-loading-navy);
  font-weight: 750;
}

.ff-inline-state {
  display: flex;
  align-items: center;
  gap: .55rem;
  min-height: 1.5rem;
  margin-block: .5rem;
  font-size: .9rem;
}

.ff-inline-state[data-state="pending"]::before {
  content: "";
  width: .8rem;
  height: .8rem;
  flex: 0 0 auto;
  border: 2px solid color-mix(in srgb, var(--ff-loading-navy) 20%, transparent);
  border-top-color: var(--ff-loading-pink);
  border-radius: 50%;
  animation: ff-loading-rotate .72s linear infinite;
}

@keyframes ff-loading-rotate {
  to { transform: rotate(360deg); }
}

.ff-skeleton {
  color: transparent !important;
  border-color: transparent !important;
  background: linear-gradient(100deg, var(--ff-loading-soft) 25%, #fff8f5 42%, var(--ff-loading-soft) 60%);
  background-size: 220% 100%;
  animation: ff-skeleton-shift 1.8s ease-in-out infinite;
  user-select: none;
}

@keyframes ff-skeleton-shift {
  0%, 15% { background-position: 100% 0; }
  85%, 100% { background-position: -100% 0; }
}

.ff-structural-skeleton {
  display: grid;
  gap: .75rem;
}

.ff-structural-skeleton > span {
  display: block;
  height: 3rem;
  border-radius: .75rem;
}

.ff-structural-skeleton > span:first-child {
  width: 44%;
  height: 1.35rem;
}

.ff-progressive-media {
  position: relative;
  overflow: hidden;
  background: var(--ff-loading-soft);
}

.ff-progressive-media > img,
.ff-progressive-media > picture > img,
img.ff-progressive-media {
  opacity: 0;
  transition: opacity 180ms ease-out;
}

.ff-progressive-media.is-ready > img,
.ff-progressive-media.is-ready > picture > img,
img.ff-progressive-media.is-ready {
  opacity: 1;
}

.ff-progressive-media.is-error {
  display: grid;
  place-items: center;
  min-height: 8rem;
}

.ff-media-error {
  max-width: 32rem;
  margin: 1rem;
  padding: .8rem 1rem;
  border: 1px solid var(--ff-loading-line);
  border-radius: .75rem;
  background: var(--ff-loading-warm);
  text-align: center;
}

.ff-process-panel {
  margin-block: 1rem;
  padding: 1rem;
  border: 1px solid var(--ff-loading-line);
  border-left: 4px solid var(--ff-loading-pink);
  border-radius: .85rem;
  background: var(--ff-loading-warm);
}

.ff-process-panel[hidden] {
  display: none;
}

.ff-process-panel__status {
  margin: 0;
}

.ff-progress {
  display: grid;
  gap: .45rem;
  margin-top: .75rem;
}

.ff-progress__track {
  height: .55rem;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ff-loading-pink) 16%, white);
}

.ff-progress__track::after {
  content: "";
  display: block;
  width: var(--ff-progress-value, 0%);
  height: 100%;
  border-radius: inherit;
  background: var(--ff-loading-pink);
  transition: width 120ms linear;
}

.ff-progress__label {
  margin: 0;
  color: var(--ff-loading-navy);
  font-size: .86rem;
  font-weight: 800;
}

.ff-before-after[data-pair-state="pending"] .ff-before-after__stage > * {
  visibility: hidden;
}

.ff-before-after[data-pair-state="pending"] > .ff-before-after__fallback {
  visibility: hidden;
}

.ff-before-after[data-pair-state="pending"]:not([data-ff-comparison-near="true"]) {
  display: block;
  aspect-ratio: var(--ff-comparison-ratio, 4 / 3);
  border-radius: 1rem;
  background: var(--ff-loading-soft);
}

.ff-before-after[data-pair-state="pending"] .ff-before-after__stage::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ff-loading-soft);
}

.ff-before-after[data-pair-state="ready"] .ff-before-after__stage {
  background: transparent;
}

.ff-before-after[data-pair-state="error"] .ff-before-after__stage > *:not(.ff-proof-image-error) {
  visibility: hidden;
}

.ff-map-loading,
.ff-map-error {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  padding: 1.25rem;
  background: var(--ff-loading-soft);
  text-align: center;
}

.ff-map-loading[hidden],
.ff-map-error[hidden] {
  display: none;
}

.ff-map-loading p,
.ff-map-error p {
  margin: 0 0 .75rem;
}

.ff-map-frame {
  width: 100%;
  height: 100%;
  border: 0;
  opacity: 0;
}

.ff-map-frame.is-ready {
  opacity: 1;
  transition: opacity 180ms ease-out;
}

.ff-autosave-status {
  min-height: 1.3rem;
  margin: .35rem 0;
  color: var(--ff-loading-navy);
  font-size: .82rem;
  font-weight: 750;
}

@media (prefers-reduced-motion: reduce) {
  .ff-navigation-rail,
  .ff-progressive-media > img,
  .ff-progressive-media > picture > img,
  img.ff-progressive-media,
  .ff-map-frame,
  .ff-progress__track::after {
    transition: none;
  }

  .ff-navigation-rail.is-visible::after {
    width: 100%;
    transform: none;
    animation: none;
  }

  .ff-inline-state[data-state="pending"]::before,
  .ff-skeleton {
    animation: none;
  }
}