* {
	box-sizing: border-box;
}

body {
	display: grid;
	place-items: center;
	min-height: 100vh;
	margin: 0;
	padding: 1.5rem;
	background: #f4f4f6;
	font-family: system-ui, sans-serif;
	color: #1c1c22;
}

/* Hidden on screen but still read by screen readers. */
.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.calculator {
	width: min(20rem, 100%);
	padding: 1.25rem;
	border-radius: 1.75rem;
	background: #1c1c22;
	box-shadow: 0 20px 40px -20px rgb(0 0 0 / 0.5);
}

.screen {
	padding: 1rem 0.5rem 1.25rem;
	text-align: right;
	color: #ffffff;
}

.expression {
	min-height: 1.5rem;
	margin: 0;
	color: #9a9aa6;
}

/* Long numbers wrap instead of spilling out of the screen. */
.display {
	display: block;
	font-size: 2.75rem;
	font-weight: 300;
	font-variant-numeric: tabular-nums;
	overflow-wrap: anywhere;
}

/* Four equal columns; wide keys span two of them. */
.keys {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0.625rem;
}

.key {
	aspect-ratio: 1;
	border: 0;
	border-radius: 999px;
	background: #3a3a44;
	font: inherit;
	font-size: 1.375rem;
	color: #ffffff;
	cursor: pointer;
}

.key-wide {
	grid-column: span 2;
	aspect-ratio: auto;
}

.key-light {
	background: #a5a5b0;
	color: #1c1c22;
}

.key-operator,
.key-equals {
	background: #f59e0b;
}

.key:hover {
	filter: brightness(1.15);
}

.key:active {
	filter: brightness(0.9);
}

.key:focus-visible {
	outline: 3px solid #60a5fa;
	outline-offset: 2px;
}