:root{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#263e35;background:#f7f8f4;font-synthesis:none;--green:#254e40;--muted:#6b766e;--mint:#e8f0e4;--border:#e2e6dd;--paper:#fff;--radius:14px}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer;border:0;color:inherit;background:none;touch-action:manipulation}button{transition:background .16s ease-out,transform .16s ease-out}button:active{transform:scale(.97)}button:disabled{cursor:default;opacity:.4}a{color:inherit;text-decoration:none}svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.svg-defs{position:absolute;width:0;height:0;overflow:hidden}::selection{background:#cbe3bc;color:#183e2c}:focus-visible{outline:3px solid #7a9e65;outline-offset:3px}input{caret-color:var(--green)}[hidden]{display:none!important}.site-header{height:106px;max-width:1400px;padding:0 64px;margin:auto;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;font-size:27px;font-weight:650;letter-spacing:-1px}.brand-dot{color:#809770}.brand-icon{display:flex;flex-direction:column;justify-content:center;align-items:center;background:var(--green);color:#fff;width:35px;height:39px;border-radius:10px;font-size:14px;line-height:16px;font-weight:500;margin-right:12px;letter-spacing:0;transform:rotate(-6deg)}.brand-icon span:first-child{border-bottom:1px solid #d2dfd1;width:17px;text-align:center}.header-note{font-size:12px;color:var(--muted);letter-spacing:.15px;margin-left:-60px}.icon-button{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%}.icon-button:hover{background:#e6ebe1}.site-header>.icon-button{border:1px solid var(--border)}main{max-width:1230px;margin:28px auto 50px;display:grid;grid-template-columns:1fr 418px 1fr;gap:62px;align-items:center;padding:0 32px}.intro{align-self:center;padding-bottom:55px}.intro h1{font-size:43px;line-height:1.16;font-weight:500;letter-spacing:-1.7px;margin:0 0 24px}.intro p{font-size:14px;line-height:1.85;color:var(--muted);margin:0}.intro-example{display:flex;gap:14px;align-items:center;margin:52px 0 19px}.mini-disc{width:44px;height:44px;border-radius:50%;border:1px solid #becbb7;display:block}.disc-one{background:conic-gradient(#93ab7d 0deg 90deg,#e7edde 90deg)}.disc-two{background:conic-gradient(#93ab7d 0deg 270deg,#e7edde 270deg)}.disc-full{background:#93ab7d}.example-plus,.example-equals{color:#6c7b62;font-weight:300;font-size:20px}.intro-caption{font-size:11px;color:var(--muted)}.calculator{background:var(--paper);border-radius:24px;padding:25px 24px 17px;box-shadow:0 18px 65px -25px #364a372e}.calculator-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:31px}.calculator-heading h2{font-size:19px;letter-spacing:-.5px;font-weight:600;margin:0}.live-label{display:flex;align-items:center;gap:6px;font-size:10px;color:#66745e}.live-label>span{width:5px;height:5px;border-radius:50%;background:#80a867}.editor-top{display:flex;align-items:center;justify-content:space-between;color:#6f786f;font-size:11px}.editor-top button{color:#6a7468;padding:9px 0 9px 15px;font-size:11px}.editor-top button:hover{color:#244f35}.expression{display:flex;align-items:center;justify-content:center;gap:30px;padding:12px 0 23px}.fraction-input{width:85px;display:flex;align-items:center;flex-direction:column;gap:5px}.fraction-input input{width:85px;height:48px;border:none;background:transparent;border-radius:9px;text-align:center;font-size:34px;font-weight:450;outline-offset:0;color:#2a4138;padding:2px;transition:background .15s}.fraction-input input.active{background:#f0f4eb;color:#31533c;box-shadow:inset 0 0 0 1.5px #a6bb91}.fraction-input input:hover{background:#f4f6f0}.fraction-input input.long{font-size:18px}.fraction-line{height:2px;width:49px;background:#5e6e5f;border-radius:2px}.expression-op{font-size:29px;color:#7c897a;font-weight:300}.operators{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;padding:5px;background:#f3f5f0;border-radius:12px;margin-bottom:20px}.operators button{height:39px;border-radius:9px;font-size:26px;font-weight:350;color:#788275}.operators button:hover{background:#e6ecdf}.operators button[aria-pressed=true]{color:white;background:var(--green)}.answer-panel{background:var(--mint);border-radius:14px;padding:13px 15px 12px;min-height:180px}.answer-heading{display:flex;justify-content:space-between;align-items:center;font-size:11px;color:#54674e}.answer-heading .icon-button{height:28px;width:28px;border-radius:7px;margin-right:-4px}.answer-heading svg{width:15px;height:15px}.answer-heading .icon-button:hover{background:#d7e6cf}.answer{min-height:57px;display:flex;justify-content:center;align-items:center;gap:10px;font-size:43px;font-weight:450;letter-spacing:-1px;padding:0 0 5px;overflow-wrap:anywhere;text-align:center}.answer.long{font-size:26px;letter-spacing:-.5px}.answer .stack{font-size:23px;line-height:1.13;display:inline-flex;flex-direction:column;min-width:24px;letter-spacing:0}.answer .stack span:first-child{border-bottom:1.5px solid var(--green);padding:0 3px 4px}.answer .stack span:last-child{padding-top:3px}.answer .result-unit{font-size:20px;margin-left:0;color:#4f6949}.answer-detail{font-size:10px;text-align:center;color:#596d51;min-height:24px;padding-top:3px}.formats{display:flex;gap:1px;justify-content:space-between;margin-top:7px}.formats button{min-height:34px;padding:0 9px;border-radius:7px;font-size:10px;color:#506348}.formats button:hover{background:#d6e3cd}.formats button[aria-pressed=true]{background:var(--green);color:white}.measurement{display:flex;align-items:center;justify-content:center;font-size:11px;gap:8px;padding:12px 0 0;color:#4f6548}.measurement select{border:1px solid #a8b89d;border-radius:6px;background:var(--mint);color:#2b4930;padding:5px;max-width:140px}.answer.error{font-size:15px;line-height:1.5;text-align:left;letter-spacing:0;color:#8c3a26;padding:10px 0}.keypad{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,52px);gap:7px;margin-top:19px}.keypad button{background:#f5f6f2;border-radius:10px;font-size:22px;font-weight:450;display:flex;align-items:center;justify-content:center}.keypad button:hover{background:#e9eee2}.keypad .utility{background:#ebeee7;color:#69745f}.keypad .utility svg{width:20px;height:20px}.keypad .next-key{flex-direction:column;gap:1px}.next-key small{font-size:8px;line-height:9px}.keypad .equals{grid-column:4;grid-row:3 / 5;background:var(--green);color:white;font-size:30px}.keypad .equals:hover{background:#37634e}.keypad .sign-key,.keypad .slash-key{font-size:18px;color:#6f7969}.keypad-hint{display:flex;align-items:center;justify-content:center;gap:5px;font-size:9px;color:#78806f;padding-top:16px}.keypad-hint svg{width:12px;height:12px}.side-note{padding:0 0 23px 0;max-width:220px}.note-icon{width:38px;height:38px;border-radius:50%;background:#e9eedf;display:flex;align-items:center;justify-content:center;margin-bottom:22px;color:#6b8359}.note-icon svg{width:18px;height:18px}.side-note h2{font-size:23px;line-height:1.3;letter-spacing:-.6px;font-weight:500;margin:0 0 17px}.side-note p{font-size:12px;line-height:1.9;color:var(--muted);margin:0 0 16px}.side-note>button{display:flex;align-items:center;gap:12px;font-size:11px;padding:8px 0;color:#4b6640}.side-note>button svg{width:15px;height:15px}#guide{margin-top:20px;border-top:1px solid var(--border);padding-top:18px}#guide p{font-size:11px}footer{display:flex;justify-content:space-between;max-width:1400px;margin:auto;padding:0 64px 25px;color:#7b8276;font-size:10px}dialog{width:min(440px,calc(100% - 28px));max-height:80dvh;border:none;border-radius:20px;padding:24px;color:#263e35;box-shadow:0 24px 80px #18312438;background:#fff}dialog::backdrop{background:#172e2660}.history-heading{display:flex;align-items:center;justify-content:space-between}.history-heading h2{font-size:19px;margin:0}.history-description{font-size:12px;color:#65705f;line-height:1.6;margin:10px 0 20px}.history-item{display:flex;align-items:center;justify-content:space-between;width:100%;padding:18px 8px;text-align:left;border-top:1px solid var(--border);gap:12px;font-size:15px}.history-item:hover{background:#f2f5ee}.history-item strong{font-weight:500;color:var(--green)}.history-empty{padding:30px 0;color:#687662;font-size:14px;line-height:1.7}.clear-history{font-size:12px;color:#7d4938;padding:15px 0 0}.toast{position:fixed;bottom:25px;left:50%;transform:translate(-50%,15px);background:var(--green);color:#fff;padding:12px 20px;border-radius:10px;font-size:13px;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;white-space:nowrap}.toast.visible{opacity:1;transform:translate(-50%,0)}
@media(min-width:1440px){main{margin-top:55px;margin-bottom:70px}.calculator{padding-top:28px;padding-bottom:20px}.keypad{grid-template-rows:repeat(4,55px)}}
@media(max-width:1100px){main{grid-template-columns:1fr 400px;gap:45px;max-width:890px}.side-note{display:none}.intro h1{font-size:39px}.site-header{padding:0 35px}footer{padding:0 35px 25px}}
@media(max-width:720px){body{background:#fff}.site-header{height:76px;padding:0 24px;max-width:470px}.brand{font-size:24px}.brand-icon{width:31px;height:35px;font-size:12px;line-height:14px}.site-header>.icon-button{width:39px;height:39px}.header-note,.intro,.side-note,footer{display:none}main{display:block;margin:0 auto;padding:0;max-width:470px}.calculator{box-shadow:none;border-radius:0;padding:18px 24px max(18px,env(safe-area-inset-bottom))}.calculator-heading{margin-bottom:20px}.calculator-heading h2{font-size:22px}.editor-top{font-size:12px}.editor-top button{font-size:12px}.expression{padding:11px 0 20px}.fraction-input input{height:49px;font-size:35px}.operators{margin-bottom:18px}.operators button{height:40px}.formats button{min-height:38px;font-size:11px}.answer-panel{padding-top:12px;min-height:180px}.answer-heading{font-size:12px}.answer-detail{font-size:11px}.answer{min-height:59px;font-size:44px}.keypad{grid-template-rows:repeat(4,minmax(49px,6.7dvh));margin-top:17px}.keypad-hint{font-size:10px;padding-top:14px}.keypad button{font-size:24px}.next-key small{font-size:9px}.toast{bottom:max(20px,env(safe-area-inset-bottom))}}
@media(max-width:360px){.site-header{padding:0 18px;height:64px}.calculator{padding:12px 18px}.calculator-heading{margin-bottom:12px}.expression{padding-bottom:16px}.formats button{padding:0 7px}.keypad{grid-template-rows:repeat(4,47px)}}
.answer.long .stack{font-size:16px;max-width:100%;overflow-wrap:anywhere}.answer.long{flex-wrap:wrap}.history-item span,.history-item strong{overflow-wrap:anywhere;min-width:0}
@media(max-width:720px){.calculator-heading{margin-bottom:12px}.expression{padding-top:7px;padding-bottom:16px}.keypad{grid-template-rows:repeat(4,minmax(47px,6.1dvh))}.answer-heading .icon-button{width:36px;height:32px}.formats button{min-width:35px}.keypad-hint{padding-top:12px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;scroll-behavior:auto!important}}

/* Inch Plus branding and language controls. Keep room for longer translations. */
.brand {flex-shrink:0;letter-spacing:normal}
.brand-logo {display:block;width:180px;height:60px;object-fit:contain}
.site-header {gap:16px}
.header-note {margin-left:0;flex:1;text-align:center}
.language-picker {margin-inline-start:auto;flex-shrink:0}
.language-picker select {min-height:44px;max-width:128px;border:1px solid var(--border);border-radius:8px;padding:8px;background:var(--paper);color:var(--green);font-size:14px}
.sr-only {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.formats {flex-wrap:wrap}.formats button {flex:1;min-width:44px}
.calculator-heading,.editor-top {gap:10px}.calculator-heading h2 {min-width:0}
.toast {max-width:calc(100vw - 32px);white-space:normal;text-align:center}
@media(max-width:720px){.site-header {gap:8px;height:auto;min-height:72px;padding-inline:20px}.brand-logo {width:150px;height:50px}.language-picker select {max-width:108px;font-size:13px}.site-header>.icon-button {flex-shrink:0}.formats button {padding-inline:6px}}
@media(max-width:360px){.site-header{padding-inline:12px;gap:5px}.brand-logo{width:130px;height:44px}.language-picker select{max-width:100px}}
