.sketchpad-container{color:#fff;flex-direction:column;align-items:center;padding:20px;font-family:sans-serif;display:flex}.sketchpad-container canvas{cursor:crosshair;background:#000;border:1px solid #444}.sketchpad-container .controls{flex-wrap:wrap;align-items:center;gap:12px;margin-top:20px;display:flex}.sketchpad-container button{color:#eee;cursor:pointer;background:#222;border:1px solid #444;border-radius:6px;padding:8px 16px;font-size:13px;font-weight:500;transition:all .2s}.sketchpad-container button:hover{background:#333;border-color:#666;transform:translateY(-1px)}.sketchpad-container button.primary{color:#fff;background:#0070f3;border-color:#0070f3}.sketchpad-container button.primary:hover{background:#0060df}.sketchpad-container input[type=range]{-webkit-appearance:none;background:#666;border-radius:3px;outline:none;width:200px;height:6px;margin-top:5px}.sketchpad-container input[type=range]::-webkit-slider-thumb{appearance:none;cursor:pointer;background:#0070f3;border-radius:50%;width:16px;height:16px;transition:background .15s ease-in-out}.sketchpad-container input[type=range]::-webkit-slider-thumb:hover{background:#0051a2}.sketchpad-container input[type=number]{color:#fff;background:#222;border:1px solid #444;border-radius:4px;width:80px;padding:4px 8px;font-size:12px}.sketchpad-container textarea{color:#0f0;background:#111;border:1px solid #333;outline:none;width:800px;height:150px;margin-top:20px;padding:10px;font-family:monospace}.sketchpad-container textarea:focus{border-color:#0070f3}.sketchpad-container .instructions{color:#aaa;max-width:800px;margin-bottom:20px;font-size:14px}.sketchpad-container label{color:#888;flex-direction:column;font-size:12px;display:flex}.sketchpad-container b{font-weight:700}
