.dashboard-mode-slot,
#menu-page {
    --dashboard-mode-button-size: 156px;
}

.dashboard-mode-slot {
    position: relative;
    margin: 0 10px;
    text-align: center;
    display: grid;
    justify-items: center;
}

.hm-mode-button.btn-mode {
    width: var(--dashboard-mode-button-size);
    height: var(--dashboard-mode-button-size);
    display: inline-grid;
    place-items: center;
    border: 0;
    padding: 0;
    margin: 10px 10px 20px;
    background: transparent;
    border-radius: 50%;
    cursor: pointer;
    user-select: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    box-shadow: none;
    outline: none;
    overflow: visible;
}

@media (max-width: 768px) {
    .hm-mode-button.btn-mode {
        width: calc(var(--dashboard-mode-button-size) - 20px);
        height: calc(var(--dashboard-mode-button-size) - 20px);
        margin: 8px 8px 18px;
    }
}

.hm-mode-button.btn-mode:hover,
.hm-mode-button.btn-mode:focus-visible,
.hm-mode-button.btn-mode:active {
    transform: none;
    box-shadow: none;
}

.hm-mode-button.btn-mode:focus {
    outline: none;
}

.hm-mode-button__svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
    pointer-events: none;
}

.hm-mode-button .button-wrap,
.hm-mode-button .button-core,
.hm-mode-button .outer-ring,
.hm-mode-button .inner-glow,
.hm-mode-button .outer-halo,
.hm-mode-button .outer-halo-press,
.hm-mode-button .shadow-disc,
.hm-mode-button .label,
.hm-mode-button .subtle-sheen,
.hm-mode-button .hex-glint,
.hm-mode-button .highlight-arc,
.hm-mode-button .micro-ring,
.hm-mode-button .button-darken,
.hm-mode-button .press-bloom,
.hm-mode-button .press-core-glow,
.hm-mode-button .press-edge {
    transition: all 240ms cubic-bezier(.2, .8, .2, 1);
    transform-origin: 90px 90px;
}

.hm-mode-button .button-wrap {
    animation: hmModeButtonIdleFloat 4.2s ease-in-out infinite;
}

.hm-mode-button .outer-ring {
    opacity: 0.97;
}

.hm-mode-button .micro-ring {
    opacity: 0.22;
}

.hm-mode-button .inner-glow {
    opacity: 0.1;
}

.hm-mode-button .outer-halo,
.hm-mode-button .outer-halo-press {
    opacity: 0;
    transform: scale(0.95);
}

.hm-mode-button .button-darken,
.hm-mode-button .subtle-sheen,
.hm-mode-button .hex-glint,
.hm-mode-button .press-bloom,
.hm-mode-button .press-core-glow,
.hm-mode-button .press-edge {
    opacity: 0;
}

.hm-mode-button .label {
    letter-spacing: 0.35px;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.30));
}

.hm-mode-button:hover .button-wrap,
.hm-mode-button:focus-visible .button-wrap {
    animation: hmModeButtonHoverFloat 2.8s ease-in-out infinite;
}

.hm-mode-button:hover .outer-ring,
.hm-mode-button:focus-visible .outer-ring {
    animation: hmModeButtonRingPulse 1.85s ease-in-out infinite;
    stroke: var(--hm-mode-button-ring-hover);
    stroke-width: 4.25;
    opacity: 1;
}

.hm-mode-button:hover .micro-ring,
.hm-mode-button:focus-visible .micro-ring {
    opacity: 0.46;
    stroke: rgba(255, 255, 255, 0.56);
}

.hm-mode-button:hover .inner-glow,
.hm-mode-button:focus-visible .inner-glow {
    animation: hmModeButtonGlowPulse 1.85s ease-in-out infinite;
    opacity: 0.32;
}

.hm-mode-button:hover .outer-halo,
.hm-mode-button:focus-visible .outer-halo {
    opacity: 0.58;
    transform: scale(1.08);
    animation: hmModeButtonHaloBreath 1.85s ease-in-out infinite;
}

.hm-mode-button:hover .button-core,
.hm-mode-button:focus-visible .button-core {
    transform: translateY(-2px) scale(1.018);
}

.hm-mode-button:hover .button-darken,
.hm-mode-button:focus-visible .button-darken {
    opacity: 1;
}

.hm-mode-button:hover .highlight-arc,
.hm-mode-button:focus-visible .highlight-arc {
    opacity: 1;
}

.hm-mode-button:hover .subtle-sheen,
.hm-mode-button:focus-visible .subtle-sheen {
    opacity: 1;
    animation: hmModeButtonSheen 2.7s linear infinite;
}

.hm-mode-button:hover .hex-glint.g1,
.hm-mode-button:focus-visible .hex-glint.g1 {
    animation: hmModeButtonHexGlint 2.3s ease-in-out infinite;
    animation-delay: 0s;
}

.hm-mode-button:hover .hex-glint.g2,
.hm-mode-button:focus-visible .hex-glint.g2 {
    animation: hmModeButtonHexGlint 2.3s ease-in-out infinite;
    animation-delay: 0.55s;
}

.hm-mode-button:hover .hex-glint.g3,
.hm-mode-button:focus-visible .hex-glint.g3 {
    animation: hmModeButtonHexGlint 2.3s ease-in-out infinite;
    animation-delay: 1.1s;
}

.hm-mode-button:active .button-wrap {
    animation: none;
}

.hm-mode-button:active .button-core {
    transform: translateY(0.5px) scale(0.994);
}

.hm-mode-button:active .outer-ring {
    transform: scale(1.014);
    opacity: 1;
    stroke: #d9c9ff;
    stroke-width: 4.55;
    animation: none;
    filter: saturate(1.05);
}

.hm-mode-button:active .outer-halo {
    opacity: 0.12;
    transform: scale(1.03);
    animation: none;
}

.hm-mode-button:active .outer-halo-press {
    opacity: 0.78;
    transform: scale(1.12);
    animation: none;
}

.hm-mode-button:active .inner-glow {
    opacity: 0.44;
    transform: scale(1.08);
    animation: none;
    fill: #d8c1ff;
}

.hm-mode-button:active .button-darken {
    opacity: 0.08;
}

.hm-mode-button:active .press-bloom {
    opacity: 0.9;
}

.hm-mode-button:active .press-core-glow {
    opacity: 0.86;
}

.hm-mode-button:active .press-edge {
    opacity: 0.72;
}

.hm-mode-button:active .highlight-arc {
    opacity: 1;
    stroke: rgba(244, 238, 255, 0.92);
}

.hm-mode-button:active .micro-ring {
    opacity: 0.6;
    stroke: rgba(231, 220, 255, 0.8);
}

.hm-mode-button:active .shadow-disc {
    transform: scale(1.01);
    opacity: 0.07;
}

.btn-mode.loading .hm-mode-button__svg {
    opacity: 0.3;
}

@media (prefers-reduced-motion: reduce) {
    .hm-mode-button .button-wrap,
    .hm-mode-button .button-core,
    .hm-mode-button .outer-ring,
    .hm-mode-button .inner-glow,
    .hm-mode-button .outer-halo,
    .hm-mode-button .outer-halo-press,
    .hm-mode-button .shadow-disc,
    .hm-mode-button .label,
    .hm-mode-button .subtle-sheen,
    .hm-mode-button .hex-glint,
    .hm-mode-button .highlight-arc,
    .hm-mode-button .micro-ring,
    .hm-mode-button .button-darken,
    .hm-mode-button .press-bloom,
    .hm-mode-button .press-core-glow,
    .hm-mode-button .press-edge {
        animation: none !important;
        transition-duration: 140ms;
    }
}

@keyframes hmModeButtonIdleFloat {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-1px);
    }
}

@keyframes hmModeButtonHoverFloat {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-3px);
    }
}

@keyframes hmModeButtonRingPulse {
    0%,
    100% {
        transform: scale(1);
        opacity: 0.98;
    }

    50% {
        transform: scale(1.026);
        opacity: 1;
    }
}

@keyframes hmModeButtonGlowPulse {
    0%,
    100% {
        transform: scale(1);
        opacity: 0.23;
    }

    50% {
        transform: scale(1.09);
        opacity: 0.36;
    }
}

@keyframes hmModeButtonHaloBreath {
    0%,
    100% {
        transform: scale(1.03);
        opacity: 0.42;
    }

    50% {
        transform: scale(1.08);
        opacity: 0.58;
    }
}

@keyframes hmModeButtonHexGlint {
    0% {
        opacity: 0;
        transform: scale(0.45) rotate(0deg);
    }

    14% {
        opacity: 0.94;
    }

    34% {
        opacity: 0.94;
        transform: scale(1) rotate(8deg);
    }

    100% {
        opacity: 0;
        transform: scale(0.45) rotate(14deg);
    }
}

@keyframes hmModeButtonSheen {
    0% {
        transform: translateX(-105px) rotate(-24deg);
        opacity: 0;
    }

    12% {
        opacity: 0.24;
    }

    40% {
        opacity: 0.24;
    }

    56% {
        opacity: 0;
    }

    100% {
        transform: translateX(132px) rotate(-24deg);
        opacity: 0;
    }
}