body{font-family:system-ui,Arial,sans-serif;margin:0;padding:2rem;background:#f5f7fa;color:#222}.app-container{max-width:420px;margin:0 auto}.calculator{background:#fff;border-radius:12px;padding:1rem;box-shadow:0 4px 16px #00000014;position:relative;overflow:hidden}.display{background:#111;color:#0f0;font:600 1.5rem/1.2 monospace;padding:1rem;border-radius:8px;margin-bottom:1rem;min-height:2.25rem;display:flex;align-items:center;justify-content:flex-end}.buttons{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem}button{padding:.75rem;font-size:1.1rem;font-weight:500;border:1px solid #ccc;border-radius:8px;background:#fafafa;cursor:pointer;transition:background .15s,transform .05s}button:hover{background:#f0f0f0}button:active{transform:scale(.97)}.op-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;animation:opFade .9s ease forwards;mix-blend-mode:screen}.op-overlay .op-symbol{font-size:clamp(3rem,15vw,10rem);font-weight:700;opacity:.15;will-change:transform,opacity}@keyframes opFade{0%{background:#fff0}10%{background:radial-gradient(circle at center,#fff9,#fff0)}to{background:#fff0}}@keyframes plusAnim{0%{transform:scale(.1) rotate(-140deg);opacity:0}35%{transform:scale(1.05) rotate(8deg);opacity:.75}65%{transform:scale(.95) rotate(-4deg);opacity:.55}to{transform:scale(1.3) rotate(18deg);opacity:0}}@keyframes minusAnim{0%{transform:translate(-70%) scale(.4);opacity:0}30%{transform:translate(-10%) scale(1.05);opacity:.7}55%{transform:translate(10%) scale(.95);opacity:.5}to{transform:translate(85%) scale(.85);opacity:0}}@keyframes multAnim{0%{transform:scale(.05) rotate(360deg);opacity:0;filter:blur(4px)}25%{transform:scale(1.1) rotate(-10deg);opacity:.8;filter:blur(0)}55%{transform:scale(.95) rotate(6deg);opacity:.55}to{transform:scale(.3) rotate(-110deg);opacity:0;filter:blur(6px)}}@keyframes divAnim{0%{transform:scale(.15) translateY(-40%) skew(-35deg);opacity:0;letter-spacing:-.35em}35%{transform:scale(1.05) translateY(4%) skew(2deg);opacity:.75;letter-spacing:0}70%{transform:scale(1.15) translateY(-6%) skew(-4deg);opacity:.55}to{transform:scale(1.4) translateY(25%) skew(18deg);opacity:0;letter-spacing:.25em}}.op-plus{background:radial-gradient(circle at 50% 50%,#00c8ff73,#0064ff00)}.op-plus .op-symbol{color:#29c7ff;animation:plusAnim .95s cubic-bezier(.65,.1,.25,1) forwards;text-shadow:0 0 12px rgba(0,190,255,.6)}.op-plus:before{content:"";position:absolute;width:140%;height:140%;border-radius:50%;background:radial-gradient(circle,#00ffff40,#00a0ff00);animation:pulseRing .95s ease-out forwards}.op-minus{background:linear-gradient(90deg,#ff007880,#78002800 70%)}.op-minus .op-symbol{color:#ff4b94;animation:minusAnim .95s cubic-bezier(.7,.05,.25,1) forwards;text-shadow:0 0 10px rgba(255,40,140,.55)}.op-minus:after{content:"";position:absolute;top:45%;left:0;right:0;height:4px;background:linear-gradient(90deg,#ff4b94,#ffb0d7);filter:blur(2px);animation:sweepTrail .95s ease forwards}.op-multiply{background:radial-gradient(circle at 70% 40%,#ffc8008c,#ff780000)}.op-multiply .op-symbol{color:#ffc733;animation:multAnim 1s cubic-bezier(.6,.1,.3,1) forwards;text-shadow:0 0 14px rgba(255,180,0,.6)}.op-multiply:before,.op-multiply:after{content:"";position:absolute;width:130%;height:130%;top:-15%;left:-15%;background:conic-gradient(from 0deg,#ffc80066,#ff78001a,#ffc80066);mix-blend-mode:overlay;animation:spinAura 1s linear forwards;border-radius:50%}.op-divide{background:linear-gradient(135deg,#78ffb48c,#00c87800)}.op-divide .op-symbol{color:#19d68c;animation:divAnim 1s cubic-bezier(.65,.05,.3,1) forwards;text-shadow:0 0 12px rgba(40,255,170,.55)}.op-divide:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(45deg,#00ffaa26 0 12px,#0000 12px 24px);opacity:.6;animation:driftGrid 1s ease forwards}@keyframes pulseRing{0%{transform:scale(.2);opacity:.9}70%{transform:scale(1);opacity:.4}to{transform:scale(1.3);opacity:0}}@keyframes sweepTrail{0%{transform:translate(-60%) scaleX(.2);opacity:0}40%{opacity:.9}to{transform:translate(110%) scaleX(1.4);opacity:0}}@keyframes spinAura{0%{transform:rotate(0) scale(.4);opacity:.7}60%{opacity:.55}to{transform:rotate(220deg) scale(1.1);opacity:0}}@keyframes driftGrid{0%{opacity:.05;transform:translate(-8%) translateY(-8%) scale(1.1)}50%{opacity:.5}to{opacity:0;transform:translate(6%) translateY(6%) scale(1.25)}}.melt{animation:meltDown 1.8s ease forwards}@keyframes meltDown{0%{transform:translateY(0) scale(1);filter:none;opacity:1}30%{transform:translateY(5px) scaleX(1.02)}50%{transform:translateY(15px) scaleX(.98) skewY(2deg)}70%{transform:translateY(40px) scaleX(1.05) skewY(6deg);filter:blur(1px)}90%{transform:translateY(140%) scaleX(1.2) skewY(14deg);filter:blur(6px);opacity:.4}to{transform:translateY(180%) scaleX(1.25) skewY(18deg);filter:blur(12px);opacity:0}}
