* { box-sizing: border-box; }
body {
  margin: 0;
  background: #fff;
  color: #000;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.5;
}
main { max-width: 40rem; margin: 0 auto; padding: 1.5rem 1rem 3rem; }
h1 {
  font-size: 1.35rem;
  font-weight: bold;
  color: #000;
  margin: 0 0 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid #999;
  overflow-wrap: break-word;
}
.instructions { margin: 0 0 1.5rem; }
ol { padding-left: 1.75rem; margin: 0; }
li { padding: 0.9rem 0; border-bottom: 1px solid #ccc; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend { padding: 0; margin-bottom: 0.4rem; overflow-wrap: break-word; }
fieldset label { display: inline-block; margin-right: 1.5rem; cursor: pointer; }
input[type="radio"] { accent-color: #1f2f4f; }
#progress { margin: 1.25rem 0 0.75rem; color: #444; font-size: 0.95rem; }
button {
  font-family: inherit;
  font-size: 1rem;
  padding: 0.5rem 1.5rem;
  color: #fff;
  background: #1f2f4f;
  border: 1px solid #1f2f4f;
  border-radius: 2px;
  cursor: pointer;
}
button:disabled { background: #e6e6e6; color: #777; border-color: #bbb; cursor: not-allowed; }
#results { margin-top: 1.5rem; }
[hidden] { display: none !important; }
#results h2 {
  font-size: 1.15rem;
  font-weight: bold;
  color: #000;
  margin: 0 0 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #999;
}
#results h2:focus { outline: none; }
.results-count { margin: 0 0 1rem; color: #444; }
.results-text { margin: 0 0 1.5rem; }
.scale { margin: 0 0 1.5rem; padding-top: 1rem; border-top: 1px solid #ccc; }
.scale h3 { font-size: 1rem; font-weight: bold; color: #000; margin: 0 0 0.5rem; }
.scale-track { position: relative; height: 8.5rem; margin: 0 1.25rem; }
@media (max-width: 420px) { .scale-track { height: 11.5rem; } }
.scale-col { position: absolute; top: 1.5rem; }
.scale-band {
  height: 2rem;
  line-height: 2rem;
  text-align: center;
  font-size: 0.9rem;
  background: #e6e6e6;
  border: 1px solid #999;
  color: #000;
}
.scale-desc { margin-top: 0.35rem; font-size: 0.8rem; color: #444; text-align: center; overflow-wrap: break-word; }
.scale-marker {
  position: absolute;
  top: 1.5rem;
  height: 2.75rem;
  width: 0;
  border-left: 2px solid #1f2f4f;
  pointer-events: none;
}
.scale-marker-label {
  position: absolute;
  bottom: 100%;
  left: 0;
  transform: translateX(-50%);
  font-size: 0.85rem;
  color: #1f2f4f;
  line-height: 1.2;
}