.navigation-ring{grid-template-areas:"a ." ". b" ". c" "d ."}.navigation-ring button{height:75px;line-height:1;margin:0;aspect-ratio:1;font-size:20px;position:relative;border-radius:500px;-webkit-user-select:none;-moz-user-select:none;user-select:none}.navigation-ring button,.navigation-ring button span{display:flex;align-items:center;justify-content:center}.navigation-ring button span{transform-origin:center;text-align:center;opacity:.5;mix-blend-mode:overlay}.navigation-ring button:focus-visible,.navigation-ring button:hover{transform:scale(1.025);background-color:hsla(0,0%,100%,.25)}.navigation-ring button:focus-visible span,.navigation-ring button:hover span{transform:scale(1.1);opacity:.75}.navigation-ring button:active{transform:scale(.998)}.navigation-ring button:focus-visible{outline:none}.navigation-ring button:first-child{grid-area:a}.navigation-ring button:nth-child(2){grid-area:b}.navigation-ring button:nth-child(3){grid-area:c}.navigation-ring button:nth-child(4){grid-area:d}.navigation-ring button:after{content:"";position:absolute;bottom:10%;height:6px;width:6px;background-color:#fff;opacity:0;transform:scale(0);transition:all .2s ease;border-radius:500px}.navigation-ring button.active span{opacity:1;transform:scale(1.1)}.navigation-ring button.active:after{opacity:1;transform:scale(1)}.navigation-ring:after{content:"";position:absolute;height:100%;border-radius:50%;aspect-ratio:1;border:solid #fff;mix-blend-mode:overlay;left:-100%;transform:scale(.5)}