*{box-sizing:border-box} :root{color-scheme:light;--pink:#E5005C;--ink:#1E242B;--paper:#FAFAF8;--muted:#62666C}body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}.brand,main,footer{max-width:980px;margin-inline:auto}.brand{padding:26px 24px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #E4E4E0}.wordmark{font-size:29px;letter-spacing:-1.7px;font-weight:800}.wordmark span{font-weight:900}.wordmark i{display:inline-block;background:var(--pink);width:7px;height:7px;margin-left:4px}.brand-note{font-size:9px;font-weight:700;letter-spacing:1.2px;color:var(--muted)}main{padding:30px 24px}.eyebrow{font-size:10px;letter-spacing:1.6px;font-weight:800;color:var(--pink);margin:0 0 14px}h1{font-size:40px;line-height:1.04;letter-spacing:-1.8px;margin:0 0 17px;font-weight:800}.lead{font-size:15px;line-height:1.6;color:var(--muted);margin:0}.diagram{margin:16px 0 24px;text-align:center}.diagram svg{display:block;width:230px;max-width:100%;height:auto;margin:auto}.diagram figcaption{font-size:10px;color:var(--muted);line-height:1.5}.calculator{min-width:0}.form-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px}h2{font-size:19px;margin:0;letter-spacing:-.4px}.form-heading>span{font-size:11px;color:var(--muted);border:1px solid #DFE0DD;padding:6px 9px;border-radius:30px}.field{margin-bottom:18px}label{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;margin-bottom:8px}.symbol{display:grid;place-items:center;width:21px;height:21px;background:#FCE4ED;color:#B00046;border-radius:5px;font-size:12px}.input-wrap{position:relative}input{appearance:none;width:100%;height:51px;border:1px solid #D5D7D4;border-radius:9px;background:#fff;padding:0 49px 0 14px;color:var(--ink);font-size:17px;transition:border-color .15s,box-shadow .15s}input::placeholder{color:#777C81;font-size:15px}.input-wrap>span{position:absolute;right:15px;top:17px;font-size:13px;color:var(--muted)}input:focus{outline:none;border-color:var(--pink);box-shadow:0 0 0 3px #E5005C15}input[aria-invalid=true]{border-color:#B00046}small{display:block;font-size:11px;color:var(--muted);margin-top:7px}.actions{display:flex;gap:9px;margin:24px 0}button{cursor:pointer;font:700 13px Arial,Helvetica,sans-serif;min-height:48px;border-radius:9px;border:0}#calculate{flex:1;background:var(--pink);color:#fff;padding:12px 16px;display:flex;align-items:center;justify-content:space-between;gap:8px}#calculate:hover{background:#C60050}#calculate span{font-size:20px}.reset{background:transparent;color:var(--muted);padding:10px 9px}.reset:hover{background:#ECEDE9}button:focus-visible{outline:3px solid var(--ink);outline-offset:3px}.result-card{background:var(--ink);color:#fff;border-radius:14px;padding:23px 24px}.result-card .eyebrow{color:#FF85B5;font-size:9px;letter-spacing:1.3px}.result-line{margin:10px 0;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}.result-line output{font-size:48px;letter-spacing:-2px;font-weight:700;overflow-wrap:anywhere;max-width:100%;font-variant-numeric:tabular-nums}.result-line>span{font-size:23px;color:#BDC2C8}#result-note{font-size:11px;color:#C8CCD1;line-height:1.5;margin:0}.caveat{font-size:11px;line-height:1.65;color:var(--muted);margin:16px 0 0;display:flex;gap:8px}.caveat>span{font-size:15px}.error{font-size:13px;line-height:1.5;color:#A7003E;background:#FFF0F5;border-radius:8px;padding:12px}footer{padding:22px 24px 30px;font-size:10px;color:var(--muted);display:flex;justify-content:space-between;border-top:1px solid #E4E4E0}footer span{font-weight:800}@media(min-width:740px){.brand{padding:30px 34px}.brand-note{font-size:10px}main{display:grid;grid-template-columns:1fr 1fr;gap:66px;padding:54px 34px 40px}.intro{padding-top:12px}h1{font-size:53px;letter-spacing:-2.7px}.lead{font-size:16px}.diagram{margin-top:42px}.diagram svg{width:300px}.diagram figcaption{font-size:11px}.calculator{background:#fff;border:1px solid #E4E4E0;border-radius:18px;padding:26px;box-shadow:0 12px 45px #1E242B06}footer{padding-inline:34px}.actions{gap:4px}}@media(max-width:359px){.brand-note{display:none}main{padding-inline:18px}h1{font-size:36px}.actions{gap:3px}#calculate{padding-inline:12px}.reset{font-size:12px;padding-inline:6px}}