.ckf-panel{background-color:#222;position:fixed;bottom:0;left:0;width:100%;font-family:monaco, monospace;-webkit-font-smoothing:antialiased;z-index:2}.ckf-panel .ckf-label{position:absolute;bottom:100%;left:0;font-size:10px;background-color:inherit;color:#fff;padding:0 5px 0 2px}.ckf-panel .ckf-waveform{height:150px;position:relative}.ckf-panel .ckf-waveform:focus,.ckf-panel .ckf-waveform:active{outline:none;background-color:#282828}.ckf-panel .ckf-waveform>wave{height:150px !important}.ckf-panel .ckf-waveform>wave canvas{height:100px !important}.ckf-panel.closed[hide-wave-when-closed=false] .ckf-waveform{height:50px}.ckf-panel.closed[hide-wave-when-closed=false] .ckf-waveform>wave{height:50px !important}.ckf-panel.closed[hide-wave-when-closed=false] .ckf-waveform>wave canvas{height:30px !important}.ckf-panel.closed[hide-wave-when-closed=true] .ckf-waveform{display:none}.ckf-panel.closed region{display:none}.ckf-panel.closed .ckf-toolbox{display:none}.ckf-panel region.wavesurfer-region{background-color:transparent !important;border-left:2px solid #fff;cursor:pointer}.ckf-panel region.wavesurfer-region:after{content:'';display:block;position:absolute;bottom:0;left:0;cursor:pointer;width:0;height:0;border-style:solid;border-width:30px 0 0 30px;border-color:transparent transparent transparent #fff}.ckf-panel region.wavesurfer-region.active{border-left:2px solid violet}.ckf-panel region.wavesurfer-region.active:after{border-color:transparent transparent transparent violet}.ckf-panel .ckf-toolbox{display:-webkit-box;display:-ms-flexbox;display:flex}.ckf-panel .code-editor{width:100%;position:relative}.ckf-panel .code-editor.exported #code{padding-top:30px}.ckf-panel .code-editor.exported:before{content:'Copy this code into the "keyframes" parameter in your initialization script:';position:absolute;top:0;left:0;width:calc(100% - 20px);font-size:11px;padding:3px 10px;background-color:#fff;color:#000}.ckf-panel textarea#code{height:150px;width:100%;resize:none;background-color:#222;padding:10px;font-family:monospace;color:#fff}.ckf-panel textarea#code:focus,.ckf-panel textarea#code:active{outline:none;background-color:#333}.ckf-panel textarea#code.error{color:#ff6666}.ckf-panel .state-editor{max-width:350px;border:1px solid #666;border-left:none;font-size:10px}.ckf-panel .state-editor>div{padding:2.5px 10px 2.5px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;height:16px}.ckf-panel .state-editor>div.state-header{text-transform:uppercase;font-size:9px;background-color:#333;color:#888;height:15px;padding:0 10px}.ckf-panel .state-editor>div.state-header>*{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.ckf-panel .state-editor>div .smooth{min-width:18px;position:relative}.ckf-panel .state-editor>div .smooth:before{content:'';display:block;position:absolute;top:3px;right:2px;height:9px;border:1px dashed #888;-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-transform:rotate(45deg);transform:rotate(45deg)}.ckf-panel .state-editor>div.state-item{border-bottom:1px solid #333;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.ckf-panel .state-editor>div.state-item:hover{background-color:#333}.ckf-panel .state-editor>div>:first-child{width:100%;max-width:200px;min-width:130px;margin-right:auto;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.ckf-panel .state-editor>div>:nth-child(2){width:100%;max-width:100px;min-width:50px;margin:0 3px 0 0}.ckf-panel .state-editor>div>:nth-child(3){width:100%;max-width:16px}.ckf-panel .state-editor input[type=number]{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;padding:0 5px;background-color:#666;color:#fff;font-family:inherit}.ckf-panel .state-editor input[type=number]:focus{outline:none;background-color:#777}.ckf-panel .state-editor input[type=checkbox]{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid #666;margin:0;padding:0;cursor:pointer;position:relative}.ckf-panel .state-editor input[type=checkbox]:focus{outline:none;border-color:#777}.ckf-panel .state-editor input[type=checkbox]:checked:before{content:'x';color:#fff;display:block;width:100%;height:80%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.ckf-panel .controls{border-top:1px solid #666}.ckf-panel .controls a{color:#fff;text-decoration:none;background-color:#222;display:block;text-align:center;padding:10px;text-transform:uppercase;border-bottom:1px solid #666;font-size:10px;width:140px}.ckf-panel .controls a:hover{background-color:#2a2a2a}.ckf-panel ::-webkit-scrollbar{width:10px;height:10px}.ckf-panel ::-webkit-scrollbar-button{width:0px;height:0px}.ckf-panel ::-webkit-scrollbar-thumb{background:#666;border:0;border-radius:0px}.ckf-panel ::-webkit-scrollbar-thumb:hover{background:#999}.ckf-panel ::-webkit-scrollbar-thumb:active{background:#ccc}.ckf-panel ::-webkit-scrollbar-track{background:#333;border:0;border-radius:0px}.ckf-panel ::-webkit-scrollbar-track:hover{background:#333}.ckf-panel ::-webkit-scrollbar-track:active{background:#333}.ckf-panel ::-webkit-scrollbar-corner{background:transparent}.ckf-panel .ckf-audio-toggle{position:absolute;bottom:calc(100% + 10px);right:10px;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;width:20px;height:20px;border-radius:50%;background-color:rgba(255,255,255,0.7);background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.0%22%20viewBox%3D%220%200%2075%2075%22%3E%3Cpath%20d%3D%22M39%2014L22%2029H6v19h16l17%2015V14z%22%20stroke%3D%22%23111%22%20stroke-width%3D%225%22%20stroke-linejoin%3D%22round%22%20fill%3D%22%23111%22%2F%3E%3Cpath%20d%3D%22M48%2028a20%2020%200%20010%2021m7-28a30%2030%200%20010%2035m7-42a39%2039%200%20010%2049%22%20fill%3D%22none%22%20stroke%3D%22%23111%22%20stroke-width%3D%225%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E");background-size:12px;background-repeat:no-repeat;background-position:50%;cursor:pointer;-webkit-transition:.2s all;transition:.2s all}.ckf-panel .ckf-audio-toggle.muted{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.0%22%20viewBox%3D%220%200%2075%2075%22%3E%3Cg%20stroke%3D%22%23111%22%20stroke-width%3D%225%22%3E%3Cpath%20stroke-linejoin%3D%22round%22%20fill%3D%22%23111%22%20d%3D%22M39%2014L22%2029H6v19h16l17%2015V14z%22%2F%3E%3Cpath%20d%3D%22M49%2050l20-24M69%2050L49%2026%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")}.ckf-panel .ckf-audio-toggle:hover{background-color:#fff;-webkit-transition:0s all;transition:0s all}.ckf-loading{position:fixed;width:100%;height:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;text-align:center;z-index:1;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;font-family:monaco, monospace;font-size:12px;background-image:radial-gradient(circle at 1px 1px, #111 5px, rgba(0,0,0,0.7) 0);background-size:6px 6px;opacity:1;-webkit-transition:1s opacity;transition:1s opacity}.ckf-loading.hidden{opacity:0;pointer-events:none;-webkit-transition:0s opacity;transition:0s opacity}.ckf-loading.loaded .ckf-loading-bar,.ckf-loading.loaded .ckf-loading-progress-text{display:none}.ckf-loading.loaded .ckf-play-button{display:block}.ckf-loading-progress-text,.ckf-loading-text{margin-bottom:30px}.ckf-loading-bar{width:80vw;max-width:100%;height:10px;border:1px solid #fff;position:relative}.ckf-loading-bar-inner{background-color:#fff;position:absolute;height:100%;top:0;left:0}.ckf-play-button{display:none;border:1px solid;padding:20px 40px;min-width:100px;text-transform:uppercase;cursor:pointer}.ckf-play-button:hover{outline:5px solid #fff}