.nb-dot-button{-webkit-user-select:none;user-select:none;transform-style:preserve-3d;display:grid;position:relative;cursor:pointer;width:fit-content}.nb-dot-button__bg{grid-area:1/1;overflow:clip}.nb-dot-button__inner{z-index:1;grid-area:1/1;align-items:center;display:grid;overflow:clip}.nb-dot-button__dot-wrap{grid-area:1/1;display:grid}.nb-dot-button__dot{height:var(--btn-color-tunes-dot-size);width:var(--btn-color-tunes-dot-size);border-radius:50%;grid-area:1/1;display:block}.nb-dot-button__dot--third{rotate:120deg}.nb-dot-button__dot--second{rotate:120deg}.nb-dot-button__dot--first{rotate:120deg}.nb-dot-button__text{transform-origin:0%;grid-area:1/2;display:block}.nb-dot-button{--elastic-ease-out:linear(0,.007 .9%,.026 1.8%,.113 4%,.605 12.3%,.807 16.5%,.947 20.9%,.992 23.2%,1.024 25.6%,1.045 28.7%,1.051 32.3%,1.011 47.8%,1 55.7%,1);--smooth-ease:cubic-bezier(.32,.72,0,1);--color-ease:cubic-bezier(.216,.62,.356,1);transition:transform var(--dot-duration) var(--elastic-ease-out);-webkit-tap-highlight-color:transparent}.nb-dot-button__bg{transition:scale var(--dot-duration) var(--smooth-ease),background-color calc(var(--dot-duration) * .5) var(--color-ease)}.nb-dot-button__dot-wrap{transition:rotate calc(var(--dot-duration) * 1.5) var(--elastic-ease-out)}.nb-dot-button__dot{transition:rotate calc(var(--dot-duration) * 1.5) var(--elastic-ease-out),scale calc(var(--dot-duration) * 1.5) var(--elastic-ease-out),opacity calc(var(--dot-duration) * .5) ease-out}.nb-dot-button__dot:is(.nb-dot-button__dot--first,.nb-dot-button__dot--second,.nb-dot-button__dot--third){opacity:0;scale:.25}.nb-dot-button__text{transition:translate calc(var(--text-duration) * 1.5) var(--elastic-ease-out),rotate calc(var(--text-duration) * 1.5) var(--elastic-ease-out),opacity calc(var(--text-duration) * .5) ease-out,color calc(var(--text-duration) * .5) var(--color-ease)}.nb-dot-button__inner::after{content:attr(data-text);display:block;grid-area:1/2;translate:-1em 2em 0;rotate:40deg;opacity:0;transform-origin:left center;transition:translate calc(var(--text-duration) * 1.5) var(--elastic-ease-out),rotate calc(var(--text-duration) * 1.5) var(--elastic-ease-out),opacity calc(var(--text-duration) * .5) ease-out}@media (hover:hover) and (pointer:fine){.nb-dot-button:is(:hover,:focus-visible) .nb-dot-button__dot{rotate:-120deg;opacity:0}.nb-dot-button:is(:hover,:focus-visible) .nb-dot-button__dot:is(.nb-dot-button__dot--first,.nb-dot-button__dot--second,.nb-dot-button__dot--third){transition-delay:calc(var(--index) * .032s);rotate:0deg;scale:.99;opacity:1}.nb-dot-button:is(:hover,:focus-visible) .nb-dot-button__text{rotate:-40deg;translate:-1em -2em 0;opacity:0}.nb-dot-button:is(:hover,:focus-visible) .nb-dot-button__inner::after{rotate:0deg;translate:0 0 0;opacity:1}}