/* Kiino glass material: one persistent navigation node, no capture/render loop. */
@media(max-width:640px),(min-width:641px) and (max-width:1024px) and (orientation:portrait){
  :root{--mobile-nav-height:64px;--nav-bottom:max(12px,env(safe-area-inset-bottom));--nav-clearance:calc(var(--mobile-nav-height) + var(--nav-bottom) + 24px)}
  .mobile-nav,.feed-mode .mobile-nav,.feed-mode :is(.creator-dialog,.detail-dialog,.search-dialog)>.mobile-nav{
    --glass-slot:var(--nav-slot,0);position:fixed;left:12px;right:12px;bottom:var(--nav-bottom);width:calc(100% - 24px);max-width:520px;height:var(--mobile-nav-height);margin-inline:auto;padding:6px;gap:4px;isolation:isolate;border:1px solid rgb(255 255 255 / .22);border-radius:var(--radius-pill);background:rgb(20 18 16 / .18);backdrop-filter:blur(16px) saturate(140%) brightness(.48);-webkit-backdrop-filter:blur(16px) saturate(140%) brightness(.48);box-shadow:0 10px 32px rgb(0 0 0 / .4),inset 0 1px 0 rgb(255 255 255 / .15),inset 0 -1px 0 rgb(255 255 255 / .04)
  }
  .mobile-nav:before{content:'';position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:linear-gradient(155deg,rgb(255 255 255 / .12),transparent 42%,rgb(var(--color-accent-rgb) / .035));z-index:-2}
  /* Percentages use the nav padding box; 12px padding + four 4px gaps = 28px.
     Include the lens border in that width so every translated slot stays exact. */
  .mobile-nav:before,.mobile-nav:after{box-sizing:border-box}
  .mobile-nav:after{content:'';position:absolute;top:6px;bottom:6px;left:6px;width:calc((100% - 28px)/5);border-radius:var(--radius-pill);background:linear-gradient(150deg,rgb(8 8 8 / .62),rgb(8 8 8 / .46));border:1px solid rgb(255 255 255 / .18);box-shadow:inset 0 1px 0 rgb(255 255 255 / .12),0 3px 10px rgb(0 0 0 / .12);transform:translateX(calc(var(--glass-slot)*(100% + 4px)));transition:transform 260ms cubic-bezier(.16,1,.3,1);pointer-events:none;z-index:-1}
  .mobile-nav:has([data-nav=menu][aria-expanded=true]){--glass-slot:4}
  .mobile-nav :is(a,button),.feed-mode .mobile-nav :is(a,button){position:relative;flex:1;min-width:44px;min-height:44px;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:0;border:0;border-radius:var(--radius-pill);background:transparent;color:var(--text);text-shadow:none}
  .mobile-nav .icon,.feed-mode .mobile-nav .icon{width:22px;height:22px}
  .mobile-nav .nav-label{font-size:10px;line-height:1.2}
  .mobile-nav .active,.feed-mode .mobile-nav .active,.mobile-nav [aria-expanded=true]{color:var(--lime)}
  .mobile-nav [data-nav=menu]:not(.active):not([aria-expanded=true]) .brand-icon{color:var(--text)}
  .mobile-nav :focus-visible{outline:2px solid var(--lime);outline-offset:1px}
  .mobile-nav :is(a,button):active{background:rgb(255 255 255 / .08)}
  .listing,.account-page{padding-bottom:var(--nav-clearance)}
  .footer{padding-bottom:var(--nav-clearance)}
  .detail-content{padding-bottom:var(--nav-clearance)}
  .creator-dialog,.search-dialog{padding-bottom:var(--nav-clearance);scroll-padding-bottom:var(--nav-clearance)}
  .back-to-top{bottom:calc(var(--mobile-nav-height) + var(--nav-bottom) + 16px)}
  .search-dialog{scroll-padding-top:244px}
  .feed-mode :is(.creator-dialog,.detail-dialog,.search-dialog)>.mobile-nav{display:flex}
  @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.mobile-nav,.feed-mode .mobile-nav,.feed-mode :is(.creator-dialog,.detail-dialog,.search-dialog)>.mobile-nav{background:var(--color-sheet)}}
}
@media(prefers-reduced-motion:reduce){.mobile-nav:after{transition:none}}
@media(prefers-reduced-transparency:reduce){.mobile-nav,.feed-mode .mobile-nav,.feed-mode :is(.creator-dialog,.detail-dialog,.search-dialog)>.mobile-nav{background:var(--color-sheet);backdrop-filter:none;-webkit-backdrop-filter:none}}
.player-dialog>.mobile-nav,.feed-mode .player-dialog>.mobile-nav{display:none}