@import "https://fonts.googleapis.com/css2?family=Syncopate:wght@400;700&family=Space+Grotesk:wght@300;400;700&display=swap";:root{--primary:red;--primary-hover:#b91c1c;--bg-deep:#050505;--bg-card:#0a0a0acc;--text-main:#fff;--text-muted:#666;--accent-glitch:#0ff;--glass-border:#f003;--shadow-red:0 0 15px #f006;--transition:all .2s ease-in-out}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-deep);color:var(--text-main);-webkit-font-smoothing:antialiased;font-family:Space Grotesk,sans-serif;overflow-x:hidden}body:after{content:"";opacity:.05;pointer-events:none;z-index:10000;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");width:100%;height:100%;position:fixed;top:0;left:0}h1,h2,h3{text-transform:uppercase;letter-spacing:.1em;font-family:Syncopate,sans-serif}.scanlines{pointer-events:none;z-index:9999;background:linear-gradient(#12101000 50%,#0000001a 50%) 0 0/100% 4px,linear-gradient(90deg,#ff000005,#00ff0003,#0000ff05) 0 0/3px 100%;width:100%;height:100%;position:fixed;top:0;left:0}.bg-glow{z-index:-1;background:radial-gradient(circle,#1a0000 0%,#050505 100%);width:100%;height:100%;position:fixed;top:0;left:0}.glow-red{filter:blur(80px);background:radial-gradient(circle,#ff00000d 0%,#0000 70%);width:600px;height:600px;position:absolute}header{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:100;background:#050505cc;border-bottom:1px solid #ffffff0d;justify-content:space-between;align-items:center;height:100px;padding:0 5%;display:flex;position:sticky;top:0}.logo{color:var(--text-main);text-shadow:2px 2px var(--primary);letter-spacing:-2px;font-size:1.8rem;font-weight:700}nav ul{gap:3rem;list-style:none;display:flex}nav a{color:var(--text-muted);text-transform:uppercase;transition:var(--transition);font-size:.8rem;font-weight:700;text-decoration:none}nav a:hover,nav a.active{color:var(--primary)}.btn-primary{background:var(--primary);color:#fff;cursor:pointer;transition:var(--transition);clip-path:polygon(10% 0%,100% 0%,90% 100%,0% 100%);border:none;padding:10px 24px;font-family:Syncopate,sans-serif;font-size:.7rem;font-weight:700}.btn-primary:hover{color:#000;box-shadow:var(--shadow-red);background:#fff}.hero{align-items:center;gap:4rem;height:80vh;padding:0 5%;display:flex;position:relative;overflow:hidden}.hero:after{content:"";opacity:.15;pointer-events:none;z-index:0;background:url(/assets/speaker-u5AjfZJM.png) 50%/contain no-repeat;width:60%;height:100%;position:absolute;top:0;right:-5%;transform:rotate(-10deg)scale(1.3)}.hero-content{z-index:1;position:relative}.hero-content h1{color:#fff;margin-bottom:2rem;font-size:5rem;line-height:.9}.hero-content p{color:var(--text-muted);border-left:3px solid var(--primary);max-width:450px;margin-bottom:3rem;padding-left:20px;font-size:1.1rem}.beats-grid{background:#ffffff0d;border:1px solid #ffffff0d;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1px;display:grid}.beat-card{aspect-ratio:1;background:#000;position:relative;overflow:hidden}.beat-thumb img{object-fit:cover;filter:grayscale(.8)contrast(1.2);width:100%;height:100%;transition:all .4s}.beat-card:hover .beat-thumb img{filter:grayscale(0)contrast(1.5);transform:scale(1.05)}.beat-overlay{opacity:0;background:#ff00001a;flex-direction:column;justify-content:flex-end;width:100%;height:100%;padding:20px;transition:all .3s;display:flex;position:absolute;top:0;left:0}.beat-card:hover .beat-overlay{opacity:1;background:linear-gradient(#0000,#000000e6)}.music-player{border-top:2px solid var(--primary);z-index:1000;background:#000;align-items:center;width:100%;height:100px;padding:0 5%;display:flex;position:fixed;bottom:0;left:0}.player-info{align-items:center;gap:20px;min-width:300px;display:flex}.mini-cover{filter:grayscale()contrast(1.5);width:60px;height:60px}.player-controls{flex-direction:column;flex:1;align-items:center;display:flex}.btn-icon{color:#fff;cursor:pointer;background:0 0;border:none}.btn-icon:hover{color:var(--primary)}.progress-bar{background:#222;width:100%;max-width:600px;height:2px;margin-top:10px;position:relative}.progress-current{background:var(--primary);width:40%;height:100%;box-shadow:0 0 10px var(--primary);position:absolute}@media (width<=1024px){.hero-content h1{font-size:3rem}.hero:after{opacity:.05;background-position:100% 0;width:100%;right:-20%}}@keyframes glitch{0%{transform:translate(0)}20%{color:var(--accent-glitch);transform:translate(-3px,3px)}40%{transform:translate(-3px,-3px)}60%{color:var(--primary);transform:translate(3px,3px)}80%{transform:translate(3px,-3px)}to{transform:translate(0)}}.logo:hover,h1 span:hover{text-shadow:2px 0 red,-2px 0 #0ff;animation:.2s linear infinite glitch}#visualizer{pointer-events:none;opacity:.3;z-index:-1;width:100%;height:100%;position:absolute;top:0;left:0}.music-player{overflow:hidden}.modal-overlay{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);z-index:2000;background:#000000f2;justify-content:center;align-items:center;width:100%;height:100%;padding:20px;display:flex;position:fixed;top:0;left:0}.modal-content{border-left:2px solid var(--primary);background:#000;width:100%;max-width:500px;padding:40px;animation:.3s cubic-bezier(.4,0,.2,1) modalIn}@keyframes modalIn{0%{opacity:0;transform:translateY(20px)scale(.95)}to{opacity:1;transform:translateY(0)scale(1)}}.modal-header{justify-content:space-between;align-items:center;margin-bottom:30px;display:flex}.modal-header h2{letter-spacing:2px;font-size:1.5rem}.upload-zone{text-align:center;cursor:pointer;transition:var(--transition);background:#ffffff05;border:1px dashed #ffffff1a;margin-bottom:30px;padding:40px}.upload-zone:hover{border-color:var(--primary);background:#ff00000d}.upload-zone p{margin-top:15px;font-size:.8rem;font-weight:700}.upload-form{flex-direction:column;gap:15px;display:flex}.dark-input{color:#fff;transition:var(--transition);background:#0a0a0a;border:1px solid #ffffff0d;padding:15px;font-family:Space Grotesk,sans-serif;font-size:.8rem;font-weight:700}.dark-input:focus{border-color:var(--primary);background:#111;outline:none}.dark-input::placeholder{color:#333}.progress-container{width:100%;max-width:500px;color:var(--text-muted);justify-content:center;align-items:center;gap:10px;margin-top:12px;font-size:.75rem;display:flex}.progress-bar{cursor:pointer;background:#ffffff1a;border-radius:2px;flex:1;height:4px;position:relative;overflow:hidden}.progress-bar:hover{height:6px}.progress-current{background:var(--primary);border-radius:2px;width:0%;height:100%;transition:width .1s linear}.mini-cover{object-fit:cover;border-radius:6px;width:44px;height:44px;display:none}.card-active{box-shadow:0 0 20px #ff2d554d;border:1px solid var(--primary)!important}.beat-thumb{position:relative;overflow:hidden}.play-overlay{opacity:0;background:#00000059;justify-content:center;align-items:center;transition:opacity .2s;display:flex;position:absolute;inset:0}.beat-card:hover .play-overlay,.card-active .play-overlay{opacity:1}.volume-slider{cursor:pointer;background:#ffffff1a;border-radius:2px;width:80px;height:4px;position:relative;overflow:hidden}.volume-current{pointer-events:none;background:#fff;border-radius:2px;width:70%;height:100%}.play-overlay{cursor:pointer}.card-active{border:1px solid var(--primary)!important;box-shadow:0 0 20px #ff2d5540!important}.beat-thumb img{-webkit-user-select:none;user-select:none;-webkit-user-drag:none;pointer-events:none}.beat-card{-webkit-user-select:none;user-select:none}.cover-placeholder{background:#111;border-radius:8px;justify-content:center;align-items:center;width:100%;height:100%;display:flex}.beat-card{border-radius:8px;flex-direction:column;height:auto;overflow:visible;aspect-ratio:auto!important;display:flex!important}.beat-thumb{aspect-ratio:1;border-radius:8px;width:100%;overflow:hidden}.beat-info{padding:15px 10px}#app{padding-bottom:120px}