@import"https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap";:root{font-family:DM Sans,system-ui,sans-serif;color:#333;background:#f6f6f5;font-synthesis:none}*{box-sizing:border-box}body{margin:0;min-width:300px}button{font:inherit}.page{min-height:100svh;min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:max(32px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(32px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));background:#f6f6f5 url(/calculator-background.jpg) center / 100% 100% no-repeat}.calculator{width:min(100%,1100px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,500px);align-items:center;gap:clamp(32px,6vw,96px)}.readout,.controls{min-width:0}.display{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;min-height:180px;padding:24px;overflow:hidden;border:1px solid #d6d3cf;border-radius:8px;background:#fffffff0;box-shadow:0 10px 30px #33333312}.expression{min-height:24px;max-width:100%;overflow:hidden;color:#666;font-size:14px;white-space:nowrap;text-overflow:ellipsis}.value{max-width:100%;overflow:auto hidden;font-family:Space Grotesk,sans-serif;font-size:clamp(52px,7vw,88px);font-weight:500;line-height:1.3;letter-spacing:-.055em;white-space:nowrap;scrollbar-width:thin}.keypad{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:11px}.scientific-keypad{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-bottom:16px}.scientific-keypad .key{aspect-ratio:1.28;border-radius:7px;font-size:16px;color:#fff;background:#3b3b3b}.scientific-keypad .key:hover{background:#515151}.scientific-keypad .key.mode{color:#fff;background:#4a4a4a}.scientific-keypad .key.mode:hover{background:#606060}.scientific-keypad .key.mode.active{background:#a83b16;color:#fff}.scientific-keypad .key.mode.active:hover{background:#92300f}.key{min-width:0;aspect-ratio:1.12;border:1px solid #292929;border-radius:8px;color:#fff;background:#333;font-family:Space Grotesk,sans-serif;font-size:25px;font-weight:500;cursor:pointer;transition:background .15s,transform .15s,box-shadow .15s}.key:hover{background:#494949;transform:translateY(-2px)}.key:active{transform:translateY(1px)}.key:focus-visible{outline:3px solid #e95420;outline-offset:2px}.key.utility{color:#fff;background:#4b4b4b;border-color:#383838;font-size:20px}.key.utility:hover{background:#606060}.key.operator{color:#fff;background:#424242;border-color:#303030}.key.operator:hover{background:#575757}.key.equals{color:#fff;background:#e95420;border-color:#c34113;font-weight:700}.key.equals:hover{background:#cf4517;box-shadow:0 6px 18px #e9542038}@media(max-width:820px){.calculator{max-width:460px;grid-template-columns:minmax(0,1fr);gap:24px}.display{min-height:100px}.value{font-size:clamp(42px,10vw,58px)}}@media(max-width:420px){.keypad,.scientific-keypad{gap:8px}.scientific-keypad .key{font-size:14px}}@media(max-height:850px){.page{padding-top:max(12px,env(safe-area-inset-top));padding-bottom:max(12px,env(safe-area-inset-bottom))}.display{min-height:96px;padding:10px 14px}.value{font-size:clamp(42px,7vw,68px)}.scientific-keypad{margin-bottom:10px}.scientific-keypad .key{height:clamp(32px,5.3dvh,46px);aspect-ratio:auto}.keypad .key{height:clamp(38px,7dvh,58px);aspect-ratio:auto}}@media(max-height:650px){.display{min-height:76px}}@media(max-height:560px){.page{padding-top:max(4px,env(safe-area-inset-top));padding-bottom:max(4px,env(safe-area-inset-bottom))}.display{min-height:58px;padding:6px 10px}.expression{min-height:18px;font-size:11px}.value{font-size:30px}.scientific-keypad{gap:4px;margin-bottom:6px}.scientific-keypad .key{height:28px;font-size:13px}.keypad{gap:4px}.keypad .key{height:32px;font-size:20px}}@media(max-width:820px){.page{padding-top:max(12px,env(safe-area-inset-top,0px));padding-bottom:max(12px,env(safe-area-inset-bottom,0px))}}@media(max-width:820px)and (orientation:portrait){html,body,#root{height:100%;overflow:hidden;overscroll-behavior:none}.page{height:100dvh;min-height:0;overflow:hidden}.calculator{max-height:100%;gap:clamp(8px,2dvh,24px)}}@media(prefers-reduced-motion:reduce){.key{transition:none}}