:root { --ink:#102033; --paper:#f7f4ed; --inverse:#fffefa; --red:#c8341c; --line:#7d8a93; --success:#1b6a4b; --hero-gutter:clamp(22px,5vw,64px); --hero-copy-reserve:clamp(184px,27vw,254px); }
* { box-sizing:border-box; }
body { min-width:320px; margin:0; background:var(--paper); color:var(--ink); font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif; }
.shell { width:min(100%,960px); min-height:100vh; margin:0 auto; background:var(--paper); }
.hero { position:relative; min-height:clamp(214px,24vw,258px); padding:clamp(18px,2vw,22px) var(--hero-gutter) clamp(20px,2.4vw,26px); overflow:hidden; background:var(--ink); color:var(--inverse); }
.brand-row { display:flex; align-items:center; gap:clamp(12px,1.8vw,20px); margin:0 0 clamp(14px,1.8vw,18px); }
.brand-logo { display:block; width:clamp(78px,8.5vw,104px); height:auto; padding:8px 10px; background:var(--inverse); }
.brand-row .eyebrow { max-width:360px; margin:0; font-size:clamp(10px,1.4vw,14px); line-height:1.2; }
.hero-grid { display:block; padding-right:var(--hero-copy-reserve); }
.hero-copy { max-width:720px; }
.hero-rabbit { position:absolute; right:calc(var(--hero-gutter) - 12px); bottom:-61px; display:block; width:auto; height:calc(100% + 66px); max-height:none; object-fit:contain; object-position:bottom center; }
.eyebrow { margin:0 0 8px; font-size:14px; font-weight:900; letter-spacing:.13em; text-transform:uppercase; }
h1 { max-width:720px; margin:0; font-size:clamp(38px,5.3vw,56px); line-height:.97; letter-spacing:-.06em; }
.hero p { max-width:650px; margin:12px 0 0; font-size:18px; line-height:1.35; }
main { padding:clamp(22px,4vw,44px); }
.progress { display:flex; align-items:center; gap:14px; margin-bottom:18px; font-size:14px; font-weight:900; letter-spacing:.09em; text-transform:uppercase; }
.progress-track { flex:1; height:4px; overflow:hidden; background:var(--line); }
.progress-fill { width:25%; height:100%; background:var(--red); transition:width .2s ease; }
.question-number { display:grid; place-items:center; width:40px; height:40px; margin-bottom:10px; border-radius:50%; background:var(--red); color:var(--inverse); font-size:15px; font-weight:900; }
h2 { max-width:740px; margin:0; font-size:clamp(28px,4.6vw,44px); line-height:1.05; letter-spacing:-.05em; }
.instruction { max-width:680px; margin:10px 0 18px; font-size:18px; line-height:1.4; }
.options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.option { display:grid; grid-template-rows:minmax(0,auto) 14px; align-content:center; gap:3px; min-height:80px; padding:12px 18px; border:2px solid var(--line); border-radius:0; background:transparent; color:var(--ink); cursor:pointer; font:inherit; font-size:18px; font-weight:800; line-height:1.2; text-align:left; }
.option:hover { border-color:var(--ink); }
.option:focus-visible, .primary:focus-visible { outline:4px solid var(--red); outline-offset:3px; }
.option[aria-pressed="true"] { border-color:var(--ink); background:var(--ink); color:var(--inverse); }
.option.correct { border-color:var(--success); background:#e5f2eb; color:var(--ink); }
.option.incorrect { border-color:var(--red); background:#f8e3df; color:var(--ink); }
.option-status { min-height:14px; color:currentColor; font-size:12px; font-weight:900; letter-spacing:.08em; line-height:1.1; text-transform:uppercase; visibility:hidden; }
.option-status:not([aria-hidden="true"]) { visibility:visible; }
.actions { display:grid; grid-template-columns:auto minmax(0,1fr); gap:12px 16px; align-items:center; margin-top:16px; }
.primary { min-height:54px; padding:13px 24px; border:0; border-radius:0; background:var(--red); color:var(--inverse); cursor:pointer; font:inherit; font-size:17px; font-weight:900; }
.primary:hover { background:#a82c18; }
.primary:disabled { cursor:not-allowed; opacity:.45; }
.message { min-height:25px; margin:0; color:var(--red); font-size:16px; font-weight:800; }
.feedback { display:grid; grid-column:1/-1; grid-template-columns:minmax(0,1fr) auto; gap:12px 18px; align-items:center; max-width:720px; margin:0; padding:14px 16px; border-left:6px solid var(--ink); background:#fffefa; }
.feedback[data-state="correct"] { border-color:var(--success); }
.feedback h3 { margin:0; font-size:19px; }
.feedback p { margin:4px 0 0; font-size:16px; line-height:1.35; }
.feedback .primary { min-height:48px; white-space:nowrap; }
#quiz.is-answered .instruction, #quiz.is-answered #check-answer, #quiz.is-answered .message { display:none; }
#quiz.is-answered .actions { margin-top:14px; }
.hidden { display:none !important; }
.summary { display:grid; grid-template-columns:minmax(0,1fr) clamp(94px,13vw,170px); gap:clamp(14px,2.5vw,24px); align-items:end; padding:clamp(26px,3.3vw,32px) clamp(22px,3.5vw,32px); background:var(--ink); color:var(--inverse); }
.summary-copy { min-width:0; }
.summary-rabbit { display:block; justify-self:end; width:100%; height:auto; max-height:clamp(145px,18vw,205px); object-fit:contain; object-position:bottom center; }
.summary h2 { font-size:clamp(34px,5vw,52px); }
.summary p { max-width:650px; font-size:20px; line-height:1.45; }
.summary .primary { margin-top:8px; background:var(--inverse); color:var(--ink); }
.note { margin:42px 0 0; padding-top:22px; border-top:1px solid var(--line); color:var(--ink); font-size:14px; line-height:1.45; }
@media (max-width:620px) {
  .options { grid-template-columns:1fr; }
  main { padding-left:22px; padding-right:22px; }
  .hero { min-height:0; padding-top:16px; padding-bottom:18px; }
  .brand-row { gap:12px; margin-bottom:12px; }
  .brand-row .eyebrow { display:block; max-width:min(56vw,220px); font-size:10px; letter-spacing:.09em; }
  .hero-grid { display:grid; grid-template-columns:minmax(0,1fr) 98px; gap:14px; padding-right:0; align-items:start; }
  .hero-rabbit { position:static; align-self:end; justify-self:end; width:100%; height:auto; max-height:120px; }
  .hero p { display:none; }
  .option { min-height:78px; }
  .feedback { grid-template-columns:1fr; align-items:start; }
  .feedback .primary { justify-self:start; }
}
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { scroll-behavior:auto !important; transition-duration:.01ms !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; }
}