:root{--bg:#07070f;--cyan:#00f0ff;--magenta:#b44dff;--dim:#6c6c8a;--accent:var(--cyan);--accent2:var(--magenta);--card:#0a0a1499}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg);color:#d8d8f0;min-height:100vh;padding-bottom:6rem;font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif}a{color:var(--cyan);text-decoration:none}a:hover{text-decoration:underline}.topbar{z-index:100;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:#07070ff2;border-bottom:1px solid #1a1a2e;justify-content:space-between;align-items:center;padding:1rem 1.5rem;display:flex;position:sticky;top:0}.brand{background:linear-gradient(90deg, var(--cyan), var(--magenta));-webkit-text-fill-color:transparent;letter-spacing:.1em;-webkit-background-clip:text;background-clip:text;font-family:Orbitron,sans-serif;font-size:1.1rem;font-weight:900}.nav{letter-spacing:.05em;gap:1.5rem;font-size:.85rem;display:flex}.hero{text-align:center;padding:4rem 1.5rem 2rem}.hero h1{letter-spacing:-.02em;margin-bottom:.5rem;font-family:Orbitron,sans-serif;font-size:clamp(2rem,6vw,3.5rem);font-weight:900}.hero p{color:var(--dim);max-width:600px;margin:0 auto;font-size:.95rem}.filters{background:var(--card);border:1px solid #1a1a2e;border-radius:8px;max-width:1100px;margin:2rem auto;padding:1rem 1.5rem}.filter-row{flex-wrap:wrap;align-items:center;gap:.5rem;margin-bottom:.5rem;display:flex}.filter-label{letter-spacing:.2em;color:var(--dim);text-transform:uppercase;min-width:60px;font-size:.7rem}.chip{color:#d8d8f0;cursor:pointer;background:0 0;border:1px solid #2a2a3e;border-radius:20px;padding:.3rem .8rem;font-size:.8rem;transition:all .15s}.chip:hover{border-color:var(--cyan)}.chip.active{background:var(--cyan);color:var(--bg);border-color:var(--cyan)}.albums{max-width:1100px;margin:2rem auto;padding:0 1.5rem}.albums h2{letter-spacing:.3em;color:var(--cyan);text-transform:uppercase;margin-bottom:1rem;font-size:.8rem}.album-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1rem;display:grid}.album-card{background:var(--card);cursor:pointer;border:1px solid #1a1a2e;border-radius:8px;transition:all .2s;overflow:hidden}.album-card:hover{border-color:var(--cyan);transform:translateY(-2px);box-shadow:0 4px 20px #00f0ff26}.album-cover{aspect-ratio:1;color:var(--cyan);background:linear-gradient(135deg,#1a1a2e,#2a2a4e);justify-content:center;align-items:center;font-size:3rem;display:flex}.album-meta{padding:.8rem 1rem}.album-title{margin-bottom:.2rem;font-size:.95rem;font-weight:600}.album-info{color:var(--dim);font-size:.75rem}.tracks{max-width:1100px;margin:2rem auto;padding:0 1.5rem}.tracks h2{letter-spacing:.3em;color:var(--cyan);text-transform:uppercase;margin-bottom:1rem;font-size:.8rem}.track{background:var(--card);border:1px solid #1a1a2e;border-radius:6px;grid-template-columns:36px 1fr 80px 60px 100px;align-items:center;gap:1rem;margin-bottom:.4rem;padding:.8rem 1rem;transition:all .15s;display:grid}.track:hover{border-color:var(--cyan);background:#00f0ff0a}.track.playing{border-color:var(--magenta);background:#b44dff14;box-shadow:inset 0 0 20px #b44dff0d}.track-play{border:1px solid var(--cyan);width:36px;height:36px;color:var(--cyan);cursor:pointer;background:0 0;border-radius:50%;justify-content:center;align-items:center;font-size:.9rem;transition:all .15s;display:flex}.track-play:hover{background:var(--cyan);color:var(--bg)}.track-info{min-width:0}.track-title{white-space:nowrap;text-overflow:ellipsis;font-size:.95rem;font-weight:500;overflow:hidden}.track-dj{color:var(--magenta);font-size:.8rem}.track-bpm{color:var(--dim);text-align:right;font-family:Courier New,monospace;font-size:.8rem}.track-key{color:var(--cyan);text-align:center;background:#00f0ff1a;border-radius:4px;padding:.2rem .4rem;font-family:Courier New,monospace;font-size:.7rem}.track-dur{color:var(--dim);text-align:right;font-family:Courier New,monospace;font-size:.8rem}.player{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-top:1px solid var(--cyan);z-index:200;background:#07070ffa;grid-template-columns:200px 1fr 200px;align-items:center;gap:1.5rem;padding:.8rem 1.5rem;display:grid;position:fixed;bottom:0;left:0;right:0}.player-now{align-items:center;gap:.8rem;min-width:0;display:flex}.player-cover{background:linear-gradient(135deg, var(--cyan), var(--magenta));border-radius:4px;flex-shrink:0;width:40px;height:40px}.player-title{white-space:nowrap;text-overflow:ellipsis;font-size:.85rem;font-weight:500;overflow:hidden}.player-dj{color:var(--magenta);font-size:.7rem}.player-controls{align-items:center;gap:1rem;display:flex}.player-controls button{border:1px solid var(--cyan);color:var(--cyan);cursor:pointer;background:0 0;border-radius:50%;width:36px;height:36px;font-size:.9rem}.player-controls button.play{width:44px;height:44px;font-size:1.1rem}.player-progress{cursor:pointer;background:#1a1a2e;border-radius:2px;flex:1;height:4px;position:relative}.player-fill{background:linear-gradient(90deg, var(--cyan), var(--magenta));border-radius:2px;width:0%;height:100%}.player-time{color:var(--dim);text-align:center;min-width:90px;font-family:Courier New,monospace;font-size:.75rem}.player-volume{align-items:center;gap:.5rem;display:flex}.player-volume input[type=range]{accent-color:var(--cyan);width:100px}@media (max-width:768px){.track{grid-template-columns:36px 1fr 60px}.track-bpm,.track-key{display:none}.player{grid-template-columns:1fr;gap:.5rem}.player-now{display:none}}