:root{color:#172026;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;--surface:#fff;--surface-muted:#e8eef0;--ink:#172026;--ink-muted:#5b6870;--number:#f8fafb;--operator:#0f5d6b;--operator-hover:#0b4c58;--equals:#bd4f19;--equals-hover:#9c4115;--danger:#b42318;--focus:#2d6cdf;background:#f4f7f8;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}body{min-width:320px;min-height:100vh;margin:0}body,button{font:inherit}#app{place-items:center;min-height:100vh;padding:24px;display:grid}.calculator{background:var(--surface);border:1px solid #d7e0e3;border-radius:8px;width:min(100%,380px);padding:18px;box-shadow:0 18px 45px #17202624}.display-shell{color:#fff;background:#10242b;border-radius:8px;align-content:end;gap:8px;min-height:132px;margin-bottom:14px;padding:18px;display:grid}.display{color:#fff;text-align:right;text-overflow:ellipsis;white-space:nowrap;width:100%;min-height:52px;font-size:clamp(2rem,10vw,3rem);font-weight:700;line-height:1.08;overflow:hidden}.expression{color:#b8c8ce;text-align:right;min-height:20px;font-size:.95rem}.error-message{color:#ffcbc5;text-align:right;min-height:20px;margin:0;font-size:.95rem}.keypad{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;display:grid}.key{background:var(--number);min-height:58px;color:var(--ink);cursor:pointer;border:1px solid #d7e0e3;border-radius:8px;font-size:1.2rem;font-weight:700;transition:background .14s,border-color .14s,color .14s,transform 80ms}.key:hover{background:var(--surface-muted)}.key:active{transform:translateY(1px)}.key:focus-visible{outline:3px solid var(--focus);outline-offset:2px}.key.utility{color:var(--ink-muted);background:#edf2f4}.key.operator{border-color:var(--operator);background:var(--operator);color:#fff}.key.operator:hover{background:var(--operator-hover)}.key.equals{border-color:var(--equals);background:var(--equals);color:#fff}.key.equals:hover{background:var(--equals-hover)}.key.wide{grid-column:span 2}.has-error .display{color:#ffd9d4}@media (width<=420px){#app{align-items:stretch;padding:12px}.calculator{align-self:center;padding:14px}.display-shell{min-height:118px;padding:14px}.keypad{gap:8px}.key{min-height:54px}}