.bit-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.bit-field {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.bit-input {
    width: 100%;
    max-width: 300px;
    padding: 0.5rem;
}

.digit-container {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-top: 0.25rem;
}

.bit-field-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}

#field-b {
    margin-top: 1.5rem;
}


.base-row,
.op-row,
.button-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    margin-top: 0.25rem;
}

.base-row button,
.op-row button {
    min-width: 2rem;
}

.op-row button.active,
.base-row button.active {
    background-color: var(--color-accent);
    color: #fff;
}

.result-group {
    margin-top: 1.5rem;
}

.result-label {
    font-weight: bold;
    margin-right: 0.5rem;
}

@media (min-width: 700px) {
    .bit-field-group {
        flex-direction: row;
        justify-content: center;
        align-items: flex-start;
    }
    #field-b {
        margin-top: 0;
    }
}