:root { --ink:#2a2320; --cocoa:#5f4c41; --taupe:#a8927f; --gold:#b5a192; --sand:#f3ece5; --sand2:#e8dcd0; --white:#fffdfb; --ok:#4f7a5a; --bad:#a0524a; }
* { box-sizing:border-box; margin:0; padding:0; }
body { background:var(--sand); color:var(--cocoa); font:400 17px/1.55 'Open Sans', system-ui, sans-serif; -webkit-font-smoothing:antialiased; }
header { padding:22px 16px 0; max-width:760px; margin:0 auto; }
header img { width:72px; display:block; }
main { max-width:760px; margin:0 auto; padding:28px 16px 60px; }
.eyebrow { font:500 13px Ubuntu, sans-serif; letter-spacing:.2em; text-transform:uppercase; color:var(--taupe); margin-bottom:10px; }
h1 { font:300 34px/1.15 Ubuntu, sans-serif; color:var(--ink); margin-bottom:14px; }
h2 { font:400 25px/1.3 Ubuntu, sans-serif; color:var(--ink); margin:6px 0 22px; }
h3 { font:500 18px Ubuntu, sans-serif; color:var(--ink); margin:30px 0 12px; }
.dot { display:inline-block; width:.2em; height:.2em; margin-left:.08em; background:var(--gold); border-radius:50%; }
.lead { margin-bottom:22px; }
video { width:100%; display:block; background:#000; border-radius:4px; margin-bottom:24px; aspect-ratio:16/9; }
.btn { display:block; width:100%; padding:17px 20px; border:0; border-radius:4px; background:var(--ink); color:#fff; font:500 18px Ubuntu, sans-serif; cursor:pointer; }
.btn:active { background:var(--cocoa); }
input { width:100%; padding:16px; font-size:18px; border:2px solid var(--sand2); border-radius:4px; background:var(--white); color:var(--ink); margin-bottom:8px; }
input:focus { outline:none; border-color:var(--gold); }
.err { color:var(--bad); min-height:24px; margin-bottom:10px; font-size:15px; }
.progress { height:4px; background:var(--sand2); margin-bottom:24px; }
.progress div { height:100%; background:var(--gold); }
.opts { display:flex; flex-direction:column; gap:12px; }
.opt { text-align:left; padding:18px 18px; min-height:60px; background:var(--white); border:2px solid var(--sand2); border-radius:4px; font:400 17px/1.4 'Open Sans', sans-serif; color:var(--ink); cursor:pointer; }
.opt:active, .opt:hover { border-color:var(--gold); }
.score { display:flex; align-items:baseline; gap:10px; margin:6px 0 16px; }
.score b { font:300 76px/1 Ubuntu, sans-serif; }
.score span { font:400 22px Ubuntu, sans-serif; color:var(--taupe); }
.score.pass b { color:var(--ok); }
.score.fail b { color:var(--bad); }
.miss { background:var(--white); border-left:5px solid var(--gold); padding:16px 18px; margin-bottom:12px; }
.miss .mq { font-weight:600; color:var(--ink); margin-bottom:6px; }
.miss .ma { color:var(--bad); font-size:15px; }
.miss .mc { color:var(--ok); font-size:15px; }
.miss .mw { font-size:15px; margin-top:6px; }
.save { margin:24px 0 16px; font-size:14px; color:var(--taupe); }
.list a { display:block; padding:18px; background:var(--white); border:2px solid var(--sand2); border-radius:4px; color:var(--ink); text-decoration:none; font:500 19px Ubuntu, sans-serif; margin-bottom:12px; }
@media (min-width:700px) { h1 { font-size:42px; } }