*{box-sizing:border-box;margin:0;padding:0}body{color:#1e1311;background:#fff1c6;font-family:Arial,Helvetica,sans-serif}.app{max-width:1200px;margin:auto;padding:40px 20px}.app h1{text-align:center;font-size:3rem}.app p{text-align:center;color:#353131;margin-top:10px;margin-bottom:40px}.main-layout{align-items:flex-start;gap:40px;display:flex}.options-panel{background:#ffdfff;border-radius:24px;padding:30px;box-shadow:0 15px 35px #00000014}.options-panel>*{margin-bottom:25px}.options-panel{flex:1}.preview-panel{background:#ffe0ff;border-radius:24px;width:380px;padding:30px;box-shadow:0 15px 35px #00000014}button{color:#261714;cursor:pointer;background:#fff0f7;border:none;border-radius:999px;margin:6px;padding:12px 20px;font-size:15px;font-weight:600;transition:transform .2s,box-shadow .2s,background .2s}button:hover{background:#fc93c9;transform:translateY(-3px);box-shadow:0 10px 20px #0000001f}button:active{transform:scale(.95)}button.selected{color:#fff;background:linear-gradient(135deg,#b79fef,#f9aab7);box-shadow:0 10px 25px #c7b8ea80}.options-panel h2{margin-top:28px;margin-bottom:12px;font-size:1.2rem}.options-panel h2:first-child{margin-top:0}.drink-card{text-align:center}.drink-card h2{margin-bottom:20px}.drink-card h3{margin-top:20px}.cup-container{width:180px;height:290px;margin:20px auto;position:relative}.straw{z-index:5;background:#444;border-radius:8px;width:12px;height:110px;position:absolute;top:0;right:45px;transform:rotate(15deg)}.lid{z-index:4;background:#4956ac;border-radius:12px;width:150px;height:18px;position:absolute;top:45px;left:8px}.cup{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#ffffff40;border:4px solid #fffc;border-radius:20px 20px 35px 35px;width:160px;height:220px;position:absolute;bottom:0;overflow:hidden;box-shadow:0 18px 40px #0000001f}.liquid{width:100%;height:75%;animation:1.2s fillCup;position:absolute;bottom:0;overflow:hidden}@keyframes fillCup{0%{height:0%}to{height:75%}}.pearls{width:100%;height:70px;position:absolute;bottom:18px;left:0}@keyframes bob{0%{transform:translateY(0)}50%{transform:translateY(-8px)}to{transform:translateY(0)}}.popping-boba{gap:8px;display:flex;position:absolute;bottom:20px}.popping-boba span{background:orange;border-radius:50%;width:18px;height:18px;animation:3s ease-in-out infinite bob}.jelly{gap:8px;display:flex;position:absolute;bottom:20px}.jelly span{background:#f6d365;border-radius:5px;width:20px;height:20px}.grass-jelly span{background:#222;width:22px;height:22px;margin:5px;display:inline-block}.cheese-foam{font-size:45px;position:absolute;top:10px}.red-bean{font-size:25px;position:absolute;bottom:20px}.popping-boba span,.jelly span,.grass-jelly span,.red-bean span{animation:3s ease-in-out infinite bob}.popping-boba span:nth-child(2),.jelly span:nth-child(2),.red-bean span:nth-child(2){animation-delay:.5s}.popping-boba span:nth-child(3){animation-delay:1s}.popping-boba span:nth-child(4){animation-delay:1.5s}.cheese-foam{animation:3s ease-in-out infinite floatFoam}@keyframes floatFoam{0%{transform:translateY(0)}50%{transform:translateY(-5px)}to{transform:translateY(0)}}.pearls{width:100%;height:80px;position:absolute;bottom:15px}.pearl{background:#3b2416;border-radius:50%;width:18px;height:18px;animation:3s ease-in-out infinite bob;position:absolute;box-shadow:inset -3px -3px 5px #fff3}.pearl1{bottom:5px;left:25px}.pearl2{animation-delay:.4s;bottom:25px;left:55px}.pearl3{animation-delay:.8s;bottom:10px;left:90px}.pearl4{animation-delay:1.2s;bottom:35px;left:120px}.pearl5{animation-delay:1.6s;bottom:50px;left:70px}.popping-boba{width:100%;height:90px;position:absolute;bottom:15px}.boba{background:coral;border-radius:50%;width:16px;height:16px;animation:3s ease-in-out infinite bob;position:absolute;box-shadow:inset -3px -3px 5px #ffffff59}.boba1{bottom:5px;left:20px}.boba2{background:#ff4d6d;animation-delay:.5s;bottom:30px;left:65px}.boba3{background:#ffd166;animation-delay:1s;bottom:15px;left:110px}.boba4{background:#c77dff;animation-delay:1.5s;bottom:55px;left:45px}.boba5{background:#ff9f1c;animation-delay:2s;bottom:45px;left:125px}.liquid{width:100%;height:75%;position:absolute;bottom:0;overflow:hidden}.liquid-wave{width:140%;height:35px;position:absolute;top:-15px;left:-20%;overflow:hidden}.wave{border-radius:50%;width:120%;height:35px;position:absolute}.wave1{background:#ffffff59;animation:4s ease-in-out infinite waveMove;top:0;left:0}.wave2{background:#ffffff2e;animation:3s ease-in-out infinite reverse waveMove;top:8px;left:40px}@keyframes waveMove{0%{transform:translate(-20px)}50%{transform:translate(20px)}to{transform:translate(-20px)}}@keyframes wave{0%{transform:translate(-10px)}50%{transform:translate(10px)}to{transform:translate(-10px)}}.glass-shine{z-index:5;pointer-events:none;background:#ffffff59;border-radius:20px;width:20px;height:150px;position:absolute;top:15px;left:18px;transform:rotate(10deg)}.pearls,.popping-boba,.jelly,.grass-jelly,.red-bean{z-index:3}.liquid{animation:5s ease-in-out infinite liquidPulse}@keyframes liquidPulse{0%{transform:scaleY(1)}50%{transform:scaleY(1.02)}to{transform:scaleY(1)}}.option-section{background:#f9d0ff;border-radius:22px;margin-bottom:32px;padding:16px}.option-section h2{color:#000;margin-bottom:12px;font-size:1.1rem}.dna-card{background:#fff8f4;border-radius:20px;margin-top:25px;padding:20px}.dna-row{margin:15px 0}.dna-background{background:#eee;border-radius:20px;height:12px;overflow:hidden}.dna-fill{background:linear-gradient(90deg,#f7c8d0,#c7b8ea);border-radius:20px;height:100%;transition:width .5s}.share-card{background:linear-gradient(135deg,#ff95da,#eaa3ff);border-radius:25px;margin-top:25px;padding:25px;box-shadow:0 15px 30px #00000014}.share-card h2{text-align:center}.share-card h3{margin:15px 0}.share-card small{text-align:center;color:#fffdfd;margin-top:20px;display:block}.flavor-card{background:#fff8f4;border-radius:20px;margin-top:25px;padding:20px;box-shadow:0 8px 20px #0000000f}.option-section button{margin:8px}.extra-cards{flex-direction:column;gap:25px;display:flex}.liquid-wave{z-index:1}.pearls,.popping-boba,.jelly,.grass-jelly,.red-bean,.cheese-foam{z-index:2}.mini-cup-wrapper{justify-content:center;align-items:center;height:150px;display:flex;overflow:hidden}.mini-cup-wrapper .cup-container{transform-origin:50%;margin:0;transform:scale(.45)}.mini-cup{transform-origin:50%;width:180px;height:290px;transform:scale(1)}.share-card{text-align:center}.share-card p{margin:8px 0}.left-side{flex-direction:column;flex:1;gap:25px;display:flex}.download-btn{color:#fff;background:linear-gradient(135deg,#ff9ecf,#c7b8ea);border-radius:30px;margin-top:20px;padding:14px 25px;font-weight:700}.download-btn:hover{transform:translateY(-3px)}.ice-cubes{z-index:2;width:100%;height:80px;position:absolute;bottom:45px}.ice{background:#ffffff8c;border:1px solid #fffc;border-radius:6px;width:25px;height:25px;animation:4s ease-in-out infinite iceFloat;position:absolute;box-shadow:inset 2px 2px 5px #fffc}.ice1{bottom:10px;left:25px}.ice2{animation-delay:.5s;bottom:30px;left:70px}.ice3{animation-delay:1s;bottom:15px;left:110px}.ice4{animation-delay:1.5s;bottom:55px;left:85px}@keyframes iceFloat{0%,to{transform:translateY(0)}50%{transform:translateY(-5px)}}.mascot-card{text-align:center;background:#fff8f4;border-radius:25px;margin-top:25px;padding:20px;box-shadow:0 10px 25px #00000014}.mascot{font-size:60px;animation:2s infinite bounce}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.liquid-wave{animation:2s ease-in-out infinite wave,.8s splash}@keyframes splash{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}