@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Outfit:wght@400;500;700;800;900&display=swap";:root{--bg-main: #f5f0ff;--bg-white: #ffffff;--bg-cream: #fef9f0;--pink-hot: #ff6b9d;--pink-soft: #ffa0c4;--yellow-bright: #ffe156;--yellow-butter: #fff3a0;--lavender: #c4b5fd;--lavender-deep: #a78bfa;--mint: #6ee7b7;--mint-bright: #34d399;--sky: #67e8f9;--coral: #ff7979;--orange-pop: #ffb347;--lime: #bef264;--text-dark: #0f172a;--text-muted: #475569;--border-thick: 3px solid #0f172a;--font-heading: "Outfit", sans-serif;--font-body: "Inter", sans-serif;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--radius-xl: 24px;--radius-full: 9999px;--shadow-brutal: 4px 4px 0px 0px #0f172a;--shadow-brutal-lg: 8px 8px 0px 0px #0f172a;--shadow-brutal-pink: 4px 4px 0px 0px var(--pink-hot);--shadow-brutal-yellow: 4px 4px 0px 0px var(--yellow-bright);--shadow-brutal-lavender: 4px 4px 0px 0px var(--lavender);--shadow-brutal-mint: 4px 4px 0px 0px var(--mint);--transition-fast: .15s ease;--transition-base: .25s ease;--transition-bounce: .3s cubic-bezier(.34, 1.56, .64, 1)}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth}body{font-family:var(--font-body);background-color:var(--bg-main);color:var(--text-dark);min-height:100vh;overflow-x:hidden;padding-top:80px;line-height:1.6;-webkit-font-smoothing:antialiased;background-image:radial-gradient(var(--lavender) 1.2px,transparent 1.2px);background-size:22px 22px}h1,h2,h3,h4{font-family:var(--font-heading);font-weight:800;line-height:1.1;letter-spacing:-.02em;color:var(--text-dark)}a{color:var(--pink-hot);text-decoration:none}.container{max-width:1200px;margin:0 auto;padding:2rem;position:relative;min-height:calc(100vh - 80px);z-index:1}.center-content{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.navbar{position:fixed;top:0;left:0;width:100%;height:80px;background:var(--bg-white);border-bottom:var(--border-thick);z-index:1000;display:flex;justify-content:space-between;align-items:center;padding:0 2rem;box-shadow:0 4px 0 0 var(--pink-hot)}.nav-actions{display:flex;align-items:center;gap:1rem}.profile-img-small{width:28px;height:28px;border-radius:50%;margin-right:.5rem;border:2px solid var(--text-dark);object-fit:cover}.logo{font-size:2rem;cursor:pointer;display:inline-block;background:var(--yellow-bright);color:var(--text-dark);padding:.4rem 1.2rem;border:var(--border-thick);border-radius:var(--radius-lg);box-shadow:var(--shadow-brutal-pink);transform:rotate(-2deg);transition:transform var(--transition-bounce),box-shadow var(--transition-base);-webkit-text-fill-color:var(--text-dark);font-weight:900}.logo:hover{transform:rotate(0) scale(1.05);box-shadow:var(--shadow-brutal-lg)}.app-header{margin-bottom:3rem;display:flex;justify-content:space-between;align-items:center}.hero-section{position:relative;width:100%;padding:4rem 0;z-index:10}.hero-title{font-size:clamp(3rem,7vw,5.5rem);margin-bottom:1.5rem;text-wrap:balance;color:var(--text-dark)}.hero-subtitle{font-size:1.3rem;color:var(--text-muted);margin-bottom:3rem;max-width:600px;margin-inline:auto;line-height:1.7}.card{background:var(--bg-white);border:var(--border-thick);border-radius:var(--radius-xl);padding:2rem;box-shadow:var(--shadow-brutal);transition:all var(--transition-base)}.card:hover{transform:translateY(-2px);box-shadow:var(--shadow-brutal-lg)}.search-bar{display:flex;gap:1rem;max-width:650px;margin:0 auto;position:relative;z-index:10}.search-input{flex:1;padding:1rem 1.5rem;font-size:1.1rem;font-family:var(--font-body);background:var(--bg-white);border:var(--border-thick);border-radius:var(--radius-lg);color:var(--text-dark);outline:none;box-shadow:var(--shadow-brutal);transition:all var(--transition-base)}.search-input::placeholder{color:var(--text-muted)}.search-input:focus{box-shadow:var(--shadow-brutal-lg);transform:translate(-2px,-2px)}.btn{font-family:var(--font-heading);font-weight:700;padding:.75rem 1.5rem;font-size:1rem;border:var(--border-thick);border-radius:var(--radius-lg);cursor:pointer;transition:all var(--transition-bounce);text-transform:uppercase;letter-spacing:.03em;box-shadow:var(--shadow-brutal)}.btn:active{transform:translate(3px,3px);box-shadow:1px 1px #0f172a}.btn-primary{background:var(--pink-hot);color:var(--bg-white)}.btn-primary:hover{background:#ff85b1;transform:translateY(-3px);box-shadow:var(--shadow-brutal-lg)}.btn-secondary{background:var(--yellow-bright);color:var(--text-dark)}.btn-secondary:hover{background:#ffe97a;transform:translateY(-3px);box-shadow:var(--shadow-brutal-lg)}.btn-large{padding:1.15rem 2.5rem;font-size:1.15rem}.btn-sm{padding:.5rem 1rem;font-size:.85rem}.btn-text{background:none;border:none;box-shadow:none;color:var(--text-muted);cursor:pointer;font-family:var(--font-body);font-weight:500;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px;text-decoration-color:var(--pink-hot);padding:0}.btn-text:hover{color:var(--pink-hot)}.btn:disabled{opacity:.5;cursor:not-allowed;transform:none!important}.shape{position:absolute;z-index:0;border:var(--border-thick);box-shadow:var(--shadow-brutal)}.shape-1{width:80px;height:80px;background:var(--pink-hot);border-radius:50%;top:8%;left:5%;animation:floatBounce 6s ease-in-out infinite}.shape-2{width:60px;height:60px;background:var(--yellow-bright);top:40%;right:8%;border-radius:4px;transform:rotate(15deg);animation:floatBounce 8s ease-in-out infinite reverse}.shape-3{width:100px;height:40px;background:var(--mint);border-radius:40px;bottom:15%;left:15%;animation:floatBounce 7s ease-in-out infinite}@keyframes floatBounce{0%,to{transform:translateY(0) rotate(0)}25%{transform:translateY(-15px) rotate(3deg)}50%{transform:translateY(-25px) rotate(-2deg)}75%{transform:translateY(-10px) rotate(1deg)}}.fade-in{animation:fadeIn .5s ease-out forwards}@keyframes fadeIn{0%{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}.bounce-hover{transition:transform var(--transition-bounce),box-shadow var(--transition-base)}.bounce-hover:hover{transform:translateY(-5px) scale(1.02);box-shadow:var(--shadow-brutal-lg);z-index:2}.spin{animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.marquee-container{width:110vw;position:relative;left:50%;margin-left:-55vw;overflow:hidden;background:var(--text-dark);padding:1.2rem 0;margin-top:5rem;margin-bottom:5rem;border-top:var(--border-thick);border-bottom:var(--border-thick);box-shadow:0 6px 0 0 var(--pink-hot);z-index:20;transform:rotate(-1.5deg)}.marquee-content{display:flex;white-space:nowrap;animation:marquee 22s linear infinite;font-family:var(--font-heading);font-size:1.3rem;font-weight:800;text-transform:uppercase;color:var(--yellow-bright)}.marquee-content span{padding:0 2rem;display:flex;align-items:center;gap:.75rem}@keyframes marquee{0%{transform:translate(0)}to{transform:translate(-50%)}}.homepage-sections{display:flex;flex-direction:column;gap:5rem;padding-bottom:4rem}.section-title{font-size:clamp(2.2rem,4vw,3.2rem);position:relative;display:inline-block}.section-title:after{content:"";position:absolute;bottom:-6px;left:0;width:100%;height:12px;background:var(--yellow-bright);z-index:-1;border:2px solid var(--text-dark);border-radius:2px}.steps-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.5rem;margin-top:2rem}.step-card{position:relative;padding-top:3rem;text-align:left}.step-card h3{margin-bottom:.5rem}.step-card:nth-child(1){background:var(--pink-hot)!important;box-shadow:var(--shadow-brutal)}.step-card:nth-child(2){background:var(--yellow-bright)!important;box-shadow:var(--shadow-brutal)}.step-card:nth-child(3){background:var(--lavender)!important;box-shadow:var(--shadow-brutal)}.step-card:nth-child(1) h3,.step-card:nth-child(1) p,.step-card:nth-child(2) h3,.step-card:nth-child(2) p,.step-card:nth-child(3) h3,.step-card:nth-child(3) p{color:var(--text-dark)!important}.step-number{position:absolute;top:-1.2rem;left:2rem;width:3rem;height:3rem;background:var(--text-dark);color:var(--yellow-bright);font-family:var(--font-heading);font-size:1.4rem;font-weight:900;display:flex;align-items:center;justify-content:center;border-radius:50%;border:3px solid var(--text-dark);box-shadow:3px 3px 0 0 var(--yellow-bright);z-index:2}.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem;margin-top:2rem}.feature-card{display:flex;flex-direction:column;gap:.75rem;text-align:left}.feature-card:nth-child(1){background:var(--sky)!important;box-shadow:var(--shadow-brutal)}.feature-card:nth-child(2){background:var(--orange-pop)!important;box-shadow:var(--shadow-brutal)}.feature-card:nth-child(3){background:var(--lime)!important;box-shadow:var(--shadow-brutal)}.feature-card:nth-child(4){background:var(--pink-soft)!important;box-shadow:var(--shadow-brutal)}.feature-card:nth-child(1) h3,.feature-card:nth-child(1) p,.feature-card:nth-child(2) h3,.feature-card:nth-child(2) p,.feature-card:nth-child(3) h3,.feature-card:nth-child(3) p,.feature-card:nth-child(4) h3,.feature-card:nth-child(4) p{color:var(--text-dark)!important}.feature-card h3{margin-bottom:0}.feature-icon-wrapper{width:3.5rem;height:3.5rem;background:var(--text-dark);border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;border:2px solid var(--text-dark);color:var(--yellow-bright);margin-bottom:.25rem;box-shadow:3px 3px 0 0 var(--pink-hot)}.layout-grid{display:grid;grid-template-columns:300px 1fr;gap:2rem}.naming-layout{display:grid;grid-template-columns:350px 1fr;gap:2rem}.controls-sidebar h3{margin-bottom:.5rem}.header-stats span{color:var(--pink-hot);font-weight:700;font-family:var(--font-heading)}.playlist-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1.5rem;margin-bottom:3rem}.playlist-card{background:var(--bg-white);border:var(--border-thick);border-radius:var(--radius-lg);padding:1rem;cursor:pointer;text-align:center;box-shadow:var(--shadow-brutal);transition:all var(--transition-bounce)}.playlist-card:hover{box-shadow:var(--shadow-brutal-pink);transform:translateY(-5px) rotate(-1deg)}.playlist-img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--radius-md);border:2px solid var(--text-dark)}.playlist-img-placeholder{width:100%;aspect-ratio:1;background:linear-gradient(135deg,var(--lavender),var(--pink-hot));border-radius:var(--radius-md);border:2px solid var(--text-dark);display:flex;align-items:center;justify-content:center;color:var(--text-dark)}.track-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.5rem;margin-bottom:3rem}.track-card{background:var(--bg-white);border:var(--border-thick);border-radius:var(--radius-lg);padding:1.5rem;position:relative;box-shadow:var(--shadow-brutal);transition:all var(--transition-base)}.track-card:hover{box-shadow:var(--shadow-brutal-yellow)}.selected-card{border-color:var(--pink-hot)!important;background:#fff0f5!important;box-shadow:var(--shadow-brutal-pink)!important}.track-info h4{font-size:1.15rem;margin-bottom:.25rem}.track-info p{color:var(--text-muted);font-size:.9rem;margin-bottom:1rem}.track-meta{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.tag{background:var(--lavender);color:var(--text-dark);padding:.25rem .75rem;border-radius:var(--radius-full);font-size:.7rem;font-weight:800;text-transform:uppercase;border:2px solid var(--text-dark)}.similarity{font-weight:800;font-family:var(--font-heading);color:var(--pink-hot)}.control-group{margin-bottom:1.5rem}.control-group label{display:block;font-weight:600;margin-bottom:.5rem;font-size:.9rem}.vibe-slider{width:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;height:8px;background:var(--bg-main);border-radius:4px;outline:none;border:2px solid var(--text-dark)}.vibe-slider::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:var(--pink-hot);cursor:pointer;border:3px solid var(--text-dark);box-shadow:2px 2px 0 0 var(--yellow-bright);transition:transform var(--transition-bounce)}.vibe-slider::-webkit-slider-thumb:hover{transform:scale(1.25)}.vibe-slider::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--pink-hot);cursor:pointer;border:3px solid var(--text-dark);box-shadow:2px 2px 0 0 var(--yellow-bright)}.toggle-group{display:flex;align-items:center;justify-content:space-between}.custom-toggle{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:48px;height:26px;background:var(--bg-main);border-radius:13px;position:relative;cursor:pointer;border:2px solid var(--text-dark);flex-shrink:0;transition:background var(--transition-base)}.custom-toggle:before{content:"";position:absolute;width:18px;height:18px;border-radius:50%;background:var(--text-muted);top:2px;left:2px;transition:all var(--transition-bounce);border:2px solid var(--text-dark)}.custom-toggle:checked{background:var(--pink-hot)}.custom-toggle:checked:before{transform:translate(22px);background:var(--yellow-bright)}.vibe-select{width:100%;padding:.75rem 1rem;background:var(--bg-white);border:var(--border-thick);border-radius:var(--radius-md);font-family:var(--font-body);font-size:.95rem;color:var(--text-dark);outline:none;cursor:pointer}.vibe-select:focus{box-shadow:var(--shadow-brutal-pink)}.vibe-modes{display:flex;flex-wrap:wrap;gap:.5rem}.btn-vibe{background:var(--bg-white);border:2px solid var(--text-dark);border-radius:var(--radius-full);padding:.5rem 1rem;font-family:var(--font-body);font-weight:600;font-size:.85rem;cursor:pointer;color:var(--text-dark);transition:all var(--transition-bounce)}.btn-vibe:hover{background:var(--yellow-butter);transform:translateY(-2px);box-shadow:2px 2px 0 0 var(--text-dark)}.btn-vibe.active{background:var(--yellow-bright);font-weight:700;box-shadow:3px 3px 0 0 var(--text-dark);transform:translateY(-2px)}.names-list{display:flex;flex-direction:column;gap:1rem}.name-card{background:var(--bg-white);border:var(--border-thick);border-radius:var(--radius-lg);display:flex;align-items:center;padding:.5rem;box-shadow:var(--shadow-brutal);transition:all var(--transition-base)}.name-card:hover{box-shadow:var(--shadow-brutal-pink)}.name-input{flex:1;border:none;font-size:1.15rem;font-family:var(--font-heading);font-weight:700;padding:.85rem 1rem;outline:none;background:transparent;color:var(--text-dark)}.name-input:focus{background:var(--yellow-butter);border-radius:var(--radius-md)}.name-input::placeholder{color:var(--text-muted)}.border-primary{border-color:var(--pink-hot)!important;box-shadow:var(--shadow-brutal-pink)!important}.export-card{max-width:600px;text-align:center;padding:3rem;background:var(--bg-white)!important;border:var(--border-thick)!important;box-shadow:var(--shadow-brutal-lg)!important}.export-card h1{font-size:clamp(2rem,5vw,3rem);text-wrap:balance;color:var(--pink-hot)}.subtitle{color:var(--text-muted);font-size:1.1rem}.loading-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;padding:3rem;color:var(--text-muted)}.loading-state h2{color:var(--pink-hot)}.text-primary{color:var(--pink-hot)!important}.toast-container{position:fixed;bottom:2rem;right:2rem;z-index:9999;display:flex;flex-direction:column;gap:.75rem}.toast{background:var(--bg-white);border:var(--border-thick);border-radius:var(--radius-md);padding:1rem 1.5rem;color:var(--text-dark);font-weight:500;box-shadow:var(--shadow-brutal);animation:toastIn .4s var(--transition-bounce) forwards;display:flex;align-items:center;gap:.75rem;min-width:280px}.toast.toast-success{box-shadow:var(--shadow-brutal-mint)}.toast.toast-error{box-shadow:4px 4px 0 0 var(--coral)}.toast.toast-exit{animation:toastOut .3s ease-in forwards}@keyframes toastIn{0%{opacity:0;transform:translate(60px) rotate(3deg)}to{opacity:1;transform:translate(0) rotate(0)}}@keyframes toastOut{0%{opacity:1}to{opacity:0;transform:translate(80px)}}.footer{width:100%;padding:2rem;text-align:center;color:var(--text-muted);font-size:.85rem;border-top:var(--border-thick);margin-top:4rem;z-index:1;position:relative}.footer a{color:var(--pink-hot);font-weight:600;text-decoration:underline;text-underline-offset:4px}.confetti-wrapper{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:9998;overflow:hidden}.confetti-piece{position:absolute;width:10px;height:10px;top:-10px;opacity:0;border-radius:2px;border:1px solid rgba(0,0,0,.15);animation:confettiFall 3s ease-in forwards}@keyframes confettiFall{0%{opacity:1;transform:translateY(0) rotate(0)}to{opacity:0;transform:translateY(100vh) rotate(720deg)}}.mt-2{margin-top:.5rem}.mt-4{margin-top:1.5rem}.mt-8{margin-top:3rem}.mt-12{margin-top:5rem}.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.mb-4{margin-bottom:1.5rem}.mb-6{margin-bottom:2rem}.mb-8{margin-bottom:3rem}.mr-2{margin-right:.5rem}.mr-3{margin-right:.75rem}.ml-2{margin-left:.5rem}.pt-4{padding-top:1.5rem}.pt-6{padding-top:2rem}.w-full{width:100%}.text-center{text-align:center}.text-right{text-align:right}.text-main{color:var(--text-dark)}.text-muted{color:var(--text-muted)}.text-sm{font-size:.875rem}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.inline{display:inline-block}.flex{display:flex}.flex-col{display:flex;flex-direction:column}.flex-center{display:flex;align-items:center;justify-content:center}.items-center{align-items:center}.items-end{align-items:flex-end}.justify-between{justify-content:space-between}.gap-4{gap:1rem}.border-top{border-top:var(--border-thick)}@media (max-width: 768px){.layout-grid,.naming-layout{grid-template-columns:1fr}.search-bar{flex-direction:column}.navbar{padding:0 1rem}.container{padding:1.5rem}.export-card{padding:2rem 1.5rem}.export-actions{flex-direction:column}.marquee-container{margin-top:3rem;margin-bottom:3rem}.playlist-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}.steps-grid{grid-template-columns:1fr}}@media (max-width: 480px){body{padding-top:70px}.navbar{height:70px}.hero-section{padding:2rem 0}.track-grid{grid-template-columns:1fr}}::-webkit-scrollbar{width:10px}::-webkit-scrollbar-track{background:var(--bg-main)}::-webkit-scrollbar-thumb{background:var(--lavender);border-radius:5px;border:2px solid var(--bg-main)}::-webkit-scrollbar-thumb:hover{background:var(--pink-hot)}::selection{background:var(--pink-hot);color:#fff}