@-webkit-keyframes loading-pulse
{
0% 
{
  opacity   : 0.25;
  transform : scaleX(0.5);
}

100% 
{
  opacity   : 1;
  transform : scaleX(1);
}

}

@-moz-keyframes loading-pulse
{
0% 
{
  opacity   : 0.25;
  transform : scaleX(0.5);
}

100% 
{
  opacity   : 1;
  transform : scaleX(1);
}

}

@-ms-keyframes loading-pulse
{
0% 
{
  opacity   : 0.25;
  transform : scaleX(0.5);
}

100% 
{
  opacity   : 1;
  transform : scaleX(1);
}

}

@-o-keyframes loading-pulse
{
0% 
{
  opacity   : 0.25;
  transform : scaleX(0.5);
}

100% 
{
  opacity   : 1;
  transform : scaleX(1);
}

}

@keyframes loading-pulse
{
0% 
{
  opacity   : 0.25;
  transform : scaleX(0.5);
}

100% 
{
  opacity   : 1;
  transform : scaleX(1);
}

}

html.is-loading
{
  overflow : hidden;
}

html.is-loading #app, html.is-loading .workspace
{
  visibility : hidden;
}

.loading-screen
{
  position         : fixed;
  inset            : 0;
  z-index          : 50;
  display          : grid;
  place-items      : center;
  padding          : 24px 24px 24px 24px;
  background-color : var(--bg);
  color            : var(--text);
}

.loading-screen[hidden]
{
  display : none;
}

.loading-content
{
  width      : min(100%, 420px);
  text-align : center;
}

.loading-title
{
  margin         : 0 0 14px 0;
  font           : 500 clamp(26px, 4vw, 38px)/1.3 var(--sans);
  letter-spacing : -1px;
}

.loading-content p
{
  margin : 0 0 0 0;
  color  : var(--muted);
  font   : 12px/1.8 var(--mono);
}

.loading-progress
{
  width            : 140px;
  height           : 2px;
  margin           : 28px auto 0 auto;
  background-color : var(--accent);
  animation        : loading-pulse 1.4s ease-in-out infinite alternate;
}

@media all and (prefers-reduced-motion: reduce)
{

.loading-progress
{
  animation : none;
}

}

/* Generated with Clay, http://fvisser.nl/clay */