.loading {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  padding: var(--s-5);
  background: var(--c-ink);
  transition: opacity 0.6s var(--ease), visibility 0.6s;
}

.loading--done {
  opacity: 0;
  visibility: hidden;
}

.loading__card { width: min(420px, 100%); }

.loading__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-on-ink-soft);
}

.loading__title {
  margin: var(--s-2) 0 var(--s-5);
  font-size: var(--t-xl);
  font-weight: 650;
  letter-spacing: -0.02em;
}

.loading__bar {
  height: 2px;
  background: var(--c-ink-line);
  overflow: hidden;
}

.loading__fill {
  display: block;
  width: 0;
  height: 100%;
  background: var(--c-accent);
  transition: width 0.25s var(--ease);
}

.loading__detail {
  margin-top: var(--s-3);
  font-size: var(--t-sm);
  color: var(--c-on-ink-soft);
}

.loading--failed .loading__fill { background: var(--c-danger); width: 100% !important; }
.loading--failed .loading__detail { color: var(--c-on-ink); }