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;
}

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

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

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

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

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

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

#board-wrapper{
overflow-x:auto;
overflow-y:hidden;
max-width:100%;
}

#grid{
width:max-content;
}

.seqNumber{

position:absolute;
top:-6px;
right:-6px;

width:18px;
height:18px;

border-radius:50%;
background:white;
border:2px solid black;

font-size:11px;
font-weight:bold;

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

pointer-events:none;

}


#board-wrapper{
position:relative;
overflow-x:auto;
overflow-y:hidden;
max-width:100%;
}

#grid{
position:relative;
z-index:1;
}

#sequenceLayer{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
pointer-events:none;
z-index:5;
}

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

.dot{
width:36px;
height:36px;
display:flex;
align-items:center;
justify-content:center;
position:relative;
z-index:10;
}