*,:before,:after{box-sizing:border-box;margin:0;padding:0}button,input{font:inherit;border:none}html{font-family:Outfit,monospace;font-size:62.5%}body{background:#e0e5ec;font-size:1.6rem}.calculator__buttons{grid-template-columns:repeat(4,1fr);gap:1.6rem;margin-top:2rem;display:grid}.calculator__button{color:#2d3748;cursor:pointer;background-color:#e0e5ec;border:0;border-radius:1.6rem;min-height:6rem;font-size:2rem;font-weight:600;transition:box-shadow .15s,transform .15s;box-shadow:-8px -8px 16px #fff,8px 8px 16px #a3b1c6}.calculator__button:hover{transform:translateY(-1px)}.calculator__button:active{transform:translateY(0);box-shadow:inset -6px -6px 12px #fff,inset 6px 6px 12px #a3b1c6}.calculator__button--action,.calculator__button--operator{color:#4a90e2}.calculator__button--equals{color:#fff;background-color:#4a90e2}.calculator__button--zero{grid-column:span 2}.calculator__button:focus-visible{outline-offset:3px;outline:3px solid #4a90e2}.calculator__display{background-color:#e0e5ec;border-radius:2rem;flex-direction:column;justify-content:flex-end;align-items:flex-end;min-height:10rem;margin-top:2rem;padding:2rem;display:flex;overflow:hidden;box-shadow:inset -6px -6px 12px #fff,inset 6px 6px 12px #a3b1c6}.calculator__expression{color:#718096;text-align:right;text-overflow:ellipsis;white-space:nowrap;width:100%;font-size:1.8rem;overflow:hidden}.calculator__result{color:#2d3748;text-align:left;text-overflow:ellipsis;white-space:nowrap;width:100%;font-size:3.6rem;font-weight:600;overflow:hidden}.calculator__clock{border-radius:1.6rem;justify-content:center;align-items:center;padding:1.6rem;display:flex;box-shadow:-8px -8px 16px #fff,8px 8px 16px #a3b1c6}.calculator__time{color:#2d3748;letter-spacing:.15rem;font-variant-numeric:tabular-nums;font-size:1.8rem;font-weight:600}.calculator__time.clock-update{animation:.3s clock-tick}@keyframes clock-tick{0%{opacity:.4;transform:translateY(-2px)}to{opacity:1;transform:translateY(0)}}.calculator-section{place-items:center;min-height:100vh;padding:2rem;display:grid}.calculator{width:min(100%,40rem);min-width:0;padding:2rem;overflow-y:hidden}@media (width>=768px){.calculator-section{padding:4rem}.calculator{width:min(100%,45rem)}}.calculator__header{justify-content:space-between;align-items:center;display:flex}.container{max-width:1200px;margin-inline:auto}