.font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;}

.tuning-preset.active{
    background:var(--bs-primary);
    color:#fff;
    border-color:var(--bs-primary);
}

.result-display{
    background:var(--bs-tertiary-bg);
    padding:.75rem 1rem;
    border-radius:.4rem;
    border:1px solid var(--bs-border-color);
}
.result-label{
    font-size:.7rem;
    color:var(--bs-secondary-color);
    text-transform:uppercase;
    letter-spacing:.05em;
    margin-bottom:.2rem;
}
.result-value-big{
    font-size:1.5rem;
    font-weight:700;
    font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
    color:var(--bs-body-color);
    line-height:1.2;
}

/* Piano */
.piano-scroll{
    overflow-x:auto;
    padding:.5rem 0;
}
.piano{
    position:relative;
    height:160px;
    display:inline-flex;
    background:var(--bs-tertiary-bg);
    border-radius:.4rem;
    padding:0;
    user-select:none;
}
.piano .white-key{
    position:relative;
    width:42px;
    height:160px;
    background:#fafafa;
    border:1px solid #c4b59a;
    border-radius:0 0 4px 4px;
    cursor:pointer;
    transition:background .05s ease;
    flex-shrink:0;
}
.piano .white-key:hover{background:#e7f1ff;}
.piano .white-key.active{background:#0d6efd;}
.piano .white-key .key-label{
    position:absolute;
    bottom:.4rem;
    left:50%;
    transform:translateX(-50%);
    font-size:.65rem;
    color:#666;
    font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
    pointer-events:none;
}
.piano .white-key.active .key-label{color:#fff;}
.piano .black-key{
    position:absolute;
    top:0;
    width:26px;
    height:100px;
    background:#1a1a1a;
    border:1px solid #000;
    border-radius:0 0 3px 3px;
    cursor:pointer;
    z-index:2;
    transition:background .05s ease;
}
.piano .black-key:hover{background:#0d6efd;}
.piano .black-key.active{background:#0aa;}
.piano .black-key .key-label{
    position:absolute;
    bottom:.3rem;
    left:50%;
    transform:translateX(-50%);
    font-size:.55rem;
    color:#bbb;
    font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
    pointer-events:none;
}

[data-bs-theme="dark"] .piano{background:rgba(255,255,255,.05);}
[data-bs-theme="dark"] .piano .white-key{background:#eaeaea;border-color:#3a3a3a;}
[data-bs-theme="dark"] .piano .white-key:hover{background:#5b8def;color:#fff;}
[data-bs-theme="dark"] .piano .white-key .key-label{color:#444;}