:root {
    --1rem: 0.22rem;
    --active-progress:#4EAADD;
    --ui-audio-icon-prev: url("data:image/svg+xml,%3Csvg viewBox='0 0 1126 1024' xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cpath d='M176.9946297 479.95628281l368.97676691-265.07169568c22.24731445-14.66300277 52.64776385-7.58431168 52.64776384 35.83587337v114.08068923l208.34736403-149.9165626c22.24731445-14.66300277 51.54171832-8.15313494 52.64776385 36.40469662v520.88421022c0.53722228 49.4244316-28.21996001 48.85560835-52.64776385 35.83587339l-208.34736403-149.91656261v115.69235535c0 50.53047713-28.21996001 47.81276549-52.64776384 34.22420726L177.02623137 542.40044939c-16.81189116-16.84349214-16.81189116-45.06345216 0-62.44416658z' p-id='2143'/%3E%3C/svg%3E");
    --ui-audio-icon-next: url("data:image/svg+xml,%3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cpath d='M847.01263828 544.04371719L478.03587208 809.11541287c-22.24731445 14.66300277-52.64776385 7.58431168-52.64776387-35.86747434v-114.04908826l-208.34736402 149.9165626C194.79342973 823.77841564 165.49902519 817.26854782 164.39297967 772.71071625V251.85810702C163.85575808 202.40207442 192.61293967 202.93929668 217.04074419 215.99063264l208.34736402 149.91656261V250.2148399c0-50.49887546 28.21996001-47.81276549 52.64776386-34.22420726L846.98103731 481.59955061c16.81189116 16.84349214 16.81189116 45.06345216 0 62.44416658z'/%3E%3C/svg%3E");
    --ui-audio-icon-play: url("data:image/svg+xml,%3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cpath d='M768 506.027v11.946a32.427 32.427 0 0 1-15.787 27.734L370.347 768c-23.04 13.653-34.987 13.653-45.227 7.68l-10.667-5.973a32.427 32.427 0 0 1-15.786-26.88V281.173a32.427 32.427 0 0 1 15.786-27.733l10.667-5.973c10.24-5.974 22.187-5.974 52.053 11.52l375.04 219.306A32.427 32.427 0 0 1 768 506.027z'/%3E%3C/svg%3E");
    --ui-audio-icon-pause: url("data:image/svg+xml,%3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cpath d='M426.667 288v448a32.427 32.427 0 0 1-32 32h-64a32.427 32.427 0 0 1-32-32V288a32.427 32.427 0 0 1 32-32h64a32.427 32.427 0 0 1 32 32zm266.666-32h-64a32.427 32.427 0 0 0-32 32v448a32.427 32.427 0 0 0 32 32h64a32.427 32.427 0 0 0 32-32V288a32.427 32.427 0 0 0-32-32z'/%3E%3C/svg%3E");
    --ui-audio-icon-muted: url("data:image/svg+xml,%3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cpath d='M554.667 213.333v597.334A42.667 42.667 0 0 1 512 853.333h-25.173a42.667 42.667 0 0 1-29.867-12.373L293.547 677.547A128 128 0 0 0 203.093 640 75.093 75.093 0 0 1 128 564.907V459.093A75.093 75.093 0 0 1 203.093 384a128 128 0 0 0 90.454-37.547L456.96 183.04a42.667 42.667 0 0 1 29.867-12.373H512a42.667 42.667 0 0 1 42.667 42.666zM820.907 512l68.693-69.12a20.48 20.48 0 0 0 0-29.867L866.987 390.4a20.48 20.48 0 0 0-29.867 0L768 459.093 698.88 390.4a20.48 20.48 0 0 0-29.867 0L646.4 413.013a20.48 20.48 0 0 0 0 29.867L715.093 512 646.4 581.12a20.48 20.48 0 0 0 0 29.867l22.613 22.613a20.48 20.48 0 0 0 29.867 0L768 564.907l69.12 68.693a20.48 20.48 0 0 0 29.867 0l22.613-22.613a20.48 20.48 0 0 0 0-29.867z'/%3E%3C/svg%3E");
    --ui-audio-icon-unmuted: url("data:image/svg+xml,%3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cpath d='M554.667 213.333v597.334A42.667 42.667 0 0 1 512 853.333h-25.173a42.667 42.667 0 0 1-29.867-12.373L293.547 677.547A128 128 0 0 0 203.093 640 75.093 75.093 0 0 1 128 564.907V459.093A75.093 75.093 0 0 1 203.093 384a128 128 0 0 0 90.454-37.547L456.96 183.04a42.667 42.667 0 0 1 29.867-12.373H512a42.667 42.667 0 0 1 42.667 42.666zm256 73.814a24.747 24.747 0 0 0-15.36-7.254 21.333 21.333 0 0 0-15.787 6.4l-30.293 30.294a21.333 21.333 0 0 0 0 29.013 256 256 0 0 1 0 332.8 21.333 21.333 0 0 0 0 29.013l30.293 30.294a21.333 21.333 0 0 0 15.787 6.4 23.893 23.893 0 0 0 15.36-7.254 341.333 341.333 0 0 0 0-449.706zM675.84 401.067a22.613 22.613 0 0 0-16.64 6.4l-30.293 30.72a21.333 21.333 0 0 0-2.987 26.88 85.333 85.333 0 0 1 0 93.866 21.333 21.333 0 0 0 2.987 26.88l30.293 30.72a22.187 22.187 0 0 0 16.64 5.974 22.187 22.187 0 0 0 15.787-8.107 170.667 170.667 0 0 0 0-204.8 24.32 24.32 0 0 0-15.787-8.533z'/%3E%3C/svg%3E");
    --ui-audio-icon-download:url("data:image/svg+xml,%3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cpath d='M837.818182 919.272727H186.181818A81.454545 81.454545 0 0 1 104.727273 837.818182v-93.090909a34.909091 34.909091 0 0 1 69.818182 0v93.090909a11.636364 11.636364 0 0 0 11.636363 11.636363h651.636364a11.636364 11.636364 0 0 0 11.636363-11.636363v-93.090909a34.909091 34.909091 0 0 1 69.818182 0v93.090909a81.454545 81.454545 0 0 1-81.454545 81.454545zM512 640.465455A34.909091 34.909091 0 0 1 477.090909 605.090909V139.636364a34.909091 34.909091 0 0 1 69.818182 0v465.454545a34.909091 34.909091 0 0 1-34.909091 35.374546z'  p-id='1017'/%3E %3Cpath d='M512 700.276364a35.141818 35.141818 0 0 1-24.669091-10.24l-232.727273-232.727273a34.676364 34.676364 0 0 1 0-49.338182 35.141818 35.141818 0 0 1 49.338182 0l232.727273 232.727273a34.676364 34.676364 0 0 1 0 49.338182 35.141818 35.141818 0 0 1-24.669091 10.24z'  p-id='1018'/%3E %3Cpath d='M512 700.276364a35.141818 35.141818 0 0 1-24.669091-10.24l-232.727273-232.727273a34.676364 34.676364 0 0 1 0-49.338182 35.141818 35.141818 0 0 1 49.338182 0l232.727273 232.727273a34.676364 34.676364 0 0 1 0 49.338182 35.141818 35.141818 0 0 1-24.669091 10.24z'/%3E %3Cpath d='M512 700.276364a35.141818 35.141818 0 0 1-24.669091-10.24 34.676364 34.676364 0 0 1 0-49.338182l232.727273-232.727273a35.141818 35.141818 0 0 1 49.338182 0 34.676364 34.676364 0 0 1 0 49.338182l-232.727273 232.727273a35.141818 35.141818 0 0 1-24.669091 10.24z'  p-id='1019'/%3E%3C/svg%3E")
}

.audio-main .icon {
    width: calc(2.5 * var(--1rem));
    height: calc(2.5 * var(--1rem));
    border: 0;
    background: currentColor;
    font-size: 0;
    color: inherit;
    --mask: var(--ui-audio-mask-image) no-repeat center /
        calc(1.5 * var(--1rem)) calc(1.5 * var(--1rem));
    -webkit-mask: var(--mask);
    mask: var(--mask);
    cursor: pointer;
}
.audio-main .icon:active {
    filter: brightness(1.1);
}
@media (hover: hover) {
    .audio-main .icon:enabled:hover {
        filter: brightness(1.1);
    }
}

.audio-main .prev {
    --ui-audio-mask-image: var(--ui-audio-icon-prev);
}
.audio-main .next {
    --ui-audio-mask-image: var(--ui-audio-icon-next);
}
.audio-main .play {
    --ui-audio-mask-image: var(--ui-audio-icon-play);
    -webkit-mask-size: calc(2 * var(--1rem));
    mask-size: calc(2 * var(--1rem));
}
.audio-main .pause .icon.play{
    --ui-audio-mask-image: var(--ui-audio-icon-pause);
}
.audio-main .muted {
    --ui-audio-mask-image: var(--ui-audio-icon-unmuted);
}
.audio-main .more {
    --ui-audio-mask-image: var(--ui-audio-icon-more);
}
.audio-main .download {
    --ui-audio-mask-image: var(--ui-audio-icon-download);
}
#audio-main[muted='muted'] .muted {
    --ui-audio-mask-image: var(--ui-audio-icon-muted);
}
.audio-main  [type="range"] {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
    outline: 0;
    background-color: transparent;
    font-size: 0.25rem;
    vertical-align: top;
}
.play-icon{
    border-radius: 50%;
    background-color: #fff;
    color: var(--Color);
}

::-webkit-slider-container {
    display: flex;
    height: 1em;
    overflow: hidden;
}
::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    background-color: #fff;
    width: 0.75em;
    height: 0.75em;
    border-radius: 50%;
    margin-top: -0.25em;
    border-image: linear-gradient(var(--active-progress), var(--active-progress)) 0 fill / 0.25em 0.75em
        0.25em 0 / 0 0 0 2000px;
}
::-webkit-slider-runnable-track {
    height: 0.25em;
    background: #D8D8D8B5;
}
::-moz-range-track {
    background: #D8D8D8B5;
    height: 0.25em;
}
::-moz-range-progress {
    background: linear-gradient(var(--active-progress), var(--active-progress));
    height: 0.25em;
}
::-moz-range-thumb {
    border: 0;
    background-color: #fff;
    width: 0.75em;
    height: 0.75em;
    border-radius: 50%;
    margin-top: -0.25em;
}


.audio-main{
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    height: 1.7rem;
    padding: 0.12rem 0.47rem;
    width: 100%;
    z-index: 200;
    background-color: var(--Color);
    transform: translateY(100%);
    transition: 0.3s;
    border-top: 1px solid #6395e6;
}
.audio-main.show-audio{
    transform: translateY(0);
}
.fade-btn{
    position: absolute;
    right: 0.28rem;
    top: 0.31rem;
    width: 0.5rem;
    height: 0.5rem;
    color: #fff;
    padding: 0.1rem;
    cursor: pointer;
}
.launched-btn{
    cursor: pointer;
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    right: 20px;
    bottom: 100%;
    z-index: 30;
    width: 0.6rem;
    height: 0.6rem;
    background-color: var(--Color);
    border-radius: 3px;
    border:1px solid #6395e6;
    border-width: 1px 1px 0 1px;
    padding:  0 3px;
}
.launched-btn img{
    width: 100%;
    height: 100%;
}
.launched-btn svg{
    width: 100%;
    height: 100%;
    color: #fff;
}
.audio-main.show-audio .launched-btn svg{
    display: block;
}
.audio-main.show-audio .launched-btn {
    display: none;
}
.fade-btn svg{
    width: 100%;
    height: 100%;
}
.audio-img{
    width: 2.19rem;
    height: 1.46rem;
    cursor: pointer;
}
.audio-img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.audio-info{
    color: #fff;
    flex: 1;
    width: 60vw;
    padding-left: 0.26rem;
    padding-right: 0.27rem;
}
.audio-info .operate-time{
    text-align: right;
}
.audio-info-title{
    color: #fff;
    font-size: 0.32rem;
    font-weight: 800;
    line-height: 0.36rem;
    margin-top: 0.11rem;
    margin-bottom: 0.11rem;
}
.audio-info-subtitle{
    line-height: 0.4rem;
    font-size: 0.22rem;
}
.audio-progress-bar input{
    width: 100%;
}
.audio-operate{
    color: #ddd;
}
.operate-seq{
    display: flex;
    justify-content: center;
    align-items: center;
    gap:0.2rem
}
.operate-seq.play-loading .tooltip-text,.operate-seq.play-loading .tooltip-text .icon{
    cursor: no-drop;
}
.audio-operate button{
    width: 0.44rem;
    height: 0.44rem;
}
.operate-seq.play-loading .loading-play-cion{
    display: flex;
}
.operate-seq.play-loading .play-icon{
    display: none;
}
.operate-seq .loading-play-cion{
    display: none;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    border-radius: 50%;
    color: var(--Color);
    cursor: no-drop;
}
.operate-seq .loading-play-cion .icon-loading{
    margin: 0;
}
.audio-operate{
    display: flex;
    align-items: flex-end;
    gap:0.2rem;
    padding-bottom: 0.1rem;
}
.operate-time{
    font-size: 0.2rem;
    line-height: 0.3rem;
}
.tooltip-text{
    position: relative;
}

.tooltip-bullet{
    display: none;
    left: 50%;
    top: 0;
    position: absolute;
    border: 1px solid #333333;
    background-color: #fff;
    z-index: 5000;
    color: #333333;
    font-size: 0.2rem;
    padding: 0.09rem 0.11rem;
    border-radius: 0.06rem;
    transform: translate(-50%,-120%);
    width: max-content;
}
.operate-volume{
    position: relative;
}
.operate-volume .popover-content{
    width: 1.5rem;
    height: 0.4rem;
    /* display: flex; */
    align-items: center;
    position: absolute;
    top: -100%;
    left: 50%;
    transform: translate(-50%,-100%) rotate(-90deg);
}
.operate-volume .popover-content input{
    /* transform:rotate(-90deg); */
    width: 100%;
}
.popover-content{
    display: none;
    /* background-color: #; */
}
@media screen and (max-width: 1025px) {
    :root{
        --1rem: 0.48rem;
    }
    .audio-main [type="range"]{
        font-size: 0.35rem;
    }
    .audio-main{
        --active-progress:var(--Color);
        /* transform: translateY(0); */
        background-color: #fff;
        height: 100%;
        padding: 1.4rem 0.35rem 0.39rem;
        color: #333333;
        flex-direction: column;
    }
    .audio-main .podcast-btn-bg{
        width: 0.38rem;
        height: 0.38rem;
    }
    .featured-episode{
        display: none;
    }
    .mobile-audio-header{
        margin-top: 0.1rem;
        height: 0.73rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #333;
    }
    .mobile-audio-header svg{
        /* padding: 0.1rem; */
    }
    .audio-main .icon-found,.audio-main .icon-prev{
        font-size: 0.4rem;
        width: 1em;
        height: 1em;
    }
    .audio-img{
        width: 100%;
        height: 4.57rem;
        background-color: #00000054;
    }
    .audio-info{
        width: 100%;
        display: flex;
        flex-direction: column-reverse;
        justify-content: flex-end;
        padding: 0;
        margin: 0.33rem 0 0.97rem;
        color: #333333;
    }
    .audio-info-title{
        margin-top: 0.6rem;
        font-size: 0.48rem;
        color: var(--Color);
        text-align: center;
        line-height: 0.77rem;
        white-space:initial;
        overflow:initial;
        text-overflow:initial;
        display: -webkit-box;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
    }
    .featured-episode{
        margin-top: 0.5rem;
        margin-bottom: 0.1rem;
        font-weight: 800;
        font-size: 0.24rem;
        line-height: 0.77rem;
        text-align: center;
    }
    .audio-info-subtitle{
        display: none;
    }
    .operate-time{
        display: flex;
        justify-content: space-between;
        margin-top: 0.17rem;
    }
    .operate-time span:nth-child(2){
        display: none;
    }
    ::-moz-range-thumb {
        border: 0;
        background-color: var(--Color);
        width: 0.75em;
        height: 0.75em;
        border-radius: 50%;
        margin-top: -0.25em;
    }
    input[type="range"]::-webkit-slider-thumb,::-webkit-slider-thumb{
        background: var(--Color);
    }
    .operate-download{
        display: none;
    }
    .audio-operate{
        color: #333;
        flex-wrap: nowrap;
        flex-direction: column-reverse;
        gap: 0.75rem;
        position: absolute;
        bottom: 0;
        left: 0.35rem;
        right: 0.35rem;
    }
    .operate-seq{
        gap: 0.7rem;
        width: 100%;
    }
    .operate-seq .loading-play-cion{
        background-color: #333333;
        color: #fff;
    }
    .play-icon{
        background-color: #333333;
        color: #fff;
    }
    .loading-play-cion .icon-loading{
        width: 0.6rem;
        height: 0.6rem;
    }
    .operate-volume{
        --1rem:0.44rem;
    }
    .auido-flex{
        display: flex;
        justify-content: space-between;
        width: 100%;
    }
    .audio-operate .podcast-all-btn{
        font-size: 0.24rem;
    }
    .audio-operate .podcast-all-btn svg{
        font-size: 1em;
        width: 1em;
        height: 1em;
    }
    .icon-svg{
        width: 1em;
        height: 1em;
    }
    .operate-volume .popover-content{
        width: 2.5rem;
        height: 0.5rem;
    }
}