:root { --nav-ease: cubic-bezier(.22, 1, .36, 1); }

.main-nav { isolation: isolate; }
.main-nav > a > .nav-label { font: inherit; opacity: 1; transform: none; }
.site-header .main-nav.nav-ready > a { position: relative; background: var(--night); color: #bcbcc0; }
.main-nav.nav-ready::after { content: ""; position: absolute; z-index: 1; top: 3px; bottom: 3px; left: 0; width: calc(var(--nav-width) * 1px); border-radius: 7px; background: #fff; pointer-events: none; transform: translateX(var(--nav-x)) scale(var(--nav-press, 1)); transition: transform 360ms var(--nav-ease); }
.site-header .main-nav.nav-ready > a > .nav-label { position: relative; z-index: 2; display: block; font: inherit; color: #fff; opacity: .82; mix-blend-mode: difference; transform: none; transition: opacity 140ms, transform 140ms var(--nav-ease); }
.site-header .main-nav.nav-ready > a:is(.nav-target, [aria-current]) > .nav-label { opacity: 1; }
.main-nav.nav-ready > a[aria-current]::after { content: ""; position: absolute; z-index: 2; bottom: 4px; left: calc(50% - 2px); width: 4px; height: 4px; border-radius: 50%; background: var(--orange); pointer-events: none; }
.main-nav.nav-ready.nav-pressed { --nav-press: .96; }
.main-nav.nav-ready.nav-pressed::after { transition-duration: 90ms; }
.site-header .main-nav.nav-ready.nav-pressed > a.nav-target > .nav-label { transform: scale(.96); transition-duration: 90ms; }
.main-nav.nav-ready > a:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

.scenario-switcher { position: relative; }
.scenario-switcher.nav-ready::after { content: ""; position: absolute; bottom: -1px; left: 0; width: 1px; height: 2px; background: var(--orange); pointer-events: none; transform-origin: left center; transform: translateX(var(--nav-x)) scaleX(var(--nav-width)); transition: transform 320ms var(--nav-ease); }
.scenario-switcher.nav-ready > a[aria-current]::after { content: none; }
.scenario-switcher > a { transition: color 160ms, transform 120ms var(--nav-ease); }
.scenario-switcher > a.nav-target { color: var(--ink); }
.scenario-switcher > a:active { transform: translateY(1px); }

.site-header :is(.start-button, .menu-toggle, .menu-button) { transition: background 180ms, color 180ms, transform 120ms var(--nav-ease); }
.site-header :is(.start-button, .menu-toggle, .menu-button):active { transform: translateY(1px); }
.site-header .start-button { white-space: nowrap; font-weight: 500; }
.site-header .start-button .dot { position: relative; transition: color 240ms, transform 420ms var(--nav-ease); }
.site-header .start-button .dot::before,
.site-header .start-button .dot::after { content: ""; position: absolute; inset: -55%; border: 1px solid currentColor; border-radius: 50%; opacity: 0; transform: scale(.35); pointer-events: none; transition: transform 520ms var(--nav-ease), opacity 260ms; }
.site-header .start-button .dot::after { inset: -100%; transition-delay: 60ms; }
.site-header .start-button:focus-visible { background: var(--ink); color: #fff; }
.site-header .start-button:focus-visible .dot { color: var(--orange); transform: scale(.86); }
.site-header .start-button:focus-visible .dot::before { opacity: .65; transform: scale(1); }
.site-header .start-button:focus-visible .dot::after { opacity: .3; transform: scale(1); }
.menu-dialog[open], .studio-scenario .mobile-menu.is-open { transform-origin: top right; animation: navigation-menu-in 240ms var(--nav-ease); }
.menu-dialog nav a, .studio-scenario .mobile-menu a:not(.button), .footer-grid a { transition: color 180ms, transform 240ms var(--nav-ease); }
.menu-dialog nav a:active, .studio-scenario .mobile-menu a:not(.button):active, .footer-grid a:active { transform: translateX(2px); }
@keyframes navigation-menu-in {
  from { opacity: .6; transform: translateY(-8px) scale(.985); }
  to { opacity: 1; transform: none; }
}
@media (hover: hover) and (pointer: fine) {
  .site-header .start-button:hover .dot { color: var(--orange); transform: scale(.86); }
  .site-header .start-button:hover .dot::before { opacity: .65; transform: scale(1); }
  .site-header .start-button:hover .dot::after { opacity: .3; transform: scale(1); }
  .menu-dialog nav a:hover, .studio-scenario .mobile-menu a:not(.button):hover { color: #ff967b; transform: translateX(4px); }
  .footer-grid a:hover { transform: translateX(3px); }
}

@view-transition { navigation: auto; }
@media (prefers-reduced-motion: no-preference) {
  ::view-transition { pointer-events: none; }
  ::view-transition-group(*) { animation-duration: 220ms; animation-timing-function: var(--nav-ease); }
  ::view-transition-old(*), ::view-transition-new(*) { animation-duration: 220ms; animation-timing-function: linear; }
}
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .main-nav.nav-ready::after { transform: translateX(var(--nav-x)); }
  .site-header .main-nav.nav-ready > a > .nav-label,
  .scenario-switcher > a,
  .site-header .start-button .dot,
  .site-header .start-button .dot::before,
  .site-header .start-button .dot::after,
  .site-header :is(.start-button, .menu-toggle, .menu-button),
  .menu-dialog nav a, .studio-scenario .mobile-menu a:not(.button), .footer-grid a { transform: none !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}
@media (forced-colors: active) {
  .main-nav.nav-ready::after, .main-nav.nav-ready > a[aria-current]::after, .scenario-switcher.nav-ready::after { display: none; }
  .site-header .main-nav.nav-ready > a { background: Canvas; color: LinkText; }
  .site-header .main-nav.nav-ready > a > .nav-label { color: inherit; opacity: 1; mix-blend-mode: normal; }
  .scenario-switcher > a[aria-current] { outline: 2px solid Highlight; }
}