@property --nav-progress{syntax:"<number>";inherits:true;initial-value:0}@keyframes nav-scrolled{0%{--nav-progress:0}to{--nav-progress:1}}.navbar{background-color:color-mix(in srgb, var(--background) 88%, transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid #0000;transition:background-color .2s,-webkit-backdrop-filter .2s,backdrop-filter .2s,border-color .2s}@supports (animation-timeline:scroll()){.navbar{--nav-progress:0;background-color:color-mix(in srgb, var(--background) calc(var(--nav-progress) * 88%), transparent);-webkit-backdrop-filter:blur(calc(var(--nav-progress) * 12px));backdrop-filter:blur(calc(var(--nav-progress) * 12px));border-bottom-color:color-mix(in srgb, var(--line) calc(var(--nav-progress) * 100%), transparent);transition:none;animation:linear both nav-scrolled;animation-timeline:scroll(root);animation-range:0 100px}}@media (prefers-reduced-motion:reduce){@supports (animation-timeline:scroll()){.navbar{--nav-progress:1;animation:none}}}