     if @props.pos != prevProps.pos && @props.pos
       @_scrollInstructions (->)
     if @props.console.split("\n").length != prevProps.console.split("\n").length
-      document.querySelector('div.machine .console').scrollTop =
-        document.querySelector('div.machine .console').scrollHeight
+      @_scrollConsole()
 
   _scrollInstructions: (callback) ->
-    $one     = (selector) -> document.querySelector selector
-    $pointer = $one '.machine .instructions .pointer'
-    $content = $one '.machine .instructions .content'
+    $pointer = @refs.pointer.getDOMNode()
+    $content = @refs.content.getDOMNode()
     line_num = @props.pos.split(',')[0]
     $pointer.style.display = 'block'
     $content.style.display = 'block'
-    element_1 = $one "div.machine .instructions .content .num._1"
-    element_n = $one "div.machine .instructions .content .num._#{line_num}"
+    $element_1 = @refs["num1"].getDOMNode()
+    $element_n = @refs["num#{line_num}"].getDOMNode()
     old_scroll_top = $content.scrollTop
-    new_scroll_top = element_n.getBoundingClientRect().top -
-                     element_1.getBoundingClientRect().top
+    new_scroll_top = $element_n.getBoundingClientRect().top -
+                     $element_1.getBoundingClientRect().top
     animateScrollTop = (progress) ->
       progress = 1.0 if progress > 1.0
       $content.scrollTop = (1.0 - progress) * old_scroll_top +

        (@props.state == 'OFF' && 'off ' || '') +
        (@props.state != 'OFF' && 'on ' || '')

      div { className: 'buttons' },
        button
          className: 'step'
          onClick: => @props.doCommand.step()

    for line in lines
      html.push div
        key: "num#{line_num}"
        ref: "num#{line_num}"
        className: "num _#{line_num}"
        line_num
      html.push div
