:root { color-scheme: light; --page: #f1ebd7; --paper: #80968b; --ink: #000; background: var(--page); color: var(--ink); }
* { box-sizing: border-box; }
body { margin: 0; font-family: "Courier New", Courier, monospace; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
main { min-height: 100svh; display: grid; place-items: center; padding: 20px; overflow: clip; }
.calculator { position: relative; width: min(760px, calc((100svh - 40px) * .806897), 100%); aspect-ratio: 140.4 / 174; container-type: inline-size; transition: transform 650ms ease-in-out; }
.calculator.upside-down { transform: rotate(180deg); }
.calculator::before { content: ""; position: absolute; inset: 0; background: var(--paper); -webkit-mask: url("../art/calculator-outline.5970c38adf63.svg") center / 100% 100% no-repeat; mask: url("../art/calculator-outline.5970c38adf63.svg") center / 100% 100% no-repeat; }
.ascii { position: relative; margin: 0; padding: 0; border: 0; width: 100%; font-family: "Courier New", Courier, monospace; font-size: calc(100cqw / 140.4); font-style: italic; font-weight: 700; line-height: 1; letter-spacing: 0; font-variant-ligatures: none; white-space: pre; user-select: none; pointer-events: none; }
.keys { display: none; }
.interactive .keys { display: contents; }
button { position: absolute; margin: 0; padding: 0; border: 0; border-radius: 3px; background: transparent; color: inherit; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: background-color 100ms ease, transform 100ms ease; }
button.selected { background: rgb(0 0 0 / .035); }
button:active, button.pressed { background: rgb(0 0 0 / .085); transform: translateY(1px); }
button:focus-visible { outline: 1px solid var(--ink); outline-offset: -3px; }
@media (hover: hover) { button:hover { background: rgb(0 0 0 / .025); } button.pressed:hover { background: rgb(0 0 0 / .085); } }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 600px) {
  main { padding: 16px 8px; }
  .calculator { width: min(100%, 600px); }
}
@media (prefers-reduced-motion: reduce) { button, .calculator { transition: none; } }