*, *:before, *:after {
  margin: 0;
  padding: 0;
  border: 0;

  -webkit-box-sizing: border-box;
}

#app {
  position: absolute;
  width: 100%;
  height: 100%;

  font-size: 200%;
  overflow: hidden;

  background-color: #101010;
  -webkit-perspective: 1000;
}

#scene, #scene:before {
  position: absolute;
  width: 40em;
  height: 40em;

  left: 50%;
  top: 50%;
  margin: -20em 0 0 -20em;

  border: 4px solid #A0A0A0;

  background-color: rgba(255, 255, 255, 1);
  background-image:
    -webkit-linear-gradient(rgba(0, 0, 0, .9) .05em, transparent .07em),
    -webkit-linear-gradient(0deg, rgba(0, 0, 0, .9) .05em, transparent .07em);
  background-size: 1em 1em, 1em 1em;
  background-position: -.1em -.1em, -.1em -.1em, -.05em -.05em, -.05em -.05em;

  -webkit-transform-style: preserve-3d;
}

#scene {
  -webkit-transform: translateY(10em) translateZ(-10em) rotateX(70deg);
}

#scene:before {
  content: '';
  -webkit-transform: rotateX(90deg) translateZ(19.5em) translateY(20em);
}

.finger, .hand, .line {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1em;
  height: 1em;
  margin: -.5em 0 0 -.5em;
  -webkit-transform-style: preserve-3d;
  -webkit-transform: translateX(14.5em) translateY(14.5em) translateZ(0);
}

.finger, .line {
  height: 3em;
}

.hand {
  font-size: 100px;
}

.line {
  -webkit-transform-origin: 50% 100% 0;
}

.face {
  position: absolute;
  width: 1em;
  height: 1em;
  background-color: inherit;
  -webkit-transform-style: preserve-3d;
  -webkit-transform-origin: 0 0;
  -webkit-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .9);
}

.cube .face.top {
  -webkit-transform: translateZ(1em);
}

.cube .face.front {
  -webkit-transform: rotateX(90deg) translateZ(-1em);
}

.cube .face.back {
  -webkit-transform: rotateX(90deg);
}

.cube .face.left {
  -webkit-transform: rotateY(90deg) translateX(-1em);
}

.cube .face.right {
  -webkit-transform: rotateY(90deg) translateX(-1em) translateZ(1em);
}

.finger .face.top {
  -webkit-transform: translateZ(1em);
  height: 3em;
}

.finger .face.front {
  -webkit-transform: rotateX(90deg) translateZ(-3em);
}

.finger .face.back {
  -webkit-transform: rotateX(90deg);
}

.finger .face.left {
  -webkit-transform: rotateY(90deg) translateX(-1em);
  height: 3em;
}

.finger .face.right {
  -webkit-transform: rotateY(90deg) translateX(-1em) translateZ(1em);
  height: 3em;
}

.line .face.top {
  -webkit-transform: translateZ(1em);
  height: 3em;
}

.line .face.front {
  -webkit-transform: rotateX(90deg) translateZ(-3em);
}

.line .face.back {
  -webkit-transform: rotateX(90deg);
}

.line .face.left {
  -webkit-transform: rotateY(90deg) translateX(-1em);
  height: 3em;
}

.line .face.right {
  -webkit-transform: rotateY(90deg) translateX(-1em) translateZ(1em);
  height: 3em;
}