*{box-sizing:border-box}body{margin:0;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background-color:#ececec}#container{display:flex;flex-direction:column;justify-content:center;height:100svh;padding:1rem}#calculator{width:min(90vw,420px);height:min(700px,90svh);margin:auto;background-color:#4a4a4a;padding:20px;border-radius:20px;box-shadow:0 18px 36px rgba(0, 0, 0, 0.22)}#output{width:100%;height:10%;background-color:#f7f0df;margin-bottom:5%;font-family:"Courier New",Courier,monospace;font-size:clamp(1.5rem,5vw,2rem);font-weight:700;padding:.75rem;border-radius:10px;display:flex;align-items:center;justify-content:flex-end;overflow-x:auto;overflow-y:hidden;color:#222;box-shadow:inset 0 2px 8px rgba(0, 0, 0, 0.18)}#inputGrid{height:85%;display:grid;grid-template-columns:repeat(4, 1fr);grid-template-rows:repeat(5, 1fr);justify-items:stretch;gap:10px}button{border:0;border-radius:10px;background-color:#f4f4f4;color:#222;font-size:1.25rem;font-weight:700;cursor:pointer;box-shadow:inset 0 -3px 0 rgba(0, 0, 0, 0.12);transition:background-color .2s,transform .1s}button:hover{background-color:#fff}button:active{transform:translateY(2px);box-shadow:inset 0 -1px 0 rgba(0, 0, 0, 0.18)}.operator,.equals{background-color:#d9893d;color:white}.operator:hover,.equals:hover{background-color:#e69a50}.clear,.delete{background-color:#686868;color:white}.clear:hover,.delete:hover{background-color:#777}@media(max-width: 1400px){#calculator{height:500px}}@media(max-width: 1000px){#calculator{width:min(90vw,420px)}}@media(max-width: 600px){#calculator{padding:12px}}