*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:linear-gradient(135deg,#0d0d0d 0%,#1a1a1a 100%);color:#fff;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;display:flex;align-items:center;justify-content:center}
.calculator{width:320px;background:linear-gradient(180deg,#0a0a0a,#121212);border-radius:24px;padding:16px;box-shadow:0 20px 40px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.06);border:1px solid #242424}
.display{position:relative;height:80px;display:flex;align-items:flex-end;justify-content:flex-end;padding:0 12px;font-weight:300;overflow:hidden;letter-spacing:.5px;text-shadow:0 1px 2px rgba(0,0,0,.6)}
.display::after{content:"";position:absolute;left:12px;right:12px;top:8px;height:40%;border-radius:12px;background:linear-gradient(to bottom,rgba(255,255,255,.06),transparent);pointer-events:none}
.keys{display:grid;grid-template-columns:repeat(4,1fr);grid-gap:10px}
.btn{height:56px;border-radius:28px;font-size:22px;color:#fff;background:linear-gradient(#5a5a5a,#3f3f3f);border:1px solid #2a2a2a;cursor:pointer;transition:transform .05s ease,filter .1s ease,box-shadow .1s ease}
.btn:hover{filter:brightness(1.05)}
.btn:active{transform:scale(.98);filter:brightness(.95)}
.btn.func{background:linear-gradient(#d6d6d6,#a6a6a6);color:#000;border-color:#9a9a9a}
.btn.op,.btn.eq{background:linear-gradient(#ffb74a,#ff8f00);color:#fff;border-color:#cc7f12;box-shadow:0 6px 12px rgba(255,159,10,.3)}
.btn.zero{grid-column:span 2;text-align:left;padding-left:24px}
.btn:focus{outline:2px solid #fff3}
.btn[aria-pressed="true"],.btn.active{filter:brightness(1.15)}
@media (min-width:420px){.calculator{width:360px}.display{height:96px}.btn{height:64px}}