.app{width:100vw;height:100vh;position:relative;transition:background-color .1s ease;overflow:hidden}.controls{position:fixed;top:0;left:0;width:280px;max-width:40vw;height:100vh;background:#000000f2;color:#fff;padding:20px;overflow-y:auto;transition:transform .3s ease;z-index:1000;box-shadow:4px 0 20px #00000080}.controls.hidden{transform:translate(-102%)}.controls.visible{transform:translate(0)}.controls-content{display:flex;flex-direction:column;gap:20px}.section{display:flex;flex-direction:column;gap:10px}.section h3{margin:0;font-size:16px;font-weight:600;color:#aaa}.preset-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.preset-button{padding:12px;border:2px solid rgba(255,255,255,.3);border-radius:8px;cursor:pointer;font-weight:600;font-size:14px;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.8);transition:all .2s ease}.preset-button:hover{transform:scale(1.05);border-color:#fffc}.preset-button:active{transform:scale(.95)}.preset-button.pressing{border-color:#fffc;transform:scale(.98);animation:pulse .5s ease-in-out infinite}.color-picker{width:100%;height:50px;border:2px solid #333;border-radius:8px;cursor:pointer;background:transparent}.slider-group{display:flex;flex-direction:column;gap:15px}.slider-group label{display:flex;flex-direction:column;gap:8px;font-size:14px;font-weight:500}.slider{width:100%;height:8px;border-radius:4px;outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer}.slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:#fff;cursor:pointer;box-shadow:0 2px 4px #0000004d}.slider::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#fff;cursor:pointer;border:none;box-shadow:0 2px 4px #0000004d}.slider.red{background:linear-gradient(to right,#000,#080000,#250000 25%,#6a0000 50%,#ff0e0e);background:linear-gradient(to right,#000,#080000,color(xyz 0.008 0.004 -0) 25%,color(xyz 0.061 0.029 -0) 50%,color(xyz 0.487 0.229 0))}.slider.green{background:linear-gradient(to right,#000,#060300 12.5%,#031000,#002006 25%,#005f1a 50%,#00f74e);background:linear-gradient(to right,#000,#060300,color(xyz 0.004 0.011 0.001) 25%,color(xyz 0.033 0.086 0.006) 50%,color(xyz 0.266 0.692 0.045))}.slider.blue{background:linear-gradient(to right,#000,#000007,#000023 25%,#000068 50%,#0035ec);background:linear-gradient(to right,#000,#000007,#000023 25%,#000068 50%,color(xyz 0.198 0.079 1.044))}.slider.brightness{background:linear-gradient(to right,#000,#010101,#060606 12.5%,#222 25%,#636363,#aeaeae,#fff)}.slider.blink-speed{background:linear-gradient(to right,#222,#888)}.fullscreen-button{width:53px;padding:12px;background:#333;color:#fff;border:2px solid #555;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:background .2s}.fullscreen-button:hover{background:#444}.fullscreen-button:active{background:#222}@media (max-width: 768px){.controls{width:100vw;max-width:100vw;height:auto;max-height:70vh;left:0;right:0}.controls.hidden{transform:translateY(-102%)}.controls.visible{transform:translateY(0)}}.custom-colors-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.add-color-button{background:#ffffff1a;border:2px dashed rgba(255,255,255,.3);display:flex;align-items:center;justify-content:center}.add-color-button:hover{background:#ffffff26;border-color:#ffffff80}.checkbox-label{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:14px;margin-top:5px}.checkbox-label input[type=checkbox]{width:18px;height:18px;cursor:pointer;accent-color:#4a9eff}.checkbox-label span{-webkit-user-select:none;user-select:none}.clear-button{background:#ff323233;border:1px solid rgba(255,50,50,.5);border-radius:4px;color:#ff6b6b;padding:4px 12px;font-size:12px;font-weight:600;cursor:pointer;transition:all .2s ease}.clear-button:hover{background:#ff32324d;border-color:#ff3232cc;color:#ff8787}.clear-button:active{transform:scale(.95)}@keyframes pulse{0%,to{box-shadow:0 0 #ffffffb3}50%{box-shadow:0 0 0 8px #fff0}}.app{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.mask{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);transition:background-color .1s ease;z-index:1}.mask-circle{border-radius:50%}:root{--star-mask-url: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='utf-8'?%3e%3c!--%20Uploaded%20to:%20SVG%20Repo,%20www.svgrepo.com,%20Generator:%20SVG%20Repo%20Mixer%20Tools%20--%3e%3csvg%20width='800px'%20height='800px'%20viewBox='0%200%20512%20512'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20fill='%23000000'%20d='M256%2038.013c-22.458%200-66.472%20110.3-84.64%20123.502-18.17%2013.2-136.674%2020.975-143.614%2042.334-6.94%2021.358%2084.362%2097.303%2091.302%20118.662%206.94%2021.36-22.286%20136.465-4.116%20149.665%2018.17%2013.2%20118.61-50.164%20141.068-50.164%2022.458%200%20122.9%2063.365%20141.068%2050.164%2018.17-13.2-11.056-128.306-4.116-149.665%206.94-21.36%2098.242-97.304%2091.302-118.663-6.94-21.36-125.444-29.134-143.613-42.335-18.168-13.2-62.182-123.502-84.64-123.502z'/%3e%3c/svg%3e");--heart-mask-url: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='utf-8'?%3e%3c!--%20Uploaded%20to:%20SVG%20Repo,%20www.svgrepo.com,%20Generator:%20SVG%20Repo%20Mixer%20Tools%20--%3e%3csvg%20fill='%23000000'%20width='800px'%20height='800px'%20viewBox='3%2010%2018%203'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M12%2020a1%201%200%200%201-.437-.1C11.214%2019.73%203%2015.671%203%209a5%205%200%200%201%208.535-3.536l.465.465.465-.465A5%205%200%200%201%2021%209c0%206.646-8.212%2010.728-8.562%2010.9A1%201%200%200%201%2012%2020zM8%206a3%203%200%200%200-3%203c0%204.639%205.4%207.981%207%208.868%201.6-.89%207-4.247%207-8.868a3%203%200%200%200-5.121-2.121L12.707%208.05a1%201%200%200%201-1.414%200l-1.172-1.171A2.98%202.98%200%200%200%208%206z'/%3e%3c/svg%3e");--heart-solid-mask-url: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='utf-8'?%3e%3c!--%20Uploaded%20to:%20SVG%20Repo,%20www.svgrepo.com,%20Generator:%20SVG%20Repo%20Mixer%20Tools%20--%3e%3csvg%20fill='%23000000'%20width='800px'%20height='800px'%20viewBox='3%2010%2018%203'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M12%2020a1%201%200%200%201-.437-.1C11.214%2019.73%203%2015.671%203%209a5%205%200%200%201%208.535-3.536l.465.465.465-.465A5%205%200%200%201%2021%209c0%206.646-8.212%2010.728-8.562%2010.9A1%201%200%200%201%2012%2020z'/%3e%3c/svg%3e")}.mask-star{-webkit-mask-image:var(--star-mask-url);mask-image:var(--star-mask-url);-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center}.mask-heart{-webkit-mask-image:var(--heart-mask-url);mask-image:var(--heart-mask-url);-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center}.mask-heart-solid{-webkit-mask-image:var(--heart-solid-mask-url);mask-image:var(--heart-solid-mask-url);-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center}.mask-triangle{clip-path:polygon(50% 0%,0% 100%,100% 100%)}.mask-selector{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}.flag-selector{display:flex;flex-direction:row;gap:8px;justify-content:space-between}.mask-button{padding:12px 8px;background:#333;color:#fff;border:2px solid #555;border-radius:8px;font-size:18px;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center}.mask-button:hover{background:#444;border-color:#777}.mask-button.active{background:#555;border-color:#fff}.mask-button:active{transform:scale(.95)}.mask-size-controls{display:flex;align-items:center;gap:10px}.size-button{width:40px;height:40px;background:#333;color:#fff;border:2px solid #555;border-radius:8px;font-size:24px;font-weight:700;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;flex-shrink:0}.size-button:hover{background:#444;border-color:#777}.size-button:active{transform:scale(.95);background:#222}.slider.mask-size{flex:1;background:linear-gradient(to right,#222,#888)}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow:hidden;width:100vw;height:100vh}#root{width:100%;height:100%}