html{width:100vw;height:100%}body{font-family:var(--font-family-main);height:100%;margin:0 auto;line-height:1.5em;box-sizing:border-box;color:rgb(var(--main-color));background-color:rgb(var(--background-color))}#root{height:100%;max-width:100%}.page{height:100%;margin:auto;display:flex;flex-direction:column;align-items:center;background-color:rgb(var(--background-color))}@media (min-width: 725px){.page{justify-content:center}}.landingPageWrapper{width:100%;height:auto;display:flex;flex-direction:column;align-items:center;gap:24px;padding:24px;box-sizing:border-box}@media (min-width: 725px){.landingPageWrapper{gap:64px;padding:64px;max-width:64em}}.headerContentWrapper{display:flex;flex-direction:column;gap:24px;width:100%}.headerContent{width:100%;max-width:var(--inner-width);box-sizing:border-box}.headphoneWrapper{display:none}@media (min-width: 725px){.headerWrapper{width:100%;display:flex;position:relative}.headerContentWrapper{width:50%}.headphoneWrapper{display:block;width:35em;height:35em;position:absolute;right:-5em;top:-8em}.headphone{width:100%;height:100%}}.startButton{width:auto;height:auto;color:rgb(var(--color-white));background-color:rgba(var(--main-color));border-radius:90px;border:none;padding:8px 24px;display:flex;justify-content:center;align-items:center;gap:8px;box-sizing:border-box;cursor:pointer;position:relative}.startButton.resultPageStyle{width:100%;background-color:transparent;border:none;box-shadow:inset 0 0 0 2px rgba(var(--color-white));color:rgb(var(--color-white))}@media (min-width: 725px){.startButton{width:auto;color:rgba(var(--main-color));border:none;border-radius:1000px;position:relative;z-index:1}.mainPageStyle:after{content:"";position:absolute;height:107%;width:102%;border-radius:1000px;background-image:conic-gradient(from 90deg,#ff4d4d,#ffec1a,#29cc44,#39f,#e14dff,#ff4d4d);z-index:-1}}.boxWrapper{box-sizing:border-box;width:100%;display:flex;flex-direction:column;gap:32px}.descriptionBoxWrapper{display:flex;flex-direction:column;gap:24px;justify-content:center}.descriptionBox{width:100%;height:auto;display:flex;gap:24px;border-radius:12px;box-sizing:border-box}.counter{flex-shrink:0;flex-grow:0;background-color:rgba(var(--main-color),.15);border-radius:100%;height:32px;width:32px;display:flex;justify-content:center;align-items:center}@media (min-width: 725px){.descriptionBoxWrapper{flex-direction:row}.descriptionBox{flex-direction:column}}.resultHeader{border-radius:12px;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:24px;position:relative;overflow:hidden;width:100%;box-sizing:border-box}.blurryBackground{position:absolute;top:-20px;width:calc(100% + 40px);height:calc(100% + 40px);background-size:cover;background-position:center;filter:blur(10px);z-index:1;background-color:#33333380}.blurryBackground:before{content:"";position:absolute;width:100%;height:100%;background-color:#33333380}.resultHeaderContentWrapper{max-width:400px;width:100%;display:flex;flex-direction:column;justify-content:center;gap:24px;box-sizing:border-box;position:relative;z-index:1}.resultPlaylistContent{display:flex;flex-direction:column;align-items:center;gap:32px;width:100%}.resultPlaylistArtistImageWrapper{display:none}.resultPlaylistInnerContent{display:flex;flex-direction:column;gap:24px;width:100%}.actionButtons{width:100%;display:flex;flex-direction:column;align-items:center;gap:16px}@media (min-width: 725px){.resultHeader{padding:32px}.resultHeaderContentWrapper{max-width:800px;gap:32px}.resultPlaylistContent{flex-direction:row}.resultPlaylistArtistImageWrapper{flex-shrink:0;flex-grow:0;width:192px;height:192px;border-radius:8px;overflow:hidden;display:flex;align-items:center;justify-content:center}.actionButtons{flex-direction:row}}.buttonWrapper{width:100%}.connectWrapper{display:flex;justify-content:center;align-items:center;gap:8px}.SaveButton{width:100%;height:auto;background-color:rgb(var(--color-white));border-radius:90px;border:none;padding:8px 24px;display:flex;justify-content:center;align-items:center;gap:8px;box-sizing:border-box;cursor:pointer}.ConnectAndSaveButton{border:1px solid #1ed760;background-color:var(--color-green)}.buttonIconWrapper{width:24px;height:24px;display:flex;justify-content:center;align-items:center}.connectDescription{text-align:center}.disable{cursor:not-allowed}@media (min-width: 725px){.SaveButton,.buttonWrapper{width:auto}}.trackWrapper{list-style:none;max-width:800px;width:100%;padding:0 16px;margin:0;display:flex;flex-direction:column;gap:8px;box-sizing:border-box}.track{border-radius:12px;padding:8px 16px;display:flex;gap:16px;justify-content:space-between;align-items:center;background-color:rgb(var(--color-white),.3);box-sizing:border-box;cursor:pointer}.noTrack{cursor:not-allowed;background-color:rgb(var(--color-white),.3);opacity:.5}.audioIconWrapper{position:relative;display:flex;justify-content:center;align-items:center}.audioIcon{position:relative}.baseEllipseIcon,.loadingEllipseIcon,.progressCicle{position:absolute}.loadingEllipseIcon.hidden{display:none}.progressCicle.active{width:34px;height:34px;border-radius:50%;border:2px solid transparent;border-top-color:rgb(var(--main-color));animation:progressAnimation 29s linear forwards}@keyframes progressAnimation{0%{border-top-color:#f000;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent}25%{border-top-color:rgba(var(--main-color) 1);border-right-color:#f000;border-bottom-color:transparent;border-left-color:transparent}50%{border-top-color:rgba(var(--main-color) 1);border-right-color:rgba(var(--main-color) 1);border-bottom-color:#f000;border-left-color:transparent}75%{border-top-color:rgba(var(--main-color) 1);border-right-color:rgba(var(--main-color) 1);border-bottom-color:rgba(var(--main-color) 1);border-left-color:#f000}to{border-top-color:rgba(var(--main-color) 1);border-right-color:rgba(var(--main-color) 1);border-bottom-color:rgba(var(--main-color) 1);border-left-color:rgba(var(--main-color) 1)}}@media (min-width: 725px){.resultPageWrapper{gap:24px;padding:64px}}.searchBarWrapper{display:flex;align-items:center;width:100%;height:100%;position:relative}.searchIcon{position:absolute;top:50%;transform:translateY(-50%);padding-left:.5em}.searchBar{flex-grow:1;border:none;cursor:pointer;margin:0;height:3em;padding:.5em .75em .5em 3.5em;box-sizing:border-box;border-radius:3.125em;background-color:var(--background-color);box-shadow:inset 0 0 0 2px #243033}.artistImageWrapper{width:32px;height:32px;border-radius:100%;overflow:hidden}.artistImage{max-height:100%;object-fit:contain;object-position:center}@media (max-width: 890px){.searchBar{width:100%}}.generatePageWrapper{width:100%}.contentFieldWrapper{display:flex;flex-direction:column;gap:24px;box-sizing:border-box;width:100%}.contentList{width:100%;display:flex;flex-direction:column;justify-content:center;gap:8px;padding:0;margin:0;list-style:none;box-sizing:border-box}.contentField{width:100%;display:flex;align-items:center;gap:16px;box-sizing:border-box;cursor:pointer}.contentListItem{list-style:none;padding:20px 16px}.contentText{flex-grow:1}.emojiWrapper{display:flex;align-items:center;justify-content:center;background-color:#2e474d26}.loadingImage{animation:rotation 1.3s infinite linear}@keyframes rotation{0%{-webkit-transform:rotate(0deg)}to{-webkit-transform:rotate(359deg)}}@media (max-width: 890px){.overlay-content{width:calc(100% - 30px)}}@font-face{font-family:Montserrat;font-style:normal;font-weight:400;font-display:swap;src:url(/assets/Montserrat-Regular-BQsUpcHj.ttf) format("truetype")}@font-face{font-family:Montserrat;font-style:normal;font-weight:500;font-display:swap;src:url(/assets/Montserrat-Medium-DZ4qtIu-.ttf) format("truetype")}@font-face{font-family:Montserrat;font-style:normal;font-weight:600;font-display:swap;src:url(/assets/Montserrat-SemiBold-B-lLb63I.ttf) format("truetype")}@font-face{font-family:Montserrat;font-style:normal;font-weight:800;font-display:swap;src:url(/assets/Montserrat-ExtraBold-n0CIQdUk.ttf) format("truetype")}:root{--background-color: 205, 209, 206;--main-color: 36, 48, 51;--color-black: 0, 0, 0;--color-white: 255, 255, 255;--font-size-xsmall: 12px;--font-size-small: 16px;--font-size-button: 18px;--font-size-medium: 20px;--font-size-large: 24px;--font-size-xlarge: 32px;--font-size-xxlarge: 48px;--font-weight-regular: 400;--font-weight-medium: 500;--font-weight-semiBold: 600;--font-weight-bold: 700;--font-weight-extraBold: 800;--font-family-main: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";--inner-width: 50em}.neutralLink{color:rgb(var(--color-black));text-decoration:none}.blackFont{color:rgb(var(--color-black))}.whiteFont{color:rgb(var(--color-white))}.pageTitle{font-size:var(--font-size-xlarge);font-weight:var(--font-weight-extraBold);line-height:1.25em;margin:0}.headline{font-size:var(--font-size-large);font-weight:var(--font-weight-medium);line-height:1.5em;margin:0}.headlineThin{font-size:var(--font-size-xlarge);font-weight:var(--font-weight-regular);line-height:1.5em;margin:0}.subHeadline{font-size:var(--font-size-medium);font-weight:var(--font-weight-medium);line-height:1.6em;margin:0}.bodyText{font-size:var(--font-size-small);font-weight:var(--font-weight-medium);line-height:1.5em;letter-spacing:.1em;text-transform:uppercase;margin:0}.caption{font-size:var(--font-size-xsmall);font-weight:var(--font-weight-semiBold);line-height:2em;letter-spacing:.05em;margin:0}.buttonFont{font-size:var(--font-size-button);font-weight:var(--font-weight-semiBold);line-height:1.75em;margin:0}.numberFont{font-size:var(--font-size-small);font-weight:var(--font-weight-bold);line-height:1.5em;margin:0}@media (min-width: 725px){.pageTitle{font-size:var(--font-size-xxlarge)}}
