@import "https://fonts.googleapis.com/css2?family=Quicksand:wght@400;700&family=Exo:wght@400;700;900&display=swap";body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}*{box-sizing:border-box}html,body{min-width:100vw;min-height:100vh;overflow:hidden}body{background-color:#333}.display-canvas{justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:fixed;top:0;left:0;overflow:hidden}.display-canvas .controls-open{cursor:pointer;z-index:10;mix-blend-mode:hard-light;opacity:0;-webkit-tap-highlight-color:transparent;justify-content:center;align-items:center;width:3.5em;height:3.5em;transition:all .3s;display:flex;position:absolute;top:25px;right:25px}.display-canvas .controls-open:hover{filter:drop-shadow(0 0 15px #2cd8fecc)drop-shadow(0 0 25px #a6e00066);animation:1.5s ease-in-out infinite settings-pulse;transform:scale(1.15)}@keyframes settings-pulse{0%,to{filter:drop-shadow(0 0 15px #2cd8fecc)drop-shadow(0 0 25px #a6e00066)}50%{filter:drop-shadow(0 0 25px #2cd8fe)drop-shadow(0 0 40px #a6e00099)}}.display-canvas .animation-pause{cursor:pointer;z-index:10;mix-blend-mode:hard-light;-webkit-tap-highlight-color:transparent;background:0 0;border:none;justify-content:center;align-items:center;width:5em;height:5em;padding:0;transition:all .3s;display:flex;position:absolute;top:25px;left:25px}.display-canvas .animation-pause svg{fill:#fff;opacity:.5;width:100%;height:100%;transition:opacity .3s}.display-canvas .animation-pause:hover{filter:drop-shadow(0 0 15px #2cd8fecc)drop-shadow(0 0 25px #a6e00066);transform:scale(1.15)}.display-canvas .animation-pause:hover svg{opacity:1}.display-canvas .image-container{opacity:0;z-index:0;background-position:50%;background-repeat:no-repeat;background-size:cover;width:100%;height:100%;position:absolute;top:0;left:0}.display-canvas .controls-container{z-index:5;background:0 0;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:absolute;top:0;left:0}.display-canvas .controls-container .controls-background-click{z-index:0;width:100%;height:100%;position:absolute;top:0;left:0}.display-canvas .controls-container .controls-settings{max-width:400px;display:none!important}.display-canvas .controls-container .controls-visible{display:flex!important}.display-canvas .controls-container .controls-inner{opacity:.9;z-index:1;-webkit-backdrop-filter:blur(4px)brightness(.95);backdrop-filter:blur(4px)brightness(.95);border-bottom:2px solid rgba(76, 0, 255, var(--border-opacity,.75));background:#00000026;border-radius:16px;flex-direction:column;justify-content:center;min-width:400px;padding:32px;display:flex;position:absolute;box-shadow:0 4px 40px #0006}.display-canvas .controls-container .controls-inner:after{content:"";height:2px;opacity:var(--border-opacity,.75);background:linear-gradient(90deg,#4c00ff,#ff0059,#fb0,#eaff00,#00e5ff,#4c00ff);position:absolute;bottom:-2px;left:16px;right:16px;-webkit-mask-image:linear-gradient(90deg,#0000,#000 24px calc(100% - 24px),#0000);mask-image:linear-gradient(90deg,#0000,#000 24px calc(100% - 24px),#0000)}@media (width<=480px){.display-canvas .controls-container .controls-inner{width:calc(100% - 40px);min-width:auto;padding:20px}}.display-canvas .controls-container .controls-inner .row{justify-content:space-between;align-items:center;margin-bottom:10px;display:flex}.display-canvas .controls-container .controls-inner .row:last-child{margin-top:20px;margin-bottom:0}.display-canvas .controls-container .controls-inner .row h1{text-align:left;color:#fafafa;width:100%;margin:0;font-family:Exo,sans-serif;font-size:20px;font-weight:400;display:block}.display-canvas .controls-container .controls-inner .row h1 b{color:#cdf29c;font-weight:900}.display-canvas .controls-container .controls-inner .row button,.display-canvas .controls-container .controls-inner .row input{mix-blend-mode:lighten;text-align:center;border-radius:4px;height:60px;font-family:Quicksand,sans-serif;display:inline-block;box-shadow:inset 0 0 #59069a99,0 0 #59069a80}.display-canvas .controls-container .controls-inner .row button{text-transform:uppercase;cursor:pointer}.display-canvas .controls-container .controls-inner .row button:hover,.display-canvas .controls-container .controls-inner .row input:focus{transition:all .2s ease-out;transform:translateY(-2px);box-shadow:inset 0 0 5px #59069a99,0 0 10px #2cd8fe80}.display-canvas .controls-container .controls-inner .row button:active{transition:all .1s ease-in;transform:translateY(0)}.display-canvas .controls-container .controls-inner .row button,.display-canvas .controls-container .controls-inner .row input{transition:all .2s ease-out}.display-canvas .controls-container .controls-inner .row .button-large{letter-spacing:1px;color:#fafafa;vertical-align:middle;background:linear-gradient(42deg,#2c024d,#e6008c);border:none;outline:none;width:100%;height:80px;font-size:14px;font-weight:700;position:relative;overflow:hidden}.display-canvas .controls-container .controls-inner .row .button-large:before{content:"";background:linear-gradient(90deg,#0000,#fff3,#0000);width:100%;height:100%;transition:left .5s;position:absolute;top:0;left:-100%}.display-canvas .controls-container .controls-inner .row .button-large:hover:before{left:100%}.display-canvas .controls-container .controls-inner .row .button-large.disabled{font-weight:900;color:#ff007a!important;background:linear-gradient(42deg,#6c6c6c,#d1d1d1)!important}.display-canvas .controls-container .controls-inner .row .button-small,.display-canvas .controls-container .controls-inner .row .button-medium,.display-canvas .controls-container .controls-inner .row .button-icon{color:#fafafa;letter-spacing:1px;background:0 0;border:1px solid #a6e000;outline:none;font-size:12px;font-weight:700;position:relative}.display-canvas .controls-container .controls-inner .row .button-small:hover,.display-canvas .controls-container .controls-inner .row .button-medium:hover,.display-canvas .controls-container .controls-inner .row .button-icon:hover{color:#2cd8fe;background:#a6e0001a;border-color:#2cd8fe}.display-canvas .controls-container .controls-inner .row .button-icon{border:none;width:40px;height:40px}.display-canvas .controls-container .controls-inner .row .button-icon svg{fill:#fff;opacity:.5}.display-canvas .controls-container .controls-inner .row .button-icon:hover{box-shadow:none}.display-canvas .controls-container .controls-inner .row .button-icon:hover svg{opacity:1}.display-canvas .controls-container .controls-inner .row .button-icon:hover .slider-1{transform:translate(40px)}.display-canvas .controls-container .controls-inner .row .button-icon:hover .slider-2{transform:translate(-180px)}.display-canvas .controls-container .controls-inner .row .button-icon:hover .slider-3{transform:translate(90px)}.display-canvas .controls-container .controls-inner .row .button-icon svg{transition:opacity .3s}.display-canvas .controls-container .controls-inner .row .button-icon .slider-knob{transition:transform .4s ease-out;transform:translate(0)}.display-canvas .controls-container .controls-inner .row .button-small{width:48.5%}.display-canvas .controls-container .controls-inner .row .button-medium{width:100%}.display-canvas .controls-container .controls-inner .row input{color:#fafafa;letter-spacing:1px;background:linear-gradient(42deg,#2c024d33,#e6008c33);border:1px solid #a6e000;outline:none;width:100%;font-size:12px;font-weight:700}.display-canvas .controls-container .controls-inner .text-container{color:#fff;opacity:.8;background-image:linear-gradient(42deg,#33005280,#ff008266);border-radius:4px;margin-bottom:10px;padding:20px;font-size:12px;display:block}.display-canvas .controls-container .controls-inner .text-container h6{text-transform:uppercase;margin:0;padding:0;font-size:20px}.display-canvas .controls-container .controls-inner .text-container b{cursor:pointer}.display-canvas .controls-container .controls-inner .text-container .alert{color:#fafafa;background-image:linear-gradient(42deg,#33005280,#ff008266);border-radius:4px;padding:5px 5px 5px 10px;font-weight:700}.display-canvas .controls-container .controls-inner .text-container div[style*="cursor: pointer"]{transition:all .2s}.display-canvas .controls-container .controls-inner .text-container div[style*="cursor: pointer"]:hover{transform:scale(1.01);box-shadow:0 0 15px #2cd8fe66;background:#2cd8fe33!important}.display-canvas .controls-container .controls-inner .text-container div[style*="cursor: pointer"]:active{transform:scale(.99)}.display-canvas .controls-container .controls-inner .mode-toggle{background:#0000004d;border:1px solid #a6e00040;border-radius:6px;width:100%;margin-bottom:10px;transition:all .2s ease-out;display:flex;overflow:hidden}.display-canvas .controls-container .controls-inner .mode-toggle:hover{transform:translateY(-2px);box-shadow:inset 0 0 5px #59069a99,0 0 10px #2cd8fe80}.display-canvas .controls-container .controls-inner .mode-toggle .mode-toggle-btn{color:#fafafa59;letter-spacing:2px;text-transform:uppercase;cursor:pointer;background:0 0;border:none;border-radius:0;flex:1;height:40px;margin-bottom:0;font-family:Quicksand,sans-serif;font-size:10px;font-weight:700;transition:color .3s,opacity .3s}.display-canvas .controls-container .controls-inner .mode-toggle .mode-toggle-btn.active{color:#eee;background:linear-gradient(42deg,#1f1c77,#ff0059);transition:color .3s,opacity .3s}.display-canvas .controls-container .controls-inner .mode-toggle .mode-toggle-btn:hover{box-shadow:none;transform:none}.display-canvas .controls-container .controls-inner .mode-toggle .mode-toggle-btn:hover:not(.active){color:#fafafacc;background:#fafafa14}.display-canvas .controls-container .controls-inner .animation-progress{background:#fafafa1a;border-radius:2px;width:100%;height:3px;margin-bottom:10px;overflow:hidden}.display-canvas .controls-container .controls-inner .animation-progress .animation-progress-bar{background:linear-gradient(90deg,#a6e000,#2cd8fe);border-radius:2px;height:100%;transition:width .4s}.display-canvas .controls-container .controls-inner .settings-tabs{border-bottom:1px solid #fafafa1f;width:100%;margin-bottom:20px;display:flex}.display-canvas .controls-container .controls-inner .settings-tabs .settings-tab-btn{color:#fafafa59;letter-spacing:2px;text-transform:uppercase;height:36px;box-shadow:none;cursor:pointer;mix-blend-mode:normal;background:0 0;border:none;border-bottom:2px solid #0000;border-radius:0;margin-bottom:-1px;padding:0 18px;font-family:Quicksand,sans-serif;font-size:10px;font-weight:700;transition:color .2s,border-color .2s}.display-canvas .controls-container .controls-inner .settings-tabs .settings-tab-btn.active{color:#fafafa;border-bottom-color:#2cd8fe}.display-canvas .controls-container .controls-inner .settings-tabs .settings-tab-btn:hover:not(.active){color:#fafafab3;box-shadow:none;transform:none}.display-canvas .controls-container .controls-inner .settings-field{border-bottom:1px solid #fafafa0f;justify-content:space-between;align-items:center;width:100%;padding:10px 0;display:flex}.display-canvas .controls-container .controls-inner .settings-field:last-of-type{border-bottom:none;margin-bottom:6px}.display-canvas .controls-container .controls-inner .settings-field .settings-label{color:#fafafaa6;letter-spacing:2px;text-transform:uppercase;font-family:Quicksand,sans-serif;font-size:11px;font-weight:700}.display-canvas .controls-container .controls-inner .settings-field .settings-label .settings-label-note{opacity:.5;letter-spacing:0;text-transform:none;font-weight:400}.display-canvas .controls-container .controls-inner .settings-toggle{cursor:pointer;mix-blend-mode:normal;background:#fafafa1f;border:none;border-radius:13px;flex-shrink:0;width:46px;height:26px;margin-bottom:0;padding:0;transition:background .25s,box-shadow .25s;position:relative;overflow:hidden;box-shadow:inset 0 0 0 1px #fafafa33}.display-canvas .controls-container .controls-inner .settings-toggle:hover{background:#fafafa2e;transform:none;box-shadow:inset 0 0 0 1px #fafafa4d}.display-canvas .controls-container .controls-inner .settings-toggle .settings-toggle-thumb{pointer-events:none;background:#fafafa80;border-radius:50%;width:18px;height:18px;transition:left .25s,background .25s;position:absolute;top:4px;left:4px}.display-canvas .controls-container .controls-inner .settings-toggle.on{background:linear-gradient(90deg,#4c00ff,#a6e000);box-shadow:0 0 10px #a6e00059}.display-canvas .controls-container .controls-inner .settings-toggle.on .settings-toggle-thumb{background:#fff;left:24px}.display-canvas .controls-container .controls-inner .settings-stepper{background:#0000004d;border:1px solid #fafafa1f;border-radius:6px;flex-shrink:0;align-items:center;display:flex;overflow:hidden}.display-canvas .controls-container .controls-inner .settings-stepper button{color:#fafafa99;cursor:pointer;width:36px;height:36px;box-shadow:none;mix-blend-mode:normal;background:0 0;border:none;border-radius:0;justify-content:center;align-items:center;margin-bottom:0;font-size:20px;line-height:1;transition:background .15s,color .15s;display:flex}.display-canvas .controls-container .controls-inner .settings-stepper button:hover{color:#fafafa;box-shadow:none;background:#fafafa1a;transform:none}.display-canvas .controls-container .controls-inner .settings-stepper button:active{background:#fafafa2e;transform:none}.display-canvas .controls-container .controls-inner .settings-stepper span{text-align:center;color:#fafafa;border-left:1px solid #fafafa1a;border-right:1px solid #fafafa1a;justify-content:center;align-items:center;min-width:44px;height:36px;padding:0 4px;font-family:Quicksand,sans-serif;font-size:13px;font-weight:600;display:flex}.display-canvas .controls-container .controls-inner .row.colors{flex-wrap:wrap;justify-content:space-between;max-width:400px;position:relative}.display-canvas .controls-container .controls-inner .row.colors .button-small{justify-content:center;align-items:center;height:60px;font-size:10px;display:flex;position:relative}.display-canvas .controls-container .controls-inner .row.colors .button-small svg{z-index:100;fill:#fff;width:25px;height:100%;padding-right:10px;position:absolute;top:0;right:0}#copyright{color:#fff;z-index:2000;opacity:.5;font-family:Quicksand,sans-serif;font-size:8px;position:absolute;bottom:10px}#copyright a{color:#fff;font-weight:700;text-decoration:none}.hexagon-loader{z-index:1;justify-content:center;align-items:center;width:150px;display:flex;position:relative}.hexagon-loader svg{width:100%;overflow:visible}.hexagon-loader svg polygon{fill:none;stroke:#cf0;stroke-width:0;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10}.hexagon-glow{content:"";filter:blur(42px);z-index:1;mix-blend-mode:screen;background:linear-gradient(42deg,#5100c6,#ff0073,#ffd600);border-radius:50%;width:100%;height:100%;position:absolute;top:0;left:0;overflow:visible}.animation-preview{z-index:1;cursor:pointer;background:#000;width:100%;height:100%;position:absolute;top:0;left:0}.animation-preview .animation-frame,.animation-preview .animation-star{object-fit:cover;opacity:0;width:100%;height:100%;position:absolute;top:0;left:0}.close-button{opacity:.5;width:100%;height:100%;position:relative}.close-button rect{stroke:#ff0091;stroke-width:80px;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;display:none}.close-button path{stroke:#ff0091;fill:#ff0091;stroke-width:80px;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10}.close-button #center-EX,.close-button #dot-EX{display:none}.close-button #inner{fill:#ec007f;stroke:none}.close-button #outer{fill:#3f0049;stroke:none}.play-pause-button{opacity:.5;width:100%;height:100%}.play-pause-button rect,.play-pause-button polygon{display:none}.play-pause-button path{fill:#27009b;stroke:#27009b;stroke-width:28px;stroke-linejoin:round;stroke-linecap:round}.play-pause-button #pp-play1,.play-pause-button #pp-play2,.play-pause-button #pp-pause1,.play-pause-button #pp-pause2{display:none}.color-container{opacity:0;border:2px solid #0000;width:48.5%;height:60px;margin-bottom:10px;transition:transform .2s,box-shadow .2s,border .2s,opacity .2s;position:relative}.color-container.dragging{transform:scale(.95);opacity:.3!important}.color-container.drag-over{border:2px solid #2cd8fe;transform:scale(1.05);box-shadow:0 0 15px #2cd8fe99}.color-container.drag-clone{box-shadow:0 10px 30px #00000080;opacity:.8!important;cursor:grabbing!important}.color-container.drag-clone input,.color-container.drag-clone .color-drag-handle{cursor:grabbing!important}.color-container .color-drag-handle{cursor:grab;color:#ffffff80;z-index:10;-webkit-user-select:none;user-select:none;letter-spacing:-2px;touch-action:none;-webkit-touch-callout:none;justify-content:center;align-items:center;width:20px;height:100%;font-size:16px;display:flex;position:absolute;top:0;left:5px}.color-container .color-drag-handle:active{cursor:grabbing}.color-container .color-drag-handle:hover{color:#fffc}.color-container input{cursor:pointer;z-index:0;background-color:#0006;font-size:10px;height:100%!important;padding-left:30px!important}.color-container input:hover{box-shadow:inset 0 0 5px #59069a99,0 0 20px #2cd8fe99}.color-container .color-close-button{z-index:100;cursor:pointer;width:25px;height:100%;padding-right:10px;position:absolute;top:0;right:0}.color-container .color-close-button svg{fill:#fff;stroke:#fff;width:100%;height:100%}.jscolor-btn-close{width:100%;max-width:213px!important}