@font-face {
  font-family: 'DSEG7';
  src: url('../fonts/sharetechmono-regular.woff') format('woff');
  }
:root {
  --green:#2d3b2d;
  --display:#a6bca1;
  --red:#d32f2f;
  --yellow:#ffeb3b;
  }
* {
  box-sizing:border-box
  }
body {
  margin:0;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--green);
  font-family:Arial, sans-serif;
  }
.calculator {
  width:100%;
  max-width: 450px;
  margin: auto;
  overflow-x: auto;
  padding:18px;
  border-radius:12px;
  background:var(--green);
  box-shadow:0 0 20px rgba(0,0,0,0.45);
  }
.title { 
  color:#fff; 
  text-align:center; 
  font-weight:700; 
  margin-bottom:10px 
  }
.display {
  background:var(--display);
  font-family:'DSEG7', monospace;
  font-size:2.0em;
  padding:12px;
  border-radius:6px;
  text-align:right;
  box-shadow: inset 0 0 6px rgba(0,0,0,0.4);
  min-height:46px;
  overflow:hidden;
  white-space:nowrap;
  }
.display .sign {
  font-size:0.6em;
  vertical-align:super;
  margin-right:6px;
  }
.buttons {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
  margin-top:12px;
  }
.btn {
  padding:12px;
  border-radius:6px;
  border:none;
  background:#f5f5f5;
  font-size:1.5em;
  cursor:pointer;
  box-shadow:0 2px 3px rgba(0,0,0,0.25);
  user-select:none;
  }
.btn:active { 
  box-shadow: inset 0 2px 5px rgba(0,0,0,0.45) 
  }
.bottom-row { 
  display:flex; 
  gap:10px; 
  margin-top:12px 
  }
.btn-red { 
  background:var(--red); 
  color:#fff; 
  flex:3; 
  font-weight:700 
  }
.btn-yellow { 
  background:var(--yellow); 
  font-weight:700; 
  flex:1 
  }
label { 
  color:#fff; 
  display:block; 
  margin-top:10px; 
  font-size:0.9em 
  }
input[type="checkbox"] { 
  transform:scale(1.1); 
  margin-right:6px; 
  vertical-align:middle 
  }