*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{
font-family:Arial;
background:#1e1e1e;
color:white;
}

.app{
display:flex;
height:100vh;
}

.sidebar{
width:320px;
background:#2d2d2d;
padding:20px;
overflow:auto;
}

.sidebar h2{
margin-bottom:20px;
}

.sidebar label{
display:block;
margin-top:15px;
margin-bottom:5px;
}

.sidebar input[type=range]{
width:100%;
}

.sidebar button{
width:100%;
margin-top:15px;
padding:12px;
border:none;
background:#0d6efd;
color:white;
cursor:pointer;
}

.preview{
flex:1;
display:flex;
justify-content:center;
align-items:center;
overflow:hidden;
padding:20px;
}

canvas{
max-width:100%;
max-height:90vh;
object-fit:contain;
border-radius:8px;
box-shadow:0 0 15px rgba(0,0,0,.4);
background:white;
}