:root{--paper:#f3efe6;--ink:#2b332b;--green:#385442;--line:#d9dbcf;--muted:#72796c;--orange:#dc6a3a}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:15px Arial,sans-serif}button,input,select{font:inherit}button,a,input,select,summary{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{opacity:.4;cursor:default}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid var(--orange);outline-offset:4px}header{height:100px;margin:0 5%;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}.brand{font-size:49px;font-weight:900;letter-spacing:-4px;text-decoration:none;color:var(--ink)}.brand span{font-size:15px;letter-spacing:0;vertical-align:top;display:inline-block;margin:10px 0 0 6px}.header-note,.eyebrow,.section-label,.badge,footer>span:last-child{font:10px monospace;letter-spacing:1.6px}.text-btn{background:none;border:0;color:var(--ink);padding:10px 0;font-size:12px}main{max-width:1400px;margin:auto;padding:0 5%}.heading{display:flex;align-items:end;justify-content:space-between;padding:44px 0 38px}h1{font-size:clamp(62px,8vw,104px);font-weight:400;line-height:.92;letter-spacing:-6px;margin:20px 0 0;position:relative}h1 em{font-family:Georgia,serif;font-weight:400}h1 .dot{color:var(--orange);font-size:26px;vertical-align:middle;margin-left:15px}.heading>p{font-size:14px;line-height:1.8;color:var(--muted);padding-bottom:3px}.app-grid{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:#faf8f2}.builder{padding:30px 36px}.section-label{display:flex;justify-content:space-between;gap:8px;color:var(--muted);font-size:9px;align-items:center}.badge{color:var(--green);font-size:8px;border:1px solid #c4cfc0;border-radius:20px;padding:6px 8px}label{display:block;font-size:12px;margin:22px 0 9px}input,select{width:100%;background:transparent;border:1px solid #cdd0c2;border-radius:7px;color:var(--ink);padding:13px;outline:none;min-width:0}input:focus,select:focus{border-color:var(--green);box-shadow:0 0 0 2px #38544215}select{cursor:pointer}#drink{font-size:20px;padding:16px}.drink-chips,.fractions{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap}.drink-chips button,.fractions button{border:1px solid var(--line);border-radius:30px;background:none;font-size:11px;color:var(--muted);padding:8px 12px}.drink-chips button.active,.fractions button.active{background:var(--green);border-color:var(--green);color:#fff}.row{display:grid;grid-template-columns:1fr 1fr;gap:16px}.fractions{justify-content:flex-end}.fractions button{min-width:46px}.recipe{margin-top:0}.recipe-note{font-size:11px;line-height:1.65;color:var(--muted);min-height:36px;margin:16px 0}details{border-top:1px solid var(--line);padding-top:15px}summary{font-size:11px;cursor:pointer}details p{font-size:12px;line-height:1.7;color:var(--muted)}.result{background:#e8eddf;padding:30px 36px;display:flex;flex-direction:column;align-items:center;position:relative}.result>.section-label{width:100%}.visual{height:265px;width:100%;position:relative;display:grid;place-items:center}.orbit{position:absolute;border:1px solid #b9c6af;border-radius:50%;width:260px;height:210px;transform:rotate(-25deg);opacity:.5}.orbit-two{width:310px;height:150px;transform:rotate(30deg);opacity:.35}.cup-wrap{position:relative;filter:drop-shadow(0 20px 15px #52604922)}.cup{width:141px;height:175px;border:2px solid #6b796844;border-top:4px solid #ffffffbb;border-radius:5px 5px 35px 35px;background:linear-gradient(100deg,#ffffff55,#ffffff11 60%,#ffffff66);position:relative;overflow:hidden;transform:perspective(400px) rotateX(-5deg)}.liquid{position:absolute;bottom:0;left:0;width:100%;height:94%;background:linear-gradient(90deg,#b47a4f,#d0a77d 50%,#a77149);transition:height .55s cubic-bezier(.2,.8,.2,1),background .4s;border-radius:0 0 30px 30px}.foam{position:absolute;top:-1px;background:#eedec0;width:100%;height:15px;border-radius:50%;box-shadow:0 3px 0 #aa754c44}.glass-line{position:absolute;left:13px;top:10px;width:5px;height:135px;background:linear-gradient(#fff7,#fff0);border-radius:5px}.cup>span{position:absolute;top:90px;left:0;right:0;text-align:center;color:#fffc;font:10px monospace;letter-spacing:3px}.saucer{width:185px;height:12px;border-radius:50%;background:#d3d8c8;margin:-5px -22px 0;border-bottom:3px solid #b5c0a8}.annotation{position:absolute;bottom:15px;right:0;font:10px monospace;color:var(--muted)}.amount{display:flex;align-items:baseline;gap:12px;margin-top:3px}.amount>span:first-child{font-size:88px;letter-spacing:-6px;line-height:1;font-weight:400}.mg{font-family:Georgia;font-style:italic;font-size:31px}.result-description{font-size:12px;color:var(--muted);margin:8px 0 18px}.equation{font:11px monospace;text-align:center;color:#607056;min-height:28px}#error{font-size:12px;color:#a63b26;text-align:center;margin:0 0 10px;min-height:14px}.primary{background:var(--green);color:#fff;border:none;border-radius:8px;padding:17px 20px;width:100%;font-size:14px;transition:background .2s,transform .2s}.primary:hover{background:#233c2d;transform:translateY(-1px)}.small-note{font-size:10px;line-height:1.6;text-align:center;color:var(--muted);max-width:310px;margin:13px 0 0}.journal{margin:45px 0 0}.journal-top{display:flex;justify-content:space-between;align-items:end}h2{font-family:Georgia,serif;font-size:32px;letter-spacing:-1px;font-weight:400;margin:12px 0}.daily-total{text-align:right}.daily-total>span{font-size:42px;letter-spacing:-2px}.daily-total small{display:block;color:var(--muted);font-size:10px;margin-top:5px}.journal-tools{display:flex;justify-content:space-between;align-items:center;margin:20px 0 14px;color:var(--muted);font-size:10px}.journal-tools label{display:flex;align-items:center;gap:12px;margin:0}.journal-tools input{padding:8px;font-size:12px}.entry{display:flex;align-items:center;gap:16px;padding:18px 0;border-top:1px solid var(--line)}.entry .icon{display:grid;place-items:center;background:#e3e7d9;width:40px;height:44px;border-radius:8px;color:var(--green);font-size:22px}.entry .desc{flex:1}.entry strong{font-size:14px;font-weight:400}.entry p{font-size:11px;color:var(--muted);margin:5px 0 0}.entry .entry-mg{font-size:20px}.entry .entry-mg small{font-size:10px;color:var(--muted)}.remove{border:0;background:none;color:#7c8275;font-size:20px;padding:10px}.empty{padding:35px 20px;border:1px dashed #cbd0c1;text-align:center;color:var(--muted);font-size:13px;border-radius:8px}.empty span{display:block;font-size:11px;margin-top:8px}.journal-bottom{display:flex;justify-content:space-between;border-top:1px solid var(--line);margin-top:15px;padding-top:10px}footer{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);margin-top:45px;padding:25px 0 35px}footer .brand{font-size:33px}footer p{color:var(--muted);font-size:12px;line-height:1.6}footer>span:last-child{font-size:8px;line-height:1.8;color:var(--muted)}dialog{max-width:610px;width:calc(100% - 30px);background:var(--paper);color:var(--ink);padding:35px;border:1px solid var(--line);border-radius:16px}dialog::backdrop{background:#17251b99;backdrop-filter:blur(5px)}dialog p{font-size:13px;line-height:1.7;color:#687260}dialog a{color:var(--green)}.close{float:right;background:none;border:0;font-size:25px;color:var(--ink)}#toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);background:var(--green);color:white;padding:14px 22px;border-radius:30px;font-size:12px;display:none;z-index:10;max-width:90%;text-align:center}[hidden]{display:none!important}@media(max-width:760px){header{height:76px}.brand{font-size:40px}.header-note{font-size:8px}.heading{padding:28px 0;align-items:start}.heading>p{max-width:155px;font-size:11px;margin-top:40px}.heading>p br{display:none}h1{font-size:65px;letter-spacing:-4px}.eyebrow{font-size:8px}.app-grid{grid-template-columns:1fr}.builder,.result{padding:25px 22px}.visual{height:230px}.amount>span:first-child{font-size:76px}.journal-top{gap:10px}h2{font-size:25px}.daily-total>span{font-size:33px}.journal-tools{align-items:start;gap:20px}.journal-tools>span{max-width:110px;line-height:1.5;text-align:right}.badge{font-size:7px}.entry{gap:10px}.entry p{font-size:10px}footer{gap:20px}footer>span:last-child{font-size:7px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}
@media(max-width:760px){.heading{display:block}.heading>p{max-width:100%;font-size:12px;margin:17px 0 0}h1{font-size:68px}.heading>p br{display:none}}
.count-control{display:grid;grid-template-columns:44px 1fr 44px;gap:8px}.count-control button{border:1px solid #cdd0c2;background:transparent;border-radius:7px;color:var(--green);font-size:23px}.count-control input{text-align:center}.count-note{font-size:10px;line-height:1.6;color:var(--muted);margin:8px 0 0}
.product-source{display:block;color:var(--green);font-size:11px;margin:-5px 0 16px;text-underline-offset:3px}.result>.section-label{flex-wrap:wrap;line-height:1.5}
.can-wrap{position:relative;width:155px;height:245px;filter:drop-shadow(0 16px 14px #35442e20);animation:can-arrive .35s ease-out}.can-art{height:245px;width:143px;display:block;object-fit:contain}.show-can .orbit{opacity:.24}.show-can .orbit-two{opacity:.16}.can-level{position:absolute;left:149px;top:35px;height:170px;width:4px;background:#3854421c;border-radius:10px;overflow:hidden}.can-level span{display:block;position:absolute;bottom:0;width:100%;background:#385442;border-radius:10px;transition:height .5s}.can-caption{position:absolute;left:160px;top:101px;writing-mode:vertical-rl;font:8px monospace;letter-spacing:2px;color:#72796c}.entry .icon.can-icon{background:transparent;width:40px;min-width:40px;height:54px;border-radius:0}.can-icon img{height:54px;width:34px;object-fit:contain}.drink-chips button.has-can{display:inline-flex;align-items:center;gap:6px;padding:4px 10px 4px 6px}.chip-can{width:16px;height:26px;object-fit:contain}@keyframes can-arrive{from{opacity:.3;transform:translateY(7px) rotate(-3deg)}to{opacity:1;transform:translateY(0) rotate(0)}}@media(prefers-reduced-motion:reduce){.can-wrap{animation:none}.can-level span{transition:none}}@media(max-width:760px){.can-wrap{height:215px;width:140px}.can-art{height:215px;width:125px}.can-level{left:133px;height:145px;top:32px}.can-caption{left:143px;top:88px}}
.header-controls{display:flex;align-items:center;gap:22px}#language{width:112px;padding:8px 9px;font-size:12px;background:#faf8f2;border-radius:6px}.header-controls .text-btn{white-space:nowrap}@media(max-width:600px){.header-controls{gap:10px}.header-note{display:none}#language{width:100px;font-size:11px}.header-controls .text-btn{font-size:11px}}