#root{width:100%;height:100%}.canvas-app{top:0;background-color:#e9e9e9;display:flex;position:absolute;justify-content:center;align-items:center;overflow:hidden;width:100%;height:100%}.canvas-app:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:url(../images/background.jpg) center/cover no-repeat;opacity:.3;filter:blur(8px);z-index:0}.toolbar{width:100%;border-radius:0 0 15px 15px;background-color:#fff;padding:20px;display:flex;flex-direction:row;position:absolute;gap:20px;bottom:0;overflow-y:auto;z-index:10}.toolbar button{border-radius:50%}.tool-section{display:flex;align-items:center}.tool-section.right-side{position:absolute;right:20px}.tool-section:last-child{border-bottom:none}.tool-section h3{margin-bottom:10px;font-size:16px;color:#333}button{background-color:#4395b930;border:none;height:40px;width:40px;padding:8px 12px;margin:5px 5px 5px 0;border-radius:4px;cursor:pointer;font-size:14px;transition:all .2s ease;background-size:50%;background-position:center;background-repeat:no-repeat}button:hover{background-color:#4395b9}button.active{background-color:#4395b9;color:#fff}button:disabled{opacity:.5;cursor:not-allowed}input[type=range]{width:100%;margin:5px 5px 5px 0}input[type=color]{width:40px;height:40px;border:none;margin:5px 5px 5px 0;border-radius:50%;cursor:pointer}input[type=color]::-webkit-color-swatch{border:none;border-radius:50%;padding:0}input[type=color]::-webkit-color-swatch-wrapper{border:none;border-radius:50%;padding:0}.canvas-container{flex-grow:1;display:flex;overflow:hidden}canvas{border-radius:0 15px 15px 0;box-shadow:0 0 10px #0000001a;cursor:crosshair}.canvas-background{border-radius:15px;background-image:url(../images/vlinderbody.jpg);background-size:cover;background-repeat:no-repeat}.canvas-app-container{width:100%;left:40px;position:absolute;display:flex;flex-direction:row}.preview-container{width:400px;background-color:#fff;box-shadow:2px 0 10px #0000001a;padding:20px;display:flex;flex-direction:column;border-radius:15px;position:absolute;right:40px;gap:20px;overflow-y:auto;z-index:10}.name-input{width:100%;padding:8px;border:1px solid #ccc;border-radius:4px;font-size:14px}.save-button{background-color:#4395b9;width:calc(100% - 40px);position:absolute;color:#fff;border:none;bottom:20px;padding:8px 12px;border-radius:4px;cursor:pointer;font-size:14px}.save-button-icon{position:absolute;width:20px;height:20px;background-size:contain;background-repeat:no-repeat;background-position:center}.close-button{position:absolute;top:20px;right:20px;width:35px;height:35px;cursor:pointer;background-color:#4395b9;border-radius:50%;background-image:url(../icons/close-icon.svg);background-size:50%;background-repeat:no-repeat;background-position:center}@font-face{font-family:Circular Std;src:url(fonts/CircularStd-Medium.woff2) format("woff2");font-weight:500;font-style:normal}:root{--primary: #4395b9;--text: #000;--white: #ffffff;--primary-hover: #337994;--primary-light: #e6f0f4}:where(:not(.sonner-toast>*,[class*=leva]>*)){box-sizing:border-box;margin:0;padding:0;font-family:sans-serif}.main-buttons-container{display:flex;align-items:stretch;gap:.3125rem;position:absolute;bottom:96px;left:50%;transform:translate(-50%)}.butterfly-list{z-index:100;position:absolute;top:50%;right:64px;width:320px;padding:32px;display:flex;flex-direction:column;align-items:flex-start;gap:.625rem;border-radius:.9375rem;background:var(--white);transition:opacity .3s ease,transform .3s ease;box-shadow:0 20px 40px #0000001a;opacity:0;pointer-events:none;transform:translate(10px) translateY(-50%)}.butterfly-list h2{font-size:1.5rem;font-weight:500;color:var(--text);margin-bottom:16px}.butterfly-list.show{opacity:1;pointer-events:auto;transform:translate(0) translateY(-50%)}.butterfly-list .close-list{display:flex;width:32px;height:32px;padding:0;justify-content:center;align-items:center;gap:.5rem;position:absolute;right:24px;top:24px;border-radius:50%;background:var(--primary);transition:background .3s ease;cursor:pointer}.butterfly-list .close-list:hover{background:var(--primary-hover)}.butterfly-list .butterfly-list-container{width:100%;max-height:420px;overflow-y:scroll;display:flex;flex-direction:column;gap:.625rem}.butterfly-list .butterfly-item{display:flex;height:3.1875rem;padding:0 8px;align-items:center;flex-shrink:0;align-self:stretch;border-radius:.625rem;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:var(--primary-light);cursor:pointer;transition:background .3s ease}.butterfly-list .butterfly-item:hover{background:var(--primary)}.butterfly-list .butterfly-item img{width:25px;height:25px}.butterfly-list .butterfly-item img.butterfly-image-wing-left{transform:scaleX(-1)}.butterfly-list .butterfly-item p{margin-left:8px}.main-buttons-container button{width:unset;display:flex;padding:1rem 24px;align-items:center;gap:.5rem;border-radius:.3125rem;background:var(--primary);color:var(--white);text-decoration:none;border:none;cursor:pointer;transition:background .3s ease}.main-buttons-container button:hover{background:var(--primary-hover)}#three-canvas:before{content:"";display:block;background-image:url(/images/cloud.png);background-size:100% 100%;background-repeat:no-repeat;position:absolute;right:0;top:0;bottom:0;left:0;z-index:10;pointer-events:none;background-color:transparent;animation:3s fade-in forwards}@keyframes fade-in{0%{background-color:#fff}to{background-color:transparent}}