*{box-sizing:border-box}body{margin:0;font-family:Inter,Arial,sans-serif;background:var(--bg);color:var(--text)}a{color:inherit}.app{min-height:100vh;background:radial-gradient(circle at top,var(--primary),transparent 35%),var(--bg);padding:22px}.shell{max-width:1120px;margin:auto}.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:24px;align-items:center}.card{background:color-mix(in srgb,var(--secondary),transparent 12%);border:1px solid #ffffff20;border-radius:28px;padding:24px;box-shadow:0 24px 80px #0005}.logo{max-width:190px;max-height:88px;object-fit:contain}.player{text-align:center}.art{width:210px;height:210px;border-radius:50%;object-fit:cover;background:#fff;margin:auto;display:block;border:8px solid #ffffff22}.play{width:88px;height:88px;border:0;border-radius:50%;background:var(--accent);color:#fff;font-size:34px;margin:20px auto;display:grid;place-items:center;cursor:pointer}.now{font-size:22px;font-weight:800}.artist{opacity:.75;margin-top:6px}.socials{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}.socials a,.nav a{background:#ffffff17;text-decoration:none;padding:10px 13px;border-radius:999px}.nav{display:flex;gap:10px;flex-wrap:wrap;margin:24px 0}.section{margin:28px 0}.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.item{background:#ffffff10;border:1px solid #ffffff18;border-radius:20px;padding:18px}.mini{opacity:.7}.form input,.form textarea{width:100%;padding:13px 14px;border:0;border-radius:14px;margin-bottom:10px}.form button,.install{border:0;background:var(--primary);color:white;padding:13px 16px;border-radius:14px;font-weight:800}.bottom-player{position:sticky;bottom:15px;margin-top:20px;background:#ffffffe8;color:#111827;border-radius:22px;padding:12px 16px;display:flex;align-items:center;gap:12px;box-shadow:0 20px 60px #0005}.bottom-player img{width:48px;height:48px;border-radius:12px;object-fit:cover}.equalizer{height:60px;display:flex;gap:5px;align-items:end;justify-content:center;margin:18px 0}.equalizer span{width:8px;background:#fff8;border-radius:9px;animation:eq 1s infinite alternate}.equalizer span:nth-child(2n){animation-duration:.7s}.equalizer span:nth-child(3n){animation-duration:1.25s}@keyframes eq{from{height:10px}to{height:55px}}@media(max-width:800px){.hero,.grid{grid-template-columns:1fr}.app{padding:14px}.card{padding:18px;border-radius:22px}.art{width:180px;height:180px}}