body,h1,p{margin:0;padding:0;font-family:Verdana,Geneva,Tahoma,sans-serif}.Landing p{font-size:24px}.Landing::-webkit-scrollbar-track{background-color:var(--app-background-color)}.Landing a{font-family:Verdana,Geneva,Tahoma,sans-serif;font-size:16px}.header{display:flex;position:sticky;top:0;z-index:99;box-shadow:0 10px 20px #0e0d15e6;align-items:center;justify-content:space-between;background-color:#0e0d15;height:5vh;padding:20px}.Landing .app-name{color:#fff;font-family:Roboto;font-size:36px}.Landing .blurb{color:#a0a0a0;font-size:14px}.Landing{display:flex;flex-direction:column;height:100%;width:100%;overflow-y:overlay}.cta-container{display:flex;flex-direction:column;width:100%;align-items:center;justify-content:center;padding:35px 0;background-color:#16131d;color:#fff}.cta-container .main-content{display:flex;align-items:center;justify-content:center;opacity:0;transform:translateY(50px);animation:slide-in 1s ease forwards}.Landing .title{text-align:center;font-size:64px;line-height:1.2;font-family:Roboto}.Landing .title div:first-child,.title div:last-child{font-size:82px}.music{color:#fca18e;margin-bottom:-8px}.for-your{font-weight:100;letter-spacing:3px}.mood{color:#8efca1;letter-spacing:1px}.app-screenshot{display:flex;flex-shrink:1;min-width:0px;width:100%;height:auto;max-width:600px;margin-left:20px;padding:20px;opacity:0;animation:slide-in 1s ease forwards;animation-delay:.5s}.header-right{display:flex;flex-direction:row;gap:22.5px}.spotify-logo{display:flex;min-width:0px;max-width:150px;height:auto}.spotify-logo:hover{cursor:pointer;transform:scale(1.02)}.cta-container .description{text-align:center;margin-bottom:40px;line-height:1.5;opacity:0;animation:slide-in 1s ease forwards;animation-delay:1s}.Landing a{text-align:center;margin-top:10px;line-height:1.5;opacity:0;animation:fade-in 1s ease forwards,slide-in 1s ease forwards;animation-delay:1s}a:hover{text-decoration:underline;cursor:pointer}.Landing .get-started-btn{display:flex;min-width:0px;width:100%;height:auto;flex-shrink:1;padding:.75em 1em;font-size:24px;border-radius:5px;background-color:#a18efc;color:#fff;border:none;cursor:pointer;opacity:0;animation:fade-in 1s ease forwards,slide-in 1s ease forwards;animation-delay:1s}.Landing .button-container{display:flex;flex-direction:column}.Landing .get-started-btn:hover{box-shadow:0 0 20px #7f70c9;transform:scale(1.01);transition:scale .1s ease-in-out;animation-delay:1s}.Landing .get-started-btn:hover:active{background-color:#7b6cc5}.youtube-section{display:flex;flex-direction:column;width:100%;justify-content:center;align-items:center;background-color:#1a1720;padding:35px 0;color:#fff}.youtube-section .video-description{margin-bottom:30px}.youtube-section .video-header,.youtube-section .video-description,.youtube-section iframe{opacity:0;transform:translateY(50px);animation:slide-in 1s ease forwards;animation-delay:1.5s}.youtube-section iframe{display:flex;flex-grow:2;flex-shrink:1;min-width:0px;width:750px;height:450px;max-width:800px;border:none;box-shadow:0 0 10px #0000004d;margin:30px 0}.Landing .reveal{opacity:0;transform:translateY(50px);animation:slide-in 1s ease forwards;animation-delay:1.5s}@keyframes slide-in{0%{opacity:0;transform:translateY(50px)}to{opacity:1;transform:translateY(0)}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@media only screen and (max-width: 600px){.title{font-size:28px}.music,.mood{font-size:36px}.app-screenshot{width:200px;margin-left:10px}.description p{font-size:16px}.get-started-btn{font-size:14px;width:100px;height:30px}}:root{--accent-grey: #2d273b;--beats-per-minute: 122;--loading-animation-duration: calc(4 * 60 / var(--beats-per-minute) * 1s);--accent-peach: #FCA18E;--accent-green: #8EFCA1;--accent-lavender: #A18EFC;--quarter-note-duration: calc(var(--loading-animation-duration) / 4);--on-beat: calc(var(--loading-animation-duration) / 4);--off-beat: calc(2 * var(--loading-animation-duration) / 4)}#loading{display:inline-block;width:50px;height:50px;border:5px solid rgba(255,255,255,.3);border-radius:50%;border-top-color:var(--accent-grey);animation:spin calc(var(--loading-animation-duration)) ease-in-out infinite,dancepad var(--loading-animation-duration) ease-in-out infinite}.Loading{display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;top:0;bottom:0;left:0;right:0;z-index:10;position:absolute}.Loading .text-container{text-align:center;margin-bottom:45px;text-align:left;font-size:24px;line-height:1.2}.loadingContainer div{height:20px;width:20px;border-radius:50%;background:var(--accent-grey);float:left;margin:0 3px}.loadingContainer .ball1{z-index:1;animation:bounce calc(var(--loading-animation-duration)) steps(1,end) infinite,dancepad var(--loading-animation-duration) var(--on-beat) steps(1,end) infinite}.loadingContainer .ball2{animation:bounce calc(var(--loading-animation-duration)) .2s steps(1,end) infinite,dancepad var(--loading-animation-duration) var(--on-beat) steps(1,end) infinite}.loadingContainer .ball3{animation:bounce calc(var(--loading-animation-duration)) .4s steps(1,end) infinite,dancepad var(--loading-animation-duration) var(--on-beat) steps(1,end) infinite}.loadingContainer .ball4{animation:bounce calc(var(--loading-animation-duration)) .6s steps(1,end) infinite,dancepad var(--loading-animation-duration) var(--on-beat) steps(1,end) infinite}@keyframes spin{to{-webkit-transform:rotate(360deg)}}@keyframes bounce{0%,25% {transform: translate(0,0); background-color: var(--accent-grey);} 25%,50% {background-color: var(--accent-lavender);} 50%,75% {transform: translate(0,-30px); background-color: var(--accent-peach);}; 75%,100% {background-color: var(--accent-green);}}.Meter{display:flex;flex-direction:column;width:100%;margin:var(--tile-margin);padding:10px 0;border-radius:3px;align-items:center;background-color:var(--accent-grey)}.Meter .Value{font-size:1.5em}:root{--thumb-size: calc(12px + 2 * var(--slider-border));--slider-border: 3px;--tile-margin: 5px}.RangeSlider{position:relative;display:flex;align-items:center;margin:0px calc(var(--thumb-size));margin-top:calc(-1 * (var(--thumb-size)) / 2);height:var(--thumb-size)}.RangeSlider:not(:focus-within) .control,.RangeSlider:not(:focus-within) .inner-rail{transition:left 1s ease-in-out,right 1s ease-in-out}.RangeSlider .sliders-wrapper{width:calc(100% + var(--thumb-size));margin:0 calc(var(--thumb-size) / -2);position:absolute;height:var(--thumb-size)}.RangeSlider .control-wrapper{width:100%;position:absolute;height:var(--thumb-size)}.RangeSlider input{position:absolute;width:100%;pointer-events:none;height:100%;opacity:0;z-index:3;padding:0}.RangeSlider input:focus::-webkit-slider-runnable-track{appearance:none;background:transparent;border:transparent}.RangeSlider input::-webkit-slider-thumb{appearance:none;pointer-events:all;width:var(--thumb-size);height:var(--thumb-size);border-radius:0;border:0 none;cursor:grab}.RangeSlider input::-webkit-slider-thumb:active{cursor:grabbing}.RangeSlider .rail{position:absolute;width:100%;top:50%;transform:translateY(-50%);height:6px;border-radius:3px;border:var(--slider-border) solid var(--app-background-color);background:lightgrey}.RangeSlider .inner-rail{position:absolute;height:100%;opacity:.5}.RangeSlider .control{width:calc(var(--thumb-size) - 2 * var(--slider-border));height:calc(var(--thumb-size) - 2 * var(--slider-border));border-radius:50%;border:var(--slider-border) solid var(--app-background-color);position:absolute;top:50%;margin-left:calc(var(--thumb-size) / -2);transform:translate3d(0,-50%,0);z-index:2}.MetricAssessment{display:flex;flex-direction:column}.MetricAssessment .charts{display:flex;flex-direction:row;max-height:350px;gap:calc(2 * var(--tile-margin));padding:0 var(--tile-margin);margin-bottom:var(--tile-margin)}.MetricAssessment .histogram-filter{display:flex;flex-direction:column;flex:1 1 200px;overflow:hidden}.MetricAssessment .chart-wrapper{display:flex;flex-grow:1;margin:0px calc(.5 * var(--thumb-size) + 2 * var(--slider-border));overflow:hidden}.MetricAssessment .metrics{display:flex;flex-direction:column}.MetricAssessment .playlist-stats{display:flex}.CreatePlaylist{display:flex;flex-direction:column}.CreatePlaylist h1{font-weight:400;font-size:2em;margin-top:0;margin-bottom:10px}.CreatePlaylist .submission-window{display:flex;flex-direction:column;align-self:center;padding:20px;border-radius:10px;box-shadow:0 10px 20px #1c1c1c80;background-color:var(--app-background-color);z-index:10}.CreatePlaylist .add-playlist-form{display:flex;flex-direction:column;flex:1 0 0}.CreatePlaylist .add-playlist-form form{display:flex;flex-direction:column;gap:calc(2 * var(--tile-margin))}.CreatePlaylist .add-playlist-form form>*{display:flex;align-items:center;flex-grow:1;flex-shrink:0}.CreatePlaylist label{flex-shrink:0;width:100px}.CreatePlaylist input,.CreatePlaylist textarea{display:flex;font-family:inherit;margin:5px 0;padding:3px;border:none;border-radius:3px}.CreatePlaylist input:not([type=checkbox]),.CreatePlaylist textarea{flex-grow:1;width:225px}.CreatePlaylist textarea{height:3.5em}.CreatePlaylist .submission-form-wrapper{display:flex;flex-direction:column;justify-content:space-between;flex-grow:1}.CreatePlaylist .submission-form-tracks-preview{display:flex;flex-direction:column}.CreatePlaylist .overlay-background{display:flex;background-color:#000c;justify-content:center;top:0;bottom:0;left:0;right:0;z-index:10;position:absolute}.CreatePlaylist .submission-form-wrapper .buttons-wrapper{display:flex;justify-content:center;gap:10px;margin-top:20px;bottom:5px}.CreatePlaylist .buttons-wrapper button{font-family:Verdana,Geneva,Tahoma,sans-serif;color:#fff;font-size:110%;background-color:#8efca1;box-shadow:0 0 12px #8efca0a7;width:120px;height:40px;border:solid #6D6D6D 1px;border-radius:5px}.CreatePlaylist .buttons-wrapper .reset-button{background-color:#d86161;box-shadow:0 0 20px #d861611c}.CreatePlaylist .buttons-wrapper button:hover{transform:scale(1.02);transition:all .1s ease-in-out}.TrackItem{display:flex;align-items:center;justify-content:space-between;max-width:450px;animation:2s ease-in-out;transition:transform .2s ease-in-out,opacity .2s ease-in-out}.TrackItem .track-info-wrapper{display:flex;flex:1 1 auto;align-items:center}.TrackItem .track-info-wrapper .text-container{flex:1 1 auto}.TrackItem .track-info-wrapper .track-image{display:flex;flex:0 0 60px;align-items:center;height:60px;width:60px;background-size:cover;background-position:center;background-repeat:no-repeat;margin:3px;padding:5px}.TrackItem .track-info-wrapper .track-name a{display:flex;flex:1 1 auto;align-self:center;font-size:1em;margin-left:16px;text-align:left}.TrackItem .track-info-wrapper .track-name:hover,.TrackItem .track-info-wrapper .track-artists span:hover,.TrackItem .track-info-wrapper .button-wrapper:hover{text-decoration:underline;cursor:pointer}.TrackItem .track-info-wrapper .track-image:hover,.TrackItem .track-info-wrapper .spotify-icon:hover{cursor:pointer}.TrackItem .track-artists{display:flex}.TrackItem .track-artists .button{display:flex;flex:1 0 50px;height:50px;width:50px;padding:0;background-repeat:no-repeat;background-size:30px;background-position:center;border:none;background-color:#0000;transition:opacity .2s ease-in-out}.TrackItem .track-info-wrapper .track-artists span{display:flex;flex:1 0 20%;align-self:center;font-size:.9em;margin-left:16px;font-family:Tahoma;color:#c6c6c6;text-align:left}.TrackItem .button-wrapper{display:flex;align-items:center;margin:10.5px;gap:10.5px;opacity:0;transition:opacity .2s ease-in-out}.TrackItem:hover .button-wrapper{opacity:100}.TrackItem .add{background-image:url(/plus.svg)}.TrackItem .spotify-icon{background:url(/Spotify_Icon_RGB_Green.png);border:0px;background-size:contain;width:21px;height:21px}.TrackItem .TrackAudioMetrics .Meter{width:125px}.TrackItem.selected .TrackItem:not(.selected){opacity:50%}.TrackItem:hover{box-shadow:0 14px 31px #0a001433;filter:opacity(90%);transform:translate(10px)}.PlaylistBuilder{display:flex;flex-direction:column;height:100%;width:100%;padding:5px 5px 0;overflow:hidden}.PlaylistBuilder .new-playlist-info,.PlaylistBuilder .source-playlist-info,.PlaylistBuilder .submission-form-tracks-preview{display:flex;flex:1 1 512px;overflow-y:scroll;overflow-x:hidden}.PlaylistBuilder .playlist-header{font-size:24px;margin-bottom:10px}.PlaylistBuilder .playlists-window{display:flex;justify-content:space-between;height:90%;width:100%}.PlaylistBuilder .playlist-tiles-wrapper{display:flex;flex-direction:column;flex:1}.PlaylistBuilder .new-playlist-info .new-playlist{align-items:flex-end}.PlaylistBuilder .filters-wrapper{display:flex;width:618px;position:absolute}.PlaylistBuilder .track-tiles{border:5px solid black}.PlaylistBuilder .buttons-wrapper{display:flex;justify-content:center;gap:15px;position:sticky;bottom:5px}.PlaylistBuilder .buttons-wrapper button{color:var(--app-background-color);font-size:110%;background-color:#8efca1;box-shadow:0 0 20px #1ed76033;width:120px;height:40px;border:solid #6D6D6D 1px;border-radius:5px}.PlaylistBuilder .buttons-wrapper button:nth-child(2){background-color:#fca18e;box-shadow:0 0 20px #d8616133}.PlaylistBuilder .buttons-wrapper button:nth-child(2):hover{box-shadow:0 0 20px #fca08e79;transform:scale(1.02);transition:all .1s ease-in-out}.PlaylistBuilder .add-playlist-button:hover{box-shadow:0 0 20px #8efca0a7;transform:scale(1.02);transition:all .1s ease-in-out}.PlaylistDetailsPane{display:flex;flex-direction:column;flex-grow:1;min-width:0px;padding-left:30px;padding-right:30px}.PlaylistDetailsPane .mood-selector-wrapper{display:flex;flex-direction:column;flex:1 1 150px;align-items:center;flex-wrap:wrap}.PlaylistDetailsPane .mood-selector-text-wrapper{display:flex;flex-direction:column;justify-content:center;align-items:center;margin-bottom:10px}.PlaylistDetailsPane .mood-selector-text{font-size:24px}.PlaylistDetailsPane .mood-selector-subtext{font-size:14px;opacity:.8;margin-top:15px}.PlaylistDetailsPane .metrics-and-playlist-wrapper{display:flex}.MoodSelector{display:flex;align-items:center;justify-content:center;gap:calc(4 * var(--tile-margin));margin-bottom:5px}.MoodPresetButton{display:flex;flex-direction:column;align-items:center;width:100px;height:100px;background-color:var(--accent-grey);border-radius:5px;padding:15px}.MoodPresetButton:hover{transform:scale(1.02);background-color:#373146ce;transition:all .1s ease-in-out}.MoodPresetButton .mood-icon{font-size:2em;text-align:center}.MoodPresetButton .mood-name{display:flex;flex-grow:1;height:2em;align-items:center;text-align:center;font-size:14px;margin-top:5px}:root{--accent-grey: #2d273b;--beats-per-minute: 122;--loading-animation-duration: calc(4 * 60 / var(--beats-per-minute) * 1s);--accent-peach: #FCA18E;--accent-green: #8EFCA1;--accent-lavender: #A18EFC;--quarter-note-duration: calc(var(--loading-animation-duration) / 4);--on-beat: calc(var(--loading-animation-duration) / 4);--off-beat: calc(2 * var(--loading-animation-duration) / 4) }.PlaylistItem.loading{gap:5px;pointer-events:none}.PlaylistItem.loading .PlaylistImage{background-color:var(--accent-grey)}.PlaylistItem.loading .PlaylistName{background-color:var(--accent-grey);margin:0;border-radius:3px;flex:1 0 0;height:1em}@keyframes dancepad{0%{background-color:var(--accent-grey)}25%{background-color:var(--accent-grey)}25%{background-color:var(--accent-green)}50%{background-color:var(--accent-green)}50%{background-color:var(--accent-lavender)}75%{background-color:var(--accent-lavender)}75%{background-color:var(--accent-peach)}to{background-color:var(--accent-grey)}}@keyframes carl{0%{background-color:var(--accent-grey)}12.5%{background-color:var(--accent-lavender)}25%{background-color:var(--accent-green)}37.5%{background-color:var(--accent-lavender)}50%{background-color:var(--accent-grey)}62.5%{background-color:var(--accent-lavender)}75%{background-color:var(--accent-green)}82.5%{background-color:var(--accent-lavender)}to{background-color:var(--accent-grey)}}.PlaylistItem{display:flex;flex:0 0 60px;margin:1.5px;overflow:hidden;border-radius:3px;animation:cascade-in .3s ease-out forwards}.PlaylistItem .PlaylistImage{height:100%;aspect-ratio:1;border-radius:3px;background-size:contain;background-position:center;background-repeat:no-repeat}.PlaylistItem .PlaylistName{display:flex;align-self:center;max-height:100%;font-size:1em;margin-left:20px;margin-right:20px;text-align:left}.PlaylistItem.Selected{background-image:linear-gradient(to right,#373146ce,var(--app-background-color) 70%)}.PlaylistPane.Selected .PlaylistItem:not(.Selected){opacity:75%}.PlaylistItem:hover{z-index:1;box-shadow:0 14px 31px #0a001433;background:linear-gradient(to right,#373146ce,var(--app-background-color) 70%);transform:translate(10px)}.PlaylistItem{position:relative;background:linear-gradient(to right,var(--app-background-color),var(--app-background-color) 70%);z-index:1}.PlaylistItem:before{content:"";position:absolute;top:0;left:0;border-radius:10px;width:100%;height:100%;background:linear-gradient(to right,#373146ce,var(--app-background-color) 70%);opacity:0;transition:opacity .4s ease-in-out;z-index:-1}.PlaylistItem:hover:before{opacity:1;border-radius:10px}@keyframes cascade-in{0%{transform:translateY(-50%);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes shift-on-hover{to{transform:translate(10px)}}.PlaylistPane{display:flex;flex-direction:column;flex-shrink:0;height:100%;min-width:225px;max-width:260px;overflow-x:hidden;overflow-y:auto;gap:0px;justify-content:flex-start}.PlaylistPane .text-container{display:flex;flex-direction:column;align-items:center;justify-content:center;white-space:pre-wrap;font-size:24px;line-height:1em;margin-bottom:10px}.PlaylistPane .tiny-text{font-size:14px;opacity:.8}.PlaylistPane .playlists-wrapper{display:contents}.PlaylistPane .playlists-wrapper>*{transition:margin-bottom .3s ease-in-out}.PlaylistPane .selected-playlists>*:last-child{margin-bottom:30px}.PlaylistPane:first-child{text-align:center}::-webkit-scrollbar{width:15px}::-webkit-scrollbar-track{background-color:transparent}::-webkit-scrollbar-thumb{background-color:#34303b;border:3px solid transparent;border-radius:20px;background-clip:content-box}::-webkit-scrollbar-thumb:hover{background-color:#99a5b5}:root{--app-background-color: #16131d}input,textarea,button,span{font-family:Verdana,Geneva,Tahoma,sans-serif;color:#fff}body{margin:0;height:100vh;width:100vw}body::-webkit-scrollbar-track{background-color:var(--app-background-color)}#root{height:100vh;width:100vw}.Dancify{display:flex;flex-direction:row;flex:1 1 0;height:100vh;width:100vw;padding:40px;box-sizing:border-box;color:#fff;background-color:var(--app-background-color)}.Dancify .Panes{display:flex}