.nav-item{width:6rem;border-radius:var(--border-radius)}.nav-item--active{--color--icon: var(--color--primary);color:var(--color--text)}.nav-item--active .nav-item__icon{animation:icon-jump .5s forwards cubic-bezier(.34,1.56,.64,1)}@keyframes icon-jump{0%{transform:translateY(0)}50%{transform:translateY(-50%)}to{transform:translateY(0)}}.nav-item a{text-decoration:none;color:inherit}.nav-item__link{display:flex;flex-direction:column;text-align:center;align-items:center;gap:var(--spacing--sm);padding:var(--spacing--sm)}.nav-item__icon svg{width:1.75rem;height:auto;aspect-ratio:1}.nav-item__label{font-size:var(--font-size--sm);font-weight:600}.demo-banner-wrap{font-size:var(--font-size--lg);position:fixed;display:flex;width:100%;bottom:calc(var(--nav-height) + env(safe-area-inset-bottom,0));left:0;padding:.25rem}.demo-banner{border:.125rem dashed var(--color--primary);padding:1rem;width:100%;border-radius:1rem;background:var(--color--bg--secondary)}.demo-banner .wrap{display:flex;justify-content:space-between;align-items:center;gap:1rem}.nav{display:flex;justify-content:space-around;padding:var(--spacing--sm) var(--spacing--sm) calc(var(--spacing--sm) + env(safe-area-inset-bottom,0));background:#fff;border-top:1px solid var(--color--primary);width:100%;z-index:100}