.wavediv{
    border: 1px solid #eee;
    padding: 0.5rem;
}

.night .wavediv{
    border:1px solid #444;
}

.canvas-box{
    width: 100%;
    height: 5.5rem;
    border-radius: 3px;
    overflow: hidden;
    background-color: #f6f7fa;
    border: 1px solid #eee;
    margin-bottom: 0.5rem;
    position: relative;
    padding-top: 1.5rem;
}

.night .canvas-box{
    background-color: #181a1b;
    border: 1px solid #444;
}

.canvas-box canvas{
    width:100%;
    height:100%;
    display:block;
}

.canvas-label{
    position: absolute;
    top: 0.4rem;
    left: 0.5rem;
    font-size: 0.6rem;
}

.canvas-label.right{
    left:auto;
    right:0.5rem;
}

.spectrum-box{
    width:100%;
    height:60px;
    border-radius:3px;
    overflow:hidden;
    background-color: #f6f7fa;
    border: 1px solid #eee;
    margin-bottom:0.5rem;
    position:relative;
}

.night .spectrum-box{
    background-color: #181a1b;
    border: 1px solid #444;
}

.spectrum-box canvas{width:100%;
    height:100%;
    display:block;
}

.params{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:0.5rem;
}

.params>:first-child {
    grid-column: 1 / -1; 
}

.param{
    background-color: #f6f7fa;
    border: 1px solid #eee;
    border-radius:3px;
    padding:0.5rem 0.6rem;
}

.param-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:0.35rem;
}

.param-name{
    font-size: 0.6rem;
}

.param-val{
    font-size: 0.6rem;
}


.speeddiv{
    border: 1px solid #eee;
    padding: 0.5rem 0.5rem 0.75rem 0.5rem;
    border-radius: 3px;
    position: relative;
}

.night .speeddiv{
    border:1px solid #444;
}

.speeddiv .txtop{
    height: 1.2rem;
    line-height: 1.2rem;
    margin-bottom: 0.75rem;
}

.speeddiv span{
    font-size: 0.6rem;
    float: right;
}

@media screen and (max-width: 460px){
    .params {
        grid-template-columns: 1fr;
    }
}