body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;background:radial-gradient(circle at center,#1e1e1e,#121212);display:flex;justify-content:center;align-items:center;height:100vh;margin:0;overflow:hidden}.calculator{background:linear-gradient(135deg,#2b2b2b,#1c1c1c);padding:24px;border-radius:18px;box-shadow:0 10px 25px #0009;width:340px;transition:transform .3s ease}.calculator:hover{transform:scale(1.02)}.display{background:#000;color:#0f9;font-size:2.2rem;padding:18px;text-align:right;margin-bottom:20px;border-radius:10px;min-height:60px;overflow-x:auto;white-space:nowrap;box-shadow:inset 0 0 10px #0f0}.buttons{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}button{padding:20px;font-size:1.2rem;background:linear-gradient(145deg,#3a3a3a,#2a2a2a);color:#fff;border:none;border-radius:12px;cursor:pointer;box-shadow:0 4px 8px #0006;transition:all .3s ease;position:relative;overflow:hidden}button:after{content:"";position:absolute;background:#fff3;width:100%;height:0;top:0;left:0;transition:height .3s ease}button:hover:after{height:100%}button:hover{background:linear-gradient(145deg,#505050,#3c3c3c);transform:scale(1.05)}.clear{grid-column:span 2;background:linear-gradient(145deg,#ff4e50,#c1352e);color:#fff}.clear:hover{background:linear-gradient(145deg,#ff6a6d,#d6443b)}.equal{grid-column:span 2;background:linear-gradient(145deg,#2ecc71,#27ae60);color:#fff}.equal:hover{background:linear-gradient(145deg,#48e89a,#2fc87b)}@media (max-width: 420px){.calculator{width:90vw;padding:18px;border-radius:14px}.display{font-size:1.8rem;padding:14px}button{padding:16px;font-size:1rem;border-radius:10px}.buttons{gap:10px}}