AnyRouter public UI chrome

AnyRouter public UI uses one viewport token system: 320 / 375 / 768 / 1024 / 1280. Mobile-first. No overflow-x on the page.

• Tap targets: 44px. Marketing CTAs keep visible labels (do not go icon-only). Vietnamese copy is fine.
• Color: semantic tokens only (background, foreground, border, muted). No raw hex that breaks dark. Test light and dark. Avoid a white flash.
• Skeletons match the final layout. Do not block first paint on a hung Clerk FAPI.
• Playground compact chrome is one 44px row at 375; extra actions go in More.
• Tab, chip, and segmented lists: h-auto min-h-11, overflow-y-hidden, scrollbar-width: none. Horizontal overflow only when chips cannot fit; hide scrollbar chrome.
• Dashboard sidebar overlays below lg and must not crush content. No extra polling. No layout shift from late font/nav.
• /models listing header: H1 and Learn more / Providers / Apps share one row from md (title left, links right); stack below md. Same gutter as the explorer. Compact link hits 44px. No extra max-width on that hero.

Hub: project-anyrouter. Tokens: tech-flat-design-semantic-tokens. Components: tech-shadcn-base.

Why: live QA found icon-only CTAs, stacked playground chrome, and a sidebar that squeezed content on phones. How to apply: design and test at those five widths; keep labels; overflow into More instead of a second toolbar.