* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: system-ui, sans-serif;
  background: #f4f4f4;
  color: #222;
}
main { max-width: 720px; margin: auto; padding: 20px; }
header { margin-bottom: 18px; }
h1 { margin-bottom: 4px; }
.panel {
  background: white;
  border: 1px solid #ddd;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 18px;
}
.meta { display:flex; justify-content:space-between; color:#666; font-size:.9rem; }
#question { line-height:1.6; min-height:3em; }
#choices { display:grid; gap:10px; }
.choice, #next {
  border: 1px solid #bbb;
  border-radius: 8px;
  background: white;
  padding: 13px;
  text-align:left;
  font-size: 1rem;
  cursor:pointer;
}
.choice:hover, #next:hover { background:#eee; }
.choice:disabled { cursor:default; }
#next { margin-top:16px; }
.correct { border-color:#555; }
.wrong { border-color:#999; }
#result { margin-top:16px; line-height:1.7; }
.stat { display:flex; justify-content:space-between; padding:5px 0; }
.small { color:#666; font-size:.9rem; }