[data-media-skeleton]{--media-skeleton-base:color-mix(
        in srgb,
        var(--md-sys-color-on-surface) 8%,
        var(--md-sys-color-surface-container-high, var(--background-surface))
    );--media-skeleton-accent:var(--md-sys-color-on-surface, #fff);--media-skeleton-accent-opacity:.06;--media-skeleton-wave-span:40vw;--media-skeleton-wave-duration:2100ms;--media-skeleton-pulse-duration:1200ms}html:is([data-app-route=home],[data-app-route=vocalist]) [data-media-skeleton]:not(:is(.vocalist-panel[data-vocalist-view=profile],.modal-standard) *){--media-skeleton-base:var(--background-elevated-highlight)}.js [data-media-skeleton]:not([data-media-skeleton-layout]):not([data-media-skeleton-state=ready]){background-color:var(--media-skeleton-base)!important;background-image:none!important}:where(.js [data-media-skeleton]:not([data-media-skeleton-state=ready])){position:relative}.js [data-media-skeleton-overlay]{position:absolute;inset:0;z-index:214;display:block;border-radius:inherit;opacity:0;pointer-events:none;background-image:linear-gradient(90deg,transparent 0%,transparent 35%,var(--media-skeleton-accent) 50%,transparent 65%,transparent 100%);background-size:calc(100vw + var(--media-skeleton-wave-span)*2) 100%;background-position-x:calc(var(--media-skeleton-wave-span)*-1 - var(--media-skeleton-x, 0px))}.js [data-media-skeleton][data-media-skeleton-visible]:not([data-media-skeleton-state=ready])>[data-media-skeleton-overlay]{opacity:var(--media-skeleton-accent-opacity);animation:media-skeleton-wave var(--media-skeleton-wave-duration) linear infinite;animation-delay:var(--media-skeleton-delay, 0ms)}.js [data-media-skeleton][data-media-skeleton-animation=pulse][data-media-skeleton-visible]:not([data-media-skeleton-state=ready])>[data-media-skeleton-overlay]{background-image:none;background-color:var(--media-skeleton-accent);animation-name:media-skeleton-pulse;animation-duration:var(--media-skeleton-pulse-duration);animation-timing-function:ease-in-out}.js [data-media-skeleton][data-media-skeleton-layout]:not([data-media-skeleton-state=ready]){animation:none}.js [data-media-skeleton]>[data-media-skeleton-placeholder]{display:none;opacity:0;pointer-events:none}.js [data-media-skeleton]:not([data-media-skeleton-state=ready])>[data-media-skeleton-placeholder]{display:grid;opacity:1}.js [data-media-skeleton-shape]{display:block;background-color:var(--media-skeleton-base)}.js [data-media-skeleton][data-media-skeleton-visible]:not([data-media-skeleton-state=ready]) [data-media-skeleton-shape]{background-image:linear-gradient(90deg,transparent 0%,transparent 35%,color-mix(in srgb,var(--media-skeleton-accent) calc(var(--media-skeleton-accent-opacity)*100%),transparent) 50%,transparent 65%,transparent 100%);background-size:calc(100vw + var(--media-skeleton-wave-span)*2) 100%;animation:media-skeleton-wave var(--media-skeleton-wave-duration) linear infinite;animation-delay:var(--media-skeleton-delay, 0ms)}.js [data-media-skeleton]:not([data-media-skeleton-state=ready]) [data-media-skeleton-media],.js [data-media-skeleton]:not([data-media-skeleton-state=ready]) [data-media-skeleton-content]{opacity:0!important}.js [data-media-skeleton-revealing][data-media-skeleton-media],.js [data-media-skeleton-revealing] [data-media-skeleton-media],.js [data-media-skeleton-revealing][data-media-skeleton-content],.js [data-media-skeleton-revealing] [data-media-skeleton-content],.js [data-media-skeleton-revealing][data-media-skeleton-whole]>:not([data-media-skeleton-overlay]){transition:none!important}.js [data-media-skeleton][data-media-skeleton-whole]:not([data-media-skeleton-state=ready])>:not([data-media-skeleton-overlay]){opacity:0!important}@keyframes media-skeleton-wave{0%{background-position-x:calc(var(--media-skeleton-wave-span)*-1 - var(--media-skeleton-x, 0px))}to{background-position-x:calc(100vw + var(--media-skeleton-wave-span) - var(--media-skeleton-x, 0px))}}@keyframes media-skeleton-pulse{0%,to{opacity:var(--media-skeleton-accent-opacity)}50%{opacity:1}}@media (prefers-reduced-motion:reduce){.js [data-media-skeleton][data-media-skeleton-visible]:not([data-media-skeleton-state=ready])>[data-media-skeleton-overlay]{animation:none;opacity:0}.js [data-media-skeleton][data-media-skeleton-visible]:not([data-media-skeleton-state=ready]) [data-media-skeleton-shape]{animation:none;background-image:none}}@media (forced-colors:active){.js [data-media-skeleton]:not([data-media-skeleton-state=ready]){background-color:GrayText!important;background-image:none!important}.js [data-media-skeleton-shape]{background-color:GrayText;background-image:none;animation:none}.js [data-media-skeleton-overlay]{display:none}}
