/* Public / preview profile card — driven by CSS variables from theme_json */
.mm-profile-card {
    font-family: var(--mm-font, 'Outfit', sans-serif);
    color: var(--mm-text, #fff);
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
}

.mm-profile-card-inner {
    background: var(--mm-card-bg, rgba(124, 77, 255, 0.2));
    border: 1px solid var(--mm-border, rgba(0, 229, 255, 0.3));
    border-radius: var(--mm-radius, 15px);
    opacity: var(--mm-card-opacity, 0.85);
    backdrop-filter: blur(var(--mm-blur, 8px));
    -webkit-backdrop-filter: blur(var(--mm-blur, 8px));
    padding: 2rem 1.75rem 1.75rem;
    text-align: center;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}

.mm-profile-avatar-wrap {
    position: relative;
    display: block;
    width: 96px;
    margin: 0 auto 1rem;
}

.mm-profile-avatar {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--mm-accent, #00E5FF);
    margin: 0;
    display: block;
    background: rgba(0, 0, 0, 0.25);
}

.mm-profile-uid {
    position: absolute;
    left: 50%;
    bottom: 0.4rem;
    z-index: 2;
    transform: translateX(-50%) translateY(6px) scale(0.96);
    opacity: 0;
    pointer-events: none;
    white-space: nowrap;
    padding: 0.28rem 0.62rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--mm-accent, #00E5FF);
    background: rgba(6, 12, 20, 0.92);
    border: 1px solid color-mix(in srgb, var(--mm-accent, #00E5FF) 70%, transparent);
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.35),
        0 10px 28px rgba(0, 0, 0, 0.45),
        0 0 18px color-mix(in srgb, var(--mm-accent, #00E5FF) 28%, transparent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.mm-profile-avatar-wrap:hover .mm-profile-uid,
.mm-profile-avatar-wrap:focus-within .mm-profile-uid {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
}

@media (prefers-reduced-motion: reduce) {
    .mm-profile-uid {
        transition: none;
    }
}

.mm-avatar-border-none .mm-profile-avatar {
    border: 3px solid transparent;
    box-shadow: none;
}

.mm-avatar-border-soft .mm-profile-avatar {
    border: 3px solid color-mix(in srgb, var(--mm-accent, #00E5FF) 55%, transparent);
    box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.2);
}

.mm-avatar-border-glow .mm-profile-avatar {
    border: 2px solid var(--mm-accent, #00E5FF);
    box-shadow:
        0 0 0 3px color-mix(in srgb, var(--mm-accent, #00E5FF) 35%, transparent),
        0 0 22px color-mix(in srgb, var(--mm-accent, #00E5FF) 55%, transparent);
}

.mm-avatar-border-dashed .mm-profile-avatar {
    border: 3px dashed var(--mm-accent, #00E5FF);
    box-shadow: none;
}

.mm-avatar-border-pixel .mm-profile-avatar {
    border: 4px solid var(--mm-accent, #00E5FF);
    border-radius: 8px;
    image-rendering: pixelated;
    box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.45);
}

.mm-avatar-border-double .mm-profile-avatar {
    border: 3px solid var(--mm-accent, #00E5FF);
    box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.35), 0 0 0 7px color-mix(in srgb, var(--mm-accent, #00E5FF) 55%, transparent);
}

.mm-avatar-border-neon .mm-profile-avatar {
    border: 2px solid #fff;
    box-shadow:
        0 0 8px var(--mm-accent, #00E5FF),
        0 0 18px var(--mm-accent, #00E5FF),
        0 0 32px color-mix(in srgb, var(--mm-accent, #00E5FF) 70%, transparent);
}

.mm-avatar-border-orbit .mm-profile-avatar {
    border: 2px solid transparent;
    background:
        linear-gradient(var(--mm-card-bg, #1a1a2e), var(--mm-card-bg, #1a1a2e)) padding-box,
        conic-gradient(from var(--mm-orbit-angle, 0deg), var(--mm-accent, #00E5FF), transparent 40%, var(--mm-accent, #00E5FF)) border-box;
    animation: mmOrbit 3s linear infinite;
}

@property --mm-orbit-angle {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}

@keyframes mmOrbit {
    to { --mm-orbit-angle: 360deg; }
}

.mm-avatar-border-pulse .mm-profile-avatar {
    border: 2px solid var(--mm-accent, #00E5FF);
    animation: mmPulseRing 1.8s ease-in-out infinite;
}

@keyframes mmPulseRing {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--mm-accent, #00E5FF) 55%, transparent); }
    50% { box-shadow: 0 0 0 10px transparent; }
}

.mm-avatar-border-spark .mm-profile-avatar {
    border: 2px solid var(--mm-accent, #00E5FF);
    animation: mmSpark 2.4s linear infinite;
}

@keyframes mmSpark {
    0% { filter: drop-shadow(0 0 2px var(--mm-accent, #00E5FF)); }
    50% { filter: drop-shadow(0 0 10px var(--mm-accent, #00E5FF)) drop-shadow(0 0 18px #fff); }
    100% { filter: drop-shadow(0 0 2px var(--mm-accent, #00E5FF)); }
}

/* Card surface styles */
.mm-card-style-none .mm-profile-card-inner {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    opacity: 1;
    box-shadow: none;
}

.mm-card-style-glass .mm-profile-card-inner {
    background: var(--mm-card-bg, rgba(124, 77, 255, 0.2));
    backdrop-filter: blur(var(--mm-blur, 8px));
    -webkit-backdrop-filter: blur(var(--mm-blur, 8px));
    opacity: var(--mm-card-opacity, 0.85);
}

.mm-card-style-flat .mm-profile-card-inner {
    background: color-mix(in srgb, var(--mm-bg-solid, #1A237E) 72%, #000);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    opacity: 1;
    box-shadow: none;
}

.mm-card-style-solid .mm-profile-card-inner {
    background: color-mix(in srgb, var(--mm-bg-solid, #1A237E) 55%, #0a0a12);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    opacity: 1;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
}

.mm-card-style-soft .mm-profile-card-inner {
    background: color-mix(in srgb, var(--mm-card-bg, rgba(124,77,255,0.25)) 80%, #fff);
    backdrop-filter: blur(calc(var(--mm-blur, 8px) * 0.5));
    -webkit-backdrop-filter: blur(calc(var(--mm-blur, 8px) * 0.5));
    opacity: var(--mm-card-opacity, 0.9);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.25);
}

.mm-card-style-frosted .mm-profile-card-inner {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(calc(var(--mm-blur, 8px) + 10px)) saturate(1.35);
    -webkit-backdrop-filter: blur(calc(var(--mm-blur, 8px) + 10px)) saturate(1.35);
    opacity: 1;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.mm-card-style-ink .mm-profile-card-inner {
    background: rgba(4, 6, 14, 0.88);
    backdrop-filter: blur(calc(var(--mm-blur, 8px) * 0.4));
    -webkit-backdrop-filter: blur(calc(var(--mm-blur, 8px) * 0.4));
    opacity: 1;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55);
}

.mm-card-style-neon .mm-profile-card-inner {
    background: rgba(8, 10, 24, 0.72);
    backdrop-filter: blur(var(--mm-blur, 8px));
    -webkit-backdrop-filter: blur(var(--mm-blur, 8px));
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--mm-accent, #00E5FF) 45%, transparent),
        0 0 32px color-mix(in srgb, var(--mm-accent, #00E5FF) 28%, transparent),
        inset 0 0 24px color-mix(in srgb, var(--mm-accent, #00E5FF) 12%, transparent);
}

.mm-card-style-outline .mm-profile-card-inner {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    opacity: 1;
    box-shadow: none;
}

.mm-card-style-aurora .mm-profile-card-inner {
    background:
        linear-gradient(145deg,
            color-mix(in srgb, var(--mm-accent, #00E5FF) 22%, transparent),
            color-mix(in srgb, var(--mm-bg-solid, #1A237E) 55%, transparent) 45%,
            color-mix(in srgb, #7c4dff 28%, transparent));
    backdrop-filter: blur(calc(var(--mm-blur, 8px) + 4px));
    -webkit-backdrop-filter: blur(calc(var(--mm-blur, 8px) + 4px));
    opacity: 1;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.mm-card-style-metal .mm-profile-card-inner {
    background: linear-gradient(160deg, rgba(190, 198, 220, 0.22), rgba(40, 46, 70, 0.78) 45%, rgba(18, 20, 34, 0.92));
    backdrop-filter: blur(calc(var(--mm-blur, 8px) * 0.35));
    -webkit-backdrop-filter: blur(calc(var(--mm-blur, 8px) * 0.35));
    opacity: 1;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 14px 36px rgba(0, 0, 0, 0.4);
}

.mm-card-border-none .mm-profile-card-inner { border: none; }
.mm-card-border-thin .mm-profile-card-inner { border: 1px solid var(--mm-border, rgba(0, 229, 255, 0.3)); }
.mm-card-border-thick .mm-profile-card-inner { border: 3px solid var(--mm-border, rgba(0, 229, 255, 0.45)); }
.mm-card-border-accent .mm-profile-card-inner { border: 2px solid var(--mm-accent, #00E5FF); }
.mm-card-border-dashed .mm-profile-card-inner { border: 2px dashed color-mix(in srgb, var(--mm-accent, #00E5FF) 70%, transparent); }
.mm-card-border-glow .mm-profile-card-inner {
    border: 1px solid color-mix(in srgb, var(--mm-accent, #00E5FF) 60%, transparent);
    box-shadow: 0 0 0 1px rgba(255,255,255,0.04) inset, 0 0 28px color-mix(in srgb, var(--mm-accent, #00E5FF) 35%, transparent);
}
.mm-card-border-double .mm-profile-card-inner {
    border: 4px double color-mix(in srgb, var(--mm-accent, #00E5FF) 75%, #fff 10%);
}
.mm-card-border-neon .mm-profile-card-inner {
    border: 2px solid var(--mm-accent, #00E5FF);
    box-shadow:
        0 0 12px color-mix(in srgb, var(--mm-accent, #00E5FF) 55%, transparent),
        0 0 28px color-mix(in srgb, var(--mm-accent, #00E5FF) 28%, transparent),
        inset 0 0 18px color-mix(in srgb, var(--mm-accent, #00E5FF) 12%, transparent);
}
.mm-card-border-soft .mm-profile-card-inner {
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--mm-accent, #00E5FF) 10%, transparent);
}
.mm-card-border-gradient .mm-profile-card-inner {
    border: 2px solid transparent;
    background-clip: padding-box;
    box-shadow:
        0 0 0 1px transparent,
        0 0 0 2px color-mix(in srgb, var(--mm-accent, #00E5FF) 70%, #7c4dff);
}

.mm-profile-avatar-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: 700;
    color: var(--mm-accent, #00E5FF);
}

.mm-profile-name {
    margin: 0 0 0.25rem;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--mm-accent, #00E5FF);
    letter-spacing: -0.02em;
}

.mm-profile-handle {
    margin: 0 0 0.35rem;
    color: var(--mm-muted, #ccc);
    font-size: 0.92rem;
    opacity: 0.9;
}

.mm-profile-meta {
    margin: 0 0 0.85rem;
    color: var(--mm-muted, #ccc);
    font-size: 0.82rem;
    letter-spacing: 0.02em;
    opacity: 0.78;
}

.mm-profile-custom-links {
    list-style: none;
    margin: -0.2rem 0 0.85rem;
    padding: 0;
    display: flex;
    flex-wrap: nowrap;
    gap: 0.4rem;
    justify-content: center;
    align-items: stretch;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.mm-profile-custom-links > li {
    min-width: 0;
    flex: 1 1 0;
    display: flex;
    justify-content: center;
}

.mm-custom-links-layout-row > li.mm-custom-link-w-short {
    flex: 0 1 auto;
    max-width: min(58%, 16rem);
}
.mm-custom-links-layout-row > li.mm-custom-link-w-medium {
    flex: 0 1 auto;
    max-width: min(78%, 20rem);
}
.mm-custom-links-layout-row > li.mm-custom-link-w-long {
    flex: 1 1 0;
    max-width: 100%;
}
.mm-custom-links-layout-row > li.mm-custom-link-w-none {
    flex: 0 0 auto;
    max-width: 100%;
}

/* Text-only + horizontal: give the labels room so they don't run into each other */
.mm-custom-links-layout-row:has(> li.mm-custom-link-w-none) {
    flex-wrap: wrap;
    gap: 0.45rem 1.35rem;
    align-items: center;
}

.mm-custom-links-layout-row > li.mm-custom-link-w-none + li.mm-custom-link-w-none {
    position: relative;
    padding-left: 0.95rem;
}

.mm-custom-links-layout-row > li.mm-custom-link-w-none + li.mm-custom-link-w-none::before {
    content: '·';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translate(-40%, -52%);
    color: var(--mm-muted, #ccc);
    opacity: 0.55;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1;
    pointer-events: none;
}

.mm-custom-links-layout-stack {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
}

.mm-custom-links-layout-stack > li {
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
}

.mm-custom-links-layout-stack > li.mm-custom-link-w-short {
    width: auto;
    max-width: min(85%, 16rem);
}
.mm-custom-links-layout-stack > li.mm-custom-link-w-medium {
    width: auto;
    max-width: min(94%, 21rem);
}
.mm-custom-links-layout-stack > li.mm-custom-link-w-long {
    width: 100%;
    max-width: 100%;
}
.mm-custom-links-layout-stack > li.mm-custom-link-w-none {
    width: auto;
    max-width: 100%;
}

.mm-profile-custom-link {
    display: flex;
    align-items: center;
    justify-content: center;
    /* Width is finalized by fitCustomLinkLabels so short/med can scale text into a cap. */
    width: max-content;
    max-width: 100%;
    min-width: 4.25rem;
    min-height: 1.9rem;
    padding: 0.36rem 0.85rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--mm-custom-link-color, var(--mm-accent, #7dd3fc)) 55%, transparent);
    color: var(--mm-custom-link-color, var(--mm-accent, #7dd3fc));
    background: color-mix(in srgb, var(--mm-custom-link-color, var(--mm-accent, #7dd3fc)) 12%, transparent);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1.2;
    text-decoration: none;
    overflow: hidden;
    white-space: nowrap;
    box-sizing: border-box;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.mm-custom-links-layout-stack > li.mm-custom-link-w-long .mm-profile-custom-link,
.mm-custom-links-layout-row > li.mm-custom-link-w-long .mm-profile-custom-link {
    width: 100%;
}

.mm-custom-link-w-short .mm-profile-custom-link {
    font-size: 0.78rem;
    padding: 0.34rem 0.8rem;
}
.mm-custom-link-w-medium .mm-profile-custom-link {
    font-size: 0.8rem;
    padding: 0.35rem 0.85rem;
}
.mm-custom-link-w-long .mm-profile-custom-link {
    font-size: 0.82rem;
    padding: 0.38rem 0.95rem;
}

/* Text-only: no pill bar — motion still runs on the link/text */
.mm-custom-link-w-none .mm-profile-custom-link {
    min-width: 0;
    min-height: 0;
    padding: 0.12rem 0.15rem;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
    font-size: 0.88rem;
    font-weight: 650;
    letter-spacing: 0.02em;
    text-decoration: none;
}
.mm-custom-link-w-none .mm-profile-custom-link:hover,
.mm-custom-link-w-none .mm-profile-custom-link:focus-visible {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    text-decoration: underline;
    text-underline-offset: 0.18em;
    transform: none;
}

/* Keep label fully readable when it fits; shrink via JS, hard-clip only after min font size */
.mm-profile-custom-link > .mm-custom-link-label {
    display: block;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: clip;
    white-space: nowrap;
}

.mm-profile-custom-link:hover,
.mm-profile-custom-link:focus-visible {
    background: color-mix(in srgb, var(--mm-custom-link-color, var(--mm-accent, #7dd3fc)) 22%, transparent);
    transform: translateY(-1px);
    outline: none;
}

/* Motion presets (shared for the link group) */
.mm-custom-links-effect-fade .mm-profile-custom-link {
    animation: mmCustomLinkFade 3.2s ease-in-out infinite;
}
.mm-custom-links-effect-rise .mm-profile-custom-link {
    animation: mmCustomLinkRise 3s ease-in-out infinite;
}
.mm-custom-links-effect-blink .mm-profile-custom-link {
    animation: mmCustomLinkBlink 2.4s ease-in-out infinite;
}
.mm-custom-links-effect-wave .mm-profile-custom-link {
    animation: mmCustomLinkWave 2.8s ease-in-out infinite;
}
.mm-custom-links-effect-glow .mm-profile-custom-link {
    animation: mmCustomLinkGlow 2.6s ease-in-out infinite;
}
.mm-custom-links-effect-glow .mm-custom-link-w-none .mm-profile-custom-link {
    /* Pill glow uses box-shadow; text-only uses text-shadow instead */
    animation: mmCustomLinkGlowText 2.6s ease-in-out infinite;
}
.mm-custom-links-effect-pulse .mm-profile-custom-link {
    animation: mmCustomLinkPulse 2.2s ease-in-out infinite;
}
.mm-custom-links-effect-fade > li:nth-child(2) .mm-profile-custom-link,
.mm-custom-links-effect-rise > li:nth-child(2) .mm-profile-custom-link,
.mm-custom-links-effect-blink > li:nth-child(2) .mm-profile-custom-link,
.mm-custom-links-effect-wave > li:nth-child(2) .mm-profile-custom-link,
.mm-custom-links-effect-glow > li:nth-child(2) .mm-profile-custom-link,
.mm-custom-links-effect-pulse > li:nth-child(2) .mm-profile-custom-link {
    animation-delay: 0.35s;
}

@keyframes mmCustomLinkFade {
    0%, 100% { opacity: 0.45; }
    40%, 70% { opacity: 1; }
}
@keyframes mmCustomLinkRise {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}
@keyframes mmCustomLinkBlink {
    0%, 100% { opacity: 1; }
    45%, 55% { opacity: 0.35; }
}
@keyframes mmCustomLinkWave {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    25% { transform: translateY(-2px) rotate(-1deg); }
    75% { transform: translateY(1px) rotate(1deg); }
}
@keyframes mmCustomLinkGlow {
    0%, 100% {
        box-shadow: 0 0 0 transparent;
        filter: brightness(1);
    }
    50% {
        box-shadow: 0 0 14px color-mix(in srgb, var(--mm-custom-link-color, var(--mm-accent, #7dd3fc)) 55%, transparent);
        filter: brightness(1.12);
    }
}
@keyframes mmCustomLinkGlowText {
    0%, 100% {
        text-shadow: none;
        filter: brightness(1);
    }
    50% {
        text-shadow:
            0 0 8px color-mix(in srgb, var(--mm-custom-link-color, var(--mm-accent, #7dd3fc)) 70%, transparent),
            0 0 18px color-mix(in srgb, var(--mm-custom-link-color, var(--mm-accent, #7dd3fc)) 40%, transparent);
        filter: brightness(1.12);
    }
}
@keyframes mmCustomLinkPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.035); }
}

@media (prefers-reduced-motion: reduce) {
    .mm-custom-links-effect-fade .mm-profile-custom-link,
    .mm-custom-links-effect-rise .mm-profile-custom-link,
    .mm-custom-links-effect-blink .mm-profile-custom-link,
    .mm-custom-links-effect-wave .mm-profile-custom-link,
    .mm-custom-links-effect-glow .mm-profile-custom-link,
    .mm-custom-links-effect-pulse .mm-profile-custom-link {
        animation: none !important;
    }
}

.mm-profile-bio {
    margin: 0 auto 1.15rem;
    max-width: 22rem;
    color: var(--mm-bio-color, var(--mm-text, #fff));
    font-size: 1rem;
    line-height: 1.5;
    font-weight: 400;
    white-space: pre-wrap;
    text-align: center;
}

.mm-bio-style-typewriter {
    font-family: var(--mm-bio-font, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
    font-size: 0.92rem;
    text-align: center;
    max-width: 20rem;
    min-height: 1.5em;
    margin-inline: auto;
}

.mm-bio-style-typewriter::before {
    content: '> ';
    opacity: 0.55;
    color: var(--mm-accent, #00E5FF);
}

.mm-bio-style-typewriter.is-bio-typing::after {
    content: '▌';
    margin-left: 0.05rem;
    color: var(--mm-accent, #00E5FF);
    animation: mmBioCaret 0.9s steps(1) infinite;
}

@keyframes mmBioCaret {
    50% { opacity: 0; }
}

.mm-bio-style-fade.is-bio-ready {
    animation: mmBioFadeLoop 3.2s ease-in-out infinite;
}

@keyframes mmBioFadeLoop {
    0%, 100% { opacity: 0.15; }
    20%, 70% { opacity: 1; }
}

.mm-bio-style-rise.is-bio-ready {
    animation: mmBioRiseLoop 3.2s ease-in-out infinite;
}

@keyframes mmBioRiseLoop {
    0%, 100% { opacity: 0.15; transform: translateY(8px); }
    20%, 70% { opacity: 1; transform: translateY(0); }
}

.mm-bio-style-blink.is-bio-ready {
    animation: mmBioBlinkLoop 2.4s ease-in-out infinite;
}

@keyframes mmBioBlinkLoop {
    0%, 45%, 100% { opacity: 1; }
    50%, 55% { opacity: 0.12; }
}

.mm-bio-style-wave.is-bio-ready {
    display: inline-block;
    animation: mmBioWaveLoop 2.8s ease-in-out infinite;
}

@keyframes mmBioWaveLoop {
    0%, 100% { transform: translateY(0); }
    25% { transform: translateY(-4px); }
    75% { transform: translateY(3px); }
}

.mm-bio-style-glow.is-bio-ready {
    animation: mmBioGlowLoop 2.6s ease-in-out infinite;
}

@keyframes mmBioGlowLoop {
    0%, 100% { text-shadow: 0 0 0 transparent; filter: brightness(1); }
    50% { text-shadow: 0 0 12px color-mix(in srgb, var(--mm-bio-color, var(--mm-accent, #00E5FF)) 70%, transparent); filter: brightness(1.08); }
}

.mm-bio-style-scramble {
    font-family: var(--mm-bio-font, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
    letter-spacing: 0.02em;
    min-height: 1.5em;
}

@media (prefers-reduced-motion: reduce) {
    .mm-bio-style-fade.is-bio-ready,
    .mm-bio-style-rise.is-bio-ready,
    .mm-bio-style-blink.is-bio-ready,
    .mm-bio-style-wave.is-bio-ready,
    .mm-bio-style-glow.is-bio-ready {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        text-shadow: none !important;
    }
    .mm-bio-style-typewriter.is-bio-typing::after {
        animation: none;
    }
}

.mm-profile-favs,
.mm-profile-details {
    display: grid;
    gap: 0.65rem;
    margin: 0.15rem auto 1.25rem;
    width: 100%;
    max-width: 18.5rem;
    text-align: center;
    justify-items: center;
    color: var(--mm-details-color, inherit);
}

.mm-profile-fav,
.mm-profile-detail {
    width: 100%;
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid color-mix(in srgb, var(--mm-border, #00E5FF) 55%, transparent);
    border-radius: calc(var(--mm-radius, 15px) * 0.7);
    padding: 0.7rem 0.9rem;
    text-align: center;
}

.mm-profile-fav-label,
.mm-profile-detail-label {
    display: block;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--mm-muted, #ccc);
    margin-bottom: 0.2rem;
    opacity: 0.85;
}

.mm-profile-fav-value,
.mm-profile-detail-value {
    display: block;
    font-weight: 600;
    color: var(--mm-details-color, var(--mm-text, #fff));
    font-size: 0.98rem;
    line-height: 1.35;
    word-break: break-word;
}

.mm-details-style-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    justify-content: center;
    max-width: 22rem;
}

.mm-details-style-chips .mm-profile-detail {
    width: auto;
    max-width: 100%;
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.42rem 0.85rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--mm-accent, #00E5FF) 12%, rgba(0, 0, 0, 0.28));
    text-align: center;
}

.mm-details-style-chips .mm-profile-detail-label {
    margin: 0;
    text-transform: none;
    letter-spacing: 0.02em;
    font-size: 0.75rem;
    opacity: 0.78;
}

.mm-details-style-chips .mm-profile-detail-label::after {
    content: '·';
    margin-left: 0.15rem;
    opacity: 0.55;
}

.mm-details-style-chips .mm-profile-detail-value {
    font-size: 0.86rem;
}

.mm-details-style-rows {
    gap: 0.4rem;
    max-width: 17rem;
}

.mm-details-style-rows .mm-profile-detail {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.12rem;
    padding: 0.45rem 0.25rem;
    background: transparent;
    border: none;
    border-bottom: 1px solid color-mix(in srgb, var(--mm-border, #00E5FF) 26%, transparent);
    border-radius: 0;
    text-align: center;
}

.mm-details-style-rows .mm-profile-detail:last-child {
    border-bottom: none;
}

.mm-details-style-rows .mm-profile-detail-label {
    margin: 0;
    text-transform: none;
    letter-spacing: 0.02em;
    font-size: 0.78rem;
    opacity: 0.7;
}

.mm-details-style-rows .mm-profile-detail-value {
    font-size: 0.94rem;
    font-weight: 600;
}

.mm-details-style-stack {
    gap: 0.55rem;
    max-width: 16rem;
}

.mm-details-style-stack .mm-profile-detail {
    padding: 0.55rem 0.75rem;
    background: color-mix(in srgb, var(--mm-details-color, var(--mm-accent, #00E5FF)) 8%, rgba(0, 0, 0, 0.28));
}

.mm-details-style-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.4rem;
    max-width: 22rem;
}

.mm-details-style-badges .mm-profile-detail {
    width: auto;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    padding: 0.5rem 0.75rem;
    border-radius: 12px;
    border-color: color-mix(in srgb, var(--mm-details-color, var(--mm-accent, #00E5FF)) 45%, transparent);
}

.mm-details-style-minimal {
    gap: 0.35rem;
    max-width: 16rem;
}

.mm-details-style-minimal .mm-profile-detail {
    background: transparent;
    border: none;
    padding: 0.2rem 0;
}

.mm-details-style-minimal .mm-profile-detail-label {
    font-size: 0.68rem;
    opacity: 0.55;
}

.mm-details-style-divider {
    gap: 0;
    max-width: 17rem;
}

.mm-details-style-divider .mm-profile-detail {
    background: transparent;
    border: none;
    border-top: 1px solid color-mix(in srgb, var(--mm-border, #00E5FF) 30%, transparent);
    border-radius: 0;
    padding: 0.65rem 0.2rem;
}

.mm-details-style-divider .mm-profile-detail:first-child {
    border-top: none;
}

.mm-profile-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.55rem;
    text-align: left;
}

.mm-profile-link {
    border-radius: calc(var(--mm-radius, 15px) * 0.65);
    border: 1px solid color-mix(in srgb, var(--mm-border, #00E5FF) 50%, transparent);
    background: rgba(0, 0, 0, 0.22);
    padding: 0.7rem 0.85rem;
}

.mm-profile-link a {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    text-decoration: none;
    color: inherit;
}

.mm-profile-link-brand {
    font-weight: 700;
    font-size: 0.85rem;
}

.mm-profile-link-spotify .mm-profile-link-brand { color: #1DB954; }
.mm-profile-link-soundcloud .mm-profile-link-brand { color: #ff5500; }
.mm-profile-link-lastfm .mm-profile-link-brand { color: #d51007; }

.mm-profile-link-value {
    font-size: 0.82rem;
    color: var(--mm-muted, #ccc);
    word-break: break-all;
}

/* Icon row — only filled providers */
.mm-profile-socials {
    list-style: none;
    margin: 1.15rem 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.7rem;
}

.mm-profile-social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid color-mix(in srgb, var(--mm-border, #00E5FF) 45%, transparent);
    color: var(--mm-text, #fff);
    text-decoration: none;
    transition: transform 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.mm-profile-social .mm-link-icon {
    width: 22px;
    height: 22px;
    display: block;
}

.mm-profile-social:hover,
.mm-profile-social:focus-visible {
    transform: translateY(-2px);
    outline: none;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35);
}

.mm-profile-social-spotify { color: #1DB954; }
.mm-profile-social-spotify:hover { border-color: #1DB954; }

.mm-profile-social-applemusic { color: #FA243C; }
.mm-profile-social-applemusic:hover { border-color: #FA243C; }

.mm-profile-social-youtube { color: #FF0000; }
.mm-profile-social-youtube:hover { border-color: #FF0000; }

.mm-profile-social-soundcloud { color: #ff5500; }
.mm-profile-social-soundcloud:hover { border-color: #ff5500; }

.mm-profile-social-tidal { color: #00FFFF; }
.mm-profile-social-tidal:hover { border-color: #00FFFF; }

.mm-profile-social-deezer { color: #A238FF; }
.mm-profile-social-deezer:hover { border-color: #A238FF; }

.mm-profile-social-bandcamp { color: #1DA0C3; }
.mm-profile-social-bandcamp:hover { border-color: #1DA0C3; }

.mm-profile-social-audiomack { color: #FFA200; }
.mm-profile-social-audiomack:hover { border-color: #FFA200; }

.mm-profile-social-amazonmusic { color: #25D1DA; }
.mm-profile-social-amazonmusic:hover { border-color: #25D1DA; }

.mm-profile-social-mixcloud { color: #5000FF; }
.mm-profile-social-mixcloud:hover { border-color: #5000FF; }

.mm-profile-social-lastfm { color: #d51007; }
.mm-profile-social-lastfm:hover { border-color: #d51007; }

/* Social color / shape variants — scoped under .mm-profile-card so they
   beat brand-color rules (.mm-profile-social-spotify) in the live preview. */
.mm-profile-card.mm-social-style-flat .mm-profile-social {
    color: #c5c8d0;
    border-color: rgba(197, 200, 208, 0.35);
    background: rgba(0, 0, 0, 0.28);
    box-shadow: none;
}
.mm-profile-card.mm-social-style-flat .mm-profile-social:hover {
    color: #e8eaef;
    border-color: rgba(232, 234, 239, 0.55);
}

.mm-profile-card.mm-social-style-accent .mm-profile-social {
    color: var(--mm-accent, #00E5FF);
    border-color: color-mix(in srgb, var(--mm-accent, #00E5FF) 45%, transparent);
    background: rgba(0, 0, 0, 0.28);
}
.mm-profile-card.mm-social-style-accent .mm-profile-social:hover {
    border-color: var(--mm-accent, #00E5FF);
    box-shadow: 0 0 18px color-mix(in srgb, var(--mm-accent, #00E5FF) 35%, transparent);
}

.mm-profile-card.mm-social-style-outline .mm-profile-social {
    color: #fff;
    background: transparent;
    border-color: rgba(255, 255, 255, 0.45);
    box-shadow: none;
}
.mm-profile-card.mm-social-style-outline .mm-profile-social:hover {
    border-color: #fff;
    background: rgba(255, 255, 255, 0.06);
}

.mm-profile-card.mm-social-style-glow .mm-profile-social {
    color: #fff;
    border-color: color-mix(in srgb, var(--mm-accent, #00E5FF) 50%, transparent);
    background: rgba(0, 0, 0, 0.28);
    box-shadow: 0 0 16px color-mix(in srgb, var(--mm-accent, #00E5FF) 28%, transparent);
}
.mm-profile-card.mm-social-style-glow .mm-profile-social:hover {
    box-shadow: 0 0 26px color-mix(in srgb, var(--mm-accent, #00E5FF) 45%, transparent);
}

.mm-profile-card.mm-social-style-glass .mm-profile-social {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: none;
}
.mm-profile-card.mm-social-style-glass .mm-profile-social:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.32);
}

.mm-profile-card.mm-social-style-mono .mm-profile-social {
    color: #111318;
    background: #f3f5fa;
    border-color: #f3f5fa;
    box-shadow: none;
}
.mm-profile-card.mm-social-style-mono .mm-profile-social:hover {
    background: #fff;
    border-color: #fff;
}

.mm-profile-card.mm-social-style-neon .mm-profile-social {
    color: var(--mm-accent, #00E5FF);
    background: rgba(0, 0, 0, 0.35);
    border-color: var(--mm-accent, #00E5FF);
    box-shadow:
        0 0 10px color-mix(in srgb, var(--mm-accent, #00E5FF) 45%, transparent),
        inset 0 0 12px color-mix(in srgb, var(--mm-accent, #00E5FF) 12%, transparent);
}
.mm-profile-card.mm-social-style-neon .mm-profile-social:hover {
    box-shadow:
        0 0 20px color-mix(in srgb, var(--mm-accent, #00E5FF) 60%, transparent),
        inset 0 0 16px color-mix(in srgb, var(--mm-accent, #00E5FF) 18%, transparent);
}

/* Seamless rainbow: duplicated spectrum + animate exactly one cycle */
.mm-profile-card.mm-social-style-rainbow .mm-profile-social {
    border: 2px solid transparent;
    color: #fff;
    background:
        linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)) padding-box,
        linear-gradient(
            90deg,
            #ff004c,
            #ff8a00,
            #ffe600,
            #00e676,
            #00e5ff,
            #7c4dff,
            #ff004c,
            #ff8a00,
            #ffe600,
            #00e676,
            #00e5ff,
            #7c4dff,
            #ff004c
        ) border-box;
    background-size: 100% 100%, 200% 100%;
    background-position: 0 0, 0 0;
    animation: mmRainbowShift 3.2s linear infinite;
    box-shadow: none;
}
.mm-profile-card.mm-social-style-rainbow .mm-profile-social .mm-link-icon {
    filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.35));
}

@keyframes mmRainbowShift {
    from { background-position: 0 0, 0% 0; }
    to { background-position: 0 0, -100% 0; }
}

.mm-profile-card.mm-social-shape-circle .mm-profile-social {
    border-radius: 50%;
    width: 44px;
    height: 44px;
    clip-path: none;
    padding: 0;
}
.mm-profile-card.mm-social-shape-rounded .mm-profile-social {
    border-radius: 14px;
    width: 44px;
    height: 44px;
    clip-path: none;
    padding: 0;
}
.mm-profile-card.mm-social-shape-soft .mm-profile-social {
    border-radius: 10px;
    width: 44px;
    height: 44px;
    clip-path: none;
    padding: 0;
}
.mm-profile-card.mm-social-shape-square .mm-profile-social {
    border-radius: 4px;
    width: 44px;
    height: 44px;
    clip-path: none;
    padding: 0;
}
.mm-profile-card.mm-social-shape-pill .mm-profile-social {
    border-radius: 999px;
    width: auto;
    min-width: 44px;
    height: 44px;
    padding: 0 0.85rem;
    clip-path: none;
}
.mm-profile-card.mm-social-shape-hex .mm-profile-social {
    border-radius: 0;
    width: 48px;
    height: 48px;
    clip-path: polygon(25% 4%, 75% 4%, 98% 50%, 75% 96%, 25% 96%, 2% 50%);
    padding: 0;
}
.mm-profile-card.mm-social-shape-tile .mm-profile-social {
    border-radius: 6px;
    width: 48px;
    height: 40px;
    clip-path: none;
    padding: 0;
}

/* Full public page shell */
body.mm-public {
    font-family: var(--mm-font, 'Outfit', sans-serif);
    margin: 0;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    background: var(--mm-bg, linear-gradient(135deg, #1A237E, #512DA8));
    background-attachment: fixed;
    color: var(--mm-text, #fff);
    cursor: var(--mm-cursor, auto);
    position: relative;
    overflow-x: hidden;
}

/* Custom cursors must apply to children or browsers ignore them on body alone */
body.mm-public,
body.mm-public * {
    cursor: var(--mm-cursor, auto);
}

body.mm-public.has-bg-image {
    background-image: var(--mm-bg-image), var(--mm-bg, linear-gradient(135deg, #1A237E, #512DA8));
    background-size: cover, auto;
    background-position: center, center;
    background-repeat: no-repeat, no-repeat;
}

body.mm-public.has-bg-video {
    background: #0a0a12;
}

.mm-public-bg-video {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    pointer-events: none;
}

body.mm-public.is-gated .mm-public-bg-video {
    filter: blur(14px) brightness(0.55);
    transform: scale(1.06);
}

.mm-public-bg-scrim {
    position: fixed;
    inset: 0;
    z-index: 1;
    background: rgba(8, 8, 16, 0.45);
    pointer-events: none;
}

.mm-public-wrap {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 440px;
    transition: filter 0.4s ease, opacity 0.4s ease;
}

body.mm-public.is-gated .mm-public-wrap {
    filter: blur(10px);
    opacity: 0.35;
    pointer-events: none;
    user-select: none;
}

.mm-public-footer {
    margin-top: 1.25rem;
    text-align: center;
    font-size: 0.8rem;
    opacity: 0.65;
}

.mm-public-footer a {
    color: var(--mm-accent, #00E5FF);
    text-decoration: none;
}

/* Enter gate — unlocks audio / video with a user gesture */
.mm-enter-gate {
    position: fixed;
    inset: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--mm-enter-gate-bg, #060812) 35%, transparent);
    backdrop-filter: blur(18px) saturate(1.2);
    -webkit-backdrop-filter: blur(18px) saturate(1.2);
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

.mm-enter-gate-bg-blur {
    background: color-mix(in srgb, var(--mm-enter-gate-bg, #060812) 35%, transparent);
    backdrop-filter: blur(18px) saturate(1.2);
    -webkit-backdrop-filter: blur(18px) saturate(1.2);
}
.mm-enter-gate-bg-frost {
    background: color-mix(in srgb, var(--mm-enter-gate-bg, #060812) 48%, rgba(255, 255, 255, 0.08));
    backdrop-filter: blur(28px) saturate(1.35);
    -webkit-backdrop-filter: blur(28px) saturate(1.35);
}
.mm-enter-gate-bg-dim {
    background: color-mix(in srgb, var(--mm-enter-gate-bg, #060812) 62%, transparent);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.mm-enter-gate-bg-tint {
    background: color-mix(in srgb, var(--mm-enter-gate-bg, #060812) 55%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.mm-enter-gate-bg-solid {
    background: var(--mm-enter-gate-bg, #060812);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.mm-enter-gate-bg-clear {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.mm-enter-gate.is-leaving {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.mm-enter-btn {
    appearance: none;
    border: 1px solid color-mix(in srgb, var(--mm-enter-color, var(--mm-accent, #00E5FF)) 70%, transparent);
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--mm-enter-color, var(--mm-accent, #00E5FF)) 28%, transparent),
            rgba(0, 0, 0, 0.35));
    color: var(--mm-enter-text, var(--mm-text, #fff));
    font-family: var(--mm-enter-font, var(--mm-font, 'Outfit', sans-serif));
    font-size: clamp(1rem, 2.2vw, 1.22rem);
    font-weight: 600;
    /* Tight uppercase pill: less tracking + compensate trailing letter-spacing gap */
    letter-spacing: 0.06em;
    line-height: 1.05;
    text-transform: uppercase;
    padding: 0.72rem 1.7rem;
    padding-inline: 1.7rem calc(1.7rem - 0.06em);
    border-radius: 999px;
    cursor: pointer;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.06) inset,
        0 18px 50px rgba(0, 0, 0, 0.45),
        0 0 40px color-mix(in srgb, var(--mm-enter-color, var(--mm-accent, #00E5FF)) 35%, transparent);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease, background 0.25s ease;
    position: relative;
    overflow: hidden;
    z-index: 1;
    text-box: trim-both cap alphabetic;
}

.mm-enter-btn:hover,
.mm-enter-btn:focus-visible {
    transform: translateY(-2px) scale(1.02);
    border-color: var(--mm-enter-color, var(--mm-accent, #00E5FF));
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.1) inset,
        0 22px 60px rgba(0, 0, 0, 0.5),
        0 0 55px color-mix(in srgb, var(--mm-enter-color, var(--mm-accent, #00E5FF)) 55%, transparent);
    outline: none;
}

.mm-enter-size-sm {
    font-size: 0.82rem;
    letter-spacing: 0.05em;
    padding: 0.48rem 1.15rem;
    padding-inline: 1.15rem calc(1.15rem - 0.05em);
}
.mm-enter-size-md {
    font-size: clamp(1rem, 2.2vw, 1.22rem);
    letter-spacing: 0.06em;
    padding: 0.72rem 1.7rem;
    padding-inline: 1.7rem calc(1.7rem - 0.06em);
}
.mm-enter-size-lg {
    font-size: clamp(1.15rem, 2.8vw, 1.48rem);
    letter-spacing: 0.07em;
    padding: 0.88rem 2.05rem;
    padding-inline: 2.05rem calc(2.05rem - 0.07em);
}

.mm-enter-shape-pill { border-radius: 999px; }
.mm-enter-shape-rounded { border-radius: 18px; }
.mm-enter-shape-soft { border-radius: 12px; }
.mm-enter-shape-square { border-radius: 4px; }

.mm-enter-style-glass {
    background: linear-gradient(135deg, color-mix(in srgb, var(--mm-enter-color, var(--mm-accent, #00E5FF)) 28%, transparent), rgba(0, 0, 0, 0.35));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.mm-enter-style-frosted {
    background: color-mix(in srgb, var(--mm-enter-color, var(--mm-accent, #00E5FF)) 18%, rgba(255, 255, 255, 0.14));
    border-color: color-mix(in srgb, #fff 35%, var(--mm-enter-color, var(--mm-accent, #00E5FF)));
    backdrop-filter: blur(18px) saturate(1.4);
    -webkit-backdrop-filter: blur(18px) saturate(1.4);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.12) inset,
        0 16px 40px rgba(0, 0, 0, 0.35);
}

.mm-enter-style-chrome {
    background: linear-gradient(145deg, #f3f4f8 0%, #b8bec9 38%, #eceff4 55%, #8e96a5 100%);
    color: var(--mm-enter-text, #1a1d27);
    border-color: rgba(255, 255, 255, 0.55);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.7) inset,
        0 -1px 0 rgba(0, 0, 0, 0.18) inset,
        0 14px 32px rgba(0, 0, 0, 0.35);
}

.mm-enter-style-solid {
    background: var(--mm-enter-color, var(--mm-accent, #00E5FF));
    color: var(--mm-enter-text, #0a0a12);
    border-color: transparent;
    box-shadow: 0 14px 36px color-mix(in srgb, var(--mm-enter-color, var(--mm-accent, #00E5FF)) 45%, transparent);
}

.mm-enter-style-soft {
    background: color-mix(in srgb, var(--mm-enter-color, var(--mm-accent, #00E5FF)) 22%, rgba(12, 14, 28, 0.75));
    border-color: transparent;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.3);
}

.mm-enter-style-outline {
    background: transparent;
    border-width: 2px;
    box-shadow: none;
}

.mm-enter-style-glow {
    background: rgba(0, 0, 0, 0.35);
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--mm-enter-color, var(--mm-accent, #00E5FF)) 50%, transparent),
        0 0 28px color-mix(in srgb, var(--mm-enter-color, var(--mm-accent, #00E5FF)) 55%, transparent),
        0 0 60px color-mix(in srgb, var(--mm-enter-color, var(--mm-accent, #00E5FF)) 30%, transparent);
}

.mm-enter-style-neon {
    background: rgba(0, 0, 0, 0.55);
    border-color: var(--mm-enter-color, var(--mm-accent, #00E5FF));
    color: var(--mm-enter-text, var(--mm-enter-color, var(--mm-accent, #00E5FF)));
    text-shadow: 0 0 12px color-mix(in srgb, var(--mm-enter-color, var(--mm-accent, #00E5FF)) 70%, transparent);
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--mm-enter-color, var(--mm-accent, #00E5FF)) 40%, transparent),
        0 0 18px color-mix(in srgb, var(--mm-enter-color, var(--mm-accent, #00E5FF)) 55%, transparent),
        0 0 42px color-mix(in srgb, var(--mm-enter-color, var(--mm-accent, #00E5FF)) 35%, transparent),
        inset 0 0 18px color-mix(in srgb, var(--mm-enter-color, var(--mm-accent, #00E5FF)) 18%, transparent);
}

.mm-enter-style-metal {
    background: linear-gradient(160deg, #d7dde8, #6f7788 45%, #c5ccd8 70%, #4e5564);
    color: var(--mm-enter-text, #0e1118);
    border-color: rgba(255, 255, 255, 0.35);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.55),
        0 16px 36px rgba(0, 0, 0, 0.4);
}

.mm-enter-style-flat {
    background: color-mix(in srgb, var(--mm-enter-color, var(--mm-accent, #00E5FF)) 16%, #12141f);
    border-color: color-mix(in srgb, var(--mm-enter-color, var(--mm-accent, #00E5FF)) 40%, transparent);
    box-shadow: none;
}

/* Motion effects */
.mm-enter-effect-pulse {
    animation: mmEnterPulse 2.2s ease-in-out infinite;
}
.mm-enter-effect-glowpulse {
    animation: mmEnterGlowPulse 2.4s ease-in-out infinite;
}
.mm-enter-effect-shimmer::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.35) 50%, transparent 70%);
    transform: translateX(-120%);
    animation: mmEnterShimmer 2.8s ease-in-out infinite;
    pointer-events: none;
}
.mm-enter-effect-float {
    animation: mmEnterFloat 3s ease-in-out infinite;
}
.mm-enter-effect-bounce {
    animation: mmEnterBounce 1.8s ease-in-out infinite;
}
.mm-enter-effect-neonflicker {
    animation: mmEnterNeonFlicker 3.6s linear infinite;
}
.mm-enter-effect-wiggle {
    animation: mmEnterWiggle 2.6s ease-in-out infinite;
}

@keyframes mmEnterPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.045); }
}
@keyframes mmEnterGlowPulse {
    0%, 100% {
        box-shadow:
            0 0 0 1px color-mix(in srgb, var(--mm-enter-color, var(--mm-accent, #00E5FF)) 40%, transparent),
            0 0 22px color-mix(in srgb, var(--mm-enter-color, var(--mm-accent, #00E5FF)) 35%, transparent);
    }
    50% {
        box-shadow:
            0 0 0 1px color-mix(in srgb, var(--mm-enter-color, var(--mm-accent, #00E5FF)) 70%, transparent),
            0 0 42px color-mix(in srgb, var(--mm-enter-color, var(--mm-accent, #00E5FF)) 65%, transparent),
            0 0 70px color-mix(in srgb, var(--mm-enter-color, var(--mm-accent, #00E5FF)) 35%, transparent);
    }
}
@keyframes mmEnterShimmer {
    0% { transform: translateX(-120%); }
    55%, 100% { transform: translateX(120%); }
}
@keyframes mmEnterFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}
@keyframes mmEnterBounce {
    0%, 100% { transform: translateY(0); }
    35% { transform: translateY(-10px); }
    55% { transform: translateY(-3px); }
}
@keyframes mmEnterNeonFlicker {
    0%, 19%, 21%, 23%, 80%, 100% { opacity: 1; filter: brightness(1); }
    20%, 22% { opacity: 0.72; filter: brightness(1.35); }
    40% { opacity: 0.9; }
    60% { filter: brightness(1.2); }
}
@keyframes mmEnterWiggle {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-1.6deg); }
    75% { transform: rotate(1.6deg); }
}

@media (prefers-reduced-motion: reduce) {
    .mm-enter-effect-pulse,
    .mm-enter-effect-glowpulse,
    .mm-enter-effect-float,
    .mm-enter-effect-bounce,
    .mm-enter-effect-neonflicker,
    .mm-enter-effect-wiggle,
    .mm-enter-effect-shimmer::after {
        animation: none !important;
    }
}

.mm-profile-audio {
    margin-top: 1.25rem;
}

.mm-profile-audio-btn {
    appearance: none;
    border: 1px solid color-mix(in srgb, var(--mm-accent, #00E5FF) 55%, transparent);
    background: rgba(0, 0, 0, 0.28);
    color: var(--mm-text, #fff);
    border-radius: 999px;
    padding: 0.55rem 1.1rem;
    font: inherit;
    font-size: 0.88rem;
    cursor: pointer;
}

.mm-profile-audio-btn:hover,
.mm-profile-audio-btn[aria-pressed="true"] {
    border-color: var(--mm-accent, #00E5FF);
    color: var(--mm-accent, #00E5FF);
}

.mm-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Compact visitor volume control — native range for a11y */
.mm-audio-dock {
    position: fixed;
    z-index: 30;
    right: max(0.85rem, env(safe-area-inset-right));
    bottom: max(0.85rem, env(safe-area-inset-bottom));
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.45rem 0.7rem 0.45rem 0.45rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--mm-accent, #00E5FF) 35%, rgba(255, 255, 255, 0.12));
    background: color-mix(in srgb, #0a0c16 78%, transparent);
    backdrop-filter: blur(12px) saturate(1.15);
    -webkit-backdrop-filter: blur(12px) saturate(1.15);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
}

.mm-audio-dock[hidden] {
    display: none !important;
}

.mm-audio-dock-mute {
    appearance: none;
    width: 2.15rem;
    height: 2.15rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.06);
    color: var(--mm-text, #fff);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
}

.mm-audio-dock-mute:hover,
.mm-audio-dock-mute:focus-visible {
    border-color: var(--mm-accent, #00E5FF);
    color: var(--mm-accent, #00E5FF);
    outline: none;
}

.mm-audio-dock-ico-off {
    display: none;
}

.mm-audio-dock.is-muted .mm-audio-dock-ico-on,
.mm-audio-dock-mute.is-muted .mm-audio-dock-ico-on {
    display: none;
}

.mm-audio-dock.is-muted .mm-audio-dock-ico-off,
.mm-audio-dock-mute.is-muted .mm-audio-dock-ico-off {
    display: block;
}

.mm-audio-dock-vol {
    display: flex;
    align-items: center;
    margin: 0;
}

.mm-audio-dock-vol input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 7.5rem;
    height: 0.28rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--mm-accent, #00E5FF) 28%, rgba(255, 255, 255, 0.18));
    outline: none;
    cursor: pointer;
}

.mm-audio-dock-vol input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 0.95rem;
    height: 0.95rem;
    border-radius: 50%;
    background: var(--mm-accent, #00E5FF);
    border: 2px solid #0a0c16;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--mm-accent, #00E5FF) 45%, transparent);
}

.mm-audio-dock-vol input[type="range"]::-moz-range-thumb {
    width: 0.95rem;
    height: 0.95rem;
    border-radius: 50%;
    background: var(--mm-accent, #00E5FF);
    border: 2px solid #0a0c16;
}

.mm-audio-dock-vol input[type="range"]::-moz-range-track {
    height: 0.28rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--mm-accent, #00E5FF) 28%, rgba(255, 255, 255, 0.18));
}

@media (max-width: 520px) {
    .mm-audio-dock-vol input[type="range"] {
        width: 5.5rem;
    }
}

/* Profile audio bar under card */
.mm-audio-bar {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
        "art meta vol"
        "transport transport transport";
    align-items: center;
    gap: 0.55rem 0.75rem;
    width: 100%;
    max-width: 100%;
    margin: 0.85rem auto 0;
    padding: 0.7rem 0.85rem;
    box-sizing: border-box;
    color: var(--mm-text, #fff);
    border-radius: 1rem;
    border: 1px solid color-mix(in srgb, var(--mm-accent, #00E5FF) 32%, rgba(255, 255, 255, 0.12));
}

.mm-audio-bar[hidden] {
    display: none !important;
}

.mm-audio-bar-glass {
    background: color-mix(in srgb, #0a0c16 72%, transparent);
    backdrop-filter: blur(14px) saturate(1.2);
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.35);
}

.mm-audio-bar-solid {
    background: color-mix(in srgb, var(--mm-card-bg, rgba(20, 16, 40, 0.95)) 92%, #0a0c16);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
}

.mm-audio-bar-minimal {
    background: transparent;
    border-color: color-mix(in srgb, var(--mm-accent, #00E5FF) 22%, transparent);
    box-shadow: none;
    padding-left: 0.35rem;
    padding-right: 0.35rem;
}

.mm-audio-bar-art {
    grid-area: art;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.55rem;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--mm-accent, #00E5FF) 45%, transparent), rgba(255, 255, 255, 0.08)),
        color-mix(in srgb, var(--mm-accent, #00E5FF) 18%, #14122a);
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
}

.mm-audio-bar-meta {
    grid-area: meta;
    min-width: 0;
}

.mm-audio-bar-title {
    font-size: 0.92rem;
    font-weight: 650;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mm-audio-bar-artist {
    margin-top: 0.15rem;
    font-size: 0.78rem;
    opacity: 0.72;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mm-audio-bar-transport {
    grid-area: transport;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-width: 0;
}

.mm-audio-bar-play {
    appearance: none;
    width: 2.15rem;
    height: 2.15rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.07);
    color: var(--mm-text, #fff);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
}

.mm-audio-bar-play:hover,
.mm-audio-bar-play:focus-visible {
    border-color: var(--mm-accent, #00E5FF);
    color: var(--mm-accent, #00E5FF);
    outline: none;
}

.mm-audio-bar-ico-pause {
    display: none;
}

.mm-audio-bar-play.is-playing .mm-audio-bar-ico-play {
    display: none;
}

.mm-audio-bar-play.is-playing .mm-audio-bar-ico-pause {
    display: block;
}

.mm-audio-bar-seek-wrap {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex: 1;
    min-width: 0;
}

.mm-audio-bar-time {
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
    opacity: 0.7;
    min-width: 2.1rem;
    flex-shrink: 0;
}

.mm-audio-bar-seek,
.mm-audio-bar-vol {
    -webkit-appearance: none;
    appearance: none;
    height: 0.28rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--mm-accent, #00E5FF) 28%, rgba(255, 255, 255, 0.18));
    outline: none;
    cursor: pointer;
}

.mm-audio-bar-seek {
    flex: 1 1 auto;
    min-width: 4.5rem;
    width: 100%;
}

.mm-audio-bar-vol {
    width: 4.25rem;
    max-width: 5.5rem;
    flex: 0 1 5.5rem;
}

.mm-audio-bar-seek::-webkit-slider-thumb,
.mm-audio-bar-vol::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 0.9rem;
    height: 0.9rem;
    border-radius: 50%;
    background: var(--mm-accent, #00E5FF);
    border: 2px solid #0a0c16;
}

.mm-audio-bar-seek::-moz-range-thumb,
.mm-audio-bar-vol::-moz-range-thumb {
    width: 0.9rem;
    height: 0.9rem;
    border-radius: 50%;
    background: var(--mm-accent, #00E5FF);
    border: 2px solid #0a0c16;
}

.mm-audio-bar-seek::-moz-range-track,
.mm-audio-bar-vol::-moz-range-track {
    height: 0.28rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--mm-accent, #00E5FF) 28%, rgba(255, 255, 255, 0.18));
}

.mm-audio-bar-vol-wrap {
    grid-area: vol;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    justify-self: end;
}

.mm-audio-bar-mute {
    appearance: none;
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.06);
    color: var(--mm-text, #fff);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
}

.mm-audio-bar-mute:hover,
.mm-audio-bar-mute:focus-visible {
    border-color: var(--mm-accent, #00E5FF);
    color: var(--mm-accent, #00E5FF);
    outline: none;
}

.mm-audio-bar-vol-label {
    display: flex;
    margin: 0;
}

.mm-audio-bar.is-muted .mm-audio-dock-ico-on,
.mm-audio-bar-mute.is-muted .mm-audio-dock-ico-on {
    display: none;
}

.mm-audio-bar.is-muted .mm-audio-dock-ico-off,
.mm-audio-bar-mute.is-muted .mm-audio-dock-ico-off {
    display: block;
}

.mm-audio-bar-preview {
    pointer-events: none;
    opacity: 0.92;
}

.mm-audio-bar-preview .mm-audio-bar-play,
.mm-audio-bar-preview .mm-audio-bar-mute,
.mm-audio-bar-preview input {
    cursor: default;
}