/* Shared by the homepage, Engine, Demos and standalone Benchmark. */
@font-face { font-family: "Envora Home"; src: url("/fonts/geist-latin.woff2") format("woff2"); font-style: normal; font-weight: 100 900; font-display: swap; }
.home-header { --home-ink: #141615; --home-accent: #454a40; --home-line: #d4d1c8; color: var(--home-ink); font: 400 16px/1.5 "Envora Home", "Helvetica Neue", Arial, sans-serif; -webkit-font-smoothing: antialiased; text-rendering: geometricPrecision; }
.home-header a { text-decoration: none; }
.home-header button { font: inherit; color: inherit; cursor: pointer; }
.home-header [hidden] { display: none !important; }
.home-header :is(a, button):focus-visible { outline: 2px solid var(--home-accent); outline-offset: 6px; }
.home-header { position: relative; z-index: 5; display: flex; align-items: center; justify-content: space-between; padding: 30px 6.05% 0; }
.home-brand { display: inline-flex; align-items: center; gap: 10px; width: fit-content; flex-shrink: 0; }
.home-brand-symbol { position: relative; width: 50px; height: 50px; overflow: hidden; mix-blend-mode: multiply; }
.home-brand-symbol img { position: absolute; max-width: none; width: 502px; height: auto; left: -228px; top: -94px; }
.home-brand-wordmark { display: block; width: 169px; height: auto; }
.home-navigation { display: flex; align-items: center; gap: clamp(22px, 2.6vw, 40px); }
.home-navigation a { position: relative; font-size: 16px; color: #454741; padding-block: 12px; transition: color 180ms ease; }
.home-navigation a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 5px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 240ms ease; }
.home-navigation a:is(:hover, :focus-visible, [aria-current="page"]) { color: #111; }
.home-navigation a:is(:hover, :focus-visible, [aria-current="page"])::after { transform: scaleX(1); }
.home-menu-button { display: none; }

.shared-site-header { border-bottom: 1px solid #d4d1c8; background: #f7f5f0; }
.shared-site-header .home-header { padding-bottom: 30px; }
.home-navigation.is-open { animation: home-menu-in 200ms ease-out backwards; }
@keyframes home-menu-in { from { transform: translateY(-5px); } to { transform: translateY(0); } }
@media (max-width: 1100px) and (min-width: 901px) {
  .home-header { padding-inline: 4%; }
  .home-navigation { gap: 22px; }
  .home-navigation a { font-size: 14px; }
  .home-brand-wordmark { width: 132px; }
}
@media (max-width: 900px) {
  .home-header { padding: 20px 22px 0; align-items: center; }
  .home-brand { gap: 7px; }
  .home-brand-wordmark { width: 126px; }
  .home-brand-symbol { width: 40px; height: 40px; }
  .home-brand-symbol img { width: 402px; left: -183px; top: -75px; }
  .home-header .home-menu-button { display: grid; place-items: center; width: 44px; height: 44px; border: 0; background: transparent; padding: 8px; }
  .home-navigation { display: none; }
  .home-navigation.is-open { display: flex; flex-direction: column; align-items: stretch; gap: 0; position: absolute; top: 76px; left: 22px; right: 22px; padding: 8px 22px; background: #faf8f3; border: 1px solid var(--home-line); box-shadow: 0 10px 30px #3331; }
  .home-navigation a { font-size: 17px; padding-block: 16px; }

  .shared-site-header .home-header { padding-bottom: 20px; }
}
@media (prefers-reduced-motion: reduce) { .home-header *, .home-header *::before, .home-header *::after { animation: none !important; transition: none !important; } }