* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: #f8f9fa; }
body { font-family: Arial, Helvetica, sans-serif; }
.stage { position: fixed; inset: 0; overflow: hidden; }
.calculator { position: absolute; left: 50%; top: 50%; transform-origin: center; user-select: none; -webkit-user-select: none; }
.original-skin { position: absolute; inset: 0; display: block; width: 450px; height: 282px; pointer-events: none; }
.lcd-digit { position: absolute; z-index: 2; pointer-events: none; fill: #172119; }
.indicator { position: absolute; z-index: 3; font: 9px Arial,sans-serif; color: #172119; pointer-events: none; }
.legend-fix { position: absolute; z-index: 3; height: 9px; color: #27b4e2; background: linear-gradient(#272d2a,#232927); font: bold 6.8px/9px Arial,sans-serif; text-align: center; pointer-events: none; }
.legend-one { left: 277px; top: 201px; width: 22px; }
.legend-two { left: 317px; top: 201px; width: 22px; }
.legend-test { left: 156px; top: 201px; width: 23px; }
.key { position: absolute; z-index: 4; border: 0; border-radius: 3px; padding: 0; background: transparent; color: transparent; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.key:active,.key.pressed { background: #ffffff55; }
.key:focus-visible { outline: 2px solid #ffffff; outline-offset: -2px; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }