.tab-bar{width:clamp(340px,100%,420px);min-width:340px;align-items:end;font-size:1rem;margin-inline:auto;font-family:dearest;margin-block:1.8rem}.tab-bar__bottom__container{width:100%;border-radius:24px;position:relative}.tab-bar__bottom{--left-offset:3%;--top-offset:-140%;--transition:0.3s ease-in-out;width:100%;height:60px;display:flex;color:#fff;filter:contrast(1);border-radius:inherit;background:linear-gradient(45deg,#ff9a9e,#ff55c9,#c2e9fb 80%);background:#5effed;background:linear-gradient(0deg,#fff,#3dabff,#fff);background:linear-gradient(to top,#000,#333,#b7b7b7);z-index:1;border:.5px solid rgba(255,255,255,.178);justify-content:space-around}.tab-bar__bottom__container::before{content:"";position:absolute;inset:-2px;background:linear-gradient(to top,#000,#fff,#000);border-radius:inherit;z-index:-2}.tab{flex-basis:85px;flex-shrink:0;height:100%;user-select:none}.indicator{width:160px;height:100%;position:absolute;top:-25px;left:calc(var(--left-offset) - 10%);z-index:2;color:#000;transition:var(--transition);filter:blur(2px)}.tab label{width:100%;max-width:100%;display:block;text-align:center;height:85%;display:flex;align-items:center;justify-content:center;transition:.5s;position:relative;z-index:20;font-weight:400}input[type=radio]{visibility:hidden;position:absolute}.tab:has(input[type=radio]:checked) label{transform:translateY(calc(var(--top-offset) + 10%));color:#fff}.tab:has(:checked) .circle{animation:fade-up .4s forwards}.circle{border-radius:50%;width:75px;aspect-ratio:1;background-color:#008c8c;background:radial-gradient(#000,#42424265,#fff);background:radial-gradient(circle,#000,#000,#fff);position:absolute;top:var(--top-offset);z-index:10;left:10px;transition:var(--transition);filter:contrast(1.5);transform-origin:left}label:hover{cursor:pointer}@keyframes fade-up{from{opacity:0}to{opacity:1}}.indicator{width:160px;height:100%;position:absolute;top:-25px;left:calc(var(--left-offset) - 11%);z-index:2;color:var(--background);transition:var(--transition);filter:blur(2px)}