:root{--bg:#faf8f5;--fg:#1f1b16;--muted:#6b6257;--accent:#8a5a2b;--card:#fff;--line:#e3ddd4}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);
  font:16px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
main{max-width:44rem;margin:0 auto;padding:2.5rem 1.25rem}
h1{font-size:1.9rem;margin:0 0 .4rem}
.lede{color:var(--muted);margin:0 0 2rem}
.cards{display:grid;gap:1rem}
.card{display:block;padding:1.25rem;background:var(--card);border:1px solid var(--line);
  border-radius:.75rem;text-decoration:none;color:inherit}
.card:hover{border-color:var(--accent)}
.card h2{margin:0 0 .3rem;font-size:1.15rem;color:var(--accent)}
.card p{margin:0;color:var(--muted);font-size:.95rem}
footer{margin-top:3rem;padding-top:1.25rem;border-top:1px solid var(--line)}
.muted{color:var(--muted);font-size:.85rem}
code{background:var(--card);border:1px solid var(--line);padding:.1rem .35rem;border-radius:.3rem;font-size:.85em}
button{font:inherit;padding:.7rem 1.1rem;border-radius:.5rem;border:1px solid var(--accent);
  background:var(--accent);color:#fff;cursor:pointer}
button.ghost{background:transparent;color:var(--accent)}
button:disabled{opacity:.5;cursor:not-allowed}
.opt{display:block;width:100%;text-align:left;margin:.5rem 0;padding:.85rem 1rem;
  background:var(--card);border:1px solid var(--line);border-radius:.5rem;cursor:pointer;color:inherit}
.opt:hover{border-color:var(--accent)}
.opt.correct{border-color:#2e7d32;background:#eef7ee}
.opt.wrong{border-color:#c62828;background:#fdeeee}
.bar{height:.5rem;background:var(--line);border-radius:1rem;overflow:hidden;margin:1rem 0}
.bar>i{display:block;height:100%;background:var(--accent);width:0}
.score{font-size:2.5rem;margin:.5rem 0}