html,
body {
    font-family: Consolas, monaco, monospace;
    -webkit-font-smoothing: antialiased;
    background: #fff6e5;
    overflow: hidden;
    height: 100%;
    margin: 0
}
#container {
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
}
#stats {
    position: absolute;
    z-index: 10001;
    left: 10px;
    top: 10px
}
.canvas,
.sequencer {
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0
}
.ui {
    -webkit-transform: translate(0, -50%);
    -moz-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    -o-transform: translate(0, -50%);
    transform: translate(0, -50%);
    text-transform: uppercase;
    position: absolute;
    height: auto;
    width: 260px;
    right: 40px;
    top: 50%
}
.menu-toggle {
  display: none;
}
@media (max-width: 1024px) {
  .ui {
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
    position: absolute;
    transform: none;
    display: none;
    right: 12px;
    top: 64px;
  }
  .menu-toggle {
    -webkit-font-smoothing: antialiased;
    font-family: Consolas, monaco, monospace;
    font-family: Rockwell, "Courier Bold", Courier, Georgia, Times, "Times New Roman", serif;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px;
    background: #ff1b79;
    text-transform: uppercase;
    letter-spacing: 0.2px;
    margin: 10px 0 18px 0;
    position: absolute;
    right: 12px;
    top: 1px;
    font-weight: 100;
    font-size: 22px;
    display: block;
    outline: none;
    cursor: pointer;
    border: none;
    height: 50px;
    width: auto;
    color: #fff;
  }
  .ui.open {
    display: block;
  }
}
.ui .group {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
    background: rgba(40, 50, 78, 0.9);
    padding: 20px 28px;
    margin: 4px 0;
    width: 100%
}
.ui label {
    margin-bottom: 10px;
    line-height: 1;
    font-size: 16px;
    display: block;
    opacity: 0.9;
    color: #fff
}
.ui .slider {
    -webkit-appearance: none;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 4px 0 rgba(40, 50, 78, 0.2);
    -moz-box-shadow: inset 0 4px 0 rgba(40, 50, 78, 0.2);
    box-shadow: inset 0 4px 0 rgba(40, 50, 78, 0.2);
    background: #f5f5f9;
    margin-bottom: 15px;
    height: 46px;
    width: 100%
}
.ui .slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px;
    -webkit-transition: background 0.3s ease-out;
    -moz-transition: background 0.3s ease-out;
    -o-transition: background 0.3s ease-out;
    transition: background 0.3s ease-out;
    -webkit-transform: translate(0, -2px);
    -moz-transform: translate(0, -2px);
    -ms-transform: translate(0, -2px);
    -o-transform: translate(0, -2px);
    transform: translate(0, -2px);
    -webkit-box-shadow: 0 1px 0 #c39e07, 0 2px 0 #c39e07, 0 3px 0 #c39e07, 0 4px 0 #c39e07;
    -moz-box-shadow: 0 1px 0 #c39e07, 0 2px 0 #c39e07, 0 3px 0 #c39e07, 0 4px 0 #c39e07;
    box-shadow: 0 1px 0 #c39e07, 0 2px 0 #c39e07, 0 3px 0 #c39e07, 0 4px 0 #c39e07;
    background: #f7cd1f;
    cursor: pointer;
    cursor: -webkit-grab;
    cursor: -moz-grab;
    height: 50px;
    width: 40px
}
.ui .slider::-webkit-slider-thumb:hover {
    background: #f8d238
}
.ui .slider::-webkit-slider-thumb:active {
    background: #f1c925;
    cursor: pointer;
    cursor: -webkit-grabbing;
    cursor: -moz-grabbing
}
.ui .slider::-moz-range-thumb {
    -webkit-appearance: none;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px;
    -webkit-transition: background 0.3s ease-out;
    -moz-transition: background 0.3s ease-out;
    -o-transition: background 0.3s ease-out;
    transition: background 0.3s ease-out;
    -webkit-transform: translate(0, -2px);
    -moz-transform: translate(0, -2px);
    -ms-transform: translate(0, -2px);
    -o-transform: translate(0, -2px);
    transform: translate(0, -2px);
    -webkit-box-shadow: 0 1px 0 #c39e07, 0 2px 0 #c39e07, 0 3px 0 #c39e07, 0 4px 0 #c39e07;
    -moz-box-shadow: 0 1px 0 #c39e07, 0 2px 0 #c39e07, 0 3px 0 #c39e07, 0 4px 0 #c39e07;
    box-shadow: 0 1px 0 #c39e07, 0 2px 0 #c39e07, 0 3px 0 #c39e07, 0 4px 0 #c39e07;
    background: #f7cd1f;
    cursor: pointer;
    cursor: -webkit-grab;
    cursor: -moz-grab;
    height: 50px;
    width: 40px
}
.ui .slider::-moz-range-thumb:hover {
    background: #f8d238
}
.ui .slider::-moz-range-thumb:active {
    background: #f1c925;
    cursor: pointer;
    cursor: -webkit-grabbing;
    cursor: -moz-grabbing
}
.ui .slider:focus {
    outline: none;
    border: none
}
.ui button {
    -webkit-font-smoothing: antialiased;
    font-family: Consolas, monaco, monospace;
    font-family: Rockwell, "Courier Bold", Courier, Georgia, Times, "Times New Roman", serif;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px;
    background: #ff1b79;
    text-transform: uppercase;
    letter-spacing: 0.2px;
    margin: 10px 0 18px 0;
    font-weight: 100;
    font-size: 22px;
    display: block;
    outline: none;
    cursor: pointer;
    border: none;
    height: 50px;
    width: 100%;
    color: #fff
}
.ui button.toggle {
    background: #91c854;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    -webkit-box-shadow: 0 1px 0 #72a33c, 0 2px 0 #72a33c, 0 3px 0 #72a33c, 0 4px 0 #72a33c;
    -moz-box-shadow: 0 1px 0 #72a33c, 0 2px 0 #72a33c, 0 3px 0 #72a33c, 0 4px 0 #72a33c;
    box-shadow: 0 1px 0 #72a33c, 0 2px 0 #72a33c, 0 3px 0 #72a33c, 0 4px 0 #72a33c
}
.ui button.toggle:hover {
    background: #9dce67
}
.ui button.toggle:active {
    background: #85c241
}
.ui button.toggle.playing {
    background: #9365b8;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    -webkit-box-shadow: 0 1px 0 #744c94, 0 2px 0 #744c94, 0 3px 0 #744c94, 0 4px 0 #744c94;
    -moz-box-shadow: 0 1px 0 #744c94, 0 2px 0 #744c94, 0 3px 0 #744c94, 0 4px 0 #744c94;
    box-shadow: 0 1px 0 #744c94, 0 2px 0 #744c94, 0 3px 0 #744c94, 0 4px 0 #744c94
}
.ui button.toggle.playing:hover {
    background: #9f76c0
}
.ui button.toggle.playing:active {
    background: #8754b0
}
.ui button.clear {
    background: #ff641a;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    -webkit-box-shadow: 0 1px 0 #d64905, 0 2px 0 #d64905, 0 3px 0 #d64905, 0 4px 0 #d64905;
    -moz-box-shadow: 0 1px 0 #d64905, 0 2px 0 #d64905, 0 3px 0 #d64905, 0 4px 0 #d64905;
    box-shadow: 0 1px 0 #d64905, 0 2px 0 #d64905, 0 3px 0 #d64905, 0 4px 0 #d64905
}
.ui button.clear:hover {
    background: #ff7534
}
.ui button.clear:active {
    background: #ff5300
}
.ui button.save {
    background: #0acdc7;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    -webkit-box-shadow: 0 1px 0 #0b8f8b, 0 2px 0 #0b8f8b, 0 3px 0 #0b8f8b, 0 4px 0 #0b8f8b;
    -moz-box-shadow: 0 1px 0 #0b8f8b, 0 2px 0 #0b8f8b, 0 3px 0 #0b8f8b, 0 4px 0 #0b8f8b;
    box-shadow: 0 1px 0 #0b8f8b, 0 2px 0 #0b8f8b, 0 3px 0 #0b8f8b, 0 4px 0 #0b8f8b
}
.ui button.save:hover {
    background: #0be5df
}
.ui button.save:active {
    background: #09b5af
}
.C6 .shape {
    stroke: none;
    fill: #1fb4da
}
.C6 .curve,
.C6 .point {
    stroke: #2ba1bf
}
.A5 .shape {
    stroke: none;
    fill: #6ec8c7
}
.A5 .curve,
.A5 .point {
    stroke: #70b7b6
}
.G5 .shape {
    stroke: none;
    fill: #93c054
}
.G5 .curve,
.G5 .point {
    stroke: #89ad58
}
.E5 .shape {
    stroke: none;
    fill: #f67d42
}
.E5 .curve,
.E5 .point {
    stroke: #e97740
}
.D5 .shape {
    stroke: none;
    fill: #ffbe00
}
.D5 .curve,
.D5 .point {
    stroke: #e1ac0e
}
.C5 .shape {
    stroke: none;
    fill: #043d5d
}
.C5 .curve,
.C5 .point {
    stroke: #083249
}
.A4 .shape {
    stroke: none;
    fill: #449bb5
}
.A4 .curve,
.A4 .point {
    stroke: #4e8a9c
}
.G4 .shape {
    stroke: none;
    fill: #68c39f
}
.G4 .curve,
.G4 .point {
    stroke: #6bb195
}
.E4 .shape {
    stroke: none;
    fill: #eb5055
}
.E4 .curve,
.E4 .point {
    stroke: #dd4f53
}
.D4 .shape {
    stroke: none;
    fill: #f5e653
}
.D4 .curve,
.D4 .point {
    stroke: #e8da50
}
.C4 .shape {
    stroke: none;
    fill: #32ac97
}
.C4 .curve,
.C4 .point {
    stroke: #3b9484
}
.A3 .shape {
    stroke: none;
    fill: #7eb348
}
.A3 .curve,
.A3 .point {
    stroke: #769a52
}
.draggable {
    pointer-events: auto;
    cursor: pointer;
    cursor: -webkit-grab;
    cursor: -moz-grab
}
.draggable.dragging {
    pointer-events: none
}
.dragging {
    cursor: pointer;
    cursor: -webkit-grabbing;
    cursor: -moz-grabbing
}
.droppable {
    pointer-events: auto
}
.ball .shading {
    opacity: 0.15
}
.chain {
    pointer-events: none;
    stroke-linejoin: round;
    stroke-linecap: round
}
.chain.draggable,
.chain.droppable {
    pointer-events: auto
}
.chain .curve {
    stroke-width: 10;
    fill: none
}
.chain .point {
    display: none;
    stroke-width: 4;
    fill: #fff
}
.chain .point.end {
    display: block;
    stroke-width: 8
}
.chain.large {
    fill: #fff
}
.chain.large.octave-3 {
    stroke: #f7cd1f
}
.chain.large.octave-4 {
    stroke: #00a1ff
}
.chain.large.octave-5 {
    stroke: #d6145f
}
.chain.small .curve {
    stroke-width: 8
}
.chain.small .point {
    stroke-width: 6
}
.sequencer .bar {
    -webkit-transition: opacity 0.5s ease-out;
    -moz-transition: opacity 0.5s ease-out;
    -o-transition: opacity 0.5s ease-out;
    transition: opacity 0.5s ease-out;
    background: #fff;
    position: absolute;
    opacity: 0;
    height: 100%;
    top: 0
}
.sequencer .bar.active {
    -webkit-transition: opacity 0.1s ease-out;
    -moz-transition: opacity 0.1s ease-out;
    -o-transition: opacity 0.1s ease-out;
    transition: opacity 0.1s ease-out;
    opacity: 0.8
}