*{
    box-sizing:border-box;
}

body{
    margin:0;
    padding:20px;
    background:#f3f3f3;
    color:#222;
    font-family:Arial,Helvetica,sans-serif;
}

.box{
    max-width:800px;
    margin:40px auto;
    background:#fff;
    border:1px solid #ddd;
    padding:25px;
}

h1{
    margin-top:0;
}

h2{
    margin-top:30px;
    font-size:18px;
}

input{
    width:100%;
    padding:12px;
    border:1px solid #ccc;
    font-family:monospace;
    font-size:16px;
    margin-bottom:10px;
}

button{
    padding:10px 18px;
    border:1px solid #bbb;
    background:#eee;
    cursor:pointer;
    margin-right:5px;
}

button:hover{
    background:#ddd;
}

.result{
    background:#f7f7f7;
    border:1px solid #ddd;
    padding:10px;
    font-family:monospace;
}

.result div{
    padding:6px;
    border-bottom:1px solid #eee;
}

pre{
    background:#f5f5f5;
    border:1px solid #ddd;
    padding:15px;
    overflow:auto;
    font-family:monospace;
}

.grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
}



@media(max-width:600px){

    body{
        padding:10px;
    }

    .box{
        margin:10px auto;
        padding:15px;
    }

    .grid{
        grid-template-columns:1fr;
    }

}

}