.ckf-panel{background-color:#222;position:fixed;bottom:0;left:0;width:100%;font-family:monaco,monospace;-webkit-font-smoothing:antialiased}.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 .ckf-waveform{height:50px}.ckf-panel.closed .ckf-waveform>wave{height:50px !important}.ckf-panel.closed .ckf-waveform>wave canvas{height:30px !important}.ckf-panel.closed region{display:none}.ckf-panel.closed .ckf-toolbox{display:none}.ckf-panel region.wavesurfer-region{background-color:rgba(0,0,0,0) !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:rgba(0,0,0,0) rgba(0,0,0,0) rgba(0,0,0,0) #fff}.ckf-panel region.wavesurfer-region.active{border-left:2px solid violet}.ckf-panel region.wavesurfer-region.active:after{border-color:rgba(0,0,0,0) rgba(0,0,0,0) rgba(0,0,0,0) violet}.ckf-panel .ckf-toolbox{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:#f66}.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:flex;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:flex;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;transform-origin:0 0;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;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:flex;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:flex;align-items: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:rgba(0,0,0,0)}