body {
    margin: 20px;
    color: #222;
    background: #fff;
    font-family: Arial, sans-serif;
    line-height: 1.5;
}

main { max-width: 850px; margin: auto; }
h1 { font-size: 26px; }
h2 { font-size: 20px; }
table { width: 100%; border-collapse: collapse; }
th, td { border: 1px solid #999; padding: 12px; text-align: left; }
thead { background: #eee; }
label { display: block; margin-top: 8px; }
input, select { box-sizing: border-box; width: 100%; max-width: 220px; padding: 6px; font: inherit; }
button { padding: 7px 12px; cursor: pointer; }
button:disabled { cursor: wait; }
pre { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; }

@media (max-width: 500px) {
    body { margin: 10px; }
    th, td { padding: 6px; }
    button { padding: 6px; }
}