@import "https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Space+Grotesk:wght@400;500;600;700&display=swap";*{box-sizing:border-box}body{color:#172438;background:#e8edf2;min-width:320px;margin:0;font-family:Space Grotesk,sans-serif}button{font:inherit}.app-shell{background:radial-gradient(circle at 20% 15%,#fff 0 2%,#0000 25%),linear-gradient(135deg,#e9eff4,#d7e0ea);place-items:center;min-height:100vh;padding:24px;display:grid}.calculator{background:#f9fbfd;border:1px solid #cbd6e2;border-radius:30px;width:min(100%,390px);padding:22px;box-shadow:0 24px 60px #65748d3d,0 3px 8px #65748d25}header,footer,.brand{align-items:center;display:flex}header{color:#59697f;letter-spacing:.12em;justify-content:space-between;padding:2px 2px 19px;font:500 10px DM Mono,monospace}.brand{color:#263750;gap:8px}.brand-mark{color:#ee8b54;font-size:15px;line-height:1}.mode{background:#eef2f6;border-radius:99px;padding:5px 8px}.display{color:#f7fbff;background:#172438;border-radius:18px;flex-direction:column;justify-content:end;align-items:flex-end;min-height:125px;margin-bottom:18px;padding:17px 18px;display:flex;overflow:hidden;box-shadow:inset 0 1px #ffffff12}.display p{color:#9dafc4;letter-spacing:.03em;min-height:17px;margin:0 0 7px;font:400 11px DM Mono,monospace}output{letter-spacing:-.08em;white-space:nowrap;max-width:100%;font:500 clamp(38px,11vw,54px)/1 DM Mono,monospace;overflow:hidden}.keypad{grid-template-columns:repeat(4,1fr);gap:10px;display:grid}.keypad button{cursor:pointer;color:#24354d;background:#edf2f6;border:0;border-radius:15px;height:58px;font-size:20px;font-weight:600;transition:transform .12s,filter .12s;box-shadow:0 2px #d4dde7}.keypad button:hover{filter:brightness(.96)}.keypad button:active{box-shadow:none;transform:translateY(2px)}.keypad .wide{text-align:left;grid-column:span 2;padding-left:25px}.keypad .muted{color:#53667c;background:#e3eaf0}.keypad .warm{color:#ce6535;background:#fff0e9;box-shadow:0 2px #f0d7ca}.keypad .accent{color:#4373a4;background:#e0edf7;box-shadow:0 2px #c5dceb}.keypad .equals{color:#fff;background:#ee8952;box-shadow:0 2px #c86d3d}footer{color:#94a1b1;letter-spacing:.08em;justify-content:space-between;padding:17px 3px 0;font:400 9px DM Mono,monospace}@media (width<=390px){.app-shell{padding:12px}.calculator{border-radius:24px;padding:17px}.keypad button{height:54px}}