#patterns table {
  font-family: monospace;
  font-size: x-small;
  border: 2px solid rgb(63,63,127);
  border-collapse: collapse;
  background-color: black;
  color: white;
}

#patterns table tr th {
  text-align: right;
  border: 2px solid rgb(63,63,127);
}

#patterns table tr td {
  text-align: right;
}

td.note {
  border-left: 2px solid rgb(63,63,127);
}

/* colors from MilkyTracker */
tr.row-0 td.row-num { color: yellow; }
tr.row-4 td.row-num { color: yellow; }
.col-1 { color: cyan; }
.col-2 { color: lime; }
.col-3 { color: magenta; }
.col-4 { color: yellow; }

#row-highlight {
  border: 2px solid;
  border-top-color: rgba(255,0,127,0.4);
  border-left-color: rgba(255,0,127,0.4);
  border-bottom-color: rgba(31,0,15,0.4);
  border-right-color: rgba(31,0,15,0.4);
  background-color: rgba(255,0,127,0.4);
  color: rgb(127,127,255);
}

/* beat row background highlights (not from MilkyTracker) */
tr.row-0 { background: rgb(31,31,63); }
tr.row-4 { background: rgb(15,15,31); }

svg.env rect {
  fill: white;
  stroke: blue;
}

svg.env path {
  fill: none;
  stroke: black;
}

#recording-spinner {
  vertical-align: bottom;
  width: 32px;
  height: 22px;
}

rect.cassette {
  stroke: #888;
  stroke-width: 1;
  fill: #ccc;
}

path.reel {
  stroke-width: 1;
  fill: none;
  animation: 0.5s infinite reel linear;
}

path.from.reel {
  stroke: black;
  stroke-dasharray: 1,3;
}

path.to.reel {
  stroke: maroon;
  stroke-dasharray: 3,1;
}

@keyframes reel {
  0% { stroke-dashoffset: 4 }
  100% { stroke-dashoffset: 0 }
}