:root{--ink:#674c46;--muted:#a18a80;--rose:#ab8b96;--pink:#e4c5cf;--cream:#fffaf2;--line:#ead9ce;--green:#799d88}*{box-sizing:border-box}body{margin:0;background:#f6eee3;color:var(--ink);font:14px/1.5 ui-rounded,'Trebuchet MS',Arial,sans-serif;background-image:radial-gradient(#decbb966 .8px,transparent .8px);background-size:14px 14px}[hidden]{display:none!important}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer;border:1px solid var(--line);background:#fffaf3;border-radius:12px;transition:background .15s,box-shadow .15s}button:hover{background:#ffeaf0}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #8cb2a0;outline-offset:3px}button:disabled{opacity:.45;cursor:default}header{max-width:1320px;margin:auto;padding:26px 36px 22px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #e5d4c5}.brand{display:flex;gap:12px;align-items:center;text-decoration:none;color:var(--ink);font-weight:800;font-size:32px;letter-spacing:-1.3px;line-height:1.15}.brand i{font-family:Georgia,serif;color:#c18582;font-weight:normal}.brand small{display:block;margin-top:8px;font-size:9px;font-weight:700;letter-spacing:2.1px;color:#a58775}.brand small b{display:inline-block;padding:3px 6px;border-radius:5px;background:#e8d0d8;font-size:8px;color:#a06371;letter-spacing:.3px}.brand-symbol{display:grid;place-items:center;background:#dbb7c3;border:4px solid #f0dce3;border-radius:50%;width:54px;height:54px;color:#fff8e8;font-size:37px}.stats{display:flex;align-items:center;gap:28px}.stats>div{display:flex;flex-direction:column;text-align:right}.stats span{font-size:10px;color:#9d8276}.stats strong{font-size:24px;line-height:1.3;color:#a56c75}.icon-button{font-size:10px;letter-spacing:.5px;padding:10px 12px;background:transparent}main{max-width:1320px;margin:auto;padding:28px 36px}.heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:23px}.eyebrow{font-size:9px;letter-spacing:1.8px;font-weight:700;color:#ab8477}h1{font-family:Georgia,serif;font-size:32px;line-height:1.2;margin:6px 0 7px;font-weight:normal;letter-spacing:-.8px}.heading p{margin:0;color:var(--muted);font-size:13px}.modes{display:flex;padding:4px;border:1px solid #e2cfc5;border-radius:14px;background:#efe2d6}.modes button{border:0;background:transparent;padding:10px 17px;font-size:11px}.modes .selected{background:#fffaf2;box-shadow:0 2px 5px #79523914;color:#ac697c;font-weight:bold}.layout{display:grid;grid-template-columns:260px minmax(0,1fr);gap:22px}.panel{background:var(--cream);border:1px solid #e2cfc3;border-radius:20px;box-shadow:0 8px 24px #8766470b}.ingredients{padding:22px;align-self:start}.section-title{display:flex;gap:10px;align-items:center;margin-bottom:16px}.number{width:29px;height:29px;display:grid;place-items:center;border-radius:50%;background:#f6e5df;color:#b88480;font-size:10px}h2{font-size:14px;margin:0}.section-title p{margin:2px 0 0;color:#a98e81;font-size:10px}.options{display:grid;grid-template-columns:1fr 1fr;gap:10px}.ingredient{padding:10px 4px 9px;display:flex;flex-direction:column;align-items:center;gap:3px;min-height:89px;font-size:11px;background:linear-gradient(#fffdf8,#f9eee5);box-shadow:0 3px 0 #e9d8cb;touch-action:none;user-select:none;-webkit-user-select:none}.ingredient-icon{font-size:30px;line-height:1.3;filter:drop-shadow(0 2px 1px #815b3a16)}.ingredient.active{border-color:#d59ba1;box-shadow:0 3px 0 #dcaeb2;background:#fff0ed}.ingredient.holding{background:#e8d0d8;box-shadow:inset 0 3px 5px #ab668020;border-color:#b08090}.rule{height:1px;background:#efded2;margin:24px 0}.mix-note{display:flex;gap:9px;background:#f4ede1;border-radius:12px;padding:12px 10px;margin-top:20px}.mix-note>span{color:#b59b66}.mix-note p{font-size:10px;line-height:1.7;margin:0;color:#9b8473}.help{margin-top:15px;font-size:10px;color:#a78b7a}.help summary{cursor:pointer}.help p{line-height:1.7}.stage{overflow:hidden;align-self:start}.stagebar{display:flex;align-items:center;justify-content:space-between;padding:13px 20px;background:#fff9ef;border-bottom:1px solid #ead9cc;font-size:9px;letter-spacing:1.5px;font-weight:bold}.stagebar>span{display:flex;align-items:center;gap:7px}.stagebar i{width:6px;height:6px;background:#91b09a;border-radius:50%;box-shadow:0 0 0 3px #e6eee0}.stagebar button{font-size:10px;padding:5px 9px;background:#f5e9dd;border:0;letter-spacing:0}.stagebar button[aria-pressed=true]{background:#e6b8c2}#sceneWrap{position:relative;aspect-ratio:1.48;min-height:330px;overflow:hidden;background:#f9e2cf}#world{width:100%;height:100%;display:block;outline:0;touch-action:pan-y}#world.exploring{cursor:grab;touch-action:none}.scene-caption{position:absolute;top:18px;left:20px;color:#b88f7b;font-size:9px;letter-spacing:1.2px;text-transform:uppercase;pointer-events:none}.seal-note{position:absolute;right:18px;bottom:14px;padding:5px 9px;background:#fff8e4d9;color:#a17d69;border-radius:8px;font-size:8px;letter-spacing:.8px;pointer-events:none}.bubble{position:absolute;top:31%;left:3%;width:26%;padding:8px 10px;background:#fffaf0ed;border:1px solid #e2c4b3;border-radius:13px;font-size:10px;text-align:center;box-shadow:0 4px 8px #a6795810;pointer-events:none;transform:translateY(-100%)}.bubble:after{content:'';position:absolute;bottom:-6px;left:45%;width:10px;height:10px;background:#fffaf0;transform:rotate(45deg);border-right:1px solid #e2c4b3;border-bottom:1px solid #e2c4b3}#loadState{position:absolute;inset:0;background:#f8e9dcef;display:grid;place-items:center;z-index:3;font-size:13px;color:#b07d83}#loadState.error{padding:30px;text-align:center;display:flex;align-items:center;justify-content:center}#fillhud{display:flex;align-items:center;gap:15px;padding:14px 20px;border-top:1px solid #ead3c5;border-bottom:1px solid #ecd9cc;background:#fff9ef}.hud-caption{font-size:8px;letter-spacing:1px;font-weight:bold;color:#a58a7a;line-height:1.8}.hud-caption span{display:block;font-size:7px;color:#b8a091}#hudvalue{font-size:28px;line-height:1;padding:9px 11px;min-width:123px;border-radius:10px;background:var(--fill-bg,#e4f0df);color:var(--fill-ink,#4f8668);font-variant-numeric:tabular-nums;letter-spacing:-1px}.hud-actions{margin-left:auto;display:flex;gap:6px}.hud-actions button{padding:11px 12px;font-size:10px}.pack,.next{background:#e1bfca;border:1px solid #c49ca9;box-shadow:0 3px 0 #c49ca9;color:#754b58;font-weight:bold;letter-spacing:.5px}.pack:hover,.next:hover{background:#ecd3db}#speed{touch-action:none;user-select:none}#speed.holding{background:#f0d19b}.controls{padding:15px 20px 12px}.container-row{display:flex;align-items:center;justify-content:space-between;gap:10px}.container-options{display:flex;gap:6px;margin-top:6px}.container-options button{padding:7px 15px;border-radius:9px;font-size:11px}.container-options .selected{background:#eddce2;border-color:#cfa7b4;color:#a5687b}#containerhint{max-width:190px;text-align:right;font-size:9px;color:#b09785}.readout{display:none}.meter{height:6px;background:#f0e3d8;border-radius:6px;position:relative;margin-top:18px}.meter i{display:block;width:0;height:100%;border-radius:6px;transition:background .2s}.meter:after{content:'';position:absolute;left:var(--target,90.9%);top:-3px;height:12px;border-left:2px solid #8caa86}.actions{display:none}.status{text-align:center;font-size:10px;color:#a38677;margin:12px 0 5px;min-height:15px}.reset{display:block;margin:auto;font-size:9px;color:#b19a87;background:none;border:0;text-decoration:underline;padding:3px 10px}.shelf{margin-top:25px;padding:18px 0;border-top:1px dashed #dcc5b3;display:flex;align-items:center;gap:20px}.shelf>.eyebrow{white-space:nowrap}#history{display:flex;gap:8px;flex-wrap:wrap}.mini{display:block;background:#fff8ee;border:1px solid #e6d4c6;border-radius:9px;font-size:9px;padding:7px 10px}.mini b{color:#b27686;margin-left:5px}.sub{font-size:10px;color:#b39885}footer{display:flex;justify-content:space-between;padding:10px 0 14px;font-size:9px;color:#b09988}dialog{width:min(420px,calc(100% - 28px));padding:0;border:1px solid #d9b8a6;background:#fff9ef;border-radius:20px;box-shadow:0 20px 90px #5f3a4055;color:var(--ink);max-height:calc(100dvh - 36px);overflow:auto}dialog::backdrop{background:#4c393666;backdrop-filter:blur(4px)}.receipt-heading{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;background:#e9d3da;color:#a26974;font-size:9px;letter-spacing:1.3px}.receipt-heading button{border:0;background:transparent;padding:5px 8px}#receiptTitle{font:25px Georgia,serif;text-align:center;padding-top:20px}#receiptContent{padding:16px 25px}#receiptContent>.label,#receiptContent>.recipe,#receiptContent .results>.rule,#receiptContent .next,#receiptContent .note{display:none}#receiptContent h2{text-align:center;font-size:12px;color:#a68576;margin-bottom:20px}.receiptline{display:flex;justify-content:space-between;gap:14px;margin:10px 0;font-size:11px}.score{font-size:58px;color:#bd7c90;text-align:center;line-height:1.2}.grade{font-size:10px;text-align:center;margin-top:4px}.penalty{color:#bc5268;background:#ffe5e6;padding:6px;border-radius:7px;font-size:9px}[data-receipt-field=packageLabel]{font-size:9px;padding:12px;border:1px dashed #dcbfa8;border-radius:8px;margin:15px 0;background:#fff2dc}[data-receipt-field=packageLabel]>strong{display:block;font-size:13px;margin:5px 0}.stamp{display:inline-block;margin-top:8px;color:#6c9b7b}.barcode{height:14px;background:repeating-linear-gradient(90deg,#745b4f 0 2px,transparent 2px 4px,#745b4f 4px 5px,transparent 5px 8px);margin:8px 0 3px}#receiptNext{display:block;width:100%;border:0;border-radius:0;padding:16px;position:sticky;bottom:0}
@media(min-width:1500px){main,header{max-width:1400px}.layout{grid-template-columns:275px minmax(0,1fr)}}@media(max-width:950px){header{padding:20px}.stats{gap:14px}main{padding:22px 20px}.layout{grid-template-columns:205px minmax(0,1fr);gap:14px}.ingredients{padding:16px}.ingredient{min-height:76px;font-size:10px}.ingredient-icon{font-size:25px}.section-title{gap:8px}.section-title h2{font-size:12px}#fillhud{gap:8px;padding:12px}.hud-caption{font-size:7px}#hudvalue{font-size:24px;min-width:106px;padding:9px}.hud-actions{gap:4px}.hud-actions button{padding:10px 8px;font-size:8px}#sceneWrap{min-height:330px;aspect-ratio:1.3}.bubble{font-size:9px}.modes button{padding:9px 12px;font-size:10px}}@media(max-width:680px){header{padding:16px 16px 13px}.brand{font-size:24px;gap:8px}.brand-symbol{width:40px;height:40px;font-size:28px;border-width:3px}.brand small{font-size:6px;letter-spacing:1.3px;margin-top:5px}.brand small b{font-size:6px}.stats{gap:12px}.stats span{font-size:8px}.stats strong{font-size:19px}.icon-button{font-size:0;padding:7px}.icon-button:after{content:'♫';font-size:15px}.icon-button[aria-pressed=true]{background:#e3eecb}main{padding:19px 12px 8px}.heading{margin-bottom:16px;gap:8px}.heading .eyebrow{font-size:7px;letter-spacing:1px}h1{font-size:24px;margin:5px 0}.heading p{font-size:11px}.modes{flex-direction:column;padding:3px;border-radius:11px}.modes button{font-size:9px;padding:7px 9px;white-space:nowrap;border-radius:8px}.layout{display:flex;flex-direction:column;gap:14px}.stage{order:0;width:100%;border-radius:17px}.ingredients{order:1;padding:15px;width:100%;display:grid;grid-template-columns:1fr 1fr;column-gap:14px}.ingredients>.section-title:nth-of-type(1){grid-column:1}.ingredients>#bases{grid-column:1;grid-row:2}.ingredients>.rule{display:none}.ingredients>.section-title:nth-of-type(4){grid-column:2;grid-row:1}.ingredients>#mixes{grid-column:2;grid-row:2}.section-title{margin-bottom:12px;gap:6px}.number{width:22px;height:22px;font-size:8px}.section-title h2{font-size:11px}.section-title p{font-size:8px}.options{gap:7px}.ingredient{min-height:65px;padding:7px 2px;gap:0;font-size:9px}.ingredient-icon{font-size:23px}.mix-note{grid-column:1/-1;margin-top:15px;padding:8px 10px}.mix-note p{font-size:9px}.help{grid-column:1/-1;margin-top:10px}#sceneWrap{aspect-ratio:1.18;min-height:290px}.scene-caption{font-size:7px;left:13px;top:12px}.stagebar{padding:10px 13px;font-size:8px;letter-spacing:1px}.stagebar button{font-size:9px}.bubble{font-size:8px;padding:6px;top:31%;left:1%;width:27%}.seal-note{font-size:6px;right:10px;bottom:9px}#fillhud{padding:11px 12px;gap:10px}.hud-caption{font-size:7px}.hud-caption span{font-size:6px}#hudvalue{font-size:26px;min-width:110px}.hud-actions{display:grid;grid-template-columns:auto auto;gap:4px}.hud-actions #hudpack{grid-column:1/-1}.hud-actions button{padding:6px 8px;font-size:8px}#speed{font-size:7px}.controls{padding:11px 14px 10px}.container-row .eyebrow{font-size:7px}.container-options button{font-size:10px;padding:6px 12px}#containerhint{font-size:8px;width:105px}.meter{margin-top:13px}.status{font-size:9px}.reset{font-size:8px}.shelf{margin-top:18px;padding:13px 0;display:block}.shelf>.eyebrow{font-size:8px}#history{margin-top:10px;gap:5px}.mini{font-size:8px;padding:5px 7px}footer{font-size:8px;gap:12px}footer span:last-child{display:none}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}} 

.brand-symbol img{width:83%;height:83%;object-fit:contain}
/* Café orders */
[hidden]{display:none!important}
.mode-controls{display:flex;flex-direction:column;align-items:flex-end;gap:8px}.difficulty{display:flex;gap:5px}.difficulty button{font-size:10px;padding:6px 10px;background:transparent}.difficulty .selected{background:#ecd7de}
.order-card{padding:17px 20px 16px;background:linear-gradient(110deg,#fff9f0,#f5eceb);border-bottom:1px solid #e5d4c7}.customer-heading{display:flex;align-items:center;gap:10px}.customer-avatar{width:42px;height:42px;background:#eddfe4;border-radius:50%;display:grid;place-items:center;font-size:26px;border:1px solid #d9bfc8}.customer-heading .eyebrow{font-size:7px;letter-spacing:1.25px}.customer-heading h2{font:20px Georgia,serif;margin:2px 0}.customer-heading p{font-size:10px;margin:3px 0;color:#a07d70}.order-score{margin-left:auto;display:flex;flex-direction:column;gap:5px;text-align:right;font-size:7px;letter-spacing:1px;white-space:nowrap}.order-score strong{font-size:11px;letter-spacing:0;color:#87636f;margin-left:6px;font-variant-numeric:tabular-nums}.order-recipe{display:flex;gap:18px;margin-top:13px;align-items:center}.diagram-wrap{flex:0 0 48px;align-self:stretch;display:flex;flex-direction:column;align-items:center}#orderDiagram{height:94px;width:44px;border:2px solid #ae8c7b;border-top:0;border-radius:0 0 12px 12px;overflow:hidden;display:flex;flex-direction:column-reverse;box-shadow:3px 3px 0 #e1cfc3}#orderDiagram>div{width:100%;display:flex;align-items:center;justify-content:center;min-height:0}#orderDiagram span{background:#fff9eaee;border-radius:50%;color:#715748;width:11px;height:11px;line-height:11px;text-align:center;font-size:7px;font-weight:bold}.diagram-wrap small{font-size:7px;color:#aa8c7c;margin-top:7px;white-space:nowrap}.recipe-copy{flex:1;min-width:0}.recipe-copy h3{font-size:9px;letter-spacing:.4px;font-weight:normal;color:#9b7b6e;margin:0 0 8px}#orderSteps{list-style:none;margin:0;padding:0;display:flex;gap:6px;flex-wrap:wrap}#orderSteps li{display:flex;align-items:center;gap:6px;flex:1 1 110px;min-width:106px;padding:7px 8px;background:#fffaf3;border:1px solid #e4d6ce;border-radius:9px;font-size:10px;position:relative;box-shadow:inset 0 3px var(--ingredient)}#orderSteps li>b{width:19px;height:19px;border-radius:50%;background:#f2e7df;display:grid;place-items:center;font-size:8px;color:#aa8174;flex-shrink:0}#orderSteps li>span{font-size:9px;line-height:1.3}#orderSteps small{display:block;font-size:7px;color:#aa8c7c;margin-top:2px}#orderSteps strong{margin-left:auto;font-size:12px;font-variant-numeric:tabular-nums}#orderSteps .current{border-color:#9fbd99;background:#f4faef;box-shadow:inset 0 3px var(--ingredient),0 0 0 1px #b7c9aa}#orderSteps .current>b{background:#d8e8cc;color:#58774e}#orderSteps .passed{opacity:.65}
#sceneWrap{aspect-ratio:1.48;min-height:380px}.scene-fill{position:absolute;bottom:18px;left:18px;display:flex;flex-direction:column;align-items:flex-start;min-width:180px;padding:13px 16px 12px;border:1px solid #e2c9b8;border-radius:16px;background:#fffaf1f5;box-shadow:0 6px 22px #7b5a3b15;pointer-events:none;color:#9e806d;z-index:1}.fill-kicker{font-size:8px;letter-spacing:1.6px;font-weight:bold}.scene-fill>strong{color:var(--fill-ink,#43845b);font-size:clamp(35px,4.2vw,54px);font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-2px;line-height:1.15;margin:3px 0}.scene-fill>#sceneOverflow{font-size:8px;font-weight:bold;letter-spacing:.7px}.scene-fill>#stepHint{font-size:9px;color:#886c5e;border-top:1px solid #eadcd0;margin-top:8px;padding-top:7px;max-width:230px}.scene-fill.overflowing{background:#fff0f0f5;border-color:#dc8899}.scene-fill.overflowing #sceneOverflow{color:#ba3156}.seal-note{right:15px;bottom:14px}.bubble{top:31%;left:2%;width:24%}#mixes .ingredient:last-child{grid-column:1/-1;min-height:54px;flex-direction:row;justify-content:center;gap:10px;background:linear-gradient(#faffff,#e7f3f5)}#mixes .ingredient:last-child.holding{background:#cbe8ef}#fillhud{padding:12px 20px}.hud-actions{gap:8px}.hud-actions button{padding:12px 18px;font-size:11px}#hudpack{min-width:160px}.hud-caption{font-size:8px}#receiptContent .receiptline strong{white-space:nowrap}
@media(max-width:950px){.order-card{padding:13px}.customer-heading h2{font-size:17px}.customer-heading p{max-width:230px;font-size:9px}.order-recipe{gap:10px}#orderSteps li{flex-basis:94px;min-width:92px;padding:6px}.scene-fill{left:12px;bottom:12px;padding:10px 12px;min-width:145px}.scene-fill>strong{font-size:38px}.scene-fill>#stepHint{font-size:8px}.hud-actions button{padding:10px;font-size:9px}#hudpack{min-width:130px}.diagram-wrap{flex-basis:40px}#orderDiagram{width:38px;height:110px}}
@media(max-width:680px){.mode-controls{align-items:flex-end}.modes{flex-direction:row}.modes button{font-size:8px;padding:8px}.heading{align-items:flex-start;flex-direction:column;gap:12px}.mode-controls{width:100%;align-items:stretch}.modes button{flex:1;font-size:11px;padding:10px}.difficulty{justify-content:center}.order-card{padding:12px}.customer-heading{gap:8px}.customer-avatar{width:34px;height:34px;font-size:23px}.customer-heading h2{font-size:18px}.customer-heading p{font-size:9px;max-width:210px}.order-score{font-size:6px}.order-score strong{font-size:9px}.order-recipe{margin-top:10px;gap:12px}#orderSteps{gap:5px}#orderSteps li{min-width:103px;flex:1 1 103px;padding:6px 7px}#orderSteps li>span{font-size:8px}#orderSteps strong{font-size:11px}#orderSteps li>b{width:16px;height:16px;font-size:7px}.recipe-copy h3{font-size:8px;margin-bottom:6px}#orderDiagram{height:110px;width:37px}.diagram-wrap small{font-size:6px}#sceneWrap{aspect-ratio:1.2;min-height:315px}.scene-fill{bottom:10px;left:10px;min-width:143px;padding:9px 12px;border-radius:12px}.scene-fill>strong{font-size:36px;letter-spacing:-1.5px}.fill-kicker{font-size:7px}.scene-fill>#sceneOverflow{font-size:7px}.scene-fill>#stepHint{font-size:7px;max-width:180px;margin-top:6px;padding-top:6px}.scene-caption{font-size:6px}.bubble{font-size:7px;width:25%;left:1%;top:31%}.seal-note{max-width:135px;text-align:right;font-size:6px;bottom:10px}.hud-actions{display:flex;gap:5px}.hud-actions button{padding:9px;font-size:8px}#hudpack{min-width:116px}.hud-caption{font-size:7px}.hud-caption span{font-size:6px}#fillhud{padding:10px 13px}.ingredients{column-gap:12px}.ingredients>.section-title:nth-of-type(4){grid-column:2;grid-row:1}#mixes .ingredient:last-child{min-height:42px;padding:4px}.options{align-content:start}.ingredient{min-height:67px}.section-title p{font-size:7px}.shelf{margin-top:15px}}
/* Keep the pour controls reachable while the 3D fill stays on screen on phones. */
@media(max-width:680px){
 main{padding-bottom:150px}.ingredients{position:fixed;left:0;right:0;bottom:0;z-index:8;width:100%;padding:8px 10px calc(8px + env(safe-area-inset-bottom));border-radius:16px 16px 0 0;background:#fff9f1f7;box-shadow:0 -5px 25px #6f4e3820;display:grid;grid-template-columns:1fr;gap:6px;backdrop-filter:blur(12px)}
 .ingredients>.section-title,.ingredients>.mix-note,.ingredients>.help{display:none}.ingredients>#bases{grid-column:1;grid-row:1;grid-template-columns:repeat(4,1fr)}.ingredients>#mixes{grid-column:1;grid-row:2;grid-template-columns:repeat(5,1fr)}
 .ingredients .ingredient{min-height:43px;padding:5px 2px;flex-direction:row;justify-content:center;gap:4px;font-size:8px;border-radius:9px;box-shadow:0 2px 0 #e9d8cb}.ingredients .ingredient-icon{font-size:18px}#mixes .ingredient:last-child{grid-column:auto;min-height:43px;gap:4px;padding:5px 2px}
 .ingredients .options{gap:5px}.heading{gap:9px}.heading .eyebrow{display:none}.heading h1{font-size:23px}.heading p{font-size:10px}.customer-heading p{font-size:8px}.order-recipe{margin-top:8px}.order-card{padding:10px 12px}
}
@media(max-width:370px){.ingredients .ingredient{flex-direction:column;gap:0;font-size:7px}.ingredients .ingredient-icon{font-size:15px}#mixes .ingredient:last-child{flex-direction:column;gap:0}.customer-heading p{max-width:165px}}
.customer-bubble{left:auto;right:2%;top:39%;width:23%;background:#fff0f4ed;border-color:#dfc5d0}.customer-bubble:after{background:#fff0f4;border-color:#dfc5d0}
@media(max-width:680px){.customer-bubble{left:auto;right:1%;top:39%;width:25%}}
/* Explicit ingredient types distinguish strawberry milk from strawberry pieces. */
.ingredient-name{display:block;line-height:1.2}.ingredient-name small{display:block;font-size:9px;font-weight:700;line-height:1.25;margin-top:2px;opacity:.85}
@media(max-width:680px){
 main{padding-bottom:calc(205px + env(safe-area-inset-bottom))}
 .ingredients{background:#ecd7de;border:1px solid #c49ba9;border-top:2px solid #b88a99;box-shadow:0 -6px 22px #75505c33;gap:5px;padding-top:7px}
 .ingredients>.section-title{display:flex;grid-column:1;gap:0;margin:0;padding:0 3px;min-height:12px}
 .ingredients>.section-title:first-child{grid-row:1;color:#713d52}
 .ingredients>.section-title:nth-of-type(4){grid-column:1;grid-row:3;color:#315a48}
 .ingredients>.section-title .number,.ingredients>.section-title p{display:none}
 .ingredients>.section-title h2{font-size:9px;line-height:1.2;font-weight:800;letter-spacing:1px;text-transform:uppercase}
 .ingredients>#bases{grid-row:2}.ingredients>#mixes{grid-row:4}
 .ingredients .ingredient,#mixes .ingredient:last-child{flex-direction:column;min-height:57px;gap:2px;padding:5px 2px;font-size:9px;font-weight:700;border-width:1px}
 .ingredients .ingredient-icon{font-size:18px;line-height:1.1}
 .ingredients .ingredient-name small{font-size:8px;margin-top:1px;line-height:1.1;opacity:1}
 .ingredients #bases .ingredient{background:#f1bacb;border-color:#b97790;color:#61364a;box-shadow:0 3px 0 #bc8199}
 .ingredients #mixes .ingredient{background:#b9d9c3;border-color:#79a68c;color:#284f3c;box-shadow:0 3px 0 #80a68f}
 .ingredients #mixes .ingredient:last-child{background:#b8dce9;border-color:#78a8bc;color:#28566b;box-shadow:0 3px 0 #7fa9bc}
 .ingredients #bases .ingredient.active,.ingredients #mixes .ingredient.active{outline:2px solid #8d5568;outline-offset:1px;border-color:#8d5568}
 .ingredients #bases .ingredient.holding,.ingredients #mixes .ingredient.holding{background:#8c5467;color:#fffaf3;border-color:#663847;box-shadow:inset 0 3px 0 #643545;outline:2px solid #fff6e8;outline-offset:-4px}
 .ingredients .ingredient:focus-visible{outline:3px solid #643545;outline-offset:1px}
}

.fill-signal{display:flex;align-items:center;gap:6px;margin-top:7px;font-size:8px;font-weight:bold;letter-spacing:.35px;color:var(--fill-ink)}.fill-signal i{width:12px;height:12px;border-radius:50%;background:#c6b9a8;flex:none;border:1px solid #0002}.scene-fill[data-fill-stage=yellow] .fill-signal i{background:#ffd234;box-shadow:0 0 9px #edb800;animation:fill-light-pulse .67s ease-in-out infinite}.scene-fill[data-fill-stage=green] .fill-signal i{background:#43dc76;box-shadow:0 0 9px #24b656}.scene-fill[data-fill-stage=red] .fill-signal i{background:#ff3557;box-shadow:0 0 9px #ff3557}.scene-fill[data-fill-stage=yellow]{border-color:#d8ac36}.scene-fill[data-fill-stage=green]{border-color:#50b774}@keyframes fill-light-pulse{50%{opacity:.32;box-shadow:none}}@media(prefers-reduced-motion:reduce){.scene-fill[data-fill-stage=yellow] .fill-signal i{animation:none}}

/* Live ingredient measures: each bar reaches full at that step's requested amount. */
#orderSteps li{flex-wrap:wrap;row-gap:7px;padding-bottom:9px;opacity:1}#orderSteps li>span{flex:1;min-width:0}#orderSteps li>strong{flex:none}#orderSteps .step-progress{flex:0 0 100%;min-width:0}.step-track{height:8px;border-radius:6px;background:#e2d9cd;box-shadow:inset 0 1px 2px #58443518;overflow:hidden;border:1px solid #cfc1b3}.step-track i{display:block;width:var(--step-fill,0%);height:100%;border-radius:4px;background:var(--ingredient);box-shadow:inset 0 -1px #0002;transition:width 80ms linear}#orderSteps .step-amount{display:block;margin-top:4px;font-size:9px;line-height:1.3;color:#745d50;font-variant-numeric:tabular-nums}#orderSteps .step-complete .step-amount{color:#3f7953;font-weight:bold}#orderSteps .step-complete .step-track{border-color:#7b9b79}#orderSteps .step-over .step-amount{color:#b24358}#orderSteps .step-over .step-track{border-color:#c46777}@media(prefers-reduced-motion:reduce){.step-track i{transition:none}}@media(max-width:680px){#orderSteps li{padding-bottom:8px;row-gap:6px}#orderSteps .step-amount{font-size:8px}.step-track{height:9px}}