:where([autocomplete=one-time-code]) {
    --otp-digits: 6;
    --otp-ls: 1.5ch;
    --otp-gap: 1.25;
    --_otp-bgsz: calc(var(--otp-ls) + 1ch);
    --_otp-digit: 0;

    all: unset;
    background:
        linear-gradient(90deg,
        var(--otp-bg, #EEE) calc(var(--otp-gap) * var(--otp-ls)),
        transparent 0),
        linear-gradient(90deg,
        var(--otp-bg, #EEE) calc(var(--otp-gap) * var(--otp-ls)),
        transparent 0
        );
    /* background-position: calc(var(--_otp-digit) * var(--_otp-bgsz)) 57, 0 57; */
    background-position: 0px 55px;
    background-repeat: no-repeat, repeat-x;
    background-size: var(--_otp-bgsz) 100%;
    caret-color: var(--otp-cc, #222);
    caret-shape: block;
    clip-path: inset(0% calc(var(--otp-ls) / 2) 0% 0%);
    font-family: ui-monospace, monospace;
    font-size: var(--otp-fz, 2.5em);
    inline-size: calc(var(--otp-digits) * var(--_otp-bgsz));
    letter-spacing: var(--otp-ls);
    padding-block: var(--otp-pb, 0.25ch);
    padding-inline-start: calc(((var(--otp-ls) - 1ch) / 2) * var(--otp-gap));
}

@media only screen and (max-width:767px) {
    :where([autocomplete=one-time-code]) {
        --otp-ls: 1.5ch;
        background-position: 0px 46px;
        font-size: var(--otp-, 2.1em);
    }
}