@import url("https://fonts.googleapis.com/css2?family=Marcellus&display=swap");
@import url("https://fonts.googleapis.com/css2?family=UnifrakturCook:wght@700&display=swap");

/* ==========================================================
   ARIKEL MINIPLAYER — VARIABLES
   ========================================================== */

:root {
    /* Tamaño general */

    --ariplayer-height: 175px;

    /* Fuentes */

    --ariplayer-font-title: "UnifrakturCook", Georgia, serif;
    --ariplayer-font-ui: Arial, Helvetica, sans-serif;

    /* Transparencia */

    --ariplayer-transparent: transparent;

    /* Colores base */

    --ariplayer-cyan-title: rgb(99, 255, 244);
    --ariplayer-cyan-tags: #fff;

    --ariplayer-white-96: rgba(255, 255, 255, .96);
    --ariplayer-white-92: rgba(255, 255, 255, .92);
    --ariplayer-white-40: rgba(255, 255, 255, .40);
    --ariplayer-white-35: rgba(255, 255, 255, .35);
    --ariplayer-white-18: rgba(255, 255, 255, .18);
    --ariplayer-white-08: rgba(255, 255, 255, .08);

    /* Glow turquesa */

    --ariplayer-cyan-glow-95: rgba(67, 255, 241, .95);
    --ariplayer-cyan-glow-75: rgba(67, 255, 241, .75);
    --ariplayer-cyan-glow-70: rgba(67, 255, 241, .70);
    --ariplayer-cyan-glow-65: rgba(67, 255, 241, .65);
    --ariplayer-cyan-glow-45: rgba(67, 255, 241, .45);
    --ariplayer-cyan-glow-35: rgba(67, 255, 241, .35);
    --ariplayer-cyan-glow-22: rgba(67, 255, 241, .22);

    /* On Air */

    --ariplayer-onair-text: var(--ariplayer-white-96);
    --ariplayer-onair-bg: rgba(40, 0, 0, .38);
    --ariplayer-onair-bg-glow: rgba(255, 60, 45, .25);
    --ariplayer-onair-border: rgba(255, 43, 35, .75);
    --ariplayer-onair-dot: rgb(255, 34, 27);
    --ariplayer-onair-shadow-red-95: rgba(255, 30, 25, .95);
    --ariplayer-onair-shadow-red-70: rgba(255, 30, 25, .70);
    --ariplayer-onair-shadow-red-45: rgba(255, 25, 20, .45);
    --ariplayer-onair-shadow-red-40: rgba(255, 45, 35, .40);
    --ariplayer-onair-shadow-red-16: rgba(255, 25, 20, .16);


    /* Aura dark izquierda — humo ascendente */

    --ariplayer-dark-aura-left: 0%;
    --ariplayer-dark-aura-top: 8%;
    --ariplayer-dark-aura-width: 23%;
    --ariplayer-dark-aura-height: 88%;
    --ariplayer-dark-aura-blur: calc(var(--ariplayer-height) * 0.020);
    --ariplayer-dark-aura-opacity: .72;
    --ariplayer-dark-aura-speed: 7.2s;

    /* Máscara del aura dark */

    --ariplayer-dark-mask-100: rgb(0 0 0 / 1);
    --ariplayer-dark-mask-82: rgb(0 0 0 / .82);
    --ariplayer-dark-mask-46: rgb(0 0 0 / .46);
    --ariplayer-dark-mask-18: rgb(0 0 0 / .18);
    --ariplayer-dark-mask-0: rgb(0 0 0 / 0);

    /* Humo frío / turquesa */

    --ariplayer-dark-smoke-1: rgba(52, 255, 235, .34);
    --ariplayer-dark-smoke-2: rgba(52, 255, 235, .18);
    --ariplayer-dark-smoke-3: rgba(10, 120, 122, .16);
    --ariplayer-dark-smoke-4: rgba(22, 210, 205, .22);
    --ariplayer-dark-smoke-5: rgba(0, 92, 102, .18);
    --ariplayer-dark-smoke-6: rgba(120, 255, 248, .14);
    --ariplayer-dark-smoke-7: rgba(0, 45, 55, .22);

    /* Brillos fríos en la base */

    --ariplayer-dark-ember-1: rgba(95, 255, 244, .42);
    --ariplayer-dark-ember-2: rgba(67, 255, 241, .24);
    --ariplayer-dark-ember-3: rgba(255, 255, 255, .10);

    /* Aura chisparina derecha */

    --ariplayer-chispa-aura-right: -7%;
    --ariplayer-chispa-aura-top: -5%;
    --ariplayer-chispa-aura-width: 34%;
    --ariplayer-chispa-aura-height: 112%;
    --ariplayer-chispa-aura-blur: calc(var(--ariplayer-height) * 0.008);
    --ariplayer-chispa-aura-opacity: 1;
    --ariplayer-chispa-aura-speed: 5.2s;

    /* Máscara del aura chisparina */

    --ariplayer-mask-100: rgb(0 0 0 / 1);
    --ariplayer-mask-82: rgb(0 0 0 / .82);
    --ariplayer-mask-46: rgb(0 0 0 / .46);
    --ariplayer-mask-18: rgb(0 0 0 / .18);
    --ariplayer-mask-0: rgb(0 0 0 / 0);

    /* Brillos / halo dorado */

    --ariplayer-chispa-gold-glow-1: rgba(255, 230, 155, .22);
    --ariplayer-chispa-gold-glow-2: rgba(255, 210, 110, .16);
    --ariplayer-chispa-gold-glow-3: rgba(255, 245, 220, .12);

    /* Polvo brillante */

    --ariplayer-chispa-dust-strong: rgba(255, 240, 190, .95);
    --ariplayer-chispa-dust-mid: rgba(255, 220, 135, .78);
    --ariplayer-chispa-dust-soft: rgba(255, 205, 110, .52);

    /* Halo cálido */

    --ariplayer-chispa-halo-1: rgba(255, 219, 125, 0.85);
    --ariplayer-chispa-halo-2: rgba(255, 196, 82, 0.55);
    --ariplayer-chispa-halo-3: rgba(255, 245, 226, .10);


    /* Destello Dorado en Varita */

    --ariplayer-wand-x: 95%;
    --ariplayer-wand-y: 55%;

    --ariplayer-wand-core-size: calc(var(--ariplayer-height) * 0.030);
    --ariplayer-wand-flare-size: calc(var(--ariplayer-height) * 0.135);

    --ariplayer-wand-opacity: .98;
    --ariplayer-wand-speed: 1.9s;
    --ariplayer-wand-flare-speed: 2.8s;

    /* Colores del destello */

    --ariplayer-wand-core: rgba(255, 247, 215, 1);
    --ariplayer-wand-core-mid: rgba(255, 229, 145, .96);
    --ariplayer-wand-core-soft: rgba(255, 207, 95, .72);
    --ariplayer-wand-core-fade: rgba(255, 190, 70, 0);

    --ariplayer-wand-flare-strong: rgba(255, 246, 220, .95);
    --ariplayer-wand-flare-mid: rgba(255, 220, 130, .62);
    --ariplayer-wand-flare-soft: rgba(255, 196, 82, .28);

    --ariplayer-wand-shadow-1: rgba(255, 246, 220, .95);
    --ariplayer-wand-shadow-2: rgba(255, 220, 135, .78);
    --ariplayer-wand-shadow-3: rgba(255, 196, 82, .45);

    /* SCANLINES / TRANSMISIÓN */

    --ariplayer-screen-x: 7.35%;
    --ariplayer-screen-y: 22.5%;
    --ariplayer-screen-width: 86.2%;
    --ariplayer-screen-height: 69.5%;
    --ariplayer-screen-radius: calc(var(--ariplayer-height) * 0.115);

    --ariplayer-scanline-color: rgba(120, 255, 248, .060);
    --ariplayer-scanline-shadow: rgba(67, 255, 241, .040);
    --ariplayer-scanline-opacity: .38;
    --ariplayer-scanline-size: calc(var(--ariplayer-height) * 0.03);
    --ariplayer-scanline-speed: 7s;

    /* ==========================================================
       EQUALIZER ANIMADO
       ========================================================== */

    --ariplayer-eq-left-x: 36.2%;
    --ariplayer-eq-left-y: 74.3%;
    --ariplayer-eq-left-width: 10.2%;

    --ariplayer-eq-right-x: 59.2%;
    --ariplayer-eq-right-y: 74.3%;
    --ariplayer-eq-right-width: 14.6%;

    --ariplayer-eq-height: calc(var(--ariplayer-height) * 0.155);
    --ariplayer-eq-gap: calc(var(--ariplayer-height) * 0.030);
    --ariplayer-eq-bar-width: calc(var(--ariplayer-height) * 0.012);
    --ariplayer-eq-radius: calc(var(--ariplayer-height) * 0.004);

    --ariplayer-eq-opacity: .48;
    --ariplayer-eq-speed: 1.25s;

    --ariplayer-eq-color-top: rgba(120, 255, 248, .92);
    --ariplayer-eq-color-mid: rgba(67, 255, 241, .62);
    --ariplayer-eq-color-bottom: rgba(20, 160, 155, .22);

    --ariplayer-eq-shadow-soft: rgba(67, 255, 241, .38);
    --ariplayer-eq-shadow-strong: rgba(67, 255, 241, .72);

    /* ==========================================================
       ON AIR — PULSO DEL BADGE
       ========================================================== */

    --ariplayer-onair-badge-speed: 2.4s;
    --ariplayer-onair-badge-brightness-low: .92;
    --ariplayer-onair-badge-brightness-high: 1.38;
    --ariplayer-onair-badge-opacity-low: .82;
    --ariplayer-onair-badge-opacity-high: 1;

    /* ==========================================================
       TÍTULO — SEÑAL INESTABLE / MICRO GLITCH
       ========================================================== */

    --ariplayer-title-glitch-speed: 7.8s;
    --ariplayer-title-glitch-opacity: .75;

    --ariplayer-title-glitch-x-small: calc(var(--ariplayer-height) * 0.004);
    --ariplayer-title-glitch-x-mid: calc(var(--ariplayer-height) * 0.008);

    --ariplayer-title-glitch-cyan: var(--ariplayer-cyan-glow-75);
    --ariplayer-title-glitch-gold: var(--ariplayer-wand-shadow-2);
    --ariplayer-title-glitch-shadow: var(--ariplayer-cyan-glow-45);


    /* ==========================================================
       BRILLO BARRIDO / CRISTAL
       ========================================================== */

    --ariplayer-shine-speed: 6.8s;
    --ariplayer-shine-opacity: .42;
    --ariplayer-shine-angle: 112deg;

    --ariplayer-shine-width: 38%;
    --ariplayer-shine-start-x: -48%;
    --ariplayer-shine-end-x: 148%;

    --ariplayer-shine-color-0: rgba(255, 255, 255, 0);
    --ariplayer-shine-color-1: rgba(255, 255, 255, .035);
    --ariplayer-shine-color-2: rgba(120, 255, 248, .12);
    --ariplayer-shine-color-3: rgba(255, 255, 255, .22);
    --ariplayer-shine-color-4: rgba(120, 255, 248, .09);
    --ariplayer-shine-color-5: rgba(255, 255, 255, 0);


    /* ==========================================================
       MARCO RESPIRANDO — DARK / CHISPARINA
       ========================================================== */

    --ariplayer-panel-edge-thickness: calc(var(--ariplayer-height) * 0.0045);
    --ariplayer-panel-edge-radius: calc(var(--ariplayer-height) * 0.11);
    --ariplayer-panel-edge-speed: 4.8s;

    /* Glow general */

    --ariplayer-panel-edge-opacity-low: .28;
    --ariplayer-panel-edge-opacity-high: .72;

    /* Lado dark */

    --ariplayer-panel-dark-border: rgba(67, 255, 241, .55);
    --ariplayer-panel-dark-glow-1: rgba(67, 255, 241, .34);
    --ariplayer-panel-dark-glow-2: rgba(67, 255, 241, .16);
    --ariplayer-panel-dark-inner: rgba(67, 255, 241, .12);

    /* Lado chisparina */

    --ariplayer-panel-gold-border: rgba(255, 219, 125, .72);
    --ariplayer-panel-gold-glow-1: rgba(255, 219, 125, .42);
    --ariplayer-panel-gold-glow-2: rgba(255, 196, 82, .18);
    --ariplayer-panel-gold-inner: rgba(255, 230, 155, .14);

    /* Top */

    --ariplayer-panel-top-left: 21.5%;
    --ariplayer-panel-top-top: 20%;
    --ariplayer-panel-top-width: 56%;

    /* Bottom */

    --ariplayer-panel-bottom-left: 13.5%;
    --ariplayer-panel-bottom-top: 96.8%;
    --ariplayer-panel-bottom-width: 77.5%;

    /* Left bracket [ */

    --ariplayer-panel-left-left: 4.2%;
    --ariplayer-panel-left-top: 18.8%;
    --ariplayer-panel-left-width: 4%;
    --ariplayer-panel-left-height: 79%;

    /* Right bracket ] */

    --ariplayer-panel-right-right: 3.4%;
    --ariplayer-panel-right-top: 18.8%;
    --ariplayer-panel-right-width: 10.8%;
    --ariplayer-panel-right-height: 77%;

    /* Posiciones de textos */

    --ariplayer-title-x: 23.5%;
    --ariplayer-title-y: 34.85%;
    --ariplayer-title-size: 0.129em;

    --ariplayer-subtitle-x: 25.95%;
    --ariplayer-subtitle-y: 53.95%;
    --ariplayer-subtitle-size: 0.059em;

    --ariplayer-tags-x: 26.8%;
    --ariplayer-tags-y: 70.5%;
    --ariplayer-tags-size: 0.0555em;

    --ariplayer-onair-x: 54.15%;
    --ariplayer-onair-y: 25.9%;
    --ariplayer-onair-size: 0.0555em;

    /* Botón play */

    --ariplayer-play-x: 53.9%;
    --ariplayer-play-y: 62.2%;
    --ariplayer-play-size: 11.75%;

    /* Tiempos */

    --ariplayer-play-glow-speed: 1.8s;
    --ariplayer-play-pulse-speed: 1.8s;
    --ariplayer-onair-dot-speed: 1.25s;
    --ariplayer-dark-aura-speed: 6.5s;
}

/* ==========================================================
   CONTENEDOR
   ========================================================== */

.ariplayer-siren-player {
    --ariplayer-image-ratio: 3.637;
    --ariplayer-height: clamp(48px, 27.5vw, 175px);

    width: 100%;
    max-width: 100%;
    text-align: center;
    overflow: hidden;
}

.arikel-miniplayer {
    width: 100%;
    max-width: 100%;
}

.firma-slider.ariplayer-signature-slider {
    width: 100%;
}

.firma-slider-zonas.ariplayer-signature-zones {
    height: auto !important;
}

.firma-slide.ariplayer-signature-slide {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    align-items: center;
    justify-content: center;
}

.firma-slide.ariplayer-signature-slide > .signature.ariplayer-signature-host {
    width: 100% !important;
    max-width: 676px !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    overflow: visible !important;
    box-sizing: border-box;
}

@supports (width: 1cqw) {
    .ariplayer-siren-player {
        --ariplayer-height: clamp(48px, calc((100cqw - 16px) / var(--ariplayer-image-ratio)), 175px);
    }
}

.ariplayer-siren-frame {
    position: relative;
    display: inline-block;
    max-width: 100%;
    overflow: visible;
    isolation: isolate;

    /*
      Esto permite que los textos escalen junto con la altura del player.
      1em = altura total del miniplayer.
    */
    font-size: var(--ariplayer-height);
}

.arikel-miniplayer .ariplayer-siren-image {
    height: var(--ariplayer-height) !important;
    width: calc(var(--ariplayer-height) * var(--ariplayer-image-ratio)) !important;
    max-width: calc(var(--ariplayer-height) * var(--ariplayer-image-ratio)) !important;
    display: block;
    position: relative;
    z-index: 1;
    color: transparent;
    font-size: 0;
}


/* ==========================================================
   AURAS SEPARADAS: ARIKEL DARK / ARIKEL CHISPARINA
   ========================================================== */

.ariplayer-siren-frame::before,
.ariplayer-siren-frame::after {
    content: "";
    position: absolute;
    pointer-events: none;
    z-index: 0;
}

/* Aura dark izquierda — humo ascendente desde la base */

.ariplayer-siren-frame::before {
    left: var(--ariplayer-dark-aura-left);
    top: var(--ariplayer-dark-aura-top);
    width: var(--ariplayer-dark-aura-width);
    height: var(--ariplayer-dark-aura-height);

    background:
        /* Base densa de humo */
            radial-gradient(circle at 24% 88%,
            var(--ariplayer-dark-smoke-1) 0%,
            var(--ariplayer-dark-smoke-2) 16%,
            var(--ariplayer-dark-smoke-7) 34%,
            var(--ariplayer-transparent) 60%),

            radial-gradient(circle at 40% 82%,
            var(--ariplayer-dark-smoke-4) 0%,
            var(--ariplayer-dark-smoke-3) 20%,
            var(--ariplayer-transparent) 52%),

            radial-gradient(circle at 18% 74%,
            var(--ariplayer-dark-smoke-6) 0%,
            var(--ariplayer-dark-smoke-2) 18%,
            var(--ariplayer-transparent) 46%),

                /* Plumas de humo que suben */
            radial-gradient(circle at 34% 64%,
            var(--ariplayer-dark-smoke-4) 0%,
            var(--ariplayer-dark-smoke-3) 18%,
            var(--ariplayer-transparent) 44%),

            radial-gradient(circle at 22% 54%,
            var(--ariplayer-dark-smoke-2) 0%,
            var(--ariplayer-dark-smoke-5) 20%,
            var(--ariplayer-transparent) 48%),

            radial-gradient(circle at 44% 42%,
            var(--ariplayer-dark-smoke-6) 0%,
            var(--ariplayer-dark-smoke-3) 18%,
            var(--ariplayer-transparent) 42%),

            radial-gradient(circle at 28% 30%,
            var(--ariplayer-dark-smoke-2) 0%,
            var(--ariplayer-dark-smoke-5) 16%,
            var(--ariplayer-transparent) 38%),

                /* Brillos fríos en la base */
            radial-gradient(circle at 16% 90%,
            var(--ariplayer-dark-ember-1) 0%,
            var(--ariplayer-transparent) 14%),

            radial-gradient(circle at 36% 84%,
            var(--ariplayer-dark-ember-2) 0%,
            var(--ariplayer-transparent) 12%),

            radial-gradient(circle at 26% 72%,
            var(--ariplayer-dark-ember-3) 0%,
            var(--ariplayer-transparent) 9%);

    filter: blur(var(--ariplayer-dark-aura-blur));
    opacity: var(--ariplayer-dark-aura-opacity);
    mix-blend-mode: screen;
    pointer-events: none;
    z-index: 0;

    -webkit-mask-image: radial-gradient(
            ellipse 54% 68% at 34% 68%,
            var(--ariplayer-dark-mask-100) 0%,
            var(--ariplayer-dark-mask-82) 18%,
            var(--ariplayer-dark-mask-46) 40%,
            var(--ariplayer-dark-mask-18) 62%,
            var(--ariplayer-dark-mask-0) 82%
    );
    mask-image: radial-gradient(
            ellipse 54% 68% at 34% 68%,
            var(--ariplayer-dark-mask-100) 0%,
            var(--ariplayer-dark-mask-82) 18%,
            var(--ariplayer-dark-mask-46) 40%,
            var(--ariplayer-dark-mask-18) 62%,
            var(--ariplayer-dark-mask-0) 82%
    );

    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-position: center;
    mask-position: center;

    animation: ariplayer-dark-aura var(--ariplayer-dark-aura-speed) ease-in-out infinite;
}

/* Aura chisparina derecha — polvo mágico dorado */

.ariplayer-siren-frame::after {
    right: var(--ariplayer-chispa-aura-right);
    top: var(--ariplayer-chispa-aura-top);
    width: var(--ariplayer-chispa-aura-width);
    height: var(--ariplayer-chispa-aura-height);

    background:
        /* Halo superior derecho */
            radial-gradient(circle at 55% 30%,
            var(--ariplayer-chispa-halo-1) 0%,
            var(--ariplayer-transparent) 24%),
            radial-gradient(circle at 67% 20%,
            var(--ariplayer-chispa-halo-2) 0%,
            var(--ariplayer-transparent) 20%),
            radial-gradient(circle at 46% 42%,
            var(--ariplayer-chispa-halo-3) 0%,
            var(--ariplayer-transparent) 22%),

                /* Halo cerca de la varita */
            radial-gradient(circle at 65% 53%,
            var(--ariplayer-chispa-gold-glow-1) 0%,
            var(--ariplayer-transparent) 28%),
            radial-gradient(circle at 77% 58%,
            var(--ariplayer-chispa-gold-glow-2) 0%,
            var(--ariplayer-transparent) 22%),
            radial-gradient(circle at 51% 62%,
            var(--ariplayer-chispa-gold-glow-3) 0%,
            var(--ariplayer-transparent) 20%),

                /* Polvo mágico irregular */
            radial-gradient(circle at 44% 15%,
            var(--ariplayer-chispa-dust-soft) 0 0.55%,
            var(--ariplayer-transparent) 1.5%),
            radial-gradient(circle at 57% 18%,
            var(--ariplayer-chispa-dust-strong) 0 0.75%,
            var(--ariplayer-transparent) 1.8%),
            radial-gradient(circle at 69% 25%,
            var(--ariplayer-chispa-dust-mid) 0 0.65%,
            var(--ariplayer-transparent) 1.6%),
            radial-gradient(circle at 50% 34%,
            var(--ariplayer-chispa-dust-mid) 0 0.7%,
            var(--ariplayer-transparent) 1.7%),
            radial-gradient(circle at 75% 39%,
            var(--ariplayer-chispa-dust-soft) 0 0.75%,
            var(--ariplayer-transparent) 1.8%),
            radial-gradient(circle at 61% 48%,
            var(--ariplayer-chispa-dust-strong) 0 0.85%,
            var(--ariplayer-transparent) 2%),
            radial-gradient(circle at 82% 52%,
            var(--ariplayer-chispa-dust-mid) 0 0.65%,
            var(--ariplayer-transparent) 1.55%),
            radial-gradient(circle at 55% 61%,
            var(--ariplayer-chispa-dust-soft) 0 0.75%,
            var(--ariplayer-transparent) 1.8%),
            radial-gradient(circle at 70% 70%,
            var(--ariplayer-chispa-dust-strong) 0 0.7%,
            var(--ariplayer-transparent) 1.7%),
            radial-gradient(circle at 47% 78%,
            var(--ariplayer-chispa-dust-mid) 0 0.58%,
            var(--ariplayer-transparent) 1.5%);

    filter: blur(var(--ariplayer-chispa-aura-blur));
    opacity: var(--ariplayer-chispa-aura-opacity);
    mix-blend-mode: screen;
    pointer-events: none;
    z-index: 0;

    -webkit-mask-image: radial-gradient(
            ellipse 58% 62% at 52% 48%,
            var(--ariplayer-mask-100) 0%,
            var(--ariplayer-mask-82) 18%,
            var(--ariplayer-mask-46) 38%,
            var(--ariplayer-mask-18) 58%,
            var(--ariplayer-mask-0) 80%
    );
    mask-image: radial-gradient(
            ellipse 58% 62% at 52% 48%,
            var(--ariplayer-mask-100) 0%,
            var(--ariplayer-mask-82) 18%,
            var(--ariplayer-mask-46) 38%,
            var(--ariplayer-mask-18) 58%,
            var(--ariplayer-mask-0) 80%
    );

    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;

    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;

    -webkit-mask-position: center;
    mask-position: center;

    animation: ariplayer-chispa-dust var(--ariplayer-chispa-aura-speed) ease-in-out infinite;
}

/* ==========================================================
   DESTELLO DORADO EN LA VARITA
   ========================================================== */

.ariplayer-text-layer::before,
.ariplayer-text-layer::after {
    content: "";
    position: absolute;
    left: var(--ariplayer-wand-x);
    top: var(--ariplayer-wand-y);
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 4;
    mix-blend-mode: screen;
}

/* Núcleo brillante */

.ariplayer-text-layer::before {
    width: var(--ariplayer-wand-core-size);
    height: var(--ariplayer-wand-core-size);
    border-radius: 50%;
    opacity: var(--ariplayer-wand-opacity);

    background:
            radial-gradient(circle,
            var(--ariplayer-wand-core) 0%,
            var(--ariplayer-wand-core-mid) 24%,
            var(--ariplayer-wand-core-soft) 52%,
            var(--ariplayer-wand-core-fade) 100%);

    box-shadow:
            0 0 calc(var(--ariplayer-height) * 0.010) var(--ariplayer-wand-shadow-1),
            0 0 calc(var(--ariplayer-height) * 0.028) var(--ariplayer-wand-shadow-2),
            0 0 calc(var(--ariplayer-height) * 0.060) var(--ariplayer-wand-shadow-3);

    animation: ariplayer-wand-glow var(--ariplayer-wand-speed) ease-in-out infinite;
}

/* Flare / estrellita */

.ariplayer-text-layer::after {
    width: var(--ariplayer-wand-flare-size);
    height: var(--ariplayer-wand-flare-size);
    opacity: .92;

    background:
            linear-gradient(90deg,
            var(--ariplayer-transparent) 0%,
            var(--ariplayer-transparent) 43%,
            var(--ariplayer-wand-flare-mid) 47%,
            var(--ariplayer-wand-flare-strong) 50%,
            var(--ariplayer-wand-flare-mid) 53%,
            var(--ariplayer-transparent) 57%,
            var(--ariplayer-transparent) 100%),
            linear-gradient(0deg,
            var(--ariplayer-transparent) 0%,
            var(--ariplayer-transparent) 43%,
            var(--ariplayer-wand-flare-mid) 47%,
            var(--ariplayer-wand-flare-strong) 50%,
            var(--ariplayer-wand-flare-mid) 53%,
            var(--ariplayer-transparent) 57%,
            var(--ariplayer-transparent) 100%),
            radial-gradient(circle,
            var(--ariplayer-transparent) 0%,
            var(--ariplayer-transparent) 35%,
            var(--ariplayer-wand-flare-soft) 58%,
            var(--ariplayer-transparent) 78%);

    filter:
            drop-shadow(0 0 calc(var(--ariplayer-height) * 0.010) var(--ariplayer-wand-shadow-1))
            drop-shadow(0 0 calc(var(--ariplayer-height) * 0.026) var(--ariplayer-wand-shadow-2))
            drop-shadow(0 0 calc(var(--ariplayer-height) * 0.048) var(--ariplayer-wand-shadow-3));

    animation: ariplayer-wand-flare var(--ariplayer-wand-flare-speed) ease-in-out infinite;
}

/* ==========================================================
   SCANLINES LIMITADAS AL RECTÁNGULO DEL PLAYER
   ========================================================== */

.ariplayer-screen-scanlines {
    position: absolute;
    left: var(--ariplayer-screen-x);
    top: var(--ariplayer-screen-y);
    width: var(--ariplayer-screen-width);
    height: var(--ariplayer-screen-height);

    z-index: 2;
    pointer-events: none;
    overflow: hidden;

    border-radius: var(--ariplayer-screen-radius);
    opacity: var(--ariplayer-scanline-opacity);
    mix-blend-mode: screen;
}

.ariplayer-screen-scanlines::before {
    content: "";
    position: absolute;
    inset: -8%;

    background:
            repeating-linear-gradient(
                    0deg,
                    var(--ariplayer-transparent) 0,
                    var(--ariplayer-transparent) calc(var(--ariplayer-scanline-size) * 0.62),
                    var(--ariplayer-scanline-color) calc(var(--ariplayer-scanline-size) * 0.64),
                    var(--ariplayer-scanline-color) calc(var(--ariplayer-scanline-size) * 0.72),
                    var(--ariplayer-transparent) calc(var(--ariplayer-scanline-size) * 0.76),
                    var(--ariplayer-transparent) var(--ariplayer-scanline-size)
            ),
            linear-gradient(
                    180deg,
                    var(--ariplayer-transparent) 0%,
                    var(--ariplayer-scanline-shadow) 48%,
                    var(--ariplayer-transparent) 100%
            );

    animation: ariplayer-scanline-drift var(--ariplayer-scanline-speed) linear infinite;
}

/* ==========================================================
   BRILLO BARRIDO SOBRE EL PANEL
   ========================================================== */

.ariplayer-screen-scanlines::after {
    content: "";
    position: absolute;
    top: -35%;
    left: var(--ariplayer-shine-start-x);
    width: var(--ariplayer-shine-width);
    height: 170%;

    pointer-events: none;
    opacity: var(--ariplayer-shine-opacity);
    mix-blend-mode: screen;

    background:
            linear-gradient(
                    var(--ariplayer-shine-angle),
                    var(--ariplayer-shine-color-0) 0%,
                    var(--ariplayer-shine-color-1) 34%,
                    var(--ariplayer-shine-color-2) 44%,
                    var(--ariplayer-shine-color-3) 50%,
                    var(--ariplayer-shine-color-4) 56%,
                    var(--ariplayer-shine-color-5) 68%,
                    var(--ariplayer-shine-color-0) 100%
            );

    filter: blur(calc(var(--ariplayer-height) * 0.010));

    animation: ariplayer-panel-shine var(--ariplayer-shine-speed) ease-in-out infinite;
}

/* ==========================================================
   EQUALIZER ANIMADO
   ========================================================== */

.ariplayer-equalizer {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    mix-blend-mode: screen;
}

.ariplayer-eq-group {
    position: absolute;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: var(--ariplayer-eq-gap);
    height: var(--ariplayer-eq-height);
    opacity: var(--ariplayer-eq-opacity);
}

.ariplayer-eq-group-left {
    left: var(--ariplayer-eq-left-x);
    top: var(--ariplayer-eq-left-y);
    width: var(--ariplayer-eq-left-width);
}

.ariplayer-eq-group-right {
    left: var(--ariplayer-eq-right-x);
    top: var(--ariplayer-eq-right-y);
    width: var(--ariplayer-eq-right-width);
}

.ariplayer-eq-group span {
    display: block;
    width: var(--ariplayer-eq-bar-width);
    height: 42%;
    border-radius: var(--ariplayer-eq-radius);

    background:
            linear-gradient(
                    180deg,
                    var(--ariplayer-eq-color-top) 0%,
                    var(--ariplayer-eq-color-mid) 48%,
                    var(--ariplayer-eq-color-bottom) 100%
            );

    box-shadow:
            0 0 calc(var(--ariplayer-height) * 0.012) var(--ariplayer-eq-shadow-soft),
            0 0 calc(var(--ariplayer-height) * 0.022) var(--ariplayer-eq-shadow-strong);

    transform-origin: bottom center;
    animation: ariplayer-eq-bounce var(--ariplayer-eq-speed) ease-in-out infinite;
}

/* Variación izquierda */

.ariplayer-eq-group-left span:nth-child(1) { height: 28%; animation-delay: -.10s; }
.ariplayer-eq-group-left span:nth-child(2) { height: 42%; animation-delay: -.34s; }
.ariplayer-eq-group-left span:nth-child(3) { height: 58%; animation-delay: -.58s; }
.ariplayer-eq-group-left span:nth-child(4) { height: 74%; animation-delay: -.18s; }
.ariplayer-eq-group-left span:nth-child(5) { height: 92%; animation-delay: -.44s; }
.ariplayer-eq-group-left span:nth-child(6) { height: 62%; animation-delay: -.72s; }
.ariplayer-eq-group-left span:nth-child(7) { height: 48%; animation-delay: -.26s; }
.ariplayer-eq-group-left span:nth-child(8) { height: 82%; animation-delay: -.66s; }
.ariplayer-eq-group-left span:nth-child(9) { height: 55%; animation-delay: -.38s; }
.ariplayer-eq-group-left span:nth-child(10) { height: 36%; animation-delay: -.82s; }
.ariplayer-eq-group-left span:nth-child(11) { height: 50%; animation-delay: -.50s; }
.ariplayer-eq-group-left span:nth-child(12) { height: 30%; animation-delay: -.22s; }

/* Variación derecha */

.ariplayer-eq-group-right span:nth-child(1) { height: 34%; animation-delay: -.70s; }
.ariplayer-eq-group-right span:nth-child(2) { height: 48%; animation-delay: -.28s; }
.ariplayer-eq-group-right span:nth-child(3) { height: 38%; animation-delay: -.54s; }
.ariplayer-eq-group-right span:nth-child(4) { height: 64%; animation-delay: -.16s; }
.ariplayer-eq-group-right span:nth-child(5) { height: 44%; animation-delay: -.78s; }
.ariplayer-eq-group-right span:nth-child(6) { height: 74%; animation-delay: -.42s; }
.ariplayer-eq-group-right span:nth-child(7) { height: 96%; animation-delay: -.12s; }
.ariplayer-eq-group-right span:nth-child(8) { height: 72%; animation-delay: -.62s; }
.ariplayer-eq-group-right span:nth-child(9) { height: 54%; animation-delay: -.36s; }
.ariplayer-eq-group-right span:nth-child(10) { height: 84%; animation-delay: -.86s; }
.ariplayer-eq-group-right span:nth-child(11) { height: 46%; animation-delay: -.24s; }
.ariplayer-eq-group-right span:nth-child(12) { height: 32%; animation-delay: -.50s; }


/* ==========================================================
   MARCO RESPIRANDO — 4 PIEZAS
   ========================================================== */

.ariplayer-panel-breath {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    overflow: visible;
}

.ariplayer-panel-edge {
    position: absolute;
    display: block;
    pointer-events: none;
    box-sizing: border-box;
    mix-blend-mode: screen;
    animation: ariplayer-panel-edge-breath var(--ariplayer-panel-edge-speed) ease-in-out infinite;
}

/* ------------------------------------------
   BORDE SUPERIOR
   ------------------------------------------ */

.ariplayer-panel-edge-top {
    left: var(--ariplayer-panel-top-left);
    top: var(--ariplayer-panel-top-top);
    width: var(--ariplayer-panel-top-width);
    height: var(--ariplayer-panel-edge-thickness);
    border-radius: 999px;

    background:
            linear-gradient(
                    90deg,
                    var(--ariplayer-panel-dark-border) 0%,
                    var(--ariplayer-panel-dark-border) 44%,
                    rgba(160, 235, 210, .38) 54%,
                    var(--ariplayer-panel-gold-border) 100%
            );

    box-shadow:
            0 0 calc(var(--ariplayer-height) * 0.022) var(--ariplayer-panel-dark-glow-1),
            0 0 calc(var(--ariplayer-height) * 0.040) var(--ariplayer-panel-gold-glow-1);
}

/* ------------------------------------------
   BORDE INFERIOR
   ------------------------------------------ */

.ariplayer-panel-edge-bottom {
    left: var(--ariplayer-panel-bottom-left);
    top: var(--ariplayer-panel-bottom-top);
    width: var(--ariplayer-panel-bottom-width);
    height: var(--ariplayer-panel-edge-thickness);
    border-radius: 999px;

    background:
            linear-gradient(
                    90deg,
                    var(--ariplayer-panel-dark-border) 0%,
                    var(--ariplayer-panel-dark-border) 44%,
                    rgba(160, 235, 210, .38) 54%,
                    var(--ariplayer-panel-gold-border) 100%
            );

    box-shadow:
            0 0 calc(var(--ariplayer-height) * 0.022) var(--ariplayer-panel-dark-glow-1),
            0 0 calc(var(--ariplayer-height) * 0.040) var(--ariplayer-panel-gold-glow-1);
}

/* ------------------------------------------
   LATERAL IZQUIERDO  [
   ------------------------------------------ */

.ariplayer-panel-edge-left {
    left: var(--ariplayer-panel-left-left);
    top: var(--ariplayer-panel-left-top);
    width: var(--ariplayer-panel-left-width);
    height: var(--ariplayer-panel-left-height);

    border-top: var(--ariplayer-panel-edge-thickness) solid var(--ariplayer-panel-dark-border);
    border-bottom: var(--ariplayer-panel-edge-thickness) solid var(--ariplayer-panel-dark-border);
    border-left: var(--ariplayer-panel-edge-thickness) solid var(--ariplayer-panel-dark-border);
    border-right: 0;

    border-radius:
            var(--ariplayer-panel-edge-radius)
            0
            0
            var(--ariplayer-panel-edge-radius);

    box-shadow: none;

    filter:
            drop-shadow(0 0 calc(var(--ariplayer-height) * 0.022) var(--ariplayer-panel-dark-glow-1))
            drop-shadow(0 0 calc(var(--ariplayer-height) * 0.052) var(--ariplayer-panel-dark-glow-2));

    animation: ariplayer-panel-edge-breath var(--ariplayer-panel-edge-speed) ease-in-out infinite;
}

/* ------------------------------------------
   LATERAL DERECHO  ]
   ------------------------------------------ */

.ariplayer-panel-edge-right {
    right: var(--ariplayer-panel-right-right);
    top: var(--ariplayer-panel-right-top);
    width: var(--ariplayer-panel-right-width);
    height: var(--ariplayer-panel-right-height);

    border-top: var(--ariplayer-panel-edge-thickness) solid var(--ariplayer-panel-gold-border);
    border-bottom: var(--ariplayer-panel-edge-thickness) solid var(--ariplayer-panel-gold-border);
    border-right: var(--ariplayer-panel-edge-thickness) solid var(--ariplayer-panel-gold-border);
    border-left: 0;

    border-radius:
            0
            var(--ariplayer-panel-edge-radius)
            var(--ariplayer-panel-edge-radius)
            0;

    box-shadow: none;

    filter:
            drop-shadow(0 0 calc(var(--ariplayer-height) * 0.026) var(--ariplayer-panel-gold-glow-1))
            drop-shadow(0 0 calc(var(--ariplayer-height) * 0.054) var(--ariplayer-panel-gold-glow-2));

    animation: ariplayer-panel-edge-breath var(--ariplayer-panel-edge-speed) ease-in-out infinite;
    animation-delay: -1.2s;
}



/* ==========================================================
   CAPA DE TEXTOS
   ========================================================== */

.ariplayer-text-layer {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
}

.ariplayer-title,
.ariplayer-subtitle,
.ariplayer-tags,
.ariplayer-onair {
    position: absolute;
    white-space: nowrap;
    line-height: 1;
}

/* "Siren signal" */

.ariplayer-title {
    left: var(--ariplayer-title-x);
    top: var(--ariplayer-title-y);

    font-family: var(--ariplayer-font-title);
    font-size: var(--ariplayer-title-size);

    color: white;
    letter-spacing: 0.015em;
    font-weight: 400;

    isolation: isolate;
    animation: ariplayer-title-signal-flicker var(--ariplayer-title-glitch-speed) linear infinite;
}

.ariplayer-title::before,
.ariplayer-title::after {
    content: attr(data-text);
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    mix-blend-mode: screen;
}

.ariplayer-title::before {
    color: var(--ariplayer-title-glitch-cyan);
    text-shadow:
            calc(var(--ariplayer-height) * -0.006) 0 0 var(--ariplayer-title-glitch-shadow),
            0 0 0.04em var(--ariplayer-title-glitch-cyan);

    clip-path: inset(0 0 56% 0);
    animation: ariplayer-title-glitch-a var(--ariplayer-title-glitch-speed) linear infinite;
}

.ariplayer-title::after {
    color: var(--ariplayer-title-glitch-gold);
    text-shadow:
            calc(var(--ariplayer-height) * 0.006) 0 0 var(--ariplayer-title-glitch-gold),
            0 0 0.04em var(--ariplayer-title-glitch-gold);

    clip-path: inset(48% 0 0 0);
    animation: ariplayer-title-glitch-b var(--ariplayer-title-glitch-speed) linear infinite;
}

/* "Arikel McDowell Songs" */

.ariplayer-subtitle {
    left: var(--ariplayer-subtitle-x);
    top: var(--ariplayer-subtitle-y);

    font-family: var(--ariplayer-font-ui);
    font-size: var(--ariplayer-subtitle-size);

    color: var(--ariplayer-white-92);
    letter-spacing: 0.005em;
    font-weight: 400;
    pointer-events: auto;

    text-shadow:
            0 0 0.015em var(--ariplayer-white-35),
            0 0 0.05em var(--ariplayer-cyan-glow-22);
}

.ariplayer-subtitle-link:hover {
    color: var(--ariplayer-cyan-title);

    text-shadow:
            0 0 0.018em var(--ariplayer-cyan-glow-95),
            0 0 0.055em var(--ariplayer-cyan-glow-65),
            0 0 0.095em var(--ariplayer-cyan-glow-35);

    filter: brightness(1.12);
}

.ariplayer-link-mark {
    display: inline-block;
    margin-left: .36em;

    color: var(--ariplayer-cyan-title);
    font-size: 16px;
    line-height: 1;

    transform: translateY(-.06em);

    text-shadow:
            0 0 .035em var(--ariplayer-cyan-glow-75),
            0 0 .09em var(--ariplayer-cyan-glow-35);

    transition:
            transform .18s ease,
            text-shadow .18s ease,
            filter .18s ease;
}

.ariplayer-subtitle-link:hover .ariplayer-link-mark {
    transform: translate(.10em, -.16em);
    filter: brightness(1.22);

    text-shadow:
            0 0 .04em var(--ariplayer-cyan-glow-95),
            0 0 .12em var(--ariplayer-cyan-glow-65);
}

/* "Rol - Drama - Personajes" */

.ariplayer-tags {
    left: var(--ariplayer-tags-x);
    top: var(--ariplayer-tags-y);

    font-family: var(--ariplayer-font-ui);
    font-size: var(--ariplayer-tags-size);

    color: var(--ariplayer-cyan-title);
    letter-spacing: 0.02em;
    font-weight: 400;
}

/* Badge "On Air" */

.ariplayer-onair {
    left: var(--ariplayer-onair-x);
    top: var(--ariplayer-onair-y);
    transform: translateX(-50%);

    display: inline-flex;
    align-items: center;
    gap: calc(var(--ariplayer-height) * 0.009);

    padding:
            calc(var(--ariplayer-height) * 0.010)
            calc(var(--ariplayer-height) * 0.026)
            calc(var(--ariplayer-height) * 0.012);

    border: calc(var(--ariplayer-height) * 0.0025) solid var(--ariplayer-onair-border);
    border-radius: 999px;

    background:
            radial-gradient(circle at 20% 50%,
            var(--ariplayer-onair-bg-glow),
            var(--ariplayer-transparent) 45%),
            var(--ariplayer-onair-bg);

    color: var(--ariplayer-onair-text);

    font-family: var(--ariplayer-font-ui);
    font-size: var(--ariplayer-onair-size);
    line-height: 1;
    font-weight: 400;

    text-shadow:
            0 0 0.018em var(--ariplayer-white-40),
            0 0 0.04em var(--ariplayer-onair-shadow-red-40);

    box-shadow:
            0 0 calc(var(--ariplayer-height) * 0.018) var(--ariplayer-onair-shadow-red-45),
            inset 0 0 calc(var(--ariplayer-height) * 0.026) var(--ariplayer-onair-shadow-red-16);

    animation: ariplayer-onair-badge var(--ariplayer-onair-badge-speed) ease-in-out infinite;
    will-change: filter, opacity, box-shadow;
}

.ariplayer-onair span {
    width: calc(var(--ariplayer-height) * 0.026);
    height: calc(var(--ariplayer-height) * 0.026);
    border-radius: 50%;
    background: var(--ariplayer-onair-dot);

    box-shadow:
            0 0 calc(var(--ariplayer-height) * 0.012) var(--ariplayer-onair-shadow-red-95),
            0 0 calc(var(--ariplayer-height) * 0.026) var(--ariplayer-onair-shadow-red-70);

    animation: ariplayer-onair-dot var(--ariplayer-onair-dot-speed) ease-in-out infinite;
}

/* ==========================================================
   BOTÓN CENTRAL
   ========================================================== */

.ariplayer-play-effect {
    position: absolute;
    left: var(--ariplayer-play-x);
    top: var(--ariplayer-play-y);
    width: var(--ariplayer-play-size);
    aspect-ratio: 1/1;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    display: block;
    text-decoration: none;
    z-index: 6;

    box-shadow:
            0 0 18px var(--ariplayer-cyan-glow-75),
            0 0 42px var(--ariplayer-cyan-glow-45),
            inset 0 0 22px var(--ariplayer-cyan-glow-35);

    animation: ariplayer-siren-glow var(--ariplayer-play-glow-speed) ease-in-out infinite;
}

.ariplayer-play-effect::before,
.ariplayer-play-effect::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid var(--ariplayer-cyan-glow-75);
    animation: ariplayer-siren-pulse var(--ariplayer-play-pulse-speed) ease-out infinite;
}

.ariplayer-play-effect::after {
    animation-delay: .65s;
}

.ariplayer-play-effect::before {
    box-shadow:
            0 0 24px var(--ariplayer-cyan-glow-70),
            inset 0 0 20px var(--ariplayer-cyan-glow-35);
}

/* ==========================================================
   ANIMACIONES
   ========================================================== */

@keyframes ariplayer-siren-glow {
    0%,
    100% {
        opacity: .75;
        filter: brightness(1);
    }

    50% {
        opacity: 1;
        filter: brightness(1.45);
    }
}

@keyframes ariplayer-siren-pulse {
    0% {
        transform: scale(.85);
        opacity: .9;
    }

    100% {
        transform: scale(1.55);
        opacity: 0;
    }
}

@keyframes ariplayer-onair-dot {
    0%,
    100% {
        opacity: .7;
        transform: scale(.92);
    }

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

@keyframes ariplayer-dark-aura {
    0%,
    100% {
        opacity: calc(var(--ariplayer-dark-aura-opacity) * 0.82);
        transform: translate3d(0, 0, 0) scale(1);
        filter: blur(var(--ariplayer-dark-aura-blur)) brightness(1);
    }

    28% {
        opacity: var(--ariplayer-dark-aura-opacity);
        transform: translate3d(-0.8%, -1.8%, 0) scale(1.03);
        filter: blur(calc(var(--ariplayer-dark-aura-blur) * 1.05)) brightness(1.05);
    }

    55% {
        opacity: calc(var(--ariplayer-dark-aura-opacity) * 0.92);
        transform: translate3d(0.5%, -3.2%, 0) scale(1.05);
        filter: blur(calc(var(--ariplayer-dark-aura-blur) * 1.08)) brightness(1.03);
    }

    78% {
        opacity: calc(var(--ariplayer-dark-aura-opacity) * 0.76);
        transform: translate3d(-0.4%, -4.4%, 0) scale(1.02);
        filter: blur(calc(var(--ariplayer-dark-aura-blur) * 1.02)) brightness(.98);
    }
}

@keyframes ariplayer-chispa-dust {
    0%,
    100% {
        opacity: calc(var(--ariplayer-chispa-aura-opacity) * 0.82);
        transform: translate3d(0, 0, 0) scale(1);
        filter: blur(var(--ariplayer-chispa-aura-blur)) brightness(1);
    }

    35% {
        opacity: var(--ariplayer-chispa-aura-opacity);
        transform: translate3d(0.4%, -0.8%, 0) scale(1.018);
        filter: blur(calc(var(--ariplayer-chispa-aura-blur) * 1.05)) brightness(1.08);
    }

    68% {
        opacity: calc(var(--ariplayer-chispa-aura-opacity) * 0.9);
        transform: translate3d(-0.35%, 0.45%, 0) scale(0.995);
        filter: blur(calc(var(--ariplayer-chispa-aura-blur) * 0.96)) brightness(1.03);
    }
}

@keyframes ariplayer-wand-glow {
    0%,
    100% {
        transform: translate(-50%, -50%) scale(.88);
        opacity: .82;
        filter: brightness(1);
    }

    45% {
        transform: translate(-50%, -50%) scale(1.16);
        opacity: 1;
        filter: brightness(1.12);
    }

    70% {
        transform: translate(-50%, -50%) scale(.97);
        opacity: .92;
        filter: brightness(1.04);
    }
}

@keyframes ariplayer-wand-flare {
    0%,
    100% {
        transform: translate(-50%, -50%) rotate(0deg) scale(.82);
        opacity: .38;
    }

    30% {
        transform: translate(-50%, -50%) rotate(12deg) scale(1.08);
        opacity: .92;
    }

    58% {
        transform: translate(-50%, -50%) rotate(-8deg) scale(.94);
        opacity: .58;
    }

    78% {
        transform: translate(-50%, -50%) rotate(4deg) scale(1.02);
        opacity: .74;
    }
}

@keyframes ariplayer-scanline-drift {
    0% {
        background-position:
                0 0,
                0 0;
    }

    100% {
        background-position:
                0 var(--ariplayer-scanline-size),
                0 0;
    }
}

@keyframes ariplayer-eq-bounce {
    0%,
    100% {
        transform: scaleY(.42);
        opacity: .52;
        filter: brightness(.9);
    }

    35% {
        transform: scaleY(1);
        opacity: 1;
        filter: brightness(1.25);
    }

    62% {
        transform: scaleY(.68);
        opacity: .76;
        filter: brightness(1);
    }
}

@keyframes ariplayer-onair-badge {
    0%,
    100% {
        opacity: var(--ariplayer-onair-badge-opacity-low);
        filter: brightness(var(--ariplayer-onair-badge-brightness-low));

        box-shadow:
                0 0 calc(var(--ariplayer-height) * 0.014) var(--ariplayer-onair-shadow-red-45),
                inset 0 0 calc(var(--ariplayer-height) * 0.022) var(--ariplayer-onair-shadow-red-16);
    }

    45% {
        opacity: var(--ariplayer-onair-badge-opacity-high);
        filter: brightness(var(--ariplayer-onair-badge-brightness-high));

        box-shadow:
                0 0 calc(var(--ariplayer-height) * 0.026) var(--ariplayer-onair-shadow-red-70),
                0 0 calc(var(--ariplayer-height) * 0.052) var(--ariplayer-onair-shadow-red-45),
                inset 0 0 calc(var(--ariplayer-height) * 0.032) var(--ariplayer-onair-shadow-red-16);
    }

    70% {
        opacity: .94;
        filter: brightness(1.12);

        box-shadow:
                0 0 calc(var(--ariplayer-height) * 0.020) var(--ariplayer-onair-shadow-red-45),
                inset 0 0 calc(var(--ariplayer-height) * 0.026) var(--ariplayer-onair-shadow-red-16);
    }
}

@keyframes ariplayer-title-signal-flicker {
    0%,
    86%,
    100% {
        filter: brightness(1);
        transform: translate3d(0, 0, 0);
    }

    87% {
        filter: brightness(1.18);
        transform: translate3d(var(--ariplayer-title-glitch-x-small), 0, 0);
    }

    87.6% {
        filter: brightness(.92);
        transform: translate3d(calc(var(--ariplayer-title-glitch-x-small) * -1), 0, 0);
    }

    88.2% {
        filter: brightness(1.08);
        transform: translate3d(0, 0, 0);
    }

    91% {
        filter: brightness(1);
    }
}

@keyframes ariplayer-title-glitch-a {
    0%,
    86%,
    90%,
    100% {
        opacity: 0;
        transform: translate3d(0, 0, 0);
    }

    86.8% {
        opacity: var(--ariplayer-title-glitch-opacity);
        transform: translate3d(calc(var(--ariplayer-title-glitch-x-mid) * -1), 0, 0);
        clip-path: inset(0 0 62% 0);
    }

    87.4% {
        opacity: .35;
        transform: translate3d(var(--ariplayer-title-glitch-x-small), 0, 0);
        clip-path: inset(18% 0 42% 0);
    }

    88.1% {
        opacity: .6;
        transform: translate3d(calc(var(--ariplayer-title-glitch-x-small) * -1), 0, 0);
        clip-path: inset(0 0 72% 0);
    }
}

@keyframes ariplayer-title-glitch-b {
    0%,
    86%,
    90%,
    100% {
        opacity: 0;
        transform: translate3d(0, 0, 0);
    }

    87% {
        opacity: .42;
        transform: translate3d(var(--ariplayer-title-glitch-x-mid), 0, 0);
        clip-path: inset(52% 0 0 0);
    }

    87.8% {
        opacity: var(--ariplayer-title-glitch-opacity);
        transform: translate3d(calc(var(--ariplayer-title-glitch-x-small) * -1), 0, 0);
        clip-path: inset(62% 0 8% 0);
    }

    88.4% {
        opacity: .28;
        transform: translate3d(var(--ariplayer-title-glitch-x-small), 0, 0);
        clip-path: inset(42% 0 18% 0);
    }
}

@keyframes ariplayer-panel-shine {
    0%,
    18% {
        transform: translateX(0) skewX(-12deg);
        opacity: 0;
    }

    28% {
        opacity: calc(var(--ariplayer-shine-opacity) * .55);
    }

    46% {
        opacity: var(--ariplayer-shine-opacity);
    }

    64% {
        opacity: calc(var(--ariplayer-shine-opacity) * .45);
    }

    78%,
    100% {
        transform: translateX(calc(var(--ariplayer-shine-end-x) - var(--ariplayer-shine-start-x))) skewX(-12deg);
        opacity: 0;
    }
}

@keyframes ariplayer-panel-breath {
    0%,
    100% {
        opacity: var(--ariplayer-panel-breath-opacity-low);
        filter: brightness(.9);
        transform: scale(.997);
    }

    45% {
        opacity: var(--ariplayer-panel-breath-opacity-high);
        filter: brightness(1.18);
        transform: scale(1.003);
    }

    72% {
        opacity: calc(var(--ariplayer-panel-breath-opacity-high) * .72);
        filter: brightness(1.02);
        transform: scale(1);
    }
}

@keyframes ariplayer-panel-edge-breath {
    0%,
    100% {
        opacity: var(--ariplayer-panel-edge-opacity-low);
        filter: brightness(.92);
    }

    45% {
        opacity: var(--ariplayer-panel-edge-opacity-high);
        filter: brightness(1.16);
    }

    72% {
        opacity: calc(var(--ariplayer-panel-edge-opacity-high) * .72);
        filter: brightness(1.03);
    }
}




















/* ==========================================================
   TOAST SOUNDCLOUD PLAYER
   ========================================================== */

:root {
    --ariplayer-toast-width: 360px;
    --ariplayer-toast-radius: 16px;
    --ariplayer-toast-gutter: clamp(10px, 3vw, 22px);
    --ariplayer-toast-bottom: var(--ariplayer-toast-gutter);
    --ariplayer-toast-right: var(--ariplayer-toast-gutter);

    --ariplayer-toast-bg: rgba(7, 10, 16, .94);
    --ariplayer-toast-bg-soft: rgba(12, 20, 28, .86);
    --ariplayer-toast-border: rgba(67, 255, 241, .38);
    --ariplayer-toast-border-gold: rgba(255, 219, 125, .26);

    --ariplayer-toast-shadow-dark: rgba(0, 0, 0, .48);
    --ariplayer-toast-shadow-cyan: rgba(67, 255, 241, .22);
    --ariplayer-toast-shadow-gold: rgba(255, 219, 125, .14);

    --ariplayer-toast-title-color: var(--ariplayer-cyan-title);
    --ariplayer-toast-subtitle-color: var(--ariplayer-white-92);
    --ariplayer-toast-close-color: var(--ariplayer-white-96);

    --ariplayer-toast-speed: .26s;

    --ariplayer-toast-control-bg: rgba(67, 255, 241, .08);
    --ariplayer-toast-control-bg-hover: rgba(67, 255, 241, .16);
    --ariplayer-toast-control-border: rgba(67, 255, 241, .35);
    --ariplayer-toast-control-border-gold: rgba(255, 219, 125, .32);
    --ariplayer-toast-control-text: var(--ariplayer-white-96);

    --ariplayer-toast-lyrics-max-height: min(260px, 42dvh);
    --ariplayer-toast-lyrics-text: rgba(255, 255, 255, .88);
    --ariplayer-toast-lyrics-border: rgba(67, 255, 241, .20);
}

.ariplayer-toast {
    position: fixed;
    left: var(--ariplayer-toast-gutter);
    right: var(--ariplayer-toast-right);
    bottom: var(--ariplayer-toast-bottom);
    width: auto;
    max-width: var(--ariplayer-toast-width);
    max-height: calc(100dvh - (var(--ariplayer-toast-gutter) * 2));
    margin-left: auto;
    overflow: auto;

    z-index: 999999;
    box-sizing: border-box;

    padding: 12px;

    border: 1px solid var(--ariplayer-toast-border);
    border-radius: var(--ariplayer-toast-radius);

    background:
            radial-gradient(circle at 12% 0%,
            var(--ariplayer-cyan-glow-22),
            var(--ariplayer-transparent) 36%),
            radial-gradient(circle at 100% 20%,
            var(--ariplayer-toast-border-gold),
            var(--ariplayer-transparent) 34%),
            linear-gradient(
                    180deg,
                    var(--ariplayer-toast-bg-soft),
                    var(--ariplayer-toast-bg)
            );

    box-shadow:
            0 14px 38px var(--ariplayer-toast-shadow-dark),
            0 0 28px var(--ariplayer-toast-shadow-cyan),
            0 0 48px var(--ariplayer-toast-shadow-gold);

    font-family: var(--ariplayer-font-ui);

    opacity: 0;
    transform: translateY(18px) scale(.96);
    pointer-events: none;

    transition:
            opacity var(--ariplayer-toast-speed) ease,
            transform var(--ariplayer-toast-speed) ease;
}

.ariplayer-toast-open {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.ariplayer-toast-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
    min-width: 0;
}

.ariplayer-toast-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;

    color: var(--ariplayer-onair-text);
    font-size: 12px;
    line-height: 1.2;

    text-shadow:
            0 0 8px var(--ariplayer-onair-shadow-red-70),
            0 0 14px var(--ariplayer-onair-shadow-red-45);
}

.ariplayer-toast-status span {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;

    background: var(--ariplayer-onair-dot);
    box-shadow:
            0 0 8px var(--ariplayer-onair-shadow-red-95),
            0 0 16px var(--ariplayer-onair-shadow-red-70);

    animation: ariplayer-onair-dot var(--ariplayer-onair-dot-speed) ease-in-out infinite;
}

.ariplayer-toast-status p {
    margin: 0;
    min-width: 0;
    white-space: normal;
}

.ariplayer-toast-close {
    appearance: none;
    border: 0;
    background: var(--ariplayer-transparent);
    color: var(--ariplayer-toast-close-color);

    width: 24px;
    height: 24px;
    line-height: 22px;

    font-size: 22px;
    cursor: pointer;
    opacity: .76;

    text-shadow:
            0 0 8px var(--ariplayer-cyan-glow-45);
}

.ariplayer-toast-close:hover {
    opacity: 1;
}

.ariplayer-toast-title {
    color: var(--ariplayer-toast-title-color);
    font-family: var(--ariplayer-font-title);
    font-size: clamp(19px, 5vw, 22px);
    line-height: 1.05;
    overflow-wrap: anywhere;

    text-shadow:
            0 0 8px var(--ariplayer-cyan-glow-65),
            0 0 18px var(--ariplayer-cyan-glow-35);
}

.ariplayer-toast-subtitle {
    margin-top: 2px;
    margin-bottom: 10px;

    color: var(--ariplayer-toast-subtitle-color);
    font-size: 12px;
}

.ariplayer-toast-body {
    overflow: visible;
    border-radius: 12px;
    background:
            linear-gradient(135deg, rgba(67, 255, 241, .08), rgba(255, 219, 125, .045)),
            rgba(0, 0, 0, .22);
}

.ariplayer-custom-player {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    grid-template-areas:
            "title title"
            "meta meta"
            "cover progress"
            "cover controls";
    column-gap: 12px;
    row-gap: 6px;
    align-items: end;
    padding: 10px;
    border: 1px solid rgba(67, 255, 241, .16);
    border-radius: 12px;
    background:
            radial-gradient(circle at 0% 0%, rgba(67, 255, 241, .16), transparent 38%),
            rgba(3, 8, 13, .72);
    box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, .045),
            0 0 18px rgba(67, 255, 241, .10);
}

.ariplayer-custom-cover-wrap {
    grid-area: cover;
    align-self: end;
    position: relative;
    width: 58px;
    height: 58px;
    border-radius: 10px;
    overflow: hidden;
    background:
            radial-gradient(circle at 30% 20%, rgba(67, 255, 241, .22), transparent 45%),
            rgba(255, 255, 255, .055);
    box-shadow:
            0 0 16px rgba(67, 255, 241, .16),
            inset 0 0 0 1px rgba(255, 255, 255, .09);
}

.ariplayer-custom-cover {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ariplayer-custom-main {
    display: contents;
    min-width: 0;
}

.ariplayer-custom-title {
    grid-area: title;
    min-width: 0;
    color: var(--ariplayer-toast-title-color);
    font-family: var(--ariplayer-font-title);
    font-size: 20px;
    line-height: 1.08;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow:
            0 0 8px var(--ariplayer-cyan-glow-65),
            0 0 18px var(--ariplayer-cyan-glow-35);
}

.ariplayer-custom-meta {
    grid-area: meta;
    min-width: 0;
    margin-top: -3px;
    color: var(--ariplayer-toast-subtitle-color);
    font-size: 12px;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ariplayer-custom-progress-row {
    grid-area: progress;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 34px;
    gap: 8px;
    align-items: center;
    margin-top: 2px;
}

.ariplayer-custom-time {
    color: rgba(255, 255, 255, .74);
    font-family: var(--ariplayer-font-ui);
    font-size: 11px;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.ariplayer-custom-time-duration {
    text-align: right;
}

.ariplayer-custom-progress,
.ariplayer-custom-volume {
    -webkit-appearance: none;
    appearance: none;
    --ariplayer-progress-fill: 0%;
    --ariplayer-volume-fill: 80%;
    display: block;
    min-width: 0;
    height: 18px;
    margin: 0;
    border: 0 !important;
    outline: 0;
    background: transparent !important;
    box-shadow: none !important;
    color: transparent;
    cursor: pointer;
}

.ariplayer-custom-progress:focus,
.ariplayer-custom-volume:focus {
    outline: 0;
}

.ariplayer-custom-progress::-webkit-slider-runnable-track,
.ariplayer-custom-volume::-webkit-slider-runnable-track {
    height: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .16);
    border: 0;
    box-shadow: none;
}

.ariplayer-custom-progress::-webkit-slider-runnable-track {
    background:
            linear-gradient(90deg,
            var(--ariplayer-cyan-title) 0%,
            var(--ariplayer-cyan-title) var(--ariplayer-progress-fill),
            rgba(255, 255, 255, .16) var(--ariplayer-progress-fill),
            rgba(255, 255, 255, .16) 100%);
}

.ariplayer-custom-volume::-webkit-slider-runnable-track {
    background:
            linear-gradient(90deg,
            rgba(255, 219, 125, .90) 0%,
            rgba(255, 219, 125, .90) var(--ariplayer-volume-fill),
            rgba(255, 255, 255, .16) var(--ariplayer-volume-fill),
            rgba(255, 255, 255, .16) 100%);
}

.ariplayer-custom-progress::-webkit-slider-thumb,
.ariplayer-custom-volume::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 12px;
    height: 12px;
    margin-top: -4px;
    border: 1px solid rgba(255, 255, 255, .68);
    border-radius: 50%;
    background: var(--ariplayer-cyan-title);
    box-shadow:
            0 0 8px var(--ariplayer-cyan-glow-65),
            0 0 14px var(--ariplayer-cyan-glow-35);
}

.ariplayer-custom-progress::-moz-range-track,
.ariplayer-custom-volume::-moz-range-track {
    height: 4px;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .16);
}

.ariplayer-custom-progress::-moz-range-progress {
    height: 4px;
    border-radius: 999px;
    background: var(--ariplayer-cyan-title);
}

.ariplayer-custom-volume::-moz-range-progress {
    height: 4px;
    border-radius: 999px;
    background: rgba(255, 219, 125, .90);
}

.ariplayer-custom-progress::-moz-range-thumb,
.ariplayer-custom-volume::-moz-range-thumb {
    width: 12px;
    height: 12px;
    border: 1px solid rgba(255, 255, 255, .68);
    border-radius: 50%;
    background: var(--ariplayer-cyan-title);
    box-shadow:
            0 0 8px var(--ariplayer-cyan-glow-65),
            0 0 14px var(--ariplayer-cyan-glow-35);
}

.ariplayer-custom-control-row {
    grid-area: controls;
    display: grid;
    grid-template-columns: 36px 36px 36px 36px minmax(0, 1fr);
    gap: 8px;
    align-items: center;
    margin-top: 0;
}

.ariplayer-custom-play,
.ariplayer-toast-next,
.ariplayer-toast-random,
.ariplayer-toast-share,
.ariplayer-custom-volume-wrap {
    appearance: none;
    border: 1px solid rgba(67, 255, 241, .38);
    background:
            radial-gradient(circle at 100% 0%, rgba(255, 219, 125, .20), transparent 48%),
            rgba(67, 255, 241, .10);
    color: var(--ariplayer-toast-control-text);
    cursor: pointer;
    display: grid;
    place-items: center;
    font-family: var(--ariplayer-font-ui);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    text-shadow: 0 0 8px var(--ariplayer-cyan-glow-45);
}

.ariplayer-custom-play {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    padding: 0;
    font-size: 16px;
    box-shadow:
            0 0 16px rgba(67, 255, 241, .20),
            inset 0 0 14px rgba(67, 255, 241, .08);
}

.ariplayer-toast-next {
    min-width: 0;
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 50%;
}

.ariplayer-toast-random,
.ariplayer-toast-share {
    min-width: 0;
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 50%;
}

.ariplayer-control-icon {
    display: block;
    width: 15px;
    height: 15px;
    fill: currentColor;
    filter:
            drop-shadow(0 0 5px var(--ariplayer-cyan-glow-45));
}

.ariplayer-custom-volume-icon .ariplayer-control-icon,
.ariplayer-toast-random .ariplayer-control-icon,
.ariplayer-toast-share .ariplayer-control-icon {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ariplayer-toast-next .ariplayer-control-icon,
.ariplayer-toast-random .ariplayer-control-icon,
.ariplayer-toast-share .ariplayer-control-icon {
    width: 14px;
    height: 14px;
}

.ariplayer-control-icon-loading {
    animation: ariplayer-control-spin .8s linear infinite;
    transform-origin: 50% 50%;
}

@keyframes ariplayer-control-spin {
    to {
        transform: rotate(360deg);
    }
}

.ariplayer-custom-play:hover,
.ariplayer-toast-next:hover,
.ariplayer-toast-random:hover,
.ariplayer-toast-share:hover,
.ariplayer-custom-volume-wrap:hover,
.ariplayer-custom-volume-wrap:focus-within {
    border-color: var(--ariplayer-cyan-glow-65);
    background:
            radial-gradient(circle at 100% 0%, rgba(255, 219, 125, .25), transparent 48%),
            rgba(67, 255, 241, .18);
}

.ariplayer-toast-random-active {
    border-color: rgba(255, 219, 125, .72);
    background:
            radial-gradient(circle at 100% 0%, rgba(255, 219, 125, .34), transparent 48%),
            rgba(67, 255, 241, .16);
    color: rgba(255, 239, 184, .98);
    box-shadow:
            0 0 16px rgba(255, 219, 125, .16),
            0 0 20px rgba(67, 255, 241, .10),
            inset 0 0 14px rgba(255, 219, 125, .08);
}

.ariplayer-toast-share-copied {
    border-color: rgba(67, 255, 241, .78);
    background:
            radial-gradient(circle at 100% 0%, rgba(67, 255, 241, .34), transparent 48%),
            rgba(67, 255, 241, .18);
    color: rgba(210, 255, 250, .98);
    box-shadow:
            0 0 16px rgba(67, 255, 241, .22),
            inset 0 0 14px rgba(67, 255, 241, .10);
}

.ariplayer-toast-share-error {
    border-color: rgba(255, 65, 58, .72);
    background:
            radial-gradient(circle at 100% 0%, rgba(255, 65, 58, .28), transparent 48%),
            rgba(255, 65, 58, .10);
    color: rgba(255, 224, 222, .98);
    box-shadow:
            0 0 16px rgba(255, 65, 58, .18),
            inset 0 0 14px rgba(255, 65, 58, .08);
}

.ariplayer-custom-play:disabled {
    opacity: .6;
    cursor: default;
}

.ariplayer-custom-volume-wrap {
    position: relative;
    justify-self: end;
    width: 36px;
    height: 36px;
    min-width: 36px;
    padding: 0;
    border-radius: 50%;
}

.ariplayer-custom-volume-icon {
    display: grid;
    place-items: center;
}

.ariplayer-custom-volume-wrap .ariplayer-custom-volume {
    position: absolute;
    top: 50%;
    right: 100%;
    width: 88px;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-50%) scaleX(.72);
    transform-origin: right center;
    transition:
            opacity .16s ease,
            transform .16s ease;
}

.ariplayer-custom-volume-wrap:hover .ariplayer-custom-volume,
.ariplayer-custom-volume-wrap:focus-within .ariplayer-custom-volume {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(-50%) scaleX(1);
}

.ariplayer-custom-volume-value {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.ariplayer-soundcloud-frame {
    display: block;
    width: 100%;
    height: clamp(146px, 46vw, 166px);
    border: 0;
}

.ariplayer-soundcloud-engine {
    position: fixed;
    left: -9999px;
    top: 0;
    width: 320px;
    height: 180px;
    opacity: 0;
    pointer-events: none;
}

.ariplayer-toast-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 9px 0 0;
}

.ariplayer-toast-control {
    appearance: none;
    flex: 1 1 96px;
    min-width: 0;

    border: 1px solid var(--ariplayer-toast-control-border);
    border-radius: 999px;

    background:
            radial-gradient(circle at 100% 0%,
            var(--ariplayer-toast-control-border-gold),
            var(--ariplayer-transparent) 46%),
            var(--ariplayer-toast-control-bg);

    color: var(--ariplayer-toast-control-text);

    font-family: var(--ariplayer-font-ui);
    font-size: 12px;
    line-height: 1;

    padding: 8px 10px;

    cursor: pointer;

    text-shadow:
            0 0 8px var(--ariplayer-cyan-glow-45);

    box-shadow:
            inset 0 0 14px rgba(67, 255, 241, .08),
            0 0 12px rgba(67, 255, 241, .10);

    transition:
            background .18s ease,
            border-color .18s ease,
            opacity .18s ease,
            transform .18s ease;
}

@media (max-width: 420px) {
    .ariplayer-toast {
        padding: 10px;
    }

    .ariplayer-custom-player {
        grid-template-columns: 50px minmax(0, 1fr);
        column-gap: 10px;
        row-gap: 6px;
        padding: 9px;
    }

    .ariplayer-custom-cover-wrap {
        width: 50px;
        height: 50px;
    }

    .ariplayer-custom-title {
        font-size: 18px;
    }

    .ariplayer-custom-control-row {
        grid-template-columns: 34px 34px 34px 34px minmax(0, 1fr);
        gap: 6px;
    }

    .ariplayer-custom-play,
    .ariplayer-toast-next,
    .ariplayer-toast-random,
    .ariplayer-toast-share,
    .ariplayer-custom-volume-wrap {
        width: 34px;
        height: 34px;
        min-width: 34px;
    }

    .ariplayer-custom-volume-wrap .ariplayer-custom-volume {
        width: 76px;
    }

    .ariplayer-toast-controls {
        gap: 6px;
    }

    .ariplayer-toast-control {
        padding: 8px 7px;
    }
}

.ariplayer-toast-control:hover {
    background:
            radial-gradient(circle at 100% 0%,
            var(--ariplayer-toast-control-border-gold),
            var(--ariplayer-transparent) 46%),
            var(--ariplayer-toast-control-bg-hover);

    border-color: var(--ariplayer-cyan-glow-45);
    transform: translateY(-1px);
}

.ariplayer-toast-control-active {
    border-color: var(--ariplayer-cyan-glow-65);
    background:
            radial-gradient(circle at 100% 0%,
            rgba(255, 219, 125, .34),
            var(--ariplayer-transparent) 48%),
            rgba(67, 255, 241, .20);
    color: #f4fffd;
    box-shadow:
            inset 0 0 16px rgba(67, 255, 241, .14),
            0 0 16px rgba(67, 255, 241, .18),
            0 0 24px rgba(255, 219, 125, .10);
}

.ariplayer-toast-control:disabled {
    opacity: .55;
    cursor: default;
    transform: none;
}

.ariplayer-toast-lyrics-panel {
    max-height: 0;
    overflow: hidden;
    opacity: 0;

    margin-top: 0;

    border-top: 1px solid var(--ariplayer-transparent);

    transition:
            max-height .32s ease,
            opacity .24s ease,
            margin-top .24s ease,
            border-color .24s ease;
}

.ariplayer-toast-lyrics-open .ariplayer-toast-lyrics-panel {
    max-height: calc(var(--ariplayer-toast-lyrics-max-height) + 22px);
    opacity: 1;

    margin-top: 10px;
    border-top-color: var(--ariplayer-toast-lyrics-border);
}

.ariplayer-toast-lyrics-content {
    box-sizing: border-box;
    max-height: var(--ariplayer-toast-lyrics-max-height);
    overflow: auto;

    margin-top: 10px;
    padding: 12px 12px 12px 13px;

    border: 1px solid rgba(67, 255, 241, .14);
    border-radius: 12px;
    background:
            linear-gradient(180deg, rgba(3, 8, 13, .82), rgba(2, 5, 9, .92));

    color: var(--ariplayer-toast-lyrics-text);

    font-family: var(--ariplayer-font-ui);
    font-size: 13px;
    line-height: 1.55;

    white-space: pre-wrap;

    text-align: left;

    text-shadow:
            0 0 8px rgba(67, 255, 241, .12);
}

.ariplayer-lyrics-section {
    display: inline-block;
    margin: 8px 0 2px;
    color: var(--ariplayer-cyan-title);
    font-weight: 700;
    letter-spacing: .02em;
    text-shadow:
            0 0 8px var(--ariplayer-cyan-glow-45),
            0 0 14px rgba(255, 219, 125, .16);
}

.ariplayer-lyrics-loading {
    color: rgba(255, 255, 255, .72);
    font-style: italic;
}

/* ==========================================================
   TOAST SONGS PANEL
   ========================================================== */

:root {
    --ariplayer-toast-songs-max-height: min(300px, 44dvh);
    --ariplayer-toast-songs-border: rgba(67, 255, 241, .20);
}

.ariplayer-toast-songs-panel {
    max-height: 0;
    overflow: hidden;
    opacity: 0;

    margin-top: 0;

    border-top: 1px solid var(--ariplayer-transparent);

    transition:
            max-height .32s ease,
            opacity .24s ease,
            margin-top .24s ease,
            border-color .24s ease;
}

.ariplayer-toast-songs-open .ariplayer-toast-songs-panel {
    max-height: calc(var(--ariplayer-toast-songs-max-height) + 22px);
    opacity: 1;

    margin-top: 10px;
    border-top-color: var(--ariplayer-toast-songs-border);
}

.ariplayer-toast-songs-content {
    box-sizing: border-box;
    max-height: var(--ariplayer-toast-songs-max-height);
    overflow: auto;

    margin-top: 10px;
    padding: 8px;

    border: 1px solid rgba(67, 255, 241, .14);
    border-radius: 12px;
    background:
            linear-gradient(180deg, rgba(3, 8, 13, .82), rgba(2, 5, 9, .92));
}

.ariplayer-toast-songs-list {
    display: grid;
    gap: 7px;
}

.ariplayer-toast-song-item {
    appearance: none;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    gap: 9px;
    align-items: center;
    width: 100%;
    min-width: 0;
    padding: 7px;
    border: 1px solid rgba(67, 255, 241, .10);
    border-radius: 10px;
    background: rgba(255, 255, 255, .035);
    color: rgba(255, 255, 255, .88);
    cursor: pointer;
    font-family: var(--ariplayer-font-ui);
    text-align: left;
    transition:
            background .18s ease,
            border-color .18s ease,
            transform .18s ease;
}

.ariplayer-toast-song-item:hover {
    border-color: rgba(67, 255, 241, .34);
    background: rgba(67, 255, 241, .08);
    transform: translateY(-1px);
}

.ariplayer-toast-song-thumb {
    width: 42px;
    height: 42px;
    overflow: hidden;
    border-radius: 8px;
    background:
            radial-gradient(circle at 30% 20%, rgba(67, 255, 241, .18), transparent 50%),
            rgba(255, 255, 255, .055);
    box-shadow:
            inset 0 0 0 1px rgba(255, 255, 255, .08);
}

.ariplayer-toast-song-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ariplayer-toast-song-text {
    min-width: 0;
}

.ariplayer-toast-song-title,
.ariplayer-toast-song-meta {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ariplayer-toast-song-title {
    color: var(--ariplayer-cyan-title);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.25;
    text-shadow:
            0 0 8px var(--ariplayer-cyan-glow-35);
}

.ariplayer-toast-song-meta {
    margin-top: 2px;
    color: rgba(255, 219, 125, .82);
    font-size: 11px;
    line-height: 1.25;
}

.ariplayer-toast-song-indicator {
    display: none;
    padding: 4px 6px;
    border-radius: 999px;
    background: rgba(255, 34, 27, .12);
    color: rgba(255, 255, 255, .92);
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    text-shadow:
            0 0 8px rgba(255, 30, 25, .45);
}

.ariplayer-toast-song-active {
    border-color: rgba(67, 255, 241, .42);
    background:
            radial-gradient(circle at 0% 0%, rgba(67, 255, 241, .18), transparent 44%),
            rgba(67, 255, 241, .075);
    box-shadow:
            inset 0 0 16px rgba(67, 255, 241, .08),
            0 0 14px rgba(67, 255, 241, .10);
}

.ariplayer-toast-song-active .ariplayer-toast-song-indicator {
    display: inline-block;
}

.ariplayer-toast-songs-empty {
    padding: 12px;
    color: rgba(255, 255, 255, .72);
    font-family: var(--ariplayer-font-ui);
    font-size: 13px;
    font-style: italic;
}

/* ==========================================================
   TOAST COVER CREDIT
   ========================================================== */

:root {
    --ariplayer-toast-cover-color: rgba(255, 219, 125, .82);
    --ariplayer-toast-cover-hover: rgba(255, 240, 190, .96);
    --ariplayer-toast-cover-separator: rgba(255, 255, 255, .34);
}

.ariplayer-toast-subtitle {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0;

    margin-top: 2px;
    margin-bottom: 10px;

    color: var(--ariplayer-toast-subtitle-color);
    font-size: 12px;
}

.ariplayer-toast-cover-separator {
    color: var(--ariplayer-toast-cover-separator);
}

.ariplayer-toast-cover-link,
.ariplayer-toast-cover-text {
    color: var(--ariplayer-toast-cover-color);
    text-decoration: none;

    text-shadow:
            0 0 8px rgba(255, 219, 125, .18);
}

.ariplayer-toast-cover-link:hover {
    color: var(--ariplayer-toast-cover-hover);
    text-decoration: underline;
}

/* ==========================================================
   TOAST COVER PANEL
   ========================================================== */

:root {
    --ariplayer-toast-cover-max-height: min(360px, 48dvh);
    --ariplayer-toast-cover-bg: rgba(0, 0, 0, .28);
    --ariplayer-toast-cover-border: rgba(255, 219, 125, .22);
    --ariplayer-toast-cover-empty: rgba(255, 255, 255, .72);
}

.ariplayer-toast-cover-panel {
    max-height: 0;
    overflow: hidden;
    opacity: 0;

    margin-top: 0;

    border-top: 1px solid var(--ariplayer-transparent);

    transition:
            max-height .32s ease,
            opacity .24s ease,
            margin-top .24s ease,
            border-color .24s ease;
}

.ariplayer-toast-cover-open .ariplayer-toast-cover-panel {
    max-height: calc(var(--ariplayer-toast-cover-max-height) + 24px);
    opacity: 1;

    margin-top: 10px;
    border-top-color: var(--ariplayer-toast-cover-border);
}

.ariplayer-toast-cover-content {
    margin-top: 10px;
    padding: 10px;
    border: 1px solid rgba(255, 219, 125, .14);
    border-radius: 12px;
    background:
            linear-gradient(180deg, rgba(3, 8, 13, .70), rgba(0, 0, 0, .34));
}

.ariplayer-toast-cover-link-image {
    display: block;
    text-decoration: none;
}

.ariplayer-toast-cover-image {
    display: block;
    width: 100%;
    max-height: var(--ariplayer-toast-cover-max-height);

    object-fit: contain;

    border-radius: 12px;
    background: var(--ariplayer-toast-cover-bg);

    box-shadow:
            0 0 18px rgba(67, 255, 241, .14),
            0 0 28px rgba(255, 219, 125, .10);
}

.ariplayer-toast-cover-empty {
    padding-top: 10px;

    color: var(--ariplayer-toast-cover-empty);
    font-family: var(--ariplayer-font-ui);
    font-size: 12px;
    line-height: 1.4;
    text-align: left;
}

/* ==========================================================
   TOAST TITLE — MICRO GLITCH
   ========================================================== */

.ariplayer-toast-title {
    position: relative;
    display: inline-block;

    isolation: isolate;

    animation: ariplayer-title-signal-flicker var(--ariplayer-title-glitch-speed) linear infinite;
}

.ariplayer-toast-title::before,
.ariplayer-toast-title::after {
    content: attr(data-text);
    position: absolute;
    inset: 0;

    pointer-events: none;
    opacity: 0;

    mix-blend-mode: screen;
}

.ariplayer-toast-title::before {
    color: var(--ariplayer-title-glitch-cyan);

    text-shadow:
            calc(var(--ariplayer-height) * -0.006) 0 0 var(--ariplayer-title-glitch-shadow),
            0 0 0.04em var(--ariplayer-title-glitch-cyan);

    clip-path: inset(0 0 56% 0);
    animation: ariplayer-title-glitch-a var(--ariplayer-title-glitch-speed) linear infinite;
}

.ariplayer-toast-title::after {
    color: var(--ariplayer-title-glitch-gold);

    text-shadow:
            calc(var(--ariplayer-height) * 0.006) 0 0 var(--ariplayer-title-glitch-gold),
            0 0 0.04em var(--ariplayer-title-glitch-gold);

    clip-path: inset(48% 0 0 0);
    animation: ariplayer-title-glitch-b var(--ariplayer-title-glitch-speed) linear infinite;
}