form.keyboard fieldset {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    gap: 0 1rem;
}

form.keyboard label {
    display: inline-block;
}

form.keyboard label> :first-child {
    margin-left: 0.6em;
}

form.keyboard input:invalid {
    border: 0.1rem solid red;
}

figure.keyboard figcaption {
    font-size: 1rem;
}

figure.keyboard figcaption code {
    font-size: 1em;
    padding: 0.2em;
}

figure.keyboard figcaption dl {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 1em;
    /* max-width: 60%; */
    margin: 1em 2em;
    line-height: 1.4;
    font-size: 0.7em;
}

figure.keyboard figcaption dt {
    grid-column: 1;
    padding: 0;
    margin: 0;
    font-weight: bold;
    text-align: right;
}

figure.keyboard figcaption dd {
    grid-column: 2;
    padding: 0;
    margin: 0;
    text-align: left;
}

figure.keyboard figcaption dd ul {
    display: inline;
    list-style-type: none;
    margin: 0;
    padding: 0;
}

figure.keyboard figcaption dd li {
    display: inline;
}

figure.keyboard figcaption dd ul li+li::before {
    content: ", ";
}

figure.key-details {
    width: 100%;
    font-size: 0.7rem;
}

span.exemplar.error {
    background: red;
}

summary > p {
    display: inline-block;
    margin: 0;
}

details.keymap table {
    margin: 0;
}

details.keymap table th, details.keymap table td,
.key-details table th, .key-details table td {
    line-height: 1.1;
    padding: 0.3rem;
}

details.keymap table td, .key-details table td {
    text-align: start;
    font-size: 0.7rem;
}

details.keymap table td ul, .key-details table td ul {
    margin: 0;
}

dt {
    font-weight: bold;
}

object[data-layout] {
    /* Fix white background */
    color-scheme: light;
    border: none;
}