body{

margin:0;
font-family:system-ui;
background:#0f0f0f;
color:white;

}

.app{

display:flex;
flex-direction:column;
height:100vh;

}

header{

display:flex;
justify-content:space-between;
align-items:center;

padding:15px;

background:#1a1a1a;

}

header h1{

font-size:18px;
margin:0;

}

.preview-container{

flex:1;

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

background:black;

}

canvas{

max-width:100%;
max-height:100%;

}

.panel{

position:fixed;

bottom:70px;

left:0;
right:0;

background:#1a1a1a;

padding:20px;

display:none;

border-top:1px solid #333;

}

.panel input{

width:100%;
margin-bottom:15px;

}

.panel button{

background:#333;
color:white;
border:none;
padding:10px;
margin:5px;
border-radius:6px;

}

.toolbar{

position:fixed;

bottom:0;

width:100%;

display:flex;

justify-content:space-around;

background:#1a1a1a;

border-top:1px solid #333;

}

.toolbar button{

flex:1;

padding:15px;

background:none;
border:none;
color:white;

font-size:14px;

}