* {
     box-sizing: border-box;
 }

 body {
     margin: 0;
     min-height: 100vh;
     display: grid;
     place-items: center;
     background-color: #0f0f0f;
     color: #fff;
     font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
 }

 .calculator {
     display: grid;
     grid-template-columns: repeat(4, 80px);
     gap: 10px;
     background-color: #2f2a22;
     padding: 14px;
     border-radius: 16px;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.04);
 }

 .display {
     grid-column: span 4;
     height: 64px;
     padding: 10px 12px;
     border: none;
     border-radius: 10px;
     background: #0f0f0f;
     color: #fff;
     font-size: 28px;
     text-align: right;
     letter-spacing: 1px;
 }

 input::-webkit-outer-spin-button,
 input::-webkit-inner-spin-button {
     -webkit-appearance: none;
     margin: 0;
 }

 .btn {
     appearance: none;
     border: none;
     border-radius: 12px;
     padding: 14px 0;
     font-size: 18px;
     background: #2a2a2a;
     color: #f5f5f5;
     cursor: pointer;
     box-shadow: 0 2px 0 rgba(0, 0, 0, 0.4);
 }

 .btn:active {
     filter: brightness(1.1);
 }

 .zero {
     grid-column: span 2;
 }

 .op {
     background-color: #524023;
     color: #f39c12;
     font-weight: 600;
 }