@font-face {
    font-family: "Spotify Book";
    src: url("fonts/CircularSpotify-UI-Latin-Book.woff2");
    font-weight: 400;
    font-display: swap;
    font-style: normal;
}

@font-face {
    font-family: "Spotify Bold";
    src: url("fonts/CircularSpotify-UI-Latin-Bold.woff2");
    font-weight: 700;
    font-display: swap;
    font-style: normal;
}

:root {
    --color: #ffffff;
    --transition: 0.5s;
    --font-normal: "Spotify Book", sans-serif;
    --font-bold: "Spotify Bold", sans-serif;
    --margin-main: 8vmin;
    --margin-half: calc(var(--margin-main) / 2);
    --margin-double: calc(var(--margin-main) * 2);
    --shadow-light: 0.5vmin 0.5vmin 0.5vmin #00000044;
    --shadow-medium: 0.5vmin 0.5vmin 0.5vmin #000000aa;
    --shadow-full: 0.5vmin 0.5vmin 0.5vmin black;
}

html, body {
    margin: 0;
    overflow: hidden;
    background-color: #111;
    color: white;
    font-family: var(--font-normal);
    width: 100%;
    height: 100%;
    font-size: 2vmin;
    line-height: 1.3;
    user-select: none;
    word-break: keep-all;
}

body.idle > * {
    display: none;
}

body.dark-blur > *:not(#modal-overlay) {
    filter: blur(1vmin);
    transition: filter var(--transition);
}

body.hide-cursor-enabled.hide-cursor {
    cursor: none !important;
}

#main.allow-user-select {
    user-select: all;
}

.transparent {
    opacity: 0 !important;
}

.text-grow {
    letter-spacing: -1vmin;
}

* {
    box-sizing: border-box;
}

a, a:visited, a:hover, a:active {
    color: var(--color);
}

a:hover {
    opacity: 1 !important;
}

#main.transitions :is(
    #background-rendered *,
    #context-main, #context-extra, #thumbnail-wrapper, #logo,
    #artists, #title, #description, #album,
    #track-list, #track-list .track-elem div,
    #lyrics,
    #progress-background,
    #info-symbols > div, #volume, #volume-text, #device,
    #clock, #time-current, #time-total
) {
    transition: opacity var(--transition),
        color var(--transition),
        background-color var(--transition),
        letter-spacing var(--transition),
        font-size var(--transition),
        filter var(--transition);
}

#main.slow-transitions {
    --transition: 1s;
}

img:not([src]) {
    visibility: hidden;
}

#toast {
    position: absolute;
    width: 100%;
    height: var(--margin-main);
    z-index: 4;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2vmin;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--transition), margin-top var(--transition);
    margin-top: calc(-1 * var(--margin-half));
}
#toast.show {
    opacity: 1;
    margin-top: 0;
}
#toast-text {
    background: #00000060;
    padding: 1vmin 2vmin;
    border-radius: 1vmin;
}

#dark-overlay {
    --dark-intensity: 0.5;
    opacity: var(--dark-intensity);
    background: black;
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
    display: none;
}

#dark-overlay.show {
    display: initial;
}


#modal-overlay {
    --modal-transition: 0.35s;
    --modal-overlay-background: #0008;
    position: absolute;
    width: 100%;
    height: 100%;
    background: var(--modal-overlay-background);
    top: 0;
    left: 0;
    z-index: 4;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--modal-transition);
}

#modal-overlay.show {
    pointer-events: auto;
    opacity: 1;
}

#modal-overlay.show #modal {
    scale: 1;
}

#modal {
    --modal-background-primary: #444c;
    --modal-background-secondary: #000c;
    color: white;
    scale: 0;
    transition: scale var(--modal-transition);
    width: 30%;
    min-height: 30%;
    flex-direction: column;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0;
    gap: 3vmin;
    border-bottom-left-radius: 3vmin;
    border-bottom-right-radius: 3vmin;
    border: 0.5vmin solid var(--modal-background-primary);
    background: var(--modal-background-secondary);
}

#modal > div {
    padding: 2vmin;
    width: 100%;
    text-align: center;
}

#modal-header {
    font-size: 3vmin;
    color: white;
    background: var(--modal-background-primary);
}

#modal-main {
    padding: 0 4vmin !important;
    text-align: left !important;
}

#modal-buttons {
    display: flex;
    flex-direction: row;
    width: 100%;
    justify-content: end;
    gap: 2vmin;
    font-size: 3vmin;
}

#modal-buttons > div {
    transition: opacity var(--transition);
    cursor: pointer;
    opacity: 0.5;
}

#modal-buttons > div:hover {
    opacity: 1;
}

#modal-buttons .close {
    opacity: 0.25;
}

#modal-buttons .okay {
    display: none;
}

#modal-buttons.confirm .okay {
    display: initial;
}

:is(#time-current, #time-total, .track-number, .track-length, #volume) {
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.2vmin;
}

#main {
    height: 100%;
    color: var(--color);
    --artwork-size: 0;
    transform-origin: top right;
    transition: transform 500ms;
    background-color: black;
}

#main.hide {
    display: none;
}

#main.no-colored-text {
    --color: white;
}

#main.decreased-margins {
    --margin-main: 4vmin;
}

#content.extra-wide {
    padding: calc(var(--margin-main) * 2) var(--margin-main);
}

#content.text-shadows {
    filter: drop-shadow(var(--shadow-medium));
}

#main.scale-down {
    transform: scale(0.65);
}

#main:not(.artwork-above-content) #content:not(.full-content) #content-center,
#main:not(.artwork-above-content).artwork-expand-top #content:not(.full-content) #content-top,
#main:not(.artwork-above-content).artwork-expand-bottom #content:not(.full-content) #content-bottom {
    max-width: calc(100% - var(--artwork-size) - var(--margin-main));
}

#main.artwork-right #content {
    align-items: start;
}

#background-rendered, #prerender-canvas, #background-canvas, #background-canvas-overlay, #grain {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#background-rendered.hide {
    display: none;
}

#background-rendered canvas {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#background-rendered canvas.crossfade {
    opacity: 0;
    z-index: 1;
}

#prerender-canvas {
    display: none;
    z-index: -99;
    background: black;
    overflow: hidden;
    width: 100% !important;
    height: 100% !important;
    justify-content: start;
}

#prerender-canvas * {
    transition: none !important;
}

#prerender-canvas.show, #prerender-canvas.no-prerender {
    display: flex;
}

#main.artwork-right #prerender-canvas {
    justify-content: end;
}

#prerender-canvas.no-prerender {
    z-index: unset;
    width: 100% !important;
    height: 100% !important;
}

#background-canvas {
    --background-color: black;
    transform: scale(1.1);
    filter: brightness(35%);
}

#background-canvas.no-zoom {
    transform: unset;
}

#background-canvas.hide {
    display: none;
}

#background-canvas-overlay {
    background: var(--background-gradients), var(--background-color);
    --background-brightness: 0.5;
    --background-gradients:
        radial-gradient(circle, transparent 20%, #00000080 100%),
        linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, var(--background-brightness)) 100%);
    background-blend-mode: soft-light;
    opacity: var(--background-brightness);
}

#background-canvas-overlay.no-gradient {
    background: var(--background-color);
}

#background-canvas-overlay.no-tint {
    --background-brightness: 1 !important;
    background: var(--background-gradients);
    mix-blend-mode: multiply;
}

#background-canvas-overlay.no-gradient.no-tint {
    display: none;
}

#background-canvas.color-only #background-canvas-overlay.no-tint {
    --background-color: white !important;
    --background-brightness: 0.5 !important;
    background: var(--background-gradients), var(--background-color);
    mix-blend-mode: hard-light;
}

#background-canvas-overlay:not(.no-tint).dark-compensation.brighter {
    opacity: calc(0.5 - var(--background-brightness));
}

#background-canvas-overlay:not(.no-tint).bright-compensation.darker {
    background-blend-mode: hard-light;
}

#background-canvas-img {
    --bg-blur: 1;
    position: absolute;
    width: 100%;
    height: 100%;
    filter: blur(calc(var(--bg-blur) * 1vmin)) grayscale(25%) drop-shadow(var(--shadow-light));
    image-rendering: optimizeQuality;
    object-fit: contain;
    background-color: var(--background-color);
}

#background-canvas-img.fill-screen {
    object-fit: cover;
}

#background-canvas-img.no-blur {
    --bg-blur: 0;
}

#background-canvas.color-only #background-canvas-img {
    opacity: 0 !important;
}

#background-canvas.color-only #background-canvas-overlay {
    opacity: 1 !important;
    background-blend-mode: unset !important;
}

#grain {
    opacity: 0;
    mix-blend-mode: screen;
    background: url('img/grain.jpg') repeat;
    --intensity: 1;
    transform: translateZ(0);
}

#grain.show {
    opacity: max(0.06, calc(var(--intensity) * 0.30));
}

#content {
    display: flex;
    flex-direction: column;
    z-index: 1;
    width: 100%;
    height: 100%;
    position: absolute;
    padding: var(--margin-main);
    gap: var(--margin-main);
    align-items: end;
    justify-content: space-between;
}

#content.decreased-margins {
    gap: var(--margin-half);
}

#content.color-dodge {
    mix-blend-mode: color-dodge;
    opacity: 0.8;
}

#content.swap-top-bottom {
    flex-direction: column-reverse;
}

#content-top {
    flex-direction: row;
    width: 100%;
    height: min-content;
    display: flex;
    justify-content: space-between;
    position: relative;
    max-height: 6vmin;
    gap: var(--margin-half);
}

#content-top.hide {
    display: none;
}

#content-top.swap {
    flex-direction: row-reverse;
}

#artwork {
    width: var(--artwork-size);
    height: var(--artwork-size);
    overflow: hidden;
    position: relative;
    margin: var(--margin-main);
}

#main.artwork-above-content #artwork {
    margin: auto;
}

#artwork.shadow {
    filter: drop-shadow(var(--shadow-light));
}

#artwork.shadow.soft-light {
    mix-blend-mode: soft-light;
}

#artwork.top-disabled.center-disabled.bottom-disabled {
    margin: auto;
}

#artwork.double-margins {
    margin-left: var(--margin-double);
    margin-right: var(--margin-double);
}

#artwork.hide {
    display: none;
}

#artwork-img {
    position: absolute;
    width: auto;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    border: 0.2vmin solid transparent;
    transform: scale(1.02) translateZ(0);
    object-fit: contain;
    object-position: center;
}

#main.artwork-above-content #artwork-img {
    object-position: top;
}

#meta-left {
    flex: 1;
    text-align: left;
    display: flex;
    flex-direction: row;
    justify-content: start;
    gap: 2vmin;
}
#meta-left.hide {
    display: none;
}

#content-top.swap #meta-left {
    text-align: right;
    flex-direction: row-reverse;
    justify-content: end;
}

#thumbnail-wrapper {
    height: 6vmin;
    width: 6vmin;
    min-height: 6vmin;
    min-width: 6vmin;
    box-shadow: 0.2vmin 0.2vmin 0.5vmin #0004;
}

#thumbnail-wrapper.hide {
    display: none;
}

#thumbnail-wrapper.circular {
    border-radius: 50%;
    overflow: hidden;
}

#thumbnail-wrapper.colored {
    background-color: var(--color);
}

#thumbnail {
    width: inherit;
    height: inherit;
}

#thumbnail[src=""] {
    display: none;
}

#thumbnail-wrapper.colored #thumbnail {
    mix-blend-mode: multiply;
    filter: grayscale(1);
}


#context {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}

div#context-main {
    --max-lines: 1;
    width: fit-content;
}

div#context-extra {
    --max-lines: 1;
    opacity: 0.5;
    width: fit-content;
}

#context-extra.hide {
    display: none;
}

#context-description {
    display: none;
}

#context-extra.has-description.show-description #context-description {
    display: initial;
}


#content-top.swap #context {
    align-items: end;
}


#meta-right {
    text-align: right;
    position: relative;
    pointer-events: none;
}

#meta-right.hide {
    display: none;
}

#logo {
    -webkit-mask-image: url("img/symbols/spotify.png");
    -webkit-mask-size: contain;
    -webkit-mask-position: right;
    -webkit-mask-repeat: no-repeat;
    mask-image: url("img/symbols/spotify.png");
    mask-size: contain;
    mask-position: right;
    mask-repeat: no-repeat;
    height: 6vmin;
    width: 6vmin;
    background-color: #1DB954;
    opacity: 1;
}

#logo.colored {
    background-color: var(--color);
}

#content-center {
    display: flex;
    align-items: end;
    text-align: right;
    flex-direction: column;
    justify-content: center;
    flex: 1;
    width: 100%;
    min-height: 0;
    gap: var(--margin-half) var(--margin-main);
}

#main.artwork-right #content:not(.full-content) #content-center:not(.centered, .split-main-panels) {
    align-items: start;
    text-align: left;
}

#content.full-content #content-center, #content-center:is(.centered, .split-main-panels) {
    align-items: center;
}

#content-center.hide {
    visibility: hidden;
}

#content-center.split-main-panels {
    flex-direction: row;
}

#content-center.extra-margins {
    padding: 0 var(--margin-main);
}

#content-center.split-main-panels #center-info-main {
    flex: 1;
}

#main.artwork-above-content #content-center {
    padding-top: calc(var(--artwork-size) + var(--margin-main) + var(--bonus-padding));
    --bonus-padding: 0px;
}

#main.artwork-above-content.artwork-expand-top #context {
    max-width: calc(60vw - var(--artwork-size) - (var(--margin-main) * 2));
}

#center-info-main {
    display: flex;
    flex-direction: column;
    align-items: end;
    text-align: right;
    width: 100%;
    gap: 1vmin;
    --font-scale: 1vmin;
    max-height: 100%;
}

#center-info-main.hide {
    display: none;
}

#main.artwork-right #content-center:not(.centered) #center-info-main,
#main #content.full-content #content-center:not(.centered) #center-info-main {
    align-items: start;
    text-align: left;
}

#content-center.centered #center-info-main {
    align-items: center;
    text-align: center;
}

#content-center:not(.podcast) #center-info-main.big-text {
    --font-scale: 2vmin;
}

#title {
    font-size: calc(var(--font-scale) * 6);
    font-weight: bold;
}

#center-info-main.title-duplicate #title {
    display: none;
}

:is(#artists, #title-main, #album-title-main):empty::before {
    content: "\200B";
}

#title.force-display {
    display: -webkit-box !important;
}

#artists {
    font-family: var(--font-normal);
    font-size: calc(var(--font-scale) * 4);
}

#artists.hide {
    display: none;
}

#artists .feat {
    opacity: 0.65;
}

#artists.feat-new-line .feat {
    display: block;
}

#artists.no-feat .feat {
    display: none;
}

#title, #artists, #time-current, #time-total {
    font-family: var(--font-bold);
}

#content div#title.hide {
    display: none !important;
}

#title-extra.hide {
    display: none;
}

#album {
    display: flex;
    align-items: inherit;
    font-size: calc(var(--font-scale) * 3);
    gap: 0 1vmin;
}

#album:not(.hide-name, .hide-date).separate-date {
    flex-direction: column;
}

#album.hide-name #album-title {
    display: none;
}
#album.hide-date #album-release {
    display: none;
}
#album.hide-name.hide-date {
    display: none;
}

#album-release {
    opacity: 0.65;
    word-break: normal;
}

#album-release.hide {
    display: none;
}

#album-release:not(.full) #release-year,
#content-center:not(.podcast) #album-release.full.podcasts-only #release-year {
    display: initial;
}

#album-release:not(.full) #release-full,
#content-center:not(.podcast) #album-release.full.podcasts-only #release-full {
    display: none;
}

#content-center.podcast #album-release.full #release-year,
#content-center:not(.podcast) #album-release.full:not(.podcasts-only) #release-year {
    display: none;
}

#content-center.podcast #album-release.full #release-full,
#content-center:not(.podcast) #album-release.full:not(.podcasts-only) #release-full {
    display: initial;
}

#album:not(.hide-name, .separate-date) :is(#release-year, #release-full)::before {
    content: "(";
}

#album:not(.hide-name, .separate-date) :is(#release-year, #release-full):after {
    content: ")";
}

#album :is(#release-year, #release-full):empty {
    display: none !important;
}

#album-title-extra.hide {
    display: none;
}

div#description {
    text-align: inherit;
    margin-bottom: 3vmin;
    --max-lines: 10;
}

#description:empty, #description.hide, #content-center:not(.podcast) #description {
    display: none;
}

#track-list {
    display: grid;
    grid-template-columns: auto auto;
    grid-auto-rows: min-content;
    grid-gap: 0 2vmin;
    max-width: 100%;
    max-height: 100%;
    overflow-y: hidden;
    mask-repeat: no-repeat;
    font-size: var(--font-size-base);
    --min-change: 0.1;
    --scale-min: 2;
    --scale-max: 3;
    --font-size-base: calc(1vmin * clamp(var(--scale-min), var(--font-size-scale), var(--scale-max)));
    --font-size-scale: 1;
    --gradient-height: 6vmin;
    --gradient-top: white;
    --gradient-bottom: white;
    --gradient: linear-gradient(to bottom, var(--gradient-top) 0%, white var(--gradient-height),
        white calc(100% - var(--gradient-height)), var(--gradient-bottom)  100%);
    -webkit-mask-image: var(--gradient);
    mask-image: var(--gradient);
}

#track-list.scrollable {
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--color) transparent;
    transition: scrollbar-color var(--transition);
    padding-right: 2vmin;
}
::-webkit-scrollbar {
    width: 1vmin;
    height: 1vmin;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background-color: var(--color);
    transition: background-color var(--transition);
    border-radius: 1vmin;
    border: transparent;
}

#track-list.hide,
#track-list.single-track,
#content-center.lyrics #track-list.hide-for-lyrics
{
    display: none;
}

#track-list .feat {
    opacity: 0.65;
}

#track-list.no-feat .feat {
    display: none;
}

#content-center.split-main-panels :is(#track-list, #lyrics) {
    max-width: calc(100% * (2 / 3));
}

#track-list:empty,
#content-center.podcast #track-list.hide-for-podcasts {
    display: none;
}


#content-center.queue #track-list .track-elem:not(.current) > div {
    opacity: 0.65;
}

#track-list.show-timestamps {
    grid-template-columns: auto auto auto;
}
#content-center:not(.queue) #track-list.show-tracklist-numbers.always-show-track-numbers-album-view {
    grid-template-columns: auto auto auto auto;
}

#track-list.increase-min-scale {
    --scale-min: 3;
}
#track-list.increase-max-scale {
    --scale-max: 5;
}

#track-list.gradient-top {
    --gradient-top: transparent;
}

#track-list.gradient-bottom, #content-center.queue #track-list {
    --gradient-bottom: transparent;
}

#content-center.queue #track-list.queue-big-gradient {
    --gradient: linear-gradient(to bottom, black 20%, transparent 100%) !important;
}

#track-list .track-elem {
    display: contents;
}

#content-center:not(.queue) #track-list .track-elem:not(.disc) div {
    opacity: 0.5;
}

#content-center #track-list.album-spacers .track-elem.spacer div {
    margin-top: 2vmin;
}

#content-center:not(.queue) #track-list .track-elem.current div {
    opacity: 1;
}

#main #content-center.queue #track-list .track-elem.shrink:first-child div,
#main #content-center.queue #track-list .track-elem:not(.grow):last-child > div {
    opacity: 0;
    font-size: 0;
}

#track-list.show-tracklist-numbers .track-elem.disc div {
    opacity: 0.25;
    margin-top: 2vmin;
}

#track-list.show-tracklist-numbers .track-elem.disc .disc-number {
    grid-column: 2 / 4;
    text-align: left;
}

#track-list.show-tracklist-numbers:not(.show-timestamps) .track-elem.disc .disc-number {
    grid-column: 2;
}

#track-list .track-elem.disc .disc-symbol {
    -webkit-mask-image: url("img/symbols/disc.png");
    -webkit-mask-size: contain;
    -webkit-mask-position: right;
    -webkit-mask-repeat: no-repeat;
    mask-image: url("img/symbols/disc.png");
    mask-size: contain;
    mask-position: center;
    mask-repeat: no-repeat;
    height: var(--font-size-base);
    width: var(--font-size-base);
    background-color: var(--color);
    transition: background-color var(--transition), width var(--transition), height var(--transition) !important;
}

#track-list.show-tracklist-numbers div:is(.track-number, .disc-symbol) {
    text-align: center;
    min-width: 3vmin;
}

#track-list:not(.show-tracklist-numbers) .track-number {
    display: none !important;
}

#track-list .track-elem .track-length {
    text-align: right;
    white-space: nowrap;
}

#track-list.right-align-titles .track-elem .track-name {
    text-align: right;
}

#track-list:not(.show-timestamps) .track-elem .track-length {
    display: none !important;
}

#content-center:not(.queue) #track-list.show-tracklist-numbers:not(.always-show-track-numbers-album-view) .track-artist {
    display: none !important;
}

#track-list .track-elem div:is(.track-artist, .track-name)  {
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#track-list.no-clamp .track-elem div:is(.track-artist, .track-name) {
    white-space: normal;
}

#track-list .track-elem div.track-name {
    font-family: var(--font-bold);
}

#track-list .track-elem div.track-length {
    margin-left: auto;
}

#track-list.strip .track-elem div.track-name span.extra {
    display: none;
}

#lyrics {
    cursor: pointer;
    white-space: pre-line;
    font-size: 2vmin;
    text-align: center;
    overflow-x: hidden;
    overflow-y: scroll;
    width: fit-content;
    max-width: 100%;
    max-height: 100%;
    scrollbar-width: thin;
    --scroller-gradient: linear-gradient(to bottom, transparent 0%, white var(--mask-padding), white calc(100% - var(--mask-padding)), transparent 100%);
    -webkit-mask-image: var(--scroller-gradient);
    mask-image: var(--scroller-gradient);
    padding: var(--mask-padding);
    --mask-padding: 2vmin;
}

#lyrics.xl {
    font-size: 3vmin;
}

#lyrics.dim {
    opacity: 0.65;
}

#lyrics.max-width {
    width: 100%;
    max-width: 100% !important;
}

#lyrics.hide, #lyrics:empty {
    display: none;
}


#context-main, #context-extra, #artists, #album-title, #title, #description, #device,
#content-center:not(.queue) #track-list .track-elem.current div {
    --max-lines: 3;
    display: -webkit-box;
    -webkit-line-clamp: var(--max-lines);
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: unset;
}


#info-symbols {
    display: flex;
    height: 3vmin;
    gap: 2vmin;
}

#info-symbols.hide {
    display: none;
}

#info-symbols div {
    opacity: 0.65;
    width: 3vmin;
    height: 100%;
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    background-color: var(--color);
    -webkit-mask-image: var(--url);
    mask-image: var(--url);
}

#info-symbols div:not(#play-pause, .show) {
    width: 0;
    opacity: 0;
    display: none;
}

#info-symbols #play-pause {
    --url: url("img/symbols/play.png");
}

#info-symbols #play-pause.paused {
    --url: url("img/symbols/pause.png");
    opacity: 1;
}

#info-symbols #shuffle {
    --url: url("img/symbols/shuffle-off.png");
}

#info-symbols #shuffle.on {
    --url: url("img/symbols/shuffle.png");
}

#info-symbols #repeat {
    --url: url("img/symbols/repeat-off.png");
}

#info-symbols #repeat.context {
    --url: url("img/symbols/repeat.png");
}

#info-symbols #repeat.track {
    --url: url("img/symbols/repeat-once.png");
}


#volume {
    --volume: 0%;
    font-size: 3vmin;
    opacity: 0.5;
    display: flex;
    flex-direction: column;
    gap: 0.5vmin;
}
#volume:empty, #volume.hide {
    display: none;
}
#volume.active {
    opacity: 1;
}
#volume-text {
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 1vmin;
}
#volume-text::before {
    content: "";
    -webkit-mask-image: url("img/symbols/volume.png");
    -webkit-mask-size: contain;
    -webkit-mask-position: right;
    -webkit-mask-repeat: no-repeat;
    mask-image: url("img/symbols/volume.png");
    mask-size: contain;
    mask-position: right;
    mask-repeat: no-repeat;
    height: 3vmin;
    width: 3vmin;
    opacity: 0.5;
    background-color: var(--color);
}

#volume-bar {
    position: relative;
    width: 100%;
    height: 0.3vmin;
}

#volume-bar.hide {
    display: none;
}

#volume-current, #volume-background {
    width: 100%;
    height: 100%;
    background: var(--color);
    position: absolute;
    border-radius: 0.5vmin;
}
#volume-current {
    width: var(--volume);
}
#main.transitions #volume-current {
    transition: background-color var(--transition), width var(--transition);
}
#volume-background {
    opacity: 0.25;
}

div#device {
    --max-lines: 1;
    opacity: 0.5;
    font-size: 2vmin;
    display: -webkit-box;
}
#device:empty, #device.hide {
    display: none;
}
#device.active {
    opacity: 1;
}
#device::before {
    content: "";
    -webkit-mask-image: url("img/symbols/curved-arrow.png");
    -webkit-mask-size: contain;
    -webkit-mask-position: right;
    -webkit-mask-repeat: no-repeat;
    mask-image: url("img/symbols/curved-arrow.png");
    mask-size: contain;
    mask-position: right;
    mask-repeat: no-repeat;
    opacity: 0.5;
    width: 2vmin;
    height: 2vmin;
    background-color: var(--color);
    display: inline-block;
    margin-right: 1vmin;
}

#progress {
    width: 100%;
    border-radius: 0.5vmin;
    height: 0.5vmin;
    max-height: 0.5vmin;
    min-height: 0.5vmin;
    position: relative;
    flex: 0 0 100%;
    overflow: hidden;
}

#progress.hide {
    display: none;
}

#progress-background {
    background-color: var(--color);
    width: 100%;
    height: 100%;
    position: absolute;
    opacity: 0.25;
}

#progress-current {
    --progress-percent: 0%;
    background: var(--color);
    width: var(--progress-percent);
    height: 100%;
    position: absolute;
    z-index: 1;
    border-radius: inherit;
}

#progress-current.gradient {
    background: linear-gradient(to right, transparent 0%, var(--color) 100%);
}

#bottom-meta-container {
    width: 100%;
    display: flex;
    gap: 4vmin;
    flex-direction: row;
    justify-content: space-between;
    max-height: 4vmin;
    position: relative;
    align-items: start;
}

#content-bottom.reverse #bottom-meta-container {
    align-items: end;
}

#bottom-meta-container.hide-timestamps :is(#timestamp-container, #time-current) {
    display: none;
}

#bottom-left {
    display: flex;
    flex: 1;
    text-align: left;
    gap: 4vmin;
    align-items: center;
    height: 100%;
}

#bottom-left.hide {
    display: none;
}

#bottom-right {
    display: flex;
    flex: 1;
    text-align: right;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    height: 100%;
    gap: 2.5vmin;
}

#content-bottom {
    display: flex;
    align-items: end;
    gap: 3vmin;
    flex-direction: column;
    justify-content: end;
    width: 100%;
    max-height: 6vmin;
}

#content-bottom.hide {
    display: none;
}

#content-bottom.reverse {
    flex-direction: column-reverse;
}

#time-current, #time-total {
    font-size: 4vmin;
    white-space: nowrap;
}

#time-current:empty, #time-total:empty {
    opacity: 0;
}

#next-track-info {
    text-align: center;
    font-weight: bold;
    opacity: 0.65;
    z-index: 1;
    font-size: 2vmin;
    width: fit-content;
    height: min-content;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: unset;
    --clock-symbol: "";
}

#next-track-info:not(.show) {
    display: none;
}

#next-track-info::before {
    content: "";
    -webkit-mask-image: url("img/symbols/next-song.png");
    -webkit-mask-size: contain;
    -webkit-mask-position: right;
    -webkit-mask-repeat: no-repeat;
    mask-image: url("img/symbols/next-song.png");
    mask-size: contain;
    mask-position: right;
    mask-repeat: no-repeat;
    opacity: 0.5;
    width: 2vmin;
    height: 2vmin;
    background-color: var(--color);
    display: inline-block;
    margin-right: 1vmin;
    vertical-align: -12%;
}

#timestamp-container {
    display: flex;
    text-align: right;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    height: 100%;
    gap: 2.5vmin;
}

#bottom-meta-container:not(.spread-timestamps) #timestamp-container #time-slash {
    background: var(--color);
    width: 0.5vmin;
    height: 100%;
    opacity: 0.5;
    transform: rotate(25deg);
    border-radius: 2vmin;
}


/***********/

#mouse-move-buttons {
    opacity: 0;
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: 3;
    transition: opacity var(--transition);
    pointer-events: none;
    display: flex;
    justify-content: center;
    align-items: center;
}
#mouse-move-buttons.show {
    opacity: 1;
}
#top-buttons.hide,
#mouse-move-buttons.settings-active > #playback-controller,
:is(body.dark-blur, #mouse-move-buttons.settings-active) #top-buttons > div:not(#settings-menu-toggle-button) {
    display: none;
}

#top-buttons {
    position: absolute;
    --offset: var(--margin-half);
    padding: 0 calc(var(--offset) / 2);
    top: calc(var(--offset) / 2);
    height: var(--offset);
    width: 100%;
    display: flex;
    justify-content: right;
    gap: 2vmin;
}

#top-buttons > #settings-menu-toggle-button {
    margin-right: auto;
}

#top-buttons  > div {
    --offset: var(--margin-half);
    width: var(--offset);
    height: var(--offset);
    background: var(--icon);
    background-size: contain;
    opacity: 0.5;
    cursor: pointer;
    transition: opacity var(--transition), transform var(--transition);
    pointer-events: all;
}
#top-buttons > div:hover {
    opacity: 1;
}

#top-buttons > #settings-menu-toggle-button {
    --icon: url("img/symbols/gear.png");
}
#top-buttons > #settings-menu-toggle-button:hover {
    transform: rotate(180deg);
    transition-duration: var(--transition);
}

#top-buttons > #lyrics-toggle-button {
    --icon: url("img/symbols/lyrics-off.png");
}
#top-buttons > #lyrics-toggle-button.enabled {
    --icon: url("img/symbols/lyrics-on.png");
}

#top-buttons > #nosleep-lock-button {
    --icon: url("img/symbols/lock-unlocked.png");
}
#top-buttons > #nosleep-lock-button.enabled {
    --icon: url("img/symbols/lock-locked.png");
}

#top-buttons > #fullscreen-toggle-button {
    --icon: url("img/symbols/fullscreen.png");
}


#playback-controller {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--margin-double);
    width: 100%;
    height: 100%;
    padding: var(--margin-double);
}
#playback-controller.hide {
    display: none;
}

#playback-controller > div {
    opacity: 0;
    width: 100%;
    height: 100%;
    pointer-events: all;
    transition: opacity var(--transition);
    background: #0004 var(--url) center no-repeat;
}

body.waiting-for-control #playback-controller {
    cursor: wait !important;
}

#mouse-move-buttons.show > #playback-controller > div:hover {
    opacity: 1;
    cursor: pointer;
}
body.waiting-for-control #mouse-move-buttons.show > #playback-controller > div:hover {
    cursor: wait !important;
}

#playback-controller > #button-play-pause {
    --url: url("img/symbols/pause.png");
}

#playback-controller > #button-play-pause.paused {
    --url: url("img/symbols/play.png");
}

#playback-controller > #button-prev {
    --url: url("img/symbols/prev.png");
}

#playback-controller > #button-next {
    --url: url("img/symbols/next.png");
}

/***********/

#settings-wrapper {
    color: white;
    --color: white;
    width: 100%;
    height: 100%;
    position: absolute;
    padding: var(--margin-settings);
    font-size: 3vmin;
    display: none;
    flex-direction: row;
    gap: 8vmin;
    pointer-events: none;
    --margin-settings: 8vmin;
}

#settings-wrapper, #settings-wrapper * {
    transition: opacity var(--transition);
}

#settings-wrapper.show {
    display: flex;
    pointer-events: auto;
}

#settings-wrapper::before {
    content: "Visual Preferences";
    position: absolute;
    left: 2vmin;
    top: 0;
    bottom: 0;
    text-align: center;
    opacity: 0.25;
    font-family: var(--font-bold);
    text-orientation: upright;
    -webkit-writing-mode: vertical-lr;
    writing-mode: vertical-lr;
    margin: auto 0;
}

#settings-main {
    flex: 1;
    display: flex;
    flex-direction: column;
}

#settings-scroller {
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
    flex: 1;
    --scroller-gradient: linear-gradient(to bottom, transparent 0%, white var(--mask-padding), white calc(100% - var(--mask-padding)), transparent 100%);
    -webkit-mask-image: var(--scroller-gradient);
    mask-image: var(--scroller-gradient);
    padding: var(--mask-padding);
    --mask-padding: 2vmin;
}

#settings-scroller > div::after {
    content: "";
    padding: 1px;
}

#settings-scroller > #settings-scroller-content {
    padding: var(--margin-settings);
}

#settings-wrapper.expert #settings-categories {
    display: flex;
}

#settings-wrapper.expert #settings-presets {
    display: none;
}

#settings-categories {
    --size: 2vmin;
    width: 100%;
    height: 100%;
    justify-content: space-between;
    flex-direction: column;
    font-size: var(--size);
    gap: var(--size);
    display: none;
}

#settings-quick-jump {
    display: none;
    flex-direction: row;
    gap: 1vmin;
    flex-wrap: wrap;
    justify-content: center;
    border-radius: 1vmin;
    padding: 1vmin 0;
    font-size: 2vmin;
}

#settings-quick-jump.show {
    display: flex;
}

#settings-quick-jump > div {
    background: #ffffff20;
    border-radius: 2vmin;
    padding: 0 1vmin;
    opacity: 0.5;
    cursor: pointer;
}

#settings-quick-jump > div:hover {
    opacity: 1;
}

#settings-categories .setting {
    width: min-content;
    opacity: 0.65;
    cursor: pointer;
    white-space: pre;
    overflow: hidden;
    max-width: 100%;
    display: flex;
    align-items: center;
}

#settings-categories .setting[class*='overridden-'] {
    opacity: 0.25 !important;
}

#settings-categories .setting:hover {
    opacity: 1;
}

#settings-categories .setting::before {
    content: "";
    background-image: url("img/symbols/checkbox-off.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-right: 1vmin;
    opacity: 0.5;
    width: var(--size);
    height: var(--size);
}

#settings-categories .setting.on::before {
    background-image: url("img/symbols/checkbox-on.png");
    opacity: 1;
}

#settings-categories .setting.unaffected::after {
    content: "";
    background-image: url("img/symbols/warning.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-left: 1vmin;
    opacity: 0.5;
    width: var(--size);
    height: var(--size);
}

#settings-categories .setting-category {
    background: #ffffff20;
    border-radius: 2vmin;
    padding: 1vmin 2vmin;
    display: flex;
    flex-direction: column;
    gap: 0.25vmin;
}

#settings-categories .setting-category-header {
    font-family: var(--font-bold);
    font-size: 2.5vmin;
    opacity: 0.65;
    cursor: pointer;
}

#settings-categories .setting-category-header:hover {
    opacity: 1;
}

#settings-categories .setting-category.collapse .setting-category-header::after {
    content: " \2026";
}

#settings-categories .setting-category.collapse > *:not(.setting-category-header) {
    display: none;
}

#settings-categories .setting-category.hide {
    visibility: hidden;
}

#settings-categories .setting-subcategory-header {
    opacity: 0.25;
    border-bottom: 0.2vmin solid var(--color);
    width: fit-content;
    margin-top: 1vmin;
    margin-bottom: 0.5vmin;
}

#settings-right {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    gap: var(--margin-settings);
    position: relative;
}

#settings-presets {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--margin-settings);
    height: 100%;
}

#settings-presets.hide {
    display: none;
}

#settings-presets > .preset {
    display: flex;
    opacity: 0.5;
    cursor: pointer;
    width: fit-content;
    height: fit-content;
}

#settings-presets > .preset > img {
    width: auto;
    height: auto;
    max-width: 100%;
    background: #ffffff40;
    background-size: contain;
    border-radius: 1vmin;
    border: 0.3vmin solid white;
}

#settings-presets > .preset:hover {
    opacity: 1;
}

#settings-description {
    width: 50%;
    height: 30%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-self: end;
    font-size: 2vmin;
    pointer-events: none;
    position: relative;
    flex: 2;
    text-align: center;
    overflow: visible;
    opacity: 0;
    gap: 2vmin;
    padding: 2vmin;
}

#settings-description.show {
    opacity: 1;
}

#settings-description > #settings-description-header {
    font-weight: bold;
    font-size: 4vmin;
    font-family: var(--font-bold);
}

#settings-description > #settings-description-description {
    white-space: pre-line;
}

#settings-description > :is(#settings-description-overridden, #settings-description-unaffected) {
    opacity: 0.5;
    font-size: 2vmin;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1vmin;
}

#settings-description > :is(#settings-description-overridden, #settings-description-unaffected):empty {
    display: none;
}

#settings-description > #settings-description-overridden::before {
    content: "Overridden by:";
}

#settings-description > #settings-description-unaffected::before {
    content: "";
    background-image: url("img/symbols/warning.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.5;
    width: 2vmin;
    height: 2vmin;
    display: inline-block;
}

#settings-top-buttons, #settings-bottom-buttons {
    display: flex;
    width: fit-content;
    gap: 0 calc(var(--margin-settings)/2);
    position: absolute;
    left: var(--margin-settings);
    font-family: var(--font-bold);
    z-index: 1;
}

#settings-top-buttons {
    top: 2vmin;
}

#settings-bottom-buttons {
    bottom: 2vmin;
}

:is(#settings-top-buttons, #settings-bottom-buttons) > * {
    opacity: 0.5;
    cursor: pointer;
    text-decoration: none;
}

:is(#settings-top-buttons, #settings-bottom-buttons) > *:hover {
    opacity: 1;
}

:is(#settings-external, #kofi-external)::before {
    content: "";
    background-image: url("img/symbols/curved-arrow.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-right: 1vmin;
    opacity: 0.5;
    width: 2vmin;
    height: 2vmin;
    display: inline-block;
    padding-right: 1vmin;
}
#kofi-external::before {
    background-image: url("img/symbols/kofi.png") !important;
}

#settings-external, #kofi-external {
    display: none;
}

#settings-wrapper.expert :is(#settings-external, #kofi-external) {
    display: initial;
}

#settings-expert-mode-toggle::before {
    content: "";
    background-image: url("img/symbols/checkbox-off.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-right: 1vmin;
    opacity: 0.5;
    width: 2vmin;
    height: 2vmin;
    display: inline-block;
}

#settings-wrapper.expert #settings-expert-mode-toggle::before {
    background-image: url("img/symbols/checkbox-on.png");
}

#settings-shutdown {
    -webkit-mask-image: url("img/symbols/power.png");
    mask-image: url("img/symbols/power.png");
    top: unset;
    bottom: calc(var(--offset) / 2);
    left: calc(var(--offset) / 2);
    opacity: 0.5;
    --offset: var(--margin-half);
    width: var(--offset);
    height: var(--offset);
    position: absolute;
    -webkit-mask-size: contain;
    -webkit-mask-position: right;
    -webkit-mask-repeat: no-repeat;
    mask-size: contain;
    mask-position: right;
    mask-repeat: no-repeat;
    background-color: white;
    z-index: 3;
    cursor: pointer;
    transition: opacity var(--transition);
}

#settings-shutdown:hover {
    opacity: 1;
}

#settings-reset::before {
    content: "";
    background-image: url("img/symbols/gear.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-right: 1vmin;
    opacity: 0.5;
    width: 2vmin;
    height: 2vmin;
    display: inline-block;
    padding-right: 1vmin;
}

#clock {
    text-align: center;
    font-weight: bold;
    opacity: 0.65;
    z-index: 1;
    font-size: 3vmin;
    width: fit-content;
    height: min-content;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: unset;
    --clock-symbol: "";
}

#clock.hide, #clock:empty {
    display: none;
}

#clock::before {
    content: var(--clock-symbol);
    opacity: 0.5;
    margin-right: 1vmin;
}

#main.preset-thumbnail-generator :is(
        #thumbnail-wrapper, #context-main, #context-extra, #logo,
        #artists, #title, #album-title, #album-release, #album-title-main, .track-elem *,
        #progress, #info-symbols, #volume, #device, #clock, #time-current, #time-total,
        #fake-artwork) {
    background: white !important;
    color: transparent !important;
    border-radius: 2vmin;
    --max-lines: 1;
    margin: 0.1vmin;
    transition: none !important;
    opacity: 1 !important;
    min-height: 1vmin;
}

#main.preset-thumbnail-generator #logo {
    border-radius: 50% !important;
    mask-image: unset;
}

#main.preset-thumbnail-generator :is(#background-rendered,
        #title *, #description, #release-year, #release-full,
        #thumbnail, #progress > div, #bottom-left > div > div) {
    visibility: hidden;
}

#main.preset-thumbnail-generator #fake-artwork {
    position: absolute;
}

#main.preset-thumbnail-generator #content {
    transform: scale(1.0);
    transform-origin: top left;
}

#preset-thumbnail-generator-canvas {
    display: none;
}

#preset-thumbnail-generator-canvas.show {
    display: initial;
}

@media only screen and (max-aspect-ratio: 3/2) {
    #settings-top-buttons {
        flex-direction: column;
    }

    #settings-wrapper {
        padding-left: 0;
        padding-right: 0;
        gap: 0;
    }

    #settings-wrapper::before {
        content: none;
    }

    #settings-external {
        bottom: 2vmin;
        left: var(--margin-settings);
        top: unset;
        right: unset;
    }

    #settings-scroller > div {
        flex-direction: column;
        width: 100%;
    }

    #settings-categories .setting-category {
        width: 100%;
    }

    #settings-description > #settings-description-header {
        font-size: 3vmin;
    }

    #settings-description > #settings-description-description {
        font-size: 2vmin;
    }
}