:root{--bg-color: #0f172a;--calc-bg: rgba(30, 41, 59, .7);--btn-bg: rgba(51, 65, 85, .5);--btn-hover: rgba(71, 85, 105, .8);--btn-active: rgba(100, 116, 139, 1);--accent-color: #38bdf8;--operator-color: #f59e0b;--util-color: #94a3b8;--text-color: #f8fafc;--shadow: 0 25px 50px -12px rgba(0, 0, 0, .5)}*{box-sizing:border-box;margin:0;padding:0;font-family:Outfit,sans-serif}body{background:radial-gradient(circle at top left,#1e293b,#0f172a);height:100vh;display:flex;justify-content:center;align-items:center;color:var(--text-color);overflow:hidden}.calculator-container{perspective:1000px}.calculator{background:var(--calc-bg);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.1);padding:2rem;border-radius:2rem;box-shadow:var(--shadow);width:380px;transform-style:preserve-3d;animation:float 6s ease-in-out infinite}@keyframes float{0%,to{transform:translateY(0) rotateX(2deg)}50%{transform:translateY(-20px) rotateX(-2deg)}}.display{background:#0f172a80;margin-bottom:2rem;padding:1.5rem;border-radius:1.5rem;text-align:right;min-height:120px;display:flex;flex-direction:column;justify-content:flex-end;word-wrap:break-word;word-break:break-all;border:1px solid rgba(255,255,255,.05)}.previous-operand{color:#ffffff80;font-size:1.2rem;min-height:1.5rem}.current-operand{color:var(--text-color);font-size:2.5rem;font-weight:600;margin-top:.5rem;transition:all .2s ease}.buttons{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}.btn{border:none;background:var(--btn-bg);color:var(--text-color);aspect-ratio:1;border-radius:1rem;font-size:1.5rem;font-weight:400;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);display:flex;justify-content:center;align-items:center;position:relative;overflow:hidden}.btn:hover{background:var(--btn-hover);transform:translateY(-2px);box-shadow:0 4px 12px #0003}.btn:active{transform:scale(.95);background:var(--btn-active)}.btn-operator{color:var(--operator-color);background:#f59e0b1a}.btn-operator:hover{background:#f59e0b33}.btn-util{color:var(--util-color);font-size:1.2rem}.btn-equal{background:var(--accent-color);color:#0f172a;font-weight:600;aspect-ratio:auto}.btn-equal:hover{background:#7dd3fc;box-shadow:0 0 20px #38bdf866}.span-two{grid-column:span 2;aspect-ratio:auto}.pop-in{animation:popIn .2s ease-out}@keyframes popIn{0%{transform:scale(.8);opacity:0}to{transform:scale(1);opacity:1}}