.tube>.base>.text,.tube>.wage{font-family:var(--font-titles)}.tube>.fill::after,.tube>.fill::before{content:"";width:40%;background-color:var(--fill-color)}.tubes{margin-inline:auto;display:flex;flex-wrap:wrap;padding:1rem 2rem;justify-content:center;background:var(--white);width:75%}.tube{--width:4rem;--skew:.5rem;--anim-duration:3s;width:20%;aspect-ratio:1/4.5;margin-top:var(--skew);border-top-left-radius:50% var(--skew);border-top-right-radius:50% var(--skew);display:grid;grid-template-rows:max-content auto max-content;position:relative;height:350px;--width:calc(5vw + 0.6rem);--skew:calc(.3vw + 0.1rem)}.tube::before{--blur:4px;content:'';position:absolute;width:calc(100% + var(--width) * .25);z-index:-1;right:var(--blur);bottom:0;height:calc(var(--skew) * 2);border-radius:inherit;filter:blur(var(--blur))}.tube>.wage{width:100%;display:flex;justify-content:center;position:absolute;font-weight:500;text-align:center}.tube>.base{border-bottom-left-radius:inherit;border-bottom-right-radius:inherit;background-color:var(--tube-color);position:relative;display:grid;justify-items:center;text-align:center;padding-top:14px;padding-bottom:calc(var(--width) * .1);overflow:hidden}.tube>.base>.text{line-height:1;font-size:14px;font-weight:600;color:var(--fill-color);position:relative}.tube>.base>.text>*{position:absolute;font-size:.5em}.tube>.fill{display:flex;justify-content:center;margin-top:calc(var(--skew) * -1);position:relative;z-index:1;--glas-gradient:linear-gradient(
    to right,
    rgb(0 0 0 / .25),
    transparent 10% 15%,
    rgb(255 255 255 / .5) 20%,
    transparent 50% 90%,
    rgb(0 0 0 / .125) 
);--background-image:var(--glas-gradient)}.tube.animated>.fill::after,.tube.animated>.wage{animation:fill-after var(--anim-duration) linear forwards}.tube.animated>.fill::before{animation:fill-before var(--anim-duration) linear forwards}.tube>.fill::before{position:absolute;--fill-start:var(--skew);--fill-end:calc(var(--percent) * 1% + var(--skew));height:var(--fill-start);bottom:calc(var(--skew) * -1);border-bottom-left-radius:50% var(--skew);border-bottom-right-radius:50% var(--skew);background-image:var(--glas-gradient),radial-gradient(ellipse 100% calc(var(--skew) * 2) at center calc(100% - var(--skew)),rgb(255 255 255 /.125) calc(50% - 1px),transparent 50%),linear-gradient(to right,rgb(0 0 0 / .25),transparent 50% 70%,rgb(0 0 0 / .25))}.tube>.fill::after{position:absolute;height:calc(var(--skew) * 2);border-radius:50%;--fill-start:calc(var(--skew) * -1);--fill-end:calc(var(--percent) * 1% - var(--skew));bottom:var(--fill-start);background-image:var(--glas-gradient),linear-gradient(to left,rgb(0 0 0 / .25),transparent 50%)}.tube>.wage{z-index:999;--fill-start:calc(var(--skew) * 8);--fill-end:calc(var(--percent) * 1% + (var(--skew) * 6.5));bottom:var(--fill-start)}@keyframes fill-before{to{height:var(--fill-end)}}@keyframes fill-after{to{bottom:var(--fill-end)}}@media (max-width:950px){.tubes{width:100%}.tube>.base>.text{font-size:14px}}@media (max-width:700px){.tubes{padding:1rem .6rem}.tube{height:300px}.tube>.wage{font-size:14px}.tube>.base>.text{font-size:12px}}@media (max-width:600px){.tubes{padding:1rem .5rem}.tube>.wage{font-size:12px}.tube>.base>.text{font-size:10px}}@media (max-width:500px){.tube{height:200px}.tube>.wage{font-size:11px}.tube>.base>.text{font-size:9px}}