:root {
    --ease-btn: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-btn-soft: cubic-bezier(0.22, 1, 0.36, 1);
    --dur-btn: 0.25s;
    --header-height: 56px;
    --header-height-mobile: 48px;
    --btn-size: 28px;
    --btn-size-mobile: 22px;
    --btn-gap: 0.5rem;
    --btn-gap-mobile: 0.35rem;
    --greeting-slot-size: 44px;
    --greeting-slot-size-mobile: 40px;
}

.myst-header-container {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border: none !important;
    border-bottom: none !important;
    border-top: none !important;
    box-shadow: none !important;
    outline: none !important;
    height: var(--header-height);
    min-height: var(--header-height);
    max-height: var(--header-height);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    overflow: visible;
    contain: layout;
    background: transparent !important;
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
}

    .myst-header-container.is-mobile {
        height: var(--header-height-mobile);
        min-height: var(--header-height-mobile);
        max-height: var(--header-height-mobile);
    }

    .myst-header-container > .rz-stack,
    .myst-header-container > .rz-stack > .rz-stack,
    .myst-header-container .rz-stack,
    .myst-header-icons-group,
    .myst-header-title-group,
    .myst-header-inner {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        border: none !important;
        border-bottom: none !important;
        box-shadow: none !important;
        height: 100%;
        min-height: 0;
        box-sizing: border-box;
        background: transparent !important;
    }

html, html.rz-light, body, body > *:first-child, body > div:first-child, #aitopia, #aitopia > *:first-child, .rz-layout, .rz-layout-content, .rz-body {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.myst-header-title-group {
    height: 100%;
    overflow: hidden;
}

.header-greeting-slot {
    width: var(--greeting-slot-size);
    height: var(--greeting-slot-size);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    transform: translateZ(0);
}

    .header-greeting-slot.is-mobile {
        width: var(--greeting-slot-size-mobile);
        height: var(--greeting-slot-size-mobile);
    }

    .header-greeting-slot[aria-hidden="true"] {
        visibility: hidden;
    }

.myst-header-title-group .rz-text,
.myst-header-container .rz-text,
.myst-header-title {
    line-height: 1.2 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 1.05rem;
    font-weight: 700;
}

.is-mobile .myst-header-title-group .rz-text,
.is-mobile .rz-text.rz-text-h6,
.is-mobile .myst-header-title {
    font-size: 0.9rem;
}

.myst-header-icons-group {
    height: 100%;
    flex-wrap: nowrap !important;
    overflow: visible;
    flex-shrink: 0;
    border: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    gap: var(--btn-gap) !important;
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1200px;
}

.is-mobile .myst-header-icons-group {
    gap: var(--btn-gap-mobile) !important;
}


.button-sphere {
    --sphere-src: var(--rz-primary, #1976d2);
    --sphere-lighter: color-mix(in srgb, var(--sphere-src), #fff 70%);
    --sphere-light: color-mix(in srgb, var(--sphere-src), #fff 38%);
    --sphere-base: var(--sphere-src);
    --sphere-dark: color-mix(in srgb, var(--sphere-src), #000 28%);
    --sphere-darker: color-mix(in srgb, var(--sphere-src), #000 55%);
    --sphere-hi: rgba(255, 255, 255, 0.95);
    --sphere-hi-soft: rgba(255, 255, 255, 0.40);
    --sphere-rim: rgba(255, 255, 255, 0.45);
    --sphere-ao: rgba(0, 0, 0, 0.55);
    --sphere-drop-1: rgba(0, 0, 0, 0.28);
    --sphere-drop-2: rgba(0, 0, 0, 0.18);
    --sphere-edge: rgba(255, 255, 255, 0.25);
    --sphere-glow: color-mix(in srgb, var(--sphere-src), transparent 60%);
    position: relative;
    width: var(--btn-size);
    height: var(--btn-size);
    margin: 0 !important;
    border: none !important;
    border-radius: 50%;
    cursor: pointer;
    background-image: radial-gradient(circle at 32% 28%, var(--sphere-hi) 0%, var(--sphere-hi-soft) 8%, transparent 28%), radial-gradient(circle at 30% 25%, var(--sphere-hi-soft) 0%, transparent 45%), radial-gradient(circle at 50% 130%, var(--sphere-ao) 0%, transparent 65%), radial-gradient(circle at 50% 115%, var(--sphere-rim) 0%, transparent 30%), linear-gradient(180deg, var(--sphere-lighter) 0%, var(--sphere-light) 35%, var(--sphere-base) 70%, var(--sphere-dark) 100%);
    box-shadow: inset 0 -4px 8px var(--sphere-ao), inset 0 2px 3px var(--sphere-hi), inset 0 0 0 1px var(--sphere-edge), 0 1px 0 var(--sphere-rim), 0 5px 10px var(--sphere-drop-1), 0 8px 18px var(--sphere-drop-2);
    will-change: transform, box-shadow, filter;
    transform: translateZ(0) scale(1);
    backface-visibility: hidden;
    transform-style: preserve-3d;
    perspective: 1000px;
    transition: transform var(--dur-btn) var(--ease-btn), box-shadow var(--dur-btn) var(--ease-btn-soft), filter 0.3s ease, background-image 0.4s ease;
    flex-shrink: 0;
    box-sizing: border-box;
    outline: none !important;
    animation: sphere-entrance 0.5s var(--ease-btn) backwards, sphere-float 4s ease-in-out infinite 0.5s;
    animation-delay: calc(var(--idx, 0) * 0.08s), calc(0.5s + var(--idx, 0) * 0.4s);
}

.rz-light .button-sphere,
html:not(.rz-dark) .button-sphere {
    --sphere-hi: rgba(255, 255, 255, 0.95);
    --sphere-hi-soft: rgba(255, 255, 255, 0.40);
    --sphere-rim: rgba(255, 255, 255, 0.45);
    --sphere-ao: rgba(0, 0, 0, 0.45);
    --sphere-drop-1: rgba(0, 0, 0, 0.25);
    --sphere-drop-2: rgba(0, 0, 0, 0.15);
    --sphere-edge: rgba(255, 255, 255, 0.30);
}

.rz-dark .button-sphere {
    --sphere-hi: rgba(255, 255, 255, 0.75);
    --sphere-hi-soft: rgba(255, 255, 255, 0.22);
    --sphere-rim: rgba(255, 255, 255, 0.18);
    --sphere-ao: rgba(0, 0, 0, 0.70);
    --sphere-drop-1: rgba(0, 0, 0, 0.55);
    --sphere-drop-2: rgba(0, 0, 0, 0.40);
    --sphere-edge: rgba(255, 255, 255, 0.12);
    --sphere-lighter: color-mix(in srgb, var(--sphere-src), #fff 78%);
    --sphere-light: color-mix(in srgb, var(--sphere-src), #fff 45%);
}

.button-sphere--primary {
    --sphere-src: var(--rz-primary, #1976d2);
}

.button-sphere--secondary {
    --sphere-src: var(--rz-secondary, #ff6d00);
}

.button-sphere--info {
    --sphere-src: var(--rz-info, #03a9f4);
}

.button-sphere--success {
    --sphere-src: var(--rz-success, #4caf50);
}

.button-sphere--warning {
    --sphere-src: var(--rz-warning, #ff9800);
}

.button-sphere--danger,
.button-sphere--error {
    --sphere-src: var(--rz-danger, var(--rz-error, #f44336));
}

.button-sphere--neutral {
    --sphere-src: var(--rz-base-500, #9e9e9e);
}

.button-sphere--base {
    --sphere-src: var(--rz-base-400, #bdbdbd);
}

.button-sphere--text {
    --sphere-src: var(--rz-text-title, rgba(0,0,0,.7));
}

.myst-header-icons-group .button-sphere.button-sphere--primary,
.myst-header-icons-group .button-sphere[data-variant="primary"] {
    --sphere-src: var(--rz-primary, #1976d2);
}

.myst-header-icons-group .button-sphere.button-sphere--secondary,
.myst-header-icons-group .button-sphere[data-variant="secondary"] {
    --sphere-src: var(--rz-secondary, #ff6d00);
}

.myst-header-icons-group .button-sphere.button-sphere--info,
.myst-header-icons-group .button-sphere[data-variant="info"] {
    --sphere-src: var(--rz-info, #03a9f4);
}

.myst-header-icons-group .button-sphere.button-sphere--success,
.myst-header-icons-group .button-sphere[data-variant="success"] {
    --sphere-src: var(--rz-success, #4caf50);
}

.myst-header-icons-group .button-sphere.button-sphere--warning,
.myst-header-icons-group .button-sphere[data-variant="warning"] {
    --sphere-src: var(--rz-warning, #ff9800);
}

.myst-header-icons-group .button-sphere.button-sphere--danger,
.myst-header-icons-group .button-sphere.button-sphere--error,
.myst-header-icons-group .button-sphere[data-variant="danger"],
.myst-header-icons-group .button-sphere[data-variant="error"] {
    --sphere-src: var(--rz-danger, var(--rz-error, #f44336));
}

.myst-header-icons-group .button-sphere.button-sphere--neutral,
.myst-header-icons-group .button-sphere[data-variant="neutral"] {
    --sphere-src: var(--rz-base-500, #9e9e9e);
}

.myst-header-icons-group .button-sphere.button-sphere--base,
.myst-header-icons-group .button-sphere[data-variant="base"] {
    --sphere-src: var(--rz-base-400, #bdbdbd);
}

.myst-header-icons-group .button-sphere.button-sphere--text,
.myst-header-icons-group .button-sphere[data-variant="text"] {
    --sphere-src: var(--rz-text-title, rgba(0,0,0,.7));
}

.myst-header-icons-group:not(.single-color) > .button-sphere:not([data-variant]):not([class*="--"]):nth-child(8n+1) {
    --sphere-src: var(--rz-primary, #1976d2);
}

.myst-header-icons-group:not(.single-color) > .button-sphere:not([data-variant]):not([class*="--"]):nth-child(8n+2) {
    --sphere-src: var(--rz-info, #03a9f4);
}

.myst-header-icons-group:not(.single-color) > .button-sphere:not([data-variant]):not([class*="--"]):nth-child(8n+3) {
    --sphere-src: var(--rz-success, #4caf50);
}

.myst-header-icons-group:not(.single-color) > .button-sphere:not([data-variant]):not([class*="--"]):nth-child(8n+4) {
    --sphere-src: var(--rz-warning, #ff9800);
}

.myst-header-icons-group:not(.single-color) > .button-sphere:not([data-variant]):not([class*="--"]):nth-child(8n+5) {
    --sphere-src: var(--rz-danger, #f44336);
}

.myst-header-icons-group:not(.single-color) > .button-sphere:not([data-variant]):not([class*="--"]):nth-child(8n+6) {
    --sphere-src: var(--rz-secondary, #ff6d00);
}

.myst-header-icons-group:not(.single-color) > .button-sphere:not([data-variant]):not([class*="--"]):nth-child(8n+7) {
    --sphere-src: var(--rz-base-400, #bdbdbd);
}

.myst-header-icons-group:not(.single-color) > .button-sphere:not([data-variant]):not([class*="--"]):nth-child(8n+8) {
    --sphere-src: var(--rz-base-600, #757575);
}

.myst-header-icons-group.single-color > .button-sphere {
    --sphere-src: var(--rz-primary, #1976d2);
}

@keyframes sphere-float {
    0%, 100% {
        transform: translate3d(0, 0, 0) scale(1) rotateX(0deg) rotateY(0deg);
        box-shadow: inset 0 -4px 8px var(--sphere-ao), inset 0 2px 3px var(--sphere-hi), inset 0 0 0 1px var(--sphere-edge), 0 1px 0 var(--sphere-rim), 0 5px 10px var(--sphere-drop-1), 0 8px 18px var(--sphere-drop-2);
    }

    50% {
        transform: translate3d(0, -1.5px, 0) scale(1.015) rotateX(2deg) rotateY(-1deg);
        box-shadow: inset 0 -4px 8px var(--sphere-ao), inset 0 2px 3px var(--sphere-hi), inset 0 0 0 1px var(--sphere-edge), 0 1px 0 var(--sphere-rim), 0 7px 12px var(--sphere-drop-1), 0 11px 22px var(--sphere-drop-2);
    }
}

@keyframes sphere-entrance {
    0% {
        transform: translate3d(0, -20px, -40px) scale(0.3) rotateX(45deg);
        opacity: 0;
    }

    60% {
        transform: translate3d(0, 2px, 10px) scale(1.15) rotateX(-8deg);
        opacity: 1;
    }

    100% {
        transform: translate3d(0, 0, 0) scale(1) rotateX(0deg);
        opacity: 1;
    }
}

.is-mobile .button-sphere {
    width: var(--btn-size-mobile);
    height: var(--btn-size-mobile);
    box-shadow: inset 0 -3px 6px var(--sphere-ao), inset 0 1px 2px var(--sphere-hi), inset 0 0 0 1px var(--sphere-edge), 0 3px 6px var(--sphere-drop-1), 0 5px 12px var(--sphere-drop-2);
    animation: sphere-entrance 0.5s var(--ease-btn) backwards, sphere-float-mobile 4s ease-in-out infinite 0.5s;
    animation-delay: calc(var(--idx, 0) * 0.08s), calc(0.5s + var(--idx, 0) * 0.4s);
}

@keyframes sphere-float-mobile {
    0%, 100% {
        transform: translate3d(0, 0, 0) scale(1);
    }

    50% {
        transform: translate3d(0, -1px, 0) scale(1.02);
    }
}

@media (hover: hover) {
    .button-sphere:hover {
        animation-play-state: paused;
        transform: translate3d(0, -5px, 30px) scale(1.12) rotateX(8deg) rotateY(-6deg);
        box-shadow: inset 0 -4px 8px var(--sphere-ao), inset 0 2px 3px var(--sphere-hi), inset 0 0 0 1px var(--sphere-edge), 0 1px 0 var(--sphere-rim), 0 12px 20px var(--sphere-drop-1), 0 18px 35px var(--sphere-drop-2), 0 0 22px var(--sphere-glow);
        filter: brightness(1.10) saturate(1.08);
        transition: transform 0.4s var(--ease-btn), box-shadow 0.4s var(--ease-btn-soft), filter 0.3s ease;
    }
}

.button-sphere:active {
    animation-play-state: paused;
    transform: translate3d(0, 2px, 0) scale(0.88, 0.92) rotateX(0deg) rotateY(0deg);
    box-shadow: inset 0 4px 7px var(--sphere-ao), inset 0 -1px 1px var(--sphere-hi-soft), inset 0 0 0 1px rgba(0, 0, 0, 0.15), 0 1px 1px var(--sphere-drop-1), 0 2px 4px var(--sphere-drop-2);
    filter: brightness(0.92);
    transition-duration: 0.08s;
}

.button-sphere:focus-visible {
    outline: 2px solid var(--rz-primary, #4a9eff) !important;
    outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
    .button-sphere {
        animation: none !important;
        transition: none;
        will-change: auto;
    }

        .button-sphere:hover,
        .button-sphere:active {
            transform: translateZ(0);
            filter: none;
        }
}

.myst-header-container.rz-mt-0,
.myst-header-container.is-mobile,
.myst-header-container.is-desktop,
.myst-header-container:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
    border: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

.myst-header-container *,
.myst-header-container *::before,
.myst-header-container *::after {
    border-bottom-color: transparent !important;
}

.myst-header-container .rz-btn:not(:focus-visible) {
    outline: none !important;
}