.sy-quiz { --quiz-green: #294e49; --quiz-line: #d5dcd2; margin: 48px 0; padding: clamp(22px, 4vw, 40px); border: 1px solid var(--quiz-line); border-radius: 16px; background: #fff; color: #3e3e3e; font-family: var(--sy-text, system-ui, sans-serif); font-size: 18px; line-height: 1.8; }
.sy-quiz [hidden] { display: none !important; }
.sy-quiz-intro { display: flex; align-items: center; gap: 28px; }
.sy-quiz-companion { flex: 0 0 auto; width: 150px; height: 170px; object-fit: contain; }
.sy-quiz-intro-copy { flex: 1; min-width: 0; }
.sy-quiz :is(h2,h3,h4,p) { margin: 0 0 14px; }
.sy-quiz :is(h2,h3,h4) { line-height: 1.6; }
.sy-quiz h2 { color: var(--quiz-green); font-size: 28px; }
.sy-quiz h3 { font-size: 24px; }
.sy-quiz h4 { font-size: 19px; }
.sy-quiz-kicker { display: block; color: #795739; font-size: 15px; letter-spacing: .12em; margin-bottom: 10px; }
.site-public .sy-quiz button { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; width: fit-content; max-width: 100%; min-width: 0; min-height: 40px; padding: 6px 12px; font-family: inherit; font-size: 16px; line-height: 1.5; border-radius: 8px; cursor: pointer; }
.sy-quiz .sy-quiz-primary { background: var(--quiz-green); color: #fff; border: 2px solid var(--quiz-green); font-weight: 600; }
.sy-quiz .sy-quiz-primary { transition: background-color .2s ease, border-color .2s ease, color .2s ease; }
.sy-quiz .sy-quiz-primary:is(:hover,:focus-visible,:active):not(:disabled) { background: #f5eddc; border-color: #b08a43; color: #87651f; }
.sy-quiz button:disabled { opacity: .55; cursor: default; }
.sy-quiz :is(button,input):focus-visible { outline: 3px solid #a77328; outline-offset: 4px; }
.sy-quiz-load { color: #646a61; font-size: 15px; padding-top: 12px; }
.sy-quiz .sy-quiz-preview-note { margin: 24px 0 0; padding-top: 15px; border-top: 1px solid var(--quiz-line); color: #646a61; font-size: 14px; }
.sy-quiz-instruction { color: #646a61; }
.sy-quiz-progress { color: var(--quiz-green); font-size: 16px; padding: 8px 0 18px; }
.sy-quiz-question { min-width: 0; margin: 0 0 28px; padding: 0; border: 0; }
.sy-quiz-question legend { float: none; width: 100%; padding: 0; margin-bottom: 14px; color: #343e38; font-weight: 600; font-size: 19px; }
.sy-quiz-option { display: flex; align-items: center; gap: 12px; padding: 14px 18px; margin: 10px 0; border: 1px solid var(--quiz-line); border-radius: 9px; cursor: pointer; background: #fff; }
.sy-quiz-option:hover { background: #f6f8f5; border-color: #81978a; }
.sy-quiz-option:has(input:checked) { background: #edf3ed; border: 2px solid var(--quiz-green); padding: 13px 17px; }
.sy-quiz .sy-quiz-option input[type=radio], .sy-quiz .sy-quiz-review-check input[type=checkbox] { appearance: auto; box-sizing: border-box; display: block; flex: 0 0 20px; align-self: center; width: 20px; height: 20px; min-width: 0; min-height: 0; padding: 0; margin: 0; border: 0; accent-color: var(--quiz-green); }
.sy-quiz-option span { flex: 1; min-width: 0; }
.sy-quiz-question.is-missing { padding-left: 15px; border-left: 3px solid #a45d39; }
.sy-quiz-error { color: #9b432b; }
.sy-quiz-result-banner { display: flex; align-items: center; gap: 24px; background: #f5f7f2; border-radius: 12px; padding: 24px; margin-bottom: 22px; }
.sy-quiz-result-banner img { flex: 0 0 auto; object-fit: contain; width: 120px; height: 130px; }
.sy-quiz .sy-quiz-score { font-size: 22px; color: var(--quiz-green); font-weight: 600; }
.sy-quiz-summary { min-width: 0; }
.sy-quiz-summary p:last-child { margin-bottom: 0; }
.sy-quiz-completion { padding: 14px 18px; background: #edf3ed; border-radius: 8px; color: var(--quiz-green); }
.sy-quiz-review-heading { margin-top: 28px !important; }
.sy-quiz-answer { padding: 22px 0; border-bottom: 1px solid var(--quiz-line); }
.sy-quiz-answer-label { font-size: 15px; color: #b42318; font-weight: 600; }
.sy-quiz-answer.is-incorrect .sy-quiz-answer-label { color: #000; }
.sy-quiz-your-answer { color: #646a61; font-size: 16px; }
.sy-quiz .is-correct .sy-quiz-your-answer { color: #795739; }
.sy-quiz-correct-answer { color: #795739; font-size: 16px; font-weight: 600; }
.sy-quiz .sy-quiz-selected-wrong { text-decoration: line-through; text-decoration-thickness: 1px; }
.sy-quiz .sy-quiz-correct-answer-label { color: #b42318; }
.sy-quiz .sy-quiz-correct-answer-text { text-decoration: underline; text-decoration-skip-ink: none; text-underline-offset: .2em; text-decoration-thickness: 1px; }
.sy-quiz-review-check { display: flex; align-items: center; gap: 10px; background: #faf7f0; padding: 12px 16px; border-radius: 8px; cursor: pointer; }
.sy-quiz-review-check span { flex: 1; min-width: 0; }
.sy-quiz-review-check:has(input:disabled) { cursor: default; }
.sy-quiz-finish { padding-top: 24px; }
.sy-quiz-heading { scroll-margin-top: 110px; }
.sy-quiz-retry { background: white; color: var(--quiz-green); border: 1px solid var(--quiz-line); }
@media (max-width: 600px) {
  .sy-quiz-intro { flex-direction: column; gap: 16px; text-align: center; }
  .sy-quiz-companion { width: 110px; height: 126px; }
  .sy-quiz-intro-copy { width: 100%; }
  .sy-quiz { margin: 32px 0; padding: 22px 16px; font-size: 17px; }
  .sy-quiz h2 { font-size: 25px; }
  .sy-quiz h3 { font-size: 22px; }
  .sy-quiz-question legend, .sy-quiz h4 { font-size: 18px; }
  .sy-quiz-option { padding: 13px 12px; gap: 10px; }
  .sy-quiz-option:has(input:checked) { padding: 12px 11px; }
  .sy-quiz-result-banner { flex-direction: column; gap: 14px; padding: 20px 16px; align-items: flex-start; }
  .sy-quiz-result-banner img { width: 92px; height: 102px; }
  .sy-quiz .sy-quiz-score { font-size: 20px; }
}
@media (pointer: coarse) {
  .site-public .sy-quiz button { min-height: 44px; }
}