.main-content{max-width:700px;margin:0 auto}.main-content .page-title{text-align:center}.main-content .controls-container{border-radius:10px;width:440px;margin:15px auto;padding:44px 64px;display:flex;flex-direction:column;align-items:center;background:#fff;box-shadow:rgba(0,0,0,.01) 0 1px 0,rgba(0,0,0,.025) 0 0 8px,rgba(0,0,0,.075) 0 20px 30px}.main-content .controls-container .top-tools{display:flex;justify-content:space-between;align-items:center;width:100%;margin-bottom:8px}#pickers-list li{margin:0 9px}#pickers-list li .pickr{margin:0 1px}.main-content .controls-container .shape{border-radius:5px;border:none;padding:4px;width:32px;height:32px;color:#626a7e;cursor:pointer;margin:2px}.main-content .controls-container .shape.active{background-color:#626a7e}.main-content .controls-container .shape.active svg path{stroke:#ffffff}.main-content .controls-container .shape.active#peak-btn svg path{fill:#ffffff;stroke:#ffffff}.main-content .controls-container .direction-controls{padding:0 10px}.main-content .controls-container .opacity{border:none;border-radius:5px;background:#efefef;padding:10px}.size-controls .input-number{width:40px;padding:0 12px;vertical-align:top;text-align:center;outline:0;font-size:16px;line-height:1.5;color:#61697d}.size-controls .input-number,.size-controls .input-number-decrement,.size-controls .input-number-increment{border:2px solid rgba(175,179,197,.5);border-left:0;border-right:0;height:32px;user-select:none;display:inline-flex;align-items:center;justify-content:center}.size-controls .input-number-decrement,.size-controls .input-number-increment{width:32px;height:32px;padding:4px;border:2px solid #61697d;line-height:38px;background:#f1f1f1;color:#444;text-align:center;font-weight:700;cursor:pointer}.size-controls .input-number-decrement:active,.size-controls .input-number-increment:active{background:#ddd}.size-controls .input-number-decrement{border-radius:4px 0 0 4px}.size-controls .input-number-increment{border-radius:0 4px 4px 0}.main-content .controls-container .complexity{cursor:pointer}.main-content .controls-container button:focus{outline:0}.main-content .controls-container button svg{width:24px;height:24px}.main-content .controls-container .shuffle:hover{transform:scale(1.1);box-shadow:0 4px 12px 0 rgba(0,0,0,.3);transition:.2s ease-out;cursor:pointer}.main-content .controls-container .shuffle{width:34px;height:34px;margin-right:15px;border-radius:50%}.sw-export{display:flex;justify-content:space-between;align-items:center}.sw-export a{display:flex;justify-content:center;align-items:center;cursor:pointer;border-radius:4px;box-shadow:0 4px 12px 0 rgba(0,0,0,.1);border:1px solid #fffeff;background-color:#fff;font-size:12px;font-weight:600;font-stretch:normal;font-style:normal;line-height:1.33;letter-spacing:normal;text-align:center;padding:10px 15px;transition:.3s;text-decoration:none;color:#61697d}.sw-export a:hover{box-shadow:0 4px 12px 0 rgba(0,0,0,.3)}.sw-export img{margin-right:8px}.sw-export .copy-active{display:none}.wave-container{width:100%;position:relative}.wave-container .copy-btn{position:absolute;left:0;right:0;margin-left:auto;margin-right:auto;cursor:pointer;border:none;color:#18a718}.range-slider{width:100%;margin:10px 0;display:flex;justify-content:space-between;align-items:center}.range-slider img{width:32px}.range-slider__range{-webkit-appearance:none;width:calc(100% - (73px));height:4px;border-radius:5px;background:#d7dcdf;outline:0;padding:0;margin:0}.range-slider__range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:#61697d;cursor:pointer;-webkit-transition:background .15s ease-in-out;transition:background .15s ease-in-out}.range-slider__range::-webkit-slider-thumb:hover{background:#393f4a;box-shadow:0 4px 12px 0 rgba(0,0,0,.3)}.range-slider__range:active::-webkit-slider-thumb{background:#8f8c85}.range-slider__range::-moz-range-thumb{width:16px;height:16px;border:0;border-radius:50%;background:#1c2b41;cursor:pointer;-moz-transition:background .15s ease-in-out;transition:background .15s ease-in-out}.range-slider__value{display:inline-block;position:relative;width:60px;color:#fff;line-height:20px;text-align:center;border-radius:3px;background:#2c3e50;padding:5px 10px;margin-left:8px}.range-slider__value:after{position:absolute;top:8px;left:-7px;width:0;height:0;border-top:7px solid transparent;border-right:7px solid #1c2b41;border-bottom:7px solid transparent;content:""}@media (max-width:768px){#wave-container{height:270px}.main-content .controls-container{width:380px;padding:40px}}@media (max-width:425px){#wave-container{height:130px}.main-content .controls-container{width:320px;padding:20px}.page-title{font-size:24px;margin-bottom:10px;margin-top:16px}#pickers-list li{margin:0 3px}}