.poll-header { padding: 24px 20px 21px; text-align: center; background: var(--mural); border-bottom: 1px solid var(--line); }
.poll-wordmark { font: 42px / 1.1 var(--script); color: var(--rust); }
.poll-header nav { display: flex; justify-content: center; flex-wrap: wrap; gap: 24px; margin-top: 15px; font: 13px / 1.4 Arial, sans-serif; }
.poll-header nav a { padding: 8px 0; }
.poll-shell { max-width: 880px; margin: auto; padding: 54px 24px 62px; }
.poll-introduction { max-width: 650px; margin: auto; text-align: center; }
.poll-eyebrow { font: 11px / 1.6 Arial, sans-serif; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); }
.poll-introduction h1 { font: 57px / 1 var(--display); margin: 15px 0 23px; font-weight: 500; }
.poll-introduction h1 em { color: var(--rust); font-weight: 400; }
.poll-introduction > p:not(.poll-eyebrow) { font-size: 18px; line-height: 1.6; }
.poll-introduction .poll-scale { font: 12px / 1.7 Arial, sans-serif; color: var(--muted); }
.poll-scale span { margin: 0 9px; }
.poll-preview { background: #f3e7d8; border: 1px solid #cbb79d; border-radius: 8px; padding: 14px 18px; margin: 30px 0 24px; font: 13px / 1.65 Arial, sans-serif; color: #5d4838; }
.name-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.name-card { background: #f8f7f1; border: 1px solid var(--line); border-radius: 12px; padding: 25px 18px 20px; text-align: center; box-shadow: 0 3px 10px #344c6508; min-width: 0; }
.name-rating { border: 0; margin: 0; padding: 0; min-width: 0; width: 100%; }
.name-rating legend { font: 35px / 1.2 var(--display); padding: 0; text-align: center; width: 100%; overflow-wrap: anywhere; }
.stars { display: flex; justify-content: center; margin-top: 15px; gap: 2px; }
.star-choice { position: relative; display: grid; place-items: center; width: 46px; height: 48px; cursor: pointer; border-radius: 6px; }
.star-choice input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.star-choice span { font: 34px / 1 Arial, sans-serif; color: #929daa; }
.star-choice.is-filled span { color: #ad602d; }
.star-choice:has(input:focus-visible) { outline: 2px solid var(--rust); outline-offset: 2px; }
.star-choice:hover { background: #e9dfcf; }
.name-selection { color: var(--muted); font: 12px / 1.6 Arial, sans-serif; min-height: 20px; margin: 13px 0 6px; }
.clear-rating { padding: 8px 12px; background: none; border: 0; text-decoration: underline; color: var(--muted); font: 12px Arial, sans-serif; }
.clear-rating:disabled { cursor: default; opacity: .55; text-decoration: none; }
.poll-status { font: 13px / 1.6 Arial, sans-serif; text-align: center; padding: 12px 0; }
.poll-update-note { text-align: center; font-size: 17px; line-height: 1.5; margin: 17px 0 27px; }
.poll-home-link { display: block; width: fit-content; margin: auto; text-decoration: underline; font: 13px / 1.5 Arial, sans-serif; padding: 10px; }
.poll-error { padding: 22px; border: 1px solid var(--rust); font: 14px / 1.7 Arial, sans-serif; }
.poll-footer { text-align: center; padding: 29px 20px; background: #d8e2d4; border-top: 1px solid #b0c0b0; }
.poll-footer > span { font: 28px var(--script); }
.poll-footer > p { font: 11px Arial, sans-serif; color: var(--muted); margin-top: 16px; }
@media (max-width: 580px) {
  .poll-wordmark { font-size: 34px; }
  .poll-header nav { gap: 18px; }
  .poll-shell { padding: 35px 18px 40px; }
  .poll-introduction h1 { font-size: 45px; }
  .poll-introduction > p:not(.poll-eyebrow) { font-size: 17px; }
  .name-grid { grid-template-columns: 1fr; }
  .name-card { padding-top: 22px; }
}