:root{--secondary-color-light:#f1ebfe;--secondary-color-dark:#494775;--error-color-light:#fceff0;--error-color-dark:#ca434d;--white:#fff;--placeholder-color:#e9edf2;--board-color-light:#eef0f3;--border-color-dark:#514d7d;--surface-color-dark:#2a2941;--success-color:#32d9ab;--gradient-code-header:#1a1a33;--gradient-code-contour:#343250;--gradient-code-key:#a981ff;--gradient-code-line:#7c78a9;--section-width:591px;--gradient-code-line-height:25px;--shadow:-2px 2px 8px #6f788129;--theme-transition-time:.5s;--theme-transition-timing-function:ease-out;--hover-transition-time:.3s;--smallBreakPoint:750px;--primary-color:#7134f2;--primary-hover:#864ffa;--primary-active:#622bd4;--primary-disabled:#d3beff;--primary-disabled-content:#a984f9;--secondary-color:var(--secondary-color-light);--secondary-hover:#f7f3ff;--secondary-active:#eae0ff;--secondary-disabled:var(--secondary-color-light);--secondary-disabled-content:#c7adff;--error-color:var(--error-color-light);--error-content:#e45d68;--error-hover:#fef7f7;--error-active:#ffe0e3;--error-disabled:var(--error-color-light);--error-disabled-content:#f3acb2;--text-color:#2b223e;--title-color:#9134d7;--background-color:#f8f8f8;--surface-color:var(--white);--selected-color:#dce0e7;--border-color:var(--board-color-light);--theme-mode-switcher-color:#ffd600;--angle-boundary-color:#d4bfff}html[data-theme=dark]{--primary-color:#cfb9ff;--primary-hover:#dfcfff;--primary-active:#bc9cff;--primary-disabled:#665884;--primary-disabled-content:#51446c;--secondary-color:var(--secondary-color-dark);--secondary-hover:#6562a2;--secondary-active:#3e3c68;--secondary-disabled:var(--secondary-color-dark);--secondary-disabled-content:#6e6ca0;--error-color:var(--error-color-dark);--error-content:#ffd4d8;--error-hover:#da737b;--error-active:#b1353f;--error-disabled:var(--error-color-dark);--error-disabled-content:#e7656e;--text-color:var(--white);--title-color:var(--white);--background-color:#25243e;--surface-color:var(--surface-color-dark);--selected-color:#635e9b;--border-color:var(--border-color-dark);--theme-mode-switcher-color:var(--white);--angle-boundary-color:var(--border-color-dark)}@media (max-width:450px){:root{--break-point-extraSmall:450px}}@media (max-width:1050px){:root{--break-point-medium:1050px}}@media (max-width:1350px){:root{--break-point-large:1350px}}.gradient-generator__main{flex-direction:column;row-gap:24px;width:100%;margin:0 auto;display:flex}@media (max-width:600px){.gradient-generator__main{justify-content:center;gap:24px;display:grid}}@media (min-width:1024px){.gradient-generator__main{grid-template-columns:auto auto}}.gradient-generator__subheader{color:var(--text-color);font-size:20px;line-height:25px;transition:all .7s ease-in-out}.gradient-generator-settings{flex-direction:column;row-gap:24px;display:flex}.gradient-generator-settings__top{min-height:311px}.gradient-active-color{transition:background-color .7s ease-in-out}.gradient-active-color .gradient-generator__subheader{margin-bottom:16px}@media (max-width:600px){.gradient-active-color{width:var(--section-width)}.gradient-active-color__content{grid-column-gap:24px;grid-template-rows:1fr;grid-template-columns:auto 1fr auto}}.gradient-active-color__preview{cursor:pointer;border:2px solid var(--border-color);border-radius:16px;grid-column:1/2;align-items:flex-end;width:92px;height:92px;transition:border-color .7s ease-in-out;display:flex}@media (max-width:600px){.gradient-active-color__preview{grid-column:unset}}.gradient-active-color__picker-wrapper{z-index:2;position:absolute;top:100px;left:0}.gradient-active-color__settings{flex-direction:column;grid-area:2/1/auto/3;row-gap:16px;min-width:100%;display:flex}@media (max-width:600px){.gradient-active-color__settings{grid-column:unset;grid-row:unset}}.gradient-active-color__inputs-container{-moz-column-gap:10px;justify-content:space-between;column-gap:10px;display:flex}.gradient-active-color__input{border:2px solid var(--border-color);border-radius:20px;outline:none;width:140px;padding:8px}.gradient-active-color__input:last-child{width:90px}.gradient-active-color__slider-container{border:2px solid var(--border-color);border-radius:20px;justify-content:center;align-items:center;height:28px;transition:border-color .7s ease-in-out;display:flex}.gradient-active-color__slider{cursor:pointer;appearance:none;border-radius:20px;outline:none;width:100%;height:24px;margin:0}.gradient-active-color__slider::-webkit-slider-thumb{cursor:pointer;appearance:none;background-color:var(--slider-thumb-color,black);border:3px solid var(--surface-color);width:24px;height:24px;box-shadow:var(--shadow);border-radius:50%;transition:border-color .7s ease-in-out}.gradient-active-color__slider::-webkit-slider-thumb:hover{box-shadow:var(--shadow),0 0 0 2px var(--border-color);transition:all .15s}.gradient-active-color__slider::-moz-range-thumb{cursor:pointer;appearance:none;background-color:var(--slider-thumb-color,black);border:2px solid var(--surface-color);width:20px;height:20px;box-shadow:var(--shadow);border-radius:50%;transition:border-color .7s ease-in-out}.gradient-active-color__slider::-moz-range-thumb:hover{box-shadow:var(--shadow),0 0 0 2px var(--border-color);transition:all .15s}.gradient-active-color__delete-btn{background-color:var(--danger-color);width:88px;height:52px;color:var(--text-color);cursor:pointer;border-radius:26px;grid-area:1/2/auto/3;justify-self:end;padding:0}@media (max-width:600px){.gradient-active-color__delete-btn{grid-column:unset;grid-row:unset}}.gradient-active-color__delete-btn:hover .gradient-active-color__delete-icon .trash-lid{animation:.7s ease-in-out trash-lid-jump}.gradient-active-color__delete-icon{width:52px;height:88px}.gradient-active-color__delete-icon path{transform-origin:50%;transform:scale(.4)}@keyframes trash-lid-jump{25%{transform:rotate(-25deg)translateY(-15px)}50%{transform:rotate(15deg)translateY(-7px)}65%{transform:rotate(0)translateY(0)}85%{transform:rotate(-8deg)translateY(-2px)}to{transform:rotate(0)translateY(0)}}.gradient-code{background-color:var(--gradient-code-contour);border:2px solid var(--border-color-dark);border-radius:30px;grid-template-rows:minmax(216px,1fr) auto;min-height:361px;display:grid;overflow:hidden}.gradient-code__top{background-color:var(--gradient-code-header);border-bottom:2px solid var(--border-color-dark);grid-template-rows:auto 1fr;grid-template-columns:42px auto;display:grid}.gradient-code__bottom{flex-direction:column;justify-content:center;align-items:center;gap:16px;padding:16px;display:flex}@media (max-width:600px){.gradient-code__bottom{flex-direction:row}}.gradient-code__reset-btn{background-color:var(--button-background);width:200px;height:40px;color:var(--button-text);cursor:pointer;border:none;border-radius:20px}@media (max-width:600px){.gradient-code__reset-btn{width:110px}}.gradient-code__copy-btn{background-color:var(--button-background);width:200px;height:40px;color:var(--button-text);cursor:pointer;border:none;border-radius:20px}.gradient-code-lines{background-color:var(--gradient-code-contour);grid-area:1/1/span 2/span 1;width:42px;padding:89px 0 24px}.gradient-code-line{font-size:16px;line-height:var(--gradient-code-line-height);font-family:var(--font-code-regular);text-align:center;color:var(--gradient-code-line)}.gradient-code-label{width:101px;height:57px;color:var(--white);font-size:20px;font-family:var(--font-main-bold);line-height:var(--gradient-code-line-height);background-color:var(--surface-color-dark);border-top-right-radius:20px;grid-area:1/2/span 1/span 1;justify-content:center;align-items:center;display:flex}.gradient-code-preview{font-size:16px;font-family:var(--font-code-semi-bold);line-height:var(--gradient-code-line-height);color:var(--white);background-color:var(--surface-color-dark);grid-area:2/2/span 1/span 1;padding:32px}.gradient-code-preview__key{color:var(--gradient-code-key)}.gradient-preview{border-radius:30px;min-height:220px;transition:all .7s ease-in-out;display:grid}.gradient-preview-pallet{cursor:pointer;background-color:var(--surface-color);border:2px solid #0000;border-radius:50%;justify-content:center;align-items:center;width:48px;height:48px;transition:all .7s ease-in-out;display:flex;position:relative}.gradient-preview-pallet.active{border:2px solid var(--selected-color)}.gradient-preview-pallet:hover{transition:all .15s}.gradient-preview-pallet:hover .gradient-preview-pallet__delete-btn{opacity:1}.gradient-preview-pallet__inner{border:1px solid var(--border-color);border-radius:50%;width:40px;height:40px;transition:border-color .7s ease-in-out}.gradient-preview-pallet__delete-btn{visibility:hidden;background-color:var(--surface-color);border:1px solid #0000;border:1px solid var(--border-color);opacity:0;border-radius:50%;justify-content:center;align-items:center;width:18px;height:18px;transition:all .7s ease-in-out;display:flex;position:absolute;top:-4px;right:-4px}.gradient-preview-pallet__delete-btn.canDelete{visibility:visible}.gradient-preview-pallet__delete-btn:hover{border-color:var(--border-color);transition:all .15s}.gradient-preview-pallet__delete-icon{fill:var(--primary-color)}.gradient-type-and-angle{grid-row-gap:20px;background-color:var(--surface-color);border:2px solid var(--border-color);border-radius:30px;grid-template-rows:1fr;min-height:161px;padding:32px;transition:all .7s ease-in-out;display:grid}.gradient-angle-linear__content{-moz-column-gap:26px;justify-content:center;align-items:center;column-gap:26px;width:178px;display:flex}.gradient-angle-linear__circle{cursor:pointer;touch-action:none;border-radius:50%;justify-content:center;align-items:center;width:62px;height:62px;display:flex;position:relative}.gradient-angle-linear__icon{fill:var(--angle-boundary-color);transition:all .7s ease-in-out;transform:scale(.625)}.gradient-angle-linear__dot{border-radius:50%;width:16px;height:16px;transition:all .7s ease-in-out;position:absolute;top:6px;left:50%;transform:translate(-50%)}.gradient-angle-linear__input{border:2px solid var(--border-color);border-radius:20px;outline:none;width:90px;padding:8px}.gradient-angle-linear__input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.gradient-angle-linear__input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.gradient-angle-radial__square-wrapper{cursor:pointer;touch-action:none;border-radius:12px;transform:scale(1.6)}.gradient-angle-radial__square{border-radius:12px;position:relative}.gradient-angle-radial__dot{cursor:pointer;border-radius:50%;width:16px;height:16px;position:absolute;transform:translate(-50%,-50%)}.gradient-range-settings{border-top-left-radius:30px;border-top-right-radius:30px;width:100%;transition:all .7s ease-in-out}@media (max-width:600px){.gradient-range-settings{width:var(--section-width)}}.gradient-range-settings__slider-container{transform-origin:0;border-radius:40px;height:40px;transition:all .7s ease-in-out;position:relative}.gradient-range-settings__swap-btn{background-color:var(--button-background);width:52px;height:52px;color:var(--button-text);cursor:pointer;border:none;border-radius:50%;padding:0}.gradient-range-settings__swap-btn:hover .swap-top-arrow{animation:.7s ease-in-out forwards top-arrow-move}.gradient-range-settings__swap-btn:hover .swap-bottom-arrow{animation:.7s ease-in-out forwards bottom-arrow-move}.gradient-range-settings__swap-btn:hover .swap-arrow-line{animation:.7s ease-in-out forwards arrow-length}.gradient-range-settings__swap-icon{width:50px;height:50px;transform:scale(.6)}.gradient-range-settings__swap-icon .swap-arrow-line{stroke-dasharray:500;stroke-dashoffset:1000px}@keyframes arrow-length{25%{stroke-dasharray:525}50%{stroke-dasharray:550}75%{stroke-dasharray:525}to{stroke-dasharray:500}}@keyframes top-arrow-move{25%{transform:translate(100px)}50%{transform:translate(-100px)}75%{transform:translate(100px)}to{transform:translate(0)}}@keyframes bottom-arrow-move{25%{transform:translate(-100px)}50%{transform:translate(100px)}75%{transform:translate(-100px)}to{transform:translate(0)}}.multi-thumb-slider{cursor:copy;width:100%;height:100%;position:absolute;left:0}.multi-thumb-slider.limit{pointer-events:none}.multi-thumb-slider__input{-webkit-appearance:none;-moz-appearance:none;pointer-events:none;background-color:#0000;border:none;outline:none;width:100%;height:8px;margin:0;padding:0;position:absolute;top:50%;left:0;transform:translateY(-50%)}.multi-thumb-slider__input.active::-webkit-slider-thumb{border:3px solid var(--surface-color);box-shadow:-2px 2px 8px #6f7881f5,0 0 0 10px #fff}.multi-thumb-slider__input.active::-moz-range-thumb{box-shadow:-2px 2px 8px #6f788129,0 0 0 2px var(--border-color)}.multi-thumb-slider__input.active::-webkit-slider-thumb:hover{transition:all .3s;box-shadow:-2px 2px 8px #6f7881f5,0 0 0 5px #fff}.multi-thumb-slider__input::-webkit-slider-thumb{cursor:pointer;-webkit-user-select:none;user-select:none;appearance:none;pointer-events:all;background-color:var(--gradient-thumb-color,white);border:2px solid #fff;border-radius:50%;outline:none;width:28px;height:28px;transition:border-color .5s ease-out,box-shadow .5s ease-out;box-shadow:0 2px 4px #0003}.multi-thumb-slider__input::-webkit-slider-thumb:hover{transition:all .3s;box-shadow:-2px 2px 8px #6f7881f5,0 0 0 5px #fff}.multi-thumb-slider__input::-moz-range-thumb{cursor:pointer;-webkit-user-select:none;user-select:none;appearance:none;pointer-events:all;background-color:var(--gradient-thumb-color,white);border:none;border:2px solid var(--surface-color);border-radius:50%;outline:none;width:20px;height:20px;transition:border-color .5s ease-out,box-shadow .5s ease-out;box-shadow:-2px 2px 8px #6f788129}.multi-thumb-slider__input::-moz-range-thumb:hover{transition:all .3s;box-shadow:-2px 2px 8px #6f7881f5,0 0 0 5px #fff}.multi-thumb-slider__input.subdued::-webkit-slider-thumb{border:1px solid var(--surface-color)}.react-colorful{row-gap:1.5rem;display:flex;width:100%!important;height:100%!important;min-height:200px!important}.react-colorful__saturation{border-radius:30px!important}.react-colorful__hue{border-radius:30px!important;height:40px!important}.react-colorful__last-control{border-radius:30px!important}