.sos-tool{
background:#2f2f2f;
padding:40px;
text-align:center;
color:white;
border-radius:10px;
}

.sos-letters{
font-size:40px;
display:flex;
justify-content:center;
align-items:center;
gap:40px;
margin-bottom:20px;
}

.morse-visual{
display:flex;
justify-content:center;
align-items:center;
gap:14px;
margin:20px auto;
flex-wrap:nowrap;
}

.dot{
width:18px;
height:18px;
background:#dcdcdc;
border-radius:3px;
opacity:.4;
}

.dash{
width:70px;
height:18px;
background:#dcdcdc;
border-radius:3px;
opacity:.4;
}

.active-signal{
background:white;
opacity:1;
}


.controls{
margin-top:20px;
}

.btn{
padding:12px 18px;
margin:5px;
border:none;
border-radius:8px;
background:#8a8a8a;
color:white;
cursor:pointer;
}

.play {
    background: #50C8FF;
    color: black; /* This makes the button text black */
}

.option{
background:#005276;
}

.active{
outline:3px solid whitesmoke;
}

.sliders{
display:flex;
justify-content:center;
gap:20px;
margin-top:30px;
}

.sliders label{
display:block;
margin-bottom:6px;
}

.sliders input{
width:100px;
}

#flashLight{
position:fixed;
top:0;
left:0;
width:100vw;
height:100vh;
background:white;
opacity:0;
z-index:9999;
pointer-events:none;
transition:opacity .1s;
}