@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;650;700;750;800&display=swap');
:root{font-family:Manrope,system-ui,sans-serif;color:#252820;background:#f5f3ef;font-synthesis:none;--muted:#898a81;--accent:#d7eea7}*{box-sizing:border-box}body{margin:0}button,input{font:inherit}button,a,input{-webkit-tap-highlight-color:transparent}button{cursor:pointer}a{color:inherit;text-decoration:none}.header{max-width:1240px;margin:auto;padding:32px 44px;display:flex;align-items:center;justify-content:space-between}.brand{font-size:26px;font-weight:800;letter-spacing:-1.3px;display:flex;align-items:center}.brand-icon{display:grid;place-items:center;width:34px;height:34px;background:#292d24;color:var(--accent);border-radius:10px;margin-right:10px;font-size:28px;line-height:1}.brand-dot{color:#8aa35e}.header-note{font-size:10px;letter-spacing:1.5px;color:var(--muted);font-weight:600}main{max-width:760px;margin:48px auto 0;padding:0 24px}.intro{text-align:center;margin-bottom:38px}.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:10px;letter-spacing:1.8px;font-weight:700;color:#727869}.status-dot{width:6px;height:6px;background:#8ca95d;border-radius:50%}h1{font-size:66px;letter-spacing:-4px;line-height:1.13;font-weight:650;margin:21px 0 18px}h1 span{position:relative;z-index:0}h1 span:after{content:"";position:absolute;left:2px;right:-2px;bottom:5px;height:15px;background:var(--accent);z-index:-1;transform:rotate(-2deg)}.intro p{font-size:15px;line-height:1.8;color:#818277;margin:0}.calculator{background:#fff;border:1px solid #e4e5dc;border-radius:22px;box-shadow:0 12px 38px #25282005;overflow:hidden}form{padding:28px 32px 25px}.card-top{display:flex;align-items:center;justify-content:space-between;color:var(--muted);font-size:10px;font-weight:700;letter-spacing:1.5px}.reset{border:0;background:none;font-size:11px;color:#878b7d;letter-spacing:0;padding:4px}.reset span{font-size:17px;vertical-align:-1px;margin-right:4px}.reset:hover{color:#252820}.expression{display:grid;grid-template-columns:minmax(0,1fr) 110px minmax(0,1fr);gap:22px;align-items:end;margin:28px 0 24px}.number-field>span{display:flex;align-items:center;justify-content:space-between;font-size:11px;color:#83877b;margin-bottom:10px}.number-field i{font:italic 12px Georgia,serif;color:#a0a596}.number-field input{width:100%;min-width:0;height:86px;border:1px solid #e5e7de;border-radius:12px;background:#fafbf7;padding:10px 19px;font-size:36px;font-weight:500;letter-spacing:-1.5px;color:#30382a;transition:border-color .2s,box-shadow .2s}.number-field input:focus{outline:none;border-color:#9fbd76;box-shadow:0 0 0 3px #d7eea744}.number-field input[aria-invalid=true]{border-color:#bb6650}.operator{padding:0;border:0;margin:0;min-width:0}.operator legend{font-size:10px;color:#83877b;margin:0 auto 10px;padding:0}.operator-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}.operator label{position:relative;cursor:pointer}.operator input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}.operator label span{display:grid;place-items:center;height:40px;border:1px solid #e6e8df;border-radius:9px;color:#8b9082;font-size:23px;transition:background .15s}.operator input:checked+span{background:var(--accent);border-color:#c6dd97;color:#3e5028}.operator input:focus-visible+span{outline:2px solid #6e8b48;outline-offset:3px}.operator label:hover span{border-color:#a3b785}.calculate{border:0;border-radius:10px;background:#2d3527;color:#fff;width:100%;padding:15px 19px;text-align:left;font-size:13px;font-weight:600;display:flex;align-items:center;justify-content:space-between;transition:background .2s,transform .2s}.calculate span{font-size:21px;line-height:1;color:var(--accent)}.calculate:hover{background:#425035}.calculate:active{transform:translateY(1px)}button:focus-visible,a:focus-visible{outline:2px solid #6e8b48;outline-offset:4px}.result{background:#edf3e3;border-top:1px solid #e1e9d5;padding:25px 32px 24px}.result-top{display:flex;align-items:center;justify-content:space-between;color:#778367;font-size:10px;font-weight:700;letter-spacing:1.5px}.result-badge{font-size:10px;letter-spacing:0;font-weight:500;background:#e0eacf;border-radius:20px;padding:5px 10px;color:#66764e}.result-badge span{margin-left:5px}output{display:block;font-size:65px;line-height:1.3;letter-spacing:-3px;color:#36432b;margin-top:9px;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}#result-expression{font-size:12px;color:#89977b;margin:5px 0 0;overflow-wrap:anywhere}.card-foot{display:flex;align-items:center;justify-content:center;gap:8px;padding:14px 20px;font-size:10px;color:#94988c}.small-equals{font-size:16px;color:#89987a}.details{display:flex;align-items:center;justify-content:center;gap:14px;color:#93968b;font-size:10px;margin:19px 0 37px}.details>span:first-child>span{border:1px solid #dfe1d7;padding:0 4px;border-radius:4px;margin-right:4px}.details-dot{color:#b2b7a8}.how-it-works{display:flex;align-items:center;gap:14px;padding:21px 0;border-top:1px solid #e0e2d9}.function-icon{display:grid;place-items:center;flex-shrink:0;width:39px;height:39px;background:#ebece5;border-radius:11px;font:italic 26px Georgia,serif;color:#828a73}.how-it-works h2{font-size:11px;font-weight:650;margin:0 0 5px}.how-it-works p{font-size:10px;color:#93968c;margin:0}.how-it-works code{white-space:nowrap;margin-left:auto;font-size:11px;color:#818b71;background:#eaece3;border:1px solid #dfe3d5;border-radius:6px;padding:8px 10px}footer{max-width:1240px;padding:30px 44px;margin:42px auto 0;display:flex;align-items:center;justify-content:space-between;color:#9c9f93;font-size:10px}footer>span:last-child{font-size:17px;color:#858d77}.error{color:#a14632;font-size:12px;margin:0 0 16px;line-height:1.5}@media(min-width:1500px){main{margin-top:75px}}@media(max-width:600px){.header{padding:23px 22px}.header-note{display:none}main{margin-top:35px;padding:0 18px}h1{font-size:50px;letter-spacing:-3px}.intro{margin-bottom:28px}.intro p{font-size:14px}form{padding:23px 20px}.expression{grid-template-columns:minmax(0,1fr) 82px minmax(0,1fr);gap:10px}.number-field input{font-size:27px;padding:8px 10px}.operator-grid{gap:6px}.number-field>span{font-size:9px}.operator legend{font-size:9px}.result{padding:23px 20px}output{font-size:56px}.how-it-works{flex-wrap:wrap;gap:12px}.how-it-works code{margin-left:51px;margin-top:0}.details{font-size:9px;gap:9px}footer{padding:20px 22px;margin-top:25px}.card-foot{font-size:9px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}

.calculate:disabled{cursor:wait;opacity:.65}