:root{--gap: 12px;--key-size: 72px;--radius: 40px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif}*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}body{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(160deg,#3a3a3c,#1c1c1e)}.calculator{width:calc(var(--key-size) * 4 + var(--gap) * 5);padding:var(--gap);border-radius:28px;background:#1c1c1e;box-shadow:0 30px 60px #0000008c}.display{color:#fff;font-weight:300;font-size:72px;line-height:1;text-align:right;padding:24px 16px 20px;min-height:96px;overflow:hidden;white-space:nowrap;font-variant-numeric:tabular-nums}.keys{display:grid;grid-template-columns:repeat(4,var(--key-size));gap:var(--gap)}.key{height:var(--key-size);border:none;border-radius:var(--radius);font-size:32px;font-weight:400;color:#fff;background:#333336;cursor:pointer;transition:filter .12s ease,background .12s ease;-webkit-user-select:none;user-select:none}.key:active{filter:brightness(1.4)}.key.fn{background:#a5a5a5;color:#1c1c1e;font-weight:500}.key.op{background:#ff9f0a;font-size:36px}.key.op.active{background:#fff;color:#ff9f0a}.key.wide{grid-column:span 2;width:auto;text-align:left;padding-left:28px}