*,:after,:before{box-sizing:border-box;margin:0;padding:0}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;min-height:100vh;display:flex;align-items:center;justify-content:center;background:#fafafa;color:#111}main{text-align:center;padding:2rem}h1{font-size:2rem;font-weight:600}.calculator{width:320px;background:#1c1c1c;border-radius:16px;padding:20px;box-shadow:0 20px 60px rgba(0,0,0,.2)}.display{color:#fff;font-size:3rem;font-weight:300;text-align:right;padding:12px 8px 20px;min-height:80px;overflow:hidden;word-wrap:break-word}.keys{display:grid;grid-template-columns:repeat(4,1fr);grid-gap:10px;gap:10px}.key{height:64px;border:none;border-radius:999px;background:#333;color:#fff;font-size:1.5rem;cursor:pointer;transition:filter .1s ease}.key:hover{filter:brightness(1.2)}.key:active{filter:brightness(1.4)}.key-fn{background:#a5a5a5;color:#000}.key-op{background:#ff9f0a;color:#fff}.key-wide{grid-column:span 2;border-radius:999px;text-align:left;padding-left:26px}