svg {
  /* Note: explicit values cause the
     "redraw" function not to work (maybe
     there's a way to overwrite styles in js?)
  width: 100%;
  height: 500px;  */
  background: #EBF5DD; /* engineering graph paper color! */
  /* major lines: #A3C0AA */
  /* minor lines: #E5F1D9 */
}
line, circle {
  stroke: #A3C0AA; 
}
line.axis { stroke-dasharray: 3 2;}
.grid1{
  stroke: #A3C0AA;
  stroke-width: 1;
  opacity: 0.9;
}
.grid2{
  stroke: #A3C0AA;
  stroke-width: 1;
  opacity: 0.3;
}

.activePath{
  stroke: #ffffff; /* pencil lead */
  stroke-width: 2;
  fill: none;  
  opacity: 0.9;
}
.lastPath{
  transition-property: opacity, stroke, stroke-width;
  transition-duration: 2s;
  stroke: #e8e8e8;
  stroke-width: 1.5;
  fill: none;
  opacity: 0.8;
}
.oldPath{
  transition-property: opacity, stroke, stroke-width;
  transition-duration: 5s;  
  stroke: #bebebe;
  stroke-width: 1;
  fill: none;
  opacity: 0.35;
}

.heading {
  margin-bottom: 15px;
}
.smoothing {
  font-size: 0.8em;
  margin: 5px;
}