Glass Navbar with Scroll Shrink

Build a floating glass navbar: centered, 86% width, 16px radius, translucent white with backdrop-filter blur(14px) and a hairline white border, logo left, links and a black CTA right. On scroll past 40px it shrinks padding and width smoothly. Mobile: links collapse into an animated hamburger sheet.

<style>*{box-sizing:border-box;margin:0}body{font-family:Inter,system-ui,sans-serif;overflow:hidden}</style><style>body{height:100vh;background:url('data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 10 10%22><circle cx=%223%22 cy=%223%22 r=%224%22 fill=%22%23ffb3c7%22/><circle cx=%227%22 cy=%227%22 r=%224%22 fill=%22%23a5b4ff%22/></svg>') center/cover}
nav{margin:18px auto;width:86%;display:flex;align-items:center;justify-content:space-between;padding:12px 18px;border-radius:16px;background:#ffffff66;backdrop-filter:blur(14px);border:1px solid #fff8;font-size:14px}nav div{display:flex;gap:18px}nav a{color:#222;text-decoration:none}.c{background:#111;color:#fff!important;padding:6px 12px;border-radius:10px}</style>
<nav><b>Kiln</b><div><a href="#">Product</a><a href="#">Pricing</a><a href="#">Docs</a><a class="c" href="#">Get started</a></div></nav>