/* "Who is learning?" first screen (js/who.js). */
.who { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; padding: 16px; overflow: auto; color: #f4f7ff;
  background: radial-gradient(120% 90% at 80% 0, #2c3c9a 0, #0d1338 62%); }
.who-box { width: min(560px, 100%); text-align: center; display: grid; gap: 14px; }
.who-box h1 { margin: 0; font-size: 2rem; }
.who-box p { margin: 0; color: #b9c5f2; }
.who-cards { display: grid; gap: 12px; }
.who-cards { grid-template-columns: 1fr 1fr; }
@media (max-width: 420px) { .who-cards { grid-template-columns: 1fr; } }
.who-card { display: grid; gap: 4px; justify-items: center; background: #18214f; color: inherit; border: 3px solid #3a4aa5; border-radius: 20px; padding: 16px 12px; font: inherit; cursor: pointer; min-height: 96px; }
.who-card:hover, .who-card:focus-visible { border-color: #ffd23f; transform: translateY(-2px); }
.who-card b { font-size: 1.25rem; }
.who-card span:last-child { color: #b9c5f2; font-size: .92rem; }
.who-ico { font-size: 2.4rem; line-height: 1; }
.who-later { justify-self: center; background: none; border: 0; color: #b9c5f2; text-decoration: underline; font: inherit; cursor: pointer; padding: 10px; }
@media (prefers-reduced-motion: reduce) { .who-card:hover, .who-card:focus-visible { transform: none; } }