:root{--primary-color: #333;--secondary-color: #555;--background-color: #f8f9fa;--text-color: #333;--button-bg: #fff;--button-text: #333;--button-operator-bg: #4361ee;--button-operator-text: #fff;--display-bg: #fff;--display-text: #333;--font-family: "Poppins", sans-serif;--transition: all .3s cubic-bezier(.4, 0, .2, 1);--squircle: 20px;--button-shadow: 0 2px 8px rgba(0, 0, 0, .06);--flow-spacing: 24px}*{margin:0;padding:0;box-sizing:border-box}body{font-family:var(--font-family);background:var(--background-color);color:var(--text-color);transition:var(--transition);min-height:100vh;position:fixed;width:100%;overflow:hidden}body[data-theme=glassmorphism]{background-attachment:fixed}body[data-theme=glassmorphism] .calculator,body[data-theme=gradients] .calculator{z-index:1}body[data-theme=gradients]{background-attachment:fixed}body[data-theme=gradients]:before{content:"";position:fixed;top:0;left:0;width:100%;height:100%;background:var(--background-color);z-index:-1}body[data-theme=glassmorphism]:before{content:"";position:fixed;top:-50%;left:-50%;width:200%;height:200%;background:var(--background-color);z-index:-1;background-attachment:fixed}body[data-theme=glassmorphism] .button,body[data-theme=glassmorphism] .display,body[data-theme=glassmorphism] .settings-button,body[data-theme=glassmorphism] .close-settings,body[data-theme=glassmorphism] .theme-item,body[data-theme=gradients] .button,body[data-theme=gradients] .display,body[data-theme=gradients] .settings-button,body[data-theme=gradients] .close-settings,body[data-theme=gradients] .theme-item{backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));border:var(--glass-border);background:var(--glass-highlight),var(--button-bg);box-shadow:0 8px 32px #0003}button{font-family:inherit;cursor:pointer;border:none;outline:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;transition:var(--transition)}.app-container{width:100%;height:100vh;display:flex;flex-direction:column}.calculator{display:flex;flex-direction:column;flex:1;height:100%;padding:var(--flow-spacing);gap:calc(var(--flow-spacing) * .75)}.display{background-color:var(--display-bg);color:var(--display-text);padding:calc(var(--flow-spacing) * 1.25);padding-top:calc(var(--flow-spacing) * 2);text-align:right;min-height:160px;display:flex;flex-direction:column;justify-content:flex-end;transition:var(--transition);border-radius:var(--squircle);box-shadow:var(--button-shadow);position:relative;overflow:hidden}body[data-theme=glassmorphism] .display{box-shadow:0 10px 25px #0000004d}.display:before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(to right,transparent,rgba(255,255,255,.5),transparent)}body[data-theme=glassmorphism] .display:after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(135deg,rgba(255,255,255,.15) 0%,transparent 70%);z-index:0;pointer-events:none}.previous-operand{font-size:1.2rem;opacity:.7;min-height:24px;margin-bottom:calc(var(--flow-spacing) * .5);font-weight:300;position:relative;z-index:1}.current-operand{font-size:3rem;font-weight:500;word-break:break-all;word-wrap:break-word;line-height:1.2;position:relative;z-index:1}.keypad{display:grid;grid-template-columns:repeat(4,1fr);gap:calc(var(--flow-spacing) * .5);flex:1;padding:calc(var(--flow-spacing) * .25);background-color:transparent;border-radius:var(--squircle)}.button{background-color:var(--button-bg);color:var(--button-text);font-size:1.5rem;border-radius:var(--squircle);display:flex;align-items:center;justify-content:center;transition:all .2s cubic-bezier(.25,.46,.45,.94);box-shadow:var(--button-shadow);font-weight:400;position:relative;overflow:hidden}.button:hover{transform:translateY(-1px);box-shadow:0 4px 10px #00000014}body[data-theme=glassmorphism] .button{letter-spacing:.5px}body[data-theme=glassmorphism] .button.operator{backdrop-filter:blur(calc(var(--glass-blur) * 1.5));-webkit-backdrop-filter:blur(calc(var(--glass-blur) * 1.5))}body[data-theme=glassmorphism] .button:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.2) 0%,transparent 60%);opacity:.5}.button:after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(to bottom,rgba(255,255,255,.1),transparent);opacity:0;transition:var(--transition)}.button:active{transform:scale(.95);transition:transform .15s cubic-bezier(.25,.46,.45,.94)}.button:active:after{opacity:1}body[data-theme=minimalism] .button:hover{background-color:#fafafa;transform:translateY(-2px);box-shadow:0 4px 12px #00000014}body[data-theme=minimalism] .button:active{transform:scale(.92);box-shadow:0 1px 2px #0000001a;transition:all .1s cubic-bezier(.25,.46,.45,.94)}body[data-theme=typography] .button:hover{letter-spacing:1px;transform:translateY(-1px)}body[data-theme=typography] .button:active{transform:scale(.97) translateY(2px);box-shadow:0 1px 3px #00000008;transition:all .1s ease-out}body[data-theme=glassmorphism] .button:hover{backdrop-filter:blur(calc(var(--glass-blur) * 1.2));-webkit-backdrop-filter:blur(calc(var(--glass-blur) * 1.2));border:1px solid rgba(255,255,255,.3);box-shadow:0 8px 32px #00000040;transform:translateY(-2px)}body[data-theme=glassmorphism] .button:active{transform:scale(.95) translateY(1px);box-shadow:0 4px 15px #00000026;border:1px solid rgba(255,255,255,.4);background:linear-gradient(145deg,rgba(255,255,255,.15) 0%,rgba(255,255,255,.05) 100%);transition:all .1s cubic-bezier(.25,.46,.45,.94)}body[data-theme=gradients] .button:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 6px 15px #0003;background-color:#fff3}body[data-theme=gradients] .button:active{transform:scale(.96);box-shadow:inset 0 2px 8px #0003;transition:all .12s ease}body[data-theme=neumorphism] .button:hover{box-shadow:6px 6px 12px #babecc,-6px -6px 12px #fff}body[data-theme=neumorphism] .button:active{transform:scale(.98);box-shadow:inset 5px 5px 10px #babecc,inset -5px -5px 10px #fff;transition:all .1s ease-in}body[data-theme=skeuomorphism] .button:hover{transform:translateY(-1px);box-shadow:0 6px 10px #00000040}body[data-theme=skeuomorphism] .button:active{transform:translateY(2px);box-shadow:0 2px 3px #00000026;background:linear-gradient(145deg,#b2bec3,#dfe6e9);transition:all .08s ease-out}body[data-theme=skeuomorphism] .button.operator:active{background:linear-gradient(145deg,#d63031,#ff7675)}body[data-theme=flatDesign] .button:hover{transform:translateY(-2px);filter:brightness(1.05)}body[data-theme=flatDesign] .button:active{transform:scale(.97);opacity:.8;transition:all .1s linear}body[data-theme=bauhaus] .button:hover{transform:scale(1.02) rotate(.5deg);box-shadow:4px 4px #0003}body[data-theme=bauhaus] .button:active{transform:scale(.97) rotate(-1deg);box-shadow:2px 2px #0003;transition:all .15s cubic-bezier(.25,.46,.45,.94)}body[data-theme=illustration] .button:hover{transform:translateY(-3px);box-shadow:0 8px 15px #6c5ce733}body[data-theme=illustration] .button:active{transform:scale(.95);box-shadow:0 2px 6px #6c5ce733;transition:all .12s cubic-bezier(.25,.46,.45,.94)}.button.operator{background-color:var(--button-operator-bg);color:var(--button-operator-text);font-weight:500}.button.span-two{grid-column:span 2}.settings-button{position:absolute;top:calc(var(--flow-spacing) * 1.3);left:calc(var(--flow-spacing) * 1.3);width:48px;height:48px;border-radius:var(--squircle);display:flex;align-items:center;justify-content:center;background-color:var(--button-bg);color:var(--button-text);box-shadow:var(--button-shadow);font-size:1.4rem;z-index:10;transition:all .2s cubic-bezier(.25,.46,.45,.94)}.settings-button:hover{transform:translateY(-1px) scale(1.05);box-shadow:0 4px 12px #0000001a}.settings-button:active{transform:scale(.95);transition:all .1s cubic-bezier(.25,.46,.45,.94)}body[data-theme=glassmorphism] .settings-button:hover{backdrop-filter:blur(calc(var(--glass-blur) * 1.5));-webkit-backdrop-filter:blur(calc(var(--glass-blur) * 1.5));border:1px solid rgba(255,255,255,.4)}body[data-theme=neumorphism] .settings-button:active{box-shadow:inset 3px 3px 6px #babecc,inset -3px -3px 6px #fff}.settings-panel{position:fixed;top:0;left:0;width:100%;height:100vh;background-color:var(--background-color);z-index:100;transform:translate(-100%);transition:var(--transition);overflow-y:auto;padding:var(--flow-spacing)}body[data-theme=glassmorphism] .settings-panel{background:linear-gradient(135deg,rgba(44,62,80,.8) 0%,rgba(76,110,245,.8) 100%);backdrop-filter:blur(calc(var(--glass-blur) * 2));-webkit-backdrop-filter:blur(calc(var(--glass-blur) * 2))}body[data-theme=gradients] .settings-panel{background:rgba(0,0,0,.2);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.settings-panel.open{transform:translate(0)}.settings-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:calc(var(--flow-spacing) * 1.5)}.settings-title{font-size:1.5rem;font-weight:500}.close-settings{width:48px;height:48px;border-radius:var(--squircle);background-color:var(--button-bg);color:var(--button-text);display:flex;align-items:center;justify-content:center;font-size:1.4rem;box-shadow:var(--button-shadow);transition:all .2s cubic-bezier(.25,.46,.45,.94)}.close-settings:hover{transform:scale(1.05);box-shadow:0 4px 12px #0000001a}.close-settings:active{transform:scale(.95);transition:all .1s cubic-bezier(.25,.46,.45,.94)}.settings-content{padding-bottom:var(--flow-spacing)}.theme-section h3{margin-bottom:calc(var(--flow-spacing) * .75);font-weight:500;font-size:1.2rem;color:var(--secondary-color)}.theme-list{display:grid;grid-template-columns:repeat(2,1fr);gap:calc(var(--flow-spacing) * .75)}.theme-item{background-color:var(--button-bg);padding:calc(var(--flow-spacing) * .75);border-radius:var(--squircle);box-shadow:var(--button-shadow);text-align:center;transition:all .25s cubic-bezier(.25,.46,.45,.94);position:relative;overflow:hidden;cursor:pointer}.theme-item:hover{transform:translateY(-2px);box-shadow:0 5px 15px #0000001a}body[data-theme=glassmorphism] .theme-item{background:linear-gradient(145deg,rgba(255,255,255,.1) 0%,rgba(255,255,255,.05) 100%)}.theme-item:after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(to bottom,rgba(255,255,255,.1),transparent);opacity:0;transition:var(--transition)}.theme-item.active{background-color:var(--button-operator-bg);color:var(--button-operator-text)}body[data-theme=glassmorphism] .theme-item.active{background:rgba(76,110,245,.6);border:1px solid rgba(255,255,255,.3)}.theme-item:active{transform:scale(.96);transition:all .1s cubic-bezier(.25,.46,.45,.94)}.theme-item:active:after{opacity:1}body[data-theme=glassmorphism] .theme-item:hover{border:1px solid rgba(255,255,255,.4);backdrop-filter:blur(calc(var(--glass-blur) * 1.5));-webkit-backdrop-filter:blur(calc(var(--glass-blur) * 1.5))}body[data-theme=glassmorphism] .theme-item:active{background:linear-gradient(145deg,rgba(255,255,255,.08) 0%,rgba(255,255,255,.03) 100%)}.overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#0000004d;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:90;opacity:0;visibility:hidden;transition:var(--transition)}body[data-theme=glassmorphism] .overlay.open{backdrop-filter:blur(calc(var(--glass-blur) * 1.5));-webkit-backdrop-filter:blur(calc(var(--glass-blur) * 1.5));background-color:#0003}.overlay.open{opacity:1;visibility:visible}@media (max-height: 700px){:root{--flow-spacing: 16px}.button{font-size:1.3rem}.current-operand{font-size:2.5rem}}@media (max-width: 350px){:root{--flow-spacing: 12px;--squircle: 16px}.button{font-size:1.2rem}.current-operand{font-size:2.2rem}}