:root{font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;color:#463629;background:#f5f0e7;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button{font:inherit;cursor:pointer;border:0;color:inherit}button:disabled{opacity:.45;cursor:default}button:focus-visible{outline:2px solid #53753f;outline-offset:3px}.app{max-width:520px;margin:auto;background:#fffdf8;min-height:100vh;padding:20px 18px 108px}header{display:flex;align-items:center;justify-content:space-between;padding:4px 2px 17px}header small{font-size:9px;letter-spacing:3px;color:#9c8369}h1{font-size:23px;letter-spacing:2px;margin:5px 0 0;font-weight:650}.text-btn{background:transparent;font-size:12px;color:#8f7c69;padding:10px}.stage{position:relative;height:365px;overflow:hidden;border-radius:28px;background:#fff7e9}.stage canvas{display:block;width:100%;height:100%;transform-origin:80% 100%;transition:none}.stage canvas.flying{transform:translate(10%,60%) scale(.06);opacity:0;transition:transform .65s cubic-bezier(.5,.05,.8,.5),opacity .6s}.scene-status{position:absolute;top:17px;left:19px;z-index:2;font-size:11px;color:#92816c;pointer-events:none}.selected{position:absolute;left:13px;bottom:35px;right:13px;display:flex;justify-content:center;flex-wrap:wrap;gap:4px;pointer-events:none}.selected span{font-size:10px;background:#ffffffad;border:1px solid #e7ddcb;border-radius:20px;padding:4px 8px}.stage-note{position:absolute;bottom:13px;left:0;right:0;text-align:center;font-size:10px;letter-spacing:2px;color:#a89379}.controls{padding:20px 0 0}.eyebrow{color:#91ac74;font-size:10px;letter-spacing:2px;margin-bottom:6px}h2{font-size:19px;margin:0 0 7px}p.hint{font-size:12px;line-height:1.7;color:#9a8e7e;margin:0 0 16px}.choices{display:flex;flex-wrap:wrap;gap:8px}.choice{border-radius:14px;background:#f5f3eb;padding:12px 14px;border:1px solid transparent;font-size:13px;min-height:43px}.choice.on{background:#edf3e3;border-color:#8caf68;color:#52773c}.tabs{display:flex;gap:4px;overflow:auto;padding-bottom:13px;scrollbar-width:none}.tab{white-space:nowrap;padding:8px 12px;background:none;border-radius:18px;font-size:13px;color:#9d9284}.tab.on{background:#e8eedc;color:#536d3c}.tab small{margin-left:3px;font-size:9px}.materials{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.material{display:flex;align-items:center;flex-direction:column;gap:7px;border:1px solid #eee8dc;background:#fff;border-radius:17px;padding:13px 5px;font-size:12px;min-height:111px}.material small{font-size:9px;color:#a09586;min-height:12px}.swatch{width:41px;height:41px;border-radius:50%;box-shadow:inset 3px 4px 5px #fff9,inset -3px -4px 8px #563d252a,0 3px 8px #4f351415}.material img{width:47px;height:47px;object-fit:contain}.material.on{border-color:#8cb56b;background:#f3f7ec}.next{margin-top:16px;width:100%;border-radius:24px;padding:14px;background:#8eb66e;color:white;font-weight:600;font-size:14px}.empty{font-size:12px;line-height:1.8;color:#9b8d7c;padding:15px;background:#f7f4ed;border-radius:14px}.section-title{font-size:13px;margin:18px 0 10px;font-weight:600}.included{font-size:11px;color:#7b9560;background:#f0f5e8;padding:10px;border-radius:10px;margin-top:14px}footer{position:fixed;bottom:max(13px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);width:calc(100% - 26px);max-width:486px;display:flex;align-items:center;gap:14px;border-radius:36px;background:#fff0db;padding:10px 12px;box-shadow:0 9px 27px #59432321;z-index:5}footer .cart{background:transparent;white-space:nowrap;font-size:12px}.cart-icon{font-size:25px}.cart b{border-radius:50%;background:#f69472;color:white;padding:3px 6px;font-size:10px}footer>div{display:flex;flex:1;flex-direction:column;gap:3px}footer small{font-size:9px;color:#a18c76}footer strong{font-size:16px}.checkout{background:#8eb66e;color:#fff;border-radius:27px;padding:13px 25px}.scrim{position:fixed;inset:0;background:#211a1466;z-index:10;display:flex;align-items:flex-end;justify-content:center}.sheet{width:100%;max-width:520px;border-radius:25px 25px 0 0;background:#fffdf8;padding:23px 22px max(25px,env(safe-area-inset-bottom));max-height:80vh;overflow:auto}.sheet-head{display:flex;justify-content:space-between;align-items:center}.sheet-head button{background:#f1ede5;border-radius:50%;width:31px;height:31px}.cart-row{padding:20px 0;border-bottom:1px solid #eee7dc;display:flex;gap:12px;align-items:center}.cart-row .info{flex:1}.cart-row h3{font-size:14px;margin:0 0 7px}.cart-row p{font-size:10px;color:#a19688;line-height:1.8;margin:0 0 8px}.qty{display:flex;align-items:center;gap:9px;font-size:12px}.qty button{border-radius:50%;width:25px;height:25px;background:#f1eee7}.review-note{background:#faf2e6;padding:16px;border-radius:12px;font-size:12px;line-height:1.8;color:#957852}#toast{position:fixed;left:50%;top:40%;transform:translateX(-50%);background:#413a31dd;color:white;border-radius:12px;padding:14px;display:none;z-index:20;width:max-content;max-width:85%;font-size:13px}@media(min-width:750px){.app{margin:28px auto;border-radius:30px;box-shadow:0 20px 60px #4b331018}.stage{height:410px}footer{bottom:20px}}@media(max-width:350px){.app{padding-left:12px;padding-right:12px}.stage{height:320px}h1{font-size:20px}.material{font-size:11px}footer{gap:7px}.checkout{padding:12px 19px}}

.cart-icon{width:27px;height:27px;vertical-align:middle;margin-right:3px}.stage.flying-stage{overflow:visible}.stage canvas.flying{position:relative;z-index:8;transform-origin:center;transform:translate(var(--fly-x),var(--fly-y)) scale(.06)}

/* The cup stays put; only the lower selection panel scrolls. */
html,body{height:100%;overflow:hidden}.app{height:100dvh;min-height:0;padding:12px 16px 0;display:flex;flex-direction:column;overflow:hidden}header{flex:none;padding-bottom:12px}.stage{flex:none;height:clamp(245px,44dvh,390px)}.panel-scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;padding:0 0 calc(95px + env(safe-area-inset-bottom))}.controls{padding-top:17px}.stage-note{font-size:9px}.selected{bottom:32px}footer{max-width:486px}.scrim{overscroll-behavior:contain}@media(min-width:750px){.app{height:calc(100dvh - 36px);margin:18px auto}.stage{height:clamp(250px,43dvh,390px)}}@media(max-height:700px){header{padding-top:0;padding-bottom:8px}h1{font-size:20px}.stage{height:39dvh;min-height:210px}.panel-scroll{padding-bottom:84px}}

.swatch{position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.65);box-shadow:inset 0 -3px 6px rgba(59,32,12,.20),inset 2px 2px 5px rgba(255,255,255,.46),0 3px 6px rgba(93,64,28,.15)}.swatch::before{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(ellipse at 29% 21%,rgba(255,255,255,.96) 0%,rgba(255,255,255,.63) 8%,rgba(255,255,255,.1) 27%,transparent 47%),radial-gradient(ellipse at 68% 81%,rgba(255,255,255,.30),transparent 39%)}.swatch::after{content:"";position:absolute;left:18%;top:12%;width:49%;height:23%;border-radius:50%;transform:rotate(-26deg);background:linear-gradient(180deg,rgba(255,255,255,.78),rgba(255,255,255,0));}

.fruit-icons{position:relative;display:block;width:58px;height:47px}.fruit-icons img{width:54px;height:47px}.fruit-icons.fruit-mix img{position:absolute;width:36px;height:36px;top:4px;left:-2px;transform:rotate(-16deg)}.fruit-icons.fruit-mix img:nth-child(2){left:15px;top:0;transform:rotate(8deg)}.fruit-icons.fruit-mix img:nth-child(3){left:26px;top:13px;transform:rotate(27deg)}

/* Bordered category chips: native horizontal touch scrolling, mouse drag on desktop. */
.tabs{gap:8px;overflow-x:auto;overflow-y:hidden;touch-action:pan-x;overscroll-behavior-x:contain;padding:2px 1px 12px;cursor:grab}.tabs.dragging{cursor:grabbing;user-select:none}.tab{flex:0 0 auto;border:1px solid #dfd6c7;border-radius:18px;background:#fffdf8;padding:8px 14px}.tab.on{border-color:#8caf68;background:#e8eedc}.materials,.empty{touch-action:pan-y}.cup-label{position:absolute;right:16px;top:38px;font-size:10px;color:#9b8266;pointer-events:none}

/* Keep the ingredient receipt beside, rather than across, the drink. */
.selected{left:auto;right:10px;top:78px;bottom:35px;width:76px;display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;flex-wrap:nowrap;gap:6px;overflow-y:auto;pointer-events:auto;scrollbar-width:none}.selected span{text-align:center;font-size:9px;padding:5px 5px;line-height:1.4;flex-shrink:0;background:#fffdf5d9}.sheet-head h2{margin:0}.sheet-head .clear-cart{margin:0 auto 0 14px;width:auto;height:auto;border-radius:0;background:transparent;font-size:12px;color:#9b8266;padding:5px}.sheet-head .clear-cart:disabled{opacity:.35}@media(max-width:350px){.selected{right:7px;width:64px}.selected span{font-size:8px}}

.undo-cup{position:absolute;right:10px;bottom:10px;z-index:2;padding:7px 10px;border:1px solid #a9bc8e;border-radius:18px;background:#f2f6e9;color:#617c42;font-size:11px}.undo-cup:disabled{opacity:.4}.stage-note{right:110px}.tab.available{color:#647e43;background:#f0f5e5;border-color:#b7c997}.tab.unavailable{color:#b5ab9c;background:#f7f4ee}.tab.on{background:#dfeacb;color:#405e27;border-color:#7b9e52;font-weight:600}

/* Stable preview size with a persistent finish action. */
.stage{height:var(--stage-height);min-height:0;max-height:none}.stage canvas{position:absolute;top:0;left:0;width:100%;height:100%}
.app{--stage-height:clamp(210px,36dvh,310px);padding-bottom:88px}.stage canvas.flying{transform-origin:center;transition:transform .65s cubic-bezier(.5,.05,.8,.5),opacity .6s}.panel-scroll{padding-bottom:10px}.finish-bar{flex:none;padding-top:10px;background:#fffdf8;box-shadow:0 -10px 16px #fffdf8;z-index:3}.finish-bar[hidden]{display:none}.finish-bar .next{margin:0}.customizing .controls{padding-top:12px}.adjust-drink{display:inline-block;border:1px solid #a6b38e;border-radius:24px;padding:9px 14px;color:#657b48;background:#f8faef;font-size:12px;margin:5px 0 12px}.customizing .material{min-height:86px;padding:8px 5px;gap:4px}.customizing .material img{width:36px;height:36px}.customizing .section-title{margin:14px 0 8px}.customizing .choice{padding:9px 12px;min-height:36px}.customizing .included{margin-top:10px;padding:8px}.naming{align-items:center;padding:18px}.naming .sheet{border-radius:24px}.naming input{box-sizing:border-box;width:100%;font:inherit;border:1px solid #d9cbb3;border-radius:12px;padding:14px}.naming .adjust-drink{display:block;margin:16px auto 0}@media(prefers-reduced-motion:reduce){.stage,.stage canvas,.customizing .controls{transition:none;animation:none}}
/* Public service showcase: desktop split layout and compact mobile workbench. */
:root{background:#f3f0e7;color:#354333}body{background:radial-gradient(ellipse at 18% 25%,#e2e9cd 0,transparent 55%),#f3f0e7}a{color:#48613b;text-underline-offset:4px}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #48613b;outline-offset:3px}.site-nav{height:70px;max-width:1240px;margin:auto;padding:0 32px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #dadfcd;gap:14px;font-size:14px}.site-nav a{text-decoration:none}.brand{font-weight:700;font-size:21px}.brand span{font-size:12px;font-weight:400;border-left:1px solid #a4b294;margin-left:14px;padding-left:14px}.experience-layout{max-width:1200px;margin:24px auto;display:grid;grid-template-columns:1fr 520px;gap:64px;padding:0 32px;align-items:start}.intro{padding:60px 0 20px}.intro h1{font-size:clamp(32px,3.7vw,49px);line-height:1.35;letter-spacing:-1px;margin:18px 0 24px}.intro>p{font-size:16px;color:#6f7864;line-height:1.9}.intro-steps{display:flex;flex-wrap:wrap;gap:18px;font-size:12px;padding:20px 0;color:#6e7b60}.intro-card{border:1px solid #becbaa;border-radius:22px;padding:22px;background:#ffffff65;margin:12px 0 28px}.intro-card strong{font-size:19px}.intro-card p{font-size:14px;line-height:1.9;color:#6a765e}.intro-card a{font-size:14px;font-weight:600}.demo-contact{display:flex;align-items:center;gap:18px;font-size:14px;line-height:1.9}.demo-contact img{border:8px solid white;border-radius:12px}.demo-contact small{display:block;font-size:12px;color:#768168;max-width:185px}.app{position:relative;display:flex;flex-direction:column;width:100%;height:calc(100dvh - 120px);min-height:640px;max-height:940px;margin:0;padding:16px 18px 12px;background:#fffdf8;border:1px solid #e0dfd2;border-radius:26px;box-shadow:0 20px 65px #35433314;overflow:hidden}.app header{flex:none;padding:14px 0 12px}.app header h2{font-size:19px;margin:4px 0 0}.app header small{font-size:9px}.demo-notice{font-size:12px;font-weight:600;color:#50623e;background:#edf2de;border:1px solid #d5dfbe;border-radius:10px;padding:9px 12px;text-align:center;flex:none}.stage{height:clamp(200px,31vh,320px);flex:none;border-radius:20px}.panel-scroll{overflow-y:auto;min-height:0;flex:1;padding-bottom:14px;overscroll-behavior:contain}.controls{padding-top:16px}.app footer{position:static;transform:none;width:100%;max-width:none;flex:none;margin-top:10px;padding:10px 12px;box-shadow:none;border-radius:22px}.checkout{font-size:13px;white-space:nowrap;padding:13px 19px;background:#6c8d4e}.cart-icon{width:24px;height:24px;vertical-align:middle}.app footer .cart{padding:5px 0}.finish-bar{padding-top:7px}.next{background:#6c8d4e}.choice.on{color:#455e2e}.stage-note{font-size:9px}.scene-status{max-width:75%;font-size:11px;color:#766b56}.restart-cup{position:absolute;bottom:12px;left:10px;border:1px solid #d4cbb7;border-radius:18px;background:#fffdf3e8;color:#786f59;font-size:10px;padding:7px 10px;z-index:3}.undo-cup{bottom:12px;right:10px}.stage-note{bottom:16px}.selected{bottom:49px}.scrim{z-index:100;align-items:center;padding:20px;background:#23301e80;backdrop-filter:blur(5px)}.sheet{max-height:88dvh;border-radius:24px;padding:24px;box-shadow:0 20px 70px #17200c38}.sheet-head{gap:10px;margin-bottom:18px}.sheet-head h2{flex:1;font-size:20px}.sheet-head button{border-radius:18px;min-width:48px;width:auto;min-height:42px;padding:8px 12px;font-size:12px}.sheet .demo-notice{margin:16px 0}.sheet .hint{color:#758064}.cart-row .info{min-width:0}.cart-row h3{overflow-wrap:anywhere}.cart-row p{font-size:12px;color:#6f7764}.qty button{width:34px;height:34px}.naming input{min-height:50px;font-size:16px}.review-note{font-size:14px;color:#71664e}.order-sheet .hint{line-height:1.8;font-size:12px}.demo-order{padding:18px;border:1px solid #dedfcf;border-radius:18px;margin:14px 0;background:#fff}.order-top{display:flex;gap:10px;align-items:center;justify-content:space-between}.order-top strong{font-size:14px;color:#50713a}.order-top small,.demo-id{font-size:10px;color:#849079}.demo-id{display:block;margin:8px 0 16px;overflow-wrap:anywhere}.order-item{display:flex;gap:12px;align-items:center;padding:12px 0;border-top:1px dashed #e1e5d6;font-size:14px}.order-item>div{flex:1;min-width:0}.order-item strong{overflow-wrap:anywhere}.order-item p{font-size:11px;color:#77816b;line-height:1.7;margin:6px 0 0}.order-total{font-size:13px;text-align:right;margin:12px 0}.order-total small{display:block;color:#6a8054;margin-top:6px}.order-steps{display:flex;justify-content:space-between;list-style:none;padding:0;margin:22px 0 12px;gap:6px}.order-steps li{font-size:11px;color:#9ca58f;border-top:3px solid #e9eddf;padding-top:8px;flex:1;text-align:center}.order-steps li.done{border-color:#809e5c;color:#50713a}.service-link{display:block;border:1px solid #bacb9f;border-radius:14px;padding:16px;font-size:13px;background:#f1f6e6;text-align:center;text-decoration:none;margin-top:22px}.storage-warning{font-size:12px;color:#986733}#fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column}#fallback[hidden],canvas[hidden]{display:none}#fallback img{height:75%;max-width:70%;object-fit:contain}#fallback span{font-size:10px;padding:4px 15px;color:#81745b}.panel-scroll .material{min-height:90px}.panel-scroll .material small{line-height:1.4}.naming{padding:20px}.naming .sheet{max-width:480px}#toast{z-index:120}body:has(.scrim){overflow:hidden}@media(max-width:900px){.experience-layout{grid-template-columns:1fr 470px;gap:24px;padding:0 20px}.intro{padding-top:40px}.intro h1{font-size:33px}.intro-steps{gap:10px}.stage-note{display:none}}@media(max-width:760px){.site-nav{height:52px;padding:0 16px;font-size:12px}.brand{font-size:17px}.brand span{font-size:11px;margin-left:8px;padding-left:8px}.experience-layout{display:block;margin:0;padding:0}.intro{display:none}.app{border:0;border-radius:0;max-width:520px;margin:auto;box-shadow:none;min-height:0;max-height:none;height:calc(100dvh - 52px);padding:10px 14px max(10px,env(safe-area-inset-bottom))}.app header{padding:10px 0}.app header h2{font-size:17px}.stage{height:clamp(170px,29dvh,290px)}.demo-notice{font-size:11px;padding:7px 10px}.scrim{padding:12px}.sheet{padding:20px;max-height:90dvh}.finish-bar .next{padding:12px}.app footer{margin-top:8px}.scene-status{top:12px;left:13px;font-size:10px}.controls h2{font-size:17px}.controls{padding-top:12px}.panel-scroll .material{min-height:85px;padding:9px 5px}.panel-scroll .choice{padding:10px 12px}.demo-contact{display:none}}@media(max-height:650px) and (max-width:760px){.stage{height:150px}.app header small{display:none}.app header{padding:7px 0}.controls{padding-top:8px}.app footer{padding:7px 10px}.checkout{padding:10px 15px}.finish-bar .next{padding:10px}}