.rng-box{
    width:100%;
    max-width:720px;
    margin:24px auto;
    padding:26px 22px;
    box-sizing:border-box;
    text-align:center;
    border:1px solid #e7e7e7;
    border-radius:14px;
    background:#fff;
    box-shadow:0 6px 24px rgba(0,0,0,.06);
}
.rng-name{
    min-height:58px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:12px 10px;
    margin-bottom:18px;
    font-size:24px;
    line-height:1.35;
    font-weight:700;
    color:#222;
}
.rng-button{
    appearance:none;
    border:0;
    border-radius:10px;
    padding:13px 24px;
    font-size:16px;
    line-height:1.2;
    font-weight:700;
    cursor:pointer;
    color:#fff;
    background:#2563eb;
    transition:transform .15s ease, opacity .15s ease;
}
.rng-button:hover{transform:translateY(-1px);opacity:.94}
.rng-button:active{transform:translateY(0)}
.rng-button:focus-visible{outline:3px solid rgba(37,99,235,.25);outline-offset:3px}
.rng-button:disabled{cursor:wait;opacity:.65}
@media(max-width:600px){
    .rng-box{padding:20px 16px}
    .rng-name{font-size:20px}
    .rng-button{width:100%}
}