*{margin:0;padding:0;box-sizing:border-box}body{margin:0;font-family:Courier New,monospace;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#0f0f23;color:#fff;min-height:100vh}#root{min-height:100vh}::-webkit-scrollbar{width:10px}::-webkit-scrollbar-track{background:#1a1a2e}::-webkit-scrollbar-thumb{background:#333;border-radius:5px}::-webkit-scrollbar-thumb:hover{background:#555}::selection{background:#ffe66d;color:#1a1a2e}button{font-family:Courier New,monospace}button:focus:not(:focus-visible){outline:none}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #ffe66d;outline-offset:2px}.skip-link{position:absolute;top:-100px;left:0;background:#ffe66d;color:#000;padding:12px 24px;text-decoration:none;font-weight:700;z-index:10000;border-radius:0 0 8px;transition:top .2s}.skip-link:focus{top:0}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.toast{position:fixed;top:20px;right:20px;background:#1a1a2e;color:#fff;padding:16px 24px;border-radius:8px;box-shadow:0 4px 12px #00000080;z-index:9999;min-width:250px;animation:slideIn .3s ease-out;border-left:4px solid #ffe66d}.toast-success{border-left-color:#4ade80}.toast-error{border-left-color:#f87171}.toast-info{border-left-color:#60a5fa}@keyframes slideIn{0%{transform:translate(400px);opacity:0}to{transform:translate(0);opacity:1}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}.toast{animation:none}}.modal-overlay{position:fixed;inset:0;background:#000c;display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px}.modal-content{background:#1a1a2e;border:3px solid #333;border-radius:10px;max-width:500px;width:100%;max-height:90vh;overflow-y:auto;box-shadow:0 20px 60px #00000080}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:20px;border-bottom:2px solid #333}.modal-header h2{margin:0;color:#ffe66d;font-size:18px;letter-spacing:3px;font-family:Courier New,monospace}.modal-close{background:transparent;border:none;color:#bbb;font-size:32px;cursor:pointer;line-height:1;padding:0;width:32px;height:32px;transition:color .2s}.modal-close:hover{color:#fff}.modal-content form{padding:20px}.form-group label{display:block;color:#bbb;font-size:12px;letter-spacing:2px;margin-bottom:10px;font-family:Courier New,monospace}.radio-label{display:flex;align-items:center;padding:10px;margin-bottom:8px;background:#ffffff0d;border:2px solid #333;border-radius:5px;cursor:pointer;transition:all .2s;color:#ccc;font-size:14px}.radio-label:hover{background:#ffffff1a;border-color:#555}.radio-label input[type=radio]{margin-right:12px;cursor:pointer}.radio-label input[type=radio]:checked+span{color:#ffe66d;font-weight:700}.form-group textarea,.form-group input[type=text],.form-group input[type=password]{width:100%;padding:12px;background:#ffffff0d;border:2px solid #333;color:#fff;font-family:Courier New,monospace;font-size:13px;border-radius:5px;box-sizing:border-box;resize:vertical}.form-group textarea:focus,.form-group input:focus{outline:none;border-color:#ffe66d;background:#ffffff14}.modal-actions{display:flex;justify-content:flex-end;gap:12px;padding-top:20px;border-top:2px solid #333}.btn-primary,.btn-secondary{padding:10px 20px;border:2px solid;border-radius:5px;font-family:Courier New,monospace;font-size:13px;letter-spacing:1px;cursor:pointer;transition:all .2s}.btn-primary{background:linear-gradient(135deg,#ff6b6b,#ee5a5a);border-color:#ff6b6b;color:#fff}.btn-primary:hover{background:linear-gradient(135deg,#ff8a8a,#ff7a7a);transform:translateY(-2px);box-shadow:0 4px 12px #ff6b6b66}.btn-secondary{background:transparent;border-color:#555;color:#bbb}.btn-secondary:hover{background:#ffffff0d;border-color:#777;color:#ccc}.share-modal-content{max-width:550px}.share-track-info{padding:20px;text-align:center;border-bottom:2px solid #333}.share-track-title{font-size:20px;font-weight:700;color:#ffe66d;margin-bottom:8px;font-family:Courier New,monospace;letter-spacing:2px}.share-track-genre{font-size:14px;color:#888;letter-spacing:3px;font-family:Courier New,monospace}.share-social-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:20px}.share-social-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:18px 12px;background:#ffffff0d;border:2px solid #333;border-radius:8px;text-decoration:none;color:#ccc;font-size:12px;transition:all .3s;cursor:pointer;position:relative;overflow:hidden}.share-social-btn:hover{background:var(--social-color);border-color:var(--social-color);color:#fff;transform:translateY(-3px);box-shadow:0 6px 20px #0000004d}.share-social-icon{font-size:32px;margin-bottom:8px;transition:transform .3s}.share-social-btn:hover .share-social-icon{transform:scale(1.2)}.share-social-name{font-family:Courier New,monospace;letter-spacing:1px;font-size:11px}.share-copy-section{padding:20px;border-top:2px solid #333;display:flex;gap:10px}.share-url-input{flex:1;padding:12px;background:#ffffff0d;border:2px solid #333;color:#ffe66d;font-family:Courier New,monospace;font-size:11px;border-radius:5px;cursor:pointer}.share-url-input:focus{outline:none;border-color:#ffe66d;background:#ffffff14}.share-copy-btn{padding:12px 20px;background:linear-gradient(135deg,#00d9ff,#00b8d4);border:2px solid #00D9FF;color:#fff;font-family:Courier New,monospace;font-size:12px;letter-spacing:1px;border-radius:5px;cursor:pointer;transition:all .3s;white-space:nowrap}.share-copy-btn:hover{background:linear-gradient(135deg,#00e5ff,#00c9e6);transform:translateY(-2px);box-shadow:0 4px 12px #00d9ff66}.share-copy-btn.copied{background:linear-gradient(135deg,#00ff41,#00d936);border-color:#00ff41}.modal-footer{padding:15px 20px;text-align:center;border-top:2px solid #333}.share-tagline{margin:0;color:#ffe66d;font-size:14px;font-family:Impact,Arial Black,sans-serif;letter-spacing:2px;text-transform:uppercase}@media(max-width:600px){.modal-content{max-width:100%}.modal-header h2{font-size:16px}.radio-label{font-size:12px}.share-social-grid{grid-template-columns:repeat(2,1fr);gap:10px;padding:15px}.share-social-btn{padding:15px 10px}.share-social-icon{font-size:28px}.share-social-name{font-size:10px}.share-copy-section{flex-direction:column}.share-url-input{font-size:10px}}.home-container{min-height:100vh;background:#0a0a0a;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:Courier New,monospace;padding:20px;position:relative;overflow:auto}@media(max-width:768px){.home-container{height:100vh;overflow-y:auto;justify-content:flex-start}}.bg-gradient{position:absolute;inset:0;background:transparent;pointer-events:none}.bg-noise{position:absolute;inset:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");opacity:.03;pointer-events:none}.logo-section{margin-bottom:25px;text-align:center;z-index:1}.logo-wrapper{position:relative;display:inline-block}.main-logo{width:clamp(180px,40vw,280px);height:auto;filter:drop-shadow(0 0 20px rgba(255,69,0,.6)) drop-shadow(0 0 40px rgba(155,48,255,.4));animation:logoGlow 3s ease-in-out infinite alternate;cursor:pointer;transition:transform .3s}.main-logo:hover{transform:scale(1.05)}@keyframes logoGlow{0%{filter:drop-shadow(0 0 20px rgba(255,69,0,.6)) drop-shadow(0 0 40px rgba(155,48,255,.4))}to{filter:drop-shadow(0 0 30px rgba(255,107,0,.8)) drop-shadow(0 0 50px rgba(155,48,255,.6))}}.site-header{text-align:center;margin-bottom:20px;z-index:1}.header-tagline{color:#ccc;font-size:12px;letter-spacing:2px;margin-top:8px;font-weight:400;opacity:.8}.tagline{color:#ccc;font-size:13px;letter-spacing:6px;margin-top:12px;text-shadow:0 0 10px rgba(255,69,0,.3);font-weight:700}.genre-selector{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-bottom:20px;max-width:600px;z-index:1}.genre-btn{padding:10px 18px;background:#ffffff1a;border:2px solid #666;color:#ddd;font-size:13px;letter-spacing:2px;cursor:pointer;transition:all .2s;font-family:Courier New,monospace;font-weight:700;border-radius:8px;text-shadow:0 1px 2px rgba(0,0,0,.5)}.genre-btn.active{background:linear-gradient(135deg,#ff4500,#ff6b00,#9b30ff);border-color:#ff6b00;color:#fff;box-shadow:0 0 15px #ff450080}.genre-btn:hover:not(.active){background:#fff3;border-color:#bbb;color:#fff;transform:translateY(-2px)}.boombox{width:100%;max-width:700px;background:#c99f6e;border-radius:15px;padding:35px 30px;box-shadow:0 30px 80px #0009,inset 0 2px 8px #0003,0 0 0 12px #a67c52,0 0 0 15px #c99f6e;position:relative;border:3px solid #A67C52;z-index:1}.boombox:before{content:none}@keyframes logoGlow{0%,to{filter:drop-shadow(0 0 8px rgba(255,230,109,.3)) drop-shadow(0 4px 12px rgba(0,0,0,.6))}50%{filter:drop-shadow(0 0 15px rgba(255,230,109,.5)) drop-shadow(0 4px 12px rgba(0,0,0,.6))}}.logo-section{display:flex;justify-content:center;align-items:center;padding:8px 20px;margin-top:-24px;margin-bottom:-20px;position:relative;z-index:2}.player-logo{max-width:320px;width:45%;height:auto;opacity:.95;filter:drop-shadow(0 0 25px rgba(255,230,109,.6)) drop-shadow(0 8px 30px rgba(0,0,0,.9)) drop-shadow(0 12px 45px rgba(0,0,0,.7));animation:logoGlow 3s ease-in-out infinite;transition:all .3s;object-fit:cover;object-position:right center;clip-path:inset(0 0 0 8% round 25px);transform:translate(4%)}.player-logo:hover{opacity:.75;transform:scale(1.05)}.progress-bar-container{margin:18px 20px;padding:12px 15px;background:linear-gradient(180deg,#1a1a1a,#0a0a0a,#000);border-radius:8px;border:3px solid #2a2a2a;box-shadow:inset 0 2px 10px #000c,0 2px 8px #00000080}.progress-bar-labels{display:flex;justify-content:space-between;margin-bottom:8px}.progress-time{color:#74c0fc;font-size:12px;font-family:Courier New,monospace;font-weight:700;text-shadow:0 0 5px rgba(116,192,252,.5)}.progress-bar-track{width:100%;height:8px;background:#1a1a1a;border-radius:4px;border:2px solid #0a0a0a;box-shadow:inset 0 2px 5px #000c;overflow:hidden;position:relative}.progress-bar-fill{height:100%;background:linear-gradient(90deg,#ff4500,#ff6b00,#ffe66d);border-radius:2px;box-shadow:0 0 8px #ffe66d99,0 0 15px #ff450066;transition:width .1s linear;animation:progressPulse 2s ease-in-out infinite}@keyframes progressPulse{0%,to{box-shadow:0 0 8px #ffe66d99,0 0 15px #ff450066}50%{box-shadow:0 0 12px #ffe66dcc,0 0 20px #ff450099}}.upload-callout{display:flex;justify-content:center;align-items:center;padding:15px 20px;margin:-10px 0 20px;position:relative;z-index:3}.callout-text{font-family:Impact,Arial Black,sans-serif;font-size:clamp(14px,2.5vw,18px);font-weight:900;letter-spacing:.5px;text-transform:uppercase;color:#ffe66d;text-shadow:2px 2px 0px rgba(0,0,0,.8),-1px -1px 0px rgba(0,0,0,.8),1px -1px 0px rgba(0,0,0,.8),-1px 1px 0px rgba(0,0,0,.8),0 0 20px rgba(255,230,109,.6),0 0 40px rgba(255,69,0,.4);padding:8px 20px;background:#1a1a1ab3;border:2px dashed rgba(255,230,109,.4);border-radius:6px;transform:rotate(-.5deg);animation:graffitiGlow 3s ease-in-out infinite}@keyframes graffitiGlow{0%,to{text-shadow:2px 2px 0px rgba(0,0,0,.8),-1px -1px 0px rgba(0,0,0,.8),1px -1px 0px rgba(0,0,0,.8),-1px 1px 0px rgba(0,0,0,.8),0 0 20px rgba(255,230,109,.6),0 0 40px rgba(255,69,0,.4)}50%{text-shadow:2px 2px 0px rgba(0,0,0,.8),-1px -1px 0px rgba(0,0,0,.8),1px -1px 0px rgba(0,0,0,.8),-1px 1px 0px rgba(0,0,0,.8),0 0 30px rgba(255,230,109,.8),0 0 50px rgba(255,69,0,.6)}}.graffiti-wall{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:95%;height:88%;pointer-events:none;z-index:1000;opacity:.85}.banksy-text{position:absolute;font-family:Arial Black,Impact,sans-serif;font-weight:900;text-transform:uppercase;letter-spacing:clamp(2px,.5vw,6px);line-height:.9;filter:drop-shadow(5px 5px 12px rgba(0,0,0,.95));white-space:nowrap}.banksy-text.line-1{top:10%;left:2%;font-size:clamp(32px,7vw,72px);color:#00ff41;text-shadow:4px 4px 0px rgba(0,0,0,.95),-3px -3px 0px rgba(0,60,20,.9),0 0 40px rgba(0,255,65,.9),0 0 80px rgba(0,255,65,.6);transform:rotate(-4deg);animation:banksyGlow1 3s ease-in-out infinite;text-align:left}.banksy-text.line-2{top:28%;right:1%;font-size:clamp(26px,5.5vw,58px);color:#ff1744;text-shadow:5px 5px 0px rgba(0,0,0,.95),-3px -3px 0px rgba(80,0,0,.9),0 0 45px rgba(255,23,68,.95),0 0 90px rgba(255,23,68,.7);transform:rotate(3deg);animation:banksyGlow2 3.5s ease-in-out infinite;text-align:right}.banksy-text.line-3{top:50%;left:50%;transform:translate(-50%,-50%) rotate(-2deg);font-size:clamp(52px,11vw,110px);color:gold;text-shadow:6px 6px 0px rgba(0,0,0,.95),-4px -4px 0px rgba(80,60,0,.9),0 0 50px rgba(255,215,0,1),0 0 100px rgba(255,140,0,.8);animation:banksyGlow3 2.5s ease-in-out infinite;letter-spacing:clamp(6px,1.5vw,16px);text-align:center}.banksy-text.line-4{bottom:8%;left:3%;font-size:clamp(28px,6vw,64px);color:#00e5ff;text-shadow:4px 4px 0px rgba(0,0,0,.95),-3px -3px 0px rgba(0,60,80,.9),0 0 40px rgba(0,229,255,.9),0 0 80px rgba(0,229,255,.6);transform:rotate(2deg);animation:banksyGlow4 4s ease-in-out infinite;text-align:left}.banksy-text:after{content:"";position:absolute;bottom:-8px;left:15%;width:3px;height:clamp(15px,3vh,35px);background:linear-gradient(180deg,currentColor 0%,transparent 100%);opacity:.6;filter:blur(1px)}.banksy-text.line-2:after{left:65%;height:clamp(20px,4vh,45px)}.banksy-text.line-3:after{left:45%;height:clamp(25px,5vh,55px);width:4px}@keyframes banksyGlow1{0%,to{filter:drop-shadow(5px 5px 12px rgba(0,0,0,.95));opacity:.85}50%{filter:drop-shadow(5px 5px 20px rgba(0,255,65,.7));opacity:.95}}@keyframes banksyGlow2{0%,to{filter:drop-shadow(5px 5px 12px rgba(0,0,0,.95));opacity:.83}50%{filter:drop-shadow(5px 5px 25px rgba(255,23,68,.8));opacity:.93}}@keyframes banksyGlow3{0%,to{filter:drop-shadow(6px 6px 15px rgba(0,0,0,.95));opacity:.88}50%{filter:drop-shadow(6px 6px 30px rgba(255,215,0,.9));opacity:1}}@keyframes banksyGlow4{0%,to{filter:drop-shadow(5px 5px 12px rgba(0,0,0,.95));opacity:.84}50%{filter:drop-shadow(5px 5px 22px rgba(0,229,255,.7));opacity:.94}}.add-to-tape-cta{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:25px 50px;background:linear-gradient(135deg,#ff4500,#ff6b00,#9b30ff);border:4px solid #FF6B00;border-radius:20px;text-decoration:none;font-family:Courier New,monospace;margin-bottom:30px;box-shadow:0 10px 30px #ff450099,0 0 50px #9b30ff66,inset 0 2px #fff3;transition:all .3s;cursor:pointer;z-index:2;animation:ctaPulse 2s ease-in-out infinite}@keyframes ctaPulse{0%,to{box-shadow:0 10px 30px #ff450099,0 0 50px #9b30ff66,inset 0 2px #fff3}50%{box-shadow:0 10px 30px #ff4500cc,0 0 70px #9b30ff99,inset 0 2px #fff3}}.add-to-tape-cta:hover{transform:scale(1.05) translateY(-3px);box-shadow:0 15px 40px #ff4500cc,0 0 80px #9b30ff99,inset 0 2px #ffffff4d}.add-to-tape-cta:active{transform:scale(1.02) translateY(-1px)}.cta-icon{font-size:48px;animation:tapeRock 1.5s ease-in-out infinite}@keyframes tapeRock{0%,to{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}.cta-text{font-size:24px;font-weight:700;letter-spacing:4px;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.5),0 0 20px rgba(255,255,255,.3)}.cta-subtext{font-size:12px;letter-spacing:2px;color:#ffffffe6;text-shadow:0 1px 5px rgba(0,0,0,.5)}.tweeter-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;gap:20px;overflow:visible;position:relative;z-index:1}.vu-meters-center{display:flex;gap:15px;align-items:center;justify-content:center;flex:1}.speakers-display-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;gap:15px;overflow:visible;position:relative;z-index:1}.speaker-tower{display:flex;flex-direction:column;gap:15px;align-items:center;overflow:visible}.tweeter{width:clamp(50px,10vw,70px);height:clamp(50px,10vw,70px);overflow:visible;background:radial-gradient(circle at 30% 30%,#1a1a1a,#0a0a0a 40%,#000);border-radius:50%;border:4px solid #2a2a2a;display:flex;align-items:center;justify-content:center;box-shadow:inset 0 4px 20px #000000f2,inset 0 1px 3px #ffffff1a,0 3px 12px #000000e6,0 0 0 1px #ffffff0d;position:relative}.tweeter:before{content:"";position:absolute;width:85%;height:85%;border-radius:50%;border:2px solid rgba(255,255,255,.05);pointer-events:none}.tweeter-cone{width:50%;height:50%;background:radial-gradient(circle,#1a1a1a,#0a0a0a,#000);border-radius:50%;border:2px solid #0a0a0a;transition:all .2s;box-shadow:inset 0 2px 5px #000c}.tweeter-cone.playing{box-shadow:0 0 30px #74c0fc,0 0 50px #74c0fccc,inset 0 0 15px #74c0fc99;animation:tweeterPulse .3s ease-in-out infinite alternate}@keyframes tweeterPulse{0%{transform:scale(1)}to{transform:scale(1.15)}}.woofer-tower{display:flex;flex-direction:column;gap:12px;align-items:center;overflow:visible}.woofer{background:radial-gradient(circle at 30% 30%,#1a1a1a,#0a0a0a 40%,#000);border-radius:50%;border:5px solid #2a2a2a;display:flex;align-items:center;justify-content:center;box-shadow:inset 0 6px 30px #000000fa,inset 0 2px 5px #ffffff14,0 4px 15px #000000e6,0 0 0 2px #ffffff08;overflow:visible;position:relative}.woofer:before{content:"";position:absolute;width:90%;height:90%;border-radius:50%;border:3px solid rgba(255,255,255,.04);pointer-events:none}.woofer-large{width:clamp(140px,24vw,190px);height:clamp(140px,24vw,190px)}.woofer-medium{width:clamp(110px,19vw,150px);height:clamp(110px,19vw,150px)}.woofer-small{width:clamp(85px,15vw,115px);height:clamp(85px,15vw,115px)}.woofer-cone{width:75%;height:75%;background:radial-gradient(circle at center,#2a2a2a,#1a1a1a,#0a0a0a 60%,#000);border-radius:50%;border:4px solid #0a0a0a;transition:transform .05s ease-out,box-shadow .05s ease-out;box-shadow:inset 0 5px 15px #000000f2,inset 0 -3px 10px #ffffff05,0 0 0 1px #ffffff08;position:relative;overflow:visible}.woofer-cone:before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:35%;height:35%;background:radial-gradient(circle,#3a3a3a,#2a2a2a,#1a1a1a);border-radius:50%;box-shadow:inset 0 2px 5px #000c,0 2px 5px #00000080;border:2px solid #0a0a0a}.woofer-cone.playing:before,.woofer-cone.playing:after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100%;height:100%;border-radius:50%;border:2px solid rgba(255,150,100,calc(.3 + var(--bass-level, 0) * .5));animation:sonarPulse calc(1.5s - var(--bass-level, 0) * .8s) ease-out infinite;pointer-events:none;opacity:calc(.5 + var(--bass-level, 0) * .5)}.woofer-cone.playing:after{animation-delay:calc(.75s - var(--bass-level, 0) * .4s)}@keyframes sonarPulse{0%{width:100%;height:100%;opacity:1;border-width:3px}50%{opacity:.6;border-width:2px}to{width:calc(140% + var(--bass-level, 0) * 40%);height:calc(140% + var(--bass-level, 0) * 40%);opacity:0;border-width:1px}}.display{flex:1;background:linear-gradient(180deg,#1a1a1a,#0f0f0f,#0a0a0a);border-radius:8px;padding:18px 16px;border:3px solid #000;box-shadow:inset 0 2px 10px #000c,0 2px 8px #00000080;position:relative}.display:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0px,rgba(0,0,0,.02) 1px,transparent 2px,transparent 3px);border-radius:8px;pointer-events:none}.display-content{color:#74c0fc;font-size:14px;font-family:Courier New,monospace;text-shadow:0 0 5px rgba(116,192,252,.5),0 0 10px rgba(116,192,252,.3);line-height:1.8;font-weight:700;position:relative;z-index:1;letter-spacing:1px}.display-row{display:flex;justify-content:space-between;align-items:center;gap:8px;width:100%;overflow:hidden}.display-row span:first-child{flex-shrink:0;white-space:nowrap}.display-row span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;text-align:right;min-width:0}.display-status{margin-top:6px;text-align:center;letter-spacing:2px;font-weight:900;font-size:1.1em;color:#74c0fc;text-shadow:0 0 8px rgba(116,192,252,.6),0 0 15px rgba(116,192,252,.4)}.cassette-deck{background:linear-gradient(180deg,#c8c8c8,#a8a8a8,#909090);border-radius:15px;padding:20px;margin-bottom:25px;border:3px solid #707070;box-shadow:inset 0 2px 10px #0000004d,inset 0 -1px 3px #ffffff1a,0 3px 8px #0006}.cassette{width:clamp(250px,50vw,300px);height:clamp(140px,30vw,165px);background:linear-gradient(180deg,#2a2a2a,#1a1a1a);border-radius:10px;margin:0 auto;position:relative;box-shadow:0 5px 20px #00000080,inset 0 2px 5px #0009;border:3px solid #444}.cassette-label{position:absolute;top:8px;left:12px;right:12px;height:48px;background:linear-gradient(180deg,#2a2a2a,#1a1a1a);border-radius:4px;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:8px;box-shadow:inset 0 2px 5px #00000080;border:1px solid #000}.cassette-title{font-size:14px;color:gold;font-weight:700;letter-spacing:2px;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;text-shadow:0 0 5px rgba(255,215,0,.5)}.cassette-meta{font-size:11px;color:orange;margin-top:4px;font-weight:700;text-shadow:0 0 3px rgba(255,165,0,.5)}.tape-window{position:absolute;bottom:15px;left:30px;right:30px;height:60px;background:linear-gradient(180deg,#000c,#0009);border-radius:8px;display:flex;justify-content:space-between;align-items:center;padding:0 20px;border:2px solid #555;box-shadow:inset 0 2px 10px #000000e6}.tape-reel{width:45px;height:45px;background:radial-gradient(circle,#3a3a3a,#2a2a2a,#1a1a1a);border-radius:50%;border:4px solid #666;display:flex;align-items:center;justify-content:center;transition:transform .03s linear;position:relative;box-shadow:inset 0 0 15px #000c,0 3px 10px #0009}.reel-center{width:15px;height:15px;background:#555;border-radius:50%;position:relative;box-shadow:0 0 5px #000c,inset 0 1px 3px #ffffff4d}.reel-center:before{content:"";position:absolute;width:35px;height:3px;background:linear-gradient(90deg,transparent 0%,#888 20%,#888 80%,transparent 100%);top:50%;left:50%;transform:translate(-50%,-50%);border-radius:2px}.reel-center:after{content:"";position:absolute;width:3px;height:35px;background:linear-gradient(180deg,transparent 0%,#888 20%,#888 80%,transparent 100%);top:50%;left:50%;transform:translate(-50%,-50%);border-radius:2px}.tape-strip{flex:1;height:8px;background:linear-gradient(180deg,#4a3820,#5a4830,#4a3820);margin:0 10px;border-radius:3px;box-shadow:inset 0 1px 3px #00000080;border:1px solid #3a2810}.control-panel{display:flex;justify-content:center;align-items:center;gap:18px;margin-bottom:25px}.transport-btn{width:60px;height:60px;background:linear-gradient(180deg,#333,#111);border:4px solid #FF6B00;border-radius:12px;color:#fff;font-size:22px;cursor:pointer;box-shadow:0 6px 15px #00000080,inset 0 2px #0000004d,0 0 20px #ff6b004d;transition:all .2s}.transport-btn:hover{background:linear-gradient(180deg,#555,#333);transform:translateY(-2px)}.transport-btn:active{transform:translateY(0)}.transport-btn-main{width:90px;height:90px;border-radius:50%;border:5px solid #FF4500;font-size:36px;background:linear-gradient(135deg,#ff4500,#ff6b00,#9b30ff);box-shadow:0 10px 30px #ff4500b3,0 0 50px #9b30ff80,inset 0 -3px #0000004d}.transport-btn-main.playing{background:linear-gradient(135deg,#9b30ff,#7b2cbf,#ff4500);border-color:#9b30ff;box-shadow:0 10px 30px #9b30ffb3,0 0 50px #ff450080,inset 0 -3px #0000004d;animation:playPulse 1s ease-in-out infinite}@keyframes playPulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.transport-btn-main:disabled{opacity:.5;cursor:not-allowed}.boombox-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;width:70px;height:70px;background:linear-gradient(180deg,#333,#111);border:4px solid #666;border-radius:12px;cursor:pointer;font-family:Courier New,monospace;transition:all .2s;box-shadow:0 6px 15px #00000080,inset 0 2px #0000004d}.boombox-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 20px #0009,inset 0 2px #0006}.boombox-btn:active:not(:disabled){transform:translateY(0)}.boombox-btn:disabled{opacity:.3;cursor:not-allowed}.btn-icon{font-size:24px;line-height:1}.btn-label{font-size:9px;letter-spacing:1px;font-weight:700;color:#bbb}.like-btn{border-color:#ff6b6b;box-shadow:0 6px 15px #00000080,inset 0 2px #0000004d,0 0 20px #ff6b6b4d}.like-btn:hover:not(:disabled){box-shadow:0 8px 20px #0009,inset 0 2px #ffffff26,0 0 25px #ff6b6b80}.like-btn .btn-label{color:#ff6b6b}.like-btn.liked{background:linear-gradient(180deg,#ff6b6b,#ee5a5a);border-color:#ff8a8a;box-shadow:0 6px 15px #ff6b6b99,inset 0 -3px #0000004d,0 0 30px #ff6b6bcc;animation:likePulse 1s ease-in-out infinite}.like-btn.liked .btn-label{color:#fff}@keyframes likePulse{0%,to{box-shadow:0 6px 15px #ff6b6b99,0 0 30px #ff6b6bcc}50%{box-shadow:0 6px 15px #ff6b6b99,0 0 40px #ff6b6b}}.share-btn{border-color:#00d9ff;box-shadow:0 6px 15px #00000080,inset 0 2px #0000004d,0 0 20px #00d9ff4d}.share-btn:hover:not(:disabled){box-shadow:0 8px 20px #0009,inset 0 2px #ffffff26,0 0 30px #00d9ff99;animation:shareGlow 1s ease-in-out infinite}.share-btn .btn-label{color:#00d9ff}@keyframes shareGlow{0%,to{box-shadow:0 6px 15px #0009,0 0 25px #00d9ff80}50%{box-shadow:0 6px 15px #0009,0 0 40px #00d9ffe6}}.report-btn{border-color:#f33;box-shadow:0 6px 15px #00000080,inset 0 2px #ffffff1a,0 0 20px #ff33334d}.report-btn:hover:not(:disabled){box-shadow:0 8px 20px #0009,inset 0 2px #ffffff26,0 0 25px #ff333380;transform:translateY(-1px)}.report-btn .btn-label{color:#f33}.report-btn .btn-icon{filter:drop-shadow(0 0 3px rgba(255,51,51,.6))}.error-message{margin-top:15px;padding:10px;background:#ff6b6b33;border:2px solid #ff6b6b;border-radius:5px;color:#ff6b6b;text-align:center;font-size:12px}.footer{margin-top:30px;text-align:center;color:#999;z-index:1}.footer p{font-size:13px;letter-spacing:3px;margin:0}.footer-small{font-size:11px;margin-top:8px!important;color:#555}.footer-links{margin-top:12px;display:flex;gap:10px;justify-content:center;align-items:center;font-size:11px}.footer-links a{color:#ff6b00;text-decoration:none;transition:color .2s}.footer-links a:hover{color:#9b30ff}.footer-links span{color:#333}@media(max-width:1024px){.boombox{max-width:600px}}@media(max-width:768px){.genre-btn{padding:12px 20px;font-size:14px;min-width:44px;min-height:44px}.boombox-btn{min-width:44px;min-height:44px;padding:10px}.transport-btn{min-width:48px;min-height:48px}.transport-btn-main{min-width:64px;min-height:64px}}@media(max-width:600px){.boombox{padding:20px 15px}.speakers-display-row{gap:10px}.display{padding:10px}.display-content{font-size:12px}.transport-btn{width:48px;height:48px;font-size:16px}.transport-btn-main{width:64px;height:64px;font-size:24px}.boombox-btn,.genre-btn{padding:12px 16px;font-size:12px;min-width:44px;min-height:44px}.add-to-tape-cta{padding:20px 30px;min-height:60px}}@media(max-width:375px){.tagline{font-size:11px;letter-spacing:3px}.genre-selector{gap:8px;padding:0 10px}.boombox{padding:15px 8px}.display-content{font-size:11px}.cassette-title{font-size:12px}.footer{font-size:11px}.footer-small{font-size:9px}}.add-track-btn{display:inline-block;padding:12px 24px;background:linear-gradient(135deg,#ff4500,#ff6b00);border:2px solid #FF6B00;border-radius:12px;color:#fff;text-decoration:none;font-family:Courier New,monospace;font-size:14px;font-weight:700;letter-spacing:2px;margin-bottom:20px;box-shadow:0 4px 12px #ff450066,0 0 20px #ff6b004d;transition:all .2s;cursor:pointer;z-index:2}.add-track-btn:hover{transform:translateY(-2px);box-shadow:0 6px 16px #ff450099,0 0 30px #ff6b0080}.add-track-btn:active{transform:translateY(0)}.stereo-controls{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:20px;padding:12px 20px;background:linear-gradient(180deg,#3a3a3a,#2a2a2a);border-radius:10px;border:2px solid #555;box-shadow:inset 0 2px 5px #0006,0 2px 5px #0000004d}.control-label{color:#bbb;font-size:12px;font-weight:700;letter-spacing:2px;text-shadow:0 1px 2px rgba(0,0,0,.5)}.genre-dropdown{padding:8px 16px;background:linear-gradient(180deg,#2a2a2a,#1a1a1a);border:2px solid #FF6B00;border-radius:8px;color:#fff;font-family:Courier New,monospace;font-size:13px;font-weight:700;letter-spacing:1px;cursor:pointer;box-shadow:inset 0 2px 5px #00000080,0 0 15px #ff6b004d;transition:all .2s}.genre-dropdown:hover{border-color:#ff4500;box-shadow:inset 0 2px 5px #00000080,0 0 20px #ff6b0080}.genre-dropdown:focus{outline:none;border-color:#9b30ff;box-shadow:inset 0 2px 5px #00000080,0 0 20px #9b30ff80}.genre-dropdown option{background:#1a1a1a;color:#fff}.reel-section{display:flex;justify-content:space-around;align-items:flex-start;margin-bottom:30px;padding:30px 25px;z-index:1;background:linear-gradient(180deg,#3a3a3a,#2a2a2a,#1a1a1a);border-radius:15px;border:5px solid #4a4a4a;box-shadow:inset 0 5px 25px #000c,inset 0 -2px 10px #ffffff0d,0 8px 25px #000000b3;position:relative}.large-reel-container{position:relative;width:clamp(120px,25vw,180px);height:clamp(120px,25vw,180px)}.large-reel{width:100%;height:100%;background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.9) 0%,transparent 15%),radial-gradient(circle,#f5f5f0,#e8e8e0,#dcdcd0 60%,#d0d0c0);border-radius:50%;border:15px solid #c8c8bc;display:flex;align-items:center;justify-content:center;position:relative;box-shadow:inset 0 0 60px #0003,inset 0 15px 50px #ffffffb3,inset 0 -15px 50px #0000004d,0 20px 50px #000000b3,0 0 0 5px #c8c8bccc,0 0 0 8px #ffffff80;transition:transform .05s linear}.large-reel:before{content:"";position:absolute;width:70%;height:70%;background:radial-gradient(circle,transparent 32%,rgba(74,56,32,.5) 33%,rgba(90,72,48,.7) 34%,rgba(74,56,32,.6) 35%,transparent 36%,rgba(90,72,48,.8) 37%,rgba(106,88,64,.9) 38%,rgba(90,72,48,.7) 39%,transparent 40%,rgba(74,56,32,.6) 41%,rgba(90,72,48,.7) 42%,rgba(74,56,32,.5) 43%,transparent 44%,rgba(90,72,48,.9) 45%,rgba(106,88,64,1) 46%,rgba(90,72,48,.8) 47%,transparent 48%,rgba(74,56,32,.7) 49%,rgba(90,72,48,.8) 50%,rgba(74,56,32,.6) 51%,transparent 52%,rgba(90,72,48,.9) 53%,rgba(106,88,64,1) 54%,rgba(90,72,48,.8) 55%,transparent 56%,rgba(74,56,32,.6) 57%,rgba(90,72,48,.7) 58%,rgba(74,56,32,.5) 59%,transparent 60%,rgba(90,72,48,.8) 61%,rgba(106,88,64,.9) 62%,rgba(90,72,48,.7) 63%,transparent 64%);border-radius:50%;z-index:1;pointer-events:none}.reel-hub{width:30%;height:30%;background:radial-gradient(circle at 35% 35%,rgba(255,255,255,.8) 0%,transparent 15%),radial-gradient(circle,#2a2a2a,#1a1a1a,#0a0a0a);border-radius:50%;position:relative;border:4px solid #3a3a3a;box-shadow:0 5px 20px #000000e6,inset 0 3px 12px #fff3,inset 0 -3px 12px #000c}.reel-hub:before{content:"";position:absolute;width:25%;height:25%;background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.6) 0%,transparent 20%),radial-gradient(circle,#444,#333,#222);border-radius:50%;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:inset 0 2px 4px #000c,0 1px 2px #fff3}.reel-hub:after{content:"";position:absolute;width:10%;height:10%;background:#555;border-radius:50%;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:inset 0 1px 2px #000000e6}.reel-spoke{position:absolute;width:130%;height:18%;background:linear-gradient(90deg,transparent 0%,#1a1a1a 15%,#2a2a2a 25%,#3a3a3a 50%,#2a2a2a 75%,#1a1a1a 85%,transparent 100%);top:50%;left:50%;transform:translate(-50%,-50%);border-radius:4px;box-shadow:0 3px 8px #000c,inset 0 1px 3px #ffffff1a,inset 0 -1px 3px #0009;z-index:1}.reel-spoke-2{transform:translate(-50%,-50%) rotate(120deg)}.reel-spoke-3{transform:translate(-50%,-50%) rotate(240deg)}.tape-path{flex:1;display:flex;align-items:center;justify-content:center;padding:0 20px;position:relative}.tape-strand{width:100%;height:10px;background:linear-gradient(180deg,#3a2818,#5a4830 20%,#6a5840,#5a4830 80%,#3a2818);border-radius:4px;box-shadow:inset 0 3px 8px #000c,inset 0 -1px 4px #ffffff1a,0 3px 8px #00000080;border-top:1px solid rgba(0,0,0,.8);border-bottom:1px solid rgba(90,72,48,.6);position:relative}.tape-strand:after{content:"";position:absolute;top:2px;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.1) 20%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.1) 80%,transparent 100%);border-radius:4px}.control-deck{background:linear-gradient(180deg,#2a3a4a,#1a2a3a,#0a1a2a);border-radius:12px;padding:25px;margin-bottom:25px;border:5px solid #1a2a3a;box-shadow:inset 0 3px 15px #000c,inset 0 -2px 8px #ffffff0d,0 5px 15px #000000b3;display:flex;position:relative;z-index:1;justify-content:space-between;align-items:center;gap:20px}.track-info-panel{flex:1;display:flex;flex-direction:column;gap:12px}.info-display{display:flex;align-items:center;gap:10px;background:#0000004d;padding:8px 12px;border-radius:6px;border:2px solid #555}.info-label{font-size:11px;font-weight:700;color:gold;letter-spacing:1px;text-shadow:0 0 5px rgba(255,215,0,.5)}.info-value{font-size:13px;color:orange;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-shadow:0 0 3px rgba(255,165,0,.5)}.genre-knob-container{display:flex;flex-direction:column;align-items:center;gap:8px}.knob-label{font-size:10px;font-weight:700;color:#333;letter-spacing:2px;text-shadow:0 1px 0 rgba(255,255,255,.3)}.genre-knob{width:80px;height:80px;background:radial-gradient(circle,#555,#444 40%,#333);border:6px solid #888;border-radius:50%;color:gold;font-family:Courier New,monospace;font-size:11px;font-weight:700;text-align:center;cursor:pointer;box-shadow:0 5px 15px #0009,inset 0 3px 10px #00000080,inset 0 -2px 5px #fff3;transition:all .2s;appearance:none;-webkit-appearance:none;padding:8px}.genre-knob:hover{transform:scale(1.05);box-shadow:0 6px 18px #000000b3,inset 0 3px 10px #00000080,inset 0 -2px 5px #ffffff4d}.genre-knob:focus{outline:none;border-color:gold;box-shadow:0 6px 18px #000000b3,0 0 0 3px #ffd70080,inset 0 3px 10px #00000080}.transport-panel{display:flex;justify-content:center;align-items:center;gap:15px;margin-bottom:25px;padding:25px;background:linear-gradient(180deg,#2a3a4a,#1a2a3a,#0a1a2a);border-radius:12px;border:5px solid #1a2a3a;position:relative;z-index:1;box-shadow:inset 0 4px 15px #000c,inset 0 -2px 8px #ffffff0d,0 6px 20px #000000b3}.mechanical-btn{width:60px;height:60px;background:linear-gradient(180deg,#707070,#505050,#404040);border:4px solid #888;border-radius:12px;color:#fff;font-size:24px;cursor:pointer;box-shadow:0 6px #2a2a2a,0 8px 15px #0009,inset 0 2px 5px #fff3;transition:all .1s;display:flex;align-items:center;justify-content:center;position:relative}.mechanical-btn:hover:not(:disabled){background:linear-gradient(180deg,gray,#606060,#505050);transform:translateY(-2px);box-shadow:0 8px #2a2a2a,0 10px 20px #000000b3,inset 0 2px 5px #ffffff4d}.mechanical-btn:active:not(:disabled){transform:translateY(4px);box-shadow:0 2px #2a2a2a,0 4px 8px #00000080,inset 0 2px 8px #0006}.mechanical-btn:disabled{opacity:.4;cursor:not-allowed}.add-btn{background:linear-gradient(180deg,#ff6b00,#ff4500,#cc3700);border-color:#ff8c00;text-decoration:none;display:flex;align-items:center;justify-content:center;position:relative}.add-btn:hover{background:linear-gradient(180deg,#ff7b10,#ff5510,#dd4700);transform:translateY(-2px);box-shadow:0 8px #2a2a2a,0 10px 20px #ff4500b3,inset 0 2px 5px #ffffff4d}.add-btn:active{transform:translateY(4px);box-shadow:0 2px #2a2a2a,0 4px 8px #ff450080,inset 0 2px 8px #0006}.add-btn:after{content:"Ladda upp din egen låt • Anonymt • Gratis";position:absolute;bottom:100%;left:50%;transform:translate(-50%) translateY(-10px);background:#1a1a2ef2;color:#ffe66d;padding:8px 16px;border-radius:8px;font-size:11px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .3s,transform .3s;border:1px solid #ffe66d;box-shadow:0 4px 12px #000c;z-index:1000}.add-btn:hover:after{opacity:1;transform:translate(-50%) translateY(-15px)}.genre-selector-btn{width:auto;min-width:80px;height:60px;padding:0 15px;background:linear-gradient(180deg,#707070,#505050,#404040);border:4px solid #888;border-radius:12px;color:#fff;font-family:Courier New,monospace;font-size:14px;font-weight:700;letter-spacing:1px;cursor:pointer;transition:all .2s;box-shadow:0 6px #2a2a2a,0 8px 15px #00000080,inset 0 2px 5px #fff3;text-align:center;text-align-last:center;appearance:none;-webkit-appearance:none;-moz-appearance:none}.genre-selector-btn:hover{background:linear-gradient(180deg,gray,#606060,#505050);transform:translateY(-2px);box-shadow:0 8px #2a2a2a,0 10px 20px #000000b3,inset 0 2px 5px #ffffff4d}.genre-selector-btn:active{transform:translateY(4px);box-shadow:0 2px #2a2a2a,0 4px 8px #00000080,inset 0 2px 8px #0006}.genre-selector-btn option{background:#2a2a2a;color:#fff;padding:10px}.btn-symbol{font-size:28px;text-shadow:0 2px 4px rgba(0,0,0,.5);filter:drop-shadow(0 0 3px rgba(255,255,255,.3))}.play-btn{width:80px;height:80px;border-radius:50%;background:linear-gradient(135deg,#606060,#404040,#303030);border-color:#999}.play-btn.playing{background:linear-gradient(135deg,#4a7c59,#2d5a3d,#1d4a2d);box-shadow:0 6px #1a3a1a,0 8px 15px #0009,0 0 20px #4a7c5999,inset 0 2px 5px #fff3}.like-btn{background:linear-gradient(180deg,#806060,#604040,#503030)}.like-btn.liked{background:linear-gradient(180deg,#c06060,#a04040,#803030);border-color:#ff6b6b;box-shadow:0 6px #5a2020,0 8px 15px #ff6b6b66,0 0 20px #ff6b6b80,inset 0 2px 5px #fff3}.report-btn{background:linear-gradient(180deg,#707070,#505050,#404040)}@media(max-width:768px){.reel-section{padding:12px 8px;border:3px solid #4a4a4a}.large-reel-container{width:clamp(80px,20vw,120px);height:clamp(80px,20vw,120px)}.control-deck{flex-direction:column;padding:15px}.genre-knob{width:60px;height:60px;font-size:10px}.transport-panel{gap:10px;padding:15px}.mechanical-btn{width:50px;height:50px;font-size:20px}.genre-selector-btn{min-width:60px;height:50px;font-size:11px;padding:0 8px}.play-btn{width:65px;height:65px}.btn-symbol{font-size:22px}}@media(max-width:480px){.home-container{padding:5px;height:100vh}.boombox{padding:10px 6px;box-shadow:0 10px 40px #0009,inset 0 2px 8px #0003,0 0 0 4px #a67c52,0 0 0 5px #c99f6e}.large-reel-container{width:55px;height:55px}.reel-section{padding:8px 4px;margin-bottom:10px}.mechanical-btn{width:38px;height:38px;font-size:16px}.genre-selector-btn{min-width:42px;height:38px;font-size:8px;padding:0 3px}.play-btn{width:48px;height:48px}.tweeter-row{gap:5px;margin-bottom:8px}.tweeter{width:35px;height:35px}.vu-meters-center{gap:3px}.vu-meter{width:55px;height:55px;border:2px solid #2a2a2a}.vu-meter-label{font-size:7px}.vu-meter-needle{width:3px;height:48%;box-shadow:0 0 8px #f00c}.woofer-tower{gap:5px}.woofer-large{width:75px;height:75px}.woofer-medium{width:58px;height:58px}.woofer-small{width:45px;height:45px}.woofer{border:2px solid #2a2a2a}.woofer-cone{width:68%;height:68%;border:2px solid #0a0a0a}.woofer-cone:before{width:28%;height:28%}.speakers-display-row{gap:5px;margin-bottom:8px;flex-wrap:nowrap}.display{padding:8px 6px;min-width:0;flex:2;width:100%}.display-content{font-size:9px}.display-row{gap:5px}.display-row span:first-child{font-size:8px}.transport-panel{gap:4px;padding:8px 4px;margin-bottom:15px;border:2px solid #1a2a3a}.logo-section{padding:4px 8px;margin-top:-15px;margin-bottom:-12px}.player-logo{width:55%;max-width:180px}.upload-callout{padding:6px 10px;margin:-6px 0 10px}.callout-text{font-size:10px;padding:3px 8px;letter-spacing:.15px}.graffiti-wall{width:96%;height:82%}.banksy-text.line-1{font-size:24px;letter-spacing:2px;top:8%;left:2%}.banksy-text.line-2{font-size:19px;letter-spacing:1.3px;top:26%;right:1%}.banksy-text.line-3{font-size:36px;letter-spacing:4px}.banksy-text.line-4{font-size:20px;letter-spacing:1.5px;bottom:6%;left:2%}.banksy-text:after{height:12px}.banksy-text.line-2:after{height:15px}.banksy-text.line-3:after{height:18px;width:3px}.progress-bar-container{margin:10px;padding:8px 10px}.progress-time{font-size:10px}.progress-bar-track{height:6px}}.vu-meter{width:clamp(80px,18vw,110px);height:clamp(80px,18vw,110px);background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.1) 0%,transparent 20%),radial-gradient(circle,#1a1a1a,#0a0a0a);border-radius:50%;border:5px solid #2a2a2a;box-shadow:inset 0 3px 20px #000000e6,inset 0 -2px 10px #ffffff0d,0 5px 15px #000c;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;margin-top:15px}.vu-meter-scale{position:absolute;width:80%;height:80%;border-radius:50%;background:conic-gradient(from 135deg,#00ff00 0deg,#00ff00 60deg,#ffff00 60deg,#ffff00 90deg,#ff0000 90deg,#ff0000 135deg,transparent 135deg);opacity:.3}.vu-meter-needle{position:absolute;width:2px;height:40%;background:linear-gradient(180deg,transparent 0%,#ff0000 20%,#ff0000 100%);bottom:50%;left:50%;transform-origin:bottom center;transform:translate(-50%) rotate(-45deg);transition:transform .2s ease-out;box-shadow:0 0 5px #ff000080}.vu-meter-center{position:absolute;width:8px;height:8px;background:radial-gradient(circle,#666,#333);border-radius:50%;box-shadow:0 2px 5px #000c,inset 0 1px 2px #ffffff4d;z-index:2}.vu-meter-label{position:absolute;bottom:15%;font-size:10px;color:#888;font-weight:700;letter-spacing:1px;text-shadow:0 1px 2px rgba(0,0,0,.8)}@media(max-width:768px){.home-container{padding:10px 8px;height:100vh}.boombox{padding:15px 10px;max-width:100%;box-shadow:0 15px 50px #0009,inset 0 2px 8px #0003,0 0 0 6px #a67c52,0 0 0 8px #c99f6e}.reel-section{padding:10px 6px;margin-bottom:15px}.transport-panel{margin-bottom:18px}.tweeter-row{gap:8px;margin-bottom:12px;flex-wrap:wrap}.vu-meters-center{gap:6px;flex-direction:row;flex-wrap:wrap;justify-content:center}.vu-meter{width:65px;height:65px;border:3px solid #2a2a2a}.vu-meter-label{font-size:8px}.vu-meter-needle{width:3px;height:50%;box-shadow:0 0 8px #f00c}.tweeter{width:clamp(45px,10vw,60px);height:clamp(45px,10vw,60px)}.woofer-tower{gap:8px}.woofer-large{width:clamp(90px,18vw,120px);height:clamp(90px,18vw,120px)}.woofer-medium{width:clamp(70px,14vw,95px);height:clamp(70px,14vw,95px)}.woofer-small{width:clamp(55px,10vw,72px);height:clamp(55px,10vw,72px)}.speakers-display-row{gap:8px;margin-bottom:15px;flex-wrap:nowrap}.display{padding:12px 10px;flex:2;min-width:0;width:100%}.display-row{gap:6px}.logo-section{padding:6px 15px;margin-top:-20px;margin-bottom:-18px}.player-logo{width:55%;max-width:250px}.upload-callout{padding:10px 15px;margin:-10px 0 15px}.callout-text{font-size:13px;padding:5px 12px}.graffiti-wall{width:94%;height:80%}.banksy-text.line-1{font-size:20px;letter-spacing:1.5px;top:9%;left:2%}.banksy-text.line-2{font-size:16px;letter-spacing:1px;top:27%;right:1%}.banksy-text.line-3{font-size:30px;letter-spacing:3px}.banksy-text.line-4{font-size:17px;letter-spacing:1.2px;bottom:7%;left:2%}.banksy-text:after{height:10px}.banksy-text.line-2:after{height:12px}.banksy-text.line-3:after{height:15px;width:2.5px}.progress-bar-container{margin:12px 15px;padding:10px 12px}.progress-time{font-size:11px}.progress-bar-track{height:7px}.display-content{font-size:11px}.transport-panel{gap:8px;padding:15px;flex-wrap:wrap;justify-content:center}.control-deck{padding:15px}.track-info-panel{gap:8px}.info-display{font-size:11px}.logo-section{padding:20px 15px;margin-top:15px}.player-logo{width:70%;max-width:300px}.callout-text{font-size:15px;padding:6px 15px}}.tape-head-reader{position:absolute;bottom:18%;left:50%;transform:translate(-50%);width:60px;height:45px;background:linear-gradient(180deg,#2a2a2a,#1a1a1a,#0a0a0a);border-radius:8px;border:4px solid #3a3a3a;box-shadow:inset 0 5px 20px #000000f2,0 6px 20px #000000e6;z-index:3;display:flex;align-items:center;justify-content:center}.tape-head-reader:before{content:"";width:12px;height:28px;background:radial-gradient(ellipse,#888,#555 40%,#333);border-radius:6px;box-shadow:inset 0 3px 10px #000000e6,0 2px 6px #ffffff4d}.tape-head-reader:after{content:"";position:absolute;width:100%;height:14px;background:linear-gradient(180deg,transparent 0%,rgba(58,40,24,.6) 20%,rgba(90,72,48,.8) 50%,rgba(58,40,24,.6) 80%,transparent 100%);top:50%;transform:translateY(-50%);z-index:-1}@media(max-width:768px){.reel-section:before{left:22%;width:10px}.reel-section:after{right:22%;width:10px}.tape-head-reader{width:50px;height:38px}.tape-head-reader:before{width:10px;height:24px}.tape-head-reader:after{height:12px}}@media(max-width:480px){.reel-section{padding:10px 6px;margin-bottom:15px;border:2px solid #4a4a4a}.reel-section:before,.reel-section:after{width:8px}.tape-head-reader{width:45px;height:35px}.tape-head-reader:before{width:8px;height:20px}.tape-head-reader:after{height:10px}}@media(max-width:360px){.home-container{padding:3px;height:100vh}.boombox{padding:8px 4px;box-shadow:0 8px 30px #0009,inset 0 2px 8px #0003,0 0 0 3px #a67c52,0 0 0 4px #c99f6e}.reel-section{padding:6px 3px;margin-bottom:8px;border:2px solid #4a4a4a}.large-reel-container{width:48px;height:48px}.mechanical-btn{width:35px;height:35px;font-size:14px}.genre-selector-btn{min-width:38px;height:35px;font-size:7px;padding:0 2px}.play-btn{width:45px;height:45px}.tweeter-row{gap:4px;margin-bottom:6px}.tweeter{width:32px;height:32px}.vu-meters-center{gap:3px}.vu-meter{width:48px;height:48px}.vu-meter-label{font-size:6px}.vu-meter-needle{width:3px;height:45%;box-shadow:0 0 8px #f00c}.woofer-tower{gap:4px}.woofer-large{width:62px;height:62px}.woofer-medium{width:48px;height:48px}.woofer-small{width:38px;height:38px}.woofer{border:2px solid #2a2a2a}.woofer-cone{width:65%;height:65%;border:2px solid #0a0a0a}.woofer-cone:before{width:25%;height:25%;border:1px solid #0a0a0a}.speakers-display-row{gap:4px;margin-bottom:6px;flex-wrap:nowrap}.display{padding:6px 4px;min-width:0;flex:2;width:100%}.display-content{font-size:8px;line-height:1.5}.display-row{gap:4px}.display-row span:first-child{font-size:7px}.transport-panel{gap:3px;padding:6px 3px;margin-bottom:10px;border:2px solid #1a2a3a}.logo-section{padding:3px 6px;margin-top:-12px;margin-bottom:-10px}.player-logo{width:50%;max-width:150px}.upload-callout{padding:5px 8px;margin:-5px 0 8px}.callout-text{font-size:8px;padding:2px 6px;letter-spacing:.1px}.graffiti-wall{width:96%;height:78%}.banksy-text.line-1{font-size:16px;letter-spacing:1px;top:10%;left:1%}.banksy-text.line-2{font-size:13px;letter-spacing:.8px;top:28%;right:1%}.banksy-text.line-3{font-size:26px;letter-spacing:2.5px}.banksy-text.line-4{font-size:14px;letter-spacing:1px;bottom:8%;left:1%}.banksy-text:after{height:8px;width:2px}.banksy-text.line-2:after{height:10px}.banksy-text.line-3:after{height:12px}.progress-bar-container{margin:8px;padding:6px 8px}.progress-time{font-size:9px}.progress-bar-track{height:5px}}.upload-container{min-height:100vh;background:linear-gradient(135deg,#0a0a0a,#1a0a1a,#0f0520);display:flex;flex-direction:column;align-items:center;padding:20px;position:relative;overflow:hidden;font-family:Courier New,monospace}.back-link{position:absolute;top:20px;left:20px;background:transparent;border:2px solid #ff6b6b;color:#ff6b6b;padding:10px 20px;text-decoration:none;font-family:Courier New,monospace;font-size:14px;letter-spacing:2px;z-index:10;transition:all .2s}.back-link:hover{background:#ff6b6b1a}.upload-content{max-width:600px;width:100%;margin-top:60px;z-index:1}.upload-content h1{background:linear-gradient(135deg,#ff4500,#ff6b00,#9b30ff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-size:24px;letter-spacing:6px;margin-bottom:30px;text-align:center;filter:drop-shadow(0 0 20px rgba(255,69,0,.5))}.disclaimer-box{background:#ff45001a;border:3px solid #FF4500;border-radius:10px;padding:25px;margin-bottom:30px}.disclaimer-box h3{color:#ff4500;font-size:18px;letter-spacing:2px;margin-bottom:20px;text-align:center}.disclaimer-box h4{color:#ff6b00;font-size:14px;letter-spacing:2px;margin:15px 0 10px}.disclaimer-highlight{background:#ff450033;border:2px solid #FF6B00;border-radius:8px;padding:15px;margin:15px 0;text-align:center}.disclaimer-highlight p{color:#fff;font-size:16px;margin:0}.disclaimer-legal{background:#9b30ff1a;border:2px solid #9B30FF;border-radius:8px;padding:20px;margin:20px 0}.disclaimer-box ul{margin:15px 0;padding-left:20px;color:#ccc;font-size:14px;line-height:1.8}.disclaimer-box ul ul{margin-top:8px;padding-left:25px;font-size:13px}.disclaimer-box li{margin:8px 0}.disclaimer-box strong{color:#fff}.checkbox-label{display:flex;align-items:flex-start;gap:12px;margin-top:25px;padding:20px;background:#9b30ff26;border:2px solid #9B30FF;border-radius:8px;cursor:pointer;transition:all .2s}.checkbox-label:hover{background:#9b30ff40;box-shadow:0 0 20px #9b30ff4d}.checkbox-label input[type=checkbox]{width:24px;height:24px;cursor:pointer;margin-top:2px}.checkbox-label span{color:#fff;font-size:15px;line-height:1.6}.my-track-section{background:#0000004d;border:2px solid #333;border-radius:10px;padding:25px}.my-track-section h2{color:#bbb;font-size:12px;letter-spacing:3px;margin-bottom:20px}.track-info{background:#ffffff0d;border:2px solid #444;border-radius:5px;padding:15px;margin-bottom:20px}.info-row{display:flex;justify-content:space-between;padding:8px 0;color:#ccc;font-size:14px;border-bottom:1px solid #333}.info-row:last-child{border-bottom:none}.info-row span:first-child{color:#bbb}.delete-btn{width:100%;padding:15px;background:linear-gradient(135deg,#ff6b6b,#ee5a5a);border:none;border-radius:5px;color:#fff;font-size:14px;font-weight:700;letter-spacing:2px;cursor:pointer;font-family:Courier New,monospace;box-shadow:0 4px 15px #ff6b6b66;transition:all .2s}.delete-btn:hover{background:linear-gradient(135deg,#ff8a8a,#ff7a7a);transform:translateY(-2px)}.warning-text{margin-top:15px;padding:12px;background:#ff6b6b1a;border:2px solid #ff6b6b;border-radius:5px;color:#ff6b6b;font-size:12px;text-align:center}.upload-form-section{background:#0000004d;border:2px solid #333;border-radius:10px;padding:25px}.disclaimer-box{background:#ffe66d1a;border:2px solid #ffe66d;border-radius:5px;padding:20px;margin-bottom:25px}.disclaimer-box h3{color:#ffe66d;font-size:14px;letter-spacing:2px;margin-bottom:15px}.disclaimer-box p{color:#ccc;font-size:13px;line-height:1.6;margin-bottom:10px}.disclaimer-box ul{color:#ccc;font-size:13px;line-height:1.8;padding-left:20px}.disclaimer-box ul ul{padding-left:25px;margin-top:5px}.checkbox-label{display:flex;align-items:center;margin-top:20px;padding:12px;background:#ffffff0d;border:2px solid #444;border-radius:5px;cursor:pointer;transition:all .2s}.checkbox-label:hover{background:#ffffff14;border-color:#ffe66d}.checkbox-label input[type=checkbox]{margin-right:12px;cursor:pointer;width:18px;height:18px}.checkbox-label span{color:#ccc;font-size:13px}.checkbox-label input:checked+span{color:#ffe66d;font-weight:700}.upload-form{margin-top:25px}.form-group{margin-bottom:20px}.form-group label{display:block;color:#bbb;font-size:11px;letter-spacing:2px;margin-bottom:8px}.form-group input[type=file]{display:block;width:100%;padding:12px;background:#ffffff0d;border:2px solid #444;color:#fff;font-family:Courier New,monospace;font-size:13px;border-radius:5px;cursor:pointer}.form-group input[type=text],.form-group select{width:100%;padding:12px;background:#ffffff0d;border:2px solid #444;color:#fff;font-family:Courier New,monospace;font-size:13px;border-radius:5px;box-sizing:border-box}.form-group input:focus,.form-group select:focus{outline:none;border-color:#ffe66d;background:#ffffff14}.form-group input:disabled,.form-group select:disabled{opacity:.5;cursor:not-allowed}.file-info{margin-top:10px;color:#4ecdc4;font-size:12px}.progress-bar{width:100%;height:40px;background:#222;border:2px solid #444;border-radius:5px;position:relative;margin-bottom:15px;overflow:hidden}.progress-fill{height:100%;background:linear-gradient(90deg,#4ecdc4,#3dbdb5);transition:width .3s}.progress-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;font-weight:700;font-size:14px;text-shadow:0 0 5px rgba(0,0,0,.5)}.error-message{padding:12px;background:#ff6b6b33;border:2px solid #ff6b6b;border-radius:5px;color:#ff6b6b;text-align:center;font-size:13px;margin-bottom:15px}.success-message{padding:12px;background:#4ecdc433;border:2px solid #4ecdc4;border-radius:5px;color:#4ecdc4;text-align:center;font-size:13px;margin-bottom:15px}.upload-btn{width:100%;padding:16px;background:linear-gradient(135deg,#4ecdc4,#3dbdb5);border:none;border-radius:5px;color:#fff;font-size:14px;font-weight:700;letter-spacing:3px;cursor:pointer;font-family:Courier New,monospace;box-shadow:0 4px 15px #4ecdc466;transition:all .2s}.upload-btn:hover:not(:disabled){background:linear-gradient(135deg,#6ee0d8,#5dd0c8);transform:translateY(-2px)}.upload-btn:disabled{opacity:.5;cursor:not-allowed}.footer-note{margin-top:40px;text-align:center;color:#999;font-size:10px;letter-spacing:1px;line-height:1.6;max-width:600px;z-index:1}@media(max-width:600px){.upload-content{padding:0 10px}.disclaimer-box{padding:15px}.disclaimer-box h3{font-size:12px}.disclaimer-box p,.disclaimer-box ul{font-size:11px}}.charts-container{min-height:100vh;background:linear-gradient(135deg,#1a1a2e,#16213e,#0f0f23);display:flex;flex-direction:column;align-items:center;padding:20px;position:relative;overflow:hidden;font-family:Courier New,monospace}.charts-content{max-width:700px;width:100%;margin-top:60px;z-index:1}.charts-content h1{color:#ffe66d;font-size:24px;letter-spacing:6px;margin-bottom:20px;text-align:center;text-shadow:0 0 20px rgba(255,230,109,.5)}.chart-title{color:#4ecdc4;font-size:18px;letter-spacing:4px;margin-bottom:30px;text-align:center}.loading{text-align:center;color:#bbb;font-size:14px;letter-spacing:3px;padding:40px}.chart-list{background:#0000004d;border:2px solid #333;border-radius:10px;overflow:hidden}.chart-item{display:flex;align-items:center;gap:15px;padding:15px 20px;border-bottom:2px solid #333;transition:background .2s}.chart-item:last-child{border-bottom:none}.chart-item:hover{background:#ffffff0d}.chart-position{font-size:20px;font-weight:700;color:#ffe66d;min-width:40px;text-align:center}.chart-item:nth-child(1) .chart-position{color:gold;font-size:24px}.chart-item:nth-child(2) .chart-position{color:silver;font-size:22px}.chart-item:nth-child(3) .chart-position{color:#cd7f32;font-size:22px}.chart-info{flex:1}.chart-track-title{color:#fff;font-size:14px;font-weight:700;margin-bottom:4px}.chart-meta{color:#bbb;font-size:11px;letter-spacing:1px}.chart-likes{color:#ff6b6b;font-size:14px;font-weight:700;min-width:80px;text-align:right}.no-data{text-align:center;padding:60px 20px;color:#bbb}.no-data p{font-size:14px;letter-spacing:2px;margin-bottom:10px}.no-data-sub{font-size:12px;color:#999}@media(max-width:600px){.chart-item{padding:12px 15px}.chart-position{min-width:35px;font-size:16px}.chart-item:nth-child(1) .chart-position,.chart-item:nth-child(2) .chart-position,.chart-item:nth-child(3) .chart-position{font-size:18px}.chart-track-title{font-size:13px}.chart-meta{font-size:10px}.chart-likes{font-size:12px;min-width:60px}}.admin-container{min-height:100vh;background:linear-gradient(135deg,#0a0a0a,#1a0a1a,#0f0520);padding:20px;position:relative;overflow-x:hidden;font-family:Courier New,monospace}.admin-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:40px;flex-wrap:wrap;gap:20px}.admin-header h1{background:linear-gradient(135deg,#ff4500,#ff6b00,#9b30ff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-size:32px;letter-spacing:4px;margin:0}.logout-btn{padding:12px 24px;background:linear-gradient(135deg,#9b30ff,#7b2cbf);border:3px solid #9B30FF;border-radius:10px;color:#fff;font-size:14px;font-weight:700;cursor:pointer;font-family:Courier New,monospace;letter-spacing:2px;transition:all .2s;box-shadow:0 4px 15px #9b30ff80}.logout-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px #9b30ffb3}.admin-login-box{max-width:450px;margin:100px auto;background:#00000080;border:3px solid #FF4500;border-radius:20px;padding:40px;box-shadow:0 20px 60px #000000b3,0 0 50px #ff45004d;z-index:1}.admin-login-box h1{background:linear-gradient(135deg,#ff4500,#ff6b00,#9b30ff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-size:28px;letter-spacing:4px;margin-bottom:10px;text-align:center}.admin-subtitle{color:#bbb;font-size:14px;letter-spacing:2px;text-align:center;margin-bottom:30px}.login-form{display:flex;flex-direction:column;gap:20px}.form-group{display:flex;flex-direction:column;gap:8px}.form-group label{color:#ccc;font-size:12px;letter-spacing:2px;font-weight:700}.form-group input{padding:14px;background:#ffffff0d;border:2px solid #444;border-radius:8px;color:#fff;font-size:16px;font-family:Courier New,monospace;transition:all .2s}.form-group input:focus{outline:none;border-color:#ff4500;box-shadow:0 0 20px #ff45004d}.login-btn{padding:16px;background:linear-gradient(135deg,#ff4500,#9b30ff);border:none;border-radius:10px;color:#fff;font-size:16px;font-weight:700;letter-spacing:2px;cursor:pointer;font-family:Courier New,monospace;transition:all .2s;box-shadow:0 6px 20px #ff450080;margin-top:10px}.login-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 25px #ff4500b3}.login-btn:disabled{opacity:.5;cursor:not-allowed}.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:20px;margin-bottom:40px}.stat-card{background:#ffffff0d;border:3px solid #444;border-radius:15px;padding:25px;text-align:center;transition:all .2s}.stat-card:hover{transform:translateY(-3px);box-shadow:0 10px 30px #00000080}.stat-card.alert{border-color:#ff6b00;box-shadow:0 0 20px #ff6b004d}.stat-card.danger{border-color:#ff6b6b;box-shadow:0 0 20px #ff6b6b4d}.stat-icon{font-size:36px;margin-bottom:10px}.stat-value{font-size:32px;font-weight:700;color:#fff;margin-bottom:8px}.stat-label{font-size:12px;letter-spacing:2px;color:#bbb;text-transform:uppercase}.flagged-section{background:#0000004d;border:3px solid #9B30FF;border-radius:20px;padding:30px;box-shadow:0 0 30px #9b30ff4d}.flagged-section h2{color:#9b30ff;font-size:24px;letter-spacing:3px;margin-bottom:25px;text-align:center}.empty-state{text-align:center;padding:60px 20px;color:#999;font-size:18px}.tracks-list{display:flex;flex-direction:column;gap:20px}.track-card{background:#ffffff0d;border:2px solid #555;border-radius:12px;padding:20px;transition:all .2s}.track-card:hover{border-color:#ff6b00;box-shadow:0 5px 20px #ff6b004d}.track-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:15px;gap:15px}.track-info h3{color:#fff;font-size:18px;margin:0 0 5px}.track-meta{color:#bbb;font-size:12px;margin:0}.report-badge{background:linear-gradient(135deg,#ff6b6b,#ee5a5a);padding:8px 16px;border-radius:20px;font-size:14px;font-weight:700;color:#fff;white-space:nowrap;box-shadow:0 3px 10px #ff6b6b80}.track-stats{display:flex;flex-wrap:wrap;gap:15px;margin-bottom:15px;padding-bottom:15px;border-bottom:1px solid #333;color:#ccc;font-size:13px}.moderation-actions{display:flex;gap:12px;flex-wrap:wrap}.mod-btn{flex:1;min-width:120px;padding:14px 20px;border:none;border-radius:10px;font-size:14px;font-weight:700;letter-spacing:2px;cursor:pointer;font-family:Courier New,monospace;transition:all .2s}.keep-btn{background:linear-gradient(135deg,#4caf50,#45a049);color:#fff;box-shadow:0 4px 15px #4caf5066}.keep-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px #4caf5099}.ban-btn{background:linear-gradient(135deg,#ff6b6b,#ee5a5a);color:#fff;box-shadow:0 4px 15px #ff6b6b66}.ban-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px #ff6b6b99}.moderation-result{background:#9b30ff1a;border:2px solid #9B30FF;border-radius:8px;padding:15px;color:#ccc;font-size:14px}.moderation-result strong{color:#fff}.admin-notes{margin-top:8px;font-style:italic;color:#ccc}.error-message{background:#ff6b6b33;border:2px solid #ff6b6b;border-radius:8px;padding:12px;color:#ff6b6b;text-align:center;margin-top:15px}.loading-spinner{text-align:center;padding:40px;font-size:24px;color:#ff6b00}@media(max-width:768px){.admin-header{flex-direction:column;text-align:center}.admin-header h1{font-size:24px}.stats-grid{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}.track-header,.moderation-actions{flex-direction:column}.mod-btn{min-width:100%}}