:root{color-scheme:light;font-family:Arial,Helvetica,sans-serif}*{box-sizing:border-box}body{min-block-size:100vh;min-block-size:100dvh;margin:0;background:#f7f7f4;color:#151515}main{display:grid;min-block-size:inherit;place-items:center;padding:1rem}.calculator{inline-size:min(100%,20rem);padding:1rem;border:1px solid #dfdfda;border-radius:1.25rem;background:#fff;box-shadow:0 1rem 2.5rem #00000012}.display{display:flex;min-block-size:5.5rem;align-items:center;justify-content:flex-end;overflow-x:auto;padding:.75rem 1rem;border-radius:.8rem;background:#171716;color:#fff;font-size:clamp(2rem,9vw,3rem);font-variant-numeric:tabular-nums;line-height:1;text-align:end;white-space:nowrap}.keypad{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.5rem;margin-block-start:.75rem}.key{min-block-size:3.75rem;border:0;border-radius:.8rem;background:#efefeb;color:inherit;cursor:pointer;font:inherit;font-size:1.2rem;transition:background-color .12s ease,transform .12s ease}.key:hover{background:#e4e4df}.key:active{transform:scale(.97)}.key:focus-visible{outline:3px solid #3578e5;outline-offset:2px}.function{background:#dfe0da}.function:hover{background:#d2d3cc}.operator,.equals{background:#171716;color:#fff}.operator:hover,.equals:hover{background:#33332f}.zero{grid-column:span 2}@media(max-width:360px){.calculator{padding:.75rem;border-radius:1rem}.key{min-block-size:3.35rem}}