:root{color-scheme:dark;--bg:#0f151b;--surface:#141e27;--border:#293743;--text:#edf3f8;--muted:#a5b5c1;--teal:#20b8a6;--lime:#b5e34b;font-family:"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,BlinkMacSystemFont,sans-serif;color:var(--text);background:var(--bg)}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 5% 0%,#51832720,transparent 35%),radial-gradient(ellipse at 100% 20%,#159f951c,transparent 40%),var(--bg);min-height:100vh}button,input,select{font:inherit}button{cursor:pointer}button,input,select{touch-action:manipulation}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--lime);outline-offset:4px}input,select{min-width:0}input::-webkit-inner-spin-button{appearance:none}input[type=number]{appearance:textfield;-moz-appearance:textfield}button{color:inherit}h1,h2,p{margin:0}[hidden]{display:none!important}.app{width:min(100% - 36px,540px);margin:auto;padding:38px 0 max(28px,env(safe-area-inset-bottom))}.logo{width:260px;max-width:85%;height:auto;display:block;margin-bottom:30px;border-radius:2px}.eyebrow{font-size:10px;letter-spacing:.2em;color:var(--teal);font-weight:750;margin-bottom:10px}h1{font-size:36px;font-weight:730;letter-spacing:-1.3px;line-height:1.12}h1 span{color:#c0d3d8}.intro{color:var(--muted);font-size:14px;margin:14px 0 26px}.card{background:linear-gradient(145deg,#17222b,#111a22);border:1px solid var(--border);border-radius:18px;padding:22px;margin-bottom:16px;box-shadow:0 10px 30px #00000012}.section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px}h2{font-size:17px;letter-spacing:-.25px}.step{font-size:11px;letter-spacing:.12em;color:#8396a4;border:1px solid #31404b;border-radius:6px;padding:4px 6px}label{font-size:13px;font-weight:600;line-height:1.4;display:block;margin-bottom:8px}select{width:100%;background:#0e171f;color:var(--text);border:1px solid #384854;border-radius:10px;min-height:52px;padding:12px;font-size:15px}.check{display:flex;align-items:center;gap:9px;color:var(--muted);font-size:12px;font-weight:400;min-height:44px;margin:6px 0 12px}.check input{width:18px;height:18px;accent-color:var(--teal)}.input-unit{display:flex;align-items:center;background:#0c151d;border:1px solid #384854;border-radius:10px;overflow:hidden}.input-unit:focus-within{border-color:var(--teal)}.input-unit input{background:transparent;border:0;color:var(--text);padding:12px;width:100%;outline-offset:-3px;min-height:48px}.input-unit>span{color:var(--muted);padding-right:12px;font-size:13px;white-space:nowrap}.compact{width:98px;flex-shrink:0}.compact input{text-align:right;padding-right:5px;font-weight:650;font-size:18px}.level-label,.source-row{display:flex;align-items:center;justify-content:space-between;gap:12px}.level-label label,.source-row label{margin:0}.gauge{display:grid;grid-template-columns:repeat(10,1fr);gap:5px;margin:22px 0 0}.gauge span{height:20px;background:#293741;border-radius:3px;transform:skewX(-9deg)}.gauge .filled{background:linear-gradient(130deg,#9fc84b,#22b49e)}input[type=range]{appearance:none;display:block;width:100%;height:34px;background:transparent;margin:0;cursor:pointer}input[type=range]::-webkit-slider-runnable-track{height:4px;background:#34434e;border-radius:5px}input[type=range]::-webkit-slider-thumb{appearance:none;width:24px;height:24px;background:#d4edce;border:5px solid var(--teal);border-radius:50%;margin-top:-10px;box-shadow:0 0 0 4px #20b8a615}input[type=range]::-moz-range-track{height:4px;background:#34434e}input[type=range]::-moz-range-thumb{width:18px;height:18px;background:#d4edce;border:4px solid var(--teal);border-radius:50%}.scale{display:flex;justify-content:space-between;color:#8297a5;font-size:11px;padding:0 4px;margin-bottom:18px}.estimate{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px}.estimate>span{display:flex;align-items:center}.estimate strong{font-size:18px;color:#aee5d1}.info{background:transparent;border:0;width:36px;min-height:44px;padding:0;font-size:12px;flex-shrink:0;position:relative;color:#a7bac6}.info::before{content:'';position:absolute;border:1px solid #6c8391;border-radius:50%;width:17px;height:17px;left:50%;top:50%;transform:translate(-50%,-50%)}.helper{font-size:12px;line-height:1.65;color:var(--muted)}#storage-status:empty{display:none}.help{font-size:13px;color:#c4d6e0;line-height:1.65;padding:15px;background:#0c151d;border-left:2px solid var(--teal);border-radius:5px;margin-top:12px}.blend-pair{display:grid;grid-template-columns:1fr 1fr;gap:14px}.blend-pair label{font-size:12px;min-height:34px;margin:0;display:flex;align-items:center}.target-label{display:flex;align-items:center}.target-label .info{width:26px;min-height:34px}.ethanol>span{font-size:24px;padding:0 0 0 14px;color:#7d929e}.ethanol input{font-size:30px;font-weight:650;padding:13px 8px}.target .input-unit{border-color:#4b8273;background:#17302c55}.target .ethanol>span{color:#a6ddca}.divider{height:1px;background:var(--border);margin:24px 0}.source-row{margin-top:18px}.source-row+.helper{margin-top:10px}#custom-field{margin-top:18px}.action{padding:4px 0 12px}.calculate{display:flex;justify-content:space-between;align-items:center;width:100%;min-height:58px;border:0;border-radius:12px;color:#081b1b;background:linear-gradient(110deg,#b3d94d,#23b7a6);font-weight:750;font-size:16px;padding:16px 20px;box-shadow:0 6px 24px #1baf8e14}.calculate:hover{filter:brightness(1.09)}.calculate span{font-size:23px}.action-caption{display:block;text-align:center;font-size:11px;color:#91a6b4;margin-top:10px}.results{border-color:#3e7467;margin-top:12px;scroll-margin-top:20px}.results h2{margin-bottom:10px}.result-kicker{color:#a3d6c5;font-size:11px;text-transform:uppercase;letter-spacing:.12em;margin-bottom:18px}.recipe{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:14px 0;border-bottom:1px solid var(--border)}.recipe span{font-size:14px;color:#c4d2db}.recipe strong{font-size:30px;letter-spacing:-1px}.recipe small{font-size:14px;letter-spacing:0;font-weight:400;color:var(--muted)}.final-blend{display:flex;align-items:center;justify-content:space-between;padding:20px 0}.final-blend strong{font-size:32px;color:#a9e9ce}.final-blend span{font-size:13px}dl{margin:0 0 18px;font-size:12px;color:var(--muted)}dl div{display:flex;justify-content:space-between;padding:6px 0}dd{margin:0;color:var(--text)}.notice{font-size:12px;line-height:1.7;color:var(--muted);padding-top:15px;border-top:1px solid var(--border)}.message{font-size:14px;line-height:1.7;color:#c9d5dd;margin:12px 0 20px}.results.warning{border-color:#9d8140}footer{text-align:center;padding-top:22px;font-size:11px;color:#93a7b5}footer .dot{margin:0 6px;color:var(--teal)}#install{display:block;margin:12px auto 2px;padding:12px;background:none;border:0;color:#c0d5dd;min-height:44px;font-size:12px}#install-help{padding:10px 20px}footer>.helper{font-size:10px}@media(min-width:700px){.app{padding-top:50px}.logo{width:290px}h1{font-size:42px}.card{padding:26px}}@media(max-width:360px){.app{width:calc(100% - 24px)}.card{padding:16px}.blend-pair{gap:9px}.blend-pair label{font-size:11px}h1{font-size:32px}}@media(prefers-reduced-motion:no-preference){.calculate{transition:filter .15s}.results{animation:appear .2s ease-out}@keyframes appear{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}}

/* Header artwork follows the full card width at every viewport. */
.logo{width:100%;max-width:100%;height:auto;margin-left:auto;margin-right:auto}


#level-tip{margin-bottom:14px}


@media(min-width:700px){h1{font-size:38px}}


/* Stronger ethanol prefixes and primary action lettering. */
.ethanol>span{font-size:32px;font-weight:800;line-height:1;color:#a9becb}
.target .ethanol>span{color:#b7ead6}
.calculate{font-size:20px;font-weight:800;letter-spacing:.01em;-webkit-text-stroke:.35px currentColor}
.calculate span{-webkit-text-stroke:0}


/* Subtle teal halo, preserving crisp button text. */
.calculate{box-shadow:0 0 0 1px rgba(115,239,210,.5),0 0 14px 2px rgba(32,184,166,.38),0 0 32px 5px rgba(32,184,166,.20)}
@media(hover:hover){.calculate:hover{box-shadow:0 0 0 1px rgba(151,255,226,.7),0 0 18px 3px rgba(32,184,166,.5),0 0 38px 7px rgba(32,184,166,.26)}}
.calculate:active,.calculate:focus-visible{box-shadow:0 0 0 1px rgba(151,255,226,.7),0 0 18px 3px rgba(32,184,166,.5),0 0 38px 7px rgba(32,184,166,.26)}
@media(prefers-reduced-motion:no-preference){.calculate{transition:filter .15s,box-shadow .18s}}


/* Emphasize the two source-fuel labels. */
.source-row>label{font-size:15px;font-weight:750}


.source-heading{margin:0;font-size:13px;font-weight:650;color:#c4d6e0;line-height:1.5}.source-heading span{font-weight:400;color:var(--muted)}


.source-label{display:flex;align-items:center;min-width:0}.source-label label{font-size:15px;font-weight:750;margin:0}.source-label .info{width:32px}


/* Pump inputs echo the blend fields while retaining percentage units. */
.source-row .input-unit{width:116px;background:#0c151d;border:1px solid #384854;border-radius:10px}
.source-row .input-unit input{font-size:30px;font-weight:650;padding:13px 5px 13px 10px;min-height:66px}
.source-row .input-unit>span{font-size:18px;font-weight:600;color:#a9becb;padding-right:12px}
.source-row .input-unit:focus-within{border-color:var(--teal)}
.mobile-qr{display:flex;align-items:center;gap:24px;margin-top:24px}.mobile-qr img{flex-shrink:0;border-radius:8px}.mobile-qr h2{margin:0 0 8px}.mobile-qr p{margin:6px 0}.mobile-qr a{display:inline-block;margin-top:6px;color:var(--teal);text-underline-offset:3px}
@media(max-width:767px){.mobile-qr{display:none}}
.level-heading{flex:1;min-width:0}.level-heading .helper{font-size:11px;line-height:1.5;margin-top:4px}.level-label>.input-unit{flex-shrink:0}
.calculator-about{margin:24px 0;color:var(--muted);font-size:12px;line-height:1.7}.calculator-about h2{font-size:16px;color:var(--text);margin-bottom:8px}.calculator-about p{margin:8px 0}.calculator-about a{color:var(--teal);text-underline-offset:3px}.calculator-about summary{cursor:pointer;color:var(--text);padding:12px 0}.calculator-about summary:focus-visible{outline:2px solid var(--lime);outline-offset:3px}