diff --git a/app/assets/javascripts/player/colors.js b/app/assets/javascripts/player/colors.js
new file mode 100644
index 0000000..dafec87
--- /dev/null
+++ b/app/assets/javascripts/player/colors.js
@@ -0,0 +1 @@
+AsciiIo.colors = {"0":"#000000","1":"#CC0000","2":"#4E9A06","3":"#C4A000","4":"#3465A4","5":"#75507B","6":"#06989A","7":"#D3D7CF","8":"#555753","9":"#EF2929","10":"#8AE234","11":"#FCE94F","12":"#729FCF","13":"#AD7FA8","14":"#34E2E2","15":"#EEEEEC","16":"#000000","17":"#00005f","18":"#000087","19":"#0000af","20":"#0000d7","21":"#0000ff","22":"#005f00","23":"#005f5f","24":"#005f87","25":"#005faf","26":"#005fd7","27":"#005fff","28":"#008700","29":"#00875f","30":"#008787","31":"#0087af","32":"#0087d7","33":"#0087ff","34":"#00af00","35":"#00af5f","36":"#00af87","37":"#00afaf","38":"#00afd7","39":"#00afff","40":"#00d700","41":"#00d75f","42":"#00d787","43":"#00d7af","44":"#00d7d7","45":"#00d7ff","46":"#00ff00","47":"#00ff5f","48":"#00ff87","49":"#00ffaf","50":"#00ffd7","51":"#00ffff","52":"#5f0000","53":"#5f005f","54":"#5f0087","55":"#5f00af","56":"#5f00d7","57":"#5f00ff","58":"#5f5f00","59":"#5f5f5f","60":"#5f5f87","61":"#5f5faf","62":"#5f5fd7","63":"#5f5fff","64":"#5f8700","65":"#5f875f","66":"#5f8787","67":"#5f87af","68":"#5f87d7","69":"#5f87ff","70":"#5faf00","71":"#5faf5f","72":"#5faf87","73":"#5fafaf","74":"#5fafd7","75":"#5fafff","76":"#5fd700","77":"#5fd75f","78":"#5fd787","79":"#5fd7af","80":"#5fd7d7","81":"#5fd7ff","82":"#5fff00","83":"#5fff5f","84":"#5fff87","85":"#5fffaf","86":"#5fffd7","87":"#5fffff","88":"#870000","89":"#87005f","90":"#870087","91":"#8700af","92":"#8700d7","93":"#8700ff","94":"#875f00","95":"#875f5f","96":"#875f87","97":"#875faf","98":"#875fd7","99":"#875fff","100":"#878700","101":"#87875f","102":"#878787","103":"#8787af","104":"#8787d7","105":"#8787ff","106":"#87af00","107":"#87af5f","108":"#87af87","109":"#87afaf","110":"#87afd7","111":"#87afff","112":"#87d700","113":"#87d75f","114":"#87d787","115":"#87d7af","116":"#87d7d7","117":"#87d7ff","118":"#87ff00","119":"#87ff5f","120":"#87ff87","121":"#87ffaf","122":"#87ffd7","123":"#87ffff","124":"#af0000","125":"#af005f","126":"#af0087","127":"#af00af","128":"#af00d7","129":"#af00ff","130":"#af5f00","131":"#af5f5f","132":"#af5f87","133":"#af5faf","134":"#af5fd7","135":"#af5fff","136":"#af8700","137":"#af875f","138":"#af8787","139":"#af87af","140":"#af87d7","141":"#af87ff","142":"#afaf00","143":"#afaf5f","144":"#afaf87","145":"#afafaf","146":"#afafd7","147":"#afafff","148":"#afd700","149":"#afd75f","150":"#afd787","151":"#afd7af","152":"#afd7d7","153":"#afd7ff","154":"#afff00","155":"#afff5f","156":"#afff87","157":"#afffaf","158":"#afffd7","159":"#afffff","160":"#d70000","161":"#d7005f","162":"#d70087","163":"#d700af","164":"#d700d7","165":"#d700ff","166":"#d75f00","167":"#d75f5f","168":"#d75f87","169":"#d75faf","170":"#d75fd7","171":"#d75fff","172":"#d78700","173":"#d7875f","174":"#d78787","175":"#d787af","176":"#d787d7","177":"#d787ff","178":"#d7af00","179":"#d7af5f","180":"#d7af87","181":"#d7afaf","182":"#d7afd7","183":"#d7afff","184":"#d7d700","185":"#d7d75f","186":"#d7d787","187":"#d7d7af","188":"#d7d7d7","189":"#d7d7ff","190":"#d7ff00","191":"#d7ff5f","192":"#d7ff87","193":"#d7ffaf","194":"#d7ffd7","195":"#d7ffff","196":"#ff0000","197":"#ff005f","198":"#ff0087","199":"#ff00af","200":"#ff00d7","201":"#ff00ff","202":"#ff5f00","203":"#ff5f5f","204":"#ff5f87","205":"#ff5faf","206":"#ff5fd7","207":"#ff5fff","208":"#ff8700","209":"#ff875f","210":"#ff8787","211":"#ff87af","212":"#ff87d7","213":"#ff87ff","214":"#ffaf00","215":"#ffaf5f","216":"#ffaf87","217":"#ffafaf","218":"#ffafd7","219":"#ffafff","220":"#ffd700","221":"#ffd75f","222":"#ffd787","223":"#ffd7af","224":"#ffd7d7","225":"#ffd7ff","226":"#ffff00","227":"#ffff5f","228":"#ffff87","229":"#ffffaf","230":"#ffffd7","231":"#ffffff","232":"#080808","233":"#121212","234":"#1c1c1c","235":"#262626","236":"#303030","237":"#3a3a3a","238":"#444444","239":"#4e4e4e","240":"#585858","241":"#626262","242":"#6c6c6c","243":"#767676","244":"#808080","245":"#8a8a8a","246":"#949494","247":"#9e9e9e","248":"#a8a8a8","249":"#b2b2b2","250":"#bcbcbc","251":"#c6c6c6","252":"#d0d0d0","253":"#dadada","254":"#e4e4e4","255":"#eeeeee"};
\ No newline at end of file
diff --git a/app/assets/javascripts/player/namespace.js b/app/assets/javascripts/player/namespace.js
index 160df36..5567cd1 100644
--- a/app/assets/javascripts/player/namespace.js
+++ b/app/assets/javascripts/player/namespace.js
@@ -1,3 +1,5 @@
 if (!window.AsciiIo){
   window.AsciiIo = {};
 }
+
+AsciiIo.Renderer = {};
diff --git a/app/assets/javascripts/player/player.js b/app/assets/javascripts/player/player.js
index e55de29..6fd7e1e 100644
--- a/app/assets/javascripts/player/player.js
+++ b/app/assets/javascripts/player/player.js
@@ -1,6 +1,7 @@
 //= require ./namespace
 //= require ./utf8
-//= require ./terminal_view
+//= require ./renderers/base
+//= require_tree ./renderers
 //= require ./screen_buffer
 //= require ./vt
 //= require ./hud_view
diff --git a/app/assets/javascripts/player/player_view.js.coffee b/app/assets/javascripts/player/player_view.js.coffee
index 769da9a..bcb70fa 100644
--- a/app/assets/javascripts/player/player_view.js.coffee
+++ b/app/assets/javascripts/player/player_view.js.coffee
@@ -5,25 +5,25 @@ class AsciiIo.PlayerView extends Backbone.View
     @movie.on 'movie-loaded', @onMovieLoaded, this
     @movie.load()
 
-    @terminalView = new AsciiIo.TerminalView(
+    @rendererView = new options.rendererClass(
       cols:  this.options.cols
       lines: this.options.lines
     )
 
-    @vt = new AsciiIo.VT(options.cols, options.lines, @terminalView)
+    @vt = new AsciiIo.VT(options.cols, options.lines, @rendererView)
 
     @createChildViews()
 
   createChildViews: ->
-    @$el.append(@terminalView.$el)
-    @terminalView.afterInsertedToDom()
-    @terminalView.showLoadingIndicator()
+    @$el.append(@rendererView.$el)
+    @rendererView.afterInsertedToDom()
+    @rendererView.showLoadingIndicator()
 
     @hudView = new AsciiIo.HudView()
     @$el.append(@hudView.$el)
 
   onMovieLoaded: (asciicast) ->
-    @terminalView.hideLoadingIndicator()
+    @rendererView.hideLoadingIndicator()
     @hudView.setDuration(asciicast.get('duration'))
 
     @bindEvents()
@@ -31,10 +31,10 @@ class AsciiIo.PlayerView extends Backbone.View
     if @options.autoPlay
       @movie.play()
     else
-      @terminalView.showToggleOverlay()
+      @rendererView.showToggleOverlay()
 
   bindEvents: ->
-    @terminalView.on 'terminal-click', =>
+    @rendererView.on 'terminal-click', =>
       @movie.togglePlay()
 
     @hudView.on 'hud-play-click', =>
@@ -56,8 +56,8 @@ class AsciiIo.PlayerView extends Backbone.View
       @vt.feed(frame)
 
     @movie.on 'movie-awake', (frame) =>
-      @terminalView.restartCursorBlink()
+      @rendererView.restartCursorBlink()
 
     @movie.on 'movie-finished', =>
-      @terminalView.stopCursorBlink()
+      @rendererView.stopCursorBlink()
       @hudView.setProgress(100)
diff --git a/app/assets/javascripts/player/renderers/base.js.coffee b/app/assets/javascripts/player/renderers/base.js.coffee
new file mode 100644
index 0000000..8badf60
--- /dev/null
+++ b/app/assets/javascripts/player/renderers/base.js.coffee
@@ -0,0 +1,58 @@
+class AsciiIo.Renderer.Base extends Backbone.View
+  events:
+    'click': 'onClick'
+
+  initialize: (options) ->
+    @cols = options.cols
+    @lines = options.lines
+    @showCursor true
+    @startCursorBlink()
+
+  onClick: ->
+    @trigger('terminal-click')
+    @hideToggleOverlay()
+
+  render: (changes, cursorX, cursorY) ->
+    for n, data of changes
+      c = if parseInt(n) is cursorY then cursorX else undefined
+      @renderLine n, data || [], c
+
+  renderLine: (n, data, cursorX) ->
+    throw '#renderLine not implemented'
+
+  afterInsertedToDom: ->
+
+  showLoadingIndicator: ->
+    @$el.append('<div class="loading">')
+
+  hideLoadingIndicator: ->
+    @$('.loading').remove()
+
+  showToggleOverlay: ->
+    @$el.append('<div class="start-prompt">')
+
+  hideToggleOverlay: ->
+    @$('.start-prompt').remove()
+
+  showCursor: (show) ->
+    throw '#showCursor not implemented'
+
+  blinkCursor: ->
+    throw '#blinkCursor not implemented'
+
+  resetCursorState: ->
+
+  startCursorBlink: ->
+    @cursorTimerId = setInterval(@blinkCursor.bind(this), 500)
+
+  stopCursorBlink: ->
+    if @cursorTimerId
+      clearInterval @cursorTimerId
+      @cursorTimerId = null
+
+  restartCursorBlink: ->
+    @stopCursorBlink()
+    @resetCursorState()
+    @startCursorBlink()
+
+  visualBell: ->
diff --git a/app/assets/javascripts/player/renderers/canvas.js.coffee b/app/assets/javascripts/player/renderers/canvas.js.coffee
new file mode 100644
index 0000000..9f5016b
--- /dev/null
+++ b/app/assets/javascripts/player/renderers/canvas.js.coffee
@@ -0,0 +1,104 @@
+class AsciiIo.Renderer.Canvas extends AsciiIo.Renderer.Base
+  tagName: 'canvas'
+  className: 'terminal'
+
+  events:
+    'click': 'onClick'
+
+  initialize: (options) ->
+    super(options)
+    @ctx = @el.getContext('2d')
+    @cellWidth = 7
+    @cellHeight = 14
+
+  afterInsertedToDom: ->
+    width = @cols * @cellWidth
+    height = @lines * @cellHeight
+    @$el.attr('width', width)
+    @$el.attr('height', height)
+    @setFont()
+    # @$el.css(width: width + 'px', height: height + 'px')
+    # @ctx.scale(1, 1)
+
+  setFont: ->
+    size = @$el.css('font-size')
+    console.log size
+    family = @$el.css('font-family')
+    console.log family
+    @font = "#{size} #{family}"
+    @ctx.font = @font
+    @prevFont = @font
+
+  renderLine: (n, data, cursorX) ->
+    left = 0
+    width = @cols * @cellWidth
+    top = n * @cellHeight
+    # bottom = (n + 1) * @cellHeight
+
+    # @ctx.clearRect(left, top + 1, width, @cellHeight)
+
+    # ctx.fillStyle = "#FFA500";
+    # @ctx.font = "12px monospace"
+
+    for i in [0...@cols]
+      d = data[i]
+
+      if d
+        [char, brush] = d
+
+        char = char.replace('&', '&amp;').replace('<', '&lt;')
+
+        @setBackgroundAttributes(brush)
+        @ctx.fillRect left + i * @cellWidth, top + 1, @cellWidth, @cellHeight
+
+        if char != ' '
+          @setTextAttributes(brush)
+          @ctx.fillText char, i * @cellWidth, top + @cellHeight - 2
+
+  setBackgroundAttributes: (brush) ->
+    if brush.bg isnt undefined
+      bg = brush.bg
+      bg += 8 if bg < 8 and brush.blink
+    else
+      bg = 0
+
+    @ctx.fillStyle = AsciiIo.colors[bg]
+
+  setTextAttributes: (brush) ->
+    if brush.fg isnt undefined
+      fg = brush.fg
+      fg += 8 if fg < 8 and brush.bright
+    else
+      fg = 7
+
+    @ctx.fillStyle = AsciiIo.colors[fg]
+
+    font = @font
+
+    if brush.bright or brush.italic
+      if brush.bright
+        font = "bold #{font}"
+
+      if brush.italic
+        font = "italic #{font}"
+
+    if font != @prevFont
+      @ctx.font = font
+      @prevFont = font
+
+  showCursor: (show) ->
+    # if show
+    #   @$el.addClass "cursor-on"
+    # else
+    #   @$el.removeClass "cursor-on"
+
+  blinkCursor: ->
+    # cursor = @$el.find(".cursor")
+    # if cursor.hasClass("visible")
+    #   cursor.removeClass "visible"
+    # else
+    #   cursor.addClass "visible"
+
+  resetCursorState: ->
+    # cursor = @$el.find(".cursor")
+    # cursor.addClass "visible"
diff --git a/app/assets/javascripts/player/terminal_view.js.coffee b/app/assets/javascripts/player/renderers/pre.js.coffee
similarity index 70%
rename from app/assets/javascripts/player/terminal_view.js.coffee
rename to app/assets/javascripts/player/renderers/pre.js.coffee
index 07d208a..e4d28a3 100644
--- a/app/assets/javascripts/player/terminal_view.js.coffee
+++ b/app/assets/javascripts/player/renderers/pre.js.coffee
@@ -1,20 +1,12 @@
-class AsciiIo.TerminalView extends Backbone.View
+class AsciiIo.Renderer.Pre extends AsciiIo.Renderer.Base
   tagName: 'pre'
   className: 'terminal'
 
-  events:
-    'click': 'onClick'
-
   initialize: (options) ->
-    @cols = options.cols
-    @lines = options.lines
-    @cachedSpans = {}
+    super(options)
 
+    @cachedSpans = {}
     @createChildElements()
-    @showCursor true
-    @startCursorBlink()
-    # this.updateScreen();
-    # this.render();
 
   createChildElements: ->
     i = 0
@@ -25,38 +17,29 @@ class AsciiIo.TerminalView extends Backbone.View
       @$el.append "\n"
       i++
 
-  onClick: ->
-    @trigger('terminal-click')
-    @hideToggleOverlay()
+  afterInsertedToDom: ->
+    super()
+    @initialRender()
+    @fixSize()
 
-  clearScreen: ->
-    # this.lineData.length = 0;
-    # @cursorY = @cursorX = 0
-    @$el.find(".line").empty()
+  initialRender: ->
+    changes = {}
 
-  render: (changes, cursorX, cursorY) ->
-    @$el.find('.cursor').removeClass('cursor')
+    i = 0
+    while i < @lines
+      changes[i] = undefined
+      i += 1
 
-    for n, data of changes
-      c = if parseInt(n) is cursorY then cursorX else undefined
-      @renderLine n, data || [], c
+    @render(changes, 0, 0)
 
-  afterInsertedToDom: ->
+  fixSize: ->
     width = @$el.width()
     height = @$el.height()
     @$el.css(width: width + 'px', height: height + 'px')
 
-  showLoadingIndicator: ->
-    @$el.append('<div class="loading">')
-
-  hideLoadingIndicator: ->
-    @$('.loading').remove()
-
-  showToggleOverlay: ->
-    @$el.append('<div class="start-prompt">')
-
-  hideToggleOverlay: ->
-    @$('.start-prompt').remove()
+  render: (changes, cursorX, cursorY) ->
+    @$el.find('.cursor').removeClass('cursor')
+    super(changes, cursorX, cursorY)
 
   renderLine: (n, data, cursorX) ->
     html = []
@@ -139,17 +122,8 @@ class AsciiIo.TerminalView extends Backbone.View
     cursor = @$el.find(".cursor")
     cursor.addClass "visible"
 
-  startCursorBlink: ->
-    @cursorTimerId = setInterval(@blinkCursor.bind(this), 500)
-
-  stopCursorBlink: ->
-    if @cursorTimerId
-      clearInterval @cursorTimerId
-      @cursorTimerId = null
-
-  restartCursorBlink: ->
-    @stopCursorBlink()
-    @resetCursorState()
-    @startCursorBlink()
-
-  visualBell: ->
+  # TODO: check if it's used
+  clearScreen: ->
+    # this.lineData.length = 0;
+    # @cursorY = @cursorX = 0
+    @$el.find(".line").empty()
diff --git a/app/assets/javascripts/player/vt.js.coffee b/app/assets/javascripts/player/vt.js.coffee
index 483a951..e2b02c2 100644
--- a/app/assets/javascripts/player/vt.js.coffee
+++ b/app/assets/javascripts/player/vt.js.coffee
@@ -4,7 +4,6 @@ class AsciiIo.VT
     @sgrInterpreter = new AsciiIo.SgrInterpreter()
     @data = ''
     @resetTerminal()
-    @render()
 
   handleData: (data) ->
     if data.match(/^\x1b[\x00-\x1f]/)
diff --git a/app/assets/stylesheets/colors.css b/app/assets/stylesheets/colors.css
new file mode 100644
index 0000000..4f5ee2f
--- /dev/null
+++ b/app/assets/stylesheets/colors.css
@@ -0,0 +1,512 @@
+.fg0 { color: #000000 }
+.bg0 { background-color: #000000 }
+.fg1 { color: #CC0000 }
+.bg1 { background-color: #CC0000 }
+.fg2 { color: #4E9A06 }
+.bg2 { background-color: #4E9A06 }
+.fg3 { color: #C4A000 }
+.bg3 { background-color: #C4A000 }
+.fg4 { color: #3465A4 }
+.bg4 { background-color: #3465A4 }
+.fg5 { color: #75507B }
+.bg5 { background-color: #75507B }
+.fg6 { color: #06989A }
+.bg6 { background-color: #06989A }
+.fg7 { color: #D3D7CF }
+.bg7 { background-color: #D3D7CF }
+.fg8 { color: #555753 }
+.bg8 { background-color: #555753 }
+.fg9 { color: #EF2929 }
+.bg9 { background-color: #EF2929 }
+.fg10 { color: #8AE234 }
+.bg10 { background-color: #8AE234 }
+.fg11 { color: #FCE94F }
+.bg11 { background-color: #FCE94F }
+.fg12 { color: #729FCF }
+.bg12 { background-color: #729FCF }
+.fg13 { color: #AD7FA8 }
+.bg13 { background-color: #AD7FA8 }
+.fg14 { color: #34E2E2 }
+.bg14 { background-color: #34E2E2 }
+.fg15 { color: #EEEEEC }
+.bg15 { background-color: #EEEEEC }
+.fg16 { color: #000000 }
+.bg16 { background-color: #000000 }
+.fg17 { color: #00005f }
+.bg17 { background-color: #00005f }
+.fg18 { color: #000087 }
+.bg18 { background-color: #000087 }
+.fg19 { color: #0000af }
+.bg19 { background-color: #0000af }
+.fg20 { color: #0000d7 }
+.bg20 { background-color: #0000d7 }
+.fg21 { color: #0000ff }
+.bg21 { background-color: #0000ff }
+.fg22 { color: #005f00 }
+.bg22 { background-color: #005f00 }
+.fg23 { color: #005f5f }
+.bg23 { background-color: #005f5f }
+.fg24 { color: #005f87 }
+.bg24 { background-color: #005f87 }
+.fg25 { color: #005faf }
+.bg25 { background-color: #005faf }
+.fg26 { color: #005fd7 }
+.bg26 { background-color: #005fd7 }
+.fg27 { color: #005fff }
+.bg27 { background-color: #005fff }
+.fg28 { color: #008700 }
+.bg28 { background-color: #008700 }
+.fg29 { color: #00875f }
+.bg29 { background-color: #00875f }
+.fg30 { color: #008787 }
+.bg30 { background-color: #008787 }
+.fg31 { color: #0087af }
+.bg31 { background-color: #0087af }
+.fg32 { color: #0087d7 }
+.bg32 { background-color: #0087d7 }
+.fg33 { color: #0087ff }
+.bg33 { background-color: #0087ff }
+.fg34 { color: #00af00 }
+.bg34 { background-color: #00af00 }
+.fg35 { color: #00af5f }
+.bg35 { background-color: #00af5f }
+.fg36 { color: #00af87 }
+.bg36 { background-color: #00af87 }
+.fg37 { color: #00afaf }
+.bg37 { background-color: #00afaf }
+.fg38 { color: #00afd7 }
+.bg38 { background-color: #00afd7 }
+.fg39 { color: #00afff }
+.bg39 { background-color: #00afff }
+.fg40 { color: #00d700 }
+.bg40 { background-color: #00d700 }
+.fg41 { color: #00d75f }
+.bg41 { background-color: #00d75f }
+.fg42 { color: #00d787 }
+.bg42 { background-color: #00d787 }
+.fg43 { color: #00d7af }
+.bg43 { background-color: #00d7af }
+.fg44 { color: #00d7d7 }
+.bg44 { background-color: #00d7d7 }
+.fg45 { color: #00d7ff }
+.bg45 { background-color: #00d7ff }
+.fg46 { color: #00ff00 }
+.bg46 { background-color: #00ff00 }
+.fg47 { color: #00ff5f }
+.bg47 { background-color: #00ff5f }
+.fg48 { color: #00ff87 }
+.bg48 { background-color: #00ff87 }
+.fg49 { color: #00ffaf }
+.bg49 { background-color: #00ffaf }
+.fg50 { color: #00ffd7 }
+.bg50 { background-color: #00ffd7 }
+.fg51 { color: #00ffff }
+.bg51 { background-color: #00ffff }
+.fg52 { color: #5f0000 }
+.bg52 { background-color: #5f0000 }
+.fg53 { color: #5f005f }
+.bg53 { background-color: #5f005f }
+.fg54 { color: #5f0087 }
+.bg54 { background-color: #5f0087 }
+.fg55 { color: #5f00af }
+.bg55 { background-color: #5f00af }
+.fg56 { color: #5f00d7 }
+.bg56 { background-color: #5f00d7 }
+.fg57 { color: #5f00ff }
+.bg57 { background-color: #5f00ff }
+.fg58 { color: #5f5f00 }
+.bg58 { background-color: #5f5f00 }
+.fg59 { color: #5f5f5f }
+.bg59 { background-color: #5f5f5f }
+.fg60 { color: #5f5f87 }
+.bg60 { background-color: #5f5f87 }
+.fg61 { color: #5f5faf }
+.bg61 { background-color: #5f5faf }
+.fg62 { color: #5f5fd7 }
+.bg62 { background-color: #5f5fd7 }
+.fg63 { color: #5f5fff }
+.bg63 { background-color: #5f5fff }
+.fg64 { color: #5f8700 }
+.bg64 { background-color: #5f8700 }
+.fg65 { color: #5f875f }
+.bg65 { background-color: #5f875f }
+.fg66 { color: #5f8787 }
+.bg66 { background-color: #5f8787 }
+.fg67 { color: #5f87af }
+.bg67 { background-color: #5f87af }
+.fg68 { color: #5f87d7 }
+.bg68 { background-color: #5f87d7 }
+.fg69 { color: #5f87ff }
+.bg69 { background-color: #5f87ff }
+.fg70 { color: #5faf00 }
+.bg70 { background-color: #5faf00 }
+.fg71 { color: #5faf5f }
+.bg71 { background-color: #5faf5f }
+.fg72 { color: #5faf87 }
+.bg72 { background-color: #5faf87 }
+.fg73 { color: #5fafaf }
+.bg73 { background-color: #5fafaf }
+.fg74 { color: #5fafd7 }
+.bg74 { background-color: #5fafd7 }
+.fg75 { color: #5fafff }
+.bg75 { background-color: #5fafff }
+.fg76 { color: #5fd700 }
+.bg76 { background-color: #5fd700 }
+.fg77 { color: #5fd75f }
+.bg77 { background-color: #5fd75f }
+.fg78 { color: #5fd787 }
+.bg78 { background-color: #5fd787 }
+.fg79 { color: #5fd7af }
+.bg79 { background-color: #5fd7af }
+.fg80 { color: #5fd7d7 }
+.bg80 { background-color: #5fd7d7 }
+.fg81 { color: #5fd7ff }
+.bg81 { background-color: #5fd7ff }
+.fg82 { color: #5fff00 }
+.bg82 { background-color: #5fff00 }
+.fg83 { color: #5fff5f }
+.bg83 { background-color: #5fff5f }
+.fg84 { color: #5fff87 }
+.bg84 { background-color: #5fff87 }
+.fg85 { color: #5fffaf }
+.bg85 { background-color: #5fffaf }
+.fg86 { color: #5fffd7 }
+.bg86 { background-color: #5fffd7 }
+.fg87 { color: #5fffff }
+.bg87 { background-color: #5fffff }
+.fg88 { color: #870000 }
+.bg88 { background-color: #870000 }
+.fg89 { color: #87005f }
+.bg89 { background-color: #87005f }
+.fg90 { color: #870087 }
+.bg90 { background-color: #870087 }
+.fg91 { color: #8700af }
+.bg91 { background-color: #8700af }
+.fg92 { color: #8700d7 }
+.bg92 { background-color: #8700d7 }
+.fg93 { color: #8700ff }
+.bg93 { background-color: #8700ff }
+.fg94 { color: #875f00 }
+.bg94 { background-color: #875f00 }
+.fg95 { color: #875f5f }
+.bg95 { background-color: #875f5f }
+.fg96 { color: #875f87 }
+.bg96 { background-color: #875f87 }
+.fg97 { color: #875faf }
+.bg97 { background-color: #875faf }
+.fg98 { color: #875fd7 }
+.bg98 { background-color: #875fd7 }
+.fg99 { color: #875fff }
+.bg99 { background-color: #875fff }
+.fg100 { color: #878700 }
+.bg100 { background-color: #878700 }
+.fg101 { color: #87875f }
+.bg101 { background-color: #87875f }
+.fg102 { color: #878787 }
+.bg102 { background-color: #878787 }
+.fg103 { color: #8787af }
+.bg103 { background-color: #8787af }
+.fg104 { color: #8787d7 }
+.bg104 { background-color: #8787d7 }
+.fg105 { color: #8787ff }
+.bg105 { background-color: #8787ff }
+.fg106 { color: #87af00 }
+.bg106 { background-color: #87af00 }
+.fg107 { color: #87af5f }
+.bg107 { background-color: #87af5f }
+.fg108 { color: #87af87 }
+.bg108 { background-color: #87af87 }
+.fg109 { color: #87afaf }
+.bg109 { background-color: #87afaf }
+.fg110 { color: #87afd7 }
+.bg110 { background-color: #87afd7 }
+.fg111 { color: #87afff }
+.bg111 { background-color: #87afff }
+.fg112 { color: #87d700 }
+.bg112 { background-color: #87d700 }
+.fg113 { color: #87d75f }
+.bg113 { background-color: #87d75f }
+.fg114 { color: #87d787 }
+.bg114 { background-color: #87d787 }
+.fg115 { color: #87d7af }
+.bg115 { background-color: #87d7af }
+.fg116 { color: #87d7d7 }
+.bg116 { background-color: #87d7d7 }
+.fg117 { color: #87d7ff }
+.bg117 { background-color: #87d7ff }
+.fg118 { color: #87ff00 }
+.bg118 { background-color: #87ff00 }
+.fg119 { color: #87ff5f }
+.bg119 { background-color: #87ff5f }
+.fg120 { color: #87ff87 }
+.bg120 { background-color: #87ff87 }
+.fg121 { color: #87ffaf }
+.bg121 { background-color: #87ffaf }
+.fg122 { color: #87ffd7 }
+.bg122 { background-color: #87ffd7 }
+.fg123 { color: #87ffff }
+.bg123 { background-color: #87ffff }
+.fg124 { color: #af0000 }
+.bg124 { background-color: #af0000 }
+.fg125 { color: #af005f }
+.bg125 { background-color: #af005f }
+.fg126 { color: #af0087 }
+.bg126 { background-color: #af0087 }
+.fg127 { color: #af00af }
+.bg127 { background-color: #af00af }
+.fg128 { color: #af00d7 }
+.bg128 { background-color: #af00d7 }
+.fg129 { color: #af00ff }
+.bg129 { background-color: #af00ff }
+.fg130 { color: #af5f00 }
+.bg130 { background-color: #af5f00 }
+.fg131 { color: #af5f5f }
+.bg131 { background-color: #af5f5f }
+.fg132 { color: #af5f87 }
+.bg132 { background-color: #af5f87 }
+.fg133 { color: #af5faf }
+.bg133 { background-color: #af5faf }
+.fg134 { color: #af5fd7 }
+.bg134 { background-color: #af5fd7 }
+.fg135 { color: #af5fff }
+.bg135 { background-color: #af5fff }
+.fg136 { color: #af8700 }
+.bg136 { background-color: #af8700 }
+.fg137 { color: #af875f }
+.bg137 { background-color: #af875f }
+.fg138 { color: #af8787 }
+.bg138 { background-color: #af8787 }
+.fg139 { color: #af87af }
+.bg139 { background-color: #af87af }
+.fg140 { color: #af87d7 }
+.bg140 { background-color: #af87d7 }
+.fg141 { color: #af87ff }
+.bg141 { background-color: #af87ff }
+.fg142 { color: #afaf00 }
+.bg142 { background-color: #afaf00 }
+.fg143 { color: #afaf5f }
+.bg143 { background-color: #afaf5f }
+.fg144 { color: #afaf87 }
+.bg144 { background-color: #afaf87 }
+.fg145 { color: #afafaf }
+.bg145 { background-color: #afafaf }
+.fg146 { color: #afafd7 }
+.bg146 { background-color: #afafd7 }
+.fg147 { color: #afafff }
+.bg147 { background-color: #afafff }
+.fg148 { color: #afd700 }
+.bg148 { background-color: #afd700 }
+.fg149 { color: #afd75f }
+.bg149 { background-color: #afd75f }
+.fg150 { color: #afd787 }
+.bg150 { background-color: #afd787 }
+.fg151 { color: #afd7af }
+.bg151 { background-color: #afd7af }
+.fg152 { color: #afd7d7 }
+.bg152 { background-color: #afd7d7 }
+.fg153 { color: #afd7ff }
+.bg153 { background-color: #afd7ff }
+.fg154 { color: #afff00 }
+.bg154 { background-color: #afff00 }
+.fg155 { color: #afff5f }
+.bg155 { background-color: #afff5f }
+.fg156 { color: #afff87 }
+.bg156 { background-color: #afff87 }
+.fg157 { color: #afffaf }
+.bg157 { background-color: #afffaf }
+.fg158 { color: #afffd7 }
+.bg158 { background-color: #afffd7 }
+.fg159 { color: #afffff }
+.bg159 { background-color: #afffff }
+.fg160 { color: #d70000 }
+.bg160 { background-color: #d70000 }
+.fg161 { color: #d7005f }
+.bg161 { background-color: #d7005f }
+.fg162 { color: #d70087 }
+.bg162 { background-color: #d70087 }
+.fg163 { color: #d700af }
+.bg163 { background-color: #d700af }
+.fg164 { color: #d700d7 }
+.bg164 { background-color: #d700d7 }
+.fg165 { color: #d700ff }
+.bg165 { background-color: #d700ff }
+.fg166 { color: #d75f00 }
+.bg166 { background-color: #d75f00 }
+.fg167 { color: #d75f5f }
+.bg167 { background-color: #d75f5f }
+.fg168 { color: #d75f87 }
+.bg168 { background-color: #d75f87 }
+.fg169 { color: #d75faf }
+.bg169 { background-color: #d75faf }
+.fg170 { color: #d75fd7 }
+.bg170 { background-color: #d75fd7 }
+.fg171 { color: #d75fff }
+.bg171 { background-color: #d75fff }
+.fg172 { color: #d78700 }
+.bg172 { background-color: #d78700 }
+.fg173 { color: #d7875f }
+.bg173 { background-color: #d7875f }
+.fg174 { color: #d78787 }
+.bg174 { background-color: #d78787 }
+.fg175 { color: #d787af }
+.bg175 { background-color: #d787af }
+.fg176 { color: #d787d7 }
+.bg176 { background-color: #d787d7 }
+.fg177 { color: #d787ff }
+.bg177 { background-color: #d787ff }
+.fg178 { color: #d7af00 }
+.bg178 { background-color: #d7af00 }
+.fg179 { color: #d7af5f }
+.bg179 { background-color: #d7af5f }
+.fg180 { color: #d7af87 }
+.bg180 { background-color: #d7af87 }
+.fg181 { color: #d7afaf }
+.bg181 { background-color: #d7afaf }
+.fg182 { color: #d7afd7 }
+.bg182 { background-color: #d7afd7 }
+.fg183 { color: #d7afff }
+.bg183 { background-color: #d7afff }
+.fg184 { color: #d7d700 }
+.bg184 { background-color: #d7d700 }
+.fg185 { color: #d7d75f }
+.bg185 { background-color: #d7d75f }
+.fg186 { color: #d7d787 }
+.bg186 { background-color: #d7d787 }
+.fg187 { color: #d7d7af }
+.bg187 { background-color: #d7d7af }
+.fg188 { color: #d7d7d7 }
+.bg188 { background-color: #d7d7d7 }
+.fg189 { color: #d7d7ff }
+.bg189 { background-color: #d7d7ff }
+.fg190 { color: #d7ff00 }
+.bg190 { background-color: #d7ff00 }
+.fg191 { color: #d7ff5f }
+.bg191 { background-color: #d7ff5f }
+.fg192 { color: #d7ff87 }
+.bg192 { background-color: #d7ff87 }
+.fg193 { color: #d7ffaf }
+.bg193 { background-color: #d7ffaf }
+.fg194 { color: #d7ffd7 }
+.bg194 { background-color: #d7ffd7 }
+.fg195 { color: #d7ffff }
+.bg195 { background-color: #d7ffff }
+.fg196 { color: #ff0000 }
+.bg196 { background-color: #ff0000 }
+.fg197 { color: #ff005f }
+.bg197 { background-color: #ff005f }
+.fg198 { color: #ff0087 }
+.bg198 { background-color: #ff0087 }
+.fg199 { color: #ff00af }
+.bg199 { background-color: #ff00af }
+.fg200 { color: #ff00d7 }
+.bg200 { background-color: #ff00d7 }
+.fg201 { color: #ff00ff }
+.bg201 { background-color: #ff00ff }
+.fg202 { color: #ff5f00 }
+.bg202 { background-color: #ff5f00 }
+.fg203 { color: #ff5f5f }
+.bg203 { background-color: #ff5f5f }
+.fg204 { color: #ff5f87 }
+.bg204 { background-color: #ff5f87 }
+.fg205 { color: #ff5faf }
+.bg205 { background-color: #ff5faf }
+.fg206 { color: #ff5fd7 }
+.bg206 { background-color: #ff5fd7 }
+.fg207 { color: #ff5fff }
+.bg207 { background-color: #ff5fff }
+.fg208 { color: #ff8700 }
+.bg208 { background-color: #ff8700 }
+.fg209 { color: #ff875f }
+.bg209 { background-color: #ff875f }
+.fg210 { color: #ff8787 }
+.bg210 { background-color: #ff8787 }
+.fg211 { color: #ff87af }
+.bg211 { background-color: #ff87af }
+.fg212 { color: #ff87d7 }
+.bg212 { background-color: #ff87d7 }
+.fg213 { color: #ff87ff }
+.bg213 { background-color: #ff87ff }
+.fg214 { color: #ffaf00 }
+.bg214 { background-color: #ffaf00 }
+.fg215 { color: #ffaf5f }
+.bg215 { background-color: #ffaf5f }
+.fg216 { color: #ffaf87 }
+.bg216 { background-color: #ffaf87 }
+.fg217 { color: #ffafaf }
+.bg217 { background-color: #ffafaf }
+.fg218 { color: #ffafd7 }
+.bg218 { background-color: #ffafd7 }
+.fg219 { color: #ffafff }
+.bg219 { background-color: #ffafff }
+.fg220 { color: #ffd700 }
+.bg220 { background-color: #ffd700 }
+.fg221 { color: #ffd75f }
+.bg221 { background-color: #ffd75f }
+.fg222 { color: #ffd787 }
+.bg222 { background-color: #ffd787 }
+.fg223 { color: #ffd7af }
+.bg223 { background-color: #ffd7af }
+.fg224 { color: #ffd7d7 }
+.bg224 { background-color: #ffd7d7 }
+.fg225 { color: #ffd7ff }
+.bg225 { background-color: #ffd7ff }
+.fg226 { color: #ffff00 }
+.bg226 { background-color: #ffff00 }
+.fg227 { color: #ffff5f }
+.bg227 { background-color: #ffff5f }
+.fg228 { color: #ffff87 }
+.bg228 { background-color: #ffff87 }
+.fg229 { color: #ffffaf }
+.bg229 { background-color: #ffffaf }
+.fg230 { color: #ffffd7 }
+.bg230 { background-color: #ffffd7 }
+.fg231 { color: #ffffff }
+.bg231 { background-color: #ffffff }
+.fg232 { color: #080808 }
+.bg232 { background-color: #080808 }
+.fg233 { color: #121212 }
+.bg233 { background-color: #121212 }
+.fg234 { color: #1c1c1c }
+.bg234 { background-color: #1c1c1c }
+.fg235 { color: #262626 }
+.bg235 { background-color: #262626 }
+.fg236 { color: #303030 }
+.bg236 { background-color: #303030 }
+.fg237 { color: #3a3a3a }
+.bg237 { background-color: #3a3a3a }
+.fg238 { color: #444444 }
+.bg238 { background-color: #444444 }
+.fg239 { color: #4e4e4e }
+.bg239 { background-color: #4e4e4e }
+.fg240 { color: #585858 }
+.bg240 { background-color: #585858 }
+.fg241 { color: #626262 }
+.bg241 { background-color: #626262 }
+.fg242 { color: #6c6c6c }
+.bg242 { background-color: #6c6c6c }
+.fg243 { color: #767676 }
+.bg243 { background-color: #767676 }
+.fg244 { color: #808080 }
+.bg244 { background-color: #808080 }
+.fg245 { color: #8a8a8a }
+.bg245 { background-color: #8a8a8a }
+.fg246 { color: #949494 }
+.bg246 { background-color: #949494 }
+.fg247 { color: #9e9e9e }
+.bg247 { background-color: #9e9e9e }
+.fg248 { color: #a8a8a8 }
+.bg248 { background-color: #a8a8a8 }
+.fg249 { color: #b2b2b2 }
+.bg249 { background-color: #b2b2b2 }
+.fg250 { color: #bcbcbc }
+.bg250 { background-color: #bcbcbc }
+.fg251 { color: #c6c6c6 }
+.bg251 { background-color: #c6c6c6 }
+.fg252 { color: #d0d0d0 }
+.bg252 { background-color: #d0d0d0 }
+.fg253 { color: #dadada }
+.bg253 { background-color: #dadada }
+.fg254 { color: #e4e4e4 }
+.bg254 { background-color: #e4e4e4 }
+.fg255 { color: #eeeeee }
+.bg255 { background-color: #eeeeee }
diff --git a/app/assets/stylesheets/player.css.scss b/app/assets/stylesheets/player.css.scss
index 2385c55..1022f7f 100644
--- a/app/assets/stylesheets/player.css.scss
+++ b/app/assets/stylesheets/player.css.scss
@@ -38,7 +38,10 @@ $color5: #EDC951;
     padding: 2px;
     margin: 0px;
     display: block;
-    font-family: 'Droid Sans Mono', Monospace;
+    font-size: 12px;
+    // font-family: Monaco,"Courier New","DejaVu Sans Mono","Bitstream Vera Sans Mono",monospace;
+    font-family: monospace;
+    // font-family: 'Droid Sans Mono', Monospace;
     white-space: pre;
     background-color: black;
     // line-height: 1.2em;
@@ -143,537 +146,13 @@ $color5: #EDC951;
   .underline { text-decoration: underline }
   .italic { font-style: italic }
 
-  /* Foregrounds: */
-
-  /* ansi colors */
-
-    .fg0 { color: #000000 }
-    .fg1 { color: #CC0000 }
-    .fg2 { color: #4E9A06 }
-    .fg3 { color: #C4A000 }
-    .fg4 { color: #3465A4 }
-    .fg5 { color: #75507B }
-    .fg6 { color: #06989A }
-    .fg7 { color: #D3D7CF }
-    .fg8 { color: #555753; font-weight: bold }
-    .fg9 { color: #EF2929; font-weight: bold }
-  .fg10 { color: #8AE234; font-weight: bold }
-  .fg11 { color: #FCE94F; font-weight: bold }
-  .fg12 { color: #729FCF; font-weight: bold }
-  .fg13 { color: #AD7FA8; font-weight: bold }
-  .fg14 { color: #34E2E2; font-weight: bold }
-  .fg15 { color: #EEEEEC; font-weight: bold }
-
-  /* 216 rgb colors */
-
-  .fg16 { color: #000000 }
-  .fg17 { color: #00005f }
-  .fg18 { color: #000087 }
-  .fg19 { color: #0000af }
-  .fg20 { color: #0000d7 }
-  .fg21 { color: #0000ff }
-  .fg22 { color: #005f00 }
-  .fg23 { color: #005f5f }
-  .fg24 { color: #005f87 }
-  .fg25 { color: #005faf }
-  .fg26 { color: #005fd7 }
-  .fg27 { color: #005fff }
-  .fg28 { color: #008700 }
-  .fg29 { color: #00875f }
-  .fg30 { color: #008787 }
-  .fg31 { color: #0087af }
-  .fg32 { color: #0087d7 }
-  .fg33 { color: #0087ff }
-  .fg34 { color: #00af00 }
-  .fg35 { color: #00af5f }
-  .fg36 { color: #00af87 }
-  .fg37 { color: #00afaf }
-  .fg38 { color: #00afd7 }
-  .fg39 { color: #00afff }
-  .fg40 { color: #00d700 }
-  .fg41 { color: #00d75f }
-  .fg42 { color: #00d787 }
-  .fg43 { color: #00d7af }
-  .fg44 { color: #00d7d7 }
-  .fg45 { color: #00d7ff }
-  .fg46 { color: #00ff00 }
-  .fg47 { color: #00ff5f }
-  .fg48 { color: #00ff87 }
-  .fg49 { color: #00ffaf }
-  .fg50 { color: #00ffd7 }
-  .fg51 { color: #00ffff }
-  .fg52 { color: #5f0000 }
-  .fg53 { color: #5f005f }
-  .fg54 { color: #5f0087 }
-  .fg55 { color: #5f00af }
-  .fg56 { color: #5f00d7 }
-  .fg57 { color: #5f00ff }
-  .fg58 { color: #5f5f00 }
-  .fg59 { color: #5f5f5f }
-  .fg60 { color: #5f5f87 }
-  .fg61 { color: #5f5faf }
-  .fg62 { color: #5f5fd7 }
-  .fg63 { color: #5f5fff }
-  .fg64 { color: #5f8700 }
-  .fg65 { color: #5f875f }
-  .fg66 { color: #5f8787 }
-  .fg67 { color: #5f87af }
-  .fg68 { color: #5f87d7 }
-  .fg69 { color: #5f87ff }
-  .fg70 { color: #5faf00 }
-  .fg71 { color: #5faf5f }
-  .fg72 { color: #5faf87 }
-  .fg73 { color: #5fafaf }
-  .fg74 { color: #5fafd7 }
-  .fg75 { color: #5fafff }
-  .fg76 { color: #5fd700 }
-  .fg77 { color: #5fd75f }
-  .fg78 { color: #5fd787 }
-  .fg79 { color: #5fd7af }
-  .fg80 { color: #5fd7d7 }
-  .fg81 { color: #5fd7ff }
-  .fg82 { color: #5fff00 }
-  .fg83 { color: #5fff5f }
-  .fg84 { color: #5fff87 }
-  .fg85 { color: #5fffaf }
-  .fg86 { color: #5fffd7 }
-  .fg87 { color: #5fffff }
-  .fg88 { color: #870000 }
-  .fg89 { color: #87005f }
-  .fg90 { color: #870087 }
-  .fg91 { color: #8700af }
-  .fg92 { color: #8700d7 }
-  .fg93 { color: #8700ff }
-  .fg94 { color: #875f00 }
-  .fg95 { color: #875f5f }
-  .fg96 { color: #875f87 }
-  .fg97 { color: #875faf }
-  .fg98 { color: #875fd7 }
-  .fg99 { color: #875fff }
-  .fg100 { color: #878700 }
-  .fg101 { color: #87875f }
-  .fg102 { color: #878787 }
-  .fg103 { color: #8787af }
-  .fg104 { color: #8787d7 }
-  .fg105 { color: #8787ff }
-  .fg106 { color: #87af00 }
-  .fg107 { color: #87af5f }
-  .fg108 { color: #87af87 }
-  .fg109 { color: #87afaf }
-  .fg110 { color: #87afd7 }
-  .fg111 { color: #87afff }
-  .fg112 { color: #87d700 }
-  .fg113 { color: #87d75f }
-  .fg114 { color: #87d787 }
-  .fg115 { color: #87d7af }
-  .fg116 { color: #87d7d7 }
-  .fg117 { color: #87d7ff }
-  .fg118 { color: #87ff00 }
-  .fg119 { color: #87ff5f }
-  .fg120 { color: #87ff87 }
-  .fg121 { color: #87ffaf }
-  .fg122 { color: #87ffd7 }
-  .fg123 { color: #87ffff }
-  .fg124 { color: #af0000 }
-  .fg125 { color: #af005f }
-  .fg126 { color: #af0087 }
-  .fg127 { color: #af00af }
-  .fg128 { color: #af00d7 }
-  .fg129 { color: #af00ff }
-  .fg130 { color: #af5f00 }
-  .fg131 { color: #af5f5f }
-  .fg132 { color: #af5f87 }
-  .fg133 { color: #af5faf }
-  .fg134 { color: #af5fd7 }
-  .fg135 { color: #af5fff }
-  .fg136 { color: #af8700 }
-  .fg137 { color: #af875f }
-  .fg138 { color: #af8787 }
-  .fg139 { color: #af87af }
-  .fg140 { color: #af87d7 }
-  .fg141 { color: #af87ff }
-  .fg142 { color: #afaf00 }
-  .fg143 { color: #afaf5f }
-  .fg144 { color: #afaf87 }
-  .fg145 { color: #afafaf }
-  .fg146 { color: #afafd7 }
-  .fg147 { color: #afafff }
-  .fg148 { color: #afd700 }
-  .fg149 { color: #afd75f }
-  .fg150 { color: #afd787 }
-  .fg151 { color: #afd7af }
-  .fg152 { color: #afd7d7 }
-  .fg153 { color: #afd7ff }
-  .fg154 { color: #afff00 }
-  .fg155 { color: #afff5f }
-  .fg156 { color: #afff87 }
-  .fg157 { color: #afffaf }
-  .fg158 { color: #afffd7 }
-  .fg159 { color: #afffff }
-  .fg160 { color: #d70000 }
-  .fg161 { color: #d7005f }
-  .fg162 { color: #d70087 }
-  .fg163 { color: #d700af }
-  .fg164 { color: #d700d7 }
-  .fg165 { color: #d700ff }
-  .fg166 { color: #d75f00 }
-  .fg167 { color: #d75f5f }
-  .fg168 { color: #d75f87 }
-  .fg169 { color: #d75faf }
-  .fg170 { color: #d75fd7 }
-  .fg171 { color: #d75fff }
-  .fg172 { color: #d78700 }
-  .fg173 { color: #d7875f }
-  .fg174 { color: #d78787 }
-  .fg175 { color: #d787af }
-  .fg176 { color: #d787d7 }
-  .fg177 { color: #d787ff }
-  .fg178 { color: #d7af00 }
-  .fg179 { color: #d7af5f }
-  .fg180 { color: #d7af87 }
-  .fg181 { color: #d7afaf }
-  .fg182 { color: #d7afd7 }
-  .fg183 { color: #d7afff }
-  .fg184 { color: #d7d700 }
-  .fg185 { color: #d7d75f }
-  .fg186 { color: #d7d787 }
-  .fg187 { color: #d7d7af }
-  .fg188 { color: #d7d7d7 }
-  .fg189 { color: #d7d7ff }
-  .fg190 { color: #d7ff00 }
-  .fg191 { color: #d7ff5f }
-  .fg192 { color: #d7ff87 }
-  .fg193 { color: #d7ffaf }
-  .fg194 { color: #d7ffd7 }
-  .fg195 { color: #d7ffff }
-  .fg196 { color: #ff0000 }
-  .fg197 { color: #ff005f }
-  .fg198 { color: #ff0087 }
-  .fg199 { color: #ff00af }
-  .fg200 { color: #ff00d7 }
-  .fg201 { color: #ff00ff }
-  .fg202 { color: #ff5f00 }
-  .fg203 { color: #ff5f5f }
-  .fg204 { color: #ff5f87 }
-  .fg205 { color: #ff5faf }
-  .fg206 { color: #ff5fd7 }
-  .fg207 { color: #ff5fff }
-  .fg208 { color: #ff8700 }
-  .fg209 { color: #ff875f }
-  .fg210 { color: #ff8787 }
-  .fg211 { color: #ff87af }
-  .fg212 { color: #ff87d7 }
-  .fg213 { color: #ff87ff }
-  .fg214 { color: #ffaf00 }
-  .fg215 { color: #ffaf5f }
-  .fg216 { color: #ffaf87 }
-  .fg217 { color: #ffafaf }
-  .fg218 { color: #ffafd7 }
-  .fg219 { color: #ffafff }
-  .fg220 { color: #ffd700 }
-  .fg221 { color: #ffd75f }
-  .fg222 { color: #ffd787 }
-  .fg223 { color: #ffd7af }
-  .fg224 { color: #ffd7d7 }
-  .fg225 { color: #ffd7ff }
-  .fg226 { color: #ffff00 }
-  .fg227 { color: #ffff5f }
-  .fg228 { color: #ffff87 }
-  .fg229 { color: #ffffaf }
-  .fg230 { color: #ffffd7 }
-  .fg231 { color: #ffffff }
-
-  /* 24 shades of grey */
-
-  .fg232 { color: #080808 }
-  .fg233 { color: #121212 }
-  .fg234 { color: #1c1c1c }
-  .fg235 { color: #262626 }
-  .fg236 { color: #303030 }
-  .fg237 { color: #3a3a3a }
-  .fg238 { color: #444444 }
-  .fg239 { color: #4e4e4e }
-  .fg240 { color: #585858 }
-  .fg241 { color: #626262 }
-  .fg242 { color: #6c6c6c }
-  .fg243 { color: #767676 }
-  .fg244 { color: #808080 }
-  .fg245 { color: #8a8a8a }
-  .fg246 { color: #949494 }
-  .fg247 { color: #9e9e9e }
-  .fg248 { color: #a8a8a8 }
-  .fg249 { color: #b2b2b2 }
-  .fg250 { color: #bcbcbc }
-  .fg251 { color: #c6c6c6 }
-  .fg252 { color: #d0d0d0 }
-  .fg253 { color: #dadada }
-  .fg254 { color: #e4e4e4 }
-  .fg255 { color: #eeeeee }
-
-  /* Backgrounds: */
-
-  /* ansi colors */
-
-    .bg0 { background-color: #000000 }
-    .bg1 { background-color: #CC0000 }
-    .bg2 { background-color: #4E9A06 }
-    .bg3 { background-color: #C4A000 }
-    .bg4 { background-color: #3465A4 }
-    .bg5 { background-color: #75507B }
-    .bg6 { background-color: #06989A }
-    .bg7 { background-color: #D3D7CF }
-    .bg8 { background-color: #555753 }
-    .bg9 { background-color: #EF2929 }
-  .bg10 { background-color: #8AE234 }
-  .bg11 { background-color: #FCE94F }
-  .bg12 { background-color: #729FCF }
-  .bg13 { background-color: #AD7FA8 }
-  .bg14 { background-color: #34E2E2 }
-  .bg15 { background-color: #EEEEEC }
-
-  /* 216 rgb colors */
-
-  .bg16 { background-color: #000000 }
-  .bg17 { background-color: #00005f }
-  .bg18 { background-color: #000087 }
-  .bg19 { background-color: #0000af }
-  .bg20 { background-color: #0000d7 }
-  .bg21 { background-color: #0000ff }
-  .bg22 { background-color: #005f00 }
-  .bg23 { background-color: #005f5f }
-  .bg24 { background-color: #005f87 }
-  .bg25 { background-color: #005faf }
-  .bg26 { background-color: #005fd7 }
-  .bg27 { background-color: #005fff }
-  .bg28 { background-color: #008700 }
-  .bg29 { background-color: #00875f }
-  .bg30 { background-color: #008787 }
-  .bg31 { background-color: #0087af }
-  .bg32 { background-color: #0087d7 }
-  .bg33 { background-color: #0087ff }
-  .bg34 { background-color: #00af00 }
-  .bg35 { background-color: #00af5f }
-  .bg36 { background-color: #00af87 }
-  .bg37 { background-color: #00afaf }
-  .bg38 { background-color: #00afd7 }
-  .bg39 { background-color: #00afff }
-  .bg40 { background-color: #00d700 }
-  .bg41 { background-color: #00d75f }
-  .bg42 { background-color: #00d787 }
-  .bg43 { background-color: #00d7af }
-  .bg44 { background-color: #00d7d7 }
-  .bg45 { background-color: #00d7ff }
-  .bg46 { background-color: #00ff00 }
-  .bg47 { background-color: #00ff5f }
-  .bg48 { background-color: #00ff87 }
-  .bg49 { background-color: #00ffaf }
-  .bg50 { background-color: #00ffd7 }
-  .bg51 { background-color: #00ffff }
-  .bg52 { background-color: #5f0000 }
-  .bg53 { background-color: #5f005f }
-  .bg54 { background-color: #5f0087 }
-  .bg55 { background-color: #5f00af }
-  .bg56 { background-color: #5f00d7 }
-  .bg57 { background-color: #5f00ff }
-  .bg58 { background-color: #5f5f00 }
-  .bg59 { background-color: #5f5f5f }
-  .bg60 { background-color: #5f5f87 }
-  .bg61 { background-color: #5f5faf }
-  .bg62 { background-color: #5f5fd7 }
-  .bg63 { background-color: #5f5fff }
-  .bg64 { background-color: #5f8700 }
-  .bg65 { background-color: #5f875f }
-  .bg66 { background-color: #5f8787 }
-  .bg67 { background-color: #5f87af }
-  .bg68 { background-color: #5f87d7 }
-  .bg69 { background-color: #5f87ff }
-  .bg70 { background-color: #5faf00 }
-  .bg71 { background-color: #5faf5f }
-  .bg72 { background-color: #5faf87 }
-  .bg73 { background-color: #5fafaf }
-  .bg74 { background-color: #5fafd7 }
-  .bg75 { background-color: #5fafff }
-  .bg76 { background-color: #5fd700 }
-  .bg77 { background-color: #5fd75f }
-  .bg78 { background-color: #5fd787 }
-  .bg79 { background-color: #5fd7af }
-  .bg80 { background-color: #5fd7d7 }
-  .bg81 { background-color: #5fd7ff }
-  .bg82 { background-color: #5fff00 }
-  .bg83 { background-color: #5fff5f }
-  .bg84 { background-color: #5fff87 }
-  .bg85 { background-color: #5fffaf }
-  .bg86 { background-color: #5fffd7 }
-  .bg87 { background-color: #5fffff }
-  .bg88 { background-color: #870000 }
-  .bg89 { background-color: #87005f }
-  .bg90 { background-color: #870087 }
-  .bg91 { background-color: #8700af }
-  .bg92 { background-color: #8700d7 }
-  .bg93 { background-color: #8700ff }
-  .bg94 { background-color: #875f00 }
-  .bg95 { background-color: #875f5f }
-  .bg96 { background-color: #875f87 }
-  .bg97 { background-color: #875faf }
-  .bg98 { background-color: #875fd7 }
-  .bg99 { background-color: #875fff }
-  .bg100 { background-color: #878700 }
-  .bg101 { background-color: #87875f }
-  .bg102 { background-color: #878787 }
-  .bg103 { background-color: #8787af }
-  .bg104 { background-color: #8787d7 }
-  .bg105 { background-color: #8787ff }
-  .bg106 { background-color: #87af00 }
-  .bg107 { background-color: #87af5f }
-  .bg108 { background-color: #87af87 }
-  .bg109 { background-color: #87afaf }
-  .bg110 { background-color: #87afd7 }
-  .bg111 { background-color: #87afff }
-  .bg112 { background-color: #87d700 }
-  .bg113 { background-color: #87d75f }
-  .bg114 { background-color: #87d787 }
-  .bg115 { background-color: #87d7af }
-  .bg116 { background-color: #87d7d7 }
-  .bg117 { background-color: #87d7ff }
-  .bg118 { background-color: #87ff00 }
-  .bg119 { background-color: #87ff5f }
-  .bg120 { background-color: #87ff87 }
-  .bg121 { background-color: #87ffaf }
-  .bg122 { background-color: #87ffd7 }
-  .bg123 { background-color: #87ffff }
-  .bg124 { background-color: #af0000 }
-  .bg125 { background-color: #af005f }
-  .bg126 { background-color: #af0087 }
-  .bg127 { background-color: #af00af }
-  .bg128 { background-color: #af00d7 }
-  .bg129 { background-color: #af00ff }
-  .bg130 { background-color: #af5f00 }
-  .bg131 { background-color: #af5f5f }
-  .bg132 { background-color: #af5f87 }
-  .bg133 { background-color: #af5faf }
-  .bg134 { background-color: #af5fd7 }
-  .bg135 { background-color: #af5fff }
-  .bg136 { background-color: #af8700 }
-  .bg137 { background-color: #af875f }
-  .bg138 { background-color: #af8787 }
-  .bg139 { background-color: #af87af }
-  .bg140 { background-color: #af87d7 }
-  .bg141 { background-color: #af87ff }
-  .bg142 { background-color: #afaf00 }
-  .bg143 { background-color: #afaf5f }
-  .bg144 { background-color: #afaf87 }
-  .bg145 { background-color: #afafaf }
-  .bg146 { background-color: #afafd7 }
-  .bg147 { background-color: #afafff }
-  .bg148 { background-color: #afd700 }
-  .bg149 { background-color: #afd75f }
-  .bg150 { background-color: #afd787 }
-  .bg151 { background-color: #afd7af }
-  .bg152 { background-color: #afd7d7 }
-  .bg153 { background-color: #afd7ff }
-  .bg154 { background-color: #afff00 }
-  .bg155 { background-color: #afff5f }
-  .bg156 { background-color: #afff87 }
-  .bg157 { background-color: #afffaf }
-  .bg158 { background-color: #afffd7 }
-  .bg159 { background-color: #afffff }
-  .bg160 { background-color: #d70000 }
-  .bg161 { background-color: #d7005f }
-  .bg162 { background-color: #d70087 }
-  .bg163 { background-color: #d700af }
-  .bg164 { background-color: #d700d7 }
-  .bg165 { background-color: #d700ff }
-  .bg166 { background-color: #d75f00 }
-  .bg167 { background-color: #d75f5f }
-  .bg168 { background-color: #d75f87 }
-  .bg169 { background-color: #d75faf }
-  .bg170 { background-color: #d75fd7 }
-  .bg171 { background-color: #d75fff }
-  .bg172 { background-color: #d78700 }
-  .bg173 { background-color: #d7875f }
-  .bg174 { background-color: #d78787 }
-  .bg175 { background-color: #d787af }
-  .bg176 { background-color: #d787d7 }
-  .bg177 { background-color: #d787ff }
-  .bg178 { background-color: #d7af00 }
-  .bg179 { background-color: #d7af5f }
-  .bg180 { background-color: #d7af87 }
-  .bg181 { background-color: #d7afaf }
-  .bg182 { background-color: #d7afd7 }
-  .bg183 { background-color: #d7afff }
-  .bg184 { background-color: #d7d700 }
-  .bg185 { background-color: #d7d75f }
-  .bg186 { background-color: #d7d787 }
-  .bg187 { background-color: #d7d7af }
-  .bg188 { background-color: #d7d7d7 }
-  .bg189 { background-color: #d7d7ff }
-  .bg190 { background-color: #d7ff00 }
-  .bg191 { background-color: #d7ff5f }
-  .bg192 { background-color: #d7ff87 }
-  .bg193 { background-color: #d7ffaf }
-  .bg194 { background-color: #d7ffd7 }
-  .bg195 { background-color: #d7ffff }
-  .bg196 { background-color: #ff0000 }
-  .bg197 { background-color: #ff005f }
-  .bg198 { background-color: #ff0087 }
-  .bg199 { background-color: #ff00af }
-  .bg200 { background-color: #ff00d7 }
-  .bg201 { background-color: #ff00ff }
-  .bg202 { background-color: #ff5f00 }
-  .bg203 { background-color: #ff5f5f }
-  .bg204 { background-color: #ff5f87 }
-  .bg205 { background-color: #ff5faf }
-  .bg206 { background-color: #ff5fd7 }
-  .bg207 { background-color: #ff5fff }
-  .bg208 { background-color: #ff8700 }
-  .bg209 { background-color: #ff875f }
-  .bg210 { background-color: #ff8787 }
-  .bg211 { background-color: #ff87af }
-  .bg212 { background-color: #ff87d7 }
-  .bg213 { background-color: #ff87ff }
-  .bg214 { background-color: #ffaf00 }
-  .bg215 { background-color: #ffaf5f }
-  .bg216 { background-color: #ffaf87 }
-  .bg217 { background-color: #ffafaf }
-  .bg218 { background-color: #ffafd7 }
-  .bg219 { background-color: #ffafff }
-  .bg220 { background-color: #ffd700 }
-  .bg221 { background-color: #ffd75f }
-  .bg222 { background-color: #ffd787 }
-  .bg223 { background-color: #ffd7af }
-  .bg224 { background-color: #ffd7d7 }
-  .bg225 { background-color: #ffd7ff }
-  .bg226 { background-color: #ffff00 }
-  .bg227 { background-color: #ffff5f }
-  .bg228 { background-color: #ffff87 }
-  .bg229 { background-color: #ffffaf }
-  .bg230 { background-color: #ffffd7 }
-  .bg231 { background-color: #ffffff }
-
-  /* 24 shades of grey */
+  .fg8 { font-weight: bold }
+  .fg9 { font-weight: bold }
+  .fg10 { font-weight: bold }
+  .fg11 { font-weight: bold }
+  .fg12 { font-weight: bold }
+  .fg13 { font-weight: bold }
+  .fg14 { font-weight: bold }
+  .fg15 { font-weight: bold }
 
-  .bg232 { background-color: #080808 }
-  .bg233 { background-color: #121212 }
-  .bg234 { background-color: #1c1c1c }
-  .bg235 { background-color: #262626 }
-  .bg236 { background-color: #303030 }
-  .bg237 { background-color: #3a3a3a }
-  .bg238 { background-color: #444444 }
-  .bg239 { background-color: #4e4e4e }
-  .bg240 { background-color: #585858 }
-  .bg241 { background-color: #626262 }
-  .bg242 { background-color: #6c6c6c }
-  .bg243 { background-color: #767676 }
-  .bg244 { background-color: #808080 }
-  .bg245 { background-color: #8a8a8a }
-  .bg246 { background-color: #949494 }
-  .bg247 { background-color: #9e9e9e }
-  .bg248 { background-color: #a8a8a8 }
-  .bg249 { background-color: #b2b2b2 }
-  .bg250 { background-color: #bcbcbc }
-  .bg251 { background-color: #c6c6c6 }
-  .bg252 { background-color: #d0d0d0 }
-  .bg253 { background-color: #dadada }
-  .bg254 { background-color: #e4e4e4 }
-  .bg255 { background-color: #eeeeee }
 }
diff --git a/app/helpers/asciicasts_helper.rb b/app/helpers/asciicasts_helper.rb
index 3b6bf73..dab1e7f 100644
--- a/app/helpers/asciicasts_helper.rb
+++ b/app/helpers/asciicasts_helper.rb
@@ -29,6 +29,12 @@ module AsciicastsHelper
   def player_script(asciicast, options = {})
     auto_play = options.key?(:auto_play) ? !!options[:auto_play] : false
 
+    if custom_renderer = params[:renderer]
+      renderer_class = "AsciiIo.Renderer.#{custom_renderer.capitalize}"
+    else
+      renderer_class = "AsciiIo.Renderer.Pre"
+    end
+
     return <<EOS.html_safe
 <script>
   $(function() {
@@ -37,6 +43,7 @@ module AsciicastsHelper
       cols: #{asciicast.terminal_columns},
       lines: #{asciicast.terminal_lines},
       model: new AsciiIo.Asciicast({ id: #{asciicast.id} }),
+      rendererClass: #{renderer_class},
       autoPlay: #{auto_play}
     });
   });
diff --git a/config/colors/default.yml b/config/colors/default.yml
new file mode 100644
index 0000000..693dc41
--- /dev/null
+++ b/config/colors/default.yml
@@ -0,0 +1,18 @@
+# Default xterm palette
+
+0: '#000000'
+1: '#CC0000'
+2: '#4E9A06'
+3: '#C4A000'
+4: '#3465A4'
+5: '#75507B'
+6: '#06989A'
+7: '#D3D7CF'
+8: '#555753'
+9: '#EF2929'
+10: '#8AE234'
+11: '#FCE94F'
+12: '#729FCF'
+13: '#AD7FA8'
+14: '#34E2E2'
+15: '#EEEEEC'
diff --git a/config/colors/rgb.yml b/config/colors/rgb.yml
new file mode 100644
index 0000000..ec9c854
--- /dev/null
+++ b/config/colors/rgb.yml
@@ -0,0 +1,245 @@
+# 216 rgb colors
+
+16: '#000000'
+17: '#00005f'
+18: '#000087'
+19: '#0000af'
+20: '#0000d7'
+21: '#0000ff'
+22: '#005f00'
+23: '#005f5f'
+24: '#005f87'
+25: '#005faf'
+26: '#005fd7'
+27: '#005fff'
+28: '#008700'
+29: '#00875f'
+30: '#008787'
+31: '#0087af'
+32: '#0087d7'
+33: '#0087ff'
+34: '#00af00'
+35: '#00af5f'
+36: '#00af87'
+37: '#00afaf'
+38: '#00afd7'
+39: '#00afff'
+40: '#00d700'
+41: '#00d75f'
+42: '#00d787'
+43: '#00d7af'
+44: '#00d7d7'
+45: '#00d7ff'
+46: '#00ff00'
+47: '#00ff5f'
+48: '#00ff87'
+49: '#00ffaf'
+50: '#00ffd7'
+51: '#00ffff'
+52: '#5f0000'
+53: '#5f005f'
+54: '#5f0087'
+55: '#5f00af'
+56: '#5f00d7'
+57: '#5f00ff'
+58: '#5f5f00'
+59: '#5f5f5f'
+60: '#5f5f87'
+61: '#5f5faf'
+62: '#5f5fd7'
+63: '#5f5fff'
+64: '#5f8700'
+65: '#5f875f'
+66: '#5f8787'
+67: '#5f87af'
+68: '#5f87d7'
+69: '#5f87ff'
+70: '#5faf00'
+71: '#5faf5f'
+72: '#5faf87'
+73: '#5fafaf'
+74: '#5fafd7'
+75: '#5fafff'
+76: '#5fd700'
+77: '#5fd75f'
+78: '#5fd787'
+79: '#5fd7af'
+80: '#5fd7d7'
+81: '#5fd7ff'
+82: '#5fff00'
+83: '#5fff5f'
+84: '#5fff87'
+85: '#5fffaf'
+86: '#5fffd7'
+87: '#5fffff'
+88: '#870000'
+89: '#87005f'
+90: '#870087'
+91: '#8700af'
+92: '#8700d7'
+93: '#8700ff'
+94: '#875f00'
+95: '#875f5f'
+96: '#875f87'
+97: '#875faf'
+98: '#875fd7'
+99: '#875fff'
+100: '#878700'
+101: '#87875f'
+102: '#878787'
+103: '#8787af'
+104: '#8787d7'
+105: '#8787ff'
+106: '#87af00'
+107: '#87af5f'
+108: '#87af87'
+109: '#87afaf'
+110: '#87afd7'
+111: '#87afff'
+112: '#87d700'
+113: '#87d75f'
+114: '#87d787'
+115: '#87d7af'
+116: '#87d7d7'
+117: '#87d7ff'
+118: '#87ff00'
+119: '#87ff5f'
+120: '#87ff87'
+121: '#87ffaf'
+122: '#87ffd7'
+123: '#87ffff'
+124: '#af0000'
+125: '#af005f'
+126: '#af0087'
+127: '#af00af'
+128: '#af00d7'
+129: '#af00ff'
+130: '#af5f00'
+131: '#af5f5f'
+132: '#af5f87'
+133: '#af5faf'
+134: '#af5fd7'
+135: '#af5fff'
+136: '#af8700'
+137: '#af875f'
+138: '#af8787'
+139: '#af87af'
+140: '#af87d7'
+141: '#af87ff'
+142: '#afaf00'
+143: '#afaf5f'
+144: '#afaf87'
+145: '#afafaf'
+146: '#afafd7'
+147: '#afafff'
+148: '#afd700'
+149: '#afd75f'
+150: '#afd787'
+151: '#afd7af'
+152: '#afd7d7'
+153: '#afd7ff'
+154: '#afff00'
+155: '#afff5f'
+156: '#afff87'
+157: '#afffaf'
+158: '#afffd7'
+159: '#afffff'
+160: '#d70000'
+161: '#d7005f'
+162: '#d70087'
+163: '#d700af'
+164: '#d700d7'
+165: '#d700ff'
+166: '#d75f00'
+167: '#d75f5f'
+168: '#d75f87'
+169: '#d75faf'
+170: '#d75fd7'
+171: '#d75fff'
+172: '#d78700'
+173: '#d7875f'
+174: '#d78787'
+175: '#d787af'
+176: '#d787d7'
+177: '#d787ff'
+178: '#d7af00'
+179: '#d7af5f'
+180: '#d7af87'
+181: '#d7afaf'
+182: '#d7afd7'
+183: '#d7afff'
+184: '#d7d700'
+185: '#d7d75f'
+186: '#d7d787'
+187: '#d7d7af'
+188: '#d7d7d7'
+189: '#d7d7ff'
+190: '#d7ff00'
+191: '#d7ff5f'
+192: '#d7ff87'
+193: '#d7ffaf'
+194: '#d7ffd7'
+195: '#d7ffff'
+196: '#ff0000'
+197: '#ff005f'
+198: '#ff0087'
+199: '#ff00af'
+200: '#ff00d7'
+201: '#ff00ff'
+202: '#ff5f00'
+203: '#ff5f5f'
+204: '#ff5f87'
+205: '#ff5faf'
+206: '#ff5fd7'
+207: '#ff5fff'
+208: '#ff8700'
+209: '#ff875f'
+210: '#ff8787'
+211: '#ff87af'
+212: '#ff87d7'
+213: '#ff87ff'
+214: '#ffaf00'
+215: '#ffaf5f'
+216: '#ffaf87'
+217: '#ffafaf'
+218: '#ffafd7'
+219: '#ffafff'
+220: '#ffd700'
+221: '#ffd75f'
+222: '#ffd787'
+223: '#ffd7af'
+224: '#ffd7d7'
+225: '#ffd7ff'
+226: '#ffff00'
+227: '#ffff5f'
+228: '#ffff87'
+229: '#ffffaf'
+230: '#ffffd7'
+231: '#ffffff'
+
+# 24 shades of grey
+
+232: '#080808'
+233: '#121212'
+234: '#1c1c1c'
+235: '#262626'
+236: '#303030'
+237: '#3a3a3a'
+238: '#444444'
+239: '#4e4e4e'
+240: '#585858'
+241: '#626262'
+242: '#6c6c6c'
+243: '#767676'
+244: '#808080'
+245: '#8a8a8a'
+246: '#949494'
+247: '#9e9e9e'
+248: '#a8a8a8'
+249: '#b2b2b2'
+250: '#bcbcbc'
+251: '#c6c6c6'
+252: '#d0d0d0'
+253: '#dadada'
+254: '#e4e4e4'
+255: '#eeeeee'
diff --git a/lib/tasks/colors.rake b/lib/tasks/colors.rake
new file mode 100644
index 0000000..2e7cc4e
--- /dev/null
+++ b/lib/tasks/colors.rake
@@ -0,0 +1,21 @@
+desc 'Generate color palettes'
+task :gen_color_palettes do
+  require 'yaml'
+
+  default = YAML.load_file('config/colors/default.yml')
+  rgb = YAML.load_file('config/colors/rgb.yml')
+  colors = default.merge(rgb)
+
+  out = ""
+
+  colors.each do |n, value|
+    out << ".fg#{n} { color: #{value} }\n"
+    out << ".bg#{n} { background-color: #{value} }\n"
+  end
+
+  File.open('app/assets/stylesheets/colors.css', 'w') { |f| f.write out }
+
+  File.open('app/assets/javascripts/player/colors.js', 'w') do |f|
+    f.write "AsciiIo.colors = #{JSON.dump(colors)};"
+  end
+end