.carousel{max-width:1024px}*{box-sizing:border-box}body{font-family:'Roboto',sans-serif;margin:0;padding:0}#mainContent{display:flex;flex-direction:row;padding:1rem;gap:1rem;min-height:50vh}#mainContent button{color:#e4ecf4;background-color:#56bdc6}#mainContent button:hover{background-color:#3fa5ae}#mainContent button.close-btn{color:#56bdc6;background-color:#f9f9f9}.left{width:100%;display:flex;justify-content:center}.right{width:0}#containerCanvas{display:flex;flex-direction:column;align-items:center}canvas{border:1px solid #ccc;margin-top:1rem}.side-panel{top:0;right:0;width:320px;transition:transform 0.3s ease-in-out;z-index:1000;outline:none;display:none}.side-panel.close{display:none}.side-panel.open{display:flex}#panel{height:100%;background-color:#f9f9f9;border-left:1px solid #ccc;box-shadow:-4px 0 8px rgba(0,0,0,.1);padding:1.5rem;box-sizing:border-box;overflow-y:auto;padding-top:0;width:320px}#panel h2{margin-top:0;margin-bottom:1.5rem;text-align:center;font-size:1.4rem;color:#333}.form-group{margin-bottom:1rem;display:flex;flex-direction:column}label{margin-bottom:.5rem;font-weight:500;color:#444}select,input[type="color"]{padding:.4rem;font-size:1rem;border-radius:4px;border:1px solid #ccc}.button-group{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin-top:1rem}button{padding:.6rem 1.2rem;font-size:1rem;border:none;border-radius:4px;color:white;cursor:pointer;transition:background-color 0.2s ease}button:disabled{background-color:#ccc;cursor:not-allowed;opacity:.6}.close-btn{position:relative;top:15px;right:-250px;padding:0;background:transparent;border:none;font-size:1.5rem;font-weight:bold;color:#666;cursor:pointer;z-index:10;transition:color 0.2s ease}.close-btn:hover{color:#000}.canvas-controls{margin-bottom:1rem;width:100%;display:flex;justify-content:center}.canvas-controls button{padding:.6rem 1.2rem;font-size:1rem;background-color:#28a745;border:none;border-radius:4px;color:white;cursor:pointer;transition:background-color 0.2s ease}.canvas-controls button:hover{background-color:#218838}@media (max-width:768px){#mainContent{flex-direction:column}.left{width:100%}.right{width:auto}#panel{width:100%}.side-panel{width:100%;transform:translateX(100%)}.side-panel.close{display:none}.side-panel.open{transform:translateX(0)}}