*,*:before,*:after{box-sizing:border-box;padding:0;margin:0}:root{width:100vw;height:100vh}body{overscroll-behavior:none}#app{position:relative;width:100%;height:100vh}canvas{position:absolute;width:100%;height:100vh;top:0;left:0}.controls{width:100vw;padding:1rem 2rem;position:absolute;top:50px;left:50%;transform:translate(-50%);display:flex;z-index:99}audio{position:absolute;bottom:50px;left:50%;transform:translate(-50%);z-index:99}.song-list{position:fixed;right:0;top:0;height:100vh;width:350px;background:rgba(0,0,0,.95);backdrop-filter:blur(10px);transition:transform .3s ease;z-index:100;display:flex;flex-direction:column}.song-list.collapsed{transform:translate(100%)}.song-list.collapsed .song-list-toggle{transform:translate(-100%)}.song-list-toggle{position:absolute;left:-50px;top:50%;transform:translateY(-50%);background:rgba(0,0,0,.9);color:#fff;border:none;padding:15px;cursor:pointer;border-radius:8px 0 0 8px;transition:all .3s ease;display:flex;flex-direction:column;align-items:center;gap:5px}.song-list-toggle:hover{background:rgba(139,92,246,.8)}.song-list-toggle .icon{font-size:20px}.song-list-toggle .text{font-size:11px;text-transform:uppercase;letter-spacing:1px}.song-list-content{display:flex;flex-direction:column;height:100%;padding:20px;overflow:hidden}.song-list-header{margin-bottom:20px}.song-list-header h2{color:#fff;margin:0 0 15px;font-size:24px;font-weight:600}.upload-btn{width:100%;padding:12px;background:rgba(139,92,246,.2);border:1px solid rgba(139,92,246,.3);color:#fff;border-radius:6px;font-size:14px;cursor:pointer;transition:all .2s ease;margin-bottom:12px;font-weight:500}.upload-btn:hover{background:rgba(139,92,246,.4);border-color:#8b5cf680}.search-input{width:100%;padding:12px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);color:#fff;border-radius:6px;font-size:14px;transition:all .2s ease}.search-input:focus{outline:none;background:rgba(255,255,255,.15);border-color:#8b5cf680}.search-input::placeholder{color:#ffffff80}.songs-container{flex:1;overflow-y:auto;padding-right:5px}.songs-container::-webkit-scrollbar{width:8px}.songs-container::-webkit-scrollbar-track{background:rgba(255,255,255,.05);border-radius:4px}.songs-container::-webkit-scrollbar-thumb{background:rgba(255,255,255,.2);border-radius:4px}.songs-container::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.3)}.song-item{display:flex;align-items:center;justify-content:space-between;padding:12px;background:rgba(255,255,255,.05);margin-bottom:8px;border-radius:8px;cursor:pointer;transition:all .2s ease}.song-item:hover{background:rgba(255,255,255,.1);transform:translate(-4px)}.song-info{flex:1;min-width:0;padding-right:10px}.song-info h4{color:#fff;margin:0 0 4px;font-size:14px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.song-info p{color:#fff9;margin:0 0 4px;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.song-info .duration{color:#fff6;font-size:11px}.play-button{background:rgba(139,92,246,.2);border:1px solid rgba(139,92,246,.3);color:#8b5cf6;font-size:14px;cursor:pointer;padding:8px 12px;border-radius:6px;transition:all .2s ease;flex-shrink:0}.play-button:hover{background:rgba(139,92,246,.4);border-color:#8b5cf680;color:#fff}.empty-state{color:#ffffff80;text-align:center;padding:40px 20px;font-size:14px}@media (max-width: 768px){.song-list{width:100%}.song-list-toggle{left:-60px;padding:12px}.song-list-content{padding:15px}.song-info h4{font-size:13px}.song-info p{font-size:11px}}*{box-sizing:border-box;margin:0;padding:0}html{background:#0a0a0a}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;background:transparent;color:#fff;overflow-x:hidden}#webgl{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:-1;opacity:0;transition:opacity .3s ease}.app-container{width:100%;min-height:100vh;position:relative;z-index:10}.landing-page{width:100%;min-height:100vh;padding-bottom:100px;position:relative;z-index:10}.landing-content{max-width:1200px;margin:0 auto;padding:0 20px}.visualizer-page{width:100%;height:100vh;position:relative;overflow:hidden;z-index:10}body.page-visualizer #webgl{z-index:0;opacity:1}.hidden{display:none!important}.visible{display:block!important}.landing-page{position:relative;width:100%;min-height:100vh;overflow-y:auto;overflow-x:hidden}.landing-background{position:fixed;top:0;left:0;width:100%;height:100%;z-index:0}.landing-hero{position:relative;z-index:1;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:2rem;pointer-events:none}.hero-content{max-width:800px;width:100%;text-align:center;pointer-events:auto}.hero-title{font-size:4rem;font-weight:700;color:#fff;margin:0 0 1rem;letter-spacing:-.02em;text-shadow:0 4px 20px rgba(0,0,0,.5)}.hero-subtitle{font-size:1.25rem;color:#fffc;margin:0 0 3rem;font-weight:400;text-shadow:0 2px 10px rgba(0,0,0,.3)}.hero-search-container{position:relative;max-width:600px;margin:0 auto 2.5rem;background:rgba(255,255,255,.1);backdrop-filter:blur(10px);border-radius:50px;border:1px solid rgba(255,255,255,.2);box-shadow:0 8px 32px #0000004d;transition:all .3s ease}.hero-search-container:hover{background:rgba(255,255,255,.15);border-color:#ffffff4d;box-shadow:0 12px 48px #0006}.hero-search-input{width:100%;padding:1.25rem 4rem 1.25rem 2rem;background:transparent;border:none;outline:none;color:#fff;font-size:1.1rem;font-weight:400}.hero-search-input::placeholder{color:#ffffff80}.hero-search-btn{position:absolute;right:.5rem;top:50%;transform:translateY(-50%);width:48px;height:48px;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.2);border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#fff;transition:all .2s ease}.hero-search-btn:hover{background:rgba(255,255,255,.25);border-color:#fff6;transform:translateY(-50%) scale(1.05)}.hero-actions{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}.hero-action-btn{padding:1rem 2.5rem;font-size:1.1rem;font-weight:600;border:none;border-radius:50px;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;gap:.75rem;box-shadow:0 4px 20px #0000004d;backdrop-filter:blur(10px)}.hero-action-btn.primary{background:linear-gradient(135deg,rgba(139,92,246,.9),rgba(99,102,241,.9));color:#fff;border:1px solid rgba(255,255,255,.2)}.hero-action-btn.primary:hover{background:linear-gradient(135deg,rgba(139,92,246,1),rgba(99,102,241,1));transform:translateY(-2px);box-shadow:0 8px 30px #8b5cf680}.hero-action-btn.secondary{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.3)}.hero-action-btn.secondary:hover{background:rgba(255,255,255,.2);border-color:#fff6;transform:translateY(-2px);box-shadow:0 8px 30px #fff3}.landing-content-section{position:relative;z-index:1;min-height:100vh;padding:4rem 2rem;pointer-events:none}.content-container{max-width:1200px;margin:0 auto;pointer-events:auto}.landing-footer{position:relative;z-index:1;padding:3rem 2rem;text-align:center;pointer-events:none}.footer-links{display:flex;gap:2rem;justify-content:center;align-items:center;pointer-events:auto}.footer-link{display:flex;align-items:center;gap:.5rem;padding:.75rem 1.5rem;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);border-radius:30px;color:#fffc;text-decoration:none;font-size:1rem;font-weight:500;transition:all .3s ease;backdrop-filter:blur(10px)}.footer-link:hover{background:rgba(255,255,255,.2);border-color:#fff6;color:#fff;transform:translateY(-2px);box-shadow:0 4px 16px #fff3}.footer-link svg{flex-shrink:0}.ai-search-panel{margin:40px 0}.ai-search-panel h2{font-size:24px;font-weight:600;margin-bottom:20px;color:#fff}.search-input-container{display:flex;gap:12px;margin-bottom:16px}.search-input{flex:1;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);color:#fff;padding:14px 18px;border-radius:8px;font-size:15px;outline:none;transition:all .2s}.search-input:focus{background:rgba(255,255,255,.15);border-color:#8b5cf6}.search-input::placeholder{color:#fff6}.example-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}.chip{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);color:#fff;padding:10px 16px;border-radius:20px;font-size:14px;cursor:pointer;transition:all .2s}.chip:hover{background:rgba(139,92,246,.3);border-color:#8b5cf6}.playlists-section{margin:50px 0}.playlists-section h2{font-size:24px;font-weight:600;margin-bottom:24px;color:#fff}.playlists-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px}.playlist-card{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:20px;transition:all .2s;cursor:pointer}.playlist-card:hover{background:rgba(255,255,255,.08);transform:translateY(-2px)}.playlist-card-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:12px}.playlist-name{font-size:18px;font-weight:600;margin:0;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff}.playlist-actions{display:flex;gap:8px}.playlist-meta{font-size:14px;opacity:.7;margin-bottom:4px;color:#ffffffb3}.playlist-date{font-size:13px;opacity:.5;color:#ffffff80}.empty-state{text-align:center;padding:60px 20px;opacity:.5;color:#ffffff80}.empty-state p{margin:0 0 8px}.help-text{font-size:14px;opacity:.6;line-height:1.6;color:#fff9}@media (max-width: 768px){.hero-title{font-size:2.5rem}.hero-subtitle{font-size:1rem;margin-bottom:2rem}.hero-search-input{padding:1rem 3.5rem 1rem 1.5rem;font-size:1rem}.hero-search-btn{width:40px;height:40px}.hero-actions{flex-direction:column;width:100%}.hero-action-btn{width:100%;justify-content:center}.footer-links{flex-direction:column;gap:1rem}.footer-link{width:100%;max-width:300px;justify-content:center}.landing-content-section{padding:2rem 1rem}.playlists-grid{grid-template-columns:1fr}.search-input-container{flex-direction:column}}@media (max-width: 480px){.hero-title{font-size:2rem}.hero-search-container{border-radius:30px}.hero-action-btn{padding:.875rem 2rem;font-size:1rem}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.hero-content>*{animation:fadeInUp .8s ease-out forwards}.hero-content>*:nth-child(1){animation-delay:.1s}.hero-content>*:nth-child(2){animation-delay:.2s}.hero-content>*:nth-child(3){animation-delay:.3s}.hero-content>*:nth-child(4){animation-delay:.4s}.back-button{position:fixed;top:20px;left:20px;z-index:100;background:rgba(0,0,0,.7);border:1px solid rgba(255,255,255,.2);color:#fff;padding:12px 20px;border-radius:8px;font-size:15px;cursor:pointer;transition:all .2s;backdrop-filter:blur(10px)}.back-button:hover{background:rgba(0,0,0,.85);border-color:#8b5cf6;transform:translate(-2px)}@media (max-width: 768px){.back-button{top:10px;left:10px;padding:8px 14px;font-size:13px}}.now-playing-footer{position:fixed;bottom:0;left:0;width:100%;height:80px;background:rgba(20,20,20,.95);border-top:1px solid #333;z-index:1000;display:flex;align-items:center;justify-content:space-between;padding:0 30px;gap:24px}.footer-track-info{display:flex;align-items:center;gap:12px;flex:1;min-width:200px;max-width:300px}.footer-thumbnail{width:50px;height:50px;border-radius:6px;object-fit:cover}.footer-text{flex:1;min-width:0}.footer-title{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.footer-artist{font-size:13px;opacity:.7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.footer-controls{display:flex;align-items:center;gap:8px}.footer-btn{background:transparent;border:none;color:#fff;cursor:pointer;font-size:20px;padding:8px;border-radius:50%;transition:all .2s;display:flex;align-items:center;justify-content:center;min-width:40px;min-height:40px}.footer-btn:hover{background:rgba(255,255,255,.1)}.footer-btn.play-pause{font-size:24px;background:rgba(139,92,246,.3);min-width:44px;min-height:44px}.footer-btn.play-pause:hover{background:rgba(139,92,246,.5)}.footer-progress{display:flex;align-items:center;gap:12px;flex:2;min-width:200px}.footer-current-time,.footer-countdown{font-size:12px;opacity:.7;min-width:45px;font-variant-numeric:tabular-nums}.footer-progress-slider{flex:1;height:6px;-webkit-appearance:none;appearance:none;background:rgba(255,255,255,.2);border-radius:3px;outline:none;cursor:pointer;transition:height .2s}.footer-progress-slider:hover{height:8px}.footer-progress-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;background:#8b5cf6;cursor:pointer;transition:all .2s;box-shadow:0 2px 4px #0000004d}.footer-progress-slider::-webkit-slider-thumb:hover{background:#a78bfa;transform:scale(1.1)}.footer-progress-slider::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:#8b5cf6;cursor:pointer;border:none;transition:all .2s;box-shadow:0 2px 4px #0000004d}.footer-progress-slider::-moz-range-thumb:hover{background:#a78bfa;transform:scale(1.1)}.footer-progress-slider::-webkit-slider-runnable-track{background:linear-gradient(to right,#8b5cf6 0%,#8b5cf6 var(--progress, 0%),rgba(255,255,255,.2) var(--progress, 0%),rgba(255,255,255,.2) 100%);border-radius:3px;height:6px}.footer-progress-slider::-moz-range-track{background:rgba(255,255,255,.2);border-radius:3px;height:6px}.footer-progress-slider::-moz-range-progress{background:#8b5cf6;border-radius:3px;height:6px}.footer-volume{display:flex;align-items:center;gap:10px;min-width:150px}.footer-volume-label{font-size:12px;font-weight:600;opacity:.7}.footer-volume-slider{flex:1;height:4px;-webkit-appearance:none;appearance:none;background:rgba(255,255,255,.2);border-radius:2px;outline:none}.footer-volume-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:12px;height:12px;border-radius:50%;background:white;cursor:pointer}.footer-volume-slider::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:white;cursor:pointer;border:none}@media (max-width: 768px){.now-playing-footer{height:auto;flex-direction:column;padding:12px 16px;gap:12px}.footer-track-info{width:100%;max-width:none}.footer-progress{width:100%;order:-1}.footer-controls{width:100%;justify-content:center}.footer-volume{width:100%;max-width:none}}.btn-primary{background:#8b5cf6;color:#fff;border:none;padding:12px 24px;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s}.btn-primary:hover{background:#7c3aed;transform:translateY(-1px);box-shadow:0 4px 12px #8b5cf666}.btn-primary:disabled{opacity:.5;cursor:not-allowed;transform:none}.btn-secondary{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.2);padding:10px 20px;border-radius:8px;font-size:14px;cursor:pointer;transition:all .2s}.btn-secondary:hover{background:rgba(255,255,255,.15)}.btn-icon{background:transparent;border:none;color:#fff;font-size:18px;cursor:pointer;padding:8px;border-radius:6px;transition:all .2s}.btn-icon:hover{background:rgba(255,255,255,.1)}.btn-danger{background:rgba(239,68,68,.2);color:#fca5a5;border:1px solid rgba(239,68,68,.4);padding:10px 20px;border-radius:8px;font-size:14px;cursor:pointer;transition:all .2s}.btn-danger:hover{background:rgba(239,68,68,.3)}.status-message{display:flex;align-items:center;gap:12px;padding:12px 16px;background:rgba(59,130,246,.2);border:1px solid rgba(59,130,246,.4);border-radius:8px;color:#93c5fd;margin-top:16px}.error-message{padding:12px 16px;background:rgba(239,68,68,.2);border:1px solid rgba(239,68,68,.4);border-radius:8px;color:#fca5a5;margin-top:16px}.success-message{display:flex;align-items:center;gap:12px;padding:12px 16px;background:rgba(34,197,94,.2);border:1px solid rgba(34,197,94,.4);border-radius:8px;color:#86efac;margin-top:16px}.spinner{width:16px;height:16px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}input[type=text],input[type=email],input[type=password],textarea{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);color:#fff;padding:12px 16px;border-radius:8px;font-size:14px;outline:none;transition:all .2s}input[type=text]:focus,input[type=email]:focus,input[type=password]:focus,textarea:focus{background:rgba(255,255,255,.15);border-color:#8b5cf6}input::placeholder,textarea::placeholder{color:#fff6}.mt-16{margin-top:16px}.mb-16{margin-bottom:16px}.text-center{text-align:center}.opacity-70{opacity:.7}.opacity-50{opacity:.5}