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

body{

background:#0f172a;
color:white;
height:100vh;

}

.container{

display:flex;
height:100vh;

}

.sidebar{

width:330px;
background:#1e293b;
padding:25px;
overflow:auto;

}

.sidebar h2{

margin-bottom:20px;

}

label{

display:block;
margin-bottom:20px;

}

input{

width:100%;
margin:8px 0;

}

.buttons{

display:flex;
gap:10px;
margin-top:20px;

}

button{

flex:1;
padding:10px;
border:none;
border-radius:6px;
cursor:pointer;
background:#2563eb;
color:white;
font-size:16px;

}

button:hover{

background:#1d4ed8;

}

.result{

margin-top:30px;
line-height:2;

}

.canvas-area{

flex:1;
display:flex;
justify-content:center;
align-items:center;

}

canvas{

background:black;
width:95%;
height:90%;
border-radius:10px;
box-shadow:0 0 20px black;

}