@media(max-width:760px){
  body{padding-bottom:calc(76px + env(safe-area-inset-bottom))}
  .demo-ribbon{height:24px;font-size:9px}
  .topbar{height:60px;padding:0 16px;top:0}
  .brand{font-size:18px}.brand-mark{width:31px;height:31px}
  .mobile-nav{height:calc(68px + env(safe-area-inset-bottom));padding:0 4px env(safe-area-inset-bottom);grid-template-columns:repeat(5,1fr);z-index:50;isolation:isolate;pointer-events:auto}
  .mobile-nav a,.mobile-nav button{min-width:0;min-height:48px;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:9px;font-weight:700;gap:4px;position:relative;pointer-events:auto;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
  .mobile-nav a span,.mobile-nav button span,.mobile-nav a:after,.mobile-nav button:after{pointer-events:none}
  .mobile-nav a span,.mobile-nav button span{font-size:18px;line-height:1}
  .mobile-nav a.active,.mobile-nav button.active{color:#c1a4ff}
  .mobile-nav a.active:after,.mobile-nav button.active:after{content:"";position:absolute;top:2px;width:24px;height:3px;background:var(--violet);border-radius:0 0 4px 4px}
  .mobile-menu-backdrop{background:#000b;backdrop-filter:blur(3px)}
  .mobile-menu{padding-bottom:calc(88px + env(safe-area-inset-bottom));max-height:88vh;pointer-events:none;visibility:hidden}
  .mobile-menu.open{pointer-events:auto;visibility:visible}
  .mobile-menu:before{content:"";display:block;width:36px;height:4px;background:#4a4f5b;border-radius:9px;margin:-10px auto 16px}
  .mobile-menu-grid a{min-height:72px}
  .mobile-menu-grid strong{font-size:13px}.mobile-menu-grid small{font-size:10px;line-height:1.35}
  .shell{padding-left:16px;padding-right:16px}
  .page-head .button{width:100%}
  .toast{bottom:calc(82px + env(safe-area-inset-bottom))}
}
@media(max-width:370px){
  .mobile-nav a,.mobile-nav button{font-size:8px}
  .mobile-nav a span,.mobile-nav button span{font-size:17px}
  .mobile-menu-grid{grid-template-columns:1fr}
}