:root{--bg:#f8f9ff;--surface:#fff;--subtle:#eff4ff;--cont:#e6eeff;--ink:#121c2a;--muted:#59413a;--line:#e5e7eb;--terra:#9b2f00;--terra-deep:#c2410c;--amber:#ffede1;--saline:#0284c7;--saline-deep:#075985;--saline-wash:#e0f2fe;--danger:#ba1a1a;--danger-bg:#ffdad6;--r:1rem;--s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--fs-sm:.85rem;--fs:1rem;--display:Epilogue,Georgia,"Times New Roman",serif;--body:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;--num:"Space Grotesk",ui-monospace,Consolas,monospace}
*{box-sizing:border-box}
body{margin:0;font:1rem/1.5 var(--body);background:var(--bg);color:var(--ink)}
.topbar{display:flex;align-items:center;gap:var(--s3);padding:var(--s3) var(--s4);background:rgba(248,249,255,.9);backdrop-filter:blur(16px);border-bottom:1px solid var(--line);box-shadow:0 1px 8px rgba(0,0,0,.04)}
.topbar img{border-radius:9px}
.brand{font:700 1.2rem var(--display);display:block;line-height:1.1}
.tag{color:var(--muted);font-size:var(--fs-sm);display:block}
main{max-width:560px;margin:0 auto;padding:var(--s5) var(--s4)}
h1{font:700 clamp(1.7rem,1.2rem + 3vw,2.4rem)/1.15 var(--display);letter-spacing:-.02em;margin:0}
.lede{color:var(--muted);margin:var(--s2) 0 var(--s4);max-width:34rem}
.badges{display:flex;gap:var(--s2);margin-bottom:var(--s4);flex-wrap:wrap}
.badge{flex:1;min-width:140px;background:var(--subtle);border-radius:12px;padding:var(--s2) var(--s3);box-shadow:0 1px 2px rgba(0,0,0,.05)}
.badge .k{display:block;font:700 .68rem var(--num);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.badge strong{font:700 1rem var(--num);color:var(--terra)}
.card{background:var(--surface);border-radius:var(--r);padding:var(--s4);margin-bottom:var(--s4);box-shadow:0 1px 3px rgba(0,0,0,.06)}
.cardhead{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);margin-bottom:var(--s3)}
h2{font:600 1.15rem var(--display);margin:0}
.caps{font:700 .7rem var(--num);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:var(--s3) 0 var(--s2)}
.pill{display:flex;background:#e6eeff;border-radius:999px;padding:3px;box-shadow:inset 0 2px 4px rgba(31,41,55,.08)}
.pill button{border:0;background:transparent;color:var(--muted);font:700 .72rem var(--num);letter-spacing:.05em;padding:var(--s2) var(--s3);border-radius:999px;cursor:pointer;min-height:44px}
.pill button[aria-pressed="true"]{background:#fff;color:var(--terra-deep);box-shadow:0 2px 6px rgba(31,41,55,.12)}
.stepper{display:flex;gap:var(--s2);align-items:stretch;background:var(--subtle);border-radius:var(--r);padding:var(--s2);box-shadow:inset 0 2px 4px rgba(0,0,0,.05)}
.stepper>button{width:56px;min-height:56px;border:0;border-radius:12px;background:#fff;font-size:1.6rem;color:var(--ink);cursor:pointer;box-shadow:0 2px 6px rgba(31,41,55,.1)}
.stepper>button:active{transform:scale(.94)}
.stepval{flex:1;display:flex;align-items:baseline;justify-content:center;gap:var(--s2)}
#water{width:5.5rem;border:0;background:transparent;text-align:right;font:700 clamp(1.8rem,1.4rem + 2vw,2.4rem) var(--num);color:var(--ink);padding:0}
#water:focus{outline:none}
.stepval:focus-within{outline:3px solid #f3c9ae;border-radius:12px}
#unitLabel{font:600 1.1rem var(--num);color:var(--muted)}
.presets{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s2)}
.presets button{border:0;border-radius:12px;background:var(--subtle);padding:var(--s2);cursor:pointer;font:inherit;color:var(--ink);text-align:left;min-height:56px}
.presets button strong{display:block;font:600 .82rem var(--num)}
.presets button small{color:var(--muted);font-size:.75rem}
.presets button:hover{background:var(--cont)}
.presets button.on{background:var(--subtle);box-shadow:0 0 0 2px var(--terra-deep) inset}
.presets button.on strong{color:var(--terra-deep)}
.error{color:var(--danger);background:var(--danger-bg);border-radius:8px;padding:var(--s2) var(--s3);font-size:var(--fs-sm);margin:var(--s3) 0 0}
.levels{display:grid;gap:var(--s2)}
.lvl{position:relative;display:block;border:0;border-radius:12px;padding:var(--s3);cursor:pointer;background:var(--subtle);transition:all .2s}
.lvl input{position:absolute;opacity:0}
.lvl .lvtag{display:inline-block;font:700 .68rem var(--num);letter-spacing:.06em;background:#d9e3f6;color:var(--ink);border-radius:999px;padding:2px 10px;margin-bottom:var(--s1)}
.lvl:has(input:checked) .lvtag{background:var(--terra-deep);color:#fff}
.lvl strong{display:block;font:600 1.05rem var(--display)}
.lvl em{display:block;font:600 .85rem var(--num);font-style:normal;color:var(--terra-deep)}
.lvl small{color:var(--muted);font-size:.82rem}
.lvl:has(input:checked){background:#fff;box-shadow:0 4px 6px -1px rgba(0,0,0,.1);border-bottom:4px solid var(--terra-deep)}
.lvl:has(input:focus-visible){outline:3px solid #f3c9ae;outline-offset:2px}
.output{display:block}
.hero{background:var(--surface);border:2px solid var(--saline);border-radius:24px;padding:var(--s4);margin-bottom:var(--s4);box-shadow:0 8px 24px -4px rgba(2,132,199,.14)}
.herohead{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--s2)}
.salpill{font:700 .7rem var(--num);background:var(--terra);color:#fff;border-radius:999px;padding:3px 12px}
.wave{width:100%;height:auto;display:block;border-radius:14px}
#waveCap{text-align:center;background:var(--saline-wash);border-radius:999px;padding:3px 0;color:var(--saline-deep)}
.grams{margin:var(--s2) 0 0;text-align:center;font:700 clamp(2.6rem,2rem + 3vw,3.4rem)/1 var(--num);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.grams .unit{font-size:1.2rem;color:var(--terra-deep);letter-spacing:0}
.equiv{text-align:center;color:var(--muted);margin:var(--s1) 0 0;font-size:.92rem}
.tipcard{background:var(--subtle);border-radius:var(--r);padding:var(--s4);margin-bottom:var(--s4)}
.tiphead{display:flex;justify-content:space-between;margin-bottom:var(--s2)}
.tip{font:600 1.02rem/1.55 Georgia,serif;margin:0}
.tipby{font:700 .68rem var(--num);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:var(--s2) 0 0}
footer{max-width:560px;margin:0 auto;padding:0 var(--s4) var(--s6);color:var(--muted);font-size:.82rem;display:flex;flex-direction:column;gap:2px}
footer strong{color:var(--ink);font-family:var(--display)}
button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #f3c9ae;outline-offset:2px}
#waterH,#grains{scroll-margin-top:5rem}
.pill button:active,.presets button:active,#tipBtn:active{transform:scale(.97)}
@media(min-width:768px){main,footer{max-width:864px}.bench{display:grid;grid-template-columns:7fr 5fr;gap:var(--s4);align-items:start}.output{position:sticky;top:var(--s4)}.levels{grid-template-columns:repeat(3,1fr)}}
@media(prefers-reduced-motion:reduce){.stepper>button:active,.pill button:active,.presets button:active,#tipBtn:active{transform:none}#waveFront{transition:none}}
#waveFront{transition:fill .5s ease}
#waveFront.lv1{fill:#bfdbfe}#waveFront.lv2{fill:#0284c7}#waveFront.lv3{fill:#075985}
.topbar{position:sticky;top:0;z-index:5}
.topnav{margin-left:auto;display:flex;gap:var(--s1)}
.topnav a{font:700 .75rem var(--num);color:var(--muted);text-decoration:none;padding:var(--s2) var(--s3);border-radius:8px;min-height:44px;display:inline-flex;align-items:center;transition:background-color .15s,color .15s,transform .15s}
.topnav a:first-child{background:var(--terra-deep);color:#ffece7}
@media(hover:hover){.topnav a:first-child:hover{background:#9b2f00;color:#fff}.topnav a:not(:first-child):hover{background:var(--cont);color:var(--ink)}}
.topnav a:active{transform:scale(.97)}
.oz{text-align:center;color:var(--muted);margin:0}
.equivgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s2);margin-top:var(--s2)}
.eq{background:var(--subtle);border-radius:10px;padding:var(--s2);text-align:center}
.eq span{display:block;font:700 .62rem var(--num);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.eq strong{display:block;font:700 .95rem var(--num)}
.eq small{color:var(--muted);font-size:.75rem}
.grains{background:var(--surface);border-radius:var(--r);padding:var(--s4);margin-bottom:var(--s4);box-shadow:0 1px 3px rgba(0,0,0,.06)}
.gsub{color:var(--muted);font-size:.88rem;margin:var(--s1) 0 var(--s3)}
.graingrid{display:grid;gap:var(--s2)}
.grow{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s2)}
.grow strong{font-family:var(--display)}
.grow span{font:700 .65rem var(--num);text-transform:uppercase;letter-spacing:.06em;color:var(--terra-deep);text-align:right}
.grain{background:var(--subtle);border-radius:12px;padding:var(--s3)}
.grain p{margin:var(--s1) 0;color:var(--muted);font-size:.85rem}
.gnum{font:700 1.05rem var(--num)!important;color:var(--ink)!important}
.gnum small{font-weight:400;color:var(--muted);font-size:.75rem}
.bar{height:8px;border-radius:99px;background:var(--line);overflow:hidden;margin-top:var(--s2)}
.bar i{display:block;height:100%;background:var(--terra);border-radius:99px}
@media(min-width:768px){.graingrid{grid-template-columns:repeat(3,1fr)}}
.warn{background:var(--subtle);border-radius:var(--r);padding:var(--s3) var(--s4);margin-bottom:var(--s4)}
.warn strong{display:block;font-family:var(--display)}
.warn span{color:var(--muted);font-size:.85rem}
.ico{vertical-align:-3px;margin-right:2px}
.boilnote{background:var(--bg);border-radius:10px;padding:var(--s2) var(--s3);font-size:.85rem;color:var(--muted);margin:var(--s2) 0 0}
.boilnote strong{color:var(--ink)}
.tiphead{align-items:center}
.tiphead .row{display:inline-flex;align-items:center;gap:var(--s2)}
#tipBtn{border:1px solid var(--line);background:var(--surface);color:var(--terra-deep);border-radius:8px;min-width:44px;min-height:44px;font-size:1.1rem;cursor:pointer}
@media(hover:hover){#tipBtn:hover{border-color:var(--terra)}}
.grainhead{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s2);margin-bottom:var(--s3)}
.grainhead .salpill{flex-shrink:0}
@media(max-width:640px){.tag{display:none}}
.steprow{display:flex;align-items:baseline;justify-content:center;gap:var(--s1)}
.stepcap{display:block;text-align:center;font:700 .62rem var(--num);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:-4px}
@media(max-width:360px){.topbar{padding:var(--s2)}}