*{box-sizing:border-box}body{margin:0;background:#f5f2eb;color:#4c5147;font-family:Arial,'PingFang SC',sans-serif}button,a,input{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}header{max-width:1280px;margin:auto;padding:28px 5%;display:flex;justify-content:space-between;align-items:center}.brand{text-decoration:none;color:#464d3f;font:italic 30px Georgia}.brand span{display:block;font:10px Arial;letter-spacing:4px;margin-top:8px}.sound{display:flex;align-items:center;gap:12px}.sound button,.tools button{border:0;background:none;font-size:12px}.sound input{width:65px;accent-color:#788066}main{max-width:1200px;margin:auto}.intro{text-align:center;margin:28px 0 0}.intro small{font-size:9px;letter-spacing:3px;color:#939783}h1{font-family:Georgia,'Songti SC',serif;font-size:34px;font-weight:400;margin:15px 0}p{font-size:13px;color:#919183;letter-spacing:1px}#scene{height:440px;position:relative}canvas{width:100%;height:100%;display:block;touch-action:none}#hint{position:absolute;bottom:10px;left:0;right:0;text-align:center;font-size:11px;letter-spacing:2px;color:#969786;pointer-events:none}#status{position:absolute;top:15px;left:0;right:0;text-align:center;font-size:12px;pointer-events:none}.gallery{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;max-width:960px;margin:0 auto 30px}.gallery button{background:none;border:1px solid transparent;padding:12px;border-radius:14px}.gallery button:hover{background:#eae8de;border-color:#d8dccd}.gallery strong{display:block;font-weight:400;font-size:15px}.gallery small{display:block;font:italic 12px Georgia;color:#9c9d8d;margin-top:7px}#mix{max-width:900px;margin:auto}.tools{display:flex;justify-content:space-between;align-items:center;margin:0 15px 18px}.tools span{font-size:11px;color:#949681}.panel{background:#fffcf6;border:1px solid #e4e3d8;border-radius:23px;padding:22px 27px;box-shadow:0 10px 35px #736b4b08}.tabs{display:flex;gap:30px;border-bottom:1px solid #eceade;padding-bottom:14px}.tabs button{background:none;border:0;font-size:12px;opacity:.5}.tabs button.active{opacity:1}.choices{display:flex;gap:9px;flex-wrap:wrap;padding:20px 0}.choices[hidden]{display:none}.choice{flex:1;min-width:88px;border:1px solid #e8e7dd;border-radius:14px;background:#faf9f3;padding:13px 9px;font-size:12px}.choice.active{border-color:#8a9479;background:#edf0e4}.dot{display:block;width:22px;height:22px;border-radius:50%;margin:0 auto 9px;box-shadow:inset 0 0 0 3px #ffffff60}.emoji{display:block;font-size:23px;margin-bottom:9px}.pourbar{display:flex;justify-content:space-between;align-items:center;border-top:1px solid #eceade;padding-top:15px}.pourbar span{font-size:11px;color:#8e927f}#pour{background:#737f62;color:white;border:0;border-radius:30px;padding:14px 28px;touch-action:none;user-select:none}#pour:active{background:#536146}footer{display:flex;justify-content:space-between;font-size:10px;color:#a2a18f;padding:35px 5% 25px;letter-spacing:1px}footer span{font:italic 11px Georgia}@media(max-width:650px){header{padding:22px}.intro{margin-top:20px}h1{font-size:27px}#scene{height:330px}.gallery{gap:0;margin:0 8px}.gallery strong{font-size:11px}.gallery small{font-size:9px}#mix{margin:0 14px}.panel{padding:18px}.choices{gap:6px}.choice{min-width:75px}.pourbar span{max-width:120px;line-height:1.8}#pour{padding:13px 17px;font-size:12px}footer{display:block;text-align:center;line-height:2}footer span{display:block}.sound input{width:45px}.sound{gap:3px}}

[hidden]{display:none!important}

body{background:#fff0dd;color:#435750}.brand{color:#32765f}.intro small{color:#5b9f88}.panel{background:#fffaf1;border-color:#e8cead}.gallery{grid-template-columns:repeat(3,1fr);max-width:700px}.gallery button:hover{background:#ffe4b9;border-color:#edbb83}.choice.active{background:#e0f7e9;border-color:#51b798}#pour{background:#359e7e}.dot{width:26px;height:26px}.tabs button.active{color:#329e7c}#scene{height:490px}#machine-control{position:absolute;top:12px;left:50%;transform:translateX(-50%);text-align:center;z-index:3}#tap{border:3px solid #fff4d2;border-radius:28px;background:#faaf54;color:#5f4930;font-weight:bold;min-height:52px;padding:12px 30px;box-shadow:0 5px 0 #d98737,0 10px 25px #be985432;touch-action:none;user-select:none;-webkit-user-select:none}#tap.running{background:#ffcd6b;transform:translateY(4px);box-shadow:0 1px 0 #d98737}#machine-control small{display:block;font-size:10px;color:#8f8167;margin-top:10px}#motion{background:#d8f2e3;border-radius:20px;padding:9px 13px;color:#36735c}.gallery strong{font-weight:bold}@media(max-width:650px){#scene{height:400px}.intro{margin-top:8px}h1{font-size:25px}.gallery strong{font-size:13px}#machine-control{top:7px}#tap{min-height:50px;padding:12px 27px}.tools{gap:6px;margin-left:0;margin-right:0}.tools button{font-size:11px}header{padding-bottom:12px}}

#toppings .choice{flex:0 1 180px;background:#e9f7fc;border-color:#bfdce7}

/* Sky-blue illustrated summer palette inspired by the supplied references. */
body{background:#61b5de;color:#fffef3}.brand{color:#fff18a}.brand span{color:#fff}.intro small{color:#e6f7ff}h1{color:#fff18a;font-weight:600}p{color:#f3fbff}.sound button{color:#fff}.sound input{accent-color:#fff18a}.gallery button{color:#fff}.gallery small{color:#def3ff}.gallery button:hover{background:#ffffff19;border-color:#fff3b1}.panel{background:#ecf8fd;border:2px solid #fff;color:#275e79;box-shadow:0 8px 0 #398fc22b}.choice{background:#fff;border:1px solid #c4e3ef}.choice.active{background:#fff3a6;border-color:#e3cf65}.tabs{border-color:#c5e5f1}.tabs button.active{color:#077dad}.pourbar{border-color:#c5e5f1}.pourbar span{color:#588da6}#pour{background:#168ebb;color:#fff}#pour:active{background:#076f9a}#hint{color:#e9f9ff}#status{color:#fff9c6;font-weight:bold}.tools button{color:#fff}.tools #motion{background:#fff3a6;color:#49778d}#tap{background:#fff08a;border-color:#fffce1;color:#427794;box-shadow:0 5px 0 #dfc94f,0 10px 25px #2882b54a}#tap.running{background:#fff6b3;box-shadow:0 1px 0 #dfc94f}#machine-control small{color:#f0fbff}#toppings .choice{background:#d6f0fb;border-color:#a3d1e3;color:#3b7692}footer{color:#ddf3ff}#scene{border-radius:32px}

body.dark-gallery{background:#292c32;color:#dad5c8}.dark-gallery .brand{color:#e8ce96}.dark-gallery .brand span{color:#a7a499}.dark-gallery h1{color:#f0dcac}.dark-gallery p{color:#aaa99f}.dark-gallery .intro small{color:#858a8f}.dark-gallery .sound button{color:#c7c8c6}.dark-gallery .gallery button{color:#e2dccd}.dark-gallery .gallery small{color:#989b9e}.dark-gallery .gallery button:hover{background:#ffffff08;border-color:#bfa87966}.dark-gallery #hint{color:#9b9e9f}.dark-gallery footer{color:#737b80}.dark-gallery #scene{height:520px;border-radius:0}@media(max-width:650px){.dark-gallery #scene{height:410px}}

/* Cornflower blue, sunshine yellow and white; a larger drink stage. */
body.dark-gallery{background:#4d78b0;color:#fff}.dark-gallery .brand,.dark-gallery h1{color:#fff18a}.dark-gallery .brand span,.dark-gallery p,.dark-gallery .sound button{color:#edf8ff}.dark-gallery .intro small{color:#ccdeef}.dark-gallery .gallery button{color:#fff}.dark-gallery .gallery small,.dark-gallery #hint{color:#d0e6f5}.dark-gallery .gallery button:hover{background:#ffffff10;border-color:#fff18a66}.dark-gallery footer{color:#b6d4e9}
body.mixing{background:#568fc1}.mixing header{padding-top:15px;padding-bottom:8px}.mixing .intro{margin:4px 0 0}.mixing .intro small,.mixing #sub{display:none}.mixing h1{font-size:24px;margin:6px 0 0;font-weight:400}.mixing #scene{height:660px;max-width:1000px;margin:0 auto}.mixing #hint{bottom:43px;font-size:10px;letter-spacing:1px}.mixing #status{top:100px}.mixing #machine-control{top:15px}#ice-side{position:absolute;right:8%;top:45%;z-index:4}#ice-side .choice{border:2px solid #fff;background:#eaf8ff;color:#367594;border-radius:22px;padding:17px 18px;box-shadow:0 5px 0 #37679536;min-width:90px;touch-action:manipulation}#ice-side .choice:active{transform:translateY(3px)}#ice-side .emoji{font-size:32px}#scene-tools{position:absolute;bottom:0;left:7%;right:7%;margin:0;z-index:4}#scene-tools button{padding:9px 12px;background:#ffffff16;border-radius:18px;color:#fff}.mixing #mix{max-width:980px;margin:7px auto 0}.mixing .panel{padding:8px 10px;background:transparent;border:0;box-shadow:none}.mixing .tabs,.mixing #toppings,.mixing .pourbar{display:none}.mixing #drinks{flex-wrap:nowrap;overflow-x:auto;padding:5px;gap:8px;scrollbar-width:thin}.mixing .choice{min-width:100px;background:#edf8ff;flex:1;border:2px solid #d9efff;padding:12px 7px}.mixing .choice.active{background:#fff3a6;border-color:#fff}.mixing footer{padding-top:16px;padding-bottom:16px}.mixing #motion{background:#fff1a0;color:#4d78a1}
@media(max-width:650px){.mixing header{padding:12px 18px 6px}.mixing .brand{font-size:23px}.mixing .brand span{font-size:8px;margin-top:4px}.mixing h1{font-size:19px;margin-top:8px}.mixing #scene{height:clamp(410px,66svh,650px)}#ice-side{right:3%;top:43%}#ice-side .choice{min-width:63px;padding:12px 8px;font-size:10px;border-radius:17px}#ice-side .emoji{font-size:26px}#scene-tools{left:3%;right:3%}#scene-tools button{font-size:10px;padding:8px}.mixing #mix{margin:5px 6px 0}.mixing .choice{min-width:80px;font-size:11px}.mixing footer{font-size:9px}.mixing #tap{padding:11px 24px}}

#ice-side{display:flex;flex-direction:column;align-items:center;gap:10px}#ice-count{font-size:11px;color:#f2faff;order:1}#ice-side #remove-ice{order:2;background:#fff4ba;padding:11px 12px;font-size:11px}#remove-ice .emoji{font-size:22px!important;margin-bottom:4px}#remove-ice:disabled{opacity:.4;cursor:default}#scene-tools #finish{background:#fff18a;color:#3e7595;font-weight:bold}#result{position:fixed;inset:0;background:#4e6682aa;backdrop-filter:blur(10px);display:grid;place-items:center;z-index:20;padding:20px}.result-card{background:#fff1f7;border:2px solid #fff;border-radius:24px;padding:20px;max-width:420px;width:100%;text-align:center;color:#876073;max-height:95svh;overflow:auto}.result-card h2{font-family:Georgia,'Songti SC',serif;font-weight:400;font-size:23px;margin:0 0 14px}#result-image{display:block;width:100%;max-height:65svh;object-fit:contain;border-radius:15px}#save-note{color:#a0798c;font-size:11px}.result-actions{display:flex;gap:9px;justify-content:center}.result-actions button{border:0;border-radius:25px;padding:13px 18px;background:#ee91b5;color:#fff;font-size:12px}.result-actions #edit-drink{background:#f2dbe6;color:#856478}@media(max-width:650px){#ice-side{top:34%;gap:7px}#ice-side #remove-ice{padding:8px 7px;font-size:9px}#scene-tools{gap:3px}#scene-tools button{padding:8px 7px!important;font-size:9px!important}.result-card{padding:14px}.result-card h2{font-size:20px}}

@font-face{font-family:'CuteRoundChinese';src:url('./fonts/cute-round-zh.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'CuteHandEnglish';src:url('./fonts/cute-hand-en.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
body,body *,button,input,a,h1,h2,p,small,.brand span,.gallery small,footer,footer span,.result-card h2{font-family:'CuteHandEnglish','CuteRoundChinese',sans-serif!important;font-style:normal!important;font-weight:400!important;font-synthesis:none}
body a.brand{font-family:Georgia,'Times New Roman',serif!important;font-style:italic!important}
button{letter-spacing:.3px}.intro h1{letter-spacing:1px}

body.dark-gallery,body.mixing{background:#61b5de}.dark-gallery footer{color:#d3effa}

body.dark-gallery,body.mixing{background:#4fadd7}

body.dark-gallery{background:#4f8dca}

/* Five reference silhouettes retain the existing studio palette and glass finish. */
.gallery{grid-template-columns:repeat(5,minmax(0,1fr));max-width:1100px}
@media(max-width:650px){.gallery{gap:2px;margin:0 8px 24px}.gallery button{padding:10px 2px}.gallery strong{font-size:11px;line-height:1.5}.gallery small{font-size:9px}}

body.dark-gallery,body.mixing{background:#4f8dca}
.mixing #canvas{animation:cup-arrival .28s ease-out both}
@keyframes cup-arrival{from{opacity:.55}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.mixing #canvas{animation:none}}