html body .site-header .header-get-started{display:inline-flex;align-items:center;justify-content:center;gap:12px;padding:11px 18px;border:1px solid #628f8b;border-radius:8px;background:#1b3535;color:#e2f0f0;font:500 14px/1.4 Geist,system-ui,sans-serif;text-decoration:none;white-space:nowrap}html body .site-header .header-get-started:hover{background:#284847}html body .site-header .header-get-started:focus-visible{outline:2px solid #8fd0d3;outline-offset:4px}@media(max-width:600px){html body .site-header .header-get-started{padding:9px 12px;gap:8px;font-size:13px}}

/* ── 翻译兼容：页眉 ──────────────────────────────────────────
   页眉是 grid：auto | minmax(0,1fr) | auto。中间那列本来就能压缩，
   但导航项是一行不折的，翻译后标签变长会顶出中间列，把右边的
   Get Started 推到屏幕外，整页出现横向滚动。
   让导航自己能横向滚（英文下永远塞得下，不会出现滚动条），
   页面就不会再被顶宽。 */
html body .site-header .main-nav{min-width:0;scrollbar-width:none;-ms-overflow-style:none}
html body .site-header .main-nav::-webkit-scrollbar{width:0;height:0}
html body .site-header .main-nav>a,
html body .site-header .main-nav>button{flex:0 0 auto}
html body .site-header .header-actions{min-width:0}
html body .site-header .brand .brand-word{white-space:nowrap}

/* ── 只在「页面被翻译过」时才生效的两条 ────────────────────
   判定用三个条件取并集：lang 不再是 en（任何翻译器都会改），
   外加 Chrome 自己打的 translated-ltr / translated-rtl 类。
   这样英文原样渲染是**像素级不变**的 —— 下面这两条都会轻微改变
   文字抗锯齿或断行，放在无条件层里会让英文页面也跟着变。 */
html:not([lang="en"]) body .site-header .main-nav,
html.translated-ltr body .site-header .main-nav,
html.translated-rtl body .site-header .main-nav{
 overflow-x:auto;overflow-y:hidden;
 /* 导航平时是 justify-content:center。一旦内容超宽，居中会把开头那几项
    推到滚动区外、而且滚不回去（溢出被平分到两侧）。safe center 的语义
    正是「放得下就居中，放不下就退回靠左」。 */
 justify-content:safe center}
html:not([lang="en"]) body .site-header,
html.translated-ltr body .site-header,
html.translated-rtl body .site-header{overflow-x:clip}