.letter-segment {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 2px;
    margin: 0 1px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    vertical-align: middle;
}

.letter-segment .letter-map {
    margin-inline: 0;
    cursor: inherit;
}

.letter-segment:active,
.letter-segment.playing,
.letter-segment.active-pop {
    background: rgba(35, 102, 209, .10);
}

.letter-segment:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 2px;
}