.coffee-composer{margin:80px 0;padding:0!important;border-block:1px solid #c9c6bf;color:#22211f;background:#f8f7f3}.composer-heading{display:flex;justify-content:space-between;gap:32px;padding:42px 40px 35px;align-items:end}.composer-heading h2{font:400 clamp(32px,3.6vw,52px)/1.05 var(--display-font);letter-spacing:-.035em;margin:15px 0 0}.composer-heading h2 em{font-style:normal;color:#81745f}.composer-heading>p{font:14px/1.8 var(--body-font);max-width:320px;margin:0}.composer-workspace{display:grid;grid-template-columns:210px minmax(280px,1fr) minmax(260px,310px);border-top:1px solid #d4d0c9;min-height:520px}.composer-choices{padding:20px 0;border-right:1px solid #d4d0c9;align-self:stretch}.composer-choices button{width:100%;display:flex;align-items:center;gap:13px;padding:15px 22px;min-height:48px;border:0;background:transparent;color:#56534d;font:13px/1.4 var(--body-font);text-align:left;cursor:pointer}.composer-choices button>span{font:10px ui-monospace,monospace;color:#625d54}.composer-choices button>b{margin-left:auto;font-size:16px;font-weight:400;opacity:0;transform:translateX(-5px);transition:.25s}.composer-choices button[aria-pressed=true]{color:#26231d;background:#e9e5dc}.composer-choices button[aria-pressed=true] b,.composer-choices button:hover b{opacity:1;transform:none}.composer-choices button:focus-visible,.composer-stage-controls button:focus-visible{outline:2px solid #8a432e;outline-offset:-4px}.composer-stage{margin:0!important;padding:25px 24px 20px;position:relative;display:flex;flex-direction:column;justify-content:space-between;min-width:0;background:radial-gradient(ellipse at 50% 62%,#fff 0,#f1efe8 55%,#eae7df 100%);overflow:hidden}.composer-stage-label{display:flex;justify-content:space-between;gap:12px;font:9px/1.4 var(--body-font);letter-spacing:.11em;color:#767066}.composer-scene{height:345px;position:relative;display:flex;align-items:end;justify-content:center;padding-bottom:37px;isolation:isolate}.composer-cup{width:var(--cup-w);height:var(--cup-h);position:relative;z-index:3;transition:width .6s cubic-bezier(.2,.8,.2,1),height .6s cubic-bezier(.2,.8,.2,1);filter:drop-shadow(4px 8px 7px #716a5c22);max-width:220px}.composer-glass{height:100%;width:100%;position:relative;border:2px solid #ffffffaa;border-bottom:6px solid #d5d3cbbb;border-radius:8px 8px 24px 24px;overflow:hidden;background:linear-gradient(100deg,#ffffff66,#ffffff0d 28%,#f4f1e82b 80%,#ffffff70);box-shadow:inset 2px 0 5px #fff,inset -3px 0 5px #ada79944,0 0 0 1px #c4bfb566}.composer-glint{position:absolute;z-index:5;inset:0;border-radius:inherit;background:linear-gradient(98deg,#ffffff66 0,#fff0 15%,#fff0 69%,#ffffff3d 87%,#fff0 94%);pointer-events:none}.composer-rim{height:8px;position:absolute;left:-1px;right:-1px;top:-2px;border-radius:50%;border:2px solid #ffffffc7;box-shadow:0 -1px 1px #a29d9080;z-index:8}.composer-handle{position:absolute;top:23%;right:-35px;width:49px;height:53%;border:8px solid #e9e6df;border-left-width:5px;border-radius:40%;z-index:-1;box-shadow:inset 1px 0 2px #fff,2px 1px 2px #c5bfb588}.composer-cup[data-drink=latte] .composer-handle,.composer-cup[data-drink=latte-macchiato] .composer-handle{opacity:0}.composer-layer{position:absolute;left:0;right:0;transform-origin:center bottom}.composer-layer.coffee{background:linear-gradient(90deg,#4b2717,#6c3820 45%,#532b18);box-shadow:inset 0 3px 0 #b7854c}.composer-layer.water{background:linear-gradient(90deg,#8d694ba1,#b9916b9c,#8c694bc7);box-shadow:inset 0 1px 0 #d8b98c}.composer-layer.milk{background:linear-gradient(90deg,#e4d4b9,#efe4d0 50%,#ded0b5);box-shadow:inset 0 2px 0 #f2e9d9}.composer-layer.foam{background:linear-gradient(#fffcf5,#f6efdf);box-shadow:inset 0 2px 3px #fff,inset 0 -1px 1px #dbc9ae}.composer-saucer{position:absolute;width:75%;height:25px;bottom:22px;left:12.5%;background:radial-gradient(ellipse,#ece8df 15%,#faf9f5 50%,#d1ccc0 66%,#f6f4ee 69%,#e3dfd4 73%);border-radius:50%;z-index:1;box-shadow:0 5px 3px #9c948338}.composer-shadow{position:absolute;width:62%;height:22px;bottom:16px;left:20%;border-radius:50%;background:#85796538;filter:blur(10px);z-index:0}.composer-pour{position:absolute;width:4px;height:270px;left:50%;top:0;background:linear-gradient(90deg,#965e39,#b58c6399);transform-origin:top;z-index:4;opacity:0;pointer-events:none}.composer-stage figcaption{display:flex;gap:10px;justify-content:space-between;font:11px/1.5 var(--body-font);padding:12px 0;border-top:1px solid #c8c0b1;color:#5d5549}.composer-stage-controls{padding-top:10px;display:flex;gap:15px;align-items:center;justify-content:space-between;min-height:44px}.composer-stage-controls button{background:none;border:0;padding:8px 0;font:11px var(--body-font);cursor:pointer;text-decoration:underline;text-underline-offset:4px;color:inherit}.composer-stage-controls>span{font:10px/1.5 var(--body-font);color:#777063;max-width:120px;text-align:right}.composer-reading{padding:35px 28px;align-self:center;min-width:0}.composer-reading .eyebrow{font-size:9px;letter-spacing:.09em}.composer-reading h3{font:400 34px/1.08 var(--display-font);letter-spacing:-.03em;margin:16px 0}.composer-reading>p{font:13px/1.8 var(--body-font)}.composer-reading dl{margin:25px 0}.composer-reading dl>div{display:flex;justify-content:space-between;align-items:center;gap:10px;border-top:1px solid #d5d0c5;padding:12px 0}.composer-reading dt{font:12px var(--body-font);display:flex;align-items:center;gap:8px}.composer-reading dt i{width:8px;height:8px;border-radius:50%;display:inline-block;border:1px solid #8f817233}.composer-reading dt i.coffee{background:#63351f}.composer-reading dt i.water{background:#ae9072}.composer-reading dt i.milk{background:#dec7a6}.composer-reading dt i.foam{background:#fbf5e5}.composer-reading dd{font:400 24px var(--display-font);margin:0}.composer-reading dd small{font:10px var(--body-font);color:#695f51}.composer-reading .composer-mass{font-size:10px;border-left:2px solid #a68a64;padding-left:12px}.composer-reading .text-link{font-size:11px}.composer-footnote{display:grid;grid-template-columns:210px 1fr;gap:25px;padding:22px 28px;border-top:1px solid #d4d0c9;align-items:start}.composer-footnote>span{font:9px/1.7 var(--body-font);letter-spacing:.1em}.composer-footnote p{margin:0;font:11px/1.8 var(--body-font);max-width:800px}.home-page .coffee-composer{margin:70px max(24px,5vw)}
@media(max-width:1100px){.composer-workspace{grid-template-columns:185px 1fr}.composer-reading{grid-column:1/-1;border-top:1px solid #d4d0c9;display:grid;grid-template-columns:1fr 1fr;gap:0 30px;align-items:start;padding:26px}.composer-reading h3,.composer-reading>.eyebrow{grid-column:1}.composer-reading dl{grid-column:2;grid-row:1/5;margin:0}.composer-reading .text-link{grid-column:1}.composer-reading>p{margin:8px 0}.composer-heading{padding:30px}.composer-choices button{padding:15px 18px}.composer-footnote{grid-template-columns:150px 1fr}}
@media(max-width:650px){.home-page .coffee-composer{margin:40px 20px}.composer-heading{display:block;padding:26px 20px}.composer-heading>p{font-size:12px;margin-top:20px}.composer-heading h2{font-size:38px}.composer-workspace{display:flex;flex-direction:column}.composer-choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding:0;border-right:0;order:0}.composer-choices button{min-height:63px;padding:10px 8px;display:block;font-size:10px;border-right:1px solid #ddd8ce;border-bottom:1px solid #ddd8ce}.composer-choices button>span{display:block;margin-bottom:5px;font-size:8px}.composer-choices button>b{display:none}.composer-stage{order:1;padding:20px 18px}.composer-scene{height:345px}.composer-reading{display:block;order:2;padding:26px 22px}.composer-reading h3{font-size:32px}.composer-reading dl{margin:22px 0}.composer-footnote{display:block;padding:22px}.composer-footnote p{margin-top:12px;font-size:10px}.composer-stage figcaption{font-size:10px}.composer-stage-controls{min-height:40px}.composer-cup{max-width:200px}}
@media(prefers-reduced-motion:reduce){.composer-cup,.composer-choices button>b{transition:none!important}.composer-pour{display:none}.composer-stage-controls [data-composer-replay]{display:none}}
/* Distinct material streams meet the calculated liquid surface. */
.composer-pour{inset:0;width:100%;height:100%;background:none;transform:none;left:0;top:0;z-index:4}.composer-flow{--liquid:#63351e;--highlight:#d99a58;position:absolute;top:0;left:50%;width:7px;transform:translateX(-50%);opacity:0;background:linear-gradient(90deg,#1d0b05 0%,var(--liquid) 24%,var(--highlight) 45%,var(--liquid) 62%,#261107 100%);border-radius:40% 22% 35% 20%;box-shadow:1px 0 2px #47251435;clip-path:polygon(12% 0,84% 0,72% 18%,91% 38%,68% 55%,94% 79%,75% 100%,25% 100%,8% 83%,24% 64%,7% 43%,23% 19%);pointer-events:none}.composer-flow:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(178deg,transparent 0 17px,#ffdea244 18px,transparent 20px 44px);background-size:100% 88px;animation:composer-fluid-detail .3s linear infinite;mix-blend-mode:screen}.composer-flow.milk,.composer-flow.foam{width:14px;--liquid:#e9dfca;--highlight:#fffdf4;background:linear-gradient(90deg,#bcad92,var(--liquid) 20%,var(--highlight) 43%,#f2ead8 65%,#cabca2 100%);box-shadow:1px 0 2px #8c775122}.composer-flow.foam{width:17px;border-radius:30%;background:radial-gradient(circle at 40% 13%,#fff 0 2px,transparent 3px),linear-gradient(90deg,#e0d5be,#fffaf0 45%,#eadeca)}.composer-flow.water{width:10px;background:linear-gradient(90deg,#b5bec14d,#faffffbb 25%,#f5ffff44 55%,#89949366 83%,#ffffffbb);box-shadow:1px 0 1px #fafaff, -1px 0 1px #535e6433}.composer-layer.coffee:after{content:"";position:absolute;left:0;top:0;width:100%;height:5px;background:radial-gradient(ellipse at 20% 55%,#b8803e 0 2px,transparent 3px),linear-gradient(90deg,#8e562c,#c49153,#a5672d);opacity:.7}.composer-layer.milk{background:linear-gradient(90deg,#ded2bc,#fff8e8 42%,#f6efdf 70%,#d7c8ac)}.composer-layer.water{background:linear-gradient(90deg,#9977599c,#c5a17c66,#967458aa)}@keyframes composer-fluid-detail{to{background-position:0 88px}}@media(prefers-reduced-motion:reduce){.composer-flow,.composer-flow:before{animation:none!important}.composer-pour{display:none!important}}

/* Apply vessel dimensions before calculating the liquid surface. */
.composer-cup{transition:filter .25s ease}
.composer-flow.coffee{width:9px}.composer-flow.milk{width:15px}.composer-flow.water{width:11px}