:root{--background:#fff;--foreground:#171717}@media (prefers-color-scheme:dark){:root{--background:#0a0a0a;--foreground:#ededed}}body:before{content:"";position:fixed;top:0;left:0;height:100vh;width:100vw;background:hsla(0,0%,100%,.3);z-index:-1}@media (prefers-color-scheme:dark){body:before{background:rgba(0,0,0,.4)}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.logo:hover{box-shadow:0 0 20px rgba(255,105,180,.6);transition:box-shadow .3s ease}@keyframes zoomIn{0%{transform:scale(.8);opacity:0}to{transform:scale(1);opacity:1}}@keyframes slideIn{0%{transform:translateY(100px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.05)}to{transform:scale(1)}}body{background-image:url(/cal.png);background-size:cover;background-position:50%;background-repeat:no-repeat;background-attachment:fixed;font-family:Arial,Helvetica,sans-serif;margin:0;padding:0;min-height:100vh;color:var(--foreground);animation:fadeInUp 1s ease-in-out}.header-container{display:flex;align-items:center;justify-content:center;gap:1rem;margin-top:2rem}.logo{width:100px;height:100px;border-radius:50%;object-fit:cover;box-shadow:0 2px 8px rgba(0,0,0,.2)}.title{font-size:2rem;font-weight:700;animation:zoomIn .8s ease-in-out;font-family:Comic Sans MS,cursive,sans-serif;background:linear-gradient(90deg,#fff,#ead4c2);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.calculator{max-width:400px;margin:2rem auto;padding:20px;background-color:#fff;border-radius:10px;box-shadow:0 4px 8px rgba(0,0,0,.2);animation:slideIn .8s ease-out}.calculator input[type=text]{width:100%;padding:10px;margin-bottom:15px;font-size:24px;text-align:right;border:1px solid #ccc;border-radius:5px;outline:none;background-color:#f5f5f5;color:#222}.buttons{display:grid;grid-template-columns:repeat(4,1fr);grid-gap:12px;gap:12px}button{padding:15px;font-size:20px;border:none;outline:none;cursor:pointer;border-radius:8px;background-color:#e0e0e0;color:#333;font-weight:500;transition:all .2s ease}button:hover{background-color:#d4d4d4;animation:pulse .3s ease-in-out}button:active{transform:scale(.95);background-color:#ccc}button.operator{font-size:1.5rem;font-weight:700;background-color:orange;color:#fff}button.operator:hover{background-color:#e59400}button.clear{grid-column:span 2;background-color:#ff4500;color:#fff}button.clear:hover{background-color:#e03e00}button.wide{grid-column:span 2}h1{color:#006400}h1,h2{text-align:center}h2{color:#d30c73}