/* Generated by scripts/build-site-header.ts — do not edit.
 * Source of truth: app/globals.css (styling) + app/_lib/site-header.ts (markup).
 */
@font-face {
  font-family: 'Albert Sans';
  src: url('/skill-assets/AlbertSans-VariableFont_wght.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Albert Sans';
  src: url('/skill-assets/AlbertSans-Italic-VariableFont_wght.woff2') format('woff2');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  --coral: #0a6cff;
  --ink: #0d0c0a;
  --ink-faint: #8c8983;
  --line: #dce1e8;
  --line-soft: #eceff4;
  --paper: #ffffff;
  --sans: 'Albert Sans', 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

.container { max-width: 1360px; padding: 0 64px; margin: 0 auto; position: relative; }
.container.wide { max-width: 1480px; }
.site-chrome { /* Fixed so the bar stays pinned to the top and condenses on scroll (was `absolute`, which let it scroll away). At the very top it is a transparent overlay on the hero; past the scroll threshold the inline script adds `.is-condensed`, which shrinks the bar and turns on the Liquid Glass material below. */ position: fixed; top: 0; left: 0; right: 0; z-index: 50; background: transparent; transform: translateY(0); transition: transform 360ms cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 220ms ease, border-color 220ms ease; will-change: transform; }
.site-chrome.is-hidden { transform: translateY(-100%); pointer-events: none; box-shadow: none; }
.nav { /* Explicit 100% (not auto) so the width can animate to the condensed capsule instead of snapping — `auto` widths don't transition. */ width: 100%; /* Inline margins are `auto` in BOTH states so the width shrink stays centered every frame (shrinks toward the middle). If the base were `margin: 0`, the 0 → auto transition isn't interpolable and the left edge stays pinned while the right pulls in — reads as a left-to-right collapse. */ margin-inline: auto; padding: 22px 0; background: transparent; border-bottom: 1px solid transparent; transition: width 420ms cubic-bezier(0.22, 0.61, 0.36, 1), margin 420ms cubic-bezier(0.22, 0.61, 0.36, 1), padding 420ms cubic-bezier(0.22, 0.61, 0.36, 1), border-radius 420ms cubic-bezier(0.22, 0.61, 0.36, 1), background 260ms ease, border-color 260ms ease, box-shadow 260ms ease; }
.nav-glass-defs { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
.site-chrome.is-condensed .nav { /* Detaches from the edges into a centered floating capsule: a gap from the top, side margins, and fully rounded ends. 1280px (not 1080px) so the longest translated nav rows (ja/ru/uk) still hold a single line — the row must never wrap into a second line over the hero. */ margin: 14px auto 0; width: min(1280px, calc(100% - 32px)); padding: 9px 0; border-radius: 999px; border: 1px solid rgba(21, 20, 15, 0.08); background: hsl(0 0% 100% / 0.42); -webkit-backdrop-filter: blur(12px) saturate(1.4); backdrop-filter: blur(12px) saturate(1.4); backdrop-filter: url(#nav-liquid-glass) blur(7px) saturate(1.4); box-shadow: inset 0 0 2px 1px rgba(255, 255, 255, 0.55), inset 0 0 10px 4px rgba(255, 255, 255, 0.22), 0 6px 24px rgba(17, 17, 26, 0.06), 0 12px 40px rgba(17, 17, 26, 0.05); }
.nav > .container { transition: padding 420ms cubic-bezier(0.22, 0.61, 0.36, 1); }
.site-chrome.is-condensed .nav > .container { max-width: none; padding: 0 28px; }
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
@media (min-width: 1081px) {
  .nav-inner { display: grid; grid-template-columns: 1fr auto 1fr; }
  .nav-inner > .brand { order: 1; justify-self: start; }
  .nav-inner > nav[data-nav-primary] { order: 2; justify-self: center; }
  .nav-inner > .nav-side { order: 3; justify-self: end; }
  .nav-links a { white-space: nowrap; }
}
@media (min-width: 1081px) and (max-width: 1366px) {
  .nav-links { gap: 22px; }
}
.brand { display: inline-flex; align-items: center; gap: 8px; font-family: var(--sans); font-weight: 700; letter-spacing: -0.01em; color: var(--ink); text-decoration: none; /* 17px is the sitewide brand size — keep in sync with .fg-logo, .fgs-brand and .fg-docs-top__name so the lockup never changes scale between pages. */ font-size: 17px; }
.brand-logo { height: 40px; width: auto; display: block; flex: 0 0 auto; transition: height 420ms cubic-bezier(0.22, 0.61, 0.36, 1); }
.site-chrome.is-condensed .brand-logo { height: 33px; }
.brand-mark { /* * Bumped from 36px → 44px (≈22% larger). The new black brand mark * needs the extra optical weight against the wordmark, especially * given the speech-bubble negative space visually shrinks the glyph. * (PR #2588's brand polish, restored on top of #2469.) */ width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.brand-name { white-space: nowrap; }
.brand--merged { gap: 0; }
.brand--merged .brand-fmark { height: 16px; width: auto; flex: none; margin-right: 2px; transform: translateY(-0.5px); }
.brand-mark img { width: 100%; height: 100%; object-fit: contain; display: block; /* Round the corners of the brand glyph (~22% of side, app-icon * silhouette convention) so the solid-fill square reads as a * brand mark next to the wordmark rather than a screenshot. */ border-radius: 10px; }
.brand-meta { font-family: var(--sans); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-faint); line-height: 1.3; margin-left: 4px; border-left: 1px solid var(--line); padding-left: 14px; }
.brand-meta b { display: block; color: var(--ink); font-weight: 600; }
.nav-links { display: flex; gap: 38px; list-style: none; align-items: center; /* Reset the list box explicitly. This header also ships into the * hand-written static pages, which carry no global list reset — there the * UA default ul padding made the bar 18px taller than on the homepage. */ margin: 0; padding: 0; }
.nav-links > li { margin: 0; padding: 0; }
.nav-links a { color: var(--ink); text-decoration: none; font-family: var(--sans); font-size: 14px; font-weight: 500; transition: color 0.18s ease; position: relative; }
.nav-links a:hover { color: var(--coral); }
.nav-links a .num { font-size: 9px; color: var(--ink-faint); position: absolute; top: -7px; right: -16px; letter-spacing: 0.04em; }
.nav-links .nav-amr { display: flex; align-items: center; }
.nav-amr-logo { display: block; height: 22px; width: auto; opacity: 0.85; transition: opacity 0.18s ease; }
.nav-amr a:hover .nav-amr-logo { opacity: 1; }
@media (min-width: 1081px) {
  .site-chrome::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 100vh; z-index: -1; background: rgba(255, 255, 255, 0.62); backdrop-filter: blur(26px) saturate(108%); -webkit-backdrop-filter: blur(26px) saturate(108%); opacity: 0; pointer-events: none; /* Delay the fade-OUT so a brief hover loss (crossing a gap) doesn't flash the blur; opening stays instant via the override below. */ transition: opacity 220ms cubic-bezier(0.23, 1, 0.32, 1) 120ms; }
}
.nav-toggle { display: none; align-items: center; justify-content: center; width: 38px; height: 38px; margin-left: auto; padding: 0; background: transparent; border: 1px solid rgba(26, 26, 26, 0.18); border-radius: 8px; cursor: pointer; color: var(--ink); transition: background 0.18s ease, border-color 0.18s ease; }
.nav-toggle:hover { background: rgba(26, 26, 26, 0.04); border-color: rgba(26, 26, 26, 0.32); }
.nav-toggle-icon,
.nav-toggle-icon::before,
.nav-toggle-icon::after { display: block; width: 18px; height: 2px; background: currentColor; border-radius: 2px; transition: transform 0.18s ease, opacity 0.18s ease; }
.nav-toggle-icon { position: relative; }
.nav-toggle-icon::before,
.nav-toggle-icon::after { content: ''; position: absolute; left: 0; }
.nav-toggle-icon::before { top: -6px; }
.nav-toggle-icon::after { top:  6px; }
.nav.is-open .nav-toggle-icon { background: transparent; }
.nav.is-open .nav-toggle-icon::before { top: 0; transform: rotate(45deg); }
.nav.is-open .nav-toggle-icon::after { top: 0; transform: rotate(-45deg); }
.nav-side { display: inline-flex; align-items: center; gap: 18px; }
.nav-cta { display: inline-flex; align-items: center; gap: 10px; padding: 0; border-radius: 0; background: transparent; color: var(--ink); font-family: var(--sans); font-size: 13px; font-weight: 500; text-decoration: none; white-space: nowrap; flex-shrink: 0; }
.nav-cta [data-github-stars],
.nav-cta [data-github-version] { font-variant-numeric: tabular-nums; }
.nav-cta::after { content: none; }
.nav-cta.ghost { padding: 7px 15px; border-radius: 999px; background: var(--ink); color: var(--paper); transition: background 160ms ease, transform 160ms ease; }
.nav-cta:not(.ghost):hover { color: var(--coral); }
.nav-cta.ghost:hover { background: #2a2723; }
.guest-hero .container { position: relative; z-index: 2; }
.hero > .container { flex: 0 0 auto; }
.hero > .container.hero-grid { flex: 1 1 auto; }
.method > .container { max-width: none; /* Module safe area: 238px left/right (matches the .work module convention). */ padding-inline: 238px; }
@media (max-width: 1180px) {
  .method > .container { padding-inline: 64px; }
}
.testimonial .container { width: auto; max-width: none; padding: 0 238px; margin-inline: auto; }
@media (max-width: 1024px) {
  .testimonial .container { padding: 0 clamp(20px, 9vw, 238px); }
}
.cta .container { max-width: none; padding: 0 238px; }
@media (max-width: 1024px) {
  .cta .container { padding: 0 clamp(20px, 9vw, 120px); }
}
.newsletter .container { max-width: none; padding: 0 238px; }
@media (max-width: 1024px) {
  .newsletter .container { padding: 0 clamp(20px, 9vw, 120px); }
}
.faq .container { max-width: none; padding: 0 238px; }
@media (max-width: 1024px) {
  .faq .container { padding: 0 clamp(20px, 9vw, 120px); }
}
footer .container { max-width: none; padding: 0 238px; }
@media (max-width: 1024px) {
  footer .container { padding: 0 clamp(20px, 9vw, 238px); }
}
.foot-brand .brand { margin-bottom: 18px; }
@media (prefers-reduced-motion: reduce) {
  .site-chrome { transition: none !important; }
}
@media (max-width: 1280px) {
  .container { padding: 0 44px; }
}
@media (max-width: 1180px) {
  .nav-inner { gap: 18px; }
  .brand-meta { display: none; }
}
.nav-signin { color: var(--ink); font-family: var(--sans); font-size: 14px; font-weight: 500; text-decoration: none; white-space: nowrap; transition: color 0.18s ease; }
.nav-signin:hover { color: var(--coral); }
.nav-primary-cta { display: inline-flex; align-items: center; padding: 9px 18px; border-radius: 999px; background: var(--ink); color: var(--paper); font-family: var(--sans); font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; transition: background 160ms ease, transform 160ms ease; }
.nav-primary-cta:hover { background: var(--coral); }
.nav-primary-cta[hidden],
[data-fg-create][hidden],
[data-fg-create-mobile][hidden],
.nav-drawer-cta[hidden],
.nav.is-signed-in .nav-primary-cta,
.nav.is-signed-in [data-fg-create],
.nav.is-signed-in [data-fg-create-mobile] { display: none !important; }
.nav-mobile-only { display: none; }
.nav-mobile-only[hidden] { display: none !important; }
@media (max-width: 1080px) {
  .nav-toggle { display: inline-flex; }
  .brand { white-space: nowrap; }
  .nav-side .nav-cta.ghost { display: none; }
  .nav { position: sticky; }
  .nav > .nav-inner > nav[data-nav-primary] { position: absolute; top: 100%; left: 0; right: 0; /* Drop below the bar and span the full capsule width. The panel is positioned within `.nav` (which IS the condensed capsule), so left:0 / right:0 with no side margins makes its edges line up with the bar. */ margin: 10px 0 0; padding: 0; pointer-events: none; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s; /* Solid white card (was translucent Liquid Glass): an opaque surface so page content never shows through it, and no backdrop blur. Keeps the hairline border, rounded corners, and a layered drop shadow for lift. */ background: #fff; border: 1px solid rgba(21, 20, 15, 0.08); border-radius: 22px; box-shadow: 0 6px 24px rgba(17, 17, 26, 0.06), 0 12px 40px rgba(17, 17, 26, 0.05); /* The flattened nav list is taller than the screen, so cap the card to the space below the bar and let it scroll internally instead of spilling off the bottom. The `100%` resolves to the header height (the card's positioned containing block); subtract the 10px top gap + a bottom gap. overflow-x:hidden locks the card so it can't be dragged left/right — overflow-y:auto alone would compute overflow-x to `auto` and let any sub-pixel overflow scroll horizontally. */ max-height: calc(100vh - 100% - 28px); max-height: calc(100dvh - 100% - 28px); overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  .nav.is-open > .nav-inner > nav[data-nav-primary] { pointer-events: auto; opacity: 1; visibility: visible; transform: translateY(0); }
  .nav-links { flex-direction: column; align-items: stretch; gap: 0; padding: 12px 24px 20px 24px; }
  .nav-links li { border-bottom: 1px solid rgba(26, 26, 26, 0.06); }
  .nav-links li:last-child { border-bottom: none; }
  .nav-links a { display: block; padding: 14px 0; font-size: 16px; }
  .nav-links a .num { position: static; margin-left: 6px; font-size: 11px; }
  .nav-mobile-only { display: block; }
  .nav-mobile-only[hidden] { display: none !important; }
  .nav-links .nav-drawer-cta,
  .nav-links .nav-drawer-signin { font-weight: 600; }
}
@media (max-width: 1080px) {
  .container { padding: 0 32px; }
}
@media (max-width: 880px) {
  .container { padding: 0 24px; }
  .cta .container { padding: 0 16px; }
  .nav { padding: 16px 0; }
  .brand-meta { display: none; }
  .nav-side .nav-cta.ghost { display: none; }
}
@media (max-width: 640px) {
  .cta .container { padding: 0 14px; }
}
@media (max-width: 560px) {
  .container { padding: 0 16px; }
  .nav-inner { gap: 12px; }
  .brand { font-size: 16px; gap: 8px; }
  .brand-mark { width: 32px; height: 32px; font-size: 16px; }
  .brand-logo { height: 34px; }
}
@media (max-width: 420px) {
  .container { padding: 0 14px; }
}
.plugin-shell .nav { border-bottom: 1px solid var(--line-soft); }
.guest-hero > .container { position: relative; z-index: 1; }