@media (min-width: 782px) and (hover: hover) and (pointer: fine) {
  :root {
    --codex-nav-ink: #292724;
    --codex-nav-water: #b98561;
    --codex-nav-water-deep: #625047;
    --codex-nav-coral: #9d6a59;
    --codex-nav-dot-glass: rgba(250, 250, 250, 0.96);
    --codex-nav-dot-ring: rgba(188, 132, 88, 0.64);
    --codex-nav-dot-ring-strong: rgba(168, 103, 82, 0.68);
    --codex-nav-dot-ring-soft: rgba(232, 179, 116, 0.22);
    --codex-nav-dot-trail: rgba(219, 164, 104, 0.11);
    --codex-nav-line: rgba(83, 68, 55, 0.14);
    --codex-nav-line-accent: rgba(197, 141, 94, 0.16);
    --codex-nav-line-warm: rgba(224, 151, 93, 0.09);
    --codex-nav-surface-glow: rgba(206, 151, 97, 0.13);
    --codex-nav-surface-stroke: rgba(160, 114, 83, 0.24);
  }

  body.home .codex-nav-stage {
    display: grid;
    margin-top: 2.5rem;
    position: relative;
    width: 100%;
  }

  body.home .codex-nav-stage > .codex-nav-prelude,
  body.home .codex-nav-stage > nav.wp-block-navigation {
    grid-area: 1 / 1;
  }

  body.home .codex-nav-stage > nav.wp-block-navigation:is(.codex-water-nav, .xiaoxiao-nav-spacing) {
    margin-top: 0;
  }

  body.home .codex-nav-prelude {
    display: grid;
    min-height: 100%;
    overflow: visible;
    padding: 0.75rem 1rem;
    place-items: center;
    pointer-events: none;
    position: relative;
    z-index: 1;
  }

  body.home .codex-nav-prelude::before {
    animation: codex-nav-prelude-line 1820ms cubic-bezier(0.18, 0.72, 0.18, 1) 120ms both;
    background:
      linear-gradient(
        90deg,
        transparent 0%,
        var(--codex-nav-line-accent) 12%,
        var(--codex-nav-line) 34%,
        var(--codex-nav-line) 66%,
        var(--codex-nav-line-warm) 88%,
        transparent 100%
      );
    content: "";
    height: 1px;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transform: scaleX(0);
    transform-origin: center;
  }

  body.home .codex-nav-prelude__quote {
    animation: codex-nav-quote-flow 1620ms cubic-bezier(0.2, 0.8, 0.2, 1) 340ms both;
    color: rgba(23, 20, 17, 0.48);
    font-family: "Avenir Next", "Gill Sans", "Helvetica Neue", Arial, sans-serif;
    font-size: clamp(0.82rem, 1.4vw, 1rem);
    font-style: italic;
    font-weight: 500;
    letter-spacing: 0.08em;
    line-height: 1.35;
    opacity: 0;
    transform: translateY(0.22rem);
  }

  nav.wp-block-navigation:is(.codex-water-nav, .xiaoxiao-nav-spacing) {
    border: 0;
    line-height: 1.2;
    padding: 0.75rem 1rem;
    position: relative;
    width: 100%;
  }

  body:not(.home) nav.wp-block-navigation:is(.codex-water-nav, .xiaoxiao-nav-spacing) {
    border-top: 0;
  }

  body:not(.home) nav.wp-block-navigation:is(.codex-water-nav, .xiaoxiao-nav-spacing)::before {
    background:
      linear-gradient(
        90deg,
        transparent 0%,
        var(--codex-nav-line-accent) 12%,
        var(--codex-nav-line) 34%,
        var(--codex-nav-line) 66%,
        var(--codex-nav-line-warm) 88%,
        transparent 100%
      );
    content: "";
    height: 1px;
    left: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
  }

  body.home nav.wp-block-navigation:is(.codex-water-nav, .xiaoxiao-nav-spacing) {
    animation: codex-nav-shell-in 680ms cubic-bezier(0.22, 0.82, 0.18, 1) 1920ms both;
    margin-top: 2.5rem;
    opacity: 0;
    transform: translateY(-0.18rem);
  }

  nav.wp-block-navigation:is(.codex-water-nav, .xiaoxiao-nav-spacing) .wp-block-navigation__container {
    align-items: center;
    gap: 0.75rem clamp(0.95rem, 2.75vw, 2.05rem);
    justify-content: center;
    margin: 0;
  }

  nav.wp-block-navigation:is(.codex-water-nav, .xiaoxiao-nav-spacing) .wp-block-navigation-item__content {
    --codex-nav-item-delay: 2110ms;
    --codex-nav-item-duration: 900ms;
    --codex-nav-item-ease: cubic-bezier(0.34, 0.02, 0.16, 1);
    --codex-nav-item-start-y: 0.38rem;
    --codex-nav-item-early-y: 0.34rem;
    --codex-nav-item-peak-y: -0.035rem;
    color: var(--codex-nav-ink);
    display: inline-block;
    filter: none;
    font-family: var(--xiaoxiao-font-sans-zh);
    font-size: clamp(0.92rem, 1.9vw, 1.08rem);
    font-weight: 710;
    isolation: isolate;
    letter-spacing: 0;
    line-height: 1.2;
    min-width: 2.5rem;
    overflow: visible;
    padding: 0.34rem 0.05rem 0.78rem !important;
    position: relative;
    text-align: center;
    text-decoration: none;
    transform: none;
    transition:
      color 320ms ease,
      transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
    z-index: 2;
  }

  body.home nav.wp-block-navigation:is(.codex-water-nav, .xiaoxiao-nav-spacing) .wp-block-navigation-item__content {
    animation: codex-nav-text-in var(--codex-nav-item-duration) var(--codex-nav-item-ease) var(--codex-nav-item-delay) both;
    opacity: 0;
    transform: translateY(var(--codex-nav-item-start-y));
  }

  nav.wp-block-navigation:is(.codex-water-nav, .xiaoxiao-nav-spacing) .wp-block-navigation-item:nth-child(2) > .wp-block-navigation-item__content {
    --codex-nav-item-delay: 2225ms;
  }

  nav.wp-block-navigation:is(.codex-water-nav, .xiaoxiao-nav-spacing) .wp-block-navigation-item:nth-child(3) > .wp-block-navigation-item__content {
    --codex-nav-item-delay: 2305ms;
  }

  nav.wp-block-navigation:is(.codex-water-nav, .xiaoxiao-nav-spacing) .wp-block-navigation-item:nth-child(4) > .wp-block-navigation-item__content {
    --codex-nav-item-delay: 2370ms;
  }

  nav.wp-block-navigation:is(.codex-water-nav, .xiaoxiao-nav-spacing) .wp-block-navigation-item:nth-child(5) > .wp-block-navigation-item__content {
    --codex-nav-item-delay: 2440ms;
  }

  nav.wp-block-navigation:is(.codex-water-nav, .xiaoxiao-nav-spacing) .wp-block-navigation-item:nth-child(6) > .wp-block-navigation-item__content {
    --codex-nav-item-delay: 2510ms;
    --codex-nav-item-duration: 1040ms;
    --codex-nav-item-ease: cubic-bezier(0.28, 0.02, 0.12, 1);
    --codex-nav-item-start-y: 0.28rem;
    --codex-nav-item-early-y: 0.24rem;
    --codex-nav-item-peak-y: 0.01rem;
  }

  nav.wp-block-navigation:is(.codex-water-nav, .xiaoxiao-nav-spacing) .wp-block-navigation-item__content::before {
    background:
      linear-gradient(
        90deg,
        transparent 0%,
        rgba(219, 164, 104, 0.08) 16%,
        rgba(176, 116, 84, 0.1) 52%,
        rgba(230, 176, 115, 0.06) 84%,
        transparent 100%
      );
    border-radius: 999px;
    bottom: 0.26rem;
    box-shadow: 0 0 0.42rem rgba(232, 170, 107, 0.08);
    content: "";
    height: 0.18rem;
    left: -0.34rem;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    right: -0.34rem;
    transform: translateY(0.05rem) scaleX(0.18);
    transform-origin: center;
    transition:
      opacity 460ms ease,
      transform 680ms cubic-bezier(0.22, 0.82, 0.18, 1);
    z-index: -1;
  }

  nav.wp-block-navigation:is(.codex-water-nav, .xiaoxiao-nav-spacing) .wp-block-navigation-item__content::after {
    background:
      radial-gradient(ellipse 2.35px 3.15px at 10% 56%, var(--codex-nav-dot-glass) 0 32%, var(--codex-nav-dot-ring) 39% 56%, var(--codex-nav-dot-ring-soft) 63% 73%, transparent 77%),
      radial-gradient(ellipse 3.45px 4.72px at 26% 50%, var(--codex-nav-dot-glass) 0 30%, var(--codex-nav-dot-ring-strong) 37% 54%, var(--codex-nav-dot-ring-soft) 62% 73%, transparent 77%),
      radial-gradient(ellipse 2.38px 3.18px at 41% 56%, var(--codex-nav-dot-glass) 0 32%, var(--codex-nav-dot-ring) 39% 56%, var(--codex-nav-dot-ring-soft) 63% 73%, transparent 77%),
      radial-gradient(ellipse 2.95px 3.95px at 56% 51%, var(--codex-nav-dot-glass) 0 31%, var(--codex-nav-dot-ring-strong) 38% 55%, var(--codex-nav-dot-ring-soft) 62% 73%, transparent 77%),
      radial-gradient(ellipse 2.08px 2.86px at 72% 57%, var(--codex-nav-dot-glass) 0 32%, rgba(219, 156, 96, 0.58) 39% 56%, var(--codex-nav-dot-ring-soft) 63% 73%, transparent 77%),
      radial-gradient(ellipse 3.08px 4.08px at 88% 52%, var(--codex-nav-dot-glass) 0 31%, var(--codex-nav-dot-ring) 38% 55%, var(--codex-nav-dot-ring-soft) 62% 73%, transparent 77%),
      linear-gradient(90deg, transparent, var(--codex-nav-dot-trail), rgba(236, 172, 103, 0.08), transparent);
    background-size: 100% 100%;
    border-radius: 999px;
    bottom: 0.16rem;
    clip-path: inset(0 100% 0 0 round 999px);
    content: "";
    filter: blur(0.82px);
    height: 0.64rem;
    left: -0.34rem;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    right: -0.34rem;
    transform: translateY(0.05rem) scaleX(0.96);
    transform-origin: left center;
    transition:
      clip-path 720ms cubic-bezier(0.16, 0.72, 0.18, 1),
      filter 640ms ease,
      opacity 360ms ease,
      transform 720ms cubic-bezier(0.16, 0.72, 0.18, 1);
    z-index: -1;
  }

  nav.wp-block-navigation:is(.codex-water-nav, .xiaoxiao-nav-spacing) .wp-block-navigation-item__content:hover,
  nav.wp-block-navigation:is(.codex-water-nav, .xiaoxiao-nav-spacing) .wp-block-navigation-item__content:focus-visible {
    color: var(--codex-nav-water-deep);
    outline: 0;
    transform: translateY(-0.12rem);
  }

  nav.wp-block-navigation:is(.codex-water-nav, .xiaoxiao-nav-spacing) .wp-block-navigation-item__content:hover::before,
  nav.wp-block-navigation:is(.codex-water-nav, .xiaoxiao-nav-spacing) .wp-block-navigation-item__content:focus-visible::before {
    opacity: 0.96;
    transform: translateY(0.02rem) scaleX(1);
  }

  nav.wp-block-navigation:is(.codex-water-nav, .xiaoxiao-nav-spacing) .wp-block-navigation-item__content:hover::after,
  nav.wp-block-navigation:is(.codex-water-nav, .xiaoxiao-nav-spacing) .wp-block-navigation-item__content:focus-visible::after {
    clip-path: inset(0 0 0 0 round 999px);
    filter: blur(0);
    opacity: 1;
    transform: translateY(0) scaleX(1.03);
  }

  nav.wp-block-navigation:is(.codex-water-nav, .xiaoxiao-nav-spacing) .current-menu-item > .wp-block-navigation-item__content,
  nav.wp-block-navigation:is(.codex-water-nav, .xiaoxiao-nav-spacing) .current-menu-ancestor > .wp-block-navigation-item__content,
  nav.wp-block-navigation:is(.codex-water-nav, .xiaoxiao-nav-spacing) .wp-block-navigation-item__content[aria-current="page"] {
    color: var(--codex-nav-coral);
    transform: none;
  }

  nav.wp-block-navigation:is(.codex-water-nav, .xiaoxiao-nav-spacing) .current-menu-item > .wp-block-navigation-item__content::after,
  nav.wp-block-navigation:is(.codex-water-nav, .xiaoxiao-nav-spacing) .current-menu-ancestor > .wp-block-navigation-item__content::after,
  nav.wp-block-navigation:is(.codex-water-nav, .xiaoxiao-nav-spacing) .wp-block-navigation-item__content[aria-current="page"]::after {
    background:
      radial-gradient(ellipse 2.35px 3.15px at 10% 56%, var(--codex-nav-dot-glass) 0 32%, rgba(176, 116, 84, 0.66) 39% 56%, rgba(230, 176, 115, 0.2) 63% 73%, transparent 77%),
      radial-gradient(ellipse 3.45px 4.72px at 26% 50%, var(--codex-nav-dot-glass) 0 30%, rgba(158, 95, 78, 0.7) 37% 54%, rgba(230, 176, 115, 0.22) 62% 73%, transparent 77%),
      radial-gradient(ellipse 2.38px 3.18px at 41% 56%, var(--codex-nav-dot-glass) 0 32%, rgba(188, 132, 88, 0.64) 39% 56%, rgba(230, 176, 115, 0.2) 63% 73%, transparent 77%),
      radial-gradient(ellipse 2.95px 3.95px at 56% 51%, var(--codex-nav-dot-glass) 0 31%, rgba(158, 95, 78, 0.66) 38% 55%, rgba(230, 176, 115, 0.22) 62% 73%, transparent 77%),
      radial-gradient(ellipse 2.08px 2.86px at 72% 57%, var(--codex-nav-dot-glass) 0 32%, rgba(219, 156, 96, 0.54) 39% 56%, rgba(230, 176, 115, 0.18) 63% 73%, transparent 77%),
      radial-gradient(ellipse 3.08px 4.08px at 88% 52%, var(--codex-nav-dot-glass) 0 31%, rgba(176, 116, 84, 0.6) 38% 55%, rgba(230, 176, 115, 0.2) 62% 73%, transparent 77%),
      linear-gradient(90deg, transparent 0%, rgba(219, 164, 104, 0.1) 24%, rgba(230, 176, 115, 0.07) 74%, transparent 100%);
    clip-path: inset(0 0 0 0 round 999px);
    filter: blur(0);
    opacity: 1;
    transform: translateY(0) scaleX(1);
  }

  html:not(.codex-nav-intro-complete) body.home nav.wp-block-navigation:is(.codex-water-nav, .xiaoxiao-nav-spacing) .current-menu-item > .wp-block-navigation-item__content::after,
  html:not(.codex-nav-intro-complete) body.home nav.wp-block-navigation:is(.codex-water-nav, .xiaoxiao-nav-spacing) .current-menu-ancestor > .wp-block-navigation-item__content::after,
  html:not(.codex-nav-intro-complete) body.home nav.wp-block-navigation:is(.codex-water-nav, .xiaoxiao-nav-spacing) .wp-block-navigation-item__content[aria-current="page"]::after {
    animation: codex-current-mark-in 980ms cubic-bezier(0.18, 0.74, 0.2, 1) 3040ms both;
  }

  nav.wp-block-navigation:is(.codex-water-nav, .xiaoxiao-nav-spacing) .wp-block-navigation-item__content.codex-droplet-source::after,
  nav.wp-block-navigation:is(.codex-water-nav, .xiaoxiao-nav-spacing) .wp-block-navigation-item__content.codex-droplet-source:hover::after,
  nav.wp-block-navigation:is(.codex-water-nav, .xiaoxiao-nav-spacing) .wp-block-navigation-item__content.codex-droplet-source:focus-visible::after {
    clip-path: inset(0 39% 0 39% round 999px);
    filter: blur(0.32px);
    opacity: 0.46;
    transform: translateY(0.07rem) scaleX(0.42);
    transition:
      clip-path 540ms cubic-bezier(0.2, 0.72, 0.18, 1),
      filter 520ms ease,
      opacity 460ms ease,
      transform 540ms cubic-bezier(0.2, 0.72, 0.18, 1);
  }

  .codex-nav-water-surface {
    bottom: -0.58rem;
    height: 1.35rem;
    left: 0;
    opacity: 1;
    overflow: visible;
    pointer-events: none;
    position: absolute;
    right: 0;
    transform: scaleX(1);
    transform-origin: center;
    width: 100%;
    z-index: 0;
  }

  body.home .codex-nav-water-surface {
    animation: codex-nav-waterline-in 760ms cubic-bezier(0.2, 0.8, 0.2, 1) 1970ms both;
    opacity: 0;
    transform: scaleX(0);
  }

  .codex-nav-water-surface svg {
    display: block;
    height: 100%;
    overflow: visible;
    width: 100%;
  }

  .codex-nav-water-path,
  .codex-nav-water-glow {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .codex-nav-water-path {
    stroke: rgba(76, 69, 62, 0.14);
    stroke-width: 1.15;
    transition: stroke 300ms ease;
  }

  .codex-nav-water-glow {
    opacity: 0;
    stroke: var(--codex-nav-surface-glow);
    stroke-width: 5;
    transition: opacity 360ms ease;
  }

  nav.wp-block-navigation:is(.codex-water-nav, .xiaoxiao-nav-spacing).is-touching .codex-nav-water-path {
    stroke: var(--codex-nav-surface-stroke);
  }

  nav.wp-block-navigation:is(.codex-water-nav, .xiaoxiao-nav-spacing).is-touching .codex-nav-water-glow {
    opacity: 1;
  }

  .codex-nav-droplet {
    background:
      radial-gradient(circle at 35% 26%, rgba(255, 244, 235, 0.94) 0 12%, transparent 13%),
      radial-gradient(circle at 61% 70%, rgba(116, 81, 63, 0.2) 0 28%, transparent 30%),
      linear-gradient(135deg, rgba(216, 148, 99, 0.96), rgba(190, 105, 82, 0.86));
    border-radius: var(--drop-radius, 56% 56% 60% 60% / 68% 68% 46% 46%);
    box-shadow:
      0 0.28rem 0.75rem rgba(200, 121, 97, 0.24),
      0 0 0.58rem rgba(217, 150, 94, 0.16);
    height: 0.82rem;
    left: 0;
    opacity: var(--drop-opacity, 0);
    pointer-events: none;
    position: absolute;
    top: 0;
    transform:
      translate3d(calc(var(--drop-x, 0px) - 0.32rem), var(--drop-y, 0px), 0)
      rotate(var(--drop-rotate, 45deg))
      scale(var(--drop-scale-x, 0.2), var(--drop-scale-y, 0.2));
    transform-origin: 50% 68%;
    width: 0.64rem;
    will-change: opacity, transform, border-radius;
    z-index: 5;
  }

  .codex-nav-droplet::after {
    background:
      linear-gradient(90deg, transparent, rgba(210, 132, 84, 0.42), rgba(116, 81, 63, 0.14), transparent);
    border-radius: 999px;
    content: "";
    filter: blur(0.45px);
    height: 0.18rem;
    left: 50%;
    opacity: var(--ripple-opacity, 0);
    position: absolute;
    top: 96%;
    transform: translate(-50%, var(--ripple-y, 0.08rem)) scaleX(var(--ripple-scale, 0.2));
    width: 1.3rem;
    will-change: opacity, transform;
  }

  @keyframes codex-nav-shell-in {
    0% {
      opacity: 0;
      transform: translateY(-0.18rem);
    }

    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes codex-nav-prelude-line {
    0% {
      opacity: 0;
      transform: scaleX(0);
    }

    18% {
      opacity: 1;
    }

    74% {
      opacity: 1;
      transform: scaleX(1);
    }

    100% {
      opacity: 1;
      transform: scaleX(1);
    }
  }

  @keyframes codex-nav-quote-flow {
    0%,
    12% {
      opacity: 0;
      transform: translateY(0.22rem);
    }

    28% {
      opacity: 1;
      transform: translateY(0);
    }

    72% {
      opacity: 1;
      transform: translateY(0);
    }

    100% {
      opacity: 0;
      transform: translateY(-0.16rem);
    }
  }

  @keyframes codex-nav-waterline-in {
    0% {
      opacity: 0;
      transform: scaleX(0);
    }

    42% {
      opacity: 1;
    }

    100% {
      opacity: 1;
      transform: scaleX(1);
    }
  }

  @keyframes codex-nav-text-in {
    0% {
      filter: none;
      opacity: 0;
      transform: translateY(var(--codex-nav-item-start-y));
    }

    18% {
      filter: none;
      opacity: 0.14;
      transform: translateY(var(--codex-nav-item-early-y));
    }

    58% {
      filter: none;
      opacity: 0.88;
      transform: translateY(var(--codex-nav-item-peak-y));
    }

    100% {
      filter: none;
      opacity: 1;
      transform: none;
    }
  }

  @keyframes codex-current-mark-in {
    0% {
      clip-path: inset(0 100% 0 0 round 999px);
      filter: blur(1.25px);
      opacity: 0;
      transform: translateY(0.1rem) scaleX(0.24);
    }

    18% {
      clip-path: inset(0 84% 0 0 round 999px);
      filter: blur(0.95px);
      opacity: 0.28;
      transform: translateY(0.075rem) scaleX(0.42);
    }

    34% {
      clip-path: inset(0 66% 0 0 round 999px);
      filter: blur(0.68px);
      opacity: 0.42;
      transform: translateY(0.058rem) scaleX(0.64);
    }

    50% {
      clip-path: inset(0 46% 0 0 round 999px);
      filter: blur(0.42px);
      opacity: 0.58;
      transform: translateY(0.04rem) scaleX(0.82);
    }

    68% {
      clip-path: inset(0 25% 0 0 round 999px);
      filter: blur(0.22px);
      opacity: 0.76;
      transform: translateY(0.022rem) scaleX(0.96);
    }

    86% {
      clip-path: inset(0 7% 0 0 round 999px);
      filter: blur(0.08px);
      opacity: 0.9;
      transform: translateY(0.006rem) scaleX(1.02);
    }

    100% {
      clip-path: inset(0 0 0 0 round 999px);
      filter: blur(0);
      opacity: 1;
      transform: translateY(0) scaleX(1);
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  body.home .codex-nav-prelude {
    display: none;
  }

  nav.wp-block-navigation:is(.codex-water-nav, .xiaoxiao-nav-spacing),
  nav.wp-block-navigation:is(.codex-water-nav, .xiaoxiao-nav-spacing) .wp-block-navigation-item__content,
  .codex-nav-water-surface {
    animation: none;
    opacity: 1;
    transform: none;
  }
}