*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  :root {
    --bg: #1a1714;
    --panel: #222018;
    --btn-face: #2e2b25;
    --btn-top: #3a362e;
    --btn-shadow: #111009;
    --btn-op: #2a1f10;
    --btn-op-top: #3d2e18;
    --btn-eq: #8b4a0e;
    --btn-eq-top: #c06b18;
    --btn-ac: #1c2a1c;
    --btn-ac-top: #2d4030;
    --accent: #d4820a;
    --accent2: #a35f05;
    --text-screen: #e8d5a0;
    --text-dim: #7a6a45;
    --screw: #3f3a30;
    --led-off: #1d1a12;
    --font-screen: 'Share Tech Mono', monospace;
    --font-label: 'Bebas Neue', sans-serif;
  }

  body {
    min-height: 100vh;
    background: #111009;
    background-image:
      radial-gradient(ellipse at 30% 20%, #1f1c12 0%, transparent 60%),
      repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(255,255,255,.01) 2px, rgba(255,255,255,.01) 4px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-family: var(--font-label);
  }

  .brand {
    color: var(--accent);
    letter-spacing: .4em;
    font-size: 11px;
    text-transform: uppercase;
    margin-bottom: 14px;
    opacity: .6;
    font-family: var(--font-screen);
  }

  #calc {
    position: relative;
    background: var(--panel);
    border-radius: 12px 12px 16px 16px;
    padding: 24px 22px 28px;
    width: 480px;
    box-shadow:
      0 2px 0 #3a3628,
      0 4px 0 #2a2820,
      0 6px 0 #1e1c16,
      0 8px 0 #141310,
      0 12px 40px rgba(0,0,0,.9),
      inset 0 1px 0 rgba(255,255,255,.06);
    border: 1px solid #3a3628;
  }

  /* Screws */
  #calc::before, #calc::after,
  .screw-br, .screw-bl {
    content: '';
    position: absolute;
    width: 10px; height: 10px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #5a5446, var(--screw));
    box-shadow: inset 0 1px 2px rgba(0,0,0,.8), 0 1px 0 rgba(255,255,255,.05);
  }
  #calc::before { top: 12px; left: 12px; }
  #calc::after  { top: 12px; right: 12px; }
  .screw-br { position: absolute; bottom: 14px; right: 12px; }
  .screw-bl { position: absolute; bottom: 14px; left: 12px; }

  /* Screen */
  .screen-bezel {
    background: #0d0c08;
    border-radius: 6px;
    padding: 3px;
    margin-bottom: 20px;
    box-shadow:
      inset 0 3px 8px rgba(0,0,0,.8),
      inset 0 0 0 1px rgba(0,0,0,.9),
      0 1px 0 rgba(255,255,255,.05);
  }

  .screen {
    background: var(--led-off);
    background-image:
      repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(0,0,0,.08) 3px, rgba(0,0,0,.08) 4px);
    border-radius: 4px;
    padding: 12px 14px 10px;
    min-height: 120px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    position: relative;
  }

  .screen::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,.03) 0%, transparent 50%);
    pointer-events: none;
    border-radius: 4px;
  }

  .screen-expr {
    font-family: var(--font-screen);
    font-size: 13px;
    color: var(--text-dim);
    min-height: 18px;
    text-align: right;
    letter-spacing: .05em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .screen-value {
    font-family: var(--font-screen);
    font-size: 36px;
    color: var(--text-screen);
    text-align: right;
    letter-spacing: .03em;
    text-shadow: 0 0 20px rgba(212,130,10,.35), 0 0 4px rgba(212,130,10,.2);
    transition: font-size .1s;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .screen-value.small { font-size: 24px; }
  .screen-value.xsmall { font-size: 18px; }

  /* Grid buttons */
  .grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
  }

  /* Button base */
  button {
    all: unset;
    cursor: pointer;
    user-select: none;
    position: relative;
    border-radius: 6px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-label);
    font-size: 22px;
    letter-spacing: .05em;
    color: #c5b99a;
    background: var(--btn-top);
    box-shadow:
      0 4px 0 var(--btn-shadow),
      inset 0 1px 0 rgba(255,255,255,.08),
      inset 0 -1px 0 rgba(0,0,0,.3);
    transition: transform .07s, box-shadow .07s, filter .07s;
    -webkit-tap-highlight-color: transparent;
  }

  button:active {
    transform: translateY(3px);
    box-shadow:
      0 1px 0 var(--btn-shadow),
      inset 0 1px 0 rgba(255,255,255,.04),
      inset 0 2px 4px rgba(0,0,0,.4);
    filter: brightness(.85);
  }

  /* Number buttons */
  .n button { background: var(--btn-top); color: #d4c9a8; }

  /* Operator buttons */
  .op button {
    background: var(--btn-op-top);
    color: var(--accent);
    font-size: 20px;
    box-shadow:
      0 4px 0 #180e04,
      inset 0 1px 0 rgba(255,200,80,.08),
      inset 0 -1px 0 rgba(0,0,0,.4);
  }

  /* Equals */
  .eq button {
    background: var(--btn-eq-top);
    color: #fff8ee;
    font-size: 26px;
    box-shadow:
      0 4px 0 #4a2503,
      inset 0 1px 0 rgba(255,200,80,.15),
      inset 0 -1px 0 rgba(0,0,0,.3);
    text-shadow: 0 0 12px rgba(255,180,80,.4);
  }

  .eq button:hover { filter: brightness(1.1); }

  /* AC button */
  .ac button {
    background: var(--btn-ac-top);
    color: #7ecf7e;
    font-size: 18px;
    letter-spacing: .08em;
    box-shadow:
      0 4px 0 #0a140a,
      inset 0 1px 0 rgba(100,255,100,.07),
      inset 0 -1px 0 rgba(0,0,0,.3);
  }

  /* Span cols */
  .span2 { grid-column: span 2; }

  /* All buttons fill their grid cell */
  button { width: 100%; }

  /* Hover glow */
  button:hover { filter: brightness(1.08); }

  /* Operator symbol */
  .op-sym { font-family: var(--font-screen); font-size: 24px; }

  /* Label below calc */
  .model-label {
    margin-top: 10px;
    font-family: var(--font-screen);
    font-size: 10px;
    color: #3a3428;
    letter-spacing: .3em;
    text-transform: uppercase;
  }

  /* Flash animation */
  @keyframes flash {
    0%,100% { opacity: 1; }
    50%      { opacity: .4; }
  }
  .flash { animation: flash .15s ease 2; }

  /* Error red tint */
  .error { color: #e05a40 !important; text-shadow: 0 0 16px rgba(220,60,30,.5) !important; }
</style>