:root {
	color-scheme: dark;
	font-family: -apple-system, 'Helvetica Neue', 'SF Pro Display', system-ui, sans-serif;
}

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

body {
	background: #000;
	min-height: 100dvh;
	display: flex;
	align-items: center;
	justify-content: center;
	-webkit-user-select: none;
	user-select: none;
}

.calc {
	width: 100%;
	max-width: 360px;
	padding: 0 12px 20px;
}

/* Display */
.calc__display {
	width: 100%;
	padding: 20px 8px 16px;
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
	min-height: 120px;
}

.calc__display-text {
	color: #fff;
	font-size: 88px;
	font-weight: 200;
	line-height: 1;
	letter-spacing: -1.5px;
	text-align: right;
	transition: font-size 0.15s ease;
}

.calc__display-text--sm {
	font-size: 64px;
}

.calc__display-text--xs {
	font-size: 48px;
}

.calc__display-text--xxs {
	font-size: 36px;
}

/* Button Grid */
.calc__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
}

/* Buttons */
.calc__btn {
	aspect-ratio: 1;
	border-radius: 50%;
	border: none;
	font-size: 34px;
	font-weight: 400;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: filter 0.1s ease;
	-webkit-tap-highlight-color: transparent;
	font-family: inherit;
	line-height: 1;
}

.calc__btn:active {
	filter: brightness(1.4);
}

/* Number buttons */
.calc__btn--num {
	background: #333;
	color: #fff;
}

.calc__btn--num:active {
	background: #737373;
}

/* Zero button */
.calc__btn--zero {
	grid-column: span 2;
	border-radius: 999px;
	aspect-ratio: auto;
	justify-content: flex-start;
	padding-left: 30px;
}

/* Utility buttons (AC, +/-, %) */
.calc__btn--util {
	background: #a5a5a5;
	color: #000;
	font-size: 28px;
	font-weight: 500;
}

.calc__btn--util:active {
	background: #d9d9d9;
}

/* Operator buttons */
.calc__btn--op {
	background: #ff9f0a;
	color: #fff;
	font-size: 40px;
	font-weight: 400;
}

.calc__btn--op:active {
	background: #fcc580;
}

/* Active operator state */
.calc__btn--op.is-active {
	background: #fff;
	color: #ff9f0a;
}

.calc__btn--op.is-active:active {
	background: #fcc580;
	color: #fff;
}

/* Responsive */
@media (max-height: 600px) {
	.calc__display {
		min-height: 80px;
		padding: 10px 8px 10px;
	}

	.calc__display-text {
		font-size: 56px;
	}

	.calc__grid {
		gap: 10px;
	}

	.calc__btn {
		font-size: 28px;
	}

	.calc__btn--op {
		font-size: 32px;
	}
}