@import url("https://assets.agapedimas.com/fonts/SFProDisplayKR.css");
@import url("https://assets.agapedimas.com/fonts/SFProDisplayJP.css");

:root
{
	--accent-light: #b40000;
	--accent-light-access: #b40000;
	--accent-dark: #c80000;
	--accent-dark-access: #c80000;
}

[theme=dark]
{
    --app-filter-dark-invert: invert(1);
    --app-filter-dark-mascot: brightness(0.875) contrast(1.075);
}

.items img:not([src])
{
    background: var(--overlay-6);
    animation: 1.5s ImageLoading infinite;
    content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNgYAAAAAMAASsJTYQAAAAASUVORK5CYII=);
}
.items img[src]
{
    animation: 0.15s ImageIn;
}

header.titlebar
{
    height: 93px;
    padding-bottom: 33px;
}
    header.titlebar img.icon
    {
        display: block;
        width: 200px;
        height: 30px;
        filter: unset;
        object-fit: contain;
        object-position: left;
    }
    header.titlebar .controls
    {
        background: transparent;
        border: none;
        height: 93px;
    }
        header.titlebar .controls button
        {
            color: var(--foreground-page);
            width: 45px;
            height: 45px;
            border-radius: 100%;
            filter: none;
            opacity: 1;
        }
        header.titlebar .controls button:hover
        {
            background: var(--background-input-hover);
        }
        header.titlebar .controls button:active
        {
            background: var(--background-input-active);
        }

.root
{
    grid-auto-columns: auto;
    grid-template-areas: "Content";
}
    .root:before,
    .root:after
    {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 93px;
        z-index: 99;
        pointer-events: none;
        opacity: 0;
    }
    .root:before
    {
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);
    }
    .root:after
    {
        transition: var(--animation) opacity;
        background: inherit;
    }
    .root.active:before
    {
        opacity: 1;
    }
    .root.active:after
    {
        opacity: 0.8;
    }
    .root nav
    {
        display: grid;
        grid-auto-flow: column;
        background: transparent;
        position: fixed;
        padding: 0 0 0 20px !important;
        border-left: 1px solid var(--overlay-5);
        box-shadow: none !important;
        top: 23px;
        left: 250px;
        gap: 6px;
        z-index: 100;
        transition: 0.5s opacity;
    }
        .root nav a,
        .root nav a:first-child
        {
            all: unset;
            display: grid;
            width: 45px;
            height: 45px;
            font-size: 20px;
            align-items: center;
            justify-content: center;
            border-radius: 100%;
            cursor: default;
        }
        .root nav > a.active
        {
            background: var(--background-list-even) !important;
        }
        .root nav > a:hover
        {
            background: var(--background-input-hover) !important;
        }
        .root nav > a:active
        {
            background: var(--background-input-active) !important;
        }
            .root nav a .icon
            {
                color: var(--foreground-page) !important;
            }
            .root nav a.active .icon.blank,
            .root nav a:not(.active) .icon.fill
            {
                display: none;
            }

        .root .main
        {
            margin-top: 0 !important;
            padding-top: calc(var(--padding) + 93px);
        }
        .root .main:has(.internal.changing)
        {
            pointer-events: none;
        }
            .root .main .internal
            {    
                margin: 0 auto;
                max-width: calc(1000px + (var(--padding) * 2));
                animation: 0.5s var(--key-animation) internalIn;
            }
            .root .main .internal.right
            {    
                animation: 0.5s var(--key-animation-game) internalInRight;
            }
            .root .main .internal.left
            {    
                animation: 0.5s var(--key-animation-game) internalInLeft;
            }
            .root .main .internal.changing
            {    
                animation: 0.2s cubic-bezier(0.8, 0, 1, 0.5) internalOutLeft, 0.5s internalOutWait infinite 0.35s;
            }
            .root .main .internal.left.changing
            {    
                animation: 0.2s cubic-bezier(0.8, 0, 1, 0.5) internalOutRight, 0.5s internalOutWait infinite 0.35s;
            }
            .root .main .internal.still
            {    
                animation: none !important;
            }
                .root .main .internal.still > .progressring
                {
                    position: absolute;
                    left: 50%;
                    top: 50%;
                    transform: translate(-50%, -50%);
                    width: 30px;
                    height: 30px;
                }

@keyframes internalIn 
{
    0% { opacity: 0; transform: translateY(150px) }
    15% { opacity: 0; }    
}
@keyframes internalInRight
{
    0% { opacity: 0; transform: translateX(150px) }
}
@keyframes internalInLeft
{
    0% { opacity: 0; transform: translateX(-150px) }  
}
@keyframes internalOutRight
{
    85% { opacity: 0; }
    100% { opacity: 0; transform: translateX(150px)}    
}
@keyframes internalOutLeft
{
    85% { opacity: 0; }
    100% { opacity: 0; transform: translateX(-150px)}    
}
@keyframes internalOutWait
{
    0% { opacity: 0 }
    100% { opacity: 0 }    
}

.items
{
    position: relative;
}
    .items .item
    {
        animation: 0.15s ImageIn;
    }
        .items .item img[item=thumbnail]
        {
            display: block;
            width: 100%;
            height: 100%;
        }	
    .items .scroll
    {
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        scroll-behavior: smooth;
        scroll-snap-type: x mandatory;
    }
    .items .arrows
	{
        position: absolute;
        right: 0;
        bottom: 0;
	}
    .items .arrows:not(:has(.prev.show, .next.show)) 
	{
		display: none;
	}
	.items .arrow
	{
		position: absolute;
		display: flex;
		width: 40px;
		height: 40px;
		border-radius: 100%;
		font-family: var(--font-icon);
		font-size: 15px;
        font-weight: bold;
		bottom: 0;
		left: calc(100% - 25px + (25px * var(--arrow-pos)));
		background: linear-gradient(var(--overlay-5), var(--overlay-5));
		transform: translate(-100%, 100%) scale(1);
		justify-content: center;
		align-items: center;
		z-index: 2;
		transition: 0.15s opacity;
		opacity: 0.3;
		pointer-events: none;
	}
	.items .arrow.show
	{
		opacity: 1;
		pointer-events: all;
	}
	.items .arrow.show:hover
	{
		background-color: var(--overlay-6);
	}
	.items .arrow.show:active
	{
		background-color: var(--overlay-7);
	}
	.items .arrow.prev
	{
		--arrow-pos: -1;
	}
	.items .arrow.next
	{
		--arrow-pos: 1;
	}
		.items .arrow.prev:after
		{
			content: "\ef38";
			position: relative;
			left: -1px;
			opacity: 0.6;
			display: block;
			transition: 0.2s opacity;
		}
		.items .arrow.next:after
		{
			content: "\ef4a";
			position: relative;
			right: -1px;
			opacity: 0.6;
			display: block;
		}
@keyframes ImageLoading
{
    0% { background: transparent }
    50% { background: var(--overlay-7) }
    100% { background: transparent }
}
@keyframes ImageIn
{
    0% { opacity: 0 }
}

@media screen and (max-width: 800px) 
{    
    header.titlebar
    {
        height: calc(52px + var(--padding));
        padding-bottom: 18px;
    }
        header.titlebar img.icon
        {
            width: 35px;
            height: 35px;
            object-fit: cover;
        }   
        header.titlebar .controls
        {
            height: calc(38px + var(--padding));
        }
    .root nav
    {
        left: 50%;
        top: calc(var(--padding) - 7px);
        border-left: none !important;
        padding: 0 0 0 10px !important;
        transform: translate(-50%);
    }
    .root .main
    {
        padding-top: calc(var(--padding) + 82px);
    }
}

@media screen and (max-width: 425px) 
{    
    header.titlebar
    {
        height: calc(52px + var(--padding));
    }
        header.titlebar .controls 
        {
            height: calc(43px + var(--padding));
        }
    .root:before,
    .root:after
    {
        height: 76px;
    }
    .root nav
    {
        top: calc(var(--padding) - 5px);
    }
}


/*-------------------------------------------------------------------------------------------------------------------*/


.main .text
{
    font-size: 1.25rem;
    line-height: 1.5;
}


.audio
{
    position: fixed;
    left: 50%;
    bottom: var(--padding);
    width: calc(1000px + (var(--padding) * 2));
    height: 65px;
    background: var(--background-context);
    backdrop-filter: var(--filter-blur);
    -webkit-backdrop-filter: var(--filter-blur);
    border-radius: 15px;
    border: 1px solid var(--border-context);
    box-shadow: var(--filter-shadow);
    box-sizing: content-box;
    overflow: hidden;
    transform: translate(-50%, calc(100% + 10px + var(--padding)));
    transition: 
        0.5s var(--key-animation) width,
        0.5s var(--key-animation) height,
        0.5s var(--key-animation) bottom,
        0.5s var(--key-animation) transform,
        0.9s border-radius,
        0.25s background,
        0.01s z-index 0.35s
    ;    
    z-index: 10;
}
.audio.opened
{
    transform: translate(-50%, 0);
}
.audio.expanded
{
    max-width: unset;
    width: 100vw;
    height: 100vh;
    width: 100dvw;
    height: 100dvh;
    bottom: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    z-index: 101;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--background-page);
    transition: 
        0.5s var(--key-animation) width,
        0.5s var(--key-animation) height,
        0.5s var(--key-animation) bottom,
        0.5s var(--key-animation) transform,
        0.9s border-radius,
        0.25s background,
        0.01s z-index 
    ;    
}
    .audio > .background
    {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        pointer-events: none;
        z-index: -1;
    }
        .audio > .background:before
        {
            content: "";
            position: absolute;
            top: -100vh;
            left: -100vw;
            width: 200vw;
            height: 200vh;
            top: -100dvh;
            left: -100dvw;
            width: 200dvw;
            height: 200dvh;
            background: var(--colorblur);
            background-size: cover;
            background-position: center;
            filter: brightness(6) saturate(2) opacity(0.25);
            -webkit-filter: brightness(6) saturate(2) opacity(0.25);
            transition: 0.5s opacity, 0.5s filter;
            opacity: 0;
        }
        .audio.opened > .background:before
        {
            opacity: 1;
            transition: 0.5s background, 0.5s opacity
        }
        .audio.expanded.show-lyrics > .background:before
        {
            opacity: 0;
            transition: 0.5s opacity
        }
        .audio > .background:after
        {
            content: "";
            position: absolute;
            top: -10vh;
            left: -10vw;
            width: calc(100vw + 20vw);
            height: calc(100vh + 20vh);
            top: -10dvh;
            left: -10dvw;
            width: calc(100dvw + 20dvw);
            height: calc(100dvh + 20dvh);
            background: var(--thumbblur);
            background-size: cover;
            background-position: center;
            filter: brightness(0.6) saturate(2.25);
            -webkit-filter: brightness(0.6) saturate(2.25);
            transition: 0.5s opacity;
            opacity: 0;
        }
        .audio.expanded.show-lyrics > .background:after
        {
            opacity: 1;
        }
        .audio > .background img
        {
            content: var(--artist);
            position: absolute;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            display: none;
        }
        .audio.expanded:not(.show-lyrics) > .background img.loaded
        {
            display: block;
            animation: 
                0.35s BackgroundNothing,
                2s cubic-bezier(0, 1, 0.1, 1) BackgroundIn 0.35s, 
                0.75s BackgroundInOpacity 0.35s,
                60s BackgroundFill 2.35s;
            filter: brightness(0.55);
            -webkit-filter: brightness(0.55);
            transform: scale(1.25);
        }
    .audio > .container
    { 
        display: grid;
        grid-template-areas:
            "tools tools tools"
            "controls controls toolbar"
            "lyrics lyrics lyrics"
            "expandedcontrols expandedcontrols expandedcontrols"
        ;
        grid-auto-rows: max-content max-content auto;
        grid-auto-columns: auto 1fr max-content;
        transition: 0.5s var(--key-animation) margin, 0.5s var(--key-animation) transform;       
        height: calc(100vh - 50px); 
        height: calc(100dvh - 50px); 
        transform: translateY(-60px);
    }
    .audio.expanded > .container
    { 
        margin: 25px 20px;
        transform: none; 
    }
        .audio > .container .controls
        {
            grid-area: controls;
            display: grid;
            grid-template-areas: "metadata seekbar buttons";
            grid-auto-rows: 100%;
            grid-auto-columns: auto 1fr max-content;
            padding: 10px 0 10px 10px;
            gap: 20px;
            align-items: center;
        }
            .audio > .container .controls .metadata
            {
                grid-area: metadata;
                display: grid;
                grid-template-areas:
                    "thumbnail a"
                    "thumbnail name"
                    "thumbnail desc"
                    "thumbnail b";
                width: 325px;
                font-size: 16px;
                margin: -7px 0 -7px -6px;
                padding: 7px;
                border-radius: 11px;
                background: transparent;
                transition: 0.15s background, 0.5s transform;
                grid-auto-columns: 45px auto;
                grid-auto-rows: auto max-content max-content auto;
                transform-origin: top left;
            }
            .audio.expanded > .container .controls .metadata
            {
                width: calc((100vw - 50px) * 0.775);
                transform: scale(1.3);
                pointer-events: none;
                background: transparent !important;
                transition: 0.5s transform, 0.1s width 0.5s;
            }   
            .audio > .container .controls .metadata:hover
            {
                background: var(--background-input-hover);
            }
            .audio > .container .controls .metadata:active
            {
                background: var(--background-input-active);
            }
                .audio > .container .controls .metadata .thumbnail
                {
                    grid-area: thumbnail;
                    width: 100%;
                    aspect-ratio: 1 / 1;
                    border-radius: 6px;
                }
                .audio > .container .controls .metadata .name
                {
                    grid-area: name;
                    font-family: var(--font-semibold);
                    line-height: 1.3;
                    margin: 0 0 0 10px;    
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }
                .audio > .container .controls .metadata .desc
                {
                    grid-area: desc;
                    font-family: var(--font-semibold);
                    line-height: 1.3;
                    margin: 0 0 0 10px;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    opacity: 0.6;
                }
            .audio > .container .controls .progressbar,
            .audio > .container .expandedcontrols .progressbar
            {
                grid-area: seekbar;
                width: calc(100% - 102px);
                margin: 0 51px;
                height: 4px;
                display: none;
                --accent: white;
                transition: 0.15s opacity;
                opacity: 1;
            }
            .audio.loading > .container .controls .progressbar,
            .audio.loading > .container .expandedcontrols .progressbar
            {
                display: block;
            }
            .audio > .container .controls .seekbar,
            .audio > .container .expandedcontrols .seekbar
            {
                grid-area: seekbar;
                display: grid;
                grid-auto-flow: column;
                grid-auto-columns: 3em auto 3em;
                align-items: center;
                gap: 10px;
                font-size: 14px;
                font-family: var(--font-semibold);
                text-align: center;
                --accent: white;
                transition: 0.15s opacity;
                opacity: 1;
            }
            .audio.loading > .container .controls .seekbar
            {
                display: none;
            }
                .audio > .container .controls .seekbar:before,
                .audio > .container .controls .seekbar:after,
                .audio > .container .expandedcontrols .seekbar:before,
                .audio > .container .expandedcontrols .seekbar:after
                {
                    content: attr(duration);
                    letter-spacing: 0.1em;
                }
                .audio > .container .controls .seekbar:after,
                .audio > .container .expandedcontrols .seekbar:after
                {
                    content: attr(total);
                }
                .audio > .container .controls input,
                .audio > .container .expandedcontrols input
                {
                    width: 100%;
                    margin: 0;
                }
            .audio > .container .controls .buttons,
            .audio > .container .expandedcontrols .buttons
            {
                grid-area: buttons;
                transition: 0.15s background, 0.15s opacity;
                border-radius: 100%;
                opacity: 1;
            }
            .audio > .container .controls .buttons:hover,
            .audio > .container .expandedcontrols .buttons:hover
            {    
                background: var(--background-input-hover);
            }
            .audio > .container .controls .buttons:active,
            .audio > .container .expandedcontrols .buttons:active
            {    
                background: var(--background-input-active);
            }
                .audio > .container .controls .buttons .playpause
                {    
                    display: grid;
                    width: 42px;
                    height: 42px;
                    font-size: 16px;
                    align-items: center;
                    justify-content: center;
                }
            .audio.expanded > .container .controls .progressbar,
            .audio.expanded > .container .controls .seekbar,
            .audio.expanded > .container .controls .buttons
            {
                opacity: 0;
            }
        .audio > .container .expandedcontrols
        {
            grid-area: expandedcontrols;
            display: grid;
            grid-template-areas: 
                "buttons seekbar seekbar"
                "a toggle b"
            ;
            grid-auto-columns: 55px auto 55px;
            margin: -30px -5px 0 -5px;
            gap: 10px;
            align-items: center;
        }
            .audio > .container .expandedcontrols .progressbar
            {
                position: relative;
                top: -10px;
                width: calc(100% - 21px);
                margin: 0;
                height: 6px;
                --accent: var(--overlay-3);
            }
            .audio > .container .expandedcontrols .seekbar
            {
                display: block;
                position: relative;   
                top: -10px;
                font-size: 13px;
                margin-right: 20px;
                color: var(--overlay-3);
            }
                .audio > .container .expandedcontrols .seekbar:before
                {
                    position: absolute;
                    top: 20px;
                    left: 0;
                }
                .audio > .container .expandedcontrols .seekbar:after
                {
                    position: absolute;
                    top: 20px;
                    right: 0;
                }
                .audio > .container .expandedcontrols .seekbar input
                {
                    height: 6px;
                    border-radius: 10px;
                    --accent: var(--overlay-2);
                }
                .audio.loading > .container .expandedcontrols .seekbar input
                {
                    opacity: 0;
                    pointer-events: none;
                }
                .audio > .container .expandedcontrols .seekbar input::-webkit-slider-thumb 
                {
                    -webkit-appearance: none;
                    opacity: 0;
                }
                    .audio > .container .expandedcontrols .buttons .playpause
                    {    
                        display: grid;
                        width: 55px;
                        height: 55px;
                        font-size: 23px;
                        align-items: center;
                        justify-content: center;
                    }
                .audio > .container .expandedcontrols .toggles
                {
                    grid-area: toggle;
                    display: grid;
                    grid-auto-flow: column;
                    gap: 80px;
                    justify-content: center;    
                    margin: 15px 0;
                }
                    .audio > .container .expandedcontrols .toggles > div
                    {
                        display: grid;
                        width: 35px;
                        height: 35px;
                        font-size: 20px;
                        background: transparent;
                        align-items: center;
                        justify-content: center;
                        border-radius: 7px;
                        opacity: 0.5;
                        transition: 0.15s background;
                    }
                    .audio.show-lyrics > .container .expandedcontrols .toggles > .lyric,
                    .audio:not(.show-lyrics) > .container .expandedcontrols .toggles > .artist
                    {
                        background: white;
                        color: black;
                        mix-blend-mode: screen;
                    }
                    .audio > .container .expandedcontrols .toggles > div:hover
                    {
                        background: var(--background-input-hover);
                    }
                    .audio > .container .expandedcontrols .toggles > div:active
                    {
                        background: var(--background-input-active);
                        }
                        .audio.show-lyrics > .container .expandedcontrols .toggles > .lyric span:not(.fill),
                        .audio:not(.show-lyrics) > .container .expandedcontrols .toggles > .lyric span.fill,
                        .audio:not(.show-lyrics) > .container .expandedcontrols .toggles > .artist span:not(.fill),
                        .audio.show-lyrics > .container .expandedcontrols .toggles > .artist span.fill
                        {
                            display: none;
                        }
        .audio > .container .lyrics
        {
            grid-area: lyrics;
            padding: 15px;
            font-size: 2.15em;
            line-height: 1.3;
            font-family: "SF Pro Display KR Bold", var(--font-bold);   
            transform: translateY(-0.15em); 
            overflow: hidden;
            z-index: -1;
            opacity: 0;
            transition: 0.5s opacity;
            mask-image: linear-gradient(transparent, black 2em, black 5em, transparent);
            -webkit-mask-image: linear-gradient(transparent, black 2em, black 5em, transparent);
        }
        .audio.expanded.show-lyrics > .container .lyrics
        {
            opacity: 1;
            transition: 0.5s opacity 0.4s;
        }
            .audio > .container .lyrics .container
            {
            }
                .audio > .container .lyrics .container div
                {
                    --delay: 0s;
                    transform: translateY(calc(var(--scroll)* 1px + 1.35em));
                    filter: blur(3px);
                    transform-origin: left center;
                    -webkit-filter: blur(3px);
                    transition: 
                        0.7s cubic-bezier(0.6, 0, 0.185, 1)  transform var(--delay), 
                        0.2s opacity calc(0.35s + var(--delay)), 
                        0.3s filter calc(0.35s + var(--delay));
                    opacity: 0.5;
                    margin: 0 0 0.8em;
                    display: grid;
                    align-items: center;
                    justify-items: start;
                }
                .audio > .container .lyrics .container div.active
                {
                    transform: translateY(calc(var(--scroll) * 1px + 1.35em));
                    filter: blur(0px);
                    -webkit-filter: blur(0px);
                    opacity: 1;
                }
                .audio.seeking > .container .lyrics .container div
                {
                    transition: 
                        0.25s ease-out transform,
                        0.25s opacity,
                        0.25s filter;
                }
                    .audio > .container .lyrics .container div > span
                    {
                        transform: scale(0.975);
                        transform-origin: left center;
                        transition: 0.6s cubic-bezier(0.5, 0, 0.2, 1) transform calc(var(--delay));
                    }
                    .audio > .container .lyrics .container div.active > span
                    {
                        transform: scale(1);
                        transition: 0.6s cubic-bezier(0.5, 0, 0.2, 1) transform calc(0.2s + var(--delay));
                    }
                    .audio.seeking > .container .lyrics .container div > span
                    {
                        transition: 0.25s transform;
                    }
        .audio > .container .toolbar
        {
            grid-area: toolbar;
            display: grid;
            grid-auto-flow: column;    
            grid-auto-columns: max-content;
            padding: 10px 10px 10px 5px;
            align-items: center;
            gap: 5px;
            transition: 0.15s opacity;
        }
            .audio > .container .toolbar > div
            {
                display: grid;
                width: 42px;
                height: 42px;
                font-size: 16px;    
                align-items: center;
                justify-content: center;
                transition: 0.15s background;
                border-radius: 100%;
            }
            .audio > .container .toolbar > div:hover
            {    
                background: var(--background-input-hover);
            }
            .audio > .container .toolbar > div:active
            {    
                background: var(--background-input-active);
            }
            .audio.expanded > .container .toolbar
            {
                opacity: 0;
                pointer-events: none;
            }
        .audio > .container .tools
        {
            grid-area: tools;
            display: grid;
            grid-template-areas: "expand a openanotherapp fullscreen";   
            grid-auto-columns: max-content auto max-content max-content;
            margin: 5px 10px 20px;
            align-items: center;
            gap: 10px;
        }
            .audio > .container .tools > div
            {
                display: grid;
                width: 35px;
                height: 35px;
                font-size: 14px;
                font-weight: bolder;
                align-items: center;
                justify-content: center;
                transition: 0.15s background;
                border-radius: 100%;
                background: var(--overlay-6);
            }
            .audio > .container .tools > div:hover
            {    
                background: var(--overlay-5);
            }
            .audio > .container .tools > div:active
            {    
                background: var(--overlay-4);
            }
            .audio > .container .tools .expand
            {
                grid-area: expand;
            }
            .audio > .container .tools .openanotherapp
            {
                grid-area: openanotherapp;
            }
            .audio > .container .tools .fullscreen
            {
                grid-area: fullscreen;
            }
            .audio:not(.fullscreen) > .container .tools .fullscreen.exit,
            .audio.fullscreen > .container .tools .fullscreen:not(.exit)
            {
                display: none;
            }
    .audio audio
    {
        display: none;
    }
    
@keyframes BackgroundNothing
{
    0% 
    {
        opacity: 0;
    }  
    100% 
    {
        opacity: 0;
    }     
}
@keyframes BackgroundIn 
{
    0% 
    {
        transform: scale(1.35);
    }  
    100% 
    {
        transform: scale(1);
    }    
}
@keyframes BackgroundInOpacity
{
    0% 
    {
        opacity: 0;
    }    
}
@keyframes BackgroundFill
{
    0% 
    {
        transform: scale(1);
    }  
}
@keyframes BackgroundLoading
{
    0% 
    {
        background-size: 0% 100%;
        opacity: 1;
    }  
    30% 
    {
        opacity: 1;
    }   
    100% 
    {
        background-size: 100% 100%;
        opacity: 0;
    }      
}

@media screen and (max-width: 1120px) 
{
    .audio
    {
        width: calc(100vw - (var(--padding) * 2));
    }
}
@media screen and (min-width: 1000px)
{
    .audio > .container .controls 
    {
        transition: 0.5s var(--key-animation) transform;
    }
    .audio.expanded > .container .controls 
    {
        transform: translate(calc(-30px - 191px + 25vw), calc(-90px - 235px + 50vh));
    }
        .audio > .container .controls .metadata
        {
            transition: 0.5s var(--key-animation) transform, 0.5s var(--key-animation) width, 0s linear 0.25s text-align !important;
        }
        .audio.expanded > .container .controls .metadata
        {
            width: 465px;
            transform: translate(-55px, 605%);
            text-align: center;
            font-size: 1.25em;
        }
            .audio > .container .controls .metadata .thumbnail
            {
                transition: 0.5s var(--key-animation) border-radius, 0.5s var(--key-animation) transform;
            }
            .audio.expanded > .container .controls .metadata .thumbnail
            {
                border-radius: 1px;
                transform: scale(8.5) translate(calc(50% + 4px), calc(50% - 2.5em));
            }
        .audio > .container .lyrics
        {
            mask-image: linear-gradient(transparent, black 2em, black 5em, transparent 90%);
            -webkit-mask-image: linear-gradient(transparent, black 2em, black 5em, transparent 90%);
        }
        .audio.show-lyrics > .container .lyrics 
        {
            transform: translateY(calc(50% - 4.5em));
            margin: 0 40px 0 calc(50vw - 50px);
            font-size: 2.7em;
        }
        .audio > .container .expandedcontrols 
        {
            position: relative;
            left: 25vw;
            bottom: 50vh;
            max-width: 420px;
            transform: translate(calc(-50% - 11px), 20em);
        }
}
@media screen and (max-width: 875px) 
{
    .audio
    {
        border-radius: 15px 15px 0 0;
        width: 100%;
        border: 0;
        box-shadow: none;
        bottom: 0;
        height: calc(65px + env(safe-area-inset-bottom));
    }
        .audio > .background .loading
        {
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            width: 100vw;
            background: linear-gradient(90deg, var(--overlay-7), var(--overlay-7));
            background-repeat: no-repeat;
            background-size: var(--value);
        }
        .audio.loading > .background .loading
        {
            animation: 1.5s BackgroundLoading infinite;
        }
        .audio.expanded > .background .loading
        {
            display: none;
        }
        .audio > .container
        {
            height: calc(100vh - 50px - env(safe-area-inset-bottom));
            height: calc(100dvh - 50px - env(safe-area-inset-bottom));
        }
            .audio > .container .controls
            {
                grid-template-areas: "metadata";    
                grid-auto-columns: auto;
                gap: 0;
            }
                .audio:not(.expanded) > .container .controls .metadata
                {
                    width: calc(100% + 106px);
                    padding-right: 106px;
                }   
                .audio > .container .controls .progressbar,
                .audio > .container .controls .seekbar,
                .audio > .container .controls .buttons
                {
                    display: none !important;
                }     
}


.video
{ 
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--background-page);
    z-index: 10;
    box-sizing: content-box;
    overflow: hidden;
    transform: scale(0.9);
    transition: 
        0.5s var(--key-animation) transform,
        0.15s opacity,
        0.25s background,
        0.01s z-index 0.35s
    ;    
    opacity: 0;
    pointer-events: none;
}
.video.opened
{ 
    z-index: 101;
    transform: none;
    pointer-events: all;
    transition: 
        0.5s var(--key-animation) transform,
        0.15s opacity,
        0.25s background,
        0.01s z-index
    ;    
    opacity: 1;
}
.video.hide-metadata
{ 
    cursor: none;
}
    .video > .container
    { 
    }
        .video > .container .tools
        {
            display: grid;
            position: absolute;
            top: 30px;
            left: 30px;
            right: 30px;
            grid-template-areas: "exit a fullscreen";   
            grid-auto-columns: max-content auto max-content;
            align-items: center;
            gap: 10px;
            z-index: 1;
            transition: 0.35s opacity;
        }
        .video.hide-metadata > .container .tools
        {
            opacity: 0;
            pointer-events: none;
        }
            .video > .container .tools > div
            {
                display: grid;
                width: 35px;
                height: 35px;
                font-size: 14px;
                font-weight: bolder;
                align-items: center;
                justify-content: center;
                transition: 0.15s background-image;
                border-radius: 100%;
                background-image: linear-gradient(black 0, transparent 0);
            }
            .video > .container .tools > div:hover
            {    
                background-image: linear-gradient(black 0, var(--overlay-5) 0);
            }
            .video > .container .tools > div:active
            {    
                background-image: linear-gradient(black 0, var(--overlay-4) 0);
            }
            .video > .container .tools .exit
            {
                grid-area: exit;
            }
            .video > .container .tools .fullscreen
            {
                grid-area: fullscreen;
            }
            .video:not(.fullscreen) > .container .tools .fullscreen.exit,
            .video.fullscreen > .container .tools .fullscreen:not(.exit)
            {
                display: none;
            }
        .video > .container .controls
        {
            transition: 0.35s opacity;
        }
        .video.hide-metadata > .container .controls
        {
            opacity: 0;
            pointer-events: none;
        }
            .video > .container .controls .metadata
            {
                display: block;
                position: absolute;
                bottom: 90px;
                left: 45px;
                right: 45px;
                z-index: 1;
                font-size: 1.4em;
                font-family: var(--font-semibold);
            }
            .video > .container .controls .buttons
            {
                position: absolute;
                display: grid;
                grid-auto-flow: column;
                place-self: center;
                gap: 20px;
                top: 50%;
                left: 50%;
                z-index: 1;
                transform: translate(-50%, calc(-50% - 10px)) scale(1.5);
            }
                .video > .container .controls .buttons > div
                {
                    display: grid;
                    font-size: 22px;
                    width: 45px;
                    height: 45px;
                    border-radius: 100%;
                    align-items: center;
                    justify-content: center;
                    background: transparent;
                    transition: 0.15s background;
                }
                .video > .container .controls .buttons > div:hover
                {
                    background: var(--background-input-hover);
                }
                .video > .container .controls .buttons > div:active
                {
                    background: var(--background-input-active);
                }
                .video > .container .controls .buttons > .playpause
                {
                    transform: scale(1.2) translateY(-1px);
                }
                .video.loading > .container .controls .buttons > .playpause
                {
                    opacity: 0;
                    pointer-events: none;
                }
            .video > .container .controls .seekbar
            {    
                display: block;
                position: absolute;
                height: 35px;
                bottom: 45px;
                left: 45px;
                right: 45px;
                font-size: 13px;
                font-family: var(--font-semibold);
                color: var(--overlay-3);
                z-index: 1;
            }
                .video > .container .controls .seekbar:before, 
                .video > .container .controls .seekbar:after
                {
                    position: absolute;
                    top: 20px;
                    letter-spacing: 0.1em;
                }
                .video > .container .controls .seekbar:before 
                {
                    content: attr(duration);
                    left: 0;
                }
                .video > .container .controls .seekbar:after 
                {
                    content: attr(total);
                    right: 0;
                }
                .video > .container .controls .seekbar input
                {
                    width: 100%;
                    height: 6px;
                    border-radius: 10px;
                    --accent: white;
                    margin: 0;
                }
                .video > .container .controls .seekbar input::-webkit-slider-thumb 
                {
                    -webkit-appearance: none;
                    opacity: 0;
                }
    .video .progressring
    {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: none;
    }
    .video.loading .progressring
    {
        display: block;
        transform: translate(-50%, calc(-50% - 10px));
    }
        .video.loading .progressring > * > * 
        {
            background: white;
        }
    .video video
    {
        position: absolute;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        width: 100dvw;
        height: 100dvh;
        z-index: -1;
        transition: 0.35s opacity;
    }
    .video:not(.hide-metadata) video
    {
        opacity: 0.5;
    }
    
@media (pointer:none), (pointer:coarse) 
{
    .video > .container .tools
    {
        top: 20px;
        left: 20px;
        right: 20px;
    }
        .video > .container .controls .metadata
        {
            bottom: 75px;
            left: 30px;
            right: 30px;
            font-size: 1.2em;
        }
        .video > .container .controls .seekbar
        {    
            bottom: 30px;
            left: 30px;
            right: 30px;
        }
}