:root{--main-color: #F24405;--main-color-light: #FF5722;--main-color-dark: #A62F03;--main-color-darkest: #8C3908;--color-accent-light: #66FFE4;--color-accent: #00E1BF;--color-accent-dark: #00B88F;--color-accent-darkest: #00966E;--color-box: #A6A6A6;--bg-light: #404040;--bg-light-tr: #404040D5;--bg-middle: #262626;--bg-middle-tr: #26262640;--bg-dark: #0D0D0D;--text-color: #F2F2F2;--text-muted: #cacaca;--text-color-invert: #101010;--btn-neutral: #e6e6e6;--btn-neutral-hover: #dcdcdc;--shadow-strong: rgba(0, 0, 0, .7);--shadow-soft: rgba(0, 0, 0, .4)}*{margin:0;padding:0;box-sizing:border-box}body{background:radial-gradient(circle at 20% 20%,rgba(242,68,5,.2),transparent 55%),radial-gradient(circle at 80% 80%,rgba(0,225,191,.15),transparent 60%),linear-gradient(135deg,var(--bg-dark),var(--bg-middle));color:var(--text-color);font-family:Arial,sans-serif;display:flex;justify-content:center;align-items:flex-start}@font-face{font-family:"Open 24 Display St";src:url(/Kalkula-ka/assets/digital-DaDT6oBK.ttf) format("truetype");font-weight:400;font-style:normal;font-display:swap}section{display:flex;justify-content:center;align-items:center;height:100vh;margin:auto}.calculator{margin:auto;max-width:420px}.mainCalc{position:relative;padding:1.5rem;margin:auto;border-radius:2rem;background:linear-gradient(180deg,var(--bg-light-tr),var(--bg-middle-tr)),url(/Kalkula-ka/assets/steel-T4iLzV3R.webp);background-size:cover;background-position:center;background-blend-mode:hard-light;box-shadow:inset 0 1px #fff9,0 0 0 1px #ffffff08,0 7px #0009,0 20px 35px var(--shadow-strong)}.mainCalc:before{content:"";position:absolute;top:.1rem;left:.125rem;right:.125rem;height:3.7rem;border-radius:1.9rem 1.9rem 1.4rem 1.4rem;background:linear-gradient(to bottom,#fff3,#ffffff1f,#ffffff05);pointer-events:none;mix-blend-mode:screen}.mainCalc:after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:.15;background-image:url(/Kalkula-ka/assets/noise-DdIX3cjs.webp);mix-blend-mode:soft-light}.calculator-title{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;text-align:center;font-size:3rem;color:var(--main-color)}.screen{position:relative;-webkit-font-smoothing:none;text-rendering:geometricPrecision;background:linear-gradient(180deg,#c7c7c7,#a9a9a9);color:var(--text-color-invert);padding:1rem 1rem .5rem;border-radius:1.25rem;margin-bottom:1rem;font-family:"Open 24 Display St",system-ui,sans-serif;font-size:1.75rem;letter-spacing:.08em;min-height:8rem;display:flex;flex-direction:column;justify-content:center;box-shadow:inset 0 3px 5px #00000047,inset 0 -2px 3px #00000061,0 0 0 1px #00000080;border:1px solid rgba(0,0,0,.7)}.screen:before{content:"";position:absolute;left:.3rem;right:.3rem;top:.2rem;height:.8rem;border-radius:1.2rem 1.2rem .4rem .4rem;background:linear-gradient(to bottom,rgba(255,255,255,.35),rgba(255,255,255,.05),transparent);pointer-events:none}.screen:after{content:"";position:absolute;left:.6rem;right:.6rem;bottom:-.25rem;height:.35rem;border-radius:999px;background:radial-gradient(ellipse at center,rgba(0,0,0,.45),transparent 70%);pointer-events:none}.output-screen-row{display:flex;width:100%}.screen input{width:100%;height:2.5rem;padding:0 .5rem;border:none;background:transparent;color:inherit;font:inherit;text-align:right;pointer-events:none}.screen .question input{height:2rem;font-size:2rem;opacity:.7}.screen .answer input{height:3.5rem;font-size:2.5rem;opacity:1}.button-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.5rem;margin-bottom:.5rem}.button-row:last-child{margin-bottom:0}button{position:relative;overflow:hidden;width:100%;height:3.5rem;padding:0;font-size:1rem;font-weight:600;text-align:center;background:linear-gradient(180deg,var(--color-box),var(--btn-neutral));border:none;border-radius:1.25rem;cursor:pointer;box-shadow:0 7px #0009,inset 0 1px #ffffff8c,inset 0 -1px #0000002e;transition:transform .08s ease-out,box-shadow .08s ease-out,background .15s ease-out;color:var(--text-color-invert);z-index:500}button:before{content:"";position:absolute;left:.1rem;right:.1rem;top:.02rem;height:.15rem;border-radius:999px;background:linear-gradient(to bottom,rgba(255,255,255,.4),rgba(255,255,255,.05),transparent);pointer-events:none;z-index:200}button:hover{background:linear-gradient(180deg,#cfcfcf,var(--btn-neutral-hover))}button:active{transform:translateY(1px);box-shadow:0 3px #00000080,inset 0 1px #fff6}button:focus-visible{outline:2px solid var(--main-color);outline-offset:2px}button.op{background:linear-gradient(180deg,#8e8e8e,#c7c7c7)}button.op:hover{background:linear-gradient(180deg,#9f9f9f,#d7d7d7)}button.clear{background:linear-gradient(180deg,var(--main-color-darkest),var(--main-color));color:var(--text-color)}button.clear:hover{background:linear-gradient(180deg,var(--main-color-dark),var(--main-color-light))}button.equals{background:linear-gradient(180deg,var(--color-accent-darkest),var(--color-accent));color:var(--text-color);grid-column:span 2}button.equals:hover{background:linear-gradient(180deg,var(--color-accent-dark),var(--color-accent-light))}button.delete{background:linear-gradient(180deg,#555,#777);color:var(--text-color)}button.delete:hover{background:linear-gradient(180deg,#5c5c5c,#7c7c7c)}.button-grid{position:relative;margin-top:2.5rem;display:flex;flex-direction:column;gap:.5rem;z-index:400;padding:1px}.button-grid:before{content:"";position:absolute;inset:.2rem .1rem .1rem;border-radius:1.5rem;background:radial-gradient(circle at center,rgba(0,0,0,.4),transparent 65%);opacity:.6;pointer-events:none;z-index:0}