:root {
  color-scheme: light;
  --page-bg: #eef3f2;
  --panel-bg: #162027;
  --panel-edge: #26323b;
  --display-bg: #edf5ef;
  --display-text: #102025;
  --key-bg: #f8faf8;
  --key-text: #172027;
  --key-hover: #e7eeeb;
  --utility-bg: #d9e3df;
  --operator-bg: #2e6f88;
  --operator-text: #ffffff;
  --equals-bg: #d86b3f;
  --equals-text: #ffffff;
  --focus: #f4c95d;
  --shadow: 0 24px 60px rgba(16, 32, 37, 0.22);
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
}

body {
  min-height: 100vh;
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    linear-gradient(135deg, rgba(46, 111, 136, 0.12), transparent 35%),
    linear-gradient(315deg, rgba(216, 107, 63, 0.12), transparent 38%),
    var(--page-bg);
  color: var(--key-text);
}

button {
  font: inherit;
}

.app-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}

.calculator {
  width: min(100%, 380px);
  padding: 22px;
  border: 1px solid var(--panel-edge);
  border-radius: 8px;
  background: var(--panel-bg);
  box-shadow: var(--shadow);
}

.calculator__header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  color: #f8faf8;
}

.calculator__header h1,
.eyebrow {
  margin: 0;
}

.calculator__header h1 {
  font-size: 1.35rem;
  font-weight: 720;
}

.eyebrow {
  color: #a8c4bd;
  font-size: 0.78rem;
  font-weight: 680;
  text-transform: uppercase;
}

.display {
  display: block;
  width: 100%;
  min-height: 92px;
  margin-bottom: 14px;
  padding: 18px;
  overflow: hidden;
  border: 1px solid rgba(16, 32, 37, 0.1);
  border-radius: 8px;
  background: var(--display-bg);
  color: var(--display-text);
  font-size: clamp(2rem, 9vw, 3.2rem);
  font-variant-numeric: tabular-nums;
  font-weight: 760;
  line-height: 1.1;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.keypad {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.key {
  min-width: 0;
  min-height: 64px;
  border: 0;
  border-radius: 8px;
  background: var(--key-bg);
  color: var(--key-text);
  cursor: pointer;
  font-size: 1.18rem;
  font-weight: 720;
  transition: background-color 160ms ease, transform 120ms ease, box-shadow 120ms ease;
}

.key:hover {
  background: var(--key-hover);
}

.key:active {
  transform: translateY(1px) scale(0.99);
}

.key:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.key--utility {
  background: var(--utility-bg);
}

.key--operator {
  background: var(--operator-bg);
  color: var(--operator-text);
}

.key--operator:hover {
  background: #255e73;
}

.key--equals {
  grid-row: span 2;
  background: var(--equals-bg);
  color: var(--equals-text);
}

.key--equals:hover {
  background: #bf5933;
}

.key--zero {
  grid-column: span 2;
}

@media (max-width: 420px) {
  .app-shell {
    padding: 14px;
  }

  .calculator {
    padding: 16px;
  }

  .calculator__header {
    align-items: start;
    flex-direction: column;
    gap: 4px;
  }

  .display {
    min-height: 82px;
    padding: 16px;
  }

  .key {
    min-height: 58px;
  }
}