#transparent-shape-mask .containerEx{display:flex;flex-wrap:wrap;justify-content:center;gap:20px;max-width:1200px}#transparent-shape-mask .editor-panel{flex:1;min-width:300px;max-width:600px}#transparent-shape-mask .preview-panel{flex:1;min-width:300px;display:flex;flex-direction:column;align-items:center}#transparent-shape-mask canvas{background-image:linear-gradient(45deg,#f0f0f0 25%,transparent 25%),linear-gradient(-45deg,#f0f0f0 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#f0f0f0 75%),linear-gradient(-45deg,transparent 75%,#f0f0f0 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0}#transparent-shape-mask button{padding:10px 20px;background-color:#4caf50;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:16px;margin:5px}#transparent-shape-mask button:hover{background-color:#45a049}#transparent-shape-mask button.secondary{background-color:#2196f3}#transparent-shape-mask button.secondary:hover{background-color:#0b7dda}#transparent-shape-mask button.danger{background-color:#f44336}#transparent-shape-mask button.danger:hover{background-color:#d32f2f}#transparent-shape-mask .controls{margin-bottom:20px;width:100%;display:flex;flex-direction:column;align-items:center}#transparent-shape-mask .control-group{width:96%;margin-bottom:15px;display:flex;flex-direction:column;border:1px solid #ddd;border-radius:4px;padding:10px;background-color:#fff}#transparent-shape-mask .control-group h3{margin-top:0;margin-bottom:10px;font-size:16px;color:#333}#transparent-shape-mask .slider-container{width:100%;display:flex;align-items:center;margin-bottom:10px}#transparent-shape-mask .slider-container label{width:180px;margin-right:10px}#transparent-shape-mask .slider-container input[type="range"]{flex-grow:1}#transparent-shape-mask .slider-container input[type="number"],#transparent-shape-mask .slider-container input[type="color"],#transparent-shape-mask .slider-value{width:60px;text-align:right;margin-left:10px}#transparent-shape-mask select{padding:8px;font-size:16px;width:100%}#transparent-shape-mask .shape-selector{margin-bottom:20px;width:100%}#transparent-shape-mask .buttons{display:flex;flex-wrap:wrap;justify-content:center;margin-top:10px;margin-bottom:10px}#transparent-shape-mask .checkbox-container{display:flex;align-items:center;margin-bottom:10px}#transparent-shape-mask .checkbox-container label{margin-left:10px}#transparent-shape-mask .tabs{display:flex;width:100%;margin-bottom:20px}#transparent-shape-mask .tab{padding:10px 20px;background-color:#ddd;cursor:pointer;border-radius:4px 4px 0 0;margin-right:5px}#transparent-shape-mask .tab.active{background-color:#fff;border:1px solid #ccc;border-bottom:none}#transparent-shape-mask .tab-content{display:none;width:100%}#transparent-shape-mask .tab-content.active{display:block}#transparent-shape-mask .file-input{margin-bottom:15px}#transparent-shape-mask .preview-controls{display:flex;flex-direction:column;width:100%;margin-bottom:15px}#transparent-shape-mask .preview-mode{display:flex;justify-content:center;margin-bottom:10px}#transparent-shape-mask .preview-mode button{padding:5px 10px;font-size:14px}#transparent-shape-mask .transparency-toggle{display:flex;justify-content:center;margin:15px 0}#transparent-shape-mask .transparency-toggle button{padding:10px 15px;font-size:14px;border-radius:0;margin:0}#transparent-shape-mask .transparency-toggle button:first-child{border-radius:4px 0 0 4px}#transparent-shape-mask .transparency-toggle button:last-child{border-radius:0 4px 4px 0}#transparent-shape-mask .transparency-toggle button.active{background-color:#45a049}#transparent-shape-mask .preview-container{width:545px;height:545px;display:flex;justify-content:center;align-items:center;overflow:hidden;border:1px solid #ccc}#transparent-shape-mask .preview-canvas{width:100%;height:100%;object-fit:contain}