:root{font-family:"Jersey 25",Inter,Helvetica,sans-serif,system-ui;--button-font-family: Inter, Helvetica, sans-serif, system-ui;--fs-sm: .95rem;--fs-base: 1.1rem;--fs-lg: 1.25rem;--bg-image-src-light: url(/assets/palms-dith-JIHPgANk.jpg);--bg-image-src-dark: url(/assets/city-dith-D08rLzJD.jpg);--bg-image-pos-light: center 54%;--bg-image-pos-dark: center 65%;--color-white-100: #fdfdfd;--color-white-200: #eaeaea;--color-white-300: #dfdfdf;--color-grey-100: #cbcbcb;--color-grey-200: #afafaf;--color-grey-300: #7c7c80;--color-grey-400: #313136;--color-screen-text: #4a4a4a;--size-player-width: 18em;--spacing-slider-height: .5em;--player-inset-shadow-light: inset .5px -.5px 14px -4px var(--color-grey-400);--player-inset-shadow-dark: inset .5px -.5px 18px -3px black;--control-button-shadow-light: 0 0 4px rgba(0, 0, 0, .4);--control-button-shadow-dark: 0 0 4px rgba(0, 0, 0, .3);--bg-image-src: var(--bg-image-src-light);--bg-image-pos: var(--bg-image-pos-light);--color-player-start: var(--color-white-200);--color-player-end: var(--color-white-100);--color-screen-start: var(--color-grey-100);--color-screen-end: var(--color-white-300);--color-icon: var(--color-white-100);--color-icon-hover: color-mix(in srgb, var(--color-icon), white 10%);--color-border: var(--color-grey-200);--player-inset-shadow: var(--player-inset-shadow-light);--control-button-shadow: var(--control-button-shadow-light)}[data-theme=fm-night]{--bg-image-src: var(--bg-image-src-dark);--bg-image-pos: var(--bg-image-pos-dark);--color-player-start: var(--color-grey-400);--color-player-end: var(--color-grey-300);--color-screen-start: var(--color-grey-100);--color-screen-end: var(--color-white-100);--color-icon: var(--color-grey-300);--color-icon-hover: color-mix(in srgb, var(--color-icon), black 15%);--color-border: var(--color-grey-400);--player-inset-shadow: var(--player-inset-shadow-dark);--control-button-shadow: var(--control-button-shadow-dark)}*,*:before,*:after{box-sizing:border-box}*{margin:0;font:inherit}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none}ol,ul{list-style:none;padding:0}img{display:block;max-width:100%}button{border:none;color:inherit;background-color:inherit;padding:0}button:hover{cursor:inherit}svg.symbols{display:none}input[type=range]{-moz-appearance:none;appearance:none;-webkit-appearance:none;overflow:hidden;border:1px solid var(--color-grey-400);border-radius:var(--spacing-slider-height);background-color:transparent;width:100%;height:var(--spacing-slider-height)}input[type=range]:hover{cursor:pointer}input[type=range]::-webkit-slider-runnable-track{-webkit-appearance:none;height:var(--spacing-slider-height)}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;box-shadow:-200px 0 0 200px var(--color-grey-400);cursor:pointer;height:var(--spacing-slider-height);width:0px;border:0}input[type=range]::-moz-range-thumb{box-shadow:-200px 0 0 200px var(--color-grey-400);cursor:pointer;height:var(--spacing-slider-height);width:0px;border:0}main{height:100vh;width:100%;display:flex;flex-direction:column;background-image:var(--bg-image-src);background-position:var(--bg-image-pos);background-size:cover;font-size:var(--fs-base)}.container{margin:auto;border-radius:1em;box-shadow:0 0 .25em #000}.player{width:var(--size-player-width);height:calc(1.67 * var(--size-player-width));border-radius:inherit;box-shadow:var(--player-inset-shadow);display:flex;flex-direction:column;justify-content:space-between;align-items:center;padding-inline:2.4em;padding-top:1.75em;background:linear-gradient(45deg,var(--color-player-start),var(--color-player-end))}.screen{line-height:105%;letter-spacing:4%;font-weight:700;width:100%;aspect-ratio:10 / 7.2;border-radius:.4em;border:1px solid var(--color-border);padding:.4em;color:var(--color-screen-text);background:linear-gradient(45deg,var(--color-screen-start),var(--color-screen-end));box-shadow:inset 0 0 .5em -.1em #000}.screen-header{position:relative;width:100%;height:1.35em;border-bottom:1px solid var(--color-screen-text)}.screen-header .icon{width:1.5em;height:1.35em;padding-bottom:.125em;fill:var(--color-screen-text)}.screen-header-playpause{position:absolute;left:.375em}.screen-header-battery{position:absolute;right:.25em}.screen-header-text{position:absolute;left:0;right:0;bottom:.125em;margin-inline:auto;width:max-content}.screen-display{padding-inline:.25em;display:flex;flex-direction:column;justify-content:space-between}.song-number{font-size:.875em}.song-data{margin-block:.4em;display:flex;flex-direction:column;width:100%}.song-data-field{height:1.5em;text-align:center;overflow-x:scroll;white-space:nowrap}.song-slider{width:100%}.song-time{width:100%;height:1em;font-size:.875em;display:flex;flex-direction:row;justify-content:space-between}.song-time .icon{height:100%;width:1em;fill:var(--color-screen-text);margin-top:.125em}.playlist-list{padding-top:.25em}.playlist>button{width:100%;text-align:left;padding:.125em}.playlist:hover{cursor:pointer;background-color:var(--color-screen-text);color:var(--color-screen-start)}.control-wheel{font-family:var(--button-font-family);position:relative;width:100%;aspect-ratio:1 / 1;margin-block:auto}.outer-wheel{display:flex;width:100%;height:100%;border:solid .5px var(--color-border);box-shadow:0 0 .2em -.05em #000;border-radius:50%;background:linear-gradient(45deg,var(--color-screen-start),var(--color-screen-end));overflow:hidden}.inner-wheel{width:38%;height:38%;margin:auto;border:solid .5px var(--color-border);box-shadow:0 0 .2em -.05em #0006;border-radius:50%;background:linear-gradient(45deg,var(--color-player-start),var(--color-player-end));transition:all .1s linear}.inner-wheel>button{width:100%;height:100%}.inner-wheel:hover{cursor:pointer;box-shadow:0 0 .5em -.1em #0009}.control-button{position:absolute;width:4.75em;height:4.75em;display:flex;align-items:center;padding:5%;font-size:.875em;color:var(--color-icon);font-weight:700;transition:all .1s linear}.control-button:hover{cursor:pointer;color:var(--color-icon-hover);filter:drop-shadow(var(--control-button-shadow))}.control-button:hover .icon{fill:var(--color-icon-hover)}.control-button.menu{top:0;justify-content:start}.control-button.menu>span{padding-top:.1em}.control-button.play{bottom:0;justify-content:end}.control-button.menu,.control-button.play{left:0;right:0;margin-inline:auto;flex-direction:column}.control-button.prev{left:0;justify-content:start}.control-button.next{right:0;justify-content:end}.control-button.next,.control-button.prev{top:0;bottom:0;margin-block:auto;flex-direction:row}.control-button>.icon{position:absolute;width:1.5em;height:1.5em;fill:var(--color-icon)}.icon.seek-back{transform:scaleX(-1)}.testbtn{border:none;background-color:transparent;color:#fff}