:root{--color-page-bg: #b8a088;--color-text: #2c2416;--color-display-text: #5cd65c;--color-display-bg: #0f180f;--color-display-border: #2d3d2d;--display-min-height: 20vh;--display-margin: .75rem .75rem .5rem;--display-padding: 1rem 1.25rem;--display-font-size: clamp(2rem, 8vw, 3.5rem);--display-letter-spacing: .08em;--display-radius: .75rem;--display-border-width: 3px;--keys-gap: .35rem;--keys-padding: .5rem .75rem .75rem;--key-radius: .5rem;--key-font-size: clamp(1.25rem, 5vw, 2rem);--key-bg: #e8dcc8;--key-bg-hover: #efe6d6;--key-bg-active: #d0c0a8;--key-border-color: var(--color--display-border);--key-border-size: .125em;--key-border-style: solid;--key-transition-duration: .1s;--key-transition-duration-fast: .05s;--key-fn-bg: #a08060;--key-fn-bg-hover: #b09070;--key-fn-bg-active: #806040;--key-fn-color: #f0e8dc;--key-fn-active-duration: 16ms;--key-op-bg: #c06848;--key-op-bg-hover: #d07858;--key-op-bg-active: #a04828;--key-op-color: #fff8f0;--key-equals-bg: #786848;--key-equals-bg-hover: #887858;--key-equals-bg-active: #584838;--key-equals-color: #e8e0d0;--font-ui: "Segoe UI", system-ui, sans-serif;--font-mono: "ui-monospace", "SF Mono", "Cascadia Mono", "Consolas", monospace}*,*:before,*:after{box-sizing:border-box}html,body{background:var(--color-page-bg);color:var(--color-text);font-family:var(--font-ui);height:100%;margin:0;overflow:hidden;padding:0;width:100%}.calc{display:flex;flex-direction:column;height:100%;width:100%;padding:0}.display{align-items:flex-end;background-color:var(--color-display-bg);border-radius:var(--display-radius);border:var(--display-border-width) solid var(--color-display-border);color:var(--color-display-text);display:flex;flex-direction:column;flex:0 0 auto;font-family:var(--font-mono);font-size:var(--display-font-size);font-weight:400;gap:.15em;justify-content:flex-end;letter-spacing:var(--display-letter-spacing);margin:var(--display-margin);min-height:var(--display-min-height);padding:var(--display-padding);text-align:right;word-break:break-all}.display-expr{display:block;font-size:.5em;opacity:.85}.display-value{display:block}.keys{display:grid;flex:1;gap:var(--keys-gap);grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(5,1fr);min-height:0;padding:var(--keys-padding)}.key{background-color:var(--key-bg);border:none;border-radius:var(--key-radius);color:var(--color-text);cursor:pointer;font-family:var(--font-mono);font-size:var(--key-font-size);font-weight:500;outline-color:var(--key-border-color);outline-offset:calc(var(--key-border-size) * -1);outline-width:var(--key-border-size);position:relative;transition:background-color var(--key-transition-duration),transform var(--key-transition-duration-fast)}.key:hover{background-color:var(--key-bg-hover)}.key:focus-visible{outline-style:var(--key-border-style)}.key:active,.key.key-pressed{background-color:var(--key-bg-active)}.key-fn{background-color:var(--key-fn-bg);color:var(--key-fn-color)}.key-fn:hover{background-color:var(--key-fn-bg-hover)}.key-fn:active,.key-fn.key-pressed{background-color:var(--key-fn-bg-active);transition-duration:var(--key-fn-active-duration)}.key-op{background-color:var(--key-op-bg);color:var(--key-op-color)}.key-op:hover{background-color:var(--key-op-bg-hover)}.key-op:active,.key-op.key-pressed{background-color:var(--key-op-bg-active)}.key-equals{background-color:var(--key-equals-bg);color:var(--key-equals-color)}.key-equals:hover{background-color:var(--key-equals-bg-hover)}.key-equals:active,.key-equals.key-pressed{background-color:var(--key-equals-bg-active)}.key-zero{grid-column:span 2}