.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, 0.007 0.9%, 0.026 1.8%, 0.113 4%, 0.605 12.3%, 0.807 16.5%, 0.947 20.9%, 0.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:#fff0}.nb-dot-button__bg{transition:scale var(--dot-duration) var(--smooth-ease),background-color calc(var(--dot-duration) * 0.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) * 0.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) * 0.5) ease-out,color calc(var(--text-duration) * 0.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) * 0.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}}