#main { transition: opacity .28s ease; }
body.nav-preview-visible #main { opacity: .28; }
body.nav-committed #main { opacity: 1; transition: none; }
body .global-menu a[data-product] { transition: transform .25s cubic-bezier(.22,1,.36,1), opacity .2s, color .2s, background .2s; }
body.nav-preview-visible .global-menu a[data-product] { opacity: .65; }
body .global-menu a[data-product].is-previewed {
  transform: translateX(8px);
  background: #f5f7fa;
  color: #222831;
  opacity: 1;
}
.nav-product-preview { position: fixed; inset: 0; z-index: 34; pointer-events: none; }
.nav-preview-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100svh;
  transform-origin: top left;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  background: #f0f1f4;
  border: 1px solid #ffffff45;
  box-shadow: 0 20px 100px #060b1a55;
  will-change: transform, opacity;
}
.nav-preview-frame[data-product='safety'] { background: #1a1e23; }
.nav-product-preview.is-visible .nav-preview-frame { pointer-events: auto; }
.nav-preview-canvas { width: 100%; height: 100%; overflow: hidden; pointer-events: none; user-select: none; }
.nav-preview-page { width: 100%; height: 100%; overflow: hidden; color: #242830; font-family: var(--brand-font); }
.nav-preview-page.safety-mode { color: #f5f6f7; }
.nav-preview-header { position: relative; height: 72px; display: flex; align-items: center; justify-content: space-between; padding: 0 25px; }
.nav-preview-menu-label { display: inline-flex; align-items: center; gap: 16px; background: #ffffffb3; padding: 8px 16px; min-height: 40px; font-size: 14px; border-radius: 30px; }
.nav-preview-menu-label b { font-weight: 400; font-size: 20px; line-height: 1; }
.nav-preview-wordmark { position: absolute; left: 50%; transform: translateX(-50%); font-size: 25px; letter-spacing: -1.4px; font-weight: 550; white-space: nowrap; }
.nav-preview-wordmark small { font-size: 17px; letter-spacing: -.7px; margin-left: 4px; font-weight: 400; }
.nav-preview-tools { display: flex; gap: 8px; }
.nav-preview-tools i { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #ffffffb3; }
.nav-preview-tools svg { width: 17px; height: 17px; }
.nav-preview-page.safety-mode .nav-preview-menu-label,
.nav-preview-page.safety-mode .nav-preview-tools i { background: #30353c; }
.nav-preview-open { position: absolute; inset: 0; width: 100%; height: 100%; background: transparent; padding: 0; cursor: pointer; }
.nav-preview-open:focus-visible { outline: 3px solid #86aef1; outline-offset: -5px; }
#navPreviewAction {
  position: absolute;
  bottom: 28px;
  right: 28px;
  display: flex;
  align-items: center;
  gap: 18px;
  max-width: calc(100% - 56px);
  padding: 13px 20px;
  border: 1px solid #ffffff40;
  border-radius: 32px;
  background: #222933ed;
  color: #fff;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.4;
  box-shadow: 0 3px 20px #10172228;
  transition: background .2s, transform .25s;
}
#navPreviewAction svg { width: 18px; height: 18px; }
.nav-preview-open:hover #navPreviewAction { background: #33445d; transform: translateY(-3px); }
body.nav-navigating .nav-product-preview { z-index: 70; }
body.nav-navigating .nav-preview-frame { box-shadow: none; border-color: transparent; }
body.nav-navigating .nav-preview-open { opacity: 0; pointer-events: none; }
body.nav-navigating .global-menu { opacity: 0; pointer-events: none; transition: opacity .18s; }
@media (prefers-reduced-motion: reduce) {
  #main,
  body .global-menu a[data-product],
  #navPreviewAction { transition: none; }
  body .global-menu a[data-product].is-previewed,
  .nav-preview-open:hover #navPreviewAction { transform: none; }
}