.quiz-page { max-width: 1240px; --quiz-ink: #173b33; --quiz-muted: #63756d; --quiz-border: #dce4dd; }
.quiz-page [hidden] { display: none !important; }
.quiz-page .quiz-intro { max-width: none; display: grid; grid-template-columns: 1.6fr 1fr; gap: 60px; align-items: center; padding: 52px 0 30px; }
.quiz-intro h1 { font-size: clamp(36px, 4vw, 54px); line-height: 1.1; letter-spacing: -.035em; margin: 16px 0 20px; }
.quiz-intro p { max-width: 62ch; }
.quiz-intro .eyebrow { font-size: 10px; letter-spacing: .14em; }
.quiz-intro-links { display: flex; flex-wrap: wrap; gap: 12px 24px; font-size: 13px; }
.quiz-bank-count { padding-left: 40px; border-left: 1px solid #cfd9ce; display: grid; gap: 8px; }
.quiz-bank-count strong { font-size: 76px; font-weight: 500; letter-spacing: -.06em; line-height: 1; }
.quiz-bank-count span { font-size: 15px; color: var(--quiz-ink); }
.quiz-bank-count small { font-size: 12px; color: var(--quiz-muted); }
.quiz-panel { background: #fff; border: 1px solid var(--quiz-border); border-radius: 18px; padding: clamp(22px, 3vw, 36px); margin: 24px 0; scroll-margin-top: 110px; box-shadow: 0 5px 24px #18372d04; }
.quiz-panel h2 { font-family: var(--sans); font-size: 27px; letter-spacing: -.025em; line-height: 1.3; margin: 4px 0 12px; }
.quiz-panel h3 { font-family: var(--sans); line-height: 1.4; }
.quiz-section-head, .quiz-actions, .quiz-review-links { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; }
.quiz-section-head { justify-content: space-between; margin-bottom: 26px; }
.quiz-section-head .eyebrow { margin: 0 0 8px; font-size: 10px; }
.quiz-fields { display: grid; grid-template-columns: minmax(220px, 1.65fr) repeat(3, minmax(120px, 1fr)); gap: 18px; }
.quiz-page label:not(.quiz-option):not(.quiz-check):not(.quiz-file-label) { display: grid; gap: 9px; font-size: 12px; font-weight: 600; }
.quiz-page label small { color: var(--quiz-muted); font-size: 11px; line-height: 1.6; font-weight: 400; }
.quiz-page select, .quiz-page input[type=search], .quiz-page input[type=number] { background: #fafcf9; color: var(--quiz-ink); width: 100%; min-width: 0; border: 1px solid #ccd8ce; border-radius: 8px; padding: 12px; font: 13px var(--sans); min-height: 44px; }
.quiz-page input:disabled { opacity: .6; }
.quiz-page input[type=checkbox], .quiz-page input[type=radio] { accent-color: #234f41; width: 18px; height: 18px; flex: 0 0 18px; margin: 2px 0 0; }
.quiz-preferences { border: 0; border-top: 1px solid var(--quiz-border); padding: 20px 0 0; margin: 28px 0 0; }
.quiz-preferences legend { padding: 0 12px 0 0; font: 600 12px var(--sans); color: var(--quiz-ink); }
.quiz-settings-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 22px; }
.quiz-setup-footer { display: flex; gap: 24px; align-items: center; justify-content: space-between; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--quiz-border); }
.quiz-check { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; margin: 0; }
#quiz-pool { font-size: 12px; color: var(--quiz-muted); margin: 8px 0 0; }
.quiz-fine, .quiz-progress-tools p { font-size: 13px; color: var(--quiz-muted); line-height: 1.65; }
.quiz-page .button { border-radius: 8px; font: 600 13px var(--sans); min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 12px 18px; gap: 8px; text-decoration: none; white-space: nowrap; }
.quiz-page button, .quiz-file-label { cursor: pointer; font: inherit; }
.quiz-page button:disabled { opacity: .48; cursor: not-allowed; }
.quiz-page :focus-visible { outline: 3px solid #ba703e; outline-offset: 3px; }
.quiz-text-button { border: 0; border-radius: 4px; background: transparent; color: #285443; text-decoration: underline; text-underline-offset: 3px; padding: 10px 0; text-align: left; font-size: 13px !important; }
.quiz-notice { background: #fff0d5; border: 1px solid #b57527; padding: 14px 18px; border-radius: 8px; }
#quiz-message:empty { display: none; }
#quiz-message:not(:empty) { border-left: 3px solid #65765f; padding: 10px 16px; background: #e9eee3; }
.quiz-page progress { accent-color: #436e50; border-radius: 8px; overflow: hidden; background: #e3eae2; border: 0; }
.quiz-page progress::-webkit-progress-bar { background: #e3eae2; }
.quiz-page progress::-webkit-progress-value { background: #3f775e; border-radius: 8px; transition: width .24s linear; }
.quiz-page progress::-moz-progress-bar { background: #3f775e; }
body.quiz-active { overflow: hidden; }
body.quiz-active > .masthead, body.quiz-active > .footer, body.quiz-active .quiz-intro, body.quiz-active #stats, body.quiz-active .quiz-progress-tools, body.quiz-active #quiz-message { display: none; }
body.quiz-active #quiz-storage-warning { position: fixed; bottom: 108px; left: 20px; right: 20px; z-index: 1001; font-size: 12px; }
.quiz-player { --quiz-gutter: max(20px, calc((100vw - 1200px) / 2)); position: fixed; inset: 0; z-index: 1000; background: #f0f3ef; display: flex; flex-direction: column; gap: 12px; overflow-y: auto; overscroll-behavior: contain; scroll-padding: 166px 0 98px; padding: 0 var(--quiz-gutter) 98px; color: var(--quiz-ink); }
.quiz-player-top { position: sticky; top: 0; z-index: 3; flex: none; display: grid; gap: 10px; padding: 12px 0 10px; background: #f0f3ef; }
.quiz-player-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
.quiz-player-brand, .quiz-player-tools { display: flex; align-items: center; gap: 16px; }
.quiz-player-tools { margin-left: auto; }
.quiz-player-brand > img { display: block; width: 32px; height: 32px; flex: 0 0 auto; }
.quiz-player-brand strong { font-size: 14px; font-weight: 600; display: block; }
.quiz-player-brand small { font-size: 11px; color: var(--quiz-muted); display: block; }
.quiz-live-stats { display: grid; grid-template-columns: 1.4fr .65fr .7fr .8fr 1.2fr; gap: 20px; padding: 10px 18px; background: #fff; border: 1px solid var(--quiz-border); border-radius: 12px; align-items: center; }
.quiz-live-stats small { display: block; color: var(--quiz-muted); font-size: 10px; letter-spacing: .025em; margin-bottom: 5px; }
.quiz-live-stats strong { font: 500 20px/1.15 var(--sans); font-variant-numeric: tabular-nums; letter-spacing: -.03em; }
#quiz-progress { font-size: 12px; font-weight: 600; }
#quiz-meter { display: block; width: 100%; height: 5px; margin-top: 10px; }
#quiz-timebar { display: block; width: 100%; height: 5px; margin-top: 10px; }
#quiz-time-note { color: var(--quiz-muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.quiz-time-low .quiz-clock, .quiz-time-low #quiz-time-note { color: #a85127; }
.quiz-time-low #quiz-timebar::-webkit-progress-value { background: #bb6837; }
.quiz-time-low #quiz-timebar::-moz-progress-bar { background: #bb6837; }
.quiz-workspace { flex: 1 0 auto; min-width: 0; }
.quiz-question-card, .quiz-review-pane { min-width: 0; min-height: 0; background: #fff; border: 1px solid var(--quiz-border); border-radius: 16px; }
.quiz-question-card { padding: 24px 30px; }
.quiz-question-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 11px; margin-bottom: 14px; }
.quiz-question-meta > a { margin-right: auto; text-decoration: none; font-weight: 600; }
.quiz-tag { border: 1px solid #dbe4da; border-radius: 5px; padding: 3px 7px; color: var(--quiz-muted); text-transform: capitalize; font-size: 10px; }
#quiz-heading { font: 550 clamp(19px, 2vw, 24px)/1.48 var(--sans); letter-spacing: -.02em; white-space: pre-line; margin: 0 0 14px; }
#quiz-answer-instructions { color: var(--quiz-muted); font-size: 12px; margin: 0 0 14px; }
.quiz-options { border: 0; padding: 0; margin: 0; display: grid; gap: 9px; min-width: 0; }
.quiz-option { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 14px; align-items: start; border: 2px solid #e0e7de; border-radius: 10px; padding: 11px 16px; cursor: pointer; line-height: 1.55; font-size: 14px; transition: background .16s, border-color .16s, box-shadow .16s; }
.quiz-option:hover:not(:has(input:disabled)) { border-color: #b2c7b7; background: #fafcf9; }
.quiz-option input { position: absolute; opacity: 0; width: 1px !important; height: 1px !important; }
.quiz-choice-letter { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid #d3ddd2; border-radius: 50%; font: 500 12px var(--sans); color: #67786c; background: #fff; }
.quiz-option:has(input[type=checkbox]) .quiz-choice-letter { border-radius: 7px; }
.quiz-choice-text { align-self: center; }
.quiz-option:focus-within { outline: 3px solid #ba703e; outline-offset: 2px; }
.quiz-option.is-selected { border-color: #436f59; background: #f0f6ee; box-shadow: 0 0 0 1px #436f5910; }
.quiz-option.is-selected .quiz-choice-letter { background: #315c47; color: #fff; border-color: #315c47; }
.quiz-option.is-correct { border-color: #4c8061; background: #eff7ef; }
.quiz-option.is-incorrect { border-color: #b7764a; background: #fff7ef; }
.quiz-choice-verdict { grid-column: 2; color: #4d6657; font-size: 10px; margin-top: -8px; }
.quiz-option:has(input:disabled) { cursor: default; }
.quiz-review-pane { background: #fafcf8; }
.quiz-review-heading { padding: 21px 23px 16px; border-bottom: 1px solid var(--quiz-border); }
.quiz-review-heading .eyebrow { font-size: 9px; letter-spacing: .1em; color: var(--quiz-muted); }
.quiz-review-heading h2 { font: 600 16px var(--sans); margin: 6px 0 0; letter-spacing: -.02em; }
.quiz-feedback-placeholder { align-self: center; text-align: center; padding: 32px; color: var(--quiz-muted); }
.quiz-feedback-placeholder h3 { font: 600 16px var(--sans); color: var(--quiz-ink); margin: 18px 0 10px; }
.quiz-feedback-placeholder p { font-size: 13px; line-height: 1.75; }
.quiz-lock { display: inline-grid; place-items: center; width: 48px; height: 48px; border: 1px solid #d4dfcf; border-radius: 14px; color: #6b826c; font-size: 32px; background: #edf3e9; }
.quiz-feedback { padding: 24px 30px; font-size: 15px; line-height: 1.75; }
.quiz-feedback h3 { font: 600 19px var(--sans); margin: 0 0 14px; color: #316645; }
.quiz-feedback.incorrect h3 { color: #a4552f; }
.quiz-explanation-content { animation: quiz-reveal .18s ease-out; }
.quiz-explanations { padding-left: 22px; list-style: upper-alpha; }
.quiz-explanations li { margin: 22px 0; padding-left: 4px; }
.quiz-explanations strong { font-size: 10px; letter-spacing: .03em; text-transform: uppercase; color: var(--quiz-muted); }
.quiz-explanations .right-choice strong { color: #346745; }
.quiz-explanations p { margin: 5px 0; }
.quiz-review-links { align-items: start; flex-direction: column; gap: 10px; padding-top: 18px; border-top: 1px solid var(--quiz-border); margin-top: 22px; }
.quiz-review-links strong { font-size: 11px; }
.quiz-sources { margin-top: 20px; font-size: 11px; overflow-wrap: anywhere; }
.quiz-player-footer { position: fixed; z-index: 4; bottom: 0; left: 0; right: 0; display: grid; grid-template-columns: minmax(180px, 1fr) auto; gap: 8px 18px; align-items: center; min-height: 76px; padding: 12px var(--quiz-gutter); background: #f0f3ef; border-top: 1px solid var(--quiz-border); box-shadow: 0 -6px 16px #173b3305; }
#quiz-answer-message { font-size: 12px; color: var(--quiz-muted); margin: 0; min-height: 36px; display: flex; align-items: center; }
.quiz-footer-buttons { display: flex; gap: 10px; }
.quiz-footer-buttons > button { min-width: 120px; }
#quiz-submit { min-width: 156px; }
.quiz-navigator { position: relative; font-size: 12px; }
.quiz-navigator summary { list-style: none; border: 1px solid #ccd8ce; border-radius: 8px; padding: 11px 14px; min-height: 44px; background: #fff; cursor: pointer; }
.quiz-navigator summary::-webkit-details-marker { display: none; }
.quiz-navigator summary span { margin-left: 10px; }
.quiz-nav-popup { position: absolute; right: 0; top: 52px; z-index: 6; width: min(400px, 85vw); max-height: 40vh; overflow-y: auto; padding: 16px; border: 1px solid #ccd8ce; border-radius: 10px; background: #fff; box-shadow: 0 10px 36px #173b3322;  }
.quiz-navigator nav { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.quiz-nav-popup > p { font-size: 10px; margin: 12px 0 0; }
.quiz-number { min-height: 38px; border: 1px solid #cad8c8; background: #fff; color: #355442; border-radius: 6px; font-size: 12px !important; }
.quiz-number[data-status=answered], .quiz-number[data-status=correct] { background: #e5f0df; border-color: #7b9c75; }
.quiz-number[data-status=incorrect] { background: #fff0e3; border-color: #c79673; }
.quiz-number[aria-current] { outline: 2px solid #244e3c; outline-offset: 1px; }
.quiz-pane-tabs { display: flex; gap: 6px; }
.quiz-pane-tabs button { background: transparent; color: #5b7063; border: 1px solid transparent; border-radius: 6px; padding: 10px 12px; min-height: 40px; font: 500 12px var(--sans); }
.quiz-pane-tabs button[aria-pressed=true] { background: #fff; border-color: var(--quiz-border); color: var(--quiz-ink); }
.quiz-page dialog { max-width: 500px; border: 1px solid #b4c4ae; border-radius: 16px; padding: 30px; background: #fff; color: var(--quiz-ink); z-index: 2000; }
.quiz-page dialog h2 { font: 600 24px var(--sans); margin: 0 0 16px; }
.quiz-page dialog p { font-size: 14px; line-height: 1.7; }
.quiz-page dialog::backdrop { background: #10271a99; backdrop-filter: blur(3px); }
#quiz-result-review { margin-top: 32px; }
.quiz-result-answer { padding: 18px 0; border-top: 1px solid var(--quiz-border); font-size: 14px; }
.quiz-result-answer summary { cursor: pointer; font-weight: 550; line-height: 1.6; }
.quiz-result-answer .quiz-explanation-content { margin-top: 20px; padding: 24px; border-radius: 10px; background: #f5f8f2; }
@keyframes quiz-reveal { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 950px) {
  .quiz-question-card { padding: 24px; }
  .quiz-live-stats { gap: 16px; }
}
@media (max-width: 760px) {
  .quiz-page .quiz-intro { grid-template-columns: 1fr; gap: 24px; padding-top: 32px; }
  .quiz-bank-count { display: none; }
  .quiz-fields, .quiz-settings-grid { grid-template-columns: 1fr 1fr; }
  .quiz-player { --quiz-gutter: 12px; gap: 8px; scroll-padding: 104px 0 110px; padding-bottom: calc(108px + env(safe-area-inset-bottom)); }
  .quiz-player-top { display: contents; }
  .quiz-player-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; margin-top: 8px; }
  .quiz-player-brand, .quiz-player-brand > div { min-width: 0; }
  .quiz-player-brand > img { display: none; }
  .quiz-player-brand strong { font-size: 12px; }
  .quiz-player-brand small { max-width: 175px; font-size: 9px; }
  .quiz-player-tools { gap: 8px; }
  .quiz-player-tools .button { padding: 9px 12px; }
  #quiz-finish { font-size: 10px !important; max-width: 45px; text-align: center; }
  .quiz-navigator summary { padding: 10px; font-size: 11px; }
  .quiz-navigator summary span { display: none; }
  .quiz-nav-popup { position: fixed; top: 70px; left: 14px; right: 14px; width: auto; max-height: 50vh; }
  .quiz-live-stats { position: sticky; top: 0; z-index: 3; grid-template-columns: 1.2fr .7fr .7fr .7fr; padding: 10px 12px; gap: 8px; }
  .quiz-live-stats strong { font-size: 17px; }
  #quiz-progress { font-size: 10px; }
  .quiz-pace { grid-column: 1 / -1; display: flex; gap: 14px; align-items: center; }
  #quiz-time-note { font-size: 10px; white-space: nowrap; }
  #quiz-timebar { margin: 0; }
  .quiz-pane-tabs { order: 3; grid-column: 1 / -1; width: 100%; }
  .quiz-pane-tabs button { padding: 6px 12px; min-height: 32px; }
  .quiz-question-card, .quiz-review-pane { border-radius: 12px; }
  .quiz-question-card { padding: 20px; }
  .quiz-question-meta { margin-bottom: 14px; gap: 6px; }
  .quiz-question-meta > a { width: 100%; }
  #quiz-heading { font-size: 18px; }
  .quiz-option { padding: 12px; gap: 10px; font-size: 13px; }
  .quiz-player-footer { grid-template-columns: 1fr; gap: 5px; min-height: 96px; padding: 8px var(--quiz-gutter) calc(8px + env(safe-area-inset-bottom)); }
  #quiz-answer-message { min-height: 28px; font-size: 10px; line-height: 1.4; }
  .quiz-footer-buttons { display: grid; grid-template-columns: .9fr 1.2fr 1fr; gap: 7px; }
  .quiz-footer-buttons > button, #quiz-submit { min-width: 0; font-size: 11px; padding: 10px 8px; }
}
@media (max-width: 500px) {
  .quiz-fields, .quiz-settings-grid { grid-template-columns: 1fr; }
  .quiz-setup-footer { align-items: stretch; flex-direction: column; }
  .quiz-section-head { align-items: start; }
}
@media (prefers-reduced-motion: reduce) { .quiz-page *, .quiz-page *::before, .quiz-page *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }
.quiz-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 24px 0; }
.quiz-metric { border: 1px solid #d2dcca; border-radius: 8px; background: #f3f5ec; padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.quiz-metric span { font-size: 13px; color: #52634f; }
.quiz-metric strong { font-size: clamp(19px, 2.3vw, 26px); line-height: 1.3; }
.quiz-metric small { font-size: 12px; color: #52634f; }
.quiz-result-topics { padding-left: 20px; margin: 24px 0; }
.quiz-result-topics li { margin: 10px 0; }
.quiz-stats > summary { font-size: 22px; font-weight: 600; }
#quiz-stats-caption { font-size: 15px; font-weight: 400; }
.quiz-stats-table { font-size: 14px; width: 100%; }
.quiz-stats-table th, .quiz-stats-table td { padding: 14px 12px; }
.quiz-stats-table th[scope=row] { background: #fff; color: var(--quiz-ink); font-size: inherit; font-weight: 500; min-width: 175px; }
.quiz-stats-table tbody tr:nth-child(even) th[scope=row] { background: #edf0e6; }
.quiz-stats-table td { min-width: 100px; }
.quiz-stats-table progress { display: block; width: 110px; height: 7px; margin-top: 7px; }
#quiz-topic-details { border-top: 2px solid #c9d4be; margin-top: 30px; padding-top: 12px; scroll-margin-top: 110px; }
.quiz-attempt-list { padding-left: 24px; }
.quiz-attempt-list > li { padding: 18px 0; border-bottom: 1px solid #d2dcca; }
.quiz-attempt-list p { margin: 7px 0; }
.quiz-attempt-list details { margin-top: 12px; font-size: 14px; }
.quiz-attempt-list details li { margin: 8px 0; }
.quiz-progress-tools { border-top: 1px solid #cad4bf; margin: 36px 0 50px; padding-top: 16px; }
.quiz-progress-tools h2 { font-size: 22px; }
.quiz-file-label { position: relative; overflow: hidden; }
.quiz-file-label input { position: absolute; width: 100%; height: 100%; opacity: 0; inset: 0; cursor: pointer; }
.quiz-file-label:focus-within { outline: 3px solid #ab5a32; outline-offset: 4px; }
.quiz-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
#quiz-confirm { max-width: 520px; border: 1px solid #879a7d; border-radius: 12px; padding: 28px; background: #fffdf5; color: #172d28; }
#quiz-confirm::backdrop { background: #10271a88; }
@media (max-width: 850px) { .quiz-fields { grid-template-columns: 1fr 1fr; } .quiz-metrics { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .quiz-fields { grid-template-columns: 1fr; } .quiz-panel { padding: 20px 16px; margin-left: -4px; margin-right: -4px; } .quiz-option { padding: 13px 12px; gap: 10px; } .quiz-feedback { padding: 18px 14px; } .quiz-actions { gap: 12px; } .quiz-actions .button { flex: 1 1 auto; text-align: center; } .quiz-metric { padding: 12px; } #quiz-stats-caption { display: block; margin-top: 6px; } }
@media print { .quiz-progress-tools, #quiz-setup, .quiz-actions, .quiz-navigator { display: none; } .quiz-panel { break-inside: avoid; } }

@media (max-height: 600px) { .quiz-player-top { position: static; } }