.calc {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

@media (max-width: 1000px) {
  .calc { grid-template-columns: minmax(0, 1fr); }
}

.result { position: sticky; top: 24px; }

.result-title { font-size: var(--step-1); }

.big {
  margin-top: 16px !important;
  font-family: var(--font-display);
  font-size: var(--step-6);
  line-height: 1;
}

.meter {
  max-width: 260px;
  height: 6px;
  margin: 16px auto;
  background: #2a2a2a;
}

.meter-fill {
  height: 100%;
  width: 0;
  background: var(--q-unique);
  transition: width 150ms ease-out;
}

.lines { margin-top: 20px; }
.rating { margin-top: 6px !important; }

.formula {
  margin-top: 20px !important;
  font-size: var(--step--1);
  overflow-wrap: anywhere;
}

.result.stale > :not(#error) { opacity: 0.3; }

.explain { margin-top: 32px; max-width: 40rem; color: var(--text-dim); }
.explain summary { cursor: pointer; color: var(--text); }
.explain ol { padding-left: 20px; }