body{margin:0;padding:0}.viewer-container{margin:0;display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:100dvh;background-color:#121212;gap:32px;padding:2rem;box-sizing:border-box}.card-wrapper{perspective:1000px;display:flex;justify-content:center;align-items:center}.card-final{position:relative;display:inline-block;border-radius:16px;transform-style:preserve-3d;box-shadow:0 20px 50px #00000080}.card-final img{display:block;max-height:75vh;max-width:min(100vw - 4rem,380px);width:auto;height:auto;object-fit:contain;border-radius:inherit;pointer-events:none}.card-final:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;background:radial-gradient(circle at var(--shine-x,150%) var(--shine-y,150%),var(--shine-color, #ffffff) 0%,transparent 60%);opacity:var(--shine-opacity, .2);transition:all .4s ease-in-out;border-radius:22px}.download-btn-floating{position:absolute;top:-20px;left:-20px;width:54px;height:54px;background-color:#1db954;color:#fff;border:none;border-radius:50%;display:flex;justify-content:center;align-items:center;cursor:pointer;z-index:20;box-shadow:0 8px 24px #00000080;transition:all .3s cubic-bezier(.25,.8,.25,1)}.download-btn-floating svg{width:26px;height:26px}.download-btn-floating:hover{background-color:#1ed760;transform:scale(1.15);box-shadow:0 12px 32px #1db95499}.download-btn-floating:active{transform:scale(.95);box-shadow:0 4px 12px #1db9544d}.palette-container{display:flex;flex-direction:column;align-items:center;gap:.5rem;margin-bottom:.5rem;z-index:10}.palette-swatches{display:flex;gap:14px;background-color:#0000004d;padding:10px 18px;border-radius:30px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.color-swatch{width:27px;height:27px;border-radius:50%;border:2px solid transparent;cursor:pointer;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;padding:0;box-shadow:0 4px 6px #0006}.color-swatch:hover{transform:scale(1.15)}.color-swatch.active{border-color:#fff;transform:scale(1.2);box-shadow:0 0 12px #ffffff80}.loading-container{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;background:radial-gradient(circle at center,#161616,#050505);color:#fff;font-family:Nunito,sans-serif}.loading-title{font-family:Montserrat,sans-serif;font-weight:800;font-size:2rem;margin-top:25px;margin-bottom:5px;letter-spacing:-1px}.loading-text{color:#b3b3b3;font-size:1.1rem;text-align:center;max-width:80%;margin:0;animation:fadeIn .8s ease-in-out}.spinner{width:60px;height:60px;border:5px solid #282828;border-top:5px solid #1DB954;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}body{margin:0;padding:0;overflow:hidden;background-color:#00030a}.container{width:100%;height:100vh;background-color:#050505;font-family:sans-serif;color:#fff;display:flex;align-items:center;justify-content:center;position:relative;--mouse-x: 0;--mouse-y: 0;--parallax-scale: .2}.background{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:0;pointer-events:none;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}.container.loading .background,.container.loading .logo,.container.loading .headline{opacity:0;transition:opacity 1s cubic-bezier(.25,.8,.25,1);visibility:hidden}.container.loaded .background,.container.loaded .logo,.container.loaded .headline{opacity:1;visibility:visible}.hero{text-align:center;width:100%;max-width:800px;margin-bottom:-4%;display:flex;flex-direction:column;align-items:center;z-index:10;position:relative}.container.loading .hero{visibility:hidden}.container.loaded .hero{visibility:visible}.hero:before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:700px;height:700px;background:radial-gradient(circle,rgba(36,32,255,.22) 0%,rgba(108,74,255,.12) 35%,rgba(32,255,183,.03) 60%,transparent 80%);filter:blur(50px);z-index:-1;pointer-events:none}.logo{font-size:108px;font-family:Montserrat,sans-serif;font-weight:800;margin:40px 0 10px;text-shadow:0 0 50px rgba(255,255,255,.12);pointer-events:none}.logo span{background:linear-gradient(100deg,#ffb62e,#ff2e88);background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent}.headline{color:#d9d9d9;font-size:38px;font-family:Montserrat,sans-serif;font-weight:600;margin:0;pointer-events:none}.headline a{font-weight:800}.headline span{background:linear-gradient(90deg,#85ff2e,#20ffb7);background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent}@media (max-width: 1024px){body{overflow-y:auto}.container{height:auto;min-height:100vh;padding:60px 0}.logo{font-size:76px}.headline{font-size:28px}}@media (max-width: 768px){body,.container{height:100vh!important;min-height:100vh!important;overflow:hidden!important}.container{--parallax-scale: 0}.hero{justify-content:flex-start!important;padding-top:14vh!important;margin-bottom:0!important;height:100%!important;box-sizing:border-box;width:100%;padding-left:20px;padding-right:20px}.hero:before{width:120vw!important;height:120vw!important;max-width:450px!important;max-height:450px!important;top:32%!important}.logo{font-size:66px!important;margin:30px 0 4px!important}.headline{font-size:24px!important;line-height:1.3!important}}.cards-wrapper{position:absolute;inset:0;width:100%;height:100%;perspective:1000px;pointer-events:none;z-index:1}.card{position:absolute;width:390px;border-radius:22px;z-index:1;box-shadow:0 0 80px #000000b3;scale:1.6;backface-visibility:hidden;will-change:transform,filter,scale,translate;transition:transform .15s cubic-bezier(.25,.8,.25,1),filter 1s cubic-bezier(.25,.8,.25,1),scale 1.6s cubic-bezier(.16,1,.3,1),translate 1.6s cubic-bezier(.16,1,.3,1)}.container.loading .card{visibility:hidden}.container.loaded .card{visibility:visible;scale:1;translate:0 0}.container.loading .aqua,.container.loading .blue,.container.loading .red,.container.loading .purple{translate:-180px 15px}.container.loading .darkRed,.container.loading .pink,.container.loading .green,.container.loading .darkBlue{translate:180px 15px}.red{bottom:-160px;left:-3%;transform:rotateY(65deg) rotateX(12deg) translateZ(100px) translate(calc(var(--mouse-x) * var(--parallax-scale) * -65px)) translateY(calc(var(--mouse-y) * var(--parallax-scale) * -65px))}.blue{top:0;left:16%;transform:rotate(10deg) rotateY(75deg) rotateX(-4deg) translateZ(-320px) scale(.9) translate(calc(var(--mouse-x) * var(--parallax-scale) * -35px)) translateY(calc(var(--mouse-y) * var(--parallax-scale) * -35px));filter:brightness(95%) blur(.5px)}.purple{bottom:46%;left:30%;transform:rotate(8deg) rotateY(65deg) rotateX(6deg) translateZ(-320px) scale(.6) translate(calc(var(--mouse-x) * var(--parallax-scale) * -20px)) translateY(calc(var(--mouse-y) * var(--parallax-scale) * -20px));mask:linear-gradient(to right,black,rgba(0,0,0,.75),rgba(0,0,0,.25));filter:brightness(60%) blur(2px)}.aqua{bottom:-180px;left:16.5%;transform:rotate(-26deg) rotateY(75deg) rotateX(6deg) translateZ(100px) scale(.6) translate(calc(var(--mouse-x) * var(--parallax-scale) * -50px)) translateY(calc(var(--mouse-y) * var(--parallax-scale) * -50px));mask:linear-gradient(to right,black,rgba(0,0,0,.75),rgba(0,0,0,.25));filter:brightness(65%) blur(1.5px)}.green{top:-60px;right:13%;transform:rotate(-8deg) rotateY(-65deg) rotateX(0) translateZ(-320px) scale(.8) translate(calc(var(--mouse-x) * var(--parallax-scale) * -35px)) translateY(calc(var(--mouse-y) * var(--parallax-scale) * -35px));mask:linear-gradient(to left,black,black,black,rgba(0,0,0,.9));filter:brightness(85%) blur(.85px)}.pink{bottom:-100px;right:10%;transform:rotate(8deg) rotateY(-55deg) rotateX(8deg) translateZ(-160px) scale(.95) translate(calc(var(--mouse-x) * var(--parallax-scale) * -55px)) translateY(calc(var(--mouse-y) * var(--parallax-scale) * -55px))}.darkBlue{bottom:-120px;right:-7%;transform:rotate(12deg) rotateY(-45deg) rotateX(16deg) translateZ(-160px) scale(.9) translate(calc(var(--mouse-x) * var(--parallax-scale) * -60px)) translateY(calc(var(--mouse-y) * var(--parallax-scale) * -60px))}.darkRed{bottom:2%;right:29%;transform:rotate(6deg) rotateY(-55deg) rotateX(22deg) translateZ(-320px) scale(.5) translate(calc(var(--mouse-x) * var(--parallax-scale) * -25px)) translateY(calc(var(--mouse-y) * var(--parallax-scale) * -25px));mask:linear-gradient(to left,black,rgba(0,0,0,.75),rgba(0,0,0,.25));filter:brightness(60%) blur(3px)}@media (max-width: 1024px){.card{width:260px}}@media (max-width: 768px){.card{width:155px!important;border-radius:14px!important;box-shadow:0 0 40px #0009!important}.aqua{top:6%!important;left:-45px!important;bottom:auto!important;transform:rotate(-18deg) rotateY(35deg) scale(.8)!important}.purple{top:32%!important;left:-55px!important;bottom:auto!important;transform:rotate(12deg) rotateY(40deg) scale(.75)!important;filter:brightness(75%) blur(.5px)!important}.blue{bottom:22%!important;top:auto!important;left:-35px!important;transform:rotate(-8deg) rotateY(30deg) scale(.85)!important}.red{bottom:2%!important;left:-40px!important;transform:rotate(16deg) rotateY(35deg) scale(.8)!important}.darkRed{top:5%!important;right:-45px!important;bottom:auto!important;transform:rotate(20deg) rotateY(-35deg) scale(.8)!important}.green{top:34%!important;right:-55px!important;transform:rotate(-14deg) rotateY(-40deg) scale(.75)!important;filter:brightness(80%) blur(.5px)!important}.pink{bottom:24%!important;right:-35px!important;transform:rotate(10deg) rotateY(-30deg) scale(.85)!important}.darkBlue{bottom:3%!important;right:-40px!important;transform:rotate(-16deg) rotateY(-35deg) scale(.8)!important}}.badge{display:flex;align-items:center;padding:14px 22px;border-radius:999px;background:linear-gradient(135deg,#9eff5912,#20ffb712,#6c4aff12);position:relative;border:none;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);font-family:Nunito,sans-serif;font-size:14px;font-weight:800;letter-spacing:.1em;box-shadow:0 0 30px #7bffc61a;overflow:hidden;transform:scale(1) rotate(.001deg) translateZ(0);backface-visibility:hidden;-webkit-font-smoothing:antialiased;transform-style:preserve-3d;will-change:transform,box-shadow,background-color;transition:transform .4s cubic-bezier(.25,.8,.25,1),box-shadow .4s ease,background-color .4s ease}.container.loading .badge span,.container.loading .badge:before{opacity:0;transition:opacity 1s cubic-bezier(.25,.8,.25,1)}.container.loaded .badge span,.container.loaded .badge:before{opacity:1}.badge:before{content:"";position:absolute;inset:0;border-radius:999px;padding:2px;background:linear-gradient(135deg,#9eff5960,#9eff59e5,#9eff5960,#9eff5940,#20ffb740,#20ffb740,#6c4aff60,#6c4aff60);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;z-index:1;transform:scale(.001px) translateZ(0);backface-visibility:hidden;will-change:transform}.badge:after{content:"";position:absolute;inset:0;background:radial-gradient(380px circle at var(--badge-x, 0px) var(--badge-y, 0px),rgba(32,255,183,.24) 0%,rgba(108,74,255,.12) 50%,rgba(108,74,255,.02) 80%,transparent 100%);opacity:0;transition:opacity .4s ease;pointer-events:none;z-index:0}.badge:hover{transform:scale(1.02) rotate(.001deg) translateZ(0);background-color:#ffffff0f;box-shadow:0 10px 40px #7bffc640}.badge:hover:after{opacity:1}.badge span{position:relative;z-index:2;pointer-events:none;background:linear-gradient(135deg,#9eff59,#20ffb7,#5a35ff);background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent}@media (max-width: 768px){.badge{padding:8px 16px!important;font-size:11px!important;gap:6px!important;backdrop-filter:blur(12px)!important;-webkit-backdrop-filter:blur(12px)!important}}.form{display:flex;align-items:center;justify-content:space-between;width:460px;padding:2px 2px 2px 28px;margin-top:40px;border-radius:999px;position:relative;background:linear-gradient(135deg,#ffffff12,#ffffff08);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:0 0 40px #0000001f;transition:background-color .2s ease,box-shadow .2s ease}.container.loading .form{opacity:0;transition:opacity 1s cubic-bezier(.25,.8,.25,1)}.container.loaded .form{opacity:1}.form:hover,.form:focus-within{background-color:#ffffff0a;box-shadow:0 0 50px #4590ed04}.form:before{content:"";position:absolute;inset:0;border-radius:999px;padding:2px;background:linear-gradient(135deg,#4590ed90,#6850cf90,#13714590);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}.link-icon{width:20px;height:20px;margin-right:16px;color:#fff6;flex-shrink:0;transition:color .2s ease}.form:focus-within .link-icon{color:#fffc}.form input{flex:1;background:transparent;border:none;outline:none;font-size:18px;color:#fff;font-family:Nunito,sans-serif;padding:22px 0}.form input::placeholder{color:#fff6}.cd-button{background:transparent;border:none;padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:2;position:relative;margin-left:20px}.cd-button:after{content:"";position:absolute;top:50%;left:50%;width:64px;height:64px;border:2px solid #ffffff;border-radius:50%;pointer-events:none;z-index:3;opacity:0;transform:translate(-50%,-50%) scale(1.01);will-change:transform,opacity;transition:transform .3s cubic-bezier(.25,.8,.25,1),opacity .3s ease}.cd-button:hover:after{opacity:.35;transform:translate(-50%,-50%) scale(1.12) rotate(25deg)}.cd{width:68px;height:68px;border-radius:50%;transform:scale(1.01);backface-visibility:hidden;will-change:transform;transition:transform .3s cubic-bezier(.25,.8,.25,1),filter .27s ease}.cd-button:hover .cd{transform:scale(1.12) rotate(25deg);filter:drop-shadow(0 0 38px rgba(255,155,255,.25))}@media (max-width: 768px){.form{width:290px!important;margin-top:24px!important;padding:2px 2px 2px 14px!important;backdrop-filter:blur(12px)!important;-webkit-backdrop-filter:blur(12px)!important}.form input{font-size:13px!important;padding:16px 0!important}.form input::placeholder,.form input::-webkit-input-placeholder{color:transparent!important}.form:after{content:"Cole o link da sua playlist";position:absolute;left:42px;top:50%;transform:translateY(-50%);color:#fff6;font-size:13px;font-family:Nunito,sans-serif;pointer-events:none;transition:opacity .2s ease}.form:has(input:not(:placeholder-shown)):after{opacity:0!important}.link-icon{width:16px!important;height:16px!important;margin-right:8px!important}.cd{width:48px!important;height:48px!important}.cd-button:after{width:38px!important;height:38px!important}}.steps-bar{display:flex;align-items:flex-start;justify-content:space-between;width:100%;max-width:730px;margin-top:100px;padding:42px 16px;border-radius:32px;position:relative;background:linear-gradient(135deg,#ffffff12,#ffffff08);backdrop-filter:blur(45px);-webkit-backdrop-filter:blur(45px);box-shadow:0 0 30px #4590ed14;overflow:hidden;will-change:box-shadow,background-color;transition:box-shadow .4s ease,background-color .4s ease;cursor:default}.container.loading .steps-bar:before,.container.loading .step-item{opacity:0;transition:opacity 1s cubic-bezier(.25,.8,.25,1)}.container.loaded .steps-bar:before,.container.loaded .step-item{opacity:1}.steps-bar:before{content:"";position:absolute;inset:0;border-radius:32px;padding:2px;background:linear-gradient(135deg,#4590ed90,#6850cf90,#13714590);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;z-index:1}.steps-bar:after{content:"";position:absolute;inset:0;background:radial-gradient(480px circle at var(--steps-x, 0px) var(--steps-y, 0px),rgba(69,144,237,.06) 0%,rgba(104,80,207,.04) 50%,rgba(19,113,69,.02) 85%,transparent 100%);opacity:0;transition:opacity .4s ease;pointer-events:none;z-index:0}.steps-bar:hover{background-color:#ffffff02;box-shadow:0 10px 40px #4590ed1a}.steps-bar:hover:after{opacity:1}.step-item{display:flex;flex-direction:column;align-items:center;gap:16px;flex:1;text-align:center;padding:0 10px;position:relative;z-index:2}.step-item:not(:last-child){border-right:1px solid rgba(255,255,255,.06)}.step-icon-wrapper{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0;box-shadow:0 8px 16px #0003}.step-icon-wrapper svg{width:20px;height:20px}.step-1{background:linear-gradient(135deg,#1db954,#85ff2e)}.step-2{background:linear-gradient(135deg,#6c4aff,#9d4edd)}.step-4{background:linear-gradient(135deg,#00b4d8,#20ffb7)}.step-text{display:flex;flex-direction:column;align-items:center;width:100%}.step-text h3{font-family:Montserrat,sans-serif;font-size:15px;font-weight:700;margin:0 0 6px;letter-spacing:.05em;color:#fff}.step-text p{font-family:Montserrat,sans-serif;font-size:13px;font-weight:500;margin:0;color:#ffffff73;line-height:1.4;max-width:165px}@media (max-width: 1024px){.steps-bar{max-width:90%;margin-top:60px}}@media (max-width: 768px){.steps-bar{flex-direction:column!important;align-items:stretch!important;gap:14px!important;margin-top:60px!important;padding:16px 20px!important;border-radius:24px!important;max-width:290px!important;backdrop-filter:blur(12px)!important;-webkit-backdrop-filter:blur(12px)!important}.steps-bar:before{border-radius:24px!important}.step-item{flex-direction:row!important;text-align:left!important;align-items:center!important;gap:12px!important;padding:0!important}.step-item:not(:last-child){border-right:none!important;border-bottom:1px solid rgba(255,255,255,.06)!important;padding-bottom:12px!important}.step-icon-wrapper{width:32px!important;height:32px!important;border-radius:8px!important}.step-icon-wrapper svg{width:14px!important;height:14px!important}.step-text{align-items:flex-start!important}.step-text h3{font-size:11px!important;margin-bottom:1px!important}.step-text p{font-size:10px!important;max-width:100%!important}}