.academy-coverage-sampler { margin: var(--spacing-32) 0; padding: var(--spacing-24); border: var(--stroke-weight-1) solid var(--border-default); background-color: var(--background-surface-1); }
.academy-coverage-sampler__control { display: flex; align-items: center; gap: var(--spacing-12); margin-top: var(--spacing-16); color: var(--text-secondary); }
.academy-coverage-sampler__control input { flex: 1; }
.academy-coverage-sampler__control output { color: var(--text-primary); font-weight: var(--font-weight-semibold); }
.academy-coverage-sampler__chart { display: flex; align-items: end; gap: var(--spacing-2); height: 9rem; margin-top: var(--spacing-24); overflow-x: auto; border-bottom: var(--stroke-weight-1) solid var(--border-default); }
.academy-coverage-sampler__bar { display: flex; flex: 0 0 0.8rem; flex-direction: column; justify-content: end; height: 100%; background: linear-gradient(to top, var(--background-highlight), var(--background-highlight) calc(var(--coverage-probability) * 1000%), transparent calc(var(--coverage-probability) * 1000%)); }
.academy-coverage-sampler__bar b { margin-bottom: calc(-1 * var(--spacing-24)); color: var(--text-tertiary); font-size: var(--font-size-12); font-weight: var(--font-weight-400); }
.academy-coverage-sampler__result { margin-top: var(--spacing-32); color: var(--text-secondary); }

@media (max-width: 40rem) {
  .academy-coverage-sampler__control { align-items: flex-start; flex-direction: column; }
  .academy-coverage-sampler__control input { width: 100%; }
}