:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color:#022a16;background-color:#fff;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}html{height:100%;touch-action:none}body{margin:0;display:flex;min-width:320px;height:100%}#app{margin:0;padding:2rem;text-align:center;flex-grow:1}.App{display:flex;flex-direction:column;height:100%}.Display{position:relative;flex-grow:.5;display:flex;align-items:center;font-size:10vw;justify-content:center}.Equation{flex-grow:1;flex-basis:50%;display:flex;justify-content:flex-end;margin-right:.8ch}.Input{flex-basis:50%;display:flex;justify-content:flex-start;margin-left:.8ch;transform:translateY(0);transition:transform 1s,opacity 2s}.Input.incorrect{color:red;transform:translateY(2em);opacity:0}.Keypad{margin:auto;display:grid;gap:.5em;grid-template-columns:repeat(4,8vw);grid-auto-rows:8vw}.Keypad .delete-key{overflow:hidden;grid-column:4;grid-row:1 / 3;background-color:#ffcdaf}.Keypad .enter-key{background-color:#faedae;overflow:hidden;grid-column:4;grid-row:3 / 5;writing-mode:vertical-lr}.Keypad .zero-key{grid-column:2}.Key{font-size:4vw;color:inherit;font-family:inherit;border:none;border-radius:.5em;padding:.25em;background-color:#fff;box-shadow:2px 2px 5px -1px #000}.Key:hover{outline:1px solid #ffffffa0}.Key:active{transform:translate(1px,1px);box-shadow:1px 1px 5px -1px #000}@media (min-aspect-ratio: 1){.App{flex-direction:row}.Display{flex-direction:column}.Equation,.Input{margin:0;flex-basis:1.5em;flex-grow:0;flex-shrink:0}}