:root{--bg-color:#0f172a;--card-bg:#0e172a;--display-bg:#1e293b;--btn-bg:#334155;--border-color:#334155;--text-color:#fff;--op-bg:black;--eq-bg:#22c55e;--clear-bg:black;--op-btn:#f97316;--eq-btn:black;--clear-btn:#ef4444;--key-bg:#2d3142}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-color)}.calculator-card{border:2px solid var(--border-color);background-color:var(--card-bg);border-radius:20px;flex-direction:column;gap:20px;width:fit-content;margin:50px auto;padding:40px;display:flex}.display-screen{background-color:var(--display-bg);border:2px solid var(--border-color);color:var(--text-color);white-space:nowrap;border-radius:10px;justify-content:flex-end;align-items:center;margin-bottom:20px;padding:30px;font-family:Courier New,Courier,monospace;font-size:2.5rem;display:flex;overflow-x:auto}.key{background-color:var(--key-bg);cursor:pointer;border:2px solid #0000;border-radius:15px;padding:20px 25px;font-size:1.5rem}.key:hover{transform:scale(1.05)}.keypad{grid-template-columns:repeat(4,1fr);gap:10px;display:grid}.key-operator{color:var(--op-btn);background-color:var(--op-bg)}.key-clear{color:var(--clear-btn);background-color:var(--clear-bg)}.key-equals{color:var(--eq-btn);background-color:var(--eq-bg);grid-area:3/4/5;justify-content:center;align-items:center;display:grid}@media (width<=500px){.calculator-card{border-radius:15px;gap:15px;width:90vw;max-width:400px;margin:20px auto;padding:20px}.display-screen{margin-bottom:15px;padding:20px;font-size:2rem}.key{padding:15px;font-size:1.25rem}.keypad{gap:8px}}.note{color:gray;text-align:center;font-size:.9rem}