:root{--juice:#ed9c29;--aqua:#4dadd3;--forest:#234b40}body{background-color:#f7f3e5;color:var(--forest)}.juice-shell{max-width:1440px;width:calc(100% - 40px)}.juice-nav{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:12px}.juice-nav a{color:var(--forest);font-weight:800;text-decoration:none}.juice-nav>span{color:#718477}.juice-header{display:flex;align-items:center;justify-content:space-between;gap:22px;padding:22px 0}.juice-header h1{font-size:clamp(24px,2.7vw,37px);letter-spacing:-1px}.juice-header p:last-child{font-size:14px;color:#6b7f73;margin:5px 0 0}.juice-header h1 span{background:linear-gradient(transparent 65%,#f7c961 65%)}.mode-switch{display:flex;flex-shrink:0;background:#e7eadd;padding:5px;border-radius:12px;gap:4px}.mode-switch button{border:0;font-size:13px;padding:10px 15px;background:transparent}.mode-switch button[aria-pressed=true]{background:#285c4b;color:white;box-shadow:0 3px 8px #234b4020}.mode-switch span{color:#eebe53}.shop{display:grid;grid-template-columns:230px minmax(0,1fr) 255px;align-items:stretch;border:1px solid #bdcbbb;border-radius:20px;background:#fffdf7;overflow:hidden;box-shadow:0 10px 30px #2449370b}.section-kicker{font-size:10px;letter-spacing:1px;color:#6f8778;font-weight:800;margin:0 0 8px}.ingredients,.order-panel{padding:23px 20px}.ingredients{background:#f0f1e7;border-right:1px solid #d8dfd0}.order-panel{border-left:1px solid #d8dfd0;background:#faf7ed}.shop h2{font-size:21px}.muted{font-size:12px;color:#6e7f71;line-height:1.8;margin:9px 0 21px}.ingredient{width:100%;display:flex;align-items:center;gap:12px;text-align:left;position:relative;touch-action:none;user-select:none;border:1px solid #dec593;padding:15px 10px;border-radius:13px;background:#fff4da;box-shadow:0 4px 0 #e5d5b1;margin:0 0 16px;cursor:grab}.ingredient:active{cursor:grabbing}.ingredient.water{background:#e8f6fb;border-color:#add6e5;box-shadow:0 4px 0 #c6e2e9}.ingredient strong{font-size:16px}.ingredient small{display:block;font-size:10px;margin-top:5px;color:#7b806e}.ingredient .plus{font-size:22px;margin-left:auto;color:#587166}.mini-cup{display:block;position:relative;width:34px;height:45px;border:2px solid #a07b45;border-top:0;border-radius:0 0 9px 9px;transform:rotate(-5deg);flex-shrink:0;overflow:hidden}.mini-cup i{position:absolute;inset:10px 0 0;background:#efab38}.mini-cup b{position:relative;display:block;text-align:center;margin-top:13px;font-size:15px;color:#78531b}.water .mini-cup{border-color:#548fa5}.water .mini-cup i{background:#9ed6ed}.water .mini-cup b{color:#316b80}.remove-row,.small-actions{display:flex;gap:6px}.remove-row button,.small-actions button{flex:1;font-size:11px;padding:8px 4px;border:1px solid #bbc9b8;background:#ffffff70}.recipe-actions{border-top:1px dashed #bdcbbb;margin-top:24px;padding-top:20px;display:grid;gap:10px}.recipe-actions button{font-size:14px;text-align:left;border-color:#abc3af;background:#fcfdf7;padding:13px}.recipe-actions small{display:block;font-size:10px;font-weight:400;color:#778575;margin-top:4px}.small-actions{margin-top:16px}.shop-center{min-width:0}.awning{background:repeating-linear-gradient(90deg,#2c6b54 0 40px,#eef0d8 40px 80px);height:66px;border-bottom:9px solid #255d49;border-radius:0 0 12px 12px;display:flex;align-items:center;justify-content:center;gap:16px}.awning span{background:#fff8de;border:2px solid #244d3a;padding:5px 18px;font-size:20px;font-weight:800;transform:rotate(-2deg);box-shadow:3px 3px #244d3a30}.awning i{display:none}.play-scene{height:360px;position:relative;display:flex;align-items:flex-end;justify-content:center;gap:0;padding:0 20px 38px;background:radial-gradient(ellipse at 50% 30%,#fffbe7 10%,#eff3df 90%);isolation:isolate}.bunting{position:absolute;top:10px;left:0;right:0;text-align:center;color:#d6b250;font-size:21px;letter-spacing:60px;padding-left:60px}.bunting span{color:#639480}.customer{position:relative;text-align:center;z-index:1;flex:1;min-width:0;max-width:140px}.customer svg{width:105px;max-width:100%;display:block;margin:auto}.giant svg{width:140px}.speech{font-size:11px;line-height:1.8;background:#fffdf6;border:1px solid #d1dac2;border-radius:12px;padding:8px 6px;box-shadow:0 3px 0 #7b987513;margin-bottom:8px;position:relative}.speech:after{content:'';position:absolute;bottom:-6px;left:50%;width:10px;height:10px;background:#fffdf6;border-right:1px solid #d1dac2;border-bottom:1px solid #d1dac2;transform:rotate(45deg)}.name-tag{font-size:9px;white-space:nowrap;color:#6c7e68;background:#ffffff90;border-radius:8px;padding:3px 7px}.jug-area{width:220px;max-width:45%;position:relative;align-self:flex-end;flex-shrink:0;z-index:2}.jug-area svg{width:100%;display:block;overflow:visible}.total-badge{text-align:center;font-size:12px;color:#355b48;background:#fffcf0;border:1px solid #c7d7bc;border-radius:16px;padding:3px 12px;position:relative;z-index:2;margin:-10px auto 0;width:max-content;max-width:100%}.total-badge strong{font-size:20px}.total-badge span{font-size:9px;color:#7c8b76}.drop-hint{text-align:center;font-size:11px;color:#61856b;margin-bottom:-14px;position:relative;z-index:3;animation:nudge 2s ease-in-out infinite}.counter{position:absolute;bottom:0;left:0;right:0;height:43px;background:linear-gradient(#d0b083 0 10px,#eccea2 10px);border-top:2px solid #b79464;z-index:-1}.play-scene.drag-over{box-shadow:inset 0 0 0 4px #329b74}.play-scene.drag-over .drop-hint{color:#176448;font-weight:800}.mix-status{padding:12px 20px;background:#e6efdf;color:#3f674d;font-size:12px;min-height:62px;border-top:1px solid #d2dec6;display:flex;align-items:center;justify-content:center;text-align:center}.mix-status[data-taste=match]{background:#dff2db;color:#27633b}.ratio-board{padding:17px 22px 15px}.ratio-equation{display:flex;align-items:center;gap:15px;margin-bottom:14px}.ratio-equation>button{background:transparent;border:0;padding:0 7px;min-width:55px}.ratio-equation small{display:block;font-size:11px;font-weight:500}.ratio-equation strong{display:block;font-size:38px;line-height:1.3}.ratio-equation>span{font-size:34px;color:#7b8c75}.ratio-equation #focus-orange{color:#b8711c}.ratio-equation #focus-water{color:#3c8cab}.simplified{margin-left:auto;border-left:1px solid #dae2d4;padding-left:20px}.simplified>span{font-size:10px;color:#7a8c76}.simplified strong{font-size:23px;color:#426952}.portion-row{display:flex;align-items:center;gap:10px;margin:7px 0;min-height:23px}.portion-row>span{width:45px;flex-shrink:0;font-size:10px;color:#6c806f}.parts{display:flex;flex-wrap:wrap;gap:4px}.parts i{width:18px;height:20px;background:#f4bd59;border:1px solid #cf9b3b;border-radius:3px;display:block}.water-parts i{background:#a6d8ec;border-color:#75b2c9}.parts:empty:after{content:'还没有';font-size:10px;color:#a1ab9a}.portion-row.highlight{background:#fff1c0;outline:2px solid #e9b741;border-radius:5px}.ratio-board>p:last-child{font-size:11px;line-height:1.7;color:#6b806a;margin:10px 0 0;min-height:19px}.reference-drink{display:flex;gap:16px;align-items:center;margin:22px 0}.reference-glass{width:50px;height:70px;border:2px solid #98afa1;border-top:0;border-radius:0 0 12px 12px;overflow:hidden;position:relative;transform:rotate(4deg);background:#fff}.reference-glass i{position:absolute;left:0;right:0;bottom:0;height:75%;background:rgb(244,180,95)}.reference-drink span,.reference-drink small{display:block;font-size:11px;color:#74846e}.reference-drink strong{font-size:30px;line-height:1.6}.order-copy{font-size:13px;line-height:1.9;min-height:70px}.comparison{background:#eeeedd;border-radius:12px;padding:16px 13px;margin:18px 0}.comparison>span{font-size:10px;color:#718369;display:block}.comparison strong{display:block;font-size:17px;margin:7px 0 15px}.taste-track{height:10px;border-radius:8px;position:relative;background:linear-gradient(90deg,#fff4d9,#f5b75e 40%,#e16c0e)}.taste-standard{position:absolute;left:40%;top:-5px;height:20px;border-left:2px dashed #315c45}.taste-track>i{position:absolute;left:0;top:-4px;width:12px;height:18px;transform:translateX(-50%);background:#234b40;border:2px solid #fff;border-radius:5px;transition:left .3s}.taste-labels{display:flex;justify-content:space-between;font-size:9px;margin:9px 0 13px;color:#748269}.taste-labels span:nth-child(2){margin-right:16%}.comparison>small{font-size:9px;color:#88917b}.serve-button{width:100%;background:#2e7156;color:white;border-color:#2e7156;font-size:14px;box-shadow:0 4px #21543e}.serve-button:hover:not(:disabled){background:#235d46}#next-order{width:100%;background:#f4d785;border-color:#c8ac59;margin-top:10px;font-size:13px}.order-result{margin-top:17px;font-size:12px;line-height:1.8;min-height:44px}.order-result[data-success=true]{color:#246b40;font-weight:700}.meaning{border-top:1px dashed #cdd5c0;padding-top:14px;margin-top:15px;font-size:11px;color:#71816a}.meaning summary{cursor:pointer;font-weight:800;color:#486441}.meaning p{line-height:1.8}.challenge-progress{background:#f4e5b8;border:1px dashed #d4bc70;border-radius:9px;text-align:center;padding:9px;font-size:12px}.challenge-progress div{font-size:24px;letter-spacing:9px;color:#b9821b}.lesson-note{font-size:11px;color:#72816c;text-align:center;margin:15px 0}.juice-shell footer{font-size:10px;padding:10px 0 20px}#drag-cup{position:fixed;z-index:2000;pointer-events:none;width:65px;height:65px;display:grid;place-items:center;background:#fff8e6;border:2px solid #d4aa66;border-radius:14px;font-size:15px;font-weight:800;box-shadow:0 8px 20px #284d4930;transform:translate(-50%,-65%) rotate(-12deg)}#pour-stream{position:absolute;width:8px;height:0;top:30px;left:46%;border-radius:8px;background:var(--pour-color,#ecac35);pointer-events:none}.pouring #pour-stream{animation:pour .55s ease both}.pouring #juice-surface{animation:ripple .55s ease}.jug-area rect,.jug-area ellipse{transition:y .35s,height .35s,cy .35s,fill .35s}#celebration{position:absolute;inset:10% 0 20%;display:flex;align-items:center;justify-content:center;flex-direction:column;font-size:110px;font-weight:900;color:#dc3c30;text-shadow:0 4px #fff;animation:cheer .5s ease both;pointer-events:none}#celebration small{font-size:15px;background:#fff9eb;border:1px solid #e4cfa1;border-radius:20px;padding:5px 12px;text-shadow:none}.served .customer svg{animation:cheer .5s ease both}.served .giant svg{animation-delay:.08s}@keyframes cheer{0%{transform:scale(.7) translateY(10px);opacity:0}70%{transform:scale(1.08) translateY(-7px)}100%{transform:none;opacity:1}}@keyframes pour{0%{height:0;opacity:0}20%{height:150px;opacity:.8}80%{height:150px;opacity:.8}100%{height:170px;opacity:0}}@keyframes ripple{50%{rx:85px}}@keyframes nudge{50%{transform:translateY(4px)}}
@media(min-width:1400px){.awning i{display:block;background:#2b624d;color:#f7f0d8;font-size:8px;letter-spacing:1px;padding:5px}.shop{grid-template-columns:245px minmax(0,1fr) 280px}.play-scene{height:380px}.jug-area{width:245px}.customer{max-width:155px}.speech{font-size:12px}}
@media(max-width:1100px){.shop{grid-template-columns:190px minmax(0,1fr) 210px}.ingredients,.order-panel{padding:18px 13px}.play-scene{padding:0 8px 38px}.speech{font-size:9px}.name-tag{font-size:8px;padding:2px}.ratio-board{padding:15px}.ratio-equation{gap:5px}.simplified{padding-left:10px}.ingredient{gap:8px}.ingredient strong{font-size:14px}.ingredient small{font-size:9px}.mini-cup{width:28px}.juice-header h1{font-size:28px}}
@media(max-width:860px){.shop{grid-template-columns:180px minmax(0,1fr)}.order-panel{grid-column:1/-1;border-left:0;border-top:1px solid #d8dfd0;display:grid;grid-template-columns:1fr 1fr;gap:10px 25px;padding:20px}.order-panel>.section-kicker{grid-column:1/-1}.order-panel h2{grid-column:1}.reference-drink{grid-column:1;margin:0;grid-row:3}.order-copy{grid-column:1;margin:0}.comparison{grid-column:2;grid-row:2/5;margin:0}.challenge-progress{grid-column:1}.serve-button,#next-order{grid-column:2}.order-result{grid-column:1/-1;min-height:0;margin:4px 0}.meaning{grid-column:1/-1;margin:0}.juice-header{align-items:flex-start}.mode-switch{flex-direction:column}.juice-header h1{font-size:25px}.classroom-tools{margin-top:6px}}
@media(max-width:580px){.juice-shell{width:calc(100% - 24px);padding-top:12px}.juice-nav>span{display:none}.juice-header{display:block;padding:17px 0}.juice-header h1{font-size:25px}.juice-header>div>p:last-child{font-size:12px}.mode-switch{flex-direction:row;width:max-content;margin-top:12px}.mode-switch button{min-height:40px;padding:7px 15px}.shop{display:flex;flex-direction:column;border-radius:14px}.shop-center{order:0}.ingredients{order:1;border-right:0;border-top:1px solid #d8dfd0;display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:16px}.ingredients>.section-kicker,.ingredients>h2,.ingredients>.muted{grid-column:1/-1;margin:0}.ingredients>.muted br{display:none}.ingredient{margin:3px 0;gap:8px;padding:12px 8px;min-height:81px}.ingredient .plus{display:none}.remove-row,.recipe-actions,.small-actions{grid-column:1/-1}.recipe-actions{display:flex;border:0;padding:0;margin:0;gap:8px}.recipe-actions button{flex:1;font-size:12px;padding:10px}.small-actions{margin:0}.order-panel{order:2;display:block;padding:20px}.reference-drink{margin:14px 0}.comparison{margin:15px 0}.order-copy{min-height:0}.order-result{margin:15px 0}.meaning{margin-top:10px}.play-scene{height:315px;padding:0 8px 33px}.awning{height:57px}.awning span{font-size:18px}.jug-area{width:180px;max-width:44%}.customer{max-width:105px}.customer svg{width:85px}.giant svg{width:108px}.speech{font-size:9px;padding:6px 3px}.name-tag{font-size:7px;white-space:normal;display:block}.counter{height:38px}.total-badge{padding:2px 7px}.total-badge strong{font-size:16px}.total-badge span{font-size:8px}.ratio-board{padding:15px}.ratio-equation strong{font-size:32px}.simplified strong{font-size:20px}.parts i{width:15px;height:17px}.mix-status{font-size:11px;min-height:52px;padding:10px}.lesson-note{font-size:10px;text-align:left}footer{gap:15px}.bunting{letter-spacing:45px;padding-left:45px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}