body{

margin:0;
font-family:Arial;
background:#f4f6fb;

}

.hero{

background:linear-gradient(135deg,#5f7cff,#6ad1ff);
color:white;
text-align:center;
padding:60px;

}

.grid{

display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:25px;
padding:40px;

}

.tool-card{

background:white;
padding:25px;
border-radius:12px;
box-shadow:0 10px 25px rgba(0,0,0,0.08);
cursor:pointer;
transition:0.2s;

}

.tool-card:hover{

transform:translateY(-5px);

}

#workspace{

background:white;
margin:40px;
padding:30px;
border-radius:10px;
text-align:center;

}

canvas{

border:1px solid #ddd;
margin-top:20px;

}

button{

margin-top:20px;
padding:12px 20px;
background:#4CAF50;
color:white;
border:none;
border-radius:5px;

}