body{
font-family:Arial;
text-align:center;
}

/* LEFT PANEL */

#leftControls{
position:absolute;
left:20px;
top:20px;
text-align:left;
width:140px;
}

#leftControls select{
width:130px;
padding:3px;
margin-bottom:15px;
font-size:14px;
}

/* PLAY BUTTON */

#topControls{
width:900px;
margin:auto;
display:flex;
justify-content:flex-end;
margin-bottom:10px;
}

#playButton{
width:50px;
height:50px;
background:white;
border:2px solid #ccc;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
}

.playIcon{
width:0;
height:0;
border-left:20px solid green;
border-top:12px solid transparent;
border-bottom:12px solid transparent;
}

/* EDITOR LAYOUT */

#editorArea{
display:flex;
justify-content:center;
align-items:flex-start;
gap:20px;
}

/* SCORE VIEWPORT */

#scoreViewport{
width:900px;
height:260px;
border:2px solid #ccc;
overflow-y:auto;
background:white;
}

/* ADD BAR PANEL */

#addBarArea{
display:flex;
flex-direction:column;
align-items:center;
}

#addBarLabel{
font-size:14px;
margin-bottom:6px;
}

#addBarButton{
width:50px;
height:50px;
font-size:30px;
cursor:pointer;
}

/* UNDO REDO */

#undoRedoArea{
display:flex;
flex-direction:column;
gap:6px;
margin-top:15px;
}

#undoRedoArea button{
width:50px;
height:40px;
font-size:18px;
}

/* RHYTHM BUTTONS */

.rhythm{
font-size:26px;
}

.rhythm.active{
background:#3cb371;
color:white;
}

/* DOT BUTTON */

#dotButton.active{
background:#3cb371;
color:white;
}

/* NOTE AREA */

#noteArea{
display:flex;
justify-content:center;
margin-top:20px;
}

#noteButtons{
display:flex;
gap:10px;
}

#octaveButtons{
display:flex;
flex-direction:column;
margin-left:25px;
}

button{
padding:10px 15px;
margin:5px;
cursor:pointer;
}
#tempoControl{
display:flex;
align-items:center;
gap:6px;
margin-left:15px;
}

#tempoControl input{
width:70px;
padding:5px;
font-size:16px;
}

#downloadButton{
margin-left:15px;
padding:8px 14px;
cursor:pointer;
}

#downloadMenu{
margin:auto;
width:200px;
display:flex;
flex-direction:column;
gap:6px;
margin-bottom:10px;
}

.hidden{
display:none;
}

#downloadMenu.downloadHidden{
display:none;
}

#downloadMenu{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.3);
display:flex;
justify-content:center;
align-items:center;
z-index:1000;
}

.downloadDialog{
background:white;
padding:20px;
border-radius:6px;
display:flex;
flex-direction:column;
gap:10px;
min-width:200px;
}