:root{
  --ink:#201907; --muted:#6F6552; --cream:#FFFBF1; --surface:#fff;
  --line:#F0E7D2; --line-2:#E3D8BE; --yellow:#FFB900; --yellow-deep:#F29C00;
}
*{box-sizing:border-box;margin:0;-webkit-tap-highlight-color:transparent}
body{
  min-height:100svh;display:grid;place-items:center;gap:18px;
  background:var(--cream);color:var(--ink);padding:24px;
  font:400 16px/1.5 ui-sans-serif,system-ui,-apple-system,sans-serif;
}
.calc{
  width:min(340px,100%);background:var(--surface);
  border:1px solid var(--line);border-radius:22px;padding:18px;
  box-shadow:0 24px 60px -30px rgba(60,45,10,.35);
}
#screen{
  display:block;width:100%;text-align:right;padding:18px 12px 22px;
  font-size:clamp(34px,11vw,46px);font-weight:600;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;
}
.keys{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}
button{
  font:inherit;font-size:19px;font-weight:600;aspect-ratio:1;border:0;
  border-radius:16px;background:var(--cream);color:var(--ink);cursor:pointer;
  transition:transform .06s,background .12s;
}
button:hover{background:var(--line)}
button:active{transform:scale(.95)}
button.fn{background:var(--line);color:var(--muted)}
button.fn:hover{background:var(--line-2)}
button.op{background:var(--yellow);color:var(--ink)}
button.op:hover{background:var(--yellow-deep)}
button.op.on{background:var(--ink);color:var(--yellow)}
button.wide{grid-column:span 2;aspect-ratio:auto}
.by{font-size:13px;color:var(--muted)}