.titration-container{width:100%;height:100vh;overflow:hidden;position:relative}.titration-scene{width:100%;height:100%}.beaker{bottom:15%;border:2px solid hsla(0,0%,100%,.3);background-color:hsla(0,0%,100%,.05);border-radius:0 0 .5rem .5rem;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.beaker,.burette{position:absolute;left:50%;transform:translateX(-50%)}.burette{top:5%}.ph-meter{position:absolute;bottom:15%;right:15%;display:flex;flex-direction:column;align-items:center}.molecular-view{position:absolute;top:10%;left:10%;background-color:hsla(0,0%,100%,.05);border:1px solid hsla(0,0%,100%,.2);border-radius:.5rem;padding:.5rem;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}@media (max-width:640px){.beaker{width:32px;height:40px}.burette{width:6px;height:48px}.ph-meter{right:5%;width:10px;height:48px}.molecular-view{top:5%;left:5%;width:24px;height:24px}.control-panel{width:90%}}@media (min-width:641px) and (max-width:1024px){.beaker{width:40px;height:48px}.burette{width:8px;height:64px}.ph-meter{right:10%;width:12px;height:56px}.molecular-view{top:8%;left:8%;width:32px;height:32px}.control-panel{width:80%}}@media (min-width:1025px){.beaker{width:48px;height:56px}.burette{width:8px;height:64px}.ph-meter{right:15%;width:12px;height:64px}.molecular-view{top:10%;left:10%;width:32px;height:32px}.control-panel{width:24rem}}@keyframes bubble{0%{transform:translateY(0);opacity:.7}to{transform:translateY(-100px);opacity:0}}.bubble{animation:bubble 3s ease-out forwards}@keyframes drop{0%{transform:translateY(0)}to{transform:translateY(150px)}}.drop{animation:drop 1s ease-in forwards}.panel-enter{transform:translateX(100%)}.panel-enter-active{transition:transform .3s}.panel-enter-active,.panel-exit{transform:translateX(0)}.panel-exit-active{transform:translateX(100%);transition:transform .3s}