* { box-sizing: border-box; }
:root {
  color-scheme: light;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  --calc-width: 360px;
}
html, body { width: 100%; min-height: 100%; margin: 0; }
body {
  min-height: 100svh;
  background: #f4f4f2;
  color: #191919;
}
.stage {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 28px 18px;
}
.calculator {
  width: min(var(--calc-width), 100%);
  padding: 16px 16px 14px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 30px;
  background: #171717;
  box-shadow: 0 28px 78px rgba(25, 23, 19, .19), 0 3px 10px rgba(25, 23, 19, .08), inset 0 1px 0 rgba(255,255,255,.055);
  color: #fff;
  animation: arrive .56s cubic-bezier(.2,.8,.2,1) both;
}
.screen {
  min-height: 132px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  align-items:flex-end;
  gap:7px;
  padding: 15px 8px 19px;
  overflow:hidden;
}
.expression {
  width:100%; min-height:16px; color:#8e8e8e; text-align:right;
  font-size:12px; font-variant-numeric:tabular-nums; letter-spacing:.02em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.display {
  width:100%; display:block; color:#f8f8f8; text-align:right;
  font-size: clamp(42px, 12vw, 66px); line-height:1.08; font-weight:400;
  letter-spacing:-.065em; font-variant-numeric: tabular-nums;
  white-space:nowrap; overflow:hidden; text-overflow:clip;
  transition: opacity .12s ease, transform .12s ease;
}
.display.bump { animation: number-in .17s ease-out; }
.keypad {
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:9px;
}
.key {
  appearance:none; border:0; border-radius:50%; aspect-ratio:1;
  display:grid; place-items:center; padding:0;
  color:#f8f8f8; font-family:inherit; font-size:26px; font-weight:500;
  cursor:pointer; -webkit-tap-highlight-color:transparent; user-select:none;
  transition: filter .14s ease, transform .12s cubic-bezier(.2,.8,.2,1), background-color .16s ease;
}
.key:hover { filter:brightness(1.13); }
.key:active { transform:scale(.91); filter:brightness(1.28); }
.key:focus-visible { outline:2px solid rgba(255,255,255,.85); outline-offset:3px; z-index:1; }
.key-number { background:#353535; }
.key-function { background:#a5a5a5; color:#171717; font-size:20px; font-weight:500; }
.key-operator { background:#ff9f0a; color:#fff; font-size:29px; font-weight:400; }
.key-operator.is-selected { background:#f7f7f7; color:#ff9f0a; }
.key-zero { grid-column:span 2; aspect-ratio:auto; border-radius:999px; justify-content:start; padding-left:calc(25% - 4px); }
.keyboard-hint {
  min-height:26px; display:flex; align-items:flex-end; justify-content:center; gap:7px;
  color:#777; font-size:10px; letter-spacing:.02em; padding-top:11px;
}
.hint-dot { width:5px; height:5px; margin-bottom:3px; border-radius:50%; background:#ff9f0a; opacity:.9; }
@keyframes arrive { from { opacity:0; transform:translateY(10px) scale(.985); } to { opacity:1; transform:translateY(0) scale(1); } }
@keyframes number-in { 0% { opacity:.52; transform:translateY(3px); } 100% { opacity:1; transform:translateY(0); } }
@media (max-width:420px) {
  .stage { padding:20px 14px; }
  .calculator { padding:14px 13px 12px; border-radius:27px; }
  .screen { min-height:120px; padding-bottom:16px; }
  .keypad { gap:8px; }
  .key { font-size:24px; }
  .key-function { font-size:18px; }
  .key-operator { font-size:27px; }
}
@media (max-height:650px) and (min-width:500px) {
  .stage { padding:12px; }
  .calculator { padding-top:11px; padding-bottom:9px; }
  .screen { min-height:105px; padding-top:8px; padding-bottom:12px; }
  .keypad { gap:7px; }
  .keyboard-hint { min-height:20px; padding-top:7px; }
}
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}