:root { color-scheme: light; font: 17px/1.6 system-ui, sans-serif; color: #172b42; background: #f4f7fa; }
body { margin: 0; padding: 3rem 1rem; } main { max-width: 680px; margin: auto; padding: 2rem; background: white; border: 1px solid #d5dde6; border-radius: 12px; }
h1 { line-height: 1.2; margin: 1rem 0; } h2 { font-size: 1.25rem; } label { display: block; font-weight: 600; } input { box-sizing: border-box; width: 100%; padding: .75rem; margin: .5rem 0 1rem; border: 1px solid #8295aa; border-radius: 5px; font: inherit; }
button { padding: .65rem .9rem; border: 1px solid #244c77; border-radius: 5px; background: #244c77; color: white; font: inherit; cursor: pointer; } button:focus-visible, input:focus-visible { outline: 3px solid #b3570a; outline-offset: 3px; }
.topics { display: flex; flex-wrap: wrap; gap: .5rem; } .topics button, #sign-out { color: #244c77; background: white; } .preview { color: #63451f; background: #fff3da; padding: .5rem .75rem; border-radius: 5px; font-size: .85rem; } .note { font-size: .85rem; color: #50657b; } #message { min-height: 1.6em; } #sign-out { margin-top: 1rem; } [hidden] { display: none !important; }
@media (max-width: 500px) { body { padding: 1rem .5rem; } main { padding: 1.2rem; } }
input[type="checkbox"] { width: auto; margin-right: .5rem; } #offer { border-block: 1px solid #d5dde6; padding-block: 1rem; margin-block: 1rem; }