.site-nav {
  position: fixed !important;
  inset: 0 0 auto 0 !important;
  z-index: 220000 !important;
  height: 80px !important;
  display: grid !important;
  grid-template-columns: 1fr auto 1fr !important;
  align-items: center !important;
  padding: 0 126px !important;
  background: rgba(238, 234, 233, 0.86) !important;
  color: rgb(22, 20, 19) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border-bottom: 0 !important;
  mix-blend-mode: normal !important;
  pointer-events: auto !important;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
}

.site-nav .logo {
  justify-self: start !important;
  color: #37332e !important;
  font-size: 13px !important;
  line-height: 1 !important;
  letter-spacing: -0.02em !important;
  text-transform: uppercase !important;
}

.site-nav .nav-links {
  justify-self: center !important;
  display: flex !important;
  align-items: center !important;
  gap: 32px !important;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
}

.site-nav .nav-links a,
.site-nav .nav-docs a,
.site-nav .nav-separator {
  display: inline-block !important;
  color: rgba(22, 20, 19, 0.56) !important;
  font-size: 11px !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-transform: uppercase !important;
  transition: color 180ms ease, transform 160ms ease !important;
}

.site-nav .nav-links a:hover,
.site-nav .nav-links a.is-active,
.site-nav .nav-docs a:hover {
  color: rgb(22, 20, 19) !important;
}

.site-nav .nav-docs {
  justify-self: end !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 0 !important;
  margin: 0 !important;
}

.site-nav .nav-docs a {
  color: rgb(22, 20, 19) !important;
}

.site-nav .nav-separator {
  color: rgba(22, 20, 19, 0.28) !important;
  user-select: none !important;
}

.site-nav .nav-docs a::after {
  content: attr(data-help);
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: max-content;
  max-width: 180px;
  color: rgba(22, 20, 19, 0.56);
  background: rgba(238, 234, 233, 0.96);
  border: 0;
  padding: 6px 7px;
  font-size: 9px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  text-transform: none;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-3px);
  transition: opacity 160ms ease, transform 160ms ease;
  white-space: normal;
}

.site-nav .nav-docs a { position: relative !important; }
.site-nav .nav-docs a:hover::after,
.site-nav .nav-docs a:focus-visible::after { opacity: 1; transform: translateY(0); }

.site-nav .nav-links a.is-gesture-near,
.site-nav .logo.is-gesture-near,
.site-nav .nav-docs a.is-gesture-near {
  transform: scale(1.35) !important;
}

.shell-mobile-toggle,
.shell-mobile-menu {
  display: none;
}

.gesture-panel {
  position: fixed;
  right: 28px;
  bottom: 27px;
  z-index: 260000;
  width: 196px;
  color: rgb(22, 20, 19);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  pointer-events: auto;
  user-select: none;
}

.gesture-shell {
  overflow: hidden;
  border: 1px solid rgba(22, 20, 19, 0.12);
  border-radius: 22px;
  background: rgba(238, 234, 233, 0.86);
  box-shadow: 0 16px 48px rgba(22, 20, 19, 0.08);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.gesture-topbar {
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 10px 0 19px;
}

.gesture-title { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gesture-kicker { font-size: 8.5px; line-height: 1; letter-spacing: 0.11em; text-transform: uppercase; color: #37332e; }
.gesture-status { font-size: 8px; line-height: 1; color: rgba(22, 20, 19, 0.56); }
.gesture-switch { position: relative; width: 44px; height: 26px; flex: 0 0 auto; }
.gesture-switch input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.gesture-slider { position: absolute; inset: 0; border-radius: 999px; background: rgba(22, 20, 19, 0.16); transition: background 220ms ease; }
.gesture-slider::before { content: ""; position: absolute; width: 22px; height: 22px; left: 2px; top: 2px; border-radius: 50%; background: rgb(248, 245, 244); box-shadow: 0 2px 8px rgba(22, 20, 19, 0.18); transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1); }
.gesture-switch input:checked + .gesture-slider { background: #37332e; }
.gesture-switch input:checked + .gesture-slider::before { transform: translateX(18px); }
.gesture-preview-wrap { padding: 0 8px 8px; max-height: 190px; opacity: 1; transition: max-height 260ms ease, opacity 220ms ease, padding 260ms ease; }
.gesture-preview { position: relative; height: 126px; overflow: hidden; border-radius: 16px; background: rgba(22, 20, 19, 0.08); }
.gesture-preview video,
.gesture-preview canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
.gesture-preview canvas { z-index: 2; pointer-events: none; }
.gesture-collapse,
.gesture-collapse-open { width: 25px; height: 25px; border: 1px solid rgba(22,20,19,.12); border-radius: 999px; background: rgba(238,234,233,.82); color: rgba(22,20,19,.56); cursor: pointer; place-items: center; }
.gesture-collapse { position: absolute; top: 7px; right: 7px; z-index: 4; display: grid; }
.gesture-collapse-open { display: none; }
.gesture-panel.is-collapsed .gesture-preview-wrap,
.gesture-panel:not(.is-running) .gesture-preview-wrap { max-height: 0 !important; opacity: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; overflow: hidden !important; }
.gesture-panel.is-running.is-collapsed .gesture-collapse-open { display: inline-grid; }
.gesture-panel:not(.is-running) .gesture-collapse-open { display: none !important; }
.gesture-cursor {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 2147483647 !important;
  width: 24px;
  height: 24px;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(-100px, -100px, 0) translate(-50%, -50%);
  transition: opacity 160ms ease, width 120ms ease, height 120ms ease, border-color 120ms ease, background 120ms ease, box-shadow 120ms ease;
  border-radius: 999px;
  border: 1px solid var(--accent, #37332e);
  background: rgba(199, 69, 69, 0.10);
  box-shadow: 0 0 0 5px rgba(199, 69, 69, 0.055);
  mix-blend-mode: normal;
}
.gesture-cursor.is-visible { opacity: 1; }
.gesture-cursor.is-pinching,
.gesture-cursor.is-mouse-down {
  width: 16px;
  height: 16px;
  background: var(--accent, #37332e);
  box-shadow: 0 0 0 9px rgba(199, 69, 69, 0.08);
}
.gesture-cursor.is-scrolling {
  width: 30px;
  height: 30px;
  border-color: rgba(255, 255, 255, 0.92);
  background: rgba(255, 255, 255, 0.20);
  box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.08);
}
.gesture-cursor.is-link {
  width: 22px;
  height: 22px;
}
.gesture-cursor.is-card {
  width: 28px;
  height: 28px;
  background: transparent;
  border-color: rgba(50, 50, 50, 0.42);
  box-shadow: none;
}
.gesture-scroll-zone {
  position: fixed;
  left: 50%;
  z-index: 250000;
  width: 104px;
  height: 58px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(22, 20, 19, 0.045);
  border-radius: 999px;
  background: rgba(238, 234, 233, 0.72);
  color: #37332e;
  opacity: 0;
  transform: translateX(-50%) scale(0.96);
  pointer-events: none;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: opacity 180ms ease, transform 180ms ease, border-color 180ms ease;
}
.gesture-scroll-zone-top { top: calc(var(--nav-h, 80px) + 16px); }
.gesture-scroll-zone-bottom { bottom: 26px; }
body.gesture-active .gesture-scroll-zone { opacity: 0.42; }
body.gesture-active .gesture-scroll-zone.is-gesture-hover { opacity: 1; transform: translateX(-50%) scale(1.08); border-color: rgba(22, 20, 19, 0.10); }

@media (max-width: 840px) {
  .site-nav {
    height: 52px !important;
    display: flex !important;
    justify-content: space-between !important;
    padding: 0 16px !important;
  }

  .site-nav .nav-links,
  .site-nav .nav-docs {
    display: none !important;
  }

  .site-nav .logo { font-size: 11px !important; }

  .shell-mobile-toggle {
    position: relative;
    display: block;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    background: transparent;
  }

  .shell-mobile-toggle span {
    position: absolute;
    left: 8px;
    right: 8px;
    height: 1px;
    background: #37332e;
    transition: transform 220ms ease, top 220ms ease;
  }

  .shell-mobile-toggle span:first-child { top: 12px; }
  .shell-mobile-toggle span:last-child { top: 20px; }
  body.shell-menu-open .shell-mobile-toggle span:first-child { top: 16px; transform: rotate(30deg); }
  body.shell-menu-open .shell-mobile-toggle span:last-child { top: 16px; transform: rotate(-30deg); }

  .shell-mobile-menu {
    position: fixed;
    inset: 52px 0 auto;
    z-index: 219999;
    display: grid;
    gap: 10px;
    padding: 24px 18px 30px;
    background: rgba(238, 234, 233, 0.97);
    border-bottom: 0;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-10px);
    transition: opacity 200ms ease, transform 220ms ease;
  }

  body.shell-menu-open .shell-mobile-menu {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }

  .shell-mobile-menu a {
    color: #37332e;
    font-size: 32px;
    line-height: 1;
    letter-spacing: -0.06em;
    text-transform: uppercase;
  }

  .shell-mobile-docs {
    display: flex;
    gap: 20px;
    margin-top: 12px;
    padding-top: 14px;
    border-top: 0;
  }

  .shell-mobile-docs a {
    font-size: 14px !important;
    letter-spacing: -0.025em !important;
  }

  .gesture-panel { right: 14px; bottom: 14px; width: min(232px, calc(100vw - 28px)); }
}


/* Requested global refinements */
.site-nav.scrolled { border-bottom-color: transparent !important; }

body[data-no-gesture="true"] .site-nav {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  color: rgba(248, 246, 244, 0.88) !important;
  mix-blend-mode: normal !important;
}
body[data-no-gesture="true"] .site-nav .logo,
body[data-no-gesture="true"] .site-nav .nav-links a,
body[data-no-gesture="true"] .site-nav .nav-docs a,
body[data-no-gesture="true"] .site-nav .nav-separator {
  color: rgba(248, 246, 244, 0.88) !important;
  text-shadow: 0 1px 16px rgba(0,0,0,0.34) !important;
}
body[data-no-gesture="true"] .site-nav .nav-links a:hover,
body[data-no-gesture="true"] .site-nav .nav-links a.is-active,
body[data-no-gesture="true"] .site-nav .nav-docs a:hover {
  color: rgb(255,255,255) !important;
}
body[data-no-gesture="true"] .shell-mobile-toggle span { background: rgba(248, 246, 244, 0.88) !important; }
body[data-no-gesture="true"] .shell-mobile-menu { background: rgba(8, 8, 9, 0.72) !important; }
body[data-no-gesture="true"] .shell-mobile-menu a { color: rgba(248, 246, 244, 0.92) !important; }

.theme-dark .site-nav { border-bottom: 0 !important; }
.theme-dark .site-nav .nav-docs a,
.theme-dark .site-nav .nav-separator { color: rgba(250, 249, 246, 0.62) !important; }
.theme-dark .site-nav .nav-docs a:hover { color: rgb(250, 249, 246) !important; }
.theme-dark .site-nav .nav-docs a::after { background: rgba(5,5,5,0.96) !important; color: rgba(250,249,246,0.66) !important; }


/* Final nav/document refinements */
.site-nav a,
.site-nav a:visited,
.site-nav .back-link {
  text-decoration: none !important;
  border-bottom: 0 !important;
}
.site-nav .nav-docs a {
  cursor: pointer !important;
}


/* Unified cursor: one visual cursor for mouse input and camera hand tracking. */
@media (pointer: fine) {
  body.has-unified-cursor,
  body.has-unified-cursor * {
    cursor: none !important;
  }
}
#cursor {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.theme-dark .gesture-cursor {
  border-color: rgba(250, 249, 246, 0.92);
  background: rgba(250, 249, 246, 0.10);
  box-shadow: 0 0 0 5px rgba(250, 249, 246, 0.055);
}
.theme-dark .gesture-cursor.is-pinching,
.theme-dark .gesture-cursor.is-mouse-down {
  background: rgb(250, 249, 246);
  box-shadow: 0 0 0 9px rgba(250, 249, 246, 0.08);
}


/* Cursor top-layer override: keep the unified mouse/hand cursor above nav, Gesture Mode, intro, and all galleries. */
.gesture-cursor,
#gestureCursor {
  z-index: 2147483647 !important;
  pointer-events: none !important;
}
.gesture-scroll-zone {
  z-index: 2147483645 !important;
}
.gesture-panel {
  z-index: 2147483600 !important;
}
#cursor {
  z-index: 2147483647 !important;
}


/* Thin unified cursor preset — matches the fine cursor reference. */
.gesture-cursor,
#gestureCursor {
  position: fixed !important;
  left: 0 !important;
  top: 0 !important;
  z-index: 2147483647 !important;
  width: 10px !important;
  height: 10px !important;
  border-radius: 999px !important;
  border: 0 !important;
  background: var(--accent, #37332e) !important;
  box-shadow: none !important;
  mix-blend-mode: normal !important;
  pointer-events: none !important;
  opacity: 0;
  transform: translate3d(-100px, -100px, 0) translate(-50%, -50%);
  transition: width 220ms ease, height 220ms ease, background 220ms ease, opacity 220ms ease, border-color 220ms ease, box-shadow 220ms ease !important;
}
.gesture-cursor.is-visible,
#gestureCursor.is-visible {
  opacity: 1 !important;
}
.gesture-cursor.is-card,
#gestureCursor.is-card {
  width: 28px !important;
  height: 28px !important;
  background: transparent !important;
  border: 1px solid rgba(50, 50, 50, 0.42) !important;
  box-shadow: none !important;
}
.gesture-cursor.is-link,
#gestureCursor.is-link {
  width: 22px !important;
  height: 22px !important;
  border: 0 !important;
  background: var(--accent, #37332e) !important;
  box-shadow: none !important;
}
.gesture-cursor.is-pinching,
.gesture-cursor.is-mouse-down,
#gestureCursor.is-pinching,
#gestureCursor.is-mouse-down {
  width: 16px !important;
  height: 16px !important;
  border: 0 !important;
  background: var(--accent, #37332e) !important;
  box-shadow: none !important;
}
.gesture-cursor.is-scrolling,
#gestureCursor.is-scrolling {
  width: 30px !important;
  height: 30px !important;
  border: 1px solid rgba(50, 50, 50, 0.42) !important;
  background: transparent !important;
  box-shadow: none !important;
}
.theme-dark .gesture-cursor,
.theme-dark #gestureCursor {
  background: rgba(250, 249, 246, 0.92) !important;
  border-color: rgba(250, 249, 246, 0.70) !important;
}
.theme-dark .gesture-cursor.is-card,
.theme-dark .gesture-cursor.is-scrolling,
.theme-dark #gestureCursor.is-card,
.theme-dark #gestureCursor.is-scrolling {
  background: transparent !important;
  border: 1px solid rgba(250, 249, 246, 0.74) !important;
}
.theme-dark .gesture-cursor.is-link,
.theme-dark .gesture-cursor.is-pinching,
.theme-dark .gesture-cursor.is-mouse-down,
.theme-dark #gestureCursor.is-link,
.theme-dark #gestureCursor.is-pinching,
.theme-dark #gestureCursor.is-mouse-down {
  background: rgba(250, 249, 246, 0.92) !important;
  border: 0 !important;
}
#cursor {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}