:root{--bg: #0f1115;--panel: #1a1d24;--key: #2a2f3a;--key-hover: #353b48;--op: #f5a623;--op-hover: #ffb733;--fn: #4a5160;--fn-hover: #586172;--text: #f5f7fa;--display: #ffffff}*{box-sizing:border-box;margin:0;padding:0}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--text);min-height:100vh;display:grid;place-items:center;padding:1rem}.calculator{width:100%;max-width:340px;background:var(--panel);border-radius:1.25rem;padding:1.25rem;box-shadow:0 24px 60px #00000073}.result{display:block;width:100%;text-align:right;font-size:3rem;font-weight:300;color:var(--display);padding:1rem .5rem .25rem;min-height:4rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-variant-numeric:tabular-nums}.expr{width:100%;text-align:right;font-size:1.05rem;color:#8b93a3;min-height:1.5rem;padding:0 .5rem 1rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-variant-numeric:tabular-nums}.keys{display:grid;grid-template-columns:repeat(4,1fr);gap:.625rem}.key{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;border-radius:.875rem;background:var(--key);color:var(--text);font-size:1.5rem;height:64px;cursor:pointer;transition:background .12s ease,transform .06s ease;-webkit-user-select:none;user-select:none}.key:hover{background:var(--key-hover)}.key:active{transform:scale(.96)}.key--op{background:var(--op);color:#1a1d24;font-weight:600}.key--op:hover{background:var(--op-hover)}.key--op[aria-pressed=true]{background:#fff}.key--fn{background:var(--fn)}.key--fn:hover{background:var(--fn-hover)}.key--eq{background:var(--op);color:#1a1d24;font-weight:600}.key--eq:hover{background:var(--op-hover)}