/* Site navigation shared by the landing page, the library and the credits (the piano page has its own toolbar) */
.sitenav { position:sticky; top:0; z-index:50; height:52px; background:rgba(0,0,0,.72); backdrop-filter:saturate(180%) blur(20px); -webkit-backdrop-filter:saturate(180%) blur(20px); border-bottom:1px solid rgba(255,255,255,.08); font:400 13px/1 "Geist",-apple-system,"SF Pro Text",system-ui,sans-serif; color:#f5f5f7; }
.sitenav .in { width:min(1120px, calc(100% - 48px)); margin:0 auto; height:100%; display:flex; align-items:center; gap:32px; }
.sitenav a { color:inherit; text-decoration:none; }
.sitenav .logo { font:500 19px/1 "Geist",-apple-system,system-ui,sans-serif; letter-spacing:-.02em; display:flex; align-items:center; gap:10px; }
.sitenav .logo svg { width:22px; height:22px; }
.sitenav .links { display:flex; gap:28px; margin-left:auto; color:#a1a1a6; }
.sitenav .links a { transition:color 150ms cubic-bezier(.22,1,.36,1); }
.sitenav .links a:hover, .sitenav .links a[aria-current="page"] { color:#f5f5f7; }
.sitenav .cta { display:inline-flex; align-items:center; justify-content:center; height:36px; padding:0 18px; border-radius:980px; background:#f5f5f7; color:#000; font:500 14px/1 "Geist",-apple-system,system-ui,sans-serif; white-space:nowrap; transition:background-color 150ms cubic-bezier(.22,1,.36,1), transform 150ms cubic-bezier(.22,1,.36,1); }
.sitenav .cta:hover { background:#fff; } .sitenav .cta:active { transform:scale(.97); }
.sitenav :focus-visible { outline:2px solid #22d3ee; outline-offset:3px; border-radius:6px; }
@media (max-width:900px) { .sitenav .links { display:none; } .sitenav .in { gap:16px; } .sitenav .cta { margin-left:auto; } }