*
{
  margin:0;
  padding:0;
  border:0;
  font-size:100%;
  font:inherit;
  vertical-align:baseline;
  box-sizing:border-box
}

article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary
{
  display:block
}

body
{
  line-height:1
}

ol,ul
{
  list-style:none
}

blockquote,q
{
  quotes:none
}

blockquote:after,blockquote:before,q:after,q:before
{
  content:'';
  content:none
}

table
{
  border-collapse:collapse;
  border-spacing:0
}

body
{
  color:#fff;
  font:12px/1.2 Monaco,monospace;
  -webkit-font-smoothing:antialiased
}

h1
{
  font-size:14px
}

.controls-button
{
  position:relative;
  display:block;
  width:50px;
  height:30px;
  cursor:pointer
}

.controls-button:before
{
  position:absolute;
  top:10px;
  left:20px;
  width:8px;
  height:8px;
  box-sizing:content-box;
  border:1px solid #fff;
  border-radius:2px;
  background:rgba(255,255,255,.15);
  -webkit-transition-property:border-color,background;
  transition-property:border-color,background;
  -webkit-transition-duration:.2s;
  transition-duration:.2s;
  content:""
}

.controls-button>.label
{
  position:absolute;
  top:50%;
  left:100%;
  color:#fff;
  white-space:nowrap;
  opacity:0;
  visibility:hidden;
  -webkit-transform:translateY(-50%);
  -ms-transform:translateY(-50%);
  transform:translateY(-50%);
  -webkit-transition:all 150ms;
  transition:all 150ms
}

.controls-button>.label:before
{
  position:absolute;
  top:50%;
  right:100%;
  width:8px;
  border-top:1px solid #fff;
  margin-right:6px;
  content:""
}

.controls-button:hover>.label
{
  visibility:visible;
  opacity:1
}

.controls-button.active:before
{
  background:#E30060;
  border-color:#E30060
}

.controls-button:hover:before
{
  border-color:#E30060
}

.controls-button.active:hover:before
{
  border-color:#fff
}

.controls-button.hidden
{
  display:none
}

.controls-button
{
  opacity: 0;
}

.controls-menu
{
  position:relative;
  overflow:hidden;
  height:0;
  -webkit-transition:height .2s;
  transition:height .2s;
  -webkit-transition-delay:.2s;
  transition-delay:.2s
}

.controls-menu>.inner
{
  opacity:0;
  visibility:hidden;
  -webkit-transform:translateX(-8px);
  -ms-transform:translateX(-8px);
  transform:translateX(-8px);
  -webkit-transition:all .2s;
  transition:all .2s;
  -webkit-transition-delay:0s;
  transition-delay:0s
}

.controls-menu:after
{
  position:absolute;
  top:0;
  left:0;
  height:100%;
  border-left:1px solid #fff;
  content:""
}

.controls-menu.active
{
  opacity:1;
  visibility:visible;
  -webkit-transition-delay:0s;
  transition-delay:0s
}

.controls-menu.active>.inner
{
  opacity:1;
  visibility:visible;
  -webkit-transform:translateX(0);
  -ms-transform:translateX(0);
  transform:translateX(0);
  -webkit-transition-delay:.2s;
  transition-delay:.2s
}

.controls-menu.visible
{
  overflow:visible
}

.controls-menu.hidden
{
  display:none
}

.color
{
  position:relative;
  display:block;
  width:50px;
  height:30px;
  cursor:pointer
}

.color>.preview
{
  position:absolute;
  top:10px;
  left:20px;
  width:8px;
  height:8px;
  box-sizing:content-box;
  border:1px solid #fff;
  border-radius:2px;
  background:rgba(255,255,255,.15);
  -webkit-transition-property:border-color,background;
  transition-property:border-color,background;
  -webkit-transition-duration:.2s;
  transition-duration:.2s;
  content:""
}

.color>.label
{
  position:absolute;
  top:50%;
  left:100%;
  color:#fff;
  white-space:nowrap;
  opacity:0;
  visibility:hidden;
  -webkit-transform:translateY(-50%);
  -ms-transform:translateY(-50%);
  transform:translateY(-50%);
  -webkit-transition:all 150ms;
  transition:all 150ms
}

.color>.label:before
{
  position:absolute;
  top:50%;
  right:100%;
  width:8px;
  border-top:1px solid #fff;
  margin-right:6px;
  content:""
}

.color>input
{
  position:absolute;
  top:0;
  left:0;
  display:block;
  width:100%;
  height:100%;
  padding:0;
  margin:0;
  border:none;
  opacity:0;
  cursor:pointer
}

.color.focus>.label,.color:hover>.label
{
  visibility:visible;
  opacity:1
}

.graph
{
  position:relative;
  margin:10px 0
}

.graph>.label
{
  position:absolute;
  bottom:0;
  right:0;
  padding:2px 4px 0;
  color:#fff;
  background:rgba(17,17,17,.5)
}

.graph>canvas
{
  position:relative;
  display:block
}

body
{
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  width:100%;
  height:100%;
  background:#100A17
}

.modal
{
  position:absolute;
  z-index:2;
  top:50%;
  left:50%;
  width:300px;
  padding:20px;
  margin-left:-150px;
  margin-top:-110px;
  border-radius:4px;
  background:rgba(16,10,23,.9);
  opacity:0;
  visibility:hidden;
  -webkit-transform:scale(.95);
  -ms-transform:scale(.95);
  transform:scale(.95);
  -webkit-transition:all .2s ease-in;
  transition:all .2s ease-in
}

.modal.active,.modal.active+.modal-cover
{
  -webkit-transform:scale(1);
  -ms-transform:scale(1);
  transform:scale(1);
  opacity:0;
  visibility:visible
}

.modal-cover
{
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  z-index:1;
  background:rgba(16,10,23,.5);
  opacity:0;
  visibility:hidden;
  -webkit-transition:all .2s ease-in;
  transition:all .2s ease-in
}

#container
{
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  width:100%;
  height:100%;
  overflow:hidden
}

#container>canvas
{
  opacity:0;
  -webkit-transition:opacity .5s .2s;
  transition:opacity .5s .2s
}

#container>canvas.active
{
  opacity:1
}

#container-controls
{
  position:absolute;
  z-index:2;
  left:0;
  bottom:10px;
  opacity:0;
  -webkit-transition:opacity .5s .3s;
  transition:opacity .5s .3s
}

#container-controls.active
{
  opacity:1
}

#container-graphs
{
  position:absolute;
  right:0;
  bottom:30px
}

#container-stats
{
  position:absolute;
  z-index:1;
  right:20px;
  bottom:20px
}

.info-modal h1
{
  margin:4px 0 8px
}

.info-modal h1:after
{

  display:block;
  content:"-------"
}

.info-modal dl
{
  display:block;
  margin:4px 0
}

.info-modal dt
{
  color:#e9e9e9;
  display:inline-block;
  opacity:.5
}

.info-modal dt:after
{
  display:inline-block;
  padding:0 4px;
  color:#e30060;
  content:"/"
}

.info-modal dd
{
  display:inline-block;
  color:#fff
}

.info-modal a
{
  position:relative;
  display:inline-block;
  color:#fff;
  text-decoration:none
}

.info-modal a:after
{
  position:absolute;
  bottom:-1px;
  left:0;
  right:0;
  border-bottom:1px solid #fff;
  opacity:.25;
  content:""
}

.info-modal a:hover:after
{
  opacity:1
}

#info
{
  opacity: 0;
}

.info-section
{
  margin:12px 0 0
}

.stats-panel
{
  color:#fff;
  opacity:0;
  visibility:hidden;
  -webkit-transition:all .2s;
  transition:all .2s
}

.stats-panel dl
{
  display:inline-block
}

.stats-panel dl:not(:last-child):after
{
  display:inline-block;
  padding:0 4px;
  color:#e30060;
  content:"/"
}

.stats-panel dt
{
  display:inline-block
}

.stats-panel dt:after
{
  display:inline-block;
  padding:0 0 0 2px;
  content:":"
}

.stats-panel dd
{
  display:inline-block
}

.show-info .stats-panel
{
  opacity:1;
  visibility:visible
}