.mixture-art{width:80px;height:80px;pointer-events:none;flex-shrink:0}.mix-tray{padding:18px;margin:18px 0;background:linear-gradient(#fff1cf,#ffe0a0);border:5px solid #4c9dd4;border-radius:32px;box-shadow:inset 0 -7px 0 #dab775,0 5px 0 #d4e8f5}.mix-tray>p{font-weight:800;text-align:center;color:#694318;margin:0 0 15px}.mix-materials,.mix-groups{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.mix-material{min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:12px;border:2px solid #dfbc7b;border-radius:18px;color:#493c29;background:#fffaf0;line-height:1.4;text-align:center}.mix-material span{font-size:.8rem}.mix-material:disabled{opacity:1;background:#e3f5df;border-color:#63a368;color:#214c2c}.mix-groups{margin:20px 0}.mix-groups .mix-material{border:3px solid #6bb783;background:#edfaee}.mix-tools{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin:20px 0}.mix-tools button{display:flex;flex-direction:column;align-items:center;gap:8px;min-width:100px;white-space:normal}.mix-tools button[aria-pressed=true],.mix-predictions button[aria-pressed=true]{background:#fff0b8;border-color:#aa7700;color:#513900;box-shadow:0 0 0 2px #e9bb45}.mix-state{font-weight:750;color:#234d70;line-height:1.6;text-align:center}.magnet-result,.sieve-result{border:3px solid #79b7dc;background:#eff8ff;border-radius:22px;margin:18px 0;padding:18px;display:flex;align-items:center;justify-content:center;gap:20px}.magnet-result>div,.sieve-top,.sieve-bottom{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;min-width:0}.lifted-clips{animation:magnet-pickup .6s ease-out}.sieve-result{flex-direction:column;gap:5px}.sieve-top{display:grid;grid-template-columns:80px 80px;justify-content:center}.sieve-top strong{grid-column:1/-1}.falling-sand{font-size:26px;color:#946020;animation:sand-fall .7s ease-out;pointer-events:none}.mix-predictions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:20px 0}.mix-predictions fieldset{min-width:0;border:2px solid #79b7dc;border-radius:18px;padding:14px;text-align:center;background:#f6fbff}.mix-predictions legend{font-weight:800;padding:0 8px}.mix-predictions .answer-buttons{flex-direction:column}.mix-predictions button{font-size:.9rem;padding:12px}.dissolve-work{border:3px solid #81badc;border-radius:22px;background:#f1faff;padding:18px;display:flex;flex-direction:column;align-items:center;text-align:center}.water-cup{width:125px;height:150px;border:4px solid #4684af;border-top:2px solid #80bedb;border-radius:8px 8px 24px 24px;position:relative;isolation:isolate;margin:14px auto 22px;overflow:hidden;background:#f9feff;flex-shrink:0}.water-fill{position:absolute;inset:35% 5px 5px;background:linear-gradient(#b0eaffbb,#55bde4bb);border-radius:0 0 18px 18px;pointer-events:none}.water-cup>span{position:absolute;top:9px;left:0;right:0;text-align:center;font-weight:800;font-size:.8rem;color:#275675}.water-grains{position:absolute;bottom:12px;left:10px;right:10px;font-size:23px;color:#99703a;line-height:1;pointer-events:none}.water-grains.grains-gone{opacity:0;animation:dissolve-grains .8s ease-out}.stir-spoon{position:absolute;width:7px;height:80px;background:#7596ac;border:1px solid #3b607e;border-radius:6px;left:50%;top:22px;transform:rotate(12deg);transform-origin:top;animation:stir-water .65s ease-in-out;pointer-events:none}.dissolve-results{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:20px 0}.mix-test{min-width:0;border:2px solid #81badc;border-radius:20px;padding:14px;text-align:center;line-height:1.5;background:#f4fbff}.mix-test>span{display:block;font-size:.85rem}.mix-results-list{line-height:1.7}.mix-tools button:disabled{opacity:.7}.separation-scene,.mix-tray,.dissolve-work{max-width:100%}
@keyframes magnet-pickup{from{transform:translateY(28px)}to{transform:translateY(0)}}@keyframes sand-fall{from{transform:translateY(-20px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes dissolve-grains{from{opacity:1}to{opacity:0}}@keyframes stir-water{25%{transform:rotate(-15deg)}75%{transform:rotate(18deg)}}
@media(max-width:640px){.mix-materials,.mix-groups{grid-template-columns:1fr}.mix-material{flex-direction:row;flex-wrap:wrap;justify-content:center;padding:10px;gap:10px}.mix-material .mixture-art{width:58px;height:58px}.mix-material span{flex-basis:100%}.mix-tray{padding:12px;border-width:4px}.mix-tools{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.mix-tools button{min-width:0;padding:10px 4px;font-size:.8rem}.mix-tools .mixture-art{width:48px;height:48px}.mix-predictions,.dissolve-results{grid-template-columns:1fr}.mix-predictions .answer-buttons{flex-direction:row;flex-wrap:wrap}.magnet-result{gap:12px;padding:12px;font-size:.85rem}.magnet-result .mixture-art{width:65px;height:65px}.water-cup{width:110px;height:130px}.dissolve-work{padding:12px}.dissolve-results{gap:20px}.mix-test{padding:18px}.sieve-top{grid-template-columns:70px 70px}.sieve-top .mixture-art{width:70px;height:70px}}
@media(prefers-reduced-motion:reduce){.lifted-clips,.falling-sand,.water-grains.grains-gone,.stir-spoon{animation:none}}