:root { color: #142033; background: #f3f6fa; font-family: 'DM Sans', sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; }
main { width: min(960px, calc(100% - 32px)); margin: 56px auto 80px; }
.masthead { border-top: 5px solid #b22f35; padding: 34px 36px 30px; background: #fff; box-shadow: 0 12px 35px rgba(20,32,51,.08); }
.eyebrow { display: block; color: #b22f35; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
h1, h2 { margin: 8px 0 0; line-height: 1.08; }
h1 { font: 700 clamp(2.25rem, 6vw, 4.4rem)/1.02 'Playfair Display', serif; }
h2 { font-size: clamp(1.35rem, 3vw, 2rem); }
p { font-size: 1.05rem; line-height: 1.6; }
.question, .results { margin-top: 24px; padding: 32px 36px; background: #fff; box-shadow: 0 12px 35px rgba(20,32,51,.08); }
.rules { color: #526174; }
form { max-width: 590px; }
input[type=text], input:not([type]) { width: 100%; margin: 8px 0 22px; padding: 14px; border: 1px solid #c7d0db; border-radius: 4px; font: inherit; }
fieldset { border: 0; padding: 0; margin: 0 0 24px; }
legend { margin-bottom: 10px; font-weight: 700; }
.choice { display: flex; gap: 12px; align-items: center; margin: 10px 0; padding: 14px 16px; border: 1px solid #d8dfe8; cursor: pointer; }
.choice:has(input:checked) { border-color: #b22f35; background: #fff6f6; }
.choice input { accent-color: #b22f35; transform: scale(1.15); }
button { border: 0; border-radius: 3px; padding: 14px 22px; background: #b22f35; color: #fff; cursor: pointer; font: 700 1rem inherit; }
button:disabled { opacity: .6; cursor: wait; }
#status { min-height: 1.4em; font-size: .95rem; }
.error { color: #a31e2d; }.success { color: #167346; }
.results-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 22px; }
.total { font-weight: 700; color: #526174; white-space: nowrap; }.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; min-width: 540px; } th, td { padding: 14px 12px; text-align: left; border-bottom: 1px solid #e0e6ed; } th { color: #526174; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; }.empty { color: #526174; text-align: center; }
@media (max-width: 640px) { main { width: min(100% - 20px, 960px); margin-top: 20px; }.masthead, .question, .results { padding: 26px 20px; } }