body{color:#0ff;background:#000;width:100%;height:100vh;margin:0;padding:0;font-family:VT323,monospace;overflow:hidden}.scanlines{opacity:.15;pointer-events:none;z-index:999;background:linear-gradient(#fff0 50%,#0000004d 50%) 0 0/100% 4px;width:100%;height:100%;position:fixed;top:0;left:0}.crt-effect{pointer-events:none;z-index:1000;width:100%;height:100%;position:fixed;top:0;left:0;box-shadow:inset 0 0 100px #0ff3}.ipod-container{box-sizing:border-box;background:linear-gradient(145deg,#1a1a1a,#050505);border:1px solid #333;border-radius:min(30px,4vw);width:100%;max-width:400px;height:100vh;max-height:700px;margin:0 auto;padding:min(20px,3vw);position:relative;overflow:hidden;box-shadow:0 20px 40px #000c,inset 0 4px 8px #ffffff0d,inset 0 -4px 8px #000c,inset 0 0 25px #00ffff1a}.ipod-container:before{content:"";opacity:.15;pointer-events:none;background:radial-gradient(circle at 0 0,#ffffff40,#0000 60%);width:200%;height:200%;position:absolute;top:-50%;left:-50%;transform:rotate(25deg)}.player-header{text-align:center;margin-bottom:15px}.player-title{color:#0ff;text-shadow:0 0 10px #00ffff80;margin:0;font-family:"Press Start 2P",monospace;font-size:1.2rem}.player-title span{color:#f0f}.visualizer-container{background:radial-gradient(circle,#012,#000);border:2px solid #0ff;border-radius:15px;width:100%;height:200px;margin-bottom:15px;animation:3s ease-in-out infinite alternate visualizerGlow;position:relative;overflow:hidden;box-shadow:0 0 20px #00ffff80,inset 0 0 30px #f0f3}@keyframes visualizerGlow{0%{box-shadow:0 0 20px #00ffff80,inset 0 0 30px #f0f3}to{box-shadow:0 0 40px #f0fc,inset 0 0 50px #00ffff4d}}#visualizer{filter:contrast(1.2)saturate(1.5);width:100%;height:100%;position:absolute;top:0;left:0}.track-info{z-index:1;background:linear-gradient(#0000 0%,#000c 100%);align-items:center;gap:10px;padding:10px;display:flex;position:absolute;bottom:0;left:0;right:0}.track-info-icon{color:#000;background:#f0f;border-radius:50%;justify-content:center;align-items:center;width:30px;height:30px;font-size:14px;font-weight:700;display:flex}.track-info-text{flex:1}#now-playing{color:#fff;white-space:nowrap;text-overflow:ellipsis;margin-bottom:3px;font-family:"Press Start 2P",monospace;font-size:.7rem;overflow:hidden}#track-artist{color:#0ff;white-space:nowrap;text-overflow:ellipsis;font-size:.8rem;overflow:hidden}.track-time{color:#0ff;justify-content:space-between;margin:5px 0;font-size:.8rem;display:flex}.progress-container{cursor:pointer;background:#111;border:1px solid #0ff;border-radius:3px;width:100%;height:6px;margin-bottom:10px;position:relative;overflow:hidden}.progress-bar{background:linear-gradient(90deg,#0ff,#f0f);border-radius:3px;width:0;height:100%;transition:width .1s;position:absolute;top:0;left:0}.control-wheel{-webkit-user-select:none;user-select:none;touch-action:none;cursor:grab;background:linear-gradient(145deg,#333,#222);border-radius:50%;justify-content:center;align-items:center;width:180px;height:180px;margin:15px auto;display:flex;position:relative;box-shadow:0 5px 15px #00000080,inset 0 1px 5px #ffffff1a}.center-button{cursor:pointer;z-index:2;-webkit-user-select:none;user-select:none;background:linear-gradient(145deg,#444,#333);border-radius:50%;justify-content:center;align-items:center;width:60px;height:60px;display:flex;box-shadow:0 2px 5px #00000080}.center-button:active{transform:scale(.95);box-shadow:0 1px 2px #00000080}.wheel-button{color:#0ff;cursor:pointer;text-shadow:0 0 5px #00ffff80;-webkit-user-select:none;user-select:none;justify-content:center;align-items:center;width:40px;height:40px;font-family:"Press Start 2P",monospace;font-size:.6rem;display:flex;position:absolute}.wheel-button:active{transform:scale(.95)}.menu-button{top:10px}.next-button{right:10px}.prev-button{left:10px}.play-button{bottom:10px}.visualizer-modes{grid-template-columns:repeat(3,1fr);gap:5px;max-width:280px;margin-top:15px;margin-left:auto;margin-right:auto;display:grid}.mode-button{color:#0ff;cursor:pointer;text-align:center;white-space:nowrap;background:#000c;border:1px solid #0ff;border-radius:4px;justify-content:center;align-items:center;width:100%;height:30px;padding:5px 4px;font-family:"Press Start 2P",monospace;font-size:.45rem;transition:all .3s;display:flex;position:relative;overflow:hidden}.mode-button.professional{color:#0ff;text-shadow:0 0 5px #0ff;letter-spacing:.3px;background:linear-gradient(135deg,#001428e6,#000014e6);border:1px solid #0ff;padding:4px;font-size:.35rem;font-weight:700;animation:2s ease-in-out infinite alternate professionalGlow;box-shadow:inset 0 0 10px #00ffff1a,0 0 15px #0ff3}.mode-button.professional:hover{background:linear-gradient(135deg,#002850e6,#001428e6);transform:translateY(-1px);box-shadow:inset 0 0 15px #0ff3,0 0 25px #0ff6}.mode-button.professional.active{color:#fff;text-shadow:0 0 8px #0ff;background:linear-gradient(135deg,#0ff3,#0080ff33);box-shadow:inset 0 0 20px #00ffff4d,0 0 30px #00ffff80}@keyframes professionalGlow{0%{box-shadow:inset 0 0 10px #00ffff1a,0 0 15px #0ff3}to{box-shadow:inset 0 0 15px #0ff3,0 0 25px #00ffff4d}}.mode-button.ultra-professional{color:#f0f;text-shadow:0 0 8px #f0f;letter-spacing:.5px;background:linear-gradient(135deg,#1e003ce6,#3c0078e6);border:1px solid #f0f;padding:6px 8px;font-size:.4rem;font-weight:700;animation:1.5s ease-in-out infinite alternate ultraProfessionalGlow;position:relative;overflow:hidden;box-shadow:inset 0 0 15px #f0f3,0 0 20px #ff00ff4d}.mode-button.ultra-professional:before{content:"";background:linear-gradient(90deg,#0000,#ff00ff4d,#0000);width:100%;height:100%;animation:3s infinite ultraSweep;position:absolute;top:0;left:-100%}.mode-button.ultra-professional:hover{color:#fff;background:linear-gradient(135deg,#3c0078e6,#7800f0e6);transform:translateY(-2px)scale(1.05);box-shadow:inset 0 0 20px #ff00ff4d,0 0 35px #ff00ff80}.mode-button.ultra-professional.active{color:#fff;text-shadow:0 0 15px #f0f;background:linear-gradient(135deg,#ff00ff4d,#ff64ff4d);animation:.8s ease-in-out infinite alternate ultraActivePulse;box-shadow:inset 0 0 25px #f0f6,0 0 40px #ff00ffb3}@keyframes ultraProfessionalGlow{0%{box-shadow:inset 0 0 15px #f0f3,0 0 20px #ff00ff4d}to{box-shadow:inset 0 0 20px #ff00ff4d,0 0 30px #f0f6}}@keyframes ultraSweep{0%{left:-100%}to{left:100%}}@keyframes ultraActivePulse{0%{transform:scale(1);box-shadow:inset 0 0 25px #f0f6,0 0 40px #ff00ffb3}to{transform:scale(1.02);box-shadow:inset 0 0 30px #ff00ff80,0 0 50px #ff00ffe6}}.mode-button:before{content:"";background:linear-gradient(90deg,#0000,#fff3,#0000);width:100%;height:100%;transition:left .5s;position:absolute;top:0;left:-100%}.mode-button:hover{background:#0ff3;transform:scale(1.05);box-shadow:0 0 15px #00ffff80}.mode-button:hover:before{left:100%}.mode-button.active{color:#000;background:linear-gradient(90deg,#0ff,#f0f);animation:2s ease-in-out infinite alternate activeMode;box-shadow:0 0 10px #00ffffb3}@keyframes activeMode{0%{box-shadow:0 0 10px #00ffffb3}to{box-shadow:0 0 20px #ff00ffe6}}.playlist-container{z-index:10;box-sizing:border-box;background:#000000f2;border-radius:15px;flex-direction:column;width:100%;height:100%;padding:15px;font-size:.8rem;display:none;position:absolute;top:0;left:0}.playlist-container.active{display:flex}.playlist-header{justify-content:space-between;align-items:center;margin-bottom:10px;display:flex}.playlist-header h2{color:#0ff;margin:0;font-family:"Press Start 2P",monospace;font-size:.7rem}.close-playlist{color:#f0f;cursor:pointer;background:0 0;border:none;font-family:"Press Start 2P",monospace;font-size:.8rem}#playlist{flex-grow:1;margin:0;padding:0;list-style:none;overflow-y:auto}#playlist li{cursor:pointer;border-bottom:1px solid #333;align-items:center;gap:8px;padding:6px 8px;transition:background .2s,color .2s;display:flex}.drag-handle{color:#fff9;cursor:grab;-webkit-user-select:none;user-select:none;text-align:center;width:16px;font-size:.8rem;line-height:1}#playlist li.dragging{opacity:.65}#playlist li.drag-over{outline-offset:-2px;outline:2px solid #00ffff59}#playlist li:hover{background:#00ffff1a}#playlist li.playing{background:linear-gradient(90deg,#0ff3,#f0f3);border-left:4px solid #f0f}.track-number{color:#000;background:#0ff;border-radius:50%;justify-content:center;align-items:center;width:20px;height:20px;font-size:.6rem;font-weight:700;display:flex}.playing .track-number{background:#f0f}.track-details{flex:1}.track-title{color:#fff;margin-bottom:2px;font-size:.7rem}.track-artist-name{color:#0ff;font-size:.5rem}.download-button{color:#0ff;cursor:pointer;background:#00ffff1a;border:1px solid #0ff;border-radius:4px;flex-shrink:0;justify-content:center;align-items:center;width:28px;height:28px;padding:0;font-size:1rem;transition:all .2s;display:flex}.download-button:hover{background:#00ffff4d;transform:scale(1.1);box-shadow:0 0 8px #00ffff80}.download-button:active{transform:scale(.95)}.volume-indicator{opacity:0;-webkit-user-select:none;user-select:none;align-items:center;gap:5px;transition:opacity .3s;display:flex;position:absolute;top:10px;right:10px}.volume-indicator.active{opacity:1}.volume-icon{color:#0ff;font-size:.8rem}.volume-level{cursor:pointer;-webkit-user-select:none;user-select:none;background:#111;border-radius:3px;width:50px;height:5px;overflow:hidden}.volume-fill{background:linear-gradient(90deg,#0ff,#f0f);width:70%;height:100%}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.8;transform:scale(1.05)}}.pulse{animation:2s infinite pulse}@media (width<=400px){.ipod-container{border-radius:min(20px,3vw);max-width:100%;padding:min(15px,2.5vw)}.control-wheel{width:min(150px,40vw);height:min(150px,40vw)}.center-button{width:min(50px,12vw);height:min(50px,12vw)}}@media (height<=500px){.ipod-container{border-radius:min(15px,2vw);height:100vh;padding:min(10px,2vw)}.visualizer-container{height:min(150px,25vh)}.player-header{margin-bottom:min(10px,2vh)}}.menu-tabs{gap:6px;display:flex}.menu-tab{color:#0ff;cursor:pointer;background:#ffffff1a;border:1px solid #00ffff4d;border-radius:3px;padding:4px 8px;font-family:"Press Start 2P",monospace;font-size:.5rem;transition:all .3s}.menu-tab.active{color:#fff;background:#0ff3;border-color:#0ff}.menu-tab:hover{background:#00ffff26}.menu-content{flex-grow:1;overflow:hidden}.menu-section{height:100%;display:none;overflow-y:auto}.menu-section.active{display:block}.option-group{margin-bottom:15px}.option-group h3{color:#0ff;border-bottom:1px solid #00ffff4d;margin:0 0 10px;padding-bottom:5px;font-family:"Press Start 2P",monospace;font-size:.6rem}.option-item{margin-bottom:10px}.toggle-label{cursor:pointer;color:#fff;-webkit-user-select:none;user-select:none;align-items:center;gap:8px;font-family:"Press Start 2P",monospace;font-size:.4rem;display:flex}.toggle-label input[type=checkbox]{display:none}.toggle-slider{background:#ffffff1a;border:1px solid #ffffff4d;border-radius:9px;width:36px;height:18px;transition:all .3s;position:relative}.toggle-slider:before{content:"";background:#fff;border-radius:50%;width:14px;height:14px;transition:all .3s;position:absolute;top:1px;left:1px}.toggle-label input[type=checkbox]:checked+.toggle-slider{background:#00ffff4d;border-color:#0ff}.toggle-label input[type=checkbox]:checked+.toggle-slider:before{background:#0ff;transform:translate(18px)}.toggle-label:hover .toggle-slider{border-color:#0ff}.slider-container{align-items:center;gap:8px;margin-top:8px;display:flex}.volume-slider,.eq-slider{cursor:pointer;appearance:none;background:#ffffff1a;border:none;border-radius:2px;outline:none;flex:1;height:4px}.volume-slider::-webkit-slider-thumb{appearance:none;cursor:pointer;background:#0ff;border:1px solid #fff;border-radius:50%;width:12px;height:12px}.eq-slider::-webkit-slider-thumb{appearance:none;cursor:pointer;background:#0ff;border:1px solid #fff;border-radius:50%;width:12px;height:12px}.volume-slider::-moz-range-thumb{cursor:pointer;background:#0ff;border:1px solid #fff;border-radius:50%;width:12px;height:12px}.eq-slider::-moz-range-thumb{cursor:pointer;background:#0ff;border:1px solid #fff;border-radius:50%;width:12px;height:12px}#volume-percentage{color:#0ff;text-align:right;min-width:30px;font-family:"Press Start 2P",monospace;font-size:.35rem}.eq-controls{opacity:.5;margin-top:10px;transition:opacity .3s}.eq-controls.enabled{opacity:1}.eq-band{align-items:center;gap:8px;margin-bottom:8px;display:flex}.eq-band label{color:#fff;min-width:40px;font-family:"Press Start 2P",monospace;font-size:.35rem}.eq-value{color:#0ff;text-align:right;min-width:35px;font-family:"Press Start 2P",monospace;font-size:.35rem}.option-item>label:not(.toggle-label){color:#fff;margin-bottom:5px;font-family:"Press Start 2P",monospace;font-size:.4rem;display:block}.share-menu-button{color:#0ff;cursor:pointer;text-align:center;background:linear-gradient(135deg,#00ffff26,#ff00ff26);border:2px solid #00ffff80;border-radius:8px;width:100%;padding:12px;font-family:"Press Start 2P",monospace;font-size:.5rem;transition:all .3s}.share-menu-button:hover{background:linear-gradient(135deg,#00ffff4d,#ff00ff4d);border-color:#0ff;transform:translateY(-2px);box-shadow:0 4px 15px #00ffff80}.share-menu-button:active{transform:translateY(0)}.playback-controls{justify-content:center;gap:10px;display:flex}.playback-button{color:#fff9;cursor:pointer;background:#ffffff0d;border:1px solid #fff3;border-radius:8px;flex-direction:column;flex:1;align-items:center;gap:4px;padding:10px 8px;font-family:"Press Start 2P",monospace;font-size:.4rem;transition:all .2s;display:flex}.playback-button .button-icon{filter:grayscale();font-size:1rem;transition:filter .2s}.playback-button .button-label{text-transform:uppercase;font-size:.35rem}.playback-button:hover{background:#ffffff1a;border-color:#00ffff4d}.playback-button.active{color:#0ff;background:linear-gradient(135deg,#0ff3,#f0f3);border-color:#0ff}.playback-button.active .button-icon{filter:grayscale(0%)}.share-modal{z-index:10000;opacity:0;pointer-events:none;justify-content:center;align-items:center;width:100%;height:100%;transition:opacity .3s;display:flex;position:fixed;top:0;left:0}.share-modal.show{opacity:1;pointer-events:all}.share-modal-overlay{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background:#000000d9;width:100%;height:100%;position:absolute;top:0;left:0}.share-modal-content{background:linear-gradient(135deg,#1a0033 0%,#0a001a 100%);border:2px solid #0ff;border-radius:15px;width:90%;max-width:400px;padding:30px;transition:transform .3s;position:relative;transform:scale(.9);box-shadow:0 0 40px #0ff6}.share-modal.show .share-modal-content{transform:scale(1)}.share-modal-close{color:#0ff;cursor:pointer;background:0 0;border:none;padding:5px 10px;font-size:1.5rem;transition:transform .2s;position:absolute;top:10px;right:10px}.share-modal-close:hover{transform:scale(1.2)}.share-modal h3{color:#0ff;text-align:center;margin:0 0 10px;font-family:"Press Start 2P",monospace;font-size:.9rem}.share-artist{color:#f0f;text-align:center;margin-bottom:25px;font-family:"Press Start 2P",monospace;font-size:.6rem}.share-links{flex-wrap:wrap;justify-content:center;gap:10px;margin-bottom:20px;display:flex}.share-link{color:#0ff;text-align:center;cursor:pointer;background:#00ffff1a;border:2px solid #00ffff4d;border-radius:8px;flex-direction:column;flex:1;align-items:center;gap:5px;min-width:100px;padding:12px;font-family:"Press Start 2P",monospace;font-size:.5rem;text-decoration:none;transition:all .3s;display:flex}.share-link:hover{background:#0ff3;border-color:#0ff;transform:translateY(-2px);box-shadow:0 4px 15px #00ffff4d}.share-icon{font-size:1.2rem}.share-twitter{color:#1da1f2;border-color:#1da1f280}.share-twitter:hover{background:#1da1f233;border-color:#1da1f2}.share-facebook{color:#1877f2;border-color:#1877f280}.share-facebook:hover{background:#1877f233;border-color:#1877f2}.share-url{margin-bottom:15px}.share-url-input{color:#0ff;text-align:center;background:#00000080;border:1px solid #00ffff4d;border-radius:5px;width:100%;padding:10px;font-family:VT323,monospace;font-size:.9rem}.share-url-input:focus{border-color:#0ff;outline:none;box-shadow:0 0 10px #00ffff4d}.share-status{text-align:center;min-height:20px;margin-top:10px;font-family:"Press Start 2P",monospace;font-size:.5rem}.share-status.success{color:#0f0}.share-status.error{color:red}@media (width<=500px){.share-modal-content{padding:20px}.share-modal h3{font-size:.7rem}.share-links{flex-direction:column}.share-link{min-width:100%}}