@import url(https://fonts.googleapis.com/css2?family=Cascadia+Code:ital,wght@0,200..700;1,200..700&display=swap);.preview-wrapper{position:relative;width:100%;height:400px;background:#fafafa;margin-bottom:2rem;display:flex;align-items:center;justify-content:center}.preview-bg{position:absolute;top:0;left:0;right:0;bottom:0;margin:auto;z-index:0;background:url(https://random-image-pepebigotes.vercel.app/api/random-image) center/cover;opacity:.25;pointer-events:none;transition:width .3s,height .3s;display:block}.hidden-bg{display:none!important}.preview{position:absolute;top:0;left:0;right:0;bottom:0;margin:auto;z-index:2;pointer-events:none;transition:width .3s,height .3s;display:block}.preview-content{width:100%;height:100%;position:relative}.preview-path-shape{width:100%;height:100%;background:inherit;clip-path:polygon(50% 0%,0% 100%,100% 100%);z-index:2;position:absolute;top:0;left:0;pointer-events:auto;background:url(https://picsum.photos/800/400) center/cover}.path-guide{position:absolute;border:2px dashed #111;pointer-events:none;z-index:3;left:0;top:0;width:100%;height:100%;box-sizing:border-box;opacity:.6}.hidden{display:none!important}.handle{position:absolute;width:16px;height:16px;border-radius:50%;cursor:pointer;user-select:none;z-index:10;border:1.5px solid #bfc6d7!important;background:#f4f6fa!important;transition:background .2s;box-shadow:0 2px 6px #1111;display:block;pointer-events:auto}.handle:hover{background:#111!important;border-color:#111!important}.preview-controls-second{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:1.5rem;align-items:center}.preview-controls-first{display:grid;grid-template-columns:42px 1fr 150px 150px;gap:10px;margin-bottom:1.5rem;align-items:center}.preview-controls-checkbox input[type=checkbox]{display:none}.preview-controls-checkbox label{font-size:14px;cursor:pointer;margin:0}.preview-controls-checkbox input[type=checkbox]+label:before{content:'';font-size:14px;line-height:18px;font-family:FontAwesome;display:inline-block;width:20px;height:20px;margin-right:10px;border:1.5px solid #bfc6d7!important;background:#f4f6fa!important;color:#111!important;border-radius:5px!important;vertical-align:text-bottom;cursor:pointer;transition:background .3s}.preview-controls-checkbox input[type=checkbox]:checked+label:before{content:"\f00c";text-align:center;background:#111!important;border-color:#111!important;color:#fff!important}.preview-controls input[type=range]{width:100px;margin-left:6px;vertical-align:middle}.preview-controls input[type=text]{width:100%}.preview-controls input[type=checkbox]{transform:scale(1.2);margin-right:5px;vertical-align:middle}.preview-controls button{padding:.4em 1.2em;font-size:1rem;border-radius:5px;border:1px solid #bfc6d7;background:#ebf0fa;cursor:pointer;transition:background .2s}.preview-controls button:hover{background:#d0e1fa}.custom-dropdown{position:relative;user-select:none;font-size:16px}.cd-selected{display:flex;gap:8px;background:#f4f6fa!important;color:#111!important;border:1.5px solid #bfc6d7!important;border-radius:8px;padding:10px 15px;font-size:1rem;cursor:pointer;width:100%;height:42px;align-items:center;justify-content:center;outline:none;letter-spacing:.2px;user-select:none;box-sizing:border-box;transition:background .16s,color .16s,border-color .16s}.cd-selected.active,.cd-selected:hover{background:#111111!important;color:#ffffff!important;border-color:#111111!important}.cd-shape{width:20px;height:20px;background:#111;margin-right:8px;flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:background .2s}.cd-selected.active .cd-shape,.cd-selected:hover .cd-shape{background:#fff}.cd-label{flex:1;display:flex;align-items:center;gap:8px}.cd-dropdown-arrow{width:22px;height:22px;margin-left:8px;display:flex;align-items:center;justify-content:center;font-size:23px;transition:transform .22s}.cd-options{position:absolute;z-index:99;width:100%;top:100%;left:0;background:#fff;border-radius:14px;box-shadow:0 6px 24px 0 rgba(0,0,0,.13);margin-top:5px;max-height:250px;overflow-y:auto;opacity:0;pointer-events:none;transform:translateY(-16px) scale(.97);transition:all .28s cubic-bezier(.34,1.56,.64,1);overflow-x:hidden}.cd-options.open{opacity:1;pointer-events:all;transform:translateY(0) scale(1)}.cd-options-list{list-style:none;margin:0;padding:0}.cd-option{padding:10px 20px 10px 14px;display:flex;align-items:center;gap:12px;cursor:pointer;transition:background .2s;font-weight:500;color:#666;position:relative}.cd-option .cd-shape{margin-right:0;background:#666;width:16px;height:16px}.cd-option.active,.cd-option:hover{background:#bfc6d7;color:#111}.cd-option:hover .cd-shape,.cd-option.active .cd-shape{background:#111}.cd-options-list::-webkit-scrollbar{width:6px;background-color:#f4f6fa;border-radius:8px}.cd-options-list::-webkit-scrollbar-thumb{background:#e0e7ef;border-radius:8px}.slider-angle-wrap{display:flex;align-items:center;width:100%;max-width:400px;margin-right:auto}.slider-angle-wrap:after{content:'%';font-family:'Fira Mono',monospace;font-size:1em;color:#23272f}.slider-angle{flex:1 1 80px;-webkit-appearance:none;width:100%;height:16px;border-radius:8px;background:linear-gradient(to right,#bfc6d7 50%,#f4f6fa 50%);outline:none;margin:0;padding:0;transition:background .3s;display:flex;align-items:center;border:none}.slider-angle::-webkit-slider-runnable-track{height:16px;border-radius:8px;background:0 0}.slider-angle::-moz-range-track{height:16px;border-radius:8px;background:0 0}.slider-angle::-ms-fill-lower{background:0 0;height:16px;border-radius:8px}.slider-angle::-ms-fill-upper{background:0 0;height:16px;border-radius:8px}.slider-angle::-webkit-slider-thumb{-webkit-appearance:none;width:32px;height:32px;border-radius:50%;background-color:#f4f6fa;border:1.5px solid #bfc6d7;position:relative;box-shadow:0 2px 6px rgba(0,0,0,.08);cursor:pointer;background-size:16px 16px;background-repeat:no-repeat;background-position:center center;z-index:2;margin-top:-8px;transition:background .3s}.slider-angle:active::-webkit-slider-thumb,.slider-angle:hover::-webkit-slider-thumb{outline:none;background-color:#111;border:1.5px solid #111;background-size:16px 16px;background-repeat:no-repeat;background-position:center center}.slider-angle::-moz-range-thumb{width:32px;height:32px;border-radius:50%;background-color:#f4f6fa;border:1.5px solid #bfc6d7;box-shadow:0 2px 6px rgba(0,0,0,.08);cursor:pointer;background-size:16px 16px;background-repeat:no-repeat;background-position:center center;z-index:2;transition:background .3s}.slider-angle:active::-moz-range-thumb,.slider-angle:hover::-moz-range-thumb{outline:none;background-color:#111;border:1.5px solid #111;background-size:16px 16px;background-repeat:no-repeat;background-position:center center}.slider-angle::-ms-thumb{width:32px;height:32px;border-radius:50%;background-color:#f4f6fa;border:1.5px solid #bfc6d7;box-shadow:0 2px 6px rgba(0,0,0,.08);cursor:pointer;background-size:16px 16px;background-repeat:no-repeat;background-position:center center;z-index:2;transition:background .3s}.slider-angle:active::-ms-thumb,.slider-angle:hover::-ms-thumb{outline:none;background-color:#111;border:1.5px solid #111;background-size:16px 16px;background-repeat:no-repeat;background-position:center center}#rangeWidth.slider-angle::-webkit-slider-thumb{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'><path fill='black' d='M224 96C135.6 96 64 167.6 64 256s71.6 160 160 160c77.4 0 142-55 156.8-128L256 288c-17.7 0-32-14.3-32-32s14.3-32 32-32h144c25.8 0 49.6 21.4 47.2 50.6C437.8 389.6 341.4 480 224 480C100.3 480 0 379.7 0 256S100.3 32 224 32c57.4 0 109.7 21.6 149.3 57c13.2 11.8 14.3 32 2.5 45.2s-32 14.3-45.2 2.5C302.3 111.4 265 96 224 96z'/></svg>")}#rangeWidth.slider-angle:active::-webkit-slider-thumb,#rangeWidth.slider-angle:hover::-webkit-slider-thumb{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 512 512'><path d='M409.4 214.6l80 80c6.2 6.2 6.2 16.4 0 22.6l-80 80c-10 10-27.3 2.9-27.3-11.3V336h-256v49.9c0 14.2-17.3 21.3-27.3 11.3l-80-80c-6.2-6.2-6.2-16.4 0-22.6l80-80c10-10 27.3-2.9 27.3 11.3V288h256v-49.9c0-14.2 17.3-21.3 27.3-11.3z'/></svg>");background-position:center 5px}#rangeWidth.slider-angle::-moz-range-thumb{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'><path fill='black' d='M224 96C135.6 96 64 167.6 64 256s71.6 160 160 160c77.4 0 142-55 156.8-128L256 288c-17.7 0-32-14.3-32-32s14.3-32 32-32h144c25.8 0 49.6 21.4 47.2 50.6C437.8 389.6 341.4 480 224 480C100.3 480 0 379.7 0 256S100.3 32 224 32c57.4 0 109.7 21.6 149.3 57c13.2 11.8 14.3 32 2.5 45.2s-32 14.3-45.2 2.5C302.3 111.4 265 96 224 96z'/></svg>")}#rangeWidth.slider-angle:active::-moz-range-thumb,#rangeWidth.slider-angle:hover::-moz-range-thumb{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 512 512'><path d='M409.4 214.6l80 80c6.2 6.2 6.2 16.4 0 22.6l-80 80c-10 10-27.3 2.9-27.3-11.3V336h-256v49.9c0 14.2-17.3 21.3-27.3 11.3l-80-80c-6.2-6.2-6.2-16.4 0-22.6l80-80c10-10 27.3-2.9 27.3 11.3V288h256v-49.9c0-14.2 17.3-21.3 27.3-11.3z'/></svg>");background-position:center 5px}#rangeWidth.slider-angle::-ms-thumb{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'><path fill='black' d='M224 96C135.6 96 64 167.6 64 256s71.6 160 160 160c77.4 0 142-55 156.8-128L256 288c-17.7 0-32-14.3-32-32s14.3-32 32-32h144c25.8 0 49.6 21.4 47.2 50.6C437.8 389.6 341.4 480 224 480C100.3 480 0 379.7 0 256S100.3 32 224 32c57.4 0 109.7 21.6 149.3 57c13.2 11.8 14.3 32 2.5 45.2s-32 14.3-45.2 2.5C302.3 111.4 265 96 224 96z'/></svg>")}#rangeWidth.slider-angle:active::-ms-thumb,#rangeWidth.slider-angle:hover::-ms-thumb{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 512 512'><path d='M409.4 214.6l80 80c6.2 6.2 6.2 16.4 0 22.6l-80 80c-10 10-27.3 2.9-27.3-11.3V336h-256v49.9c0 14.2-17.3 21.3-27.3 11.3l-80-80c-6.2-6.2-6.2-16.4 0-22.6l80-80c10-10 27.3-2.9 27.3 11.3V288h256v-49.9c0-14.2 17.3-21.3 27.3-11.3z'/></svg>");background-position:center 5px}#rangeHeight.slider-angle::-webkit-slider-thumb{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'><path fill='black' d='M58 45.4C47.8 31 27.8 27.7 13.4 38S-4.3 68.2 6 82.6L160 298.3V448c0 17.7 14.3 32 32 32s32-14.3 32-32V298.3L378 82.6c10.3-14.4 6.9-34.4-7.4-44.6S336.2 31 326 45.4L192 232.9 58 45.4z'/></svg>")}#rangeHeight.slider-angle:active::-webkit-slider-thumb,#rangeHeight.slider-angle:hover::-webkit-slider-thumb{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 512 512'><path d='M409.4 214.6l80 80c6.2 6.2 6.2 16.4 0 22.6l-80 80c-10 10-27.3 2.9-27.3-11.3V336h-256v49.9c0 14.2-17.3 21.3-27.3 11.3l-80-80c-6.2-6.2-6.2-16.4 0-22.6l80-80c10-10 27.3-2.9 27.3 11.3V288h256v-49.9c0-14.2 17.3-21.3 27.3-11.3z'/></svg>");background-position:center 5px}#rangeHeight.slider-angle::-moz-range-thumb{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'><path fill='black' d='M58 45.4C47.8 31 27.8 27.7 13.4 38S-4.3 68.2 6 82.6L160 298.3V448c0 17.7 14.3 32 32 32s32-14.3 32-32V298.3L378 82.6c10.3-14.4 6.9-34.4-7.4-44.6S336.2 31 326 45.4L192 232.9 58 45.4z'/></svg>")}#rangeHeight.slider-angle:active::-moz-range-thumb,#rangeHeight.slider-angle:hover::-moz-range-thumb{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 512 512'><path d='M409.4 214.6l80 80c6.2 6.2 6.2 16.4 0 22.6l-80 80c-10 10-27.3 2.9-27.3-11.3V336h-256v49.9c0 14.2-17.3 21.3-27.3 11.3l-80-80c-6.2-6.2-6.2-16.4 0-22.6l80-80c10-10 27.3-2.9 27.3 11.3V288h256v-49.9c0-14.2 17.3-21.3 27.3-11.3z'/></svg>");background-position:center 5px}#rangeHeight.slider-angle::-ms-thumb{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'><path fill='black' d='M58 45.4C47.8 31 27.8 27.7 13.4 38S-4.3 68.2 6 82.6L160 298.3V448c0 17.7 14.3 32 32 32s32-14.3 32-32V298.3L378 82.6c10.3-14.4 6.9-34.4-7.4-44.6S336.2 31 326 45.4L192 232.9 58 45.4z'/></svg>")}#rangeHeight.slider-angle:active::-ms-thumb,#rangeHeight.slider-angle:hover::-ms-thumb{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 512 512'><path d='M409.4 214.6l80 80c6.2 6.2 6.2 16.4 0 22.6l-80 80c-10 10-27.3 2.9-27.3-11.3V336h-256v49.9c0 14.2-17.3 21.3-27.3 11.3l-80-80c-6.2-6.2-6.2-16.4 0-22.6l80-80c10-10 27.3-2.9 27.3 11.3V288h256v-49.9c0-14.2 17.3-21.3 27.3-11.3z'/></svg>");background-position:center 5px}.slider-angle:focus{outline:none}.slider-angle::-moz-focus-outer{border:0}.slider-angle::-ms-tooltip{display:none}.slider-angle-value{width:30px;font-family:'Fira Mono',monospace;font-size:1em;color:#23272f;text-align:right;margin-left:6px;user-select:auto;background:0 0;border:none;outline:none;border-radius:6px;font-weight:600;padding:0;transition:border .13s;font-size:1rem}.slider-angle-value:focus{border:none;background:0 0}.slider-angle:disabled{opacity:.5;pointer-events:none}.random-btn,.copy-btn,.clear-btn{border:1.5px solid #bfc6d7!important;background:#f4f6fa!important;color:#111!important;border-radius:8px!important;font-weight:700!important;padding:10px 0!important;font-size:1rem!important;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;min-width:0;box-sizing:border-box;height:42px;transition:background .16s,color .16s,border-color .16s}.random-btn{width:42px}.clear-btn,.copy-btn{width:50%;gap:8px}.random-btn:hover,.copy-btn:hover,.clear-btn:hover{background:#111!important;color:#fff!important;border:1.5px solid #111!important}.random-btn:focus,.copy-btn:focus,.clear-btn:focus{outline:none;box-shadow:none}.copy-btn.copied{background:#4fd486!important;color:#fff!important;border:1.5px solid #4fd486!important}.img-url-wrap{position:relative;display:flex;align-items:center;width:75%}.img-url-loading{position:absolute;right:10px;top:50%;transform:translateY(-50%);font-size:1.4em;color:#aaa;z-index:22;pointer-events:none;background:#fff;border-radius:50%;padding:2px 4px;display:flex;align-items:center;justify-content:center}.img-url{height:42px;padding:7px 40px;width:100%;border-radius:8px;border:1.5px solid #e3e4ea;font-size:1rem;background:#fff;color:#8887a5;outline:none;box-sizing:border-box;display:flex;align-items:center;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%238887a5' viewBox='0 0 640 512'%3E%3Cpath d='M580.3 267.2c56.2-56.2 56.2-147.3 0-203.5C526.8 10.2 440.9 7.3 383.9 57.2l-6.1 5.4c-10 8.7-11 23.9-2.3 33.9s23.9 11 33.9 2.3l6.1-5.4c38-33.2 95.2-31.3 130.9 4.4c37.4 37.4 37.4 98.1 0 135.6L433.1 346.6c-37.4 37.4-98.2 37.4-135.6 0c-35.7-35.7-37.6-92.9-4.4-130.9l4.7-5.4c8.7-10 7.7-25.1-2.3-33.9s-25.1-7.7-33.9 2.3l-4.7 5.4c-49.8 57-46.9 142.9 6.6 196.4c56.2 56.2 147.3 56.2 203.5 0L580.3 267.2zM59.7 244.8C3.5 301 3.5 392.1 59.7 448.2c53.6 53.6 139.5 56.4 196.5 6.5l6.1-5.4c10-8.7 11-23.9 2.3-33.9s-23.9-11-33.9-2.3l-6.1 5.4c-38 33.2-95.2 31.3-130.9-4.4c-37.4-37.4-37.4-98.1 0-135.6L207 165.4c37.4-37.4 98.1-37.4 135.6 0c35.7 35.7 37.6 92.9 4.4 130.9l-5.4 6.1c-8.7 10-7.7 25.1 2.3 33.9s25.1 7.7 33.9-2.3l5.4-6.1c49.9-57 47-142.9-6.5-196.5c-56.2-56.2-147.3-56.2-203.5 0L59.7 244.8z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:10px 50%;background-size:20px 20px;transition:border .2s,background .2s,color .2s,background-image .2s}.img-url.img-url-error-state{border:1.5px solid #e74c3c!important;color:#e74c3c!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23e74c3c' viewBox='0 0 640 512'%3E%3Cpath d='M580.3 267.2c56.2-56.2 56.2-147.3 0-203.5C526.8 10.2 440.9 7.3 383.9 57.2l-6.1 5.4c-10 8.7-11 23.9-2.3 33.9s23.9 11 33.9 2.3l6.1-5.4c38-33.2 95.2-31.3 130.9 4.4c37.4 37.4 37.4 98.1 0 135.6L433.1 346.6c-37.4 37.4-98.2 37.4-135.6 0c-35.7-35.7-37.6-92.9-4.4-130.9l4.7-5.4c8.7-10 7.7-25.1-2.3-33.9s-25.1-7.7-33.9 2.3l-4.7 5.4c-49.8 57-46.9 142.9 6.6 196.4c56.2 56.2 147.3 56.2 203.5 0L580.3 267.2zM59.7 244.8C3.5 301 3.5 392.1 59.7 448.2c53.6 53.6 139.5 56.4 196.5 6.5l6.1-5.4c10-8.7 11-23.9 2.3-33.9s-23.9-11-33.9-2.3l-6.1 5.4c-38 33.2-95.2 31.3-130.9-4.4c-37.4-37.4-37.4-98.1 0-135.6L207 165.4c37.4-37.4 98.1-37.4 135.6 0c35.7 35.7 37.6 92.9 4.4 130.9l-5.4 6.1c-8.7 10-7.7 25.1 2.3 33.9s25.1 7.7 33.9-2.3l5.4-6.1c49.9-57 47-142.9-6.5-196.5c-56.2-56.2-147.3-56.2-203.5 0L59.7 244.8z'/%3E%3C/svg%3E")}.img-url-error{display:none}.css-code{border-radius:16px;border:1px solid #e3e4ea;padding:20px;font-family:'Cascadia Code','Fira Mono','Consolas',monospace;font-weight:300;font-size:.8rem;color:#2d3748;background:#fff;margin:0 0 12px;width:100%;box-sizing:border-box;resize:none;outline:none;background:#fafafa;white-space:pre-line;max-inline-size:none}.css-code i{font-style:normal;color:#999}.button-row{display:flex;flex-direction:row;gap:8px;width:100%;margin-bottom:.5rem}