#calculator {
  width: min(22rem, 100%);
  margin: 0 auto;
}

#screen {
  padding: 16px 12px;
  margin-bottom: 12px;
  background: var(--paper);
  border: var(--border-thin) solid var(--ink);
  border-radius: var(--radius-md);
}

#display {
  font-family: var(--font-mono);
  font-weight: 900;
  font-size: clamp(1.75rem, 8vw, 2.25rem);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  text-align: right;
  overflow-x: auto;
  white-space: nowrap;
}

#buttons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

/* Square keys: the grid already sets the width, so the aspect ratio gives the
   height without fighting the button's min-height. */
#buttons .neo-btn {
  padding: 0;
  aspect-ratio: 1;
  font-size: 1.125rem;
}

#buttons #reset {
  font-size: 0.6875rem;
  letter-spacing: 0.02em;
}