.calculator-page {
  display: grid;
  place-items: start center;
}

.calculator {
  width: min(100%, 360px);
  border: 1px solid var(--site-border);
  border-radius: var(--site-radius);
  background: var(--site-surface);
}

.calculator__bar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border-bottom: 1px solid var(--site-border);
}

.calculator__bar h1,
.calculator__bar p {
  margin: 0;
}

.calculator__bar h1 {
  font-size: 1rem;
}

.calculator__bar p {
  color: var(--site-subtle);
  font-size: 0.85rem;
}

.calculator__display {
  display: grid;
  gap: 4px;
  min-height: 112px;
  padding: 18px 12px;
  border-bottom: 1px solid var(--site-border);
  text-align: right;
}

.calculator__expression {
  min-height: 24px;
  overflow-wrap: anywhere;
  color: var(--site-muted);
  font-family: var(--site-font-mono);
}

.calculator__result {
  overflow-wrap: anywhere;
  color: var(--site-text);
  font-family: var(--site-font-mono);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.15;
}

.calculator__keys {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--site-border);
}

.calculator__keys button {
  min-height: 56px;
  border: 0;
  border-radius: 0;
  background: var(--site-surface);
  color: var(--site-text);
  cursor: pointer;
  font-weight: 650;
}

.calculator__keys button:hover,
.calculator__keys button:focus-visible {
  background: var(--site-surface-strong);
}

.calculator__keys [data-kind="operator"],
.calculator__equals {
  color: var(--site-accent);
}

.calculator__keys button:active {
  transform: translateY(1px);
}

@media (max-width: 420px) {
  .calculator {
    width: 100%;
  }
}