body{
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto;
margin:10px;
}

#controls{
display:flex;
flex-wrap:wrap;
gap:12px;
align-items:center;
margin-bottom:15px;
}

#controls label{
display:flex;
align-items:center;
gap:6px;
white-space:nowrap;
}

button{
padding:5px 10px;
}

#grid{
display:grid;
grid-auto-rows:52px;
gap:2px;
}

.cell{
width:60px;
border:1px solid #aaa;
display:flex;
align-items:center;
justify-content:center;
position:relative;
background:white;
}

.header{
background:#eee;
font-weight:700;
}

.string{
background:#f5f5f5;
font-weight:700;
}

.nut{
border-right:4px solid black;
}

.dot{
width:36px;
height:36px;
display:flex;
align-items:center;
justify-content:center;
}

.dot,
.shape {
  pointer-events: none;
}

#exportHeader{
display:none;
font-size:22px;
font-weight:700;
margin-bottom:10px;
text-align:center;
}

button{
padding:8px 14px;
font-size:16px;
}