.navigation{position:fixed;bottom:0;left:50%;width:min(100%,440px);height:calc(70px + env(safe-area-inset-bottom));background:#1e293b;display:flex;justify-content:center;align-items:flex-start;border-top:1px solid rgba(255,255,255,.05);z-index:1000;padding-bottom:env(safe-area-inset-bottom);transform:translateX(-50%);box-sizing:border-box}
.navigation ul{display:flex;width:100%;padding:0;margin:0;position:relative}
.navigation ul li{position:relative;list-style:none;width:25%;height:70px;z-index:2}
.navigation ul li a{position:relative;display:flex;justify-content:center;align-items:center;flex-direction:column;width:100%;height:100%;text-align:center;font-weight:500;cursor:pointer;text-decoration:none}
.navigation ul li a .icon{position:relative;display:block;color:#94a3b8;z-index:10;will-change:transform;transition:transform .36s cubic-bezier(.22,1,.36,1),color .24s ease}
.navigation ul li a .icon .mf-svg{width:24px;height:24px}
.navigation ul li.active a .icon svg{transform:none!important}
.navigation ul li.active a .icon{transform:translateY(-32px);color:#fff;filter:drop-shadow(0 4px 6px rgba(0,0,0,.3))}
.navigation ul li a .text{position:absolute;bottom:12px;color:#3b82f6;font-size:10px;font-weight:700;letter-spacing:.05em;opacity:0;transform:translateY(14px);will-change:transform,opacity;transition:transform .32s cubic-bezier(.22,1,.36,1),opacity .2s ease}
.navigation ul li.active a .text{opacity:1;transform:translateY(0)}
.navigation .indicator{position:absolute;top:-28px;left:62.5%;width:56px;height:56px;background:#3b82f6;border:6px solid #0f172a;border-radius:50%;transform:translateX(-50%);will-change:left;transition:left .38s cubic-bezier(.22,1,.36,1);z-index:1;box-shadow:0 5px 15px rgba(59,130,246,.4)}
.navigation .indicator:before,.navigation .indicator:after{content:"";position:absolute;top:50%;width:20px;height:20px;background:transparent}
.navigation .indicator:before{left:-19px;border-top-right-radius:20px;box-shadow:1px -10px 0 0 #0f172a}
.navigation .indicator:after{right:-19px;border-top-left-radius:20px;box-shadow:-1px -10px 0 0 #0f172a}
@media(max-width:240px){.navigation .indicator{top:-22px;width:44px;height:44px;border-width:5px}.navigation ul li.active a .icon{transform:translateY(-25px)}.navigation .indicator:before,.navigation .indicator:after{display:none}.navigation ul li a .icon .mf-svg{width:19px;height:19px}.navigation ul li a .text{font-size:8px}}
@media(min-width:640px){.navigation{bottom:5vh;border-radius:0 0 30px 30px}}
@media(prefers-reduced-motion:reduce){.navigation .indicator,.navigation ul li a .icon,.navigation ul li a .text{transition:none}}