:root {
  --wx-cream: #f3eadb;
  --wx-ink: #183723;
  --wx-shadow: 0 1rem 2rem rgba(9, 28, 16, .24);
  --wx-trigger-size: 3.65rem;
  --wx-trigger-inset: max(1.05rem, env(safe-area-inset-left));
  --wx-trigger-bottom: calc(1.05rem + env(safe-area-inset-bottom));
  --wx-leaf-height: clamp(3.15rem, 11.5vw, 4.35rem);
  --wx-leaf-width: min(76vw, 23rem);
  --wx-leaf-step: clamp(2.55rem, 9.3vw, 3.45rem);
  --wx-fan-bottom: calc(var(--wx-trigger-bottom) + var(--wx-trigger-size) + .55rem);
  --wx-ease-organic: cubic-bezier(.18,.84,.24,1);
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100svh; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--wx-ink); background: #202420; }
.demo-page { min-height: 100svh; display: grid; place-items: center; }
.hero { position: relative; inline-size: min(100vw, 430px); min-height: 100svh; overflow: hidden; background: radial-gradient(circle at 72% 22%, rgba(255,225,140,.82), transparent 13rem), linear-gradient(180deg, rgba(10,33,19,.05), rgba(10,33,19,.8) 57%), url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 430 900"><rect fill="%23384827" width="430" height="900"/><path d="M0 620C98 560 148 654 234 604s119-114 196-59v355H0Z" fill="%23f3eadb"/><g stroke="%23152719" stroke-width="7" opacity=".36"><path d="M49 0v560M96 0v650M176 0v575M249 0v620M348 0v590"/></g><path d="M90 650c90-160 178-204 284-420" fill="none" stroke="%23d3c79d" stroke-width="9" opacity=".28"/></svg>') center/cover; box-shadow: 0 0 0 1px rgba(255,255,255,.1); }
.hamburger { position: absolute; z-index: 2; top: 7.2rem; right: 1.25rem; inline-size: 3rem; block-size: 3rem; border: 0; border-radius: 50%; background: rgba(243,234,219,.93); display: grid; place-content: center; gap: .26rem; box-shadow: 0 .7rem 1.4rem rgba(0,0,0,.18); }
.hamburger span { display:block; inline-size: 1.1rem; block-size: 2px; background: #183723; }
.brand-mark { position: absolute; top: 34svh; right: 1.2rem; color: rgba(255,255,255,.9); font-weight: 900; font-size: clamp(3rem, 18vw, 5.3rem); letter-spacing: -.08em; transform: rotate(7deg); opacity: .88; }
.hero-copy { position: absolute; left: 0; right: 0; bottom: 0; min-height: 34svh; padding: 3.3rem 2rem 8rem; background: var(--wx-cream); border-radius: 58% 42% 0 0 / 12% 10% 0 0; font-family: Georgia, serif; line-height: 1.8; font-size: 1.02rem; }

.wx-leaf-nav { position: fixed; inset: 0; z-index: 50; pointer-events: none; overflow: clip; }
.wx-leaf-nav__veil { position: absolute; inset: 0; opacity: 0; background: rgba(243,234,219,.35); backdrop-filter: blur(2px); transition: opacity .28s ease; }
body.is-leaf-nav-open .wx-leaf-nav__veil { opacity: 1; pointer-events: auto; }
.wx-leaf-nav__fan { position: absolute; left: 0; bottom: var(--wx-fan-bottom); inline-size: var(--wx-leaf-width); block-size: calc(var(--wx-leaf-height) + 4 * var(--wx-leaf-step)); pointer-events: none; }
.wx-leaf-nav__leaf { --depth: calc(4 - var(--i)); position: absolute; left: 0; bottom: calc(var(--leaf-y) * var(--wx-leaf-step)); inline-size: var(--wx-leaf-width); block-size: var(--wx-leaf-height); display: flex; align-items: center; gap: .92rem; padding-left: clamp(2.25rem, 8vw, 3.1rem); padding-right: 1.45rem; color: #f8efdb; text-decoration: none; font-weight: 680; letter-spacing: -.01em; background: var(--leaf-color); border-radius: 0 999px 999px 0 / 0 82% 82% 0; box-shadow: var(--wx-shadow), inset 0 1px rgba(255,255,255,.16), inset 0 -1px rgba(0,0,0,.18); clip-path: path("M0,0 H292 C350,0 384,15 407,34 C383,55 345,66 292,66 H0 Z"); transform-origin: left bottom; transform: translateX(-9%) translateY(1rem) scale(.94); opacity: 0; filter: saturate(.96); transition: transform .36s var(--wx-ease-organic), opacity .26s ease, filter .2s ease; transition-delay: calc(var(--i) * 34ms); pointer-events: none; overflow: hidden; }
.wx-leaf-nav__leaf::before { content: ""; position: absolute; inset: .15rem .4rem .15rem 0; opacity: .18; background: radial-gradient(ellipse at 22% 120%, transparent 0 38%, rgba(255,255,255,.5) 39% 39.5%, transparent 40%), linear-gradient(11deg, transparent 47%, rgba(255,255,255,.34) 48%, transparent 49.5%); mix-blend-mode: screen; pointer-events:none; }
.wx-leaf-nav__leaf::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.18), transparent 44%, rgba(255,255,255,.08)); opacity: .72; pointer-events: none; }
body.is-leaf-nav-open .wx-leaf-nav__leaf { transform: translateX(0) translateY(0) scale(1); opacity: 1; pointer-events: auto; }
body.is-leaf-nav-open .wx-leaf-nav__leaf.is-active { transform: translateX(.22rem) translateY(-.08rem) scale(1.055); filter: brightness(1.1) saturate(1.05); z-index: 4; }
body.is-leaf-nav-open .wx-leaf-nav__leaf.is-neighbor { transform: translateX(.08rem) scale(1.018); filter: brightness(1.04); }
.wx-leaf-nav__icon { flex: 0 0 1.38rem; inline-size: 1.38rem; block-size: 1.38rem; position: relative; z-index: 1; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: .94; }
.wx-leaf-nav__leaf span { position: relative; z-index: 1; white-space: nowrap; font-size: clamp(.95rem, 3.7vw, 1.08rem); text-shadow: 0 1px 1px rgba(0,0,0,.18); }

.wx-leaf-nav__trigger { position: absolute; left: var(--wx-trigger-inset); bottom: var(--wx-trigger-bottom); inline-size: var(--wx-trigger-size); block-size: var(--wx-trigger-size); border: 0; border-radius: 50%; background: radial-gradient(circle at 35% 28%, #fff5d8, #d5bd83 57%, #4b6445 58%, #1f462e 100%); color: #153a25; box-shadow: 0 .9rem 1.8rem rgba(10, 30, 18, .28), inset 0 1px rgba(255,255,255,.7); pointer-events: auto; display: grid; place-items: center; cursor: pointer; transition: transform .25s ease, box-shadow .25s ease; }
.wx-leaf-nav__trigger:hover, .wx-leaf-nav__trigger:focus-visible { transform: translateY(-2px) scale(1.03); box-shadow: 0 1rem 2.2rem rgba(10,30,18,.34), inset 0 1px rgba(255,255,255,.75); }
body.is-leaf-nav-open .wx-leaf-nav__trigger { transform: scale(.96); }
.wx-leaf-nav__fingerprint { inline-size: 2rem; block-size: 2rem; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; opacity: .94; }
.wx-leaf-nav__hint { position: absolute; left: calc(var(--wx-trigger-inset) + var(--wx-trigger-size) + .82rem); bottom: calc(var(--wx-trigger-bottom) + 1.25rem); text-transform: uppercase; font-size: .64rem; letter-spacing: .22em; color: rgba(24,55,35,.65); font-weight: 750; pointer-events: none; transition: opacity .2s ease; }
body.is-leaf-nav-open .wx-leaf-nav__hint { opacity: .72; }

@media (min-width: 768px) { .wx-leaf-nav { display: none; } }
@media (prefers-reduced-motion: reduce) { .wx-leaf-nav__leaf, .wx-leaf-nav__trigger, .wx-leaf-nav__veil { transition: none; } }