@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800;900&family=DM+Sans:wght@400;500;600;700&display=swap');
:root{color-scheme:light;--ink:#252925;--paper:#f4f4ef;--pear:#becb48;--gold:#d6c47b;--olive:#65702b;--muted:#62675b;--line:#d9dccd;font-family:'DM Sans',Arial,sans-serif;color:var(--ink);background:var(--paper)}
*{box-sizing:border-box}body{margin:0}button,input{font:inherit}a{color:inherit}button,summary{cursor:pointer}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid var(--olive);outline-offset:5px}[hidden]{display:none!important}.topbar{max-width:1240px;margin:auto;padding:28px 48px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line)}.brand{text-decoration:none;font-family:'Barlow Condensed',Impact,sans-serif;font-size:2rem;font-weight:900;letter-spacing:-.04em}.brand-star{color:var(--olive);font-size:1.6rem}.header-note,.eyebrow{font-size:.75rem;letter-spacing:.13em;font-weight:700}.header-note{color:var(--muted)}main{max-width:1144px;margin:auto;padding:0 28px}.intro{display:flex;align-items:center;justify-content:space-between;padding:44px 0 34px}.eyebrow{margin:0 0 12px}.intro h1{font-family:'Barlow Condensed',Impact,'Arial Narrow',sans-serif;text-transform:uppercase;font-size:clamp(3.6rem,7vw,6.2rem);line-height:.95;letter-spacing:-.025em;margin:0;font-weight:800}.intro h1 span{color:var(--olive)}.intro-copy{font-size:1rem;line-height:1.6;margin:18px 0 0;color:var(--muted)}.intro-product{display:block;width:auto;height:270px;max-width:35%;object-fit:contain;margin:0 65px 0 20px;flex-shrink:0}.calculator{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--ink);border-radius:14px;overflow:hidden;background:#fffef8;box-shadow:0 6px 0 var(--ink)}.ingredients,.recipe{padding:30px 34px}.recipe{background:var(--ink);color:var(--paper)}.recipe h2{color:var(--gold)}.section-heading{display:flex;align-items:center;gap:12px}.step{font-family:'Barlow Condensed',Impact,sans-serif;font-size:1.2rem;color:var(--muted);border:1px solid var(--line);padding:2px 7px;border-radius:4px}.recipe .step{color:var(--pear);border-color:#5a6050}h2{font-size:1.3rem;letter-spacing:-.025em;margin:0}.section-copy{font-size:.875rem;color:var(--muted);margin:12px 0 23px}.input-row{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:12px}.input-row label{display:flex;align-items:center;gap:12px;font-weight:600;font-size:1rem}.liquid-tag{display:inline-flex;width:30px;height:30px;justify-content:center;align-items:center;border-radius:6px;font-weight:700;font-size:.875rem;flex-shrink:0}.first-tag{background:var(--pear);color:var(--ink)}.second-tag{background:var(--gold);color:var(--ink)}.percentage{display:flex;align-items:center;position:relative;width:140px}.percentage input{width:100%;height:60px;padding:10px 35px 10px 16px;border:1px solid #b9beac;border-radius:7px;background:var(--paper);font-size:1.5rem;font-weight:600;color:var(--ink)}.percentage input:focus{outline:2px solid var(--olive);outline-offset:2px}.percentage>span{position:absolute;right:14px;color:var(--muted);pointer-events:none}.percentage input[aria-invalid=true]{border-color:#b53232}.input-help{font-size:.875rem;color:var(--muted);margin:18px 0 22px}button{display:flex;align-items:center;justify-content:space-between;width:100%;padding:17px 20px;border:1px solid var(--ink);border-radius:7px;background:var(--pear);font-weight:700;transition:transform .15s,box-shadow .15s}button:hover{box-shadow:3px 3px 0 var(--ink);transform:translate(-2px,-2px)}button:active{transform:translate(0,0);box-shadow:none}button span{font-size:1.5rem;line-height:1}.tiny-joke{font-size:.75rem;text-align:center;color:var(--muted);margin:16px 0 0}.recipe-top{display:flex;justify-content:space-between;align-items:center;margin:26px 0 12px}.recipe-top .eyebrow{color:#c7cabb;margin:0;font-size:.75rem}.recipe-mark{color:var(--gold);font-size:2rem;line-height:1}.amount-row{display:flex;justify-content:space-between;align-items:center;padding:14px 0;border-bottom:1px solid #454b3c;gap:12px}.amount-row>div{display:flex;gap:12px;align-items:center}.amount-row>div>span:last-child{font-size:.875rem}.amount-row small{display:block;font-size:.75rem;color:#c7cabb;margin-top:3px}.amount-row>strong{font-family:'Barlow Condensed',Impact,sans-serif;font-size:2.9rem;white-space:nowrap;line-height:1}.amount-row strong small{display:inline;font:400 .875rem 'DM Sans',Arial,sans-serif}.mix-bar{height:12px;background:var(--gold);border-radius:4px;overflow:hidden;margin:24px 0 16px}.mix-bar span{display:block;height:100%;background:var(--pear);transition:width .35s ease}.recipe-total{display:flex;justify-content:space-between;gap:15px;font-size:.875rem}.recipe-total strong{color:var(--gold);white-space:nowrap}.recipe-note{font-size:.875rem;line-height:1.6;color:#c7cabb;margin:22px 0 0}#error{padding:35px 0;max-width:360px}#error h3{font-size:1.6rem;margin:15px 0}#error p{font-size:1rem;line-height:1.6;color:#dfe2d3}.error-icon{display:inline-flex;background:var(--pear);color:var(--ink);width:45px;height:45px;border-radius:50%;align-items:center;justify-content:center;font-size:1.7rem;font-weight:700}.footnotes{display:flex;justify-content:space-between;gap:22px;margin-top:26px;color:var(--muted);font-size:.75rem;line-height:1.6}.footnotes p{margin:0}.footnotes span{color:var(--olive);font-size:1rem;margin-right:6px}details{margin:20px 0 36px;font-size:.875rem;color:var(--muted)}summary{width:fit-content;text-decoration:underline;text-underline-offset:4px}details p{max-width:800px;line-height:1.7}footer{max-width:1144px;margin:auto;padding:22px 28px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:16px;font-size:.75rem;color:var(--muted)}footer>span:first-child{font-weight:700;color:var(--ink)}.noscript{text-align:center;padding:24px}
@media(min-width:1400px){.intro{padding-top:56px;padding-bottom:40px}}@media(max-width:760px){.topbar{padding:20px 24px}.header-note{font-size:.65rem;letter-spacing:.04em;max-width:130px;text-align:right}main{padding:0 20px}.intro{padding:30px 0;gap:16px}.intro h1{font-size:3.6rem}.intro .eyebrow{font-size:.65rem}.intro-product{height:180px;margin:0 12px 0 0}.calculator{grid-template-columns:1fr}.ingredients,.recipe{padding:26px}.footnotes{flex-direction:column;gap:7px}footer{flex-wrap:wrap;padding:20px}footer>span:last-child{margin-left:auto}}@media(max-width:390px){.intro{gap:8px}.intro h1{font-size:3rem}.intro-product{height:150px;margin-right:0}.intro-copy{font-size:.875rem}.ingredients,.recipe{padding:22px 18px}.percentage{width:120px}.amount-row>strong{font-size:2.5rem}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important}}

/* A warm, pear-inspired setting for the drink and its calculator. */
:root{--paper:#f6f3e9;--ink:#263329;--pear:#c7d66b;--gold:#e0cf9f;--olive:#627640;--muted:#6c7264;--line:#dddfd0}
body{background:radial-gradient(ellipse at 90% 0%,#e9edd8 0,transparent 52%),var(--paper)}
.topbar{max-width:1160px;padding:24px 28px}.brand{font-size:2.1rem}.header-note{font-size:.65rem}
main{max-width:1160px;padding:0 28px}.intro{position:relative;display:grid;grid-template-columns:1.15fr 1fr;gap:36px;padding:28px 0 30px;min-height:330px}.intro>div{padding:12px 0}.intro h1{font-size:clamp(3.6rem,6.8vw,6rem);line-height:.96}.intro .eyebrow{color:var(--olive);font-size:.65rem;letter-spacing:.18em}.intro-copy{font-size:.95rem;margin-top:17px}
.drink-scene{position:relative;isolation:isolate;display:flex;align-items:center;justify-content:center;height:300px;margin:0;overflow:hidden;border-radius:140px 140px 24px 24px;background:linear-gradient(135deg,#e7edc9,#d4dfa3 60%,#c9d690)}
.drink-scene::after{content:"";position:absolute;bottom:32px;left:50%;width:170px;height:19px;transform:translateX(-50%);background:#4c5b32;opacity:.22;filter:blur(12px);border-radius:50%;z-index:-1}
.drink-halo{position:absolute;width:234px;height:234px;top:25px;border:1px solid #f8fae8a6;border-radius:50%;z-index:-2}.drink-halo::before{content:"";position:absolute;inset:18px;border:1px solid #f8fae86b;border-radius:50%}
.scene-word{position:absolute;top:84px;left:0;right:0;text-align:center;font-family:'Barlow Condensed',Impact,sans-serif;font-size:6.1rem;font-weight:800;letter-spacing:.015em;color:#f5f8df9c;z-index:-1}
.intro-product{height:252px;width:auto;max-width:none;object-fit:contain;margin:-10px 0 0;transform:rotate(-9deg);filter:drop-shadow(12px 10px 8px #35422026)}
.drink-scene figcaption{position:absolute;bottom:22px;right:22px;display:flex;flex-direction:column;gap:7px;color:#34442b}.drink-scene figcaption>span{font-size:.55rem;letter-spacing:.17em;font-weight:700}.drink-scene figcaption strong{font-size:.78rem;font-weight:600}.drink-scene figcaption i{font-style:normal;padding:0 4px}.scene-star{position:absolute;left:24px;bottom:22px;color:#627640;font-size:2.2rem}
.calculator{border:1px solid #d9dccd;border-radius:18px;background:#fffdf6;box-shadow:0 12px 32px #26332909}.ingredients,.recipe{padding:29px 34px}.recipe{background:#28392e;background-image:radial-gradient(ellipse at 100% 100%,#3b5037,transparent 75%)}.section-heading{gap:11px}h2{font-size:1.18rem}.step{border:0;background:#edf0e1;color:#66734d;border-radius:50%;width:29px;height:29px;display:inline-flex;align-items:center;justify-content:center;font-size:1rem;padding:0}.recipe .step{background:#ffffff0d;color:var(--pear)}.recipe h2{color:#f2f1e5}.section-copy{font-size:.8rem}.percentage input{background:#f7f7ed;border-color:#dde0d1;border-radius:10px;height:56px}.liquid-tag{border-radius:50%;width:28px;height:28px}.input-help{font-size:.75rem;margin:16px 0 20px}button{border:0;border-radius:10px;padding:15px 18px;color:var(--ink)}button:hover{box-shadow:0 4px 12px #62764024;transform:translateY(-2px)}.tiny-joke{font-size:.65rem}.recipe-top{margin-top:24px}.recipe-top .eyebrow{font-size:.65rem;letter-spacing:.14em}.recipe-mark{color:var(--pear)}.amount-row{border-color:#ffffff1a;padding:12px 0}.amount-row>strong{font-size:2.8rem}.mix-bar{height:8px;border-radius:8px;margin-top:22px}.recipe-total{font-size:.8rem}.recipe-total strong{color:var(--pear)}.recipe-note{font-size:.75rem;margin-top:19px}.footnotes{margin-top:22px;font-size:.68rem}details{font-size:.75rem;margin:18px 0 28px}footer{max-width:1104px;padding:20px 0;font-size:.65rem}
@media(min-width:1400px){.intro{padding-top:32px;padding-bottom:32px}}
@media(max-width:760px){.topbar{padding:20px 24px}main{padding:0 20px}.intro{grid-template-columns:1.2fr 1fr;gap:18px;min-height:0;padding:24px 0}.intro h1{font-size:clamp(2.9rem,8vw,4.2rem)}.intro>div{padding:0}.intro .eyebrow{font-size:.55rem;letter-spacing:.1em}.intro-copy{font-size:.8rem}.drink-scene{height:245px;border-radius:100px 100px 18px 18px}.intro-product{height:195px;margin:-18px 0 0}.drink-halo{width:180px;height:180px}.scene-word{font-size:4.1rem;top:85px}.drink-scene figcaption{right:14px;bottom:16px;gap:4px}.drink-scene figcaption>span{font-size:.45rem}.drink-scene figcaption strong{font-size:.65rem}.scene-star{font-size:1.5rem;left:14px;bottom:16px}.ingredients,.recipe{padding:26px}footer{margin:0 20px;padding:20px 0}}
@media(max-width:480px){.intro{gap:12px;grid-template-columns:1.25fr 1fr}.intro h1{font-size:3rem}.intro .eyebrow{max-width:160px;line-height:1.6}.intro-copy{font-size:.75rem;line-height:1.6;margin-top:12px}.drink-scene{height:222px}.intro-product{height:174px;margin:-22px 0 0}.drink-halo{width:150px;height:150px;top:24px}.scene-word{font-size:3.1rem;top:83px}.drink-scene figcaption{left:0;right:0;text-align:center;bottom:13px}.scene-star{display:none}.ingredients,.recipe{padding:24px 22px}.header-note{font-size:.55rem}.percentage{width:120px}}
@media(max-width:360px){main{padding:0 16px}.intro h1{font-size:2.55rem}.intro .eyebrow{font-size:.48rem}.drink-scene{height:206px}.intro-product{height:160px}.ingredients,.recipe{padding:22px 18px}.input-row label{font-size:.875rem;gap:8px}.percentage{width:110px}}

/* A little comic-book celebration when a recipe is calculated. */
.ingredients{position:relative}
.pang-burst{position:absolute;z-index:2;left:50%;bottom:76px;width:176px;height:112px;pointer-events:none;transform:translateX(-50%) rotate(-9deg);filter:drop-shadow(0 5px 0 #26332925)}
.pang-burst::before{content:"";position:absolute;inset:0;background:var(--pear);clip-path:polygon(50% 0,60% 17%,78% 4%,79% 26%,100% 25%,88% 45%,100% 63%,79% 68%,82% 93%,61% 82%,50% 100%,39% 83%,17% 95%,20% 71%,0 65%,12% 47%,0 27%,23% 27%,23% 5%,41% 18%)}
.pang-burst>span{position:absolute;inset:0;display:grid;place-items:center;font:900 3rem 'Barlow Condensed',Impact,sans-serif;letter-spacing:-.02em;color:var(--ink)}
.pang-burst i{position:absolute;font-style:normal;font-size:1.5rem;color:var(--olive)}
.pang-burst i:nth-of-type(1){left:-22px;top:8px}.pang-burst i:nth-of-type(2){right:-22px;top:20px}.pang-burst i:nth-of-type(3){right:4px;top:-22px;font-size:1rem}
.pang-burst.is-pang{animation:pang-pop .9s both}
.pang-burst.is-pang i{animation:pang-spark .9s both}
#result.is-pang{animation:recipe-pang .55s ease-out}
@keyframes pang-pop{0%{opacity:0;transform:translateX(-50%) scale(.3) rotate(-18deg)}22%{opacity:1;transform:translateX(-50%) scale(1.12) rotate(-6deg)}38%,70%{opacity:1;transform:translateX(-50%) scale(1) rotate(-9deg)}100%{opacity:0;transform:translateX(-50%) translateY(-24px) scale(.95) rotate(-5deg)}}
@keyframes pang-spark{0%{opacity:0;transform:scale(0) rotate(-40deg)}30%,65%{opacity:1;transform:scale(1) rotate(15deg)}100%{opacity:0;transform:scale(.7) rotate(45deg)}}
@keyframes recipe-pang{0%,100%{transform:scale(1)}35%{transform:scale(1.025)}}
@media(prefers-reduced-motion:reduce){.pang-burst.is-pang,.pang-burst.is-pang i,#result.is-pang{animation:none}}

/* Keep the layout usable on phones and when text is enlarged. */
.intro{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
.calculator{grid-template-columns:repeat(2,minmax(0,1fr))}
.input-row label,.amount-row>div{min-width:0}
.percentage{flex-shrink:0}
.recipe-total{flex-wrap:wrap}
summary{min-height:44px;display:flex;align-items:center;gap:8px}
summary::before{content:'▸';text-decoration:none}
details[open]>summary::before{content:'▾'}
@media(max-width:760px){.calculator{grid-template-columns:minmax(0,1fr)}}
@media(max-width:480px){
  .intro{grid-template-columns:minmax(0,1fr);gap:20px}
  .intro h1{font-size:clamp(3rem,13vw,4rem)}
  .drink-scene{width:100%;max-width:320px;justify-self:center}
  .intro .eyebrow{max-width:none;font-size:.65rem}
  .intro-copy{font-size:.875rem}
  .percentage input{font-size:1.25rem}
  .amount-row{flex-wrap:wrap}
}