html { background: var(--color-panel-bg, #16120e); }
body.nav-surface {
  position: relative;
  overflow-x: hidden;
  background:
    radial-gradient(120% 80% at 50% -10%, color-mix(in srgb, var(--color-accent, #86a9af) 9%, transparent), transparent 58%),
    linear-gradient(180deg, color-mix(in srgb, var(--color-panel-bg, #16120e) 94%, #fff 6%), var(--color-panel-bg, #16120e) 72%);
}
body.nav-surface::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.11;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.84' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
  z-index: 0;
}
.route-layer { position: relative; z-index: 1; min-height: 100dvh; }
.depth-layer {
  --depth-y: 0px;
  --depth-blur: 0px;
  --depth-opacity: 1;
  transform: translate3d(0, var(--depth-y), 0);
  filter: blur(var(--depth-blur));
  opacity: var(--depth-opacity);
}
.route-fallback {
  position: fixed;
  top: max(calc(env(safe-area-inset-top, 0px) + 14px), 32px);
  left: calc(env(safe-area-inset-left, 0px) + 14px);
  z-index: 70;
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  color: var(--color-text-secondary, #a79e94);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-decoration: none;
}
.nav-cascade-item {
  opacity: 0;
  transform: translateY(18px);
}
body.nav-ready .nav-cascade-item {
  opacity: 1;
  transform: none;
  transition: opacity 520ms ease, transform 620ms cubic-bezier(.2,.75,.2,1);
  transition-delay: calc(var(--cascade-index, 0) * 55ms);
}
.nav-flight {
  position: fixed;
  inset: 0;
  z-index: 9000;
  pointer-events: none;
  background: var(--color-panel-bg, #16120e);
  opacity: 0;
  transition: opacity 180ms ease;
}
.nav-flight-art {
  position: absolute;
  inset: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  clip-path: inset(var(--flight-top) var(--flight-right) var(--flight-bottom) var(--flight-left) round var(--border-radius, 8px));
  transform: scale(.985);
  transition: clip-path 380ms cubic-bezier(.2,.75,.2,1), transform 380ms cubic-bezier(.2,.75,.2,1), filter 380ms ease;
}
.nav-flight.go { opacity: 1; }
.nav-flight.go .nav-flight-art {
  clip-path: inset(0 0 0 0 round 0);
  transform: none;
  filter: brightness(.48) saturate(.75);
}
.nav-error {
  max-width: 34rem;
  margin: 0 auto;
  padding: 72px 24px;
  text-align: center;
  color: var(--color-text-secondary, #a79e94);
}
@media (prefers-reduced-motion: reduce) {
  .depth-layer { transform: none !important; filter: none !important; opacity: 1 !important; }
  .nav-cascade-item { opacity: 1; transform: none; }
  body.nav-ready .nav-cascade-item { transition: none; }
  .nav-flight, .nav-flight-art { transition: none; }
}