.root {
    max-width: 470px;
    font-size: 18px;
    line-height: 1.4;
}
.item {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}
.label {
    flex: 0 0 170px;
    margin-right: 10px;
}
.input {
    color: inherit;
}
.itemActive .input,
.input:focus {
    outline: 1px dotted;
    outline-offset: 0;
}
.itemDisabled {
    color: #888;
}
.inputContainer {
    width: 100%;
}
.range {
    -webkit-appearance: none;
    width: 100%;
    margin: 0;
    padding: 16px 0;
    background: transparent;
}
.range::-webkit-slider-thumb {
    -webkit-appearance: none;
    border: 1px solid;
    height: 34px;
    width: 12px;
    background: #000;
    cursor: pointer;
    margin-top: -16px;
}
.range::-webkit-slider-runnable-track {
    width: 100%;
    height: 2px;
    cursor: pointer;
    background: currentColor;
}
.warning {
    font-style: italic;
    color: #ffb8b3;
}
.output {
    flex: 0 0 40px;
    margin-left: 10px;
}