:root{font-family:ui-sans-serif,system-ui,sans-serif;color:#233126;background:#f5f2e9;font-synthesis:none}*{box-sizing:border-box}body{margin:0}main{max-width:1140px;margin:auto;padding:28px 44px}header,footer,.card-heading{display:flex;justify-content:space-between;align-items:center;gap:18px}header{padding-bottom:22px;border-bottom:1px solid #d5d9cb}.wordmark{font-size:22px;font-weight:900;letter-spacing:-1px}.wordmark i{color:#7f913b}.pill{font-size:10px;font-weight:800;letter-spacing:1.5px;border:1px solid #cad1bf;border-radius:20px;padding:10px 14px}.stage{display:grid;grid-template-columns:1fr 1fr;align-items:center;min-height:390px;gap:30px}.eyebrow,.caption{font-size:10px;font-weight:800;letter-spacing:1.5px;color:#68734e}h1{font-size:clamp(42px,5.6vw,70px);line-height:1.02;letter-spacing:-3.5px;margin:18px 0}h1 em{font-style:normal;color:#7e9143}.intro p{font-size:15px;color:#677063;line-height:1.75}.scene{position:relative;max-width:400px;width:100%;justify-self:center;text-align:center}.scene:before{content:'';position:absolute;inset:40px 15px 36px;border-radius:50%;background:#e8ecd8;z-index:-1}svg{display:block;width:100%;height:auto}#picking-arm{transform-origin:250px 240px}#character.flick #picking-arm{animation:pick 1.1s ease-in-out}#booger{position:absolute;left:53%;top:43%;background:#bddb68;border:2px solid #6c833d;border-radius:48% 55% 45% 55%;padding:8px 13px;font-size:20px;font-weight:900;opacity:0;max-width:160px;overflow-wrap:anywhere}#booger.flick{animation:flick 1.3s ease-in-out both}.caption{display:block;margin-top:-4px}.spark{position:absolute;color:#94a85b;font-size:30px;font-weight:600}.one{left:8%;top:25%;transform:rotate(-15deg)}.two{right:3%;top:15%;transform:rotate(15deg)}.three{right:8%;bottom:20%}.calculator-card{background:#fffdf7;border:1px solid #d8dccd;border-radius:20px;padding:26px 30px;box-shadow:0 7px 0 #e7e9dc}.card-heading{margin-bottom:20px}.card-heading h2{font-size:12px;letter-spacing:1px;margin:0}.card-heading>span{font-size:10px;color:#7c8673}form{display:grid;grid-template-columns:1fr 160px 1fr auto auto;gap:12px;align-items:end}label{font-size:9px;letter-spacing:1px;font-weight:800;display:grid;gap:9px;min-width:0}input,select,button{font:inherit;font-size:15px;border:1px solid #d5dbca;border-radius:9px;min-height:52px;padding:12px;width:100%;color:#233126;background:#f4f5ec;min-width:0}input:focus,select:focus,button:focus-visible{outline:3px solid #98b457;outline-offset:3px}button{background:#263c2c;color:white;font-size:11px;font-weight:800;cursor:pointer;padding-inline:20px}button:hover{background:#416046}.clear{background:transparent;color:#65735b;border-color:transparent}.clear:hover{background:#edf0e3}.answer{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:22px;padding-top:20px;border-top:1px dashed #d6ddca}.answer>span{font-size:10px;font-weight:800;letter-spacing:1px;flex-shrink:0}output{font-size:24px;font-weight:800;text-align:right;overflow-wrap:anywhere;min-width:0}footer{margin-top:30px;font-size:9px;font-weight:700;color:#859079;letter-spacing:1px}@keyframes pick{0%,100%{transform:rotate(0)}25%{transform:rotate(-7deg)}48%{transform:rotate(5deg)}68%{transform:rotate(-35deg)}}@keyframes flick{0%,35%{opacity:0;transform:translate(0,0) scale(.2)}48%{opacity:1;transform:translate(0,0) scale(.7)}75%{opacity:1;transform:translate(55px,-45px) rotate(15deg)}100%{opacity:1;transform:translate(45px,75px) rotate(-5deg)}}@media(max-width:740px){main{padding:20px}.pill{display:none}.stage{gap:0;min-height:0;padding-top:26px}.intro p{font-size:12px}h1{font-size:42px;letter-spacing:-2px}.eyebrow{font-size:8px}.caption{font-size:7px}.calculator-card{padding:20px;margin-top:30px}form{grid-template-columns:1fr 1fr}.operation{grid-column:2;grid-row:1}form label:nth-child(3){grid-row:2}form button[type=submit]{grid-row:2}form .clear{grid-column:1/-1;min-height:30px;padding:5px}output{font-size:20px}footer{font-size:8px;align-items:start}.scene{align-self:center}#booger{font-size:14px;padding:5px 8px}.spark{font-size:20px}}@media(max-width:420px){.stage{grid-template-columns:1fr}.intro{text-align:center}.intro p br{display:none}.scene{max-width:245px;margin-top:10px}.caption{font-size:8px}.calculator-card{margin-top:20px}}@media(prefers-reduced-motion:reduce){#character.flick #picking-arm{animation:none}#booger.flick{animation:none;opacity:1;transform:translate(25px,35px)}}