@import 'Mixtape.Client.3mdopg9xld.bundle.scp.css';

/* /Components/Brand/RakoMessage.razor.rz.scp.css */
.mx-message[b-jq9xogd195] {
    display: grid;
    justify-items: center;
    gap: 14px;
    padding: 48px 0;
    text-align: center;
}

.mx-message img[b-jq9xogd195] {
    width: 160px;
    height: 160px;
    margin-bottom: 28px;
}

.mx-message h1[b-jq9xogd195] {
    margin: 0;
    font-size: 30px;
    letter-spacing: .08em;
}

.mx-message[b-jq9xogd195]  p {
    margin: 0;
    color: var(--text-muted);
    font-size: 16px;
    line-height: 1.6;
}

.mx-message[b-jq9xogd195]  a {
    margin-top: 18px;
    padding: 11px 20px;
    border-radius: 10px;
    background: var(--accent);
    color: var(--cream);
    font-weight: 500;
    text-decoration: none;
    text-shadow: 0 1px 2px rgb(0 0 0 / .25);
}

.mx-message[b-jq9xogd195]  a:hover {
    filter: brightness(1.1);
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* Brand bar: Rako + app name, language, theme and link to the platform. Same look as the hub bar. */
.mx-bar[b-s8ej9aqcr6] {
    border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
    background: color-mix(in srgb, var(--bg) 82%, transparent);
    backdrop-filter: blur(8px);
}

.mx-bar-inner[b-s8ej9aqcr6] {
    display: flex;
    align-items: center;
    gap: 20px;
    max-width: 1180px;
    margin: 0 auto;
    padding: 14px 18px;
}

.mx-brand[b-s8ej9aqcr6] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-right: auto;
    text-decoration: none;
}

.mx-brand img[b-s8ej9aqcr6] {
    width: 32px;
    height: 32px;
}

.mx-brand span[b-s8ej9aqcr6] {
    font-family: var(--font-title);
    font-weight: 500;
    font-size: 15px;
    letter-spacing: .32em;
    text-transform: uppercase;
}

.mx-langs[b-s8ej9aqcr6] {
    display: flex;
    gap: 2px;
}

.mx-langs a[b-s8ej9aqcr6],
.mx-platform[b-s8ej9aqcr6],
.mx-theme[b-s8ej9aqcr6] {
    padding: 4px 6px;
    color: var(--text-muted);
    font-family: var(--font-label);
    font-size: 11px;
    letter-spacing: .2em;
    text-decoration: none;
    transition: color .2s ease;
}

.mx-langs a:hover[b-s8ej9aqcr6],
.mx-platform:hover[b-s8ej9aqcr6],
.mx-theme:hover[b-s8ej9aqcr6] {
    color: var(--text);
}

.mx-langs a[aria-current="true"][b-s8ej9aqcr6] {
    border-bottom: 2px solid var(--accent-3);
    color: var(--text);
}

.mx-theme[b-s8ej9aqcr6] {
    display: grid;
    place-items: center;
}

.mx-theme svg[b-s8ej9aqcr6] {
    width: 16px;
    height: 16px;
}

.mx-main[b-s8ej9aqcr6] {
    max-width: 1180px;
    margin: 0 auto;
    padding: 40px 18px 160px;
}

/* Big screens: more room for the covers. */
@media (min-width: 1600px) {
    .mx-bar-inner[b-s8ej9aqcr6],
    .mx-main[b-s8ej9aqcr6] {
        max-width: 1440px;
    }
}

@media (max-width: 480px) {
    .mx-bar-inner[b-s8ej9aqcr6] {
        gap: 8px;
    }

    .mx-brand span[b-s8ej9aqcr6] {
        letter-spacing: .2em;
    }

    .mx-platform[b-s8ej9aqcr6] {
        display: none;
    }
}
/* /Components/Pages/Home.razor.rz.scp.css */
.mx-heading[b-eotkjucgi4] {
    margin: 0 0 28px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
    font-size: 16px;
    letter-spacing: .38em;
    text-transform: uppercase;
}

.mx-gallery[b-eotkjucgi4] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 36px 28px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mx-gallery-item[b-eotkjucgi4] {
    display: grid;
    gap: 14px;
    text-decoration: none;
}

.mx-gallery-item .mx-cover[b-eotkjucgi4] {
    transition: transform .25s ease, box-shadow .25s ease;
}

.mx-gallery-item:hover .mx-cover[b-eotkjucgi4] {
    transform: translate(-2px, -2px);
    box-shadow: 7px 7px 0 var(--accent-3);
}

.mx-gallery-caption[b-eotkjucgi4] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.mx-gallery-caption b[b-eotkjucgi4] {
    font-weight: 500;
    font-size: 17px;
}

.mx-gallery-caption span[b-eotkjucgi4] {
    color: var(--text-muted);
    font-family: var(--font-label);
    font-size: 11px;
    letter-spacing: .2em;
    text-transform: uppercase;
}

/* One column on phones, two on tablets and laptops, four on big screens. */
@media (max-width: 699px) {
    .mx-gallery[b-eotkjucgi4] {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 1600px) {
    .mx-gallery[b-eotkjucgi4] {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}
/* /Components/Pages/Tracks/TrackPage.razor.rz.scp.css */
.mx-back[b-g907qmv2fu] {
    display: inline-flex;
    margin-bottom: 28px;
    color: var(--text-muted);
    font-family: var(--font-label);
    font-size: 12px;
    letter-spacing: .2em;
    text-decoration: none;
    text-transform: uppercase;
}

.mx-back:hover[b-g907qmv2fu] {
    color: var(--text);
}

/* Song view: the cover, with its record, leads; the player (title, artist and video) goes next to it. */
.mx-stage[b-g907qmv2fu] {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 56px;
    align-items: center;
}

/* Blurred copy of the cover behind the whole page: the page takes the song's colors. */
.mx-ambient[b-g907qmv2fu] {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: -1;
    width: 140vmax;
    height: 140vmax;
    transform: translate(-50%, -50%);
    filter: blur(90px) saturate(1.3);
    opacity: .5;
    pointer-events: none;
}

[data-theme="light"] .mx-ambient[b-g907qmv2fu] {
    opacity: .4;
}

.mx-ambient[b-g907qmv2fu]  svg {
    display: block;
    width: 100%;
    height: 100%;
}

.mx-ambient[b-g907qmv2fu]  * {
    animation: none !important;
}

/* Cover with a record behind it. The record slides out and spins while the song plays
   (SongPlayer.razor.js puts mx-playing on the stage). */
.mx-record[b-g907qmv2fu] {
    position: relative;
    width: 100%;
    aspect-ratio: 1.28;
}

.mx-record .mx-cover[b-g907qmv2fu] {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    height: 100%;
}

.mx-vinyl[b-g907qmv2fu] {
    position: absolute;
    top: 4%;
    left: 16%;
    height: 92%;
    aspect-ratio: 1;
    border-radius: 50%;
    background:
        radial-gradient(circle, var(--cream) 0 2%, var(--accent-3) 2.4% 10%, var(--accent-2) 10% 16%, transparent 16.4%),
        conic-gradient(from 20deg, transparent 0 8%, rgb(255 255 255 / .1) 12%, transparent 18% 58%, rgb(255 255 255 / .1) 62%, transparent 68%),
        repeating-radial-gradient(circle, color-mix(in srgb, var(--ink) 45%, black) 0 2px, color-mix(in srgb, var(--ink) 70%, black) 2px 4px);
    transition: left .7s ease;
    animation: mx-spin-b-g907qmv2fu 5s linear infinite paused;
}

.mx-playing .mx-vinyl[b-g907qmv2fu] {
    left: 27%;
    animation-play-state: running;
}

@keyframes mx-spin-b-g907qmv2fu {
    to {
        transform: rotate(360deg);
    }
}

/* Tablets and phones: one column, cover first. */
@media (max-width: 899px) {
    .mx-stage[b-g907qmv2fu] {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .mx-record[b-g907qmv2fu] {
        max-width: 620px;
    }
}