body{
  display: flex;
  margin:0;
  background:#0f1115;
  font:16px/1.4 system-ui,sans-serif;
}

.calculator{
  width:min(380px,94vw);
  margin:6vh auto;
  padding:16px;
  background:#151924;
  color:#e6e9ef;
  border:1px solid rgba(255,255,255,.06);
  border-radius:12px;
  box-shadow:0 10px 30px rgba(0,0,0,.3);
  display:grid;
  gap:.6rem;

  position: absolute;
  top: 35%;  
  left: 50%;
  transform: translate(-50%, -50%);
}



.display {
  width: 90%;
  height: 4rem;
  padding: .75rem 1rem;
  text-align: right;
  font-size: clamp(1.6rem, 4.5vw, 2.2rem);
  color: #e6e9ef;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 12px;

  margin-bottom: 0.8rem; 

}




.buttons {
  display: grid;
  gap: .6rem;
  align-items: start;
}

.buttons button{
  height: 3.2rem;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.04);
  color: #e6e9ef;
  font-size: 1.1rem;
  cursor: pointer;
  transition: transform .06s ease, background-color .15s ease, border-color .15s ease;
}
.buttons button:hover{ background: rgba(255,255,255,.07); }
.buttons button:active{ transform: translateY(1px) scale(.99); }


.operators button {
  color: #5f9cff;
  border-color: rgba(95,156,255,.45);
}

.control button {
  color: #ff6b6b;
  border-color: rgba(255,107,107,.45);
}

[data-action="equals"] {
  background: rgba(59,130,246,.2);
  border-color: rgba(59,130,246,.4);
  color: #e6e9ef;
}

.buttons button:active {
  transform: scale(.97);
  box-shadow: 0 0 0 3px rgba(59,130,246,.2) inset;
}


.control {
  display: grid;
  grid-column: 1;
  gap: .6rem;
}
  
.operators  {
  grid-column: 4;
  display: grid;
  gap: .6rem;
}


.numbers {
  grid-column: 2 / span 2;               
  display: grid;
  grid-template-columns: repeat(3, 1fr); 
  gap: .6rem;
}

.zero {
  grid-column: span 2;
}


:focus-visible{ outline:2px solid #3b82f6; outline-offset:2px; }