*,
:before,
:after {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}

html,
body {
  overscroll-behavior: none;
  cursor: grab;
}

:active {
  cursor: grabbing;
}

body {
  padding: 0;
  margin: 0;
  font-family: sans-serif;
  background-color: #797979;
  font-size: 14px;
  color: #fff;
  max-width: 100vw;
  max-height: 100vh;
  overflow: hidden;
  --control: #1b8aab;
}

.wrapper {
  position: absolute;
  width: 2000px;
  height: 2000px;
  pointer-events: none;
  background-color: #b4b3b3;
}

.wrapper * {
  pointer-events: none;
}

.wrapper.delete-mode {
  background-color: #938060;
}

.wrapper.delete-mode .el:hover,
.wrapper.delete-mode .el-group {
  animation: delete-mode infinite 2s;
}

.wrapper.delete-mode .box:hover {
  box-shadow: 0 0 0 4px #a83656ca;
}

@keyframes delete-mode {
  0%,
  100% {
    background-color: #6a0d3398;
  }
  50% {
    background-color: #a83656ca;
  }
}

.wrapper * {
  pointer-events: none;
}

.dev {
  transition: opacity 0.3s;
  opacity: 0;
  pointer-events: none;
}

.dev-mode .el,
.dev-mode .pneumatic-tube,
.dev-mode .dev {
  opacity: 1;
  pointer-events: all;
}

.pneumatic-tube {
  position: absolute;
  --m: 2;
  --w: 24px;
  --h: 24px;
  --frame-no: 1;
  --offset: 0px;
  margin-top: calc(var(--h) * -1);
  margin-left: calc(var(--w) * -1);
  z-index: 10;
}

[variant='straight'] .tube {
  --bg-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAPElEQVR4AeyVsQkAAAjD1P9/1hM6ZZFkFoS00CmYBw8WZhrmQQZwS0tF0bCKVBQNxANblBXBe7MOTszgAAAA//+VdSGoAAAABklEQVQDANbXwDGnv3nqAAAAAElFTkSuQmCC);
}

[variant='elbow'] .tube {
  --bg-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAeklEQVR4AeyUSwrAIAxEW+9/Z2UWAwHjJzK60UBoKfa9Zqimb3NdKMjBmorIMv9gdQUEW2b0n2gKACc4CrXrXQHhduHqvStYhXnvVQLl10NYCfBQ2WcF6niQxNkJYFT3m2CY6IuoGRH2FHpLRADzqJcLCOdocgHBvBYAAAD//xGdci8AAAAGSURBVAMAj7dkKYBqE1kAAAAASUVORK5CYII=);
}

[variant='entrance'] .tube {
  --bg-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAaElEQVR4AeyTMQoAMAgD2/7/zy0BM1jazdsURFxyGHUNOBqQDN6PKLVoPqIUkMaJpgFhxL8gFumYjEQAEjcEAxiCAgRBAfo7DCBxbAKLYwAJOzGLGmAHUtX33lm6A13PnaWANE40OOAAAAD//2ff7uMAAAAGSURBVAMAMuw0MaZMgU0AAAAASUVORK5CYII=);
}

.dev-mode [variant='entrance'] .tube {
  --bg-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAfElEQVR4AdyTsQ3AIAwEwTtklyhNhkiRcaKMkyJD0CB2YQjQF24Qpb/Alq71yfZbArkcCLY/NSvapOQ+9teKOCkHNyCnNKy5IoRJN0ObQCU0ASaAhCqAhCrA39EEaE6bQJvTBGis0FbkSPDl8liBxxqRep3RCqRnZP0jdwAAAP//O9DFpgAAAAZJREFUAwCHLMwxwSrCEAAAAABJRU5ErkJggg==);
}

.conveyor-belt {
  position: absolute;
  --m: 4;
  --h: 12px;
  --move-direction: -1;
  --frame-no: 5;
}

.belt-wrapper {
  display: flex;
}

.btn-wrapper {
  position: absolute;
  width: 100px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transform: translate(36px, 36px);
}

.btn-wrapper .btn {
  position: relative;
  margin: 0;
  z-index: 999;
}

.pix {
  overflow: hidden;
  position: relative;
  --width: calc(var(--m) * var(--w));
  --height: calc(var(--m) * var(--h));
  width: var(--width);
  height: var(--height);
}

.pix::after {
  content: '';
  image-rendering: pixelated;
  position: absolute;
  width: calc(var(--width) * var(--frame-no));
  height: var(--height);
  background-image: var(--bg-image);
  background-size: cover;
  animation: frame-animation 0.5s infinite steps(calc(var(--frame-no) - 1));
  animation-play-state: paused;
}

.conveyor-belt .pix {
  width: calc(var(--width) - (var(--m) * 2px));
  height: calc(var(--height) - (var(--m) * 2px));
}

.conveyor-belt .pix::after {
  top: calc(-1px * var(--m));
  left: calc(-1px * var(--m));
}

.animate .pix::after {
  animation-play-state: running;
}

.belt-module {
  --w: 7px;
  --bg-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACMAAAAMCAYAAADoIwS6AAAAjklEQVR4AezUywmEQBBF0ZnJwvyDM4yRI1wpBPcuWri8TykUrfj7vOg6l9m27T+57zdnfPM8jTnTyRQ8+CjTc5l9378Tg8mc8c3yNOZMJ1Pw4KNMz2WYN7CWeXoL62TWyTydwFN/fTP9hNIeKKf1tI6WKXS4+3LqHsjXMv2EUkOUU13UUV2aL1PokaehPwAAAP//z+meLwAAAAZJREFUAwB+U6AZmRQ4AQAAAABJRU5ErkJggg==);
}

.belt-edge {
  --w: 11px;
  --bg-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAG4AAAAYCAYAAAAbIMgnAAACh0lEQVR4AeyWAW7jQAwDffeL/P9xecYdBgZdWZHoTb0FYtQFWGlFitmVGqB/l/vnkhO4F3fJtS3L8OIej8c/h3ffLy/16dxF6Y5i7pc+13UWfxSlz1F9XV18F3NfPqtPdZ3bxWWhGs7G23ed4Nk5lIvDdLVfFuXP5/OPg/Quyksa/GLOuYN0Vax85SO9zjmKr6LzlY/6dFZUvYvoxJF3yBqdXxYXLyszic/Eq/nyVt6vqJzzGcyaw25x2fTMBWPv7btOQ3NQXKvf+71bnCxm/XXJT/FKvjOGq3fnOGMO2+JGLoomIl+oOqOv6rGGJiJyLj8aQPQkd17iRnRoItTrInrHw6GJoNZhW5wE3TAwlEaxqonLsfb9+ucn6m/fdRpuDi+LW1v2v52B43BhYYA8w/U6Dh94QJ7R1dE5Dt7B9TrOecK53o4bWhzmNz5rAtvi+FaA2dfjLwbM9v3tftvifvsgrvb+bXF8K0D1APdNdFzlFWuu13HRo8pdr+Mqr1hzvY7DAx6QZ3R1dB23LQ4ReGd5nSk+GVfyde+quKqW36/zrDlsixv5cDQRuoyL6B0PhyaC2hHQj2jQCUd6eLREBzQRThu5bmnSRE9y1au4LS6SRx8Qte/kV/HlnsI77xvV4j2q7XS7xcUtzzDXh/60b/TXZw7FRhT9PnUOu8XxjnzpWRe/fZnussyaw8visI/mnOPyyB3Qd4i+yp0XXOeV61FL3kF94nWuou4oTj0xdpzqVex8pY3+OZemXBwk5oB8JvAEMz3xwhOQzwSeYKYnXngC8u+gXZzMMAf5TK2CdKOx8oi1UR/pYm+VZ53OR7HyoqY+8gjVj2LVE2s5l9/h4iS842dN4D8AAAD//0D8heAAAAAGSURBVAMAW8EMXhplLEUAAAAASUVORK5CYII=);
}

.flip {
  transform: scale(-1, -1);
}

@keyframes frame-animation {
  0% {
    background-position: calc(var(--width) * var(--move-direction))
      calc(var(--height));
  }
  100% {
    background-position: calc(
        var(--width) * var(--move-direction) * var(--frame-no)
      )
      calc(var(--height));
  }
}

.box {
  position: absolute;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  margin-left: -10px;
  transition: 0.1s;
}

.box::after {
  position: absolute;
  content: '';
  width: 20px;
  height: 20px;
  top: 0;
  left: 0;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAKCAYAAADGmhxQAAAAjElEQVR4AeyRUQqAMAxDp/e/s/IGGTHM6fBHQSEsS9Ja61pe/vwDPv1Bn9ngNvjSkXdWNqpxz3n2qt7sBikCvWY9PXPTdw24DCrdg4OMowHpzqXpdM+5fJ3V04AS2YJDep6egafvd3zgWnJ8R/NzQKZ2tGAQz8DDnr56D+clB5zufKOAF4KrKBlwyO0AAAD//+gQ4F8AAAAGSURBVAMAe0AYFZUAvYEAAAAASUVORK5CYII=);
  image-rendering: pixelated;
  background-size: cover;
  background-position: 0 0;
  background-color: var(--bg);
}

.box[expression='surprise']::after {
  background-position: 40px 0;
}

.box[expression='joy']::after {
  background-position: 20px 0;
}

.box[expression='sleepy']::after {
  background-position: 60px 0;
}

.no-transition {
  transition: 0s;
  box-shadow: 0 0 0 2px #7ae1f8;
}

.box.on-ground::after {
  animation: plop forwards 0.4s;
  transform-origin: center bottom;
}

@keyframes plop {
  0% {
    transform: scale(1);
  }
  90% {
    transform: scale(1.2, 0.9);
  }
  100% {
    transform: scale(1);
  }
}

.indicator {
  position: fixed;
  top: 10px;
  left: 10px;
  color: #fff;
  background-color: #000;
  z-index: 99999;
}

nav {
  position: absolute;
  width: 100%;
  padding: 8px;
  display: flex;
  justify-content: space-between;
  z-index: 100;
}

[type='file'] + label,
button {
  background-color: transparent;
  border: 1px solid #000;
  padding: 4px 8px;
  font-size: 1em;
  color: #000;
}

.btn {
  position: absolute;
  border: 1px solid var(--control);
  color: var(--control);
  width: 20px;
  height: 20px;
  padding: 0;
  margin-top: -10px;
  margin-left: -10px;
  font-size: 1.1em;
  transition: 0s;
}

button {
  cursor: pointer;
}

[type='file'] + label:hover,
button:hover {
  color: #fff;
  border-color: #fff;
}

#upload-config {
  display: none;
}

footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  padding: 10px;
  display: flex;
  justify-content: end;
  font-size: 10px;
}

a {
  color: #000000;
  text-decoration: none;
}