*,*:before,*:after{box-sizing:border-box}html,body{margin:0;padding:0;height:100%;width:100%;overflow:hidden;font-family:Segoe UI,system-ui,sans-serif;background:#b8a088;color:#2c2416}.calc{display:flex;flex-direction:column;height:100%;width:100%;padding:0}.display{flex:0 0 auto;min-height:20vh;margin:.75rem .75rem .5rem;padding:1rem 1.25rem;display:flex;align-items:flex-end;justify-content:flex-end;font-family:"ui-monospace",SF Mono,Cascadia Mono,Consolas,monospace;font-size:clamp(2rem,8vw,3.5rem);font-weight:400;text-align:right;word-break:break-all;letter-spacing:.08em;color:#5cd65c;background:linear-gradient(180deg,#1a261a,#0f180f);border-radius:.75rem;border:3px solid #2d3d2d}.keys{flex:1;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(5,1fr);gap:.35rem;padding:.5rem .75rem .75rem;min-height:0}.key{border:none;border-radius:.5rem;font-family:"ui-monospace",SF Mono,Cascadia Mono,Consolas,monospace;font-size:clamp(1.25rem,5vw,2rem);font-weight:500;cursor:pointer;background-color:#e8dcc8;color:#2c2416;position:relative;transition:background-color .1s,transform .05s}.key:hover{background-color:#efe6d6}.key:active{background-color:#d0c0a8}.key-fn{background-color:#a08060;color:#f0e8dc}.key-fn:hover{background-color:#b09070}.key-fn:focus-visible{outline-style:solid}.key-fn:active{background-color:#806040;transition-duration:16ms}.key-op{background-color:#c06848;color:#fff8f0}.key-op:hover{background-color:#d07858}.key-op:active{background-color:#a04828}.key-equals{background-color:#786848;color:#e8e0d0}.key-equals:hover{background-color:#887858}.key-equals:active{background-color:#584838}.key-zero{grid-column:span 2}