/* Homepage navigation shared by React and generated documents. */
@font-face { font-family: Switzer; src: url('/fonts/switzer-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: Switzer; src: url('/fonts/switzer-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }
.studio-nav {
  --studio-bg: #101113; --studio-line: #31343b; --studio-ink: #eeeff2;
  --studio-muted: #b0b3bd; --studio-faint: #9297a3; --studio-radius: 3px;
  font-family: Switzer, sans-serif; font-size: 16px; font-weight: 400; line-height: 1.6; color: var(--studio-ink);
}
.studio-nav *, .studio-nav *::before, .studio-nav *::after { box-sizing: border-box; }
.studio-nav a { text-decoration: none; color: inherit; transition: color 180ms, background-color 180ms, border-color 180ms; }
.studio-nav button { margin: 0; padding: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; border-radius: 0; }
.studio-nav svg { display: block; flex: none; }
.studio-nav .studio-arrow { width: 20px; height: 20px; }
.studio-nav :focus-visible { outline: 2px solid #5b8cff; outline-offset: 5px; }
.studio-nav .studio-nav-inner { width: 100%; max-width: 1440px; margin-inline: auto; padding-inline: 64px; }
.studio-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--studio-bg);
  border-bottom: 1px solid var(--studio-line);
}
.studio-nav .studio-nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 88px;
  gap: 25px;
  position: relative;
}
.studio-nav .studio-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  line-height: 1.15;
  flex-shrink: 0;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.04em;
}
.studio-nav .studio-brand > svg {
  width: 38px;
  height: 38px;
}
.studio-nav .brand-descriptor {
  display: block;
  margin-top: 5px;
  font-size: 10px;
  letter-spacing: 0.035em;
  color: var(--studio-muted);
  font-weight: 400;
}
.studio-nav .desktop-links {
  display: flex;
  align-items: center;
  gap: 27px;
  margin-left: auto;
}
.studio-nav .desktop-links > a {
  font-size: 13px;
  color: var(--studio-muted);
  padding-block: 12px;
}
.studio-nav .desktop-links > a:hover {
  color: var(--studio-ink);
}
.studio-nav .nav-actions {
  display: flex;
  align-items: center;
  gap: 28px;
}
.studio-nav .studio-languages {
  display: flex;
  gap: 3px;
}
.studio-nav .studio-languages a {
  color: var(--studio-faint);
  font-size: 11px;
  display: grid;
  place-items: center;
  min-width: 30px;
  min-height: 44px;
}
.studio-nav .studio-languages a[aria-current] {
  color: var(--studio-ink);
}
.studio-nav .nav-book {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border: 1px solid #60636b;
  border-radius: var(--studio-radius);
  padding: 10px 16px;
  min-height: 44px;
  font-size: 13px;
}
.studio-nav .nav-book:hover {
  background: var(--studio-ink);
  color: var(--studio-bg);
}
.studio-nav .studio-menu-button {
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--studio-line);
}
.studio-nav .studio-mobile-menu[hidden] {
  display: none;
}
.studio-nav .studio-mobile-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--studio-bg);
  padding: 16px 28px 28px;
  border-bottom: 1px solid var(--studio-line);
  box-shadow: 0 20px 30px #0003;
}
.studio-nav .studio-mobile-menu > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 22px;
  padding: 15px 0;
  border-bottom: 1px solid var(--studio-line);
}
.studio-nav .menu-lines {
  display: grid;
  gap: 6px;
  width: 18px;
  margin: auto;
}
.studio-nav .menu-lines i {
  display: block;
  height: 1px;
  background: currentColor;
  transition: transform 180ms;
}
.studio-nav .menu-lines.is-open i:first-child {
  transform: translateY(3.5px) rotate(45deg);
}
.studio-nav .menu-lines.is-open i:last-child {
  transform: translateY(-3.5px) rotate(-45deg);
}
@media (max-width: 1200px) {
  .studio-nav .desktop-links {
    gap: 20px;
  }
  .studio-nav .nav-actions {
    gap: 18px;
  }
  .studio-nav .studio-nav-inner {
    gap: 20px;
  }
  .studio-nav .studio-nav-inner { padding-inline: 40px; }
}
@media (max-width: 1099px) {
  .studio-nav .desktop-links {
    display: none;
  }
  .studio-nav .nav-actions {
    margin-left: auto;
  }
  .studio-nav .studio-nav-inner {
    height: 78px;
  }
  .studio-nav .studio-menu-button {
    display: block;
  }
}
@media (max-width: 767px) {
  .studio-nav .nav-actions {
    gap: 12px;
  }
  .studio-nav .studio-nav-inner {
    height: 72px;
  }
  .studio-nav .studio-brand {
    font-size: 20px;
  }
  .studio-nav .studio-brand > svg {
    width: 30px;
    height: 30px;
  }
  .studio-nav .brand-descriptor {
    font-size: 9px;
  }
  .studio-nav .nav-book {
    display: none;
  }
  .studio-nav .studio-languages a {
    min-width: 28px;
  }
  .studio-nav .studio-nav-inner { padding-inline: 24px; }
}
@media (prefers-reduced-motion: reduce) { .studio-nav a, .studio-nav .menu-lines i { transition: none; } }

.studio-nav .studio-mobile-menu { max-height: calc(100dvh - 72px); overflow-y: auto; overscroll-behavior: contain; }