body {
  margin:0;
  font-family: Arial, sans-serif;
  background:#ffffff;
  color:#b30000;
}

.hero {
  background: linear-gradient(135deg, #ff1a1a, #b30000);
  padding: 3rem 1.5rem;
  text-align:center;
  color:white;
}

.hero h1 {
  font-size: 2rem;
  margin-bottom:0.8rem;
}

.quiz {
  padding:2rem 1.2rem;
}

.quiz-wrap {
  max-width:700px;
  margin:0 auto;
}

.opt {
  width:100%;
  background:white;
  border:2px solid #ff1a1a;
  color:#b30000;
  border-radius:12px;
  padding:1rem;
  margin-bottom:1rem;
  font-size:1.1rem;
  text-align:left;
  cursor:pointer;
}

.opt:hover {
  background:#ff1a1a;
  color:white;
}

.opt small {
  display:block;
  font-size:0.85rem;
  opacity:0.8;
  margin-top:4px;
}

.result {
  margin-top:1.5rem;
  padding:1rem;
  border:2px dashed #b30000;
  border-radius:12px;
}

.hidden { display:none; }

.btn {
  display:inline-block;
  margin-top:1rem;
  padding:0.8rem 1.4rem;
  border-radius:8px;
  background:#b30000;
  color:white;
  text-decoration:none;
  font-weight:bold;
}

.footer {
  margin-top:3rem;
  padding:1.5rem;
  text-align:center;
  background:#ff1a1a;
  color:white;
  font-size:0.85rem;
}