/* ax.trina.app navbar for /docs/: generated by the website's scripts/site-nav.mjs from src/styles/tokens.css and
   src/styles/base.css (site-nav part), scoped to .sitenav. Do not edit here. */
@font-face { font-family: "Geist"; src: url("Geist-Variable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
.sitenav {
  color-scheme: light;
  --bg: #fcfbf8;
  --bg-soft: #f6f2ea;
  --bg-tint: #f9f6f0;
  --bg-elev: #ffffff;
  --card: #ffffff;
  --inset: #f3efe7;
  --fg: #14110f;
  --fg-muted: #514b45;
  --fg-faint: #6b645d;
  --border: #e9e3d8;
  --border-strong: #d8d0c3;
  --hair: rgba(20, 17, 15, 0.07);
  --accent: #c43d0a;
  --accent-strong: #a3320a;
  --accent-soft: #fdf0e8;
  --accent-fg: #14110f;
  --accent-grad: linear-gradient(100deg, #b8380a 0%, #de470f 60%, #f0561a 100%);
  --signal: #ff5b1f;
  --signal-hover: #ff7440;
  --signal-fg: #14110f;
  --glow: rgba(255, 91, 31, 0.2);
  --glow-2: rgba(255, 170, 90, 0.16);
  --btn: #14110f;
  --btn-fg: #fcfbf8;
  --btn-hover: #2b2622;
  --ok: #2f7a4f;
  --ok-soft: #e8f3ec;
  --warn: #8a5300;
  --warn-soft: #fdf3e2;
  --danger: #b42318;
  --danger-soft: #fdecea;
  --grid: rgba(20, 17, 15, 0.05);
  --dot: rgba(20, 17, 15, 0.09);
  --logo-ink: #14110f;
  --logo-top: #ff5b1f;
  --shadow-sm: 0 1px 2px rgba(20, 17, 15, 0.05);
  --shadow: 0 1px 2px rgba(20, 17, 15, 0.04), 0 10px 30px -10px rgba(20, 17, 15, 0.14);
  --shadow-lg: 0 2px 4px rgba(20, 17, 15, 0.04), 0 30px 80px -20px rgba(40, 24, 14, 0.26);
  --cta: var(--signal);
  --cta-fg: var(--signal-fg);
  --cta-hover: var(--signal-hover);
  --radius: 14px;
  --radius-lg: 22px;
  --radius-sm: 9px;
  --max: 1200px;
  --gutter: 24px;
  
  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", "Apple SD Gothic Neo",
    "Noto Sans KR", "Malgun Gothic", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-sans-ko: "Geist", "Pretendard", ui-sans-serif, system-ui, -apple-system, "Segoe UI", "Apple SD Gothic Neo",
    "Noto Sans KR", "Malgun Gothic", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "D2Coding",
    "Noto Sans Mono CJK KR", monospace;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .sitenav {
    color-scheme: dark;
    --bg: #0e0c0b;
    --bg-soft: #151210;
    --bg-tint: #110f0d;
    --bg-elev: #1a1714;
    --card: #151210;
    --inset: #1d1916;
    --fg: #f6f2ea;
    --fg-muted: #b3aaa0;
    --fg-faint: #958c82;
    --border: rgba(246, 242, 234, 0.08);
    --border-strong: rgba(246, 242, 234, 0.15);
    --hair: rgba(246, 242, 234, 0.06);
    --accent: #ff6a33;
    --accent-strong: #ff8a5c;
    --accent-soft: rgba(255, 106, 51, 0.12);
    --accent-fg: #14110f;
    --accent-grad: linear-gradient(100deg, #ff6a33 0%, #ff8a4c 55%, #ffab73 100%);
    --signal: #ff6a33;
    --signal-hover: #ff8352;
    --signal-fg: #14110f;
    --glow: rgba(255, 106, 51, 0.22);
    --glow-2: rgba(255, 160, 80, 0.12);
    --btn: #f6f2ea;
    --btn-fg: #14110f;
    --btn-hover: #e3ddd2;
    --ok: #7fcf9a;
    --ok-soft: rgba(127, 207, 154, 0.12);
    --warn: #f0b45a;
    --warn-soft: rgba(240, 180, 90, 0.1);
    --danger: #ff8b7e;
    --danger-soft: rgba(255, 139, 126, 0.1);
    --grid: rgba(246, 242, 234, 0.045);
    --dot: rgba(246, 242, 234, 0.08);
    --logo-ink: #f6f2ea;
    --logo-top: #ff6a33;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 30px -10px rgba(0, 0, 0, 0.6);
    --shadow-lg: 0 2px 4px rgba(0, 0, 0, 0.4), 0 30px 80px -20px rgba(0, 0, 0, 0.8);
  }
}
:root[data-theme="dark"] .sitenav {
  color-scheme: dark;
  --bg: #0e0c0b;
  --bg-soft: #151210;
  --bg-tint: #110f0d;
  --bg-elev: #1a1714;
  --card: #151210;
  --inset: #1d1916;
  --fg: #f6f2ea;
  --fg-muted: #b3aaa0;
  --fg-faint: #958c82;
  --border: rgba(246, 242, 234, 0.08);
  --border-strong: rgba(246, 242, 234, 0.15);
  --hair: rgba(246, 242, 234, 0.06);
  --accent: #ff6a33;
  --accent-strong: #ff8a5c;
  --accent-soft: rgba(255, 106, 51, 0.12);
  --accent-fg: #14110f;
  --accent-grad: linear-gradient(100deg, #ff6a33 0%, #ff8a4c 55%, #ffab73 100%);
  --signal: #ff6a33;
  --signal-hover: #ff8352;
  --signal-fg: #14110f;
  --glow: rgba(255, 106, 51, 0.22);
  --glow-2: rgba(255, 160, 80, 0.12);
  --btn: #f6f2ea;
  --btn-fg: #14110f;
  --btn-hover: #e3ddd2;
  --ok: #7fcf9a;
  --ok-soft: rgba(127, 207, 154, 0.12);
  --warn: #f0b45a;
  --warn-soft: rgba(240, 180, 90, 0.1);
  --danger: #ff8b7e;
  --danger-soft: rgba(255, 139, 126, 0.1);
  --grid: rgba(246, 242, 234, 0.045);
  --dot: rgba(246, 242, 234, 0.08);
  --logo-ink: #f6f2ea;
  --logo-top: #ff6a33;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 30px -10px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 2px 4px rgba(0, 0, 0, 0.4), 0 30px 80px -20px rgba(0, 0, 0, 0.8);
}
.sitenav .zone-dark {
  color-scheme: dark;
  --bg: #0e0c0b;
  --bg-soft: #151210;
  --bg-tint: #110f0d;
  --bg-elev: #1a1714;
  --card: #151210;
  --inset: #1d1916;
  --fg: #f6f2ea;
  --fg-muted: #b3aaa0;
  --fg-faint: #958c82;
  --border: rgba(246, 242, 234, 0.08);
  --border-strong: rgba(246, 242, 234, 0.15);
  --hair: rgba(246, 242, 234, 0.06);
  --accent: #ff6a33;
  --accent-strong: #ff8a5c;
  --accent-soft: rgba(255, 106, 51, 0.12);
  --accent-fg: #14110f;
  --accent-grad: linear-gradient(100deg, #ff6a33 0%, #ff8a4c 55%, #ffab73 100%);
  --signal: #ff6a33;
  --signal-hover: #ff8352;
  --signal-fg: #14110f;
  --glow: rgba(255, 106, 51, 0.22);
  --glow-2: rgba(255, 160, 80, 0.12);
  --btn: #f6f2ea;
  --btn-fg: #14110f;
  --btn-hover: #e3ddd2;
  --ok: #7fcf9a;
  --ok-soft: rgba(127, 207, 154, 0.12);
  --warn: #f0b45a;
  --warn-soft: rgba(240, 180, 90, 0.1);
  --danger: #ff8b7e;
  --danger-soft: rgba(255, 139, 126, 0.1);
  --grid: rgba(246, 242, 234, 0.045);
  --dot: rgba(246, 242, 234, 0.08);
  --logo-ink: #f6f2ea;
  --logo-top: #ff6a33;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 30px -10px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 2px 4px rgba(0, 0, 0, 0.4), 0 30px 80px -20px rgba(0, 0, 0, 0.8);
}
.sitenav .zone-dark { --cta: var(--signal); --cta-fg: var(--signal-fg); --cta-hover: var(--signal-hover); background: var(--bg); color: var(--fg); }

.sitenav *, .sitenav *::before, .sitenav *::after { box-sizing: border-box; }
.sitenav { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 80px; }
@media (prefers-reduced-motion: reduce) {
.sitenav { scroll-behavior: auto; }
}
.sitenav {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
html[lang="ko"] .sitenav { --font-sans: var(--font-sans-ko); }
.sitenav [lang="ko"] { font-family: var(--font-sans-ko); }
html[lang="ko"] .sitenav { word-break: keep-all; overflow-wrap: anywhere; line-height: 1.65; }
.sitenav img, .sitenav svg { display: block; max-width: 100%; }
.sitenav a { color: inherit; }
.sitenav code, .sitenav pre, .sitenav kbd { font-family: var(--font-mono); }
.sitenav h1, .sitenav h2 { text-wrap: balance; }
.sitenav p { text-wrap: pretty; }
.sitenav h1, .sitenav h2, .sitenav h3 { margin: 0; letter-spacing: -0.02em; line-height: 1.15; font-weight: 600; }
.sitenav p { margin: 0; }
.sitenav ul, .sitenav ol { margin: 0; padding: 0; list-style: none; }
.sitenav figure, .sitenav blockquote { margin: 0; }
.sitenav ::selection { background: color-mix(in srgb, var(--accent) 28%, transparent); }
.sitenav :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.sitenav .sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.sitenav .skip {
  position: absolute; left: 12px; top: -48px; z-index: 100; padding: 8px 12px; border-radius: var(--radius-sm);
  background: var(--btn); color: var(--btn-fg); text-decoration: none; font-weight: 600;
}
.sitenav .skip:focus { top: 12px; }
.sitenav .container { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
@media (max-width: 640px) {
.sitenav { --gutter: clamp(22px, 7.2vw, 28px); }
}
.sitenav .mark-side { fill: var(--logo-ink); stroke: var(--logo-ink); }
.sitenav .mark-top { fill: var(--logo-top); }
.sitenav .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 18px; border-radius: 10px; border: 1px solid transparent;
  font: inherit; font-size: 15px; font-weight: 550; line-height: 1; text-decoration: none; cursor: pointer;
  white-space: nowrap; transition: background-color 0.15s, border-color 0.15s, color 0.15s, transform 0.15s;
}
.sitenav .btn svg { width: 17px; height: 17px; flex: none; }
.sitenav .btn-primary {
  background: var(--cta); color: var(--cta-fg);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 1px 2px rgba(0, 0, 0, 0.2), 0 6px 16px -6px rgba(0, 0, 0, 0.35);
}
.sitenav .btn-primary:hover { background: var(--cta-hover); }
.sitenav .btn-primary:active, .sitenav .btn-secondary:active { transform: translateY(1px); }
.sitenav .btn-primary:focus-visible { outline-color: var(--fg); }
.sitenav .btn-primary svg { transition: transform 0.15s; }
.sitenav .btn-primary:hover svg { transform: translateX(2px); }
.sitenav .btn-secondary { background: var(--bg-elev); color: var(--fg); border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.sitenav .btn-secondary:hover { border-color: var(--fg-faint); }
.sitenav .btn-sm { min-height: 38px; padding: 0 14px; font-size: 14px; border-radius: 9px; }
.sitenav .btn-lg { min-height: 50px; padding: 0 22px; font-size: 16px; border-radius: 12px; }
.sitenav .btn-block { width: 100%; }
.sitenav .zone-dark .btn-secondary { background: rgba(255, 255, 255, 0.06); color: var(--fg); border-color: rgba(255, 255, 255, 0.2); box-shadow: none; }
.sitenav .zone-dark .btn-secondary:hover { border-color: rgba(255, 255, 255, 0.45); }
@media (prefers-reduced-motion: reduce) {
.sitenav .btn, .sitenav .btn svg { transition: none; }
}
.sitenav .nav {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  
  -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--hair);
}
.sitenav .nav-inner { display: flex; align-items: center; gap: 20px; height: 64px; }
.sitenav .logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 650; letter-spacing: -0.03em; font-size: 17px; }
.sitenav .logo svg { width: 26px; height: 26px; flex: none; }
.sitenav .logo span { white-space: nowrap; }
.sitenav .nav-links { display: flex; align-items: center; gap: 0; margin-left: 8px; }
.sitenav .nav-links a {
  padding: 8px 10px; border-radius: 8px; font-size: 14.5px; color: var(--fg-muted); text-decoration: none; font-weight: 450;
  white-space: nowrap;
}
.sitenav .nav-links a:hover { color: var(--fg); background: var(--bg-soft); }
.sitenav .nav-gh { width: 15px; height: 15px; display: inline-block; vertical-align: -2px; margin-right: 6px; }
.sitenav .footer-tagline { margin-top: 10px; color: var(--fg-muted); font-size: 14px; }
.sitenav .nav-right { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.sitenav .icon-btn {
  display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 8px;
  border: 1px solid transparent; background: none; color: var(--fg-muted); cursor: pointer; text-decoration: none;
  font: inherit; font-size: 13.5px;
}
.sitenav .icon-btn:hover { color: var(--fg); background: var(--bg-soft); }
.sitenav .icon-btn svg { width: 18px; height: 18px; }
.sitenav .lang-link {
  display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 10px; border-radius: 8px;
  color: var(--fg-muted); text-decoration: none; font-size: 14px; font-weight: 500; white-space: nowrap;
}
.sitenav .lang-link svg { width: 16px; height: 16px; }
.sitenav .nav-signin {
  display: inline-flex; align-items: center; min-height: 38px; padding: 0 12px; border-radius: 8px;
  color: var(--fg); text-decoration: none; font-size: 14.5px; font-weight: 550; white-space: nowrap;
}
.sitenav .nav-signin:hover { background: var(--bg-soft); }
.sitenav .lang-link[lang="ko"] { font-family: var(--font-sans); }
.sitenav .lang-link:hover { color: var(--fg); background: var(--bg-soft); }
.sitenav .theme-icon-dark { display: none; }
:root[data-theme="dark"] .sitenav .theme-icon-dark { display: block; }
:root[data-theme="dark"] .sitenav .theme-icon-light { display: none; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .sitenav .theme-icon-dark { display: block; }
:root:not([data-theme="light"]) .sitenav .theme-icon-light { display: none; }
}
.sitenav .menu-btn { display: none; }
.sitenav .mobile-menu { display: none; }
@media (max-width: 1100px) {
.sitenav .nav-links { display: none; }
.sitenav .menu-btn { display: inline-flex; }
.sitenav .mobile-menu[data-open="true"] {
    display: block; border-top: 1px solid var(--border); background: var(--bg); padding: 8px 0 16px;
    max-height: calc(100vh - 64px); overflow-y: auto;
  }
.sitenav .mobile-menu a:not(.btn) {
    display: block; padding: 12px var(--gutter); text-decoration: none; color: var(--fg); font-size: 16px;
  }
.sitenav .mobile-menu .btn { margin: 8px var(--gutter) 0; width: calc(100% - 2 * var(--gutter)); }
}
@media (max-width: 520px) {
.sitenav .nav-inner { gap: 8px; }
.sitenav .nav-right { gap: 2px; }
.sitenav .nav-right .nav-book, .sitenav .nav-right .nav-signin { display: none; }
}
@media (min-width: 521px) {
.sitenav .mobile-menu .btn { display: none; }
}