@font-face {
  font-family: Montserrat;
  src: url("assets/fonts/montserrat-semibold.ttf") format("truetype");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: Montserrat;
  src: url("assets/fonts/montserrat-bold.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "PT Sans";
  src: url("assets/fonts/pt-sans-regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
:root {
  --gold: #c6a257;
  --navy: #062847;
  --white: #fff;
  --muted: #526272;
  --error: #a12b27;
  color: var(--navy);
  background: var(--white);
  font-family: "PT Sans", Arial, sans-serif;
  font-synthesis: none;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; }
.widget { max-width: 760px; margin: 0 auto; padding: 24px 20px 20px; text-align: center; }
h1 { margin: 0; font: 700 clamp(22px, 4.5vw, 30px)/1.3 Montserrat, Arial, sans-serif; }
h1, .description { white-space: pre-wrap; overflow-wrap: anywhere; }
.description { max-width: 640px; margin: 16px auto 0; font-size: 18px; line-height: 1.55; }
.image-container { margin: 24px auto 0; }
.image-container img { display: block; width: auto; height: auto; max-width: 100%; max-height: 320px; object-fit: contain; margin: 0 auto; }
.image-error { padding: 24px 12px; margin: 0; background: #f2f4f5; color: var(--muted); }
.answers { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 28px; }
.answer { position: relative; min-width: 0; cursor: pointer; }
.answer input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.answer-face { position: relative; display: flex; align-items: center; justify-content: center; min-height: 60px; padding: 16px 38px; border: 2px solid var(--gold); border-radius: 5px; background: var(--white); font: 600 18px/1.3 Montserrat, Arial, sans-serif; }
.check { position: absolute; right: 16px; visibility: hidden; font: 700 20px/1 Arial, sans-serif; }
.answer input:checked + .answer-face { background: var(--gold); }
.answer input:checked + .answer-face .check { visibility: visible; }
.answer input:focus-visible + .answer-face { outline: 3px solid var(--navy); outline-offset: 4px; }
.answer input:disabled + .answer-face { opacity: .5; cursor: wait; }
@media (hover: hover) { .answer:hover input:not(:checked):not(:disabled) + .answer-face { background: #faf6ed; } }
.error, .status { margin: 16px 0 0; font-size: 16px; line-height: 1.4; overflow-wrap: anywhere; }
.error { color: var(--error); }
.status { color: var(--muted); }
@media (max-width: 400px) {
  .widget { padding: 20px 12px 16px; }
  .description { font-size: 17px; }
  .answers { gap: 12px; margin-top: 24px; }
  .answer-face { min-height: 56px; padding: 14px 30px; font-size: 16px; }
  .check { right: 10px; }
}