:root {
  --orange: #1d4ed8;
  --orange-soft: #e8efff;
  --navy: #14213d;
  --navy-soft: #e8eef8;
}

.brand-mark,
.mini-mark {
  background: #1d4ed8;
  border-radius: 4px;
  font-family: "DM Mono", monospace;
  font-size: .9rem;
  font-style: normal;
}

.aime-intro {
  max-width: 720px;
  margin-bottom: 48px;
}

.aime-intro h1 {
  margin: 0;
  font-family: "Source Serif 4", Georgia, serif;
  font-size: clamp(2.5rem, 6vw, 4.8rem);
  line-height: 1;
  letter-spacing: -.035em;
}

.aime-intro > p:last-child {
  max-width: 610px;
  margin: 18px 0 0;
  color: var(--muted);
}

.topic-symbol {
  color: #1d4ed8;
  background: var(--orange-soft);
}

.problem-panel {
  border-top: 4px solid var(--orange);
}

.numeric-answer-form {
  display: grid;
  justify-items: start;
  gap: 10px;
}

.numeric-answer-form label {
  color: var(--muted);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.numeric-answer-form input {
  width: 180px;
  padding: 12px 16px;
  color: var(--ink);
  background: white;
  border: 2px solid var(--navy);
  border-radius: 3px;
  font: 500 2rem/1 "DM Mono", monospace;
  letter-spacing: .32em;
  text-align: center;
}

.numeric-answer-form input:focus {
  outline: 3px solid var(--orange-soft);
  outline-offset: 2px;
}

.numeric-answer-form .form-error {
  margin: 0;
}